test(renderer): Phase 7 modals integration smoke test

- 7 end-to-end tests covering toolbar, header, native menu IPC,
  userBindings persistence, and command registry
- 169/169 tests pass (was 105 at end of Phase 5)
- build succeeds

.github/workflows/release.yml

@@ -19,17 +19,17 @@ jobs:
           node-version: 20
           cache: npm
 
-      - name: Install rpmbuild
-        run: sudo apt-get update && sudo apt-get install -y rpm
-
       - name: Install dependencies
         run: npm ci
 
+      - name: Download external tools (pandoc)
+        run: node scripts/download-tools.js
+
       - name: Run tests
         run: npm test
 
       - name: Build Linux packages
-        run: npm run build:linux
+        run: npm run build:linux-ci -- --publish=never
 
       - name: Upload Linux artifacts
         uses: actions/upload-artifact@v4
@@ -56,14 +56,19 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Download external tools (pandoc)
+        run: node scripts/download-tools.js
+
       - name: Run tests
         run: npm test
 
       - name: Decode certificate (if available)
-        if: ${{ secrets.CSC_LINK_BASE64 != '' }}
+        if: ${{ env.CSC_LINK_BASE64 != '' }}
         shell: pwsh
+        env:
+          CSC_LINK_BASE64: ${{ secrets.CSC_LINK_BASE64 }}
         run: |
-          $bytes = [Convert]::FromBase64String("${{ secrets.CSC_LINK_BASE64 }}")
+          $bytes = [Convert]::FromBase64String("$env:CSC_LINK_BASE64")
           [IO.File]::WriteAllBytes("${{ github.workspace }}\code-signing-cert.pfx", $bytes)
           echo "CERT_AVAILABLE=true" >> $env:GITHUB_ENV
 
@@ -72,13 +77,13 @@ jobs:
         env:
           CSC_LINK: code-signing-cert.pfx
           CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
-        run: npm run build:win-signed
+        run: npm run build:win-signed -- --publish=never
 
       - name: Build Windows packages (unsigned)
         if: ${{ env.CERT_AVAILABLE != 'true' }}
         env:
-          CSC_IDENTITY_AUTO_DISCOVERY: false
-        run: npm run build:win-unsigned
+          CSC_IDENTITY_AUTO_DISCOVERY: 'false'
+        run: npm run build:win-unsigned -- --publish=never
 
       - name: Upload Windows artifacts
         uses: actions/upload-artifact@v4
@@ -86,24 +91,26 @@ jobs:
           name: windows-artifacts
           path: |
             dist/*.exe
-            dist/*-win.zip
             dist/*.zip
           retention-days: 5
 
   release:
     needs: [build-linux, build-windows]
+    if: always()
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
 
       - name: Download Linux artifacts
         uses: actions/download-artifact@v4
+        continue-on-error: true
         with:
           name: linux-artifacts
           path: dist
 
       - name: Download Windows artifacts
         uses: actions/download-artifact@v4
+        continue-on-error: true
         with:
           name: windows-artifacts
           path: dist

.gitignore

@@ -16,7 +16,10 @@ out/
 .cache/
 .npm/
 .electron/
-package-lock.json
+# package-lock.json is intentionally tracked for reproducible CI builds
+
+# Downloaded tool binaries (fetched at build time via scripts/download-tools.js)
+bin/
 
 # Code signing certificates — never commit private keys
 *.pfx
@@ -40,3 +43,6 @@ pdf\ modal.png
 CLAUDE.md
 agents.md
 coverage/
+
+# Superpowers brainstorm artifacts
+.superpowers/

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/renderer/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

docs/superpowers/specs/2026-04-14-v5-platform-design.md

@@ -0,0 +1,426 @@
+# MarkdownConverter v5.0 — Platform Design
+
+**Date:** 2026-04-14
+**Status:** Approved
+**Author:** Amit Haridas
+
+## Overview
+
+Transform MarkdownConverter from a monolithic editor into an extensible platform with a plugin system and three feature packs, shipped together as v5.0.
+
+## Subsystems
+
+1. **Plugin System** — Lightweight plugin registry with extension points (sidebar, commands, settings, status bar, export hooks, event bus)
+2. **Writing Studio Plugin** — Manuscript manager, goal tracking, writing sprints, snapshots, smart proofreading
+3. **AI Assistant Plugin** — Multi-provider AI writing assistant (Ollama, LMStudio, GGUF direct with GPU, Anthropic, OpenAI)
+4. **Collaboration Plugin** — Git-based async collaboration, comments/annotations, review requests
+
+## Core Principle
+
+**Existing functionality is never replaced or broken.** The plugin system is additive. All existing keyboard shortcuts, features, and UI remain untouched. Plugin shortcuts use `Ctrl+Alt+` namespace.
+
+---
+
+## 1. Plugin System
+
+### File Structure
+
+```
+src/
+  plugins/
+    plugin-registry.js      # Load, register, lifecycle
+    plugin-api.js            # Base class plugins extend
+    plugin-loader.js         # Discovers and validates manifests
+    built-in/
+      writing-studio/
+        manifest.json
+        index.js
+        panels/
+        components/
+      ai-assistant/
+        manifest.json
+        index.js
+        providers/
+      collaboration/
+        manifest.json
+        index.js
+```
+
+### Manifest Schema
+
+```json
+{
+  "id": "writing-studio",
+  "name": "Writing Studio",
+  "version": "1.0.0",
+  "description": "Manuscript management, goal tracking, writing sprints",
+  "icon": "pen-tool",
+  "extensionPoints": {
+    "sidebar": { "panel": "panels/manuscript-panel.js", "order": 30 },
+    "settings": { "section": "settings/index.js" },
+    "statusBar": { "indicators": ["sprint-timer", "word-goal"] },
+    "commands": [
+      { "id": "start-sprint", "label": "Start Writing Sprint", "shortcut": "Ctrl+Alt+S" },
+      { "id": "take-snapshot", "label": "Take Snapshot", "shortcut": "Ctrl+Alt+N" }
+    ],
+    "exportHooks": {
+      "preExport": "hooks/pre-export.js",
+      "postExport": "hooks/post-export.js"
+    }
+  },
+  "settings": [
+    { "key": "dailyGoal", "type": "number", "default": 1000, "label": "Daily word goal" },
+    { "key": "sprintDuration", "type": "number", "default": 25, "label": "Sprint duration (min)" }
+  ]
+}
+```
+
+### Plugin Lifecycle
+
+1. PluginLoader discovers manifests in `built-in/` + user plugins directory
+2. PluginRegistry validates manifests
+3. Each plugin calls `Plugin.init(context)` receiving scoped API context
+4. Extension points registered (sidebar panels, commands, status bar items)
+5. Plugins activate lazily — sidebar panel loads JS when user clicks tab
+
+### Plugin Context API
+
+Each plugin's `init()` receives:
+
+```javascript
+{
+  sidebar: {
+    registerPanel(id, { icon, title, component })
+  },
+  commands: {
+    register(id, label, handler, shortcut?)
+  },
+  statusBar: {
+    registerIndicator(id, { position, render })
+  },
+  settings: {
+    get(key),                    // plugin-scoped
+    set(key, value),             // auto-persisted via electron-store
+    onChanged(key, callback)
+  },
+  editor: {
+    getContent(),                // current document
+    getSelection(),              // selected text
+    insertAtCursor(text),        // requires opt-in
+    onContentChanged(callback)
+  },
+  events: {
+    on(event, handler),
+    emit(event, data)
+  },
+  exports: {
+    registerPreHook(handler),
+    registerPostHook(handler)
+  },
+  ipc: {
+    invoke(channel, ...args),
+    on(channel, handler)
+  }
+}
+```
+
+### Event Bus Events
+
+Each event has a versioned payload schema. Breaking changes increment the version suffix.
+
+```
+document:opened        → { filePath: string, tabId: string }
+document:saved         → { filePath: string, tabId: string }
+document:changed       → { tabId: string, content: string, wordCount: number }
+editor:selection-changed → { tabId: string, text: string, from: {line,ch}, to: {line,ch} }
+tab:switched           → { tabId: string, filePath: string }
+tab:closed             → { tabId: string, filePath: string }
+export:started         → { format: string, filePath: string }
+export:completed       → { format: string, filePath: string, outputPath: string }
+export:failed          → { format: string, error: string }
+plugin:loaded          → { pluginId: string, version: string }
+plugin:activated       → { pluginId: string }
+plugin:deactivated     → { pluginId: string }
+app:ready              → {}
+app:before-quit        → {}
+```
+
+### Design Rules
+
+- Built-in plugins use the same API as future third-party plugins
+- Lazy activation — sidebar panels don't load until clicked
+- Scoped settings: `plugins.<id>.<key>` in electron-store
+- Plugin commands globally unique — registry rejects duplicate command IDs at load time
+- **Plugin sandboxing**: each plugin handler is wrapped in try/catch. For CPU-intensive operations (AI inference, diff computation), plugins must delegate to main process via IPC. Handlers that block the renderer for >5s trigger a warning notification. Memory-hungry operations (GGUF inference) run in isolated child processes.
+- **Cross-plugin graceful degradation**: plugins check `context.events.hasHandler('ai:analyze')` before emitting cross-plugin requests. If no handler (AI plugin disabled), show a "this feature requires the AI plugin" prompt instead of failing silently. All cross-plugin calls have a 30s timeout with default fallback behavior.
+
+---
+
+## 2. Writing Studio Plugin
+
+### 2A. Manuscript / Project Manager
+
+Folder-based project structure:
+
+```
+~/Manuscripts/
+  my-novel/
+    .project.json          # { title, targets, metadata }
+    01-chapter-one.md
+    02-chapter-two.md
+    characters/
+      protagonist.md
+    research/
+      world-building.md
+    .snapshots/
+      2026-04-14T10-30.json
+```
+
+`.project.json`:
+
+```json
+{
+  "title": "My Novel",
+  "type": "manuscript",
+  "target": { "words": 80000, "deadline": "2026-09-01" },
+  "chapters": [
+    { "file": "01-chapter-one.md", "title": "The Beginning", "status": "draft" }
+  ],
+  "metadata": { "author": "", "genre": "", "synopsis": "" }
+}
+```
+
+Sidebar panel shows project tree with drag-to-reorder, word counts per chapter, target progress bar. "Compile manuscript" exports all chapters as a single document.
+
+### 2B. Goal Tracking & Writing Sprints
+
+- **Status bar**: daily progress bar + sprint timer
+- **Writing sprint**: configurable duration (15/25/30/45/60 min), word count delta, WPM at end
+- **Goal tracking**: daily/weekly word goals, streak tracking, 30-day bar chart
+- **Enhanced analytics**: session tracking, readability scores, productive time-of-day heatmap
+- Data stored in `plugins.writing-studio.history` as date-keyed map
+
+### 2C. Snapshot & Versioning
+
+- `Ctrl+Alt+N` or toolbar button saves snapshot
+- Stored as JSON: `{ timestamp, content, wordCount, cursorPos, label }`
+- Snapshot panel in sidebar: Restore, Diff (side-by-side), auto-snapshot interval
+- Snapshots in `.snapshots/` inside project folder, or app data if no project
+
+### 2D. Smart Proofreading
+
+Delegates to AI plugin via event bus. Writing Studio provides:
+- Right-click context menu: "Check grammar", "Suggest alternatives", "Analyze readability"
+- Inline wavy underline decorations for issues
+- Proofread panel: issues categorized by type with Accept/Dismiss
+
+### Commands
+
+| Command | Shortcut | Action |
+|---------|----------|--------|
+| `start-sprint` | `Ctrl+Alt+S` | Start writing sprint |
+| `stop-sprint` | `Ctrl+Alt+Shift+S` | Stop sprint |
+| `take-snapshot` | `Ctrl+Alt+N` | Save snapshot |
+| `restore-last-snapshot` | `Ctrl+Alt+Z` | Restore latest snapshot |
+| `new-project` | — | Create manuscript project |
+| `compile-manuscript` | `Ctrl+Alt+E` | Export all chapters |
+| `proofread-document` | `Ctrl+Alt+G` | AI proofread |
+
+---
+
+## 3. AI Assistant Plugin
+
+### Provider Architecture
+
+```
+AI Plugin
+  ├── Provider Interface
+  │     ├── complete(prompt, options) → string
+  │     ├── stream(prompt, options) → AsyncIterable
+  │     └── analyze(text, type) → AnalysisResult
+  │
+  ├── Providers
+  │     ├── OllamaProvider      — localhost:11434
+  │     ├── LMStudioProvider    — localhost:1234/v1
+  │     ├── GGUFProvider         — direct llama.cpp with GPU support
+  │     ├── AnthropicProvider    — Claude API
+  │     └── OpenAIProvider       — GPT API
+  │
+  └── Features
+        ├── Grammar/style check
+        ├── Inline auto-complete
+        ├── AI chat panel (sidebar)
+        ├── Document analysis
+        └── Smart commands (command palette)
+```
+
+### Provider Details
+
+**Ollama:** `GET /api/tags` for models, `POST /api/generate` and `POST /api/chat` for inference.
+
+**LMStudio:** OpenAI-compatible API at `localhost:1234/v1`. `GET /v1/models`, standard chat completion format, SSE streaming.
+
+**GGUF Direct (with GPU):**
+- Ships bundled llama.cpp binaries per platform (CUDA, Vulkan, Metal, CPU variants)
+- Auto-detects GPU: CUDA (nvidia-smi), Vulkan driver, Metal (macOS)
+- GPU layer offloading: configurable, auto-suggests based on VRAM vs model size
+- Settings: GPU backend selection, layer count, context length, thread count
+- "Keep model loaded" option for faster repeated requests
+- WASM fallback for sandboxed environments (CPU-only)
+- External binary path for advanced users with custom builds
+- **Process isolation**: llama.cpp runs as a spawned child process (not in main process). If it crashes, detected via exit handler, auto-restarted with notification. GPU memory freed on crash. App remains stable.
+- Process management: spawn in server mode on localhost ephemeral port, clean up on app quit or model unload
+
+**Cloud (Anthropic/OpenAI):**
+- API key stored encrypted via electron safeStorage
+- Token usage tracking with estimated cost
+- Rate limit awareness with request queueing and backoff
+
+### IPC Design
+
+All provider HTTP requests go through main process:
+- No CORS issues
+- API keys never in renderer
+- Main process enforces rate limiting
+- GGUF inference in isolated child process
+
+**Request/response lifecycle:**
+```
+Renderer → ipc.invoke('ai:complete') → Main → HTTP to provider → result → Renderer
+```
+
+**Streaming lifecycle with error handling:**
+```
+Renderer → ipc.invoke('ai:stream', { requestId, prompt })
+         ← Main assigns requestId, returns { requestId }
+         ← ipc.on('ai:chunk', { requestId, text }) — repeated
+         ← ipc.on('ai:done', { requestId }) — success
+         ← ipc.on('ai:error', { requestId, error }) — failure
+
+// Cancellation
+Renderer → ipc.invoke('ai:cancel', { requestId })
+         ← Main aborts HTTP request, emits 'ai:done'
+
+// Orphan cleanup: if renderer disconnects (crash/close),
+// main process detects via 'render-view-deleted' and aborts all active streams.
+// Heartbeat: if no chunk received in 30s, main emits 'ai:error' with timeout.
+```
+
+### Features
+
+1. **Inline suggestions**: ghost text after configurable delay, Tab to accept, Esc to dismiss
+2. **AI chat panel**: sidebar conversation, "Insert" / "Replace selection" buttons
+3. **Document analysis**: grammar, style, tone, with accept/reject per suggestion
+4. **Smart commands**: summarize, generate outline, find inconsistencies, translate, explain code
+
+### Privacy
+
+- Local-first: default provider is Ollama
+- No telemetry: requests go direct to provider
+- Content gating: exclude file types from AI
+- Status bar shows "AI: processing..." with cancel option
+- Cloud usage stats in settings (tokens, cost)
+
+### Cross-Plugin Integration
+
+```javascript
+// Writing Studio calls AI Plugin
+context.events.emit('ai:analyze', { text, type: 'grammar', callback });
+```
+
+---
+
+## 4. Collaboration Plugin
+
+### 4A. Enhanced Git Panel
+
+Upgrades to existing git panel:
+- Remote management (add/remove remotes, push/pull)
+- Branch list and switching
+- Commit history with diff viewer (side-by-side or unified)
+- Conflict resolution UI (accept-ours/accept-theirs/per-edit)
+
+### 4B. Shared Repository Workflow
+
+1. Writer A creates project + initializes git + pushes to shared repo
+2. Writer B clones repo from within MarkdownConverter
+3. Both write on their own branches
+4. Writer A creates review request (simplified PR)
+
+Review request: changed files, word count diff, commit messages. Reviewer can approve, request changes, leave inline comments. Reviews are git branches + comments as git notes.
+
+### 4C. Comments & Annotations
+
+Inline comments stored as JSON in `.comments/` directory (git-tracked):
+```json
+{
+  "id": "uuid",
+  "file": "03-chapter-three.md",
+  "anchor": {
+    "contextBefore": "The hero looked at the horizon and said,",
+    "selectedText": "I will not go quietly into that dark night",
+    "contextAfter": "He turned to face the army alone."
+  },
+  "line": 142,
+  "text": "This dialogue feels unnatural",
+  "author": "amit",
+  "timestamp": "2026-04-14T14:30:00Z",
+  "replies": [],
+  "resolved": false
+}
+```
+
+- **Anchor-based positioning**: comments store `contextBefore`, `selectedText`, and `contextAfter` (not absolute byte offsets). On file change, re-anchor by searching for the context text. If context no longer matches, mark comment as "detached" and show a warning. Falls back to `line` number as rough position.
+- Highlighted text in editor with tooltip on hover
+- Comment panel in sidebar: all unresolved comments across files
+- Resolution workflow: add → address → reply → resolve
+- Resolved comments dim but stay visible
+
+### 4D. Change Notifications
+
+- Status bar indicator: `↓ 3 new commits`
+- Click to see changes, one-click pull
+- Conflicts trigger resolution UI
+- Push button only when local commits ahead of remote
+
+### 4E. Offline-First
+
+All writing happens locally. Git is the sync mechanism. No internet required for writing, commenting, snapshots, or sprints. Push/pull on user action or auto-sync setting.
+
+### Commands
+
+| Command | Shortcut | Action |
+|---------|----------|--------|
+| `collab:commit` | `Ctrl+Shift+G` | Commit with message |
+| `collab:push` | — | Push current branch |
+| `collab:pull` | — | Pull from remote |
+| `collab:add-comment` | `Ctrl+Alt+C` | Comment on selection |
+| `collab:next-comment` | `F8` | Next unresolved comment |
+| `collab:prev-comment` | `Shift+F8` | Previous comment |
+| `collab:create-review` | — | Create review request |
+
+### Cross-Plugin Integration
+
+```javascript
+context.events.emit('snapshot:created', { file, snapshotId });
+context.events.on('project:chapter-opened', (chapter) => { /* load comments */ });
+context.events.on('comment:added', (comment) => { /* AI could suggest fix */ });
+```
+
+---
+
+## Bundle Size Impact
+
+- llama.cpp binaries: ~15MB per GPU variant. Only target platform shipped. GPU variants (CUDA/Vulkan/Metal) downloaded on demand if user enables GGUF direct loading — not bundled by default. Only CPU fallback bundled (~15MB).
+- Plugin system core: ~30KB
+- Each built-in plugin: ~50-100KB
+- Diff library (jsdiff): ~15KB
+- Total estimated increase: ~20-30MB (core), additional ~30-50MB per GPU variant (lazy download)
+
+## Testing Strategy
+
+- Plugin system: unit tests for registry, loader, context API mocking
+- Each plugin: isolated unit tests, integration tests via plugin context
+- AI provider tests: mock HTTP responses, test streaming parsing
+- Git tests: use test repository fixture
+- E2E: verify plugin loading doesn't break existing features

docs/superpowers/specs/2026-06-05-phase-7-modals-design.md

@@ -0,0 +1,399 @@
+# Phase 7 — Modals Design
+
+> Companion to the parent plan: `docs/superpowers/plans/2026-06-05-react-ui-redesign.md` (Phases 7+8+9+10 are sketched there at high level; this spec locks Phase 7's architecture, file map, and contracts so it can be planned task-by-task.)
+
+**Date:** 2026-06-05
+**Phase:** 7 of 10 (React + shadcn/ui UI redesign)
+**Tag (on completion):** `phase-7-modals`
+
+---
+
+## 1. Goal & Non-Goals
+
+**Goal:** Add a layered modal system to the React renderer. Wire 7 modal types (SettingsSheet + 4 Export dialogs + About + Welcome + Confirm) to a single `<ModalLayer />`. Add a persisted `useSettingsStore` for user preferences. The modals are opened via the command store (Phase 6 pattern), and the modals themselves read/write settings via the new store.
+
+**Non-goals (Phase 7):**
+- Implement the actual export pipelines (PDF/DOCX/HTML/PNG generation) — those are main-process concerns, already implemented. Phase 7 only adds the renderer-side dialog UI.
+- Real plugin system — the Plugins tab is a placeholder ("Coming soon").
+- Toast notifications — Phase 8.
+- Advanced tools (Zen mode, REPL, ASCII/Table generators, Print preview) — Phase 9.
+
+---
+
+## 2. Architecture
+
+### 2.1 Modal state lives in `useAppStore` (extended, not new store)
+
+`useAppStore` is already the "global UI" store (sidebar, preview, zen, paneSizes). It's the right home for modal state because:
+- It's already mounted.
+- It's already persisted (via `zustand persist` with `partialize` for pane sizes).
+- A separate `useUIStore` would be YAGNI.
+
+**Add to `AppState`:**
+- `modal: ModalState` (discriminated union — see §2.2)
+- `openModal: <K extends ModalKind>(kind: K, props?: ModalPropsFor<K>) => void`
+- `closeModal: () => void`
+
+**Persistence:** `modal` is **runtime-only**, like `userBindings` in `useCommandStore`. We add it to the `partialize` function so only the persisted fields (`sidebarVisible`, `previewVisible`, `zenMode`, `paneSizes`) are saved. The modal kind never needs to survive a reload.
+
+### 2.2 Discriminated-union modal shape
+
+```ts
+export type ModalState =
+  | { kind: null }
+  | { kind: 'export-pdf';     props: { sourcePath: string } }
+  | { kind: 'export-docx';    props: { sourcePath: string } }
+  | { kind: 'export-html';    props: { sourcePath: string } }
+  | { kind: 'export-batch';   props: { sourcePaths: string[] } }
+  | { kind: 'settings' }
+  | { kind: 'about' }
+  | { kind: 'welcome' }
+  | { kind: 'confirm';        props: ConfirmProps };
+
+export interface ConfirmProps {
+  title: string;
+  body: string;
+  confirmLabel?: string;       // default "Confirm"
+  cancelLabel?: string;        // default "Cancel"
+  destructive?: boolean;       // switches confirm button to red variant
+  onConfirm: () => void | Promise<void>;
+  onCancel?: () => void;
+}
+```
+
+**Why a discriminated union:** every component that opens a modal must pass the right `props` shape for the `kind` — TypeScript catches mismatches at compile time. A generic `{ open: boolean, type: string }` shape would defer the error to runtime.
+
+### 2.3 Single `<ModalLayer />`
+
+Mounted at the bottom of `App.tsx`. Reads `modal.kind` from `useAppStore`, renders the matching component (or `null`). Each child modal calls `closeModal()` on dismiss.
+
+```tsx
+// src/renderer/components/modals/ModalLayer.tsx (sketch)
+export function ModalLayer() {
+  const modal = useAppStore((s) => s.modal);
+  switch (modal.kind) {
+    case null: return null;
+    case 'export-pdf':   return <ExportPdfDialog {...modal.props} />;
+    // ... etc
+  }
+}
+```
+
+`<ModalLayer />` ensures only one modal is visible at a time (the store only holds one). This is correct for v1 — no need for stacking/replacement transitions in Phase 7.
+
+### 2.4 Settings store (new, separate)
+
+A new `useSettingsStore` for user preferences. **Why separate from `useAppStore`:** settings is a different lifecycle. `useAppStore` is "current view configuration"; `useSettingsStore` is "user preferences that survive across sessions and are read by many features". Same precedent as `useFileStore` (file tree state) being separate from `useAppStore` (UI chrome state).
+
+**Persistence:** `zustand persist` with `partialize` to serialize only the leaf settings (matching the pattern in `useFileStore` and `useCommandStore`).
+
+```ts
+interface SettingsState {
+  // Editor
+  fontSize: number;            // 12-20, default 14
+  tabSize: number;             // 2 | 4 | 8, default 4
+  lineNumbers: boolean;        // default true
+  wordWrap: boolean;           // default true
+  minimap: boolean;            // default true
+  // Theme
+  theme: 'light' | 'dark' | 'auto';  // default 'auto'
+  accentColor: 'brand' | 'blue' | 'green' | 'purple' | 'orange';  // default 'brand'
+  fontFamily: 'system' | 'jetbrains' | 'fira';  // default 'system'
+  // Export
+  pdfFormat: 'letter' | 'a4' | 'legal';  // default 'a4'
+  pdfMargins: 'normal' | 'narrow' | 'wide';  // default 'normal'
+  pdfEmbedFonts: boolean;       // default true
+  docxTemplate: 'standard' | 'minimal' | 'modern';  // default 'standard'
+  htmlHighlightStyle: 'github' | 'monokai' | 'nord' | 'none';  // default 'github'
+  // ASCII table formatting — applies to all 3 single-file export formats
+  renderTablesAsAscii: boolean;  // default false
+  // First-launch / Welcome
+  welcomeDismissed: boolean;    // default false
+  // Actions
+  setSetting: <K extends keyof Omit<SettingsState, ...>>(...);
+  resetToDefaults: () => void;
+}
+```
+
+**Template-based exports** (per user request): `docxTemplate` is one of `'standard' | 'minimal' | 'modern'`. The export dialog shows a Select with the available templates. The IPC layer (`ipc.export.docx`) already accepts a `template` field; Phase 7 just exposes it. The main process maps these template names to actual `.docx` template files bundled with the app.
+
+**ASCII table formatting** (per user request): `renderTablesAsAscii` is a toggle in the Settings sheet (Export tab) and in each of the 3 single-file export dialogs as an inline checkbox override. When true, the markdown AST's table nodes are converted to fixed-width monospace text (using a small `lib/ascii-table.ts` helper) *before* the export pipeline sees them. The preview pane is unaffected — this is export-time only.
+
+### 2.5 WelcomeDialog trigger logic
+
+A small `useEffect` in `App.tsx`:
+```ts
+useEffect(() => {
+  if (!useSettingsStore.getState().welcomeDismissed) {
+    useAppStore.getState().openModal('welcome');
+  }
+}, []);  // run once on mount
+```
+
+The Help menu registers a `help.welcome` command that simply calls `openModal('welcome')` — does NOT reset the `welcomeDismissed` flag. (Decision in §2.4 of the brainstorming.)
+
+### 2.6 Commands trigger modals
+
+The command store (Phase 6) gets new commands. Registered in `src/renderer/lib/commands/register-menu-commands.ts`:
+
+| Command ID       | Handler                                              |
+|------------------|------------------------------------------------------|
+| `file.exportPdf`     | `openModal('export-pdf', { sourcePath: activePath })`  |
+| `file.exportDocx`    | `openModal('export-docx', { sourcePath: activePath })` |
+| `file.exportHtml`    | `openModal('export-html', { sourcePath: activePath })` |
+| `file.exportBatch`   | `openModal('export-batch', { sourcePaths: openFiles })` |
+| `settings.open`      | `openModal('settings')`                                  |
+| `help.welcome`       | `openModal('welcome')`                                   |
+| `help.about`         | `openModal('about')`                                     |
+| `file.confirmClose`  | opens confirm dialog before closing a dirty tab        |
+| `app.quit`           | opens confirm if dirty tabs exist, else quits          |
+
+`settings.open` and `help.about` also get buttons in `AppHeader` (already partly done in Phase 6 — we just add new icons and wire to the new commands).
+
+---
+
+## 3. File Map
+
+### 3.1 shadcn primitives (manually created, per the shadcn-CLI-blocked memory)
+
+Created in `src/renderer/components/ui/`:
+- `dialog.tsx`         — Radix Dialog wrapper with motion preset
+- `sheet.tsx`          — Radix Dialog (side variant) for SettingsSheet
+- `tabs.tsx`           — Radix Tabs for the 5-tab SettingsSheet
+- `input.tsx`          — text input
+- `textarea.tsx`       — multi-line input (for confirm body, welcome copy)
+- `select.tsx`         — Radix Select for theme/font/template pickers
+- `switch.tsx`         — Radix Switch for boolean settings
+- `checkbox.tsx`       — Radix Checkbox for "don't show again" toggles
+- `slider.tsx`         — Radix Slider for fontSize
+- `label.tsx`          — Radix Label (always pair with form fields)
+- `form.tsx`           — react-hook-form glue components (FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage)
+- `radio-group.tsx`    — Radix RadioGroup for accent color / template
+
+### 3.2 Modals (`src/renderer/components/modals/`)
+
+- `ModalLayer.tsx`               — root, mounted by `App.tsx`
+- `ExportPdfDialog.tsx`          — PDF options (format, margins, embed fonts, ascii tables)
+- `ExportDocxDialog.tsx`         — DOCX options (template picker: standard/minimal/modern, ascii tables)
+- `ExportHtmlDialog.tsx`         — HTML options (standalone, highlight style, ascii tables)
+- `ExportBatchDialog.tsx`        — batch queue (format, concurrency, file list)
+- `SettingsSheet.tsx`            — 5-tab sheet (side="right", 480px wide)
+  - `EditorSettings.tsx`         — font size, tab size, line numbers, word wrap, minimap
+  - `ThemeSettings.tsx`          — light/dark/auto, accent color, font family
+  - `ExportSettings.tsx`         — pdf format, margins, embed fonts, docx template, html highlight, ascii tables
+  - `PluginsSettings.tsx`        — "Coming soon" placeholder
+  - `AboutSettings.tsx`          — app version, links, acknowledgements
+- `AboutDialog.tsx`              — simple read-only dialog with version + GitHub link
+- `WelcomeDialog.tsx`            — first-launch dialog with quick-start cards
+- `ConfirmDialog.tsx`            — generic confirmation (title, body, destructive, onConfirm)
+- `ExportDialogFooter.tsx`       — shared Cancel / Export button row used by the 4 export dialogs
+- `useExportSource.ts`           — shared hook: reads active buffer, validates, returns source string + path
+
+### 3.3 Stores
+
+- **Modify** `src/renderer/stores/app-store.ts` — add `modal` + `openModal` + `closeModal`; update `partialize` to exclude `modal`
+- **Create** `src/renderer/stores/settings-store.ts` — new
+
+### 3.4 Lib
+
+- **Create** `src/renderer/lib/validators.ts` — zod schemas:
+  - `settingsSchema` (whole settings object)
+  - `exportPdfSchema` (format, margins, embedFonts, renderTablesAsAscii)
+  - `exportDocxSchema` (template, renderTablesAsAscii)
+  - `exportHtmlSchema` (standalone, highlightStyle, renderTablesAsAscii)
+  - `exportBatchSchema` (format, concurrency, file list)
+  - `confirmPropsSchema` (for the confirm dialog)
+- **Create** `src/renderer/lib/ascii-table.ts` — `toAsciiTable(rows: string[][]): string` (the small helper that converts a 2D string array to a fixed-width ASCII table)
+- **Create** `src/renderer/lib/modal-triggers.ts` — small helpers: `useWelcomeTrigger()`, `useQuitGuard()`
+
+### 3.5 Modified files
+
+- **Modify** `src/renderer/App.tsx` — mount `<ModalLayer />` at the bottom; add the `useWelcomeTrigger` `useEffect` for first-launch
+- **Modify** `src/renderer/lib/commands/register-menu-commands.ts` — add the 9 new commands (4 export + settings + welcome + about + confirmClose + quit)
+- **Modify** `src/renderer/components/layout/AppHeader.tsx` — add Settings (gear) and About (info) icon buttons that dispatch the new commands
+- **Modify** `src/main.js` (verify) — no changes expected; menu items already wire to `menu:action` channels that flow through `useBridgeNativeMenu`. If any new menu items need IPC channels, add them in the main process mirror.
+
+### 3.6 Tests
+
+**Unit (`tests/unit/`):**
+- `stores/settings-store.test.ts` (5-6 tests: defaults, setSetting, resetToDefaults, persistence/partialize)
+- `stores/app-store.test.ts` extended (3 tests: openModal sets state, closeModal clears, only one modal at a time)
+- `lib/validators.test.ts` (3 tests: each schema rejects bad input)
+- `lib/ascii-table.test.ts` (3 tests: simple table, alignment, empty input)
+
+**Component (`tests/component/modals/`):**
+- `ExportPdfDialog.test.tsx` (4 tests: renders with default settings, submit calls ipc.export.pdf with merged opts, error renders inline, ascii-table toggle flows through)
+- `ExportDocxDialog.test.tsx` (3 tests: renders, submit includes template, ascii-table toggle)
+- `ExportHtmlDialog.test.tsx` (3 tests: renders, highlight style select, ascii-table toggle)
+- `ExportBatchDialog.test.tsx` (3 tests: renders file list, format selector, concurrency)
+- `SettingsSheet.test.tsx` (6 tests: renders 5 tabs, each tab shows correct fields, settings change persists)
+- `AboutDialog.test.tsx` (2 tests: renders version, links open external)
+- `WelcomeDialog.test.tsx` (3 tests: renders, dismiss sets welcomeDismissed, "don't show again" checked)
+- `ConfirmDialog.test.tsx` (3 tests: confirm calls onConfirm and closes, cancel calls closeModal, destructive variant)
+- `ModalLayer.test.tsx` (3 integration tests: null kind renders nothing, switching kinds replaces modal, modal unmounts on close)
+
+**Integration (`tests/integration/`):**
+- `phase7-modals-smoke.test.tsx` (4 tests: dispatch command opens modal, command store + settings store + IPC all wired, app.tsx mount triggers welcome on first launch, modal layer end-to-end)
+
+---
+
+## 4. Data Flow
+
+### 4.1 Open a modal
+```ts
+// From any command handler in register-menu-commands.ts:
+useAppStore.getState().openModal('export-pdf', { sourcePath: activePath });
+```
+
+### 4.2 The dialog reads source
+```ts
+// ExportPdfDialog.tsx
+const { source, path } = useExportSource();
+if (!source) return <EmptySourceFallback />;
+```
+
+`useExportSource` is a small hook that:
+1. Reads `useFileStore.activeTabId` + `useEditorStore.buffers`
+2. If no active buffer, prompts the user to open a file (uses confirm dialog)
+3. Returns `{ source: string, path: string } | null`
+
+### 4.3 Settings change
+```ts
+// EditorSettings.tsx — switches/inputs call setSetting
+const [fontSize, setFontSize] = useSettingsStore(s => [s.fontSize, s.setSetting]);
+// or
+setSetting('fontSize', 16);
+```
+
+Editor and preview subscribe to specific slices. The `useTheme` hook from `next-themes` is augmented to read `theme: 'light' | 'dark' | 'auto'` from `useSettingsStore` (replacing the standalone next-themes default).
+
+### 4.4 Export flow
+```ts
+// ExportPdfDialog on submit:
+const settings = useSettingsStore.getState();
+const result = await ipc.export.pdf({
+  inputPath: path,
+  outputPath: chosenOutputPath,
+  format: dialogFormat ?? settings.pdfFormat,
+  margins: MARGIN_PRESETS[dialogMargins ?? settings.pdfMargins],
+  embedFonts: dialogEmbed ?? settings.pdfEmbedFonts,
+  renderTablesAsAscii: dialogAscii ?? settings.renderTablesAsAscii,
+});
+if (!result.ok) setError(result.error.message);
+else { closeModal(); /* toast in Phase 8 */ }
+```
+
+The dialog-level overrides fall through to settings defaults when not explicitly chosen.
+
+### 4.5 ASCII table transformation
+The transformation happens in the **renderer** (pre-IPC), so the main process doesn't need to know about ASCII mode:
+```ts
+// In ExportPdfDialog before submitting:
+const finalSource = renderTablesAsAscii
+  ? applyAsciiTransform(source)   // walks AST, replaces <table> blocks
+  : source;
+```
+`applyAsciiTransform` is a small function (10-20 lines) that:
+1. Parses markdown source for `|...|` table syntax via a small regex
+2. Replaces each table block with a fenced code block containing the ASCII table
+3. Returns the modified source
+
+(No AST walker needed — markdown tables are line-based and a regex per line + simple width calc is sufficient.)
+
+### 4.6 DOCX template selection
+The dialog shows a Select with 3 options (standard, minimal, modern). The main process maps these names to bundled `.docx` template files. The IPC contract is unchanged — `DocxOptions.template: string` was already defined in `types/ipc.ts` during Phase 1.
+
+### 4.7 Confirm flow
+```ts
+// In a command handler:
+const activeTab = ...;
+if (activeTab?.dirty) {
+  useAppStore.getState().openModal('confirm', {
+    title: 'Discard unsaved changes?',
+    body: `"${activeTab.title}" has unsaved changes. Close without saving?`,
+    confirmLabel: 'Discard',
+    destructive: true,
+    onConfirm: () => doCloseTab(),
+  });
+} else {
+  doCloseTab();
+}
+```
+
+### 4.8 Welcome first-launch
+`useEffect` in `App.tsx` (run once on mount) checks `welcomeDismissed` from `useSettingsStore`. If false, calls `openModal('welcome')`. The Welcome dialog has a "Don't show again" checkbox that sets `welcomeDismissed: true` and closes.
+
+---
+
+## 5. Error Handling
+
+- **IPC errors in export dialogs:** inline error banner below the submit button. `IpcResult<T>` discriminated union makes this easy. Banner shows `result.error.message` and a "Try again" button that re-submits.
+- **Settings validation:** zod schemas in `validators.ts`. Each form field shows `aria-invalid` + red border on error. Form-level errors via react-hook-form's `formState.errors`.
+- **Confirm dialog cancel:** just calls `closeModal()`. No state mutation. Optional `onCancel` callback for "remember my choice" patterns (not used in Phase 7).
+- **Welcome "don't show again":** persists `welcomeDismissed: true`. Help menu can re-open Welcome (without resetting the flag).
+- **Settings corruption on load (bad localStorage data):** `useSettingsStore` is built with a `partialize` that also acts as a whitelist — only known fields are deserialized. Unknown fields are dropped. If a persisted value fails zod validation, fall back to defaults (logged as a warning).
+
+---
+
+## 6. Testing Strategy
+
+TDD per the established pattern (Phases 1-6). Every component test:
+- Renders with empty/default state
+- One happy-path interaction (form submit, button click)
+- One error/edge case (validation fail, IPC error, cancel)
+
+Store tests focus on pure logic (state transitions, persistence, partialize). Settings store test specifically verifies:
+- Defaults match schema
+- `setSetting` works for leaf keys
+- `resetToDefaults` clears to initial state
+- Persisted payload (from `partialize`) contains exactly the leaf fields
+- Hydration from a partial/corrupt payload doesn't throw
+
+Component tests use `render` + `userEvent`, mock `window.electronAPI` for IPC.
+
+ModalLayer integration test verifies:
+1. Mounting with `kind: null` renders nothing (query container, expect empty)
+2. Mounting with `kind: 'about'` renders `<AboutDialog>` (aria-label match)
+3. Switching from `kind: 'about'` to `kind: 'settings'` unmounts About, mounts Settings (verified by role/aria-label transitions)
+4. Confirm dialog calls `onConfirm` and `closeModal` on success
+
+---
+
+## 7. Risks & Open Questions
+
+**Risks:**
+- **Form library complexity.** react-hook-form + zod is powerful but adds learning curve. Mitigation: a single shared `<SettingsForm>` wrapper reduces cognitive load; export dialogs use simple `useState` (no need for the full form infra).
+- **shadcn Dialog animation jank with our motion presets.** Radix Dialog has its own `data-state` attributes for open/closed. We compose with our `modalPop` preset via `forceMount` + Motion. Need to verify no double-animation.
+- **Settings store hydration race.** If a component reads a setting on first render before hydration completes, it gets the default. For Phase 7 this is fine — defaults are sensible.
+
+**Open questions (deferrable):**
+- Should the "ascii table" output include alignment row separators (`+---+---+`) or just be a `| a | b |`-style table? → Decision: use the `|---|` separator form (more compact, common in plain-text email).
+- Should ExportBatchDialog be a Sheet (queue progress) or a Dialog (form)? → Decision: Dialog with a form; progress is shown inline (not a streaming queue). Phase 9 could revisit.
+- Should `welcomeDismissed` be per-user-account or per-install? → Per-install (localStorage). No multi-user concept in v1.
+
+---
+
+## 8. Out of Scope (deferred to later phases)
+
+- Phase 8: Toast notifications on export success/failure (the dialog's inline error is v1; toasts are a follow-up).
+- Phase 9: ASCII art generator (figlet) is separate from ASCII table rendering. This spec is about table formatting.
+- Phase 9: Word export uses a `.docx` template *generation* step (WordExportDialog), not the IPC `ipc.export.docx` path. Distinct.
+- Phase 10: Delete legacy `src/print-preview.js`, `src/wordTemplateExporter.js`, etc.
+
+---
+
+## 9. Success Criteria
+
+Phase 7 is complete when:
+- All listed shadcn primitives exist in `src/renderer/components/ui/` with tests
+- `useSettingsStore` is implemented, tested, and persisted
+- `useAppStore` extended with `modal` discriminated union and tested
+- All 7 modal components implemented, tested, and accessible (aria-labels, keyboard nav)
+- 4 export dialogs (PDF/DOCX/HTML/Batch) all submit through the command store and call IPC correctly
+- `ModalLayer` mounted in `App.tsx` and integrated with command triggers
+- Welcome dialog shows on first launch, dismissible, re-openable from Help menu
+- Confirm dialog used by quit-with-dirty and close-with-dirty flows
+- ASCII table rendering works (toggle in settings, override in export dialogs)
+- DOCX template picker in ExportDocxDialog submits the correct `template` field
+- `npx vite build` succeeds, `npx vitest run` shows **all tests green** (target: +50 new tests, total ~220)
+- Branch tagged `phase-7-modals` and pushed to origin

docs/superpowers/specs/2026-06-05-react-ui-redesign-design.md

@@ -0,0 +1,361 @@
+# MarkdownConverter — React + shadcn/ui UI Redesign
+
+**Date:** 2026-06-05
+**Status:** Design (awaiting user approval)
+**Branch:** `react-electron`
+**Author:** Brainstormed with user via superpowers:brainstorming
+
+## Summary
+
+Replace the legacy vanilla JS renderer (`src/renderer.js` is 213 KB; `src/styles.css` is 74 KB) with a modern React 19 + Vite + TypeScript + shadcn/ui renderer that achieves visual feature parity while delivering a Polished + Glassy (Raycast/Arc-style) aesthetic. The Electron main process, preload bridge, and IPC contracts stay unchanged. Work proceeds via vertical slices — each PR ships a demoable feature.
+
+## Goals
+
+1. Replace every render-time feature of the legacy renderer with an idiomatic React + shadcn/ui implementation.
+2. Adopt the "Polished + Glassy" visual language (subtle shadows, 8–12 px radii, gradient accents, gentle depth) on top of the existing ConcreteInfo brand tokens and design system.
+3. Use a single component foundation (shadcn/ui) and a single motion library (Motion / Framer Motion) to keep the dependency surface narrow and the design coherent.
+4. Keep the main process, preload, and IPC contracts untouched. The renderer is the only surface being rewritten.
+5. Keep the app runnable at every commit. No "big bang" merge.
+
+## Non-Goals
+
+- Migrating the main process to TypeScript (out of scope for this spec).
+- Adding new features the legacy renderer does not have (plugin system, AI features, etc. — those are future specs).
+- Replacing Pandoc/FFmpeg/ImageMagick orchestration.
+- Changing the packaging pipeline (electron-builder config stays).
+- Replacing the CodeMirror 6 editor — it is the right tool and is already wired up.
+
+## Decisions Locked During Brainstorming
+
+| Decision | Choice | Why |
+|---|---|---|
+| Scope | Full feature parity with legacy renderer | User-selected option. Renderer is one cohesive surface; splitting it across specs would force premature contracts. |
+| Visual style | **B — Polished + Glassy** (Raycast/Arc aesthetic) | "Fancy" comes from elevation, gradient accents, and material depth — not over-designed visuals. |
+| Layout | **2 — IDE-style** (equal editor/preview, draggable divider, collapsible sidebar) | Power-user markdown apps converge on this. Draggable divider + keyboard reset. |
+| Modal patterns | **A (Centered Dialog), B (Right Side-Sheet), D (Toasts)** | No command palette. |
+| Command palette | **No** — full menus, no ⌘K | Power users can use the OS-level launcher. App stays focused on writing. |
+| Animation | **Motion (Framer Motion)** | Best for layout transitions, modal/drawer enter/exit, drag. Sparingly used. |
+| Component library | **shadcn/ui** | Tailwind + Radix primitives, copy-paste ownership, perfect fit for the "glassy" aesthetic and the HSL-CSS-variable foundation that is already in place. |
+| Implementation strategy | **Vertical slices** — one feature end-to-end per PR | App stays runnable. Each PR is reviewable. |
+
+## Defaults (Used Unless Overridden Later)
+
+| Item | Default | Why |
+|---|---|---|
+| State management | Zustand (already in deps) + Immer for nested patches | Already in `package.json`; perfect for editor state. |
+| Theming | shadcn `next-themes`, dark default + light, system-aware | shadcn canonical pattern. Brand colors already in CSS vars. |
+| Icons | `lucide-react` (already in deps) | 1000+ tree-shakable icons. |
+| Forms | `react-hook-form` + `zod` | Standard for shadcn forms. |
+| Drag/drop (sortable lists) | `@dnd-kit/core` | De facto React drag lib (file tree reordering, plugin list reorder). |
+| Pane resize (split layout) | `react-resizable-panels` | Canonical React lib for resizable pane groups; handles drag, arrow keys, snap, persisted sizes. |
+| Testing | Vitest + RTL + Playwright (E2E + visual regression) | Standard for React + Electron. |
+| TypeScript | Strict mode (already wired) | Already in deps and `vite.renderer.config.ts`. |
+
+## Architecture
+
+The Electron app keeps its existing process model. Only the renderer is rewritten.
+
+```
+┌──────────────────────────────────────────────────────────┐
+│  Electron Main (UNCHANGED)                                │
+│  - BrowserWindow, IPC handlers, file/fs ops               │
+│  - Pandoc, FFmpeg, ImageMagick orchestration              │
+└────────────┬─────────────────────────────────────────────┘
+             │ contextBridge (UNCHANGED preload.js)
+┌────────────▼─────────────────────────────────────────────┐
+│  React Renderer (REWRITTEN)                                │
+│  ┌────────────────────────────────────────────────────┐  │
+│  │  AppShell (layout)                                  │  │
+│  │  ├─ MenuBar (native)                                │  │
+│  │  ├─ AppHeader (logo, breadcrumbs, theme toggle)     │  │
+│  │  ├─ TabBar (open files)                             │  │
+│  │  ├─ Toolbar (formatting)                            │  │
+│  │  ├─ ResizablePaneGroup (sidebar | editor | preview) │  │
+│  │  │   ├─ Sidebar (file tree, outline)                │  │
+│  │  │   ├─ EditorPane (CodeMirror 6)                   │  │
+│  │  │   └─ PreviewPane (marked + KaTeX + Mermaid)      │  │
+│  │  ├─ StatusBar (word count, encoding, cursor pos)    │  │
+│  │  └─ ModalLayer (Dialog, SideSheet, Toaster)         │  │
+│  └────────────────────────────────────────────────────┘  │
+│  ┌────────────────────────────────────────────────────┐  │
+│  │  Feature Modules (each owns UI + state slice)       │  │
+│  │  ├─ editor/    CodeMirror wrapper, syntax, themes   │  │
+│  │  ├─ preview/   markdown→html, KaTeX, Mermaid       │  │
+│  │  ├─ tabs/      open files, dirty state              │  │
+│  │  ├─ sidebar/   file tree, outline, search results   │  │
+│  │  ├─ modals/    export, settings, about, etc.        │  │
+│  │  ├─ tools/     zen, repl, ascii-gen, table-gen      │  │
+│  │  └─ export/    pdf, docx, html, image batch         │  │
+│  └────────────────────────────────────────────────────┘  │
+│  ┌────────────────────────────────────────────────────┐  │
+│  │  Shared Infrastructure                              │  │
+│  │  ├─ stores/  Zustand slices per feature             │  │
+│  │  ├─ hooks/   useFile, useEditor, useTheme, etc.     │  │
+│  │  ├─ lib/     cn, ipc, formatters, validators        │  │
+│  │  ├─ ui/      shadcn primitives: button, dialog…     │  │
+│  │  └─ types/   shared TS types                        │  │
+│  └────────────────────────────────────────────────────┘  │
+└──────────────────────────────────────────────────────────┘
+```
+
+### Architectural Rules
+
+- **Shell components** (`AppHeader`, `TabBar`, `StatusBar`) subscribe only to `useAppStore`.
+- **Feature components** subscribe to their own feature's store.
+- **Cross-feature access** goes through hooks, not direct store imports (e.g., `useFileTree()` wraps `useFileStore`).
+- **Feature modules are self-contained** — each owns its components, its Zustand slice, and its types. Safe to develop in parallel later.
+- **No direct `window.electronAPI` calls** from feature code. All IPC goes through `lib/ipc.ts` for type safety and error normalization.
+
+## State Management
+
+```
+stores/
+├─ useAppStore        // global UI: theme, sidebar, pane sizes, modals open
+├─ useFileStore       // file system: tree, open files, active tab
+├─ useEditorStore     // editor: per-file content, cursor, selection, dirty
+├─ usePreviewStore    // preview: scroll sync, zoom, theme
+├─ useSettingsStore   // user prefs (persisted to electron-store)
+└─ useCommandStore    // menu actions registry, recent actions
+```
+
+**Why slices instead of one mega-store?** Editor content can be megabytes. Keeping it in its own slice lets React avoid re-rendering the preview when only the editor changes — components subscribe with selectors.
+
+**Persistent state** (auto-saved to electron-store via Zustand `persist` middleware): theme, sidebar visibility, last open files, pane divider positions, settings.
+
+**Ephemeral state** (lost on quit): active modal, hover states, search query, current file content (saved to disk on idle).
+
+## Visual Design System
+
+### Color Tokens
+
+The existing `globals.css` HSL variables stay. Additions for the "glassy" aesthetic:
+
+```css
+--shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
+--shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
+--shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
+--shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
+
+--glass-bg-light: rgba(255, 255, 255, 0.72);
+--glass-bg-dark:  rgba(13, 11, 9, 0.72);
+--glass-border-light: rgba(255, 255, 255, 0.4);
+--glass-border-dark:  rgba(255, 255, 255, 0.08);
+```
+
+### shadcn Components
+
+Install via `npx shadcn@latest add`:
+
+**Primitives** (need all of these): `button`, `dialog`, `sheet`, `popover`, `tooltip`, `select`, `dropdown-menu`, `tabs`, `separator`, `scroll-area`, `toggle`, `switch`, `slider`, `input`, `textarea`, `label`, `form`, `skeleton`, `sonner`, `command`.
+
+**Composite** (custom-built on top of primitives): `file-tree`, `pane-group`, `divider`, `status-bar`, `menu-bar`, `toast`.
+
+### Typography
+
+- Body: Plus Jakarta Sans 15 px / line-height 1.6
+- Code: JetBrains Mono 13.5 px
+- Display: Barlow Condensed 700/800 — used sparingly (page titles, big metrics)
+- Headings: Plus Jakarta Sans 600/700 with tight letter-spacing
+- Labels (`.label`): Plus Jakarta Sans 500, 12 px, uppercase, 0.05 em letter-spacing
+
+### Motion Choreography
+
+| Element | Motion | Duration | Easing |
+|---|---|---|---|
+| Modal (Dialog A) | Scale 0.96→1, opacity 0→1 | 200 ms | `ease-out` |
+| Side sheet (B) | TranslateX 100%→0, opacity 0→1 | 300 ms | `cubic-bezier(0.16, 1, 0.3, 1)` |
+| Toast | TranslateY 100%→0, opacity | 250 ms | spring(stiffness: 300, damping: 30) |
+| Sidebar toggle | Width 264 px↔72 px, content fade | 250 ms | `ease-in-out` |
+| Divider drag | Live width update | 0 ms | none (instant) |
+| Theme switch | CSS variables, opacity overlay | 300 ms | `ease-in-out` |
+| Tab switch | Underline slide | 200 ms | `ease-out` |
+| Hover (buttons) | `bg` + `shadow` shift | 150 ms | `ease-out` |
+| Focus ring | Outline grow | 100 ms | `ease-out` |
+
+**Rules:** Every motion has a purpose. No gratuitous animation. Respects `prefers-reduced-motion` (Motion handles this automatically).
+
+### Empty / Loading / Error States
+
+Every async surface ships all three. Sonner toasts for ephemeral feedback. Skeleton screens for content areas. Empty-state components with icon + message + primary CTA.
+
+## Modal/Overlay Patterns
+
+| Use case | Pattern | Why |
+|---|---|---|
+| Export (PDF/DOCX/HTML) | A — Centered Dialog | Focused decision, ~3–5 fields, "do one thing" |
+| Settings | B — Right Side-Sheet | Long form, tabbed sections, stays open while editing |
+| Find/Replace | Inline toolbar (not modal) | Always-visible utility |
+| About | A — Centered Dialog | Tiny info dump |
+| Confirm destructive (delete, close unsaved) | A — Centered Dialog | Forces attention |
+| File save error | D — Toast | Non-blocking info |
+| Pandoc/FFmpeg progress | D — Toast → sticky on >3 s | Background work feedback |
+| Plugin manager | B — Right Side-Sheet | Lists + per-item actions |
+| ASCII/Table generators | A — Centered Dialog | Tool-style focused input → output |
+| Print preview | A — Centered Dialog | Full-screen-ish modal overlay |
+| Welcome (first launch) | A — Centered Dialog | One-time onboarding |
+| Word export | A — Centered Dialog | Template selection |
+| Zen mode | Full-viewport toggle (no modal) | Replaces the editor entirely |
+| REPL | Bottom-pinned panel (split-pane) | Persistent terminal-like UI |
+| Quick file open | B — Right Side-Sheet | File tree, search, recent |
+
+### Dialog A Anatomy (Export as example)
+
+```
+┌─ Backdrop (rgba(13,11,9,0.45) + backdrop-blur 4px) ─────────┐
+│                                                            │
+│   ┌──── Modal (max-w-md, rounded-2xl, shadow-lg) ─────┐    │
+│   │ ┌── Header ────────────────────────────────────┐  │    │
+│   │ │ [Icon] Export as PDF                  [×]    │  │    │
+│   │ │ Choose format options                       │  │    │
+│   │ └─────────────────────────────────────────────┘  │    │
+│   │ ┌── Body ──────────────────────────────────────┐  │    │
+│   │ │ Format: [Letter] [A4] [Legal]                │  │    │
+│   │ │ Margins: ────●────                           │  │    │
+│   │ │ ☐ Include table of contents                  │  │    │
+│   │ │ ☐ Embed fonts                                │  │    │
+│   │ └─────────────────────────────────────────────┘  │    │
+│   │ ┌── Footer ────────────────────────────────────┐  │    │
+│   │ │                       [Cancel] [Export →]    │  │    │
+│   │ └─────────────────────────────────────────────┘  │    │
+│   └──────────────────────────────────────────────────┘    │
+│                                                            │
+└────────────────────────────────────────────────────────────┘
+```
+
+### Side-Sheet B Anatomy (Settings as example)
+
+Slides in from right, ~50 % width (max 560 px). Backdrop is `rgba(13,11,9,0.2)` with `backdrop-blur(2 px)` (lighter than dialog — the sheet is the focus). Tab navigation in the sheet header (Editor / Theme / Export / Plugins / About).
+
+### Toast D Anatomy (Sonner)
+
+Stacked bottom-right, max 3 visible. Glass background. Color-coded 3 px left border — success `#1a7a56`, error `#ef4444`, info `#0ea5e9`, warning `#eab308`. Icon + title + description. Optional action button. Auto-dismiss 4 s for success, sticky for error.
+
+## Data Flow (Editor → Preview Pipeline)
+
+```
+User types
+  ↓
+CodeMirror onChange
+  ↓
+useEditorStore.updateContent(tabId, content)  ← debounced 50 ms
+  ↓
+┌─ Persist to electron-store on idle (1 s) ─┐
+│                                            │
+└─ Publish to usePreviewStore (subscribed) ─┘
+  ↓
+marked(content) → sanitized HTML
+  ↓
+PreviewPane renders HTML
+  KaTeX post-processes $...$
+  Mermaid post-processes ```mermaid
+  Highlight.js post-processes ```lang
+  ↓
+useEffect: scroll-sync editor cursor → preview position
+```
+
+**Bidirectional scroll sync:** editor scroll → preview (primary), preview click → editor cursor (secondary). Throttled to 60 fps via `requestAnimationFrame`.
+
+## IPC Contract
+
+The preload bridge stays unchanged. A new `src/renderer/lib/ipc.ts` wraps every channel with TypeScript types and normalizes errors to a discriminated union:
+
+```ts
+type IpcResult<T> =
+  | { ok: true; data: T }
+  | { ok: false; error: { code: string; message: string } };
+
+export const ipc = {
+  file: {
+    open: (): Promise<IpcResult<FileResult>>,
+    read: (path: string): Promise<IpcResult<string>>,
+    write: (path: string, content: string): Promise<IpcResult<void>>,
+    list: (dir: string): Promise<IpcResult<FileEntry[]>>,
+    onChange: (cb: (path: string) => void) => () => void,
+  },
+  export: {
+    pdf: (opts: PdfOptions): Promise<IpcResult<ExportResult>>,
+    docx: (opts: DocxOptions): Promise<IpcResult<ExportResult>>,
+    html: (opts: HtmlOptions): Promise<IpcResult<ExportResult>>,
+    batch: (items: BatchItem[], opts: BatchOptions): Promise<IpcResult<BatchResult>>,
+  },
+  app: {
+    getVersion: (): Promise<IpcResult<string>>,
+    openExternal: (url: string): Promise<IpcResult<void>>,
+    showItemInFolder: (path: string): Promise<IpcResult<void>>,
+  },
+};
+```
+
+## Error Handling
+
+Layered defense — no single failure can crash the app:
+
+1. **IPC errors** → caught in `lib/ipc.ts` wrapper, returned as `IpcResult<T>` discriminated union. Components show toast on error.
+2. **Component errors** → React error boundary per feature area (one for editor, one for preview, one for modals). On error: show inline error UI with "Reload this panel" + "Copy details" actions.
+3. **Async operations** (export, file ops) → loading state on button + toast on completion. Long ops (>2 s) get a sticky toast with cancel.
+4. **Validation errors** (settings, export options) → inline form errors via `react-hook-form` + `zod`. shadcn `Form` component for consistent error display.
+5. **Pandoc/FFmpeg missing** → detected at startup, banner + disable export menu items. Don't surprise-fail at export time.
+
+## Testing Strategy
+
+- **Unit (Vitest):** stores, hooks, lib utilities, formatters, validators
+- **Component (Vitest + RTL):** shadcn wrappers, dialog interactions, sidebar toggle, divider drag, theme toggle
+- **Integration (Vitest + RTL):** editor ↔ preview flow, file open → tab add → content display, settings change persists
+- **E2E (Playwright):** app launches, file opens, markdown renders, export to PDF works
+- **Visual regression (Playwright snapshots):** locked-in screenshots for header, sidebar, dialogs, toasts — catch accidental style drift
+- **Target coverage:** stores/hooks/lib ≥ 90 %, components ≥ 75 %, E2E covers all critical paths
+
+## Accessibility (WCAG 2.1 AA)
+
+Baked in via shadcn + Radix:
+
+- All dialogs focus-trap, Esc to close, return focus to trigger
+- All interactive elements keyboard-reachable
+- Visible focus rings (2 px brand ring)
+- 4.5:1 contrast minimum (already met by brand colors)
+- `aria-label` on icon buttons, `role="alert"` on toasts
+- Respects `prefers-reduced-motion` (Motion handles this automatically)
+
+## Implementation Phases (Vertical Slices)
+
+Each phase is a shippable PR that keeps the app runnable. The legacy `renderer.js` is gradually replaced; until each phase is complete, the old renderer code still runs the missing parts.
+
+| # | Phase | Output | Acceptance |
+|---|---|---|---|
+| 1 | **Foundation** | shadcn installed; `next-themes`, `motion`, `react-hook-form`, `zod`, `@dnd-kit/core`, `react-resizable-panels`, `sonner` installed; design tokens finalized; `lib/utils.ts` (`cn`), `lib/ipc.ts` typed wrappers, `lib/motion.ts` preset transitions, `App.tsx` shell skeleton renders | `npm run build` succeeds; dev server shows the new shell with theme toggle working |
+| 2 | **App shell + layout** | `AppHeader`, `TabBar`, `Toolbar`, `Breadcrumb`, `StatusBar`, `ResizablePaneGroup` with sidebar toggle and draggable divider. Empty editor/preview panes. | Resize divider with mouse and arrow keys; sidebar collapses; pane sizes persist. |
+| 3 | **Editor pane** | CodeMirror 6 wrapped, dark/light themes wired to shadcn theme, syntax highlighting, line numbers, search, autocomplete | Open `.md` file → renders in editor; can edit and save. |
+| 4 | **Preview pane** | marked + DOMPurify + KaTeX + Mermaid + highlight.js. Bidirectional scroll sync with editor. | Open file → preview renders, follows cursor. |
+| 5 | **File tree + tabs** | Sidebar file tree (read directory on demand, lazy-expand children only on click). Tabs for open files. Dirty state indicator. File content is read from disk only when the tab is activated. | Open folder → root populates; click folder → children load; click file → opens in tab; close tab reverts dirty. |
+| 6 | **Native menus + toolbar** | Replace the legacy `CommandPalette` with full menus (File / Edit / View / Insert / Format / Tools / Help) bound to keyboard shortcuts. Toolbar buttons. | All menu items invoke the right action; shortcuts work; toolbar reflects active state. |
+| 7 | **Modals** | Export dialog (PDF/DOCX/HTML/batch), Settings side-sheet (Editor/Theme/Export/Plugins/About tabs), About dialog, Confirm-destructive dialog | All dialogs and sheet render with proper motion; settings persist; export works end-to-end. |
+| 8 | **Toasts** | Sonner wired into all async operations (save, export, errors, tool missing) | All operations give appropriate feedback; no silent failures. |
+| 9 | **Advanced tools** | Zen mode (full-viewport toggle), REPL (bottom-pinned panel), ASCII generator, Table generator, Word export template picker, Print preview | Each tool is feature-complete vs. legacy version. |
+| 10 | **Polish + delete legacy** | Visual regression snapshots locked; remove `renderer.js` and old `styles*.css` references from build; `npm run build:linux` produces a working installer | Final PR ships an installer with no legacy code paths. |
+
+## Risks and Mitigations
+
+| Risk | Mitigation |
+|---|---|
+| shadcn CLI requires Vite (not vanilla Electron renderer) | Vite is already configured for the renderer in `vite.renderer.config.ts`; the CLI works against the same project. |
+| shadcn CLI assumes Tailwind is at project root; we have it in renderer/ only | Point the CLI at `src/renderer/components.json` and set `tailwind.css` to the right path. |
+| Marked + KaTeX + Mermaid + highlight.js together is heavy | Lazy-load Mermaid (only when `mermaid` code block encountered). KaTeX is loaded once, cached. |
+| Editor content state can be megabytes → re-render storms | Editor content lives in its own slice; preview subscribes to a derived/cached HTML string; components use `useShallow` / selector subscriptions. |
+| Bidirectional scroll sync loops | `useEffect` debounce + ignore if cursor/selection is the sync source. |
+| CodeMirror 6 doesn't ship a Tailwind theme by default | Use `@codemirror/theme-one-dark` for dark; build a custom theme that pulls from CSS variables for light. |
+| The legacy `renderer.js` and `styles*.css` are referenced from `index.html` (now `src/renderer/index.html`) | Phase 10 deletes the references; until then, both run side-by-side and the new React app sits in a known root div. |
+| Electron `nodeIntegration` is off; we use contextBridge | Already the case. Document the contract clearly in `lib/ipc.ts`. |
+
+## Open Questions (to confirm before implementation)
+
+None. All major decisions are locked. Defaults will be used unless the user overrides them when reviewing the implementation plan.
+
+## References
+
+- `src/renderer.js` (213 KB) — legacy renderer being replaced
+- `src/styles.css` (74 KB), `src/styles-modern.css` (71 KB), `src/styles-concreteinfo.css` (21 KB) — legacy styles being replaced
+- `src/renderer/styles/globals.css` — already shadcn-compatible (HSL CSS variables)
+- `src/renderer/App.tsx` — empty skeleton that references components we will build
+- `tailwind.config.js` — brand colors and fonts already defined
+- `vite.renderer.config.ts` — Vite + React plugin already configured
+- `package.json` — CodeMirror 6, TanStack Table, lucide-react, cva, clsx, tailwind-merge, tailwindcss-animate already installed

