@cardenelabs/cdl 0.124.0 → 0.125.0

package/dist/{render-U6omSNH2.d.cts → render-7yEHIUK1.d.cts}

@@ -125,8 +125,16 @@ type Tone = (typeof TONES)[number];
  * 食い違うため、図単位で測り方を揃えられるようにする。
  */
 type CdlTextMetrics = "proportional" | "monospace";
+/** 凡例に描ける印。 配置・描画・検査はこの 1 つの列を出所にする。 */
+declare const LEGEND_MARKS: readonly ["diamond", "filled-circle", "double-circle", "dotted-line", "solid-line", "curved-line", "rounded-label", "numbered-circle", "station", "arrow"];
+type LegendMark = (typeof LEGEND_MARKS)[number];
+/** 図の下へ置く凡例の 1 項目。 */
+type CdlLegendItem = {
+    mark: LegendMark;
+    text: string;
+};
 /** 描画できる箱の種類。 検査・記法一覧・型はこの 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", "station", "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", "timeline-number", "sequence-board"];
 type NodeKind = (typeof NODE_KINDS)[number];
 type Side = "top" | "right" | "bottom" | "left";
 /**
@@ -148,7 +156,9 @@ type EdgeStyle = "solid" | "dotted-flow" | "dashed";
  * - `"back-detour"` ... 箱の上を回って前の箱へ戻り、途中の箱と交わる時は外側を回る
  * - `"curve"` ... 始点から水平に出て終点へ水平に入る 3 次曲線。 途中の箱は避けず、
  *   2 点が同じ高さなら直線になる。 終点の矢印は水平を向く
- * - `"metro"` ... 横線と傾き ±1 の斜線だけで結び、角を半径 r の円弧で丸める。
+ * - `"metro"` ... 通常は横線と傾き ±1 の斜線で結び、角を円弧で丸める。
+ *   `decision` からの枝は、行き先が同じ横位置なら上下の角から真っ直ぐ、右にあれば右の角から出て曲がる。
+ *   左へ戻る `dashed` は行き先側へ横に出して駅の上下へ入る。
  *   途中の箱は避けず、2 点が同じ高さなら横 1 本になる
  */
 type EdgeRouting = "default" | "back-detour" | "curve" | "metro";
@@ -291,7 +301,29 @@ type CdlLane = {
      */
     width: number;
     label?: string;
+    /**
+     * 路線図の担当として描く lane。 `label` を名札の名前、`subtitle` をその補足に使う。
+     *
+     * 書いた lane だけが名札と案内線を出す。書かない lane の出力は変わらない。
+     */
+    metro?: {
+        subtitle?: string;
+    };
     contain?: boolean;
+    /**
+     * lane を同じ上端・高さの段階列として描く時の見出し。
+     *
+     * `number` と `name` は別の SVG text に出るため、利用側は `stage-number` と `stage-name` を
+     * 個別に選べる。この lane にある `card` node の `subtitle` は、札の右側へ `stage-note` として
+     * 描き、通常の card の補足位置には出さない。
+     * `leaderTo` を持つ `card` も、段階列の内外にかかわらず同じ `stage-note` を使う。
+     *
+     * 書かない lane は既存の縦列のままで、`lane-container` / `lane-label` の入力と出力は変わらない。
+     */
+    stage?: {
+        number: string;
+        name: string;
+    };
     /**
      * この lane を何のために置いているか (既定 = `"column"`)。
      *
@@ -311,6 +343,12 @@ type CdlLane = {
     role?: "column" | "overlay";
     /** UML sequence diagram の lifeline (= lane の中央 x に縦の点線を描画) */
     lifeline?: boolean;
+    /**
+     * lane の中央 x に時間軸の実線を描く。線はこの lane にある描画対象 node の中心間を結ぶ。
+     *
+     * `lifeline` の点線とは独立しており、両方を書いた lane では両方を描く。
+     */
+    timelineAxis?: boolean;
     /**
      * 明示指定した座標。 `posX` と `posY` の **両方**が揃った lane は「置いた位置に置く」
      * 扱いになる。 片方だけでは何も変わらない。
@@ -336,6 +374,11 @@ type CdlNode = {
     title: string;
     eyebrow?: string;
     subtitle?: string;
+    /**
+     * この箱から指定した node へ矢印なしの補助線を引く。edge ではないため `laid.edges` には入らない。
+     * `card` の `subtitle` は札の右側へ `stage-note` として描き、通常の補足位置には出さない。
+     */
+    leaderTo?: string;
     /** mono 数値表示用、 `{stateId}` を含めれば state 値で動的置換 */
     value?: string;
     /** kind=storage 時の行 (各 mono、 state 参照可) */
@@ -2651,6 +2694,8 @@ type CdlDiagram = {
      * 種類を書いていない図にも当たる。
      */
     type?: string;
+    /** SVG 内の図の下へ、指定順の横一列で置く凡例。 */
+    legend?: readonly CdlLegendItem[];
     /**
      * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
      *
@@ -2836,6 +2881,13 @@ type LaidEdge = CdlEdge & {
     labelX: number;
     labelY: number;
     labelAnchor: "start" | "middle" | "end";
+    /** 前の station へ戻る metro 線だけが持つ、専用の点線と矢印を描く目印。 */
+    metroReturn?: true;
+};
+type LaidLegendItem = CdlLegendItem & {
+    x: number;
+    /** 文字の baseline。 印はこの値を基準に同じ行へ揃える。 */
+    y: number;
 };
 /**
  * AABB (axis-aligned bounding box)。
@@ -2869,6 +2921,8 @@ type LaidDiagram = {
     textMetrics?: "monospace";
     /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
     type?: string;
+    /** 指定がある図だけが持つ、配置済みの凡例。 */
+    legend?: readonly LaidLegendItem[];
     viewBox: {
         x: number;
         y: number;
@@ -3069,4 +3123,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { type ScrollProgressHandle as $, type ChartPieForm as A, type BBox as B, type CdlDiagram as C, type ChartSlopeForm as D, type EdgeStyle as E, EDGE_HEADS as F, EDGE_HEAD_DEFAULT as G, EDGE_HEAD_FILLS as H, EDGE_HEAD_FILL_DEFAULT as I, type JourneyEmotion as J, EDGE_REVEALS as K, type LaidDiagram as L, EDGE_REVEAL_DEFAULT as M, type NodeKind as N, EDGE_STYLES as O, type EdgeReveal as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, type InteractiveHandlerMap as U, type InteractiveSignalsAccessor as V, type LaidLane as W, NODE_KINDS as X, RELATION_FOCUSES as Y, RELATION_FOCUS_DEFAULT as Z, type RelationFocus as _, type CdlInput as a, TONES as a0, computeEventBindingKey as a1, computeFormulaKey as a2, computeInputSignalKey as a3, computeScrollTriggerKey as a4, computed as a5, createInteractiveSignalsAccessor as a6, createScrollProgressHandle as a7, createScrollProgressSignals as a8, hasInteractivePrimitives as a9, resolveLang as aa, sequenceBoardMetrics as ab, sequenceStepId as ac, signal as ad, 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 CdlTextMetrics as m, type Computed as n, type CdlDerivedValue as o, type CdlScrollTrigger as p, type CdlDiagramViewProps as q, type LaidEdge as r, type LaidNode as s, type CdlEdge as t, type TreeNodePayload as u, CdlDiagramView as v, type CdlEventBinding as w, type CdlEventKind as x, type CdlFormula as y, type CdlPhase as z };
+export { NODE_KINDS as $, type CdlPhase as A, type BBox as B, type CdlDiagram as C, type ChartPieForm as D, type EdgeStyle as E, type ChartSlopeForm as F, EDGE_HEADS as G, EDGE_HEAD_DEFAULT as H, EDGE_HEAD_FILLS as I, type JourneyEmotion as J, EDGE_HEAD_FILL_DEFAULT as K, type LaidDiagram as L, EDGE_REVEALS as M, type NodeKind as N, EDGE_REVEAL_DEFAULT as O, EDGE_STYLES as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, type EdgeReveal as U, type InteractiveHandlerMap as V, type InteractiveSignalsAccessor as W, LEGEND_MARKS as X, type LaidLane as Y, type LaidLegendItem as Z, type LegendMark as _, type CdlInput as a, RELATION_FOCUSES as a0, RELATION_FOCUS_DEFAULT as a1, type RelationFocus as a2, type ScrollProgressHandle as a3, TONES as a4, computeEventBindingKey as a5, computeFormulaKey as a6, computeInputSignalKey as a7, computeScrollTriggerKey as a8, computed as a9, createInteractiveSignalsAccessor as aa, createScrollProgressHandle as ab, createScrollProgressSignals as ac, hasInteractivePrimitives as ad, resolveLang as ae, sequenceBoardMetrics as af, sequenceStepId as ag, signal as ah, 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 CdlTextMetrics as m, type Computed as n, type CdlDerivedValue as o, type CdlScrollTrigger as p, type CdlDiagramViewProps as q, type LaidEdge as r, type LaidNode as s, type CdlEdge as t, type TreeNodePayload as u, CdlDiagramView as v, type CdlEventBinding as w, type CdlEventKind as x, type CdlFormula as y, type CdlLegendItem as z };

package/dist/{render-U6omSNH2.d.ts → render-7yEHIUK1.d.ts}

@@ -125,8 +125,16 @@ type Tone = (typeof TONES)[number];
  * 食い違うため、図単位で測り方を揃えられるようにする。
  */
 type CdlTextMetrics = "proportional" | "monospace";
+/** 凡例に描ける印。 配置・描画・検査はこの 1 つの列を出所にする。 */
+declare const LEGEND_MARKS: readonly ["diamond", "filled-circle", "double-circle", "dotted-line", "solid-line", "curved-line", "rounded-label", "numbered-circle", "station", "arrow"];
+type LegendMark = (typeof LEGEND_MARKS)[number];
+/** 図の下へ置く凡例の 1 項目。 */
+type CdlLegendItem = {
+    mark: LegendMark;
+    text: string;
+};
 /** 描画できる箱の種類。 検査・記法一覧・型はこの 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", "station", "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", "timeline-number", "sequence-board"];
 type NodeKind = (typeof NODE_KINDS)[number];
 type Side = "top" | "right" | "bottom" | "left";
 /**
@@ -148,7 +156,9 @@ type EdgeStyle = "solid" | "dotted-flow" | "dashed";
  * - `"back-detour"` ... 箱の上を回って前の箱へ戻り、途中の箱と交わる時は外側を回る
  * - `"curve"` ... 始点から水平に出て終点へ水平に入る 3 次曲線。 途中の箱は避けず、
  *   2 点が同じ高さなら直線になる。 終点の矢印は水平を向く
- * - `"metro"` ... 横線と傾き ±1 の斜線だけで結び、角を半径 r の円弧で丸める。
+ * - `"metro"` ... 通常は横線と傾き ±1 の斜線で結び、角を円弧で丸める。
+ *   `decision` からの枝は、行き先が同じ横位置なら上下の角から真っ直ぐ、右にあれば右の角から出て曲がる。
+ *   左へ戻る `dashed` は行き先側へ横に出して駅の上下へ入る。
  *   途中の箱は避けず、2 点が同じ高さなら横 1 本になる
  */
 type EdgeRouting = "default" | "back-detour" | "curve" | "metro";
@@ -291,7 +301,29 @@ type CdlLane = {
      */
     width: number;
     label?: string;
+    /**
+     * 路線図の担当として描く lane。 `label` を名札の名前、`subtitle` をその補足に使う。
+     *
+     * 書いた lane だけが名札と案内線を出す。書かない lane の出力は変わらない。
+     */
+    metro?: {
+        subtitle?: string;
+    };
     contain?: boolean;
+    /**
+     * lane を同じ上端・高さの段階列として描く時の見出し。
+     *
+     * `number` と `name` は別の SVG text に出るため、利用側は `stage-number` と `stage-name` を
+     * 個別に選べる。この lane にある `card` node の `subtitle` は、札の右側へ `stage-note` として
+     * 描き、通常の card の補足位置には出さない。
+     * `leaderTo` を持つ `card` も、段階列の内外にかかわらず同じ `stage-note` を使う。
+     *
+     * 書かない lane は既存の縦列のままで、`lane-container` / `lane-label` の入力と出力は変わらない。
+     */
+    stage?: {
+        number: string;
+        name: string;
+    };
     /**
      * この lane を何のために置いているか (既定 = `"column"`)。
      *
@@ -311,6 +343,12 @@ type CdlLane = {
     role?: "column" | "overlay";
     /** UML sequence diagram の lifeline (= lane の中央 x に縦の点線を描画) */
     lifeline?: boolean;
+    /**
+     * lane の中央 x に時間軸の実線を描く。線はこの lane にある描画対象 node の中心間を結ぶ。
+     *
+     * `lifeline` の点線とは独立しており、両方を書いた lane では両方を描く。
+     */
+    timelineAxis?: boolean;
     /**
      * 明示指定した座標。 `posX` と `posY` の **両方**が揃った lane は「置いた位置に置く」
      * 扱いになる。 片方だけでは何も変わらない。
@@ -336,6 +374,11 @@ type CdlNode = {
     title: string;
     eyebrow?: string;
     subtitle?: string;
+    /**
+     * この箱から指定した node へ矢印なしの補助線を引く。edge ではないため `laid.edges` には入らない。
+     * `card` の `subtitle` は札の右側へ `stage-note` として描き、通常の補足位置には出さない。
+     */
+    leaderTo?: string;
     /** mono 数値表示用、 `{stateId}` を含めれば state 値で動的置換 */
     value?: string;
     /** kind=storage 時の行 (各 mono、 state 参照可) */
@@ -2651,6 +2694,8 @@ type CdlDiagram = {
      * 種類を書いていない図にも当たる。
      */
     type?: string;
+    /** SVG 内の図の下へ、指定順の横一列で置く凡例。 */
+    legend?: readonly CdlLegendItem[];
     /**
      * 矢印をいつ出すか (既定 = `"phase"`、 #582)。
      *
@@ -2836,6 +2881,13 @@ type LaidEdge = CdlEdge & {
     labelX: number;
     labelY: number;
     labelAnchor: "start" | "middle" | "end";
+    /** 前の station へ戻る metro 線だけが持つ、専用の点線と矢印を描く目印。 */
+    metroReturn?: true;
+};
+type LaidLegendItem = CdlLegendItem & {
+    x: number;
+    /** 文字の baseline。 印はこの値を基準に同じ行へ揃える。 */
+    y: number;
 };
 /**
  * AABB (axis-aligned bounding box)。
@@ -2869,6 +2921,8 @@ type LaidDiagram = {
     textMetrics?: "monospace";
     /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
     type?: string;
+    /** 指定がある図だけが持つ、配置済みの凡例。 */
+    legend?: readonly LaidLegendItem[];
     viewBox: {
         x: number;
         y: number;
@@ -3069,4 +3123,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { type ScrollProgressHandle as $, type ChartPieForm as A, type BBox as B, type CdlDiagram as C, type ChartSlopeForm as D, type EdgeStyle as E, EDGE_HEADS as F, EDGE_HEAD_DEFAULT as G, EDGE_HEAD_FILLS as H, EDGE_HEAD_FILL_DEFAULT as I, type JourneyEmotion as J, EDGE_REVEALS as K, type LaidDiagram as L, EDGE_REVEAL_DEFAULT as M, type NodeKind as N, EDGE_STYLES as O, type EdgeReveal as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, type InteractiveHandlerMap as U, type InteractiveSignalsAccessor as V, type LaidLane as W, NODE_KINDS as X, RELATION_FOCUSES as Y, RELATION_FOCUS_DEFAULT as Z, type RelationFocus as _, type CdlInput as a, TONES as a0, computeEventBindingKey as a1, computeFormulaKey as a2, computeInputSignalKey as a3, computeScrollTriggerKey as a4, computed as a5, createInteractiveSignalsAccessor as a6, createScrollProgressHandle as a7, createScrollProgressSignals as a8, hasInteractivePrimitives as a9, resolveLang as aa, sequenceBoardMetrics as ab, sequenceStepId as ac, signal as ad, 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 CdlTextMetrics as m, type Computed as n, type CdlDerivedValue as o, type CdlScrollTrigger as p, type CdlDiagramViewProps as q, type LaidEdge as r, type LaidNode as s, type CdlEdge as t, type TreeNodePayload as u, CdlDiagramView as v, type CdlEventBinding as w, type CdlEventKind as x, type CdlFormula as y, type CdlPhase as z };
+export { NODE_KINDS as $, type CdlPhase as A, type BBox as B, type CdlDiagram as C, type ChartPieForm as D, type EdgeStyle as E, type ChartSlopeForm as F, EDGE_HEADS as G, EDGE_HEAD_DEFAULT as H, EDGE_HEAD_FILLS as I, type JourneyEmotion as J, EDGE_HEAD_FILL_DEFAULT as K, type LaidDiagram as L, EDGE_REVEALS as M, type NodeKind as N, EDGE_REVEAL_DEFAULT as O, EDGE_STYLES as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, type EdgeReveal as U, type InteractiveHandlerMap as V, type InteractiveSignalsAccessor as W, LEGEND_MARKS as X, type LaidLane as Y, type LaidLegendItem as Z, type LegendMark as _, type CdlInput as a, RELATION_FOCUSES as a0, RELATION_FOCUS_DEFAULT as a1, type RelationFocus as a2, type ScrollProgressHandle as a3, TONES as a4, computeEventBindingKey as a5, computeFormulaKey as a6, computeInputSignalKey as a7, computeScrollTriggerKey as a8, computed as a9, createInteractiveSignalsAccessor as aa, createScrollProgressHandle as ab, createScrollProgressSignals as ac, hasInteractivePrimitives as ad, resolveLang as ae, sequenceBoardMetrics as af, sequenceStepId as ag, signal as ah, 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 CdlTextMetrics as m, type Computed as n, type CdlDerivedValue as o, type CdlScrollTrigger as p, type CdlDiagramViewProps as q, type LaidEdge as r, type LaidNode as s, type CdlEdge as t, type TreeNodePayload as u, CdlDiagramView as v, type CdlEventBinding as w, type CdlEventKind as x, type CdlFormula as y, type CdlLegendItem as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.124.0",
+  "version": "0.125.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",
@@ -57,6 +57,16 @@
     "node": ">=18"
   },
   "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "cd ../.. && vitest run packages/cdl",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "pnpm run typecheck && pnpm run build",
+    "prepack": "node scripts/prepack-check.mjs",
+    "postpack": "node scripts/prepack-check.mjs"
+  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -68,12 +78,5 @@
     "typedoc": "^0.28.19",
     "typedoc-plugin-markdown": "^4.12.0",
     "typescript": "^5.8.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "cd ../.. && vitest run packages/cdl",
-    "lint": "tsc --noEmit"
   }
-}
+}

package/src/builder.ts

@@ -1670,6 +1670,8 @@ export function diagram(
      * この図がどの種類か (#645)。 詳しくは `CdlDiagram.type` の説明を参照。
      */
     type?: string;
+    /** SVG 内の図の下へ置く共通凡例。 */
+    legend?: CdlDiagram["legend"];
   },
 ): DiagramBuilder {
   const lanes: CdlLane[] = [];
@@ -3825,6 +3827,10 @@ export function diagram(
         ...(options.textMetrics !== undefined ? { textMetrics: options.textMetrics } : {}),
         // 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
         ...(options.type !== undefined ? { 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] } : {}),

package/src/index.ts

@@ -303,6 +303,7 @@ export type {
 } from "./presets";
 export type {
   CdlDiagram,
+  CdlLegendItem,
   CdlEdge,
   ChartPieForm,
   ChartSlopeForm,
@@ -321,10 +322,12 @@ export type {
   LaidDiagram,
   LaidEdge,
   LaidLane,
+  LaidLegendItem,
   LaidNode,
   NodeKind,
   Side,
   Tone,
+  LegendMark,
 } from "./types";
 // 値としての tone 一覧。 downstream (dragon の parser 等) が受理できる色名の集合を
 // 手書きせずに済ませるため公開する。
@@ -342,6 +345,7 @@ export {
   EDGE_HEAD_FILL_DEFAULT,
   EDGE_REVEALS,
   EDGE_REVEAL_DEFAULT,
+  LEGEND_MARKS,
   EDGE_STYLES,
   RELATION_FOCUSES,
   RELATION_FOCUS_DEFAULT,

package/src/kinds/card.tsx

@@ -6,7 +6,15 @@ import { SUBTITLE_SIZE, 行送りの倍率, 説明文を割り付ける } from "
 import { 余りを分ける, 目印なしの繰り上げ } from "../layout/spec";
 import { NODE_SIZE } from "../layout/tokens";
 
-export function CardNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function CardNode({
+  node,
+  active,
+  compactTitleInset,
+}: {
+  node: LaidNode;
+  active: boolean;
+  compactTitleInset?: number;
+}): JSX.Element {
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
@@ -32,12 +40,12 @@ export function CardNode({ node, active }: { node: LaidNode; active: boolean }):
       });
   const ずらし = 繰り上げ - 余り;
   const titleY = compact ? (小型に呼び名 ? node.h / 2 - 2 : node.h / 2 + 8) : 86 - ずらし;
-  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" as const) : ("start" as const);
+  const textAnchor = compact && compactTitleInset === undefined ? ("middle" as const) : ("start" as const);
   const subtitleY = 124 - ずらし;
   // 2 行を置けるのは、題名の下端に触れず箱の下端も越えない時だけ (#843)。
   // 判定は最大の大きさ (21) で行う = 実際はこれ以下に収まるので、入ると判定した箱には必ず入る

package/src/kinds/generic.tsx

@@ -238,6 +238,8 @@ export function GenericNode({
   stateValues,
   値の名前,
   textMetrics = "proportional",
+  showKindIcon = true,
+  metroDecision = false,
 }: {
   node: LaidNode;
   active: boolean;
@@ -246,6 +248,10 @@ export function GenericNode({
   /** 入力欄の値ごとの名前 (#855)。 値と行の差し込みに使う */
   値の名前?: 値の名前の表;
   textMetrics?: CdlTextMetrics;
+  /** 路線図の分かれ道のように、箱の形自体が種類を示す時は種類の印を重ねない。 */
+  showKindIcon?: boolean;
+  /** `routing: "metro"` の線が出入りする分かれ道だけに見本の寸法を使う。 */
+  metroDecision?: boolean;
 }): JSX.Element {
   const base = STYLES[node.kind] ?? FALLBACK;
   // `tone` 指定があれば kind の既定色を置き換える。 色を決める式は `node-tone.ts` に集約。
@@ -281,13 +287,13 @@ export function GenericNode({
       const cy = h / 2;
       // diamond の上下頂点を内側に 8px padding して stroke clip を回避。
       // 旧実装は M cx 0 で上頂点が container 上端と完全一致、 strokeWidth=3 で半分が out of bounds に。
-      const pad = 8;
+      const pad = metroDecision ? 0 : 8;
       return (
         <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}
         />
       );
     }
@@ -401,13 +407,15 @@ export function GenericNode({
    */
   const 絵の芯 = centered && STYLES[node.kind]?.shape === "cloud" ? h * CLOUD_ART_CENTER_RISE : 0;
   const eyebrowY = centered ? h / 2 - 26 - 絵の芯 : 32 + cylinderShift + 余り;
-  const titleY = genericTitleBaselineY(node.kind, h, hasRows) - ずらし - 絵の芯;
+  const titleY = metroDecision
+    ? h / 2 + 9
+    : genericTitleBaselineY(node.kind, h, hasRows) - ずらし - 絵の芯;
   const subtitleY = centered ? h / 2 + 28 - 絵の芯 : 96 + cylinderShift - ずらし;
   // icon 位置 (diamond / cloud は title の真右の少し上、 中心配置に合わせる)
   const iconX = centered ? w / 2 + 40 : w - 48;
   // 目印も字と同じ芯に合わせる (#588)。 字だけ動かすと目印との間隔が変わる
   const iconY = centered ? h / 2 - 44 - 絵の芯 : 18 + cylinderShift;
-  const dominantBaseline = centered ? ("middle" as const) : undefined;
+  const dominantBaseline = centered && !metroDecision ? ("middle" as const) : undefined;
 
   return (
     <g
@@ -420,16 +428,18 @@ export function GenericNode({
     >
       {shapeEl}
       {/* icon */}
-      <g transform={`translate(${iconX} ${iconY}) scale(1)`} data-cdl-role="node-kind-icon">
-        <rect width={24} height={24} fill="transparent" />
-        <path d={style.icon} fill={style.eyebrowColor} opacity={0.7} transform="scale(1)" />
-      </g>
+      {showKindIcon && (
+        <g transform={`translate(${iconX} ${iconY}) scale(1)`} data-cdl-role="node-kind-icon">
+          <rect width={24} height={24} fill="transparent" />
+          <path d={style.icon} fill={style.eyebrowColor} opacity={0.7} transform="scale(1)" />
+        </g>
+      )}
       {node.eyebrow && (
         <text x={textX} y={eyebrowY} fontSize={17} fontWeight={700} letterSpacing={1.5} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : style.eyebrowColor} textAnchor={textAnchor} dominantBaseline={dominantBaseline}>
           {node.eyebrow}
         </text>
       )}
-      <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={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
+      <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={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
         {node.kind === "function" || node.kind === "api" ? 等幅の字(node.title, 20) : node.title}
       </text>
       {node.subtitle && (

package/src/kinds/station.tsx

@@ -1,29 +1,115 @@
 import type { JSX } from "react";
 
+import { TIMELINE_NUMBER_STROKE, titleUsableWidth } from "../layout/spec";
 import type { LaidNode } from "../types";
-import { renderShapeWithOutsideLabels } from "./dyn-shape";
+import { fitTextSize, MIN_TEXT_SIZE } from "./compact-title";
 import { nodeAccent } from "./node-tone";
 
-const STATION_STROKE_ACTIVE = 4;
-const STATION_STROKE_IDLE = 3;
+export const METRO_STATION_RADIUS = 16;
+export const METRO_STATION_STROKE_WIDTH = 6;
+const METRO_STATION_RADIUS_CSS = `var(--cdl-metro-station-radius, ${METRO_STATION_RADIUS}px)`;
+const METRO_STATION_STROKE_WIDTH_CSS = `var(--cdl-metro-station-stroke-width, ${METRO_STATION_STROKE_WIDTH}px)`;
 const STATION_DEFAULT = "var(--cdl-tone-accent, #2d6a8f)";
+const STATION_NAME_FONT_SIZE = 25;
+const STATION_NAME_GAP = 18;
+const STATION_NAME_RIGHT_GAP = 32;
+const STATION_NAME_RIGHT_BASELINE = 9;
+const STATION_SUBTITLE_FONT_SIZE = 18;
+const STATION_SUBTITLE_GAP = 22;
 
 /** 路線図の線路上に置く駅。名前と説明は丸を隠さないよう外側に置く。 */
-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}
-    />
+export function StationNode({
+  node,
+  nameRight = false,
+}: {
+  node: LaidNode;
+  active: boolean;
+  /** 線路が駅へ真上から入る時は、枝の札と重ならないよう名前を右へ置く。 */
+  nameRight?: boolean;
+}): JSX.Element {
+  const name = node.title.trim();
+  const subtitle = node.subtitle?.trim() ?? "";
+  return (
+    <g>
+      <circle
+        data-cdl-role="node-body"
+        data-cdl-mark="station"
+        cx={node.cx}
+        cy={node.cy}
+        r={METRO_STATION_RADIUS}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={nodeAccent(node, STATION_DEFAULT)}
+        strokeWidth={METRO_STATION_STROKE_WIDTH}
+        style={{ r: METRO_STATION_RADIUS_CSS, strokeWidth: METRO_STATION_STROKE_WIDTH_CSS }}
+      />
+      {name !== "" && (
+        <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"
+        >
+          {name}
+        </text>
+      )}
+      {subtitle !== "" && (
+        <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)"
+        >
+          {subtitle}
+        </text>
+      )}
+    </g>
+  );
+}
+
+/** 時間軸の実線上に置き、番号を中央に収める丸。路線図の駅の意味は兼ねない。 */
+export function TimelineNumberNode({ node }: { node: LaidNode }): JSX.Element {
+  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 (
+    <>
+      <circle
+        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}
+      />
+      <text
+        data-cdl-role="node-label"
+        x={node.cx}
+        y={node.cy}
+        textAnchor="middle"
+        dominantBaseline="central"
+        fontSize={fontSize}
+        fontWeight={700}
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {node.title}
+      </text>
+    </>
   );
-  return renderShapeWithOutsideLabels(形, node, "middle");
 }