@miao-vision/cli 0.1.6 → 0.1.7

package/dist/cli.cjs

@@ -39673,7 +39673,7 @@ var require_xlsx = __commonJS({
         if (DBF_SUPPORTED_VERSIONS.indexOf(n[0]) > -1 && n[2] <= 12 && n[3] <= 31) return DBF.to_workbook(d, o);
         return read_prn(data, d, o, str);
       }
-      function readFileSync3(filename, opts) {
+      function readFileSync4(filename, opts) {
         var o = opts || {};
         o.type = "file";
         return readSync(filename, o);
@@ -40509,8 +40509,8 @@ var require_xlsx = __commonJS({
       if (typeof parse_xlscfb !== "undefined") XLSX3.parse_xlscfb = parse_xlscfb;
       XLSX3.parse_zip = parse_zip;
       XLSX3.read = readSync;
-      XLSX3.readFile = readFileSync3;
-      XLSX3.readFileSync = readFileSync3;
+      XLSX3.readFile = readFileSync4;
+      XLSX3.readFileSync = readFileSync4;
       XLSX3.write = writeSync;
       XLSX3.writeFile = writeFileSync2;
       XLSX3.writeFileSync = writeFileSync2;
@@ -40541,8 +40541,8 @@ var require_xlsx = __commonJS({
 });
 
 // src/cli.ts
-var import_node_fs2 = require("node:fs");
-var import_node_path2 = require("node:path");
+var import_node_fs3 = require("node:fs");
+var import_node_path3 = require("node:path");
 var YAML = __toESM(require_dist(), 1);
 
 // src/data-loader.ts
@@ -41267,16 +41267,17 @@ var DEFAULT_SVG_THEME = {
   axisColor: "#94a3b8",
   labelColor: "#475569"
 };
-function renderChartSvg(chart, rows, svgTheme) {
+function renderChartSvg(chart, rows, svgTheme, options = {}) {
   const theme = svgTheme ?? DEFAULT_SVG_THEME;
   const data = prepareChartData(rows, chart);
-  if (chart.type === "line" || chart.type === "area") return renderLineChart(chart, data, theme);
-  if (chart.type === "bar") return renderBarChart(chart, data, theme);
-  if (chart.type === "table") return renderTable(chart, data);
+  if (chart.type === "line" || chart.type === "area") return renderLineChart(chart, data, theme, options);
+  if (chart.type === "bar") return renderBarChart(chart, data, theme, options);
+  if (chart.type === "pie") return renderPieChart(chart, data, theme, options);
+  if (chart.type === "table") return renderTable(chart, data, options);
   if (chart.type === "bigvalue") return renderBigValue(chart, data);
   return renderUnsupported(chart);
 }
-function renderBarChart(chart, rows, theme) {
+function renderBarChart(chart, rows, theme, options) {
   const xField = chart.encoding.x?.field ?? "";
   const yField = chart.encoding.y?.field ?? "";
   const width = numberStyle(chart, "width", 720);
@@ -41295,9 +41296,11 @@ function renderBarChart(chart, rows, theme) {
     const x = margin.left + index * (barWidth + barGap);
     const y = margin.top + chartHeight - barHeight;
     const color = theme.palette[index % theme.palette.length];
+    const label = String(row[xField] ?? "");
+    const tooltip = `${label}: ${value}`;
     return `<g>
-      <rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${barWidth.toFixed(1)}" height="${barHeight.toFixed(1)}" rx="3" fill="${color}" />
-      <text x="${(x + barWidth / 2).toFixed(1)}" y="${(margin.top + chartHeight + 18).toFixed(1)}" text-anchor="middle" fill="${theme.labelColor}" font-size="11">${escapeHtml(String(row[xField] ?? ""))}</text>
+      <rect ${markAttrs(options.chartId, xField, row[xField], index, tooltip)} x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${barWidth.toFixed(1)}" height="${barHeight.toFixed(1)}" rx="3" fill="${color}" />
+      <text x="${(x + barWidth / 2).toFixed(1)}" y="${(margin.top + chartHeight + 18).toFixed(1)}" text-anchor="middle" fill="${theme.labelColor}" font-size="11">${escapeHtml(label)}</text>
     </g>`;
   }).join("");
   return svgFrame(width, height, theme.background, `
@@ -41305,7 +41308,7 @@ function renderBarChart(chart, rows, theme) {
     ${bars}
   `);
 }
-function renderLineChart(chart, rows, theme) {
+function renderLineChart(chart, rows, theme, options) {
   const xField = chart.encoding.x?.field ?? "";
   const yField = chart.encoding.y?.field ?? "";
   const width = numberStyle(chart, "width", 720);
@@ -41325,7 +41328,7 @@ function renderLineChart(chart, rows, theme) {
   });
   const path = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(" ");
   const dots = points.map(
-    (p) => `<circle cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="4" fill="${lineColor}"><title>${escapeHtml(p.label)}: ${p.value}</title></circle>`
+    (p) => `<circle ${markAttrs(options.chartId, xField, p.label, 0, `${p.label}: ${p.value}`)} cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="4" fill="${lineColor}"><title>${escapeHtml(p.label)}: ${p.value}</title></circle>`
   ).join("");
   const labels = points.map((p, i) => {
     if (i % Math.ceil(points.length / 8) !== 0) return "";
@@ -41338,11 +41341,42 @@ function renderLineChart(chart, rows, theme) {
     ${labels}
   `);
 }
-function renderTable(chart, rows) {
+function renderPieChart(chart, rows, theme, options) {
+  const labelField = chart.encoding.label?.field ?? "";
+  const valueField = chart.encoding.value?.field ?? "";
+  const width = numberStyle(chart, "width", 720);
+  const height = numberStyle(chart, "height", 420);
+  const cx = width / 2 - 80;
+  const cy = height / 2;
+  const radius = Math.min(width, height) * 0.34;
+  const values = rows.map((row) => Math.max(0, Number(row[valueField]) || 0));
+  const total = values.reduce((sum, value) => sum + value, 0) || 1;
+  let angle = -Math.PI / 2;
+  const slices = rows.map((row, index) => {
+    const value = values[index];
+    const nextAngle = angle + value / total * Math.PI * 2;
+    const path = describeArc(cx, cy, radius, angle, nextAngle);
+    const color = theme.palette[index % theme.palette.length];
+    const label = String(row[labelField] ?? "");
+    const tooltip = `${label}: ${value}`;
+    angle = nextAngle;
+    return `<path ${markAttrs(options.chartId, labelField, row[labelField], index, tooltip)} d="${path}" fill="${color}" stroke="${theme.background}" stroke-width="2" />`;
+  }).join("");
+  const legend = rows.map((row, index) => {
+    const y = 72 + index * 24;
+    return `<g>
+      <rect x="${width - 210}" y="${y - 10}" width="10" height="10" fill="${theme.palette[index % theme.palette.length]}" />
+      <text x="${width - 192}" y="${y}" fill="${theme.labelColor}" font-size="12">${escapeHtml(String(row[labelField] ?? ""))}</text>
+    </g>`;
+  }).join("");
+  return svgFrame(width, height, theme.background, `${slices}${legend}`);
+}
+function renderTable(chart, rows, options) {
   const columns = Object.keys(rows[0] ?? {}).slice(0, 8);
   const header = columns.map((c) => `<th>${escapeHtml(c)}</th>`).join("");
+  const markField = chart.encoding.label?.field ?? chart.encoding.x?.field ?? columns[0] ?? "";
   const body = rows.slice(0, 20).map(
-    (row) => `<tr>${columns.map((c) => `<td>${escapeHtml(String(row[c] ?? ""))}</td>`).join("")}</tr>`
+    (row) => `<tr ${markAttrs(options.chartId, markField, row[markField], 0, String(row[markField] ?? "Row"))}>${columns.map((c) => `<td>${escapeHtml(String(row[c] ?? ""))}</td>`).join("")}</tr>`
   ).join("");
   return `<div class="miao-table-wrap"><table class="miao-table"><caption>${escapeHtml(chart.title ?? "Table")}</caption><thead><tr>${header}</tr></thead><tbody>${body}</tbody></table></div>`;
 }
@@ -41360,6 +41394,33 @@ function svgFrame(width, height, bgColor, body) {
     ${body}
   </svg>`;
 }
+function markAttrs(chartId, field, value, rowKey, tooltip) {
+  return [
+    'data-miao-mark="true"',
+    chartId ? `data-chart-id="${escapeHtml(chartId)}"` : "",
+    `data-field="${escapeHtml(field)}"`,
+    `data-value="${escapeHtml(String(value ?? ""))}"`,
+    `data-row-key="${escapeHtml(String(rowKey))}"`,
+    `data-tooltip="${escapeHtml(tooltip)}"`
+  ].filter(Boolean).join(" ");
+}
+function describeArc(cx, cy, radius, startAngle, endAngle) {
+  const start = polarToCartesian(cx, cy, radius, endAngle);
+  const end = polarToCartesian(cx, cy, radius, startAngle);
+  const largeArcFlag = endAngle - startAngle <= Math.PI ? "0" : "1";
+  return [
+    `M ${cx.toFixed(1)} ${cy.toFixed(1)}`,
+    `L ${start.x.toFixed(1)} ${start.y.toFixed(1)}`,
+    `A ${radius.toFixed(1)} ${radius.toFixed(1)} 0 ${largeArcFlag} 0 ${end.x.toFixed(1)} ${end.y.toFixed(1)}`,
+    "Z"
+  ].join(" ");
+}
+function polarToCartesian(cx, cy, radius, angle) {
+  return {
+    x: cx + radius * Math.cos(angle),
+    y: cy + radius * Math.sin(angle)
+  };
+}
 function buildAxis(margin, chartWidth, chartHeight, xLabel, yLabel, yMin, yMax, theme) {
   const x0 = margin.left;
   const y0 = margin.top + chartHeight;
@@ -41604,6 +41665,441 @@ function getTheme(name) {
   return THEMES.default;
 }
 
+// src/interactive-runtime-assets.ts
+var INTERACTIVE_CSS = `
+.miao-interactive-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 0 0 24px; padding: 12px 0; border-top: 1px solid rgba(128,128,128,0.18); border-bottom: 1px solid rgba(128,128,128,0.18); }
+.miao-filter { display: grid; gap: 5px; font-size: 12px; }
+.miao-filter label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.56; }
+.miao-filter select, .miao-filter input { min-width: 140px; border: 1px solid rgba(128,128,128,0.28); border-radius: 4px; padding: 6px 8px; background: transparent; color: inherit; font: inherit; }
+.miao-filter-range { display: flex; gap: 6px; }
+.miao-reset { border: 1px solid rgba(128,128,128,0.28); border-radius: 4px; padding: 7px 10px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
+.miao-reset:hover { background: rgba(128,128,128,0.08); }
+.miao-chart-svg [data-miao-mark] { cursor: pointer; transition: opacity 0.15s ease, stroke-width 0.15s ease; }
+.miao-chart-svg [data-miao-mark]:hover { opacity: 0.78; }
+.miao-chart-svg [data-miao-selected="true"] { stroke: currentColor; stroke-width: 2; }
+.miao-mark-hidden { opacity: 0.18; }
+.miao-detail { margin-top: 12px; overflow: auto; max-height: 320px; border: 1px solid rgba(128,128,128,0.18); border-radius: 4px; }
+.miao-detail-title { padding: 9px 10px; font-size: 12px; font-weight: 700; border-bottom: 1px solid rgba(128,128,128,0.18); }
+.miao-detail table { width: 100%; border-collapse: collapse; font-size: 12px; }
+.miao-detail th, .miao-detail td { padding: 7px 9px; border-bottom: 1px solid rgba(128,128,128,0.12); text-align: left; white-space: nowrap; }
+.miao-detail th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.64; }
+.miao-tooltip { position: fixed; z-index: 9999; pointer-events: none; padding: 6px 8px; border-radius: 4px; background: rgba(20,20,19,0.92); color: #fff; font: 12px/1.35 system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,0.18); transform: translate(10px, 10px); }
+`;
+var INTERACTIVE_JS = `
+(function() {
+  var specEl = document.getElementById('miao-viz-spec');
+  var dataEl = document.getElementById('miao-viz-data');
+  if (!specEl || !dataEl) return;
+
+  var spec = JSON.parse(specEl.textContent || '{}');
+  var rows = JSON.parse(dataEl.textContent || '[]');
+  var filters = (spec.interactions && spec.interactions.globalFilters) || [];
+  var state = { filters: {}, selection: null };
+  var tooltip = createTooltip();
+
+  function init() {
+    renderControls();
+    update();
+  }
+
+  function renderControls() {
+    if (!filters.length) return;
+    var main = document.querySelector('.miao-viz-report');
+    if (!main) return;
+    var controls = document.createElement('section');
+    controls.className = 'miao-interactive-controls';
+    controls.setAttribute('aria-label', 'Interactive filters');
+    filters.forEach(function(filter) {
+      controls.appendChild(filter.type === 'range' ? renderRangeFilter(filter) : renderSelectFilter(filter));
+    });
+    var reset = document.createElement('button');
+    reset.type = 'button';
+    reset.className = 'miao-reset';
+    reset.textContent = 'Reset';
+    reset.addEventListener('click', function() {
+      state.filters = {};
+      state.selection = null;
+      controls.querySelectorAll('select,input').forEach(function(input) { input.value = ''; });
+      update();
+    });
+    controls.appendChild(reset);
+    var header = main.querySelector('header');
+    main.insertBefore(controls, header ? header.nextSibling : main.firstChild);
+  }
+
+  function renderSelectFilter(filter) {
+    var wrap = document.createElement('div');
+    wrap.className = 'miao-filter';
+    var label = document.createElement('label');
+    label.textContent = filter.field;
+    var select = document.createElement('select');
+    select.innerHTML = '<option value="">All</option>' + uniqueValues(filter.field).map(function(value) {
+      return '<option value="' + escapeAttr(value) + '">' + escapeHtml(value) + '</option>';
+    }).join('');
+    select.addEventListener('change', function() {
+      state.filters[filter.field] = select.value;
+      update();
+    });
+    wrap.appendChild(label);
+    wrap.appendChild(select);
+    return wrap;
+  }
+
+  function renderRangeFilter(filter) {
+    var wrap = document.createElement('div');
+    wrap.className = 'miao-filter';
+    var label = document.createElement('label');
+    label.textContent = filter.field;
+    var pair = document.createElement('div');
+    pair.className = 'miao-filter-range';
+    var min = document.createElement('input');
+    var max = document.createElement('input');
+    min.placeholder = 'Min';
+    max.placeholder = 'Max';
+    [min, max].forEach(function(input) {
+      input.addEventListener('input', function() {
+        state.filters[filter.field] = [min.value, max.value];
+        update();
+      });
+    });
+    pair.appendChild(min);
+    pair.appendChild(max);
+    wrap.appendChild(label);
+    wrap.appendChild(pair);
+    return wrap;
+  }
+
+  function bindMarks() {
+    document.querySelectorAll('[data-miao-mark]').forEach(function(mark) {
+      var chart = chartSpec(mark.getAttribute('data-chart-id'));
+      mark.addEventListener('mouseenter', function(event) {
+        var text = mark.getAttribute('data-tooltip');
+        if (!text) return;
+        tooltip.textContent = text;
+        tooltip.hidden = false;
+        moveTooltip(event);
+      });
+      mark.addEventListener('mousemove', moveTooltip);
+      mark.addEventListener('mouseleave', function() { tooltip.hidden = true; });
+      mark.addEventListener('click', function() {
+        if (!canSelect(chart)) return;
+        var field = mark.getAttribute('data-field');
+        var value = mark.getAttribute('data-value');
+        if (!field) return;
+        state.selection = state.selection && state.selection.field === field && String(state.selection.value) === String(value)
+          ? null
+          : { field: field, value: value };
+        update();
+      });
+    });
+  }
+
+  function update() {
+    var filtered = applyFilters(rows);
+    document.querySelectorAll('[data-miao-chart]').forEach(function(container) {
+      var chart = chartSpec(container.getAttribute('data-miao-chart'));
+      renderChart(container, chart, filtered);
+    });
+    bindMarks();
+    document.querySelectorAll('[data-miao-mark]').forEach(function(mark) {
+      var field = mark.getAttribute('data-field');
+      var value = mark.getAttribute('data-value');
+      var selected = state.selection && state.selection.field === field && String(state.selection.value) === String(value);
+      mark.setAttribute('data-miao-selected', selected ? 'true' : 'false');
+      mark.classList.toggle('miao-mark-hidden', Boolean((state.selection && !selected) || !markMatchesFilters(field, value)));
+    });
+    document.querySelectorAll('[data-miao-chart]').forEach(function(chart) {
+      renderDetail(chart, filtered);
+    });
+  }
+
+  function renderChart(container, chart, sourceRows) {
+    if (!chart || ['bar', 'pie', 'table'].indexOf(chart.type) === -1) return;
+    var slot = container.querySelector('.miao-render-slot');
+    if (!slot) return;
+    var chartRows = prepareRows(sourceRows, chart);
+    if (chart.type === 'bar') slot.innerHTML = renderBar(chart, chartRows, container.getAttribute('data-miao-chart'));
+    else if (chart.type === 'pie') slot.innerHTML = renderPie(chart, chartRows, container.getAttribute('data-miao-chart'));
+    else if (chart.type === 'table') slot.innerHTML = renderTable(chart, chartRows, container.getAttribute('data-miao-chart'));
+  }
+
+  function prepareRows(sourceRows, chart) {
+    return ((chart.data && chart.data.transform) || []).reduce(function(current, transform) {
+      if (transform.type === 'derive-month' && transform.field && transform.as) {
+        return current.map(function(row) {
+          var copy = Object.assign({}, row);
+          copy[transform.as] = toMonth(row[transform.field]);
+          return copy;
+        });
+      }
+      if (transform.type === 'aggregate') return aggregateRows(current, transform);
+      if (transform.type === 'sort' && transform.field) {
+        var order = transform.order === 'asc' ? 1 : -1;
+        return current.slice().sort(function(a, b) {
+          var an = Number(a[transform.field]);
+          var bn = Number(b[transform.field]);
+          if (Number.isFinite(an) && Number.isFinite(bn)) return (an - bn) * order;
+          return String(a[transform.field] || '').localeCompare(String(b[transform.field] || '')) * order;
+        });
+      }
+      if (transform.type === 'limit' && typeof transform.value === 'number') return current.slice(0, transform.value);
+      return current;
+    }, sourceRows.slice());
+  }
+
+  function aggregateRows(sourceRows, transform) {
+    var groupBy = transform.groupBy || [];
+    var measures = transform.measures || [];
+    var groups = new Map();
+    sourceRows.forEach(function(row) {
+      var key = JSON.stringify(groupBy.map(function(field) { return row[field]; }));
+      var existing = groups.get(key) || [];
+      existing.push(row);
+      groups.set(key, existing);
+    });
+    return Array.from(groups.values()).map(function(groupRows) {
+      var first = groupRows[0] || {};
+      var out = {};
+      groupBy.forEach(function(field) { out[field] = first[field]; });
+      measures.forEach(function(measure) { out[measure.as] = aggregateMeasure(groupRows, measure); });
+      return out;
+    });
+  }
+
+  function aggregateMeasure(sourceRows, measure) {
+    if (measure.op === 'count') return sourceRows.length;
+    var values = sourceRows.map(function(row) { return Number(row[measure.field]); }).filter(Number.isFinite);
+    if (!values.length) return 0;
+    if (measure.op === 'avg') return values.reduce(sum, 0) / values.length;
+    if (measure.op === 'min') return Math.min.apply(null, values);
+    if (measure.op === 'max') return Math.max.apply(null, values);
+    return values.reduce(sum, 0);
+  }
+
+  function renderBar(chart, chartRows, chartId) {
+    var xField = field(chart, 'x');
+    var yField = field(chart, 'y');
+    var width = numberStyle(chart, 'width', 720);
+    var height = numberStyle(chart, 'height', 420);
+    var margin = { top: 24, right: 24, bottom: 48, left: 72 };
+    var chartWidth = width - margin.left - margin.right;
+    var chartHeight = height - margin.top - margin.bottom;
+    var values = chartRows.map(function(row) { return Number(row[yField]); }).filter(Number.isFinite);
+    var yMax = Math.max.apply(null, values.concat([1]));
+    var gap = 8;
+    var barWidth = Math.max(8, (chartWidth - gap * Math.max(chartRows.length - 1, 0)) / Math.max(chartRows.length, 1));
+    var body = chartRows.map(function(row, index) {
+      var value = Number(row[yField]) || 0;
+      var barHeight = value / yMax * chartHeight;
+      var x = margin.left + index * (barWidth + gap);
+      var y = margin.top + chartHeight - barHeight;
+      var label = String(row[xField] == null ? '' : row[xField]);
+      return '<g><rect ' + markAttrs(chartId, xField, row[xField], index, label + ': ' + value) +
+        ' x="' + fixed(x) + '" y="' + fixed(y) + '" width="' + fixed(barWidth) + '" height="' + fixed(barHeight) +
+        '" rx="3" fill="' + color(index) + '" />' +
+        '<text x="' + fixed(x + barWidth / 2) + '" y="' + fixed(margin.top + chartHeight + 18) +
+        '" text-anchor="middle" fill="#475569" font-size="11">' + escapeHtml(label) + '</text></g>';
+    }).join('');
+    return svgFrame(width, height, body);
+  }
+
+  function renderPie(chart, chartRows, chartId) {
+    var labelField = field(chart, 'label');
+    var valueField = field(chart, 'value');
+    var width = numberStyle(chart, 'width', 720);
+    var height = numberStyle(chart, 'height', 420);
+    var cx = width / 2 - 80;
+    var cy = height / 2;
+    var radius = Math.min(width, height) * 0.34;
+    var values = chartRows.map(function(row) { return Math.max(0, Number(row[valueField]) || 0); });
+    var total = values.reduce(sum, 0) || 1;
+    var angle = -Math.PI / 2;
+    var slices = chartRows.map(function(row, index) {
+      var value = values[index];
+      var nextAngle = angle + value / total * Math.PI * 2;
+      var path = describeArc(cx, cy, radius, angle, nextAngle);
+      var label = String(row[labelField] == null ? '' : row[labelField]);
+      angle = nextAngle;
+      return '<path ' + markAttrs(chartId, labelField, row[labelField], index, label + ': ' + value) +
+        ' d="' + path + '" fill="' + color(index) + '" stroke="#fff" stroke-width="2" />';
+    }).join('');
+    return svgFrame(width, height, slices);
+  }
+
+  function renderTable(chart, chartRows, chartId) {
+    var columns = Object.keys(chartRows[0] || rows[0] || {}).slice(0, 8);
+    var markField = field(chart, 'label') || field(chart, 'x') || columns[0] || '';
+    return '<div class="miao-table-wrap"><table class="miao-table"><thead><tr>' +
+      columns.map(function(col) { return '<th>' + escapeHtml(col) + '</th>'; }).join('') +
+      '</tr></thead><tbody>' + chartRows.slice(0, 20).map(function(row, index) {
+        return '<tr ' + markAttrs(chartId, markField, row[markField], index, String(row[markField] || 'Row')) + '>' +
+          columns.map(function(col) { return '<td>' + escapeHtml(row[col] == null ? '' : row[col]) + '</td>'; }).join('') +
+          '</tr>';
+      }).join('') + '</tbody></table></div>';
+  }
+
+  function renderDetail(chart, filtered) {
+    var chartId = chart.getAttribute('data-miao-chart');
+    var detail = chart.querySelector('.miao-detail');
+    if (!detail) {
+      detail = document.createElement('div');
+      detail.className = 'miao-detail';
+      chart.appendChild(detail);
+    }
+    if (!state.selection) {
+      detail.innerHTML = '';
+      detail.hidden = true;
+      return;
+    }
+    var selectedRows = filtered.filter(function(row) {
+      return String(row[state.selection.field] == null ? '' : row[state.selection.field]) === String(state.selection.value);
+    });
+    detail.hidden = false;
+    detail.innerHTML = detailTable(selectedRows, chartId);
+  }
+
+  function applyFilters(source) {
+    return source.filter(function(row) {
+      return filters.every(function(filter) {
+        var active = state.filters[filter.field];
+        if (active == null || active === '' || (Array.isArray(active) && !active[0] && !active[1])) return true;
+        if (filter.type === 'select') return String(row[filter.field] == null ? '' : row[filter.field]) === String(active);
+        var current = comparable(row[filter.field]);
+        if (current == null) return false;
+        var min = comparable(active[0]);
+        var max = comparable(active[1]);
+        if (min != null && current < min) return false;
+        if (max != null && current > max) return false;
+        return true;
+      });
+    });
+  }
+
+  function markMatchesFilters(field, value) {
+    var activeFilters = filters.filter(function(filter) { return filter.field === field; });
+    if (!activeFilters.length) return true;
+    return activeFilters.every(function(filter) {
+      var active = state.filters[filter.field];
+      if (active == null || active === '' || (Array.isArray(active) && !active[0] && !active[1])) return true;
+      if (filter.type === 'select') return String(value == null ? '' : value) === String(active);
+      var current = comparable(value);
+      if (current == null) return false;
+      var min = comparable(active[0]);
+      var max = comparable(active[1]);
+      if (min != null && current < min) return false;
+      if (max != null && current > max) return false;
+      return true;
+    });
+  }
+
+  function chartSpec(chartId) {
+    return (spec.charts || []).find(function(chart, index) { return (chart.id || ('chart-' + (index + 1))) === chartId; }) || null;
+  }
+  function canSelect(chart) { return Boolean(chart && ((chart.interaction && chart.interaction.select) || chart.drilldownPreset)); }
+  function field(chart, channel) { return chart && chart.encoding && chart.encoding[channel] ? chart.encoding[channel].field : ''; }
+  function numberStyle(chart, key, fallback) { return chart && chart.style && typeof chart.style[key] === 'number' ? chart.style[key] : fallback; }
+
+  function svgFrame(width, height, body) {
+    return '<svg class="miao-chart-svg" viewBox="0 0 ' + width + ' ' + height + '" width="100%" height="' + height +
+      '" role="img" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="' + width + '" height="' + height +
+      '" fill="#fff" />' + body + '</svg>';
+  }
+
+  function markAttrs(chartId, markField, value, rowKey, tooltipText) {
+    return 'data-miao-mark="true" data-chart-id="' + escapeAttr(chartId || '') + '" data-field="' + escapeAttr(markField || '') +
+      '" data-value="' + escapeAttr(value == null ? '' : value) + '" data-row-key="' + escapeAttr(rowKey) +
+      '" data-tooltip="' + escapeAttr(tooltipText || '') + '"';
+  }
+
+  function describeArc(cx, cy, radius, startAngle, endAngle) {
+    var start = polarToCartesian(cx, cy, radius, endAngle);
+    var end = polarToCartesian(cx, cy, radius, startAngle);
+    var largeArc = endAngle - startAngle <= Math.PI ? '0' : '1';
+    return 'M ' + fixed(cx) + ' ' + fixed(cy) + ' L ' + fixed(start.x) + ' ' + fixed(start.y) +
+      ' A ' + fixed(radius) + ' ' + fixed(radius) + ' 0 ' + largeArc + ' 0 ' + fixed(end.x) + ' ' + fixed(end.y) + ' Z';
+  }
+
+  function polarToCartesian(cx, cy, radius, angle) { return { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) }; }
+  function toMonth(value) {
+    var date = new Date(String(value));
+    if (!Number.isFinite(date.getTime())) return String(value == null ? '' : value);
+    return date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0');
+  }
+  function color(index) { var palette = ['#2563eb', '#16a34a', '#f97316', '#dc2626', '#7c3aed', '#0891b2']; return palette[index % palette.length]; }
+  function fixed(value) { return Number(value).toFixed(1); }
+  function sum(a, b) { return a + b; }
+
+  function detailTable(selectedRows, chartId) {
+    var visible = selectedRows.slice(0, 100);
+    var columns = Object.keys(visible[0] || rows[0] || {}).slice(0, 8);
+    if (!columns.length) return '<div class="miao-detail-title">No rows</div>';
+    return '<div class="miao-detail-title">' + escapeHtml(chartId || 'Detail') + ': ' + selectedRows.length + ' rows</div>' +
+      '<table><thead><tr>' + columns.map(function(col) { return '<th>' + escapeHtml(col) + '</th>'; }).join('') +
+      '</tr></thead><tbody>' + visible.map(function(row) {
+        return '<tr>' + columns.map(function(col) { return '<td>' + escapeHtml(row[col] == null ? '' : row[col]) + '</td>'; }).join('') + '</tr>';
+      }).join('') + '</tbody></table>';
+  }
+
+  function uniqueValues(field) {
+    var seen = new Set();
+    rows.forEach(function(row) {
+      if (row[field] != null) seen.add(String(row[field]));
+    });
+    return Array.from(seen).slice(0, 200).sort();
+  }
+
+  function comparable(value) {
+    if (value == null || value === '') return null;
+    var number = Number(value);
+    if (Number.isFinite(number)) return number;
+    var date = new Date(String(value)).getTime();
+    return Number.isFinite(date) ? date : null;
+  }
+
+  function createTooltip() {
+    var el = document.createElement('div');
+    el.className = 'miao-tooltip';
+    el.hidden = true;
+    document.body.appendChild(el);
+    return el;
+  }
+
+  function moveTooltip(event) {
+    tooltip.style.left = event.clientX + 'px';
+    tooltip.style.top = event.clientY + 'px';
+  }
+
+  function escapeHtml(value) {
+    return String(value).replace(/[&<>"']/g, function(char) {
+      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char];
+    });
+  }
+
+  function escapeAttr(value) {
+    return escapeHtml(value).replace(/\\n/g, ' ');
+  }
+
+  init();
+})();
+`;
+
+// src/interactive-runtime.ts
+function shouldEnableInteractiveRuntime(spec, options = {}) {
+  if (options.enabled === true) return true;
+  if (options.enabled === false) return false;
+  if ((spec.interactions?.globalFilters?.length ?? 0) > 0) return true;
+  return spec.charts.some((chart) => Boolean(chart.interaction || chart.drilldownPreset));
+}
+function renderInteractiveAssets(rows) {
+  return `
+  <script type="application/json" id="miao-viz-data">${escapeScriptJson(rows)}</script>
+  <style>${INTERACTIVE_CSS}</style>
+  <script>${INTERACTIVE_JS}</script>`;
+}
+function escapeScriptJson(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+
 // src/html-export.ts
 var INSIGHTS_CSS = `
   .report-insights { margin: 0 0 32px; padding: 16px 20px 14px; border-radius: 4px; border: 1px solid rgba(128,128,128,0.18); background: rgba(128,128,128,0.04); }
@@ -41611,9 +42107,10 @@ var INSIGHTS_CSS = `
   .insights-list { margin: 0; padding: 0 0 0 18px; }
   .insights-list li { margin: 5px 0; font-size: 13px; line-height: 1.55; opacity: 0.75; }
 `;
-function renderStaticHtml(spec, profile, rows, themeOverride) {
+function renderStaticHtml(spec, profile, rows, themeOverride, interactiveOptions = {}) {
   const theme = getTheme(themeOverride ?? spec.theme);
   const title = spec.title ?? "Miao Vision Report";
+  const interactive = shouldEnableInteractiveRuntime(spec, interactiveOptions);
   const header = theme.layout === "editorial" ? renderEditorialHeader(title, spec.description, profile) : renderDefaultHeader(title, spec.description, profile);
   const insights = spec.insights && spec.insights.length > 0 ? renderInsights(spec.insights) : "";
   let charts;
@@ -41629,16 +42126,18 @@ function renderStaticHtml(spec, profile, rows, themeOverride) {
         sections.push(renderKpiGroup(group, rows, theme));
       } else {
         const chart = spec.charts[i];
-        const svg = renderChartSvg(chart, rows, theme.svg);
-        sections.push(renderEditorialCard(chart, i, svg));
+        const chartId = chartIdFor(chart, i);
+        const svg = renderChartSvg(chart, rows, theme.svg, { chartId });
+        sections.push(renderEditorialCard(chart, i, svg, chartId));
         i++;
       }
     }
     charts = sections.join("\n");
   } else {
     charts = spec.charts.map((chart, index) => {
-      const svg = renderChartSvg(chart, rows, theme.svg);
-      return renderDefaultCard(chart, index, svg);
+      const chartId = chartIdFor(chart, index);
+      const svg = renderChartSvg(chart, rows, theme.svg, { chartId });
+      return renderDefaultCard(chart, index, svg, chartId);
     }).join("\n");
   }
   return `<!doctype html>
@@ -41657,6 +42156,7 @@ function renderStaticHtml(spec, profile, rows, themeOverride) {
   </main>
   <script type="application/json" id="miao-viz-spec">${escapeHtml(JSON.stringify(spec, null, 2))}</script>
   <script type="application/json" id="miao-viz-profile">${escapeHtml(JSON.stringify(profile, null, 2))}</script>
+  ${interactive ? renderInteractiveAssets(rows) : ""}
 </body>
 </html>`;
 }
@@ -41684,11 +42184,11 @@ function renderEditorialHeader(title, description, profile) {
     </div>
   </header>`;
 }
-function renderDefaultCard(chart, index, svg) {
+function renderDefaultCard(chart, index, svg, chartId) {
   const chartTitle = chart.title ?? `${chart.type} chart ${index + 1}`;
-  return `<section class="chart-block">
+  return `<section class="chart-block" data-miao-chart="${escapeHtml(chartId)}">
     <h2>${escapeHtml(chartTitle)}</h2>
-    ${svg}
+    <div class="miao-render-slot">${svg}</div>
   </section>`;
 }
 function renderKpiGroup(charts, rows, theme) {
@@ -41698,16 +42198,19 @@ function renderKpiGroup(charts, rows, theme) {
     <div class="kpi-grid">${items}</div>
   </section>`;
 }
-function renderEditorialCard(chart, index, svg) {
+function renderEditorialCard(chart, index, svg, chartId) {
   const chartTitle = chart.title ?? `${chart.type} chart ${index + 1}`;
   const caption = buildCaption(chart);
-  return `<section class="chart-card">
+  return `<section class="chart-card" data-miao-chart="${escapeHtml(chartId)}">
     <div class="chart-label">${escapeHtml(chart.type.toUpperCase())} CHART</div>
     <h2>${escapeHtml(chartTitle)}</h2>
-    ${svg}
+    <div class="miao-render-slot">${svg}</div>
     ${caption ? `<p class="chart-caption">${escapeHtml(caption)}</p>` : ""}
   </section>`;
 }
+function chartIdFor(chart, index) {
+  return chart.id ?? `chart-${index + 1}`;
+}
 function renderInsights(insights) {
   const items = insights.map((s) => `<li>${escapeHtml(s)}</li>`).join("\n      ");
   return `<section class="report-insights">
@@ -56278,9 +56781,20 @@ var transformSchema = external_exports.object({
   order: external_exports.enum(["asc", "desc"]).optional(),
   value: external_exports.unknown().optional()
 });
+var globalFilterSchema = external_exports.object({
+  field: external_exports.string().min(1),
+  type: external_exports.enum(["select", "range"])
+});
+var chartInteractionSchema = external_exports.object({
+  tooltip: external_exports.boolean().optional(),
+  select: external_exports.enum(["filter", "detail"]).optional()
+});
 var chartSpecSchema = external_exports.object({
+  id: external_exports.string().min(1).optional(),
   type: external_exports.enum(MVP_CHART_TYPES),
   title: external_exports.string().optional(),
+  interaction: chartInteractionSchema.optional(),
+  drilldownPreset: external_exports.enum(["category-detail"]).optional(),
   data: external_exports.object({
     source: external_exports.string().optional(),
     transform: external_exports.array(transformSchema).optional()
@@ -56299,6 +56813,9 @@ var reportSpecSchema = external_exports.object({
   title: external_exports.string().optional(),
   description: external_exports.string().optional(),
   theme: external_exports.enum(["default", "editorial", "dark", "minimal"]).optional(),
+  interactions: external_exports.object({
+    globalFilters: external_exports.array(globalFilterSchema).optional()
+  }).optional(),
   insights: external_exports.array(external_exports.string()).optional(),
   charts: external_exports.array(chartSpecSchema).min(1)
 });
@@ -56332,6 +56849,7 @@ var REQUIRED_ENCODINGS = {
   table: [],
   bigvalue: ["value"]
 };
+var DRILLDOWN_CHART_TYPES = ["bar", "pie", "table"];
 function validateReportSpec(spec, profile, formats = ["html"]) {
   const parsed = reportSpecSchema.safeParse(spec);
   if (!parsed.success) {
@@ -56345,11 +56863,24 @@ function validateReportSpec(spec, profile, formats = ["html"]) {
     }
   }
   const availableFields = profile.columns.map((column) => column.name);
+  const chartIds = /* @__PURE__ */ new Set();
+  const interactionResult = validateReportInteractions(parsed.data, profile, availableFields);
+  if (isAgentError(interactionResult)) return interactionResult;
   for (const chart of parsed.data.charts) {
+    if (chart.id) {
+      if (chartIds.has(chart.id)) {
+        return agentError("DUPLICATE_CHART_ID", `Chart id '${chart.id}' is used more than once.`, {
+          chartId: chart.id
+        });
+      }
+      chartIds.add(chart.id);
+    }
     const chartTypeResult = validateChartType(chart);
     if (isAgentError(chartTypeResult)) return chartTypeResult;
     const encodingResult = validateRequiredEncodings(chart);
     if (isAgentError(encodingResult)) return encodingResult;
+    const chartInteractionResult = validateChartInteraction(chart);
+    if (isAgentError(chartInteractionResult)) return chartInteractionResult;
     const derivedFields = collectDerivedFields(chart);
     const sourceFields = collectSourceFields(chart, derivedFields);
     for (const field of sourceFields) {
@@ -56392,6 +56923,46 @@ function validateRequiredEncodings(chart) {
   }
   return ok(chart);
 }
+function validateReportInteractions(spec, profile, availableFields) {
+  for (const filter of spec.interactions?.globalFilters ?? []) {
+    const column = profile.columns.find((candidate) => candidate.name === filter.field);
+    if (!column) {
+      return agentError("INTERACTION_FIELD_NOT_FOUND", `Interactive filter field '${filter.field}' was not found in the input data.`, {
+        field: filter.field,
+        availableFields
+      });
+    }
+    if (filter.type === "range" && column.type !== "number" && column.type !== "date") {
+      return agentError("INTERACTION_FILTER_TYPE_MISMATCH", `Range filter '${filter.field}' requires a number or date field.`, {
+        field: filter.field,
+        filterType: filter.type,
+        columnType: column.type,
+        supportedColumnTypes: ["number", "date"]
+      });
+    }
+  }
+  return ok(spec);
+}
+function validateChartInteraction(chart) {
+  if (chart.drilldownPreset && chart.drilldownPreset !== "category-detail") {
+    return agentError("UNSUPPORTED_DRILLDOWN_PRESET", `Drilldown preset '${chart.drilldownPreset}' is not supported.`, {
+      supportedPresets: ["category-detail"]
+    });
+  }
+  if (chart.drilldownPreset && !DRILLDOWN_CHART_TYPES.includes(chart.type)) {
+    return agentError("UNSUPPORTED_DRILLDOWN_CHART_TYPE", `Drilldown preset '${chart.drilldownPreset}' is not supported for chart type '${chart.type}'.`, {
+      chartType: chart.type,
+      supportedChartTypes: DRILLDOWN_CHART_TYPES
+    });
+  }
+  if (chart.interaction?.select && !DRILLDOWN_CHART_TYPES.includes(chart.type)) {
+    return agentError("UNSUPPORTED_INTERACTION_CHART_TYPE", `Chart interaction select '${chart.interaction.select}' is not supported for chart type '${chart.type}'.`, {
+      chartType: chart.type,
+      supportedChartTypes: DRILLDOWN_CHART_TYPES
+    });
+  }
+  return ok(chart);
+}
 function collectSourceFields(chart, derivedFields) {
   const fields = /* @__PURE__ */ new Set();
   for (const encoding of Object.values(chart.encoding)) {
@@ -56601,8 +57172,8 @@ var SLIDE_CSS = `
 
   /* \u2500\u2500 Shared slide elements \u2500\u2500 */
   .slide-eyebrow { font-family: var(--mv-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 3px; color: var(--mv-muted); margin-bottom: 14px; }
-  .slide-title { font-family: var(--mv-serif); font-size: 50px; font-weight: 500; line-height: 1.1; letter-spacing: -0.6px; color: var(--mv-ink); margin-bottom: 24px; }
-  .slide-claim { font-family: var(--mv-serif); font-size: 21px; line-height: 1.45; color: var(--mv-soft); margin-bottom: 18px; max-width: 52ch; }
+  .slide-title { font-family: var(--mv-serif); font-size: 50px; font-weight: 500; line-height: 1.1; letter-spacing: -0.6px; color: var(--mv-ink); margin-bottom: 24px; max-width: 19ch; overflow-wrap: anywhere; }
+  .slide-claim { font-family: var(--mv-serif); font-size: 21px; line-height: 1.45; color: var(--mv-soft); margin-bottom: 18px; max-width: 52ch; overflow-wrap: anywhere; }
   .slide-pts { list-style: none; counter-reset: pts; }
   .slide-pts li { counter-increment: pts; font-size: 16px; line-height: 1.55; color: var(--mv-soft); padding-left: 22px; position: relative; margin-bottom: 10px; }
   .slide-pts li::before { content: counter(pts) "."; position: absolute; left: 0; color: var(--mv-brand); font-weight: 500; font-family: var(--mv-mono); font-size: 13px; }
@@ -56613,7 +57184,7 @@ var SLIDE_CSS = `
   .slide-chart-full svg, .slide-chart-full .miao-table-wrap { width: 100%; }
 
   /* \u2500\u2500 Metrics \u2500\u2500 */
-  .slide-metrics { display: flex; gap: 0; padding-top: 14px; border-top: 0.5px dotted var(--mv-border); margin-bottom: 20px; }
+  .slide-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-top: 14px; border-top: 0.5px dotted var(--mv-border); margin-bottom: 20px; }
   .slide-metric { flex: 1; display: flex; flex-direction: column; gap: 5px; padding-right: 24px; }
   .slide-metric .v { font-family: var(--mv-serif); font-size: 42px; font-weight: 500; color: var(--mv-brand); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
   .slide-metric .l { font-family: var(--mv-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--mv-muted); }
@@ -56621,8 +57192,8 @@ var SLIDE_CSS = `
   /* \u2500\u2500 Cover \u2500\u2500 */
   .slide-cover { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; height: 100%; }
   .slide-cover-left { display: flex; flex-direction: column; }
-  .slide-cover h1 { font-family: var(--mv-serif); font-size: 56px; font-weight: 500; line-height: 1.05; letter-spacing: -1px; color: var(--mv-ink); margin-bottom: 14px; }
-  .slide-cover .sub { font-size: 18px; color: var(--mv-soft); line-height: 1.5; margin-bottom: 22px; max-width: 34ch; }
+  .slide-cover h1 { font-family: var(--mv-serif); font-size: 56px; font-weight: 500; line-height: 1.05; letter-spacing: -1px; color: var(--mv-ink); margin-bottom: 14px; max-width: 12ch; overflow-wrap: anywhere; }
+  .slide-cover .sub { font-size: 18px; color: var(--mv-soft); line-height: 1.5; margin-bottom: 22px; max-width: 34ch; overflow-wrap: anywhere; }
   .slide-cover .line { width: 48px; height: 2px; background: var(--mv-brand); margin-bottom: 14px; }
   .slide-cover .meta { font-family: var(--mv-mono); font-size: 11px; color: var(--mv-muted); letter-spacing: 0.5px; }
   .slide-cover-right { display: flex; align-items: center; justify-content: center; }
@@ -56643,6 +57214,8 @@ var SLIDE_CSS = `
 
   /* \u2500\u2500 Table styles inside slide \u2500\u2500 */
   .miao-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .miao-table-wrap { max-height: 430px; overflow: hidden; }
+  .miao-table caption { caption-side: top; text-align: left; padding: 0 0 10px; color: var(--mv-muted); font-family: var(--mv-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
   .miao-table th { border-bottom: 1px solid var(--mv-border); padding: 7px 12px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mv-muted); font-family: var(--mv-mono); }
   .miao-table td { border-bottom: 1px solid var(--mv-border); padding: 8px 12px; color: var(--mv-soft); font-variant-numeric: tabular-nums; }
   .miao-table tbody tr:last-child td { border-bottom: none; }
@@ -56682,8 +57255,8 @@ var SLIDE_JS = `
     if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); goTo(current + 1); }
     else if (e.key === 'ArrowLeft') { e.preventDefault(); goTo(current - 1); }
     else if (e.key === 'f' || e.key === 'F') {
-      if (!document.fullscreenElement) document.documentElement.requestFullscreen();
-      else document.exitFullscreen();
+      if (!document.fullscreenElement) document.documentElement.requestFullscreen().catch(function() {});
+      else document.exitFullscreen().catch(function() {});
     }
   });
 
@@ -56694,8 +57267,8 @@ var SLIDE_JS = `
   if (btnPrev)  btnPrev.addEventListener('click', function() { goTo(current - 1); });
   if (btnNext)  btnNext.addEventListener('click', function() { goTo(current + 1); });
   if (btnFs)    btnFs.addEventListener('click', function() {
-    if (!document.fullscreenElement) document.documentElement.requestFullscreen();
-    else document.exitFullscreen();
+    if (!document.fullscreenElement) document.documentElement.requestFullscreen().catch(function() {});
+    else document.exitFullscreen().catch(function() {});
   });
   if (btnPrint) btnPrint.addEventListener('click', function() {
     document.body.classList.remove('present-mode');
@@ -56977,8 +57550,310 @@ function hintForIssue(path, message) {
   return `Check ${path} in the DeckSpec.`;
 }
 
+// src/article-infographic.ts
+var import_node_fs2 = require("node:fs");
+var import_node_path2 = require("node:path");
+var ARTICLE_STYLES = ["editorial", "executive", "minimal"];
+var ARTICLE_FORMATS = ["html", "json", "markdown"];
+var DATE_PATTERN = /\b(?:\d{4}(?:[-/]\d{1,2}(?:[-/]\d{1,2})?)?|(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)[a-z]*\s+\d{1,2},?\s+\d{4})\b/i;
+var NUMBER_PATTERN = /(?:[$¥€]\s?\d[\d,.]*|\b\d+(?:\.\d+)?%?\b)/;
+function parseArticleStyle(value) {
+  if (!value) return "editorial";
+  return ARTICLE_STYLES.includes(value) ? value : void 0;
+}
+function parseArticleFormat(value) {
+  if (!value) return "html";
+  return ARTICLE_FORMATS.includes(value) ? value : void 0;
+}
+function generateInfographicFromFile(file2, style) {
+  const extension = (0, import_node_path2.extname)(file2).toLowerCase();
+  if (extension && ![".md", ".markdown", ".txt"].includes(extension)) {
+    return agentError("UNSUPPORTED_ARTICLE_INPUT", "Article input must be a Markdown or plain-text file.", {
+      supportedExtensions: [".md", ".markdown", ".txt"]
+    });
+  }
+  let raw;
+  try {
+    raw = (0, import_node_fs2.readFileSync)(file2, "utf8");
+  } catch (error51) {
+    return agentError("ARTICLE_INPUT_UNREADABLE", error51 instanceof Error ? error51.message : "Article input could not be read.", {
+      file: file2
+    });
+  }
+  const normalized = normalizeArticleText(raw);
+  if (!normalized) {
+    return agentError("EMPTY_ARTICLE_INPUT", "Article input is empty after normalization.", { file: file2 });
+  }
+  const parsed = parseArticle(normalized, file2);
+  const spec = buildInfographicSpec(parsed, style, file2);
+  return ok({ spec, markdown: renderInfographicMarkdown(spec) });
+}
+function normalizeArticleText(raw) {
+  return raw.replace(/\r\n/g, "\n").replace(/\t/g, " ").split("\n").map((line) => line.replace(/[ \u00a0]+$/g, "")).join("\n").trim();
+}
+function parseArticle(text, file2) {
+  const lines = text.split("\n");
+  const metadata = extractMetadata(lines);
+  const title = findTitle(lines) ?? titleFromFilename(file2);
+  const contentLines = lines.filter((line) => {
+    const trimmed = line.trim();
+    return trimmed !== title && !trimmed.match(/^#\s+/) && !trimmed.match(/^(source|url|author|date):\s*/i);
+  });
+  const quotes = contentLines.filter((line) => line.trim().startsWith(">")).map((line) => cleanMarkdown(line.replace(/^>\s?/, ""))).filter(Boolean);
+  const listItems = contentLines.filter((line) => line.trim().match(/^[-*+]\s+/) || line.trim().match(/^\d+\.\s+/)).map((line) => cleanMarkdown(line.replace(/^\s*(?:[-*+]|\d+\.)\s+/, ""))).filter(Boolean);
+  const tableRows = extractTableRows(contentLines);
+  const paragraphs = contentLines.join("\n").split(/\n{2,}/).map((block) => cleanMarkdown(block.replace(/\n/g, " "))).filter((block) => block.length > 0 && !block.startsWith("|") && !block.match(/^[-*+]\s+/));
+  return {
+    title,
+    subtitle: metadata.subtitle ?? firstUsefulParagraph(paragraphs),
+    source: metadata.source,
+    paragraphs,
+    listItems,
+    quotes,
+    tableRows
+  };
+}
+function buildInfographicSpec(parsed, style, file2) {
+  const evidence = [...parsed.listItems, ...sentences(parsed.paragraphs.join(" "))];
+  const facts = collectFacts(evidence);
+  const timeline = collectTimeline(evidence);
+  const comparison = collectComparison(evidence, parsed.tableRows);
+  const takeaways = collectTakeaways(evidence, facts);
+  const summary = parsed.subtitle ?? takeaways[0]?.text ?? facts[0]?.text ?? "A concise visual summary of the source article.";
+  const sections = [
+    {
+      type: "hero",
+      title: parsed.title,
+      emphasis: summary,
+      items: [{ text: summary }]
+    }
+  ];
+  if (facts.length > 0) sections.push({ type: "facts", title: "Key Facts", items: facts.slice(0, 6) });
+  if (timeline.length > 1) sections.push({ type: "timeline", title: "Timeline", items: timeline.slice(0, 6) });
+  if (comparison.length > 1) sections.push({ type: "comparison", title: "Comparison", items: comparison.slice(0, 6) });
+  if (parsed.quotes.length > 0) {
+    sections.push({
+      type: "quote",
+      title: "Notable Quote",
+      emphasis: parsed.quotes[0],
+      items: parsed.quotes.slice(0, 3).map((text) => ({ text }))
+    });
+  }
+  if (takeaways.length > 0) sections.push({ type: "takeaways", title: "Takeaways", items: takeaways.slice(0, 5) });
+  return {
+    title: parsed.title,
+    subtitle: parsed.subtitle,
+    source: parsed.source,
+    style,
+    summary,
+    sections,
+    metadata: {
+      inputFile: file2,
+      generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      wordCount: parsed.paragraphs.join(" ").split(/\s+/).filter(Boolean).length
+    }
+  };
+}
+function renderInfographicMarkdown(spec) {
+  const lines = [`# ${spec.title}`, ""];
+  if (spec.subtitle) lines.push(spec.subtitle, "");
+  if (spec.source) lines.push(`Source: ${spec.source}`, "");
+  lines.push(`Style: ${spec.style}`, "", `## Summary`, "", spec.summary, "");
+  for (const section of spec.sections.filter((section2) => section2.type !== "hero")) {
+    lines.push(`## ${section.title}`, "");
+    for (const item of section.items) {
+      const prefix = item.label ? `**${item.label}:** ` : "";
+      lines.push(`- ${prefix}${item.value ? `${item.value} \u2014 ` : ""}${item.text}`);
+    }
+    lines.push("");
+  }
+  return lines.join("\n").trimEnd() + "\n";
+}
+function extractMetadata(lines) {
+  const sourceLine = lines.find((line) => line.match(/^(source|url):\s*/i));
+  const subtitleLine = lines.find((line) => line.match(/^subtitle:\s*/i));
+  return {
+    source: sourceLine?.replace(/^(source|url):\s*/i, "").trim(),
+    subtitle: subtitleLine?.replace(/^subtitle:\s*/i, "").trim()
+  };
+}
+function findTitle(lines) {
+  const heading = lines.find((line) => line.trim().match(/^#\s+\S/));
+  if (heading) return cleanMarkdown(heading.replace(/^#\s+/, ""));
+  const first = lines.find((line) => line.trim() && !line.match(/^(source|url|author|date):\s*/i));
+  return first ? cleanMarkdown(first).slice(0, 120) : void 0;
+}
+function titleFromFilename(file2) {
+  return (0, import_node_path2.basename)(file2, (0, import_node_path2.extname)(file2)).replace(/[-_]+/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+}
+function extractTableRows(lines) {
+  return lines.filter((line) => line.includes("|") && !line.match(/^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)+\|?\s*$/)).map((line) => line.split("|").map((cell) => cleanMarkdown(cell)).filter(Boolean)).filter((row) => row.length > 1);
+}
+function collectFacts(candidates) {
+  return uniqueItems(candidates.filter((text) => NUMBER_PATTERN.test(text)).map((text) => ({
+    value: text.match(NUMBER_PATTERN)?.[0],
+    text: compactText(text, 150)
+  })));
+}
+function collectTimeline(candidates) {
+  return uniqueItems(candidates.filter((text) => DATE_PATTERN.test(text)).map((text) => ({
+    label: text.match(DATE_PATTERN)?.[0],
+    text: compactText(text, 150)
+  })));
+}
+function collectComparison(candidates, tableRows) {
+  const tableItems = tableRows.slice(1).map((row) => ({
+    label: row[0],
+    text: row.slice(1).join(" \u2014 ")
+  }));
+  const textItems = candidates.filter((text) => /\b(vs\.?|versus|compared with|compared to|whereas|while)\b/i.test(text)).map((text) => ({ text: compactText(text, 160) }));
+  return uniqueItems([...tableItems, ...textItems]);
+}
+function collectTakeaways(candidates, facts) {
+  const explicit = candidates.filter((text) => /\b(key|takeaway|therefore|recommend|should|must|need to|in summary|conclusion|next)\b/i.test(text)).map((text) => ({ text: compactText(text, 160) }));
+  if (explicit.length > 0) return uniqueItems(explicit);
+  return facts.slice(0, 3).map((item) => ({ text: item.text }));
+}
+function sentences(text) {
+  return text.split(/(?<=[.!?。！？])\s+/).map(cleanMarkdown).filter((sentence) => sentence.length > 20);
+}
+function firstUsefulParagraph(paragraphs) {
+  return paragraphs.find((paragraph) => paragraph.length > 40)?.slice(0, 220);
+}
+function uniqueItems(items) {
+  const seen = /* @__PURE__ */ new Set();
+  return items.filter((item) => {
+    const key = item.text.toLowerCase();
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+function compactText(text, max) {
+  const clean = cleanMarkdown(text);
+  return clean.length > max ? `${clean.slice(0, max - 1).trim()}...` : clean;
+}
+function cleanMarkdown(value) {
+  return value.replace(/`([^`]+)`/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^#+\s*/, "").replace(/\s+/g, " ").trim();
+}
+
+// src/article-html.ts
+function renderInfographicHtml(spec) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${escapeHtml(spec.title)}</title>
+  <meta name="generator" content="Miao Vision article infographic" />
+  ${spec.source ? `<meta name="source" content="${escapeHtml(spec.source)}" />` : ""}
+  <style>${buildCss(spec.style)}</style>
+</head>
+<body>
+  <main class="mv-infographic mv-infographic-${spec.style}">
+    ${spec.sections.map(renderSection).join("\n")}
+  </main>
+  <script type="application/json" id="miao-infographic-spec">${escapeHtml(JSON.stringify(spec, null, 2))}</script>
+</body>
+</html>`;
+}
+function renderSection(section) {
+  if (section.type === "hero") return renderHero(section);
+  if (section.type === "facts") return renderFacts(section);
+  if (section.type === "timeline") return renderTimeline(section);
+  if (section.type === "comparison") return renderComparison(section);
+  if (section.type === "quote") return renderQuote(section);
+  return renderTakeaways(section);
+}
+function renderHero(section) {
+  const lead = section.emphasis ?? section.items[0]?.text ?? "";
+  return `<section class="mv-hero">
+    <p class="mv-eyebrow">Miao Vision Infographic</p>
+    <h1>${escapeHtml(section.title)}</h1>
+    <p class="mv-lead">${escapeHtml(lead)}</p>
+  </section>`;
+}
+function renderFacts(section) {
+  return `<section class="mv-section mv-facts">
+    <div class="mv-section-head"><span>01</span><h2>${escapeHtml(section.title)}</h2></div>
+    <div class="mv-fact-grid">
+      ${section.items.map((item) => `<article class="mv-fact">
+        ${item.value ? `<strong>${escapeHtml(item.value)}</strong>` : ""}
+        <p>${escapeHtml(item.text)}</p>
+      </article>`).join("\n")}
+    </div>
+  </section>`;
+}
+function renderTimeline(section) {
+  return `<section class="mv-section mv-timeline">
+    <div class="mv-section-head"><span>02</span><h2>${escapeHtml(section.title)}</h2></div>
+    <ol>
+      ${section.items.map((item) => `<li><time>${escapeHtml(item.label ?? "")}</time><p>${escapeHtml(item.text)}</p></li>`).join("\n")}
+    </ol>
+  </section>`;
+}
+function renderComparison(section) {
+  return `<section class="mv-section mv-comparison">
+    <div class="mv-section-head"><span>03</span><h2>${escapeHtml(section.title)}</h2></div>
+    <div class="mv-comparison-grid">
+      ${section.items.map((item) => `<article>
+        ${item.label ? `<h3>${escapeHtml(item.label)}</h3>` : ""}
+        <p>${escapeHtml(item.text)}</p>
+      </article>`).join("\n")}
+    </div>
+  </section>`;
+}
+function renderQuote(section) {
+  const quote = section.emphasis ?? section.items[0]?.text ?? "";
+  return `<section class="mv-section mv-quote">
+    <blockquote>${escapeHtml(quote)}</blockquote>
+  </section>`;
+}
+function renderTakeaways(section) {
+  return `<section class="mv-section mv-takeaways">
+    <div class="mv-section-head"><span>04</span><h2>${escapeHtml(section.title)}</h2></div>
+    <ul>
+      ${section.items.map((item) => `<li>${escapeHtml(item.text)}</li>`).join("\n")}
+    </ul>
+  </section>`;
+}
+function buildCss(style) {
+  const palette = style === "minimal" ? { bg: "#ffffff", ink: "#161616", muted: "#666666", card: "#ffffff", accent: "#111111", line: "#d8d8d8" } : style === "executive" ? { bg: "#f4f0e8", ink: "#18212f", muted: "#667085", card: "#ffffff", accent: "#1f5d8c", line: "#d7c9b8" } : { bg: "#f7efe2", ink: "#241b16", muted: "#75695d", card: "#fffaf2", accent: "#b64f2a", line: "#dfcdb7" };
+  return `
+    :root { color-scheme: light; --bg:${palette.bg}; --ink:${palette.ink}; --muted:${palette.muted}; --card:${palette.card}; --accent:${palette.accent}; --line:${palette.line}; }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    .mv-infographic { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 64px; }
+    .mv-hero { min-height: 42vh; display: grid; align-content: center; border-bottom: 1px solid var(--line); padding: 28px 0 44px; }
+    .mv-eyebrow { margin: 0 0 18px; color: var(--accent); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; }
+    h1 { max-width: 860px; margin: 0; font-size: 58px; line-height: 1.02; letter-spacing: 0; }
+    .mv-lead { max-width: 760px; margin: 22px 0 0; color: var(--muted); font-size: 21px; line-height: 1.55; }
+    .mv-section { padding: 34px 0; border-bottom: 1px solid var(--line); }
+    .mv-section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
+    .mv-section-head span { color: var(--accent); font-weight: 800; font-size: 12px; }
+    h2 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: 0; }
+    .mv-fact-grid, .mv-comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
+    .mv-fact, .mv-comparison article { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 18px; }
+    .mv-fact strong { display: block; color: var(--accent); font-size: 30px; line-height: 1; margin-bottom: 12px; }
+    .mv-fact p, .mv-comparison p, .mv-timeline p { margin: 0; color: var(--muted); line-height: 1.5; }
+    .mv-comparison h3 { margin: 0 0 8px; font-size: 16px; }
+    .mv-timeline ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
+    .mv-timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
+    .mv-timeline time { color: var(--accent); font-weight: 800; }
+    .mv-quote blockquote { margin: 0; max-width: 900px; color: var(--ink); font-size: 34px; line-height: 1.25; font-weight: 750; }
+    .mv-takeaways ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--muted); line-height: 1.55; }
+    @media (max-width: 720px) {
+      .mv-infographic { width: min(100% - 24px, 1120px); padding-top: 28px; }
+      h1 { font-size: 38px; }
+      .mv-lead { font-size: 18px; }
+      .mv-timeline li { grid-template-columns: 1fr; gap: 6px; }
+      .mv-quote blockquote { font-size: 25px; }
+    }
+  `;
+}
+
 // src/cli.ts
-var BOOLEAN_FLAGS = /* @__PURE__ */ new Set(["h", "help", "summary", "reliable-only"]);
+var BOOLEAN_FLAGS = /* @__PURE__ */ new Set(["h", "help", "summary", "reliable-only", "interactive", "no-interactive"]);
 async function main() {
   const args = parseArgs(process.argv.slice(2));
   if (args.command === "--help" || args.command === "-h" || args.command === "help" || !args.command) {
@@ -57010,12 +57885,16 @@ async function main() {
       printJson(runDeck(args));
       return;
     }
+    if (args.command === "article") {
+      printJson(runArticle(args));
+      return;
+    }
     if (args.command === "query") {
       printJson(runQuery(args));
       return;
     }
     printJson(agentError("UNKNOWN_COMMAND", `Unknown command: ${args.command ?? "(none)"}`, {
-      commands: ["profile", "validate", "catalog", "render", "deck", "query"]
+      commands: ["profile", "validate", "catalog", "render", "deck", "article", "query"]
     }));
     process.exitCode = 1;
   } catch (error51) {
@@ -57073,11 +57952,12 @@ function runRender(args) {
   const validation = validateReportSpec(normalized, profile, formats);
   if (isAgentError(validation)) return fail(validation);
   const themeFlag = stringFlag(args, "theme");
+  const interactive = args.flags["interactive"] === true ? true : args.flags["no-interactive"] === true ? false : void 0;
   const written = [];
   for (const format of formats) {
     if (format === "html") {
       const htmlPath = formatOutputPath(output, "html", formats.length > 1);
-      writeOutput(htmlPath, renderStaticHtml(validation.value, profile, dataset.value.rows, themeFlag));
+      writeOutput(htmlPath, renderStaticHtml(validation.value, profile, dataset.value.rows, themeFlag, { enabled: interactive }));
       written.push(htmlPath);
     } else if (format === "svg") {
       const svgPath = formatOutputPath(output, "svg", formats.length > 1);
@@ -57132,6 +58012,47 @@ function runQuery(args) {
   if (isAgentError(result)) return fail(result);
   return { ok: true, value: result };
 }
+function runArticle(args) {
+  const file2 = args.positional[0];
+  if (!file2) {
+    return fail(agentError("MISSING_INPUT", "Usage: miao-viz article <file> --output <file> [--style editorial|executive|minimal] [--format html|json|markdown]"));
+  }
+  const output = requiredFlag(args, "output");
+  if (isAgentError(output)) return fail(output);
+  const styleFlag = stringFlag(args, "style");
+  const style = parseArticleStyle(styleFlag);
+  if (!style) {
+    return fail(agentError("UNSUPPORTED_ARTICLE_STYLE", `Unsupported article style: ${styleFlag}`, {
+      supportedStyles: ["editorial", "executive", "minimal"]
+    }));
+  }
+  const formatFlag = stringFlag(args, "format");
+  const format = parseArticleFormat(formatFlag);
+  if (!format) {
+    return fail(agentError("UNSUPPORTED_ARTICLE_FORMAT", `Unsupported article output format: ${formatFlag}`, {
+      supportedFormats: ["html", "json", "markdown"]
+    }));
+  }
+  const generated = generateInfographicFromFile(file2, style);
+  if (isAgentError(generated)) return fail(generated);
+  if (format === "json") {
+    writeOutput(output, `${JSON.stringify(generated.value.spec, null, 2)}
+`);
+  } else if (format === "markdown") {
+    writeOutput(output, generated.value.markdown);
+  } else {
+    writeOutput(output, renderInfographicHtml(generated.value.spec));
+  }
+  return {
+    ok: true,
+    value: {
+      output,
+      format,
+      style,
+      sections: generated.value.spec.sections.map((section) => section.type)
+    }
+  };
+}
 function normalizeSpec(spec) {
   const parsed = singleOrReportSpecSchema.safeParse(spec);
   if (!parsed.success) {
@@ -57147,12 +58068,12 @@ function parseFormats(value) {
   }
 }
 function readSpec(file2) {
-  const text = (0, import_node_fs2.readFileSync)(file2, "utf8");
+  const text = (0, import_node_fs3.readFileSync)(file2, "utf8");
   if (file2.endsWith(".json")) return JSON.parse(text);
   return YAML.parse(text);
 }
 function readJson(file2) {
-  return JSON.parse((0, import_node_fs2.readFileSync)(file2, "utf8"));
+  return JSON.parse((0, import_node_fs3.readFileSync)(file2, "utf8"));
 }
 function readProfile(file2) {
   const parsed = readJson(file2);
@@ -57207,8 +58128,8 @@ function formatOutputPath(output, ext, multiple) {
   return output;
 }
 function writeOutput(file2, content) {
-  (0, import_node_fs2.mkdirSync)((0, import_node_path2.dirname)(file2), { recursive: true });
-  (0, import_node_fs2.writeFileSync)(file2, content, "utf8");
+  (0, import_node_fs3.mkdirSync)((0, import_node_path3.dirname)(file2), { recursive: true });
+  (0, import_node_fs3.writeFileSync)(file2, content, "utf8");
 }
 function fail(error51) {
   process.exitCode = 1;
@@ -57261,6 +58182,8 @@ Options:
   --output <file>   Output file path
   --format <fmt>    Output format: html, svg (default: html)
   --theme <name>    Theme: default, editorial, dark, minimal
+  --interactive     Force lightweight interactive runtime for HTML output
+  --no-interactive  Force static HTML output even when interaction spec exists
   --sheet <name>    Sheet name (Excel only)
   --limit <n>       Max rows to read
 `,
@@ -57275,6 +58198,19 @@ Options:
   --theme <name>    Theme: default, editorial, dark, minimal
   --sheet <name>    Sheet name (Excel only)
   --limit <n>       Max rows to read
+`,
+  article: `Usage: miao-viz article <file> --output <file> [options]
+
+Convert a local Markdown or plain-text article into a static infographic artifact.
+URL fetching is intentionally handled by the agent/skill layer; this command only reads local files.
+
+Arguments:
+  file              Path to a .md, .markdown, or .txt article file
+
+Options:
+  --output <file>   Output file path
+  --format <fmt>    Output format: html, json, markdown (default: html)
+  --style <name>    Style: editorial, executive, minimal (default: editorial)
 `,
   query: `Usage: miao-viz query <file> [options]
 
@@ -57309,6 +58245,7 @@ Commands:
   catalog   List all available chart types
   render    Render a vizspec to HTML or SVG
   deck      Render a deck spec to HTML slides
+  article   Convert a local article to an infographic artifact
 
 Run "miao-viz <command> --help" for command-specific options.
 `);