fix: resolve editor, batch conversion, and startup performance issues

- Remove popout preview button (HTML, JS, CSS) - Fix Save/Save As flow for new untitled files - Fix batch conversion menu items (wire show-batch-converter IPC) - Add universal-convert-batch IPC handler for batch file conversion - Lazy-load mermaid, pdfjs-dist, sidebar panels, command palette - Switch highlight.js CSS from CDN to local - Defer CodeMirror language extensions until first use - Add show:false + ready-to-show for faster perceived startup - Install mermaid as local dependency (remove CDN script tag)
fix: resolve lint errors for v4 release
2026-08-03 02:11:07 +05:30 · 2026-03-04 17:44:04 +05:30 · 2026-03-04 16:35:56 +05:30 · 2026-03-04 16:33:38 +05:30 · 2026-03-04 16:33:00 +05:30 · 2026-03-04 16:31:28 +05:30
85 changed files with 17747 additions and 1598 deletions
@@ -1,33 +0,0 @@
 {
  "permissions": {
    "allow": [
      "Bash(git checkout:*)",
      "Bash(npm install)",
      "Bash(npm run build:*)",
      "Bash(rmdir:*)",
      "Bash(powershell:*)",
      "Bash(npx electron-builder:*)",
      "Bash(dir dist)",
      "Bash(git tag:*)",
      "Bash(git push:*)",
      "Bash(gh release create:*)",
      "Bash(gh auth:*)",
      "Bash(gh release delete:*)",
      "Bash(gh release list:*)",
      "Bash(gh release upload:*)",
      "Bash(npm install:*)",
      "Bash(npm uninstall:*)",
      "Bash(git add:*)",
      "Bash(git commit:*)",
      "Bash(npm start)",
      "Read(//h/**)",
      "Bash(cd:*)",
      "Bash(npm run build:win-unsigned:*)",
      "Bash(dir:*)",
      "Bash(git merge:*)",
      "Bash(timeout:*)",
      "Bash(findstr:*)"
    ],
    "deny": []
  }
 }
@@ -1,10 +0,0 @@
 name: New MCP server
 version: 0.0.1
 schema: v1
 mcpServers:
  - name: New MCP server
    command: npx
    args:
      - -y
      - <your-mcp-server>
    env: {}
@@ -15,4 +15,22 @@ 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/
@@ -0,0 +1,11 @@
 {
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "printWidth": 100,
  "endOfLine": "auto"
 }
