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.
63 lines
3.3 KiB
Markdown
63 lines
3.3 KiB
Markdown
# VISION: typst-leaf
|
|
|
|
## 1. Product Philosophy
|
|
**typst-leaf** is a high-performance, self-hosted LaTeX alternative built for the modern era. It rejects the bloated, slow architecture of traditional LaTeX editors in favor of the **Typst** ecosystem.
|
|
|
|
It is designed for:
|
|
1. **Speed:** Sub-50ms compile times.
|
|
2. **Sovereignty:** Your data lives in a standard Git repository on your filesystem, not a proprietary database.
|
|
3. **Developer Experience:** First-class Vim support, fast LSP feedback, and CLI-based workflows.
|
|
|
|
## 2. Architecture Overview
|
|
The system follows a strict **Client-Server** model, even when running locally.
|
|
|
|
### The Stack
|
|
* **Monorepo Structure:** Flat directory structure (`typst-leaf-backend`, `typst-leaf-frontend`).
|
|
* **Frontend:** React (Vite) + Monaco Editor.
|
|
* **Desktop Wrapper:** Tauri v2 (integrated into `typst-leaf-frontend`).
|
|
* **Backend:** TypeScript (Node.js) + Express.
|
|
* **Core Engine:** `tinymist` (Binary) for LSP and compilation.
|
|
|
|
### Component Breakdown
|
|
|
|
#### A. Backend (`typst-leaf-backend`)
|
|
The backend is a stateless orchestration layer that sits on top of the file system.
|
|
* **Role:**
|
|
* Spawns and manages the `tinymist` process.
|
|
* Proxies WebSocket connections for LSP (Language Server Protocol).
|
|
* Proxies WebSocket connections for the Preview (SVG stream).
|
|
* Exposes a REST API for file management (CRUD) and Git operations (`git commit`, `git push`).
|
|
* **Data Source:** Standard OS file system. Each "Project" is a directory.
|
|
|
|
#### B. Frontend (`typst-leaf-frontend`)
|
|
A Single Page Application (SPA) that acts as the IDE interface.
|
|
* **Editor:** Monaco Editor configured with a custom ~300-line raw JSON-RPC LSP client (no `monaco-languageclient`).
|
|
* **Preview:** A high-performance SVG renderer that receives delta updates from Tinymist.
|
|
* **Vim Mode:** `monaco-vim` toggleable via toolbar, persisted to `localStorage`.
|
|
* **Tauri Integration:** The frontend folder contains `src-tauri`, allowing it to build as a native desktop application.
|
|
|
|
## 3. Critical Technical Decisions
|
|
|
|
### 3.1 The "No-Database" Database
|
|
We do not use MongoDB, Postgres, or SQL.
|
|
* **State:** The state is the file system.
|
|
* **History:** The history is the `.git` folder.
|
|
* **Collaboration:** We do not implement Operational Transforms (OT) or CRDTs for simultaneous editing. Collaboration is handled via Git (Commit/Push/Pull) logic exposed in the UI.
|
|
|
|
### 3.2 The Rendering Pipeline
|
|
We **do not** render PDFs in the browser for preview.
|
|
1. User types in Monaco.
|
|
2. Frontend sends `textDocument/didChange` (LSP) to Backend.
|
|
3. Backend pipes to `tinymist`.
|
|
4. `tinymist` computes layout and pushes an **SVG** diff to the preview socket.
|
|
5. Frontend renders the SVG.
|
|
*Rationale:* SVGs are selectable, zoomable without blur, and significantly lighter than streaming PDF binaries.
|
|
|
|
### 3.3 The LSP Connection
|
|
We use a raw JSON-RPC WebSocket client (no `monaco-languageclient`) to connect Monaco to the backend. The backend simply pipes this socket to the stdin/stdout of the running `tinymist` binary. We do not reimplement LSP logic in TypeScript.
|
|
|
|
## 4. User Stories
|
|
* **As a User,** I want to type code and see the result instantly (<100ms lag).
|
|
* **As a User,** I want to double-click an element in the preview and have my cursor jump to the code (SyncTeX/Source Mapping).
|
|
* **As a User,** I want to hit `Cmd+S` to save to disk and `Cmd+Shift+S` to create a Git commit.
|