@cardenelabs/cdl 0.122.0 → 0.123.0

package/dist/{render-U_pC-Ksh.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,6 +117,14 @@ 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", "station", "sequence-board"];
 type NodeKind = (typeof NODE_KINDS)[number];
@@ -2623,6 +2631,14 @@ type CdlDiagram = {
      * 型の外の値は `layout` が既定に落とす (記法から文字列で届く場合の書き損じ)。
      */
     lang?: CdlLang;
+    /**
+     * 図の字幅を測る規則。`"proportional"` または `"monospace"` を取り、既定は
+     * `"proportional"`。
+     *
+     * 消費側が等幅書体で描く図では、比例幅の配置計算と実際の描画幅が食い違うため指定する。
+     * 型の外の値は `layout` が既定へ落とす。
+     */
+    textMetrics?: CdlTextMetrics;
     /**
      * この図がどの種類か (#645)。 書かない図は種類を持たない。
      *
@@ -2848,6 +2864,8 @@ type LaidDiagram = {
      * 無い時は `"en"` で描く。
      */
     lang?: CdlLang;
+    /** 等幅で測る図だけが持つ。無い時は `"proportional"` */
+    textMetrics?: "monospace";
     /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
     type?: string;
     viewBox: {
@@ -3050,4 +3068,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-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 };
+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-U_pC-Ksh.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,6 +117,14 @@ 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", "station", "sequence-board"];
 type NodeKind = (typeof NODE_KINDS)[number];
@@ -2623,6 +2631,14 @@ type CdlDiagram = {
      * 型の外の値は `layout` が既定に落とす (記法から文字列で届く場合の書き損じ)。
      */
     lang?: CdlLang;
+    /**
+     * 図の字幅を測る規則。`"proportional"` または `"monospace"` を取り、既定は
+     * `"proportional"`。
+     *
+     * 消費側が等幅書体で描く図では、比例幅の配置計算と実際の描画幅が食い違うため指定する。
+     * 型の外の値は `layout` が既定へ落とす。
+     */
+    textMetrics?: CdlTextMetrics;
     /**
      * この図がどの種類か (#645)。 書かない図は種類を持たない。
      *
@@ -2848,6 +2864,8 @@ type LaidDiagram = {
      * 無い時は `"en"` で描く。
      */
     lang?: CdlLang;
+    /** 等幅で測る図だけが持つ。無い時は `"proportional"` */
+    textMetrics?: "monospace";
     /** どの種類の図か (#645)。 `CdlDiagram.type` をそのまま持ち越す */
     type?: string;
     viewBox: {
@@ -3050,4 +3068,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-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 };
+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.122.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,6 +15,7 @@ import type {
   CdlReadout,
   CdlScrollTrigger,
   CdlState,
+  CdlTextMetrics,
   EdgeHead,
   EdgeHeadFill,
   EdgeRouting,
@@ -1663,6 +1664,8 @@ export function diagram(
      * 描画側が書く固定の字の言語 (#847)。 詳しくは `CdlDiagram.lang` の説明を参照。
      */
     lang?: CdlLang;
+    /** 図の字幅を測る規則。詳しくは `CdlDiagram.textMetrics` の説明を参照。 */
+    textMetrics?: CdlTextMetrics;
     /**
      * この図がどの種類か (#645)。 詳しくは `CdlDiagram.type` の説明を参照。
      */
@@ -3818,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,6 +310,7 @@ export type {
   CdlNode,
   CdlPhase,
   CdlState,
+  CdlTextMetrics,
   EdgeHead,
   EdgeHeadFill,
   EdgeReveal,

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}…`;

package/src/kinds/chart-pie.tsx

@@ -1,5 +1,5 @@
 import { useId, type JSX } from "react";
-import type { ChartPieForm, LaidNode, Tone } from "../types";
+import type { CdlTextMetrics, ChartPieForm, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { 進みを畳む } from "./draw-progress";
@@ -17,8 +17,14 @@ const 穴に対する上限 = 0.8;
  * 下限まで戻し、**穴に入らない時だけ下限を割る** = 入らない大きさで描くと数字が輪へ
  * 重なる (#891)。
  */
-function 中央の字(比例した大きさ: number, 穴の半径: number, 文: string): number {
-  const 入る大きさ = (穴の半径 * 2 * 穴に対する上限) / Math.max(textWidth(文, 1), 1e-6);
+function 中央の字(
+  比例した大きさ: number,
+  穴の半径: number,
+  文: string,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
+  const 入る大きさ =
+    (穴の半径 * 2 * 穴に対する上限) / Math.max(textWidth(文, 1, 0, textMetrics), 1e-6);
   return Math.min(Math.max(比例した大きさ, 縮んだ絵の字の下限), 入る大きさ);
 }
 import { 実値表記, 割合表記 } from "./chart-number";
@@ -70,6 +76,7 @@ export function ChartPieNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -78,6 +85,7 @@ export function ChartPieNode({
   drawing?: boolean;
   /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
   progress?: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   // node id は diagram 内だけで一意。 同じ page に複数 diagram がある時も SVG の参照先が
   // ぶつからないよう、 React が component instance ごとに割り当てる id を使う。
@@ -151,7 +159,18 @@ export function ChartPieNode({
   });
 
   if (形 !== "ring") {
-    const 共通 = { node, active, data, 割合: 今の割合, x0, y0, drawing, progress, instanceId };
+    const 共通 = {
+      node,
+      active,
+      data,
+      割合: 今の割合,
+      x0,
+      y0,
+      drawing,
+      progress,
+      instanceId,
+      textMetrics,
+    };
     return 形 === "arcs" ? 弧の形(共通) : 表の形(共通);
   }
 
@@ -165,8 +184,8 @@ export function ChartPieNode({
     0,
     ...data.map((_d, i) =>
       Math.max(
-        textWidth(割合の文字[i] ?? "", 割合の級),
-        textWidth(名前の文字[i] ?? "", 名前の級),
+        textWidth(割合の文字[i] ?? "", 割合の級, 0, textMetrics),
+        textWidth(名前の文字[i] ?? "", 名前の級, 0, textMetrics),
       ),
     ),
   );
@@ -203,8 +222,8 @@ export function ChartPieNode({
    */
   const 穴 = 前あり ? 前の内半径 : 外の内半径;
   const 合計の文 = 実値表記(Math.round(前あり ? 今の合計 : total));
-  const 合計の字 = 中央の字(Math.round(radius * 0.26), 穴, 合計の文);
-  const 見出しの字 = 中央の字(Math.round(radius * 0.12), 穴, "合計");
+  const 合計の字 = 中央の字(Math.round(radius * 0.26), 穴, 合計の文, textMetrics);
+  const 見出しの字 = 中央の字(Math.round(radius * 0.12), 穴, "合計", textMetrics);
   const 合計の下 = Math.max(Math.round(radius * 0.2), 合計の字 * 0.25 + 見出しの字 * 0.8);
   const slices = 輪を組む(data, cx, cy, radius, 外の内半径, 今の割合);
 
@@ -450,6 +469,7 @@ type 形の引数 = {
   drawing: boolean;
   progress: number;
   instanceId: string;
+  textMetrics: CdlTextMetrics;
 };
 
 /** 3 つの見せ方が共通で持つ枠 (cdl#684) */
@@ -480,7 +500,17 @@ function 枠(node: LaidNode, active: boolean): JSX.Element {
  *
  * 中心に合計は置かない。 弧は合計を形で示さないので、置くと形と数が食い違う。
  */
-function 弧の形({ node, active, data, 割合, x0, y0, drawing, progress }: 形の引数): JSX.Element {
+function 弧の形({
+  node,
+  active,
+  data,
+  割合,
+  x0,
+  y0,
+  drawing,
+  progress,
+  textMetrics,
+}: 形の引数): JSX.Element {
   const PAD = 20;
   const 名前の級 = 14;
   const 割合の級 = 24;
@@ -491,9 +521,9 @@ function 弧の形({ node, active, data, 割合, x0, y0, drawing, progress }:
   const 一覧幅 =
     10 +
     印から名前まで +
-    Math.max(0, ...data.map((d) => textWidth(d.label ?? "", 名前の級))) +
+    Math.max(0, ...data.map((d) => textWidth(d.label ?? "", 名前の級, 0, textMetrics))) +
     名前から割合まで +
-    Math.max(0, ...割合の文字.map((t) => textWidth(t, 割合の級)));
+    Math.max(0, ...割合の文字.map((t) => textWidth(t, 割合の級, 0, textMetrics)));
 
   const 縦から = (node.h - PAD * 2) / 2;
   const 横から = (node.w - PAD * 2 - 一覧幅 - 28) / 2;
@@ -596,7 +626,18 @@ function 弧の形({ node, active, data, 割合, x0, y0, drawing, progress }:
  * 引き出し線を引かない = 対応は表の色の印が担う。 線と表を両方置くと、同じ対応を
  * 2 つの仕掛けで示すことになる。
  */
-function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, instanceId }: 形の引数): JSX.Element {
+function 表の形({
+  node,
+  active,
+  data,
+  割合,
+  x0,
+  y0,
+  drawing,
+  progress,
+  instanceId,
+  textMetrics,
+}: 形の引数): JSX.Element {
   const PAD = 20;
   const 見出しの級 = 11;
   const 名前の級 = 15;
@@ -606,9 +647,18 @@ function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, inst
 
   const 割合の文字 = 割合.map(割合表記);
   const 実数の文字 = data.map((d) => 実値表記(d.value));
-  const 名前幅 = Math.max(0, ...data.map((d) => textWidth(d.label ?? "", 名前の級)));
-  const 割合幅 = Math.max(textWidth("割合", 見出しの級), ...割合の文字.map((t) => textWidth(t, 割合の級)));
-  const 実数幅 = Math.max(textWidth("値", 見出しの級), ...実数の文字.map((t) => textWidth(t, 実数の級)));
+  const 名前幅 = Math.max(
+    0,
+    ...data.map((d) => textWidth(d.label ?? "", 名前の級, 0, textMetrics)),
+  );
+  const 割合幅 = Math.max(
+    textWidth("割合", 見出しの級, 0, textMetrics),
+    ...割合の文字.map((t) => textWidth(t, 割合の級, 0, textMetrics)),
+  );
+  const 実数幅 = Math.max(
+    textWidth("値", 見出しの級, 0, textMetrics),
+    ...実数の文字.map((t) => textWidth(t, 実数の級, 0, textMetrics)),
+  );
   const 表幅 = 10 + 印から名前まで + 名前幅 + 28 + 割合幅 + 24 + 実数幅;
 
   const 縦から = (node.h - PAD * 2) / 2;
@@ -619,8 +669,8 @@ function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, inst
   const cy = node.h / 2;
   // 中央の 2 行。 輪の layout と同じ決め方 (#891)
   const 合計の文 = 実値表記(Math.round(data.reduce((acc, d) => acc + d.value, 0)));
-  const 合計の字 = 中央の字(Math.round(R * 0.26), 内半径, 合計の文);
-  const 見出しの字 = 中央の字(Math.round(R * 0.12), 内半径, "合計");
+  const 合計の字 = 中央の字(Math.round(R * 0.26), 内半径, 合計の文, textMetrics);
+  const 見出しの字 = 中央の字(Math.round(R * 0.12), 内半径, "合計", textMetrics);
   const 合計の下 = Math.max(Math.round(R * 0.2), 合計の字 * 0.25 + 見出しの字 * 0.8);
 
   const 表左 = node.w - PAD - 表幅;

package/src/kinds/chart-radial.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";
@@ -45,6 +45,7 @@ export function ChartRadialNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -53,6 +54,7 @@ export function ChartRadialNode({
   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;
@@ -78,7 +80,10 @@ export function ChartRadialNode({
     Math.max(
       0,
       ...data.map((d, i) =>
-        Math.max(textWidth(d.label ?? "", 名前の級), textWidth(数値の文字[i] ?? "", 数値の級)),
+        Math.max(
+          textWidth(d.label ?? "", 名前の級, 0, textMetrics),
+          textWidth(数値の文字[i] ?? "", 数値の級, 0, textMetrics),
+        ),
       ),
     );
 

package/src/kinds/chart-slope.tsx

@@ -1,5 +1,5 @@
 import { type JSX } from "react";
-import type { ChartSlopeForm, LaidNode, Tone } from "../types";
+import type { CdlTextMetrics, ChartSlopeForm, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
@@ -99,6 +99,7 @@ export function ChartSlopeNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -106,6 +107,7 @@ export function ChartSlopeNode({
   /** 段の `draw` にこの node が載っている間だけ true */
   drawing?: boolean;
   progress?: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -193,8 +195,8 @@ export function ChartSlopeNode({
   const 右の字 = 系列たち.map((s) =>
     形 === "delta" ? 増減表記(s.前, s.今) : 実値表記(s.今),
   );
-  const 左値幅 = Math.max(0, ...左の字.map((t) => textWidth(t, 値の級)));
-  const 右値幅 = Math.max(0, ...右の字.map((t) => textWidth(t, 値の級)));
+  const 左値幅 = Math.max(0, ...左の字.map((t) => textWidth(t, 値の級, 0, textMetrics)));
+  const 右値幅 = Math.max(0, ...右の字.map((t) => textWidth(t, 値の級, 0, textMetrics)));
 
   /** 名札に回せる横幅。 線の幅を先に取り分けてから、残りを左右へ半分ずつ配る */
   const 名前に使える = Math.max(
@@ -206,10 +208,16 @@ export function ChartSlopeNode({
       (右値幅 + 軸から値まで + 値から名前まで)) /
       2,
   );
-  const 名前の級 = 収める級(系列たち.map((s) => s.名前), 名前に使える, 名前の上限級, 名前の下限級);
+  const 名前の級 = 収める級(
+    系列たち.map((s) => s.名前),
+    名前に使える,
+    名前の上限級,
+    名前の下限級,
+    textMetrics,
+  );
   const 名前幅 = Math.min(
     名前に使える,
-    Math.max(0, ...系列たち.map((s) => textWidth(s.名前, 名前の級))),
+    Math.max(0, ...系列たち.map((s) => textWidth(s.名前, 名前の級, 0, textMetrics))),
   );
 
   const 左の余白 = 名前幅 + 値から名前まで + 左値幅 + 軸から値まで;
@@ -427,9 +435,20 @@ function 印の色(tone: Tone | undefined, idx: number): string {
  * 最長の名前が枠に収まるまで 1 ずつ下げ、下限で止める。 下限でも収まらない図では
  * 名札が枠から出るが、線と軸は箱の内側に残る。
  */
-function 収める級(名前たち: readonly string[], 幅: number, 上限: number, 下限: number): number {
+function 収める級(
+  名前たち: readonly string[],
+  幅: number,
+  上限: number,
+  下限: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
   if (名前たち.length === 0) return 上限;
   let 級 = 上限;
-  while (級 > 下限 && Math.max(...名前たち.map((n) => textWidth(n, 級))) > 幅) 級 -= 1;
+  while (
+    級 > 下限 &&
+    Math.max(...名前たち.map((n) => textWidth(n, 級, 0, textMetrics))) > 幅
+  ) {
+    級 -= 1;
+  }
   return 級;
 }