@@ -1,569 +0,0 @@
 # PanConverter - Claude Development Guide
 ## Project Overview
 **PanConverter** is a cross-platform Markdown editor and converter powered by Pandoc, built with Electron. It provides professional-grade editing capabilities with comprehensive export options.
 **Current Version**: v1.7.1
 **Author**: Amit Haridas (amit.wh@gmail.com)
 **License**: MIT
 **Repository**: https://github.com/amitwh/pan-converter
 ## Architecture & Technology Stack
 ### Core Technologies
 - **Electron** - Cross-platform desktop application framework
 - **Pandoc** - Universal document converter (required system dependency)
 - **ConvertAPI** - Cloud-based file conversion (200+ formats)
 - **marked** - Markdown parsing and rendering
 - **highlight.js** - Syntax highlighting
 - **KaTeX** - Mathematical expression rendering
 - **DOMPurify** - HTML sanitization
 ### Application Structure
 ```
 src/
 ├── main.js            # Electron main process, menu system, IPC handlers
 ├── renderer.js        # TabManager class, multi-file editing, event handling
 ├── index.html         # Application layout with tabbed interface
 ├── styles.css         # Base styling with multi-theme support
 └── styles-modern.css  # Modern glassmorphism UI design system (v1.7.1)
 assets/
 └── icon.png       # Application icon
 package.json       # Dependencies and build configuration
 CLAUDE.md          # Development documentation for AI assistants
 ```
 ## Development Commands
 ### Prerequisites
 ```bash
 # Install Node.js dependencies
 npm install
 # Install Pandoc (required for export functionality)
 # Ubuntu/Debian:
 sudo apt-get install pandoc
 # macOS:
 brew install pandoc
 # Windows: Download from https://pandoc.org/installing.html
 ```
 ### Running the Application
 ```bash
 # Start development server
 npm start
 # Start with debugging
 npm start --enable-logging
 ```
 ### Building & Packaging
 ```bash
 # Generate application icons
 npm run generate-icons
 # Build for current platform
 npm run build
 # Platform-specific builds
 npm run build:win      # Windows
 npm run build:mac      # macOS
 npm run build:linux    # Linux (AppImage, .deb, .snap)
 # Build for all platforms
 npm run dist:all
 ```
 ### Git Branch Management
 ```bash
 # Switch to platform-specific branches
 git checkout linux    # Linux development
 git checkout macos     # macOS development  
 git checkout windows   # Windows development
 git checkout master    # Main development branch
 # Update all branches with latest changes
 git checkout master
 git push origin master
 git checkout linux && git merge master && git push origin linux
 git checkout macos && git merge master && git push origin macos
 git checkout windows && git merge master && git push origin windows
 ```
 ### Release Management
 ```bash
 # Create and push release tag
 git tag v1.2.1 -m "Release message"
 git push origin v1.2.1
 # Create GitHub release with packages
 gh release create v1.2.1 --title "Title" --notes "Release notes" \
  "dist/PanConverter-1.2.1.AppImage" \
  "dist/pan-converter_1.2.1_amd64.deb" \
  "dist/pan-converter_1.2.1_amd64.snap"
 ```
 ## Feature Implementation Guide
 ### v1.7.1 Modern UI Design (Latest)
 #### 🎨 Glassmorphism & Gradient UI
 **Modern Design System** (`src/styles-modern.css`, `src/index.html:7-11`)
 - **Glassmorphism Effects** - Translucent backgrounds with backdrop-filter blur
 - **Animated Gradient Background** - Purple-blue gradient that shifts colors dynamically
 - **CSS Custom Properties** - Centralized theming with CSS variables
 - **Modern Typography** - Inter font family for UI, JetBrains Mono for code
 - **Smooth Animations** - CSS transitions with cubic-bezier easing
 - **Enhanced Hover Effects** - Interactive elements with scale and transform effects
 - **Custom Scrollbars** - Styled scrollbars matching the modern aesthetic
 - **Progress Bars** - Shimmer animations and gradient fills
 **Design Features:**
 - Animated gradient background (15-second color shift loop)
 - Glass-effect tabs with blur and semi-transparency
 - Gradient-based buttons with hover/active states
 - Modern card-based dialogs with rounded corners
 - Enhanced typography with gradient text for headings
 - Ripple-like hover effects on interactive elements
 - Theme variables for consistent colors and spacing
 - Shadow effects with proper depth perception
 **Technical Implementation:**
 - Created comprehensive `styles-modern.css` file (780+ lines)
 - Google Fonts integration (Inter, JetBrains Mono)
 - CSS Grid and Flexbox for modern layouts
 - backdrop-filter for glassmorphism (with fallbacks)
 - CSS animations with @keyframes
 - RGB/RGBA color system with opacity control
 - CSS custom properties for easy theming
 ### v1.7.0 PDF Editor & Universal Converter
 #### 📄 Comprehensive PDF Editor
 **Complete PDF Manipulation Suite** (`src/main.js:1566-2068`, `src/index.html:552-921`, `src/renderer.js:1951-2429`)
 - **Merge PDFs** - Combine multiple PDF files into a single document
 - **Split PDF** - Split PDFs by page ranges, intervals, or file size
 - **Compress PDF** - Reduce PDF file size with optimization
 - **Rotate Pages** - Rotate specific pages or entire documents (90°, 180°, 270°)
 - **Delete Pages** - Remove unwanted pages from PDFs
 - **Reorder Pages** - Rearrange pages in any order
 - **Add Watermark** - Text watermarks with customizable position, size, color, opacity
 - **Password Protection** - Encrypt PDFs with user and owner passwords
 - **Remove Password** - Decrypt password-protected PDFs
 - **Set Permissions** - Control printing, copying, modifying, and other document permissions
 **Technical Implementation:**
 - Uses `pdf-lib` (v1.17.1) for all PDF operations
 - Full async/await implementation for optimal performance
 - Comprehensive error handling and user feedback
 - Progress indicators for long-running operations
 - Page range parsing (e.g., "1-5, 7, 9-12")
 - RGB color conversion for watermarks
 - Support for encrypted PDFs
 **Watermark Features:**
 - Multiple positioning options (center, diagonal, corners, top/bottom)
 - Customizable font size (8-144px)
 - Adjustable opacity (0-100%)
 - Color picker for text color
 - Apply to all pages or custom page ranges
 **Security Features:**
 - 128-bit and 256-bit encryption support
 - User password (required to open PDF)
 - Owner password (required to modify permissions)
 - Granular permission controls:
  - Allow/deny printing (high/low resolution)
  - Allow/deny content modification
  - Allow/deny content copying
  - Allow/deny annotations
  - Allow/deny form filling
  - Allow/deny accessibility features
  - Allow/deny document assembly
  - Allow/deny high-quality printing
 #### 🔄 Universal File Converter
 **Open-Source Multi-Tool Converter** (`src/main.js:446-600`, `src/index.html:257-483`, `src/renderer.js:1372-1940`)
 - **LibreOffice** - Document conversions (DOCX, PDF, ODT, RTF, TXT, HTML, XLSX, PPTX)
 - **ImageMagick** - Image format conversions (JPG, PNG, GIF, TIFF, WebP, SVG, etc.)
 - **FFmpeg** - Video and audio conversions (MP4, AVI, MOV, MP3, WAV, etc.)
 - **Pandoc** - Document markup conversions (Markdown, HTML, LaTeX, EPUB, etc.)
 **Features:**
 - Single file and batch folder conversion
 - Tool-specific advanced options:
  - ImageMagick: Quality, DPI, resize, compression type
  - FFmpeg: Video/audio codecs, bitrate, preset, framerate
  - LibreOffice: Export quality, page range, bookmarks
 - Automatic tool detection and availability checking
 - Recursive folder processing
 - 100% offline and open-source
 - No API keys required
 ### v1.6.1 Bug Fixes
 #### 🐛 File Association Rendering Fix
 **Fixed Double-Click File Loading** (`src/main.js:1364-1379`)
 - Fixed critical issue where files opened via double-click weren't rendering
 - Added proper wait for renderer load state before sending file data
 - Implemented `did-finish-load` event listener to prevent race conditions
 - Files now render correctly when opened from Windows Explorer
 ### v1.6.0 Enhanced Markdown Editor & ConvertAPI Integration
 #### ✨ Complete Markdown Toolbar
 **Additional Formatting Buttons** (`src/index.html:78-98`, `src/renderer.js:596-723`)
 - **Strikethrough** button - Wraps text with `~~strikethrough~~`
 - **Code Block** button - Inserts fenced code blocks with triple backticks
 - **Horizontal Rule** button - Adds section divider with `---`
 - Complete suite of markdown formatting tools now available
 #### 🔍 Fixed Find & Replace
 **Focus and Highlighting Improvements** (`src/renderer.js:725-870`)
 - Fixed focus issue - dialog no longer loses focus while typing
 - Visual highlighting with text selection showing current match
 - Smart auto-scroll to display matches prominently
 - Real-time match counting: "Match X of Y"
 - Replace single match or replace all functionality
 - Enter/Shift+Enter keyboard navigation
 #### 📏 Fixed Line Numbers
 **Line Counting and Synchronization** (`src/renderer.js:337-355`)
 - Fixed bug using `'\\n'` instead of `'\n'` for line splitting
 - Added scroll synchronization between line numbers and editor
 - Line numbers update correctly as you type
 - Smooth scrolling keeps line numbers aligned
 #### ☁️ ConvertAPI Cloud Integration
 **200+ Format Cloud Conversion** (`src/main.js:370-416`, `src/index.html:257-307`, `src/renderer.js:1540-1603`)
 - New **ConvertAPI menu** with cloud-based file conversion
 - Support for 200+ file formats: MD, DOCX, PDF, HTML, JPG, PNG, EPUB, ODT
 - Secure API key storage in localStorage for reuse
 - Real-time conversion status and progress tracking
 - Free tier: 250 conversions per month
 - Professional conversion dialog with format selection
 - Get API key at: https://www.convertapi.com
 **Technical Implementation:**
 - Installed `convertapi` npm package (v1.15.0)
 - IPC handlers for cloud conversion workflow
 - Error handling and user feedback dialogs
 - Async/await pattern for conversion operations
 ### v1.5.0 Enhanced Features & Open Source Compatibility
 #### 🔧 Export Function Fixes & Optional Advanced Options
 **Export Dialog Enhancement** (`src/index.html:125-133`, `src/renderer.js:960-985`)
 - Fixed export function issues after advanced export options integration
 - Added optional advanced export options via checkbox toggle (unchecked by default)
 - Basic export options always visible, advanced options hidden until enabled
 - Clean UI separation between simple and advanced export workflows
 #### 🏗️ Open Source Compatibility & Dependency Removal
 **Removed Proprietary Dependencies** (`src/main.js:430-450`, `package.json:32-37`)
 - Removed bundled Pandoc binaries - now requires system-installed Pandoc
 - Replaced proprietary XLSX dependency with open-source CSV export
 - Removed non-essential bundled binaries to ensure open-source compatibility
 - Updated export functions to use system Pandoc installation
 #### ✨ Advanced User Experience Features
 **Auto-Save System** (`src/renderer.js:445-484`)
 - Automatic saving every 30 seconds with visual indicators
 - Smooth slide-in animation for auto-save notifications
 - Prevents data loss during extended editing sessions
 - Integrated with file opening and tab creation workflows
 **Enhanced Document Statistics** (`src/renderer.js:385-444`)
 - Comprehensive statistics: words, characters, lines, paragraphs, sentences
 - Estimated reading time calculation (200 words per minute)
 - Real-time updates as user types
 - Professional presentation in status bar
 **Recent Files Management** (`src/main.js:69-114`, `src/renderer.js:487-512`)
 - Recent files menu with last 10 opened files
 - Persistent storage via localStorage and user data directory
 - Menu integration with File > Recent Files submenu
 - Clear recent files functionality with menu rebuild
 **Mathematical Expression Support** (`src/renderer.js:1099-1130`, `src/renderer.js:292-306`)
 - KaTeX integration for rendering mathematical expressions
 - Support for multiple delimiters: $$, $, \\[\\], \\(\\)
 - Real-time math rendering in preview pane
 - Fallback handling for missing KaTeX library
 ### v1.4.0 Advanced Export & Batch Processing
 #### 🔧 Fixed File Association Support
 **File Loading Fix** (`src/main.js:385-390`, `src/renderer.js:485-486`)
 - Fixed timing issue with file association loading
 - Added proper `renderer-ready` event to ensure TabManager is initialized
 - Files now open correctly when double-clicked or opened via right-click menu
 - Command-line file arguments are properly handled on startup
 #### 🎛️ Advanced Export Options Dialog
 **Template & Metadata Support** (`src/main.js:247-357`, `src/index.html:117-212`)
 - Comprehensive export options dialog with professional UI
 - Template selection (default or custom template files)
 - Metadata fields (title, author, date, subject) with dynamic field addition
 - Document options: Table of Contents, section numbering, citations
 - PDF-specific options: Engine selection (XeLaTeX, PDFLaTeX, LuaLaTeX), custom margins
 - Bibliography support: .bib, .yaml, .json files with CSL styling
 - All export formats now use enhanced options dialog
 #### 📁 Batch File Conversion System
 **Multi-File Processing** (`src/main.js:179-186`, `src/main.js:559-690`)
 - New "Batch" menu for converting entire folders
 - Recursive folder processing with progress tracking
 - Support for all export formats with advanced options
 - Real-time progress bar and file-by-file status updates
 - Maintains folder structure in output directory
 - Error handling with completion statistics
 #### 🎨 Enhanced UI Components
 **Dialog System** (`src/styles.css:838-1361`)
 - Professional modal dialogs with backdrop and animations
 - Theme-aware styling for all new components
 - Responsive layouts with proper accessibility
 - Form validation and user feedback systems
 - Progress indicators for long-running operations
 ### v1.3.x Tabbed Interface & Enhanced Features
 #### 🗂️ Tabbed Multi-File Support (v1.3.0)
 **TabManager Class** (`src/renderer.js`)
 - Complete tab management system for multiple files
 - Tab switching, creation, and closure
 - State preservation per tab (content, cursor position, scroll)
 - File path tracking for each tab
 - Keyboard shortcuts: `Ctrl/Cmd+T` (new tab), `Ctrl/Cmd+W` (close tab)
 #### 🎯 Enhanced PDF Export (v1.3.0)
 **Multi-Engine Fallback System** (`src/main.js:239-280`)
 - Primary: XeLaTeX with proper margins
 - Fallback 1: PDFLaTeX
 - Fallback 2: wkhtmltopdf
 - Automatic engine detection and switching
 #### 📁 File Association Support (v1.3.1)
 **OS Integration** (`src/main.js:452-498`, `package.json:50-65`)
 - Double-click .md files to open in PanConverter
 - Command-line argument handling
 - Pending file queue for startup loading
 #### 🎨 Typography & Spacing (v1.3.2-1.3.3)
 **Preview Enhancement** (`src/styles.css`)
 - Restored ideal text spacing from v1.0
 - Font sizes increased to 15px for better readability
 - Comprehensive selector coverage for legacy and new containers
 - Theme-aware typography for all content types
 ### v1.2.1 Comprehensive Editor Enhancements
 #### ✨ Advanced Editor Features
 **Find & Replace System** (`src/renderer.js:200-350`)
 - Dialog-based interface with match highlighting
 - Forward/backward navigation through matches
 - Replace single or replace all functionality
 - Real-time match counting and status display
 - Escape key closes dialog
 **Line Numbers** (`src/renderer.js:450-500`, `src/styles.css:517-598`)
 - Toggle-able line numbers with toolbar button
 - Synchronized scrolling with editor content
 - Theme-aware styling for all supported themes
 - Dynamic line number generation based on content
 **Undo/Redo System** (`src/renderer.js:100-150`)
 - Stack-based state management for editor history
 - Keyboard shortcuts: `Ctrl/Cmd+Z` (undo), `Ctrl/Cmd+Shift+Z` (redo)
 - Intelligent state saving on text changes
 - Memory-efficient history management
 **Smart Auto-Indentation** (`src/renderer.js:350-400`)
 - Automatic list continuation on Enter key
 - Proper indentation handling for nested lists
 - Support for ordered and unordered lists
 - Intelligent whitespace management
 **Enhanced Keyboard Shortcuts** (`src/renderer.js:400-450`)
 - `Tab`/`Shift+Tab` for line indentation/outdentation
 - `Enter` for auto-continuing lists
 - `Ctrl/Cmd+F` for find & replace dialog
 - `Escape` for closing dialogs
 **Word/Character Count** (`src/renderer.js:500-530`)
 - Live counting displayed in status bar
 - Updates automatically as content changes
 - Word and character statistics
 #### 📤 Export & Conversion Features
 **PowerPoint Export** (`src/main.js:330-350`)
 - Convert markdown to PPTX presentations
 - Automatic slide-level formatting (`--slide-level=2`)
 - Smart presentation structure handling
 **Spreadsheet Export** (`src/main.js:370-457`)
 - Export markdown tables to Excel (XLSX/XLS) and ODS formats
 - Multi-table support with separate worksheets
 - Automatic table detection and parsing
 - Error handling for files without tables
 **Document Import** (`src/main.js:280-315`)
 - Import DOCX, ODT, RTF, HTML, PDF, PPTX, ODP files
 - Automatic conversion to markdown format
 - File dialog with appropriate filters
 - Success notifications and error handling
 **Table Creation Helper** (`src/renderer.js:600-650`)
 - Built-in table generator with row/column specification
 - Automatic markdown table formatting
 - Proper header separation and alignment
 #### 🎨 Interface & Theming
 **Multi-Theme Support** (`src/styles.css:214-598`)
 - Light, Dark, Solarized, Monokai, GitHub themes
 - Complete theming for all UI components
 - Theme-aware styling for new features (find dialog, line numbers)
 - Persistent theme selection with local storage
 **Enhanced UI Components** (`src/index.html:94-108`)
 - Find & replace dialog with modern styling
 - Toolbar buttons for all new features
 - Status bar with live statistics
 - Responsive layout with proper spacing
 ## File Structure & Key Components
 ### Main Process (`src/main.js`)
 - **Menu System**: Comprehensive menu with file operations, editing, conversion, view options, batch processing
 - **IPC Handlers**: Communication between main and renderer processes
 - **File Operations**: Open, save, import/export functionality with file association support
 - **Export System**: Advanced export with templates, metadata, and Pandoc integration
 - **Batch Processing**: Multi-file conversion with progress tracking and error handling
 - **Theme Management**: Persistent theme storage and application
 - **Spreadsheet Export**: Table extraction and XLSX generation
 - **About Dialog**: Application information and feature list
 ### Renderer Process (`src/renderer.js`)
 - **Editor Initialization**: CodeMirror-like functionality with custom implementation
 - **TabManager System**: Multi-file editing with state management
 - **Find & Replace Engine**: Search algorithms with regex support
 - **Undo/Redo Manager**: History stack management
 - **Auto-indentation Logic**: Smart list continuation
 - **Live Preview**: Real-time markdown rendering with DOMPurify
 - **Export Dialog Management**: Advanced options collection and validation
 - **Batch Conversion Interface**: Folder selection, progress tracking, and user feedback
 - **Event Handling**: Keyboard shortcuts and UI interactions
 - **Statistics Tracking**: Word/character counting
 ### Styling (`src/styles.css`)
 - **Base Styles**: Application layout and typography
 - **Component Styles**: Toolbar, editor, preview, dialogs
 - **Theme Implementations**: Complete styling for all themes
 - **Responsive Design**: Flexible layouts and proper spacing
 - **Animation Support**: Smooth transitions and hover effects
 ### HTML Structure (`src/index.html`)
 - **Toolbar**: Feature buttons with SVG icons
 - **Tab Bar**: Multi-file navigation with close buttons
 - **Find Dialog**: Search and replace interface
 - **Export Options Dialog**: Advanced export configuration with templates and metadata
 - **Batch Conversion Dialog**: Folder selection and conversion progress
 - **Editor Container**: Line numbers and text editor with tab content management
 - **Preview Pane**: Rendered markdown display
 - **Status Bar**: Statistics and application status
 ## Testing & Quality Assurance
 ### Manual Testing Checklist
 - [ ] All keyboard shortcuts work correctly
 - [ ] Find & replace functions properly with edge cases
 - [ ] Line numbers sync correctly with content
 - [ ] Undo/redo preserves cursor position
 - [ ] Auto-indentation works with various list types
 - [ ] File association loading (double-click .md files)
 - [ ] Export options dialog with templates and metadata
 - [ ] Batch conversion with progress tracking
 - [ ] All themes render correctly for new components
 - [ ] Export functions work with various document formats
 - [ ] Table creation and export functionality
 - [ ] Cross-platform compatibility
 ### Known Issues & Limitations
 - AppImage may require `--no-sandbox` flag on some Linux systems
 - Large files (>1MB) may cause performance issues
 - Windows/Mac builds require platform-specific environments
 - Pandoc must be installed separately for export functionality
 ## Deployment & Distribution
 ### Release Packages
 - **Linux AppImage**: Universal Linux package (self-contained)
 - **Debian Package**: `.deb` for Ubuntu/Debian systems
 - **Snap Package**: Universal Linux package via Snap Store
 - **Future**: Windows `.exe` and macOS `.dmg` packages
 ### Release Process
 1. Update version in `package.json`, `src/main.js`, and `README.md`
 2. Commit changes and push to all platform branches
 3. Build platform-specific packages
 4. Create Git tag and GitHub release
 5. Upload packages to GitHub release
 6. Update documentation and announce release
 ## Contributing Guidelines
 ### Code Style
 - Use consistent indentation (2 spaces)
 - Follow JavaScript ES6+ standards
 - Comment complex functionality
 - Maintain separation between main and renderer processes
 - Use descriptive variable and function names
 ### Adding New Features
 1. Plan feature implementation and UI integration
 2. Update relevant files (main.js, renderer.js, styles.css)
 3. Test across all supported themes
 4. Update documentation and README
 5. Test on multiple platforms if possible
 6. Submit pull request with detailed description
 ### Bug Reporting
 - Include steps to reproduce
 - Specify platform and version information
 - Attach relevant screenshots or error logs
 - Check existing issues before creating new ones
 ## Future Roadmap
 ### Planned Features
 - [ ] Collaborative editing capabilities
 - [ ] Plugin system for extensions
 - [ ] Advanced markdown extensions (math, diagrams)
 - [ ] Cloud synchronization options
 - [ ] Mobile companion app
 - [ ] Advanced export templates
 - [ ] Spell check and grammar checking
 - [ ] Version control integration
 ### Technical Improvements
 - [ ] Performance optimization for large files
 - [ ] Memory usage optimization
 - [ ] Startup time improvements
 - [ ] Better error handling and user feedback
 - [ ] Automated testing suite
 - [ ] Continuous integration/deployment
 ---
 **Last Updated**: October 11, 2025
 **Claude Assistant**: Development completed for v1.7.1 with modern glassmorphism UI design featuring animated gradient backgrounds, translucent glass effects, smooth animations, enhanced typography with Inter and JetBrains Mono fonts, and comprehensive CSS custom properties for consistent theming.
