yumiamd 0.1.25 → 0.1.27

package/dist/bin.js

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

package/dist/{chunk-PRZ5CFRH.js → chunk-FTPWLNJL.js}

@@ -1560,9 +1560,21 @@ var NativeYumiaParser = class {
       case "h1":
       case "h2":
       case "h3": {
-        const level = tok.command === "h1" ? 1 : tok.command === "h2" ? 2 : tok.command === "h3" ? 3 : 1;
-        const text = this.stripQuotes(tok.args);
-        const el = createHeading(text, level);
+        const lvlMatch = tok.args.match(/^(?:level=)?([1-4])\b/);
+        let level = 2;
+        let text = tok.args;
+        if (tok.command === "h1") {
+          level = 1;
+        } else if (tok.command === "h2") {
+          level = 2;
+        } else if (tok.command === "h3") {
+          level = 3;
+        } else if (lvlMatch && lvlMatch[1]) {
+          level = parseInt(lvlMatch[1], 10);
+          text = tok.args.replace(/^(?:level=)?[1-4]\s*/, "");
+        }
+        text = this.stripQuotes(text);
+        const el = createHeading(text, Math.min(6, Math.max(1, level)));
         el.loc = {
           start: { line: tok.lineNum, column: 1 },
           end: { line: tok.lineNum, column: tok.text.length }
@@ -1612,6 +1624,20 @@ var NativeYumiaParser = class {
         }
         return { element: createCard(children, title, variant), nextIdx };
       }
+      case "column": {
+        const children = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          const childRes = this.parseElement(tokens, nextIdx, components);
+          if (childRes) {
+            children.push(childRes.element);
+            nextIdx = childRes.nextIdx;
+          } else {
+            nextIdx++;
+          }
+        }
+        return { element: createColumn(children), nextIdx };
+      }
       case "columns": {
         const ratios = tok.args || "50:50";
         const cols = [];
@@ -1791,35 +1817,64 @@ var NativeYumiaParser = class {
         const nodes = [];
         const edges = [];
         const nodeMap = /* @__PURE__ */ new Map();
-        const ensureNode = (rawLabel, shape, variant) => {
-          const clean = rawLabel.replace(/^[[({]+|[\])}]+$/g, "").trim();
-          const id = clean.replace(/[^a-zA-Z0-9_-]/g, "_").toLowerCase();
-          if (!nodeMap.has(id)) {
-            let detectedShape = "round";
-            if (rawLabel.startsWith("[(") || shape === "database")
+        const ensureNode = (rawInput, shape, variant, explicitLabel) => {
+          let id = "";
+          let label = "";
+          let detectedShape = shape || "round";
+          const inlineMatch = rawInput.match(/^([a-zA-Z0-9_-]+)(\[\([^)]+\)\]|\(\([^)]+\)\)|\{[^}]+\}|\[[^\]]+\])$/);
+          if (inlineMatch) {
+            id = inlineMatch[1].toLowerCase();
+            const body = inlineMatch[2];
+            if (body.startsWith("[("))
+              detectedShape = "database";
+            else if (body.startsWith("(("))
+              detectedShape = "circle";
+            else if (body.startsWith("{"))
+              detectedShape = "diamond";
+            label = body.replace(/^[[({]+|[\])}]+$/g, "").trim();
+          } else {
+            const clean = rawInput.replace(/^[[({]+|[\])}]+$/g, "").trim();
+            if (rawInput.startsWith("[(") || shape === "database")
               detectedShape = "database";
-            else if (rawLabel.startsWith("((") || shape === "circle")
+            else if (rawInput.startsWith("((") || shape === "circle")
               detectedShape = "circle";
-            else if (rawLabel.startsWith("{") || shape === "diamond")
+            else if (rawInput.startsWith("{") || shape === "diamond")
               detectedShape = "diamond";
-            else if (shape)
-              detectedShape = shape;
-            const node = {
+            label = explicitLabel || clean;
+            id = clean.replace(/[^a-zA-Z0-9_-]/g, "_").toLowerCase();
+          }
+          let existing = nodeMap.get(id) || nodeMap.get(label.toLowerCase()) || nodeMap.get(label.replace(/[^a-zA-Z0-9_-]/g, "_").toLowerCase());
+          if (!existing && explicitLabel) {
+            const labelSlug = explicitLabel.replace(/[^a-zA-Z0-9_-]/g, "_").toLowerCase();
+            existing = nodeMap.get(labelSlug) || nodeMap.get(explicitLabel.toLowerCase());
+          }
+          if (!existing) {
+            existing = {
               id,
-              label: clean,
+              label,
               shape: detectedShape,
               variant: variant || (nodes.length === 0 ? "primary" : "accent")
             };
-            nodeMap.set(id, node);
-            nodes.push(node);
+            nodes.push(existing);
+          } else {
+            if (shape)
+              existing.shape = detectedShape;
+            if (variant)
+              existing.variant = variant;
+            if (explicitLabel)
+              existing.label = explicitLabel;
           }
-          return nodeMap.get(id);
+          nodeMap.set(id, existing);
+          nodeMap.set(existing.id, existing);
+          nodeMap.set(existing.label.toLowerCase(), existing);
+          nodeMap.set(existing.label.replace(/[^a-zA-Z0-9_-]/g, "_").toLowerCase(), existing);
+          return existing;
         };
         let nextIdx = idx + 1;
         while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
           const dLine = tokens[nextIdx].text;
           if (dLine.includes("->") || dLine.includes("-->") || dLine.includes("-[")) {
-            const segRegex = /(\[[^\]]+\]|\(\([^)]+\)\)|\[\([^)]+\)\]|\S+)(?:\s*(?:-\[([^\]]+)\]->|-->|->)\s*)?/g;
+            const segRegex = /([a-zA-Z0-9_-]+\[\([^)]+\)\]|[a-zA-Z0-9_-]+\(\([^)]+\)\)|[a-zA-Z0-9_-]+\{[^}]+\}|[a-zA-Z0-9_-]+\[[^\]]+\]|\[\([^)]+\)\]|\(\([^)]+\)\)|\{[^}]+\}|\[[^\]]+\]|\S+)(?:\s*(?:-\[([^\]]+)\]->|-->|->)\s*)?/g;
             let m;
             let prevNode = null;
             let pendingEdgeLabel = void 0;
@@ -1849,10 +1904,9 @@ var NativeYumiaParser = class {
             const nVarMatch = nParts.match(/\bvariant=["']?([^"'\s]+)["']?/);
             if (nIdMatch) {
               const nId = nIdMatch[1];
-              const node = ensureNode(nLabelMatch ? nLabelMatch[1] : nId, nShapeMatch ? nShapeMatch[1] : void 0, nVarMatch ? nVarMatch[1] : void 0);
-              node.id = nId.toLowerCase();
-              if (nLabelMatch)
-                node.label = nLabelMatch[1];
+              const explicitLabel = nLabelMatch ? nLabelMatch[1] : void 0;
+              const node = ensureNode(nId, nShapeMatch ? nShapeMatch[1] : void 0, nVarMatch ? nVarMatch[1] : void 0, explicitLabel);
+              nodeMap.set(nId.toLowerCase(), node);
             }
           }
           nextIdx++;
