Release v2.0.0: Major Feature Update

New Features: • Export Profiles - Save and load export configurations • Mermaid.js diagram support - Render flowcharts, sequence diagrams, and more • Command Palette (Ctrl+Shift+P) - Quick access to all commands • GitHub Light/Dark preview themes - Beautiful code preview styling • Table Generator - Interactive table creation tool • ASCII Art Generator - Create text banners, boxes, and templates • Resizable Preview Pane - Drag divider to adjust editor/preview sizes • Pop-out Preview Window - Open preview in separate window with live sync UI/UX Improvements: • Fixed advanced export dialog visibility (added .hidden CSS class) • GitHub-style table headers with light grey background • Removed gradients from table headers • Clean, professional preview rendering Technical Changes: • Updated all UI components for new features • Enhanced TabManager to support resizable panes • Added MutationObserver for live preview sync in pop-out window • Improved CSS styling consistency 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Release v1.9.2: Full-width background for code blocks
2026-08-02 18:10:18 +05:30 · 2025-12-13 19:40:30 +05:30 · 2025-12-12 09:10:18 +05:30 · 2025-12-12 09:01:17 +05:30 · 2025-11-08 17:39:14 +05:30 · 2025-10-28 19:33:36 +05:30
103 changed files with 3811 additions and 12342 deletions
@@ -0,0 +1,10 @@
 name: New MCP server
 version: 0.0.1
 schema: v1
 mcpServers:
  - name: New MCP server
    command: npx
    args:
      - -y
      - <your-mcp-server>
    env: {}
@@ -15,22 +15,4 @@ out/
 .cache/
 .npm/
 .electron/
-package-lock.json
+package-lock.json
 # Screenshots and temp files
 *.png.bak
 Screen.png
 dark.png
 light.png
 pdf.png
 uvmodal.png
 nul
 *.tmp
 # Development screenshots
 pdf\ modal.png
 # Claude/AI development files
 .claude/
 CLAUDE.md
 agents.mdcoverage/
@@ -1,11 +0,0 @@
 {
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "printWidth": 100,
  "endOfLine": "auto"
 }
@@ -0,0 +1,3 @@
 {
  "CurrentProjectSetting": null
 }
@@ -0,0 +1,7 @@
 {
  "ExpandedNodes": [
    ""
  ],
  "SelectedNode": "\\package.json",
  "PreviewInSolutionExplorer": false
 }
@@ -0,0 +1,41 @@
 {
  "Version": 1,
  "WorkspaceRootPath": "H:\\Development\\pan-converter\\",
  "Documents": [
    {
      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|H:\\Development\\pan-converter\\package.json||{90A6B3A7-C1A3-4009-A288-E2FF89E96FA0}",
      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:package.json||{90A6B3A7-C1A3-4009-A288-E2FF89E96FA0}"
    }
  ],
  "DocumentGroupContainers": [
    {
      "Orientation": 0,
      "VerticalTabListWidth": 256,
      "DocumentGroups": [
        {
          "DockedWidth": 200,
          "SelectedChildIndex": 0,
          "Children": [
            {
              "$type": "Document",
              "DocumentIndex": 0,
              "Title": "package.json",
              "DocumentMoniker": "H:\\Development\\pan-converter\\package.json",
              "RelativeDocumentMoniker": "package.json",
              "ToolTip": "H:\\Development\\pan-converter\\package.json",
              "RelativeToolTip": "package.json",
              "ViewState": "AgIAAAAAAAAAAAAAAAAAAAsAAAAqAAAAAAAAAA==",
              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.001642|",
              "WhenOpened": "2025-10-11T13:44:30.357Z",
              "EditorCaption": ""
            },
            {
              "$type": "Bookmark",
              "Name": "ST:0:0:{cce594b6-0c39-4442-ba28-10c64ac7e89f}"
            }
          ]
        }
      ]
    }
  ]
 }
@@ -0,0 +1,41 @@
 {
  "Version": 1,
  "WorkspaceRootPath": "H:\\Development\\pan-converter\\",
  "Documents": [
    {
      "AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|H:\\Development\\pan-converter\\package.json||{90A6B3A7-C1A3-4009-A288-E2FF89E96FA0}",
      "RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:package.json||{90A6B3A7-C1A3-4009-A288-E2FF89E96FA0}"
    }
  ],
  "DocumentGroupContainers": [
    {
      "Orientation": 0,
      "VerticalTabListWidth": 256,
      "DocumentGroups": [
        {
          "DockedWidth": 200,
          "SelectedChildIndex": 0,
          "Children": [
            {
              "$type": "Document",
              "DocumentIndex": 0,
              "Title": "package.json",
              "DocumentMoniker": "H:\\Development\\pan-converter\\package.json",
              "RelativeDocumentMoniker": "package.json",
              "ToolTip": "H:\\Development\\pan-converter\\package.json",
              "RelativeToolTip": "package.json",
              "ViewState": "AgIAAAAAAAAAAAAAAAAAAAsAAAAqAAAAAAAAAA==",
              "Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.001642|",
              "WhenOpened": "2025-10-11T13:44:30.357Z",
              "EditorCaption": ""
            },
            {
              "$type": "Bookmark",
              "Name": "ST:0:0:{cce594b6-0c39-4442-ba28-10c64ac7e89f}"
            }
          ]
        }
      ]
    }
  ]
 }
@@ -1,156 +1,162 @@
-# MarkdownConverter
+# PanConverter
-A powerful cross-platform Markdown editor and document converter powered by Pandoc, built with Electron. 100% open-source with no proprietary dependencies.
+A cross-platform Markdown editor and converter powered by Pandoc.
 ![PanConverter](assets/icon.png)
 ## Features
-### Markdown Editor
+### ✨ Advanced Markdown Editor
-<img width="1920" height="1032" alt="image" src="https://github.com/user-attachments/assets/5f53ba94-7663-47c3-b12b-b7b8bd2645aa" />
+- 🗂️ **Tabbed Interface** - Work with multiple files simultaneously in separate tabs
- **Multi-tab editing** - Work on multiple files simultaneously
+- 📝 **Rich Text Editor** - Full-featured editor with syntax highlighting and comprehensive toolbar
- **Live preview** - Real-time markdown rendering with syntax highlighting
+- 🔍 **Find & Replace** - Powerful search and replace with match highlighting and navigation
- **Dynamic splitter** - Drag to resize editor and preview panes
+- 🔢 **Line Numbers** - Toggle line numbers for easier code editing and navigation
- **25+ themes** - Light and dark themes including Atom One Light, Dracula, Nord, Sepia, and more
+- ↩️ **Smart Auto-Indentation** - Automatic list continuation and intelligent indentation
- **Find & Replace** - Search and replace with regex support
+- ⏪ **Undo/Redo** - Full undo/redo support with keyboard shortcuts
- **Line numbers** - Toggle line numbers in the editor
+- ⌨️ **Advanced Shortcuts** - Tab indentation, line selection, and smart text formatting
- **Auto-save** - Automatic saving every 30 seconds
+- 📂 **File Association Support** - Open markdown files directly from file manager
 - **Math support** - KaTeX integration for mathematical expressions
-### PDF Viewer & Editor
+### 🎨 Themes & Interface
-<img width="1920" height="1032" alt="image" src="https://github.com/user-attachments/assets/f10f62be-af3d-496e-81df-37ab4f91abfd" />
+- 👁️ **Live Preview** - See your markdown rendered in real-time with synchronized scrolling
 - 🎨 **Multiple Themes** - Choose from Light, Dark, Solarized, Monokai, or GitHub themes
 - 💾 **Auto-Save** - Never lose your work with automatic saving every 30 seconds
 - 📊 **Enhanced Statistics** - Detailed document statistics including word count, character count, lines, paragraphs, sentences, and estimated reading time
 - 🕒 **Recent Files** - Quick access to recently opened files via File menu
 - 🧮 **Math Support** - Render mathematical expressions using KaTeX (supports $$, $, \\[\\], \\(\\) delimiters)
- **Built-in PDF viewer** - Open and view PDF files directly in the app
+### 📤 Export & Conversion
- **Page navigation** - Navigate pages with keyboard or buttons
+- 📄 **Enhanced PDF Export** - Robust PDF generation with multiple LaTeX engine fallbacks (XeLaTeX, PDFLaTeX, wkhtmltopdf)
- **Zoom controls** - Zoom in/out, fit to width, fit to page
+- 📄 **Document Export** - Convert to HTML, DOCX, LaTeX, RTF, ODT, EPUB, PowerPoint (PPTX), and OpenDocument Presentation (ODP)
- **Rotation** - Rotate pages left or right
+- 📊 **Spreadsheet Export** - Export markdown tables to CSV format for compatibility with any spreadsheet application
- **PDF Editor tools**:
+- 📥 **Document Import** - Import DOCX, ODT, RTF, HTML, PDF, and presentation files to markdown
-  - Merge multiple PDFs
+- 📋 **Table Creation Helper** - Built-in table generator for easy markdown table creation
  - Split PDFs by page range
  - Compress PDFs
  - Rotate pages
  - Delete pages
  - Reorder pages
  - Add watermarks
  - Password protection
  - Remove passwords
  - Set permissions
-### Export Options
+### 🖥️ Platform Support
- **PDF** - Export to PDF with customizable page sizes and orientation
+- **Cross-Platform** - Works seamlessly on Windows, macOS, and Linux
 - **DOCX** - Standard and Enhanced (template-based) Word export
 - **ODT** - OpenDocument format
 - **HTML** - Web-ready HTML export
 - **PowerPoint** - PPTX presentation export
 - **EPUB** - E-book format
 - **LaTeX** - Academic document format
 - **RTF** - Rich Text Format
 ### Advanced Features
 - **Custom headers & footers** - Add headers/footers to exports with dynamic fields
 - **Page size configuration** - A3, A4, A5, B4, B5, Letter, Legal, Tabloid, or custom sizes
 - **Batch conversion** - Convert entire folders of markdown files
 - **ASCII Art Generator** - Create text banners and diagrams
 - **Word templates** - Use custom Word templates for enhanced exports
 - **Import documents** - Import from 30+ formats (DOCX, PDF, HTML, etc.)
 ## Installation
 ### Prerequisites
