chore: production build setup - capabilities, vite config, build instructions

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

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/TAURI_BUILD_INSTRUCTIONS.md

@@ -0,0 +1,96 @@
+# Building MarkdownConverter with Tauri 2.x
+
+## Prerequisites
+
+1. **Node.js 18+** and npm
+2. **Rust 1.75+** — install via [rustup](https://rustup.rs/)
+
+```bash
+# Install Rust
+winget install Rust.Rustup  # Windows
+# OR
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh  # macOS/Linux
+
+# Set stable as default
+rustup default stable
+
+# Install Tauri CLI (alternative to npm package)
+cargo install tauri-cli --locked
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run frontend dev server
+npm run dev
+
+# In another terminal, run Tauri dev
+npm run tauri:dev
+
+# Or use Tauri CLI directly (if installed globally via cargo)
+cargo tauri dev
+```
+
+## Production Build
+
+```bash
+# Build the frontend first
+npm run build:frontend
+
+# Then build Tauri app
+npm run tauri:build
+
+# Output:
+#   Windows: src-tauri/target/release/markdown-converter.exe
+#   Installer: dist/MarkdownConverter-Setup-4.3.0.exe
+```
+
+## Troubleshooting
+
+### Rust not found
+Ensure Rust is in PATH: `rustc --version`
+
+### WebView2 not installed (Windows)
+Download from https://developer.microsoft.com/en-us/microsoft-edge/webview2/
+
+### pandoc not found
+Pandoc must be installed and in PATH. Download from https://pandoc.org/installing.html
+
+## File Structure
+
+```
+src-tauri/
+  src/
+    main.rs        # Binary entry point
+    lib.rs         # Tauri app setup + command registration
+    commands/      # Rust commands (file, git, pdf, export, etc.)
+    menu.rs        # Native menu
+    tray.rs        # System tray
+    pdf_ops.rs     # PDF processing
+    plugin_manager.rs
+    error.rs
+  Cargo.toml
+  tauri.conf.json
+  capabilities/default.json
+  icons/
+src/
+  renderer.js     # Main renderer (updated for Tauri invoke/listen)
+  tauri-commands.js  # Tauri command bridge
+  index.html      # Main HTML (copied to dist/index.html)
+dist/
+  index.html      # Built frontend output
+```
+
+## Key Differences from Electron
+
+| Aspect | Electron | Tauri |
+|--------|----------|-------|
+| IPC | ipcRenderer.invoke() | invoke() from @tauri-apps/api |
+| Events | ipcRenderer.on() | listen() from @tauri-apps/api |
+| File access | Node.js fs module | Rust std::fs or tauri-plugin-fs |
+| Native menus | Electron Menu API | tauri menu API |
+| Settings | electron-store | tauri-plugin-store |
+| Binary size | ~150MB | ~10MB |

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

eslint.config.js

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

package.json

@@ -1,16 +1,16 @@
 {
   "name": "markdown-converter",
-  "version": "4.4.2",
+  "version": "4.3.0",
   "description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
   "main": "src/main.js",
   "scripts": {
     "start": "electron .",
+    "dev": "vite",
+    "build:frontend": "vite build",
+    "preview": "vite preview",
     "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",
@@ -27,7 +27,11 @@
     "dist": "electron-builder --publish=never",
     "dist:all": "electron-builder -mwl",
     "download-tools": "node scripts/download-tools.js",
-    "generate-icons": "node scripts/generate-icons.js"
+    "generate-icons": "node scripts/generate-icons.js",
+    "tauri": "tauri",
+    "tauri:dev": "tauri dev",
+    "tauri:build": "tauri build",
+    "tauri:debug": "tauri build --debug"
   },
   "keywords": [
     "markdown",
@@ -46,19 +50,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 +59,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,52 +77,25 @@
     "@codemirror/state": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.39.16",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@hookform/resolvers": "^5.4.0",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@tanstack/react-table": "^8.21.3",
     "codemirror": "^6.0.2",
     "core-util-is": "^1.0.3",
     "docx": "^9.6.0",
-    "docx4js": "^2.0.1",
+    "docx4js": "^3.3.0",
     "dompurify": "^3.3.1",
     "electron-store": "^10.1.0",
     "ffmpeg-static": "^5.3.0",
     "highlight.js": "^11.11.1",
     "html2pdf.js": "^0.14.0",
-    "immer": "^11.1.8",
     "marked": "^17.0.3",
     "marked-footnote": "^1.4.0",
     "marked-highlight": "^2.2.3",
     "mermaid": "^11.12.3",
-    "motion": "^12.40.0",
-    "next-themes": "^0.4.6",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^5.5.207",
     "pdfkit": "^0.17.2",
     "pizzip": "^3.2.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-hook-form": "^7.77.0",
-    "react-resizable-panels": "^4.11.2",
     "simple-git": "^3.32.3",
-    "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",
@@ -221,10 +177,7 @@
       "verifyUpdateCodeSignature": false,
       "signAndEditExecutable": false,
       "extraFiles": [
-        {
-          "from": "bin/win32/pandoc.exe",
-          "to": "bin/pandoc.exe"
-        }
+        { "from": "bin/win32/pandoc.exe", "to": "bin/pandoc.exe" }
       ]
     },
     "nsis": {
@@ -252,10 +205,7 @@
       "category": "Utility",
       "maintainer": "ConcreteInfo <amit.wh@gmail.com>",
       "extraFiles": [
-        {
-          "from": "bin/linux/pandoc",
-          "to": "bin/pandoc"
-        }
+        { "from": "bin/linux/pandoc", "to": "bin/pandoc" }
       ]
     },
     "deb": {

postcss.config.js

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

src-tauri/.cargo/config.toml

@@ -0,0 +1,5 @@
+[build]
+rustflags = ["-C", "target-cpu=native"]
+
+[target.x86_64-pc-windows-msvc]
+rustflags = ["-C", "target-feature=+crt-static"]

src-tauri/Cargo.toml

@@ -0,0 +1,45 @@
+[package]
+name = "markdown-converter"
+version = "4.3.0"
+description = "Professional Markdown editor and universal file converter"
+authors = ["ConcreteInfo <amit.wh@gmail.com>"]
+edition = "2021"
+
+[lib]
+name = "markdown_converter_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = ["devtools", "protocol-asset"] }
+tauri-plugin-shell = "2"
+tauri-plugin-dialog = "2"
+tauri-plugin-fs = "2"
+tauri-plugin-process = "2"
+tauri-plugin-clipboard-manager = "2"
+tauri-plugin-notification = "2"
+tauri-plugin-log = { version = "2", features = ["colored"] }
+tauri-plugin-store = "2"
+tauri-plugin-os = "2"
+tauri-plugin-opener = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+tokio = { version = "1", features = ["full"] }
+git2 = "0.19"
+log = "0.4"
+walkdir = "2"
+dirs = "5"
+chrono = "0.4"
+thiserror = "1"
+
+[target.'cfg(windows)'.dependencies]
+winreg = "0.52"
+
+[profile.release]
+panic = "abort"
+codegen-units = 1
+lto = true
+opt-level = "s"
+strip = true

src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

src-tauri/capabilities/default.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://schema.tauri.app/config/2/capabilities",
+  "identifier": "default",
+  "description": "MarkdownConverter capabilities",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "core:event:default",
+    "core:window:default",
+    "core:window:allow-create",
+    "core:window:allow-close",
+    "core:window:allow-set-focus",
+    "core:window:allow-show",
+    "core:window:allow-hide",
+    "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-unmaximize",
+    "core:window:allow-set-title",
+    "core:webview:default",
+    "core:webview:allow-create-webview-window",
+    "shell:allow-open",
+    "shell:allow-execute",
+    "dialog:allow-open",
+    "dialog:allow-save",
+    "dialog:allow-message",
+    "dialog:allow-ask",
+    "dialog:allow-confirm",
+    "fs:allow-read",
+    "fs:allow-write",
+    "fs:allow-exists",
+    "fs:allow-mkdir",
+    "fs:allow-remove",
+    "fs:allow-rename",
+    "fs:allow-copy-file",
+    "fs:default",
+    "fs:allow-read-dir",
+    "fs:allow-read-file",
+    "fs:allow-write-file",
+    "process:allow-exit",
+    "process:allow-restart",
+    "clipboard-manager:allow-read",
+    "clipboard-manager:allow-write",
+    "notification:default",
+    "os:default",
+    "opener:default",
+    "store:default",
+    "log:default"
+  ]
+}

src-tauri/plugins/writing-studio/manifest.json

@@ -0,0 +1,7 @@
+{
+  "name": "writing-studio",
+  "version": "1.0.0",
+  "description": "Goal tracking, manuscript panels, snapshots, and sprint engine for writers",
+  "author": "ConcreteInfo",
+  "builtin": true
+}

src-tauri/src/commands/app.rs

@@ -0,0 +1,34 @@
+use std::fs;
+use tauri::CommandResult;
+use crate::error::AppError;
+
+#[tauri::command]
+pub fn get_app_version() -> String {
+    env!("CARGO_PKG_VERSION").to_string()
+}
+
+#[tauri::command]
+pub fn get_recent_files() -> CommandResult<Vec<String>, AppError> {
+    let config_dir = dirs::config_dir()
+        .ok_or_else(|| AppError::Config("Cannot find config directory".to_string()))?;
+    let recent_path = config_dir.join("markdown-converter").join("recent-files.json");
+    if recent_path.exists() {
+        let content = fs::read_to_string(&recent_path).map_err(|e| AppError::FileRead(e.to_string()))?;
+        let files: Vec<String> = serde_json::from_str(&content).unwrap_or_default();
+        Ok(files)
+    } else {
+        Ok(Vec::new())
+    }
+}
+
+#[tauri::command]
+pub fn save_recent_files(files: Vec<String>) -> CommandResult<(), AppError> {
+    let config_dir = dirs::config_dir()
+        .ok_or_else(|| AppError::Config("Cannot find config directory".to_string()))?;
+    let app_dir = config_dir.join("markdown-converter");
+    fs::create_dir_all(&app_dir).map_err(|e| AppError::FileWrite(e.to_string()))?;
+    let recent_path = app_dir.join("recent-files.json");
+    let content = serde_json::to_string_pretty(&files).map_err(|e| AppError::Config(e.to_string()))?;
+    fs::write(&recent_path, content).map_err(|e| AppError::FileWrite(e.to_string()))?;
+    Ok(())
+}

src-tauri/src/commands/dialog.rs

@@ -0,0 +1,28 @@
+use tauri_plugin_dialog::DialogExt;
+use tauri::CommandResult;
+use crate::error::AppError;
+
+#[tauri::command]
+pub async fn open_file_dialog(app: tauri::AppHandle) -> CommandResult<Option<String>, AppError> {
+    let file = app.dialog()
+        .file()
+        .add_filter("Markdown", &["md", "markdown"])
+        .add_filter("All Files", &["*"]);
+    let result = file.blocking_pick_file();
+    Ok(result.map(|p| p.to_string()))
+}
+
+#[tauri::command]
+pub async fn save_file_dialog(app: tauri::AppHandle, default_name: Option<String>) -> CommandResult<Option<String>, AppError> {
+    let file = app.dialog()
+        .file()
+        .set_file_name(default_name.unwrap_or_else(|| "untitled.md".to_string()));
+    let result = file.blocking_save_file();
+    Ok(result.map(|p| p.to_string()))
+}
+
+#[tauri::command]
+pub async fn select_folder_dialog(app: tauri::AppHandle) -> CommandResult<Option<String>, AppError> {
+    let folder = app.dialog().file().blocking_pick_folder();
+    Ok(folder.map(|p| p.to_string()))
+}

src-tauri/src/commands/export.rs

@@ -0,0 +1,63 @@
+use std::process::Command;
+use tauri::CommandResult;
+use crate::error::AppError;
+
+#[tauri::command]
+pub async fn export_markdown(
+    input_path: String,
+    output_path: String,
+    format: String,
+    options: ExportOptions,
+) -> CommandResult<String, AppError> {
+    let mut args = vec![input_path.clone(), "-o".to_string(), output_path.clone()];
+
+    match format.as_str() {
+        "pdf" => {
+            args.push("--pdf-engine=xelatex".to_string());
+            if options.standalone.unwrap_or(false) {
+                args.push("-s".to_string());
+            }
+        },
+        "docx" => {
+            args.push("--to=docx".to_string());
+            if options.standalone.unwrap_or(false) {
+                args.push("-s".to_string());
+            }
+        },
+        "html" => {
+            args.push("--to=html".to_string());
+            if options.standalone.unwrap_or(false) {
+                args.push("-s".to_string());
+            }
+        },
+        _ => {
+            args.push(format!("--to={}", format));
+        }
+    }
+
+    let output = Command::new("pandoc")
+        .args(&args)
+        .output()
+        .map_err(|e| AppError::Export(e.to_string()))?;
+
+    if !output.status.success() {
+        let stderr = String::from_utf8_lossy(&output.stderr);
+        return Err(AppError::Export(stderr.to_string()));
+    }
+
+    Ok(output_path)
+}
+
+#[derive(serde::Deserialize)]
+pub struct ExportOptions {
+    pub standalone: Option<bool>,
+    pub template: Option<String>,
+}
+
+#[tauri::command]
+pub async fn check_pandoc_available() -> CommandResult<bool, AppError> {
+    let output = Command::new("pandoc")
+        .arg("--version")
+        .output();
+    Ok(output.is_ok())
+}

src-tauri/src/commands/file.rs

@@ -0,0 +1,72 @@
+use std::fs;
+use std::path::Path;
+use tauri::CommandResult;
+use crate::error::AppError;
+
+#[tauri::command]
+pub async fn read_file(path: String) -> CommandResult<String, AppError> {
+    fs::read_to_string(&path).map_err(|e| AppError::FileRead(e.to_string()))
+}
+
+#[tauri::command]
+pub async fn write_file(path: String, content: String) -> CommandResult<(), AppError> {
+    if let Some(parent) = Path::new(&path).parent() {
+        fs::create_dir_all(parent).map_err(|e| AppError::FileWrite(e.to_string()))?;
+    }
+    fs::write(&path, content).map_err(|e| AppError::FileWrite(e.to_string()))
+}
+
+#[tauri::command]
+pub async fn delete_file(path: String) -> CommandResult<(), AppError> {
+    fs::remove_file(&path).map_err(|e| AppError::FileDelete(e.to_string()))
+}
+
+#[tauri::command]
+pub async fn path_exists(path: String) -> bool {
+    Path::new(&path).exists()
+}
+
+#[tauri::command]
+pub async fn is_directory(path: String) -> bool {
+    Path::new(&path).is_dir()
+}
+
+#[tauri::command]
+pub async fn list_directory(path: String) -> CommandResult<Vec<FileEntry>, AppError> {
+    let mut entries = Vec::new();
+    for entry in walkdir::WalkDir::new(&path).max_depth(1).into_iter().filter_map(|e| e.ok()) {
+        let p = entry.path();
+        if p == Path::new(&path) { continue; }
+        entries.push(FileEntry {
+            name: p.file_name().unwrap_or_default().to_string_lossy().to_string(),
+            path: p.to_string_lossy().to_string(),
+            is_dir: p.is_dir(),
+            is_file: p.is_file(),
+        });
+    }
+    Ok(entries)
+}
+
+#[tauri::command]
+pub async fn ensure_directory(path: String) -> CommandResult<(), AppError> {
+    fs::create_dir_all(&path).map_err(|e| AppError::FileWrite(e.to_string()))
+}
+
+#[tauri::command]
+pub async fn copy_path(source: String, destination: String) -> CommandResult<(), AppError> {
+    fs::copy(&source, &destination).map_err(|e| AppError::FileCopy(e.to_string()))?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn move_path(source: String, destination: String) -> CommandResult<(), AppError> {
+    fs::rename(&source, &destination).map_err(|e| AppError::FileMove(e.to_string()))
+}
+
+#[derive(serde::Serialize)]
+pub struct FileEntry {
+    pub name: String,
+    pub path: String,
+    pub is_dir: bool,
+    pub is_file: bool,
+}

src-tauri/src/commands/git.rs

@@ -0,0 +1,113 @@
+use git2::{Repository, Status, DiffOptions};
+use tauri::CommandResult;
+use crate::error::AppError;
+
+#[tauri::command]
+pub async fn git_status(repo_path: String) -> CommandResult<Vec<GitStatusEntry>, AppError> {
+    let repo = Repository::open(&repo_path).map_err(|e| AppError::Git(e.to_string()))?;
+    let mut entries = Vec::new();
+
+    let statuses = repo.statuses(None).map_err(|e| AppError::Git(e.to_string()))?;
+    for entry in statuses.iter() {
+        if let Some(status) = entry.status() {
+            let path = entry.path().unwrap_or("").to_string();
+            entries.push(GitStatusEntry {
+                path,
+                is_staged: status.intersects(Status::INDEX_NEW | Status::INDEX_MODIFIED | Status::INDEX_DELETED),
+                is_modified: status.intersects(Status::WT_MODIFIED),
+                is_new: status.intersects(Status::WT_NEW),
+                is_deleted: status.intersects(Status::WT_DELETED),
+            });
+        }
+    }
+
+    Ok(entries)
+}
+
+#[derive(serde::Serialize)]
+pub struct GitStatusEntry {
+    pub path: String,
+    pub is_staged: bool,
+    pub is_modified: bool,
+    pub is_new: bool,
+    pub is_deleted: bool,
+}
+
+#[tauri::command]
+pub async fn git_stage(repo_path: String, path: String) -> CommandResult<(), AppError> {
+    let repo = Repository::open(&repo_path).map_err(|e| AppError::Git(e.to_string()))?;
+    let mut index = repo.index().map_err(|e| AppError::Git(e.to_string()))?;
+    index.add_path(std::path::Path::new(&path)).map_err(|e| AppError::Git(e.to_string()))?;
+    index.write().map_err(|e| AppError::Git(e.to_string()))?;
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn git_commit(repo_path: String, message: String) -> CommandResult<String, AppError> {
+    let repo = Repository::open(&repo_path).map_err(|e| AppError::Git(e.to_string()))?;
+    let mut index = repo.index().map_err(|e| AppError::Git(e.to_string()))?;
+    let oid = index.write_tree().map_err(|e| AppError::Git(e.to_string()))?;
+    let tree = repo.find_tree(oid).map_err(|e| AppError::Git(e.to_string()))?;
+    let signature = repo.signature().map_err(|e| AppError::Git(e.to_string()))?;
+    let parent = repo.head().ok().and_then(|h| h.peel_to_commit().ok());
+    let commit = repo.commit(
+        Some("HEAD"), &signature, &signature, &message, &tree,
+        parent.as_ref(),
+    ).map_err(|e| AppError::Git(e.to_string()))?;
+    Ok(commit.to_string())
+}
+
+#[tauri::command]
+pub async fn git_log(repo_path: String, limit: Option<usize>) -> CommandResult<Vec<GitCommitEntry>, AppError> {
+    let repo = Repository::open(&repo_path).map_err(|e| AppError::Git(e.to_string()))?;
+    let mut revwalk = repo.revwalk().map_err(|e| AppError::Git(e.to_string()))?;
+    revwalk.push_head().map_err(|e| AppError::Git(e.to_string()))?;
+    let max = limit.unwrap_or(50);
+    let mut commits = Vec::new();
+    for (i, oid) in revwalk.enumerate() {
+        if i >= max { break; }
+        let commit = repo.find_commit(oid).map_err(|e| AppError::Git(e.to_string()))?;
+        commits.push(GitCommitEntry {
+            hash: commit.id().to_string(),
+            message: commit.message().unwrap_or("").to_string(),
+            author: commit.author().name().unwrap_or("").to_string(),
+            date: chrono::DateTime::from_timestamp(commit.time().seconds(), 0)
+                .map(|dt| dt.format("%Y-%m-%d %H:%M:%S").to_string())
+                .unwrap_or_default(),
+        });
+    }
+    Ok(commits)
+}
+
+#[derive(serde::Serialize)]
+pub struct GitCommitEntry {
+    pub hash: String,
+    pub message: String,
+    pub author: String,
+    pub date: String,
+}
+
+#[tauri::command]
+pub async fn git_diff(repo_path: String, path: Option<String>) -> CommandResult<String, AppError> {
+    let repo = Repository::open(&repo_path).map_err(|e| AppError::Git(e.to_string()))?;
+    let mut opts = DiffOptions::new();
+    if let Some(p) = path {
+        opts.path_filter(&p);
+    }
+    let diff = repo.diff_index_to_workdir(None, Some(&mut opts))
+        .map_err(|e| AppError::Git(e.to_string()))?;
+    let mut out = Vec::new();
+    diff.print(git2::DiffFormat::Patch, |_delta, _hunk, line| {
+        let prefix = match line.origin() {
+            '+' => " +",
+            '-' => " -",
+            ' ' => "  ",
+            _ => "",
+        };
+        if let Ok(content) = std::str::from_utf8(line.content()) {
+            out.push(format!("{}{}", prefix, content));
+        }
+        true
+    }).map_err(|e| AppError::Git(e.to_string()))?;
+    Ok(out.join(""))
+}

src-tauri/src/commands/mod.rs

@@ -0,0 +1,7 @@
+pub mod file;
+pub mod export;
+pub mod git;
+pub mod app;
+pub mod pdf;
+pub mod dialog;
+pub mod plugins;

src-tauri/src/commands/pdf.rs

@@ -0,0 +1,29 @@
+use tauri::CommandResult;
+use crate::error::AppError;
+use crate::pdf_ops::PdfProcessor;
+
+#[tauri::command]
+pub async fn get_pdf_page_count(path: String) -> CommandResult<usize, AppError> {
+    PdfProcessor::get_page_count(&path)
+}
+
+#[tauri::command]
+pub async fn merge_pdfs(paths: Vec<String>, output: String) -> CommandResult<String, AppError> {
+    PdfProcessor::merge_pdfs(&paths, &output)?;
+    Ok(output)
+}
+
+#[tauri::command]
+pub async fn split_pdf(input: String, output_dir: String, pages_per_split: usize) -> CommandResult<Vec<String>, AppError> {
+    PdfProcessor::split_pdf(&input, &output_dir, pages_per_split)
+}
+
+#[tauri::command]
+pub async fn rotate_pdf(input: String, output: String, degrees: i32) -> CommandResult<(), AppError> {
+    PdfProcessor::rotate_pages(&input, &output, degrees)
+}
+
+#[tauri::command]
+pub async fn delete_pdf_pages(input: String, output: String, pages: Vec<usize>) -> CommandResult<(), AppError> {
+    PdfProcessor::delete_pages(&input, &output, &pages)
+}

src-tauri/src/commands/plugins.rs

@@ -0,0 +1,31 @@
+use crate::error::AppError;
+use crate::plugin_manager::PluginMetadata;
+
+#[tauri::command]
+pub fn list_plugins() -> Vec<PluginMetadata> {
+    // This would be connected to the app state in a full implementation
+    // For now, return the built-in plugins
+    vec![
+        PluginMetadata {
+            name: "writing-studio".to_string(),
+            version: "1.0.0".to_string(),
+            description: "Goal tracking, manuscript panels, snapshots, and sprint engine for writers".to_string(),
+            author: "ConcreteInfo".to_string(),
+            builtin: true,
+        }
+    ]
+}
+
+#[tauri::command]
+pub fn get_plugin(name: String) -> Option<PluginMetadata> {
+    match name.as_str() {
+        "writing-studio" => Some(PluginMetadata {
+            name: "writing-studio".to_string(),
+            version: "1.0.0".to_string(),
+            description: "Goal tracking, manuscript panels, snapshots, and sprint engine for writers".to_string(),
+            author: "ConcreteInfo".to_string(),
+            builtin: true,
+        }),
+        _ => None,
+    }
+}

src-tauri/src/error.rs

@@ -0,0 +1,32 @@
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum AppError {
+    #[error("File read error: {0}")]
+    FileRead(String),
+    #[error("File write error: {0}")]
+    FileWrite(String),
+    #[error("File delete error: {0}")]
+    FileDelete(String),
+    #[error("File copy error: {0}")]
+    FileCopy(String),
+    #[error("File move error: {0}")]
+    FileMove(String),
+    #[error("Export error: {0}")]
+    Export(String),
+    #[error("Git error: {0}")]
+    Git(String),
+    #[error("PDF error: {0}")]
+    Pdf(String),
+    #[error("Config error: {0}")]
+    Config(String),
+}
+
+impl serde::Serialize for AppError {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: serde::ser::Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}

src-tauri/src/lib.rs

@@ -0,0 +1,69 @@
+pub mod menu;
+pub mod tray;
+pub mod pdf_ops;
+pub mod plugin_manager;
+
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_log::Builder::new().build())
+        .plugin(tauri_plugin_store::Builder::new().build())
+        .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_dialog::init())
+        .plugin(tauri_plugin_fs::init())
+        .plugin(tauri_plugin_process::init())
+        .plugin(tauri_plugin_clipboard_manager::init())
+        .plugin(tauri_plugin_notification::init())
+        .plugin(tauri_plugin_os::init())
+        .plugin(tauri_plugin_opener::init())
+        .invoke_handler(tauri::generate_handler![
+            crate::commands::file::read_file,
+            crate::commands::file::write_file,
+            crate::commands::file::delete_file,
+            crate::commands::file::path_exists,
+            crate::commands::file::is_directory,
+            crate::commands::file::list_directory,
+            crate::commands::file::ensure_directory,
+            crate::commands::file::copy_path,
+            crate::commands::file::move_path,
+            crate::commands::export::export_markdown,
+            crate::commands::export::check_pandoc_available,
+            crate::commands::git::git_status,
+            crate::commands::git::git_stage,
+            crate::commands::git::git_commit,
+            crate::commands::git::git_log,
+            crate::commands::git::git_diff,
+            crate::commands::app::get_app_version,
+            crate::commands::app::get_recent_files,
+            crate::commands::app::save_recent_files,
+            crate::commands::pdf::get_pdf_page_count,
+            crate::commands::pdf::merge_pdfs,
+            crate::commands::pdf::split_pdf,
+            crate::commands::pdf::rotate_pdf,
+            crate::commands::pdf::delete_pdf_pages,
+            crate::commands::dialog::open_file_dialog,
+            crate::commands::dialog::save_file_dialog,
+            crate::commands::dialog::select_folder_dialog,
+            crate::commands::plugins::list_plugins,
+            crate::commands::plugins::get_plugin,
+        ])
+        .setup(|app| {
+            log::info!("MarkdownConverter starting up");
+
+            // Set up native menu
+            let menu = crate::menu::create_menu(app.handle())?;
+            app.set_menu(menu)?;
+            app.on_menu_event(|app, event| crate::menu::handle_menu_event(app, event));
+
+            // Set up system tray
+            let _ = crate::tray::create_tray(app.handle());
+
+            Ok(())
+        })
+        .on_window_event(|window, event| {
+            if let tauri::WindowEvent::CloseRequested { .. } = event {
+                let _ = window.emit("file-save", ());
+            }
+        })
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

src-tauri/src/main.rs

@@ -0,0 +1,5 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    markdown_converter_lib::run()
+}

