@cardenelabs/cdl 0.122.0 → 0.124.0

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

package/src/kinds/shape-finance.tsx

@@ -3,12 +3,13 @@ import {
   shapeRegion,
   labelPlan,
   fitArt,
+  textWidth,
   打ち消しの倍率,
   type 打ち消す字,
   切って収まる下限,
   帯で切る,
 } from "./shape-region";
-import type { LaidNode } from "../types";
+import type { CdlTextMetrics, LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
 
 /**
@@ -26,6 +27,7 @@ import { 字引きを作る, type CdlLang } from "../lang";
 type ShapeProps = {
   node: LaidNode;
   active: boolean;
+  textMetrics?: CdlTextMetrics;
   /** 描画側の固定の字の言語 (#847)。 渡さない呼び方は英語で描く */
   lang?: CdlLang;
 };
@@ -81,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 文字列) {
@@ -100,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.肩書 && (
@@ -174,7 +209,7 @@ const BANK_BLD_W_MIN = 120;
 const BANK_BLD_W_MAX = 280;
 
 /** shape-bank = 銀行 (Greek 神殿 pediment + $ + 4 columns + base、 中央配置) */
-export function ShapeBankNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeBankNode({ node, active, textMetrics = "proportional" }: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const 線 = frame.strokeWidth / 2;
@@ -231,7 +266,7 @@ export function ShapeBankNode({ node, active }: ShapeProps): JSX.Element {
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -252,7 +287,12 @@ const TRUST_BLD_W_MIN = 140;
 const TRUST_BLD_W_MAX = 280;
 
 /** shape-trust-bank = 信託銀行 (王冠 + 神殿 3 columns、 中央柱に余計装飾なし) */
-export function ShapeTrustBankNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeTrustBankNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -316,13 +356,18 @@ export function ShapeTrustBankNode({ node, active, lang }: ShapeProps): JSX.Elem
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-payment-provider = P2-A base (中央 provider box + PAY header + processing spinner + PROCESSING label) */
-export function ShapePaymentProviderNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapePaymentProviderNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -355,13 +400,17 @@ export function ShapePaymentProviderNode({ node, active, lang }: ShapeProps): JS
       </g>
       {/* PROCESSING label */}
       <text x={cx} y={y + boxH - 16} fontSize={11} fontWeight={700} letterSpacing={2} textAnchor="middle" fill="#a4b5f2">{字引("paymentProvider.status")}</text>
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
 
 /** shape-credit-card = クレジットカード (シンプル、 chip + NFC + 4 digit block + brand) */
-export function ShapeCreditCardNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeCreditCardNode({
+  node,
+  active,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
   const cardW = Math.min(r.availW - 30, 260);
@@ -394,7 +443,7 @@ export function ShapeCreditCardNode({ node, active }: ShapeProps): JSX.Element {
       {/* brand mark */}
       <circle cx={x + cardW - 48} cy={y + cardH - 24} r={15} fill="#c9302c" opacity={0.9} stroke="none" />
       <circle cx={x + cardW - 30} cy={y + cardH - 24} r={15} fill="#e5c07b" opacity={0.9} stroke="none" />
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -447,7 +496,12 @@ const BROKERAGE_W_MAX = 140;
 const BROKERAGE_H_MIN = BROKERAGE_TICK_H + BROKERAGE_LOGO_H + BROKERAGE_BASE_H;
 
 /** shape-brokerage = B2-A 大和証券風 (縦長本社 + 上部電光 + $ SECURITIES ロゴ帯 + window grid + entrance 回転扉) */
-export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeBrokerageNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -494,7 +548,7 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
     },
   ];
   const 絵 = (倍率: number): JSX.Element => {
-    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら, textMetrics);
     return (
     <g>
       {/* drop shadow */}
@@ -538,7 +592,7 @@ export function ShapeBrokerageNode({ node, active, lang }: ShapeProps): JSX.Elem
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -549,7 +603,12 @@ const EXCHANGE_SUB_SIZE = 11;
 /** 中央の六角形の外接半径。 看板の字 (指定 11、 字間 1 で幅 83.7) が入る大きさから決めた (#888)。 */
 const EXCHANGE_HEX_R = 52;
 
-export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeExchangeNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -620,7 +679,7 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
     },
   ];
   const 絵 = (倍率: number): JSX.Element => {
-    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら);
+    const 倍 = 打ち消しの倍率(倍率, 打ち消す字ら, textMetrics);
     return (
     <g>
       {/* 8 dashed radial lines */}
@@ -654,7 +713,7 @@ export function ShapeExchangeNode({ node, active, lang }: ShapeProps): JSX.Eleme
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -700,7 +759,12 @@ const ATM_W_MAX = ATM_PANEL_W;
 const ATM_H_MIN = ATM_SIGN_H + ATM_SIGN_GAP + 30 + ATM_FLOOR_RESERVE;
 
 /** shape-atm = A3-C1 (支店内 ATM 単体、 上部 ATM CORNER 天井看板 + 中央 ATM 大 + 直下床帯) */
-export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeAtmNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional",
+}: ShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -800,7 +864,7 @@ export function ShapeAtmNode({ node, active, lang }: ShapeProps): JSX.Element {
   return (
     <g>
       {fitArt(r, 広がり, 絵)}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }

package/src/kinds/shape-hardware.tsx

@@ -1,6 +1,6 @@
 import type { JSX } from "react";
 import { shapeRegion, labelPlan, fitArt, textWidth, 切って収まる下限, 帯で切る, type ArtExtent } from "./shape-region";
-import type { LaidNode } from "../types";
+import type { CdlTextMetrics, LaidNode } from "../types";
 
 /**
  * Shape-driven hardware 6 kinds (CAR-1111 Phase 2-C)。
@@ -45,6 +45,10 @@ type ShapeProps = {
   active: boolean;
 };
 
+type TextMeasuredShapeProps = ShapeProps & {
+  textMetrics?: CdlTextMetrics;
+};
+
 const commonFrame = (active: boolean) => ({
   fill: "var(--cdl-node-fill, #ffffff)",
   stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
@@ -104,18 +108,26 @@ const LABEL_EYEBROW_SPACING = 2;
  * 字幅の見積りは共有の `textWidth` (実測を階級で丸め上げた表) が持つ。 字間も同じ割合で
  * 詰める = 大きさだけ縮めても字間が残ると幅が比例して縮まない。
  */
-function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number, 題か = false) {
-  const 幅 = textWidth(文字列, 大きさ, 字間);
+function 幅に収める(
+  文字列: string,
+  大きさ: number,
+  字間: number,
+  箱幅: number,
+  題か = false,
+  textMetrics: CdlTextMetrics = "proportional",
+) {
+  const 測る = (t: string, s: number, ls: number): number => textWidth(t, s, ls, textMetrics);
+  const 幅 = 測る(文字列, 大きさ, 字間);
   // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
   // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)。
   //
   // **下限を当てるのは題の行だけ** (#957)。 補いの行に当てると、収まっている行を
   // 大きくしてから切ることになる = 書いた字を落として得るのが 1px に満たない
-  const 下限 = 題か ? 切って収まる下限(文字列, 大きさ, 字間, 箱幅, textWidth) : 0;
+  const 下限 = 題か ? 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 測る) : 0;
   const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, Math.max(箱幅 / 幅, 下限)) : 1;
   const size = 大きさ * 倍率;
   const spacing = 字間 * 倍率;
-  return { size, spacing, text: 帯で切る(文字列, size, 箱幅, (u, f) => textWidth(u, f, spacing)) };
+  return { size, spacing, text: 帯で切る(文字列, size, 箱幅, (u, f) => 測る(u, f, spacing)) };
 }
 
 /**
@@ -124,10 +136,29 @@ function 幅に収める(文字列: string, 大きさ: number, 字間: number,
  *
  * `externalLabel` と違い、 **箱の中に必ず収まる**。 字の大きさも箱の高さに追随する。
  */
-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.肩書 && (
@@ -171,7 +202,7 @@ const RACK_H =
 const RACK_W_MIN = 120;
 
 /** shape-server-rack = 19 inch rack (top vent + 4 U rack mount server + power indicator) */
-export function ShapeServerRackNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeServerRackNode({ node, active, textMetrics = "proportional" }: TextMeasuredShapeProps): JSX.Element {
   const r = shapeRegion(node);
   const frame = commonFrame(active);
   const 線 = frame.strokeWidth / 2;
@@ -260,7 +291,7 @@ export function ShapeServerRackNode({ node, active }: ShapeProps): JSX.Element {
           })}
         </g>
       ))}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -281,7 +312,7 @@ const WIFI_ARC_R = [10, 16, 22];
 const WIFI_BASE_Y = 5;
 
 /** shape-network-node = 六角 hub (network signal cone icon + 6-arm radial + node dots) */