- [Node.js](https://nodejs.org/) (v16 or later)
+- [Pandoc](https://pandoc.org/installing.html) must be installed for export functionality
- [Pandoc](https://pandoc.org/installing.html) (required for export functionality)
+  - **Ubuntu/Debian**: `sudo apt-get install pandoc`
  - **macOS**: `brew install pandoc`
  - **Windows**: Download installer from Pandoc website
-### Install Dependencies
+### PDF Export Requirements
 For optimal PDF export, install a LaTeX engine (recommended):
 - **Ubuntu/Debian**: `sudo apt-get install texlive-xetex texlive-latex-base`
 - **macOS**: `brew install --cask mactex`
 - **Windows**: Install MiKTeX or TeX Live
 - **Alternative**: `sudo apt-get install wkhtmltopdf` (fallback option)
 ### Download
 Download the latest release for your platform from the [Releases](https://github.com/amitwh/pan-converter/releases) page.
 #### Linux
 - **AppImage**: `PanConverter-1.5.0.AppImage` (universal, may require `--no-sandbox` flag)
 - **Debian Package**: `pan-converter_1.5.6_amd64.deb`
 - **Snap Package**: `pan-converter_1.5.6_amd64.snap`
 ### Install from Source
 ```bash
 git clone https://github.com/amitwh/pan-converter.git
 cd pan-converter
 npm install
 ```
 ### Run the Application
 ```bash
 npm start
 ```
-### Build for Distribution
+## Usage
 ```bash
 # Windows
 npm run build:win
-# macOS
+### Basic Workflow
-npm run build:mac
+1. **Write** - Use the editor to write your Markdown content
 2. **Preview** - Toggle the preview pane to see rendered output
 3. **Theme** - Choose your preferred theme from the View menu
 4. **Export** - Export your document to various formats
-# Linux
+### Export Options
-npm run build:linux
+- **Documents**: HTML, PDF, DOCX, LaTeX, RTF, ODT, EPUB
-```
+- **Presentations**: PowerPoint (PPTX), OpenDocument Presentation (ODP)
 - **Spreadsheets**: CSV format for tables (compatible with Excel, LibreOffice, Google Sheets)
 - **Advanced Export Options**: Optional template support, metadata insertion, table of contents, section numbering, and PDF-specific settings
 - **Batch Conversion**: Convert entire folders of markdown files with progress tracking
 ### Import & Conversion
 - **Import Documents**: Convert DOCX, ODT, RTF, HTML, PDF, and presentation files to Markdown
 - **Cross-Format Conversion**: Convert current file between multiple formats
 - **Smart Presentation Handling**: Automatic slide-level formatting for PPTX/ODP exports
 ### Table Creation
 - Click the table button in the toolbar
 - Specify number of rows and columns
 - Automatically generates properly formatted Markdown tables
 ## Keyboard Shortcuts
-| Action | Shortcut |
+### File Operations
-|--------|----------|
+- `Ctrl/Cmd + N` - New file/tab
-| New File | Ctrl+N |
+- `Ctrl/Cmd + T` - New tab
-| Open File | Ctrl+O |
+- `Ctrl/Cmd + W` - Close current tab
-| Open PDF | Ctrl+Shift+O |
+- `Ctrl/Cmd + Tab` - Switch to next tab
-| Save | Ctrl+S |
+- `Ctrl/Cmd + O` - Open file
-| Save As | Ctrl+Shift+S |
+- `Ctrl/Cmd + S` - Save file
-| Export | Ctrl+E |
+- `Ctrl/Cmd + Shift + S` - Save as
-| Print | Ctrl+P |
+- `Ctrl/Cmd + I` - Import document
 | Find | Ctrl+F |
 | Undo | Ctrl+Z |
 | Redo | Ctrl+Shift+Z |
 | New Tab | Ctrl+T |
 | Close Tab | Ctrl+W |
 | Toggle Preview | Ctrl+Shift+P |
 | Zoom In | Ctrl+Shift++ |
 | Zoom Out | Ctrl+Shift+- |
-## Themes
+### Editor Features
 - `Ctrl/Cmd + F` - Find & Replace
 - `Ctrl/Cmd + Z` - Undo
 - `Ctrl/Cmd + Shift + Z` - Redo
 - `Tab` - Indent lines or insert 4 spaces
 - `Shift + Tab` - Outdent selected lines
 - `Enter` - Auto-continue lists with proper indentation
-### Light Themes
+### View & Navigation
- Atom One Light (Default)
+- `Ctrl/Cmd + P` - Toggle preview
- GitHub Light
+- `Ctrl/Cmd + Enter` - Toggle preview (alternative)
- Light
+- `Escape` - Close find dialog
 - Solarized Light
 - Gruvbox Light
 - Ayu Light
 - Sepia
 - Paper
 - Rose Pine Dawn
 - Concrete Light
-### Dark Themes
+## Building
 - Dark
 - One Dark
 - Dracula
 - Nord
 - Monokai
 - Material
 - Gruvbox Dark
 - Tokyo Night
 - Palenight
 - Ayu Dark
 - Ayu Mirage
 - Oceanic Next
 - Cobalt2
 - Concrete Dark
 - Concrete Warm
-## PDF Viewer
+```bash
 # Install dependencies
 npm install
-Open PDF files directly in MarkdownConverter:
+# Generate icons
- **File > Open PDF** or **Ctrl+Shift+O**
+npm run generate-icons
 - Navigate pages with arrow buttons or page input
 - Zoom controls: +/- buttons, Fit Width, Fit Page
 - Rotate pages left or right
 - Close PDF to return to editor
-## Open Source
+# Build for current platform
 npm run build
-MarkdownConverter is 100% open-source. All dependencies are permissively licensed:
+# Build for specific platform
- **Electron** - MIT License
+npm run build:win    # Windows
- **pdf-lib** - MIT License
+npm run build:mac    # macOS  
- **pdfjs-dist** - Apache 2.0 License
+npm run build:linux  # Linux (generates .deb, .AppImage, and .snap)
- **marked** - MIT License
+
- **highlight.js** - BSD 3-Clause License
+# Build for all platforms
- **dompurify** - Apache 2.0/MIT License
+npm run dist:all
- **docx** - MIT License
+```
- **xlsx** - Apache 2.0 License (SheetJS Community Edition)
+
 ## Version History
 - **v1.8.0** - Added enhanced Word export with template support to batch converter
 - **v1.7.9** - Enhanced Word Export with Template Support: Template-based DOCX generation with custom templates, table styling, ASCII art support, and red-colored flowchart arrows
 - **v1.5.6** - (Your release notes here)
 - **v1.5.5** - Refactored PDF export, simplified Pandoc pathing, and removed XLSX dependency.
 - **v1.3.1** - Bug fixes: Fixed file associations for double-clicking .md files, corrected 50/50 layout alignment for editor/preview panes
 - **v1.3.0** - Major update: Tabbed interface for multiple files, enhanced PDF export with LaTeX engines, fixed file associations, removed redundant converter menu, improved UI architecture
 - **v1.2.1** - Comprehensive editor enhancements: Find & Replace, Line Numbers, Undo/Redo, Auto-indentation, PowerPoint export, document conversion menu, table creation helper, spreadsheet export
 - **v1.1.0** - Added Excel/ODS spreadsheet export, updated author information, renamed to PanConverter
 - **v1.0.0** - Initial release with basic markdown editing, themes, and Pandoc export
 ## Known Issues
 - AppImage may require `--no-sandbox` flag on some Linux systems
 - Windows/Mac builds require platform-specific build environments
 - Large files may cause performance issues
 ## Contributing
 Contributions are welcome! Please feel free to submit a Pull Request to the [GitHub repository](https://github.com/amitwh/pan-converter).
 ## License
@@ -158,8 +164,13 @@ MIT License - see LICENSE file for details.
 ## Author
-Amit Haridas (amit.wh@gmail.com)
+**Amit Haridas** - [amit.wh@gmail.com](mailto:amit.wh@gmail.com)
-## Version
+## Acknowledgments
-v3.0.0
+- Built with [Electron](https://www.electronjs.org/)
 - Markdown parsing by [marked](https://marked.js.org/)
 - Export functionality powered by [Pandoc](https://pandoc.org/)
 - Syntax highlighting by [highlight.js](https://highlightjs.org/)
 - Spreadsheet export by [XLSX](https://www.npmjs.com/package/xlsx)
 - HTML sanitization by [DOMPurify](https://www.npmjs.com/package/dompurify)
@@ -1,217 +0,0 @@
 # PanConverter - Updates & Changelog
 ## Version 4.0.0 (2026-03-04)
 ### Major Changes
 - **CodeMirror 6 Editor** — Replaced textarea with CodeMirror 6 featuring syntax highlighting, code folding, bracket matching, multiple cursors, and auto-indent
 - **Sidebar Panel System** — Collapsible sidebar with File Explorer, Git, Snippets, and Templates panels
 - **Command Palette** — Ctrl+Shift+P to search and execute all app actions
 - **Code Execution (REPL)** — Run JavaScript, Python, and Bash code blocks directly from the preview
 ### New Features
 - Print Preview dialog with paper size, orientation, margins, scale, and page range controls
 - Image paste from clipboard and drag-drop support with auto-save to assets folder
 - Document templates library (10 templates: blog post, meeting notes, tech spec, changelog, README, project plan, API docs, tutorial, release notes, comparison)
 - Markdown extensions: footnotes, admonitions (note/warning/tip/danger/info), and [[toc]] table of contents
 - PlantUML diagram rendering alongside Mermaid
 - Welcome tab with onboarding and "What's New" feature showcase
 - System spell checking with context menu suggestions and dictionary support
 - Enhanced status bar with word count, character count, line/column, encoding, and language mode
 - Grouped toolbar with visual section separators
 - Breadcrumb bar showing current file path
 ### New Export/Import Formats
 - Reveal.js slides (.html)
 - Beamer slides (.pdf)
 - Confluence/Jira wiki markup (.txt)
 - MOBI e-books (via Calibre)
 - Developer formats: JSON, YAML, XML, TOML
 ### Security
 - Content Security Policy (CSP) meta tag
 - File size validation (50MB limit)
 - Error message sanitization (stripped file paths)
 - Conversion rate limiting (2-second debounce)
 ### Dependencies Updated
 - marked: 16.x to 17.x (with marked-highlight extension)
 - pdfjs-dist: 3.x to 5.x (new worker model)
 - html2pdf.js: 0.10 to 0.14
 - pdfkit: 0.14 to 0.17
 - dompurify, docx, and others updated to latest
 ### Testing
 - 80 tests across 7 test suites
 - New tests for sidebar manager, command palette, print preview, markdown extensions, and utility functions
 ### Breaking Changes
 - Editor is now CodeMirror 6 (replaces textarea)
 - marked API changed to use marked.use() instead of marked.setOptions()
 - pdfjs-dist upgraded to v5 with new worker model
 ---
 ## Version 2.1.0 (December 14, 2025)
 ### 🎨 UI/UX Improvements
 #### Subtle & Small Preview Popout Button
 - Redesigned popout button with minimalist aesthetic
 - Removed border for cleaner appearance
 - Reduced size: 11px font, 2px×6px padding (previously 14px font, 4px×8px padding)
 - Added opacity transition: 50% when idle, 100% on hover
 - Subtle background effect on hover instead of heavy border styling
 - **File**: `src/styles.css:195-211`
 #### Simplified Table Headers in Preview
 - Removed gradient background from table headers in modern theme
 - Changed from `var(--primary-gradient)` (purple gradient) to simple light gray (#f0f0f0)
 - Updated text color to dark (#333333) for better readability
 - Clean, professional appearance matching standard themes
 - **File**: `src/styles-modern.css:445-449`
 ### 📥 Enhanced Import Capabilities
 #### Comprehensive Format-to-Markdown Conversion
 Dramatically expanded the "Import Document" feature to support 30+ file formats:
 **Supported Formats:**
 - **Documents**: DOCX, ODT, RTF, HTML, HTM, TEX, EPUB, PDF, TXT
 - **Presentations**: PPTX, ODP
 - **Markup Languages**: RST, Textile, MediaWiki, Org-mode, AsciiDoc, TWiki, OPML
 - **E-book Formats**: EPUB, FB2
 - **LaTeX Formats**: TEX, LATEX, LTX
 - **Web Formats**: HTML, HTM, XHTML
 - **Wiki Formats**: MediaWiki, DokuWiki, TikiWiki, TWiki
 - **Data Formats**: CSV, TSV, JSON
 **Format-Specific Optimizations:**
 - PDF text extraction with XeLaTeX engine
 - CSV/TSV automatic table conversion
 - JSON structure handling
 - Improved error messages with format hints
 **Access**: File → Import Document (Ctrl+I)
 **File**: `src/main.js:1933-1994`
 ### 🎨 Exhaustive ASCII Art Generator
 #### 5 New Text Banner Styles
 Complete alphabet (A-Z) and numbers (0-9) support for all styles:
 1. **Standard** - Classic ASCII art with slashes and underscores
 2. **Banner** - Large format using # characters (7-line height)
 3. **Block** - Modern Unicode block characters (█ ╔ ╗ ═ ║)
 4. **Bubble** - Circular bubble letters (Ⓐ Ⓑ Ⓒ)
 5. **Digital** - Digital display style (▄ ▀ ▐ ▌)
 **File**: `src/renderer.js:3397-3537`
 #### 19 Professional ASCII Templates
 Organized into 4 categories with expanded options:
 **Arrows & Flow (4 templates):**
 - Arrow Right - Horizontal flow indicators
 - Arrow Down - Vertical flow indicators
 - Decision - Binary decision diagrams
 - Process Flow - Multi-step process visualization
 **Diagrams & Charts (6 templates):**
 - Flowchart - Advanced flowchart with decision branches and loops
 - Sequence - Sequence diagrams for User-System-Database interactions
 - Network - Server-client network topology
 - Hierarchy - Organizational tree structures
 - Timeline - Milestone visualization with dates
 - Table Simple - Basic table template with borders
 **Boxes & Containers (4 templates):**
 - Header - Section header with decorative borders
 - Note Box - Important notes with rounded corners (┏━━┓)
 - Warning Box - Warning messages with bold borders (╔═══╗)
 - Info Box - Information boxes with subtle styling (╭───╮)
 **Decorative Elements (6 templates):**
 - Divider - Horizontal section separator (═══)
 - Separator Fancy - Elegant rounded divider
 - Brackets - Japanese-style brackets 【 】
 - Banner Stars - Star-bordered banners
 - Checklist - Task lists with ✓ checkmarks
 - Progress Bar - Visual progress indicators
 **Features:**
 - All ASCII art automatically wrapped in code blocks for proper rendering
 - Preserved formatting in markdown preview and all export formats
 - Categorized template selection interface
 - Real-time preview generation
 **Access**: Tools → ASCII Art Generator
 **Files**: `src/renderer.js:3513-3671`, `src/index.html:427-466`
 ### 📝 Technical Improvements
 - Enhanced ASCII art detection in Word template exporter
 - Improved monospace font rendering across all export formats
 - Better code block preservation in PDF and Word exports
 - Optimized template categorization and organization
 ### 🔧 Files Modified
 - `src/styles.css` - Preview popout button styling
 - `src/styles-modern.css` - Table header simplification
 - `src/main.js` - Enhanced import function, version update
 - `src/renderer.js` - ASCII art generator enhancements
 - `src/index.html` - ASCII template UI organization
 - `package.json` - Version bump to 2.1.0
 ---
 ## Version 2.0.0 (Previous Release)
 ### Major Features
 - Export Profiles - Save and reuse export configurations
 - Mermaid.js diagram support
 - Command Palette (Ctrl+Shift+P)
 - GitHub Light/Dark preview themes
 - Table Generator
 - ASCII Art Generator (basic)
 - Resizable Preview Pane
 - Pop-out Preview Window
 - Configurable page sizes (A3-A5, B4-B5, Letter, Legal, Tabloid, Custom)
 - Custom Headers & Footers for exports
 - Enhanced PDF and Word export with templates
 - 22 beautiful themes
 ### Core Capabilities
 - Cross-platform markdown editor with live preview
 - Universal document conversion (30+ formats)
 - PDF Editor (merge, split, compress, rotate, watermark, encrypt)
 - Batch file conversion
 - File association support
 - Advanced export options
 - Multi-tab interface
 ---
 ## Installation & Usage
 ### Prerequisites
 - **Pandoc** - Required for document conversion
 - **Optional**: LibreOffice, ImageMagick, FFmpeg for universal converter
 ### Download
 Get the latest release from: https://github.com/amitwh/pan-converter/releases
 ### Supported Platforms
 - Windows (x64)
 - Linux (AppImage, .deb, .snap)
 - macOS (planned)
 ---
 ## Contributing
 Contributions are welcome! Please see [CLAUDE.md](CLAUDE.md) for development guidelines.
 **Author**: Amit Haridas (amit.wh@gmail.com)
 **License**: MIT
 **Repository**: https://github.com/amitwh/pan-converter
@@ -0,0 +1,8 @@
 <svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
  <rect width="256" height="256" rx="32" fill="#4A90E2"/>
  <g transform="translate(40, 40)">
    <path d="M20 40 L20 136 L80 136 L80 100 L56 100 L56 76 L80 76 L80 40 Z" fill="white" opacity="0.9"/>
    <path d="M96 40 L96 136 L156 136 L156 100 L132 100 L132 88 L156 88 L156 52 L132 52 L132 40 Z" fill="white" opacity="0.9"/>
  </g>
  <text x="128" y="200" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">PAN</text>
 </svg>
@@ -1,111 +0,0 @@
 /**
 * ESLint Configuration for PanConverter
 * Uses flat config format (ESLint 9+)
 */
 module.exports = [
  {
    // Global ignores
    ignores: [
      'node_modules/**',
      'dist/**',
      'coverage/**',
      '*.min.js'
    ]
  },
  {
    // JavaScript files
    files: ['**/*.js'],
    languageOptions: {
      ecmaVersion: 2022,
      sourceType: 'module',
      globals: {
        // Node.js
        require: 'readonly',
        module: 'readonly',
        exports: 'readonly',
        __dirname: 'readonly',
        __filename: 'readonly',
        process: 'readonly',
        Buffer: 'readonly',
        console: 'readonly',
        setTimeout: 'readonly',
        setInterval: 'readonly',
        clearTimeout: 'readonly',
        clearInterval: 'readonly',
        // Browser
        window: 'readonly',
        document: 'readonly',
        localStorage: 'readonly',
        alert: 'readonly',
        prompt: 'readonly',
        confirm: 'readonly',
        Event: 'readonly',
        CustomEvent: 'readonly',
        HTMLElement: 'readonly',
        MutationObserver: 'readonly',
        TextEncoder: 'readonly',
        FileReader: 'readonly',
        requestAnimationFrame: 'readonly',
        cancelAnimationFrame: 'readonly',
        navigator: 'readonly',
        location: 'readonly',
        fetch: 'readonly',
        URL: 'readonly',
        Blob: 'readonly',
        Image: 'readonly',
        DragEvent: 'readonly',
        ClipboardEvent: 'readonly',
        KeyboardEvent: 'readonly',
        MouseEvent: 'readonly',
        NodeList: 'readonly',
        HTMLInputElement: 'readonly',
        HTMLTextAreaElement: 'readonly',
        getComputedStyle: 'readonly',
        // Electron
        electronAPI: 'readonly',
        // Libraries
        marked: 'readonly',
        DOMPurify: 'readonly',
        hljs: 'readonly',
        mermaid: 'readonly',
        // Node.js global object
        global: 'writable',
        // Jest
        jest: 'readonly',
        describe: 'readonly',
        test: 'readonly',
        expect: 'readonly',
        beforeEach: 'readonly',
        afterEach: 'readonly',
        beforeAll: 'readonly',
        afterAll: 'readonly'
      }
    },
    rules: {
      // Error prevention
      'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
      'no-undef': 'error',
      'no-console': 'off', // Allow console for Electron apps
      // Code quality
      'eqeqeq': ['warn', 'always'],
      'no-var': 'warn',
      'prefer-const': 'warn',
      // Style (handled by Prettier)
      'semi': 'off',
      'quotes': 'off',
      'indent': 'off',
      // Async handling
      'no-async-promise-executor': 'warn',
      'require-await': 'off',
      // Security
      'no-eval': 'error',
      'no-implied-eval': 'error',
      'no-new-func': 'error'
    }
  }
 ];
@@ -1,61 +0,0 @@
 /**
 * Jest Configuration for PanConverter
 * @version 2.2.0
 */
 module.exports = {
  // Test environment
  testEnvironment: 'jsdom',
  // Root directory
  rootDir: '.',
  // Test file patterns
  testMatch: [
    '**/tests/**/*.test.js',
    '**/tests/**/*.spec.js'
  ],
  // Coverage configuration
  collectCoverageFrom: [
    'src/**/*.js',
    '!src/main.js', // Main process needs electron-mock
    '!src/renderer.js', // Large renderer file with duplicate declarations
    '!src/preload.js', // Electron preload requires contextBridge
    '!**/node_modules/**'
  ],
  // Coverage thresholds (raised with expanded test suite)
  coverageThreshold: {
    global: {
      branches: 10,
      functions: 15,
      lines: 15,
      statements: 15
    }
  },
  // Transform settings (no transpilation needed for vanilla JS)
  transform: {},
  // Module paths
  moduleDirectories: ['node_modules', 'src'],
  // Setup files
  setupFilesAfterEnv: ['<rootDir>/tests/setup.js'],
  // Ignore patterns
  testPathIgnorePatterns: [
    '/node_modules/',
    '/dist/'
  ],
  // Verbose output
  verbose: true,
  // Clear mocks between tests
  clearMocks: true,
  // Reset modules between tests
  resetModules: true
 };
@@ -1,20 +1,13 @@
 {
-  "name": "markdown-converter",
+  "name": "pan-converter",
-  "version": "4.0.0",
+  "version": "2.0.0",
-  "description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
+  "description": "Cross-platform Markdown editor and converter using Pandoc",
  "main": "src/main.js",
  "scripts": {
    "start": "electron .",
-    "test": "jest",
+    "test": "echo \"Error: no test specified\" && exit 1",
    "test:watch": "jest --watch",
    "test:coverage": "jest --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": "cross-env CSC_LINK=code-signing-cert.pfx CSC_KEY_PASSWORD=PanConverter2024! 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-unsigned": "cross-env CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --win",
    "build:mac": "electron-builder --mac",
    "build:linux": "electron-builder --linux",
@@ -26,69 +19,35 @@
    "markdown",
    "pandoc",
    "converter",
-    "editor",
+    "editor"
    "pdf",
    "audio",
    "video",
    "image"
  ],
-  "author": "ConcreteInfo <amit.wh@gmail.com>",
+  "author": "Amit Haridas <amit.wh@gmail.com>",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/amitwh/markdown-converter"
  },
  "devDependencies": {
    "@testing-library/dom": "^10.4.1",
    "cross-env": "^10.0.0",
    "electron": "^37.4.0",
    "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",
    "prettier": "^3.7.4",
    "sharp": "^0.34.3"
  },
  "dependencies": {
    "@codemirror/autocomplete": "^6.20.1",
    "@codemirror/commands": "^6.10.2",
    "@codemirror/lang-css": "^6.3.1",
    "@codemirror/lang-html": "^6.4.11",
    "@codemirror/lang-javascript": "^6.2.5",
    "@codemirror/lang-json": "^6.0.2",
    "@codemirror/lang-markdown": "^6.5.0",
    "@codemirror/lang-python": "^6.2.1",
    "@codemirror/language": "^6.12.2",
    "@codemirror/lint": "^6.9.5",
    "@codemirror/search": "^6.6.0",
    "@codemirror/state": "^6.5.4",
    "@codemirror/theme-one-dark": "^6.1.3",
    "@codemirror/view": "^6.39.16",
    "codemirror": "^6.0.2",
    "core-util-is": "^1.0.3",
-    "docx": "^9.6.0",
+    "docx": "^9.5.1",
    "docx4js": "^3.3.0",
-    "dompurify": "^3.3.1",
+    "dompurify": "^3.2.6",
    "electron-store": "^10.1.0",
    "highlight.js": "^11.11.1",
-    "html2pdf.js": "^0.14.0",
+    "html2pdf.js": "^0.10.1",
-    "marked": "^17.0.3",
+    "marked": "^16.2.1",
    "marked-footnote": "^1.4.0",
    "marked-highlight": "^2.2.3",
    "mermaid": "^11.12.3",
    "pdf-lib": "^1.17.1",
-    "pdfjs-dist": "^5.5.207",
+    "pdfkit": "^0.14.0",
    "pdfkit": "^0.17.2",
    "pizzip": "^3.2.0",
    "simple-git": "^3.32.3",
    "tslib": "^2.8.1",
    "xlsx": "^0.18.5"
  },
  "build": {
-    "appId": "com.concreteinfo.markdownconverter",
+    "appId": "com.panconverter.app",
-    "productName": "MarkdownConverter",
+    "productName": "PanConverter",
    "directories": {
      "output": "dist"
    },
@@ -114,18 +73,10 @@
        "description": "Markdown Document",
        "mimeType": "text/markdown",
        "role": "Editor"
      },
      {
        "ext": "pdf",
        "name": "PDF Document",
        "description": "PDF Document",
        "mimeType": "application/pdf",
        "role": "Editor"
      }
    ],
    "mac": {
-      "category": "public.app-category.productivity",
+      "category": "public.app-category.productivity"
      "identity": null
    },
    "win": {
      "target": [
@@ -159,7 +110,7 @@
      "displayLanguageSelector": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
-      "shortcutName": "MarkdownConverter",
+      "shortcutName": "PanConverter",
      "runAfterFinish": true,
      "menuCategory": "Productivity",
      "license": "LICENSE",
@@ -172,29 +123,16 @@
      "target": [
        "deb",
        "AppImage",
-        "snap",
+        "snap"
        "rpm"
      ],
-      "category": "Utility",
+      "category": "Utility"
      "maintainer": "ConcreteInfo <amit.wh@gmail.com>"
    },
    "deb": {
      "depends": [
-        "pandoc",
+        "pandoc"
        "ffmpeg",
        "imagemagick",
        "libreoffice-common"
      ],
-      "description": "Professional Markdown editor and universal file converter",
+      "description": "Markdown editor and converter using Pandoc",
-      "maintainer": "ConcreteInfo <amit.wh@gmail.com>"
+      "maintainer": "Amit Haridas <amit.wh@gmail.com>"
    },
    "rpm": {
      "depends": [
        "pandoc",
        "ffmpeg",
        "ImageMagick",
        "libreoffice-core"
      ]
    }
  }
 }
@@ -1,82 +1,43 @@
 /**
 * Icon Generator for MarkdownConverter
 * Generates all required icon sizes from NewIcon.jpg
 */
 const sharp = require('sharp');
 const fs = require('fs');
 const path = require('path');
-// Source image
+const sizes = {
-const sourceImage = path.join(__dirname, '..', 'assets', 'docico1.png');
+    'icon.png': 512,
-const assetsDir = path.join(__dirname, '..', 'assets');
+    'icon@2x.png': 1024,
    'icon.ico': 256,
    'icon.icns': 512
 };
-// Icon sizes needed for different platforms
+const svgPath = path.join(__dirname, '..', 'assets', 'icon.svg');
-const iconSizes = [16, 24, 32, 48, 64, 128, 256, 512, 1024];
+const svgBuffer = fs.readFileSync(svgPath);
 async function generateIcons() {
-  console.log('Generating icons from docico1.png...');
+    for (const [filename, size] of Object.entries(sizes)) {
-
+        const outputPath = path.join(__dirname, '..', 'assets', filename);
-  // Check if source exists
+        
-  if (!fs.existsSync(sourceImage)) {
+        if (filename.endsWith('.png')) {
-    console.error('Source image not found:', sourceImage);
+            await sharp(svgBuffer)
-    process.exit(1);
+                .resize(size, size)
-  }
+                .png()
-
+                .toFile(outputPath);
-  try {
+            console.log(`Generated ${filename}`);
-    // Generate main icon.png (512x512)
+        } else if (filename.endsWith('.ico')) {
-    await sharp(sourceImage)
+            // For ICO, we'll just use the PNG version
-      .resize(512, 512, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
+            await sharp(svgBuffer)
-      .png()
+                .resize(size, size)
-      .toFile(path.join(assetsDir, 'icon.png'));
+                .png()
-    console.log('Generated icon.png (512x512)');
+                .toFile(outputPath.replace('.ico', '.png'));
-
+            console.log(`Generated ${filename.replace('.ico', '.png')} (use png2ico to convert)`);
-    // Generate icon@2x.png (1024x1024)
+        } else if (filename.endsWith('.icns')) {
-    await sharp(sourceImage)
+            // For ICNS, we'll just use the PNG version
-      .resize(1024, 1024, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
+            await sharp(svgBuffer)
-      .png()
+                .resize(size, size)
-      .toFile(path.join(assetsDir, 'icon@2x.png'));
+                .png()
-    console.log('Generated icon@2x.png (1024x1024)');
+                .toFile(outputPath.replace('.icns', '.png'));
-
+            console.log(`Generated ${filename.replace('.icns', '.png')} (use png2icns to convert)`);
-    // Create icons directory for multi-size icons
+        }
    const iconsDir = path.join(assetsDir, 'icons');
    if (!fs.existsSync(iconsDir)) {
      fs.mkdirSync(iconsDir, { recursive: true });
    }
    // Generate all sizes
    for (const size of iconSizes) {
      await sharp(sourceImage)
        .resize(size, size, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
        .png()
        .toFile(path.join(iconsDir, `${size}x${size}.png`));
      console.log(`Generated icons/${size}x${size}.png`);
    }
    // Generate favicon
    await sharp(sourceImage)
      .resize(32, 32, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
      .png()
      .toFile(path.join(assetsDir, 'favicon.png'));
    console.log('Generated favicon.png (32x32)');
    // Generate tray icon (smaller, for system tray)
    await sharp(sourceImage)
      .resize(24, 24, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
      .png()
      .toFile(path.join(assetsDir, 'tray-icon.png'));
    console.log('Generated tray-icon.png (24x24)');
    console.log('\nIcon generation complete!');
    console.log('\nFor Windows .ico file, use an online converter or:');
    console.log('  magick convert assets/icons/*.png assets/icon.ico');
    console.log('\nFor macOS .icns file, use:');
    console.log('  iconutil -c icns assets/icon.iconset -o assets/icon.icns');
  } catch (error) {
    console.error('Error generating icons:', error);
    process.exit(1);
  }
 }
-generateIcons();
+generateIcons().catch(console.error);
@@ -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 };
@@ -1,123 +0,0 @@
 // CodeMirror 6 wrapper module
 // Provides createEditor() and getLanguageExtension() for the rest of the app.
 const {
  EditorView,
  keymap,
  lineNumbers,
  highlightActiveLine,
  drawSelection,
 } = require('@codemirror/view');
 const { EditorState } = require('@codemirror/state');
 const { markdown, markdownLanguage } = require('@codemirror/lang-markdown');
 // Language extensions loaded lazily on first use
 let _javascript, _html, _css, _json, _python;
 const {
  defaultKeymap,
  history,
  historyKeymap,
  indentWithTab,
 } = require('@codemirror/commands');
 const {
  searchKeymap,
  highlightSelectionMatches,
 } = require('@codemirror/search');
 const {
  autocompletion,
  completionKeymap,
 } = require('@codemirror/autocomplete');
 const {
  bracketMatching,
  foldGutter,
  indentOnInput,
 } = require('@codemirror/language');
 const { oneDark } = require('@codemirror/theme-one-dark');
 /**
 * Create a CodeMirror 6 editor instance.
 *
 * @param {HTMLElement} parentElement - DOM element to mount the editor in
 * @param {Object}  options
 * @param {string}  options.content          - initial document content (default '')
 * @param {Function} options.onChange        - called with new content string on every doc change
 * @param {Function} options.onUpdate       - called with the EditorView on every update (selection, doc change, etc.)
 * @param {boolean} options.isDark           - apply oneDark theme when true (default false)
 * @param {boolean} options.showLineNumbers  - show line-number gutter (default true)
 * @returns {EditorView} the created editor view
 */
 function createEditor(parentElement, options = {}) {
  const {
    content = '',
    onChange = () => {},
    onUpdate = null,
    isDark = false,
    showLineNumbers = true,
  } = options;
  const extensions = [
    markdown({ base: markdownLanguage }),
    history(),
    drawSelection(),
    highlightActiveLine(),
    bracketMatching(),
    indentOnInput(),
    highlightSelectionMatches(),
    autocompletion(),
    foldGutter(),
    keymap.of([
      ...defaultKeymap,
      ...historyKeymap,
      ...searchKeymap,
      ...completionKeymap,
      indentWithTab,
    ]),
    EditorView.updateListener.of((update) => {
      if (update.docChanged) {
        onChange(update.state.doc.toString());
      }
      if (onUpdate && (update.docChanged || update.selectionSet)) {
        onUpdate(update.view);
      }
    }),
    EditorView.lineWrapping,
  ];
  if (showLineNumbers) {
    extensions.push(lineNumbers());
  }
  if (isDark) {
    extensions.push(oneDark);
  }
  const state = EditorState.create({ doc: content, extensions });
  const view = new EditorView({ state, parent: parentElement });
  return view;
 }
 /**
 * Return the appropriate CodeMirror language extension for a given language name.
 *
 * Supported values: javascript, js, html, css, json, python, py, markdown.
 * Falls back to markdown when the language is unrecognised.
 *
 * @param {string} lang - language identifier
 * @returns {Extension} CodeMirror language extension
 */
 function getLanguageExtension(lang) {
  const loaders = {
    javascript: () => { if (!_javascript) _javascript = require('@codemirror/lang-javascript').javascript; return _javascript(); },
    html: () => { if (!_html) _html = require('@codemirror/lang-html').html; return _html(); },
    css: () => { if (!_css) _css = require('@codemirror/lang-css').css; return _css(); },
    json: () => { if (!_json) _json = require('@codemirror/lang-json').json; return _json(); },
    python: () => { if (!_python) _python = require('@codemirror/lang-python').python; return _python(); },
    markdown: () => markdown({ base: markdownLanguage }),
  };
  loaders.js = loaders.javascript;
  loaders.py = loaders.python;
  const loader = loaders[lang];
  return loader ? loader() : markdown({ base: markdownLanguage });
 }
 module.exports = { createEditor, getLanguageExtension };
@@ -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');
 }
@@ -2,29 +2,20 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; img-src 'self' data: blob: file:; font-src 'self' data:; connect-src 'self' https://www.plantuml.com;">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MarkdownConverter</title>
+    <title>PanConverter - Markdown Editor</title>
-    <link rel="stylesheet" href="fonts.css">
+    <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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="styles-modern.css">
-    <link rel="stylesheet" href="styles-concreteinfo.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
-    <link rel="stylesheet" href="styles-sidebar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
-    <link rel="stylesheet" href="styles-welcome.css">
+    <!-- Mermaid.js for diagram rendering -->
-    <link rel="stylesheet" href="../node_modules/highlight.js/styles/default.css">
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
 </head>
 <body>
    <div class="container">
        <!-- App Header with ConcreteInfo Logo -->
        <div class="app-header" id="app-header">
            <div class="app-header-left">
                <img src="../assets/logo.png" alt="MarkdownConverter" class="app-logo" id="app-logo">
                <span class="app-title">MarkdownConverter</span>
            </div>
            <div class="app-header-right">
                <span class="app-version">v4.0.0</span>
            </div>
        </div>
        <div class="tab-bar" id="tab-bar">
            <div class="tab active" data-tab-id="1">
                <span class="tab-title">Untitled</span>
@@ -33,124 +24,107 @@
            <button class="new-tab-button" id="new-tab-btn" title="New tab">+</button>
        </div>
        <div class="toolbar">
-            <div class="toolbar-group">
+            <button id="btn-bold" title="Bold">
-                <!-- Format: Bold, Italic, Strikethrough -->
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <button id="btn-bold" title="Bold (Ctrl+B)">
+                    <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
-                        <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+                </svg>
-                        <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+            </button>
-                    </svg>
+            <button id="btn-italic" title="Italic">
-                </button>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <button id="btn-italic" title="Italic (Ctrl+I)">
+                    <line x1="19" y1="4" x2="10" y2="4"></line>
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="14" y1="20" x2="5" y2="20"></line>
-                        <line x1="19" y1="4" x2="10" y2="4"></line>
+                    <line x1="15" y1="4" x2="9" y2="20"></line>
-                        <line x1="14" y1="20" x2="5" y2="20"></line>
+                </svg>
-                        <line x1="15" y1="4" x2="9" y2="20"></line>
+            </button>
-                    </svg>
+            <button id="btn-heading" title="Heading">
-                </button>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <button id="btn-strikethrough" title="Strikethrough">
+                    <polyline points="4 7 4 4 20 4 20 7"></polyline>
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="9" y1="20" x2="15" y2="20"></line>
-                        <path d="M16 4H9a3 3 0 0 0-2.83 4"></path>
+                    <line x1="12" y1="4" x2="12" y2="20"></line>
-                        <path d="M14 12a4 4 0 0 1 0 8H6"></path>
+                </svg>
-                        <line x1="4" y1="12" x2="20" y2="12"></line>
+            </button>
-                    </svg>
+            <button id="btn-link" title="Link">
-                </button>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            </div>
+                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                </svg>
            </button>
            <button id="btn-code" title="Code">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="16 18 22 12 16 6"></polyline>
                    <polyline points="8 6 2 12 8 18"></polyline>
                </svg>
            </button>
            <button id="btn-list" title="List">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="8" y1="6" x2="21" y2="6"></line>
                    <line x1="8" y1="12" x2="21" y2="12"></line>
                    <line x1="8" y1="18" x2="21" y2="18"></line>
                    <line x1="3" y1="6" x2="3.01" y2="6"></line>
                    <line x1="3" y1="12" x2="3.01" y2="12"></line>
                    <line x1="3" y1="18" x2="3.01" y2="18"></line>
                </svg>
            </button>
            <button id="btn-quote" title="Quote">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path>
                    <path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path>
                </svg>
            </button>
            <button id="btn-table" title="Insert Table">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="3" y1="9" x2="21" y2="9"></line>
                    <line x1="3" y1="15" x2="21" y2="15"></line>
                    <line x1="9" y1="3" x2="9" y2="21"></line>
                    <line x1="15" y1="3" x2="15" y2="21"></line>
                </svg>
            </button>
            <button id="btn-strikethrough" title="Strikethrough">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M16 4H9a3 3 0 0 0-2.83 4"></path>
                    <path d="M14 12a4 4 0 0 1 0 8H6"></path>
                    <line x1="4" y1="12" x2="20" y2="12"></line>
                </svg>
            </button>
            <button id="btn-code-block" title="Code Block">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="2" y="6" width="20" height="12" rx="2"></rect>
                    <path d="m10 10-2 2 2 2"></path>
                    <path d="m14 10 2 2-2 2"></path>
                </svg>
            </button>
            <button id="btn-horizontal-rule" title="Horizontal Rule">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="3" y1="12" x2="21" y2="12"></line>
                    <line x1="3" y1="6" x2="21" y2="6"></line>
                    <line x1="3" y1="18" x2="21" y2="18"></line>
                </svg>
            </button>
            <div class="toolbar-separator"></div>
-            <div class="toolbar-group">
+            <button id="btn-find" title="Find & Replace (Ctrl+F)">
-                <!-- Structure: Heading, List, Quote -->
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <button id="btn-heading" title="Heading">
+                    <circle cx="11" cy="11" r="8"></circle>
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="m21 21-4.35-4.35"></path>
-                        <polyline points="4 7 4 4 20 4 20 7"></polyline>
+                </svg>
-                        <line x1="9" y1="20" x2="15" y2="20"></line>
+            </button>
-                        <line x1="12" y1="4" x2="12" y2="20"></line>
+            <button id="btn-line-numbers" title="Toggle Line Numbers">
-                    </svg>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                </button>
+                    <path d="M3 6h18"></path>
-                <button id="btn-list" title="List">
+                    <path d="M3 12h18"></path>
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M3 18h18"></path>
-                        <line x1="8" y1="6" x2="21" y2="6"></line>
+                </svg>
-                        <line x1="8" y1="12" x2="21" y2="12"></line>
+            </button>
                        <line x1="8" y1="18" x2="21" y2="18"></line>
                        <line x1="3" y1="6" x2="3.01" y2="6"></line>
                        <line x1="3" y1="12" x2="3.01" y2="12"></line>
                        <line x1="3" y1="18" x2="3.01" y2="18"></line>
                    </svg>
                </button>
                <button id="btn-quote" title="Quote">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path>
                        <path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path>
                    </svg>
                </button>
            </div>
            <div class="toolbar-separator"></div>
-            <div class="toolbar-group">
+            <button id="btn-preview-toggle" title="Toggle Preview">
-                <!-- Insert: Link, Code, Code Block, Table, HR -->
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <button id="btn-link" title="Link">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="3"></circle>
-                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                </svg>
-                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+            </button>
                    </svg>
                </button>
                <button id="btn-code" title="Inline Code (Ctrl+`)">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="16 18 22 12 16 6"></polyline>
                        <polyline points="8 6 2 12 8 18"></polyline>
                    </svg>
                </button>
                <button id="btn-code-block" title="Code Block">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="2" y="6" width="20" height="12" rx="2"></rect>
                        <path d="m10 10-2 2 2 2"></path>
                        <path d="m14 10 2 2-2 2"></path>
                    </svg>
                </button>
                <button id="btn-table" title="Insert Table">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="3" y1="9" x2="21" y2="9"></line>
                        <line x1="3" y1="15" x2="21" y2="15"></line>
                        <line x1="9" y1="3" x2="9" y2="21"></line>
                        <line x1="15" y1="3" x2="15" y2="21"></line>
                    </svg>
                </button>
                <button id="btn-horizontal-rule" title="Horizontal Rule">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="3" y1="12" x2="21" y2="12"></line>
                        <line x1="3" y1="6" x2="21" y2="6"></line>
                        <line x1="3" y1="18" x2="21" y2="18"></line>
                    </svg>
                </button>
            </div>
            <div class="toolbar-separator"></div>
            <div class="toolbar-group">
                <!-- View: Find, Line Numbers, Preview -->
                <button id="btn-find" title="Find & Replace (Ctrl+F)">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.35-4.35"></path>
                    </svg>
                </button>
                <button id="btn-line-numbers" title="Toggle Line Numbers">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 6h18"></path>
                        <path d="M3 12h18"></path>
                        <path d="M3 18h18"></path>
                    </svg>
                </button>
                <button id="btn-preview-toggle" title="Toggle Preview (Ctrl+Shift+P)">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                </button>
            </div>
        </div>
-
+        
        <div class="breadcrumb-bar" id="breadcrumb-bar">
            <span class="breadcrumb-path" id="breadcrumb-path">Untitled</span>
        </div>
        <!-- Find & Replace Dialog -->
        <div id="find-dialog" class="find-dialog hidden">
            <div class="find-controls">
@@ -330,86 +304,16 @@
            </div>
        </div>
        <!-- Print Preview Dialog -->
        <div class="export-dialog hidden" id="print-preview-overlay">
            <div class="export-dialog-content print-preview-dialog">
                <div class="export-dialog-header">
                    <h3>Print Preview</h3>
                    <button id="print-preview-close" title="Close" style="background:none;border:none;color:white;font-size:24px;cursor:pointer;">&times;</button>
                </div>
                <div class="print-preview-body">
                    <div class="print-preview-sidebar">
                        <div class="print-option-group">
                            <label>Paper Size</label>
                            <select id="print-paper-size">
                                <option value="A3">A3</option>
                                <option value="A4" selected>A4</option>
                                <option value="A5">A5</option>
                                <option value="Letter">Letter</option>
                                <option value="Legal">Legal</option>
                                <option value="Tabloid">Tabloid</option>
                            </select>
                        </div>
                        <div class="print-option-group">
                            <label>Orientation</label>
                            <select id="print-orientation">
                                <option value="portrait" selected>Portrait</option>
                                <option value="landscape">Landscape</option>
                            </select>
                        </div>
                        <div class="print-option-group">
                            <label>Margins</label>
                            <select id="print-margins">
                                <option value="default" selected>Default</option>
                                <option value="narrow">Narrow</option>
                                <option value="wide">Wide</option>
                                <option value="none">None</option>
                            </select>
                        </div>
                        <div class="print-option-group">
                            <label>Scale</label>
                            <div class="scale-control">
                                <input type="range" id="print-scale" min="50" max="200" value="100">
                                <span id="print-scale-value">100%</span>
                            </div>
                        </div>
                        <div class="print-option-group">
                            <label class="checkbox-label">
                                <input type="checkbox" id="print-headers" checked>
                                Headers &amp; Footers
                            </label>
                        </div>
                        <div class="print-option-group">
                            <label class="checkbox-label">
                                <input type="checkbox" id="print-background" checked>
                                Background Colors
                            </label>
                        </div>
                        <div class="print-option-group">
                            <label>Pages</label>
                            <select id="print-pages">
                                <option value="all" selected>All</option>
                                <option value="custom">Custom Range</option>
                            </select>
                            <input type="text" id="print-page-range" placeholder="e.g., 1-3, 5" class="hidden print-range-input">
                        </div>
                        <div class="print-actions">
                            <button class="btn-primary" id="print-execute">Print</button>
                            <button class="btn-secondary" id="print-cancel">Cancel</button>
                        </div>
                    </div>
                    <div class="print-preview-content">
                        <iframe id="print-preview-frame" style="width:100%;height:100%;border:none;background:white;"></iframe>
                    </div>
                </div>
            </div>
        </div>
        <!-- Command Palette -->
-        <div class="command-palette-overlay hidden" id="command-palette-overlay">
+        <div id="command-palette" class="command-palette hidden">
-            <div class="command-palette">
+            <div class="command-palette-content">
-                <input type="text" class="command-palette-input" id="command-palette-input" placeholder="Type a command..." autocomplete="off">
+                <input type="text" id="command-search" placeholder="Type a command..." autofocus>
-                <div class="command-palette-results" id="command-palette-results"></div>
+                <div id="command-list" class="command-list"></div>
                <div class="command-palette-footer">
                    <span>↑↓ Navigate</span>
                    <span>Enter Execute</span>
                    <span>Esc Close</span>
                </div>
            </div>
        </div>
@@ -523,40 +427,14 @@
                    <!-- Templates Mode -->
                    <div id="ascii-templates-mode" class="ascii-mode-section hidden">
                        <div class="export-section">
-                            <label>Arrows & Flow:</label>
+                            <label>Select Template:</label>
-                            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px;">
+                            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
                                <button class="btn-secondary ascii-template-btn" data-template="arrow-right">Arrow →</button>
                                <button class="btn-secondary ascii-template-btn" data-template="arrow-down">Arrow ↓</button>
-                                <button class="btn-secondary ascii-template-btn" data-template="decision">Decision</button>
+                                <button class="btn-secondary ascii-template-btn" data-template="check">Checkmark ✓</button>
                                <button class="btn-secondary ascii-template-btn" data-template="process-flow">Process Flow</button>
                            </div>
                            <label>Diagrams & Charts:</label>
                            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px;">
                                <button class="btn-secondary ascii-template-btn" data-template="flowchart">Flowchart</button>
                                <button class="btn-secondary ascii-template-btn" data-template="sequence">Sequence</button>
                                <button class="btn-secondary ascii-template-btn" data-template="network">Network</button>
                                <button class="btn-secondary ascii-template-btn" data-template="hierarchy">Hierarchy</button>
                                <button class="btn-secondary ascii-template-btn" data-template="timeline">Timeline</button>
                                <button class="btn-secondary ascii-template-btn" data-template="table-simple">Table</button>
                            </div>
                            <label>Boxes & Containers:</label>
                            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px;">
                                <button class="btn-secondary ascii-template-btn" data-template="header">Header</button>
                                <button class="btn-secondary ascii-template-btn" data-template="note-box">Note Box</button>
                                <button class="btn-secondary ascii-template-btn" data-template="warning-box">Warning</button>
                                <button class="btn-secondary ascii-template-btn" data-template="info-box">Info Box</button>
                            </div>
                            <label>Decorative Elements:</label>
                            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px;">
                                <button class="btn-secondary ascii-template-btn" data-template="divider">Divider</button>
-                                <button class="btn-secondary ascii-template-btn" data-template="separator-fancy">Separator</button>
+                                <button class="btn-secondary ascii-template-btn" data-template="header">Header</button>
-                                <button class="btn-secondary ascii-template-btn" data-template="brackets">Brackets</button>
+                                <button class="btn-secondary ascii-template-btn" data-template="flowchart">Flowchart</button>
                                <button class="btn-secondary ascii-template-btn" data-template="banner-stars">Banner</button>
                                <button class="btn-secondary ascii-template-btn" data-template="check">Checklist ✓</button>
                                <button class="btn-secondary ascii-template-btn" data-template="progress-bar">Progress Bar</button>
                            </div>
                        </div>
                    </div>
@@ -966,13 +844,10 @@
                            </div>
                        </div>
                        <div class="export-section">
-                            <label class="checkbox-inline"><input type="checkbox" id="compress-overwrite"> Overwrite original file</label>
+                            <label>Output File:</label>
                        </div>
                        <div class="export-section" id="compress-saveas-section">
                            <label>Save As:</label>
                            <div class="folder-input-group">
-                                <input type="text" id="compress-output-path" placeholder="Select save location..." readonly>
+                                <input type="text" id="compress-output-path" placeholder="Choose output location..." readonly>
-                                <button id="browse-compress-output">Save As</button>
+                                <button id="browse-compress-output">Browse</button>
                            </div>
                        </div>
                    </div>
@@ -1000,13 +875,10 @@
                            </select>
                        </div>
                        <div class="export-section">
-                            <label class="checkbox-inline"><input type="checkbox" id="rotate-overwrite"> Overwrite original file</label>
+                            <label>Output File:</label>
                        </div>
                        <div class="export-section" id="rotate-saveas-section">
                            <label>Save As:</label>
                            <div class="folder-input-group">
-                                <input type="text" id="rotate-output-path" placeholder="Select save location..." readonly>
+                                <input type="text" id="rotate-output-path" placeholder="Choose output location..." readonly>
-                                <button id="browse-rotate-output">Save As</button>
+                                <button id="browse-rotate-output">Browse</button>
                            </div>
                        </div>
                    </div>
@@ -1026,13 +898,10 @@
                            <small>Separate page numbers/ranges with commas</small>
                        </div>
                        <div class="export-section">
-                            <label class="checkbox-inline"><input type="checkbox" id="delete-overwrite"> Overwrite original file</label>
+                            <label>Output File:</label>
                        </div>
                        <div class="export-section" id="delete-saveas-section">
                            <label>Save As:</label>
                            <div class="folder-input-group">
-                                <input type="text" id="delete-output-path" placeholder="Select save location..." readonly>
+                                <input type="text" id="delete-output-path" placeholder="Choose output location..." readonly>
-                                <button id="browse-delete-output">Save As</button>
+                                <button id="browse-delete-output">Browse</button>
                            </div>
                        </div>
                    </div>
@@ -1058,13 +927,10 @@
                            </div>
                        </div>
                        <div class="export-section">
-                            <label class="checkbox-inline"><input type="checkbox" id="reorder-overwrite"> Overwrite original file</label>
+                            <label>Output File:</label>
                        </div>
                        <div class="export-section" id="reorder-saveas-section">
                            <label>Save As:</label>
                            <div class="folder-input-group">
-                                <input type="text" id="reorder-output-path" placeholder="Select save location..." readonly>
+                                <input type="text" id="reorder-output-path" placeholder="Choose output location..." readonly>
-                                <button id="browse-reorder-output">Save As</button>
+                                <button id="browse-reorder-output">Browse</button>
                            </div>
                        </div>
                    </div>
@@ -1117,13 +983,10 @@
                            <input type="text" id="watermark-custom-pages" placeholder="e.g., 1-5, 7, 9-12" class="hidden">
                        </div>
                        <div class="export-section">
-                            <label class="checkbox-inline"><input type="checkbox" id="watermark-overwrite"> Overwrite original file</label>
+                            <label>Output File:</label>
                        </div>
                        <div class="export-section" id="watermark-saveas-section">
                            <label>Save As:</label>
                            <div class="folder-input-group">
-                                <input type="text" id="watermark-output-path" placeholder="Select save location..." readonly>
+                                <input type="text" id="watermark-output-path" placeholder="Choose output location..." readonly>
-                                <button id="browse-watermark-output">Save As</button>
+                                <button id="browse-watermark-output">Browse</button>
                            </div>
                        </div>
                    </div>
@@ -1169,13 +1032,10 @@
                            <small>These permissions apply when owner password is set</small>
                        </div>
                        <div class="export-section">
-                            <label class="checkbox-inline"><input type="checkbox" id="encrypt-overwrite"> Overwrite original file</label>
+                            <label>Output File:</label>
                        </div>
                        <div class="export-section" id="encrypt-saveas-section">
                            <label>Save As:</label>
                            <div class="folder-input-group">
-                                <input type="text" id="encrypt-output-path" placeholder="Select save location..." readonly>
+                                <input type="text" id="encrypt-output-path" placeholder="Choose output location..." readonly>
-                                <button id="browse-encrypt-output">Save As</button>
+                                <button id="browse-encrypt-output">Browse</button>
                            </div>
                        </div>
                    </div>
@@ -1195,13 +1055,10 @@
                            <small>Enter the password to unlock and remove protection</small>
                        </div>
                        <div class="export-section">
-                            <label class="checkbox-inline"><input type="checkbox" id="decrypt-overwrite"> Overwrite original file</label>
+                            <label>Output File:</label>
                        </div>
                        <div class="export-section" id="decrypt-saveas-section">
                            <label>Save As:</label>
                            <div class="folder-input-group">
-                                <input type="text" id="decrypt-output-path" placeholder="Select save location..." readonly>
+                                <input type="text" id="decrypt-output-path" placeholder="Choose output location..." readonly>
-                                <button id="browse-decrypt-output">Save As</button>
+                                <button id="browse-decrypt-output">Browse</button>
                            </div>
                        </div>
                    </div>
@@ -1238,13 +1095,10 @@
                            </div>
                        </div>
                        <div class="export-section">
-                            <label class="checkbox-inline"><input type="checkbox" id="permissions-overwrite"> Overwrite original file</label>
+                            <label>Output File:</label>
                        </div>
                        <div class="export-section" id="permissions-saveas-section">
                            <label>Save As:</label>
                            <div class="folder-input-group">
-                                <input type="text" id="permissions-output-path" placeholder="Select save location..." readonly>
+                                <input type="text" id="permissions-output-path" placeholder="Choose output location..." readonly>
-                                <button id="browse-permissions-output">Save As</button>
+                                <button id="browse-permissions-output">Browse</button>
                            </div>
                        </div>
                    </div>
@@ -1381,186 +1235,27 @@
            </div>
        </div>
-        <div class="main-content" id="main-content">
+        <div class="editor-container">
            <!-- Sidebar -->
            <div class="sidebar collapsed" id="sidebar">
                <div class="sidebar-icons">
                    <button class="sidebar-icon" data-panel="explorer" title="File Explorer (Ctrl+Shift+E)">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
                        </svg>
                    </button>
                    <button class="sidebar-icon" data-panel="git" title="Git (Ctrl+Shift+G)">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="6" y1="3" x2="6" y2="15"/>
                            <circle cx="18" cy="6" r="3"/>
                            <circle cx="6" cy="6" r="3"/>
                            <path d="M18 9a9 9 0 01-9 9"/>
                        </svg>
                    </button>
                    <button class="sidebar-icon" data-panel="snippets" title="Snippets (Ctrl+Shift+S)">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="16 18 22 12 16 6"/>
                            <polyline points="8 6 2 12 8 18"/>
                        </svg>
                    </button>
                    <button class="sidebar-icon" data-panel="templates" title="Templates">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                            <line x1="3" y1="9" x2="21" y2="9"/>
                            <line x1="9" y1="21" x2="9" y2="9"/>
                        </svg>
                    </button>
                </div>
                <div class="sidebar-panel" id="sidebar-panel">
                    <div class="sidebar-panel-header">
                        <span class="sidebar-panel-title"></span>
                        <button class="sidebar-panel-close" title="Close panel">&times;</button>
                    </div>
                    <div class="sidebar-panel-content" id="sidebar-panel-content"></div>
                </div>
            </div>
            <!-- Editor Container -->
            <div class="editor-container">
            <div class="tab-content active" id="tab-content-1" data-tab-id="1">
                <div id="editor-pane-1" class="pane">
                    <div class="editor-wrapper">
-                        <div id="editor-cm-1" class="codemirror-container"></div>
+                        <div id="line-numbers-1" class="line-numbers hidden"></div>
                        <textarea id="editor-1" class="editor-textarea"></textarea>
                    </div>
                </div>
                <div class="pane-resizer" id="pane-resizer-1" title="Drag to resize"></div>
                <div id="preview-pane-1" class="pane">
                    <div class="preview-header">
                        <button class="preview-popout-btn" id="preview-popout-1" title="Pop out preview in new window">⬜</button>
                    </div>
                    <div id="preview-1" class="preview-content"></div>
                </div>
            </div>
            <!-- PDF Viewer Container (hidden by default) -->
            <div id="pdf-viewer-container" class="pdf-viewer-container hidden">
                <div class="pdf-viewer-toolbar pdf-toolbar-main">
                    <!-- Navigation -->
                    <button id="pdf-prev-page" title="Previous Page">◀</button>
                    <span id="pdf-page-info">Page <input type="number" id="pdf-page-input" min="1" value="1"> of <span id="pdf-total-pages">0</span></span>
                    <button id="pdf-next-page" title="Next Page">▶</button>
                    <div class="pdf-toolbar-separator"></div>
                    <!-- Zoom -->
                    <button id="pdf-zoom-out" title="Zoom Out">−</button>
                    <span id="pdf-zoom-level">100%</span>
                    <button id="pdf-zoom-in" title="Zoom In">+</button>
                    <button id="pdf-fit-width" title="Fit Width">↔</button>
                    <button id="pdf-fit-page" title="Fit Page">⬜</button>
                    <div class="pdf-toolbar-separator"></div>
                    <!-- Rotation -->
                    <button id="pdf-rotate-left" title="Rotate Left">↺</button>
                    <button id="pdf-rotate-right" title="Rotate Right">↻</button>
                    <div class="pdf-toolbar-separator"></div>
                    <!-- PDF Editor Functions -->
                    <button id="pdf-tb-merge" class="pdf-editor-btn" title="Merge PDFs">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="3" width="7" height="9" rx="1"></rect>
                            <rect x="14" y="3" width="7" height="9" rx="1"></rect>
                            <path d="M12 15v6m-3-3h6"></path>
                        </svg>
                        <span>Merge</span>
                    </button>
                    <button id="pdf-tb-split" class="pdf-editor-btn" title="Split PDF">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="3" width="18" height="9" rx="1"></rect>
                            <path d="M12 12v9M9 18l3 3 3-3"></path>
                        </svg>
                        <span>Split</span>
                    </button>
                    <button id="pdf-tb-compress" class="pdf-editor-btn" title="Compress PDF">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M4 14h16M4 10h16M7 6l5 4 5-4M7 18l5-4 5 4"></path>
                        </svg>
                        <span>Compress</span>
                    </button>
                    <button id="pdf-tb-rotate" class="pdf-editor-btn" title="Rotate Pages">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 12a9 9 0 11-6.219-8.56"></path>
                            <polyline points="21 3 21 9 15 9"></polyline>
                        </svg>
                        <span>Rotate</span>
                    </button>
                    <button id="pdf-tb-delete" class="pdf-editor-btn" title="Delete Pages">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z"></path>
                        </svg>
                        <span>Delete</span>
                    </button>
                    <button id="pdf-tb-reorder" class="pdf-editor-btn" title="Reorder Pages">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="3" y1="6" x2="21" y2="6"></line>
                            <line x1="3" y1="12" x2="21" y2="12"></line>
                            <line x1="3" y1="18" x2="21" y2="18"></line>
                            <polyline points="7 9 4 12 7 15"></polyline>
                            <polyline points="17 9 20 12 17 15"></polyline>
                        </svg>
                        <span>Reorder</span>
                    </button>
                    <button id="pdf-tb-watermark" class="pdf-editor-btn" title="Add Watermark">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                            <path d="M2 17l10 5 10-5M2 12l10 5 10-5"></path>
                        </svg>
                        <span>Watermark</span>
                    </button>
                    <button id="pdf-tb-encrypt" class="pdf-editor-btn" title="Encrypt PDF">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                            <path d="M7 11V7a5 5 0 0110 0v4"></path>
                        </svg>
                        <span>Encrypt</span>
                    </button>
                    <button id="pdf-tb-decrypt" class="pdf-editor-btn" title="Decrypt PDF">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                            <path d="M7 11V7a5 5 0 019.9-1"></path>
                        </svg>
                        <span>Decrypt</span>
                    </button>
                    <div class="pdf-toolbar-separator"></div>
                    <!-- File Info and Close -->
                    <span id="pdf-filename" class="pdf-filename"></span>
                    <button id="pdf-close" title="Close PDF">✕</button>
                </div>
                <div id="pdf-viewer" class="pdf-viewer">
                    <canvas id="pdf-canvas"></canvas>
                </div>
            </div>
            </div>
        </div>
-
+        
-        <!-- Bottom Panel (REPL Output) -->
+        <div class="status-bar">
-        <div class="bottom-panel collapsed" id="bottom-panel">
+            <span id="status-text">Ready</span>
-            <div class="bottom-panel-header">
+            <span id="word-count">Words: 0 | Characters: 0</span>
                <span class="bottom-panel-title">Output</span>
                <div class="bottom-panel-actions">
                    <button class="bottom-panel-btn" id="repl-clear" title="Clear output">Clear</button>
                    <button class="bottom-panel-btn" id="bottom-panel-toggle" title="Toggle panel">&#x25BC;</button>
                </div>
            </div>
            <div class="bottom-panel-content" id="repl-output"></div>
        </div>
        <div class="status-bar" id="status-bar">
            <div class="status-bar-left">
                <span class="status-item" id="status-text">Ready</span>
                <span class="status-separator">|</span>
                <span class="status-item" id="status-file-path" title=""></span>
            </div>
            <div class="status-bar-right">
                <span class="status-item" id="word-count">Words: 0</span>
                <span class="status-separator">|</span>
                <span class="status-item" id="char-count">Chars: 0</span>
                <span class="status-separator">|</span>
                <span class="status-item" id="line-col">Ln 1, Col 1</span>
                <span class="status-separator">|</span>
                <span class="status-item" id="encoding">UTF-8</span>
                <span class="status-separator">|</span>
                <span class="status-item" id="language-mode">Markdown</span>
            </div>
        </div>
    </div>
@@ -1,422 +0,0 @@
 /**
 * Preload Script for PanConverter
 *
 * This script creates a secure bridge between the main process and renderer process.
 * It exposes only specific IPC channels, preventing direct Node.js access in the renderer.
 *
 * Security Benefits:
 * - No direct access to Node.js APIs (fs, path, child_process, etc.)
 * - All IPC channels are explicitly whitelisted
 * - Prevents XSS from escalating to full system access
 *
 * @version 4.0.0
 */
 const { contextBridge, ipcRenderer } = require('electron');
 // Define allowed IPC channels for security
 const ALLOWED_SEND_CHANNELS = [
  // File operations
  'save-file',
  'save-current-file',
  'set-current-file',
  'save-recent-files',
  'clear-recent-files',
  'renderer-ready',
  // Theme
  'get-theme',
  // Print
  'do-print',
  'do-print-with-options',
  // Export
  'export-with-options',
  'export-spreadsheet',
  // Batch conversion
  'batch-convert',
  'select-folder',
  // Universal converter
  'universal-convert',
  'universal-convert-batch',
  // Image converter
  'image-convert',
  'image-batch-convert',
  'image-resize',
  'image-compress',
  'image-rotate',
  // Audio converter
  'audio-convert',
  'audio-batch-convert',
  'audio-extract',
  'audio-trim',
  'audio-merge',
  // Video converter
  'video-convert',
  'video-batch-convert',
  'video-compress',
  'video-trim',
  'video-frames',
  'video-gif',
  // Header/Footer
  'get-header-footer-settings',
  'save-header-footer-settings',
  'browse-header-footer-logo',
  'save-header-footer-logo',
  'clear-header-footer-logo',
  // Page settings
  'get-page-settings',
  'update-page-settings',
  // Template settings
  'set-custom-start-page',
  // PDF operations
  'process-pdf-operation',
  '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',
  // Image paste/drop
  'save-pasted-image',
  // Templates
  'load-template',
  // File Explorer
  'list-directory',
  // Git
  'git-status',
  'git-stage',
  'git-commit',
  'git-log',
  // Snippets
  'get-snippets',
  'save-snippet',
  'delete-snippet',
  // Code execution (REPL)
  'execute-code',
  // File open by path
  'open-file-path',
  // PDF editor from toolbar
  'show-pdf-editor-from-toolbar',
  // Menu triggers
  'menu-open',
  'export',
  // Git diff
  'git-diff'
 ];
 const ALLOWED_RECEIVE_CHANNELS = [
  // File operations
  'file-new',
  'file-opened',
  'file-save',
  'get-content-for-save',
  'get-content-for-spreadsheet',
  'recent-files-cleared',
  // UI toggles
  'toggle-preview',
  'toggle-find',
  // Theme
  'theme-changed',
  'theme-data',
  // Edit operations
  'undo',
  'redo',
  // 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
  'show-image-converter',
  'show-audio-converter',
  'show-video-converter',
  // PDF viewer
  'open-pdf-viewer',
  // Conversion status
  'conversion-status',
  'conversion-complete',
  'batch-progress',
  'image-conversion-complete',
  'audio-conversion-complete',
  'video-conversion-complete',
  // Folder selection
  'folder-selected',
  'pdf-folder-selected',
  // Header/Footer
  'header-footer-settings-data',
  'header-footer-logo-selected',
  'header-footer-logo-saved',
  // Page settings
  'page-settings-data',
  // PDF operations
  'pdf-page-count',
  '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',
  'header-footer-logo-cleared',
  // PDF operation progress
  'pdf-operation-progress',
  // Insert content from generator windows
  'insert-content',
  // Batch converter
  'show-batch-converter',
  // v4 menu-triggered events
  'load-template-menu',
  'toggle-command-palette',
  'toggle-sidebar-panel',
  'toggle-bottom-panel'
 ];
 /**
 * Secure API exposed to renderer process
 * Access via window.electronAPI in renderer
 */
 contextBridge.exposeInMainWorld('electronAPI', {
  // ============================================
  // SEND METHODS (Renderer -> Main)
  // ============================================
  /**
   * Send a message to the main process
   * @param {string} channel - IPC channel name
   * @param {any} data - Data to send
   */
  send: (channel, data) => {
    if (ALLOWED_SEND_CHANNELS.includes(channel)) {
      ipcRenderer.send(channel, data);
    } else {
      console.warn(`[Preload] Blocked send to unauthorized channel: ${channel}`);
    }
  },
  /**
   * Invoke a main process handler and get a response
   * @param {string} channel - IPC channel name
   * @param {any} data - Data to send
   * @returns {Promise<any>} Response from main process
   */
  invoke: async (channel, data) => {
    if (ALLOWED_SEND_CHANNELS.includes(channel)) {
      return await ipcRenderer.invoke(channel, data);
    } else {
      console.warn(`[Preload] Blocked invoke to unauthorized channel: ${channel}`);
      return null;
    }
  },
  // ============================================
  // RECEIVE METHODS (Main -> Renderer)
  // ============================================
  /**
   * Register a listener for messages from main process
   * @param {string} channel - IPC channel name
   * @param {Function} callback - Function to call with received data
   * @returns {Function} Cleanup function to remove listener
   */
  on: (channel, callback) => {
    if (ALLOWED_RECEIVE_CHANNELS.includes(channel)) {
      const subscription = (event, ...args) => callback(...args);
      ipcRenderer.on(channel, subscription);
      // Return cleanup function
      return () => {
        ipcRenderer.removeListener(channel, subscription);
      };
    } else {
      console.warn(`[Preload] Blocked listener for unauthorized channel: ${channel}`);
      return () => {}; // No-op cleanup
    }
  },
  /**
   * Register a one-time listener for messages from main process
   * @param {string} channel - IPC channel name
   * @param {Function} callback - Function to call with received data
   */
  once: (channel, callback) => {
    if (ALLOWED_RECEIVE_CHANNELS.includes(channel)) {
      ipcRenderer.once(channel, (event, ...args) => callback(...args));
    } else {
      console.warn(`[Preload] Blocked once listener for unauthorized channel: ${channel}`);
    }
  },
  /**
   * Remove all listeners for a channel
   * @param {string} channel - IPC channel name
   */
  removeAllListeners: (channel) => {
    if (ALLOWED_RECEIVE_CHANNELS.includes(channel)) {
      ipcRenderer.removeAllListeners(channel);
    }
  },
  // ============================================
  // CONVENIENCE METHODS
  // ============================================
  // File Operations
  file: {
    save: (filePath, content) => ipcRenderer.send('save-file', { path: filePath, content }),
    saveCurrent: (content) => ipcRenderer.send('save-current-file', content),
    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')
  },
  // Theme Operations
  theme: {
    get: () => ipcRenderer.send('get-theme')
  },
  // Print Operations
  print: {
    doPrint: (options) => ipcRenderer.send('do-print', options)
  },
  // Export Operations
  export: {
    withOptions: (format, options) => ipcRenderer.send('export-with-options', { format, options }),
    spreadsheet: (content, format) => ipcRenderer.send('export-spreadsheet', { content, format })
  },
  // Batch Conversion
  batch: {
    convert: (inputFolder, outputFolder, format, options) => {
      ipcRenderer.send('batch-convert', { inputFolder, outputFolder, format, options });
    },
    selectFolder: (type) => ipcRenderer.send('select-folder', type)
  },
  // Universal Converter
  converter: {
    convert: (tool, fromFormat, toFormat, filePath) => {
      ipcRenderer.send('universal-convert', { tool, fromFormat, toFormat, filePath });
    },
    convertBatch: (tool, fromFormat, toFormat, inputFolder, outputFolder) => {
      ipcRenderer.send('universal-convert-batch', { tool, fromFormat, toFormat, inputFolder, outputFolder });
    }
  },
  // Header/Footer Operations
  headerFooter: {
    getSettings: () => ipcRenderer.send('get-header-footer-settings'),
    saveSettings: (settings) => ipcRenderer.send('save-header-footer-settings', settings),
    browseLogo: (position) => ipcRenderer.send('browse-header-footer-logo', position),
    saveLogo: (position, filePath) => ipcRenderer.send('save-header-footer-logo', { position, filePath }),
    clearLogo: (position) => ipcRenderer.send('clear-header-footer-logo', position)
  },
  // Page Settings
  page: {
    getSettings: () => ipcRenderer.send('get-page-settings'),
    updateSettings: (settings) => ipcRenderer.send('update-page-settings', settings),
    setCustomStartPage: (pageNumber) => ipcRenderer.send('set-custom-start-page', pageNumber)
  },
  // PDF Operations
  pdf: {
    processOperation: (data) => ipcRenderer.send('process-pdf-operation', data),
    getPageCount: (filePath) => ipcRenderer.send('get-pdf-page-count', filePath),
    selectFolder: (inputId) => ipcRenderer.send('select-pdf-folder', inputId)
  },
  // Image Converter Operations
  image: {
    convert: (data) => ipcRenderer.send('image-convert', data),
    batchConvert: (data) => ipcRenderer.send('image-batch-convert', data),
    resize: (data) => ipcRenderer.send('image-resize', data),
    compress: (data) => ipcRenderer.send('image-compress', data),
    rotate: (data) => ipcRenderer.send('image-rotate', data)
  },
  // Audio Converter Operations
  audio: {
    convert: (data) => ipcRenderer.send('audio-convert', data),
    batchConvert: (data) => ipcRenderer.send('audio-batch-convert', data),
    extract: (data) => ipcRenderer.send('audio-extract', data),
    trim: (data) => ipcRenderer.send('audio-trim', data),
    merge: (data) => ipcRenderer.send('audio-merge', data)
  },
  // Video Converter Operations
  video: {
    convert: (data) => ipcRenderer.send('video-convert', data),
    batchConvert: (data) => ipcRenderer.send('video-batch-convert', data),
    compress: (data) => ipcRenderer.send('video-compress', data),
    trim: (data) => ipcRenderer.send('video-trim', data),
    extractFrames: (data) => ipcRenderer.send('video-frames', data),
    toGif: (data) => ipcRenderer.send('video-gif', data)
  },
  // Generator Windows
  generators: {
    openAscii: () => ipcRenderer.send('open-ascii-generator'),
    openTable: () => ipcRenderer.send('open-table-generator')
  }
 });
 // Log successful preload initialization
 console.log('[Preload] Secure IPC bridge initialized');
 console.log('[Preload] Allowed send channels:', ALLOWED_SEND_CHANNELS.length);
 console.log('[Preload] Allowed receive channels:', ALLOWED_RECEIVE_CHANNELS.length);
@@ -1,139 +0,0 @@
 class PrintPreview {
    constructor() {
        this.overlay = document.getElementById('print-preview-overlay');
        this._lastContent = '';
        this.setupEventListeners();
    }
    open(htmlContent) {
        this._lastContent = htmlContent;
        this.overlay.classList.remove('hidden');
        this.updatePreview(htmlContent);
        this.updateScaleLabel();
    }
    close() {
        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');
            }
        });
        // Close on overlay click
        this.overlay?.addEventListener('click', (e) => {
            if (e.target === this.overlay) this.close();
        });
        // Close on Escape
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && !this.overlay.classList.contains('hidden')) {
                this.close();
            }
        });
    }
    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 };
@@ -1,49 +0,0 @@
 class ReplPanel {
    constructor() {
        this.panel = document.getElementById('bottom-panel');
        this.output = document.getElementById('repl-output');
        this.setupEventListeners();
    }
    setupEventListeners() {
        document.getElementById('bottom-panel-toggle')?.addEventListener('click', () => this.toggle());
        document.getElementById('repl-clear')?.addEventListener('click', () => this.clear());
    }
    toggle() {
        this.panel.classList.toggle('collapsed');
        const btn = document.getElementById('bottom-panel-toggle');
        if (btn) btn.textContent = this.panel.classList.contains('collapsed') ? '\u25BC' : '\u25B2';
    }
    show() {
        this.panel.classList.remove('collapsed');
        const btn = document.getElementById('bottom-panel-toggle');
        if (btn) btn.textContent = '\u25B2';
    }
    clear() {
        if (this.output) this.output.innerHTML = '';
    }
    appendOutput(command, result) {
        const entry = document.createElement('div');
        entry.className = 'repl-entry';
        entry.innerHTML = `
            <div class="repl-command">\u25B6 ${command}</div>
            ${result.stdout ? `<div class="repl-stdout">${this.escapeHtml(result.stdout)}</div>` : ''}
            ${result.stderr ? `<div class="repl-stderr">${this.escapeHtml(result.stderr)}</div>` : ''}
            ${result.error ? `<div class="repl-error">Error: ${this.escapeHtml(result.error)}</div>` : ''}
        `;
        this.output?.appendChild(entry);
        this.output?.scrollTo(0, this.output.scrollHeight);
    }
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
 }
 module.exports = { ReplPanel };
@@ -1,70 +0,0 @@
 const path = require('path');
 function renderExplorerPanel(container, { listDirectory, onFileOpen, currentDir }) {
    container.innerHTML = `
        <div class="explorer-panel">
            <div class="explorer-toolbar">
                <input type="text" class="explorer-path" id="explorer-path" value="${currentDir || ''}" placeholder="Open a folder..." readonly>
                <button class="explorer-browse-btn" id="explorer-browse" title="Browse folder">&#x1F4C2;</button>
            </div>
            <div class="explorer-tree" id="explorer-tree"></div>
        </div>
    `;
    document.getElementById('explorer-browse')?.addEventListener('click', async () => {
        const dir = await listDirectory(null); // null means open folder dialog
        if (dir) {
            document.getElementById('explorer-path').value = dir.path;
            renderTree(document.getElementById('explorer-tree'), dir.entries, listDirectory, onFileOpen, dir.path);
        }
    });
    if (currentDir) {
        listDirectory(currentDir).then(dir => {
            if (dir) renderTree(document.getElementById('explorer-tree'), dir.entries, listDirectory, onFileOpen, currentDir);
        });
    }
 }
 function renderTree(container, entries, listDirectory, onFileOpen, basePath) {
    container.innerHTML = entries.map(entry => {
        if (entry.isDirectory) {
            return `<div class="tree-item tree-folder collapsed" data-path="${entry.path}">
                <span class="tree-icon">&#x25B6;</span>
                <span class="tree-name">${entry.name}</span>
                <div class="tree-children"></div>
            </div>`;
        }
        return `<div class="tree-item tree-file" data-path="${entry.path}">
            <span class="tree-icon">${getFileIcon(entry.name)}</span>
            <span class="tree-name">${entry.name}</span>
        </div>`;
    }).join('');
    container.querySelectorAll('.tree-folder').forEach(el => {
        el.querySelector('.tree-name').addEventListener('click', async () => {
            const isCollapsed = el.classList.contains('collapsed');
            if (isCollapsed) {
                const dir = await listDirectory(el.dataset.path);
                if (dir) {
                    const childContainer = el.querySelector('.tree-children');
                    renderTree(childContainer, dir.entries, listDirectory, onFileOpen, el.dataset.path);
                }
            }
            el.classList.toggle('collapsed');
            el.querySelector('.tree-icon').textContent = el.classList.contains('collapsed') ? '\u25B6' : '\u25BC';
        });
    });
    container.querySelectorAll('.tree-file').forEach(el => {
        el.addEventListener('click', () => onFileOpen(el.dataset.path));
    });
 }
 function getFileIcon(filename) {
    const ext = filename.split('.').pop().toLowerCase();
    const icons = { md: '\u{1F4DD}', js: '\u{1F4DC}', json: '{}', html: '\u{1F310}', css: '\u{1F3A8}', py: '\u{1F40D}', pdf: '\u{1F4D5}', txt: '\u{1F4C4}' };
    return icons[ext] || '\u{1F4C4}';
 }
 module.exports = { renderExplorerPanel };
@@ -1,84 +0,0 @@
 function renderGitPanel(container, { gitStatus, gitDiff, gitStage, gitCommit, gitLog }) {
    container.innerHTML = `
        <div class="git-panel">
            <div class="git-section">
                <h4 class="git-section-title">Changes</h4>
                <div class="git-changes" id="git-changes">
                    <p class="git-loading">Loading...</p>
                </div>
            </div>
            <div class="git-section">
                <h4 class="git-section-title">Commit</h4>
                <textarea class="git-commit-input" id="git-commit-msg" placeholder="Commit message..." rows="3"></textarea>
                <button class="git-commit-btn" id="git-commit-btn">Commit</button>
            </div>
            <div class="git-section">
                <h4 class="git-section-title">Recent Commits</h4>
                <div class="git-log" id="git-log"></div>
            </div>
        </div>
    `;
    loadGitStatus();
    async function loadGitStatus() {
        const status = await gitStatus();
        const changesEl = document.getElementById('git-changes');
        if (!status || !changesEl) return;
        if (status.error) {
            changesEl.innerHTML = `<p class="git-info">${status.error}</p>`;
            return;
        }
        const files = [
            ...status.modified.map(f => ({ file: f, status: 'M', color: '#f59e0b' })),
            ...status.not_added.map(f => ({ file: f, status: '?', color: '#6b7280' })),
            ...status.created.map(f => ({ file: f, status: 'A', color: '#10b981' })),
            ...status.deleted.map(f => ({ file: f, status: 'D', color: '#ef4444' })),
            ...status.staged.map(f => ({ file: f, status: 'S', color: '#3b82f6' })),
        ];
        if (files.length === 0) {
            changesEl.innerHTML = '<p class="git-info">No changes</p>';
        } else {
            changesEl.innerHTML = files.map(f => `
                <div class="git-file" data-file="${f.file}">
                    <span class="git-file-status" style="color:${f.color}">${f.status}</span>
                    <span class="git-file-name">${f.file}</span>
                    <button class="git-stage-btn" data-file="${f.file}" title="Stage file">+</button>
                </div>
            `).join('');
            changesEl.querySelectorAll('.git-stage-btn').forEach(btn => {
                btn.addEventListener('click', async (e) => {
                    e.stopPropagation();
                    await gitStage([btn.dataset.file]);
                    loadGitStatus();
                });
            });
        }
        // Load log
        const log = await gitLog();
        const logEl = document.getElementById('git-log');
        if (log && logEl) {
            logEl.innerHTML = (log.all || []).slice(0, 10).map(entry => `
                <div class="git-log-entry">
                    <div class="git-log-msg">${entry.message}</div>
                    <div class="git-log-meta">${entry.date?.substring(0, 10) || ''} &middot; ${entry.author_name || ''}</div>
                </div>
            `).join('') || '<p class="git-info">No commits</p>';
        }
    }
    document.getElementById('git-commit-btn')?.addEventListener('click', async () => {
        const msg = document.getElementById('git-commit-msg')?.value?.trim();
        if (!msg) return;
        await gitCommit(msg);
        document.getElementById('git-commit-msg').value = '';
        loadGitStatus();
    });
 }
 module.exports = { renderGitPanel };
@@ -1,50 +0,0 @@
 class SidebarManager {
    constructor() {
        this.sidebar = document.getElementById('sidebar');
        this.panelContent = document.getElementById('sidebar-panel-content');
        this.panelTitle = document.querySelector('.sidebar-panel-title');
        this.activePanel = null;
        this.panels = new Map();
        this.setupEventListeners();
    }
    setupEventListeners() {
        document.querySelectorAll('.sidebar-icon').forEach(btn => {
            btn.addEventListener('click', () => this.togglePanel(btn.dataset.panel));
        });
        document.querySelector('.sidebar-panel-close')?.addEventListener('click', () => this.collapse());
    }
    registerPanel(name, { title, render }) {
        this.panels.set(name, { title, render });
    }
    togglePanel(name) {
        if (this.activePanel === name) {
            this.collapse();
        } else {
            this.expand(name);
        }
    }
    expand(name) {
        const panel = this.panels.get(name);
        if (!panel) return;
        this.sidebar.classList.remove('collapsed');
        this.panelTitle.textContent = panel.title;
        this.panelContent.innerHTML = '';
        panel.render(this.panelContent);
        this.activePanel = name;
        document.querySelectorAll('.sidebar-icon').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.panel === name);
        });
    }
    collapse() {
        this.sidebar.classList.add('collapsed');
        this.activePanel = null;
        document.querySelectorAll('.sidebar-icon').forEach(btn => btn.classList.remove('active'));
    }
 }
 module.exports = { SidebarManager };
@@ -1,71 +0,0 @@
 function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippet, onInsert }) {
    container.innerHTML = `
        <div class="snippets-panel">
            <div class="snippets-toolbar">
                <input type="text" class="snippets-search" id="snippets-search" placeholder="Search snippets...">
                <button class="snippets-add-btn" id="snippets-add" title="Add snippet">+</button>
            </div>
            <div class="snippets-list" id="snippets-list"></div>
        </div>
    `;
    let snippets = [];
    async function loadSnippets() {
        snippets = await getSnippets() || [];
        renderList(document.getElementById('snippets-search')?.value || '');
    }
    function renderList(query) {
        const list = document.getElementById('snippets-list');
        if (!list) return;
        const filtered = query
            ? snippets.filter(s => s.name.toLowerCase().includes(query.toLowerCase()) || (s.language || '').toLowerCase().includes(query.toLowerCase()))
            : snippets;
        list.innerHTML = filtered.length ? filtered.map(s => `
            <div class="snippet-item" data-id="${s.id}">
                <div class="snippet-header">
                    <span class="snippet-name">${s.name}</span>
                    <span class="snippet-lang">${s.language || 'text'}</span>
                </div>
                <pre class="snippet-preview"><code>${(s.code || '').substring(0, 100)}${(s.code || '').length > 100 ? '...' : ''}</code></pre>
                <div class="snippet-actions">
                    <button class="snippet-insert" data-id="${s.id}" title="Insert">Insert</button>
                    <button class="snippet-delete" data-id="${s.id}" title="Delete">&times;</button>
                </div>
            </div>
        `).join('') : '<p class="git-info">No snippets yet. Click + to add one.</p>';
        list.querySelectorAll('.snippet-insert').forEach(btn => {
            btn.addEventListener('click', () => {
                const s = snippets.find(sn => sn.id === btn.dataset.id);
                if (s) onInsert(s.code);
            });
        });
        list.querySelectorAll('.snippet-delete').forEach(btn => {
            btn.addEventListener('click', async () => {
                await deleteSnippet(btn.dataset.id);
                loadSnippets();
            });
        });
    }
    document.getElementById('snippets-search')?.addEventListener('input', (e) => renderList(e.target.value));
    document.getElementById('snippets-add')?.addEventListener('click', () => {
        const name = prompt('Snippet name:');
        if (!name) return;
        const language = prompt('Language (e.g., javascript, python, html):') || 'text';
        const code = prompt('Paste your code snippet:');
        if (!code) return;
        saveSnippet({ id: Date.now().toString(), name, language, code }).then(() => loadSnippets());
    });
    loadSnippets();
 }
 module.exports = { renderSnippetsPanel };
@@ -1,34 +0,0 @@
 const fs = require('fs');
 const path = require('path');
 const templates = [
    { name: 'Blog Post', file: 'blog-post.md', description: 'Article with frontmatter' },
    { name: 'Meeting Notes', file: 'meeting-notes.md', description: 'Agenda, notes, action items' },
    { name: 'Technical Spec', file: 'technical-spec.md', description: 'Requirements and architecture' },
    { name: 'Changelog', file: 'changelog.md', description: 'Keep a Changelog format' },
    { name: 'README', file: 'readme.md', description: 'Project documentation' },
    { name: 'Project Plan', file: 'project-plan.md', description: 'Goals, milestones, timeline' },
    { name: 'API Docs', file: 'api-docs.md', description: 'API endpoint documentation' },
    { name: 'Tutorial', file: 'tutorial.md', description: 'Step-by-step guide' },
    { name: 'Release Notes', file: 'release-notes.md', description: 'Version release summary' },
    { name: 'Comparison', file: 'comparison.md', description: 'Feature comparison table' },
 ];
 function renderTemplatesPanel(container, onSelect) {
    container.innerHTML = `
        <div class="panel-list">
            ${templates.map(t => `
                <div class="panel-list-item template-item" data-file="${t.file}">
                    <div class="panel-list-item-title">${t.name}</div>
                    <div class="panel-list-item-desc">${t.description}</div>
                </div>
            `).join('')}
        </div>
    `;
    container.querySelectorAll('.template-item').forEach(el => {
        el.addEventListener('click', () => onSelect(el.dataset.file));
    });
 }
 module.exports = { renderTemplatesPanel, templates };
@@ -1,969 +0,0 @@
 /**
 * ConcreteInfo Theme for MarkdownConverter
 * Based on logo palette: #464646, #9a9696, #e5461f, #e3e3e3, #0d0b09
 * Version: 3.0.0
 */
 /* ============================================
   CSS Variables - ConcreteInfo Theme
   ============================================ */
 :root {
  /* Primary Colors from Logo Palette */
  --ci-dark-gray: #464646;
  --ci-medium-gray: #9a9696;
  --ci-accent: #e5461f;
  --ci-light-gray: #e3e3e3;
  --ci-black: #0d0b09;
  /* Extended Palette */
  --ci-accent-hover: #c93a18;
  --ci-accent-light: rgba(229, 70, 31, 0.1);
  --ci-white: #ffffff;
  --ci-bg: #f5f5f5;
  --ci-border: #d0d0d0;
  /* Semantic Colors */
  --ci-success: #28a745;
  --ci-warning: #ffc107;
  --ci-danger: #dc3545;
  --ci-info: #17a2b8;
  /* Typography */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
 }
 /* ============================================
   ConcreteInfo Theme Application
   ============================================ */
 body.theme-concreteinfo {
  background: var(--ci-bg);
  color: var(--ci-dark-gray);
 }
 body.theme-concreteinfo .toolbar {
  background: linear-gradient(135deg, var(--ci-dark-gray) 0%, var(--ci-black) 100%);
  border-bottom: 3px solid var(--ci-accent);
 }
 body.theme-concreteinfo .toolbar button {
  color: var(--ci-white);
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
 }
 body.theme-concreteinfo .toolbar button:hover {
  background: var(--ci-accent);
  border-color: var(--ci-accent);
  transform: translateY(-1px);
 }
 body.theme-concreteinfo .tab-bar {
  background: var(--ci-dark-gray);
  border-bottom: 2px solid var(--ci-accent);
 }
 body.theme-concreteinfo .tab {
  background: var(--ci-medium-gray);
  color: var(--ci-white);
  border: none;
  margin: 2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all var(--transition-fast);
 }
 body.theme-concreteinfo .tab:hover {
  background: var(--ci-accent-light);
 }
 body.theme-concreteinfo .tab.active {
  background: var(--ci-accent);
  color: var(--ci-white);
 }
 body.theme-concreteinfo .editor-textarea {
  background: var(--ci-white);
  color: var(--ci-black);
  border: 1px solid var(--ci-border);
  font-family: var(--font-mono);
 }
 body.theme-concreteinfo .preview-content {
  background: var(--ci-white);
  color: var(--ci-dark-gray);
  border-left: 3px solid var(--ci-accent);
 }
 body.theme-concreteinfo .status-bar {
  background: var(--ci-dark-gray);
  color: var(--ci-light-gray);
  border-top: 2px solid var(--ci-accent);
 }
 /* ============================================
   Modern Modal Styles
   ============================================ */
 .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 11, 9, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
 }
 .modal-overlay.active {
  opacity: 1;
  visibility: visible;
 }
 .modal-content {
  background: var(--ci-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform var(--transition-normal);
 }
 .modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
 }
 .modal-header {
  background: linear-gradient(135deg, var(--ci-dark-gray) 0%, var(--ci-black) 100%);
  color: var(--ci-white);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--ci-accent);
 }
 .modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--font-sans);
 }
 .modal-close {
  background: transparent;
  border: none;
  color: var(--ci-white);
  font-size: 1.5rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
 }
 .modal-close:hover {
  background: var(--ci-accent);
  transform: rotate(90deg);
 }
 .modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  max-height: 60vh;
 }
 .modal-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--ci-light-gray);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--ci-border);
 }
 /* ============================================
   Button Styles
   ============================================ */
 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
 }
 .btn-primary {
  background: var(--ci-accent);
  color: var(--ci-white);
 }
 .btn-primary:hover {
  background: var(--ci-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
 }
 .btn-secondary {
  background: var(--ci-medium-gray);
  color: var(--ci-white);
 }
 .btn-secondary:hover {
  background: var(--ci-dark-gray);
 }
 .btn-outline {
  background: transparent;
  border: 2px solid var(--ci-accent);
  color: var(--ci-accent);
 }
 .btn-outline:hover {
  background: var(--ci-accent);
  color: var(--ci-white);
 }
 .btn-ghost {
  background: transparent;
  color: var(--ci-dark-gray);
 }
 .btn-ghost:hover {
  background: var(--ci-light-gray);
 }
 /* ============================================
   Form Controls
   ============================================ */
 .form-group {
  margin-bottom: var(--spacing-md);
 }
 .form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--ci-dark-gray);
  font-size: 0.875rem;
 }
 .form-input,
 .form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  border: 2px solid var(--ci-border);
  border-radius: var(--radius-md);
  background: var(--ci-white);
  color: var(--ci-dark-gray);
  transition: all var(--transition-fast);
 }
 .form-input:focus,
 .form-select:focus {
  outline: none;
  border-color: var(--ci-accent);
  box-shadow: 0 0 0 3px var(--ci-accent-light);
 }
 .form-input::placeholder {
  color: var(--ci-medium-gray);
 }
 /* ============================================
   App Header with Logo
   ============================================ */
 .app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background: #ffffff;
  border-bottom: 2px solid #e1e4e8;
  min-height: 36px;
 }
 .app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
 }
 .app-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
 }
 .app-logo {
  height: 22px;
  width: auto;
 }
 .app-title {
  color: #24292e;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
 }
 .app-version {
  color: #6a737d;
  font-size: 0.7rem;
  font-family: 'SFMono-Regular', Consolas, monospace;
 }
 /* Dark theme header adjustments */
 body.theme-dark .app-header,
 body.theme-dracula .app-header,
 body.theme-onedark .app-header,
 body.theme-tokyonight .app-header,
 body.theme-monokai .app-header,
 body.theme-cobalt2 .app-header,
 body.theme-gruvbox-dark .app-header,
 body.theme-ayu-dark .app-header,
 body.theme-ayu-mirage .app-header,
 body.theme-palenight .app-header,
 body.theme-oceanic-next .app-header,
 body.theme-nord .app-header,
 body.theme-concrete-dark .app-header {
  background: #1f2937;
  border-bottom-color: #374151;
 }
 body.theme-dark .app-title,
 body.theme-dracula .app-title,
 body.theme-onedark .app-title,
 body.theme-tokyonight .app-title,
 body.theme-monokai .app-title,
 body.theme-cobalt2 .app-title,
 body.theme-gruvbox-dark .app-title,
 body.theme-ayu-dark .app-title,
 body.theme-ayu-mirage .app-title,
 body.theme-palenight .app-title,
 body.theme-oceanic-next .app-title,
 body.theme-nord .app-title,
 body.theme-concrete-dark .app-title {
  color: #f3f4f6;
 }
 body.theme-dark .app-version,
 body.theme-dracula .app-version,
 body.theme-onedark .app-version,
 body.theme-tokyonight .app-version,
 body.theme-monokai .app-version,
 body.theme-cobalt2 .app-version,
 body.theme-gruvbox-dark .app-version,
 body.theme-ayu-dark .app-version,
 body.theme-ayu-mirage .app-version,
 body.theme-palenight .app-version,
 body.theme-oceanic-next .app-version,
 body.theme-nord .app-version,
 body.theme-concrete-dark .app-version {
  color: #9ca3af;
 }
 body.theme-dark .app-logo,
 body.theme-dracula .app-logo,
 body.theme-onedark .app-logo,
 body.theme-tokyonight .app-logo,
 body.theme-monokai .app-logo,
 body.theme-cobalt2 .app-logo,
 body.theme-gruvbox-dark .app-logo,
 body.theme-ayu-dark .app-logo,
 body.theme-ayu-mirage .app-logo,
 body.theme-palenight .app-logo,
 body.theme-oceanic-next .app-logo,
 body.theme-nord .app-logo,
 body.theme-concrete-dark .app-logo {
  filter: none;
 }
 /* ============================================
   Converter Cards
   ============================================ */
 .converter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-md);
 }
 .converter-card {
  background: var(--ci-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  border: 2px solid var(--ci-border);
  transition: all var(--transition-fast);
  cursor: pointer;
 }
 .converter-card:hover {
  border-color: var(--ci-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
 }
 .converter-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
 }
 .converter-card-title {
  font-weight: 600;
  color: var(--ci-dark-gray);
  margin-bottom: var(--spacing-xs);
 }
 .converter-card-desc {
  font-size: 0.875rem;
  color: var(--ci-medium-gray);
 }
 /* ============================================
   Progress Bar
   ============================================ */
 .progress-bar {
  height: 8px;
  background: var(--ci-light-gray);
  border-radius: var(--radius-full);
  overflow: hidden;
 }
 .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ci-accent) 0%, var(--ci-accent-hover) 100%);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
 }
 /* ============================================
   File Drop Zone
   ============================================ */
 .drop-zone {
  border: 2px dashed var(--ci-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all var(--transition-fast);
  cursor: pointer;
 }
 .drop-zone:hover,
 .drop-zone.drag-over {
  border-color: var(--ci-accent);
  background: var(--ci-accent-light);
 }
 .drop-zone-icon {
  font-size: 3rem;
  color: var(--ci-medium-gray);
  margin-bottom: var(--spacing-md);
 }
 .drop-zone-text {
  color: var(--ci-dark-gray);
  font-weight: 500;
 }
 .drop-zone-hint {
  color: var(--ci-medium-gray);
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
 }
 /* ============================================
   Syntax Highlighting for Editor
   ============================================ */
 .editor-syntax .md-heading {
  color: var(--ci-accent);
  font-weight: bold;
 }
 .editor-syntax .md-bold {
  color: var(--ci-dark-gray);
  font-weight: bold;
 }
 .editor-syntax .md-italic {
  color: var(--ci-dark-gray);
  font-style: italic;
 }
 .editor-syntax .md-code {
  background: var(--ci-light-gray);
  color: var(--ci-accent);
  font-family: var(--font-mono);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
 }
 .editor-syntax .md-link {
  color: var(--ci-info);
  text-decoration: underline;
 }
 .editor-syntax .md-list {
  color: var(--ci-accent);
 }
 .editor-syntax .md-blockquote {
  color: var(--ci-medium-gray);
  border-left: 3px solid var(--ci-accent);
  padding-left: var(--spacing-md);
 }
 /* ============================================
   ASCII Art Generator Styles
   ============================================ */
 .ascii-preview {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  background: var(--ci-black);
  color: #00ff00;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  white-space: pre;
 }
 .ascii-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
 }
 /* ============================================
   Table Generator Styles
   ============================================ */
 .table-generator-grid {
  display: grid;
  gap: 1px;
  background: var(--ci-border);
  border: 1px solid var(--ci-border);
  border-radius: var(--radius-md);
  overflow: hidden;
 }
 .table-generator-cell {
  background: var(--ci-white);
  padding: var(--spacing-sm);
  min-width: 80px;
  min-height: 32px;
 }
 .table-generator-cell input {
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
 }
 .table-generator-cell.header {
  background: var(--ci-light-gray);
  font-weight: 600;
 }
 /* ============================================
   PDF Viewer/Editor Styles
   ============================================ */
 .pdf-viewer {
  background: var(--ci-dark-gray);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .pdf-page {
  background: var(--ci-white);
  box-shadow: var(--shadow-lg);
  max-width: 100%;
 }
 .pdf-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--ci-light-gray);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
 }
 /* ============================================
   Dark Mode for ConcreteInfo Theme
   ============================================ */
 body.theme-concreteinfo-dark {
  --ci-bg: #1a1a1a;
  --ci-white: #2a2a2a;
  --ci-light-gray: #3a3a3a;
  --ci-border: #4a4a4a;
 }
 body.theme-concreteinfo-dark .editor-textarea,
 body.theme-concreteinfo-dark .preview-content {
  background: #2a2a2a;
  color: #e0e0e0;
 }
 body.theme-concreteinfo-dark .modal-content {
  background: #2a2a2a;
  color: #e0e0e0;
 }
 body.theme-concreteinfo-dark .modal-body {
  background: #2a2a2a;
 }
 body.theme-concreteinfo-dark .modal-footer {
  background: #1a1a1a;
 }
 /* ============================================
   Animations
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
 }
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
 }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
 }
 .animate-fade-in {
  animation: fadeIn var(--transition-normal);
 }
 .animate-slide-up {
  animation: slideUp var(--transition-normal);
 }
 .animate-pulse {
  animation: pulse 2s infinite;
 }
 /* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    max-height: 90vh;
  }
  .converter-grid {
    grid-template-columns: 1fr;
  }
  .app-header {
    flex-wrap: wrap;
  }
 }
 /* ============================================
   Concrete Dark Theme
   ============================================ */
 body.theme-concrete-dark {
  background: #1a1a1a;
  color: #e3e3e3;
 }
 body.theme-concrete-dark .toolbar {
  background: linear-gradient(135deg, #0d0b09 0%, #1a1a1a 100%);
  border-bottom: 3px solid #e5461f;
 }
 body.theme-concrete-dark .toolbar button {
  color: #e3e3e3;
 }
 body.theme-concrete-dark .toolbar button:hover {
  background: #e5461f;
 }
 body.theme-concrete-dark .tab-bar {
  background: #0d0b09;
  border-bottom: 2px solid #e5461f;
 }
 body.theme-concrete-dark .tab {
  background: #2a2a2a;
  color: #e3e3e3;
  border-radius: 4px 4px 0 0;
 }
 body.theme-concrete-dark .tab.active {
  background: #464646;
  border-bottom: 2px solid #e5461f;
 }
 body.theme-concrete-dark .editor-textarea,
 body.theme-concrete-dark .editor-pane {
  background: #1a1a1a;
  color: #e3e3e3;
 }
 body.theme-concrete-dark .preview-content {
  background: #1a1a1a;
  color: #e3e3e3;
 }
 body.theme-concrete-dark .status-bar {
  background: #0d0b09;
  color: #9a9696;
  border-top: 1px solid #464646;
 }
 body.theme-concrete-dark .export-dialog-content,
 body.theme-concrete-dark .batch-dialog-content {
  background: #2a2a2a;
  color: #e3e3e3;
 }
 body.theme-concrete-dark .export-dialog-header,
 body.theme-concrete-dark .batch-dialog-header {
  background: #1a1a1a;
  border-bottom: 2px solid #e5461f;
 }
 body.theme-concrete-dark .export-dialog-footer,
 body.theme-concrete-dark .batch-dialog-footer {
  background: #1a1a1a;
 }
 body.theme-concrete-dark input,
 body.theme-concrete-dark select,
 body.theme-concrete-dark textarea {
  background: #1a1a1a;
  color: #e3e3e3;
  border-color: #464646;
 }
 body.theme-concrete-dark input:focus,
 body.theme-concrete-dark select:focus,
 body.theme-concrete-dark textarea:focus {
  border-color: #e5461f;
 }
 body.theme-concrete-dark .line-numbers {
  background: #0d0b09;
  color: #9a9696;
 }
 /* ============================================
   Concrete Light Theme
   ============================================ */
 body.theme-concrete-light {
  background: #f5f5f5;
  color: #464646;
 }
 body.theme-concrete-light .toolbar {
  background: #ffffff;
  border-bottom: 3px solid #e5461f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 body.theme-concrete-light .toolbar button {
  color: #464646;
 }
 body.theme-concrete-light .toolbar button:hover {
  background: #e5461f;
  color: #ffffff;
 }
 body.theme-concrete-light .tab-bar {
  background: #ffffff;
  border-bottom: 2px solid #e3e3e3;
 }
 body.theme-concrete-light .tab {
  background: #f5f5f5;
  color: #464646;
  border-radius: 4px 4px 0 0;
 }
 body.theme-concrete-light .tab.active {
  background: #ffffff;
  border-bottom: 2px solid #e5461f;
  color: #e5461f;
 }
 body.theme-concrete-light .editor-textarea,
 body.theme-concrete-light .editor-pane {
  background: #ffffff;
  color: #464646;
 }
 body.theme-concrete-light .preview-content {
  background: #ffffff;
  color: #464646;
 }
 body.theme-concrete-light .status-bar {
  background: #ffffff;
  color: #9a9696;
  border-top: 1px solid #e3e3e3;
 }
 body.theme-concrete-light .export-dialog-content,
 body.theme-concrete-light .batch-dialog-content {
  background: #ffffff;
  color: #464646;
 }
 body.theme-concrete-light .export-dialog-header,
 body.theme-concrete-light .batch-dialog-header {
  background: #f5f5f5;
  border-bottom: 2px solid #e5461f;
 }
 body.theme-concrete-light .line-numbers {
  background: #f5f5f5;
  color: #9a9696;
 }
 /* ============================================
   Concrete Warm Theme
   ============================================ */
 body.theme-concrete-warm {
  background: #faf8f5;
  color: #464646;
 }
 body.theme-concrete-warm .toolbar {
  background: linear-gradient(135deg, #464646 0%, #5a5a5a 100%);
  border-bottom: 3px solid #e5461f;
 }
 body.theme-concrete-warm .toolbar button {
  color: #faf8f5;
 }
 body.theme-concrete-warm .toolbar button:hover {
  background: #e5461f;
 }
 body.theme-concrete-warm .tab-bar {
  background: #464646;
  border-bottom: 2px solid #e5461f;
 }
 body.theme-concrete-warm .tab {
  background: #6a6a6a;
  color: #faf8f5;
  border-radius: 4px 4px 0 0;
 }
 body.theme-concrete-warm .tab.active {
  background: #faf8f5;
  color: #e5461f;
  border-bottom: 2px solid #e5461f;
 }
 body.theme-concrete-warm .editor-textarea,
 body.theme-concrete-warm .editor-pane {
  background: #faf8f5;
  color: #464646;
 }
 body.theme-concrete-warm .preview-content {
  background: #faf8f5;
  color: #464646;
 }
 body.theme-concrete-warm .status-bar {
  background: #f0ebe4;
  color: #9a9696;
  border-top: 1px solid #e3e3e3;
 }
 body.theme-concrete-warm .export-dialog-content,
 body.theme-concrete-warm .batch-dialog-content {
  background: #faf8f5;
  color: #464646;
 }
 body.theme-concrete-warm .export-dialog-header,
 body.theme-concrete-warm .batch-dialog-header {
  background: #f0ebe4;
  border-bottom: 2px solid #e5461f;
 }
 body.theme-concrete-warm h1,
 body.theme-concrete-warm h2,
 body.theme-concrete-warm h3,
 body.theme-concrete-warm h4,
 body.theme-concrete-warm h5,
 body.theme-concrete-warm h6 {
  color: #e5461f;
 }
 body.theme-concrete-warm a {
  color: #e5461f;
 }
 body.theme-concrete-warm .line-numbers {
  background: #f0ebe4;
  color: #9a9696;
 }
@@ -1,268 +0,0 @@
 /* Sidebar */
 .main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
 }
 .sidebar {
    display: flex;
    flex-shrink: 0;
    height: 100%;
    transition: width 0.2s ease;
 }
 .sidebar.collapsed {
    width: 48px;
 }
 .sidebar:not(.collapsed) {
    width: 328px; /* 48px icons + 280px panel */
 }
 .sidebar-icons {
    display: flex;
    flex-direction: column;
    width: 48px;
    background: var(--gray-100, #f3f4f6);
    border-right: 1px solid var(--gray-200, #e5e7eb);
    padding: 8px 0;
    gap: 4px;
    align-items: center;
 }
 .sidebar-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--gray-500, #6b7280);
    transition: all 0.15s ease;
 }
 .sidebar-icon:hover {
    background: var(--gray-200, #e5e7eb);
    color: var(--gray-700, #374151);
 }
 .sidebar-icon.active {
    background: var(--gray-200, #e5e7eb);
    color: var(--primary-dark, #5661b3);
    box-shadow: inset 3px 0 0 var(--primary-dark, #5661b3);
 }
 .sidebar-panel {
    width: 280px;
    background: var(--gray-50, #f9fafb);
    border-right: 1px solid var(--gray-200, #e5e7eb);
    display: flex;
    flex-direction: column;
    overflow: hidden;
 }
 .sidebar.collapsed .sidebar-panel {
    display: none;
 }
 .sidebar-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-600, #4b5563);
 }
 .sidebar-panel-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--gray-400, #9ca3af);
    padding: 0 4px;
    border-radius: 4px;
 }
 .sidebar-panel-close:hover {
    background: var(--gray-200, #e5e7eb);
    color: var(--gray-600, #4b5563);
 }
 .sidebar-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
 }
 /* Dark theme support */
 body[class*="dark"] .sidebar-icons,
 body[class*="dark"] .sidebar-panel {
    background: #1e1e1e;
    border-color: #333;
 }
 body[class*="dark"] .sidebar-icon {
    color: #888;
 }
 body[class*="dark"] .sidebar-icon:hover {
    background: #333;
    color: #ccc;
 }
 body[class*="dark"] .sidebar-icon.active {
    background: #333;
    color: #8b9aff;
    box-shadow: inset 3px 0 0 #8b9aff;
 }
 body[class*="dark"] .sidebar-panel-header {
    border-color: #333;
    color: #ccc;
 }
 /* Panel list items (templates, etc.) */
 .panel-list-item {
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 4px;
 }
 .panel-list-item:hover {
    background: var(--gray-200, #e5e7eb);
 }
 .panel-list-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-800, #1f2937);
 }
 .panel-list-item-desc {
    font-size: 11px;
    color: var(--gray-500, #6b7280);
    margin-top: 2px;
 }
 body[class*="dark"] .panel-list-item:hover {
    background: #333;
 }
 body[class*="dark"] .panel-list-item-title {
    color: #ddd;
 }
 body[class*="dark"] .panel-list-item-desc {
    color: #888;
 }
 /* Explorer Panel */
 .explorer-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
 }
 .explorer-path {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 6px;
    font-size: 12px;
    background: white;
    overflow: hidden;
    text-overflow: ellipsis;
 }
 .explorer-browse-btn {
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    padding: 4px 8px;
 }
 .tree-item {
    padding: 3px 0;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
 }
 .tree-item:hover {
    background: var(--gray-100, #f3f4f6);
    border-radius: 4px;
 }
 .tree-icon {
    margin-right: 4px;
    font-size: 12px;
 }
 .tree-children {
    padding-left: 16px;
 }
 .tree-folder.collapsed .tree-children {
    display: none;
 }
 .tree-name {
    font-size: 13px;
 }
 /* Git Panel */
 .git-section { margin-bottom: 16px; }
 .git-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin-bottom: 8px; }
 .git-file { display: flex; align-items: center; padding: 4px 6px; border-radius: 4px; font-size: 13px; gap: 6px; }
 .git-file:hover { background: var(--gray-100, #f3f4f6); }
 .git-file-status { font-weight: 700; font-family: monospace; width: 16px; text-align: center; }
 .git-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .git-stage-btn { border: none; background: var(--gray-200); border-radius: 4px; cursor: pointer; font-size: 14px; width: 22px; height: 22px; }
 .git-commit-input { width: 100%; padding: 8px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical; box-sizing: border-box; }
 .git-commit-btn { width: 100%; margin-top: 8px; padding: 8px; background: var(--primary-dark, #5661b3); color: white; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; }
 .git-commit-btn:hover { opacity: 0.9; }
 .git-log-entry { padding: 6px 0; border-bottom: 1px solid var(--gray-100); }
 .git-log-msg { font-size: 13px; }
 .git-log-meta { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
 .git-info { font-size: 13px; color: var(--gray-500); padding: 8px 0; }
 .git-loading { font-size: 13px; color: var(--gray-400); }
 /* Snippets Panel */
 .snippets-toolbar { display: flex; gap: 4px; margin-bottom: 8px; }
 .snippets-search { flex: 1; padding: 6px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; }
 .snippets-add-btn { width: 32px; border: 1px solid var(--gray-300); border-radius: 6px; background: white; font-size: 18px; cursor: pointer; }
 .snippet-item { padding: 8px; border: 1px solid var(--gray-200); border-radius: 6px; margin-bottom: 6px; }
 .snippet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
 .snippet-name { font-size: 13px; font-weight: 500; }
 .snippet-lang { font-size: 11px; background: var(--gray-100); padding: 2px 6px; border-radius: 4px; color: var(--gray-500); }
 .snippet-preview { font-size: 12px; background: var(--gray-50); padding: 6px; border-radius: 4px; margin: 4px 0; overflow: hidden; max-height: 60px; }
 .snippet-preview code { font-family: 'JetBrains Mono', monospace; }
 .snippet-actions { display: flex; gap: 4px; }
 .snippet-insert { font-size: 12px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: white; cursor: pointer; }
 .snippet-delete { font-size: 14px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: white; cursor: pointer; color: #ef4444; }
 /* Dark theme for sidebar panels */
 body[class*="dark"] .explorer-path,
 body[class*="dark"] .explorer-browse-btn,
 body[class*="dark"] .snippets-search,
 body[class*="dark"] .snippets-add-btn,
 body[class*="dark"] .snippet-insert,
 body[class*="dark"] .snippet-delete {
    background: #2d2d2d;
    border-color: #444;
    color: #ccc;
 }
 body[class*="dark"] .git-commit-input {
    background: #2d2d2d;
    border-color: #444;
    color: #ccc;
 }
 body[class*="dark"] .snippet-item {
    border-color: #444;
 }
 body[class*="dark"] .snippet-preview {
    background: #2d2d2d;
 }
 body[class*="dark"] .tree-item:hover,
 body[class*="dark"] .git-file:hover {
    background: #333;
 }
@@ -1,24 +0,0 @@
 .welcome-container { padding: 40px; max-width: 900px; margin: 0 auto; }
 .welcome-hero { text-align: center; margin-bottom: 40px; }
 .welcome-title { font-size: 32px; font-weight: 700; color: var(--gray-800, #1f2937); }
 .welcome-version { font-size: 14px; color: var(--primary-dark, #5661b3); margin-top: 4px; font-weight: 500; }
 .welcome-subtitle { font-size: 16px; color: var(--gray-500, #6b7280); margin-top: 8px; }
 .welcome-grid { display: grid; gap: 32px; }
 .welcome-section h2 { font-size: 18px; margin-bottom: 16px; color: var(--gray-700, #374151); }
 .welcome-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
 .welcome-card { padding: 20px; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px; cursor: pointer; text-align: center; transition: all 0.2s; }
 .welcome-card:hover { border-color: var(--primary-dark, #5661b3); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
 .welcome-card-icon { font-size: 28px; margin-bottom: 8px; }
 .welcome-card h3 { font-size: 15px; margin-bottom: 4px; }
 .welcome-card p { font-size: 13px; color: var(--gray-500); }
 .welcome-card kbd { display: inline-block; margin-top: 8px; padding: 2px 8px; background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 4px; font-size: 12px; font-family: 'JetBrains Mono', monospace; }
 .welcome-features { list-style: none; padding: 0; }
 .welcome-features li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
 .welcome-features strong { color: var(--primary-dark, #5661b3); }
 .welcome-recent-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; }
 .welcome-recent-item:hover { background: var(--gray-100); }
 .welcome-recent-name { font-size: 14px; font-weight: 500; display: block; }
 .welcome-recent-path { font-size: 12px; color: var(--gray-500); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
 .welcome-muted { color: var(--gray-400); font-size: 14px; }
 .welcome-footer { margin-top: 32px; text-align: center; }
 .welcome-checkbox { font-size: 13px; color: var(--gray-500); cursor: pointer; }
@@ -139,18 +139,11 @@ body {
    background: #d0d0d0;
 }
 .toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
 }
 .toolbar-separator {
    width: 1px;
-    height: 20px;
+    height: 24px;
-    background: rgba(0, 0, 0, 0.12);
+    background: #ccc;
-    margin: 0 6px;
+    margin: 0 8px;
    align-self: center;
    flex-shrink: 0;
 }
 /* Editor Container */
@@ -188,6 +181,33 @@ body {
    background: #666;
 }
 /* Preview Header */
 .preview-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    background: #f6f8fa;
    border-bottom: 1px solid #dfe2e5;
    min-height: 32px;
 }
 .preview-popout-btn {
    background: transparent;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    color: #57606a;
    transition: all 0.2s;
 }
 .preview-popout-btn:hover {
    background: #f3f4f6;
    border-color: #8c959f;
    color: #24292f;
 }
 .editor-textarea {
    width: 100%;
@@ -201,20 +221,6 @@ body {
    resize: none;
 }
 /* CodeMirror container */
 .codemirror-container {
    height: 100%;
    overflow: auto;
 }
 .codemirror-container .cm-editor {
    height: 100%;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
 }
 .codemirror-container .cm-scroller {
    overflow: auto;
 }
 .pane:last-child {
    padding: 0;
    background: #fff;
@@ -262,67 +268,15 @@ body {
    line-height: 1.6;
 }
 /* Bottom Panel (REPL Output) */
 .bottom-panel { display: flex; flex-direction: column; border-top: 1px solid var(--gray-200, #e5e7eb); flex-shrink: 0; }
 .bottom-panel.collapsed { height: 0; overflow: hidden; border: none; }
 .bottom-panel:not(.collapsed) { height: 200px; }
 .bottom-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: var(--gray-50, #f9fafb); border-bottom: 1px solid var(--gray-200); }
 .bottom-panel-title { font-size: 13px; font-weight: 600; color: var(--gray-600); }
 .bottom-panel-actions { display: flex; gap: 4px; }
 .bottom-panel-btn { font-size: 12px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: white; cursor: pointer; }
 .bottom-panel-content { flex: 1; overflow-y: auto; padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 13px; background: #1e1e1e; color: #d4d4d4; }
 .repl-entry { margin-bottom: 8px; }
 .repl-command { color: #569cd6; margin-bottom: 2px; }
 .repl-stdout { color: #d4d4d4; white-space: pre-wrap; }
 .repl-stderr { color: #f44747; white-space: pre-wrap; }
 .repl-error { color: #f44747; }
 /* Code Run Button */
 .code-run-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 4px 10px;
    font-size: 12px;
    background: var(--primary-dark, #5661b3);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
 }
 pre:hover .code-run-btn { opacity: 1; }
 /* Dark theme bottom panel */
 body[class*="dark"] .bottom-panel-header { background: #1e1e1e; border-color: #333; }
 body[class*="dark"] .bottom-panel-btn { background: #2d2d2d; border-color: #444; color: #ccc; }
 body[class*="dark"] .bottom-panel-title { color: #ccc; }
 /* Status Bar */
 .status-bar {
    display: flex;
    justify-content: space-between;
-    align-items: center;
+    padding: 4px 12px;
    padding: 2px 12px;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    font-size: 12px;
    color: #666;
    min-height: 24px;
    flex-shrink: 0;
 }
 .status-bar-left, .status-bar-right {
    display: flex;
    align-items: center;
    gap: 4px;
 }
 .status-separator {
    color: var(--gray-300, #d1d5db);
    margin: 0 2px;
 }
 .status-item {
    white-space: nowrap;
 }
 /* Preview Styles */
@@ -1076,82 +1030,52 @@ body.theme-github .status-bar {
 .export-dialog-content {
    background: #fff;
-    border-radius: 6px;
+    border-radius: 8px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-    width: 85%;
+    width: 90%;
-    max-width: 450px;
+    max-width: 600px;
-    max-height: 80vh;
+    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    font-size: 12px;
 }
 .export-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 12px 16px;
+    padding: 16px 20px;
    border-bottom: 1px solid #eee;
 }
 .export-dialog-header h3 {
    margin: 0;
-    font-size: 14px;
+    font-size: 18px;
    font-weight: 600;
 }
 .export-dialog-body {
-    padding: 14px 16px;
+    padding: 20px;
 }
 .export-section {
-    margin-bottom: 14px;
+    margin-bottom: 20px;
 }
 .export-section label {
    display: block;
-    font-weight: 500;
+    font-weight: 600;
-    margin-bottom: 4px;
+    margin-bottom: 8px;
    color: #333;
    font-size: 12px;
 }
 .export-section label.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 400;
 }
 .export-section label.checkbox-inline input[type="checkbox"] {
    width: auto;
    margin: 0;
 }
 /* PDF Editor buttons */
 #add-merge-file {
    padding: 5px 10px;
    font-size: 12px;
    background: #4a90d9;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
 }
 #add-merge-file:hover {
    background: #357abd;
 }
 .export-section select,
 .export-section input[type="text"],
 .export-section input[type="number"] {
    width: 100%;
-    padding: 5px 8px;
+    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
-    font-size: 12px;
+    font-size: 14px;
 }
 .export-section select:focus,
@@ -1355,10 +1279,9 @@ body.theme-dark #add-metadata-field {
 /* PDF Editor Specific Styles */
 .pdf-editor-content {
-    max-width: 450px !important;
+    max-width: 600px !important;
-    max-height: 75vh;
+    max-height: 85vh;
    overflow-y: auto;
    font-size: 12px;
 }
 .pdf-editor-body {
@@ -1494,13 +1417,12 @@ body.theme-dark #export-dialog-close:hover {
 .batch-dialog-content {
    background: #fff;
-    border-radius: 6px;
+    border-radius: 8px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-    width: 85%;
+    width: 90%;
-    max-width: 450px;
+    max-width: 500px;
-    max-height: 75vh;
+    max-height: 80vh;
    overflow-y: auto;
    font-size: 12px;
 }
 .batch-dialog-header {
@@ -3229,250 +3151,6 @@ body.theme-concrete-warm .status-bar {
    color: #e3e3e3;
 }
 /* ========================================
   Sepia Theme - Warm reading theme
   ======================================== */
 body.theme-sepia {
    background: #f4ecd8;
    color: #5b4636;
 }
 body.theme-sepia .tab-bar {
    background: #e8dcc8;
    border-bottom-color: #d4c4a8;
 }
 body.theme-sepia .tab {
    background: #e8dcc8;
    border-color: #d4c4a8;
    color: #5b4636;
 }
 body.theme-sepia .tab.active {
    background: #f4ecd8;
    border-bottom-color: #8b7355;
 }
 body.theme-sepia .toolbar {
    background: #e8dcc8;
    border-bottom-color: #d4c4a8;
 }
 body.theme-sepia .toolbar button {
    color: #5b4636;
 }
 body.theme-sepia .toolbar button:hover {
    background: #d4c4a8;
 }
 body.theme-sepia .editor-textarea {
    background: #f4ecd8;
    color: #5b4636;
 }
 body.theme-sepia .pane:last-child {
    background: #f4ecd8;
 }
 body.theme-sepia .preview-content {
    color: #5b4636;
 }
 body.theme-sepia .preview-content h1,
 body.theme-sepia .preview-content h2 {
    color: #3d2914;
    border-bottom-color: #d4c4a8;
 }
 body.theme-sepia .preview-content code {
    background: #e8dcc8;
    color: #8b4513;
 }
 body.theme-sepia .preview-content pre {
    background: #e8dcc8;
    border-color: #d4c4a8;
 }
 body.theme-sepia .preview-content a {
    color: #8b4513;
 }
 body.theme-sepia .preview-content blockquote {
    border-left-color: #8b7355;
    background: #e8dcc8;
 }
 body.theme-sepia .status-bar {
    background: #e8dcc8;
    border-top-color: #d4c4a8;
    color: #5b4636;
 }
 /* ========================================
   Paper Theme - Clean white paper
   ======================================== */
 body.theme-paper {
    background: #ffffff;
    color: #1a1a1a;
 }
 body.theme-paper .tab-bar {
    background: #f8f8f8;
    border-bottom-color: #e0e0e0;
 }
 body.theme-paper .tab {
    background: #f0f0f0;
    border-color: #e0e0e0;
    color: #333;
 }
 body.theme-paper .tab.active {
    background: #ffffff;
    border-bottom-color: #1a1a1a;
 }
 body.theme-paper .toolbar {
    background: #f8f8f8;
    border-bottom-color: #e0e0e0;
 }
 body.theme-paper .toolbar button {
    color: #333;
 }
 body.theme-paper .toolbar button:hover {
    background: #e8e8e8;
 }
 body.theme-paper .editor-textarea {
    background: #ffffff;
    color: #1a1a1a;
 }
 body.theme-paper .pane:last-child {
    background: #ffffff;
 }
 body.theme-paper .preview-content {
    color: #1a1a1a;
 }
 body.theme-paper .preview-content h1,
 body.theme-paper .preview-content h2 {
    color: #000;
    border-bottom-color: #e0e0e0;
 }
 body.theme-paper .preview-content code {
    background: #f5f5f5;
    color: #c41a16;
 }
 body.theme-paper .preview-content pre {
    background: #f5f5f5;
    border-color: #e0e0e0;
 }
 body.theme-paper .preview-content a {
    color: #0366d6;
 }
 body.theme-paper .preview-content blockquote {
    border-left-color: #ddd;
    background: #f9f9f9;
 }
 body.theme-paper .status-bar {
    background: #f8f8f8;
    border-top-color: #e0e0e0;
    color: #333;
 }
 /* ========================================
   Rose Pine Dawn - Warm rose-tinted light
   ======================================== */
 body.theme-rosepine-dawn {
    background: #faf4ed;
    color: #575279;
 }
 body.theme-rosepine-dawn .tab-bar {
    background: #f2e9e1;
    border-bottom-color: #dfdad9;
 }
 body.theme-rosepine-dawn .tab {
    background: #f2e9e1;
    border-color: #dfdad9;
    color: #575279;
 }
 body.theme-rosepine-dawn .tab.active {
    background: #faf4ed;
    border-bottom-color: #907aa9;
 }
 body.theme-rosepine-dawn .toolbar {
    background: #f2e9e1;
    border-bottom-color: #dfdad9;
 }
 body.theme-rosepine-dawn .toolbar button {
    color: #575279;
 }
 body.theme-rosepine-dawn .toolbar button:hover {
    background: #dfdad9;
 }
 body.theme-rosepine-dawn .editor-textarea {
    background: #faf4ed;
    color: #575279;
 }
 body.theme-rosepine-dawn .pane:last-child {
    background: #faf4ed;
 }
 body.theme-rosepine-dawn .preview-content {
    color: #575279;
 }
 body.theme-rosepine-dawn .preview-content h1,
 body.theme-rosepine-dawn .preview-content h2 {
    color: #286983;
    border-bottom-color: #dfdad9;
 }
 body.theme-rosepine-dawn .preview-content code {
    background: #f2e9e1;
    color: #b4637a;
 }
 body.theme-rosepine-dawn .preview-content pre {
    background: #f2e9e1;
    border-color: #dfdad9;
 }
 body.theme-rosepine-dawn .preview-content a {
    color: #56949f;
 }
 body.theme-rosepine-dawn .preview-content blockquote {
    border-left-color: #907aa9;
    background: #f2e9e1;
    color: #797593;
 }
 body.theme-rosepine-dawn .status-bar {
    background: #f2e9e1;
    border-top-color: #dfdad9;
    color: #575279;
 }
 /* Print Styles */
@media print {
    /* Hide UI elements for clean print output */
@@ -4018,43 +3696,108 @@ body.theme-github .mermaid {
    border-color: #e1e4e8;
 }
 /* Task List Styles */
 .preview-content input[type="checkbox"] {
    margin-right: 6px;
    pointer-events: none;
 }
 .preview-content li.task-list-item {
    list-style: none;
    margin-left: -20px;
 }
 /* Admonition Styles */
 .admonition {
    border-left: 4px solid;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 16px 0;
 }
 .admonition-title {
    font-weight: 600;
    margin-bottom: 8px;
 }
 .admonition-note, .admonition-info { border-color: #3b82f6; background: #eff6ff; }
 .admonition-warning { border-color: #f59e0b; background: #fffbeb; }
 .admonition-tip { border-color: #10b981; background: #ecfdf5; }
 .admonition-danger { border-color: #ef4444; background: #fef2f2; }
 /* TOC Styles */
 .toc { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; margin: 16px 0; }
 .toc h2 { font-size: 14px; margin-bottom: 8px; }
 .toc ul { list-style: none; padding: 0; }
 .toc li { padding: 2px 0; }
 .toc .toc-h1 { padding-left: 0; }
 .toc .toc-h2 { padding-left: 16px; }
 .toc .toc-h3 { padding-left: 32px; }
 .toc .toc-h4 { padding-left: 48px; }
 .toc a { color: #5661b3; text-decoration: none; }
 .toc a:hover { text-decoration: underline; }
 /* Command Palette Styles */
-/* Command Palette styles moved to styles-modern.css */
+.command-palette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    z-index: 10000;
 }
 .command-palette.hidden {
    display: none;
 }
 .command-palette-content {
    background: #fff;
    border-radius: 12px;
    width: 600px;
    max-width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
 }
 #command-search {
    width: 100%;
    padding: 20px;
    font-size: 18px;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    outline: none;
 }
 .command-list {
    max-height: 400px;
    overflow-y: auto;
 }
 .command-item {
    padding: 12px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s;
 }
 .command-item:hover,
 .command-item.selected {
    background: #f0f0f0;
 }
 .command-name {
    font-weight: 500;
 }
 .command-shortcut {
    font-size: 12px;
    color: #666;
    background: #f5f5f5;
    padding: 3px 8px;
    border-radius: 3px;
 }
 .command-palette-footer {
    padding: 12px 20px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #666;
 }
 /* Dark theme support for command palette */
 body.theme-dark .command-palette-content {
    background: #2d2d2d;
    color: #f0f0f0;
 }
 body.theme-dark #command-search {
    background: #2d2d2d;
    color: #f0f0f0;
    border-color: #444;
 }
 body.theme-dark .command-item:hover,
 body.theme-dark .command-item.selected {
    background: #3d3d3d;
 }
 body.theme-dark .command-shortcut {
    background: #3d3d3d;
    color: #ccc;
 }
 body.theme-dark .command-palette-footer {
    background: #252525;
    border-color: #444;
    color: #999;
 }
@@ -1,545 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Generator - MarkdownConverter</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <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;
            display: flex;
            flex-direction: column;
        }
        .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;
            flex: 1;
            overflow: auto;
        }
        .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;
        }
        .controls-row {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .control-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .control-label {
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--ci-medium-gray);
        }
        .form-input, .form-select {
            padding: 8px 12px;
            border: 2px solid var(--ci-light-gray);
            border-radius: 6px;
            font-size: 0.875rem;
            font-family: inherit;
            transition: border-color 0.2s;
            min-width: 100px;
        }
        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: var(--ci-accent);
        }
        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.875rem;
            cursor: pointer;
        }
        .checkbox-label input {
            width: 16px;
            height: 16px;
            accent-color: var(--ci-accent);
        }
        .table-container {
            overflow-x: auto;
            margin-bottom: 20px;
        }
        .editable-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875rem;
        }
        .editable-table th,
        .editable-table td {
            border: 1px solid var(--ci-light-gray);
            padding: 0;
        }
        .editable-table th {
            background: var(--ci-dark-gray);
            color: var(--ci-white);
        }
        .editable-table input {
            width: 100%;
            padding: 10px 12px;
            border: none;
            font-family: inherit;
            font-size: 0.875rem;
            background: transparent;
        }
        .editable-table input:focus {
            outline: 2px solid var(--ci-accent);
            outline-offset: -2px;
            background: rgba(229, 70, 31, 0.05);
        }
        .editable-table th input {
            color: var(--ci-white);
            font-weight: 600;
        }
        .editable-table th input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        .preview-container {
            background: var(--ci-black);
            border-radius: 8px;
            padding: 16px;
            max-height: 250px;
            overflow: auto;
        }
        .preview-content {
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
            line-height: 1.4;
            color: #00ff00;
            white-space: pre;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 24px;
            background: var(--ci-white);
            border-top: 1px solid var(--ci-light-gray);
        }
        .footer-left {
            display: flex;
            gap: 8px;
        }
        .footer-right {
            display: flex;
            gap: 12px;
        }
        .btn {
            padding: 10px 20px;
            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;
        }
        .btn-outline {
            background: transparent;
            border: 2px solid var(--ci-accent);
            color: var(--ci-accent);
        }
        .btn-outline:hover {
            background: var(--ci-accent);
            color: var(--ci-white);
        }
        .btn-sm {
            padding: 6px 12px;
            font-size: 0.75rem;
        }
        .quick-templates {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .template-chip {
            padding: 6px 12px;
            background: var(--ci-light-gray);
            border-radius: 20px;
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }
        .template-chip:hover {
            background: var(--ci-accent);
            color: var(--ci-white);
        }
    </style>
 </head>
 <body>
    <div class="header">
        <h1>Table Generator</h1>
    </div>
    <div class="container">
        <div class="section">
            <div class="section-title">Table Settings</div>
            <div class="controls-row">
                <div class="control-group">
                    <span class="control-label">Rows</span>
                    <input type="number" id="rows" class="form-input" min="1" max="50" value="4" style="width: 80px;">
                </div>
                <div class="control-group">
                    <span class="control-label">Columns</span>
                    <input type="number" id="cols" class="form-input" min="1" max="20" value="4" style="width: 80px;">
                </div>
                <div class="control-group">
                    <span class="control-label">Alignment</span>
                    <select id="alignment" class="form-select">
                        <option value="left">Left</option>
                        <option value="center">Center</option>
                        <option value="right">Right</option>
                    </select>
                </div>
                <div class="control-group" style="justify-content: flex-end;">
                    <label class="checkbox-label">
                        <input type="checkbox" id="has-header" checked>
                        Include Header Row
                    </label>
                </div>
            </div>
            <div class="quick-templates">
                <button class="template-chip" data-rows="3" data-cols="2">2-Column (3 rows)</button>
                <button class="template-chip" data-rows="5" data-cols="3">3-Column (5 rows)</button>
                <button class="template-chip" data-rows="4" data-cols="4">4x4 Grid</button>
                <button class="template-chip" data-rows="10" data-cols="3">Data Table (10 rows)</button>
                <button class="template-chip" data-rows="2" data-cols="5">Wide Table</button>
            </div>
        </div>
        <div class="section">
            <div class="section-title">Edit Table Content</div>
            <div class="table-container">
                <table class="editable-table" id="editable-table">
                    <!-- Generated dynamically -->
                </table>
            </div>
        </div>
        <div class="section">
            <div class="section-title">Markdown Preview</div>
            <div class="preview-container">
                <div id="preview" class="preview-content"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-left">
            <button class="btn btn-secondary btn-sm" id="btn-clear">Clear All</button>
            <button class="btn btn-outline btn-sm" id="btn-fill-sample">Fill Sample Data</button>
        </div>
        <div class="footer-right">
            <button class="btn btn-secondary" id="btn-copy">Copy Markdown</button>
            <button class="btn btn-primary" id="btn-insert">Insert to Editor</button>
        </div>
    </div>
    <script>
        let currentRows = 4;
        let currentCols = 4;
        let hasHeader = true;
        let alignment = 'left';
        // Generate the editable table
        function generateEditableTable() {
            const table = document.getElementById('editable-table');
            hasHeader = document.getElementById('has-header').checked;
            alignment = document.getElementById('alignment').value;
            let html = '';
            for (let i = 0; i < currentRows; i++) {
                html += '<tr>';
                for (let j = 0; j < currentCols; j++) {
                    const isHeader = hasHeader && i === 0;
                    const tag = isHeader ? 'th' : 'td';
                    const placeholder = isHeader ? `Header ${j + 1}` : `Cell ${i},${j + 1}`;
                    html += `<${tag}><input type="text" data-row="${i}" data-col="${j}" placeholder="${placeholder}"></${tag}>`;
                }
                html += '</tr>';
            }
            table.innerHTML = html;
            // Add event listeners for live preview
            table.querySelectorAll('input').forEach(input => {
                input.addEventListener('input', updatePreview);
            });
            updatePreview();
        }
        // Get table data
        function getTableData() {
            const data = [];
            for (let i = 0; i < currentRows; i++) {
                const row = [];
                for (let j = 0; j < currentCols; j++) {
                    const input = document.querySelector(`input[data-row="${i}"][data-col="${j}"]`);
                    row.push(input ? input.value || '' : '');
                }
                data.push(row);
            }
            return data;
        }
        // Generate markdown table
        function generateMarkdown(data) {
            if (data.length === 0 || data[0].length === 0) return '';
            // Calculate column widths
            const colWidths = [];
            for (let j = 0; j < data[0].length; j++) {
                let maxWidth = 3; // Minimum width for separator
                for (let i = 0; i < data.length; i++) {
                    maxWidth = Math.max(maxWidth, (data[i][j] || '').length);
                }
                colWidths.push(maxWidth);
            }
            // Generate alignment function
            const alignCell = (text, width) => {
                text = text || '';
                const padding = width - text.length;
                if (alignment === 'center') {
                    const left = Math.floor(padding / 2);
                    const right = padding - left;
                    return ' '.repeat(left) + text + ' '.repeat(right);
                } else if (alignment === 'right') {
                    return ' '.repeat(padding) + text;
                }
                return text + ' '.repeat(padding);
            };
            // Generate separator based on alignment
            const getSeparator = (width) => {
                if (alignment === 'center') {
                    return ':' + '-'.repeat(width - 2) + ':';
                } else if (alignment === 'right') {
                    return '-'.repeat(width - 1) + ':';
                }
                return '-'.repeat(width);
            };
            let markdown = '';
            const startRow = hasHeader ? 0 : -1;
            for (let i = startRow; i < data.length; i++) {
                if (i === -1) {
                    // Generate empty header for tables without header
                    markdown += '| ' + colWidths.map(w => ' '.repeat(w)).join(' | ') + ' |\n';
                } else {
                    const row = data[i];
                    const cells = row.map((cell, j) => alignCell(cell, colWidths[j]));
                    markdown += '| ' + cells.join(' | ') + ' |\n';
                }
                // Add separator after first row
                if ((hasHeader && i === 0) || (!hasHeader && i === -1)) {
                    const separators = colWidths.map(w => getSeparator(w));
                    markdown += '| ' + separators.join(' | ') + ' |\n';
                }
            }
            return markdown;
        }
        // Update preview
        function updatePreview() {
            const data = getTableData();
            const markdown = generateMarkdown(data);
            document.getElementById('preview').textContent = markdown;
        }
        // Event listeners
        document.getElementById('rows').addEventListener('change', (e) => {
            currentRows = parseInt(e.target.value) || 4;
            generateEditableTable();
        });
        document.getElementById('cols').addEventListener('change', (e) => {
            currentCols = parseInt(e.target.value) || 4;
            generateEditableTable();
        });
        document.getElementById('alignment').addEventListener('change', () => {
            updatePreview();
        });
        document.getElementById('has-header').addEventListener('change', () => {
            generateEditableTable();
        });
        // Quick templates
        document.querySelectorAll('.template-chip').forEach(chip => {
            chip.addEventListener('click', () => {
                currentRows = parseInt(chip.dataset.rows);
                currentCols = parseInt(chip.dataset.cols);
                document.getElementById('rows').value = currentRows;
                document.getElementById('cols').value = currentCols;
                generateEditableTable();
            });
        });
        // Clear all
        document.getElementById('btn-clear').addEventListener('click', () => {
            document.querySelectorAll('#editable-table input').forEach(input => {
                input.value = '';
            });
            updatePreview();
        });
        // Fill sample data
        document.getElementById('btn-fill-sample').addEventListener('click', () => {
            const sampleHeaders = ['Name', 'Description', 'Status', 'Priority', 'Due Date'];
            const sampleData = [
                ['Task 1', 'First task description', 'In Progress', 'High', '2024-01-15'],
                ['Task 2', 'Second task description', 'Completed', 'Medium', '2024-01-10'],
                ['Task 3', 'Third task description', 'Pending', 'Low', '2024-01-20'],
                ['Task 4', 'Fourth task description', 'In Review', 'High', '2024-01-18']
            ];
            for (let i = 0; i < currentRows; i++) {
                for (let j = 0; j < currentCols; j++) {
                    const input = document.querySelector(`input[data-row="${i}"][data-col="${j}"]`);
                    if (input) {
                        if (hasHeader && i === 0) {
                            input.value = sampleHeaders[j % sampleHeaders.length];
                        } else {
                            const dataRow = hasHeader ? i - 1 : i;
                            if (dataRow < sampleData.length && j < sampleData[dataRow].length) {
                                input.value = sampleData[dataRow][j];
                            } else {
                                input.value = `Data ${i}-${j + 1}`;
                            }
                        }
                    }
                }
            }
            updatePreview();
        });
        // Copy markdown
        document.getElementById('btn-copy').addEventListener('click', () => {
            const markdown = document.getElementById('preview').textContent;
            navigator.clipboard.writeText(markdown).then(() => {
                const btn = document.getElementById('btn-copy');
                btn.textContent = 'Copied!';
                setTimeout(() => {
                    btn.textContent = 'Copy Markdown';
                }, 2000);
            });
        });
        // Insert to editor
        document.getElementById('btn-insert').addEventListener('click', () => {
            const content = document.getElementById('preview').textContent;
            if (content && window.electronAPI) {
                window.electronAPI.send('insert-generated-content', '\n' + content + '\n');
                window.close();
            }
        });
        // Initialize
        generateEditableTable();
    </script>
 </body>
 </html>
@@ -1,90 +0,0 @@
 # API Documentation
 **Base URL:** `https://api.example.com/v1`
 **Version:** 1.0
 **Date:** {{DATE}}
 ## Authentication
 All requests require an API key in the header:
 ```
 Authorization: Bearer YOUR_API_KEY
 ```
 ## Endpoints
 ### Get All Resources
 ```
 GET /resources
 ```
 **Query Parameters:**
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
 | page | integer | No | Page number (default: 1) |
 | limit | integer | No | Items per page (default: 20) |
 **Response:**
 ```json
 {
  "data": [],
  "total": 0,
  "page": 1
 }
 ```
 ### Get Resource by ID
 ```
 GET /resources/:id
 ```
 **Response:**
 ```json
 {
  "id": "1",
  "name": "Resource name",
  "created_at": "2024-01-01T00:00:00Z"
 }
 ```
 ### Create Resource
 ```
 POST /resources
 ```
 **Request Body:**
 ```json
 {
  "name": "New resource",
  "description": "Description"
 }
 ```
 ### Update Resource
 ```
 PUT /resources/:id
 ```
 ### Delete Resource
 ```
 DELETE /resources/:id
 ```
 ## Error Codes
 | Code | Description |
 |------|-------------|
 | 400 | Bad Request |
 | 401 | Unauthorized |
 | 404 | Not Found |
 | 500 | Internal Server Error |
@@ -1,20 +0,0 @@
 ---
 title: Blog Post Title
 date: {{DATE}}
 author: Your Name
 tags: []
 ---
 # Blog Post Title
 ## Introduction
 Write your introduction here.
 ## Main Content
 Your main content goes here.
 ## Conclusion
 Wrap up your thoughts.
@@ -1,20 +0,0 @@
 # Changelog
 ## [Unreleased]
 ### Added
 - New feature
 ### Changed
 - Updated feature
 ### Fixed
 - Bug fix
 ### Removed
 - Removed feature
 ## [1.0.0] - {{DATE}}
 ### Added
 - Initial release
@@ -1,59 +0,0 @@
 # Comparison: [Option A] vs [Option B]
 **Date:** {{DATE}}
 **Author:** Your Name
 ## Overview
 Brief description of what is being compared and why.
 ## Feature Comparison
 | Feature | Option A | Option B |
 |---------|----------|----------|
 | Feature 1 | Yes | Yes |
 | Feature 2 | Yes | No |
 | Feature 3 | No | Yes |
 | Feature 4 | Partial | Yes |
 ## Pricing
 | Plan | Option A | Option B |
 |------|----------|----------|
 | Free | Limited | Limited |
 | Pro | $10/mo | $15/mo |
 | Enterprise | Custom | Custom |
 ## Pros and Cons
 ### Option A
 **Pros:**
 - Pro 1
 - Pro 2
 **Cons:**
 - Con 1
 - Con 2
 ### Option B
 **Pros:**
 - Pro 1
 - Pro 2
 **Cons:**
 - Con 1
 - Con 2
 ## Performance
 | Metric | Option A | Option B |
 |--------|----------|----------|
 | Speed | Fast | Moderate |
 | Memory | Low | Medium |
 | Scalability | Good | Excellent |
 ## Recommendation
 Based on the analysis above, [Option A/B] is recommended for [use case] because [reason].
@@ -1,26 +0,0 @@
 # Meeting Notes
 **Date:** {{DATE}}
 **Attendees:**
 - Name 1
 - Name 2
 ## Agenda
 1. Topic 1
 2. Topic 2
 ## Discussion
 ### Topic 1
 Notes here.
 ## Action Items
 - [ ] Action item 1 — Owner — Due date
 - [ ] Action item 2 — Owner — Due date
 ## Next Meeting
 Date: TBD
@@ -1,54 +0,0 @@
 # Project Plan: [Project Name]
 **Date:** {{DATE}}
 **Project Lead:** Your Name
 **Status:** Planning
 ## Goals
 1. Primary goal
 2. Secondary goal
 ## Scope
 ### In Scope
 - Item 1
 - Item 2
 ### Out of Scope
 - Item 1
 ## Milestones
 | Milestone | Target Date | Status |
 |-----------|-------------|--------|
 | Kickoff | {{DATE}} | Not Started |
 | MVP | TBD | Not Started |
 | Launch | TBD | Not Started |
 ## Resources
 | Role | Person | Allocation |
 |------|--------|------------|
 | Lead | Name | 100% |
 | Developer | Name | 50% |
 ## Risks
 | Risk | Impact | Likelihood | Mitigation |
 |------|--------|------------|------------|
 | Risk 1 | High | Medium | Plan |
 ## Timeline
 ### Phase 1: Planning
 - [ ] Define requirements
 - [ ] Create design documents
 ### Phase 2: Development
 - [ ] Implement core features
 - [ ] Write tests
 ### Phase 3: Launch
 - [ ] Deploy to production
 - [ ] Monitor and iterate
@@ -1,38 +0,0 @@
 # Project Name
 Brief description of the project.
 ## Features
 - Feature 1
 - Feature 2
 ## Installation
 ```bash
 npm install project-name
 ```
 ## Usage
 ```javascript
 const project = require('project-name');
 ```
 ## Configuration
 | Option | Default | Description |
 |--------|---------|-------------|
 | option1 | true | Description |
 ## Contributing
 1. Fork the repository
 2. Create your feature branch
 3. Commit your changes
 4. Push to the branch
 5. Open a Pull Request
 ## License
 MIT
@@ -1,42 +0,0 @@
 # Release Notes - v1.0.0
 **Release Date:** {{DATE}}
 ## Highlights
 Brief summary of the most important changes in this release.
 ## New Features
 - **Feature 1:** Description of the new feature
 - **Feature 2:** Description of the new feature
 ## Improvements
 - Improved performance of feature X
 - Updated dependency Y to version Z
 ## Bug Fixes
 - Fixed issue where X would cause Y (#123)
 - Resolved crash when performing Z (#456)
 ## Breaking Changes
 - Changed API endpoint from `/old` to `/new`
 - Removed deprecated method `oldMethod()`
 ## Migration Guide
 ### From v0.9.x to v1.0.0
 1. Update configuration file format
 2. Replace deprecated API calls
 ## Known Issues
 - Issue description (#789)
 ## Contributors
 Thanks to everyone who contributed to this release.
@@ -1,42 +0,0 @@
 # Technical Specification: [Feature Name]
 **Version:** 1.0
 **Date:** {{DATE}}
 **Author:** Your Name
 **Status:** Draft
 ## Overview
 Brief description of what this feature does.
 ## Requirements
 ### Functional Requirements
 1. Requirement 1
 2. Requirement 2
 ### Non-Functional Requirements
 1. Performance requirement
 2. Security requirement
 ## Architecture
 Describe the technical approach.
 ## API Design
 ### Endpoints
 | Method | Path | Description |
 |--------|------|-------------|
 | GET | /api/resource | Get resource |
 ## Testing Strategy
 Describe how this will be tested.
 ## Timeline
 | Phase | Duration | Deliverables |
 |-------|----------|-------------|
 | Phase 1 | 1 week | Core implementation |
@@ -1,71 +0,0 @@
 # Tutorial: [Topic Name]
 **Date:** {{DATE}}
 **Difficulty:** Beginner / Intermediate / Advanced
 **Time:** ~30 minutes
 ## Prerequisites
 - Prerequisite 1
 - Prerequisite 2
 ## What You Will Learn
 - Learning objective 1
 - Learning objective 2
 ## Step 1: Getting Started
 Description of the first step.
 ```bash
 # Example command
 echo "Hello, World!"
 ```
 ## Step 2: Core Concepts
 Explain the main concepts here.
 ### Key Concept A
 Details about concept A.
 ### Key Concept B
 Details about concept B.
 ## Step 3: Building the Feature
 Walk through the implementation.
 ```javascript
 // Example code
 function example() {
    return 'Hello';
 }
 ```
 ## Step 4: Testing
 How to verify everything works.
 ## Common Issues
 ### Issue 1
 **Problem:** Description of the problem.
 **Solution:** How to fix it.
 ### Issue 2
 **Problem:** Description of the problem.
 **Solution:** How to fix it.
 ## Next Steps
 - Suggested follow-up 1
 - Suggested follow-up 2
 ## Resources
 - [Resource 1](https://example.com)
 - [Resource 2](https://example.com)
@@ -1,78 +0,0 @@
 function createWelcomeContent(recentFiles = []) {
    const recentHtml = recentFiles.length
        ? recentFiles.map(f => {
            const name = f.split(/[/\\]/).pop();
            return `<div class="welcome-recent-item" data-path="${f}"><span class="welcome-recent-name">${name}</span><span class="welcome-recent-path">${f}</span></div>`;
        }).join('')
        : '<p class="welcome-muted">No recent files</p>';
    return `
    <div class="welcome-container">
        <div class="welcome-hero">
            <h1 class="welcome-title">MarkdownConverter</h1>
            <p class="welcome-version">Version 4.0.0</p>
            <p class="welcome-subtitle">Professional Markdown Editor & Universal Document Converter</p>
        </div>
        <div class="welcome-grid">
            <div class="welcome-section">
                <h2>Quick Start</h2>
                <div class="welcome-cards">
                    <div class="welcome-card" data-action="new-file">
                        <div class="welcome-card-icon">+</div>
                        <h3>New Document</h3>
                        <p>Create a blank document</p>
                        <kbd>Ctrl+N</kbd>
                    </div>
                    <div class="welcome-card" data-action="open-file">
                        <div class="welcome-card-icon">&#128194;</div>
                        <h3>Open File</h3>
                        <p>Open an existing file</p>
                        <kbd>Ctrl+O</kbd>
                    </div>
                    <div class="welcome-card" data-action="open-template">
                        <div class="welcome-card-icon">&#128203;</div>
                        <h3>From Template</h3>
                        <p>Start from a template</p>
                    </div>
                    <div class="welcome-card" data-action="command-palette">
                        <div class="welcome-card-icon">&#8984;</div>
                        <h3>Command Palette</h3>
                        <p>Search all actions</p>
                        <kbd>Ctrl+Shift+P</kbd>
                    </div>
                </div>
            </div>
            <div class="welcome-section">
                <h2>What's New in v4.0.0</h2>
                <ul class="welcome-features">
                    <li><strong>CodeMirror Editor</strong> — Syntax highlighting, code folding, multiple cursors</li>
                    <li><strong>Sidebar Panels</strong> — File Explorer, Git, Snippets, Templates</li>
                    <li><strong>Command Palette</strong> — Quick access to all actions</li>
                    <li><strong>Code Execution</strong> — Run JS, Python, Bash from code blocks</li>
                    <li><strong>Print Preview</strong> — Full print customization dialog</li>
                    <li><strong>New Formats</strong> — Reveal.js, YAML, JSON, Confluence, and more</li>
                    <li><strong>Spell Checking</strong> — System dictionary with suggestions</li>
                    <li><strong>Markdown Extensions</strong> — Footnotes, admonitions, TOC</li>
                    <li><strong>Image Handling</strong> — Paste and drag-drop images</li>
                    <li><strong>PlantUML</strong> — Diagram rendering in preview</li>
                </ul>
            </div>
            <div class="welcome-section">
                <h2>Recent Files</h2>
                <div class="welcome-recent">${recentHtml}</div>
            </div>
        </div>
        <div class="welcome-footer">
            <label class="welcome-checkbox">
                <input type="checkbox" id="show-welcome-startup" checked>
                Show this tab on startup
            </label>
        </div>
    </div>`;
 }
 module.exports = { createWelcomeContent };
@@ -1,144 +0,0 @@
 /**
 * @jest-environment jsdom
 */
 /**
 * Tests for CommandPalette
 * Tests command registration, filtering, execution, and keyboard navigation
 */
 describe('CommandPalette', () => {
    let CommandPalette;
    beforeEach(() => {
        document.body.innerHTML = `
            <div class="command-palette-overlay hidden" id="command-palette-overlay">
                <div class="command-palette">
                    <input type="text" id="command-palette-input">
                    <div id="command-palette-results"></div>
                </div>
            </div>
        `;
        CommandPalette = require('../src/command-palette').CommandPalette;
    });
    test('starts hidden', () => {
        const palette = new CommandPalette();
        expect(palette.isOpen()).toBe(false);
    });
    test('opens and focuses input', () => {
        const palette = new CommandPalette();
        palette.open();
        expect(palette.isOpen()).toBe(true);
    });
    test('closes', () => {
        const palette = new CommandPalette();
        palette.open();
        palette.close();
        expect(palette.isOpen()).toBe(false);
    });
    test('registers and renders commands', () => {
        const palette = new CommandPalette();
        palette.register('Test Command', 'Ctrl+T', () => {});
        palette.register('Another Command', '', () => {});
        palette.open();
        const items = document.querySelectorAll('.command-item');
        expect(items.length).toBe(2);
    });
    test('filters commands by search', () => {
        const palette = new CommandPalette();
        palette.register('Save File', 'Ctrl+S', () => {});
        palette.register('Open File', 'Ctrl+O', () => {});
        palette.register('Bold Text', 'Ctrl+B', () => {});
        palette.renderResults('file');
        const items = document.querySelectorAll('.command-item');
        expect(items.length).toBe(2);
    });
    test('executes command', () => {
        const palette = new CommandPalette();
        const action = jest.fn();
        palette.register('Test', '', action);
        palette.open();
        palette.executeSelected();
        expect(action).toHaveBeenCalled();
    });
    test('highlights matching text', () => {
        const palette = new CommandPalette();
        const result = palette.highlightMatch('Save File', 'save');
        expect(result).toContain('<strong>');
        expect(result).toContain('Save');
    });
    test('highlightMatch returns original text when no query', () => {
        const palette = new CommandPalette();
        const result = palette.highlightMatch('Save File', '');
        expect(result).toBe('Save File');
    });
    test('filters case-insensitively', () => {
        const palette = new CommandPalette();
        palette.register('Save File', '', () => {});
        palette.register('Open File', '', () => {});
        palette.renderResults('SAVE');
        const items = document.querySelectorAll('.command-item');
        expect(items.length).toBe(1);
    });
    test('shows all commands when query is empty', () => {
        const palette = new CommandPalette();
        palette.register('Cmd1', '', () => {});
        palette.register('Cmd2', '', () => {});
        palette.register('Cmd3', '', () => {});
        palette.renderResults('');
        const items = document.querySelectorAll('.command-item');
        expect(items.length).toBe(3);
    });
    test('displays shortcut when provided', () => {
        const palette = new CommandPalette();
        palette.register('Save File', 'Ctrl+S', () => {});
        palette.open();
        const shortcut = document.querySelector('.command-shortcut');
        expect(shortcut).not.toBeNull();
        expect(shortcut.textContent).toBe('Ctrl+S');
    });
    test('does not display shortcut when empty', () => {
        const palette = new CommandPalette();
        palette.register('Test Command', '', () => {});
        palette.open();
        const shortcut = document.querySelector('.command-shortcut');
        expect(shortcut).toBeNull();
    });
    test('closes on overlay click', () => {
        const palette = new CommandPalette();
        palette.open();
        // Simulate click on the overlay itself
        const event = new Event('click', { bubbles: true });
        Object.defineProperty(event, 'target', { value: palette.overlay });
        palette.overlay.dispatchEvent(event);
        expect(palette.isOpen()).toBe(false);
    });
    test('executeSelected does nothing when no commands', () => {
        const palette = new CommandPalette();
        palette.open();
        // Should not throw
        expect(() => palette.executeSelected()).not.toThrow();
    });
    test('closes after executing command', () => {
        const palette = new CommandPalette();
        palette.register('Test', '', jest.fn());
        palette.open();
        palette.executeSelected();
        expect(palette.isOpen()).toBe(false);
    });
 });
@@ -1,100 +0,0 @@
 /**
 * Tests for Main Process Utilities
 * Tests sanitization, rate limiting, and other main process helpers
 */
 describe('sanitizeErrorMessage', () => {
    const sanitizeErrorMessage = (message) => {
        if (typeof message !== 'string') return String(message);
        return message
            .replace(/[A-Z]:\\[^\s"']+\\([^\s"'\\]+)/gi, '$1')
            .replace(/\/[^\s"']+\/([^\s"'/]+)/g, '$1');
    };
    test('strips Windows absolute paths', () => {
        expect(sanitizeErrorMessage('Error in C:\\Users\\test\\file.js'))
            .toBe('Error in file.js');
    });
    test('strips Unix absolute paths', () => {
        expect(sanitizeErrorMessage('Error in /home/user/project/file.js'))
            .toBe('Error in file.js');
    });
    test('handles non-string input', () => {
        expect(sanitizeErrorMessage(42)).toBe('42');
        expect(sanitizeErrorMessage(null)).toBe('null');
    });
    test('preserves messages without paths', () => {
        expect(sanitizeErrorMessage('Something went wrong'))
            .toBe('Something went wrong');
    });
    test('strips nested Windows paths', () => {
        expect(sanitizeErrorMessage('Cannot read C:\\Users\\admin\\AppData\\Local\\config.json'))
            .toBe('Cannot read config.json');
    });
    test('strips nested Unix paths', () => {
        expect(sanitizeErrorMessage('File not found: /var/log/app/error.log'))
            .toBe('File not found: error.log');
    });
    test('handles undefined input', () => {
        expect(sanitizeErrorMessage(undefined)).toBe('undefined');
    });
 });
 describe('createRateLimiter', () => {
    const createRateLimiter = (minIntervalMs = 2000) => {
        let lastCall = 0;
        return function canProceed() {
            const now = Date.now();
            if (now - lastCall < minIntervalMs) return false;
            lastCall = now;
            return true;
        };
    };
    test('allows first call', () => {
        const limiter = createRateLimiter(1000);
        expect(limiter()).toBe(true);
    });
    test('blocks rapid calls', () => {
        const limiter = createRateLimiter(1000);
        limiter(); // first call
        expect(limiter()).toBe(false); // too soon
    });
    test('allows call after interval', () => {
        jest.useFakeTimers();
        const limiter = createRateLimiter(1000);
        limiter();
        jest.advanceTimersByTime(1001);
        expect(limiter()).toBe(true);
        jest.useRealTimers();
    });
    test('uses default interval of 2000ms', () => {
        jest.useFakeTimers();
        const limiter = createRateLimiter();
        limiter();
        jest.advanceTimersByTime(1999);
        expect(limiter()).toBe(false);
        jest.advanceTimersByTime(2);
        expect(limiter()).toBe(true);
        jest.useRealTimers();
    });
    test('resets after successful call', () => {
        jest.useFakeTimers();
        const limiter = createRateLimiter(500);
        limiter();
        jest.advanceTimersByTime(501);
        limiter(); // resets the timer
        expect(limiter()).toBe(false); // too soon after second call
        jest.useRealTimers();
    });
 });
@@ -1,130 +0,0 @@
 /**
 * Tests for Markdown Extensions
 * Tests TOC generation, admonition parsing, and PlantUML encoding
 */
 describe('Markdown Extensions', () => {
    describe('TOC generation from headings', () => {
        test('extracts all heading levels', () => {
            const html = '<h1>Title</h1><h2>Section 1</h2><h2>Section 2</h2><h3>Subsection</h3>';
            const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
            const toc = [];
            let match;
            while ((match = headingRegex.exec(html)) !== null) {
                toc.push({ level: parseInt(match[1]), text: match[2] });
            }
            expect(toc).toHaveLength(4);
            expect(toc[0]).toEqual({ level: 1, text: 'Title' });
            expect(toc[3]).toEqual({ level: 3, text: 'Subsection' });
        });
        test('handles empty HTML', () => {
            const html = '<p>No headings here</p>';
            const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
            const toc = [];
            let match;
            while ((match = headingRegex.exec(html)) !== null) {
                toc.push({ level: parseInt(match[1]), text: match[2] });
            }
            expect(toc).toHaveLength(0);
        });
        test('handles headings with attributes', () => {
            const html = '<h1 id="title" class="main">Title</h1><h2 id="sec">Section</h2>';
            const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
            const toc = [];
            let match;
            while ((match = headingRegex.exec(html)) !== null) {
                toc.push({ level: parseInt(match[1]), text: match[2] });
            }
            expect(toc).toHaveLength(2);
            expect(toc[0].text).toBe('Title');
        });
    });
    describe('Admonition regex matching', () => {
        test('matches note admonition', () => {
            const src = ':::note\nThis is a note.\n:::\n';
            const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
            expect(match).not.toBeNull();
            expect(match[1]).toBe('note');
            expect(match[2].trim()).toBe('This is a note.');
        });
        test('matches all admonition types', () => {
            const types = ['note', 'warning', 'tip', 'danger', 'info'];
            types.forEach(type => {
                const src = `:::${type}\nContent\n:::\n`;
                const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
                expect(match).not.toBeNull();
                expect(match[1]).toBe(type);
            });
        });
        test('does not match invalid admonition type', () => {
            const src = ':::custom\nContent\n:::\n';
            const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
            expect(match).toBeNull();
        });
        test('captures multiline content', () => {
            const src = ':::warning\nLine 1\nLine 2\nLine 3\n:::\n';
            const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
            expect(match).not.toBeNull();
            expect(match[2]).toContain('Line 1');
            expect(match[2]).toContain('Line 3');
        });
    });
    describe('PlantUML hex encoding', () => {
        const plantumlEncode = (text) => {
            const hex = Array.from(Buffer.from(text, 'utf-8'))
                .map(b => b.toString(16).padStart(2, '0'))
                .join('');
            return '~h' + hex;
        };
        test('encodes simple text', () => {
            const encoded = plantumlEncode('A -> B');
            expect(encoded).toBe('~h41202d3e2042');
        });
        test('encodes empty string', () => {
            expect(plantumlEncode('')).toBe('~h');
        });
        test('encodes special characters', () => {
            const encoded = plantumlEncode('@startuml');
            expect(encoded).toMatch(/^~h[0-9a-f]+$/);
            // '@' is 0x40, 's' is 0x73
            expect(encoded.startsWith('~h40')).toBe(true);
        });
    });
    describe('Slug generation for TOC anchors', () => {
        const slugify = (text) => {
            return text
                .toLowerCase()
                .replace(/[^\w\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim();
        };
        test('converts heading to slug', () => {
            expect(slugify('Hello World')).toBe('hello-world');
        });
        test('removes special characters', () => {
            expect(slugify('What is C++?')).toBe('what-is-c');
        });
        test('collapses multiple dashes', () => {
            expect(slugify('Hello   World')).toBe('hello-world');
        });
        test('handles already lowercase text', () => {
            expect(slugify('simple')).toBe('simple');
        });
    });
 });
@@ -1,175 +0,0 @@
 /**
 * Tests for Preload Script Security
 * Verifies that the IPC bridge is properly configured
 */
 describe('Preload Security', () => {
  describe('Allowed Channels', () => {
    const EXPECTED_SEND_CHANNELS = [
      'save-file',
      'save-current-file',
      'set-current-file',
      'save-recent-files',
      'clear-recent-files',
      'renderer-ready',
      'get-theme',
      'do-print',
      'do-print-with-options',
      'export-with-options',
      'export-spreadsheet',
      'batch-convert',
      'select-folder',
      'universal-convert',
      'universal-convert-batch',
      'image-convert',
      'image-batch-convert',
      'image-resize',
      'image-compress',
      'image-rotate',
      'audio-convert',
      'audio-batch-convert',
      'audio-extract',
      'audio-trim',
      'audio-merge',
      'video-convert',
      'video-batch-convert',
      'video-compress',
      'video-trim',
      'video-frames',
      'video-gif',
      'get-header-footer-settings',
      'save-header-footer-settings',
      'browse-header-footer-logo',
      'save-header-footer-logo',
      'clear-header-footer-logo',
      'get-page-settings',
      'update-page-settings',
      'set-custom-start-page',
      'process-pdf-operation',
      'get-pdf-page-count',
      'select-pdf-folder',
      'open-ascii-generator',
      'open-table-generator',
      'insert-generated-content',
      'save-pasted-image',
      'load-template',
      'list-directory',
      'open-file-path',
      'git-status',
      'git-stage',
      'git-commit',
      'git-log',
      'git-diff',
      'get-snippets',
      'save-snippet',
      'delete-snippet',
      'execute-code',
      'show-pdf-editor-from-toolbar',
      'menu-open',
      'export'
    ];
    const EXPECTED_RECEIVE_CHANNELS = [
      'file-new',
      'file-opened',
      'file-save',
      'get-content-for-save',
      'get-content-for-spreadsheet',
      'recent-files-cleared',
      'toggle-preview',
      'toggle-find',
      'theme-changed',
      'theme-data',
      'undo',
      'redo',
      'adjust-font-size',
      'print-preview',
      'print-preview-styled',
      'show-export-dialog',
      'show-batch-dialog',
      'show-universal-converter-dialog',
      'show-table-generator',
      'show-pdf-editor-dialog',
      'show-image-converter',
      'show-audio-converter',
      'show-video-converter',
      'open-pdf-viewer',
      'conversion-status',
      'conversion-complete',
      'batch-progress',
      'image-conversion-complete',
      'audio-conversion-complete',
      'video-conversion-complete',
      'folder-selected',
      'pdf-folder-selected',
      'header-footer-settings-data',
      'header-footer-logo-selected',
      'header-footer-logo-saved',
      'header-footer-logo-cleared',
      'page-settings-data',
      'pdf-page-count',
      'pdf-operation-complete',
      'pdf-operation-error',
      'pdf-operation-progress',
      'show-ascii-generator-window',
      'show-ascii-generator',
      'show-table-generator-window',
      'open-header-footer-dialog',
      'insert-content',
      'load-template-menu',
      'toggle-command-palette',
      'toggle-sidebar-panel',
      'toggle-bottom-panel'
    ];
    test('should define all expected send channels', () => {
      // This test documents expected channels
      expect(EXPECTED_SEND_CHANNELS.length).toBeGreaterThan(0);
    });
    test('should define all expected receive channels', () => {
      // This test documents expected channels
      expect(EXPECTED_RECEIVE_CHANNELS.length).toBeGreaterThan(0);
    });
  });
  describe('electronAPI Interface', () => {
    test('should expose send method', () => {
      expect(window.electronAPI.send).toBeDefined();
      expect(typeof window.electronAPI.send).toBe('function');
    });
    test('should expose on method', () => {
      expect(window.electronAPI.on).toBeDefined();
      expect(typeof window.electronAPI.on).toBe('function');
    });
    test('should expose once method', () => {
      expect(window.electronAPI.once).toBeDefined();
      expect(typeof window.electronAPI.once).toBe('function');
    });
    test('should expose invoke method', () => {
      expect(window.electronAPI.invoke).toBeDefined();
      expect(typeof window.electronAPI.invoke).toBe('function');
    });
    test('should expose file convenience methods', () => {
      expect(window.electronAPI.file).toBeDefined();
      expect(window.electronAPI.file.save).toBeDefined();
      expect(window.electronAPI.file.saveCurrent).toBeDefined();
      expect(window.electronAPI.file.setCurrent).toBeDefined();
    });
    test('should expose theme convenience methods', () => {
      expect(window.electronAPI.theme).toBeDefined();
      expect(window.electronAPI.theme.get).toBeDefined();
    });
    test('should expose pdf convenience methods', () => {
      expect(window.electronAPI.pdf).toBeDefined();
      expect(window.electronAPI.pdf.processOperation).toBeDefined();
      expect(window.electronAPI.pdf.getPageCount).toBeDefined();
    });
  });
 });
@@ -1,109 +0,0 @@
 /**
 * @jest-environment jsdom
 */
 /**
 * Tests for PrintPreview
 * Tests print dialog options, open/close, and preview rendering
 */
 describe('PrintPreview', () => {
    beforeEach(() => {
        // Mock electron require for executePrint
        jest.mock('electron', () => ({
            ipcRenderer: { send: jest.fn(), invoke: jest.fn() }
        }), { virtual: true });
        document.body.innerHTML = `
            <div class="dialog-overlay hidden" id="print-preview-overlay">
                <button id="print-preview-close"></button>
                <button id="print-cancel"></button>
                <button id="print-execute"></button>
                <select id="print-paper-size"><option value="A4">A4</option><option value="Letter">Letter</option></select>
                <select id="print-orientation"><option value="portrait">Portrait</option><option value="landscape">Landscape</option></select>
                <select id="print-margins"><option value="default">Default</option></select>
                <input type="range" id="print-scale" value="100">
                <span id="print-scale-value">100%</span>
                <input type="checkbox" id="print-headers" checked>
                <input type="checkbox" id="print-background" checked>
                <select id="print-pages"><option value="all">All</option><option value="custom">Custom</option></select>
                <input type="text" id="print-page-range" class="hidden">
                <iframe id="print-preview-frame"></iframe>
            </div>
        `;
    });
    test('getOptions returns default values', () => {
        const { PrintPreview } = require('../src/print-preview');
        const preview = new PrintPreview();
        const options = preview.getOptions();
        expect(options.paperSize).toBe('A4');
        expect(options.orientation).toBe('portrait');
        expect(options.scale).toBe(100);
        expect(options.headers).toBe(true);
        expect(options.background).toBe(true);
        expect(options.pages).toBe('all');
        expect(options.margins).toBe('default');
        expect(options.pageRange).toBe('');
    });
    test('opens and closes', () => {
        const { PrintPreview } = require('../src/print-preview');
        const preview = new PrintPreview();
        preview.open('<p>Test</p>');
        expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(false);
        preview.close();
        expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(true);
    });
    test('updateScaleLabel reflects slider value', () => {
        const { PrintPreview } = require('../src/print-preview');
        const preview = new PrintPreview();
        document.getElementById('print-scale').value = '75';
        preview.updateScaleLabel();
        expect(document.getElementById('print-scale-value').textContent).toBe('75%');
    });
    test('close button closes preview', () => {
        const { PrintPreview } = require('../src/print-preview');
        const preview = new PrintPreview();
        preview.open('<p>Test</p>');
        document.getElementById('print-preview-close').click();
        expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(true);
    });
    test('cancel button closes preview', () => {
        const { PrintPreview } = require('../src/print-preview');
        const preview = new PrintPreview();
        preview.open('<p>Test</p>');
        document.getElementById('print-cancel').click();
        expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(true);
    });
    test('getOptions reflects changed values', () => {
        const { PrintPreview } = require('../src/print-preview');
        const preview = new PrintPreview();
        // Change paper size to Letter
        const paperSelect = document.getElementById('print-paper-size');
        paperSelect.value = 'Letter';
        // Change scale
        document.getElementById('print-scale').value = '50';
        // Uncheck headers
        document.getElementById('print-headers').checked = false;
        const options = preview.getOptions();
        expect(options.paperSize).toBe('Letter');
        expect(options.scale).toBe(50);
        expect(options.headers).toBe(false);
    });
    test('stores last content for refresh', () => {
        const { PrintPreview } = require('../src/print-preview');
        const preview = new PrintPreview();
        preview.open('<p>Hello World</p>');
        expect(preview._lastContent).toBe('<p>Hello World</p>');
    });
 });
@@ -1,100 +0,0 @@
 /**
 * Jest Test Setup
 * Provides mocks and utilities for PanConverter tests
 */
 // Mock window.electronAPI for renderer tests
 global.window = global.window || {};
 global.window.electronAPI = {
  send: jest.fn(),
  on: jest.fn(() => jest.fn()), // Returns cleanup function
  once: jest.fn(),
  invoke: jest.fn(() => Promise.resolve(null)),
  removeAllListeners: jest.fn(),
  file: {
    save: jest.fn(),
    saveCurrent: jest.fn(),
    setCurrent: jest.fn(),
    saveRecent: jest.fn(),
    clearRecent: jest.fn(),
    rendererReady: jest.fn()
  },
  theme: {
    get: jest.fn()
  },
  print: {
    doPrint: jest.fn()
  },
  export: {
    withOptions: jest.fn(),
    spreadsheet: jest.fn()
  },
  batch: {
    convert: jest.fn(),
    selectFolder: jest.fn()
  },
  converter: {
    convert: jest.fn(),
    convertBatch: jest.fn()
  },
  headerFooter: {
    getSettings: jest.fn(),
    saveSettings: jest.fn(),
    browseLogo: jest.fn(),
    saveLogo: jest.fn(),
    clearLogo: jest.fn()
  },
  page: {
    getSettings: jest.fn(),
    updateSettings: jest.fn(),
    setCustomStartPage: jest.fn()
  },
  pdf: {
    processOperation: jest.fn(),
    getPageCount: jest.fn(),
    selectFolder: jest.fn()
  }
 };
 // Mock marked library
 global.window.marked = {
  parse: jest.fn((text) => `<p>${text}</p>`),
  use: jest.fn()
 };
 // Mock DOMPurify
 global.window.DOMPurify = {
  sanitize: jest.fn((html) => html)
 };
 // Mock highlight.js
 global.window.hljs = {
  highlight: jest.fn((code, options) => ({ value: code })),
  highlightAuto: jest.fn((code) => ({ value: code })),
  getLanguage: jest.fn(() => true)
 };
 // Mock localStorage
 const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  removeItem: jest.fn(),
  clear: jest.fn()
 };
 global.localStorage = localStorageMock;
 // Console spy to catch unintended console logs in tests
 const originalConsoleError = console.error;
 console.error = (...args) => {
  // Allow certain expected errors
  const message = args[0]?.toString() || '';
  if (message.includes('Warning:') || message.includes('React')) {
    return;
  }
  originalConsoleError.apply(console, args);
 };
 // Cleanup after each test
 afterEach(() => {
  jest.clearAllMocks();
 });
--- a/Show More
+++ b/Show More