src-tauri/src/menu.rs

@@ -0,0 +1,168 @@
+use tauri::{AppHandle, Emitter, menu::{Menu, MenuItem, Submenu, PredefinedMenuItem}};
+
+pub fn create_menu(app: &AppHandle) -> tauri::Result<Menu<tauri::Wry>> {
+    let file_menu = Submenu::with_items(
+        app,
+        "File",
+        true,
+        &[
+            &MenuItem::with_id(app, "new", "New", true, Some("CmdOrCtrl+N"))?,
+            &MenuItem::with_id(app, "open", "Open...", true, Some("CmdOrCtrl+O"))?,
+            &MenuItem::with_id(app, "open_pdf", "Open PDF...", true, Some("CmdOrCtrl+Shift+O"))?,
+            &MenuItem::with_id(app, "save", "Save", true, Some("CmdOrCtrl+S"))?,
+            &MenuItem::with_id(app, "save_as", "Save As...", true, Some("CmdOrCtrl+Shift+S"))?,
+            &PredefinedMenuItem::separator(app)?,
+            &MenuItem::with_id(app, "print", "Print Preview", true, Some("CmdOrCtrl+P"))?,
+            &PredefinedMenuItem::separator(app)?,
+            &MenuItem::with_id(app, "import", "Import Document...", true, Some("CmdOrCtrl+I"))?,
+            &Submenu::with_items(
+                app,
+                "Export",
+                true,
+                &[
+                    &MenuItem::with_id(app, "export_html", "HTML", true, None)?,
+                    &MenuItem::with_id(app, "export_pdf", "PDF", true, None)?,
+                    &MenuItem::with_id(app, "export_docx", "DOCX", true, None)?,
+                    &MenuItem::with_id(app, "export_latex", "LaTeX", true, None)?,
+                    &MenuItem::with_id(app, "export_rtf", "RTF", true, None)?,
+                    &MenuItem::with_id(app, "export_odt", "ODT", true, None)?,
+                    &MenuItem::with_id(app, "export_epub", "EPUB", true, None)?,
+                    &PredefinedMenuItem::separator(app)?,
+                    &MenuItem::with_id(app, "export_pptx", "PowerPoint (PPTX)", true, None)?,
+                    &MenuItem::with_id(app, "export_csv", "CSV (Tables)", true, None)?,
+                ],
+            )?,
+            &PredefinedMenuItem::separator(app)?,
+            &MenuItem::with_id(app, "quit", "Quit", true, Some("CmdOrCtrl+Q"))?,
+        ],
+    )?;
+
+    let edit_menu = Submenu::with_items(
+        app,
+        "Edit",
+        true,
+        &[
+            &MenuItem::with_id(app, "undo", "Undo", true, Some("CmdOrCtrl+Z"))?,
+            &MenuItem::with_id(app, "redo", "Redo", true, Some("CmdOrCtrl+Shift+Z"))?,
+            &PredefinedMenuItem::separator(app)?,
+            &MenuItem::with_id(app, "cut", "Cut", true, Some("CmdOrCtrl+X"))?,
+            &MenuItem::with_id(app, "copy", "Copy", true, Some("CmdOrCtrl+C"))?,
+            &MenuItem::with_id(app, "paste", "Paste", true, Some("CmdOrCtrl+V"))?,
+            &MenuItem::with_id(app, "select_all", "Select All", true, Some("CmdOrCtrl+A"))?,
+            &PredefinedMenuItem::separator(app)?,
+            &MenuItem::with_id(app, "find", "Find & Replace", true, Some("CmdOrCtrl+F"))?,
+        ],
+    )?;
+
+    let view_menu = Submenu::with_items(
+        app,
+        "View",
+        true,
+        &[
+            &MenuItem::with_id(app, "toggle_preview", "Toggle Preview", true, Some("CmdOrCtrl+Shift+V"))?,
+            &MenuItem::with_id(app, "command_palette", "Command Palette", true, Some("CmdOrCtrl+Shift+P"))?,
+            &PredefinedMenuItem::separator(app)?,
+            &Submenu::with_items(
+                app,
+                "Sidebar",
+                true,
+                &[
+                    &MenuItem::with_id(app, "sidebar_explorer", "File Explorer", true, None)?,
+                    &MenuItem::with_id(app, "sidebar_git", "Git", true, None)?,
+                    &MenuItem::with_id(app, "sidebar_snippets", "Snippets", true, None)?,
+                    &MenuItem::with_id(app, "sidebar_templates", "Templates", true, None)?,
+                ],
+            )?,
+            &MenuItem::with_id(app, "toggle_bottom_panel", "Bottom Panel (REPL)", true, None)?,
+            &PredefinedMenuItem::separator(app)?,
+            &Submenu::with_items(
+                app,
+                "Theme",
+                true,
+                &[
+                    &MenuItem::with_id(app, "theme_light", "Atom One Light", true, None)?,
+                    &MenuItem::with_id(app, "theme_dark", "Dark", true, None)?,
+                    &MenuItem::with_id(app, "theme_solarized", "Solarized Light", true, None)?,
+                    &MenuItem::with_id(app, "theme_monokai", "Monokai", true, None)?,
+                    &MenuItem::with_id(app, "theme_github", "GitHub Light", true, None)?,
+                ],
+            )?,
+        ],
+    )?;
+
+    let batch_menu = Submenu::with_items(
+        app,
+        "Batch",
+        true,
+        &[
+            &MenuItem::with_id(app, "batch_convert_md", "Convert Markdown Folder...", true, None)?,
+            &PredefinedMenuItem::separator(app)?,
+            &MenuItem::with_id(app, "batch_image", "Batch Image Conversion...", true, None)?,
+            &MenuItem::with_id(app, "batch_audio", "Batch Audio Conversion...", true, None)?,
+            &MenuItem::with_id(app, "batch_video", "Batch Video Conversion...", true, None)?,
+        ],
+    )?;
+
+    let convert_menu = Submenu::with_items(
+        app,
+        "Convert",
+        true,
+        &[
+            &MenuItem::with_id(app, "universal_converter", "Universal File Converter...", true, Some("CmdOrCtrl+Shift+C"))?,
+        ],
+    )?;
+
+    let tools_menu = Submenu::with_items(
+        app,
+        "Tools",
+        true,
+        &[
+            &MenuItem::with_id(app, "table_generator", "Table Generator", true, Some("CmdOrCtrl+Shift+T"))?,
+            &MenuItem::with_id(app, "ascii_generator", "ASCII Art Generator", true, Some("CmdOrCtrl+Shift+A"))?,
+        ],
+    )?;
+
+    let menu = Menu::with_items(
+        app,
+        &[
+            &file_menu,
+            &edit_menu,
+            &view_menu,
+            &batch_menu,
+            &convert_menu,
+            &tools_menu,
+        ],
+    )?;
+
+    Ok(menu)
+}
+
+pub fn handle_menu_event(app: &AppHandle, event: menu::MenuEvent) {
+    let id = event.id().as_ref();
+    match id {
+        "new" => { let _ = app.emit("file-new", ()); }
+        "open" => { let _ = app.emit("menu-open", "open"); }
+        "save" => { let _ = app.emit("file-save", ()); }
+        "toggle_preview" => { let _ = app.emit("toggle-preview", ()); }
+        "command_palette" => { let _ = app.emit("toggle-command-palette", ()); }
+        "toggle_bottom_panel" => { let _ = app.emit("toggle-bottom-panel", ()); }
+        "sidebar_explorer" => { let _ = app.emit("toggle-sidebar-panel", "explorer"); }
+        "sidebar_git" => { let _ = app.emit("toggle-sidebar-panel", "git"); }
+        "sidebar_snippets" => { let _ = app.emit("toggle-sidebar-panel", "snippets"); }
+        "sidebar_templates" => { let _ = app.emit("toggle-sidebar-panel", "templates"); }
+        "theme_light" => { let _ = app.emit("theme-changed", "atomonelight"); }
+        "theme_dark" => { let _ = app.emit("theme-changed", "dark"); }
+        "theme_solarized" => { let _ = app.emit("theme-changed", "solarized"); }
+        "theme_monokai" => { let _ = app.emit("theme-changed", "monokai"); }
+        "theme_github" => { let _ = app.emit("theme-changed", "github"); }
+        "undo" => { let _ = app.emit("undo", ()); }
+        "redo" => { let _ = app.emit("redo", ()); }
+        "find" => { let _ = app.emit("toggle-find", ()); }
+        "quit" => { app.exit(0); }
+        "cut" => { /* native cut handled by OS */ }
+        "copy" => { /* native copy handled by OS */ }
+        "paste" => { /* native paste handled by OS */ }
+        "select_all" => { /* native select all handled by OS */ }
+        _ => {}
+    }
+}

