fix(batch): resolve pandoc path handling and include-subfolders option

- Normalize pandoc command parsing with path.basename() to support bundled binary paths
- Use bundled pandoc binary in convertWithPandoc instead of relying on PATH
- Forward includeSubfolders checkbox state from renderer to main process
- Add pandoc availability check before batch conversion
- Re-enable Start button when batch conversion completes
- Clean up obsolete dist build artifact causing test snapshot warning
- Bump version to 4.4.4

CLAUDE.md

@@ -0,0 +1,103 @@
+# 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.3
+- **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.1.0
+v4.4.4

components.json

@@ -1,20 +0,0 @@
-{
-  "$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

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

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

@@ -1,361 +0,0 @@
-# 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.2",
+  "version": "4.4.4",
   "description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
   "main": "src/main.js",
   "scripts": {
@@ -8,9 +8,6 @@
     "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",
@@ -46,19 +43,7 @@
     "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",
@@ -67,17 +52,8 @@
     "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",
-    "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"
+    "sharp": "^0.34.3"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.1",
@@ -94,23 +70,6 @@
     "@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",
@@ -120,26 +79,16 @@
     "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",
-    "sonner": "^2.0.7",
-    "tslib": "^2.8.1",
-    "zod": "^4.4.3",
-    "zustand": "^5.0.14"
+    "tslib": "^2.8.1"
   },
   "overrides": {
     "jszip": "^3.10.1",

postcss.config.js

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

src/adapters/electron/fs.js

@@ -12,100 +12,100 @@
  * @type {import('../types').FileSystemAdapter}
  */
 const electronFsAdapter = {
-    /**
-     * Read file content
-     * @param {string} path - File path
-     * @returns {Promise<string>} File content
-     */
-    async readFile(path) {
-        return await window.electronAPI.file.read(path);
-    },
+  /**
+   * Read file content
+   * @param {string} path - File path
+   * @returns {Promise<string>} File content
+   */
+  async readFile(path) {
+    return await window.electronAPI.file.read(path);
+  },
 
-    /**
-     * Write content to file
-     * @param {string} path - File path
-     * @param {string} content - File content
-     * @returns {Promise<void>}
-     */
-    async writeFile(path, content) {
-        return await window.electronAPI.file.write(path, content);
-    },
+  /**
+   * Write content to file
+   * @param {string} path - File path
+   * @param {string} content - File content
+   * @returns {Promise<void>}
+   */
+  async writeFile(path, content) {
+    return await window.electronAPI.file.write(path, content);
+  },
 
-    /**
-     * Delete file
-     * @param {string} path - File path
-     * @returns {Promise<void>}
-     */
-    async deleteFile(path) {
-        return await window.electronAPI.file.delete(path);
-    },
+  /**
+   * Delete file
+   * @param {string} path - File path
+   * @returns {Promise<void>}
+   */
+  async deleteFile(path) {
+    return await window.electronAPI.file.delete(path);
+  },
 
-    /**
-     * Ensure directory exists
-     * @param {string} path - Directory path
-     * @returns {Promise<void>}
-     */
-    async ensureDir(path) {
-        return await window.electronAPI.file.ensureDir(path);
-    },
+  /**
+   * Ensure directory exists
+   * @param {string} path - Directory path
+   * @returns {Promise<void>}
+   */
+  async ensureDir(path) {
+    return await window.electronAPI.file.ensureDir(path);
+  },
 
-    /**
-     * List directory contents
-     * @param {string} path - Directory path
-     * @returns {Promise<Array<import('../types').FileInfo>>}
-     */
-    async listDirectory(path) {
-        const result = await window.electronAPI.invoke('list-directory', path);
-        if (!result?.entries) {
-            return [];
-        }
-
-        return result.entries.map((entry) => ({
-            name: entry.name,
-            isDir: entry.isDirectory,
-            size: entry.size ?? 0,
-            modified: entry.modified ?? 0,
-            path: entry.path
-        }));
-    },
-
-    /**
-     * Check if path exists
-     * @param {string} path - Path to check
-     * @returns {Promise<boolean>}
-     */
-    async exists(path) {
-        return await window.electronAPI.file.exists(path);
-    },
-
-    /**
-     * Check if path is a directory
-     * @param {string} path - Path to check
-     * @returns {Promise<boolean>}
-     */
-    async isDirectory(path) {
-        return await window.electronAPI.file.isDirectory(path);
-    },
-
-    /**
-     * Copy file or directory
-     * @param {string} source - Source path
-     * @param {string} dest - Destination path
-     * @returns {Promise<void>}
-     */
-    async copy(source, dest) {
-        return await window.electronAPI.file.copy(source, dest);
-    },
-
-    /**
-     * Move file or directory
-     * @param {string} source - Source path
-     * @param {string} dest - Destination path
-     * @returns {Promise<void>}
-     */
-    async move(source, dest) {
-        return await window.electronAPI.file.move(source, dest);
+  /**
+   * List directory contents
+   * @param {string} path - Directory path
+   * @returns {Promise<Array<import('../types').FileInfo>>}
+   */
+  async listDirectory(path) {
+    const result = await window.electronAPI.invoke('list-directory', path);
+    if (!result?.entries) {
+      return [];
     }
+
+    return result.entries.map((entry) => ({
+      name: entry.name,
+      isDir: entry.isDirectory,
+      size: entry.size ?? 0,
+      modified: entry.modified ?? 0,
+      path: entry.path,
+    }));
+  },
+
+  /**
+   * Check if path exists
+   * @param {string} path - Path to check
+   * @returns {Promise<boolean>}
+   */
+  async exists(path) {
+    return await window.electronAPI.file.exists(path);
+  },
+
+  /**
+   * Check if path is a directory
+   * @param {string} path - Path to check
+   * @returns {Promise<boolean>}
+   */
+  async isDirectory(path) {
+    return await window.electronAPI.file.isDirectory(path);
+  },
+
+  /**
+   * Copy file or directory
+   * @param {string} source - Source path
+   * @param {string} dest - Destination path
+   * @returns {Promise<void>}
+   */
+  async copy(source, dest) {
+    return await window.electronAPI.file.copy(source, dest);
+  },
+
+  /**
+   * Move file or directory
+   * @param {string} source - Source path
+   * @param {string} dest - Destination path
+   * @returns {Promise<void>}
+   */
+  async move(source, dest) {
+    return await window.electronAPI.file.move(source, dest);
+  },
 };
 
 module.exports = { electronFsAdapter };

src/adapters/types.js

@@ -129,5 +129,5 @@
  */
 
 module.exports = {
-    // Type definitions are JSDoc only, no runtime exports needed
+  // Type definitions are JSDoc only, no runtime exports needed
 };

src/analytics/analytics-panel.js

@@ -5,19 +5,19 @@
 const { analyze } = require('./writing-analytics');
 
 function showAnalyticsModal(tabManager) {
-    const existing = document.getElementById('analytics-modal');
-    if (existing) existing.remove();
+  const existing = document.getElementById('analytics-modal');
+  if (existing) existing.remove();
 
-    const content = tabManager.getEditorContent();
-    const metrics = analyze(content);
+  const content = tabManager.getEditorContent();
+  const metrics = analyze(content);
 
-    const overlay = document.createElement('div');
-    overlay.id = 'analytics-modal';
-    overlay.className = 'analytics-overlay';
+  const overlay = document.createElement('div');
+  overlay.id = 'analytics-modal';
+  overlay.className = 'analytics-overlay';
 
-    const maxCount = metrics.topWords.length > 0 ? metrics.topWords[0].count : 1;
+  const maxCount = metrics.topWords.length > 0 ? metrics.topWords[0].count : 1;
 
-    overlay.innerHTML = `
+  overlay.innerHTML = `
         <div class="analytics-modal">
             <div class="analytics-header">
                 <h2>Writing Analytics</h2>
@@ -61,11 +61,15 @@ 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">
@@ -74,39 +78,45 @@ 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>
     `;
 
-    const closeBtn = overlay.querySelector('.analytics-close');
-    closeBtn.addEventListener('click', () => overlay.remove());
-    overlay.addEventListener('click', (e) => {
-        if (e.target === overlay) overlay.remove();
-    });
+  const closeBtn = overlay.querySelector('.analytics-close');
+  closeBtn.addEventListener('click', () => overlay.remove());
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) overlay.remove();
+  });
 
-    const escHandler = (e) => {
-        if (e.key === 'Escape') {
-            overlay.remove();
-            document.removeEventListener('keydown', escHandler);
-        }
-    };
-    document.addEventListener('keydown', escHandler);
+  const escHandler = (e) => {
+    if (e.key === 'Escape') {
+      overlay.remove();
+      document.removeEventListener('keydown', escHandler);
+    }
+  };
+  document.addEventListener('keydown', escHandler);
 
-    document.body.appendChild(overlay);
+  document.body.appendChild(overlay);
 }
 
 function escapeHtml(str) {
-    const div = document.createElement('div');
-    div.textContent = str;
-    return div.innerHTML;
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
 }
 
 module.exports = { showAnalyticsModal };

src/analytics/writing-analytics.js

@@ -4,124 +4,197 @@
  */
 
 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) {
-    word = word.toLowerCase().replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '');
-    word = word.replace(/^y/, '');
-    return word.match(/[aeiouy]{1,2}/gi)?.length || 1;
+  word = word.toLowerCase().replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '');
+  word = word.replace(/^y/, '');
+  return word.match(/[aeiouy]{1,2}/gi)?.length || 1;
 }
 
 function extractWords(text) {
-    return text.match(/[a-zA-Z]+(?:['-][a-zA-Z]+)*/g) || [];
+  return text.match(/[a-zA-Z]+(?:['-][a-zA-Z]+)*/g) || [];
 }
 
 function getReadabilityLabel(score) {
-    if (score >= 90) return 'Very Easy';
-    if (score >= 70) return 'Easy';
-    if (score >= 50) return 'Standard';
-    if (score >= 30) return 'Difficult';
-    return 'Very Difficult';
+  if (score >= 90) return 'Very Easy';
+  if (score >= 70) return 'Easy';
+  if (score >= 50) return 'Standard';
+  if (score >= 30) return 'Difficult';
+  return 'Very Difficult';
 }
 
 function analyze(text) {
-    if (!text || !text.trim()) {
-        return {
-            wordCount: 0,
-            sentenceCount: 0,
-            paragraphCount: 0,
-            fleschEase: 0,
-            fleschGrade: 0,
-            readabilityLabel: 'N/A',
-            readingTime: 0,
-            speakingTime: 0,
-            uniqueWordCount: 0,
-            lexicalDiversity: 0,
-            avgSentenceLength: 0,
-            longestSentence: '',
-            longestSentenceLength: 0,
-            topWords: []
-        };
-    }
-
-    const words = extractWords(text);
-    const wordCount = words.length;
-
-    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 paragraphCount = Math.max(paragraphs.length, 1);
-
-    let totalSyllables = 0;
-    for (const w of words) {
-        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 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 uniqueWordCount = uniqueWords.size;
-    const lexicalDiversity = wordCount > 0 ? Math.round((uniqueWordCount / wordCount) * 1000) / 10 : 0;
-
-    const avgSentenceLength = Math.round((wordCount / sentenceCount) * 10) / 10;
-
-    let longestSentence = '';
-    let longestSentenceLength = 0;
-    for (const s of sentences) {
-        const sWords = extractWords(s);
-        if (sWords.length > longestSentenceLength) {
-            longestSentenceLength = sWords.length;
-            longestSentence = s.trim();
-        }
-    }
-
-    if (longestSentence.length > 80) {
-        longestSentence = longestSentence.substring(0, 80) + '...';
-    }
-
-    const wordFreq = {};
-    for (const w of words) {
-        const lower = w.toLowerCase();
-        if (!STOP_WORDS.has(lower) && lower.length > 1) {
-            wordFreq[lower] = (wordFreq[lower] || 0) + 1;
-        }
-    }
-
-    const topWords = Object.entries(wordFreq)
-        .sort((a, b) => b[1] - a[1])
-        .slice(0, 10)
-        .map(([word, count]) => ({ word, count }));
-
+  if (!text || !text.trim()) {
     return {
-        wordCount,
-        sentenceCount,
-        paragraphCount,
-        fleschEase,
-        fleschGrade,
-        readabilityLabel,
-        readingTime,
-        speakingTime,
-        uniqueWordCount,
-        lexicalDiversity,
-        avgSentenceLength,
-        longestSentence,
-        longestSentenceLength,
-        topWords
+      wordCount: 0,
+      sentenceCount: 0,
+      paragraphCount: 0,
+      fleschEase: 0,
+      fleschGrade: 0,
+      readabilityLabel: 'N/A',
+      readingTime: 0,
+      speakingTime: 0,
+      uniqueWordCount: 0,
+      lexicalDiversity: 0,
+      avgSentenceLength: 0,
+      longestSentence: '',
+      longestSentenceLength: 0,
+      topWords: [],
     };
+  }
+
+  const words = extractWords(text);
+  const wordCount = words.length;
+
+  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 paragraphCount = Math.max(paragraphs.length, 1);
+
+  let totalSyllables = 0;
+  for (const w of words) {
+    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 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 uniqueWordCount = uniqueWords.size;
+  const lexicalDiversity =
+    wordCount > 0 ? Math.round((uniqueWordCount / wordCount) * 1000) / 10 : 0;
+
+  const avgSentenceLength = Math.round((wordCount / sentenceCount) * 10) / 10;
+
+  let longestSentence = '';
+  let longestSentenceLength = 0;
+  for (const s of sentences) {
+    const sWords = extractWords(s);
+    if (sWords.length > longestSentenceLength) {
+      longestSentenceLength = sWords.length;
+      longestSentence = s.trim();
+    }
+  }
+
+  if (longestSentence.length > 80) {
+    longestSentence = longestSentence.substring(0, 80) + '...';
+  }
+
+  const wordFreq = {};
+  for (const w of words) {
+    const lower = w.toLowerCase();
+    if (!STOP_WORDS.has(lower) && lower.length > 1) {
+      wordFreq[lower] = (wordFreq[lower] || 0) + 1;
+    }
+  }
+
+  const topWords = Object.entries(wordFreq)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 10)
+    .map(([word, count]) => ({ word, count }));
+
+  return {
+    wordCount,
+    sentenceCount,
+    paragraphCount,
+    fleschEase,
+    fleschGrade,
+    readabilityLabel,
+    readingTime,
+    speakingTime,
+    uniqueWordCount,
+    lexicalDiversity,
+    avgSentenceLength,
+    longestSentence,
+    longestSentenceLength,
+    topWords,
+  };
 }
 
 module.exports = { analyze };

src/command-palette.js

@@ -1,109 +1,113 @@
 class CommandPalette {
-    constructor() {
-        this.overlay = document.getElementById('command-palette-overlay');
-        this.input = document.getElementById('command-palette-input');
-        this.results = document.getElementById('command-palette-results');
-        this.commands = [];
-        this.selectedIndex = 0;
-        this.filteredCommands = [];
-        this.setupEventListeners();
-    }
+  constructor() {
+    this.overlay = document.getElementById('command-palette-overlay');
+    this.input = document.getElementById('command-palette-input');
+    this.results = document.getElementById('command-palette-results');
+    this.commands = [];
+    this.selectedIndex = 0;
+    this.filteredCommands = [];
+    this.setupEventListeners();
+  }
 
-    register(label, shortcut, action) {
-        this.commands.push({ label, shortcut, action });
-    }
+  register(label, shortcut, action) {
+    this.commands.push({ label, shortcut, action });
+  }
 
-    open() {
-        this.overlay.classList.remove('hidden');
-        this.input.value = '';
-        this.input.focus();
-        this.selectedIndex = 0;
-        this.renderResults('');
-    }
+  open() {
+    this.overlay.classList.remove('hidden');
+    this.input.value = '';
+    this.input.focus();
+    this.selectedIndex = 0;
+    this.renderResults('');
+  }
 
-    close() {
-        this.overlay.classList.add('hidden');
-    }
+  close() {
+    this.overlay.classList.add('hidden');
+  }
 
-    isOpen() {
-        return !this.overlay.classList.contains('hidden');
-    }
+  isOpen() {
+    return !this.overlay.classList.contains('hidden');
+  }
 
-    setupEventListeners() {
-        this.input.addEventListener('input', () => {
-            this.selectedIndex = 0;
-            this.renderResults(this.input.value);
-        });
+  setupEventListeners() {
+    this.input.addEventListener('input', () => {
+      this.selectedIndex = 0;
+      this.renderResults(this.input.value);
+    });
 
-        this.overlay.addEventListener('click', (e) => {
-            if (e.target === this.overlay) this.close();
-        });
+    this.overlay.addEventListener('click', (e) => {
+      if (e.target === this.overlay) this.close();
+    });
 
-        this.input.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                this.close();
-            } else if (e.key === 'Enter') {
-                e.preventDefault();
-                this.executeSelected();
-            } else if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredCommands.length - 1);
-                this.updateSelection();
-            } else if (e.key === 'ArrowUp') {
-                e.preventDefault();
-                this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
-                this.updateSelection();
-            }
-        });
-    }
+    this.input.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.close();
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        this.executeSelected();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredCommands.length - 1);
+        this.updateSelection();
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+        this.updateSelection();
+      }
+    });
+  }
 
-    renderResults(query) {
-        this.filteredCommands = query
-            ? this.commands.filter(cmd => cmd.label.toLowerCase().includes(query.toLowerCase()))
-            : [...this.commands];
+  renderResults(query) {
+    this.filteredCommands = query
+      ? 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', () => {
-                const idx = parseInt(el.dataset.index);
-                this.filteredCommands[idx].action();
-                this.close();
-            });
-            el.addEventListener('mouseenter', () => {
-                this.selectedIndex = parseInt(el.dataset.index);
-                this.updateSelection();
-            });
-        });
-    }
+    this.results.querySelectorAll('.command-item').forEach((el) => {
+      el.addEventListener('click', () => {
+        const idx = parseInt(el.dataset.index);
+        this.filteredCommands[idx].action();
+        this.close();
+      });
+      el.addEventListener('mouseenter', () => {
+        this.selectedIndex = parseInt(el.dataset.index);
+        this.updateSelection();
+      });
+    });
+  }
 
-    highlightMatch(text, query) {
-        if (!query) return text;
-        const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
-        return text.replace(regex, '<strong>$1</strong>');
-    }
+  highlightMatch(text, query) {
+    if (!query) return text;
+    const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+    return text.replace(regex, '<strong>$1</strong>');
+  }
 
-    updateSelection() {
-        this.results.querySelectorAll('.command-item').forEach((el, i) => {
-            el.classList.toggle('selected', i === this.selectedIndex);
-        });
-        // Scroll selected into view
-        const selected = this.results.querySelector('.command-item.selected');
-        if (selected) selected.scrollIntoView({ block: 'nearest' });
-    }
+  updateSelection() {
+    this.results.querySelectorAll('.command-item').forEach((el, i) => {
+      el.classList.toggle('selected', i === this.selectedIndex);
+    });
+    // Scroll selected into view
+    const selected = this.results.querySelector('.command-item.selected');
+    if (selected) selected.scrollIntoView({ block: 'nearest' });
+  }
 
-    executeSelected() {
-        if (this.filteredCommands[this.selectedIndex]) {
-            this.filteredCommands[this.selectedIndex].action();
-            this.close();
-        }
+  executeSelected() {
+    if (this.filteredCommands[this.selectedIndex]) {
+      this.filteredCommands[this.selectedIndex].action();
+      this.close();
     }
+  }
 }
 
 module.exports = { CommandPalette };

src/editor/codemirror-setup.js

@@ -12,38 +12,23 @@ 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',
+  },
 });
 
 /**
@@ -59,7 +44,14 @@ 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;
@@ -125,11 +117,26 @@ 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/fonts.css

@@ -2,74 +2,74 @@
 
 /* Inter Font Family */
 @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: url('../assets/fonts/Inter-Light.woff2') format('woff2');
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('../assets/fonts/Inter-Light.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('../assets/fonts/Inter-Regular.woff2') format('woff2');
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../assets/fonts/Inter-Regular.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('../assets/fonts/Inter-Medium.woff2') format('woff2');
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../assets/fonts/Inter-Medium.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('../assets/fonts/Inter-Bold.woff2') format('woff2');
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../assets/fonts/Inter-Bold.woff2') format('woff2');
 }
 
 /* JetBrains Mono Font Family - For code, markdown editor, and ASCII art */
 @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('../assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
 }
 
 @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
 }

src/main/GitOperations.js

@@ -8,7 +8,7 @@ async function getStatus(dir) {
   try {
     const git = getGitInstance(dir);
     return await git.status();
-  } catch (err) {
+  } catch {
     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,11 +27,13 @@ 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 ? {
-    r: parseInt(result[1], 16) / 255,
-    g: parseInt(result[2], 16) / 255,
-    b: parseInt(result[3], 16) / 255
-  } : { r: 0, g: 0, b: 0 };
+  return result
+    ? {
+        r: parseInt(result[1], 16) / 255,
+        g: parseInt(result[2], 16) / 255,
+        b: parseInt(result[3], 16) / 255,
+      }
+    : { r: 0, g: 0, b: 0 };
 }
 
 async function pdfMerge(data) {
@@ -42,7 +44,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();
@@ -63,13 +65,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);
           }
@@ -108,7 +110,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();
@@ -129,18 +131,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 };
@@ -160,7 +162,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));
     });
@@ -170,7 +172,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 };
@@ -185,16 +187,18 @@ async function pdfDeletePages(data) {
 
     const pagesToDelete = parsePageRanges(data.pages, totalPages);
 
-    pagesToDelete.sort((a, b) => b - a).forEach(pageIndex => {
-      pdf.removePage(pageIndex);
-    });
+    pagesToDelete
+      .sort((a, b) => b - a)
+      .forEach((pageIndex) => {
+        pdf.removePage(pageIndex);
+      });
 
     const newPdfBytes = await pdf.save();
     fs.writeFileSync(data.outputPath, newPdfBytes);
 
     return {
       success: true,
-      message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`
+      message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`,
     };
   } catch (error) {
     return { success: false, error: error.message };
@@ -207,7 +211,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` };
@@ -215,7 +219,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);
@@ -246,7 +250,9 @@ 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':
@@ -294,7 +300,7 @@ async function pdfWatermark(data) {
         font,
         color: rgb(color.r, color.g, color.b),
         opacity: data.opacity,
-        rotate: degrees(rotation)
+        rotate: degrees(rotation),
       });
     }
 
