@cardenelabs/cdl 0.121.0 → 0.123.0

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;
 

package/src/kinds/shape-basement.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react";
-import type { LaidNode } from "../types";
+import type { CdlTextMetrics, LaidNode } from "../types";
 import {
   ASCENT,
   DESCENT,
@@ -43,6 +43,7 @@ import {
 type ShapeProps = {
   node: LaidNode;
   active: boolean;
+  textMetrics?: CdlTextMetrics;
 };
 
 // basement は shape 全体が body なので、 純白ではなく accent 青系薄 tint (#dde8f0) で
@@ -81,34 +82,44 @@ function labelBlock(
   pos: { x: number; y: number },
   size: number,
   band: LabelBand,
+  textMetrics: CdlTextMetrics = "proportional",
 ): { k: number; x: number; baseline: number; 上端: number; 下端: number } {
   const 上 = node.eyebrow ? size + EYEBROW_GAP + EYEBROW_SIZE * ASCENT : size * ASCENT;
   const 下 = node.subtitle ? size + SUB_GAP + SUB_SIZE * DESCENT : size * DESCENT;
   // 3 行のうち一番広い行が横の制約になる
   const 幅 = Math.max(
-    textWidth(node.title ?? "", size),
-    node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE, EYEBROW_TRACKING) : 0,
-    node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0,
+    textWidth(node.title ?? "", size, 0, textMetrics),
+    node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE, EYEBROW_TRACKING, textMetrics) : 0,
+    node.subtitle ? textWidth(node.subtitle, SUB_SIZE, 0, textMetrics) : 0,
   );
   // 横で縮める倍率を読める下限で止める (#953)。 切って収まらない幅では下限を当てない。
   //
   // **題が一番広い行のときだけ当てる** (#957)。 塊の倍率は一番広い行で決まるので、
   // 補いの行が幅を決めている箱で下限を当てると、題を 0.6px 上げるために補いの行から
   // 字を落とすことになる = 払うのと得るのが別の行になる
-  const 題幅 = textWidth(node.title ?? "", size);
+  const 題幅 = textWidth(node.title ?? "", size, 0, textMetrics);
+  const 測る = (t: string, s: number, ls: number): number => textWidth(t, s, ls, textMetrics);
   const 下限 =
-    題幅 >= 幅 ? 切って収まる下限(node.title ?? "", size, 0, band.w, textWidth) : 0;
+    題幅 >= 幅 ? 切って収まる下限(node.title ?? "", size, 0, band.w, 測る) : 0;
   const { k, x, y: baseline } = fitLabel(band, { 上, 下, 幅 }, pos, 下限);
   return { k, x, baseline, 上端: baseline - 上 * k, 下端: baseline + 下 * k };
 }
 
-function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number, band: LabelBand) {
-  const 塊 = labelBlock(node, pos, size, band);
+function commonLabel(
+  node: LaidNode,
+  pos: { x: number; y: number },
+  size: number,
+  band: LabelBand,
+  textMetrics: CdlTextMetrics = "proportional",
+) {
+  const 塊 = labelBlock(node, pos, size, band, textMetrics);
   const k = 塊.k;
   const x = 塊.x;
   // 下限で止めた行は帯に入らないので、入るところまで切って `…` を付ける (#953)
   const 切る = (t: string, 大きさ: number, 字間 = 0) =>
-    帯で切る(t, 大きさ * k, band.w, (u, f) => textWidth(u, f, 字間 * k));
+    帯で切る(t, 大きさ * k, band.w, (u, f) =>
+      textWidth(u, f, 字間 * k, textMetrics),
+    );
   return (
     <>
       {node.eyebrow && (
@@ -171,7 +182,7 @@ const RULE_PAD_RATIO = 0.14;
 const RULE_SHRINK_RATIO = 0.055;
 
 /** shape-file = 縦長 A4 型 file (right-top folded corner、 body に fold 内側 corner 統合) + drop shadow + text lines */
-export function ShapeFileNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeFileNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const 帯 = bodyBand(node, { 影ry: SHADOW_RY });
   const 紙h = 帯.h;
   const 紙w = Math.min(帯.w, 紙h * 0.72);
@@ -197,7 +208,7 @@ export function ShapeFileNode({ node, active }: ShapeProps): JSX.Element {
   const 名前帯 = { x, y, w: 紙w, h: 紙h };
   const 名前位置 = { x: 帯.cx, y: node.cy + node.h * 0.12 };
   // 名前の塊を先に測る。 3 本目が紙頭から固定 90 の位置に出ていたので、 塊に食い込む線は引かない
-  const 名前 = labelBlock(node, 名前位置, 16, 名前帯);
+  const 名前 = labelBlock(node, 名前位置, 16, 名前帯, textMetrics);
   const 間隔 = Math.min(RULE_GAP_MAX, 紙h * RULE_GAP_RATIO);
   const 線余白 = Math.min(RULE_PAD_MAX, 紙w * RULE_PAD_RATIO);
   const textLines = [0, 1, 2]
@@ -231,7 +242,7 @@ export function ShapeFileNode({ node, active }: ShapeProps): JSX.Element {
         );
       })}
       {/* label = 中央 (text lines の下、 title 大、 subtitle 小、 A4 下半分) */}
-      {commonLabel(node, 名前位置, 16, 名前帯)}
+      {commonLabel(node, 名前位置, 16, 名前帯, textMetrics)}
     </g>
   );
 }
@@ -241,7 +252,7 @@ const TAB_H_MAX = 22;
 const TAB_H_RATIO = 0.3;
 
 /** shape-folder = 左上 tab を body 左端に完全張り付け (tab 左 0、 tab 右 35%、 slope 42%) + drop shadow */
-export function ShapeFolderNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeFolderNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const 帯 = bodyBand(node, { 影ry: SHADOW_RY });
   const x = 帯.x;
   const y = 帯.y;
@@ -266,7 +277,7 @@ export function ShapeFolderNode({ node, active }: ShapeProps): JSX.Element {
   const 境界y = y + tabH + Math.min(8, (帯.h - tabH) * 0.2);
   const 端 = Math.min(6, 帯.w * 0.1);
   const 名前位置 = { x: 帯.cx, y: node.cy + 18 };
-  const 名前 = labelBlock(node, 名前位置, 16, 帯);
+  const 名前 = labelBlock(node, 名前位置, 16, 帯, textMetrics);
   return (
     <g>
       {dropShadow(帯.cx, 帯.底, 帯.w * 0.44)}
@@ -284,7 +295,7 @@ export function ShapeFolderNode({ node, active }: ShapeProps): JSX.Element {
           opacity={0.35}
         />
       )}
-      {commonLabel(node, 名前位置, 16, 帯)}
+      {commonLabel(node, 名前位置, 16, 帯, textMetrics)}
     </g>
   );
 }