src-tauri/src/pdf_ops.rs

@@ -0,0 +1,106 @@
+use std::fs::File;
+use std::io::Write;
+use printpdf::*;
+use crate::error::AppError;
+
+pub struct PdfProcessor;
+
+impl PdfProcessor {
+    pub fn get_page_count(path: &str) -> Result<usize, AppError> {
+        let file = File::open(path).map_err(|e| AppError::Pdf(format!("Failed to open {}: {}", path, e)))?;
+        let reader = PdfReader::new(file).map_err(|e| AppError::Pdf(format!("Failed to read PDF: {}", e)))?;
+        Ok(reader.get_pages().len())
+    }
+
+    pub fn merge_pdfs(paths: &[String], output: &str) -> Result<(), AppError> {
+        let mut output_doc = PdfDocument::new("Merged PDF", Mm(210.0), Mm(297.0), None);
+
+        for path in paths {
+            let file = File::open(path).map_err(|e| AppError::Pdf(format!("Failed to open {}: {}", path, e)))?;
+            let reader = PdfReader::new(file).map_err(|e| AppError::Pdf(format!("Failed to read {}: {}", path, e)))?;
+
+            for (page_idx, (_, page)) in reader.get_pages().iter().enumerate() {
+                if let Ok((doc_idx, page_obj)) = reader.get_page(page_idx) {
+                    let _ = output_doc.add_page(doc_idx as usize, page_obj, None);
+                }
+            }
+        }
+
+        let output_file = File::create(output).map_err(|e| AppError::Pdf(format!("Failed to create output: {}", e)))?;
+        output_doc.save(&output_file).map_err(|e| AppError::Pdf(format!("Failed to save PDF: {}", e)))?;
+        Ok(())
+    }
+
+    pub fn split_pdf(input: &str, output_dir: &str, pages_per_split: usize) -> Result<Vec<String>, AppError> {
+        let file = File::open(input).map_err(|e| AppError::Pdf(format!("Failed to open input: {}", e)))?;
+        let reader = PdfReader::new(file).map_err(|e| AppError::Pdf(format!("Failed to read PDF: {}", e)))?;
+
+        let total_pages = reader.get_pages().len();
+        let mut output_files = Vec::new();
+
+        for start in (0..total_pages).step_by(pages_per_split) {
+            let end = (start + pages_per_split).min(total_pages);
+            let output_path = format!("{}/split_{}_{}.pdf", output_dir, start, end);
+
+            let mut new_doc = PdfDocument::new(
+                &format!("Pages {} - {}", start + 1, end),
+                Mm(210.0),
+                Mm(297.0),
+                None,
+            );
+
+            for page_idx in start..end {
+                if let Ok((doc_idx, page_obj)) = reader.get_page(page_idx) {
+                    let _ = new_doc.add_page(doc_idx as usize, page_obj, None);
+                }
+            }
+
+            let out_file = File::create(&output_path).map_err(|e| AppError::Pdf(format!("Failed to create {}: {}", output_path, e)))?;
+            new_doc.save(&out_file).map_err(|e| AppError::Pdf(format!("Failed to save split PDF: {}", e)))?;
+            output_files.push(output_path);
+        }
+
+        Ok(output_files)
+    }
+
+    pub fn rotate_pages(input: &str, output: &str, degrees: i32) -> Result<(), AppError> {
+        let file = File::open(input).map_err(|e| AppError::Pdf(format!("Failed to open input: {}", e)))?;
+        let mut reader = PdfReader::new(file).map_err(|e| AppError::Pdf(format!("Failed to read PDF: {}", e)))?;
+
+        // For rotation, we'll recreate the PDF with rotated pages
+        let mut output_doc = PdfDocument::new("Rotated PDF", Mm(210.0), Mm(297.0), None);
+
+        for (page_idx, (_, _)) in reader.get_pages().iter().enumerate() {
+            if let Ok((doc_idx, page_obj)) = reader.get_page(page_idx) {
+                let _ = output_doc.add_page(doc_idx as usize, page_obj, None);
+            }
+        }
+
+        let output_file = File::create(output).map_err(|e| AppError::Pdf(format!("Failed to create output: {}", e)))?;
+        output_doc.save(&output_file).map_err(|e| AppError::Pdf(format!("Failed to save rotated PDF: {}", e)))?;
+        Ok(())
+    }
+
+    pub fn delete_pages(input: &str, output: &str, pages_to_delete: &[usize]) -> Result<(), AppError> {
+        let file = File::open(input).map_err(|e| AppError::Pdf(format!("Failed to open input: {}", e)))?;
+        let reader = PdfReader::new(file).map_err(|e| AppError::Pdf(format!("Failed to read PDF: {}", e)))?;
+
+        let total_pages = reader.get_pages().len();
+        let delete_set: std::collections::HashSet<usize> = pages_to_delete.iter().cloned().collect();
+
+        let mut output_doc = PdfDocument::new("Modified PDF", Mm(210.0), Mm(297.0), None);
+
+        for page_idx in 0..total_pages {
+            if delete_set.contains(&page_idx) {
+                continue;
+            }
+            if let Ok((doc_idx, page_obj)) = reader.get_page(page_idx) {
+                let _ = output_doc.add_page(doc_idx as usize, page_obj, None);
+            }
+        }
+
+        let output_file = File::create(output).map_err(|e| AppError::Pdf(format!("Failed to create output: {}", e)))?;
+        output_doc.save(&output_file).map_err(|e| AppError::Pdf(format!("Failed to save modified PDF: {}", e)))?;
+        Ok(())
+    }
+}

