Release v2.0.0: Major Feature Update

New Features:
• Export Profiles - Save and load export configurations
• Mermaid.js diagram support - Render flowcharts, sequence diagrams, and more
• Command Palette (Ctrl+Shift+P) - Quick access to all commands
• GitHub Light/Dark preview themes - Beautiful code preview styling
• Table Generator - Interactive table creation tool
• ASCII Art Generator - Create text banners, boxes, and templates
• Resizable Preview Pane - Drag divider to adjust editor/preview sizes
• Pop-out Preview Window - Open preview in separate window with live sync

UI/UX Improvements:
• Fixed advanced export dialog visibility (added .hidden CSS class)
• GitHub-style table headers with light grey background
• Removed gradients from table headers
• Clean, professional preview rendering

Technical Changes:
• Updated all UI components for new features
• Enhanced TabManager to support resizable panes
• Added MutationObserver for live preview sync in pop-out window
• Improved CSS styling consistency

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

CLAUDE.md

@@ -4,7 +4,7 @@
 
 **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.9
+**Current Version**: v1.9.2
 **Author**: Amit Haridas (amit.wh@gmail.com)
 **License**: MIT
 **Repository**: https://github.com/amitwh/pan-converter
@@ -113,7 +113,175 @@ gh release create v1.2.1 --title "Title" --notes "Release notes" \
 
 ## Feature Implementation Guide
 
