@markdy/core 1.3.2 → 1.4.0

package/dist/index.d.ts

@@ -343,6 +343,8 @@ type TreeBus = {
     branchY: number;
     childXs: number[];
     childY: number;
+    childYs?: number[];
+    vertical?: boolean;
 };
 type TimedCue = {
     start: number;

package/dist/index.js

@@ -758,6 +758,7 @@ var SCENE_KEYS = /* @__PURE__ */ new Set([
   "duration",
   "direction",
   "layout",
+  "rankdir",
   "type",
   ...PLAYER_FLAT_KEYS
 ]);
@@ -803,7 +804,6 @@ var SAFE = 48;
 var TITLE_BAND = 84;
 var NODE_W = 180;
 var NODE_H = 76;
-var VENN_NODE_SIZE = 220;
 var GROUP_PAD = 28;
 function estimateTextLines(words, charsPerLine) {
   if (words.length === 0) return 0;
@@ -943,7 +943,13 @@ function diagramType(ast) {
   return ast.meta.type ?? "architecture";
 }
 function effectiveTitleBand(ast) {
-  return ast.meta.title && ast.meta.title.trim().length > 0 ? TITLE_BAND : 16;
+  if (!ast.meta.title || ast.meta.title.trim().length === 0) return 16;
+  const title = ast.meta.title.trim();
+  const isVertical = ast.meta.direction === "TB" || ast.meta.direction === "BT";
+  if (isVertical && title.length > 26) {
+    return TITLE_BAND + 52;
+  }
+  return TITLE_BAND;
 }
 function nodeShape(kind, dtype, props) {
   if (typeof props?.shape === "string") {
@@ -1251,66 +1257,108 @@ function layoutTree(ast, edges) {
   }
   for (const id of nodeIds) if (!depth.has(id)) depth.set(id, 0);
   const maxDepth = Math.max(...depth.values(), 0);
-  const subtreeSpan = /* @__PURE__ */ new Map();
-  function leafSpan(id) {
-    const w = nodeDims.get(id)?.width ?? NODE_W;
-    return w + 36;
-  }
-  function measureSubtree(id) {
-    const kids = children.get(id) ?? [];
-    const minSpan = leafSpan(id);
-    if (kids.length === 0) {
-      subtreeSpan.set(id, minSpan);
-      return minSpan;
-    }
-    let total = 0;
-    for (const kid of kids) {
-      total += measureSubtree(kid);
-    }
-    const span = Math.max(minSpan, total);
-    subtreeSpan.set(id, span);
-    return span;
-  }
-  let totalRootsWidth = 0;
-  for (const r of roots) {
-    totalRootsWidth += measureSubtree(r);
-  }
+  const isVertical = ast.meta.direction === "TB" || ast.meta.direction === "BT";
   const contentW = ast.meta.width - SAFE * 2;
   const contentH = ast.meta.height - SAFE - TITLE_BAND - SAFE;
-  const treeStartX = SAFE + Math.max(0, (contentW - totalRootsWidth) / 2);
-  const levelHeight = Math.max(maxNodeH + 40, Math.min(220, contentH / Math.max(maxDepth + 1, 1)));
-  const totalTreeHeight = maxDepth * levelHeight + maxNodeH;
-  const treeStartY = TITLE_BAND + Math.max(16, (contentH - totalTreeHeight) / 2);
   const nodePositions = /* @__PURE__ */ new Map();
-  function positionSubtree(id, leftX) {
-    const d = depth.get(id) ?? 0;
-    const y = treeStartY + d * levelHeight;
-    const kids = children.get(id) ?? [];
-    const span = subtreeSpan.get(id) ?? leafSpan(id);
-    const dims = nodeDims.get(id) ?? { width: NODE_W, height: NODE_H };
-    if (kids.length === 0) {
-      const centerX = leftX + span / 2;
-      nodePositions.set(id, { x: centerX - dims.width / 2, y });
-      return;
-    }
-    let curX = leftX;
-    for (const kid of kids) {
-      const kidSpan = subtreeSpan.get(kid) ?? leafSpan(kid);
-      positionSubtree(kid, curX);
-      curX += kidSpan;
-    }
-    const firstChild = nodePositions.get(kids[0]);
-    const lastChild = nodePositions.get(kids[kids.length - 1]);
-    const firstDims = nodeDims.get(kids[0]) ?? { width: NODE_W, height: NODE_H };
-    const lastDims = nodeDims.get(kids[kids.length - 1]) ?? { width: NODE_W, height: NODE_H };
-    const parentCenterX = (firstChild.x + firstDims.width / 2 + lastChild.x + lastDims.width / 2) / 2;
-    nodePositions.set(id, { x: parentCenterX - dims.width / 2, y });
-  }
-  let currentRootLeft = treeStartX;
-  for (const r of roots) {
-    const span = subtreeSpan.get(r) ?? leafSpan(r);
-    positionSubtree(r, currentRootLeft);
-    currentRootLeft += span;
+  if (isVertical) {
+    let layoutSubtree2 = function(nodeId, d) {
+      if (visited.has(nodeId)) return;
+      visited.add(nodeId);
+      const dims = nodeDims.get(nodeId);
+      const x = treeStartX + d * indentStep;
+      nodePositions.set(nodeId, { x, y: curY });
+      const kids = (children.get(nodeId) ?? []).filter((k) => !visited.has(k));
+      curY += dims.height + siblingGap;
+      kids.forEach((kId, idx) => {
+        layoutSubtree2(kId, d + 1);
+        if (idx === kids.length - 1 && d === 0) {
+          curY += branchGap - siblingGap;
+        }
+      });
+    };
+    var layoutSubtree = layoutSubtree2;
+    const indentStep = 32;
+    const siblingGap = 16;
+    const branchGap = 28;
+    const titleTop = effectiveTitleBand(ast) + 16;
+    const maxTreeW = maxDepth * indentStep + Math.max(...nodeIds.map((id) => nodeDims.get(id).width));
+    const treeStartX = SAFE + Math.max(12, (contentW - maxTreeW) / 2);
+    const visited = /* @__PURE__ */ new Set();
+    let curY = titleTop;
+    for (const r of roots) {
+      layoutSubtree2(r, 0);
+      curY += branchGap;
+    }
+    for (const id of nodeIds) {
+      if (!visited.has(id)) {
+        visited.add(id);
+        const dims = nodeDims.get(id);
+        nodePositions.set(id, {
+          x: treeStartX,
+          y: curY
+        });
+        curY += dims.height + siblingGap;
+      }
+    }
+  } else {
+    let leafSpan2 = function(id) {
+      const w = nodeDims.get(id)?.width ?? NODE_W;
+      return w + 36;
+    }, measureSubtree2 = function(id) {
+      const kids = children.get(id) ?? [];
+      const minSpan = leafSpan2(id);
+      if (kids.length === 0) {
+        subtreeSpan.set(id, minSpan);
+        return minSpan;
+      }
+      let total = 0;
+      for (const kid of kids) {
+        total += measureSubtree2(kid);
+      }
+      const span = Math.max(minSpan, total);
+      subtreeSpan.set(id, span);
+      return span;
+    }, positionSubtree2 = function(id, leftX) {
+      const d = depth.get(id) ?? 0;
+      const y = treeStartY + d * levelHeight;
+      const kids = children.get(id) ?? [];
+      const span = subtreeSpan.get(id) ?? leafSpan2(id);
+      const dims = nodeDims.get(id) ?? { width: NODE_W, height: NODE_H };
+      if (kids.length === 0) {
+        const centerX = leftX + span / 2;
+        nodePositions.set(id, { x: centerX - dims.width / 2, y });
+        return;
+      }
+      let curX = leftX;
+      for (const kid of kids) {
+        const kidSpan = subtreeSpan.get(kid) ?? leafSpan2(kid);
+        positionSubtree2(kid, curX);
+        curX += kidSpan;
+      }
+      const firstChild = nodePositions.get(kids[0]);
+      const lastChild = nodePositions.get(kids[kids.length - 1]);
+      const firstDims = nodeDims.get(kids[0]) ?? { width: NODE_W, height: NODE_H };
+      const lastDims = nodeDims.get(kids[kids.length - 1]) ?? { width: NODE_W, height: NODE_H };
+      const parentCenterX = (firstChild.x + firstDims.width / 2 + lastChild.x + lastDims.width / 2) / 2;
+      nodePositions.set(id, { x: parentCenterX - dims.width / 2, y });
+    };
+    var leafSpan = leafSpan2, measureSubtree = measureSubtree2, positionSubtree = positionSubtree2;
+    const subtreeSpan = /* @__PURE__ */ new Map();
+    let totalRootsWidth = 0;
+    for (const r of roots) {
+      totalRootsWidth += measureSubtree2(r);
+    }
+    const treeStartX = SAFE + Math.max(0, (contentW - totalRootsWidth) / 2);
+    const levelHeight = Math.max(maxNodeH + 40, Math.min(220, contentH / Math.max(maxDepth + 1, 1)));
+    const totalTreeHeight = maxDepth * levelHeight + maxNodeH;
+    const treeStartY = TITLE_BAND + Math.max(16, (contentH - totalTreeHeight) / 2);
+    let currentRootLeft = treeStartX;
+    for (const r of roots) {
+      const span = subtreeSpan.get(r) ?? leafSpan2(r);
+      positionSubtree2(r, currentRootLeft);
+      currentRootLeft += span;
+    }
   }
   const nodes = [];
   for (const id of nodeIds) {
@@ -1489,45 +1537,85 @@ function layoutMedallion(ast, edges) {
   }
   const activeTiers = [...tiers.entries()].filter(([_, ids]) => ids.length > 0);
   const tierCount = activeTiers.length || 1;
+  const isVertical = ast.meta.direction === "TB" || ast.meta.direction === "BT";
   const contentW = ast.meta.width - SAFE * 2;
   const contentH = ast.meta.height - SAFE - TITLE_BAND - SAFE;
   const maxNodeW = Math.max(...nodeIds.map((id) => nodeDims.get(id).width));
-  const availableColGap = tierCount > 1 ? (contentW - maxNodeW) / (tierCount - 1) : 0;
-  const colGap = Math.max(maxNodeW + 36, Math.min(360, availableColGap));
-  const totalW = (tierCount - 1) * colGap + maxNodeW;
-  const startX = SAFE + Math.max(0, (contentW - totalW) / 2);
+  const maxNodeH = Math.max(...nodeIds.map((id) => nodeDims.get(id).height));
   const nodes = [];
-  activeTiers.forEach(([_, ids], colIdx) => {
-    const colCount = ids.length;
-    const colTierMaxW = Math.max(...ids.map((id) => nodeDims.get(id).width));
-    const colTierMaxH = Math.max(...ids.map((id) => nodeDims.get(id).height));
-    const colX = startX + colIdx * colGap;
-    const rowSpacing = Math.max(colTierMaxH + 32, contentH / (colCount + 1));
-    const colH = (colCount - 1) * rowSpacing + colTierMaxH;
-    const startY = TITLE_BAND + Math.max(0, (contentH - colH) / 2);
-    ids.forEach((id, rowIdx) => {
-      const decl = ast.nodes[id];
-      const dims = nodeDims.get(id);
-      const rowY = startY + rowIdx * rowSpacing + (colTierMaxH - dims.height) / 2;
-      const nodeX = colX + (colTierMaxW - dims.width) / 2;
-      const focal = decl.props.focal === true || decl.props.accent === true;
-      nodes.push({
-        id,
-        kind: decl.kind,
-        role: nodeRole(decl.kind),
-        label: decl.label,
-        x: snapGrid(nodeX),
-        y: snapGrid(rowY),
-        width: dims.width,
-        height: dims.height,
-        style: resolveNodeStyle(decl, ast),
-        props: decl.props,
-        opacity: 0,
-        shape: "card",
-        focal
+  if (isVertical) {
+    const availableRowGap = tierCount > 1 ? (contentH - maxNodeH * tierCount) / (tierCount - 1) : 32;
+    const rowGap = Math.max(32, Math.min(80, availableRowGap));
+    const totalH = tierCount * maxNodeH + (tierCount - 1) * rowGap;
+    const startY = TITLE_BAND + Math.max(16, (contentH - totalH) / 2);
+    activeTiers.forEach(([_, ids], rowIdx) => {
+      const rowCount = ids.length;
+      const tierMaxH = Math.max(...ids.map((id) => nodeDims.get(id).height));
+      const rowY = startY + rowIdx * (maxNodeH + rowGap);
+      const colSpacing = 28;
+      const totalRowNodesW = ids.reduce((acc, id) => acc + nodeDims.get(id).width, 0);
+      const totalRowW = totalRowNodesW + Math.max(0, rowCount - 1) * colSpacing;
+      let curX = SAFE + Math.max(0, (contentW - totalRowW) / 2);
+      ids.forEach((id) => {
+        const decl = ast.nodes[id];
+        const dims = nodeDims.get(id);
+        const nodeY = rowY + (tierMaxH - dims.height) / 2;
+        const focal = decl.props.focal === true || decl.props.accent === true;
+        nodes.push({
+          id,
+          kind: decl.kind,
+          role: nodeRole(decl.kind),
+          label: decl.label,
+          x: snapGrid(curX),
+          y: snapGrid(nodeY),
+          width: dims.width,
+          height: dims.height,
+          style: resolveNodeStyle(decl, ast),
+          props: decl.props,
+          opacity: 0,
+          shape: "card",
+          focal
+        });
+        curX += dims.width + colSpacing;
       });
     });
-  });
+  } else {
+    const availableColGap = tierCount > 1 ? (contentW - maxNodeW) / (tierCount - 1) : 0;
+    const colGap = Math.max(maxNodeW + 36, Math.min(360, availableColGap));
+    const totalW = (tierCount - 1) * colGap + maxNodeW;
+    const startX = SAFE + Math.max(0, (contentW - totalW) / 2);
+    activeTiers.forEach(([_, ids], colIdx) => {
+      const colCount = ids.length;
+      const colTierMaxW = Math.max(...ids.map((id) => nodeDims.get(id).width));
+      const colTierMaxH = Math.max(...ids.map((id) => nodeDims.get(id).height));
+      const colX = startX + colIdx * colGap;
+      const rowSpacing = Math.max(colTierMaxH + 32, contentH / (colCount + 1));
+      const colH = (colCount - 1) * rowSpacing + colTierMaxH;
+      const startY = TITLE_BAND + Math.max(0, (contentH - colH) / 2);
+      ids.forEach((id, rowIdx) => {
+        const decl = ast.nodes[id];
+        const dims = nodeDims.get(id);
+        const rowY = startY + rowIdx * rowSpacing + (colTierMaxH - dims.height) / 2;
+        const nodeX = colX + (colTierMaxW - dims.width) / 2;
+        const focal = decl.props.focal === true || decl.props.accent === true;
+        nodes.push({
+          id,
+          kind: decl.kind,
+          role: nodeRole(decl.kind),
+          label: decl.label,
+          x: snapGrid(nodeX),
+          y: snapGrid(rowY),
+          width: dims.width,
+          height: dims.height,
+          style: resolveNodeStyle(decl, ast),
+          props: decl.props,
+          opacity: 0,
+          shape: "card",
+          focal
+        });
+      });
+    });
+  }
   return nodes;
 }
 function layoutQuadrant(ast) {
@@ -1724,6 +1812,40 @@ function layoutTimeline(ast) {
   for (const id of nodeIds) {
     nodeDims.set(id, computeNodeDimensions(ast.nodes[id]));
   }
+  const isVertical = ast.meta.direction === "TB" || ast.meta.direction === "BT";
+  if (isVertical) {
+    const topBand = effectiveTitleBand(ast);
+    const contentW2 = ast.meta.width - SAFE * 2;
+    const contentH2 = ast.meta.height - SAFE - topBand - SAFE;
+    const centerX = SAFE + contentW2 / 2;
+    const N = nodeIds.length;
+    const spacingY = contentH2 / Math.max(N, 1);
+    const nodes2 = [];
+    nodeIds.forEach((id, idx) => {
+      const decl = ast.nodes[id];
+      const dims = nodeDims.get(id);
+      const isLeft = N === 1 ? false : idx % 2 === 0;
+      const x = N === 1 ? centerX - dims.width / 2 : isLeft ? centerX - dims.width - 24 : centerX + 24;
+      const y = topBand + spacingY * idx + (spacingY - dims.height) / 2;
+      const focal = decl.props.focal === true || decl.props.accent === true;
+      nodes2.push({
+        id,
+        kind: decl.kind,
+        role: nodeRole(decl.kind),
+        label: decl.label,
+        x: snapGrid(x),
+        y: snapGrid(y),
+        width: dims.width,
+        height: dims.height,
+        style: resolveNodeStyle(decl, ast),
+        props: decl.props,
+        opacity: 0,
+        shape: "pill",
+        focal
+      });
+    });
+    return nodes2;
+  }
   const contentW = ast.meta.width - SAFE * 2;
   const contentH = ast.meta.height - SAFE - TITLE_BAND - SAFE;
   const baselineY = TITLE_BAND + contentH / 2;
@@ -1771,19 +1893,20 @@ function layoutGantt(ast) {
   const totalH = N * rowH;
   const startY = topBand + Math.max(16, (contentH - totalH) / 2);
   const nodes = [];
+  const hasExplicitPhases = nodeIds.some((nid) => typeof ast.nodes[nid].props.phase === "number" || typeof ast.nodes[nid].props.span === "number");
   nodeIds.forEach((id, idx) => {
     const decl = ast.nodes[id];
     const dims = nodeDims.get(id);
     const phase = typeof decl.props.phase === "number" ? decl.props.phase : 0;
     const span = typeof decl.props.span === "number" ? decl.props.span : 1;
-    const totalPhases = Math.max(...nodeIds.map((nid) => {
+    const totalPhases = hasExplicitPhases ? Math.max(...nodeIds.map((nid) => {
       const p = ast.nodes[nid].props.phase;
       const s = ast.nodes[nid].props.span;
       return (typeof p === "number" ? p : 0) + (typeof s === "number" ? s : 1);
-    }), 1);
+    }), 1) : 1;
     const unitW = contentW / totalPhases;
-    const x = SAFE + phase * unitW;
-    const w = Math.max(span * unitW - 8, dims.width);
+    const x = hasExplicitPhases ? SAFE + phase * unitW : SAFE;
+    const w = hasExplicitPhases ? Math.max(span * unitW - 8, dims.width) : contentW;
     const barH = dims.height;
     const y = startY + idx * rowH + (rowH - barH) / 2;
     const focal = decl.props.focal === true || decl.props.accent === true;
@@ -1812,45 +1935,67 @@ function layoutVenn(ast) {
   for (const id of nodeIds) {
     nodeDims.set(id, computeNodeDimensions(ast.nodes[id]));
   }
+  const titleBand = effectiveTitleBand(ast);
+  const bottomBand = ast.beats.some((b) => b.label && b.label.trim().length > 0) ? 44 : 0;
   const contentW = ast.meta.width - SAFE * 2;
-  const contentH = ast.meta.height - SAFE - TITLE_BAND - SAFE;
+  const contentH = ast.meta.height - titleBand - bottomBand - SAFE * 2;
   const centerX = SAFE + contentW / 2;
-  const centerY = TITLE_BAND + contentH / 2;
+  const centerY = titleBand + SAFE + contentH / 2;
   const N = nodeIds.length;
-  const maxNodeDim = Math.max(...nodeIds.map((id) => Math.max(nodeDims.get(id).width, nodeDims.get(id).height)));
-  const vennSize = Math.max(VENN_NODE_SIZE, maxNodeDim);
-  const radius = Math.max(vennSize * 0.7, Math.min(contentW, contentH) * 0.24);
   const nodes = [];
-  nodeIds.forEach((id, idx) => {
-    const decl = ast.nodes[id];
-    const dims = nodeDims.get(id);
-    const circleSize = Math.max(vennSize, dims.width, dims.height);
-    let x, y;
-    if (N === 2) {
-      x = centerX + (idx === 0 ? -radius * 0.7 : radius * 0.7) - circleSize / 2;
-      y = centerY - circleSize / 2;
-    } else {
+  if (N === 2) {
+    const circleSize = snapGrid(Math.min(contentH * 0.85, contentW * 0.85 / 1.6), 16);
+    const radius = circleSize * 0.35;
+    nodeIds.forEach((id, idx) => {
+      const decl = ast.nodes[id];
+      const x = centerX + (idx === 0 ? -radius : radius) - circleSize / 2;
+      const y = centerY - circleSize / 2;
+      const focal = decl.props.focal === true || decl.props.accent === true;
+      nodes.push({
+        id,
+        kind: decl.kind,
+        role: nodeRole(decl.kind),
+        label: decl.label,
+        x: snapGrid(x),
+        y: snapGrid(y),
+        width: circleSize,
+        height: circleSize,
+        style: resolveNodeStyle(decl, ast),
+        props: decl.props,
+        opacity: 0,
+        shape: "circle",
+        focal
+      });
+    });
+  } else {
+    const maxCircleByH = contentH * 0.88 / 1.78;
+    const maxCircleByW = contentW * 0.88 / 1.9;
+    const circleSize = snapGrid(Math.min(320, Math.max(180, Math.min(maxCircleByH, maxCircleByW))), 16);
+    const radius = circleSize * 0.52;
+    const clusterCenterY = centerY + (N === 3 ? radius * 0.25 : 0);
+    nodeIds.forEach((id, idx) => {
+      const decl = ast.nodes[id];
       const angle = -Math.PI / 2 + idx * 2 * Math.PI / N;
-      x = centerX + radius * 0.85 * Math.cos(angle) - circleSize / 2;
-      y = centerY + radius * 0.85 * Math.sin(angle) - circleSize / 2;
-    }
-    const focal = decl.props.focal === true || decl.props.accent === true;
-    nodes.push({
-      id,
-      kind: decl.kind,
-      role: nodeRole(decl.kind),
-      label: decl.label,
-      x: snapGrid(x),
-      y: snapGrid(y),
-      width: circleSize,
-      height: circleSize,
-      style: resolveNodeStyle(decl, ast),
-      props: decl.props,
-      opacity: 0,
-      shape: "circle",
-      focal
+      const x = centerX + radius * Math.cos(angle) - circleSize / 2;
+      const y = clusterCenterY + radius * Math.sin(angle) - circleSize / 2;
+      const focal = decl.props.focal === true || decl.props.accent === true;
+      nodes.push({
+        id,
+        kind: decl.kind,
+        role: nodeRole(decl.kind),
+        label: decl.label,
+        x: snapGrid(x),
+        y: snapGrid(y),
+        width: circleSize,
+        height: circleSize,
+        style: resolveNodeStyle(decl, ast),
+        props: decl.props,
+        opacity: 0,
+        shape: "circle",
+        focal
+      });
     });
-  });
+  }
   return nodes;
 }
 function layoutLayers(ast) {
@@ -1902,49 +2047,97 @@ function layoutNested(ast) {
   for (const id of nodeIds) {
     nodeDims.set(id, computeNodeDimensions(ast.nodes[id]));
   }
-  const topHeadroom = 20;
-  const startY = TITLE_BAND + topHeadroom;
+  const isVertical = ast.meta.direction === "TB" || ast.meta.direction === "BT";
+  const topBand = effectiveTitleBand(ast);
+  const topHeadroom = 16;
+  const startY = topBand + topHeadroom;
   const contentW = ast.meta.width - SAFE * 2;
   const contentH = ast.meta.height - startY - SAFE;
-  const centerX = SAFE + contentW / 2;
-  const centerY = startY + contentH / 2;
   const N = nodeIds.length;
-  const padX = Math.min(54, contentW * 0.42 / Math.max(N, 1));
-  const padY = Math.min(48, contentH * 0.42 / Math.max(N, 1));
   const nodes = [];
-  nodeIds.forEach((id, idx) => {
-    const decl = ast.nodes[id];
-    const dims = nodeDims.get(id);
-    const isCore = idx === N - 1;
-    let x, y, w, h;
-    if (isCore) {
-      w = Math.max(dims.width, Math.min(320, contentW - idx * padX * 2));
-      h = Math.max(dims.height, 84);
-      x = centerX - w / 2;
-      y = centerY - h / 2 + (N > 1 ? 16 : 0);
-    } else {
-      x = SAFE + idx * padX;
-      y = startY + idx * padY;
-      w = Math.max(dims.width, contentW - idx * padX * 2);
-      h = Math.max(dims.height, contentH - idx * padY * 2);
-    }
-    const focal = decl.props.focal === true || decl.props.accent === true || isCore;
-    nodes.push({
-      id,
-      kind: decl.kind,
-      role: nodeRole(decl.kind),
-      label: decl.label,
-      x: snapGrid(x),
-      y: snapGrid(y),
-      width: snapGrid(w),
-      height: snapGrid(h),
-      style: resolveNodeStyle(decl, ast),
-      props: decl.props,
-      opacity: 0,
-      shape: isCore ? "card" : "container",
-      focal
+  if (isVertical) {
+    const stepX = Math.min(40, Math.max(24, contentW * 0.32 / Math.max(N - 1, 1)));
+    const stepY = Math.min(60, Math.max(46, contentH * 0.4 / Math.max(N - 1, 1)));
+    const bottomStepY = Math.min(36, Math.max(22, contentH * 0.22 / Math.max(N - 1, 1)));
+    nodeIds.forEach((id, idx) => {
+      const decl = ast.nodes[id];
+      const dims = nodeDims.get(id);
+      const isCore = idx === N - 1;
+      let x, y, w, h;
+      if (isCore) {
+        const availLeft = SAFE + idx * stepX;
+        const availWidth = Math.max(dims.width, contentW - idx * stepX * 2);
+        const availTop = startY + idx * stepY;
+        const availBottom = startY + contentH - idx * bottomStepY;
+        const availHeight = Math.max(80, availBottom - availTop);
+        w = Math.min(availWidth - 24, Math.max(dims.width, 240));
+        h = Math.max(dims.height, 80);
+        x = availLeft + (availWidth - w) / 2;
+        y = availTop + (availHeight - h) / 2;
+      } else {
+        x = SAFE + idx * stepX;
+        y = startY + idx * stepY;
+        w = contentW - idx * stepX * 2;
+        h = contentH - idx * (stepY + bottomStepY);
+      }
+      const focal = decl.props.focal === true || decl.props.accent === true || isCore;
+      nodes.push({
+        id,
+        kind: decl.kind,
+        role: nodeRole(decl.kind),
+        label: decl.label,
+        x: snapGrid(x),
+        y: snapGrid(y),
+        width: snapGrid(w),
+        height: snapGrid(h),
+        style: resolveNodeStyle(decl, ast),
+        props: decl.props,
+        opacity: 0,
+        shape: isCore ? "card" : "container",
+        focal
+      });
     });
-  });
+  } else {
+    const padX = Math.min(54, contentW * 0.38 / Math.max(N, 1));
+    const padY = Math.min(48, contentH * 0.38 / Math.max(N, 1));
+    nodeIds.forEach((id, idx) => {
+      const decl = ast.nodes[id];
+      const dims = nodeDims.get(id);
+      const isCore = idx === N - 1;
+      let x, y, w, h;
+      if (isCore) {
+        const availLeft = SAFE + idx * padX;
+        const availWidth = Math.max(dims.width, contentW - idx * padX * 2);
+        const availTop = startY + idx * padY;
+        const availHeight = Math.max(80, contentH - idx * padY * 2);
+        w = Math.min(availWidth - 24, Math.max(dims.width, 240));
+        h = Math.max(dims.height, 80);
+        x = availLeft + (availWidth - w) / 2;
+        y = availTop + (availHeight - h) / 2;
+      } else {
+        x = SAFE + idx * padX;
+        y = startY + idx * padY;
+        w = contentW - idx * padX * 2;
+        h = contentH - idx * padY * 2;
+      }
+      const focal = decl.props.focal === true || decl.props.accent === true || isCore;
+      nodes.push({
+        id,
+        kind: decl.kind,
+        role: nodeRole(decl.kind),
+        label: decl.label,
+        x: snapGrid(x),
+        y: snapGrid(y),
+        width: snapGrid(w),
+        height: snapGrid(h),
+        style: resolveNodeStyle(decl, ast),
+        props: decl.props,
+        opacity: 0,
+        shape: isCore ? "card" : "container",
+        focal
+      });
+    });
+  }
   return nodes;
 }
 function layoutRadar(ast) {
@@ -2062,24 +2255,45 @@ function computeTreeBuses(ast, nodes, edges) {
     children.get(edge.from).push(edge.to);
     parent.add(edge.to);
   }
+  const isVertical = ast.meta.direction === "TB" || ast.meta.direction === "BT";
   const buses = [];
   for (const [parentId, childIds] of children) {
     const parentNode = byId.get(parentId);
     const childNodes = childIds.map((id) => byId.get(id)).filter(Boolean);
     if (!parentNode || childNodes.length === 0) continue;
-    const parentX = parentNode.x + parentNode.width / 2;
-    const parentY = parentNode.y + parentNode.height;
-    const childY = Math.min(...childNodes.map((node) => node.y));
-    buses.push({
-      id: `tree_bus_${parentId}`,
-      parentId,
-      childIds,
-      parentX: snapGrid(parentX),
-      parentY: snapGrid(parentY),
-      branchY: snapGrid((parentY + childY) / 2),
-      childXs: childNodes.map((node) => snapGrid(node.x + node.width / 2)),
-      childY: snapGrid(childY)
-    });
+    if (isVertical) {
+      const trunkX = snapGrid(parentNode.x + 18);
+      const parentY = snapGrid(parentNode.y + parentNode.height);
+      const childXs = childNodes.map((node) => snapGrid(node.x));
+      const childYs = childNodes.map((node) => snapGrid(node.y + node.height / 2));
+      buses.push({
+        id: `tree_bus_${parentId}`,
+        parentId,
+        childIds,
+        parentX: trunkX,
+        parentY,
+        branchY: parentY,
+        childXs,
+        childY: childYs[0],
+        childYs,
+        vertical: true
+      });
+    } else {
+      const parentX = parentNode.x + parentNode.width / 2;
+      const parentY = parentNode.y + parentNode.height;
+      const childY = Math.min(...childNodes.map((node) => node.y));
+      buses.push({
+        id: `tree_bus_${parentId}`,
+        parentId,
+        childIds,
+        parentX: snapGrid(parentX),
+        parentY: snapGrid(parentY),
+        branchY: snapGrid((parentY + childY) / 2),
+        childXs: childNodes.map((node) => snapGrid(node.x + node.width / 2)),
+        childY: snapGrid(childY),
+        childYs: childNodes.map((node) => snapGrid(node.y))
+      });
+    }
   }
   return buses;
 }
@@ -2283,7 +2497,7 @@ function computeAdaptiveDimensions(ast, edges) {
   const maxNodeW = nodeDims.length > 0 ? Math.max(...nodeDims.map((d) => d.width)) : NODE_W;
   const maxNodeH = nodeDims.length > 0 ? Math.max(...nodeDims.map((d) => d.height)) : NODE_H;
   const hasTitle = Boolean(ast.meta.title && ast.meta.title.trim().length > 0);
-  const titleBand = hasTitle ? TITLE_BAND : 0;
+  const titleBand = effectiveTitleBand(ast);
   const hasBeatCaptions = ast.beats.some((b) => b.label && b.label.trim().length > 0);
   const bottomBand = hasBeatCaptions ? 44 : 0;
   const titleW = hasTitle ? Math.max(320, ast.meta.title.trim().length * 11 + SAFE * 2) : 0;
@@ -2303,34 +2517,35 @@ function computeAdaptiveDimensions(ast, edges) {
     autoH = Math.max(320, Math.min(1800, requiredH));
   } else if (dtype === "medallion") {
     const tierSet = /* @__PURE__ */ new Set();
+    const tierCounts = /* @__PURE__ */ new Map();
     for (const id of nodeIds) {
       const combined = `${id} ${ast.nodes[id].kind}`.toLowerCase();
-      if (combined.includes("bronze") || combined.includes("raw") || combined.includes("landing")) tierSet.add(1);
-      else if (combined.includes("silver") || combined.includes("clean") || combined.includes("curated") || combined.includes("conformed")) tierSet.add(2);
-      else if (combined.includes("gold") || combined.includes("agg") || combined.includes("mart") || combined.includes("analytics")) tierSet.add(3);
-      else if (combined.includes("bi") || combined.includes("dash") || combined.includes("model") || combined.includes("app") || combined.includes("consumer") || combined.includes("user") || combined.includes("client")) tierSet.add(4);
-      else tierSet.add(0);
+      let t = 0;
+      if (combined.includes("bronze") || combined.includes("raw") || combined.includes("landing")) t = 1;
+      else if (combined.includes("silver") || combined.includes("clean") || combined.includes("curated") || combined.includes("conformed")) t = 2;
+      else if (combined.includes("gold") || combined.includes("agg") || combined.includes("mart") || combined.includes("analytics")) t = 3;
+      else if (combined.includes("bi") || combined.includes("dash") || combined.includes("model") || combined.includes("app") || combined.includes("consumer") || combined.includes("user") || combined.includes("client")) t = 4;
+      tierSet.add(t);
+      tierCounts.set(t, (tierCounts.get(t) ?? 0) + 1);
     }
     const tierCount = Math.max(tierSet.size, 4);
-    const tierW = Math.max(260, maxNodeW + 48);
-    const requiredW = Math.max(SAFE * 2 + tierCount * tierW, titleW);
-    const requiredH = titleBand + SAFE * 2 + Math.max(440, maxNodeH * 3 + 120) + bottomBand;
-    autoW = Math.max(640, Math.min(2800, requiredW));
-    autoH = Math.max(400, Math.min(1600, requiredH));
+    const maxInTier = Math.max(...tierCounts.values(), 2);
+    if (isVertical) {
+      const nodeColSpacing = 28;
+      const tierSpacing = 36;
+      const tierH = Math.max(76, maxNodeH + 16);
+      const requiredW = Math.max(SAFE * 2 + maxInTier * maxNodeW + (maxInTier - 1) * nodeColSpacing, titleW);
+      const requiredH = titleBand + SAFE * 2 + tierCount * tierH + (tierCount - 1) * tierSpacing + bottomBand;
+      autoW = Math.max(540, Math.min(1600, snapGrid(requiredW, 16)));
+      autoH = Math.max(680, Math.min(2e3, snapGrid(requiredH, 16)));
+    } else {
+      const tierW = Math.max(260, maxNodeW + 48);
+      const requiredW = Math.max(SAFE * 2 + tierCount * tierW, titleW);
+      const requiredH = titleBand + SAFE * 2 + Math.max(440, maxNodeH * 3 + 120) + bottomBand;
+      autoW = Math.max(640, Math.min(2800, requiredW));
+      autoH = Math.max(400, Math.min(1600, requiredH));
+    }
   } else if (dtype === "tree") {
-    let measureSubtree2 = function(id) {
-      const kids = children.get(id) ?? [];
-      if (kids.length === 0) {
-        subtreeSpan.set(id, minLeafWidth);
-        return minLeafWidth;
-      }
-      let total = 0;
-      for (const kid of kids) total += measureSubtree2(kid);
-      const span = Math.max(minLeafWidth, total);
-      subtreeSpan.set(id, span);
-      return span;
-    };
-    var measureSubtree = measureSubtree2;
     const children = /* @__PURE__ */ new Map();
     const hasParent = /* @__PURE__ */ new Set();
     for (const id of nodeIds) children.set(id, []);
@@ -2342,31 +2557,74 @@ function computeAdaptiveDimensions(ast, edges) {
       }
     }
     const roots = nodeIds.filter((id) => !hasParent.has(id));
-    const depth = /* @__PURE__ */ new Map();
-    const queue = [...roots];
-    for (const r of roots) depth.set(r, 0);
-    while (queue.length > 0) {
-      const cur = queue.shift();
-      const d = depth.get(cur) ?? 0;
-      for (const child of children.get(cur) ?? []) {
-        if (!depth.has(child)) {
-          depth.set(child, d + 1);
-          queue.push(child);
+    const activeRoots = roots.length > 0 ? roots : nodeIds;
+    if (isVertical) {
+      const indentStep = 32;
+      const siblingGap = 16;
+      const branchGap = 28;
+      const depth = /* @__PURE__ */ new Map();
+      const q = [...activeRoots];
+      for (const r of activeRoots) depth.set(r, 0);
+      while (q.length > 0) {
+        const cur = q.shift();
+        const d = depth.get(cur) ?? 0;
+        for (const child of children.get(cur) ?? []) {
+          if (!depth.has(child)) {
+            depth.set(child, d + 1);
+            q.push(child);
+          }
         }
       }
+      const treeDepth = Math.max(...depth.values(), 0);
+      const maxTreeW = treeDepth * indentStep + maxNodeW;
+      const requiredW = Math.max(SAFE * 2 + maxTreeW + 36, titleW);
+      let totalNodesH = 0;
+      for (const id of nodeIds) {
+        totalNodesH += computeNodeDimensions(ast.nodes[id]).height + siblingGap;
+      }
+      totalNodesH += Math.max(0, activeRoots.length) * branchGap;
+      const requiredH = titleBand + SAFE * 2 + totalNodesH + bottomBand;
+      autoW = Math.max(480, Math.min(1600, snapGrid(requiredW, 16)));
+      autoH = Math.max(640, Math.min(2600, snapGrid(requiredH, 16)));
+    } else {
+      let measureSubtree2 = function(id) {
+        const kids = children.get(id) ?? [];
+        if (kids.length === 0) {
+          subtreeSpan.set(id, minLeafWidth);
+          return minLeafWidth;
+        }
+        let total = 0;
+        for (const kid of kids) total += measureSubtree2(kid);
+        const span = Math.max(minLeafWidth, total);
+        subtreeSpan.set(id, span);
+        return span;
+      };
+      var measureSubtree = measureSubtree2;
+      const depth = /* @__PURE__ */ new Map();
+      const queue = [...roots];
+      for (const r of roots) depth.set(r, 0);
+      while (queue.length > 0) {
+        const cur = queue.shift();
+        const d = depth.get(cur) ?? 0;
+        for (const child of children.get(cur) ?? []) {
+          if (!depth.has(child)) {
+            depth.set(child, d + 1);
+            queue.push(child);
+          }
+        }
+      }
+      for (const id of nodeIds) if (!depth.has(id)) depth.set(id, 0);
+      const maxDepth = Math.max(...depth.values(), 0);
+      const minLeafWidth = Math.max(NODE_W + 36, maxNodeW + 36);
+      const subtreeSpan = /* @__PURE__ */ new Map();
+      let totalRootsWidth = 0;
+      for (const r of activeRoots) totalRootsWidth += measureSubtree2(r);
+      const levelH = Math.max(130, maxNodeH + 54);
+      const requiredW = Math.max(SAFE * 2 + totalRootsWidth, titleW);
+      const requiredH = titleBand + SAFE * 2 + (maxDepth + 1) * levelH + bottomBand;
+      autoW = Math.max(480, Math.min(2560, requiredW));
+      autoH = Math.max(320, Math.min(1800, requiredH));
     }
-    for (const id of nodeIds) if (!depth.has(id)) depth.set(id, 0);
-    const maxDepth = Math.max(...depth.values(), 0);
-    const minLeafWidth = Math.max(NODE_W + 36, maxNodeW + 36);
-    const subtreeSpan = /* @__PURE__ */ new Map();
-    let totalRootsWidth = 0;
-    const activeRoots = roots.length > 0 ? roots : nodeIds;
-    for (const r of activeRoots) totalRootsWidth += measureSubtree2(r);
-    const levelH = Math.max(130, maxNodeH + 54);
-    const requiredW = Math.max(SAFE * 2 + totalRootsWidth, titleW);
-    const requiredH = titleBand + SAFE * 2 + (maxDepth + 1) * levelH + bottomBand;
-    autoW = Math.max(480, Math.min(2560, requiredW));
-    autoH = Math.max(320, Math.min(1800, requiredH));
   } else if (dtype === "swimlane") {
     const laneCount = Math.max(groupCount, 1);
     const maxInLane = Math.max(
@@ -2392,24 +2650,45 @@ function computeAdaptiveDimensions(ast, edges) {
     autoW = Math.max(480, Math.min(2e3, Math.max(SAFE * 2 + maxNodeW + 160, titleW)));
     const requiredH = titleBand + SAFE * 2 + layerCount * layerH + bottomBand;
     autoH = Math.max(320, Math.min(1440, requiredH));
-  } else if (dtype === "timeline" || dtype === "gantt") {
+  } else if (dtype === "timeline") {
     const milestones = Math.max(nodeCount, 1);
-    let totalPhases = milestones;
-    if (dtype === "gantt") {
-      totalPhases = Math.max(...nodeIds.map((nid) => {
+    if (isVertical) {
+      const milestoneH = Math.max(76, maxNodeH);
+      const stepY = Math.max(92, milestoneH + 20);
+      const requiredW = Math.max(SAFE * 2 + maxNodeW * 2 + 64, titleW);
+      const contentH = milestones * stepY;
+      const requiredH = titleBand + SAFE * 2 + contentH + bottomBand;
+      autoW = Math.max(540, Math.min(1600, snapGrid(requiredW, 16)));
+      autoH = Math.max(640, Math.min(2200, snapGrid(requiredH, 16)));
+    } else {
+      const milestoneW = Math.max(220, maxNodeW + 36);
+      const requiredW = Math.max(SAFE * 2 + milestones * milestoneW, titleW);
+      const requiredH = titleBand + SAFE * 2 + Math.max(260, maxNodeH * 2 + 80) + bottomBand;
+      autoW = Math.max(480, Math.min(2560, requiredW));
+      autoH = Math.max(320, Math.min(1600, requiredH));
+    }
+  } else if (dtype === "gantt") {
+    const milestones = Math.max(nodeCount, 1);
+    const hasExplicitPhases = nodeIds.some((nid) => typeof ast.nodes[nid].props.phase === "number" || typeof ast.nodes[nid].props.span === "number");
+    if (isVertical) {
+      const rowH = Math.max(68, maxNodeH + 12);
+      const contentH = milestones * rowH + 24;
+      const requiredW = Math.max(SAFE * 2 + maxNodeW + 48, titleW, 540);
+      const requiredH = titleBand + SAFE * 2 + contentH + bottomBand;
+      autoW = Math.max(540, Math.min(1600, snapGrid(requiredW, 16)));
+      autoH = Math.max(640, Math.min(2200, snapGrid(requiredH, 16)));
+    } else {
+      const totalPhases = hasExplicitPhases ? Math.max(...nodeIds.map((nid) => {
         const p = ast.nodes[nid].props.phase;
         const s = ast.nodes[nid].props.span;
         return (typeof p === "number" ? p : 0) + (typeof s === "number" ? s : 1);
-      }), milestones);
+      }), 1) : Math.min(milestones, 6);
+      const phaseColW = Math.max(120, Math.min(200, maxNodeW * 0.4));
+      const requiredW = Math.max(SAFE * 2 + (hasExplicitPhases ? totalPhases * phaseColW : maxNodeW + 200), titleW);
+      const requiredH = titleBand + SAFE * 2 + milestones * Math.max(76, maxNodeH + 16) + 40 + bottomBand;
+      autoW = Math.max(680, Math.min(2560, snapGrid(requiredW, 16)));
+      autoH = Math.max(480, Math.min(1600, snapGrid(requiredH, 16)));
     }
-    const milestoneW = Math.max(220, maxNodeW + 36);
-    const requiredW = Math.max(
-      SAFE * 2 + (dtype === "gantt" ? totalPhases * Math.max(160, maxNodeW + 16) : milestones * milestoneW),
-      titleW
-    );
-    const requiredH = dtype === "gantt" ? titleBand + SAFE * 2 + milestones * Math.max(76, maxNodeH + 16) + 40 + bottomBand : titleBand + SAFE * 2 + Math.max(260, maxNodeH * 2 + 80) + bottomBand;
-    autoW = Math.max(480, Math.min(2560, requiredW));
-    autoH = Math.max(320, Math.min(1600, requiredH));
   } else if (dtype === "loop" || dtype === "flywheel" || dtype === "radar" || dtype === "venn" || dtype === "constellation") {
     const N = Math.max(nodeCount, 3);
     const minRadius = Math.max(160, maxNodeW * 0.75);
@@ -2424,6 +2703,31 @@ function computeAdaptiveDimensions(ast, edges) {
     const requiredH = titleBand + SAFE * 2 + maxNodeH * 3 + bottomBand;
     autoW = Math.min(2400, requiredW);
     autoH = Math.min(1600, requiredH);
+  } else if (dtype === "nested") {
+    const N = Math.max(nodeCount, 1);
+    const isVertical2 = ast.meta.direction === "TB" || ast.meta.direction === "BT";
+    if (isVertical2) {
+      const coreW = Math.max(280, maxNodeW + 48);
+      const coreH = Math.max(76, maxNodeH + 16);
+      const stepX = 36;
+      const stepY = 56;
+      const bottomStepY = 28;
+      const requiredW = Math.max(SAFE * 2 + coreW + (N - 1) * stepX * 2, titleW);
+      const contentH = (N - 1) * stepY + coreH + (N - 1) * bottomStepY + 48;
+      const requiredH = titleBand + SAFE * 2 + contentH + bottomBand;
+      autoW = Math.max(540, Math.min(1600, snapGrid(requiredW, 16)));
+      autoH = Math.max(680, Math.min(2e3, snapGrid(requiredH, 16)));
+    } else {
+      const coreW = Math.max(300, maxNodeW + 48);
+      const coreH = Math.max(84, maxNodeH + 24);
+      const stepX = 48;
+      const stepY = 40;
+      const requiredW = Math.max(SAFE * 2 + coreW + (N - 1) * stepX * 2 + 100, titleW);
+      const contentH = coreH + (N - 1) * stepY * 2 + 40;
+      const requiredH = titleBand + SAFE * 2 + contentH + bottomBand;
+      autoW = Math.max(720, Math.min(2400, snapGrid(requiredW, 16)));
+      autoH = Math.max(460, Math.min(1400, snapGrid(requiredH, 16)));
+    }
   } else {
     const forceVertical = dtype === "flowchart" && isVertical || isVertical;
     const ranks = assignRanks(nodeIds, effectiveEdges, forceVertical ? "TB" : "LR");
@@ -2472,7 +2776,8 @@ function compilePlan(ast, theme) {
   }
   const nodes = layoutNodes(ast, structuralEdges);
   const groupBoundaries = computeGroupBoundaries(ast, nodes);
-  const treeBuses = computeTreeBuses(ast, nodes, structuralEdges.filter((edge) => edge.structural));
+  const treeEdges = structuralEdges.some((edge) => edge.structural) ? structuralEdges.filter((edge) => edge.structural) : structuralEdges;
+  const treeBuses = computeTreeBuses(ast, nodes, treeEdges);
   const { cues, beats } = scheduleBeats(ast, structuralEdges);
   const sequence = buildSequencePlan(ast, cues);
   const shown = /* @__PURE__ */ new Set();
@@ -3696,11 +4001,11 @@ function parse(source, opts = {}) {
         meta.title = title;
         remainder = str.rest;
       }
-      const inlineLayout = remainder.match(/\blayout\s+(LR|RL|TB|BT)\b/i);
+      const inlineLayout = remainder.match(/\b(?:layout|direction|rankdir)\s+(LR|RL|TB|BT)\b/i);
       if (inlineLayout) {
         meta.direction = inlineLayout[1].toUpperCase();
         meta.explicitDirection = true;
-        remainder = remainder.replace(/\blayout\s+(LR|RL|TB|BT)\b/i, " ");
+        remainder = remainder.replace(/\b(?:layout|direction|rankdir)\s+(LR|RL|TB|BT)\b/i, " ");
       }
       const props = parseProps(remainder);
       for (const [k, v] of Object.entries(props)) {
@@ -3721,7 +4026,7 @@ function parse(source, opts = {}) {
           const val = String(v).toLowerCase();
           meta.theme = val;
           meta.explicitTheme = val !== "auto";
-        } else if (k === "direction" || k === "layout") {
+        } else if (k === "direction" || k === "layout" || k === "rankdir") {
           meta.direction = String(v).toUpperCase();
           meta.explicitDirection = true;
         } else if (PLAYER_FLAT_KEY_SET.has(k)) {
@@ -3733,8 +4038,9 @@ function parse(source, opts = {}) {
             diagnostics.push({ severity: "warning", message: `unknown diagram type '${v}'`, line: lineNo });
           } else {
             meta.type = t;
-            if (t === "flowchart" && !props.direction && !props.layout && !inlineLayout) {
+            if ((t === "flowchart" || t === "nested") && !props.direction && !props.layout && !props.rankdir && !inlineLayout) {
               meta.direction = "TB";
+              meta.explicitDirection = true;
             }
           }
         }
@@ -5893,7 +6199,7 @@ function diagnoseMarkdyCode(code, options = {}) {
           });
         }
       }
-      const layoutMatch = trimmed.match(/\blayout\s*=?\s*(\w+)/i);
+      const layoutMatch = trimmed.match(/\b(?:layout|direction|rankdir)\s*=?\s*(\w+)/i);
       if (layoutMatch) {
         const layoutVal = layoutMatch[1].toUpperCase();
         if (!LAYOUT_DIRECTIONS.includes(layoutVal)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/core",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Diagram-native MarkdyScript parser and compiler (auto-layout, edge routing, cue scheduling) — zero runtime dependencies.",
   "license": "MIT",
   "type": "module",