@cardenelabs/cdl 0.123.0 → 0.125.0

package/dist/react.js

@@ -1004,7 +1004,7 @@ function drawsTitleOutsideBox(kind) {
 }
 var TITLE_FONT_SIZE_DEFAULT = 18;
 var TITLE_FONT_SIZE = new Map([
-  ...["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "station"].map(
+  ...["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon"].map(
     (k) => [k, 13]
   ),
   ...[
@@ -1049,8 +1049,10 @@ var TITLE_FONT_SIZE = new Map([
     "webhook"
   ].map((k) => [k, 20]),
   ...["card", "event", "function"].map((k) => [k, 24]),
+  ["station", 25],
   ["actor", 32],
-  ["storage", 34]
+  ["storage", 34],
+  ["timeline-number", 18]
 ]);
 function titleFontSize(kind) {
   return TITLE_FONT_SIZE.get(kind ?? "") ?? TITLE_FONT_SIZE_DEFAULT;
@@ -1060,9 +1062,17 @@ function skipsNodeTitleWidthCheck(kind) {
   return KINDS_WITH_TITLE_WIDTH_OUTSIDE_NODE.has(kind ?? "");
 }
 var TITLE_BOX_PADDING = 52;
+var TIMELINE_NUMBER_STROKE = 4;
+function titleUsableWidth(kind, w, h) {
+  if (kind === "timeline-number") {
+    return Math.min(w, h) - 2 * TIMELINE_NUMBER_STROKE;
+  }
+  return w - (drawsTitleOutsideBox(kind) ? 0 : TITLE_BOX_PADDING);
+}
 var KINDS_SCALING_TITLE_WHEN_LOW = /* @__PURE__ */ new Set(["actor", "event", "function", "storage"]);
 var KINDS_SCALING_TITLE_ALWAYS = /* @__PURE__ */ new Set([
   "card",
+  "timeline-number",
   "shape-file",
   "shape-folder",
   "shape-cloud",
@@ -1146,14 +1156,16 @@ var KINDS_DRAWING_ONLY_SHAPE = [
 ];
 var KINDS_WITHOUT_EYEBROW_TEXT = /* @__PURE__ */ new Set([
   ...KINDS_DRAWING_ONLY_SHAPE,
-  ...KINDS_WITHOUT_TITLE_TEXT
+  ...KINDS_WITHOUT_TITLE_TEXT,
+  "timeline-number"
 ]);
 function rendersEyebrow(kind) {
   return !KINDS_WITHOUT_EYEBROW_TEXT.has(kind ?? "");
 }
 var KINDS_WITHOUT_SUBTITLE_TEXT = /* @__PURE__ */ new Set([
   ...KINDS_DRAWING_OWN_PAYLOAD,
-  ...KINDS_WITHOUT_TITLE_TEXT
+  ...KINDS_WITHOUT_TITLE_TEXT,
+  "timeline-number"
 ]);
 function rendersSubtitle(kind) {
   return !KINDS_WITHOUT_SUBTITLE_TEXT.has(kind ?? "");
@@ -3087,6 +3099,14 @@ function curvePath(from, to, edge, labelMarginExtra = 0, textMetrics = "proporti
 
 // src/layout/metro-path.ts
 var METRO_CORNER_RADIUS = 24;
+var METRO_BRANCH_CORNER_RADIUS = 22;
+var METRO_BRANCH_STUB = 30;
+var METRO_DECISION_HEIGHT = 88;
+var METRO_DECISION_WIDTH = 116;
+var METRO_RETURN_END_OFFSET = 43;
+var METRO_RETURN_START_OFFSET = 24;
+var METRO_LINE_WIDTH = 10;
+var METRO_LINE_WIDTH_CSS = `var(--cdl-metro-line-width, ${METRO_LINE_WIDTH}px)`;
 var T = Math.SQRT2 - 1;
 function round2(v) {
   return Math.round(v * 100) / 100;
@@ -3104,7 +3124,63 @@ function polyline(points) {
   });
   return distinct.map((p, i) => `${i === 0 ? "M" : "L"} ${point(p)}`).join(" ");
 }
-function metroPath(from, to, edge, labelMarginExtra = 0, textMetrics = "proportional") {
+function quadraticCornerPath(start, corner, end, radius) {
+  const horizontalDir = Math.sign(corner.x - start.x);
+  const verticalDir = Math.sign(end.y - corner.y);
+  const r = Math.min(
+    radius,
+    Math.abs(corner.x - start.x),
+    Math.abs(end.y - corner.y)
+  );
+  const before = { x: corner.x - horizontalDir * r, y: corner.y };
+  const after = { x: corner.x, y: corner.y + verticalDir * r };
+  return [
+    `M ${point(start)}`,
+    `L ${point(before)}`,
+    `Q ${point(corner)} ${point(after)}`,
+    `L ${point(end)}`
+  ].join(" ");
+}
+function decisionBranchPath(start, end) {
+  const horizontalDir = Math.sign(end.x - start.x);
+  const verticalDir = Math.sign(end.y - start.y);
+  const turnX = start.x + horizontalDir * (METRO_BRANCH_STUB + METRO_BRANCH_CORNER_RADIUS);
+  const radius = Math.min(
+    METRO_BRANCH_CORNER_RADIUS,
+    Math.abs(end.y - start.y) / 2,
+    Math.abs(end.x - turnX)
+  );
+  const firstCorner = { x: turnX, y: start.y };
+  const secondCorner = { x: turnX, y: end.y };
+  const beforeFirst = {
+    x: turnX - horizontalDir * radius,
+    y: start.y
+  };
+  const afterFirst = {
+    x: turnX,
+    y: start.y + verticalDir * radius
+  };
+  const beforeSecond = {
+    x: turnX,
+    y: end.y - verticalDir * radius
+  };
+  const afterSecond = {
+    x: turnX + horizontalDir * radius,
+    y: end.y
+  };
+  return {
+    d: [
+      `M ${point(start)}`,
+      `L ${point(beforeFirst)}`,
+      `Q ${point(firstCorner)} ${point(afterFirst)}`,
+      `L ${point(beforeSecond)}`,
+      `Q ${point(secondCorner)} ${point(afterSecond)}`,
+      `L ${point(end)}`
+    ].join(" "),
+    turnX
+  };
+}
+function metroPath(from, to, edge, _labelMarginExtra = 0, _textMetrics = "proportional") {
   const fromLeft = from.cx - from.w / 2;
   const fromRight = from.cx + from.w / 2;
   const toLeft = to.cx - to.w / 2;
@@ -3139,11 +3215,45 @@ function metroPath(from, to, edge, labelMarginExtra = 0, textMetrics = "proporti
   const sgn = Math.sign(dy);
   let d;
   let mid;
-  let tangent;
-  if (Math.abs(dy) < SAME_HEIGHT_THRESHOLD) {
+  let metroReturn = false;
+  if (from.kind === "decision" && Math.abs(dy) >= SAME_HEIGHT_THRESHOLD) {
+    const verticalDir = Math.sign(dy);
+    if (Math.abs(to.cx - from.cx) < SAME_HEIGHT_THRESHOLD) {
+      const start = { x: from.cx, y: from.cy + verticalDir * from.h / 2 };
+      const end = { x: to.cx, y: to.cy };
+      d = polyline([start, end]);
+      fromSide = verticalDir < 0 ? "top" : "bottom";
+      toSide = verticalDir < 0 ? "bottom" : "top";
+      mid = { x: start.x, y: (start.y + end.y) / 2 };
+    } else {
+      const horizontalDir = Math.sign(to.cx - from.cx);
+      const start = {
+        x: from.cx + horizontalDir * from.w / 2,
+        y: from.cy
+      };
+      const end = {
+        x: to.cx - horizontalDir * to.w / 2,
+        y: to.cy
+      };
+      const branch = decisionBranchPath(start, end);
+      d = branch.d;
+      fromSide = horizontalDir > 0 ? "right" : "left";
+      toSide = horizontalDir > 0 ? "left" : "right";
+      mid = { x: branch.turnX, y: (start.y + end.y) / 2 };
+    }
+  } else if (edge?.style === "dashed" && from.kind === "station" && to.kind === "station" && to.cx < from.cx && Math.abs(dy) >= SAME_HEIGHT_THRESHOLD) {
+    const verticalDir = Math.sign(to.cy - from.cy);
+    const start = { x: from.cx - METRO_RETURN_START_OFFSET, y: from.cy };
+    const end = { x: to.cx, y: to.cy - verticalDir * METRO_RETURN_END_OFFSET };
+    const corner = { x: end.x, y: start.y };
+    fromSide = "left";
+    toSide = verticalDir < 0 ? "bottom" : "top";
+    d = quadraticCornerPath(start, corner, end, METRO_BRANCH_CORNER_RADIUS);
+    mid = { x: (start.x + corner.x) / 2, y: start.y };
+    metroReturn = true;
+  } else if (Math.abs(dy) < SAME_HEIGHT_THRESHOLD) {
     d = `M ${point({ x: x1, y: y1 })} L ${point({ x: x2, y: y2 })}`;
     mid = { x: (x1 + x2) / 2, y: (y1 + y2) / 2 };
-    tangent = { x: x2 - x1, y: y2 - y1 };
   } else if (fromSide !== toSide && Math.abs(x2 - x1) >= Math.abs(dy)) {
     const horizontal = Math.abs(x2 - x1);
     const s = (horizontal - Math.abs(dy)) / 2;
@@ -3173,7 +3283,6 @@ function metroPath(from, to, edge, labelMarginExtra = 0, textMetrics = "proporti
       d = polyline([p0, p1, p2, p3]);
     }
     mid = { x: (x1 + x2) / 2, y: (y1 + y2) / 2 };
-    tangent = w;
   } else {
     fromSide = "right";
     toSide = "right";
@@ -3203,28 +3312,15 @@ function metroPath(from, to, edge, labelMarginExtra = 0, textMetrics = "proporti
       `L ${point(p4)}`
     ].join(" ");
     mid = { x: p2.x - T * r, y: p2.y };
-    tangent = { x: 0, y: sgn };
-  }
-  if (edge?.overlay) {
-    return { d, fromSide, toSide, labelX: mid.x, labelY: mid.y, labelAnchor: "middle" };
   }
-  const tangentLength = Math.hypot(tangent.x, tangent.y);
-  let normalX = tangent.y / tangentLength;
-  let normalY = -tangent.x / tangentLength;
-  if (normalY > Number.EPSILON || Math.abs(normalY) <= Number.EPSILON && normalX < 0) {
-    normalX *= -1;
-    normalY *= -1;
-  }
-  const labelW = computeLabelBoxW(edge?.label, edge?.sub, textMetrics);
-  const labelH = labelPillH(edge?.sub);
-  const distance = labelPathClearanceHorizontal(edge) + (Math.abs(normalX) * labelW + Math.abs(normalY) * labelH) / 2 + labelMarginExtra;
   return {
     d,
     fromSide,
     toSide,
-    labelX: mid.x + normalX * distance,
-    labelY: mid.y + normalY * distance,
-    labelAnchor: "middle"
+    labelX: mid.x,
+    labelY: mid.y,
+    labelAnchor: "middle",
+    ...metroReturn ? { metroReturn: true } : {}
   };
 }
 
@@ -3351,12 +3447,14 @@ var NODE_KINDS = [
   "shape-lawyer",
   "shape-trader",
   "shape-customer-service",
-  // 流れの始まりと終わりの印 2 種 (#560) ... 塗った丸と輪で囲んだ丸。
-  // 状態遷移図が使う。 印そのものが意味を持つので文字は描かない
+  // 流れの始まりと終わりの印 2 種 (#560) ... 始点と終点は線の端から推測せず、著者が
+  // `kind: "mark-start"` / `kind: "mark-end"` の node を明示する。印は文字を描かない
   "mark-start",
   "mark-end",
   // 路線図の駅 (#996) ... 線路上の点を小さな丸で示し、名前と説明は丸の外に置く
   "station",
+  // 時間軸の番号 (#1017) ... 実線の軸上に番号を入れた丸を置く。路線図の駅とは別の意味を持つ。
+  "timeline-number",
   // 時系列のやり取り (#578) ... 1 つの箱が図を丸ごと描く。 縦が時間で、参加者は箱を持たない
   "sequence-board"
 ];
@@ -6548,7 +6646,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
   const LIFELINE_W_THRESHOLD = 8;
   for (const n of laid.nodes) {
     if (n.w < LIFELINE_W_THRESHOLD) continue;
-    if (n.kind === "station") continue;
+    if (n.kind === "station" || n.kind === "timeline-number") continue;
     if (n.w < MIN_NODE_W || n.h < MIN_NODE_H) {
       push(
         "node-visibility",
@@ -6574,8 +6672,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
     if (!isRenderedNode(n)) continue;
     const titleTrimmed = n.title?.trim() ?? "";
     if (!titleTrimmed) continue;
-    const \u4F59\u767D = drawsTitleOutsideBox(n.kind) ? 0 : TITLE_BOX_PADDING;
-    const \u4F7F\u3048\u308B\u5E452 = n.w - \u4F59\u767D;
+    const \u4F7F\u3048\u308B\u5E452 = titleUsableWidth(n.kind, n.w, n.h);
     const \u5B9F\u5E45 = measureTextWidth(titleTrimmed, {
       fontSize: titleFontSize(n.kind),
       bound: "drawn",
@@ -6594,7 +6691,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
       push(
         "text-readability",
         // 字ごとの実幅は小数になるので、読む人に出す時だけ丸める (判定は丸めない)
-        `node "${n.id}" title "${n.title}" \u304C node \u5E45 ${n.w}px \u3092\u8D85\u904E\u3059\u308B\u53EF\u80FD\u6027 (\u671F\u5F85 ${Math.round(\u5B9F\u5E45 + \u4F59\u767D)}px)`,
+        `node "${n.id}" title "${n.title}" \u304C node \u5E45 ${n.w}px \u3092\u8D85\u904E\u3059\u308B\u53EF\u80FD\u6027 (\u671F\u5F85 ${Math.round(\u5B9F\u5E45 + (n.w - \u4F7F\u3048\u308B\u5E452))}px)`,
         "warn"
       );
     }
@@ -8154,6 +8251,8 @@ var TOKENS = {
   lane_label_h: 40,
   lane_top_pad: 100,
   contain_pad: 28,
+  stage_column_gap: 48,
+  stage_card_text_inset: 18,
   // node sizes (kind ごと、 unified row h は engine が max() で算出)
   node: {
     actor: { w: 340, h: 165 },
@@ -8280,7 +8379,10 @@ var TOKENS = {
     "mark-start": { w: 96, h: 96 },
     "mark-end": { w: 96, h: 96 },
     // 路線図の駅 (#996) ... 正方形にして小さな丸が縦横どちらにも歪まないようにする。
-    station: { w: 24, h: 24 },
+    // 半径 16 と縁 6 の外径を、線路との接点を含めて収める。
+    station: { w: 38, h: 38 },
+    // 時間軸の番号 (#1017) ... 半径 24 の丸と太さ 4 の縁を収める。
+    "timeline-number": { w: 52, h: 52 },
     // 時系列のやり取り (#578)。 実寸は中身から決まる (`sequenceBoardMetrics`) ので、
     // ここは書かなかった時の受け皿
     "sequence-board": { w: 960, h: 640 }
@@ -8295,6 +8397,8 @@ var LANE_TOP_PAD = TOKENS.lane_top_pad;
 var STACK_GAP = TOKENS.row_gap;
 var NODE_SIZE = TOKENS.node;
 var CONTAIN_PAD = TOKENS.contain_pad;
+var STAGE_COLUMN_GAP = TOKENS.stage_column_gap;
+var STAGE_CARD_TEXT_INSET = TOKENS.stage_card_text_inset;
 var VIEW_PAD = TOKENS.view_pad;
 var HEADER_RESERVE = TOKENS.header_reserve;
 var DEFAULT_LANE_GAP = 80;
@@ -8395,12 +8499,24 @@ function layoutEdges(diag, nodes, lanes = [], textMetrics = "proportional") {
       if (!from) throw new Error(`cdl layout: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u7121\u3044`);
       if (!to) throw new Error(`cdl layout: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u7121\u3044`);
       const c = curvePath(from, to, e, labelMarginExtra, textMetrics);
+      const fromLane = lmap.get(from.lane);
+      const toLane = lmap.get(to.lane);
+      let labelX = c.labelX;
+      if (fromLane?.stage !== void 0 && toLane?.stage !== void 0 && fromLane.id !== toLane.id && (e.label || e.sub)) {
+        const [leftLane, rightLane] = fromLane.x <= toLane.x ? [fromLane, toLane] : [toLane, fromLane];
+        const gapLeft = leftLane.x + leftLane.width - STAGE_COLUMN_GAP / 2;
+        const gapRight = rightLane.x + STAGE_COLUMN_GAP / 2;
+        const labelHalfWidth = computeLabelBoxW(e.label, e.sub, textMetrics) / 2;
+        const minX = gapLeft + labelHalfWidth;
+        const maxX = gapRight - labelHalfWidth;
+        if (minX <= maxX) labelX = Math.min(maxX, Math.max(minX, labelX));
+      }
       positionedEdges.push({
         ...e,
         d: c.d,
         fromSide: c.fromSide,
         toSide: c.toSide,
-        labelX: c.labelX + (e.labelOffsetX ?? 0),
+        labelX: labelX + (e.labelOffsetX ?? 0),
         labelY: c.labelY + (e.labelOffsetY ?? 0),
         labelAnchor: c.labelAnchor
       });
@@ -8417,7 +8533,8 @@ function layoutEdges(diag, nodes, lanes = [], textMetrics = "proportional") {
         toSide: m.toSide,
         labelX: m.labelX + (e.labelOffsetX ?? 0),
         labelY: m.labelY + (e.labelOffsetY ?? 0),
-        labelAnchor: m.labelAnchor
+        labelAnchor: m.labelAnchor,
+        ...m.metroReturn ? { metroReturn: true } : {}
       });
     } else {
       autoEdges.push(e);
@@ -9105,6 +9222,57 @@ function bowSharedStraightPaths(edges, nodes, skipIds, textMetrics = "proportion
 function nodeRect(n) {
   return { x: n.cx - n.w / 2, y: n.cy - n.h / 2, w: n.w, h: n.h };
 }
+function countPathObstacleCrossings(d, obstacles) {
+  const segments = flattenPathSegments(extractPathSegments(d));
+  return obstacles.filter((obstacle) => segmentsCrossRect(segments, nodeRect(obstacle))).length;
+}
+function makeBackDetourCandidate(A, B, from, to, obstacles, detourY, side, columnXOverride) {
+  const lowIsA = A.y >= B.y;
+  const low = lowIsA ? A : B;
+  const lowBendY = low.y - VERTICAL_DETOUR_EXIT;
+  const bandTop = Math.min(detourY, lowBendY);
+  const bandBottom = Math.max(detourY, lowBendY);
+  const bandObstacles = obstacles.map(nodeRect).filter((rect) => rect.y + rect.h >= bandTop && rect.y <= bandBottom);
+  let columnX = columnXOverride ?? detourColumnFor([from, to], side);
+  if (columnXOverride === void 0) {
+    while (true) {
+      const blockers = bandObstacles.filter(
+        (rect) => rect.x - VERTICAL_DETOUR_GAP < columnX && columnX < rect.x + rect.w + VERTICAL_DETOUR_GAP
+      );
+      if (blockers.length === 0) break;
+      columnX = side === "left" ? Math.min(...blockers.map((rect) => rect.x - VERTICAL_DETOUR_GAP)) : Math.max(...blockers.map((rect) => rect.x + rect.w + VERTICAL_DETOUR_GAP));
+    }
+  }
+  const bendAY = lowIsA ? lowBendY : detourY;
+  const bendBY = lowIsA ? detourY : lowBendY;
+  const vertices = [
+    A,
+    { x: A.x, y: bendAY },
+    { x: columnX, y: bendAY },
+    { x: columnX, y: bendBY },
+    { x: B.x, y: bendBY },
+    B
+  ];
+  const d = verticesToPath(vertices);
+  const high = lowIsA ? B : A;
+  return {
+    d,
+    labelX: (high.x + columnX) / 2,
+    crossings: countPathObstacleCrossings(d, obstacles),
+    length: vertices.slice(1).reduce((sum, vertex, index) => {
+      const previous = vertices[index];
+      return sum + Math.hypot(vertex.x - previous.x, vertex.y - previous.y);
+    }, 0)
+  };
+}
+function chooseBackDetourCandidate(A, B, from, to, obstacles, detourY) {
+  const left = makeBackDetourCandidate(A, B, from, to, obstacles, detourY, "left");
+  const right = makeBackDetourCandidate(A, B, from, to, obstacles, detourY, "right");
+  if (left.crossings !== right.crossings) return left.crossings < right.crossings ? left : right;
+  if (Math.abs(left.length - right.length) >= 0.5) return left.length < right.length ? left : right;
+  const preferred = Math.abs(A.x - B.x) < 0.5 ? "right" : A.x < B.x ? "left" : "right";
+  return preferred === "left" ? left : right;
+}
 function rectGap(a, b) {
   const dx = Math.max(0, a.x - (b.x + b.w), b.x - (a.x + a.w));
   const dy = Math.max(0, a.y - (b.y + b.h), b.y - (a.y + a.h));
@@ -9182,7 +9350,7 @@ function sidePoint(n, side) {
       return { x: n.cx + n.w / 2, y: n.cy };
   }
 }
-function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _fromLane, _toLane, edge, labelObstacles = obstacles, fromOffset = { x: 0, y: 0 }, toOffset = { x: 0, y: 0 }, avoidRects = [], textMetrics = "proportional") {
+function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, fromLane, toLane, edge, labelObstacles = obstacles, fromOffset = { x: 0, y: 0 }, toOffset = { x: 0, y: 0 }, avoidRects = [], textMetrics = "proportional") {
   const labelBoxW = edge ? computeLabelBoxW(edge.label, edge.sub, textMetrics) : 0;
   const labelHalfW = labelBoxW / 2;
   const labelInit = labelInitClearance(edge);
@@ -9552,23 +9720,52 @@ function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _from
     };
   }
   if (topTopPair) {
-    const detourY = Math.min(A.y, B.y) - 100;
+    const stagePoint = (point2, node, lane) => lane?.stage === void 0 ? point2 : {
+      x: Math.min(node.cx + node.w / 2 - 24, lane.x + lane.width - 24),
+      y: point2.y
+    };
+    const backA = stagePoint(A, from, fromLane);
+    const backB = stagePoint(B, to, toLane);
+    const stageTops = [fromLane, toLane].filter((lane) => lane?.stage !== void 0).map((lane) => lane.y);
+    const detourY = Math.min(
+      Math.min(backA.y, backB.y) - 100,
+      ...stageTops.map((top) => top - VERTICAL_DETOUR_GAP)
+    );
     const corner = 14;
-    const xDir = B.x > A.x ? 1 : -1;
-    return {
-      d: `M ${A.x} ${A.y}
-        L ${A.x} ${detourY + corner}
-        Q ${A.x} ${detourY}, ${A.x + xDir * corner} ${detourY}
-        L ${B.x - xDir * corner} ${detourY}
-        Q ${B.x} ${detourY}, ${B.x} ${detourY + corner}
-        L ${B.x} ${B.y}`,
-      labelX: (A.x + B.x) / 2,
+    const xDir = backB.x > backA.x ? 1 : -1;
+    const existing = {
+      d: `M ${backA.x} ${backA.y}
+        L ${backA.x} ${detourY + corner}
+        Q ${backA.x} ${detourY}, ${backA.x + xDir * corner} ${detourY}
+        L ${backB.x - xDir * corner} ${detourY}
+        Q ${backB.x} ${detourY}, ${backB.x} ${detourY + corner}
+        L ${backB.x} ${backB.y}`,
+      labelX: (backA.x + backB.x) / 2,
       // CAR-468 SSOT ... 旧 detourY - 30 magic number を LABEL_INIT_CLEARANCE (26、 CAR-570 で 34 → 26 縮小) に置換。
       // CAR-518 SSOT ... dotted-flow は 62 world (marker glow radius 分拡張) を labelInit で参照。
       // top-top detour の水平 segment 上方 labelInit world = spec 準拠距離。
       labelY: detourY - labelInit,
       labelAnchor: "middle"
     };
+    const existingCrossings = countPathObstacleCrossings(existing.d, obstacles);
+    if (existingCrossings === 0) return existing;
+    const candidate = from.lane === to.lane && fromLane?.stage !== void 0 ? makeBackDetourCandidate(
+      backA,
+      backB,
+      from,
+      to,
+      obstacles,
+      detourY,
+      "right",
+      fromLane.x + fromLane.width
+    ) : chooseBackDetourCandidate(backA, backB, from, to, obstacles, detourY);
+    if (candidate.crossings >= existingCrossings) return existing;
+    return {
+      d: candidate.d,
+      labelX: candidate.labelX,
+      labelY: detourY - labelInit,
+      labelAnchor: "middle"
+    };
   }
   const midX = fromSide === "left" || fromSide === "right" ? B.x : A.x;
   const midY = fromSide === "top" || fromSide === "bottom" ? B.y : A.y;
@@ -10495,12 +10692,56 @@ function \u76F4\u524D\u306E\u6298\u308C\u3054\u3068\u305A\u3089\u3059(segs, \u6A
   return parts.join(" ");
 }
 
+// src/layout/legend.ts
+var LEGEND_FONT_SIZE = 17;
+var LEGEND_MARK_SCALE = LEGEND_FONT_SIZE / 21;
+var LEGEND_MARK_REFERENCE_WIDTH = 46;
+var LEGEND_MARK_WIDTH = LEGEND_MARK_REFERENCE_WIDTH * LEGEND_MARK_SCALE;
+var LEGEND_MARK_TEXT_GAP = 12 * LEGEND_MARK_SCALE;
+var LEGEND_ITEM_GAP_RATIO = 0.07;
+var LEGEND_BASELINE_GAP = 32;
+var LEGEND_BOTTOM_EXTENT = 10;
+function layoutLegend(items, viewBox, textMetrics, nodes) {
+  const renderedNodes = nodes.filter(isRenderedNode);
+  const startX = renderedNodes.length > 0 ? Math.min(...renderedNodes.map((node) => node.cx - node.w / 2)) : viewBox.x + VIEW_PAD;
+  const diagramRight = renderedNodes.length > 0 ? Math.max(...renderedNodes.map((node) => node.cx + node.w / 2)) : viewBox.x + viewBox.w - VIEW_PAD;
+  const itemGap = (diagramRight - startX) * LEGEND_ITEM_GAP_RATIO;
+  const y = viewBox.y + viewBox.h - VIEW_PAD + LEGEND_BASELINE_GAP;
+  let x = startX;
+  const legend = items.map((item) => {
+    const laid = { ...item, x, y };
+    x += LEGEND_MARK_WIDTH + LEGEND_MARK_TEXT_GAP + textWidth(item.text, LEGEND_FONT_SIZE, 0, textMetrics) + itemGap;
+    return laid;
+  });
+  const right = x - itemGap;
+  const bottom = y + LEGEND_BOTTOM_EXTENT + VIEW_PAD;
+  return {
+    legend,
+    viewBox: {
+      ...viewBox,
+      w: Math.max(viewBox.w, right + VIEW_PAD - viewBox.x),
+      h: Math.max(viewBox.h, bottom - viewBox.y)
+    }
+  };
+}
+
 // src/layout/lanes.ts
 var LANE_POSITION_EPSILON = 1e-9;
+function equalizeStageColumns(lanes, nodes = []) {
+  const stages = lanes.filter((lane) => lane.stage !== void 0);
+  if (stages.length === 0) return lanes;
+  const top = Math.min(...stages.map((lane) => lane.y));
+  const stageIds = new Set(stages.map((lane) => lane.id));
+  const nodeBottoms = nodes.filter((node) => stageIds.has(node.lane)).map((node) => node.cy + node.h / 2 + CONTAIN_PAD);
+  const bottom = Math.max(...stages.map((lane) => lane.y + lane.height), ...nodeBottoms);
+  return lanes.map(
+    (lane) => lane.stage === void 0 ? lane : { ...lane, y: top, height: bottom - top }
+  );
+}
 function layoutLanes(diag) {
   const laneGap = diag.viewport?.laneGap ?? diag.viewport?.gap ?? DEFAULT_LANE_GAP;
   let cursorX = 0;
-  return diag.lanes.map((lane) => {
+  const lanes = diag.lanes.map((lane, index) => {
     if (lane.posX !== void 0 && lane.posY !== void 0) {
       return {
         ...lane,
@@ -10511,7 +10752,9 @@ function layoutLanes(diag) {
       };
     }
     const resolvedX = lane.x ?? cursorX;
-    cursorX = resolvedX + lane.width + laneGap;
+    const nextLane = diag.lanes[index + 1];
+    const gapAfter = lane.stage !== void 0 && nextLane?.stage !== void 0 ? 0 : laneGap;
+    cursorX = resolvedX + lane.width + gapAfter;
     return {
       ...lane,
       x: resolvedX,
@@ -10519,6 +10762,7 @@ function layoutLanes(diag) {
       height: LANE_LABEL_H
     };
   });
+  return equalizeStageColumns(lanes);
 }
 function expandLanesForNodes(lanes, nodes) {
   const targetNodeGap = targetNodeNodeClearance();
@@ -10547,7 +10791,8 @@ function expandLanesForNodes(lanes, nodes) {
     if (lane.posX !== void 0 && lane.posY !== void 0) continue;
     const inside = nodes.filter((n) => n.lane === lane.id);
     const maxNodeW = inside.length > 0 ? Math.max(...inside.map((n) => n.w)) : 0;
-    const newWidth = Math.max(lane.width, maxNodeW + padFor(lane) * 2);
+    const stageMinWidth = lane.stage === void 0 ? 0 : maxNodeW + CONTAIN_PAD + STAGE_COLUMN_GAP;
+    const newWidth = Math.max(lane.width, maxNodeW + padFor(lane) * 2, stageMinWidth);
     widthOf.set(lane.id, newWidth);
     deltaOf.set(lane.id, newWidth - lane.width);
   }
@@ -10572,6 +10817,34 @@ function expandLaneGapsForEdgeLabels(lanes, nodes, edges, textMetrics = "proport
   if (lanes.length < 2) return lanes;
   const layoutedLanes = lanes.filter((l) => !(l.posX !== void 0 && l.posY !== void 0));
   if (layoutedLanes.length < 2) return lanes;
+  if (layoutedLanes.length === lanes.length && layoutedLanes.every((lane) => lane.stage !== void 0)) {
+    const sortedStages = [...layoutedLanes].sort((a, b) => a.x - b.x);
+    const stageIndexById = new Map(sortedStages.map((lane, index) => [lane.id, index]));
+    const nodeLaneById = new Map(nodes.map((node) => [node.id, node.lane]));
+    const requiredSurfaceGaps = new Array(sortedStages.length - 1).fill(STAGE_COLUMN_GAP);
+    for (const edge of edges) {
+      if (edge.routing !== "curve" || !edge.label && !edge.sub) continue;
+      const fromIndex = stageIndexById.get(nodeLaneById.get(edge.from) ?? "");
+      const toIndex = stageIndexById.get(nodeLaneById.get(edge.to) ?? "");
+      if (fromIndex === void 0 || toIndex === void 0 || fromIndex === toIndex) continue;
+      const lo = Math.min(fromIndex, toIndex);
+      const hi = Math.max(fromIndex, toIndex);
+      const labelWidth = computeLabelBoxW(edge.label, edge.sub, textMetrics);
+      for (let pair = lo; pair < hi; pair++) {
+        requiredSurfaceGaps[pair] = Math.max(requiredSurfaceGaps[pair], labelWidth);
+      }
+    }
+    const shiftedXById2 = /* @__PURE__ */ new Map([[sortedStages[0].id, sortedStages[0].x]]);
+    for (let index = 1; index < sortedStages.length; index++) {
+      const previous = sortedStages[index - 1];
+      const lane = sortedStages[index];
+      const previousX = shiftedXById2.get(previous.id);
+      const authoredGap = Math.max(0, lane.x - (previous.x + previous.width));
+      const laneGap = Math.max(authoredGap, requiredSurfaceGaps[index - 1] - STAGE_COLUMN_GAP);
+      shiftedXById2.set(lane.id, previousX + previous.width + laneGap);
+    }
+    return lanes.map((lane) => ({ ...lane, x: shiftedXById2.get(lane.id) ?? lane.x }));
+  }
   const nodeById = new Map(nodes.map((n) => [n.id, n]));
   const sortedByX = [...layoutedLanes].sort((a, b) => a.x - b.x);
   const laneIndexById = new Map(sortedByX.map((lane, i) => [lane.id, i]));
@@ -10643,7 +10916,7 @@ function recomputeContainedLanes(lanes, nodes) {
       lifelineBottom = Math.max(lifelineBottom, bottom);
     }
   }
-  return lanes.map((lane) => {
+  const contained = lanes.map((lane) => {
     if (lane.lifeline) {
       return {
         ...lane,
@@ -10661,6 +10934,7 @@ function recomputeContainedLanes(lanes, nodes) {
       height: bottom - top + CONTAIN_PAD * 2 + LANE_LABEL_H
     };
   });
+  return equalizeStageColumns(contained, nodes);
 }
 
 // src/layout/head-label.ts
@@ -10810,11 +11084,15 @@ function requiredStackGapForEdgeLabels(diag, allStacks) {
 }
 function layoutNodes(diag, lanes, textMetrics) {
   const laneMap = new Map(lanes.map((l) => [l.id, l]));
+  const metroDecisionIds = new Set(
+    diag.edges.filter((edge) => edge.routing === "metro").flatMap((edge) => [edge.from, edge.to]).filter((id) => diag.nodes.some((node) => node.id === id && node.kind === "decision"))
+  );
+  const nodeSize = (node) => metroDecisionIds.has(node.id) ? { w: METRO_DECISION_WIDTH, h: METRO_DECISION_HEIGHT } : NODE_SIZE[node.kind];
   const allStacks = Array.from(new Set(diag.nodes.map((n) => n.stack))).sort((a, b) => a - b);
   const rowH = /* @__PURE__ */ new Map();
   for (const stack of allStacks) {
     const nodesAtStack = diag.nodes.filter((n) => n.stack === stack);
-    const h = Math.max(...nodesAtStack.map((n) => \u7BB1\u306E\u9AD8\u30552(n, NODE_SIZE[n.kind].h)));
+    const h = Math.max(...nodesAtStack.map((n) => \u7BB1\u306E\u9AD8\u30552(n, nodeSize(n).h)));
     rowH.set(stack, h);
   }
   const rowCy = /* @__PURE__ */ new Map();
@@ -10850,7 +11128,7 @@ function layoutNodes(diag, lanes, textMetrics) {
     if (!lane) {
       throw new Error(`cdl layout: node "${n.id}" \u306E lane "${n.lane}" \u304C\u5B9A\u7FA9\u3055\u308C\u3066\u3044\u306A\u3044`);
     }
-    const size = NODE_SIZE[n.kind];
+    const size = nodeSize(n);
     if (n.posX !== void 0 && n.posY !== void 0) {
       const w2 = n.posW ?? n.w ?? autoRowsWidth(n, size.w, textMetrics);
       const h2 = n.posH ?? n.h ?? rowH.get(n.stack) ?? size.h;
@@ -10973,6 +11251,9 @@ function dropUnsafeLaneDx(dxByLane, nodes) {
 function applyRowLevelNodeShifts(nodes, lanes, nodeShifts) {
   const dyByStack = aggregateRowDy(nodes, nodeShifts);
   const dxByLane = dropUnsafeLaneDx(aggregateLaneDx(nodes, nodeShifts), nodes);
+  for (const lane of lanes) {
+    if (lane.stage !== void 0) dxByLane.delete(lane.id);
+  }
   let moved = false;
   const outNodes = nodes.map((n) => {
     const dx = dxByLane.get(n.lane) ?? 0;
@@ -11092,7 +11373,15 @@ function layout(diag) {
       );
     }
   }
-  const viewBox = computeViewBox(containedLanesFinal, nodesFinal, edges, bboxes, diag.viewport);
+  const contentViewBox = computeViewBox(
+    containedLanesFinal,
+    nodesFinal,
+    edges,
+    bboxes,
+    diag.viewport
+  );
+  const legendLayout = diag.legend?.length ? layoutLegend(diag.legend, contentViewBox, textMetrics, nodesFinal) : void 0;
+  const viewBox = legendLayout?.viewBox ?? contentViewBox;
   return {
     id: diag.id,
     topic: diag.topic,
@@ -11119,6 +11408,7 @@ function layout(diag) {
     ...textMetrics === "monospace" ? { textMetrics: "monospace" } : {},
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...diag.type ? { type: diag.type } : {},
+    ...legendLayout ? { legend: legendLayout.legend } : {},
     bboxes,
     collisions,
     nearCollisions,
@@ -11307,6 +11597,11 @@ function validate(diag) {
   \u2192 \u4FEE\u6B63\u4F8B: .lane("${n.lane}", { x: 0, width: 400 }) \u3092 node \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
       );
     }
+    if (n.leaderTo !== void 0 && !nodeIds.has(n.leaderTo)) {
+      errors.push(
+        `[cdl] unknown-ref: node "${n.id}" \u306E leaderTo "${n.leaderTo}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(n.leaderTo, nodeIds, "node")}`
+      );
+    }
   }
   for (const e of diag.edges) {
     if (!nodeIds.has(e.from)) {
@@ -11925,6 +12220,10 @@ function uniformLifelineEndY(lanes, nodes, starts = lifelineStartYs(nodes)) {
 
 // src/render/edge-head.ts
 var EDGE_HEAD_MUTED_MARKER_ID = "cdl-arrow-muted";
+var METRO_RETURN_ARROW_D = "M 21 0 L 4 9.5 L 4 -9.5 Z";
+function metroReturnArrowMarkerId(tone) {
+  return `cdl-metro-return-arrow-${tone}`;
+}
 var EDGE_HEAD_SHAPE = {
   // 何も描かない端。 marker 自体を出さないので `d` は読まれない
   none: { d: "", w: 10, h: 10, refX: 0, filled: false },
@@ -11979,6 +12278,7 @@ function \u7B49\u5E45\u306E\u5B57(text, fontSize) {
   });
   return out;
 }
+var METRO_PENDING_ATTRIBUTE = "data-cdl-pending";
 function defaultEdgeWidth(active) {
   return active ? 2.5 : 1.25;
 }
@@ -11997,12 +12297,14 @@ function CdlEdgeView({
   drawing,
   progress,
   stateValues,
-  flowing = false
+  flowing = false,
+  pending = false
 }) {
   const color = edgeColor(edge);
-  const marker = edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
-  const tailMarker = edge.tailHead === void 0 ? void 0 : edgeHeadMarkerName(edge.tone, edge.tailHead, !active, edge.tailHeadFill);
   const style = edge.style ?? "solid";
+  const isMetroReturn = edge.metroReturn === true;
+  const marker = isMetroReturn ? metroReturnArrowMarkerId(edge.tone) : edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
+  const tailMarker = edge.tailHead === void 0 ? void 0 : edgeHeadMarkerName(edge.tone, edge.tailHead, !active, edge.tailHeadFill);
   const isDotted = style === "dotted-flow";
   const isPassThrough = isDotted && Boolean(edge.dThrough);
   const lineDotsD = isDotted ? shrinkPathEnd(edge.d, 12) : edge.d;
@@ -12012,6 +12314,7 @@ function CdlEdgeView({
   return /* @__PURE__ */ jsxs(
     "g",
     {
+      ...pending ? { [METRO_PENDING_ATTRIBUTE]: "true" } : {},
       "data-cdl-edge": edge.id,
       "data-cdl-routing": edge.routing === "metro" ? "metro" : void 0,
       "data-cdl-from": edge.from,
@@ -12037,11 +12340,12 @@ function CdlEdgeView({
               fill: "none",
               stroke: color,
               strokeOpacity: active ? 0.95 : 0.9,
-              strokeWidth: active ? 5 : 4,
+              strokeWidth: edge.routing === "metro" ? METRO_LINE_WIDTH : active ? 5 : 4,
               strokeDasharray: "0 18",
               strokeLinecap: "round",
               style: {
-                transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease"
+                transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease",
+                strokeWidth: edge.routing === "metro" ? METRO_LINE_WIDTH_CSS : void 0
               }
             }
           ),
@@ -12096,7 +12400,9 @@ function SolidEdgePath({
   const boundWidth = edge.widthBind && stateValues ? resolveNumericAttr(edge.widthBind, stateValues, defaultWidth) : defaultWidth;
   const boundStroke = edge.strokeBind && stateValues ? interpolate(edge.strokeBind, stateValues) : color;
   const boundDashOffset = edge.dashOffsetBind && stateValues ? resolveNumericAttr(edge.dashOffsetBind, stateValues, 0) : void 0;
-  const dashArray = dashed ? "10 8" : active ? boundDashOffset !== void 0 ? "8 6" : void 0 : "4 5";
+  const strokeWidth = edge.routing === "metro" && edge.widthBind === void 0 ? edge.metroReturn ? 6 : METRO_LINE_WIDTH : boundWidth;
+  const strokeWidthCss = edge.routing === "metro" && !edge.metroReturn ? edge.widthBind === void 0 ? METRO_LINE_WIDTH_CSS : `var(--cdl-metro-line-width, ${strokeWidth}px)` : void 0;
+  const dashArray = dashed ? edge.metroReturn ? "0 9.6" : "10 8" : active ? boundDashOffset !== void 0 ? "8 6" : void 0 : "4 5";
   return /* @__PURE__ */ jsx(
     "path",
     {
@@ -12105,14 +12411,15 @@ function SolidEdgePath({
       fill: "none",
       stroke: boundStroke,
       strokeOpacity: active ? 0.95 : 0.9,
-      strokeWidth: boundWidth,
+      strokeWidth,
       strokeDasharray: dashArray,
       strokeDashoffset: boundDashOffset,
       strokeLinecap: "round",
       markerEnd: marker === void 0 ? void 0 : `url(#${marker})`,
       markerStart: tailMarker === void 0 ? void 0 : `url(#${tailMarker})`,
       style: {
-        transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease"
+        transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease",
+        strokeWidth: strokeWidthCss
       }
     }
   );
@@ -12409,7 +12716,11 @@ function \u5272\u308B\u5019\u88DC(text) {
 function \u5165\u3063\u3066\u3044\u308B([\u5DE6, \u53F3]) {
   return \u5DE6 !== "" && \u53F3 !== "";
 }
-function CardNode({ node, active }) {
+function CardNode({
+  node,
+  active,
+  compactTitleInset
+}) {
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
@@ -12427,12 +12738,12 @@ function CardNode({ node, active }) {
   });
   const \u305A\u3089\u3057 = \u7E70\u308A\u4E0A\u3052 - \u4F59\u308A;
   const titleY = compact ? \u5C0F\u578B\u306B\u547C\u3073\u540D ? node.h / 2 - 2 : node.h / 2 + 8 : 86 - \u305A\u3089\u3057;
-  const titleX = compact ? node.w / 2 : 26;
-  const paddingX = compact ? 16 : 52;
+  const titleX = compact ? compactTitleInset ?? node.w / 2 : 26;
+  const paddingX = compact ? (compactTitleInset ?? 8) * 2 : 52;
   const availableW = node.w - paddingX;
   const initialTitleSize = compact ? 20 : 24;
   const titleSize = fitTextSize(node.title, availableW, initialTitleSize, 11);
-  const textAnchor = compact ? "middle" : "start";
+  const textAnchor = compact && compactTitleInset === void 0 ? "middle" : "start";
   const subtitleY = 124 - \u305A\u3089\u3057;
   const \u6700\u5927\u306E\u884C\u9001\u308A = SUBTITLE_SIZE * \u884C\u9001\u308A\u306E\u500D\u7387;
   const \u4E8C\u884C\u304C\u5165\u308B = !compact && subtitleY - \u6700\u5927\u306E\u884C\u9001\u308A / 2 - SUBTITLE_SIZE * ASCENT > titleY + titleSize * DESCENT && subtitleY + \u6700\u5927\u306E\u884C\u9001\u308A / 2 + SUBTITLE_SIZE * DESCENT <= node.h - 4;
@@ -13192,7 +13503,9 @@ function GenericNode({
   value,
   stateValues,
   \u5024\u306E\u540D\u524D,
-  textMetrics = "proportional"
+  textMetrics = "proportional",
+  showKindIcon = true,
+  metroDecision = false
 }) {
   const base = STYLES[node.kind] ?? FALLBACK;
   const toned = toneColor3(node.tone);
@@ -13223,14 +13536,14 @@ function GenericNode({
     if (shape === "diamond") {
       const cx = w / 2;
       const cy = h / 2;
-      const pad = 8;
+      const pad = metroDecision ? 0 : 8;
       return /* @__PURE__ */ jsx(
         "path",
         {
           d: `M ${cx} ${pad} L ${w - pad} ${cy} L ${cx} ${h - pad} L ${pad} ${cy} Z`,
           fill: "var(--cdl-node-fill, #ffffff)",
           stroke: active ? style.accent : "var(--cdl-divider, #d4d4d8)",
-          strokeWidth: active ? 3 : 1.25
+          strokeWidth: metroDecision ? 1.5 : active ? 3 : 1.25
         }
       );
     }
@@ -13294,11 +13607,11 @@ function GenericNode({
   const \u305A\u3089\u3057 = \u7E70\u308A\u4E0A\u3052 - \u4F59\u308A;
   const \u7D75\u306E\u82AF = centered && STYLES[node.kind]?.shape === "cloud" ? h * CLOUD_ART_CENTER_RISE : 0;
   const eyebrowY = centered ? h / 2 - 26 - \u7D75\u306E\u82AF : 32 + cylinderShift + \u4F59\u308A;
-  const titleY = genericTitleBaselineY(node.kind, h, hasRows) - \u305A\u3089\u3057 - \u7D75\u306E\u82AF;
+  const titleY = metroDecision ? h / 2 + 9 : genericTitleBaselineY(node.kind, h, hasRows) - \u305A\u3089\u3057 - \u7D75\u306E\u82AF;
   const subtitleY = centered ? h / 2 + 28 - \u7D75\u306E\u82AF : 96 + cylinderShift - \u305A\u3089\u3057;
   const iconX = centered ? w / 2 + 40 : w - 48;
   const iconY = centered ? h / 2 - 44 - \u7D75\u306E\u82AF : 18 + cylinderShift;
-  const dominantBaseline = centered ? "middle" : void 0;
+  const dominantBaseline = centered && !metroDecision ? "middle" : void 0;
   return /* @__PURE__ */ jsxs(
     "g",
     {
@@ -13307,12 +13620,12 @@ function GenericNode({
       "data-cdl-look": style.look,
       children: [
         shapeEl,
-        /* @__PURE__ */ jsxs("g", { transform: `translate(${iconX} ${iconY}) scale(1)`, "data-cdl-role": "node-kind-icon", children: [
+        showKindIcon && /* @__PURE__ */ jsxs("g", { transform: `translate(${iconX} ${iconY}) scale(1)`, "data-cdl-role": "node-kind-icon", children: [
           /* @__PURE__ */ jsx("rect", { width: 24, height: 24, fill: "transparent" }),
           /* @__PURE__ */ jsx("path", { d: style.icon, fill: style.eyebrowColor, opacity: 0.7, transform: "scale(1)" })
         ] }),
         node.eyebrow && /* @__PURE__ */ jsx("text", { x: textX, y: eyebrowY, fontSize: 17, fontWeight: 700, letterSpacing: 1.5, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : style.eyebrowColor, textAnchor, dominantBaseline, children: node.eyebrow }),
-        /* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: textX, y: titleY, fontSize: 20, fontWeight: 700, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text, #1a1f2a)", textAnchor, dominantBaseline, style: node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : void 0, children: node.kind === "function" || node.kind === "api" ? \u7B49\u5E45\u306E\u5B57(node.title, 20) : node.title }),
+        /* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: textX, y: titleY, fontSize: metroDecision ? 26 : 20, fontWeight: 700, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text, #1a1f2a)", textAnchor, dominantBaseline, style: node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : void 0, children: node.kind === "function" || node.kind === "api" ? \u7B49\u5E45\u306E\u5B57(node.title, 20) : node.title }),
         node.subtitle && /* @__PURE__ */ jsx("text", { x: textX, y: subtitleY, fontSize: 17, fill: paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text-dim, #5a6270)", textAnchor, dominantBaseline, style: { fontFamily: "'JetBrains Mono', monospace" }, children: \u7B49\u5E45\u306E\u5B57(node.subtitle, 17) }),
         resolvedValue && /* @__PURE__ */ jsx(
           "text",
@@ -13361,50 +13674,176 @@ function GenericNode({
 var MARK_INNER_RATIO = 0.56;
 var RING_WIDTH_ACTIVE = 6;
 var RING_WIDTH_IDLE = 4;
+var METRO_START_RADIUS = 17;
+var METRO_END_RADIUS = 19;
+var METRO_END_RING_WIDTH = 3.5;
+var METRO_END_INNER_RADIUS = 10;
 var MARK_DEFAULT = "var(--cdl-tone-accent, #2d6a8f)";
 function markRadius(node) {
   return Math.min(node.w, node.h) / 2;
 }
-function MarkStartNode({ node }) {
+function MarkStartNode({
+  node,
+  metro = false
+}) {
   const \u8272 = nodeAccent(node, MARK_DEFAULT);
-  return /* @__PURE__ */ jsx("g", { transform: `translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`, children: /* @__PURE__ */ jsx(
-    "circle",
+  return /* @__PURE__ */ jsx(
+    "g",
     {
-      "data-cdl-role": "node-body",
-      "data-cdl-mark": "start",
-      cx: node.w / 2,
-      cy: node.h / 2,
-      r: markRadius(node),
-      fill: \u8272
+      "data-cdl-role": metro ? "mark-start" : void 0,
+      transform: `translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`,
+      children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          "data-cdl-role": "node-body",
+          "data-cdl-mark": "start",
+          cx: node.w / 2,
+          cy: node.h / 2,
+          r: metro ? METRO_START_RADIUS : markRadius(node),
+          fill: \u8272
+        }
+      )
     }
-  ) });
+  );
 }
-function MarkEndNode({ node, active }) {
+function MarkEndNode({
+  node,
+  active,
+  metro = false
+}) {
   const \u8272 = nodeAccent(node, MARK_DEFAULT);
-  const r = markRadius(node);
-  const \u8F2A\u306E\u592A\u3055 = active ? RING_WIDTH_ACTIVE : RING_WIDTH_IDLE;
-  return /* @__PURE__ */ jsxs("g", { transform: `translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`, children: [
+  const r = metro ? METRO_END_RADIUS : markRadius(node);
+  const \u8F2A\u306E\u592A\u3055 = metro ? METRO_END_RING_WIDTH : active ? RING_WIDTH_ACTIVE : RING_WIDTH_IDLE;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      "data-cdl-role": metro ? "mark-end" : void 0,
+      transform: `translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            "data-cdl-role": "node-body",
+            "data-cdl-mark": "end",
+            cx: node.w / 2,
+            cy: node.h / 2,
+            r: metro ? r : Math.max(0, r - \u8F2A\u306E\u592A\u3055 / 2),
+            fill: "var(--cdl-node-fill, #ffffff)",
+            stroke: \u8272,
+            strokeWidth: \u8F2A\u306E\u592A\u3055
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            "data-cdl-role": "node-inner",
+            cx: node.w / 2,
+            cy: node.h / 2,
+            r: metro ? METRO_END_INNER_RADIUS : Math.max(0, r * MARK_INNER_RATIO),
+            fill: \u8272
+          }
+        )
+      ]
+    }
+  );
+}
+var METRO_STATION_RADIUS = 16;
+var METRO_STATION_STROKE_WIDTH = 6;
+var METRO_STATION_RADIUS_CSS = `var(--cdl-metro-station-radius, ${METRO_STATION_RADIUS}px)`;
+var METRO_STATION_STROKE_WIDTH_CSS = `var(--cdl-metro-station-stroke-width, ${METRO_STATION_STROKE_WIDTH}px)`;
+var STATION_DEFAULT = "var(--cdl-tone-accent, #2d6a8f)";
+var STATION_NAME_FONT_SIZE = 25;
+var STATION_NAME_GAP = 18;
+var STATION_NAME_RIGHT_GAP = 32;
+var STATION_NAME_RIGHT_BASELINE = 9;
+var STATION_SUBTITLE_FONT_SIZE = 18;
+var STATION_SUBTITLE_GAP = 22;
+function StationNode({
+  node,
+  nameRight = false
+}) {
+  const name = node.title.trim();
+  const subtitle = node.subtitle?.trim() ?? "";
+  return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(
       "circle",
       {
         "data-cdl-role": "node-body",
-        "data-cdl-mark": "end",
-        cx: node.w / 2,
-        cy: node.h / 2,
-        r: Math.max(0, r - \u8F2A\u306E\u592A\u3055 / 2),
+        "data-cdl-mark": "station",
+        cx: node.cx,
+        cy: node.cy,
+        r: METRO_STATION_RADIUS,
         fill: "var(--cdl-node-fill, #ffffff)",
-        stroke: \u8272,
-        strokeWidth: \u8F2A\u306E\u592A\u3055
+        stroke: nodeAccent(node, STATION_DEFAULT),
+        strokeWidth: METRO_STATION_STROKE_WIDTH,
+        style: { r: METRO_STATION_RADIUS_CSS, strokeWidth: METRO_STATION_STROKE_WIDTH_CSS }
       }
     ),
+    name !== "" && /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "shape-name",
+        x: nameRight ? node.cx + STATION_NAME_RIGHT_GAP : node.cx,
+        y: nameRight ? node.cy + STATION_NAME_RIGHT_BASELINE : node.cy - METRO_STATION_RADIUS - STATION_NAME_GAP,
+        textAnchor: nameRight ? "start" : "middle",
+        fontSize: STATION_NAME_FONT_SIZE,
+        fontWeight: 700,
+        fill: "var(--cdl-text, #23201b)",
+        stroke: "var(--cdl-node-fill, #ffffff)",
+        strokeWidth: 8,
+        strokeLinejoin: "round",
+        paintOrder: "stroke",
+        children: name
+      }
+    ),
+    subtitle !== "" && /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "shape-value",
+        x: node.cx,
+        y: node.cy + METRO_STATION_RADIUS + STATION_SUBTITLE_GAP,
+        textAnchor: "middle",
+        fontSize: STATION_SUBTITLE_FONT_SIZE,
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: subtitle
+      }
+    )
+  ] });
+}
+function TimelineNumberNode({ node }) {
+  const radius = Math.max(0, Math.min(node.w, node.h) / 2 - TIMELINE_NUMBER_STROKE / 2);
+  const fontSize = fitTextSize(
+    node.title,
+    titleUsableWidth(node.kind, node.w, node.h),
+    18,
+    MIN_TEXT_SIZE
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "circle",
       {
-        "data-cdl-role": "node-inner",
-        cx: node.w / 2,
-        cy: node.h / 2,
-        r: Math.max(0, r * MARK_INNER_RATIO),
-        fill: \u8272
+        "data-cdl-role": "node-body",
+        "data-cdl-mark": "timeline-number",
+        cx: node.cx,
+        cy: node.cy,
+        r: radius,
+        fill: "var(--cdl-node-fill, #ffffff)",
+        stroke: nodeAccent(node, STATION_DEFAULT),
+        strokeWidth: TIMELINE_NUMBER_STROKE
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "node-label",
+        x: node.cx,
+        y: node.cy,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fontSize,
+        fontWeight: 700,
+        fill: "var(--cdl-text, #1a1f2a)",
+        children: node.title
       }
     )
   ] });
@@ -13736,27 +14175,6 @@ function interpolateColor(template, stateValues, fallback) {
   if (!template) return fallback;
   return interpolate(template, stateValues);
 }
-var STATION_STROKE_ACTIVE = 4;
-var STATION_STROKE_IDLE = 3;
-var STATION_DEFAULT = "var(--cdl-tone-accent, #2d6a8f)";
-function StationNode({ node, active }) {
-  const strokeWidth = active ? STATION_STROKE_ACTIVE : STATION_STROKE_IDLE;
-  const radius = Math.max(0, Math.min(node.w, node.h) / 2 - strokeWidth / 2);
-  const \u5F62 = /* @__PURE__ */ jsx(
-    "circle",
-    {
-      "data-cdl-role": "node-body",
-      "data-cdl-mark": "station",
-      cx: node.cx,
-      cy: node.cy,
-      r: radius,
-      fill: "var(--cdl-node-fill, #ffffff)",
-      stroke: nodeAccent(node, STATION_DEFAULT),
-      strokeWidth
-    }
-  );
-  return renderShapeWithOutsideLabels(\u5F62, node, "middle");
-}
 
 // src/kinds/label-stack.ts
 function \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u771F\u306Ey, \u9593\u9694, \u4E0A\u9650, \u4E0B\u9650) {
@@ -20918,10 +21336,14 @@ function CdlNodeView({
   stateValues,
   currentPhaseId,
   chartLineScale,
+  compactTitleInset,
   \u95A2\u4FC2\u306E\u53D7\u3051\u53E3,
   lang,
   textMetrics,
-  \u5024\u306E\u540D\u524D
+  \u5024\u306E\u540D\u524D,
+  metroDiagram = false,
+  metroDecision = false,
+  stationNameRight = false
 }) {
   const value = node.value ? interpolate(node.value, stateValues, \u5024\u306E\u540D\u524D) : void 0;
   const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues, \u5024\u306E\u540D\u524D));
@@ -20962,7 +21384,7 @@ function CdlNodeView({
       case "event":
         return /* @__PURE__ */ jsx(EventNode, { node: resolvedNode, active, progress });
       case "card":
-        return /* @__PURE__ */ jsx(CardNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(CardNode, { node: resolvedNode, active, compactTitleInset });
       // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
       case "sequence-board":
         return /* @__PURE__ */ jsx(
@@ -21249,11 +21671,13 @@ function CdlNodeView({
       case "shape-customer-service":
         return /* @__PURE__ */ jsx(ShapeCustomerServiceNode, { node: resolvedNode, active });
       case "mark-start":
-        return /* @__PURE__ */ jsx(MarkStartNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(MarkStartNode, { node: resolvedNode, active, metro: metroDiagram });
       case "mark-end":
-        return /* @__PURE__ */ jsx(MarkEndNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(MarkEndNode, { node: resolvedNode, active, metro: metroDiagram });
       case "station":
-        return /* @__PURE__ */ jsx(StationNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(StationNode, { node: resolvedNode, active, nameRight: stationNameRight });
+      case "timeline-number":
+        return /* @__PURE__ */ jsx(TimelineNumberNode, { node: resolvedNode });
       default:
         return /* @__PURE__ */ jsx(
           GenericNode,
@@ -21263,7 +21687,9 @@ function CdlNodeView({
             value: node.value,
             stateValues,
             \u5024\u306E\u540D\u524D,
-            textMetrics
+            textMetrics,
+            showKindIcon: !(metroDiagram && node.kind === "decision"),
+            metroDecision
           }
         );
     }
@@ -21377,6 +21803,112 @@ function \u7BB1\u306E\u4E0A\u306E\u8A9E(node, textMetrics = "proportional") {
     )
   ] });
 }
+var ink = "var(--cdl-text-accent, #143a52)";
+var paper = "var(--cdl-stage-bg, #f8fafc)";
+var LEGEND_MARK_RENDERERS = {
+  diamond: () => /* @__PURE__ */ jsx("path", { d: "M 23 -26 L 46 -8 L 23 10 L 0 -8 Z", fill: "none", stroke: ink, strokeWidth: 2 }),
+  "filled-circle": () => /* @__PURE__ */ jsx("circle", { cx: 23, cy: -8, r: 11, fill: ink }),
+  "double-circle": () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: 23, cy: -8, r: 12, fill: "none", stroke: ink, strokeWidth: 2.5 }),
+    /* @__PURE__ */ jsx("circle", { cx: 23, cy: -8, r: 6, fill: ink })
+  ] }),
+  "dotted-line": () => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: `M 0 -8 H ${LEGEND_MARK_REFERENCE_WIDTH}`,
+      fill: "none",
+      stroke: ink,
+      strokeWidth: 6,
+      strokeLinecap: "round",
+      strokeDasharray: "0 9.6"
+    }
+  ),
+  "solid-line": () => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: `M 0 -8 H ${LEGEND_MARK_REFERENCE_WIDTH}`,
+      fill: "none",
+      stroke: ink,
+      strokeWidth: 4,
+      strokeLinecap: "round"
+    }
+  ),
+  "curved-line": () => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: `M 0 6 C 12 -22, 34 -22, ${LEGEND_MARK_REFERENCE_WIDTH} 6`,
+      fill: "none",
+      stroke: ink,
+      strokeWidth: 4,
+      strokeLinecap: "round"
+    }
+  ),
+  "rounded-label": () => /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: 0,
+      y: -23,
+      width: LEGEND_MARK_REFERENCE_WIDTH,
+      height: 30,
+      rx: 9,
+      fill: paper,
+      stroke: ink,
+      strokeWidth: 2
+    }
+  ),
+  "numbered-circle": () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: 23, cy: -8, r: 13, fill: paper, stroke: ink, strokeWidth: 2.5 }),
+    /* @__PURE__ */ jsx("text", { x: 23, y: -2, textAnchor: "middle", fontSize: 17, fontWeight: 700, fill: ink, children: "1" })
+  ] }),
+  station: () => /* @__PURE__ */ jsx("circle", { cx: 23, cy: -8, r: 11, fill: paper, stroke: ink, strokeWidth: 4 }),
+  arrow: () => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: `M 0 -8 H 42 M 32 -18 L ${LEGEND_MARK_REFERENCE_WIDTH} -8 L 32 2`,
+      fill: "none",
+      stroke: ink,
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+};
+function CdlLegend({ items }) {
+  return /* @__PURE__ */ jsx("g", { "data-cdl-role": "legend", children: items.map((item, index) => {
+    const Mark = LEGEND_MARK_RENDERERS[item.mark];
+    return /* @__PURE__ */ jsxs(
+      "g",
+      {
+        "data-cdl-role": "legend-item",
+        "data-cdl-y": item.y,
+        transform: `translate(${item.x} ${item.y})`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "g",
+            {
+              "data-cdl-role": "legend-mark",
+              "data-cdl-legend-mark": item.mark,
+              transform: `scale(${LEGEND_MARK_SCALE})`,
+              children: /* @__PURE__ */ jsx(Mark, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              "data-cdl-role": "legend-text",
+              x: LEGEND_MARK_WIDTH + LEGEND_MARK_TEXT_GAP,
+              y: 0,
+              fontSize: LEGEND_FONT_SIZE,
+              fill: "var(--cdl-text-mute, #4d7187)",
+              children: item.text
+            }
+          )
+        ]
+      },
+      `${item.mark}-${index}`
+    );
+  }) });
+}
 
 // src/render/relation-focus.ts
 function relatedFocusSet(edges, nodeId) {
@@ -21389,10 +21921,17 @@ function relatedFocusSet(edges, nodeId) {
   }
   return \u96C6\u5408;
 }
+var METRO_LANE_BADGE_WIDTH = 200;
+var METRO_LANE_BADGE_HEIGHT = 88;
+var METRO_LANE_BADGE_INSET = 24;
+var METRO_LANE_GUIDE_GAP = 24;
 function \u63CF\u304F\u3082\u306E\u304C\u3042\u308B(laid) {
+  if (laid.legend && laid.legend.length > 0) return true;
   if (laid.edges.length > 0) return true;
   if (laid.nodes.some((n) => isRenderedNode(n))) return true;
-  return laid.lanes.some((l) => l.contain === true || l.lifeline === true || Boolean(l.label));
+  return laid.lanes.some(
+    (l) => l.contain === true || l.lifeline === true || Boolean(l.label) || l.stage !== void 0 || l.metro !== void 0
+  );
 }
 function CdlStage({
   laid,
@@ -21433,6 +21972,7 @@ function CdlStage({
     [\u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B, \u7126\u70B9, laid.edges]
   );
   const activeSet = \u7126\u70B9\u306E\u96C6\u5408 ?? new Set(currentPhase?.activate ?? []);
+  const \u8DEF\u7DDA\u56F3 = laid.edges.some((edge) => edge.routing === "metro") && laid.nodes.some((node) => node.kind === "station");
   const \u7BB1\u306E\u53D7\u3051\u53E3 = \u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B ? { \u89E6\u308C\u305F, \u96E2\u308C\u305F, \u62BC\u3057\u305F, \u7126\u70B9: \u7126\u70B9?.id ?? null } : void 0;
   const \u77E2\u5370\u306E\u51FA\u756A = useMemo(() => {
     const \u521D\u51FA = /* @__PURE__ */ new Map();
@@ -21461,9 +22001,15 @@ function CdlStage({
         const first = \u521D\u51FA.get(edgeId);
         if (first === void 0) return false;
         return \u4ECA === first;
+      },
+      /** 初出の段より前にある区間だけを、通過前として選べるようにする。 */
+      \u307E\u3060\u304B: (edgeId) => {
+        const first = \u521D\u51FA.get(edgeId);
+        return first !== void 0 && \u4ECA >= 0 && \u4ECA < first;
       }
     };
   }, [laid.phases, currentPhase, laid.edgeReveal]);
+  const \u7DDA\u3092\u63CF\u304F = (edge) => edge.routing === "metro" || \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id);
   const drawSet = new Set(currentPhase?.draw ?? []);
   const chartLineScales = useMemo(() => {
     const nodes = laid.nodes.filter((node) => node.kind === "chart-line");
@@ -21551,7 +22097,53 @@ function CdlStage({
       )
     );
   }, [laid]);
+  const metroReturnArrowMarkers = useMemo(() => {
+    const tones = new Set(
+      laid.edges.filter((edge) => edge.metroReturn === true).map((edge) => edge.tone)
+    );
+    return [...tones].map((tone) => /* @__PURE__ */ jsx(
+      "marker",
+      {
+        id: metroReturnArrowMarkerId(tone),
+        viewBox: "0 -9.5 21 19",
+        refX: "0",
+        refY: "0",
+        markerWidth: "21",
+        markerHeight: "19",
+        markerUnits: "userSpaceOnUse",
+        orient: "auto",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            "data-cdl-role": "edge-arrowhead",
+            "data-cdl-mark": "metro-return-arrow",
+            d: METRO_RETURN_ARROW_D,
+            fill: TONE[tone]
+          }
+        )
+      },
+      tone
+    ));
+  }, [laid.edges]);
   const diagramScale = laid.diagramScale ?? 1;
+  const stageLaneIds = new Set(
+    laid.lanes.filter((lane) => lane.stage !== void 0).map((lane) => lane.id)
+  );
+  const stageNoteNodes = laid.nodes.filter(
+    (node) => node.kind === "card" && (stageLaneIds.has(node.lane) || node.leaderTo !== void 0) && isRenderedNode(node) && Boolean(node.subtitle)
+  );
+  const stageNoteNodeIds = new Set(stageNoteNodes.map((node) => node.id));
+  const nodesById = new Map(laid.nodes.map((node) => [node.id, node]));
+  const metroDecisionIds = /* @__PURE__ */ new Set();
+  const stationNamesRight = /* @__PURE__ */ new Set();
+  for (const edge of laid.edges) {
+    if (edge.routing !== "metro") continue;
+    if (nodesById.get(edge.from)?.kind === "decision") metroDecisionIds.add(edge.from);
+    if (nodesById.get(edge.to)?.kind === "decision") metroDecisionIds.add(edge.to);
+    if (edge.toSide === "top" && nodesById.get(edge.to)?.kind === "station") {
+      stationNamesRight.add(edge.to);
+    }
+  }
   if (!\u63CF\u304F\u3082\u306E\u304C\u3042\u308B(laid)) return null;
   return /* @__PURE__ */ jsxs("div", { className: compact ? "px-3 py-3" : "px-6 py-6", style: compact ? void 0 : { minHeight: 460 }, children: [
     /* @__PURE__ */ jsxs(
@@ -21571,6 +22163,7 @@ function CdlStage({
         children: [
           /* @__PURE__ */ jsxs("defs", { children: [
             edgeHeadMarkers,
+            metroReturnArrowMarkers,
             /* @__PURE__ */ jsx(
               "marker",
               {
@@ -21607,7 +22200,61 @@ function CdlStage({
                     pointerEvents: "none"
                   }
                 ),
-                lane.contain && /* @__PURE__ */ jsx(
+                lane.stage && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      "data-cdl-role": "stage-column",
+                      x: lane.x + STAGE_COLUMN_GAP / 2,
+                      y: lane.y,
+                      width: lane.width - STAGE_COLUMN_GAP,
+                      height: lane.height,
+                      rx: 16,
+                      fill: "var(--cdl-stage-bg, #fafafa)",
+                      fillOpacity: 0.5,
+                      stroke: "var(--cdl-text-mute, #8a8678)",
+                      strokeWidth: 1.5
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      "data-cdl-role": "stage-number",
+                      x: lane.x + STAGE_COLUMN_GAP / 2 + 20,
+                      y: lane.y + 24,
+                      fontSize: 14,
+                      fontWeight: 500,
+                      letterSpacing: 1.5,
+                      fill: "var(--cdl-text-mute, #8a8678)",
+                      children: `\u6BB5\u968E ${lane.stage.number}`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      "data-cdl-role": "stage-name",
+                      x: lane.x + STAGE_COLUMN_GAP / 2 + 20,
+                      y: lane.y + 55,
+                      fontSize: 22,
+                      fontWeight: 700,
+                      fill: "var(--cdl-text, #1a1f2a)",
+                      children: lane.stage.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      "data-cdl-role": "stage-divider",
+                      x1: lane.x + STAGE_COLUMN_GAP / 2,
+                      y1: lane.y + 72,
+                      x2: lane.x + lane.width - STAGE_COLUMN_GAP / 2,
+                      y2: lane.y + 72,
+                      stroke: "var(--cdl-divider, #d4d4d8)",
+                      strokeWidth: 1.5
+                    }
+                  )
+                ] }),
+                lane.contain && lane.stage === void 0 && /* @__PURE__ */ jsx(
                   "rect",
                   {
                     "data-cdl-role": "lane-container",
@@ -21643,7 +22290,85 @@ function CdlStage({
                     }
                   );
                 })(),
-                lane.label && /* @__PURE__ */ jsx(
+                lane.timelineAxis && (() => {
+                  const ys = laid.nodes.filter((node) => node.lane === lane.id && isRenderedNode(node)).map((node) => node.cy);
+                  if (ys.length < 2) return null;
+                  const y1 = Math.min(...ys);
+                  const y2 = Math.max(...ys);
+                  if (y2 <= y1) return null;
+                  return /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      "data-cdl-role": "timeline-axis",
+                      x1: lane.x + lane.width / 2,
+                      y1,
+                      x2: lane.x + lane.width / 2,
+                      y2,
+                      stroke: "var(--cdl-tone-accent, #2d6a8f)",
+                      strokeWidth: TIMELINE_NUMBER_STROKE
+                    }
+                  );
+                })(),
+                lane.metro !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      "data-cdl-role": "metro-lane-guide",
+                      x1: lane.x + METRO_LANE_BADGE_INSET + METRO_LANE_BADGE_WIDTH + METRO_LANE_GUIDE_GAP,
+                      y1: lane.y + lane.height / 2,
+                      x2: lane.x + lane.width - METRO_LANE_BADGE_INSET,
+                      y2: lane.y + lane.height / 2,
+                      stroke: "var(--cdl-line-mute, #a89d8f)",
+                      strokeWidth: 2,
+                      strokeDasharray: "22 7 5 7",
+                      opacity: 0.45
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "g",
+                    {
+                      "data-cdl-role": "metro-lane-badge",
+                      transform: `translate(${lane.x + METRO_LANE_BADGE_INSET} ${lane.y + lane.height / 2 - METRO_LANE_BADGE_HEIGHT / 2})`,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            width: METRO_LANE_BADGE_WIDTH,
+                            height: METRO_LANE_BADGE_HEIGHT,
+                            rx: 12,
+                            fill: "var(--cdl-node-fill, #ffffff)",
+                            stroke: "var(--cdl-tone-accent, #2d6a8f)",
+                            strokeWidth: 1.25
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "text",
+                          {
+                            x: METRO_LANE_BADGE_WIDTH / 2,
+                            y: lane.metro.subtitle ? 37 : 53,
+                            fontSize: 26,
+                            fontWeight: 700,
+                            fill: "var(--cdl-text, #1a1f2a)",
+                            textAnchor: "middle",
+                            children: lane.label
+                          }
+                        ),
+                        lane.metro.subtitle && /* @__PURE__ */ jsx(
+                          "text",
+                          {
+                            x: METRO_LANE_BADGE_WIDTH / 2,
+                            y: 67,
+                            fontSize: 18,
+                            fill: "var(--cdl-text-dim, #5a6270)",
+                            textAnchor: "middle",
+                            children: lane.metro.subtitle
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                lane.label && lane.metro === void 0 && /* @__PURE__ */ jsx(
                   "text",
                   {
                     "data-cdl-role": "lane-label",
@@ -21660,7 +22385,34 @@ function CdlStage({
             },
             lane.id
           )),
-          laid.edges.filter((edge) => \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).map((edge) => /* @__PURE__ */ jsx(
+          laid.nodes.map((node) => {
+            if (node.leaderTo === void 0) return null;
+            const target = nodesById.get(node.leaderTo);
+            if (target === void 0) return null;
+            if (!isRenderedNode(node) || !isRenderedNode(target)) return null;
+            const targetIsRight = target.cx >= node.cx;
+            const x1 = node.cx + (targetIsRight ? node.w / 2 : -node.w / 2);
+            const x2 = target.cx + (targetIsRight ? -target.w / 2 : target.w / 2);
+            if (targetIsRight ? x2 <= x1 : x1 <= x2) return null;
+            return /* @__PURE__ */ jsx(
+              "line",
+              {
+                "data-cdl-role": "timeline-leader",
+                "data-cdl-leader-from": node.id,
+                "data-cdl-leader-to": node.leaderTo,
+                x1,
+                y1: node.cy,
+                x2,
+                y2: target.cy,
+                stroke: "var(--cdl-line-mute, #a89d8f)",
+                strokeWidth: 1.5,
+                strokeDasharray: "2 4",
+                strokeLinecap: "round"
+              },
+              `timeline-leader-${node.id}`
+            );
+          }),
+          laid.edges.filter(\u7DDA\u3092\u63CF\u304F).map((edge) => /* @__PURE__ */ jsx(
             CdlEdgeView,
             {
               edge,
@@ -21668,16 +22420,19 @@ function CdlStage({
               flowing: \u7126\u70B9\u306E\u96C6\u5408?.has(edge.id) === true && !\u52D5\u304D\u3092\u63A7\u3048\u308B,
               drawing: \u77E2\u5370\u306E\u51FA\u756A.\u4F38\u3070\u3059\u304B(edge.id),
               progress: \u77E2\u5370\u306E\u51FA\u756A.\u4F38\u3070\u3059\u304B(edge.id) ? \u63CF\u304F\u9032\u307F : progress,
-              stateValues
+              stateValues,
+              pending: edge.routing === "metro" && \u77E2\u5370\u306E\u51FA\u756A.\u307E\u3060\u304B(edge.id)
             },
             edge.id
           )),
           laid.nodes.map((node) => {
             const \u63CF\u304F = drawSet.has(node.id);
+            const \u6BB5\u968E\u306E\u88DC\u8DB3 = stageNoteNodeIds.has(node.id);
             const view = /* @__PURE__ */ jsx(
               CdlNodeView,
               {
-                node,
+                node: \u6BB5\u968E\u306E\u88DC\u8DB3 ? { ...node, subtitle: void 0 } : node,
+                compactTitleInset: \u6BB5\u968E\u306E\u88DC\u8DB3 ? STAGE_CARD_TEXT_INSET : void 0,
                 active: activeSet.has(node.id),
                 lang: laid.lang,
                 textMetrics: laid.textMetrics,
@@ -21687,13 +22442,32 @@ function CdlStage({
                 stateValues,
                 \u5024\u306E\u540D\u524D,
                 currentPhaseId: currentPhase?.id,
-                chartLineScale: chartLineScales.get(node.id)
+                chartLineScale: chartLineScales.get(node.id),
+                metroDiagram: \u8DEF\u7DDA\u56F3,
+                metroDecision: metroDecisionIds.has(node.id),
+                stationNameRight: stationNamesRight.has(node.id)
               }
             );
             return /* @__PURE__ */ jsx("g", { children: view }, node.id);
           }),
-          laid.edges.filter((edge) => Boolean(edge.dThrough) && \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).map((edge) => /* @__PURE__ */ jsx(CdlEdgeGlowView, { edge, active: activeSet.has(edge.id) }, `glow-${edge.id}`)),
-          laid.edges.filter((edge) => \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).map((edge) => /* @__PURE__ */ jsx(
+          stageNoteNodes.map((node) => /* @__PURE__ */ jsx(
+            "text",
+            {
+              "data-cdl-role": "stage-note",
+              "data-cdl-stage-node": node.id,
+              x: node.cx + node.w / 2 - STAGE_CARD_TEXT_INSET,
+              y: node.cy + 1,
+              fontSize: 14,
+              fontWeight: 500,
+              textAnchor: "end",
+              dominantBaseline: "middle",
+              fill: "var(--cdl-text-mute, #8a8678)",
+              children: interpolate(node.subtitle, stateValues, \u5024\u306E\u540D\u524D)
+            },
+            `stage-note-${node.id}`
+          )),
+          laid.edges.filter((edge) => Boolean(edge.dThrough) && \u7DDA\u3092\u63CF\u304F(edge)).map((edge) => /* @__PURE__ */ jsx(CdlEdgeGlowView, { edge, active: activeSet.has(edge.id) }, `glow-${edge.id}`)),
+          laid.edges.filter(\u7DDA\u3092\u63CF\u304F).map((edge) => /* @__PURE__ */ jsx(
             CdlEdgeLabelView,
             {
               edge,
@@ -21702,7 +22476,7 @@ function CdlStage({
             },
             `label-${edge.id}`
           )),
-          laid.edges.filter((edge) => (edge.headLabel || edge.tailLabel) && \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).flatMap(
+          laid.edges.filter((edge) => (edge.headLabel || edge.tailLabel) && \u7DDA\u3092\u63CF\u304F(edge)).flatMap(
             (edge) => ["head", "tail"].map((\u7AEF) => /* @__PURE__ */ jsx(
               CdlEdgeEndLabelView,
               {
@@ -21714,6 +22488,7 @@ function CdlStage({
               `${\u7AEF}-label-${edge.id}`
             ))
           ),
+          laid.legend && /* @__PURE__ */ jsx(CdlLegend, { items: laid.legend }),
           debug && /* @__PURE__ */ jsxs("g", { pointerEvents: "none", children: [
             laid.bboxes.map((bbox, idx) => {
               const color = bbox.kind === "node" ? "#3b82f6" : bbox.kind === "lane-label" ? "#a855f7" : bbox.kind === "edge-label" ? "#10b981" : "#f59e0b";