@cardenelabs/cdl 0.121.0 → 0.123.0

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

package/src/kinds/shape-region.tsx

@@ -20,7 +20,7 @@
  * では名前だけの時と同じ倍率 0.308 まで戻り、 3px の線を約 0.92px で描ける。
  */
 import type { JSX } from "react";
-import type { LaidNode, NodeKind } from "../types";
+import type { CdlTextMetrics, LaidNode, NodeKind } from "../types";
 import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import { textWidth } from "./text-width";
 import { 幅で切る } from "./box-lines";
@@ -56,10 +56,11 @@ export function 幅の倍率(
   size: number,
   letterSpacing: number,
   幅: number,
+  textMetrics: CdlTextMetrics = "proportional",
 ): number {
   if (!(幅 > 0) || !(size > 0)) return 1;
   // 階級表を二重に持つと、 片方を直した時にもう片方だけ古くなる。
-  const 実幅 = textWidth(text, size, letterSpacing);
+  const 実幅 = textWidth(text, size, letterSpacing, textMetrics);
   return 実幅 > 幅 ? 幅 / 実幅 : 1;
 }
 
@@ -684,10 +685,15 @@ const 帯の高さに対する上限 = 0.8;
  * 「収まっていない物を収まっていると判定」 する向きに外れる (`row-align.ts` の
  * `rowColumnWidth` と同じ考え方)。
  */
-export function 絵の中の字の幅(text: string, size: number, letterSpacing = 0): number {
+export function 絵の中の字の幅(
+  text: string,
+  size: number,
+  letterSpacing = 0,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
   return Math.max(
     displayWidth(text) * size * MONO_ADVANCE_RATIO,
-    textWidth(text, size, letterSpacing),
+    textWidth(text, size, letterSpacing, textMetrics),
   );
 }
 
@@ -715,7 +721,11 @@ export function 絵の中の字の幅(text: string, size: number, letterSpacing
  * 帯の値が有限の正の値でない絵は、収まるかの判定ができない。
  * `fitArt` が判定できない入力で手を触れないのと同じ向きに倒す。
  */
-export function 打ち消しの倍率(倍率: number, 字ら: readonly 打ち消す字[]): number {
+export function 打ち消しの倍率(
+  倍率: number,
+  字ら: readonly 打ち消す字[],
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
   const 戻し = Number.isFinite(倍率) && 倍率 > 0 ? 1 / 倍率 : 1;
   let 上限 = Number.POSITIVE_INFINITY;
   for (const 字 of 字ら) {
@@ -724,7 +734,7 @@ export function 打ち消しの倍率(倍率: number, 字ら: readonly 打ち消
     if (Number.isFinite(高さ) && 高さ > 0) {
       上限 = Math.min(上限, (高さ * 帯の高さに対する上限) / 字.size);
     }
-    const 実幅 = 絵の中の字の幅(字.text, 字.size, 字.letterSpacing ?? 0);
+    const 実幅 = 絵の中の字の幅(字.text, 字.size, 字.letterSpacing ?? 0, textMetrics);
     if (Number.isFinite(幅) && 幅 > 0 && 実幅 > 0) {
       上限 = Math.min(上限, 幅 / 実幅);
     }

package/src/kinds/shape-software.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react";
-import type { LaidNode } from "../types";
+import type { CdlTextMetrics, LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
 import {
   textWidth,
@@ -50,6 +50,10 @@ type ShapeProps = {
   lang?: CdlLang;
 };
 
+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)",
@@ -345,7 +349,12 @@ export function ShapeTerminalNode({ node, active, lang }: ShapeProps): JSX.Eleme
 }
 
 /** shape-code-block = code editor (tab + gutter + 4 syntax-colored stub lines) */
-export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeCodeBlockNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional",
+}: TextMeasuredShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const 線 = frame.strokeWidth / 2;
@@ -364,7 +373,10 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
    * 固定のままだと、控えより長い値を渡した図で字が札からはみ出す。 本体の幅を上限に置くのは、
    * 札が本体より広くなると `path` で描く角丸が本体の右端を越えるため。
    */
-  const タブ幅 = Math.min(Math.max(100, textWidth(札, 札の字, 0) + 24), Math.max(0, w));
+  const タブ幅 = Math.min(
+    Math.max(100, textWidth(札, 札の字, 0, textMetrics) + 24),
+    Math.max(0, w),
+  );
   const タブ高 = 24;
   const 角 = 10;
   const 溝 = 32;
@@ -422,7 +434,7 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
     { text: 札, size: 札の字, 帯: { 幅: タブ幅, 高さ: タブ高 } },
     { text: "1", size: 行番号の字, 帯: { 幅: 溝 - 持ち上げ, 高さ: 行間 } },
   ];
-  const 倍返し = 打ち消しの倍率(倍, 打ち消す字ら);
+  const 倍返し = 打ち消しの倍率(倍, 打ち消す字ら, textMetrics);
   const tabW = タブ幅 * 倍;
   const tabH = タブ高 * 倍;
   const 丸 = 角 * 倍;
@@ -456,7 +468,12 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
             data-cdl-counter-scaled="1"
             x={x + tabW / 2}
             y={y + tabH / 2 + 4 * 倍}
-            fontSize={札の字 * 倍 * 倍返し * 幅の倍率(札, 札の字 * 倍 * 倍返し, 0, tabW)}
+            fontSize={
+              札の字 *
+              倍 *
+              倍返し *
+              幅の倍率(札, 札の字 * 倍 * 倍返し, 0, tabW, textMetrics)
+            }
             fontFamily={lineFont}
             textAnchor="middle"
             fill="#e6edf3"
@@ -538,7 +555,12 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
 }
 
 /** shape-kanban-card = kanban ticket (top color bar + 3 stub line) */
-export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Element {
+export function ShapeKanbanCardNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional",
+}: TextMeasuredShapeProps): JSX.Element {
   const 字引 = 字引きを作る(lang);
   const frame = commonFrame(active);
   const 線 = frame.strokeWidth / 2;
@@ -628,7 +650,7 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
    * = 書いてもいない語が図の一部として読める状態だった (見本帳で 3 件)。
    */
   const 状態 = 書いた値か控え(node.eyebrow, 字引("kanbanCard.status"));
-  const 状態の倍率 = 幅の倍率(状態, PILL字, PILL字間, PILL字幅);
+  const 状態の倍率 = 幅の倍率(状態, PILL字, PILL字間, PILL字幅, textMetrics);
   const 説明の字 = 名前.size * 説明字比;
   // 札の内側の幅。 左右の余白は札と同じ倍率で縮むので、倍率を掛けてから引く
   const 使える幅 = Math.max(0, w - 左右余白 * 倍 * 2);
@@ -707,7 +729,7 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
           <text
             x={x + w / 2}
             y={名前.y + 名前.size * 説明基準比}
-            fontSize={説明の字 * 幅の倍率(説明, 説明の字, 0, 使える幅)}
+            fontSize={説明の字 * 幅の倍率(説明, 説明の字, 0, 使える幅, textMetrics)}
             textAnchor="middle"
             fill="var(--cdl-text-dim, #5a6270)"
           >

package/src/kinds/station.tsx

@@ -0,0 +1,29 @@
+import type { JSX } from "react";
+
+import type { LaidNode } from "../types";
+import { renderShapeWithOutsideLabels } from "./dyn-shape";
+import { nodeAccent } from "./node-tone";
+
+const STATION_STROKE_ACTIVE = 4;
+const STATION_STROKE_IDLE = 3;
+const STATION_DEFAULT = "var(--cdl-tone-accent, #2d6a8f)";
+
+/** 路線図の線路上に置く駅。名前と説明は丸を隠さないよう外側に置く。 */
+export function StationNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const strokeWidth = active ? STATION_STROKE_ACTIVE : STATION_STROKE_IDLE;
+  // 線は箱の辺で止まるため、枠線の外縁を箱の辺へ合わせると線路と丸の間が空かない。
+  const radius = Math.max(0, Math.min(node.w, node.h) / 2 - strokeWidth / 2);
+  const 形 = (
+    <circle
+      data-cdl-role="node-body"
+      data-cdl-mark="station"
+      cx={node.cx}
+      cy={node.cy}
+      r={radius}
+      fill="var(--cdl-node-fill, #ffffff)"
+      stroke={nodeAccent(node, STATION_DEFAULT)}
+      strokeWidth={strokeWidth}
+    />
+  );
+  return renderShapeWithOutsideLabels(形, node, "middle");
+}

package/src/kinds/text-width.ts

@@ -5,6 +5,8 @@
  * (`row-align.ts`) の両方が使うが、 前者から取ると React まで引き込まれる。 測定の検査で
  * 読込みの時間が計測に乗り、 図の走査時間の予算 (100ms) を超えた (実測 = 226ms)。
  */
+import type { CdlTextMetrics } from "../types";
+import { measureAdvanceWidth } from "../layout/text-width";
 
 /**
  * 字 1 つが字の大きさに対して占める横幅。
@@ -40,8 +42,8 @@
  * ASCII の内側は分類を残す。 ここは `W` 1.038 と `;` 0.343 で 3 倍開いており、 最大に寄せると
  * 普通の名前が 1.5 倍の見積りになって過剰に縮む。
  *
- * 等幅の書体なら全字 0.62 で足りるが、 `shape-` はどれも `font-family` を指定せず継承した
- * 比例書体で描くため、 等幅の値は使わない。
+ * `textMetrics: "monospace"` の図は JetBrains Mono の実測値を持つ `fontFamily: "mono"` の
+ * 経路で測る。 比例幅の図はこの階級表を使い、従来の見積りを保つ。
  */
 const WIDE_RATIO = 1.04;
 const NARROW_RATIO = 0.37;
@@ -58,7 +60,19 @@ const NARROW_CHARS = "ijlI.,:;'! ";
  * `字送り` (`letter-spacing`) は字ごとに加わるため字数を掛ける。 最後の 1 字ぶんは実装に
  * よって付かないが、 広い側に外す方を採る。
  */
-export function textWidth(s: string, size: number, 字送り = 0): number {
+export function textWidth(
+  s: string,
+  size: number,
+  字送り = 0,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
+  if (textMetrics === "monospace") {
+    return measureAdvanceWidth(s, {
+      fontSize: size,
+      letterSpacing: 字送り,
+      fontFamily: "mono",
+    });
+  }
   let 幅 = 0;
   let 字数 = 0;
   for (const c of s) {