@cardenelabs/cdl 0.120.0 → 0.122.0

package/dist/{render-A5AKjNuy.d.cts → render-U_pC-Ksh.d.cts}

@@ -118,7 +118,7 @@ declare function resolveLang(value: unknown): CdlLang;
 declare const TONES: readonly ["accent", "teal", "success", "error", "warning", "info"];
 type Tone = (typeof TONES)[number];
 /** 描画できる箱の種類。 検査・記法一覧・型はこの 1 つの列を出所にする。 */
-declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "chart-gauge", "chart-radial", "chart-stat", "chart-waffle", "chart-stacked-bar", "chart-slope", "gantt-timeline", "mind-map", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service", "mark-start", "mark-end", "sequence-board"];
+declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "chart-gauge", "chart-radial", "chart-stat", "chart-waffle", "chart-stacked-bar", "chart-slope", "gantt-timeline", "mind-map", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service", "mark-start", "mark-end", "station", "sequence-board"];
 type NodeKind = (typeof NODE_KINDS)[number];
 type Side = "top" | "right" | "bottom" | "left";
 /**
@@ -133,6 +133,17 @@ type Side = "top" | "right" | "bottom" | "left";
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+/**
+ * 線の道筋。
+ *
+ * - `"default"` ... 自動。 箱を避け、角を丸めた直角の線を引く。 書かない時も同じ
+ * - `"back-detour"` ... 箱の上を回って前の箱へ戻る
+ * - `"curve"` ... 始点から水平に出て終点へ水平に入る 3 次曲線。 途中の箱は避けず、
+ *   2 点が同じ高さなら直線になる。 終点の矢印は水平を向く
+ * - `"metro"` ... 横線と傾き ±1 の斜線だけで結び、角を半径 r の円弧で丸める。
+ *   途中の箱は避けず、2 点が同じ高さなら横 1 本になる
+ */
+type EdgeRouting = "default" | "back-detour" | "curve" | "metro";
 /** 辺の役目 (#618)。 `main` = 図の主となる道 */
 type EdgeRole = "main";
 /**
@@ -393,8 +404,8 @@ type CdlNode = {
      * 変わるのは kind の既定色を使って描かれる部分で、 枠線 / eyebrow の文字色 / icon /
      * 強調表示中の行の値。 本文の文字色と背景は変わらない。
      *
-     * 効くのは `actor` / `function` / `storage` / `event` / `card` と `person` 以降の汎用 kind の
-     * 計 26 種。 それ以外は自前の配色を持つため指定しても変わらず、 検査も通す。 効く kind の
+     * 効くのは `actor` / `function` / `storage` / `event` / `card`、`person` 以降の汎用 kind、
+     * 流れの印、路線図の駅。 それ以外は自前の配色を持つため指定しても変わらず、検査も通す。
      * 一覧は `test/node-styling.test.tsx` が実装から計算した集合と突き合わせている。
      *
      * 既定色と同じ名前を明示指定しても色が変わる kind がある (既定色の hex が `render/tone.ts`
@@ -746,8 +757,12 @@ type CdlEdge = {
     labelOffsetX?: number;
     /** label の y 方向 fine offset (default 0、 + で下、 - で上) */
     labelOffsetY?: number;
