fix(test): use mockRejectedValue for IPC error in ExportPdfDialog test

Adds the actual right-alignment heuristic to toAsciiTable (was missing
from initial implementation). When any column header starts with a digit,
all columns are right-padded instead of left-padded. Matches the test
added in 53870d5 which exercises the right-alignment path with header
['Item', '7'].

All 6 ascii-table tests pass.

CLAUDE.md

@@ -1,103 +0,0 @@
-# CLAUDE.md — MarkdownConverter (master)
-
-> General code-quality, JavaScript, git, security, and testing standards are in the **global CLAUDE.md**. This file holds project- and branch-specific notes.
-
-## Project Overview
-
-Electron desktop app for Markdown editing and universal file conversion powered by Pandoc. Cross-platform (Win/macOS/Linux). Features: multi-tab editor with live preview, 25+ themes, PDF viewer/editor (merge/split/compress/rotate/watermark/password), export to 20+ formats (PDF/DOCX/ODT/EPUB/HTML/LaTeX/RTF/PPTX), batch conversion, syntax highlighting, diagram support (Mermaid), Git integration, and a plugin system.
-
-- **Version:** 4.4.5
-- **License:** MIT
-- **App ID:** `com.concreteinfo.markdownconverter`
-
-## Branch Specifics
-
-This is the **primary/release branch** — a vanilla JavaScript Electron app with no bundler or framework in the renderer. The renderer is a single large `renderer.js` (5,300+ lines) loaded directly via `src/index.html`. All UI is hand-rolled DOM manipulation.
-
-## Architecture
-
-### Main Process (`src/main.js` — 4,260 lines)
-Monolithic main process file. Contains all IPC handlers, Pandoc invocation, file operations, menu definitions (600+ lines), and window lifecycle. Key modules extracted:
-- `src/main/PDFOperations.js` — PDF manipulation via `pdf-lib` (merge, split, compress, rotate, delete, reorder, watermark, encrypt, decrypt, permissions)
-- `src/main/GitOperations.js` — Git status/stage/commit/log via `simple-git`
-
-### Renderer (`src/renderer.js` — 5,361 lines)
-Vanilla JS, no framework. Directly manipulates DOM. Loads CodeMirror 6 via `src/editor/codemirror-setup.js`. Uses `marked` + `highlight.js` + `DOMPurify` + `mermaid` for rendering. Lazy-loads sidebar panels, REPL, command palette, zen mode.
-
-### Preload (`src/preload.js` — 448 lines)
-Exists as IPC bridge, but **`contextIsolation: false` and `nodeIntegration: true`** — the renderer has full Node access. Preload is effectively a thin passthrough.
-
-### Security Model
-- `contextIsolation: false` + `nodeIntegration: true` (legacy; the react-electron branch fixes this)
-- Pandoc invoked via `execFile` (not `exec`) to prevent shell injection
-- Path traversal protection: `validatePath()`, `resolveWritablePath()`, blocks sensitive system dirs
-- Permission handler only allows `clipboard-read`/`clipboard-write`
-- Rate limiter on conversions (2-second minimum interval)
-- File size limit: 50MB
-- Error message sanitization strips absolute paths
-
-### Plugin System (`src/plugins/`)
-Manifest-based discovery (`manifest.json`). Built-in `writing-studio` plugin with sprint/goal/snapshot management. Plugin API exposed via `src/plugins/plugin-api.js`.
-
-### Settings
-Custom JSON file store at `<userData>/settings.json` (NOT `electron-store` despite the dependency). Recent files at `<userData>/recent-files.json`.
-
-## System Dependencies
-
-| Dependency | Required | Notes |
-|---|---|---|
-| **Node.js** | >= 20 | Electron 41 bundles Node 20.x |
-| **Pandoc** | Yes (for exports) | Downloaded to `bin/<platform>/pandoc` via `scripts/download-tools.js` (v3.9.0.2). Falls back to system PATH. Must be present for DOCX/ODT/EPUB/LaTeX/PPTX export. |
-| **FFmpeg** | Bundled | `ffmpeg-static` npm package; `asarUnpacked` for packaged builds |
-| **MiKTeX / TeX Live** | Optional | For LaTeX PDF export; MiKTeX PATH injected on Windows automatically |
-| **ImageMagick** | Optional | Linux image conversion; listed as deb dependency |
-| **LibreOffice** | Optional | Enhanced document conversion; listed as deb dependency |
-
-## Development Commands
-
-```bash
-npm start                  # Launch Electron app (dev mode)
-npm test                   # Jest test suite
-npm test:watch             # Jest in watch mode
-npm test:coverage          # Jest with coverage report
-npm run lint               # ESLint check (src + tests)
-npm run lint:fix           # ESLint auto-fix
-npm run format             # Prettier write
-npm run format:check       # Prettier check only
-npm run download-tools     # Download Pandoc binaries to bin/
-npm run generate-icons     # Generate app icons via sharp
-```
-
-## Build & Package
-
-**Tool:** `electron-builder` (v26.0.12), config inline in `package.json` (no separate config file).
-
-| Target | Platforms |
-|---|---|
-| `npm run build` | electron-builder (default platform) |
-| `npm run build:win` | Windows: NSIS installer + portable + zip (x64) |
-| `npm run build:mac` | macOS: default dmg |
-| `npm run build:linux` | Linux: deb + AppImage + snap |
-| `npm run dist` | Build without publish |
-| `npm run dist:all` | Build for all platforms |
-
-**Bundled with builds:** Pandoc binary per platform. FFmpeg via `ffmpeg-static` (asarUnpacked). NSIS installer uses custom script at `scripts/nsis-installer.nsh`.
-
-**Output:** `dist/` directory.
-
-**CI:** GitHub Actions workflows in `.github/workflows/` (ci.yml, release.yml).
-
-## Project Conventions / Gotchas
-
-- **No bundler/transpilation.** The app uses vanilla CommonJS JavaScript. `src/main.js` is loaded directly by Electron. No webpack, no Vite, no TypeScript, no Babel.
-- **Monolithic files.** `main.js` (4,260 lines) and `renderer.js` (5,361 lines) contain most logic. Not ideal but is the current state of this branch.
-- **CodeMirror 6** for the editor, configured in `src/editor/codemirror-setup.js`.
-- **PDF rendering** uses `pdfjs-dist`; **PDF manipulation** uses `pdf-lib` in the main process.
-- **Renderer security is weak** — full Node access in renderer. Do NOT introduce new privileged renderer code without understanding this.
-- **Pandoc is external.** Must be installed separately or downloaded via `npm run download-tools`. HTML and built-in PDF export work without Pandoc; other formats require it.
-- **PDF export fallback chain:** xelatex -> pdflatex -> lualatex -> Electron built-in `printToPDF()`.
-- **ESLint flat config** (`eslint.config.js`) with ECMAScript 2022. Prettier with 2-space indent, single quotes, semicolons, 100-char width.
-- **Tests:** Jest with jsdom environment, 15% coverage threshold. 24 test files in `tests/`.
-- **File associations:** `.md`, `.markdown`, `.pdf` registered at install.
-- **Single instance lock** enforced via `app.requestSingleInstanceLock()`.
-- **Adapters layer** (`src/adapters/`) abstracts file system operations for potential future non-Electron targets.

README.md

@@ -162,4 +162,4 @@ Amit Haridas (amit.wh@gmail.com)
 
 ## Version
 
-v4.4.5
+v4.1.0

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-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-phase-8-toasts-design.md

