@cardenelabs/cdl 0.123.0 → 0.125.0

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 } : {}),
   };
 }

package/src/layout/nodes.ts

@@ -1,6 +1,7 @@
 import { requiredRowsWidth } from "../kinds/row-align";
 import type { CdlDiagram, CdlTextMetrics, LaidLane, LaidNode } from "../types";
 import { 端の字に要る線の長さ } from "./head-label";
+import { METRO_DECISION_HEIGHT, METRO_DECISION_WIDTH } from "./metro-path";
 import {
   hasRenderedLabel,
   labelPillH,
@@ -181,6 +182,16 @@ export function layoutNodes(
   textMetrics: CdlTextMetrics,
 ): LaidNode[] {
   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: CdlDiagram["nodes"][number]) =>
+    metroDecisionIds.has(node.id)
+      ? { w: METRO_DECISION_WIDTH, h: METRO_DECISION_HEIGHT }
+      : NODE_SIZE[node.kind];
 
   // 全 lane を跨いで stack 番号で row を共有する。
   // 同 stack 番号の node は全 lane で同じ y 中心になり、 lane 間 edge が水平で揃う。
@@ -189,7 +200,7 @@ export function layoutNodes(
   const rowH = new Map<number, number>();
   for (const stack of allStacks) {
     const nodesAtStack = diag.nodes.filter((n) => n.stack === stack);
-    const h = Math.max(...nodesAtStack.map((n) => 箱の高さ(n, NODE_SIZE[n.kind].h)));
+    const h = Math.max(...nodesAtStack.map((n) => 箱の高さ(n, nodeSize(n).h)));
     rowH.set(stack, h);
   }
   const rowCy = new Map<number, number>();
@@ -238,7 +249,7 @@ export function layoutNodes(
     if (!lane) {
       throw new Error(`cdl layout: node "${n.id}" の lane "${n.lane}" が定義されていない`);
     }
-    const size = NODE_SIZE[n.kind];
+    const size = nodeSize(n);
     if (n.posX !== undefined && n.posY !== undefined) {
       const w = n.posW ?? n.w ?? autoRowsWidth(n, size.w, textMetrics);
       const h = n.posH ?? n.h ?? rowH.get(n.stack) ?? size.h;

package/src/layout/spec.ts

@@ -200,7 +200,7 @@ export function drawsTitleOutsideBox(kind: string | undefined): boolean {
  */
 const TITLE_FONT_SIZE_DEFAULT = 18;
 const TITLE_FONT_SIZE: ReadonlyMap<string, number> = new Map<string, number>([
-  ...(["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "station"] as const).map(
+  ...(["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon"] as const).map(
     (k) => [k, 13] as const,
   ),
   ...(
@@ -251,8 +251,10 @@ const TITLE_FONT_SIZE: ReadonlyMap<string, number> = new Map<string, number>([
     ] as const
   ).map((k) => [k, 20] as const),
   ...(["card", "event", "function"] as const).map((k) => [k, 24] as const),
+  ["station", 25],
   ["actor", 32],
   ["storage", 34],
+  ["timeline-number", 18],
 ]);
 
 /**
@@ -286,6 +288,17 @@ export function skipsNodeTitleWidthCheck(kind: string | undefined): boolean {
  */
 export const TITLE_BOX_PADDING = 52;
 
+/** 時間軸の番号と軸に共通する縁の太さ。active でも変えない。 */
+export const TIMELINE_NUMBER_STROKE = 4;
+
+/** 題を描ける幅。丸い番号は縁の内側、それ以外は既存の箱内外の余白を使う。 */
+export function titleUsableWidth(kind: string | undefined, w: number, h: number): number {
+  if (kind === "timeline-number") {
+    return Math.min(w, h) - 2 * TIMELINE_NUMBER_STROKE;
+  }
+  return w - (drawsTitleOutsideBox(kind) ? 0 : TITLE_BOX_PADDING);
+}
+
 /**
  * 低い箱の時だけ題を箱に収まるまで小さくする種別。
  *
@@ -303,6 +316,7 @@ const KINDS_SCALING_TITLE_WHEN_LOW: ReadonlySet<string> = new Set(["actor", "eve
  */
 const KINDS_SCALING_TITLE_ALWAYS: ReadonlySet<string> = new Set([
   "card",
+  "timeline-number",
   "shape-file",
   "shape-folder",
   "shape-cloud",
@@ -470,6 +484,7 @@ const KINDS_DRAWING_ONLY_SHAPE: readonly string[] = [
 const KINDS_WITHOUT_EYEBROW_TEXT: ReadonlySet<string> = new Set([
   ...KINDS_DRAWING_ONLY_SHAPE,
   ...KINDS_WITHOUT_TITLE_TEXT,
+  "timeline-number",
 ]);
 
 /**
@@ -499,6 +514,7 @@ export function rendersEyebrow(kind: string | undefined): boolean {
 const KINDS_WITHOUT_SUBTITLE_TEXT: ReadonlySet<string> = new Set([
   ...KINDS_DRAWING_OWN_PAYLOAD,
   ...KINDS_WITHOUT_TITLE_TEXT,
+  "timeline-number",
 ]);
 
 /** その node が `subtitle` を文字として描くか (SSOT)。 破綻の扱いは `rendersEyebrow` と同じ */

package/src/layout/tokens.ts

@@ -14,6 +14,8 @@ export const 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: {
@@ -141,7 +143,10 @@ export const 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 },
@@ -176,6 +181,8 @@ export const LANE_TOP_PAD = TOKENS.lane_top_pad;
 export const STACK_GAP = TOKENS.row_gap;
 export const NODE_SIZE = TOKENS.node;
 export const CONTAIN_PAD = TOKENS.contain_pad;
+export const STAGE_COLUMN_GAP = TOKENS.stage_column_gap;
+export const STAGE_CARD_TEXT_INSET = TOKENS.stage_card_text_inset;
 export const VIEW_PAD = TOKENS.view_pad;
 export const HEADER_RESERVE = TOKENS.header_reserve;
 export const LANE_AUTO_GAP = 80;

package/src/layout.ts

@@ -25,6 +25,7 @@ import {
   slideLabelsAlongOwnPath,
 } from "./layout/edges";
 import { applyFooterShapeDrops } from "./layout/footer-shape";
+import { layoutLegend } from "./layout/legend";
 import {
   expandLaneGapsForEdgeLabels,
   expandLanesForNodes,
@@ -181,7 +182,7 @@ function dropUnsafeLaneDx(
  */
 export function applyRowLevelNodeShifts<
   N extends { id: string; stack: number; lane: string; cx: number; cy: number },
-  L extends { id: string; x: number },
+  L extends { id: string; x: number; stage?: unknown },
 >(
   nodes: readonly N[],
   lanes: readonly L[],
@@ -189,6 +190,11 @@ export function applyRowLevelNodeShifts<
 ): { nodes: N[]; lanes: L[] } | null {
   const dyByStack = aggregateRowDy(nodes, nodeShifts);
   const dxByLane = dropUnsafeLaneDx(aggregateLaneDx(nodes, nodeShifts), nodes);
+  // 段階列は隣り合う列面の間を線の回廊として使うため、札回避の横 shift で列だけを動かさない。
+  // 縦 shift は stack の整列に必要なので、従来どおり適用する。
+  for (const lane of lanes) {
+    if (lane.stage !== undefined) dxByLane.delete(lane.id);
+  }
   let moved = false;
   const outNodes = nodes.map((n) => {
     const dx = dxByLane.get(n.lane) ?? 0;
@@ -434,7 +440,18 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     }
   }
 
-  const viewBox = computeViewBox(containedLanesFinal, nodesFinal, edges, bboxes, diag.viewport);
+  const contentViewBox = computeViewBox(
+    containedLanesFinal,
+    nodesFinal,
+    edges,
+    bboxes,
+    diag.viewport,
+  );
+  // 凡例なしの経路では関数を呼ばず、既存の viewBox と配置結果の形を保つ。
+  const legendLayout = diag.legend?.length
+    ? layoutLegend(diag.legend, contentViewBox, textMetrics, nodesFinal)
+    : undefined;
+  const viewBox = legendLayout?.viewBox ?? contentViewBox;
 
   return {
     id: diag.id,
@@ -462,6 +479,7 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     ...(textMetrics === "monospace" ? { textMetrics: "monospace" as const } : {}),
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...(diag.type ? { type: diag.type } : {}),
+    ...(legendLayout ? { legend: legendLayout.legend } : {}),
     bboxes,
     collisions,
     nearCollisions,

package/src/render/edge-head.ts

@@ -7,6 +7,12 @@ import {
 import { hasTone } from "./tone";
 
 export const EDGE_HEAD_MUTED_MARKER_ID = "cdl-arrow-muted";
+export const METRO_RETURN_ARROW_D = "M 21 0 L 4 9.5 L 4 -9.5 Z";
+
+/** 戻る metro 線専用の矢印。通常の edge marker と寸法・線端からの距離が違う。 */
+export function metroReturnArrowMarkerId(tone: string): string {
+  return `cdl-metro-return-arrow-${tone}`;
+}
 
 /**
  * 関係の端の形の **描き方と marker の名前** (SSOT、 #560)。

package/src/render/edges.tsx

@@ -2,6 +2,7 @@ import { 等幅の字 } from "./mono-text";
 import type { JSX } from "react";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
 import { 端の字の大きさ, 端の字を置く, type 線の端 } from "../layout/head-label";
+import { METRO_LINE_WIDTH, METRO_LINE_WIDTH_CSS } from "../layout/metro-path";
 import {
   EDGE_HEAD_MARKER_SIZE,
   type CdlTextMetrics,
@@ -9,9 +10,12 @@ import {
   type LaidEdge,
   type Tone,
 } from "../types";
-import { edgeHeadMarkerName } from "./edge-head";
+import { edgeHeadMarkerName, metroReturnArrowMarkerId } from "./edge-head";
 import { toneColor } from "./tone";
 
+/** 段がまだ通っていない metro 区間を、意匠側が選ぶための属性名。 */
+export const METRO_PENDING_ATTRIBUTE = "data-cdl-pending";
+
 /**
  * 辺の色 (#618)。 役目を書いた辺だけ「いま」 の色で引く。
  *
@@ -62,6 +66,7 @@ export function CdlEdgeView({
   progress,
   stateValues,
   flowing = false,
+  pending = false,
 }: {
   edge: LaidEdge;
   active: boolean;
@@ -81,6 +86,8 @@ export function CdlEdgeView({
    * 2 つの動きが同時に走って線がどちらに進んでいるか読めなくなる。
    */
   flowing?: boolean;
+  /** metro 線の初出より前の段だけに付く。非 metro 線では常に偽。 */
+  pending?: boolean;
 }): JSX.Element {
   const color = edgeColor(edge);
   // 光っていない edge も tone の色で描く。 以前は一律の灰色に落としていたため、 何も光っていない
@@ -96,7 +103,11 @@ export function CdlEdgeView({
   // その色なら 0.9 で 4.51-4.92 と 4.5:1 を満たす (0.8 では 3.69-4.04 で届かない)。
   // 実線と点線で同じ組を使い、 光らせた側が薄くなる逆転を作らない。
   // 端の形は線の種類と別の軸 (#560)。 書かなければ既定の塗った三角で、名前も従来のまま
-  const marker = edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
+  const style = edge.style ?? "solid";
+  const isMetroReturn = edge.metroReturn === true;
+  const marker = isMetroReturn
+    ? metroReturnArrowMarkerId(edge.tone)
+    : edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
   // 出どころ側の印 (#578)。 marker は経路の向きに従って回るので、始点に置いた印は
   // 自動で外向きになる (`orient="auto-start-reverse"`)。 書かない図では端が無い
   const tailMarker =
@@ -104,7 +115,6 @@ export function CdlEdgeView({
       ? undefined
       : edgeHeadMarkerName(edge.tone, edge.tailHead, !active, edge.tailHeadFill);
 
-  const style = edge.style ?? "solid";
   const isDotted = style === "dotted-flow";
   const isPassThrough = isDotted && Boolean(edge.dThrough);
 
@@ -124,6 +134,7 @@ export function CdlEdgeView({
 
   return (
     <g
+      {...(pending ? { [METRO_PENDING_ATTRIBUTE]: "true" } : {})}
       data-cdl-edge={edge.id}
       data-cdl-routing={edge.routing === "metro" ? "metro" : undefined}
       data-cdl-from={edge.from}
@@ -148,11 +159,12 @@ export 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",
+              strokeWidth: edge.routing === "metro" ? METRO_LINE_WIDTH_CSS : undefined,
             }}
           />
           {active && !isPassThrough && <EdgeGlowCircles color={color} edgeId={edge.id} />}
@@ -237,12 +249,20 @@ function SolidEdgePath({
   const boundDashOffset = edge.dashOffsetBind && stateValues
     ? resolveNumericAttr(edge.dashOffsetBind, stateValues, 0)
     : undefined;
+  const strokeWidth = edge.routing === "metro" && edge.widthBind === undefined
+    ? edge.metroReturn ? 6 : METRO_LINE_WIDTH
+    : boundWidth;
+  const strokeWidthCss = edge.routing === "metro" && !edge.metroReturn
+    ? edge.widthBind === undefined
+      ? METRO_LINE_WIDTH_CSS
+      : `var(--cdl-metro-line-width, ${strokeWidth}px)`
+    : undefined;
   // dashoffset は dasharray 前提、 signal 経由の流れる線を出したい時は "6 6" 等
   // 刻みは 2 つの役目を持つ。 光っていないことの合図 (`"solid"` の光っていない側) と、
   // 線の種類そのもの (`"dashed"`)。 **後者は光っても刻みのまま**にする = 意味を持つ刻みが
   // 光った瞬間に消えると、その関係だけ種類が変わって見える (#578)
   const dashArray = dashed
-    ? "10 8"
+    ? edge.metroReturn ? "0 9.6" : "10 8"
     : active
       ? boundDashOffset !== undefined ? "8 6" : undefined
       : "4 5";
@@ -253,7 +273,7 @@ function SolidEdgePath({
       fill="none"
       stroke={boundStroke}
       strokeOpacity={active ? 0.95 : 0.9}
-      strokeWidth={boundWidth}
+      strokeWidth={strokeWidth}
       strokeDasharray={dashArray}
       strokeDashoffset={boundDashOffset}
       strokeLinecap="round"
@@ -261,6 +281,7 @@ function SolidEdgePath({
       markerStart={tailMarker === undefined ? undefined : `url(#${tailMarker})`}
       style={{
         transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease",
+        strokeWidth: strokeWidthCss,
       }}
     />
   );

package/src/render/legend.tsx

@@ -0,0 +1,120 @@
+import type { JSX } from "react";
+
+import {
+  LEGEND_FONT_SIZE,
+  LEGEND_MARK_REFERENCE_WIDTH,
+  LEGEND_MARK_SCALE,
+  LEGEND_MARK_TEXT_GAP,
+  LEGEND_MARK_WIDTH,
+} from "../layout/legend";
+import type { LaidLegendItem, LegendMark } from "../types";
+
+const ink = "var(--cdl-text-accent, #143a52)";
+const paper = "var(--cdl-stage-bg, #f8fafc)";
+
+const LEGEND_MARK_RENDERERS = {
+  diamond: () => (
+    <path d="M 23 -26 L 46 -8 L 23 10 L 0 -8 Z" fill="none" stroke={ink} strokeWidth={2} />
+  ),
+  "filled-circle": () => <circle cx={23} cy={-8} r={11} fill={ink} />,
+  "double-circle": () => (
+    <>
+      <circle cx={23} cy={-8} r={12} fill="none" stroke={ink} strokeWidth={2.5} />
+      <circle cx={23} cy={-8} r={6} fill={ink} />
+    </>
+  ),
+  "dotted-line": () => (
+    <path
+      d={`M 0 -8 H ${LEGEND_MARK_REFERENCE_WIDTH}`}
+      fill="none"
+      stroke={ink}
+      strokeWidth={6}
+      strokeLinecap="round"
+      strokeDasharray="0 9.6"
+    />
+  ),
+  "solid-line": () => (
+    <path
+      d={`M 0 -8 H ${LEGEND_MARK_REFERENCE_WIDTH}`}
+      fill="none"
+      stroke={ink}
+      strokeWidth={4}
+      strokeLinecap="round"
+    />
+  ),
+  "curved-line": () => (
+    <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": () => (
+    <rect
+      x={0}
+      y={-23}
+      width={LEGEND_MARK_REFERENCE_WIDTH}
+      height={30}
+      rx={9}
+      fill={paper}
+      stroke={ink}
+      strokeWidth={2}
+    />
+  ),
+  "numbered-circle": () => (
+    <>
+      <circle cx={23} cy={-8} r={13} fill={paper} stroke={ink} strokeWidth={2.5} />
+      <text x={23} y={-2} textAnchor="middle" fontSize={17} fontWeight={700} fill={ink}>
+        1
+      </text>
+    </>
+  ),
+  station: () => <circle cx={23} cy={-8} r={11} fill={paper} stroke={ink} strokeWidth={4} />,
+  arrow: () => (
+    <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"
+    />
+  ),
+} satisfies Record<LegendMark, () => JSX.Element>;
+
+export function CdlLegend({ items }: { items: readonly LaidLegendItem[] }): JSX.Element {
+  return (
+    <g data-cdl-role="legend">
+      {items.map((item, index) => {
+        const Mark = LEGEND_MARK_RENDERERS[item.mark];
+        return (
+          <g
+            key={`${item.mark}-${index}`}
+            data-cdl-role="legend-item"
+            data-cdl-y={item.y}
+            transform={`translate(${item.x} ${item.y})`}
+          >
+            <g
+              data-cdl-role="legend-mark"
+              data-cdl-legend-mark={item.mark}
+              transform={`scale(${LEGEND_MARK_SCALE})`}
+            >
+              <Mark />
+            </g>
+            <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)"
+            >
+              {item.text}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}