-    /** routing mode (default "default" = 自動 routing、 "back-detour" = back transition 用の上方 detour 強制) */
-    routing?: "default" | "back-detour";
+    /**
+     * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回る戻り線、
+     * `curve` は途中の箱を避けず、両端で水平になる 3 次曲線。 `metro` は途中の箱を避けず、
+     * 横線と傾き ±1 の斜線を半径 r の円弧で結ぶ。2 点が同じ高さなら横 1 本。書かなければ `default`。
+     */
+    routing?: EdgeRouting;
     /**
      * CAR-549 SSOT ... label を edge path 上に「被せる」 か「離す」 かの制御 flag。
      * default (false or undefined) = LABEL_INIT_CLEARANCE (34 world、 CAR-630 で 26 → 34 復帰) 離して配置。
@@ -3035,4 +3050,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computeEventBindingKey as $, EDGE_HEADS as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_DEFAULT as D, type EdgeStyle as E, EDGE_HEAD_FILLS as F, EDGE_HEAD_FILL_DEFAULT as G, EDGE_REVEALS as H, EDGE_REVEAL_DEFAULT as I, type JourneyEmotion as J, EDGE_STYLES as K, type LaidDiagram as L, type EdgeReveal as M, type NodeKind as N, type InteractiveHandlerMap as O, type InteractiveSignalsAccessor as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, type LaidLane as U, NODE_KINDS as V, RELATION_FOCUSES as W, RELATION_FOCUS_DEFAULT as X, type RelationFocus as Y, type ScrollProgressHandle as Z, TONES as _, type CdlInput as a, computeFormulaKey as a0, computeInputSignalKey as a1, computeScrollTriggerKey as a2, computed as a3, createInteractiveSignalsAccessor as a4, createScrollProgressHandle as a5, createScrollProgressSignals as a6, hasInteractivePrimitives as a7, resolveLang as a8, sequenceBoardMetrics as a9, sequenceStepId as aa, signal as ab, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlInputOption as i, type CdlEventTarget as j, type CdlLang as k, type Computed as l, type CdlDerivedValue as m, type CdlScrollTrigger as n, type CdlDiagramViewProps as o, type LaidEdge as p, type LaidNode as q, type CdlEdge as r, type TreeNodePayload as s, CdlDiagramView as t, type CdlEventBinding as u, type CdlEventKind as v, type CdlFormula as w, type CdlPhase as x, type ChartPieForm as y, type ChartSlopeForm as z };
+export { TONES as $, type ChartSlopeForm as A, type BBox as B, type CdlDiagram as C, EDGE_HEADS as D, type EdgeStyle as E, EDGE_HEAD_DEFAULT as F, EDGE_HEAD_FILLS as G, EDGE_HEAD_FILL_DEFAULT as H, EDGE_REVEALS as I, type JourneyEmotion as J, EDGE_REVEAL_DEFAULT as K, type LaidDiagram as L, EDGE_STYLES as M, type NodeKind as N, type EdgeReveal as O, type InteractiveHandlerMap as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, type InteractiveSignalsAccessor as U, type LaidLane as V, NODE_KINDS as W, RELATION_FOCUSES as X, RELATION_FOCUS_DEFAULT as Y, type RelationFocus as Z, type ScrollProgressHandle as _, type CdlInput as a, computeEventBindingKey as a0, computeFormulaKey as a1, computeInputSignalKey as a2, computeScrollTriggerKey as a3, computed as a4, createInteractiveSignalsAccessor as a5, createScrollProgressHandle as a6, createScrollProgressSignals as a7, hasInteractivePrimitives as a8, resolveLang as a9, sequenceBoardMetrics as aa, sequenceStepId as ab, signal as ac, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type EdgeRouting as h, type CdlState as i, type CdlInputOption as j, type CdlEventTarget as k, type CdlLang as l, type Computed as m, type CdlDerivedValue as n, type CdlScrollTrigger as o, type CdlDiagramViewProps as p, type LaidEdge as q, type LaidNode as r, type CdlEdge as s, type TreeNodePayload as t, CdlDiagramView as u, type CdlEventBinding as v, type CdlEventKind as w, type CdlFormula as x, type CdlPhase as y, type ChartPieForm as z };

package/dist/{render-A5AKjNuy.d.ts → render-U_pC-Ksh.d.ts}

@@ -118,7 +118,7 @@ declare function resolveLang(value: unknown): CdlLang;
 declare const TONES: readonly ["accent", "teal", "success", "error", "warning", "info"];
 type Tone = (typeof TONES)[number];
 /** 描画できる箱の種類。 検査・記法一覧・型はこの 1 つの列を出所にする。 */
-declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "chart-gauge", "chart-radial", "chart-stat", "chart-waffle", "chart-stacked-bar", "chart-slope", "gantt-timeline", "mind-map", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service", "mark-start", "mark-end", "sequence-board"];
+declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "chart-gauge", "chart-radial", "chart-stat", "chart-waffle", "chart-stacked-bar", "chart-slope", "gantt-timeline", "mind-map", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service", "mark-start", "mark-end", "station", "sequence-board"];
 type NodeKind = (typeof NODE_KINDS)[number];
 type Side = "top" | "right" | "bottom" | "left";
 /**
@@ -133,6 +133,17 @@ type Side = "top" | "right" | "bottom" | "left";
  * ER の「識別しない」 のように **刻みが意味を持つ関係** はこちらを使う。
  */
 type EdgeStyle = "solid" | "dotted-flow" | "dashed";
