Initial Renamr scaffold: Tauri (Rust core + React/TS UI), naming-expression engine ported+tested

src/App.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+
+const APP_NAME = "Renamr";
+const APP_VERSION = "0.1.0";
+
+const DEFAULT_EXPRESSION = "{n} - {s00e00} - {t}";
+const DEFAULT_BINDINGS: Record<string, string> = {
+  n: "Example Show",
+  s00e00: "S01E01",
+  t: "Pilot",
+};
+
+export default function App() {
+  const [expression, setExpression] = useState(DEFAULT_EXPRESSION);
+  const [preview, setPreview] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    invoke<string>("render_expression", { expression, bindings: DEFAULT_BINDINGS })
+      .then((result) => {
+        if (!cancelled) {
+          setPreview(result);
+          setError(null);
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setPreview("");
+          setError(String(err));
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [expression]);
+
+  return (
+    <main className="shell">
+      <header>
+        <h1>{APP_NAME}</h1>
+        <p className="tagline">A fast, cross-platform media renamer.</p>
+        <p className="version">v{APP_VERSION}</p>
+      </header>
+
+      <section className="panel">
+        <label htmlFor="expression">Naming scheme</label>
+        <input
+          id="expression"
+          value={expression}
+          onChange={(e) => setExpression(e.target.value)}
+          spellCheck={false}
+        />
+
+        <div className="preview">
+          <span className="preview-label">Preview</span>
+          {error ? <span className="preview-error">{error}</span> : <span className="preview-value">{preview}</span>}
+        </div>
+      </section>
+    </main>
+  );
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/styles.css

@@ -0,0 +1,86 @@
+:root {
+  color-scheme: light dark;
+  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+body {
+  margin: 0;
+  background: #0f1222;
+  color: #f4f5fb;
+}
+
+.shell {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 48px 24px;
+}
+
+header h1 {
+  font-size: 2.25rem;
+  margin: 0;
+  background: linear-gradient(135deg, #5b4cf5, #38bdb2);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.tagline {
+  margin: 4px 0 0;
+  opacity: 0.8;
+}
+
+.version {
+  margin: 2px 0 0;
+  font-size: 0.8rem;
+  opacity: 0.5;
+}
+
+.panel {
+  margin-top: 32px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+label {
+  display: block;
+  font-size: 0.8rem;
+  opacity: 0.7;
+  margin-bottom: 8px;
+}
+
+input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(0, 0, 0, 0.25);
+  color: inherit;
+  font-size: 1rem;
+  font-family: ui-monospace, monospace;
+}
+
+.preview {
+  margin-top: 16px;
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.25);
+}
+
+.preview-label {
+  display: block;
+  font-size: 0.75rem;
+  opacity: 0.6;
+  margin-bottom: 4px;
+}
+
+.preview-value {
+  font-family: ui-monospace, monospace;
+}
+
+.preview-error {
+  color: #ff8080;
+  font-family: ui-monospace, monospace;
+}