@cardenelabs/cdl 0.123.0 → 0.125.0

package/dist/index.js

@@ -12330,6 +12330,8 @@ function diagram(id, options) {
         ...options.textMetrics !== void 0 ? { textMetrics: options.textMetrics } : {},
         // 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
         ...options.type !== void 0 ? { type: options.type } : {},
+        // 空の並びは書かなかった図と同じ形にする。 凡例なしの JSON と配置を変えない
+        ...options.legend && options.legend.length > 0 ? { legend: options.legend.map((item) => ({ ...item })) } : {},
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)
         ...inputs.length > 0 ? { inputs: [...inputs] } : {},
         ...formulas.length > 0 ? { formulas: [...formulas] } : {},
@@ -12442,7 +12444,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]
   ),
   ...[
@@ -12487,8 +12489,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;
@@ -12498,9 +12502,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",
@@ -12584,14 +12596,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 ?? "");
@@ -14698,6 +14712,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;
@@ -14715,7 +14737,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;
@@ -14750,11 +14828,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;
@@ -14784,7 +14896,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";
@@ -14814,33 +14925,32 @@ 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 } : {}
   };
 }
 
 // src/types.ts
 var TONES = ["accent", "teal", "success", "error", "warning", "info"];
+var LEGEND_MARKS = [
+  "diamond",
+  "filled-circle",
+  "double-circle",
+  "dotted-line",
+  "solid-line",
+  "curved-line",
+  "rounded-label",
+  "numbered-circle",
+  "station",
+  "arrow"
+];
 var NODE_KINDS = [
   // dynamic shape (CAR: shape primitive) ... signal 値で内部 fill / radius / angle 等が
   // リアルタイム変化する汎用 container、 shape spec は node.shape に格納
@@ -14962,12 +15072,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"
 ];
@@ -17701,7 +17813,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",
@@ -17727,8 +17839,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",
@@ -17747,7 +17858,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"
       );
     }
@@ -19561,6 +19672,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 },
@@ -19687,7 +19800,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 }
@@ -19702,6 +19818,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;
@@ -19802,12 +19920,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
       });
@@ -19824,7 +19954,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);
@@ -20512,6 +20643,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));
@@ -20589,7 +20771,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);
@@ -20959,23 +21141,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;
@@ -21902,12 +22113,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,
@@ -21918,7 +22173,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,
@@ -21926,6 +22183,7 @@ function layoutLanes(diag) {
       height: LANE_LABEL_H
     };
   });
+  return equalizeStageColumns(lanes);
 }
 function expandLanesForNodes(lanes, nodes) {
   const targetNodeGap = targetNodeNodeClearance();
@@ -21954,7 +22212,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);
   }
@@ -21979,6 +22238,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]));
@@ -22050,7 +22337,7 @@ function recomputeContainedLanes(lanes, nodes) {
       lifelineBottom = Math.max(lifelineBottom, bottom);
     }
   }
-  return lanes.map((lane) => {
+  const contained = lanes.map((lane) => {
     if (lane.lifeline) {
       return {
         ...lane,
@@ -22068,6 +22355,7 @@ function recomputeContainedLanes(lanes, nodes) {
       height: bottom - top + CONTAIN_PAD * 2 + LANE_LABEL_H
     };
   });
+  return equalizeStageColumns(contained, nodes);
 }
 
 // src/layout/head-label.ts
@@ -22217,11 +22505,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();
@@ -22257,7 +22549,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;
@@ -22380,6 +22672,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;
@@ -22499,7 +22794,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,
@@ -22526,6 +22829,7 @@ function layout(diag) {
     ...textMetrics === "monospace" ? { textMetrics: "monospace" } : {},
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...diag.type ? { type: diag.type } : {},
+    ...legendLayout ? { legend: legendLayout.legend } : {},
     bboxes,
     collisions,
     nearCollisions,
@@ -22714,6 +23018,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)) {
@@ -24549,6 +24858,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 },
@@ -24603,6 +24916,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;
 }
@@ -24621,12 +24935,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;
@@ -24636,6 +24952,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,
@@ -24661,11 +24978,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
               }
             }
           ),
@@ -24720,7 +25038,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",
     {
@@ -24729,14 +25049,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
       }
     }
   );
@@ -25033,7 +25354,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;
@@ -25051,12 +25376,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;
@@ -25819,7 +26144,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);
@@ -25850,14 +26177,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
         }
       );
     }
@@ -25921,11 +26248,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",
     {
@@ -25934,12 +26261,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",
@@ -25988,50 +26315,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
       }
     )
   ] });