@@ -1,95 +1,12 @@
-# Push Instructions for Pan Converter
+# Test Double-Click File Opening
-## Prerequisites
+This is a test file to verify double-click functionality.
 1. Create a new repository on GitHub: https://github.com/new
   - Repository name: `pan-converter`
   - Keep it empty (no README, .gitignore, or license)
   - Make it public or private as desired
-2. Set up authentication:
+## Features to Test
-   - **Option A - SSH Key** (Recommended):
+- File should load automatically
-     ```bash
+- Content should display in editor
-     # Check if you have SSH key
+- Tab should show filename
-     ls -la ~/.ssh/id_rsa.pub
+- Preview should render markdown
     # If not, generate one:
     ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
     # Add to GitHub: Settings > SSH and GPG keys > New SSH key
     cat ~/.ssh/id_rsa.pub
     ```
   - **Option B - Personal Access Token**:
     - Go to GitHub Settings > Developer settings > Personal access tokens
     - Generate new token with 'repo' scope
     - Save the token securely
-## Push Commands
+**This text should be bold**
-
+*This text should be italic*
 ### Using SSH (Recommended)
 ```bash
 # Set SSH remote
 git remote set-url origin git@github.com:amitwh/pan-converter.git
 # Push all branches
 git push -u origin master
 git push origin linux
 git push origin macos
 git push origin windows
 ```
 ### Using HTTPS with Token
 ```bash
 # Set HTTPS remote
 git remote set-url origin https://github.com/amitwh/pan-converter.git
 # Push all branches (you'll be prompted for username and token)
 git push -u origin master
 git push origin linux
 git push origin macos
 git push origin windows
 # When prompted:
 # Username: amitwh
 # Password: [paste your Personal Access Token]
 ```
 ### Using GitHub CLI (if installed)
 ```bash
 # Login to GitHub CLI
 gh auth login
 # Create repo and push
 gh repo create pan-converter --public --source=. --remote=origin --push
 ```
 ## Automated Script
 ```bash
 # Run the provided script
 ./push-to-github.sh
 ```
 ## Verify Success
 After pushing, verify at: https://github.com/amitwh/pan-converter
 You should see:
 - 4 branches (master, linux, macos, windows)
 - All project files
 - Complete commit history
 ## Troubleshooting
 ### Authentication Failed
 - For SSH: Ensure your SSH key is added to GitHub
 - For HTTPS: Use Personal Access Token, not password
 - Check token has 'repo' scope
 ### Repository Not Found
 - Ensure repository exists on GitHub
 - Check spelling: `pan-converter`
 - Verify you're logged into the correct GitHub account
 ### Permission Denied
 - Check repository ownership
 - Ensure you have write access
 - Verify authentication method is correct
@@ -1,160 +1,156 @@
-# PanConverter
+# MarkdownConverter
-A cross-platform Markdown editor and converter powered by Pandoc.
+A powerful cross-platform Markdown editor and document converter powered by Pandoc, built with Electron. 100% open-source with no proprietary dependencies.
 ![PanConverter](assets/icon.png)
 ## Features