@@ -303,7 +309,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 };
@@ -325,8 +331,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);
@@ -336,7 +342,8 @@ 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 };
@@ -375,8 +382,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);
@@ -386,7 +393,8 @@ 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 };
@@ -395,17 +403,28 @@ 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}` });
   }
 }
 
@@ -429,5 +448,5 @@ module.exports = {
   pdfDecrypt,
   pdfSetPermissions,
   executeOperation,
-  getPageCount
+  getPageCount,
 };

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

@@ -5,9 +5,7 @@
   "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,59 +34,89 @@ class WritingStudioPlugin extends PluginAPI {
   _registerCommands(context) {
     const { sprintEngine, snapshotManager, goalTracker } = this;
 
-    context.commands.register('start-sprint', 'Studio: Start Sprint', () => {
-      const duration = context.settings.get('sprintDuration') || 25;
-      const content = context.editor.getContent() || '';
-      const words = content.split(/\s+/).filter(Boolean).length;
-      sprintEngine.start(duration, words);
-    }, 'Ctrl+Alt+S');
+    context.commands.register(
+      'start-sprint',
+      'Studio: Start Sprint',
+      () => {
+        const duration = context.settings.get('sprintDuration') || 25;
+        const content = context.editor.getContent() || '';
+        const words = content.split(/\s+/).filter(Boolean).length;
+        sprintEngine.start(duration, words);
+      },
+      'Ctrl+Alt+S'
+    );
 
-    context.commands.register('stop-sprint', 'Studio: Stop Sprint', () => {
-      if (!sprintEngine.isActive()) return;
-      const content = context.editor.getContent() || '';
-      const words = content.split(/\s+/).filter(Boolean).length;
-      const result = sprintEngine.stop(words);
-      goalTracker.addWords(result.wordDelta);
-      context.events.emit('sprint:stopped', result);
-    }, 'Ctrl+Alt+Shift+S');
+    context.commands.register(
+      'stop-sprint',
+      'Studio: Stop Sprint',
+      () => {
+        if (!sprintEngine.isActive()) return;
+        const content = context.editor.getContent() || '';
+        const words = content.split(/\s+/).filter(Boolean).length;
+        const result = sprintEngine.stop(words);
+        goalTracker.addWords(result.wordDelta);
+        context.events.emit('sprint:stopped', result);
+      },
+      'Ctrl+Alt+Shift+S'
+    );
 
-    context.commands.register('take-snapshot', 'Studio: Take Snapshot', () => {
-      const content = context.editor.getContent() || '';
-      snapshotManager.create(content, 'manual');
-      context.events.emit('snapshot:created', {});
-    }, 'Ctrl+Alt+N');
+    context.commands.register(
+      'take-snapshot',
+      'Studio: Take Snapshot',
+      () => {
+        const content = context.editor.getContent() || '';
+        snapshotManager.create(content, 'manual');
+        context.events.emit('snapshot:created', {});
+      },
+      'Ctrl+Alt+N'
+    );
 
-    context.commands.register('restore-last-snapshot', 'Studio: Restore Last Snapshot', () => {
-      const snaps = snapshotManager.list();
-      if (snaps.length === 0) return;
-      const content = snapshotManager.restore(snaps[0].id);
-      context.editor.insertAtCursor(content);
-    }, 'Ctrl+Alt+Z');
+    context.commands.register(
+      'restore-last-snapshot',
+      'Studio: Restore Last Snapshot',
+      () => {
+        const snaps = snapshotManager.list();
+        if (snaps.length === 0) return;
+        const content = snapshotManager.restore(snaps[0].id);
+        context.editor.insertAtCursor(content);
+      },
+      'Ctrl+Alt+Z'
+    );
 
     context.commands.register('new-project', 'Studio: New Project', () => {
       context.events.emit('studio:new-project', {});
     });
 
-    context.commands.register('compile-manuscript', 'Studio: Compile Manuscript', () => {
-      context.events.emit('studio:compile', {});
-    }, 'Ctrl+Alt+E');
+    context.commands.register(
+      'compile-manuscript',
+      'Studio: Compile Manuscript',
+      () => {
+        context.events.emit('studio:compile', {});
+      },
+      'Ctrl+Alt+E'
+    );
 
-    context.commands.register('proofread-document', 'Studio: Proofread Document', () => {
-      if (context.events.hasHandler('ai:analyze')) {
-        const content = context.editor.getContent() || '';
-        context.events.emit('ai:analyze', { text: content, type: 'grammar' });
-      }
-    }, 'Ctrl+Alt+G');
+    context.commands.register(
+      'proofread-document',
+      'Studio: Proofread Document',
+      () => {
+        if (context.events.hasHandler('ai:analyze')) {
+          const content = context.editor.getContent() || '';
+          context.events.emit('ai:analyze', { text: content, type: 'grammar' });
+        }
+      },
+      'Ctrl+Alt+G'
+    );
   }
 
   _registerStatusBar(context) {
     context.statusBar.registerIndicator('word-goal', {
       text: '0/1000',
-      tooltip: 'Daily word goal progress'
+      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,17 +15,34 @@
       { "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,7 +29,8 @@ 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 + '%';
@@ -81,7 +82,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,7 +69,8 @@ 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,7 +80,10 @@ function renderIssues(container, issues) {
 
     const actions = document.createElement('div');
     actions.className = 'ws-issue-actions';
-    for (const [action, label] of [['accept', 'Accept'], ['dismiss', 'Dismiss']]) {
+    for (const [, 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,7 +45,11 @@ 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,8 +59,12 @@ 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,7 +40,9 @@ class SprintEngine {
     }
   }
 
-  isActive() { return this._active; }
+  isActive() {
+    return this._active;
+  }
 
   getRemaining() {
     if (!this._active) return 0;

src/plugins/plugin-context.js

@@ -12,10 +12,11 @@ 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 = {
@@ -28,41 +29,45 @@ 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,7 +35,10 @@ 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;
             }
           }
@@ -46,7 +49,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,11 +238,6 @@ const ALLOWED_RECEIVE_CHANNELS = [
   'toggle-command-palette',
   'toggle-sidebar-panel',
   'toggle-bottom-panel',
-
-  // File dialog / directory listing
-  'list-directory',
-  'pick-folder',
-  'pick-file'
 ];
 
 /**
@@ -350,25 +345,22 @@ 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
@@ -376,7 +368,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
@@ -385,8 +377,14 @@ 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
@@ -394,22 +392,23 @@ 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
@@ -418,7 +417,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
@@ -427,7 +426,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
@@ -437,16 +436,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

@@ -1,85 +1,85 @@
 class PrintPreview {
-    constructor() {
-        this.overlay = document.getElementById('print-preview-overlay');
-        this.modal = window.modals?.printPreviewModal;
-        this._lastContent = '';
-        this.setupEventListeners();
+  constructor() {
+    this.overlay = document.getElementById('print-preview-overlay');
+    this.modal = window.modals?.printPreviewModal;
+    this._lastContent = '';
+    this.setupEventListeners();
+  }
+
+  open(htmlContent) {
+    this._lastContent = htmlContent;
+    if (this.modal) {
+      this.modal.open();
+    } else {
+      this.overlay.classList.remove('hidden');
     }
+    this.updatePreview(htmlContent);
+    this.updateScaleLabel();
+  }
 
-    open(htmlContent) {
-        this._lastContent = htmlContent;
-        if (this.modal) {
-            this.modal.open();
-        } else {
-            this.overlay.classList.remove('hidden');
-        }
-        this.updatePreview(htmlContent);
-        this.updateScaleLabel();
+  close() {
+    if (this.modal) {
+      this.modal.close();
+    } else {
+      this.overlay.classList.add('hidden');
     }
+  }
 
-    close() {
-        if (this.modal) {
-            this.modal.close();
-        } else {
-            this.overlay.classList.add('hidden');
-        }
-    }
+  setupEventListeners() {
+    document.getElementById('print-preview-close')?.addEventListener('click', () => this.close());
+    document.getElementById('print-cancel')?.addEventListener('click', () => this.close());
+    document.getElementById('print-execute')?.addEventListener('click', () => this.executePrint());
 
-    setupEventListeners() {
-        document.getElementById('print-preview-close')?.addEventListener('click', () => this.close());
-        document.getElementById('print-cancel')?.addEventListener('click', () => this.close());
-        document.getElementById('print-execute')?.addEventListener('click', () => this.executePrint());
+    // Update preview on option changes
+    ['print-paper-size', 'print-orientation', 'print-margins'].forEach((id) => {
+      document.getElementById(id)?.addEventListener('change', () => this.refreshPreview());
+    });
 
-        // Update preview on option changes
-        ['print-paper-size', 'print-orientation', 'print-margins'].forEach(id => {
-            document.getElementById(id)?.addEventListener('change', () => this.refreshPreview());
-        });
+    // Scale slider
+    const scaleSlider = document.getElementById('print-scale');
+    scaleSlider?.addEventListener('input', () => this.updateScaleLabel());
 
-        // Scale slider
-        const scaleSlider = document.getElementById('print-scale');
-        scaleSlider?.addEventListener('input', () => this.updateScaleLabel());
+    // Page range toggle
+    document.getElementById('print-pages')?.addEventListener('change', (e) => {
+      const rangeInput = document.getElementById('print-page-range');
+      if (rangeInput) {
+        rangeInput.classList.toggle('hidden', e.target.value !== 'custom');
+      }
+    });
 
-        // Page range toggle
-        document.getElementById('print-pages')?.addEventListener('change', (e) => {
-            const rangeInput = document.getElementById('print-page-range');
-            if (rangeInput) {
-                rangeInput.classList.toggle('hidden', e.target.value !== 'custom');
-            }
-        });
+    // Note: Backdrop click and Escape key are now handled by ModalManager
+  }
 
-        // Note: Backdrop click and Escape key are now handled by ModalManager
-    }
+  updateScaleLabel() {
+    const scale = document.getElementById('print-scale')?.value || 100;
+    const label = document.getElementById('print-scale-value');
+    if (label) label.textContent = `${scale}%`;
+  }
 
-    updateScaleLabel() {
-        const scale = document.getElementById('print-scale')?.value || 100;
-        const label = document.getElementById('print-scale-value');
-        if (label) label.textContent = `${scale}%`;
-    }
+  updatePreview(htmlContent) {
+    const frame = document.getElementById('print-preview-frame');
+    if (!frame) return;
 
-    updatePreview(htmlContent) {
-        const frame = document.getElementById('print-preview-frame');
-        if (!frame) return;
+    this._lastContent = htmlContent;
 
-        this._lastContent = htmlContent;
+    const orientation = document.getElementById('print-orientation')?.value || 'portrait';
+    const paperSize = document.getElementById('print-paper-size')?.value || 'A4';
 
-        const orientation = document.getElementById('print-orientation')?.value || 'portrait';
-        const paperSize = document.getElementById('print-paper-size')?.value || 'A4';
+    // 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' },
+    };
 
-        // 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' },
-        };
+    const size = sizes[paperSize] || sizes['A4'];
+    const width = orientation === 'landscape' ? size.height : size.width;
+    const height = orientation === 'landscape' ? size.width : size.height;
 
-        const size = sizes[paperSize] || sizes['A4'];
-        const width = orientation === 'landscape' ? size.height : size.width;
-        const height = orientation === 'landscape' ? size.width : size.height;
-
-        const previewHtml = `
+    const previewHtml = `
             <!DOCTYPE html>
             <html>
             <head>
@@ -105,34 +105,34 @@ class PrintPreview {
             </html>
         `;
 
