nav.sikand/typst-leaf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
6 Commits 1 Branch 0 Tags
ae0d888ddf97d3e5a1d3f932c6676d660d05a6c7
Commit Graph

3 Commits

Author SHA1 Message Date
nav.sikand ae0d888ddf feat: complete UI redesign — editorial-paper palette, Monaco theme, lucide icons, primitives 
Palette overhaul:
- Warm cream canvas (#faf8f4) + near-white surfaces (#fdfdfb) + deep teal accent (#0f766e)
- Unified on stone-warm neutrals via @theme block in index.css

Typography:
- Inter Variable + JetBrains Mono Variable via fontsource (self-hosted)
- Monaco editor set to JetBrains Mono for consistency

Icons:
- lucide-react replaces all 8 hand-rolled SVGs
- Leaf brand mark beside wordmark

Shared primitives (src/components/ui/):
- Icon, Button (4 variants, 2 sizes), IconButton, TextInput, SectionHeader, StatusDot, Chip

Custom Monaco theme (src/theme/monaco-theme.ts):
- typst-leaf-light: warm near-white background, restrained rainbow-free syntax
- Keywords teal, strings warm green, comments stone italic, most tokens ink

Component reworks:
- TopBar: Leaf icon, h-12, chip-based status, Button/IconButton primitives
- Sidebar: w-72, icon+label tabs with teal bottom border
- StatusBar: lucide GitBranch/ArrowUp/ArrowDown, chip-based status
- FileTree: lucide Plus/FolderPlus/Pencil/Trash2, teal active state
- GitPanel: lucide status icons, restored staged/unstaged bg tint
- Preview: RotateCw reload icon, chip status
- EmptyState: muted Leaf icon
- ToastHost: StatusDot + lucide X

Fixes:
- GitPanel staged/unstaged/untracked rows now have distinct bg tints
- Button defaults to type="button" to prevent accidental form submission
- Editor error fallback from red-400 to rose-600
- DESIGN.md: removed emoji from layout skeleton, fixed Modals/Monaco typo

Build: pnpm -r typecheck + pnpm build pass.
 2026-07-03 13:34:47 +05:30
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
nav.sikand 061f95ddee feat: barebones MVP — editor, live LSP, and preview 
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.
 2026-07-01 20:53:42 +05:30