@cardenelabs/cdl 0.122.0 → 0.124.0

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 級;
 }

package/src/kinds/chart-stacked-bar.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, type ResolvedChartDatum } from "../render/payload-binding";
 import { textWidth } from "./text-width";
@@ -51,6 +51,7 @@ export function ChartStackedBarNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -59,6 +60,7 @@ export function ChartStackedBarNode({
   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;
@@ -72,7 +74,8 @@ export function ChartStackedBarNode({
   const 時点の級 = 13;
   /** 時点の名前を置く左の幅 */
   const 時点の幅 =
-    Math.max(0, ...帯たち.map((b) => textWidth(b.名前, 時点の級))) + (帯たち.length > 1 ? 16 : 0);
+    Math.max(0, ...帯たち.map((b) => textWidth(b.名前, 時点の級, 0, textMetrics))) +
+    (帯たち.length > 1 ? 16 : 0);
   const 帯の左 = PAD + 時点の幅;
   const 帯の幅 = Math.max(40, node.w - 帯の左 - PAD);
   const 帯の高さ = 44;
@@ -196,7 +199,7 @@ export function ChartStackedBarNode({
       })}
 
       {/* 一覧。 区画に字が入らなかった件もここで名前と色が引ける */}
-      {一覧の並び(data, 帯の左, node.w - PAD, 名前の級).map(({ d, idx, x, 行 }) => {
+      {一覧の並び(data, 帯の左, node.w - PAD, 名前の級, textMetrics).map(({ d, idx, x, 行 }) => {
         const y =
           上端 +
           帯たち.length * (帯の高さ + 帯の間) -
@@ -284,12 +287,13 @@ export function 一覧の並び(
   左: number,
   右端: number,
   級: number,
+  textMetrics: CdlTextMetrics = "proportional",
 ): Array<{ d: ResolvedChartDatum; idx: number; x: number; 行: number }> {
   const out: Array<{ d: ResolvedChartDatum; idx: number; x: number; 行: number }> = [];
   let x = 左;
   let 行 = 0;
   data.forEach((d, idx) => {
-    const 幅 = 印から名前まで + textWidth(d.label ?? "", 級);
+    const 幅 = 印から名前まで + textWidth(d.label ?? "", 級, 0, textMetrics);
     // 行の先頭では折り返さない = 折り返しても同じ位置に戻るだけで、空の行が増える
     if (x > 左 && x + 幅 > 右端) {
       行 += 1;

package/src/kinds/chart-stat.tsx

@@ -1,5 +1,5 @@
 import { 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";
@@ -35,10 +35,12 @@ export function ChartStatNode({
   node,
   active,
   stateValues = {},
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -87,7 +89,13 @@ export function ChartStatNode({
         const 色 = 印の色(d.tone, idx);
         const 数値 = 実値表記(d.value);
         // 数値は区画に収まるまで小さくする。 収まらないまま描くと隣の区画へはみ出す
-        const 数値の級 = 収める級(数値, 枠.w - 区画.余白 * 2, 区画.数値の級, 区画.名前の級 + 1);
+        const 数値の級 = 収める級(
+          数値,
+          枠.w - 区画.余白 * 2,
+          区画.数値の級,
+          区画.名前の級 + 1,
+          textMetrics,
+        );
         return (
           <g
             key={`stat-${idx}`}
@@ -147,6 +155,7 @@ export function ChartStatNode({
                   枠.w - 区画.余白 * 2,
                   区画.前の級,
                   8,
+                  textMetrics,
                 )}
                 textAnchor="middle"
                 fill="var(--cdl-text-dim, #5a6270)"
@@ -291,9 +300,15 @@ function 区画の割付(
  * 中身 (数値が主役) が崩れるため。 下限でも入らない場合は入らないまま描く = 勝手に字を
  * 落とすと数値が別の値に読める。
  */
-export function 収める級(字: string, 使える幅: number, 初期: number, 下限: number): number {
+export function 収める級(
+  字: string,
+  使える幅: number,
+  初期: number,
+  下限: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
   let 級 = 初期;
-  while (級 > 下限 && textWidth(字, 級) > 使える幅) 級 -= 1;
+  while (級 > 下限 && textWidth(字, 級, 0, textMetrics) > 使える幅) 級 -= 1;
   return 級;
 }
 

package/src/kinds/chart-waffle.tsx

@@ -1,5 +1,5 @@
 import { 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";
@@ -84,6 +84,7 @@ export function ChartWaffleNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -92,6 +93,7 @@ export function ChartWaffleNode({
   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;
@@ -116,7 +118,10 @@ export function ChartWaffleNode({
     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/funnel.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 } from "../render/tone";
 import { resolveFunnelData } from "../render/payload-binding";
 import { 収める倍率 } from "../layout/text-width";
@@ -18,6 +18,7 @@ export function FunnelNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -26,6 +27,7 @@ export function FunnelNode({
   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;
@@ -109,7 +111,12 @@ export function FunnelNode({
     const 補足の枠字 = 補足の字 * 縦倍;
     const 収まる幅 = Math.max(0, bottomW - 16);
     const 補足の実字 =
-      補足の枠字 * 収める倍率(補足, { fontSize: 補足の枠字, fontWeight: 500 }, 収まる幅);
+      補足の枠字 *
+      収める倍率(
+        補足,
+        { fontSize: 補足の枠字, fontWeight: 500, textMetrics },
+        収まる幅,
+      );
     // 2 行の塊を段の中央に積む。 縦の位置は枠の字 (縮める前) で決める = 幅で縮めた分だけ
     // 行が上下に動くと、段ごとに行の高さが揃わない
     const 塊の上 = y + stageH / 2 - (名前の実字 * 1.2 + 補足の枠字 * 1.25) / 2;

package/src/kinds/generic.tsx

@@ -1,6 +1,6 @@
 import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
-import type { LaidNode, NodeKind } from "../types";
+import type { CdlTextMetrics, LaidNode, NodeKind } from "../types";
 import { toneColor } from "./node-tone";
 import { interpolate } from "../render/utils";
 import type { 値の名前の表 } from "../input-option";
@@ -237,6 +237,7 @@ export function GenericNode({
   value,
   stateValues,
   値の名前,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -244,6 +245,7 @@ export function GenericNode({
   stateValues: Record<string, string>;
   /** 入力欄の値ごとの名前 (#855)。 値と行の差し込みに使う */
   値の名前?: 値の名前の表;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const base = STYLES[node.kind] ?? FALLBACK;
   // `tone` 指定があれば kind の既定色を置き換える。 色を決める式は `node-tone.ts` に集約。
@@ -458,7 +460,8 @@ export function GenericNode({
         // 左列は比例の書体で描く (`font-family` を指定していないので継承する)。 字数に一定を
         // 掛ける形では実物に届かず、 右列が左列の字に重なる (`#425`)。 字ごとの幅で見積もる。
         const leftMaxWidth = splits.reduce(
-          (m, s) => Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)),
+          (m, s) =>
+            Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false, textMetrics)),
           0,
         );
         const rightColX = ROW_PAD_X_PX + leftMaxWidth + ROW_COL_GAP_PX;

package/src/kinds/mind-map.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react";
-import { 使える幅, 幅に収める, 箱に積む, type 積む行 } from "./box-lines";
+import { 使える幅, 幅に収める, 箱に積む, 箱の字を測る, type 積む行 } from "./box-lines";
 /*
   名前を描く幅の見積り。 **切る側と同じ物差しを使う** (#966)。
 
@@ -8,7 +8,7 @@ import { 使える幅, 幅に収める, 箱に積む, type 積む行 } from "./b
   置いたつもりの名前が描く側で切られた (実測 = `Features` が `Featur…` になった)。
 */
 import { textWidth as 名前の幅 } from "./text-width";
-import type { LaidNode, Tone, MindBranchNode, MindBranchPayload } from "../types";
+import type { CdlTextMetrics, LaidNode, Tone, MindBranchNode, MindBranchPayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveMindData } from "../render/payload-binding";
 import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
@@ -93,6 +93,7 @@ const MIND_PAD = 40;
 export function 放射の中身(
   node: LaidNode,
   stateValues: Record<string, string> = {},
+  textMetrics: CdlTextMetrics = "proportional",
 ): { nodes: LayoutNode[]; edges: LayoutEdge[] } | undefined {
   // 名前は状態を読める (#467)。 中心と枝の両方を解決層に通す
   const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : undefined;
@@ -103,6 +104,7 @@ export function 放射の中身(
     node.h / 2,
     node.w - MIND_PAD * 2,
     node.h - MIND_PAD * 2,
+    textMetrics,
   );
 }
 
@@ -124,6 +126,7 @@ export function MindMapNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -132,11 +135,13 @@ export function MindMapNode({
   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;
-  const layout = 放射の中身(node, stateValues);
+  const layout = 放射の中身(node, stateValues, textMetrics);
   if (!layout) return <g transform={`translate(${x0} ${y0})`} />;
+  const 測る = 箱の字を測る(textMetrics);
 
   /**
    * 枝がどこまで伸びたか (0..1、 cdl#520)。 描く指定が無ければ常に 1 = 全部出ている。
@@ -208,10 +213,17 @@ export function MindMapNode({
         const 文字の寄せ = 枠なし ? (外へ ? "start" : "end") : "middle";
         const 描画域の端 = 外へ ? node.w - MIND_PAD : MIND_PAD;
         const 使える = 枠なし ? Math.abs(描画域の端 - 文字のx) : 使える幅(n.w);
-        const 収めた名前 = 補足あり ? undefined : 幅に収める(名前.text, 名前.fontSize, 使える);
+        const 収めた名前 = 補足あり
+          ? undefined
+          : 幅に収める(名前.text, 名前.fontSize, 使える, 測る);
         // 積む側は箱の幅から余白を引いて使える幅を出すので、枠が無い時は同じ幅になる
         // 箱の幅を渡す。 助っ人の引数を増やすと木の側にも要らない欄が付く
-        const 行 = 箱に積む(材料, 枠なし ? 使える + (n.w - 使える幅(n.w)) : n.w, n.h);
+        const 行 = 箱に積む(
+          材料,
+          枠なし ? 使える + (n.w - 使える幅(n.w)) : n.w,
+          n.h,
+          測る,
+        );
         const 文字の色 = n.isRoot
           ? "var(--cdl-text-on-tone, #ffffff)"
           : "var(--cdl-chip-text, #1a1f2a)";
@@ -309,11 +321,14 @@ type LayoutEdge = {
  * 名前が描画域に入らない時、描く側は字を縮めてから切る。 ここで出すのは縮める前の幅 =
  * 実際に描く幅の上限になる。 縮むのは名前が溢れる図だけで、その時も箱の幅で測るより近い。
  */
-export function 描く横の端(n: LayoutNode): [number, number] {
+export function 描く横の端(
+  n: LayoutNode,
+  textMetrics: CdlTextMetrics = "proportional",
+): [number, number] {
   if (n.isRoot || !n.isLeaf) return [n.x - n.w / 2, n.x + n.w / 2];
   const 起点 = n.x + (n.side === "right" ? -n.w / 2 : n.w / 2);
   const 名前 = 放射の行(n)[0]!;
-  const 幅 = 名前の幅(名前.text, 名前.fontSize);
+  const 幅 = 名前の幅(名前.text, 名前.fontSize, 0, textMetrics);
   return n.side === "right" ? [起点, 起点 + 幅] : [起点 - 幅, 起点];
 }
 
@@ -323,6 +338,7 @@ export function computeMindMapLayout(
   cy: number,
   canvasW: number,
   canvasH: number,
+  textMetrics: CdlTextMetrics = "proportional",
 ): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
   const nodes: LayoutNode[] = [];
   const edges: LayoutEdge[] = [];
@@ -422,7 +438,7 @@ export function computeMindMapLayout(
   /** 枝の名前を描く幅。 字の級は `放射の行` から取る (#538、 書き写すと 2 経路で別の値になる) */
   const 枝の名前の幅 = (title: string): number => {
     const 名前 = 放射の行({ title, isRoot: false })[0]!;
-    return 名前の幅(名前.text, 名前.fontSize);
+    return 名前の幅(名前.text, 名前.fontSize, 0, textMetrics);
   };
 
   /** 片側の横の割付。 枝の離れと、その側の sub box の幅と、深さごとの追い出し量を持つ */
@@ -655,7 +671,7 @@ export function computeMindMapLayout(
       // 何もはみ出していない図まで縮む (実測 = 枝 1 本の図が 0.83 倍になり、
       // 箱の高さが 30.8 → 25.6 に縮んで補足の行が落ちた)。
       // すぐ下の寄せも同じ `描く横の端` で測るので、縮めると寄せの基準も揃う。
-      const [左, 右] = 描く横の端(n);
+      const [左, 右] = 描く横の端(n, textMetrics);
       maxExtentX = Math.max(maxExtentX, Math.abs(左 - cx), Math.abs(右 - cx));
       maxExtentY = Math.max(maxExtentY, Math.abs(n.y - cy) + n.h / 2);
     }
@@ -683,7 +699,7 @@ export function computeMindMapLayout(
     let 左端 = Number.POSITIVE_INFINITY;
     let 右端 = Number.NEGATIVE_INFINITY;
     for (const n of nodes) {
-      const [l, r] = 描く横の端(n);
+      const [l, r] = 描く横の端(n, textMetrics);
       左端 = Math.min(左端, l);
       右端 = Math.max(右端, r);
     }

package/src/kinds/quadrant.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react";
-import type { LaidNode } from "../types";
+import type { CdlTextMetrics, LaidNode } from "../types";
 import { TONE, toneFill } from "../render/tone";
 import { measureTextWidth, 収める倍率 } from "../layout/text-width";
 import { resolveQuadrantData } from "../render/payload-binding";
@@ -23,10 +23,12 @@ export function QuadrantNode({
   node,
   active,
   stateValues = {},
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -56,7 +58,11 @@ export function QuadrantNode({
   const axisLabelPad = (text: string): number =>
     Math.max(
       PAD_MIN,
-      measureTextWidth(`← ${text}`, { fontSize: AXIS_LABEL_FONT, fontWeight: 700 }) + 12,
+      measureTextWidth(`← ${text}`, {
+        fontSize: AXIS_LABEL_FONT,
+        fontWeight: 700,
+        textMetrics,
+      }) + 12,
     );
   // 名前が長くても図そのものは残す。 上限を置かないと、 名前が箱の幅を超えた時に
   // 描く場所が無くなる (実測 = 幅 640 に 50 文字の名前を左右へ置くと canvasW が -143 になった)。
@@ -294,7 +300,11 @@ export function QuadrantNode({
               ITEM_MIN_W,
               Math.max(
                 ...行ら.map((r) =>
-                  measureTextWidth(r.text, { fontSize: r.size, fontWeight: r.weight }),
+                  measureTextWidth(r.text, {
+                    fontSize: r.size,
+                    fontWeight: r.weight,
+                    textMetrics,
+                  }),
                 ),
               ) +
                 ITEM_PAD_X * 2,
@@ -333,7 +343,7 @@ export function QuadrantNode({
                 SUB_FONT *
                 収める倍率(
                   補足,
-                  { fontSize: SUB_FONT, fontWeight: 500 },
+                  { fontSize: SUB_FONT, fontWeight: 500, textMetrics },
                   Math.max(0, 幅 - ITEM_PAD_X * 2),
                 );
               return (

package/src/kinds/row-align.ts

@@ -1,3 +1,4 @@
+import type { CdlTextMetrics } from "../types";
 import { textWidth } from "./text-width";
 
 /**
@@ -114,8 +115,15 @@ export function splitRow(row: string): { left: string; right: string; split: boo
  * 等幅と比例を 1 つの関数で分けるのは、 同じ `generic` の行でも左が比例 (18) / 右が等幅 (21)
  * だから。 呼ぶ側が列ごとに選ぶ。
  */
-export function rowColumnWidth(text: string, size: number, mono: boolean): number {
-  return mono ? displayWidth(text) * size * MONO_ADVANCE_RATIO : textWidth(text, size);
+export function rowColumnWidth(
+  text: string,
+  size: number,
+  mono: boolean,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
+  return mono
+    ? displayWidth(text) * size * MONO_ADVANCE_RATIO
+    : textWidth(text, size, 0, textMetrics);
 }
 
 /**
@@ -179,7 +187,11 @@ export function 桁で省く(text: string, 上限: number): string {
  * 上に丸めるのは、 送り幅が小数のため幅が小数になり、 図の座標が読みにくくなるから。 下に
  * 丸めると 1 未満だけ足りない箱ができる。
  */
-export function requiredRowsWidth(rows: string[] | undefined, kind?: string): number {
+export function requiredRowsWidth(
+  rows: string[] | undefined,
+  kind?: string,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
   if (!rows || rows.length === 0) return 0;
   const splits = rows.map(splitRow);
   const 一番広い = (取る: (s: { left: string; right: string }) => number) =>
@@ -188,17 +200,17 @@ export function requiredRowsWidth(rows: string[] | undefined, kind?: string): nu
   /** `storage` = 左右とも等幅の 26。 列の間に縦線を引くため間隔が広い。 */
   const storage =
     ROW_PAD_X_PX +
-    一番広い((s) => rowColumnWidth(s.left, 26, true)) +
+    一番広い((s) => rowColumnWidth(s.left, 26, true, textMetrics)) +
     STORAGE_COL_GAP_PX +
-    一番広い((s) => rowColumnWidth(s.right, 26, true)) +
+    一番広い((s) => rowColumnWidth(s.right, 26, true, textMetrics)) +
     ROW_RIGHT_PAD_PX;
 
   /** `generic` = 左が比例の 18、 右が等幅の 21。 */
   const generic =
     ROW_PAD_X_PX +
-    一番広い((s) => rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)) +
+    一番広い((s) => rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false, textMetrics)) +
     ROW_COL_GAP_PX +
-    一番広い((s) => rowColumnWidth(s.right, GENERIC_ROW_RIGHT_SIZE_PX, true)) +
+    一番広い((s) => rowColumnWidth(s.right, GENERIC_ROW_RIGHT_SIZE_PX, true, textMetrics)) +
     ROW_RIGHT_PAD_PX;
 
   // **種別が分からない時は広い方を返す**。 どちらで描かれるか決められないので、 狭い方を返すと

package/src/kinds/sequence-board-metrics.ts

@@ -8,6 +8,7 @@
  * React を引き込まない。
  */
 import { textWidth } from "./text-width";
+import type { CdlTextMetrics } from "../types";
 
 /** 画布の縁 */
 export const SEQ_EDGE = 16;
@@ -100,12 +101,21 @@ export type SequenceBoardMetrics = {
  * 幅は **語の桁 + 列 × 面の数**。 語を線の脇ではなく左の桁に置くので、線の長さが語の長さに
  * 引きずられない = 面の数だけで横幅が決まる。
  */
-export function sequenceBoardMetrics(data: SequenceBoardData): SequenceBoardMetrics {
+export function sequenceBoardMetrics(
+  data: SequenceBoardData,
+  textMetrics: CdlTextMetrics = "proportional",
+): SequenceBoardMetrics {
   const 名幅 = data.actors.map((a) =>
-    Math.max(textWidth(a.name, SEQ_NAME), a.subtitle ? textWidth(a.subtitle, SEQ_SUB) : 0),
+    Math.max(
+      textWidth(a.name, SEQ_NAME, 0, textMetrics),
+      a.subtitle ? textWidth(a.subtitle, SEQ_SUB, 0, textMetrics) : 0,
+    ),
   );
   const colW = g4(Math.max(SEQ_COL_MIN, Math.max(0, ...名幅) + SEQ_COL_PAD));
-  const 語幅 = Math.max(0, ...data.messages.map((m) => textWidth(m.label, SEQ_LABEL)));
+  const 語幅 = Math.max(
+    0,
+    ...data.messages.map((m) => textWidth(m.label, SEQ_LABEL, 0, textMetrics)),
+  );
   const gutter = g4(SEQ_EDGE + SEQ_GUTTER_PAD + 語幅 + SEQ_GUTTER_GAP);
   const headY = SEQ_EDGE + SEQ_HEAD;
   const rowY = (i: number): number => headY + SEQ_ROW_PAD + i * SEQ_ROW;

package/src/kinds/sequence-board.tsx

@@ -1,6 +1,6 @@
 import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
-import type { LaidNode } from "../types";
+import type { CdlTextMetrics, LaidNode } from "../types";
 import { interpolate } from "../render/utils";
 import {
   SEQ_BAND_PAD,
@@ -45,13 +45,15 @@ import {
 export function SequenceBoardNode({
   node,
   stateValues,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   stateValues?: Record<string, string>;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const data: SequenceBoardData | undefined = node.sequenceData;
   if (!data) return <g data-cdl-role="sequence-board" />;
-  const m = sequenceBoardMetrics(data);
+  const m = sequenceBoardMetrics(data, textMetrics);
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;