yumiamd 0.1.15 → 0.1.17

package/README.md

@@ -16,6 +16,9 @@ You can run YumiaMD immediately without installing anything via `npx`:
 # Initialize a starter presentation
 npx yumiamd init my-deck
 
+# Launch instant dev server with live-reload
+npx yumiamd dev presentation.yumia.md --open
+
 # Compile presentation directly to an editable PowerPoint (.pptx)
 npx yumiamd build presentation.yumia.md --out presentation.pptx
 ```
@@ -64,6 +67,9 @@ yumia build presentation.yumia.md --format pdf --out dist/presentation.pdf
 # Compile to standalone interactive HTML5 presentation deck (.html)
 yumia build presentation.yumia.md --format html --out dist/presentation.html
 
+# Deploy presentation deck (static, GitHub Pages, or Vercel)
+yumia deploy presentation.yumia.md --provider gh-pages --out public
+
 # Watch presentation file and recompile automatically on save
 yumia watch presentation.yumia.md --format pdf
 
@@ -96,6 +102,9 @@ author: Biagio Scaglia
 
 Deterministic compilation from Markdown directly to native PowerPoint slides.
 
+:::badge text="v0.1.15" variant="primary" :::
+:::badge text="Multi-Target" variant="success" :::
+
 :::notes
 Opening slide introducing the core architectural vision.
 :::
@@ -128,14 +137,26 @@ Opening slide introducing the core architectural vision.
 
 ---
 
-# Feature Comparison
+# Native Charts & Data Visuals
+
+:::chart type="bar" title="Execution Speed" labels="Parser, Layout, PDF, PPTX" data="1200, 850, 430, 680"
+
+---
+
+# Roadmap Timeline
+
+:::timeline layout="horizontal"
+
+- [Phase 1] AST & Compiler Core
+- [Phase 2] Multi-Format Renderers
+- [Phase 3] Rich Directives & Charts
+- [Phase 4] Cloud Deployments
+  :::
+
+:::step
 
-| Feature                  | YumiaMD                          | Legacy HTML Deck Tools               |
-| :----------------------- | :------------------------------- | :----------------------------------- |
-| **Output Type**          | Native OpenXML Shapes & Text     | Flat rasterized images / screenshots |
-| **Full Editability**     | ✅ 100% Editable in PowerPoint   | ❌ Read-only image slides            |
-| **Deterministic Layout** | ✅ Pixel-exact bounding boxes    | ❌ Browser rendering variance        |
-| **AI / Agent Tooling**   | ✅ Machine-readable schema & CLI | ❌ Complex DOM scraping              |
+- 🚀 Seamless deployment via `yumia deploy`
+  :::
 ```
 
 ---
@@ -171,8 +192,10 @@ const schema = compiler.getSchema();
 
 ## ✨ Key Features
 
-- 🎯 **Native Object Principle**: Slides compiled to PowerPoint are **NOT** rasterized screenshot images. Headings, bullet points, cards, tables, and speaker notes are generated as **100% native vector PowerPoint shapes, tables & textboxes** that you can click, re-format, and edit in Microsoft PowerPoint or Google Slides.
-- 📊 **Native Tables & Multicolumn**: Full support for Markdown tables and semantic responsive multi-column layouts with customizable ratio splits (`ratios="50:50"` or `"30:70"`).
+- 🎯 **Native Object Principle**: Slides compiled to PowerPoint are **NOT** rasterized screenshot images. Headings, bullet points, cards, tables, charts, badges, and speaker notes are generated as **100% native vector PowerPoint shapes, tables & textboxes** that you can click, re-format, and edit in Microsoft PowerPoint or Google Slides.
+- 📊 **Native Charts & Diagrams**: Full support for `:::chart` (bar, line, pie, doughnut) and `:::mermaid` diagrams across HTML, PDF, and PowerPoint.
+- ⏳ **Timelines, Compare & Steps**: Rich layout directives including `:::timeline`, `:::compare`, and click-to-reveal `:::step` animations.
+- 🚀 **One-Command Cloud Deploy**: Instantly deploy decks to GitHub Pages, Vercel, or static web servers with `yumia deploy`.
 - 📐 **Deterministic Layout Engine**: Exact coordinate calculations for stack, columns, cards, and automatic overflow detection.
 - 🎨 **Semantic Design Tokens**: Built-in themes with typography scales, color palettes, and contrast-safe themes.
 - 🤖 **AI-Friendly Format**: Clean Markdown syntax designed for LLM prompts and agentic workflows, complete with `yumia schema` and `--json` CLI diagnostics.

package/dist/bin.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   runCli
-} from "./chunk-7A5BHABM.js";
+} from "./chunk-IAEXC5SG.js";
 
 // src/bin.ts
 var result = await runCli(process.argv);

package/dist/{chunk-7A5BHABM.js → chunk-IAEXC5SG.js}

@@ -81,6 +81,45 @@ function createTable(rows, headers) {
     ...headers ? { headers } : {}
   };
 }