@@ -0,0 +1,250 @@
+# Phase 8 — Toasts Design
+
+> Companion to the parent plan: `docs/superpowers/plans/2026-06-05-react-ui-redesign.md` (Phases 8+9+10 are sketched at high level; this spec locks Phase 8's architecture, file map, and contracts so it can be planned task-by-task.)
+
+**Date:** 2026-06-05
+**Phase:** 8 of 10 (React + shadcn/ui UI redesign)
+**Tag (on completion):** `phase-8-toasts`
+
+---
+
+## 1. Goal & Non-Goals
+
+**Goal:** Add a toast notification layer to the React renderer using sonner (already installed). Surface user-initiated async action results (file save, file/folder open, exports) as transient toasts in the bottom-right of the window. The error banner pattern in export dialogs stays — toasts are a complementary global channel.
+
+**Non-goals (Phase 8):**
+- Undo/redo support (Phase 9)
+- Custom toast actions/buttons (Phase 9, if needed)
+- Persistent notification history
+- Toast queueing/throttling for rapid-fire events
+- Replacing inline error banners (they stay as per-dialog context)
+
+**Scope decision:** Toast on user-initiated actions only. Skip silent background operations (loadChildren, etc.) to avoid noise. 4 wire points total: save (success+error), open file/folder (error only), 4 export dialogs (success+error).
+
+---
+
+## 2. Architecture
+
+### 2.1 Toast helpers in `lib/toast.ts`
+
+A thin typed layer over sonner. The helpers exist to:
+- Give us a single import surface (instead of scattering `import { toast } from 'sonner'` across the codebase)
+- Provide a place to add brand colors, formatting, or analytics later without touching call sites
+- Make mocking easier in tests (one module to mock)
+
+```ts
+// src/renderer/lib/toast.ts (sketch)
+import { toast as sonnerToast } from 'sonner';
+
+export const toast = {
+  success: (message: string) => sonnerToast.success(message),
+  error: (message: string) => sonnerToast.error(message),
+  info: (message: string) => sonnerToast.info(message),
+  warning: (message: string) => sonnerToast.warning(message),
+  promise: <T>(
+    promise: Promise<T>,
+    msgs: { loading: string; success: string | ((data: T) => string); error: string | ((err: unknown) => string) }
+  ) => sonnerToast.promise(promise, msgs),
+  dismiss: (id?: string | number) => sonnerToast.dismiss(id),
+};
+```
+
+### 2.2 `<Toaster />` mounted in App.tsx
+
+A canonical shadcn Toaster wrapper (manual paste per memory `shadcn-cli-blocked-manual-primitives`). Mounts alongside `<ModalLayer />`:
+
+```tsx
+// src/renderer/App.tsx (sketch)
+import { Toaster } from '@/components/ui/sonner';
+
+function App() {
+  useWelcomeTrigger();
+  return (
+    <>
+      <AppShell />
+      <ModalLayer />
+      <Toaster />
+    </>
+  );
+}
+```
+
+The Toaster uses sonner's `<Toaster />` component with:
+- `theme={resolvedTheme}` from `useTheme()` (so toasts match the user's light/dark preference)
+- `richColors` for semantic success/error/info/warning colors
+- `position="bottom-right"` (sonner default; explicit for clarity)
+- `closeButton` (so users can dismiss)
+
+### 2.3 Inline wiring at 4 wire points
+
+**Pattern choice — inline in stores/dialogs, NOT middleware.** Matches the Phase 7 precedent of inline error banners in export dialogs. Middleware would be DRY but harder to debug and harder to control granularity (we want errors on save, but NOT on silent loadChildren).
+
+**Wire points:**
+
+1. **`useFileStore.saveActiveBuffer`** — wrap the existing logic:
+   ```ts
+   saveActiveBuffer: async () => {
+     // ... existing logic to get buffer ...
+     const writeResult = await ipc.file.write(activeTabId, buffer.content);
+     if (!writeResult.ok) {
+       toast.error(`Failed to save: ${writeResult.error.message}`);
+       return false;
+     }
+     // ... existing markSaved/markTabClean ...
+     toast.success(`Saved ${title}`);
+     return true;
+   }
+   ```
+
+2. **`useFileStore.openFile`** — error only:
+   ```ts
+   openFile: async (filePath) => {
+     // ... existing logic to check existing tab ...
+     const result = await ipc.file.read(filePath);
+     if (!result.ok) {
+       toast.error(`Failed to open file: ${result.error.message}`);
+       return;
+     }
+     // ... existing logic ...
+   }
+   ```
+
+3. **`useFileStore.openFolder`** — error only:
+   ```ts
+   openFolder: async (path) => {
+     const result = await ipc.file.list(path);
+     if (!result.ok) {
+       toast.error(`Failed to open folder: ${result.error.message}`);
+       return;
+     }
+     // ... existing logic ...
+   }
+   ```
+
+4. **4 export dialogs** — both success and error (error complements the inline banner):
+   ```ts
+   if (!result.ok) {
+     toast.error(`Export failed: ${result.error.message}`);
+     setError(result.error.message);
+     setSubmitting(false);
+   } else {
+     toast.success(`Exported ${source.title} to ${result.data?.outputPath ?? 'file'}`);
+     closeModal();
+   }
+   ```
+
+---
+
+## 3. File Map
+
+### 3.1 Created files
+
+- `src/renderer/lib/toast.ts` — typed wrappers (re-export of sonner with our naming)
+- `src/renderer/components/ui/sonner.tsx` — canonical shadcn Toaster wrapper (manual paste)
+- `tests/unit/lib/toast.test.ts` — ~5 unit tests
+- `tests/component/ui/sonner.test.tsx` — 1 smoke test
+- `tests/integration/phase8-toasts-smoke.test.tsx` — ~4 integration tests
+
+### 3.2 Modified files
+
+- `src/renderer/App.tsx` — mount `<Toaster />` alongside `<ModalLayer />`
+- `src/renderer/stores/file-store.ts` — add 3 toast calls (save, openFile, openFolder)
+- `src/renderer/components/modals/ExportPdfDialog.tsx` — toast on submit result
+- `src/renderer/components/modals/ExportDocxDialog.tsx` — toast on submit result
+- `src/renderer/components/modals/ExportHtmlDialog.tsx` — toast on submit result
+- `src/renderer/components/modals/ExportBatchDialog.tsx` — toast on submit result
+
+---
+
+## 4. Data Flow
+
+User action → store action OR export dialog submit → IPC call → result →
+- if error: `toast.error(message)` → sonner renders in bottom-right portal
+- if success: `toast.success(message)` → sonner renders
+- inline error banner in dialog stays as per-dialog context (NOT removed)
+
+Theme comes from `useTheme()` in the Toaster component, not from individual toasts. The Toaster is mounted once at the app level.
+
+For the 4 export dialogs: the existing inline error banner stays (it's contextual to the dialog), AND a toast is fired. This gives the user both immediate context (in the dialog) and persistent notification (toast in corner).
+
+For file save: ONLY a toast (no inline error UI in the editor pane — keeps the editor clean). Errors still show the toast.
+
+---
+
+## 5. Error Handling
+
+- **Toast helpers never throw.** They are thin re-exports of sonner, which handles its own error cases (e.g., render failures, missing portal target).
+- **In tests**, the `toast` module is mocked so calls don't render real toasts. Mock signature: `vi.mock('@/lib/toast', () => ({ toast: { success: vi.fn(), error: vi.fn(), ... } }))`.
+- **Theme fallback:** If `useTheme()` is loading or `resolvedTheme` is undefined, Toaster uses `'system'` as a fallback (sonner's default behavior).
+- **Sonner missing:** If for some reason sonner fails to load, the toast calls become no-ops. The user still sees inline error banners in the export dialogs.
+- **Inline error banners stay.** They are not replaced by toasts — they complement them.
+
+---
+
+## 6. Testing Strategy
+
+### 6.1 Unit tests (`tests/unit/lib/toast.test.ts`)
+
+5 tests:
+- `toast.success` calls sonner `toast.success` with the message
+- `toast.error` calls sonner `toast.error` with the message
+- `toast.info` calls sonner `toast.info`
+- `toast.warning` calls sonner `toast.warning`
+- `toast.promise` forwards the promise and messages to sonner
+
+All tests mock the sonner module and verify the forwarded call.
+
+### 6.2 Component test (`tests/component/ui/sonner.test.tsx`)
+
+1 smoke test: `<Toaster />` renders without crashing inside a ThemeProvider.
+
+### 6.3 Integration test (`tests/integration/phase8-toasts-smoke.test.tsx`)
+
+~4 tests:
+- Saving a file → `toast.success` called with `"Saved test.md"`
+- Opening a non-existent file (ipc returns error) → `toast.error` called with file path in message
+- Export success (ipc returns ok) → `toast.success` called + dialog closes
+- Export failure (ipc returns error) → `toast.error` called + inline banner shown + dialog stays open
+
+TDD throughout. Mocks for `ipc.*` and `lib/toast`.
+
+### 6.4 Existing tests must still pass
+
+- All 243 tests from Phase 7 must remain green
+- Export dialog tests will need updates to verify the new toast calls (the dialog tests currently check for inline banner; they should ALSO verify the toast call)
+
+---
+
+## 7. Risks & Open Questions
+
+**Risks:**
+- **Sonner theme switching:** If `useTheme()` returns `'system'` and the OS preference changes mid-session, sonner will re-render. This is the correct behavior; just confirm in test.
+- **Toast spam:** If user holds Cmd+S, the save could fire many times. Sonner deduplicates by default for similar messages? → Decision: rely on sonner's default behavior. If spam becomes an issue, add a `toast.dismiss()` debounce in v2.
+
+**Open questions (deferrable):**
+- Should we add a custom toast for "undo last close" (Phase 9's undo feature)? → Decision: out of scope for Phase 8. Phase 9 will handle undo toasts.
+- Should the export dialog inline banner be removed once toasts are wired? → Decision: NO — keep both. The inline banner is contextual to the dialog; the toast is global. They serve different purposes.
+
+---
+
+## 8. Out of Scope (deferred to later phases)
+
+- Phase 9: Undo toasts ("Tab closed — Undo" with action button)
+- Phase 9: Long-running operation progress toasts (e.g., batch export queue)
+- Phase 9: Custom toast variants for advanced tools (ASCII generator, table generator)
+- Phase 10: Cleanup of inline error banners (will evaluate in Phase 10 if redundant)
+
+---
+
+## 9. Success Criteria
+
+Phase 8 is complete when:
+- `lib/toast.ts` exists with typed wrappers
+- `<Toaster />` is mounted in `App.tsx` and renders toasts
+- `useFileStore.saveActiveBuffer` calls `toast.success`/`toast.error` on result
+- `useFileStore.openFile` calls `toast.error` on failure
+- `useFileStore.openFolder` calls `toast.error` on failure
+- 4 export dialogs call `toast.success`/`toast.error` on result
+- All tests pass: ~+10 new tests, total ~253
+- `npx vite build` succeeds
+- Branch tagged `phase-8-toasts` 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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-converter",
-  "version": "4.4.5",
+  "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",
@@ -43,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",
@@ -52,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",
@@ -70,6 +94,23 @@
     "@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",
@@ -79,16 +120,26 @@
     "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",

postcss.config.js

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

repo-map.md

@@ -1,604 +0,0 @@
-# Repository Structure Map
-
-Auto-generated by `~/.claude-shared/scripts/repo-map.sh` (universal-ctags).
-Signatures only — classes, functions, methods, interfaces, enums, types, namespaces, traits.
-Regenerate after structural changes. Languages: `JavaScript,Sh`.
-
-```
-scripts/download-tools.js:
-  L22  method  extract (PANDOC_CONFIG.linux)
-  L36  method  extract (PANDOC_CONFIG.win32)
-  L51  method  extract (PANDOC_CONFIG.darwin)
-  L63  function  download
-  L70  function  get (download)
-  L109  function  downloadPandoc
-
-scripts/generate-icons.js:
-  L17  function  generateIcons
-
-src/adapters/electron/fs.js:
-  L20  method  readFile (electronFsAdapter)
-  L30  method  writeFile (electronFsAdapter)
-  L39  method  deleteFile (electronFsAdapter)
-  L48  method  ensureDir (electronFsAdapter)
-  L57  method  listDirectory (electronFsAdapter)
-  L77  method  exists (electronFsAdapter)
-  L86  method  isDirectory (electronFsAdapter)
-  L96  method  copy (electronFsAdapter)
-  L106  method  move (electronFsAdapter)
-
-src/analytics/analytics-panel.js:
-  L7  function  showAnalyticsModal
-  L105  function  escHandler (showAnalyticsModal)
-  L116  function  escapeHtml
-
-src/analytics/writing-analytics.js:
-  L77  function  countSyllables
-  L83  function  extractWords
-  L87  function  getReadabilityLabel
-  L95  function  analyze
-
-src/command-palette.js:
-  L1  class  CommandPalette
-  L2  method  constructor (CommandPalette)
-  L12  method  register (CommandPalette)
-  L16  method  open (CommandPalette)
-  L24  method  close (CommandPalette)
-  L28  method  isOpen (CommandPalette)
-  L32  method  setupEventListeners (CommandPalette)
-  L61  method  renderResults (CommandPalette)
-  L90  method  highlightMatch (CommandPalette)
-  L96  method  updateSelection (CommandPalette)
-  L105  method  executeSelected (CommandPalette)
-
-src/editor/codemirror-setup.js:
-  L46  function  createEditor
-  L61  function  onChange (createEditor)
-  L118  function  getLanguageExtension
-  L120  method  javascript (getLanguageExtension.loaders)
-  L124  method  html (getLanguageExtension.loaders)
-  L128  method  css (getLanguageExtension.loaders)
-  L132  method  json (getLanguageExtension.loaders)
-  L136  method  python (getLanguageExtension.loaders)
-
-src/main.js:
-  L18  function  getPandocPath
-  L36  function  getFFmpegPath
-  L55  function  sanitizeErrorMessage
-  L64  function  createRateLimiter
-  L66  function  canProceed (createRateLimiter)
-  L83  function  validatePath
-  L136  function  resolveWritablePath
-  L181  function  isPathAccessible
-  L203  function  convertDataToMarkdown
-  L225  function  runPandocCmd
-  L247  function  parseCommand
-  L282  method  get (store)
-  L291  method  set (store)
-  L488  function  checkPandocAvailability
-  L500  function  createWindow
-  L586  function  buildRecentFilesMenu
-  L599  method  click (buildRecentFilesMenu.anonymousObjectc5643c890c05)
-  L637  function  getRecentFiles
-  L647  function  createMenu
-  L872  method  click (createMenu.anonymousObjectc5643c890e05.anonymousObjectc5643c894505)
-  L1118  method  click (createMenu.anonymousObjectc5643c895205.anonymousObjectc5643c897e05)
-  L1279  method  click (createMenu.anonymousObjectc5643c899305.anonymousObjectc5643c89a505)
-  L1351  function  showAboutDialog
-  L1452  function  showDependenciesDialog
-  L1564  function  openPDFFile
-  L1583  function  openFile
-  L1622  function  openPdfFile
-  L1645  function  saveAsFile
-  L1664  function  exportFile
-  L1673  function  showExportOptionsDialog
-  L1676  function  showBatchConversionDialog
-  L1681  function  selectWordTemplate
-  L1705  function  showTemplateSettings
-  L1902  function  processDynamicFields
-  L1921  function  setDocxPageSize
-  L1980  function  addHeaderFooterToDocx
-  L2111  function  exportWordWithTemplate
-  L2153  function  exportPDFViaWordTemplate
-  L2231  function  showUniversalConverterDialog
-  L2236  function  showPDFEditorDialog
-  L2246  function  checkConverterAvailable
-  L2370  function  collectFiles
-  L2464  function  convertWithLibreOffice
-  L2498  function  convertWithImageMagick
-  L2507  function  convertWithFFmpeg
-  L2515  function  convertWithPandoc
-  L2521  function  performExportWithOptions
-  L2805  function  tryPdfFallback
-  L2882  function  showExportSuccess
-  L2892  function  exportWithPandoc
-  L2964  function  exportToHTML
-  L3080  function  exportToPDFElectron
-  L3224  function  exportSpreadsheet
-  L3233  function  importDocument
-  L3355  function  setTheme
-  L3536  function  extractTablesFromMarkdown
-  L3574  function  performBatchConversion
-  L3597  function  findMarkdownFiles (performBatchConversion)
-  L3636  function  processNextFile (performBatchConversion)
-  L3970  function  handleCLIConversion
-  L3997  function  showConversionDialog
-  L4064  function  performCLIConversion
-  L4098  function  buildPandocCommand
-  L4319  function  openFileFromPath
-  L4394  function  openAsciiGenerator
-  L4426  function  openTableGenerator
-  L4724  function  loadSnippets
-  L4734  function  saveSnippetsFile
-
-src/main/GitOperations.js:
-  L3  function  getGitInstance
-  L7  function  getStatus
-  L16  function  stage
-  L26  function  commit
-  L35  function  log
-
-src/main/PDFOperations.js:
-  L5  function  parsePageRanges
-  L28  function  hexToRgb
-  L39  function  pdfMerge
-  L59  function  pdfSplit
-  L126  function  pdfCompress
-  L152  function  pdfRotate
-  L182  function  pdfDeletePages
-  L208  function  pdfReorder
-  L233  function  pdfWatermark
-  L319  function  pdfEncrypt
-  L353  function  pdfDecrypt
-  L370  function  pdfSetPermissions
-  L404  function  executeOperation
-  L431  function  getPageCount
-
-src/plugins/built-in/_sample/index.js:
-  L3  class  SamplePlugin
-  L4  method  init (SamplePlugin)
-
-src/plugins/built-in/writing-studio/goal-tracker.js:
-  L3  class  GoalTracker
-  L7  method  constructor (GoalTracker)
-  L11  method  _getHistory (GoalTracker)
-  L16  method  _setHistory (GoalTracker)
-  L20  method  _setHistoryDay (GoalTracker)
-  L26  method  addWords (GoalTracker)
-  L37  method  getDailyProgress (GoalTracker)
-  L44  method  getStreak (GoalTracker)
-  L61  method  getLast30Days (GoalTracker)
-  L74  method  getWeeklyTotal (GoalTracker)
-
-src/plugins/built-in/writing-studio/index.js:
-  L7  class  WritingStudioPlugin
-  L8  method  init (WritingStudioPlugin)
-  L34  method  _registerCommands (WritingStudioPlugin)
-  L112  method  _registerStatusBar (WritingStudioPlugin)
-  L123  method  deactivate (WritingStudioPlugin)
-  L127  method  getEngines (WritingStudioPlugin)
-
-src/plugins/built-in/writing-studio/panels/goals-panel.js:
-  L1  function  renderGoalsPanel
-
-src/plugins/built-in/writing-studio/panels/manuscript-panel.js:
-  L1  function  renderManuscriptPanel
-
-src/plugins/built-in/writing-studio/panels/proofread-panel.js:
-  L1  function  renderProofreadPanel
-  L41  method  callback (anonymousObject39a0f0110105)
-  L50  function  renderIssues
-
-src/plugins/built-in/writing-studio/panels/snapshots-panel.js:
-  L1  function  renderSnapshotsPanel
-
-src/plugins/built-in/writing-studio/project-manager.js:
-  L1  class  ProjectManager
-  L5  method  constructor (ProjectManager)
-  L9  method  createProject (ProjectManager)
-  L21  method  loadProject (ProjectManager)
-  L27  method  _saveProject (ProjectManager)
-  L31  method  addChapter (ProjectManager)
-  L38  method  updateChapter (ProjectManager)
-  L45  method  compileManuscript (ProjectManager)
-  L56  method  getStats (ProjectManager)
-
-src/plugins/built-in/writing-studio/snapshot-manager.js:
-  L1  class  SnapshotManager
-  L6  method  constructor (SnapshotManager)
-  L11  method  _getAll (SnapshotManager)
-  L16  method  _saveAll (SnapshotManager)
-  L20  method  create (SnapshotManager)
-  L34  method  list (SnapshotManager)
-  L38  method  getById (SnapshotManager)
-  L42  method  restore (SnapshotManager)
-  L48  method  delete (SnapshotManager)
-  L53  method  diff (SnapshotManager)
-  L71  method  prune (SnapshotManager)
-
-src/plugins/built-in/writing-studio/sprint-engine.js:
-  L1  class  SprintEngine
-  L6  method  constructor (SprintEngine)
-  L14  method  start (SprintEngine)
-  L22  method  stop (SprintEngine)
-  L33  method  tick (SprintEngine)
-  L43  method  isActive (SprintEngine)
-  L47  method  getRemaining (SprintEngine)
-
-src/plugins/event-bus.js:
-  L1  class  EventBus
-  L2  method  constructor (EventBus)
-  L6  method  on (EventBus)
-  L13  method  off (EventBus)
-  L25  method  emit (EventBus)
-  L37  method  hasHandler (EventBus)
-
-src/plugins/plugin-api.js:
-  L1  class  PluginAPI
-  L7  method  init (PluginAPI)
-  L12  method  activate (PluginAPI)
-  L15  method  deactivate (PluginAPI)
-  L18  method  getManifest (PluginAPI)
-
-src/plugins/plugin-context.js:
-  L1  class  PluginContext
-  L14  method  constructor (PluginContext)
-  L23  method  register (PluginContext.constructor.commands)
-  L24  function  safeHandler (PluginContext.constructor.commands.register)
-  L65  method  registerPreHook (PluginContext.constructor.exports)
-  L68  method  registerPostHook (PluginContext.constructor.exports)
-
-src/plugins/plugin-loader.js:
-  L4  class  PluginLoader
-  L8  method  constructor (PluginLoader)
-  L17  method  discoverPlugins (PluginLoader)
-  L66  method  validateManifest (PluginLoader)
-
-src/plugins/plugin-registry.js:
-  L4  class  PluginRegistry
-  L5  method  constructor (PluginRegistry)
-  L15  method  register (PluginRegistry)
-  L49  method  getPlugin (PluginRegistry)
-  L53  method  getAll (PluginRegistry)
-  L57  method  activate (PluginRegistry)
-  L68  method  deactivate (PluginRegistry)
-
-src/plugins/settings-store.js:
-  L1  class  SettingsStore
-  L5  method  constructor (SettingsStore)
-  L9  method  get (SettingsStore)
-  L13  method  set (SettingsStore)
-  L17  method  onChanged (SettingsStore)
-
-src/preload.js:
-  L257  method  send (anonymousObjectb0724fcb0105)
-  L271  method  invoke (anonymousObjectb0724fcb0105)
-  L290  method  on (anonymousObjectb0724fcb0105)
-  L292  function  subscription (anonymousObjectb0724fcb0105.on)
-  L310  method  once (anonymousObjectb0724fcb0105)
-  L322  method  removeAllListeners (anonymousObjectb0724fcb0105)
-
-src/print-preview.js:
-  L1  class  PrintPreview
-  L2  method  constructor (PrintPreview)
-  L9  method  open (PrintPreview)
-  L20  method  close (PrintPreview)
-  L28  method  setupEventListeners (PrintPreview)
-  L53  method  updateScaleLabel (PrintPreview)
-  L59  method  updatePreview (PrintPreview)
-  L111  method  refreshPreview (PrintPreview)
-  L117  method  getOptions (PrintPreview)
-  L130  method  executePrint (PrintPreview)
-
-src/renderer.js:
-  L19  method  send (window.electronAPI)
-  L22  method  invoke (window.electronAPI)
-  L25  method  on (window.electronAPI)
-  L26  function  subscription (window.electronAPI.on)
-  L32  method  once (window.electronAPI)
-  L35  method  removeAllListeners (window.electronAPI)
-  L81  function  getSidebarManager
-  L85  function  getRenderTemplatesPanel
-  L90  function  getRenderExplorerPanel
-  L95  function  getRenderGitPanel
-  L99  function  getRenderSnippetsPanel
-  L105  function  getRenderOutlinePanel
-  L110  function  getReplPanel
-  L114  function  getCommandPalette
-  L118  function  getPrintPreview
-  L122  function  getCreateWelcomeContent
-  L127  function  getZenMode
-  L132  function  getShowAnalyticsModal
-  L137  function  ensureToastContainer
-  L147  function  notifyUser
-  L159  function  dismiss (notifyUser)
-  L173  method  highlight (anonymousObject71555c7b0405)
-  L202  method  start (anonymousObject71555c7b0705.anonymousObject71555c7b0805)
-  L205  method  tokenizer (anonymousObject71555c7b0705.anonymousObject71555c7b0805)
-  L221  method  renderer (anonymousObject71555c7b0705.anonymousObject71555c7b0805)
-  L241  function  plantumlEncode (notifyUser)
-  L249  function  scopeCSS (notifyUser)
-  L271  class  TabManager (notifyUser)
-  L272  method  constructor (notifyUser.TabManager)
-  L306  method  setupEventListeners (notifyUser.TabManager)
-  L354  method  createNewTab (notifyUser.TabManager)
-  L379  method  createPdfTab (notifyUser.TabManager)
-  L405  method  createPdfTabElements (notifyUser.TabManager)
-  L436  method  setupPdfTabEvents (notifyUser.TabManager)
-  L503  method  loadPdfInTab (notifyUser.TabManager)
-  L528  method  renderPdfPageInTab (notifyUser.TabManager)
-  L555  method  createTabElements (notifyUser.TabManager)
-  L580  method  onChange (anonymousObject71555c7b0d05)
-  L602  method  onUpdate (anonymousObject71555c7b0d05)
-  L614  method  switchToTab (notifyUser.TabManager)
-  L641  method  switchToNextTab (notifyUser.TabManager)
-  L647  method  closeTab (notifyUser.TabManager)
-  L692  method  updateTabBar (notifyUser.TabManager)
-  L718  method  updateUI (notifyUser.TabManager)
-  L748  method  saveCurrentTabState (notifyUser.TabManager)
-  L756  method  restoreTabState (notifyUser.TabManager)
-  L765  method  focusActiveEditor (notifyUser.TabManager)
-  L771  method  updatePreview (notifyUser.TabManager)
-  L800  method  _hash (notifyUser.TabManager)
-  L809  method  _renderPreview (notifyUser.TabManager)
-  L963  function  onerror (img)
-  L997  method  updatePreviewVisibility (notifyUser.TabManager)
-  L1010  method  updateLineNumbers (notifyUser.TabManager)
-  L1015  method  updateWordCount (notifyUser.TabManager)
-  L1031  method  updateCursorPosition (notifyUser.TabManager)
-  L1038  method  updateFilePath (notifyUser.TabManager)
-  L1046  method  updateBreadcrumb (notifyUser.TabManager)
-  L1054  method  setupEditorEvents (notifyUser.TabManager)
-  L1058  method  handleEditorInput (notifyUser.TabManager)
-  L1073  method  startAutoSave (notifyUser.TabManager)
-  L1081  method  stopAutoSave (notifyUser.TabManager)
-  L1087  method  performAutoSave (notifyUser.TabManager)
-  L1103  method  showAutoSaveIndicator (notifyUser.TabManager)
-  L1119  method  addToRecentFiles (notifyUser.TabManager)
-  L1135  method  getRecentFiles (notifyUser.TabManager)
-  L1145  method  setupToolbarEvents (notifyUser.TabManager)
-  L1215  method  wrapSelection (notifyUser.TabManager)
-  L1233  method  insertAtLineStart (notifyUser.TabManager)
-  L1249  method  insertTable (notifyUser.TabManager)
-  L1259  method  insertCodeBlock (notifyUser.TabManager)
-  L1277  method  insertHorizontalRule (notifyUser.TabManager)
-  L1280  method  setupFindEvents (notifyUser.TabManager)
-  L1350  method  performFind (notifyUser.TabManager)
-  L1384  method  findNext (notifyUser.TabManager)
-  L1390  method  findPrevious (notifyUser.TabManager)
-  L1399  method  highlightMatch (notifyUser.TabManager)
-  L1430  method  replaceOne (notifyUser.TabManager)
-  L1454  method  replaceAll (notifyUser.TabManager)
-  L1485  method  clearFindHighlights (notifyUser.TabManager)
-  L1492  method  checkForLargeFile (notifyUser.TabManager)
-  L1508  method  openFile (notifyUser.TabManager)
-  L1555  method  getEditorContent (notifyUser.TabManager)
-  L1564  method  setEditorContent (notifyUser.TabManager)
-  L1579  method  insertAtCursor (notifyUser.TabManager)
-  L1594  method  getSelection (notifyUser.TabManager)
-  L1602  method  replaceSelection (notifyUser.TabManager)
-  L1616  method  getCurrentContent (notifyUser.TabManager)
-  L1620  method  getCurrentFilePath (notifyUser.TabManager)
-  L1735  method  render (anonymousObject71555c7b2d05)
-  L1788  method  registerIndicator (anonymousObject71555c7b3105.statusBar)
-  L1881  function  onload (reader)
-  L2032  method  onChange (anonymousObject71555c7b3405)
-  L2040  method  onUpdate (anonymousObject71555c7b3405)
-  L2164  function  applyCustomPreviewCSS (notifyUser)
-  L2174  function  triggerLoadCustomCSS (notifyUser)
-  L2188  function  triggerClearCustomCSS (notifyUser)
-  L2202  function  updateFontSizes (notifyUser)
-  L2234  function  openPrintPreviewDialog (notifyUser)
-  L2255  function  showExportDialog (notifyUser)
-  L2269  function  hideExportDialog (notifyUser)
-  L2273  function  initializeExportForm (notifyUser)
-  L2343  function  collectExportOptions (notifyUser)
-  L2444  function  loadExportProfiles (notifyUser)
-  L2456  function  saveExportProfiles (notifyUser)
-  L2459  function  populateProfileDropdown (notifyUser)
-  L2476  function  saveCurrentProfile (notifyUser)
-  L2511  function  loadProfile (notifyUser)
-  L2545  function  deleteSelectedProfile (notifyUser)
-  L2679  function  onchange (input)
-  L2776  function  showBatchDialog (notifyUser)
-  L2796  function  hideBatchDialog (notifyUser)
-  L2799  function  updateBatchProgress (notifyUser)
-  L2816  function  validateBatchForm (notifyUser)
-  L3375  function  showUniversalConverterDialog (notifyUser)
-  L3383  function  updateConverterFormats (notifyUser)
-  L3423  function  updateConverterAdvancedOptions (notifyUser)
-  L3434  function  collectConverterAdvancedOptions (notifyUser)
-  L3645  function  showPDFEditorDialog (notifyUser)
-  L3769  function  hidePDFEditorDialog (notifyUser)
-  L3780  function  updateMergeFilesList (notifyUser)
-  L4107  function  getPDFStatusElement (notifyUser)
-  L4110  function  showPDFStatus (notifyUser)
-  L4117  function  clearPDFStatus (notifyUser)
-  L4124  function  showPDFValidationMessage (notifyUser)
-  L4135  function  processPDFOperation (notifyUser)
-  L4379  function  initMathSupport (notifyUser)
-  L4391  function  onload (katexJS)
-  L4396  function  onload (autoRenderJS)
-  L4417  function  openHeaderFooterDialog (notifyUser)
-  L4425  function  closeHeaderFooterDialog (notifyUser)
-  L4430  function  openFieldPickerDialog (notifyUser)
-  L4436  function  closeFieldPickerDialog (notifyUser)
-  L4477  function  toggleConfigContent (notifyUser)
-  L4488  function  saveHeaderFooterSettings (notifyUser)
-  L4509  function  browseForLogo (notifyUser)
-  L4519  function  clearLogo (notifyUser)
-  L4528  function  insertDynamicField (notifyUser)
-  L4594  function  showTableGenerator (notifyUser)
-  L4605  function  hideTableGenerator (notifyUser)
-  L4608  function  generateTablePreview (notifyUser)
-  L4616  function  generateMarkdownTable (notifyUser)
-  L4685  function  insertGeneratedTable (notifyUser)
-  L4742  function  showASCIIGenerator (notifyUser)
-  L4753  function  hideASCIIGenerator (notifyUser)
-  L4756  function  switchASCIIMode (notifyUser)
-  L4784  function  generateASCIIPreview (notifyUser)
-  L4802  function  textToASCII (notifyUser)
-  L5238  function  createASCIIBox (notifyUser)
-  L5312  function  getASCIITemplate (notifyUser)
-  L5469  function  loadASCIITemplate (notifyUser)
-  L5473  function  insertASCIIArt (notifyUser)
-  L5523  function  anonymousFunction71555c7bd300
-  L5603  function  getPdfjsLib (notifyUser)
-  L5612  function  openPdfFile (notifyUser)
-  L5627  function  renderPdfPage (notifyUser)
-  L5733  function  closePdfViewer (notifyUser)
-  L5783  function  openPdfEditorDialog (notifyUser)
-  L5831  function  initPaneResizer (notifyUser)
-  L5920  function  onPDFFileSelected (notifyUser)
-  L5935  function  loadPDFThumbnails (notifyUser)
-  L5966  function  renderThumbnailGrid (notifyUser)
-  L6060  function  renderThumbnail (notifyUser)
-  L6085  function  syncRotateInput (notifyUser)
-  L6094  function  syncDeleteInput (notifyUser)
-  L6103  function  syncReorderInput (notifyUser)
-
-src/repl/repl-panel.js:
-  L1  class  ReplPanel
-  L2  method  constructor (ReplPanel)
-  L8  method  setupEventListeners (ReplPanel)
-  L13  method  toggle (ReplPanel)
-  L19  method  show (ReplPanel)
-  L25  method  clear (ReplPanel)
-  L29  method  appendOutput (ReplPanel)
-  L42  method  escapeHtml (ReplPanel)
-
-src/sidebar/explorer-panel.js:
-  L1  function  renderExplorerPanel
-  L40  function  renderTree
-  L79  function  getFileIcon
-
-src/sidebar/git-panel.js:
-  L1  function  renderGitPanel
-  L24  function  loadGitStatus (renderGitPanel)
-
-src/sidebar/outline-panel.js:
-  L6  function  renderOutlinePanel
-  L18  function  parseHeadings (renderOutlinePanel)
-  L36  function  findActiveHeading (renderOutlinePanel)
-  L48  function  renderHeadings (renderOutlinePanel)
-  L89  function  escapeHtml (renderOutlinePanel)
-  L95  function  refresh (renderOutlinePanel)
-  L100  function  setActiveHeading (renderOutlinePanel)
-
-src/sidebar/sidebar-manager.js:
-  L1  class  SidebarManager
-  L2  method  constructor (SidebarManager)
-  L11  method  setupEventListeners (SidebarManager)
-  L20  method  registerPanel (SidebarManager)
-  L24  method  togglePanel (SidebarManager)
-  L32  method  expand (SidebarManager)
-  L45  method  collapse (SidebarManager)
-
-src/sidebar/snippets-panel.js:
-  L1  function  renderSnippetsPanel
-  L14  function  loadSnippets (renderSnippetsPanel)
-  L19  function  renderList (renderSnippetsPanel)
-
-src/sidebar/templates-panel.js:
-  L18  function  renderTemplatesPanel
-
-src/utils/ModalManager.js:
-  L5  class  ModalManager
-  L16  method  constructor (ModalManager)
-  L31  method  init (ModalManager)
-  L47  method  setupCloseTriggers (ModalManager)
-  L51  function  handler (ModalManager.setupCloseTriggers)
-  L65  function  handler
-  L74  method  getFocusableElements (ModalManager)
-  L89  method  trapFocus (ModalManager)
-  L111  method  handleKeydown (ModalManager)
-  L119  method  open (ModalManager)
-  L141  function  keydownHandler (ModalManager.open)
-  L164  method  close (ModalManager)
-  L182  function  addHidden (ModalManager.close)
-  L188  function  onTransitionEnd (ModalManager.close)
-  L223  method  isOpen (ModalManager)
-  L227  method  destroy (ModalManager)
-
-src/welcome.js:
-  L1  function  createWelcomeContent
-
-src/wordTemplateExporter.js:
-  L11  class  WordTemplateExporter
-  L12  method  constructor (WordTemplateExporter)
-  L24  method  preprocessMarkdownForWordExport (WordTemplateExporter)
-  L33  function  flush (WordTemplateExporter.preprocessMarkdownForWordExport)
-  L59  function  stripArtifacts (WordTemplateExporter.preprocessMarkdownForWordExport)
-
-src/zen-mode.js:
-  L10  class  ZenMode
-  L14  method  constructor (ZenMode)
-  L23  method  activate (ZenMode)
-  L65  method  deactivate (ZenMode)
-  L101  method  toggle (ZenMode)
-  L109  method  _applyTypewriterBehavior (ZenMode)
-  L111  function  scrollFn (ZenMode._applyTypewriterBehavior)
-  L151  method  _createHUD (ZenMode)
-  L169  method  _updateHUD (ZenMode)
-  L220  method  constructor (anonymousObject3acf7ce30205)
-  L240  function  getOpacity
-  L250  method  constructor (anonymousObject3acf7ce30405)
-
-tests/git-operations.test.js:
-  L26  function  asyncFn
-  L35  function  asyncFnWithError
-
-tests/main-utils.test.js:
-  L7  function  sanitizeErrorMessage
-  L49  function  createRateLimiter
-  L51  function  canProceed (createRateLimiter)
-
-tests/markdown-extensions.test.js:
-  L83  method  start (extension)
-  L86  method  tokenizer (extension)
-  L102  method  renderer (extension)
-  L151  function  plantumlEncode
-  L176  function  slugify
-  L203  function  scopeCSS
-
-tests/modal-manager.test.js:
-  L11  function  createModalElement
-
-tests/plugin-api.test.js:
-  L18  class  MyPlugin
-  L19  method  init (MyPlugin)
-
-tests/plugin-context.test.js:
-  L39  function  badHandler
-
-tests/plugin-loader.test.js:
-  L17  function  writeManifest
-
-tests/plugin-registry.test.js:
-  L5  class  TestPlugin
-  L6  method  init (TestPlugin)
-  L10  method  activate (TestPlugin)
-  L13  method  deactivate (TestPlugin)
-  L69  class  BadPlugin
-  L70  method  init (BadPlugin)
-
-tests/setup.js:
-  L96  function  error (console)
-
-tests/sidebar.test.js:
-  L41  method  render (anonymousObjectfe2d35d70105)
-  L52  method  render (anonymousObjectfe2d35d70205)
-  L62  method  render (anonymousObjectfe2d35d70305)
-  L68  method  render (anonymousObjectfe2d35d70405)
-  L80  method  render (anonymousObjectfe2d35d70505)
-  L88  method  render (anonymousObjectfe2d35d70605)
-  L96  method  render (anonymousObjectfe2d35d70705)
-  L120  method  render (anonymousObjectfe2d35d70905)
-  L130  method  render (anonymousObjectfe2d35d70a05)
-
-tests/utils.test.js:
-  L9  function  parseCommand
-  L78  function  hexToRgb
-  L121  function  getExtension
-  L133  function  replaceExtension
-```

src/adapters/electron/fs.js

@@ -65,7 +65,7 @@ const electronFsAdapter = {
             isDir: entry.isDirectory,
             size: entry.size ?? 0,
             modified: entry.modified ?? 0,
-      path: entry.path,
+            path: entry.path
         }));
     },
 
@@ -105,7 +105,7 @@ const electronFsAdapter = {
      */
     async move(source, dest) {
         return await window.electronAPI.file.move(source, dest);
-  },
+    }
 };
 
 module.exports = { electronFsAdapter };

src/analytics/analytics-panel.js

@@ -61,15 +61,11 @@ function showAnalyticsModal(tabManager) {
                         <span class="analytics-label">Avg Sentence</span>
                         <span class="analytics-value">${metrics.avgSentenceLength} words</span>
                     </div>
-                    ${
-                      metrics.longestSentenceLength > 0
-                        ? `
+                    ${metrics.longestSentenceLength > 0 ? `
                     <div class="analytics-row analytics-longest">
                         <span class="analytics-label">Longest (${metrics.longestSentenceLength} words)</span>
                         <span class="analytics-value analytics-sentence-preview">${escapeHtml(metrics.longestSentence)}</span>
-                    </div>`
-                        : ''
-                    }
+                    </div>` : ''}
                 </div>
 
                 <div class="analytics-section">
@@ -78,19 +74,13 @@ function showAnalyticsModal(tabManager) {
                         <span class="analytics-label">Unique</span>
                         <span class="analytics-value">${metrics.uniqueWordCount} / ${metrics.wordCount}<small>${metrics.lexicalDiversity}%</small></span>
                     </div>
-                    ${
-                      metrics.topWords.length > 0
-                        ? `
+                    ${metrics.topWords.length > 0 ? `
                     <div class="word-cloud">
-                        ${metrics.topWords
-                          .map((w) => {
+                        ${metrics.topWords.map(w => {
                             const scale = 13 + Math.round((w.count / maxCount) * 3);
                             return `<span class="word-tag" style="font-size:${scale}px">${escapeHtml(w.word)}<small>${w.count}</small></span>`;
-                          })
-                          .join('')}
-                    </div>`
-                        : ''
-                    }
+                        }).join('')}
+                    </div>` : ''}
                 </div>
             </div>
         </div>

src/analytics/writing-analytics.js

@@ -4,74 +4,14 @@
  */
 
 const STOP_WORDS = new Set([
-  'the',
-  'a',
-  'an',
-  'is',
-  'are',
-  'was',
-  'were',
-  'be',
-  'been',
-  'have',
-  'has',
-  'had',
-  'do',
-  'does',
-  'did',
-  'will',
-  'would',
-  'could',
-  'should',
-  'to',
-  'of',
-  'in',
-  'for',
-  'on',
-  'with',
-  'at',
-  'by',
-  'from',
-  'as',
-  'and',
-  'or',
-  'but',
-  'if',
-  'it',
-  'its',
-  'this',
-  'that',
-  'these',
-  'those',
-  'i',
-  'me',
-  'my',
-  'we',
-  'our',
-  'you',
-  'your',
-  'he',
-  'him',
-  'his',
-  'she',
-  'her',
-  'they',
-  'them',
-  'their',
-  'not',
-  'no',
-  'so',
-  'than',
-  'too',
-  'very',
-  'also',
-  'just',
-  'about',
-  'up',
-  'out',
-  'what',
-  'which',
-  'who',
+    'the', 'a', 'an', 'is', 'are', 'was', 'were', 'be', 'been',
+    'have', 'has', 'had', 'do', 'does', 'did', 'will', 'would',
+    'could', 'should', 'to', 'of', 'in', 'for', 'on', 'with',
+    'at', 'by', 'from', 'as', 'and', 'or', 'but', 'if', 'it',
+    'its', 'this', 'that', 'these', 'those', 'i', 'me', 'my',
+    'we', 'our', 'you', 'your', 'he', 'him', 'his', 'she', 'her',
+    'they', 'them', 'their', 'not', 'no', 'so', 'than', 'too',
+    'very', 'also', 'just', 'about', 'up', 'out', 'what', 'which', 'who'
 ]);
 
 function countSyllables(word) {
@@ -108,23 +48,17 @@ function analyze(text) {
             avgSentenceLength: 0,
             longestSentence: '',
             longestSentenceLength: 0,
-      topWords: [],
+            topWords: []
         };
     }
 
     const words = extractWords(text);
     const wordCount = words.length;
 
-  const sentences = text
-    .split(/[.!?]+/)
-    .map((s) => s.trim())
-    .filter(Boolean);
+    const sentences = text.split(/[.!?]+/).map(s => s.trim()).filter(Boolean);
     const sentenceCount = Math.max(sentences.length, 1);
 
-  const paragraphs = text
-    .split(/\n\s*\n/)
-    .map((p) => p.trim())
-    .filter(Boolean);
+    const paragraphs = text.split(/\n\s*\n/).map(p => p.trim()).filter(Boolean);
     const paragraphCount = Math.max(paragraphs.length, 1);
 
     let totalSyllables = 0;
@@ -132,23 +66,16 @@ function analyze(text) {
         totalSyllables += countSyllables(w);
     }
 
-  const fleschEase =
-    Math.round(
-      (206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount)) * 10
-    ) / 10;
-  const fleschGrade =
-    Math.round(
-      (0.39 * (wordCount / sentenceCount) + 11.8 * (totalSyllables / wordCount) - 15.59) * 10
-    ) / 10;
+    const fleschEase = Math.round((206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount)) * 10) / 10;
+    const fleschGrade = Math.round((0.39 * (wordCount / sentenceCount) + 11.8 * (totalSyllables / wordCount) - 15.59) * 10) / 10;
     const readabilityLabel = getReadabilityLabel(fleschEase);
 
     const readingTime = Math.ceil(wordCount / 200);
     const speakingTime = Math.ceil(wordCount / 130);
 
-  const uniqueWords = new Set(words.map((w) => w.toLowerCase()));
+    const uniqueWords = new Set(words.map(w => w.toLowerCase()));
     const uniqueWordCount = uniqueWords.size;
-  const lexicalDiversity =
-    wordCount > 0 ? Math.round((uniqueWordCount / wordCount) * 1000) / 10 : 0;
+    const lexicalDiversity = wordCount > 0 ? Math.round((uniqueWordCount / wordCount) * 1000) / 10 : 0;
 
     const avgSentenceLength = Math.round((wordCount / sentenceCount) * 10) / 10;
 
@@ -193,7 +120,7 @@ function analyze(text) {
         avgSentenceLength,
         longestSentence,
         longestSentenceLength,
-    topWords,
+        topWords
     };
 }
 

src/ascii-generator.html

@@ -1,13 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ASCII Art Generator - MarkdownConverter</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <style>
         :root {
             --ci-dark-gray: #464646;
@@ -106,9 +103,7 @@
             color: var(--ci-dark-gray);
         }
 
-      .form-input,
-      .form-select,
-      .form-textarea {
+        .form-input, .form-select, .form-textarea {
             width: 100%;
             padding: 10px 14px;
             border: 2px solid var(--ci-light-gray);
@@ -118,9 +113,7 @@
             transition: border-color 0.2s;
         }
 
-      .form-input:focus,
-      .form-select:focus,
-      .form-textarea:focus {
+        .form-input:focus, .form-select:focus, .form-textarea:focus {
             outline: none;
             border-color: var(--ci-accent);
         }
@@ -234,8 +227,8 @@
             letter-spacing: 0.05em;
         }
     </style>
-  </head>
-  <body>
+</head>
+<body>
     <div class="header">
         <h1>ASCII Art Generator</h1>
     </div>
@@ -252,13 +245,7 @@
             <div id="text-mode" class="mode-section active">
                 <div class="form-group">
                     <label class="form-label">Text to Convert</label>
-            <input
-              type="text"
-              id="text-input"
-              class="form-input"
-              placeholder="Enter your text..."
-              maxlength="30"
-            />
+                    <input type="text" id="text-input" class="form-input" placeholder="Enter your text..." maxlength="30">
                 </div>
                 <div class="form-group">
                     <label class="form-label">Style</label>
@@ -276,11 +263,7 @@
             <div id="box-mode" class="mode-section">
                 <div class="form-group">
                     <label class="form-label">Text Content</label>
-            <textarea
-              id="box-text"
-              class="form-textarea"
-              placeholder="Enter text for the box..."
-            ></textarea>
+                    <textarea id="box-text" class="form-textarea" placeholder="Enter text for the box..."></textarea>
                 </div>
                 <div class="form-group">
                     <label class="form-label">Box Style</label>
@@ -294,15 +277,7 @@
                 </div>
                 <div class="form-group">
                     <label class="form-label">Padding</label>
-            <input
-              type="number"
-              id="box-padding"
-              class="form-input"
-              min="0"
-              max="10"
-              value="2"
-              style="width: 100px"
-            />
+                    <input type="number" id="box-padding" class="form-input" min="0" max="10" value="2" style="width: 100px;">
                 </div>
             </div>
 
@@ -366,262 +341,138 @@
             standard: {
                 height: 5,
                 chars: {
-            A: ['  /\\  ', ' /  \\ ', '/----\\', '|    |', '|    |'],
-            B: ['|----\\', '|    |', '|----/', '|    \\', '|----/'],
-            C: ['/----\\', '|     ', '|     ', '|     ', '\\----/'],
-            D: ['|----\\', '|    |', '|    |', '|    |', '|----/'],
-            E: ['|----', '|    ', '|--- ', '|    ', '|----'],
-            F: ['|----', '|    ', '|--- ', '|    ', '|    '],
-            G: ['/----\\', '|     ', '| |--\\', '|    |', '\\----/'],
-            H: ['|    |', '|    |', '|----/', '|    |', '|    |'],
-            I: ['|---|', '  |  ', '  |  ', '  |  ', '|---|'],
-            J: ['    |', '    |', '    |', '|   |', '\\---/'],
-            K: ['|   /', '|  / ', '|--  ', '|  \\ ', '|   \\'],
-            L: ['|    ', '|    ', '|    ', '|    ', '|----'],
-            M: ['|\\  /|', '| \\/ |', '|    |', '|    |', '|    |'],
-            N: ['|\\   |', '| \\  |', '|  \\ |', '|   \\|', '|    |'],
-            O: ['/----\\', '|    |', '|    |', '|    |', '\\----/'],
-            P: ['|----\\', '|    |', '|----/', '|     ', '|     '],
-            Q: ['/----\\', '|    |', '|  \\ |', '|   \\|', '\\----\\'],
-            R: ['|----\\', '|    |', '|----/', '|  \\  ', '|   \\ '],
-            S: ['/----\\', '|     ', '\\----\\', '     |', '\\----/'],
-            T: ['-----', '  |  ', '  |  ', '  |  ', '  |  '],
-            U: ['|    |', '|    |', '|    |', '|    |', '\\----/'],
-            V: ['|    |', '|    |', ' \\  / ', '  \\/  ', '      '],
-            W: ['|    |', '|    |', '|    |', '| /\\ |', '|/  \\|'],
-            X: ['\\    /', ' \\  / ', '  \\/  ', '  /\\  ', ' /  \\ '],
-            Y: ['\\   /', ' \\ / ', '  |  ', '  |  ', '  |  '],
-            Z: ['-----', '   / ', '  /  ', ' /   ', '-----'],
+                    'A': ['  /\\  ', ' /  \\ ', '/----\\', '|    |', '|    |'],
+                    'B': ['|----\\', '|    |', '|----/', '|    \\', '|----/'],
+                    'C': ['/----\\', '|     ', '|     ', '|     ', '\\----/'],
+                    'D': ['|----\\', '|    |', '|    |', '|    |', '|----/'],
+                    'E': ['|----', '|    ', '|--- ', '|    ', '|----'],
+                    'F': ['|----', '|    ', '|--- ', '|    ', '|    '],
+                    'G': ['/----\\', '|     ', '| |--\\', '|    |', '\\----/'],
+                    'H': ['|    |', '|    |', '|----/', '|    |', '|    |'],
+                    'I': ['|---|', '  |  ', '  |  ', '  |  ', '|---|'],
+                    'J': ['    |', '    |', '    |', '|   |', '\\---/'],
+                    'K': ['|   /', '|  / ', '|--  ', '|  \\ ', '|   \\'],
+                    'L': ['|    ', '|    ', '|    ', '|    ', '|----'],
+                    'M': ['|\\  /|', '| \\/ |', '|    |', '|    |', '|    |'],
+                    'N': ['|\\   |', '| \\  |', '|  \\ |', '|   \\|', '|    |'],
+                    'O': ['/----\\', '|    |', '|    |', '|    |', '\\----/'],
+                    'P': ['|----\\', '|    |', '|----/', '|     ', '|     '],
+                    'Q': ['/----\\', '|    |', '|  \\ |', '|   \\|', '\\----\\'],
+                    'R': ['|----\\', '|    |', '|----/', '|  \\  ', '|   \\ '],
+                    'S': ['/----\\', '|     ', '\\----\\', '     |', '\\----/'],
+                    'T': ['-----', '  |  ', '  |  ', '  |  ', '  |  '],
+                    'U': ['|    |', '|    |', '|    |', '|    |', '\\----/'],
+                    'V': ['|    |', '|    |', ' \\  / ', '  \\/  ', '      '],
+                    'W': ['|    |', '|    |', '|    |', '| /\\ |', '|/  \\|'],
+                    'X': ['\\    /', ' \\  / ', '  \\/  ', '  /\\  ', ' /  \\ '],
+                    'Y': ['\\   /', ' \\ / ', '  |  ', '  |  ', '  |  '],
+                    'Z': ['-----', '   / ', '  /  ', ' /   ', '-----'],
                     ' ': ['     ', '     ', '     ', '     ', '     '],
-            0: ['/---\\', '|   |', '| / |', '|/  |', '\\---/'],
-            1: ['  /| ', ' / | ', '   | ', '   | ', ' ----'],
-            2: ['/---\\', '    |', ' ---/', '/    ', '-----'],
-            3: ['----\\', '    |', ' ---/', '    |', '----/'],
-            4: ['|   |', '|   |', '-----', '    |', '    |'],
-            5: ['-----', '|    ', '----\\', '    |', '----/'],
-            6: ['/----', '|    ', '|---\\', '|   |', '\\---/'],
-            7: ['-----', '   / ', '  /  ', ' /   ', '/    '],
-            8: ['/---\\', '|   |', ' --- ', '|   |', '\\---/'],
-            9: ['/---\\', '|   |', '\\----', '    |', '----/'],
-          },
+                    '0': ['/---\\', '|   |', '| / |', '|/  |', '\\---/'],
+                    '1': ['  /| ', ' / | ', '   | ', '   | ', ' ----'],
+                    '2': ['/---\\', '    |', ' ---/', '/    ', '-----'],
+                    '3': ['----\\', '    |', ' ---/', '    |', '----/'],
+                    '4': ['|   |', '|   |', '-----', '    |', '    |'],
+                    '5': ['-----', '|    ', '----\\', '    |', '----/'],
+                    '6': ['/----', '|    ', '|---\\', '|   |', '\\---/'],
+                    '7': ['-----', '   / ', '  /  ', ' /   ', '/    '],
+                    '8': ['/---\\', '|   |', ' --- ', '|   |', '\\---/'],
+                    '9': ['/---\\', '|   |', '\\----', '    |', '----/']
+                }
             },
             banner: {
                 height: 7,
                 chars: {
-            A: [
-              ' ##### ',
-              ' ##   ##',
-              '##     ##',
-              '#########',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-            ],
-            B: [
-              '######## ',
-              '##     ##',
-              '##     ##',
-              '######## ',
-              '##     ##',
-              '##     ##',
-              '######## ',
-            ],
-            C: [' ###### ', '##    ##', '##      ', '##      ', '##      ', '##    ##', ' ###### '],
-            D: [
-              '######## ',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '######## ',
-            ],
-            E: ['########', '##      ', '##      ', '###### ', '##      ', '##      ', '########'],
-            F: ['########', '##      ', '##      ', '###### ', '##      ', '##      ', '##      '],
-            G: [' ###### ', '##    ##', '##      ', '##  ####', '##    ##', '##    ##', ' ###### '],
-            H: [
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '#########',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-            ],
-            I: ['####', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', '####'],
-            J: ['      ##', '      ##', '      ##', '      ##', '##    ##', '##    ##', ' ###### '],
-            K: ['##    ##', '##   ## ', '##  ##  ', '#####   ', '##  ##  ', '##   ## ', '##    ##'],
-            L: ['##      ', '##      ', '##      ', '##      ', '##      ', '##      ', '########'],
-            M: [
-              '##     ##',
-              '###   ###',
-              '#### ####',
-              '## ### ##',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-            ],
-            N: ['##    ##', '###   ##', '####  ##', '## ## ##', '##  ####', '##   ###', '##    ##'],
-            O: [
-              ' ####### ',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              ' ####### ',
-            ],
-            P: [
-              '######## ',
-              '##     ##',
-              '##     ##',
-              '######## ',
-              '##       ',
-              '##       ',
-              '##       ',
-            ],
-            Q: [
-              ' ####### ',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '##  ## ##',
-              '##    ## ',
-              ' ##### ##',
-            ],
-            R: [
-              '######## ',
-              '##     ##',
-              '##     ##',
-              '######## ',
-              '##   ##  ',
-              '##    ## ',
-              '##     ##',
-            ],
-            S: [' ###### ', '##    ##', '##      ', ' ###### ', '      ##', '##    ##', ' ###### '],
-            T: ['########', '   ##   ', '   ##   ', '   ##   ', '   ##   ', '   ##   ', '   ##   '],
-            U: [
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              ' ####### ',
-            ],
-            V: [
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              '##     ##',
-              ' ##   ## ',
-              '  ## ##  ',
-              '   ###   ',
-            ],
-            W: [
-              '##      ##',
-              '##  ##  ##',
-              '##  ##  ##',
-              '##  ##  ##',
-              '##  ##  ##',
-              '##  ##  ##',
-              ' ###  ### ',
-            ],
-            X: [
-              '##     ##',
-              ' ##   ## ',
-              '  ## ##  ',
-              '   ###   ',
-              '  ## ##  ',
-              ' ##   ## ',
-              '##     ##',
-            ],
-            Y: ['##    ##', ' ##  ## ', '  ####  ', '   ##   ', '   ##   ', '   ##   ', '   ##   '],
-            Z: ['########', '     ## ', '    ##  ', '   ##   ', '  ##    ', ' ##     ', '########'],
+                    'A': [' ##### ', ' ##   ##', '##     ##', '#########', '##     ##', '##     ##', '##     ##'],
+                    'B': ['######## ', '##     ##', '##     ##', '######## ', '##     ##', '##     ##', '######## '],
+                    'C': [' ###### ', '##    ##', '##      ', '##      ', '##      ', '##    ##', ' ###### '],
+                    'D': ['######## ', '##     ##', '##     ##', '##     ##', '##     ##', '##     ##', '######## '],
+                    'E': ['########', '##      ', '##      ', '###### ', '##      ', '##      ', '########'],
+                    'F': ['########', '##      ', '##      ', '###### ', '##      ', '##      ', '##      '],
+                    'G': [' ###### ', '##    ##', '##      ', '##  ####', '##    ##', '##    ##', ' ###### '],
+                    'H': ['##     ##', '##     ##', '##     ##', '#########', '##     ##', '##     ##', '##     ##'],
+                    'I': ['####', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', '####'],
+                    'J': ['      ##', '      ##', '      ##', '      ##', '##    ##', '##    ##', ' ###### '],
+                    'K': ['##    ##', '##   ## ', '##  ##  ', '#####   ', '##  ##  ', '##   ## ', '##    ##'],
+                    'L': ['##      ', '##      ', '##      ', '##      ', '##      ', '##      ', '########'],
+                    'M': ['##     ##', '###   ###', '#### ####', '## ### ##', '##     ##', '##     ##', '##     ##'],
+                    'N': ['##    ##', '###   ##', '####  ##', '## ## ##', '##  ####', '##   ###', '##    ##'],
+                    'O': [' ####### ', '##     ##', '##     ##', '##     ##', '##     ##', '##     ##', ' ####### '],
+                    'P': ['######## ', '##     ##', '##     ##', '######## ', '##       ', '##       ', '##       '],
+                    'Q': [' ####### ', '##     ##', '##     ##', '##     ##', '##  ## ##', '##    ## ', ' ##### ##'],
+                    'R': ['######## ', '##     ##', '##     ##', '######## ', '##   ##  ', '##    ## ', '##     ##'],
+                    'S': [' ###### ', '##    ##', '##      ', ' ###### ', '      ##', '##    ##', ' ###### '],
+                    'T': ['########', '   ##   ', '   ##   ', '   ##   ', '   ##   ', '   ##   ', '   ##   '],
+                    'U': ['##     ##', '##     ##', '##     ##', '##     ##', '##     ##', '##     ##', ' ####### '],
+                    'V': ['##     ##', '##     ##', '##     ##', '##     ##', ' ##   ## ', '  ## ##  ', '   ###   '],
+                    'W': ['##      ##', '##  ##  ##', '##  ##  ##', '##  ##  ##', '##  ##  ##', '##  ##  ##', ' ###  ### '],
+                    'X': ['##     ##', ' ##   ## ', '  ## ##  ', '   ###   ', '  ## ##  ', ' ##   ## ', '##     ##'],
+                    'Y': ['##    ##', ' ##  ## ', '  ####  ', '   ##   ', '   ##   ', '   ##   ', '   ##   '],
+                    'Z': ['########', '     ## ', '    ##  ', '   ##   ', '  ##    ', ' ##     ', '########'],
                     ' ': ['       ', '       ', '       ', '       ', '       ', '       ', '       '],
-            0: [' ###### ', '##    ##', '##    ##', '##    ##', '##    ##', '##    ##', ' ###### '],
-            1: ['   ##   ', ' ####   ', '   ##   ', '   ##   ', '   ##   ', '   ##   ', ' ###### '],
-            2: [' ###### ', '##    ##', '     ## ', '   ##   ', '  ##    ', ' ##     ', '########'],
-            3: [' ###### ', '##    ##', '     ## ', '  ####  ', '     ## ', '##    ##', ' ###### '],
-            4: ['    ##  ', '   ###  ', '  # ##  ', ' #  ##  ', '########', '    ##  ', '    ##  '],
-            5: ['########', '##      ', '####### ', '      ##', '      ##', '##    ##', ' ###### '],
-            6: [' ###### ', '##      ', '####### ', '##    ##', '##    ##', '##    ##', ' ###### '],
-            7: ['########', '##   ## ', '    ##  ', '   ##   ', '  ##    ', '  ##    ', '  ##    '],
-            8: [' ###### ', '##    ##', '##    ##', ' ###### ', '##    ##', '##    ##', ' ###### '],
-            9: [' ###### ', '##    ##', '##    ##', ' #######', '      ##', '##    ##', ' ###### '],
-          },
+                    '0': [' ###### ', '##    ##', '##    ##', '##    ##', '##    ##', '##    ##', ' ###### '],
+                    '1': ['   ##   ', ' ####   ', '   ##   ', '   ##   ', '   ##   ', '   ##   ', ' ###### '],
+                    '2': [' ###### ', '##    ##', '     ## ', '   ##   ', '  ##    ', ' ##     ', '########'],
+                    '3': [' ###### ', '##    ##', '     ## ', '  ####  ', '     ## ', '##    ##', ' ###### '],
+                    '4': ['    ##  ', '   ###  ', '  # ##  ', ' #  ##  ', '########', '    ##  ', '    ##  '],
+                    '5': ['########', '##      ', '####### ', '      ##', '      ##', '##    ##', ' ###### '],
+                    '6': [' ###### ', '##      ', '####### ', '##    ##', '##    ##', '##    ##', ' ###### '],
+                    '7': ['########', '##   ## ', '    ##  ', '   ##   ', '  ##    ', '  ##    ', '  ##    '],
+                    '8': [' ###### ', '##    ##', '##    ##', ' ###### ', '##    ##', '##    ##', ' ###### '],
+                    '9': [' ###### ', '##    ##', '##    ##', ' #######', '      ##', '##    ##', ' ###### ']
+                }
             },
             block: {
                 height: 6,
                 chars: {
-            A: ['█████╗ ', '██╔══██╗', '███████║', '██╔══██║', '██║  ██║', '╚═╝  ╚═╝'],
-            B: ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██████╔╝', '╚═════╝ '],
-            C: ['█████╗ ', '██╔══██╗', '██║     ', '██║     ', '╚█████╔╝', ' ╚════╝ '],
-            D: ['██████╗ ', '██╔══██╗', '██║  ██║', '██║  ██║', '██████╔╝', '╚═════╝ '],
-            E: ['███████╗', '██╔════╝', '█████╗  ', '██╔══╝  ', '███████╗', '╚══════╝'],
-            F: ['███████╗', '██╔════╝', '█████╗  ', '██╔══╝  ', '██║     ', '╚═╝     '],
-            G: ['█████╗ ', '██╔══██╗', '██║  ███', '██║   ██', '╚█████╔╝', ' ╚════╝ '],
-            H: ['██╗  ██╗', '██║  ██║', '███████║', '██╔══██║', '██║  ██║', '╚═╝  ╚═╝'],
-            I: ['██╗', '██║', '██║', '██║', '██║', '╚═╝'],
-            J: ['    ██╗', '    ██║', '    ██║', '██  ██║', '╚████╔╝', ' ╚═══╝ '],
-            K: ['██╗  ██╗', '██║ ██╔╝', '█████╔╝ ', '██╔═██╗ ', '██║  ██╗', '╚═╝  ╚═╝'],
-            L: ['██╗     ', '██║     ', '██║     ', '██║     ', '███████╗', '╚══════╝'],
-            M: [
-              '███╗   ███╗',
-              '████╗ ████║',
-              '██╔████╔██║',
-              '██║╚██╔╝██║',
-              '██║ ╚═╝ ██║',
-              '╚═╝     ╚═╝',
-            ],
-            N: ['███╗   ██╗', '████╗  ██║', '██╔██╗ ██║', '██║╚██╗██║', '██║ ╚████║', '╚═╝  ╚═══╝'],
-            O: ['█████╗ ', '██╔══██╗', '██║  ██║', '██║  ██║', '╚█████╔╝', ' ╚════╝ '],
-            P: ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔═══╝ ', '██║     ', '╚═╝     '],
-            Q: ['█████╗ ', '██╔══██╗', '██║  ██║', '██║  ██║', '╚██████╗', ' ╚═══██╝'],
-            R: ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██║  ██║', '╚═╝  ╚═╝'],
-            S: ['█████╗ ', '██╔══╝ ', '█████╗ ', '╚══██║ ', '█████║ ', '╚════╝ '],
-            T: ['████████╗', '╚══██╔══╝', '   ██║   ', '   ██║   ', '   ██║   ', '   ╚═╝   '],
-            U: ['██╗  ██╗', '██║  ██║', '██║  ██║', '██║  ██║', '╚█████╔╝', ' ╚════╝ '],
-            V: ['██╗   ██╗', '██║   ██║', '██║   ██║', '╚██╗ ██╔╝', ' ╚████╔╝ ', '  ╚═══╝  '],
-            W: ['██╗    ██╗', '██║    ██║', '██║ █╗ ██║', '██║███╗██║', '╚███╔███╔╝', ' ╚══╝╚══╝ '],
-            X: ['██╗  ██╗', '╚██╗██╔╝', ' ╚███╔╝ ', ' ██╔██╗ ', '██╔╝ ██╗', '╚═╝  ╚═╝'],
-            Y: ['██╗   ██╗', '╚██╗ ██╔╝', ' ╚████╔╝ ', '  ╚██╔╝  ', '   ██║   ', '   ╚═╝   '],
-            Z: ['███████╗', '╚════██║', '  ███╔═╝', ' ██╔══╝ ', '███████╗', '╚══════╝'],
-            ' ': ['   ', '   ', '   ', '   ', '   ', '   '],
-          },
-        },
+                    'A': ['█████╗ ', '██╔══██╗', '███████║', '██╔══██║', '██║  ██║', '╚═╝  ╚═╝'],
+                    'B': ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██████╔╝', '╚═════╝ '],
+                    'C': ['█████╗ ', '██╔══██╗', '██║     ', '██║     ', '╚█████╔╝', ' ╚════╝ '],
+                    'D': ['██████╗ ', '██╔══██╗', '██║  ██║', '██║  ██║', '██████╔╝', '╚═════╝ '],
+                    'E': ['███████╗', '██╔════╝', '█████╗  ', '██╔══╝  ', '███████╗', '╚══════╝'],
+                    'F': ['███████╗', '██╔════╝', '█████╗  ', '██╔══╝  ', '██║     ', '╚═╝     '],
+                    'G': ['█████╗ ', '██╔══██╗', '██║  ███', '██║   ██', '╚█████╔╝', ' ╚════╝ '],
+                    'H': ['██╗  ██╗', '██║  ██║', '███████║', '██╔══██║', '██║  ██║', '╚═╝  ╚═╝'],
+                    'I': ['██╗', '██║', '██║', '██║', '██║', '╚═╝'],
+                    'J': ['    ██╗', '    ██║', '    ██║', '██  ██║', '╚████╔╝', ' ╚═══╝ '],
+                    'K': ['██╗  ██╗', '██║ ██╔╝', '█████╔╝ ', '██╔═██╗ ', '██║  ██╗', '╚═╝  ╚═╝'],
+                    'L': ['██╗     ', '██║     ', '██║     ', '██║     ', '███████╗', '╚══════╝'],
+                    'M': ['███╗   ███╗', '████╗ ████║', '██╔████╔██║', '██║╚██╔╝██║', '██║ ╚═╝ ██║', '╚═╝     ╚═╝'],
+                    'N': ['███╗   ██╗', '████╗  ██║', '██╔██╗ ██║', '██║╚██╗██║', '██║ ╚████║', '╚═╝  ╚═══╝'],
+                    'O': ['█████╗ ', '██╔══██╗', '██║  ██║', '██║  ██║', '╚█████╔╝', ' ╚════╝ '],
+                    'P': ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔═══╝ ', '██║     ', '╚═╝     '],
+                    'Q': ['█████╗ ', '██╔══██╗', '██║  ██║', '██║  ██║', '╚██████╗', ' ╚═══██╝'],
+                    'R': ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██║  ██║', '╚═╝  ╚═╝'],
+                    'S': ['█████╗ ', '██╔══╝ ', '█████╗ ', '╚══██║ ', '█████║ ', '╚════╝ '],
+                    'T': ['████████╗', '╚══██╔══╝', '   ██║   ', '   ██║   ', '   ██║   ', '   ╚═╝   '],
+                    'U': ['██╗  ██╗', '██║  ██║', '██║  ██║', '██║  ██║', '╚█████╔╝', ' ╚════╝ '],
+                    'V': ['██╗   ██╗', '██║   ██║', '██║   ██║', '╚██╗ ██╔╝', ' ╚████╔╝ ', '  ╚═══╝  '],
+                    'W': ['██╗    ██╗', '██║    ██║', '██║ █╗ ██║', '██║███╗██║', '╚███╔███╔╝', ' ╚══╝╚══╝ '],
+                    'X': ['██╗  ██╗', '╚██╗██╔╝', ' ╚███╔╝ ', ' ██╔██╗ ', '██╔╝ ██╗', '╚═╝  ╚═╝'],
+                    'Y': ['██╗   ██╗', '╚██╗ ██╔╝', ' ╚████╔╝ ', '  ╚██╔╝  ', '   ██║   ', '   ╚═╝   '],
+                    'Z': ['███████╗', '╚════██║', '  ███╔═╝', ' ██╔══╝ ', '███████╗', '╚══════╝'],
+                    ' ': ['   ', '   ', '   ', '   ', '   ', '   ']
+                }
+            }
         };
 
         const TEMPLATES = {
-        'arrow-right':
-          '    ┌─────────────────────┐\n──▶│  Process or Action  │──▶\n    └─────────────────────┘',
-        'arrow-down':
-          '        │\n        ▼\n┌───────────────┐\n│   Process     │\n└───────────────┘\n        │\n        ▼',
-        decision:
-          '       ╱╲\n      ╱  ╲\n     ╱ ?  ╲\n    ╱      ╲\n   ╱────────╲\n  ╱          ╲\n YES        NO\n  │          │\n  ▼          ▼',
-        process:
-          '┌─────┐   ┌─────┐   ┌─────┐\n│  1  │──▶│  2  │──▶│  3  │\n└─────┘   └─────┘   └─────┘',
-        flowchart:
-          '┌─────────────┐\n│   START    │\n└──────┬──────┘\n       │\n       ▼\n┌─────────────┐\n│  Process A  │\n└──────┬──────┘\n       │\n       ▼\n   ╱────────╲\n  ╱ Decision ╲\n  ╲    ?    ╱\n   ╲────────╱\n    │      │\n   YES    NO\n    │      │\n    ▼      ▼\n┌──────┐ ┌──────┐\n│  B   │ │  C   │\n└──────┘ └──────┘',
-        sequence:
-          ' User      System     Database\n   │           │           │\n   │  Request  │           │\n   ├──────────►│           │\n   │           │  Query    │\n   │           ├──────────►│\n   │           │           │\n   │           │  Result   │\n   │           │◄──────────┤\n   │  Response │           │\n   │◄──────────┤           │\n   │           │           │',
-        network:
-          '          ┌─────────┐\n          │ Server  │\n          └────┬────┘\n               │\n     ┌─────────┼─────────┐\n     │         │         │\n┌────┴────┐ ┌──┴──┐ ┌────┴────┐\n│ Client1 │ │ DB  │ │ Client2 │\n└─────────┘ └─────┘ └─────────┘',
-        hierarchy:
-          '            ┌─────────┐\n            │   CEO   │\n            └────┬────┘\n       ┌─────────┼─────────┐\n       │         │         │\n   ┌───┴───┐ ┌───┴───┐ ┌───┴───┐\n   │  VP1  │ │  VP2  │ │  VP3  │\n   └───┬───┘ └───┬───┘ └───┬───┘\n       │         │         │\n   ┌───┴───┐ ┌───┴───┐ ┌───┴───┐\n   │ Team1 │ │ Team2 │ │ Team3 │\n   └───────┘ └───────┘ └───────┘',
-        header:
-          '╔════════════════════════════════════╗\n║            SECTION TITLE           ║\n╚════════════════════════════════════╝',
-        note: '┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓\n┃  NOTE:                         ┃\n┃  This is an important note     ┃\n┃  that requires attention!      ┃\n┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛',
-        warning:
-          '╔════════════════════════════════════╗\n║  ⚠️  WARNING                       ║\n║                                    ║\n║  Critical information here!        ║\n╚════════════════════════════════════╝',
-        info: '╭────────────────────────────────────╮\n│  ℹ️  INFO                          │\n│                                    │\n│  Helpful information here.         │\n╰────────────────────────────────────╯',
-        divider: '════════════════════════════════════════',
-        separator:
-          '╭──────────────────────────────────────╮\n│                                      │\n╰──────────────────────────────────────╯',
-        banner:
-          '★══════════════════════════════════════★\n║          YOUR TITLE HERE            ║\n★══════════════════════════════════════★',
-        checklist:
-          '☐ Task 1 - Not completed\n☑ Task 2 - Completed  \n☐ Task 3 - Not completed\n☐ Task 4 - Not completed',
+            'arrow-right': '    ┌─────────────────────┐\n──▶│  Process or Action  │──▶\n    └─────────────────────┘',
+            'arrow-down': '        │\n        ▼\n┌───────────────┐\n│   Process     │\n└───────────────┘\n        │\n        ▼',
+            'decision': '       ╱╲\n      ╱  ╲\n     ╱ ?  ╲\n    ╱      ╲\n   ╱────────╲\n  ╱          ╲\n YES        NO\n  │          │\n  ▼          ▼',
+            'process': '┌─────┐   ┌─────┐   ┌─────┐\n│  1  │──▶│  2  │──▶│  3  │\n└─────┘   └─────┘   └─────┘',
+            'flowchart': '┌─────────────┐\n│   START    │\n└──────┬──────┘\n       │\n       ▼\n┌─────────────┐\n│  Process A  │\n└──────┬──────┘\n       │\n       ▼\n   ╱────────╲\n  ╱ Decision ╲\n  ╲    ?    ╱\n   ╲────────╱\n    │      │\n   YES    NO\n    │      │\n    ▼      ▼\n┌──────┐ ┌──────┐\n│  B   │ │  C   │\n└──────┘ └──────┘',
+            'sequence': ' User      System     Database\n   │           │           │\n   │  Request  │           │\n   ├──────────►│           │\n   │           │  Query    │\n   │           ├──────────►│\n   │           │           │\n   │           │  Result   │\n   │           │◄──────────┤\n   │  Response │           │\n   │◄──────────┤           │\n   │           │           │',
+            'network': '          ┌─────────┐\n          │ Server  │\n          └────┬────┘\n               │\n     ┌─────────┼─────────┐\n     │         │         │\n┌────┴────┐ ┌──┴──┐ ┌────┴────┐\n│ Client1 │ │ DB  │ │ Client2 │\n└─────────┘ └─────┘ └─────────┘',
+            'hierarchy': '            ┌─────────┐\n            │   CEO   │\n            └────┬────┘\n       ┌─────────┼─────────┐\n       │         │         │\n   ┌───┴───┐ ┌───┴───┐ ┌───┴───┐\n   │  VP1  │ │  VP2  │ │  VP3  │\n   └───┬───┘ └───┬───┘ └───┬───┘\n       │         │         │\n   ┌───┴───┐ ┌───┴───┐ ┌───┴───┐\n   │ Team1 │ │ Team2 │ │ Team3 │\n   └───────┘ └───────┘ └───────┘',
+            'header': '╔════════════════════════════════════╗\n║            SECTION TITLE           ║\n╚════════════════════════════════════╝',
+            'note': '┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓\n┃  NOTE:                         ┃\n┃  This is an important note     ┃\n┃  that requires attention!      ┃\n┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛',
+            'warning': '╔════════════════════════════════════╗\n║  ⚠️  WARNING                       ║\n║                                    ║\n║  Critical information here!        ║\n╚════════════════════════════════════╝',
+            'info': '╭────────────────────────────────────╮\n│  ℹ️  INFO                          │\n│                                    │\n│  Helpful information here.         │\n╰────────────────────────────────────╯',
+            'divider': '════════════════════════════════════════',
+            'separator': '╭──────────────────────────────────────╮\n│                                      │\n╰──────────────────────────────────────╯',
+            'banner': '★══════════════════════════════════════★\n║          YOUR TITLE HERE            ║\n★══════════════════════════════════════★',
+            'checklist': '☐ Task 1 - Not completed\n☑ Task 2 - Completed  \n☐ Task 3 - Not completed\n☐ Task 4 - Not completed'
         };
 
         const BOX_STYLES = {
@@ -629,20 +480,20 @@
             double: { tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' },
             rounded: { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' },
             bold: { tl: '┏', tr: '┓', bl: '┗', br: '┛', h: '━', v: '┃' },
-        ascii: { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' },
+            ascii: { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' }
         };
 
         let currentMode = 'text';
         let currentTemplate = null;
 
         // Mode switching
-      document.querySelectorAll('.mode-tab').forEach((tab) => {
+        document.querySelectorAll('.mode-tab').forEach(tab => {
             tab.addEventListener('click', () => {
-          document.querySelectorAll('.mode-tab').forEach((t) => t.classList.remove('active'));
+                document.querySelectorAll('.mode-tab').forEach(t => t.classList.remove('active'));
                 tab.classList.add('active');
                 currentMode = tab.dataset.mode;
 
-          document.querySelectorAll('.mode-section').forEach((s) => s.classList.remove('active'));
+                document.querySelectorAll('.mode-section').forEach(s => s.classList.remove('active'));
                 document.getElementById(currentMode + '-mode').classList.add('active');
 
                 generatePreview();
@@ -650,9 +501,9 @@
         });
 
         // Template selection
-      document.querySelectorAll('.template-btn').forEach((btn) => {
+        document.querySelectorAll('.template-btn').forEach(btn => {
             btn.addEventListener('click', () => {
-          document.querySelectorAll('.template-btn').forEach((b) => b.classList.remove('active'));
+                document.querySelectorAll('.template-btn').forEach(b => b.classList.remove('active'));
                 btn.classList.add('active');
                 currentTemplate = btn.dataset.template;
                 generatePreview();
@@ -680,7 +531,7 @@
         function generateBox(text, style, padding) {
             const box = BOX_STYLES[style] || BOX_STYLES.single;
             const lines = text.split('\n');
-        const maxLen = Math.max(...lines.map((l) => l.length)) + padding * 2;
+            const maxLen = Math.max(...lines.map(l => l.length)) + padding * 2;
 
             let result = box.tl + box.h.repeat(maxLen + 2) + box.tr + '\n';
 
@@ -746,5 +597,5 @@
         // Initial preview
         generatePreview();
     </script>
-  </body>
+</body>
 </html>

src/command-palette.js

@@ -60,19 +60,15 @@ class CommandPalette {
 
     renderResults(query) {
         this.filteredCommands = query
-      ? this.commands.filter((cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()))
+            ? this.commands.filter(cmd => cmd.label.toLowerCase().includes(query.toLowerCase()))
             : [...this.commands];
 
-    this.results.innerHTML = this.filteredCommands
-      .map(
-        (cmd, i) => `
+        this.results.innerHTML = this.filteredCommands.map((cmd, i) => `
             <div class="command-item ${i === this.selectedIndex ? 'selected' : ''}" data-index="${i}">
                 <span class="command-label">${this.highlightMatch(cmd.label, query)}</span>
                 ${cmd.shortcut ? `<span class="command-shortcut">${cmd.shortcut}</span>` : ''}
             </div>
-        `
-      )
-      .join('');
+        `).join('');
 
         this.results.querySelectorAll('.command-item').forEach((el) => {
             el.addEventListener('click', () => {

src/editor/codemirror-setup.js

@@ -12,23 +12,38 @@ const { EditorState } = require('@codemirror/state');
 const { markdown, markdownLanguage } = require('@codemirror/lang-markdown');
 // Language extensions loaded lazily on first use
 let _javascript, _html, _css, _json, _python;
-const { defaultKeymap, history, historyKeymap, indentWithTab } = require('@codemirror/commands');
-const { searchKeymap, highlightSelectionMatches } = require('@codemirror/search');
-const { autocompletion, completionKeymap } = require('@codemirror/autocomplete');
-const { bracketMatching, foldGutter, indentOnInput } = require('@codemirror/language');
+const {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} = require('@codemirror/commands');
+const {
+  searchKeymap,
+  highlightSelectionMatches,
+} = require('@codemirror/search');
+const {
+  autocompletion,
+  completionKeymap,
+} = require('@codemirror/autocomplete');
+const {
+  bracketMatching,
+  foldGutter,
+  indentOnInput,
+} = require('@codemirror/language');
 const { oneDark } = require('@codemirror/theme-one-dark');
 
 // Custom theme for JetBrains Mono font
 const jetBrainsMonoTheme = EditorView.theme({
   '&': {
-    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace",
+    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace"
   },
   '.cm-content': {
-    fontFamily: 'inherit',
+    fontFamily: 'inherit'
   },
   '.cm-scroller': {
-    fontFamily: 'inherit',
-  },
+    fontFamily: 'inherit'
+  }
 });
 
 /**
@@ -44,14 +59,7 @@ 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
-  );
+  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;
@@ -117,26 +125,11 @@ function createEditor(parentElement, options = {}) {
  */
 function getLanguageExtension(lang) {
   const loaders = {
-    javascript: () => {
-      if (!_javascript) _javascript = require('@codemirror/lang-javascript').javascript;
-      return _javascript();
-    },
-    html: () => {
-      if (!_html) _html = require('@codemirror/lang-html').html;
-      return _html();
-    },
-    css: () => {
-      if (!_css) _css = require('@codemirror/lang-css').css;
-      return _css();
-    },
-    json: () => {
-      if (!_json) _json = require('@codemirror/lang-json').json;
-      return _json();
-    },
-    python: () => {
-      if (!_python) _python = require('@codemirror/lang-python').python;
-      return _python();
-    },
+    javascript: () => { if (!_javascript) _javascript = require('@codemirror/lang-javascript').javascript; return _javascript(); },
+    html: () => { if (!_html) _html = require('@codemirror/lang-html').html; return _html(); },
+    css: () => { if (!_css) _css = require('@codemirror/lang-css').css; return _css(); },
+    json: () => { if (!_json) _json = require('@codemirror/lang-json').json; return _json(); },
+    python: () => { if (!_python) _python = require('@codemirror/lang-python').python; return _python(); },
     markdown: () => markdown({ base: markdownLanguage }),
   };
   loaders.js = loaders.javascript;

src/main/GitOperations.js

@@ -8,7 +8,7 @@ async function getStatus(dir) {
   try {
     const git = getGitInstance(dir);
     return await git.status();
-  } catch {
+  } catch (err) {
     return { error: 'Not a git repository' };
   }
 }

src/main/PDFOperations.js

@@ -4,11 +4,11 @@ const { PDFDocument, rgb, degrees, StandardFonts } = require('pdf-lib');
 
 function parsePageRanges(rangeString, totalPages) {
   const pages = [];
-  const ranges = rangeString.split(',').map((r) => r.trim());
+  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()));
+      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);
@@ -27,13 +27,11 @@ function parsePageRanges(rangeString, totalPages) {
 
 function hexToRgb(hex) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
+  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 };
+    b: parseInt(result[3], 16) / 255
+  } : { r: 0, g: 0, b: 0 };
 }
 
 async function pdfMerge(data) {
@@ -44,7 +42,7 @@ async function pdfMerge(data) {
       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));
+      copiedPages.forEach(page => mergedPdf.addPage(page));
     }
 
     const pdfBytes = await mergedPdf.save();
@@ -65,13 +63,13 @@ async function pdfSplit(data) {
     const splits = [];
 
     if (data.splitMode === 'pages') {
-      const ranges = data.pageRanges.split(',').map((r) => r.trim());
+      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()));
+          const [start, end] = range.split('-').map(n => parseInt(n.trim()));
           for (let p = start; p <= end && p <= totalPages; p++) {
             pages.push(p - 1);
           }
@@ -110,7 +108,7 @@ async function pdfSplit(data) {
     for (const split of splits) {
       const newPdf = await PDFDocument.create();
       const copiedPages = await newPdf.copyPages(pdf, split.pages);
-      copiedPages.forEach((page) => newPdf.addPage(page));
+      copiedPages.forEach(page => newPdf.addPage(page));
 
       const outputPath = path.join(data.outputFolder, `${baseName}_${split.name}.pdf`);
       const newPdfBytes = await newPdf.save();
@@ -131,18 +129,18 @@ async function pdfCompress(data) {
     const compressedPdfBytes = await pdf.save({
       useObjectStreams: true,
       addDefaultPage: false,
-      objectsPerTick: 50,
+      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);
+    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)`,
+      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 };
@@ -162,7 +160,7 @@ async function pdfRotate(data) {
       pagesToRotate = Array.from({ length: totalPages }, (_, i) => i);
     }
 
-    pagesToRotate.forEach((pageIndex) => {
+    pagesToRotate.forEach(pageIndex => {
       const page = pdf.getPage(pageIndex);
       page.setRotation(degrees(data.angle));
     });
@@ -172,7 +170,7 @@ async function pdfRotate(data) {
 
     return {
       success: true,
-      message: `Successfully rotated ${pagesToRotate.length} page(s) by ${data.angle}\u00B0`,
+      message: `Successfully rotated ${pagesToRotate.length} page(s) by ${data.angle}\u00B0`
     };
   } catch (error) {
     return { success: false, error: error.message };
@@ -187,9 +185,7 @@ async function pdfDeletePages(data) {
 
     const pagesToDelete = parsePageRanges(data.pages, totalPages);
 
-    pagesToDelete
-      .sort((a, b) => b - a)
-      .forEach((pageIndex) => {
+    pagesToDelete.sort((a, b) => b - a).forEach(pageIndex => {
       pdf.removePage(pageIndex);
     });
 
@@ -198,7 +194,7 @@ async function pdfDeletePages(data) {
 
     return {
       success: true,
-      message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`,
+      message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`
     };
   } catch (error) {
     return { success: false, error: error.message };
@@ -211,7 +207,7 @@ async function pdfReorder(data) {
     const pdf = await PDFDocument.load(pdfBytes);
     const totalPages = pdf.getPageCount();
 
-    const newOrder = data.newOrder.split(',').map((n) => parseInt(n.trim()) - 1);
+    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` };
@@ -219,7 +215,7 @@ async function pdfReorder(data) {
 
     const newPdf = await PDFDocument.create();
     const copiedPages = await newPdf.copyPages(pdf, newOrder);
-    copiedPages.forEach((page) => newPdf.addPage(page));
+    copiedPages.forEach(page => newPdf.addPage(page));
 
     const reorderedPdfBytes = await newPdf.save();
     fs.writeFileSync(data.outputPath, reorderedPdfBytes);
@@ -250,9 +246,7 @@ async function pdfWatermark(data) {
       const page = pdf.getPage(pageIndex);
       const { width, height } = page.getSize();
 
-      let x,
-        y,
-        rotation = 0;
+      let x, y, rotation = 0;
 
       switch (data.position) {
         case 'center':
@@ -300,7 +294,7 @@ async function pdfWatermark(data) {
         font,
         color: rgb(color.r, color.g, color.b),
         opacity: data.opacity,
-        rotate: degrees(rotation),
+        rotate: degrees(rotation)
       });
     }
 
@@ -309,7 +303,7 @@ async function pdfWatermark(data) {
 
     return {
       success: true,
-      message: `Successfully added watermark to ${pagesToWatermark.length} page(s)`,
+      message: `Successfully added watermark to ${pagesToWatermark.length} page(s)`
     };
   } catch (error) {
     return { success: false, error: error.message };
@@ -331,8 +325,8 @@ async function pdfEncrypt(data) {
         annotating: data.permissions.annotating,
         fillingForms: data.permissions.fillingForms,
         contentAccessibility: data.permissions.contentAccessibility,
-        documentAssembly: data.permissions.documentAssembly,
-      },
+        documentAssembly: data.permissions.documentAssembly
+      }
     });
 
     fs.writeFileSync(data.outputPath, encryptedPdfBytes);
@@ -342,8 +336,7 @@ async function pdfEncrypt(data) {
     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.',
+        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 };
@@ -382,8 +375,8 @@ async function pdfSetPermissions(data) {
         annotating: data.permissions.annotating,
         fillingForms: data.permissions.fillingForms,
         contentAccessibility: data.permissions.contentAccessibility,
-        documentAssembly: data.permissions.documentAssembly,
-      },
+        documentAssembly: data.permissions.documentAssembly
+      }
     });
 
     fs.writeFileSync(data.outputPath, newPdfBytes);
@@ -393,8 +386,7 @@ async function pdfSetPermissions(data) {
     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.',
+        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 };
@@ -403,28 +395,17 @@ async function pdfSetPermissions(data) {
 
 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}` });
+    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}` });
   }
 }
 
@@ -448,5 +429,5 @@ module.exports = {
   pdfDecrypt,
   pdfSetPermissions,
   executeOperation,
-  getPageCount,
+  getPageCount
 };

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

@@ -5,7 +5,9 @@
   "description": "Demonstrates the plugin system. Safe to delete.",
   "icon": "puzzle",
   "extensionPoints": {
-    "commands": [{ "id": "hello", "label": "Sample: Hello World", "shortcut": "" }]
+    "commands": [
+      { "id": "hello", "label": "Sample: Hello World", "shortcut": "" }
+    ]
   },
   "settings": []
 }

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

@@ -9,7 +9,7 @@ class WritingStudioPlugin extends PluginAPI {
     this.context = context;
 
     this.sprintEngine = new SprintEngine({
-      onEvent: (name, data) => context.events.emit(name, data),
+      onEvent: (name, data) => context.events.emit(name, data)
     });
     this.goalTracker = new GoalTracker(context.settings);
     this.snapshotManager = new SnapshotManager(context.settings);
@@ -17,14 +17,14 @@ class WritingStudioPlugin extends PluginAPI {
       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),
+      listDir: (p) => context.ipc.invoke('list-directory', p)
     });
 
     this._engines = {
       sprint: this.sprintEngine,
       goals: this.goalTracker,
       snapshots: this.snapshotManager,
-      projects: this.projectManager,
+      projects: this.projectManager
     };
 
     this._registerCommands(context);
@@ -34,89 +34,59 @@ class WritingStudioPlugin extends PluginAPI {
   _registerCommands(context) {
     const { sprintEngine, snapshotManager, goalTracker } = this;
 
-    context.commands.register(
-      'start-sprint',
-      'Studio: Start Sprint',
-      () => {
+    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'
-    );
+    }, 'Ctrl+Alt+S');
 
-    context.commands.register(
-      'stop-sprint',
-      'Studio: Stop Sprint',
-      () => {
+    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'
-    );
+    }, 'Ctrl+Alt+Shift+S');
 
-    context.commands.register(
-      'take-snapshot',
-      'Studio: Take Snapshot',
-      () => {
+    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'
-    );
+    }, 'Ctrl+Alt+N');
 
-    context.commands.register(
-      'restore-last-snapshot',
-      'Studio: Restore Last Snapshot',
-      () => {
+    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'
-    );
+    }, '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.commands.register('compile-manuscript', 'Studio: Compile Manuscript', () => {
       context.events.emit('studio:compile', {});
-      },
-      'Ctrl+Alt+E'
-    );
+    }, 'Ctrl+Alt+E');
 
-    context.commands.register(
-      'proofread-document',
-      'Studio: Proofread Document',
-      () => {
+    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'
-    );
+    }, 'Ctrl+Alt+G');
   }
 
   _registerStatusBar(context) {
     context.statusBar.registerIndicator('word-goal', {
       text: '0/1000',
-      tooltip: 'Daily word goal progress',
+      tooltip: 'Daily word goal progress'
     });
     context.statusBar.registerIndicator('sprint-timer', {
       text: '',
-      tooltip: 'Writing sprint timer',
+      tooltip: 'Writing sprint timer'
     });
   }
 

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

@@ -15,34 +15,17 @@
       { "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": "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"
-      }
+      { "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": "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

@@ -29,8 +29,7 @@ function renderGoalsPanel(container, { engines, settings }) {
   const row = document.createElement('div');
   row.className = 'ws-stat-row';
   const label = document.createElement('span');
-  label.textContent =
-    progress.written.toLocaleString() + ' / ' + dailyGoal.toLocaleString() + ' words';
+  label.textContent = progress.written.toLocaleString() + ' / ' + dailyGoal.toLocaleString() + ' words';
   const pct = document.createElement('span');
   pct.className = 'ws-pct';
   pct.textContent = progress.pct + '%';
@@ -82,7 +81,7 @@ function renderGoalsPanel(container, { engines, settings }) {
 
   const chart = document.createElement('div');
   chart.className = 'ws-chart';
-  const maxWords = Math.max(...last30.map((d) => d.words), 1);
+  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);

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

@@ -69,8 +69,7 @@ function renderManuscriptPanel(container, { engines, editor, settings }) {
   const row = document.createElement('div');
   row.className = 'ws-stat-row';
   const label = document.createElement('span');
-  label.textContent =
-    stats.totalWords.toLocaleString() + ' / ' + stats.targetWords.toLocaleString() + ' words';
+  label.textContent = stats.totalWords.toLocaleString() + ' / ' + stats.targetWords.toLocaleString() + ' words';
   const pct = document.createElement('span');
   pct.className = 'ws-pct';
   pct.textContent = stats.pctComplete + '%';

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

@@ -42,7 +42,7 @@ function renderProofreadPanel(container, { events, editor }) {
         if (result && result.issues) {
           renderIssues(issuesList, result.issues);
         }
-      },
+      }
     });
   });
 }