@@ -297,7 +308,7 @@ const CLOUD_VB_H = 512;
 const CLOUD_W_RATIO = 0.9;
 
 /** shape-cloud = Font Awesome cloud icon path を scale + translate + drop shadow */
-export function ShapeCloudNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeCloudNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const 帯 = bodyBand(node, { 影ry: SHADOW_RY });
   const frame = commonFrame(active);
   // Font Awesome "cloud" icon の path (viewBox 640 x 512) を帯に scale + center。
@@ -328,7 +339,7 @@ export function ShapeCloudNode({ node, active }: ShapeProps): JSX.Element {
         />
       </g>
       {/* label = cloud 内側の中央 */}
-      {commonLabel(node, { x: 帯.cx, y: node.cy + node.h * 0.05 }, 16, 帯)}
+      {commonLabel(node, { x: 帯.cx, y: node.cy + node.h * 0.05 }, 16, 帯, textMetrics)}
     </g>
   );
 }
@@ -341,7 +352,7 @@ const CYLINDER_RY_RATIO = 0.1;
 const CYLINDER_DISKS = [0.3, 0.55, 0.8];
 
 /** shape-cylinder = 3D 円柱 (上面 ellipse + 側面 + 底面 arc 下半分のみ) + drop shadow */
-export function ShapeCylinderNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeCylinderNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const 帯 = bodyBand(node, { 影ry: CYLINDER_SHADOW_RY });
   const x = 帯.x;
   const y = 帯.y;
@@ -361,7 +372,7 @@ export function ShapeCylinderNode({ node, active }: ShapeProps): JSX.Element {
   const 蓋底 = y + ry * 2;
   const 名前位置 = { x: 帯.cx, y: node.cy + 6 };
   const 名前帯 = { x: 帯.x, y: 蓋底, w: 帯.w, h: Math.max(0, 帯.底 - 蓋底) };
-  const 名前 = labelBlock(node, 名前位置, 15, 名前帯);
+  const 名前 = labelBlock(node, 名前位置, 15, 名前帯, textMetrics);
   return (
     <g>
       {dropShadow(帯.cx, 帯.底, rx * 0.85, CYLINDER_SHADOW_RY)}
@@ -386,7 +397,7 @@ export function ShapeCylinderNode({ node, active }: ShapeProps): JSX.Element {
             opacity={0.3}
           />
         ))}
-      {commonLabel(node, 名前位置, 15, 名前帯)}
+      {commonLabel(node, 名前位置, 15, 名前帯, textMetrics)}
     </g>
   );
 }
@@ -395,7 +406,7 @@ export function ShapeCylinderNode({ node, active }: ShapeProps): JSX.Element {
 const HEX_DOT_R = 2.5;
 
 /** shape-hexagon = 六角形 (component / service 表現、 accent 頂点) + drop shadow */
-export function ShapeHexagonNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeHexagonNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   // 点は多角形の外へ出るので、 枠より点の方が広ければ点に合わせて帯を縮める
   const 帯 = bodyBand(node, { 影ry: SHADOW_RY, 外: Math.max(HEX_DOT_R, FRAME_HALF) });
   const cx = 帯.cx;
@@ -426,13 +437,14 @@ export function ShapeHexagonNode({ node, active }: ShapeProps): JSX.Element {
         { x: cx, y: node.cy + 6 },
         16,
         { x: 帯.x + cut, y: 帯.y, w: Math.max(0, 帯.w - cut * 2), h: 帯.h },
+        textMetrics,
       )}
     </g>
   );
 }
 
 /** shape-diamond = ひし形 (decision / 判定) + drop shadow + inner border */