-export function ShapeNetworkNodeNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeNetworkNodeNode({ node, active, textMetrics = "proportional" }: TextMeasuredShapeProps): JSX.Element {
   const r = shapeRegion(node);
   const cx = r.cx;
   const cy = r.cy;
@@ -358,7 +389,7 @@ export function ShapeNetworkNodeNode({ node, active }: ShapeProps): JSX.Element
           <circle cx={cx} cy={cy + WIFI_BASE_Y + 3} r={2.5} fill="var(--cdl-tone-accent, #2d6a8f)" stroke="none" />
         </g>
       ))}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -378,7 +409,7 @@ const PHONE_H = 240;
 const PHONE_W = 110;
 
 /** shape-mobile-device = スマホ (rounded rect + speaker slit + home button) */
-export function ShapeMobileDeviceNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeMobileDeviceNode({ node, active, textMetrics = "proportional" }: TextMeasuredShapeProps): JSX.Element {
   const r = shapeRegion(node);
   const frame = commonFrame(active);
   const 線 = frame.strokeWidth / 2;
@@ -436,7 +467,7 @@ export function ShapeMobileDeviceNode({ node, active }: ShapeProps): JSX.Element
           />
         </g>
       ))}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }
@@ -692,7 +723,7 @@ const SAT_MAST_LEN = 22;
 const SAT_MAST_TIP_R = 4;
 
 /** shape-satellite = 人工衛星 (body + 左右 solar panel + dish antenna + orbit arc) */
-export function ShapeSatelliteNode({ node, active }: ShapeProps): JSX.Element {
+export function ShapeSatelliteNode({ node, active, textMetrics = "proportional" }: TextMeasuredShapeProps): JSX.Element {
   const r = shapeRegion(node);
   const cx = r.cx;
   const cy = r.cy;
@@ -864,7 +895,7 @@ export function ShapeSatelliteNode({ node, active }: ShapeProps): JSX.Element {
           </circle>
         </g>
       ))}
-      {bottomLabel(node, r.cx, r.label)}
+      {bottomLabel(node, r.cx, r.label, textMetrics)}
     </g>
   );
 }