@cardenelabs/cdl 0.121.0 → 0.123.0

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

package/src/kinds/shape-commerce.tsx

@@ -10,7 +10,7 @@ import {
   帯で切る,
 } from "./shape-region";
 import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
-import type { LaidNode } from "../types";
+import type { CdlTextMetrics, LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
 
 /**
@@ -29,6 +29,7 @@ type ShapeProps = {
   active: boolean;
   /** 描画側の固定の字の言語 (#847)。 渡さない呼び方は英語で描く */
   lang?: CdlLang;
+  textMetrics?: CdlTextMetrics;
 };
 
 const commonFrame = (active: boolean) => ({
@@ -82,7 +83,13 @@ function 字の比(c: string): number {
 }
 
 /** 字の並びの幅の見積り。 字ごとの比を足して、 字間を字数分足す。 */
-function 字幅(文字列: string, 大きさ: number, 字間: number): number {
+function 字幅(
+  文字列: string,
+  大きさ: number,
+  字間: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
+  if (textMetrics === "monospace") return textWidth(文字列, 大きさ, 字間, textMetrics);
   let 幅 = 0;
   let 字数 = 0;
   for (const c of 文字列) {
@@ -101,28 +108,55 @@ function 字幅(文字列: string, 大きさ: number, 字間: number): number {
  *
  * 字間も同じ割合で詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
  */
-function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number, 題か = false) {
-  const 幅 = 字幅(文字列, 大きさ, 字間);
+function 幅に収める(
+  文字列: string,
+  大きさ: number,
+  字間: number,
+  箱幅: number,
+  題か = false,
+  textMetrics: CdlTextMetrics = "proportional",
+) {
+  const 測る = (t: string, s: number, ls: number): number => 字幅(t, s, ls, textMetrics);
+  const 幅 = 測る(文字列, 大きさ, 字間);
   // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
   // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)。
   //
   // **下限を当てるのは題の行だけ** (#957)。 補いの行に当てると、収まっている行を
   // 大きくしてから切ることになる = 書いた字を落として得るのが 1px に満たない
-  const 下限 = 題か ? 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅) : 0;
+  const 下限 = 題か ? 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 測る) : 0;
   const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, Math.max(箱幅 / 幅, 下限)) : 1;
   const size = 大きさ * 倍率;
   const spacing = 字間 * 倍率;
-  return { size, spacing, text: 帯で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
+  return { size, spacing, text: 帯で切る(文字列, size, 箱幅, (u, f) => 測る(u, f, spacing)) };
 }
 
 /**
  * 名前の塊を描く。 縦の位置と大きさは `labelPlan` が決め (箱の下端から積み上げる、 #433)、
  * 横は `幅に収める` が箱の幅に合わせて縮める。
  */
-function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
-  const 肩 = 幅に収める(node.eyebrow ?? "", plan.肩書?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
-  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w, true);
-  const 説 = 幅に収める(node.subtitle ?? "", plan.説明?.size ?? 0, 0, node.w);
+function bottomLabel(
+  node: LaidNode,
+  cx: number,
+  plan: ReturnType<typeof labelPlan>,
+  textMetrics: CdlTextMetrics = "proportional",
+) {
+  const 肩 = 幅に収める(
+    node.eyebrow ?? "",
+    plan.肩書?.size ?? 0,
+    LABEL_EYEBROW_SPACING,
+    node.w,
+    false,
+    textMetrics,
+  );
+  const 名 = 幅に収める(node.title ?? "", plan.名前.size, 0, node.w, true, textMetrics);
+  const 説 = 幅に収める(
+    node.subtitle ?? "",
+    plan.説明?.size ?? 0,
+    0,
+    node.w,
+    false,
+    textMetrics,
+  );
   return (
     <>
       {node.eyebrow && plan.肩書 && (
@@ -160,7 +194,7 @@ const WEBSITE_W_MIN = 160;
 const WEBSITE_W_MAX = 280;
 
 /** shape-website = ブラウザ (シンプル + シンプルレイアウト) */
-export function ShapeWebsiteNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeWebsiteNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -194,13 +228,13 @@ export function ShapeWebsiteNode({ node, active }: ShapeProps): JSX.Element {
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-storefront = S-A シンプル shop (平屋根 + SHOP 看板 + 大 window (商品) + 中央 door + OPEN sign) */
-export function ShapeStorefrontNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeStorefrontNode({ node, active, lang, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -258,7 +292,7 @@ export function ShapeStorefrontNode({ node, active, lang }: ShapeProps): JSX.Ele
       <circle cx={doorX + 6} cy={doorY + doorH * 0.55} r={1.5} fill="#c15a4a" />
       {/* base 床 (前 storefront 直下のみ) */}
       <rect x={x - 6} y={y + bh - 6} width={bw + 12} height={8} fill="#5a6270" stroke="none" />
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -286,7 +320,7 @@ const WAREHOUSE_W_MIN = 160;
 const WAREHOUSE_W_MAX = 240;
 
 /** shape-warehouse = W-A 大 shutter (平屋根 + WAREHOUSE 看板 + 中央大 shutter 10 rib + loading dock) */
-export function ShapeWarehouseNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeWarehouseNode({ node, active, lang, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -353,7 +387,7 @@ export function ShapeWarehouseNode({ node, active, lang }: ShapeProps): JSX.Elem
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -372,7 +406,7 @@ const HANDLE_GRIP_R = 4;
 /** 影の楕円が中心から左右へ出る距離。 絵の中で一番右まで来る部品 */
 const CART_SHADOW_RX = 80;
 
-export function ShapeOnlineShopNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeOnlineShopNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cy = r.cy + 10;
@@ -445,13 +479,13 @@ export function ShapeOnlineShopNode({ node, active }: ShapeProps): JSX.Element {
       <circle cx={wheelR} cy={wheelY} r={16 * s} fill="#0f1830" stroke="#000" strokeWidth={2 * s} />
       <circle cx={wheelR} cy={wheelY} r={8 * s} fill="#5a6270" stroke="#0f1830" strokeWidth={1.5 * s} />
       <circle cx={wheelR} cy={wheelY} r={2 * s} fill="#0f1830" />
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-cdn-edge = 地球儀 (globe + 5 edge dots + pulse ring + lightning at center) */
-export function ShapeCdnEdgeNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeCdnEdgeNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -523,7 +557,7 @@ export function ShapeCdnEdgeNode({ node, active }: ShapeProps): JSX.Element {
   return (
     <g>
       {fitArt(r, { 上: 広がり, 下: 広がり, 左: 広がり, 右: 広がり }, 絵)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -553,7 +587,7 @@ const API_W_MIN = 200;
 const API_W_MAX = 300;
 
 /** shape-api-gateway = SaaS API panel (dark bg + method + path endpoints + status) */
-export function ShapeApiGatewayNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeApiGatewayNode({ node, active, lang, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -570,7 +604,14 @@ export function ShapeApiGatewayNode({ node, active, lang }: ShapeProps): JSX.Ele
   // 11 のまま入り、長い綴り (日本語の辞書の `DELETE`) だけを縮める。 見積りは等幅と比例の大きい方
   // (`shape-blockchain.tsx` の `字の幅` と同じ考え方で、どちらの書体で描かれても箱からはみ出さない)
   const 種類の字 = (s: string): number =>
-    Math.min(11, (11 * API_METHOD_TEXT_W) / Math.max(displayWidth(s) * 11 * MONO_ADVANCE_RATIO, textWidth(s, 11)));
+    Math.min(
+      11,
+      (11 * API_METHOD_TEXT_W) /
+        Math.max(
+          displayWidth(s) * 11 * MONO_ADVANCE_RATIO,
+          textWidth(s, 11, 0, textMetrics),
+        ),
+    );
   const rowPitch = Math.max(
     API_ROW_PITCH_MIN,
     (bh - API_ROW_TOP - API_ROW_H - API_ROW_BOTTOM_PAD) / (API_ROWS - 1),
@@ -595,7 +636,7 @@ export function ShapeApiGatewayNode({ node, active, lang }: ShapeProps): JSX.Ele
     帯: { 幅: bw - 32 - 64 - 16, 高さ: API_ROW_H },
   }));
   const 絵 = (倍率: number): JSX.Element => {
-    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら, textMetrics);
     return (
     <g>
       <rect x={x + DROP_SHADOW_D} y={y + DROP_SHADOW_D} width={bw} height={bh} rx={10} fill={frame.stroke} opacity={0.2} stroke="none" />
@@ -625,7 +666,7 @@ export function ShapeApiGatewayNode({ node, active, lang }: ShapeProps): JSX.Ele
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }