yumiamd 0.1.31 → 0.1.33

package/dist/bin.js

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

package/dist/{chunk-VMBKNPA7.js → chunk-IY7SXY6N.js}

@@ -2193,7 +2193,7 @@ var NativeYumiaParser = class {
             }
           } else if (dLine.startsWith("node ")) {
             const nParts = dLine.slice(5).trim();
-            const nIdMatch = nParts.match(/^(\S+)/);
+            const nIdMatch = nParts.match(/^(\[[^\]]+\]|\([^)]+\)|\{[^}]+\}|[a-zA-Z0-9_-]+(?:\[\([^)]+\)\]|\(\([^)]+\)\)|\[[^\]]+\]|\{[^}]+\})?)/);
             const nLabelMatch = nParts.match(/\blabel=["']([^"']+)["']/);
             const nShapeMatch = nParts.match(/\bshape=["']?([^"'\s]+)["']?/);
             const nVarMatch = nParts.match(/\bvariant=["']?([^"'\s]+)["']?/);
@@ -2202,6 +2202,7 @@ var NativeYumiaParser = class {
               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);
+              nodeMap.set(node.id, node);
             }
           }
           nextIdx++;
@@ -2753,9 +2754,17 @@ function computeDiagramLayout(diagram, availableWidth, isLR = (diagram.direction
   };
   if (nodeIds.length === 0)
     return empty;
+  const connected = /* @__PURE__ */ new Set();
+  diagram.edges.forEach((e) => {
+    connected.add(e.from);
+    connected.add(e.to);
+  });
+  const activeIds = connected.size > 0 ? nodeIds.filter((id) => connected.has(id)) : nodeIds;
+  if (activeIds.length === 0)
+    return empty;
   const inDegree = {};
   const adj = {};
-  nodeIds.forEach((id) => {
+  activeIds.forEach((id) => {
     inDegree[id] = 0;
     adj[id] = [];
   });
@@ -2769,20 +2778,20 @@ function computeDiagramLayout(diagram, availableWidth, isLR = (diagram.direction
   });
   const ranks = {};
   const queue = [];
-  const visitBudget = Math.max(4, nodeIds.length * 2);
+  const visitBudget = Math.max(4, activeIds.length * 2);
   const visits = {};
-  nodeIds.forEach((id) => {
+  activeIds.forEach((id) => {
     if (inDegree[id] === 0) {
       ranks[id] = 0;
       queue.push(id);
     }
   });
   if (queue.length === 0) {
-    ranks[nodeIds[0]] = 0;
-    queue.push(nodeIds[0]);
+    ranks[activeIds[0]] = 0;
+    queue.push(activeIds[0]);
   }
   let steps = 0;
-  const maxSteps = nodeIds.length * nodeIds.length + 8;
+  const maxSteps = activeIds.length * activeIds.length + 8;
   while (queue.length > 0 && steps < maxSteps) {
     steps++;
     const u = queue.shift();
@@ -2791,7 +2800,7 @@ function computeDiagramLayout(diagram, availableWidth, isLR = (diagram.direction
       continue;
     const r = ranks[u] ?? 0;
     for (const v of adj[u] || []) {
-      const nextR = Math.min(nodeIds.length - 1, r + 1);
+      const nextR = Math.min(activeIds.length - 1, r + 1);
       if (ranks[v] === void 0 || ranks[v] < nextR) {
         ranks[v] = nextR;
         if ((visits[v] || 0) <= visitBudget) {
@@ -2800,13 +2809,13 @@ function computeDiagramLayout(diagram, availableWidth, isLR = (diagram.direction
       }
     }
   }
-  nodeIds.forEach((id, idx) => {
+  activeIds.forEach((id, idx) => {
     if (ranks[id] === void 0) {
-      ranks[id] = Math.min(idx, nodeIds.length - 1);
+      ranks[id] = Math.min(idx, activeIds.length - 1);
     }
   });
   const rankGroups = {};
-  nodeIds.forEach((id) => {
+  activeIds.forEach((id) => {
     const r = ranks[id] ?? 0;
     if (!rankGroups[r])
       rankGroups[r] = [];
@@ -2819,13 +2828,14 @@ function computeDiagramLayout(diagram, availableWidth, isLR = (diagram.direction
     maxLane = Math.max(maxLane, rankGroups[r].length);
   });
   const titleOffset = diagram.title ? options.titleHeight ?? 28 : 0;
-  const gapX = isLR ? 28 : 20;
-  const gapY = isLR ? 18 : 28;
-  const nodeWidth = isLR ? Math.max(72, Math.min(140, (availableWidth - 40 - gapX * (numRanks - 1)) / numRanks)) : Math.max(80, Math.min(150, (availableWidth - 40 - gapX * (maxLane - 1)) / Math.max(1, maxLane)));
-  const longestLabel = Math.max(1, ...diagram.nodes.map((n) => (n.label || n.id).length));
-  const charsPerLine = Math.max(8, Math.floor((nodeWidth - 12) / 6.2));
+  const gapX = isLR ? 36 : 24;
+  const gapY = isLR ? 22 : 32;
+  const nodeWidth = isLR ? Math.max(100, Math.min(260, (availableWidth - 48 - gapX * (numRanks - 1)) / numRanks)) : Math.max(100, Math.min(220, (availableWidth - 48 - gapX * (maxLane - 1)) / Math.max(1, maxLane)));
+  const activeNodes = diagram.nodes.filter((n) => activeIds.includes(n.id));
+  const longestLabel = Math.max(1, ...activeNodes.map((n) => (n.label || n.id).length));
+  const charsPerLine = Math.max(8, Math.floor((nodeWidth - 16) / 6.5));
   const labelLines = Math.max(1, Math.ceil(longestLabel / charsPerLine));
-  const nodeHeight = Math.max(36, Math.min(72, 18 + labelLines * 14));
+  const nodeHeight = Math.max(40, Math.min(84, 20 + labelLines * 16));
   const contentH = isLR ? maxLane * (nodeHeight + gapY) - gapY : numRanks * (nodeHeight + gapY) - gapY;
   const height = titleOffset + 24 + contentH + 16;
   const originX = options.originX ?? 0;
@@ -2983,7 +2993,7 @@ var DefaultLayoutEngine = class {
         return { element, bounds: { x, y, width, height } };
       }
       case "code": {
-        const height = this.estimateCodeHeight(element);
+        const height = this.estimateCodeHeight(element, width);
         return { element, bounds: { x, y, width, height } };
       }
       case "quote": {
@@ -3005,11 +3015,11 @@ var DefaultLayoutEngine = class {
       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);
+        const height = Math.max(100, lines * 30 + (c.title ? 52 : 0) + 40);
         return { element, bounds: { x, y, width, height } };
       }
       case "badge": {
-        return { element, bounds: { x, y, width, height: 45 } };
+        return { element, bounds: { x, y, width, height: 52 } };
       }
       case "math": {
         const height = 90;
@@ -3087,19 +3097,19 @@ var DefaultLayoutEngine = class {
   layoutHero(element, x, y, width, gap, compact = false) {
     let curY = y;
     if (element.badge || element.tagline) {
-      curY += compact ? 40 : 52;
+      curY += compact ? 44 : 56;
     }
-    const charsPerLineTitle = Math.max(12, Math.floor(width / (compact ? 32 : 28)));
+    const charsPerLineTitle = Math.max(10, Math.floor(width / (compact ? 36 : 30)));
     const titleLines = Math.max(1, Math.ceil(element.title.length / charsPerLineTitle));
-    const titleHeight = compact ? Math.max(56, titleLines * 44 + 12) : Math.max(100, titleLines * 72 + 24);
+    const titleHeight = compact ? Math.max(72, titleLines * 52 + 16) : Math.max(110, titleLines * 76 + 28);
     curY += titleHeight;
     if (element.subtitle) {
-      const charsPerLineSub = Math.max(20, Math.floor(width / (compact ? 20 : 18)));
+      const charsPerLineSub = Math.max(18, Math.floor(width / (compact ? 22 : 18)));
       const subLines = Math.max(1, Math.ceil(element.subtitle.length / charsPerLineSub));
-      const subHeight = compact ? Math.max(36, subLines * 28 + 10) : Math.max(56, subLines * 36 + 16);
+      const subHeight = compact ? Math.max(44, subLines * 34 + 12) : Math.max(64, subLines * 40 + 18);
       curY += subHeight;
     }
-    curY += compact ? 10 : 16;
+    curY += compact ? 14 : 20;
     const children = [];
     if (element.elements) {
       for (const child of element.elements) {
@@ -3116,19 +3126,29 @@ var DefaultLayoutEngine = class {
   }
   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 rawGap = element.gap !== void 0 ? Number(element.gap) : gap;
+    const gridGap = Number.isFinite(rawGap) && rawGap >= 0 ? rawGap : gap;
+    const totalGap = gridGap * (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 colX = x + colIdx * (colWidth + gridGap);
       const childEl = element.elements[i];
       const childNode = this.layoutSingleElement(childEl, colX, colYs[colIdx], colWidth, gap);
       children.push(childNode);
-      colYs[colIdx] += childNode.bounds.height + gap;
+      colYs[colIdx] += childNode.bounds.height + gridGap;
     }
-    const maxGridHeight = Math.max(...colYs.map((cy) => cy - y), 100);
+    const rowCount = Math.ceil(children.length / colCount);
+    for (let row = 0; row < rowCount; row++) {
+      const rowNodes = children.slice(row * colCount, row * colCount + colCount);
+      const rowMax = Math.max(...rowNodes.map((n) => n.bounds.height), 0);
+      for (const node of rowNodes) {
+        node.bounds.height = rowMax;
+      }
+    }
+    const maxGridHeight = Math.max(...children.map((n) => n.bounds.y + n.bounds.height - y), 100);
     return {
       element,
       bounds: { x, y, width, height: maxGridHeight },
@@ -3136,12 +3156,13 @@ var DefaultLayoutEngine = class {
     };
   }
   layoutCompare(element, x, y, width, gap) {
-    const colW = (width - gap) / 2;
-    const titleH = 45;
-    const pad = 24;
+    const vsGap = Math.max(gap, 56);
+    const colW = (width - vsGap) / 2;
+    const titleH = 56;
+    const pad = 28;
     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 rightX = x + colW + vsGap;
     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;
@@ -3171,11 +3192,12 @@ var DefaultLayoutEngine = class {
     }
   }
   layoutCard(element, x, y, width, gap) {
-    const cardPadding = 32;
+    const cardPadding = 28;
     const innerWidth = Math.max(10, width - cardPadding * 2);
-    const titleHeight = element.title ? 60 : 0;
+    const titleHeight = element.title ? 56 : 0;
     const innerStartY = y + cardPadding + titleHeight;
-    const { nodes: children, totalHeight: innerHeight } = this.layoutElementList(element.elements, x + cardPadding, innerStartY, innerWidth, gap);
+    const innerGap = Math.min(12, Math.max(6, Math.round(gap * 0.4)));
+    const { nodes: children, totalHeight: innerHeight } = this.layoutElementList(element.elements, x + cardPadding, innerStartY, innerWidth, innerGap);
     const cardHeight = titleHeight + innerHeight + cardPadding * 2 + 12;
     const bounds = { x, y, width, height: Math.max(120, cardHeight) };
     return {
@@ -3227,30 +3249,36 @@ var DefaultLayoutEngine = class {
   }
   estimateHeadingHeight(heading, width = 1600) {
     const fontSize = heading.level === 1 ? 46 : heading.level === 2 ? 36 : 28;
-    const charWidth = fontSize * 0.55;
-    const charsPerLine = Math.max(15, Math.floor(width / charWidth));
+    const charWidth = fontSize * 0.62;
+    const charsPerLine = Math.max(12, Math.floor(width / charWidth));
     const lines = Math.ceil(heading.text.length / charsPerLine) || 1;
-    const lineHeight = fontSize * 1.25;
-    return Math.max(heading.level === 1 ? 90 : 70, Math.round(lines * lineHeight + 20));
+    const lineHeight = fontSize * 1.4;
+    const minH = heading.level === 1 ? 110 : heading.level === 2 ? 88 : 72;
+    return Math.max(minH, Math.round(lines * lineHeight + 28));
   }
   estimateParagraphHeight(paragraph, width) {
-    const charsPerLine = Math.max(20, Math.floor(width / 14));
+    const charsPerLine = Math.max(18, Math.floor(width / 9.5));
     const lines = Math.ceil(paragraph.text.length / charsPerLine) || 1;
-    return Math.max(40, lines * 36);
+    return Math.max(36, lines * 34 + 8);
   }
   estimateListHeight(list, width = 800) {
-    const charsPerLine = Math.max(15, Math.floor(width / 13));
+    const charsPerLine = Math.max(18, Math.floor(width / 9.5));
     let totalHeight = 0;
     for (const item of list.items) {
       const cleanLen = item.text.replace(/\*\*/g, "").replace(/\*/g, "").length;
       const lines = Math.ceil(cleanLen / charsPerLine) || 1;
-      totalHeight += lines * 34 + 18;
+      totalHeight += lines * 32 + 10;
     }
     return Math.max(40, totalHeight);
   }
-  estimateCodeHeight(code) {
-    const lines = code.code.split("\n").length || 1;
-    return lines * 28 + 48;
+  estimateCodeHeight(code, width = 800) {
+    const lines = code.code.split("\n");
+    const charsPerLine = Math.max(18, Math.floor((width - 48) / 9.5));
+    let visualLines = 0;
+    for (const line of lines) {
+      visualLines += Math.max(1, Math.ceil((line.length || 1) / charsPerLine));
+    }
+    return Math.max(120, visualLines * 34 + 84);
   }
   estimateQuoteHeight(quote, width) {
     const charsPerLine = Math.max(20, Math.floor(width / 14));
@@ -6261,7 +6289,9 @@ var PptxRenderer = class {
       h: rect.h,
       align: paragraph.align || "left",
       valign: "top",
-      margin: 0
+      margin: 0,
+      // Keep glyphs inside the layout box; wrapping is fine, overflow into neighbors is not.
+      shrinkText: rect.h < 0.32
     });
   }
   renderList(pptxSlide, list, rect, theme) {
@@ -6601,14 +6631,15 @@ var PptxRenderer = class {
       });
     } else {
       pptxSlide.addText(code.code, {
-        x: rect.x + 0.2,
-        y: rect.y + 0.32,
-        w: rect.w - 0.4,
-        h: rect.h - 0.4,
-        fontSize: 11.5,
+        x: rect.x + 0.22,
+        y: rect.y + 0.36,
+        w: Math.max(0.2, rect.w - 0.44),
+        h: Math.max(0.2, rect.h - 0.48),
+        fontSize: rect.h < 2.2 ? 10 : 11.5,
         fontFace: "Consolas",
         color: textColor,
-        valign: "top"
+        valign: "top",
+        margin: 0
       });
     }
   }
@@ -6674,12 +6705,12 @@ var PptxRenderer = class {
       line: { color: sevColor, width: 2 },
       rectRadius: 0.08
     });
-    const titleH = callout.title ? 0.35 : 0;
+    const titleH = callout.title ? 0.38 : 0;
     if (callout.title) {
       pptxSlide.addText(callout.title, {
-        x: rect.x + 0.15,
-        y: rect.y + 0.08,
-        w: rect.w - 0.3,
+        x: rect.x + 0.2,
+        y: rect.y + 0.16,
+        w: rect.w - 0.4,
         h: 0.3,
         fontSize: 13,
         bold: true,
@@ -6688,10 +6719,10 @@ var PptxRenderer = class {
       });
     }
     pptxSlide.addText(callout.text, {
-      x: rect.x + 0.15,
-      y: rect.y + titleH + 0.08,
-      w: rect.w - 0.3,
-      h: rect.h - titleH - 0.16,
+      x: rect.x + 0.2,
+      y: rect.y + titleH + 0.14,
+      w: rect.w - 0.4,
+      h: Math.max(0.2, rect.h - titleH - 0.28),
       fontSize: 12,
       color: this.cleanHexColor(theme.colors.text),
       fontFace: cleanFontFace(theme.typography.bodyFont),
@@ -6708,15 +6739,17 @@ var PptxRenderer = class {
     };
     const align = hero.align || "center";
     const compact = rect.h < 2.4;
-    let curY = rect.y + (compact ? 0.12 : 0.3);
-    if (hero.badge) {
+    const maxY = rect.y + rect.h - 0.04;
+    let curY = rect.y + (compact ? 0.08 : 0.24);
+    if (hero.badge && curY < maxY) {
       const badgeW = Math.min(3.2, Math.max(1.4, hero.badge.length * 0.11 + 0.6));
       const badgeX = align === "left" ? rect.x : align === "right" ? rect.x + rect.w - badgeW : rect.x + (rect.w - badgeW) / 2;
+      const badgeH = Math.min(compact ? 0.26 : 0.32, maxY - curY);
       pptxSlide.addShape(pptx.ShapeType.roundRect, {
         x: badgeX,
         y: curY,
         w: badgeW,
-        h: compact ? 0.26 : 0.32,
+        h: badgeH,
         fill: { color: this.cleanHexColor(theme.colors.surface) },
         line: { color: this.cleanHexColor(theme.colors.primary), width: 1.5 },
         rectRadius: 0.16
@@ -6725,7 +6758,7 @@ var PptxRenderer = class {
         x: badgeX,
         y: curY,
         w: badgeW,
-        h: compact ? 0.26 : 0.32,
+        h: badgeH,
         fontSize: compact ? 9 : 10,
         bold: true,
         color: this.cleanHexColor(theme.colors.primary),
@@ -6734,12 +6767,13 @@ var PptxRenderer = class {
         valign: "middle"
       });
       curY += compact ? 0.36 : 0.48;
-    } else if (hero.tagline) {
+    } else if (hero.tagline && curY < maxY) {
+      const tagH = Math.min(0.32, maxY - curY);
       pptxSlide.addText(hero.tagline.toUpperCase(), {
         x: rect.x,
         y: curY,
         w: rect.w,
-        h: 0.32,
+        h: tagH,
         fontSize: compact ? 10 : 11,
         bold: true,
         color: this.cleanHexColor(theme.colors.primary),
@@ -6749,24 +6783,28 @@ var PptxRenderer = class {
       curY += compact ? 0.34 : 0.42;
     }
     const titleLines = Math.max(1, Math.ceil(hero.title.length / (compact ? 48 : 38)));
-    const titleH = Math.max(compact ? 0.42 : 0.7, titleLines * (compact ? 0.36 : 0.55) + 0.08);
+    const titleBudget = Math.max(0.24, maxY - curY - (hero.subtitle ? 0.3 : 0.02));
+    const titleH = Math.min(Math.max(compact ? 0.42 : 0.7, titleLines * (compact ? 0.36 : 0.55) + 0.08), titleBudget);
     const displaySize = themeSizeToPptxPoints(theme.typography.sizes?.display, 56);
-    const titleFontSize = compact ? titleLines > 1 ? Math.min(22, displaySize - 14) : Math.min(26, displaySize - 10) : titleLines > 2 ? displaySize - 10 : titleLines > 1 ? displaySize - 6 : displaySize;
-    pptxSlide.addText(hero.title, {
-      x: rect.x,
-      y: curY,
-      w: rect.w,
-      h: titleH,
-      fontSize: titleFontSize,
-      bold: true,
-      color: this.cleanHexColor(theme.colors.text),
-      fontFace: cleanFontFace(theme.typography.headingFont),
-      align
-    });
+    const titleFontSize = compact ? titleLines > 1 ? Math.min(20, displaySize - 16) : Math.min(24, displaySize - 12) : titleLines > 2 ? displaySize - 10 : titleLines > 1 ? displaySize - 6 : displaySize;
+    if (titleH >= 0.24) {
+      pptxSlide.addText(hero.title, {
+        x: rect.x,
+        y: curY,
+        w: rect.w,
+        h: titleH,
+        fontSize: titleFontSize,
+        bold: true,
+        color: this.cleanHexColor(theme.colors.text),
+        fontFace: cleanFontFace(theme.typography.headingFont),
+        align,
+        valign: "top"
+      });
+    }
     curY += titleH + (compact ? 0.04 : 0.08);
-    if (hero.subtitle) {
+    if (hero.subtitle && curY < maxY - 0.14) {
       const subLines = Math.max(1, Math.ceil(hero.subtitle.length / (compact ? 64 : 56)));
-      const subH = Math.max(compact ? 0.28 : 0.38, subLines * 0.28 + 0.06);
+      const subH = Math.min(Math.max(compact ? 0.28 : 0.38, subLines * 0.28 + 0.06), maxY - curY);
       const bodySize = themeSizeToPptxPoints(theme.typography.sizes?.body, 18);
       const subFontSize = compact ? bodySize - 1 : subLines > 2 ? bodySize - 1 : bodySize + 1;
       pptxSlide.addText(hero.subtitle, {
@@ -6777,22 +6815,22 @@ var PptxRenderer = class {
         fontSize: subFontSize,
         color: this.cleanHexColor(theme.colors.muted || theme.colors.text),
         fontFace: cleanFontFace(theme.typography.bodyFont),
-        align
+        align,
+        valign: "top"
       });
       curY += subH + (compact ? 0.06 : 0.12);
     }
-    if (hero.tagline && hero.badge) {
+    if (hero.tagline && hero.badge && curY + 0.28 <= maxY) {
       pptxSlide.addText(hero.tagline, {
         x: rect.x,
         y: curY,
         w: rect.w,
-        h: 0.3,
+        h: 0.28,
         fontSize: 12,
         color: this.cleanHexColor(theme.colors.muted || theme.colors.text),
         fontFace: cleanFontFace(theme.typography.bodyFont),
         align
       });
-      curY += 0.35;
     }
     if (node.children) {
       for (const childNode of node.children) {
@@ -7024,7 +7062,7 @@ ${item.description}` : "";
     const { element, bounds } = node;
     const compare = element;
     const rect = this.toInches(bounds, scaleX, scaleY);
-    const colW = (rect.w - 0.4) / 2;
+    const colW = (rect.w - 0.5) / 2;
     pptxSlide.addShape(pptx.ShapeType.roundRect, {
       x: rect.x,
       y: rect.y,
@@ -7046,7 +7084,7 @@ ${item.description}` : "";
         fontFace: cleanFontFace(theme.typography.headingFont)
       });
     }
-    const rightX = rect.x + colW + 0.4;
+    const rightX = rect.x + colW + 0.5;
     pptxSlide.addShape(pptx.ShapeType.roundRect, {
       x: rightX,
       y: rect.y,
@@ -7068,26 +7106,30 @@ ${item.description}` : "";
         fontFace: cleanFontFace(theme.typography.headingFont)
       });
     }
-    const vsX = rect.x + colW + 0.05;
-    pptxSlide.addShape(pptx.ShapeType.roundRect, {
+    const vsW = 0.42;
+    const vsH = 0.42;
+    const vsX = rect.x + colW + (0.5 - vsW) / 2;
+    const vsY = rect.y + rect.h / 2 - vsH / 2;
+    pptxSlide.addShape(pptx.ShapeType.ellipse, {
       x: vsX,
-      y: rect.y + rect.h / 2 - 0.18,
-      w: 0.3,
-      h: 0.3,
-      fill: { color: this.cleanHexColor(theme.colors.border || "#334155") },
-      rectRadius: 0.15
+      y: vsY,
+      w: vsW,
+      h: vsH,
+      fill: { color: this.cleanHexColor(theme.colors.surface || theme.colors.background) },
+      line: { color: this.cleanHexColor(theme.colors.primary), width: 1.5 }
     });
     pptxSlide.addText("VS", {
       x: vsX,
-      y: rect.y + rect.h / 2 - 0.18,
-      w: 0.3,
-      h: 0.3,
-      fontSize: 10,
+      y: vsY,
+      w: vsW,
+      h: vsH,
+      fontSize: 11,
       bold: true,
-      color: this.cleanHexColor(theme.colors.muted || "#94a3b8"),
+      color: this.cleanHexColor(theme.colors.text),
       fontFace: cleanFontFace(theme.typography.headingFont),
       align: "center",
-      valign: "middle"
+      valign: "middle",
+      margin: 0
     });
     if (node.children) {
       for (const childNode of node.children) {
@@ -7522,17 +7564,18 @@ ${mermaid.code}`, {
           line: { color: nodeBorderColor, width: 1 }
         });
       }
-      pptxSlide.addText(fitDiagramLabel(n.label, Math.max(8, Math.floor(nodeW * 12))), {
-        x: p.x + 0.06,
+      pptxSlide.addText(fitDiagramLabel(n.label, Math.max(10, Math.floor(nodeW * 72 / 6.8))), {
+        x: p.x + 0.08,
         y: p.y + 0.06,
-        w: Math.max(0.1, nodeW - 0.12),
+        w: Math.max(0.1, nodeW - 0.16),
         h: Math.max(0.1, nodeH - 0.12),
         align: "center",
         valign: "middle",
-        fontSize: n.label.length > 18 ? 10 : 11,
+        fontSize: nodeW < 1.1 ? 10 : n.label.length > 22 ? 11 : 12,
         bold: true,
         color: this.cleanHexColor(theme.colors.text || "ffffff"),
-        fontFace: cleanFontFace(theme.typography.headingFont)
+        fontFace: cleanFontFace(theme.typography.headingFont),
+        margin: 0
       });
     });
   }
@@ -8156,10 +8199,12 @@ var HtmlRenderer = class {
     .yumia-grid {
       display: grid;
       width: 100%;
-      flex: 1;
+      flex: 1 1 auto;
       min-height: 0;
+      max-height: 100%;
       gap: clamp(1rem, 1.8vw, 1.6rem);
       align-items: stretch;
+      align-content: start;
       margin-top: 0.4rem;
     }
 
@@ -8203,14 +8248,16 @@ var HtmlRenderer = class {
       background: var(--yumia-surface);
       border: 1.5px solid var(--yumia-border);
       border-radius: 14px;
-      padding: clamp(1.2rem, 2vw, 1.8rem);
+      padding: clamp(1.1rem, 1.8vw, 1.5rem);
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      gap: 0.7rem;
+      gap: 0.45rem;
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
       height: 100%;
+      max-height: 100%;
       min-height: 0;
+      overflow: hidden;
       box-sizing: border-box;
       transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
     }
@@ -9856,7 +9903,8 @@ var HtmlRenderer = class {
       case "grid": {
         const g = element;
         const cols = typeof g.columns === "number" ? `repeat(${g.columns}, minmax(0, 1fr))` : g.columns;
-        const gap = g.gap !== void 0 ? typeof g.gap === "number" ? `${g.gap}px` : g.gap : "1.5rem";
+        const gapRaw = g.gap !== void 0 ? g.gap : "1.5rem";
+        const gap = typeof gapRaw === "number" ? `${gapRaw}px` : /^\d+(\.\d+)?$/.test(String(gapRaw).trim()) ? `${String(gapRaw).trim()}px` : String(gapRaw);
         const inner = g.elements.map((child) => this.renderElement(child, theme, presentation)).join("\n");
         return `<div class="yumia-grid" style="grid-template-columns:${cols}; gap:${gap};">${inner}</div>`;
       }
@@ -10732,6 +10780,10 @@ var PdfRenderer = class {
       }
       return;
     }
+    if (el.type === "diagram") {
+      this.renderDiagram(doc, el, x, y, w, h, theme);
+      return;
+    }
     this.renderElement(doc, el, x, y, w, theme, presentation);
   }
   paintCardFrame(doc, card, x, y, width, height, theme) {
@@ -10761,9 +10813,9 @@ var PdfRenderer = class {
     doc.restore();
     const midX = x + colW + gap / 2;
     const midY = y + height / 2;
-    doc.circle(midX, midY, 14).fill(theme.colors.surface || "#151522");
-    doc.circle(midX, midY, 14).lineWidth(1.2).strokeColor(theme.colors.primary).stroke();
-    doc.font(this.getPdfFont(theme, "bold")).fontSize(9).fillColor(theme.colors.text).text("VS", midX - 12, midY - 4, { width: 24, align: "center" });
+    doc.circle(midX, midY, 16).fill(theme.colors.surface || "#151522");
+    doc.circle(midX, midY, 16).lineWidth(1.4).strokeColor(theme.colors.primary).stroke();
+    doc.font(this.getPdfFont(theme, "bold")).fontSize(10).fillColor(theme.colors.text).text("VS", midX - 14, midY - 5, { width: 28, align: "center" });
     if (compare.leftTitle) {
       doc.font(this.getPdfFont(theme, "bold")).fontSize(11).fillColor(leftColor).text(this.stripFormatting(compare.leftTitle), x + 10, y + 10, {
         width: colW - 20,
@@ -11267,7 +11319,10 @@ var PdfRenderer = class {
           doc.roundedRect(x, y, width, boxH2, 8).strokeColor(theme.colors.border || "rgba(255,255,255,0.1)").stroke();
           let topY2 = y + 8;
           if (ch.title) {
-            doc.font(this.getPdfFont(theme, "bold")).fontSize(13).fillColor(theme.colors.text).text(this.stripFormatting(ch.title), x + 14, topY2, { width: width - 28, align: "center" });
+            doc.font(this.getPdfFont(theme, "bold")).fontSize(13).fillColor(theme.colors.text).text(this.stripFormatting(ch.title), x + 14, topY2, {
+              width: width - 28,
+              align: "center"
+            });
             topY2 += 18;
           }
           const values2 = ch.series[0]?.values || [];
@@ -11345,7 +11400,10 @@ var PdfRenderer = class {
           doc.roundedRect(x, y, width, boxH2, 8).strokeColor(theme.colors.border || "rgba(255,255,255,0.1)").stroke();
           let topY2 = y + 8;
           if (ch.title) {
-            doc.font(this.getPdfFont(theme, "bold")).fontSize(13).fillColor(theme.colors.text).text(this.stripFormatting(ch.title), x + 14, topY2, { width: width - 28, align: "center" });
+            doc.font(this.getPdfFont(theme, "bold")).fontSize(13).fillColor(theme.colors.text).text(this.stripFormatting(ch.title), x + 14, topY2, {
+              width: width - 28,
+              align: "center"
+            });
             topY2 += 18;
           }
           const val = ch.series[0]?.values[0] || 0;
@@ -11385,7 +11443,10 @@ var PdfRenderer = class {
           }
           doc.font(this.getPdfFont(theme, "bold")).fontSize(20).fillColor(theme.colors.text).text(`${val}%`, cx - 40, cy - 16, { width: 80, align: "center" });
           if (ch.labels?.[0]) {
-            doc.font(this.getPdfFont(theme, "regular")).fontSize(9).fillColor(theme.colors.muted || "#888888").text(this.stripFormatting(ch.labels[0]), cx - 60, cy + 6, { width: 120, align: "center" });
+            doc.font(this.getPdfFont(theme, "regular")).fontSize(9).fillColor(theme.colors.muted || "#888888").text(this.stripFormatting(ch.labels[0]), cx - 60, cy + 6, {
+              width: 120,
+              align: "center"
+            });
           }
           return y + boxH2 + 8;
         }
@@ -11614,7 +11675,7 @@ var PdfRenderer = class {
         return curY;
       }
       case "diagram": {
-        return this.renderDiagram(doc, element, x, y, width, theme);
+        return this.renderDiagram(doc, element, x, y, width, void 0, theme);
       }
       case "sequence": {
         return this.renderSequence(doc, element, x, y, width, theme);
@@ -11626,19 +11687,46 @@ var PdfRenderer = class {
         return y;
     }
   }
-  renderDiagram(doc, diagram, x, y, width, theme) {
+  renderDiagram(doc, diagram, x, y, width, height, theme) {
     const isLR = (diagram.direction || "LR").toUpperCase() === "LR";
     if (diagram.nodes.length === 0)
       return y;
-    const layout = computeDiagramLayout(diagram, width, isLR, {
-      originX: x,
-      originY: y,
-      titleHeight: 24
+    const layout = computeDiagramLayout(diagram, 1e3, isLR, {
+      originX: 0,
+      originY: diagram.title ? 30 : 0,
+      titleHeight: diagram.title ? 30 : 0
     });
-    const { nodeWidth: nodeW, nodeHeight: nodeH, positions } = layout;
+    const { nodeWidth: rawNodeW, nodeHeight: rawNodeH, positions: rawPositions } = layout;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = 0;
+    let maxY = 0;
+    for (const p of Object.values(rawPositions)) {
+      minX = Math.min(minX, p.x);
+      minY = Math.min(minY, p.y);
+      maxX = Math.max(maxX, p.x + rawNodeW);
+      maxY = Math.max(maxY, p.y + rawNodeH);
+    }
+    const contentW = Math.max(1, maxX - minX);
+    const contentH = Math.max(1, maxY - minY);
+    const titleH = diagram.title ? 18 : 0;
     if (diagram.title) {
       doc.font(this.getPdfFont(theme, "bold")).fontSize(14).fillColor(theme.colors.primary).text(this.stripFormatting(diagram.title), x, y, { width, align: "center" });
     }
+    const drawY = y + titleH;
+    const drawH = height !== void 0 ? Math.max(24, height - titleH) : contentH;
+    const scale = Math.min(width / contentW, drawH / contentH, 1);
+    const nodeW = rawNodeW * scale;
+    const nodeH = rawNodeH * scale;
+    const offsetX = x + (width - contentW * scale) / 2;
+    const offsetY = drawY + (drawH - contentH * scale) / 2;
+    const positions = {};
+    for (const [id, p] of Object.entries(rawPositions)) {
+      positions[id] = {
+        x: offsetX + (p.x - minX) * scale,
+        y: offsetY + (p.y - minY) * scale
+      };
+    }
     const arrowColor = theme.colors.accent || theme.colors.primary;
     diagram.edges.forEach((e) => {
       const p1 = positions[e.from];
@@ -11651,7 +11739,7 @@ var PdfRenderer = class {
       const last = pts[pts.length - 1];
       const prev = pts[pts.length - 2];
       doc.save();
-      doc.lineWidth(1.5).strokeColor(arrowColor);
+      doc.lineWidth(Math.max(1, 1.5 * scale)).strokeColor(arrowColor);
       if (e.style === "dashed")
         doc.dash(4, { space: 3 });
       doc.moveTo(pts[0].x, pts[0].y);
@@ -11660,7 +11748,7 @@ var PdfRenderer = class {
       doc.stroke();
       doc.restore();
       const angle = Math.atan2(last.y - prev.y, last.x - prev.x);
-      const headLen = 6;
+      const headLen = Math.max(4, 6 * scale);
       doc.save();
       doc.fillColor(arrowColor);
       doc.moveTo(last.x, last.y).lineTo(last.x - headLen * Math.cos(angle - Math.PI / 6), last.y - headLen * Math.sin(angle - Math.PI / 6)).lineTo(last.x - headLen * Math.cos(angle + Math.PI / 6), last.y - headLen * Math.sin(angle + Math.PI / 6)).fill();
@@ -11670,15 +11758,19 @@ var PdfRenderer = class {
         const midX = mid.x;
         const midY = mid.y;
         const labelText = this.stripFormatting(e.label);
-        const labelW = Math.min(90, Math.max(45, labelText.length * 5.5 + 16));
+        const labelW = Math.min(90 * scale, Math.max(45 * scale, labelText.length * 5.5 * scale + 16));
+        const labelH = Math.max(12, 16 * scale);
         doc.save();
-        doc.roundedRect(midX - labelW / 2, midY - 8, labelW, 16, 4).fill(theme.colors.surface || "#151522");
-        doc.roundedRect(midX - labelW / 2, midY - 8, labelW, 16, 4).lineWidth(0.8).strokeColor(theme.colors.border || "#334155").stroke();
+        doc.roundedRect(midX - labelW / 2, midY - labelH / 2, labelW, labelH, 4).fill(theme.colors.surface || "#151522");
+        doc.roundedRect(midX - labelW / 2, midY - labelH / 2, labelW, labelH, 4).lineWidth(0.8).strokeColor(theme.colors.border || "#334155").stroke();
         doc.restore();
-        doc.font(this.getPdfFont(theme, "bold")).fontSize(7.5).fillColor(theme.colors.muted || "#888888").text(labelText, midX - labelW / 2, midY - 5, { width: labelW, align: "center" });
+        doc.font(this.getPdfFont(theme, "bold")).fontSize(Math.max(6, 7.5 * scale)).fillColor(theme.colors.muted || "#888888").text(labelText, midX - labelW / 2, midY - labelH / 2 + 2, {
+          width: labelW,
+          align: "center"
+        });
       }
     });
-    const maxChars = Math.max(6, Math.floor((nodeW - 10) / 6));
+    const maxChars = Math.max(6, Math.floor((nodeW - 10) / Math.max(4, 6 * scale)));
     diagram.nodes.forEach((n) => {
       const p = positions[n.id];
       if (!p)
@@ -11696,18 +11788,18 @@ var PdfRenderer = class {
       else if (variant === "info")
         nodeColor = theme.colors.info || theme.colors.primary;
       doc.save();
-      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.roundedRect(p.x, p.y, nodeW, nodeH, Math.max(3, 6 * scale)).fill(theme.colors.surface || "#151522");
+      doc.roundedRect(p.x, p.y, nodeW, nodeH, Math.max(3, 6 * scale)).lineWidth(Math.max(1, 1.5 * scale)).strokeColor(nodeColor).stroke();
       doc.restore();
       const label = fitDiagramLabel(this.stripFormatting(n.label), maxChars);
-      doc.font(this.getPdfFont(theme, "bold")).fontSize(Math.min(10, Math.max(7.5, nodeH / 4))).fillColor(theme.colors.text).text(label, p.x + 4, p.y + Math.max(4, nodeH / 2 - 6), {
+      doc.font(this.getPdfFont(theme, "bold")).fontSize(Math.min(10, Math.max(6.5, nodeH / 4))).fillColor(theme.colors.text).text(label, p.x + 4, p.y + Math.max(3, nodeH / 2 - 5), {
         width: nodeW - 8,
-        height: nodeH - 8,
+        height: nodeH - 6,
         align: "center",
         ellipsis: true
       });
     });
-    return y + layout.height + 8;
+    return height !== void 0 ? y + height : y + titleH + contentH * scale + 8;
   }
   renderSequence(doc, s, x, y, width, theme) {
     const participants = s.participants || [];
@@ -11742,7 +11834,10 @@ var PdfRenderer = class {
       doc.restore();
       doc.roundedRect(boxX, topY, partW, 26, 5).fill(theme.colors.surface || "rgba(255,255,255,0.06)");
       doc.roundedRect(boxX, topY, partW, 26, 5).lineWidth(1.2).strokeColor(primaryColor).stroke();
-      doc.font(this.getPdfFont(theme, "bold")).fontSize(9).fillColor(theme.colors.text).text(this.stripFormatting(p.name), boxX + 2, topY + 8, { width: partW - 4, align: "center" });
+      doc.font(this.getPdfFont(theme, "bold")).fontSize(9).fillColor(theme.colors.text).text(this.stripFormatting(p.name), boxX + 2, topY + 8, {
+        width: partW - 4,
+        align: "center"
+      });
     });
     messages.forEach((msg, idx) => {
       const x1 = positions[msg.from] || x + 20;
@@ -11957,7 +12052,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 resolve3 } from "path";
-var VERSION = "0.1.31";
+var VERSION = "0.1.33";
 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.31";
+declare const VERSION = "0.1.33";
 declare function printHelp(): string;
 declare function runCli(argv: string[]): Promise<{
     exitCode: number;

package/dist/index.js

@@ -92,7 +92,7 @@ import {
   themeSizeToPptxPoints,
   tokyoNightTheme,
   validate
-} from "./chunk-VMBKNPA7.js";
+} from "./chunk-IY7SXY6N.js";
 export {
   DEFAULT_VIEWPORT,
   DefaultLayoutEngine,

package/package.json

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