@cardenelabs/cdl 0.122.0 → 0.123.0

package/src/layout/edges.ts

@@ -1,4 +1,13 @@
-import type { BBox, CdlDiagram, CdlEdge, LaidEdge, LaidLane, LaidNode, Side } from "../types";
+import type {
+  BBox,
+  CdlDiagram,
+  CdlEdge,
+  CdlTextMetrics,
+  LaidEdge,
+  LaidLane,
+  LaidNode,
+  Side,
+} from "../types";
 import {
   CLEARANCE_LABEL_LABEL,
   CLEARANCE_NODE_LABEL,
@@ -211,7 +220,12 @@ function detourColumnFor(blockers: LaidNode[], side: DetourSide): number {
     : Math.max(...blockers.map((n) => n.cx + n.w / 2)) + VERTICAL_DETOUR_GAP;
 }
 
-export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane[] = []): LaidEdge[] {
+export function layoutEdges(
+  diag: CdlDiagram,
+  nodes: LaidNode[],
+  lanes: LaidLane[] = [],
+  textMetrics: CdlTextMetrics = "proportional",
+): LaidEdge[] {
   // labelMargin = author 追加余白、 path 中点 → label の垂直距離に加算 (上向き label は -=、 下向きは +=)。
   // viewport.labelMargin 明示時はその差分、 未指定なら viewport.gap → DEFAULT_LABEL_MARGIN の順で fallback。
   const labelMarginExtra =
@@ -258,7 +272,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       const to = nmap.get(e.to);
       if (!from) throw new Error(`cdl layout: edge "${e.id}" の from "${e.from}" が node に無い`);
       if (!to) throw new Error(`cdl layout: edge "${e.id}" の to "${e.to}" が node に無い`);
-      const c = curvePath(from, to, e, labelMarginExtra);
+      const c = curvePath(from, to, e, labelMarginExtra, textMetrics);
       positionedEdges.push({
         ...e,
         d: c.d,
@@ -273,7 +287,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       const to = nmap.get(e.to);
       if (!from) throw new Error(`cdl layout: edge "${e.id}" の from "${e.from}" が node に無い`);
       if (!to) throw new Error(`cdl layout: edge "${e.id}" の to "${e.to}" が node に無い`);
-      const m = metroPath(from, to, e, labelMarginExtra);
+      const m = metroPath(from, to, e, labelMarginExtra, textMetrics);
       positionedEdges.push({
         ...e,
         d: m.d,
@@ -329,7 +343,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     使う(le.from, le.fromSide);
     使う(le.to, le.toSide);
   }
-  const loopEdges = layoutSelfLoops(selfLoopEdges, nmap, occupiedBySide);
+  const loopEdges = layoutSelfLoops(selfLoopEdges, nmap, occupiedBySide, textMetrics);
 
   // CAR-429 (CAR-426-B) ... 全 edge の起点 / 終点 / L 字 corner は node 辺 Y 中央固定 (offset=0 SSOT)。
   // 旧 fan-in / fan-out / parallel の sidepoint 分散 (±60/±120) は削除済で、
@@ -687,7 +701,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     if (others.some((n) => segmentsCrossRect(segs, nodeRect(n)))) return true;
 
     if (!hasRenderedLabel(c.e)) return false;
-    const boxW = computeLabelBoxW(c.e.label, c.e.sub);
+    const boxW = computeLabelBoxW(c.e.label, c.e.sub, textMetrics);
     const boxH = labelPillH(c.e.sub);
     const centerX = columnX - (labelPathClearanceHorizontal(c.e) + boxW / 2);
     const pill = { x: centerX - boxW / 2, y: (exitY + returnY) / 2 - boxH / 2, w: boxW, h: boxH };
@@ -872,6 +886,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       { x: endpointOffset.fromDx, y: endpointOffset.fromDy },
       { x: endpointOffset.toDx, y: endpointOffset.toDy },
       avoidRects,
+      textMetrics,
     );
     const routed1 = route([]);
     const { d, labelX, labelY, labelAnchor, labelAltX } = routed1;
@@ -953,7 +968,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     const pillById = new Map<string, Rect>();
     for (const r of list) {
       if (!hasRenderedLabel(r.e)) continue;
-      const w = computeLabelBoxW(r.e.label, r.e.sub);
+      const w = computeLabelBoxW(r.e.label, r.e.sub, textMetrics);
       const h = labelPillH(r.e.sub);
       pillById.set(r.e.id, { x: r.baseLabelX - w / 2, y: r.baseLabelY - h / 2, w, h });
     }
@@ -961,7 +976,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     // 迂回線がその pill を貫く
     for (const le of positionedEdges) {
       if (!hasRenderedLabel(le)) continue;
-      const w = computeLabelBoxW(le.label, le.sub);
+      const w = computeLabelBoxW(le.label, le.sub, textMetrics);
       const h = labelPillH(le.sub);
       pillById.set(le.id, { x: le.labelX - w / 2, y: le.labelY - h / 2, w, h });
     }
@@ -1018,7 +1033,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
 
     for (const r of flippable) {
       const ownSegs = segsByEdgeId.get(r.e.id)!;
-      const boxW = computeLabelBoxW(r.e.label, r.e.sub);
+      const boxW = computeLabelBoxW(r.e.label, r.e.sub, textMetrics);
       const boxH = labelPillH(r.e.sub);
       const pillAt = (centerX: number) => ({
         x: centerX - boxW / 2,
@@ -1094,7 +1109,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       // 横の重なりで連結成分に割り、 成分ごとに縦を解く。
       const boxes = list.map((r) => ({
         cx: r.baseLabelX,
-        halfW: computeLabelBoxW(r.e.label, r.e.sub) / 2,
+        halfW: computeLabelBoxW(r.e.label, r.e.sub, textMetrics) / 2,
       }));
       const overlapsX = (i: number, j: number): boolean =>
         Math.abs(boxes[i]!.cx - boxes[j]!.cx) < boxes[i]!.halfW + boxes[j]!.halfW + CLEARANCE_LABEL_LABEL;
@@ -1172,7 +1187,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
       r,
       baseX: r.baseLabelX,
       baseY: r.baseLabelY,
-      w: computeLabelBoxW(r.e.label, r.e.sub),
+      w: computeLabelBoxW(r.e.label, r.e.sub, textMetrics),
       h: labelPillH(r.e.sub),
     }));
     items.sort((a, b) => a.baseX - b.baseX);
@@ -1374,6 +1389,7 @@ export function bowSharedStraightPaths(
   edges: LaidEdge[],
   nodes: LaidNode[],
   skipIds: ReadonlySet<string>,
+  textMetrics: CdlTextMetrics = "proportional",
 ): void {
   /**
    * 向きを無視した線分の key。 A→B と B→A を同じ群にする。
@@ -1445,7 +1461,7 @@ export function bowSharedStraightPaths(
     const groupIds = new Set(group.map((g) => g.e.id));
     const labelRects = edges
       .filter((x) => hasRenderedLabel(x) && !groupIds.has(x.id))
-      .map((x) => computeLabelBBoxWorld(x));
+      .map((x) => computeLabelBBoxWorld(x, textMetrics));
     const nodeRects = nodes.map((n) => ({ x: n.cx - n.w / 2, y: n.cy - n.h / 2, w: n.w, h: n.h }));
     const build = (seg: Entry["seg"], offset: number): string => {
       // 2 次曲線は制御点の半分の高さを通るので、 狙いの膨らみの 2 倍を制御点に与える。
@@ -1646,6 +1662,7 @@ function routePath(
    * `widenDetourStubs` が同じ引数に本 list を足して呼び直す。
    */
   avoidRects: readonly Rect[] = [],
+  textMetrics: CdlTextMetrics = "proportional",
 ): {
   d: string;
   labelX: number;
@@ -1669,7 +1686,7 @@ function routePath(
   // label 幅 = SSOT = spec.ts の computeLabelBoxW (CAR-431 で collections.ts labelBBox /
   // render/edges.tsx / predict-bbox.ts の 4 箇所計算を集約)。 L 字 midX / midY を label 収納可能な
   // 位置に押し出す判定で使う。 CLEARANCE_NODE_LABEL は clearance-constants.ts SSOT import。
-  const labelBoxW = edge ? computeLabelBoxW(edge.label, edge.sub) : 0;
+  const labelBoxW = edge ? computeLabelBoxW(edge.label, edge.sub, textMetrics) : 0;
   const labelHalfW = labelBoxW / 2;
   // CAR-518 SSOT ... solid = LABEL_INIT_CLEARANCE (34、 CAR-630 で 26 → 34 復帰)、 dotted-flow = LABEL_INIT_CLEARANCE_DOTTED_FLOW (62、 CAR-630 で 54 → 62 復帰)。
   // routePath 内 labelY 計算 8 箇所で参照、 style 分岐を helper 経由で単一 SSOT 化する。
@@ -2418,7 +2435,11 @@ function routePath(
  * @param edges 確定済 path を持つ辺。 `labelY` のみを書き換える
  * @param nodes 節。 間隔が悪化する置き方を捨てるために使う
  */
-export function repositionParallelLabels(edges: LaidEdge[], nodes: LaidNode[]): void {
+export function repositionParallelLabels(
+  edges: LaidEdge[],
+  nodes: LaidNode[],
+  textMetrics: CdlTextMetrics = "proportional",
+): void {
   // 図の全ての線 (実際に描かれる形)。 1 度だけ開いて使い回す。
   const allSegs = new Map(
     edges.map((e) => [e.id, flattenPathSegments(extractPathSegments(e.d))] as const),
@@ -2451,7 +2472,7 @@ export function repositionParallelLabels(edges: LaidEdge[], nodes: LaidNode[]):
     const pairOrder = [...pair].sort(compareSharedPairOrder);
 
     // 横に重なる label ごとに塊を作る (1 つだけの塊も含む)。
-    const boxes = pair.map((e) => computeLabelBBoxWorld(e));
+    const boxes = pair.map((e) => computeLabelBBoxWorld(e, textMetrics));
     const componentOf = pair.map((_, i) => i);
     for (let i = 0; i < pair.length; i++) {
       for (let j = i + 1; j < pair.length; j++) {
@@ -2479,6 +2500,7 @@ export function repositionParallelLabels(edges: LaidEdge[], nodes: LaidNode[]):
         allEdges: edges,
         allSegs,
         xRange,
+        textMetrics,
       });
       for (let i = 0; i < members.length; i++) members[i]!.labelY = placed[i]!;
     }
@@ -2511,11 +2533,21 @@ function placeAvoidingSiblingPaths(args: {
   allEdges: LaidEdge[];
   allSegs: Map<string, Array<{ x1: number; y1: number; x2: number; y2: number }>>;
   xRange: Map<string, { min: number; max: number }>;
+  textMetrics?: CdlTextMetrics;
 }): number[] {
-  const { members, pair, pairOrder, nodes, allEdges, allSegs, xRange } = args;
+  const {
+    members,
+    pair,
+    pairOrder,
+    nodes,
+    allEdges,
+    allSegs,
+    xRange,
+    textMetrics = "proportional",
+  } = args;
   const sizes = members.map((e) => labelPillH(e.sub));
   const wants = members.map((e) => e.labelY);
-  const boxes = members.map((e) => computeLabelBBoxWorld(e));
+  const boxes = members.map((e) => computeLabelBBoxWorld(e, textMetrics));
   const all = members.map((_, i) => i);
   const spread = (idx: number[]): number[] =>
     spreadWithMinimalShift(
@@ -2799,7 +2831,11 @@ function inflate(r: Rect, pad: number): Rect {
  * 余白は `LABEL_SLIDE_CLEARANCES` を大きい方から試し、 その余白を確保できる位置のうち
  * 今の位置に一番近いものを採る。 どの余白でも置けない場合は動かさない。
  */
-export function slideLabelsAlongOwnPath(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
+export function slideLabelsAlongOwnPath(
+  edges: LaidEdge[],
+  nodes: readonly LaidNode[],
+  textMetrics: CdlTextMetrics = "proportional",
+): void {
   const withLabel = edges.filter((e) => hasRenderedLabel(e));
   if (withLabel.length === 0) return;
   const segsById = new Map<string, FlatSeg[]>();
@@ -2807,7 +2843,7 @@ export function slideLabelsAlongOwnPath(edges: LaidEdge[], nodes: readonly LaidN
   const nodeRects = nodes.map(nodeRect);
 
   for (const e of withLabel) {
-    const w = computeLabelBoxW(e.label, e.sub);
+    const w = computeLabelBoxW(e.label, e.sub, textMetrics);
     const h = labelPillH(e.sub);
     if (w === 0 || h === 0) continue;
     const own = segsById.get(e.id) ?? [];
@@ -3232,7 +3268,11 @@ export function separateSharedStraightRuns(edges: LaidEdge[], nodes: readonly La
  * 起点は `fan-origin-single-point` のため動かさず、 最初の折れ直後の区間を平行移動する。
  * 1 本しか出ない辺は `detourStub` が決めた箱との中間位置をそのまま保つ。
  */
-export function pullOutgoingFirstCorner(edges: LaidEdge[], nodes: readonly LaidNode[]): void {
+export function pullOutgoingFirstCorner(
+  edges: LaidEdge[],
+  nodes: readonly LaidNode[],
+  textMetrics: CdlTextMetrics = "proportional",
+): void {
   if (edges.length < 2) return;
 
   const 束 = new Map<string, LaidEdge[]>();
@@ -3303,10 +3343,10 @@ export function pullOutgoingFirstCorner(edges: LaidEdge[], nodes: readonly LaidN
       // 旧経路に重なっていた札を先に確定する。 経路を動かした後では重なりが消え、 札だけが
       // 元の位置に取り残される。
       if (!札を旧経路へ追従済み) {
-        slideLabelsAlongOwnPath(edges, nodes);
+        slideLabelsAlongOwnPath(edges, nodes, textMetrics);
         札を旧経路へ追従済み = true;
       }
-      const labelBox = computeLabelBBoxWorld(e);
+      const labelBox = computeLabelBBoxWorld(e, textMetrics);
       const label = { x: labelBox.x + labelBox.w / 2, y: labelBox.y + labelBox.h / 2 };
       const 線分までの距離2 = (a: Vertex, b: Vertex): number => {
         const dx = b.x - a.x;
@@ -3510,13 +3550,14 @@ export function followLabelsToFannedTails(
   edges: LaidEdge[],
   obstacles: readonly BBox[],
   shifts: ReadonlyMap<string, { dx: number; dy: number }>,
+  textMetrics: CdlTextMetrics = "proportional",
 ): void {
   if (shifts.size === 0) return;
   const 測り方 = 線の測り方を作る();
   const labels: BBox[] = edges.filter(hasRenderedLabel).map((e) => ({
     kind: "edge-label",
     id: e.id,
-    ...computeLabelBBoxWorld(e),
+    ...computeLabelBBoxWorld(e, textMetrics),
   }));
   const labelIndexByEdgeId = new Map(labels.map((label, index) => [label.id, index] as const));
   const edgeById = new Map(edges.map((e) => [e.id, e] as const));
@@ -3555,7 +3596,7 @@ export function followLabelsToFannedTails(
       labelY: e.labelY + 移動.dy,
       labelAnchor: e.labelAnchor,
     };
-    const 候補aの箱 = computeLabelBBoxWorld({ ...e, ...候補a });
+    const 候補aの箱 = computeLabelBBoxWorld({ ...e, ...候補a }, textMetrics);
     const 最後は縦 = Math.abs(最後.x2 - 最後.x1) <= Math.abs(最後.y2 - 最後.y1);
     const 候補 = [
       候補a,
@@ -3571,7 +3612,11 @@ export function followLabelsToFannedTails(
     ];
 
     for (const c of 候補) {
-      const 札: BBox = { kind: "edge-label", id: e.id, ...computeLabelBBoxWorld({ ...e, ...c }) };
+      const 札: BBox = {
+        kind: "edge-label",
+        id: e.id,
+        ...computeLabelBBoxWorld({ ...e, ...c }, textMetrics),
+      };
       if (segmentsCrossRect([最後], 札)) continue;
       if (札の移動を塞ぐ相手を探す(周り, 元の札, 札) !== null) continue;
 

package/src/layout/head-label.ts

@@ -17,7 +17,7 @@
  * 使う。 弦の向きを使うと、大きく膨らむ曲線で線が端へ入ってくる向きと別の向きが出る。
  */
 import { EDGE_LABEL_TEXT } from "../label-text";
-import { EDGE_HEAD_MARKER_SIZE } from "../types";
+import { EDGE_HEAD_MARKER_SIZE, type CdlTextMetrics } from "../types";
 import { extractPathSegments } from "./collisions";
 import { hasRenderedLabel } from "./spec";
 import { measureTextWidth } from "./text-width";
@@ -171,6 +171,7 @@ export function 端の字を置く(
     labelY?: number;
   },
   端: 線の端 = "head",
+  textMetrics: CdlTextMetrics = "proportional",
 ): 端の字の置き場所 | null {
   const text = (端 === "head" ? edge.headLabel : edge.tailLabel)?.trim();
   if (!text) return null;
@@ -183,6 +184,7 @@ export function 端の字を置く(
     fontSize: 端の字の大きさ,
     fontWeight: EDGE_LABEL_TEXT.sub.fontWeight,
     fontFamily: "mono",
+    textMetrics,
   });
   const h = 箱の高さ;
   // 札の中心。 札を描かない線と、位置がまだ無い線は `null`

package/src/layout/lanes.ts

@@ -1,4 +1,4 @@
-import type { CdlDiagram, CdlEdge, LaidLane, LaidNode } from "../types";
+import type { CdlDiagram, CdlEdge, CdlTextMetrics, LaidLane, LaidNode } from "../types";
 import { CLEARANCE_NODE_LABEL } from "./clearance-constants";
 import { computeLabelBoxW, EDGE_STUB_OUT, targetNodeNodeClearance } from "./spec";
 import { CONTAIN_PAD, DEFAULT_LANE_GAP, HEADER_RESERVE, LANE_LABEL_H, LANE_PAD_MIN } from "./tokens";
@@ -194,6 +194,7 @@ export function expandLaneGapsForEdgeLabels(
   lanes: LaidLane[],
   nodes: LaidNode[],
   edges: readonly CdlEdge[],
+  textMetrics: CdlTextMetrics = "proportional",
 ): LaidLane[] {
   if (lanes.length < 2) return lanes;
   // canvas pivot 新 spec (dragon canvas pivot spec §layout-role-conversion)。
@@ -240,7 +241,7 @@ export function expandLaneGapsForEdgeLabels(
     const fi = laneIndexById.get(fromLane);
     const ti = laneIndexById.get(toLane);
     if (fi === undefined || ti === undefined || fi === ti) continue;
-    const labelBoxW = computeLabelBoxW(edge.label, edge.sub);
+    const labelBoxW = computeLabelBoxW(edge.label, edge.sub, textMetrics);
     if (labelBoxW === 0) continue;
     const lo = Math.min(fi, ti);
     const hi = Math.max(fi, ti);

package/src/layout/metro-path.ts

@@ -1,4 +1,4 @@
-import type { CdlEdge, LaidNode, Side } from "../types";
+import type { CdlEdge, CdlTextMetrics, LaidNode, Side } from "../types";
 import { SAME_HEIGHT_THRESHOLD } from "./curve-path";
 import { computeLabelBoxW, EDGE_STUB_OUT, labelPathClearanceHorizontal, labelPillH } from "./spec";
 
@@ -49,6 +49,7 @@ export function metroPath(
   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;
@@ -166,7 +167,7 @@ export function metroPath(
     normalX *= -1;
     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) +

package/src/layout/nodes.ts

@@ -1,5 +1,5 @@
 import { requiredRowsWidth } from "../kinds/row-align";
-import type { CdlDiagram, LaidLane, LaidNode } from "../types";
+import type { CdlDiagram, CdlTextMetrics, LaidLane, LaidNode } from "../types";
 import { 端の字に要る線の長さ } from "./head-label";
 import {
   hasRenderedLabel,
@@ -77,10 +77,14 @@ function autoStorageHeight(
  *
  * 著者が n.w を明示している場合は尊重 (snapshot 互換 / catalog thumbnail 縮小指定を壊さない)。
  */
-function autoRowsWidth(n: { kind: string; rows?: string[]; w?: number }, defaultW: number): number {
+function autoRowsWidth(
+  n: { kind: string; rows?: string[]; w?: number },
+  defaultW: number,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
   if (n.w != null) return n.w;
   if (!n.rows || n.rows.length === 0) return defaultW;
-  const required = requiredRowsWidth(n.rows, n.kind);
+  const required = requiredRowsWidth(n.rows, n.kind, textMetrics);
   return Math.max(defaultW, required);
 }
 
@@ -171,7 +175,11 @@ function requiredStackGapForEdgeLabels(diag: CdlDiagram, allStacks: readonly num
   return required;
 }
 
-export function layoutNodes(diag: CdlDiagram, lanes: LaidLane[]): LaidNode[] {
+export function layoutNodes(
+  diag: CdlDiagram,
+  lanes: LaidLane[],
+  textMetrics: CdlTextMetrics,
+): LaidNode[] {
   const laneMap = new Map(lanes.map((l) => [l.id, l]));
 
   // 全 lane を跨いで stack 番号で row を共有する。
@@ -232,7 +240,7 @@ export function layoutNodes(diag: CdlDiagram, lanes: LaidLane[]): LaidNode[] {
     }
     const size = NODE_SIZE[n.kind];
     if (n.posX !== undefined && n.posY !== undefined) {
-      const w = n.posW ?? n.w ?? autoRowsWidth(n, size.w);
+      const w = n.posW ?? n.w ?? autoRowsWidth(n, size.w, textMetrics);
       const h = n.posH ?? n.h ?? rowH.get(n.stack) ?? size.h;
       out.push({
         ...n,
@@ -270,7 +278,7 @@ export function layoutNodes(diag: CdlDiagram, lanes: LaidLane[]): LaidNode[] {
     const h = n.h ?? (自前の高さ ? 箱の高さ(n, size.h) : 段の高さ);
     const cy = 段の芯;
     // n.w 明示時は尊重、 未指定で rows[] を持つ node は内容長に合わせて auto 拡張。
-    const w = autoRowsWidth(n, size.w);
+    const w = autoRowsWidth(n, size.w, textMetrics);
     out.push({
       ...n,
       cx,

package/src/layout/predict-bbox.ts

@@ -9,7 +9,7 @@
  */
 
 import { computeLabelBBoxWorld } from "./spec";
-import type { LaidEdge, LaidNode } from "../types";
+import type { CdlTextMetrics, LaidEdge, LaidNode } from "../types";
 
 /**
  * Edge label の world 単位 bbox 予測 (spec.ts SSOT の re-export)。
@@ -22,8 +22,11 @@ import type { LaidEdge, LaidNode } from "../types";
  * @param edge LaidEdge (labelX, labelY, labelAnchor, label, sub 既確定)
  * @returns { x, y, w, h } の world 座標 bbox (render 実 rect 位置と一致)
  */
-export function predictLabelBBoxWorld(edge: LaidEdge): { x: number; y: number; w: number; h: number } {
-  return computeLabelBBoxWorld(edge);
+export function predictLabelBBoxWorld(
+  edge: LaidEdge,
+  textMetrics: CdlTextMetrics = "proportional",
+): { x: number; y: number; w: number; h: number } {
+  return computeLabelBBoxWorld(edge, textMetrics);
 }
 
 /**

package/src/layout/self-loop.ts

@@ -1,4 +1,4 @@
-import type { CdlEdge, LaidEdge, LaidNode, Side } from "../types";
+import type { CdlEdge, CdlTextMetrics, LaidEdge, LaidNode, Side } from "../types";
 import { CLEARANCE_LABEL_LABEL } from "./clearance-constants";
 import { computeLabelBoxW, LABEL_TO_PATH_CLEARANCE, labelPillH } from "./spec";
 
@@ -120,7 +120,12 @@ export function pickFreeSides(occupied: ReadonlySet<Side> | undefined, count: nu
  *
  * 1 本だけの時は積む必要が無いので、辺の中央の真横に 1 つ置くだけになる。
  */
-export function routeSelfLoopGroup(edges: CdlEdge[], node: LaidNode, side: Side): LaidEdge[] {
+export function routeSelfLoopGroup(
+  edges: CdlEdge[],
+  node: LaidNode,
+  side: Side,
+  textMetrics: CdlTextMetrics = "proportional",
+): LaidEdge[] {
   const horizontal = side === "left" || side === "right";
   const g = sideGeometry(node, side);
   const span = fitSpan(horizontal ? node.h : node.w, SELF_LOOP_SPAN);
@@ -135,7 +140,7 @@ export function routeSelfLoopGroup(edges: CdlEdge[], node: LaidNode, side: Side)
 
   // 積む向きの語の大きさ。 横の辺なら縦に積むので高さ、縦の辺なら横に積むので幅
   const 語幅 = edges.map((e) =>
-    horizontal ? labelPillH(e.sub) : computeLabelBoxW(e.label, e.sub),
+    horizontal ? labelPillH(e.sub) : computeLabelBoxW(e.label, e.sub, textMetrics),
   );
   const 位置: number[] = [];
   let 積 = 0;
@@ -181,6 +186,7 @@ export function layoutSelfLoops(
   edges: CdlEdge[],
   nodes: Map<string, LaidNode>,
   occupiedBySide: ReadonlyMap<string, ReadonlySet<Side>>,
+  textMetrics: CdlTextMetrics = "proportional",
 ): LaidEdge[] {
   // 辺の割り当ては節ごとに 1 度で決める。 輪を 1 本ずつ処理して選び直すと、2 本目が
   // 1 本目の辺を「空いている」 と見て同じ場所に重なる
@@ -213,5 +219,5 @@ export function layoutSelfLoops(
   }
   // 語の置き場所は束の中の並びで決まるので、束ごとにまとめて経路にする。
   // 返す並びは呼出側が id で引き直すため、ここでは束の順で構わない
-  return [...束.values()].flatMap((b) => routeSelfLoopGroup(b.edges, b.node, b.side));
+  return [...束.values()].flatMap((b) => routeSelfLoopGroup(b.edges, b.node, b.side, textMetrics));
 }

package/src/layout/spec.ts

@@ -18,7 +18,7 @@
 import { CLEARANCE_LABEL_LABEL, CLEARANCE_NODE_LABEL } from "./clearance-constants";
 import { measureTextWidth } from "./text-width";
 import { EDGE_LABEL_TEXT } from "../label-text";
-import type { CdlEdge, LaidEdge, LaidLane, LaidNode } from "../types";
+import type { CdlEdge, CdlTextMetrics, LaidEdge, LaidLane, LaidNode } from "../types";
 
 // ─── edge label pill bbox SSOT (CAR-431 で 3 定義箇所を集約) ──
 
@@ -965,10 +965,21 @@ export function requiredVerticalLabelGap(pillHs: readonly number[]): number {
  * @param sub sub text (undefined なら 0)
  * @returns pill 全体の world 幅 (偶数)
  */
-export function computeLabelBoxW(label: string | undefined, sub: string | undefined): number {
-  const mainW = measureTextWidth(label ?? "", { fontSize: EDGE_LABEL_TEXT.main.fontSize });
+export function computeLabelBoxW(
+  label: string | undefined,
+  sub: string | undefined,
+  textMetrics: CdlTextMetrics = "proportional",
+): number {
+  const mainW = measureTextWidth(label ?? "", {
+    fontSize: EDGE_LABEL_TEXT.main.fontSize,
+    textMetrics,
+  });
   const subW = sub
-    ? measureTextWidth(sub, { fontSize: EDGE_LABEL_TEXT.sub.fontSize, fontFamily: "mono" })
+    ? measureTextWidth(sub, {
+        fontSize: EDGE_LABEL_TEXT.sub.fontSize,
+        fontFamily: "mono",
+        textMetrics,
+      })
     : 0;
   const raw = Math.max(mainW, subW) + LABEL_PILL_PAD_X * 2;
   // 切り上げる前に浮動小数の誤差を落とす。 文字幅は係数の掛け算と足し算を重ねるので、
@@ -999,8 +1010,11 @@ export function computeLabelBoxW(label: string | undefined, sub: string | undefi
  * @param edge LaidEdge (labelX / labelY / labelAnchor / label / sub 既確定)
  * @returns { x, y, w, h } の world 座標 bbox (render 実 rect 位置と一致)
  */
-export function computeLabelBBoxWorld(edge: LaidEdge): { x: number; y: number; w: number; h: number } {
-  const boxW = computeLabelBoxW(edge.label, edge.sub);
+export function computeLabelBBoxWorld(
+  edge: LaidEdge,
+  textMetrics: CdlTextMetrics = "proportional",
+): { x: number; y: number; w: number; h: number } {
+  const boxW = computeLabelBoxW(edge.label, edge.sub, textMetrics);
   const boxH = edge.sub ? LABEL_PILL_H_WITH_SUB : LABEL_PILL_H_MAIN_ONLY;
   const anchor = edge.labelAnchor;
   const boxLeftX = anchor === "start" ? 0 : anchor === "end" ? -boxW : -boxW / 2;

package/src/layout/text-width.ts

@@ -19,6 +19,8 @@
  * Bold は Regular に対し英字で +8-15%、 CJK は同じ、 記号は char により大差 (bold ならではの pen 太り)。
  */
 
+import type { CdlTextMetrics } from "../types";
+
 type FontFamily = "sans" | "mono";
 
 /**
@@ -39,6 +41,8 @@ interface MeasureOptions {
   letterSpacing?: number;
   fontFamily?: FontFamily;
   bound?: WidthBound;
+  /** 図全体の字幅規則。`monospace` は `fontFamily: "mono"` と同じ経路で測る */
+  textMetrics?: CdlTextMetrics;
 }
 
 /**
@@ -208,22 +212,20 @@ function defaultAdvanceEm(ch: string, code: number): number {
 }
 
 /**
- * 文字列の SVG render pixel 幅を実測係数で算出する。
+ * 最低幅を当てる前の SVG render pixel 幅を実測係数で算出する。
  *
- * @param text 対象文字列 (空文字は最低幅にクランプされる)
+ * @param text 対象文字列 (空文字は 0)
  * @param opts fontSize / fontWeight / letterSpacing / fontFamily の描画 context
  *
  * default = fontSize 22, fontWeight 700, letterSpacing 0, fontFamily "sans" (Inter Bold)。
  * edge label main text の caller (collisions / predict-bbox / edges) と一致する。
  * sub text (fontSize 19, fontFamily "mono") / lane label (fontSize 20, letterSpacing 2) は
  * opts で明示的に渡す。
- *
- * 最低幅 = fontSize × 1.2 (超短 label で bbox が細くなり shift 判定不安定になる問題を防ぐ)。
  */
-export function measureTextWidth(text: string, opts: MeasureOptions = {}): number {
+export function measureAdvanceWidth(text: string, opts: MeasureOptions = {}): number {
   const fontSize = opts.fontSize ?? 22;
   const letterSpacing = opts.letterSpacing ?? 0;
-  const fontFamily = opts.fontFamily ?? "sans";
+  const fontFamily = opts.textMetrics === "monospace" ? "mono" : (opts.fontFamily ?? "sans");
   const bound = opts.bound ?? "layout";
   let advanceEmSum = 0;
   let charCount = 0;
@@ -236,7 +238,7 @@ export function measureTextWidth(text: string, opts: MeasureOptions = {}): numbe
     // 割り戻さない = 測っていない字を狭く見積もると、はみ出す題を見落とす
     const 割り戻し =
       bound === "drawn" && !isEmojiGrapheme(ch, code)
-        ? isAscii(code)
+        ? isAscii(code) && fontFamily !== "mono"
           ? DRAWN_ASCII_RATIO
           : isCJK(code)
             ? DRAWN_CJK_RATIO
@@ -248,6 +250,10 @@ export function measureTextWidth(text: string, opts: MeasureOptions = {}): numbe
       continue;
     }
     if (fontFamily === "mono") {
+      // `DRAWN_ASCII_RATIO` (1.16) は Inter の比例幅表が実描画より広い分を見本帳の題で測った値。
+      // 0.63 は JetBrains Mono を実際に描いて測った値なので、割ると 0.543em になって等幅の
+      // 実描画 (0.6em 前後) より狭く見積もる。すると、はみ出す題を見落とし、木の箱の字を
+      // 収めたつもりで箱から出す。
       advanceEmSum += (isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM) / 割り戻し;
       continue;
     }
@@ -262,7 +268,18 @@ export function measureTextWidth(text: string, opts: MeasureOptions = {}): numbe
     const table = ch.length === 1 ? INTER_BOLD_ADVANCE_EM[ch] : undefined;
     advanceEmSum += (table !== undefined ? table : defaultAdvanceEm(ch, code)) / 割り戻し;
   }
-  const w = advanceEmSum * fontSize + letterSpacing * charCount;
+  return advanceEmSum * fontSize + letterSpacing * charCount;
+}
+
+/**
+ * 文字列の SVG render pixel 幅を実測係数で算出する。
+ *
+ * 最低幅 = fontSize × 1.2 (超短 label で bbox が細くなり shift 判定不安定になる問題を防ぐ)。
+ */
+export function measureTextWidth(text: string, opts: MeasureOptions = {}): number {
+  const fontSize = opts.fontSize ?? 22;
+  const bound = opts.bound ?? "layout";
+  const w = measureAdvanceWidth(text, opts);
   // 最低幅は組み方のための下駄 (短い札で bbox が細くなり判定が揺れるのを防ぐ)。
   // 実描画に合わせる時は当てない = 1 字の題が 1.2 em で描かれることは無い
   return bound === "drawn" ? w : Math.max(w, fontSize * 1.2);