@cardenelabs/cdl 0.121.0 → 0.123.0

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

@@ -88,7 +88,7 @@ type SequenceBoardMetrics = {
  * 幅は **語の桁 + 列 × 面の数**。 語を線の脇ではなく左の桁に置くので、線の長さが語の長さに
  * 引きずられない = 面の数だけで横幅が決まる。
  */
-declare function sequenceBoardMetrics(data: SequenceBoardData): SequenceBoardMetrics;
+declare function sequenceBoardMetrics(data: SequenceBoardData, textMetrics?: CdlTextMetrics): SequenceBoardMetrics;
 
 /**
  * 描画側が書く固定の字の言語 (#847)。
@@ -117,8 +117,16 @@ declare function resolveLang(value: unknown): CdlLang;
 /** 意味付きの色の名前。 検査・描画・test はこの 1 つの列を出所にする。 */
 declare const TONES: readonly ["accent", "teal", "success", "error", "warning", "info"];
 type Tone = (typeof TONES)[number];
+/**
+ * 図の字幅をどの規則で測るか。`"proportional"` は現在の Inter 比例幅表、`"monospace"` は
+ * 等幅書体向けの幅を使う。既定は `"proportional"`。
+ *
+ * 消費側が図を等幅書体で描く場合、比例幅で配置すると英数字の描画幅と箱・札の計算幅が
+ * 食い違うため、図単位で測り方を揃えられるようにする。
+ */
+type CdlTextMetrics = "proportional" | "monospace";
 /** 描画できる箱の種類。 検査・記法一覧・型はこの 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 +141,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 +412,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 +765,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 復帰) 離して配置。
@@ -2608,6 +2631,14 @@ type CdlDiagram = {
      * 型の外の値は `layout` が既定に落とす (記法から文字列で届く場合の書き損じ)。
      */
     lang?: CdlLang;
+    /**
+     * 図の字幅を測る規則。`"proportional"` または `"monospace"` を取り、既定は
+     * `"proportional"`。
+     *
+     * 消費側が等幅書体で描く図では、比例幅の配置計算と実際の描画幅が食い違うため指定する。
+     * 型の外の値は `layout` が既定へ落とす。
+     */
+    textMetrics?: CdlTextMetrics;
     /**
      * この図がどの種類か (#645)。 書かない図は種類を持たない。
      *
@@ -2833,6 +2864,8 @@ type LaidDiagram = {
      * 無い時は `"en"` で描く。
      */
     lang?: CdlLang;
+    /** 等幅で測る図だけが持つ。無い時は `"proportional"` */
+    textMetrics?: "monospace";
     /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
     type?: string;
     viewBox: {
@@ -3035,4 +3068,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 { 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 };

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

@@ -88,7 +88,7 @@ type SequenceBoardMetrics = {
  * 幅は **語の桁 + 列 × 面の数**。 語を線の脇ではなく左の桁に置くので、線の長さが語の長さに
  * 引きずられない = 面の数だけで横幅が決まる。
  */
-declare function sequenceBoardMetrics(data: SequenceBoardData): SequenceBoardMetrics;
+declare function sequenceBoardMetrics(data: SequenceBoardData, textMetrics?: CdlTextMetrics): SequenceBoardMetrics;
 
 /**
  * 描画側が書く固定の字の言語 (#847)。
@@ -117,8 +117,16 @@ declare function resolveLang(value: unknown): CdlLang;
 /** 意味付きの色の名前。 検査・描画・test はこの 1 つの列を出所にする。 */
 declare const TONES: readonly ["accent", "teal", "success", "error", "warning", "info"];
 type Tone = (typeof TONES)[number];
+/**
+ * 図の字幅をどの規則で測るか。`"proportional"` は現在の Inter 比例幅表、`"monospace"` は
+ * 等幅書体向けの幅を使う。既定は `"proportional"`。
+ *
+ * 消費側が図を等幅書体で描く場合、比例幅で配置すると英数字の描画幅と箱・札の計算幅が
+ * 食い違うため、図単位で測り方を揃えられるようにする。
+ */
+type CdlTextMetrics = "proportional" | "monospace";
 /** 描画できる箱の種類。 検査・記法一覧・型はこの 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 +141,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 +412,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 +765,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 復帰) 離して配置。
@@ -2608,6 +2631,14 @@ type CdlDiagram = {
      * 型の外の値は `layout` が既定に落とす (記法から文字列で届く場合の書き損じ)。
      */
     lang?: CdlLang;
+    /**
+     * 図の字幅を測る規則。`"proportional"` または `"monospace"` を取り、既定は
+     * `"proportional"`。
+     *
+     * 消費側が等幅書体で描く図では、比例幅の配置計算と実際の描画幅が食い違うため指定する。
+     * 型の外の値は `layout` が既定へ落とす。
+     */
+    textMetrics?: CdlTextMetrics;
     /**
      * この図がどの種類か (#645)。 書かない図は種類を持たない。
      *
@@ -2833,6 +2864,8 @@ type LaidDiagram = {
      * 無い時は `"en"` で描く。
      */
     lang?: CdlLang;
+    /** 等幅で測る図だけが持つ。無い時は `"proportional"` */
+    textMetrics?: "monospace";
     /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
     type?: string;
     viewBox: {
@@ -3035,4 +3068,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 { 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.121.0",
+  "version": "0.123.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,16 +57,6 @@
     "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"
@@ -78,5 +68,12 @@
     "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

@@ -15,8 +15,10 @@ import type {
   CdlReadout,
   CdlScrollTrigger,
   CdlState,
+  CdlTextMetrics,
   EdgeHead,
   EdgeHeadFill,
+  EdgeRouting,
   EdgeStyle,
   EdgeRole,
   NodeKind,
@@ -1461,7 +1463,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 +1575,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;
     }>,
@@ -1662,6 +1664,8 @@ export function diagram(
      * 描画側が書く固定の字の言語 (#847)。 詳しくは `CdlDiagram.lang` の説明を参照。
      */
     lang?: CdlLang;
+    /** 図の字幅を測る規則。詳しくは `CdlDiagram.textMetrics` の説明を参照。 */
+    textMetrics?: CdlTextMetrics;
     /**
      * この図がどの種類か (#645)。 詳しくは `CdlDiagram.type` の説明を参照。
      */
@@ -3817,6 +3821,8 @@ export function diagram(
         ...(options.palette !== undefined ? { palette: options.palette } : {}),
         // 言語も素通しする。 型の外の値を既定に落とすのは `layout` の 1 箇所に置く
         ...(options.lang !== undefined ? { lang: options.lang } : {}),
+        // 字幅の測り方も素通しする。型の外の値を既定に落とすのは `layout` の 1 箇所に置く
+        ...(options.textMetrics !== undefined ? { textMetrics: options.textMetrics } : {}),
         // 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
         ...(options.type !== undefined ? { type: options.type } : {}),
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)

package/src/index.ts

@@ -15,6 +15,7 @@ export type { CdlInput, CdlInputOption } from "./types";
 // 字を直すたびに利用側が壊れる
 export { resolveLang } from "./lang";
 export type { CdlLang } from "./lang";
+export { resolveTextMetrics } from "./text-metrics";
 
 // formula primitive (CAR #244) — builder chain `.formula(id, "gasBase * 2")` で safe subset の
 // algebraic expression を追加、 createFormulaComputeds(diagram, signals) で computed を得て
@@ -309,9 +310,11 @@ export type {
   CdlNode,
   CdlPhase,
   CdlState,
+  CdlTextMetrics,
   EdgeHead,
   EdgeHeadFill,
   EdgeReveal,
+  EdgeRouting,
   RelationFocus,
   RowMark,
   EdgeStyle,

package/src/kinds/box-lines.ts

@@ -1,3 +1,4 @@
+import type { CdlTextMetrics } from "../types";
 import { textWidth } from "./text-width";
 import { MIN_TEXT_SIZE } from "./compact-title";
 
@@ -50,6 +51,13 @@ export type 積んだ行 = 積む行 & {
   dy: number;
 };
 
+/** tree の箱を描画と検査で同じ字幅規則にそろえる。 */
+export function 箱の字を測る(
+  textMetrics: CdlTextMetrics = "proportional",
+): (text: string, fontSize: number) => number {
+  return (text, fontSize) => textWidth(text, fontSize, 0, textMetrics);
+}
+
 /**
  * 幅に収まるところまでで切り、 切った時は末尾に `…` を付ける。
  *
@@ -63,7 +71,7 @@ export function 幅で切る(
   text: string,
   fontSize: number,
   使える幅: number,
-  測る: (s: string, size: number) => number = textWidth,
+  測る: (s: string, size: number) => number,
 ): string {
   if (使える幅 <= 0) return "";
   if (測る(text, fontSize) <= 使える幅) return text;
@@ -112,7 +120,7 @@ export function 幅に収める(
   text: string,
   fontSize: number,
   使える幅: number,
-  測る: (s: string, size: number) => number = textWidth,
+  測る: (s: string, size: number) => number,
 ): { text: string; fontSize: number } {
   let size = fontSize;
   while (size > 縮めの下限 && 測る(text, size) > 使える幅) size -= 1;
@@ -143,7 +151,12 @@ function 書記素に分ける(text: string): string[] {
  *
  * 返す `dy` は箱の中心から見たずれで、 行の塊を上下の中央に置いた時の baseline になる。
  */
-export function 箱に積む(行: 積む行[], 箱の幅: number, 箱の高さ: number): 積んだ行[] {
+export function 箱に積む(
+  行: 積む行[],
+  箱の幅: number,
+  箱の高さ: number,
+  測る: (s: string, size: number) => number,
+): 積んだ行[] {
   const 候補 = 行.filter((r, i) => i === 0 || r.text.trim() !== "");
   if (候補.length === 0) return [];
 
@@ -159,7 +172,7 @@ export function 箱に積む(行: 積む行[], 箱の幅: number, 箱の高さ:
   const 幅 = 使える幅(箱の幅);
   // **幅に収めるのを先に済ませる** (#534)。 縮めると行の高さも変わるため、後から縮めると
   // `dy` が縮める前の大きさで出て、行の塊が箱の上下の中央からずれる
-  const 収めた = 残す.map((r) => ({ ...r, ...幅に収める(r.text, r.fontSize, 幅) }));
+  const 収めた = 残す.map((r) => ({ ...r, ...幅に収める(r.text, r.fontSize, 幅, 測る) }));
 
   const 総高 = 高さ(収めた);
   let 積み = -総高 / 2;

package/src/kinds/chart-bar.tsx

@@ -120,6 +120,9 @@ export function ChartBarNode({
    * 4 本に 4 色を配ると「色に意味がある」 と誤読する余地が残る。
    */
   const 濃さ = (v: number): number => (vMax > 0 ? (v >= vMax ? 1 : 0.45) : 0.9);
+  /** `data-cdl-emphasis` はいちばん大きい棒すべてに付ける。 `濃さ` が 1 の棒と同じ条件で、
+   * `chart-bar-look.test.tsx` の `(#1008)` が両方を同じ並びで見張る。 */
+  const 主役の棒か = (v: number): boolean => vMax > 0 && v >= vMax;
   /** 角丸は棒の太さに合わせる。 太い棒に固定値を当てると直角に見える */
   const 角丸 = Math.min(barW * 0.06, 8);
 
@@ -190,6 +193,7 @@ export function ChartBarNode({
           <rect
             data-cdl-role="chart-bar"
             data-cdl-unresolved={d.unresolved ? "true" : undefined}
+            data-cdl-emphasis={主役の棒か(d.value) ? "primary" : undefined}
             x={bx}
             y={by}
             width={barW}

package/src/kinds/chart-gauge.tsx

@@ -1,5 +1,5 @@
 import { useId, type JSX } from "react";
-import type { LaidNode, Tone } from "../types";
+import type { CdlTextMetrics, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
@@ -44,6 +44,7 @@ export function ChartGaugeNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -52,6 +53,7 @@ export function ChartGaugeNode({
   drawing?: boolean;
   /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
   progress?: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -99,7 +101,11 @@ export function ChartGaugeNode({
    * 防ぐ下限として置いている。 万一この関係が崩れても印は区画に合わせて縮む (下の `Math.min`)。
    */
   const 割り付ける = (件たち: typeof data): { 行の件数: number; 段数: number } => {
-    const 幅 = Math.max(印の幅, ...件たち.map((d) => textWidth(数値の行(d), 数値の級))) + 区画の間;
+    const 幅 =
+      Math.max(
+        印の幅,
+        ...件たち.map((d) => textWidth(数値の行(d), 数値の級, 0, textMetrics)),
+      ) + 区画の間;
     const 行の件数 = Math.min(
       Math.max(1, Math.floor(使える幅 / Math.max(幅, 1))),
       Math.max(件たち.length, 1),
@@ -256,7 +262,7 @@ export function ChartGaugeNode({
    */
   const 合計の文字 = 実値表記(Math.round(total));
   /** 級 1 あたりの字幅 */
-  const 単位幅 = Math.max(textWidth(合計の文字, 100), 1) / 100;
+  const 単位幅 = Math.max(textWidth(合計の文字, 100, 0, textMetrics), 1) / 100;
   const 級の候補 = Math.min(
     // 横 = 字の上の角が内側の円に入る大きさ
     内半径 / Math.sqrt((単位幅 / 2) ** 2 + 1.25 ** 2),
@@ -395,7 +401,7 @@ export function ChartGaugeNode({
          * 切れ目が値の途中に来た行だけ色が付かない形になる。
          */
         const 数の行 = 内訳の数値[idx] ?? "";
-        const 切った数の行 = 切り詰める(数の行, 収まる幅, 数値の級);
+        const 切った数の行 = 切り詰める(数の行, 収まる幅, 数値の級, textMetrics);
         return (
           <g key={`legend-${idx}`} data-cdl-role="chart-gauge-item">
             <rect
@@ -413,7 +419,7 @@ export function ChartGaugeNode({
               fontWeight={700}
               fill="var(--cdl-text, #1a1f2a)"
             >
-              {切り詰める(d.label ?? "", 収まる幅, 名前の級)}
+              {切り詰める(d.label ?? "", 収まる幅, 名前の級, textMetrics)}
             </text>
             {/* **数値も切り詰める** = 切らないと隣の区画の字とくっつく (cdl#731) */}
             <text x={x} y={y + 46} fontSize={数値の級} fill="var(--cdl-text-dim, #5a6270)">
@@ -445,12 +451,17 @@ function 極(cx: number, cy: number, r: number, a: number): { x: number; y: numb
  * 切らないと隣の区画の字に重なる = どちらの件の名前かが読めなくなる。 切ったことが分かるよう
  * `…` を付ける。
  */
-function 切り詰める(s: string, 上限: number, 級: number): string {
-  if (上限 <= 0 || textWidth(s, 級) <= 上限) return s;
-  const 記号幅 = textWidth("…", 級);
+function 切り詰める(
+  s: string,
+  上限: number,
+  級: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): string {
+  if (上限 <= 0 || textWidth(s, 級, 0, textMetrics) <= 上限) return s;
+  const 記号幅 = textWidth("…", 級, 0, textMetrics);
   let out = "";
   for (const c of s) {
-    if (textWidth(out + c, 級) + 記号幅 > 上限) break;
+    if (textWidth(out + c, 級, 0, textMetrics) + 記号幅 > 上限) break;
     out += c;
   }
   return `${out}…`;