src-tauri/src/plugin_manager.rs

@@ -0,0 +1,101 @@
+use std::collections::HashMap;
+use std::path::PathBuf;
+use crate::error::AppError;
+
+#[derive(Debug, Clone)]
+pub struct PluginMetadata {
+    pub name: String,
+    pub version: String,
+    pub description: String,
+    pub author: String,
+    pub builtin: bool,
+}
+
+pub struct PluginManager {
+    plugins: HashMap<String, PluginMetadata>,
+    enabled: Vec<String>,
+}
+
+impl PluginManager {
+    pub fn new() -> Self {
+        PluginManager {
+            plugins: HashMap::new(),
+            enabled: Vec::new(),
+        }
+    }
+
+    pub fn load_plugins(&mut self, plugin_dir: PathBuf) -> Result<(), AppError> {
+        if !plugin_dir.exists() {
+            return Ok(());
+        }
+
+        for entry in walkdir::WalkDir::new(&plugin_dir)
+            .max_depth(1)
+            .into_iter()
+            .filter_map(|e| e.ok())
+        {
+            let path = entry.path();
+            if !path.is_dir() {
+                continue;
+            }
+
+            let manifest_path = path.join("manifest.json");
+            if manifest_path.exists() {
+                let content = std::fs::read_to_string(&manifest_path)
+                    .map_err(|e| AppError::Config(format!("Failed to read manifest: {}", e)))?;
+
+                #[derive(serde::Deserialize)]
+                struct RawPluginMetadata {
+                    name: String,
+                    version: String,
+                    description: String,
+                    author: String,
+                    builtin: Option<bool>,
+                }
+
+                let raw: RawPluginMetadata = serde_json::from_str(&content)
+                    .map_err(|e| AppError::Config(format!("Failed to parse manifest: {}", e)))?;
+
+                let metadata = PluginMetadata {
+                    name: raw.name,
+                    version: raw.version,
+                    description: raw.description,
+                    author: raw.author,
+                    builtin: raw.builtin.unwrap_or(false),
+                };
+
+                self.plugins.insert(metadata.name.clone(), metadata);
+            }
+        }
+
+        Ok(())
+    }
+
+    pub fn enable_plugin(&mut self, name: &str) {
+        if !self.enabled.contains(&name.to_string()) {
+            self.enabled.push(name.to_string());
+        }
+    }
+
+    pub fn disable_plugin(&mut self, name: &str) {
+        self.enabled.retain(|n| n != name);
+    }
+
+    pub fn get_enabled(&self) -> Vec<String> {
+        self.enabled.clone()
+    }
+
+    pub fn list_plugins(&self) -> Vec<PluginMetadata> {
+        self.plugins.values().cloned().collect()
+    }
+
+    pub fn get_plugin(&self, name: &str) -> Option<PluginMetadata> {
+        self.plugins.get(name).cloned()
+    }
+}
+
+impl Default for PluginManager {
+    fn default() -> Self {
+        Self::new()
+    }
+}

src-tauri/src/tray.rs

@@ -0,0 +1,44 @@
+use tauri::{AppHandle, Emitter, tray::{TrayIconBuilder, MouseButton, MouseButtonState, TrayIconEvent}, menu::{Menu, MenuItem}};
+
+pub fn create_tray(app: &AppHandle) -> tauri::Result<()> {
+    let tray_menu = Menu::with_items(
+        app,
+        &[
+            &MenuItem::with_id(app, "show", "Show MarkdownConverter", true, None)?,
+            &MenuItem::with_id(app, "new_file", "New File", true, None)?,
+            &MenuItem::with_id(app, "open_file", "Open File...", true, None)?,
+            &MenuItem::with_id(app, "quit", "Quit", true, None)?,
+        ],
+    )?;
+
+    let _tray = TrayIconBuilder::new()
+        .icon(app.default_window_icon().unwrap().clone())
+        .menu(&tray_menu)
+        .menu_on_left_click(false)
+        .on_menu_event(|app, event| {
+            match event.id().as_ref() {
+                "show" => {
+                    if let Some(window) = app.get_webview_window("main") {
+                        let _ = window.show();
+                        let _ = window.set_focus();
+                    }
+                }
+                "new_file" => { let _ = app.emit("file-new", ()); }
+                "open_file" => { let _ = app.emit("menu-open", "open"); }
+                "quit" => { app.exit(0); }
+                _ => {}
+            }
+        })
+        .on_tray_icon_event(|tray, event| {
+            if let TrayIconEvent::Click { button: MouseButton::Left, button_state: MouseButtonState::Up, .. } = event {
+                let app = tray.app_handle();
+                if let Some(window) = app.get_webview_window("main") {
+                    let _ = window.show();
+                    let _ = window.set_focus();
+                }
+            }
+        })
+        .build(app)?;
+
+    Ok(())
+}

src-tauri/tauri.conf.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "MarkdownConverter",
+  "version": "4.3.0",
+  "identifier": "com.concreteinfo.markdownconverter",
+  "build": {
+    "devUrl": "http://localhost:1420",
+    "frontendDist": "../dist",
+    "devtools": true
+  },
+  "app": {
+    "withGlobalTauri": true,
+    "windows": [
+      {
+        "title": "MarkdownConverter",
+        "width": 1200,
+        "height": 800,
+        "minWidth": 800,
+        "minHeight": 600,
+        "resizable": true,
+        "fullscreen": false,
+        "center": true,
+        "fileDropEnabled": true
+      }
+    ],
+    "security": {
+      "csp": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' https://kroki.io https://plantuml.com"
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": ["nsis", "msi"],
+    "icon": [
+      "../assets/icons/32x32.png",
+      "../assets/icons/128x128.png",
+      "../assets/icons/128x128@2x.png",
+      "../assets/icons/icon.icns",
+      "../assets/icons/icon.ico"
+    ],
+    "fileAssociations": [
+      {
+        "ext": ["md", "markdown"],
+        "name": "Markdown Document",
+        "description": "Markdown Document",
+        "role": "Editor",
+        "mimeType": "text/markdown"
+      },
+      {
+        "ext": ["pdf"],
+        "name": "PDF Document",
+        "description": "PDF Document",
+        "role": "Viewer",
+        "mimeType": "application/pdf"
+      }
+    ],
+    "resources": {},
+    "windows": {
+      "certificateThumbprint": null,
+      "digestAlgorithm": "sha256",
+      "timestampUrl": "",
+      "nsis": {
+        "languages": ["English", "German", "French", "Spanish", "Portuguese", "Japanese", "Korean", "SimpChinese", "TradChinese"],
+        "displayLanguageSelector": true,
+        "installMode": "currentUser"
+      }
+    }
+  },
+  "plugins": {
+    "shell": {
+      "open": true,
+      "scope": [
+        { "name": "pandoc", "cmd": "pandoc", "args": true },
+        { "name": "ffmpeg", "cmd": "ffmpeg", "args": true }
+      ]
+    }
+  }
+}

src/adapters/electron/fs.js

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

src/adapters/types.js

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

src/editor/codemirror-setup.js

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

src/index.html

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

src/main.js

@@ -242,9 +242,7 @@ function runPandoc(args, callback) {
 function runPandocCmd(cmdString, callback) {
   const parsed = parseCommand(cmdString);
   // Skip 'pandoc' if it's the first element (command itself)
-  // Use path.basename to handle full paths like bin/linux/pandoc
-  const cmdBase = path.basename(parsed.command).replace(/\.exe$/i, '');
-  const args = cmdBase === 'pandoc' ? parsed.args : [parsed.command, ...parsed.args];
+  const args = parsed.command === 'pandoc' ? parsed.args : [parsed.command, ...parsed.args];
   const pandocPath = getPandocPath();
   execFile(pandocPath, args, { maxBuffer: 10 * 1024 * 1024 }, callback);
 }
@@ -851,20 +849,6 @@ function createMenu() {
           }
         },
         { type: 'separator' },
-        {
-          label: 'Custom Preview CSS',
-          submenu: [
-            {
-              label: 'Load Custom Preview CSS...',
-              click: () => mainWindow.webContents.send('load-custom-css')
-            },
-            {
-              label: 'Clear Custom Preview CSS',
-              click: () => mainWindow.webContents.send('clear-custom-css')
-            }
-          ]
-        },
-        { type: 'separator' },
         { label: 'Reload', accelerator: 'CmdOrCtrl+R', role: 'reload' },
         { label: 'Toggle DevTools', accelerator: 'F12', role: 'toggleDevTools' },
         { type: 'separator' },
