@cardenelabs/cdl 0.122.0 → 0.124.0

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/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) {

package/src/kinds/tree.tsx

@@ -1,8 +1,15 @@
 import type { JSX } from "react";
-import type { LaidNode, TreeNodePayload } from "../types";
+import type { CdlTextMetrics, LaidNode, TreeNodePayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveTreeData } from "../render/payload-binding";
-import { 使える幅, 幅に収める, 箱に積む, type 積む行, type 積んだ行 } from "../kinds/box-lines";
+import {
+  使える幅,
+  幅に収める,
+  箱に積む,
+  箱の字を測る,
+  type 積む行,
+  type 積んだ行,
+} from "../kinds/box-lines";
 import { measureTextWidth } from "../layout/text-width";
 import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
 
@@ -157,10 +164,16 @@ export const 木の枝の太さ = (段: number): number => Math.max(1.1, 2.6 -
 export function 木の中身(
   node: LaidNode,
   stateValues: Record<string, string> = {},
+  textMetrics: CdlTextMetrics = "proportional",
 ): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
   // 名前は状態を読める (#467)。 解決できない名前は書いたまま残して印を付ける
   const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
-  return computeTreeLayout(treeNodes, node.w - PAD_LEFT - PAD_RIGHT, node.h - PAD_TOP - PAD_BOTTOM);
+  return computeTreeLayout(
+    treeNodes,
+    node.w - PAD_LEFT - PAD_RIGHT,
+    node.h - PAD_TOP - PAD_BOTTOM,
+    textMetrics,
+  );
 }
 
 /**
@@ -182,6 +195,7 @@ export function TreeNode({
   stateValues = {},
   drawing = false,
   progress = 1,
+  textMetrics = "proportional",
 }: {
   node: LaidNode;
   active: boolean;
@@ -190,12 +204,15 @@ export function TreeNode({
   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;
   const gradientId = `tree-root-grad-${node.id}`;
 
-  const layout = 木の中身(node, stateValues);
+  const layout = 木の中身(node, stateValues, textMetrics);
+  const 測る = 箱の字を測る(textMetrics);
 
   /**
    * 枝がどこまで伸びたか (0..1、 cdl#520)。 描く指定が無ければ常に 1 = 全部出ている。
@@ -273,7 +290,7 @@ export function TreeNode({
         const isRoot = n.depth === 0;
         // 補足は箱の中の 2 行目に出す (#471)。 箱の高さは変えないため、 入らない時は落ちる
         const 材料 = 木の行(n);
-        const 行 = 箱に積む(材料, n.w, n.h);
+        const 行 = 箱に積む(材料, n.w, n.h, 測る);
         // **判定は行数でなく「補足を渡したか」 で行う**。 行数で見ると、 箱が低くて補足が落ちた時に
         // 従来の 1 行の経路へ戻り、 幅で切っていない名前が箱から横にはみ出す (#471 Round 1)
         const 補足あり = (n.subtitle ?? "").trim() !== "";
@@ -283,7 +300,7 @@ export function TreeNode({
         const 名前 = 材料[0]!;
         const 収めた名前 = 補足あり
           ? undefined
-          : 幅に収める(名前.text, 名前.fontSize, 使える幅(n.w));
+          : 幅に収める(名前.text, 名前.fontSize, 使える幅(n.w), 測る);
         return (
           <g
             key={`n-${n.id}`}
@@ -395,6 +412,7 @@ export function computeTreeLayout(
   treeNodes: TreeNodePayload[],
   canvasW: number,
   canvasH: number,
+  textMetrics: CdlTextMetrics = "proportional",
 ): {
   nodes: LayoutNode[];
   edges: LayoutEdge[];
@@ -480,7 +498,7 @@ export function computeTreeLayout(
     const 名前 = 材料[0]!;
     // `使える幅` が引く左右の余白を足し戻す = 余白の値をここに書き写さない
     const 要る =
-      measureTextWidth(名前.text, { fontSize: 名前.fontSize, fontWeight: 600 }) +
+      measureTextWidth(名前.text, { fontSize: 名前.fontSize, fontWeight: 600, textMetrics }) +
       (nodeW - 使える幅(nodeW));
     return Math.min(Math.max(要る, nodeW), slotW * 0.92);
   };

package/src/layout/collisions.ts

@@ -1,4 +1,4 @@
-import type { BBox, LaidEdge, LaidLane, LaidNode } from "../types";
+import type { BBox, CdlTextMetrics, LaidEdge, LaidLane, LaidNode } from "../types";
 import { CHAIN_SHIFT_MAX_ACCUMULATED, computeLabelBBoxWorld, EDGE_STUB_OUT, hasRenderedLabel, LABEL_TO_PATH_CLEARANCE, requiredNearClearance } from "./spec";
 import { DIST_LABEL_PATH_MAX } from "./clearance-constants";
 import { footerShapeDrops } from "./footer-shape";
@@ -22,7 +22,12 @@ const NEAR_MISS_MARGIN = LANE_LABEL_CLEARANCE_MARGIN;
 /**
  * 全要素の AABB を集約。 engine が「キャンバスに何があるか」 を全部把握する SSOT。
  */
-export function collectBBoxes(lanes: LaidLane[], nodes: LaidNode[], edges: LaidEdge[]): BBox[] {
+export function collectBBoxes(
+  lanes: LaidLane[],
+  nodes: LaidNode[],
+  edges: LaidEdge[],
+  textMetrics: CdlTextMetrics = "proportional",
+): BBox[] {
   const out: BBox[] = [];
 
   for (const lane of lanes) {
@@ -32,7 +37,7 @@ export function collectBBoxes(lanes: LaidLane[], nodes: LaidNode[], edges: LaidE
       id: lane.id,
       x: lane.x + 16,
       y: lane.y + 8,
-      w: measureTextWidth(lane.label, { fontSize: 20, letterSpacing: 2 }) + 24,
+      w: measureTextWidth(lane.label, { fontSize: 20, letterSpacing: 2, textMetrics }) + 24,
       h: 28,
     });
   }
@@ -62,7 +67,7 @@ export function collectBBoxes(lanes: LaidLane[], nodes: LaidNode[], edges: LaidE
     // だったが、 render 側は boxH = 68 + yOffset shifted で描画するため実測 bbox と layout 予測が
     // 乖離、 near-collision detection の偽陰性を生んでいた。 本 SSOT 統一で render 実 rect 位置と
     // 一致する。
-    const bbox = computeLabelBBoxWorld(e);
+    const bbox = computeLabelBBoxWorld(e, textMetrics);
     out.push({
       kind: "edge-label",
       id: e.id,
@@ -1349,6 +1354,7 @@ export function resolveEdgeLabelOverlapsWithChain(
   fixedObstacles: BBox[],
   minClearance = 16,
   maxIter = 20,
+  textMetrics: CdlTextMetrics = "proportional",
 ): LaidEdge[] {
   if (edges.length === 0) return edges;
 
@@ -1356,7 +1362,7 @@ export function resolveEdgeLabelOverlapsWithChain(
   // 本 function / render/edges.tsx / predict-bbox.ts 4 箇所の drift を解消)。 shift 探索中の
   // offsetX / offsetY 追加は label 位置探索の temporal offset なので helper 呼出後に加算する。
   const labelBBox = (e: LaidEdge, offsetX: number, offsetY: number): BBox => {
-    const base = computeLabelBBoxWorld(e);
+    const base = computeLabelBBoxWorld(e, textMetrics);
     return {
       kind: "edge-label",
       id: e.id,
@@ -1544,6 +1550,7 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
    * などで label が sibling path 近傍 (LABEL_INIT_CLEARANCE 26) にある正常状態を誤検知しない。
    */
   pathLabelClearance = LABEL_TO_PATH_CLEARANCE,
+  textMetrics: CdlTextMetrics = "proportional",
 ): {
   edges: LaidEdge[];
   nodeShifts: Map<string, { dx: number; dy: number }>;
@@ -1564,7 +1571,7 @@ export function resolveEdgeLabelOverlapsWithChainAndPropagate(
 
   // label bbox 生成 helper (spec.ts SSOT、 shift offset 込み)。
   const labelBBox = (e: LaidEdge, offsetX: number, offsetY: number): BBox => {
-    const base = computeLabelBBoxWorld(e);
+    const base = computeLabelBBoxWorld(e, textMetrics);
     return {
       kind: "edge-label",
       id: e.id,
@@ -2597,13 +2604,18 @@ export function 札が動けない理由(
   相手: BBox,
   edges: readonly LaidEdge[],
   obstacles: readonly BBox[],
+  textMetrics: CdlTextMetrics = "proportional",
 ): string | null {
   const edgeById = new Map(edges.map((e) => [e.id, e] as const));
   const 自分 = edgeById.get(labelId);
   if (!自分) return null;
   const labels: BBox[] = edges
     .filter((e) => e.label?.trim() || e.sub?.trim())
-    .map((e) => ({ kind: "edge-label" as const, id: e.id, ...computeLabelBBoxWorld(e) }));
+    .map((e) => ({
+      kind: "edge-label" as const,
+      id: e.id,
+      ...computeLabelBBoxWorld(e, textMetrics),
+    }));
   const label = labels.find((l) => l.id === labelId);
   if (!label) return null;
   const 測り方 = 線の測り方を作る();
@@ -2694,6 +2706,7 @@ export function resolveLabelClearanceAfterPathPasses(
   edges: LaidEdge[],
   obstacles: BBox[],
   maxIter = 8,
+  textMetrics: CdlTextMetrics = "proportional",
 ): LaidEdge[] {
   if (edges.length === 0) return edges;
 
@@ -2717,7 +2730,7 @@ export function resolveLabelClearanceAfterPathPasses(
     const out: BBox[] = [];
     for (const e of edges) {
       if (!labeledIds.has(e.id)) continue;
-      const base = computeLabelBBoxWorld(e);
+      const base = computeLabelBBoxWorld(e, textMetrics);
       const s = getShift(e.id);
       out.push({ kind: "edge-label", id: e.id, x: base.x + s.dx, y: base.y + s.dy, w: base.w, h: base.h });
     }

package/src/layout/curve-path.ts

@@ -1,4 +1,4 @@
-import type { CdlEdge, LaidNode, Side } from "../types";
+import type { CdlEdge, CdlTextMetrics, LaidNode, Side } from "../types";
 import { computeLabelBoxW, EDGE_STUB_OUT, labelPathClearanceHorizontal, labelPillH } from "./spec";
 
 type 箱 = Pick<LaidNode, "cx" | "cy" | "w" | "h">;
@@ -31,6 +31,7 @@ export function curvePath(
   to: 箱,
   edge?: Pick<CdlEdge, "label" | "sub" | "style" | "overlay">,
   labelMarginExtra = 0,
+  textMetrics: CdlTextMetrics = "proportional",
 ): 曲線の結果 {
   const fromLeft = from.cx - from.w / 2;
   const fromRight = from.cx + from.w / 2;
@@ -107,7 +108,7 @@ export function curvePath(
     normalY *= -1;
   }
 
-  const labelW = computeLabelBoxW(edge?.label, edge?.sub);
+  const labelW = computeLabelBoxW(edge?.label, edge?.sub, textMetrics);
   const labelH = labelPillH(edge?.sub);
   const distance =
     labelPathClearanceHorizontal(edge) +