npm - mviz - Versions diffs - 1.6.4 → 1.6.7 - Mend

mviz 1.6.4 → 1.6.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/README.md +8 -8
package/dist/charts/area.js +8 -36
package/dist/charts/bar.js +8 -26
package/dist/charts/bubble.js +9 -7
package/dist/charts/combo.js +17 -39
package/dist/charts/dumbbell.js +15 -14
package/dist/charts/funnel.js +12 -7
package/dist/charts/heatmap.js +8 -6
package/dist/charts/line.js +6 -27
package/dist/charts/scatter.js +7 -5
package/dist/cli.js +4 -3
package/dist/components/big_value.d.ts +23 -1
package/dist/components/big_value.js +84 -25
package/dist/components/delta.d.ts +24 -1
package/dist/components/delta.js +63 -17
package/dist/components/table-interactivity.d.ts +69 -0
package/dist/components/table-interactivity.js +216 -0
package/dist/components/table.d.ts +6 -1
package/dist/components/table.js +53 -12
package/dist/core/chart-helpers.d.ts +59 -5
package/dist/core/chart-helpers.js +84 -5
package/dist/core/formatting.d.ts +61 -4
package/dist/core/formatting.js +216 -17
package/dist/core/lint-rules/registry.d.ts +4 -2
package/dist/core/lint-rules/registry.js +6 -1
package/dist/core/lint-rules/rules/index.d.ts +1 -0
package/dist/core/lint-rules/rules/index.js +1 -0
package/dist/core/lint-rules/rules/pct-scalar-gt-one.d.ts +13 -0
package/dist/core/lint-rules/rules/pct-scalar-gt-one.js +46 -0
package/dist/core/lint-rules/types.d.ts +12 -0
package/dist/core/linter.d.ts +10 -2
package/dist/core/linter.js +60 -12
package/dist/layout/block-loader.d.ts +31 -0
package/dist/layout/block-loader.js +143 -0
package/dist/layout/layout-resolver.d.ts +33 -0
package/dist/layout/layout-resolver.js +73 -0
package/dist/layout/markdown-parser.d.ts +34 -0
package/dist/layout/markdown-parser.js +395 -0
package/dist/layout/parser-types.d.ts +116 -0
package/dist/layout/parser-types.js +11 -0
package/dist/layout/parser.d.ts +31 -22
package/dist/layout/parser.js +118 -1006
package/dist/layout/renderer.d.ts +33 -0
package/dist/layout/renderer.js +450 -0
package/dist/types.d.ts +1 -1
package/package.json +6 -6
package/schema/mviz.v1.schema.json +402 -33

package/dist/layout/renderer.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+/**
+ * Phase 4: Render.
+ *
+ * Turns a resolved `Section[]` IR into the inner HTML of a dashboard
+ * (componentsHtml + chartScripts + mermaidBlocks + testItems). The final
+ * page assembly (HTML <head>, frame, etc.) lives in `templates.ts` and is
+ * driven by the orchestrator in `parser.ts`.
+ *
+ * Component rendering (big_value, delta, alert, note, text, textarea,
+ * empty_space, table, sparkline, mermaid, inline_header) and ECharts chart
+ * rendering all live here.
+ */
+import type { CustomTheme } from '../types.js';
+import type { MermaidBlock, Section, TestItem } from './parser-types.js';
+export interface RenderOptions {
+    theme: string;
+    testMode: boolean;
+    customTheme?: CustomTheme;
+    currency?: string;
+}
+export interface RenderResult {
+    componentsHtml: string;
+    chartScripts: string;
+    mermaidBlocks: MermaidBlock[];
+    testItems: TestItem[];
+}
+/**
+ * Render a list of sections into the dashboard body HTML and the supporting
+ * chart scripts (concatenated into single strings ready to embed).
+ */
+export declare function renderSections(sections: Section[], options: RenderOptions): RenderResult;
+export declare function escapeHtml(text: string): string;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/layout/renderer.js ADDED Viewed