eslint.config.js

@@ -75,6 +75,7 @@ module.exports = [
         jest: 'readonly',
         describe: 'readonly',
         test: 'readonly',
+        it: 'readonly',
         expect: 'readonly',
         beforeEach: 'readonly',
         afterEach: 'readonly',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-converter",
-  "version": "4.3.0",
+  "version": "4.4.2",
   "description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
   "main": "src/main.js",
   "scripts": {
@@ -8,6 +8,9 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
+    "test:renderer": "vitest run",
+    "test:renderer:watch": "vitest",
+    "test:renderer:coverage": "vitest run --coverage",
     "lint": "eslint src tests",
     "lint:fix": "eslint src tests --fix",
     "format": "prettier --write src tests",
@@ -19,9 +22,11 @@
     "create-cert": "powershell -ExecutionPolicy Bypass -File scripts/create-selfsigned-cert.ps1",
     "build:mac": "electron-builder --mac",
     "build:linux": "electron-builder --linux",
+    "build:linux-ci": "electron-builder --linux deb AppImage",
     "build:local": "electron-builder --linux --win",
     "dist": "electron-builder --publish=never",
     "dist:all": "electron-builder -mwl",
+    "download-tools": "node scripts/download-tools.js",
     "generate-icons": "node scripts/generate-icons.js"
   },
   "keywords": [
@@ -41,7 +46,19 @@
     "url": "https://github.com/amitwh/markdown-converter"
   },
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/ui": "^4.1.8",
+    "autoprefixer": "^10.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "cross-env": "^10.0.0",
     "electron": "^41.1.1",
     "electron-builder": "^26.0.12",
@@ -50,8 +67,17 @@
     "eslint-plugin-prettier": "^5.5.4",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
+    "jsdom": "^29.1.1",
+    "lucide-react": "^1.17.0",
+    "postcss": "^8.5.15",
     "prettier": "^3.7.4",
-    "sharp": "^0.34.3"
+    "sharp": "^0.34.3",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^3.4.19",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.1",
@@ -68,24 +94,52 @@
     "@codemirror/state": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.39.16",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.4.0",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@tanstack/react-table": "^8.21.3",
     "codemirror": "^6.0.2",
     "core-util-is": "^1.0.3",
     "docx": "^9.6.0",
-    "docx4js": "^3.3.0",
+    "docx4js": "^2.0.1",
     "dompurify": "^3.3.1",
     "electron-store": "^10.1.0",
+    "ffmpeg-static": "^5.3.0",
     "highlight.js": "^11.11.1",
     "html2pdf.js": "^0.14.0",
+    "immer": "^11.1.8",
     "marked": "^17.0.3",
     "marked-footnote": "^1.4.0",
     "marked-highlight": "^2.2.3",
     "mermaid": "^11.12.3",
+    "motion": "^12.40.0",
+    "next-themes": "^0.4.6",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^5.5.207",
     "pdfkit": "^0.17.2",
     "pizzip": "^3.2.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.77.0",
+    "react-resizable-panels": "^4.11.2",
     "simple-git": "^3.32.3",
-    "tslib": "^2.8.1"
+    "sonner": "^2.0.7",
+    "tslib": "^2.8.1",
+    "zod": "^4.4.3",
+    "zustand": "^5.0.14"
   },
   "overrides": {
     "jszip": "^3.10.1",
@@ -109,6 +163,10 @@
       "node_modules/**/*",
       "package.json"
     ],
