test(renderer): Phase 6 integration smoke test (menu -> command -> store)

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

CLAUDE.md

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

README.md

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

components.json

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

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

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-converter",
-  "version": "4.4.5",
+  "version": "4.4.2",
   "description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
   "main": "src/main.js",
   "scripts": {
@@ -8,6 +8,9 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
+    "test:renderer": "vitest run",
+    "test:renderer:watch": "vitest",
+    "test:renderer:coverage": "vitest run --coverage",
     "lint": "eslint src tests",
     "lint:fix": "eslint src tests --fix",
     "format": "prettier --write src tests",
@@ -43,7 +46,19 @@
     "url": "https://github.com/amitwh/markdown-converter"
   },
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/ui": "^4.1.8",
+    "autoprefixer": "^10.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "cross-env": "^10.0.0",
     "electron": "^41.1.1",
     "electron-builder": "^26.0.12",
@@ -52,8 +67,17 @@
     "eslint-plugin-prettier": "^5.5.4",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
+    "jsdom": "^29.1.1",
+    "lucide-react": "^1.17.0",
+    "postcss": "^8.5.15",
     "prettier": "^3.7.4",
-    "sharp": "^0.34.3"
+    "sharp": "^0.34.3",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^3.4.19",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.1",
@@ -70,6 +94,15 @@
     "@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-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tanstack/react-table": "^8.21.3",
     "codemirror": "^6.0.2",
     "core-util-is": "^1.0.3",
     "docx": "^9.6.0",
@@ -79,16 +112,26 @@
     "ffmpeg-static": "^5.3.0",
     "highlight.js": "^11.11.1",
     "html2pdf.js": "^0.14.0",
+    "immer": "^11.1.8",
     "marked": "^17.0.3",
     "marked-footnote": "^1.4.0",
     "marked-highlight": "^2.2.3",
     "mermaid": "^11.12.3",
+    "motion": "^12.40.0",
+    "next-themes": "^0.4.6",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^5.5.207",
     "pdfkit": "^0.17.2",
     "pizzip": "^3.2.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.77.0",
+    "react-resizable-panels": "^4.11.2",
     "simple-git": "^3.32.3",