-### ✨ Advanced Markdown Editor
+### Markdown Editor
- 🗂️ **Tabbed Interface** - Work with multiple files simultaneously in separate tabs
+<img width="1920" height="1032" alt="image" src="https://github.com/user-attachments/assets/5f53ba94-7663-47c3-b12b-b7b8bd2645aa" />
- 📝 **Rich Text Editor** - Full-featured editor with syntax highlighting and comprehensive toolbar
+- **Multi-tab editing** - Work on multiple files simultaneously
- 🔍 **Find & Replace** - Powerful search and replace with match highlighting and navigation
+- **Live preview** - Real-time markdown rendering with syntax highlighting
- 🔢 **Line Numbers** - Toggle line numbers for easier code editing and navigation
+- **Dynamic splitter** - Drag to resize editor and preview panes
- ↩️ **Smart Auto-Indentation** - Automatic list continuation and intelligent indentation
+- **25+ themes** - Light and dark themes including Atom One Light, Dracula, Nord, Sepia, and more
- ⏪ **Undo/Redo** - Full undo/redo support with keyboard shortcuts
+- **Find & Replace** - Search and replace with regex support
- ⌨️ **Advanced Shortcuts** - Tab indentation, line selection, and smart text formatting
+- **Line numbers** - Toggle line numbers in the editor
- 📂 **File Association Support** - Open markdown files directly from file manager
+- **Auto-save** - Automatic saving every 30 seconds
 - **Math support** - KaTeX integration for mathematical expressions
-### 🎨 Themes & Interface
+### PDF Viewer & Editor
- 👁️ **Live Preview** - See your markdown rendered in real-time with synchronized scrolling
+<img width="1920" height="1032" alt="image" src="https://github.com/user-attachments/assets/f10f62be-af3d-496e-81df-37ab4f91abfd" />
 - 🎨 **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)
-### 📤 Export & Conversion
+- **Built-in PDF viewer** - Open and view PDF files directly in the app
- 📄 **Enhanced PDF Export** - Robust PDF generation with multiple LaTeX engine fallbacks (XeLaTeX, PDFLaTeX, wkhtmltopdf)
+- **Page navigation** - Navigate pages with keyboard or buttons
- 📄 **Document Export** - Convert to HTML, DOCX, LaTeX, RTF, ODT, EPUB, PowerPoint (PPTX), and OpenDocument Presentation (ODP)
+- **Zoom controls** - Zoom in/out, fit to width, fit to page
- 📊 **Spreadsheet Export** - Export markdown tables to CSV format for compatibility with any spreadsheet application
+- **Rotation** - Rotate pages left or right
- 📥 **Document Import** - Import DOCX, ODT, RTF, HTML, PDF, and presentation files to markdown
+- **PDF Editor tools**:
- 📋 **Table Creation Helper** - Built-in table generator for easy markdown table creation
+  - Merge multiple PDFs
  - Split PDFs by page range
  - Compress PDFs
  - Rotate pages
  - Delete pages
  - Reorder pages
  - Add watermarks
  - Password protection
  - Remove passwords
  - Set permissions
-### 🖥️ Platform Support
+### Export Options
- **Cross-Platform** - Works seamlessly on Windows, macOS, and Linux
+- **PDF** - Export to PDF with customizable page sizes and orientation
 - **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