+/**
+ * 線の道筋。
+ *
+ * - `"default"` ... 自動。 箱を避け、角を丸めた直角の線を引く。 書かない時も同じ
+ * - `"back-detour"` ... 箱の上を回って前の箱へ戻る
+ * - `"curve"` ... 始点から水平に出て終点へ水平に入る 3 次曲線。 途中の箱は避けず、
+ *   2 点が同じ高さなら直線になる。 終点の矢印は水平を向く
+ * - `"metro"` ... 横線と傾き ±1 の斜線だけで結び、角を半径 r の円弧で丸める。
+ *   途中の箱は避けず、2 点が同じ高さなら横 1 本になる
+ */
+type EdgeRouting = "default" | "back-detour" | "curve" | "metro";
 /** 辺の役目 (#618)。 `main` = 図の主となる道 */
 type EdgeRole = "main";
 /**
@@ -393,8 +404,8 @@ type CdlNode = {
      * 変わるのは kind の既定色を使って描かれる部分で、 枠線 / eyebrow の文字色 / icon /
      * 強調表示中の行の値。 本文の文字色と背景は変わらない。
      *
-     * 効くのは `actor` / `function` / `storage` / `event` / `card` と `person` 以降の汎用 kind の
-     * 計 26 種。 それ以外は自前の配色を持つため指定しても変わらず、 検査も通す。 効く kind の
+     * 効くのは `actor` / `function` / `storage` / `event` / `card`、`person` 以降の汎用 kind、
+     * 流れの印、路線図の駅。 それ以外は自前の配色を持つため指定しても変わらず、検査も通す。
      * 一覧は `test/node-styling.test.tsx` が実装から計算した集合と突き合わせている。
      *
      * 既定色と同じ名前を明示指定しても色が変わる kind がある (既定色の hex が `render/tone.ts`
@@ -746,8 +757,12 @@ type CdlEdge = {
     labelOffsetX?: number;
     /** label の y 方向 fine offset (default 0、 + で下、 - で上) */
     labelOffsetY?: number;
