Files

T

nav.sikand 008dab1cf9 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.

2026-07-02 02:05:04 +05:30

3.2 KiB

Raw Blame History

typst-leaf 🍂

A completely self-hostable, high-performance editor for Typst, built on the philosophy of "Git as the Database."

Features:

Instant Preview: Incremental compilation using tinymist.
Live diagnostics & autocomplete from the Typst language server.
Git Native: No hidden databases. Your projects are just folders with .git.
Vim Mode: Toggleable via toolbar.
SyncTeX: Click in the preview to jump to source in the editor.
Hybrid: Run it in a browser, or as a native desktop app via Tauri.

📂 Repository Structure

typst-leaf/
├── typst-leaf-backend/     # Node.js/TS server (spawns tinymist, REST + WS)
├── typst-leaf-frontend/    # React + Monaco frontend (includes Tauri)
├── VISION.md               # Project philosophy and architecture
└── AGENTS.md               # Guidelines for AI coding assistants

Prerequisites

Node.js 20+
pnpm (10+)
Rust (only required for the Tauri desktop wrapper)

tinymist on your PATH — the Typst language server & preview engine:

cargo install --git https://github.com/Myriad-Dreamin/tinymist --bin tinymist --locked tinymist-cli

🚀 Quick Start (Development)

# 1. Install workspace dependencies
pnpm install

# 2. Start the backend (port 4000)
pnpm --filter typst-leaf-backend dev

# 3. Start the web frontend (port 1420 — mandated by Tauri)
pnpm --filter typst-leaf-frontend dev

# 4. (Optional) Launch the Tauri desktop wrapper
pnpm --filter typst-leaf-frontend tauri dev

Then open http://localhost:1420 in your browser. A hello project is auto-seeded on first run.

Environment variables

Var	Default	Description
`PROJECTS_ROOT`	`<repo>/projects`	Directory under which project folders live. The backend refuses to read or write outside this root.
`TINYMIST_PREVIEW_HOST`	`127.0.0.1`	Host the tinymist preview server binds to.
`TINYMIST_PREVIEW_PORT`	`23635`	Port the tinymist preview server binds to.
`PORT` (backend)	`4000`	Backend HTTP/WS port.
`FRONTEND_ORIGIN` (backend)	`http://localhost:1420`	CORS origin allowed to call the REST API.

🏗️ Architecture

Editor: Monaco Editor (bundled locally)
LSP: Raw JSON-RPC client over WebSocket → backend thin proxy → tinymist stdio
Preview: Frontend calls tinymist.startDefaultPreview via LSP, discovers random data-plane port, relays to backend via POST /api/preview/sink; backend proxies the preview webview and its WebSocket.
Frontend LSP: Custom ~300-line RawLspClient class (no monaco-languageclient).
Git: simple-git wrapper, per-project .git, commit identity via -c flags (no mutation of repo config).
Styling: Tailwind v4 via @tailwindcss/vite plugin. Light theme only.
Data plane:
- ws://localhost:4000/lsp → tinymist lsp (single active connection, takeover on reconnect)
- ws://localhost:4000/preview → tinymist preview server (SVG stream)
- GET/POST/DELETE/PATCH /api/projects/:project/file?path=…
- POST /api/projects/:project/git/init, GET …/status, GET …/log, POST …/commit, POST …/push, POST …/pull, PUT …/remote

3.2 KiB Raw Blame History