mviz 1.6.2 → 1.6.4

package/dist/core/export.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Client-side PNG export for ECharts charts.
+ *
+ * Generates JavaScript that adds a right-click context menu to each chart,
+ * allowing users to save high-resolution PNGs in three presets:
+ *   - Square:    1080 x 1080
+ *   - Portrait:  1080 x 1350  (4:5)
+ *   - Landscape: 1920 x 1080  (16:9)
+ *
+ * The chart reflows to fill the full target canvas, with the title
+ * drawn above. Text scales proportionally via pixelRatio.
+ */
+/**
+ * Return the CSS for the export context menu.
+ */
+export declare function generateExportCss(): string;
+/**
+ * Return the JavaScript that powers chart PNG export.
+ *
+ * Injected once into the page. Relies on `window.chartInstances`
+ * and `window.chartOptions` being populated by the renderer.
+ */
+export declare function generateExportJs(): string;
+//# sourceMappingURL=export.d.ts.map

package/dist/core/export.js

@@ -0,0 +1,262 @@
+/**
+ * Client-side PNG export for ECharts charts.
+ *
+ * Generates JavaScript that adds a right-click context menu to each chart,
+ * allowing users to save high-resolution PNGs in three presets:
+ *   - Square:    1080 x 1080
+ *   - Portrait:  1080 x 1350  (4:5)
+ *   - Landscape: 1920 x 1080  (16:9)
+ *
+ * The chart reflows to fill the full target canvas, with the title
+ * drawn above. Text scales proportionally via pixelRatio.
+ */
+import { COLORS } from './themes.js';
+/** Logical base width for export — matches typical mobile screen width. */
+const LOGICAL_BASE = 360;
+/** Title layout in logical pixels (scale with pixelRatio for output). */
+const TITLE_FONT_SIZE = 14;
+const TITLE_PADDING_TOP = 12;
+const TITLE_PADDING_BOTTOM = 8;
+const TITLE_PADDING_LEFT = 12;
+const EXPORT_PRESETS = {
+    square: { width: 1080, height: 1080, label: 'Square (1080 × 1080)' },
+    portrait: { width: 1080, height: 1350, label: 'Portrait (1080 × 1350)' },
+    landscape: { width: 1920, height: 1080, label: 'Landscape (1920 × 1080)' },
+};
+/**
+ * Return the CSS for the export context menu.
+ */
+export function generateExportCss() {
+    return `
+    .mviz-export-menu {
+      position: fixed;
+      z-index: 10000;
+      background: ${COLORS.WHITE};
+      border: 1px solid ${COLORS.GRAY_300};
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+      padding: 4px 0;
+      min-width: 200px;
+      font-family: var(--font-family, 'Helvetica Neue', Helvetica, Arial, sans-serif);
+      font-size: 12px;
+      color: ${COLORS.TEXT_DARK};
+    }
+    body.theme-dark .mviz-export-menu {
+      background: ${COLORS.GRAY_800};
+      border-color: ${COLORS.GRAY_600};
+      color: ${COLORS.GRAY_200};
+    }
+    .mviz-export-menu-header {
+      padding: 6px 12px 4px;
+      font-size: 10px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: ${COLORS.GRAY_500};
+    }
+    body.theme-dark .mviz-export-menu-header { color: ${COLORS.GRAY_600}; }
+    .mviz-export-menu-item {
+      padding: 6px 12px;
+      cursor: pointer;
+    }
+    .mviz-export-menu-item:hover {
+      background: ${COLORS.GRAY_100};
+    }
+    body.theme-dark .mviz-export-menu-item:hover {
+      background: ${COLORS.GRID_DARK};
+    }
+    @media print {
+      .mviz-export-menu { display: none; }
+    }`;
+}
+/**
+ * Return the JavaScript that powers chart PNG export.
+ *
+ * Injected once into the page. Relies on `window.chartInstances`
+ * and `window.chartOptions` being populated by the renderer.
+ */
+export function generateExportJs() {
+    const presets = JSON.stringify(EXPORT_PRESETS);
+    // Inject TypeScript constants into the JS runtime
+    const config = JSON.stringify({
+        LOGICAL_BASE,
+        TITLE_FONT_SIZE,
+        TITLE_PADDING_TOP,
+        TITLE_PADDING_BOTTOM,
+        TITLE_PADDING_LEFT,
+        BG_LIGHT: COLORS.BG_LIGHT,
+        BG_DARK: COLORS.DARK,
+        TEXT_LIGHT: COLORS.TEXT_DARK,
+        TEXT_DARK: COLORS.GRAY_200,
+    });
+    return `
+    // --- mviz PNG export ---
+    (function() {
+      var PRESETS = ${presets};
+      var CFG = ${config};
+      var menu = null;
+
+      function removeMenu() {
+        if (menu && menu.parentNode) { menu.parentNode.removeChild(menu); menu = null; }
+      }
+
+      function isDarkTheme() {
+        return document.body.classList.contains('theme-dark');
+      }
+
+      function getChartBg() {
+        var bg = getComputedStyle(document.body).backgroundColor;
+        return (bg && bg !== 'rgba(0, 0, 0, 0)') ? bg : (isDarkTheme() ? CFG.BG_DARK : CFG.BG_LIGHT);
+      }
+
+      function getChartTitle(chartEl) {
+        var gridItem = chartEl.closest('.grid-item');
+        if (gridItem) {
+          var h3 = gridItem.querySelector('.chart-title');
+          if (h3) return h3.textContent.trim();
+        }
+        return '';
+      }
+
+      function slugify(text) {
+        return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'chart';
+      }
+
+      function renderChart(chartId, drawW, drawH) {
+        var tmpDiv = document.createElement('div');
+        tmpDiv.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:' + drawW + 'px;height:' + drawH + 'px;';
+        document.body.appendChild(tmpDiv);
+
+        var tmpChart = echarts.init(tmpDiv, null, {renderer: 'canvas', width: drawW, height: drawH});
+        var currentTheme = isDarkTheme() ? 'dark' : 'light';
+        var opts = window.chartOptions && window.chartOptions[chartId];
+        var instance = window.chartInstances[chartId];
+        tmpChart.setOption(opts ? opts[currentTheme] : instance.getOption());
+
+        return { div: tmpDiv, chart: tmpChart };
+      }
+
+      function getThemeFont() {
+        var fontFamily = getComputedStyle(document.body).fontFamily;
+        return fontFamily || '"Helvetica Neue", Helvetica, Arial, sans-serif';
+      }
+
+      function drawTitle(ctx, title, pixelRatio) {
+        ctx.fillStyle = isDarkTheme() ? CFG.TEXT_DARK : CFG.TEXT_LIGHT;
+        ctx.font = 'bold ' + Math.round(CFG.TITLE_FONT_SIZE * pixelRatio) + 'px ' + getThemeFont();
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText(
+          title.toUpperCase(),
+          Math.round(CFG.TITLE_PADDING_LEFT * pixelRatio),
+          Math.round(CFG.TITLE_PADDING_TOP * pixelRatio)
+        );
+      }
+
+      function triggerDownload(canvas, filename) {
+        var a = document.createElement('a');
+        a.href = canvas.toDataURL('image/png');
+        a.download = filename;
+        a.click();
+      }
+
+      function exportChart(chartId, presetKey) {
+        if (!window.chartInstances || !window.chartInstances[chartId]) return;
+
+        var preset = PRESETS[presetKey];
+        var targetW = preset.width;
+        var targetH = preset.height;
+        var pixelRatio = targetW / CFG.LOGICAL_BASE;
+        var logicalH = Math.round(targetH / pixelRatio);
+
+        // Reserve space for title
+        var chartEl = document.getElementById(chartId);
+        var title = getChartTitle(chartEl);
+        var titleLogicalH = title ? (CFG.TITLE_PADDING_TOP + CFG.TITLE_FONT_SIZE + CFG.TITLE_PADDING_BOTTOM) : 0;
+
+        // ECharts reflows to fill its container — give it the full space
+        var tmp = renderChart(chartId, CFG.LOGICAL_BASE, logicalH - titleLogicalH);
+
+        // Wait a frame for render, then composite
+        setTimeout(function() {
+          var chartDataUrl = tmp.chart.getDataURL({type: 'png', pixelRatio: pixelRatio, backgroundColor: 'transparent'});
+          var titlePxH = Math.round(titleLogicalH * pixelRatio);
+
+          var canvas = document.createElement('canvas');
+          canvas.width = targetW;
+          canvas.height = targetH;
+          var ctx = canvas.getContext('2d');
+
+          ctx.fillStyle = getChartBg();
+          ctx.fillRect(0, 0, targetW, targetH);
+
+          if (title) { drawTitle(ctx, title, pixelRatio); }
+
+          var img = new Image();
+          img.onload = function() {
+            ctx.drawImage(img, 0, titlePxH, targetW, targetH - titlePxH);
+            triggerDownload(canvas, slugify(title || 'chart') + '-' + presetKey + '.png');
+            tmp.chart.dispose();
+            document.body.removeChild(tmp.div);
+          };
+          img.src = chartDataUrl;
+        }, 100);
+      }
+
+      function showMenu(e, chartId) {
+        e.preventDefault();
+        removeMenu();
+
+        menu = document.createElement('div');
+        menu.className = 'mviz-export-menu';
+
+        var header = document.createElement('div');
+        header.className = 'mviz-export-menu-header';
+        header.textContent = 'Save as PNG';
+        menu.appendChild(header);
+
+        var keys = ['square', 'portrait', 'landscape'];
+        for (var i = 0; i < keys.length; i++) {
+          (function(key) {
+            var item = document.createElement('div');
+            item.className = 'mviz-export-menu-item';
+            item.textContent = PRESETS[key].label;
+            item.addEventListener('click', function() {
+              removeMenu();
+              exportChart(chartId, key);
+            });
+            menu.appendChild(item);
+          })(keys[i]);
+        }
+
+        // Position near cursor, clamped to viewport
+        var x = e.clientX;
+        var y = e.clientY;
+        document.body.appendChild(menu);
+        var mw = menu.offsetWidth;
+        var mh = menu.offsetHeight;
+        if (x + mw > window.innerWidth) x = window.innerWidth - mw - 4;
+        if (y + mh > window.innerHeight) y = window.innerHeight - mh - 4;
+        menu.style.left = x + 'px';
+        menu.style.top = y + 'px';
+      }
+
+      // Dismiss on click elsewhere
+      document.addEventListener('click', removeMenu);
+      document.addEventListener('contextmenu', function(e) {
+        // Only show for chart containers that have an ECharts instance
+        var target = e.target;
+        var el = target.closest ? target.closest('[id]') : null;
+        while (el) {
+          if (window.chartInstances && window.chartInstances[el.id]) {
+            showMenu(e, el.id);
+            return;
+          }
+          el = el.parentElement ? el.parentElement.closest('[id]') : null;
+        }
+        // Not a chart — let default context menu through
+        removeMenu();
+      });
+    })();`;
+}
+//# sourceMappingURL=export.js.map