- [Pandoc](https://pandoc.org/installing.html) must be installed for export functionality
+- [Node.js](https://nodejs.org/) (v16 or later)
-  - **Ubuntu/Debian**: `sudo apt-get install pandoc`
+- [Pandoc](https://pandoc.org/installing.html) (required for export functionality)
  - **macOS**: `brew install pandoc`
  - **Windows**: Download installer from Pandoc website
-### PDF Export Requirements
+### Install Dependencies
 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
 ```
-## Usage
+### Build for Distribution
 ```bash
 # Windows
 npm run build:win
-### Basic Workflow
+# macOS
-1. **Write** - Use the editor to write your Markdown content
+npm run build:mac
 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
-### Export Options
+# Linux
- **Documents**: HTML, PDF, DOCX, LaTeX, RTF, ODT, EPUB
+npm run build:linux
- **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
-### File Operations
+| Action | Shortcut |
- `Ctrl/Cmd + N` - New file/tab
+|--------|----------|
- `Ctrl/Cmd + T` - New tab
+| New File | Ctrl+N |
- `Ctrl/Cmd + W` - Close current tab
+| Open File | Ctrl+O |
- `Ctrl/Cmd + Tab` - Switch to next tab
+| Open PDF | Ctrl+Shift+O |
- `Ctrl/Cmd + O` - Open file
+| Save | Ctrl+S |
- `Ctrl/Cmd + S` - Save file
+| Save As | Ctrl+Shift+S |
- `Ctrl/Cmd + Shift + S` - Save as
+| Export | Ctrl+E |
- `Ctrl/Cmd + I` - Import document
+| Print | Ctrl+P |
 | 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+- |
-### Editor Features
+## Themes
 - `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
-### View & Navigation
+### Light Themes
- `Ctrl/Cmd + P` - Toggle preview
+- Atom One Light (Default)
- `Ctrl/Cmd + Enter` - Toggle preview (alternative)
+- GitHub Light
- `Escape` - Close find dialog
+- Light
 - Solarized Light
 - Gruvbox Light
 - Ayu Light
 - Sepia
 - Paper
 - Rose Pine Dawn
 - Concrete Light
-## Building
+### Dark Themes
 - Dark
 - One Dark
 - Dracula
 - Nord
 - Monokai
 - Material
 - Gruvbox Dark
 - Tokyo Night
 - Palenight
 - Ayu Dark
 - Ayu Mirage
 - Oceanic Next
 - Cobalt2
 - Concrete Dark
 - Concrete Warm
-```bash
+## PDF Viewer
 # Install dependencies
 npm install
-# Generate icons
+Open PDF files directly in MarkdownConverter:
-npm run generate-icons
+- **File > Open PDF** or **Ctrl+Shift+O**
 - 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
-# Build for current platform
+## Open Source
 npm run build
-# Build for specific platform
+MarkdownConverter is 100% open-source. All dependencies are permissively licensed:
-npm run build:win    # Windows
+- **Electron** - MIT License
-npm run build:mac    # macOS  
+- **pdf-lib** - MIT License
-npm run build:linux  # Linux (generates .deb, .AppImage, and .snap)
+- **pdfjs-dist** - Apache 2.0 License
-
+- **marked** - MIT License
-# Build for all platforms
+- **highlight.js** - BSD 3-Clause License
-npm run dist:all
+- **dompurify** - Apache 2.0/MIT License
-```
+- **docx** - MIT License
-
+- **xlsx** - Apache 2.0 License (SheetJS Community Edition)
 ## Version History
 - **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
@@ -162,13 +158,8 @@ MIT License - see LICENSE file for details.
 ## Author
-**Amit Haridas** - [amit.wh@gmail.com](mailto:amit.wh@gmail.com)
+Amit Haridas (amit.wh@gmail.com)
-## Acknowledgments
+## Version
- Built with [Electron](https://www.electronjs.org/)
+v3.0.0
 - 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)
@@ -0,0 +1,217 @@
 # 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
@@ -1,8 +0,0 @@
 <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>
@@ -0,0 +1,111 @@
 /**
 * 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'
    }
  }
 ];
@@ -0,0 +1,61 @@
 /**
 * 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,13 +1,20 @@
 {
-  "name": "pan-converter",
+  "name": "markdown-converter",
-  "version": "1.7.1",
+  "version": "4.0.0",
-  "description": "Cross-platform Markdown editor and converter using Pandoc",
+  "description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
  "main": "src/main.js",
  "scripts": {
    "start": "electron .",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
    "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": "cross-env CSC_LINK=code-signing-cert.pfx CSC_KEY_PASSWORD=PanConverter2024! electron-builder --win",
+    "build:win": "electron-builder --win",
    "build:win-signed": "cross-env CSC_LINK=code-signing-cert.pfx CSC_KEY_PASSWORD=%CSC_KEY_PASSWORD% electron-builder --win",
    "build:win-unsigned": "cross-env CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --win",
    "build:mac": "electron-builder --mac",
    "build:linux": "electron-builder --linux",
@@ -19,29 +26,69 @@
    "markdown",
    "pandoc",
    "converter",
-    "editor"
+    "editor",
    "pdf",
    "audio",
    "video",
    "image"
  ],
-  "author": "Amit Haridas <amit.wh@gmail.com>",
+  "author": "ConcreteInfo <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",
-    "dompurify": "^3.2.6",
+    "core-util-is": "^1.0.3",
    "docx": "^9.6.0",
    "docx4js": "^3.3.0",
    "dompurify": "^3.3.1",
    "electron-store": "^10.1.0",
    "highlight.js": "^11.11.1",
-    "marked": "^16.2.1",
+    "html2pdf.js": "^0.14.0",
    "marked": "^17.0.3",
    "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.17.2",
    "pizzip": "^3.2.0",
    "simple-git": "^3.32.3",
    "tslib": "^2.8.1",
    "xlsx": "^0.18.5"
  },
  "build": {
-    "appId": "com.panconverter.app",
+    "appId": "com.concreteinfo.markdownconverter",
-    "productName": "PanConverter",
+    "productName": "MarkdownConverter",
    "directories": {
      "output": "dist"
    },
@@ -67,10 +114,18 @@
        "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": [
@@ -104,7 +159,7 @@
      "displayLanguageSelector": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
-      "shortcutName": "PanConverter",
+      "shortcutName": "MarkdownConverter",
      "runAfterFinish": true,
      "menuCategory": "Productivity",
      "license": "LICENSE",
@@ -117,16 +172,29 @@
      "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": "Markdown editor and converter using Pandoc",
+      "description": "Professional Markdown editor and universal file converter",
-      "maintainer": "Amit Haridas <amit.wh@gmail.com>"
+      "maintainer": "ConcreteInfo <amit.wh@gmail.com>"
    },
    "rpm": {
      "depends": [
        "pandoc",
        "ffmpeg",
        "ImageMagick",
        "libreoffice-core"
      ]
    }
  }
 }
@@ -1,43 +1,82 @@
 /**
 * Icon Generator for MarkdownConverter
 * Generates all required icon sizes from NewIcon.jpg
 */
 const sharp = require('sharp');
 const fs = require('fs');
 const path = require('path');
-const sizes = {
+// Source image
-    'icon.png': 512,
+const sourceImage = path.join(__dirname, '..', 'assets', 'docico1.png');
-    'icon@2x.png': 1024,
+const assetsDir = path.join(__dirname, '..', 'assets');
    'icon.ico': 256,
    'icon.icns': 512
 };
-const svgPath = path.join(__dirname, '..', 'assets', 'icon.svg');
+// Icon sizes needed for different platforms
-const svgBuffer = fs.readFileSync(svgPath);
+const iconSizes = [16, 24, 32, 48, 64, 128, 256, 512, 1024];
 async function generateIcons() {
-    for (const [filename, size] of Object.entries(sizes)) {
+  console.log('Generating icons from docico1.png...');
-        const outputPath = path.join(__dirname, '..', 'assets', filename);
+
-        
+  // Check if source exists
-        if (filename.endsWith('.png')) {
+  if (!fs.existsSync(sourceImage)) {
-            await sharp(svgBuffer)
+    console.error('Source image not found:', sourceImage);
-                .resize(size, size)
+    process.exit(1);
-                .png()
+  }
-                .toFile(outputPath);
+
-            console.log(`Generated ${filename}`);
+  try {
-        } else if (filename.endsWith('.ico')) {
+    // Generate main icon.png (512x512)
-            // For ICO, we'll just use the PNG version
+    await sharp(sourceImage)
-            await sharp(svgBuffer)
+      .resize(512, 512, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
-                .resize(size, size)
+      .png()
-                .png()
+      .toFile(path.join(assetsDir, 'icon.png'));
-                .toFile(outputPath.replace('.ico', '.png'));
+    console.log('Generated icon.png (512x512)');
-            console.log(`Generated ${filename.replace('.ico', '.png')} (use png2ico to convert)`);
+
-        } else if (filename.endsWith('.icns')) {
+    // Generate icon@2x.png (1024x1024)
-            // For ICNS, we'll just use the PNG version
+    await sharp(sourceImage)
-            await sharp(svgBuffer)
+      .resize(1024, 1024, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
-                .resize(size, size)
+      .png()
-                .png()
+      .toFile(path.join(assetsDir, 'icon@2x.png'));
-                .toFile(outputPath.replace('.icns', '.png'));
+    console.log('Generated icon@2x.png (1024x1024)');
-            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().catch(console.error);
+generateIcons();
@@ -0,0 +1,601 @@
 <!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>
@@ -0,0 +1,109 @@
 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 };
@@ -0,0 +1,123 @@
 // 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 };
@@ -0,0 +1,75 @@
 /* Local Font Definitions for MarkdownConverter */
 /* Inter Font Family */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../assets/fonts/Inter-Light.woff2') format('woff2');
 }
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/Inter-Regular.woff2') format('woff2');
 }
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/Inter-Medium.woff2') format('woff2');
 }
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');
 }
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/Inter-Bold.woff2') format('woff2');
 }
 /* JetBrains Mono Font Family - For code, markdown editor, and ASCII art */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
 }
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
 }
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
 }
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
 }
@@ -0,0 +1,422 @@
 /**
 * 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);
@@ -0,0 +1,139 @@
 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 };
@@ -0,0 +1,49 @@
 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 };
@@ -0,0 +1,70 @@
 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 };
@@ -0,0 +1,84 @@
 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 };
@@ -0,0 +1,50 @@
 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 };
@@ -0,0 +1,71 @@
 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 };
@@ -0,0 +1,34 @@
 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 };
@@ -0,0 +1,969 @@
 /**
 * 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;
 }
@@ -0,0 +1,268 @@
 /* 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;
 }
@@ -0,0 +1,24 @@
 .welcome-container { padding: 40px; max-width: 900px; margin: 0 auto; }
 .welcome-hero { text-align: center; margin-bottom: 40px; }
 .welcome-title { font-size: 32px; font-weight: 700; color: var(--gray-800, #1f2937); }
 .welcome-version { font-size: 14px; color: var(--primary-dark, #5661b3); margin-top: 4px; font-weight: 500; }
 .welcome-subtitle { font-size: 16px; color: var(--gray-500, #6b7280); margin-top: 8px; }
 .welcome-grid { display: grid; gap: 32px; }
 .welcome-section h2 { font-size: 18px; margin-bottom: 16px; color: var(--gray-700, #374151); }
 .welcome-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
 .welcome-card { padding: 20px; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px; cursor: pointer; text-align: center; transition: all 0.2s; }
 .welcome-card:hover { border-color: var(--primary-dark, #5661b3); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
 .welcome-card-icon { font-size: 28px; margin-bottom: 8px; }
 .welcome-card h3 { font-size: 15px; margin-bottom: 4px; }
 .welcome-card p { font-size: 13px; color: var(--gray-500); }
 .welcome-card kbd { display: inline-block; margin-top: 8px; padding: 2px 8px; background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 4px; font-size: 12px; font-family: 'JetBrains Mono', monospace; }
 .welcome-features { list-style: none; padding: 0; }
 .welcome-features li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
 .welcome-features strong { color: var(--primary-dark, #5661b3); }
 .welcome-recent-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; }
 .welcome-recent-item:hover { background: var(--gray-100); }
 .welcome-recent-name { font-size: 14px; font-weight: 500; display: block; }
 .welcome-recent-path { font-size: 12px; color: var(--gray-500); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
 .welcome-muted { color: var(--gray-400); font-size: 14px; }
 .welcome-footer { margin-top: 32px; text-align: center; }
 .welcome-checkbox { font-size: 13px; color: var(--gray-500); cursor: pointer; }
@@ -0,0 +1,545 @@
 <!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>
@@ -0,0 +1,90 @@
 # 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 |
@@ -0,0 +1,20 @@
 ---
 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.
@@ -0,0 +1,20 @@
 # Changelog
 ## [Unreleased]
 ### Added
 - New feature
 ### Changed
 - Updated feature
 ### Fixed
 - Bug fix
 ### Removed
 - Removed feature
 ## [1.0.0] - {{DATE}}
 ### Added
 - Initial release
@@ -0,0 +1,59 @@
 # 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].
@@ -0,0 +1,26 @@
 # 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
@@ -0,0 +1,54 @@
 # 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
@@ -0,0 +1,38 @@
 # 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
@@ -0,0 +1,42 @@
 # 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.
@@ -0,0 +1,42 @@
 # 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 |
@@ -0,0 +1,71 @@
 # 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)
@@ -0,0 +1,78 @@
 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 };
@@ -0,0 +1,743 @@
 /**
 * Word Template Exporter
 * Loads word_template.docx, preserves first 2 pages (cover + TOC),
 * and adds markdown content starting from page 3 using template styles
 */
 const fs = require('fs');
 const path = require('path');
 const PizZip = require('pizzip');
 const Docx = require('docx4js').default;
 class WordTemplateExporter {
    constructor(templatePath, startPage = 3, pageSettings = null) {
        this.templatePath = templatePath || path.join(__dirname, '../word_template.docx');
        this.startPage = startPage; // Which page to start inserting content
        this.pageSettings = pageSettings; // Page size and orientation settings
    }
    /**
     * Convert markdown to Word document using template
     */
    async convert(markdownContent, outputPath) {
        try {
            // Load template
            const templateBuffer = fs.readFileSync(this.templatePath);
            const zip = new PizZip(templateBuffer);
            // Extract document.xml
            let documentXml = zip.file('word/document.xml').asText();
            // Set page size if settings provided
            if (this.pageSettings) {
                documentXml = this.setPageSize(documentXml);
            }
            // Parse markdown and generate Word XML
            const newContentXml = this.markdownToWordXml(markdownContent);
            // Insert new content after the specified start page
            const modifiedXml = this.insertContentAfterPage(documentXml, newContentXml, this.startPage);
            // Update the zip with modified XML
            zip.file('word/document.xml', modifiedXml);
            // Generate and save the new document
            const newDocBuffer = zip.generate({ type: 'nodebuffer' });
            fs.writeFileSync(outputPath, newDocBuffer);
            return outputPath;
        } catch (error) {
            console.error('Error in Word export:', error);
            throw error;
        }
    }
    /**
     * Set page size in document XML
     */
    setPageSize(documentXml) {
        // Import PAGE_SIZES from main process (need to pass as parameter)
        const PAGE_SIZES = {
            a4: { width: 11906, height: 16838 },
            a3: { width: 16838, height: 23811 },
            a5: { width: 8391, height: 11906 },
            b4: { width: 14170, height: 20015 },
            b5: { width: 9979, height: 14170 },
            letter: { width: 12240, height: 15840 },
            legal: { width: 12240, height: 20160 },
            tabloid: { width: 15840, height: 24480 }
        };
        let width, height;
        const pageSize = PAGE_SIZES[this.pageSettings.size];
        if (pageSize) {
            width = pageSize.width;
            height = pageSize.height;
        } else {
            // Default to A4
            width = 11906;
            height = 16838;
        }
        // Swap dimensions for landscape
        if (this.pageSettings.orientation === 'landscape') {
            [width, height] = [height, width];
        }
        // Update all <w:pgSz> elements in section properties
        const pgSzRegex = /<w:pgSz[^>]*\/>/g;
        let modifiedXml = documentXml.replace(pgSzRegex, () => {
            return `<w:pgSz w:w="${width}" w:h="${height}" w:orient="${this.pageSettings.orientation}"/>`;
        });
        // If no pgSz found, add it to all sectPr elements
        if (!pgSzRegex.test(documentXml)) {
            const sectPrRegex = /<w:sectPr[^>]*>/g;
            modifiedXml = modifiedXml.replace(sectPrRegex, (match) => {
                return `${match}<w:pgSz w:w="${width}" w:h="${height}" w:orient="${this.pageSettings.orientation}"/>`;
            });
        }
        return modifiedXml;
    }
    /**
     * Insert markdown content after the specified page in the document
     * @param {string} documentXml - The document XML
     * @param {string} newContentXml - The new content to insert
     * @param {number} afterPage - Insert content after this page number (1-based)
     */
    insertContentAfterPage(documentXml, newContentXml, afterPage) {
        // Find section breaks that mark page boundaries
        // Look for the section properties tag that marks page breaks
        const sectionBreakRegex = /<w:sectPr[^>]*>[\s\S]*?<\/w:sectPr>/g;
        const matches = [...documentXml.matchAll(sectionBreakRegex)];
        // Calculate which section break to insert after
        // Page 1 = before 1st section break
        // Page 2 = after 1st section break
        // Page 3 = after 2nd section break, etc.
        const sectionIndex = afterPage - 1;
        if (matches.length >= sectionIndex && sectionIndex > 0) {
            // Insert after the specified section break
            const insertPoint = matches[sectionIndex - 1].index + matches[sectionIndex - 1][0].length;
            return documentXml.slice(0, insertPoint) + newContentXml + documentXml.slice(insertPoint);
        } else if (afterPage === 1 || matches.length === 0) {
            // Insert at the beginning (after <w:body>) or if no section breaks found
            const bodyStart = documentXml.indexOf('<w:body>') + 8;
            return documentXml.slice(0, bodyStart) + newContentXml + documentXml.slice(bodyStart);
        } else {
            // If not enough section breaks, insert before closing body tag
            return documentXml.replace('</w:body>', newContentXml + '</w:body>');
        }
    }
    /**
     * Convert markdown to Word XML format
     */
    markdownToWordXml(markdown) {
        const lines = markdown.split('\n');
        let xml = '';
        let inCodeBlock = false;
        let codeLines = [];
        for (let i = 0; i < lines.length; i++) {
            const line = lines[i];
            // Handle code blocks
            if (line.trim().startsWith('```')) {
                if (inCodeBlock) {
                    // End code block
                    xml += this.createCodeBlockXml(codeLines.join('\n'));
                    codeLines = [];
                    inCodeBlock = false;
                } else {
                    inCodeBlock = true;
                }
                continue;
            }
            if (inCodeBlock) {
                codeLines.push(line);
                continue;
            }
            // Empty lines
            if (!line.trim()) {
                xml += '<w:p><w:pPr></w:pPr></w:p>';
                continue;
            }
            // Tables - detect table lines
            if (line.includes('|') && line.trim().startsWith('|')) {
                const tableLines = [line];
                i++;
                // Collect all consecutive table lines
                while (i < lines.length && lines[i].includes('|')) {
                    tableLines.push(lines[i]);
                    i++;
                }
                i--; // Back up one line
                xml += this.createTableXml(tableLines);
                continue;
            }
            // ASCII flowcharts/diagrams - detect box drawing characters
            if (this.isAsciiArt(line)) {
                const asciiLines = [line];
                i++;
                // Collect all consecutive ASCII art lines
                while (i < lines.length && (this.isAsciiArt(lines[i]) || !lines[i].trim())) {
                    asciiLines.push(lines[i]);
                    i++;
                    if (i < lines.length && lines[i].trim() && !this.isAsciiArt(lines[i])) {
                        break;
                    }
                }
                i--; // Back up one line
                xml += this.createAsciiArtXml(asciiLines.join('\n'));
                continue;
            }
            // Headings - strip markdown numbering
            if (line.trim().startsWith('#')) {
                const level = (line.match(/^#+/) || [''])[0].length;
                let text = line.replace(/^#+\s*/, '').trim();
                // Remove markdown numbering like "1.1 Title" -> "Title"
                text = text.replace(/^\d+(\.\d+)*\.?\s+/, '');
                xml += this.createHeadingXml(text, level);
                continue;
            }
            // Blockquotes
            if (line.trim().startsWith('>')) {
                const text = line.replace(/^>\s*/, '').trim();
                xml += this.createQuoteXml(text);
                continue;
            }
            // Ordered lists - strip markdown numbering, use template numbering
            if (/^\s*\d+\.\s+/.test(line)) {
                const text = line.replace(/^\s*\d+\.\s+/, '');
                xml += this.createListItemXml(text, true);
                continue;
            }
            // Unordered lists
            if (/^\s*[-*+]\s+/.test(line)) {
                const text = line.replace(/^\s*[-*+]\s+/, '');
                xml += this.createListItemXml(text, false);
                continue;
            }
            // Horizontal rule
            if (/^[-*_]{3,}$/.test(line.trim())) {
                xml += this.createHorizontalRuleXml();
                continue;
            }
            // Normal paragraph
            xml += this.createParagraphXml(line);
        }
        return xml;
    }
    /**
     * Create heading XML using template styles
     */
    createHeadingXml(text, level) {
        const styleName = `Heading${level}`;
        const runs = this.parseInlineFormatting(text);
        return `<w:p>
            <w:pPr>
                <w:pStyle w:val="${styleName}"/>
            </w:pPr>
            ${runs}
        </w:p>`;
    }
    /**
     * Create paragraph XML with Normal style
     */
    createParagraphXml(text) {
        const runs = this.parseInlineFormatting(text);
        return `<w:p>
            <w:pPr>
                <w:pStyle w:val="Normal"/>
            </w:pPr>
            ${runs}
        </w:p>`;
    }
    /**
     * Create quote XML
     */
    createQuoteXml(text) {
        const runs = this.parseInlineFormatting(text);
        return `<w:p>
            <w:pPr>
                <w:pStyle w:val="Quote"/>
            </w:pPr>
            ${runs}
        </w:p>`;
    }
    /**
     * Create list item XML using template numbering
     */
    createListItemXml(text, numbered) {
        const runs = this.parseInlineFormatting(text);
        const numId = numbered ? '1' : '2'; // Template numbering IDs
        return `<w:p>
            <w:pPr>
                <w:pStyle w:val="${numbered ? 'ListNumber' : 'ListBullet'}"/>
                <w:numPr>
                    <w:ilvl w:val="0"/>
                    <w:numId w:val="${numId}"/>
                </w:numPr>
            </w:pPr>
            ${runs}
        </w:p>`;
    }
    /**
     * Create code block XML - renders each line as separate paragraph
     * to preserve exact formatting like in preview (monospace, no wrapping)
     * Background shading applied at paragraph level to extend full width
     */
    createCodeBlockXml(code) {
        const lines = code.split('\n');
        let xml = '';
        lines.forEach((line, index) => {
            const escapedLine = this.escapeXml(line);
            // Each line gets its own paragraph with exact spacing and no wrapping
            // Shading (shd) is at paragraph level so background extends full width
            xml += `<w:p>
                <w:pPr>
                    <w:pStyle w:val="Normal"/>
                    <w:shd w:val="clear" w:color="auto" w:fill="F5F5F5"/>
                    <w:spacing w:before="${index === 0 ? '120' : '0'}" w:after="${index === lines.length - 1 ? '120' : '0'}" w:line="240" w:lineRule="exact"/>
                    <w:ind w:left="284" w:right="284"/>
                    <w:jc w:val="left"/>
                    <w:keepLines/>
                    <w:wordWrap w:val="0"/>
                </w:pPr>
                <w:r>
                    <w:rPr>
                        <w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
                        <w:sz w:val="18"/>
                        <w:szCs w:val="18"/>
                        <w:noProof/>
                    </w:rPr>
                    <w:t xml:space="preserve">${escapedLine}</w:t>
                </w:r>
            </w:p>`;
        });
        return xml;
    }
    /**
     * Create horizontal rule XML
     */
    createHorizontalRuleXml() {
        return `<w:p>
            <w:pPr>
                <w:pBdr>
                    <w:bottom w:val="single" w:sz="6" w:space="1" w:color="auto"/>
                </w:pBdr>
            </w:pPr>
        </w:p>`;
    }
    /**
     * Create table XML from markdown table lines with template styling
     * Uses full-width tables with equal column distribution matching template style
     */
    createTableXml(tableLines) {
        // Parse table
        const rows = [];
        for (const line of tableLines) {
            // Skip separator lines (e.g., |---|---|)
            if (/^\s*\|[\s\-:]+\|\s*$/.test(line)) {
                continue;
            }
            // Split by | and trim
            const cells = line.split('|').filter(cell => cell.trim()).map(cell => cell.trim());
            if (cells.length > 0) {
                rows.push(cells);
            }
        }
        if (rows.length === 0) return '';
        // Calculate number of columns
        const numCols = Math.max(...rows.map(row => row.length));
        // Calculate column width in twips (1440 twips = 1 inch)
        // Assume standard page width of 9360 twips (6.5 inches usable)
        const totalTableWidth = 9360;
        const colWidth = Math.floor(totalTableWidth / numCols);
        // Build table XML
        let tableXml = '<w:tbl>';
        // Table properties - use template table style with full width
        tableXml += `<w:tblPr>
            <w:tblStyle w:val="TableGrid"/>
            <w:tblW w:w="0" w:type="auto"/>
            <w:tblLayout w:type="fixed"/>
            <w:tblLook w:val="04A0" w:firstRow="1" w:lastRow="0" w:firstColumn="0" w:lastColumn="0" w:noHBand="0" w:noVBand="1"/>
            <w:tblBorders>
                <w:top w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
                <w:left w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
                <w:bottom w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
                <w:right w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
                <w:insideH w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
                <w:insideV w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
            </w:tblBorders>
        </w:tblPr>`;
        // Table grid with explicit column widths
        tableXml += '<w:tblGrid>';
        for (let i = 0; i < numCols; i++) {
            tableXml += `<w:gridCol w:w="${colWidth}"/>`;
        }
        tableXml += '</w:tblGrid>';
        // Table rows
        rows.forEach((rowCells, rowIndex) => {
            const isHeader = rowIndex === 0;
            tableXml += '<w:tr>';
            // Row properties for consistent height
            tableXml += '<w:trPr><w:trHeight w:val="0" w:hRule="atLeast"/></w:trPr>';
            // Pad row to have same number of columns
            while (rowCells.length < numCols) {
                rowCells.push('');
            }
            rowCells.forEach((cellText, colIndex) => {
                tableXml += '<w:tc>';
                tableXml += '<w:tcPr>';
                // Cell width
                tableXml += `<w:tcW w:w="${colWidth}" w:type="dxa"/>`;
                // Cell shading - orange for header, white for data rows
                if (isHeader) {
                    tableXml += '<w:shd w:val="clear" w:color="auto" w:fill="F58220"/>';
                } else {
                    tableXml += '<w:shd w:val="clear" w:color="auto" w:fill="FFFFFF"/>';
                }
                // Cell borders
                tableXml += '<w:tcBorders>' +
                    '<w:top w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
                    '<w:left w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
                    '<w:bottom w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
                    '<w:right w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
                    '</w:tcBorders>';
                // Cell margins for proper padding
                tableXml += '<w:tcMar>' +
                    '<w:top w:w="80" w:type="dxa"/>' +
                    '<w:left w:w="120" w:type="dxa"/>' +
                    '<w:bottom w:w="80" w:type="dxa"/>' +
                    '<w:right w:w="120" w:type="dxa"/>' +
                    '</w:tcMar>';
                tableXml += '</w:tcPr>';
                // Cell content
                tableXml += '<w:p>';
                tableXml += '<w:pPr>';
                tableXml += '<w:spacing w:before="0" w:after="0" w:line="240" w:lineRule="auto"/>';
                tableXml += '</w:pPr>';
                const runs = this.parseInlineFormatting(cellText);
                if (isHeader) {
                    // Header: bold white text
                    tableXml += runs.replace(/<w:rPr>/g, '<w:rPr><w:b/><w:color w:val="FFFFFF"/>');
                } else {
                    // Data rows: normal black text
                    tableXml += runs;
                }
                tableXml += '</w:p>';
                tableXml += '</w:tc>';
            });
            tableXml += '</w:tr>';
        });
        tableXml += '</w:tbl>';
        // Add spacing after table
        tableXml += '<w:p><w:pPr><w:spacing w:before="120" w:after="0"/></w:pPr></w:p>';
        return tableXml;
    }
    /**
     * Detect if line contains ASCII art/flowchart characters
     */
    isAsciiArt(line) {
        // Don't treat markdown tables as ASCII art
        if (line.trim().startsWith('|') && line.trim().endsWith('|')) {
            // Check if it's a proper markdown table (has multiple cells)
            const cells = line.split('|').filter(c => c.trim());
            if (cells.length >= 2) {
                return false;
            }
        }
        // Common ASCII art characters (Unicode box drawing and symbols)
        const asciiArtChars = [
            '─', '│', '┌', '┐', '└', '┘', '├', '┤', '┬', '┴', '┼',  // Box drawing
            '═', '║', '╔', '╗', '╚', '╝', '╠', '╣', '╦', '╩', '╬',  // Double box
            '╭', '╮', '╯', '╰',                                      // Rounded corners
            '▲', '▼', '◄', '►', '♦', '●', '○', '■', '□', '◆', '◇',  // Shapes
            '↓', '→', '←', '↑', '↔', '↕', '⇒', '⇐', '⇓', '⇑',      // Arrows
            '┃', '━', '┏', '┓', '┗', '┛', '┣', '┫', '┳', '┻', '╋',  // Heavy box
            '░', '▒', '▓', '█',                                      // Shading
        ];
        // Check for box drawing characters
        if (asciiArtChars.some(char => line.includes(char))) {
            return true;
        }
        // Check for ASCII box patterns with regular characters
        const asciiPatterns = [
            /^\s*\+[-=_+]+\+/,                   // +-----+ or +=====+
            /^\s*\|[-=_]{3,}\|/,                 // |-----|
            /^\s*[-=_]{5,}$/,                    // -----
            /^\s*\+[-]+\+[-]+\+/,                // +---+---+
            /^\s*\([A-Z][a-z]+\)\s*\|\|/,       // (Deformable) ||
            /^\s*\|\s+[A-Z\s]+[-:]\s+[A-Z]/,    // | TILE ADHESIVE - TYPE
            /^\s*\|\s*\[[^\]]+\]/,              // | [BIS Mark / CE Mark]
            /^\s*\|\s{2,}\w+.*\|\|/,            // ||  text  ||
            /^\s*\[[^\]]+\]\s*$/,               // [Step in brackets]
            /^\s*<[-=]+>/,                       // <----> or <====>
            /^\s*\/[-_\\\/]+\//,                 // /----/
            /^\s*\*[-=\*]+\*/,                   // *----*
        ];
        return asciiPatterns.some(pattern => pattern.test(line));
    }
    /**
     * Create ASCII art XML with monospace font
     * Background shading applied at paragraph level to extend full width
     */
    createAsciiArtXml(asciiContent) {
        // Split ASCII art into individual lines and create a paragraph for each
        const lines = asciiContent.split('\n');
        let xml = '';
        lines.forEach((line, index) => {
            // Shading (shd) is at paragraph level so background extends full width
            xml += `<w:p>
                <w:pPr>
                    <w:pStyle w:val="Normal"/>
                    <w:shd w:val="clear" w:color="auto" w:fill="F5F5F5"/>
                    <w:spacing w:before="${index === 0 ? '120' : '0'}" w:after="${index === lines.length - 1 ? '120' : '0'}" w:line="240" w:lineRule="exact"/>
                    <w:ind w:left="284" w:right="284"/>
                    <w:jc w:val="left"/>
                    <w:keepLines/>
                    <w:wordWrap w:val="0"/>
                </w:pPr>`;
            // Check if line contains arrow characters and color them red
            const arrowChars = ['↓', '→', '←', '↑', '▼', '►', '◄', '▲'];
            const hasArrow = arrowChars.some(arrow => line.includes(arrow));
            if (hasArrow) {
                // Split line into parts and color arrows red
                let remainingLine = line;
                while (remainingLine.length > 0) {
                    let foundArrow = false;
                    let arrowIndex = -1;
                    let foundArrowChar = '';
                    // Find the first arrow in the remaining text
                    for (const arrow of arrowChars) {
                        const idx = remainingLine.indexOf(arrow);
                        if (idx !== -1 && (arrowIndex === -1 || idx < arrowIndex)) {
                            arrowIndex = idx;
                            foundArrowChar = arrow;
                            foundArrow = true;
                        }
                    }
                    if (foundArrow) {
                        // Add text before arrow (if any)
                        if (arrowIndex > 0) {
                            const beforeArrow = this.escapeXml(remainingLine.substring(0, arrowIndex));
                            xml += `<w:r>
                                <w:rPr>
                                    <w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
                                    <w:sz w:val="16"/>
                                    <w:szCs w:val="16"/>
                                    <w:noProof/>
                                </w:rPr>
                                <w:t xml:space="preserve">${beforeArrow}</w:t>
                            </w:r>`;
                        }
                        // Add arrow in red
                        const escapedArrow = this.escapeXml(foundArrowChar);
                        xml += `<w:r>
                            <w:rPr>
                                <w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
                                <w:sz w:val="16"/>
                                <w:szCs w:val="16"/>
                                <w:color w:val="FF0000"/>
                                <w:noProof/>
                            </w:rPr>
                            <w:t xml:space="preserve">${escapedArrow}</w:t>
                        </w:r>`;
                        // Continue with remaining text
                        remainingLine = remainingLine.substring(arrowIndex + foundArrowChar.length);
                    } else {
                        // No more arrows, add remaining text
                        const escapedRemaining = this.escapeXml(remainingLine);
                        xml += `<w:r>
                            <w:rPr>
                                <w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
                                <w:sz w:val="16"/>
                                <w:szCs w:val="16"/>
                                <w:noProof/>
                            </w:rPr>
                            <w:t xml:space="preserve">${escapedRemaining}</w:t>
                        </w:r>`;
                        remainingLine = '';
                    }
                }
            } else {
                // No arrows, just add the line normally
                const escapedLine = this.escapeXml(line);
                xml += `<w:r>
                    <w:rPr>
                        <w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
                        <w:sz w:val="16"/>
                        <w:szCs w:val="16"/>
                        <w:noProof/>
                    </w:rPr>
                    <w:t xml:space="preserve">${escapedLine}</w:t>
                </w:r>`;
            }
            xml += `</w:p>`;
        });
        return xml;
    }
    /**
     * Parse inline formatting (bold, italic, code)
     */
    parseInlineFormatting(text) {
        let xml = '';
        let pos = 0;
        // Patterns for inline formatting
        const patterns = [
            { regex: /\*\*\*(.+?)\*\*\*/g, bold: true, italic: true },
            { regex: /\*\*(.+?)\*\*/g, bold: true },
            { regex: /\*(.+?)\*/g, italic: true },
            { regex: /`(.+?)`/g, code: true }
        ];
        // Simple approach: process text sequentially
        let remaining = text;
        while (remaining.length > 0) {
            let foundMatch = false;
            let earliestPos = remaining.length;
            let matchedPattern = null;
            let match = null;
            // Find earliest match
            for (const pattern of patterns) {
                pattern.regex.lastIndex = 0;
                const m = pattern.regex.exec(remaining);
                if (m && m.index < earliestPos) {
                    earliestPos = m.index;
                    matchedPattern = pattern;
                    match = m;
                    foundMatch = true;
                }
            }
            if (foundMatch) {
                // Add text before match
                if (earliestPos > 0) {
                    xml += this.createRunXml(remaining.substring(0, earliestPos));
                }
                // Add formatted text
                xml += this.createRunXml(match[1], matchedPattern.bold, matchedPattern.italic, matchedPattern.code);
                remaining = remaining.substring(earliestPos + match[0].length);
            } else {
                // No more matches, add remaining text
                xml += this.createRunXml(remaining);
                break;
            }
        }
        return xml;
    }
    /**
     * Create a run (text segment) XML
     */
    createRunXml(text, bold = false, italic = false, code = false) {
        if (!text) return '';
        const escapedText = this.escapeXml(text);
        let propsXml = '<w:rPr>';
        if (bold) propsXml += '<w:b/>';
        if (italic) propsXml += '<w:i/>';
        if (code) {
            propsXml += '<w:rFonts w:ascii="Consolas" w:hAnsi="Consolas"/>';
            propsXml += '<w:sz w:val="20"/>';
        }
        propsXml += '</w:rPr>';
        return `<w:r>${propsXml}<w:t xml:space="preserve">${escapedText}</w:t></w:r>`;
    }
    /**
     * Escape XML special characters
     */
    escapeXml(text) {
        return text
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&apos;');
    }
 }
 module.exports = WordTemplateExporter;