-    /** routing mode (default "default" = 自動 routing、 "back-detour" = back transition 用の上方 detour 強制) */
-    routing?: "default" | "back-detour";
+    /**
+     * 線の道筋。 `default` は箱を避ける自動経路、 `back-detour` は箱の上を回る戻り線、
+     * `curve` は途中の箱を避けず、両端で水平になる 3 次曲線。 `metro` は途中の箱を避けず、
+     * 横線と傾き ±1 の斜線を半径 r の円弧で結ぶ。2 点が同じ高さなら横 1 本。書かなければ `default`。
+     */
+    routing?: EdgeRouting;
     /**
      * CAR-549 SSOT ... label を edge path 上に「被せる」 か「離す」 かの制御 flag。
      * default (false or undefined) = LABEL_INIT_CLEARANCE (34 world、 CAR-630 で 26 → 34 復帰) 離して配置。
@@ -3035,4 +3050,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computeEventBindingKey as $, EDGE_HEADS as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_DEFAULT as D, type EdgeStyle as E, EDGE_HEAD_FILLS as F, EDGE_HEAD_FILL_DEFAULT as G, EDGE_REVEALS as H, EDGE_REVEAL_DEFAULT as I, type JourneyEmotion as J, EDGE_STYLES as K, type LaidDiagram as L, type EdgeReveal as M, type NodeKind as N, type InteractiveHandlerMap as O, type InteractiveSignalsAccessor as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, type LaidLane as U, NODE_KINDS as V, RELATION_FOCUSES as W, RELATION_FOCUS_DEFAULT as X, type RelationFocus as Y, type ScrollProgressHandle as Z, TONES as _, type CdlInput as a, computeFormulaKey as a0, computeInputSignalKey as a1, computeScrollTriggerKey as a2, computed as a3, createInteractiveSignalsAccessor as a4, createScrollProgressHandle as a5, createScrollProgressSignals as a6, hasInteractivePrimitives as a7, resolveLang as a8, sequenceBoardMetrics as a9, sequenceStepId as aa, signal as ab, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlInputOption as i, type CdlEventTarget as j, type CdlLang as k, type Computed as l, type CdlDerivedValue as m, type CdlScrollTrigger as n, type CdlDiagramViewProps as o, type LaidEdge as p, type LaidNode as q, type CdlEdge as r, type TreeNodePayload as s, CdlDiagramView as t, type CdlEventBinding as u, type CdlEventKind as v, type CdlFormula as w, type CdlPhase as x, type ChartPieForm as y, type ChartSlopeForm as z };
+export { TONES as $, type ChartSlopeForm as A, type BBox as B, type CdlDiagram as C, EDGE_HEADS as D, type EdgeStyle as E, EDGE_HEAD_DEFAULT as F, EDGE_HEAD_FILLS as G, EDGE_HEAD_FILL_DEFAULT as H, EDGE_REVEALS as I, type JourneyEmotion as J, EDGE_REVEAL_DEFAULT as K, type LaidDiagram as L, EDGE_STYLES as M, type NodeKind as N, type EdgeReveal as O, type InteractiveHandlerMap as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, type InteractiveSignalsAccessor as U, type LaidLane as V, NODE_KINDS as W, RELATION_FOCUSES as X, RELATION_FOCUS_DEFAULT as Y, type RelationFocus as Z, type ScrollProgressHandle as _, type CdlInput as a, computeEventBindingKey as a0, computeFormulaKey as a1, computeInputSignalKey as a2, computeScrollTriggerKey as a3, computed as a4, createInteractiveSignalsAccessor as a5, createScrollProgressHandle as a6, createScrollProgressSignals as a7, hasInteractivePrimitives as a8, resolveLang as a9, sequenceBoardMetrics as aa, sequenceStepId as ab, signal as ac, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type EdgeRouting as h, type CdlState as i, type CdlInputOption as j, type CdlEventTarget as k, type CdlLang as l, type Computed as m, type CdlDerivedValue as n, type CdlScrollTrigger as o, type CdlDiagramViewProps as p, type LaidEdge as q, type LaidNode as r, type CdlEdge as s, type TreeNodePayload as t, CdlDiagramView as u, type CdlEventBinding as v, type CdlEventKind as w, type CdlFormula as x, type CdlPhase as y, type ChartPieForm as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.120.0",
+  "version": "0.122.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/builder.ts

@@ -17,6 +17,7 @@ import type {
   CdlState,
   EdgeHead,
   EdgeHeadFill,
+  EdgeRouting,
   EdgeStyle,
   EdgeRole,
   NodeKind,
@@ -1461,7 +1462,7 @@ export type DiagramBuilder = {
       tailLabel?: string;
       labelOffsetX?: number;
       labelOffsetY?: number;
-      routing?: "default" | "back-detour";
+      routing?: EdgeRouting;
       /** CAR-549 SSOT ... true で label を edge path 上に重ねる (flowchart condition label 用) */
       overlay?: boolean;
       /** signal binding: stroke-width template (CAR edge-signal-binding) */
@@ -1573,7 +1574,7 @@ export type DiagramBuilder = {
       tailLabel?: string;
       labelOffsetX?: number;
       labelOffsetY?: number;
-      routing?: "default" | "back-detour";
+      routing?: EdgeRouting;
       /** CAR-549 SSOT ... true で label を edge path 上に重ねる (flowchart condition label 用) */
       overlay?: boolean;
     }>,

package/src/index.ts

@@ -312,6 +312,7 @@ export type {
   EdgeHead,
   EdgeHeadFill,
   EdgeReveal,
+  EdgeRouting,
   RelationFocus,
   RowMark,
   EdgeStyle,

package/src/kinds/dyn-shape.tsx

@@ -75,24 +75,37 @@ export function DynShapeNode({
     }
   })();
 
