@miao-vision/cli 0.1.9 → 0.1.11

package/dist/cli.cjs

@@ -32384,7 +32384,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 readFileSync4(filename, opts) {
+      function readFileSync5(filename, opts) {
         var o = opts || {};
         o.type = "file";
         return readSync(filename, o);
@@ -32619,7 +32619,7 @@ var require_xlsx = __commonJS({
         if (ext.match(/^\.[a-z]+$/)) o.bookType = ext.slice(1);
         o.bookType = _BT[o.bookType] || o.bookType;
       }
-      function writeFileSync2(wb, filename, opts) {
+      function writeFileSync3(wb, filename, opts) {
         var o = opts || {};
         o.type = "file";
         o.file = filename;
@@ -33220,11 +33220,11 @@ var require_xlsx = __commonJS({
       if (typeof parse_xlscfb !== "undefined") XLSX3.parse_xlscfb = parse_xlscfb;
       XLSX3.parse_zip = parse_zip;
       XLSX3.read = readSync;
-      XLSX3.readFile = readFileSync4;
-      XLSX3.readFileSync = readFileSync4;
+      XLSX3.readFile = readFileSync5;
+      XLSX3.readFileSync = readFileSync5;
       XLSX3.write = writeSync;
-      XLSX3.writeFile = writeFileSync2;
-      XLSX3.writeFileSync = writeFileSync2;
+      XLSX3.writeFile = writeFileSync3;
+      XLSX3.writeFileSync = writeFileSync3;
       XLSX3.writeFileAsync = writeFileAsync;
       XLSX3.utils = utils2;
       XLSX3.writeXLSX = writeSyncXLSX;
@@ -41719,7 +41719,19 @@ var defaultTheme = {
     labelColor: "#475569"
   },
   css: `
-    :root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
+    :root {
+      color-scheme: light;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+      --mv-paper: #f8fafc;
+      --mv-surface: #ffffff;
+      --mv-border: #e2e8f0;
+      --mv-ink: #0f172a;
+      --mv-muted: #64748b;
+      --mv-soft: #475569;
+      --mv-brand: #2563eb;
+      --mv-serif: Georgia, "Times New Roman", serif;
+      --mv-mono: "SF Mono", "JetBrains Mono", Consolas, monospace;
+    }
     body { margin: 0; background: #f8fafc; color: #0f172a; }
     .miao-viz-report { max-width: 1120px; margin: 0 auto; padding: 40px 24px 56px; }
     header { margin-bottom: 28px; }
@@ -41760,6 +41772,7 @@ var editorialTheme = {
       --mv-ink: #141413;
       --mv-muted: #6b6a64;
       --mv-soft-text: #504e49;
+      --mv-soft: #504e49;
       --mv-brand: #1b365d;
       --mv-mono: "SF Mono", "JetBrains Mono", Consolas, monospace;
       --mv-serif: Charter, Georgia, "Times New Roman", serif;
@@ -41824,6 +41837,7 @@ var darkTheme = {
       --mv-ink: #e2e0d8;
       --mv-muted: #737069;
       --mv-soft-text: #a8a69f;
+      --mv-soft: #a8a69f;
       --mv-brand: #7eb8f7;
       --mv-mono: "SF Mono", "JetBrains Mono", Consolas, monospace;
       --mv-serif: Charter, Georgia, "Times New Roman", serif;
@@ -41881,7 +41895,19 @@ var minimalTheme = {
     labelColor: "#6b7280"
   },
   css: `
-    :root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
+    :root {
+      color-scheme: light;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+      --mv-paper: #ffffff;
+      --mv-surface: #ffffff;
+      --mv-border: #e5e7eb;
+      --mv-ink: #111111;
+      --mv-muted: #6b7280;
+      --mv-soft: #374151;
+      --mv-brand: #1d4ed8;
+      --mv-serif: Georgia, "Times New Roman", serif;
+      --mv-mono: "SF Mono", "JetBrains Mono", Consolas, monospace;
+    }
     body { margin: 0; background: #fff; color: #111; }
     .miao-viz-report { max-width: 960px; margin: 0 auto; padding: 48px 24px 64px; }
     header { margin-bottom: 32px; }
@@ -58128,6 +58154,42 @@ function parseAnalyzeContext(value) {
 function withSize(chart, width, height) {
   return { ...chart, style: { ...chart.style, width, height } };
 }
+function formatMetricValue(num, fmt) {
+  const hasCurrency = fmt.includes("$");
+  const hasPercent = fmt.includes("%");
+  const hasThousands = fmt.includes(",");
+  const hasSiPrefix = fmt.includes("s");
+  const precisionMatch = fmt.match(/\.(\d+)/);
+  let precision = precisionMatch ? parseInt(precisionMatch[1], 10) : void 0;
+  let value = num;
+  let suffix = "";
+  if (hasPercent) {
+    value = num < 2 ? num * 100 : num;
+    suffix = "%";
+    if (precision === void 0) precision = 1;
+  }
+  if (hasSiPrefix) {
+    const abs = Math.abs(value);
+    if (abs >= 1e9) {
+      value /= 1e9;
+      suffix = "B" + suffix;
+    } else if (abs >= 1e6) {
+      value /= 1e6;
+      suffix = "M" + suffix;
+    } else if (abs >= 1e3) {
+      value /= 1e3;
+      suffix = "K" + suffix;
+    }
+    if (precision === void 0) precision = 0;
+  }
+  if (precision === void 0 && hasThousands) precision = 0;
+  const fixed = precision !== void 0 ? value.toFixed(precision) : Math.round(value).toString();
+  const [intPart, decPart] = fixed.split(".");
+  const formattedInt = hasThousands ? intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : intPart;
+  const formatted = decPart !== void 0 ? `${formattedInt}.${decPart}` : formattedInt;
+  const prefix = hasCurrency ? "$" : "";
+  return prefix + formatted + suffix;
+}
 function resolveMetricValue(metric, rows) {
   let raw = metric.value;
   if (raw === void 0 && metric.data?.transform?.length) {
@@ -58137,10 +58199,7 @@ function resolveMetricValue(metric, rows) {
   }
   const num = Number(raw);
   if (!Number.isFinite(num)) return String(raw ?? "\u2014");
-  const fmt = metric.format ?? "";
-  if (fmt.includes("$")) return "$" + Math.round(num).toLocaleString();
-  if (fmt.includes("%")) return (num < 2 ? (num * 100).toFixed(1) : num.toFixed(1)) + "%";
-  return Math.round(num).toLocaleString();
+  return formatMetricValue(num, metric.format ?? "");
 }
 function renderEyebrow(text) {
   return `<div class="slide-eyebrow">${escapeHtml(text)}</div>`;
@@ -58166,21 +58225,22 @@ function pageFooter(index, _total, mark) {
     <div class="slide-page-num">${String(index + 1).padStart(2, "0")}</div>`;
 }
 var COVER_DECO = `<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" style="width:260px;opacity:0.9">
-  <circle cx="160" cy="160" r="140" fill="none" stroke="#e5e3d8" stroke-width="1"/>
-  <circle cx="160" cy="160" r="100" fill="none" stroke="#e5e3d8" stroke-width="1"/>
-  <circle cx="160" cy="160" r="60" fill="#eef2f7" stroke="#1b365d" stroke-width="1.2"/>
-  <path d="M160 20 A140 140 0 0 1 300 160" fill="none" stroke="#1b365d" stroke-width="2.2" stroke-linecap="round"/>
-  <path d="M300 160 A140 140 0 0 1 160 300" fill="none" stroke="#6b6a64" stroke-width="1" stroke-linecap="round"/>
-  <path d="M160 300 A140 140 0 0 1 20 160" fill="none" stroke="#6b6a64" stroke-width="1" stroke-linecap="round"/>
-  <path d="M20 160 A140 140 0 0 1 160 20" fill="none" stroke="#6b6a64" stroke-width="1" stroke-linecap="round"/>
+  <circle cx="160" cy="160" r="140" fill="none" stroke="var(--mv-border, #e5e3d8)" stroke-width="1"/>
+  <circle cx="160" cy="160" r="100" fill="none" stroke="var(--mv-border, #e5e3d8)" stroke-width="1"/>
+  <circle cx="160" cy="160" r="60" fill="var(--mv-surface, #eef2f7)" stroke="var(--mv-brand, #1b365d)" stroke-width="1.2"/>
+  <path d="M160 20 A140 140 0 0 1 300 160" fill="none" stroke="var(--mv-brand, #1b365d)" stroke-width="2.2" stroke-linecap="round"/>
+  <path d="M300 160 A140 140 0 0 1 160 300" fill="none" stroke="var(--mv-muted, #6b6a64)" stroke-width="1" stroke-linecap="round"/>
+  <path d="M160 300 A140 140 0 0 1 20 160" fill="none" stroke="var(--mv-muted, #6b6a64)" stroke-width="1" stroke-linecap="round"/>
+  <path d="M20 160 A140 140 0 0 1 160 20" fill="none" stroke="var(--mv-muted, #6b6a64)" stroke-width="1" stroke-linecap="round"/>
 </svg>`;
-function renderCoverSlide(slide, _rows, _svg, index, total) {
+function renderCoverSlide(slide, _rows, _svg, index, total, deckDescription) {
+  const subtitle = slide.claim ?? deckDescription;
   return `<div class="slide">
   <div class="slide-cover">
     <div class="slide-cover-left">
       <div class="slide-mark">miao-vision</div>
       <h1>${escapeHtml(slide.title ?? "Presentation")}</h1>
-      ${slide.claim ? `<div class="sub">${escapeHtml(slide.claim)}</div>` : ""}
+      ${subtitle ? `<div class="sub">${escapeHtml(subtitle)}</div>` : ""}
       <div class="line"></div>
       <div class="meta">${escapeHtml(slide.eyebrow ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10))}</div>
     </div>
@@ -58266,18 +58326,6 @@ function renderEndingSlide(slide, _rows, _svg, index, total) {
 
 // src/deck-renderer.ts
 var SLIDE_CSS = `
-  :root {
-    --mv-paper:   #f5f4ed;
-    --mv-surface: #faf9f5;
-    --mv-brand:   #1b365d;
-    --mv-ink:     #141413;
-    --mv-muted:   #6b6a64;
-    --mv-soft:    #504e49;
-    --mv-border:  #e5e3d8;
-    --mv-serif:   Charter, Georgia, "Times New Roman", serif;
-    --mv-mono:    "SF Mono", "JetBrains Mono", Consolas, monospace;
-    --slide-scale: 1;
-  }
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   body { font-family: var(--mv-serif); -webkit-font-smoothing: antialiased; }
 
@@ -58369,7 +58417,7 @@ var SLIDE_CSS = `
     .slide:last-child { break-after: auto; page-break-after: auto; }
     .slide-nav { display: none !important; }
   }
-  @page { size: A4 landscape; margin: 0; background: #f5f4ed; }
+  @page { size: A4 landscape; margin: 0; background: var(--mv-paper, #f5f4ed); }
 `;
 var SLIDE_JS = `
 (function() {
@@ -58421,10 +58469,14 @@ var SLIDE_JS = `
   goTo(0);
 })();
 `;
-function renderSlide(slide, rows, svgTheme, index, total) {
+function extractRootVars(css) {
+  const match = css.match(/:root\s*\{([\s\S]*?)\}/);
+  return match ? `:root {${match[1]}}` : "";
+}
+function renderSlide(slide, rows, svgTheme, index, total, deckDescription) {
   switch (slide.layout) {
     case "cover":
-      return renderCoverSlide(slide, rows, svgTheme, index, total);
+      return renderCoverSlide(slide, rows, svgTheme, index, total, deckDescription);
     case "title-only":
       return renderTitleOnlySlide(slide, rows, svgTheme, index, total);
     case "text-points":
@@ -58443,16 +58495,19 @@ function renderSlide(slide, rows, svgTheme, index, total) {
 }
 function renderDeckHtml(spec, rows, themeOverride) {
   const theme = getTheme(themeOverride ?? spec.theme ?? "editorial");
+  const themeRootVars = extractRootVars(theme.css);
   const title = spec.title ?? "Presentation";
   const total = spec.slides.length;
-  const slidesHtml = spec.slides.map((slide, i) => renderSlide(slide, rows, theme.svg, i, total)).join("\n");
+  const slidesHtml = spec.slides.map((slide, i) => renderSlide(slide, rows, theme.svg, i, total, spec.description)).join("\n");
   return `<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  ${spec.description ? `<meta name="description" content="${escapeHtml(spec.description)}" />` : ""}
   <title>${escapeHtml(title)}</title>
   <style>${SLIDE_CSS}</style>
+  ${themeRootVars ? `<style id="miao-deck-theme">${themeRootVars}</style>` : ""}
 </head>
 <body class="present-mode">
   <div class="slide-viewport">
@@ -58574,6 +58629,14 @@ function validateDeckSpecSemantics(spec) {
         hint: hintForIssue(path, "at most 4 metrics")
       });
     }
+    if (slide.charts && slide.charts.length > 1) {
+      const path = `slides[${index}].charts`;
+      errors.push({
+        path,
+        message: `${path}: A slide can include at most 1 chart.`,
+        hint: hintForIssue(path, "at most 1 chart")
+      });
+    }
     if (slide.layout === "table-full" && slide.charts?.[0] && slide.charts[0].type !== "table") {
       const path = `slides[${index}].charts[0].type`;
       errors.push({
@@ -58686,33 +58749,208 @@ function hintForIssue(path, message) {
   if (message.includes("requires at least one chart")) return `Add a chart under ${path}.`;
   if (message.includes("requires at least one metric")) return `Add one to four metrics under ${path}.`;
   if (message.includes("at most 4 metrics")) return `Reduce ${path} to four metrics or split them across multiple slides.`;
+  if (message.includes("at most 1 chart")) return `Reduce ${path} to a single chart or spread multiple charts across separate slides.`;
   if (message.includes("only accepts a table chart")) return `Change ${path} to 'table' or use a chart-focused layout.`;
   return `Check ${path} in the DeckSpec.`;
 }
 
-// src/article-infographic.ts
+// src/article-analyzer.ts
 var import_node_fs2 = require("node:fs");
 var import_node_path2 = require("node:path");
+var ACRONYM_PATTERN = /\b[A-Z]{2,}(?:s)?\b/g;
+var TECHNICAL_PATTERN = /\b(?:[A-Z][a-z]+[A-Z]\w*|[a-z]+[A-Z]\w*)\b/g;
+var NUMBERED_TERM_PATTERN = /\b[A-Za-z]+(?:\s+\d+(?:\.\d+)?){1,2}\b/g;
+function extractTermCandidates(text) {
+  const candidates = /* @__PURE__ */ new Set();
+  const lines = text.split("\n");
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith(">") || trimmed.startsWith("|") || trimmed.startsWith("#")) continue;
+    const matches = trimmed.matchAll(ACRONYM_PATTERN);
+    for (const m of matches) {
+      if (m[0].length >= 2 && !["I", "II", "III", "IV", "VI"].includes(m[0])) {
+        candidates.add(m[0]);
+      }
+    }
+    const techMatches = trimmed.matchAll(TECHNICAL_PATTERN);
+    for (const m of techMatches) {
+      if (m[0].length >= 6) candidates.add(m[0]);
+    }
+    const numberedMatches = trimmed.matchAll(NUMBERED_TERM_PATTERN);
+    for (const m of numberedMatches) {
+      if (m[0].length >= 5) candidates.add(m[0]);
+    }
+  }
+  return [...candidates].sort();
+}
+function extractHeadings(lines) {
+  return lines.map((line) => line.trim().match(/^(#{1,6})\s+(.+)/)).filter((m) => m !== null).map((m) => ({ level: m[1].length, text: m[2].replace(/[`*_]/g, "").trim() }));
+}
+function extractSections(lines) {
+  const sections = [];
+  let currentHeading = null;
+  let currentContent = [];
+  function flush() {
+    const text = currentContent.join(" ").replace(/\s+/g, " ").trim();
+    if (text) {
+      sections.push({
+        heading: currentHeading,
+        content: text,
+        wordCount: text.split(/\s+/).filter(Boolean).length
+      });
+    }
+    currentContent = [];
+  }
+  for (const line of lines) {
+    const headingMatch = line.trim().match(/^#{1,6}\s+/);
+    if (headingMatch) {
+      flush();
+      currentHeading = line.trim().replace(/^#+\s*/, "").replace(/[`*_]/g, "").trim();
+    } else {
+      const stripped = line.trim();
+      if (stripped) currentContent.push(stripped);
+    }
+  }
+  flush();
+  return sections;
+}
+function stripFrontmatter(lines) {
+  if (lines.length > 0 && lines[0].trim() === "---") {
+    const end = lines.findIndex((l, i) => i > 0 && l.trim() === "---");
+    if (end > 0) return lines.slice(end + 1);
+  }
+  return lines;
+}
+function extractMetadata(lines) {
+  const sourceLine = lines.find((line) => line.match(/^(source|url):\s*/i));
+  const titleLine = lines.find((line) => line.match(/^title:\s*/i));
+  return {
+    source: sourceLine?.replace(/^(source|url):\s*/i, "").replace(/^["\s]+|["\s]+$/g, "").trim(),
+    title: titleLine?.replace(/^title:\s*/i, "").replace(/^["\s]+|["\s]+$/g, "").trim()
+  };
+}
+function findTitle(lines, frontmatterTitle, file2) {
+  if (frontmatterTitle) return frontmatterTitle;
+  const heading = lines.find((line) => line.trim().match(/^#\s+\S/));
+  if (heading) return heading.replace(/^#\s+/, "").replace(/[`*_]/g, "").trim();
+  if (file2) {
+    return (0, import_node_path2.basename)(file2, (0, import_node_path2.extname)(file2)).replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+  return "Untitled";
+}
+function cleanMarkdown(value) {
+  return value.replace(/`([^`]+)`/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^#+\s*/, "").replace(/\s+/g, " ").trim();
+}
+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 analyzeArticle(file2) {
+  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 = raw.replace(/\r\n/g, "\n").replace(/\t/g, " ").split("\n").map((line) => line.replace(/[ \u00a0]+$/g, "")).join("\n").trim();
+  if (!normalized) {
+    return agentError("EMPTY_ARTICLE_INPUT", "Article input is empty after normalization.", { file: file2 });
+  }
+  const lines = normalized.split("\n");
+  const bodyLines = stripFrontmatter(lines);
+  const metadata = extractMetadata(lines);
+  const title = findTitle(bodyLines, metadata.title, file2);
+  const contentLines = bodyLines.filter((line) => {
+    const trimmed = line.trim();
+    return !trimmed.match(/^#\s+/) && !trimmed.match(/^(source|url|author|date|title|published|created|tags?|description):\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 tables = 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+/));
+  const headings = extractHeadings(bodyLines);
+  const sections = extractSections(bodyLines);
+  const allText = paragraphs.join(" ");
+  const wordCount = allText.split(/\s+/).filter(Boolean).length;
+  const termCandidates = extractTermCandidates(normalized);
+  return ok({
+    title,
+    source: metadata.source,
+    headings,
+    sections,
+    paragraphs,
+    listItems,
+    quotes,
+    tables,
+    metadata: {
+      inputFile: file2,
+      wordCount,
+      estimatedReadingMinutes: Math.max(1, Math.round(wordCount / 200)),
+      lineCount: lines.length
+    },
+    termCandidates
+  });
+}
+
+// src/article-infographic.ts
+var import_node_fs3 = require("node:fs");
+var import_node_path3 = require("node:path");
 var ARTICLE_STYLES = ["editorial", "executive", "minimal"];
-var ARTICLE_FORMATS = ["html", "json", "markdown"];
+var ARTICLE_FORMATS = ["html", "json", "markdown", "png", "pdf"];
 var infographicSectionItemSchema = external_exports.object({
   label: external_exports.string().optional(),
   value: external_exports.string().optional(),
   text: external_exports.string().min(1, "item.text must not be empty"),
   detail: external_exports.string().optional()
 });
+var infographicVisualSchema = external_exports.object({
+  type: external_exports.union([
+    external_exports.literal("kpi-strip"),
+    external_exports.literal("metric-bars"),
+    external_exports.literal("process-flow"),
+    external_exports.literal("concept-contrast"),
+    external_exports.literal("timeline-path"),
+    external_exports.literal("part-to-whole"),
+    external_exports.literal("before-after"),
+    external_exports.literal("tradeoff-matrix"),
+    external_exports.literal("ranked-list-chart"),
+    external_exports.literal("system-diagram"),
+    external_exports.literal("callout-diagram"),
+    external_exports.literal("icon-cluster")
+  ]),
+  data: external_exports.record(external_exports.string(), external_exports.unknown()),
+  caption: external_exports.string().optional()
+});
 var infographicSectionSchema = external_exports.object({
-  type: external_exports.enum(["hero", "facts", "timeline", "comparison", "quote", "takeaways"]),
+  type: external_exports.union([
+    external_exports.literal("hero"),
+    external_exports.literal("facts"),
+    external_exports.literal("timeline"),
+    external_exports.literal("comparison"),
+    external_exports.literal("quote"),
+    external_exports.literal("takeaways"),
+    external_exports.literal("process"),
+    external_exports.literal("pros-cons"),
+    external_exports.literal("stat-grid"),
+    external_exports.literal("risk-matrix"),
+    external_exports.literal("checklist")
+  ]),
   title: external_exports.string().min(1, "section.title must not be empty"),
   items: external_exports.array(infographicSectionItemSchema).min(1, "section.items must have at least one item"),
   emphasis: external_exports.string().optional(),
-  notes: external_exports.string().optional()
+  notes: external_exports.union([external_exports.string(), external_exports.array(external_exports.string())]).optional(),
+  visual: infographicVisualSchema.optional()
 });
 var infographicSpecSchema = external_exports.object({
   title: external_exports.string().min(1, "title must not be empty"),
   subtitle: external_exports.string().optional(),
   source: external_exports.string().optional(),
-  style: external_exports.enum(["editorial", "executive", "minimal"]).default("editorial"),
+  style: external_exports.union([external_exports.literal("editorial"), external_exports.literal("executive"), external_exports.literal("minimal")]).default("editorial"),
   summary: external_exports.string().min(1, "summary must not be empty"),
   sections: external_exports.array(infographicSectionSchema).min(1, "sections must have at least one entry"),
   metadata: external_exports.object({
@@ -58724,7 +58962,7 @@ var infographicSpecSchema = external_exports.object({
 function loadInfographicSpec(file2) {
   let raw;
   try {
-    raw = JSON.parse((0, import_node_fs2.readFileSync)(file2, "utf8"));
+    raw = JSON.parse((0, import_node_fs3.readFileSync)(file2, "utf8"));
   } catch (error51) {
     return agentError("ARTICLE_INPUT_UNREADABLE", error51 instanceof Error ? error51.message : "Spec file could not be read.", { file: file2 });
   }
@@ -58749,7 +58987,7 @@ function parseArticleFormat(value) {
   return ARTICLE_FORMATS.includes(value) ? value : void 0;
 }
 function generateInfographicFromFile(file2, style) {
-  const extension = (0, import_node_path2.extname)(file2).toLowerCase();
+  const extension = (0, import_node_path3.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"]
@@ -58757,7 +58995,7 @@ function generateInfographicFromFile(file2, style) {
   }
   let raw;
   try {
-    raw = (0, import_node_fs2.readFileSync)(file2, "utf8");
+    raw = (0, import_node_fs3.readFileSync)(file2, "utf8");
   } catch (error51) {
     return agentError("ARTICLE_INPUT_UNREADABLE", error51 instanceof Error ? error51.message : "Article input could not be read.", {
       file: file2
@@ -58776,16 +59014,17 @@ function normalizeArticleText(raw) {
 }
 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 bodyLines = stripFrontmatter2(lines);
+  const metadata = extractMetadata2(lines);
+  const title = findTitle2(bodyLines, metadata.title) ?? titleFromFilename(file2);
+  const contentLines = bodyLines.filter((line) => {
     const trimmed = line.trim();
-    return trimmed !== title && !trimmed.match(/^#\s+/) && !trimmed.match(/^(source|url|author|date):\s*/i);
+    return trimmed !== title && !trimmed.match(/^#\s+/) && !trimmed.match(/^(source|url|author|date|title|published|created|tags?|description):\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+/));
+  const quotes = contentLines.filter((line) => line.trim().startsWith(">")).map((line) => cleanMarkdown2(line.replace(/^>\s?/, ""))).filter(Boolean);
+  const listItems = contentLines.filter((line) => line.trim().match(/^[-*+]\s+/) || line.trim().match(/^\d+\.\s+/)).map((line) => cleanMarkdown2(line.replace(/^\s*(?:[-*+]|\d+\.)\s+/, ""))).filter(Boolean);
+  const tableRows = extractTableRows2(contentLines);
+  const paragraphs = contentLines.join("\n").split(/\n{2,}/).map((block) => cleanMarkdown2(block.replace(/\n/g, " "))).filter((block) => block.length > 0 && !block.startsWith("|") && !block.match(/^[-*+]\s+/));
   return {
     title,
     subtitle: metadata.subtitle ?? firstUsefulParagraph(paragraphs),
@@ -58796,12 +59035,68 @@ function parseArticle(text, file2) {
     tableRows
   };
 }
+function extractUnit(value) {
+  return value.replace(/[0-9,.\-]/g, "").replace(/[^a-zA-Z%\/\u4e00-\u9fff]/g, "").trim();
+}
+function detectSameUnit(items) {
+  const units = items.filter((f) => f.value).map((f) => extractUnit(f.value)).filter((u) => u.length > 0);
+  if (units.length < 2) return false;
+  const first = units[0];
+  return units.every((u) => u === first);
+}
+function buildFactsVisual(facts) {
+  const numeric = facts.filter((f) => f.value && /[\d]/.test(f.value));
+  if (numeric.length < 2) return void 0;
+  const rankingPattern = /\b(top|rank|#1|#2|leading|biggest|largest|highest|most|best|领先|最大|最高|排名)\b/i;
+  const pctItems = numeric.filter((f) => f.value?.includes("%"));
+  if (pctItems.length >= 2) {
+    return {
+      type: "part-to-whole",
+      data: { items: pctItems.slice(0, 6).map((f) => ({ label: f.text, value: Number.parseFloat(f.value.replace(/[^0-9.\-]/g, "")) || 0, text: f.text })) },
+      caption: "Proportional breakdown of key metrics."
+    };
+  }
+  if (numeric.some((f) => rankingPattern.test(f.text)) && numeric.length >= 3) {
+    return {
+      type: "ranked-list-chart",
+      data: { items: numeric.slice(0, 8).map((f) => ({ label: f.text, value: Number.parseFloat(f.value.replace(/[^0-9.\-]/g, "")) || 0, text: f.text })) },
+      caption: "Ranked metrics from the article."
+    };
+  }
+  const sameUnit = detectSameUnit(numeric);
+  if (sameUnit && numeric.length >= 2 && numeric.length <= 8) {
+    return {
+      type: "metric-bars",
+      data: { items: numeric.slice(0, 6).map((f) => ({ label: f.text, value: Number.parseFloat(f.value.replace(/[^0-9.\-]/g, "")) || 0, unit: extractUnit(f.value) })) },
+      caption: "Key metrics compared side by side."
+    };
+  }
+  return {
+    type: "kpi-strip",
+    data: { items: numeric.slice(0, 6).map((f) => ({ label: f.text, value: Number.parseFloat(f.value.replace(/[^0-9.\-]/g, "")) || 0, unit: extractUnit(f.value) || void 0 })) }
+  };
+}
+function buildTimelineVisual(timeline) {
+  if (timeline.length >= 2) {
+    return {
+      type: "timeline-path",
+      data: { items: timeline.slice(0, 6).map((f) => ({ label: f.label || "", text: f.text })) }
+    };
+  }
+  return void 0;
+}
+function detectProcess(listItems, evidence) {
+  const stepPattern = /\b(step|stage|phase|first|then|next|finally|步骤|阶段|首先|然后|最后)\b/i;
+  const candidates = [...listItems, ...evidence].filter((text) => stepPattern.test(text)).map((text) => ({ text: compactText(text, 150) }));
+  return uniqueItems(candidates);
+}
 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 process3 = detectProcess(parsed.listItems, evidence);
   const summary = parsed.subtitle ?? takeaways[0]?.text ?? facts[0]?.text ?? "A concise visual summary of the source article.";
   const sections = [
     {
@@ -58811,9 +59106,28 @@ function buildInfographicSpec(parsed, style, file2) {
       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 (process3.length >= 3) {
+    sections.push({
+      type: "process",
+      title: "Process",
+      items: process3.slice(0, 6),
+      visual: {
+        type: "process-flow",
+        data: { items: process3.slice(0, 6).map((item, i) => ({ label: `Step ${i + 1}`, text: item.text })) }
+      }
+    });
+  }
+  if (facts.length > 0) {
+    const v = buildFactsVisual(facts);
+    sections.push({ type: "facts", title: "Key Facts", items: facts.slice(0, 6), ...v ? { visual: v } : {} });
+  }
+  if (timeline.length > 1) {
+    const v = buildTimelineVisual(timeline);
+    sections.push({ type: "timeline", title: "Timeline", items: timeline.slice(0, 6), ...v ? { visual: v } : {} });
+  }
+  if (comparison.length > 1) {
+    sections.push({ type: "comparison", title: "Comparison", items: comparison.slice(0, 6) });
+  }
   if (parsed.quotes.length > 0) {
     sections.push({
       type: "quote",
@@ -58852,25 +59166,35 @@ function renderInfographicMarkdown(spec) {
   }
   return lines.join("\n").trimEnd() + "\n";
 }
-function extractMetadata(lines) {
+function stripFrontmatter2(lines) {
+  if (lines.length > 0 && lines[0].trim() === "---") {
+    const end = lines.findIndex((l, i) => i > 0 && l.trim() === "---");
+    if (end > 0) return lines.slice(end + 1);
+  }
+  return lines;
+}
+function extractMetadata2(lines) {
   const sourceLine = lines.find((line) => line.match(/^(source|url):\s*/i));
   const subtitleLine = lines.find((line) => line.match(/^subtitle:\s*/i));
+  const titleLine = lines.find((line) => line.match(/^title:\s*/i));
   return {
-    source: sourceLine?.replace(/^(source|url):\s*/i, "").trim(),
-    subtitle: subtitleLine?.replace(/^subtitle:\s*/i, "").trim()
+    source: sourceLine?.replace(/^(source|url):\s*/i, "").replace(/^["\s]+|["\s]+$/g, "").trim(),
+    subtitle: subtitleLine?.replace(/^subtitle:\s*/i, "").replace(/^["\s]+|["\s]+$/g, "").trim(),
+    title: titleLine?.replace(/^title:\s*/i, "").replace(/^["\s]+|["\s]+$/g, "").trim()
   };
 }
-function findTitle(lines) {
+function findTitle2(lines, frontmatterTitle) {
+  if (frontmatterTitle) return frontmatterTitle;
   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;
+  if (heading) return cleanMarkdown2(heading.replace(/^#\s+/, ""));
+  const first = lines.find((line) => line.trim() && !line.match(/^(source|url|author|date|title|published|created|tags?|description):\s*/i));
+  return first ? cleanMarkdown2(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());
+  return (0, import_node_path3.basename)(file2, (0, import_node_path3.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 extractTableRows2(lines) {
+  return lines.filter((line) => line.includes("|") && !line.match(/^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)+\|?\s*$/)).map((line) => line.split("|").map((cell) => cleanMarkdown2(cell)).filter(Boolean)).filter((row) => row.length > 1);
 }
 function collectFacts(candidates) {
   return uniqueItems(candidates.filter((text) => NUMBER_PATTERN.test(text)).map((text) => ({
@@ -58898,7 +59222,7 @@ function collectTakeaways(candidates, facts) {
   return facts.slice(0, 3).map((item) => ({ text: item.text }));
 }
 function sentences(text) {
-  return text.split(/(?<=[.!?。！？])\s+/).map(cleanMarkdown).filter((sentence) => sentence.length > 20);
+  return text.split(/(?<=[.!?。！？])\s+/).map(cleanMarkdown2).filter((sentence) => sentence.length > 20);
 }
 function firstUsefulParagraph(paragraphs) {
   return paragraphs.find((paragraph) => paragraph.length > 40)?.slice(0, 220);
@@ -58913,15 +59237,493 @@ function uniqueItems(items) {
   });
 }
 function compactText(text, max) {
-  const clean = cleanMarkdown(text);
+  const clean = cleanMarkdown2(text);
   return clean.length > max ? `${clean.slice(0, max - 1).trim()}...` : clean;
 }
-function cleanMarkdown(value) {
+function cleanMarkdown2(value) {
   return value.replace(/`([^`]+)`/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^#+\s*/, "").replace(/\s+/g, " ").trim();
 }
 
+// src/infographic-visual-primitives.ts
+function escapeHtml2(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function svgFrame2(width, height, bgColor, body) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="100%" style="background:${bgColor};display:block;max-width:100%;height:auto">
+  ${body}
+</svg>`;
+}
+function svgTextBlock(options) {
+  const {
+    x,
+    y,
+    width,
+    text,
+    fontSize,
+    lineHeight = Math.round(fontSize * 1.35),
+    fill,
+    anchor = "start",
+    fontWeight,
+    maxLines = 2,
+    opacity,
+    fontStyle
+  } = options;
+  const lines = wrapSvgText(text, width, fontSize, maxLines);
+  const attrs = [
+    `x="${x}"`,
+    `y="${y}"`,
+    `font-size="${fontSize}"`,
+    `fill="${fill}"`,
+    anchor !== "start" ? `text-anchor="${anchor}"` : "",
+    fontWeight ? `font-weight="${fontWeight}"` : "",
+    opacity !== void 0 ? `opacity="${opacity}"` : "",
+    fontStyle ? `font-style="${fontStyle}"` : ""
+  ].filter(Boolean).join(" ");
+  const tspans = lines.map(
+    (line, i) => `<tspan x="${x}" dy="${i === 0 ? 0 : lineHeight}">${escapeHtml2(line)}</tspan>`
+  ).join("");
+  return `<text ${attrs}>${tspans}</text>`;
+}
+function wrapSvgText(text, width, fontSize, maxLines) {
+  const clean = text.replace(/\s+/g, " ").trim();
+  if (!clean) return [""];
+  const maxChars = Math.max(4, Math.floor(width / (fontSize * 0.56)));
+  const words = clean.split(" ");
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    const next = current ? `${current} ${word}` : word;
+    if (next.length <= maxChars) {
+      current = next;
+      continue;
+    }
+    if (current) lines.push(current);
+    current = word.length > maxChars ? `${word.slice(0, Math.max(1, maxChars - 3))}...` : word;
+    if (lines.length === maxLines) break;
+  }
+  if (lines.length < maxLines && current) lines.push(current);
+  if (lines.length > maxLines) lines.length = maxLines;
+  const consumed = lines.join(" ").replace(/\.\.\.$/, "");
+  if (clean.length > consumed.length && lines.length > 0) {
+    const last = lines[lines.length - 1];
+    lines[lines.length - 1] = last.length > maxChars - 3 ? `${last.slice(0, Math.max(1, maxChars - 3))}...` : `${last}...`;
+  }
+  return lines;
+}
+function bar(x, y, w, h, fill, label = "") {
+  const title = label ? `<title>${escapeHtml2(label)}</title>` : "";
+  return `<rect x="${x}" y="${y}" width="${Math.max(w, 1)}" height="${h}" fill="${fill}" rx="2">${title}</rect>`;
+}
+function visualCard(title, svgContent, caption) {
+  const cap = caption ? `<p class="mv-visual-caption">${escapeHtml2(caption)}</p>` : "";
+  return `<div class="mv-visual-card">
+    <h3 class="mv-visual-label">${escapeHtml2(title)}</h3>
+    <div class="mv-visual-svg">${svgContent}</div>
+    ${cap}
+  </div>`;
+}
+function getPalette(theme) {
+  return theme.palette;
+}
+
+// src/infographic-visuals.ts
+function articleStyleToTheme(style) {
+  const map2 = { editorial: "editorial", executive: "minimal", minimal: "minimal" };
+  return getTheme(map2[style] ?? "default").svg;
+}
+function renderSectionVisual(visual, style) {
+  const theme = articleStyleToTheme(style);
+  const palette = getPalette(theme);
+  switch (visual.type) {
+    case "kpi-strip":
+      return renderKpiStrip(visual, theme, palette);
+    case "metric-bars":
+      return renderMetricBars(visual, theme, palette);
+    case "process-flow":
+      return renderProcessFlow(visual, theme, palette);
+    case "concept-contrast":
+      return renderConceptContrast(visual, theme, palette);
+    case "timeline-path":
+      return renderTimelinePath(visual, theme, palette);
+    case "part-to-whole":
+      return renderPartToWhole(visual, theme, palette);
+    case "before-after":
+      return renderBeforeAfter(visual, theme, palette);
+    case "tradeoff-matrix":
+      return renderTradeoffMatrix(visual, theme, palette);
+    case "ranked-list-chart":
+      return renderRankedListChart(visual, theme, palette);
+    case "system-diagram":
+      return renderSystemDiagram(visual, theme, palette);
+    case "callout-diagram":
+      return renderCalloutDiagram(visual, theme, palette);
+    case "icon-cluster":
+      return renderIconCluster(visual, theme, palette);
+  }
+}
+function itemLabel(item, fallback) {
+  return typeof item.label === "string" ? item.label : fallback;
+}
+function itemValue(item) {
+  const v = item.value;
+  return typeof v === "number" ? v : typeof v === "string" ? Number.parseFloat(v) || 0 : 0;
+}
+function itemText(item, fallback = "") {
+  return typeof item.text === "string" ? item.text : fallback;
+}
+function renderKpiStrip(visual, _theme, palette) {
+  const items = visual.data.items ?? [];
+  const parts = items.map((item, i) => {
+    const val = escapeHtml2(itemValue(item).toLocaleString());
+    const label = escapeHtml2(itemLabel(item, ""));
+    const unit = typeof item.unit === "string" ? ` <span class="mv-visual-unit">${escapeHtml2(item.unit)}</span>` : "";
+    const delta = typeof item.delta === "string" ? ` <span class="mv-visual-delta">${escapeHtml2(item.delta)}</span>` : "";
+    const color = palette[i % palette.length];
+    return `<div class="mv-visual-kpi" style="border-top-color:${color}">
+      <strong>${val}${unit}${delta}</strong>
+      <span>${label}</span>
+    </div>`;
+  }).join("\n");
+  return visualCard("", `<div class="mv-visual-kpi-strip">${parts}</div>`, visual.caption);
+}
+function renderMetricBars(visual, theme, palette) {
+  const items = visual.data.items ?? [];
+  const values = items.map(itemValue);
+  const max = Math.max(...values, 1);
+  const barH = 22;
+  const rowH = 50;
+  const labelW = 190;
+  const valueW = 78;
+  const barW = 300;
+  const w = labelW + barW + valueW + 24;
+  const h = items.length * rowH + 14;
+  const defs = palette.map((c, i) => `<linearGradient id="mg-${i}" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="${c}"/><stop offset="100%" stop-color="${c}" stop-opacity="0.6"/></linearGradient>`).join("");
+  const bars = items.map((item, i) => {
+    const y = 10 + i * rowH;
+    const v = values[i];
+    const bw = v / max * barW;
+    const label = itemLabel(item, "");
+    const val = escapeHtml2(v.toLocaleString());
+    const unit = typeof item.unit === "string" ? ` ${escapeHtml2(item.unit)}` : "";
+    return `${svgTextBlock({ x: 0, y: y + 13, width: labelW - 12, text: label, fontSize: 11, fill: theme.labelColor, maxLines: 2 })}
+      ${bar(labelW, y, bw, barH, `url(#mg-${i % palette.length})`, `${label}: ${val}${unit}`)}
+      <text x="${labelW + barW + valueW}" y="${y + 15}" font-size="11" fill="${theme.labelColor}" text-anchor="end">${val}${unit}</text>`;
+  }).join("\n");
+  const svg = svgFrame2(w, h, theme.background, `<defs>${defs}</defs>${bars}`);
+  return visualCard("", svg, visual.caption);
+}
+function renderProcessFlow(visual, _theme, palette) {
+  const items = visual.data.items ?? [];
+  const nodes = items.map((item, i) => {
+    const label = itemLabel(item, `Step ${i + 1}`);
+    const text = itemText(item, "");
+    const color = palette[i % palette.length];
+    return `<article class="mv-visual-process-node" style="--node-color:${color}">
+      <div class="mv-visual-process-head">
+        <span>${i + 1}</span>
+        <strong>${escapeHtml2(label)}</strong>
+      </div>
+      <p>${escapeHtml2(text)}</p>
+    </article>`;
+  }).join("\n");
+  return visualCard("", `<div class="mv-visual-process-grid">${nodes}</div>`, visual.caption);
+}
+function requireVisualCriteria(visual) {
+  const items = visual.data.items ?? [];
+  const criteria = extractCriteria(items);
+  if (criteria.length === 0) {
+    const example = { label: "Option A", text: "Description", dimension1: "value1", dimension2: "value2" };
+    throw new Error(
+      `concept-contrast visual requires at least one comparison dimension per item beyond 'label' and 'text'. Add shared keys (e.g., ${JSON.stringify(example)}) or use a different visual type.`
+    );
+  }
+  return criteria;
+}
+function renderConceptContrast(visual, theme, palette) {
+  const items = visual.data.items ?? [];
+  const criteria = requireVisualCriteria(visual);
+  const cols = items.length;
+  const colW = 240;
+  const rowH = 24;
+  const headerH = 30;
+  const rowCount = criteria.length;
+  const h = headerH + rowCount * rowH + 16;
+  const w = cols * colW + 60;
+  const headers = items.map(
+    (item, i) => `<text x="${60 + i * colW + colW / 2}" y="20" text-anchor="middle" font-size="11" font-weight="600" fill="${palette[i % palette.length]}">${escapeHtml2(itemLabel(item, `Item ${i + 1}`))}</text>`
+  ).join("\n");
+  const rows = criteria.map((criterion, ri) => {
+    const y = headerH + ri * rowH + 15;
+    const label = `<text x="0" y="${y}" font-size="10" fill="${theme.labelColor}">${escapeHtml2(criterion)}</text>`;
+    const cells = items.map((item, ci) => {
+      const val = extractValue(item, criterion);
+      const x = 60 + ci * colW + colW / 2;
+      return `<text x="${x}" y="${y}" text-anchor="middle" font-size="10" fill="${theme.axisColor}">${escapeHtml2(val)}</text>`;
+    }).join("\n");
+    return `${label}${cells}`;
+  }).join("\n");
+  const svg = svgFrame2(w, h, theme.background, headers + "\n" + rows);
+  return visualCard("", svg, visual.caption);
+}
+function extractCriteria(items) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    for (const key of Object.keys(item)) {
+      if (key !== "label" && key !== "text") keys.add(key);
+    }
+  }
+  return Array.from(keys).slice(0, 6);
+}
+function extractValue(item, key) {
+  const v = item[key];
+  if (typeof v === "string") return v;
+  if (typeof v === "number") return String(v);
+  if (v === true) return "\u2713";
+  if (v === false) return "\u2717";
+  return "";
+}
+function renderTimelinePath(visual, theme, palette) {
+  const items = visual.data.items ?? [];
+  const dotR = 6;
+  const rowH = 56;
+  const h = items.length * rowH + 30;
+  const lineX = 30;
+  let defs = `<marker id="tl-arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" fill="${theme.axisColor}"/></marker>`;
+  const nodes = items.map((item, i) => {
+    const y = 15 + i * rowH;
+    const label = escapeHtml2(itemLabel(item, ""));
+    const text = escapeHtml2(itemText(item, ""));
+    const color = palette[i % palette.length];
+    const line = i < items.length - 1 ? `<line x1="${lineX}" y1="${y + dotR * 2 + 4}" x2="${lineX}" y2="${y + rowH - 4}" stroke="${theme.axisColor}" stroke-width="1.5"/>` : "";
+    return `<g>
+      <circle cx="${lineX}" cy="${y + dotR}" r="${dotR}" fill="${color}"/>
+      ${line}
+      ${svgTextBlock({ x: lineX + 18, y: y + 4, width: 320, text: label, fontSize: 12, fontWeight: 600, fill: color, maxLines: 1 })}
+      ${svgTextBlock({ x: lineX + 18, y: y + 20, width: 340, text, fontSize: 11, fill: theme.labelColor, maxLines: 2 })}
+    </g>`;
+  }).join("\n");
+  const svg = svgFrame2(400, h, theme.background, `<defs>${defs}</defs>${nodes}`);
+  return visualCard("", svg, visual.caption);
+}
+function renderPartToWhole(visual, theme, palette) {
+  const items = visual.data.items ?? [];
+  const values = items.map(itemValue);
+  const total = values.reduce((a, b) => a + b, 0) || 1;
+  const barH = 28;
+  const gap = 8;
+  const w = 400;
+  const h = items.length * (barH + gap) + 40;
+  const bars = items.map((item, i) => {
+    const y = 20 + i * (barH + gap);
+    const pct = values[i] / total * 100;
+    const bw = pct / 100 * (w - 120);
+    const color = palette[i % palette.length];
+    const label = escapeHtml2(itemLabel(item, ""));
+    const val = escapeHtml2(pct.toFixed(1));
+    return `<g>
+      <text x="0" y="${y + 18}" font-size="11" fill="${theme.labelColor}">${label}</text>
+      ${bar(110, y, bw, barH, color, `${label}: ${val}%`)}
+      <text x="${w - 8}" y="${y + 18}" font-size="11" fill="${theme.labelColor}" text-anchor="end" font-weight="600">${val}%</text>
+    </g>`;
+  }).join("\n");
+  const svg = svgFrame2(w, h, theme.background, bars);
+  return visualCard("", svg, visual.caption);
+}
+function renderBeforeAfter(visual, theme, palette) {
+  const before = visual.data.before ?? [];
+  const after = visual.data.after ?? [];
+  const items = visual.data.items ?? (before.length > 0 ? before : []);
+  const afterItems = after.length > 0 ? after : items;
+  const rows = Math.max(items.length, afterItems.length);
+  const colW = 180;
+  const rowH = 28;
+  const h = 50 + rows * rowH;
+  const w = colW * 2 + 80;
+  const midX = colW + 40;
+  const beforeLabel = escapeHtml2(visual.data.beforeLabel ?? "Before");
+  const afterLabel = escapeHtml2(visual.data.afterLabel ?? "After");
+  const header = `<text x="${midX / 2}" y="22" text-anchor="middle" font-size="13" font-weight="700" fill="${palette[1]}">${beforeLabel}</text>
+    <text x="${midX + colW / 2}" y="22" text-anchor="middle" font-size="13" font-weight="700" fill="${palette[0]}">${afterLabel}</text>
+    <line x1="${midX - 40}" y1="30" x2="${midX + 40}" y2="30" stroke="${theme.axisColor}" stroke-width="1"/>
+    <text x="${midX}" y="42" text-anchor="middle" font-size="10" fill="${theme.axisColor}">\u2192</text>`;
+  const rowsSvg = Array.from({ length: rows }, (_, i) => {
+    const y = 48 + i * rowH;
+    const bItem = items[i];
+    const aItem = afterItems[i];
+    const bVal = bItem ? escapeHtml2(String(bItem.value ?? bItem.text ?? "")) : "";
+    const aVal = aItem ? escapeHtml2(String(aItem.value ?? aItem.text ?? "")) : "";
+    const bLabel = bItem ? escapeHtml2(itemLabel(bItem, "")) : "";
+    const aLabel = aItem ? escapeHtml2(itemLabel(aItem, "")) : "";
+    return `<text x="${midX / 2}" y="${y + 14}" text-anchor="middle" font-size="11" fill="${theme.labelColor}">${bLabel}${bVal ? ` ${bVal}` : ""}</text>
+      <text x="${midX + colW / 2}" y="${y + 14}" text-anchor="middle" font-size="11" fill="${theme.labelColor}">${aLabel}${aVal ? ` ${aVal}` : ""}</text>`;
+  }).join("\n");
+  const svg = svgFrame2(w, h, theme.background, header + "\n" + rowsSvg);
+  return visualCard("", svg, visual.caption);
+}
+function renderTradeoffMatrix(visual, theme, palette) {
+  const items = visual.data.items ?? [];
+  const cellW = 170;
+  const cellH = 70;
+  const gap = 8;
+  const w = cellW * 2 + gap + 80;
+  const h = cellH * 2 + gap + 80;
+  const xLabel = escapeHtml2(visual.data.xLabel ?? "Low \u2192 High");
+  const yLabel = escapeHtml2(visual.data.yLabel ?? "Low \u2192 High");
+  const quads = [
+    { col: 0, row: 0, color: palette[3], label: "Avoid", opacity: "0.08" },
+    { col: 1, row: 0, color: palette[1], label: "Investigate", opacity: "0.08" },
+    { col: 0, row: 1, color: palette[1], label: "Monitor", opacity: "0.08" },
+    { col: 1, row: 1, color: palette[0], label: "Priority", opacity: "0.12" }
+  ];
+  const quadrants = quads.map((q, i) => {
+    const px = 50 + q.col * (cellW + gap);
+    const py = 50 + q.row * (cellH + gap);
+    const item = items[i];
+    const text = item ? escapeHtml2(itemText(item, "")) : "";
+    const detail = item && typeof item.detail === "string" ? escapeHtml2(item.detail) : "";
+    const itemTitle = item ? escapeHtml2(itemLabel(item, q.label)) : q.label;
+    return `<g>
+      <rect x="${px}" y="${py}" width="${cellW}" height="${cellH}" rx="4" fill="${q.color}" opacity="${q.opacity}" stroke="${q.color}" stroke-width="1"/>
+      <text x="${px + cellW / 2}" y="${py + cellH / 2 - (detail ? 8 : 0)}" text-anchor="middle" font-size="12" font-weight="600" fill="${q.color}">${itemTitle}</text>
+      ${text ? `<text x="${px + cellW / 2}" y="${py + cellH / 2 + 10}" text-anchor="middle" font-size="10" fill="${theme.labelColor}">${text}</text>` : ""}
+      ${detail ? `<text x="${px + cellW / 2}" y="${py + cellH / 2 + 24}" text-anchor="middle" font-size="9" fill="${theme.labelColor}" opacity="0.7">${detail}</text>` : ""}
+    </g>`;
+  }).join("\n");
+  const axes = `<text x="50" y="38" font-size="10" fill="${theme.axisColor}">${yLabel}</text>
+    <text x="${50 + cellW + gap - 5}" y="${h - 8}" text-anchor="end" font-size="10" fill="${theme.axisColor}">${xLabel}</text>`;
+  const svg = svgFrame2(w, h, theme.background, axes + "\n" + quadrants);
+  return visualCard("", svg, visual.caption);
+}
+function renderRankedListChart(visual, _theme, palette) {
+  const items = visual.data.items ?? [];
+  const values = items.map(itemValue);
+  const max = Math.max(...values, 1);
+  const rows = items.map((item, i) => {
+    const v = values[i];
+    const pct = Math.max(v / max * 100, 1);
+    const color = palette[i % palette.length];
+    const label = itemLabel(item, "");
+    const val = escapeHtml2(v.toLocaleString());
+    const rank = i + 1;
+    return `<div class="mv-visual-ranked-row">
+      <span class="mv-visual-ranked-rank">${rank}</span>
+      <p>${escapeHtml2(label)}</p>
+      <div class="mv-visual-ranked-track"><span style="width:${pct.toFixed(2)}%;background:${color}"></span></div>
+      <strong>${val}</strong>
+    </div>`;
+  }).join("\n");
+  return visualCard("", `<div class="mv-visual-ranked">${rows}</div>`, visual.caption);
+}
+function renderSystemDiagram(visual, theme, palette) {
+  const nodes = visual.data.nodes ?? [];
+  const edges = visual.data.edges ?? [];
+  const nodeW = 120;
+  const nodeH = 40;
+  const gap = 30;
+  const pad = 30;
+  const cols = 3;
+  const rows = Math.ceil(nodes.length / cols);
+  const w = cols * (nodeW + gap) + pad;
+  const h = rows * (nodeH + gap) + pad + 30;
+  const defEdges = edges.map((edge, _i) => {
+    const from = Number(edge.from ?? 0);
+    const to = Number(edge.to ?? 1);
+    const fx = pad + from % cols * (nodeW + gap) + nodeW / 2;
+    const fy = pad + Math.floor(from / cols) * (nodeH + gap) + nodeH / 2;
+    const tx = pad + to % cols * (nodeW + gap) + nodeW / 2;
+    const ty = pad + Math.floor(to / cols) * (nodeH + gap) + nodeH / 2;
+    return `<line x1="${fx}" y1="${fy}" x2="${tx}" y2="${ty}" stroke="${theme.axisColor}" stroke-width="1.5" marker-end="url(#sd-arr)"/>`;
+  }).join("\n");
+  let defs = `<marker id="sd-arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" fill="${theme.axisColor}"/></marker>`;
+  const defNodes = nodes.map((node, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    const x = pad + col * (nodeW + gap);
+    const y = pad + row * (nodeH + gap);
+    const color = typeof node.color === "string" ? node.color : palette[i % palette.length];
+    const label = escapeHtml2(itemLabel(node, `Node ${i + 1}`));
+    const zone = typeof node.zone === "string" ? node.zone : "";
+    const zoneLabel = zone ? `<text x="${x + nodeW / 2}" y="${y - 6}" text-anchor="middle" font-size="9" fill="${theme.axisColor}" font-style="italic">${escapeHtml2(zone)}</text>` : "";
+    return `<g>
+      ${zoneLabel}
+      <rect x="${x}" y="${y}" width="${nodeW}" height="${nodeH}" rx="4" fill="${color}" opacity="0.12" stroke="${color}" stroke-width="1.5"/>
+      <text x="${x + nodeW / 2}" y="${y + nodeH / 2 + 4}" text-anchor="middle" font-size="11" font-weight="600" fill="${color}">${label}</text>
+    </g>`;
+  }).join("\n");
+  const svg = svgFrame2(w, h, theme.background, `<defs>${defs}</defs>${defEdges}
+${defNodes}`);
+  return visualCard("", svg, visual.caption);
+}
+function renderCalloutDiagram(visual, theme, palette) {
+  const items = visual.data.items ?? [];
+  const w = 400;
+  const rowH = 36;
+  const h = items.length * rowH + 30;
+  const calloutX = 20;
+  const lineX = 50;
+  const textX = 60;
+  const dotR = 4;
+  const defs = `<marker id="cd-arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" fill="${theme.axisColor}"/></marker>`;
+  const callouts = items.map((item, i) => {
+    const y = 15 + i * rowH;
+    const color = palette[i % palette.length];
+    const label = escapeHtml2(itemLabel(item, ""));
+    const text = escapeHtml2(itemText(item, ""));
+    const detail = item.detail ? escapeHtml2(String(item.detail)) : "";
+    return `<g>
+      <circle cx="${calloutX}" cy="${y + 6}" r="${dotR}" fill="${color}"/>
+      <line x1="${calloutX + dotR + 2}" y1="${y + 6}" x2="${lineX - 4}" y2="${y + 6}" stroke="${theme.axisColor}" stroke-width="1" marker-end="url(#cd-arr)"/>
+      ${svgTextBlock({ x: textX, y: y + 4, width: 320, text: label, fontSize: 12, fontWeight: 600, fill: color, maxLines: 1 })}
+      ${svgTextBlock({ x: textX, y: y + 18, width: 320, text: `${text}${detail ? ` - ${detail}` : ""}`, fontSize: 11, fill: theme.labelColor, maxLines: 2 })}
+    </g>`;
+  }).join("\n");
+  const svg = svgFrame2(w, h, theme.background, `<defs>${defs}</defs>${callouts}`);
+  return visualCard("", svg, visual.caption);
+}
+function renderIconCluster(visual, theme, palette) {
+  const items = visual.data.items ?? [];
+  const cols = 3;
+  const cellW = 110;
+  const cellH = 80;
+  const gap = 12;
+  const rows = Math.ceil(items.length / cols);
+  const w = cols * (cellW + gap) + 20;
+  const h = rows * (cellH + gap) + 20;
+  const iconR = 18;
+  const grid = items.map((item, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    const cx = 10 + col * (cellW + gap) + cellW / 2;
+    const cy = 10 + row * (cellH + gap) + 28;
+    const color = palette[i % palette.length];
+    const label = escapeHtml2(itemLabel(item, ""));
+    const text = escapeHtml2(itemText(item, ""));
+    const initial = label.charAt(0).toUpperCase();
+    return `<g>
+      <circle cx="${cx}" cy="${cy}" r="${iconR}" fill="${color}" opacity="0.15" stroke="${color}" stroke-width="1.5"/>
+      <text x="${cx}" y="${cy + 5}" text-anchor="middle" font-size="16" font-weight="700" fill="${color}">${initial}</text>
+      ${svgTextBlock({ x: cx, y: cy + iconR + 14, width: cellW - 10, text: label, fontSize: 11, fontWeight: 600, fill: color, anchor: "middle", maxLines: 1 })}
+      ${svgTextBlock({ x: cx, y: cy + iconR + 30, width: cellW - 10, text, fontSize: 10, fill: theme.labelColor, anchor: "middle", maxLines: 2 })}
+    </g>`;
+  }).join("\n");
+  const svg = svgFrame2(w, h, theme.background, grid);
+  return visualCard("", svg, visual.caption);
+}
+
 // src/article-html.ts
 function renderInfographicHtml(spec) {
+  let sectionIndex = 0;
+  const renderedSections = spec.sections.map((section) => {
+    if (section.visual) {
+      sectionIndex++;
+      return renderVisualSection(section, sectionIndex, spec.style);
+    }
+    if (section.type === "hero" || section.type === "quote") {
+      return section.type === "hero" ? renderHero(section) : renderQuote(section);
+    }
+    sectionIndex++;
+    return renderSection(section, sectionIndex);
+  }).join("\n");
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -58934,19 +59736,25 @@ function renderInfographicHtml(spec) {
 </head>
 <body>
   <main class="mv-infographic mv-infographic-${spec.style}">
-    ${spec.sections.map(renderSection).join("\n")}
+    ${renderedSections}
   </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 sectionNumber(index) {
+  return String(index).padStart(2, "0");
+}
+function renderSection(section, index) {
+  if (section.type === "facts") return renderFacts(section, index);
+  if (section.type === "timeline") return renderTimeline(section, index);
+  if (section.type === "comparison") return renderComparison(section, index);
+  if (section.type === "process") return renderProcess(section, index);
+  if (section.type === "pros-cons") return renderProsCons(section, index);
+  if (section.type === "stat-grid") return renderStatGrid(section, index);
+  if (section.type === "risk-matrix") return renderRiskMatrix(section, index);
+  if (section.type === "checklist") return renderChecklist(section, index);
+  return renderTakeaways(section, index);
 }
 function renderHero(section) {
   const lead = section.emphasis ?? section.items[0]?.text ?? "";
@@ -58956,9 +59764,9 @@ function renderHero(section) {
     <p class="mv-lead">${escapeHtml(lead)}</p>
   </section>`;
 }
-function renderFacts(section) {
+function renderFacts(section, index) {
   return `<section class="mv-section mv-facts">
-    <div class="mv-section-head"><span>01</span><h2>${escapeHtml(section.title)}</h2></div>
+    <div class="mv-section-head"><span>${sectionNumber(index)}</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>` : ""}
@@ -58967,17 +59775,17 @@ function renderFacts(section) {
     </div>
   </section>`;
 }
-function renderTimeline(section) {
+function renderTimeline(section, index) {
   return `<section class="mv-section mv-timeline">
-    <div class="mv-section-head"><span>02</span><h2>${escapeHtml(section.title)}</h2></div>
+    <div class="mv-section-head"><span>${sectionNumber(index)}</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) {
+function renderComparison(section, index) {
   return `<section class="mv-section mv-comparison">
-    <div class="mv-section-head"><span>03</span><h2>${escapeHtml(section.title)}</h2></div>
+    <div class="mv-section-head"><span>${sectionNumber(index)}</span><h2>${escapeHtml(section.title)}</h2></div>
     <div class="mv-comparison-grid">
       ${section.items.map((item) => `<article>
         ${item.label ? `<h3>${escapeHtml(item.label)}</h3>` : ""}
@@ -58992,14 +59800,95 @@ function renderQuote(section) {
     <blockquote>${escapeHtml(quote)}</blockquote>
   </section>`;
 }
-function renderTakeaways(section) {
+function renderTakeaways(section, index) {
   return `<section class="mv-section mv-takeaways">
-    <div class="mv-section-head"><span>04</span><h2>${escapeHtml(section.title)}</h2></div>
+    <div class="mv-section-head"><span>${sectionNumber(index)}</span><h2>${escapeHtml(section.title)}</h2></div>
     <ul>
       ${section.items.map((item) => `<li>${escapeHtml(item.text)}</li>`).join("\n")}
     </ul>
   </section>`;
 }
+function renderProcess(section, index) {
+  return `<section class="mv-section mv-process">
+    <div class="mv-section-head"><span>${sectionNumber(index)}</span><h2>${escapeHtml(section.title)}</h2></div>
+    <ol class="mv-process-steps">
+      ${section.items.map((item, i) => `<li>
+        <span class="mv-step-num">${i + 1}</span>
+        <div>
+          ${item.label ? `<strong>${escapeHtml(item.label)}</strong>` : ""}
+          <p>${escapeHtml(item.text)}</p>
+        </div>
+      </li>`).join("\n")}
+    </ol>
+  </section>`;
+}
+function renderProsCons(section, index) {
+  const pros = section.items.filter((item) => item.label?.toLowerCase() === "pro" || item.label?.toLowerCase() === "pros");
+  const cons = section.items.filter((item) => item.label?.toLowerCase() === "con" || item.label?.toLowerCase() === "cons");
+  const unlabeled = section.items.filter((item) => !item.label);
+  return `<section class="mv-section mv-pros-cons">
+    <div class="mv-section-head"><span>${sectionNumber(index)}</span><h2>${escapeHtml(section.title)}</h2></div>
+    <div class="mv-pros-cons-grid">
+      <div class="mv-pros-col">
+        <h3>Pros</h3>
+        <ul>${[...pros, ...unlabeled].map((item) => `<li>${escapeHtml(item.text)}</li>`).join("\n")}</ul>
+      </div>
+      <div class="mv-cons-col">
+        <h3>Cons</h3>
+        <ul>${cons.map((item) => `<li>${escapeHtml(item.text)}</li>`).join("\n")}</ul>
+        ${cons.length === 0 ? '<p class="mv-muted">No cons listed</p>' : ""}
+      </div>
+    </div>
+  </section>`;
+}
+function renderStatGrid(section, index) {
+  return `<section class="mv-section mv-stat-grid">
+    <div class="mv-section-head"><span>${sectionNumber(index)}</span><h2>${escapeHtml(section.title)}</h2></div>
+    <div class="mv-stat-grid-items">
+      ${section.items.map((item) => `<article class="mv-stat-card">
+        ${item.value ? `<strong>${escapeHtml(item.value)}</strong>` : ""}
+        <p>${escapeHtml(item.text)}</p>
+      </article>`).join("\n")}
+    </div>
+  </section>`;
+}
+function renderRiskMatrix(section, index) {
+  const quadrants = section.items.slice(0, 4);
+  return `<section class="mv-section mv-risk-matrix">
+    <div class="mv-section-head"><span>${sectionNumber(index)}</span><h2>${escapeHtml(section.title)}</h2></div>
+    <div class="mv-risk-matrix-grid">
+      <div class="mv-risk-header mv-risk-hl">Low Likelihood / High Impact</div>
+      <div class="mv-risk-header mv-risk-hh">High Likelihood / High Impact</div>
+      <div class="mv-risk-header mv-risk-ll">Low Likelihood / Low Impact</div>
+      <div class="mv-risk-header mv-risk-lh">High Likelihood / Low Impact</div>
+      ${quadrants.map((item) => `<article class="mv-risk-cell">
+        ${item.label ? `<h3>${escapeHtml(item.label)}</h3>` : ""}
+        <p>${escapeHtml(item.text)}</p>
+        ${item.detail ? `<p class="mv-risk-detail">${escapeHtml(item.detail)}</p>` : ""}
+      </article>`).join("\n")}
+    </div>
+  </section>`;
+}
+function renderChecklist(section, index) {
+  return `<section class="mv-section mv-checklist">
+    <div class="mv-section-head"><span>${sectionNumber(index)}</span><h2>${escapeHtml(section.title)}</h2></div>
+    <ul class="mv-checklist-items">
+      ${section.items.map((item) => `<li>
+        <span class="mv-check-icon">${item.label === "done" ? "&#10003;" : "&#9744;"}</span>
+        <span>${escapeHtml(item.text)}</span>
+      </li>`).join("\n")}
+    </ul>
+  </section>`;
+}
+function renderVisualSection(section, index, style) {
+  const visualHtml = renderSectionVisual(section.visual, style);
+  const notes = section.notes ? Array.isArray(section.notes) ? section.notes.map((n) => `<li>${escapeHtml(n)}</li>`).join("") : `<li>${escapeHtml(section.notes)}</li>` : "";
+  const notesBlock = notes ? `<ul class="mv-visual-notes">${notes}</ul>` : "";
+  const safeItems = section.items ?? [];
+  const items = safeItems.length > 0 ? `<div class="mv-section-head" style="margin-top:12px"><span>${sectionNumber(index)}</span><h2>${escapeHtml(section.title)}</h2></div>
+       <ul class="mv-visual-support-items">${safeItems.map((item) => `<li>${escapeHtml(item.text)}</li>`).join("\n")}</ul>` : "";
+  return `<section class="mv-section mv-visual-section">${visualHtml}${notesBlock}${items}</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 `
@@ -59017,24 +59906,183 @@ function buildCss(style) {
     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-fact strong { display: block; color: var(--accent); font-size: 30px; line-height: 1; margin-bottom: 12px; overflow-wrap: break-word; word-break: break-word; }
+    .mv-fact p, .mv-comparison p, .mv-timeline p { margin: 0; color: var(--muted); line-height: 1.5; overflow-wrap: break-word; word-break: break-word; }
+    .mv-comparison h3 { margin: 0 0 8px; font-size: 16px; overflow-wrap: break-word; word-break: break-word; }
     .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; }
+    .mv-visual-section { padding: 34px 0; border-bottom: 1px solid var(--line); }
+    .mv-visual-card { margin-bottom: 8px; }
+    .mv-visual-label { margin: 0 0 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
+    .mv-visual-svg { margin: 0 0 4px; max-width: 100%; }
+    .mv-visual-caption { margin: 4px 0 0; font-size: 12px; color: var(--muted); font-style: italic; }
+    .mv-visual-notes { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); line-height: 1.5; }
+    .mv-visual-support-items { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); line-height: 1.55; }
+    .mv-visual-kpi-strip { display: flex; gap: 14px; flex-wrap: wrap; }
+    .mv-visual-kpi { flex: 1; min-width: 140px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid; border-radius: 6px; padding: 14px 16px; }
+    .mv-visual-kpi strong { display: block; font-size: 26px; line-height: 1.1; color: var(--ink); }
+    .mv-visual-kpi span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
+    .mv-visual-unit { font-size: 14px; font-weight: 400; color: var(--muted); }
+    .mv-visual-delta { font-size: 13px; font-weight: 600; }
+    .mv-visual-process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; background: rgba(255,255,255,0.62); padding: 16px; }
+    .mv-visual-process-node { min-width: 0; border: 1px solid color-mix(in srgb, var(--node-color) 45%, var(--line)); background: color-mix(in srgb, var(--node-color) 10%, var(--card)); border-radius: 6px; padding: 14px; }
+    .mv-visual-process-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
+    .mv-visual-process-head span { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--node-color) 16%, transparent); color: var(--node-color); font-size: 12px; font-weight: 800; }
+    .mv-visual-process-head strong { min-width: 0; color: var(--node-color); font-size: 15px; line-height: 1.2; overflow-wrap: break-word; }
+    .mv-visual-process-node p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; overflow-wrap: break-word; }
+    .mv-visual-ranked { display: grid; gap: 10px; background: rgba(255,255,255,0.62); padding: 16px; }
+    .mv-visual-ranked-row { display: grid; grid-template-columns: 34px minmax(180px, 1.2fr) minmax(140px, 0.8fr) 64px; gap: 14px; align-items: center; min-width: 0; }
+    .mv-visual-ranked-rank { color: color-mix(in srgb, var(--muted) 35%, transparent); font-size: 24px; font-weight: 800; line-height: 1; }
+    .mv-visual-ranked-row p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.35; overflow-wrap: break-word; }
+    .mv-visual-ranked-track { height: 18px; background: color-mix(in srgb, var(--line) 55%, transparent); border-radius: 3px; overflow: hidden; }
+    .mv-visual-ranked-track span { display: block; height: 100%; min-width: 2px; border-radius: inherit; }
+    .mv-visual-ranked-row strong { color: var(--muted); font-size: 15px; text-align: right; }
+    .mv-process-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
+    .mv-process-steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
+    .mv-step-num { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--accent); color: #fff; border-radius: 50%; font-size: 13px; font-weight: 800; }
+    .mv-process-steps li strong { display: block; margin-bottom: 4px; font-size: 16px; }
+    .mv-process-steps li p { margin: 0; color: var(--muted); line-height: 1.5; }
+    .mv-pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
+    .mv-pros-cons-grid h3 { margin: 0 0 10px; font-size: 18px; }
+    .mv-pros-cons-grid ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); line-height: 1.55; }
+    .mv-pros-col h3 { color: #1a7d3a; }
+    .mv-cons-col h3 { color: #c42e2e; }
+    .mv-muted { color: var(--muted); font-style: italic; }
+    .mv-stat-grid-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
+    .mv-stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 20px; text-align: center; }
+    .mv-stat-card strong { display: block; color: var(--accent); font-size: 32px; line-height: 1; margin-bottom: 10px; overflow-wrap: break-word; word-break: break-word; }
+    .mv-stat-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
+    .mv-risk-matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+    .mv-risk-header { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 10px; border-radius: 4px; }
+    .mv-risk-hh { background: #fde8e8; color: #9b1c1c; }
+    .mv-risk-hl { background: #fef3cd; color: #856404; }
+    .mv-risk-lh { background: #e2f0d9; color: #2d6a2d; }
+    .mv-risk-ll { background: #e8f0fe; color: #1a56db; }
+    .mv-risk-cell { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 14px; }
+    .mv-risk-cell h3 { margin: 0 0 6px; font-size: 15px; }
+    .mv-risk-cell p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
+    .mv-risk-detail { margin-top: 8px !important; font-size: 13px !important; opacity: 0.75; }
+    .mv-checklist-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
+    .mv-checklist-items li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); line-height: 1.55; }
+    .mv-check-icon { flex-shrink: 0; width: 20px; text-align: center; color: var(--accent); font-size: 16px; }
     @media (max-width: 720px) {
       .mv-infographic { width: min(100% - 24px, 1120px); padding-top: 28px; }
-      h1 { font-size: 38px; }
+      .mv-hero { min-height: auto; padding: 24px 0 36px; }
+      h1 { font-size: 38px; word-break: break-word; }
       .mv-lead { font-size: 18px; }
       .mv-timeline li { grid-template-columns: 1fr; gap: 6px; }
-      .mv-quote blockquote { font-size: 25px; }
+      .mv-pros-cons-grid, .mv-risk-matrix-grid { grid-template-columns: 1fr; }
+      .mv-quote blockquote { font-size: 25px; word-break: break-word; }
+      .mv-section-head { align-items: flex-start; }
+      .mv-visual-svg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+      .mv-visual-svg svg { min-width: 640px; }
+      .mv-visual-process-grid, .mv-visual-ranked { padding: 10px; }
+      .mv-visual-ranked-row { grid-template-columns: 26px 1fr 44px; gap: 10px; align-items: start; }
+      .mv-visual-ranked-track { grid-column: 2 / -1; height: 12px; }
+      .mv-visual-ranked-row p { font-size: 13px; }
+      .mv-visual-ranked-rank { font-size: 18px; }
+      .mv-visual-ranked-row strong { grid-column: 3; grid-row: 1; font-size: 13px; }
     }
   `;
 }
 
+// src/article-export.ts
+var import_node_fs4 = require("node:fs");
+var import_node_fs5 = require("node:fs");
+var import_node_path4 = require("node:path");
+var import_node_os = require("node:os");
+var playwrightModule = null;
+async function loadPlaywright() {
+  if (playwrightModule) return { ok: true, value: playwrightModule };
+  for (const mod of ["playwright", "playwright-core", "@playwright/test"]) {
+    try {
+      const pw = await import(mod);
+      playwrightModule = pw;
+      return { ok: true, value: pw };
+    } catch {
+    }
+  }
+  return agentError(
+    "MISSING_PLAYWRIGHT",
+    "Playwright is required for PNG/PDF export. Install it with: npm install --save-dev @playwright/test && npx playwright install chromium",
+    { installHint: "npm install --save-dev @playwright/test && npx playwright install chromium" }
+  );
+}
+async function exportInfographicToFile(html, format, outputPath) {
+  const loaded = await loadPlaywright();
+  if (!loaded.ok) return loaded;
+  const pw = loaded.value;
+  const dir = (0, import_node_fs5.mkdtempSync)((0, import_node_path4.join)((0, import_node_os.tmpdir)(), "miao-viz-export-"));
+  const tempHtml = (0, import_node_path4.join)(dir, "source.html");
+  (0, import_node_fs4.writeFileSync)(tempHtml, html, "utf8");
+  try {
+    const browser = await pw.chromium.launch();
+    const page = await browser.newPage({ viewport: { width: 1120, height: 800 } });
+    await page.goto(`file://${tempHtml}`, { waitUntil: "networkidle" });
+    if (format === "png") {
+      await page.screenshot({ path: outputPath, fullPage: true });
+    } else {
+      await page.pdf({ path: outputPath, format: "A4", printBackground: true });
+    }
+    await browser.close();
+    return { ok: true, value: outputPath };
+  } catch (error51) {
+    return agentError(
+      "EXPORT_FAILED",
+      error51 instanceof Error ? error51.message : "Export failed for an unknown reason.",
+      { format, outputPath }
+    );
+  }
+}
+
+// src/infographic-quality.ts
+var SVG_VISUAL_TYPES = ["metric-bars", "process-flow", "concept-contrast", "timeline-path", "part-to-whole", "before-after", "tradeoff-matrix", "ranked-list-chart", "system-diagram", "callout-diagram", "icon-cluster"];
+var QUANTIFIED_VISUAL_TYPES = ["kpi-strip", "metric-bars", "part-to-whole", "ranked-list-chart"];
+function assessInfographicQuality(spec) {
+  const sections = spec.sections;
+  const visualSections = sections.filter((s) => s.visual);
+  const textOnlySections = sections.filter((s) => !s.visual && s.type !== "hero" && s.type !== "quote");
+  const visualComponentCount = visualSections.length;
+  const svgVisualCount = visualSections.filter((s) => SVG_VISUAL_TYPES.includes(s.visual.type)).length;
+  const quantifiedVisualCount = visualSections.filter((s) => QUANTIFIED_VISUAL_TYPES.includes(s.visual.type)).length;
+  const totalWords = sections.reduce((sum, s) => {
+    const itemWords = (s.items ?? []).reduce((w, i) => w + (i.text?.split(/\s+/).filter(Boolean).length ?? 0), 0);
+    return sum + itemWords;
+  }, 0);
+  const averageWordsPerSection = sections.length > 0 ? Math.round(totalWords / sections.length) : 0;
+  const warnings = [];
+  if (visualComponentCount < 4) {
+    warnings.push({ code: "low_visual_density", message: `Only ${visualComponentCount} visual components (recommended \u2265 4). Consider adding more visual sections.` });
+  }
+  if (svgVisualCount < 2) {
+    warnings.push({ code: "text_heavy_infographic", message: `Only ${svgVisualCount} SVG visuals (recommended \u2265 2). Consider converting text sections to graphic components.` });
+  }
+  if (textOnlySections.length > 3) {
+    warnings.push({ code: "text_heavy_infographic", message: `${textOnlySections.length} text-only sections exceed the recommended limit of 3.` });
+  }
+  const hasNumericClaims = sections.some(
+    (s) => (s.items ?? []).some((i) => /\d/.test(i.text ?? ""))
+  );
+  if (hasNumericClaims && quantifiedVisualCount < 1) {
+    warnings.push({ code: "numeric_claims_not_visualized", message: "Article has numeric claims but no quantified visual (kpi-strip or metric-bars)." });
+  }
+  const hasTimelineText = sections.some((s) => s.type === "timeline" && !s.visual);
+  if (hasTimelineText) {
+    warnings.push({ code: "timeline_rendered_as_text", message: "Timeline section is rendered as text list. Consider adding a timeline-path visual." });
+  }
+  const hasComparisonText = sections.some((s) => s.type === "comparison" && !s.visual);
+  if (hasComparisonText) {
+    warnings.push({ code: "comparison_rendered_as_text", message: "Comparison section is rendered as text cards. Consider adding a concept-contrast visual." });
+  }
+  if (averageWordsPerSection > 90) {
+    warnings.push({ code: "text_heavy_infographic", message: `Average ${averageWordsPerSection} words per section (recommended \u2264 90). Sections are too text-heavy.` });
+  }
+  return { visualComponentCount, svgVisualCount, textOnlySectionCount: textOnlySections.length, quantifiedVisualCount, averageWordsPerSection, warnings };
+}
+
 // src/report-block-registry.ts
 function scoreCatalogCoverage(chartTypes, ctx) {
   const allAvailable = chartTypes.every((t) => ctx.catalog.charts.includes(t));
@@ -60141,15 +61189,25 @@ Options:
   article: `Usage:
   miao-viz article <file> --output <file> [options]
   miao-viz article --spec-input <spec.json> --output <file> [options]
+  miao-viz article analyze <file> [--output <context.json>]
 
-Convert a local article into a static infographic artifact, or render a
-pre-built InfographicSpec JSON directly.
+Convert a local article into a static infographic artifact, render a
+pre-built InfographicSpec JSON directly, or analyze an article for
+LLM-driven spec generation.
+
+Subcommands:
+  analyze               Extract article structure (headings, sections,
+                        paragraphs, terms) for LLM consumption
 
 Options:
-  --output <file>         Output file path (required)
-  --format <fmt>          Output format: html, json, markdown (default: html)
+  --output <file>         Output file path (required for render, optional for analyze)
+  --format <fmt>          Output format: html, json, markdown, png, pdf (default: html)
   --style <name>          Style: editorial, executive, minimal (default: editorial; ignored with --spec-input)
   --spec-input <file>     Path to a pre-built InfographicSpec JSON file
+  --strict-visuals        Fail if visual density is below recommended thresholds
+
+Note: png and pdf export requires Playwright. Install with:
+  npm install --save-dev @playwright/test && npx playwright install chromium
 `,
   query: `Usage: miao-viz query <file> [options]
 
@@ -60195,8 +61253,8 @@ Run "miao-viz <command> --help" for command-specific options.
 var YAML3 = __toESM(require_dist(), 1);
 
 // src/cli-utils.ts
-var import_node_fs3 = require("node:fs");
-var import_node_path3 = require("node:path");
+var import_node_fs6 = require("node:fs");
+var import_node_path5 = require("node:path");
 var YAML2 = __toESM(require_dist(), 1);
 var BOOLEAN_FLAGS = /* @__PURE__ */ new Set([
   "h",
@@ -60258,8 +61316,8 @@ function formatOutputPath(output, ext, multiple) {
   return output;
 }
 function writeOutput(file2, content) {
-  (0, import_node_fs3.mkdirSync)((0, import_node_path3.dirname)(file2), { recursive: true });
-  (0, import_node_fs3.writeFileSync)(file2, content, "utf8");
+  (0, import_node_fs6.mkdirSync)((0, import_node_path5.dirname)(file2), { recursive: true });
+  (0, import_node_fs6.writeFileSync)(file2, content, "utf8");
 }
 function fail(error51) {
   process.exitCode = 1;
@@ -60270,12 +61328,12 @@ function printJson(value) {
 `);
 }
 function readSpec(file2) {
-  const text = (0, import_node_fs3.readFileSync)(file2, "utf8");
+  const text = (0, import_node_fs6.readFileSync)(file2, "utf8");
   if (file2.endsWith(".json")) return JSON.parse(text);
   return YAML2.parse(text);
 }
 function readJson(file2) {
-  return JSON.parse((0, import_node_fs3.readFileSync)(file2, "utf8"));
+  return JSON.parse((0, import_node_fs6.readFileSync)(file2, "utf8"));
 }
 function readProfile(file2) {
   const parsed = readJson(file2);
@@ -60565,7 +61623,7 @@ async function main() {
       return;
     }
     if (args.command === "article") {
-      printJson(runArticle(args));
+      printJson(await runArticle(args));
       return;
     }
     if (args.command === "query") {
@@ -60798,34 +61856,61 @@ async function runAnalyze(args) {
     printJson(result);
   }
 }
-function runArticle(args) {
+async function runArticle(args) {
+  const firstPos = args.positional[0];
+  if (firstPos === "analyze") {
+    const file3 = args.positional[1];
+    if (!file3) {
+      return fail(agentError("MISSING_INPUT", "Usage: miao-viz article analyze <file> [--output <context.json>]"));
+    }
+    const result = analyzeArticle(file3);
+    if (isAgentError(result)) return fail(result);
+    const outputPath = stringFlag(args, "output");
+    if (outputPath) {
+      writeOutput(outputPath, `${JSON.stringify({ ok: true, value: result.value }, null, 2)}
+`);
+      return { ok: true, value: { output: outputPath } };
+    }
+    return { ok: true, value: result.value };
+  }
   const specInputPath = stringFlag(args, "spec-input");
+  const strictVisuals = args.flags["strict-visuals"] === true;
   const output = requiredFlag(args, "output");
   if (isAgentError(output)) return fail(output);
   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"]
+      supportedFormats: ["html", "json", "markdown", "png", "pdf"]
     }));
   }
   if (specInputPath) {
     const loaded = loadInfographicSpec(specInputPath);
     if (isAgentError(loaded)) return fail(loaded);
     const spec = loaded.value;
+    const quality2 = assessInfographicQuality(spec);
+    if (strictVisuals && quality2.warnings.length > 0) {
+      return fail(agentError("STRICT_VISUALS_FAILED", "Visual density check failed. Fix warnings or remove --strict-visuals.", {
+        warnings: quality2.warnings
+      }));
+    }
     if (format === "json") {
       writeOutput(output, `${JSON.stringify(spec, null, 2)}
 `);
     } else if (format === "markdown") {
       writeOutput(output, renderInfographicMarkdown(spec));
+    } else if (format === "png" || format === "pdf") {
+      const html = renderInfographicHtml(spec);
+      const exported = await exportInfographicToFile(html, format, output);
+      if (isAgentError(exported)) return fail(exported);
     } else {
       writeOutput(output, renderInfographicHtml(spec));
     }
-    return { ok: true, value: { output, format, style: spec.style, sections: spec.sections.map((s) => s.type) } };
+    return { ok: true, value: { output, format, style: spec.style, sections: spec.sections.map((s) => s.type), warnings: quality2.warnings } };
   }
   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]\n       miao-viz article --spec-input <spec.json> --output <file> [--format html|json|markdown]"));
+    return fail(agentError("MISSING_INPUT", "Usage: miao-viz article <file> --output <file> [--style editorial|executive|minimal] [--format html|json|markdown|png|pdf]\n       miao-viz article --spec-input <spec.json> --output <file> [--format html|json|markdown|png|pdf]"));
   }
   const styleFlag = stringFlag(args, "style");
   const style = parseArticleStyle(styleFlag);
@@ -60841,16 +61926,27 @@ function runArticle(args) {
 `);
   } else if (format === "markdown") {
     writeOutput(output, generated.value.markdown);
+  } else if (format === "png" || format === "pdf") {
+    const html = renderInfographicHtml(generated.value.spec);
+    const exported = await exportInfographicToFile(html, format, output);
+    if (isAgentError(exported)) return fail(exported);
   } else {
     writeOutput(output, renderInfographicHtml(generated.value.spec));
   }
+  const quality = assessInfographicQuality(generated.value.spec);
+  if (strictVisuals && quality.warnings.length > 0) {
+    return fail(agentError("STRICT_VISUALS_FAILED", "Visual density check failed. Fix warnings or remove --strict-visuals.", {
+      warnings: quality.warnings
+    }));
+  }
   return {
     ok: true,
     value: {
       output,
       format,
       style,
-      sections: generated.value.spec.sections.map((section) => section.type)
+      sections: generated.value.spec.sections.map((section) => section.type),
+      warnings: quality.warnings
     }
   };
 }