mviz 1.4.2

package/dist/layout/templates.js

@@ -0,0 +1,1016 @@
+/**
+ * HTML templates for dashboard generation.
+ */
+import { ECHARTS_CDN, PALETTE, COLORS, getThemeColors, getLinkColor, } from '../core/themes.js';
+/**
+ * Escape HTML special characters
+ */
+export function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+/**
+ * Generate the dashboard CSS with theme variables.
+ */
+export function generateDashboardCss() {
+    const colorsLight = getThemeColors('light');
+    const colorsDark = getThemeColors('dark');
+    const linkColor = getLinkColor();
+    return `
+    @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&display=swap');
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    /* CSS Variables for theming */
+    :root {
+      --bg: ${colorsLight.background};
+      --text: ${colorsLight.text};
+      --text-muted: ${colorsLight.textSecondary};
+      --grid: ${colorsLight.border};
+      --red: ${COLORS.ERROR_RED};
+      --link: ${linkColor};
+    }
+    body.theme-dark {
+      --bg: ${colorsDark.background};
+      --text: ${colorsDark.text};
+      --text-muted: ${colorsDark.textSecondary};
+      --grid: ${colorsDark.border};
+      --red: ${COLORS.ERROR_RED};
+      --link: ${linkColor};
+    }
+
+    html, body {
+      width: 100%; min-height: 100%;
+      background-color: var(--bg);
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      color: var(--text);
+      font-size: 12px;
+      transition: background-color 0.3s, color 0.3s;
+    }
+    .dashboard {
+      max-width: 720px;
+      margin: 0 auto;
+      padding: 16px;
+      position: relative;
+    }
+    .title-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .title-row .page-title {
+      margin-bottom: 0;
+    }
+    .theme-toggle {
+      background: transparent;
+      border: none;
+      padding: 4px;
+      cursor: pointer;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: color 0.3s;
+    }
+    .theme-toggle:hover {
+      color: var(--text);
+    }
+    .theme-toggle svg {
+      width: 16px;
+      height: 16px;
+    }
+    .theme-toggle .icon-moon { display: block; }
+    .theme-toggle .icon-sun { display: none; }
+    body.theme-dark .theme-toggle .icon-moon { display: none; }
+    body.theme-dark .theme-toggle .icon-sun { display: block; }
+    .red-line {
+      width: 100%;
+      height: 2px;
+      background-color: var(--red);
+      margin-bottom: 8px;
+    }
+    .page-title {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-size: 18px;
+      font-weight: 900;
+      margin-bottom: 12px;
+      color: var(--text);
+    }
+    .dashboard-section {
+      margin-bottom: 16px;
+    }
+    .dashboard-section:not(:first-of-type) {
+      margin-top: 32px;
+      padding-top: 20px;
+      border-top: 1px solid var(--grid);
+    }
+    /* Continuous mode: no section breaks */
+    .dashboard-continuous .dashboard-section:not(:first-of-type) {
+      margin-top: 16px;
+      padding-top: 0;
+      border-top: none;
+    }
+    .section-title {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-size: 14px;
+      font-weight: 900;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--text);
+      margin-bottom: 16px;
+    }
+    .chart-title {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
+      font-size: 10px;
+      font-weight: bold;
+      color: var(--text);
+      margin-bottom: 4px;
+    }
+    .row {
+      display: grid;
+      grid-template-columns: repeat(16, 1fr);
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    @media (max-width: 720px) {
+      .row { grid-template-columns: repeat(8, 1fr); }
+      /* Scale spans proportionally: preserve original span but cap at grid width */
+      .row > * { grid-column: span min(var(--col-span, 8), 8); }
+    }
+    @media (max-width: 480px) {
+      .row { grid-template-columns: 1fr; }
+      .row > * { grid-column: span 1; }
+    }
+    @media print {
+      .dashboard { max-width: 100%; padding: 0; }
+      .row { gap: 6px; margin-bottom: 6px; break-inside: avoid; page-break-inside: avoid; }
+      .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; }
+      .data-table { break-inside: avoid; page-break-inside: avoid; }
+      .theme-toggle { display: none; }
+    }
+    .grid-item {
+      background: var(--bg);
+      padding: 4px;
+      transition: background-color 0.3s;
+    }
+    .big-value {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
+      font-size: 28px;
+      font-weight: bold;
+      color: var(--text);
+      line-height: 1;
+    }
+    .delta {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .delta .arrow {
+      font-size: 16px;
+    }
+    .delta .value {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .label {
+      font-size: 10px;
+      color: var(--text-muted);
+      margin-top: 4px;
+    }
+    .alert {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 8px 10px;
+      border-left: 2px solid;
+    }
+    .alert .icon {
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+    .alert .message {
+      font-size: 11px;
+      line-height: 1.4;
+    }
+    .note {
+      border-left: 3px solid var(--red);
+      background-color: color-mix(in srgb, var(--grid) 25%, transparent);
+      padding: 8px 12px;
+    }
+    .note-warning {
+      border-left-color: #C5A000;
+    }
+    .note-tip {
+      border-left-color: #00887d;
+    }
+    .note-content {
+      font-size: 11px;
+      color: var(--text);
+      line-height: 1.5;
+    }
+    .note-content strong {
+      font-weight: 700;
+    }
+    .text-content {
+      font-size: 11px;
+      line-height: 1.5;
+      color: var(--text);
+    }
+    .data-table {
+      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;
+      color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em;
+      padding: 6px 8px; border-bottom: 1px solid var(--text); text-align: left;
+    }
+    .data-table td {
+      padding: 5px 8px; color: var(--text); border-bottom: 1px solid var(--grid);
+    }
+    .data-table tr.table-striped td {
+      background-color: color-mix(in srgb, var(--grid) 19%, transparent);
+    }
+    .data-table.table-compact th, .data-table.table-compact td {
+      padding: 4px 6px;
+    }
+    .markdown-content {
+      font-size: 11px; color: var(--text); line-height: 1.5;
+    }
+    .markdown-content h1 { font-size: 18px; font-weight: 900; margin: 12px 0 6px 0; }
+    .markdown-content h2 { font-size: 14px; font-weight: 700; margin: 10px 0 4px 0; }
+    .markdown-content h3 { font-size: 12px; font-weight: 700; margin: 8px 0 4px 0; }
+    .markdown-content p { margin: 6px 0; }
+    .markdown-content ul, .markdown-content ol { margin: 6px 0; padding-left: 20px; }
+    .markdown-content li { margin: 3px 0; }
+    .markdown-content code {
+      background: color-mix(in srgb, var(--grid) 25%, transparent); padding: 1px 4px; border-radius: 2px;
+      font-family: 'Consolas', 'Monaco', monospace; font-size: 10px;
+    }
+    .markdown-content pre {
+      background: color-mix(in srgb, var(--grid) 25%, transparent); padding: 8px; border-radius: 3px;
+      overflow-x: auto; margin: 8px 0;
+    }
+    .markdown-content pre code { background: none; padding: 0; }
+    .markdown-content blockquote {
+      border-left: 2px solid var(--red); margin: 8px 0; padding-left: 12px;
+      color: var(--text-muted); font-style: italic;
+    }
+    .markdown-content a { color: var(--link); text-decoration: none; }
+    .markdown-content a:hover { text-decoration: underline; }
+    .markdown-content strong { font-weight: 700; }
+    .markdown-content em { font-style: italic; }
+    .empty-space { background: transparent; }
+    /* Inline header styles (### soft headers) */
+    .inline-header {
+      margin-top: 12px;
+      margin-bottom: 4px;
+    }
+    .inline-header-text {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--text);
+      margin: 0;
+    }
+    /* Progress bar sparkline styles */
+    .pct-bar-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+    }
+    .pct-bar-container {
+      flex: 1;
+      height: 12px;
+      background-color: var(--grid);
+      border-radius: 2px;
+      overflow: hidden;
+      min-width: 60px;
+    }
+    .pct-bar-fill {
+      height: 100%;
+      background-color: ${PALETTE[0]};
+      border-radius: 2px 0 0 2px;
+    }
+    .pct-bar-value {
+      font-size: 11px;
+      color: var(--text);
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-weight: 700;
+      min-width: 32px;
+      flex-shrink: 0;
+    }
+    /* Sparkline tooltip styles - immediate display on hover */
+    .spark-tooltip {
+      position: relative;
+      display: inline-block;
+    }
+    .spark-tooltip::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.85);
+      color: #fff;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      white-space: nowrap;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.15s ease;
+      pointer-events: none;
+      z-index: 1000;
+      margin-bottom: 4px;
+    }
+    .spark-tooltip:hover::after {
+      opacity: 1;
+      visibility: visible;
+    }`;
+}
+/**
+ * Generate complete dashboard HTML.
+ */
+export function generateDashboardHtml(pageTitle, componentsHtml, chartScripts, theme = 'light', extraScripts = '', continuous = false) {
+    const initialThemeClass = theme === 'dark' ? 'theme-dark' : 'theme-light';
+    const continuousClass = continuous ? ' dashboard-continuous' : '';
+    const css = generateDashboardCss();
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>${escapeHtml(pageTitle)}</title>
+  <script src="${ECHARTS_CDN}"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  ${extraScripts}
+  <style>${css}
+  </style>
+</head>
+<body class="${initialThemeClass}">
+  <div class="dashboard${continuousClass}">
+    <div class="red-line"></div>
+    <div class="title-row">
+      <h1 class="page-title">${escapeHtml(pageTitle)}</h1>
+      <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
+        <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+        <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+      </button>
+    </div>
+    ${componentsHtml.join('')}
+  </div>
+  <script>
+    // Theme toggle function
+    function toggleTheme() {
+      var isDark = document.body.classList.contains('theme-dark');
+      var newTheme = isDark ? 'light' : 'dark';
+      document.body.classList.remove('theme-light', 'theme-dark');
+      document.body.classList.add('theme-' + newTheme);
+
+      // Update all charts
+      if (window.chartInstances && window.chartOptions) {
+        for (var id in window.chartInstances) {
+          window.chartInstances[id].setOption(window.chartOptions[id][newTheme]);
+        }
+      }
+    }
+
+    ${chartScripts.join('')}
+
+    // Sparkline tooltip interactivity
+    document.querySelectorAll('.spark-hit').forEach(hit => {
+      hit.addEventListener('mouseenter', function() {
+        const tooltip = this.closest('.spark-tooltip');
+        if (tooltip) {
+          tooltip.setAttribute('data-tooltip', this.dataset.idx + ': ' + this.dataset.val);
+        }
+      });
+      hit.addEventListener('mouseleave', function() {
+        const tooltip = this.closest('.spark-tooltip');
+        if (tooltip && tooltip.dataset.default) {
+          tooltip.setAttribute('data-tooltip', tooltip.dataset.default);
+        }
+      });
+    });
+  </script>
+</body>
+</html>`;
+}
+/**
+ * Generate CSS for the test harness.
+ */
+export function generateTestHarnessCss() {
+    const colorsLight = getThemeColors('light');
+    const colorsDark = getThemeColors('dark');
+    const linkColor = getLinkColor();
+    return `
+    @import url('https://fonts.googleapis.com/css2?family=Cousine:wght@400;700&family=Inter:wght@400;500;600&family=Source+Serif+4:wght@400;600;700&display=swap');
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    /* CSS Variables for theming */
+    :root {
+      --bg: ${colorsLight.background};
+      --text: ${colorsLight.text};
+      --text-muted: ${colorsLight.textSecondary};
+      --grid: ${colorsLight.border};
+      --red: ${COLORS.ERROR_RED};
+      --link: ${linkColor};
+    }
+    body.theme-dark {
+      --bg: ${colorsDark.background};
+      --text: ${colorsDark.text};
+      --text-muted: ${colorsDark.textSecondary};
+      --grid: ${colorsDark.border};
+      --red: ${COLORS.ERROR_RED};
+      --link: ${linkColor};
+    }
+
+    body {
+      font-family: 'Inter', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      transition: background-color 0.3s, color 0.3s;
+    }
+
+    /* Header styles */
+    header {
+      background: ${COLORS.TEXT_DARK};
+      color: ${COLORS.BG_LIGHT};
+      padding: 20px 32px;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      gap: 16px;
+    }
+    .header-left {
+      flex: 1;
+    }
+    header h1 {
+      font-family: 'Cousine', monospace;
+      font-size: 20px;
+      letter-spacing: 0.05em;
+      margin-bottom: 12px;
+    }
+    .nav {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-bottom: 12px;
+    }
+    .nav-item {
+      color: ${COLORS.BG_LIGHT};
+      text-decoration: none;
+      padding: 4px 10px;
+      font-size: 12px;
+      border: 1px solid ${COLORS.BG_LIGHT}60;
+      border-radius: 3px;
+    }
+    .nav-item:hover {
+      background: ${COLORS.BG_LIGHT}20;
+    }
+    .nav-toggle {
+      display: none;
+      background: transparent;
+      border: 1px solid ${COLORS.BG_LIGHT}60;
+      color: ${COLORS.BG_LIGHT};
+      padding: 6px 10px;
+      border-radius: 3px;
+      cursor: pointer;
+      margin-bottom: 12px;
+    }
+    .nav-toggle:hover {
+      background: ${COLORS.BG_LIGHT}20;
+    }
+    @media (max-width: 600px) {
+      .nav-toggle {
+        display: block;
+      }
+      .nav {
+        display: none;
+        flex-direction: column;
+        width: 100%;
+      }
+      .nav.nav-open {
+        display: flex;
+      }
+      .nav-item {
+        padding: 8px 12px;
+      }
+      header {
+        padding: 16px;
+      }
+      .header-actions {
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+    .header-actions {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+    .btn {
+      padding: 6px 14px;
+      border: none;
+      border-radius: 3px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+    }
+    .btn-primary {
+      background: ${PALETTE[0]};
+      color: white;
+    }
+    .btn-secondary {
+      background: transparent;
+      color: ${COLORS.BG_LIGHT};
+      border: 1px solid ${COLORS.BG_LIGHT}60;
+    }
+    .btn-secondary:hover {
+      background: ${COLORS.BG_LIGHT}20;
+    }
+
+    /* Main content */
+    main {
+      max-width: 1600px;
+      margin: 0 auto;
+      padding: 32px;
+    }
+
+    /* Summary section */
+    .summary {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+      margin-bottom: 32px;
+    }
+    .summary-item {
+      background: var(--bg);
+      padding: 16px;
+      border: 1px solid var(--grid);
+      text-align: center;
+      transition: background-color 0.3s;
+    }
+    .summary-item .count {
+      font-family: 'Cousine', monospace;
+      font-size: 28px;
+      font-weight: bold;
+      color: ${PALETTE[0]};
+    }
+    .summary-item .label {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 4px;
+    }
+
+    /* Test section styles */
+    .test-section {
+      margin-bottom: 40px;
+    }
+    .section-title {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-size: 14px;
+      font-weight: 900;
+      letter-spacing: 0.05em;
+      color: var(--text);
+      margin-top: 32px;
+      margin-bottom: 16px;
+      padding-top: 24px;
+      border-top: 1px solid var(--grid);
+    }
+    .dashboard-section:first-of-type .section-title {
+      margin-top: 0;
+      padding-top: 0;
+      border-top: none;
+    }
+
+    /* Dashboard content styles */
+    .dashboard {
+      max-width: 720px;
+      margin: 0 auto;
+      padding: 16px;
+    }
+    .red-line {
+      width: 100%;
+      height: 2px;
+      background-color: var(--red);
+      margin-bottom: 8px;
+    }
+    .page-title {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-size: 18px;
+      font-weight: 900;
+      margin-bottom: 12px;
+      color: var(--text);
+    }
+    .dashboard-section {
+      margin-bottom: 16px;
+    }
+    .dashboard-section:not(:first-of-type) {
+      margin-top: 32px;
+      padding-top: 20px;
+      border-top: 1px solid var(--grid);
+    }
+    .chart-title {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
+      font-size: 10px;
+      font-weight: bold;
+      color: var(--text);
+      margin-bottom: 4px;
+    }
+
+    /* Grid layout */
+    .row {
+      display: grid;
+      grid-template-columns: repeat(16, 1fr);
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    @media (max-width: 720px) {
+      .row { grid-template-columns: repeat(8, 1fr); }
+      .row > * { grid-column: span min(var(--col-span, 8), 8); }
+    }
+    @media (max-width: 480px) {
+      .row { grid-template-columns: 1fr; }
+      .row > * { grid-column: span 1; }
+    }
+
+    /* Grid items */
+    .grid-item {
+      background: var(--bg);
+      padding: 4px;
+      transition: background-color 0.3s;
+    }
+
+    /* Component styles */
+    .big-value {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
+      font-size: 28px;
+      font-weight: bold;
+      color: var(--text);
+      line-height: 1;
+    }
+    .delta {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .delta .arrow {
+      font-size: 16px;
+    }
+    .delta .value {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .label {
+      font-size: 10px;
+      color: var(--text-muted);
+      margin-top: 4px;
+    }
+    .alert {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 8px 10px;
+      border-left: 2px solid;
+    }
+    .alert .icon {
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+    .alert .message {
+      font-size: 11px;
+      line-height: 1.4;
+    }
+    .note {
+      border-left: 3px solid var(--red);
+      background-color: color-mix(in srgb, var(--grid) 25%, transparent);
+      padding: 8px 12px;
+    }
+    .note-warning {
+      border-left-color: #C5A000;
+    }
+    .note-tip {
+      border-left-color: #00887d;
+    }
+    .note-content {
+      font-size: 11px;
+      color: var(--text);
+      line-height: 1.5;
+    }
+    .note-content strong {
+      font-weight: 700;
+    }
+    .text-content {
+      font-size: 11px;
+      line-height: 1.5;
+      color: var(--text);
+    }
+
+    /* Table styles */
+    .data-table {
+      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;
+      color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em;
+      padding: 6px 8px; border-bottom: 1px solid var(--text); text-align: left;
+    }
+    .data-table td {
+      padding: 5px 8px; color: var(--text); border-bottom: 1px solid var(--grid);
+    }
+    .data-table tr.table-striped td {
+      background-color: color-mix(in srgb, var(--grid) 19%, transparent);
+    }
+    .data-table.table-compact th, .data-table.table-compact td {
+      padding: 3px 6px;
+      font-size: 10px;
+    }
+
+    /* Markdown content */
+    .markdown-content {
+      font-size: 11px; color: var(--text); line-height: 1.5;
+    }
+    .empty-space { background: transparent; }
+
+    /* Inline header styles */
+    .inline-header {
+      margin-top: 12px;
+      margin-bottom: 4px;
+    }
+    .inline-header-text {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--text);
+      margin: 0;
+    }
+
+    /* Progress bar sparkline styles */
+    .pct-bar-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+    }
+    .pct-bar-container {
+      flex: 1;
+      height: 12px;
+      background-color: var(--grid);
+      border-radius: 2px;
+      overflow: hidden;
+      min-width: 60px;
+    }
+    .pct-bar-fill {
+      height: 100%;
+      background-color: ${PALETTE[0]};
+      border-radius: 2px 0 0 2px;
+    }
+    .pct-bar-value {
+      font-size: 11px;
+      color: var(--text);
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-weight: 700;
+      min-width: 32px;
+      flex-shrink: 0;
+    }
+
+    /* Sparkline tooltip styles */
+    .spark-tooltip {
+      position: relative;
+      display: inline-block;
+    }
+    .spark-tooltip::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.85);
+      color: #fff;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      white-space: nowrap;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.15s ease;
+      pointer-events: none;
+      z-index: 1000;
+      margin-bottom: 4px;
+    }
+    .spark-tooltip:hover::after {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    /* Annotation bar */
+    .annotation-bar {
+      background: var(--bg);
+      border-top: 1px solid var(--grid);
+      padding: 10px;
+      margin-top: 8px;
+    }
+    .annotation-bar textarea {
+      width: 100%;
+      min-height: 40px;
+      padding: 6px;
+      border: 1px solid var(--grid);
+      font-family: inherit;
+      font-size: 11px;
+      resize: vertical;
+    }
+
+    /* Responsive */
+    @media (max-width: 1000px) {
+      .summary {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    /* Print styles */
+    @media print {
+      .row { break-inside: avoid; page-break-inside: avoid; }
+      .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; }
+      .data-table { break-inside: avoid; page-break-inside: avoid; }
+      header { display: none; }
+      .annotation-bar { display: none; }
+    }`;
+}
+/**
+ * Generate JavaScript for test harness functionality.
+ */
+export function generateTestHarnessJs(totalCharts, testSpecsJson) {
+    return `
+    const CHART_SPECS = ${testSpecsJson};
+
+    // Nav toggle function for mobile
+    function toggleNav() {
+      var nav = document.getElementById('main-nav');
+      if (nav) {
+        nav.classList.toggle('nav-open');
+      }
+    }
+
+    // Theme toggle function
+    function toggleTheme() {
+      var isDark = document.body.classList.contains('theme-dark');
+      var newTheme = isDark ? 'light' : 'dark';
+      document.body.classList.remove('theme-light', 'theme-dark');
+      document.body.classList.add('theme-' + newTheme);
+
+      // Update theme indicator
+      document.getElementById('theme-indicator').textContent = newTheme.toUpperCase();
+
+      // Update all charts
+      if (window.chartInstances && window.chartOptions) {
+        for (var id in window.chartInstances) {
+          window.chartInstances[id].setOption(window.chartOptions[id][newTheme]);
+        }
+      }
+    }
+
+    // Initialize theme indicator
+    document.getElementById('theme-indicator').textContent =
+      document.body.classList.contains('theme-dark') ? 'DARK' : 'LIGHT';
+
+    document.querySelectorAll('textarea').forEach(ta => {
+      ta.value = localStorage.getItem(ta.id) || '';
+      ta.addEventListener('input', () => localStorage.setItem(ta.id, ta.value));
+    });
+
+    function exportNotes() {
+      const notes = document.getElementById('test-notes').value.trim();
+      if (!notes) { alert('No notes to export'); return; }
+      const data = {
+        exported: new Date().toISOString(),
+        totalCharts: ${totalCharts},
+        notes: notes,
+        specs: CHART_SPECS
+      };
+      const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = 'test-notes-' + new Date().toISOString().split('T')[0] + '.json';
+      a.click();
+    }
+
+    function clearAllNotes() {
+      if (confirm('Clear all notes?')) {
+        document.querySelectorAll('textarea').forEach(ta => {
+          ta.value = '';
+          localStorage.removeItem(ta.id);
+        });
+      }
+    }`;
+}
+/**
+ * Generate JavaScript for sparkline tooltip interactivity.
+ */
+export function generateSparklineTooltipJs() {
+    return `
+    // Sparkline tooltip interactivity
+    document.querySelectorAll('.spark-hit').forEach(hit => {
+      hit.addEventListener('mouseenter', function() {
+        const tooltip = this.closest('.spark-tooltip');
+        if (tooltip) {
+          tooltip.setAttribute('data-tooltip', this.dataset.idx + ': ' + this.dataset.val);
+        }
+      });
+      hit.addEventListener('mouseleave', function() {
+        const tooltip = this.closest('.spark-tooltip');
+        if (tooltip && tooltip.dataset.default) {
+          tooltip.setAttribute('data-tooltip', tooltip.dataset.default);
+        }
+      });
+    });`;
+}
+/**
+ * Generate complete test harness HTML document.
+ */
+export function generateTestHarnessHtml(pageTitle, navItems, totalCharts, typesCount, componentsHtml, chartScripts, testHarnessJs, theme = 'light') {
+    const initialThemeClass = theme === 'dark' ? 'theme-dark' : 'theme-light';
+    const css = generateTestHarnessCss();
+    const sparklineJs = generateSparklineTooltipJs();
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(pageTitle)} - Test Harness</title>
+  <script src="${ECHARTS_CDN}"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <style>${css}
+  </style>
+</head>
+<body class="${initialThemeClass}">
+  <header>
+    <div class="header-left">
+      <h1>MVIZ TEST HARNESS</h1>
+      <button class="nav-toggle" onclick="toggleNav()" aria-label="Toggle navigation">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+          <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </button>
+      <nav class="nav" id="main-nav">
+        ${navItems}
+      </nav>
+    </div>
+    <div class="header-actions">
+      <button class="btn btn-secondary" onclick="toggleTheme()">Toggle Theme</button>
+      <button class="btn btn-primary" onclick="exportNotes()">Export Notes</button>
+      <button class="btn btn-secondary" onclick="clearAllNotes()">Clear Notes</button>
+    </div>
+  </header>
+  <main>
+    <div class="summary">
+      <div class="summary-item">
+        <div class="count">${totalCharts}</div>
+        <div class="label">TOTAL CHARTS</div>
+      </div>
+      <div class="summary-item">
+        <div class="count">${typesCount}</div>
+        <div class="label">CHART TYPES</div>
+      </div>
+      <div class="summary-item">
+        <div class="count" id="theme-indicator">LIGHT</div>
+        <div class="label">CURRENT THEME</div>
+      </div>
+    </div>
+    <div class="dashboard">
+      <div class="red-line"></div>
+      <h1 class="page-title">${escapeHtml(pageTitle)}</h1>
+      ${componentsHtml}
+    </div>
+    <div class="annotation-bar">
+      <h3 style="font-size: 12px; margin-bottom: 8px;">Test Notes</h3>
+      <textarea id="test-notes" placeholder="Add notes about this test run..."></textarea>
+    </div>
+  </main>
+  <script>
+    ${testHarnessJs}
+
+    // Initialize charts
+    ${chartScripts}
+
+    ${sparklineJs}
+  </script>
+</body>
+</html>`;
+}
+//# sourceMappingURL=templates.js.map