Migrate frontend from Svelte 5 to React 18

After hours of fighting Svelte 5's prop-reactivity through the
recursive Pane → SplitNode → LeafPane chain (props captured at
mount, never updated; context+getter pattern crashed; DOM-direct
workarounds created zombie-split click-intercept bugs), we
checkpointed the Svelte version (branch svelte-archive at e9015b2,
tarball at D:\archives\tiletopia-svelte-2026-05-22.tar.gz) and
rewrote the frontend in React.

Kept verbatim:
- All of src-tauri/ (Rust backend, Tauri config, icons)
- scripts/ (make-icon.py, release.sh)
- README.md, CLAUDE.md, memory.md
- src/lib/layout/tree.ts (pure TS — 43 tests still pass)
- src/ipc.ts (Tauri command wrappers)

Rewrote in React:
- src/App.tsx (top-level state via useState, OrchestrationProvider
  for descendants via React.Context)
- src/lib/layout/orchestration.tsx (React Context API for shared
  state — known-reliable reactivity, no Svelte 5 wall)
- src/lib/layout/Pane.tsx (recursive dispatcher)
- src/lib/layout/SplitNode.tsx (draggable gutter, local ratio state)
- src/lib/layout/LeafPane.tsx (toolbar + XtermPane)
- src/components/XtermPane.tsx (xterm.js wrapper, refs for callbacks)
- src/components/Notifications.tsx, Palette.tsx

Build: Vite + @vitejs/plugin-react. TypeScript strict. Same Tauri 2
config. Verified: pnpm check (clean), pnpm test (43/43 pass).
Not yet verified: pnpm tauri dev — that requires the Windows host.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/styles.css

@@ -1,65 +1,39 @@
-:root {
-  color-scheme: dark;
-  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-  font-size: 13px;
-  background: #0c0c0c;
-  color: #e6e6e6;
+@import "@xterm/xterm/css/xterm.css";
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 html,
 body,
-#app {
-  margin: 0;
-  padding: 0;
-  height: 100%;
+#root {
   width: 100%;
+  height: 100%;
   overflow: hidden;
 }
 
-.app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background: #0c0c0c;
+body {
+  background: #1a1a1a;
+  color: #e0e0e0;
+  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", monospace;
+  font-size: 14px;
+  line-height: 1.4;
 }
 
-.titlebar {
-  flex: 0 0 auto;
+.app-root {
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 6px 12px;
-  background: #1a1a1a;
-  border-bottom: 1px solid #2a2a2a;
-  font-size: 12px;
-  color: #aaa;
-  user-select: none;
+  justify-content: center;
+  color: #888;
+  font-size: 13px;
+  letter-spacing: 0.05em;
 }
 
-.titlebar .label {
-  font-weight: 600;
-  color: #ddd;
-}
-
-.titlebar .distro {
-  font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
-  color: #88c;
-}
-
-.titlebar .status {
-  margin-left: auto;
-  font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
-}
-
-.titlebar .status.ok {
-  color: #6c6;
-}
-.titlebar .status.err {
-  color: #d66;
-}
-
-.pane-wrap {
-  flex: 1 1 auto;
-  min-height: 0;
-  position: relative;
-}
+.xterm { height: 100%; }
+.xterm-viewport { background: #0c0c0c !important; }