@@ -0,0 +1,450 @@
+/**
+ * Phase 4: Render.
+ *
+ * Turns a resolved `Section[]` IR into the inner HTML of a dashboard
+ * (componentsHtml + chartScripts + mermaidBlocks + testItems). The final
+ * page assembly (HTML <head>, frame, etc.) lives in `templates.ts` and is
+ * driven by the orchestrator in `parser.ts`.
+ *
+ * Component rendering (big_value, delta, alert, note, text, textarea,
+ * empty_space, table, sparkline, mermaid, inline_header) and ECharts chart
+ * rendering all live here.
+ */
+import { getOptionsBuilder } from '../charts/index.js';
+import { serializeOption } from '../core/serializer.js';
+import { resolveCurrency } from '../core/formatting.js';
+import { ALERT_ICONS, COLORS, DEFAULT_SIZES, GRID_TOTAL_COLUMNS, getFontsWithCustom, getHeatmapColors, getThemeColorsWithCustom, } from '../core/themes.js';
+import { computeDumbbellRanges, computeHeatmapRanges, computePctMultiplyRanges, extractCellValue, formatCell, } from '../components/table.js';
+import { buildTableChrome, cellSortAttr, parseTableInteractivity, sharedTableCss, sharedTableScript, sortableHeaderAttrs, tableInitCall, } from '../components/table-interactivity.js';
+import { renderBigValue as renderBigValueFragment } from '../components/big_value.js';
+import { renderDelta as renderDeltaFragment } from '../components/delta.js';
+/** Height per row unit in pixels (compact for print). Mirrors Python ROW_HEIGHT_PX. */
+const ROW_HEIGHT_PX = 32;
+/**
+ * Render a list of sections into the dashboard body HTML and the supporting
+ * chart scripts (concatenated into single strings ready to embed).
+ */
+export function renderSections(sections, options) {
+    const ctx = createRenderContext(options);
+    for (const section of sections) {
+        renderSection(section, ctx);
+    }
+    return {
+        componentsHtml: ctx.componentsHtml.join(''),
+        chartScripts: ctx.chartScripts.join(''),
+        mermaidBlocks: ctx.mermaidBlocks,
+        testItems: ctx.testItems,
+    };
+}
+function createRenderContext(options) {
+    return {
+        options,
+        componentsHtml: [],
+        chartScripts: [],
+        mermaidBlocks: [],
+        testItems: [],
+        emittedTableShared: false,
+        chartCounter: 0,
+        seenTypes: new Set(),
+    };
+}
+function renderSection(section, ctx) {
+    const sectionHtml = [];
+    if (section.title) {
+        sectionHtml.push(`<h2 class="section-title">${escapeHtml(section.title.toUpperCase())}</h2>`);
+    }
+    for (const row of section.rows) {
+        const rowHtml = renderRow(row, section, ctx);
+        if (rowHtml)
+            sectionHtml.push(rowHtml);
+    }
+    if (sectionHtml.length === 0)
+        return;
+    const classes = ['dashboard-section'];
+    if (section.pageBreak)
+        classes.push('page-break');
+    if (section.hasDivider)
+        classes.push('has-divider');
+    ctx.componentsHtml.push(`
+        <section class="${classes.join(' ')}">
+          ${sectionHtml.join('')}
+        </section>`);
+}
+function renderRow(row, section, ctx) {
+    const rowItems = [];
+    for (const item of row) {
+        const html = renderItem(item, section, ctx);
+        if (html)
+            rowItems.push(html);
+    }
+    if (rowItems.length === 0)
+        return null;
+    return `
+          <div class="row">
+            ${rowItems.join('')}
+          </div>`;
+}
+function renderItem(item, section, ctx) {
+    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];
+    ctx.chartCounter++;
+    const chartId = `chart_${ctx.chartCounter}`;
+    const itemHeight = rowSpan * ROW_HEIGHT_PX;
+    const anchorId = ctx.options.testMode && !ctx.seenTypes.has(compType) ? compType : '';
+    if (anchorId)
+        ctx.seenTypes.add(compType);
+    if (ctx.options.testMode)
+        trackTestItem(ctx, chartId, compType, spec, section);
+    const sparkType = spec.sparkType;
+    if (compType === 'sparkline' && (sparkType === 'pct' || sparkType === 'pct_bar')) {
+        return renderPctBarSparkline(spec, colSpan, anchorId);
+    }
+    return renderByType(compType, spec, { chartId, colSpan, itemHeight, anchorId }, ctx);
+}
+function renderByType(compType, spec, args, ctx) {
+    const builder = getOptionsBuilder(compType);
+    if (builder)
+        return renderEchartsAndCollect(compType, spec, args, ctx);
+    return renderSimpleComponent(compType, spec, args, ctx);
+}
+function renderEchartsAndCollect(compType, spec, args, ctx) {
+    const { html, script } = renderEchartsComponent(compType, spec, args.chartId, args.colSpan, args.itemHeight, args.anchorId, ctx.options.customTheme);
+    if (!html)
+        return `<div class="grid-item"><p>Error rendering ${compType}</p></div>`;
+    if (script)
+        ctx.chartScripts.push(script);
+    return html;
+}
+/** Dispatch table for non-ECharts component types. */
+function renderSimpleComponent(compType, spec, args, ctx) {
+    const { colSpan, anchorId } = args;
+    const currency = ctx.options.currency;
+    switch (compType) {
+        case 'big_value': return renderBigValue(spec, colSpan, anchorId, currency);
+        case 'delta': return renderDelta(spec, colSpan, anchorId, currency);
+        case 'alert': return renderAlert(spec, colSpan, anchorId);
+        case 'note': return renderNote(spec, colSpan, anchorId);
+        case 'text': return renderText(spec, colSpan, anchorId);
+        case 'textarea': return renderTextarea(spec, colSpan, anchorId);
+        case 'table': return renderTableAndCollect(spec, colSpan, anchorId, ctx);
+        case 'empty_space': return renderEmptySpace(spec, colSpan, anchorId);
+        case 'mermaid': return renderMermaidAndCollect(spec, colSpan, anchorId, ctx);
+        case 'inline_header': return renderInlineHeader(spec, anchorId);
+        default: return `<div class="grid-item"><p>Unknown type: ${compType}</p></div>`;
+    }
+}
+function renderTableAndCollect(spec, colSpan, anchorId, ctx) {
+    const out = renderTable(spec, colSpan, anchorId, ctx.options.theme, ctx.options.customTheme, ctx.options.currency);
+    if (!out.script)
+        return out.html;
+    if (!ctx.emittedTableShared) {
+        ctx.emittedTableShared = true;
+        ctx.chartScripts.push(`(function(){var s=document.createElement('style');s.textContent=${JSON.stringify(sharedTableCss())};document.head.appendChild(s);})();`);
+        ctx.chartScripts.push(sharedTableScript());
+    }
+    ctx.chartScripts.push(out.script);
+    return out.html;
+}
+function renderMermaidAndCollect(spec, colSpan, anchorId, ctx) {
+    const placeholderId = `mermaid-${ctx.mermaidBlocks.length}`;
+    ctx.mermaidBlocks.push({ id: placeholderId, spec, theme: ctx.options.theme });
+    return renderMermaidPlaceholder(spec, colSpan, anchorId, placeholderId);
+}
+function trackTestItem(ctx, chartId, compType, spec, section) {
+    const testName = spec.title || spec.label ||
+        `${compType.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())} ${ctx.chartCounter}`;
+    ctx.testItems.push({
+        id: chartId,
+        name: testName,
+        type: compType,
+        spec,
+        section: section.title || compType,
+    });
+}
+// =============================================================================
+// ECharts component rendering
+// =============================================================================
+function renderEchartsComponent(compType, spec, chartId, colSpan, itemHeight, anchorId, customTheme) {
+    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);
+    const fontFamily = getFontsWithCustom(customTheme).family;
+    const optionJsonLight = buildEchartsOption(spec, 'light', chartHeight, customTheme, fontFamily, builder);
+    if (!optionJsonLight)
+        return { html: null, script: null };
+    const optionJsonDark = buildEchartsOption(spec, 'dark', chartHeight, customTheme, fontFamily, builder);
+    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>`;
+    return { html, script: generateChartScript(chartId, optionJsonLight, optionJsonDark) };
+}
+function buildEchartsOption(spec, theme, chartHeight, customTheme, fontFamily, builder) {
+    const themedSpec = { ...spec, theme, height: chartHeight, customTheme };
+    const option = builder(themedSpec);
+    if (!option)
+        return null;
+    option.textStyle = { ...(option.textStyle ?? {}), fontFamily };
+    return serializeOption(option);
+}
+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(); });
+    })();`;
+}
+// =============================================================================
+// Simple component renderers
+// =============================================================================
+function renderBigValue(spec, colSpan, anchorId, currencyCode) {
+    // Delegates to the unified component renderer (#256).
+    return renderBigValueFragment(spec, { colSpan, anchorId, currencyCode });
+}
+function renderDelta(spec, colSpan, anchorId, currencyCode) {
+    // Delegates to the unified component renderer (#256).
+    return renderDeltaFragment(spec, { colSpan, anchorId, currencyCode });
+}
+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 ?? spec.content ?? '';
+    const alertType = spec.alertType ?? 'info';
+    const alertColor = ALERT_COLORS[alertType] ?? COLORS.INFO_BLUE;
+    const icon = ALERT_ICONS[alertType] ?? 'ℹ';
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    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 renderNote(spec, colSpan, anchorId) {
+    const content = spec.content ?? '';
+    const label = spec.label ?? '';
+    const noteType = spec.noteType ?? spec.variant ?? 'default';
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    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 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>` : '';
+    const escapedContent = content.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$');
+    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 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 renderMermaidPlaceholder(spec, colSpan, anchorId, placeholderId) {
+    const title = spec.title;
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    const titleHtml = title
+        ? `<h3 class="chart-title">${escapeHtml(title.toUpperCase())}</h3>`
+        : '';
+    return `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      ${titleHtml}
+      <div class="mermaid-container" style="text-align: center; padding: 16px 0;">
+        <!-- MERMAID_PLACEHOLDER:${placeholderId} -->
+      </div>
+    </div>`;
+}
+function renderPctBarSparkline(spec, colSpan, anchorId) {
+    const title = spec.title ?? '';
+    const pctValue = typeof spec.value === 'number' ? spec.value : 0;
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    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>`;
+}
+// =============================================================================
+// Table rendering
+// =============================================================================
+let dashboardTableCounter = 0;
+function renderTable(spec, colSpan, anchorId, baseTheme, customTheme, currencyCode) {
+    const data = spec.data ?? [];
+    const title = spec.title ?? '';
+    const striped = spec.striped === true;
+    const compact = spec.compact === true;
+    const anchorAttr = anchorId ? ` id="${anchorId}"` : '';
+    const columns = resolveTableColumns(spec, data);
+    const styling = computeTableStyling(striped, compact);
+    const ranges = computeTableRanges(columns, data, baseTheme, customTheme);
+    const interactivity = parseTableInteractivity(spec);
+    const tableId = spec.id ?? `mviz-dash-table-${++dashboardTableCounter}`;
+    const chrome = buildTableChrome(tableId, interactivity, ranges.themeColors);
+    const tableCurrency = resolveCurrency(currencyCode ?? spec.currency);
+    const headerCells = buildTableHeader(columns, styling, interactivity);
+    const bodyRows = buildTableBody(columns, data, styling, ranges, customTheme, tableCurrency, interactivity);
+    const titleHtml = title ? `<h3 class="chart-title">${escapeHtml(title)}</h3>` : '';
+    const hasInteractivity = interactivity.sortable || interactivity.filter !== false;
+    const script = hasInteractivity ? tableInitCall(tableId) : null;
+    const html = `
+    <div class="grid-item"${anchorAttr} style="--col-span: ${colSpan}; grid-column: span ${colSpan};">
+      ${titleHtml}
+      ${chrome.toolbarHtml}
+      <table id="${tableId}" class="data-table${styling.compactClass}${styling.stripedClass}" style="width: 100%; border-collapse: collapse; font-size: ${styling.fontSize};">
+        <thead>
+          <tr>${headerCells}</tr>
+        </thead>
+        <tbody>
+          ${bodyRows}
+        </tbody>
+      </table>
+    </div>`;
+    return { html, script };
+}
+function resolveTableColumns(spec, data) {
+    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 }));
+        }
+    }
+    return columns ?? [];
+}
+function computeTableStyling(striped, compact) {
+    return {
+        cellPadding: compact ? '3px 6px' : '5px 8px',
+        headerPadding: compact ? '3px 6px' : '6px 8px',
+        fontSize: compact ? '10px' : '11px',
+        compactClass: compact ? ' table-compact' : '',
+        stripedClass: striped ? ' table-striped' : '',
+    };
+}
+function computeTableRanges(columns, data, baseTheme, customTheme) {
+    return {
+        defaultHeatmapColors: getHeatmapColors(baseTheme),
+        heatmapRanges: computeHeatmapRanges(columns, data),
+        dumbbellRanges: computeDumbbellRanges(columns, data),
+        pctMultiplyByColumn: computePctMultiplyRanges(columns, data),
+        themeColors: getThemeColorsWithCustom(baseTheme, customTheme),
+    };
+}
+function buildTableHeader(columns, styling, interactivity) {
+    return columns.map((col, i) => {
+        const align = col.align ?? 'left';
+        const sortAttrs = sortableHeaderAttrs(i, interactivity.sortable);
+        const sortInd = interactivity.sortable ? '<span class="mviz-sort-ind"></span>' : '';
+        return `<th${sortAttrs} style="text-align: ${align}; padding: ${styling.headerPadding}; font-size: ${styling.fontSize};">${escapeHtml(col.title ?? col.id)}${sortInd}</th>`;
+    }).join('');
+}
+function buildTableBody(columns, data, styling, ranges, customTheme, tableCurrency, interactivity) {
+    const customPalette = customTheme?.palette;
+    return data.map((row) => {
+        const cells = columns.map((col) => {
+            const cellValue = row[col.id];
+            const align = col.align ?? 'left';
+            const result = formatCell(cellValue, col, ranges.themeColors, ranges.heatmapRanges, ranges.dumbbellRanges, ranges.defaultHeatmapColors, customPalette, tableCurrency, ranges.pctMultiplyByColumn);
+            const bgStyle = result.bgColor ? `background-color: ${result.bgColor};` : '';
+            const textStyle = result.textColor ? `color: ${result.textColor};` : '';
+            const sortRaw = extractCellValue(cellValue, col).value;
+            const sortAttr = interactivity.sortable ? cellSortAttr(sortRaw, col.fmt) : '';
+            return `<td${sortAttr} style="text-align: ${align}; padding: ${styling.cellPadding}; font-size: ${styling.fontSize}; ${bgStyle} ${textStyle}">${result.content}</td>`;
+        }).join('');
+        return `<tr>${cells}</tr>`;
+    }).join('');
+}
+// =============================================================================
+// Helpers
+// =============================================================================
+export function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+function parseInlineMarkdown(text) {
+    let result = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    result = result.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+    result = result.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    result = result.replace(/_([^_]+)_/g, '<em>$1</em>');
+    result = result.replace(/`([^`]+)`/g, '<code>$1</code>');
+    return result;
+}
+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;
+    }
+    return hash;
+}
+//# sourceMappingURL=renderer.js.map

package/dist/types.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 /**
  * Supported number format types
  */
-export type FormatType = 'auto' | 'currency' | 'currency_auto' | 'currency0k' | 'currency0m' | 'currency0b' | 'pct' | 'pct0' | 'pct1' | 'num0' | 'num1' | 'num0k' | 'num0m' | 'num0b';
+export type FormatType = 'auto' | 'currency' | 'currency_auto' | 'currency0k' | 'currency0m' | 'currency0b' | 'pct' | 'pct0' | 'pct1' | 'num0' | 'num1' | 'num0k' | 'num0m' | 'num0b' | 'date' | 'duration';
 /**
  * Currency configuration
  */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mviz",
-  "version": "1.6.4",
+  "version": "1.6.7",
   "description": "A chart & report builder designed for use by AI.",
   "type": "module",
   "main": "./dist/index.js",
@@ -68,17 +68,17 @@
     "url": "https://github.com/matsonj/mviz/issues"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=24.12.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",
-    "@typescript-eslint/eslint-plugin": "^6.13.0",
-    "@typescript-eslint/parser": "^6.13.0",
-    "esbuild": "^0.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.59.0",
+    "@typescript-eslint/parser": "^8.59.0",
+    "esbuild": "^0.28.0",
     "eslint": "^8.55.0",
     "prettier": "^3.1.0",
     "typescript": "^5.3.0",
-    "vitest": "^1.0.0"
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "ajv": "^8.17.1",