@@ -80,10 +80,7 @@ function renderIssues(container, issues) {
 
     const actions = document.createElement('div');
     actions.className = 'ws-issue-actions';
-    for (const [, label] of [
-      ['accept', 'Accept'],
-      ['dismiss', 'Dismiss'],
-    ]) {
+    for (const [action, label] of [['accept', 'Accept'], ['dismiss', 'Dismiss']]) {
       const actionBtn = document.createElement('button');
       actionBtn.className = 'ws-btn ws-btn-sm';
       actionBtn.textContent = label;

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

@@ -45,11 +45,7 @@ function renderSnapshotsPanel(container, { engines, editor }) {
 
     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'],
-    ]) {
+    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;

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

@@ -12,7 +12,7 @@ class ProjectManager {
       type: opts.type || 'manuscript',
       target: { words: opts.targetWords || 0, deadline: opts.deadline || null },
       chapters: [],
-      metadata: opts.metadata || {},
+      metadata: opts.metadata || {}
     };
     this.fs.writeFile(dir + '/.project.json', JSON.stringify(project, null, 2));
     return project;
@@ -66,7 +66,7 @@ class ProjectManager {
       totalWords,
       chapterCount: project.chapters.length,
       targetWords: target,
-      pctComplete: target > 0 ? Math.min(100, Math.round((totalWords / target) * 100)) : 0,
+      pctComplete: target > 0 ? Math.min(100, Math.round((totalWords / target) * 100)) : 0
     };
   }
 }

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

@@ -24,7 +24,7 @@ class SnapshotManager {
       timestamp: new Date().toISOString(),
       content,
       wordCount: content.split(/\s+/).filter(Boolean).length,
-      label,
+      label
     };
     snaps.unshift(snap);
     this._saveAll(snaps);
@@ -36,7 +36,7 @@ class SnapshotManager {
   }
 
   getById(id) {
-    return this._getAll().find((s) => s.id === id) || null;
+    return this._getAll().find(s => s.id === id) || null;
   }
 
   restore(id) {
@@ -46,7 +46,7 @@ class SnapshotManager {
   }
 
   delete(id) {
-    const snaps = this._getAll().filter((s) => s.id !== id);
+    const snaps = this._getAll().filter(s => s.id !== id);
     this._saveAll(snaps);
   }
 
@@ -59,12 +59,8 @@ class SnapshotManager {
     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++;
-    }
+    for (const line of newLines) { if (!oldSet.has(line)) added++; }
+    for (const line of oldLines) { if (!newSet.has(line)) removed++; }
     return { added, removed };
   }
 

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

@@ -40,9 +40,7 @@ class SprintEngine {
     }
   }
 
