@udx/md2html 1.2.0 → 1.3.1

package/README.md

@@ -6,9 +6,10 @@ A sophisticated tool for converting markdown files into a single, visually polis
 
 - **Markdown Consolidation**: Intelligently combines and sorts multiple markdown files into a single cohesive document
 - **Magazine-Quality Styling**: Applies high-end editorial styling with precise typography and spacing
-- **Code Block Enhancements**: Syntax highlighting with file type indicators and copy buttons
+- **Code Block Enhancements**: Syntax highlighting with file type indicators
 - **Responsive Images**: Handles high-resolution images with proper sizing and caption support
 - **Watch Mode**: Automatically rebuilds when source files change with intelligent debouncing
+- **Browser Preview**: Live preview server with automatic browser opening
 - **Print Optimization**: Carefully crafted print styling for document printing and PDF generation
 - **Table of Contents**: Auto-generates navigable table of contents from document structure
 - **Customizable**: External CSS, JavaScript, and HTML templates for easy customization
@@ -36,25 +37,33 @@ npm install --save-dev @udx/md2html
 
 ```bash
 # Convert a single markdown file to HTML
-md2html --src path/to/file.md --out output.html
+md2html -s path/to/file.md -o output.html
 
-# Convert all markdown files in a directory
-md2html --src path/to/markdown/dir --out documentation.html
+# Convert all markdown files in a directory  
+md2html -s path/to/markdown/dir -o documentation.html
 
 # Watch for changes and rebuild automatically
-md2html --src path/to/markdown/dir --out documentation.html --watch
+md2html -s path/to/markdown/dir -o documentation.html --watch
+
+# Open in browser with live preview
+md2html -s path/to/file.md --preview
+
+# Custom port for preview server
+md2html -s path/to/markdown/dir --preview --port 3000
 
 # Enable debug output
-md2html --src path/to/markdown/dir --out documentation.html --debug
+md2html -s path/to/markdown/dir -o documentation.html --debug
 ```
 
 ## CLI Options
 
 | Option | Description |
 |--------|-------------|
-| `-s, --src <path>` | Source markdown file or directory (required) |
-| `-o, --out <path>` | Output HTML file path (required) |
+| `-s, --src <file>` | Source markdown file or directory (required) |
+| `-o, --out <file>` | Output HTML file path (optional - defaults to ./output.html) |
 | `-w, --watch` | Watch for changes and rebuild automatically |
+| `-p, --preview` | Open generated HTML in browser with live preview server |
+| `--port <number>` | Port for preview server (default: random) |
 | `-d, --debug` | Enable debug logging |
 | `-h, --help` | Display help information |
 | `-v, --version` | Output the version number |
@@ -101,28 +110,6 @@ Add captions to images with this syntax:
 *This is the image caption*
 ```
 
-### Mermaid Diagrams
-
-Create professional diagrams using Mermaid syntax:
-
-````markdown
-```mermaid
-flowchart LR
-    A[Client] --> B[Load Balancer]
-    B --> C[Server1]
-    B --> D[Server2]
-```
-````
-
-Supported Mermaid diagram types:
-- **Flowcharts**: Process flows and workflows
-- **Sequence Diagrams**: System interactions over time
-- **Gantt Charts**: Project timelines and schedules
-- **Entity Relationship Diagrams**: Database schemas
-- **User Journey**: User experience flows
-- **Git Graphs**: Version control workflows
-
-The diagrams are automatically rendered when the HTML document loads, with professional styling that matches the document theme.
 
 ## Customization
 
@@ -170,17 +157,6 @@ gh repo clone owner/repo
 md2html --src ./repo/docs --out documentation.html
 ```
 
-## Command Line Options
-
-```
-Options:
-  -V, --version         output the version number
-  -s, --src <directory> Source directory containing markdown files
-  -o, --out <file>      Output HTML file path
-  -w, --watch           Watch for changes and rebuild automatically (default: false)
-  -d, --debug           Enable debug logging (default: false)
-  -h, --help            display help for command
-```
 
 ## Output Example
 
