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.
Backend (typst-leaf-backend)
- REST API for multi-project file management under PROJECTS_ROOT
(list/create projects, get file tree, read/write files; zod-validated
sandbox prevents path traversal).
- LSP thin proxy: spawns a single tinymist lsp process, pipes one active
WebSocket straight to its stdio via vscode-ws-jsonrpc. New connections
trigger a takeover (old session disposed, fresh tinymist spawned).
- Live preview pipeline: the frontend sends tinymist.startDefaultPreview
over the LSP wire, reads the returned data-plane port, and relays it to
the backend. The backend proxies /preview (WS, with retry and an Origin
header for typst-preview) and /preview-app (HTTP, injecting a script that
rewrites the webview's WS path to /preview and forces light mode).
- Graceful SIGTERM/SIGINT shutdown.
- Auto-seeds a hello project on first boot.
- Removed execa dependency (no longer needed).
Frontend (typst-leaf-frontend)
- Monaco editor with typst syntax highlighting (Monarch tokenizer) and
live LSP diagnostics (markers), completion, hover, definitions, and
formatting — all driven by a raw JSON-RPC WebSocket client (no
monaco-languageclient or vscode-api dependency).
- Project picker and file tree sidebar.
- Live preview pane: iframes the typst-preview webview through the
backend's /preview-app proxy, so the pipedepeline works remotely.
- Monaco bundled locally (no CDN) with a Vite worker setup.
- Vite dev proxy so relative /api, /lsp, /preview, and /preVIEW-app URLs
reach the backend on port 4000.
- Light-mode UI (editor 'vs' theme, white chrome).
- Prevent esbuild from tree-shaking monaco.editor services
(optimizeDeps.esbuildOptions.treeShaking: false).
Infrastructure
- Added vscode-ws-jsonrpc to backend dependencies.
- Removed monaco-languageclient and vscode-ws-jsonrpc from frontend
dependencies (replaced by the raw JSON-RPC client).
- Added monaco-editor as a direct frontend dependency.
- Updated README (correct frontend port 1420, tinymist install command,
environment variables, architecture).
- Added projects/ to .gitignore.
- Renamed Tauri productName and page title to typst-leaf.
nav.sikand