mviz 1.6.4 → 1.6.7

package/dist/cli.js

@@ -177,22 +177,23 @@ async function main() {
         let errors = [];
         // Detect input type
         const trimmed = input.trim();
+        const lintMode = lintOnly ? 'lint' : 'generate';
         if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
             // JSON input - lint then generate
             const spec = JSON.parse(trimmed);
-            lintSpec(spec);
+            lintSpec(spec, lintMode);
             html = await generateChartAsync(spec);
         }
         else if (trimmed.startsWith('---') || trimmed.includes('```')) {
             // Markdown input - parser handles linting internally (async for mermaid)
-            const result = await parseMarkdownToDashboardAsync(input, 'light', baseDir, false, false, customTheme);
+            const result = await parseMarkdownToDashboardAsync(input, 'light', baseDir, false, false, customTheme, lintMode);
             html = result.html;
             errors = result.errors;
         }
         else {
             // Try JSON anyway - lint then generate
             const spec = JSON.parse(trimmed);
-            lintSpec(spec);
+            lintSpec(spec, lintMode);
             html = await generateChartAsync(spec);
         }
         // Check for errors (unless --allow-errors is set)

package/dist/components/big_value.d.ts

@@ -1,9 +1,31 @@
 /**
  * Big value display component
+ *
+ * Provides two rendering paths that share the same business rules:
+ *   - generateBigValue(spec)  – standalone HTML document
+ *   - renderBigValue(spec, ctx) – dashboard grid-item fragment
+ *
+ * Validation (value must be numeric) and format inference live in the shared
+ * resolveBigValueState() helper so the two paths cannot drift.
  */
 import type { ComponentSpec } from '../types.js';
 /**
- * Generate a big value display for key metrics
+ * Optional dashboard rendering context.
+ */
+export interface BigValueRenderContext {
+    colSpan?: number | undefined;
+    anchorId?: string | undefined;
+    /** Currency code from frontmatter; falls back to spec.currency */
+    currencyCode?: string | undefined;
+}
+/**
+ * Render a big_value as a dashboard grid-item fragment.
+ *
+ * Throws ValidationError on non-numeric `value` (matches generateBigValue).
+ */
+export declare function renderBigValue(spec: Record<string, unknown>, ctx?: BigValueRenderContext): string;
+/**
+ * Generate a standalone big_value HTML document.
  */
 declare function generateBigValue(spec: ComponentSpec): string;
 export { generateBigValue };

package/dist/components/big_value.js

@@ -1,54 +1,113 @@
 /**
  * Big value display component
+ *
+ * Provides two rendering paths that share the same business rules:
+ *   - generateBigValue(spec)  – standalone HTML document
+ *   - renderBigValue(spec, ctx) – dashboard grid-item fragment
+ *
+ * Validation (value must be numeric) and format inference live in the shared
+ * resolveBigValueState() helper so the two paths cannot drift.
  */
 import { COLORS, FONT_STACK, getThemeColors } from '../core/themes.js';
 import { formatNumber, inferFormat, resolveCurrency } from '../core/formatting.js';
 import { registerComponent } from './registry.js';
 import { ValidationError } from '../core/exceptions.js';
 /**
- * Generate a big value display for key metrics
+ * Resolve the display state for a big_value spec.
+ *
+ * Throws ValidationError if `value` is not a number — this is intentional and
+ * matches the strict standalone behavior (the linter's `big-value-string` rule
+ * catches string values for spec authors; this throw is defensive for
+ * programmatic callers).
  */
