mviz 1.4.2

package/dist/layout/parser.js

@@ -0,0 +1,888 @@
+/**
+ * Markdown dashboard parser for mviz
+ *
+ * Parses markdown files with embedded chart/component specs and generates HTML.
+ */
+import { readFileSync, existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { generateDashboardHtml, generateTestHarnessHtml, generateTestHarnessJs } from './templates.js';
+import { convertColumnarFormat } from './converter.js';
+import { parseCsv } from './csv.js';
+import { getOptionsBuilder } from '../charts/index.js';
+import { serializeOption } from '../core/serializer.js';
+import { formatNumber, inferFormat } from '../core/formatting.js';
+import { COLORS, GRID_TOTAL_COLUMNS, DEFAULT_SIZES, autoSizeChart, getHeatmapColors, getThemeColors, ALERT_ICONS, } from '../core/themes.js';
+import { formatCell, computeHeatmapRanges, computeDumbbellRanges, } from '../components/table.js';
+// Height per row unit (compact for print) - must match Python's ROW_HEIGHT_PX
+const ROW_HEIGHT_PX = 32;
+// Minimum column span for auto-sized items
+const MIN_AUTO_COLUMN_SPAN = 4;
+/**
+ * Parse YAML-like frontmatter from markdown
+ */
+function parseFrontmatter(lines, baseTheme) {
+    let theme = baseTheme;
+    let pageTitle = 'Dashboard';
+    let continuous = false;
+    if (lines.length === 0 || lines[0] !== '---') {
+        return { theme, pageTitle, continuous, remainingLines: lines };
+    }
+    let frontmatterEnd = -1;
+    for (let i = 1; i < lines.length; i++) {
+        if (lines[i] === '---') {
+            frontmatterEnd = i;
+            break;
+        }
+    }
+    if (frontmatterEnd <= 0) {
+        return { theme, pageTitle, continuous, remainingLines: lines };
+    }
+    for (let i = 1; i < frontmatterEnd; i++) {
+        const line = lines[i];
+        const colonIdx = line.indexOf(':');
+        if (colonIdx > 0) {
+            const key = line.slice(0, colonIdx).trim();
+            let val = line.slice(colonIdx + 1).trim();
+            // Strip surrounding quotes
+            if ((val.startsWith('"') && val.endsWith('"')) || (val.startsWith("'") && val.endsWith("'"))) {
+                val = val.slice(1, -1);
+            }
+            if (key === 'theme') {
+                theme = val;
+            }
+            else if (key === 'title') {
+                pageTitle = val;
+            }
+            else if (key === 'continuous') {
+                continuous = ['true', 'yes', '1'].includes(val.toLowerCase());
+            }
+        }
+    }
+    return { theme, pageTitle, continuous, remainingLines: lines.slice(frontmatterEnd + 1) };
+}
+/**
+ * Resolve auto sizes in a row based on row composition
+ */
+function resolveAutoSizes(row) {
+    const autoItems = [];
+    let fixedCols = 0;
+    for (const item of row) {
+        if (item.size === 'auto') {
+            autoItems.push(item);
+        }
+        else {
+            const size = item.size ?? DEFAULT_SIZES[item.type] ?? [8, 4];
+            fixedCols += size[0];
+        }
+    }
+    if (autoItems.length === 0)
+        return;
+    const remainingCols = Math.max(0, GRID_TOTAL_COLUMNS - fixedCols);
+    const colsPerAuto = autoItems.length > 0
+        ? Math.max(MIN_AUTO_COLUMN_SPAN, Math.floor(remainingCols / autoItems.length))
+        : MIN_AUTO_COLUMN_SPAN * 2;
+    for (const item of autoItems) {
+        const [autoCols, autoRows] = autoSizeChart(item.type, item.spec);
+        if (autoItems.length === 1) {
+            item.size = [autoCols, autoRows];
+        }
+        else {
+            item.size = [Math.min(autoCols, colsPerAuto), autoRows];
+        }
+    }
+}
+/**
+ * Generate ECharts initialization script for a chart
+ */
+function generateChartScript(chartId, optionJsonLight, optionJsonDark) {
+    const darkOptions = optionJsonDark ?? optionJsonLight;
+    return `
+    (function() {
+      var chart = echarts.init(document.getElementById('${chartId}'), null, {renderer: 'svg'});
+      window.chartInstances = window.chartInstances || {};
+      window.chartOptions = window.chartOptions || {};
+      window.chartInstances['${chartId}'] = chart;
+      window.chartOptions['${chartId}'] = {
+        light: ${optionJsonLight},
+        dark: ${darkOptions}
+      };
+      var currentTheme = document.body.classList.contains('theme-dark') ? 'dark' : 'light';
+      chart.setOption(window.chartOptions['${chartId}'][currentTheme]);
+      window.addEventListener('resize', function() { chart.resize(); });
+    })();`;
+}
+/**
+ * Render an ECharts component
+ */
+function renderEchartsComponent(compType, spec, chartId, colSpan, itemHeight, anchorId) {
+    const title = spec.title ?? '';
+    const titleHtml = title ? `<h3 class="chart-title">${escapeHtml(title)}</h3>` : '';
+    const builder = getOptionsBuilder(compType);
+    if (!builder) {
+        return { html: null, script: null };
+    }
+    const chartHeight = itemHeight - (title ? 24 : 0);
+    // Generate light theme options
+    const specLight = { ...spec, theme: 'light', height: chartHeight };
+    const optionLight = builder(specLight);
+    if (!optionLight) {
+        return { html: null, script: null };
+    }
+    const optionJsonLight = serializeOption(optionLight);
+    // Generate dark theme options
+    const specDark = { ...spec, theme: 'dark', height: chartHeight };
+    const optionDark = builder(specDark);
+    const optionJsonDark = optionDark ? serializeOption(optionDark) : null;
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    const html = `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      ${titleHtml}
+      <div id="${chartId}" style="width: 100%; height: ${chartHeight}px;"></div>
+    </div>`;
+    const script = generateChartScript(chartId, optionJsonLight, optionJsonDark);
+    return { html, script };
+}
+/**
+ * Escape HTML special characters
+ */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+/**
+ * Simple component renderers
+ */
+function renderBigValue(spec, colSpan, anchorId) {
+    const value = typeof spec.value === 'number' ? spec.value : 0;
+    const specLabel = spec.label;
+    const specTitle = spec.title;
+    // If only title is provided (no label), use title as the label below the number
+    // If both provided, title becomes H2 header and label goes below
+    const label = specLabel ?? specTitle ?? '';
+    const showTitleHeader = specTitle && specLabel;
+    const fmt = spec.format ?? inferFormat(label, value);
+    const comparison = spec.comparison;
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    const displayValue = formatNumber(value, fmt);
+    // Build comparison HTML if provided
+    let comparisonHtml = '';
+    if (comparison) {
+        const compVal = comparison.value ?? 0;
+        const compLabel = comparison.label ?? '';
+        const compFmt = comparison.format;
+        const isPositive = compVal >= 0;
+        const arrow = isPositive ? '↑' : '↓';
+        const compColor = isPositive ? COLORS.POSITIVE_GREEN : COLORS.ERROR_RED;
+        const compDisplay = formatNumber(compVal, compFmt, true);
+        comparisonHtml = `
+      <div style="display: flex; align-items: center; gap: 4px; margin-top: 4px;">
+        <span style="color: ${compColor}; font-size: 12px;">${arrow} ${compDisplay}</span>
+        <span style="color: var(--text-muted); font-size: 10px;">${escapeHtml(compLabel)}</span>
+      </div>`;
+    }
+    // Build title header HTML if both title and label provided
+    const titleHtml = showTitleHeader
+        ? `<h3 class="chart-title">${escapeHtml(specTitle.toUpperCase())}</h3>`
+        : '';
+    return `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      ${titleHtml}<div class="big-value">${escapeHtml(displayValue)}</div>
+      <div class="label">${escapeHtml(label)}</div>${comparisonHtml}
+    </div>`;
+}
+function renderNote(spec, colSpan, anchorId) {
+    const content = spec.content ?? '';
+    const label = spec.label ?? '';
+    // Support both 'noteType' (Python style) and 'variant' for compatibility
+    const noteType = spec.noteType ?? spec.variant ?? 'default';
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    // Parse inline markdown in content
+    const parsedContent = parseInlineMarkdown(content);
+    const contentHtml = label ? `<strong>${escapeHtml(label)}:</strong> ${parsedContent}` : parsedContent;
+    return `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      <div class="note note-${noteType}">
+        <div class="note-content">${contentHtml}</div>
+      </div>
+    </div>`;
+}
+function renderText(spec, colSpan, anchorId) {
+    const content = spec.content ?? '';
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    return `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      <div class="text-content">${escapeHtml(content)}</div>
+    </div>`;
+}
+function renderEmptySpace(_spec, colSpan, anchorId) {
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    return `
+    <div class="grid-item empty-space"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+    </div>`;
+}
+function renderInlineHeader(spec, anchorId) {
+    const text = spec.text ?? '';
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    return `
+    <div class="inline-header"${anchorAttr} style="--col-span: ${GRID_TOTAL_COLUMNS}; grid-column: span ${GRID_TOTAL_COLUMNS};">
+      <p class="inline-header-text">${escapeHtml(text)}</p>
+    </div>`;
+}
+function renderDelta(spec, colSpan, anchorId) {
+    const value = typeof spec.value === 'number' ? spec.value : 0;
+    const specLabel = spec.label;
+    const specTitle = spec.title;
+    // If only title is provided (no label), use title as the label below
+    // If both provided, title becomes header and label goes below
+    const label = specLabel ?? specTitle ?? '';
+    const showTitleHeader = specTitle && specLabel;
+    const fmt = spec.format ?? inferFormat(label, value);
+    const positiveIsGood = spec.positiveIsGood !== false; // Default true
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    const isPositive = value > 0;
+    const isGood = (isPositive && positiveIsGood) || (!isPositive && !positiveIsGood);
+    const color = isGood ? COLORS.POSITIVE_GREEN : COLORS.ERROR_RED;
+    const arrow = isPositive ? '↑' : '↓';
+    const displayValue = formatNumber(value, fmt, true);
+    // Build title header HTML if both title and label provided
+    const titleHtml = showTitleHeader
+        ? `<h3 class="chart-title">${escapeHtml(specTitle.toUpperCase())}</h3>`
+        : '';
+    return `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      ${titleHtml}<div class="delta">
+        <span class="arrow" style="color: ${color};">${arrow}</span>
+        <span class="value" style="color: ${color};">${escapeHtml(displayValue)}</span>
+      </div>
+      <div class="label">${escapeHtml(label)}</div>
+    </div>`;
+}
+// Alert type configuration
+const ALERT_COLORS = {
+    info: COLORS.INFO_BLUE,
+    success: COLORS.POSITIVE_GREEN,
+    warning: COLORS.WARNING_AMBER,
+    error: COLORS.ERROR_RED,
+};
+function renderAlert(spec, colSpan, anchorId) {
+    const message = spec.message ?? '';
+    const alertType = spec.alertType ?? 'info';
+    const alertColor = ALERT_COLORS[alertType] ?? COLORS.INFO_BLUE;
+    const icon = ALERT_ICONS[alertType] ?? 'ℹ';
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    // Parse inline markdown (bold, italic)
+    const parsedMessage = parseInlineMarkdown(message);
+    return `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      <div class="alert" style="border-left-color: ${alertColor}; background-color: ${alertColor}1a;">
+        <span class="icon" style="color: ${alertColor};">${icon}</span>
+        <span class="message">${parsedMessage}</span>
+      </div>
+    </div>`;
+}
+function renderTextarea(spec, colSpan, anchorId) {
+    const content = spec.content ?? '';
+    const title = spec.title ?? '';
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    const titleHtml = title ? `<h3 class="chart-title">${escapeHtml(title)}</h3>` : '';
+    // Escape content for safe embedding in JavaScript
+    const escapedContent = content.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$');
+    // Generate unique ID based on content hash
+    const contentId = `md-${Math.abs(hashString(content)) % 10000000}`;
+    return `
+    <div class="grid-item textarea-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      ${titleHtml}
+      <div class="markdown-content" id="${contentId}"></div>
+      <script>
+        document.getElementById('${contentId}').innerHTML = marked.parse(\`${escapedContent}\`);
+      </script>
+    </div>`;
+}
+function renderPctBarSparkline(spec, colSpan, anchorId) {
+    const title = spec.title ?? '';
+    const pctValue = typeof spec.value === 'number' ? spec.value : 0;
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    // Normalize to 0-1 range and clamp
+    const pct = pctValue <= 1 ? pctValue : pctValue / 100;
+    const clampedPct = Math.max(0, Math.min(1, pct));
+    const widthPct = clampedPct * 100;
+    const displayValue = `${Math.round(clampedPct * 100)}%`;
+    const titleHtml = title ? `<h3 class="chart-title">${escapeHtml(title)}</h3>` : '';
+    return `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      ${titleHtml}
+      <div class="pct-bar-wrapper">
+        <div class="pct-bar-container">
+          <div class="pct-bar-fill" style="width: ${widthPct}%;"></div>
+        </div>
+        <span class="pct-bar-value">${displayValue}</span>
+      </div>
+    </div>`;
+}
+function renderTable(spec, colSpan, anchorId, baseTheme) {
+    const data = spec.data ?? [];
+    const title = spec.title ?? '';
+    const striped = spec.striped === true;
+    const compact = spec.compact === true;
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    // Auto-detect columns from data if not specified
+    let columns = spec.columns;
+    if (!columns && data.length > 0) {
+        const firstRow = data[0];
+        if (firstRow) {
+            columns = Object.keys(firstRow).map((key) => ({ id: key, title: key }));
+        }
+    }
+    if (!columns)
+        columns = [];
+    const cellPadding = compact ? '3px 6px' : '5px 8px';
+    const headerPadding = compact ? '3px 6px' : '6px 8px';
+    const fontSize = compact ? '10px' : '11px';
+    const compactClass = compact ? ' table-compact' : '';
+    const stripedClass = striped ? ' table-striped' : '';
+    // Pre-compute ranges for heatmap and dumbbell
+    const defaultHeatmapColors = getHeatmapColors(baseTheme);
+    const heatmapRanges = computeHeatmapRanges(columns, data);
+    const dumbbellRanges = computeDumbbellRanges(columns, data);
+    const themeColors = getThemeColors(baseTheme);
+    // Build header
+    const headerCells = columns.map((col) => {
+        const align = col.align ?? 'left';
+        return `<th style="text-align: ${align}; padding: ${headerPadding}; font-size: ${fontSize};">${escapeHtml(col.title ?? col.id)}</th>`;
+    }).join('');
+    // Build rows
+    const bodyRows = data.map((row, _rowIdx) => {
+        const cells = columns.map((col) => {
+            const cellValue = row[col.id];
+            const align = col.align ?? 'left';
+            const result = formatCell(cellValue, col, themeColors, heatmapRanges, dumbbellRanges, defaultHeatmapColors);
+            const bgStyle = result.bgColor ? `background-color: ${result.bgColor};` : '';
+            const textStyle = result.textColor ? `color: ${result.textColor};` : '';
+            return `<td style="text-align: ${align}; padding: ${cellPadding}; font-size: ${fontSize}; ${bgStyle} ${textStyle}">${result.content}</td>`;
+        }).join('');
+        return `<tr>${cells}</tr>`;
+    }).join('');
+    const titleHtml = title ? `<h3 class="chart-title">${escapeHtml(title)}</h3>` : '';
+    return `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      ${titleHtml}
+      <table class="data-table${compactClass}${stripedClass}" style="width: 100%; border-collapse: collapse; font-size: ${fontSize};">
+        <thead>
+          <tr>${headerCells}</tr>
+        </thead>
+        <tbody>
+          ${bodyRows}
+        </tbody>
+      </table>
+    </div>`;
+}
+// Helper function to parse inline markdown
+function parseInlineMarkdown(text) {
+    // Bold: **text** or __text__
+    let result = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    result = result.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+    // Italic: *text* or _text_
+    result = result.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    result = result.replace(/_([^_]+)_/g, '<em>$1</em>');
+    // Code: `text`
+    result = result.replace(/`([^`]+)`/g, '<code>$1</code>');
+    return result;
+}
+// Simple hash function for generating unique IDs
+function hashString(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return hash;
+}
+/**
+ * Parse markdown table syntax into a table spec
+ */
+function parseMarkdownTable(tableLines, theme) {
+    if (tableLines.length < 2) {
+        return null;
+    }
+    // Parse header row
+    let headerLine = tableLines[0].trim();
+    if (!headerLine.startsWith('|') || !headerLine.endsWith('|')) {
+        headerLine = '|' + headerLine + '|';
+    }
+    const headers = headerLine.split('|').slice(1, -1).map(h => h.trim());
+    if (headers.length === 0) {
+        return null;
+    }
+    // Parse separator row and extract alignments
+    let alignments = [];
+    if (tableLines.length > 1) {
+        const sepLine = tableLines[1].trim();
+        if (!sepLine.includes('-')) {
+            return null;
+        }
+        const sepParts = sepLine.split('|').slice(1, -1).map(s => s.trim());
+        alignments = sepParts.map(part => {
+            if (part.startsWith(':') && part.endsWith(':'))
+                return 'center';
+            if (part.endsWith(':'))
+                return 'right';
+            return 'left';
+        });
+    }
+    // Pad alignments to match headers
+    while (alignments.length < headers.length) {
+        alignments.push('left');
+    }
+    // Parse data rows
+    const data = [];
+    for (let i = 2; i < tableLines.length; i++) {
+        let line = tableLines[i].trim();
+        if (!line || line.startsWith('|---') || /^[|\-:\s]+$/.test(line)) {
+            continue;
+        }
+        if (!line.startsWith('|')) {
+            line = '|' + line + '|';
+        }
+        const cells = line.split('|').slice(1, -1).map(c => c.trim());
+        if (cells.length > 0) {
+            const row = {};
+            for (let j = 0; j < headers.length; j++) {
+                const header = headers[j];
+                let value = cells[j] ?? '';
+                // Try to convert to number
+                if (value !== '') {
+                    if (value.includes('.')) {
+                        const num = parseFloat(value);
+                        if (!isNaN(num))
+                            value = num;
+                    }
+                    else {
+                        const num = parseInt(value, 10);
+                        if (!isNaN(num))
+                            value = num;
+                    }
+                }
+                row[header] = value;
+            }
+            data.push(row);
+        }
+    }
+    if (data.length === 0) {
+        return null;
+    }
+    // Build columns spec
+    const columns = headers.map((header, i) => ({
+        id: header,
+        title: header,
+        align: alignments[i] ?? 'left',
+    }));
+    return {
+        type: 'table',
+        spec: { data, columns, theme },
+    };
+}
+/**
+ * Parse markdown layout and return HTML
+ */
+export function parseMarkdownToDashboard(markdown, baseTheme = 'light', _baseDir, strict = false, testMode = false) {
+    const lines = markdown.trim().split('\n');
+    const { theme, pageTitle, continuous, remainingLines } = parseFrontmatter(lines, baseTheme);
+    const sections = [];
+    let currentSection = { title: '', rows: [] };
+    let currentRow = [];
+    let inCodeBlock = false;
+    let codeType = '';
+    let codeContent = [];
+    let codeSizeParsed = null;
+    let paragraphLines = [];
+    let inMarkdownTable = false;
+    let markdownTableLines = [];
+    const flushParagraph = () => {
+        if (paragraphLines.length > 0) {
+            const text = paragraphLines.join(' ').trim();
+            if (text) {
+                currentRow.push({ type: 'text', spec: { content: text, theme } });
+            }
+            paragraphLines = [];
+        }
+    };
+    const flushMarkdownTable = () => {
+        if (markdownTableLines.length > 0) {
+            const tableItem = parseMarkdownTable(markdownTableLines, theme);
+            if (tableItem) {
+                currentRow.push(tableItem);
+            }
+            markdownTableLines = [];
+        }
+        inMarkdownTable = false;
+    };
+    const flushRow = () => {
+        if (currentRow.length > 0) {
+            currentSection.rows.push(currentRow);
+            currentRow = [];
+        }
+    };
+    let codeFile = null;
+    for (const line of remainingLines) {
+        // Handle code blocks
+        if (line.startsWith('```')) {
+            if (!inCodeBlock) {
+                flushParagraph();
+                let codeHeader = line.slice(3).trim();
+                // Parse size=auto or size=[cols,rows]
+                let codeSize = null;
+                if (/size\s*=\s*auto\b/.test(codeHeader)) {
+                    codeSize = 'auto';
+                    codeHeader = codeHeader.replace(/\s*size\s*=\s*auto\b/, '');
+                }
+                else {
+                    const sizeMatch = codeHeader.match(/size\s*=\s*\[\s*(\d+)\s*,\s*(\d+)\s*\]/);
+                    if (sizeMatch) {
+                        codeSize = [parseInt(sizeMatch[1], 10), parseInt(sizeMatch[2], 10)];
+                        codeHeader = codeHeader.replace(/\s*size\s*=\s*\[\s*\d+\s*,\s*\d+\s*\]/, '');
+                    }
+                }
+                // Parse file= parameter
+                codeFile = null;
+                if (codeHeader.includes(' file=')) {
+                    const parts = codeHeader.split(' file=');
+                    codeHeader = parts[0].trim();
+                    codeFile = parts[1]?.trim() ?? null;
+                }
+                // Parse type (first word after removing size= and file= parameters)
+                codeType = codeHeader.split(' ')[0] ?? '';
+                codeSizeParsed = codeSize;
+                codeContent = [];
+                inCodeBlock = true;
+            }
+            else {
+                inCodeBlock = false;
+                if (codeType) {
+                    try {
+                        let spec = {};
+                        let fileData = null;
+                        // Load file data if specified
+                        if (codeFile && _baseDir) {
+                            const filePath = resolve(_baseDir, codeFile);
+                            if (existsSync(filePath)) {
+                                if (codeFile.endsWith('.csv')) {
+                                    fileData = parseCsv(filePath);
+                                }
+                                else if (codeFile.endsWith('.json')) {
+                                    const jsonContent = readFileSync(filePath, 'utf-8');
+                                    const parsed = JSON.parse(jsonContent);
+                                    if (Array.isArray(parsed)) {
+                                        fileData = parsed;
+                                    }
+                                    else {
+                                        spec = convertColumnarFormat(parsed);
+                                    }
+                                }
+                            }
+                            else if (strict) {
+                                throw new Error(`File not found: ${filePath}`);
+                            }
+                        }
+                        // Parse inline content as options or full spec
+                        if (codeContent.length > 0) {
+                            const inlineSpec = JSON.parse(codeContent.join('\n'));
+                            if (fileData !== null) {
+                                // File provides data, inline provides options
+                                spec = { ...inlineSpec, data: fileData };
+                            }
+                            else {
+                                spec = inlineSpec;
+                            }
+                        }
+                        else if (fileData !== null) {
+                            // CSV with no inline options - auto-detect x/y from columns
+                            const columns = fileData.length > 0 ? Object.keys(fileData[0]) : [];
+                            spec.data = fileData;
+                            if (columns.length >= 2) {
+                                spec.x = columns[0];
+                                spec.y = columns[1];
+                            }
+                        }
+                        // Only add item if we have data or a valid spec
+                        if (spec.data || Object.keys(spec).length > 0) {
+                            spec = convertColumnarFormat(spec);
+                            spec.theme = (spec.theme ?? theme);
+                            const item = { type: codeType, spec };
+                            if (codeSizeParsed) {
+                                item.size = codeSizeParsed;
+                            }
+                            currentRow.push(item);
+                        }
+                    }
+                    catch (e) {
+                        if (strict)
+                            throw new Error(`Error in ${codeType} block: ${e instanceof Error ? e.message : 'Unknown error'}`);
+                    }
+                }
+                codeType = '';
+                codeContent = [];
+                codeSizeParsed = null;
+                codeFile = null;
+            }
+            continue;
+        }
+        if (inCodeBlock) {
+            codeContent.push(line);
+            continue;
+        }
+        // Handle headings
+        // H1: Major section with page break (unless continuous mode)
+        if (line.startsWith('# ') && !line.startsWith('## ') && !line.startsWith('### ')) {
+            flushParagraph();
+            flushRow();
+            if (currentSection.rows.length > 0 || currentSection.title) {
+                sections.push(currentSection);
+            }
+            const sectionTitle = line.slice(2).trim();
+            // H1 creates a page break (will be suppressed if continuous mode is enabled)
+            currentSection = { title: sectionTitle, rows: [], pageBreak: !continuous };
+            continue;
+        }
+        // H2: Section title without page break
+        if (line.startsWith('## ') && !line.startsWith('### ')) {
+            flushParagraph();
+            flushRow();
+            if (currentSection.rows.length > 0 || currentSection.title) {
+                sections.push(currentSection);
+            }
+            currentSection = { title: line.slice(3).trim(), rows: [] };
+            continue;
+        }
+        // H3: Light inline header (subtle, smaller text within current section)
+        if (line.startsWith('### ')) {
+            flushParagraph();
+            if (inMarkdownTable) {
+                flushMarkdownTable();
+            }
+            flushRow();
+            const headerText = line.slice(4).trim();
+            // Add as an inline header item in the current row
+            currentRow.push({
+                type: 'inline_header',
+                spec: { text: headerText, theme },
+            });
+            flushRow();
+            continue;
+        }
+        // Handle page breaks (=== forces new page when printing)
+        if (line.trim() === '===') {
+            flushParagraph();
+            if (inMarkdownTable) {
+                flushMarkdownTable();
+            }
+            flushRow();
+            // Save current section and start a new one with page break flag
+            if (currentSection.rows.length > 0 || currentSection.title) {
+                sections.push(currentSection);
+            }
+            currentSection = { title: '', rows: [], pageBreak: true };
+            continue;
+        }
+        // Handle horizontal rules (section break - visual divider only)
+        if (['---', '***', '___'].includes(line.trim())) {
+            flushParagraph();
+            if (inMarkdownTable) {
+                flushMarkdownTable();
+            }
+            flushRow();
+            // Save current section and start a new one (without title)
+            if (currentSection.rows.length > 0 || currentSection.title) {
+                sections.push(currentSection);
+            }
+            currentSection = { title: '', rows: [] };
+            continue;
+        }
+        // Empty line = new row
+        if (!line.trim()) {
+            flushParagraph();
+            if (inMarkdownTable) {
+                flushMarkdownTable();
+            }
+            if (currentRow.length > 0) {
+                flushRow();
+            }
+            continue;
+        }
+        // Handle markdown tables (lines starting with |)
+        if (line.trim().startsWith('|')) {
+            flushParagraph();
+            inMarkdownTable = true;
+            markdownTableLines.push(line);
+            continue;
+        }
+        // End markdown table on non-table line
+        if (inMarkdownTable) {
+            flushMarkdownTable();
+        }
+        // Regular text
+        paragraphLines.push(line);
+    }
+    // Flush remaining content
+    flushParagraph();
+    if (inMarkdownTable) {
+        flushMarkdownTable();
+    }
+    flushRow();
+    if (currentSection.rows.length > 0 || currentSection.title) {
+        sections.push(currentSection);
+    }
+    // Generate HTML
+    const componentsHtml = [];
+    const chartScripts = [];
+    let chartCounter = 0;
+    const seenTypes = new Set();
+    const testItems = [];
+    for (const section of sections) {
+        const sectionHtml = [];
+        if (section.title) {
+            sectionHtml.push(`<h2 class="section-title">${escapeHtml(section.title.toUpperCase())}</h2>`);
+        }
+        for (const row of section.rows) {
+            resolveAutoSizes(row);
+            const rowItems = [];
+            for (const item of row) {
+                const compType = item.type;
+                const spec = item.spec;
+                const size = item.size ?? DEFAULT_SIZES[compType] ?? [8, 4];
+                const colSpan = size[0];
+                const rowSpan = size[1];
+                chartCounter++;
+                const chartId = `chart_${chartCounter}`;
+                const itemHeight = rowSpan * ROW_HEIGHT_PX;
+                // Get anchor for navigation (only in test mode, and only for first occurrence)
+                const anchorId = testMode && !seenTypes.has(compType) ? compType : '';
+                if (anchorId)
+                    seenTypes.add(compType);
+                // Track test items for test harness mode
+                if (testMode) {
+                    const testName = spec.title || spec.label ||
+                        `${compType.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())} ${chartCounter}`;
+                    testItems.push({
+                        id: chartId,
+                        name: testName,
+                        type: compType,
+                        spec,
+                        section: section.title || compType,
+                    });
+                }
+                // Check for pct_bar sparkline (renders as HTML, not ECharts)
+                const sparkType = spec.sparkType;
+                if (compType === 'sparkline' && (sparkType === 'pct' || sparkType === 'pct_bar')) {
+                    rowItems.push(renderPctBarSparkline(spec, colSpan, anchorId));
+                }
+                // Check if it's a chart type with options builder
+                else {
+                    const builder = getOptionsBuilder(compType);
+                    if (builder) {
+                        const { html, script } = renderEchartsComponent(compType, spec, chartId, colSpan, itemHeight, anchorId);
+                        if (html && script) {
+                            rowItems.push(html);
+                            chartScripts.push(script);
+                        }
+                        else {
+                            rowItems.push(`<div class="grid-item"><p>Error rendering ${compType}</p></div>`);
+                        }
+                    }
+                    else if (compType === 'big_value') {
+                        rowItems.push(renderBigValue(spec, colSpan, anchorId));
+                    }
+                    else if (compType === 'delta') {
+                        rowItems.push(renderDelta(spec, colSpan, anchorId));
+                    }
+                    else if (compType === 'alert') {
+                        rowItems.push(renderAlert(spec, colSpan, anchorId));
+                    }
+                    else if (compType === 'note') {
+                        rowItems.push(renderNote(spec, colSpan, anchorId));
+                    }
+                    else if (compType === 'text') {
+                        rowItems.push(renderText(spec, colSpan, anchorId));
+                    }
+                    else if (compType === 'textarea') {
+                        rowItems.push(renderTextarea(spec, colSpan, anchorId));
+                    }
+                    else if (compType === 'table') {
+                        rowItems.push(renderTable(spec, colSpan, anchorId, theme));
+                    }
+                    else if (compType === 'empty_space') {
+                        rowItems.push(renderEmptySpace(spec, colSpan, anchorId));
+                    }
+                    else if (compType === 'inline_header') {
+                        rowItems.push(renderInlineHeader(spec, anchorId));
+                    }
+                    else {
+                        rowItems.push(`<div class="grid-item"><p>Unknown type: ${compType}</p></div>`);
+                    }
+                }
+            }
+            if (rowItems.length > 0) {
+                sectionHtml.push(`
+          <div class="row">
+            ${rowItems.join('')}
+          </div>`);
+            }
+        }
+        if (sectionHtml.length > 0) {
+            const sectionClasses = section.pageBreak ? 'dashboard-section page-break' : 'dashboard-section';
+            componentsHtml.push(`
+        <section class="${sectionClasses}">
+          ${sectionHtml.join('')}
+        </section>`);
+        }
+    }
+    // Test mode: use test harness renderer
+    if (testMode) {
+        // Count unique types for navigation
+        const typesCount = new Map();
+        for (const item of testItems) {
+            typesCount.set(item.type, (typesCount.get(item.type) || 0) + 1);
+        }
+        // Generate navigation items sorted alphabetically
+        const navItems = [...typesCount.keys()]
+            .sort()
+            .map(t => `<a href="#${t}" class="nav-item">${t.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}</a>`)
+            .join('');
+        // Generate test specs JSON for export
+        const testSpecsObj = {};
+        for (const item of testItems) {
+            testSpecsObj[item.id] = item.spec;
+        }
+        const testSpecsJson = JSON.stringify(testSpecsObj);
+        // Generate JavaScript
+        const testHarnessJs = generateTestHarnessJs(testItems.length, testSpecsJson);
+        return generateTestHarnessHtml(pageTitle, navItems, testItems.length, typesCount.size, componentsHtml.join(''), chartScripts.join(''), testHarnessJs, theme);
+    }
+    return generateDashboardHtml(pageTitle, componentsHtml, chartScripts, theme, '', continuous);
+}
+/**
+ * Parse markdown layout into dashboard spec (legacy API for compatibility)
+ */
+export function parseMarkdownLayout(markdown, _baseDir) {
+    const lines = markdown.trim().split('\n');
+    const { theme, pageTitle, continuous } = parseFrontmatter(lines, 'light');
+    return {
+        frontmatter: {
+            theme,
+            title: pageTitle,
+            continuous,
+        },
+        rows: [],
+    };
+}
+/**
+ * Parse markdown into test harness HTML with navigation and summary
+ */
+export function parseMarkdownToTestHarness(markdown, baseTheme = 'light', baseDir, strict = false) {
+    return parseMarkdownToDashboard(markdown, baseTheme, baseDir, strict, true);
+}
+//# sourceMappingURL=parser.js.map