@@ -193,19 +169,6 @@ The generated HTML document includes:
 - Print-optimized layout with page breaks
 - Responsive design for various screen sizes
 
-## API Usage
-
-md2html can also be used programmatically:
-
-```javascript
-import { buildHtml, watchMarkdown } from '@udx/md2html';
-
-// Build HTML once
-await buildHtml('/path/to/markdown/dir', 'output.html');
-
-// Watch for changes
-watchMarkdown('/path/to/markdown/dir', 'output.html');
-```
 
 ## Best Practices
 

package/index.js

@@ -89,7 +89,7 @@ const CHAPTER_NAV_STYLES_PATH = path.join(path.dirname(new URL(import.meta.url).
 const SCRIPTS_PATH = path.join(path.dirname(new URL(import.meta.url).pathname), 'static/scripts.js');
 
 program
-  .version('1.2.0')
+  .version('1.3.0')
   .description('Convert markdown files to a single HTML document with Google Docs styling')
   .option('-s, --src <file>', 'Source markdown file or directory')
   .option('-o, --out <file>', 'Output HTML file path (optional - defaults to ./output.html)')
@@ -97,6 +97,8 @@ program
   .option('-d, --debug', 'Enable debug logging', false)
   .option('-p, --preview', 'Open generated HTML in browser with live preview server', false)
   .option('--port <number>', 'Port for preview server (default: random)', parseInt)
+  .option('-c, --css <file>', 'Custom CSS file to include (or auto-detect custom.css in source directory)')
+  .option('--theme <name>', 'Built-in theme: default, legal', 'default')
   .addHelpText('after', `
 Examples:
   Basic conversion:
@@ -111,7 +113,11 @@ Examples:
     md2html -s content/docs --preview --port 3000
   
   Single file:
-    md2html -s document.md --preview`)
+    md2html -s document.md --preview
+  
+  Custom styling:
+    md2html -s content/docs --css=custom.css
+    md2html -s content/docs --theme=legal`)
   .parse(process.argv);
 
 const options = program.opts();
@@ -147,6 +153,40 @@ async function buildHtml(srcDir, outputFile) {
     const chapterNavStyles = fs.readFileSync(CHAPTER_NAV_STYLES_PATH, 'utf8');
     const jsScripts = fs.readFileSync(SCRIPTS_PATH, 'utf8');
     
+    // Load custom CSS if specified or auto-detect
+    let customStyles = '';
+    const srcDirResolved = fs.statSync(srcDir).isDirectory() ? srcDir : path.dirname(srcDir);
+    
+    // Check for custom CSS in order of priority:
+    // 1. Explicit --css flag
+    // 2. custom.css in source directory
+    // 3. styles.css in source directory
+    const customCssPaths = [
+      options.css ? path.resolve(options.css) : null,
+      path.join(srcDirResolved, 'custom.css'),
+      path.join(srcDirResolved, 'styles.css')
+    ].filter(Boolean);
+    
+    for (const cssPath of customCssPaths) {
+      if (fs.existsSync(cssPath)) {
+        customStyles = fs.readFileSync(cssPath, 'utf8');
+        debug(`Loaded custom CSS from: ${cssPath}`);
+        break;
+      }
+    }
+    
+    // Apply built-in theme styles from files
+    let themeStyles = '';
+    if (options.theme && options.theme !== 'default') {
+      const themePath = path.join(path.dirname(new URL(import.meta.url).pathname), `static/themes/${options.theme}.css`);
+      if (fs.existsSync(themePath)) {
+        themeStyles = fs.readFileSync(themePath, 'utf8');
+        debug(`Applied ${options.theme} theme from: ${themePath}`);
+      } else {
+        console.warn(`Warning: Theme '${options.theme}' not found at ${themePath}`);
+      }
+    }
+    
     // Register custom Handlebars helpers
     Handlebars.registerHelper('slugify', function(text) {
       return text
@@ -552,6 +592,41 @@ async function buildHtml(srcDir, outputFile) {
     
     processedContent = processedContent.replace(/<table>/g, '<table aria-hidden="true" role="presentation">');
 
+    // Convert checkbox syntax to FontAwesome icons
+    // Unchecked: - [ ] or * [ ] becomes FontAwesome square icon
+    // Checked: - [x] or * [x] becomes FontAwesome check-square icon
+    processedContent = processedContent.replace(
+      /<li>\s*\[\s*\]\s*/gi,
+      '<li class="checkbox-item"><i class="far fa-square checkbox-icon"></i> '
+    );
+    processedContent = processedContent.replace(
+      /<li>\s*\[x\]\s*/gi,
+      '<li class="checkbox-item checkbox-checked"><i class="fas fa-check-square checkbox-icon"></i> '
+    );
+    
+    // Process inline SVG elements for proper sizing
+    // Add responsive wrapper and ensure viewBox is preserved
+    processedContent = processedContent.replace(
+      /<svg([^>]*)>/gi,
+      (match, attrs) => {
+        // Check if it already has a class
+        if (attrs.includes('class=')) {
+          return match.replace(/class="([^"]*)"/, 'class="$1 svg-responsive"');
+        }
+        return `<svg class="svg-responsive"${attrs}>`;
+      }
+    );
+    
+    // Wrap standalone SVG elements in a figure for better layout control
+    processedContent = processedContent.replace(
+      /(<p>)?(<svg[^>]*>[\s\S]*?<\/svg>)(<\/p>)?/gi,
+      (match, openP, svg, closeP) => {
+        // If SVG is already in a figure, don't wrap again
+        if (match.includes('<figure')) return match;
+        return `<figure class="svg-container">${svg}</figure>`;
+      }
+    );
+
     // If it's an imgix URL, add width parameter
     processedContent = processedContent.replace(/src="(https:\/\/[^"]*imgix\.net\/[^"]+)(?:\?([^"]*))?"/g, (match, url, params) => {
       if (params && params.includes('w=')) {
@@ -635,6 +710,11 @@ async function buildHtml(srcDir, outputFile) {
     processedWithHeadingAttrs += `\n<script type="application/json" id="document-chapters-data">${chaptersJSON}</script>\n`;
     
     // Prepare data for template
+    // Combine all styles: base + chapter nav + theme + custom (custom overrides all)
+    const allStyles = [cssStyles, chapterNavStyles, themeStyles, customStyles]
+      .filter(Boolean)
+      .join('\n\n');
+    
     const templateData = {
       title,
       description,
@@ -642,7 +722,7 @@ async function buildHtml(srcDir, outputFile) {
       date,
       version,
       content: processedWithHeadingAttrs,
-      styles: cssStyles + '\n' + chapterNavStyles,
+      styles: allStyles,
       scripts: jsScripts,
       chapters: chaptersInfo
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udx/md2html",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Magazine-quality Markdown to HTML converter with professional styling",
   "main": "index.js",
   "type": "module",

package/static/chapter-navigation.css

@@ -1,11 +1,10 @@
 /* Chapter Navigation Styles */
 :root {
-  --chapter-nav-width: 180px;
-  --chapter-nav-text-color: #333;
-  --chapter-nav-text-faded: rgba(51, 51, 51, 0.4);
-  --chapter-text-normal-size: 0.9rem;
-  --chapter-text-active-size: calc(var(--chapter-text-normal-size) * 1.5);
-  --chapter-text-inactive-size: calc(var(--chapter-text-normal-size) * 0.8);
+  --chapter-nav-width: 220px;
+  --chapter-nav-text-color: #1a1a1a;
+  --chapter-nav-text-faded: rgba(51, 51, 51, 0.65);
+  --chapter-nav-active-color: #991b1b;
+  --chapter-text-size: 0.85rem;
 }
 
 /* Container for the floating navigation */
@@ -47,20 +46,24 @@
 }
 
 .chapter-nav-item {
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   transition: all 0.3s ease;
 }
 
 .chapter-nav-link {
   display: block;
-  padding: 4px 0;
-  font-size: var(--chapter-text-inactive-size);
+  padding: 6px 0;
+  font-size: var(--chapter-text-size);
   color: var(--chapter-nav-text-faded);
   text-decoration: none;
-  transition: all 0.3s ease;
+  transition: color 0.2s ease, text-decoration 0.2s ease;
   background-color: transparent;
   border-radius: 0;
-  line-height: 1.3;
+  line-height: 1.4;
+  /* Better text handling for long titles */
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
 }
 
 .chapter-nav-link:hover {
@@ -68,9 +71,12 @@
 }
 
 .chapter-nav-item.active .chapter-nav-link {
-  font-size: var(--chapter-text-active-size);
-  color: var(--chapter-nav-text-color);
+  /* Use color and underline instead of font-size to prevent jumping */
+  font-size: var(--chapter-text-size);
+  color: var(--chapter-nav-active-color);
   font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 3px;
 }
 
 /* Mobile dropdown styles - native-looking and minimal */
@@ -169,8 +175,9 @@
 
 .chapter-dropdown-menu li.active a {
   font-weight: 500;
-  color: var(--chapter-nav-text-color);
-  font-size: calc(0.95rem * 1.2);
+  color: var(--chapter-nav-active-color);
+  text-decoration: underline;
+  text-underline-offset: 3px;
 }
 
 /* Add padding to the content to prevent floating nav from overlapping */

package/static/scripts.js

@@ -44,51 +44,90 @@ document.addEventListener('DOMContentLoaded', (event) => {
     }
   });
 
-  // Ensure all tables are 100% width with stronger enforcement
+  // Smart table sizing - auto-fit columns based on content
   document.querySelectorAll('table').forEach(table => {
-    // Force full width with inline style AND classes
-    table.style.width = '100%';
-    table.style.tableLayout = 'fixed';
-    table.setAttribute('width', '100%');
-    table.classList.add('w-full');
-    table.classList.add('table-fixed');
+    // Use auto layout for smart column sizing
+    table.style.tableLayout = 'auto';
+    table.style.width = 'auto';
+    table.style.maxWidth = '100%';
+    table.classList.add('auto-size');
     
     // Add responsive wrapper if not already wrapped
     if (table.parentElement.tagName !== 'DIV' || !table.parentElement.classList.contains('table-responsive')) {
       const wrapper = document.createElement('div');
-      wrapper.className = 'table-responsive w-full overflow-x-auto my-8';
-      wrapper.style.width = '100%';
+      wrapper.className = 'table-responsive overflow-x-auto my-8';
       wrapper.style.maxWidth = '100%';
       table.parentNode.insertBefore(wrapper, table);
       wrapper.appendChild(table);
     }
     
+    // Analyze columns and apply smart sizing
+    const rows = table.querySelectorAll('tr');
+    if (rows.length > 0) {
+      const headerCells = table.querySelectorAll('th');
+      const numCols = headerCells.length || (rows[0] ? rows[0].querySelectorAll('td').length : 0);
+      
+      // Analyze each column's content
+      for (let colIdx = 0; colIdx < numCols; colIdx++) {
+        let isNumeric = true;
+        let isCurrency = true;
+        let isCompact = true;
+        let maxLength = 0;
+        
+        rows.forEach(row => {
+          const cells = row.querySelectorAll('th, td');
+          if (cells[colIdx]) {
+            const text = cells[colIdx].textContent.trim();
+            maxLength = Math.max(maxLength, text.length);
+            
+            // Check if numeric (including decimals and commas)
+            if (!/^[\d,.\-\s]+$/.test(text) && text !== '') {
+              isNumeric = false;
+            }
+            
+            // Check if currency (starts with $ or ends with .00)
+            if (!/^\$?[\d,]+\.?\d*$/.test(text) && text !== '') {
+              isCurrency = false;
+            }
+            
+            // Compact if short content (less than 15 chars)
+            if (text.length > 15) {
+              isCompact = false;
+            }
+          }
+        });
+        
+        // Apply column classes based on analysis
+        rows.forEach(row => {
+          const cells = row.querySelectorAll('th, td');
+          if (cells[colIdx]) {
+            if (isCurrency && maxLength <= 15) {
+              cells[colIdx].classList.add('col-currency');
+            } else if (isNumeric && maxLength <= 10) {
+              cells[colIdx].classList.add('col-numeric');
+            } else if (isCompact && maxLength <= 10) {
+              cells[colIdx].classList.add('col-compact');
+            } else {
+              cells[colIdx].classList.add('col-text');
+            }
+          }
+        });
+      }
+    }
+    
     // Add proper classes and styles to table headers
     table.querySelectorAll('th').forEach(th => {
       th.classList.add('bg-gray-50');
       th.classList.add('font-semibold');
-      th.classList.add('p-3');
-      th.classList.add('text-left');
-      th.classList.add('border');
-      th.classList.add('border-gray-200');
-      th.style.padding = '0.75rem 1rem';
+      th.style.padding = '0.5rem 0.75rem';
+      th.style.borderBottom = '2px solid #e5e7eb';
     });
     
     // Add proper classes and styles to table cells
     table.querySelectorAll('td').forEach(td => {
-      td.classList.add('p-3');
-      td.classList.add('text-left');
-      td.classList.add('border');
-      td.classList.add('border-gray-200');
-      td.style.padding = '0.75rem 1rem';
-      td.style.borderColor = 'rgba(0, 0, 0, 0.1)';
+      td.style.padding = '0.5rem 0.75rem';
+      td.style.borderBottom = '1px solid #e5e7eb';
     });
-    
-    // Force table to use entire container width
-    const parentWidth = table.parentElement.offsetWidth;
-    if (parentWidth > 0) {
-      table.style.minWidth = parentWidth + 'px';
-    }
   });
 
   // Remove any blue highlights
@@ -122,24 +161,6 @@ document.addEventListener('DOMContentLoaded', (event) => {
     }
   });
   
-  // Improve table layout and ensure proper alignment
-  document.querySelectorAll('table').forEach(table => {
-    // Add a container for horizontal scrolling if needed
-    const wrapper = document.createElement('div');
-    wrapper.style.width = '100%';
-    wrapper.style.overflowX = 'auto';
-    table.parentNode.insertBefore(wrapper, table);
-    wrapper.appendChild(table);
-    
-    // Ensure consistent styling
-    table.querySelectorAll('th, td').forEach(cell => {
-      cell.style.padding = '0.75em 1em';
-      cell.style.verticalAlign = 'top';
-      cell.style.textAlign = 'left';
-      cell.style.fontSize = '18px';
-    });
-  });
-  
   // Process quote attributions with em dash
   document.querySelectorAll('blockquote + p').forEach(p => {
     const text = p.textContent || '';

package/static/styles.css

@@ -338,26 +338,60 @@ pre:has(.file-type-badge) .copy-button {
   display: none;
 }
 
-/* Image handling */
+/* ============================================
+   VISUAL ELEMENT SPACING
+   Consistent spacing for images, SVG, mermaid, figures
+   ============================================ */
+
+/* Base visual element spacing - consistent 1.5em above and below */
+:root {
+  --visual-spacing-top: 1.5em;
+  --visual-spacing-bottom: 1.5em;
+  --visual-spacing-print-top: 1em;
+  --visual-spacing-print-bottom: 1em;
+}
+
+/* Figure element - wrapper for images with captions */
 figure {
-  margin-top: 2em;
-  margin-bottom: 2em;
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
   text-align: center;
+  display: block;
 }
 
+/* Images - standalone or within figures */
 img {
   max-width: 100%;
   height: auto;
   border-radius: 0.25em;
-  margin-top: 2em;
-  margin-bottom: 0.5em;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Standalone images (not in figure) get vertical spacing */
+p > img,
+article > img,
+section > img,
+main > img,
+.prose > img {
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
 }
 
+/* Images inside figures don't need extra spacing */
+figure img {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Figure captions */
 figcaption {
-  margin-top: 0.5em;
+  margin-top: 0.75em;
   font-size: 0.9em;
   color: #64748b;
   font-style: italic;
+  text-align: center;
 }
 
 /* Alt text is visually hidden but accessible for screen readers */
@@ -482,3 +516,250 @@ a:hover {
 .MathJax {
   font-size: 1.1em !important;
 }
+
+/* Checkbox styling with FontAwesome icons */
+.checkbox-item {
+  list-style: none;
+  margin-left: -1.5em;
+  padding-left: 0;
+}
+
+.checkbox-icon {
+  color: #6b7280;
+  font-size: 1.1em;
+  margin-right: 0.5em;
+  vertical-align: middle;
+}
+
+.checkbox-checked .checkbox-icon {
+  color: #10b981;
+}
+
+/* SVG responsive styling */
+.svg-responsive {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* SVG container with consistent spacing */
+.svg-container {
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.svg-container svg {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Standalone SVG elements (not in container) */
+article > svg,
+section > svg,
+main > svg,
+.prose > svg {
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Mermaid diagram containers - consistent spacing */
+.mermaid {
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
+  text-align: center;
+  overflow-x: auto;
+}
+
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Signature block styling for SVG signatures */
+.signature-block {
+  margin-top: var(--visual-spacing-top);
+  margin-bottom: var(--visual-spacing-bottom);
+  padding: 1em;
+  border-top: 1px solid #e5e7eb;
+}
+
+.signature-block svg {
+  max-width: 300px;
+  height: auto;
+}
+
+/* Print styling for visual elements */
+@media print {
+  /* Consistent print spacing for all visual elements */
+  figure,
+  .svg-container,
+  .mermaid,
+  article > img,
+  section > img,
+  main > img,
+  .prose > img {
+    margin-top: var(--visual-spacing-print-top);
+    margin-bottom: var(--visual-spacing-print-bottom);
+    page-break-inside: avoid;
+  }
+  
+  .svg-responsive {
+    max-width: 6in;
+  }
+  
+  /* Ensure images don't overflow in print */
+  img, svg {
+    max-width: 100% !important;
+    height: auto !important;
+  }
+}
+
+/* ============================================
+   PRINT PAGE BREAK SUPPORT
+   ============================================ */
+
+/* Manual page break - use <!-- pagebreak --> in markdown */
+.page-break {
+  page-break-before: always;
+  break-before: page;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+/* Print-specific page break rules */
+@media print {
+  /* Force page break before h1 (new chapters/volumes) */
+  h1 {
+    page-break-before: always;
+    break-before: page;
+  }
+  
+  /* First h1 should not have page break before it */
+  section:first-of-type h1:first-child,
+  article:first-of-type h1:first-child,
+  main > h1:first-child {
+    page-break-before: auto;
+    break-before: auto;
+  }
+  
+  /* Keep headings with their following content */
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+    break-after: avoid;
+  }
+  
+  /* Prevent page breaks inside these elements */
+  table, figure, pre, blockquote, ul, ol {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+  
+  /* For very long tables, allow breaks but keep header visible */
+  table.allow-break {
+    page-break-inside: auto;
+    break-inside: auto;
+  }
+  
+  table.allow-break thead {
+    display: table-header-group;
+  }
+  
+  table.allow-break tr {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+  
+  /* Orphan and widow control for paragraphs */
+  p {
+    orphans: 3;
+    widows: 3;
+  }
+  
+  /* Keep images with their captions */
+  figure {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+  
+  /* Keep list items together */
+  li {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+}
+
+/* ============================================
+   SMART TABLE SIZING
+   ============================================ */
+
+/* Auto-sized tables - columns fit content */
+table.auto-size {
+  table-layout: auto;
+  width: auto;
+  max-width: 100%;
+}
+
+/* Compact columns for short content (numbers, codes) */
+table .col-compact {
+  width: 1%;
+  white-space: nowrap;
+}
+
+/* Numeric columns - right aligned, compact */
+table .col-numeric {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Currency columns */
+table .col-currency {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Description/text columns - expand to fill */
+table .col-text {
+  width: auto;
+}
+
+/* Shrink-to-fit table wrapper */
+.table-auto-wrapper {
+  display: inline-block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+/* Print table sizing */
+@media print {
+  table {
+    font-size: 10pt;
+  }
+  
+  table th, table td {
+    padding: 4pt 8pt;
+  }
+}

package/static/themes/legal.css

@@ -0,0 +1,134 @@
+/* Legal Theme - Professional government proposal and legal document styling */
+/* Inspired by NSF GOALI proposal formatting and federal document standards */
+
+body {
+  font-family: "Times New Roman", Times, Georgia, serif;
+  font-size: 12pt;
+  line-height: 1.5;
+}
+
+.content-container {
+  max-width: 8.5in;
+  padding: 1in;
+}
+
+/* Formal heading styles */
+.prose h1, h1 {
+  font-size: 18pt !important;
+  font-weight: bold !important;
+  text-align: center !important;
+  margin-bottom: 24pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+.prose h2, h2 {
+  font-size: 14pt !important;
+  font-weight: bold !important;
+  margin-top: 18pt !important;
+  margin-bottom: 12pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+.prose h3, h3 {
+  font-size: 12pt !important;
+  font-weight: bold !important;
+  margin-top: 12pt !important;
+  margin-bottom: 6pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+.prose h4, h4, .prose h5, h5, .prose h6, h6 {
+  font-size: 12pt !important;
+  font-weight: bold !important;
+  font-style: italic !important;
+  margin-top: 12pt !important;
+  margin-bottom: 6pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+.prose p, p {
+  font-size: 12pt !important;
+  text-align: justify !important;
+  margin-bottom: 12pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+.prose li {
+  font-size: 12pt !important;
+  font-family: "Times New Roman", Times, Georgia, serif !important;
+}
+
+/* Table styling for government documents */
+.prose table {
+  font-size: 10pt !important;
+  border-collapse: collapse !important;
+}
+
+.prose table th {
+  background-color: #f0f0f0 !important;
+  font-weight: bold !important;
+  border: 1px solid #333 !important;
+}
+
+.prose table td {
+  border: 1px solid #333 !important;
+}
+
+/* Sidebar adjustments for formal documents */
+.chapter-navigation {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Visual element spacing for legal documents - tighter than default */
+:root {
+  --visual-spacing-top: 12pt;
+  --visual-spacing-bottom: 12pt;
+  --visual-spacing-print-top: 10pt;
+  --visual-spacing-print-bottom: 10pt;
+}
+
+/* Figure and image styling for legal documents */
+figure {
+  margin-top: 12pt;
+  margin-bottom: 12pt;
+}
+
+figcaption {
+  font-size: 10pt !important;
+  font-style: italic;
+  text-align: center;
+  margin-top: 6pt;
+}
+
+/* SVG and diagram styling */
+.svg-container,
+.mermaid {
+  margin-top: 12pt;
+  margin-bottom: 12pt;
+}
+
+/* Images in legal documents */
+img {
+  margin-top: 12pt;
+  margin-bottom: 12pt;
+}
+
+figure img {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Print-optimized styling */
+@media print {
+  body {
+    font-size: 12pt !important;
+  }
+  
+  .chapter-navigation, .mobile-chapter-nav {
+    display: none !important;
+  }
+  
+  .chapter-content {
+    padding-left: 0 !important;
+  }
+}

package/static/view.hbs

@@ -317,6 +317,8 @@
           if (code) {
             const mermaidDiv = document.createElement('div');
             mermaidDiv.className = 'mermaid';
+            mermaidDiv.setAttribute('aria-hidden', 'true');
+            mermaidDiv.setAttribute('role', 'presentation');
             mermaidDiv.textContent = code.textContent;
             pre.parentNode.replaceChild(mermaidDiv, pre);
           }