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.3 KiB

Raw Permalink Blame History

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:

Speed: Sub-50ms compile times.
Sovereignty: Your data lives in a standard Git repository on your filesystem, not a proprietary database.
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.

User types in Monaco.
Frontend sends textDocument/didChange (LSP) to Backend.
Backend pipes to tinymist.
tinymist computes layout and pushes an SVG diff to the preview socket.
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.

3.3 KiB Raw Permalink Blame History