+    "asarUnpack": [
+      "node_modules/ffmpeg-static/**"
+    ],
+    "extraFiles": [],
     "fileAssociations": [
       {
         "ext": "md",
@@ -160,7 +218,14 @@
       "artifactName": "${productName}-${version}-${arch}.${ext}",
       "requestedExecutionLevel": "asInvoker",
       "legalTrademarks": "Copyright (C) 2024-2025 ConcreteInfo",
-      "verifyUpdateCodeSignature": false
+      "verifyUpdateCodeSignature": false,
+      "signAndEditExecutable": false,
+      "extraFiles": [
+        {
+          "from": "bin/win32/pandoc.exe",
+          "to": "bin/pandoc.exe"
+        }
+      ]
     },
     "nsis": {
       "oneClick": false,
@@ -182,29 +247,24 @@
       "target": [
         "deb",
         "AppImage",
-        "snap",
-        "rpm"
+        "snap"
       ],
       "category": "Utility",
-      "maintainer": "ConcreteInfo <amit.wh@gmail.com>"
+      "maintainer": "ConcreteInfo <amit.wh@gmail.com>",
+      "extraFiles": [
+        {
+          "from": "bin/linux/pandoc",
+          "to": "bin/pandoc"
+        }
+      ]
     },
     "deb": {
       "depends": [
-        "pandoc",
-        "ffmpeg",
         "imagemagick",
         "libreoffice-common"
       ],
       "description": "Professional Markdown editor and universal file converter",
       "maintainer": "ConcreteInfo <amit.wh@gmail.com>"
-    },
-    "rpm": {
-      "depends": [
-        "pandoc",
-        "ffmpeg",
-        "ImageMagick",
-        "libreoffice-core"
-      ]
     }
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

scripts/download-tools.js

@@ -0,0 +1,148 @@
+#!/usr/bin/env node
+/**
+ * Downloads pandoc binary for the current build platform.
+ * Run automatically via `npm run download-tools` before building.
+ * Skips download if binary already exists (idempotent).
+ */
+
+const https = require('https');
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+const { execSync } = require('child_process');
+
+const PANDOC_VERSION = '3.9.0.2';
+
+const PANDOC_CONFIG = {
+  linux: {
+    url: `https://github.com/jgm/pandoc/releases/download/${PANDOC_VERSION}/pandoc-${PANDOC_VERSION}-linux-amd64.tar.gz`,
+    archiveExt: '.tar.gz',
+    destFile: 'pandoc',
+    extract(archivePath, destDir) {
+      const tmpDir = path.join(os.tmpdir(), `pandoc-${Date.now()}`);
+      fs.mkdirSync(tmpDir, { recursive: true });
+      execSync(`tar -xzf "${archivePath}" -C "${tmpDir}" pandoc-${PANDOC_VERSION}/bin/pandoc`);
+      const src = path.join(tmpDir, `pandoc-${PANDOC_VERSION}`, 'bin', 'pandoc');
+      fs.copyFileSync(src, path.join(destDir, 'pandoc'));
+      fs.chmodSync(path.join(destDir, 'pandoc'), 0o755);
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    },
+  },
+  win32: {
+    url: `https://github.com/jgm/pandoc/releases/download/${PANDOC_VERSION}/pandoc-${PANDOC_VERSION}-windows-x86_64.zip`,
+    archiveExt: '.zip',
+    destFile: 'pandoc.exe',
+    extract(archivePath, destDir) {
+      const tmpDir = path.join(os.tmpdir(), `pandoc-${Date.now()}`);
+      fs.mkdirSync(tmpDir, { recursive: true });
+      execSync(
+        `powershell -Command "Expand-Archive -Force '${archivePath}' '${tmpDir}'"`,
+      );
+      const src = path.join(tmpDir, `pandoc-${PANDOC_VERSION}`, 'pandoc.exe');
+      fs.copyFileSync(src, path.join(destDir, 'pandoc.exe'));
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    },
+  },
+  darwin: {
+    url: `https://github.com/jgm/pandoc/releases/download/${PANDOC_VERSION}/pandoc-${PANDOC_VERSION}-x86_64-macOS.zip`,
+    archiveExt: '.zip',
+    destFile: 'pandoc',
+    extract(archivePath, destDir) {
+      const tmpDir = path.join(os.tmpdir(), `pandoc-${Date.now()}`);
+      fs.mkdirSync(tmpDir, { recursive: true });
+      execSync(`unzip -o "${archivePath}" -d "${tmpDir}"`);
+      const src = path.join(tmpDir, `pandoc-${PANDOC_VERSION}`, 'bin', 'pandoc');
+      fs.copyFileSync(src, path.join(destDir, 'pandoc'));
+      fs.chmodSync(path.join(destDir, 'pandoc'), 0o755);
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    },
+  },
+};
+
+function download(url, destPath) {
+  return new Promise((resolve, reject) => {
+    const file = fs.createWriteStream(destPath);
+    let received = 0;
+    let total = 0;
+    let lastPct = -1;
+
+    function get(redirectUrl) {
+      const client = redirectUrl.startsWith('https://') ? https : http;
+      client
+        .get(redirectUrl, (res) => {
+          if (res.statusCode === 301 || res.statusCode === 302) {
+            get(res.headers.location);
+            return;
+          }
+          if (res.statusCode !== 200) {
+            reject(new Error(`HTTP ${res.statusCode} for ${redirectUrl}`));
+            return;
+          }
+          total = parseInt(res.headers['content-length'] || '0', 10);
+          res.on('data', (chunk) => {
+            received += chunk.length;
+            if (total > 0) {
+              const pct = Math.floor((received / total) * 100);
+              if (pct !== lastPct && pct % 10 === 0) {
+                process.stdout.write(`  ${pct}%\r`);
+                lastPct = pct;
+              }
+            }
+          });
+          res.pipe(file);
+          file.on('finish', () => {
+            file.close();
+            process.stdout.write('  100%\n');
+            resolve();
+          });
+        })
+        .on('error', (err) => {
+          fs.unlink(destPath, () => {});
+          reject(err);
+        });
+    }
+    get(url);
+  });
+}
+
+async function downloadPandoc() {
+  const platform = process.platform;
+  const config = PANDOC_CONFIG[platform];
+
+  if (!config) {
+    console.log(`[download-tools] No pandoc config for platform "${platform}" — skipping.`);
+    return;
+  }
+
+  const destDir = path.join(__dirname, '..', 'bin', platform);
+  const destFile = path.join(destDir, config.destFile);
+
+  if (fs.existsSync(destFile)) {
+    console.log(`[download-tools] pandoc already present at ${destFile} — skipping.`);
+    return;
+  }
+
+  fs.mkdirSync(destDir, { recursive: true });
+
+  const tmpArchive = path.join(os.tmpdir(), `pandoc-download${config.archiveExt}`);
+
+  console.log(`[download-tools] Downloading pandoc ${PANDOC_VERSION} for ${platform}...`);
+  await download(config.url, tmpArchive);
+
+  console.log(`[download-tools] Extracting to ${destDir}...`);
+  config.extract(tmpArchive, destDir);
+
+  try {
+    fs.unlinkSync(tmpArchive);
+  } catch (_) {
+    /* ignore */
+  }
+
+  console.log(`[download-tools] pandoc ready: ${destFile}`);
+}
+
+downloadPandoc().catch((err) => {
+  console.error('[download-tools] FAILED:', err.message);
+  process.exit(1);
+});

src/adapters/electron/fs.js

@@ -4,7 +4,7 @@
  * Implements file system operations for Electron using IPC.
  * This abstracts file operations to enable easier testing and migration.
  *
- * @version 4.1.0
+ * @version 4.4.1
  */
 
 /**

src/adapters/types.js

@@ -5,7 +5,7 @@
  * Adapters abstract file system, conversion, and system operations
  * to enable easier testing and future platform migration.
  *
- * @version 4.1.0
+ * @version 4.4.1
  */
 
 /**

src/editor/codemirror-setup.js

@@ -59,6 +59,11 @@ const jetBrainsMonoTheme = EditorView.theme({
  * @returns {EditorView} the created editor view
  */
 function createEditor(parentElement, options = {}) {
+  console.log('[createEditor] Called with parentElement:', parentElement?.id, 'dimensions:', parentElement?.clientWidth, 'x', parentElement?.clientHeight);
+  if (!parentElement) {
+    console.error('[createEditor] ERROR: parentElement is null or undefined!');
+    return null;
+  }
   const {
     content = '',
     onChange = () => {},

src/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <!-- CSP: unsafe-inline/unsafe-eval required for marked.js extensions and Mermaid -->
     <!-- TODO: Migrate to nonce-based CSP for better security -->
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' https://www.plantuml.com;">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; img-src 'self' data: blob:; font-src 'self' data: https://cdn.jsdelivr.net; connect-src 'self' https://www.plantuml.com;">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MarkdownConverter</title>
     <!-- Design tokens - loaded first for CSS variable availability -->
@@ -31,7 +31,7 @@
                 <span class="app-title">MarkdownConverter</span>
             </div>
             <div class="app-header-right">
-                <span class="app-version">v4.2.0</span>
+                <span class="app-version" id="app-version-display"></span>
             </div>
         </div>
         <div class="tab-bar" id="tab-bar" role="tablist" aria-label="Document tabs">
@@ -288,6 +288,52 @@
                         </div>
                     </div>
 
+                    <div class="export-section revealjs-only" style="display: none;">
+                        <label>Reveal.js Options:</label>
+                        <div class="form-row">
+                            <label for="reveal-theme">Slide Theme:</label>
+                            <select id="reveal-theme">
+                                <option value="black">Black</option>
+                                <option value="white">White</option>
+                                <option value="league">League</option>
+                                <option value="beige">Beige</option>
+                                <option value="sky">Sky</option>
+                                <option value="night">Night</option>
+                                <option value="serif">Serif</option>
+                                <option value="simple">Simple</option>
+                                <option value="solarized">Solarized</option>
+                                <option value="blood">Blood</option>
+                                <option value="moon">Moon</option>
+                            </select>
+                        </div>
+                        <div class="form-row">
+                            <label for="reveal-transition">Transition:</label>
+                            <select id="reveal-transition">
+                                <option value="slide">Slide</option>
+                                <option value="none">None</option>
+                                <option value="fade">Fade</option>
+                                <option value="convex">Convex</option>
+                                <option value="concave">Concave</option>
+                                <option value="zoom">Zoom</option>
+                            </select>
+                        </div>
+                        <div class="form-row">
+                            <label for="reveal-speed">Transition Speed:</label>
+                            <select id="reveal-speed">
+                                <option value="default">Default</option>
+                                <option value="fast">Fast</option>
+                                <option value="slow">Slow</option>
+                            </select>
+                        </div>
+                        <div class="checkbox-group">
+                            <label><input type="checkbox" id="reveal-slide-number"> Slide Numbers</label>
+                            <label><input type="checkbox" id="reveal-controls" checked> Controls</label>
+                            <label><input type="checkbox" id="reveal-progress" checked> Progress Bar</label>
+                            <label><input type="checkbox" id="reveal-history" checked> Slide History</label>
+                            <label><input type="checkbox" id="reveal-center" checked> Center Content</label>
+                        </div>
+                    </div>
+
                     <div class="export-section">
                         <label>Bibliography:</label>
                         <div class="form-row">
@@ -905,6 +951,7 @@
                     <button class="modal-close" id="pdf-editor-dialog-close" aria-label="Close">&times;</button>
                 </div>
                 <div class="modal-body pdf-editor-body">
+                    <div class="pdf-editor-left-panel">
                     <!-- Merge PDFs Section -->
                     <div id="pdf-merge-section" class="pdf-operation-section hidden">
                         <div class="export-section">
@@ -1287,6 +1334,16 @@
                         </div>
                     </div>
                 </div>
+
+                <!-- Right Panel: Scrollable Visual Page Sidebar -->
+                <div id="pdf-thumbnail-sidebar" class="pdf-editor-right-panel hidden">
+                    <h4>Page Preview &amp; Editor</h4>
+                    <p class="sidebar-help">Select a PDF to view pages, check to delete, click ↻ to rotate, and use ◀ / ▶ to reorder.</p>
+                    <div id="pdf-thumbnail-grid" class="pdf-thumbnail-grid">
+                        <!-- Page thumbnail cards will be rendered here dynamically -->
+                    </div>
+                </div>
+            </div>
                 <div class="modal-footer">
                     <button id="pdf-editor-cancel" class="btn btn-secondary" data-close>Cancel</button>
                     <button id="pdf-editor-process" class="btn btn-primary">Process</button>

src/main.js

@@ -2,8 +2,9 @@ const { app, BrowserWindow, Menu, dialog, ipcMain, shell } = require('electron')
 const path = require('path');
 const fs = require('fs');
 const { exec, execFile, spawn } = require('child_process');
-const { PDFDocument, rgb, degrees, StandardFonts } = require('pdf-lib');
 const WordTemplateExporter = require('./wordTemplateExporter');
+const PDFOperations = require('./main/PDFOperations');
+const GitOperations = require('./main/GitOperations');
 
 // Add MiKTeX to PATH for LaTeX support
 if (process.platform === 'win32') {
@@ -14,13 +15,39 @@ if (process.platform === 'win32') {
   }
 }
 
-// Get the system Pandoc path
+// Returns path to pandoc: bundled binary when packaged, dev bin or system fallback otherwise.
 function getPandocPath() {
-  // Pandoc is expected to be in the system's PATH.
-  // The command will be executed directly. Quoting is handled by exec.
+  if (app.isPackaged) {
+    const ext = process.platform === 'win32' ? '.exe' : '';
+    return path.join(process.resourcesPath, 'bin', `pandoc${ext}`);
+  }
+  // Development: prefer locally-downloaded binary in bin/<platform>/
+  const devBin = path.join(
+    __dirname,
+    '..',
+    'bin',
+    process.platform,
+    process.platform === 'win32' ? 'pandoc.exe' : 'pandoc',
+  );
+  if (fs.existsSync(devBin)) return devBin;
   return 'pandoc';
 }
 
+// Returns path to ffmpeg: asar-unpacked bundled binary when packaged, system fallback otherwise.
+function getFFmpegPath() {
+  try {
+    let ffmpegPath = require('ffmpeg-static');
+    if (app.isPackaged) {
+      // ffmpeg-static is in asarUnpack — rewrite the path to the unpacked location
+      ffmpegPath = ffmpegPath.replace('app.asar' + path.sep, 'app.asar.unpacked' + path.sep);
+    }
+    if (fs.existsSync(ffmpegPath)) return ffmpegPath;
+  } catch (_) {
+    /* ffmpeg-static not available */
+  }
+  return process.platform === 'win32' ? 'ffmpeg' : 'ffmpeg';
+}
+
 // Check if Pandoc is available
 function checkPandocAvailable() {
   return new Promise((resolve) => {
@@ -215,7 +242,9 @@ function runPandoc(args, callback) {
 function runPandocCmd(cmdString, callback) {
   const parsed = parseCommand(cmdString);
   // Skip 'pandoc' if it's the first element (command itself)
-  const args = parsed.command === 'pandoc' ? parsed.args : [parsed.command, ...parsed.args];
+  // Use path.basename to handle full paths like bin/linux/pandoc
+  const cmdBase = path.basename(parsed.command).replace(/\.exe$/i, '');
+  const args = cmdBase === 'pandoc' ? parsed.args : [parsed.command, ...parsed.args];
   const pandocPath = getPandocPath();
   execFile(pandocPath, args, { maxBuffer: 10 * 1024 * 1024 }, callback);
 }
@@ -283,6 +312,41 @@ const store = {
   }
 };
 
+// Plugin settings IPC handlers
+ipcMain.handle('plugin-settings:get', (_event, key) => {
+  return store.get(key);
+});
+ipcMain.handle('plugin-settings:set', (_event, { key, value }) => {
+  store.set(key, value);
+});
+ipcMain.handle('get-app-version', () => app.getVersion());
+
+// ============================================
+// SECURITY: Permission Request Handler
+// ============================================
+// Restrict permissions to only those explicitly needed.
+// Deny: camera, microphone, geolocation, notifications, etc.
+// Allow: clipboard-read, clipboard-write (user expects these)
+app.on('web-contents-created', (event, contents) => {
+  contents.session.setPermissionRequestHandler((webContents, permission, callback) => {
+    const ALLOWED_PERMISSIONS = [
+      'clipboard-read',
+      'clipboard-write'
+    ];
+
+    if (ALLOWED_PERMISSIONS.includes(permission)) {
+      callback(true);
+    } else {
+      // Deny all other permissions (camera, microphone, geolocation, etc.)
+      console.warn(`[Security] Blocked permission request: ${permission}`);
+      callback(false);
+    }
+  });
+
+  // Disable file download dialogs for security
+  // contents.session.setDownloadPath(userDownloadsPath);
+});
+
 let mainWindow;
 let currentFile = null; // This will now represent the active tab's file
 let pandocAvailable = null; // Cache pandoc availability check
@@ -787,6 +851,20 @@ function createMenu() {
           }
         },
         { type: 'separator' },
+        {
+          label: 'Custom Preview CSS',
+          submenu: [
+            {
+              label: 'Load Custom Preview CSS...',
+              click: () => mainWindow.webContents.send('load-custom-css')
+            },
+            {
+              label: 'Clear Custom Preview CSS',
+              click: () => mainWindow.webContents.send('clear-custom-css')
+            }
+          ]
+        },
+        { type: 'separator' },
         { label: 'Reload', accelerator: 'CmdOrCtrl+R', role: 'reload' },
         { label: 'Toggle DevTools', accelerator: 'F12', role: 'toggleDevTools' },
         { type: 'separator' },
@@ -1029,7 +1107,7 @@ function showAboutDialog() {
 <body>
   <img src="${iconBase64}" class="logo" alt="MarkdownConverter">
   <h1>MarkdownConverter</h1>
-  <div class="version">Version 4.1.0</div>
+  <div class="version">Version ${app.getVersion()}</div>
 
   <div class="company">
     <span>by</span>
@@ -1833,9 +1911,12 @@ function checkConverterAvailable(tool) {
       case 'imagemagick':
         toolName = isWin ? 'magick' : 'convert';
         break;
-      case 'ffmpeg':
-        toolName = 'ffmpeg';
-        break;
+      case 'ffmpeg': {
+        // ffmpeg-static is always bundled — check it directly
+        const ffmpegBin = getFFmpegPath();
+        resolve(fs.existsSync(ffmpegBin) || ffmpegBin === 'ffmpeg');
+        return;
+      }
       default:
         resolve(false);
         return;
@@ -2062,8 +2143,8 @@ function convertWithImageMagick(inputFile, outputPath) {
 // FFmpeg conversion - returns {command, args} for execFile
 function convertWithFFmpeg(inputFile, outputPath) {
   return {
-    command: 'ffmpeg',
-    args: ['-i', inputFile, outputPath, '-y']
+    command: getFFmpegPath(),
+    args: ['-i', inputFile, outputPath, '-y'],
   };
 }
 
@@ -2232,8 +2313,32 @@ function performExportWithOptions(format, options) {
         dialog.showErrorBox('Export Error', sanitizeErrorMessage(`Failed to export: ${err.message}`));
       }
     } else if (format === 'revealjs') {
-      pandocCmd = `${getPandocPath()} "${currentFile}" -t revealjs -s -o "${outputFile}" --slide-level=2`;
-      exportWithPandoc(pandocCmd, outputFile, format);
+      let revealCmd = `${getPandocPath()} "${currentFile}" -t revealjs -s -o "${outputFile}" --slide-level=2`;
+      if (options) {
+        if (options.revealTheme) revealCmd += ` -V theme="${options.revealTheme}"`;
+        if (options.revealTransition) revealCmd += ` -V transition="${options.revealTransition}"`;
+        if (options.revealTransitionSpeed) revealCmd += ` -V transitionSpeed="${options.revealTransitionSpeed}"`;
+        if (options.revealControls !== undefined) revealCmd += ` -V controls="${options.revealControls}"`;
+        if (options.revealSlideNumber !== undefined) revealCmd += ` -V slideNumber="${options.revealSlideNumber}"`;
+        if (options.revealProgress !== undefined) revealCmd += ` -V progress="${options.revealProgress}"`;
+        if (options.revealHistory !== undefined) revealCmd += ` -V history="${options.revealHistory}"`;
+        if (options.revealCenter !== undefined) revealCmd += ` -V center="${options.revealCenter}"`;
+
+        // Support for templates, metadata, bibliography
+        if (options.template && options.template !== 'default') {
+          revealCmd += ` --template="${options.template}"`;
+        }
+        if (options.metadata) {
+          for (const [key, value] of Object.entries(options.metadata)) {
+            if (value.trim()) {
+              revealCmd += ` -M ${key}="${value.replace(/"/g, '\\"')}"`;
+            }
+          }
+        }
+        if (options.bibliography) revealCmd += ` --bibliography="${options.bibliography}"`;
+        if (options.csl) revealCmd += ` --csl="${options.csl}"`;
+      }
+      exportWithPandoc(revealCmd, outputFile, format);
     } else if (format === 'beamer') {
       pandocCmd = `${getPandocPath()} "${currentFile}" -t beamer -o "${outputFile}"`;
       exportWithPandoc(pandocCmd, outputFile, format);
@@ -2934,6 +3039,55 @@ ipcMain.on('select-folder', (event, type) => {
   }
 });
 
+// List directory contents as FileEntry[]
+ipcMain.handle('list-directory', async (event, dirPath) => {
+  try {
+    const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+    return entries.map((dirent) => {
+      const fullPath = path.join(dirPath, dirent.name);
+      let size;
+      let modifiedAt;
+      if (!dirent.isDirectory()) {
+        try {
+          const stat = fs.statSync(fullPath);
+          size = stat.size;
+          modifiedAt = stat.mtime.toISOString();
+        } catch {
+          // ignore stat errors
+        }
+      }
+      return {
+        name: dirent.name,
+        path: fullPath,
+        isDirectory: dirent.isDirectory(),
+        size,
+        modifiedAt,
+      };
+    });
+  } catch (err) {
+    return { error: err.message };
+  }
+});
+
+// Show folder picker dialog and return selected path or null
+ipcMain.handle('pick-folder', async () => {
+  const result = await dialog.showOpenDialog(mainWindow, {
+    properties: ['openDirectory'],
+  });
+  if (result.canceled || result.filePaths.length === 0) return null;
+  return result.filePaths[0];
+});
+
+// Show file picker dialog for markdown files and return selected path or null
+ipcMain.handle('pick-file', async () => {
+  const result = await dialog.showOpenDialog(mainWindow, {
+    properties: ['openFile'],
+    filters: [{ name: 'Markdown', extensions: ['md', 'markdown', 'mdown', 'mkd'] }],
+  });
+  if (result.canceled || result.filePaths.length === 0) return null;
+  return result.filePaths[0];
+});
+
 ipcMain.on('export-spreadsheet', (event, { content, format }) => {
   const outputFile = dialog.showSaveDialogSync(mainWindow, {
     defaultPath: currentFile.replace(/\.[^/.]+$/, `.${format}`),
@@ -3694,7 +3848,7 @@ app.on('open-file', (event, filePath) => {
 // Handle file opening from command line or file association
 function openFileFromPath(filePath) {
   console.log('[MAIN] openFileFromPath called with:', filePath);
-  console.log('[MAIN] rendererReady:', rendererReady, 'mainWindow exists:', !!mainWindow);
+  console.log('[MAIN] rendererReady:', rendererReady, 'mainWindow exists:', !!mainWindow, 'webContents exists:', !!(mainWindow?.webContents));
   if (fs.existsSync(filePath)) {
     const stats = fs.statSync(filePath);
     if (stats.size > MAX_FILE_SIZE) {
@@ -3704,6 +3858,7 @@ function openFileFromPath(filePath) {
     currentFile = filePath;
     const content = fs.readFileSync(filePath, 'utf-8');
     console.log('[MAIN] File read successfully, content length:', content.length);
+    console.log('[MAIN] About to send file-opened. mainWindow:', !!mainWindow, 'webContents:', !!(mainWindow?.webContents), 'rendererReady:', rendererReady);
     if (mainWindow && mainWindow.webContents && rendererReady) {
       // Send file immediately - renderer-ready means UI is initialized
       console.log('[MAIN] Sending file-opened to renderer');
@@ -3719,433 +3874,9 @@ function openFileFromPath(filePath) {
 }
 
 // ========================================
-// PDF EDITOR OPERATIONS (using pdf-lib)
+// PDF OPERATIONS — delegates to main/PDFOperations.js
 // ========================================
 
-// Helper function to parse page ranges (e.g., "1-5, 7, 9-12")
-function parsePageRanges(rangeString, totalPages) {
-  const pages = [];
-  const ranges = rangeString.split(',').map(r => r.trim());
-
-  for (const range of ranges) {
-    if (range.includes('-')) {
-      const [start, end] = range.split('-').map(n => parseInt(n.trim()));
-      for (let i = start; i <= end && i <= totalPages; i++) {
-        if (i > 0 && !pages.includes(i - 1)) { // Convert to 0-indexed
-          pages.push(i - 1);
-        }
-      }
-    } else {
-      const page = parseInt(range);
-      if (page > 0 && page <= totalPages && !pages.includes(page - 1)) {
-        pages.push(page - 1);
-      }
-    }
-  }
-
-  return pages.sort((a, b) => a - b);
-}
-
-// Helper function to convert hex color to RGB
-function hexToRgb(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? {
-    r: parseInt(result[1], 16) / 255,
-    g: parseInt(result[2], 16) / 255,
-    b: parseInt(result[3], 16) / 255
-  } : { r: 0, g: 0, b: 0 };
-}
-
-// PDF Merge Operation
-async function pdfMerge(data) {
-  try {
-    const mergedPdf = await PDFDocument.create();
-
-    for (const filePath of data.inputFiles) {
-      const pdfBytes = fs.readFileSync(filePath);
-      const pdf = await PDFDocument.load(pdfBytes);
-      const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
-      copiedPages.forEach(page => mergedPdf.addPage(page));
-    }
-
-    const pdfBytes = await mergedPdf.save();
-    fs.writeFileSync(data.outputPath, pdfBytes);
-
-    return { success: true, message: `Successfully merged ${data.inputFiles.length} PDFs` };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-}
-
-// PDF Split Operation
-async function pdfSplit(data) {
-  try {
-    const pdfBytes = fs.readFileSync(data.inputPath);
-    const pdf = await PDFDocument.load(pdfBytes);
-    const totalPages = pdf.getPageCount();
-
-    let splits = [];
-
-    if (data.splitMode === 'pages') {
-      // Split by page ranges
-      const ranges = data.pageRanges.split(',').map(r => r.trim());
-      for (let i = 0; i < ranges.length; i++) {
-        const range = ranges[i];
-        let pages = [];
-
-        if (range.includes('-')) {
-          const [start, end] = range.split('-').map(n => parseInt(n.trim()));
-          for (let p = start; p <= end && p <= totalPages; p++) {
-            pages.push(p - 1);
-          }
-        } else {
-          const page = parseInt(range);
-          if (page > 0 && page <= totalPages) {
-            pages.push(page - 1);
-          }
-        }
-
-        if (pages.length > 0) {
-          splits.push({ pages, name: `part_${i + 1}` });
-        }
-      }
-    } else if (data.splitMode === 'interval') {
-      // Split every N pages
-      const interval = data.interval;
-      for (let i = 0; i < totalPages; i += interval) {
-        const pages = [];
-        for (let j = i; j < i + interval && j < totalPages; j++) {
-          pages.push(j);
-        }
-        splits.push({ pages, name: `part_${Math.floor(i / interval) + 1}` });
-      }
-    } else if (data.splitMode === 'size') {
-      // Split by size (approximate - we'll split evenly)
-      // This is complex, so we'll do a simple even split for now
-      const maxSize = data.maxSize * 1024 * 1024; // Convert MB to bytes
-      // For simplicity, split into fixed page chunks
-      const chunkSize = Math.max(1, Math.floor(totalPages / 5)); // Split into ~5 parts
-      for (let i = 0; i < totalPages; i += chunkSize) {
-        const pages = [];
-        for (let j = i; j < i + chunkSize && j < totalPages; j++) {
-          pages.push(j);
-        }
-        splits.push({ pages, name: `part_${Math.floor(i / chunkSize) + 1}` });
-      }
-    }
-
-    // Create split PDFs
-    const baseName = path.basename(data.inputPath, '.pdf');
-    for (const split of splits) {
-      const newPdf = await PDFDocument.create();
-      const copiedPages = await newPdf.copyPages(pdf, split.pages);
-      copiedPages.forEach(page => newPdf.addPage(page));
-
-      const outputPath = path.join(data.outputFolder, `${baseName}_${split.name}.pdf`);
-      const newPdfBytes = await newPdf.save();
-      fs.writeFileSync(outputPath, newPdfBytes);
-    }
-
-    return { success: true, message: `Successfully split PDF into ${splits.length} files` };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-}
-
-// PDF Compress Operation
-async function pdfCompress(data) {
-  try {
-    const pdfBytes = fs.readFileSync(data.inputPath);
-    const pdf = await PDFDocument.load(pdfBytes);
-
-    // pdf-lib doesn't have built-in compression, but we can save with default compression
-    // For actual compression, we would need additional libraries like Ghostscript
-    // For now, we'll save with standard options which provides some compression
-    const compressedPdfBytes = await pdf.save({
-      useObjectStreams: true,
-      addDefaultPage: false,
-      objectsPerTick: 50
-    });
-
-    fs.writeFileSync(data.outputPath, compressedPdfBytes);
-
-    const originalSize = fs.statSync(data.inputPath).size;
-    const compressedSize = fs.statSync(data.outputPath).size;
-    const savings = ((originalSize - compressedSize) / originalSize * 100).toFixed(1);
-
-    return {
-      success: true,
-      message: `PDF compressed. Size reduced by ${savings}% (${(originalSize / 1024).toFixed(1)}KB → ${(compressedSize / 1024).toFixed(1)}KB)`
-    };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-}
-
-// PDF Rotate Pages Operation
-async function pdfRotate(data) {
-  try {
-    const pdfBytes = fs.readFileSync(data.inputPath);
-    const pdf = await PDFDocument.load(pdfBytes);
-    const totalPages = pdf.getPageCount();
-
-    let pagesToRotate = [];
-    if (data.pages && data.pages.trim()) {
-      pagesToRotate = parsePageRanges(data.pages, totalPages);
-    } else {
-      // Rotate all pages
-      pagesToRotate = Array.from({ length: totalPages }, (_, i) => i);
-    }
-
-    pagesToRotate.forEach(pageIndex => {
-      const page = pdf.getPage(pageIndex);
-      page.setRotation(degrees(data.angle));
-    });
-
-    const rotatedPdfBytes = await pdf.save();
-    fs.writeFileSync(data.outputPath, rotatedPdfBytes);
-
-    return {
-      success: true,
-      message: `Successfully rotated ${pagesToRotate.length} page(s) by ${data.angle}°`
-    };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-}
-
-// PDF Delete Pages Operation
-async function pdfDeletePages(data) {
-  try {
-    const pdfBytes = fs.readFileSync(data.inputPath);
-    const pdf = await PDFDocument.load(pdfBytes);
-    const totalPages = pdf.getPageCount();
-
-    const pagesToDelete = parsePageRanges(data.pages, totalPages);
-
-    // Remove pages in reverse order to maintain indices
-    pagesToDelete.sort((a, b) => b - a).forEach(pageIndex => {
-      pdf.removePage(pageIndex);
-    });
-
-    const newPdfBytes = await pdf.save();
-    fs.writeFileSync(data.outputPath, newPdfBytes);
-
-    return {
-      success: true,
-      message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`
-    };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-}
-
-// PDF Reorder Pages Operation
-async function pdfReorder(data) {
-  try {
-    const pdfBytes = fs.readFileSync(data.inputPath);
-    const pdf = await PDFDocument.load(pdfBytes);
-    const totalPages = pdf.getPageCount();
-
-    // Parse new page order
-    const newOrder = data.newOrder.split(',').map(n => parseInt(n.trim()) - 1); // Convert to 0-indexed
-
-    // Validate new order
-    if (newOrder.length !== totalPages) {
-      return { success: false, error: `New order must include all ${totalPages} pages` };
-    }
-
-    const newPdf = await PDFDocument.create();
-    const copiedPages = await newPdf.copyPages(pdf, newOrder);
-    copiedPages.forEach(page => newPdf.addPage(page));
-
-    const reorderedPdfBytes = await newPdf.save();
-    fs.writeFileSync(data.outputPath, reorderedPdfBytes);
-
-    return { success: true, message: 'Successfully reordered PDF pages' };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-}
-
-// PDF Watermark Operation
-async function pdfWatermark(data) {
-  try {
-    const pdfBytes = fs.readFileSync(data.inputPath);
-    const pdf = await PDFDocument.load(pdfBytes);
-    const totalPages = pdf.getPageCount();
-
-    // Determine which pages to watermark
-    let pagesToWatermark = [];
-    if (data.pages === 'all') {
-      pagesToWatermark = Array.from({ length: totalPages }, (_, i) => i);
-    } else if (data.pages === 'custom' && data.customPages) {
-      pagesToWatermark = parsePageRanges(data.customPages, totalPages);
-    }
-
-    const font = await pdf.embedFont(StandardFonts.Helvetica);
-    const color = hexToRgb(data.color);
-
-    for (const pageIndex of pagesToWatermark) {
-      const page = pdf.getPage(pageIndex);
-      const { width, height } = page.getSize();
-
-      let x, y, rotation = 0;
-
-      // Calculate position based on selected position
-      switch (data.position) {
-        case 'center':
-          x = width / 2;
-          y = height / 2;
-          break;
-        case 'diagonal':
-          x = width / 2;
-          y = height / 2;
-          rotation = 45;
-          break;
-        case 'top-left':
-          x = 50;
-          y = height - 50;
-          break;
-        case 'top-center':
-          x = width / 2;
-          y = height - 50;
-          break;
-        case 'top-right':
-          x = width - 50;
-          y = height - 50;
-          break;
-        case 'bottom-left':
-          x = 50;
-          y = 50;
-          break;
-        case 'bottom-center':
-          x = width / 2;
-          y = 50;
-          break;
-        case 'bottom-right':
-          x = width - 50;
-          y = 50;
-          break;
-        default:
-          x = width / 2;
-          y = height / 2;
-      }
-
-      page.drawText(data.text, {
-        x,
-        y,
-        size: data.fontSize,
-        font,
-        color: rgb(color.r, color.g, color.b),
-        opacity: data.opacity,
-        rotate: degrees(rotation)
-      });
-    }
-
-    const watermarkedPdfBytes = await pdf.save();
-    fs.writeFileSync(data.outputPath, watermarkedPdfBytes);
-
-    return {
-      success: true,
-      message: `Successfully added watermark to ${pagesToWatermark.length} page(s)`
-    };
-  } catch (error) {
-    return { success: false, error: error.message };
-  }
-}
-
-// PDF Encrypt (Password Protection) Operation
-async function pdfEncrypt(data) {
-  try {
-    const pdfBytes = fs.readFileSync(data.inputPath);
-    const pdf = await PDFDocument.load(pdfBytes);
-
-    // pdf-lib has limited encryption support in v1.17.1
-    // We'll save with password (basic encryption)
-    const encryptedPdfBytes = await pdf.save({
-      userPassword: data.userPassword,
-      ownerPassword: data.ownerPassword || data.userPassword,
-      permissions: {
-        printing: data.permissions.printing ? 'highResolution' : 'lowResolution',
-        modifying: data.permissions.modifying,
-        copying: data.permissions.copying,
-        annotating: data.permissions.annotating,
-        fillingForms: data.permissions.fillingForms,
-        contentAccessibility: data.permissions.contentAccessibility,
-        documentAssembly: data.permissions.documentAssembly
-      }
-    });
-
-    fs.writeFileSync(data.outputPath, encryptedPdfBytes);
-
-    return { success: true, message: 'Successfully added password protection to PDF' };
-  } catch (error) {
-    // If pdf-lib doesn't support encryption in this version, provide a helpful error
-    if (error.message.includes('encrypt') || error.message.includes('password')) {
-      return {
-        success: false,
-        error: 'PDF encryption requires pdf-lib with encryption support. This feature may not be available in the current version.'
-      };
-    }
-    return { success: false, error: error.message };
-  }
-}
-
-// PDF Decrypt (Remove Password) Operation
-async function pdfDecrypt(data) {
-  try {
-    const pdfBytes = fs.readFileSync(data.inputPath);
-    const pdf = await PDFDocument.load(pdfBytes, { password: data.password });
-
-    // Save without password
-    const decryptedPdfBytes = await pdf.save();
-    fs.writeFileSync(data.outputPath, decryptedPdfBytes);
-
-    return { success: true, message: 'Successfully removed password protection from PDF' };
-  } catch (error) {
-    if (error.message.includes('password') || error.message.includes('encrypted')) {
-      return { success: false, error: 'Incorrect password or PDF is not encrypted' };
-    }
-    return { success: false, error: error.message };
-  }
-}
-
-// PDF Permissions Operation
-async function pdfSetPermissions(data) {
-  try {
-    const pdfBytes = fs.readFileSync(data.inputPath);
-    const loadOptions = data.currentPassword ? { password: data.currentPassword } : {};
-    const pdf = await PDFDocument.load(pdfBytes, loadOptions);
-
-    const newPdfBytes = await pdf.save({
-      ownerPassword: data.ownerPassword,
-      permissions: {
-        printing: data.permissions.printing ? 'highResolution' : 'lowResolution',
-        modifying: data.permissions.modifying,
-        copying: data.permissions.copying,
-        annotating: data.permissions.annotating,
-        fillingForms: data.permissions.fillingForms,
-        contentAccessibility: data.permissions.contentAccessibility,
-        documentAssembly: data.permissions.documentAssembly
-      }
-    });
-
-    fs.writeFileSync(data.outputPath, newPdfBytes);
-
-    return { success: true, message: 'Successfully updated PDF permissions' };
-  } catch (error) {
-    if (error.message.includes('encrypt') || error.message.includes('permission')) {
-      return {
-        success: false,
-        error: 'PDF permissions require pdf-lib with encryption support. This feature may not be available in the current version.'
-      };
-    }
-    return { success: false, error: error.message };
-  }
-}
-
-// IPC Handler for PDF Operations
 ipcMain.on('process-pdf-operation', async (event, data) => {
   try {
     mainWindow.webContents.send('pdf-operation-progress', {
@@ -4153,43 +3884,7 @@ ipcMain.on('process-pdf-operation', async (event, data) => {
       progress: 10
     });
 
-    let result;
-
-    switch (data.operation) {
-      case 'merge':
-        result = await pdfMerge(data);
-        break;
-      case 'split':
-        result = await pdfSplit(data);
-        break;
-      case 'compress':
-        result = await pdfCompress(data);
-        break;
-      case 'rotate':
-        result = await pdfRotate(data);
-        break;
-      case 'delete':
-        result = await pdfDeletePages(data);
-        break;
-      case 'reorder':
-        result = await pdfReorder(data);
-        break;
-      case 'watermark':
-        result = await pdfWatermark(data);
-        break;
-      case 'encrypt':
-        result = await pdfEncrypt(data);
-        break;
-      case 'decrypt':
-        result = await pdfDecrypt(data);
-        break;
-      case 'permissions':
-        result = await pdfSetPermissions(data);
-        break;
-      default:
-        result = { success: false, error: `Unknown operation: ${data.operation}` };
-    }
-
+    const result = await PDFOperations.executeOperation(data.operation, data);
     mainWindow.webContents.send('pdf-operation-complete', result);
   } catch (error) {
     mainWindow.webContents.send('pdf-operation-complete', {
@@ -4199,12 +3894,9 @@ ipcMain.on('process-pdf-operation', async (event, data) => {
   }
 });
 
-// IPC Handler for getting PDF page count
 ipcMain.on('get-pdf-page-count', async (event, filePath) => {
   try {
-    const pdfBytes = fs.readFileSync(filePath);
-    const pdf = await PDFDocument.load(pdfBytes);
-    const count = pdf.getPageCount();
+    const count = await PDFOperations.getPageCount(filePath);
     event.reply('pdf-page-count', { count });
   } catch (error) {
     event.reply('pdf-page-count', { error: error.message });
@@ -4388,6 +4080,25 @@ ipcMain.handle('list-directory', async (event, dirPath) => {
   }
 });
 
+ipcMain.handle('select-custom-css', async (event) => {
+  const result = dialog.showOpenDialogSync(mainWindow, {
+    title: 'Select Custom Preview CSS',
+    properties: ['openFile'],
+    filters: [
+      { name: 'CSS Stylesheets', extensions: ['css'] }
+    ]
+  });
+
+  if (result && result[0]) {
+    const filePath = result[0];
+    const content = fs.readFileSync(filePath, 'utf-8');
+    return { path: filePath, content };
+  }
+  return null;
+});
+
+
+
 ipcMain.handle('read-file', async (event, filePath) => {
   const validation = validatePath(filePath);
   if (!validation.valid || !isPathAccessible(validation.resolved)) {
@@ -4512,49 +4223,24 @@ ipcMain.on('open-file-path', (event, filePath) => {
 // ============================================
 // Git IPC Handlers
 // ============================================
-const simpleGit = require('simple-git');
-
-function getGitRepo() {
-  // Use the directory of the current file, or the app's working directory
-  const dir = currentFile ? path.dirname(currentFile) : process.cwd();
-  return simpleGit(dir);
-}
-
 ipcMain.handle('git-status', async () => {
-  try {
-    const git = getGitRepo();
-    return await git.status();
-  } catch (err) {
-    return { error: 'Not a git repository' };
-  }
+  const dir = currentFile ? path.dirname(currentFile) : process.cwd();
+  return GitOperations.getStatus(dir);
 });
 
 ipcMain.handle('git-stage', async (event, { files }) => {
-  try {
-    const git = getGitRepo();
-    await git.add(files);
-    return await git.status();
-  } catch (err) {
-    return { error: err.message };
-  }
+  const dir = currentFile ? path.dirname(currentFile) : process.cwd();
+  return GitOperations.stage(dir, files);
 });
 
 ipcMain.handle('git-commit', async (event, { message }) => {
-  try {
-    const git = getGitRepo();
-    return await git.commit(message);
-  } catch (err) {
-    return { error: err.message };
-  }
+  const dir = currentFile ? path.dirname(currentFile) : process.cwd();
+  return GitOperations.commit(dir, message);
 });
 
 ipcMain.handle('git-log', async () => {
-  try {
-    const git = getGitRepo();
-    return await git.log({ maxCount: 20 });
-  } catch (err) {
-    return { error: err.message };
-  }
+  const dir = currentFile ? path.dirname(currentFile) : process.cwd();
+  return GitOperations.log(dir);
 });
 
 // ============================================

src/main/GitOperations.js

@@ -0,0 +1,44 @@
+const simpleGit = require('simple-git');
+
+function getGitInstance(dir) {
+  return simpleGit(dir);
+}
+
+async function getStatus(dir) {
+  try {
+    const git = getGitInstance(dir);
+    return await git.status();
+  } catch (err) {
+    return { error: 'Not a git repository' };
+  }
+}
+
+async function stage(dir, files) {
+  try {
+    const git = getGitInstance(dir);
+    await git.add(files);
+    return await git.status();
+  } catch (err) {
+    return { error: err.message };
+  }
+}
+
+async function commit(dir, message) {
+  try {
+    const git = getGitInstance(dir);
+    return await git.commit(message);
+  } catch (err) {
+    return { error: err.message };
+  }
+}
+
+async function log(dir, maxCount = 20) {
+  try {
+    const git = getGitInstance(dir);
+    return await git.log({ maxCount });
+  } catch (err) {
+    return { error: err.message };
+  }
+}
+
+module.exports = { getStatus, stage, commit, log };

src/main/PDFOperations.js

@@ -0,0 +1,433 @@
+const fs = require('fs');
+const path = require('path');
+const { PDFDocument, rgb, degrees, StandardFonts } = require('pdf-lib');
+
+function parsePageRanges(rangeString, totalPages) {
+  const pages = [];
+  const ranges = rangeString.split(',').map(r => r.trim());
+
+  for (const range of ranges) {
+    if (range.includes('-')) {
+      const [start, end] = range.split('-').map(n => parseInt(n.trim()));
+      for (let i = start; i <= end && i <= totalPages; i++) {
+        if (i > 0 && !pages.includes(i - 1)) {
+          pages.push(i - 1);
+        }
+      }
+    } else {
+      const page = parseInt(range);
+      if (page > 0 && page <= totalPages && !pages.includes(page - 1)) {
+        pages.push(page - 1);
+      }
+    }
+  }
+
+  return pages.sort((a, b) => a - b);
+}
+
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16) / 255,
+    g: parseInt(result[2], 16) / 255,
+    b: parseInt(result[3], 16) / 255
+  } : { r: 0, g: 0, b: 0 };
+}
+
+async function pdfMerge(data) {
+  try {
+    const mergedPdf = await PDFDocument.create();
+
+    for (const filePath of data.inputFiles) {
+      const pdfBytes = fs.readFileSync(filePath);
+      const pdf = await PDFDocument.load(pdfBytes);
+      const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
+      copiedPages.forEach(page => mergedPdf.addPage(page));
+    }
+
+    const pdfBytes = await mergedPdf.save();
+    fs.writeFileSync(data.outputPath, pdfBytes);
+
+    return { success: true, message: `Successfully merged ${data.inputFiles.length} PDFs` };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function pdfSplit(data) {
+  try {
+    const pdfBytes = fs.readFileSync(data.inputPath);
+    const pdf = await PDFDocument.load(pdfBytes);
+    const totalPages = pdf.getPageCount();
+
+    const splits = [];
+
+    if (data.splitMode === 'pages') {
+      const ranges = data.pageRanges.split(',').map(r => r.trim());
+      for (let i = 0; i < ranges.length; i++) {
+        const range = ranges[i];
+        const pages = [];
+
+        if (range.includes('-')) {
+          const [start, end] = range.split('-').map(n => parseInt(n.trim()));
+          for (let p = start; p <= end && p <= totalPages; p++) {
+            pages.push(p - 1);
+          }
+        } else {
+          const page = parseInt(range);
+          if (page > 0 && page <= totalPages) {
+            pages.push(page - 1);
+          }
+        }
+
+        if (pages.length > 0) {
+          splits.push({ pages, name: `part_${i + 1}` });
+        }
+      }
+    } else if (data.splitMode === 'interval') {
+      const interval = data.interval;
+      for (let i = 0; i < totalPages; i += interval) {
+        const pages = [];
+        for (let j = i; j < i + interval && j < totalPages; j++) {
+          pages.push(j);
+        }
+        splits.push({ pages, name: `part_${Math.floor(i / interval) + 1}` });
+      }
+    } else if (data.splitMode === 'size') {
+      const chunkSize = Math.max(1, Math.floor(totalPages / 5));
+      for (let i = 0; i < totalPages; i += chunkSize) {
+        const pages = [];
+        for (let j = i; j < i + chunkSize && j < totalPages; j++) {
+          pages.push(j);
+        }
+        splits.push({ pages, name: `part_${Math.floor(i / chunkSize) + 1}` });
+      }
+    }
+
+    const baseName = path.basename(data.inputPath, '.pdf');
+    for (const split of splits) {
+      const newPdf = await PDFDocument.create();
+      const copiedPages = await newPdf.copyPages(pdf, split.pages);
+      copiedPages.forEach(page => newPdf.addPage(page));
+
+      const outputPath = path.join(data.outputFolder, `${baseName}_${split.name}.pdf`);
+      const newPdfBytes = await newPdf.save();
+      fs.writeFileSync(outputPath, newPdfBytes);
+    }
+
+    return { success: true, message: `Successfully split PDF into ${splits.length} files` };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function pdfCompress(data) {
+  try {
+    const pdfBytes = fs.readFileSync(data.inputPath);
+    const pdf = await PDFDocument.load(pdfBytes);
+
+    const compressedPdfBytes = await pdf.save({
+      useObjectStreams: true,
+      addDefaultPage: false,
+      objectsPerTick: 50
+    });
+
+    fs.writeFileSync(data.outputPath, compressedPdfBytes);
+
+    const originalSize = fs.statSync(data.inputPath).size;
+    const compressedSize = fs.statSync(data.outputPath).size;
+    const savings = ((originalSize - compressedSize) / originalSize * 100).toFixed(1);
+
+    return {
+      success: true,
+      message: `PDF compressed. Size reduced by ${savings}% (${(originalSize / 1024).toFixed(1)}KB → ${(compressedSize / 1024).toFixed(1)}KB)`
+    };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function pdfRotate(data) {
+  try {
+    const pdfBytes = fs.readFileSync(data.inputPath);
+    const pdf = await PDFDocument.load(pdfBytes);
+    const totalPages = pdf.getPageCount();
+
+    let pagesToRotate = [];
+    if (data.pages && data.pages.trim()) {
+      pagesToRotate = parsePageRanges(data.pages, totalPages);
+    } else {
+      pagesToRotate = Array.from({ length: totalPages }, (_, i) => i);
+    }
+
+    pagesToRotate.forEach(pageIndex => {
+      const page = pdf.getPage(pageIndex);
+      page.setRotation(degrees(data.angle));
+    });
+
+    const rotatedPdfBytes = await pdf.save();
+    fs.writeFileSync(data.outputPath, rotatedPdfBytes);
+
+    return {
+      success: true,
+      message: `Successfully rotated ${pagesToRotate.length} page(s) by ${data.angle}\u00B0`
+    };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function pdfDeletePages(data) {
+  try {
+    const pdfBytes = fs.readFileSync(data.inputPath);
+    const pdf = await PDFDocument.load(pdfBytes);
+    const totalPages = pdf.getPageCount();
+
+    const pagesToDelete = parsePageRanges(data.pages, totalPages);
+
+    pagesToDelete.sort((a, b) => b - a).forEach(pageIndex => {
+      pdf.removePage(pageIndex);
+    });
+
+    const newPdfBytes = await pdf.save();
+    fs.writeFileSync(data.outputPath, newPdfBytes);
+
+    return {
+      success: true,
+      message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`
+    };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function pdfReorder(data) {
+  try {
+    const pdfBytes = fs.readFileSync(data.inputPath);
+    const pdf = await PDFDocument.load(pdfBytes);
+    const totalPages = pdf.getPageCount();
+
+    const newOrder = data.newOrder.split(',').map(n => parseInt(n.trim()) - 1);
+
+    if (newOrder.length !== totalPages) {
+      return { success: false, error: `New order must include all ${totalPages} pages` };
+    }
+
+    const newPdf = await PDFDocument.create();
+    const copiedPages = await newPdf.copyPages(pdf, newOrder);
+    copiedPages.forEach(page => newPdf.addPage(page));
+
+    const reorderedPdfBytes = await newPdf.save();
+    fs.writeFileSync(data.outputPath, reorderedPdfBytes);
+
+    return { success: true, message: 'Successfully reordered PDF pages' };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function pdfWatermark(data) {
+  try {
+    const pdfBytes = fs.readFileSync(data.inputPath);
+    const pdf = await PDFDocument.load(pdfBytes);
+    const totalPages = pdf.getPageCount();
+
+    let pagesToWatermark = [];
+    if (data.pages === 'all') {
+      pagesToWatermark = Array.from({ length: totalPages }, (_, i) => i);
+    } else if (data.pages === 'custom' && data.customPages) {
+      pagesToWatermark = parsePageRanges(data.customPages, totalPages);
+    }
+
+    const font = await pdf.embedFont(StandardFonts.Helvetica);
+    const color = hexToRgb(data.color);
+
+    for (const pageIndex of pagesToWatermark) {
+      const page = pdf.getPage(pageIndex);
+      const { width, height } = page.getSize();
+
+      let x, y, rotation = 0;
+
+      switch (data.position) {
+        case 'center':
+          x = width / 2;
+          y = height / 2;
+          break;
+        case 'diagonal':
+          x = width / 2;
+          y = height / 2;
+          rotation = 45;
+          break;
+        case 'top-left':
+          x = 50;
+          y = height - 50;
+          break;
+        case 'top-center':
+          x = width / 2;
+          y = height - 50;
+          break;
+        case 'top-right':
+          x = width - 50;
+          y = height - 50;
+          break;
+        case 'bottom-left':
+          x = 50;
+          y = 50;
+          break;
+        case 'bottom-center':
+          x = width / 2;
+          y = 50;
+          break;
+        case 'bottom-right':
+          x = width - 50;
+          y = 50;
+          break;
+        default:
+          x = width / 2;
+          y = height / 2;
+      }
+
+      page.drawText(data.text, {
+        x,
+        y,
+        size: data.fontSize,
+        font,
+        color: rgb(color.r, color.g, color.b),
+        opacity: data.opacity,
+        rotate: degrees(rotation)
+      });
+    }
+
+    const watermarkedPdfBytes = await pdf.save();
+    fs.writeFileSync(data.outputPath, watermarkedPdfBytes);
+
+    return {
+      success: true,
+      message: `Successfully added watermark to ${pagesToWatermark.length} page(s)`
+    };
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}
+
+async function pdfEncrypt(data) {
+  try {
+    const pdfBytes = fs.readFileSync(data.inputPath);
+    const pdf = await PDFDocument.load(pdfBytes);
+
+    const encryptedPdfBytes = await pdf.save({
+      userPassword: data.userPassword,
+      ownerPassword: data.ownerPassword || data.userPassword,
+      permissions: {
+        printing: data.permissions.printing ? 'highResolution' : 'lowResolution',
+        modifying: data.permissions.modifying,
+        copying: data.permissions.copying,
+        annotating: data.permissions.annotating,
+        fillingForms: data.permissions.fillingForms,
+        contentAccessibility: data.permissions.contentAccessibility,
+        documentAssembly: data.permissions.documentAssembly
+      }
+    });
+
+    fs.writeFileSync(data.outputPath, encryptedPdfBytes);
+
+    return { success: true, message: 'Successfully added password protection to PDF' };
+  } catch (error) {
+    if (error.message.includes('encrypt') || error.message.includes('password')) {
+      return {
+        success: false,
+        error: 'PDF encryption requires pdf-lib with encryption support. This feature may not be available in the current version.'
+      };
+    }
+    return { success: false, error: error.message };
+  }
+}
+
+async function pdfDecrypt(data) {
+  try {
+    const pdfBytes = fs.readFileSync(data.inputPath);
+    const pdf = await PDFDocument.load(pdfBytes, { password: data.password });
+
+    const decryptedPdfBytes = await pdf.save();
+    fs.writeFileSync(data.outputPath, decryptedPdfBytes);
+
+    return { success: true, message: 'Successfully removed password protection from PDF' };
+  } catch (error) {
+    if (error.message.includes('password') || error.message.includes('encrypted')) {
+      return { success: false, error: 'Incorrect password or PDF is not encrypted' };
+    }
+    return { success: false, error: error.message };
+  }
+}
+
+async function pdfSetPermissions(data) {
+  try {
+    const pdfBytes = fs.readFileSync(data.inputPath);
+    const loadOptions = data.currentPassword ? { password: data.currentPassword } : {};
+    const pdf = await PDFDocument.load(pdfBytes, loadOptions);
+
+    const newPdfBytes = await pdf.save({
+      ownerPassword: data.ownerPassword,
+      permissions: {
+        printing: data.permissions.printing ? 'highResolution' : 'lowResolution',
+        modifying: data.permissions.modifying,
+        copying: data.permissions.copying,
+        annotating: data.permissions.annotating,
+        fillingForms: data.permissions.fillingForms,
+        contentAccessibility: data.permissions.contentAccessibility,
+        documentAssembly: data.permissions.documentAssembly
+      }
+    });
+
+    fs.writeFileSync(data.outputPath, newPdfBytes);
+
+    return { success: true, message: 'Successfully updated PDF permissions' };
+  } catch (error) {
+    if (error.message.includes('encrypt') || error.message.includes('permission')) {
+      return {
+        success: false,
+        error: 'PDF permissions require pdf-lib with encryption support. This feature may not be available in the current version.'
+      };
+    }
+    return { success: false, error: error.message };
+  }
+}
+
+function executeOperation(operation, data) {
+  switch (operation) {
+    case 'merge': return pdfMerge(data);
+    case 'split': return pdfSplit(data);
+    case 'compress': return pdfCompress(data);
+    case 'rotate': return pdfRotate(data);
+    case 'delete': return pdfDeletePages(data);
+    case 'reorder': return pdfReorder(data);
+    case 'watermark': return pdfWatermark(data);
+    case 'encrypt': return pdfEncrypt(data);
+    case 'decrypt': return pdfDecrypt(data);
+    case 'permissions': return pdfSetPermissions(data);
+    default: return Promise.resolve({ success: false, error: `Unknown operation: ${operation}` });
+  }
+}
+
+async function getPageCount(filePath) {
+  const pdfBytes = fs.readFileSync(filePath);
+  const pdf = await PDFDocument.load(pdfBytes);
+  return pdf.getPageCount();
+}
+
+module.exports = {
+  parsePageRanges,
+  hexToRgb,
+  pdfMerge,
+  pdfSplit,
+  pdfCompress,
+  pdfRotate,
+  pdfDeletePages,
+  pdfReorder,
+  pdfWatermark,
+  pdfEncrypt,
+  pdfDecrypt,
+  pdfSetPermissions,
+  executeOperation,
+  getPageCount
+};

src/plugins/built-in/_sample/index.js

@@ -0,0 +1,12 @@
+const { PluginAPI } = require('../../plugin-api');
+
+class SamplePlugin extends PluginAPI {
+  init(context) {
+    this.context = context;
+    context.commands.register('hello', 'Sample: Hello World', () => {
+      console.log('[SamplePlugin] Hello from the plugin system!');
+    });
+  }
+}
+
+module.exports = { Plugin: SamplePlugin };

src/plugins/built-in/_sample/manifest.json

@@ -0,0 +1,13 @@
+{
+  "id": "_sample",
+  "name": "Sample Plugin",
+  "version": "1.0.0",
+  "description": "Demonstrates the plugin system. Safe to delete.",
+  "icon": "puzzle",
+  "extensionPoints": {
+    "commands": [
+      { "id": "hello", "label": "Sample: Hello World", "shortcut": "" }
+    ]
+  },
+  "settings": []
+}

src/plugins/built-in/writing-studio/goal-tracker.js

@@ -0,0 +1,87 @@
+const HISTORY_KEY = 'plugins.writing-studio.history';
+
+class GoalTracker {
+  /**
+   * @param {object} store - { get(key), set(key, value) } settings backend
+   */
+  constructor(store) {
+    this.store = store;
+  }
+
+  _getHistory() {
+    const raw = this.store.get(HISTORY_KEY);
+    return raw ? JSON.parse(raw) : {};
+  }
+
+  _setHistory(history) {
+    this.store.set(HISTORY_KEY, JSON.stringify(history));
+  }
+
+  _setHistoryDay(dateStr, data) {
+    const history = this._getHistory();
+    history[dateStr] = data;
+    this._setHistory(history);
+  }
+
+  addWords(count) {
+    const today = new Date().toISOString().split('T')[0];
+    const history = this._getHistory();
+    if (!history[today]) {
+      history[today] = { words: 0, sessions: 0 };
+    }
+    history[today].words += count;
+    history[today].sessions += 1;
+    this._setHistory(history);
+  }
+
+  getDailyProgress(goal) {
+    const today = new Date().toISOString().split('T')[0];
+    const history = this._getHistory();
+    const written = history[today]?.words || 0;
+    return { written, goal, pct: goal > 0 ? Math.min(100, Math.round((written / goal) * 100)) : 0 };
+  }
+
+  getStreak(goal) {
+    const history = this._getHistory();
+    let streak = 0;
+    const d = new Date();
+    for (let i = 0; i < 365; i++) {
+      const key = d.toISOString().split('T')[0];
+      const day = history[key];
+      if (day && day.words >= goal) {
+        streak++;
+        d.setDate(d.getDate() - 1);
+      } else {
+        break;
+      }
+    }
+    return streak;
+  }
+
+  getLast30Days() {
+    const history = this._getHistory();
+    const days = [];
+    const d = new Date();
+    for (let i = 0; i < 30; i++) {
+      const key = d.toISOString().split('T')[0];
+      const day = history[key];
+      days.push({ date: key, words: day?.words || 0 });
+      d.setDate(d.getDate() - 1);
+    }
+    return days.reverse();
+  }
+
+  getWeeklyTotal() {
+    const history = this._getHistory();
+    let total = 0;
+    const d = new Date();
+    for (let i = 0; i < 7; i++) {
+      const key = d.toISOString().split('T')[0];
+      if (history[key]) total += history[key].words || 0;
+      d.setDate(d.getDate() - 1);
+    }
+    return total;
+  }
+}
+
+module.exports = { GoalTracker };

src/plugins/built-in/writing-studio/index.js

@@ -0,0 +1,102 @@
+const { PluginAPI } = require('../../../plugins/plugin-api');
+const { SprintEngine } = require('./sprint-engine');
+const { GoalTracker } = require('./goal-tracker');
+const { SnapshotManager } = require('./snapshot-manager');
+const { ProjectManager } = require('./project-manager');
+
+class WritingStudioPlugin extends PluginAPI {
+  init(context) {
+    this.context = context;
+
+    this.sprintEngine = new SprintEngine({
+      onEvent: (name, data) => context.events.emit(name, data)
+    });
+    this.goalTracker = new GoalTracker(context.settings);
+    this.snapshotManager = new SnapshotManager(context.settings);
+    this.projectManager = new ProjectManager({
+      readFile: (p) => context.ipc.invoke('read-file', p),
+      writeFile: (p, c) => context.ipc.invoke('write-file', p, c),
+      fileExists: (p) => context.ipc.invoke('path-exists', p),
+      listDir: (p) => context.ipc.invoke('list-directory', p)
+    });
+
+    this._engines = {
+      sprint: this.sprintEngine,
+      goals: this.goalTracker,
+      snapshots: this.snapshotManager,
+      projects: this.projectManager
+    };
+
+    this._registerCommands(context);
+    this._registerStatusBar(context);
+  }
+
+  _registerCommands(context) {
+    const { sprintEngine, snapshotManager, goalTracker } = this;
+
+    context.commands.register('start-sprint', 'Studio: Start Sprint', () => {
+      const duration = context.settings.get('sprintDuration') || 25;
+      const content = context.editor.getContent() || '';
+      const words = content.split(/\s+/).filter(Boolean).length;
+      sprintEngine.start(duration, words);
+    }, 'Ctrl+Alt+S');
+
+    context.commands.register('stop-sprint', 'Studio: Stop Sprint', () => {
+      if (!sprintEngine.isActive()) return;
+      const content = context.editor.getContent() || '';
+      const words = content.split(/\s+/).filter(Boolean).length;
+      const result = sprintEngine.stop(words);
+      goalTracker.addWords(result.wordDelta);
+      context.events.emit('sprint:stopped', result);
+    }, 'Ctrl+Alt+Shift+S');
+
+    context.commands.register('take-snapshot', 'Studio: Take Snapshot', () => {
+      const content = context.editor.getContent() || '';
+      snapshotManager.create(content, 'manual');
+      context.events.emit('snapshot:created', {});
+    }, 'Ctrl+Alt+N');
+
+    context.commands.register('restore-last-snapshot', 'Studio: Restore Last Snapshot', () => {
+      const snaps = snapshotManager.list();
+      if (snaps.length === 0) return;
+      const content = snapshotManager.restore(snaps[0].id);
+      context.editor.insertAtCursor(content);
+    }, 'Ctrl+Alt+Z');
+
+    context.commands.register('new-project', 'Studio: New Project', () => {
+      context.events.emit('studio:new-project', {});
+    });
+
+    context.commands.register('compile-manuscript', 'Studio: Compile Manuscript', () => {
+      context.events.emit('studio:compile', {});
+    }, 'Ctrl+Alt+E');
+
+    context.commands.register('proofread-document', 'Studio: Proofread Document', () => {
+      if (context.events.hasHandler('ai:analyze')) {
+        const content = context.editor.getContent() || '';
+        context.events.emit('ai:analyze', { text: content, type: 'grammar' });
+      }
+    }, 'Ctrl+Alt+G');
+  }
+
+  _registerStatusBar(context) {
+    context.statusBar.registerIndicator('word-goal', {
+      text: '0/1000',
+      tooltip: 'Daily word goal progress'
+    });
+    context.statusBar.registerIndicator('sprint-timer', {
+      text: '',
+      tooltip: 'Writing sprint timer'
+    });
+  }
+
+  deactivate() {
+    if (this._sprintInterval) clearInterval(this._sprintInterval);
+  }
+
+  getEngines() {
+    return this._engines;
+  }
+}
+
+module.exports = { Plugin: WritingStudioPlugin };

src/plugins/built-in/writing-studio/manifest.json

@@ -0,0 +1,31 @@
+{
+  "id": "writing-studio",
+  "name": "Writing Studio",
+  "version": "1.0.0",
+  "description": "Manuscript management, writing sprints, goal tracking, snapshots, and smart proofreading",
+  "icon": "pen-tool",
+  "extensionPoints": {
+    "sidebar": [
+      { "id": "manuscript", "title": "Manuscript", "order": 30 },
+      { "id": "goals", "title": "Goals", "order": 31 },
+      { "id": "snapshots", "title": "Snapshots", "order": 32 },
+      { "id": "proofread", "title": "Proofread", "order": 33 }
+    ],
+    "commands": [
+      { "id": "start-sprint", "label": "Studio: Start Sprint", "shortcut": "Ctrl+Alt+S" },
+      { "id": "stop-sprint", "label": "Studio: Stop Sprint", "shortcut": "Ctrl+Alt+Shift+S" },
+      { "id": "take-snapshot", "label": "Studio: Take Snapshot", "shortcut": "Ctrl+Alt+N" },
+      { "id": "restore-last-snapshot", "label": "Studio: Restore Last Snapshot", "shortcut": "Ctrl+Alt+Z" },
+      { "id": "new-project", "label": "Studio: New Project", "shortcut": "" },
+      { "id": "compile-manuscript", "label": "Studio: Compile Manuscript", "shortcut": "Ctrl+Alt+E" },
+      { "id": "proofread-document", "label": "Studio: Proofread Document", "shortcut": "Ctrl+Alt+G" }
+    ],
+    "statusBar": { "indicators": ["sprint-timer", "word-goal"] }
+  },
+  "settings": [
+    { "key": "dailyGoal", "type": "number", "default": 1000, "label": "Daily word goal" },
+    { "key": "sprintDuration", "type": "number", "default": 25, "label": "Sprint duration (min)" },
+    { "key": "autoSnapshotInterval", "type": "number", "default": 0, "label": "Auto-snapshot interval (min, 0=off)" },
+    { "key": "maxSnapshots", "type": "number", "default": 50, "label": "Max snapshots to keep" }
+  ]
+}

src/plugins/built-in/writing-studio/panels/goals-panel.js

@@ -0,0 +1,99 @@
+function renderGoalsPanel(container, { engines, settings }) {
+  const dailyGoal = settings.get('dailyGoal') || 1000;
+  const progress = engines.goals.getDailyProgress(dailyGoal);
+  const streak = engines.goals.getStreak(dailyGoal);
+  const weekly = engines.goals.getWeeklyTotal();
+  const last30 = engines.goals.getLast30Days();
+
+  container.replaceChildren();
+
+  const panel = document.createElement('div');
+  panel.className = 'ws-panel';
+
+  // Daily progress section
+  const section1 = document.createElement('div');
+  section1.className = 'ws-section';
+  const heading1 = document.createElement('h3');
+  heading1.className = 'ws-heading';
+  heading1.textContent = 'Daily Progress';
+  section1.appendChild(heading1);
+
+  const bar = document.createElement('div');
+  bar.className = 'ws-progress-bar';
+  const fill = document.createElement('div');
+  fill.className = 'ws-progress-fill';
+  fill.style.width = progress.pct + '%';
+  bar.appendChild(fill);
+  section1.appendChild(bar);
+
+  const row = document.createElement('div');
+  row.className = 'ws-stat-row';
+  const label = document.createElement('span');
+  label.textContent = progress.written.toLocaleString() + ' / ' + dailyGoal.toLocaleString() + ' words';
+  const pct = document.createElement('span');
+  pct.className = 'ws-pct';
+  pct.textContent = progress.pct + '%';
+  row.appendChild(label);
+  row.appendChild(pct);
+  section1.appendChild(row);
+  panel.appendChild(section1);
+
+  // Stats cards
+  const section2 = document.createElement('div');
+  section2.className = 'ws-section';
+  const grid = document.createElement('div');
+  grid.className = 'ws-stat-grid';
+
+  const streakCard = document.createElement('div');
+  streakCard.className = 'ws-stat-card';
+  const streakVal = document.createElement('span');
+  streakVal.className = 'ws-stat-value';
+  streakVal.textContent = String(streak);
+  const streakLbl = document.createElement('span');
+  streakLbl.className = 'ws-stat-label';
+  streakLbl.textContent = 'Day Streak';
+  streakCard.appendChild(streakVal);
+  streakCard.appendChild(streakLbl);
+
+  const weekCard = document.createElement('div');
+  weekCard.className = 'ws-stat-card';
+  const weekVal = document.createElement('span');
+  weekVal.className = 'ws-stat-value';
+  weekVal.textContent = weekly.toLocaleString();
+  const weekLbl = document.createElement('span');
+  weekLbl.className = 'ws-stat-label';
+  weekLbl.textContent = 'This Week';
+  weekCard.appendChild(weekVal);
+  weekCard.appendChild(weekLbl);
+
+  grid.appendChild(streakCard);
+  grid.appendChild(weekCard);
+  section2.appendChild(grid);
+  panel.appendChild(section2);
+
+  // 30-day chart
+  const section3 = document.createElement('div');
+  section3.className = 'ws-section';
+  const heading3 = document.createElement('h3');
+  heading3.className = 'ws-heading';
+  heading3.textContent = 'Last 30 Days';
+  section3.appendChild(heading3);
+
+  const chart = document.createElement('div');
+  chart.className = 'ws-chart';
+  const maxWords = Math.max(...last30.map(d => d.words), 1);
+  for (const day of last30) {
+    const barEl = document.createElement('div');
+    const height = Math.max(2, (day.words / maxWords) * 60);
+    barEl.className = 'ws-bar' + (day.words >= dailyGoal ? ' ws-bar-met' : '');
+    barEl.style.height = height + 'px';
+    barEl.title = day.date + ': ' + day.words + ' words';
+    chart.appendChild(barEl);
+  }
+  section3.appendChild(chart);
+  panel.appendChild(section3);
+
+  container.appendChild(panel);
+}
+
+module.exports = { renderGoalsPanel };

src/plugins/built-in/writing-studio/panels/manuscript-panel.js

@@ -0,0 +1,124 @@
+function renderManuscriptPanel(container, { engines, editor, settings }) {
+  const projectDir = settings.get('projectDir');
+
+  container.replaceChildren();
+  const panel = document.createElement('div');
+  panel.className = 'ws-panel';
+
+  if (!projectDir) {
+    const empty = document.createElement('div');
+    empty.className = 'ws-empty';
+    const p = document.createElement('p');
+    p.textContent = 'No manuscript project open';
+    empty.appendChild(p);
+    const btn = document.createElement('button');
+    btn.className = 'ws-btn ws-btn-primary';
+    btn.id = 'ws-new-project';
+    btn.textContent = 'New Project';
+    btn.addEventListener('click', () => {
+      const name = prompt('Project name:');
+      if (!name) return;
+      settings.set('projectDir', name);
+      renderManuscriptPanel(container, { engines, editor, settings });
+    });
+    empty.appendChild(btn);
+    panel.appendChild(empty);
+    container.appendChild(panel);
+    return;
+  }
+
+  const project = engines.projects.loadProject(projectDir);
+  if (!project) {
+    const empty = document.createElement('div');
+    empty.className = 'ws-empty';
+    const p = document.createElement('p');
+    p.textContent = 'Project not found at ' + projectDir;
+    empty.appendChild(p);
+    const btn = document.createElement('button');
+    btn.className = 'ws-btn';
+    btn.id = 'ws-clear-project';
+    btn.textContent = 'Clear Project';
+    btn.addEventListener('click', () => {
+      settings.set('projectDir', null);
+      renderManuscriptPanel(container, { engines, editor, settings });
+    });
+    empty.appendChild(btn);
+    panel.appendChild(empty);
+    container.appendChild(panel);
+    return;
+  }
+
+  const stats = engines.projects.getStats(projectDir);
+
+  // Project title + progress
+  const section1 = document.createElement('div');
+  section1.className = 'ws-section';
+  const heading = document.createElement('h3');
+  heading.className = 'ws-heading';
+  heading.textContent = project.title;
+  section1.appendChild(heading);
+
+  const bar = document.createElement('div');
+  bar.className = 'ws-progress-bar';
+  const fill = document.createElement('div');
+  fill.className = 'ws-progress-fill';
+  fill.style.width = stats.pctComplete + '%';
+  bar.appendChild(fill);
+  section1.appendChild(bar);
+
+  const row = document.createElement('div');
+  row.className = 'ws-stat-row';
+  const label = document.createElement('span');
+  label.textContent = stats.totalWords.toLocaleString() + ' / ' + stats.targetWords.toLocaleString() + ' words';
+  const pct = document.createElement('span');
+  pct.className = 'ws-pct';
+  pct.textContent = stats.pctComplete + '%';
+  row.appendChild(label);
+  row.appendChild(pct);
+  section1.appendChild(row);
+  panel.appendChild(section1);
+
+  // Chapters list
+  const section2 = document.createElement('div');
+  section2.className = 'ws-section';
+  const heading2 = document.createElement('h3');
+  heading2.className = 'ws-heading';
+  heading2.textContent = 'Chapters (' + project.chapters.length + ')';
+  section2.appendChild(heading2);
+
+  const chList = document.createElement('div');
+  chList.className = 'ws-chapter-list';
+  for (const ch of project.chapters) {
+    const item = document.createElement('div');
+    item.className = 'ws-chapter-item';
+    const title = document.createElement('span');
+    title.className = 'ws-chapter-title';
+    title.textContent = ch.title || ch.file;
+    const status = document.createElement('span');
+    status.className = 'ws-chapter-status ws-status-' + (ch.status || 'draft');
+    status.textContent = ch.status || 'draft';
+    item.appendChild(title);
+    item.appendChild(status);
+    chList.appendChild(item);
+  }
+  section2.appendChild(chList);
+  panel.appendChild(section2);
+
+  // Compile button
+  const section3 = document.createElement('div');
+  section3.className = 'ws-section';
+  const compileBtn = document.createElement('button');
+  compileBtn.className = 'ws-btn ws-btn-primary';
+  compileBtn.id = 'ws-compile';
+  compileBtn.textContent = 'Compile Manuscript';
+  compileBtn.addEventListener('click', () => {
+    const compiled = engines.projects.compileManuscript(projectDir);
+    editor.insertAtCursor(compiled);
+  });
+  section3.appendChild(compileBtn);
+  panel.appendChild(section3);
+
+  container.appendChild(panel);
+}
+
+module.exports = { renderManuscriptPanel };

src/plugins/built-in/writing-studio/panels/proofread-panel.js

@@ -0,0 +1,97 @@
+function renderProofreadPanel(container, { events, editor }) {
+  const hasAI = events.hasHandler('ai:analyze');
+
+  container.replaceChildren();
+
+  const panel = document.createElement('div');
+  panel.className = 'ws-panel';
+
+  const section = document.createElement('div');
+  section.className = 'ws-section';
+
+  const btn = document.createElement('button');
+  btn.className = 'ws-btn ws-btn-primary';
+  btn.id = 'ws-proofread';
+  btn.textContent = hasAI ? 'Check Document' : 'AI Plugin Required';
+  btn.disabled = !hasAI;
+  section.appendChild(btn);
+
+  if (!hasAI) {
+    const note = document.createElement('p');
+    note.className = 'ws-muted';
+    note.textContent = 'Install the AI Assistant plugin to enable proofreading.';
+    section.appendChild(note);
+  }
+  panel.appendChild(section);
+
+  const issuesList = document.createElement('div');
+  issuesList.className = 'ws-issues-list';
+  issuesList.id = 'ws-issues';
+  panel.appendChild(issuesList);
+
+  container.appendChild(panel);
+
+  if (!hasAI) return;
+
+  container.querySelector('#ws-proofread').addEventListener('click', () => {
+    const content = editor.getContent() || '';
+    events.emit('ai:analyze', {
+      text: content,
+      type: 'grammar',
+      callback: (result) => {
+        if (result && result.issues) {
+          renderIssues(issuesList, result.issues);
+        }
+      }
+    });
+  });
+}
+
+function renderIssues(container, issues) {
+  container.replaceChildren();
+  if (!issues || issues.length === 0) {
+    const p = document.createElement('p');
+    p.className = 'ws-muted';
+    p.textContent = 'No issues found.';
+    container.appendChild(p);
+    return;
+  }
+  for (let i = 0; i < issues.length; i++) {
+    const issue = issues[i];
+    const item = document.createElement('div');
+    item.className = 'ws-issue-item';
+
+    const type = document.createElement('div');
+    type.className = 'ws-issue-type';
+    type.textContent = (issue.type || 'grammar').toUpperCase();
+    item.appendChild(type);
+
+    const text = document.createElement('div');
+    text.className = 'ws-issue-text';
+    text.textContent = issue.message || issue.text || '';
+    item.appendChild(text);
+
+    if (issue.suggestion) {
+      const sug = document.createElement('div');
+      sug.className = 'ws-issue-suggestion';
+      sug.textContent = 'Suggestion: ' + issue.suggestion;
+      item.appendChild(sug);
+    }
+
+    const actions = document.createElement('div');
+    actions.className = 'ws-issue-actions';
+    for (const [action, label] of [['accept', 'Accept'], ['dismiss', 'Dismiss']]) {
+      const actionBtn = document.createElement('button');
+      actionBtn.className = 'ws-btn ws-btn-sm';
+      actionBtn.textContent = label;
+      actionBtn.addEventListener('click', () => {
+        item.remove();
+      });
+      actions.appendChild(actionBtn);
+    }
+    item.appendChild(actions);
+    container.appendChild(item);
+  }
+}
+
+module.exports = { renderProofreadPanel };

src/plugins/built-in/writing-studio/panels/snapshots-panel.js

@@ -0,0 +1,81 @@
+function renderSnapshotsPanel(container, { engines, editor }) {
+  const snapshots = engines.snapshots.list();
+
+  container.replaceChildren();
+
+  const panel = document.createElement('div');
+  panel.className = 'ws-panel';
+
+  // Header with take snapshot button
+  const section = document.createElement('div');
+  section.className = 'ws-section';
+  const btn = document.createElement('button');
+  btn.className = 'ws-btn ws-btn-primary';
+  btn.id = 'ws-take-snapshot';
+  btn.textContent = 'Take Snapshot';
+  section.appendChild(btn);
+  const count = document.createElement('span');
+  count.className = 'ws-muted';
+  count.textContent = snapshots.length + ' snapshots';
+  section.appendChild(count);
+  panel.appendChild(section);
+
+  // Snapshot list
+  const list = document.createElement('div');
+  list.className = 'ws-snapshot-list';
+  for (const s of snapshots) {
+    const item = document.createElement('div');
+    item.className = 'ws-snapshot-item';
+
+    const header = document.createElement('div');
+    header.className = 'ws-snapshot-header';
+    const sLabel = document.createElement('span');
+    sLabel.className = 'ws-snapshot-label';
+    sLabel.textContent = s.label;
+    const sWords = document.createElement('span');
+    sWords.textContent = s.wordCount + ' words';
+    header.appendChild(sLabel);
+    header.appendChild(sWords);
+    item.appendChild(header);
+
+    const time = document.createElement('div');
+    time.className = 'ws-snapshot-time';
+    time.textContent = new Date(s.timestamp).toLocaleString();
+    item.appendChild(time);
+
+    const actions = document.createElement('div');
+    actions.className = 'ws-snapshot-actions';
+    for (const [action, text, cls] of [['restore', 'Restore', ''], ['diff', 'Diff', ''], ['delete', 'Delete', 'ws-btn-danger']]) {
+      const actionBtn = document.createElement('button');
+      actionBtn.className = 'ws-btn ws-btn-sm' + (cls ? ' ' + cls : '');
+      actionBtn.textContent = text;
+      actionBtn.addEventListener('click', () => {
+        if (action === 'restore') {
+          const content = engines.snapshots.restore(s.id);
+          editor.insertAtCursor(content);
+        } else if (action === 'delete') {
+          engines.snapshots.delete(s.id);
+          renderSnapshotsPanel(container, { engines, editor });
+        } else if (action === 'diff') {
+          const current = editor.getContent() || '';
+          const result = engines.snapshots.diff(s.id, current);
+          alert('+' + result.added + ' lines added, -' + result.removed + ' lines removed');
+        }
+      });
+      actions.appendChild(actionBtn);
+    }
+    item.appendChild(actions);
+    list.appendChild(item);
+  }
+  panel.appendChild(list);
+  container.appendChild(panel);
+
+  // Take snapshot button handler
+  container.querySelector('#ws-take-snapshot').addEventListener('click', () => {
+    const content = editor.getContent() || '';
+    engines.snapshots.create(content, 'manual');
+    renderSnapshotsPanel(container, { engines, editor });
+  });
+}
+
+module.exports = { renderSnapshotsPanel };

src/plugins/built-in/writing-studio/project-manager.js

@@ -0,0 +1,74 @@
+class ProjectManager {
+  /**
+   * @param {object} fs - { readFile(path), writeFile(path, content), fileExists(path), listDir(path) }
+   */
+  constructor(fs) {
+    this.fs = fs;
+  }
+
+  createProject(dir, opts) {
+    const project = {
+      title: opts.title,
+      type: opts.type || 'manuscript',
+      target: { words: opts.targetWords || 0, deadline: opts.deadline || null },
+      chapters: [],
+      metadata: opts.metadata || {}
+    };
+    this.fs.writeFile(dir + '/.project.json', JSON.stringify(project, null, 2));
+    return project;
+  }
+
+  loadProject(dir) {
+    const raw = this.fs.readFile(dir + '/.project.json');
+    if (!raw) return null;
+    return JSON.parse(raw);
+  }
+
+  _saveProject(dir, project) {
+    this.fs.writeFile(dir + '/.project.json', JSON.stringify(project, null, 2));
+  }
+
+  addChapter(dir, chapter) {
+    const project = this.loadProject(dir);
+    if (!project) throw new Error('Project not found');
+    project.chapters.push(chapter);
+    this._saveProject(dir, project);
+  }
+
+  updateChapter(dir, index, updates) {
+    const project = this.loadProject(dir);
+    if (!project) throw new Error('Project not found');
+    Object.assign(project.chapters[index], updates);
+    this._saveProject(dir, project);
+  }
+
+  compileManuscript(dir) {
+    const project = this.loadProject(dir);
+    if (!project) throw new Error('Project not found');
+    const parts = [];
+    for (const ch of project.chapters) {
+      const content = this.fs.readFile(dir + '/' + ch.file);
+      if (content) parts.push(content);
+    }
+    return parts.join('\n\n---\n\n');
+  }
+
+  getStats(dir) {
+    const project = this.loadProject(dir);
+    if (!project) throw new Error('Project not found');
+    let totalWords = 0;
+    for (const ch of project.chapters) {
+      const content = this.fs.readFile(dir + '/' + ch.file);
+      if (content) totalWords += content.split(/\s+/).filter(Boolean).length;
+    }
+    const target = project.target.words || 0;
+    return {
+      totalWords,
+      chapterCount: project.chapters.length,
+      targetWords: target,
+      pctComplete: target > 0 ? Math.min(100, Math.round((totalWords / target) * 100)) : 0
+    };
+  }
+}
+
+module.exports = { ProjectManager };

src/plugins/built-in/writing-studio/snapshot-manager.js

@@ -0,0 +1,73 @@
+class SnapshotManager {
+  /**
+   * @param {object} store - { get(key), set(key, value) }
+   * @param {string} storeKey - settings key for snapshots
+   */
+  constructor(store, storeKey = 'plugins.writing-studio.snapshots') {
+    this.store = store;
+    this.storeKey = storeKey;
+  }
+
+  _getAll() {
+    const raw = this.store.get(this.storeKey);
+    return raw ? JSON.parse(raw) : [];
+  }
+
+  _saveAll(snaps) {
+    this.store.set(this.storeKey, JSON.stringify(snaps));
+  }
+
+  create(content, label = 'manual') {
+    const snaps = this._getAll();
+    const snap = {
+      id: 'snap-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8),
+      timestamp: new Date().toISOString(),
+      content,
+      wordCount: content.split(/\s+/).filter(Boolean).length,
+      label
+    };
+    snaps.unshift(snap);
+    this._saveAll(snaps);
+    return snap;
+  }
+
+  list() {
+    return this._getAll();
+  }
+
+  getById(id) {
+    return this._getAll().find(s => s.id === id) || null;
+  }
+
+  restore(id) {
+    const snap = this.getById(id);
+    if (!snap) throw new Error('Snapshot not found');
+    return snap.content;
+  }
+
+  delete(id) {
+    const snaps = this._getAll().filter(s => s.id !== id);
+    this._saveAll(snaps);
+  }
+
+  diff(id, currentContent) {
+    const snap = this.getById(id);
+    if (!snap) throw new Error('Snapshot not found');
+    const oldLines = snap.content.split('\n');
+    const newLines = currentContent.split('\n');
+    const oldSet = new Set(oldLines);
+    const newSet = new Set(newLines);
+    let added = 0;
+    let removed = 0;
+    for (const line of newLines) { if (!oldSet.has(line)) added++; }
+    for (const line of oldLines) { if (!newSet.has(line)) removed++; }
+    return { added, removed };
+  }
+
+  prune(keepCount) {
+    const snaps = this._getAll();
+    this._saveAll(snaps.slice(0, keepCount));
+  }
+}
+
+module.exports = { SnapshotManager };

src/plugins/built-in/writing-studio/sprint-engine.js

@@ -0,0 +1,51 @@
+class SprintEngine {
+  /**
+   * @param {object} opts
+   * @param {function} opts.onEvent - callback(event_name, data)
+   */
+  constructor(opts = {}) {
+    this.onEvent = opts.onEvent || (() => {});
+    this._active = false;
+    this._startTime = null;
+    this._duration = 0;
+    this._initialWords = 0;
+  }
+
+  start(durationMinutes, currentWordCount) {
+    if (this._active) throw new Error('Sprint already active');
+    this._active = true;
+    this._startTime = Date.now();
+    this._duration = durationMinutes * 60 * 1000;
+    this._initialWords = currentWordCount;
+  }
+
+  stop(currentWordCount) {
+    if (!this._active) throw new Error('No active sprint');
+    const elapsed = Date.now() - this._startTime;
+    const wordDelta = Math.max(0, currentWordCount - this._initialWords);
+    const elapsedMinutes = elapsed / 60000;
+    const wpm = elapsedMinutes > 0 ? Math.round(wordDelta / elapsedMinutes) : 0;
+    this._active = false;
+    this._startTime = null;
+    return { wordDelta, elapsed, wpm };
+  }
+
+  tick(elapsedMs) {
+    if (!this._active) return;
+    const remaining = Math.max(0, this._duration - elapsedMs);
+    this.onEvent('sprint:tick', { remaining, elapsed: elapsedMs });
+    if (remaining <= 0) {
+      this._active = false;
+      this.onEvent('sprint:complete', { expired: true });
+    }
+  }
+
+  isActive() { return this._active; }
+
+  getRemaining() {
+    if (!this._active) return 0;
+    return Math.max(0, this._duration - (Date.now() - this._startTime));
+  }
+}
+
+module.exports = { SprintEngine };

src/plugins/event-bus.js

@@ -0,0 +1,43 @@
+class EventBus {
+  constructor() {
+    this.listeners = new Map();
+  }
+
+  on(event, handler) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, []);
+    }
+    this.listeners.get(event).push(handler);
+  }
+
+  off(event, handler) {
+    if (!handler) {
+      this.listeners.delete(event);
+      return;
+    }
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      const idx = handlers.indexOf(handler);
+      if (idx !== -1) handlers.splice(idx, 1);
+    }
+  }
+
+  emit(event, payload) {
+    const handlers = this.listeners.get(event);
+    if (!handlers) return;
+    for (const handler of handlers) {
+      try {
+        handler(payload);
+      } catch (err) {
+        console.error(`[EventBus] Error in handler for "${event}":`, err);
+      }
+    }
+  }
+
+  hasHandler(event) {
+    const handlers = this.listeners.get(event);
+    return handlers !== undefined && handlers !== null && handlers.length > 0;
+  }
+}
+
+module.exports = { EventBus };

src/plugins/plugin-api.js

@@ -0,0 +1,23 @@
+class PluginAPI {
+  /**
+   * Called when the plugin is discovered and loaded.
+   * Receives a scoped context object with APIs.
+   * @param {object} context - Plugin context (sidebar, commands, settings, etc.)
+   */
+  init(context) {
+    this.context = context;
+  }
+
+  /** Called when the plugin is activated (e.g., sidebar panel clicked). */
+  activate() {}
+
+  /** Called when the plugin is deactivated. */
+  deactivate() {}
+
+  /** Returns the parsed manifest.json for this plugin. */
+  getManifest() {
+    return this._manifest || null;
+  }
+}
+
+module.exports = { PluginAPI };

src/plugins/plugin-context.js

@@ -0,0 +1,70 @@
+class PluginContext {
+  /**
+   * @param {object} deps - Injected dependencies
+   * @param {string} deps.pluginId - Plugin unique ID (for namespacing)
+   * @param {object} deps.sidebar - SidebarManager.registerPanel
+   * @param {object} deps.commands - CommandPalette.register
+   * @param {object} deps.statusBar - StatusBar.registerIndicator
+   * @param {object} deps.eventBus - EventBus instance
+   * @param {object} deps.settings - { get, set, onChanged }
+   * @param {object} deps.editor - { getContent, getSelection, insertAtCursor, onContentChanged }
+   * @param {object} deps.ipc - { invoke, on }
+   * @param {object} deps.exportHooks - { preHooks: [], postHooks: [] }
+   */
+  constructor(deps) {
+    const { pluginId, sidebar, commands, statusBar, eventBus, settings, editor, ipc, exportHooks } = deps;
+
+    this.sidebar = {
+      registerPanel: (id, opts) => sidebar.registerPanel(`${pluginId}:${id}`, opts)
+    };
+
+    this.commands = {
+      register: (id, label, handler, shortcut) => {
+        const safeHandler = (...args) => {
+          try {
+            handler(...args);
+          } catch (err) {
+            console.error(`[Plugin:${pluginId}] Command "${id}" error:`, err);
+          }
+        };
+        commands.register(`${pluginId}:${id}`, label, safeHandler, shortcut);
+      }
+    };
+
+    this.statusBar = {
+      registerIndicator: (id, opts) => statusBar.registerIndicator(`${pluginId}:${id}`, opts)
+    };
+
+    this.settings = {
+      get: (key) => settings.get(`plugins.${pluginId}.${key}`),
+      set: (key, value) => settings.set(`plugins.${pluginId}.${key}`, value),
+      onChanged: (key, cb) => settings.onChanged(`plugins.${pluginId}.${key}`, cb)
+    };
+
+    this.editor = {
+      getContent: () => editor.getContent(),
+      getSelection: () => editor.getSelection(),
+      insertAtCursor: (text) => editor.insertAtCursor(text),
+      onContentChanged: (cb) => editor.onContentChanged(cb)
+    };
+
+    this.events = {
+      on: (event, handler) => eventBus.on(event, handler),
+      off: (event, handler) => eventBus.off(event, handler),
+      emit: (event, payload) => eventBus.emit(event, payload),
+      hasHandler: (event) => eventBus.hasHandler(event)
+    };
+
+    this.ipc = {
+      invoke: (channel, ...args) => ipc.invoke(channel, ...args),
+      on: (channel, handler) => ipc.on(channel, handler)
+    };
+
+    this.exports = {
+      registerPreHook: (handler) => { if (exportHooks) exportHooks.preHooks.push(handler); },
+      registerPostHook: (handler) => { if (exportHooks) exportHooks.postHooks.push(handler); }
+    };
+  }
+}
+
+module.exports = { PluginContext };

src/plugins/plugin-loader.js

@@ -0,0 +1,75 @@
+const fs = require('fs');
+const path = require('path');
+
+class PluginLoader {
+  /**
+   * @param {string[]} searchDirs - Directories to scan for plugin folders
+   */
+  constructor(searchDirs = []) {
+    this.searchDirs = searchDirs;
+    this.loadedIds = new Set();
+  }
+
+  /**
+   * Discover plugins by scanning searchDirs for manifest.json files.
+   * Returns array of { id, name, version, description, manifest, PluginClass, dir }
+   */
+  discoverPlugins() {
+    const plugins = [];
+    for (const dir of this.searchDirs) {
+      if (!fs.existsSync(dir)) continue;
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (!entry.isDirectory()) continue;
+        const pluginDir = path.join(dir, entry.name);
+        const manifestPath = path.join(pluginDir, 'manifest.json');
+        if (!fs.existsSync(manifestPath)) continue;
+        try {
+          const raw = fs.readFileSync(manifestPath, 'utf-8');
+          const manifest = JSON.parse(raw);
+          this.validateManifest(manifest);
+          let PluginClass = null;
+          const indexPath = path.join(pluginDir, 'index.js');
+          if (fs.existsSync(indexPath)) {
+            try {
+              const loaded = require(indexPath);
+              PluginClass = loaded.Plugin || loaded.default || null;
+            } catch (err) {
+              console.error(`[PluginLoader] Failed to load index.js for "${manifest.id}":`, err.message);
+              continue;
+            }
+          }
+          plugins.push({
+            id: manifest.id,
+            name: manifest.name,
+            version: manifest.version,
+            description: manifest.description,
+            manifest,
+            PluginClass,
+            dir: pluginDir
+          });
+          this.loadedIds.add(manifest.id);
+        } catch (err) {
+          console.error(`[PluginLoader] Skipping plugin in ${pluginDir}:`, err.message);
+        }
+      }
+    }
+    return plugins;
+  }
+
+  /**
+   * Validate a manifest object. Throws on invalid.
+   */
+  validateManifest(manifest) {
+    if (!manifest.id) throw new Error('Manifest missing required field: id');
+    if (!manifest.name) throw new Error('Manifest missing required field: name');
+    if (!manifest.version) throw new Error('Manifest missing required field: version');
+    if (!manifest.description) throw new Error('Manifest missing required field: description');
+    if (this.loadedIds.has(manifest.id)) {
+      throw new Error(`Duplicate plugin id: "${manifest.id}"`);
+    }
+    return true;
+  }
+}
+
+module.exports = { PluginLoader };

src/plugins/plugin-registry.js

@@ -0,0 +1,80 @@
+const { PluginContext } = require('./plugin-context');
+const { PluginAPI } = require('./plugin-api');
+
+class PluginRegistry {
+  constructor(deps) {
+    this.deps = deps;
+    this.plugins = new Map();
+    this.exportHooks = { preHooks: [], postHooks: [] };
+  }
+
+  /**
+   * Register a discovered plugin. Creates instance, builds context, calls init.
+   * If init throws, plugin is NOT registered.
+   */
+  register(pluginInfo) {
+    const { id, name, version, description, manifest, PluginClass, dir } = pluginInfo;
+
+    let instance;
+    if (PluginClass) {
+      instance = new PluginClass();
+    } else {
+      instance = new PluginAPI();
+    }
+    instance._manifest = manifest;
+
+    const context = new PluginContext({
+      pluginId: id,
+      sidebar: this.deps.sidebar,
+      commands: this.deps.commands,
+      statusBar: this.deps.statusBar,
+      eventBus: this.deps.eventBus,
+      settings: this.deps.settings,
+      editor: this.deps.editor,
+      ipc: this.deps.ipc,
+      exportHooks: this.exportHooks
+    });
+
+    try {
+      instance.init(context);
+    } catch (err) {
+      console.error(`[PluginRegistry] Plugin "${id}" init failed:`, err.message);
+      return;
+    }
+
+    this.plugins.set(id, { id, name, version, description, manifest, instance, dir, context });
+    console.log(`[PluginRegistry] Registered plugin: ${name} v${version}`);
+  }
+
+  getPlugin(id) {
+    return this.plugins.get(id);
+  }
+
+  getAll() {
+    return Array.from(this.plugins.values());
+  }
+
+  activate(id) {
+    const plugin = this.plugins.get(id);
+    if (plugin?.instance) {
+      try {
+        plugin.instance.activate();
+      } catch (err) {
+        console.error(`[PluginRegistry] Plugin "${id}" activate error:`, err.message);
+      }
+    }
+  }
+
+  deactivate(id) {
+    const plugin = this.plugins.get(id);
+    if (plugin?.instance) {
+      try {
+        plugin.instance.deactivate();
+      } catch (err) {
+        console.error(`[PluginRegistry] Plugin "${id}" deactivate error:`, err.message);
+      }
+    }
+  }
+}
+
+module.exports = { PluginRegistry };

src/plugins/settings-store.js

@@ -0,0 +1,23 @@
+class SettingsStore {
+  /**
+   * @param {object} backend - { get(key), set(key, value) } backed by main process store
+   */
+  constructor(backend) {
+    this.backend = backend;
+  }
+
+  get(key) {
+    return this.backend.get(key);
+  }
+
+  set(key, value) {
+    this.backend.set(key, value);
+  }
+
+  onChanged(key, callback) {
+    // Deferred: plugins read settings on init/activate for MVP.
+    // Full change notification requires IPC watcher in main process.
+  }
+}
+
+module.exports = { SettingsStore };

src/preload.js

@@ -9,7 +9,7 @@
  * - All IPC channels are explicitly whitelisted
  * - Prevents XSS from escalating to full system access
  *
- * @version 4.1.0
+ * @version 4.4.1
  */
 
 const { contextBridge, ipcRenderer } = require('electron');
@@ -23,6 +23,7 @@ const ALLOWED_SEND_CHANNELS = [
   'save-recent-files',
   'clear-recent-files',
   'renderer-ready',
+  'select-custom-css',
 
   // Theme
   'get-theme',
@@ -135,7 +136,11 @@ const ALLOWED_SEND_CHANNELS = [
   'export',
 
   // Git diff
-  'git-diff'
+  'git-diff',
+
+  // Plugin settings
+  'plugin-settings:get',
+  'plugin-settings:set'
 ];
 
 const ALLOWED_RECEIVE_CHANNELS = [
@@ -146,6 +151,8 @@ const ALLOWED_RECEIVE_CHANNELS = [
   'get-content-for-save',
   'get-content-for-spreadsheet',
   'recent-files-cleared',
+  'load-custom-css',
+  'clear-custom-css',
 
   // UI toggles
   'toggle-preview',
@@ -230,7 +237,12 @@ const ALLOWED_RECEIVE_CHANNELS = [
   'load-template-menu',
   'toggle-command-palette',
   'toggle-sidebar-panel',
-  'toggle-bottom-panel'
+  'toggle-bottom-panel',
+
+  // File dialog / directory listing
+  'list-directory',
+  'pick-folder',
+  'pick-file'
 ];
 
 /**
@@ -337,7 +349,10 @@ contextBridge.exposeInMainWorld('electronAPI', {
     exists: (filePath) => ipcRenderer.invoke('path-exists', filePath),
     isDirectory: (filePath) => ipcRenderer.invoke('is-directory', filePath),
     copy: (source, destination) => ipcRenderer.invoke('copy-path', { source, destination }),
-    move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination })
+    move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination }),
+    list: (dirPath) => ipcRenderer.invoke('list-directory', dirPath),
+    pickFolder: () => ipcRenderer.invoke('pick-folder'),
+    pickFile: () => ipcRenderer.invoke('pick-file')
   },
 
   // Theme Operations
@@ -429,7 +444,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
   generators: {
     openAscii: () => ipcRenderer.send('open-ascii-generator'),
     openTable: () => ipcRenderer.send('open-table-generator')
-  }
+  },
+
+  getAppVersion: () => ipcRenderer.invoke('get-app-version')
 });
 
 // Log successful preload initialization

src/renderer.js

@@ -1,16 +1,34 @@
 /**
  * MarkdownConverter Renderer Process
- * @version 4.1.0
+ * @version 4.4.2
  */
 
 const { ipcRenderer } = require('electron');
+
+// Shim window.electronAPI for main window which uses nodeIntegration
+// without preload script (window.electronAPI is normally set by preload.js).
+if (typeof window !== 'undefined' && !window.electronAPI) {
+    window.electronAPI = {
+        getAppVersion: () => ipcRenderer.invoke('get-app-version'),
+        invoke: (channel, data) => ipcRenderer.invoke(channel, data),
+        on: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args))
+    };
+}
+
 const marked = require('marked');
 const { markedHighlight } = require('marked-highlight');
-const DOMPurify = require('dompurify');
+const createDOMPurify = require('dompurify');
+const DOMPurify = createDOMPurify(window);
 const hljs = require('highlight.js');
 const { createEditor } = require('./editor/codemirror-setup');
 const { undo, redo } = require('@codemirror/commands');
-const { ModalManager } = require('./utils/ModalManager');
+// ModalManager is loaded via <script src="utils/ModalManager.js"> in index.html.
+// It already exists in the global scope — re-declaring with let/const causes
+// SyntaxError: "Identifier 'ModalManager' has already been declared".
+if (typeof ModalManager === 'undefined') {
+    const result = require('./utils/ModalManager');
+    ModalManager = result.ModalManager || result;
+}
 // Lazy-loaded modules — defer heavy imports until first use
 let _SidebarManager, _renderTemplatesPanel, _renderExplorerPanel, _renderGitPanel, _renderSnippetsPanel;
 let _ReplPanel, _CommandPalette, _PrintPreview, _createWelcomeContent;
@@ -101,19 +119,24 @@ marked.use({
         start(src) { return src.match(/^:::(note|warning|tip|danger|info)/m)?.index; },
         tokenizer(src) {
             const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
-            if (match) {
+            if (match && match.index === 0) {
+                const admonitionType = match[1];
+                const text = match[2].trim();
+                const tokens = [];
+                this.lexer.blockTokens(text, tokens);
                 return {
                     type: 'admonition',
                     raw: match[0],
-                    admonitionType: match[1],
-                    text: match[2].trim()
+                    admonitionType,
+                    text,
+                    tokens
                 };
             }
         },
         renderer(token) {
             const icons = { note: '\u2139', warning: '\u26A0', tip: '\uD83D\uDCA1', danger: '\uD83D\uDD34', info: '\u2139' };
             const icon = icons[token.admonitionType] || '\u2139';
-            const inner = this.parser.parse(token.text);
+            const inner = this.parser.parse(token.tokens || []);
             return `<div class="admonition admonition-${token.admonitionType}">
                 <div class="admonition-title">${icon} ${token.admonitionType.charAt(0).toUpperCase() + token.admonitionType.slice(1)}</div>
                 <div class="admonition-content">${inner}</div>
@@ -130,6 +153,21 @@ function plantumlEncode(text) {
     return '~h' + hex;
 }
 
+// Scopes user custom CSS by prefixing all selectors to protect application UI
+function scopeCSS(cssText, scopeSelector) {
+    if (!cssText) return '';
+    return cssText.replace(/([^\r\n,{}]+)(,(?=[^}]*{)|(?=[^{]*{))/g, (match, selector, separator) => {
+        const trimmed = selector.trim();
+        if (!trimmed || trimmed.startsWith('@') || trimmed.startsWith(':root') || trimmed.startsWith('from') || trimmed.startsWith('to') || /^\d+%$/.test(trimmed)) {
+            return match;
+        }
+        return scopeSelector + ' ' + trimmed + (separator || '');
+    });
+}
+
+// Module-level reference set by DOMContentLoaded after sidebar registration
+const outlinePanelContainer = null;
+
 // Tab Management
 class TabManager {
     constructor() {
@@ -143,6 +181,7 @@ class TabManager {
         this.recentFiles = JSON.parse(localStorage.getItem('recentFiles') || '[]');
         this.previewDebounceTimers = new Map(); // Debounce timers per tab
         this.previewDebounceDelay = 300; // 300ms debounce
+        this.previewCache = new Map(); // Performance optimization render cache
 
         // Initialize first tab
         this.tabs.set(1, {
@@ -226,7 +265,7 @@ class TabManager {
             editorView: null,
             findMatches: [],
             currentMatchIndex: -1,
-            type: type,
+            type: type, // 'markdown' or 'pdf'
             // PDF-specific state
             pdfDoc: null,
             pdfCurrentPage: 1,
@@ -239,6 +278,7 @@ class TabManager {
         this.switchToTab(newTabId);
         this.startAutoSave();
         this.updateTabBar();
+        console.log('createNewTab: tab created with type:', type);
     }
 
     createPdfTab(filePath) {
@@ -450,27 +490,7 @@ class TabManager {
         document.querySelector('.editor-container').appendChild(tabContent);
 
         // Initialize CodeMirror editor
-        const editorContainer = document.getElementById(`editor-cm-${tab.id}`);
-        if (editorContainer) {
-            const isDark = document.body.className.includes('dark');
-            tab.editorView = createEditor(editorContainer, {
-                content: tab.content,
-                onChange: (newContent) => {
-                    tab.content = newContent;
-                    tab.isDirty = true;
-                    this.updatePreview(tab.id);
-                    this.updateWordCount();
-                    this.updateTabBar();
-                    if (outlinePanelContainer?._refreshOutline) outlinePanelContainer._refreshOutline();
-                },
-                onUpdate: (view) => {
-                    this.updateCursorPosition(view);
-                    if (outlinePanelContainer?._setActiveHeading) outlinePanelContainer._setActiveHeading(view.state.doc.lineAt(view.state.selection.main.head).number);
-                },
-                isDark,
-                showLineNumbers: this.showLineNumbers,
-            });
-        }
+        this.ensureEditor(tab);
     }
     
     switchToTab(tabId) {
@@ -656,6 +676,11 @@ class TabManager {
         const tab = this.tabs.get(tabId);
         if (!tab || tab.type === 'pdf') return;
 
+        // Guard against auto-renders in large file mode
+        if (tab.largeFileMode && !immediate) {
+            return;
+        }
+
         // Clear existing debounce timer for this tab
         if (this.previewDebounceTimers.has(tabId)) {
             clearTimeout(this.previewDebounceTimers.get(tabId));
@@ -674,20 +699,55 @@ class TabManager {
         }, this.previewDebounceDelay));
     }
 
+    _hash(str) {
+        if (!str) return 0;
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = ((hash << 5) - hash) + str.charCodeAt(i);
+            hash |= 0; // Convert to 32bit integer
+        }
+        return hash;
+    }
+
     _renderPreview(tabId) {
         const tab = this.tabs.get(tabId);
         const preview = document.getElementById(`preview-${tabId}`);
+        console.log('[_renderPreview] tabId:', tabId, 'tab exists:', !!tab, 'preview exists:', !!preview, 'content length:', tab?.content?.length);
 
         if (!tab || !preview) return;
 
         try {
             // Check if libraries are available
             if (!marked || !DOMPurify) {
+                console.error('[_renderPreview] Libraries not available:', { marked: !!marked, DOMPurify: !!DOMPurify });
                 preview.innerHTML = '<div class="preview-error"><div class="preview-error-icon">⚠️</div><div class="preview-error-title">Libraries Not Loaded</div><div class="preview-error-message">Required libraries (marked/DOMPurify) could not be loaded. Please check your installation.</div></div>';
                 return;
             }
+
+            // Cache lookup
+            const contentHash = this._hash(tab.content);
+            let sanitizedHtml;
+            if (this.previewCache.has(contentHash)) {
+                console.log('[_renderPreview] Cache hit for hash:', contentHash);
+                sanitizedHtml = this.previewCache.get(contentHash);
+            } else {
+                console.log('[_renderPreview] Cache miss. About to call marked.parse, content length:', tab.content.length);
                 const html = marked.parse(tab.content);
-            let sanitizedHtml = DOMPurify.sanitize(html);
+                console.log('[_renderPreview] marked.parse returned type:', typeof html, 'isPromise:', html instanceof Promise);
+                if (html instanceof Promise) {
+                    console.error('[_renderPreview] marked.parse returned a Promise! Need to await it.');
+                    return;
+                }
+                sanitizedHtml = DOMPurify.sanitize(html);
+                console.log('[_renderPreview] DOMPurify.sanitize returned, length:', sanitizedHtml.length);
+
+                // Add to cache and maintain cache size limit (100 entries)
+                this.previewCache.set(contentHash, sanitizedHtml);
+                if (this.previewCache.size > 100) {
+                    const oldestKey = this.previewCache.keys().next().value;
+                    this.previewCache.delete(oldestKey);
+                }
+            }
 
             // TOC generation
             if (sanitizedHtml.includes('[[toc]]') || sanitizedHtml.includes('[TOC]')) {
@@ -1323,10 +1383,22 @@ class TabManager {
         }
     }
     
+    checkForLargeFile(tab, content) {
+        if (content && content.length > 1024 * 1024) { // >1MB
+            tab.largeFileMode = true;
+            this.isPreviewVisible = false;
+            this.updatePreviewVisibility();
+            notifyUser('Large file detected (>1MB). Large File Mode enabled to maintain peak responsiveness. Live preview auto-render is disabled.', 'warning');
+        } else {
+            tab.largeFileMode = false;
+        }
+    }
+
     // File operations
     openFile(filePath, content) {
         console.log('openFile called with:', filePath, 'content length:', content.length);
         let tab = this.tabs.get(this.activeTabId);
+        console.log('openFile tab state before:', { id: tab?.id, hasEditorView: !!tab?.editorView, contentLength: tab?.content?.length, filePath: tab?.filePath, isDirty: tab?.isDirty });
 
         // Handle both forward and back slashes for cross-platform compatibility
         const fileName = filePath.split(/[\\/]/).pop();
@@ -1340,24 +1412,31 @@ class TabManager {
             tab.originalContent = content;
             tab.isDirty = false;
 
+            this.checkForLargeFile(tab, content);
+
             // Update the editor and preview
             this.setEditorContent(this.activeTabId, content);
-            this.updatePreview(this.activeTabId);
+            console.log('openFile after setEditorContent, tab state:', { id: tab.id, hasEditorView: !!tab.editorView, contentLength: tab.content.length });
+            this.updatePreview(this.activeTabId, true); // immediate=true for initial load
             this.updateWordCount();
         } else {
             // Create new tab for the file
             console.log('Creating new tab for file');
             this.createNewTab();
             tab = this.tabs.get(this.activeTabId);
+            console.log('openFile after createNewTab, tab:', { id: tab.id, hasEditorView: !!tab.editorView });
             tab.filePath = filePath;
             tab.title = fileName;
             tab.content = content;
             tab.originalContent = content;
             tab.isDirty = false;
 
+            this.checkForLargeFile(tab, content);
+
             // Set content in the CodeMirror editor
             this.setEditorContent(this.activeTabId, content);
-            this.updatePreview(this.activeTabId);
+            console.log('openFile after setEditorContent, tab state:', { id: tab.id, hasEditorView: !!tab.editorView, contentLength: tab.content.length });
+            this.updatePreview(this.activeTabId, true); // immediate=true for initial load
             this.updateWordCount();
         }
         this.startAutoSave();
@@ -1365,6 +1444,7 @@ class TabManager {
         this.updateTabBar();
         this.updateFilePath();
         this.updateBreadcrumb();
+        this.updateUI(); // Ensure tab content is visible
 
         // Notify main process about current file for exports
         ipcRenderer.send('set-current-file', filePath);
@@ -1381,9 +1461,47 @@ class TabManager {
         return tab?.content || '';
     }
 
+    // Ensure a tab has a CodeMirror editor (lazy creation fallback)
+    ensureEditor(tab) {
+        if (tab.editorView) return true;
+        const editorContainer = document.getElementById(`editor-cm-${tab.id}`);
+        if (!editorContainer) {
+            console.error(`[ensureEditor] editor-cm-${tab.id} not found in DOM`);
+            return false;
+        }
+        try {
+            const isDark = document.body.className.includes('dark');
+            tab.editorView = createEditor(editorContainer, {
+                content: tab.content,
+                onChange: (newContent) => {
+                    tab.content = newContent;
+                    tab.isDirty = true;
+                    this.updatePreview(tab.id);
+                    this.updateWordCount();
+                    this.updateTabBar();
+                    if (outlinePanelContainer?._refreshOutline) outlinePanelContainer._refreshOutline();
+                },
+                onUpdate: (view) => {
+                    this.updateCursorPosition(view);
+                    if (outlinePanelContainer?._setActiveHeading) outlinePanelContainer._setActiveHeading(view.state.doc.lineAt(view.state.selection.main.head).number);
+                },
+                isDark,
+                showLineNumbers: this.showLineNumbers,
+            });
+            console.log(`[ensureEditor] Created editor for tab ${tab.id}`);
+            return true;
+        } catch (err) {
+            console.error(`[ensureEditor] Failed to create editor for tab ${tab.id}:`, err);
+            return false;
+        }
+    }
+
     // Set content in editor
     setEditorContent(tabId, content) {
         const tab = this.tabs.get(tabId);
+        if (!tab?.editorView) {
+            this.ensureEditor(tab);
+        }
         if (tab?.editorView) {
             tab.editorView.dispatch({
                 changes: { from: 0, to: tab.editorView.state.doc.length, insert: content }
@@ -1439,11 +1557,24 @@ class TabManager {
 let tabManager;
 let replPanel;
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
     tabManager = new TabManager();
+
+    // Load saved Custom Preview CSS if present
+    const savedCSSContent = localStorage.getItem('customPreviewCSSContent');
+    if (savedCSSContent) {
+        applyCustomPreviewCSS(savedCSSContent);
+    }
+
     const ReplPanel = getReplPanel();
     replPanel = new ReplPanel();
 
+    // Populate app version from main process
+    window.electronAPI.getAppVersion().then((version) => {
+      const el = document.getElementById('app-version-display');
+      if (el) el.textContent = `v${version}`;
+    });
+
     // Initialize ModalManager for all dialogs
     const findModal = new ModalManager('#find-dialog');
     const exportModal = new ModalManager('#export-dialog');
@@ -1473,7 +1604,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Initialize sidebar
     const SidebarManager = getSidebarManager();
     const sidebarManager = new SidebarManager();
-    let explorerCurrentDir = null;
+    const explorerCurrentDir = null;
 
     sidebarManager.registerPanel('explorer', {
         title: 'Explorer',
@@ -1545,6 +1676,58 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    // --- Plugin System ---
+    const { PluginLoader } = require('./plugins/plugin-loader');
+    const { PluginRegistry } = require('./plugins/plugin-registry');
+    const { EventBus } = require('./plugins/event-bus');
+    const { SettingsStore } = require('./plugins/settings-store');
+    const pluginPath = require('path');
+
+    const pluginEventBus = new EventBus();
+    const pluginSettings = new SettingsStore({
+        get: (key) => window.electronAPI.invoke('plugin-settings:get', key),
+        set: (key, value) => window.electronAPI.invoke('plugin-settings:set', { key, value })
+    });
+
+    const statusBarRight = document.querySelector('.status-bar-right');
+    const pluginRegistry = new PluginRegistry({
+        sidebar: sidebarManager,
+        commands: commandPalette,
+        statusBar: {
+            registerIndicator: (id, opts) => {
+                const el = document.createElement('span');
+                el.className = 'status-item';
+                el.id = `plugin-status-${id}`;
+                if (opts.tooltip) el.title = opts.tooltip;
+                el.textContent = opts.text || '';
+                const sep = document.createElement('span');
+                sep.className = 'status-separator';
+                sep.textContent = '|';
+                if (statusBarRight) {
+                    statusBarRight.appendChild(sep);
+                    statusBarRight.appendChild(el);
+                }
+            }
+        },
+        eventBus: pluginEventBus,
+        settings: pluginSettings,
+        editor: {
+            getContent: () => tabManager.getCurrentContent(),
+            getSelection: () => tabManager.getSelection(),
+            insertAtCursor: (text) => tabManager.insertAtCursor(text),
+            onContentChanged: (cb) => pluginEventBus.on('document:changed', cb)
+        },
+        ipc: {
+            invoke: (ch, data) => window.electronAPI.invoke(ch, data),
+            on: (ch, cb) => window.electronAPI.on(ch, cb)
+        }
+    });
+
+    const builtInDir = pluginPath.join(__dirname, 'plugins', 'built-in');
+    const loader = new PluginLoader([builtInDir]);
+    const discovered = loader.discoverPlugins();
+    discovered.forEach(p => pluginRegistry.register(p));
+
     // Initialize Zen Mode
     const ZenModeClass = getZenMode();
     const zenMode = new ZenModeClass(tabManager);
@@ -1558,10 +1741,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
         // Set welcome content in the first tab's preview
         const recentFiles = JSON.parse(localStorage.getItem('recentFiles') || '[]');
-        const welcomeHtml = getCreateWelcomeContent()(recentFiles);
+        const appVersion = await window.electronAPI.getAppVersion().catch(() => '');
+        const welcomeHtml = getCreateWelcomeContent()(recentFiles, appVersion);
 
         const tab = tabManager.tabs.get(tabManager.activeTabId);
-        if (tab) {
+        // Only show welcome if no file was opened while we were awaiting
+        if (tab && !tab.filePath && tab.content === '') {
             tab.title = 'Welcome';
             tab.content = '';
             const preview = document.getElementById(`preview-${tab.id}`);
@@ -1703,6 +1888,8 @@ document.addEventListener('DOMContentLoaded', () => {
     commandPalette.register('Insert Image', '', () => tabManager.wrapSelection('![', '](image.jpg)'));
     commandPalette.register('Toggle Zen Mode', 'F11', () => zenMode.toggle());
     commandPalette.register('Writing Analytics', 'Ctrl+Shift+A', () => getShowAnalyticsModal()(tabManager));
+    commandPalette.register('Load Custom Preview CSS', '', triggerLoadCustomCSS);
+    commandPalette.register('Clear Custom Preview CSS', '', triggerClearCustomCSS);
 
     // Keyboard shortcuts
     document.addEventListener('keydown', (e) => {
@@ -1728,27 +1915,9 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // Initialize CodeMirror for the initial tab (tab 1)
-    const initialEditorContainer = document.getElementById('editor-cm-1');
-    if (initialEditorContainer) {
-        const tab = tabManager.tabs.get(1);
-        const isDark = document.body.className.includes('dark');
-        tab.editorView = createEditor(initialEditorContainer, {
-            content: tab.content,
-            onChange: (newContent) => {
-                tab.content = newContent;
-                tab.isDirty = true;
-                tabManager.updatePreview(tab.id);
-                tabManager.updateWordCount();
-                tabManager.updateTabBar();
-                if (outlinePanelContainer?._refreshOutline) outlinePanelContainer._refreshOutline();
-            },
-            onUpdate: (view) => {
-                tabManager.updateCursorPosition(view);
-                if (outlinePanelContainer?._setActiveHeading) outlinePanelContainer._setActiveHeading(view.state.doc.lineAt(view.state.selection.main.head).number);
-            },
-            isDark,
-            showLineNumbers: tabManager.showLineNumbers,
-        });
+    const initialTab = tabManager.tabs.get(1);
+    if (initialTab) {
+        tabManager.ensureEditor(initialTab);
     }
 
     // Request current theme
@@ -1772,6 +1941,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }, 30000);
 });
 
+// IPC event listeners
 // IPC event listeners
 ipcRenderer.on('file-new', () => {
     tabManager.createNewTab();
@@ -1779,8 +1949,20 @@ ipcRenderer.on('file-new', () => {
 
 ipcRenderer.on('file-opened', (event, data) => {
     console.log('[RENDERER] file-opened received:', data.path, 'content length:', data.content.length);
+    console.log('[RENDERER] activeTabId before openFile:', tabManager.activeTabId);
+    // Diagnostic: check library state
+    console.log('[RENDERER] Library state:', {
+        marked: typeof marked,
+        DOMPurify: typeof DOMPurify,
+        markedParse: typeof marked?.parse,
+        dompurifySanitize: typeof DOMPurify?.sanitize,
+        tabManagerExists: !!tabManager
+    });
     if (tabManager) {
         tabManager.openFile(data.path, data.content);
+        console.log('[RENDERER] activeTabId after openFile:', tabManager.activeTabId);
+        const tab = tabManager.tabs.get(tabManager.activeTabId);
+        console.log('[RENDERER] tab state:', { id: tab?.id, hasEditorView: !!tab?.editorView, contentLength: tab?.content?.length });
     } else {
         console.error('[RENDERER] tabManager not initialized!');
     }
@@ -1859,6 +2041,49 @@ ipcRenderer.on('redo', () => {
     }
 });
 
+// Custom Preview CSS event handlers and trigger helpers
+function applyCustomPreviewCSS(cssContent) {
+    let styleTag = document.getElementById('custom-preview-style');
+    if (!styleTag) {
+        styleTag = document.createElement('style');
+        styleTag.id = 'custom-preview-style';
+        document.head.appendChild(styleTag);
+    }
+    const scopedCSS = scopeCSS(cssContent, '.preview-content');
+    styleTag.textContent = scopedCSS;
+}
+
+async function triggerLoadCustomCSS() {
+    try {
+        const result = await window.electronAPI.invoke('select-custom-css');
+        if (result) {
+            console.log('[RENDERER] Custom CSS loaded from:', result.path);
+            localStorage.setItem('customPreviewCSSPath', result.path);
+            localStorage.setItem('customPreviewCSSContent', result.content);
+            applyCustomPreviewCSS(result.content);
+            notifyUser('Custom preview stylesheet applied successfully.', 'success');
+        }
+    } catch (err) {
+        console.error('[RENDERER] Error loading custom CSS:', err);
+        notifyUser('Failed to load custom CSS stylesheet.', 'error');
+    }
+}
+
+function triggerClearCustomCSS() {
+    localStorage.removeItem('customPreviewCSSPath');
+    localStorage.removeItem('customPreviewCSSContent');
+    const styleTag = document.getElementById('custom-preview-style');
+    if (styleTag) {
+        styleTag.remove();
+    }
+    notifyUser('Custom preview stylesheet cleared.', 'info');
+}
+
+ipcRenderer.on('load-custom-css', triggerLoadCustomCSS);
+ipcRenderer.on('clear-custom-css', triggerClearCustomCSS);
+
+
+
 // Font size adjustment
 let currentFontSize = parseInt(localStorage.getItem('fontSize')) || 15;
 
@@ -1978,13 +2203,39 @@ function initializeExportForm(format) {
     document.getElementById('export-citeproc').checked = false;
     document.getElementById('export-toc-depth').value = 3;
 
-    // PDF-specific fields
+    // Toggle and reset PDF-specific fields
+    const pdfOnly = document.querySelector('.pdf-only');
+    if (pdfOnly) {
+        pdfOnly.style.display = (format === 'pdf') ? 'block' : 'none';
+    }
     if (format === 'pdf') {
         document.getElementById('pdf-engine').value = 'xelatex';
         document.getElementById('pdf-geometry').value = 'margin=1in';
         document.getElementById('custom-geometry').style.display = 'none';
     }
 
+    // Toggle and reset Reveal.js-specific fields
+    const revealjsOnly = document.querySelector('.revealjs-only');
+    if (revealjsOnly) {
+        revealjsOnly.style.display = (format === 'revealjs') ? 'block' : 'none';
+    }
+    const revealTheme = document.getElementById('reveal-theme');
+    if (revealTheme) revealTheme.value = 'black';
+    const revealTransition = document.getElementById('reveal-transition');
+    if (revealTransition) revealTransition.value = 'slide';
+    const revealSpeed = document.getElementById('reveal-speed');
+    if (revealSpeed) revealSpeed.value = 'default';
+    const revealSlideNumber = document.getElementById('reveal-slide-number');
+    if (revealSlideNumber) revealSlideNumber.checked = false;
+    const revealControls = document.getElementById('reveal-controls');
+    if (revealControls) revealControls.checked = true;
+    const revealProgress = document.getElementById('reveal-progress');
+    if (revealProgress) revealProgress.checked = true;
+    const revealHistory = document.getElementById('reveal-history');
+    if (revealHistory) revealHistory.checked = true;
+    const revealCenter = document.getElementById('reveal-center');
+    if (revealCenter) revealCenter.checked = true;
+
     // Clear bibliography fields
     document.getElementById('bibliography-file').value = '';
     document.getElementById('csl-file').value = '';
@@ -2044,6 +2295,18 @@ function collectExportOptions() {
             }
         }
 
+        // Reveal.js-specific options
+        if (currentExportFormat === 'revealjs') {
+            options.revealTheme = document.getElementById('reveal-theme').value;
+            options.revealTransition = document.getElementById('reveal-transition').value;
+            options.revealTransitionSpeed = document.getElementById('reveal-speed').value;
+            options.revealSlideNumber = document.getElementById('reveal-slide-number').checked;
+            options.revealControls = document.getElementById('reveal-controls').checked;
+            options.revealProgress = document.getElementById('reveal-progress').checked;
+            options.revealHistory = document.getElementById('reveal-history').checked;
+            options.revealCenter = document.getElementById('reveal-center').checked;
+        }
+
         // Bibliography
         const bibFile = document.getElementById('bibliography-file').value.trim();
         const cslFile = document.getElementById('csl-file').value.trim();
@@ -2054,6 +2317,15 @@ function collectExportOptions() {
         if (currentExportFormat === 'pdf') {
             options.pdfEngine = 'xelatex';
             options.geometry = 'margin=1in';
+        } else if (currentExportFormat === 'revealjs') {
+            options.revealTheme = 'black';
+            options.revealTransition = 'slide';
+            options.revealTransitionSpeed = 'default';
+            options.revealSlideNumber = false;
+            options.revealControls = true;
+            options.revealProgress = true;
+            options.revealHistory = true;
+            options.revealCenter = true;
         }
     }
 
@@ -2971,6 +3243,18 @@ function showPDFEditorDialog(operation, openedFilePath = null) {
         section.classList.add('hidden');
     });
 
+    // Hide visual thumbnail sidebar by default
+    const sidebar = document.getElementById('pdf-thumbnail-sidebar');
+    if (sidebar) {
+        sidebar.classList.add('hidden');
+    }
+    const body = document.querySelector('.pdf-editor-body');
+    if (body) {
+        body.classList.remove('side-by-side');
+    }
+    pdfDocInstance = null;
+    pdfPreviewState = { pages: [], filePath: '' };
+
     // Show the appropriate section and set title
     let sectionId, titleText;
     switch (operation) {
@@ -3004,7 +3288,11 @@ function showPDFEditorDialog(operation, openedFilePath = null) {
             titleText = 'Rotate Pages';
             if (openedFilePath) {
                 const rotateInput = document.getElementById('rotate-input-path');
-                if (rotateInput) rotateInput.value = openedFilePath;
+                if (rotateInput) {
+                    rotateInput.value = openedFilePath;
+                    // Trigger thumbnail generation
+                    setTimeout(() => onPDFFileSelected('rotate-input-path', openedFilePath), 50);
+                }
             }
             break;
         case 'delete':
@@ -3012,7 +3300,11 @@ function showPDFEditorDialog(operation, openedFilePath = null) {
             titleText = 'Delete Pages';
             if (openedFilePath) {
                 const deleteInput = document.getElementById('delete-input-path');
-                if (deleteInput) deleteInput.value = openedFilePath;
+                if (deleteInput) {
+                    deleteInput.value = openedFilePath;
+                    // Trigger thumbnail generation
+                    setTimeout(() => onPDFFileSelected('delete-input-path', openedFilePath), 50);
+                }
             }
             break;
         case 'reorder':
@@ -3020,7 +3312,11 @@ function showPDFEditorDialog(operation, openedFilePath = null) {
             titleText = 'Reorder Pages';
             if (openedFilePath) {
                 const reorderInput = document.getElementById('reorder-input-path');
-                if (reorderInput) reorderInput.value = openedFilePath;
+                if (reorderInput) {
+                    reorderInput.value = openedFilePath;
+                    // Trigger thumbnail generation
+                    setTimeout(() => onPDFFileSelected('reorder-input-path', openedFilePath), 50);
+                }
             }
             break;
         case 'watermark':
@@ -3181,6 +3477,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         const file = e.target.files[0];
                         if (file) {
                             document.getElementById(button.inputId).value = file.path;
+                            onPDFFileSelected(button.inputId, file.path);
                         }
                     };
                     input.click();
@@ -3190,6 +3487,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         const file = e.target.files[0];
                         if (file) {
                             document.getElementById(button.inputId).value = file.path;
+                            onPDFFileSelected(button.inputId, file.path);
                         }
                     };
                     input.click();
@@ -3334,7 +3632,7 @@ function showPDFValidationMessage(message, focusSelector = null) {
 // Process PDF Operation
 function processPDFOperation() {
     const operation = currentPDFOperation;
-    let operationData = { operation };
+    const operationData = { operation };
 
     try {
         switch (operation) {
@@ -4124,7 +4422,7 @@ function textToASCII(text, style) {
         lines[i] = '';
     }
 
-    for (let char of upperText) {
+    for (const char of upperText) {
         const charLines = font.chars[char] || font.chars[' '];
         if (charLines) {
             for (let i = 0; i < font.height; i++) {
@@ -4162,7 +4460,7 @@ function createASCIIBox(text, style, padding) {
     }
 
     // Content lines
-    for (let line of lines) {
+    for (const line of lines) {
         const paddedLine = line.padEnd(maxLength, ' ');
         result += chars.v + ' '.repeat(padding) + paddedLine + ' '.repeat(padding) + chars.v + '\n';
     }
@@ -4798,3 +5096,224 @@ ipcRenderer.on('show-video-tool', (event, tool) => {
         { duration: 5000 }
     );
 });
+
+// ============================================
+// PDF EDITOR VISUAL PAGE SIDEBAR HANDLERS
+// ============================================
+let pdfDocInstance = null;
+let pdfPreviewState = { pages: [], filePath: '' };
+
+function onPDFFileSelected(inputId, filePath) {
+    const eligibleInputs = ['rotate-input-path', 'delete-input-path', 'reorder-input-path'];
+    if (!eligibleInputs.includes(inputId)) {
+        return;
+    }
+
+    const sidebar = document.getElementById('pdf-thumbnail-sidebar');
+    if (sidebar) {
+        sidebar.classList.remove('hidden');
+    }
+    const body = document.querySelector('.pdf-editor-body');
+    if (body) {
+        body.classList.add('side-by-side');
+    }
+
+    loadPDFThumbnails(filePath);
+}
+
+async function loadPDFThumbnails(filePath) {
+    const grid = document.getElementById('pdf-thumbnail-grid');
+    if (!grid) return;
+
+    // Reset previous inputs
+    const rotateInput = document.getElementById('rotate-pages');
+    if (rotateInput) rotateInput.value = '';
+    const deleteInput = document.getElementById('delete-pages');
+    if (deleteInput) deleteInput.value = '';
+    const reorderInput = document.getElementById('reorder-pages');
+    if (reorderInput) reorderInput.value = '';
+
+    grid.innerHTML = '<div class="loading-thumbnails">Loading page thumbnails...</div>';
+
+    try {
+        const pdfjs = getPdfjsLib();
+        const loadingTask = pdfjs.getDocument(filePath);
+        pdfDocInstance = await loadingTask.promise;
+
+        pdfPreviewState.filePath = filePath;
+        pdfPreviewState.pages = [];
+
+        for (let i = 1; i <= pdfDocInstance.numPages; i++) {
+            pdfPreviewState.pages.push({
+                originalPageNum: i,
+                rotation: 0,
+                isDeleted: false
+            });
+        }
+
+        renderThumbnailGrid();
+    } catch (err) {
+        console.error('Error loading PDF thumbnails:', err);
+        grid.innerHTML = '<div class="thumbnail-error">Failed to load PDF thumbnails.</div>';
+    }
+}
+
+function renderThumbnailGrid() {
+    const grid = document.getElementById('pdf-thumbnail-grid');
+    if (!grid || !pdfDocInstance) return;
+
+    grid.innerHTML = '';
+
+    pdfPreviewState.pages.forEach((pageInfo, index) => {
+        const card = document.createElement('div');
+        card.className = 'pdf-thumbnail-card';
+        if (pageInfo.isDeleted) {
+            card.classList.add('marked-delete');
+        }
+
+        const heading = document.createElement('div');
+        heading.className = 'pdf-thumbnail-header';
+        heading.innerHTML = `<span class="badge">Page ${pageInfo.originalPageNum}</span>`;
+
+        const canvasContainer = document.createElement('div');
+        canvasContainer.className = 'canvas-container';
+
+        const canvas = document.createElement('canvas');
+        canvas.className = 'pdf-thumbnail-canvas';
+        if (pageInfo.rotation > 0) {
+            canvas.classList.add('rot' + pageInfo.rotation);
+        }
+        canvasContainer.appendChild(canvas);
+
+        // Render thumbnail canvas
+        renderThumbnail(pdfDocInstance, pageInfo.originalPageNum, canvas, pageInfo.rotation);
+
+        const controlsRow = document.createElement('div');
+        controlsRow.className = 'pdf-thumbnail-controls';
+
+        // Rotate Button
+        const rotateBtn = document.createElement('button');
+        rotateBtn.type = 'button';
+        rotateBtn.className = 'btn-rotate-thumbnail';
+        rotateBtn.innerHTML = '↻ Rotate 90°';
+        rotateBtn.addEventListener('click', () => {
+            pageInfo.rotation = (pageInfo.rotation + 90) % 360;
+            canvas.className = 'pdf-thumbnail-canvas';
+            if (pageInfo.rotation > 0) {
+                canvas.classList.add('rot' + pageInfo.rotation);
+            }
+            renderThumbnail(pdfDocInstance, pageInfo.originalPageNum, canvas, pageInfo.rotation);
+            syncRotateInput();
+        });
+
+        // Delete Checkbox
+        const deleteLabel = document.createElement('label');
+        deleteLabel.className = 'delete-thumbnail-checkbox';
+
+        const deleteChk = document.createElement('input');
+        deleteChk.type = 'checkbox';
+        deleteChk.checked = pageInfo.isDeleted;
+        deleteChk.addEventListener('change', (e) => {
+            pageInfo.isDeleted = e.target.checked;
+            card.classList.toggle('marked-delete', pageInfo.isDeleted);
+            syncDeleteInput();
+        });
+        deleteLabel.appendChild(deleteChk);
+        deleteLabel.appendChild(document.createTextNode(' Delete'));
+
+        // Reorder buttons
+        const reorderDiv = document.createElement('div');
+        reorderDiv.className = 'pdf-thumbnail-reorder';
+
+        const leftBtn = document.createElement('button');
+        leftBtn.type = 'button';
+        leftBtn.className = 'btn-reorder-left';
+        leftBtn.innerHTML = '◀';
+        leftBtn.disabled = (index === 0);
+        leftBtn.addEventListener('click', () => {
+            const temp = pdfPreviewState.pages[index];
+            pdfPreviewState.pages[index] = pdfPreviewState.pages[index - 1];
+            pdfPreviewState.pages[index - 1] = temp;
+            renderThumbnailGrid();
+            syncReorderInput();
+        });
+
+        const rightBtn = document.createElement('button');
+        rightBtn.type = 'button';
+        rightBtn.className = 'btn-reorder-right';
+        rightBtn.innerHTML = '▶';
+        rightBtn.disabled = (index === pdfPreviewState.pages.length - 1);
+        rightBtn.addEventListener('click', () => {
+            const temp = pdfPreviewState.pages[index];
+            pdfPreviewState.pages[index] = pdfPreviewState.pages[index + 1];
+            pdfPreviewState.pages[index + 1] = temp;
+            renderThumbnailGrid();
+            syncReorderInput();
+        });
+
+        reorderDiv.appendChild(leftBtn);
+        reorderDiv.appendChild(rightBtn);
+
+        controlsRow.appendChild(rotateBtn);
+        controlsRow.appendChild(deleteLabel);
+        controlsRow.appendChild(reorderDiv);
+
+        card.appendChild(heading);
+        card.appendChild(canvasContainer);
+        card.appendChild(controlsRow);
+
+        grid.appendChild(card);
+    });
+}
+
+async function renderThumbnail(pdfDoc, originalPageNum, canvasElement, rotation) {
+    try {
+        const page = await pdfDoc.getPage(originalPageNum);
+        const ctx = canvasElement.getContext('2d');
+
+        // Render at a fixed width of 100px
+        const unscaledViewport = page.getViewport({ scale: 1, rotation: 0 });
+        const scale = 100 / unscaledViewport.width;
+        const viewport = page.getViewport({ scale: scale, rotation: 0 });
+
+        canvasElement.width = viewport.width;
+        canvasElement.height = viewport.height;
+
+        await page.render({
+            canvasContext: ctx,
+            viewport: viewport
+        }).promise;
+    } catch (err) {
+        console.error('Error rendering page canvas:', err);
+    }
+}
+
+function syncRotateInput() {
+    const rotatedPages = pdfPreviewState.pages
+        .filter(p => p.rotation > 0)
+        .map(p => p.originalPageNum);
+
+    const rotateInput = document.getElementById('rotate-pages');
+    if (rotateInput) {
+        rotateInput.value = rotatedPages.join(', ');
+    }
+}
+
+function syncDeleteInput() {
+    const deletedPages = pdfPreviewState.pages
+        .filter(p => p.isDeleted)
+        .map(p => p.originalPageNum);
+
+    const deleteInput = document.getElementById('delete-pages');
+    if (deleteInput) {
+        deleteInput.value = deletedPages.join(', ');
+    }
+}
+
+function syncReorderInput() {
+    const order = pdfPreviewState.pages.map(p => p.originalPageNum);
+    const reorderInput = document.getElementById('reorder-pages');
+    if (reorderInput) {
+        reorderInput.value = order.join(', ');
+    }
+}

src/renderer/App.tsx

@@ -0,0 +1,14 @@
+import { AppShell } from './components/layout/AppShell';
+import { ModalLayer } from './components/modals/ModalLayer';
+import { useWelcomeTrigger } from './hooks/use-welcome-trigger';
+
+function App() {
+  useWelcomeTrigger();
+  return (
+    <>
+      <AppShell />
+      <ModalLayer />
+    </>
+  );
+}
+export default App;

src/renderer/components/editor/CodeMirrorEditor.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useRef } from 'react';
+import { EditorState, Compartment } from '@codemirror/state';
+import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection } from '@codemirror/view';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { useTheme } from 'next-themes';
+import { lightTheme, lightHighlight } from './themes/light';
+import { useEditorStore } from '@/stores/editor-store';
+
+interface Props {
+  bufferId: string;
+  initialContent: string;
+  onChange?: (content: string) => void;
+  onCursorChange?: (line: number, column: number) => void;
+}
+
+export function CodeMirrorEditor({ bufferId, initialContent, onChange, onCursorChange }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const themeCompartment = useRef(new Compartment());
+  const { resolvedTheme } = useTheme();
+  const updateContent = useEditorStore((s) => s.updateContent);
+  const setCursor = useEditorStore((s) => s.setCursor);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const state = EditorState.create({
+      doc: initialContent,
+      extensions: [
+        lineNumbers(),
+        highlightActiveLine(),
+        highlightSelectionMatches(),
+        history(),
+        drawSelection(),
+        markdown({ base: markdownLanguage, codeLanguages: [] }),
+        autocompletion(),
+        keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap, ...completionKeymap, indentWithTab]),
+        themeCompartment.current.of(resolvedTheme === 'dark' ? [oneDark] : [lightTheme, lightHighlight]),
+        EditorView.lineWrapping,
+        EditorView.updateListener.of((v) => {
+          if (v.docChanged) {
+            const content = v.state.doc.toString();
+            updateContent(bufferId, content);
+            onChange?.(content);
+          }
+          if (v.selectionSet || v.docChanged) {
+            const head = v.state.selection.main.head;
+            const line = v.state.doc.lineAt(head);
+            const lineNo = line.number;
+            const col = head - line.from + 1;
+            setCursor(bufferId, lineNo, col);
+            onCursorChange?.(lineNo, col);
+          }
+        }),
+      ],
+    });
+    const view = new EditorView({ state, parent: ref.current });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bufferId]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: themeCompartment.current.reconfigure(
+        resolvedTheme === 'dark' ? [oneDark] : [lightTheme, lightHighlight]
+      ),
+    });
+  }, [resolvedTheme]);
+
+  return <div ref={ref} className="h-full overflow-hidden" />;
+}

src/renderer/components/editor/EditorPane.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { CodeMirrorEditor } from './CodeMirrorEditor';
+import { useEditorStore } from '@/stores/editor-store';
+import { usePreviewStore } from '@/stores/preview-store';
+
+export function EditorPane() {
+  const { buffers, activeId } = useEditorStore();
+  const buf = activeId ? buffers.get(activeId) : null;
+  const setPreviewSource = usePreviewStore((s) => s.setSource);
+
+  useEffect(() => {
+    if (buf) setPreviewSource(buf.content);
+  }, [buf?.id, buf?.content, buf, setPreviewSource]);
+
+  if (!buf) {
+    return (
+      <div className="flex h-full items-center justify-center bg-background text-muted-foreground">
+        <p>No file open. Use File → Open to start.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full">
+      <CodeMirrorEditor
+        key={buf.id}
+        bufferId={buf.id}
+        initialContent={buf.content}
+      />
+    </div>
+  );
+}

src/renderer/components/editor/themes/light.ts

@@ -0,0 +1,55 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+const colors = {
+  background: '#ffffff',
+  foreground: '#0d0b09',
+  cursor: '#e5461f',
+  selection: 'rgba(229, 70, 31, 0.15)',
+  gutterBackground: '#fafbfc',
+  gutterForeground: '#7a7878',
+  lineHighlight: 'rgba(0, 0, 0, 0.04)',
+};
+
+export const lightTheme = EditorView.theme(
+  {
+    '&': {
+      backgroundColor: colors.background,
+      color: colors.foreground,
+      height: '100%',
+    },
+    '.cm-content': {
+      caretColor: colors.cursor,
+      fontFamily: 'JetBrains Mono, Fira Code, monospace',
+      fontSize: '13.5px',
+    },
+    '.cm-cursor, .cm-dropCursor': { borderLeftColor: colors.cursor },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
+      backgroundColor: colors.selection,
+    },
+    '.cm-gutters': {
+      backgroundColor: colors.gutterBackground,
+      color: colors.gutterForeground,
+      border: 'none',
+    },
+    '.cm-activeLine': { backgroundColor: colors.lineHighlight },
+    '.cm-activeLineGutter': { backgroundColor: 'transparent', color: '#e5461f' },
+  },
+  { dark: false }
+);
+
+const highlightStyle = HighlightStyle.define([
+  { tag: t.heading1, color: '#0d0b09', fontWeight: '700' },
+  { tag: t.heading2, color: '#0d0b09', fontWeight: '700' },
+  { tag: t.heading3, color: '#464646', fontWeight: '600' },
+  { tag: t.link, color: '#e5461f', textDecoration: 'underline' },
+  { tag: t.url, color: '#e5461f' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strong, fontWeight: '700' },
+  { tag: t.monospace, color: '#c93a18' },
+  { tag: t.list, color: '#0ea5e9' },
+  { tag: t.quote, color: '#7a7878', fontStyle: 'italic' },
+]);
+
+export const lightHighlight = syntaxHighlighting(highlightStyle);

src/renderer/components/layout/AppHeader.tsx

@@ -0,0 +1,70 @@
+import { PanelLeft, PanelRight, Keyboard, Settings, Info } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { useAppStore } from '@/stores/app-store';
+import { useCommandStore } from '@/stores/command-store';
+
+export function AppHeader() {
+  const { sidebarVisible, previewVisible } = useAppStore();
+  const dispatch = useCommandStore((s) => s.dispatch);
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b border-border bg-card/40 px-4 backdrop-blur">
+      <div className="flex items-center gap-3">
+        <div
+          className="h-7 w-7 rounded-md bg-gradient-to-br from-brand to-brand-dark shadow-[var(--shadow-glow-brand)]"
+          aria-label="MarkdownConverter logo"
+        />
+        <h1 className="font-display text-lg font-bold tracking-tight">MarkdownConverter</h1>
+      </div>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Toggle sidebar"
+          aria-pressed={sidebarVisible}
+          data-testid="header-toggle-sidebar"
+          onClick={() => dispatch('view.toggleSidebar')}
+        >
+          <PanelLeft className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Toggle preview"
+          aria-pressed={previewVisible}
+          data-testid="header-toggle-preview"
+          onClick={() => dispatch('view.togglePreview')}
+        >
+          <PanelRight className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Keyboard shortcuts"
+          data-testid="header-shortcuts"
+          onClick={() => dispatch('shortcuts.show')}
+        >
+          <Keyboard className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Settings"
+          onClick={() => dispatch('settings.open')}
+        >
+          <Settings className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="About"
+          onClick={() => dispatch('help.about')}
+        >
+          <Info className="h-4 w-4" />
+        </Button>
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+}

src/renderer/components/layout/AppShell.tsx

@@ -0,0 +1,59 @@
+import { AppHeader } from './AppHeader';
+import { TabBar } from './TabBar';
+import { Toolbar } from './Toolbar';
+import { Breadcrumb } from './Breadcrumb';
+import { StatusBar } from './StatusBar';
+import { EditorPane } from '@/components/editor/EditorPane';
+import { PreviewPane } from '@/components/preview/PreviewPane';
+import { Sidebar } from '@/components/sidebar/Sidebar';
+import { useAppStore } from '@/stores/app-store';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
+import { useFileShortcuts } from '@/hooks/use-file-shortcuts';
+import { useRestoreLastFolder } from '@/hooks/use-restore-last-folder';
+import { useRegisterMenuCommands, useBridgeNativeMenu } from '@/lib/commands/register-menu-commands';
+
+export function AppShell() {
+  useFileShortcuts();
+  useRestoreLastFolder();
+  useRegisterMenuCommands();
+  useBridgeNativeMenu();
+  const { sidebarVisible, previewVisible, paneSizes, setPaneSizes } = useAppStore();
+
+  return (
+    <div className="flex h-screen flex-col bg-background text-foreground">
+      <AppHeader />
+      <TabBar />
+      <Toolbar />
+      <Breadcrumb />
+      <main className="flex-1 overflow-hidden">
+        <ResizablePanelGroup
+          direction="horizontal"
+          onLayout={(sizes) => setPaneSizes({ sidebar: sizes[0], editor: sizes[1], preview: sizes[2] })}
+        >
+          {sidebarVisible && (
+            <>
+              <ResizablePanel defaultSize={paneSizes.sidebar} minSize={15} maxSize={40}>
+                <aside className="h-full border-r border-border bg-card/10 p-3 text-sm text-muted-foreground">
+                  <Sidebar />
+                </aside>
+              </ResizablePanel>
+              <ResizableHandle />
+            </>
+          )}
+          <ResizablePanel defaultSize={previewVisible ? paneSizes.editor : 100} minSize={20}>
+            <EditorPane />
+          </ResizablePanel>
+          {previewVisible && (
+            <>
+              <ResizableHandle />
+              <ResizablePanel defaultSize={paneSizes.preview} minSize={20}>
+                <PreviewPane />
+              </ResizablePanel>
+            </>
+          )}
+        </ResizablePanelGroup>
+      </main>
+      <StatusBar />
+    </div>
+  );
+}

src/renderer/components/layout/Breadcrumb.tsx

@@ -0,0 +1,7 @@
+export function Breadcrumb() {
+  return (
+    <nav aria-label="File path" className="flex h-7 items-center border-b border-border bg-card/10 px-3 text-xs text-muted-foreground">
+      <span>No file selected</span>
+    </nav>
+  );
+}

src/renderer/components/layout/StatusBar.tsx

@@ -0,0 +1,25 @@
+import { useEditorStore } from '@/stores/editor-store';
+
+function countWords(text: string): number {
+  return text.trim().length === 0 ? 0 : text.trim().split(/\s+/).length;
+}
+
+export function StatusBar() {
+  const { buffers, activeId } = useEditorStore();
+  const buf = activeId ? buffers.get(activeId) : null;
+  const wordCount = buf ? countWords(buf.content) : 0;
+  const cursor = buf?.cursor ?? { line: 1, column: 1 };
+
+  return (
+    <footer className="flex h-7 items-center justify-between border-t border-border bg-card/20 px-3 text-xs text-muted-foreground">
+      <div className="flex items-center gap-4">
+        <span>{wordCount} words</span>
+        <span>UTF-8</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <span>Ln {cursor.line}, Col {cursor.column}</span>
+        <span>Markdown</span>
+      </div>
+    </footer>
+  );
+}

src/renderer/components/layout/TabBar.tsx

@@ -0,0 +1,127 @@
+import { X } from 'lucide-react';
+import {
+  DndContext,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useFileStore, type OpenTab } from '@/stores/file-store';
+import { cn } from '@/lib/utils';
+
+function SortableTab({
+  tab,
+  isActive,
+  onSelect,
+  onClose,
+}: {
+  tab: OpenTab;
+  isActive: boolean;
+  onSelect: (id: string) => void;
+  onClose: (id: string) => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: tab.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      role="tab"
+      aria-selected={isActive}
+      aria-current={isActive ? 'page' : undefined}
+      data-testid={`tab-${tab.id}`}
+      className={cn(
+        'group flex h-full cursor-pointer select-none items-center gap-1 border-r border-border px-3 text-xs transition-colors',
+        isActive
+          ? 'bg-accent text-accent-foreground'
+          : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
+      )}
+      onClick={() => onSelect(tab.id)}
+    >
+      {tab.dirty && (
+        <span
+          className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary"
+          aria-label="Unsaved changes"
+        />
+      )}
+      <span className="max-w-[120px] truncate">{tab.title}</span>
+      <button
+        aria-label={`Close ${tab.title}`}
+        className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center rounded opacity-0 group-hover:opacity-100 hover:bg-muted-foreground/20 transition-opacity"
+        onPointerDown={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose(tab.id);
+        }}
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}
+
+export function TabBar() {
+  const openTabs = useFileStore((s) => s.openTabs);
+  const activeTabId = useFileStore((s) => s.activeTabId);
+  const setActiveTab = useFileStore((s) => s.setActiveTab);
+  const closeTab = useFileStore((s) => s.closeTab);
+  const reorderTabs = useFileStore((s) => s.reorderTabs);
+
+  // Require a small drag distance before activating — so a click on the tab
+  // body still triggers `onClick` (dnd-kit's PointerSensor default is 0).
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+
+  if (openTabs.length === 0) {
+    return (
+      <div className="flex h-9 items-center border-b border-border bg-card/20 px-3 text-xs text-muted-foreground">
+        <span>No files open</span>
+      </div>
+    );
+  }
+
+  function handleDragEnd(e: DragEndEvent) {
+    const { active, over } = e;
+    if (!over || active.id === over.id) return;
+    const fromIndex = openTabs.findIndex((t) => t.id === active.id);
+    const toIndex = openTabs.findIndex((t) => t.id === over.id);
+    if (fromIndex === -1 || toIndex === -1) return;
+    reorderTabs(fromIndex, toIndex);
+  }
+
+  return (
+    <div className="flex h-9 items-center border-b border-border bg-card/20 overflow-x-auto">
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={openTabs.map((t) => t.id)} strategy={horizontalListSortingStrategy}>
+          <div className="flex h-full items-center px-1">
+            {openTabs.map((tab) => (
+              <SortableTab
+                key={tab.id}
+                tab={tab}
+                isActive={tab.id === activeTabId}
+                onSelect={setActiveTab}
+                onClose={closeTab}
+              />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+}

src/renderer/components/layout/Toolbar.tsx

@@ -0,0 +1,77 @@
+import { Bold, Italic, List, ListOrdered, Code, Link as LinkIcon, PanelLeft, PanelRight, Save, FolderOpen, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useCommandStore } from '@/stores/command-store';
+import { useAppStore } from '@/stores/app-store';
+
+export function Toolbar() {
+  const dispatch = useCommandStore((s) => s.dispatch);
+  const { sidebarVisible, previewVisible } = useAppStore();
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Main toolbar"
+      className="flex h-10 items-center gap-1 border-b border-border bg-card/10 px-3"
+    >
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label="Open file"
+        data-testid="toolbar-open-file"
+        onClick={() => dispatch('file.open')}
+      >
+        <FileText className="h-4 w-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label="Open folder"
+        data-testid="toolbar-open-folder"
+        onClick={() => dispatch('file.openFolder')}
+      >
+        <FolderOpen className="h-4 w-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label="Save"
+        data-testid="toolbar-save"
+        onClick={() => dispatch('file.save')}
+      >
+        <Save className="h-4 w-4" />
+      </Button>
+
+      <div className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
+
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label="Toggle sidebar"
+        aria-pressed={sidebarVisible}
+        data-testid="toolbar-toggle-sidebar"
+        onClick={() => dispatch('view.toggleSidebar')}
+      >
+        <PanelLeft className="h-4 w-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label="Toggle preview"
+        aria-pressed={previewVisible}
+        data-testid="toolbar-toggle-preview"
+        onClick={() => dispatch('view.togglePreview')}
+      >
+        <PanelRight className="h-4 w-4" />
+      </Button>
+
+      <div className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
+
+      <Button variant="ghost" size="icon" aria-label="Bold" disabled><Bold className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Italic" disabled><Italic className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Unordered list" disabled><List className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Ordered list" disabled><ListOrdered className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Code" disabled><Code className="h-4 w-4" /></Button>
+      <Button variant="ghost" size="icon" aria-label="Link" disabled><LinkIcon className="h-4 w-4" /></Button>
+    </div>
+  );
+}

src/renderer/components/modals/AboutDialog.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { ipc } from '@/lib/ipc';
+import { useAppStore } from '@/stores/app-store';
+
+export function AboutDialog() {
+  const closeModal = useAppStore((s) => s.closeModal);
+  const isOpen = useAppStore((s) => s.modal.kind) === 'about';
+  const [version, setVersion] = useState<string>('…');
+
+  useEffect(() => {
+    ipc.app.getVersion().then((r) => {
+      if (r.ok && typeof r.data === 'string') setVersion(r.data);
+    });
+  }, []);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(o) => !o && closeModal()}>
+      <DialogContent aria-describedby="about-desc">
+        <DialogHeader>
+          <DialogTitle>About MarkdownConverter</DialogTitle>
+          <DialogDescription id="about-desc">
+            Professional Markdown editor and universal file converter.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 text-sm text-muted-foreground">
+          <p>Version: {version}</p>
+          <p>
+            <a
+              href="https://github.com/amitwh/markdown-converter"
+              className="text-brand hover:underline"
+              onClick={(e) => {
+                e.preventDefault();
+                ipc.app.openExternal('https://github.com/amitwh/markdown-converter');
+              }}
+            >
+              GitHub repository
+            </a>
+          </p>
+          <p className="text-xs">© ConcreteInfo. Licensed under MIT.</p>
+        </div>
+        <DialogFooter>
+          <Button onClick={closeModal}>Close</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/renderer/components/modals/AboutSettings.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { ipc } from '@/lib/ipc';
+
+export function AboutSettings() {
+  const [version, setVersion] = useState('…');
+
+  useEffect(() => {
+    ipc.app.getVersion().then((r) => {
+      if (r.ok && typeof r.data === 'string') setVersion(r.data);
+    });
+  }, []);
+
+  return (
+    <div className="space-y-3 text-sm">
+      <h3 className="text-base font-semibold">MarkdownConverter</h3>
+      <p className="text-muted-foreground">Version {version}</p>
+      <p>
+        <a
+          href="https://github.com/amitwh/markdown-converter"
+          className="text-brand hover:underline"
+          onClick={(e) => { e.preventDefault(); ipc.app.openExternal('https://github.com/amitwh/markdown-converter'); }}
+        >
+          GitHub repository
+        </a>
+      </p>
+      <p>
+        <a
+          href="https://concreteinfo.co.in"
+          className="text-brand hover:underline"
+          onClick={(e) => { e.preventDefault(); ipc.app.openExternal('https://concreteinfo.co.in'); }}
+        >
+          ConcreteInfo
+        </a>
+      </p>
+      <p className="text-xs text-muted-foreground">© ConcreteInfo. Licensed under MIT.</p>
+    </div>
+  );
+}

src/renderer/components/modals/ConfirmDialog.tsx

@@ -0,0 +1,36 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useAppStore, type ConfirmProps } from '@/stores/app-store';
+
+export function ConfirmDialog(props: ConfirmProps) {
+  const closeModal = useAppStore((s) => s.closeModal);
+  const { title, body, confirmLabel = 'Confirm', cancelLabel = 'Cancel', destructive, onConfirm, onCancel } = props;
+
+  const handleConfirm = async () => {
+    await onConfirm();
+    closeModal();
+  };
+  const handleCancel = () => {
+    onCancel?.();
+    closeModal();
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && handleCancel()}>
+      <DialogContent aria-describedby="confirm-body">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription id="confirm-body">{body}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" onClick={handleCancel}>
+            {cancelLabel}
+          </Button>
+          <Button variant={destructive ? 'destructive' : 'default'} onClick={handleConfirm}>
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/renderer/components/modals/EditorSettings.tsx

@@ -0,0 +1,41 @@
+import { useSettingsStore } from '@/stores/settings-store';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+
+export function EditorSettings() {
+  const { fontSize, tabSize, lineNumbers, wordWrap, minimap, setSetting } = useSettingsStore();
+
+  return (
+    <div className="space-y-5 text-sm">
+      <div>
+        <Label htmlFor="editor-font-size">Font size: {fontSize}px</Label>
+        <Slider id="editor-font-size" min={10} max={24} step={1} value={[fontSize]} onValueChange={([v]) => setSetting('fontSize', v)} />
+      </div>
+      <div>
+        <Label htmlFor="editor-tab-size">Tab size</Label>
+        <Select value={String(tabSize)} onValueChange={(v) => setSetting('tabSize', Number(v) as 2 | 4 | 8)}>
+          <SelectTrigger id="editor-tab-size" aria-label="Tab size"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="2">2 spaces</SelectItem>
+            <SelectItem value="4">4 spaces</SelectItem>
+            <SelectItem value="8">8 spaces</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <label className="flex items-center justify-between">
+        <span>Line numbers</span>
+        <Switch checked={lineNumbers} onCheckedChange={(c) => setSetting('lineNumbers', c)} aria-label="Line numbers" />
+      </label>
+      <label className="flex items-center justify-between">
+        <span>Word wrap</span>
+        <Switch checked={wordWrap} onCheckedChange={(c) => setSetting('wordWrap', c)} aria-label="Word wrap" />
+      </label>
+      <label className="flex items-center justify-between">
+        <span>Minimap</span>
+        <Switch checked={minimap} onCheckedChange={(c) => setSetting('minimap', c)} aria-label="Minimap" />
+      </label>
+    </div>
+  );
+}

src/renderer/components/modals/ExportBatchDialog.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useAppStore } from '@/stores/app-store';
+import { ipc } from '@/lib/ipc';
+import { ExportDialogFooter } from './ExportDialogFooter';
+
+const extFor = (format: 'pdf' | 'docx' | 'html' | 'png') =>
+  format === 'pdf' ? '.pdf' : format === 'docx' ? '.docx' : format === 'png' ? '.png' : '.html';
+
+export function ExportBatchDialog({ sourcePaths }: { sourcePaths: string[] }) {
+  const closeModal = useAppStore((s) => s.closeModal);
+  const [format, setFormat] = useState<'pdf' | 'docx' | 'html' | 'png'>('pdf');
+  const [concurrency, setConcurrency] = useState(4);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    setSubmitting(true);
+    setError(null);
+    const items = sourcePaths.map((p) => ({
+      inputPath: p,
+      outputPath: p.replace(/\.md$/, extFor(format)),
+    }));
+    const result = await ipc.export.batch(items, { format, concurrency });
+    if (!result.ok) {
+      setError(result.error.message);
+      setSubmitting(false);
+    } else {
+      closeModal();
+    }
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && closeModal()}>
+      <DialogContent aria-describedby="batch-desc">
+        <DialogHeader>
+          <DialogTitle>Batch export</DialogTitle>
+          <DialogDescription id="batch-desc">{sourcePaths.length} files</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3 text-sm">
+          <div>
+            <Label htmlFor="batch-format">Format</Label>
+            <Select value={format} onValueChange={(v) => setFormat(v as any)}>
+              <SelectTrigger id="batch-format" aria-label="Format"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="pdf">PDF</SelectItem>
+                <SelectItem value="docx">DOCX</SelectItem>
+                <SelectItem value="html">HTML</SelectItem>
+                <SelectItem value="png">PNG</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label htmlFor="batch-concurrency">Concurrency</Label>
+            <Select value={String(concurrency)} onValueChange={(v) => setConcurrency(Number(v))}>
+              <SelectTrigger id="batch-concurrency" aria-label="Concurrency"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {[1, 2, 4, 8, 16].map((n) => (
+                  <SelectItem key={n} value={String(n)}>{n}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="max-h-40 overflow-auto rounded border border-border bg-card/20 p-2 text-xs">
+            {sourcePaths.map((p) => <div key={p} className="truncate">{p}</div>)}
+          </div>
+          {error && (
+            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
+              {error}
+            </div>
+          )}
+        </div>
+        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
+      </DialogContent>
+    </Dialog>
+  );
+}

src/renderer/components/modals/ExportDialogFooter.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@/components/ui/button';
+import { DialogFooter } from '@/components/ui/dialog';
+
+interface Props {
+  onCancel: () => void;
+  onSubmit: () => void;
+  submitting: boolean;
+  submitLabel: string;
+  submitDisabled?: boolean;
+}
+
+export function ExportDialogFooter({ onCancel, onSubmit, submitting, submitLabel, submitDisabled }: Props) {
+  return (
+    <DialogFooter>
+      <Button variant="ghost" onClick={onCancel} disabled={submitting}>
+        Cancel
+      </Button>
+      <Button onClick={onSubmit} disabled={submitting || submitDisabled}>
+        {submitting ? 'Exporting…' : submitLabel}
+      </Button>
+    </DialogFooter>
+  );
+}

src/renderer/components/modals/ExportDocxDialog.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useAppStore } from '@/stores/app-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import { useExportSource } from '@/hooks/use-export-source';
+import { ipc } from '@/lib/ipc';
+import { ExportDialogFooter } from './ExportDialogFooter';
+
+export function ExportDocxDialog({ sourcePath }: { sourcePath: string }) {
+  const closeModal = useAppStore((s) => s.closeModal);
+  const { docxTemplate, renderTablesAsAscii } = useSettingsStore();
+  const source = useExportSource();
+  const [template, setTemplate] = useState<'standard' | 'minimal' | 'modern'>(docxTemplate);
+  const [ascii, setAscii] = useState(renderTablesAsAscii);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    if (!source) { setError('No file open.'); return; }
+    setSubmitting(true);
+    setError(null);
+    const result = await ipc.export.docx({
+      inputPath: source.path,
+      outputPath: source.path.replace(/\.md$/, '.docx'),
+      template,
+      renderTablesAsAscii: ascii,
+    } as any);
+    if (!result.ok) {
+      setError(result.error.message);
+      setSubmitting(false);
+    } else {
+      closeModal();
+    }
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && closeModal()}>
+      <DialogContent aria-describedby="docx-desc">
+        <DialogHeader>
+          <DialogTitle>Export to DOCX</DialogTitle>
+          <DialogDescription id="docx-desc">{sourcePath}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3 text-sm">
+          <div>
+            <Label htmlFor="docx-template">Template</Label>
+            <Select value={template} onValueChange={(v) => setTemplate(v as any)}>
+              <SelectTrigger id="docx-template" aria-label="Template"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="standard">Standard</SelectItem>
+                <SelectItem value="minimal">Minimal</SelectItem>
+                <SelectItem value="modern">Modern</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Bundled with the app. Standard is the default; Modern adds a colored cover page.
+            </p>
+          </div>
+          <label className="flex items-center gap-2">
+            <Checkbox checked={ascii} onCheckedChange={(c) => setAscii(!!c)} aria-label="ASCII tables" />
+            Render tables as ASCII
+          </label>
+          {error && (
+            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
+              {error}
+            </div>
+          )}
+        </div>
+        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
+      </DialogContent>
+    </Dialog>
+  );
+}

src/renderer/components/modals/ExportHtmlDialog.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useAppStore } from '@/stores/app-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import { useExportSource } from '@/hooks/use-export-source';
+import { ipc } from '@/lib/ipc';
+import { ExportDialogFooter } from './ExportDialogFooter';
+
+export function ExportHtmlDialog({ sourcePath }: { sourcePath: string }) {
+  const closeModal = useAppStore((s) => s.closeModal);
+  const { htmlHighlightStyle, renderTablesAsAscii } = useSettingsStore();
+  const source = useExportSource();
+  const [standalone, setStandalone] = useState(true);
+  const [highlight, setHighlight] = useState(htmlHighlightStyle);
+  const [ascii, setAscii] = useState(renderTablesAsAscii);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    if (!source) { setError('No file open.'); return; }
+    setSubmitting(true);
+    setError(null);
+    const result = await ipc.export.html({
+      inputPath: source.path,
+      outputPath: source.path.replace(/\.md$/, '.html'),
+      standalone,
+      highlightStyle: highlight,
+      renderTablesAsAscii: ascii,
+    } as any);
+    if (!result.ok) {
+      setError(result.error.message);
+      setSubmitting(false);
+    } else {
+      closeModal();
+    }
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && closeModal()}>
+      <DialogContent aria-describedby="html-desc">
+        <DialogHeader>
+          <DialogTitle>Export to HTML</DialogTitle>
+          <DialogDescription id="html-desc">{sourcePath}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3 text-sm">
+          <label className="flex items-center gap-2">
+            <Checkbox checked={standalone} onCheckedChange={(c) => setStandalone(!!c)} aria-label="Standalone" />
+            Standalone document (with inline CSS)
+          </label>
+          <div>
+            <Label htmlFor="html-highlight">Syntax highlight style</Label>
+            <Select value={highlight} onValueChange={(v) => setHighlight(v as any)}>
+              <SelectTrigger id="html-highlight" aria-label="Highlight style"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="github">GitHub</SelectItem>
+                <SelectItem value="monokai">Monokai</SelectItem>
+                <SelectItem value="nord">Nord</SelectItem>
+                <SelectItem value="none">None</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <label className="flex items-center gap-2">
+            <Checkbox checked={ascii} onCheckedChange={(c) => setAscii(!!c)} aria-label="ASCII tables" />
+            Render tables as ASCII
+          </label>
+          {error && (
+            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
+              {error}
+            </div>
+          )}
+        </div>
+        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
+      </DialogContent>
+    </Dialog>
+  );
+}

src/renderer/components/modals/ExportPdfDialog.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useAppStore } from '@/stores/app-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import { useExportSource } from '@/hooks/use-export-source';
+import { ipc } from '@/lib/ipc';
+import { ExportDialogFooter } from './ExportDialogFooter';
+
+const MARGIN_MAP = {
+  normal: { top: 25, right: 25, bottom: 25, left: 25 },
+  narrow: { top: 15, right: 15, bottom: 15, left: 15 },
+  wide: { top: 35, right: 35, bottom: 35, left: 35 },
+} as const;
+
+export function ExportPdfDialog({ sourcePath }: { sourcePath: string }) {
+  const closeModal = useAppStore((s) => s.closeModal);
+  const { fontSize, pdfFormat, pdfMargins, pdfEmbedFonts, renderTablesAsAscii } = useSettingsStore();
+  const [format, setFormat] = useState<'letter' | 'a4' | 'legal'>(pdfFormat);
+  const [margins, setMargins] = useState<'normal' | 'narrow' | 'wide'>(pdfMargins);
+  const [embed, setEmbed] = useState(pdfEmbedFonts);
+  const [ascii, setAscii] = useState(renderTablesAsAscii);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const source = useExportSource();
+
+  const handleSubmit = async () => {
+    if (!source) {
+      setError('No file open.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    const result = await ipc.export.pdf({
+      inputPath: source.path,
+      outputPath: source.path.replace(/\.md$/, '.pdf'),
+      format,
+      margins: MARGIN_MAP[margins],
+      embedFonts: embed,
+      renderTablesAsAscii: ascii,
+      fontSize,
+    } as any);
+    if (!result.data?.ok) {
+      setError(result.data?.error?.message ?? 'Export failed');
+      setSubmitting(false);
+    } else {
+      closeModal();
+    }
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && closeModal()}>
+      <DialogContent aria-describedby="pdf-desc">
+        <DialogHeader>
+          <DialogTitle>Export to PDF</DialogTitle>
+          <DialogDescription id="pdf-desc">{sourcePath}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3 text-sm">
+          <div>
+            <Label htmlFor="pdf-format">Format</Label>
+            <Select value={format} onValueChange={(v) => setFormat(v as typeof format)}>
+              <SelectTrigger id="pdf-format" aria-label="Format"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="letter">Letter</SelectItem>
+                <SelectItem value="a4">A4</SelectItem>
+                <SelectItem value="legal">Legal</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label htmlFor="pdf-margins">Margins</Label>
+            <Select value={margins} onValueChange={(v) => setMargins(v as typeof margins)}>
+              <SelectTrigger id="pdf-margins" aria-label="Margins"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="narrow">Narrow</SelectItem>
+                <SelectItem value="normal">Normal</SelectItem>
+                <SelectItem value="wide">Wide</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <label className="flex items-center gap-2">
+            <Checkbox checked={embed} onCheckedChange={(c) => setEmbed(!!c)} aria-label="Embed fonts" />
+            Embed fonts
+          </label>
+          <label className="flex items-center gap-2">
+            <Checkbox checked={ascii} onCheckedChange={(c) => setAscii(!!c)} aria-label="ASCII tables" />
+            Render tables as ASCII
+          </label>
+          {error && (
+            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
+              {error}
+            </div>
+          )}
+        </div>
+        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
+      </DialogContent>
+    </Dialog>
+  );
+}

src/renderer/components/modals/ExportSettings.tsx

@@ -0,0 +1,66 @@
+import { useSettingsStore } from '@/stores/settings-store';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+
+export function ExportSettings() {
+  const { pdfFormat, pdfMargins, pdfEmbedFonts, docxTemplate, htmlHighlightStyle, renderTablesAsAscii, setSetting } = useSettingsStore();
+
+  return (
+    <div className="space-y-5 text-sm">
+      <div>
+        <Label htmlFor="export-pdf-format">Default PDF format</Label>
+        <Select value={pdfFormat} onValueChange={(v) => setSetting('pdfFormat', v as any)}>
+          <SelectTrigger id="export-pdf-format" aria-label="Default PDF format"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="letter">Letter</SelectItem>
+            <SelectItem value="a4">A4</SelectItem>
+            <SelectItem value="legal">Legal</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label htmlFor="export-pdf-margins">Default PDF margins</Label>
+        <Select value={pdfMargins} onValueChange={(v) => setSetting('pdfMargins', v as any)}>
+          <SelectTrigger id="export-pdf-margins" aria-label="Default PDF margins"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="narrow">Narrow</SelectItem>
+            <SelectItem value="normal">Normal</SelectItem>
+            <SelectItem value="wide">Wide</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <label className="flex items-center justify-between">
+        <span>Embed fonts in PDFs</span>
+        <Switch checked={pdfEmbedFonts} onCheckedChange={(c) => setSetting('pdfEmbedFonts', c)} aria-label="Embed fonts" />
+      </label>
+      <div>
+        <Label htmlFor="export-docx-template">Default DOCX template</Label>
+        <Select value={docxTemplate} onValueChange={(v) => setSetting('docxTemplate', v as any)}>
+          <SelectTrigger id="export-docx-template" aria-label="Default DOCX template"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="standard">Standard</SelectItem>
+            <SelectItem value="minimal">Minimal</SelectItem>
+            <SelectItem value="modern">Modern</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label htmlFor="export-html-highlight">Default HTML highlight</Label>
+        <Select value={htmlHighlightStyle} onValueChange={(v) => setSetting('htmlHighlightStyle', v as any)}>
+          <SelectTrigger id="export-html-highlight" aria-label="Default HTML highlight"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="github">GitHub</SelectItem>
+            <SelectItem value="monokai">Monokai</SelectItem>
+            <SelectItem value="nord">Nord</SelectItem>
+            <SelectItem value="none">None</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <label className="flex items-center justify-between">
+        <span>Render tables as ASCII by default</span>
+        <Switch checked={renderTablesAsAscii} onCheckedChange={(c) => setSetting('renderTablesAsAscii', c)} aria-label="ASCII tables by default" />
+      </label>
+    </div>
+  );
+}

src/renderer/components/modals/ModalLayer.tsx

@@ -0,0 +1,33 @@
+import { useAppStore } from '@/stores/app-store';
+import { AboutDialog } from './AboutDialog';
+import { ConfirmDialog } from './ConfirmDialog';
+import { ExportBatchDialog } from './ExportBatchDialog';
+import { ExportDocxDialog } from './ExportDocxDialog';
+import { ExportHtmlDialog } from './ExportHtmlDialog';
+import { ExportPdfDialog } from './ExportPdfDialog';
+import { SettingsSheet } from './SettingsSheet';
+import { WelcomeDialog } from './WelcomeDialog';
+
+export function ModalLayer() {
+  const modal = useAppStore((s) => s.modal);
+  switch (modal.kind) {
+    case null:
+      return null;
+    case 'export-pdf':
+      return <ExportPdfDialog sourcePath={modal.props.sourcePath} />;
+    case 'export-docx':
+      return <ExportDocxDialog sourcePath={modal.props.sourcePath} />;
+    case 'export-html':
+      return <ExportHtmlDialog sourcePath={modal.props.sourcePath} />;
+    case 'export-batch':
+      return <ExportBatchDialog sourcePaths={modal.props.sourcePaths} />;
+    case 'settings':
+      return <SettingsSheet />;
+    case 'about':
+      return <AboutDialog />;
+    case 'welcome':
+      return <WelcomeDialog />;
+    case 'confirm':
+      return <ConfirmDialog {...modal.props} />;
+  }
+}

src/renderer/components/modals/PluginsSettings.tsx

@@ -0,0 +1,14 @@
+import { Sparkles } from 'lucide-react';
+
+export function PluginsSettings() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 py-12 text-center text-muted-foreground">
+      <Sparkles className="h-8 w-8 opacity-50" />
+      <h3 className="text-base font-semibold text-foreground">Coming soon</h3>
+      <p className="max-w-sm text-sm">
+        The plugin system is on the roadmap. You'll be able to extend MarkdownConverter with custom
+        commands, themes, and export formats.
+      </p>
+    </div>
+  );
+}

src/renderer/components/modals/SettingsSheet.tsx

@@ -0,0 +1,45 @@
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import { useAppStore } from '@/stores/app-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import { EditorSettings } from './EditorSettings';
+import { ThemeSettings } from './ThemeSettings';
+import { ExportSettings } from './ExportSettings';
+import { PluginsSettings } from './PluginsSettings';
+import { AboutSettings } from './AboutSettings';
+
+export function SettingsSheet() {
+  const closeModal = useAppStore((s) => s.closeModal);
+  const resetToDefaults = useSettingsStore((s) => s.resetToDefaults);
+
+  return (
+    <Sheet open onOpenChange={(o) => !o && closeModal()}>
+      <SheetContent aria-describedby="settings-desc" side="right" className="w-full sm:max-w-[480px]">
+        <SheetHeader>
+          <SheetTitle>Settings</SheetTitle>
+          <SheetDescription id="settings-desc">Editor, theme, and export preferences</SheetDescription>
+        </SheetHeader>
+        <Tabs defaultValue="editor" className="mt-4">
+          <TabsList className="grid w-full grid-cols-5">
+            <TabsTrigger value="editor">Editor</TabsTrigger>
+            <TabsTrigger value="theme">Theme</TabsTrigger>
+            <TabsTrigger value="export">Export</TabsTrigger>
+            <TabsTrigger value="plugins">Plugins</TabsTrigger>
+            <TabsTrigger value="about">About</TabsTrigger>
+          </TabsList>
+          <div className="mt-4 max-h-[70vh] overflow-y-auto pr-2">
+            <TabsContent value="editor"><EditorSettings /></TabsContent>
+            <TabsContent value="theme"><ThemeSettings /></TabsContent>
+            <TabsContent value="export"><ExportSettings /></TabsContent>
+            <TabsContent value="plugins"><PluginsSettings /></TabsContent>
+            <TabsContent value="about"><AboutSettings /></TabsContent>
+          </div>
+        </Tabs>
+        <div className="mt-4 flex justify-end border-t border-border pt-4">
+          <Button variant="ghost" onClick={resetToDefaults}>Reset to defaults</Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

src/renderer/components/modals/ThemeSettings.tsx

@@ -0,0 +1,45 @@
+import { useSettingsStore } from '@/stores/settings-store';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+export function ThemeSettings() {
+  const { theme, accentColor, fontFamily, setSetting } = useSettingsStore();
+
+  return (
+    <div className="space-y-5 text-sm">
+      <div>
+        <Label>Mode</Label>
+        <RadioGroup value={theme} onValueChange={(v) => setSetting('theme', v as 'light' | 'dark' | 'auto')}>
+          <div className="flex items-center gap-2"><RadioGroupItem value="light" id="theme-light" /><Label htmlFor="theme-light">Light</Label></div>
+          <div className="flex items-center gap-2"><RadioGroupItem value="dark" id="theme-dark" /><Label htmlFor="theme-dark">Dark</Label></div>
+          <div className="flex items-center gap-2"><RadioGroupItem value="auto" id="theme-auto" /><Label htmlFor="theme-auto">Auto (system)</Label></div>
+        </RadioGroup>
+      </div>
+      <div>
+        <Label htmlFor="theme-accent">Accent color</Label>
+        <Select value={accentColor} onValueChange={(v) => setSetting('accentColor', v as any)}>
+          <SelectTrigger id="theme-accent" aria-label="Accent color"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="brand">Brand (orange)</SelectItem>
+            <SelectItem value="blue">Blue</SelectItem>
+            <SelectItem value="green">Green</SelectItem>
+            <SelectItem value="purple">Purple</SelectItem>
+            <SelectItem value="orange">Orange</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label htmlFor="theme-font-family">Editor font</Label>
+        <Select value={fontFamily} onValueChange={(v) => setSetting('fontFamily', v as any)}>
+          <SelectTrigger id="theme-font-family" aria-label="Editor font"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="system">System (Plus Jakarta Sans)</SelectItem>
+            <SelectItem value="jetbrains">JetBrains Mono</SelectItem>
+            <SelectItem value="fira">Fira Code</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}

src/renderer/components/modals/WelcomeDialog.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useAppStore } from '@/stores/app-store';
+import { useSettingsStore } from '@/stores/settings-store';
+
+export function WelcomeDialog() {
+  const closeModal = useAppStore((s) => s.closeModal);
+  const setSetting = useSettingsStore((s) => s.setSetting);
+  const [dontShow, setDontShow] = useState(false);
+
+  const handleClose = () => {
+    if (dontShow) setSetting('welcomeDismissed', true);
+    closeModal();
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && handleClose()}>
+      <DialogContent aria-describedby="welcome-desc" className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Welcome to MarkdownConverter</DialogTitle>
+          <DialogDescription id="welcome-desc">
+            A polished editor for Markdown, with PDF, DOCX, and HTML export.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3 text-sm">
+          <div className="rounded-md border border-border bg-card/30 p-3">
+            <h3 className="font-semibold">1. Open a folder</h3>
+            <p className="text-muted-foreground">File → Open Folder, or ⌘O. Your tree appears on the left.</p>
+          </div>
+          <div className="rounded-md border border-border bg-card/30 p-3">
+            <h3 className="font-semibold">2. Edit & preview</h3>
+            <p className="text-muted-foreground">Type on the left, see the rendered preview on the right. Toggle with ⌘\.</p>
+          </div>
+          <div className="rounded-md border border-border bg-card/30 p-3">
+            <h3 className="font-semibold">3. Export anywhere</h3>
+            <p className="text-muted-foreground">File → Export to PDF / DOCX / HTML, or batch convert a folder.</p>
+          </div>
+        </div>
+        <DialogFooter className="flex-row items-center justify-between sm:justify-between">
+          <label className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Checkbox checked={dontShow} onCheckedChange={(c) => setDontShow(!!c)} aria-label="Don't show again" />
+            Don't show again
+          </label>
+          <Button onClick={handleClose}>Get started</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/renderer/components/preview/MarkdownRenderer.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from 'react';
+import { renderMarkdown } from '@/lib/markdown';
+import { MermaidLazy } from './MermaidLazy';
+
+interface Props {
+  source: string;
+}
+
+const MERMAID_RE = /```mermaid\n([\s\S]*?)```/g;
+
+function extractMermaidCodes(source: string): string[] {
+  const codes: string[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = MERMAID_RE.exec(source)) !== null) {
+    codes.push(match[1].trim());
+  }
+  return codes;
+}
+
+export function MarkdownRenderer({ source }: Props) {
+  const html = renderMarkdown(source);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [mermaidCodes, setMermaidCodes] = useState<string[]>([]);
+
+  // Re-derive mermaid codes from the original source. The renderMarkdown function
+  // replaces mermaid blocks with placeholders (data-mermaid-source="${idx}"), but
+  // it does not return the actual codes. Rather than thread them through the API,
+  // we re-extract from the source. Source is small (single buffer content) so this
+  // cost is negligible.
+  useEffect(() => {
+    setMermaidCodes(extractMermaidCodes(source));
+  }, [source]);
+
+  return (
+    <div className="prose prose-neutral dark:prose-invert max-w-none p-6" ref={containerRef}>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+      {mermaidCodes.map((code, i) => (
+        <div key={i} className="my-4">
+          <MermaidLazy code={code} />
+        </div>
+      ))}
+    </div>
+  );
+}

src/renderer/components/preview/MermaidLazy.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface Props {
+  code: string;
+}
+
+let mermaidModule: typeof import('mermaid').default | null = null;
+let initialized = false;
+
+async function getMermaid() {
+  if (!mermaidModule) {
+    const mod = await import('mermaid');
+    mermaidModule = mod.default;
+  }
+  if (!initialized) {
+    mermaidModule.initialize({ startOnLoad: false, theme: 'default' });
+    initialized = true;
+  }
+  return mermaidModule;
+}
+
+export function MermaidLazy({ code }: Props) {
+  const [svg, setSvg] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const idRef = useRef(`mermaid-${Math.random().toString(36).slice(2)}`);
+
+  useEffect(() => {
+    let cancelled = false;
+    getMermaid()
+      .then((m) => m.render(idRef.current, code))
+      .then((rendered) => {
+        if (!cancelled) setSvg(rendered);
+      })
+      .catch((err: Error) => {
+        if (!cancelled) setError(err.message);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [code]);
+
+  if (error) return <div className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">{error}</div>;
+  if (!svg) return <div className="text-xs text-muted-foreground">Loading diagram…</div>;
+  return <div data-testid="mermaid-output" dangerouslySetInnerHTML={{ __html: svg }} />;
+}

src/renderer/components/preview/PreviewPane.tsx

@@ -0,0 +1,22 @@
+import { MarkdownRenderer } from './MarkdownRenderer';
+import { usePreviewStore } from '@/stores/preview-store';
+import { useScrollSync } from '@/hooks/use-scroll-sync';
+
+export function PreviewPane() {
+  const { source, setScrollRatio } = usePreviewStore();
+  const { handlePreviewScroll } = useScrollSync({ onPreviewScroll: setScrollRatio });
+
+  if (!source) {
+    return (
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        <p>Nothing to preview. Start typing in the editor.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto bg-card/10" onScroll={handlePreviewScroll}>
+      <MarkdownRenderer source={source} />
+    </div>
+  );
+}

src/renderer/components/sidebar/FileTree.tsx

@@ -0,0 +1,73 @@
+import { ChevronRight, Folder, FolderOpen, File, FileText } from 'lucide-react';
+import { useFileStore } from '@/stores/file-store';
+import { cn } from '@/lib/utils';
+
+function FileTreeNode({ node, depth }: { node: import('@/stores/file-store').FileNode; depth: number }) {
+  const { expanded, activeTabId, loadChildren, toggleExpanded, openFile } = useFileStore();
+  const isExpanded = expanded.has(node.path);
+  const isActive = activeTabId === node.path;
+
+  if (node.isDirectory) {
+    const handleClick = async () => {
+      if (!node.loaded) {
+        await loadChildren(node.path);
+      }
+      toggleExpanded(node.path);
+    };
+
+    return (
+      <div>
+        <button
+          onClick={handleClick}
+          className={cn(
+            'flex w-full items-center gap-1 rounded px-1 py-0.5 text-left text-xs hover:bg-accent',
+            isActive && 'bg-accent'
+          )}
+          style={{ paddingLeft: `${depth * 16 + 4}px` }}
+        >
+          <ChevronRight
+            size={12}
+            className={cn('transition-transform duration-150', isExpanded && 'rotate-90')}
+          />
+          {isExpanded ? <FolderOpen size={14} /> : <Folder size={14} />}
+          <span className="truncate">{node.name}</span>
+        </button>
+        {isExpanded && node.loaded && node.children && (
+          <div>
+            {node.children.map((child) => (
+              <FileTreeNode key={child.path} node={child} depth={depth + 1} />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => openFile(node.path)}
+      className={cn(
+        'flex w-full items-center gap-1 rounded px-1 py-0.5 text-left text-xs hover:bg-accent',
+        isActive && 'bg-accent text-accent-foreground'
+      )}
+      style={{ paddingLeft: `${depth * 16 + 4}px` }}
+    >
+      <FileText size={14} />
+      <span className="truncate">{node.name}</span>
+    </button>
+  );
+}
+
+export function FileTree() {
+  const tree = useFileStore((s) => s.tree);
+
+  if (!tree) return null;
+
+  return (
+    <div className="py-1">
+      {tree.children?.map((child) => (
+        <FileTreeNode key={child.path} node={child} depth={0} />
+      ))}
+    </div>
+  );
+}

src/renderer/components/sidebar/Outline.tsx

@@ -0,0 +1,77 @@
+import { useEditorStore } from '@/stores/editor-store';
+
+const HEADING_RE = /^(#{1,6})\s+(.+)$/gm;
+
+interface HeadingItem {
+  level: number;
+  text: string;
+  line: number;
+}
+
+function extractHeadings(content: string): HeadingItem[] {
+  const headings: HeadingItem[] = [];
+  let match: RegExpExecArray | null;
+  const re = new RegExp(HEADING_RE.source, 'gm');
+  let lineNum = 1;
+  for (const line of content.split('\n')) {
+    re.lastIndex = 0;
+    match = re.exec(line);
+    if (match) {
+      headings.push({
+        level: match[1].length,
+        text: match[2].trim(),
+        line: lineNum,
+      });
+    }
+    lineNum++;
+  }
+  return headings;
+}
+
+export function Outline() {
+  const activeId = useEditorStore((s) => s.activeId);
+  const buffers = useEditorStore((s) => s.buffers);
+
+  if (!activeId) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
+        <span>No file open</span>
+      </div>
+    );
+  }
+
+  const buffer = buffers.get(activeId);
+  if (!buffer) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
+        <span>No file open</span>
+      </div>
+    );
+  }
+
+  const headings = extractHeadings(buffer.content);
+
+  if (headings.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
+        <span>No headings</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-0.5 py-1">
+      {headings.map((h, i) => (
+        <button
+          key={i}
+          onClick={() => {}}
+          className="flex items-center gap-1 rounded px-2 py-0.5 text-left text-xs hover:bg-accent"
+          style={{ paddingLeft: `${(h.level - 1) * 16 + 8}px` }}
+        >
+          <span className="truncate text-muted-foreground">#{h.level}</span>
+          <span className="truncate">{h.text}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

src/renderer/components/sidebar/Sidebar.tsx

@@ -0,0 +1,54 @@
+import { ChevronRight, FolderOpen } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useFileStore } from '@/stores/file-store';
+import { FileTree } from './FileTree';
+import { Outline } from './Outline';
+
+export function Sidebar() {
+  const tree = useFileStore((s) => s.tree);
+
+  return (
+    <div className="flex h-full flex-col gap-3">
+      {/* Files section */}
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger asChild>
+          <button className="flex w-full items-center gap-1.5 px-1 py-1.5 text-xs font-medium hover:bg-accent rounded">
+            <ChevronRight size={12} className="rotate-90" />
+            Files
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <ScrollArea className="h-[calc(100vh-240px)]">
+            {!tree ? (
+              <div className="flex flex-col items-center gap-2 p-4 text-xs text-muted-foreground">
+                <span>No folder opened</span>
+                <Button size="sm" variant="outline" onClick={() => useFileStore.getState().openFolderDialog()}>
+                  <FolderOpen className="mr-1" /> Open Folder
+                </Button>
+              </div>
+            ) : (
+              <FileTree />
+            )}
+          </ScrollArea>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* Outline section */}
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger asChild>
+          <button className="flex w-full items-center gap-1.5 px-1 py-1.5 text-xs font-medium hover:bg-accent rounded">
+            <ChevronRight size={12} className="rotate-90" />
+            Outline
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <ScrollArea className="h-[calc(100vh-240px)]">
+            <Outline />
+          </ScrollArea>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

src/renderer/components/theme-provider.tsx

@@ -0,0 +1,6 @@
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import type { ComponentProps } from 'react';
+
+export function ThemeProvider({ children, ...props }: ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

src/renderer/components/theme-toggle.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from 'next-themes';
+import { Moon, Sun } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" aria-label="Toggle theme" className="opacity-0">
+        <Sun className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  const isDark = resolvedTheme === 'dark';
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label="Toggle theme"
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+    >
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </Button>
+  );
+}

src/renderer/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/renderer/components/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/renderer/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/renderer/components/ui/context-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

src/renderer/components/ui/dialog.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/renderer/components/ui/form.tsx

@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+
+const Form = React.forwardRef<
+  HTMLFormElement,
+  React.ComponentProps<"form">
+>(({ className, ...props }, ref) => {
+  const methods = useFormContext()
+  return (
+    <form ref={ref} className={className} onSubmit={methods.handleSubmit(() => {})} {...props} />
+  )
+})
+Form.displayName = "Form"
+
+// ============================================================
+// FormFieldContext - provides field-level context
+// ============================================================
+
+const FormFieldContext = React.createContext<
+  ControllerProps<FieldValues, string>
+>({} as never)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  const { name } = props
+
+  return (
+    <FormFieldContext.Provider value={props as ControllerProps<FieldValues, string>}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+// ============================================================
+// useFormField - must be used inside a FormField
+// ============================================================
+
+function useFormField(): ControllerProps<FieldValues, string> {
+  const fieldContext = React.useContext(FormFieldContext)
+  if (!fieldContext) {
+    throw new Error("useFormField must be used within a FormField")
+  }
+  return fieldContext
+}
+
+// ============================================================
+// FormItem - wraps a labeled form control
+// ============================================================
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("space-y-2", className)} {...props} />
+))
+FormItem.displayName = "FormItem"
+
+// ============================================================
+// FormLabel
+// ============================================================
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    )}
+    {...props}
+  />
+))
+FormLabel.displayName = LabelPrimitive.Root.displayName
+
+// ============================================================
+// FormControl - Slot bridge
+// ============================================================
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => (
+  <Slot ref={ref} {...props} />
+))
+FormControl.displayName = "FormControl"
+
+// ============================================================
+// FormDescription
+// ============================================================
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+FormDescription.displayName = "FormDescription"
+
+// ============================================================
+// FormMessage
+// ============================================================
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error } = useFormField()
+  const body = error ? String(error.message ?? "") : children
+  if (!body) return null
+  return (
+    <p
+      ref={ref}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  useFormField,
+}

src/renderer/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

src/renderer/components/ui/label.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cn } from "@/lib/utils"
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    )}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

src/renderer/components/ui/radio-group.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

src/renderer/components/ui/resizable.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = React.forwardRef<
+  React.ElementRef<typeof ResizablePrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <ResizablePrimitive.Group
+    ref={ref}
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+))
+ResizablePanelGroup.displayName = "ResizablePanelGroup"
+
+const ResizablePanel = React.forwardRef<
+  React.ElementRef<typeof ResizablePrimitive.Panel>,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>
+>(({ className, ...props }, ref) => (
+  <ResizablePrimitive.Panel
+    ref={ref}
+    className={cn(
+      "h-full w-full overflow-hidden",
+      className
+    )}
+    {...props}
+  />
+))
+ResizablePanel.displayName = "ResizablePanel"
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Separator> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.Separator
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.Separator>
+)
+ResizableHandle.displayName = "ResizableHandle"
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

src/renderer/components/ui/scroll-area.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+export { ScrollArea, ScrollBar }

src/renderer/components/ui/select.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

src/renderer/components/ui/sheet.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = ({
+  className,
+  ...props
+}: SheetPrimitive.DialogPortalProps) => (
+  <SheetPrimitive.Portal className={cn(className)} {...props} />
+)
+SheetPortal.displayName = SheetPrimitive.Portal.displayName
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription
+}

src/renderer/components/ui/slider.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { 'aria-label': ariaLabel, ...rest } = props;
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center",
+        className
+      )}
+      {...rest}
+    >
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        aria-label={ariaLabel}
+        className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+      />
+    </SliderPrimitive.Root>
+  );
+})
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

src/renderer/components/ui/switch.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitive.Root>
+))
+Switch.displayName = SwitchPrimitive.Root.displayName
+
+export { Switch }

src/renderer/components/ui/tabs.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

src/renderer/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

src/renderer/hooks/use-export-source.ts

@@ -0,0 +1,26 @@
+import { useFileStore } from '@/stores/file-store';
+import { useEditorStore } from '@/stores/editor-store';
+
+export interface ExportSource {
+  source: string;
+  path: string;
+  title: string;
+}
+
+/**
+ * Read the active buffer's content from the editor store. Returns null if
+ * no buffer is open. Components handle the null case (prompt to open a file).
+ */
+export function useExportSource(): ExportSource | null {
+  const activeTabId = useFileStore((s) => s.activeTabId);
+  const openTabs = useFileStore((s) => s.openTabs);
+  const buffer = useEditorStore((s) => (activeTabId ? s.buffers.get(activeTabId) : undefined));
+
+  if (!activeTabId || !buffer) return null;
+  const tab = openTabs.find((t) => t.id === activeTabId);
+  return {
+    source: buffer.content,
+    path: activeTabId,
+    title: tab?.title ?? activeTabId,
+  };
+}

src/renderer/hooks/use-file-shortcuts.ts

@@ -0,0 +1,72 @@
+import { useEffect } from 'react';
+import { useFileStore } from '@/stores/file-store';
+
+/**
+ * Global keyboard shortcuts for file operations.
+ *
+ * - Cmd/Ctrl+O: open file
+ * - Cmd/Ctrl+Shift+O: open folder
+ * - Cmd/Ctrl+S: save active buffer
+ * - Cmd/Ctrl+W: close active tab
+ * - Cmd/Ctrl+Tab / Cmd/Ctrl+Shift+Tab: next/previous tab (wraps)
+ *
+ * Suppressed when an <input>, <textarea>, or contentEditable element has focus.
+ */
+export function useFileShortcuts(): void {
+  useEffect(() => {
+    function isTypingTarget(target: EventTarget | null): boolean {
+      if (!(target instanceof HTMLElement)) return false;
+      const tag = target.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return true;
+      if (target.isContentEditable) return true;
+      return false;
+    }
+
+    function handle(e: KeyboardEvent): void {
+      const mod = e.metaKey || e.ctrlKey;
+      if (!mod) return;
+      if (isTypingTarget(e.target)) return;
+
+      const key = e.key.toLowerCase();
+
+      // Order matters: more specific (Shift) variants first so they don't get
+      // shadowed by the plain modifier-only branch.
+      if (e.shiftKey && key === 'o') {
+        e.preventDefault();
+        void useFileStore.getState().openFolderDialog();
+        return;
+      }
+      if (!e.shiftKey && key === 'o') {
+        e.preventDefault();
+        void useFileStore.getState().openFileDialog();
+        return;
+      }
+      if (!e.shiftKey && key === 's') {
+        e.preventDefault();
+        void useFileStore.getState().saveActiveBuffer();
+        return;
+      }
+      if (!e.shiftKey && key === 'w') {
+        e.preventDefault();
+        const { activeTabId, closeTab } = useFileStore.getState();
+        if (activeTabId) closeTab(activeTabId);
+        return;
+      }
+      if (key === 'tab') {
+        e.preventDefault();
+        const { openTabs, activeTabId, setActiveTab } = useFileStore.getState();
+        if (openTabs.length === 0) return;
+        const idx = activeTabId ? openTabs.findIndex((t) => t.id === activeTabId) : 0;
+        const safeIdx = idx === -1 ? 0 : idx;
+        const nextIdx = e.shiftKey
+          ? (safeIdx <= 0 ? openTabs.length - 1 : safeIdx - 1)
+          : (safeIdx >= openTabs.length - 1 ? 0 : safeIdx + 1);
+        setActiveTab(openTabs[nextIdx].id);
+        return;
+      }
+    }
+
+    window.addEventListener('keydown', handle);
+    return () => window.removeEventListener('keydown', handle);
+  }, []);
+}

src/renderer/hooks/use-menu-action.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { ipc } from '@/lib/ipc';
+import { useCommandStore } from '@/stores/command-store';
+import type { CommandId } from '@/stores/command-store';
+
+type Transform<Args = unknown> = (...payload: unknown[]) => Args;
+
+/**
+ * Bridge a native-menu IPC channel to a command-store dispatch.
+ *
+ * When the main process sends `channel` (e.g. `'file-save'`), the optional
+ * `transform` converts the payload to the command's args, then the command
+ * `commandId` is dispatched through the command store.
+ *
+ * The hook cleans up its IPC subscription on unmount.
+ */
+export function useMenuAction<Args = unknown>(
+  channel: string,
+  commandId: CommandId,
+  transform?: Transform<Args>
+): void {
+  useEffect(() => {
+    const unsubscribe = ipc.menu.on(channel, (...payload: unknown[]) => {
+      const args = transform ? transform(...payload) : (payload[0] as Args);
+      useCommandStore.getState().dispatch(commandId, args);
+    });
+    return unsubscribe;
+  }, [channel, commandId, transform]);
+}

src/renderer/hooks/use-restore-last-folder.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { useFileStore } from '@/stores/file-store';
+
+/**
+ * On mount, re-opens the last folder if one was persisted via the file store's
+ * zustand persist middleware. Idempotent — re-running with the same path is a
+ * no-op (openFolder's list IPC call would just re-fetch, which is acceptable).
+ */
+export function useRestoreLastFolder(): void {
+  useEffect(() => {
+    const { rootPath, openFolder, tree } = useFileStore.getState();
+    if (rootPath && !tree) {
+      void openFolder(rootPath);
+    }
+    // Run once on mount only. Persist hydration happens before AppShell renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

src/renderer/hooks/use-scroll-sync.ts

@@ -0,0 +1,28 @@
+import { useCallback, useRef } from 'react';
+
+interface Options {
+  onEditorScroll?: (ratio: number) => void;
+  onPreviewScroll?: (ratio: number) => void;
+}
+
+export function useScrollSync(opts: Options) {
+  const FRAME_MS = 1000 / 60;
+  const lastTick = useRef(-FRAME_MS);
+
+  const handleEditorScroll = useCallback((evt: React.UIEvent<HTMLElement>) => {
+    const target = evt.currentTarget;
+    const ratio = target.scrollTop / Math.max(target.scrollHeight - target.clientHeight, 1);
+    const now = performance.now();
+    if (now - lastTick.current < FRAME_MS) return;
+    lastTick.current = now;
+    opts.onEditorScroll?.(ratio);
+  }, [opts]);
+
+  const handlePreviewScroll = useCallback((evt: React.UIEvent<HTMLElement>) => {
+    const target = evt.currentTarget;
+    const ratio = target.scrollTop / Math.max(target.scrollHeight - target.clientHeight, 1);
+    opts.onPreviewScroll?.(ratio);
+  }, [opts]);
+
+  return { handleEditorScroll, handlePreviewScroll };
+}

src/renderer/hooks/use-shortcut.ts

@@ -0,0 +1,96 @@
+import { useEffect } from 'react';
+
+/**
+ * Bind a keyboard shortcut to a callback.
+ *
+ * Combos use `+` separators. Tokens:
+ *   - `mod`         → meta (Mac) or ctrl (others)
+ *   - `ctrl`        → ctrl only
+ *   - `meta`        → meta only
+ *   - `alt`         → alt / option
+ *   - `shift`       → shift
+ *   - any single char (case-insensitive), e.g. `s`, `S`
+ *   - special names: `Tab`, `Enter`, `Escape`, `Space`, `ArrowUp/Down/Left/Right`
+ *
+ * The hook is suppressed when the keydown target is an `<input>`, `<textarea>`,
+ * or contentEditable element, mirroring the standard browser shortcut pattern.
+ *
+ * On match, `event.preventDefault()` is called.
+ */
+export function useShortcut(combo: string, callback: (e: KeyboardEvent) => void): void {
+  useEffect(() => {
+    const tokens = parseCombo(combo);
+
+    function isTypingTarget(target: EventTarget | null): boolean {
+      if (!(target instanceof HTMLElement)) return false;
+      const tag = target.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return true;
+      if (target.isContentEditable) return true;
+      return false;
+    }
+
+    function handle(e: KeyboardEvent): void {
+      if (isTypingTarget(e.target)) return;
+      if (!matchCombo(tokens, e)) return;
+      e.preventDefault();
+      callback(e);
+    }
+
+    window.addEventListener('keydown', handle);
+    return () => window.removeEventListener('keydown', handle);
+  }, [combo, callback]);
+}
+
+interface ComboSpec {
+  mod?: boolean;
+  ctrl?: boolean;
+  meta?: boolean;
+  alt?: boolean;
+  shift?: boolean;
+  key: string; // lowercased
+}
+
+function parseCombo(combo: string): ComboSpec {
+  const parts = combo
+    .split('+')
+    .map((p) => p.trim())
+    .filter(Boolean);
+  const spec: ComboSpec = { key: '' };
+  for (const p of parts) {
+    const lower = p.toLowerCase();
+    if (lower === 'mod') spec.mod = true;
+    else if (lower === 'ctrl' || lower === 'control') spec.ctrl = true;
+    else if (lower === 'meta' || lower === 'cmd' || lower === 'command') spec.meta = true;
+    else if (lower === 'alt' || lower === 'option') spec.alt = true;
+    else if (lower === 'shift') spec.shift = true;
+    else spec.key = lower;
+  }
+  return spec;
+}
+
+function matchCombo(spec: ComboSpec, e: KeyboardEvent): boolean {
+  const key = e.key.toLowerCase();
+  if (key !== spec.key) return false;
+
+  if (spec.mod) {
+    if (!(e.metaKey || e.ctrlKey)) return false;
+  }
+  if (spec.ctrl && !e.ctrlKey) return false;
+  if (spec.meta && !e.metaKey) return false;
+  if (spec.alt && !e.altKey) return false;
+  if (spec.shift && !e.shiftKey) return false;
+
+  // Reject extra modifiers that the spec did not ask for.
+  // (e.g. spec says "mod+s" but user pressed "mod+shift+s" → no match.)
+  if (!spec.shift && e.shiftKey) return false;
+  if (!spec.alt && e.altKey) return false;
+  // ctrl/meta: if spec did not require mod, ctrl or meta must be absent.
+  if (!spec.mod && !spec.ctrl && e.ctrlKey) return false;
+  if (!spec.mod && !spec.meta && e.metaKey) return false;
+  // If spec said "mod" only, ctrl+meta is allowed (mod is either-or).
+  if (spec.mod && !spec.ctrl && !spec.meta) {
+    // ok
+  }
+
+  return true;
+}

src/renderer/hooks/use-welcome-trigger.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useAppStore } from '@/stores/app-store';
+import { useSettingsStore } from '@/stores/settings-store';
+
+/**
+ * On first mount, if the user hasn't dismissed the welcome dialog, open it.
+ * Call once at the top of App.tsx.
+ */
+export function useWelcomeTrigger() {
+  useEffect(() => {
+    if (!useSettingsStore.getState().welcomeDismissed) {
+      useAppStore.getState().openModal('welcome');
+    }
+  }, []);
+}