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/Preview.tsx

@@ -1,23 +1,57 @@
+import { useRef } from "react";
 import { useApp } from "../app-state";
 
 export function Preview() {
   const { state, lsp } = useApp();
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
-  let status = "idle";
-  if (!state.currentProject) status = "no project";
-  else if (lsp.status !== "ready") status = `LSP ${lsp.status}`;
-  else if (!lsp.previewReady) status = "starting preview…";
-  else status = "live";
+  const statusText = () => {
+    if (!state.currentProject) return "no project";
+    if (!state.openFile) return "open a file";
+    if (lsp.status !== "ready") return `LSP ${lsp.status}`;
+    if (!lsp.previewReady) return "starting…";
+    return "live";
+  };
+
+  const statusColor = () => {
+    if (lsp.previewReady) return "text-emerald-600 bg-emerald-50";
+    if (lsp.status === "ready") return "text-zinc-400 bg-stone-50";
+    return "text-amber-600 bg-amber-50";
+  };
+
+  const statusDot = () => {
+    if (lsp.previewReady) return "bg-emerald-500";
+    return "bg-zinc-300";
+  };
 
   return (
-    <div className="w-1/2 border-l border-zinc-200 flex flex-col bg-white">
-      <div className="px-3 py-1.5 border-b border-zinc-200 text-xs text-zinc-500 font-mono flex items-center gap-2">
-        <span>Preview</span>
-        <span className="ml-auto text-zinc-400">{status}</span>
+    <div className="h-full flex flex-col bg-white">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 px-3 py-1.5 border-b border-zinc-200 text-xs text-zinc-500 shrink-0">
+        <span className="font-medium">Preview</span>
+        <span className={`ml-auto flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] ${statusColor()}`}>
+          <span className={`inline-block size-1.5 rounded-full ${statusDot()}`} />
+          {statusText()}
+        </span>
+        {lsp.previewReady && (
+          <button
+            type="button"
+            onClick={() => {
+              iframeRef.current?.contentWindow?.location.reload();
+            }}
+            className="px-2 py-0.5 rounded border border-zinc-200 hover:bg-stone-100 text-zinc-500"
+          >
+            Reload
+          </button>
+        )}
+        <span className="text-zinc-300 text-[11px] hidden sm:inline">Click preview to jump to source</span>
       </div>
-      <div className="flex-1 bg-zinc-50 relative">
-        {state.currentProject && lsp.status === "ready" && lsp.previewReady ? (
+
+      {/* Content */}
+      <div className="flex-1 bg-zinc-50 relative min-h-0">
+        {state.currentProject && state.openFile && lsp.status === "ready" && lsp.previewReady ? (
           <iframe
+            ref={iframeRef}
             key={state.currentProject}
             src="/preview-app"
             title="Typst preview"
@@ -25,9 +59,9 @@ export function Preview() {
           />
         ) : (
           <div className="absolute inset-0 flex flex-col items-center justify-center text-zinc-400 text-sm p-6 gap-2">
-            <span>{status}</span>
+            <span>{statusText()}</span>
             {lsp.status === "error" && lsp.error && (
-              <pre className="mt-2 max-w-full overflow-auto text-xs text-red-500 bg-red-50 p-3 rounded whitespace-pre-wrap break-all">
+              <pre className="mt-2 max-w-full overflow-auto text-xs text-rose-600 bg-rose-50 p-3 rounded whitespace-pre-wrap break-all">
                 {lsp.error}
               </pre>
             )}