-    "tslib": "^2.8.1"
+    "sonner": "^2.0.7",
+    "tslib": "^2.8.1",
+    "zod": "^4.4.3",
+    "zustand": "^5.0.14"
   },
   "overrides": {
     "jszip": "^3.10.1",

postcss.config.js

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

src/adapters/electron/fs.js

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

src/analytics/analytics-panel.js

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

src/analytics/writing-analytics.js

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

src/ascii-generator.html

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

src/command-palette.js

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

src/editor/codemirror-setup.js

@@ -12,23 +12,38 @@ const { EditorState } = require('@codemirror/state');
 const { markdown, markdownLanguage } = require('@codemirror/lang-markdown');
 // Language extensions loaded lazily on first use
 let _javascript, _html, _css, _json, _python;
-const { defaultKeymap, history, historyKeymap, indentWithTab } = require('@codemirror/commands');
-const { searchKeymap, highlightSelectionMatches } = require('@codemirror/search');
-const { autocompletion, completionKeymap } = require('@codemirror/autocomplete');
-const { bracketMatching, foldGutter, indentOnInput } = require('@codemirror/language');
+const {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} = require('@codemirror/commands');
+const {
+  searchKeymap,
+  highlightSelectionMatches,
+} = require('@codemirror/search');
+const {
+  autocompletion,
+  completionKeymap,
+} = require('@codemirror/autocomplete');
+const {
+  bracketMatching,
+  foldGutter,
+  indentOnInput,
+} = require('@codemirror/language');
 const { oneDark } = require('@codemirror/theme-one-dark');
 
 // Custom theme for JetBrains Mono font
 const jetBrainsMonoTheme = EditorView.theme({
   '&': {
-    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace",
+    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace"
   },
   '.cm-content': {
-    fontFamily: 'inherit',
+    fontFamily: 'inherit'
   },
   '.cm-scroller': {
-    fontFamily: 'inherit',
-  },
+    fontFamily: 'inherit'
+  }
 });
 
 /**
@@ -44,14 +59,7 @@ const jetBrainsMonoTheme = EditorView.theme({
  * @returns {EditorView} the created editor view
  */
 function createEditor(parentElement, options = {}) {
-  console.log(
-    '[createEditor] Called with parentElement:',
-    parentElement?.id,
-    'dimensions:',
-    parentElement?.clientWidth,
-    'x',
-    parentElement?.clientHeight
-  );
+  console.log('[createEditor] Called with parentElement:', parentElement?.id, 'dimensions:', parentElement?.clientWidth, 'x', parentElement?.clientHeight);
   if (!parentElement) {
     console.error('[createEditor] ERROR: parentElement is null or undefined!');
     return null;
@@ -117,26 +125,11 @@ function createEditor(parentElement, options = {}) {
  */
 function getLanguageExtension(lang) {
   const loaders = {
-    javascript: () => {
-      if (!_javascript) _javascript = require('@codemirror/lang-javascript').javascript;
-      return _javascript();
-    },
-    html: () => {
-      if (!_html) _html = require('@codemirror/lang-html').html;
-      return _html();
-    },
-    css: () => {
-      if (!_css) _css = require('@codemirror/lang-css').css;
-      return _css();
-    },
-    json: () => {
-      if (!_json) _json = require('@codemirror/lang-json').json;
-      return _json();
-    },
-    python: () => {
-      if (!_python) _python = require('@codemirror/lang-python').python;
-      return _python();
-    },
+    javascript: () => { if (!_javascript) _javascript = require('@codemirror/lang-javascript').javascript; return _javascript(); },
+    html: () => { if (!_html) _html = require('@codemirror/lang-html').html; return _html(); },
+    css: () => { if (!_css) _css = require('@codemirror/lang-css').css; return _css(); },
+    json: () => { if (!_json) _json = require('@codemirror/lang-json').json; return _json(); },
+    python: () => { if (!_python) _python = require('@codemirror/lang-python').python; return _python(); },
     markdown: () => markdown({ base: markdownLanguage }),
   };
   loaders.js = loaders.javascript;

src/main/GitOperations.js

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

src/main/PDFOperations.js

@@ -4,11 +4,11 @@ const { PDFDocument, rgb, degrees, StandardFonts } = require('pdf-lib');
 
 function parsePageRanges(rangeString, totalPages) {
   const pages = [];
-  const ranges = rangeString.split(',').map((r) => r.trim());
+  const ranges = rangeString.split(',').map(r => r.trim());
 
   for (const range of ranges) {
     if (range.includes('-')) {
-      const [start, end] = range.split('-').map((n) => parseInt(n.trim()));
+      const [start, end] = range.split('-').map(n => parseInt(n.trim()));
       for (let i = start; i <= end && i <= totalPages; i++) {
         if (i > 0 && !pages.includes(i - 1)) {
           pages.push(i - 1);
@@ -27,13 +27,11 @@ function parsePageRanges(rangeString, totalPages) {
 
 function hexToRgb(hex) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
+  return result ? {
     r: parseInt(result[1], 16) / 255,
     g: parseInt(result[2], 16) / 255,
-        b: parseInt(result[3], 16) / 255,
-      }
-    : { r: 0, g: 0, b: 0 };
+    b: parseInt(result[3], 16) / 255
+  } : { r: 0, g: 0, b: 0 };
 }
 
 async function pdfMerge(data) {
@@ -44,7 +42,7 @@ async function pdfMerge(data) {
       const pdfBytes = fs.readFileSync(filePath);
       const pdf = await PDFDocument.load(pdfBytes);
       const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
-      copiedPages.forEach((page) => mergedPdf.addPage(page));
+      copiedPages.forEach(page => mergedPdf.addPage(page));
     }
 
     const pdfBytes = await mergedPdf.save();
@@ -65,13 +63,13 @@ async function pdfSplit(data) {
     const splits = [];
 
     if (data.splitMode === 'pages') {
-      const ranges = data.pageRanges.split(',').map((r) => r.trim());
+      const ranges = data.pageRanges.split(',').map(r => r.trim());
       for (let i = 0; i < ranges.length; i++) {
         const range = ranges[i];
         const pages = [];
 
         if (range.includes('-')) {
-          const [start, end] = range.split('-').map((n) => parseInt(n.trim()));
+          const [start, end] = range.split('-').map(n => parseInt(n.trim()));
           for (let p = start; p <= end && p <= totalPages; p++) {
             pages.push(p - 1);
           }
@@ -110,7 +108,7 @@ async function pdfSplit(data) {
     for (const split of splits) {
       const newPdf = await PDFDocument.create();
       const copiedPages = await newPdf.copyPages(pdf, split.pages);
-      copiedPages.forEach((page) => newPdf.addPage(page));
+      copiedPages.forEach(page => newPdf.addPage(page));
 
       const outputPath = path.join(data.outputFolder, `${baseName}_${split.name}.pdf`);
       const newPdfBytes = await newPdf.save();
@@ -131,18 +129,18 @@ async function pdfCompress(data) {
     const compressedPdfBytes = await pdf.save({
       useObjectStreams: true,
       addDefaultPage: false,
-      objectsPerTick: 50,
+      objectsPerTick: 50
     });
 
     fs.writeFileSync(data.outputPath, compressedPdfBytes);
 
     const originalSize = fs.statSync(data.inputPath).size;
     const compressedSize = fs.statSync(data.outputPath).size;
-    const savings = (((originalSize - compressedSize) / originalSize) * 100).toFixed(1);
+    const savings = ((originalSize - compressedSize) / originalSize * 100).toFixed(1);
 
     return {
       success: true,
-      message: `PDF compressed. Size reduced by ${savings}% (${(originalSize / 1024).toFixed(1)}KB → ${(compressedSize / 1024).toFixed(1)}KB)`,
+      message: `PDF compressed. Size reduced by ${savings}% (${(originalSize / 1024).toFixed(1)}KB → ${(compressedSize / 1024).toFixed(1)}KB)`
     };
   } catch (error) {
     return { success: false, error: error.message };
@@ -162,7 +160,7 @@ async function pdfRotate(data) {
       pagesToRotate = Array.from({ length: totalPages }, (_, i) => i);
     }
 
-    pagesToRotate.forEach((pageIndex) => {
+    pagesToRotate.forEach(pageIndex => {
       const page = pdf.getPage(pageIndex);
       page.setRotation(degrees(data.angle));
     });
@@ -172,7 +170,7 @@ async function pdfRotate(data) {
 
     return {
       success: true,
-      message: `Successfully rotated ${pagesToRotate.length} page(s) by ${data.angle}\u00B0`,
+      message: `Successfully rotated ${pagesToRotate.length} page(s) by ${data.angle}\u00B0`
     };
   } catch (error) {
     return { success: false, error: error.message };
@@ -187,9 +185,7 @@ async function pdfDeletePages(data) {
 
     const pagesToDelete = parsePageRanges(data.pages, totalPages);
 
-    pagesToDelete
-      .sort((a, b) => b - a)
-      .forEach((pageIndex) => {
+    pagesToDelete.sort((a, b) => b - a).forEach(pageIndex => {
       pdf.removePage(pageIndex);
     });
 
@@ -198,7 +194,7 @@ async function pdfDeletePages(data) {
 
     return {
       success: true,
-      message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`,
+      message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`
     };
   } catch (error) {
     return { success: false, error: error.message };
@@ -211,7 +207,7 @@ async function pdfReorder(data) {
     const pdf = await PDFDocument.load(pdfBytes);
     const totalPages = pdf.getPageCount();
 
-    const newOrder = data.newOrder.split(',').map((n) => parseInt(n.trim()) - 1);
+    const newOrder = data.newOrder.split(',').map(n => parseInt(n.trim()) - 1);
 
     if (newOrder.length !== totalPages) {
       return { success: false, error: `New order must include all ${totalPages} pages` };
@@ -219,7 +215,7 @@ async function pdfReorder(data) {
 
     const newPdf = await PDFDocument.create();
     const copiedPages = await newPdf.copyPages(pdf, newOrder);
-    copiedPages.forEach((page) => newPdf.addPage(page));
+    copiedPages.forEach(page => newPdf.addPage(page));
 
     const reorderedPdfBytes = await newPdf.save();
     fs.writeFileSync(data.outputPath, reorderedPdfBytes);
@@ -250,9 +246,7 @@ async function pdfWatermark(data) {
       const page = pdf.getPage(pageIndex);
       const { width, height } = page.getSize();
 
-      let x,
-        y,
-        rotation = 0;
+      let x, y, rotation = 0;
 
       switch (data.position) {
         case 'center':
@@ -300,7 +294,7 @@ async function pdfWatermark(data) {
         font,
         color: rgb(color.r, color.g, color.b),
         opacity: data.opacity,
-        rotate: degrees(rotation),
+        rotate: degrees(rotation)
       });
     }
 
@@ -309,7 +303,7 @@ async function pdfWatermark(data) {
 
     return {
       success: true,
-      message: `Successfully added watermark to ${pagesToWatermark.length} page(s)`,
+      message: `Successfully added watermark to ${pagesToWatermark.length} page(s)`
     };
   } catch (error) {
     return { success: false, error: error.message };
@@ -331,8 +325,8 @@ async function pdfEncrypt(data) {
         annotating: data.permissions.annotating,
         fillingForms: data.permissions.fillingForms,
         contentAccessibility: data.permissions.contentAccessibility,
-        documentAssembly: data.permissions.documentAssembly,
-      },
+        documentAssembly: data.permissions.documentAssembly
+      }
     });
 
     fs.writeFileSync(data.outputPath, encryptedPdfBytes);
@@ -342,8 +336,7 @@ async function pdfEncrypt(data) {
     if (error.message.includes('encrypt') || error.message.includes('password')) {
       return {
         success: false,
-        error:
-          'PDF encryption requires pdf-lib with encryption support. This feature may not be available in the current version.',
+        error: 'PDF encryption requires pdf-lib with encryption support. This feature may not be available in the current version.'
       };
     }
     return { success: false, error: error.message };
@@ -382,8 +375,8 @@ async function pdfSetPermissions(data) {
         annotating: data.permissions.annotating,
         fillingForms: data.permissions.fillingForms,
         contentAccessibility: data.permissions.contentAccessibility,
-        documentAssembly: data.permissions.documentAssembly,
-      },
+        documentAssembly: data.permissions.documentAssembly
+      }
     });
 
     fs.writeFileSync(data.outputPath, newPdfBytes);
@@ -393,8 +386,7 @@ async function pdfSetPermissions(data) {
     if (error.message.includes('encrypt') || error.message.includes('permission')) {
       return {
         success: false,
-        error:
-          'PDF permissions require pdf-lib with encryption support. This feature may not be available in the current version.',
+        error: 'PDF permissions require pdf-lib with encryption support. This feature may not be available in the current version.'
       };
     }
     return { success: false, error: error.message };
@@ -403,28 +395,17 @@ async function pdfSetPermissions(data) {
 
 function executeOperation(operation, data) {
   switch (operation) {
-    case 'merge':
-      return pdfMerge(data);
-    case 'split':
-      return pdfSplit(data);
-    case 'compress':
-      return pdfCompress(data);
-    case 'rotate':
-      return pdfRotate(data);
-    case 'delete':
-      return pdfDeletePages(data);
-    case 'reorder':
-      return pdfReorder(data);
-    case 'watermark':
-      return pdfWatermark(data);
-    case 'encrypt':
-      return pdfEncrypt(data);
-    case 'decrypt':
-      return pdfDecrypt(data);
-    case 'permissions':
-      return pdfSetPermissions(data);
-    default:
-      return Promise.resolve({ success: false, error: `Unknown operation: ${operation}` });
+    case 'merge': return pdfMerge(data);
+    case 'split': return pdfSplit(data);
+    case 'compress': return pdfCompress(data);
+    case 'rotate': return pdfRotate(data);
+    case 'delete': return pdfDeletePages(data);
+    case 'reorder': return pdfReorder(data);
+    case 'watermark': return pdfWatermark(data);
+    case 'encrypt': return pdfEncrypt(data);
+    case 'decrypt': return pdfDecrypt(data);
+    case 'permissions': return pdfSetPermissions(data);
+    default: return Promise.resolve({ success: false, error: `Unknown operation: ${operation}` });
   }
 }
 
@@ -448,5 +429,5 @@ module.exports = {
   pdfDecrypt,
   pdfSetPermissions,
   executeOperation,
-  getPageCount,
+  getPageCount
 };

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

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

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

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

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

@@ -15,34 +15,17 @@
       { "id": "start-sprint", "label": "Studio: Start Sprint", "shortcut": "Ctrl+Alt+S" },
       { "id": "stop-sprint", "label": "Studio: Stop Sprint", "shortcut": "Ctrl+Alt+Shift+S" },
       { "id": "take-snapshot", "label": "Studio: Take Snapshot", "shortcut": "Ctrl+Alt+N" },
-      {
-        "id": "restore-last-snapshot",
-        "label": "Studio: Restore Last Snapshot",
-        "shortcut": "Ctrl+Alt+Z"
-      },
+      { "id": "restore-last-snapshot", "label": "Studio: Restore Last Snapshot", "shortcut": "Ctrl+Alt+Z" },
       { "id": "new-project", "label": "Studio: New Project", "shortcut": "" },
-      {
-        "id": "compile-manuscript",
-        "label": "Studio: Compile Manuscript",
-        "shortcut": "Ctrl+Alt+E"
-      },
-      {
-        "id": "proofread-document",
-        "label": "Studio: Proofread Document",
-        "shortcut": "Ctrl+Alt+G"
-      }
+      { "id": "compile-manuscript", "label": "Studio: Compile Manuscript", "shortcut": "Ctrl+Alt+E" },
+      { "id": "proofread-document", "label": "Studio: Proofread Document", "shortcut": "Ctrl+Alt+G" }
     ],
     "statusBar": { "indicators": ["sprint-timer", "word-goal"] }
   },
   "settings": [
     { "key": "dailyGoal", "type": "number", "default": 1000, "label": "Daily word goal" },
     { "key": "sprintDuration", "type": "number", "default": 25, "label": "Sprint duration (min)" },
-    {
-      "key": "autoSnapshotInterval",
-      "type": "number",
-      "default": 0,
-      "label": "Auto-snapshot interval (min, 0=off)"
-    },
+    { "key": "autoSnapshotInterval", "type": "number", "default": 0, "label": "Auto-snapshot interval (min, 0=off)" },
     { "key": "maxSnapshots", "type": "number", "default": 50, "label": "Max snapshots to keep" }
   ]
 }

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

@@ -29,8 +29,7 @@ function renderGoalsPanel(container, { engines, settings }) {
   const row = document.createElement('div');
   row.className = 'ws-stat-row';
   const label = document.createElement('span');
-  label.textContent =
-    progress.written.toLocaleString() + ' / ' + dailyGoal.toLocaleString() + ' words';
+  label.textContent = progress.written.toLocaleString() + ' / ' + dailyGoal.toLocaleString() + ' words';
   const pct = document.createElement('span');
   pct.className = 'ws-pct';
   pct.textContent = progress.pct + '%';
@@ -82,7 +81,7 @@ function renderGoalsPanel(container, { engines, settings }) {
 
   const chart = document.createElement('div');
   chart.className = 'ws-chart';
-  const maxWords = Math.max(...last30.map((d) => d.words), 1);
+  const maxWords = Math.max(...last30.map(d => d.words), 1);
   for (const day of last30) {
     const barEl = document.createElement('div');
     const height = Math.max(2, (day.words / maxWords) * 60);

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

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

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

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

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

@@ -45,11 +45,7 @@ function renderSnapshotsPanel(container, { engines, editor }) {
 
     const actions = document.createElement('div');
     actions.className = 'ws-snapshot-actions';
-    for (const [action, text, cls] of [
-      ['restore', 'Restore', ''],
-      ['diff', 'Diff', ''],
-      ['delete', 'Delete', 'ws-btn-danger'],
-    ]) {
+    for (const [action, text, cls] of [['restore', 'Restore', ''], ['diff', 'Diff', ''], ['delete', 'Delete', 'ws-btn-danger']]) {
       const actionBtn = document.createElement('button');
       actionBtn.className = 'ws-btn ws-btn-sm' + (cls ? ' ' + cls : '');
       actionBtn.textContent = text;

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

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

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

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

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

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

src/plugins/plugin-context.js

@@ -12,11 +12,10 @@ class PluginContext {
    * @param {object} deps.exportHooks - { preHooks: [], postHooks: [] }
    */
   constructor(deps) {
-    const { pluginId, sidebar, commands, statusBar, eventBus, settings, editor, ipc, exportHooks } =
-      deps;
+    const { pluginId, sidebar, commands, statusBar, eventBus, settings, editor, ipc, exportHooks } = deps;
 
     this.sidebar = {
-      registerPanel: (id, opts) => sidebar.registerPanel(`${pluginId}:${id}`, opts),
+      registerPanel: (id, opts) => sidebar.registerPanel(`${pluginId}:${id}`, opts)
     };
 
     this.commands = {
@@ -29,45 +28,41 @@ class PluginContext {
           }
         };
         commands.register(`${pluginId}:${id}`, label, safeHandler, shortcut);
-      },
+      }
     };
 
     this.statusBar = {
-      registerIndicator: (id, opts) => statusBar.registerIndicator(`${pluginId}:${id}`, opts),
+      registerIndicator: (id, opts) => statusBar.registerIndicator(`${pluginId}:${id}`, opts)
     };
 
     this.settings = {
       get: (key) => settings.get(`plugins.${pluginId}.${key}`),
       set: (key, value) => settings.set(`plugins.${pluginId}.${key}`, value),
-      onChanged: (key, cb) => settings.onChanged(`plugins.${pluginId}.${key}`, cb),
+      onChanged: (key, cb) => settings.onChanged(`plugins.${pluginId}.${key}`, cb)
     };
 
     this.editor = {
       getContent: () => editor.getContent(),
       getSelection: () => editor.getSelection(),
       insertAtCursor: (text) => editor.insertAtCursor(text),
-      onContentChanged: (cb) => editor.onContentChanged(cb),
+      onContentChanged: (cb) => editor.onContentChanged(cb)
     };
 
     this.events = {
       on: (event, handler) => eventBus.on(event, handler),
       off: (event, handler) => eventBus.off(event, handler),
       emit: (event, payload) => eventBus.emit(event, payload),
-      hasHandler: (event) => eventBus.hasHandler(event),
+      hasHandler: (event) => eventBus.hasHandler(event)
     };
 
     this.ipc = {
       invoke: (channel, ...args) => ipc.invoke(channel, ...args),
-      on: (channel, handler) => ipc.on(channel, handler),
+      on: (channel, handler) => ipc.on(channel, handler)
     };
 
     this.exports = {
-      registerPreHook: (handler) => {
-        if (exportHooks) exportHooks.preHooks.push(handler);
-      },
-      registerPostHook: (handler) => {
-        if (exportHooks) exportHooks.postHooks.push(handler);
-      },
+      registerPreHook: (handler) => { if (exportHooks) exportHooks.preHooks.push(handler); },
+      registerPostHook: (handler) => { if (exportHooks) exportHooks.postHooks.push(handler); }
     };
   }
 }

src/plugins/plugin-loader.js

@@ -35,10 +35,7 @@ class PluginLoader {
               const loaded = require(indexPath);
               PluginClass = loaded.Plugin || loaded.default || null;
             } catch (err) {
-              console.error(
-                `[PluginLoader] Failed to load index.js for "${manifest.id}":`,
-                err.message
-              );
+              console.error(`[PluginLoader] Failed to load index.js for "${manifest.id}":`, err.message);
               continue;
             }
           }
@@ -49,7 +46,7 @@ class PluginLoader {
             description: manifest.description,
             manifest,
             PluginClass,
-            dir: pluginDir,
+            dir: pluginDir
           });
           this.loadedIds.add(manifest.id);
         } catch (err) {

src/plugins/plugin-registry.js

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

src/plugins/settings-store.js

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

src/preload.js

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

src/print-preview.js

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

src/renderer/App.tsx

@@ -0,0 +1,7 @@
+import { AppShell } from './components/layout/AppShell';
+
+function App() {
+  return <AppShell />;
+}
+
+export default App;

src/renderer/components/editor/CodeMirrorEditor.tsx

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

src/renderer/components/editor/EditorPane.tsx

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

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

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

src/renderer/components/layout/AppHeader.tsx

@@ -0,0 +1,54 @@
+import { PanelLeft, PanelRight, Keyboard } 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>
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+}

src/renderer/components/layout/AppShell.tsx

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

src/renderer/components/layout/Breadcrumb.tsx

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

src/renderer/components/layout/StatusBar.tsx

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

src/renderer/components/layout/TabBar.tsx

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

src/renderer/components/layout/Toolbar.tsx

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

src/renderer/components/preview/MarkdownRenderer.tsx

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

src/renderer/components/preview/MermaidLazy.tsx

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

src/renderer/components/preview/PreviewPane.tsx

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

src/renderer/components/sidebar/FileTree.tsx

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

src/renderer/components/sidebar/Outline.tsx

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

src/renderer/components/sidebar/Sidebar.tsx

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

src/renderer/components/theme-provider.tsx

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

src/renderer/components/theme-toggle.tsx

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

src/renderer/components/ui/button.tsx

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

src/renderer/components/ui/collapsible.tsx

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

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

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

src/renderer/components/ui/resizable.tsx

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

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

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

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

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

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

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

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

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

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

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

src/renderer/hooks/use-shortcut.ts

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

src/renderer/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self';">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MarkdownConverter</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body class="font-sans antialiased">
+  <div id="root"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

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

@@ -0,0 +1,74 @@
+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 useRegisterMenuCommands(): void {
+  // Register handlers in the command store.
+  useEffect(() => {
+    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());
+  }, []);
+}
+
+/**
+ * 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');
+}

src/renderer/lib/ipc.ts

@@ -0,0 +1,110 @@
+import type {
+  IpcResult,
+  FileResult,
+  FileEntry,
+  PdfOptions,
+  DocxOptions,
+  HtmlOptions,
+  ExportResult,
+  BatchItem,
+  BatchOptions,
+  BatchResult,
+} from '@/types/ipc';
+
+type ChannelMissing = { code: 'CHANNEL_MISSING'; message: string };
+
+function wrap<T>(fn: () => Promise<T>): Promise<IpcResult<T | ChannelMissing>> {
+  if (typeof window === 'undefined' || !window.electronAPI) {
+    return Promise.resolve({
+      ok: false,
+      error: { code: 'NO_BRIDGE', message: 'window.electronAPI is unavailable' },
+    });
+  }
+  return fn().then(
+    (data) => ({ ok: true as const, data }),
+    (err: Error) => ({
+      ok: false as const,
+      error: { code: err.name || 'IPC_ERROR', message: err.message || String(err) },
+    }),
+  );
+}
+
+function safeCall<T extends (...args: any[]) => Promise<any>>(
+  channel: string,
+  method: string,
+  ...args: Parameters<T>
+): Promise<IpcResult<Awaited<ReturnType<T>> | ChannelMissing>> {
+  if (typeof window === 'undefined' || !window.electronAPI) {
+    return Promise.resolve({
+      ok: false,
+      error: { code: 'NO_BRIDGE', message: 'window.electronAPI is unavailable' },
+    });
+  }
+  const target = (window.electronAPI as any)[channel]?.[method];
+  if (!target) {
+    return Promise.resolve({
+      ok: false,
+      error: { code: 'CHANNEL_MISSING', message: `Missing channel: ${channel}.${method}` },
+    });
+  }
+  if (typeof target !== 'function') {
+    return Promise.resolve({
+      ok: false,
+      error: { code: 'CHANNEL_MISSING', message: `Not a function: ${channel}.${method}` },
+    });
+  }
+  return wrap(() => target(...args));
+}
+
+export const ipc = {
+  file: {
+    open: (): Promise<IpcResult<FileResult | ChannelMissing>> =>
+      safeCall('file', 'open'),
+    read: (path: string): Promise<IpcResult<string | ChannelMissing>> =>
+      safeCall('file', 'read', path),
+    write: (path: string, content: string): Promise<IpcResult<void | ChannelMissing>> =>
+      safeCall('file', 'write', path, content),
+    list: (dir: string): Promise<IpcResult<FileEntry[] | ChannelMissing>> =>
+      safeCall('file', 'list', dir),
+    pickFolder: (): Promise<IpcResult<string | null | ChannelMissing>> =>
+      safeCall('file', 'pickFolder'),
+    pickFile: (): Promise<IpcResult<string | null | ChannelMissing>> =>
+      safeCall('file', 'pickFile'),
+    onChange: (cb: (path: string) => void): (() => void) => {
+      if (typeof window === 'undefined' || !window.electronAPI?.file?.onChange) {
+        return () => {};
+      }
+      return window.electronAPI.file.onChange(cb);
+    },
+  },
+  export: {
+    pdf: (opts: PdfOptions): Promise<IpcResult<ExportResult | ChannelMissing>> =>
+      safeCall('export', 'pdf', opts),
+    docx: (opts: DocxOptions): Promise<IpcResult<ExportResult | ChannelMissing>> =>
+      safeCall('export', 'docx', opts),
+    html: (opts: HtmlOptions): Promise<IpcResult<ExportResult | ChannelMissing>> =>
+      safeCall('export', 'html', opts),
+    batch: (items: BatchItem[], opts: BatchOptions): Promise<IpcResult<BatchResult | ChannelMissing>> =>
+      safeCall('export', 'batch', items, opts),
+  },
+  app: {
+    getVersion: (): Promise<IpcResult<string | ChannelMissing>> =>
+      safeCall('app', 'getVersion'),
+    openExternal: (url: string): Promise<IpcResult<void | ChannelMissing>> =>
+      safeCall('app', 'openExternal', url),
+    showItemInFolder: (path: string): Promise<IpcResult<void | ChannelMissing>> =>
+      safeCall('app', 'showItemInFolder', path),
+  },
+  menu: {
+    /**
+     * Subscribe to a native-menu IPC channel. The callback receives the
+     * raw payload(s) from the main process. Returns an unsubscribe fn.
+     */
+    on: (channel: string, callback: (...args: unknown[]) => void): (() => void) => {
+      if (typeof window === 'undefined' || !window.electronAPI?.on) {
+        return () => {};
+      }
+      return window.electronAPI.on(channel, callback as (...a: any[]) => void);
+    },
+  },
+};

src/renderer/lib/markdown.ts

@@ -0,0 +1,29 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+marked.setOptions({
+  gfm: true,
+  breaks: false,
+});
+
+const MERMAID_RE = /```mermaid\n([\s\S]*?)```/g;
+
+export function renderMarkdown(source: string): string {
+  // Mark mermaid blocks with a placeholder we can replace client-side.
+  const placeholders: string[] = [];
+  const withPlaceholders = source.replace(MERMAID_RE, (_m, code) => {
+    const idx = placeholders.length;
+    placeholders.push(code.trim());
+    return `<div class="mermaid-block" data-mermaid-source="${idx}"></div>`;
+  });
+
+  const rawHtml = marked.parse(withPlaceholders, { async: false }) as string;
+  const clean = DOMPurify.sanitize(rawHtml, {
+    ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'data-mermaid-source', 'data-language', 'id'],
+  });
+
+  // The sanitized HTML still has placeholders; we leave the actual mermaid
+  // rendering to the React layer (MermaidLazy component) so the heavy
+  // mermaid library only loads when needed.
+  return clean;
+}

src/renderer/lib/motion.ts

@@ -0,0 +1,41 @@
+import type { Transition, Variants } from 'motion/react';
+
+export const fadeIn: Transition = {
+  duration: 0.2,
+  ease: 'easeOut',
+};
+
+export const slideInRight: Variants = {
+  x: '100%',
+  initial: { x: '100%', opacity: 0 },
+  animate: { x: 0, opacity: 1, transition: { duration: 0.3, ease: [0.16, 1, 0.3, 1] } },
+  exit: { x: '100%', opacity: 0, transition: { duration: 0.2, ease: 'easeIn' } },
+};
+
+export const modalPop: Variants = {
+  scale: 0.96,
+  opacity: 0,
+  initial: { scale: 0.96, opacity: 0 },
+  animate: { scale: 1, opacity: 1, transition: { duration: 0.2, ease: 'easeOut' } },
+  exit: { scale: 0.96, opacity: 0, transition: { duration: 0.15, ease: 'easeIn' } },
+};
+
+export const toastSpring: Transition = {
+  type: 'spring',
+  stiffness: 300,
+  damping: 30,
+};
+
+export const sidebarToggle: Transition = {
+  duration: 0.25,
+  ease: 'easeInOut',
+  width: {
+    duration: 0.25,
+    ease: 'easeInOut',
+  },
+};
+
+export const tabSwitch: Transition = {
+  duration: 0.2,
+  ease: 'easeOut',
+};

src/renderer/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

src/renderer/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { ThemeProvider } from './components/theme-provider';
+import './styles/globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider defaultTheme="dark" attribute="class" enableSystem>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>
+);

src/renderer/stores/app-store.ts

@@ -0,0 +1,35 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface PaneSizes {
+  sidebar: number;
+  editor: number;
+  preview: number;
+}
+
+interface AppState {
+  sidebarVisible: boolean;
+  previewVisible: boolean;
+  zenMode: boolean;
+  paneSizes: PaneSizes;
+  toggleSidebar: () => void;
+  togglePreview: () => void;
+  setZenMode: (value: boolean) => void;
+  setPaneSizes: (sizes: PaneSizes) => void;
+}
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set) => ({
+      sidebarVisible: true,
+      previewVisible: true,
+      zenMode: false,
+      paneSizes: { sidebar: 20, editor: 50, preview: 30 },
+      toggleSidebar: () => set((s) => ({ sidebarVisible: !s.sidebarVisible })),
+      togglePreview: () => set((s) => ({ previewVisible: !s.previewVisible })),
+      setZenMode: (value) => set({ zenMode: value }),
+      setPaneSizes: (sizes) => set({ paneSizes: sizes }),
+    }),
+    { name: 'mc-app-store' }
+  )
+);

src/renderer/stores/command-store.ts

@@ -0,0 +1,66 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type CommandId = string;
+
+export type CommandHandler = (args?: unknown) => void | Promise<void>;
+
+/**
+ * User-customizable key binding for a command.
+ * Format: same as useShortcut combo ('mod+s', 'mod+shift+s', etc.)
+ * Undefined means "use the default binding" (if any).
+ */
+export type UserBindings = Record<string, string>;
+
+interface CommandState {
+  handlers: Record<string, CommandHandler>;
+  userBindings: UserBindings;
+  register: (id: CommandId, handler: CommandHandler) => void;
+  registerMany: (handlers: Record<string, CommandHandler>) => void;
+  unregister: (id: CommandId) => void;
+  dispatch: (id: CommandId, args?: unknown) => void;
+  get: (id: CommandId) => CommandHandler | undefined;
+  setUserBinding: (id: CommandId, combo: string) => void;
+  clearUserBinding: (id: CommandId) => void;
+  getUserBinding: (id: CommandId) => string | undefined;
+}
+
+export const useCommandStore = create<CommandState>()(
+  persist(
+    (set, get) => ({
+      handlers: {},
+      userBindings: {},
+      register: (id, handler) =>
+        set((s) => ({ handlers: { ...s.handlers, [id]: handler } })),
+      registerMany: (handlers) =>
+        set((s) => ({ handlers: { ...s.handlers, ...handlers } })),
+      unregister: (id) =>
+        set((s) => {
+          const next = { ...s.handlers };
+          delete next[id];
+          return { handlers: next };
+        }),
+      dispatch: (id, args) => {
+        const handler = get().handlers[id];
+        if (handler) {
+          void handler(args);
+        }
+      },
+      get: (id) => get().handlers[id],
+      setUserBinding: (id, combo) =>
+        set((s) => ({ userBindings: { ...s.userBindings, [id]: combo } })),
+      clearUserBinding: (id) =>
+        set((s) => {
+          const next = { ...s.userBindings };
+          delete next[id];
+          return { userBindings: next };
+        }),
+      getUserBinding: (id) => get().userBindings[id],
+    }),
+    {
+      name: 'mc-command-store',
+      // Only persist user-customizable bindings; handlers are runtime-only.
+      partialize: (state) => ({ userBindings: state.userBindings }),
+    }
+  )
+);

src/renderer/stores/editor-store.ts

@@ -0,0 +1,63 @@
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import { enableMapSet } from 'immer';
+
+enableMapSet();
+
+export interface Buffer {
+  id: string;
+  path: string;
+  content: string;
+  dirty: boolean;
+  cursor?: { line: number; column: number };
+}
+
+interface EditorState {
+  buffers: Map<string, Buffer>;
+  activeId: string | null;
+  openBuffer: (id: string, path: string, content: string) => void;
+  updateContent: (id: string, content: string) => void;
+  markSaved: (id: string) => void;
+  setCursor: (id: string, line: number, column: number) => void;
+  closeBuffer: (id: string) => void;
+  setActive: (id: string) => void;
+}
+
+export const useEditorStore = create<EditorState>()(
+  immer((set) => ({
+    buffers: new Map(),
+    activeId: null,
+    openBuffer: (id, path, content) =>
+      set((s) => {
+        s.buffers.set(id, { id, path, content, dirty: false });
+        s.activeId = id;
+      }),
+    updateContent: (id, content) =>
+      set((s) => {
+        const buf = s.buffers.get(id);
+        if (buf) {
+          buf.content = content;
+          buf.dirty = true;
+        }
+      }),
+    markSaved: (id) =>
+      set((s) => {
+        const buf = s.buffers.get(id);
+        if (buf) buf.dirty = false;
+      }),
+    setCursor: (id, line, column) =>
+      set((s) => {
+        const buf = s.buffers.get(id);
+        if (buf) buf.cursor = { line, column };
+      }),
+    closeBuffer: (id) =>
+      set((s) => {
+        s.buffers.delete(id);
+        if (s.activeId === id) s.activeId = null;
+      }),
+    setActive: (id) =>
+      set((s) => {
+        s.activeId = id;
+      }),
+  }))
+);

src/renderer/stores/file-store.ts

@@ -0,0 +1,235 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { enableMapSet } from 'immer';
+import { ipc } from '@/lib/ipc';
+import { useEditorStore } from '@/stores/editor-store';
+import type { FileEntry } from '@/types/ipc';
+
+enableMapSet();
+
+export interface FileNode {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  children: FileNode[] | null;
+  expanded?: boolean;
+  loaded?: boolean;
+}
+
+export interface OpenTab {
+  id: string;
+  path: string;
+  title: string;
+  dirty: boolean;
+}
+
+interface FileState {
+  tree: FileNode | null;
+  rootPath: string | null;
+  expanded: Set<string>;
+  openTabs: OpenTab[];
+  activeTabId: string | null;
+
+  openFolder: (path: string) => Promise<void>;
+  loadChildren: (dirPath: string) => Promise<void>;
+  toggleExpanded: (dirPath: string) => void;
+  openFile: (filePath: string) => Promise<void>;
+  closeTab: (id: string) => void;
+  setActiveTab: (id: string) => void;
+  markTabClean: (id: string) => void;
+  markTabDirty: (id: string) => void;
+  reorderTabs: (fromIndex: number, toIndex: number) => void;
+  openFolderDialog: () => Promise<void>;
+  openFileDialog: () => Promise<void>;
+  saveActiveBuffer: () => Promise<boolean>;
+}
+
+function entryToNode(entry: FileEntry): FileNode {
+  return {
+    name: entry.name,
+    path: entry.path,
+    isDirectory: entry.isDirectory,
+    children: null, // lazy: start unloaded; loadChildren populates this
+  };
+}
+
+// Recursively find and update a directory node by path using immer's produce
+function updateNode(tree: FileNode, dirPath: string, updater: (node: FileNode) => void): boolean {
+  if (tree.path === dirPath && tree.isDirectory) {
+    updater(tree);
+    return true;
+  }
+  if (tree.children) {
+    for (const child of tree.children) {
+      if (updateNode(child, dirPath, updater)) return true;
+    }
+  }
+  return false;
+}
+
+export const useFileStore = create<FileState>()(
+  persist(
+    immer((set) => ({
+    tree: null,
+    rootPath: null,
+    expanded: new Set<string>(),
+    openTabs: [],
+    activeTabId: null,
+
+    openFolder: async (path) => {
+      const result = await ipc.file.list(path);
+      if (!result.ok) return;
+
+      const children: FileNode[] = result.data!.map(entryToNode);
+
+      set((s) => {
+        s.tree = {
+          name: path.split('/').filter(Boolean).pop() ?? path,
+          path,
+          isDirectory: true,
+          children,
+          loaded: true,
+        };
+        s.rootPath = path;
+      });
+    },
+
+    loadChildren: async (dirPath) => {
+      // Find the node first
+      const tree = useFileStore.getState().tree;
+      if (!tree) return;
+
+      let found = false;
+      updateNode(tree, dirPath, (node) => {
+        if (node.loaded === true) return;
+        found = true;
+      });
+      if (!found) return;
+
+      const result = await ipc.file.list(dirPath);
+      if (!result.ok) return;
+
+      set((s) => {
+        updateNode(s.tree!, dirPath, (node) => {
+          node.children = result.data!.map(entryToNode);
+          node.loaded = true;
+        });
+      });
+    },
+
+    toggleExpanded: (dirPath) => {
+      set((s) => {
+        if (s.expanded.has(dirPath)) {
+          s.expanded.delete(dirPath);
+        } else {
+          s.expanded.add(dirPath);
+        }
+      });
+    },
+
+    openFile: async (filePath) => {
+      // If already open, sync dirty flag from editor buffer and activate
+      const existing = useFileStore.getState().openTabs.find((t) => t.id === filePath);
+      if (existing) {
+        const buffer = useEditorStore.getState().buffers.get(filePath);
+        set((s) => {
+          s.activeTabId = filePath;
+          if (buffer) {
+            const tab = s.openTabs.find((t) => t.id === filePath);
+            if (tab) tab.dirty = buffer.dirty;
+          }
+        });
+        return;
+      }
+
+      const result = await ipc.file.read(filePath);
+      if (!result.ok) return;
+
+      const content = result.data!;
+      const title = filePath.split('/').pop() ?? filePath;
+
+      // Open in editor store
+      useEditorStore.getState().openBuffer(filePath, filePath, content);
+
+      set((s) => {
+        s.openTabs.push({ id: filePath, path: filePath, title, dirty: false });
+        s.activeTabId = filePath;
+      });
+    },
+
+    closeTab: (id) => {
+      set((s) => {
+        const idx = s.openTabs.findIndex((t) => t.id === id);
+        if (idx === -1) return;
+        s.openTabs.splice(idx, 1);
+        if (s.activeTabId === id) {
+          s.activeTabId = idx > 0 ? s.openTabs[idx - 1]?.id ?? null : null;
+        }
+      });
+    },
+
+    setActiveTab: (id) => {
+      set((s) => {
+        s.activeTabId = id;
+      });
+    },
+
+    markTabClean: (id) => {
+      set((s) => {
+        const tab = s.openTabs.find((t) => t.id === id);
+        if (tab) tab.dirty = false;
+      });
+    },
+
+    markTabDirty: (id) => {
+      set((s) => {
+        const tab = s.openTabs.find((t) => t.id === id);
+        if (tab) tab.dirty = true;
+      });
+    },
+
+    reorderTabs: (fromIndex, toIndex) => {
+      set((s) => {
+        const tabs = s.openTabs;
+        const [moved] = tabs.splice(fromIndex, 1);
+        tabs.splice(toIndex, 0, moved);
+      });
+    },
+
+    openFolderDialog: async () => {
+      const result = await ipc.file.pickFolder();
+      if (!result.ok || result.data === null) return;
+      await useFileStore.getState().openFolder(result.data);
+    },
+
+    openFileDialog: async () => {
+      const result = await ipc.file.pickFile();
+      if (!result.ok || result.data === null) return;
+      await useFileStore.getState().openFile(result.data);
+    },
+
+    saveActiveBuffer: async () => {
+      const { activeTabId } = useFileStore.getState();
+      if (!activeTabId) return false;
+
+      const buffer = useEditorStore.getState().buffers.get(activeTabId);
+      if (!buffer) return false;
+
+      const writeResult = await ipc.file.write(activeTabId, buffer.content);
+      if (!writeResult.ok) return false;
+
+      useEditorStore.getState().markSaved(activeTabId);
+      useFileStore.getState().markTabClean(activeTabId);
+      return true;
+    },
+  })),
+    {
+      name: 'mc-file-store',
+      storage: createJSONStorage(() => localStorage),
+      // Only persist the folder path; tree, expanded Set, and openTabs are
+      // rebuilt on demand. The app re-opens the folder on startup.
+      partialize: (state) => ({ rootPath: state.rootPath }),
+    }
+  )
+);

src/renderer/stores/preview-store.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+
+interface PreviewState {
+  source: string;
+  scrollRatio: number;
+  setSource: (s: string) => void;
+  setScrollRatio: (r: number) => void;
+}
+
+const DEBOUNCE_MS = 300;
+let timer: ReturnType<typeof setTimeout> | null = null;
+let pending: string = '';
+
+export const usePreviewStore = create<PreviewState>((set) => ({
+  source: '',
+  scrollRatio: 0,
+  setSource: (s) => {
+    pending = s;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      set({ source: pending });
+    }, DEBOUNCE_MS);
+  },
+  setScrollRatio: (r) => set({ scrollRatio: r }),
+}));

src/renderer/styles/globals.css

@@ -0,0 +1,98 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+    --primary: 11 79% 51%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 90%;
+    --input: 0 0% 90%;
+    --ring: 11 79% 51%;
+    --radius: 0.5rem;
+    --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);
+  }
+
+  .dark {
+    --background: 30 14% 4%;
+    --foreground: 0 0% 98%;
+    --card: 30 14% 6%;
+    --card-foreground: 0 0% 98%;
+    --popover: 30 14% 6%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 11 79% 51%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 30 6% 15%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 30 6% 15%;
+    --muted-foreground: 0 0% 63%;
+    --accent: 30 6% 15%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62% 30%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 30 6% 15%;
+    --input: 30 6% 15%;
+    --ring: 11 79% 51%;
+    --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);
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* CodeMirror integration */
+.cm-editor {
+  @apply h-full;
+}
+.cm-editor .cm-scroller {
+  @apply font-mono text-sm;
+}

src/renderer/test/setup.ts

@@ -0,0 +1,35 @@
+import '@testing-library/jest-dom/vitest';
+
+// Mock window.electronAPI for tests
+declare global {
+  interface Window {
+    electronAPI: any;
+  }
+}
+
+if (typeof window !== 'undefined' && !window.electronAPI) {
+  window.electronAPI = {};
+}
+
+// Mock matchMedia for next-themes (jsdom doesn't have it)
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => true,
+    }),
+  });
+}
+
+// Mock react-resizable-panels for jsdom environment
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'innerWidth', { writable: true, value: 1920 });
+  Object.defineProperty(window, 'innerHeight', { writable: true, value: 1080 });
+}

src/renderer/types/electron.d.ts

@@ -0,0 +1,90 @@
+export interface ElectronAPI {
+  // App info
+  getAppVersion: () => Promise<string>;
+
+  // File operations
+  openFile: () => Promise<{ canceled: boolean; filePaths: string[] }>;
+  saveFile: (data: { path: string; content: string }) => Promise<void>;
+  readFile: (path: string) => Promise<string>;
+  setCurrentFile: (path: string | null) => void;
+
+  // Export
+  exportDocument: (format: string, options?: Record<string, any>) => Promise<void>;
+
+  // Theme
+  getTheme: () => void;
+  onThemeChanged: (callback: (theme: string) => void) => () => void;
+
+  // File events
+  onFileOpened: (callback: (data: { path: string; content: string }) => void) => () => void;
+  onFileNew: (callback: () => void) => () => void;
+  onFileSave: (callback: () => void) => () => void;
+
+  // Conversion status
+  onConversionStatus: (callback: (message: string) => void) => () => void;
+  onConversionComplete: (callback: (data: { format: string; outputPath: string }) => void) => () => void;
+
+  // Dialogs
+  showExportDialog: (format: string) => void;
+  showBatchDialog: () => void;
+  showUniversalConverterDialog: () => void;
+  showTableGenerator: () => void;
+  showPdfEditorDialog: () => void;
+  showHeaderFooterDialog: () => void;
+  showFieldPickerDialog: () => void;
+
+  // Settings
+  getSettings: (key: string) => Promise<any>;
+  setSettings: (key: string, value: any) => Promise<void>;
+
+  // Plugin settings
+  getPluginSetting: (key: string) => Promise<any>;
+  setPluginSetting: (key: string, value: any) => Promise<void>;
+
+  // Sidebar
+  toggleSidebar: () => void;
+  toggleBottomPanel: () => void;
+
+  // Print
+  doPrint: (options?: any) => void;
+
+  // PDF
+  openPdfViewer: (filePath: string) => void;
+  processPdfOperation: (data: any) => void;
+
+  // Images
+  selectFolder: () => Promise<string | null>;
+  savePastedImage: (data: { base64: string; ext: string }) => Promise<{ relativePath: string } | null>;
+
+  // Templates
+  loadTemplate: (file: string) => Promise<string>;
+  getSnippets: () => Promise<any[]>;
+  saveSnippet: (snippet: any) => Promise<void>;
+  deleteSnippet: (id: string) => Promise<void>;
+
+  // Git
+  gitStatus: () => Promise<any>;
+  gitDiff: (file: string) => Promise<any>;
+  gitStage: (files: string[]) => Promise<void>;
+  gitCommit: (message: string) => Promise<void>;
+  gitLog: () => Promise<any[]>;
+
+  // Directory
+  listDirectory: (dir: string) => Promise<any[] | null>;
+  openFilePath: (path: string) => void;
+
+  // Custom CSS
+  selectCustomCSS: () => Promise<string | null>;
+  loadCustomCSS: () => void;
+  clearCustomCSS: () => void;
+
+  // Generic invoke/on
+  invoke: (channel: string, data?: any) => Promise<any>;
+  on: (channel: string, callback: (...args: any[]) => void) => () => void;
+}
+
+declare global {
+  interface Window {
+    electronAPI: ElectronAPI;
+  }
+}

src/renderer/types/ipc.ts

@@ -0,0 +1,62 @@
+export type IpcResult<T> =
+  | { ok: true; data: T }
+  | { ok: false; error: { code: string; message: string } };
+
+export interface FileEntry {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  size?: number;
+  modifiedAt?: string;
+}
+
+export interface FileResult {
+  path: string;
+  content: string;
+}
+
+export interface PdfOptions {
+  inputPath: string;
+  outputPath: string;
+  format?: 'letter' | 'a4' | 'legal';
+  margins?: { top: number; right: number; bottom: number; left: number };
+  toc?: boolean;
+  embedFonts?: boolean;
+}
+
+export interface DocxOptions {
+  inputPath: string;
+  outputPath: string;
+  template?: string;
+  referenceDoc?: string;
+}
+
+export interface HtmlOptions {
+  inputPath: string;
+  outputPath: string;
+  standalone?: boolean;
+  highlightStyle?: string;
+}
+
+export interface ExportResult {
+  outputPath: string;
+  bytes: number;
+  durationMs: number;
+}
+
+export interface BatchItem {
+  inputPath: string;
+  outputPath: string;
+}
+
+export interface BatchOptions {
+  format: 'pdf' | 'docx' | 'html' | 'png';
+  concurrency?: number;
+}
+
+export interface BatchResult {
+  total: number;
+  succeeded: number;
+  failed: number;
+  results: Array<{ item: BatchItem; ok: boolean; error?: string }>;
+}

src/sidebar/explorer-panel.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 function renderExplorerPanel(container, { listDirectory, onFileOpen, currentDir }) {
     container.innerHTML = `
         <div class="explorer-panel">
@@ -13,33 +15,19 @@ function renderExplorerPanel(container, { listDirectory, onFileOpen, currentDir
         const dir = await listDirectory(null); // null means open folder dialog
         if (dir) {
             document.getElementById('explorer-path').value = dir.path;
-      renderTree(
-        document.getElementById('explorer-tree'),
-        dir.entries,
-        listDirectory,
-        onFileOpen,
-        dir.path
-      );
+            renderTree(document.getElementById('explorer-tree'), dir.entries, listDirectory, onFileOpen, dir.path);
         }
     });
 
     if (currentDir) {
-    listDirectory(currentDir).then((dir) => {
-      if (dir)
-        renderTree(
-          document.getElementById('explorer-tree'),
-          dir.entries,
-          listDirectory,
-          onFileOpen,
-          currentDir
-        );
+        listDirectory(currentDir).then(dir => {
+            if (dir) renderTree(document.getElementById('explorer-tree'), dir.entries, listDirectory, onFileOpen, currentDir);
         });
     }
 }
 
-function renderTree(container, entries, listDirectory, onFileOpen, _basePath) {
-  container.innerHTML = entries
-    .map((entry) => {
+function renderTree(container, entries, listDirectory, onFileOpen, basePath) {
+    container.innerHTML = entries.map(entry => {
         if (entry.isDirectory) {
             return `<div class="tree-item tree-folder collapsed" data-path="${entry.path}">
                 <span class="tree-icon">&#x25B6;</span>
@@ -51,10 +39,9 @@ function renderTree(container, entries, listDirectory, onFileOpen, _basePath) {
             <span class="tree-icon">${getFileIcon(entry.name)}</span>
             <span class="tree-name">${entry.name}</span>
         </div>`;
-    })
-    .join('');
+    }).join('');
 
-  container.querySelectorAll('.tree-folder').forEach((el) => {
+    container.querySelectorAll('.tree-folder').forEach(el => {
         el.querySelector('.tree-name').addEventListener('click', async () => {
             const isCollapsed = el.classList.contains('collapsed');
             if (isCollapsed) {
@@ -65,29 +52,18 @@ function renderTree(container, entries, listDirectory, onFileOpen, _basePath) {
                 }
             }
             el.classList.toggle('collapsed');
-      el.querySelector('.tree-icon').textContent = el.classList.contains('collapsed')
-        ? '\u25B6'
-        : '\u25BC';
+            el.querySelector('.tree-icon').textContent = el.classList.contains('collapsed') ? '\u25B6' : '\u25BC';
         });
     });
 
-  container.querySelectorAll('.tree-file').forEach((el) => {
+    container.querySelectorAll('.tree-file').forEach(el => {
         el.addEventListener('click', () => onFileOpen(el.dataset.path));
     });
 }
 
 function getFileIcon(filename) {
     const ext = filename.split('.').pop().toLowerCase();
-  const icons = {
-    md: '\u{1F4DD}',
-    js: '\u{1F4DC}',
-    json: '{}',
-    html: '\u{1F310}',
-    css: '\u{1F3A8}',
-    py: '\u{1F40D}',
-    pdf: '\u{1F4D5}',
-    txt: '\u{1F4C4}',
-  };
+    const icons = { md: '\u{1F4DD}', js: '\u{1F4DC}', json: '{}', html: '\u{1F310}', css: '\u{1F3A8}', py: '\u{1F40D}', pdf: '\u{1F4D5}', txt: '\u{1F4C4}' };
     return icons[ext] || '\u{1F4C4}';
 }
 

src/sidebar/git-panel.js

@@ -1,4 +1,4 @@
-function renderGitPanel(container, { gitStatus, _gitDiff, gitStage, gitCommit, gitLog }) {
+function renderGitPanel(container, { gitStatus, gitDiff, gitStage, gitCommit, gitLog }) {
     container.innerHTML = `
         <div class="git-panel">
             <div class="git-section">
@@ -32,29 +32,25 @@ function renderGitPanel(container, { gitStatus, _gitDiff, gitStage, gitCommit, g
         }
 
         const files = [
-      ...status.modified.map((f) => ({ file: f, status: 'M', color: '#f59e0b' })),
-      ...status.not_added.map((f) => ({ file: f, status: '?', color: '#6b7280' })),
-      ...status.created.map((f) => ({ file: f, status: 'A', color: '#10b981' })),
-      ...status.deleted.map((f) => ({ file: f, status: 'D', color: '#ef4444' })),
-      ...status.staged.map((f) => ({ file: f, status: 'S', color: '#3b82f6' })),
+            ...status.modified.map(f => ({ file: f, status: 'M', color: '#f59e0b' })),
+            ...status.not_added.map(f => ({ file: f, status: '?', color: '#6b7280' })),
+            ...status.created.map(f => ({ file: f, status: 'A', color: '#10b981' })),
+            ...status.deleted.map(f => ({ file: f, status: 'D', color: '#ef4444' })),
+            ...status.staged.map(f => ({ file: f, status: 'S', color: '#3b82f6' })),
         ];
 
         if (files.length === 0) {
             changesEl.innerHTML = '<p class="git-info">No changes</p>';
         } else {
-      changesEl.innerHTML = files
-        .map(
-          (f) => `
+            changesEl.innerHTML = files.map(f => `
                 <div class="git-file" data-file="${f.file}">
                     <span class="git-file-status" style="color:${f.color}">${f.status}</span>
                     <span class="git-file-name">${f.file}</span>
                     <button class="git-stage-btn" data-file="${f.file}" title="Stage file">+</button>
                 </div>
-            `
-        )
-        .join('');
+            `).join('');
 
-      changesEl.querySelectorAll('.git-stage-btn').forEach((btn) => {
+            changesEl.querySelectorAll('.git-stage-btn').forEach(btn => {
                 btn.addEventListener('click', async (e) => {
                     e.stopPropagation();
                     await gitStage([btn.dataset.file]);
@@ -67,18 +63,12 @@ function renderGitPanel(container, { gitStatus, _gitDiff, gitStage, gitCommit, g
         const log = await gitLog();
         const logEl = document.getElementById('git-log');
         if (log && logEl) {
-      logEl.innerHTML =
-        (log.all || [])
-          .slice(0, 10)
-          .map(
-            (entry) => `
+            logEl.innerHTML = (log.all || []).slice(0, 10).map(entry => `
                 <div class="git-log-entry">
                     <div class="git-log-msg">${entry.message}</div>
                     <div class="git-log-meta">${entry.date?.substring(0, 10) || ''} &middot; ${entry.author_name || ''}</div>
                 </div>
-            `
-          )
-          .join('') || '<p class="git-info">No commits</p>';
+            `).join('') || '<p class="git-info">No commits</p>';
         }
     }
 

src/sidebar/outline-panel.js

@@ -26,7 +26,7 @@ function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHead
                 result.push({
                     level: match[1].length,
                     text: match[2].trim(),
-          line: i + 1,
+                    line: i + 1
                 });
             }
         }
@@ -64,21 +64,15 @@ function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHead
 
         const activeHeading = findActiveHeading(activeLine);
 
-    listEl.innerHTML =
-      headings
-        .map(
-          (h, idx) => `
+        listEl.innerHTML = headings.map((h, idx) => `
             <div class="outline-item outline-level-${h.level}${activeHeading && h.line === activeHeading.line ? ' active' : ''}"
                  data-line="${h.line}" data-index="${idx}">
                 <span class="outline-text">${escapeHtml(h.text)}</span>
                 <span class="outline-badge">H${h.level}</span>
             </div>
-        `
-        )
-        .join('') +
-      `<div class="outline-footer">${headings.length} heading${headings.length !== 1 ? 's' : ''}</div>`;
+        `).join('') + `<div class="outline-footer">${headings.length} heading${headings.length !== 1 ? 's' : ''}</div>`;
 
-    listEl.querySelectorAll('.outline-item').forEach((item) => {
+        listEl.querySelectorAll('.outline-item').forEach(item => {
             item.addEventListener('click', () => {
                 const line = parseInt(item.dataset.line, 10);
                 onHeadingClick(line);
@@ -101,7 +95,7 @@ function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHead
         activeLine = line;
         const activeHeading = findActiveHeading(line);
 
-    listEl.querySelectorAll('.outline-item').forEach((item) => {
+        listEl.querySelectorAll('.outline-item').forEach(item => {
             const itemLine = parseInt(item.dataset.line, 10);
             if (activeHeading && itemLine === activeHeading.line) {
                 item.classList.add('active');

src/sidebar/sidebar-manager.js

@@ -9,12 +9,10 @@ class SidebarManager {
     }
 
     setupEventListeners() {
-    document.querySelectorAll('.sidebar-icon').forEach((btn) => {
+        document.querySelectorAll('.sidebar-icon').forEach(btn => {
             btn.addEventListener('click', () => this.togglePanel(btn.dataset.panel));
         });
-    document
-      .querySelector('.sidebar-panel-close')
-      ?.addEventListener('click', () => this.collapse());
+        document.querySelector('.sidebar-panel-close')?.addEventListener('click', () => this.collapse());
     }
 
     registerPanel(name, { title, render }) {
@@ -37,7 +35,7 @@ class SidebarManager {
         this.panelContent.innerHTML = '';
         panel.render(this.panelContent);
         this.activePanel = name;
-    document.querySelectorAll('.sidebar-icon').forEach((btn) => {
+        document.querySelectorAll('.sidebar-icon').forEach(btn => {
             btn.classList.toggle('active', btn.dataset.panel === name);
         });
     }
@@ -45,7 +43,7 @@ class SidebarManager {
     collapse() {
         this.sidebar.classList.add('collapsed');
         this.activePanel = null;
-    document.querySelectorAll('.sidebar-icon').forEach((btn) => btn.classList.remove('active'));
+        document.querySelectorAll('.sidebar-icon').forEach(btn => btn.classList.remove('active'));
     }
 }
 

src/sidebar/snippets-panel.js

@@ -12,7 +12,7 @@ function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippe
     let snippets = [];
 
     async function loadSnippets() {
-    snippets = (await getSnippets()) || [];
+        snippets = await getSnippets() || [];
         renderList(document.getElementById('snippets-search')?.value || '');
     }
 
@@ -21,17 +21,10 @@ function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippe
         if (!list) return;
 
         const filtered = query
-      ? snippets.filter(
-          (s) =>
-            s.name.toLowerCase().includes(query.toLowerCase()) ||
-            (s.language || '').toLowerCase().includes(query.toLowerCase())
-        )
+            ? snippets.filter(s => s.name.toLowerCase().includes(query.toLowerCase()) || (s.language || '').toLowerCase().includes(query.toLowerCase()))
             : snippets;
 
-    list.innerHTML = filtered.length
-      ? filtered
-          .map(
-            (s) => `
+        list.innerHTML = filtered.length ? filtered.map(s => `
             <div class="snippet-item" data-id="${s.id}">
                 <div class="snippet-header">
                     <span class="snippet-name">${s.name}</span>
@@ -43,19 +36,16 @@ function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippe
                     <button class="snippet-delete" data-id="${s.id}" title="Delete">&times;</button>
                 </div>
             </div>
-        `
-          )
-          .join('')
-      : '<p class="git-info">No snippets yet. Click + to add one.</p>';
+        `).join('') : '<p class="git-info">No snippets yet. Click + to add one.</p>';
 
-    list.querySelectorAll('.snippet-insert').forEach((btn) => {
+        list.querySelectorAll('.snippet-insert').forEach(btn => {
             btn.addEventListener('click', () => {
-        const s = snippets.find((sn) => sn.id === btn.dataset.id);
+                const s = snippets.find(sn => sn.id === btn.dataset.id);
                 if (s) onInsert(s.code);
             });
         });
 
-    list.querySelectorAll('.snippet-delete').forEach((btn) => {
+        list.querySelectorAll('.snippet-delete').forEach(btn => {
             btn.addEventListener('click', async () => {
                 await deleteSnippet(btn.dataset.id);
                 loadSnippets();
@@ -63,9 +53,7 @@ function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippe
         });
     }
 
-  document
-    .getElementById('snippets-search')
-    ?.addEventListener('input', (e) => renderList(e.target.value));
+    document.getElementById('snippets-search')?.addEventListener('input', (e) => renderList(e.target.value));
 
     document.getElementById('snippets-add')?.addEventListener('click', () => {
         const name = prompt('Snippet name:');

src/sidebar/templates-panel.js

@@ -1,11 +1,10 @@
+const fs = require('fs');
+const path = require('path');
+
 const templates = [
     { name: 'Blog Post', file: 'blog-post.md', description: 'Article with frontmatter' },
     { name: 'Meeting Notes', file: 'meeting-notes.md', description: 'Agenda, notes, action items' },
-  {
-    name: 'Technical Spec',
-    file: 'technical-spec.md',
-    description: 'Requirements and architecture',
-  },
+    { name: 'Technical Spec', file: 'technical-spec.md', description: 'Requirements and architecture' },
     { name: 'Changelog', file: 'changelog.md', description: 'Keep a Changelog format' },
     { name: 'README', file: 'readme.md', description: 'Project documentation' },
     { name: 'Project Plan', file: 'project-plan.md', description: 'Goals, milestones, timeline' },
@@ -18,20 +17,16 @@ const templates = [
 function renderTemplatesPanel(container, onSelect) {
     container.innerHTML = `
         <div class="panel-list">
-            ${templates
-              .map(
-                (t) => `
+            ${templates.map(t => `
                 <div class="panel-list-item template-item" data-file="${t.file}">
                     <div class="panel-list-item-title">${t.name}</div>
                     <div class="panel-list-item-desc">${t.description}</div>
                 </div>
-            `
-              )
-              .join('')}
+            `).join('')}
         </div>
     `;
 
-  container.querySelectorAll('.template-item').forEach((el) => {
+    container.querySelectorAll('.template-item').forEach(el => {
         el.addEventListener('click', () => onSelect(el.dataset.file));
     });
 }

src/styles-concreteinfo.css

@@ -675,33 +675,18 @@ body.theme-concreteinfo-dark .modal-footer {
    Animations
    ============================================ */
 @keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 @keyframes slideUp {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
 }
 
 @keyframes pulse {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
 }
 
 .animate-fade-in {

src/styles-modern.css

@@ -60,15 +60,7 @@
 
 /* Base styles - Reset is in styles.css */
 body {
-  font-family:
-    'Inter',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   overflow: hidden;
   height: 100vh;
   /* Background controlled by themes - do not set here */
@@ -76,15 +68,9 @@ body {
 }
 
 @keyframes gradientShift {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
 }
 
 .container {
@@ -359,9 +345,7 @@ body {
 }
 
 /* Preview Styles - Modern Typography */
-.preview-content h1,
-.preview-content h2,
-.preview-content h3 {
+.preview-content h1, .preview-content h2, .preview-content h3 {
   /* Color controlled by theme */
   font-weight: 700;
   margin-top: 28px;
@@ -711,7 +695,11 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  background: linear-gradient(90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
   animation: shimmer 2s infinite;
 }
 
@@ -810,9 +798,7 @@ body {
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.4);
   transform: translate(-50%, -50%);
-  transition:
-    width 0.6s,
-    height 0.6s;
+  transition: width 0.6s, height 0.6s;
 }
 
 .toolbar button:hover::before,
@@ -1060,7 +1046,7 @@ body.theme-paper .pdf-viewer-toolbar,
 body.theme-rosepine-dawn .pdf-viewer-toolbar {
   background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%) !important;
   border-bottom: 1px solid #d0d0d0 !important;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 }
 
 body.theme-light .pdf-viewer-toolbar button,
@@ -1075,7 +1061,7 @@ body.theme-rosepine-dawn .pdf-viewer-toolbar button {
   background: #fff !important;
   border: 1px solid #ccc !important;
   color: #333 !important;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
 
 body.theme-light .pdf-viewer-toolbar button:hover,
@@ -1458,7 +1444,7 @@ body.theme-rosepine-dawn .pdf-viewer {
   .export-dialog,
   .batch-dialog,
   .editor-pane,
-  [id^='editor-pane-'],
+  [id^="editor-pane-"],
   .new-tab-button,
   .tab-close {
     display: none !important;
@@ -1466,9 +1452,9 @@ body.theme-rosepine-dawn .pdf-viewer {
 
   /* Show preview content */
   .preview-pane,
-  [id^='preview-pane-'],
+  [id^="preview-pane-"],
   .preview-content,
-  [id^='preview-'] {
+  [id^="preview-"] {
     display: block !important;
     width: 100% !important;
     padding: 20px !important;
@@ -1505,9 +1491,9 @@ body.theme-rosepine-dawn .pdf-viewer {
   body.printing-no-styles .tab-content,
   body.printing-no-styles .pane,
   body.printing-no-styles .preview-pane,
-  body.printing-no-styles [id^='preview-pane-'],
+  body.printing-no-styles [id^="preview-pane-"],
   body.printing-no-styles .preview-content,
-  body.printing-no-styles [id^='preview-'] {
+  body.printing-no-styles [id^="preview-"] {
     background: white !important;
     color: #000 !important;
   }
@@ -1553,27 +1539,27 @@ body.theme-rosepine-dawn .pdf-viewer {
 
 /* Common dark theme styles for preview content */
 body.theme-dark .preview-content,
-body.theme-dark [id^='preview-'],
+body.theme-dark [id^="preview-"],
 body.theme-one-dark .preview-content,
-body.theme-one-dark [id^='preview-'],
+body.theme-one-dark [id^="preview-"],
 body.theme-dracula .preview-content,
-body.theme-dracula [id^='preview-'],
+body.theme-dracula [id^="preview-"],
 body.theme-nord .preview-content,
-body.theme-nord [id^='preview-'],
+body.theme-nord [id^="preview-"],
 body.theme-tokyo-night .preview-content,
-body.theme-tokyo-night [id^='preview-'],
+body.theme-tokyo-night [id^="preview-"],
 body.theme-palenight .preview-content,
-body.theme-palenight [id^='preview-'],
+body.theme-palenight [id^="preview-"],
 body.theme-ayu-dark .preview-content,
-body.theme-ayu-dark [id^='preview-'],
+body.theme-ayu-dark [id^="preview-"],
 body.theme-ayu-mirage .preview-content,
-body.theme-ayu-mirage [id^='preview-'],
+body.theme-ayu-mirage [id^="preview-"],
 body.theme-oceanic-next .preview-content,
-body.theme-oceanic-next [id^='preview-'],
+body.theme-oceanic-next [id^="preview-"],
 body.theme-gruvbox-dark .preview-content,
-body.theme-gruvbox-dark [id^='preview-'],
+body.theme-gruvbox-dark [id^="preview-"],
 body.theme-cobalt2 .preview-content,
-body.theme-cobalt2 [id^='preview-'] {
+body.theme-cobalt2 [id^="preview-"] {
   color: #e6e6e6;
   background: transparent;
 }
@@ -2221,20 +2207,20 @@ body.theme-rosepine-dawn .batch-dialog-footer {
 }
 
 /* Dark theme command palette */
-body[class*='dark'] .command-palette {
+body[class*="dark"] .command-palette {
     background: #1e1e1e;
     border: 1px solid #333;
 }
-body[class*='dark'] .command-palette-input {
+body[class*="dark"] .command-palette-input {
     background: #1e1e1e;
     color: #eee;
     border-color: #333;
 }
-body[class*='dark'] .command-item:hover,
-body[class*='dark'] .command-item.selected {
+body[class*="dark"] .command-item:hover,
+body[class*="dark"] .command-item.selected {
     background: #2d2d2d;
 }
-body[class*='dark'] .command-shortcut {
+body[class*="dark"] .command-shortcut {
     background: #333;
     color: #888;
 }
@@ -2254,7 +2240,7 @@ body[class*='dark'] .command-shortcut {
     background: var(--gray-50, #f9fafb);
     font-family: 'JetBrains Mono', monospace;
 }
-body[class*='dark'] .breadcrumb-bar {
+body[class*="dark"] .breadcrumb-bar {
     background: #1a1a1a;
     color: #888;
     border-color: #333;
@@ -2292,7 +2278,7 @@ body[class*='dark'] .breadcrumb-bar {
     overflow: auto;
 }
 .print-preview-content iframe {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
     border-radius: 4px;
 }
 .print-option-group {
@@ -2306,7 +2292,7 @@ body[class*='dark'] .breadcrumb-bar {
     color: var(--gray-600, #4b5563);
 }
 .print-option-group select,
-.print-option-group input[type='text'] {
+.print-option-group input[type="text"] {
     padding: 8px 10px;
     border: 1px solid var(--gray-300, #d1d5db);
     border-radius: 8px;
@@ -2318,7 +2304,7 @@ body[class*='dark'] .breadcrumb-bar {
     align-items: center;
     gap: 8px;
 }
-.scale-control input[type='range'] {
+.scale-control input[type="range"] {
     flex: 1;
 }
 .checkbox-label {
@@ -2362,150 +2348,30 @@ body[class*='dark'] .breadcrumb-bar {
 }
 
 /* Writing Analytics Modal */
-.analytics-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10000;
-  animation: analyticsFadeIn 0.2s ease;
-}
-.analytics-modal {
-  background: var(--bg-primary, #fff);
-  border-radius: 12px;
-  width: 520px;
-  max-height: 80vh;
-  overflow-y: auto;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  animation: analyticsSlideUp 0.3s ease;
-}
-.analytics-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border-color, #e5e7eb);
-}
-.analytics-header h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-.analytics-close {
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: var(--text-muted);
-  padding: 4px 8px;
-  border-radius: 4px;
-}
-.analytics-close:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-.analytics-body {
-  padding: 16px 24px 24px;
-}
-.analytics-section {
-  margin-bottom: 20px;
-}
-.analytics-section h3 {
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted, #9ca3af);
-  margin: 0 0 10px;
-}
-.analytics-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  padding: 6px 0;
-  font-size: 14px;
-}
-.analytics-label {
-  color: var(--text-secondary, #6b7280);
-}
-.analytics-value {
-  font-weight: 500;
-  color: var(--text-primary);
-}
-.analytics-value small {
-  color: var(--text-muted);
-  font-weight: 400;
-  margin-left: 6px;
-}
-.readability-meter {
-  height: 4px;
-  background: var(--bg-tertiary, #f3f4f6);
-  border-radius: 2px;
-  margin-top: 8px;
-  overflow: hidden;
-}
-.readability-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
-  border-radius: 2px;
-  transition: width 0.5s ease;
-}
-.word-cloud {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
-}
-.word-tag {
-  background: var(--bg-tertiary, #f3f4f6);
-  padding: 4px 10px;
-  border-radius: 12px;
-  font-size: 13px;
-  color: var(--text-secondary);
-}
-.word-tag small {
-  opacity: 0.5;
-  font-size: 10px;
-  margin-left: 2px;
-}
-.analytics-longest {
-  flex-direction: column;
-  gap: 4px;
-}
-.analytics-sentence-preview {
-  font-style: italic;
-  font-size: 13px;
-  color: var(--text-secondary);
-  font-weight: 400;
-}
-@keyframes analyticsFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes analyticsSlideUp {
-  from {
-    transform: translateY(16px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-body[class*='dark'] .analytics-modal {
-  background: var(--gray-800, #1f2937);
-}
-body[class*='dark'] .word-tag {
-  background: var(--gray-700, #374151);
-}
+.analytics-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:10000; animation:analyticsFadeIn 0.2s ease; }
+.analytics-modal { background:var(--bg-primary,#fff); border-radius:12px; width:520px; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:analyticsSlideUp 0.3s ease; }
+.analytics-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--border-color,#e5e7eb); }
+.analytics-header h2 { margin:0; font-size:18px; font-weight:600; color:var(--text-primary); }
+.analytics-close { background:none; border:none; font-size:24px; cursor:pointer; color:var(--text-muted); padding:4px 8px; border-radius:4px; }
+.analytics-close:hover { background:var(--bg-tertiary); color:var(--text-primary); }
+.analytics-body { padding:16px 24px 24px; }
+.analytics-section { margin-bottom:20px; }
+.analytics-section h3 { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted,#9ca3af); margin:0 0 10px; }
+.analytics-row { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; font-size:14px; }
+.analytics-label { color:var(--text-secondary,#6b7280); }
+.analytics-value { font-weight:500; color:var(--text-primary); }
+.analytics-value small { color:var(--text-muted); font-weight:400; margin-left:6px; }
+.readability-meter { height:4px; background:var(--bg-tertiary,#f3f4f6); border-radius:2px; margin-top:8px; overflow:hidden; }
+.readability-fill { height:100%; background:linear-gradient(90deg,#ef4444,#f59e0b,#10b981); border-radius:2px; transition:width 0.5s ease; }
+.word-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
+.word-tag { background:var(--bg-tertiary,#f3f4f6); padding:4px 10px; border-radius:12px; font-size:13px; color:var(--text-secondary); }
+.word-tag small { opacity:0.5; font-size:10px; margin-left:2px; }
+.analytics-longest { flex-direction:column; gap:4px; }
+.analytics-sentence-preview { font-style:italic; font-size:13px; color:var(--text-secondary); font-weight:400; }
+@keyframes analyticsFadeIn { from{opacity:0} to{opacity:1} }
+@keyframes analyticsSlideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
+body[class*="dark"] .analytics-modal { background:var(--gray-800,#1f2937); }
+body[class*="dark"] .word-tag { background:var(--gray-700,#374151); }
 
 /* ========================================
    Interactive PDF Thumbnail Sidebar Styles
@@ -2583,7 +2449,7 @@ body[class*='dark'] .word-tag {
 }
 
 .pdf-thumbnail-card.marked-delete::after {
-  content: 'DELETE';
+  content: "DELETE";
   position: absolute;
   top: 50%;
   left: 50%;
@@ -2738,21 +2604,21 @@ body[class*='dark'] .word-tag {
 }
 
 /* Dark mode adjustments */
-body[class*='dark'] .pdf-thumbnail-card {
+body[class*="dark"] .pdf-thumbnail-card {
   background: var(--gray-800, #1f2937);
   border-color: var(--gray-700, #374151);
 }
-body[class*='dark'] .pdf-thumbnail-header .badge {
+body[class*="dark"] .pdf-thumbnail-header .badge {
   background: var(--gray-700, #374151);
   color: var(--gray-200);
 }
-body[class*='dark'] .canvas-container {
+body[class*="dark"] .canvas-container {
   background: var(--gray-900, #111827);
   border-color: var(--gray-700);
 }
-body[class*='dark'] .btn-rotate-thumbnail,
-body[class*='dark'] .btn-reorder-left,
-body[class*='dark'] .btn-reorder-right {
+body[class*="dark"] .btn-rotate-thumbnail,
+body[class*="dark"] .btn-reorder-left,
+body[class*="dark"] .btn-reorder-right {
   background: var(--gray-700, #374151);
   border-color: var(--gray-600);
   color: var(--gray-200);

src/styles-sidebar.css

@@ -115,28 +115,28 @@
 }
 
 /* Dark theme support */
-body[class*='dark'] .sidebar-icons,
-body[class*='dark'] .sidebar-panel {
+body[class*="dark"] .sidebar-icons,
+body[class*="dark"] .sidebar-panel {
     background: #1e1e1e;
     border-color: #333;
 }
 
-body[class*='dark'] .sidebar-icon {
+body[class*="dark"] .sidebar-icon {
     color: #888;
 }
 
-body[class*='dark'] .sidebar-icon:hover {
+body[class*="dark"] .sidebar-icon:hover {
     background: #333;
     color: #ccc;
 }
 
-body[class*='dark'] .sidebar-icon.active {
+body[class*="dark"] .sidebar-icon.active {
     background: #333;
     color: #8b9aff;
     box-shadow: inset 3px 0 0 #8b9aff;
 }
 
-body[class*='dark'] .sidebar-panel-header {
+body[class*="dark"] .sidebar-panel-header {
     border-color: #333;
     color: #ccc;
 }
@@ -162,13 +162,13 @@ body[class*='dark'] .sidebar-panel-header {
     margin-top: 2px;
 }
 
-body[class*='dark'] .panel-list-item:hover {
+body[class*="dark"] .panel-list-item:hover {
     background: #333;
 }
-body[class*='dark'] .panel-list-item-title {
+body[class*="dark"] .panel-list-item-title {
     color: #ddd;
 }
-body[class*='dark'] .panel-list-item-desc {
+body[class*="dark"] .panel-list-item-desc {
     color: #888;
 }
 
@@ -220,304 +220,85 @@ body[class*='dark'] .panel-list-item-desc {
 }
 
 /* Git Panel */
-.git-section {
-  margin-bottom: 16px;
-}
-.git-section-title {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--gray-500);
-  margin-bottom: 8px;
-}
-.git-file {
-  display: flex;
-  align-items: center;
-  padding: 4px 6px;
-  border-radius: 4px;
-  font-size: 13px;
-  gap: 6px;
-}
-.git-file:hover {
-  background: var(--gray-100, #f3f4f6);
-}
-.git-file-status {
-  font-weight: 700;
-  font-family: monospace;
-  width: 16px;
-  text-align: center;
-}
-.git-file-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.git-stage-btn {
-  border: none;
-  background: var(--gray-200);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  width: 22px;
-  height: 22px;
-}
-.git-commit-input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid var(--gray-300);
-  border-radius: 6px;
-  font-size: 13px;
-  font-family: inherit;
-  resize: vertical;
-  box-sizing: border-box;
-}
-.git-commit-btn {
-  width: 100%;
-  margin-top: 8px;
-  padding: 8px;
-  background: var(--primary-dark, #5661b3);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 13px;
-  cursor: pointer;
-}
-.git-commit-btn:hover {
-  opacity: 0.9;
-}
-.git-log-entry {
-  padding: 6px 0;
-  border-bottom: 1px solid var(--gray-100);
-}
-.git-log-msg {
-  font-size: 13px;
-}
-.git-log-meta {
-  font-size: 11px;
-  color: var(--gray-500);
-  margin-top: 2px;
-}
-.git-info {
-  font-size: 13px;
-  color: var(--gray-500);
-  padding: 8px 0;
-}
-.git-loading {
-  font-size: 13px;
-  color: var(--gray-400);
-}
+.git-section { margin-bottom: 16px; }
+.git-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin-bottom: 8px; }
+.git-file { display: flex; align-items: center; padding: 4px 6px; border-radius: 4px; font-size: 13px; gap: 6px; }
+.git-file:hover { background: var(--gray-100, #f3f4f6); }
+.git-file-status { font-weight: 700; font-family: monospace; width: 16px; text-align: center; }
+.git-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.git-stage-btn { border: none; background: var(--gray-200); border-radius: 4px; cursor: pointer; font-size: 14px; width: 22px; height: 22px; }
+.git-commit-input { width: 100%; padding: 8px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical; box-sizing: border-box; }
+.git-commit-btn { width: 100%; margin-top: 8px; padding: 8px; background: var(--primary-dark, #5661b3); color: white; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; }
+.git-commit-btn:hover { opacity: 0.9; }
+.git-log-entry { padding: 6px 0; border-bottom: 1px solid var(--gray-100); }
+.git-log-msg { font-size: 13px; }
+.git-log-meta { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
+.git-info { font-size: 13px; color: var(--gray-500); padding: 8px 0; }
+.git-loading { font-size: 13px; color: var(--gray-400); }
 
 /* Snippets Panel */
-.snippets-toolbar {
-  display: flex;
-  gap: 4px;
-  margin-bottom: 8px;
-}
-.snippets-search {
-  flex: 1;
-  padding: 6px 10px;
-  border: 1px solid var(--gray-300);
-  border-radius: 6px;
-  font-size: 13px;
-}
-.snippets-add-btn {
-  width: 32px;
-  border: 1px solid var(--gray-300);
-  border-radius: 6px;
-  background: white;
-  font-size: 18px;
-  cursor: pointer;
-}
-.snippet-item {
-  padding: 8px;
-  border: 1px solid var(--gray-200);
-  border-radius: 6px;
-  margin-bottom: 6px;
-}
-.snippet-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4px;
-}
-.snippet-name {
-  font-size: 13px;
-  font-weight: 500;
-}
-.snippet-lang {
-  font-size: 11px;
-  background: var(--gray-100);
-  padding: 2px 6px;
-  border-radius: 4px;
-  color: var(--gray-500);
-}
-.snippet-preview {
-  font-size: 12px;
-  background: var(--gray-50);
-  padding: 6px;
-  border-radius: 4px;
-  margin: 4px 0;
-  overflow: hidden;
-  max-height: 60px;
-}
-.snippet-preview code {
-  font-family: 'JetBrains Mono', monospace;
-}
-.snippet-actions {
-  display: flex;
-  gap: 4px;
-}
-.snippet-insert {
-  font-size: 12px;
-  padding: 4px 8px;
-  border: 1px solid var(--gray-300);
-  border-radius: 4px;
-  background: white;
-  cursor: pointer;
-}
-.snippet-delete {
-  font-size: 14px;
-  padding: 4px 8px;
-  border: 1px solid var(--gray-300);
-  border-radius: 4px;
-  background: white;
-  cursor: pointer;
-  color: #ef4444;
-}
+.snippets-toolbar { display: flex; gap: 4px; margin-bottom: 8px; }
+.snippets-search { flex: 1; padding: 6px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; }
+.snippets-add-btn { width: 32px; border: 1px solid var(--gray-300); border-radius: 6px; background: white; font-size: 18px; cursor: pointer; }
+.snippet-item { padding: 8px; border: 1px solid var(--gray-200); border-radius: 6px; margin-bottom: 6px; }
+.snippet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
+.snippet-name { font-size: 13px; font-weight: 500; }
+.snippet-lang { font-size: 11px; background: var(--gray-100); padding: 2px 6px; border-radius: 4px; color: var(--gray-500); }
+.snippet-preview { font-size: 12px; background: var(--gray-50); padding: 6px; border-radius: 4px; margin: 4px 0; overflow: hidden; max-height: 60px; }
+.snippet-preview code { font-family: 'JetBrains Mono', monospace; }
+.snippet-actions { display: flex; gap: 4px; }
+.snippet-insert { font-size: 12px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: white; cursor: pointer; }
+.snippet-delete { font-size: 14px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: white; cursor: pointer; color: #ef4444; }
 
 /* Dark theme for sidebar panels */
-body[class*='dark'] .explorer-path,
-body[class*='dark'] .explorer-browse-btn,
-body[class*='dark'] .snippets-search,
-body[class*='dark'] .snippets-add-btn,
-body[class*='dark'] .snippet-insert,
-body[class*='dark'] .snippet-delete {
+body[class*="dark"] .explorer-path,
+body[class*="dark"] .explorer-browse-btn,
+body[class*="dark"] .snippets-search,
+body[class*="dark"] .snippets-add-btn,
+body[class*="dark"] .snippet-insert,
+body[class*="dark"] .snippet-delete {
     background: #2d2d2d;
     border-color: #444;
     color: #ccc;
 }
-body[class*='dark'] .git-commit-input {
+body[class*="dark"] .git-commit-input {
     background: #2d2d2d;
     border-color: #444;
     color: #ccc;
 }
-body[class*='dark'] .snippet-item {
+body[class*="dark"] .snippet-item {
     border-color: #444;
 }
-body[class*='dark'] .snippet-preview {
+body[class*="dark"] .snippet-preview {
     background: #2d2d2d;
 }
-body[class*='dark'] .tree-item:hover,
-body[class*='dark'] .git-file:hover {
+body[class*="dark"] .tree-item:hover,
+body[class*="dark"] .git-file:hover {
     background: #333;
 }
 
 /* Outline Panel */
-.outline-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.outline-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-.outline-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 12px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--text-secondary, #6b7280);
-  transition:
-    background 0.15s,
-    color 0.15s;
-  border-left: 2px solid transparent;
-}
-.outline-item:hover {
-  background: var(--bg-tertiary, #f3f4f6);
-  color: var(--text-primary, #1f2937);
-}
-.outline-item.active {
-  color: var(--accent-blue, #3b82f6);
-  background: rgba(59, 130, 246, 0.08);
-  border-left-color: var(--accent-blue, #3b82f6);
-  font-weight: 600;
-}
-.outline-level-1 {
-  padding-left: 12px;
-}
-.outline-level-2 {
-  padding-left: 24px;
-}
-.outline-level-3 {
-  padding-left: 36px;
-}
-.outline-level-4 {
-  padding-left: 48px;
-}
-.outline-level-5 {
-  padding-left: 56px;
-}
-.outline-level-6 {
-  padding-left: 64px;
-}
-.outline-text {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.outline-badge {
-  font-size: 10px;
-  opacity: 0.5;
-  margin-left: 8px;
-  flex-shrink: 0;
-}
-.outline-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 16px;
-  color: var(--text-muted, #9ca3af);
-  text-align: center;
-}
-.outline-empty p {
-  margin: 4px 0;
-}
-.outline-hint {
-  font-family: monospace;
-  font-size: 12px;
-  opacity: 0.7;
-}
-.outline-footer {
-  padding: 8px 12px;
-  border-top: 1px solid var(--border-color, #e5e7eb);
-  font-size: 11px;
-  color: var(--text-muted, #9ca3af);
-}
+.outline-panel { display: flex; flex-direction: column; height: 100%; }
+.outline-list { flex: 1; overflow-y: auto; padding: 4px 0; }
+.outline-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; cursor: pointer; font-size: 13px; color: var(--text-secondary, #6b7280); transition: background 0.15s, color 0.15s; border-left: 2px solid transparent; }
+.outline-item:hover { background: var(--bg-tertiary, #f3f4f6); color: var(--text-primary, #1f2937); }
+.outline-item.active { color: var(--accent-blue, #3b82f6); background: rgba(59, 130, 246, 0.08); border-left-color: var(--accent-blue, #3b82f6); font-weight: 600; }
+.outline-level-1 { padding-left: 12px; }
+.outline-level-2 { padding-left: 24px; }
+.outline-level-3 { padding-left: 36px; }
+.outline-level-4 { padding-left: 48px; }
+.outline-level-5 { padding-left: 56px; }
+.outline-level-6 { padding-left: 64px; }
+.outline-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.outline-badge { font-size: 10px; opacity: 0.5; margin-left: 8px; flex-shrink: 0; }
+.outline-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; color: var(--text-muted, #9ca3af); text-align: center; }
+.outline-empty p { margin: 4px 0; }
+.outline-hint { font-family: monospace; font-size: 12px; opacity: 0.7; }
+.outline-footer { padding: 8px 12px; border-top: 1px solid var(--border-color, #e5e7eb); font-size: 11px; color: var(--text-muted, #9ca3af); }
 
 /* Outline dark mode */
-body[class*='dark'] .outline-item {
-  color: #9ca3af;
-}
-body[class*='dark'] .outline-item:hover {
-  background: #374151;
-  color: #e5e7eb;
-}
-body[class*='dark'] .outline-item.active {
-  color: #8b9aff;
-  background: rgba(139, 154, 255, 0.1);
-  border-left-color: #8b9aff;
-}
-body[class*='dark'] .outline-empty {
-  color: #6b7280;
-}
-body[class*='dark'] .outline-footer {
-  border-color: #333;
-  color: #6b7280;
-}
+body[class*="dark"] .outline-item { color: #9ca3af; }
+body[class*="dark"] .outline-item:hover { background: #374151; color: #e5e7eb; }
+body[class*="dark"] .outline-item.active { color: #8b9aff; background: rgba(139, 154, 255, 0.1); border-left-color: #8b9aff; }
+body[class*="dark"] .outline-empty { color: #6b7280; }
+body[class*="dark"] .outline-footer { border-color: #333; color: #6b7280; }

src/styles-welcome.css

@@ -1,121 +1,24 @@
-.welcome-container {
-  padding: 40px;
-  max-width: 900px;
-  margin: 0 auto;
-}
-.welcome-hero {
-  text-align: center;
-  margin-bottom: 40px;
-}
-.welcome-title {
-  font-size: 32px;
-  font-weight: 700;
-  color: var(--gray-800, #1f2937);
-}
-.welcome-version {
-  font-size: 14px;
-  color: var(--primary-dark, #5661b3);
-  margin-top: 4px;
-  font-weight: 500;
-}
-.welcome-subtitle {
-  font-size: 16px;
-  color: var(--gray-500, #6b7280);
-  margin-top: 8px;
-}
-.welcome-grid {
-  display: grid;
-  gap: 32px;
-}
-.welcome-section h2 {
-  font-size: 18px;
-  margin-bottom: 16px;
-  color: var(--gray-700, #374151);
-}
-.welcome-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
-}
-.welcome-card {
-  padding: 20px;
-  border: 1px solid var(--gray-200, #e5e7eb);
-  border-radius: 12px;
-  cursor: pointer;
-  text-align: center;
-  transition: all 0.2s;
-}
-.welcome-card:hover {
-  border-color: var(--primary-dark, #5661b3);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  transform: translateY(-2px);
-}
-.welcome-card-icon {
-  font-size: 28px;
-  margin-bottom: 8px;
-}
-.welcome-card h3 {
-  font-size: 15px;
-  margin-bottom: 4px;
-}
-.welcome-card p {
-  font-size: 13px;
-  color: var(--gray-500);
-}
-.welcome-card kbd {
-  display: inline-block;
-  margin-top: 8px;
-  padding: 2px 8px;
-  background: var(--gray-100);
-  border: 1px solid var(--gray-300);
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: 'JetBrains Mono', monospace;
-}
-.welcome-features {
-  list-style: none;
-  padding: 0;
-}
-.welcome-features li {
-  padding: 6px 0;
-  font-size: 14px;
-  border-bottom: 1px solid var(--gray-100, #f3f4f6);
-}
-.welcome-features strong {
-  color: var(--primary-dark, #5661b3);
-}
-.welcome-recent-item {
-  padding: 8px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  margin-bottom: 4px;
-}
-.welcome-recent-item:hover {
-  background: var(--gray-100);
-}
-.welcome-recent-name {
-  font-size: 14px;
-  font-weight: 500;
-  display: block;
-}
-.welcome-recent-path {
-  font-size: 12px;
-  color: var(--gray-500);
-  display: block;
-  margin-top: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.welcome-muted {
-  color: var(--gray-400);
-  font-size: 14px;
-}
-.welcome-footer {
-  margin-top: 32px;
-  text-align: center;
-}
-.welcome-checkbox {
-  font-size: 13px;
-  color: var(--gray-500);
-  cursor: pointer;
-}
+.welcome-container { padding: 40px; max-width: 900px; margin: 0 auto; }
+.welcome-hero { text-align: center; margin-bottom: 40px; }
+.welcome-title { font-size: 32px; font-weight: 700; color: var(--gray-800, #1f2937); }
+.welcome-version { font-size: 14px; color: var(--primary-dark, #5661b3); margin-top: 4px; font-weight: 500; }
+.welcome-subtitle { font-size: 16px; color: var(--gray-500, #6b7280); margin-top: 8px; }
+.welcome-grid { display: grid; gap: 32px; }
+.welcome-section h2 { font-size: 18px; margin-bottom: 16px; color: var(--gray-700, #374151); }
+.welcome-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
+.welcome-card { padding: 20px; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px; cursor: pointer; text-align: center; transition: all 0.2s; }
+.welcome-card:hover { border-color: var(--primary-dark, #5661b3); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
+.welcome-card-icon { font-size: 28px; margin-bottom: 8px; }
+.welcome-card h3 { font-size: 15px; margin-bottom: 4px; }
+.welcome-card p { font-size: 13px; color: var(--gray-500); }
+.welcome-card kbd { display: inline-block; margin-top: 8px; padding: 2px 8px; background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 4px; font-size: 12px; font-family: 'JetBrains Mono', monospace; }
+.welcome-features { list-style: none; padding: 0; }
+.welcome-features li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
+.welcome-features strong { color: var(--primary-dark, #5661b3); }
+.welcome-recent-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; }
+.welcome-recent-item:hover { background: var(--gray-100); }
+.welcome-recent-name { font-size: 14px; font-weight: 500; display: block; }
+.welcome-recent-path { font-size: 12px; color: var(--gray-500); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
+.welcome-muted { color: var(--gray-400); font-size: 14px; }
+.welcome-footer { margin-top: 32px; text-align: center; }
+.welcome-checkbox { font-size: 13px; color: var(--gray-500); cursor: pointer; }

src/styles-zen.css

@@ -97,6 +97,6 @@ body.zen-mode .editor-wrapper {
 }
 
 /* Dark mode — HUD stays dark in both themes */
-body[class*='dark'].zen-mode .zen-hud {
+body[class*="dark"].zen-mode .zen-hud {
     background: rgba(0, 0, 0, 0.7);
 }

src/styles/modal.css

@@ -31,8 +31,7 @@
     z-index: calc(var(--z-modal, 200) + 1);
     opacity: 0;
     visibility: hidden;
-  transition:
-    opacity var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
+    transition: opacity var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
                 visibility var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1));
     padding: var(--spacing-4, 1rem);
 }
@@ -104,8 +103,7 @@
     font-size: 24px;
     line-height: 1;
     cursor: pointer;
-  transition:
-    background-color var(--transition-fast, 150ms),
+    transition: background-color var(--transition-fast, 150ms),
                 color var(--transition-fast, 150ms);
 }
 
@@ -235,17 +233,15 @@
  * ============================================ */
 
 .dark .modal-content,
-[data-theme='dark'] .modal-content {
+[data-theme="dark"] .modal-content {
     background: hsl(var(--background));
-  box-shadow:
-    0 20px 25px -5px rgb(0 0 0 / 0.4),
-    0 8px 10px -6px rgb(0 0 0 / 0.3);
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
 }
 
 .dark .modal-header,
 .dark .modal-footer,
-[data-theme='dark'] .modal-header,
-[data-theme='dark'] .modal-footer {
+[data-theme="dark"] .modal-header,
+[data-theme="dark"] .modal-footer {
     background: hsl(var(--muted));
 }
 

src/styles/tokens.css

@@ -148,7 +148,7 @@
  * ============================================ */
 
 .dark,
-[data-theme='dark'] {
+[data-theme="dark"] {
   /* Background and foreground */
   --background: 222.2 84% 4.9%;
   --foreground: 210 40% 98%;
@@ -205,56 +205,24 @@
  * Semantic Color Classes
  * ============================================ */
 
-.bg-background {
-  background-color: hsl(var(--background));
-}
-.bg-foreground {
-  background-color: hsl(var(--foreground));
-}
-.bg-card {
-  background-color: hsl(var(--card));
-}
-.bg-primary {
-  background-color: hsl(var(--primary));
-}
-.bg-secondary {
-  background-color: hsl(var(--secondary));
-}
-.bg-muted {
-  background-color: hsl(var(--muted));
-}
-.bg-accent {
-  background-color: hsl(var(--accent));
-}
-.bg-destructive {
-  background-color: hsl(var(--destructive));
-}
+.bg-background { background-color: hsl(var(--background)); }
+.bg-foreground { background-color: hsl(var(--foreground)); }
+.bg-card { background-color: hsl(var(--card)); }
+.bg-primary { background-color: hsl(var(--primary)); }
+.bg-secondary { background-color: hsl(var(--secondary)); }
+.bg-muted { background-color: hsl(var(--muted)); }
+.bg-accent { background-color: hsl(var(--accent)); }
+.bg-destructive { background-color: hsl(var(--destructive)); }
 
-.text-foreground {
-  color: hsl(var(--foreground));
-}
-.text-primary {
-  color: hsl(var(--primary));
-}
-.text-secondary {
-  color: hsl(var(--secondary-foreground));
-}
-.text-muted-foreground {
-  color: hsl(var(--muted-foreground));
-}
-.text-destructive {
-  color: hsl(var(--destructive));
-}
+.text-foreground { color: hsl(var(--foreground)); }
+.text-primary { color: hsl(var(--primary)); }
+.text-secondary { color: hsl(var(--secondary-foreground)); }
+.text-muted-foreground { color: hsl(var(--muted-foreground)); }
+.text-destructive { color: hsl(var(--destructive)); }
 
-.border-border {
-  border-color: hsl(var(--border));
-}
-.border-primary {
-  border-color: hsl(var(--primary));
-}
-.border-input {
-  border-color: hsl(var(--input));
-}
+.border-border { border-color: hsl(var(--border)); }
+.border-primary { border-color: hsl(var(--primary)); }
+.border-input { border-color: hsl(var(--input)); }
 
 /* ============================================
  * Utility Classes

src/table-generator.html

@@ -1,13 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Table Generator - MarkdownConverter</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     <style>
         :root {
             --ci-dark-gray: #464646;
@@ -89,8 +86,7 @@
             color: var(--ci-medium-gray);
         }
 
-      .form-input,
-      .form-select {
+        .form-input, .form-select {
             padding: 8px 12px;
             border: 2px solid var(--ci-light-gray);
             border-radius: 6px;
@@ -100,8 +96,7 @@
             min-width: 100px;
         }
 
-      .form-input:focus,
-      .form-select:focus {
+        .form-input:focus, .form-select:focus {
             outline: none;
             border-color: var(--ci-accent);
         }
@@ -267,8 +262,8 @@
             color: var(--ci-white);
         }
     </style>
-  </head>
-  <body>
+</head>
+<body>
     <div class="header">
         <h1>Table Generator</h1>
     </div>
@@ -279,27 +274,11 @@
             <div class="controls-row">
                 <div class="control-group">
                     <span class="control-label">Rows</span>
-            <input
-              type="number"
-              id="rows"
-              class="form-input"
-              min="1"
-              max="50"
-              value="4"
-              style="width: 80px"
-            />
+                    <input type="number" id="rows" class="form-input" min="1" max="50" value="4" style="width: 80px;">
                 </div>
                 <div class="control-group">
                     <span class="control-label">Columns</span>
-            <input
-              type="number"
-              id="cols"
-              class="form-input"
-              min="1"
-              max="20"
-              value="4"
-              style="width: 80px"
-            />
+                    <input type="number" id="cols" class="form-input" min="1" max="20" value="4" style="width: 80px;">
                 </div>
                 <div class="control-group">
                     <span class="control-label">Alignment</span>
@@ -309,9 +288,9 @@
                         <option value="right">Right</option>
                     </select>
                 </div>
-          <div class="control-group" style="justify-content: flex-end">
+                <div class="control-group" style="justify-content: flex-end;">
                     <label class="checkbox-label">
-              <input type="checkbox" id="has-header" checked />
+                        <input type="checkbox" id="has-header" checked>
                         Include Header Row
                     </label>
                 </div>
@@ -381,7 +360,7 @@
             table.innerHTML = html;
 
             // Add event listeners for live preview
-        table.querySelectorAll('input').forEach((input) => {
+            table.querySelectorAll('input').forEach(input => {
                 input.addEventListener('input', updatePreview);
             });
 
@@ -446,7 +425,7 @@
             for (let i = startRow; i < data.length; i++) {
                 if (i === -1) {
                     // Generate empty header for tables without header
-            markdown += '| ' + colWidths.map((w) => ' '.repeat(w)).join(' | ') + ' |\n';
+                    markdown += '| ' + colWidths.map(w => ' '.repeat(w)).join(' | ') + ' |\n';
                 } else {
                     const row = data[i];
                     const cells = row.map((cell, j) => alignCell(cell, colWidths[j]));
@@ -455,7 +434,7 @@
 
                 // Add separator after first row
                 if ((hasHeader && i === 0) || (!hasHeader && i === -1)) {
-            const separators = colWidths.map((w) => getSeparator(w));
+                    const separators = colWidths.map(w => getSeparator(w));
                     markdown += '| ' + separators.join(' | ') + ' |\n';
                 }
             }
@@ -490,7 +469,7 @@
         });
 
         // Quick templates
-      document.querySelectorAll('.template-chip').forEach((chip) => {
+        document.querySelectorAll('.template-chip').forEach(chip => {
             chip.addEventListener('click', () => {
                 currentRows = parseInt(chip.dataset.rows);
                 currentCols = parseInt(chip.dataset.cols);
@@ -502,7 +481,7 @@
 
         // Clear all
         document.getElementById('btn-clear').addEventListener('click', () => {
-        document.querySelectorAll('#editable-table input').forEach((input) => {
+            document.querySelectorAll('#editable-table input').forEach(input => {
                 input.value = '';
             });
             updatePreview();
@@ -515,7 +494,7 @@
                 ['Task 1', 'First task description', 'In Progress', 'High', '2024-01-15'],
                 ['Task 2', 'Second task description', 'Completed', 'Medium', '2024-01-10'],
                 ['Task 3', 'Third task description', 'Pending', 'Low', '2024-01-20'],
-          ['Task 4', 'Fourth task description', 'In Review', 'High', '2024-01-18'],
+                ['Task 4', 'Fourth task description', 'In Review', 'High', '2024-01-18']
             ];
 
             for (let i = 0; i < currentRows; i++) {
@@ -562,5 +541,5 @@
         // Initialize
         generateEditableTable();
     </script>
-  </body>
+</body>
 </html>

src/templates/api-docs.md

@@ -23,7 +23,7 @@ GET /resources
 **Query Parameters:**
 
 | Parameter | Type | Required | Description |
-| --------- | ------- | -------- | ---------------------------- |
+|-----------|------|----------|-------------|
 | page | integer | No | Page number (default: 1) |
 | limit | integer | No | Items per page (default: 20) |
 
@@ -83,7 +83,7 @@ DELETE /resources/:id
 ## Error Codes
 
 | Code | Description |
-| ---- | --------------------- |
+|------|-------------|
 | 400 | Bad Request |
 | 401 | Unauthorized |
 | 404 | Not Found |

src/templates/blog-post.md

@@ -1,6 +1,6 @@
 ---
 title: Blog Post Title
-date: { { DATE } }
+date: {{DATE}}
 author: Your Name
 tags: []
 ---

src/templates/changelog.md

@@ -3,23 +3,18 @@
 ## [Unreleased]
 
 ### Added
-
 - New feature
 
 ### Changed
-
 - Updated feature
 
 ### Fixed
-
 - Bug fix
 
 ### Removed
-
 - Removed feature
 
 ## [1.0.0] - {{DATE}}
 
 ### Added
-
 - Initial release

src/templates/comparison.md

@@ -10,7 +10,7 @@ Brief description of what is being compared and why.
 ## Feature Comparison
 
 | Feature | Option A | Option B |
-| --------- | -------- | -------- |
+|---------|----------|----------|
 | Feature 1 | Yes | Yes |
 | Feature 2 | Yes | No |
 | Feature 3 | No | Yes |
@@ -19,7 +19,7 @@ Brief description of what is being compared and why.
 ## Pricing
 
 | Plan | Option A | Option B |
-| ---------- | -------- | -------- |
+|------|----------|----------|
 | Free | Limited | Limited |
 | Pro | $10/mo | $15/mo |
 | Enterprise | Custom | Custom |
@@ -29,31 +29,27 @@ Brief description of what is being compared and why.
 ### Option A
 
 **Pros:**
-
 - Pro 1
 - Pro 2
 
 **Cons:**
-
 - Con 1
 - Con 2
 
 ### Option B
 
 **Pros:**
-
 - Pro 1
 - Pro 2
 
 **Cons:**
-
 - Con 1
 - Con 2
 
 ## Performance
 
 | Metric | Option A | Option B |
-| ----------- | -------- | --------- |
+|--------|----------|----------|
 | Speed | Fast | Moderate |
 | Memory | Low | Medium |
 | Scalability | Good | Excellent |

src/templates/meeting-notes.md

@@ -2,7 +2,6 @@
 
 **Date:** {{DATE}}
 **Attendees:**
-
 - Name 1
 - Name 2