@cardenelabs/cdl 0.122.0 → 0.123.0

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

package/src/kinds/shape-blockchain.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react";
-import type { LaidNode } from "../types";
+import type { CdlTextMetrics, LaidNode } from "../types";
 import {
   fitArt,
   labelPlan,
@@ -27,6 +27,7 @@ import { 字引きを作る, type CdlLang, type CdlTextKey } from "../lang";
 type ShapeProps = {
   node: LaidNode;
   active: boolean;
+  textMetrics?: CdlTextMetrics;
   /** 描画側の固定の字の言語 (#847)。 渡さない呼び方は英語で描く */
   lang?: CdlLang;
 };
@@ -136,7 +137,12 @@ function blockchainNodeExtent(strokeWidth: number): ArtExtent {
 /**
  * 名前の塊を描く。 位置と大きさは `labelPlan` が決める (箱の下端から積み上げる、 #433)。
  */
-function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
+function bottomLabel(
+  node: LaidNode,
+  cx: number,
+  plan: ReturnType<typeof labelPlan>,
+  textMetrics: CdlTextMetrics = "proportional",
+) {
   // 縮めは読める下限で止める (#953)。 止めた行は箱に入らないので、入るところまで切る。
   // 下限を当てるのは題の行だけ (#957) = 補いの行に当てると、収まっている行を大きくしてから
   // 切ることになる
@@ -144,7 +150,8 @@ function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPl
     // **縮める時と切る時で同じ測り方を使う** (#959)。 絵の中の字は等幅の字送りと字形の
     // 大きい方を採る (`絵の中の字の幅`) ので、`幅の倍率` の `textWidth` で倍率を出すと
     // 「収まる」 と言った行を切る側が「はみ出す」 と判定する (実測 = 幅 140 の箱で 9 種)
-    const 測る = (u: string, f: number, ls: number) => 字の幅(u, f) + ls * [...u].length;
+    const 測る = (u: string, f: number, ls: number) =>
+      字の幅(u, f, textMetrics) + ls * [...u].length;
     const 素の幅 = 測る(t, 大きさ, 字間);
     const 収まる = 素の幅 > node.w && node.w > 0 ? node.w / 素の幅 : 1;
     const 下限 = 題か ? 切って収まる下限(t, 大きさ, 字間, node.w, 測る) : 0;
@@ -205,7 +212,12 @@ function EthereumDiamond({ cx, cy, h, colors }: { cx: number; cy: number; h: num
 }
 
 /** shape-smart-contract = 契約書 (前バージョン: document + 契約書テキスト + function 表示 + 底に回転 gear) */
-export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeSmartContractNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -254,7 +266,7 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
     },
   ];
   const art = (倍率: number): JSX.Element => {
-    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら, textMetrics);
     return (
     <g>
       <path data-cdl-role="node-body" d={path} {...frame} strokeLinejoin="round" />
@@ -284,7 +296,7 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
   return (
     <g>
       {fitArt(r, smartContractExtent(frame.strokeWidth), art)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -300,7 +312,11 @@ export function ShapeSmartContractNode({ node, active, lang }: ShapeProps): JSX.
  * どちらの書体で描かれても実物以上に出る側へ倒す = 下回ると「収まっていない物を収まっていると
  * 判定」 する向きに外れる (`row-align.ts` の `rowColumnWidth` と同じ考え方)。
  */
-const 字の幅 = (text: string, size: number): number => 絵の中の字の幅(text, size);
+const 字の幅 = (
+  text: string,
+  size: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): number => 絵の中の字の幅(text, size, 0, textMetrics);
 
 /**
  * 絵の中の 5 行の既定値。 書き手が渡さなかった欄はこれで描く (#469)。
@@ -353,10 +369,16 @@ const BLOCK_DEFAULT_FIELDS: readonly {
  * 位置が node の大きさに依存する。 `rowBaselineY(kind, index)` は node の大きさを受け取らない
  * ので、 この種別の位置を表せない。 開くなら述語の形から変える話になる (#469 の対象外 scope)。
  */
-export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeBlockchainBlockNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
+  const 測る字 = (text: string, size: number): number => 字の幅(text, size, textMetrics);
   const bw = BLOCK_W;
   const bh = BLOCK_H;
   const cx = r.cx;
@@ -392,9 +414,10 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
   // 上限は帯の残りの半分。 長い肩書は **切らずに字を縮める** = 分類を表す語なので、
   // 末尾を落とすと何の分類か読めなくなる (`台帳…`)。 縮めた後の幅は上限ちょうどになる
   const 肩書の上限 = (帯の残り - 肩書の隙間) / 2;
-  const 肩書の倍率 = 肩書 === "" ? 1 : 幅の倍率(肩書, 肩書の字, 0, 肩書の上限);
+  const 肩書の倍率 =
+    肩書 === "" ? 1 : 幅の倍率(肩書, 肩書の字, 0, 肩書の上限, textMetrics);
   const 肩書の指定 = 肩書の字 * 肩書の倍率;
-  const 肩書の幅 = 肩書 === "" ? 0 : 字の幅(肩書, 肩書の指定);
+  const 肩書の幅 = 肩書 === "" ? 0 : 測る字(肩書, 肩書の指定);
   const 見出しの幅 = 帯の残り - (肩書 === "" ? 0 : 肩書の幅 + 肩書の隙間);
   /*
    * 絵を **倍率を受け取ってから** 組む (#871)。 縮んだ分を字の指定で打ち消す。
@@ -422,12 +445,12 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
       {
         text: f.value,
         size: 値の字,
-        帯: { 幅: bw - 28 - 字の幅(f.label, 名の字) - 8, 高さ: 行の間隔 },
+        帯: { 幅: bw - 28 - 測る字(f.label, 名の字) - 8, 高さ: 行の間隔 },
       },
     ]),
   ];
   const art = (倍率: number): JSX.Element => {
-    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら, textMetrics);
     const 題の大きさ = 見出しの字 * 倍;
     const 肩書の大きさ = 肩書の指定 * 倍;
     const 名の大きさ = 名の字 * 倍;
@@ -440,7 +463,7 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
       {/* header bar */}
       <path d={`M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.9} stroke="none" />
       <text data-cdl-role="blockchain-block-title" data-cdl-counter-scaled="1" x={x + 14} y={y + 22} fontSize={題の大きさ} fontWeight={700} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#ffffff">
-        {幅で切る(見出し, 題の大きさ, 見出しの幅, 字の幅)}
+        {幅で切る(見出し, 題の大きさ, 見出しの幅, 測る字)}
       </text>
       {肩書 !== "" && (
         <text
@@ -466,7 +489,12 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
             {f.label}
           </text>
           <text data-cdl-role={`blockchain-block-${f.key}`} data-cdl-counter-scaled="1" x={x + bw - 14} y={y + 54 + i * 行の間隔} fontSize={値の大きさ} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
-            {幅で切る(f.value, 値の大きさ, bw - 28 - 字の幅(f.label, 名の大きさ) - 8, 字の幅)}
+            {幅で切る(
+              f.value,
+              値の大きさ,
+              bw - 28 - 測る字(f.label, 名の大きさ) - 8,
+              測る字,
+            )}
           </text>
           <line x1={x + 14} y1={y + 60 + i * 行の間隔} x2={x + bw - 14} y2={y + 60 + i * 行の間隔} stroke="var(--cdl-divider, #d4d4d8)" strokeWidth={0.5} opacity={0.5} />
         </g>
@@ -484,7 +512,11 @@ export function ShapeBlockchainBlockNode({ node, active, lang }: ShapeProps): JS
 }
 
 /** shape-blockchain = 汎用 5 block chain (シンプル hash pointer) */
-export function ShapeBlockchainNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeBlockchainNode({
+  node,
+  active,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -506,7 +538,7 @@ export function ShapeBlockchainNode({ node, active }: ShapeProps): JSX.Element {
     { text: "0x…", size: CHAIN_HASH_SIZE, 帯: { 幅: CHAIN_TEXT_W, 高さ: CHAIN_ROW_GAP } },
   ];
   const art = (倍率: number): JSX.Element => {
-    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら, textMetrics);
     return (
     <g>
       {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
@@ -559,13 +591,17 @@ export function ShapeBlockchainNode({ node, active }: ShapeProps): JSX.Element {
   return (
     <g>
       {fitArt(r, chainExtent(), art)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-bitcoin-chain = Bitcoin (橙 accent + ₿ symbol) */
-export function ShapeBitcoinChainNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeBitcoinChainNode({
+  node,
+  active,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -586,7 +622,7 @@ export function ShapeBitcoinChainNode({ node, active }: ShapeProps): JSX.Element
     { text: "#820", size: BTC_NO_SIZE, 帯: { 幅: CHAIN_TEXT_W, 高さ: 20 } },
   ];
   const art = (倍率: number): JSX.Element => {
-    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら, textMetrics);
     return (
     <g>
       {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
@@ -622,13 +658,17 @@ export function ShapeBitcoinChainNode({ node, active }: ShapeProps): JSX.Element
   return (
     <g>
       {fitArt(r, chainExtent(), art)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-ethereum-chain = Ethereum (紫 accent + 本物 Ethereum Diamond ロゴ) */
-export function ShapeEthereumChainNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeEthereumChainNode({
+  node,
+  active,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -653,7 +693,7 @@ export function ShapeEthereumChainNode({ node, active }: ShapeProps): JSX.Elemen
     { text: "#214", size: ETH_NO_SIZE, 帯: { 幅: CHAIN_TEXT_W, 高さ: 20 } },
   ];
   const art = (倍率: number): JSX.Element => {
-    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら, textMetrics);
     return (
     <g>
       {Array.from({ length: blockCount }, (_, i) => i).map((i) => {
@@ -691,13 +731,17 @@ export function ShapeEthereumChainNode({ node, active }: ShapeProps): JSX.Elemen
   return (
     <g>
       {fitArt(r, chainExtent(), art)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-blockchain-node = P2P full node (中央 hex + 6 peer 外側配置) */
-export function ShapeBlockchainNodeNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeBlockchainNodeNode({
+  node,
+  active,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -752,13 +796,18 @@ export function ShapeBlockchainNodeNode({ node, active }: ShapeProps): JSX.Eleme
   return (
     <g>
       {fitArt(r, blockchainNodeExtent(frame.strokeWidth), art)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-rpc-node = JSON-RPC provider */
-export function ShapeRpcNodeNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeRpcNodeNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -788,13 +837,13 @@ export function ShapeRpcNodeNode({ node, active, lang }: ShapeProps): JSX.Elemen
       <rect x={x + 16} y={y + bh - 24} width={(bw - 32) * 0.92} height={8} rx={4} fill="#27c93f" stroke="none">
         <animate attributeName="width" values={`${(bw - 32) * 0.86};${(bw - 32) * 0.96};${(bw - 32) * 0.86}`} dur="3s" repeatCount="indefinite" />
       </rect>
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-wallet = FC-S5 忠実移植 (二つ折り札入れ横長 + fold line 中央 + bar clasp + engraved Ξ text + コイン peek 3) */
-export function ShapeWalletNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeWalletNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -885,13 +934,13 @@ export function ShapeWalletNode({ node, active }: ShapeProps): JSX.Element {
         {/* body 上端 highlight (FC-S5 元 = M 42 86 L 258 86) */}
         <path d={`M ${x + 2} ${y + 6} L ${x + w - 2} ${y + 6}`} fill="none" stroke="#ffffff" strokeWidth={1} opacity={0.4} />
       </g>
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-nft = NFT card (白 body + accent art frame + 巨大 NFT 文字、 統一デザイン) */
-export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeNftNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -914,7 +963,7 @@ export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
     { text: "#1024", size: NFT_ID_SIZE, 帯: { 幅: cardW - 16 - 34, 高さ: cardH - artH } },
   ];
   const art = (倍率: number): JSX.Element => {
-    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら, textMetrics);
     return (
     <g>
       {/* shadow */}
@@ -959,13 +1008,13 @@ export function ShapeNftNode({ node, active }: ShapeProps): JSX.Element {
   return (
     <g>
       {fitArt(r, nftExtent(frame.strokeWidth), art)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-token = coin (白 body + accent 色 rim + accent 色 Diamond ロゴ、 統一デザイン) */
-export function ShapeTokenNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeTokenNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -1002,7 +1051,7 @@ export function ShapeTokenNode({ node, active }: ShapeProps): JSX.Element {
           stroke: "#1a4a68",
         }}
       />
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }