chore(release): bump version to 5.0.1

fix(release): walk-and-find pandoc binary in extracted archive
Pandoc 3.9 macOS zip uses an arch-suffixed inner directory (pandoc-3.9.0.2-x86_64/) where Linux/Windows use the bare pandoc-3.9.0.2/ dir. Hard-coding the intermediate path broke the macOS build in v5.0.1-rc1. Replace the hard-coded path.join(tmpDir, PANDOC_VERSION, ...) with a recursive walk that locates the binary by name. This is robust to future pandoc layout shifts (e.g., universal binaries renaming the inner dir). Verified: - Linux: download + extract produces a working pandoc 3.9.0.2 - macOS: walker finds pandoc in pandoc-3.9.0.2-x86_64/bin/ - Windows: walker finds pandoc.exe in pandoc-3.9.0.2/ - 306/306 tests pass
2026-08-03 02:11:07 +05:30 · 2026-06-06 23:08:20 +05:30 · 2026-06-06 23:07:30 +05:30 · 2026-06-06 22:43:16 +05:30 · 2026-06-06 22:43:06 +05:30 · 2026-06-06 22:42:54 +05:30
269 changed files with 47886 additions and 16694 deletions
@@ -23,3 +23,6 @@ jobs:
      - name: Run tests
        run: npm test
      - name: Run linter
        run: npm run lint
@@ -19,17 +19,17 @@ jobs:
          node-version: 20
          cache: npm
      - name: Install rpmbuild
        run: sudo apt-get update && sudo apt-get install -y rpm
      - name: Install dependencies
        run: npm ci
      - name: Download external tools (pandoc)
        run: node scripts/download-tools.js
      - name: Run tests
        run: npm test
      - name: Build Linux packages
-        run: npm run build:linux
+        run: npm run build:linux-ci -- --publish=never
      - name: Upload Linux artifacts
        uses: actions/upload-artifact@v4
@@ -43,7 +43,7 @@ jobs:
          retention-days: 5
  build-windows:
-    runs-on: ubuntu-latest
+    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v4
@@ -53,17 +53,37 @@ jobs:
          node-version: 20
          cache: npm
      - name: Install Wine and NSIS
        run: |
          sudo dpkg --add-architecture i386
          sudo apt-get update
          sudo apt-get install -y wine64 wine32 nsis
      - name: Install dependencies
        run: npm ci
-      - name: Build Windows packages
+      - name: Download external tools (pandoc)
-        run: npm run build:win
+        run: node scripts/download-tools.js
      - name: Run tests
        run: npm test
      - name: Decode certificate (if available)
        if: ${{ env.CSC_LINK_BASE64 != '' }}
        shell: pwsh
        env:
          CSC_LINK_BASE64: ${{ secrets.CSC_LINK_BASE64 }}
        run: |
          $bytes = [Convert]::FromBase64String("$env:CSC_LINK_BASE64")
          [IO.File]::WriteAllBytes("${{ github.workspace }}\code-signing-cert.pfx", $bytes)
          echo "CERT_AVAILABLE=true" >> $env:GITHUB_ENV
      - name: Build Windows packages (signed)
        if: ${{ env.CERT_AVAILABLE == 'true' }}
        env:
          CSC_LINK: code-signing-cert.pfx
          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
        run: npm run build:win-signed -- --publish=never
      - name: Build Windows packages (unsigned)
        if: ${{ env.CERT_AVAILABLE != 'true' }}
        env:
          CSC_IDENTITY_AUTO_DISCOVERY: 'false'
        run: npm run build:win-unsigned -- --publish=never
      - name: Upload Windows artifacts
        uses: actions/upload-artifact@v4
@@ -71,27 +91,71 @@ jobs:
          name: windows-artifacts
          path: |
            dist/*.exe
-            dist/*-win.zip
+            dist/*.zip
          retention-days: 5
  build-macos:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - name: Install dependencies
        run: npm ci
      - name: Download external tools (pandoc)
        run: node scripts/download-tools.js
      - name: Run tests
        run: npm test
      - name: Build macOS packages (unsigned)
        env:
          CSC_IDENTITY_AUTO_DISCOVERY: 'false'
        run: npm run build:mac -- --publish=never
      - name: Upload macOS artifacts
        uses: actions/upload-artifact@v4
        with:
          name: macos-artifacts
          path: |
            dist/*.dmg
            dist/*.zip
          retention-days: 5
  release:
-    needs: [build-linux, build-windows]
+    needs: [build-linux, build-windows, build-macos]
    if: always()
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Download Linux artifacts
        uses: actions/download-artifact@v4
        continue-on-error: true
        with:
          name: linux-artifacts
          path: dist
      - name: Download Windows artifacts
        uses: actions/download-artifact@v4
        continue-on-error: true
        with:
          name: windows-artifacts
          path: dist
      - name: Download macOS artifacts
        uses: actions/download-artifact@v4
        continue-on-error: true
        with:
          name: macos-artifacts
          path: dist
      - name: Create GitHub Release
        uses: softprops/action-gh-release@v2
        with:
@@ -8,14 +8,22 @@ Thumbs.db
 *.swp
 *.swo
 *~
-.vscode/
+.vscode/*
 !.vscode/launch.json
 .idea/
 *.iml
 out/
 .cache/
 .npm/
 .electron/
-package-lock.json
+# package-lock.json is intentionally tracked for reproducible CI builds
 # Downloaded tool binaries (fetched at build time via scripts/download-tools.js)
 bin/
 # Code signing certificates — never commit private keys
 *.pfx
 *.p12
 # Screenshots and temp files
 *.png.bak
@@ -33,4 +41,8 @@ pdf\ modal.png
 # Claude/AI development files
 .claude/
 CLAUDE.md
-agents.mdcoverage/
+agents.md
 coverage/
 # Superpowers brainstorm artifacts
 .superpowers/
@@ -0,0 +1,48 @@
 {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": ["."],
      "outputCapture": "std",
      "env": {
        "NODE_ENV": "development"
      }
    },
    {
      "name": "Debug Renderer Process",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src",
      "timeout": 30000
    },
    {
      "name": "Debug Main + Renderer",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": [".", "--remote-debugging-port=9222"],
      "outputCapture": "std",
      "env": {
        "NODE_ENV": "development"
      },
      "serverReadyAction": {
        "pattern": "listening on port ([0-9]+)",
        "uriFormat": "http://localhost:%s",
        "action": "debugWithChrome"
      }
    }
  ]
 }
@@ -0,0 +1,25 @@
 # Repository Guidelines
 ## Project Structure & Module Organization
 Core application code lives in `src/`. Use `src/main.js` for the Electron main process, `src/preload.js` for the preload bridge, and `src/renderer.js` plus `src/editor/`, `src/sidebar/`, `src/repl/`, and `src/utils/` for renderer-side features. Electron adapter code is in `src/adapters/electron/`. Reusable markdown/document templates live in `src/templates/`. Static assets and icons are in `assets/`. Tests are in `tests/`, and build output goes to `dist/`.
 ## Build, Test, and Development Commands
 - `npm start`: launch the Electron app locally.
 - `npm test`: run the Jest suite once.
 - `npm run test:watch`: rerun tests during local development.
 - `npm run test:coverage`: generate coverage output.
 - `npm run lint` / `npm run lint:fix`: check or fix ESLint issues in `src` and `tests`.
 - `npm run format` / `npm run format:check`: apply or verify Prettier formatting.
 - `npm run build:linux`, `npm run build:win`, `npm run build:mac`: create platform packages with `electron-builder`.
 ## Coding Style & Naming Conventions
 This repo uses Prettier and ESLint. Follow `.prettierrc`: 2-space indentation, single quotes, semicolons, trailing commas where valid in ES5, and a 100-character line width. Prefer `camelCase` for variables/functions, `PascalCase` for classes, and kebab-case for file names only when already established. Keep module boundaries clear: UI logic in renderer modules, OS/file-system work behind Electron IPC and adapters.
 ## Testing Guidelines
 Tests use Jest with `jest-environment-jsdom`. Add new tests under `tests/` with `*.test.js` names, mirroring the feature area when possible, for example `tests/sidebar.test.js` or `tests/print-preview.test.js`. Update or add regression tests for renderer behavior, preload APIs, and utility helpers when fixing bugs. Run `npm test` before opening a PR; use `npm run test:coverage` for larger refactors.
 ## Commit & Pull Request Guidelines
 Recent history follows Conventional Commit prefixes such as `feat:`, `fix:`, and `refactor:`. Keep subjects short and imperative, for example `fix: guard modal cleanup on close`. PRs should describe the user-visible change, note test coverage, link any related issue, and include screenshots or GIFs for UI changes.
 ## Security & Configuration Tips
 Do not bypass preload boundaries or introduce direct `eval`/dynamic code paths; ESLint already treats these as errors. Export and conversion features depend on external tools such as Pandoc, FFmpeg, ImageMagick, and LibreOffice, so document any new runtime dependency in `README.md` and packaging config.
@@ -0,0 +1,43 @@
 # Changelog
 All notable changes to markdown-converter will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [5.0.0] - 2026-06-06
 ### Added
 - **Complete React 19 + Vite + TypeScript renderer** replacing the legacy vanilla-JS UI (Phases 1-9 of the React UI redesign)
 - Native macOS/Windows/Linux menus with command palette and keyboard shortcuts
 - Settings sheet with 5 tabs (editor, theme, keybindings, advanced, about) and 17+ persisted fields
 - Modal layer with 13 modal kinds (export PDF/DOCX/HTML/Word, batch, settings, about, welcome, confirm, ASCII gen, table gen, find in files)
 - 10 advanced tools: ASCII generator (figlet), table generator, Word export (.docx via `docx` lib), find-in-files (recursive regex), REPL (markdown snippet preview), print preview, zen mode (Esc exits), minimap, breadcrumbs-with-symbols, git status (porcelain parser)
 - Sonner toast notifications at 4 wire points (file save, open file/folder, 4 export dialogs)
 - 3 mount strategies: ModalLayer dialogs, App.tsx global overlays, editor/sidebar integrations
 - `ipc.file.writeBuffer` for renderer-side binary file output (used by Word .docx export)
 - `ipc.file.search` (recursive regex), `ipc.file.gitStatus`, `ipc.print.show`, `ipc.app.showSaveDialog`
 - 305 unit + integration tests (vitest + React Testing Library)
 - Per-package @radix-ui primitives (checkbox, dialog, select, switch, tabs, radio-group, scroll-area, slider, collapsible, label, context-menu)
 - shadcn/ui (new-york style) primitives, manually pasted (CLI broken on Node 24)
 - Feature-first main process decomposition: `src/main/{files,menu,window,word-template,utils}/` + glue files
 ### Changed
 - **BREAKING**: Renderer is now React-only. The legacy `src/renderer.js` (5319 lines) and all vanilla-JS UI scripts/styles are removed.
 - Main process decomposed from a 4311-line `src/main.js` into feature-first modules under `src/main/`
 - New entrypoint: `src/main/index.js` (was `src/main.js`)
 - `src/index.html` (1667-line legacy orphan) removed; renderer served by `src/renderer/index.html` (Vite root)
 - IPC contract: handlers throw on error, `safeCall` catches → returns `{ ok: false, error }`. `result.ok` is at top level, NOT nested in `result.data.ok`
 - Settings store: `useSettingsStore` (zustand persist with zod validation), 17+ persisted fields
 - Modal state: `useAppStore.modal: ModalState` discriminated union with 13 kinds; `openModal` uses TS conditional types to enforce prop requirements
 ### Removed
 - `src/renderer.js` (legacy vanilla-JS renderer, 5319 lines)
 - 8 legacy stylesheets: `src/styles.css`, `src/styles-modern.css`, `src/styles-concreteinfo.css`, `src/styles-sidebar.css`, `src/styles-zen.css`, `src/styles-welcome.css`, `src/fonts.css`
 - 5 legacy scripts: `src/command-palette.js`, `src/print-preview.js`, `src/welcome.js`, `src/zen-mode.js`, `src/wordTemplateExporter.js`
 - 2 legacy HTMLs: `src/ascii-generator.html`, `src/table-generator.html`
 - `src/main.js` (4311-line god file, replaced by `src/main/index.js`)
 - `src/index.html` (1667-line legacy orphan at project root, replaced by `src/renderer/index.html`)
 - 9 dead IPC channels from `src/preload.js`: `toggle-command-palette`, `print-preview`, `print-preview-styled`, `open-ascii-generator`, `open-table-generator`, `show-ascii-generator`, `show-ascii-generator-window`, `show-table-generator`, `show-table-generator-window`
 [5.0.0]: https://github.com/amitwh/markdown-converter/releases/tag/v5.0.0
@@ -162,4 +162,4 @@ Amit Haridas (amit.wh@gmail.com)
 ## Version
-v3.0.0
+v4.1.0
@@ -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"
 }
@@ -1,6 +1,6 @@
 # MarkdownConverter - STRIDE Threat Model Analysis
-**Version:** 4.0.0
+**Version:** 4.1.0
 **Date:** 2026-03-15
 **Methodology:** STRIDE + MITRE ATT&CK Mapping
 **Analyst:** Security Assessment Team
@@ -0,0 +1,335 @@
 # Writer's Studio Feature Pack — Design Document
 **Date**: 2026-04-06
 **Version**: 4.2.0 target
 **Status**: Approved
 **Scope**: Three cohesive features to transform MarkdownConverter into a writing environment
 ---
 ## Overview
 The Writer's Studio Feature Pack adds three interconnected features to MarkdownConverter:
 1. **Zen Mode** — Distraction-free writing environment with typewriter scrolling
 2. **Document Outline** — Heading hierarchy sidebar panel for navigation
 3. **Writing Analytics** — Real-time readability and vocabulary analysis dashboard
 These features work together: Zen Mode creates the environment, Outline provides navigation, Analytics gives insight.
 ---
 ## Feature 1: Zen Mode
 ### Purpose
 Transform the app from a multi-tool into a focused writing environment. Inspired by iA Writer, Typora, and Bear.
 ### New Files
 - `src/zen-mode.js` — ZenMode class (~150 lines)
 - `src/styles-zen.css` — Zen mode specific styles (~120 lines)
 ### Integration Points
 - `src/renderer.js` — Initialize ZenMode, register F11 shortcut, add View > Zen Mode menu
 - `src/editor/codemirror-setup.js` — Export typewriter + dimming extensions
 ### Behavior
 **Toggle**: F11, View > Zen Mode, command palette "Toggle Zen Mode"
 **Exit**: Escape key, F11 again
 **What hides**:
 - Tab bar
 - Toolbar
 - Sidebar (collapsed)
 - Status bar
 - App header
 **What shows**:
 - Editor (full viewport)
 - Floating HUD (bottom-center, semi-transparent)
 ### Floating HUD
 ```
 ┌─────────────────────────────────────────┐
 │  847 words  •  ~4 min  •  23:45 session │
 │  ████████████████░░░░  85% of 1000      │
 └─────────────────────────────────────────┘
 ```
 - Word count (from existing status bar logic)
 - Estimated reading time (~200 wpm)
 - Session timer (starts when zen mode activates)
 - Optional progress bar toward word goal
 ### CodeMirror Extensions
 **Typewriter Scroll** (`ViewPlugin`):
 - Listens to `EditorView.update` for selection changes
 - Calls `editor.dispatch({ effects: EditorView.scrollIntoView(pos, { y: 'center' }) })`
 - Smooth scrolling with `scrollBehavior: 'smooth'` in CSS
 **Line Dimming** (`ViewPlugin` + `Decoration`):
 - Builds a `DecorationSet` mapping each line to an opacity value
 - Active line: opacity 1.0
 - 1-2 lines away: 0.7
 - 3-4 lines away: 0.5
 - 5+ lines away: 0.3
 - Uses `Decoration.line({ attributes: { style: 'opacity: X' } })`
 ### Centered Column
 CSS applied to `.zen-mode .cm-content`:
 ```css
 .zen-mode .cm-content {
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
 }
 ```
 ### State Management
 - `this.previousState` stores which UI elements were visible before zen mode
 - On exit, restores all elements to their previous visibility
 - Editor content, cursor position, and scroll state are never modified
 ---
 ## Feature 2: Document Outline Panel
 ### Purpose
 Provide always-visible heading navigation for documents of any length. The single most-requested navigation feature for multi-section documents.
 ### New Files
 - `src/sidebar/outline-panel.js` — `renderOutlinePanel` function (~100 lines)
 ### Modified Files
 - `src/index.html` — Add outline icon button in sidebar icons strip
 - `src/renderer.js` — Register 'outline' panel, provide editor reference
 ### Sidebar Integration
 Uses existing `SidebarManager.registerPanel()` API:
 ```javascript
 sidebarManager.registerPanel('outline', {
    title: 'Outline',
    render: (container) => renderOutlinePanel(container, editor, editorContent)
 });
 ```
 New icon button in sidebar strip (after templates icon):
 ```html
 <button class="sidebar-icon" data-panel="outline" title="Outline (Ctrl+Shift+O)">
    <!-- hierarchy/list icon SVG -->
 </button>
 ```
 ### Parsing Logic
 Parse headings from raw markdown content using regex:
 ```javascript
 const headingRegex = /^(#{1,6})\s+(.+)$/gm;
 ```
 Returns array of:
 ```javascript
 { level: 1-6, text: "Heading Text", line: 42 }
 ```
 Debounced at 300ms to avoid re-parsing on every keystroke.
 ### UI Structure
 ```
 ┌──────────────────────────────────────────┐
 │  OUTLINE                          ☰      │
 ├──────────────────────────────────────────┤
 │  ▸ Introduction                  (H1)    │
 │    ▸ Getting Started             (H2)    │
 │    ▸ Prerequisites               (H2)    │
 │      ▸ Node.js                   (H3) ◄  │
 │    ▸ Installation                (H2)    │
 │  ▸ Features                      (H1)    │
 │    ▸ Editor                      (H2)    │
 │    ▸ Export                      (H2)    │
 ├──────────────────────────────────────────┤
 │  9 headings  •  2 H1  •  4 H2  •  3 H3  │
 └──────────────────────────────────────────┘
 ```
 - Indentation based on heading level (H1 = 0px, H2 = 16px, H3 = 32px, etc.)
 - Current heading highlighted with accent color (◄ indicator)
 - Hover shows full heading text if truncated
 ### Click-to-Navigate
 ```javascript
 editor.dispatch({
    effects: EditorView.scrollIntoView(linePos, { y: 'center' })
 });
 ```
 Brief highlight animation on the target line (fades out over 500ms).
 ### Current Heading Sync
 On editor update (debounced 100ms):
 1. Get cursor line number
 2. Find the last heading whose line number <= cursor line
 3. Set that heading as active in the outline
 ### Empty State
 When no headings found:
 ```
 No headings found
 Use # to create headings:
 # Heading 1
 ## Heading 2
 ### Heading 3
 ```
 ---
 ## Feature 3: Writing Analytics
 ### Purpose
 Give writers real-time insight into their document's readability, structure, and vocabulary. This is the "surprise" feature most Markdown editors lack.
 ### New Files
 - `src/analytics/writing-analytics.js` — `WritingAnalytics` class (~180 lines)
 - `src/analytics/analytics-panel.js` — `renderAnalyticsPanel` function (~120 lines)
 ### Integration Points
 - `src/renderer.js` — Register Ctrl+Shift+A shortcut, command palette entry, View menu item
 ### Trigger
 - Keyboard: `Ctrl+Shift+A`
 - Command Palette: "Show Writing Analytics"
 - Menu: View > Writing Analytics
 ### Presentation
 Uses existing `ModalManager` to show a modal overlay with analytics dashboard.
 ```
 ┌─────────────────────────────────────────────────────┐
 │  Writing Analytics                              ✕   │
 ├─────────────────────────────────────────────────────┤
 │                                                      │
 │  ┌─ Readability ──────────────────────────────────┐ │
 │  │  Flesch Reading Ease:  67.3 (Standard)    ○   │ │
 │  │  Grade Level:          8.2              ○○○●○  │ │
 │  └─────────────────────────────────────────────────┘ │
 │                                                      │
 │  ┌─ Timing ───────────────────────────────────────┐ │
 │  │  Reading Time:   ~4 min                        │ │
 │  │  Speaking Time:  ~6 min                        │ │
 │  └─────────────────────────────────────────────────┘ │
 │                                                      │
 │  ┌─ Structure ────────────────────────────────────┐ │
 │  │  Sentences:  42  •  Paragraphs:  8            │ │
 │  │  Avg Sentence:  14.2 words                     │ │
 │  │  Longest:  38 words ("The quick brown fox...") │ │
 │  └─────────────────────────────────────────────────┘ │
 │                                                      │
 │  ┌─ Vocabulary ───────────────────────────────────┐ │
 │  │  Unique: 312 / 847 words (36.8%)               │ │
 │  │  Top: the(42) and(31) markdown(28) ...         │ │
 │  └─────────────────────────────────────────────────┘ │
 │                                                      │
 │  ┌─ Word Goal ────────────────────────────────────┐ │
 │  │  Target: [1000] words                          │ │
 │  │  ████████████████░░░░  847/1000 (85%)          │ │
 │  └─────────────────────────────────────────────────┘ │
 │                                                      │
 └─────────────────────────────────────────────────────┘
 ```
 ### Metrics Implementation
 **Readability (Flesch-Kincaid):**
 ```javascript
 // Flesch Reading Ease
 ease = 206.835 - 1.015 * (words / sentences) - 84.6 * (syllables / words);
 // Flesch-Kincaid Grade Level
 grade = 0.39 * (words / sentences) + 11.8 * (syllables / words) - 15.59;
 ```
 **Syllable Estimation:**
 ```javascript
 function countSyllables(word) {
    word = word.toLowerCase().replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '');
    word = word.replace(/^y/, '');
    return word.match(/[aeiouy]{1,2}/g)?.length || 1;
 }
 ```
 **Reading/Speaking Time:**
 - Reading: 200 words/minute
 - Speaking: 130 words/minute
 **Lexical Diversity:**
 - Ratio of unique words to total words (excluding stop words)
 **Top Words:**
 - Frequency map, sorted descending, top 10
 - Excludes common stop words (the, a, an, is, are, etc.)
 ### Word Goal
 - Persisted in `electron-store` per document (or global default)
 - Progress bar with percentage
 - Celebration effect when goal is reached (brief confetti animation or green flash)
 ### Update Cadence
 - Re-analyzes on editor content change (debounced at 1000ms)
 - If modal is open, updates live
 - If modal is closed, no computation (zero overhead)
 ---
 ## File Summary
 | File | Action | Purpose |
 |------|--------|---------|
 | `src/zen-mode.js` | Create | ZenMode class with CM6 extensions |
 | `src/styles-zen.css` | Create | Zen mode styling |
 | `src/sidebar/outline-panel.js` | Create | Outline sidebar panel |
 | `src/analytics/writing-analytics.js` | Create | Analytics computation engine |
 | `src/analytics/analytics-panel.js` | Create | Analytics modal UI |
 | `src/index.html` | Modify | Add outline icon, zen mode button |
 | `src/renderer.js` | Modify | Initialize all three features |
 | `src/editor/codemirror-setup.js` | Modify | Export typewriter + dimming extensions |
 ## Keyboard Shortcuts
 | Shortcut | Feature | Action |
 |----------|---------|--------|
 | F11 | Zen Mode | Toggle on/off |
 | Escape | Zen Mode | Exit (when active) |
 | Ctrl+Shift+O | Outline | Open outline sidebar panel |
 | Ctrl+Shift+A | Analytics | Open analytics modal |
 ## Dependencies
 No new npm dependencies required. All features use:
 - Existing CodeMirror 6 APIs (ViewPlugin, Decoration, scrollIntoView)
 - Existing SidebarManager API
 - Existing ModalManager API
 - Pure JavaScript math for analytics
@@ -0,0 +1,270 @@
 # Packaging — All-Platform Build + GitHub Releases
 **Goal:** Make `npm run dist:all` produce Linux + Windows + macOS artifacts, and have the existing `.github/workflows/release.yml` create a GitHub Release on tag push with those artifacts. No code signing in this iteration.
 **Scope (user decisions 2026-06-06):**
 - Target platforms: **all three** (Linux .deb/AppImage/snap, Windows NSIS/portable/zip, macOS dmg/zip)
 - Distribution: **GitHub Releases** (no auto-update; static artifacts only)
 - Code signing: **skip for now** (unsigned binaries; Windows SmartScreen will warn, macOS Gatekeeper will quarantine)
 **Architecture:** This is mostly about completing the existing scaffold. `electron-builder` 26.0.12, `scripts/download-tools.js`, `scripts/generate-icons.js`, the `package.json` scripts, and `release.yml` are all already in place. We need to (1) close a real bug in the `files` config, (2) add the macOS job to the workflow, and (3) declare macOS targets in the package config.
 **Tech stack:** electron-builder 26.0.12, GitHub Actions `ubuntu-latest`/`windows-latest`/`macos-latest` runners, softprops/action-gh-release@v2 for the release creation.
 ---
 ## Task 1 — Fix the `files` config in `package.json`
 The current `files: ["src/**/*", ...]` matches `src/renderer/**/*.tsx` and ships dev source into the asar. The shipped renderer should be the built `dist/renderer/**/*` output, not TS source. asarUnpack for ffmpeg-static is correct and stays.
 **Files:** `package.json` (build.files, build.extraResources)
 ### Step 1.1 — Replace `files` block
 ```json
 "files": [
  "src/main/**/*",
  "src/preload.js",
  "src/plugins/**/*",
  "package.json"
 ],
 "extraResources": [
  {
    "from": "dist/renderer",
    "to": "renderer"
  }
 ]
 ```
 - `src/main/**/*` — main process source (entry point + all main-process modules)
 - `src/preload.js` — single preload file at the root of `src/`
 - `src/plugins/**/*` — built-in plugins (referenced from main process; the `extraFiles: []` line in the current config is empty, so this is the right pattern)
 - `package.json` — required for the asar `app.asar/package.json` lookup electron does at runtime
 - `dist/renderer` moves to `extraResources` because it should live alongside the asar (not inside it) — the asar is sealed and we want the renderer to be a separately-updatable resource path. Production main loads it via `loadFile(path.join(__dirname, '../../dist/renderer/index.html'))` which, in the packaged app, resolves to `process.resourcesPath/renderer/index.html`. **This requires changing the loadFile path in `src/main/window/index.js` too** — see Task 4.
 ### Step 1.2 — Verify
 - `npm run build:linux` should produce a working .AppImage
 - Inside the .AppImage (extract with `--appimage-extract`), check `resources/` has `app.asar` and a `renderer/` directory containing `index.html` and `assets/`
 - Inside `app.asar`, check `src/main/index.js` is present and `src/renderer/` is absent
 ---
 ## Task 2 — Add macOS targets + icon to `package.json` build config
 **Files:** `package.json`
 ### Step 2.1 — Replace the existing `mac` block
 ```json
 "mac": {
  "category": "public.app-category.productivity",
  "identity": null,
  "target": [
    { "target": "dmg", "arch": ["x64", "arm64"] },
    { "target": "zip", "arch": ["x64", "arm64"] }
  ],
  "icon": "assets/icon.icns",
  "darkModeSupport": true,
  "hardenedRuntime": false,
  "gatekeeperAssess": false,
  "entitlements": null
 }
 ```
 - `identity: null` is intentional for unsigned builds
 - `darkModeSupport: true` — the app already supports dark mode; this is just metadata
 - `hardenedRuntime: false` and `gatekeeperAssess: false` — without signing, these are the only way the build succeeds
 - `entitlements: null` — no entitlements file; some features (jit) won't work but Electron's main process doesn't need them in this app
 - **`.icns` is missing.** For this iteration we'll use the default Electron icon and add a follow-up to generate one. The build will succeed without it but the produced .app will have the default icon.
 ### Step 2.2 — Generate a placeholder `.icns` (optional, can be deferred)
 If we want a proper icon, the path is:
 1. `npm run generate-icons` to produce `assets/icons/*.png` (already done)
 2. Use `png2icns` (Linux) or `iconutil` (mac) to bundle them into `assets/icon.icns`
 3. We don't have either on this Linux container; defer to a follow-up plan
 For this iteration: ship without `.icns` and accept the default icon.
 ### Step 2.3 — Add `publish` config
 ```json
 "publish": {
  "provider": "github",
  "owner": "amitwh",
  "repo": "markdown-converter",
  "releaseType": "release"
 }
 ```
 Even without auto-update, this tells `electron-builder` to write `latest-mac.yml` / `latest-linux.yml` next to the artifacts. Useful for future auto-update wiring. CI passes `--publish=never` to override.
 ---
 ## Task 3 — Add macOS job to `.github/workflows/release.yml`
 **Files:** `.github/workflows/release.yml`
 ### Step 3.1 — Add a third job between `build-windows` and `release`
 Insert after the `build-windows` job (around line 96):
 ```yaml
  build-macos:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - name: Install dependencies
        run: npm ci
      - name: Download external tools (pandoc)
        run: node scripts/download-tools.js
      - name: Run tests
        run: npm test
      - name: Build macOS packages (unsigned)
        env:
          CSC_IDENTITY_AUTO_DISCOVERY: 'false'
        run: npm run build:mac -- --publish=never
      - name: Upload macOS artifacts
        uses: actions/upload-artifact@v4
        with:
          name: macos-artifacts
          path: |
            dist/*.dmg
            dist/*.zip
          retention-days: 5
 ```
 ### Step 3.2 — Wire macOS into the `release` job's `needs` and downloads
 Change the `release` job:
 ```yaml
  release:
    needs: [build-linux, build-windows, build-macos]
    ...
 ```
 And add a third download step (after the Windows download):
 ```yaml
      - name: Download macOS artifacts
        uses: actions/download-artifact@v4
        continue-on-error: true
        with:
          name: macos-artifacts
          path: dist
 ```
 `continue-on-error: true` is intentional — a failed macOS build shouldn't block a release of working Linux+Windows artifacts.
 ---
 ## Task 4 — Update `src/main/window/index.js` for the resource path
 **Files:** `src/main/window/index.js`
 ### Step 4.1 — Update the loadFile path
 The current code (line 35):
 ```js
 const prodPath = path.join(__dirname, '../../dist/renderer/index.html');
 ```
 Inside the packaged app, `__dirname` points into the asar. `process.resourcesPath` points to the directory holding `app.asar` + the `renderer/` extraResources dir. Change to:
 ```js
 const rendererIndex = app.isPackaged
  ? path.join(process.resourcesPath, 'renderer', 'index.html')
  : path.join(__dirname, '../../dist/renderer/index.html');
 win.loadFile(rendererIndex);
 ```
 This needs to happen after the dev/prod branch is decided. The existing `if (!app.isPackaged && devServerUrl)` block already handles dev mode; the else branch needs this update.
 ### Step 4.2 — Add a guard for missing renderer in prod
 ```js
 if (app.isPackaged) {
  try {
    fs.accessSync(path.join(process.resourcesPath, 'renderer', 'index.html'));
  } catch {
    console.error('[WINDOW] Renderer not found at', process.resourcesPath, '— did you run `npm run build:renderer` before packaging?');
  }
 }
 ```
 Failure mode: someone runs `npm run build` without first building the renderer. Without this guard, the window opens blank and the user has no idea why.
 ---
 ## Task 5 — Test on this Linux box
 ### Step 5.1 — Local verification
 ```bash
 npm ci
 npm run download-tools   # idempotent; bin/linux/pandoc already exists
 npm run build:renderer
 npm run build:linux      # produces .deb, .AppImage in dist/
 ```
 Inspect the .AppImage:
 ```bash
 chmod +x dist/*.AppImage
 ./dist/MarkdownConverter-*.AppImage --appimage-extract
 ls squashfs-root/resources/
 # Expect: app.asar  renderer/
 ls squashfs-root/resources/renderer/
 # Expect: index.html  assets/
 ```
 ### Step 5.2 — Run the produced app
 ```bash
 ./dist/MarkdownConverter-*.AppImage
 ```
 The app should:
 - Launch with the AppShell, header, sidebar
 - Allow opening a folder / file
 - Export to PDF/DOCX/HTML work (pandoc bundled)
 ### Step 5.3 — Tag + push to test the release workflow (optional)
 Only do this if the user wants to verify the full pipeline. A dry-run on the CI side via `act` would be cleaner but `act` doesn't run macos-latest jobs locally. If the user wants to verify the workflow, push a `v5.0.1-rc1` tag and watch the Actions tab.
 ---
 ## Success criteria
 1. `npm run dist:all` produces all three platform families on this Linux box (or at least Linux + mac, since Windows is built on Windows)
 2. The .AppImage launches and the app works end-to-end
 3. `release.yml` runs all three jobs on a tag push and creates a GitHub release with the union of artifacts
 4. No regressions: 306/306 tests still pass, dev workflow still works
 5. The `files` bug is fixed: no `.tsx` in the packaged asar
 ## Known limitations (intentional, can be follow-ups)
 - **No `.icns`** — the macOS app will have the default Electron icon. Generating a proper `.icns` requires `iconutil` (mac) or `png2icns` (cross-platform); neither is on this Linux box.
 - **No code signing** — Windows SmartScreen will warn; macOS Gatekeeper will quarantine unsigned `.dmg`. Setting up signing later is a config-only change (no structural rework): add `CSC_LINK`/`CSC_KEY_PASSWORD` for Windows, `CSC_LINK` (Apple Developer ID) for mac.
 - **No auto-update** — user decisions for this iteration. Wiring `electron-updater` is a follow-up; the `publish` config from Task 2 puts metadata in the right place.
 - **Cross-build quirks** — building macOS from Linux produces a `.dmg` that is generally usable but may show a "this app is from an unidentified developer" prompt the first time. Right-click → Open to bypass once. Documented in the release notes.
 ## Out of scope
 - CHANGELOG.md updates (not part of packaging)
 - electron-updater wiring
 - Code signing cert procurement
 - Snap store / Microsoft Store / Mac App Store submission
@@ -0,0 +1,426 @@
 # MarkdownConverter v5.0 — Platform Design
 **Date:** 2026-04-14
 **Status:** Approved
 **Author:** Amit Haridas
 ## Overview
 Transform MarkdownConverter from a monolithic editor into an extensible platform with a plugin system and three feature packs, shipped together as v5.0.
 ## Subsystems
 1. **Plugin System** — Lightweight plugin registry with extension points (sidebar, commands, settings, status bar, export hooks, event bus)
 2. **Writing Studio Plugin** — Manuscript manager, goal tracking, writing sprints, snapshots, smart proofreading
 3. **AI Assistant Plugin** — Multi-provider AI writing assistant (Ollama, LMStudio, GGUF direct with GPU, Anthropic, OpenAI)
 4. **Collaboration Plugin** — Git-based async collaboration, comments/annotations, review requests
 ## Core Principle
 **Existing functionality is never replaced or broken.** The plugin system is additive. All existing keyboard shortcuts, features, and UI remain untouched. Plugin shortcuts use `Ctrl+Alt+` namespace.
 ---
 ## 1. Plugin System
 ### File Structure
 ```
 src/
  plugins/
    plugin-registry.js      # Load, register, lifecycle
    plugin-api.js            # Base class plugins extend
    plugin-loader.js         # Discovers and validates manifests
    built-in/
      writing-studio/
        manifest.json
        index.js
        panels/
        components/
      ai-assistant/
        manifest.json
        index.js
        providers/
      collaboration/
        manifest.json
        index.js
 ```
 ### Manifest Schema
 ```json
 {
  "id": "writing-studio",
  "name": "Writing Studio",
  "version": "1.0.0",
  "description": "Manuscript management, goal tracking, writing sprints",
  "icon": "pen-tool",
  "extensionPoints": {
    "sidebar": { "panel": "panels/manuscript-panel.js", "order": 30 },
    "settings": { "section": "settings/index.js" },
    "statusBar": { "indicators": ["sprint-timer", "word-goal"] },
    "commands": [
      { "id": "start-sprint", "label": "Start Writing Sprint", "shortcut": "Ctrl+Alt+S" },
      { "id": "take-snapshot", "label": "Take Snapshot", "shortcut": "Ctrl+Alt+N" }
    ],
    "exportHooks": {
      "preExport": "hooks/pre-export.js",
      "postExport": "hooks/post-export.js"
    }
  },
  "settings": [
    { "key": "dailyGoal", "type": "number", "default": 1000, "label": "Daily word goal" },
    { "key": "sprintDuration", "type": "number", "default": 25, "label": "Sprint duration (min)" }
  ]
 }
 ```
 ### Plugin Lifecycle
 1. PluginLoader discovers manifests in `built-in/` + user plugins directory
 2. PluginRegistry validates manifests
 3. Each plugin calls `Plugin.init(context)` receiving scoped API context
 4. Extension points registered (sidebar panels, commands, status bar items)
 5. Plugins activate lazily — sidebar panel loads JS when user clicks tab
 ### Plugin Context API
 Each plugin's `init()` receives:
 ```javascript
 {
  sidebar: {
    registerPanel(id, { icon, title, component })
  },
  commands: {
    register(id, label, handler, shortcut?)
  },
  statusBar: {
    registerIndicator(id, { position, render })
  },
  settings: {
    get(key),                    // plugin-scoped
    set(key, value),             // auto-persisted via electron-store
    onChanged(key, callback)
  },
  editor: {
    getContent(),                // current document
    getSelection(),              // selected text
    insertAtCursor(text),        // requires opt-in
    onContentChanged(callback)
  },
  events: {
    on(event, handler),
    emit(event, data)
  },
  exports: {
    registerPreHook(handler),
    registerPostHook(handler)
  },
  ipc: {
    invoke(channel, ...args),
    on(channel, handler)
  }
 }
 ```
 ### Event Bus Events
 Each event has a versioned payload schema. Breaking changes increment the version suffix.
 ```
 document:opened        → { filePath: string, tabId: string }
 document:saved         → { filePath: string, tabId: string }
 document:changed       → { tabId: string, content: string, wordCount: number }
 editor:selection-changed → { tabId: string, text: string, from: {line,ch}, to: {line,ch} }
 tab:switched           → { tabId: string, filePath: string }
 tab:closed             → { tabId: string, filePath: string }
 export:started         → { format: string, filePath: string }
 export:completed       → { format: string, filePath: string, outputPath: string }
 export:failed          → { format: string, error: string }
 plugin:loaded          → { pluginId: string, version: string }
 plugin:activated       → { pluginId: string }
 plugin:deactivated     → { pluginId: string }
 app:ready              → {}
 app:before-quit        → {}
 ```
 ### Design Rules
 - Built-in plugins use the same API as future third-party plugins
 - Lazy activation — sidebar panels don't load until clicked
 - Scoped settings: `plugins.<id>.<key>` in electron-store
 - Plugin commands globally unique — registry rejects duplicate command IDs at load time
 - **Plugin sandboxing**: each plugin handler is wrapped in try/catch. For CPU-intensive operations (AI inference, diff computation), plugins must delegate to main process via IPC. Handlers that block the renderer for >5s trigger a warning notification. Memory-hungry operations (GGUF inference) run in isolated child processes.
 - **Cross-plugin graceful degradation**: plugins check `context.events.hasHandler('ai:analyze')` before emitting cross-plugin requests. If no handler (AI plugin disabled), show a "this feature requires the AI plugin" prompt instead of failing silently. All cross-plugin calls have a 30s timeout with default fallback behavior.
 ---
 ## 2. Writing Studio Plugin
 ### 2A. Manuscript / Project Manager
 Folder-based project structure:
 ```
 ~/Manuscripts/
  my-novel/
    .project.json          # { title, targets, metadata }
    01-chapter-one.md
    02-chapter-two.md
    characters/
      protagonist.md
    research/
      world-building.md
    .snapshots/
      2026-04-14T10-30.json
 ```
 `.project.json`:
 ```json
 {
  "title": "My Novel",
  "type": "manuscript",
  "target": { "words": 80000, "deadline": "2026-09-01" },
  "chapters": [
    { "file": "01-chapter-one.md", "title": "The Beginning", "status": "draft" }
  ],
  "metadata": { "author": "", "genre": "", "synopsis": "" }
 }
 ```
 Sidebar panel shows project tree with drag-to-reorder, word counts per chapter, target progress bar. "Compile manuscript" exports all chapters as a single document.
 ### 2B. Goal Tracking & Writing Sprints
 - **Status bar**: daily progress bar + sprint timer
 - **Writing sprint**: configurable duration (15/25/30/45/60 min), word count delta, WPM at end
 - **Goal tracking**: daily/weekly word goals, streak tracking, 30-day bar chart
 - **Enhanced analytics**: session tracking, readability scores, productive time-of-day heatmap
 - Data stored in `plugins.writing-studio.history` as date-keyed map
 ### 2C. Snapshot & Versioning
 - `Ctrl+Alt+N` or toolbar button saves snapshot
 - Stored as JSON: `{ timestamp, content, wordCount, cursorPos, label }`
 - Snapshot panel in sidebar: Restore, Diff (side-by-side), auto-snapshot interval
 - Snapshots in `.snapshots/` inside project folder, or app data if no project
 ### 2D. Smart Proofreading
 Delegates to AI plugin via event bus. Writing Studio provides:
 - Right-click context menu: "Check grammar", "Suggest alternatives", "Analyze readability"
 - Inline wavy underline decorations for issues
 - Proofread panel: issues categorized by type with Accept/Dismiss
 ### Commands
 | Command | Shortcut | Action |
 |---------|----------|--------|
 | `start-sprint` | `Ctrl+Alt+S` | Start writing sprint |
 | `stop-sprint` | `Ctrl+Alt+Shift+S` | Stop sprint |
 | `take-snapshot` | `Ctrl+Alt+N` | Save snapshot |
 | `restore-last-snapshot` | `Ctrl+Alt+Z` | Restore latest snapshot |
 | `new-project` | — | Create manuscript project |
 | `compile-manuscript` | `Ctrl+Alt+E` | Export all chapters |
 | `proofread-document` | `Ctrl+Alt+G` | AI proofread |
 ---
 ## 3. AI Assistant Plugin
 ### Provider Architecture
 ```
 AI Plugin
  ├── Provider Interface
  │     ├── complete(prompt, options) → string
  │     ├── stream(prompt, options) → AsyncIterable
  │     └── analyze(text, type) → AnalysisResult
  │
  ├── Providers
  │     ├── OllamaProvider      — localhost:11434
  │     ├── LMStudioProvider    — localhost:1234/v1
  │     ├── GGUFProvider         — direct llama.cpp with GPU support
  │     ├── AnthropicProvider    — Claude API
  │     └── OpenAIProvider       — GPT API
  │
  └── Features
        ├── Grammar/style check
        ├── Inline auto-complete
        ├── AI chat panel (sidebar)
        ├── Document analysis
        └── Smart commands (command palette)
 ```
 ### Provider Details
 **Ollama:** `GET /api/tags` for models, `POST /api/generate` and `POST /api/chat` for inference.
 **LMStudio:** OpenAI-compatible API at `localhost:1234/v1`. `GET /v1/models`, standard chat completion format, SSE streaming.
 **GGUF Direct (with GPU):**
 - Ships bundled llama.cpp binaries per platform (CUDA, Vulkan, Metal, CPU variants)
 - Auto-detects GPU: CUDA (nvidia-smi), Vulkan driver, Metal (macOS)
 - GPU layer offloading: configurable, auto-suggests based on VRAM vs model size
 - Settings: GPU backend selection, layer count, context length, thread count
 - "Keep model loaded" option for faster repeated requests
 - WASM fallback for sandboxed environments (CPU-only)
 - External binary path for advanced users with custom builds
 - **Process isolation**: llama.cpp runs as a spawned child process (not in main process). If it crashes, detected via exit handler, auto-restarted with notification. GPU memory freed on crash. App remains stable.
 - Process management: spawn in server mode on localhost ephemeral port, clean up on app quit or model unload
 **Cloud (Anthropic/OpenAI):**
 - API key stored encrypted via electron safeStorage
 - Token usage tracking with estimated cost
 - Rate limit awareness with request queueing and backoff
 ### IPC Design
 All provider HTTP requests go through main process:
 - No CORS issues
 - API keys never in renderer
 - Main process enforces rate limiting
 - GGUF inference in isolated child process
 **Request/response lifecycle:**
 ```
 Renderer → ipc.invoke('ai:complete') → Main → HTTP to provider → result → Renderer
 ```
 **Streaming lifecycle with error handling:**
 ```
 Renderer → ipc.invoke('ai:stream', { requestId, prompt })
         ← Main assigns requestId, returns { requestId }
         ← ipc.on('ai:chunk', { requestId, text }) — repeated
         ← ipc.on('ai:done', { requestId }) — success
         ← ipc.on('ai:error', { requestId, error }) — failure
 // Cancellation
 Renderer → ipc.invoke('ai:cancel', { requestId })
         ← Main aborts HTTP request, emits 'ai:done'
 // Orphan cleanup: if renderer disconnects (crash/close),
 // main process detects via 'render-view-deleted' and aborts all active streams.
 // Heartbeat: if no chunk received in 30s, main emits 'ai:error' with timeout.
 ```
 ### Features
 1. **Inline suggestions**: ghost text after configurable delay, Tab to accept, Esc to dismiss
 2. **AI chat panel**: sidebar conversation, "Insert" / "Replace selection" buttons
 3. **Document analysis**: grammar, style, tone, with accept/reject per suggestion
 4. **Smart commands**: summarize, generate outline, find inconsistencies, translate, explain code
 ### Privacy
 - Local-first: default provider is Ollama
 - No telemetry: requests go direct to provider
 - Content gating: exclude file types from AI
 - Status bar shows "AI: processing..." with cancel option
 - Cloud usage stats in settings (tokens, cost)
 ### Cross-Plugin Integration
 ```javascript
 // Writing Studio calls AI Plugin
 context.events.emit('ai:analyze', { text, type: 'grammar', callback });
 ```
 ---
 ## 4. Collaboration Plugin
 ### 4A. Enhanced Git Panel
 Upgrades to existing git panel:
 - Remote management (add/remove remotes, push/pull)
 - Branch list and switching
 - Commit history with diff viewer (side-by-side or unified)
 - Conflict resolution UI (accept-ours/accept-theirs/per-edit)
 ### 4B. Shared Repository Workflow
 1. Writer A creates project + initializes git + pushes to shared repo
 2. Writer B clones repo from within MarkdownConverter
 3. Both write on their own branches
 4. Writer A creates review request (simplified PR)
 Review request: changed files, word count diff, commit messages. Reviewer can approve, request changes, leave inline comments. Reviews are git branches + comments as git notes.
 ### 4C. Comments & Annotations
 Inline comments stored as JSON in `.comments/` directory (git-tracked):
 ```json
 {
  "id": "uuid",
  "file": "03-chapter-three.md",
  "anchor": {
    "contextBefore": "The hero looked at the horizon and said,",
    "selectedText": "I will not go quietly into that dark night",
    "contextAfter": "He turned to face the army alone."
  },
  "line": 142,
  "text": "This dialogue feels unnatural",
  "author": "amit",
  "timestamp": "2026-04-14T14:30:00Z",
  "replies": [],
  "resolved": false
 }
 ```
 - **Anchor-based positioning**: comments store `contextBefore`, `selectedText`, and `contextAfter` (not absolute byte offsets). On file change, re-anchor by searching for the context text. If context no longer matches, mark comment as "detached" and show a warning. Falls back to `line` number as rough position.
 - Highlighted text in editor with tooltip on hover
 - Comment panel in sidebar: all unresolved comments across files
 - Resolution workflow: add → address → reply → resolve
 - Resolved comments dim but stay visible
 ### 4D. Change Notifications
 - Status bar indicator: `↓ 3 new commits`
 - Click to see changes, one-click pull
 - Conflicts trigger resolution UI
 - Push button only when local commits ahead of remote
 ### 4E. Offline-First
 All writing happens locally. Git is the sync mechanism. No internet required for writing, commenting, snapshots, or sprints. Push/pull on user action or auto-sync setting.
 ### Commands
 | Command | Shortcut | Action |
 |---------|----------|--------|
 | `collab:commit` | `Ctrl+Shift+G` | Commit with message |
 | `collab:push` | — | Push current branch |
 | `collab:pull` | — | Pull from remote |
 | `collab:add-comment` | `Ctrl+Alt+C` | Comment on selection |
 | `collab:next-comment` | `F8` | Next unresolved comment |
 | `collab:prev-comment` | `Shift+F8` | Previous comment |
 | `collab:create-review` | — | Create review request |
 ### Cross-Plugin Integration
 ```javascript
 context.events.emit('snapshot:created', { file, snapshotId });
 context.events.on('project:chapter-opened', (chapter) => { /* load comments */ });
 context.events.on('comment:added', (comment) => { /* AI could suggest fix */ });
 ```
 ---
 ## Bundle Size Impact
 - llama.cpp binaries: ~15MB per GPU variant. Only target platform shipped. GPU variants (CUDA/Vulkan/Metal) downloaded on demand if user enables GGUF direct loading — not bundled by default. Only CPU fallback bundled (~15MB).
 - Plugin system core: ~30KB
 - Each built-in plugin: ~50-100KB
 - Diff library (jsdiff): ~15KB
 - Total estimated increase: ~20-30MB (core), additional ~30-50MB per GPU variant (lazy download)
 ## Testing Strategy
 - Plugin system: unit tests for registry, loader, context API mocking
 - Each plugin: isolated unit tests, integration tests via plugin context
 - AI provider tests: mock HTTP responses, test streaming parsing
 - Git tests: use test repository fixture
 - E2E: verify plugin loading doesn't break existing features
@@ -0,0 +1,399 @@
 # Phase 7 — Modals Design
 > Companion to the parent plan: `docs/superpowers/plans/2026-06-05-react-ui-redesign.md` (Phases 7+8+9+10 are sketched there at high level; this spec locks Phase 7's architecture, file map, and contracts so it can be planned task-by-task.)
 **Date:** 2026-06-05
 **Phase:** 7 of 10 (React + shadcn/ui UI redesign)
 **Tag (on completion):** `phase-7-modals`
 ---
 ## 1. Goal & Non-Goals
 **Goal:** Add a layered modal system to the React renderer. Wire 7 modal types (SettingsSheet + 4 Export dialogs + About + Welcome + Confirm) to a single `<ModalLayer />`. Add a persisted `useSettingsStore` for user preferences. The modals are opened via the command store (Phase 6 pattern), and the modals themselves read/write settings via the new store.
 **Non-goals (Phase 7):**
 - Implement the actual export pipelines (PDF/DOCX/HTML/PNG generation) — those are main-process concerns, already implemented. Phase 7 only adds the renderer-side dialog UI.
 - Real plugin system — the Plugins tab is a placeholder ("Coming soon").
 - Toast notifications — Phase 8.
 - Advanced tools (Zen mode, REPL, ASCII/Table generators, Print preview) — Phase 9.
 ---
 ## 2. Architecture
 ### 2.1 Modal state lives in `useAppStore` (extended, not new store)
 `useAppStore` is already the "global UI" store (sidebar, preview, zen, paneSizes). It's the right home for modal state because:
 - It's already mounted.
 - It's already persisted (via `zustand persist` with `partialize` for pane sizes).
 - A separate `useUIStore` would be YAGNI.
 **Add to `AppState`:**
 - `modal: ModalState` (discriminated union — see §2.2)
 - `openModal: <K extends ModalKind>(kind: K, props?: ModalPropsFor<K>) => void`
 - `closeModal: () => void`
 **Persistence:** `modal` is **runtime-only**, like `userBindings` in `useCommandStore`. We add it to the `partialize` function so only the persisted fields (`sidebarVisible`, `previewVisible`, `zenMode`, `paneSizes`) are saved. The modal kind never needs to survive a reload.
 ### 2.2 Discriminated-union modal shape
 ```ts
 export type ModalState =
  | { kind: null }
  | { kind: 'export-pdf';     props: { sourcePath: string } }
  | { kind: 'export-docx';    props: { sourcePath: string } }
  | { kind: 'export-html';    props: { sourcePath: string } }
  | { kind: 'export-batch';   props: { sourcePaths: string[] } }
  | { kind: 'settings' }
  | { kind: 'about' }
  | { kind: 'welcome' }
  | { kind: 'confirm';        props: ConfirmProps };
 export interface ConfirmProps {
  title: string;
  body: string;
  confirmLabel?: string;       // default "Confirm"
  cancelLabel?: string;        // default "Cancel"
  destructive?: boolean;       // switches confirm button to red variant
  onConfirm: () => void | Promise<void>;
  onCancel?: () => void;
 }
 ```
 **Why a discriminated union:** every component that opens a modal must pass the right `props` shape for the `kind` — TypeScript catches mismatches at compile time. A generic `{ open: boolean, type: string }` shape would defer the error to runtime.
 ### 2.3 Single `<ModalLayer />`
 Mounted at the bottom of `App.tsx`. Reads `modal.kind` from `useAppStore`, renders the matching component (or `null`). Each child modal calls `closeModal()` on dismiss.
 ```tsx
 // src/renderer/components/modals/ModalLayer.tsx (sketch)
 export function ModalLayer() {
  const modal = useAppStore((s) => s.modal);
  switch (modal.kind) {
    case null: return null;
    case 'export-pdf':   return <ExportPdfDialog {...modal.props} />;
    // ... etc
  }
 }
 ```
 `<ModalLayer />` ensures only one modal is visible at a time (the store only holds one). This is correct for v1 — no need for stacking/replacement transitions in Phase 7.
 ### 2.4 Settings store (new, separate)
 A new `useSettingsStore` for user preferences. **Why separate from `useAppStore`:** settings is a different lifecycle. `useAppStore` is "current view configuration"; `useSettingsStore` is "user preferences that survive across sessions and are read by many features". Same precedent as `useFileStore` (file tree state) being separate from `useAppStore` (UI chrome state).
 **Persistence:** `zustand persist` with `partialize` to serialize only the leaf settings (matching the pattern in `useFileStore` and `useCommandStore`).
 ```ts
 interface SettingsState {
  // Editor
  fontSize: number;            // 12-20, default 14
  tabSize: number;             // 2 | 4 | 8, default 4
  lineNumbers: boolean;        // default true
  wordWrap: boolean;           // default true
  minimap: boolean;            // default true
  // Theme
  theme: 'light' | 'dark' | 'auto';  // default 'auto'
  accentColor: 'brand' | 'blue' | 'green' | 'purple' | 'orange';  // default 'brand'
  fontFamily: 'system' | 'jetbrains' | 'fira';  // default 'system'
  // Export
  pdfFormat: 'letter' | 'a4' | 'legal';  // default 'a4'
  pdfMargins: 'normal' | 'narrow' | 'wide';  // default 'normal'
  pdfEmbedFonts: boolean;       // default true
  docxTemplate: 'standard' | 'minimal' | 'modern';  // default 'standard'
  htmlHighlightStyle: 'github' | 'monokai' | 'nord' | 'none';  // default 'github'
  // ASCII table formatting — applies to all 3 single-file export formats
  renderTablesAsAscii: boolean;  // default false
  // First-launch / Welcome
  welcomeDismissed: boolean;    // default false
  // Actions
  setSetting: <K extends keyof Omit<SettingsState, ...>>(...);
  resetToDefaults: () => void;
 }
 ```
 **Template-based exports** (per user request): `docxTemplate` is one of `'standard' | 'minimal' | 'modern'`. The export dialog shows a Select with the available templates. The IPC layer (`ipc.export.docx`) already accepts a `template` field; Phase 7 just exposes it. The main process maps these template names to actual `.docx` template files bundled with the app.
 **ASCII table formatting** (per user request): `renderTablesAsAscii` is a toggle in the Settings sheet (Export tab) and in each of the 3 single-file export dialogs as an inline checkbox override. When true, the markdown AST's table nodes are converted to fixed-width monospace text (using a small `lib/ascii-table.ts` helper) *before* the export pipeline sees them. The preview pane is unaffected — this is export-time only.
 ### 2.5 WelcomeDialog trigger logic
 A small `useEffect` in `App.tsx`:
 ```ts
 useEffect(() => {
  if (!useSettingsStore.getState().welcomeDismissed) {
    useAppStore.getState().openModal('welcome');
  }
 }, []);  // run once on mount
 ```
 The Help menu registers a `help.welcome` command that simply calls `openModal('welcome')` — does NOT reset the `welcomeDismissed` flag. (Decision in §2.4 of the brainstorming.)
 ### 2.6 Commands trigger modals
 The command store (Phase 6) gets new commands. Registered in `src/renderer/lib/commands/register-menu-commands.ts`:
 | Command ID       | Handler                                              |
 |------------------|------------------------------------------------------|
 | `file.exportPdf`     | `openModal('export-pdf', { sourcePath: activePath })`  |
 | `file.exportDocx`    | `openModal('export-docx', { sourcePath: activePath })` |
 | `file.exportHtml`    | `openModal('export-html', { sourcePath: activePath })` |
 | `file.exportBatch`   | `openModal('export-batch', { sourcePaths: openFiles })` |
 | `settings.open`      | `openModal('settings')`                                  |
 | `help.welcome`       | `openModal('welcome')`                                   |
 | `help.about`         | `openModal('about')`                                     |
 | `file.confirmClose`  | opens confirm dialog before closing a dirty tab        |
 | `app.quit`           | opens confirm if dirty tabs exist, else quits          |
 `settings.open` and `help.about` also get buttons in `AppHeader` (already partly done in Phase 6 — we just add new icons and wire to the new commands).
 ---
 ## 3. File Map
 ### 3.1 shadcn primitives (manually created, per the shadcn-CLI-blocked memory)
 Created in `src/renderer/components/ui/`:
 - `dialog.tsx`         — Radix Dialog wrapper with motion preset
 - `sheet.tsx`          — Radix Dialog (side variant) for SettingsSheet
 - `tabs.tsx`           — Radix Tabs for the 5-tab SettingsSheet
 - `input.tsx`          — text input
 - `textarea.tsx`       — multi-line input (for confirm body, welcome copy)
 - `select.tsx`         — Radix Select for theme/font/template pickers
 - `switch.tsx`         — Radix Switch for boolean settings
 - `checkbox.tsx`       — Radix Checkbox for "don't show again" toggles
 - `slider.tsx`         — Radix Slider for fontSize
 - `label.tsx`          — Radix Label (always pair with form fields)
 - `form.tsx`           — react-hook-form glue components (FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage)
 - `radio-group.tsx`    — Radix RadioGroup for accent color / template
 ### 3.2 Modals (`src/renderer/components/modals/`)
 - `ModalLayer.tsx`               — root, mounted by `App.tsx`
 - `ExportPdfDialog.tsx`          — PDF options (format, margins, embed fonts, ascii tables)
 - `ExportDocxDialog.tsx`         — DOCX options (template picker: standard/minimal/modern, ascii tables)
 - `ExportHtmlDialog.tsx`         — HTML options (standalone, highlight style, ascii tables)
 - `ExportBatchDialog.tsx`        — batch queue (format, concurrency, file list)
 - `SettingsSheet.tsx`            — 5-tab sheet (side="right", 480px wide)
  - `EditorSettings.tsx`         — font size, tab size, line numbers, word wrap, minimap
  - `ThemeSettings.tsx`          — light/dark/auto, accent color, font family
  - `ExportSettings.tsx`         — pdf format, margins, embed fonts, docx template, html highlight, ascii tables
  - `PluginsSettings.tsx`        — "Coming soon" placeholder
  - `AboutSettings.tsx`          — app version, links, acknowledgements
 - `AboutDialog.tsx`              — simple read-only dialog with version + GitHub link
 - `WelcomeDialog.tsx`            — first-launch dialog with quick-start cards
 - `ConfirmDialog.tsx`            — generic confirmation (title, body, destructive, onConfirm)
 - `ExportDialogFooter.tsx`       — shared Cancel / Export button row used by the 4 export dialogs
 - `useExportSource.ts`           — shared hook: reads active buffer, validates, returns source string + path
 ### 3.3 Stores
 - **Modify** `src/renderer/stores/app-store.ts` — add `modal` + `openModal` + `closeModal`; update `partialize` to exclude `modal`
 - **Create** `src/renderer/stores/settings-store.ts` — new
 ### 3.4 Lib
 - **Create** `src/renderer/lib/validators.ts` — zod schemas:
  - `settingsSchema` (whole settings object)
  - `exportPdfSchema` (format, margins, embedFonts, renderTablesAsAscii)
  - `exportDocxSchema` (template, renderTablesAsAscii)
  - `exportHtmlSchema` (standalone, highlightStyle, renderTablesAsAscii)
  - `exportBatchSchema` (format, concurrency, file list)
  - `confirmPropsSchema` (for the confirm dialog)
 - **Create** `src/renderer/lib/ascii-table.ts` — `toAsciiTable(rows: string[][]): string` (the small helper that converts a 2D string array to a fixed-width ASCII table)
 - **Create** `src/renderer/lib/modal-triggers.ts` — small helpers: `useWelcomeTrigger()`, `useQuitGuard()`
 ### 3.5 Modified files
 - **Modify** `src/renderer/App.tsx` — mount `<ModalLayer />` at the bottom; add the `useWelcomeTrigger` `useEffect` for first-launch
 - **Modify** `src/renderer/lib/commands/register-menu-commands.ts` — add the 9 new commands (4 export + settings + welcome + about + confirmClose + quit)
 - **Modify** `src/renderer/components/layout/AppHeader.tsx` — add Settings (gear) and About (info) icon buttons that dispatch the new commands
 - **Modify** `src/main.js` (verify) — no changes expected; menu items already wire to `menu:action` channels that flow through `useBridgeNativeMenu`. If any new menu items need IPC channels, add them in the main process mirror.
 ### 3.6 Tests
 **Unit (`tests/unit/`):**
 - `stores/settings-store.test.ts` (5-6 tests: defaults, setSetting, resetToDefaults, persistence/partialize)
 - `stores/app-store.test.ts` extended (3 tests: openModal sets state, closeModal clears, only one modal at a time)
 - `lib/validators.test.ts` (3 tests: each schema rejects bad input)
 - `lib/ascii-table.test.ts` (3 tests: simple table, alignment, empty input)
 **Component (`tests/component/modals/`):**
 - `ExportPdfDialog.test.tsx` (4 tests: renders with default settings, submit calls ipc.export.pdf with merged opts, error renders inline, ascii-table toggle flows through)
 - `ExportDocxDialog.test.tsx` (3 tests: renders, submit includes template, ascii-table toggle)
 - `ExportHtmlDialog.test.tsx` (3 tests: renders, highlight style select, ascii-table toggle)
 - `ExportBatchDialog.test.tsx` (3 tests: renders file list, format selector, concurrency)
 - `SettingsSheet.test.tsx` (6 tests: renders 5 tabs, each tab shows correct fields, settings change persists)
 - `AboutDialog.test.tsx` (2 tests: renders version, links open external)
 - `WelcomeDialog.test.tsx` (3 tests: renders, dismiss sets welcomeDismissed, "don't show again" checked)
 - `ConfirmDialog.test.tsx` (3 tests: confirm calls onConfirm and closes, cancel calls closeModal, destructive variant)
 - `ModalLayer.test.tsx` (3 integration tests: null kind renders nothing, switching kinds replaces modal, modal unmounts on close)
 **Integration (`tests/integration/`):**
 - `phase7-modals-smoke.test.tsx` (4 tests: dispatch command opens modal, command store + settings store + IPC all wired, app.tsx mount triggers welcome on first launch, modal layer end-to-end)
 ---
 ## 4. Data Flow
 ### 4.1 Open a modal
 ```ts
 // From any command handler in register-menu-commands.ts:
 useAppStore.getState().openModal('export-pdf', { sourcePath: activePath });
 ```
 ### 4.2 The dialog reads source
 ```ts
 // ExportPdfDialog.tsx
 const { source, path } = useExportSource();
 if (!source) return <EmptySourceFallback />;
 ```
 `useExportSource` is a small hook that:
 1. Reads `useFileStore.activeTabId` + `useEditorStore.buffers`
 2. If no active buffer, prompts the user to open a file (uses confirm dialog)
 3. Returns `{ source: string, path: string } | null`
 ### 4.3 Settings change
 ```ts
 // EditorSettings.tsx — switches/inputs call setSetting
 const [fontSize, setFontSize] = useSettingsStore(s => [s.fontSize, s.setSetting]);
 // or
 setSetting('fontSize', 16);
 ```
 Editor and preview subscribe to specific slices. The `useTheme` hook from `next-themes` is augmented to read `theme: 'light' | 'dark' | 'auto'` from `useSettingsStore` (replacing the standalone next-themes default).
 ### 4.4 Export flow
 ```ts
 // ExportPdfDialog on submit:
 const settings = useSettingsStore.getState();
 const result = await ipc.export.pdf({
  inputPath: path,
  outputPath: chosenOutputPath,
  format: dialogFormat ?? settings.pdfFormat,
  margins: MARGIN_PRESETS[dialogMargins ?? settings.pdfMargins],
  embedFonts: dialogEmbed ?? settings.pdfEmbedFonts,
  renderTablesAsAscii: dialogAscii ?? settings.renderTablesAsAscii,
 });
 if (!result.ok) setError(result.error.message);
 else { closeModal(); /* toast in Phase 8 */ }
 ```
 The dialog-level overrides fall through to settings defaults when not explicitly chosen.
 ### 4.5 ASCII table transformation
 The transformation happens in the **renderer** (pre-IPC), so the main process doesn't need to know about ASCII mode:
 ```ts
 // In ExportPdfDialog before submitting:
 const finalSource = renderTablesAsAscii
  ? applyAsciiTransform(source)   // walks AST, replaces <table> blocks
  : source;
 ```
 `applyAsciiTransform` is a small function (10-20 lines) that:
 1. Parses markdown source for `|...|` table syntax via a small regex
 2. Replaces each table block with a fenced code block containing the ASCII table
 3. Returns the modified source
 (No AST walker needed — markdown tables are line-based and a regex per line + simple width calc is sufficient.)
 ### 4.6 DOCX template selection
 The dialog shows a Select with 3 options (standard, minimal, modern). The main process maps these names to bundled `.docx` template files. The IPC contract is unchanged — `DocxOptions.template: string` was already defined in `types/ipc.ts` during Phase 1.
 ### 4.7 Confirm flow
 ```ts
 // In a command handler:
 const activeTab = ...;
 if (activeTab?.dirty) {
  useAppStore.getState().openModal('confirm', {
    title: 'Discard unsaved changes?',
    body: `"${activeTab.title}" has unsaved changes. Close without saving?`,
    confirmLabel: 'Discard',
    destructive: true,
    onConfirm: () => doCloseTab(),
  });
 } else {
  doCloseTab();
 }
 ```
 ### 4.8 Welcome first-launch
 `useEffect` in `App.tsx` (run once on mount) checks `welcomeDismissed` from `useSettingsStore`. If false, calls `openModal('welcome')`. The Welcome dialog has a "Don't show again" checkbox that sets `welcomeDismissed: true` and closes.
 ---
 ## 5. Error Handling
 - **IPC errors in export dialogs:** inline error banner below the submit button. `IpcResult<T>` discriminated union makes this easy. Banner shows `result.error.message` and a "Try again" button that re-submits.
 - **Settings validation:** zod schemas in `validators.ts`. Each form field shows `aria-invalid` + red border on error. Form-level errors via react-hook-form's `formState.errors`.
 - **Confirm dialog cancel:** just calls `closeModal()`. No state mutation. Optional `onCancel` callback for "remember my choice" patterns (not used in Phase 7).
 - **Welcome "don't show again":** persists `welcomeDismissed: true`. Help menu can re-open Welcome (without resetting the flag).
 - **Settings corruption on load (bad localStorage data):** `useSettingsStore` is built with a `partialize` that also acts as a whitelist — only known fields are deserialized. Unknown fields are dropped. If a persisted value fails zod validation, fall back to defaults (logged as a warning).
 ---
 ## 6. Testing Strategy
 TDD per the established pattern (Phases 1-6). Every component test:
 - Renders with empty/default state
 - One happy-path interaction (form submit, button click)
 - One error/edge case (validation fail, IPC error, cancel)
 Store tests focus on pure logic (state transitions, persistence, partialize). Settings store test specifically verifies:
 - Defaults match schema
 - `setSetting` works for leaf keys
 - `resetToDefaults` clears to initial state
 - Persisted payload (from `partialize`) contains exactly the leaf fields
 - Hydration from a partial/corrupt payload doesn't throw
 Component tests use `render` + `userEvent`, mock `window.electronAPI` for IPC.
 ModalLayer integration test verifies:
 1. Mounting with `kind: null` renders nothing (query container, expect empty)
 2. Mounting with `kind: 'about'` renders `<AboutDialog>` (aria-label match)
 3. Switching from `kind: 'about'` to `kind: 'settings'` unmounts About, mounts Settings (verified by role/aria-label transitions)
 4. Confirm dialog calls `onConfirm` and `closeModal` on success
 ---
 ## 7. Risks & Open Questions
 **Risks:**
 - **Form library complexity.** react-hook-form + zod is powerful but adds learning curve. Mitigation: a single shared `<SettingsForm>` wrapper reduces cognitive load; export dialogs use simple `useState` (no need for the full form infra).
 - **shadcn Dialog animation jank with our motion presets.** Radix Dialog has its own `data-state` attributes for open/closed. We compose with our `modalPop` preset via `forceMount` + Motion. Need to verify no double-animation.
 - **Settings store hydration race.** If a component reads a setting on first render before hydration completes, it gets the default. For Phase 7 this is fine — defaults are sensible.
 **Open questions (deferrable):**
 - Should the "ascii table" output include alignment row separators (`+---+---+`) or just be a `| a | b |`-style table? → Decision: use the `|---|` separator form (more compact, common in plain-text email).
 - Should ExportBatchDialog be a Sheet (queue progress) or a Dialog (form)? → Decision: Dialog with a form; progress is shown inline (not a streaming queue). Phase 9 could revisit.
 - Should `welcomeDismissed` be per-user-account or per-install? → Per-install (localStorage). No multi-user concept in v1.
 ---
 ## 8. Out of Scope (deferred to later phases)
 - Phase 8: Toast notifications on export success/failure (the dialog's inline error is v1; toasts are a follow-up).
 - Phase 9: ASCII art generator (figlet) is separate from ASCII table rendering. This spec is about table formatting.
 - Phase 9: Word export uses a `.docx` template *generation* step (WordExportDialog), not the IPC `ipc.export.docx` path. Distinct.
 - Phase 10: Delete legacy `src/print-preview.js`, `src/wordTemplateExporter.js`, etc.
 ---
 ## 9. Success Criteria
 Phase 7 is complete when:
 - All listed shadcn primitives exist in `src/renderer/components/ui/` with tests
 - `useSettingsStore` is implemented, tested, and persisted
 - `useAppStore` extended with `modal` discriminated union and tested
 - All 7 modal components implemented, tested, and accessible (aria-labels, keyboard nav)
 - 4 export dialogs (PDF/DOCX/HTML/Batch) all submit through the command store and call IPC correctly
 - `ModalLayer` mounted in `App.tsx` and integrated with command triggers
 - Welcome dialog shows on first launch, dismissible, re-openable from Help menu
 - Confirm dialog used by quit-with-dirty and close-with-dirty flows
 - ASCII table rendering works (toggle in settings, override in export dialogs)
 - DOCX template picker in ExportDocxDialog submits the correct `template` field
 - `npx vite build` succeeds, `npx vitest run` shows **all tests green** (target: +50 new tests, total ~220)
 - Branch tagged `phase-7-modals` and pushed to origin
@@ -0,0 +1,250 @@
 # Phase 8 — Toasts Design
 > Companion to the parent plan: `docs/superpowers/plans/2026-06-05-react-ui-redesign.md` (Phases 8+9+10 are sketched at high level; this spec locks Phase 8's architecture, file map, and contracts so it can be planned task-by-task.)
 **Date:** 2026-06-05
 **Phase:** 8 of 10 (React + shadcn/ui UI redesign)
 **Tag (on completion):** `phase-8-toasts`
 ---
 ## 1. Goal & Non-Goals
 **Goal:** Add a toast notification layer to the React renderer using sonner (already installed). Surface user-initiated async action results (file save, file/folder open, exports) as transient toasts in the bottom-right of the window. The error banner pattern in export dialogs stays — toasts are a complementary global channel.
 **Non-goals (Phase 8):**
 - Undo/redo support (Phase 9)
 - Custom toast actions/buttons (Phase 9, if needed)
 - Persistent notification history
 - Toast queueing/throttling for rapid-fire events
 - Replacing inline error banners (they stay as per-dialog context)
 **Scope decision:** Toast on user-initiated actions only. Skip silent background operations (loadChildren, etc.) to avoid noise. 4 wire points total: save (success+error), open file/folder (error only), 4 export dialogs (success+error).
 ---
 ## 2. Architecture
 ### 2.1 Toast helpers in `lib/toast.ts`
 A thin typed layer over sonner. The helpers exist to:
 - Give us a single import surface (instead of scattering `import { toast } from 'sonner'` across the codebase)
 - Provide a place to add brand colors, formatting, or analytics later without touching call sites
 - Make mocking easier in tests (one module to mock)
 ```ts
 // src/renderer/lib/toast.ts (sketch)
 import { toast as sonnerToast } from 'sonner';
 export const toast = {
  success: (message: string) => sonnerToast.success(message),
  error: (message: string) => sonnerToast.error(message),
  info: (message: string) => sonnerToast.info(message),
  warning: (message: string) => sonnerToast.warning(message),
  promise: <T>(
    promise: Promise<T>,
    msgs: { loading: string; success: string | ((data: T) => string); error: string | ((err: unknown) => string) }
  ) => sonnerToast.promise(promise, msgs),
  dismiss: (id?: string | number) => sonnerToast.dismiss(id),
 };
 ```
 ### 2.2 `<Toaster />` mounted in App.tsx
 A canonical shadcn Toaster wrapper (manual paste per memory `shadcn-cli-blocked-manual-primitives`). Mounts alongside `<ModalLayer />`:
 ```tsx
 // src/renderer/App.tsx (sketch)
 import { Toaster } from '@/components/ui/sonner';
 function App() {
  useWelcomeTrigger();
  return (
    <>
      <AppShell />
      <ModalLayer />
      <Toaster />
    </>
  );
 }
 ```
 The Toaster uses sonner's `<Toaster />` component with:
 - `theme={resolvedTheme}` from `useTheme()` (so toasts match the user's light/dark preference)
 - `richColors` for semantic success/error/info/warning colors
 - `position="bottom-right"` (sonner default; explicit for clarity)
 - `closeButton` (so users can dismiss)
 ### 2.3 Inline wiring at 4 wire points
 **Pattern choice — inline in stores/dialogs, NOT middleware.** Matches the Phase 7 precedent of inline error banners in export dialogs. Middleware would be DRY but harder to debug and harder to control granularity (we want errors on save, but NOT on silent loadChildren).
 **Wire points:**
 1. **`useFileStore.saveActiveBuffer`** — wrap the existing logic:
   ```ts
   saveActiveBuffer: async () => {
     // ... existing logic to get buffer ...
     const writeResult = await ipc.file.write(activeTabId, buffer.content);
     if (!writeResult.ok) {
       toast.error(`Failed to save: ${writeResult.error.message}`);
       return false;
     }
     // ... existing markSaved/markTabClean ...
     toast.success(`Saved ${title}`);
     return true;
   }
   ```
 2. **`useFileStore.openFile`** — error only:
   ```ts
   openFile: async (filePath) => {
     // ... existing logic to check existing tab ...
     const result = await ipc.file.read(filePath);
     if (!result.ok) {
       toast.error(`Failed to open file: ${result.error.message}`);
       return;
     }
     // ... existing logic ...
   }
   ```
 3. **`useFileStore.openFolder`** — error only:
   ```ts
   openFolder: async (path) => {
     const result = await ipc.file.list(path);
     if (!result.ok) {
       toast.error(`Failed to open folder: ${result.error.message}`);
       return;
     }
     // ... existing logic ...
   }
   ```
 4. **4 export dialogs** — both success and error (error complements the inline banner):
   ```ts
   if (!result.ok) {
     toast.error(`Export failed: ${result.error.message}`);
     setError(result.error.message);
     setSubmitting(false);
   } else {
     toast.success(`Exported ${source.title} to ${result.data?.outputPath ?? 'file'}`);
     closeModal();
   }
   ```
 ---
 ## 3. File Map
 ### 3.1 Created files
 - `src/renderer/lib/toast.ts` — typed wrappers (re-export of sonner with our naming)
 - `src/renderer/components/ui/sonner.tsx` — canonical shadcn Toaster wrapper (manual paste)
 - `tests/unit/lib/toast.test.ts` — ~5 unit tests
 - `tests/component/ui/sonner.test.tsx` — 1 smoke test
 - `tests/integration/phase8-toasts-smoke.test.tsx` — ~4 integration tests
 ### 3.2 Modified files
 - `src/renderer/App.tsx` — mount `<Toaster />` alongside `<ModalLayer />`
 - `src/renderer/stores/file-store.ts` — add 3 toast calls (save, openFile, openFolder)
 - `src/renderer/components/modals/ExportPdfDialog.tsx` — toast on submit result
 - `src/renderer/components/modals/ExportDocxDialog.tsx` — toast on submit result
 - `src/renderer/components/modals/ExportHtmlDialog.tsx` — toast on submit result
 - `src/renderer/components/modals/ExportBatchDialog.tsx` — toast on submit result
 ---
 ## 4. Data Flow
 User action → store action OR export dialog submit → IPC call → result →
 - if error: `toast.error(message)` → sonner renders in bottom-right portal
 - if success: `toast.success(message)` → sonner renders
 - inline error banner in dialog stays as per-dialog context (NOT removed)
 Theme comes from `useTheme()` in the Toaster component, not from individual toasts. The Toaster is mounted once at the app level.
 For the 4 export dialogs: the existing inline error banner stays (it's contextual to the dialog), AND a toast is fired. This gives the user both immediate context (in the dialog) and persistent notification (toast in corner).
 For file save: ONLY a toast (no inline error UI in the editor pane — keeps the editor clean). Errors still show the toast.
 ---
 ## 5. Error Handling
 - **Toast helpers never throw.** They are thin re-exports of sonner, which handles its own error cases (e.g., render failures, missing portal target).
 - **In tests**, the `toast` module is mocked so calls don't render real toasts. Mock signature: `vi.mock('@/lib/toast', () => ({ toast: { success: vi.fn(), error: vi.fn(), ... } }))`.
 - **Theme fallback:** If `useTheme()` is loading or `resolvedTheme` is undefined, Toaster uses `'system'` as a fallback (sonner's default behavior).
 - **Sonner missing:** If for some reason sonner fails to load, the toast calls become no-ops. The user still sees inline error banners in the export dialogs.
 - **Inline error banners stay.** They are not replaced by toasts — they complement them.
 ---
 ## 6. Testing Strategy
 ### 6.1 Unit tests (`tests/unit/lib/toast.test.ts`)
 5 tests:
 - `toast.success` calls sonner `toast.success` with the message
 - `toast.error` calls sonner `toast.error` with the message
 - `toast.info` calls sonner `toast.info`
 - `toast.warning` calls sonner `toast.warning`
 - `toast.promise` forwards the promise and messages to sonner
 All tests mock the sonner module and verify the forwarded call.
 ### 6.2 Component test (`tests/component/ui/sonner.test.tsx`)
 1 smoke test: `<Toaster />` renders without crashing inside a ThemeProvider.
 ### 6.3 Integration test (`tests/integration/phase8-toasts-smoke.test.tsx`)
 ~4 tests:
 - Saving a file → `toast.success` called with `"Saved test.md"`
 - Opening a non-existent file (ipc returns error) → `toast.error` called with file path in message
 - Export success (ipc returns ok) → `toast.success` called + dialog closes
 - Export failure (ipc returns error) → `toast.error` called + inline banner shown + dialog stays open
 TDD throughout. Mocks for `ipc.*` and `lib/toast`.
 ### 6.4 Existing tests must still pass
 - All 243 tests from Phase 7 must remain green
 - Export dialog tests will need updates to verify the new toast calls (the dialog tests currently check for inline banner; they should ALSO verify the toast call)
 ---
 ## 7. Risks & Open Questions
 **Risks:**
 - **Sonner theme switching:** If `useTheme()` returns `'system'` and the OS preference changes mid-session, sonner will re-render. This is the correct behavior; just confirm in test.
 - **Toast spam:** If user holds Cmd+S, the save could fire many times. Sonner deduplicates by default for similar messages? → Decision: rely on sonner's default behavior. If spam becomes an issue, add a `toast.dismiss()` debounce in v2.
 **Open questions (deferrable):**
 - Should we add a custom toast for "undo last close" (Phase 9's undo feature)? → Decision: out of scope for Phase 8. Phase 9 will handle undo toasts.
 - Should the export dialog inline banner be removed once toasts are wired? → Decision: NO — keep both. The inline banner is contextual to the dialog; the toast is global. They serve different purposes.
 ---
 ## 8. Out of Scope (deferred to later phases)
 - Phase 9: Undo toasts ("Tab closed — Undo" with action button)
 - Phase 9: Long-running operation progress toasts (e.g., batch export queue)
 - Phase 9: Custom toast variants for advanced tools (ASCII generator, table generator)
 - Phase 10: Cleanup of inline error banners (will evaluate in Phase 10 if redundant)
 ---
 ## 9. Success Criteria
 Phase 8 is complete when:
 - `lib/toast.ts` exists with typed wrappers
 - `<Toaster />` is mounted in `App.tsx` and renders toasts
 - `useFileStore.saveActiveBuffer` calls `toast.success`/`toast.error` on result
 - `useFileStore.openFile` calls `toast.error` on failure
 - `useFileStore.openFolder` calls `toast.error` on failure
 - 4 export dialogs call `toast.success`/`toast.error` on result
 - All tests pass: ~+10 new tests, total ~253
 - `npx vite build` succeeds
 - Branch tagged `phase-8-toasts` and pushed to origin
@@ -0,0 +1,303 @@
 # Phase 9 — Advanced Tools Design
 > Companion to the parent plan: `docs/superpowers/plans/2026-06-05-react-ui-redesign.md` (Phase 9 is sketched at high level; this spec locks architecture, file map, and contracts so it can be planned task-by-task.)
 **Date:** 2026-06-05
 **Phase:** 9 of 10 (React + shadcn/ui UI redesign)
 **Tag (on completion):** `phase-9-advanced-tools`
 ---
 ## 1. Goal & Non-Goals
 **Goal:** Add 10 advanced tools to the React renderer. Group 1: Standalone dialogs (ASCII generator, Table generator, Word export, Find-in-files). Group 2: Global overlays (Zen mode, REPL, Print preview). Group 3: Editor/sidebar integrations (Minimap, Breadcrumbs-with-symbols, Git status). All triggered via the Phase 6 command store.
 **Non-goals (Phase 9):**
 - True undo/redo stack (still not in scope)
 - Snippet/template library
 - Custom REPL with full JS eval (we chose markdown snippet preview for safety)
 - Custom diff/merge UI (just shows git status, no in-app diffing)
 - Plug-in extensions
 - Multi-cursor editing
 - LSP / language server integration
 **Decision summary (from brainstorming):**
 - REPL = **markdown snippet preview** (no JS eval — safe in renderer)
 - Word export = **`.docx` via `docx` lib in renderer**, with both Standard and Custom .dotx template modes
 - Find-in-files = **recursive search with result navigation** (new IPC, regex support)
 ---
 ## 2. Architecture
 ### 2.1 Three mount strategies
 | Category | Mount | Examples |
 |---|---|---|
 | **Dialogs** | `<ModalLayer />` (Phase 7 pattern) | ASCII gen, Table gen, Word export, Find-in-files |
 | **Global overlays** | Top-level in `App.tsx` (like `<Toaster />`) | Zen mode, REPL panel, Print preview |
 | **Editor/sidebar integrations** | Extend existing components | Minimap, Breadcrumbs, Git status |
 The ModalLayer is the dispatcher for dialogs. The global overlays are mounted directly in `App.tsx` because they need to participate in the top-level layout (full-window, or pinned to the bottom).
 ### 2.2 ModalState union extension
 The Phase 7 `ModalState` discriminated union (9 kinds) gets 4 new kinds for the new dialogs:
 ```ts
 export type ModalState =
  | { kind: null }
  | { kind: 'export-pdf'; props: { sourcePath: string } }
  | { kind: 'export-docx'; props: { sourcePath: string } }
  | { kind: 'export-html'; props: { sourcePath: string } }
  | { kind: 'export-batch'; props: { sourcePaths: string[] } }
  | { kind: 'export-word'; props: { sourcePath: string } }   // NEW
  | { kind: 'ascii-generator' }                                  // NEW
  | { kind: 'table-generator' }                                  // NEW
  | { kind: 'find-in-files' }                                    // NEW
  | { kind: 'settings' }
  | { kind: 'about' }
  | { kind: 'welcome' }
  | { kind: 'confirm'; props: ConfirmProps };
 ```
 Three of the four new kinds (ascii, table, find-in-files) take no props — they read from the active buffer via `useExportSource` (for ascii/table) or from `useFileStore.rootPath` (for find-in-files). `export-word` takes `sourcePath` like the other export dialogs.
 ### 2.3 New commands in command store
 | Command ID | Trigger | Opens |
 |---|---|---|
 | `tools.ascii` | new | `AsciiGeneratorDialog` |
 | `tools.table` | new | `TableGeneratorDialog` |
 | `tools.exportWord` | new | `WordExportDialog` |
 | `tools.findInFiles` | new | `FindInFilesDialog` |
 | `tools.repl` | new | toggles REPL panel |
 | `view.zenMode` | existing (Phase 6) | toggles Zen mode overlay |
 | `file.print` | new | opens `PrintPreview` overlay |
 | `git.refresh` | new | re-fetches git status |
 All registered in `src/renderer/lib/commands/register-menu-commands.ts`.
 ### 2.4 New IPC surface
 ```ts
 // src/renderer/lib/ipc.ts (additions)
 ipc.file.search({ rootPath, query, isRegex, caseSensitive }: {
  rootPath: string;
  query: string;
  isRegex: boolean;
  caseSensitive: boolean;
 }): Promise<IpcResult<Array<{ filePath: string; line: number; content: string }>>>;
 ipc.file.gitStatus({ rootPath }: { rootPath: string }): Promise<IpcResult<Array<{ filePath: string; status: 'modified' | 'added' | 'deleted' | 'untracked' }>>>;
 ipc.file.print({ html }: { html: string }): Promise<IpcResult<void>>;
 ipc.file.writeBuffer({ path, buffer }: { path: string; buffer: Uint8Array }): Promise<IpcResult<void>>;
 ```
 The main process counterparts are added to `src/main.js` (or a new `src/main/files-search.js`, etc.). For Phase 9, the spec covers the renderer-side design; main-process IPC handlers are assumed to follow the same `ipcMain.handle` pattern as the existing handlers.
 ### 2.5 Settings additions (`useSettingsStore`)
 ```ts
 // zod schema additions:
 docxCustomTemplatePath: z.string().nullable().default(null),  // path to user .dotx file
 replOpen: z.boolean().default(false),                         // REPL panel visibility
 breadcrumbSymbols: z.boolean().default(true),                  // breadcrumbs show code symbols
 // minimap already exists from Phase 7 (useSettingsStore.minimap: z.boolean().default(true))
 ```
 The `minimap` setting from Phase 7 is now wired (not just stored).
 ---
 ## 3. File Map
 ### 3.1 Created files
 **Dialogs (in `src/renderer/components/modals/`):**
 - `AsciiGeneratorDialog.tsx` — input textarea, font select, output preview with copy button
 - `TableGeneratorDialog.tsx` — rows × cols inputs, header checkbox, output preview
 - `WordExportDialog.tsx` — template select (Standard / Custom .dotx), options, preview, export
 - `FindInFilesDialog.tsx` — query input, regex/case toggles, results list with click-to-navigate
 **Global overlays (in `src/renderer/components/tools/`):**
 - `ReplPanel.tsx` — bottom-pinned, textarea + rendered preview
 - `PrintPreview.tsx` — full-window print preview
 **Editor/sidebar integrations:**
 - `src/renderer/components/layout/ZenMode.tsx` — wraps/controls the editor in zen mode (or modify `AppShell.tsx` to hide chrome)
 - `src/renderer/components/sidebar/GitStatusPanel.tsx` — file list with status badges
 **Lib:**
 - `src/renderer/lib/docx-export.ts` — renderer-side `docx` lib integration (markdown → Blob)
 - `src/renderer/hooks/use-zen-mode.ts` — small hook that reads `useSettingsStore.zenMode`
 **Modifications:**
 - `src/renderer/App.tsx` — mount `<ReplPanel />` and `<PrintPreview />` alongside `<ModalLayer />` and `<Toaster />`
 - `src/renderer/components/layout/AppShell.tsx` — when `zenMode === true`, hide all chrome except the editor
 - `src/renderer/components/editor/CodeMirrorEditor.tsx` — add `@codemirror/minimap` (or `@replit/codemirror-minimap`) when `useSettingsStore.minimap` is true
 - `src/renderer/components/layout/Breadcrumb.tsx` — extend to show symbols (headings, code blocks) using `@codemirror/langs-data` or a simple markdown AST walk
 - `src/renderer/components/sidebar/Sidebar.tsx` — add a "Git" tab to the existing tab list
 - `src/renderer/stores/settings-store.ts` — add 3 new fields
 - `src/renderer/lib/validators.ts` — add 3 new fields to `settingsSchema`
 - `src/renderer/lib/ipc.ts` — add 4 new IPC methods
 - `src/renderer/lib/commands/register-menu-commands.ts` — add 8 new commands
 - `src/main.js` (or split files) — add 4 main-process IPC handlers
 **Tests:**
 - `tests/component/tools/ReplPanel.test.tsx` — smoke test
 - `tests/component/tools/PrintPreview.test.tsx` — smoke test
 - `tests/component/modals/AsciiGeneratorDialog.test.tsx` — 3 tests
 - `tests/component/modals/TableGeneratorDialog.test.tsx` — 3 tests
 - `tests/component/modals/WordExportDialog.test.tsx` — 4 tests
 - `tests/component/modals/FindInFilesDialog.test.tsx` — 4 tests
 - `tests/component/sidebar/GitStatusPanel.test.tsx` — 3 tests
 - `tests/component/layout/Breadcrumb.test.tsx` — extend with symbols test
 - `tests/integration/phase9-tools-smoke.test.tsx` — 6 tests (one per command-triggered tool)
 ---
 ## 4. Data Flow
 ### 4.1 Word export (most complex)
 1. User triggers `tools.exportWord` → `registerMenuCommands` opens the export-word modal via `useAppStore.openModal('export-word', { sourcePath: activeTabId })`
 2. **Wait** — we need a new modal kind `export-word` in the `ModalState` union. Add it.
 3. `WordExportDialog` (mounted by ModalLayer) shows:
   - Template select: "Standard (bundled)" or "Custom .dotx (your file)" — pre-populated with `useSettingsStore.docxCustomTemplatePath`
   - "Choose custom template..." button (file picker, saves to settings)
   - Options: embed images (checkbox), include front matter (checkbox)
   - Preview area: shows the generated docx structure (sizes, table of contents)
 4. On submit:
   - Renderer calls `lib/docx-export.ts#generateDocx(source, templatePath, options)` which uses the `docx` lib
   - The lib takes a `Document` AST and produces a Blob
   - ASCII tables are converted to monospace `<w:r>` runs (using `applyAsciiTransform` from Phase 7)
   - Images are extracted from markdown and embedded as base64
   - If a custom .dotx path is set, the renderer reads it via `ipc.file.read` and applies its styles (via `docx` lib's style support)
   - User picks output path via `ipc.app.showSaveDialog`
   - Writes Blob via `ipc.file.writeBuffer` (new)
   - Toast success/failure
 ### 4.2 Find-in-files
 1. User triggers `tools.findInFiles` → ModalLayer opens `FindInFilesDialog`
 2. User types query, picks regex/literal, case-sensitive toggle
 3. On submit: `ipc.file.search({ rootPath: useFileStore.rootPath, query, isRegex, caseSensitive })`
 4. Backend walks the disk recursively, applies regex/literal match, returns `Array<{ filePath, line, content }>`
 5. Dialog shows result list (file:line:content, clickable)
 6. Click a result:
   - `useFileStore.openFile(filePath)` if not already open
   - Set the cursor in the editor to the matched line
 7. Close the dialog
 ### 4.3 REPL (markdown snippet preview)
 1. User triggers `tools.repl` → toggles `useSettingsStore.replOpen` (or a new dedicated `useReplStore`)
 2. `ReplPanel` (mounted in App.tsx) is visible when `replOpen === true`
 3. The panel has:
   - Top half: textarea (user types/pastes markdown)
   - Bottom half: rendered preview (uses `lib/markdown.ts` from Phase 1 + DOMPurify)
 4. Updates are debounced (300ms) for the preview
 5. Pure renderer-side, no IPC
 ### 4.4 Zen mode
 1. User triggers `view.zenMode` → toggles `useSettingsStore.zenMode`
 2. `AppShell` reads `zenMode` from store; when true, hides all chrome (header, tabs, toolbar, breadcrumb, status bar, sidebar)
 3. Editor goes fullscreen
 4. Pressing Esc exits zen mode (keydown listener in `use-zen-mode` hook)
 ### 4.5 Print preview
 1. User triggers `file.print` → opens `PrintPreview` (full-window overlay)
 2. The preview renders the current buffer's content as it would appear in print
 3. Two buttons: "Print" (calls `ipc.file.print({ html })` which opens native print dialog) and "Close"
 ### 4.6 Minimap
 1. `useSettingsStore.minimap` (existing setting) is read by `CodeMirrorEditor`
 2. When true, the editor's extension includes `@replit/codemirror-minimap` (or a simpler custom implementation)
 3. The minimap shows a shrunk version of the document on the right side of the editor
 4. Toggling the setting adds/removes the extension dynamically
 ### 4.7 Breadcrumbs-with-symbols
 1. The current `Breadcrumb` shows the file path. Extend it to also show markdown symbols (headings, code blocks)
 2. Use a simple AST walk of the current buffer to extract heading levels
 3. Show as a path-like navigation: `file.md > H1: Title > H2: Section > #line`
 4. The `useSettingsStore.breadcrumbSymbols` toggle (default true) controls whether symbols are shown
 ### 4.8 Git status
 1. On sidebar Git tab open, fetch `ipc.file.gitStatus({ rootPath: useFileStore.rootPath })`
 2. The main process runs `git status --porcelain` (or equivalent) and returns the list
 3. Show file list with status badges (M, A, D, ?)
 4. Click a file opens it via `useFileStore.openFile`
 5. `git.refresh` re-fetches
 ---
 ## 5. Error Handling
 - **Word export failures:** `lib/docx-export.ts` catches `docx` lib errors → toast.error
 - **Word export missing .dotx:** if custom template path is set but file doesn't exist, show inline banner in the dialog
 - **Find-in-files failures:** if `ipc.file.search` throws (regex syntax error, IO error), show inline banner in the dialog
 - **REPL:** no IPC, no error handling needed
 - **Git status:** if folder isn't a git repo, return empty array. Panel shows "Not a git repository" message
 - **Print:** if `ipc.file.print` fails (no printer, user cancels), toast.error or silent close
 - **Minimap, Breadcrumbs:** renderer-side, no errors
 ---
 ## 6. Testing Strategy
 - **Unit tests:** `lib/docx-export.ts` (markdown → docx conversion, ASCII handling), `lib/ascii-table.ts` (already tested)
 - **Component tests:** 1-2 smoke tests per new component
 - **Integration test:** `phase9-tools-smoke.test.tsx` covering the 6 command-triggered tools (dispatch opens correct modal/overlay)
 - **Editor integrations:** minimap toggle, breadcrumbs render with symbols, git status panel render
 - **Target: +30-40 new tests**, total ~290
 ---
 ## 7. Risks & Open Questions
 **Risks:**
 - **`docx` lib bundle size (~500KB).** Acceptable for a desktop app but worth noting. Lazy-load if it becomes a concern.
 - **Word export custom template parsing** — the `.dotx` format is a zip with XML inside. The `docx` lib may not fully support reading existing templates. v1 may need a simpler "styles only" extraction.
 - **Find-in-files regex compilation** — invalid regex would throw. Validate on the renderer before calling IPC.
 - **Minimap performance** — for large files, the minimap can slow down scrolling. CodeMirror's built-in minimap has performance options to configure.
 **Open questions (deferrable):**
 - **REPL persistence** — should the textarea content survive across modal close/reopen? → Decision: NO for v1. Keep simple.
 - **Git status auto-refresh** — should it auto-refresh every N seconds? → Decision: NO for v1. Manual via `git.refresh` command.
 - **Find-in-files result count limit** — what if there are 10,000 matches? → Decision: limit to 500 results for v1, show "X more matches" message.
 ---
 ## 8. Out of Scope (deferred to Phase 10 or later)
 - Custom undo/redo (still not in scope)
 - Snippet/template library
 - Multi-cursor editing
 - LSP / language server
 - Phase 10 will delete legacy files including the old `src/print-preview.js`, `src/wordTemplateExporter.js`, `src/welcome.js`, `src/zen-mode.js`, etc.
 ---
 ## 9. Success Criteria
 Phase 9 is complete when:
 - All 10 features implemented and accessible via the command store
 - `lib/docx-export.ts` generates valid `.docx` files
 - Find-in-files returns results from a recursive disk walk
 - REPL renders markdown snippet previews
 - Zen mode hides all chrome and Esc exits
 - Print preview opens native print dialog
 - Minimap appears when `useSettingsStore.minimap` is true
 - Breadcrumbs show symbols by default
 - Git status panel shows modified/added/deleted/untracked files
 - ~+30-40 new tests, total ~290
 - `npx vite build` succeeds
 - Branch tagged `phase-9-advanced-tools` and pushed to origin
@@ -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
@@ -0,0 +1,333 @@
 # Phase 10 — Polish + Delete Legacy Design
 > Companion to the parent plan: `docs/superpowers/plans/2026-06-05-react-ui-redesign.md` (Phase 10 is sketched at high level; this spec locks architecture, file map, deletion targets, and version strategy.)
 **Date:** 2026-06-06
 **Phase:** 10 of 10 (React + shadcn/ui UI redesign) — **FINAL**
 **Tag (on completion):** `v5.0.0` (the first release tag, all prior phases were `phase-N-*` working tags)
 ---
 ## 1. Goal & Non-Goals
 **Goal:** Finalize the React UI redesign. Decompose the legacy 146KB `src/main.js` into a feature-first modular structure under `src/main/`, remove the legacy vanilla-JS renderer and all dead IPC bridges, then ship **v5.0.0** with a CHANGELOG.
 **Non-goals (Phase 10):**
 - Adding new features (Phases 1-9 shipped all of them)
 - A full main-process test suite (the existing main process is largely untested; adding tests is Phase 11+)
 - Backwards compat shims for the legacy renderer
 - Renderer-side refactor (already done)
 - Migrating the renderer build pipeline further (vite configs are in place)
 **Success criteria:**
 - `src/main.js` is gone; `src/main/index.js` is the new entrypoint
 - `package.json#main` points to `src/main/index.js`
 - All 12 legacy renderer files are deleted
 - All 9 dead IPC channels are removed from `preload.js` and `main.js`
 - `src/index.html` is reduced to ~50 lines (just the Vite bootstrap)
 - `package.json#version` is `5.0.0`
 - `CHANGELOG.md` exists in Keep a Changelog 1.1.0 format
 - `git grep -E "renderer\.js|command-palette|print-preview|welcome\.js|zen-mode|wordTemplate|ascii-generator|table-generator|styles\.css"` returns zero results
 - All 305 tests still pass
 - `npx vite build --config vite.renderer.config.ts` succeeds
 - `npx electron .` launches and main window renders
 - Tag `v5.0.0` pushed to origin
 ---
 ## 2. Target Architecture
 ### 2.1 `src/main/` (feature-first decomposition)
 ```
 src/main/
 ├── index.js              # entrypoint: bootstraps store, app, window, ipc
 ├── store.js              # electron-store wrapper (preferences + wordTemplatePath)
 ├── ipc.js                # ipcMain.handle registration (composes from modules)
 ├── files/
 │   ├── index.js          # file ops facade (read/write/list/pickFolder/pickFile)
 │   ├── search.js         # recursive regex search (used by find-in-files)
 │   ├── git.js            # git status porcelain parser
 │   └── binary.js         # writeBuffer helper (Uint8Array → file)
 ├── menu/
 │   ├── index.js          # buildMenu() — composes the app menu
 │   └── items.js          # individual menu items (File, Edit, View, etc.)
 ├── window/
 │   ├── index.js          # createMainWindow ONLY (createAsciiWindow/createTableWindow are DEAD)
 │   └── state.js          # window state persistence
 ├── word-template/
 │   ├── index.js          # WordTemplateExporter facade
 │   ├── parser.js         # .dotx parsing
 │   ├── converter.js      # markdown → docx
 │   └── apply.js          # apply template styles to converted docx
 └── utils/
    ├── paths.js          # path helpers
    ├── logger.js         # structured logging
    └── download.js       # tool downloader
 ```
 **Module rules:**
 - Each file has one clear responsibility (no god files; CLAUDE.md says >300 lines is the cap)
 - `index.js` is the public face of a folder; deeper files are private
 - `src/main/index.js` (top-level) wires everything together
 - Cross-folder imports go through `index.js`, not directly to internals
 ### 2.2 Entry point change
 **Before:**
 ```json
 // package.json
 "main": "src/main.js"
 ```
 **After:**
 ```json
 // package.json
 "main": "src/main/index.js"
 ```
 The new `src/main/index.js` runs the same `app.whenReady().then(...)` flow that the current `src/main.js` does, but composes the decomposed modules.
 ### 2.3 What becomes dead code (removed during decomposition)
 When the legacy renderer files are deleted, these main-process functions become orphaned and are removed too:
 | Function | File | Why dead |
 |---|---|---|
 | `createAsciiWindow()` | `src/main/window/index.js` | Loads deleted `src/ascii-generator.html` |
 | `createTableWindow()` | `src/main/window/index.js` | Loads deleted `src/table-generator.html` |
 | `ipcMain.on('open-ascii-generator', ...)` | `src/main/index.js` (after decomposition) | Replaced by React `<AsciiGeneratorDialog>` |
 | `ipcMain.on('open-table-generator', ...)` | `src/main/index.js` (after decomposition) | Replaced by React `<TableGeneratorDialog>` |
 | `webContents.send('print-preview')` | `src/main/menu/items.js` | Replaced by React `<PrintPreview>` |
 | `webContents.send('print-preview-styled')` | `src/main/menu/items.js` | Replaced by React `<PrintPreview>` |
 | `webContents.send('toggle-command-palette')` | `src/main/menu/items.js` | Replaced by `useCommandStore` |
 | `require('./wordTemplateExporter')` | `src/main/index.js` (after decomposition) | Replaced by `src/main/word-template/` + renderer-side `lib/docx-export.ts` |
 ---
 ## 3. Legacy Deletion Map
 ### 3.1 Files to delete from `src/` (12 files, ~14,426 lines)
 | File | Size | Lines | Replaced by |
 |---|---|---|---|
 | `src/renderer.js` | 213KB | 5319 | `src/renderer/` (Phases 1-9) |
 | `src/styles.css` | 74KB | 3723 | `src/renderer/index.css` + Tailwind |
 | `src/styles-modern.css` | 71KB | 2625 | Tailwind + shadcn/ui |
 | `src/styles-concreteinfo.css` | 21KB | 969 | Tailwind theme tokens |
 | `src/styles-sidebar.css` | 9.7KB | 304 | `<Sidebar>` component |
 | `src/styles-zen.css` | 2.1KB | 102 | Zen mode in AppShell |
 | `src/styles-welcome.css` | 2.2KB | 24 | Welcome dialog |
 | `src/fonts.css` | 1.8KB | (imported elsewhere) | Tailwind font config |
 | `src/command-palette.js` | (small) | 109 | `useCommandStore` |
 | `src/print-preview.js` | (small) | 138 | `<PrintPreview>` |
 | `src/welcome.js` | (small) | 78 | `<Welcome>` modal |
 | `src/zen-mode.js` | (small) | 292 | `use-zen-mode` hook + AppShell |
 | `src/wordTemplateExporter.js` | (small) | 743 | `src/main/word-template/` + renderer `lib/docx-export.ts` |
 | `src/ascii-generator.html` | 34KB | (HTML) | `<AsciiGeneratorDialog>` |
 | `src/table-generator.html` | 18KB | (HTML) | `<TableGeneratorDialog>` |
 | `src/index.html` | 103KB | 1667 | `src/renderer/index.html` (already exists, Vite root) |
 **Total: 13 files = ~16,093 lines / ~548KB**
 `src/renderer/index.html` (the live Vite template) is NOT deleted.
 ### 3.2 Dead IPC channels to remove from `src/preload.js`
 - `toggle-command-palette` (line 238)
 - `open-ascii-generator` (line 89)
 - `open-table-generator` (line 92)
 - `print-preview` (line 173)
 - `print-preview-styled` (line 174)
 - `show-table-generator` (line 180)
 - `show-ascii-generator-window` (line 217)
 - `show-ascii-generator` (line 218)
 - `show-table-generator-window` (line 221)
 And from the exposed API surface:
 - `openAscii: () => ipcRenderer.send('open-ascii-generator')` (line 445)
 - `openTable: () => ipcRenderer.send('open-table-generator')` (line 446)
 **9 channel names + 2 API entries to remove.**
 ### 3.3 Legacy references in `src/index.html` (16 places) — **the LEGACY file at project root, 1667 lines**
 - `<link rel="stylesheet" href="styles.css">` (line ~6)
 - `<link rel="stylesheet" href="styles-welcome.css">` (line ~7)
 - `<div id="print-preview-overlay" class="modal hidden" ...>` block (~10 lines)
 - `<div class="command-palette-overlay hidden" id="command-palette-overlay">` block (~5 lines)
 - `<script src="renderer.js"></script>` (final script tag)
 **All of these are removed by deleting the file `src/index.html` entirely.**
 The CURRENT live renderer template is **`src/renderer/index.html`** (already correct: minimal, CSP, Plus Jakarta Sans font, `<script type="module" src="./main.tsx">`). This file is **NOT touched** in Phase 10. Vite's `root` is set to `src/renderer/` in `vite.renderer.config.ts`, so `src/renderer/index.html` is the HTML template Vite uses. The `src/index.html` at the project root is an orphan from the pre-Vite era.
 **Verification:** after deleting `src/index.html`, the renderer build still works because Vite doesn't look at the project root — it uses `src/renderer/index.html`.
 ### 3.4 Main process rewiring
 - Remove `require('./wordTemplateExporter')` from main entrypoint
 - Remove `webContents.send('print-preview*')` and `webContents.send('toggle-command-palette')` from menu items
 - Remove `ipcMain.on('open-ascii-generator', ...)` and `ipcMain.on('open-table-generator', ...)` handlers
 - Remove `asciiGeneratorWindow` and `tableGeneratorWindow` global state (and any references to `loadFile(...ascii-generator.html)` / `loadFile(...table-generator.html)`)
 ---
 ## 4. `src/index.html` — DELETE (not rewrite)
 The current `src/index.html` is 1667 lines of legacy markup and is **DELETED** (not rewritten). The renderer is already correctly served by `src/renderer/index.html` (the Vite root). Deleting the legacy root-level `src/index.html` is the action — no replacement file is needed.
 `src/renderer/index.html` (already correct) is NOT modified:
 ```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="default-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:..." rel="stylesheet">
 </head>
 <body class="font-sans antialiased">
  <div id="root"></div>
  <script type="module" src="./main.tsx"></script>
 </body>
 </html>
 ```
 ---
 ## 5. Version Bump + CHANGELOG
 ### 5.1 `package.json`
 ```diff
 -  "version": "4.4.2",
 +  "version": "5.0.0",
 ```
 Major version bump because the legacy renderer removal is a breaking change for anyone who had plugins/integrations pointing at `src/renderer.js`.
 ### 5.2 `CHANGELOG.md` (new file, Keep a Changelog 1.1.0 format)
 ```markdown
 # Changelog
 All notable changes to markdown-converter will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [5.0.0] - 2026-06-06
 ### Added
 - **Complete React 19 + Vite + TypeScript renderer** replacing the legacy vanilla-JS UI
 - Native macOS/Windows/Linux menus with command palette and keyboard shortcuts
 - Settings sheet (5 tabs: editor, theme, keybindings, advanced, about)
 - Modal layer with 13 modal kinds (export PDF/DOCX/HTML/Word, batch, settings, about, welcome, confirm, ASCII gen, table gen, find in files)
 - 10 advanced tools: ASCII generator, table generator, Word export, find-in-files, REPL, print preview, zen mode, minimap, breadcrumbs-with-symbols, git status
 - Sonner toast notifications at 4 wire points
 - 3 mount strategies: ModalLayer dialogs, App.tsx overlays, editor/sidebar integrations
 - `ipc.file.writeBuffer` for renderer-side binary output
 - `ipc.file.search` (recursive regex), `ipc.file.gitStatus`, `ipc.print.show`, `ipc.app.showSaveDialog`
 - 305 unit + integration tests (vitest + React Testing Library)
 - Per-package @radix-ui primitives
 - shadcn/ui (new-york style) primitives
 ### Changed
 - **BREAKING**: Renderer is now React-only.
 - Main process decomposed from 146KB `src/main.js` into feature-first modules under `src/main/`
 - `src/index.html` reduced from 1667 to ~50 lines
 - IPC contract: handlers throw, `safeCall` catches → `{ ok, error }`
 - Settings store: `useSettingsStore` (zustand persist with zod)
 - Modal state: `useAppStore.modal: ModalState` discriminated union
 ### Removed
 - `src/renderer.js` (legacy vanilla-JS renderer, 5319 lines) — and `src/index.html` (1667 lines of legacy markup, replaced by `src/renderer/index.html` which is already the live Vite template)
 - 7 legacy stylesheets (styles.css, styles-modern.css, styles-concreteinfo.css, styles-sidebar.css, styles-zen.css, styles-welcome.css, fonts.css)
 - 5 legacy scripts (command-palette.js, print-preview.js, welcome.js, zen-mode.js, wordTemplateExporter.js)
 - 2 legacy HTMLs (ascii-generator.html, table-generator.html)
 - 9 dead IPC channels (toggle-command-palette, open-*/show-* ascii/table, print-preview*)
 ```
 ---
 ## 6. Task Decomposition
 **10 tasks** (each independently verifiable, one feature per commit, no bundling):
 1. **Decompose main.js — `src/main/files/`** (file ops facade, search, git, binary)
 2. **Decompose main.js — `src/main/menu/`** (buildMenu + items, with dead sends removed)
 3. **Decompose main.js — `src/main/window/`** (createMainWindow ONLY — ascii/table windows removed)
 4. **Decompose main.js — `src/main/word-template/`** (WordTemplateExporter split into parser/converter/apply)
 5. **Decompose main.js — `src/main/utils/` + `store.js` + `ipc.js` + `index.js`** (glue + new entrypoint)
 6. **Trim preload.js** — remove 9 dead IPC channels + 2 exposed API entries
 7. **Delete legacy renderer files** (13 files: renderer.js, 7 styles, fonts.css, 4 scripts, 3 htmls)
 8. **Verify src/renderer/index.html is the live template** (no action needed if it's already correct)
 9. **Bump package.json version to 5.0.0 + write CHANGELOG.md**
 10. **Final verification + tag v5.0.0** (build, tests, grep, electron smoke)
 Tasks 1-5 are subagent-driven (decomposition is mechanical given a clear target structure). Tasks 6-9 are direct edits. Task 10 is a verification gate.
 ---
 ## 7. Verification Strategy
 **Per task:**
 - After each decomposition step: `npx vitest run` (305 still green)
 - After main.js decomposition: `npx electron .` smoke — app starts, opens a file
 - After deletions: `git grep -E "renderer\.js|command-palette|print-preview|welcome\.js|zen-mode|wordTemplate|ascii-generator|table-generator|styles\.css"` returns ZERO results
 **Final (Task 10):**
 - `npx vitest run` — 305 passing
 - `npx vite build --config vite.renderer.config.ts` — succeeds
 - `npx vite build --config vite.preload.config.ts` — succeeds
 - `npx electron .` — app launches, main window renders
 - Manual smoke: open a `.md` file, edit it, export to PDF/DOCX, use the command palette
 - `git tag -a v5.0.0 -m "..."` and `git push origin v5.0.0`
 ---
 ## 8. Risks & Open Questions
 **Risks:**
 - **Decomposition regressions.** Splitting a 146KB main.js into 7+ files has surface area for missed imports / circular deps. Mitigation: tests stay green; electron smoke after each step.
 - **Hidden legacy references.** `git grep` won't catch references inside minified bundles or in node_modules. Mitigation: vite build will fail if there's a dangling import.
 - **`src/main/index.js` entrypoint change.** Anything in the build pipeline (electron-builder, scripts) that hardcodes `src/main.js` needs to be updated. Mitigation: grep all of `package.json`, `scripts/`, `vite.*.config.ts` for `main.js`.
 **Open questions (resolved during brainstorming):**
 - ~~Main process scope~~ → Full rewrite
 - ~~Folder shape~~ → Feature-first
 - ~~IPC migration~~ → Delete dead channels
 - ~~Version strategy~~ → v5.0.0 with Keep a Changelog format
 - ~~Order of work~~ → Decompose first, delete last
 ---
 ## 9. Out of Scope (deferred to Phase 11+)
 - Main process test suite
 - Renderer-side further refactor
 - New features
 - Migration to tauri (separate plan in `docs/plans/2026-03-15-react-tauri-pwa.md`)
 ---
 ## 10. Success Criteria
 Phase 10 is complete when:
 - All 10 tasks are committed, one per commit, no bundling
 - `src/main/index.js` is the new entrypoint
 - All 12 legacy files are deleted
 - All 9 dead IPC channels are removed
 - `package.json#version` is `5.0.0`, `package.json#main` is `src/main/index.js`
 - `CHANGELOG.md` exists with a complete v5.0.0 entry
 - 305 tests still pass
 - `npx vite build` succeeds for both renderer and preload configs
 - `npx electron .` launches and the app works end-to-end
 - `git grep` for legacy references returns zero results
 - Tag `v5.0.0` is created and pushed to origin
 - Phase 10 is the LAST phase of the React UI redesign
@@ -75,6 +75,7 @@ module.exports = [
        jest: 'readonly',
        describe: 'readonly',
        test: 'readonly',
        it: 'readonly',
        expect: 'readonly',
        beforeEach: 'readonly',
        afterEach: 'readonly',
@@ -19,8 +19,7 @@ module.exports = {
  // Coverage configuration
  collectCoverageFrom: [
    'src/**/*.js',
-    '!src/main.js', // Main process needs electron-mock
+    '!src/main/**', // Main process needs electron-mock
    '!src/renderer.js', // Large renderer file with duplicate declarations
    '!src/preload.js', // Electron preload requires contextBridge
    '!**/node_modules/**'
  ],
@@ -1,27 +1,39 @@
 {
  "name": "markdown-converter",
-  "version": "4.1.0",
+  "version": "5.0.1",
  "description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
-  "main": "src/main.js",
+  "main": "src/main/index.js",
  "scripts": {
    "start": "electron .",
    "dev:renderer": "vite --config vite.renderer.config.ts",
    "dev:electron": "wait-on tcp:5173 && cross-env VITE_DEV_SERVER_URL=http://localhost:5173 electron . -- --disable-gpu --disable-software-rasterizer --disable-dev-shm-usage",
    "dev": "concurrently -k -n vite,electron -c blue,green \"npm:dev:renderer\" \"npm:dev:electron\"",
    "build:renderer": "vite build --config vite.renderer.config.ts",
    "preview": "npm run build:renderer && electron .",
    "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",
    "format:check": "prettier --check src tests",
    "build": "electron-builder",
    "build:win": "electron-builder --win",
-    "build:win-signed": "cross-env CSC_LINK=code-signing-cert.pfx CSC_KEY_PASSWORD=%CSC_KEY_PASSWORD% electron-builder --win",
+    "build:win-signed": "cross-env CSC_LINK=code-signing-cert.pfx electron-builder --win",
    "build:win-unsigned": "cross-env CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --win",
    "create-cert": "powershell -ExecutionPolicy Bypass -File scripts/create-selfsigned-cert.ps1",
    "build:mac": "electron-builder --mac",
    "build:linux": "electron-builder --linux",
    "build:linux-ci": "electron-builder --linux deb AppImage",
    "build:local": "electron-builder --linux --win",
    "dist": "electron-builder --publish=never",
    "dist:all": "electron-builder -mwl",
-    "generate-icons": "node scripts/generate-icons.js"
+    "download-tools": "node scripts/download-tools.js",
    "generate-icons": "node scripts/generate-icons.js",
    "build:icon-icns": "node scripts/build-icon-icns.js"
  },
  "keywords": [
    "markdown",
@@ -40,17 +52,41 @@
    "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/figlet": "^1.7.0",
    "@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",
    "concurrently": "^10.0.3",
    "cross-env": "^10.0.0",
-    "electron": "^37.4.0",
+    "electron": "^41.1.1",
    "electron-builder": "^26.0.12",
    "eslint": "^9.39.2",
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-prettier": "^5.5.4",
    "jest": "^30.2.0",
    "jest-environment-jsdom": "^30.2.0",
    "jsdom": "^29.1.1",
    "lucide-react": "^1.17.0",
    "postcss": "^8.5.15",
    "prettier": "^3.7.4",
-    "sharp": "^0.34.3"
+    "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",
    "wait-on": "^9.0.10"
  },
  "dependencies": {
    "@codemirror/autocomplete": "^6.20.1",
@@ -67,44 +103,85 @@
    "@codemirror/state": "^6.5.4",
    "@codemirror/theme-one-dark": "^6.1.3",
    "@codemirror/view": "^6.39.16",
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@hookform/resolvers": "^5.4.0",
    "@radix-ui/react-checkbox": "^1.3.3",
    "@radix-ui/react-collapsible": "^1.1.12",
    "@radix-ui/react-context-menu": "^2.2.16",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-label": "^2.1.8",
    "@radix-ui/react-radio-group": "^1.3.8",
    "@radix-ui/react-scroll-area": "^1.2.10",
    "@radix-ui/react-select": "^2.2.6",
    "@radix-ui/react-slider": "^1.3.6",
    "@radix-ui/react-slot": "^1.2.4",
    "@radix-ui/react-switch": "^1.2.6",
    "@radix-ui/react-tabs": "^1.1.13",
    "@tanstack/react-table": "^8.21.3",
    "codemirror": "^6.0.2",
    "core-util-is": "^1.0.3",
-    "docx": "^9.6.0",
+    "docx": "^9.7.1",
-    "docx4js": "^3.3.0",
+    "docx4js": "^2.0.1",
    "dompurify": "^3.3.1",
    "electron-store": "^10.1.0",
    "ffmpeg-static": "^5.3.0",
    "figlet": "^1.11.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",
    "nth-check": "^2.1.1",
-    "lodash.pick": "npm:lodash@^4.17.21"
+    "lodash.pick": "npm:lodash@^4.17.21",
    "lodash-es": "^4.18.1",
    "lodash": "^4.17.21"
  },
  "build": {
    "appId": "com.concreteinfo.markdownconverter",
    "productName": "MarkdownConverter",
    "copyright": "Copyright (C) 2024-2025 ConcreteInfo",
    "directories": {
      "output": "dist"
    },
    "icon": "assets/icon",
    "files": [
-      "src/**/*",
+      "src/main/**/*",
-      "assets/**/*",
+      "src/preload.js",
-      "scripts/**/*",
+      "src/plugins/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "asarUnpack": [
      "node_modules/ffmpeg-static/**"
    ],
    "extraResources": [
      {
        "from": "dist/renderer",
        "to": "renderer"
      }
    ],
    "extraFiles": [],
    "fileAssociations": [
      {
        "ext": "md",
@@ -130,7 +207,16 @@
    ],
    "mac": {
      "category": "public.app-category.productivity",
-      "identity": null
+      "identity": null,
      "target": [
        { "target": "dmg", "arch": ["x64", "arm64"] },
        { "target": "zip", "arch": ["x64", "arm64"] }
      ],
      "icon": "assets/icon.icns",
      "darkModeSupport": true,
      "hardenedRuntime": false,
      "gatekeeperAssess": false,
      "entitlements": null
    },
    "win": {
      "target": [
@@ -155,7 +241,15 @@
      ],
      "artifactName": "${productName}-${version}-${arch}.${ext}",
      "requestedExecutionLevel": "asInvoker",
-      "signAndEditExecutable": false
+      "legalTrademarks": "Copyright (C) 2024-2025 ConcreteInfo",
      "verifyUpdateCodeSignature": false,
      "signAndEditExecutable": false,
      "extraFiles": [
        {
          "from": "bin/win32/pandoc.exe",
          "to": "bin/pandoc.exe"
        }
      ]
    },
    "nsis": {
      "oneClick": false,
@@ -177,29 +271,30 @@
      "target": [
        "deb",
        "AppImage",
-        "snap",
+        "snap"
        "rpm"
      ],
      "category": "Utility",
-      "maintainer": "ConcreteInfo <amit.wh@gmail.com>"
+      "maintainer": "ConcreteInfo <amit.wh@gmail.com>",
      "extraFiles": [
        {
          "from": "bin/linux/pandoc",
          "to": "bin/pandoc"
        }
      ]
    },
    "deb": {
      "depends": [
        "pandoc",
        "ffmpeg",
        "imagemagick",
        "libreoffice-common"
      ],
      "description": "Professional Markdown editor and universal file converter",
      "maintainer": "ConcreteInfo <amit.wh@gmail.com>"
    },
-    "rpm": {
+    "publish": {
-      "depends": [
+      "provider": "github",
-        "pandoc",
+      "owner": "amitwh",
-        "ffmpeg",
+      "repo": "markdown-converter",
-        "ImageMagick",
+      "releaseType": "release"
        "libreoffice-core"
      ]
    }
  }
 }
@@ -0,0 +1,6 @@
 module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
@@ -0,0 +1,75 @@
 /**
 * Build assets/icon.icns from the PNGs in assets/icons/.
 *
 * ICNS file format (Apple Icon Image):
 *   Header:  'icns' (4 bytes) + total file length (uint32 BE, includes header)
 *   For each size:
 *     Type tag (4 bytes) + length (uint32 BE, includes the 8-byte entry header) + PNG data
 *
 * Standard PNG type tags we'll include:
 *   icp4 = 16x16,    icp5 = 32x32,    icp6 = 64x64
 *   ic07 = 128x128,  ic08 = 256x256,  ic09 = 512x512,  ic10 = 1024x1024
 *   icsb = 48x48 (small)
 *   ic11 = 16x16@2x (32x32 retina),  ic12 = 32x32@2x (64x64 retina)
 *   ic13 = 128x128@2x (256x256 retina), ic14 = 256x256@2x (512x512 retina)
 */
 const fs = require('fs');
 const path = require('path');
 const iconsDir = path.join(__dirname, '..', 'assets', 'icons');
 const outFile = path.join(__dirname, '..', 'assets', 'icon.icns');
 // (size-in-pixels, icns type tag) — we skip sizes we don't have on disk
 const sizes = [
  { size: 16,  type: 'icp4' },
  { size: 32,  type: 'icp5' },
  { size: 64,  type: 'icp6' },
  { size: 128, type: 'ic07' },
  { size: 256, type: 'ic08' },
  { size: 512, type: 'ic09' },
  { size: 1024, type: 'ic10' },
  { size: 48,  type: 'icsb' },
  { size: 32,  type: 'ic11' }, // 16@2x
  { size: 64,  type: 'ic12' }, // 32@2x
  { size: 256, type: 'ic13' }, // 128@2x
  { size: 512, type: 'ic14' }, // 256@2x
 ];
 const entries = [];
 for (const { size, type } of sizes) {
  const pngPath = path.join(iconsDir, `${size}x${size}.png`);
  if (!fs.existsSync(pngPath)) continue;
  const png = fs.readFileSync(pngPath);
  // ICNS requires 8-byte alignment per entry. paddedLen is the TOTAL entry size
  // (8-byte type+length header + PNG + padding), rounded up to a multiple of 8.
  const paddedLen = 8 + Math.ceil(png.length / 8) * 8;
  entries.push({ type, png, paddedLen });
  console.log(`  ${type} (${size}x${size}) — ${png.length} bytes`);
 }
 if (entries.length === 0) {
  console.error('No source PNGs found in', iconsDir);
  process.exit(1);
 }
 const totalLen = 8 + entries.reduce((s, e) => s + e.paddedLen, 0);
 const buf = Buffer.alloc(totalLen);
 let off = 0;
 // Header
 buf.write('icns', off, 4, 'ascii'); off += 4;
 buf.writeUInt32BE(totalLen, off); off += 4;
 // Entries
 for (const { type, png, paddedLen } of entries) {
  buf.write(type, off, 4, 'ascii'); off += 4;
  buf.writeUInt32BE(paddedLen, off); off += 4;
  png.copy(buf, off);
  off += png.length;
  // Pad to 8-byte boundary within the entry. paddedLen already includes the 8-byte header.
  const pad = paddedLen - 8 - png.length;
  if (pad > 0) off += pad;
 }
 fs.writeFileSync(outFile, buf);
 console.log(`\nWrote ${outFile} (${buf.length} bytes, ${entries.length} sizes)`);
@@ -0,0 +1,59 @@
 # create-selfsigned-cert.ps1
 # Generates a self-signed code-signing certificate for local/development builds.
 #
 # Usage:
 #   powershell -ExecutionPolicy Bypass -File scripts/create-selfsigned-cert.ps1
 #   npm run create-cert
 #
 # Then build with:
 #   $env:CSC_LINK="code-signing-cert.pfx"; $env:CSC_KEY_PASSWORD="YourPassword"; npm run build:win-signed
 #
 # NOTE: Self-signed certificates will still show a SmartScreen warning for end users.
 # For production releases, obtain an OV or EV certificate from a trusted CA
 # (DigiCert, Sectigo, Certum, etc.). EV certificates bypass SmartScreen immediately.
 # Open-source projects can apply for free signing at https://signpath.io/
 param(
    [string]$CertPassword = "MarkdownConverter2025",
    [string]$OutputFile   = "code-signing-cert.pfx",
    [string]$Subject      = "CN=ConcreteInfo, O=ConcreteInfo, L=India, C=IN"
 )
 Write-Host "Creating self-signed code-signing certificate..." -ForegroundColor Cyan
 # Create the certificate in the current user's certificate store
 $cert = New-SelfSignedCertificate `
    -Type CodeSigningCert `
    -Subject $Subject `
    -CertStoreLocation "Cert:\CurrentUser\My" `
    -NotAfter (Get-Date).AddYears(3) `
    -HashAlgorithm SHA256 `
    -KeyLength 4096 `
    -KeyUsage DigitalSignature
 if (-not $cert) {
    Write-Error "Failed to create certificate."
    exit 1
 }
 Write-Host "Certificate created: $($cert.Thumbprint)" -ForegroundColor Green
 # Export to PFX
 $securePassword = ConvertTo-SecureString -String $CertPassword -Force -AsPlainText
 $exportPath = Join-Path (Get-Location) $OutputFile
 Export-PfxCertificate -Cert $cert -FilePath $exportPath -Password $securePassword | Out-Null
 if (Test-Path $exportPath) {
    Write-Host "Certificate exported to: $exportPath" -ForegroundColor Green
    Write-Host ""
    Write-Host "To build a signed release:" -ForegroundColor Yellow
    Write-Host '  $env:CSC_LINK="code-signing-cert.pfx"' -ForegroundColor White
    Write-Host "  `$env:CSC_KEY_PASSWORD=`"$CertPassword`"" -ForegroundColor White
    Write-Host "  npm run build:win-signed" -ForegroundColor White
    Write-Host ""
    Write-Host "IMPORTANT: Add code-signing-cert.pfx to .gitignore!" -ForegroundColor Red
 } else {
    Write-Error "Export failed."
    exit 1
 }
@@ -0,0 +1,175 @@
 #!/usr/bin/env node
 /**
 * Downloads pandoc binary for the current build platform.
 * Run automatically via `npm run download-tools` before building.
 * Skips download if binary already exists (idempotent).
 */
 const https = require('https');
 const http = require('http');
 const fs = require('fs');
 const path = require('path');
 const os = require('os');
 const { execSync } = require('child_process');
 const PANDOC_VERSION = '3.9.0.2';
 /**
 * Pandoc's archive inner layout has shifted across releases and platforms:
 *   linux  tarball: pandoc-3.9.0.2/bin/pandoc
 *   win32  zip:     pandoc-3.9.0.2/pandoc.exe
 *   darwin zip:     pandoc-3.9.0.2-x86_64/bin/pandoc   (arch-suffixed inner dir)
 *                   pandoc-3.9.0.2-arm64/bin/pandoc    (on Apple Silicon builds)
 * Rather than hard-coding the intermediate path — which has already broken
 * once when pandoc 3.9 added the arch suffix to the macOS archive — we walk
 * the extracted tree and find the binary by name. This is robust to future
 * layout shifts (e.g., universal binaries renaming the inner dir).
 */
 function findFile(rootDir, targetName) {
  const entries = fs.readdirSync(rootDir, { withFileTypes: true });
  for (const entry of entries) {
    const full = path.join(rootDir, entry.name);
    if (entry.isFile() && entry.name === targetName) return full;
    if (entry.isDirectory()) {
      const found = findFile(full, targetName);
      if (found) return found;
    }
  }
  return null;
 }
 const PANDOC_CONFIG = {
  linux: {
    url: `https://github.com/jgm/pandoc/releases/download/${PANDOC_VERSION}/pandoc-${PANDOC_VERSION}-linux-amd64.tar.gz`,
    archiveExt: '.tar.gz',
    destFile: 'pandoc',
    extract(archivePath, destDir) {
      const tmpDir = path.join(os.tmpdir(), `pandoc-${Date.now()}`);
      fs.mkdirSync(tmpDir, { recursive: true });
      execSync(`tar -xzf "${archivePath}" -C "${tmpDir}"`);
      const src = findFile(tmpDir, 'pandoc');
      if (!src) throw new Error(`pandoc binary not found under ${tmpDir}`);
      fs.copyFileSync(src, path.join(destDir, 'pandoc'));
      fs.chmodSync(path.join(destDir, 'pandoc'), 0o755);
      fs.rmSync(tmpDir, { recursive: true, force: true });
    },
  },
  win32: {
    url: `https://github.com/jgm/pandoc/releases/download/${PANDOC_VERSION}/pandoc-${PANDOC_VERSION}-windows-x86_64.zip`,
    archiveExt: '.zip',
    destFile: 'pandoc.exe',
    extract(archivePath, destDir) {
      const tmpDir = path.join(os.tmpdir(), `pandoc-${Date.now()}`);
      fs.mkdirSync(tmpDir, { recursive: true });
      execSync(
        `powershell -Command "Expand-Archive -Force '${archivePath}' '${tmpDir}'"`,
      );
      const src = findFile(tmpDir, 'pandoc.exe');
      if (!src) throw new Error(`pandoc.exe not found under ${tmpDir}`);
      fs.copyFileSync(src, path.join(destDir, 'pandoc.exe'));
      fs.rmSync(tmpDir, { recursive: true, force: true });
    },
  },
  darwin: {
    url: `https://github.com/jgm/pandoc/releases/download/${PANDOC_VERSION}/pandoc-${PANDOC_VERSION}-x86_64-macOS.zip`,
    archiveExt: '.zip',
    destFile: 'pandoc',
    extract(archivePath, destDir) {
      const tmpDir = path.join(os.tmpdir(), `pandoc-${Date.now()}`);
      fs.mkdirSync(tmpDir, { recursive: true });
      execSync(`unzip -o "${archivePath}" -d "${tmpDir}"`);
      const src = findFile(tmpDir, 'pandoc');
      if (!src) throw new Error(`pandoc binary not found under ${tmpDir}`);
      fs.copyFileSync(src, path.join(destDir, 'pandoc'));
      fs.chmodSync(path.join(destDir, 'pandoc'), 0o755);
      fs.rmSync(tmpDir, { recursive: true, force: true });
    },
  },
 };
 function download(url, destPath) {
  return new Promise((resolve, reject) => {
    const file = fs.createWriteStream(destPath);
    let received = 0;
    let total = 0;
    let lastPct = -1;
    function get(redirectUrl) {
      const client = redirectUrl.startsWith('https://') ? https : http;
      client
        .get(redirectUrl, (res) => {
          if (res.statusCode === 301 || res.statusCode === 302) {
            get(res.headers.location);
            return;
          }
          if (res.statusCode !== 200) {
            reject(new Error(`HTTP ${res.statusCode} for ${redirectUrl}`));
            return;
          }
          total = parseInt(res.headers['content-length'] || '0', 10);
          res.on('data', (chunk) => {
            received += chunk.length;
            if (total > 0) {
              const pct = Math.floor((received / total) * 100);
              if (pct !== lastPct && pct % 10 === 0) {
                process.stdout.write(`  ${pct}%\r`);
                lastPct = pct;
              }
            }
          });
          res.pipe(file);
          file.on('finish', () => {
            file.close();
            process.stdout.write('  100%\n');
            resolve();
          });
        })
        .on('error', (err) => {
          fs.unlink(destPath, () => {});
          reject(err);
        });
    }
    get(url);
  });
 }
 async function downloadPandoc() {
  const platform = process.platform;
  const config = PANDOC_CONFIG[platform];
  if (!config) {
    console.log(`[download-tools] No pandoc config for platform "${platform}" — skipping.`);
    return;
  }
  const destDir = path.join(__dirname, '..', 'bin', platform);
  const destFile = path.join(destDir, config.destFile);
  if (fs.existsSync(destFile)) {
    console.log(`[download-tools] pandoc already present at ${destFile} — skipping.`);
    return;
  }
  fs.mkdirSync(destDir, { recursive: true });
  const tmpArchive = path.join(os.tmpdir(), `pandoc-download${config.archiveExt}`);
  console.log(`[download-tools] Downloading pandoc ${PANDOC_VERSION} for ${platform}...`);
  await download(config.url, tmpArchive);
  console.log(`[download-tools] Extracting to ${destDir}...`);
  config.extract(tmpArchive, destDir);
  try {
    fs.unlinkSync(tmpArchive);
  } catch (_) {
    /* ignore */
  }
  console.log(`[download-tools] pandoc ready: ${destFile}`);
 }
 downloadPandoc().catch((err) => {
  console.error('[download-tools] FAILED:', err.message);
  process.exit(1);
 });
@@ -4,7 +4,7 @@
 * Implements file system operations for Electron using IPC.
 * This abstracts file operations to enable easier testing and migration.
 *
- * @version 4.1.0
+ * @version 4.4.1
 */
 /**
@@ -18,7 +18,7 @@ const electronFsAdapter = {
     * @returns {Promise<string>} File content
     */
    async readFile(path) {
-        return await window.electronAPI.readFile(path);
+        return await window.electronAPI.file.read(path);
    },
    /**
@@ -28,7 +28,7 @@ const electronFsAdapter = {
     * @returns {Promise<void>}
     */
    async writeFile(path, content) {
-        return await window.electronAPI.writeFile(path, content);
+        return await window.electronAPI.file.write(path, content);
    },
    /**
@@ -37,8 +37,7 @@ const electronFsAdapter = {
     * @returns {Promise<void>}
     */
    async deleteFile(path) {
-        // TODO: Add IPC channel for delete
+        return await window.electronAPI.file.delete(path);
        throw new Error('deleteFile not implemented');
    },
    /**
@@ -47,8 +46,7 @@ const electronFsAdapter = {
     * @returns {Promise<void>}
     */
    async ensureDir(path) {
-        // TODO: Add IPC channel for ensureDir
+        return await window.electronAPI.file.ensureDir(path);
        throw new Error('ensureDir not implemented');
    },
    /**
@@ -57,8 +55,18 @@ const electronFsAdapter = {
     * @returns {Promise<Array<import('../types').FileInfo>>}
     */
    async listDirectory(path) {
-        // TODO: Add IPC channel for listDirectory
+        const result = await window.electronAPI.invoke('list-directory', path);
-        throw new Error('listDirectory not implemented');
+        if (!result?.entries) {
            return [];
        }
        return result.entries.map((entry) => ({
            name: entry.name,
            isDir: entry.isDirectory,
            size: entry.size ?? 0,
            modified: entry.modified ?? 0,
            path: entry.path
        }));
    },
    /**
@@ -67,8 +75,7 @@ const electronFsAdapter = {
     * @returns {Promise<boolean>}
     */
    async exists(path) {
-        // TODO: Add IPC channel for exists
+        return await window.electronAPI.file.exists(path);
        throw new Error('exists not implemented');
    },
    /**
@@ -77,8 +84,7 @@ const electronFsAdapter = {
     * @returns {Promise<boolean>}
     */
    async isDirectory(path) {
-        // TODO: Add IPC channel for isDirectory
+        return await window.electronAPI.file.isDirectory(path);
        throw new Error('isDirectory not implemented');
    },
    /**
@@ -88,8 +94,7 @@ const electronFsAdapter = {
     * @returns {Promise<void>}
     */
    async copy(source, dest) {
-        // TODO: Add IPC channel for copy
+        return await window.electronAPI.file.copy(source, dest);
        throw new Error('copy not implemented');
    },
    /**
@@ -99,8 +104,7 @@ const electronFsAdapter = {
     * @returns {Promise<void>}
     */
    async move(source, dest) {
-        // TODO: Add IPC channel for move
+        return await window.electronAPI.file.move(source, dest);
        throw new Error('move not implemented');
    }
 };
@@ -5,7 +5,7 @@
 * Adapters abstract file system, conversion, and system operations
 * to enable easier testing and future platform migration.
 *
- * @version 4.1.0
+ * @version 4.4.1
 */
 /**
@@ -0,0 +1,112 @@
 /**
 * Writing Analytics Panel — modal overlay displaying analytics dashboard
 */
 const { analyze } = require('./writing-analytics');
 function showAnalyticsModal(tabManager) {
    const existing = document.getElementById('analytics-modal');
    if (existing) existing.remove();
    const content = tabManager.getEditorContent();
    const metrics = analyze(content);
    const overlay = document.createElement('div');
    overlay.id = 'analytics-modal';
    overlay.className = 'analytics-overlay';
    const maxCount = metrics.topWords.length > 0 ? metrics.topWords[0].count : 1;
    overlay.innerHTML = `
        <div class="analytics-modal">
            <div class="analytics-header">
                <h2>Writing Analytics</h2>
                <button class="analytics-close" title="Close">&times;</button>
            </div>
            <div class="analytics-body">
                <div class="analytics-section">
                    <h3>Readability</h3>
                    <div class="analytics-row">
                        <span class="analytics-label">Flesch Reading Ease</span>
                        <span class="analytics-value">${metrics.fleschEase}<small>${metrics.readabilityLabel}</small></span>
                    </div>
                    <div class="analytics-row">
                        <span class="analytics-label">Grade Level</span>
                        <span class="analytics-value">${metrics.fleschGrade}</span>
                    </div>
                    <div class="readability-meter">
                        <div class="readability-fill" style="width: ${Math.max(0, Math.min(100, metrics.fleschEase))}%"></div>
                    </div>
                </div>
                <div class="analytics-section">
                    <h3>Timing</h3>
                    <div class="analytics-row">
                        <span class="analytics-label">Reading Time</span>
                        <span class="analytics-value">~${metrics.readingTime} min</span>
                    </div>
                    <div class="analytics-row">
                        <span class="analytics-label">Speaking Time</span>
                        <span class="analytics-value">~${metrics.speakingTime} min</span>
                    </div>
                </div>
                <div class="analytics-section">
                    <h3>Structure</h3>
                    <div class="analytics-row">
                        <span class="analytics-label">Sentences</span>
                        <span class="analytics-value">${metrics.sentenceCount} &bull; Paragraphs: ${metrics.paragraphCount}</span>
                    </div>
                    <div class="analytics-row">
                        <span class="analytics-label">Avg Sentence</span>
                        <span class="analytics-value">${metrics.avgSentenceLength} words</span>
                    </div>
                    ${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 class="analytics-section">
                    <h3>Vocabulary</h3>
                    <div class="analytics-row">
                        <span class="analytics-label">Unique</span>
                        <span class="analytics-value">${metrics.uniqueWordCount} / ${metrics.wordCount}<small>${metrics.lexicalDiversity}%</small></span>
                    </div>
                    ${metrics.topWords.length > 0 ? `
                    <div class="word-cloud">
                        ${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>` : ''}
                </div>
            </div>
        </div>
    `;
    const closeBtn = overlay.querySelector('.analytics-close');
    closeBtn.addEventListener('click', () => overlay.remove());
    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) overlay.remove();
    });
    const escHandler = (e) => {
        if (e.key === 'Escape') {
            overlay.remove();
            document.removeEventListener('keydown', escHandler);
        }
    };
    document.addEventListener('keydown', escHandler);
    document.body.appendChild(overlay);
 }
 function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
 }
 module.exports = { showAnalyticsModal };
@@ -0,0 +1,127 @@
 /**
 * Writing Analytics — pure computation engine
 * No DOM dependencies. Exported analyze(text) returns a metrics object.
 */
 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'
 ]);
 function countSyllables(word) {
    word = word.toLowerCase().replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '');
    word = word.replace(/^y/, '');
    return word.match(/[aeiouy]{1,2}/gi)?.length || 1;
 }
 function extractWords(text) {
    return text.match(/[a-zA-Z]+(?:['-][a-zA-Z]+)*/g) || [];
 }
 function getReadabilityLabel(score) {
    if (score >= 90) return 'Very Easy';
    if (score >= 70) return 'Easy';
    if (score >= 50) return 'Standard';
    if (score >= 30) return 'Difficult';
    return 'Very Difficult';
 }
 function analyze(text) {
    if (!text || !text.trim()) {
        return {
            wordCount: 0,
            sentenceCount: 0,
            paragraphCount: 0,
            fleschEase: 0,
            fleschGrade: 0,
            readabilityLabel: 'N/A',
            readingTime: 0,
            speakingTime: 0,
            uniqueWordCount: 0,
            lexicalDiversity: 0,
            avgSentenceLength: 0,
            longestSentence: '',
            longestSentenceLength: 0,
            topWords: []
        };
    }
    const words = extractWords(text);
    const wordCount = words.length;
    const sentences = text.split(/[.!?]+/).map(s => s.trim()).filter(Boolean);
    const sentenceCount = Math.max(sentences.length, 1);
    const paragraphs = text.split(/\n\s*\n/).map(p => p.trim()).filter(Boolean);
    const paragraphCount = Math.max(paragraphs.length, 1);
    let totalSyllables = 0;
    for (const w of words) {
        totalSyllables += countSyllables(w);
    }
    const fleschEase = Math.round((206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount)) * 10) / 10;
    const fleschGrade = Math.round((0.39 * (wordCount / sentenceCount) + 11.8 * (totalSyllables / wordCount) - 15.59) * 10) / 10;
    const readabilityLabel = getReadabilityLabel(fleschEase);
    const readingTime = Math.ceil(wordCount / 200);
    const speakingTime = Math.ceil(wordCount / 130);
    const uniqueWords = new Set(words.map(w => w.toLowerCase()));
    const uniqueWordCount = uniqueWords.size;
    const lexicalDiversity = wordCount > 0 ? Math.round((uniqueWordCount / wordCount) * 1000) / 10 : 0;
    const avgSentenceLength = Math.round((wordCount / sentenceCount) * 10) / 10;
    let longestSentence = '';
    let longestSentenceLength = 0;
    for (const s of sentences) {
        const sWords = extractWords(s);
        if (sWords.length > longestSentenceLength) {
            longestSentenceLength = sWords.length;
            longestSentence = s.trim();
        }
    }
    if (longestSentence.length > 80) {
        longestSentence = longestSentence.substring(0, 80) + '...';
    }
    const wordFreq = {};
    for (const w of words) {
        const lower = w.toLowerCase();
        if (!STOP_WORDS.has(lower) && lower.length > 1) {
            wordFreq[lower] = (wordFreq[lower] || 0) + 1;
        }
    }
    const topWords = Object.entries(wordFreq)
        .sort((a, b) => b[1] - a[1])
        .slice(0, 10)
        .map(([word, count]) => ({ word, count }));
    return {
        wordCount,
        sentenceCount,
        paragraphCount,
        fleschEase,
        fleschGrade,
        readabilityLabel,
        readingTime,
        speakingTime,
        uniqueWordCount,
        lexicalDiversity,
        avgSentenceLength,
        longestSentence,
        longestSentenceLength,
        topWords
    };
 }
 module.exports = { analyze };
@@ -1,601 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <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">
    <style>
        :root {
            --ci-dark-gray: #464646;
            --ci-medium-gray: #9a9696;
            --ci-accent: #e5461f;
            --ci-light-gray: #e3e3e3;
            --ci-black: #0d0b09;
            --ci-white: #ffffff;
            --ci-bg: #f5f5f5;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: var(--ci-bg);
            color: var(--ci-dark-gray);
            min-height: 100vh;
        }
        .header {
            background: linear-gradient(135deg, var(--ci-dark-gray) 0%, var(--ci-black) 100%);
            padding: 16px 24px;
            border-bottom: 3px solid var(--ci-accent);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .header h1 {
            color: var(--ci-white);
            font-size: 1.25rem;
            font-weight: 600;
        }
        .container {
            padding: 24px;
            max-width: 100%;
        }
        .section {
            background: var(--ci-white);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .section-title {
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--ci-dark-gray);
            font-size: 0.95rem;
        }
        .mode-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
        }
        .mode-tab {
            padding: 10px 20px;
            border: 2px solid var(--ci-light-gray);
            background: var(--ci-white);
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        .mode-tab:hover {
            border-color: var(--ci-accent);
        }
        .mode-tab.active {
            background: var(--ci-accent);
            border-color: var(--ci-accent);
            color: var(--ci-white);
        }
        .form-group {
            margin-bottom: 16px;
        }
        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 8px;
            color: var(--ci-dark-gray);
        }
        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 10px 14px;
            border: 2px solid var(--ci-light-gray);
            border-radius: 8px;
            font-size: 0.875rem;
            font-family: inherit;
            transition: border-color 0.2s;
        }
        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: var(--ci-accent);
        }
        .form-textarea {
            min-height: 80px;
            resize: vertical;
        }
        .preview-container {
            background: var(--ci-black);
            border-radius: 8px;
            padding: 16px;
            min-height: 200px;
            max-height: 350px;
            overflow: auto;
        }
        .preview-content {
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            line-height: 1.3;
            color: #00ff00;
            white-space: pre;
        }
        .template-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 16px;
        }
        .template-btn {
            padding: 8px 12px;
            border: 2px solid var(--ci-light-gray);
            background: var(--ci-white);
            border-radius: 6px;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .template-btn:hover {
            border-color: var(--ci-accent);
            background: rgba(229, 70, 31, 0.05);
        }
        .template-btn.active {
            border-color: var(--ci-accent);
            background: rgba(229, 70, 31, 0.1);
        }
        .footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 16px 24px;
            background: var(--ci-white);
            border-top: 1px solid var(--ci-light-gray);
            position: sticky;
            bottom: 0;
        }
        .btn {
            padding: 10px 24px;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }
        .btn-primary {
            background: var(--ci-accent);
            color: var(--ci-white);
        }
        .btn-primary:hover {
            background: #c93a18;
            transform: translateY(-1px);
        }
        .btn-secondary {
            background: var(--ci-light-gray);
            color: var(--ci-dark-gray);
        }
        .btn-secondary:hover {
            background: #d0d0d0;
        }
        .mode-section {
            display: none;
        }
        .mode-section.active {
            display: block;
        }
        .template-category {
            margin-bottom: 16px;
        }
        .template-category-title {
            font-size: 0.8rem;
            color: var(--ci-medium-gray);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
    </style>
 </head>
 <body>
    <div class="header">
        <h1>ASCII Art Generator</h1>
    </div>
    <div class="container">
        <div class="section">
            <div class="mode-tabs">
                <button class="mode-tab active" data-mode="text">Text Banner</button>
                <button class="mode-tab" data-mode="box">Box/Frame</button>
                <button class="mode-tab" data-mode="templates">Templates</button>
            </div>
            <!-- Text Banner Mode -->
            <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">
                </div>
                <div class="form-group">
                    <label class="form-label">Style</label>
                    <select id="font-style" class="form-select">
                        <option value="standard">Standard</option>
                        <option value="banner">Banner</option>
                        <option value="block">Block</option>
                        <option value="bubble">Bubble</option>
                        <option value="digital">Digital</option>
                    </select>
                </div>
            </div>
            <!-- Box/Frame Mode -->
            <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>
                </div>
                <div class="form-group">
                    <label class="form-label">Box Style</label>
                    <select id="box-style" class="form-select">
                        <option value="single">Single Line</option>
                        <option value="double">Double Line</option>
                        <option value="rounded">Rounded</option>
                        <option value="bold">Bold</option>
                        <option value="ascii">ASCII (+|-)</option>
                    </select>
                </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;">
                </div>
            </div>
            <!-- Templates Mode -->
            <div id="templates-mode" class="mode-section">
                <div class="template-category">
                    <div class="template-category-title">Arrows & Flow</div>
                    <div class="template-grid">
                        <button class="template-btn" data-template="arrow-right">Arrow Right</button>
                        <button class="template-btn" data-template="arrow-down">Arrow Down</button>
                        <button class="template-btn" data-template="decision">Decision</button>
                        <button class="template-btn" data-template="process">Process Flow</button>
                    </div>
                </div>
                <div class="template-category">
                    <div class="template-category-title">Diagrams</div>
                    <div class="template-grid">
                        <button class="template-btn" data-template="flowchart">Flowchart</button>
                        <button class="template-btn" data-template="sequence">Sequence</button>
                        <button class="template-btn" data-template="network">Network</button>
                        <button class="template-btn" data-template="hierarchy">Hierarchy</button>
                    </div>
                </div>
                <div class="template-category">
                    <div class="template-category-title">Boxes & Containers</div>
                    <div class="template-grid">
                        <button class="template-btn" data-template="header">Header</button>
                        <button class="template-btn" data-template="note">Note Box</button>
                        <button class="template-btn" data-template="warning">Warning</button>
                        <button class="template-btn" data-template="info">Info Box</button>
                    </div>
                </div>
                <div class="template-category">
                    <div class="template-category-title">Decorative</div>
                    <div class="template-grid">
                        <button class="template-btn" data-template="divider">Divider</button>
                        <button class="template-btn" data-template="separator">Separator</button>
                        <button class="template-btn" data-template="banner">Banner</button>
                        <button class="template-btn" data-template="checklist">Checklist</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="section-title">Preview</div>
            <div class="preview-container">
                <div id="preview" class="preview-content"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <button class="btn btn-secondary" id="btn-generate">Generate Preview</button>
        <button class="btn btn-primary" id="btn-insert">Insert to Editor</button>
    </div>
    <script>
        // ASCII Art Generator Logic
        const FONTS = {
            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': ['-----', '   / ', '  /  ', ' /   ', '-----'],
                    ' ': ['     ', '     ', '     ', '     ', '     '],
                    '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': ['########', '     ## ', '    ##  ', '   ##   ', '  ##    ', ' ##     ', '########'],
                    ' ': ['       ', '       ', '       ', '       ', '       ', '       ', '       '],
                    '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': ['███████╗', '╚════██║', '  ███╔═╝', ' ██╔══╝ ', '███████╗', '╚══════╝'],
                    ' ': ['   ', '   ', '   ', '   ', '   ', '   ']
                }
            }
        };
        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'
        };
        const BOX_STYLES = {
            single: { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' },
            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: '|' }
        };
        let currentMode = 'text';
        let currentTemplate = null;
        // Mode switching
        document.querySelectorAll('.mode-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                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.getElementById(currentMode + '-mode').classList.add('active');
                generatePreview();
            });
        });
        // Template selection
        document.querySelectorAll('.template-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.template-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                currentTemplate = btn.dataset.template;
                generatePreview();
            });
        });
        // Generate text banner
        function generateTextBanner(text, style) {
            const font = FONTS[style] || FONTS.standard;
            const lines = Array(font.height).fill('');
            for (const char of text.toUpperCase()) {
                const charArt = font.chars[char] || font.chars[' '];
                if (charArt) {
                    for (let i = 0; i < font.height; i++) {
                        lines[i] += charArt[i] + ' ';
                    }
                }
            }
            return lines.join('\n');
        }
        // Generate box
        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;
            let result = box.tl + box.h.repeat(maxLen + 2) + box.tr + '\n';
            // Add padding lines at top
            for (let i = 0; i < Math.floor(padding / 2); i++) {
                result += box.v + ' '.repeat(maxLen + 2) + box.v + '\n';
            }
            // Add text lines
            for (const line of lines) {
                const paddedLine = ' '.repeat(padding) + line.padEnd(maxLen - padding) + ' ';
                result += box.v + ' ' + paddedLine + box.v + '\n';
            }
            // Add padding lines at bottom
            for (let i = 0; i < Math.floor(padding / 2); i++) {
                result += box.v + ' '.repeat(maxLen + 2) + box.v + '\n';
            }
            result += box.bl + box.h.repeat(maxLen + 2) + box.br;
            return result;
        }
        // Generate preview
        function generatePreview() {
            let result = '';
            if (currentMode === 'text') {
                const text = document.getElementById('text-input').value || 'HELLO';
                const style = document.getElementById('font-style').value;
                result = generateTextBanner(text, style);
            } else if (currentMode === 'box') {
                const text = document.getElementById('box-text').value || 'Your text here';
                const style = document.getElementById('box-style').value;
                const padding = parseInt(document.getElementById('box-padding').value) || 2;
                result = generateBox(text, style, padding);
            } else if (currentMode === 'templates') {
                result = currentTemplate ? TEMPLATES[currentTemplate] : 'Select a template...';
            }
            document.getElementById('preview').textContent = result;
        }
        // Event listeners for live preview
        document.getElementById('text-input').addEventListener('input', generatePreview);
        document.getElementById('font-style').addEventListener('change', generatePreview);
        document.getElementById('box-text').addEventListener('input', generatePreview);
        document.getElementById('box-style').addEventListener('change', generatePreview);
        document.getElementById('box-padding').addEventListener('input', generatePreview);
        document.getElementById('btn-generate').addEventListener('click', generatePreview);
        document.getElementById('btn-insert').addEventListener('click', () => {
            const content = document.getElementById('preview').textContent;
            if (content && window.electronAPI) {
                // Wrap in code block for markdown
                const wrapped = '```\n' + content + '\n```';
                window.electronAPI.send('insert-generated-content', wrapped);
                window.close();
            }
        });
        // Initial preview
        generatePreview();
    </script>
 </body>
 </html>