-        frame.srcdoc = previewHtml;
-    }
+    frame.srcdoc = previewHtml;
+  }
 
-    refreshPreview() {
-        if (this._lastContent) {
-            this.updatePreview(this._lastContent);
-        }
+  refreshPreview() {
+    if (this._lastContent) {
+      this.updatePreview(this._lastContent);
     }
+  }
 
-    getOptions() {
-        return {
-            paperSize: document.getElementById('print-paper-size')?.value || 'A4',
-            orientation: document.getElementById('print-orientation')?.value || 'portrait',
-            margins: document.getElementById('print-margins')?.value || 'default',
-            scale: parseInt(document.getElementById('print-scale')?.value || '100'),
-            headers: document.getElementById('print-headers')?.checked ?? true,
-            background: document.getElementById('print-background')?.checked ?? true,
-            pages: document.getElementById('print-pages')?.value || 'all',
-            pageRange: document.getElementById('print-page-range')?.value || '',
-        };
-    }
+  getOptions() {
+    return {
+      paperSize: document.getElementById('print-paper-size')?.value || 'A4',
+      orientation: document.getElementById('print-orientation')?.value || 'portrait',
+      margins: document.getElementById('print-margins')?.value || 'default',
+      scale: parseInt(document.getElementById('print-scale')?.value || '100'),
+      headers: document.getElementById('print-headers')?.checked ?? true,
+      background: document.getElementById('print-background')?.checked ?? true,
+      pages: document.getElementById('print-pages')?.value || 'all',
+      pageRange: document.getElementById('print-page-range')?.value || '',
+    };
+  }
 
-    executePrint() {
-        const options = this.getOptions();
-        const { ipcRenderer } = require('electron');
-        ipcRenderer.send('do-print-with-options', options);
-        this.close();
-    }
+  executePrint() {
+    const options = this.getOptions();
+    const { ipcRenderer } = require('electron');
+    ipcRenderer.send('do-print-with-options', options);
+    this.close();
+  }
 }
 
 module.exports = { PrintPreview };