@@ -0,0 +1,12 @@
 # Test Double-Click File Opening
 This is a test file to verify double-click functionality.
 ## Features to Test
 - File should load automatically
 - Content should display in editor
 - Tab should show filename
 - Preview should render markdown
 **This text should be bold**
 *This text should be italic*
@@ -0,0 +1,14 @@
 # Test File Opening
 This is a test file to verify that double-click file opening works correctly.
 ## Features
 - **Bold text**
 - *Italic text*
 - `Code`
 ```javascript
 console.log("Hello World");
 ```
 This should appear when you double-click to open the file!
@@ -0,0 +1,144 @@
 /**
 * @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);
    });
 });
@@ -0,0 +1,100 @@
 /**
 * 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();
    });
 });
@@ -0,0 +1,130 @@
 /**
 * 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');
        });
    });
 });
@@ -0,0 +1,175 @@
 /**
 * 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();
    });
  });
 });
@@ -0,0 +1,109 @@
 /**
 * @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>');
    });
 });
@@ -0,0 +1,100 @@
 /**
 * 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();
 });
@@ -0,0 +1,121 @@
 /**
 * @jest-environment jsdom
 */
 /**
 * Tests for SidebarManager
 * Tests panel registration, toggling, expand/collapse behavior
 */
 describe('SidebarManager', () => {
    let SidebarManager;
    beforeEach(() => {
        document.body.innerHTML = `
            <div class="sidebar collapsed" id="sidebar">
                <div class="sidebar-icons">
                    <button class="sidebar-icon" data-panel="test1"></button>
                    <button class="sidebar-icon" data-panel="test2"></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"></button>
                    </div>
                    <div class="sidebar-panel-content" id="sidebar-panel-content"></div>
                </div>
            </div>
        `;
        SidebarManager = require('../src/sidebar/sidebar-manager').SidebarManager;
    });
    test('starts collapsed', () => {
        const mgr = new SidebarManager();
        expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
    });
    test('expands on panel toggle', () => {
        const mgr = new SidebarManager();
        mgr.registerPanel('test1', { title: 'Test 1', render: (c) => { c.innerHTML = 'hello'; } });
        mgr.togglePanel('test1');
        expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(false);
        expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Test 1');
    });
    test('collapses on second toggle', () => {
        const mgr = new SidebarManager();
        mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
        mgr.togglePanel('test1');
        mgr.togglePanel('test1');
        expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
    });
    test('switches panels', () => {
        const mgr = new SidebarManager();
        mgr.registerPanel('test1', { title: 'Panel 1', render: (c) => { c.innerHTML = 'one'; } });
        mgr.registerPanel('test2', { title: 'Panel 2', render: (c) => { c.innerHTML = 'two'; } });
        mgr.togglePanel('test1');
        mgr.togglePanel('test2');
        expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Panel 2');
        expect(document.getElementById('sidebar-panel-content').innerHTML).toBe('two');
    });
    test('collapse resets active panel', () => {
        const mgr = new SidebarManager();
        mgr.registerPanel('test1', { title: 'Test', render: () => {} });
        mgr.expand('test1');
        mgr.collapse();
        expect(mgr.activePanel).toBe(null);
    });
    test('expand sets active icon', () => {
        const mgr = new SidebarManager();
        mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
        mgr.expand('test1');
        const btn = document.querySelector('[data-panel="test1"]');
        expect(btn.classList.contains('active')).toBe(true);
    });
    test('collapse removes active icon', () => {
        const mgr = new SidebarManager();
        mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
        mgr.expand('test1');
        mgr.collapse();
        const btn = document.querySelector('[data-panel="test1"]');
        expect(btn.classList.contains('active')).toBe(false);
    });
    test('expand with unregistered panel does nothing', () => {
        const mgr = new SidebarManager();
        mgr.expand('nonexistent');
        expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
        expect(mgr.activePanel).toBe(null);
    });
    test('render function receives panel content element', () => {
        const mgr = new SidebarManager();
        const renderFn = jest.fn();
        mgr.registerPanel('test1', { title: 'Test 1', render: renderFn });
        mgr.expand('test1');
        expect(renderFn).toHaveBeenCalledWith(document.getElementById('sidebar-panel-content'));
    });
    test('clicking sidebar icon toggles panel', () => {
        const mgr = new SidebarManager();
        mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
        const btn = document.querySelector('[data-panel="test1"]');
        btn.click();
        expect(mgr.activePanel).toBe('test1');
        btn.click();
        expect(mgr.activePanel).toBe(null);
    });
    test('clicking close button collapses sidebar', () => {
        const mgr = new SidebarManager();
        mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
        mgr.expand('test1');
        document.querySelector('.sidebar-panel-close').click();
        expect(mgr.activePanel).toBe(null);
        expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
    });
 });