-  isActive() {
-    return this._active;
-  }
+  isActive() { return this._active; }
 
   getRemaining() {
     if (!this._active) return 0;

src/plugins/plugin-context.js

@@ -12,11 +12,10 @@ class PluginContext {
    * @param {object} deps.exportHooks - { preHooks: [], postHooks: [] }
    */
   constructor(deps) {
-    const { pluginId, sidebar, commands, statusBar, eventBus, settings, editor, ipc, exportHooks } =
-      deps;
+    const { pluginId, sidebar, commands, statusBar, eventBus, settings, editor, ipc, exportHooks } = deps;
 
     this.sidebar = {
-      registerPanel: (id, opts) => sidebar.registerPanel(`${pluginId}:${id}`, opts),
+      registerPanel: (id, opts) => sidebar.registerPanel(`${pluginId}:${id}`, opts)
     };
 
     this.commands = {
@@ -29,45 +28,41 @@ class PluginContext {
           }
         };
         commands.register(`${pluginId}:${id}`, label, safeHandler, shortcut);
-      },
+      }
     };
 
     this.statusBar = {
-      registerIndicator: (id, opts) => statusBar.registerIndicator(`${pluginId}:${id}`, opts),
+      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),
+      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),
+      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),
+      hasHandler: (event) => eventBus.hasHandler(event)
     };
 
     this.ipc = {
       invoke: (channel, ...args) => ipc.invoke(channel, ...args),
-      on: (channel, handler) => ipc.on(channel, handler),
+      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);
-      },
+      registerPreHook: (handler) => { if (exportHooks) exportHooks.preHooks.push(handler); },
+      registerPostHook: (handler) => { if (exportHooks) exportHooks.postHooks.push(handler); }
     };
   }
 }

src/plugins/plugin-loader.js

@@ -35,10 +35,7 @@ class PluginLoader {
               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
-              );
+              console.error(`[PluginLoader] Failed to load index.js for "${manifest.id}":`, err.message);
               continue;
             }
           }
@@ -49,7 +46,7 @@ class PluginLoader {
             description: manifest.description,
             manifest,
             PluginClass,
-            dir: pluginDir,
+            dir: pluginDir
           });
           this.loadedIds.add(manifest.id);
         } catch (err) {

src/plugins/plugin-registry.js

@@ -32,7 +32,7 @@ class PluginRegistry {
       settings: this.deps.settings,
       editor: this.deps.editor,
       ipc: this.deps.ipc,
-      exportHooks: this.exportHooks,
+      exportHooks: this.exportHooks
     });
 
     try {

src/plugins/settings-store.js

@@ -14,7 +14,7 @@ class SettingsStore {
     this.backend.set(key, value);
   }
 
-  onChanged(_key, _callback) {
+  onChanged(key, callback) {
     // Deferred: plugins read settings on init/activate for MVP.
     // Full change notification requires IPC watcher in main process.
   }

src/preload.js

@@ -140,7 +140,7 @@ const ALLOWED_SEND_CHANNELS = [
 
   // Plugin settings
   'plugin-settings:get',
-  'plugin-settings:set',
+  'plugin-settings:set'
 ];
 
 const ALLOWED_RECEIVE_CHANNELS = [
@@ -238,6 +238,11 @@ const ALLOWED_RECEIVE_CHANNELS = [
   'toggle-command-palette',
   'toggle-sidebar-panel',
   'toggle-bottom-panel',
+
+  // File dialog / directory listing
+  'list-directory',
+  'pick-folder',
+  'pick-file'
 ];
 
 /**
@@ -345,22 +350,25 @@ contextBridge.exposeInMainWorld('electronAPI', {
     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 }),
+    list: (dirPath) => ipcRenderer.invoke('list-directory', dirPath),
+    pickFolder: () => ipcRenderer.invoke('pick-folder'),
+    pickFile: () => ipcRenderer.invoke('pick-file')
   },
 
   // Theme Operations
   theme: {
-    get: () => ipcRenderer.send('get-theme'),
+    get: () => ipcRenderer.send('get-theme')
   },
 
   // Print Operations
   print: {
-    doPrint: (options) => ipcRenderer.send('do-print', options),
+    doPrint: (options) => ipcRenderer.send('do-print', options)
   },
 
   // Export Operations
   export: {
     withOptions: (format, options) => ipcRenderer.send('export-with-options', { format, options }),
-    spreadsheet: (content, format) => ipcRenderer.send('export-spreadsheet', { content, format }),
+    spreadsheet: (content, format) => ipcRenderer.send('export-spreadsheet', { content, format })
   },
 
   // Batch Conversion
@@ -368,7 +376,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
     convert: (inputFolder, outputFolder, format, options) => {
       ipcRenderer.send('batch-convert', { inputFolder, outputFolder, format, options });
     },
-    selectFolder: (type) => ipcRenderer.send('select-folder', type),
+    selectFolder: (type) => ipcRenderer.send('select-folder', type)
   },
 
   // Universal Converter
@@ -377,14 +385,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
       ipcRenderer.send('universal-convert', { tool, fromFormat, toFormat, filePath });
     },
     convertBatch: (tool, fromFormat, toFormat, inputFolder, outputFolder) => {
-      ipcRenderer.send('universal-convert-batch', {
-        tool,
-        fromFormat,
-        toFormat,
-        inputFolder,
-        outputFolder,
-      });
-    },
+      ipcRenderer.send('universal-convert-batch', { tool, fromFormat, toFormat, inputFolder, outputFolder });
+    }
   },
 
   // Header/Footer Operations
@@ -392,23 +394,22 @@ contextBridge.exposeInMainWorld('electronAPI', {
     getSettings: () => ipcRenderer.send('get-header-footer-settings'),
     saveSettings: (settings) => ipcRenderer.send('save-header-footer-settings', settings),
     browseLogo: (position) => ipcRenderer.send('browse-header-footer-logo', position),
-    saveLogo: (position, filePath) =>
-      ipcRenderer.send('save-header-footer-logo', { position, filePath }),
-    clearLogo: (position) => ipcRenderer.send('clear-header-footer-logo', position),
+    saveLogo: (position, filePath) => ipcRenderer.send('save-header-footer-logo', { position, filePath }),
+    clearLogo: (position) => ipcRenderer.send('clear-header-footer-logo', position)
   },
 
   // Page Settings
   page: {
     getSettings: () => ipcRenderer.send('get-page-settings'),
     updateSettings: (settings) => ipcRenderer.send('update-page-settings', settings),
-    setCustomStartPage: (pageNumber) => ipcRenderer.send('set-custom-start-page', pageNumber),
+    setCustomStartPage: (pageNumber) => ipcRenderer.send('set-custom-start-page', pageNumber)
   },
 
   // PDF Operations
   pdf: {
     processOperation: (data) => ipcRenderer.send('process-pdf-operation', data),
     getPageCount: (filePath) => ipcRenderer.send('get-pdf-page-count', filePath),
-    selectFolder: (inputId) => ipcRenderer.send('select-pdf-folder', inputId),
+    selectFolder: (inputId) => ipcRenderer.send('select-pdf-folder', inputId)
   },
 
   // Image Converter Operations
@@ -417,7 +418,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
     batchConvert: (data) => ipcRenderer.send('image-batch-convert', data),
     resize: (data) => ipcRenderer.send('image-resize', data),
     compress: (data) => ipcRenderer.send('image-compress', data),
-    rotate: (data) => ipcRenderer.send('image-rotate', data),
+    rotate: (data) => ipcRenderer.send('image-rotate', data)
   },
 
   // Audio Converter Operations
@@ -426,7 +427,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
     batchConvert: (data) => ipcRenderer.send('audio-batch-convert', data),
     extract: (data) => ipcRenderer.send('audio-extract', data),
     trim: (data) => ipcRenderer.send('audio-trim', data),
-    merge: (data) => ipcRenderer.send('audio-merge', data),
+    merge: (data) => ipcRenderer.send('audio-merge', data)
   },
 
   // Video Converter Operations
@@ -436,16 +437,16 @@ contextBridge.exposeInMainWorld('electronAPI', {
     compress: (data) => ipcRenderer.send('video-compress', data),
     trim: (data) => ipcRenderer.send('video-trim', data),
     extractFrames: (data) => ipcRenderer.send('video-frames', data),
-    toGif: (data) => ipcRenderer.send('video-gif', data),
+    toGif: (data) => ipcRenderer.send('video-gif', data)
   },
 
   // Generator Windows
   generators: {
     openAscii: () => ipcRenderer.send('open-ascii-generator'),
-    openTable: () => ipcRenderer.send('open-table-generator'),
+    openTable: () => ipcRenderer.send('open-table-generator')
   },
 
-  getAppVersion: () => ipcRenderer.invoke('get-app-version'),
+  getAppVersion: () => ipcRenderer.invoke('get-app-version')
 });
 
 // Log successful preload initialization

src/print-preview.js

@@ -31,7 +31,7 @@ class PrintPreview {
         document.getElementById('print-execute')?.addEventListener('click', () => this.executePrint());
 
         // Update preview on option changes
-    ['print-paper-size', 'print-orientation', 'print-margins'].forEach((id) => {
+        ['print-paper-size', 'print-orientation', 'print-margins'].forEach(id => {
             document.getElementById(id)?.addEventListener('change', () => this.refreshPreview());
         });
 
@@ -67,12 +67,12 @@ class PrintPreview {
 
         // Get dimensions for paper size
         const sizes = {
-      A3: { width: '297mm', height: '420mm' },
-      A4: { width: '210mm', height: '297mm' },
-      A5: { width: '148mm', height: '210mm' },
-      Letter: { width: '8.5in', height: '11in' },
-      Legal: { width: '8.5in', height: '14in' },
-      Tabloid: { width: '11in', height: '17in' },
+            'A3': { width: '297mm', height: '420mm' },
+            'A4': { width: '210mm', height: '297mm' },
+            'A5': { width: '148mm', height: '210mm' },
+            'Letter': { width: '8.5in', height: '11in' },
+            'Legal': { width: '8.5in', height: '14in' },
+            'Tabloid': { width: '11in', height: '17in' },
         };
 
         const size = sizes[paperSize] || sizes['A4'];

src/renderer/App.tsx

@@ -0,0 +1,16 @@
+import { AppShell } from './components/layout/AppShell';
+import { ModalLayer } from './components/modals/ModalLayer';
+import { Toaster } from './components/ui/sonner';
+import { useWelcomeTrigger } from './hooks/use-welcome-trigger';
+
+function App() {
+  useWelcomeTrigger();
+  return (
+    <>
+      <AppShell />
+      <ModalLayer />
+      <Toaster />
+    </>
+  );
+}
+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,82 @@
+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 { toast } from '@/lib/toast';
+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) {
+      toast.error(`Export failed: ${result.error.message}`);
+      setError(result.error.message);
+      setSubmitting(false);
+    } else {
+      toast.success(`Exported ${sourcePaths.length} files`);
+      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,78 @@
+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 { toast } from '@/lib/toast';
+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) {
+      toast.error(`Export failed: ${result.error.message}`);
+      setError(result.error.message);
+      setSubmitting(false);
+    } else {
+      toast.success(`Exported ${source.title} to ${result.data?.outputPath ?? 'file'}`);
+      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,82 @@
+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 { toast } from '@/lib/toast';
+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) {
+      toast.error(`Export failed: ${result.error.message}`);
+      setError(result.error.message);
+      setSubmitting(false);
+    } else {
+      toast.success(`Exported ${source.title} to ${result.data?.outputPath ?? 'file'}`);
+      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,105 @@
+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 { toast } from '@/lib/toast';
+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.ok) {
+      toast.error(`Export failed: ${result.error?.message ?? 'Export failed'}`);
+      setError(result.error?.message ?? 'Export failed');
+      setSubmitting(false);
+    } else {
+      toast.success(`Exported ${source.title} to ${result.data?.outputPath ?? 'file'}`);
+      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/sonner.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      richColors
+      closeButton
+      position="bottom-right"
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

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');
+    }
+  }, []);
+}

src/renderer/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <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';">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MarkdownConverter</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body class="font-sans antialiased">
+  <div id="root"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

src/renderer/lib/ascii-table.ts

@@ -0,0 +1,44 @@
+/**
+ * Convert a 2D string array to a fixed-width ASCII table with `| ... |` rows
+ * and a `| --- |` separator.
+ */
+export function toAsciiTable(rows: string[][]): string {
+  if (rows.length === 0) return '';
+  const numCols = Math.max(...rows.map((r) => r.length));
+  const widths: number[] = Array.from({ length: numCols }, (_, c) =>
+    Math.max(...rows.map((r) => (r[c] ?? '').length))
+  );
+  // Heuristic: if ANY column header starts with a digit, right-align ALL columns
+  const header = rows[0];
+  const rightAlign = header.some((cell) => /^\d/.test(cell));
+  const pad = rightAlign
+    ? (s: string, w: number) => s.padStart(w)
+    : (s: string, w: number) => s.padEnd(w);
+  const lines = rows.map((row) =>
+    '| ' +
+    Array.from({ length: numCols }, (_, c) => pad(row[c] ?? '', widths[c])).join(' | ') +
+    ' |'
+  );
+  // Insert separator after first row
+  const sep =
+    '| ' + Array.from({ length: numCols }, (_, c) => '-'.repeat(widths[c])).join(' | ') + ' |';
+  return [lines[0], sep, ...lines.slice(1)].join('\n');
+}
+
+// Matches a markdown table block: header row, separator, ≥1 data row.
+const TABLE_RE = /^\|.+\|\n^\|[\s:|-]+\|\n((?:^\|.+\|\n?)+)/gm;
+
+/**
+ * Replace all markdown tables in `source` with fenced code blocks containing
+ * the ASCII-rendered equivalent. Non-table content is preserved verbatim.
+ */
+export function applyAsciiTransform(source: string): string {
+  return source.replace(TABLE_RE, (block) => {
+    const lines = block.trim().split('\n');
+    const header = lines[0].slice(1, -1).split('|').map((s) => s.trim());
+    const body = lines.slice(2).map((l) =>
+      l.slice(1, -1).split('|').map((s) => s.trim())
+    );
+    return '```\n' + toAsciiTable([header, ...body]) + '\n```';
+  });
+}