-export function ShapeDiamondNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeDiamondNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const 帯 = bodyBand(node, { 影ry: SHADOW_RY });
   const cx = 帯.cx;
   const cy = 帯.cy;
@@ -475,6 +487,7 @@ export function ShapeDiamondNode({ node, active }: ShapeProps): JSX.Element {
           w: (帯.w * innerScale) / 2,
           h: (帯.h * innerScale) / 2,
         },
+        textMetrics,
       )}
     </g>
   );
@@ -485,7 +498,7 @@ const STACK_OFFSET_MAX = 12;
 const STACK_OFFSET_RATIO = 0.15;
 
 /** shape-stack = 重ね rect 3 枚 (layer / history) + drop shadow */
-export function ShapeStackNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeStackNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const 帯 = bodyBand(node, { 影ry: SHADOW_RY });
   const x = 帯.x;
   const y = 帯.y;
@@ -539,6 +552,7 @@ export function ShapeStackNode({ node, active }: ShapeProps): JSX.Element {
         { x: 手前cx, y: node.cy + ずれ + 6 },
         15,
         { x, y: y + ずれ * 2, w: cardW, h: cardH },
+        textMetrics,
       )}
     </g>
   );
@@ -564,21 +578,32 @@ const PERSON_SHADOW_RX = 55;
  * 動かさず **字の大きさだけ横に入る倍率まで下げる** = 各行の張り出しは縮むだけなので、
  * `labelPlan` が保証した縦の収まりは崩れない。
  */
-function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnType<typeof labelPlan>) {
+function planLabel(
+  node: LaidNode,
+  cx: number,
+  幅上限: number,
+  plan: ReturnType<typeof labelPlan>,
+  textMetrics: CdlTextMetrics = "proportional",
+) {
   const 幅 = Math.max(
-    textWidth(node.title ?? "", plan.名前.size),
-    node.eyebrow && plan.肩書 ? textWidth(node.eyebrow, plan.肩書.size, EYEBROW_TRACKING) : 0,
-    node.subtitle && plan.説明 ? textWidth(node.subtitle, plan.説明.size) : 0,
+    textWidth(node.title ?? "", plan.名前.size, 0, textMetrics),
+    node.eyebrow && plan.肩書
+      ? textWidth(node.eyebrow, plan.肩書.size, EYEBROW_TRACKING, textMetrics)
+      : 0,
+    node.subtitle && plan.説明 ? textWidth(node.subtitle, plan.説明.size, 0, textMetrics) : 0,
   );
   // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
   // 題が一番広い行のときだけ当てる (#957、 上の `labelBlock` と同じ理由)
-  const 題幅 = textWidth(node.title ?? "", plan.名前.size);
+  const 題幅 = textWidth(node.title ?? "", plan.名前.size, 0, textMetrics);
+  const 測る = (t: string, s: number, ls: number): number => textWidth(t, s, ls, textMetrics);
   const 下限 =
-    題幅 >= 幅 ? 切って収まる下限(node.title ?? "", plan.名前.size, 0, 幅上限, textWidth) : 0;
+    題幅 >= 幅 ? 切って収まる下限(node.title ?? "", plan.名前.size, 0, 幅上限, 測る) : 0;
   const k = 幅 > 0 && 幅上限 > 0 ? Math.min(1, Math.max(幅上限 / 幅, 下限)) : 1;
   // 下限で止めた行は箱に入らないので、入るところまで切って `…` を付ける (#953)
   const 切る = (t: string, 大きさ: number, 字間 = 0) =>
-    帯で切る(t, 大きさ * k, 幅上限, (u, f) => textWidth(u, f, 字間 * k));
+    帯で切る(t, 大きさ * k, 幅上限, (u, f) =>
+      textWidth(u, f, 字間 * k, textMetrics),
+    );
   return (
     <>
       {node.eyebrow && plan.肩書 && (
@@ -628,7 +653,7 @@ function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnTy
  * `shapeRegion` で取り、 入らなければ `fitArt` が比を保ったまま縮める。 名前は箱の下端から
  * 積み上げる (`labelPlan`) = 固定位置に置くと箱の下 176.2 まで伸びていた。
  */
-export function ShapePersonNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapePersonNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const r = shapeRegion(node);
   const cx = r.cx;
   const strokeColor = active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)";
@@ -698,7 +723,7 @@ export function ShapePersonNode({ node, active }: ShapeProps): JSX.Element {
           />
         </g>,
       )}
-      {planLabel(node, r.cx, Math.max(0, node.w), r.label)}
+      {planLabel(node, r.cx, Math.max(0, node.w), r.label, textMetrics)}
     </g>
   );
 }