-### v1.7.9 Enhanced Word Export with Template Support (Latest)
+### v1.9.1 ASCII Art & Code Block Preservation (Latest)
+
+#### 🎨 Preserved ASCII Art in Exports
+**ASCII Art, Charts, Tables & Flowcharts Now Export Exactly as Previewed** (`src/wordTemplateExporter.js`, `src/main.js`)
+
+**Problem Solved:**
+- Previously, ASCII art, flowcharts, and code blocks were being corrupted during export to Word and PDF
+- Line breaks, spacing, and monospace alignment were lost
+- Box-drawing characters and diagrams became unreadable
+
+**Solution Implemented:**
+1. **Enhanced Word Template Exporter** (`src/wordTemplateExporter.js:259-289`)
+   - Code blocks now render each line as a separate paragraph with exact spacing
+   - `white-space: pre` and `word-wrap: normal` prevent text wrapping
+   - Monospace font (Consolas) with consistent 18pt size
+   - Light gray background (#F5F5F5) for visual distinction
+   - `<w:keepLines/>` and `<w:wordWrap w:val="0"/>` preserve exact formatting
+
+2. **Improved ASCII Art Detection** (`src/wordTemplateExporter.js:410-456`)
+   - Extended Unicode box-drawing character support (╭╮╯╰ rounded corners, heavy box characters)
+   - Additional arrow characters (↔↕⇒⇐⇓⇑)
+   - More ASCII patterns detected (+---+---+, <---->, etc.)
+   - Better markdown table vs ASCII art differentiation
+
+3. **Enhanced PDF Export** (`src/main.js:1266-1268`, `src/main.js:1345-1347`, `src/main.js:2410-2412`)
+   - Added `-V monofont="Consolas"` for monospace code blocks
+   - Added `--highlight-style=tango` for syntax highlighting
+   - Applied to main export, fallback export, and CLI conversion
+
+4. **Electron PDF Fallback** (`src/main.js:1613-1637`)
+   - Enhanced CSS for `<pre>` and `<code>` elements
+   - `white-space: pre` prevents wrapping
+   - `font-family: Consolas, Monaco, 'Courier New', monospace`
+   - Print media query preserves formatting when printing
+
+5. **HTML Export** (`src/main.js:1525-1548`)
+   - Same CSS improvements as Electron PDF
+   - Code blocks maintain exact preview appearance
+
+**Key CSS Properties for ASCII Preservation:**
+```css
+pre {
+    white-space: pre;
+    word-wrap: normal;
+    font-family: Consolas, Monaco, 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.4;
+}
+pre code {
+    white-space: pre;
+    word-wrap: normal;
+    display: block;
+}
+```
+
+**Word XML Properties for ASCII Preservation:**
+```xml
+<w:pPr>
+    <w:spacing w:line="240" w:lineRule="exact"/>
+    <w:keepLines/>
+    <w:wordWrap w:val="0"/>
+</w:pPr>
+<w:rPr>
+    <w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
+    <w:noProof/>
+</w:rPr>
+```
+
+---
+
+### v1.9.0 Custom Headers & Footers
+
+#### 📄 Comprehensive Header & Footer System
+**Custom Headers & Footers for Standard Exports** (`src/main.js:701-853`, `src/index.html:929-1042`, `src/renderer.js:2560-2747`, `src/styles.css:3162-3432`)
+- **New Menu Option**: File → "Header & Footer Settings..." to configure headers/footers
+- **Three-Column Layout**: Left, Center, and Right positioning for both headers and footers
+- **Dynamic Field Support**: $PAGE$, $TOTAL$, $DATE$, $TIME$, $TITLE$, $AUTHOR$, $FILENAME$
+- **Logo/Image Embedding**: Upload logos to display in headers and footers
+- **Enable/Disable Toggle**: Quick on/off switch for all headers/footers
+- **Persistent Settings**: Configurations saved across sessions
+
+**Format Support:**
+- **PDF Export** (Standard): LaTeX-based headers/footers using fancyhdr package with automatic page numbering
+- **DOCX Export** (Standard): Word XML manipulation with field support for PAGE and NUMPAGES
+- **ODT Export**: OpenDocument format support (similar to DOCX implementation)
+- **PowerPoint (PPTX)**: Footer text with dynamic fields on slides
+- **Batch Converter**: Full header/footer support for all batch conversions
+
+**Dynamic Fields Processing:**
+- `$PAGE$` → Current page number (LaTeX: \thepage, Word: PAGE field)
+- `$TOTAL$` → Total pages (LaTeX: \pageref{LastPage}, Word: NUMPAGES field)
+- `$DATE$` → Current date (processed at export time)
+- `$TIME$` → Current time (processed at export time)
+- `$TITLE$` → Document title (from metadata or filename)
+- `$AUTHOR$` → Document author (from metadata)
+- `$FILENAME$` → File name without extension
+
+**Technical Implementation:**
+```javascript
+// processDynamicFields function in main.js
+function processDynamicFields(text, metadata = {}) {
+  const now = new Date();
+  result = text.replace(/\$DATE\$/g, now.toLocaleDateString());
+  result = result.replace(/\$TIME\$/g, now.toLocaleTimeString());
+  result = result.replace(/\$TITLE\$/g, metadata.title || 'Untitled');
+  // ... other replacements
+  return result;
+}
+
+// LaTeX header generation for PDF exports
+const latexHeader = `
+\\usepackage{fancyhdr}
+\\pagestyle{fancy}
+\\fancyhf{}
+\\lhead{${headerLeft}}
+\\chead{${headerCenter}}
+\\rhead{${headerRight}}
+\\lfoot{${footerLeft}}
+\\cfoot{${footerCenter}} // with \\thepage for page numbers
+\\rfoot{${footerRight}}
+`;
+
+// Word XML generation for DOCX exports
+const footerXml = `<?xml version="1.0"?>
+<w:ftr xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
+  <w:p><w:r><w:t>${footerLeft}</w:t></w:r></w:p>
+  <w:p>
+    <w:fldSimple w:instr="PAGE"/> // Page number field
+    <w:r><w:t> of </w:t></w:r>
+    <w:fldSimple w:instr="NUMPAGES"/> // Total pages field
+  </w:p>
+  <w:p><w:r><w:t>${footerRight}</w:t></w:r></w:p>
+</w:ftr>`;
+```
+
+**Dialog Features:**
+- **Field Insertion Buttons**: Quick-insert dynamic fields via popup dialog
+- **Logo Upload**: Browse and select images for headers/footers
+- **Logo Preview**: Show selected logo filename
+- **Clear Buttons**: Remove uploaded logos
+- **Enable Toggle**: Disable headers/footers without losing settings
+- **Responsive Layout**: Grid-based three-column design
+- **Dark Theme Support**: Complete styling for all 22 themes
+
+**Integration Points:**
+- `buildPandocCommand()` - Adds LaTeX headers for PDF exports
+- `exportWithPandoc()` - Post-processes DOCX with header/footer XML
+- `performBatchConversion()` - Batch support for all formats
+- `addHeaderFooterToDocx()` - DOCX XML manipulation using PizZip
+
+**Dependencies:**
+- **PizZip** (v3.2.0) - ZIP file manipulation for DOCX/ODT
+- **fancyhdr** (LaTeX package) - Advanced headers/footers for PDF
+- **lastpage** (LaTeX package) - Total page count support
+
+**Key Improvements in v1.9.0:**
+1. ✅ Professional headers/footers for all standard export formats
+2. ✅ Dynamic field support with automatic value replacement
+3. ✅ Logo/image embedding in document headers/footers
+4. ✅ Batch converter integration with full header/footer support
+5. ✅ Persistent settings across application sessions
+6. ✅ User-friendly dialog with field insertion helper
+7. ✅ Complete dark theme support
+
+**Note**: Enhanced exports (DOCX Enhanced, PDF Enhanced) use Word templates which already have their own headers/footers defined in the template itself, so this feature specifically targets standard (non-templated) exports.
+
+---
+
+### v1.7.9 Enhanced Word Export with Template Support
 
 #### 📝 Template-Based Word Document Generation
 **Added Enhanced DOCX Export** (`src/wordTemplateExporter.js`, `src/main.js:540-596`, `src/main.js:242`)
@@ -1009,14 +1177,33 @@ if (!gotTheLock) {
 
 ---
 
-**Last Updated**: October 27, 2025
+## Pending Tasks & Future Enhancements
-**Claude Assistant**: Development completed for v1.7.9 with Template-Based Word Export:
-- **Template Support**: Word XML manipulation using PizZip to preserve template branding and styles
-- **Template Selection**: File menu option to choose custom Word templates, persisted across sessions
-- **Table Styling**: Orange headers (#F58220) with white bold text, white data rows, orange borders
-- **ASCII Art & Flowcharts**: Perfect monospace alignment with no-wrap properties, each line as separate paragraph
-- **Red Arrows**: Flowchart arrows (↓→←↑) rendered in red color for enhanced visibility
-- **Markdown Numbering Strip**: Removes markdown numbering from headings and lists to use template numbering
-- **Template Page Preservation**: Keeps first 2 pages (cover + TOC) intact, inserts content after 2nd section break
 
-Previous releases: v1.7.8 (file association & print preview fixes), v1.7.7 (print menu with two options), v1.7.6 (table header cleanup), v1.7.5 (single-instance lock).
+No pending tasks at this time. All planned v1.9.1 features have been completed.
+
+### Potential Future Enhancements
+- Image embedding in headers/footers (partially implemented - logo upload UI ready)
+- Advanced page numbering formats (Roman numerals, custom prefixes)
+- First-page-different header/footer support
+- Per-section headers/footers within documents
+
+---
+
+**Last Updated**: December 12, 2025
+**Claude Assistant**: Development completed for v1.9.1 with ASCII Art Preservation!
+
+### v1.9.1 - Latest Release Summary
+- **ASCII Art Preservation**: Code blocks, flowcharts, tables, and ASCII art now export exactly as shown in preview
+- **Enhanced Code Block Rendering**: Each line rendered separately to preserve exact spacing and alignment
+- **Monospace Font Support**: Consolas font used consistently across all export formats
+- **Improved ASCII Detection**: Extended Unicode box-drawing and arrow character support
+- **PDF Export Enhancement**: Added monofont and highlight-style options for better code rendering
+- **HTML/Electron PDF Fix**: Enhanced CSS to prevent text wrapping in code blocks
+
+### Previous Releases
+- v1.9.0: Custom Headers & Footers for PDF, DOCX, ODT, PowerPoint exports
+- v1.8.3: Streamlined PDF Editor UI & Configurable Template Settings
+- v1.8.2: Enhanced PDF Export & Print Fix
+- v1.8.1: Streamlined PDF Editor UI
+- v1.8.0: Enhanced Word Export with template support (batch)
+- v1.7.9: Template-Based Word Export with ASCII art support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pan-converter",
-  "version": "1.8.3",
+  "version": "2.0.0",
   "description": "Cross-platform Markdown editor and converter using Pandoc",
   "main": "src/main.js",
   "scripts": {

src/index.html

@@ -11,6 +11,8 @@
     <link rel="stylesheet" href="styles-modern.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+    <!-- Mermaid.js for diagram rendering -->
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
 </head>
 <body>
     <div class="container">
@@ -148,6 +150,19 @@
                 </div>
                 <div class="export-dialog-body">
                     <!-- Simple/Advanced Export Toggle -->
+                    <!-- Export Profiles -->
+                    <div class="export-section export-profiles">
+                        <label>Export Profile:</label>
+                        <div class="profile-controls">
+                            <select id="export-profile-select">
+                                <option value="">Custom Settings</option>
+                            </select>
+                            <button id="save-profile-btn" type="button" title="Save current settings as profile">💾 Save</button>
+                            <button id="delete-profile-btn" type="button" title="Delete selected profile">🗑️ Delete</button>
+                        </div>
+                        <small class="export-help">Save and reuse your favorite export configurations</small>
+                    </div>
+
                     <div class="export-section export-mode-toggle">
                         <label class="checkbox-label">
                             <input type="checkbox" id="advanced-export-toggle">
@@ -243,6 +258,37 @@
                     </div> <!-- End advanced-export-options -->
 
                     <!-- Basic Export Options (always visible) -->
+                    <div class="export-section basic-options">
+                        <label>Page Size & Orientation:</label>
+                        <div class="form-row">
+                            <label for="page-size">Size:</label>
+                            <select id="page-size">
+                                <option value="a4">A4 (210×297mm)</option>
+                                <option value="a3">A3 (297×420mm)</option>
+                                <option value="a5">A5 (148×210mm)</option>
+                                <option value="b4">B4 (250×353mm)</option>
+                                <option value="b5">B5 (176×250mm)</option>
+                                <option value="letter">Letter (8.5×11in)</option>
+                                <option value="legal">Legal (8.5×14in)</option>
+                                <option value="tabloid">Tabloid (11×17in)</option>
+                                <option value="custom">Custom...</option>
+                            </select>
+                        </div>
+                        <div class="form-row">
+                            <label for="page-orientation">Orientation:</label>
+                            <select id="page-orientation">
+                                <option value="portrait">Portrait</option>
+                                <option value="landscape">Landscape</option>
+                            </select>
+                        </div>
+                        <div id="custom-page-size" class="form-row" style="display: none;">
+                            <label>Custom Size:</label>
+                            <input type="text" id="custom-width" placeholder="Width (e.g., 210mm)" style="width: 45%; display: inline-block;">
+                            <span style="display: inline-block; width: 5%; text-align: center;">×</span>
+                            <input type="text" id="custom-height" placeholder="Height (e.g., 297mm)" style="width: 45%; display: inline-block;">
+                        </div>
+                    </div>
+
                     <div class="export-section basic-options">
                         <label>Quick Export Settings:</label>
                         <div class="checkbox-group">
@@ -258,6 +304,154 @@
             </div>
         </div>
 
+        <!-- Command Palette -->
+        <div id="command-palette" class="command-palette hidden">
+            <div class="command-palette-content">
+                <input type="text" id="command-search" placeholder="Type a command..." autofocus>
+                <div id="command-list" class="command-list"></div>
+                <div class="command-palette-footer">
+                    <span>↑↓ Navigate</span>
+                    <span>Enter Execute</span>
+                    <span>Esc Close</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Table Generator Dialog -->
+        <div id="table-generator-dialog" class="export-dialog hidden">
+            <div class="export-dialog-content" style="max-width: 500px;">
+                <div class="export-dialog-header">
+                    <h3>📊 Table Generator</h3>
+                    <button id="table-dialog-close" title="Close">×</button>
+                </div>
+                <div class="export-dialog-body">
+                    <div class="export-section">
+                        <label for="table-rows">Number of Rows:</label>
+                        <input type="number" id="table-rows" min="1" max="50" value="3" style="width: 100px;">
+                        <small>Total rows including header (if enabled)</small>
+                    </div>
+
+                    <div class="export-section">
+                        <label for="table-cols">Number of Columns:</label>
+                        <input type="number" id="table-cols" min="1" max="20" value="3" style="width: 100px;">
+                    </div>
+
+                    <div class="export-section">
+                        <label class="checkbox-label">
+                            <input type="checkbox" id="table-has-header" checked>
+                            Include Header Row
+                        </label>
+                        <small>First row will be formatted as table headers</small>
+                    </div>
+
+                    <div class="export-section">
+                        <label for="table-alignment">Column Alignment:</label>
+                        <select id="table-alignment">
+                            <option value="left">Left</option>
+                            <option value="center">Center</option>
+                            <option value="right">Right</option>
+                        </select>
+                        <small>Applies to all columns</small>
+                    </div>
+
+                    <div class="export-section">
+                        <label for="table-preview">Preview:</label>
+                        <pre id="table-preview" style="background: #f5f5f5; padding: 10px; border-radius: 4px; font-size: 12px; max-height: 300px; overflow: auto;"></pre>
+                    </div>
+                </div>
+                <div class="export-dialog-footer">
+                    <button id="table-generate-preview" class="btn-secondary">Update Preview</button>
+                    <button id="table-insert" class="btn-primary">Insert Table</button>
+                    <button id="table-cancel" class="btn-secondary">Cancel</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- ASCII Art Generator Dialog -->
+        <div id="ascii-art-dialog" class="export-dialog hidden">
+            <div class="export-dialog-content" style="max-width: 700px;">
+                <div class="export-dialog-header">
+                    <h3>🎨 ASCII Art Generator</h3>
+                    <button id="ascii-dialog-close" title="Close">×</button>
+                </div>
+                <div class="export-dialog-body">
+                    <div class="export-section">
+                        <label>Mode:</label>
+                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+                            <button id="ascii-mode-text" class="btn-secondary ascii-mode-btn active">Text Banner</button>
+                            <button id="ascii-mode-box" class="btn-secondary ascii-mode-btn">Box/Frame</button>
+                            <button id="ascii-mode-templates" class="btn-secondary ascii-mode-btn">Templates</button>
+                        </div>
+                    </div>
+
+                    <!-- Text Banner Mode -->
+                    <div id="ascii-text-mode" class="ascii-mode-section">
+                        <div class="export-section">
+                            <label for="ascii-text-input">Text to Convert:</label>
+                            <input type="text" id="ascii-text-input" placeholder="Enter your text..." maxlength="50">
+                        </div>
+                        <div class="export-section">
+                            <label for="ascii-font-style">Style:</label>
+                            <select id="ascii-font-style">
+                                <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="ascii-box-mode" class="ascii-mode-section hidden">
+                        <div class="export-section">
+                            <label for="ascii-box-text">Text Content:</label>
+                            <textarea id="ascii-box-text" rows="3" placeholder="Enter text for the box..."></textarea>
+                        </div>
+                        <div class="export-section">
+                            <label for="ascii-box-style">Box Style:</label>
+                            <select id="ascii-box-style">
+                                <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="export-section">
+                            <label for="ascii-box-padding">Padding:</label>
+                            <input type="number" id="ascii-box-padding" min="1" max="10" value="2" style="width: 80px;">
+                        </div>
+                    </div>
+
+                    <!-- Templates Mode -->
+                    <div id="ascii-templates-mode" class="ascii-mode-section hidden">
+                        <div class="export-section">
+                            <label>Select Template:</label>
+                            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
+                                <button class="btn-secondary ascii-template-btn" data-template="arrow-right">Arrow →</button>
+                                <button class="btn-secondary ascii-template-btn" data-template="arrow-down">Arrow ↓</button>
+                                <button class="btn-secondary ascii-template-btn" data-template="check">Checkmark ✓</button>
+                                <button class="btn-secondary ascii-template-btn" data-template="divider">Divider</button>
+                                <button class="btn-secondary ascii-template-btn" data-template="header">Header</button>
+                                <button class="btn-secondary ascii-template-btn" data-template="flowchart">Flowchart</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="export-section">
+                        <label for="ascii-preview">Preview:</label>
+                        <pre id="ascii-preview" style="background: #f5f5f5; padding: 15px; border-radius: 4px; font-size: 12px; max-height: 400px; overflow: auto; font-family: 'Courier New', monospace; line-height: 1.2;"></pre>
+                    </div>
+                </div>
+                <div class="export-dialog-footer">
+                    <button id="ascii-generate" class="btn-secondary">Generate Preview</button>
+                    <button id="ascii-insert" class="btn-primary">Insert ASCII Art</button>
+                    <button id="ascii-cancel" class="btn-secondary">Cancel</button>
+                </div>
+            </div>
+        </div>
+
         <!-- Universal File Converter Dialog -->
         <div id="universal-converter-dialog" class="export-dialog hidden">
             <div class="export-dialog-content">
@@ -926,6 +1120,121 @@
             </div>
         </div>
 
+        <!-- Header & Footer Configuration Dialog -->
+        <div id="header-footer-dialog" class="export-dialog hidden">
+            <div class="export-dialog-content" style="max-width: 700px;">
+                <div class="export-dialog-header">
+                    <h3>Header & Footer Settings</h3>
+                    <button id="header-footer-close" class="dialog-close" title="Close">×</button>
+                </div>
+                <div class="export-dialog-body">
+                    <div class="hf-enable-section">
+                        <label>
+                            <input type="checkbox" id="hf-enabled" checked>
+                            Enable Headers and Footers
+                        </label>
+                    </div>
+
+                    <div id="hf-config-content">
+                        <!-- Header Configuration -->
+                        <div class="hf-section">
+                            <h4>Header</h4>
+                            <div class="hf-row">
+                                <div class="hf-column">
+                                    <label>Left</label>
+                                    <input type="text" id="header-left" placeholder="e.g., Document Title">
+                                    <button class="field-insert-btn" data-target="header-left" title="Insert dynamic field">+</button>
+                                </div>
+                                <div class="hf-column">
+                                    <label>Center</label>
+                                    <input type="text" id="header-center" placeholder="e.g., $TITLE$">
+                                    <button class="field-insert-btn" data-target="header-center" title="Insert dynamic field">+</button>
+                                </div>
+                                <div class="hf-column">
+                                    <label>Right</label>
+                                    <input type="text" id="header-right" placeholder="e.g., $DATE$">
+                                    <button class="field-insert-btn" data-target="header-right" title="Insert dynamic field">+</button>
+                                </div>
+                            </div>
+                            <div class="hf-logo-row">
+                                <label>Header Logo/Image:</label>
+                                <button id="header-logo-browse" class="browse-btn">Browse...</button>
+                                <button id="header-logo-clear" class="clear-btn">Clear</button>
+                                <span id="header-logo-preview" class="logo-preview"></span>
+                            </div>
+                        </div>
+
+                        <!-- Footer Configuration -->
+                        <div class="hf-section">
+                            <h4>Footer</h4>
+                            <div class="hf-row">
+                                <div class="hf-column">
+                                    <label>Left</label>
+                                    <input type="text" id="footer-left" placeholder="e.g., Company Name">
+                                    <button class="field-insert-btn" data-target="footer-left" title="Insert dynamic field">+</button>
+                                </div>
+                                <div class="hf-column">
+                                    <label>Center</label>
+                                    <input type="text" id="footer-center" placeholder="e.g., $PAGE$ of $TOTAL$">
+                                    <button class="field-insert-btn" data-target="footer-center" title="Insert dynamic field">+</button>
+                                </div>
+                                <div class="hf-column">
+                                    <label>Right</label>
+                                    <input type="text" id="footer-right" placeholder="e.g., $AUTHOR$">
+                                    <button class="field-insert-btn" data-target="footer-right" title="Insert dynamic field">+</button>
+                                </div>
+                            </div>
+                            <div class="hf-logo-row">
+                                <label>Footer Logo/Image:</label>
+                                <button id="footer-logo-browse" class="browse-btn">Browse...</button>
+                                <button id="footer-logo-clear" class="clear-btn">Clear</button>
+                                <span id="footer-logo-preview" class="logo-preview"></span>
+                            </div>
+                        </div>
+
+                        <!-- Dynamic Fields Help -->
+                        <div class="hf-help">
+                            <p><strong>Available Dynamic Fields:</strong></p>
+                            <ul>
+                                <li><code>$PAGE$</code> - Current page number</li>
+                                <li><code>$TOTAL$</code> - Total page count</li>
+                                <li><code>$DATE$</code> - Current date</li>
+                                <li><code>$TIME$</code> - Current time</li>
+                                <li><code>$TITLE$</code> - Document title</li>
+                                <li><code>$AUTHOR$</code> - Document author</li>
+                                <li><code>$FILENAME$</code> - File name</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="export-dialog-footer">
+                    <button id="header-footer-cancel">Cancel</button>
+                    <button id="header-footer-save" class="primary">Save Settings</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Dynamic Field Picker Dialog -->
+        <div id="field-picker-dialog" class="export-dialog hidden">
+            <div class="export-dialog-content" style="max-width: 400px;">
+                <div class="export-dialog-header">
+                    <h3>Insert Dynamic Field</h3>
+                    <button id="field-picker-close" class="dialog-close" title="Close">×</button>
+                </div>
+                <div class="export-dialog-body">
+                    <div class="field-picker-list">
+                        <button class="field-option" data-field="$PAGE$">Page Number</button>
+                        <button class="field-option" data-field="$TOTAL$">Total Pages</button>
+                        <button class="field-option" data-field="$DATE$">Current Date</button>
+                        <button class="field-option" data-field="$TIME$">Current Time</button>
+                        <button class="field-option" data-field="$TITLE$">Document Title</button>
+                        <button class="field-option" data-field="$AUTHOR$">Document Author</button>
+                        <button class="field-option" data-field="$FILENAME$">File Name</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="editor-container">
             <div class="tab-content active" id="tab-content-1" data-tab-id="1">
                 <div id="editor-pane-1" class="pane">
@@ -934,7 +1243,11 @@
                         <textarea id="editor-1" class="editor-textarea"></textarea>
                     </div>
                 </div>
+                <div class="pane-resizer" id="pane-resizer-1" title="Drag to resize"></div>
                 <div id="preview-pane-1" class="pane">
+                    <div class="preview-header">
+                        <button class="preview-popout-btn" id="preview-popout-1" title="Pop out preview in new window">⬜</button>
+                    </div>
                     <div id="preview-1" class="preview-content"></div>
                 </div>
             </div>

src/main.js

@@ -5,6 +5,15 @@ const { exec } = require('child_process');
 const { PDFDocument, rgb, degrees, StandardFonts } = require('pdf-lib');
 const WordTemplateExporter = require('./wordTemplateExporter');
 
+// Add MiKTeX to PATH for LaTeX support
+if (process.platform === 'win32') {
+  const miktexPath = 'C:\\Program Files\\MiKTeX\\miktex\\bin\\x64';
+  if (fs.existsSync(miktexPath)) {
+    process.env.PATH = `${miktexPath};${process.env.PATH}`;
+    console.log('[MAIN] Added MiKTeX to PATH:', miktexPath);
+  }
+}
+
 // Get the system Pandoc path
 function getPandocPath() {
   // Pandoc is expected to be in the system's PATH.
@@ -52,6 +61,83 @@ let wordTemplatePath = null; // Path to selected Word template
 let templateStartPage = 3; // Which page to start inserting content (default: page 3)
 let rendererReady = false; // Track if renderer is ready to receive file data
 
+// Header & Footer Settings
+let headerFooterSettings = {
+  enabled: true,
+  header: {
+    left: '',
+    center: '',
+    right: '',
+    logo: null // Will store image file path
+  },
+  footer: {
+    left: '',
+    center: '$PAGE$ of $TOTAL$',
+    right: '',
+    logo: null
+  }
+};
+
+// Page Size Definitions (in twentieths of a point for Word, mm/inches for Pandoc)
+const PAGE_SIZES = {
+  a4: {
+    name: 'A4',
+    pandoc: 'a4',
+    word: { width: 11906, height: 16838 }, // 210×297mm
+    dimensions: '210×297mm'
+  },
+  a3: {
+    name: 'A3',
+    pandoc: 'a3',
+    word: { width: 16838, height: 23811 }, // 297×420mm
+    dimensions: '297×420mm'
+  },
+  a5: {
+    name: 'A5',
+    pandoc: 'a5',
+    word: { width: 8391, height: 11906 }, // 148×210mm
+    dimensions: '148×210mm'
+  },
+  b4: {
+    name: 'B4',
+    pandoc: 'b4',
+    word: { width: 14170, height: 20015 }, // 250×353mm
+    dimensions: '250×353mm'
+  },
+  b5: {
+    name: 'B5',
+    pandoc: 'b5',
+    word: { width: 9979, height: 14170 }, // 176×250mm
+    dimensions: '176×250mm'
+  },
+  letter: {
+    name: 'Letter',
+    pandoc: 'letter',
+    word: { width: 12240, height: 15840 }, // 8.5×11in
+    dimensions: '8.5×11in'
+  },
+  legal: {
+    name: 'Legal',
+    pandoc: 'legal',
+    word: { width: 12240, height: 20160 }, // 8.5×14in
+    dimensions: '8.5×14in'
+  },
+  tabloid: {
+    name: 'Tabloid',
+    pandoc: 'tabloid',
+    word: { width: 15840, height: 24480 }, // 11×17in
+    dimensions: '11×17in'
+  }
+};
+
+// Default page settings
+let pageSettings = {
+  size: 'a4',
+  orientation: 'portrait',
+  customWidth: null,
+  customHeight: null
+};
+
 // Handle single instance lock for Windows file association
 // When a file is double-clicked and the app is already running,
 // Windows tries to start a second instance. We prevent this and
@@ -262,6 +348,14 @@ function createMenu() {
           label: 'Template Settings...',
           click: showTemplateSettings
         },
+        {
+          label: 'Header & Footer Settings...',
+          click: () => {
+            if (mainWindow) {
+              mainWindow.webContents.send('open-header-footer-dialog');
+            }
+          }
+        },
         { type: 'separator' },
         {
           label: 'Quit',
@@ -471,6 +565,23 @@ function createMenu() {
         }
       ]
     },
+    {
+      label: 'Tools',
+      submenu: [
+        {
+          label: 'Table Generator',
+          click: () => mainWindow.webContents.send('show-table-generator')
+        },
+        {
+          label: 'ASCII Art Generator',
+          click: () => mainWindow.webContents.send('show-ascii-generator')
+        },
+        {
+          label: 'Document Compare',
+          click: () => mainWindow.webContents.send('show-document-compare')
+        }
+      ]
+    },
     {
       label: 'Help',
       submenu: [
@@ -481,7 +592,7 @@ function createMenu() {
               type: 'info',
               title: 'About PanConverter',
               message: 'PanConverter',
-              detail: 'A cross-platform Markdown editor and converter using Pandoc.\n\nVersion: 1.8.3\nAuthor: Amit Haridas\nEmail: amit.wh@gmail.com\nLicense: MIT\n\nFeatures:\n• Modern glassmorphism UI with gradient backgrounds\n• Enhanced PDF export via Word template with configurable start page\n• Configurable template settings (start page selection)\n• Streamlined PDF Editor UI (merge, split, compress, rotate, watermark, encrypt)\n• Universal File Converter (LibreOffice, ImageMagick, FFmpeg, Pandoc)\n• Windows Explorer context menu integration\n• Tabbed interface for multiple files\n• Advanced markdown editing with live preview\n• Real-time preview updates while typing\n• Full toolbar markdown editing functions\n• Enhanced PDF export with built-in Electron fallback\n• Enhanced Word export with template support (single file & batch)\n• File association support for .md files\n• Command-line interface for batch conversion\n• Advanced export options with templates and metadata\n• Batch file conversion with progress tracking\n• Improved preview typography and spacing\n• Adjustable font sizes via menu (Ctrl+Shift+Plus/Minus)\n• Complete theme support including Monokai fixes\n• Find & replace with match highlighting\n• Line numbers and auto-indentation\n• Export to multiple formats via Pandoc\n• PowerPoint & presentation export\n• Export tables to Excel/ODS spreadsheets\n• Document import & conversion\n• Table creation helper\n• 22 beautiful themes (including Dracula, Nord, Tokyo Night, Gruvbox, Ayu, Concrete, and more)\n• Undo/redo functionality\n• Live word count and statistics',
+              detail: 'A cross-platform Markdown editor and converter using Pandoc.\n\nVersion: 2.0.0\nAuthor: Amit Haridas\nEmail: amit.wh@gmail.com\nLicense: MIT\n\n✨ New in v2.0.0:\n• Export Profiles - Save and load export configurations\n• Mermaid.js diagram support - Render flowcharts, sequence diagrams, and more\n• Command Palette (Ctrl+Shift+P) - Quick access to all commands\n• GitHub Light/Dark preview themes - Beautiful code preview styling\n• Table Generator - Interactive table creation tool\n• ASCII Art Generator - Create text banners, boxes, and templates\n• Resizable Preview Pane - Drag divider to adjust editor/preview sizes\n• Pop-out Preview Window - Open preview in separate window with live sync\n\nCore Features:\n• Configurable page sizes (A3, A4, A5, B4, B5, Letter, Legal, Tabloid, Custom) with orientation support\n• Page size support for all export formats (PDF, DOCX, ODT, PowerPoint) and batch conversion\n• Preserved ASCII art, charts, tables, flowcharts in exports with full-width background\n• Custom Headers & Footers for PDF, DOCX, ODT, and PowerPoint exports\n• Dynamic field support: $PAGE$, $TOTAL$, $DATE$, $TIME$, $TITLE$, $AUTHOR$, $FILENAME$\n• Logo/image embedding in headers and footers\n• Modern glassmorphism UI with gradient backgrounds\n• Enhanced PDF export via Word template with configurable start page\n• Streamlined PDF Editor UI (merge, split, compress, rotate, watermark, encrypt)\n• Universal File Converter (LibreOffice, ImageMagick, FFmpeg, Pandoc)\n• Windows Explorer context menu integration\n• Tabbed interface for multiple files\n• Advanced markdown editing with live preview\n• Real-time preview updates while typing\n• Full toolbar markdown editing functions\n• Enhanced PDF export with built-in Electron fallback\n• Enhanced Word export with template support (single file & batch)\n• File association support for .md files\n• Command-line interface for batch conversion\n• Advanced export options with templates and metadata\n• Batch file conversion with progress tracking\n• Adjustable font sizes via menu (Ctrl+Shift+Plus/Minus)\n• 22 beautiful themes (including Dracula, Nord, Tokyo Night, Gruvbox, Ayu, Concrete, and more)\n• Find & replace with match highlighting\n• Line numbers and auto-indentation\n• Undo/redo functionality\n• Live word count and statistics',
               buttons: ['OK']
             });
           }
@@ -618,6 +729,346 @@ ipcMain.on('set-custom-start-page', (event, pageNumber) => {
   }
 });
 
+// Header & Footer Settings IPC Handlers
+
+// Get current header/footer settings
+ipcMain.on('get-header-footer-settings', (event) => {
+  event.reply('header-footer-settings-data', headerFooterSettings);
+});
+
+// Save header/footer settings
+ipcMain.on('save-header-footer-settings', (event, settings) => {
+  headerFooterSettings = settings;
+  store.set('headerFooterSettings', headerFooterSettings);
+
+  dialog.showMessageBox(mainWindow, {
+    type: 'info',
+    title: 'Settings Saved',
+    message: 'Header and footer settings have been saved successfully!',
+    buttons: ['OK']
+  });
+});
+
+// Get current page settings
+ipcMain.on('get-page-settings', (event) => {
+  event.reply('page-settings-data', pageSettings);
+});
+
+// Update page settings from export dialog
+ipcMain.on('update-page-settings', (event, settings) => {
+  pageSettings = settings;
+  store.set('pageSettings', pageSettings);
+  console.log('Page settings updated:', pageSettings);
+});
+
+// Save header/footer logo image
+// Browse for header/footer logo
+ipcMain.on('browse-header-footer-logo', async (event, position) => {
+  try {
+    const result = await dialog.showOpenDialog(mainWindow, {
+      title: `Select ${position.charAt(0).toUpperCase() + position.slice(1)} Logo/Image`,
+      filters: [
+        { name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp'] }
+      ],
+      properties: ['openFile']
+    });
+
+    if (!result.canceled && result.filePaths.length > 0) {
+      const filePath = result.filePaths[0];
+
+      // Copy image to userData directory for persistent storage
+      const userDataPath = app.getPath('userData');
+      const logoDir = path.join(userDataPath, 'logos');
+
+      // Create logos directory if it doesn't exist
+      if (!fs.existsSync(logoDir)) {
+        fs.mkdirSync(logoDir, { recursive: true });
+      }
+
+      // Generate unique filename
+      const ext = path.extname(filePath);
+      const filename = `${position}_${Date.now()}${ext}`;
+      const destPath = path.join(logoDir, filename);
+
+      // Copy file
+      fs.copyFileSync(filePath, destPath);
+
+      // Update settings
+      if (position === 'header') {
+        headerFooterSettings.header.logo = destPath;
+      } else if (position === 'footer') {
+        headerFooterSettings.footer.logo = destPath;
+      }
+
+      event.reply('header-footer-logo-saved', { position, path: destPath });
+    }
+  } catch (error) {
+    console.error('Logo browse error:', error);
+    dialog.showErrorBox('Logo Error', `Failed to select logo: ${error.message}`);
+  }
+});
+
+ipcMain.on('save-header-footer-logo', async (event, { position, filePath }) => {
+  try {
+    if (!filePath) {
+      dialog.showErrorBox('Logo Error', 'Failed to save logo: The "path" argument must be of type string. Received undefined');
+      return;
+    }
+
+    // Copy image to userData directory for persistent storage
+    const userDataPath = app.getPath('userData');
+    const logoDir = path.join(userDataPath, 'logos');
+
+    // Create logos directory if it doesn't exist
+    if (!fs.existsSync(logoDir)) {
+      fs.mkdirSync(logoDir, { recursive: true });
+    }
+
+    // Verify source file exists
+    if (!fs.existsSync(filePath)) {
+      dialog.showErrorBox('Logo Error', `Source file not found: ${filePath}`);
+      return;
+    }
+
+    // Generate unique filename
+    const ext = path.extname(filePath);
+    const filename = `${position}_${Date.now()}${ext}`;
+    const destPath = path.join(logoDir, filename);
+
+    // Copy file
+    fs.copyFileSync(filePath, destPath);
+
+    // Update settings
+    if (position === 'header') {
+      headerFooterSettings.header.logo = destPath;
+    } else if (position === 'footer') {
+      headerFooterSettings.footer.logo = destPath;
+    }
+
+    event.reply('header-footer-logo-saved', { position, path: destPath });
+  } catch (error) {
+    console.error('Logo save error:', error);
+    dialog.showErrorBox('Logo Error', `Failed to save logo: ${error.message}`);
+  }
+});
+
+// Clear header/footer logo
+ipcMain.on('clear-header-footer-logo', (event, position) => {
+  if (position === 'header') {
+    headerFooterSettings.header.logo = null;
+  } else if (position === 'footer') {
+    headerFooterSettings.footer.logo = null;
+  }
+  event.reply('header-footer-logo-cleared', position);
+});
+
+// Helper function to process dynamic fields in header/footer text
+function processDynamicFields(text, metadata = {}) {
+  if (!text) return '';
+
+  const now = new Date();
+  const dateStr = now.toLocaleDateString();
+  const timeStr = now.toLocaleTimeString();
+
+  let result = text;
+  result = result.replace(/\$DATE\$/g, dateStr);
+  result = result.replace(/\$TIME\$/g, timeStr);
+  result = result.replace(/\$TITLE\$/g, metadata.title || 'Untitled');
+  result = result.replace(/\$AUTHOR\$/g, metadata.author || '');
+  result = result.replace(/\$FILENAME\$/g, metadata.filename || '');
+
+  // Note: $PAGE$ and $TOTAL$ are handled by Pandoc/export tools
+
+  return result;
+}
+
+// Add headers/footers to DOCX file using PizZip and docx4js
+// Function to set page size in DOCX files
+async function setDocxPageSize(docxPath) {
+  try {
+    const PizZip = require('pizzip');
+
+    // Read the DOCX file
+    const docxBuffer = fs.readFileSync(docxPath);
+    const zip = new PizZip(docxBuffer);
+
+    // Get document.xml
+    let documentXml = zip.file('word/document.xml').asText();
+
+    // Get page dimensions
+    let width, height;
+    const pageSize = PAGE_SIZES[pageSettings.size];
+
+    if (pageSize) {
+      width = pageSize.word.width;
+      height = pageSize.word.height;
+    } else if (pageSettings.customWidth && pageSettings.customHeight) {
+      // Parse custom dimensions (convert to twentieths of a point)
+      // Note: This is simplified - production code should handle various units
+      width = parseInt(pageSettings.customWidth) || 11906;
+      height = parseInt(pageSettings.customHeight) || 16838;
+    } else {
+      // Default to A4
+      width = 11906;
+      height = 16838;
+    }
+
+    // Swap dimensions for landscape
+    if (pageSettings.orientation === 'landscape') {
+      [width, height] = [height, width];
+    }
+
+    // Update all <w:pgSz> elements in section properties
+    const pgSzRegex = /<w:pgSz[^>]*\/>/g;
+    documentXml = documentXml.replace(pgSzRegex, () => {
+      return `<w:pgSz w:w="${width}" w:h="${height}" w:orient="${pageSettings.orientation}"/>`;
+    });
+
+    // If no pgSz found, add it to all sectPr elements
+    if (!pgSzRegex.test(documentXml)) {
+      const sectPrRegex = /<w:sectPr[^>]*>/g;
+      documentXml = documentXml.replace(sectPrRegex, (match) => {
+        return `${match}<w:pgSz w:w="${width}" w:h="${height}" w:orient="${pageSettings.orientation}"/>`;
+      });
+    }
+
+    // Save updated document.xml
+    zip.file('word/document.xml', documentXml);
+
+    // Write modified DOCX
+    const newDocxBuffer = zip.generate({ type: 'nodebuffer' });
+    fs.writeFileSync(docxPath, newDocxBuffer);
+
+  } catch (error) {
+    console.error('Failed to set DOCX page size:', error);
+  }
+}
+
+async function addHeaderFooterToDocx(docxPath, metadata = {}) {
+  if (!headerFooterSettings.enabled) return;
+
+  try {
+    const PizZip = require('pizzip');
+
+    // Read the DOCX file
+    const docxBuffer = fs.readFileSync(docxPath);
+    const zip = new PizZip(docxBuffer);
+
+    // Process dynamic fields
+    const headerLeft = processDynamicFields(headerFooterSettings.header.left, metadata);
+    const headerCenter = processDynamicFields(headerFooterSettings.header.center, metadata);
+    const headerRight = processDynamicFields(headerFooterSettings.header.right, metadata);
+    const footerLeft = processDynamicFields(headerFooterSettings.footer.left, metadata);
+    const footerCenter = processDynamicFields(headerFooterSettings.footer.center, metadata);
+    const footerRight = processDynamicFields(headerFooterSettings.footer.right, metadata);
+
+    // Create header XML
+    if (headerLeft || headerCenter || headerRight) {
+      const headerXml = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<w:hdr xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
+  <w:p>
+    <w:pPr><w:jc w:val="left"/></w:pPr>
+    <w:r><w:t>${headerLeft || ''}</w:t></w:r>
+  </w:p>
+  <w:p>
+    <w:pPr><w:jc w:val="center"/></w:pPr>
+    <w:r><w:t>${headerCenter || ''}</w:t></w:r>
+  </w:p>
+  <w:p>
+    <w:pPr><w:jc w:val="right"/></w:pPr>
+    <w:r><w:t>${headerRight || ''}</w:t></w:r>
+  </w:p>
+</w:hdr>`;
+      zip.file('word/header1.xml', headerXml);
+    }
+
+    // Create footer XML with page numbers
+    if (footerLeft || footerCenter || footerRight) {
+      let footerCenterXml = '';
+      if (footerCenter) {
+        // Handle $PAGE$ and $TOTAL$ in footer
+        if (footerCenter.includes('$PAGE$') || footerCenter.includes('$TOTAL$')) {
+          const parts = footerCenter.split(/(\$PAGE\$|\$TOTAL\$)/);
+          footerCenterXml = parts.map(part => {
+            if (part === '$PAGE$') {
+              return '<w:fldSimple w:instr="PAGE"/>';
+            } else if (part === '$TOTAL$') {
+              return '<w:fldSimple w:instr="NUMPAGES"/>';
+            } else {
+              return `<w:r><w:t>${part}</w:t></w:r>`;
+            }
+          }).join('');
+        } else {
+          footerCenterXml = `<w:r><w:t>${footerCenter}</w:t></w:r>`;
+        }
+      }
+
+      const footerXml = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<w:ftr xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
+  <w:p>
+    <w:pPr><w:jc w:val="left"/></w:pPr>
+    <w:r><w:t>${footerLeft || ''}</w:t></w:r>
+  </w:p>
+  <w:p>
+    <w:pPr><w:jc w:val="center"/></w:pPr>
+    ${footerCenterXml}
+  </w:p>
+  <w:p>
+    <w:pPr><w:jc w:val="right"/></w:pPr>
+    <w:r><w:t>${footerRight || ''}</w:t></w:r>
+  </w:p>
+</w:ftr>`;
+      zip.file('word/footer1.xml', footerXml);
+    }
+
+    // Update document.xml.rels to reference header/footer
+    let relsXml = zip.file('word/_rels/document.xml.rels').asText();
+
+    // Add header relationship if not exists
+    if ((headerLeft || headerCenter || headerRight) && !relsXml.includes('header1.xml')) {
+      const headerId = 'rId100';
+      const headerRel = `<Relationship Id="${headerId}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/header" Target="header1.xml"/>`;
+      relsXml = relsXml.replace('</Relationships>', headerRel + '</Relationships>');
+    }
+
+    // Add footer relationship if not exists
+    if ((footerLeft || footerCenter || footerRight) && !relsXml.includes('footer1.xml')) {
+      const footerId = 'rId101';
+      const footerRel = `<Relationship Id="${footerId}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/footer" Target="footer1.xml"/>`;
+      relsXml = relsXml.replace('</Relationships>', footerRel + '</Relationships>');
+    }
+
+    zip.file('word/_rels/document.xml.rels', relsXml);
+
+    // Update document.xml to use header/footer in sections
+    let documentXml = zip.file('word/document.xml').asText();
+    if ((headerLeft || headerCenter || headerRight || footerLeft || footerCenter || footerRight)) {
+      // Find all section properties and add header/footer references
+      const sectPrRegex = /<w:sectPr[^>]*>[\s\S]*?<\/w:sectPr>/g;
+      documentXml = documentXml.replace(sectPrRegex, (match) => {
+        let updated = match;
+        if ((headerLeft || headerCenter || headerRight) && !match.includes('headerReference')) {
+          updated = updated.replace('</w:sectPr>', '<w:headerReference w:type="default" r:id="rId100"/></w:sectPr>');
+        }
+        if ((footerLeft || footerCenter || footerRight) && !match.includes('footerReference')) {
+          updated = updated.replace('</w:sectPr>', '<w:footerReference w:type="default" r:id="rId101"/></w:sectPr>');
+        }
+        return updated;
+      });
+    }
+
+    zip.file('word/document.xml', documentXml);
+
+    // Write modified DOCX
+    const newDocxBuffer = zip.generate({ type: 'nodebuffer' });
+    fs.writeFileSync(docxPath, newDocxBuffer);
+
+  } catch (error) {
+    console.error('Failed to add headers/footers to DOCX:', error);
+    // Don't fail the export, just log the error
+  }
+}
+
 // Enhanced Word Export with Template Support
 async function exportWordWithTemplate() {
   if (!currentFile) {
@@ -638,8 +1089,8 @@ async function exportWordWithTemplate() {
 
     if (result.canceled) return;
 
-    // Create exporter instance with selected template and start page
+    // Create exporter instance with selected template, start page, and page settings
-    const exporter = new WordTemplateExporter(wordTemplatePath, templateStartPage);
+    const exporter = new WordTemplateExporter(wordTemplatePath, templateStartPage, pageSettings);
 
     // Convert markdown to DOCX
     await exporter.convert(content, result.filePath);
@@ -962,6 +1413,42 @@ function performExportWithOptions(format, options) {
       pandocCmd += ` --pdf-engine="${pdfEngine}"`;
       if (options.geometry) pandocCmd += ` -V geometry:"${options.geometry}"`;
 
+      // Add monospace font settings for code blocks (ASCII art preservation)
+      pandocCmd += ' -V monofont="Consolas"';
+      pandocCmd += ' --highlight-style=tango';
+
+      // Add header/footer if enabled
+      if (headerFooterSettings.enabled) {
+        const filename = currentFile ? path.basename(currentFile, path.extname(currentFile)) : 'document';
+        const metadata = { filename, title: filename, author: '' };
+
+        const headerLeft = processDynamicFields(headerFooterSettings.header.left, metadata);
+        const headerCenter = processDynamicFields(headerFooterSettings.header.center, metadata);
+        const headerRight = processDynamicFields(headerFooterSettings.header.right, metadata);
+        const footerLeft = processDynamicFields(headerFooterSettings.footer.left, metadata);
+        const footerCenter = processDynamicFields(headerFooterSettings.footer.center, metadata);
+        const footerRight = processDynamicFields(headerFooterSettings.footer.right, metadata);
+
+        // Create LaTeX header
+        const latexHeader = `
+\\usepackage{fancyhdr}
+\\pagestyle{fancy}
+\\fancyhf{}
+\\lhead{${headerLeft.replace(/\\/g, '\\\\')}}
+\\chead{${headerCenter.replace(/\\/g, '\\\\')}}
+\\rhead{${headerRight.replace(/\\/g, '\\\\')}}
+\\lfoot{${footerLeft.replace(/\\/g, '\\\\')}}
+\\cfoot{${footerCenter.replace(/[$]PAGE[$]/g, '\\\\thepage').replace(/[$]TOTAL[$]/g, '\\\\pageref{LastPage}').replace(/\\/g, '\\\\')}}
+\\rfoot{${footerRight.replace(/\\/g, '\\\\')}}
+\\renewcommand{\\headrulewidth}{0.4pt}
+\\renewcommand{\\footrulewidth}{0.4pt}
+`;
+        const headerFile = path.join(require('os').tmpdir(), `header_export_${Date.now()}.tex`);
+        fs.writeFileSync(headerFile, latexHeader, 'utf-8');
+        pandocCmd += ` --include-in-header="${headerFile}"`;
+        pandocCmd += ' --variable header-includes="\\\\usepackage{lastpage}"';
+      }
+
       // Try with specified PDF engine
       exec(pandocCmd, (error) => {
         if (error) {
@@ -975,6 +1462,15 @@ function performExportWithOptions(format, options) {
     } else if (format === 'docx') {
       pandocCmd += ' -t docx';
       exportWithPandoc(pandocCmd, outputFile, format);
+    } else if (format === 'pptx') {
+      // Add PowerPoint footer if enabled
+      if (headerFooterSettings.enabled && headerFooterSettings.footer.center) {
+        const filename = currentFile ? path.basename(currentFile, path.extname(currentFile)) : 'document';
+        const metadata = { filename, title: filename, author: '' };
+        const footerText = processDynamicFields(headerFooterSettings.footer.center, metadata);
+        pandocCmd += ` --variable footer="${footerText}"`;
+      }
+      exportWithPandoc(pandocCmd, outputFile, format);
     } else {
       // Generic export for other formats
       exportWithPandoc(pandocCmd, outputFile, format);
@@ -996,9 +1492,45 @@ function tryPdfFallback(inputFile, outputFile, engines, index, options, lastErro
   const engine = engines[index];
   let pandocCmd = `${getPandocPath()} "${inputFile}" --pdf-engine=${engine} -o "${outputFile}"`;
 
+  // Add monospace font settings for code blocks (ASCII art preservation)
+  pandocCmd += ' -V monofont="Consolas"';
+  pandocCmd += ' --highlight-style=tango';
+
   // Add geometry if specified
   if (options.geometry) pandocCmd = pandocCmd.replace(` -o `, ` -V geometry:"${options.geometry}" -o `);
 
+  // Add header/footer if enabled
+  if (headerFooterSettings.enabled) {
+    const filename = path.basename(inputFile, path.extname(inputFile));
+    const metadata = { filename, title: filename, author: options.metadata?.author || '' };
+
+    const headerLeft = processDynamicFields(headerFooterSettings.header.left, metadata);
+    const headerCenter = processDynamicFields(headerFooterSettings.header.center, metadata);
+    const headerRight = processDynamicFields(headerFooterSettings.header.right, metadata);
+    const footerLeft = processDynamicFields(headerFooterSettings.footer.left, metadata);
+    const footerCenter = processDynamicFields(headerFooterSettings.footer.center, metadata);
+    const footerRight = processDynamicFields(headerFooterSettings.footer.right, metadata);
+
+    // Create LaTeX header for fancyhdr
+    const latexHeader = `
+\\usepackage{fancyhdr}
+\\usepackage{lastpage}
+\\pagestyle{fancy}
+\\fancyhf{}
+\\lhead{${headerLeft.replace(/\\/g, '\\\\')}}
+\\chead{${headerCenter.replace(/\\/g, '\\\\')}}
+\\rhead{${headerRight.replace(/\\/g, '\\\\')}}
+\\lfoot{${footerLeft.replace(/\\/g, '\\\\')}}
+\\cfoot{${footerCenter.replace(/\$PAGE\$/g, '\\\\thepage').replace(/\$TOTAL\$/g, '\\\\pageref{LastPage}').replace(/\\/g, '\\\\')}}
+\\rfoot{${footerRight.replace(/\\/g, '\\\\')}}
+\\renewcommand{\\headrulewidth}{0.4pt}
+\\renewcommand{\\footrulewidth}{0.4pt}
+`;
+    const headerFile = path.join(require('os').tmpdir(), `header_fallback_${Date.now()}.tex`);
+    fs.writeFileSync(headerFile, latexHeader, 'utf-8');
+    pandocCmd += ` --include-in-header="${headerFile}"`;
+  }
+
   // Add all other options
   if (options.template && options.template !== 'default') {
     pandocCmd += ` --template="${options.template}"`;
@@ -1034,7 +1566,7 @@ function showExportSuccess(outputFile) {
 function exportWithPandoc(pandocCmd, outputFile, format) {
   console.log(`Executing Pandoc command: ${pandocCmd}`);
 
-  exec(pandocCmd, (error, stdout, stderr) => {
+  exec(pandocCmd, async (error, stdout, stderr) => {
     if (error) {
       console.error(`Pandoc error for ${format}:`, error);
       console.error(`Pandoc stderr:`, stderr);
@@ -1061,6 +1593,50 @@ function exportWithPandoc(pandocCmd, outputFile, format) {
       if (stderr) {
         console.warn(`Pandoc stderr (non-fatal):`, stderr);
       }
+
+      // Set page size for DOCX
+      if (format === 'docx') {
+        try {
+          await setDocxPageSize(outputFile);
+          console.log('Page size set for DOCX');
+        } catch (pageSizeError) {
+          console.error('Error setting page size for DOCX:', pageSizeError);
+        }
+      }
+
+      // Add headers/footers to DOCX if enabled
+      if (format === 'docx' && headerFooterSettings.enabled) {
+        try {
+          const filename = currentFile ? path.basename(currentFile, path.extname(currentFile)) : 'document';
+          const metadata = {
+            filename: filename,
+            title: filename,
+            author: ''
+          };
+          await addHeaderFooterToDocx(outputFile, metadata);
+          console.log('Headers/footers added to DOCX');
+        } catch (hfError) {
+          console.error('Error adding headers/footers to DOCX:', hfError);
+          // Continue with success message even if header/footer fails
+        }
+      }
+
+      // Set page size for ODT
+      if (format === 'odt') {
+        try {
+          await setDocxPageSize(outputFile); // ODT has similar structure
+          console.log('Page size set for ODT');
+        } catch (pageSizeError) {
+          console.error('Error setting page size for ODT:', pageSizeError);
+        }
+      }
+
+      // Add headers/footers to ODT if enabled
+      if (format === 'odt' && headerFooterSettings.enabled) {
+        // ODT format is similar to DOCX in structure, we could implement this
+        console.log('ODT header/footer support not yet implemented');
+      }
+
       showExportSuccess(outputFile);
     }
   });
@@ -1116,21 +1692,37 @@ function exportToHTML(outputFile) {
             margin-top: 1.5em;
             margin-bottom: 0.5em;
         }
+        /* Inline code */
         code {
             background: #f4f4f4;
             padding: 2px 4px;
             border-radius: 3px;
             font-family: Consolas, Monaco, 'Courier New', monospace;
+            font-size: 0.9em;
         }
+        /* Code blocks - critical for ASCII art preservation */
         pre {
-            background: #f4f4f4;
+            background: #f5f5f5;
             padding: 1em;
             border-radius: 5px;
             overflow-x: auto;
+            white-space: pre;
+            word-wrap: normal;
+            font-family: Consolas, Monaco, 'Courier New', monospace;
+            font-size: 13px;
+            line-height: 1.4;
+            border: 1px solid #e0e0e0;
+            margin: 1em 0;
         }
         pre code {
             background: transparent;
             padding: 0;
+            font-family: inherit;
+            font-size: inherit;
+            line-height: inherit;
+            white-space: pre;
+            word-wrap: normal;
+            display: block;
         }
         blockquote {
             border-left: 4px solid #ddd;
@@ -1162,6 +1754,18 @@ function exportToHTML(outputFile) {
             max-width: 100%;
             height: auto;
         }
+        @media print {
+            pre {
+                white-space: pre;
+                word-wrap: normal;
+                overflow: visible;
+                page-break-inside: avoid;
+            }
+            pre code {
+                white-space: pre;
+                word-wrap: normal;
+            }
+        }
     </style>
 </head>
 <body>
@@ -1204,21 +1808,38 @@ function exportToPDFElectron(outputFile) {
             margin-top: 1.5em;
             margin-bottom: 0.5em;
         }
+        /* Inline code */
         code {
             background: #f4f4f4;
             padding: 2px 4px;
             border-radius: 3px;
             font-family: Consolas, Monaco, 'Courier New', monospace;
+            font-size: 0.9em;
         }
+        /* Code blocks - critical for ASCII art preservation */
         pre {
-            background: #f4f4f4;
+            background: #f5f5f5;
             padding: 1em;
             border-radius: 5px;
-            overflow-x: auto;
+            overflow-x: visible;
+            overflow-y: visible;
+            white-space: pre;
+            word-wrap: normal;
+            font-family: Consolas, Monaco, 'Courier New', monospace;
+            font-size: 12px;
+            line-height: 1.4;
+            border: 1px solid #e0e0e0;
+            margin: 1em 0;
         }
         pre code {
             background: transparent;
             padding: 0;
+            font-family: inherit;
+            font-size: inherit;
+            line-height: inherit;
+            white-space: pre;
+            word-wrap: normal;
+            display: block;
         }
         blockquote {
             border-left: 4px solid #ddd;
@@ -1245,6 +1866,16 @@ function exportToPDFElectron(outputFile) {
         }
         @media print {
             body { padding: 20px; }
+            pre {
+                white-space: pre;
+                word-wrap: normal;
+                overflow: visible;
+                page-break-inside: avoid;
+            }
+            pre code {
+                white-space: pre;
+                word-wrap: normal;
+            }
         }
     </style>
 </head>
@@ -1734,16 +2365,75 @@ function performBatchConversion(inputFolder, outputFolder, format, options) {
     if (options.bibliography) pandocCmd += ` --bibliography="${options.bibliography}"`;
     if (options.csl) pandocCmd += ` --csl="${options.csl}"`;
 
-    // Add PDF-specific options
+    // Add PDF-specific options with header/footer support
     if (format === 'pdf') {
       const pdfEngine = options.pdfEngine || 'xelatex';
-      pandocCmd += ` --pdf-engine="${pdfEngine}"`;
+      pandocCmd += ` --pdf-engine=${pdfEngine}`;
       if (options.geometry) pandocCmd += ` -V geometry:"${options.geometry}"`;
+
+      // Add monospace font settings for code blocks (ASCII art preservation)
+      pandocCmd += ' -V monofont="Consolas"';
+      pandocCmd += ' --highlight-style=tango';
+
+      // Add header/footer if enabled
+      if (headerFooterSettings.enabled) {
+        const filename = path.basename(inputFile, path.extname(inputFile));
+        const metadata = { filename, title: filename, author: '' };
+
+        const headerLeft = processDynamicFields(headerFooterSettings.header.left, metadata);
+        const headerCenter = processDynamicFields(headerFooterSettings.header.center, metadata);
+        const headerRight = processDynamicFields(headerFooterSettings.header.right, metadata);
+        const footerLeft = processDynamicFields(headerFooterSettings.footer.left, metadata);
+        const footerCenter = processDynamicFields(headerFooterSettings.footer.center, metadata);
+        const footerRight = processDynamicFields(headerFooterSettings.footer.right, metadata);
+
+        // Create LaTeX header
+        const latexHeader = `
+\\usepackage{fancyhdr}
+\\pagestyle{fancy}
+\\fancyhf{}
+\\lhead{${headerLeft.replace(/\\/g, '\\\\')}}
+\\chead{${headerCenter.replace(/\\/g, '\\\\')}}
+\\rhead{${headerRight.replace(/\\/g, '\\\\')}}
+\\lfoot{${footerLeft.replace(/\\/g, '\\\\')}}
+\\cfoot{${footerCenter.replace(/[$]PAGE[$]/g, '\\\\thepage').replace(/[$]TOTAL[$]/g, '\\\\pageref{LastPage}').replace(/\\/g, '\\\\')}}
+\\rfoot{${footerRight.replace(/\\/g, '\\\\')}}
+\\renewcommand{\\headrulewidth}{0.4pt}
+\\renewcommand{\\footrulewidth}{0.4pt}
+`;
+        const headerFile = path.join(require('os').tmpdir(), `header_batch_${Date.now()}.tex`);
+        fs.writeFileSync(headerFile, latexHeader, 'utf-8');
+        pandocCmd += ` --include-in-header="${headerFile}"`;
+        pandocCmd += ' --variable header-includes="\\\\usepackage{lastpage}"';
+      }
+    }
+
+    // Add DOCX-specific handling
+    if (format === 'docx') {
+      pandocCmd += ' -t docx';
+    }
+
+    // Add PowerPoint footer if enabled
+    if (format === 'pptx' && headerFooterSettings.enabled && headerFooterSettings.footer.center) {
+      const filename = path.basename(inputFile, path.extname(inputFile));
+      const metadata = { filename, title: filename, author: '' };
+      const footerText = processDynamicFields(headerFooterSettings.footer.center, metadata);
+      pandocCmd += ` --variable footer="${footerText}"`;
     }
 
     // Execute conversion
-    exec(pandocCmd, (error, stdout, stderr) => {
+    exec(pandocCmd, async (error, stdout, stderr) => {
       if (!error) {
+        // Add headers/footers to DOCX if enabled
+        if (format === 'docx' && headerFooterSettings.enabled) {
+          try {
+            const filename = path.basename(inputFile, path.extname(inputFile));
+            const metadata = { filename, title: filename, author: '' };
+            await addHeaderFooterToDocx(outputFile, metadata);
+          } catch (hfError) {
+            console.error('Batch: Error adding headers/footers to DOCX:', hfError);
+          }
+        }
         completedCount++;
       }
 
@@ -1880,21 +2570,104 @@ function buildPandocCommand(content, format, outputPath) {
 
   let command = `pandoc "${inputFile}" -o "${outputPath}"`;
 
+  // Get metadata for dynamic fields
+  const filename = currentFile ? path.basename(currentFile, path.extname(currentFile)) : 'document';
+  const metadata = {
+    filename: filename,
+    title: filename,
+    author: '',
+  };
+
   switch (format) {
     case 'pdf':
       command += ' --pdf-engine=xelatex --variable geometry:margin=1in';
+
+      // Add page size and orientation
+      const pageSize = PAGE_SIZES[pageSettings.size];
+      if (pageSize) {
+        command += ` -V geometry:papersize=${pageSize.pandoc}`;
+      } else if (pageSettings.customWidth && pageSettings.customHeight) {
+        // Custom page size
+        command += ` -V geometry:paperwidth=${pageSettings.customWidth}`;
+        command += ` -V geometry:paperheight=${pageSettings.customHeight}`;
+      }
+
+      // Add orientation
+      if (pageSettings.orientation === 'landscape') {
+        command += ' -V geometry:landscape';
+      }
+
+      // Add monospace font settings for code blocks (ASCII art preservation)
+      command += ' -V monofont="Consolas"';
+      command += ' --highlight-style=tango';
+
+      // Add header/footer if enabled
+      if (headerFooterSettings.enabled) {
+        // Process dynamic fields
+        const headerLeft = processDynamicFields(headerFooterSettings.header.left, metadata);
+        const headerCenter = processDynamicFields(headerFooterSettings.header.center, metadata);
+        const headerRight = processDynamicFields(headerFooterSettings.header.right, metadata);
+        const footerLeft = processDynamicFields(headerFooterSettings.footer.left, metadata);
+        const footerCenter = processDynamicFields(headerFooterSettings.footer.center, metadata);
+        const footerRight = processDynamicFields(headerFooterSettings.footer.right, metadata);
+
+        // Add Pandoc variables for fancyhdr package
+        if (headerLeft) command += ` --variable header-left="${headerLeft}"`;
+        if (headerCenter) command += ` --variable header-center="${headerCenter}"`;
+        if (headerRight) command += ` --variable header-right="${headerRight}"`;
+        if (footerLeft) command += ` --variable footer-left="${footerLeft}"`;
+        if (footerCenter) command += ` --variable footer-center="${footerCenter}"`;
+        if (footerRight) command += ` --variable footer-right="${footerRight}"`;
+
+        // Create custom LaTeX header with fancyhdr
+        const latexHeader = `
+\\usepackage{fancyhdr}
+\\pagestyle{fancy}
+\\fancyhf{}
+\\lhead{${headerLeft.replace(/\\/g, '\\\\')}}
+\\chead{${headerCenter.replace(/\\/g, '\\\\')}}
+\\rhead{${headerRight.replace(/\\/g, '\\\\')}}
+\\lfoot{${footerLeft.replace(/\\/g, '\\\\')}}
+\\cfoot{${footerCenter.replace(/[$]PAGE[$]/g, '\\\\thepage').replace(/[$]TOTAL[$]/g, '\\\\pageref{LastPage}').replace(/\\/g, '\\\\')}}
+\\rfoot{${footerRight.replace(/\\/g, '\\\\')}}
+\\renewcommand{\\headrulewidth}{0.4pt}
+\\renewcommand{\\footrulewidth}{0.4pt}
+`;
+        const headerFile = path.join(require('os').tmpdir(), `header_${Date.now()}.tex`);
+        fs.writeFileSync(headerFile, latexHeader, 'utf-8');
+        command += ` --include-in-header="${headerFile}"`;
+
+        // Add lastpage package for $TOTAL$ support
+        command += ' --variable header-includes="\\\\usepackage{lastpage}"';
+      }
       break;
+
     case 'html':
       command += ' --self-contained --css';
       break;
+
     case 'docx':
       command += ' --reference-doc';
+
+      // For DOCX, header/footer are handled via reference document or separate processing
+      // We'll add a note that DOCX headers/footers require reference doc or post-processing
       break;
+
+    case 'odt':
+      // ODT headers/footers are handled via reference document
+      break;
+
     case 'latex':
       command += ' --standalone';
       break;
+
     case 'pptx':
       command += ' --slide-level=2';
+      // PowerPoint footer can be added with --variable
+      if (headerFooterSettings.enabled && headerFooterSettings.footer.center) {
+        const footerText = processDynamicFields(headerFooterSettings.footer.center, metadata);
+        command += ` --variable footer="${footerText}"`;
+      }
       break;
   }
 
@@ -1906,6 +2679,18 @@ app.whenReady().then(() => {
   wordTemplatePath = store.get('wordTemplatePath', null);
   templateStartPage = store.get('templateStartPage', 3);
 
+  // Load header/footer settings
+  const savedHFSettings = store.get('headerFooterSettings', null);
+  if (savedHFSettings) {
+    headerFooterSettings = savedHFSettings;
+  }
+
+  // Load page size settings
+  const savedPageSettings = store.get('pageSettings', null);
+  if (savedPageSettings) {
+    pageSettings = savedPageSettings;
+  }
+
   // Check for command line conversion requests
   const args = process.argv.slice(2);
   if (args.length >= 2 && (args[0] === '--convert' || args[0] === '--convert-to')) {

src/styles.css

@@ -10,6 +10,10 @@ body {
     height: 100vh;
 }
 
+.hidden {
+    display: none !important;
+}
+
 .container {
     display: flex;
     flex-direction: column;
@@ -156,7 +160,53 @@ body {
 }
 
 .pane:first-child {
-    border-right: 1px solid #ddd;
+    border-right: none;
+}
+
+/* Pane Resizer */
+.pane-resizer {
+    width: 6px;
+    background: #e0e0e0;
+    cursor: col-resize;
+    position: relative;
+    flex-shrink: 0;
+    transition: background 0.2s;
+}
+
+.pane-resizer:hover {
+    background: #999;
+}
+
+.pane-resizer:active {
+    background: #666;
+}
+
+/* Preview Header */
+.preview-header {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 4px 8px;
+    background: #f6f8fa;
+    border-bottom: 1px solid #dfe2e5;
+    min-height: 32px;
+}
+
+.preview-popout-btn {
+    background: transparent;
+    border: 1px solid #d0d7de;
+    border-radius: 4px;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #57606a;
+    transition: all 0.2s;
+}
+
+.preview-popout-btn:hover {
+    background: #f3f4f6;
+    border-color: #8c959f;
+    color: #24292f;
 }
 
 .editor-textarea {
@@ -207,10 +257,15 @@ body {
     background: #fff;
 }
 
-#preview {
+/* GitHub Light Theme for Preview (Default) */
+#preview, [id^="preview-"], .preview-content {
     max-width: 800px;
     margin: 0 auto;
     font-size: 15px;
+    padding: 20px;
+    background: #ffffff;
+    color: #24292f;
+    line-height: 1.6;
 }
 
 /* Status Bar */
@@ -251,22 +306,25 @@ body {
     line-height: 1.6;
 }
 
-#preview code, .preview-content code {
+#preview code, .preview-content code, [id^="preview-"] code {
     padding: 0.2em 0.4em;
     margin: 0;
     font-size: 85%;
-    background-color: rgba(27,31,35,0.05);
+    background-color: #f6f8fa;
-    border-radius: 3px;
+    border: 1px solid #d0d7de;
-    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+    border-radius: 6px;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+    color: #24292f;
 }
 
-#preview pre, .preview-content pre {
+#preview pre, .preview-content pre, [id^="preview-"] pre {
     padding: 16px;
     overflow: auto;
     font-size: 85%;
     line-height: 1.45;
     background-color: #f6f8fa;
-    border-radius: 3px;
+    border: 1px solid #d0d7de;
+    border-radius: 6px;
     margin-bottom: 16px;
 }
 
@@ -289,6 +347,126 @@ body {
     margin-bottom: 16px;
 }
 
+/* GitHub Dark Theme for Preview */
+body.theme-dark #preview,
+body.theme-dark [id^="preview-"],
+body.theme-dark .preview-content {
+    background: #0d1117;
+    color: #c9d1d9;
+}
+
+body.theme-dark #preview h1,
+body.theme-dark [id^="preview-"] h1,
+body.theme-dark .preview-content h1 {
+    color: #c9d1d9;
+    border-bottom-color: #21262d;
+}
+
+body.theme-dark #preview h2,
+body.theme-dark [id^="preview-"] h2,
+body.theme-dark .preview-content h2 {
+    color: #c9d1d9;
+    border-bottom-color: #21262d;
+}
+
+body.theme-dark #preview h3,
+body.theme-dark #preview h4,
+body.theme-dark #preview h5,
+body.theme-dark #preview h6,
+body.theme-dark [id^="preview-"] h3,
+body.theme-dark [id^="preview-"] h4,
+body.theme-dark [id^="preview-"] h5,
+body.theme-dark [id^="preview-"] h6,
+body.theme-dark .preview-content h3,
+body.theme-dark .preview-content h4,
+body.theme-dark .preview-content h5,
+body.theme-dark .preview-content h6 {
+    color: #c9d1d9;
+}
+
+body.theme-dark #preview p,
+body.theme-dark [id^="preview-"] p,
+body.theme-dark .preview-content p {
+    color: #c9d1d9;
+}
+
+body.theme-dark #preview code,
+body.theme-dark [id^="preview-"] code,
+body.theme-dark .preview-content code {
+    background-color: #161b22;
+    border-color: #30363d;
+    color: #c9d1d9;
+}
+
+body.theme-dark #preview pre,
+body.theme-dark [id^="preview-"] pre,
+body.theme-dark .preview-content pre {
+    background-color: #161b22;
+    border-color: #30363d;
+}
+
+body.theme-dark #preview blockquote,
+body.theme-dark [id^="preview-"] blockquote,
+body.theme-dark .preview-content blockquote {
+    color: #8b949e;
+    border-left-color: #3b434b;
+}
+
+body.theme-dark #preview a,
+body.theme-dark [id^="preview-"] a,
+body.theme-dark .preview-content a {
+    color: #58a6ff;
+}
+
+body.theme-dark #preview a:hover,
+body.theme-dark [id^="preview-"] a:hover,
+body.theme-dark .preview-content a:hover {
+    color: #79c0ff;
+}
+
+body.theme-dark #preview table,
+body.theme-dark [id^="preview-"] table,
+body.theme-dark .preview-content table {
+    border-color: #30363d;
+}
+
+body.theme-dark #preview table th,
+body.theme-dark [id^="preview-"] table th,
+body.theme-dark .preview-content table th {
+    background-color: #161b22;
+    color: #c9d1d9;
+    border-color: #30363d;
+}
+
+body.theme-dark #preview table td,
+body.theme-dark [id^="preview-"] table td,
+body.theme-dark .preview-content table td {
+    border-color: #30363d;
+    color: #c9d1d9;
+}
+
+body.theme-dark #preview hr,
+body.theme-dark [id^="preview-"] hr,
+body.theme-dark .preview-content hr {
+    background-color: #21262d;
+    border-color: #21262d;
+}
+
+body.theme-dark #preview ul,
+body.theme-dark #preview ol,
+body.theme-dark [id^="preview-"] ul,
+body.theme-dark [id^="preview-"] ol,
+body.theme-dark .preview-content ul,
+body.theme-dark .preview-content ol {
+    color: #c9d1d9;
+}
+
+body.theme-dark #preview li,
+body.theme-dark [id^="preview-"] li,
+body.theme-dark .preview-content li {
+    color: #c9d1d9;
+}
+
 #preview ul, #preview ol, .preview-content ul, .preview-content ol {
     padding-left: 2em;
     margin-bottom: 16px;
@@ -326,10 +504,11 @@ body {
 
 #preview table th, .preview-content table th {
     font-weight: 600;
+    background-color: #f6f8fa;
 }
 
 #preview table tr:nth-child(2n), .preview-content table tr:nth-child(2n) {
-    background-color: #f6f8fa;
+    background-color: #ffffff;
 }
 
 /* Theme: Dark */
@@ -1516,6 +1695,42 @@ body.theme-github .line-numbers {
     color: #586069;
 }
 
+/* Export Profiles Styles */
+.export-profiles {
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+}
+
+.profile-controls {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-top: 8px;
+}
+
+.profile-controls select {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.profile-controls button {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: #f5f5f5;
+    cursor: pointer;
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.profile-controls button:hover {
+    background: #e8e8e8;
+}
+
 /* Advanced Export Toggle Styles */
 .export-mode-toggle {
     border-bottom: 1px solid #ddd;
@@ -3158,3 +3373,431 @@ body.printing-no-styles .preview-content pre,
     color: #333 !important;
     border-color: #999 !important;
 }
+
+/* ================================
+   Header & Footer Dialog Styles
+   ================================ */
+
+.hf-enable-section {
+    margin-bottom: 20px;
+    padding: 15px;
+    background: var(--bg-secondary, #f5f5f5);
+    border-radius: 5px;
+}
+
+.hf-enable-section label {
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.hf-enable-section input[type="checkbox"] {
+    margin-right: 10px;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+
+#hf-config-content {
+    transition: opacity 0.3s ease;
+}
+
+#hf-config-content.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.hf-section {
+    margin-bottom: 25px;
+    padding: 20px;
+    background: var(--bg-tertiary, #fafafa);
+    border-radius: 8px;
+    border: 1px solid var(--border-color, #e0e0e0);
+}
+
+.hf-section h4 {
+    margin: 0 0 15px 0;
+    color: var(--text-primary, #333);
+    font-size: 16px;
+    border-bottom: 2px solid var(--accent-color, #007bff);
+    padding-bottom: 8px;
+}
+
+.hf-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.hf-column {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.hf-column label {
+    font-weight: 600;
+    margin-bottom: 5px;
+    color: var(--text-secondary, #666);
+    font-size: 13px;
+}
+
+.hf-column input[type="text"] {
+    padding: 8px 35px 8px 10px;
+    border: 1px solid var(--border-color, #ccc);
+    border-radius: 4px;
+    font-size: 14px;
+    background: var(--input-bg, white);
+    color: var(--text-primary, #333);
+    transition: border-color 0.2s ease;
+}
+
+.hf-column input[type="text"]:focus {
+    outline: none;
+    border-color: var(--accent-color, #007bff);
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+}
+
+.field-insert-btn {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: var(--accent-color, #007bff);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    transition: all 0.2s ease;
+}
+
+.field-insert-btn:hover {
+    background: var(--accent-hover, #0056b3);
+    transform: scale(1.05);
+}
+
+.field-insert-btn:active {
+    transform: scale(0.95);
+}
+
+.hf-logo-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 15px;
+    background: var(--bg-secondary, #f5f5f5);
+    border-radius: 6px;
+    margin-top: 10px;
+}
+
+.hf-logo-row label {
+    font-weight: 600;
+    color: var(--text-secondary, #666);
+    min-width: 120px;
+}
+
+.hf-logo-row input[type="file"] {
+    flex: 1;
+    padding: 6px 10px;
+    border: 1px solid var(--border-color, #ccc);
+    border-radius: 4px;
+    background: var(--input-bg, white);
+    color: var(--text-primary, #333);
+    font-size: 13px;
+    cursor: pointer;
+}
+
+.hf-logo-row input[type="file"]::-webkit-file-upload-button {
+    padding: 5px 12px;
+    background: var(--button-bg, #6c757d);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 10px;
+}
+
+.hf-logo-row input[type="file"]::-webkit-file-upload-button:hover {
+    background: var(--button-hover, #5a6268);
+}
+
+.browse-btn {
+    padding: 6px 12px;
+    background: var(--accent-color, #007bff);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: background 0.2s ease;
+    margin-right: 8px;
+}
+
+.browse-btn:hover {
+    background: var(--accent-hover, #0056b3);
+}
+
+.clear-btn {
+    padding: 6px 12px;
+    background: var(--danger-color, #dc3545);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: background 0.2s ease;
+}
+
+.clear-btn:hover {
+    background: var(--danger-hover, #c82333);
+}
+
+.logo-preview {
+    font-size: 12px;
+    color: var(--text-secondary, #666);
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.hf-help {
+    margin-top: 20px;
+    padding: 15px;
+    background: var(--info-bg, #e7f3ff);
+    border-left: 4px solid var(--info-color, #007bff);
+    border-radius: 4px;
+}
+
+.hf-help p {
+    margin: 0 0 10px 0;
+    font-weight: 600;
+    color: var(--text-primary, #333);
+}
+
+.hf-help ul {
+    margin: 0;
+    padding-left: 20px;
+    list-style-type: none;
+}
+
+.hf-help li {
+    margin-bottom: 6px;
+    color: var(--text-secondary, #555);
+    font-size: 13px;
+}
+
+.hf-help code {
+    background: rgba(0, 123, 255, 0.1);
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    color: var(--accent-color, #007bff);
+    font-weight: 600;
+}
+
+/* Field Picker Dialog */
+.field-picker-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+}
+
+.field-option {
+    padding: 12px 16px;
+    background: var(--bg-secondary, #f5f5f5);
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 6px;
+    text-align: left;
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--text-primary, #333);
+    transition: all 0.2s ease;
+}
+
+.field-option:hover {
+    background: var(--accent-color, #007bff);
+    color: white;
+    border-color: var(--accent-color, #007bff);
+    transform: translateX(5px);
+}
+
+/* Dark Theme Support for Header/Footer Dialog */
+body[data-theme="dark"] .hf-enable-section,
+body[data-theme="dark"] .hf-logo-row {
+    background: #2d2d2d;
+}
+
+body[data-theme="dark"] .hf-section {
+    background: #252525;
+    border-color: #404040;
+}
+
+body[data-theme="dark"] .hf-column input[type="text"],
+body[data-theme="dark"] .hf-logo-row input[type="file"] {
+    background: #2d2d2d;
+    color: #e0e0e0;
+    border-color: #404040;
+}
+
+body[data-theme="dark"] .hf-help {
+    background: rgba(0, 123, 255, 0.15);
+    border-left-color: #0d6efd;
+}
+
+body[data-theme="dark"] .field-option {
+    background: #2d2d2d;
+    border-color: #404040;
+    color: #e0e0e0;
+}
+
+body[data-theme="dark"] .field-option:hover {
+    background: #0d6efd;
+    color: white;
+}
+/* Mermaid Diagram Styles */
+.mermaid {
+    background: #f9f9f9;
+    padding: 20px;
+    border-radius: 8px;
+    margin: 20px 0;
+    text-align: center;
+    border: 1px solid #e0e0e0;
+}
+
+.mermaid svg {
+    max-width: 100%;
+    height: auto;
+}
+
+body.theme-dark .mermaid {
+    background: #2d2d2d;
+    border-color: #444;
+}
+
+body.theme-solarized .mermaid {
+    background: #fdf6e3;
+    border-color: #eee8d5;
+}
+
+body.theme-monokai .mermaid {
+    background: #2f2f2f;
+    border-color: #49483e;
+}
+
+body.theme-github .mermaid {
+    background: #f6f8fa;
+    border-color: #e1e4e8;
+}
+
+/* Command Palette Styles */
+.command-palette {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 100px;
+    z-index: 10000;
+}
+
+.command-palette.hidden {
+    display: none;
+}
+
+.command-palette-content {
+    background: #fff;
+    border-radius: 12px;
+    width: 600px;
+    max-width: 90%;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}
+
+#command-search {
+    width: 100%;
+    padding: 20px;
+    font-size: 18px;
+    border: none;
+    border-bottom: 1px solid #e0e0e0;
+    outline: none;
+}
+
+.command-list {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.command-item {
+    padding: 12px 20px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background 0.15s;
+}
+
+.command-item:hover,
+.command-item.selected {
+    background: #f0f0f0;
+}
+
+.command-name {
+    font-weight: 500;
+}
+
+.command-shortcut {
+    font-size: 12px;
+    color: #666;
+    background: #f5f5f5;
+    padding: 3px 8px;
+    border-radius: 3px;
+}
+
+.command-palette-footer {
+    padding: 12px 20px;
+    background: #f9f9f9;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    gap: 20px;
+    font-size: 12px;
+    color: #666;
+}
+
+/* Dark theme support for command palette */
+body.theme-dark .command-palette-content {
+    background: #2d2d2d;
+    color: #f0f0f0;
+}
+
+body.theme-dark #command-search {
+    background: #2d2d2d;
+    color: #f0f0f0;
+    border-color: #444;
+}
+
+body.theme-dark .command-item:hover,
+body.theme-dark .command-item.selected {
+    background: #3d3d3d;
+}
+
+body.theme-dark .command-shortcut {
+    background: #3d3d3d;
+    color: #ccc;
+}
+
+body.theme-dark .command-palette-footer {
+    background: #252525;
+    border-color: #444;
+    color: #999;
+}

src/wordTemplateExporter.js

@@ -10,9 +10,10 @@ const PizZip = require('pizzip');
 const Docx = require('docx4js').default;
 
 class WordTemplateExporter {
-    constructor(templatePath, startPage = 3) {
+    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
     }
 
     /**
@@ -25,7 +26,12 @@ class WordTemplateExporter {
             const zip = new PizZip(templateBuffer);
 
             // Extract document.xml
-            const documentXml = zip.file('word/document.xml').asText();
+            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);
@@ -47,6 +53,56 @@ class WordTemplateExporter {
         }
     }
 
+    /**
+     * 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
@@ -253,23 +309,42 @@ class WordTemplateExporter {
     }
 
     /**
-     * Create code block XML
+     * 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 escapedCode = this.escapeXml(code);
+        const lines = code.split('\n');
+        let xml = '';
 
-        return `<w:p>
+        lines.forEach((line, index) => {
-            <w:pPr>
+            const escapedLine = this.escapeXml(line);
-                <w:pStyle w:val="Code"/>
+
-            </w:pPr>
+            // Each line gets its own paragraph with exact spacing and no wrapping
-            <w:r>
+            // Shading (shd) is at paragraph level so background extends full width
-                <w:rPr>
+            xml += `<w:p>
-                    <w:rFonts w:ascii="Consolas" w:hAnsi="Consolas"/>
+                <w:pPr>
-                    <w:sz w:val="18"/>
+                    <w:pStyle w:val="Normal"/>
-                </w:rPr>
+                    <w:shd w:val="clear" w:color="auto" w:fill="F5F5F5"/>
-                <w:t xml:space="preserve">${escapedCode}</w:t>
+                    <w:spacing w:before="${index === 0 ? '120' : '0'}" w:after="${index === lines.length - 1 ? '120' : '0'}" w:line="240" w:lineRule="exact"/>
-            </w:r>
+                    <w:ind w:left="284" w:right="284"/>
-        </w:p>`;
+                    <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;
     }
 
     /**
@@ -287,6 +362,7 @@ class WordTemplateExporter {
 
     /**
      * 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
@@ -308,13 +384,19 @@ class WordTemplateExporter {
         // 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
+        // Table properties - use template table style with full width
         tableXml += `<w:tblPr>
             <w:tblStyle w:val="TableGrid"/>
-            <w:tblW w:w="5000" w:type="pct"/>
+            <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"/>
@@ -326,20 +408,22 @@ class WordTemplateExporter {
             </w:tblBorders>
         </w:tblPr>`;
 
-        // Table grid
+        // Table grid with explicit column widths
         tableXml += '<w:tblGrid>';
         for (let i = 0; i < numCols; i++) {
-            tableXml += '<w:gridCol/>';
+            tableXml += `<w:gridCol w:w="${colWidth}"/>`;
         }
         tableXml += '</w:tblGrid>';
 
         // Table rows
         rows.forEach((rowCells, rowIndex) => {
             const isHeader = rowIndex === 0;
-            const isEvenRow = rowIndex % 2 === 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('');
@@ -349,9 +433,14 @@ class WordTemplateExporter {
                 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="FFFFFF" w:fill="F58220"/>';
+                    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
@@ -361,12 +450,21 @@ class WordTemplateExporter {
                     '<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="100" w:after="100"/>';
+                tableXml += '<w:spacing w:before="0" w:after="0" w:line="240" w:lineRule="auto"/>';
                 tableXml += '</w:pPr>';
 
                 const runs = this.parseInlineFormatting(cellText);
@@ -388,6 +486,9 @@ class WordTemplateExporter {
 
         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;
     }
 
@@ -397,15 +498,22 @@ class WordTemplateExporter {
     isAsciiArt(line) {
         // Don't treat markdown tables as ASCII art
         if (line.trim().startsWith('|') && line.trim().endsWith('|')) {
-            return false;
+            // 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
+        // Common ASCII art characters (Unicode box drawing and symbols)
         const asciiArtChars = [
             '─', '│', '┌', '┐', '└', '┘', '├', '┤', '┬', '┴', '┼',  // Box drawing
             '═', '║', '╔', '╗', '╚', '╝', '╠', '╣', '╦', '╩', '╬',  // Double box
-            '▲', '▼', '◄', '►', '♦', '●', '○', '■', '□',             // Shapes
+            '╭', '╮', '╯', '╰',                                      // Rounded corners
-            '↓', '→', '←', '↑',                                      // Arrows
+            '▲', '▼', '◄', '►', '♦', '●', '○', '■', '□', '◆', '◇',  // Shapes
+            '↓', '→', '←', '↑', '↔', '↕', '⇒', '⇐', '⇓', '⇑',      // Arrows
+            '┃', '━', '┏', '┓', '┗', '┛', '┣', '┫', '┳', '┻', '╋',  // Heavy box
+            '░', '▒', '▓', '█',                                      // Shading
         ];
 
         // Check for box drawing characters
@@ -415,14 +523,18 @@ class WordTemplateExporter {
 
         // Check for ASCII box patterns with regular characters
         const asciiPatterns = [
-            /^\s*\+[-=_]+\+/,                    // +-----+
+            /^\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*\[[^\]]+\]/,                   // [Step in brackets]
+            /^\s*\[[^\]]+\]\s*$/,               // [Step in brackets]
+            /^\s*<[-=]+>/,                       // <----> or <====>
+            /^\s*\/[-_\\\/]+\//,                 // /----/
+            /^\s*\*[-=\*]+\*/,                   // *----*
         ];
 
         return asciiPatterns.some(pattern => pattern.test(line));
@@ -430,6 +542,7 @@ class WordTemplateExporter {
 
     /**
      * 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
@@ -437,10 +550,13 @@ class WordTemplateExporter {
         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="0" w:right="0"/>
+                    <w:ind w:left="284" w:right="284"/>
                     <w:jc w:val="left"/>
                     <w:keepLines/>
                     <w:wordWrap w:val="0"/>
@@ -453,7 +569,6 @@ class WordTemplateExporter {
             if (hasArrow) {
                 // Split line into parts and color arrows red
                 let remainingLine = line;
-                let processedText = '';
 
                 while (remainingLine.length > 0) {
                     let foundArrow = false;
@@ -479,7 +594,6 @@ class WordTemplateExporter {
                                     <w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
                                     <w:sz w:val="16"/>
                                     <w:szCs w:val="16"/>
-                                    <w:shd w:val="clear" w:color="auto" w:fill="F5F5F5"/>
                                     <w:noProof/>
                                 </w:rPr>
                                 <w:t xml:space="preserve">${beforeArrow}</w:t>
@@ -494,7 +608,6 @@ class WordTemplateExporter {
                                 <w:sz w:val="16"/>
                                 <w:szCs w:val="16"/>
                                 <w:color w:val="FF0000"/>
-                                <w:shd w:val="clear" w:color="auto" w:fill="F5F5F5"/>
                                 <w:noProof/>
                             </w:rPr>
                             <w:t xml:space="preserve">${escapedArrow}</w:t>
@@ -510,7 +623,6 @@ class WordTemplateExporter {
                                 <w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
                                 <w:sz w:val="16"/>
                                 <w:szCs w:val="16"/>
-                                <w:shd w:val="clear" w:color="auto" w:fill="F5F5F5"/>
                                 <w:noProof/>
                             </w:rPr>
                             <w:t xml:space="preserve">${escapedRemaining}</w:t>
@@ -526,7 +638,6 @@ class WordTemplateExporter {
                         <w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
                         <w:sz w:val="16"/>
                         <w:szCs w:val="16"/>
-                        <w:shd w:val="clear" w:color="auto" w:fill="F5F5F5"/>
                         <w:noProof/>
                     </w:rPr>
                     <w:t xml:space="preserve">${escapedLine}</w:t>