@cardenelabs/cdl 0.121.0 → 0.123.0

package/src/kinds/chart-pie.tsx

@@ -1,5 +1,5 @@
 import { useId, type JSX } from "react";
-import type { ChartPieForm, LaidNode, Tone } from "../types";
+import type { CdlTextMetrics, ChartPieForm, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { 進みを畳む } from "./draw-progress";
@@ -17,8 +17,14 @@ const 穴に対する上限 = 0.8;
  * 下限まで戻し、**穴に入らない時だけ下限を割る** = 入らない大きさで描くと数字が輪へ
  * 重なる (#891)。
  */
-function 中央の字(比例した大きさ: number, 穴の半径: number, 文: string): number {
-  const 入る大きさ = (穴の半径 * 2 * 穴に対する上限) / Math.max(textWidth(文, 1), 1e-6);
+function 中央の字(
+  比例した大きさ: number,
+  穴の半径: number,
+  文: string,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
+  const 入る大きさ =
+    (穴の半径 * 2 * 穴に対する上限) / Math.max(textWidth(文, 1, 0, textMetrics), 1e-6);
   return Math.min(Math.max(比例した大きさ, 縮んだ絵の字の下限), 入る大きさ);
 }
 import { 実値表記, 割合表記 } from "./chart-number";
@@ -70,6 +76,7 @@ export function ChartPieNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -78,6 +85,7 @@ export function ChartPieNode({
   drawing?: boolean;
   /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
   progress?: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   // node id は diagram 内だけで一意。 同じ page に複数 diagram がある時も SVG の参照先が
   // ぶつからないよう、 React が component instance ごとに割り当てる id を使う。
@@ -151,7 +159,18 @@ export function ChartPieNode({
   });
 
   if (形 !== "ring") {
-    const 共通 = { node, active, data, 割合: 今の割合, x0, y0, drawing, progress, instanceId };
+    const 共通 = {
+      node,
+      active,
+      data,
+      割合: 今の割合,
+      x0,
+      y0,
+      drawing,
+      progress,
+      instanceId,
+      textMetrics,
+    };
     return 形 === "arcs" ? 弧の形(共通) : 表の形(共通);
   }
 
@@ -165,8 +184,8 @@ export function ChartPieNode({
     0,
     ...data.map((_d, i) =>
       Math.max(
-        textWidth(割合の文字[i] ?? "", 割合の級),
-        textWidth(名前の文字[i] ?? "", 名前の級),
+        textWidth(割合の文字[i] ?? "", 割合の級, 0, textMetrics),
+        textWidth(名前の文字[i] ?? "", 名前の級, 0, textMetrics),
       ),
     ),
   );
@@ -203,8 +222,8 @@ export function ChartPieNode({
    */
   const 穴 = 前あり ? 前の内半径 : 外の内半径;
   const 合計の文 = 実値表記(Math.round(前あり ? 今の合計 : total));
-  const 合計の字 = 中央の字(Math.round(radius * 0.26), 穴, 合計の文);
-  const 見出しの字 = 中央の字(Math.round(radius * 0.12), 穴, "合計");
+  const 合計の字 = 中央の字(Math.round(radius * 0.26), 穴, 合計の文, textMetrics);
+  const 見出しの字 = 中央の字(Math.round(radius * 0.12), 穴, "合計", textMetrics);
   const 合計の下 = Math.max(Math.round(radius * 0.2), 合計の字 * 0.25 + 見出しの字 * 0.8);
   const slices = 輪を組む(data, cx, cy, radius, 外の内半径, 今の割合);
 
@@ -450,6 +469,7 @@ type 形の引数 = {
   drawing: boolean;
   progress: number;
   instanceId: string;
+  textMetrics: CdlTextMetrics;
 };
 
 /** 3 つの見せ方が共通で持つ枠 (cdl#684) */
@@ -480,7 +500,17 @@ function 枠(node: LaidNode, active: boolean): JSX.Element {
  *
  * 中心に合計は置かない。 弧は合計を形で示さないので、置くと形と数が食い違う。
  */
-function 弧の形({ node, active, data, 割合, x0, y0, drawing, progress }: 形の引数): JSX.Element {
+function 弧の形({
+  node,
+  active,
+  data,
+  割合,
+  x0,
+  y0,
+  drawing,
+  progress,
+  textMetrics,
+}: 形の引数): JSX.Element {
   const PAD = 20;
   const 名前の級 = 14;
   const 割合の級 = 24;
@@ -491,9 +521,9 @@ function 弧の形({ node, active, data, 割合, x0, y0, drawing, progress }:
   const 一覧幅 =
     10 +
     印から名前まで +
-    Math.max(0, ...data.map((d) => textWidth(d.label ?? "", 名前の級))) +
+    Math.max(0, ...data.map((d) => textWidth(d.label ?? "", 名前の級, 0, textMetrics))) +
     名前から割合まで +
-    Math.max(0, ...割合の文字.map((t) => textWidth(t, 割合の級)));
+    Math.max(0, ...割合の文字.map((t) => textWidth(t, 割合の級, 0, textMetrics)));
 
   const 縦から = (node.h - PAD * 2) / 2;
   const 横から = (node.w - PAD * 2 - 一覧幅 - 28) / 2;
@@ -596,7 +626,18 @@ function 弧の形({ node, active, data, 割合, x0, y0, drawing, progress }:
  * 引き出し線を引かない = 対応は表の色の印が担う。 線と表を両方置くと、同じ対応を
  * 2 つの仕掛けで示すことになる。
  */
-function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, instanceId }: 形の引数): JSX.Element {
+function 表の形({
+  node,
+  active,
+  data,
+  割合,
+  x0,
+  y0,
+  drawing,
+  progress,
+  instanceId,
+  textMetrics,
+}: 形の引数): JSX.Element {
   const PAD = 20;
   const 見出しの級 = 11;
   const 名前の級 = 15;
@@ -606,9 +647,18 @@ function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, inst
 
   const 割合の文字 = 割合.map(割合表記);
   const 実数の文字 = data.map((d) => 実値表記(d.value));
-  const 名前幅 = Math.max(0, ...data.map((d) => textWidth(d.label ?? "", 名前の級)));
-  const 割合幅 = Math.max(textWidth("割合", 見出しの級), ...割合の文字.map((t) => textWidth(t, 割合の級)));
-  const 実数幅 = Math.max(textWidth("値", 見出しの級), ...実数の文字.map((t) => textWidth(t, 実数の級)));
+  const 名前幅 = Math.max(
+    0,
+    ...data.map((d) => textWidth(d.label ?? "", 名前の級, 0, textMetrics)),
+  );
+  const 割合幅 = Math.max(
+    textWidth("割合", 見出しの級, 0, textMetrics),
+    ...割合の文字.map((t) => textWidth(t, 割合の級, 0, textMetrics)),
+  );
+  const 実数幅 = Math.max(
+    textWidth("値", 見出しの級, 0, textMetrics),
+    ...実数の文字.map((t) => textWidth(t, 実数の級, 0, textMetrics)),
+  );
   const 表幅 = 10 + 印から名前まで + 名前幅 + 28 + 割合幅 + 24 + 実数幅;
 
   const 縦から = (node.h - PAD * 2) / 2;
@@ -619,8 +669,8 @@ function 表の形({ node, active, data, 割合, x0, y0, drawing, progress, inst
   const cy = node.h / 2;
   // 中央の 2 行。 輪の layout と同じ決め方 (#891)
   const 合計の文 = 実値表記(Math.round(data.reduce((acc, d) => acc + d.value, 0)));
-  const 合計の字 = 中央の字(Math.round(R * 0.26), 内半径, 合計の文);
-  const 見出しの字 = 中央の字(Math.round(R * 0.12), 内半径, "合計");
+  const 合計の字 = 中央の字(Math.round(R * 0.26), 内半径, 合計の文, textMetrics);
+  const 見出しの字 = 中央の字(Math.round(R * 0.12), 内半径, "合計", textMetrics);
   const 合計の下 = Math.max(Math.round(R * 0.2), 合計の字 * 0.25 + 見出しの字 * 0.8);
 
   const 表左 = node.w - PAD - 表幅;

package/src/kinds/chart-radial.tsx

@@ -1,5 +1,5 @@
 import { useId, type JSX } from "react";
-import type { LaidNode, Tone } from "../types";
+import type { CdlTextMetrics, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
@@ -45,6 +45,7 @@ export function ChartRadialNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -53,6 +54,7 @@ export function ChartRadialNode({
   drawing?: boolean;
   /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
   progress?: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -78,7 +80,10 @@ export function ChartRadialNode({
     Math.max(
       0,
       ...data.map((d, i) =>
-        Math.max(textWidth(d.label ?? "", 名前の級), textWidth(数値の文字[i] ?? "", 数値の級)),
+        Math.max(
+          textWidth(d.label ?? "", 名前の級, 0, textMetrics),
+          textWidth(数値の文字[i] ?? "", 数値の級, 0, textMetrics),
+        ),
       ),
     );
 

package/src/kinds/chart-slope.tsx

@@ -1,5 +1,5 @@
 import { type JSX } from "react";
-import type { ChartSlopeForm, LaidNode, Tone } from "../types";
+import type { CdlTextMetrics, ChartSlopeForm, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
@@ -99,6 +99,7 @@ export function ChartSlopeNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -106,6 +107,7 @@ export function ChartSlopeNode({
   /** 段の `draw` にこの node が載っている間だけ true */
   drawing?: boolean;
   progress?: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -193,8 +195,8 @@ export function ChartSlopeNode({
   const 右の字 = 系列たち.map((s) =>
     形 === "delta" ? 増減表記(s.前, s.今) : 実値表記(s.今),
   );
-  const 左値幅 = Math.max(0, ...左の字.map((t) => textWidth(t, 値の級)));
-  const 右値幅 = Math.max(0, ...右の字.map((t) => textWidth(t, 値の級)));
+  const 左値幅 = Math.max(0, ...左の字.map((t) => textWidth(t, 値の級, 0, textMetrics)));
+  const 右値幅 = Math.max(0, ...右の字.map((t) => textWidth(t, 値の級, 0, textMetrics)));
 
   /** 名札に回せる横幅。 線の幅を先に取り分けてから、残りを左右へ半分ずつ配る */
   const 名前に使える = Math.max(
@@ -206,10 +208,16 @@ export function ChartSlopeNode({
       (右値幅 + 軸から値まで + 値から名前まで)) /
       2,
   );
-  const 名前の級 = 収める級(系列たち.map((s) => s.名前), 名前に使える, 名前の上限級, 名前の下限級);
+  const 名前の級 = 収める級(
+    系列たち.map((s) => s.名前),
+    名前に使える,
+    名前の上限級,
+    名前の下限級,
+    textMetrics,
+  );
   const 名前幅 = Math.min(
     名前に使える,
-    Math.max(0, ...系列たち.map((s) => textWidth(s.名前, 名前の級))),
+    Math.max(0, ...系列たち.map((s) => textWidth(s.名前, 名前の級, 0, textMetrics))),
   );
 
   const 左の余白 = 名前幅 + 値から名前まで + 左値幅 + 軸から値まで;
@@ -427,9 +435,20 @@ function 印の色(tone: Tone | undefined, idx: number): string {
  * 最長の名前が枠に収まるまで 1 ずつ下げ、下限で止める。 下限でも収まらない図では
  * 名札が枠から出るが、線と軸は箱の内側に残る。
  */
-function 収める級(名前たち: readonly string[], 幅: number, 上限: number, 下限: number): number {
+function 収める級(
+  名前たち: readonly string[],
+  幅: number,
+  上限: number,
+  下限: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
   if (名前たち.length === 0) return 上限;
   let 級 = 上限;
-  while (級 > 下限 && Math.max(...名前たち.map((n) => textWidth(n, 級))) > 幅) 級 -= 1;
+  while (
+    級 > 下限 &&
+    Math.max(...名前たち.map((n) => textWidth(n, 級, 0, textMetrics))) > 幅
+  ) {
+    級 -= 1;
+  }
   return 級;
 }

package/src/kinds/chart-stacked-bar.tsx

@@ -1,5 +1,5 @@
 import { useId, type JSX } from "react";
-import type { LaidNode, Tone } from "../types";
+import type { CdlTextMetrics, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { textWidth } from "./text-width";
@@ -51,6 +51,7 @@ export function ChartStackedBarNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -59,6 +60,7 @@ export function ChartStackedBarNode({
   drawing?: boolean;
   /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
   progress?: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -72,7 +74,8 @@ export function ChartStackedBarNode({
   const 時点の級 = 13;
   /** 時点の名前を置く左の幅 */
   const 時点の幅 =
-    Math.max(0, ...帯たち.map((b) => textWidth(b.名前, 時点の級))) + (帯たち.length > 1 ? 16 : 0);
+    Math.max(0, ...帯たち.map((b) => textWidth(b.名前, 時点の級, 0, textMetrics))) +
+    (帯たち.length > 1 ? 16 : 0);
   const 帯の左 = PAD + 時点の幅;
   const 帯の幅 = Math.max(40, node.w - 帯の左 - PAD);
   const 帯の高さ = 44;
@@ -196,7 +199,7 @@ export function ChartStackedBarNode({
       })}
 
       {/* 一覧。 区画に字が入らなかった件もここで名前と色が引ける */}
-      {一覧の並び(data, 帯の左, node.w - PAD, 名前の級).map(({ d, idx, x, 行 }) => {
+      {一覧の並び(data, 帯の左, node.w - PAD, 名前の級, textMetrics).map(({ d, idx, x, 行 }) => {
         const y =
           上端 +
           帯たち.length * (帯の高さ + 帯の間) -
@@ -284,12 +287,13 @@ export function 一覧の並び(
   左: number,
   右端: number,
   級: number,
+  textMetrics: CdlTextMetrics = "proportional",
 ): Array<{ d: ResolvedChartDatum; idx: number; x: number; 行: number }> {
   const out: Array<{ d: ResolvedChartDatum; idx: number; x: number; 行: number }> = [];
   let x = 左;
   let 行 = 0;
   data.forEach((d, idx) => {
-    const 幅 = 印から名前まで + textWidth(d.label ?? "", 級);
+    const 幅 = 印から名前まで + textWidth(d.label ?? "", 級, 0, textMetrics);
     // 行の先頭では折り返さない = 折り返しても同じ位置に戻るだけで、空の行が増える
     if (x > 左 && x + 幅 > 右端) {
       行 += 1;

package/src/kinds/chart-stat.tsx

@@ -1,5 +1,5 @@
 import { type JSX } from "react";
-import type { LaidNode, Tone } from "../types";
+import type { CdlTextMetrics, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
@@ -35,10 +35,12 @@ export function ChartStatNode({
   node,
   active,
   stateValues = {},
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -87,7 +89,13 @@ export function ChartStatNode({
         const 色 = 印の色(d.tone, idx);
         const 数値 = 実値表記(d.value);
         // 数値は区画に収まるまで小さくする。 収まらないまま描くと隣の区画へはみ出す
-        const 数値の級 = 収める級(数値, 枠.w - 区画.余白 * 2, 区画.数値の級, 区画.名前の級 + 1);
+        const 数値の級 = 収める級(
+          数値,
+          枠.w - 区画.余白 * 2,
+          区画.数値の級,
+          区画.名前の級 + 1,
+          textMetrics,
+        );
         return (
           <g
             key={`stat-${idx}`}
@@ -147,6 +155,7 @@ export function ChartStatNode({
                   枠.w - 区画.余白 * 2,
                   区画.前の級,
                   8,
+                  textMetrics,
                 )}
                 textAnchor="middle"
                 fill="var(--cdl-text-dim, #5a6270)"
@@ -291,9 +300,15 @@ function 区画の割付(
  * 中身 (数値が主役) が崩れるため。 下限でも入らない場合は入らないまま描く = 勝手に字を
  * 落とすと数値が別の値に読める。
  */
-export function 収める級(字: string, 使える幅: number, 初期: number, 下限: number): number {
+export function 収める級(
+  字: string,
+  使える幅: number,
+  初期: number,
+  下限: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
   let 級 = 初期;
-  while (級 > 下限 && textWidth(字, 級) > 使える幅) 級 -= 1;
+  while (級 > 下限 && textWidth(字, 級, 0, textMetrics) > 使える幅) 級 -= 1;
   return 級;
 }
 

package/src/kinds/chart-waffle.tsx

@@ -1,5 +1,5 @@
 import { type JSX } from "react";
-import type { LaidNode, Tone } from "../types";
+import type { CdlTextMetrics, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
@@ -84,6 +84,7 @@ export function ChartWaffleNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -92,6 +93,7 @@ export function ChartWaffleNode({
   drawing?: boolean;
   /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
   progress?: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -116,7 +118,10 @@ export function ChartWaffleNode({
     Math.max(
       0,
       ...data.map((d, i) =>
-        Math.max(textWidth(d.label ?? "", 名前の級), textWidth(数値の文字[i] ?? "", 数値の級)),
+        Math.max(
+          textWidth(d.label ?? "", 名前の級, 0, textMetrics),
+          textWidth(数値の文字[i] ?? "", 数値の級, 0, textMetrics),
+        ),
       ),
     );
 

package/src/kinds/dyn-shape.tsx

@@ -75,24 +75,37 @@ export function DynShapeNode({
     }
   })();
 
-  // 名前と値は箱の外に置く (#925)。 中に置くと、内側の塗りが値で動くたびに文字と重なる。
-  //
-  // **差し込みはここで通さない**。 `render/nodes.tsx` が `{名前}` を解決した節を渡してくるので、
-  // ここで通しても何も変わらない (実測 = 通さない形に変えても検査が 1 件も落ちなかった)。
-  // しかも向こうは値ごとの呼び名の表を持っており、ここには無い = 二重に通すと、
-  // 呼び名を持つ図だけ結果が変わる余地を作る。
+  const 揃え = 箱いっぱいに描く(shape.kind) ? "start" : "middle";
+  return renderShapeWithOutsideLabels(形, node, 揃え);
+}
+
+/**
+ * 名前と値は箱の外に置く (#925)。 中に置くと、内側の塗りが値で動くたびに文字と重なる。
+ * 駅は塗りが動かないが、丸が小さく名前が丸より広いので外に置く。
+ *
+ * **差し込みはここで通さない**。 `render/nodes.tsx` が `{名前}` を解決した節を渡してくるので、
+ * ここで通しても何も変わらない (実測 = 通さない形に変えても検査が 1 件も落ちなかった)。
+ * しかも向こうは値ごとの呼び名の表を持っており、ここには無い = 二重に通すと、
+ * 呼び名を持つ図だけ結果が変わる余地を作る。
+ */
+export function renderShapeWithOutsideLabels(
+  形: JSX.Element,
+  node: LaidNode,
+  揃え: "start" | "middle",
+): JSX.Element {
+  const cx = node.cx;
+  const y = node.cy - node.h / 2;
   const 名前 = (node.title ?? "").trim();
   const 値 = (node.subtitle ?? "").trim();
   // どちらも書かれていない節では包む `<g>` も足さない = 書かない図の DOM を 1 要素も変えない
   if (名前 === "" && 値 === "") return 形;
-  const 揃え = 箱いっぱいに描く(shape.kind) ? "start" : "middle";
   return (
     <g>
       {形}
       {名前 !== "" && (
         <text
           data-cdl-role="shape-name"
-          x={揃え === "start" ? x : cx}
+          x={揃え === "start" ? node.cx - node.w / 2 : cx}
           y={y - NAME_GAP}
           textAnchor={揃え}
           fontSize={13}
@@ -106,7 +119,7 @@ export function DynShapeNode({
         <text
           data-cdl-role="shape-value"
           x={cx}
-          y={y + h + VALUE_GAP}
+          y={y + node.h + VALUE_GAP}
           textAnchor="middle"
           fontSize={12}
           fill="var(--cdl-text-dim, #5a6270)"

package/src/kinds/funnel.tsx

@@ -1,5 +1,5 @@
 import { useId, type JSX } from "react";
-import type { LaidNode, Tone } from "../types";
+import type { CdlTextMetrics, LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
 import { resolveFunnelData } from "../render/payload-binding";
 import { 収める倍率 } from "../layout/text-width";
@@ -18,6 +18,7 @@ export function FunnelNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -26,6 +27,7 @@ export function FunnelNode({
   drawing?: boolean;
   /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
   progress?: number;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -109,7 +111,12 @@ export function FunnelNode({
     const 補足の枠字 = 補足の字 * 縦倍;
     const 収まる幅 = Math.max(0, bottomW - 16);
     const 補足の実字 =
-      補足の枠字 * 収める倍率(補足, { fontSize: 補足の枠字, fontWeight: 500 }, 収まる幅);
+      補足の枠字 *
+      収める倍率(
+        補足,
+        { fontSize: 補足の枠字, fontWeight: 500, textMetrics },
+        収まる幅,
+      );
     // 2 行の塊を段の中央に積む。 縦の位置は枠の字 (縮める前) で決める = 幅で縮めた分だけ
     // 行が上下に動くと、段ごとに行の高さが揃わない
     const 塊の上 = y + stageH / 2 - (名前の実字 * 1.2 + 補足の枠字 * 1.25) / 2;

package/src/kinds/generic.tsx

@@ -1,6 +1,6 @@
 import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
-import type { LaidNode, NodeKind } from "../types";
+import type { CdlTextMetrics, LaidNode, NodeKind } from "../types";
 import { toneColor } from "./node-tone";
 import { interpolate } from "../render/utils";
 import type { 値の名前の表 } from "../input-option";
@@ -237,6 +237,7 @@ export function GenericNode({
   value,
   stateValues,
   値の名前,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -244,6 +245,7 @@ export function GenericNode({
   stateValues: Record<string, string>;
   /** 入力欄の値ごとの名前 (#855)。 値と行の差し込みに使う */
   値の名前?: 値の名前の表;
+  textMetrics?: CdlTextMetrics;
 }): JSX.Element {
   const base = STYLES[node.kind] ?? FALLBACK;
   // `tone` 指定があれば kind の既定色を置き換える。 色を決める式は `node-tone.ts` に集約。
@@ -458,7 +460,8 @@ export function GenericNode({
         // 左列は比例の書体で描く (`font-family` を指定していないので継承する)。 字数に一定を
         // 掛ける形では実物に届かず、 右列が左列の字に重なる (`#425`)。 字ごとの幅で見積もる。
         const leftMaxWidth = splits.reduce(
-          (m, s) => Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)),
+          (m, s) =>
+            Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false, textMetrics)),
           0,
         );
         const rightColX = ROW_PAD_X_PX + leftMaxWidth + ROW_COL_GAP_PX;