feat: IDE shell, file management, UI rehaul, reliability, and git workflow

This is the next major chunk on top of the barebones MVP. It implements
the IDE shell, resizable editor/preview workspace, file CRUD, Git workflow
UI upgrade, SyncTeX/LSP reliability hardening, and documentation updates.

Highlights:

* New shared path utilities (typst-leaf-frontend/src/path-utils.ts):
  normalizeFsPath, encodeVirtualPathForFileUri, relativePathFromProject.

* SyncTeX reliability:
  * Jump targets now carry stable numeric IDs for deduplication.
  * tinymist/preview/scrollSource and window/showDocument payloads are
    validated and normalized through shared path utilities.
  * External preview paths are reported via a toast instead of silent drop.
  * Editor uses monaco.Uri.equals for URI comparison.

* IDE shell rehaul:
  * New components: TopBar, StatusBar, PanelSection, ResizableSplit,
    ToastHost, EmptyState.
  * App.tsx now uses a layered layout: top bar, sidebar tabs
    (Files/Git/Settings), resizable main workspace, status bar, toasts.
  * Sidebar tabs replace the old inline Git/settings panels.

* Resizable workspace:
  * Pointer-driven resizable split between editor and preview.
  * Split ratio persisted to localStorage (typst-leaf.split).
  * Double-click splitter resets to 55%.
  * onResize prop dispatches typst-leaf:layout so Monaco re-layouts.

* File management:
  * Backend CRUD: POST /file, DELETE /file, PATCH /file, POST /folder.
  * Frontend API wrappers and inline FileTree create/rename/delete.
  * Backend tree endpoint returns empty directories in a folders array.
  * Rename protects the .typ extension and rejects overwriting existing
    files atomically on POSIX.
  * Newly created files are opened automatically.
  * Dirty file badges in the tree.

* Git workflow upgrade:
  * GitPanel now shows changed files grouped by staged/unstaged, deduped
    by path, with per-file status icons.
  * Click a changed file to open it.
  * Commit disabled when clean or no message.
  * Push/pull with success/error toasts.
  * FileTree shows dirty badges from git status.

* Preview UX:
  * Preview toolbar with status chip, reload button, and SyncTeX hint.
  * Preview hidden/marked as "open a file" when no file is open.

* State/UX infrastructure (app-state.tsx):
  * activePanel, fileDirty, saving, notice (toast), vimOn, treeVersion,
    folders, and stable jumpTarget.id.
  * focusCommit switches to the Git panel.
  * selectProject resets more state to avoid stale data.

* Editor improvements:
  * Monaco model disposed on unmount so LSP sees didClose.
  * mountedRef survives React StrictMode remounts.
  * Global save/layout events bridge TopBar and ResizableSplit to the
    editor instance.
  * Vim mode state moved to global state/localStorage.
  * Removed redundant automaticLayout and inline Save button.

* Documentation:
  * Added DESIGN.md with the full UI aesthetic guide.
  * Updated PLAN.md, README.md, VISION.md, and the frontend README.

Verification:
  * pnpm -r typecheck passes.
  * pnpm --filter typst-leaf-frontend build passes.

typst-leaf-frontend/src/components/ResizableSplit.tsx

@@ -0,0 +1,83 @@
+import { useCallback, useRef, useState, type ReactNode } from "react";
+
+const STORAGE_KEY = "typst-leaf.split";
+const MIN_PCT = 25;
+const DEFAULT_PCT = 55;
+
+function loadRatio(): number {
+  try {
+    const v = Number(localStorage.getItem(STORAGE_KEY));
+    return v >= MIN_PCT && v <= 100 - MIN_PCT ? v : DEFAULT_PCT;
+  } catch {
+    return DEFAULT_PCT;
+  }
+}
+
+function persistRatio(v: number) {
+  try {
+    localStorage.setItem(STORAGE_KEY, String(v));
+  } catch { /* ignore */ }
+}
+
+function clampPct(v: number): number {
+  return Math.max(MIN_PCT, Math.min(100 - MIN_PCT, v));
+}
+
+export function ResizableSplit({
+  left,
+  right,
+  onResize,
+}: {
+  left: ReactNode;
+  right: ReactNode;
+  onResize?: () => void;
+}) {
+  const [leftPct, setLeftPct] = useState(loadRatio);
+  const leftPctRef = useRef(leftPct);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const startDrag = useCallback((e: React.PointerEvent) => {
+    e.preventDefault();
+    const el = e.currentTarget as HTMLElement;
+    el.setPointerCapture(e.pointerId);
+    const onMove = (ev: PointerEvent) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const pct = clampPct(((ev.clientX - rect.left) / rect.width) * 100);
+      leftPctRef.current = pct;
+      setLeftPct(pct);
+      onResize?.();
+    };
+    const onUp = () => {
+      persistRatio(leftPctRef.current);
+      onResize?.();
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }, [onResize]);
+
+  return (
+    <div ref={containerRef} className="flex h-full min-h-0 w-full flex-1">
+      <div className="min-w-[280px] overflow-hidden" style={{ width: `${leftPct}%` }}>
+        {left}
+      </div>
+      <div
+        role="separator"
+        aria-orientation="vertical"
+        className="w-1 bg-zinc-200 hover:bg-emerald-300 cursor-col-resize shrink-0 transition-colors duration-75"
+        onPointerDown={startDrag}
+        onDoubleClick={() => {
+          const pct = DEFAULT_PCT;
+          leftPctRef.current = pct;
+          setLeftPct(pct);
+          persistRatio(pct);
+        }}
+      />
+      <div className="flex-1 min-w-[280px] overflow-hidden">
+        {right}
+      </div>
+    </div>
+  );
+}