@@ -2165,7 +2219,7 @@ var VIEWPORT_PRESETS = {
 var DefaultLayoutEngine = class {
   computeSlide(slide, viewport = DEFAULT_VIEWPORT, options = {}) {
     const padding = options.padding ?? 64;
-    const gap = options.gap ?? 32;
+    const gap = options.gap ?? 28;
     const availableWidth = Math.max(100, viewport.width - padding * 2);
     const availableHeight = Math.max(100, viewport.height - padding * 2);
     if (slide.elements.length === 0) {
@@ -2208,6 +2262,9 @@ var DefaultLayoutEngine = class {
   }
   layoutSingleElement(element, x, y, width, gap) {
     switch (element.type) {
+      case "hero": {
+        return this.layoutHero(element, x, y, width, gap);
+      }
       case "heading": {
         const height = this.estimateHeadingHeight(element, width);
         return { element, bounds: { x, y, width, height } };
@@ -2240,16 +2297,37 @@ var DefaultLayoutEngine = class {
         const height = this.estimateMetricHeight(element);
         return { element, bounds: { x, y, width, height } };
       }
+      case "callout": {
+        const c = element;
+        const lines = Math.ceil(c.text.length / Math.max(15, Math.floor(width / 14))) || 1;
+        const height = Math.max(80, lines * 28 + (c.title ? 45 : 0) + 30);
+        return { element, bounds: { x, y, width, height } };
+      }
+      case "badge": {
+        return { element, bounds: { x, y, width, height: 45 } };
+      }
       case "math": {
         const height = 90;
         return { element, bounds: { x, y, width, height } };
       }
+      case "chart": {
+        const height = 280;
+        return { element, bounds: { x, y, width, height } };
+      }
+      case "diagram": {
+        const height = 320;
+        return { element, bounds: { x, y, width, height } };
+      }
+      case "timeline": {
+        const height = 160;
+        return { element, bounds: { x, y, width, height } };
+      }
       case "section": {
         const height = 280;
         return { element, bounds: { x, y, width, height } };
       }
       case "toc": {
-        const height = 320;
+        const height = 340;
         return { element, bounds: { x, y, width, height } };
       }
       case "card": {
@@ -2258,12 +2336,94 @@ var DefaultLayoutEngine = class {
       case "columns": {
         return this.layoutColumns(element, x, y, width, gap);
       }
+      case "grid": {
+        return this.layoutGrid(element, x, y, width, gap);
+      }
+      case "compare": {
+        return this.layoutCompare(element, x, y, width, gap);
+      }
+      case "stack": {
+        return this.layoutStack(element, x, y, width, gap);
+      }
       default: {
         const height = 60;
         return { element, bounds: { x, y, width, height } };
       }
     }
   }
+  layoutHero(element, x, y, width, gap) {
+    let curY = y;
+    if (element.tagline)
+      curY += 35;
+    curY += 85;
+    if (element.subtitle)
+      curY += 65;
+    const children = [];
+    if (element.elements) {
+      for (const child of element.elements) {
+        const node = this.layoutSingleElement(child, x, curY, width, gap);
+        children.push(node);
+        curY += node.bounds.height + gap;
+      }
+    }
+    return { element, bounds: { x, y, width, height: curY - y }, children };
+  }
+  layoutGrid(element, x, y, width, gap) {
+    const colCount = typeof element.columns === "number" ? element.columns : parseInt(String(element.columns), 10) || 2;
+    const totalGap = gap * (colCount - 1);
+    const colWidth = Math.max(10, (width - totalGap) / colCount);
+    const children = [];
+    const colYs = Array(colCount).fill(y);
+    for (let i = 0; i < element.elements.length; i++) {
+      const colIdx = i % colCount;
+      const colX = x + colIdx * (colWidth + gap);
+      const childEl = element.elements[i];
+      const childNode = this.layoutSingleElement(childEl, colX, colYs[colIdx], colWidth, gap);
+      children.push(childNode);
+      colYs[colIdx] += childNode.bounds.height + gap;
+    }
+    const maxGridHeight = Math.max(...colYs.map((cy) => cy - y), 100);
+    return {
+      element,
+      bounds: { x, y, width, height: maxGridHeight },
+      children
+    };
+  }
+  layoutCompare(element, x, y, width, gap) {
+    const colW = (width - gap) / 2;
+    const titleH = 45;
+    const pad = 24;
+    const leftStartY = y + pad + (element.leftTitle ? titleH : 0);
+    const { nodes: leftChildren, totalHeight: leftInnerH } = this.layoutElementList(element.left, x + pad, leftStartY, colW - pad * 2, gap / 2);
+    const rightX = x + colW + gap;
+    const rightStartY = y + pad + (element.rightTitle ? titleH : 0);
+    const { nodes: rightChildren, totalHeight: rightInnerH } = this.layoutElementList(element.right, rightX + pad, rightStartY, colW - pad * 2, gap / 2);
+    const totalHeight = Math.max(leftInnerH, rightInnerH, 120) + (element.leftTitle || element.rightTitle ? titleH : 0) + pad * 2;
+    return {
+      element,
+      bounds: { x, y, width, height: totalHeight },
+      children: [...leftChildren, ...rightChildren]
+    };
+  }
+  layoutStack(element, x, y, width, gap) {
+    if (element.direction === "horizontal") {
+      const count = element.elements.length;
+      const itemW = (width - gap * (count - 1)) / Math.max(1, count);
+      let curX = x;
+      const children = [];
+      let maxH = 0;
+      for (const child of element.elements) {
+        const node = this.layoutSingleElement(child, curX, y, itemW, gap);
+        children.push(node);
+        maxH = Math.max(maxH, node.bounds.height);
+        curX += itemW + gap;
+      }
+      return { element, bounds: { x, y, width, height: maxH }, children };
+    } else {
+      const { nodes: children, totalHeight } = this.layoutElementList(element.elements, x, y, width, gap);
+      return { element, bounds: { x, y, width, height: totalHeight }, children };
+    }
+  }
   layoutCard(element, x, y, width, gap) {
     const cardPadding = 32;
     const innerWidth = Math.max(10, width - cardPadding * 2);
@@ -4542,6 +4702,19 @@ var PptxRenderer = class {
       for (const node of slideLayout.nodes) {
         this.renderNode(pptxSlide, pptx, node, scaleX, scaleY, theme, presentation);
       }
+      if (presentation.metadata.watermark) {
+        const watermarkText = typeof presentation.metadata.watermark === "string" ? presentation.metadata.watermark : "CONFIDENTIAL";
+        pptxSlide.addText(watermarkText.toUpperCase(), {
+          x: 0.5,
+          y: slideHeightInches - 0.4,
+          w: slideWidthInches - 1,
+          h: 0.25,
+          fontSize: 9,
+          bold: true,
+          color: this.cleanHexColor(theme.colors.muted || "#888888"),
+          fontFace: cleanFontFace(theme.typography.headingFont)
+        });
+      }
       if (slide.notes) {
         pptxSlide.addNotes(slide.notes);
       }
@@ -4919,7 +5092,7 @@ var PptxRenderer = class {
   }
   renderCode(pptxSlide, pptx, code, rect, theme) {
     const codeTheme = theme.components?.code;
-    const bgColor = this.cleanHexColor(codeTheme?.background || "#0a0f1d");
+    const bgColor = this.cleanHexColor(codeTheme?.background || "#0f172a");
     const textColor = this.cleanHexColor(codeTheme?.textColor || "#f8fafc");
     const primaryColor = this.cleanHexColor(theme.colors.primary || "#00F0FF");
     const mutedColor = this.cleanHexColor(theme.colors.muted || "#64748b");
@@ -4929,8 +5102,32 @@ var PptxRenderer = class {
       w: rect.w,
       h: rect.h,
       fill: { color: bgColor },
-      line: { color: this.cleanHexColor(theme.colors.border || "#1e293b"), width: 1 },
-      rectRadius: 0.05
+      line: { color: this.cleanHexColor(theme.colors.border || "#334155"), width: 1.5 },
+      rectRadius: 0.08
+    });
+    pptxSlide.addShape(pptx.ShapeType.ellipse || "ellipse", {
+      x: rect.x + 0.15,
+      y: rect.y + 0.12,
+      w: 0.1,
+      h: 0.1,
+      fill: { color: "ef4444" },
+      line: { color: "ef4444", width: 0 }
+    });
+    pptxSlide.addShape(pptx.ShapeType.ellipse || "ellipse", {
+      x: rect.x + 0.3,
+      y: rect.y + 0.12,
+      w: 0.1,
+      h: 0.1,
+      fill: { color: "f59e0b" },
+      line: { color: "f59e0b", width: 0 }
+    });
+    pptxSlide.addShape(pptx.ShapeType.ellipse || "ellipse", {
+      x: rect.x + 0.45,
+      y: rect.y + 0.12,
+      w: 0.1,
+      h: 0.1,
+      fill: { color: "10b981" },
+      line: { color: "10b981", width: 0 }
     });
     const lines = code.code.split("\n");
     if (code.highlight) {
@@ -4960,11 +5157,11 @@ var PptxRenderer = class {
         const isHl = highlightSet.has(lineNum);
         const lineNumPad = String(lineNum).padStart(2, "0");
         const numColor = isHl ? primaryColor : mutedColor;
-        const contentColor = isHl ? primaryColor : mutedColor;
+        const contentColor = isHl ? primaryColor : textColor;
         chunks.push({
           text: `${lineNumPad}  `,
           options: {
-            fontSize: 12,
+            fontSize: 11,
             fontFace: "Consolas",
             color: numColor,
             bold: isHl
@@ -4973,7 +5170,7 @@ var PptxRenderer = class {
         chunks.push({
           text: line || " ",
           options: {
-            fontSize: 12,
+            fontSize: 11,
             fontFace: "Consolas",
             color: contentColor,
             bold: isHl,
@@ -4983,19 +5180,19 @@ var PptxRenderer = class {
       });
       pptxSlide.addText(chunks, {
         x: rect.x + 0.2,
-        y: rect.y + 0.15,
+        y: rect.y + 0.32,
         w: rect.w - 0.4,
-        h: rect.h - 0.3,
+        h: rect.h - 0.4,
         valign: "top",
         margin: 0
       });
     } else {
       pptxSlide.addText(code.code, {
         x: rect.x + 0.2,
-        y: rect.y + 0.15,
+        y: rect.y + 0.32,
         w: rect.w - 0.4,
-        h: rect.h - 0.3,
-        fontSize: 13,
+        h: rect.h - 0.4,
+        fontSize: 11.5,
         fontFace: "Consolas",
         color: textColor,
         valign: "top"
@@ -5321,6 +5518,11 @@ ${item.description}` : "";
       align: "center",
       valign: "middle"
     });
+    if (node.children) {
+      for (const childNode of node.children) {
+        this.renderNode(pptxSlide, pptx, childNode, scaleX, scaleY, theme);
+      }
+    }
   }
   renderSection(pptxSlide, pptx, section, rect, theme) {
     const cardBg = this.cleanHexColor(theme.colors.surface || "#0f172a");
@@ -5662,22 +5864,30 @@ ${mermaid.code}`, {
     const nodeH = isLR ? Math.min(0.65, (rect.h - 0.5) / maxLane) : Math.min(0.6, (rect.h - 0.5) / (numRanks * 1.4));
     const gapX = isLR ? numRanks > 1 ? (rect.w - numRanks * nodeW) / (numRanks - 1) : 0 : maxLane > 1 ? (rect.w - maxLane * nodeW) / (maxLane - 1) : 0;
     const gapY = isLR ? maxLane > 1 ? (rect.h - maxLane * nodeH) / (maxLane - 1) : 0 : numRanks > 1 ? (rect.h - numRanks * nodeH) / (numRanks - 1) : 0;
+    const maxLaneHeight = isLR ? maxLane * (nodeH + gapY) - gapY : numRanks * (nodeH + gapY) - gapY;
+    const maxRankWidth = isLR ? numRanks * (nodeW + gapX) - gapX : maxLane * (nodeW + gapX) - gapX;
     const positions = {};
     sortedRanks.forEach((r, rIdx) => {
       const ids = rankGroups[r];
-      ids.forEach((id, lIdx) => {
-        if (isLR) {
+      if (isLR) {
+        const colHeight = ids.length * (nodeH + gapY) - gapY;
+        const offsetY = (maxLaneHeight - colHeight) / 2;
+        ids.forEach((id, lIdx) => {
           positions[id] = {
             x: rect.x + rIdx * (nodeW + gapX),
-            y: rect.y + lIdx * (nodeH + gapY)
+            y: rect.y + offsetY + lIdx * (nodeH + gapY)
           };
-        } else {
+        });
+      } else {
+        const rowWidth = ids.length * (nodeW + gapX) - gapX;
+        const offsetX = (maxRankWidth - rowWidth) / 2;
+        ids.forEach((id, lIdx) => {
           positions[id] = {
-            x: rect.x + lIdx * (nodeW + gapX),
+            x: rect.x + offsetX + lIdx * (nodeW + gapX),
             y: rect.y + rIdx * (nodeH + gapY)
           };
-        }
-      });
+        });
+      }
     });
     const surfaceColor = this.cleanHexColor(theme.colors.surface || "1e293b");
     const arrowColor = this.cleanHexColor(theme.colors.accent || theme.colors.primary);
@@ -5690,11 +5900,19 @@ ${mermaid.code}`, {
       const y1 = isLR ? p1.y + nodeH / 2 : p1.y + nodeH;
       const x2 = isLR ? p2.x : p2.x + nodeW / 2;
       const y2 = isLR ? p2.y + nodeH / 2 : p2.y;
+      const minX = Math.min(x1, x2);
+      const minY = Math.min(y1, y2);
+      const lineW = Math.max(0.01, Math.abs(x2 - x1));
+      const lineH = Math.max(0.01, Math.abs(y2 - y1));
+      const flipH = x2 < x1;
+      const flipV = y2 < y1;
       pptxSlide.addShape(pptx.ShapeType.line, {
-        x: x1,
-        y: y1,
-        w: x2 - x1,
-        h: y2 - y1,
+        x: minX,
+        y: minY,
+        w: lineW,
+        h: lineH,
+        flipH,
+        flipV,
         line: {
           color: arrowColor,
           width: 2,
@@ -5705,13 +5923,25 @@ ${mermaid.code}`, {
       if (e.label) {
         const midX = (x1 + x2) / 2;
         const midY = (y1 + y2) / 2;
+        const pillW = Math.min(1.4, Math.max(0.7, e.label.length * 0.08 + 0.25));
+        pptxSlide.addShape(pptx.ShapeType.roundRect, {
+          x: midX - pillW / 2,
+          y: midY - 0.13,
+          w: pillW,
+          h: 0.26,
+          fill: { color: surfaceColor },
+          line: { color: this.cleanHexColor(theme.colors.border || "cbd5e1"), width: 1 },
+          rectRadius: 0.06
+        });
         pptxSlide.addText(e.label, {
-          x: midX - 0.4,
-          y: midY - 0.15,
-          w: 0.8,
-          h: 0.3,
+          x: midX - pillW / 2,
+          y: midY - 0.13,
+          w: pillW,
+          h: 0.26,
           fontSize: 9,
-          color: this.cleanHexColor(theme.colors.muted || "94a3b8"),
+          bold: true,
+          color: this.cleanHexColor(theme.colors.muted || "64748b"),
+          fontFace: cleanFontFace(theme.typography.headingFont),
           align: "center",
           valign: "middle"
         });
@@ -5737,7 +5967,7 @@ ${mermaid.code}`, {
       else if (n.shape === "database")
         shapeType = pptx.ShapeType.can;
       else if (n.shape === "circle")
-        shapeType = pptx.ShapeType.oval;
+        shapeType = pptx.ShapeType.ellipse || "ellipse";
       pptxSlide.addShape(shapeType, {
         x: p.x,
         y: p.y,
@@ -5747,14 +5977,24 @@ ${mermaid.code}`, {
         line: { color: nodeBorderColor, width: 2 },
         rectRadius: 0.08
       });
+      if (n.shape === "database") {
+        pptxSlide.addShape(pptx.ShapeType.rect, {
+          x: p.x + 0.15,
+          y: p.y + 0.1,
+          w: Math.max(0.1, nodeW - 0.3),
+          h: 0.02,
+          fill: { color: nodeBorderColor },
+          line: { color: nodeBorderColor, width: 1 }
+        });
+      }
       pptxSlide.addText(n.label, {
-        x: p.x + 0.05,
-        y: p.y + 0.05,
-        w: nodeW - 0.1,
-        h: nodeH - 0.1,
+        x: p.x + 0.06,
+        y: p.y + 0.06,
+        w: Math.max(0.1, nodeW - 0.12),
+        h: Math.max(0.1, nodeH - 0.12),
         align: "center",
         valign: "middle",
-        fontSize: 11,
+        fontSize: n.label.length > 18 ? 10 : 11,
         bold: true,
         color: this.cleanHexColor(theme.colors.text || "ffffff"),
         fontFace: cleanFontFace(theme.typography.headingFont)
@@ -5776,6 +6016,13 @@ ${mermaid.code}`, {
     if (CSS_NAMED_COLORS[trimmed]) {
       return CSS_NAMED_COLORS[trimmed];
     }
+    const rgbMatch = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+    if (rgbMatch && rgbMatch[1] && rgbMatch[2] && rgbMatch[3]) {
+      const r = Math.min(255, Math.max(0, parseInt(rgbMatch[1], 10))).toString(16).padStart(2, "0");
+      const g = Math.min(255, Math.max(0, parseInt(rgbMatch[2], 10))).toString(16).padStart(2, "0");
+      const b = Math.min(255, Math.max(0, parseInt(rgbMatch[3], 10))).toString(16).padStart(2, "0");
+      return `${r}${g}${b}`;
+    }
     const hexMatch = trimmed.match(/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i);
     if (hexMatch && hexMatch[1]) {
       const hex = hexMatch[1];
@@ -5978,7 +6225,7 @@ var HtmlRenderer = class {
       flex-direction: column;
       justify-content: flex-start;
       align-items: stretch;
-      padding: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem);
+      padding: clamp(1.4rem, 2.8vw, 2.2rem) clamp(2rem, 4vw, 3.8rem) clamp(2.2rem, 3.5vw, 3.2rem);
       box-sizing: border-box;
       animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     }
@@ -5997,31 +6244,40 @@ var HtmlRenderer = class {
       font-family: var(--yumia-font-heading), system-ui, -apple-system, sans-serif;
       font-weight: 700;
       line-height: var(--yumia-line-height-tight);
-      margin-bottom: 0.4em;
+      margin-bottom: 0.35em;
       letter-spacing: var(--yumia-letter-spacing-tight);
       overflow-wrap: break-word;
       word-break: break-word;
     }
 
     h1 {
-      font-size: clamp(1.8rem, 3.2vw, 2.9rem);
+      font-size: clamp(1.6rem, 2.8vw, 2.5rem);
       color: var(--yumia-primary);
       line-height: 1.15;
     }
 
+    h1 + h2 {
+      margin-top: -0.15em;
+      margin-bottom: 0.75em;
+      font-size: clamp(1rem, 1.6vw, 1.35rem);
+      color: var(--yumia-muted);
+      font-weight: 600;
+      letter-spacing: 0.02em;
+    }
+
     h2 {
-      font-size: clamp(1.5rem, 2.6vw, 2.3rem);
+      font-size: clamp(1.3rem, 2.2vw, 1.9rem);
       color: var(--yumia-text);
       line-height: 1.2;
     }
 
     h3 {
-      font-size: clamp(1.25rem, 2vw, 1.8rem);
+      font-size: clamp(1.15rem, 1.8vw, 1.5rem);
       color: var(--yumia-text);
     }
 
     h4 {
-      font-size: clamp(1.05rem, 1.5vw, 1.35rem);
+      font-size: clamp(1rem, 1.4vw, 1.25rem);
       color: var(--yumia-muted);
     }
 
@@ -6113,6 +6369,7 @@ var HtmlRenderer = class {
       flex-direction: column;
       gap: 0.8rem;
       height: 100%;
+      min-width: 0;
     }
 
     /* Cards */
@@ -6458,24 +6715,25 @@ var HtmlRenderer = class {
     .yumia-compare {
       display: grid;
       grid-template-columns: 1fr auto 1fr;
-      gap: 20px;
+      gap: clamp(12px, 1.8vw, 20px);
       align-items: stretch;
-      margin: 1.2rem 0;
+      margin: 0.5rem 0;
     }
     .yumia-compare-col {
       background: var(--yumia-surface);
-      border: 1px solid var(--yumia-border);
+      border: 1.5px solid var(--yumia-border);
       border-radius: var(--yumia-radius-card);
-      padding: 1.5rem;
+      padding: clamp(1rem, 1.6vw, 1.3rem);
       display: flex;
       flex-direction: column;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
     }
     .yumia-compare-title {
-      font-size: 1.2rem;
+      font-size: clamp(1rem, 1.4vw, 1.15rem);
       font-weight: 700;
       color: var(--yumia-primary);
-      margin-bottom: 1rem;
-      padding-bottom: 0.5rem;
+      margin-bottom: 0.6rem;
+      padding-bottom: 0.4rem;
       border-bottom: 1px solid var(--yumia-divider);
     }
     .yumia-compare-divider {
@@ -6483,49 +6741,80 @@ var HtmlRenderer = class {
       align-items: center;
       justify-content: center;
       font-weight: 800;
-      font-size: 0.9rem;
+      font-size: 0.85rem;
       color: var(--yumia-muted);
-      background: rgba(255, 255, 255, 0.05);
+      background: var(--yumia-surface);
       border-radius: 50%;
-      width: 36px;
-      height: 36px;
+      width: 32px;
+      height: 32px;
       align-self: center;
-      border: 1px solid var(--yumia-border);
+      border: 1.5px solid var(--yumia-border);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     }
 
     /* Native SVG Chart Container */
     .yumia-chart-container {
       background: var(--yumia-surface);
-      border: 1px solid var(--yumia-border);
+      border: 1.5px solid var(--yumia-border);
       border-radius: var(--yumia-radius-card);
-      padding: 1.25rem;
-      margin: 1rem 0;
+      padding: clamp(0.8rem, 1.4vw, 1.25rem);
+      margin: 0.6rem 0;
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 100%;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
     }
     .yumia-chart-title {
-      font-size: 1.1rem;
+      font-size: 1.05rem;
       font-weight: 700;
       color: var(--yumia-text);
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.6rem;
       align-self: flex-start;
     }
 
+    /* Diagram Container */
+    .yumia-diagram-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin: 0.5rem 0;
+      max-height: 52vh;
+    }
+    .yumia-diagram {
+      max-width: 100%;
+      max-height: 48vh;
+      height: auto;
+      background: var(--yumia-surface);
+      border: 1.5px solid var(--yumia-border);
+      border-radius: var(--yumia-radius-card);
+      padding: 12px;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+      box-sizing: border-box;
+    }
+    .yumia-diag-node {
+      transition: transform 0.2s ease, filter 0.2s ease;
+      cursor: pointer;
+    }
+    .yumia-diag-node:hover {
+      filter: brightness(1.1);
+    }
+
     /* Mermaid Container */
     .mermaid-container {
-      background: rgba(10, 10, 18, 0.6);
+      background: var(--yumia-surface);
       border: 1.5px solid var(--yumia-border);
       border-radius: var(--yumia-radius-card);
-      padding: 1.5rem;
-      margin: 1rem 0;
+      padding: 1.2rem;
+      margin: 0.6rem 0;
       display: flex;
       justify-content: center;
       align-items: center;
       overflow: auto;
       width: 100%;
-      min-height: 240px;
+      min-height: 200px;
     }
 
     .mermaid-container pre.mermaid,
@@ -6535,7 +6824,7 @@ var HtmlRenderer = class {
       padding: 0 !important;
       margin: 0 !important;
       font-size: 1rem;
-      color: #fff;
+      color: var(--yumia-text);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -6554,18 +6843,18 @@ var HtmlRenderer = class {
       border: 1.5px solid var(--yumia-border);
       border-left: 4px solid var(--yumia-primary);
       border-radius: var(--yumia-radius-card);
-      padding: 0.75rem 1.4rem;
-      margin: 0.7rem 0;
+      padding: 0.55rem 1.2rem;
+      margin: 0.45rem 0;
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
       overflow-x: auto;
       max-width: 100%;
     }
 
     .yumia-math-equation {
-      font-size: clamp(1.1rem, 1.8vw, 1.45rem);
+      font-size: clamp(1rem, 1.6vw, 1.35rem);
       color: var(--yumia-text);
       letter-spacing: 0.03em;
     }
@@ -7510,7 +7799,7 @@ var HtmlRenderer = class {
         const colorVar = sev === "warning" ? "var(--yumia-warning)" : sev === "danger" ? "var(--yumia-danger)" : sev === "success" ? "var(--yumia-success)" : "var(--yumia-info)";
         const titleHtml = c.title ? `<div style="font-weight:700; font-size:1.05rem; color:${colorVar}; margin-bottom:4px;">${this.formatInline(c.title)}</div>` : "";
         return `
-        <div class="yumia-callout" data-severity="${sev}" data-yumia-role="callout" style="background:var(--yumia-surface); border-left:4px solid ${colorVar}; border-radius:var(--yumia-radius-card); padding:1rem 1.4rem; margin:0.8rem 0; width:100%;">
+        <div class="yumia-callout" data-severity="${sev}" data-yumia-role="callout" style="background:var(--yumia-surface); border-left:4px solid ${colorVar}; border-radius:var(--yumia-radius-card); padding:1rem 1.4rem; margin:0.8rem 0; width:100%; display:flex; flex-direction:column; gap:6px; box-sizing:border-box;">
           ${titleHtml}
           <div style="font-size:0.95rem; color:var(--yumia-text); line-height:1.5;">${this.formatInline(c.text)}</div>
         </div>`;
@@ -7759,10 +8048,10 @@ var HtmlRenderer = class {
   }
   renderDiagram(d, theme) {
     const isLR = (d.direction || "LR").toUpperCase() === "LR";
-    const nodeW = 140;
-    const nodeH = 50;
-    const gapX = isLR ? 70 : 40;
-    const gapY = isLR ? 40 : 60;
+    const nodeW = 155;
+    const nodeH = 48;
+    const gapX = isLR ? 60 : 35;
+    const gapY = isLR ? 30 : 50;
     const nodeIds = d.nodes.map((n) => n.id);
     const inDegree = {};
     const adj = {};
@@ -7813,28 +8102,42 @@ var HtmlRenderer = class {
     });
     const sortedRanks = Object.keys(rankGroups).map(Number).sort((a, b) => a - b);
     const positions = {};
-    let maxLaneIndex = 0;
+    let maxLaneIndex = 1;
+    sortedRanks.forEach((r) => {
+      maxLaneIndex = Math.max(maxLaneIndex, rankGroups[r].length);
+    });
+    const maxLaneHeight = isLR ? maxLaneIndex * (nodeH + gapY) - gapY : sortedRanks.length * (nodeH + gapY) - gapY;
+    const maxRankWidth = isLR ? sortedRanks.length * (nodeW + gapX) - gapX : maxLaneIndex * (nodeW + gapX) - gapX;
     sortedRanks.forEach((r, rIdx) => {
       const ids = rankGroups[r];
-      maxLaneIndex = Math.max(maxLaneIndex, ids.length);
-      ids.forEach((id, lIdx) => {
-        if (isLR) {
+      if (isLR) {
+        const colHeight = ids.length * (nodeH + gapY) - gapY;
+        const offsetY = (maxLaneHeight - colHeight) / 2;
+        ids.forEach((id, lIdx) => {
           positions[id] = {
             x: 40 + rIdx * (nodeW + gapX),
-            y: 40 + lIdx * (nodeH + gapY)
+            y: 40 + offsetY + lIdx * (nodeH + gapY)
           };
-        } else {
+        });
+      } else {
+        const rowWidth = ids.length * (nodeW + gapX) - gapX;
+        const offsetX = (maxRankWidth - rowWidth) / 2;
+        ids.forEach((id, lIdx) => {
           positions[id] = {
-            x: 40 + lIdx * (nodeW + gapX),
+            x: 40 + offsetX + lIdx * (nodeW + gapX),
             y: 40 + rIdx * (nodeH + gapY)
           };
-        }
-      });
+        });
+      }
     });
     const totalWidth = isLR ? 80 + Math.max(1, sortedRanks.length) * (nodeW + gapX) - gapX : 80 + Math.max(1, maxLaneIndex) * (nodeW + gapX) - gapX;
-    const totalHeight = isLR ? 80 + Math.max(1, maxLaneIndex) * (nodeH + gapY) - gapY : 80 + Math.max(1, sortedRanks.length) * (nodeH + gapY) - gapY;
+    const totalHeight = isLR ? 80 + maxLaneHeight : 80 + Math.max(1, sortedRanks.length) * (nodeH + gapY) - gapY;
     const arrowColor = theme.colors.accent || theme.colors.primary;
     const markerId = `arrow-${Math.random().toString(36).slice(2, 8)}`;
+    const surfaceFill = theme.colors.surface || "rgba(15, 23, 42, 0.85)";
+    const textFill = theme.colors.text || "#ffffff";
+    const mutedColor = theme.colors.muted || "#64748b";
+    const borderColor = theme.colors.border || "rgba(255, 255, 255, 0.15)";
     let edgesSvg = "";
     d.edges.forEach((e) => {
       const p1 = positions[e.from];
@@ -7862,8 +8165,8 @@ var HtmlRenderer = class {
       edgesSvg += `<path d="M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}" fill="none" stroke="${arrowColor}" stroke-width="2" ${dash} marker-end="url(#${markerId})" />`;
       if (e.label) {
         edgesSvg += `<g transform="translate(${midX}, ${midY})">
-          <rect x="-35" y="-10" width="70" height="20" rx="4" fill="rgba(15, 23, 42, 0.85)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
-          <text x="0" y="3" text-anchor="middle" fill="#e2e8f0" font-size="10" font-family="sans-serif">${this.escapeHtml(e.label)}</text>
+          <rect x="-42" y="-11" width="84" height="22" rx="6" fill="${surfaceFill}" stroke="${borderColor}" stroke-width="1.2"/>
+          <text x="0" y="4" text-anchor="middle" fill="${mutedColor}" font-size="10.5" font-weight="600" font-family="sans-serif">${this.escapeHtml(e.label)}</text>
         </g>`;
       }
     });
@@ -7885,28 +8188,28 @@ var HtmlRenderer = class {
       let shapeSvg = "";
       if (n.shape === "database") {
         shapeSvg = `
-          <rect x="${p.x}" y="${p.y}" width="${nodeW}" height="${nodeH}" rx="6" fill="rgba(15, 23, 42, 0.75)" stroke="${nodeColor}" stroke-width="2" />
-          <path d="M ${p.x} ${p.y + 12} C ${p.x + nodeW / 2} ${p.y + 20}, ${p.x + nodeW / 2} ${p.y + 20}, ${p.x + nodeW} ${p.y + 12}" fill="none" stroke="${nodeColor}" stroke-width="1.5"/>
+          <rect x="${p.x}" y="${p.y}" width="${nodeW}" height="${nodeH}" rx="8" fill="${surfaceFill}" stroke="${nodeColor}" stroke-width="2" />
+          <path d="M ${p.x} ${p.y + 11} C ${p.x + nodeW / 2} ${p.y + 18}, ${p.x + nodeW / 2} ${p.y + 18}, ${p.x + nodeW} ${p.y + 11}" fill="none" stroke="${nodeColor}" stroke-width="1.5"/>
         `;
       } else if (n.shape === "diamond") {
         const cx = p.x + nodeW / 2;
         const cy = p.y + nodeH / 2;
-        shapeSvg = `<polygon points="${cx},${p.y} ${p.x + nodeW},${cy} ${cx},${p.y + nodeH} ${p.x},${cy}" fill="rgba(15, 23, 42, 0.75)" stroke="${nodeColor}" stroke-width="2"/>`;
+        shapeSvg = `<polygon points="${cx},${p.y} ${p.x + nodeW},${cy} ${cx},${p.y + nodeH} ${p.x},${cy}" fill="${surfaceFill}" stroke="${nodeColor}" stroke-width="2"/>`;
       } else {
-        shapeSvg = `<rect x="${p.x}" y="${p.y}" width="${nodeW}" height="${nodeH}" rx="8" fill="rgba(15, 23, 42, 0.75)" stroke="${nodeColor}" stroke-width="2" />`;
+        shapeSvg = `<rect x="${p.x}" y="${p.y}" width="${nodeW}" height="${nodeH}" rx="10" fill="${surfaceFill}" stroke="${nodeColor}" stroke-width="2" />`;
       }
       nodesSvg += `
         <g class="yumia-diag-node" data-id="${n.id}">
           ${shapeSvg}
-          <text x="${p.x + nodeW / 2}" y="${p.y + nodeH / 2 + 4}" text-anchor="middle" fill="#ffffff" font-size="12" font-weight="600" font-family="sans-serif">${this.escapeHtml(n.label)}</text>
+          <text x="${p.x + nodeW / 2}" y="${p.y + nodeH / 2 + 4}" text-anchor="middle" fill="${textFill}" font-size="11.5" font-weight="700" font-family="sans-serif">${this.escapeHtml(n.label)}</text>
         </g>
       `;
     });
-    const titleHtml = d.title ? `<div style="font-weight:700; font-size:1.1rem; color:var(--yumia-primary); margin-bottom:0.6rem; text-align:center;">${this.escapeHtml(d.title)}</div>` : "";
+    const titleHtml = d.title ? `<div style="font-weight:700; font-size:1.05rem; color:var(--yumia-primary); margin-bottom:0.4rem; text-align:center;">${this.escapeHtml(d.title)}</div>` : "";
     return `
-      <div class="yumia-diagram-container" style="width:100%; display:flex; flex-direction:column; align-items:center; margin:1rem 0;">
+      <div class="yumia-diagram-container">
         ${titleHtml}
-        <svg class="yumia-diagram" viewBox="0 0 ${totalWidth} ${totalHeight}" style="max-width:100%; height:auto; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px;">
+        <svg class="yumia-diagram" viewBox="0 0 ${totalWidth} ${totalHeight}" preserveAspectRatio="xMidYMid meet">
           <defs>
             <marker id="${markerId}" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
               <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="${arrowColor}" />
@@ -8149,7 +8452,14 @@ var PdfRenderer = class {
     }
     const progressWidth = slideNum / totalSlides * pageWidth;
     doc.rect(0, pageHeight - 4, progressWidth, 4).fill(theme.colors.primary);
-    doc.font("Helvetica").fontSize(10).fillColor(theme.colors.muted || "#888888").text(`${slideNum} / ${totalSlides}`, pageWidth - padX - 60, pageHeight - 24, {
+    if (presentation?.metadata.watermark) {
+      const watermarkText = typeof presentation.metadata.watermark === "string" ? presentation.metadata.watermark : "CONFIDENTIAL";
+      doc.font("Helvetica-Bold").fontSize(9).fillColor(theme.colors.muted || "#888888").text(watermarkText.toUpperCase(), padX, pageHeight - 22, {
+        width: contentWidth - 80,
+        align: "left"
+      });
+    }
+    doc.font("Helvetica").fontSize(10).fillColor(theme.colors.muted || "#888888").text(`${slideNum} / ${totalSlides}`, pageWidth - padX - 60, pageHeight - 22, {
       width: 60,
       align: "right"
     });
@@ -8158,18 +8468,19 @@ var PdfRenderer = class {
     switch (element.type) {
       case "hero": {
         const hero = element;
+        const align = hero.align || "center";
         let curY = y;
         if (hero.tagline) {
           doc.font("Helvetica-Bold").fontSize(11).fillColor(theme.colors.primary);
-          doc.text(this.stripFormatting(hero.tagline).toUpperCase(), x, curY, { width });
+          doc.text(this.stripFormatting(hero.tagline).toUpperCase(), x, curY, { width, align });
           curY += 20;
         }
         doc.font("Helvetica-Bold").fontSize(34).fillColor(theme.colors.text);
-        doc.text(this.stripFormatting(hero.title), x, curY, { width, lineGap: 6 });
+        doc.text(this.stripFormatting(hero.title), x, curY, { width, lineGap: 6, align });
         curY += doc.heightOfString(this.stripFormatting(hero.title), { width }) + 8;
         if (hero.subtitle) {
           doc.font("Helvetica").fontSize(16).fillColor(theme.colors.muted || "#888888");
-          doc.text(this.stripFormatting(hero.subtitle), x, curY, { width, lineGap: 4 });
+          doc.text(this.stripFormatting(hero.subtitle), x, curY, { width, lineGap: 4, align });
           curY += doc.heightOfString(this.stripFormatting(hero.subtitle), { width }) + 12;
         }
         if (hero.elements) {
@@ -8290,20 +8601,24 @@ var PdfRenderer = class {
         const card = element;
         const variantColor = this.getVariantColor(card.variant, theme);
         const cardPad = 14;
-        let cardCursorY = y + cardPad;
+        let estHeight = cardPad * 2;
         if (card.title) {
-          doc.font("Helvetica-Bold").fontSize(15).fillColor(variantColor).text(this.stripFormatting(card.title), x + cardPad, cardCursorY, {
-            width: width - cardPad * 2
-          });
-          cardCursorY += 22;
+          doc.font("Helvetica-Bold").fontSize(15);
+          estHeight += doc.heightOfString(this.stripFormatting(card.title), { width: width - cardPad * 2 }) + 8;
         }
         if (card.elements) {
           for (const child of card.elements) {
-            cardCursorY = this.renderElement(doc, child, x + cardPad, cardCursorY, width - cardPad * 2, theme);
-            cardCursorY += 8;
+            if (child.type === "metric")
+              estHeight += 95;
+            else if (child.type === "paragraph") {
+              doc.font("Helvetica").fontSize(12);
+              estHeight += doc.heightOfString(this.stripFormatting(child.text), { width: width - cardPad * 2 }) + 8;
+            } else {
+              estHeight += 45;
+            }
           }
         }
-        const totalCardHeight = Math.max(70, cardCursorY - y + cardPad);
+        const totalCardHeight = Math.max(80, estHeight);
         doc.save();
         doc.roundedRect(x, y, width, totalCardHeight, 8).fill(theme.colors.surface || "rgba(255,255,255,0.06)");
         doc.roundedRect(x, y, width, totalCardHeight, 8).lineWidth(1.5).strokeColor(variantColor).stroke();
@@ -8313,12 +8628,11 @@ var PdfRenderer = class {
           doc.font("Helvetica-Bold").fontSize(15).fillColor(variantColor).text(this.stripFormatting(card.title), x + cardPad, renderTop, {
             width: width - cardPad * 2
           });
-          renderTop += 22;
+          renderTop += doc.heightOfString(this.stripFormatting(card.title), { width: width - cardPad * 2 }) + 8;
         }
         if (card.elements) {
           for (const child of card.elements) {
-            renderTop = this.renderElement(doc, child, x + cardPad, renderTop, width - cardPad * 2, theme);
-            renderTop += 8;
+            renderTop = this.renderElement(doc, child, x + cardPad, renderTop, width - cardPad * 2, theme, presentation) + 6;
           }
         }
         return y + totalCardHeight;
@@ -8326,15 +8640,15 @@ var PdfRenderer = class {
       case "metric": {
         const m = element;
         const variantColor = this.getVariantColor(m.variant, theme);
-        const boxHeight = 90;
+        const boxHeight = 85;
         doc.roundedRect(x, y, width, boxHeight, 8).fill(theme.colors.surface || "rgba(255,255,255,0.06)");
         doc.roundedRect(x, y, width, boxHeight, 8).lineWidth(1.5).strokeColor(variantColor).stroke();
-        doc.font("Helvetica-Bold").fontSize(11).fillColor(theme.colors.muted || "#888888").text(m.label.toUpperCase(), x + 16, y + 14, { width: width - 32 });
+        doc.font("Helvetica-Bold").fontSize(10).fillColor(theme.colors.muted || "#888888").text(m.label.toUpperCase(), x + 14, y + 12, { width: width - 28 });
         const displayVal = m.unit ? `${m.value} ${m.unit}` : m.value;
-        doc.font("Helvetica-Bold").fontSize(28).fillColor(theme.colors.primary).text(displayVal, x + 16, y + 32, { width: width - 32 });
+        doc.font("Helvetica-Bold").fontSize(26).fillColor(variantColor).text(displayVal, x + 14, y + 28, { width: width - 28 });
         if (m.change) {
           const changeColor = m.change.startsWith("+") ? "#10b981" : "#ef4444";
-          doc.font("Helvetica-Bold").fontSize(12).fillColor(changeColor).text(m.change, x + width - 90, y + 38, { width: 74, align: "right" });
+          doc.font("Helvetica-Bold").fontSize(11).fillColor(changeColor).text(m.change, x + width - 85, y + 34, { width: 70, align: "right" });
         }
         return y + boxHeight;
       }
@@ -8357,7 +8671,7 @@ var PdfRenderer = class {
           const colWidth = ratios[i] / totalRatio * availableWidth;
           let colCursorY = y;
           for (const child of col.elements) {
-            colCursorY = this.renderElement(doc, child, curX, colCursorY, colWidth, theme);
+            colCursorY = this.renderElement(doc, child, curX, colCursorY, colWidth, theme, presentation);
             colCursorY += 8;
           }
           if (colCursorY > maxY)
@@ -8448,27 +8762,65 @@ var PdfRenderer = class {
       }
       case "compare": {
         const c = element;
-        const colW = (width - 24) / 2;
-        let leftY = y + 12;
-        let rightY = y + 12;
+        const colW = (width - 32) / 2;
+        const pad = 14;
+        let leftContentH = 0;
+        if (c.leftTitle)
+          leftContentH += 24;
+        for (const el of c.left) {
+          if (el.type === "metric")
+            leftContentH += 95;
+          else if (el.type === "paragraph") {
+            doc.font("Helvetica").fontSize(12);
+            leftContentH += doc.heightOfString(this.stripFormatting(el.text), { width: colW - pad * 2 }) + 8;
+          } else if (el.type === "badge")
+            leftContentH += 32;
+          else
+            leftContentH += 45;
+        }
+        let rightContentH = 0;
+        if (c.rightTitle)
+          rightContentH += 24;
+        for (const el of c.right) {
+          if (el.type === "metric")
+            rightContentH += 95;
+          else if (el.type === "paragraph") {
+            doc.font("Helvetica").fontSize(12);
+            rightContentH += doc.heightOfString(this.stripFormatting(el.text), { width: colW - pad * 2 }) + 8;
+          } else if (el.type === "badge")
+            rightContentH += 32;
+          else
+            rightContentH += 45;
+        }
+        const totalH = Math.max(leftContentH, rightContentH, 90) + pad * 2;
+        const rightX = x + colW + 32;
+        doc.save();
+        doc.roundedRect(x, y, colW, totalH, 8).fill(theme.colors.surface || "rgba(255,255,255,0.06)");
+        doc.roundedRect(x, y, colW, totalH, 8).lineWidth(1.5).strokeColor(theme.colors.border || "rgba(255,255,255,0.15)").stroke();
+        doc.roundedRect(rightX, y, colW, totalH, 8).fill(theme.colors.surface || "rgba(255,255,255,0.06)");
+        doc.roundedRect(rightX, y, colW, totalH, 8).lineWidth(1.5).strokeColor(theme.colors.border || "rgba(255,255,255,0.15)").stroke();
+        const vsX = x + colW + 4;
+        const vsY = y + totalH / 2 - 12;
+        doc.roundedRect(vsX, vsY, 24, 24, 12).fill(theme.colors.surface || "#151522");
+        doc.roundedRect(vsX, vsY, 24, 24, 12).lineWidth(1).strokeColor(theme.colors.border || "rgba(255,255,255,0.2)").stroke();
+        doc.font("Helvetica-Bold").fontSize(9).fillColor(theme.colors.muted || "#888888").text("VS", vsX, vsY + 7, { width: 24, align: "center" });
+        doc.restore();
+        let leftY = y + pad;
         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;
+          doc.font("Helvetica-Bold").fontSize(14).fillColor(theme.colors.primary).text(this.stripFormatting(c.leftTitle), x + pad, leftY, { width: colW - pad * 2 });
+          leftY += 24;
         }
         for (const el of c.left) {
-          leftY = this.renderElement(doc, el, x + 12, leftY, colW - 24, theme) + 6;
+          leftY = this.renderElement(doc, el, x + pad, leftY, colW - pad * 2, theme, presentation) + 6;
         }
-        const rightX = x + colW + 24;
+        let rightY = y + pad;
         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;
+          doc.font("Helvetica-Bold").fontSize(14).fillColor(theme.colors.primary).text(this.stripFormatting(c.rightTitle), rightX + pad, rightY, { width: colW - pad * 2 });
+          rightY += 24;
         }
         for (const el of c.right) {
-          rightY = this.renderElement(doc, el, rightX + 12, rightY, colW - 24, theme) + 6;
+          rightY = this.renderElement(doc, el, rightX + pad, rightY, colW - pad * 2, theme, presentation) + 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": {
@@ -8705,22 +9057,30 @@ var PdfRenderer = class {
       titleOffset = 24;
     }
     const startY = y + titleOffset;
+    const maxLaneHeight = isLR ? maxLane * (nodeH + gapY) - gapY : numRanks * (nodeH + gapY) - gapY;
+    const maxRankWidth = isLR ? numRanks * (nodeW + gapX) - gapX : maxLane * (nodeW + gapX) - gapX;
     const positions = {};
     sortedRanks.forEach((r, rIdx) => {
       const ids = rankGroups[r];
-      ids.forEach((id, lIdx) => {
-        if (isLR) {
+      if (isLR) {
+        const colHeight = ids.length * (nodeH + gapY) - gapY;
+        const offsetY = (maxLaneHeight - colHeight) / 2;
+        ids.forEach((id, lIdx) => {
           positions[id] = {
             x: x + 20 + rIdx * (nodeW + gapX),
-            y: startY + 10 + lIdx * (nodeH + gapY)
+            y: startY + 10 + offsetY + lIdx * (nodeH + gapY)
           };
-        } else {
+        });
+      } else {
+        const rowWidth = ids.length * (nodeW + gapX) - gapX;
+        const offsetX = (maxRankWidth - rowWidth) / 2;
+        ids.forEach((id, lIdx) => {
           positions[id] = {
-            x: x + 20 + lIdx * (nodeW + gapX),
+            x: x + 20 + offsetX + lIdx * (nodeW + gapX),
             y: startY + 10 + rIdx * (nodeH + gapY)
           };
-        }
-      });
+        });
+      }
     });
     const arrowColor = theme.colors.accent || theme.colors.primary;
     diagram.edges.forEach((e) => {
@@ -8768,7 +9128,7 @@ var PdfRenderer = class {
       doc.roundedRect(p.x, p.y, nodeW, nodeH, 6).fill(theme.colors.surface || "#151522");
       doc.roundedRect(p.x, p.y, nodeW, nodeH, 6).lineWidth(1.5).strokeColor(nodeColor).stroke();
       doc.restore();
-      doc.font("Helvetica-Bold").fontSize(10).fillColor("#ffffff").text(this.stripFormatting(n.label), p.x + 4, p.y + nodeH / 2 - 5, {
+      doc.font("Helvetica-Bold").fontSize(10).fillColor(theme.colors.text).text(this.stripFormatting(n.label), p.x + 4, p.y + nodeH / 2 - 5, {
         width: nodeW - 8,
         align: "center"
       });
@@ -8910,7 +9270,7 @@ function startDevServer(filePath, options = {}) {
 // src/cli.ts
 import { mkdirSync, readFileSync as readFileSync3, watch as fsWatch, writeFileSync } from "fs";
 import { basename, dirname, extname, join, resolve as resolve2 } from "path";
-var VERSION = "0.1.25";
+var VERSION = "0.1.27";
 function printHelp() {
   return `
 YumiaMD \u2014 Markdown-based presentation compiler (v${VERSION})

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.25";
+declare const VERSION = "0.1.27";
 declare function printHelp(): string;
 declare function runCli(argv: string[]): Promise<{
     exitCode: number;

package/dist/index.js

@@ -73,7 +73,7 @@ import {
   terminalTheme,
   tokyoNightTheme,
   validate
-} from "./chunk-PRZ5CFRH.js";
+} from "./chunk-FTPWLNJL.js";
 export {
   DEFAULT_VIEWPORT,
   DefaultLayoutEngine,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yumiamd",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "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.25",
-    "@yumiamd/parser": "0.1.25",
-    "@yumiamd/layout": "0.1.25",
-    "@yumiamd/renderer": "0.1.25",
-    "@yumiamd/core": "0.1.25",
-    "@yumiamd/renderer-html": "0.1.25",
-    "@yumiamd/renderer-pdf": "0.1.25",
-    "@yumiamd/renderer-pptx": "0.1.25",
-    "@yumiamd/theme": "0.1.25"
+    "@yumiamd/ast": "0.1.27",
+    "@yumiamd/layout": "0.1.27",
+    "@yumiamd/core": "0.1.27",
+    "@yumiamd/parser": "0.1.27",
+    "@yumiamd/renderer": "0.1.27",
+    "@yumiamd/renderer-html": "0.1.27",
+    "@yumiamd/renderer-pptx": "0.1.27",
+    "@yumiamd/theme": "0.1.27",
+    "@yumiamd/renderer-pdf": "0.1.27"
   },
   "keywords": [
     "yumia",