@@ -26363,27 +26816,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) {
@@ -33545,10 +33977,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));
@@ -33589,7 +34025,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(
@@ -33876,11 +34312,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,
@@ -33890,7 +34328,9 @@ function CdlNodeView({
             value: node.value,
             stateValues,
             \u5024\u306E\u540D\u524D,
-            textMetrics
+            textMetrics,
+            showKindIcon: !(metroDiagram && node.kind === "decision"),
+            metroDecision
           }
         );
     }
@@ -34004,6 +34444,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) {
@@ -34016,10 +34562,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,
@@ -34060,6 +34613,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();
@@ -34088,9 +34642,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");
@@ -34178,7 +34738,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(
@@ -34198,6 +34804,7 @@ function CdlStage({
         children: [
           /* @__PURE__ */ jsxs("defs", { children: [
             edgeHeadMarkers,
+            metroReturnArrowMarkers,
             /* @__PURE__ */ jsx(
               "marker",
               {
@@ -34234,7 +34841,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",
@@ -34270,7 +34931,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",
@@ -34287,7 +35026,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,
@@ -34295,16 +35061,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,
@@ -34314,13 +35083,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,
@@ -34329,7 +35117,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,
               {
@@ -34341,6 +35129,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";
@@ -35970,6 +36759,6 @@ function slugify(s) {
   return s.toLowerCase().replace(/[^a-z0-9぀-ゟ゠-ヿ一-龯]+/g, "-").replace(/^-|-$/g, "");
 }
 
-export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLASS_RELATION_LOOK, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDiagramThumbnail, CdlDiagramView, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, EDGE_HEADS, EDGE_HEAD_DEFAULT, EDGE_HEAD_FILLS, EDGE_HEAD_FILL_DEFAULT, EDGE_LABEL_TEXT, EDGE_REVEALS, EDGE_REVEAL_DEFAULT, EDGE_STUB_OUT, EDGE_STYLES, ER_CARDINALITY_HEAD, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, FSM_ACTION_MARK, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, NODE_KINDS, PERF_BUDGET_TOTAL_MS, PERF_SLOWEST_SAMPLE, RELATION_FOCUSES, RELATION_FOCUS_DEFAULT, ROW_GAP_VARIANCE_TOL, SEQUENCE_MESSAGE_LOOK, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, TARGET_LABEL_PATH_DIST, TONES, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeEventBindingKey, computeFormulaKey, computeInputSignalKey, computeScrollProgress, computeScrollTriggerKey, computeStateValues, computeViewportScale, computed, countEdgeCrossings, countOrderCrossings, createFormulaComputeds, createInputSignals, createInteractiveSignalsAccessor, createScrollProgressHandle, createScrollProgressSignals, diagram, drawsFigureTitle, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, hasInteractivePrimitives, infrastructure, inputDefaultValue, interpolate, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, orderNodes, parseFormula, pointRectEdgeDistance, pointToSegmentDistance2 as pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, relatedFocusSet, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveLabelClearanceAfterPathPasses, resolveLang, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, resolveTextMetrics, segmentsIntersect2 as segmentsIntersect, sequence, sequenceBoardMetrics, sequenceStepId, signal, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx, 木の札の幅 };
+export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLASS_RELATION_LOOK, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDiagramThumbnail, CdlDiagramView, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, EDGE_HEADS, EDGE_HEAD_DEFAULT, EDGE_HEAD_FILLS, EDGE_HEAD_FILL_DEFAULT, EDGE_LABEL_TEXT, EDGE_REVEALS, EDGE_REVEAL_DEFAULT, EDGE_STUB_OUT, EDGE_STYLES, ER_CARDINALITY_HEAD, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, FSM_ACTION_MARK, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, LEGEND_MARKS, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, NODE_KINDS, PERF_BUDGET_TOTAL_MS, PERF_SLOWEST_SAMPLE, RELATION_FOCUSES, RELATION_FOCUS_DEFAULT, ROW_GAP_VARIANCE_TOL, SEQUENCE_MESSAGE_LOOK, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, TARGET_LABEL_PATH_DIST, TONES, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeEventBindingKey, computeFormulaKey, computeInputSignalKey, computeScrollProgress, computeScrollTriggerKey, computeStateValues, computeViewportScale, computed, countEdgeCrossings, countOrderCrossings, createFormulaComputeds, createInputSignals, createInteractiveSignalsAccessor, createScrollProgressHandle, createScrollProgressSignals, diagram, drawsFigureTitle, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, hasInteractivePrimitives, infrastructure, inputDefaultValue, interpolate, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, orderNodes, parseFormula, pointRectEdgeDistance, pointToSegmentDistance2 as pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, relatedFocusSet, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveLabelClearanceAfterPathPasses, resolveLang, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, resolveTextMetrics, segmentsIntersect2 as segmentsIntersect, sequence, sequenceBoardMetrics, sequenceStepId, signal, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx, 木の札の幅 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map