@cardenelabs/cdl 0.124.0 → 0.125.0

package/src/kinds/terminal-mark.tsx

@@ -20,6 +20,12 @@ export const MARK_INNER_RATIO = 0.56;
 const RING_WIDTH_ACTIVE = 6;
 const RING_WIDTH_IDLE = 4;
 
+// 路線図は線路幅 10 と釣り合う見本の寸法を保ち、状態遷移図の大きな印とは混ぜない。
+const METRO_START_RADIUS = 17;
+const METRO_END_RADIUS = 19;
+const METRO_END_RING_WIDTH = 3.5;
+const METRO_END_INNER_RADIUS = 10;
+
 /** 印の既定の色。 `tone` を書けばそちらが勝つ */
 const MARK_DEFAULT = "var(--cdl-tone-accent, #2d6a8f)";
 
@@ -44,16 +50,26 @@ function markRadius(node: LaidNode): number {
  * 無い。 枠を足すと線の中心が半径に乗るぶん丸が箱の外へ出て、線との接点がずれる (実測で
  * 太さ 4 の枠を足すと外径が 96 から 100 になった)。 色は `tone` で変えられる。
  */
-export function MarkStartNode({ node }: { node: LaidNode; active: boolean }): JSX.Element {
+export function MarkStartNode({
+  node,
+  metro = false,
+}: {
+  node: LaidNode;
+  active: boolean;
+  metro?: boolean;
+}): JSX.Element {
   const 色 = nodeAccent(node, MARK_DEFAULT);
   return (
-    <g transform={`translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`}>
+    <g
+      data-cdl-role={metro ? "mark-start" : undefined}
+      transform={`translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`}
+    >
       <circle
         data-cdl-role="node-body"
         data-cdl-mark="start"
         cx={node.w / 2}
         cy={node.h / 2}
-        r={markRadius(node)}
+        r={metro ? METRO_START_RADIUS : markRadius(node)}
         fill={色}
       />
     </g>
@@ -66,12 +82,23 @@ export function MarkStartNode({ node }: { node: LaidNode; active: boolean }): JS
  * 輪と中身は同じ色で描く。 別の色にすると 2 つの意味を持つ印に見えるが、表しているのは
  * 「ここで終わる」 の 1 つだけ。
  */
-export function MarkEndNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function MarkEndNode({
+  node,
+  active,
+  metro = false,
+}: {
+  node: LaidNode;
+  active: boolean;
+  metro?: boolean;
+}): JSX.Element {
   const 色 = nodeAccent(node, MARK_DEFAULT);
-  const r = markRadius(node);
-  const 輪の太さ = active ? RING_WIDTH_ACTIVE : RING_WIDTH_IDLE;
+  const r = metro ? METRO_END_RADIUS : markRadius(node);
+  const 輪の太さ = metro ? METRO_END_RING_WIDTH : active ? RING_WIDTH_ACTIVE : RING_WIDTH_IDLE;
   return (
-    <g transform={`translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`}>
+    <g
+      data-cdl-role={metro ? "mark-end" : undefined}
+      transform={`translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`}
+    >
       <circle
         data-cdl-role="node-body"
         data-cdl-mark="end"
@@ -79,7 +106,7 @@ export function MarkEndNode({ node, active }: { node: LaidNode; active: boolean
         cy={node.h / 2}
         // 輪は線の中心を半径に置くので、外側へ太さの半分だけ出る。 印が箱の短い方の辺に
         // 収まるよう、その分だけ縮める
-        r={Math.max(0, r - 輪の太さ / 2)}
+        r={metro ? r : Math.max(0, r - 輪の太さ / 2)}
         fill="var(--cdl-node-fill, #ffffff)"
         stroke={色}
         strokeWidth={輪の太さ}
@@ -88,7 +115,7 @@ export function MarkEndNode({ node, active }: { node: LaidNode; active: boolean
         data-cdl-role="node-inner"
         cx={node.w / 2}
         cy={node.h / 2}
-        r={Math.max(0, r * MARK_INNER_RATIO)}
+        r={metro ? METRO_END_INNER_RADIUS : Math.max(0, r * MARK_INNER_RATIO)}
         fill={色}
       />
     </g>

package/src/layout/edges.ts

@@ -42,7 +42,7 @@ import {
   ARROW_ENDPOINT_CENTER_TOL,
 } from "./spec";
 import { isSelfLoop, layoutSelfLoops } from "./self-loop";
-import { DEFAULT_LABEL_MARGIN } from "./tokens";
+import { DEFAULT_LABEL_MARGIN, STAGE_COLUMN_GAP } from "./tokens";
 
 /** 縦 detour が obstacle の外側を通る時の余白 (world unit)。 */
 const VERTICAL_DETOUR_GAP = 50;
@@ -273,12 +273,30 @@ export function layoutEdges(
       if (!from) throw new Error(`cdl layout: edge "${e.id}" の from "${e.from}" が node に無い`);
       if (!to) throw new Error(`cdl layout: edge "${e.id}" の to "${e.to}" が node に無い`);
       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 !== undefined &&
+        toLane?.stage !== undefined &&
+        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,
       });
@@ -296,6 +314,7 @@ export function layoutEdges(
         labelX: m.labelX + (e.labelOffsetX ?? 0),
         labelY: m.labelY + (e.labelOffsetY ?? 0),
         labelAnchor: m.labelAnchor,
+        ...(m.metroReturn ? { metroReturn: true as const } : {}),
       });
     } else {
       autoEdges.push(e);
@@ -1551,6 +1570,7 @@ function makeBackDetourCandidate(
   obstacles: readonly LaidNode[],
   detourY: number,
   side: DetourSide,
+  columnXOverride?: number,
 ): BackDetourCandidate {
   const lowIsA = A.y >= B.y;
   const low = lowIsA ? A : B;
@@ -1560,16 +1580,18 @@ function makeBackDetourCandidate(
   const bandObstacles = obstacles
     .map(nodeRect)
     .filter((rect) => rect.y + rect.h >= bandTop && rect.y <= bandBottom);
-  let columnX = detourColumnFor([from, to], side);
-  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));
+  let columnX = columnXOverride ?? detourColumnFor([from, to], side);
+  if (columnXOverride === undefined) {
+    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;
@@ -1732,8 +1754,8 @@ function routePath(
   obstacles: LaidNode[] = [],
   /** 逆向きの edge と通り道を共有する時に割り当てられる側。 未指定なら右。 */
   detourSide?: DetourSide,
-  _fromLane?: LaidLane,
-  _toLane?: LaidLane,
+  fromLane?: LaidLane,
+  toLane?: LaidLane,
   edge?: CdlEdge,
   labelObstacles: LaidNode[] = obstacles,
   // CAR-541 SSOT ... 同 node 対称対 lower edge の両 endpoint 平行 shift 量 (world unit)。
@@ -2459,17 +2481,34 @@ function routePath(
   // routing v7 = detour 高さを 200 → 100 に縮小。 200px 上に飛ぶと state から遠く label が「浮いて」 見える。
   // 100px = state h/2 (75) + margin 25、 forward path (state 中心線) からは h/2 + 100 = 175px 離れて overlap 回避。
   if (topTopPair) {
-    const detourY = Math.min(A.y, B.y) - 100;
+    // 段階列では、見出しの左側を縦に貫かないよう node 上辺の右寄りから出入りし、
+    // 水平の戻り回廊を全ての段階列より上へ持ち上げる。
+    const stagePoint = (point: Vertex, node: LaidNode, lane: LaidLane | undefined): Vertex =>
+      lane?.stage === undefined
+        ? point
+        : {
+            x: Math.min(node.cx + node.w / 2 - 24, lane.x + lane.width - 24),
+            y: point.y,
+          };
+    const backA = stagePoint(A, from, fromLane);
+    const backB = stagePoint(B, to, toLane);
+    const stageTops = [fromLane, toLane]
+      .filter((lane): lane is LaidLane => lane?.stage !== undefined)
+      .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;
+    const xDir = backB.x > backA.x ? 1 : -1;
     const existing = {
-      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,
+      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 準拠距離。
@@ -2482,7 +2521,21 @@ function routePath(
     // 帯に掛かる箱を避けた最も近い外側の列なら、経路に関わらない遠い箱を足しても列を動かさない。
     // 遠回りは交差を実際に減らす時だけ採り、減らない時は短く読める従来経路を保って、
     // 残る交差を `edge-node-cross` に報告させる。
-    const candidate = chooseBackDetourCandidate(A, B, from, to, obstacles, detourY);
+    // 同じ段階列の中を戻る線は、列面どうしの 48 world の隙間の中央を縦回廊に使う。
+    // 汎用の 50 world clearance で外へ押すと、隣の段階列の面へ入り込むため。
+    const candidate =
+      from.lane === to.lane && fromLane?.stage !== undefined
+        ? 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,

package/src/layout/lanes.ts

@@ -1,7 +1,14 @@
 import type { CdlDiagram, CdlEdge, CdlTextMetrics, LaidLane, LaidNode } from "../types";
 import { CLEARANCE_NODE_LABEL } from "./clearance-constants";
 import { computeLabelBoxW, EDGE_STUB_OUT, targetNodeNodeClearance } from "./spec";
-import { CONTAIN_PAD, DEFAULT_LANE_GAP, HEADER_RESERVE, LANE_LABEL_H, LANE_PAD_MIN } from "./tokens";
+import {
+  CONTAIN_PAD,
+  DEFAULT_LANE_GAP,
+  HEADER_RESERVE,
+  LANE_LABEL_H,
+  LANE_PAD_MIN,
+  STAGE_COLUMN_GAP,
+} from "./tokens";
 
 /**
  * lane.x を「動いた」 と見なす最小差分 (world unit)。
@@ -12,6 +19,22 @@ import { CONTAIN_PAD, DEFAULT_LANE_GAP, HEADER_RESERVE, LANE_LABEL_H, LANE_PAD_M
  */
 const LANE_POSITION_EPSILON = 1e-9;
 
+/** 段階列だけを、全列を含む共通の上端と下端へ揃える。 */
+function equalizeStageColumns(lanes: LaidLane[], nodes: readonly LaidNode[] = []): LaidLane[] {
+  const stages = lanes.filter((lane) => lane.stage !== undefined);
+  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 === undefined ? lane : { ...lane, y: top, height: bottom - top },
+  );
+}
+
 export function layoutLanes(diag: CdlDiagram): LaidLane[] {
   // contain なし lane = label 高だけ確保、 contain あり lane は後で recompute で高さを node から決める。
   // lane.x が未指定 (undefined) なら 前 lane の右端 + laneGap で auto 計算 (mermaid 風 auto-layout)。
@@ -28,7 +51,7 @@ export function layoutLanes(diag: CdlDiagram): LaidLane[] {
   // 与えず、 完全に独立した free-form 座標として扱う。 未指定 lane は従来通り。
   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 !== undefined && lane.posY !== undefined) {
       return {
         ...lane,
@@ -39,7 +62,9 @@ export function layoutLanes(diag: CdlDiagram): LaidLane[] {
       };
     }
     const resolvedX = lane.x ?? cursorX;
-    cursorX = resolvedX + lane.width + laneGap;
+    const nextLane = diag.lanes[index + 1];
+    const gapAfter = lane.stage !== undefined && nextLane?.stage !== undefined ? 0 : laneGap;
+    cursorX = resolvedX + lane.width + gapAfter;
     return {
       ...lane,
       x: resolvedX,
@@ -47,6 +72,7 @@ export function layoutLanes(diag: CdlDiagram): LaidLane[] {
       height: LANE_LABEL_H,
     };
   });
+  return equalizeStageColumns(lanes);
 }
 
 /**
@@ -128,7 +154,9 @@ export function expandLanesForNodes(lanes: LaidLane[], nodes: LaidNode[]): LaidL
     if (lane.posX !== undefined && lane.posY !== undefined) 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 === undefined ? 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);
   }
@@ -203,6 +231,41 @@ export function expandLaneGapsForEdgeLabels(
   // 未指定 lane のみ従来の pitch 均一化 logic に参加、 catalog 100+ backward compat 保証。
   const layoutedLanes = lanes.filter((l) => !(l.posX !== undefined && l.posY !== undefined));
   if (layoutedLanes.length < 2) return lanes;
+  // 段階列は汎用 lane の均一 pitch にせず、curve の札がある境目だけを広げる。
+  // 札が無い境目は列面どうしの 48 world を保つため、stage を持たない図には影響しない。
+  if (
+    layoutedLanes.length === lanes.length &&
+    layoutedLanes.every((lane) => lane.stage !== undefined)
+  ) {
+    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<number>(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 === undefined || toIndex === undefined || 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 shiftedXById = new Map<string, number>([[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 = shiftedXById.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);
+      shiftedXById.set(lane.id, previousX + previous.width + laneGap);
+    }
+    return lanes.map((lane) => ({ ...lane, x: shiftedXById.get(lane.id) ?? lane.x }));
+  }
   // lane を x 昇順に並べる (author が非順序 index / x 手動指定した場合の safe fallback)。
   // shifted x を lane.id で lookup、 最後に元 lane 配列の順序で返却する。
   const nodeById = new Map(nodes.map((n) => [n.id, n]));
@@ -345,7 +408,7 @@ export function recomputeContainedLanes(lanes: LaidLane[], nodes: LaidNode[]): L
     }
   }
 
-  return lanes.map((lane) => {
+  const contained = lanes.map((lane) => {
     if (lane.lifeline) {
       return {
         ...lane,
@@ -363,4 +426,5 @@ export function recomputeContainedLanes(lanes: LaidLane[], nodes: LaidNode[]): L
       height: bottom - top + CONTAIN_PAD * 2 + LANE_LABEL_H,
     };
   });
+  return equalizeStageColumns(contained, nodes);
 }

package/src/layout/legend.ts

@@ -0,0 +1,68 @@
+import { textWidth } from "../kinds/text-width";
+import type { CdlLegendItem, CdlTextMetrics, LaidLegendItem, LaidNode } from "../types";
+import { isRenderedNode } from "./spec";
+import { VIEW_PAD } from "./tokens";
+
+/** 小型の箱の題 (20) に対する見本の比率。 */
+export const LEGEND_FONT_SIZE = 17;
+/** 見本の印 (font-size 21) を凡例の字に合わせる倍率。 */
+export const LEGEND_MARK_SCALE = LEGEND_FONT_SIZE / 21;
+/** 印を描く座標系で、見本 SVG が使う横幅。 */
+export const LEGEND_MARK_REFERENCE_WIDTH = 46;
+/** 見本 SVG の印が使う横幅を、凡例の字に合わせた値。 */
+export const LEGEND_MARK_WIDTH = LEGEND_MARK_REFERENCE_WIDTH * LEGEND_MARK_SCALE;
+/** 印の右端から文字までの間隔。 */
+export const LEGEND_MARK_TEXT_GAP = 12 * LEGEND_MARK_SCALE;
+/** 隣り合う項目の間隔を、図の箱群の幅に対する比で決める。 */
+export const LEGEND_ITEM_GAP_RATIO = 0.07;
+
+const LEGEND_BASELINE_GAP = 32;
+const LEGEND_BOTTOM_EXTENT = 10;
+
+type ViewBox = { x: number; y: number; w: number; h: number };
+
+/**
+ * 凡例を元の図の下へ置き、横一列が切れない viewBox を返す。
+ *
+ * 元の viewBox の末尾には `VIEW_PAD` があるため、その内側を図の下端として使う。
+ * 指定が無い時は呼び出されず、既存の座標と viewBox をそのまま保つ。
+ */
+export function layoutLegend(
+  items: readonly CdlLegendItem[],
+  viewBox: ViewBox,
+  textMetrics: CdlTextMetrics,
+  nodes: readonly LaidNode[],
+): { legend: LaidLegendItem[]; viewBox: ViewBox } {
+  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),
+    },
+  };
+}

package/src/layout/metro-path.ts

@@ -1,8 +1,8 @@
 import type { CdlEdge, CdlTextMetrics, LaidNode, Side } from "../types";
 import { SAME_HEIGHT_THRESHOLD } from "./curve-path";
-import { computeLabelBoxW, EDGE_STUB_OUT, labelPathClearanceHorizontal, labelPillH } from "./spec";
+import { EDGE_STUB_OUT } from "./spec";
 
-type 箱 = Pick<LaidNode, "cx" | "cy" | "w" | "h">;
+type 箱 = Pick<LaidNode, "cx" | "cy" | "w" | "h"> & Partial<Pick<LaidNode, "kind">>;
 type 点 = { x: number; y: number };
 
 type 路線図の線の結果 = {
@@ -12,9 +12,19 @@ type 路線図の線の結果 = {
   labelX: number;
   labelY: number;
   labelAnchor: "middle";
+  metroReturn?: true;
 };
 
 export const METRO_CORNER_RADIUS = 24;
+export const METRO_BRANCH_CORNER_RADIUS = 22;
+export const METRO_BRANCH_STUB = 30;
+export const METRO_DECISION_HEIGHT = 88;
+export const METRO_DECISION_WIDTH = 116;
+export const METRO_RETURN_END_OFFSET = 43;
+export const METRO_RETURN_START_OFFSET = 24;
+/** 見本の線路幅。数値の fallback は CSS を読まない SVG 書き出しでも残る。 */
+export const METRO_LINE_WIDTH = 10;
+export const METRO_LINE_WIDTH_CSS = `var(--cdl-metro-line-width, ${METRO_LINE_WIDTH}px)`;
 
 const T = Math.SQRT2 - 1;
 
@@ -38,18 +48,80 @@ function polyline(points: readonly 点[]): string {
   return distinct.map((p, i) => `${i === 0 ? "M" : "L"} ${point(p)}`).join(" ");
 }
 
+/** 路線図の見本と同じ二次曲線で、横線から縦線へ 1 回だけ曲がる。 */
+function quadraticCornerPath(start: 点, corner: 点, end: 点, radius: number): string {
+  const horizontalDir = Math.sign(corner.x - start.x) as 1 | -1;
+  const verticalDir = Math.sign(end.y - corner.y) as 1 | -1;
+  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: 点): { d: string; turnX: number } {
+  const horizontalDir = Math.sign(end.x - start.x) as 1 | -1;
+  const verticalDir = Math.sign(end.y - start.y) as 1 | -1;
+  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,
+  };
+}
+
 /**
- * 2 つの箱を、水平線と傾き ±1 の斜線だけで結ぶ。
+ * 2 つの箱を路線図の線で結ぶ。
  *
  * 向かい合う辺の間に高さの差以上の横幅があれば斜線を中央へ置く。幅が足りない時は、
  * 斜線の傾きを崩さず両方の右辺を結ぶため、右へ張り出すくの字にする。途中の箱は避けない。
+ * `decision` から横位置の違う駅へは左右の角から出し、同じ横位置なら行き先側の角から真っ直ぐ出す。
+ * 左へ戻る刻み線は駅の丸の外から出し、行き先の矢印より 4 下で止める。
  */
 export function metroPath(
   from: 箱,
   to: 箱,
   edge?: Pick<CdlEdge, "label" | "sub" | "style" | "overlay">,
-  labelMarginExtra = 0,
-  textMetrics: CdlTextMetrics = "proportional",
+  _labelMarginExtra = 0,
+  _textMetrics: CdlTextMetrics = "proportional",
 ): 路線図の線の結果 {
   const fromLeft = from.cx - from.w / 2;
   const fromRight = from.cx + from.w / 2;
@@ -88,12 +160,52 @@ export function metroPath(
   const sgn = Math.sign(dy);
   let d: string;
   let mid: 点;
-  let tangent: 点;
+  let metroReturn = false;
 
-  if (Math.abs(dy) < SAME_HEIGHT_THRESHOLD) {
+  if (from.kind === "decision" && Math.abs(dy) >= SAME_HEIGHT_THRESHOLD) {
+    const verticalDir = Math.sign(dy) as 1 | -1;
+    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) as 1 | -1;
+      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) as 1 | -1;
+    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;
@@ -123,7 +235,6 @@ export function metroPath(
       d = polyline([p0, p1, p2, p3]);
     }
     mid = { x: (x1 + x2) / 2, y: (y1 + y2) / 2 };
-    tangent = w;
   } else {
     fromSide = "right";
     toSide = "right";
@@ -153,33 +264,15 @@ export function metroPath(
       `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,
+    labelX: mid.x,
+    labelY: mid.y,
     labelAnchor: "middle",
+    ...(metroReturn ? { metroReturn: true as const } : {}),
   };
 }