-function generateBigValue(spec) {
+function resolveBigValueState(spec, currencyCode) {
     if (typeof spec.value !== 'number') {
         throw new ValidationError('value', 'big_value', 'number', spec.value);
     }
     const value = spec.value;
     const specLabel = spec.label;
     const specTitle = spec.title;
-    const theme = (spec.theme ?? 'light');
-    const comparison = spec.comparison;
-    // If only title is provided (no label), use title as the label below the number
-    // This matches user expectations that "title" describes what the number represents
+    // If only title is provided (no label), use title as the label below the number.
+    // If both provided, title becomes header and label goes below.
     const label = specLabel ?? specTitle ?? '';
-    // Only show H2 header if BOTH title and label are explicitly provided
-    const showTitleHeader = specTitle && specLabel;
+    const showTitleHeader = Boolean(specTitle && specLabel);
     const title = showTitleHeader ? specTitle : '';
-    // Auto-infer format from label if not specified
     const fmt = spec.format ?? inferFormat(label, value);
-    const currency = resolveCurrency(spec.currency);
-    const colors = getThemeColors(theme);
+    const currency = resolveCurrency(currencyCode ?? spec.currency);
     const displayValue = formatNumber(value, fmt, false, currency);
-    let comparisonHtml = '';
-    if (comparison) {
-        const compVal = comparison.value ?? 0;
-        const compLabel = comparison.label ?? '';
+    const comparisonSpec = spec.comparison;
+    let comparison;
+    if (comparisonSpec) {
+        const compVal = comparisonSpec.value ?? 0;
         const isPositive = compVal >= 0;
-        const arrow = isPositive ? '↑' : '↓';
-        const compColor = isPositive ? COLORS.POSITIVE_GREEN : COLORS.ERROR_RED;
-        const compDisplay = formatNumber(compVal, comparison.format, true, currency);
+        comparison = {
+            arrow: isPositive ? '↑' : '↓',
+            color: isPositive ? COLORS.POSITIVE_GREEN : COLORS.ERROR_RED,
+            display: formatNumber(compVal, comparisonSpec.format, true, currency),
+            label: comparisonSpec.label ?? '',
+        };
+    }
+    return { value, label, title, showTitleHeader, displayValue, comparison };
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/**
+ * Render a big_value as a dashboard grid-item fragment.
+ *
+ * Throws ValidationError on non-numeric `value` (matches generateBigValue).
+ */
+export function renderBigValue(spec, ctx = {}) {
+    const state = resolveBigValueState(spec, ctx.currencyCode);
+    const colSpan = ctx.colSpan ?? 4;
+    const anchorAttr = ctx.anchorId ? ` id="${ctx.anchorId}"` : '';
+    let comparisonHtml = '';
+    if (state.comparison) {
+        const c = state.comparison;
+        comparisonHtml = `
+      <div style="display: flex; align-items: center; gap: 4px; margin-top: 4px;">
+        <span style="color: ${c.color}; font-size: 12px;">${c.arrow} ${c.display}</span>
+        <span style="color: var(--text-muted); font-size: 10px;">${escapeHtml(c.label)}</span>
+      </div>`;
+    }
+    const titleHtml = state.showTitleHeader
+        ? `<h3 class="chart-title">${escapeHtml(state.title.toUpperCase())}</h3>`
+        : '';
+    return `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      ${titleHtml}<div class="big-value">${escapeHtml(state.displayValue)}</div>
+      <div class="label">${escapeHtml(state.label)}</div>${comparisonHtml}
+    </div>`;
+}
+/**
+ * Generate a standalone big_value HTML document.
+ */
+function generateBigValue(spec) {
+    const theme = (spec.theme ?? 'light');
+    const state = resolveBigValueState(spec);
+    const colors = getThemeColors(theme);
+    let comparisonHtml = '';
+    if (state.comparison) {
+        const c = state.comparison;
         comparisonHtml = `
       <div style="display: flex; align-items: center; gap: 4px; margin-top: 8px;">
-        <span style="color: ${compColor}; font-size: 14px;">${arrow} ${compDisplay}</span>
-        <span style="color: ${colors.textSecondary}; font-size: 12px;">${compLabel}</span>
+        <span style="color: ${c.color}; font-size: 14px;">${c.arrow} ${c.display}</span>
+        <span style="color: ${colors.textSecondary}; font-size: 12px;">${c.label}</span>
       </div>`;
     }
-    const titleUpper = title.toUpperCase();
-    const titleHtml = title ? `<h2>${titleUpper}</h2>` : '';
+    const titleHtml = state.showTitleHeader
+        ? `<h2>${state.title.toUpperCase()}</h2>`
+        : '';
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>${title}</title>
+  <title>${state.title}</title>
   <style>
     * { box-sizing: border-box; }
     html, body {
@@ -70,8 +129,8 @@ function generateBigValue(spec) {
 <body>
   <div class="container">
     ${titleHtml}
-    <div class="big-value">${displayValue}</div>
-    <div class="label">${label}</div>
+    <div class="big-value">${state.displayValue}</div>
+    <div class="label">${state.label}</div>
     ${comparisonHtml}
   </div>
 </body>

package/dist/components/delta.d.ts

@@ -1,9 +1,32 @@
 /**
  * Delta/change indicator component
+ *
+ * Provides two rendering paths that share the same business rules:
+ *   - generateDelta(spec)      – standalone HTML document
+ *   - renderDelta(spec, ctx)   – dashboard grid-item fragment
+ *
+ * Direction/color resolution (including the neutral case) lives in the shared
+ * resolveDeltaState() helper so the two paths cannot drift.
  */
 import type { ComponentSpec } from '../types.js';
 /**
- * Generate a delta/change indicator
+ * Optional dashboard rendering context.
+ */
+export interface DeltaRenderContext {
+    colSpan?: number | undefined;
+    anchorId?: string | undefined;
+    /** Currency code from frontmatter; falls back to spec.currency */
+    currencyCode?: string | undefined;
+}
+/**
+ * Render a delta as a dashboard grid-item fragment.
+ *
+ * Uses the dashboard's CSS `--text-muted` token for the neutral color so the
+ * value blends with theme-aware muted text.
+ */
+export declare function renderDelta(spec: Record<string, unknown>, ctx?: DeltaRenderContext): string;
+/**
+ * Generate a standalone delta HTML document.
  */
 declare function generateDelta(spec: ComponentSpec): string;
 export { generateDelta };

package/dist/components/delta.js

@@ -1,36 +1,41 @@
 /**
  * Delta/change indicator component
+ *
+ * Provides two rendering paths that share the same business rules:
+ *   - generateDelta(spec)      – standalone HTML document
+ *   - renderDelta(spec, ctx)   – dashboard grid-item fragment
+ *
+ * Direction/color resolution (including the neutral case) lives in the shared
+ * resolveDeltaState() helper so the two paths cannot drift.
  */
 import { COLORS, FONT_STACK, getThemeColors } from '../core/themes.js';
 import { formatNumber, inferFormat, resolveCurrency } from '../core/formatting.js';
 import { registerComponent } from './registry.js';
 /**
- * Generate a delta/change indicator
+ * Resolve the display state for a delta spec.
+ *
+ * Neutral handling: when `value === neutralIs` (default 0), the indicator
+ * uses a right-arrow and a muted color — never green/red. This matches user
+ * expectations that "no change" is not a positive or negative signal.
  */
-function generateDelta(spec) {
+function resolveDeltaState(spec, neutralColor, currencyCode) {
     const value = typeof spec.value === 'number' ? spec.value : 0;
     const specLabel = spec.label;
     const specTitle = spec.title;
-    const theme = (spec.theme ?? 'light');
     const neutralIs = spec.neutralIs ?? 0;
     const positiveIsGood = spec.positiveIsGood !== false; // Default true
-    // If only title is provided (no label), use title as the label below
-    // If both provided, title becomes H2 header and label goes below
     const label = specLabel ?? specTitle ?? '';
-    const showTitleHeader = specTitle && specLabel;
+    const showTitleHeader = Boolean(specTitle && specLabel);
     const title = showTitleHeader ? specTitle : '';
-    // Auto-infer format from label if not specified
     const fmt = spec.format ?? inferFormat(label, value);
-    const currency = resolveCurrency(spec.currency);
-    const colors = getThemeColors(theme);
-    // Determine direction and color
+    const currency = resolveCurrency(currencyCode ?? spec.currency);
     const isPositive = value > neutralIs;
     const isNegative = value < neutralIs;
     const isNeutral = value === neutralIs;
     let color;
     let arrow;
     if (isNeutral) {
-        color = colors.textSecondary;
+        color = neutralColor;
         arrow = '→';
     }
     else if ((isPositive && positiveIsGood) || (isNegative && !positiveIsGood)) {
@@ -42,13 +47,54 @@ function generateDelta(spec) {
         arrow = isPositive ? '↑' : '↓';
     }
     const displayValue = formatNumber(value, fmt, true, currency);
-    const titleUpper = title.toUpperCase();
-    const titleHtml = title ? `<h2>${titleUpper}</h2>` : '';
+    return { label, title, showTitleHeader, arrow, color, isNeutral, displayValue };
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/**
+ * Render a delta as a dashboard grid-item fragment.
+ *
+ * Uses the dashboard's CSS `--text-muted` token for the neutral color so the
+ * value blends with theme-aware muted text.
+ */
+export function renderDelta(spec, ctx = {}) {
+    // Dashboard uses a CSS variable for the muted color so theme switching works.
+    const state = resolveDeltaState(spec, 'var(--text-muted)', ctx.currencyCode);
+    const colSpan = ctx.colSpan ?? 4;
+    const anchorAttr = ctx.anchorId ? ` id="${ctx.anchorId}"` : '';
+    const titleHtml = state.showTitleHeader
+        ? `<h3 class="chart-title">${escapeHtml(state.title.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: ${state.color};">${state.arrow}</span>
+        <span class="value" style="color: ${state.color};">${escapeHtml(state.displayValue)}</span>
+      </div>
+      <div class="label">${escapeHtml(state.label)}</div>
+    </div>`;
+}
+/**
+ * Generate a standalone delta HTML document.
+ */
+function generateDelta(spec) {
+    const theme = (spec.theme ?? 'light');
+    const colors = getThemeColors(theme);
+    const state = resolveDeltaState(spec, colors.textSecondary);
+    const titleHtml = state.showTitleHeader
+        ? `<h2>${state.title.toUpperCase()}</h2>`
+        : '';
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>${title}</title>
+  <title>${state.title}</title>
   <style>
     * { box-sizing: border-box; }
     html, body {
@@ -70,10 +116,10 @@ function generateDelta(spec) {
   <div class="container">
     ${titleHtml}
     <div class="delta">
-      <span class="arrow" style="color: ${color};">${arrow}</span>
-      <span class="value" style="color: ${color};">${displayValue}</span>
+      <span class="arrow" style="color: ${state.color};">${state.arrow}</span>
+      <span class="value" style="color: ${state.color};">${state.displayValue}</span>
     </div>
-    <div class="label">${label}</div>
+    <div class="label">${state.label}</div>
   </div>
 </body>
 </html>`;

package/dist/components/table-interactivity.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Table interactivity (sorting and filtering).
+ *
+ * Used by both standalone tables (`renderStandaloneTable`) and dashboard-embedded
+ * tables (`renderTable` in the layout parser). Produces the chrome (global filter
+ * input), the per-cell `data-sort` attribute for numeric sorting, and one
+ * vanilla-JS init function that wires up click/input handlers.
+ */
+import type { FormatType } from '../types.js';
+export interface TableInteractivity {
+    sortable: boolean;
+    filter: boolean;
+}
+/**
+ * Read sortable/filter options from a spec. Sort defaults ON, filter defaults OFF.
+ */
+export declare function parseTableInteractivity(spec: Record<string, unknown>): TableInteractivity;
+/**
+ * Generate an HTML attribute string for a sortable `<th>`.
+ * `colIdx` maps to the visual column index (including the row-number column if present).
+ */
+export declare function sortableHeaderAttrs(colIdx: number, sortable: boolean): string;
+/**
+ * Generate `data-sort="..."` for a cell so numeric sort doesn't depend on the
+ * rendered text (which may be formatted, contain SVG sparklines, etc.).
+ *
+ * When the column declares a `format`, the sort key is derived from that
+ * declaration — `date` → epoch ms, `duration` → seconds, numeric formats →
+ * raw number. This is the preferred path because format removes ambiguity
+ * (e.g. is `"5m"` 5 minutes or 5 million dollars?).
+ *
+ * For untyped columns, two unambiguous string shapes still get a numeric
+ * key as a courtesy: ISO-8601 dates (`YYYY-MM-DD`) and duration strings
+ * that include a seconds segment (`10s`, `1m7s`, `1h2m3s`). Anything else —
+ * including bare `5m` or `1h`, which is ambiguous (5 minutes or 5 million?) —
+ * falls back to locale string sort. Columns that explicitly declare
+ * `fmt: "duration"` still get lenient parsing of `5m`/`1h`; the strict form
+ * only applies to the untyped courtesy path. Pre-formatted currency strings
+ * are intentionally not parsed — pass numeric values and declare
+ * `format: "currency_auto"` (etc.) instead.
+ */
+export declare function cellSortAttr(value: unknown, format?: FormatType): string;
+/**
+ * Build the filter toolbar (global search input when `filter: true`).
+ */
+export interface TableChrome {
+    toolbarHtml: string;
+}
+export declare function buildTableChrome(tableId: string, interactivity: TableInteractivity, colors: {
+    text: string;
+    textSecondary: string;
+    border: string;
+    background: string;
+}): TableChrome;
+/**
+ * Per-table init call. Invoked after the HTML is in the DOM.
+ */
+export declare function tableInitCall(tableId: string): string;
+/**
+ * Shared JS that defines `window.mvizTableInit`. Include once per output document.
+ * Responsible for sort clicks and the global filter input.
+ */
+export declare function sharedTableScript(): string;
+/**
+ * Shared CSS for sort indicators. Appended once per standalone document or
+ * injected once into dashboard mode alongside the shared script.
+ */
+export declare function sharedTableCss(): string;
+//# sourceMappingURL=table-interactivity.d.ts.map

package/dist/components/table-interactivity.js

@@ -0,0 +1,216 @@
+/**
+ * Table interactivity (sorting and filtering).
+ *
+ * Used by both standalone tables (`renderStandaloneTable`) and dashboard-embedded
+ * tables (`renderTable` in the layout parser). Produces the chrome (global filter
+ * input), the per-cell `data-sort` attribute for numeric sorting, and one
+ * vanilla-JS init function that wires up click/input handlers.
+ */
+import { formatSortKey, parseDurationString, parseIsoDateString, } from '../core/formatting.js';
+/**
+ * Read sortable/filter options from a spec. Sort defaults ON, filter defaults OFF.
+ */
+export function parseTableInteractivity(spec) {
+    return {
+        sortable: spec.sortable !== false,
+        filter: spec.filter === true,
+    };
+}
+/**
+ * Generate an HTML attribute string for a sortable `<th>`.
+ * `colIdx` maps to the visual column index (including the row-number column if present).
+ */
+export function sortableHeaderAttrs(colIdx, sortable) {
+    if (!sortable)
+        return '';
+    return ` class="sortable" data-col="${colIdx}"`;
+}
+/**
+ * Generate `data-sort="..."` for a cell so numeric sort doesn't depend on the
+ * rendered text (which may be formatted, contain SVG sparklines, etc.).
+ *
+ * When the column declares a `format`, the sort key is derived from that
+ * declaration — `date` → epoch ms, `duration` → seconds, numeric formats →
+ * raw number. This is the preferred path because format removes ambiguity
+ * (e.g. is `"5m"` 5 minutes or 5 million dollars?).
+ *
+ * For untyped columns, two unambiguous string shapes still get a numeric
+ * key as a courtesy: ISO-8601 dates (`YYYY-MM-DD`) and duration strings
+ * that include a seconds segment (`10s`, `1m7s`, `1h2m3s`). Anything else —
+ * including bare `5m` or `1h`, which is ambiguous (5 minutes or 5 million?) —
+ * falls back to locale string sort. Columns that explicitly declare
+ * `fmt: "duration"` still get lenient parsing of `5m`/`1h`; the strict form
+ * only applies to the untyped courtesy path. Pre-formatted currency strings
+ * are intentionally not parsed — pass numeric values and declare
+ * `format: "currency_auto"` (etc.) instead.
+ */
+export function cellSortAttr(value, format) {
+    if (value === null || value === undefined)
+        return '';
+    // Format-driven sort (preferred when declared).
+    if (format) {
+        const key = formatSortKey(value, format);
+        if (key !== null)
+            return ` data-sort="${key}"`;
+        // Format declared but value can't be coerced — fall through to the
+        // untyped heuristics so sort still does *something* sensible.
+    }
+    if (typeof value === 'number' && !isNaN(value)) {
+        return ` data-sort="${value}"`;
+    }
+    if (typeof value === 'string') {
+        const n = parseFloat(value);
+        if (!isNaN(n) && String(n) === value.trim()) {
+            return ` data-sort="${n}"`;
+        }
+        const dateKey = parseIsoDateString(value);
+        if (dateKey !== null)
+            return ` data-sort="${dateKey}"`;
+        // Strict: require a seconds segment so bare "5m" / "1h" don't get parsed
+        // as durations. Those shapes are ambiguous in an untyped column; declare
+        // `fmt: "duration"` to opt into lenient parsing.
+        const durKey = parseDurationString(value, { requireSeconds: true });
+        if (durKey !== null)
+            return ` data-sort="${durKey}"`;
+        return ` data-sort="${escapeAttr(value)}"`;
+    }
+    // Objects/arrays (e.g., sparkline data) are not sortable; omit the attribute.
+    return '';
+}
+function escapeAttr(s) {
+    return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+export function buildTableChrome(tableId, interactivity, colors) {
+    if (!interactivity.filter) {
+        return { toolbarHtml: '' };
+    }
+    return {
+        toolbarHtml: `<div class="mviz-table-toolbar" style="margin-bottom: 6px;">` +
+            `<input type="search" class="mviz-filter-global" data-table="${tableId}" placeholder="Filter by any value…" ` +
+            `style="font-family: inherit; font-size: 11px; padding: 4px 8px; width: 240px; max-width: 100%; ` +
+            `border: 1px solid ${colors.border}; border-radius: 3px; background: ${colors.background}; color: ${colors.text};" />` +
+            `</div>`,
+    };
+}
+/**
+ * Per-table init call. Invoked after the HTML is in the DOM.
+ */
+export function tableInitCall(tableId) {
+    return `if (window.mvizTableInit) window.mvizTableInit(${JSON.stringify(tableId)});`;
+}
+/**
+ * Shared JS that defines `window.mvizTableInit`. Include once per output document.
+ * Responsible for sort clicks and the global filter input.
+ */
+export function sharedTableScript() {
+    return `(function() {
+  if (window.mvizTableInit) return;
+  function compareCells(a, b) {
+    var an = parseFloat(a), bn = parseFloat(b);
+    if (!isNaN(an) && !isNaN(bn)) return an - bn;
+    return String(a).localeCompare(String(b));
+  }
+  function getSortKey(cell) {
+    var v = cell.getAttribute('data-sort');
+    return v != null ? v : cell.textContent.trim();
+  }
+  window.mvizTableInit = function(tableId) {
+    var table = document.getElementById(tableId);
+    if (!table) return;
+    var thead = table.tHead;
+    var tbody = table.tBodies[0];
+    if (!thead || !tbody) return;
+    var origRows = Array.prototype.slice.call(tbody.rows);
+    var visibility = {};
+    origRows.forEach(function(r, i) { visibility[i] = true; });
+
+    function applyVisibility() {
+      origRows.forEach(function(r, i) { r.style.display = visibility[i] ? '' : 'none'; });
+    }
+
+    // ---- Sort ----
+    // Shared active sort state (held at the table level, not per-header) so that
+    // clicking header A, then B, then A again always starts A at ascending. A
+    // per-header closure variable would resume A from its previous state even
+    // though the indicator was cleared, producing a confusing cycle.
+    var sortableHeaders = thead.querySelectorAll('th.sortable');
+    var activeTh = null;
+    var activeState = 0; // 0 none, 1 asc, -1 desc
+    sortableHeaders.forEach(function(th) {
+      th.style.cursor = 'pointer';
+      th.style.userSelect = 'none';
+      th.addEventListener('click', function() {
+        var colIdx = parseInt(th.getAttribute('data-col'), 10);
+        if (isNaN(colIdx)) return;
+        if (activeTh === th) {
+          // Same column clicked again — cycle asc → desc → none.
+          activeState = activeState === 1 ? -1 : activeState === -1 ? 0 : 1;
+        } else {
+          // New column — reset the old one, start new one at ascending.
+          if (activeTh) {
+            activeTh.removeAttribute('data-sort-dir');
+            var prevInd = activeTh.querySelector('.mviz-sort-ind');
+            if (prevInd) prevInd.textContent = '';
+          }
+          activeTh = th;
+          activeState = 1;
+        }
+        var ind = th.querySelector('.mviz-sort-ind');
+        if (activeState === 0) {
+          th.removeAttribute('data-sort-dir');
+          if (ind) ind.textContent = '';
+          activeTh = null;
+          origRows.forEach(function(r) { tbody.appendChild(r); });
+          applyVisibility();
+          return;
+        }
+        th.setAttribute('data-sort-dir', activeState === 1 ? 'asc' : 'desc');
+        if (ind) ind.textContent = activeState === 1 ? '▲' : '▼';
+        var sorted = origRows.slice().sort(function(a, b) {
+          var av = getSortKey(a.cells[colIdx]);
+          var bv = getSortKey(b.cells[colIdx]);
+          var cmp = compareCells(av, bv);
+          return activeState === 1 ? cmp : -cmp;
+        });
+        sorted.forEach(function(r) { tbody.appendChild(r); });
+        applyVisibility();
+      });
+    });
+
+    // ---- Global filter ----
+    var container = table.parentElement;
+    var globalInput = container && container.querySelector('.mviz-filter-global[data-table="' + tableId + '"]');
+    if (globalInput) {
+      globalInput.addEventListener('input', function() {
+        var q = globalInput.value.toLowerCase();
+        origRows.forEach(function(r, i) {
+          visibility[i] = !q || r.textContent.toLowerCase().indexOf(q) !== -1;
+        });
+        applyVisibility();
+      });
+    }
+  };
+})();`;
+}
+/**
+ * Shared CSS for sort indicators. Appended once per standalone document or
+ * injected once into dashboard mode alongside the shared script.
+ */
+export function sharedTableCss() {
+    return `th.sortable { cursor: pointer; }
+th.sortable[data-sort-dir] { color: inherit; }
+/*
+ * Reserve the arrow's width always so adding ▲/▼ on sort doesn't widen the
+ * column and push the rest of the header row around.
+ */
+.mviz-sort-ind {
+  display: inline-block;
+  min-width: 0.9em;
+  margin-left: 2px;
+  font-size: 9px;
+  opacity: 0.7;
+  text-align: left;
+  white-space: nowrap;
+}`;
+}
+//# sourceMappingURL=table-interactivity.js.map