@@ -0,0 +1,137 @@
 /**
 * Tests for Utility Functions
 * Tests helper functions that can be extracted and tested
 */
 describe('Utility Functions', () => {
  describe('parseCommand', () => {
    // This function parses command strings into command and args
    function parseCommand(cmdString) {
      const parts = [];
      let current = '';
      let inQuotes = false;
      let quoteChar = '';
      for (let i = 0; i < cmdString.length; i++) {
        const char = cmdString[i];
        if ((char === '"' || char === "'") && !inQuotes) {
          inQuotes = true;
          quoteChar = char;
        } else if (char === quoteChar && inQuotes) {
          inQuotes = false;
          quoteChar = '';
        } else if (char === ' ' && !inQuotes) {
          if (current) {
            parts.push(current);
            current = '';
          }
        } else {
          current += char;
        }
      }
      if (current) {
        parts.push(current);
      }
      return {
        command: parts[0],
        args: parts.slice(1)
      };
    }
    test('should parse simple command', () => {
      const result = parseCommand('pandoc input.md -o output.pdf');
      expect(result.command).toBe('pandoc');
      expect(result.args).toEqual(['input.md', '-o', 'output.pdf']);
    });
    test('should handle double-quoted paths', () => {
      const result = parseCommand('pandoc "C:/path with spaces/file.md" -o output.pdf');
      expect(result.command).toBe('pandoc');
      expect(result.args).toEqual(['C:/path with spaces/file.md', '-o', 'output.pdf']);
    });
    test('should handle single-quoted paths', () => {
      const result = parseCommand("pandoc 'file name.md' -o output.pdf");
      expect(result.command).toBe('pandoc');
      expect(result.args).toEqual(['file name.md', '-o', 'output.pdf']);
    });
    test('should handle multiple options', () => {
      const result = parseCommand('pandoc input.md --pdf-engine=xelatex -V geometry:margin=1in -o output.pdf');
      expect(result.command).toBe('pandoc');
      expect(result.args).toContain('--pdf-engine=xelatex');
      expect(result.args).toContain('-V');
    });
    test('should handle empty command', () => {
      const result = parseCommand('');
      expect(result.command).toBeUndefined();
      expect(result.args).toEqual([]);
    });
  });
  describe('hexToRgb', () => {
    // This function converts hex colors to RGB
    function hexToRgb(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16) / 255,
        g: parseInt(result[2], 16) / 255,
        b: parseInt(result[3], 16) / 255
      } : null;
    }
    test('should convert black hex to RGB', () => {
      const result = hexToRgb('#000000');
      expect(result).toEqual({ r: 0, g: 0, b: 0 });
    });
    test('should convert white hex to RGB', () => {
      const result = hexToRgb('#ffffff');
      expect(result).toEqual({ r: 1, g: 1, b: 1 });
    });
    test('should convert red hex to RGB', () => {
      const result = hexToRgb('#ff0000');
      expect(result.r).toBeCloseTo(1);
      expect(result.g).toBeCloseTo(0);
      expect(result.b).toBeCloseTo(0);
    });
    test('should handle hex without hash', () => {
      const result = hexToRgb('00ff00');
      expect(result.r).toBeCloseTo(0);
      expect(result.g).toBeCloseTo(1);
      expect(result.b).toBeCloseTo(0);
    });
    test('should return null for invalid hex', () => {
      expect(hexToRgb('invalid')).toBeNull();
      expect(hexToRgb('#xyz')).toBeNull();
    });
  });
  describe('File Path Utilities', () => {
    test('should extract file extension', () => {
      const getExtension = (filepath) => {
        const match = filepath.match(/\.([^/.]+)$/);
        return match ? match[1].toLowerCase() : '';
      };
      expect(getExtension('file.md')).toBe('md');
      expect(getExtension('document.PDF')).toBe('pdf');
      expect(getExtension('path/to/file.docx')).toBe('docx');
      expect(getExtension('noextension')).toBe('');
    });
    test('should replace file extension', () => {
      const replaceExtension = (filepath, newExt) => {
        return filepath.replace(/\.[^/.]+$/, `.${newExt}`);
      };
      expect(replaceExtension('file.md', 'pdf')).toBe('file.pdf');
      expect(replaceExtension('path/to/doc.docx', 'html')).toBe('path/to/doc.html');
    });
  });
 });