@@ -1,109 +0,0 @@
 class CommandPalette {
    constructor() {
        this.overlay = document.getElementById('command-palette-overlay');
        this.input = document.getElementById('command-palette-input');
        this.results = document.getElementById('command-palette-results');
        this.commands = [];
        this.selectedIndex = 0;
        this.filteredCommands = [];
        this.setupEventListeners();
    }
    register(label, shortcut, action) {
        this.commands.push({ label, shortcut, action });
    }
    open() {
        this.overlay.classList.remove('hidden');
        this.input.value = '';
        this.input.focus();
        this.selectedIndex = 0;
        this.renderResults('');
    }
    close() {
        this.overlay.classList.add('hidden');
    }
    isOpen() {
        return !this.overlay.classList.contains('hidden');
    }
    setupEventListeners() {
        this.input.addEventListener('input', () => {
            this.selectedIndex = 0;
            this.renderResults(this.input.value);
        });
        this.overlay.addEventListener('click', (e) => {
            if (e.target === this.overlay) this.close();
        });
        this.input.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                e.preventDefault();
                this.close();
            } else if (e.key === 'Enter') {
                e.preventDefault();
                this.executeSelected();
            } else if (e.key === 'ArrowDown') {
                e.preventDefault();
                this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredCommands.length - 1);
                this.updateSelection();
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
                this.updateSelection();
            }
        });
    }
    renderResults(query) {
        this.filteredCommands = query
            ? this.commands.filter(cmd => cmd.label.toLowerCase().includes(query.toLowerCase()))
            : [...this.commands];
        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('');
        this.results.querySelectorAll('.command-item').forEach((el) => {
            el.addEventListener('click', () => {
                const idx = parseInt(el.dataset.index);
                this.filteredCommands[idx].action();
                this.close();
            });
            el.addEventListener('mouseenter', () => {
                this.selectedIndex = parseInt(el.dataset.index);
                this.updateSelection();
            });
        });
    }
    highlightMatch(text, query) {
        if (!query) return text;
        const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
        return text.replace(regex, '<strong>$1</strong>');
    }
    updateSelection() {
        this.results.querySelectorAll('.command-item').forEach((el, i) => {
            el.classList.toggle('selected', i === this.selectedIndex);
        });
        // Scroll selected into view
        const selected = this.results.querySelector('.command-item.selected');
        if (selected) selected.scrollIntoView({ block: 'nearest' });
    }
    executeSelected() {
        if (this.filteredCommands[this.selectedIndex]) {
            this.filteredCommands[this.selectedIndex].action();
            this.close();
        }
    }
 }
 module.exports = { CommandPalette };
@@ -59,6 +59,11 @@ const jetBrainsMonoTheme = EditorView.theme({
 * @returns {EditorView} the created editor view
 */
 function createEditor(parentElement, options = {}) {
  console.log('[createEditor] Called with parentElement:', parentElement?.id, 'dimensions:', parentElement?.clientWidth, 'x', parentElement?.clientHeight);
  if (!parentElement) {
    console.error('[createEditor] ERROR: parentElement is null or undefined!');
    return null;
  }
  const {
    content = '',
    onChange = () => {},
@@ -1,75 +0,0 @@
 /* Local Font Definitions for MarkdownConverter */
 /* Inter Font Family */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../assets/fonts/Inter-Light.woff2') format('woff2');
 }
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/Inter-Regular.woff2') format('woff2');
 }
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/Inter-Medium.woff2') format('woff2');
 }
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');
 }
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/Inter-Bold.woff2') format('woff2');
 }
 /* JetBrains Mono Font Family - For code, markdown editor, and ASCII art */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
 }
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
 }
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
 }
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
 }
@@ -0,0 +1,44 @@
 const simpleGit = require('simple-git');
 function getGitInstance(dir) {
  return simpleGit(dir);
 }
 async function getStatus(dir) {
  try {
    const git = getGitInstance(dir);
    return await git.status();
  } catch (err) {
    return { error: 'Not a git repository' };
  }
 }
 async function stage(dir, files) {
  try {
    const git = getGitInstance(dir);
    await git.add(files);
    return await git.status();
  } catch (err) {
    return { error: err.message };
  }
 }
 async function commit(dir, message) {
  try {
    const git = getGitInstance(dir);
    return await git.commit(message);
  } catch (err) {
    return { error: err.message };
  }
 }
 async function log(dir, maxCount = 20) {
  try {
    const git = getGitInstance(dir);
    return await git.log({ maxCount });
  } catch (err) {
    return { error: err.message };
  }
 }
 module.exports = { getStatus, stage, commit, log };
@@ -0,0 +1,433 @@
 const fs = require('fs');
 const path = require('path');
 const { PDFDocument, rgb, degrees, StandardFonts } = require('pdf-lib');
 function parsePageRanges(rangeString, totalPages) {
  const pages = [];
  const ranges = rangeString.split(',').map(r => r.trim());
  for (const range of ranges) {
    if (range.includes('-')) {
      const [start, end] = range.split('-').map(n => parseInt(n.trim()));
      for (let i = start; i <= end && i <= totalPages; i++) {
        if (i > 0 && !pages.includes(i - 1)) {
          pages.push(i - 1);
        }
      }
    } else {
      const page = parseInt(range);
      if (page > 0 && page <= totalPages && !pages.includes(page - 1)) {
        pages.push(page - 1);
      }
    }
  }
  return pages.sort((a, b) => a - b);
 }
 function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16) / 255,
    g: parseInt(result[2], 16) / 255,
    b: parseInt(result[3], 16) / 255
  } : { r: 0, g: 0, b: 0 };
 }
 async function pdfMerge(data) {
  try {
    const mergedPdf = await PDFDocument.create();
    for (const filePath of data.inputFiles) {
      const pdfBytes = fs.readFileSync(filePath);
      const pdf = await PDFDocument.load(pdfBytes);
      const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
      copiedPages.forEach(page => mergedPdf.addPage(page));
    }
    const pdfBytes = await mergedPdf.save();
    fs.writeFileSync(data.outputPath, pdfBytes);
    return { success: true, message: `Successfully merged ${data.inputFiles.length} PDFs` };
  } catch (error) {
    return { success: false, error: error.message };
  }
 }
 async function pdfSplit(data) {
  try {
    const pdfBytes = fs.readFileSync(data.inputPath);
    const pdf = await PDFDocument.load(pdfBytes);
    const totalPages = pdf.getPageCount();
    const splits = [];
    if (data.splitMode === 'pages') {
      const ranges = data.pageRanges.split(',').map(r => r.trim());
      for (let i = 0; i < ranges.length; i++) {
        const range = ranges[i];
        const pages = [];
        if (range.includes('-')) {
          const [start, end] = range.split('-').map(n => parseInt(n.trim()));
          for (let p = start; p <= end && p <= totalPages; p++) {
            pages.push(p - 1);
          }
        } else {
          const page = parseInt(range);
          if (page > 0 && page <= totalPages) {
            pages.push(page - 1);
          }
        }
        if (pages.length > 0) {
          splits.push({ pages, name: `part_${i + 1}` });
        }
      }
    } else if (data.splitMode === 'interval') {
      const interval = data.interval;
      for (let i = 0; i < totalPages; i += interval) {
        const pages = [];
        for (let j = i; j < i + interval && j < totalPages; j++) {
          pages.push(j);
        }
        splits.push({ pages, name: `part_${Math.floor(i / interval) + 1}` });
      }
    } else if (data.splitMode === 'size') {
      const chunkSize = Math.max(1, Math.floor(totalPages / 5));
      for (let i = 0; i < totalPages; i += chunkSize) {
        const pages = [];
        for (let j = i; j < i + chunkSize && j < totalPages; j++) {
          pages.push(j);
        }
        splits.push({ pages, name: `part_${Math.floor(i / chunkSize) + 1}` });
      }
    }
    const baseName = path.basename(data.inputPath, '.pdf');
    for (const split of splits) {
      const newPdf = await PDFDocument.create();
      const copiedPages = await newPdf.copyPages(pdf, split.pages);
      copiedPages.forEach(page => newPdf.addPage(page));
      const outputPath = path.join(data.outputFolder, `${baseName}_${split.name}.pdf`);
      const newPdfBytes = await newPdf.save();
      fs.writeFileSync(outputPath, newPdfBytes);
    }
    return { success: true, message: `Successfully split PDF into ${splits.length} files` };
  } catch (error) {
    return { success: false, error: error.message };
  }
 }
 async function pdfCompress(data) {
  try {
    const pdfBytes = fs.readFileSync(data.inputPath);
    const pdf = await PDFDocument.load(pdfBytes);
    const compressedPdfBytes = await pdf.save({
      useObjectStreams: true,
      addDefaultPage: false,
      objectsPerTick: 50
    });
    fs.writeFileSync(data.outputPath, compressedPdfBytes);
    const originalSize = fs.statSync(data.inputPath).size;
    const compressedSize = fs.statSync(data.outputPath).size;
    const savings = ((originalSize - compressedSize) / originalSize * 100).toFixed(1);
    return {
      success: true,
      message: `PDF compressed. Size reduced by ${savings}% (${(originalSize / 1024).toFixed(1)}KB → ${(compressedSize / 1024).toFixed(1)}KB)`
    };
  } catch (error) {
    return { success: false, error: error.message };
  }
 }
 async function pdfRotate(data) {
  try {
    const pdfBytes = fs.readFileSync(data.inputPath);
    const pdf = await PDFDocument.load(pdfBytes);
    const totalPages = pdf.getPageCount();
    let pagesToRotate = [];
    if (data.pages && data.pages.trim()) {
      pagesToRotate = parsePageRanges(data.pages, totalPages);
    } else {
      pagesToRotate = Array.from({ length: totalPages }, (_, i) => i);
    }
    pagesToRotate.forEach(pageIndex => {
      const page = pdf.getPage(pageIndex);
      page.setRotation(degrees(data.angle));
    });
    const rotatedPdfBytes = await pdf.save();
    fs.writeFileSync(data.outputPath, rotatedPdfBytes);
    return {
      success: true,
      message: `Successfully rotated ${pagesToRotate.length} page(s) by ${data.angle}\u00B0`
    };
  } catch (error) {
    return { success: false, error: error.message };
  }
 }
 async function pdfDeletePages(data) {
  try {
    const pdfBytes = fs.readFileSync(data.inputPath);
    const pdf = await PDFDocument.load(pdfBytes);
    const totalPages = pdf.getPageCount();
    const pagesToDelete = parsePageRanges(data.pages, totalPages);
    pagesToDelete.sort((a, b) => b - a).forEach(pageIndex => {
      pdf.removePage(pageIndex);
    });
    const newPdfBytes = await pdf.save();
    fs.writeFileSync(data.outputPath, newPdfBytes);
    return {
      success: true,
      message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`
    };
  } catch (error) {
    return { success: false, error: error.message };
  }
 }
 async function pdfReorder(data) {
  try {
    const pdfBytes = fs.readFileSync(data.inputPath);
    const pdf = await PDFDocument.load(pdfBytes);
    const totalPages = pdf.getPageCount();
    const newOrder = data.newOrder.split(',').map(n => parseInt(n.trim()) - 1);
    if (newOrder.length !== totalPages) {
      return { success: false, error: `New order must include all ${totalPages} pages` };
    }
    const newPdf = await PDFDocument.create();
    const copiedPages = await newPdf.copyPages(pdf, newOrder);
    copiedPages.forEach(page => newPdf.addPage(page));
    const reorderedPdfBytes = await newPdf.save();
    fs.writeFileSync(data.outputPath, reorderedPdfBytes);
    return { success: true, message: 'Successfully reordered PDF pages' };
  } catch (error) {
    return { success: false, error: error.message };
  }
 }
 async function pdfWatermark(data) {
  try {
    const pdfBytes = fs.readFileSync(data.inputPath);
    const pdf = await PDFDocument.load(pdfBytes);
    const totalPages = pdf.getPageCount();
    let pagesToWatermark = [];
    if (data.pages === 'all') {
      pagesToWatermark = Array.from({ length: totalPages }, (_, i) => i);
    } else if (data.pages === 'custom' && data.customPages) {
      pagesToWatermark = parsePageRanges(data.customPages, totalPages);
    }
    const font = await pdf.embedFont(StandardFonts.Helvetica);
    const color = hexToRgb(data.color);
    for (const pageIndex of pagesToWatermark) {
      const page = pdf.getPage(pageIndex);
      const { width, height } = page.getSize();
      let x, y, rotation = 0;
      switch (data.position) {
        case 'center':
          x = width / 2;
          y = height / 2;
          break;
        case 'diagonal':
          x = width / 2;
          y = height / 2;
          rotation = 45;
          break;
        case 'top-left':
          x = 50;
          y = height - 50;
          break;
        case 'top-center':
          x = width / 2;
          y = height - 50;
          break;
        case 'top-right':
          x = width - 50;
          y = height - 50;
          break;
        case 'bottom-left':
          x = 50;
          y = 50;
          break;
        case 'bottom-center':
          x = width / 2;
          y = 50;
          break;
        case 'bottom-right':
          x = width - 50;
          y = 50;
          break;
        default:
          x = width / 2;
          y = height / 2;
      }
      page.drawText(data.text, {
        x,
        y,
        size: data.fontSize,
        font,
        color: rgb(color.r, color.g, color.b),
        opacity: data.opacity,
        rotate: degrees(rotation)
      });
    }
    const watermarkedPdfBytes = await pdf.save();
    fs.writeFileSync(data.outputPath, watermarkedPdfBytes);
    return {
      success: true,
      message: `Successfully added watermark to ${pagesToWatermark.length} page(s)`
    };
  } catch (error) {
    return { success: false, error: error.message };
  }
 }
 async function pdfEncrypt(data) {
  try {
    const pdfBytes = fs.readFileSync(data.inputPath);
    const pdf = await PDFDocument.load(pdfBytes);
    const encryptedPdfBytes = await pdf.save({
      userPassword: data.userPassword,
      ownerPassword: data.ownerPassword || data.userPassword,
      permissions: {
        printing: data.permissions.printing ? 'highResolution' : 'lowResolution',
        modifying: data.permissions.modifying,
        copying: data.permissions.copying,
        annotating: data.permissions.annotating,
        fillingForms: data.permissions.fillingForms,
        contentAccessibility: data.permissions.contentAccessibility,
        documentAssembly: data.permissions.documentAssembly
      }
    });
    fs.writeFileSync(data.outputPath, encryptedPdfBytes);
    return { success: true, message: 'Successfully added password protection to PDF' };
  } catch (error) {
    if (error.message.includes('encrypt') || error.message.includes('password')) {
      return {
        success: false,
        error: 'PDF encryption requires pdf-lib with encryption support. This feature may not be available in the current version.'
      };
    }
    return { success: false, error: error.message };
  }
 }
 async function pdfDecrypt(data) {
  try {
    const pdfBytes = fs.readFileSync(data.inputPath);
    const pdf = await PDFDocument.load(pdfBytes, { password: data.password });
    const decryptedPdfBytes = await pdf.save();
    fs.writeFileSync(data.outputPath, decryptedPdfBytes);
    return { success: true, message: 'Successfully removed password protection from PDF' };
  } catch (error) {
    if (error.message.includes('password') || error.message.includes('encrypted')) {
      return { success: false, error: 'Incorrect password or PDF is not encrypted' };
    }
    return { success: false, error: error.message };
  }
 }
 async function pdfSetPermissions(data) {
  try {
    const pdfBytes = fs.readFileSync(data.inputPath);
    const loadOptions = data.currentPassword ? { password: data.currentPassword } : {};
    const pdf = await PDFDocument.load(pdfBytes, loadOptions);
    const newPdfBytes = await pdf.save({
      ownerPassword: data.ownerPassword,
      permissions: {
        printing: data.permissions.printing ? 'highResolution' : 'lowResolution',
        modifying: data.permissions.modifying,
        copying: data.permissions.copying,
        annotating: data.permissions.annotating,
        fillingForms: data.permissions.fillingForms,
        contentAccessibility: data.permissions.contentAccessibility,
        documentAssembly: data.permissions.documentAssembly
      }
    });
    fs.writeFileSync(data.outputPath, newPdfBytes);
    return { success: true, message: 'Successfully updated PDF permissions' };
  } catch (error) {
    if (error.message.includes('encrypt') || error.message.includes('permission')) {
      return {
        success: false,
        error: 'PDF permissions require pdf-lib with encryption support. This feature may not be available in the current version.'
      };
    }
    return { success: false, error: error.message };
  }
 }
 function executeOperation(operation, data) {
  switch (operation) {
    case 'merge': return pdfMerge(data);
    case 'split': return pdfSplit(data);
    case 'compress': return pdfCompress(data);
    case 'rotate': return pdfRotate(data);
    case 'delete': return pdfDeletePages(data);
    case 'reorder': return pdfReorder(data);
    case 'watermark': return pdfWatermark(data);
    case 'encrypt': return pdfEncrypt(data);
    case 'decrypt': return pdfDecrypt(data);
    case 'permissions': return pdfSetPermissions(data);
    default: return Promise.resolve({ success: false, error: `Unknown operation: ${operation}` });
  }
 }
 async function getPageCount(filePath) {
  const pdfBytes = fs.readFileSync(filePath);
  const pdf = await PDFDocument.load(pdfBytes);
  return pdf.getPageCount();
 }
 module.exports = {
  parsePageRanges,
  hexToRgb,
  pdfMerge,
  pdfSplit,
  pdfCompress,
  pdfRotate,
  pdfDeletePages,
  pdfReorder,
  pdfWatermark,
  pdfEncrypt,
  pdfDecrypt,
  pdfSetPermissions,
  executeOperation,
  getPageCount
 };
@@ -0,0 +1,13 @@
 // src/main/files/binary.js
 // Binary file write handler (used by Word .docx export)
 const { ipcMain } = require('electron');
 const fs = require('fs').promises;
 function register() {
  ipcMain.handle('write-buffer', async (_event, { path: filePath, buffer }) => {
    await fs.writeFile(filePath, Buffer.from(buffer));
    return { ok: true };
  });
 }
 module.exports = { register };
@@ -0,0 +1,28 @@
 // src/main/files/git.js
 // Git IPC handlers — thin wrapper over GitOperations
 const { ipcMain } = require('electron');
 const GitOperations = require('../GitOperations');
 function register(currentFileRef) {
  ipcMain.handle('git-status', async () => {
    const dir = currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd();
    return GitOperations.getStatus(dir);
  });
  ipcMain.handle('git-stage', async (_event, { files }) => {
    const dir = currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd();
    return GitOperations.stage(dir, files);
  });
  ipcMain.handle('git-commit', async (_event, { message }) => {
    const dir = currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd();
    return GitOperations.commit(dir, message);
  });
  ipcMain.handle('git-log', async () => {
    const dir = currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd();
    return GitOperations.log(dir);
  });
 }
 module.exports = { register };
@@ -0,0 +1,157 @@
 // src/main/files/index.js
 // File ops facade — registers all file-related IPC handlers
 const { ipcMain, dialog, shell } = require('electron');
 const fs = require('fs');
 const path = require('path');
 const { register: registerGit } = require('./git');
 const { register: registerBinary } = require('./binary');
 function register({ validatePath, resolveWritablePath, isPathAccessible, currentFileRef, mainWindow }) {
  // pick-folder
  ipcMain.handle('pick-folder', async () => {
    const result = await dialog.showOpenDialog(mainWindow, {
      properties: ['openDirectory'],
    });
    if (result.canceled || result.filePaths.length === 0) return null;
    return result.filePaths[0];
  });
  // pick-file
  ipcMain.handle('pick-file', async () => {
    const result = await dialog.showOpenDialog(mainWindow, {
      properties: ['openFile'],
      filters: [{ name: 'Markdown', extensions: ['md', 'markdown', 'mdown', 'mkd'] }],
    });
    if (result.canceled || result.filePaths.length === 0) return null;
    return result.filePaths[0];
  });
  // read-file
  ipcMain.handle('read-file', async (event, filePath) => {
    const validation = validatePath(filePath);
    if (!validation.valid || !isPathAccessible(validation.resolved)) {
      throw new Error(validation.error || 'Invalid file path');
    }
    return fs.readFileSync(validation.resolved, 'utf-8');
  });
  // write-file
  ipcMain.handle('write-file', async (event, payload) => {
    const validation = resolveWritablePath(payload?.path);
    if (!validation.valid) {
      throw new Error(validation.error || 'Invalid file path');
    }
    fs.mkdirSync(path.dirname(validation.resolved), { recursive: true });
    fs.writeFileSync(validation.resolved, payload?.content ?? '', 'utf-8');
    return { path: validation.resolved };
  });
  // delete-file
  ipcMain.handle('delete-file', async (event, filePath) => {
    const validation = validatePath(filePath);
    if (!validation.valid || !isPathAccessible(validation.resolved)) {
      throw new Error(validation.error || 'Invalid file path');
    }
    fs.rmSync(validation.resolved, { recursive: true, force: false });
    return true;
  });
  // ensure-directory
  ipcMain.handle('ensure-directory', async (event, dirPath) => {
    const validation = resolveWritablePath(dirPath);
    if (!validation.valid) {
      throw new Error(validation.error || 'Invalid directory path');
    }
    fs.mkdirSync(validation.resolved, { recursive: true });
    return validation.resolved;
  });
  // path-exists
  ipcMain.handle('path-exists', async (event, filePath) => {
    const validation = resolveWritablePath(filePath);
    return validation.valid ? fs.existsSync(validation.resolved) : false;
  });
  // is-directory
  ipcMain.handle('is-directory', async (event, filePath) => {
    const validation = validatePath(filePath);
    if (!validation.valid || !isPathAccessible(validation.resolved)) {
      return false;
    }
    return fs.statSync(validation.resolved).isDirectory();
  });
  // copy-path
  ipcMain.handle('copy-path', async (event, payload) => {
    const sourceValidation = validatePath(payload?.source);
    const destinationValidation = resolveWritablePath(payload?.destination);
    if (!sourceValidation.valid || !isPathAccessible(sourceValidation.resolved)) {
      throw new Error(sourceValidation.error || 'Invalid source path');
    }
    if (!destinationValidation.valid) {
      throw new Error(destinationValidation.error || 'Invalid destination path');
    }
    fs.mkdirSync(path.dirname(destinationValidation.resolved), { recursive: true });
    fs.cpSync(sourceValidation.resolved, destinationValidation.resolved, { recursive: true });
    return { source: sourceValidation.resolved, destination: destinationValidation.resolved };
  });
  // move-path
  ipcMain.handle('move-path', async (event, payload) => {
    const sourceValidation = validatePath(payload?.source);
    const destinationValidation = resolveWritablePath(payload?.destination);
    if (!sourceValidation.valid || !isPathAccessible(sourceValidation.resolved)) {
      throw new Error(sourceValidation.error || 'Invalid source path');
    }
    if (!destinationValidation.valid) {
      throw new Error(destinationValidation.error || 'Invalid destination path');
    }
    fs.mkdirSync(path.dirname(destinationValidation.resolved), { recursive: true });
    try {
      fs.renameSync(sourceValidation.resolved, destinationValidation.resolved);
    } catch (error) {
      if (error.code !== 'EXDEV') {
        throw error;
      }
      fs.cpSync(sourceValidation.resolved, destinationValidation.resolved, { recursive: true });
      fs.rmSync(sourceValidation.resolved, { recursive: true, force: false });
    }
    return { source: sourceValidation.resolved, destination: destinationValidation.resolved };
  });
  // open-file-path
  ipcMain.on('open-file-path', (event, filePath) => {
    try {
      const validation = validatePath(filePath);
      if (!validation.valid) {
        console.error('[SECURITY] Invalid file path:', validation.error);
        return;
      }
      if (!isPathAccessible(validation.resolved)) {
        return;
      }
      const stat = fs.statSync(validation.resolved);
      if (stat.size > 50 * 1024 * 1024) return;
      const content = fs.readFileSync(validation.resolved, 'utf-8');
      // Emit set-current-file back to main process so it updates its currentFile variable
      mainWindow.webContents.send('set-current-file', validation.resolved);
      mainWindow.webContents.send('file-opened', { path: validation.resolved, content });
    } catch (err) {
      console.error('open-file-path error:', err);
    }
  });
  // Register sub-modules
  registerGit(currentFileRef);
  registerBinary();
 }
 module.exports = { register };
@@ -0,0 +1,34 @@
 // src/main/menu/index.js
 // buildMenu() composes the app menu from items; register() sets it on the app
 const { Menu } = require('electron');
 const {
  fileItems,
  editItems,
  viewItems,
  batchItems,
  convertItems,
  pdfEditorItems,
  toolsItems,
  helpItems
 } = require('./items');
 function buildMenu(mainWindow) {
  const template = [
    { label: '&File', submenu: fileItems(mainWindow) },
    { label: '&Edit', submenu: editItems(mainWindow) },
    { label: '&View', submenu: viewItems(mainWindow) },
    { label: '&Batch', submenu: batchItems(mainWindow) },
    { label: '&Convert', submenu: convertItems(mainWindow) },
    { label: 'PDF Editor', submenu: pdfEditorItems(mainWindow) },
    { label: '&Tools', submenu: toolsItems(mainWindow) },
    { label: '&Help', submenu: helpItems(mainWindow) }
  ];
  return Menu.buildFromTemplate(template);
 }
 function register(mainWindow) {
  Menu.setApplicationMenu(buildMenu(mainWindow));
 }
 module.exports = { register, buildMenu };
@@ -0,0 +1,522 @@
 // src/main/menu/items.js
 // Individual menu items — pure functions that take (mainWindow) and return menu item arrays
 const { app, dialog, shell } = require('electron');
 const path = require('path');
 const fs = require('fs');
 // Helper: build recent files submenu
 function buildRecentFilesMenu(mainWindow) {
  try {
    const recentFilesPath = path.join(app.getPath('userData'), 'recent-files.json');
    if (!fs.existsSync(recentFilesPath)) return [{ label: 'No Recent Files', enabled: false }];
    const recentFiles = JSON.parse(fs.readFileSync(recentFilesPath, 'utf-8'));
    const existing = recentFiles.filter(file => fs.existsSync(file));
    if (existing.length === 0) return [{ label: 'No Recent Files', enabled: false }];
    const items = existing.map(file => ({
      label: path.basename(file),
      click: () => {
        const { openFileFromPath } = require('../index');
        openFileFromPath(file);
      }
    }));
    items.push(
      { type: 'separator' },
      {
        label: 'Clear Recent Files',
        click: () => {
          if (mainWindow) {
            mainWindow.webContents.send('clear-recent-files');
          }
        }
      }
    );
    return items;
  } catch (e) {
    return [{ label: 'No Recent Files', enabled: false }];
  }
 }
 function fileItems(mainWindow) {
  return [
    {
      label: 'New',
      accelerator: 'CmdOrCtrl+N',
      click: () => mainWindow.webContents.send('file-new')
    },
    {
      label: 'Open',
      accelerator: 'CmdOrCtrl+O',
      click: () => {
        const { openFile } = require('../index');
        openFile();
      }
    },
    {
      label: 'Open PDF',
      accelerator: 'CmdOrCtrl+Shift+O',
      click: () => {
        const { openPdfFile } = require('../index');
        openPdfFile();
      }
    },
    {
      label: 'Save',
      accelerator: 'CmdOrCtrl+S',
      click: () => mainWindow.webContents.send('file-save')
    },
    {
      label: 'Save As',
      accelerator: 'CmdOrCtrl+Shift+S',
      click: () => {
        const { saveAsFile } = require('../index');
        saveAsFile();
      }
    },
    { type: 'separator' },
    // NOTE: Print Preview submenu removed — handled by React <PrintPreview> overlay
    { type: 'separator' },
    {
      label: 'Recent Files',
      submenu: buildRecentFilesMenu(mainWindow)
    },
    { type: 'separator' },
    {
      label: 'New from Template',
      submenu: [
        { label: 'Blog Post', click: () => mainWindow.webContents.send('load-template-menu', 'blog-post.md') },
        { label: 'Meeting Notes', click: () => mainWindow.webContents.send('load-template-menu', 'meeting-notes.md') },
        { label: 'Technical Spec', click: () => mainWindow.webContents.send('load-template-menu', 'technical-spec.md') },
        { label: 'Changelog', click: () => mainWindow.webContents.send('load-template-menu', 'changelog.md') },
        { label: 'README', click: () => mainWindow.webContents.send('load-template-menu', 'readme.md') },
        { label: 'Project Plan', click: () => mainWindow.webContents.send('load-template-menu', 'project-plan.md') },
        { label: 'API Documentation', click: () => mainWindow.webContents.send('load-template-menu', 'api-docs.md') },
        { label: 'Tutorial', click: () => mainWindow.webContents.send('load-template-menu', 'tutorial.md') },
        { label: 'Release Notes', click: () => mainWindow.webContents.send('load-template-menu', 'release-notes.md') },
        { label: 'Comparison', click: () => mainWindow.webContents.send('load-template-menu', 'comparison.md') }
      ]
    },
    { type: 'separator' },
    {
      label: 'Import Document...',
      accelerator: 'CmdOrCtrl+I',
      click: () => {
        const { importDocument } = require('../index');
        importDocument();
      }
    },
    {
      label: 'Export',
      submenu: [
        {
          label: 'HTML', click: () => {
            const { exportFile } = require('../index');
            exportFile('html');
          }
        },
        {
          label: 'PDF', click: () => {
            const { exportFile } = require('../index');
            exportFile('pdf');
          }
        },
        {
          label: 'PDF (Enhanced)', click: () => {
            const { exportPDFViaWordTemplate } = require('../index');
            exportPDFViaWordTemplate();
          }, accelerator: 'Ctrl+Shift+P'
        },
        {
          label: 'DOCX', click: () => {
            const { exportFile } = require('../index');
            exportFile('docx');
          }
        },
        {
          label: 'DOCX (Enhanced)', click: () => {
            const { exportWordWithTemplate } = require('../index');
            exportWordWithTemplate();
          }, accelerator: 'Ctrl+Shift+W'
        },
        { label: 'LaTeX', click: () => { const { exportFile } = require('../index'); exportFile('latex'); } },
        { label: 'RTF', click: () => { const { exportFile } = require('../index'); exportFile('rtf'); } },
        { label: 'ODT', click: () => { const { exportFile } = require('../index'); exportFile('odt'); } },
        { label: 'EPUB', click: () => { const { exportFile } = require('../index'); exportFile('epub'); } },
        { type: 'separator' },
        { label: 'PowerPoint (PPTX)', click: () => { const { exportFile } = require('../index'); exportFile('pptx'); } },
        { label: 'OpenDocument Presentation (ODP)', click: () => { const { exportFile } = require('../index'); exportFile('odp'); } },
        { type: 'separator' },
        { label: 'CSV (Tables)', click: () => { const { exportSpreadsheet } = require('../index'); exportSpreadsheet('csv'); } },
        { type: 'separator' },
        { label: 'JSON (.json)', click: () => { const { exportFile } = require('../index'); exportFile('json'); } },
        { label: 'YAML (.yaml)', click: () => { const { exportFile } = require('../index'); exportFile('yaml'); } },
        { label: 'XML (.xml)', click: () => { const { exportFile } = require('../index'); exportFile('xml'); } },
        { type: 'separator' },
        { label: 'Confluence Wiki (.txt)', click: () => { const { exportFile } = require('../index'); exportFile('confluence'); } },
        { label: 'MOBI E-book (.mobi)', click: () => { const { exportFile } = require('../index'); exportFile('mobi'); } }
      ]
    },
    { type: 'separator' },
    {
      label: 'Select Word Template...',
      click: () => {
        const { selectWordTemplate } = require('../index');
        selectWordTemplate();
      }
    },
    {
      label: 'Template Settings...',
      click: () => {
        const { showTemplateSettings } = require('../index');
        showTemplateSettings();
      }
    },
    {
      label: 'Header & Footer Settings...',
      click: () => {
        if (mainWindow) {
          mainWindow.webContents.send('open-header-footer-dialog');
        }
      }
    },
    { type: 'separator' },
    {
      label: 'Quit',
      accelerator: process.platform === 'darwin' ? 'Cmd+Q' : 'Ctrl+Q',
      click: () => app.quit()
    }
  ];
 }
 function editItems(mainWindow) {
  return [
    {
      label: 'Undo',
      accelerator: 'CmdOrCtrl+Z',
      click: () => mainWindow.webContents.send('undo')
    },
    {
      label: 'Redo',
      accelerator: 'CmdOrCtrl+Shift+Z',
      click: () => mainWindow.webContents.send('redo')
    },
    { type: 'separator' },
    { label: 'Cut', accelerator: 'CmdOrCtrl+X', role: 'cut' },
    { label: 'Copy', accelerator: 'CmdOrCtrl+C', role: 'copy' },
    { label: 'Paste', accelerator: 'CmdOrCtrl+V', role: 'paste' },
    { label: 'Select All', accelerator: 'CmdOrCtrl+A', role: 'selectAll' },
    { type: 'separator' },
    {
      label: 'Find & Replace',
      accelerator: 'CmdOrCtrl+F',
      click: () => mainWindow.webContents.send('toggle-find')
    }
  ];
 }
 function viewItems(mainWindow) {
  return [
    {
      label: 'Toggle Preview',
      accelerator: 'CmdOrCtrl+Shift+V',
      click: () => mainWindow.webContents.send('toggle-preview')
    },
    // NOTE: Command Palette removed — handled by useCommandStore
    { type: 'separator' },
    {
      label: 'Sidebar',
      submenu: [
        { label: 'File Explorer', click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'explorer') },
        { label: 'Git', click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'git') },
        { label: 'Snippets', click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'snippets') },
        { label: 'Templates', click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'templates') }
      ]
    },
    {
      label: 'Bottom Panel (REPL)',
      click: () => mainWindow.webContents.send('toggle-bottom-panel')
    },
    { type: 'separator' },
    {
      label: 'Theme',
      submenu: [
        { label: 'Atom One Light (Default)', click: () => { const { setTheme } = require('../index'); setTheme('atomonelight'); } },
        { label: 'GitHub Light', click: () => { const { setTheme } = require('../index'); setTheme('github'); } },
        { label: 'Light', click: () => { const { setTheme } = require('../index'); setTheme('light'); } },
        { label: 'Solarized Light', click: () => { const { setTheme } = require('../index'); setTheme('solarized'); } },
        { label: 'Gruvbox Light', click: () => { const { setTheme } = require('../index'); setTheme('gruvbox-light'); } },
        { label: 'Ayu Light', click: () => { const { setTheme } = require('../index'); setTheme('ayu-light'); } },
        { label: 'Sepia', click: () => { const { setTheme } = require('../index'); setTheme('sepia'); } },
        { label: 'Paper', click: () => { const { setTheme } = require('../index'); setTheme('paper'); } },
        { label: 'Rose Pine Dawn', click: () => { const { setTheme } = require('../index'); setTheme('rosepine-dawn'); } },
        { label: 'Concrete Light', click: () => { const { setTheme } = require('../index'); setTheme('concrete-light'); } },
        { type: 'separator' },
        { label: 'Dark', click: () => { const { setTheme } = require('../index'); setTheme('dark'); } },
        { label: 'One Dark', click: () => { const { setTheme } = require('../index'); setTheme('onedark'); } },
        { label: 'Dracula', click: () => { const { setTheme } = require('../index'); setTheme('dracula'); } },
        { label: 'Nord', click: () => { const { setTheme } = require('../index'); setTheme('nord'); } },
        { label: 'Monokai', click: () => { const { setTheme } = require('../index'); setTheme('monokai'); } },
        { label: 'Material', click: () => { const { setTheme } = require('../index'); setTheme('material'); } },
        { label: 'Gruvbox Dark', click: () => { const { setTheme } = require('../index'); setTheme('gruvbox-dark'); } },
        { label: 'Tokyo Night', click: () => { const { setTheme } = require('../index'); setTheme('tokyonight'); } },
        { label: 'Palenight', click: () => { const { setTheme } = require('../index'); setTheme('palenight'); } },
        { label: 'Ayu Dark', click: () => { const { setTheme } = require('../index'); setTheme('ayu-dark'); } },
        { label: 'Ayu Mirage', click: () => { const { setTheme } = require('../index'); setTheme('ayu-mirage'); } },
        { label: 'Oceanic Next', click: () => { const { setTheme } = require('../index'); setTheme('oceanic-next'); } },
        { label: 'Cobalt2', click: () => { const { setTheme } = require('../index'); setTheme('cobalt2'); } },
        { label: 'Concrete Dark', click: () => { const { setTheme } = require('../index'); setTheme('concrete-dark'); } },
        { label: 'Concrete Warm', click: () => { const { setTheme } = require('../index'); setTheme('concrete-warm'); } }
      ]
    },
    { type: 'separator' },
    {
      label: 'Font Size',
      submenu: [
        {
          label: 'Increase Font Size',
          accelerator: 'CmdOrCtrl+Shift+Plus',
          click: () => mainWindow.webContents.send('adjust-font-size', 'increase')
        },
        {
          label: 'Decrease Font Size',
          accelerator: 'CmdOrCtrl+Shift+-',
          click: () => mainWindow.webContents.send('adjust-font-size', 'decrease')
        },
        {
          label: 'Reset Font Size',
          accelerator: 'CmdOrCtrl+Shift+0',
          click: () => mainWindow.webContents.send('adjust-font-size', 'reset')
        }
      ]
    },
    { type: 'separator' },
    {
      label: 'Spell Check',
      type: 'checkbox',
      checked: true,
      click: (menuItem) => {
        mainWindow.webContents.session.setSpellCheckerEnabled(menuItem.checked);
      }
    },
    { type: 'separator' },
    {
      label: 'Custom Preview CSS',
      submenu: [
        {
          label: 'Load Custom Preview CSS...',
          click: () => mainWindow.webContents.send('load-custom-css')
        },
        {
          label: 'Clear Custom Preview CSS',
          click: () => mainWindow.webContents.send('clear-custom-css')
        }
      ]
    },
    { type: 'separator' },
    { label: 'Reload', accelerator: 'CmdOrCtrl+R', role: 'reload' },
    { label: 'Toggle DevTools', accelerator: 'F12', role: 'toggleDevTools' },
    { type: 'separator' },
    { label: 'Zoom In', accelerator: 'CmdOrCtrl+Plus', role: 'zoomIn' },
    { label: 'Zoom Out', accelerator: 'CmdOrCtrl+-', role: 'zoomOut' },
    { label: 'Reset Zoom', accelerator: 'CmdOrCtrl+0', role: 'resetZoom' }
  ];
 }
 function batchItems(mainWindow) {
  return [
    {
      label: 'Convert Markdown Folder...',
      click: () => {
        const { showBatchConversionDialog } = require('../index');
        showBatchConversionDialog();
      }
    },
    { type: 'separator' },
    {
      label: 'Batch Image Conversion...',
      click: () => mainWindow.webContents.send('show-batch-converter', 'image')
    },
    {
      label: 'Batch Audio Conversion...',
      click: () => mainWindow.webContents.send('show-batch-converter', 'audio')
    },
    {
      label: 'Batch Video Conversion...',
      click: () => mainWindow.webContents.send('show-batch-converter', 'video')
    },
    {
      label: 'Batch PDF Conversion...',
      click: () => mainWindow.webContents.send('show-batch-converter', 'pdf')
    }
  ];
 }
 function convertItems(mainWindow) {
  return [
    {
      label: 'Universal File Converter...',
      accelerator: 'CmdOrCtrl+Shift+C',
      click: () => {
        const { showUniversalConverterDialog } = require('../index');
        showUniversalConverterDialog();
      }
    }
  ];
 }
 function pdfEditorItems(mainWindow) {
  return [
    {
      label: 'Open PDF File...',
      accelerator: 'CmdOrCtrl+Shift+O',
      click: () => {
        const { openPdfFile } = require('../index');
        openPdfFile();
      }
    },
    { type: 'separator' },
    {
      label: 'Merge PDFs...',
      click: () => {
        const { showPDFEditorDialog } = require('../index');
        showPDFEditorDialog('merge');
      }
    },
    {
      label: 'Split PDF...',
      click: () => {
        const { showPDFEditorDialog } = require('../index');
        showPDFEditorDialog('split');
      }
    },
    {
      label: 'Compress PDF...',
      click: () => {
        const { showPDFEditorDialog } = require('../index');
        showPDFEditorDialog('compress');
      }
    },
    { type: 'separator' },
    {
      label: 'Rotate Pages...',
      click: () => {
        const { showPDFEditorDialog } = require('../index');
        showPDFEditorDialog('rotate');
      }
    },
    {
      label: 'Delete Pages...',
      click: () => {
        const { showPDFEditorDialog } = require('../index');
        showPDFEditorDialog('delete');
      }
    },
    {
      label: 'Reorder Pages...',
      click: () => {
        const { showPDFEditorDialog } = require('../index');
        showPDFEditorDialog('reorder');
      }
    },
    { type: 'separator' },
    {
      label: 'Add Watermark...',
      click: () => {
        const { showPDFEditorDialog } = require('../index');
        showPDFEditorDialog('watermark');
      }
    },
    { type: 'separator' },
    {
      label: 'Security',
      submenu: [
        {
          label: 'Add Password Protection...',
          click: () => {
            const { showPDFEditorDialog } = require('../index');
            showPDFEditorDialog('encrypt');
          }
        },
        {
          label: 'Remove Password...',
          click: () => {
            const { showPDFEditorDialog } = require('../index');
            showPDFEditorDialog('decrypt');
          }
        },
        {
          label: 'Set Permissions...',
          click: () => {
            const { showPDFEditorDialog } = require('../index');
            showPDFEditorDialog('permissions');
          }
        }
      ]
    },
    { type: 'separator' },
    {
      label: 'About PDF Editor',
      click: () => {
        const { showAboutDialog } = require('../index');
        showAboutDialog();
      }
    }
  ];
 }
 function toolsItems(mainWindow) {
  // NOTE: Table Generator and ASCII Art Generator removed — handled by React dialogs
  return [
    // Removed: Table Generator (Cmd+Ctrl+Shift+T) — now React <TableGeneratorDialog>
    // Removed: ASCII Art Generator (Cmd+Ctrl+Shift+A) — now React <AsciiGeneratorDialog>
    { type: 'separator' },
    {
      label: 'Document Compare',
      click: () => mainWindow.webContents.send('show-document-compare')
    }
  ];
 }
 function helpItems(mainWindow) {
  return [
    {
      label: 'About MarkdownConverter',
      click: () => {
        const { showAboutDialog } = require('../index');
        showAboutDialog();
      }
    },
    { type: 'separator' },
    {
      label: 'Dependencies & Requirements',
      click: () => {
        const { showDependenciesDialog } = require('../index');
        showDependenciesDialog();
      }
    },
    { type: 'separator' },
    {
      label: 'Documentation',
      click: () => shell.openExternal('https://github.com/amitwh/markdown-converter')
    },
    {
      label: 'Report Issue',
      click: () => shell.openExternal('https://github.com/amitwh/markdown-converter/issues')
    },
    {
      label: 'Check for Updates',
      click: () => shell.openExternal('https://github.com/amitwh/markdown-converter/releases')
    }
  ];
 }
 module.exports = {
  fileItems,
  editItems,
  viewItems,
  batchItems,
  convertItems,
  pdfEditorItems,
  toolsItems,
  helpItems
 };
@@ -0,0 +1,31 @@
 // src/main/store.js
 // Simple JSON-file preferences store (replaces electron-store)
 const { app } = require('electron');
 const path = require('path');
 const fs = require('fs');
 const settingsPath = path.join(app.getPath('userData'), 'settings.json');
 const store = {
  get(key, defaultValue) {
    try {
      const data = fs.readFileSync(settingsPath, 'utf-8');
      const settings = JSON.parse(data);
      return settings[key] !== undefined ? settings[key] : defaultValue;
    } catch {
      return defaultValue;
    }
  },
  set(key, value) {
    let settings = {};
    try {
      const data = fs.readFileSync(settingsPath, 'utf-8');
      settings = JSON.parse(data);
    } catch {}
    settings[key] = value;
    fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
  }
 };
 module.exports = store;
@@ -0,0 +1,107 @@
 // src/main/utils/paths.js
 // Path helpers — extracted from src/main.js lines 109-207
 const { app } = require('electron');
 const path = require('path');
 const fs = require('fs');
 function getAllowedDirectories() {
  const dirs = [
    app.getPath('documents'),
    app.getPath('desktop'),
    app.getPath('downloads'),
    app.getPath('home'),
    process.cwd() // Current working directory
  ].filter(Boolean); // Remove any undefined paths
  return dirs;
 }
 /**
 * Validates that a file path is safe and doesn't attempt path traversal
 * @param {string} filePath - The path to validate
 * @returns {{ valid: boolean, resolved: string, error?: string }}
 */
 function validatePath(filePath) {
  if (!filePath || typeof filePath !== 'string') {
    return { valid: false, resolved: '', error: 'Invalid path' };
  }
  // Resolve to absolute path (handles .., ., symlinks)
  let resolved;
  try {
    resolved = path.resolve(filePath);
  } catch (err) {
    return { valid: false, resolved: '', error: 'Invalid path format' };
  }
  // Normalize path separators
  resolved = path.normalize(resolved);
  // Check for null bytes (path injection)
  if (resolved.includes('\0')) {
    return { valid: false, resolved: '', error: 'Null byte in path' };
  }
  // Check if path exists
  if (!fs.existsSync(resolved)) {
    return { valid: false, resolved, error: 'Path does not exist' };
  }
  return { valid: true, resolved };
 }
 /**
 * Resolves a path for operations where the target may not exist yet.
 * Validates string shape and blocks obviously sensitive locations.
 * @param {string} filePath
 * @returns {{ valid: boolean, resolved: string, error?: string }}
 */
 function resolveWritablePath(filePath) {
  if (!filePath || typeof filePath !== 'string') {
    return { valid: false, resolved: '', error: 'Invalid path' };
  }
  let resolved;
  try {
    resolved = path.normalize(path.resolve(filePath));
  } catch (err) {
    return { valid: false, resolved: '', error: 'Invalid path format' };
  }
  if (resolved.includes('\0')) {
    return { valid: false, resolved: '', error: 'Null byte in path' };
  }
  if (!isPathAccessible(resolved)) {
    return { valid: false, resolved, error: 'Path is not accessible' };
  }
  return { valid: true, resolved };
 }
 /**
 * Checks if a resolved path is within allowed directories
 * For an editor app, we allow access to all user-accessible paths
 * but log any suspicious access attempts
 * @param {string} resolvedPath - The resolved absolute path
 * @returns {boolean}
 */
 function isPathAccessible(resolvedPath) {
  // Block access to sensitive system directories
  const blockedPaths = [
    '/etc/passwd', '/etc/shadow', '/root',
    'C:\\Windows\\System32', 'C:\\Windows\\System',
    '/System', '/private/etc'
  ];
  const normalizedPath = resolvedPath.toLowerCase();
  for (const blocked of blockedPaths) {
    if (normalizedPath.startsWith(blocked.toLowerCase())) {
      console.warn('[SECURITY] Blocked access to sensitive path:', resolvedPath);
      return false;
    }
  }
  return true;
 }
 module.exports = { getAllowedDirectories, validatePath, resolveWritablePath, isPathAccessible };
@@ -0,0 +1,114 @@
 // src/main/window/index.js
 // Main window creation
 const { app, BrowserWindow } = require('electron');
 const path = require('path');
 const fs = require('fs');
 const state = require('./state');
 const menu = require('../menu');
 function createMainWindow() {
  const bounds = state.load();
  const win = new BrowserWindow({
    width: bounds.width,
    height: bounds.height,
    x: bounds.x,
    y: bounds.y,
    show: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      spellcheck: true
    },
    icon: path.join(__dirname, '../../../assets/icon.png')
  });
  // Dev (Vite): load the running dev server so .tsx is transformed on the fly.
  // Production (running from dist/ directly): load the built renderer at the
  //   relative path from this file.
  // Production (packaged installer build): the renderer ships under
  //   process.resourcesPath/renderer (configured via build.extraResources in
  //   package.json) — not inside the asar.
  // VITE_DEV_SERVER_URL is set by `npm run dev` via cross-env.
  // app.isPackaged is set by electron-builder for installer builds.
  const devServerUrl = process.env.VITE_DEV_SERVER_URL;
  if (!app.isPackaged && devServerUrl) {
    console.log('[WINDOW] Dev mode — loading', devServerUrl);
    win.loadURL(devServerUrl);
  } else {
    const rendererIndex = app.isPackaged
      ? path.join(process.resourcesPath, 'renderer', 'index.html')
      : path.join(__dirname, '../../../dist/renderer/index.html');
    if (app.isPackaged) {
      try {
        fs.accessSync(rendererIndex);
      } catch {
        console.error(
          '[WINDOW] Renderer not found at',
          rendererIndex,
          '— did you run `npm run build:renderer` before packaging?',
        );
      }
    }
    console.log('[WINDOW] Production mode — loading', rendererIndex);
    win.loadFile(rendererIndex);
  }
  // Show window only after content is ready — avoids blank flash
  win.once('ready-to-show', () => {
    win.show();
  });
  menu.register(win);
  // Use 'close' (fires before destruction) — 'closed' fires after the
  // BrowserWindow object is destroyed, so getBounds() would throw.
  win.on('close', () => {
    if (!win.isDestroyed()) state.save(win);
  });
  // Spell check context menu
  win.webContents.on('context-menu', (event, params) => {
    const { Menu, MenuItem } = require('electron');
    const ctxMenu = new Menu();
    // Add spell check suggestions
    if (params.misspelledWord) {
      for (const suggestion of params.dictionarySuggestions) {
        ctxMenu.append(new MenuItem({
          label: suggestion,
          click: () => win.webContents.replaceMisspelling(suggestion)
        }));
      }
      if (params.dictionarySuggestions.length > 0) {
        ctxMenu.append(new MenuItem({ type: 'separator' }));
      }
      ctxMenu.append(new MenuItem({
        label: 'Add to Dictionary',
        click: () => win.webContents.session.addWordToSpellCheckerDictionary(params.misspelledWord)
      }));
      ctxMenu.append(new MenuItem({ type: 'separator' }));
    }
    // Standard context menu items
    ctxMenu.append(new MenuItem({ role: 'cut' }));
    ctxMenu.append(new MenuItem({ role: 'copy' }));
    ctxMenu.append(new MenuItem({ role: 'paste' }));
    ctxMenu.append(new MenuItem({ role: 'selectAll' }));
    ctxMenu.popup();
  });
  // Wait for the page to fully load before sending file data
  win.webContents.on('did-finish-load', () => {
    console.log('Window finished loading');
    // Don't open file here - wait for renderer-ready signal
    // The renderer will send renderer-ready when TabManager is initialized
  });
  return win;
 }
 module.exports = { createMainWindow };
@@ -0,0 +1,27 @@
 // src/main/window/state.js
 // Window state persistence (size, position)
 const { app } = require('electron');
 const path = require('path');
 const fs = require('fs');
 const stateFile = path.join(app.getPath('userData'), 'window-state.json');
 function load() {
  try {
    return JSON.parse(fs.readFileSync(stateFile, 'utf8'));
  } catch {
    return { width: 1200, height: 800 };
  }
 }
 function save(win) {
  const bounds = win.getBounds();
  try {
    fs.writeFileSync(stateFile, JSON.stringify(bounds));
  } catch {
    /* ignore */
  }
 }
 module.exports = { load, save };
@@ -655,7 +655,7 @@ class WordTemplateExporter {
     */
    parseInlineFormatting(text) {
        let xml = '';
-        let pos = 0;
+        const pos = 0;
        // Patterns for inline formatting
        const patterns = [
@@ -0,0 +1,12 @@
 const { PluginAPI } = require('../../plugin-api');
 class SamplePlugin extends PluginAPI {
  init(context) {
    this.context = context;
    context.commands.register('hello', 'Sample: Hello World', () => {
      console.log('[SamplePlugin] Hello from the plugin system!');
    });
  }
 }
 module.exports = { Plugin: SamplePlugin };
@@ -0,0 +1,13 @@
 {
  "id": "_sample",
  "name": "Sample Plugin",
  "version": "1.0.0",
  "description": "Demonstrates the plugin system. Safe to delete.",
  "icon": "puzzle",
  "extensionPoints": {
    "commands": [
      { "id": "hello", "label": "Sample: Hello World", "shortcut": "" }
    ]
  },
  "settings": []
 }
@@ -0,0 +1,87 @@
 const HISTORY_KEY = 'plugins.writing-studio.history';
 class GoalTracker {
  /**
   * @param {object} store - { get(key), set(key, value) } settings backend
   */
  constructor(store) {
    this.store = store;
  }
  _getHistory() {
    const raw = this.store.get(HISTORY_KEY);
    return raw ? JSON.parse(raw) : {};
  }
  _setHistory(history) {
    this.store.set(HISTORY_KEY, JSON.stringify(history));
  }
  _setHistoryDay(dateStr, data) {
    const history = this._getHistory();
    history[dateStr] = data;
    this._setHistory(history);
  }
  addWords(count) {
    const today = new Date().toISOString().split('T')[0];
    const history = this._getHistory();
    if (!history[today]) {
      history[today] = { words: 0, sessions: 0 };
    }
    history[today].words += count;
    history[today].sessions += 1;
    this._setHistory(history);
  }
  getDailyProgress(goal) {
    const today = new Date().toISOString().split('T')[0];
    const history = this._getHistory();
    const written = history[today]?.words || 0;
    return { written, goal, pct: goal > 0 ? Math.min(100, Math.round((written / goal) * 100)) : 0 };
  }
  getStreak(goal) {
    const history = this._getHistory();
    let streak = 0;
    const d = new Date();
    for (let i = 0; i < 365; i++) {
      const key = d.toISOString().split('T')[0];
      const day = history[key];
      if (day && day.words >= goal) {
        streak++;
        d.setDate(d.getDate() - 1);
      } else {
        break;
      }
    }
    return streak;
  }
  getLast30Days() {
    const history = this._getHistory();
    const days = [];
    const d = new Date();
    for (let i = 0; i < 30; i++) {
      const key = d.toISOString().split('T')[0];
      const day = history[key];
      days.push({ date: key, words: day?.words || 0 });
      d.setDate(d.getDate() - 1);
    }
    return days.reverse();
  }
  getWeeklyTotal() {
    const history = this._getHistory();
    let total = 0;
    const d = new Date();
    for (let i = 0; i < 7; i++) {
      const key = d.toISOString().split('T')[0];
      if (history[key]) total += history[key].words || 0;
      d.setDate(d.getDate() - 1);
    }
    return total;
  }
 }
 module.exports = { GoalTracker };
@@ -0,0 +1,102 @@
 const { PluginAPI } = require('../../../plugins/plugin-api');
 const { SprintEngine } = require('./sprint-engine');
 const { GoalTracker } = require('./goal-tracker');
 const { SnapshotManager } = require('./snapshot-manager');
 const { ProjectManager } = require('./project-manager');
 class WritingStudioPlugin extends PluginAPI {
  init(context) {
    this.context = context;
    this.sprintEngine = new SprintEngine({
      onEvent: (name, data) => context.events.emit(name, data)
    });
    this.goalTracker = new GoalTracker(context.settings);
    this.snapshotManager = new SnapshotManager(context.settings);
    this.projectManager = new ProjectManager({
      readFile: (p) => context.ipc.invoke('read-file', p),
      writeFile: (p, c) => context.ipc.invoke('write-file', p, c),
      fileExists: (p) => context.ipc.invoke('path-exists', p),
      listDir: (p) => context.ipc.invoke('list-directory', p)
    });
    this._engines = {
      sprint: this.sprintEngine,
      goals: this.goalTracker,
      snapshots: this.snapshotManager,
      projects: this.projectManager
    };
    this._registerCommands(context);
    this._registerStatusBar(context);
  }
  _registerCommands(context) {
    const { sprintEngine, snapshotManager, goalTracker } = this;
    context.commands.register('start-sprint', 'Studio: Start Sprint', () => {
      const duration = context.settings.get('sprintDuration') || 25;
      const content = context.editor.getContent() || '';
      const words = content.split(/\s+/).filter(Boolean).length;
      sprintEngine.start(duration, words);
    }, 'Ctrl+Alt+S');
    context.commands.register('stop-sprint', 'Studio: Stop Sprint', () => {
      if (!sprintEngine.isActive()) return;
      const content = context.editor.getContent() || '';
      const words = content.split(/\s+/).filter(Boolean).length;
      const result = sprintEngine.stop(words);
      goalTracker.addWords(result.wordDelta);
      context.events.emit('sprint:stopped', result);
    }, 'Ctrl+Alt+Shift+S');
    context.commands.register('take-snapshot', 'Studio: Take Snapshot', () => {
      const content = context.editor.getContent() || '';
      snapshotManager.create(content, 'manual');
      context.events.emit('snapshot:created', {});
    }, 'Ctrl+Alt+N');
    context.commands.register('restore-last-snapshot', 'Studio: Restore Last Snapshot', () => {
      const snaps = snapshotManager.list();
      if (snaps.length === 0) return;
      const content = snapshotManager.restore(snaps[0].id);
      context.editor.insertAtCursor(content);
    }, 'Ctrl+Alt+Z');
    context.commands.register('new-project', 'Studio: New Project', () => {
      context.events.emit('studio:new-project', {});
    });
    context.commands.register('compile-manuscript', 'Studio: Compile Manuscript', () => {
      context.events.emit('studio:compile', {});
    }, 'Ctrl+Alt+E');
    context.commands.register('proofread-document', 'Studio: Proofread Document', () => {
      if (context.events.hasHandler('ai:analyze')) {
        const content = context.editor.getContent() || '';
        context.events.emit('ai:analyze', { text: content, type: 'grammar' });
      }
    }, 'Ctrl+Alt+G');
  }
  _registerStatusBar(context) {
    context.statusBar.registerIndicator('word-goal', {
      text: '0/1000',
      tooltip: 'Daily word goal progress'
    });
    context.statusBar.registerIndicator('sprint-timer', {
      text: '',
      tooltip: 'Writing sprint timer'
    });
  }
  deactivate() {
    if (this._sprintInterval) clearInterval(this._sprintInterval);
  }
  getEngines() {
    return this._engines;
  }
 }
 module.exports = { Plugin: WritingStudioPlugin };
@@ -0,0 +1,31 @@
 {
  "id": "writing-studio",
  "name": "Writing Studio",
  "version": "1.0.0",
  "description": "Manuscript management, writing sprints, goal tracking, snapshots, and smart proofreading",
  "icon": "pen-tool",
  "extensionPoints": {
    "sidebar": [
      { "id": "manuscript", "title": "Manuscript", "order": 30 },
      { "id": "goals", "title": "Goals", "order": 31 },
      { "id": "snapshots", "title": "Snapshots", "order": 32 },
      { "id": "proofread", "title": "Proofread", "order": 33 }
    ],
    "commands": [
      { "id": "start-sprint", "label": "Studio: Start Sprint", "shortcut": "Ctrl+Alt+S" },
      { "id": "stop-sprint", "label": "Studio: Stop Sprint", "shortcut": "Ctrl+Alt+Shift+S" },
      { "id": "take-snapshot", "label": "Studio: Take Snapshot", "shortcut": "Ctrl+Alt+N" },
      { "id": "restore-last-snapshot", "label": "Studio: Restore Last Snapshot", "shortcut": "Ctrl+Alt+Z" },
      { "id": "new-project", "label": "Studio: New Project", "shortcut": "" },
      { "id": "compile-manuscript", "label": "Studio: Compile Manuscript", "shortcut": "Ctrl+Alt+E" },
      { "id": "proofread-document", "label": "Studio: Proofread Document", "shortcut": "Ctrl+Alt+G" }
    ],
    "statusBar": { "indicators": ["sprint-timer", "word-goal"] }
  },
  "settings": [
    { "key": "dailyGoal", "type": "number", "default": 1000, "label": "Daily word goal" },
    { "key": "sprintDuration", "type": "number", "default": 25, "label": "Sprint duration (min)" },
    { "key": "autoSnapshotInterval", "type": "number", "default": 0, "label": "Auto-snapshot interval (min, 0=off)" },
    { "key": "maxSnapshots", "type": "number", "default": 50, "label": "Max snapshots to keep" }
  ]
 }
@@ -0,0 +1,99 @@
 function renderGoalsPanel(container, { engines, settings }) {
  const dailyGoal = settings.get('dailyGoal') || 1000;
  const progress = engines.goals.getDailyProgress(dailyGoal);
  const streak = engines.goals.getStreak(dailyGoal);
  const weekly = engines.goals.getWeeklyTotal();
  const last30 = engines.goals.getLast30Days();
  container.replaceChildren();
  const panel = document.createElement('div');
  panel.className = 'ws-panel';
  // Daily progress section
  const section1 = document.createElement('div');
  section1.className = 'ws-section';
  const heading1 = document.createElement('h3');
  heading1.className = 'ws-heading';
  heading1.textContent = 'Daily Progress';
  section1.appendChild(heading1);
  const bar = document.createElement('div');
  bar.className = 'ws-progress-bar';
  const fill = document.createElement('div');
  fill.className = 'ws-progress-fill';
  fill.style.width = progress.pct + '%';
  bar.appendChild(fill);
  section1.appendChild(bar);
  const row = document.createElement('div');
  row.className = 'ws-stat-row';
  const label = document.createElement('span');
  label.textContent = progress.written.toLocaleString() + ' / ' + dailyGoal.toLocaleString() + ' words';
  const pct = document.createElement('span');
  pct.className = 'ws-pct';
  pct.textContent = progress.pct + '%';
  row.appendChild(label);
  row.appendChild(pct);
  section1.appendChild(row);
  panel.appendChild(section1);
  // Stats cards
  const section2 = document.createElement('div');
  section2.className = 'ws-section';
  const grid = document.createElement('div');
  grid.className = 'ws-stat-grid';
  const streakCard = document.createElement('div');
  streakCard.className = 'ws-stat-card';
  const streakVal = document.createElement('span');
  streakVal.className = 'ws-stat-value';
  streakVal.textContent = String(streak);
  const streakLbl = document.createElement('span');
  streakLbl.className = 'ws-stat-label';
  streakLbl.textContent = 'Day Streak';
  streakCard.appendChild(streakVal);
  streakCard.appendChild(streakLbl);
  const weekCard = document.createElement('div');
  weekCard.className = 'ws-stat-card';
  const weekVal = document.createElement('span');
  weekVal.className = 'ws-stat-value';
  weekVal.textContent = weekly.toLocaleString();
  const weekLbl = document.createElement('span');
  weekLbl.className = 'ws-stat-label';
  weekLbl.textContent = 'This Week';
  weekCard.appendChild(weekVal);
  weekCard.appendChild(weekLbl);
  grid.appendChild(streakCard);
  grid.appendChild(weekCard);
  section2.appendChild(grid);
  panel.appendChild(section2);
  // 30-day chart
  const section3 = document.createElement('div');
  section3.className = 'ws-section';
  const heading3 = document.createElement('h3');
  heading3.className = 'ws-heading';
  heading3.textContent = 'Last 30 Days';
  section3.appendChild(heading3);
  const chart = document.createElement('div');
  chart.className = 'ws-chart';
  const maxWords = Math.max(...last30.map(d => d.words), 1);
  for (const day of last30) {
    const barEl = document.createElement('div');
    const height = Math.max(2, (day.words / maxWords) * 60);
    barEl.className = 'ws-bar' + (day.words >= dailyGoal ? ' ws-bar-met' : '');
    barEl.style.height = height + 'px';
    barEl.title = day.date + ': ' + day.words + ' words';
    chart.appendChild(barEl);
  }
  section3.appendChild(chart);
  panel.appendChild(section3);
  container.appendChild(panel);
 }
 module.exports = { renderGoalsPanel };
@@ -0,0 +1,124 @@
 function renderManuscriptPanel(container, { engines, editor, settings }) {
  const projectDir = settings.get('projectDir');
  container.replaceChildren();
  const panel = document.createElement('div');
  panel.className = 'ws-panel';
  if (!projectDir) {
    const empty = document.createElement('div');
    empty.className = 'ws-empty';
    const p = document.createElement('p');
    p.textContent = 'No manuscript project open';
    empty.appendChild(p);
    const btn = document.createElement('button');
    btn.className = 'ws-btn ws-btn-primary';
    btn.id = 'ws-new-project';
    btn.textContent = 'New Project';
    btn.addEventListener('click', () => {
      const name = prompt('Project name:');
      if (!name) return;
      settings.set('projectDir', name);
      renderManuscriptPanel(container, { engines, editor, settings });
    });
    empty.appendChild(btn);
    panel.appendChild(empty);
    container.appendChild(panel);
    return;
  }
  const project = engines.projects.loadProject(projectDir);
  if (!project) {
    const empty = document.createElement('div');
    empty.className = 'ws-empty';
    const p = document.createElement('p');
    p.textContent = 'Project not found at ' + projectDir;
    empty.appendChild(p);
    const btn = document.createElement('button');
    btn.className = 'ws-btn';
    btn.id = 'ws-clear-project';
    btn.textContent = 'Clear Project';
    btn.addEventListener('click', () => {
      settings.set('projectDir', null);
      renderManuscriptPanel(container, { engines, editor, settings });
    });
    empty.appendChild(btn);
    panel.appendChild(empty);
    container.appendChild(panel);
    return;
  }
  const stats = engines.projects.getStats(projectDir);
  // Project title + progress
  const section1 = document.createElement('div');
  section1.className = 'ws-section';
  const heading = document.createElement('h3');
  heading.className = 'ws-heading';
  heading.textContent = project.title;
  section1.appendChild(heading);
  const bar = document.createElement('div');
  bar.className = 'ws-progress-bar';
  const fill = document.createElement('div');
  fill.className = 'ws-progress-fill';
  fill.style.width = stats.pctComplete + '%';
  bar.appendChild(fill);
  section1.appendChild(bar);
  const row = document.createElement('div');
  row.className = 'ws-stat-row';
  const label = document.createElement('span');
  label.textContent = stats.totalWords.toLocaleString() + ' / ' + stats.targetWords.toLocaleString() + ' words';
  const pct = document.createElement('span');
  pct.className = 'ws-pct';
  pct.textContent = stats.pctComplete + '%';
  row.appendChild(label);
  row.appendChild(pct);
  section1.appendChild(row);
  panel.appendChild(section1);
  // Chapters list
  const section2 = document.createElement('div');
  section2.className = 'ws-section';
  const heading2 = document.createElement('h3');
  heading2.className = 'ws-heading';
  heading2.textContent = 'Chapters (' + project.chapters.length + ')';
  section2.appendChild(heading2);
  const chList = document.createElement('div');
  chList.className = 'ws-chapter-list';
  for (const ch of project.chapters) {
    const item = document.createElement('div');
    item.className = 'ws-chapter-item';
    const title = document.createElement('span');
    title.className = 'ws-chapter-title';
    title.textContent = ch.title || ch.file;
    const status = document.createElement('span');
    status.className = 'ws-chapter-status ws-status-' + (ch.status || 'draft');
    status.textContent = ch.status || 'draft';
    item.appendChild(title);
    item.appendChild(status);
    chList.appendChild(item);
  }
  section2.appendChild(chList);
  panel.appendChild(section2);
  // Compile button
  const section3 = document.createElement('div');
  section3.className = 'ws-section';
  const compileBtn = document.createElement('button');
  compileBtn.className = 'ws-btn ws-btn-primary';
  compileBtn.id = 'ws-compile';
  compileBtn.textContent = 'Compile Manuscript';
  compileBtn.addEventListener('click', () => {
    const compiled = engines.projects.compileManuscript(projectDir);
    editor.insertAtCursor(compiled);
  });
  section3.appendChild(compileBtn);
  panel.appendChild(section3);
  container.appendChild(panel);
 }
 module.exports = { renderManuscriptPanel };
@@ -0,0 +1,97 @@
 function renderProofreadPanel(container, { events, editor }) {
  const hasAI = events.hasHandler('ai:analyze');
  container.replaceChildren();
  const panel = document.createElement('div');
  panel.className = 'ws-panel';
  const section = document.createElement('div');
  section.className = 'ws-section';
  const btn = document.createElement('button');
  btn.className = 'ws-btn ws-btn-primary';
  btn.id = 'ws-proofread';
  btn.textContent = hasAI ? 'Check Document' : 'AI Plugin Required';
  btn.disabled = !hasAI;
  section.appendChild(btn);
  if (!hasAI) {
    const note = document.createElement('p');
    note.className = 'ws-muted';
    note.textContent = 'Install the AI Assistant plugin to enable proofreading.';
    section.appendChild(note);
  }
  panel.appendChild(section);
  const issuesList = document.createElement('div');
  issuesList.className = 'ws-issues-list';
  issuesList.id = 'ws-issues';
  panel.appendChild(issuesList);
  container.appendChild(panel);
  if (!hasAI) return;
  container.querySelector('#ws-proofread').addEventListener('click', () => {
    const content = editor.getContent() || '';
    events.emit('ai:analyze', {
      text: content,
      type: 'grammar',
      callback: (result) => {
        if (result && result.issues) {
          renderIssues(issuesList, result.issues);
        }
      }
    });
  });
 }
 function renderIssues(container, issues) {
  container.replaceChildren();
  if (!issues || issues.length === 0) {
    const p = document.createElement('p');
    p.className = 'ws-muted';
    p.textContent = 'No issues found.';
    container.appendChild(p);
    return;
  }
  for (let i = 0; i < issues.length; i++) {
    const issue = issues[i];
    const item = document.createElement('div');
    item.className = 'ws-issue-item';
    const type = document.createElement('div');
    type.className = 'ws-issue-type';
    type.textContent = (issue.type || 'grammar').toUpperCase();
    item.appendChild(type);
    const text = document.createElement('div');
    text.className = 'ws-issue-text';
    text.textContent = issue.message || issue.text || '';
    item.appendChild(text);
    if (issue.suggestion) {
      const sug = document.createElement('div');
      sug.className = 'ws-issue-suggestion';
      sug.textContent = 'Suggestion: ' + issue.suggestion;
      item.appendChild(sug);
    }
    const actions = document.createElement('div');
    actions.className = 'ws-issue-actions';
    for (const [action, label] of [['accept', 'Accept'], ['dismiss', 'Dismiss']]) {
      const actionBtn = document.createElement('button');
      actionBtn.className = 'ws-btn ws-btn-sm';
      actionBtn.textContent = label;
      actionBtn.addEventListener('click', () => {
        item.remove();
      });
      actions.appendChild(actionBtn);
    }
    item.appendChild(actions);
    container.appendChild(item);
  }
 }
 module.exports = { renderProofreadPanel };
@@ -0,0 +1,81 @@
 function renderSnapshotsPanel(container, { engines, editor }) {
  const snapshots = engines.snapshots.list();
  container.replaceChildren();
  const panel = document.createElement('div');
  panel.className = 'ws-panel';
  // Header with take snapshot button
  const section = document.createElement('div');
  section.className = 'ws-section';
  const btn = document.createElement('button');
  btn.className = 'ws-btn ws-btn-primary';
  btn.id = 'ws-take-snapshot';
  btn.textContent = 'Take Snapshot';
  section.appendChild(btn);
  const count = document.createElement('span');
  count.className = 'ws-muted';
  count.textContent = snapshots.length + ' snapshots';
  section.appendChild(count);
  panel.appendChild(section);
  // Snapshot list
  const list = document.createElement('div');
  list.className = 'ws-snapshot-list';
  for (const s of snapshots) {
    const item = document.createElement('div');
    item.className = 'ws-snapshot-item';
    const header = document.createElement('div');
    header.className = 'ws-snapshot-header';
    const sLabel = document.createElement('span');
    sLabel.className = 'ws-snapshot-label';
    sLabel.textContent = s.label;
    const sWords = document.createElement('span');
    sWords.textContent = s.wordCount + ' words';
    header.appendChild(sLabel);
    header.appendChild(sWords);
    item.appendChild(header);
    const time = document.createElement('div');
    time.className = 'ws-snapshot-time';
    time.textContent = new Date(s.timestamp).toLocaleString();
    item.appendChild(time);
    const actions = document.createElement('div');
    actions.className = 'ws-snapshot-actions';
    for (const [action, text, cls] of [['restore', 'Restore', ''], ['diff', 'Diff', ''], ['delete', 'Delete', 'ws-btn-danger']]) {
      const actionBtn = document.createElement('button');
      actionBtn.className = 'ws-btn ws-btn-sm' + (cls ? ' ' + cls : '');
      actionBtn.textContent = text;
      actionBtn.addEventListener('click', () => {
        if (action === 'restore') {
          const content = engines.snapshots.restore(s.id);
          editor.insertAtCursor(content);
        } else if (action === 'delete') {
          engines.snapshots.delete(s.id);
          renderSnapshotsPanel(container, { engines, editor });
        } else if (action === 'diff') {
          const current = editor.getContent() || '';
          const result = engines.snapshots.diff(s.id, current);
          alert('+' + result.added + ' lines added, -' + result.removed + ' lines removed');
        }
      });
      actions.appendChild(actionBtn);
    }
    item.appendChild(actions);
    list.appendChild(item);
  }
  panel.appendChild(list);
  container.appendChild(panel);
  // Take snapshot button handler
  container.querySelector('#ws-take-snapshot').addEventListener('click', () => {
    const content = editor.getContent() || '';
    engines.snapshots.create(content, 'manual');
    renderSnapshotsPanel(container, { engines, editor });
  });
 }
 module.exports = { renderSnapshotsPanel };
@@ -0,0 +1,74 @@
 class ProjectManager {
  /**
   * @param {object} fs - { readFile(path), writeFile(path, content), fileExists(path), listDir(path) }
   */
  constructor(fs) {
    this.fs = fs;
  }
  createProject(dir, opts) {
    const project = {
      title: opts.title,
      type: opts.type || 'manuscript',
      target: { words: opts.targetWords || 0, deadline: opts.deadline || null },
      chapters: [],
      metadata: opts.metadata || {}
    };
    this.fs.writeFile(dir + '/.project.json', JSON.stringify(project, null, 2));
    return project;
  }
  loadProject(dir) {
    const raw = this.fs.readFile(dir + '/.project.json');
    if (!raw) return null;
    return JSON.parse(raw);
  }
  _saveProject(dir, project) {
    this.fs.writeFile(dir + '/.project.json', JSON.stringify(project, null, 2));
  }
  addChapter(dir, chapter) {
    const project = this.loadProject(dir);
    if (!project) throw new Error('Project not found');
    project.chapters.push(chapter);
    this._saveProject(dir, project);
  }
  updateChapter(dir, index, updates) {
    const project = this.loadProject(dir);
    if (!project) throw new Error('Project not found');
    Object.assign(project.chapters[index], updates);
    this._saveProject(dir, project);
  }
  compileManuscript(dir) {
    const project = this.loadProject(dir);
    if (!project) throw new Error('Project not found');
    const parts = [];
    for (const ch of project.chapters) {
      const content = this.fs.readFile(dir + '/' + ch.file);
      if (content) parts.push(content);
    }
    return parts.join('\n\n---\n\n');
  }
  getStats(dir) {
    const project = this.loadProject(dir);
    if (!project) throw new Error('Project not found');
    let totalWords = 0;
    for (const ch of project.chapters) {
      const content = this.fs.readFile(dir + '/' + ch.file);
      if (content) totalWords += content.split(/\s+/).filter(Boolean).length;
    }
    const target = project.target.words || 0;
    return {
      totalWords,
      chapterCount: project.chapters.length,
      targetWords: target,
      pctComplete: target > 0 ? Math.min(100, Math.round((totalWords / target) * 100)) : 0
    };
  }
 }
 module.exports = { ProjectManager };
@@ -0,0 +1,73 @@
 class SnapshotManager {
  /**
   * @param {object} store - { get(key), set(key, value) }
   * @param {string} storeKey - settings key for snapshots
   */
  constructor(store, storeKey = 'plugins.writing-studio.snapshots') {
    this.store = store;
    this.storeKey = storeKey;
  }
  _getAll() {
    const raw = this.store.get(this.storeKey);
    return raw ? JSON.parse(raw) : [];
  }
  _saveAll(snaps) {
    this.store.set(this.storeKey, JSON.stringify(snaps));
  }
  create(content, label = 'manual') {
    const snaps = this._getAll();
    const snap = {
      id: 'snap-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8),
      timestamp: new Date().toISOString(),
      content,
      wordCount: content.split(/\s+/).filter(Boolean).length,
      label
    };
    snaps.unshift(snap);
    this._saveAll(snaps);
    return snap;
  }
  list() {
    return this._getAll();
  }
  getById(id) {
    return this._getAll().find(s => s.id === id) || null;
  }
  restore(id) {
    const snap = this.getById(id);
    if (!snap) throw new Error('Snapshot not found');
    return snap.content;
  }
  delete(id) {
    const snaps = this._getAll().filter(s => s.id !== id);
    this._saveAll(snaps);
  }
  diff(id, currentContent) {
    const snap = this.getById(id);
    if (!snap) throw new Error('Snapshot not found');
    const oldLines = snap.content.split('\n');
    const newLines = currentContent.split('\n');
    const oldSet = new Set(oldLines);
    const newSet = new Set(newLines);
    let added = 0;
    let removed = 0;
    for (const line of newLines) { if (!oldSet.has(line)) added++; }
    for (const line of oldLines) { if (!newSet.has(line)) removed++; }
    return { added, removed };
  }
  prune(keepCount) {
    const snaps = this._getAll();
    this._saveAll(snaps.slice(0, keepCount));
  }
 }
 module.exports = { SnapshotManager };
@@ -0,0 +1,51 @@
 class SprintEngine {
  /**
   * @param {object} opts
   * @param {function} opts.onEvent - callback(event_name, data)
   */
  constructor(opts = {}) {
    this.onEvent = opts.onEvent || (() => {});
    this._active = false;
    this._startTime = null;
    this._duration = 0;
    this._initialWords = 0;
  }
  start(durationMinutes, currentWordCount) {
    if (this._active) throw new Error('Sprint already active');
    this._active = true;
    this._startTime = Date.now();
    this._duration = durationMinutes * 60 * 1000;
    this._initialWords = currentWordCount;
  }
  stop(currentWordCount) {
    if (!this._active) throw new Error('No active sprint');
    const elapsed = Date.now() - this._startTime;
    const wordDelta = Math.max(0, currentWordCount - this._initialWords);
    const elapsedMinutes = elapsed / 60000;
    const wpm = elapsedMinutes > 0 ? Math.round(wordDelta / elapsedMinutes) : 0;
    this._active = false;
    this._startTime = null;
    return { wordDelta, elapsed, wpm };
  }
  tick(elapsedMs) {
    if (!this._active) return;
    const remaining = Math.max(0, this._duration - elapsedMs);
    this.onEvent('sprint:tick', { remaining, elapsed: elapsedMs });
    if (remaining <= 0) {
      this._active = false;
      this.onEvent('sprint:complete', { expired: true });
    }
  }
  isActive() { return this._active; }
  getRemaining() {
    if (!this._active) return 0;
    return Math.max(0, this._duration - (Date.now() - this._startTime));
  }
 }
 module.exports = { SprintEngine };
@@ -0,0 +1,43 @@
 class EventBus {
  constructor() {
    this.listeners = new Map();
  }
  on(event, handler) {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, []);
    }
    this.listeners.get(event).push(handler);
  }
  off(event, handler) {
    if (!handler) {
      this.listeners.delete(event);
      return;
    }
    const handlers = this.listeners.get(event);
    if (handlers) {
      const idx = handlers.indexOf(handler);
      if (idx !== -1) handlers.splice(idx, 1);
    }
  }
  emit(event, payload) {
    const handlers = this.listeners.get(event);
    if (!handlers) return;
    for (const handler of handlers) {
      try {
        handler(payload);
      } catch (err) {
        console.error(`[EventBus] Error in handler for "${event}":`, err);
      }
    }
  }
  hasHandler(event) {
    const handlers = this.listeners.get(event);
    return handlers !== undefined && handlers !== null && handlers.length > 0;
  }
 }
 module.exports = { EventBus };
@@ -0,0 +1,23 @@
 class PluginAPI {
  /**
   * Called when the plugin is discovered and loaded.
   * Receives a scoped context object with APIs.
   * @param {object} context - Plugin context (sidebar, commands, settings, etc.)
   */
  init(context) {
    this.context = context;
  }
  /** Called when the plugin is activated (e.g., sidebar panel clicked). */
  activate() {}
  /** Called when the plugin is deactivated. */
  deactivate() {}
  /** Returns the parsed manifest.json for this plugin. */
  getManifest() {
    return this._manifest || null;
  }
 }
 module.exports = { PluginAPI };
@@ -0,0 +1,70 @@
 class PluginContext {
  /**
   * @param {object} deps - Injected dependencies
   * @param {string} deps.pluginId - Plugin unique ID (for namespacing)
   * @param {object} deps.sidebar - SidebarManager.registerPanel
   * @param {object} deps.commands - CommandPalette.register
   * @param {object} deps.statusBar - StatusBar.registerIndicator
   * @param {object} deps.eventBus - EventBus instance
   * @param {object} deps.settings - { get, set, onChanged }
   * @param {object} deps.editor - { getContent, getSelection, insertAtCursor, onContentChanged }
   * @param {object} deps.ipc - { invoke, on }
   * @param {object} deps.exportHooks - { preHooks: [], postHooks: [] }
   */
  constructor(deps) {
    const { pluginId, sidebar, commands, statusBar, eventBus, settings, editor, ipc, exportHooks } = deps;
    this.sidebar = {
      registerPanel: (id, opts) => sidebar.registerPanel(`${pluginId}:${id}`, opts)
    };
    this.commands = {
      register: (id, label, handler, shortcut) => {
        const safeHandler = (...args) => {
          try {
            handler(...args);
          } catch (err) {
            console.error(`[Plugin:${pluginId}] Command "${id}" error:`, err);
          }
        };
        commands.register(`${pluginId}:${id}`, label, safeHandler, shortcut);
      }
    };
    this.statusBar = {
      registerIndicator: (id, opts) => statusBar.registerIndicator(`${pluginId}:${id}`, opts)
    };
    this.settings = {
      get: (key) => settings.get(`plugins.${pluginId}.${key}`),
      set: (key, value) => settings.set(`plugins.${pluginId}.${key}`, value),
      onChanged: (key, cb) => settings.onChanged(`plugins.${pluginId}.${key}`, cb)
    };
    this.editor = {
      getContent: () => editor.getContent(),
      getSelection: () => editor.getSelection(),
      insertAtCursor: (text) => editor.insertAtCursor(text),
      onContentChanged: (cb) => editor.onContentChanged(cb)
    };
    this.events = {
      on: (event, handler) => eventBus.on(event, handler),
      off: (event, handler) => eventBus.off(event, handler),
      emit: (event, payload) => eventBus.emit(event, payload),
      hasHandler: (event) => eventBus.hasHandler(event)
    };
    this.ipc = {
      invoke: (channel, ...args) => ipc.invoke(channel, ...args),
      on: (channel, handler) => ipc.on(channel, handler)
    };
    this.exports = {
      registerPreHook: (handler) => { if (exportHooks) exportHooks.preHooks.push(handler); },
      registerPostHook: (handler) => { if (exportHooks) exportHooks.postHooks.push(handler); }
    };
  }
 }
 module.exports = { PluginContext };
@@ -0,0 +1,75 @@
 const fs = require('fs');
 const path = require('path');
 class PluginLoader {
  /**
   * @param {string[]} searchDirs - Directories to scan for plugin folders
   */
  constructor(searchDirs = []) {
    this.searchDirs = searchDirs;
    this.loadedIds = new Set();
  }
  /**
   * Discover plugins by scanning searchDirs for manifest.json files.
   * Returns array of { id, name, version, description, manifest, PluginClass, dir }
   */
  discoverPlugins() {
    const plugins = [];
    for (const dir of this.searchDirs) {
      if (!fs.existsSync(dir)) continue;
      const entries = fs.readdirSync(dir, { withFileTypes: true });
      for (const entry of entries) {
        if (!entry.isDirectory()) continue;
        const pluginDir = path.join(dir, entry.name);
        const manifestPath = path.join(pluginDir, 'manifest.json');
        if (!fs.existsSync(manifestPath)) continue;
        try {
          const raw = fs.readFileSync(manifestPath, 'utf-8');
          const manifest = JSON.parse(raw);
          this.validateManifest(manifest);
          let PluginClass = null;
          const indexPath = path.join(pluginDir, 'index.js');
          if (fs.existsSync(indexPath)) {
            try {
              const loaded = require(indexPath);
              PluginClass = loaded.Plugin || loaded.default || null;
            } catch (err) {
              console.error(`[PluginLoader] Failed to load index.js for "${manifest.id}":`, err.message);
              continue;
            }
          }
          plugins.push({
            id: manifest.id,
            name: manifest.name,
            version: manifest.version,
            description: manifest.description,
            manifest,
            PluginClass,
            dir: pluginDir
          });
          this.loadedIds.add(manifest.id);
        } catch (err) {
          console.error(`[PluginLoader] Skipping plugin in ${pluginDir}:`, err.message);
        }
      }
    }
    return plugins;
  }
  /**
   * Validate a manifest object. Throws on invalid.
   */
  validateManifest(manifest) {
    if (!manifest.id) throw new Error('Manifest missing required field: id');
    if (!manifest.name) throw new Error('Manifest missing required field: name');
    if (!manifest.version) throw new Error('Manifest missing required field: version');
    if (!manifest.description) throw new Error('Manifest missing required field: description');
    if (this.loadedIds.has(manifest.id)) {
      throw new Error(`Duplicate plugin id: "${manifest.id}"`);
    }
    return true;
  }
 }
 module.exports = { PluginLoader };
@@ -0,0 +1,80 @@
 const { PluginContext } = require('./plugin-context');
 const { PluginAPI } = require('./plugin-api');
 class PluginRegistry {
  constructor(deps) {
    this.deps = deps;
    this.plugins = new Map();
    this.exportHooks = { preHooks: [], postHooks: [] };
  }
  /**
   * Register a discovered plugin. Creates instance, builds context, calls init.
   * If init throws, plugin is NOT registered.
   */
  register(pluginInfo) {
    const { id, name, version, description, manifest, PluginClass, dir } = pluginInfo;
    let instance;
    if (PluginClass) {
      instance = new PluginClass();
    } else {
      instance = new PluginAPI();
    }
    instance._manifest = manifest;
    const context = new PluginContext({
      pluginId: id,
      sidebar: this.deps.sidebar,
      commands: this.deps.commands,
      statusBar: this.deps.statusBar,
      eventBus: this.deps.eventBus,
      settings: this.deps.settings,
      editor: this.deps.editor,
      ipc: this.deps.ipc,
      exportHooks: this.exportHooks
    });
    try {
      instance.init(context);
    } catch (err) {
      console.error(`[PluginRegistry] Plugin "${id}" init failed:`, err.message);
      return;
    }
    this.plugins.set(id, { id, name, version, description, manifest, instance, dir, context });
    console.log(`[PluginRegistry] Registered plugin: ${name} v${version}`);
  }
  getPlugin(id) {
    return this.plugins.get(id);
  }
  getAll() {
    return Array.from(this.plugins.values());
  }
  activate(id) {
    const plugin = this.plugins.get(id);
    if (plugin?.instance) {
      try {
        plugin.instance.activate();
      } catch (err) {
        console.error(`[PluginRegistry] Plugin "${id}" activate error:`, err.message);
      }
    }
  }
  deactivate(id) {
    const plugin = this.plugins.get(id);
    if (plugin?.instance) {
      try {
        plugin.instance.deactivate();
      } catch (err) {
        console.error(`[PluginRegistry] Plugin "${id}" deactivate error:`, err.message);
      }
    }
  }
 }
 module.exports = { PluginRegistry };
@@ -0,0 +1,23 @@
 class SettingsStore {
  /**
   * @param {object} backend - { get(key), set(key, value) } backed by main process store
   */
  constructor(backend) {
    this.backend = backend;
  }
  get(key) {
    return this.backend.get(key);
  }
  set(key, value) {
    this.backend.set(key, value);
  }
  onChanged(key, callback) {
    // Deferred: plugins read settings on init/activate for MVP.
    // Full change notification requires IPC watcher in main process.
  }
 }
 module.exports = { SettingsStore };
@@ -9,7 +9,7 @@
 * - All IPC channels are explicitly whitelisted
 * - Prevents XSS from escalating to full system access
 *
- * @version 4.0.0
+ * @version 4.4.1
 */
 const { contextBridge, ipcRenderer } = require('electron');
@@ -23,6 +23,7 @@ const ALLOWED_SEND_CHANNELS = [
  'save-recent-files',
  'clear-recent-files',
  'renderer-ready',
  'select-custom-css',
  // Theme
  'get-theme',
@@ -84,12 +85,6 @@ const ALLOWED_SEND_CHANNELS = [
  'get-pdf-page-count',
  'select-pdf-folder',
  // ASCII generator (separate window)
  'open-ascii-generator',
  // Table generator (separate window)
  'open-table-generator',
  // Insert generated content
  'insert-generated-content',
@@ -101,6 +96,14 @@ const ALLOWED_SEND_CHANNELS = [
  // File Explorer
  'list-directory',
  'read-file',
  'write-file',
  'delete-file',
  'ensure-directory',
  'path-exists',
  'is-directory',
  'copy-path',
  'move-path',
  // Git
  'git-status',
@@ -127,7 +130,11 @@ const ALLOWED_SEND_CHANNELS = [
  'export',
  // Git diff
-  'git-diff'
+  'git-diff',
  // Plugin settings
  'plugin-settings:get',
  'plugin-settings:set'
 ];
 const ALLOWED_RECEIVE_CHANNELS = [
@@ -138,6 +145,8 @@ const ALLOWED_RECEIVE_CHANNELS = [
  'get-content-for-save',
  'get-content-for-spreadsheet',
  'recent-files-cleared',
  'load-custom-css',
  'clear-custom-css',
  // UI toggles
  'toggle-preview',
@@ -154,15 +163,10 @@ const ALLOWED_RECEIVE_CHANNELS = [
  // Font
  'adjust-font-size',
  // Print
  'print-preview',
  'print-preview-styled',
  // Export dialogs
  'show-export-dialog',
  'show-batch-dialog',
  'show-universal-converter-dialog',
  'show-table-generator',
  'show-pdf-editor-dialog',
  // Converter dialogs
@@ -198,12 +202,7 @@ const ALLOWED_RECEIVE_CHANNELS = [
  'pdf-operation-complete',
  'pdf-operation-error',
  // ASCII Art Generator
  'show-ascii-generator-window',
  'show-ascii-generator',
  // Table Generator
  'show-table-generator-window',
  // Header/Footer dialog
  'open-header-footer-dialog',
@@ -220,9 +219,13 @@ const ALLOWED_RECEIVE_CHANNELS = [
  // v4 menu-triggered events
  'load-template-menu',
  'toggle-command-palette',
  'toggle-sidebar-panel',
-  'toggle-bottom-panel'
+  'toggle-bottom-panel',
  // File dialog / directory listing
  'list-directory',
  'pick-folder',
  'pick-file'
 ];
 /**
@@ -321,7 +324,18 @@ contextBridge.exposeInMainWorld('electronAPI', {
    setCurrent: (filePath) => ipcRenderer.send('set-current-file', filePath),
    saveRecent: (recentFiles) => ipcRenderer.send('save-recent-files', recentFiles),
    clearRecent: () => ipcRenderer.send('clear-recent-files'),
-    rendererReady: () => ipcRenderer.send('renderer-ready')
+    rendererReady: () => ipcRenderer.send('renderer-ready'),
    read: (filePath) => ipcRenderer.invoke('read-file', filePath),
    write: (filePath, content) => ipcRenderer.invoke('write-file', { path: filePath, content }),
    delete: (filePath) => ipcRenderer.invoke('delete-file', filePath),
    ensureDir: (dirPath) => ipcRenderer.invoke('ensure-directory', dirPath),
    exists: (filePath) => ipcRenderer.invoke('path-exists', filePath),
    isDirectory: (filePath) => ipcRenderer.invoke('is-directory', filePath),
    copy: (source, destination) => ipcRenderer.invoke('copy-path', { source, destination }),
    move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination }),
    list: (dirPath) => ipcRenderer.invoke('list-directory', dirPath),
    pickFolder: () => ipcRenderer.invoke('pick-folder'),
    pickFile: () => ipcRenderer.invoke('pick-file')
  },
  // Theme Operations
@@ -409,11 +423,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
    toGif: (data) => ipcRenderer.send('video-gif', data)
  },
-  // Generator Windows
+  getAppVersion: () => ipcRenderer.invoke('get-app-version')
  generators: {
    openAscii: () => ipcRenderer.send('open-ascii-generator'),
    openTable: () => ipcRenderer.send('open-table-generator')
  }
 });
 // Log successful preload initialization
@@ -1,138 +0,0 @@
 class PrintPreview {
    constructor() {
        this.overlay = document.getElementById('print-preview-overlay');
        this.modal = window.modals?.printPreviewModal;
        this._lastContent = '';
        this.setupEventListeners();
    }
    open(htmlContent) {
        this._lastContent = htmlContent;
        if (this.modal) {
            this.modal.open();
        } else {
            this.overlay.classList.remove('hidden');
        }
        this.updatePreview(htmlContent);
        this.updateScaleLabel();
    }
    close() {
        if (this.modal) {
            this.modal.close();
        } else {
            this.overlay.classList.add('hidden');
        }
    }
    setupEventListeners() {
        document.getElementById('print-preview-close')?.addEventListener('click', () => this.close());
        document.getElementById('print-cancel')?.addEventListener('click', () => this.close());
        document.getElementById('print-execute')?.addEventListener('click', () => this.executePrint());
        // Update preview on option changes
        ['print-paper-size', 'print-orientation', 'print-margins'].forEach(id => {
            document.getElementById(id)?.addEventListener('change', () => this.refreshPreview());
        });
        // Scale slider
        const scaleSlider = document.getElementById('print-scale');
        scaleSlider?.addEventListener('input', () => this.updateScaleLabel());
        // Page range toggle
        document.getElementById('print-pages')?.addEventListener('change', (e) => {
            const rangeInput = document.getElementById('print-page-range');
            if (rangeInput) {
                rangeInput.classList.toggle('hidden', e.target.value !== 'custom');
            }
        });
        // Note: Backdrop click and Escape key are now handled by ModalManager
    }
    updateScaleLabel() {
        const scale = document.getElementById('print-scale')?.value || 100;
        const label = document.getElementById('print-scale-value');
        if (label) label.textContent = `${scale}%`;
    }
    updatePreview(htmlContent) {
        const frame = document.getElementById('print-preview-frame');
        if (!frame) return;
        this._lastContent = htmlContent;
        const orientation = document.getElementById('print-orientation')?.value || 'portrait';
        const paperSize = document.getElementById('print-paper-size')?.value || 'A4';
        // Get dimensions for paper size
        const sizes = {
            'A3': { width: '297mm', height: '420mm' },
            'A4': { width: '210mm', height: '297mm' },
            'A5': { width: '148mm', height: '210mm' },
            'Letter': { width: '8.5in', height: '11in' },
            'Legal': { width: '8.5in', height: '14in' },
            'Tabloid': { width: '11in', height: '17in' },
        };
        const size = sizes[paperSize] || sizes['A4'];
        const width = orientation === 'landscape' ? size.height : size.width;
        const height = orientation === 'landscape' ? size.width : size.height;
        const previewHtml = `
            <!DOCTYPE html>
            <html>
            <head>
                <style>
                    body {
                        margin: 20px;
                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                        font-size: 14px;
                        line-height: 1.6;
                    }
                    @page { size: ${width} ${height}; }
                    pre { background: #f5f5f5; padding: 12px; border-radius: 6px; overflow-x: auto; }
                    code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 13px; }
                    pre code { background: none; padding: 0; }
                    table { border-collapse: collapse; width: 100%; }
                    th, td { border: 1px solid #ddd; padding: 8px; }
                    blockquote { border-left: 4px solid #ddd; margin-left: 0; padding-left: 16px; color: #666; }
                    img { max-width: 100%; }
                    h1, h2, h3 { margin-top: 1.5em; }
                </style>
            </head>
            <body>${htmlContent || ''}</body>
            </html>
        `;
        frame.srcdoc = previewHtml;
    }
    refreshPreview() {
        if (this._lastContent) {
            this.updatePreview(this._lastContent);
        }
    }
    getOptions() {
        return {
            paperSize: document.getElementById('print-paper-size')?.value || 'A4',
            orientation: document.getElementById('print-orientation')?.value || 'portrait',
            margins: document.getElementById('print-margins')?.value || 'default',
            scale: parseInt(document.getElementById('print-scale')?.value || '100'),
            headers: document.getElementById('print-headers')?.checked ?? true,
            background: document.getElementById('print-background')?.checked ?? true,
            pages: document.getElementById('print-pages')?.value || 'all',
            pageRange: document.getElementById('print-page-range')?.value || '',
        };
    }
    executePrint() {
        const options = this.getOptions();
        const { ipcRenderer } = require('electron');
        ipcRenderer.send('do-print-with-options', options);
        this.close();
    }
 }
 module.exports = { PrintPreview };
@@ -0,0 +1,29 @@
 import { useState, useEffect } from 'react';
 import { AppShell } from './components/layout/AppShell';
 import { ModalLayer } from './components/modals/ModalLayer';
 import { Toaster } from './components/ui/sonner';
 import { ReplPanel } from './components/tools/ReplPanel';
 import { PrintPreview } from './components/tools/PrintPreview';
 import { useWelcomeTrigger } from './hooks/use-welcome-trigger';
 function App() {
  useWelcomeTrigger();
  const [printOpen, setPrintOpen] = useState(false);
  useEffect(() => {
    const handler = () => setPrintOpen(true);
    window.addEventListener('mc:print', handler);
    return () => window.removeEventListener('mc:print', handler);
  }, []);
  return (
    <>
      <AppShell />
      <ModalLayer />
      <Toaster />
      <ReplPanel />
      {printOpen && <PrintPreview onClose={() => setPrintOpen(false)} />}
    </>
  );
 }
 export default App;
@@ -0,0 +1,88 @@
 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';
 import { useSettingsStore } from '@/stores/settings-store';
 import { Minimap } from './Minimap';
 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);
  const minimap = useSettingsStore((s) => s.minimap);
  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 className="relative h-full overflow-hidden">
      <div ref={ref} className="h-full overflow-hidden" />
      {minimap && <Minimap content={initialContent} />}
    </div>
  );
 }
@@ -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>
  );
 }
@@ -0,0 +1,33 @@
 interface Props {
  content: string;
  scrollRatio?: number;       // 0-1, where the viewport is
  visibleRatio?: number;      // 0-1, what fraction of content is visible
 }
 export function Minimap({ content, scrollRatio = 0, visibleRatio = 1 }: Props) {
  const lines = content.split('\n');
  // Compute viewport position in the minimap
  const viewportTop = Math.round(scrollRatio * 100);
  const viewportHeight = Math.round(visibleRatio * 100);
  return (
    <div
      data-testid="minimap"
      className="pointer-events-none absolute right-0 top-0 h-full w-[100px] overflow-hidden border-l border-border bg-card/30 p-1 font-mono text-[6px] leading-[8px] text-muted-foreground"
      aria-hidden="true"
    >
      <pre className="w-full truncate whitespace-pre">
        {lines.map((line, i) => (
          <div key={i} data-testid="minimap-line">
            {line || ' '}
          </div>
        ))}
      </pre>
      <div
        data-testid="minimap-viewport"
        className="pointer-events-none absolute left-0 right-0 bg-brand/15"
        style={{ top: `${viewportTop}%`, height: `${Math.max(viewportHeight, 5)}%` }}
      />
    </div>
  );
 }
@@ -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);
@@ -0,0 +1,70 @@
 import { PanelLeft, PanelRight, Keyboard, Settings, Info } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ThemeToggle } from '@/components/theme-toggle';
 import { useAppStore } from '@/stores/app-store';
 import { useCommandStore } from '@/stores/command-store';
 export function AppHeader() {
  const { sidebarVisible, previewVisible } = useAppStore();
  const dispatch = useCommandStore((s) => s.dispatch);
  return (
    <header className="flex h-14 items-center justify-between border-b border-border bg-card/40 px-4 backdrop-blur">
      <div className="flex items-center gap-3">
        <div
          className="h-7 w-7 rounded-md bg-gradient-to-br from-brand to-brand-dark shadow-[var(--shadow-glow-brand)]"
          aria-label="MarkdownConverter logo"
        />
        <h1 className="font-display text-lg font-bold tracking-tight">MarkdownConverter</h1>
      </div>
      <div className="flex items-center gap-1">
        <Button
          variant="ghost"
          size="icon"
          aria-label="Toggle sidebar"
          aria-pressed={sidebarVisible}
          data-testid="header-toggle-sidebar"
          onClick={() => dispatch('view.toggleSidebar')}
        >
          <PanelLeft className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          aria-label="Toggle preview"
          aria-pressed={previewVisible}
          data-testid="header-toggle-preview"
          onClick={() => dispatch('view.togglePreview')}
        >
          <PanelRight className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          aria-label="Keyboard shortcuts"
          data-testid="header-shortcuts"
          onClick={() => dispatch('shortcuts.show')}
        >
          <Keyboard className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          aria-label="Settings"
          onClick={() => dispatch('settings.open')}
        >
          <Settings className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          aria-label="About"
          onClick={() => dispatch('help.about')}
        >
          <Info className="h-4 w-4" />
        </Button>
        <ThemeToggle />
      </div>
    </header>
  );
 }
@@ -0,0 +1,89 @@
 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';
 import { useZenMode } from '@/hooks/use-zen-mode';
 export function AppShell() {
  useFileShortcuts();
  useRestoreLastFolder();
  useRegisterMenuCommands();
  useBridgeNativeMenu();
  useZenMode();
  const { sidebarVisible, previewVisible, paneSizes, setPaneSizes } = useAppStore();
  const zenMode = useAppStore((s) => s.zenMode);
  if (zenMode) {
    return (
      <main className="h-screen w-screen overflow-hidden bg-background">
        <ResizablePanelGroup
          direction="horizontal"
          onLayoutChange={(sizes) => setPaneSizes({ sidebar: 0, editor: sizes[0], preview: sizes[1] })}
        >
          <ResizablePanel defaultSize={previewVisible ? 50 : 100} minSize={20}>
            <section className="h-full bg-background">
              <EditorPane />
            </section>
          </ResizablePanel>
          {previewVisible && (
            <>
              <ResizableHandle />
              <ResizablePanel defaultSize={50} minSize={20}>
                <section className="h-full border-l border-border bg-card/10">
                  <PreviewPane />
                </section>
              </ResizablePanel>
            </>
          )}
        </ResizablePanelGroup>
      </main>
    );
  }
  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"
          onLayoutChange={(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>
  );
 }
@@ -0,0 +1,38 @@
 import { useFileStore } from '@/stores/file-store';
 import { useEditorStore } from '@/stores/editor-store';
 import { useSettingsStore } from '@/stores/settings-store';
 function extractHeadings(content: string): { level: number; text: string }[] {
  const lines = content.split('\n');
  const headings: { level: number; text: string }[] = [];
  for (const line of lines) {
    const m = line.match(/^(#{1,6})\s+(.+)$/);
    if (m) headings.push({ level: m[1].length, text: m[2].trim() });
  }
  return headings;
 }
 export function Breadcrumb() {
  const activeTabId = useFileStore((s) => s.activeTabId);
  const openTabs = useFileStore((s) => s.openTabs);
  const buffer = useEditorStore((s) => (activeTabId ? s.buffers.get(activeTabId) : undefined));
  const showSymbols = useSettingsStore((s) => s.breadcrumbSymbols);
  const tab = activeTabId ? openTabs.find((t) => t.id === activeTabId) : null;
  const headings = showSymbols && buffer ? extractHeadings(buffer.content).slice(0, 3) : [];
  return (
    <nav
      aria-label="File path"
      className="flex h-7 items-center gap-1 border-b border-border bg-card/10 px-3 text-xs text-muted-foreground"
    >
      <span>{tab ? tab.title : 'No file selected'}</span>
      {headings.map((h, i) => (
        <span key={i} className="flex items-center gap-1">
          <span aria-hidden="true">›</span>
          <span className="truncate">{'#'.repeat(h.level)} {h.text}</span>
        </span>
      ))}
    </nav>
  );
 }
@@ -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>
  );
 }
@@ -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>
  );
 }
@@ -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>
  );
 }
@@ -0,0 +1,49 @@
 import { useEffect, useState } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { ipc } from '@/lib/ipc';
 import { useAppStore } from '@/stores/app-store';
 export function AboutDialog() {
  const closeModal = useAppStore((s) => s.closeModal);
  const isOpen = useAppStore((s) => s.modal.kind) === 'about';
  const [version, setVersion] = useState<string>('…');
  useEffect(() => {
    ipc.app.getVersion().then((r) => {
      if (r.ok && typeof r.data === 'string') setVersion(r.data);
    });
  }, []);
  return (
    <Dialog open={isOpen} onOpenChange={(o) => !o && closeModal()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>About MarkdownConverter</DialogTitle>
          <DialogDescription>
            Professional Markdown editor and universal file converter.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-2 text-sm text-muted-foreground">
          <p>Version: {version}</p>
          <p>
            <a
              href="https://github.com/amitwh/markdown-converter"
              className="text-brand hover:underline"
              onClick={(e) => {
                e.preventDefault();
                ipc.app.openExternal('https://github.com/amitwh/markdown-converter');
              }}
            >
              GitHub repository
            </a>
          </p>
          <p className="text-xs">© ConcreteInfo. Licensed under MIT.</p>
        </div>
        <DialogFooter>
          <Button onClick={closeModal}>Close</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
 }
@@ -0,0 +1,38 @@
 import { useEffect, useState } from 'react';
 import { ipc } from '@/lib/ipc';
 export function AboutSettings() {
  const [version, setVersion] = useState('…');
  useEffect(() => {
    ipc.app.getVersion().then((r) => {
      if (r.ok && typeof r.data === 'string') setVersion(r.data);
    });
  }, []);
  return (
    <div className="space-y-3 text-sm">
      <h3 className="text-base font-semibold">MarkdownConverter</h3>
      <p className="text-muted-foreground">Version {version}</p>
      <p>
        <a
          href="https://github.com/amitwh/markdown-converter"
          className="text-brand hover:underline"
          onClick={(e) => { e.preventDefault(); ipc.app.openExternal('https://github.com/amitwh/markdown-converter'); }}
        >
          GitHub repository
        </a>
      </p>
      <p>
        <a
          href="https://concreteinfo.co.in"
          className="text-brand hover:underline"
          onClick={(e) => { e.preventDefault(); ipc.app.openExternal('https://concreteinfo.co.in'); }}
        >
          ConcreteInfo
        </a>
      </p>
      <p className="text-xs text-muted-foreground">© ConcreteInfo. Licensed under MIT.</p>
    </div>
  );
 }
@@ -0,0 +1,77 @@
 import { useState, useEffect } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { useAppStore } from '@/stores/app-store';
 import { toast } from '@/lib/toast';
 import { figletText, FIGLET_FONTS, type FigletFont } from '@/lib/figlet';
 export function AsciiGeneratorDialog() {
  const closeModal = useAppStore((s) => s.closeModal);
  const [text, setText] = useState('Hello');
  const [font, setFont] = useState<FigletFont>('Standard');
  const [output, setOutput] = useState('');
  useEffect(() => {
    let cancelled = false;
    figletText(text || ' ', font)
      .then((result) => { if (!cancelled) setOutput(result); })
      .catch(() => { if (!cancelled) setOutput('(render error)'); });
    return () => { cancelled = true; };
  }, [text, font]);
  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(output);
      toast.success('Copied to clipboard');
    } catch {
      toast.error('Failed to copy');
    }
  };
  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>ASCII generator</DialogTitle>
          <DialogDescription>Type text, pick a font, see ASCII art</DialogDescription>
        </DialogHeader>
        <div className="space-y-3">
          <div>
            <Label htmlFor="ascii-text">Text</Label>
            <Textarea
              id="ascii-text"
              aria-label="Text"
              value={text}
              onChange={(e) => setText(e.target.value)}
              rows={2}
            />
          </div>
          <div>
            <Label htmlFor="ascii-font">Font</Label>
            <Select value={font} onValueChange={(v) => setFont(v as FigletFont)}>
              <SelectTrigger id="ascii-font" aria-label="Font"><SelectValue /></SelectTrigger>
              <SelectContent>
                {FIGLET_FONTS.map((f) => (
                  <SelectItem key={f} value={f}>{f}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label>Output</Label>
            <pre className="overflow-auto rounded border border-border bg-card/30 p-3 text-xs" data-testid="ascii-output">
              {output}
            </pre>
          </div>
        </div>
        <DialogFooter>
          <Button variant="ghost" onClick={closeModal}>Close</Button>
          <Button onClick={handleCopy}>Copy</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
 }
@@ -0,0 +1,36 @@
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { useAppStore, type ConfirmProps } from '@/stores/app-store';
 export function ConfirmDialog(props: ConfirmProps) {
  const closeModal = useAppStore((s) => s.closeModal);
  const { title, body, confirmLabel = 'Confirm', cancelLabel = 'Cancel', destructive, onConfirm, onCancel } = props;
  const handleConfirm = async () => {
    await onConfirm();
    closeModal();
  };
  const handleCancel = () => {
    onCancel?.();
    closeModal();
  };
  return (
    <Dialog open onOpenChange={(o) => !o && handleCancel()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{body}</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="ghost" onClick={handleCancel}>
            {cancelLabel}
          </Button>
          <Button variant={destructive ? 'destructive' : 'default'} onClick={handleConfirm}>
            {confirmLabel}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
 }
@@ -0,0 +1,41 @@
 import { useSettingsStore } from '@/stores/settings-store';
 import { Label } from '@/components/ui/label';
 import { Slider } from '@/components/ui/slider';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 export function EditorSettings() {
  const { fontSize, tabSize, lineNumbers, wordWrap, minimap, setSetting } = useSettingsStore();
  return (
    <div className="space-y-5 text-sm">
      <div>
        <Label htmlFor="editor-font-size">Font size: {fontSize}px</Label>
        <Slider id="editor-font-size" min={10} max={24} step={1} value={[fontSize]} onValueChange={([v]) => setSetting('fontSize', v)} />
      </div>
      <div>
        <Label htmlFor="editor-tab-size">Tab size</Label>
        <Select value={String(tabSize)} onValueChange={(v) => setSetting('tabSize', Number(v) as 2 | 4 | 8)}>
          <SelectTrigger id="editor-tab-size" aria-label="Tab size"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="2">2 spaces</SelectItem>
            <SelectItem value="4">4 spaces</SelectItem>
            <SelectItem value="8">8 spaces</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <label className="flex items-center justify-between">
        <span>Line numbers</span>
        <Switch checked={lineNumbers} onCheckedChange={(c) => setSetting('lineNumbers', c)} aria-label="Line numbers" />
      </label>
      <label className="flex items-center justify-between">
        <span>Word wrap</span>
        <Switch checked={wordWrap} onCheckedChange={(c) => setSetting('wordWrap', c)} aria-label="Word wrap" />
      </label>
      <label className="flex items-center justify-between">
        <span>Minimap</span>
        <Switch checked={minimap} onCheckedChange={(c) => setSetting('minimap', c)} aria-label="Minimap" />
      </label>
    </div>
  );
 }
@@ -0,0 +1,82 @@
 import { useState } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useAppStore } from '@/stores/app-store';
 import { ipc } from '@/lib/ipc';
 import { toast } from '@/lib/toast';
 import { ExportDialogFooter } from './ExportDialogFooter';
 const extFor = (format: 'pdf' | 'docx' | 'html' | 'png') =>
  format === 'pdf' ? '.pdf' : format === 'docx' ? '.docx' : format === 'png' ? '.png' : '.html';
 export function ExportBatchDialog({ sourcePaths }: { sourcePaths: string[] }) {
  const closeModal = useAppStore((s) => s.closeModal);
  const [format, setFormat] = useState<'pdf' | 'docx' | 'html' | 'png'>('pdf');
  const [concurrency, setConcurrency] = useState(4);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const handleSubmit = async () => {
    setSubmitting(true);
    setError(null);
    const items = sourcePaths.map((p) => ({
      inputPath: p,
      outputPath: p.replace(/\.md$/, extFor(format)),
    }));
    const result = await ipc.export.batch(items, { format, concurrency });
    if (!result.ok) {
      toast.error(`Export failed: ${result.error.message}`);
      setError(result.error.message);
      setSubmitting(false);
    } else {
      toast.success(`Exported ${sourcePaths.length} files`);
      closeModal();
    }
  };
  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Batch export</DialogTitle>
          <DialogDescription>{sourcePaths.length} files</DialogDescription>
        </DialogHeader>
        <div className="space-y-3 text-sm">
          <div>
            <Label htmlFor="batch-format">Format</Label>
            <Select value={format} onValueChange={(v) => setFormat(v as any)}>
              <SelectTrigger id="batch-format" aria-label="Format"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="pdf">PDF</SelectItem>
                <SelectItem value="docx">DOCX</SelectItem>
                <SelectItem value="html">HTML</SelectItem>
                <SelectItem value="png">PNG</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label htmlFor="batch-concurrency">Concurrency</Label>
            <Select value={String(concurrency)} onValueChange={(v) => setConcurrency(Number(v))}>
              <SelectTrigger id="batch-concurrency" aria-label="Concurrency"><SelectValue /></SelectTrigger>
              <SelectContent>
                {[1, 2, 4, 8, 16].map((n) => (
                  <SelectItem key={n} value={String(n)}>{n}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="max-h-40 overflow-auto rounded border border-border bg-card/20 p-2 text-xs">
            {sourcePaths.map((p) => <div key={p} className="truncate">{p}</div>)}
          </div>
          {error && (
            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
              {error}
            </div>
          )}
        </div>
        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
      </DialogContent>
    </Dialog>
  );
 }
@@ -0,0 +1,23 @@
 import { Button } from '@/components/ui/button';
 import { DialogFooter } from '@/components/ui/dialog';
 interface Props {
  onCancel: () => void;
  onSubmit: () => void;
  submitting: boolean;
  submitLabel: string;
  submitDisabled?: boolean;
 }
 export function ExportDialogFooter({ onCancel, onSubmit, submitting, submitLabel, submitDisabled }: Props) {
  return (
    <DialogFooter>
      <Button variant="ghost" onClick={onCancel} disabled={submitting}>
        Cancel
      </Button>
      <Button onClick={onSubmit} disabled={submitting || submitDisabled}>
        {submitting ? 'Exporting…' : submitLabel}
      </Button>
    </DialogFooter>
  );
 }
@@ -0,0 +1,78 @@
 import { useState } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useAppStore } from '@/stores/app-store';
 import { useSettingsStore } from '@/stores/settings-store';
 import { useExportSource } from '@/hooks/use-export-source';
 import { ipc } from '@/lib/ipc';
 import { toast } from '@/lib/toast';
 import { ExportDialogFooter } from './ExportDialogFooter';
 export function ExportDocxDialog({ sourcePath }: { sourcePath: string }) {
  const closeModal = useAppStore((s) => s.closeModal);
  const { docxTemplate, renderTablesAsAscii } = useSettingsStore();
  const source = useExportSource();
  const [template, setTemplate] = useState<'standard' | 'minimal' | 'modern'>(docxTemplate);
  const [ascii, setAscii] = useState(renderTablesAsAscii);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const handleSubmit = async () => {
    if (!source) { setError('No file open.'); return; }
    setSubmitting(true);
    setError(null);
    const result = await ipc.export.docx({
      inputPath: source.path,
      outputPath: source.path.replace(/\.md$/, '.docx'),
      template,
      renderTablesAsAscii: ascii,
    } as any);
    if (!result.ok) {
      toast.error(`Export failed: ${result.error.message}`);
      setError(result.error.message);
      setSubmitting(false);
    } else {
      toast.success(`Exported ${source.title} to ${result.data?.outputPath ?? 'file'}`);
      closeModal();
    }
  };
  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Export to DOCX</DialogTitle>
          <DialogDescription>{sourcePath}</DialogDescription>
        </DialogHeader>
        <div className="space-y-3 text-sm">
          <div>
            <Label htmlFor="docx-template">Template</Label>
            <Select value={template} onValueChange={(v) => setTemplate(v as any)}>
              <SelectTrigger id="docx-template" aria-label="Template"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="standard">Standard</SelectItem>
                <SelectItem value="minimal">Minimal</SelectItem>
                <SelectItem value="modern">Modern</SelectItem>
              </SelectContent>
            </Select>
            <p className="mt-1 text-xs text-muted-foreground">
              Bundled with the app. Standard is the default; Modern adds a colored cover page.
            </p>
          </div>
          <label className="flex items-center gap-2">
            <Checkbox checked={ascii} onCheckedChange={(c) => setAscii(!!c)} aria-label="ASCII tables" />
            Render tables as ASCII
          </label>
          {error && (
            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
              {error}
            </div>
          )}
        </div>
        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
      </DialogContent>
    </Dialog>
  );
 }
@@ -0,0 +1,82 @@
 import { useState } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useAppStore } from '@/stores/app-store';
 import { useSettingsStore } from '@/stores/settings-store';
 import { useExportSource } from '@/hooks/use-export-source';
 import { ipc } from '@/lib/ipc';
 import { toast } from '@/lib/toast';
 import { ExportDialogFooter } from './ExportDialogFooter';
 export function ExportHtmlDialog({ sourcePath }: { sourcePath: string }) {
  const closeModal = useAppStore((s) => s.closeModal);
  const { htmlHighlightStyle, renderTablesAsAscii } = useSettingsStore();
  const source = useExportSource();
  const [standalone, setStandalone] = useState(true);
  const [highlight, setHighlight] = useState(htmlHighlightStyle);
  const [ascii, setAscii] = useState(renderTablesAsAscii);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const handleSubmit = async () => {
    if (!source) { setError('No file open.'); return; }
    setSubmitting(true);
    setError(null);
    const result = await ipc.export.html({
      inputPath: source.path,
      outputPath: source.path.replace(/\.md$/, '.html'),
      standalone,
      highlightStyle: highlight,
      renderTablesAsAscii: ascii,
    } as any);
    if (!result.ok) {
      toast.error(`Export failed: ${result.error.message}`);
      setError(result.error.message);
      setSubmitting(false);
    } else {
      toast.success(`Exported ${source.title} to ${result.data?.outputPath ?? 'file'}`);
      closeModal();
    }
  };
  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Export to HTML</DialogTitle>
          <DialogDescription>{sourcePath}</DialogDescription>
        </DialogHeader>
        <div className="space-y-3 text-sm">
          <label className="flex items-center gap-2">
            <Checkbox checked={standalone} onCheckedChange={(c) => setStandalone(!!c)} aria-label="Standalone" />
            Standalone document (with inline CSS)
          </label>
          <div>
            <Label htmlFor="html-highlight">Syntax highlight style</Label>
            <Select value={highlight} onValueChange={(v) => setHighlight(v as any)}>
              <SelectTrigger id="html-highlight" aria-label="Highlight style"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="github">GitHub</SelectItem>
                <SelectItem value="monokai">Monokai</SelectItem>
                <SelectItem value="nord">Nord</SelectItem>
                <SelectItem value="none">None</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <label className="flex items-center gap-2">
            <Checkbox checked={ascii} onCheckedChange={(c) => setAscii(!!c)} aria-label="ASCII tables" />
            Render tables as ASCII
          </label>
          {error && (
            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
              {error}
            </div>
          )}
        </div>
        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
      </DialogContent>
    </Dialog>
  );
 }
@@ -0,0 +1,105 @@
 import { useState } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useAppStore } from '@/stores/app-store';
 import { useSettingsStore } from '@/stores/settings-store';
 import { useExportSource } from '@/hooks/use-export-source';
 import { ipc } from '@/lib/ipc';
 import { toast } from '@/lib/toast';
 import { ExportDialogFooter } from './ExportDialogFooter';
 const MARGIN_MAP = {
  normal: { top: 25, right: 25, bottom: 25, left: 25 },
  narrow: { top: 15, right: 15, bottom: 15, left: 15 },
  wide: { top: 35, right: 35, bottom: 35, left: 35 },
 } as const;
 export function ExportPdfDialog({ sourcePath }: { sourcePath: string }) {
  const closeModal = useAppStore((s) => s.closeModal);
  const { fontSize, pdfFormat, pdfMargins, pdfEmbedFonts, renderTablesAsAscii } = useSettingsStore();
  const [format, setFormat] = useState<'letter' | 'a4' | 'legal'>(pdfFormat);
  const [margins, setMargins] = useState<'normal' | 'narrow' | 'wide'>(pdfMargins);
  const [embed, setEmbed] = useState(pdfEmbedFonts);
  const [ascii, setAscii] = useState(renderTablesAsAscii);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const source = useExportSource();
  const handleSubmit = async () => {
    if (!source) {
      setError('No file open.');
      return;
    }
    setSubmitting(true);
    setError(null);
    const result = await ipc.export.pdf({
      inputPath: source.path,
      outputPath: source.path.replace(/\.md$/, '.pdf'),
      format,
      margins: MARGIN_MAP[margins],
      embedFonts: embed,
      renderTablesAsAscii: ascii,
      fontSize,
    } as any);
    if (!result.ok) {
      toast.error(`Export failed: ${result.error?.message ?? 'Export failed'}`);
      setError(result.error?.message ?? 'Export failed');
      setSubmitting(false);
    } else {
      toast.success(`Exported ${source.title} to ${result.data?.outputPath ?? 'file'}`);
      closeModal();
    }
  };
  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Export to PDF</DialogTitle>
          <DialogDescription>{sourcePath}</DialogDescription>
        </DialogHeader>
        <div className="space-y-3 text-sm">
          <div>
            <Label htmlFor="pdf-format">Format</Label>
            <Select value={format} onValueChange={(v) => setFormat(v as typeof format)}>
              <SelectTrigger id="pdf-format" aria-label="Format"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="letter">Letter</SelectItem>
                <SelectItem value="a4">A4</SelectItem>
                <SelectItem value="legal">Legal</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label htmlFor="pdf-margins">Margins</Label>
            <Select value={margins} onValueChange={(v) => setMargins(v as typeof margins)}>
              <SelectTrigger id="pdf-margins" aria-label="Margins"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="narrow">Narrow</SelectItem>
                <SelectItem value="normal">Normal</SelectItem>
                <SelectItem value="wide">Wide</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <label className="flex items-center gap-2">
            <Checkbox checked={embed} onCheckedChange={(c) => setEmbed(!!c)} aria-label="Embed fonts" />
            Embed fonts
          </label>
          <label className="flex items-center gap-2">
            <Checkbox checked={ascii} onCheckedChange={(c) => setAscii(!!c)} aria-label="ASCII tables" />
            Render tables as ASCII
          </label>
          {error && (
            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
              {error}
            </div>
          )}
        </div>
        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
      </DialogContent>
    </Dialog>
  );
 }
@@ -0,0 +1,66 @@
 import { useSettingsStore } from '@/stores/settings-store';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 export function ExportSettings() {
  const { pdfFormat, pdfMargins, pdfEmbedFonts, docxTemplate, htmlHighlightStyle, renderTablesAsAscii, setSetting } = useSettingsStore();
  return (
    <div className="space-y-5 text-sm">
      <div>
        <Label htmlFor="export-pdf-format">Default PDF format</Label>
        <Select value={pdfFormat} onValueChange={(v) => setSetting('pdfFormat', v as any)}>
          <SelectTrigger id="export-pdf-format" aria-label="Default PDF format"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="letter">Letter</SelectItem>
            <SelectItem value="a4">A4</SelectItem>
            <SelectItem value="legal">Legal</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div>
        <Label htmlFor="export-pdf-margins">Default PDF margins</Label>
        <Select value={pdfMargins} onValueChange={(v) => setSetting('pdfMargins', v as any)}>
          <SelectTrigger id="export-pdf-margins" aria-label="Default PDF margins"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="narrow">Narrow</SelectItem>
            <SelectItem value="normal">Normal</SelectItem>
            <SelectItem value="wide">Wide</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <label className="flex items-center justify-between">
        <span>Embed fonts in PDFs</span>
        <Switch checked={pdfEmbedFonts} onCheckedChange={(c) => setSetting('pdfEmbedFonts', c)} aria-label="Embed fonts" />
      </label>
      <div>
        <Label htmlFor="export-docx-template">Default DOCX template</Label>
        <Select value={docxTemplate} onValueChange={(v) => setSetting('docxTemplate', v as any)}>
          <SelectTrigger id="export-docx-template" aria-label="Default DOCX template"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="standard">Standard</SelectItem>
            <SelectItem value="minimal">Minimal</SelectItem>
            <SelectItem value="modern">Modern</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div>
        <Label htmlFor="export-html-highlight">Default HTML highlight</Label>
        <Select value={htmlHighlightStyle} onValueChange={(v) => setSetting('htmlHighlightStyle', v as any)}>
          <SelectTrigger id="export-html-highlight" aria-label="Default HTML highlight"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="github">GitHub</SelectItem>
            <SelectItem value="monokai">Monokai</SelectItem>
            <SelectItem value="nord">Nord</SelectItem>
            <SelectItem value="none">None</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <label className="flex items-center justify-between">
        <span>Render tables as ASCII by default</span>
        <Switch checked={renderTablesAsAscii} onCheckedChange={(c) => setSetting('renderTablesAsAscii', c)} aria-label="ASCII tables by default" />
      </label>
    </div>
  );
 }
@@ -0,0 +1,111 @@
 import { useState } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useAppStore } from '@/stores/app-store';
 import { useFileStore } from '@/stores/file-store';
 import { ipc } from '@/lib/ipc';
 interface SearchResult {
  filePath: string;
  line: number;
  content: string;
 }
 export function FindInFilesDialog() {
  const closeModal = useAppStore((s) => s.closeModal);
  const rootPath = useFileStore((s) => s.rootPath);
  const openFile = useFileStore((s) => s.openFile);
  const [query, setQuery] = useState('');
  const [isRegex, setIsRegex] = useState(false);
  const [caseSensitive, setCaseSensitive] = useState(false);
  const [results, setResults] = useState<SearchResult[]>([]);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const handleSearch = async () => {
    if (!query || !rootPath) return;
    setSubmitting(true);
    setError(null);
    const result = await ipc.file.search({ rootPath, query, isRegex, caseSensitive });
    if (!result.ok) {
      setError(result.error.message);
      setSubmitting(false);
      return;
    }
    setResults(result.data ?? []);
    setSubmitting(false);
  };
  const handleResultClick = (filePath: string) => {
    openFile(filePath);
    closeModal();
  };
  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Find in files</DialogTitle>
          <DialogDescription>
            {rootPath ? `Search in ${rootPath}` : 'No folder open'}
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-3">
          <div>
            <Label htmlFor="find-query">Query</Label>
            <Input
              id="find-query"
              aria-label="Query"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
            />
          </div>
          <div className="flex gap-4">
            <label className="flex items-center gap-2">
              <Checkbox checked={isRegex} onCheckedChange={(c) => setIsRegex(!!c)} aria-label="Regex" />
              Regex
            </label>
            <label className="flex items-center gap-2">
              <Checkbox checked={caseSensitive} onCheckedChange={(c) => setCaseSensitive(!!c)} aria-label="Case sensitive" />
              Case sensitive
            </label>
          </div>
          {error && (
            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
              {error}
            </div>
          )}
          {results.length > 0 && (
            <div>
              <Label>{results.length} result{results.length === 1 ? '' : 's'}</Label>
              <div className="max-h-64 overflow-auto rounded border border-border bg-card/20 text-xs">
                {results.map((r, i) => (
                  <button
                    key={`${r.filePath}:${r.line}:${i}`}
                    onClick={() => handleResultClick(r.filePath)}
                    className="block w-full truncate border-b border-border/30 px-2 py-1 text-left hover:bg-card/50"
                    data-testid="find-result"
                  >
                    <span className="font-mono text-muted-foreground">{r.filePath}:{r.line}</span>
                    <span className="ml-2">{r.content}</span>
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
        <DialogFooter>
          <Button variant="ghost" onClick={closeModal} disabled={submitting}>Close</Button>
          <Button onClick={handleSearch} disabled={submitting || !query}>
            {submitting ? 'Searching…' : 'Search'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
 }
@@ -0,0 +1,45 @@
 import { useAppStore } from '@/stores/app-store';
 import { AboutDialog } from './AboutDialog';
 import { AsciiGeneratorDialog } from './AsciiGeneratorDialog';
 import { ConfirmDialog } from './ConfirmDialog';
 import { ExportBatchDialog } from './ExportBatchDialog';
 import { ExportDocxDialog } from './ExportDocxDialog';
 import { ExportHtmlDialog } from './ExportHtmlDialog';
 import { ExportPdfDialog } from './ExportPdfDialog';
 import { FindInFilesDialog } from './FindInFilesDialog';
 import { SettingsSheet } from './SettingsSheet';
 import { TableGeneratorDialog } from './TableGeneratorDialog';
 import { WelcomeDialog } from './WelcomeDialog';
 import { WordExportDialog } from './WordExportDialog';
 export function ModalLayer() {
  const modal = useAppStore((s) => s.modal);
  switch (modal.kind) {
    case null:
      return null;
    case 'export-pdf':
      return <ExportPdfDialog sourcePath={modal.props.sourcePath} />;
    case 'export-docx':
      return <ExportDocxDialog sourcePath={modal.props.sourcePath} />;
    case 'export-html':
      return <ExportHtmlDialog sourcePath={modal.props.sourcePath} />;
    case 'export-batch':
      return <ExportBatchDialog sourcePaths={modal.props.sourcePaths} />;
    case 'settings':
      return <SettingsSheet />;
    case 'about':
      return <AboutDialog />;
    case 'welcome':
      return <WelcomeDialog />;
    case 'confirm':
      return <ConfirmDialog {...modal.props} />;
    case 'export-word':
      return <WordExportDialog sourcePath={modal.props.sourcePath} />;
    case 'ascii-generator':
      return <AsciiGeneratorDialog />;
    case 'table-generator':
      return <TableGeneratorDialog />;
    case 'find-in-files':
      return <FindInFilesDialog />;
  }
 }
--- a/Show More
+++ b/Show More
`@@ -162,4 +162,4 @@ Amit Haridas (amit.wh@gmail.com)`

	`## Version`	`## Version`

	`v3.0.0`	`v4.1.0`