nav.sikand
008dab1cf9
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.
75 lines
3.2 KiB
Markdown
75 lines
3.2 KiB
Markdown
# typst-leaf 🍂
|
|
|
|
A completely self-hostable, high-performance editor for [Typst](https://typst.app/), 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
|
|
|
|
```text
|
|
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:
|
|
```bash
|
|
cargo install --git https://github.com/Myriad-Dreamin/tinymist --bin tinymist --locked tinymist-cli
|
|
```
|
|
|
|
## 🚀 Quick Start (Development)
|
|
|
|
```bash
|
|
# 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`
|
|
|