-  // 名前と値は箱の外に置く (#925)。 中に置くと、内側の塗りが値で動くたびに文字と重なる。
-  //
-  // **差し込みはここで通さない**。 `render/nodes.tsx` が `{名前}` を解決した節を渡してくるので、
-  // ここで通しても何も変わらない (実測 = 通さない形に変えても検査が 1 件も落ちなかった)。
-  // しかも向こうは値ごとの呼び名の表を持っており、ここには無い = 二重に通すと、
-  // 呼び名を持つ図だけ結果が変わる余地を作る。
+  const 揃え = 箱いっぱいに描く(shape.kind) ? "start" : "middle";
+  return renderShapeWithOutsideLabels(形, node, 揃え);
+}
+
+/**
+ * 名前と値は箱の外に置く (#925)。 中に置くと、内側の塗りが値で動くたびに文字と重なる。
+ * 駅は塗りが動かないが、丸が小さく名前が丸より広いので外に置く。
+ *
+ * **差し込みはここで通さない**。 `render/nodes.tsx` が `{名前}` を解決した節を渡してくるので、
+ * ここで通しても何も変わらない (実測 = 通さない形に変えても検査が 1 件も落ちなかった)。
+ * しかも向こうは値ごとの呼び名の表を持っており、ここには無い = 二重に通すと、
+ * 呼び名を持つ図だけ結果が変わる余地を作る。
+ */
+export function renderShapeWithOutsideLabels(
+  形: JSX.Element,
+  node: LaidNode,
+  揃え: "start" | "middle",
+): JSX.Element {
+  const cx = node.cx;
+  const y = node.cy - node.h / 2;
   const 名前 = (node.title ?? "").trim();
   const 値 = (node.subtitle ?? "").trim();
   // どちらも書かれていない節では包む `<g>` も足さない = 書かない図の DOM を 1 要素も変えない
   if (名前 === "" && 値 === "") return 形;
-  const 揃え = 箱いっぱいに描く(shape.kind) ? "start" : "middle";
   return (
     <g>
       {形}
       {名前 !== "" && (
         <text
           data-cdl-role="shape-name"
-          x={揃え === "start" ? x : cx}
+          x={揃え === "start" ? node.cx - node.w / 2 : cx}
           y={y - NAME_GAP}
           textAnchor={揃え}
           fontSize={13}
@@ -106,7 +119,7 @@ export function DynShapeNode({
         <text
           data-cdl-role="shape-value"
           x={cx}
-          y={y + h + VALUE_GAP}
+          y={y + node.h + VALUE_GAP}
           textAnchor="middle"
           fontSize={12}
           fill="var(--cdl-text-dim, #5a6270)"

package/src/kinds/station.tsx

@@ -0,0 +1,29 @@
+import type { JSX } from "react";
+
+import type { LaidNode } from "../types";
+import { renderShapeWithOutsideLabels } from "./dyn-shape";
+import { nodeAccent } from "./node-tone";
+
+const STATION_STROKE_ACTIVE = 4;
+const STATION_STROKE_IDLE = 3;
+const STATION_DEFAULT = "var(--cdl-tone-accent, #2d6a8f)";
+
+/** 路線図の線路上に置く駅。名前と説明は丸を隠さないよう外側に置く。 */
+export function StationNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const strokeWidth = active ? STATION_STROKE_ACTIVE : STATION_STROKE_IDLE;
+  // 線は箱の辺で止まるため、枠線の外縁を箱の辺へ合わせると線路と丸の間が空かない。
+  const radius = Math.max(0, Math.min(node.w, node.h) / 2 - strokeWidth / 2);
+  const 形 = (
+    <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={strokeWidth}
+    />
+  );
+  return renderShapeWithOutsideLabels(形, node, "middle");
+}

package/src/layout/collisions.ts

@@ -688,7 +688,7 @@ export function detectCollisions(
 /**
  * path d 文字列を、 描画する線分の列に分解
  *
- * 曲線 (Q / C) は端点を結ぶ弦に落とす。 交差判定には十分だが、 弦は実際の曲線が通る場所とは
+ * 曲線 (Q / C / A) は端点を結ぶ弦に落とす。 交差判定には十分だが、 弦は実際の曲線が通る場所とは
  * ずれる。 「この線分は本当に真っ直ぐか」 を知る必要がある呼出側のために、 由来の command
  * (`cmd`) と制御点 (`ctrl`、 曲線のみ) を併せて返す。 弦を直線として扱うと、 端点が同じ高さで
  * 大きく膨らむ曲線を「水平な直線」 と誤認する。
@@ -700,7 +700,7 @@ export function extractPathSegments(
   y1: number;
   x2: number;
   y2: number;
-  cmd: "L" | "Q" | "C";
+  cmd: "L" | "Q" | "C" | "A";
   ctrl?: Array<{ x: number; y: number }>;
 }> {
   const segs: Array<{
@@ -708,10 +708,10 @@ export function extractPathSegments(
     y1: number;
     x2: number;
     y2: number;
-    cmd: "L" | "Q" | "C";
+    cmd: "L" | "Q" | "C" | "A";
     ctrl?: Array<{ x: number; y: number }>;
   }> = [];
-  const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
+  const commandRegex = /([MLCQAZmlcqaz])([^MLCQAZmlcqaz]*)/g;
   let cur: { x: number; y: number } = { x: 0, y: 0 };
   let m: RegExpExecArray | null;
   while ((m = commandRegex.exec(d)) !== null) {
@@ -719,7 +719,7 @@ export function extractPathSegments(
     const args = (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat);
     // 引数が足りない command は読み飛ばす。 `args[n]!` で埋めると undefined が座標に入り、
     // 以降の segment が全て NaN になる = 距離判定が黙って対象外になる (#370)。
-    const need = cmd === "M" || cmd === "L" ? 2 : cmd === "Q" ? 4 : cmd === "C" ? 6 : 0;
+    const need = cmd === "M" || cmd === "L" ? 2 : cmd === "Q" ? 4 : cmd === "C" ? 6 : cmd === "A" ? 7 : 0;
     if (need > 0 && (args.length < need || !args.slice(0, need).every(Number.isFinite))) continue;
     if (cmd === "M") {
       cur = { x: args[0]!, y: args[1]! };
@@ -741,13 +741,17 @@ export function extractPathSegments(
         ctrl: [{ x: args[0]!, y: args[1]! }, { x: args[2]!, y: args[3]! }],
       });
       cur = next;
+    } else if (cmd === "A") {
+      const next = { x: args[5]!, y: args[6]! };
+      segs.push({ x1: cur.x, y1: cur.y, x2: next.x, y2: next.y, cmd: "A" });
+      cur = next;
     }
   }
   return segs;
 }
 
 /**
- * 曲線 (Q / C) を、 実際に描かれる線に沿った折れ線に開く。
+ * 曲線 (Q / C) を、 実際に描かれる線に沿った折れ線に開く。円弧 (A) は弦のまま返す。
  *
  * `extractPathSegments` は曲線を端点どうしの弦に落とす。 交差判定はそれで足りるが、
  * 「線からどれだけ離れているか」 を測る用途では弦は使えない = 弦は描かれていないため、
@@ -788,7 +792,7 @@ export function extractPathSegments(
  * 無い形を勝手に作ることになる。
  *
  * @param segs `extractPathSegments()` の出力
- * @returns 直線のみからなる segment 列。 `L` はそのまま。 曲線は `FLATTEN_MIN_DIVISIONS` 以上
+ * @returns 直線のみからなる segment 列。 `L` と `A` の弦はそのまま。`Q` / `C` は `FLATTEN_MIN_DIVISIONS` 以上
  *   `FLATTEN_MAX_DIVISIONS` 以下の本数に開く。 誤差が `FLATTEN_TOLERANCE` 以下に収まるのは、
  *   必要な分割数が上限以下に収まる曲線 (`dev ≤ 4 · 許容差 · 上限²`) に限る。 上限を超える
  *   曲線では保証されず、 許容差を超えることがある (幅 4e7 の対称な弧では式の上限が 0.596
@@ -804,7 +808,7 @@ export function flattenPathSegments(
     y1: number;
     x2: number;
     y2: number;
-    cmd: "L" | "Q" | "C";
+    cmd: "L" | "Q" | "C" | "A";
     ctrl?: ReadonlyArray<{ x: number; y: number }>;
   }>,
 ): Array<{ x1: number; y1: number; x2: number; y2: number }> {
@@ -2357,16 +2361,17 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
 }
 
 /** 札の逃がし先を測るのに使う、 線の区間と外接矩形。 同じ図の中で使い回す (#810)。 */
-interface 線の測り方 {
+export interface 線の測り方 {
   readonly 区間: (id: string, d: string) => Seg[];
   readonly 遠い: (box: BBox, edgeId: string, d: string, 余裕: number) => boolean;
 }
 
 /**
- * 線の測り方を作る。 逃がし pass と、 門が「なぜ動かせなかったか」 を説明する側
- * (`札が動けない理由`) の両方が使う = 2 箇所で別に書くと、 片方だけ直してずれる。
+ * 線の測り方を作る。 逃がし pass、 門が「なぜ動かせなかったか」 を説明する側
+ * (`札が動けない理由`)、 終点をずらした線の札の追従 (`followLabelsToFannedTails`、 #1002) が
+ * 同じ測り方を引く = どれかに別の測り方を書くと、 置けるかの判断がずれる。
  */
-function 線の測り方を作る(): 線の測り方 {
+export function 線の測り方を作る(): 線の測り方 {
   /*
    * 線の区間は **曲線を開いた形** で持つ (`detectCollisions` の札 branch と同じ)。
    *
@@ -2453,7 +2458,7 @@ export interface 札の移動を塞ぐ相手 {
 }
 
 /** 札を動かす判定に使う、 図の中の相手 */
-interface 札の周り {
+export interface 札の周り {
   readonly 箱たち: readonly BBox[];
   readonly labels: readonly BBox[];
   readonly edges: readonly LaidEdge[];
@@ -2464,10 +2469,11 @@ interface 札の周り {
 /**
  * 札 1 つを動かした先が、 いまより近づく相手を作らないか。 作るなら最初の 1 つを返す。
  *
- * 逃がし pass の `安全か` と、 門の説明 (`札が動けない理由`) が同じものを引く (#810)。
- * 2 箇所で別に書くと、 「pass は動かせないのに説明は動かせると言う」 ずれが生まれる。
+ * 逃がし pass の `安全か`、 門の説明 (`札が動けない理由`)、 終点をずらした線の札の追従
+ * (`followLabelsToFannedTails`、 #1002) が同じものを引く (#810)。 別に書くと、 追従で置いた札を
+ * 逃がし pass が押し直すか、 「pass は動かせないのに説明は動かせると言う」 ずれが生まれる。
  */
-function 札の移動を塞ぐ相手を探す(
+export function 札の移動を塞ぐ相手を探す(
   周り: 札の周り,
   label: BBox,
   行き先: BBox,
@@ -2649,10 +2655,14 @@ export function 札が動けない理由(
  *
  * ## なぜ最終 pass が要るか
  *
- * `resolveEdgeLabelOverlapsWithChainAndPropagate` は経路を動かす 4 つの pass
+ * `resolveEdgeLabelOverlapsWithChainAndPropagate` の chain 伝搬後に、 経路を動かす 4 つの pass
  * (`bowSharedStraightPaths` / `pullOutgoingFirstCorner` / `fanIncomingEndpoints` /
- * `separateSharedStraightRuns`) の **前** に走る。 札の初期位置は経路から決まるため、
- * 後の pass が経路を動かすと札も一緒に動く。 動いた後を見る者が誰も居なかった。
+ * `separateSharedStraightRuns`) が走る。 4 つとも経路を動かすが、 札も動かすのは
+ * `pullOutgoingFirstCorner` だけで、 動かす区間に一番近い札に限る (`edges.ts` の `labelも動かす`)。
+ *
+ * `bowSharedStraightPaths` と `separateSharedStraightRuns` は札を動かさず、 `fanIncomingEndpoints` が
+ * 残した札は `followLabelsToFannedTails` が追従させる。 追従も `札の移動を塞ぐ相手を探す` で
+ * 置けるかを決める = 別の判定で余白を割る位置へ置くと、 この pass が同じ札を押し直す (#1002)。
  *
  * 0.30.0 で `pullOutgoingFirstCorner` (#651) と `fanIncomingEndpoints` (#649) が経路を
  * 大きく動かすようになり、 消費側の見本帳で札が 11 件動いた (実測 = 最大 217 world)。
@@ -2886,4 +2896,3 @@ function applyEdgeLabelAndPathShifts(
     return next;
   });
 }
-

package/src/layout/curve-path.ts

@@ -0,0 +1,125 @@
+import type { CdlEdge, LaidNode, Side } from "../types";
+import { computeLabelBoxW, EDGE_STUB_OUT, labelPathClearanceHorizontal, labelPillH } from "./spec";
+
+type 箱 = Pick<LaidNode, "cx" | "cy" | "w" | "h">;
+
+type 曲線の結果 = {
+  d: string;
+  fromSide: Side;
+  toSide: Side;
+  labelX: number;
+  labelY: number;
+  labelAnchor: "middle";
+};
+
+/** `routePath` が横の直線を選ぶ値と揃え、既存の直線判定との境を増やさない。 */
+export const SAME_HEIGHT_THRESHOLD = 1;
+
+/**
+ * 2 つの箱を、両端で水平になる線で結ぶ。
+ *
+ * 行き先が左右へ離れていれば向かい合う左右の辺を使い、横の範囲が重なる時は両方の右辺を
+ * 使う。 2 点が同じ高さなら曲線にしても形が変わらないため、余分な制御点を持たない直線にする。
+ * 張り出しには `EDGE_STUB_OUT` の下限を置く。 制御点が端点に重なって接線が縦へ倒れるのを防ぎ、
+ * 箱を出てすぐ曲がらないことで、どの箱から出た線かを読めるようにするため。
+ *
+ * 札は曲線の中点から接線の法線方向へ離す。 線に沿ってずらすより、線と札の間の隙間を直接
+ * 保てるため。 この道筋は書き手が形を選ぶためのもので、途中の箱は避けない。
+ */
+export function curvePath(
+  from: 箱,
+  to: 箱,
+  edge?: Pick<CdlEdge, "label" | "sub" | "style" | "overlay">,
+  labelMarginExtra = 0,
+): 曲線の結果 {
+  const fromLeft = from.cx - from.w / 2;
+  const fromRight = from.cx + from.w / 2;
+  const toLeft = to.cx - to.w / 2;
+  const toRight = to.cx + to.w / 2;
+
+  let fromSide: Side;
+  let toSide: Side;
+  let x1: number;
+  let x2: number;
+
+  if (toLeft >= fromRight) {
+    fromSide = "right";
+    toSide = "left";
+    x1 = fromRight;
+    x2 = toLeft;
+  } else if (toRight <= fromLeft) {
+    fromSide = "left";
+    toSide = "right";
+    x1 = fromLeft;
+    x2 = toRight;
+  } else {
+    fromSide = "right";
+    toSide = "right";
+    x1 = fromRight;
+    x2 = toRight;
+  }
+
+  const y1 = from.cy;
+  const y2 = to.cy;
+  const sameHeight = Math.abs(y2 - y1) < SAME_HEIGHT_THRESHOLD;
+
+  let d: string;
+  let midX: number;
+  let midY: number;
+  let tangentX: number;
+  let tangentY: number;
+
+  if (sameHeight) {
+    d = `M ${x1} ${y1} L ${x2} ${y2}`;
+    midX = (x1 + x2) / 2;
+    midY = (y1 + y2) / 2;
+    tangentX = x2 - x1;
+    tangentY = y2 - y1;
+  } else {
+    let c1x: number;
+    let c2x: number;
+    if (fromSide !== toSide) {
+      const direction = x2 > x1 ? 1 : -1;
+      const bulge = Math.max(Math.abs(x2 - x1) / 2, EDGE_STUB_OUT);
+      c1x = x1 + direction * bulge;
+      c2x = x2 - direction * bulge;
+    } else {
+      const bulgeX = Math.max(x1, x2) + EDGE_STUB_OUT;
+      c1x = bulgeX;
+      c2x = bulgeX;
+    }
+    d = `M ${x1} ${y1} C ${c1x} ${y1}, ${c2x} ${y2}, ${x2} ${y2}`;
+    midX = (x1 + 3 * c1x + 3 * c2x + x2) / 8;
+    midY = (y1 + 3 * y1 + 3 * y2 + y2) / 8;
+    tangentX = x2 + c2x - c1x - x1;
+    tangentY = y2 + y2 - y1 - y1;
+  }
+
+  if (edge?.overlay) {
+    return { d, fromSide, toSide, labelX: midX, labelY: midY, labelAnchor: "middle" };
+  }
+
+  const tangentLength = Math.hypot(tangentX, tangentY);
+  let normalX = tangentY / tangentLength;
+  let normalY = -tangentX / tangentLength;
+  if (normalY > Number.EPSILON || (Math.abs(normalY) <= Number.EPSILON && normalX < 0)) {
+    normalX *= -1;
+    normalY *= -1;
+  }
+
+  const labelW = computeLabelBoxW(edge?.label, edge?.sub);
+  const labelH = labelPillH(edge?.sub);
+  const distance =
+    labelPathClearanceHorizontal(edge) +
+    (Math.abs(normalX) * labelW + Math.abs(normalY) * labelH) / 2 +
+    labelMarginExtra;
+
+  return {
+    d,
+    fromSide,
+    toSide,
+    labelX: midX + normalX * distance,
+    labelY: midY + normalY * distance,
+    labelAnchor: "middle",
+  };
+}