package/dist/core/serializer.js

@@ -1,6 +1,7 @@
 /**
  * JSON serialization with JavaScript function embedding for ECharts
  */
+import { generateExportCss, generateExportJs } from './export.js';
 /**
  * Special markers for JS functions that need to be embedded in JSON
  */
@@ -61,6 +62,8 @@ export function createJsFunction(code) {
  */
 export function wrapHtml(chartId, option, css, width, height) {
     const optionJson = serializeOption(option);
+    const exportCss = generateExportCss();
+    const exportJs = generateExportJs();
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -69,15 +72,22 @@ export function wrapHtml(chartId, option, css, width, height) {
   <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
   <style>
     ${css}
+    ${exportCss}
   </style>
 </head>
 <body>
   <div id="${chartId}" style="width: ${width}; height: ${height}px;"></div>
   <script>
-    var chart = echarts.init(document.getElementById('${chartId}'), null, {renderer: 'svg'});
     var option = ${optionJson};
+    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: option, dark: option };
     chart.setOption(option);
     window.addEventListener('resize', function() { chart.resize(); });
+
+    ${exportJs}
   </script>
 </body>
 </html>`;

package/dist/core/themes.js

@@ -193,11 +193,15 @@ export function getPalette(theme = 'light') {
  * Custom theme can specify which base theme to extend.
  */
 export function getThemeColorsWithCustom(theme = 'light', custom) {
-    const baseTheme = custom?.extends ?? theme;
-    const baseColors = getThemeColors(baseTheme);
-    if (!custom?.colors) {
-        return baseColors;
+    // Only apply custom color overrides when the requested theme matches
+    // the theme the custom colors were designed for (custom.extends).
+    // For the opposite theme, use standard defaults so dark mode isn't
+    // broken by light-mode custom colors (and vice versa).
+    const customExtends = custom?.extends ?? 'light';
+    if (!custom?.colors || theme !== customExtends) {
+        return getThemeColors(theme);
     }
+    const baseColors = getThemeColors(customExtends);
     return { ...baseColors, ...custom.colors };
 }
 /**
@@ -249,10 +253,11 @@ export function getTooltipConfig(theme = 'light') {
 export function getBaseOption(spec) {
     const theme = spec.theme ?? 'light';
     const colors = getThemeColors(theme);
+    const fonts = getFontsWithCustom(spec.customTheme);
     return {
         backgroundColor: 'transparent',
         textStyle: {
-            fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+            fontFamily: fonts.family,
             color: colors.text,
         },
         title: spec.title

package/dist/layout/parser.js

@@ -12,7 +12,7 @@ import { getOptionsBuilder } from '../charts/index.js';
 import { serializeOption } from '../core/serializer.js';
 import { formatNumber, inferFormat, resolveCurrency } from '../core/formatting.js';
 import { lintSpec } from '../core/linter.js';
-import { COLORS, GRID_TOTAL_COLUMNS, DEFAULT_SIZES, autoSizeChart, getHeatmapColors, getThemeColors, getThemeColorsWithCustom, ALERT_ICONS, } from '../core/themes.js';
+import { COLORS, GRID_TOTAL_COLUMNS, DEFAULT_SIZES, autoSizeChart, getHeatmapColors, getThemeColors, getThemeColorsWithCustom, getFontsWithCustom, ALERT_ICONS, } from '../core/themes.js';
 import { renderMermaid, renderMermaidAscii } from 'beautiful-mermaid';
 import { formatCell, computeHeatmapRanges, computeDumbbellRanges, } from '../components/table.js';
 // Height per row unit (compact for print) - must match Python's ROW_HEIGHT_PX
@@ -139,16 +139,25 @@ function renderEchartsComponent(compType, spec, chartId, colSpan, itemHeight, an
     }
     const chartHeight = itemHeight - (title ? 24 : 0);
     // Note: Time series validation is handled by the linter when specs are parsed
+    // Resolve custom font for ECharts textStyle injection
+    const fontFamily = getFontsWithCustom(customTheme).family;
+    function applyFont(option) {
+        option.textStyle = { ...(option.textStyle ?? {}), fontFamily };
+    }
     // Generate light theme options
     const specLight = { ...spec, theme: 'light', height: chartHeight, customTheme };
     const optionLight = builder(specLight);
     if (!optionLight) {
         return { html: null, script: null };
     }
+    applyFont(optionLight);
     const optionJsonLight = serializeOption(optionLight);
     // Generate dark theme options
     const specDark = { ...spec, theme: 'dark', height: chartHeight, customTheme };
     const optionDark = builder(specDark);
+    if (optionDark) {
+        applyFont(optionDark);
+    }
     const optionJsonDark = optionDark ? serializeOption(optionDark) : null;
     const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
     const html = `

package/dist/layout/templates.js

@@ -2,6 +2,7 @@
  * HTML templates for dashboard generation.
  */
 import { ECHARTS_CDN, PALETTE, COLORS, getThemeColors, getThemeColorsWithCustom, getPaletteWithCustom, getFontsWithCustom, getLinkColor, PRINT_PORTRAIT_WIDTH, PRINT_LANDSCAPE_WIDTH, } from '../core/themes.js';
+import { generateExportCss, generateExportJs } from '../core/export.js';
 /**
  * Escape HTML special characters
  */
@@ -102,7 +103,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait') {
       margin-bottom: 8px;
     }
     .page-title {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       font-size: 18px;
       font-weight: 900;
       margin-bottom: 12px;
@@ -118,7 +119,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait') {
       border-top: 1px solid var(--grid);
     }
     .section-title {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       font-size: 14px;
       font-weight: 900;
       letter-spacing: 0.05em;
@@ -127,7 +128,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait') {
       margin-bottom: 16px;
     }
     .chart-title {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
+      font-family: var(--font-family); font-weight: 700;
       font-size: 10px;
       font-weight: bold;
       color: var(--text);
@@ -156,6 +157,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait') {
       .grid-item { break-inside: avoid; page-break-inside: avoid; }
       .dashboard-section { break-inside: avoid; page-break-inside: avoid; }
       .dashboard-section.page-break { page-break-before: always; }
+      .section-title { break-after: avoid; page-break-after: avoid; }
       .data-table { break-inside: avoid; page-break-inside: avoid; }
       .theme-toggle { display: none; }
       .title-row { break-after: avoid; page-break-after: avoid; }
@@ -171,7 +173,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait') {
       transition: background 0.3s;
     }
     .big-value {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
+      font-family: var(--font-family); font-weight: 700;
       font-size: 28px;
       font-weight: bold;
       color: var(--text);
@@ -186,7 +188,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait') {
       font-size: 16px;
     }
     .delta .value {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       font-size: 16px;
       font-weight: bold;
     }
@@ -243,7 +245,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait') {
       width: 100%; border-collapse: collapse; font-size: 11px;
     }
     .data-table th {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 9px; font-weight: bold;
+      font-family: var(--font-family); font-size: 9px; font-weight: bold;
       color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em;
       padding: 6px 8px; border-bottom: 1px solid var(--text); text-align: left;
     }