src/renderer/App.tsx

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

src/renderer/components/editor/CodeMirrorEditor.tsx

@@ -1,80 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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

src/renderer/components/modals/ExportDialogFooter.tsx

@@ -1,23 +0,0 @@
-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

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

src/renderer/components/modals/ExportHtmlDialog.tsx

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

src/renderer/components/modals/ExportPdfDialog.tsx

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

src/renderer/components/modals/ExportSettings.tsx

@@ -1,66 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,11 +0,0 @@
-"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

@@ -1,200 +0,0 @@
-"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

@@ -1,158 +0,0 @@
-"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

@@ -1,153 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,62 +0,0 @@
-"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

@@ -1,47 +0,0 @@
-"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

@@ -1,159 +0,0 @@
-"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

@@ -1,146 +0,0 @@
-"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

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

src/renderer/components/ui/switch.tsx

@@ -1,26 +0,0 @@
-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

@@ -1,91 +0,0 @@
-"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

@@ -1,24 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,16 +0,0 @@
-<!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

@@ -1,38 +0,0 @@
-/**
- * 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))
-  );
-  const lines = rows.map((row) =>
-    '| ' +
-    Array.from({ length: numCols }, (_, c) => (row[c] ?? '').padEnd(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```';
-  });
-}

src/renderer/lib/commands/register-menu-commands.ts

@@ -1,112 +0,0 @@
-import { useEffect } from 'react';
-import { useCommandStore } from '@/stores/command-store';
-import { useFileStore } from '@/stores/file-store';
-import { useAppStore } from '@/stores/app-store';
-import { useMenuAction } from '@/hooks/use-menu-action';
-
-/**
- * Register all Phase 6 menu commands in the command store, and bridge
- * the native menu IPC channels to the matching command ids.
- *
- * Phase 6 scope: file/view/tab commands with direct store mappings.
- * Phase 7+ will add the dialog-driven commands (export, settings, etc.)
- * once the corresponding modals exist.
- */
-export function registerMenuCommands(): void {
-  const { registerMany } = useCommandStore.getState();
-
-  registerMany({
-    'settings.open': () => useAppStore.getState().openModal('settings'),
-    'help.about': () => useAppStore.getState().openModal('about'),
-    'help.welcome': () => useAppStore.getState().openModal('welcome'),
-    'file.exportPdf': () => {
-      const activeTabId = useFileStore.getState().activeTabId;
-      if (!activeTabId) return;
-      useAppStore.getState().openModal('export-pdf', { sourcePath: activeTabId });
-    },
-    'file.exportDocx': () => {
-      const activeTabId = useFileStore.getState().activeTabId;
-      if (!activeTabId) return;
-      useAppStore.getState().openModal('export-docx', { sourcePath: activeTabId });
-    },
-    'file.exportHtml': () => {
-      const activeTabId = useFileStore.getState().activeTabId;
-      if (!activeTabId) return;
-      useAppStore.getState().openModal('export-html', { sourcePath: activeTabId });
-    },
-    'file.exportBatch': () => {
-      const paths = useFileStore.getState().openTabs.map((t) => t.path);
-      if (paths.length === 0) return;
-      useAppStore.getState().openModal('export-batch', { sourcePaths: paths });
-    },
-    'file.confirmClose': () => {
-      /* stub — wired in later phase */
-    },
-    'app.quit': () => {
-      /* stub — wired in later phase */
-    },
-  });
-
-  const { register } = useCommandStore.getState();
-  register('file.open', () => {
-    void useFileStore.getState().openFileDialog();
-  });
-  register('file.openFolder', () => {
-    void useFileStore.getState().openFolderDialog();
-  });
-  register('file.save', () => {
-    void useFileStore.getState().saveActiveBuffer();
-  });
-  register('file.closeTab', () => {
-    const { activeTabId, closeTab } = useFileStore.getState();
-    if (activeTabId) closeTab(activeTabId);
-  });
-  register('tab.next', () => {
-    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 = safeIdx >= openTabs.length - 1 ? 0 : safeIdx + 1;
-    setActiveTab(openTabs[nextIdx].id);
-  });
-  register('tab.prev', () => {
-    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 = safeIdx <= 0 ? openTabs.length - 1 : safeIdx - 1;
-    setActiveTab(openTabs[nextIdx].id);
-  });
-  register('view.toggleSidebar', () => useAppStore.getState().toggleSidebar());
-  register('view.togglePreview', () => useAppStore.getState().togglePreview());
-}
-
-export function useRegisterMenuCommands(): void {
-  // Register handlers in the command store.
-  useEffect(() => {
-    registerMenuCommands();
-  }, []);
-}
-
-/**
- * Wire native-menu IPC channels to the command store.
- * Channel names match what main.js dispatches via webContents.send.
- */
-export function useBridgeNativeMenu(): void {
-  useMenuAction('file-save', 'file.save');
-  useMenuAction('toggle-preview', 'view.togglePreview');
-  useMenuAction('toggle-command-palette', 'command.palette');
-  useMenuAction('toggle-sidebar-panel', 'view.sidebarPanel', (panel) => panel as string);
-  useMenuAction('toggle-bottom-panel', 'view.bottomPanel');
-  useMenuAction('toggle-find', 'find.toggle');
-  useMenuAction('undo', 'editor.undo');
-  useMenuAction('redo', 'editor.redo');
-  useMenuAction('adjust-font-size', 'font.size', (direction) => direction as string);
-  useMenuAction('load-custom-css', 'theme.loadCustomCss');
-  useMenuAction('clear-custom-css', 'theme.clearCustomCss');
-  useMenuAction('load-template-menu', 'template.load', (name) => name as string);
-  useMenuAction('print-preview', 'print.preview');
-  useMenuAction('print-preview-styled', 'print.previewStyled');
-  useMenuAction('file-opened', 'file.opened', (payload) => payload);
-  useMenuAction('clear-recent-files', 'file.clearRecent');
-}