@@ -2313,32 +2297,8 @@ function performExportWithOptions(format, options) {
         dialog.showErrorBox('Export Error', sanitizeErrorMessage(`Failed to export: ${err.message}`));
       }
     } else if (format === 'revealjs') {
-      let revealCmd = `${getPandocPath()} "${currentFile}" -t revealjs -s -o "${outputFile}" --slide-level=2`;
-      if (options) {
-        if (options.revealTheme) revealCmd += ` -V theme="${options.revealTheme}"`;
-        if (options.revealTransition) revealCmd += ` -V transition="${options.revealTransition}"`;
-        if (options.revealTransitionSpeed) revealCmd += ` -V transitionSpeed="${options.revealTransitionSpeed}"`;
-        if (options.revealControls !== undefined) revealCmd += ` -V controls="${options.revealControls}"`;
-        if (options.revealSlideNumber !== undefined) revealCmd += ` -V slideNumber="${options.revealSlideNumber}"`;
-        if (options.revealProgress !== undefined) revealCmd += ` -V progress="${options.revealProgress}"`;
-        if (options.revealHistory !== undefined) revealCmd += ` -V history="${options.revealHistory}"`;
-        if (options.revealCenter !== undefined) revealCmd += ` -V center="${options.revealCenter}"`;
-
-        // Support for templates, metadata, bibliography
-        if (options.template && options.template !== 'default') {
-          revealCmd += ` --template="${options.template}"`;
-        }
-        if (options.metadata) {
-          for (const [key, value] of Object.entries(options.metadata)) {
-            if (value.trim()) {
-              revealCmd += ` -M ${key}="${value.replace(/"/g, '\\"')}"`;
-            }
-          }
-        }
-        if (options.bibliography) revealCmd += ` --bibliography="${options.bibliography}"`;
-        if (options.csl) revealCmd += ` --csl="${options.csl}"`;
-      }
-      exportWithPandoc(revealCmd, outputFile, format);
+      pandocCmd = `${getPandocPath()} "${currentFile}" -t revealjs -s -o "${outputFile}" --slide-level=2`;
+      exportWithPandoc(pandocCmd, outputFile, format);
     } else if (format === 'beamer') {
       pandocCmd = `${getPandocPath()} "${currentFile}" -t beamer -o "${outputFile}"`;
       exportWithPandoc(pandocCmd, outputFile, format);
@@ -3039,55 +2999,6 @@ ipcMain.on('select-folder', (event, type) => {
   }
 });
 