@@ -289,7 +291,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait') {
       margin-bottom: 4px;
     }
     .inline-header-text {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       font-size: 11px;
       font-weight: 700;
       color: var(--text);
@@ -318,7 +320,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait') {
     .pct-bar-value {
       font-size: 11px;
       color: var(--text);
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       font-weight: 700;
       min-width: 32px;
       flex-shrink: 0;
@@ -339,7 +341,7 @@ export function generateDashboardCss(customTheme, orientation = 'portrait') {
       padding: 4px 8px;
       border-radius: 4px;
       font-size: 11px;
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       white-space: nowrap;
       opacity: 0;
       visibility: hidden;
@@ -360,6 +362,8 @@ export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, t
     const initialThemeClass = theme === 'dark' ? 'theme-dark' : 'theme-light';
     const continuousClass = continuous ? ' dashboard-continuous' : '';
     const css = generateDashboardCss(customTheme, orientation);
+    const exportCss = generateExportCss();
+    const exportJs = generateExportJs();
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -369,6 +373,7 @@ export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, t
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   ${extraScripts}
   <style>${css}
+    ${exportCss}
   </style>
 </head>
 <body class="${initialThemeClass}">
@@ -416,6 +421,8 @@ export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, t
         }
       });
     });
+
+    ${exportJs}
   </script>
 </body>
 </html>`;
@@ -441,6 +448,8 @@ export function generateTestHarnessCss() {
       --grid: ${colorsLight.border};
       --red: ${colorsLight.accent};
       --link: ${linkColor};
+      --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      --font-mono: 'Consolas', 'Monaco', monospace;
     }
     body.theme-dark {
       --bg: ${colorsDark.background};
@@ -453,7 +462,7 @@ export function generateTestHarnessCss() {
     }
 
     body {
-      font-family: 'Inter', sans-serif;
+      font-family: var(--font-family);
       background: var(--bg);
       color: var(--text);
       transition: background-color 0.3s, color 0.3s;
@@ -598,7 +607,7 @@ export function generateTestHarnessCss() {
       margin-bottom: 40px;
     }
     .section-title {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       font-size: 14px;
       font-weight: 900;
       letter-spacing: 0.05em;
@@ -628,7 +637,7 @@ export function generateTestHarnessCss() {
       margin-bottom: 8px;
     }
     .page-title {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       font-size: 18px;
       font-weight: 900;
       margin-bottom: 12px;
@@ -644,7 +653,7 @@ export function generateTestHarnessCss() {
       border-top: 1px solid var(--grid);
     }
     .chart-title {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
+      font-family: var(--font-family); font-weight: 700;
       font-size: 10px;
       font-weight: bold;
       color: var(--text);
@@ -682,7 +691,7 @@ export function generateTestHarnessCss() {
 
     /* Component styles */
     .big-value {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
+      font-family: var(--font-family); font-weight: 700;
       font-size: 28px;
       font-weight: bold;
       color: var(--text);
@@ -697,7 +706,7 @@ export function generateTestHarnessCss() {
       font-size: 16px;
     }
     .delta .value {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       font-size: 16px;
       font-weight: bold;
     }
@@ -751,7 +760,7 @@ export function generateTestHarnessCss() {
       width: 100%; border-collapse: collapse; font-size: 11px;
     }
     .data-table th {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 9px; font-weight: bold;
+      font-family: var(--font-family); font-size: 9px; font-weight: bold;
       color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em;
       padding: 6px 8px; border-bottom: 1px solid var(--text); text-align: left;
     }
@@ -778,7 +787,7 @@ export function generateTestHarnessCss() {
       margin-bottom: 4px;
     }
     .inline-header-text {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       font-size: 11px;
       font-weight: 700;
       color: var(--text);
@@ -808,7 +817,7 @@ export function generateTestHarnessCss() {
     .pct-bar-value {
       font-size: 11px;
       color: var(--text);
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       font-weight: 700;
       min-width: 32px;
       flex-shrink: 0;
@@ -830,7 +839,7 @@ export function generateTestHarnessCss() {
       padding: 4px 8px;
       border-radius: 4px;
       font-size: 11px;
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-family: var(--font-family);
       white-space: nowrap;
       opacity: 0;
       visibility: hidden;
@@ -874,6 +883,7 @@ export function generateTestHarnessCss() {
       .grid-item { break-inside: avoid; page-break-inside: avoid; }
       .dashboard-section { break-inside: avoid; page-break-inside: avoid; }
       .dashboard-section.page-break { page-break-before: always; }
+      .section-title { break-after: avoid; page-break-after: avoid; }
       .data-table { break-inside: avoid; page-break-inside: avoid; }
       header { display: none; }
       .annotation-bar { display: none; }
@@ -974,6 +984,8 @@ export function generateTestHarnessHtml(pageTitle, navItems, totalCharts, typesC
     const initialThemeClass = theme === 'dark' ? 'theme-dark' : 'theme-light';
     const css = generateTestHarnessCss();
     const sparklineJs = generateSparklineTooltipJs();
+    const exportCss = generateExportCss();
+    const exportJs = generateExportJs();
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -983,6 +995,7 @@ export function generateTestHarnessHtml(pageTitle, navItems, totalCharts, typesC
   <script src="${ECHARTS_CDN}"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <style>${css}
+    ${exportCss}
   </style>
 </head>
 <body class="${initialThemeClass}">
@@ -1036,6 +1049,8 @@ export function generateTestHarnessHtml(pageTitle, navItems, totalCharts, typesC
     ${chartScripts}
 
     ${sparklineJs}
+
+    ${exportJs}
   </script>
 </body>
 </html>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mviz",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "A chart & report builder designed for use by AI.",
   "type": "module",
   "main": "./dist/index.js",
@@ -83,6 +83,6 @@
   "dependencies": {
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
-    "beautiful-mermaid": "^0.1.3"
+    "beautiful-mermaid": "^1.1.3"
   }
 }