+function createChart(chartType, labels, series, title) {
+  return {
+    type: "chart",
+    chartType,
+    labels,
+    series,
+    ...title ? { title } : {}
+  };
+}
+function createMermaid(code, chartType) {
+  return {
+    type: "mermaid",
+    code,
+    ...chartType ? { chartType } : {}
+  };
+}
+function createTimeline(items, layout = "horizontal") {
+  return {
+    type: "timeline",
+    items,
+    layout
+  };
+}
+function createCompare(left, right, leftTitle, rightTitle) {
+  return {
+    type: "compare",
+    left,
+    right,
+    ...leftTitle ? { leftTitle } : {},
+    ...rightTitle ? { rightTitle } : {}
+  };
+}
+function createBadge(text, variant) {
+  return {
+    type: "badge",
+    text,
+    ...variant ? { variant } : {}
+  };
+}
 function createGroup(elements, direction = "row", gap) {
   return {
     type: "group",
@@ -402,6 +441,32 @@ var DefaultYumiaParser = class {
           i++;
           continue;
         }
+        if (directiveHeader.startsWith("badge")) {
+          const badgeArg = directiveHeader.slice(5).trim();
+          const variantMatch = badgeArg.match(/variant=['"](.*?)['"]/);
+          const textMatch = badgeArg.match(/text=['"](.*?)['"]/);
+          const variant = variantMatch ? variantMatch[1] : void 0;
+          let text = textMatch ? textMatch[1] : badgeArg.replace(/variant=['"].*?['"]/, "").trim();
+          text = text.replace(/^['"](.*)['"]$/, "$1");
+          const el = createBadge(text, variant);
+          el.loc = {
+            start: { line: currentLineNum, column: 1 },
+            end: { line: currentLineNum, column: rawLine.length + 1 }
+          };
+          elements.push(el);
+          i++;
+          continue;
+        }
+        if (directiveHeader.startsWith("chart") && (directiveHeader.includes("data=") || directiveHeader.includes("labels="))) {
+          const el = this.parseChartDirective(directiveHeader, []);
+          el.loc = {
+            start: { line: currentLineNum, column: 1 },
+            end: { line: currentLineNum, column: rawLine.length + 1 }
+          };
+          elements.push(el);
+          i++;
+          continue;
+        }
         const [directiveName, ...args] = directiveHeader.split(" ");
         const directiveArg = args.join(" ").trim();
         const blockLines = [];
@@ -410,7 +475,9 @@ var DefaultYumiaParser = class {
         let closed = false;
         while (i < lines.length) {
           const innerLine = lines[i]?.trim() ?? "";
-          const isSingleLine = innerLine.startsWith(":::metric") || innerLine.startsWith(":::layout");
+          const isInlineClosed = innerLine.startsWith(":::") && innerLine.endsWith(":::") && innerLine.length > 5;
+          const isSeparator = innerLine === ":::vs" || innerLine.startsWith(":::vs ");
+          const isSingleLine = isInlineClosed || isSeparator || innerLine.startsWith(":::metric") || innerLine.startsWith(":::layout") || innerLine.startsWith(":::badge") && (innerLine.includes("text=") || innerLine.includes("variant=")) || innerLine.startsWith(":::chart") && innerLine.includes("data=");
           if (innerLine.startsWith(":::") && innerLine.length > 3 && !isSingleLine) {
             nestedCount++;
           } else if (innerLine === ":::") {
@@ -473,6 +540,41 @@ var DefaultYumiaParser = class {
             end: { line: baseLine + i - 1, column: 1 }
           };
           elements.push(el);
+        } else if (directiveName === "mermaid") {
+          const code = blockLines.join("\n").trim();
+          const el = createMermaid(code);
+          el.loc = {
+            start: { line: directiveStartLine, column: 1 },
+            end: { line: baseLine + i - 1, column: 1 }
+          };
+          elements.push(el);
+        } else if (directiveName === "chart") {
+          const el = this.parseChartDirective(directiveArg, blockLines);
+          el.loc = {
+            start: { line: directiveStartLine, column: 1 },
+            end: { line: baseLine + i - 1, column: 1 }
+          };
+          elements.push(el);
+        } else if (directiveName === "timeline") {
+          const el = this.parseTimelineBlock(directiveArg, blockLines);
+          el.loc = {
+            start: { line: directiveStartLine, column: 1 },
+            end: { line: baseLine + i - 1, column: 1 }
+          };
+          elements.push(el);
+        } else if (directiveName === "compare") {
+          const el = this.parseCompareBlock(directiveArg, blockLines, blockBaseLine);
+          el.loc = {
+            start: { line: directiveStartLine, column: 1 },
+            end: { line: baseLine + i - 1, column: 1 }
+          };
+          elements.push(el);
+        } else if (directiveName === "step") {
+          const { elements: stepElements } = this.parseLines(blockLines, blockBaseLine);
+          for (const sEl of stepElements) {
+            sEl.step = 1;
+            elements.push(sEl);
+          }
         }
         continue;
       }
@@ -595,7 +697,9 @@ var DefaultYumiaParser = class {
         let nestedCount = 1;
         while (i < lines.length) {
           const innerLine = lines[i]?.trim() ?? "";
-          const isSingleLine = innerLine.startsWith(":::metric") || innerLine.startsWith(":::layout");
+          const isInlineClosed = innerLine.startsWith(":::") && innerLine.endsWith(":::") && innerLine.length > 5;
+          const isSeparator = innerLine === ":::vs" || innerLine.startsWith(":::vs ");
+          const isSingleLine = isInlineClosed || isSeparator || innerLine.startsWith(":::metric") || innerLine.startsWith(":::layout") || innerLine.startsWith(":::badge") && (innerLine.includes("text=") || innerLine.includes("variant=")) || innerLine.startsWith(":::chart") && innerLine.includes("data=");
           if (innerLine.startsWith(":::") && innerLine.length > 3 && !isSingleLine) {
             nestedCount++;
           } else if (innerLine === ":::") {
@@ -621,6 +725,140 @@ var DefaultYumiaParser = class {
     }
     return columns;
   }
+  parseChartDirective(headerArg, blockLines) {
+    const typeMatch = headerArg.match(/type=['"](.*?)['"]/);
+    const titleMatch = headerArg.match(/title=['"](.*?)['"]/);
+    const labelsMatch = headerArg.match(/labels=['"](.*?)['"]/);
+    const dataMatch = headerArg.match(/data=['"](.*?)['"]/);
+    const chartType = typeMatch ? typeMatch[1] : "bar";
+    const title = titleMatch ? titleMatch[1] : void 0;
+    let labels = [];
+    const series = [];
+    if (labelsMatch && labelsMatch[1]) {
+      labels = labelsMatch[1].split(",").map((s) => s.trim()).filter(Boolean);
+    }
+    if (dataMatch && dataMatch[1]) {
+      const rawData = dataMatch[1].trim();
+      if (rawData.includes(":")) {
+        const parts = rawData.split(",").map((p) => p.trim());
+        const values = [];
+        const extractedLabels = [];
+        for (const part of parts) {
+          const [k, v] = part.split(":").map((s) => s.trim());
+          if (k && v !== void 0) {
+            extractedLabels.push(k);
+            values.push(parseFloat(v) || 0);
+          }
+        }
+        if (labels.length === 0)
+          labels = extractedLabels;
+        series.push({ name: title || "Data", values });
+      } else {
+        const values = rawData.split(",").map((v) => parseFloat(v.trim()) || 0);
+        series.push({ name: title || "Data", values });
+      }
+    }
+    for (const line of blockLines) {
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith("#"))
+        continue;
+      if (trimmed.toLowerCase().startsWith("labels:")) {
+        labels = trimmed.slice(7).split(",").map((s) => s.trim()).filter(Boolean);
+      } else if (trimmed.toLowerCase().startsWith("series:")) {
+        const seriesContent = trimmed.slice(7).trim();
+        const sMatch = seriesContent.match(/^(.*?)\s*\[(.*?)\]$/);
+        if (sMatch && sMatch[1] && sMatch[2]) {
+          const sName = sMatch[1].trim();
+          const sValues = sMatch[2].split(",").map((v) => parseFloat(v.trim()) || 0);
+          series.push({ name: sName, values: sValues });
+        }
+      } else if (trimmed.includes("|")) {
+        const parts = trimmed.split("|").map((s) => s.trim());
+        if (parts.length >= 2) {
+          const [l, valStr] = parts;
+          if (l && valStr) {
+            labels.push(l);
+            const val = parseFloat(valStr) || 0;
+            if (series.length === 0)
+              series.push({ name: "Data", values: [] });
+            series[0]?.values.push(val);
+          }
+        }
+      }
+    }
+    if (labels.length === 0) {
+      const maxLen = Math.max(0, ...series.map((s) => s.values.length));
+      labels = Array.from({ length: maxLen }, (_, i) => `Item ${i + 1}`);
+    }
+    return createChart(chartType, labels, series, title);
+  }
+  parseTimelineBlock(headerArg, blockLines) {
+    const layoutMatch = headerArg.match(/layout=['"](.*?)['"]/);
+    const layout = layoutMatch && layoutMatch[1] === "vertical" ? "vertical" : "horizontal";
+    const items = [];
+    for (const line of blockLines) {
+      const trimmed = line.trim();
+      if (!trimmed)
+        continue;
+      const bracketMatch = trimmed.match(/^[-*]?\s*\[(.*?)\]\s*(.*?)(?::\s*(.*))?$/);
+      if (bracketMatch && bracketMatch[1] && bracketMatch[2]) {
+        items.push({
+          date: bracketMatch[1].trim(),
+          title: bracketMatch[2].trim(),
+          description: bracketMatch[3] ? bracketMatch[3].trim() : void 0
+        });
+        continue;
+      }
+      if (trimmed.includes("|")) {
+        const parts = trimmed.split("|").map((s) => s.trim());
+        if (parts.length >= 2) {
+          items.push({
+            date: parts[0],
+            title: parts[1] || "",
+            description: parts[2] || void 0
+          });
+          continue;
+        }
+      }
+      items.push({
+        title: trimmed.replace(/^[-*]\s*/, "")
+      });
+    }
+    return createTimeline(items, layout);
+  }
+  parseCompareBlock(headerArg, blockLines, baseLine) {
+    const leftMatch = headerArg.match(/left=['"](.*?)['"]/);
+    const rightMatch = headerArg.match(/right=['"](.*?)['"]/);
+    const leftTitle = leftMatch ? leftMatch[1] : void 0;
+    const rightTitle = rightMatch ? rightMatch[1] : void 0;
+    let leftLines = [];
+    let rightLines = [];
+    let currentSide = "left";
+    for (const line of blockLines) {
+      const trimmed = line.trim();
+      if (trimmed === ":::vs" || trimmed === ":::right" || trimmed === "---") {
+        currentSide = "right";
+        continue;
+      }
+      if (trimmed === ":::left") {
+        currentSide = "left";
+        continue;
+      }
+      if (currentSide === "left") {
+        leftLines.push(line);
+      } else {
+        rightLines.push(line);
+      }
+    }
+    if (rightLines.length === 0 && leftLines.length > 1) {
+      const half = Math.ceil(leftLines.length / 2);
+      rightLines = leftLines.slice(half);
+      leftLines = leftLines.slice(0, half);
+    }
+    const { elements: leftElements } = this.parseLines(leftLines, baseLine);
+    const { elements: rightElements } = this.parseLines(rightLines, baseLine + leftLines.length);
+    return createCompare(leftElements, rightElements, leftTitle, rightTitle);
+  }
 };
 function parseYumia(source, options) {
   const parser = new DefaultYumiaParser();
@@ -2050,6 +2288,21 @@ var PptxRenderer = class {
       case "columns":
         this.renderColumns(pptxSlide, pptx, node, scaleX, scaleY, theme);
         break;
+      case "badge":
+        this.renderBadge(pptxSlide, pptx, element, rect, theme);
+        break;
+      case "chart":
+        this.renderChart(pptxSlide, pptx, element, rect, theme);
+        break;
+      case "timeline":
+        this.renderTimeline(pptxSlide, pptx, element, rect, theme);
+        break;
+      case "compare":
+        this.renderCompare(pptxSlide, pptx, node, scaleX, scaleY, theme);
+        break;
+      case "mermaid":
+        this.renderMermaid(pptxSlide, pptx, element, rect, theme);
+        break;
       default:
         break;
     }
@@ -2358,6 +2611,216 @@ var PptxRenderer = class {
       valign: "middle"
     });
   }
+  renderBadge(pptxSlide, pptx, badge, rect, theme) {
+    const colorKey = badge.variant || "primary";
+    const badgeColor = this.cleanHexColor(theme.colors[colorKey] || theme.colors.primary);
+    const badgeW = Math.min(2.5, Math.max(1, badge.text.length * 0.12 + 0.4));
+    const badgeH = Math.min(0.38, rect.h);
+    pptxSlide.addShape(pptx.ShapeType.roundRect, {
+      x: rect.x,
+      y: rect.y,
+      w: badgeW,
+      h: badgeH,
+      fill: { color: this.cleanHexColor(theme.colors.surface) },
+      line: { color: badgeColor, width: 1.5 },
+      rectRadius: 0.15
+    });
+    pptxSlide.addText(badge.text.toUpperCase(), {
+      x: rect.x,
+      y: rect.y,
+      w: badgeW,
+      h: badgeH,
+      fontSize: 10,
+      bold: true,
+      color: badgeColor,
+      fontFace: cleanFontFace(theme.typography.headingFont),
+      align: "center",
+      valign: "middle"
+    });
+  }
+  renderChart(pptxSlide, pptx, chart, rect, theme) {
+    const series = chart.series || [];
+    const labels = chart.labels || [];
+    const chartData = series.map((s) => ({
+      name: s.name || "Data",
+      labels,
+      values: s.values
+    }));
+    let pptxChartType = pptx.ChartType.bar;
+    if (chart.chartType === "line")
+      pptxChartType = pptx.ChartType.line;
+    if (chart.chartType === "pie")
+      pptxChartType = pptx.ChartType.pie;
+    if (chart.chartType === "doughnut")
+      pptxChartType = pptx.ChartType.doughnut;
+    const chartColors = [
+      this.cleanHexColor(theme.colors.primary),
+      this.cleanHexColor(theme.colors.accent),
+      this.cleanHexColor(theme.colors.secondary),
+      this.cleanHexColor(theme.colors.success),
+      this.cleanHexColor(theme.colors.warning)
+    ];
+    try {
+      pptxSlide.addChart(pptxChartType, chartData, {
+        x: rect.x,
+        y: rect.y,
+        w: rect.w,
+        h: rect.h,
+        showTitle: Boolean(chart.title),
+        title: chart.title || "",
+        titleColor: this.cleanHexColor(theme.colors.text),
+        titleFontFace: cleanFontFace(theme.typography.headingFont),
+        showLegend: true,
+        legendPos: "b",
+        legendColor: this.cleanHexColor(theme.colors.muted || theme.colors.text),
+        chartColors
+      });
+    } catch {
+      pptxSlide.addShape(pptx.ShapeType.roundRect, {
+        x: rect.x,
+        y: rect.y,
+        w: rect.w,
+        h: rect.h,
+        fill: { color: this.cleanHexColor(theme.colors.surface) },
+        line: { color: this.cleanHexColor(theme.colors.border), width: 1 }
+      });
+      pptxSlide.addText(`[Chart: ${chart.title || chart.chartType}]`, {
+        x: rect.x,
+        y: rect.y,
+        w: rect.w,
+        h: rect.h,
+        color: this.cleanHexColor(theme.colors.primary),
+        align: "center",
+        valign: "middle"
+      });
+    }
+  }
+  renderTimeline(pptxSlide, pptx, timeline, rect, theme) {
+    const items = timeline.items || [];
+    if (items.length === 0)
+      return;
+    const itemW = rect.w / items.length;
+    const lineY = rect.y + 0.25;
+    pptxSlide.addShape(pptx.ShapeType.rect, {
+      x: rect.x + 0.2,
+      y: lineY,
+      w: rect.w - 0.4,
+      h: 0.03,
+      fill: { color: this.cleanHexColor(theme.colors.border) }
+    });
+    items.forEach((item, idx) => {
+      const itemX = rect.x + idx * itemW;
+      const dotX = itemX + itemW / 2 - 0.1;
+      pptxSlide.addShape(pptx.ShapeType.roundRect, {
+        x: dotX,
+        y: lineY - 0.08,
+        w: 0.2,
+        h: 0.2,
+        fill: { color: this.cleanHexColor(theme.colors.primary) },
+        line: { color: this.cleanHexColor(theme.colors.background), width: 2 },
+        rectRadius: 0.1
+      });
+      if (item.date) {
+        pptxSlide.addText(item.date, {
+          x: itemX,
+          y: lineY + 0.18,
+          w: itemW,
+          h: 0.25,
+          fontSize: 11,
+          bold: true,
+          color: this.cleanHexColor(theme.colors.accent || theme.colors.primary),
+          fontFace: cleanFontFace(theme.typography.codeFont),
+          align: "center"
+        });
+      }
+      const descText = item.description ? `
+${item.description}` : "";
+      pptxSlide.addText(`${item.title}${descText}`, {
+        x: itemX + 0.05,
+        y: lineY + 0.45,
+        w: itemW - 0.1,
+        h: rect.h - 0.55,
+        fontSize: 12,
+        color: this.cleanHexColor(theme.colors.text),
+        fontFace: cleanFontFace(theme.typography.bodyFont),
+        align: "center",
+        valign: "top"
+      });
+    });
+  }
+  renderCompare(pptxSlide, pptx, node, scaleX, scaleY, theme) {
+    const { element, bounds } = node;
+    const compare = element;
+    const rect = this.toInches(bounds, scaleX, scaleY);
+    const colW = (rect.w - 0.4) / 2;
+    pptxSlide.addShape(pptx.ShapeType.roundRect, {
+      x: rect.x,
+      y: rect.y,
+      w: colW,
+      h: rect.h,
+      fill: { color: this.cleanHexColor(theme.colors.surface) },
+      line: { color: this.cleanHexColor(theme.colors.border), width: 1 },
+      rectRadius: 0.1
+    });
+    if (compare.leftTitle) {
+      pptxSlide.addText(compare.leftTitle, {
+        x: rect.x + 0.15,
+        y: rect.y + 0.15,
+        w: colW - 0.3,
+        h: 0.4,
+        fontSize: 14,
+        bold: true,
+        color: this.cleanHexColor(theme.colors.primary),
+        fontFace: cleanFontFace(theme.typography.headingFont)
+      });
+    }
+    const rightX = rect.x + colW + 0.4;
+    pptxSlide.addShape(pptx.ShapeType.roundRect, {
+      x: rightX,
+      y: rect.y,
+      w: colW,
+      h: rect.h,
+      fill: { color: this.cleanHexColor(theme.colors.surface) },
+      line: { color: this.cleanHexColor(theme.colors.border), width: 1 },
+      rectRadius: 0.1
+    });
+    if (compare.rightTitle) {
+      pptxSlide.addText(compare.rightTitle, {
+        x: rightX + 0.15,
+        y: rect.y + 0.15,
+        w: colW - 0.3,
+        h: 0.4,
+        fontSize: 14,
+        bold: true,
+        color: this.cleanHexColor(theme.colors.primary),
+        fontFace: cleanFontFace(theme.typography.headingFont)
+      });
+    }
+  }
+  renderMermaid(pptxSlide, pptx, mermaid, rect, theme) {
+    pptxSlide.addShape(pptx.ShapeType.roundRect, {
+      x: rect.x,
+      y: rect.y,
+      w: rect.w,
+      h: rect.h,
+      fill: { color: this.cleanHexColor(theme.colors.surface) },
+      line: { color: this.cleanHexColor(theme.colors.primary), width: 1 },
+      rectRadius: 0.1
+    });
+    pptxSlide.addText(`[Diagram: Mermaid]
+
+${mermaid.code}`, {
+      x: rect.x + 0.2,
+      y: rect.y + 0.2,
+      w: rect.w - 0.4,
+      h: rect.h - 0.4,
+      fontSize: 12,
+      color: this.cleanHexColor(theme.colors.text),
+      fontFace: cleanFontFace(theme.typography.codeFont),
+      align: "center",
+      valign: "middle"
+    });
+  }
   toInches(bounds, scaleX, scaleY) {
     return {
       x: Math.max(0, bounds.x * scaleX),
@@ -2460,7 +2923,43 @@ var HtmlRenderer = class {
   <title>${this.escapeHtml(title)}</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet">
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+    try {
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: 'dark',
+        securityLevel: 'loose',
+        themeVariables: {
+          darkMode: true,
+          background: '${theme.colors.background}',
+          primaryColor: '${theme.colors.primary}',
+          primaryTextColor: '#ffffff',
+          primaryBorderColor: '${theme.colors.primary}',
+          lineColor: '${theme.colors.accent || theme.colors.primary}',
+          secondaryColor: '${theme.colors.surface}',
+          tertiaryColor: '${theme.colors.surface}'
+        }
+      });
+      window.mermaid = mermaid;
+      window.renderMermaidInSlide = async function(slideEl) {
+        if (!slideEl || !window.mermaid) return;
+        const nodes = Array.from(slideEl.querySelectorAll('.mermaid:not([data-processed="true"])'));
+        if (nodes.length > 0) {
+          try {
+            await window.mermaid.run({ nodes: nodes });
+          } catch (e) {
+            console.warn('Mermaid render notice:', e);
+          }
+        }
+      };
+      // Auto-render visible slide if present
+      const cur = document.querySelector('.yumia-slide-wrapper.active');
+      if (cur) window.renderMermaidInSlide(cur);
+    } catch (err) {
+      console.warn('Mermaid load notice:', err);
+    }
+  </script>
   <style>
     :root {
       --yumia-bg: ${theme.colors.background};
@@ -2843,6 +3342,194 @@ var HtmlRenderer = class {
       transition: width 0.25s ease;
     }
 
+    /* Badge Directive */
+    .yumia-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 3px 10px;
+      border-radius: 999px;
+      font-size: 0.8rem;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--yumia-text);
+      border: 1px solid var(--yumia-border);
+      margin-bottom: 0.5rem;
+    }
+    .yumia-badge.variant-primary { background: rgba(0, 240, 255, 0.15); color: var(--yumia-primary); border-color: var(--yumia-primary); }
+    .yumia-badge.variant-success { background: rgba(16, 185, 129, 0.15); color: var(--yumia-success); border-color: var(--yumia-success); }
+    .yumia-badge.variant-warning { background: rgba(245, 158, 11, 0.15); color: var(--yumia-warning); border-color: var(--yumia-warning); }
+    .yumia-badge.variant-danger { background: rgba(239, 68, 68, 0.15); color: var(--yumia-danger); border-color: var(--yumia-danger); }
+    .yumia-badge.variant-info { background: rgba(59, 130, 246, 0.15); color: var(--yumia-info); border-color: var(--yumia-info); }
+    .yumia-badge.variant-accent { background: rgba(255, 46, 136, 0.15); color: var(--yumia-accent); border-color: var(--yumia-accent); }
+
+    /* Timeline Directive */
+    .yumia-timeline {
+      display: flex;
+      gap: 16px;
+      margin: 1.2rem 0;
+      width: 100%;
+    }
+    .yumia-timeline.layout-horizontal {
+      flex-direction: row;
+      justify-content: space-between;
+      position: relative;
+    }
+    .yumia-timeline.layout-horizontal::before {
+      content: '';
+      position: absolute;
+      top: 18px;
+      left: 20px;
+      right: 20px;
+      height: 2px;
+      background: var(--yumia-border);
+      z-index: 0;
+    }
+    .yumia-timeline-item {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      flex: 1;
+    }
+    .yumia-timeline-dot {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: var(--yumia-primary);
+      border: 3px solid var(--yumia-bg);
+      box-shadow: 0 0 10px var(--yumia-primary);
+      margin-bottom: 10px;
+    }
+    .yumia-timeline-date {
+      font-size: 0.85rem;
+      font-weight: 700;
+      color: var(--yumia-accent);
+      margin-bottom: 4px;
+      font-family: var(--yumia-font-code);
+    }
+    .yumia-timeline-title {
+      font-size: 1.05rem;
+      font-weight: 600;
+      color: var(--yumia-text);
+      margin-bottom: 4px;
+    }
+    .yumia-timeline-desc {
+      font-size: 0.85rem;
+      color: var(--yumia-muted);
+      line-height: 1.4;
+    }
+
+    /* Compare Directive */
+    .yumia-compare {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      gap: 20px;
+      align-items: stretch;
+      margin: 1.2rem 0;
+    }
+    .yumia-compare-col {
+      background: var(--yumia-surface);
+      border: 1px solid var(--yumia-border);
+      border-radius: var(--yumia-radius-card);
+      padding: 1.5rem;
+      display: flex;
+      flex-direction: column;
+    }
+    .yumia-compare-title {
+      font-size: 1.2rem;
+      font-weight: 700;
+      color: var(--yumia-primary);
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid var(--yumia-divider);
+    }
+    .yumia-compare-divider {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 800;
+      font-size: 0.9rem;
+      color: var(--yumia-muted);
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 50%;
+      width: 36px;
+      height: 36px;
+      align-self: center;
+      border: 1px solid var(--yumia-border);
+    }
+
+    /* Native SVG Chart Container */
+    .yumia-chart-container {
+      background: var(--yumia-surface);
+      border: 1px solid var(--yumia-border);
+      border-radius: var(--yumia-radius-card);
+      padding: 1.25rem;
+      margin: 1rem 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+    }
+    .yumia-chart-title {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--yumia-text);
+      margin-bottom: 0.75rem;
+      align-self: flex-start;
+    }
+
+    /* Mermaid Container */
+    .mermaid-container {
+      background: rgba(10, 10, 18, 0.6);
+      border: 1.5px solid var(--yumia-border);
+      border-radius: var(--yumia-radius-card);
+      padding: 1.5rem;
+      margin: 1rem 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: auto;
+      width: 100%;
+      min-height: 240px;
+    }
+
+    .mermaid-container pre.mermaid,
+    .mermaid-container .mermaid {
+      background: transparent !important;
+      border: none !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      font-size: 1rem;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+
+    .mermaid-container svg {
+      max-width: 100%;
+      height: auto;
+      max-height: 420px;
+    }
+
+    /* Progressive Reveal (Step Builds) */
+    .yumia-slide-wrapper [data-step] {
+      transition: opacity 0.25s ease, transform 0.25s ease;
+    }
+    .yumia-slide-wrapper:not(.step-active) [data-step] {
+      opacity: 0.2;
+      transform: translateY(4px);
+    }
+    .yumia-slide-wrapper.step-active [data-step] {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
     /* Notes Drawer */
     .yumia-notes-drawer {
       position: fixed;
@@ -3154,6 +3841,12 @@ var HtmlRenderer = class {
         if (broadcast && syncChannel) {
           syncChannel.postMessage({ index: currentIdx });
         }
+
+        setTimeout(() => {
+          if (window.renderMermaidInSlide && slides[currentIdx]) {
+            window.renderMermaidInSlide(slides[currentIdx]);
+          }
+        }, 50);
       }
 
       function openSpeakerWindow() {
@@ -3258,6 +3951,13 @@ var HtmlRenderer = class {
             const rawNotes = slides[currentIdx].getAttribute('data-notes');
             notesBox.innerHTML = rawNotes ? rawNotes : '<em style="color:var(--yumia-muted);">No notes provided for this slide.</em>';
           }
+
+          setTimeout(() => {
+            if (window.renderMermaidInSlide) {
+              if (curBox) window.renderMermaidInSlide(curBox);
+              if (nextBox) window.renderMermaidInSlide(nextBox);
+            }
+          }, 50);
         }
 
         window.addEventListener('keydown', (e) => {
@@ -3467,10 +4167,174 @@ var HtmlRenderer = class {
         }).join("\n");
         return `<div class="yumia-columns" style="grid-template-columns: ${ratioTemplate};">${colsHtml}</div>`;
       }
+      case "badge": {
+        return this.renderBadge(element);
+      }
+      case "mermaid": {
+        const m = element;
+        return `
+        <div class="mermaid-container">
+          <pre class="mermaid">${this.escapeHtml(m.code)}</pre>
+        </div>`;
+      }
+      case "chart": {
+        return this.renderChart(element, theme);
+      }
+      case "timeline": {
+        return this.renderTimeline(element);
+      }
+      case "compare": {
+        return this.renderCompare(element, theme);
+      }
       default:
         return "";
     }
   }
+  renderBadge(b) {
+    const variant = b.variant || "default";
+    return `<span class="yumia-badge variant-${variant}">${this.escapeHtml(b.text)}</span>`;
+  }
+  renderTimeline(t) {
+    const layout = t.layout || "horizontal";
+    const itemsHtml = t.items.map((item) => {
+      const dateHtml = item.date ? `<div class="yumia-timeline-date">${this.escapeHtml(item.date)}</div>` : "";
+      const descHtml = item.description ? `<div class="yumia-timeline-desc">${this.formatInline(item.description)}</div>` : "";
+      return `
+        <div class="yumia-timeline-item">
+          <div class="yumia-timeline-dot"></div>
+          ${dateHtml}
+          <div class="yumia-timeline-title">${this.formatInline(item.title)}</div>
+          ${descHtml}
+        </div>`;
+    }).join("\n");
+    return `<div class="yumia-timeline layout-${layout}">${itemsHtml}</div>`;
+  }
+  renderCompare(c, theme) {
+    const leftTitle = c.leftTitle ? `<div class="yumia-compare-title">${this.escapeHtml(c.leftTitle)}</div>` : "";
+    const rightTitle = c.rightTitle ? `<div class="yumia-compare-title">${this.escapeHtml(c.rightTitle)}</div>` : "";
+    const leftInner = c.left.map((el) => this.renderElement(el, theme)).join("\n");
+    const rightInner = c.right.map((el) => this.renderElement(el, theme)).join("\n");
+    return `
+    <div class="yumia-compare">
+      <div class="yumia-compare-col left">
+        ${leftTitle}
+        ${leftInner}
+      </div>
+      <div class="yumia-compare-divider">VS</div>
+      <div class="yumia-compare-col right">
+        ${rightTitle}
+        ${rightInner}
+      </div>
+    </div>`;
+  }
+  renderChart(c, theme) {
+    const titleHtml = c.title ? `<div class="yumia-chart-title">${this.escapeHtml(c.title)}</div>` : "";
+    const labels = c.labels || [];
+    const series = c.series || [];
+    const colors = [
+      theme.colors.primary || "#00F0FF",
+      theme.colors.accent || "#FF2E88",
+      theme.colors.secondary || "#7B2CBF",
+      theme.colors.success || "#10B981",
+      theme.colors.warning || "#F59E0B"
+    ];
+    if (c.chartType === "line") {
+      const allValues = series.flatMap((s) => s.values);
+      const maxVal2 = Math.max(...allValues, 1);
+      const width2 = 500;
+      const height2 = 180;
+      const padding2 = 35;
+      const plotW2 = width2 - padding2 * 2;
+      const plotH2 = height2 - padding2 * 2;
+      let pathsHtml = "";
+      series.forEach((s, sIdx) => {
+        const sColor = s.color || colors[sIdx % colors.length];
+        const pts = s.values.map((v, i) => {
+          const x = padding2 + i / Math.max(s.values.length - 1, 1) * plotW2;
+          const y = height2 - padding2 - v / maxVal2 * plotH2;
+          return `${x},${y}`;
+        });
+        const pointsStr = pts.join(" ");
+        const circles = pts.map((pt) => `<circle cx="${pt.split(",")[0]}" cy="${pt.split(",")[1]}" r="4" fill="${sColor}" />`).join("");
+        pathsHtml += `
+        <polyline fill="none" stroke="${sColor}" stroke-width="3" stroke-linecap="round" points="${pointsStr}" />
+        ${circles}`;
+      });
+      const labelTexts = labels.map((l, i) => {
+        const x = padding2 + i / Math.max(labels.length - 1, 1) * plotW2;
+        return `<text x="${x}" y="${height2 - 10}" text-anchor="middle" fill="${theme.colors.muted || "#94a3b8"}" font-size="11" font-family="sans-serif">${this.escapeHtml(l)}</text>`;
+      }).join("");
+      return `
+      <div class="yumia-chart-container">
+        ${titleHtml}
+        <svg viewBox="0 0 ${width2} ${height2}" style="width:100%; max-height:220px;">
+          <line x1="${padding2}" y1="${height2 - padding2}" x2="${width2 - padding2}" y2="${height2 - padding2}" stroke="rgba(255,255,255,0.15)" stroke-width="1" />
+          ${pathsHtml}
+          ${labelTexts}
+        </svg>
+      </div>`;
+    }
+    if (c.chartType === "pie" || c.chartType === "doughnut") {
+      const values2 = series[0]?.values || [];
+      const total = values2.reduce((a, b) => a + b, 0) || 1;
+      let cumulativePercent = 0;
+      const radius = 60;
+      const cx = 100;
+      const cy = 100;
+      const strokeWidth = c.chartType === "doughnut" ? 24 : 60;
+      const circ = 2 * Math.PI * radius;
+      const slices = values2.map((val, i) => {
+        const percent = val / total;
+        const strokeDasharray = `${percent * circ} ${circ}`;
+        const strokeDashoffset = -cumulativePercent * circ;
+        cumulativePercent += percent;
+        const sColor = colors[i % colors.length];
+        return `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="${sColor}" stroke-width="${strokeWidth}" stroke-dasharray="${strokeDasharray}" stroke-dashoffset="${strokeDashoffset}" />`;
+      }).join("");
+      const legend = labels.map((l, i) => {
+        const sColor = colors[i % colors.length];
+        const pct = Math.round((values2[i] || 0) / total * 100);
+        return `<div style="display:flex; align-items:center; gap:8px; font-size:12px; margin:4px 0;"><span style="width:10px; height:10px; border-radius:50%; background:${sColor};"></span><span style="color:var(--yumia-text);">${this.escapeHtml(l)} (${pct}%)</span></div>`;
+      }).join("");
+      return `
+      <div class="yumia-chart-container">
+        ${titleHtml}
+        <div style="display:flex; align-items:center; justify-content:center; gap:28px; width:100%;">
+          <svg viewBox="0 0 200 200" style="width:160px; height:160px; transform: rotate(-90deg);">
+            ${slices}
+          </svg>
+          <div style="display:flex; flex-direction:column;">${legend}</div>
+        </div>
+      </div>`;
+    }
+    const values = series[0]?.values || [];
+    const maxVal = Math.max(...values, 1);
+    const width = 500;
+    const height = 180;
+    const padding = 35;
+    const plotW = width - padding * 2;
+    const plotH = height - padding * 2;
+    const barWidth = Math.min(48, Math.max(16, plotW / Math.max(values.length, 1) * 0.6));
+    const bars = values.map((val, i) => {
+      const x = padding + (i + 0.5) * (plotW / Math.max(values.length, 1)) - barWidth / 2;
+      const barH = val / maxVal * plotH;
+      const y = height - padding - barH;
+      const color = colors[i % colors.length];
+      const label = labels[i] || "";
+      return `
+        <rect x="${x}" y="${y}" width="${barWidth}" height="${barH}" rx="4" fill="${color}" opacity="0.9" />
+        <text x="${x + barWidth / 2}" y="${y - 6}" text-anchor="middle" fill="${color}" font-size="11" font-weight="600" font-family="sans-serif">${val}</text>
+        <text x="${x + barWidth / 2}" y="${height - 12}" text-anchor="middle" fill="${theme.colors.muted || "#94a3b8"}" font-size="11" font-family="sans-serif">${this.escapeHtml(label)}</text>`;
+    }).join("");
+    return `
+    <div class="yumia-chart-container">
+      ${titleHtml}
+      <svg viewBox="0 0 ${width} ${height}" style="width:100%; max-height:220px;">
+        <line x1="${padding}" y1="${height - padding}" x2="${width - padding}" y2="${height - padding}" stroke="rgba(255,255,255,0.15)" stroke-width="1" />
+        ${bars}
+      </svg>
+    </div>`;
+  }
   formatInline(text) {
     const escaped = this.escapeHtml(text);
     return escaped.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>").replace(/\*(.*?)\*/g, "<em>$1</em>").replace(/`(.*?)`/g, "<code>$1</code>");
@@ -3718,6 +4582,117 @@ var PdfRenderer = class {
         doc.rect(x, y, width, curY - y).strokeColor(theme.colors.border || "rgba(255,255,255,0.1)").stroke();
         return curY;
       }
+      case "badge": {
+        const b = element;
+        const variantColor = this.getVariantColor(b.variant, theme);
+        const text = this.stripFormatting(b.text).toUpperCase();
+        const badgeW = Math.min(180, Math.max(60, text.length * 7 + 20));
+        const badgeH = 22;
+        doc.roundedRect(x, y, badgeW, badgeH, 11).fill(theme.colors.surface || "rgba(255,255,255,0.08)");
+        doc.roundedRect(x, y, badgeW, badgeH, 11).lineWidth(1).strokeColor(variantColor).stroke();
+        doc.font("Helvetica-Bold").fontSize(10).fillColor(variantColor).text(text, x, y + 6, { width: badgeW, align: "center" });
+        return y + badgeH + 6;
+      }
+      case "timeline": {
+        const t = element;
+        const items = t.items || [];
+        if (items.length === 0)
+          return y;
+        const itemW = (width - (items.length - 1) * 12) / items.length;
+        const lineY = y + 14;
+        doc.moveTo(x + 10, lineY).lineTo(x + width - 10, lineY).lineWidth(2).strokeColor(theme.colors.border || "rgba(255,255,255,0.2)").stroke();
+        let maxItemH = 60;
+        items.forEach((item, idx) => {
+          const itemX = x + idx * (itemW + 12);
+          const dotX = itemX + itemW / 2;
+          doc.circle(dotX, lineY, 6).fill(theme.colors.primary);
+          let curItemY = lineY + 12;
+          if (item.date) {
+            doc.font("Helvetica-Bold").fontSize(10).fillColor(theme.colors.accent || theme.colors.primary).text(this.stripFormatting(item.date), itemX, curItemY, {
+              width: itemW,
+              align: "center"
+            });
+            curItemY += 14;
+          }
+          doc.font("Helvetica-Bold").fontSize(12).fillColor(theme.colors.text).text(this.stripFormatting(item.title), itemX, curItemY, {
+            width: itemW,
+            align: "center"
+          });
+          curItemY += 16;
+          if (item.description) {
+            doc.font("Helvetica").fontSize(9).fillColor(theme.colors.muted || "#888888").text(this.stripFormatting(item.description), itemX, curItemY, {
+              width: itemW,
+              align: "center"
+            });
+            curItemY += 24;
+          }
+          if (curItemY - y > maxItemH)
+            maxItemH = curItemY - y;
+        });
+        return y + maxItemH + 8;
+      }
+      case "compare": {
+        const c = element;
+        const colW = (width - 24) / 2;
+        let leftY = y + 12;
+        let rightY = y + 12;
+        if (c.leftTitle) {
+          doc.font("Helvetica-Bold").fontSize(14).fillColor(theme.colors.primary).text(this.stripFormatting(c.leftTitle), x + 12, leftY, { width: colW - 24 });
+          leftY += 22;
+        }
+        for (const el of c.left) {
+          leftY = this.renderElement(doc, el, x + 12, leftY, colW - 24, theme) + 6;
+        }
+        const rightX = x + colW + 24;
+        if (c.rightTitle) {
+          doc.font("Helvetica-Bold").fontSize(14).fillColor(theme.colors.primary).text(this.stripFormatting(c.rightTitle), rightX + 12, rightY, { width: colW - 24 });
+          rightY += 22;
+        }
+        for (const el of c.right) {
+          rightY = this.renderElement(doc, el, rightX + 12, rightY, colW - 24, theme) + 6;
+        }
+        const totalH = Math.max(leftY - y, rightY - y, 60) + 12;
+        doc.roundedRect(x, y, colW, totalH, 8).strokeColor(theme.colors.border || "rgba(255,255,255,0.15)").stroke();
+        doc.roundedRect(rightX, y, colW, totalH, 8).strokeColor(theme.colors.border || "rgba(255,255,255,0.15)").stroke();
+        return y + totalH + 8;
+      }
+      case "chart": {
+        const ch = element;
+        const boxH = 130;
+        doc.roundedRect(x, y, width, boxH, 8).fill(theme.colors.surface || "rgba(255,255,255,0.04)");
+        doc.roundedRect(x, y, width, boxH, 8).strokeColor(theme.colors.border || "rgba(255,255,255,0.1)").stroke();
+        let topY = y + 10;
+        if (ch.title) {
+          doc.font("Helvetica-Bold").fontSize(13).fillColor(theme.colors.text).text(this.stripFormatting(ch.title), x + 14, topY, { width: width - 28 });
+          topY += 20;
+        }
+        const values = ch.series[0]?.values || [];
+        const maxVal = Math.max(...values, 1);
+        const plotH = boxH - (topY - y) - 28;
+        const barW = Math.min(40, (width - 40) / Math.max(values.length, 1) * 0.6);
+        values.forEach((val, idx) => {
+          const barX = x + 24 + idx * ((width - 48) / Math.max(values.length, 1));
+          const h = val / maxVal * plotH;
+          const barY = topY + plotH - h;
+          doc.rect(barX, barY, barW, h).fill(theme.colors.primary);
+          doc.font("Helvetica").fontSize(9).fillColor(theme.colors.text).text(String(val), barX, barY - 12, { width: barW, align: "center" });
+          if (ch.labels[idx]) {
+            doc.font("Helvetica").fontSize(9).fillColor(theme.colors.muted || "#888888").text(this.stripFormatting(ch.labels[idx]), barX - 10, topY + plotH + 4, {
+              width: barW + 20,
+              align: "center"
+            });
+          }
+        });
+        return y + boxH + 8;
+      }
+      case "mermaid": {
+        const m = element;
+        const boxH = 90;
+        doc.roundedRect(x, y, width, boxH, 8).fill(theme.colors.surface || "rgba(255,255,255,0.04)");
+        doc.roundedRect(x, y, width, boxH, 8).strokeColor(theme.colors.primary).stroke();
+        doc.font("Courier").fontSize(11).fillColor(theme.colors.text).text(this.stripFormatting(m.code), x + 12, y + 12, { width: width - 24 });
+        return y + boxH + 8;
+      }
       default:
         return y;
     }
@@ -3849,7 +4824,7 @@ function startDevServer(filePath, options = {}) {
 // src/cli.ts
 import { mkdirSync, readFileSync as readFileSync2, watch as fsWatch, writeFileSync } from "fs";
 import { basename, dirname, extname, join, resolve as resolve2 } from "path";
-var VERSION = "0.1.15";
+var VERSION = "0.1.17";
 function printHelp() {
   return `
 YumiaMD \u2014 Markdown-based presentation compiler (v${VERSION})
@@ -3866,6 +4841,7 @@ Commands:
   inspect <file>     Inspect the AST and geometric layout tree
   schema             Output machine-readable JSON schema for AI agents
   build <file>       Compile a presentation to PowerPoint (.pptx), PDF (.pdf), or HTML (.html)
+  deploy <file>      Export and deploy presentation to static site, GitHub Pages, or Vercel
 
 Theming & Color Options:
   --theme, -t <name> Base theme: default | cyberpunk | minimal | corporate | terminal | academic
@@ -4196,6 +5172,68 @@ ${summary}${isStrict && report.warnings.length > 0 ? " (failed due to --strict)"
       };
     }
   }
+  if (command === "deploy") {
+    if (!target) {
+      const msg = "Error: Please specify a presentation file to deploy (e.g. 'yumia deploy presentation.yumia.md')";
+      return { exitCode: 1, output: isJson ? JSON.stringify({ error: msg }) : msg };
+    }
+    try {
+      const resolvedInput = resolve2(process.cwd(), target);
+      const source = readFileSync2(resolvedInput, "utf-8");
+      const provider = (getFlagValue(args, ["--provider"]) || "static").toLowerCase();
+      const outDir = resolve2(process.cwd(), getFlagValue(args, ["--out", "-o"]) || "dist-site");
+      mkdirSync(outDir, { recursive: true });
+      const compiler = new YumiaCompiler();
+      const htmlRenderer = new HtmlRenderer();
+      const result = await compiler.compile(source, htmlRenderer);
+      const indexPath = join(outDir, "index.html");
+      writeFileSync(indexPath, result.html, "utf-8");
+      if (provider === "gh-pages" || provider === "github") {
+        writeFileSync(join(outDir, ".nojekyll"), "", "utf-8");
+      } else if (provider === "vercel") {
+        const vercelConfig = {
+          version: 2,
+          cleanUrls: true,
+          routes: [{ src: "/(.*)", dest: "/index.html" }]
+        };
+        writeFileSync(join(outDir, "vercel.json"), JSON.stringify(vercelConfig, null, 2), "utf-8");
+      }
+      if (isJson) {
+        return {
+          exitCode: 0,
+          output: JSON.stringify(
+            {
+              success: true,
+              provider,
+              outputDirectory: outDir,
+              indexPath,
+              slideCount: result.slideCount
+            },
+            null,
+            2
+          )
+        };
+      }
+      return {
+        exitCode: 0,
+        output: [
+          `\u{1F680} YumiaMD Presentation Deployment Ready!`,
+          `\u2713 Standalone interactive deck compiled (${result.slideCount} slides)`,
+          `\u2713 Target Directory: ${outDir}`,
+          `\u2713 Provider Profile: ${provider}`,
+          `\u2713 Entrypoint: ${indexPath}`,
+          ``,
+          provider === "gh-pages" ? `To publish to GitHub Pages: push '${outDir}' contents to 'gh-pages' branch.` : `To deploy to Vercel/Netlify/S3: run 'vercel ${outDir}' or host files from '${outDir}'.`
+        ].join("\n")
+      };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      if (isJson) {
+        return { exitCode: 1, output: JSON.stringify({ success: false, error: msg }) };
+      }
+      return { exitCode: 1, output: `\u2717 Deployment build failed: ${msg}` };
+    }
+  }
   if (command === "build" || command === "watch") {
     if (!target) {
       const msg = `Error: Please specify a presentation file to ${command}.`;
@@ -4314,6 +5352,11 @@ export {
   createCode,
   createQuote,
   createTable,
+  createChart,
+  createMermaid,
+  createTimeline,
+  createCompare,
+  createBadge,
   createGroup,
   createColumn,
   createColumns,

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export * from '@yumiamd/renderer-pptx';
 export * from '@yumiamd/renderer-html';
 export * from '@yumiamd/renderer-pdf';
 
-declare const VERSION = "0.1.15";
+declare const VERSION = "0.1.17";
 declare function printHelp(): string;
 declare function runCli(argv: string[]): Promise<{
     exitCode: number;

package/dist/index.js

@@ -13,15 +13,19 @@ import {
   academicTheme,
   cleanFontFace,
   corporateTheme,
+  createBadge,
   createCard,
+  createChart,
   createCode,
   createColumn,
   createColumns,
+  createCompare,
   createGroup,
   createHeading,
   createImage,
   createLayoutDirective,
   createList,
+  createMermaid,
   createMetric,
   createParagraph,
   createPresentation,
@@ -29,6 +33,7 @@ import {
   createSlide,
   createTable,
   createTheme,
+  createTimeline,
   cyberpunkTheme,
   defaultTheme,
   minimalTheme,
@@ -39,7 +44,7 @@ import {
   runCli,
   startDevServer,
   terminalTheme
-} from "./chunk-7A5BHABM.js";
+} from "./chunk-IAEXC5SG.js";
 export {
   DEFAULT_VIEWPORT,
   DefaultLayoutEngine,
@@ -55,15 +60,19 @@ export {
   academicTheme,
   cleanFontFace,
   corporateTheme,
+  createBadge,
   createCard,
+  createChart,
   createCode,
   createColumn,
   createColumns,
+  createCompare,
   createGroup,
   createHeading,
   createImage,
   createLayoutDirective,
   createList,
+  createMermaid,
   createMetric,
   createParagraph,
   createPresentation,
@@ -71,6 +80,7 @@ export {
   createSlide,
   createTable,
   createTheme,
+  createTimeline,
   cyberpunkTheme,
   defaultTheme,
   minimalTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yumiamd",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Command line interface and compiler for YumiaMD presentations",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,15 +21,15 @@
   },
   "devDependencies": {
     "tsup": "^8.5.1",
-    "@yumiamd/ast": "0.1.15",
-    "@yumiamd/parser": "0.1.15",
-    "@yumiamd/core": "0.1.15",
-    "@yumiamd/renderer-html": "0.1.15",
-    "@yumiamd/renderer": "0.1.15",
-    "@yumiamd/layout": "0.1.15",
-    "@yumiamd/renderer-pptx": "0.1.15",
-    "@yumiamd/theme": "0.1.15",
-    "@yumiamd/renderer-pdf": "0.1.15"
+    "@yumiamd/ast": "0.1.17",
+    "@yumiamd/core": "0.1.17",
+    "@yumiamd/renderer": "0.1.17",
+    "@yumiamd/parser": "0.1.17",
+    "@yumiamd/renderer-html": "0.1.17",
+    "@yumiamd/theme": "0.1.17",
+    "@yumiamd/layout": "0.1.17",
+    "@yumiamd/renderer-pptx": "0.1.17",
+    "@yumiamd/renderer-pdf": "0.1.17"
   },
   "keywords": [
     "yumia",