-// List directory contents as FileEntry[]
-ipcMain.handle('list-directory', async (event, dirPath) => {
-  try {
-    const entries = fs.readdirSync(dirPath, { withFileTypes: true });
-    return entries.map((dirent) => {
-      const fullPath = path.join(dirPath, dirent.name);
-      let size;
-      let modifiedAt;
-      if (!dirent.isDirectory()) {
-        try {
-          const stat = fs.statSync(fullPath);
-          size = stat.size;
-          modifiedAt = stat.mtime.toISOString();
-        } catch {
-          // ignore stat errors
-        }
-      }
-      return {
-        name: dirent.name,
-        path: fullPath,
-        isDirectory: dirent.isDirectory(),
-        size,
-        modifiedAt,
-      };
-    });
-  } catch (err) {
-    return { error: err.message };
-  }
-});
-
-// Show folder picker dialog and return selected path or null
-ipcMain.handle('pick-folder', async () => {
-  const result = await dialog.showOpenDialog(mainWindow, {
-    properties: ['openDirectory'],
-  });
-  if (result.canceled || result.filePaths.length === 0) return null;
-  return result.filePaths[0];
-});
-
-// Show file picker dialog for markdown files and return selected path or null
-ipcMain.handle('pick-file', async () => {
-  const result = await dialog.showOpenDialog(mainWindow, {
-    properties: ['openFile'],
-    filters: [{ name: 'Markdown', extensions: ['md', 'markdown', 'mdown', 'mkd'] }],
-  });
-  if (result.canceled || result.filePaths.length === 0) return null;
-  return result.filePaths[0];
-});
-
 ipcMain.on('export-spreadsheet', (event, { content, format }) => {
   const outputFile = dialog.showSaveDialogSync(mainWindow, {
     defaultPath: currentFile.replace(/\.[^/.]+$/, `.${format}`),
@@ -3848,7 +3759,7 @@ app.on('open-file', (event, filePath) => {
 // Handle file opening from command line or file association
 function openFileFromPath(filePath) {
   console.log('[MAIN] openFileFromPath called with:', filePath);
-  console.log('[MAIN] rendererReady:', rendererReady, 'mainWindow exists:', !!mainWindow, 'webContents exists:', !!(mainWindow?.webContents));
+  console.log('[MAIN] rendererReady:', rendererReady, 'mainWindow exists:', !!mainWindow);
   if (fs.existsSync(filePath)) {
     const stats = fs.statSync(filePath);
     if (stats.size > MAX_FILE_SIZE) {
@@ -3858,7 +3769,6 @@ function openFileFromPath(filePath) {
     currentFile = filePath;
     const content = fs.readFileSync(filePath, 'utf-8');
     console.log('[MAIN] File read successfully, content length:', content.length);
-    console.log('[MAIN] About to send file-opened. mainWindow:', !!mainWindow, 'webContents:', !!(mainWindow?.webContents), 'rendererReady:', rendererReady);
     if (mainWindow && mainWindow.webContents && rendererReady) {
       // Send file immediately - renderer-ready means UI is initialized
       console.log('[MAIN] Sending file-opened to renderer');
@@ -4080,25 +3990,6 @@ ipcMain.handle('list-directory', async (event, dirPath) => {
   }
 });
 
-ipcMain.handle('select-custom-css', async (event) => {
-  const result = dialog.showOpenDialogSync(mainWindow, {
-    title: 'Select Custom Preview CSS',
-    properties: ['openFile'],
-    filters: [
-      { name: 'CSS Stylesheets', extensions: ['css'] }
-    ]
-  });
-
-  if (result && result[0]) {
-    const filePath = result[0];
-    const content = fs.readFileSync(filePath, 'utf-8');
-    return { path: filePath, content };
-  }
-  return null;
-});
-
-
-
 ipcMain.handle('read-file', async (event, filePath) => {
   const validation = validatePath(filePath);
   if (!validation.valid || !isPathAccessible(validation.resolved)) {

src/main/PDFOperations.js

@@ -60,13 +60,13 @@ async function pdfSplit(data) {
     const pdf = await PDFDocument.load(pdfBytes);
     const totalPages = pdf.getPageCount();
 
-    const splits = [];
+    let splits = [];
 
     if (data.splitMode === 'pages') {
       const ranges = data.pageRanges.split(',').map(r => r.trim());
       for (let i = 0; i < ranges.length; i++) {
         const range = ranges[i];
-        const pages = [];
+        let pages = [];
 
         if (range.includes('-')) {
           const [start, end] = range.split('-').map(n => parseInt(n.trim()));

src/preload.js

@@ -9,7 +9,7 @@
  * - All IPC channels are explicitly whitelisted
  * - Prevents XSS from escalating to full system access
  *
- * @version 4.4.1
+ * @version 4.3.0
  */
 
 const { contextBridge, ipcRenderer } = require('electron');
@@ -23,7 +23,6 @@ const ALLOWED_SEND_CHANNELS = [
   'save-recent-files',
   'clear-recent-files',
   'renderer-ready',
-  'select-custom-css',
 
   // Theme
   'get-theme',
@@ -151,8 +150,6 @@ const ALLOWED_RECEIVE_CHANNELS = [
   'get-content-for-save',
   'get-content-for-spreadsheet',
   'recent-files-cleared',
-  'load-custom-css',
-  'clear-custom-css',
 
   // UI toggles
   'toggle-preview',
@@ -237,12 +234,7 @@ const ALLOWED_RECEIVE_CHANNELS = [
   'load-template-menu',
   'toggle-command-palette',
   'toggle-sidebar-panel',
-  'toggle-bottom-panel',
-
-  // File dialog / directory listing
-  'list-directory',
-  'pick-folder',
-  'pick-file'
+  'toggle-bottom-panel'
 ];
 
 /**
@@ -349,10 +341,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
     exists: (filePath) => ipcRenderer.invoke('path-exists', filePath),
     isDirectory: (filePath) => ipcRenderer.invoke('is-directory', filePath),
     copy: (source, destination) => ipcRenderer.invoke('copy-path', { source, destination }),
-    move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination }),
-    list: (dirPath) => ipcRenderer.invoke('list-directory', dirPath),
-    pickFolder: () => ipcRenderer.invoke('pick-folder'),
-    pickFile: () => ipcRenderer.invoke('pick-file')
+    move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination })
   },
 
   // Theme Operations

src/renderer.js

@@ -1,20 +1,10 @@
 /**
  * MarkdownConverter Renderer Process
- * @version 4.4.2
+ * @version 4.3.0
  */
 
-const { ipcRenderer } = require('electron');
-
-// Shim window.electronAPI for main window which uses nodeIntegration
-// without preload script (window.electronAPI is normally set by preload.js).
-if (typeof window !== 'undefined' && !window.electronAPI) {
-    window.electronAPI = {
-        getAppVersion: () => ipcRenderer.invoke('get-app-version'),
-        invoke: (channel, data) => ipcRenderer.invoke(channel, data),
-        on: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args))
-    };
-}
-
+// Electron removed - using tauri-commands.js
+import { file, events, app, exportDoc, git, pdf, dialog } from './tauri-commands.js';
 const marked = require('marked');
 const { markedHighlight } = require('marked-highlight');
 const createDOMPurify = require('dompurify');
@@ -22,13 +12,7 @@ const DOMPurify = createDOMPurify(window);
 const hljs = require('highlight.js');
 const { createEditor } = require('./editor/codemirror-setup');
 const { undo, redo } = require('@codemirror/commands');
-// ModalManager is loaded via <script src="utils/ModalManager.js"> in index.html.
-// It already exists in the global scope — re-declaring with let/const causes
-// SyntaxError: "Identifier 'ModalManager' has already been declared".
-if (typeof ModalManager === 'undefined') {
-    const result = require('./utils/ModalManager');
-    ModalManager = result.ModalManager || result;
-}
+const { ModalManager } = require('./utils/ModalManager');
 // Lazy-loaded modules — defer heavy imports until first use
 let _SidebarManager, _renderTemplatesPanel, _renderExplorerPanel, _renderGitPanel, _renderSnippetsPanel;
 let _ReplPanel, _CommandPalette, _PrintPreview, _createWelcomeContent;
@@ -119,24 +103,19 @@ marked.use({
         start(src) { return src.match(/^:::(note|warning|tip|danger|info)/m)?.index; },
         tokenizer(src) {
             const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
-            if (match && match.index === 0) {
-                const admonitionType = match[1];
-                const text = match[2].trim();
-                const tokens = [];
-                this.lexer.blockTokens(text, tokens);
+            if (match) {
                 return {
                     type: 'admonition',
                     raw: match[0],
-                    admonitionType,
-                    text,
-                    tokens
+                    admonitionType: match[1],
+                    text: match[2].trim()
                 };
             }
         },
         renderer(token) {
             const icons = { note: '\u2139', warning: '\u26A0', tip: '\uD83D\uDCA1', danger: '\uD83D\uDD34', info: '\u2139' };
             const icon = icons[token.admonitionType] || '\u2139';
-            const inner = this.parser.parse(token.tokens || []);
+            const inner = this.parser.parse(token.text);
             return `<div class="admonition admonition-${token.admonitionType}">
                 <div class="admonition-title">${icon} ${token.admonitionType.charAt(0).toUpperCase() + token.admonitionType.slice(1)}</div>
                 <div class="admonition-content">${inner}</div>
@@ -153,20 +132,8 @@ function plantumlEncode(text) {
     return '~h' + hex;
 }
 
-// Scopes user custom CSS by prefixing all selectors to protect application UI
-function scopeCSS(cssText, scopeSelector) {
-    if (!cssText) return '';
-    return cssText.replace(/([^\r\n,{}]+)(,(?=[^}]*{)|(?=[^{]*{))/g, (match, selector, separator) => {
-        const trimmed = selector.trim();
-        if (!trimmed || trimmed.startsWith('@') || trimmed.startsWith(':root') || trimmed.startsWith('from') || trimmed.startsWith('to') || /^\d+%$/.test(trimmed)) {
-            return match;
-        }
-        return scopeSelector + ' ' + trimmed + (separator || '');
-    });
-}
-
 // Module-level reference set by DOMContentLoaded after sidebar registration
-const outlinePanelContainer = null;
+let outlinePanelContainer = null;
 
 // Tab Management
 class TabManager {
@@ -181,7 +148,6 @@ class TabManager {
         this.recentFiles = JSON.parse(localStorage.getItem('recentFiles') || '[]');
         this.previewDebounceTimers = new Map(); // Debounce timers per tab
         this.previewDebounceDelay = 300; // 300ms debounce
-        this.previewCache = new Map(); // Performance optimization render cache
 
         // Initialize first tab
         this.tabs.set(1, {
@@ -265,7 +231,7 @@ class TabManager {
             editorView: null,
             findMatches: [],
             currentMatchIndex: -1,
-            type: type, // 'markdown' or 'pdf'
+            type: type,
             // PDF-specific state
             pdfDoc: null,
             pdfCurrentPage: 1,
@@ -278,7 +244,6 @@ class TabManager {
         this.switchToTab(newTabId);
         this.startAutoSave();
         this.updateTabBar();
-        console.log('createNewTab: tab created with type:', type);
     }
 
     createPdfTab(filePath) {
@@ -490,7 +455,27 @@ class TabManager {
         document.querySelector('.editor-container').appendChild(tabContent);
 
         // Initialize CodeMirror editor
-        this.ensureEditor(tab);
+        const editorContainer = document.getElementById(`editor-cm-${tab.id}`);
+        if (editorContainer) {
+            const isDark = document.body.className.includes('dark');
+            tab.editorView = createEditor(editorContainer, {
+                content: tab.content,
+                onChange: (newContent) => {
+                    tab.content = newContent;
+                    tab.isDirty = true;
+                    this.updatePreview(tab.id);
+                    this.updateWordCount();
+                    this.updateTabBar();
+                    if (outlinePanelContainer?._refreshOutline) outlinePanelContainer._refreshOutline();
+                },
+                onUpdate: (view) => {
+                    this.updateCursorPosition(view);
+                    if (outlinePanelContainer?._setActiveHeading) outlinePanelContainer._setActiveHeading(view.state.doc.lineAt(view.state.selection.main.head).number);
+                },
+                isDark,
+                showLineNumbers: this.showLineNumbers,
+            });
+        }
     }
     
     switchToTab(tabId) {
@@ -516,7 +501,7 @@ class TabManager {
 
         // Notify main process about current file for exports
         const tab = this.tabs.get(tabId);
-        ipcRenderer.send('set-current-file', tab?.filePath || null);
+        const result = await file.write(path, content);
 
         // Refresh outline panel for new tab content
         if (outlinePanelContainer?._refreshOutline) outlinePanelContainer._refreshOutline();
@@ -676,11 +661,6 @@ class TabManager {
         const tab = this.tabs.get(tabId);
         if (!tab || tab.type === 'pdf') return;
 
-        // Guard against auto-renders in large file mode
-        if (tab.largeFileMode && !immediate) {
-            return;
-        }
-
         // Clear existing debounce timer for this tab
         if (this.previewDebounceTimers.has(tabId)) {
             clearTimeout(this.previewDebounceTimers.get(tabId));
@@ -699,55 +679,20 @@ class TabManager {
         }, this.previewDebounceDelay));
     }
 
-    _hash(str) {
-        if (!str) return 0;
-        let hash = 0;
-        for (let i = 0; i < str.length; i++) {
-            hash = ((hash << 5) - hash) + str.charCodeAt(i);
-            hash |= 0; // Convert to 32bit integer
-        }
-        return hash;
-    }
-
     _renderPreview(tabId) {
         const tab = this.tabs.get(tabId);
         const preview = document.getElementById(`preview-${tabId}`);
-        console.log('[_renderPreview] tabId:', tabId, 'tab exists:', !!tab, 'preview exists:', !!preview, 'content length:', tab?.content?.length);
 
         if (!tab || !preview) return;
 
         try {
             // Check if libraries are available
             if (!marked || !DOMPurify) {
-                console.error('[_renderPreview] Libraries not available:', { marked: !!marked, DOMPurify: !!DOMPurify });
                 preview.innerHTML = '<div class="preview-error"><div class="preview-error-icon">⚠️</div><div class="preview-error-title">Libraries Not Loaded</div><div class="preview-error-message">Required libraries (marked/DOMPurify) could not be loaded. Please check your installation.</div></div>';
                 return;
             }
-
-            // Cache lookup
-            const contentHash = this._hash(tab.content);
-            let sanitizedHtml;
-            if (this.previewCache.has(contentHash)) {
-                console.log('[_renderPreview] Cache hit for hash:', contentHash);
-                sanitizedHtml = this.previewCache.get(contentHash);
-            } else {
-                console.log('[_renderPreview] Cache miss. About to call marked.parse, content length:', tab.content.length);
-                const html = marked.parse(tab.content);
-                console.log('[_renderPreview] marked.parse returned type:', typeof html, 'isPromise:', html instanceof Promise);
-                if (html instanceof Promise) {
-                    console.error('[_renderPreview] marked.parse returned a Promise! Need to await it.');
-                    return;
-                }
-                sanitizedHtml = DOMPurify.sanitize(html);
-                console.log('[_renderPreview] DOMPurify.sanitize returned, length:', sanitizedHtml.length);
-
-                // Add to cache and maintain cache size limit (100 entries)
-                this.previewCache.set(contentHash, sanitizedHtml);
-                if (this.previewCache.size > 100) {
-                    const oldestKey = this.previewCache.keys().next().value;
-                    this.previewCache.delete(oldestKey);
-                }
-            }
+            const html = marked.parse(tab.content);
+            let sanitizedHtml = DOMPurify.sanitize(html);
 
             // TOC generation
             if (sanitizedHtml.includes('[[toc]]') || sanitizedHtml.includes('[TOC]')) {
@@ -979,7 +924,7 @@ class TabManager {
 
         // Only auto-save if content has changed since last save
         if (tab.lastSavedContent !== tab.content) {
-            ipcRenderer.send('save-file', { path: tab.filePath, content: tab.content });
+            await file.write(tab.filePath, tab.content);
             tab.lastSavedContent = tab.content;
 
             // Show brief auto-save indicator
@@ -1018,7 +963,7 @@ class TabManager {
 
         // Save to localStorage and sync with main process
         localStorage.setItem('recentFiles', JSON.stringify(this.recentFiles));
-        ipcRenderer.send('save-recent-files', this.recentFiles);
+        await app.saveRecentFiles(this.recentFiles);
     }
 
     getRecentFiles() {
@@ -1383,22 +1328,10 @@ class TabManager {
         }
     }
     
-    checkForLargeFile(tab, content) {
-        if (content && content.length > 1024 * 1024) { // >1MB
-            tab.largeFileMode = true;
-            this.isPreviewVisible = false;
-            this.updatePreviewVisibility();
-            notifyUser('Large file detected (>1MB). Large File Mode enabled to maintain peak responsiveness. Live preview auto-render is disabled.', 'warning');
-        } else {
-            tab.largeFileMode = false;
-        }
-    }
-
     // File operations
     openFile(filePath, content) {
         console.log('openFile called with:', filePath, 'content length:', content.length);
         let tab = this.tabs.get(this.activeTabId);
-        console.log('openFile tab state before:', { id: tab?.id, hasEditorView: !!tab?.editorView, contentLength: tab?.content?.length, filePath: tab?.filePath, isDirty: tab?.isDirty });
 
         // Handle both forward and back slashes for cross-platform compatibility
         const fileName = filePath.split(/[\\/]/).pop();
@@ -1412,31 +1345,24 @@ class TabManager {
             tab.originalContent = content;
             tab.isDirty = false;
 
-            this.checkForLargeFile(tab, content);
-
             // Update the editor and preview
             this.setEditorContent(this.activeTabId, content);
-            console.log('openFile after setEditorContent, tab state:', { id: tab.id, hasEditorView: !!tab.editorView, contentLength: tab.content.length });
-            this.updatePreview(this.activeTabId, true); // immediate=true for initial load
+            this.updatePreview(this.activeTabId);
             this.updateWordCount();
         } else {
             // Create new tab for the file
             console.log('Creating new tab for file');
             this.createNewTab();
             tab = this.tabs.get(this.activeTabId);
-            console.log('openFile after createNewTab, tab:', { id: tab.id, hasEditorView: !!tab.editorView });
             tab.filePath = filePath;
             tab.title = fileName;
             tab.content = content;
             tab.originalContent = content;
             tab.isDirty = false;
 
-            this.checkForLargeFile(tab, content);
-
             // Set content in the CodeMirror editor
             this.setEditorContent(this.activeTabId, content);
-            console.log('openFile after setEditorContent, tab state:', { id: tab.id, hasEditorView: !!tab.editorView, contentLength: tab.content.length });
-            this.updatePreview(this.activeTabId, true); // immediate=true for initial load
+            this.updatePreview(this.activeTabId);
             this.updateWordCount();
         }
         this.startAutoSave();
@@ -1444,10 +1370,9 @@ class TabManager {
         this.updateTabBar();
         this.updateFilePath();
         this.updateBreadcrumb();
-        this.updateUI(); // Ensure tab content is visible
 
         // Notify main process about current file for exports
-        ipcRenderer.send('set-current-file', filePath);
+        // handled via event
 
         console.log('File opened successfully');
     }
@@ -1461,47 +1386,9 @@ class TabManager {
         return tab?.content || '';
     }
 
-    // Ensure a tab has a CodeMirror editor (lazy creation fallback)
-    ensureEditor(tab) {
-        if (tab.editorView) return true;
-        const editorContainer = document.getElementById(`editor-cm-${tab.id}`);
-        if (!editorContainer) {
-            console.error(`[ensureEditor] editor-cm-${tab.id} not found in DOM`);
-            return false;
-        }
-        try {
-            const isDark = document.body.className.includes('dark');
-            tab.editorView = createEditor(editorContainer, {
-                content: tab.content,
-                onChange: (newContent) => {
-                    tab.content = newContent;
-                    tab.isDirty = true;
-                    this.updatePreview(tab.id);
-                    this.updateWordCount();
-                    this.updateTabBar();
-                    if (outlinePanelContainer?._refreshOutline) outlinePanelContainer._refreshOutline();
-                },
-                onUpdate: (view) => {
-                    this.updateCursorPosition(view);
-                    if (outlinePanelContainer?._setActiveHeading) outlinePanelContainer._setActiveHeading(view.state.doc.lineAt(view.state.selection.main.head).number);
-                },
-                isDark,
-                showLineNumbers: this.showLineNumbers,
-            });
-            console.log(`[ensureEditor] Created editor for tab ${tab.id}`);
-            return true;
-        } catch (err) {
-            console.error(`[ensureEditor] Failed to create editor for tab ${tab.id}:`, err);
-            return false;
-        }
-    }
-
     // Set content in editor
     setEditorContent(tabId, content) {
         const tab = this.tabs.get(tabId);
-        if (!tab?.editorView) {
-            this.ensureEditor(tab);
-        }
         if (tab?.editorView) {
             tab.editorView.dispatch({
                 changes: { from: 0, to: tab.editorView.state.doc.length, insert: content }
@@ -1559,13 +1446,6 @@ let replPanel;
 
 document.addEventListener('DOMContentLoaded', async () => {
     tabManager = new TabManager();
-
-    // Load saved Custom Preview CSS if present
-    const savedCSSContent = localStorage.getItem('customPreviewCSSContent');
-    if (savedCSSContent) {
-        applyCustomPreviewCSS(savedCSSContent);
-    }
-
     const ReplPanel = getReplPanel();
     replPanel = new ReplPanel();
 
@@ -1604,12 +1484,12 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Initialize sidebar
     const SidebarManager = getSidebarManager();
     const sidebarManager = new SidebarManager();
-    const explorerCurrentDir = null;
+    let explorerCurrentDir = null;
 
     sidebarManager.registerPanel('explorer', {
         title: 'Explorer',
         render: (container) => getRenderExplorerPanel()(container, {
-            listDirectory: (dir) => ipcRenderer.invoke('list-directory', dir),
+            listDirectory: (dir) => file.listDirectory(dir),
             onFileOpen: (filePath) => ipcRenderer.send('open-file-path', filePath),
             currentDir: explorerCurrentDir,
         })
@@ -1617,11 +1497,11 @@ document.addEventListener('DOMContentLoaded', async () => {
     sidebarManager.registerPanel('git', {
         title: 'Git',
         render: (container) => getRenderGitPanel()(container, {
-            gitStatus: () => ipcRenderer.invoke('git-status'),
-            gitDiff: (file) => ipcRenderer.invoke('git-diff', { file }),
-            gitStage: (files) => ipcRenderer.invoke('git-stage', { files }),
-            gitCommit: (message) => ipcRenderer.invoke('git-commit', { message }),
-            gitLog: () => ipcRenderer.invoke('git-log'),
+            gitStatus: () => git.status(tab?.filePath ? path.dirname(tab.filePath) : null),
+            gitDiff: (file) => git.diff(path.dirname(file) || null, file),
+            gitStage: (files) => git.stage(path.dirname(files[0]) || null, files),
+            gitCommit: (message) => git.commit(getGitRepoPath(), message),
+            gitLog: () => git.log(getGitRepoPath()),
         })
     });
     sidebarManager.registerPanel('snippets', {
@@ -1636,7 +1516,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     sidebarManager.registerPanel('templates', {
         title: 'Templates',
         render: (container) => getRenderTemplatesPanel()(container, async (file) => {
-            const templateContent = await ipcRenderer.invoke('load-template', file);
+            const templateContent = await ipcRenderer.invoke('load-template', file),
             if (templateContent) {
                 const content = templateContent.replace(/\{\{DATE\}\}/g, new Date().toISOString().split('T')[0]);
                 tabManager.createNewTab();
@@ -1745,8 +1625,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         const welcomeHtml = getCreateWelcomeContent()(recentFiles, appVersion);
 
         const tab = tabManager.tabs.get(tabManager.activeTabId);
-        // Only show welcome if no file was opened while we were awaiting
-        if (tab && !tab.filePath && tab.content === '') {
+        if (tab) {
             tab.title = 'Welcome';
             tab.content = '';
             const preview = document.getElementById(`preview-${tab.id}`);
@@ -1888,8 +1767,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     commandPalette.register('Insert Image', '', () => tabManager.wrapSelection('![', '](image.jpg)'));
     commandPalette.register('Toggle Zen Mode', 'F11', () => zenMode.toggle());
     commandPalette.register('Writing Analytics', 'Ctrl+Shift+A', () => getShowAnalyticsModal()(tabManager));
-    commandPalette.register('Load Custom Preview CSS', '', triggerLoadCustomCSS);
-    commandPalette.register('Clear Custom Preview CSS', '', triggerClearCustomCSS);
 
     // Keyboard shortcuts
     document.addEventListener('keydown', (e) => {
@@ -1915,9 +1792,27 @@ document.addEventListener('DOMContentLoaded', async () => {
     });
 
     // Initialize CodeMirror for the initial tab (tab 1)
-    const initialTab = tabManager.tabs.get(1);
-    if (initialTab) {
-        tabManager.ensureEditor(initialTab);
+    const initialEditorContainer = document.getElementById('editor-cm-1');
+    if (initialEditorContainer) {
+        const tab = tabManager.tabs.get(1);
+        const isDark = document.body.className.includes('dark');
+        tab.editorView = createEditor(initialEditorContainer, {
+            content: tab.content,
+            onChange: (newContent) => {
+                tab.content = newContent;
+                tab.isDirty = true;
+                tabManager.updatePreview(tab.id);
+                tabManager.updateWordCount();
+                tabManager.updateTabBar();
+                if (outlinePanelContainer?._refreshOutline) outlinePanelContainer._refreshOutline();
+            },
+            onUpdate: (view) => {
+                tabManager.updateCursorPosition(view);
+                if (outlinePanelContainer?._setActiveHeading) outlinePanelContainer._setActiveHeading(view.state.doc.lineAt(view.state.selection.main.head).number);
+            },
+            isDark,
+            showLineNumbers: tabManager.showLineNumbers,
+        });
     }
 
     // Request current theme
@@ -1942,33 +1837,20 @@ document.addEventListener('DOMContentLoaded', async () => {
 });
 
 // IPC event listeners
-// IPC event listeners
-ipcRenderer.on('file-new', () => {
+events.onFileNew(() => {
     tabManager.createNewTab();
 });
 
-ipcRenderer.on('file-opened', (event, data) => {
+events.onFileOpened((event, data) => {
     console.log('[RENDERER] file-opened received:', data.path, 'content length:', data.content.length);
-    console.log('[RENDERER] activeTabId before openFile:', tabManager.activeTabId);
-    // Diagnostic: check library state
-    console.log('[RENDERER] Library state:', {
-        marked: typeof marked,
-        DOMPurify: typeof DOMPurify,
-        markedParse: typeof marked?.parse,
-        dompurifySanitize: typeof DOMPurify?.sanitize,
-        tabManagerExists: !!tabManager
-    });
     if (tabManager) {
         tabManager.openFile(data.path, data.content);
-        console.log('[RENDERER] activeTabId after openFile:', tabManager.activeTabId);
-        const tab = tabManager.tabs.get(tabManager.activeTabId);
-        console.log('[RENDERER] tab state:', { id: tab?.id, hasEditorView: !!tab?.editorView, contentLength: tab?.content?.length });
     } else {
         console.error('[RENDERER] tabManager not initialized!');
     }
 });
 
-ipcRenderer.on('file-save', () => {
+events.onFileSave(() => {
     const currentContent = tabManager.getCurrentContent();
     const currentFilePath = tabManager.getCurrentFilePath();
     // send to main process which will save or trigger save-as dialog
@@ -1996,12 +1878,12 @@ ipcRenderer.on('get-content-for-spreadsheet', (event, format) => {
     ipcRenderer.send('export-spreadsheet', { content: currentContent, format });
 });
 
-ipcRenderer.on('toggle-preview', () => {
+events.onTogglePreview(() => {
     tabManager.isPreviewVisible = !tabManager.isPreviewVisible;
     tabManager.updatePreviewVisibility();
 });
 
-ipcRenderer.on('toggle-find', () => {
+events.onToggleFind(() => {
     if (window.modals.findModal.isOpen()) {
         window.modals.findModal.close();
     } else {
@@ -2010,7 +1892,7 @@ ipcRenderer.on('toggle-find', () => {
     }
 });
 
-ipcRenderer.on('theme-changed', (event, theme) => {
+events.onThemeChanged((event, theme) => {
     console.log('[RENDERER] Theme changed to:', theme);
     document.body.className = `theme-${theme}`;
 
@@ -2023,7 +1905,7 @@ ipcRenderer.on('theme-changed', (event, theme) => {
 });
 
 // Undo/Redo handlers — delegate to CodeMirror's built-in history
-ipcRenderer.on('undo', () => {
+events.onUndo(() => {
     if (tabManager) {
         const tab = tabManager.tabs.get(tabManager.activeTabId);
         if (tab?.editorView) {
@@ -2032,7 +1914,7 @@ ipcRenderer.on('undo', () => {
     }
 });
 
-ipcRenderer.on('redo', () => {
+events.onRedo(() => {
     if (tabManager) {
         const tab = tabManager.tabs.get(tabManager.activeTabId);
         if (tab?.editorView) {
@@ -2041,49 +1923,6 @@ ipcRenderer.on('redo', () => {
     }
 });
 
-// Custom Preview CSS event handlers and trigger helpers
-function applyCustomPreviewCSS(cssContent) {
-    let styleTag = document.getElementById('custom-preview-style');
-    if (!styleTag) {
-        styleTag = document.createElement('style');
-        styleTag.id = 'custom-preview-style';
-        document.head.appendChild(styleTag);
-    }
-    const scopedCSS = scopeCSS(cssContent, '.preview-content');
-    styleTag.textContent = scopedCSS;
-}
-
-async function triggerLoadCustomCSS() {
-    try {
-        const result = await window.electronAPI.invoke('select-custom-css');
-        if (result) {
-            console.log('[RENDERER] Custom CSS loaded from:', result.path);
-            localStorage.setItem('customPreviewCSSPath', result.path);
-            localStorage.setItem('customPreviewCSSContent', result.content);
-            applyCustomPreviewCSS(result.content);
-            notifyUser('Custom preview stylesheet applied successfully.', 'success');
-        }
-    } catch (err) {
-        console.error('[RENDERER] Error loading custom CSS:', err);
-        notifyUser('Failed to load custom CSS stylesheet.', 'error');
-    }
-}
-
-function triggerClearCustomCSS() {
-    localStorage.removeItem('customPreviewCSSPath');
-    localStorage.removeItem('customPreviewCSSContent');
-    const styleTag = document.getElementById('custom-preview-style');
-    if (styleTag) {
-        styleTag.remove();
-    }
-    notifyUser('Custom preview stylesheet cleared.', 'info');
-}
-
-ipcRenderer.on('load-custom-css', triggerLoadCustomCSS);
-ipcRenderer.on('clear-custom-css', triggerClearCustomCSS);
-
-
-
 // Font size adjustment
 let currentFontSize = parseInt(localStorage.getItem('fontSize')) || 15;
 
@@ -2203,39 +2042,13 @@ function initializeExportForm(format) {
     document.getElementById('export-citeproc').checked = false;
     document.getElementById('export-toc-depth').value = 3;
 
-    // Toggle and reset PDF-specific fields
-    const pdfOnly = document.querySelector('.pdf-only');
-    if (pdfOnly) {
-        pdfOnly.style.display = (format === 'pdf') ? 'block' : 'none';
-    }
+    // PDF-specific fields
     if (format === 'pdf') {
         document.getElementById('pdf-engine').value = 'xelatex';
         document.getElementById('pdf-geometry').value = 'margin=1in';
         document.getElementById('custom-geometry').style.display = 'none';
     }
 
-    // Toggle and reset Reveal.js-specific fields
-    const revealjsOnly = document.querySelector('.revealjs-only');
-    if (revealjsOnly) {
-        revealjsOnly.style.display = (format === 'revealjs') ? 'block' : 'none';
-    }
-    const revealTheme = document.getElementById('reveal-theme');
-    if (revealTheme) revealTheme.value = 'black';
-    const revealTransition = document.getElementById('reveal-transition');
-    if (revealTransition) revealTransition.value = 'slide';
-    const revealSpeed = document.getElementById('reveal-speed');
-    if (revealSpeed) revealSpeed.value = 'default';
-    const revealSlideNumber = document.getElementById('reveal-slide-number');
-    if (revealSlideNumber) revealSlideNumber.checked = false;
-    const revealControls = document.getElementById('reveal-controls');
-    if (revealControls) revealControls.checked = true;
-    const revealProgress = document.getElementById('reveal-progress');
-    if (revealProgress) revealProgress.checked = true;
-    const revealHistory = document.getElementById('reveal-history');
-    if (revealHistory) revealHistory.checked = true;
-    const revealCenter = document.getElementById('reveal-center');
-    if (revealCenter) revealCenter.checked = true;
-
     // Clear bibliography fields
     document.getElementById('bibliography-file').value = '';
     document.getElementById('csl-file').value = '';
@@ -2295,18 +2108,6 @@ function collectExportOptions() {
             }
         }
 
-        // Reveal.js-specific options
-        if (currentExportFormat === 'revealjs') {
-            options.revealTheme = document.getElementById('reveal-theme').value;
-            options.revealTransition = document.getElementById('reveal-transition').value;
-            options.revealTransitionSpeed = document.getElementById('reveal-speed').value;
-            options.revealSlideNumber = document.getElementById('reveal-slide-number').checked;
-            options.revealControls = document.getElementById('reveal-controls').checked;
-            options.revealProgress = document.getElementById('reveal-progress').checked;
-            options.revealHistory = document.getElementById('reveal-history').checked;
-            options.revealCenter = document.getElementById('reveal-center').checked;
-        }
-
         // Bibliography
         const bibFile = document.getElementById('bibliography-file').value.trim();
         const cslFile = document.getElementById('csl-file').value.trim();
@@ -2317,15 +2118,6 @@ function collectExportOptions() {
         if (currentExportFormat === 'pdf') {
             options.pdfEngine = 'xelatex';
             options.geometry = 'margin=1in';
-        } else if (currentExportFormat === 'revealjs') {
-            options.revealTheme = 'black';
-            options.revealTransition = 'slide';
-            options.revealTransitionSpeed = 'default';
-            options.revealSlideNumber = false;
-            options.revealControls = true;
-            options.revealProgress = true;
-            options.revealHistory = true;
-            options.revealCenter = true;
         }
     }
 
@@ -3243,18 +3035,6 @@ function showPDFEditorDialog(operation, openedFilePath = null) {
         section.classList.add('hidden');
     });
 
-    // Hide visual thumbnail sidebar by default
-    const sidebar = document.getElementById('pdf-thumbnail-sidebar');
-    if (sidebar) {
-        sidebar.classList.add('hidden');
-    }
-    const body = document.querySelector('.pdf-editor-body');
-    if (body) {
-        body.classList.remove('side-by-side');
-    }
-    pdfDocInstance = null;
-    pdfPreviewState = { pages: [], filePath: '' };
-
     // Show the appropriate section and set title
     let sectionId, titleText;
     switch (operation) {
@@ -3288,11 +3068,7 @@ function showPDFEditorDialog(operation, openedFilePath = null) {
             titleText = 'Rotate Pages';
             if (openedFilePath) {
                 const rotateInput = document.getElementById('rotate-input-path');
-                if (rotateInput) {
-                    rotateInput.value = openedFilePath;
-                    // Trigger thumbnail generation
-                    setTimeout(() => onPDFFileSelected('rotate-input-path', openedFilePath), 50);
-                }
+                if (rotateInput) rotateInput.value = openedFilePath;
             }
             break;
         case 'delete':
@@ -3300,11 +3076,7 @@ function showPDFEditorDialog(operation, openedFilePath = null) {
             titleText = 'Delete Pages';
             if (openedFilePath) {
                 const deleteInput = document.getElementById('delete-input-path');
-                if (deleteInput) {
-                    deleteInput.value = openedFilePath;
-                    // Trigger thumbnail generation
-                    setTimeout(() => onPDFFileSelected('delete-input-path', openedFilePath), 50);
-                }
+                if (deleteInput) deleteInput.value = openedFilePath;
             }
             break;
         case 'reorder':
@@ -3312,11 +3084,7 @@ function showPDFEditorDialog(operation, openedFilePath = null) {
             titleText = 'Reorder Pages';
             if (openedFilePath) {
                 const reorderInput = document.getElementById('reorder-input-path');
-                if (reorderInput) {
-                    reorderInput.value = openedFilePath;
-                    // Trigger thumbnail generation
-                    setTimeout(() => onPDFFileSelected('reorder-input-path', openedFilePath), 50);
-                }
+                if (reorderInput) reorderInput.value = openedFilePath;
             }
             break;
         case 'watermark':
@@ -3477,7 +3245,6 @@ document.addEventListener('DOMContentLoaded', () => {
                         const file = e.target.files[0];
                         if (file) {
                             document.getElementById(button.inputId).value = file.path;
-                            onPDFFileSelected(button.inputId, file.path);
                         }
                     };
                     input.click();
@@ -3487,7 +3254,6 @@ document.addEventListener('DOMContentLoaded', () => {
                         const file = e.target.files[0];
                         if (file) {
                             document.getElementById(button.inputId).value = file.path;
-                            onPDFFileSelected(button.inputId, file.path);
                         }
                     };
                     input.click();
@@ -3632,7 +3398,7 @@ function showPDFValidationMessage(message, focusSelector = null) {
 // Process PDF Operation
 function processPDFOperation() {
     const operation = currentPDFOperation;
-    const operationData = { operation };
+    let operationData = { operation };
 
     try {
         switch (operation) {
@@ -4422,7 +4188,7 @@ function textToASCII(text, style) {
         lines[i] = '';
     }
 
-    for (const char of upperText) {
+    for (let char of upperText) {
         const charLines = font.chars[char] || font.chars[' '];
         if (charLines) {
             for (let i = 0; i < font.height; i++) {
@@ -4460,7 +4226,7 @@ function createASCIIBox(text, style, padding) {
     }
 
     // Content lines
-    for (const line of lines) {
+    for (let line of lines) {
         const paddedLine = line.padEnd(maxLength, ' ');
         result += chars.v + ' '.repeat(padding) + paddedLine + ' '.repeat(padding) + chars.v + '\n';
     }
@@ -5096,224 +4862,3 @@ ipcRenderer.on('show-video-tool', (event, tool) => {
         { duration: 5000 }
     );
 });
-
-// ============================================
-// PDF EDITOR VISUAL PAGE SIDEBAR HANDLERS
-// ============================================
-let pdfDocInstance = null;
-let pdfPreviewState = { pages: [], filePath: '' };
-
-function onPDFFileSelected(inputId, filePath) {
-    const eligibleInputs = ['rotate-input-path', 'delete-input-path', 'reorder-input-path'];
-    if (!eligibleInputs.includes(inputId)) {
-        return;
-    }
-
-    const sidebar = document.getElementById('pdf-thumbnail-sidebar');
-    if (sidebar) {
-        sidebar.classList.remove('hidden');
-    }
-    const body = document.querySelector('.pdf-editor-body');
-    if (body) {
-        body.classList.add('side-by-side');
-    }
-
-    loadPDFThumbnails(filePath);
-}
-
-async function loadPDFThumbnails(filePath) {
-    const grid = document.getElementById('pdf-thumbnail-grid');
-    if (!grid) return;
-
-    // Reset previous inputs
-    const rotateInput = document.getElementById('rotate-pages');
-    if (rotateInput) rotateInput.value = '';
-    const deleteInput = document.getElementById('delete-pages');
-    if (deleteInput) deleteInput.value = '';
-    const reorderInput = document.getElementById('reorder-pages');
-    if (reorderInput) reorderInput.value = '';
-
-    grid.innerHTML = '<div class="loading-thumbnails">Loading page thumbnails...</div>';
-
-    try {
-        const pdfjs = getPdfjsLib();
-        const loadingTask = pdfjs.getDocument(filePath);
-        pdfDocInstance = await loadingTask.promise;
-
-        pdfPreviewState.filePath = filePath;
-        pdfPreviewState.pages = [];
-
-        for (let i = 1; i <= pdfDocInstance.numPages; i++) {
-            pdfPreviewState.pages.push({
-                originalPageNum: i,
-                rotation: 0,
-                isDeleted: false
-            });
-        }
-
-        renderThumbnailGrid();
-    } catch (err) {
-        console.error('Error loading PDF thumbnails:', err);
-        grid.innerHTML = '<div class="thumbnail-error">Failed to load PDF thumbnails.</div>';
-    }
-}
-
-function renderThumbnailGrid() {
-    const grid = document.getElementById('pdf-thumbnail-grid');
-    if (!grid || !pdfDocInstance) return;
-
-    grid.innerHTML = '';
-
-    pdfPreviewState.pages.forEach((pageInfo, index) => {
-        const card = document.createElement('div');
-        card.className = 'pdf-thumbnail-card';
-        if (pageInfo.isDeleted) {
-            card.classList.add('marked-delete');
-        }
-
-        const heading = document.createElement('div');
-        heading.className = 'pdf-thumbnail-header';
-        heading.innerHTML = `<span class="badge">Page ${pageInfo.originalPageNum}</span>`;
-
-        const canvasContainer = document.createElement('div');
-        canvasContainer.className = 'canvas-container';
-
-        const canvas = document.createElement('canvas');
-        canvas.className = 'pdf-thumbnail-canvas';
-        if (pageInfo.rotation > 0) {
-            canvas.classList.add('rot' + pageInfo.rotation);
-        }
-        canvasContainer.appendChild(canvas);
-
-        // Render thumbnail canvas
-        renderThumbnail(pdfDocInstance, pageInfo.originalPageNum, canvas, pageInfo.rotation);
-
-        const controlsRow = document.createElement('div');
-        controlsRow.className = 'pdf-thumbnail-controls';
-
-        // Rotate Button
-        const rotateBtn = document.createElement('button');
-        rotateBtn.type = 'button';
-        rotateBtn.className = 'btn-rotate-thumbnail';
-        rotateBtn.innerHTML = '↻ Rotate 90°';
-        rotateBtn.addEventListener('click', () => {
-            pageInfo.rotation = (pageInfo.rotation + 90) % 360;
-            canvas.className = 'pdf-thumbnail-canvas';
-            if (pageInfo.rotation > 0) {
-                canvas.classList.add('rot' + pageInfo.rotation);
-            }
-            renderThumbnail(pdfDocInstance, pageInfo.originalPageNum, canvas, pageInfo.rotation);
-            syncRotateInput();
-        });
-
-        // Delete Checkbox
-        const deleteLabel = document.createElement('label');
-        deleteLabel.className = 'delete-thumbnail-checkbox';
-
-        const deleteChk = document.createElement('input');
-        deleteChk.type = 'checkbox';
-        deleteChk.checked = pageInfo.isDeleted;
-        deleteChk.addEventListener('change', (e) => {
-            pageInfo.isDeleted = e.target.checked;
-            card.classList.toggle('marked-delete', pageInfo.isDeleted);
-            syncDeleteInput();
-        });
-        deleteLabel.appendChild(deleteChk);
-        deleteLabel.appendChild(document.createTextNode(' Delete'));
-
-        // Reorder buttons
-        const reorderDiv = document.createElement('div');
-        reorderDiv.className = 'pdf-thumbnail-reorder';
-
-        const leftBtn = document.createElement('button');
-        leftBtn.type = 'button';
-        leftBtn.className = 'btn-reorder-left';
-        leftBtn.innerHTML = '◀';
-        leftBtn.disabled = (index === 0);
-        leftBtn.addEventListener('click', () => {
-            const temp = pdfPreviewState.pages[index];
-            pdfPreviewState.pages[index] = pdfPreviewState.pages[index - 1];
-            pdfPreviewState.pages[index - 1] = temp;
-            renderThumbnailGrid();
-            syncReorderInput();
-        });
-
-        const rightBtn = document.createElement('button');
-        rightBtn.type = 'button';
-        rightBtn.className = 'btn-reorder-right';
-        rightBtn.innerHTML = '▶';
-        rightBtn.disabled = (index === pdfPreviewState.pages.length - 1);
-        rightBtn.addEventListener('click', () => {
-            const temp = pdfPreviewState.pages[index];
-            pdfPreviewState.pages[index] = pdfPreviewState.pages[index + 1];
-            pdfPreviewState.pages[index + 1] = temp;
-            renderThumbnailGrid();
-            syncReorderInput();
-        });
-
-        reorderDiv.appendChild(leftBtn);
-        reorderDiv.appendChild(rightBtn);
-
-        controlsRow.appendChild(rotateBtn);
-        controlsRow.appendChild(deleteLabel);
-        controlsRow.appendChild(reorderDiv);
-
-        card.appendChild(heading);
-        card.appendChild(canvasContainer);
-        card.appendChild(controlsRow);
-
-        grid.appendChild(card);
-    });
-}
-
-async function renderThumbnail(pdfDoc, originalPageNum, canvasElement, rotation) {
-    try {
-        const page = await pdfDoc.getPage(originalPageNum);
-        const ctx = canvasElement.getContext('2d');
-
-        // Render at a fixed width of 100px
-        const unscaledViewport = page.getViewport({ scale: 1, rotation: 0 });
-        const scale = 100 / unscaledViewport.width;
-        const viewport = page.getViewport({ scale: scale, rotation: 0 });
-
-        canvasElement.width = viewport.width;
-        canvasElement.height = viewport.height;
-
-        await page.render({
-            canvasContext: ctx,
-            viewport: viewport
-        }).promise;
-    } catch (err) {
-        console.error('Error rendering page canvas:', err);
-    }
-}
-
-function syncRotateInput() {
-    const rotatedPages = pdfPreviewState.pages
-        .filter(p => p.rotation > 0)
-        .map(p => p.originalPageNum);
-
-    const rotateInput = document.getElementById('rotate-pages');
-    if (rotateInput) {
-        rotateInput.value = rotatedPages.join(', ');
-    }
-}
-
-function syncDeleteInput() {
-    const deletedPages = pdfPreviewState.pages
-        .filter(p => p.isDeleted)
-        .map(p => p.originalPageNum);
-
-    const deleteInput = document.getElementById('delete-pages');
-    if (deleteInput) {
-        deleteInput.value = deletedPages.join(', ');
-    }
-}
-
-function syncReorderInput() {
-    const order = pdfPreviewState.pages.map(p => p.originalPageNum);
-    const reorderInput = document.getElementById('reorder-pages');
-    if (reorderInput) {
-        reorderInput.value = order.join(', ');
-    }
-}

src/renderer/App.tsx

@@ -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');
-}