@cardenelabs/cdl 0.122.0 → 0.124.0

package/dist/react.js

@@ -715,6 +715,11 @@ function \u5B57\u3092\u5DEE\u3057\u8FBC\u3080(template, values) {
   return template.replace(/\{(\w+)\}/g, (whole, name) => name in values ? String(values[name]) : whole);
 }
 
+// src/text-metrics.ts
+function resolveTextMetrics(value) {
+  return value === "monospace" ? "monospace" : "proportional";
+}
+
 // src/layout/clearance-constants.ts
 var CLEARANCE_NODE_LABEL = 32;
 var CLEARANCE_LANE_LABEL = 24;
@@ -876,10 +881,10 @@ function defaultAdvanceEm(ch, code) {
   if (ch >= "0" && ch <= "9") return 0.72;
   return 0.65;
 }
-function measureTextWidth(text, opts = {}) {
+function measureAdvanceWidth(text, opts = {}) {
   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;
@@ -887,7 +892,7 @@ function measureTextWidth(text, opts = {}) {
   for (const ch of \u6587\u5B57\u5217) {
     charCount++;
     const code = ch.codePointAt(0) ?? 0;
-    const \u5272\u308A\u623B\u3057 = bound === "drawn" && !isEmojiGrapheme(ch, code) ? isAscii(code) ? DRAWN_ASCII_RATIO : isCJK(code) ? DRAWN_CJK_RATIO : 1 : 1;
+    const \u5272\u308A\u623B\u3057 = bound === "drawn" && !isEmojiGrapheme(ch, code) ? isAscii(code) && fontFamily !== "mono" ? DRAWN_ASCII_RATIO : isCJK(code) ? DRAWN_CJK_RATIO : 1 : 1;
     if (isEmojiGrapheme(ch, code)) {
       advanceEmSum += fontFamily === "mono" ? MONO_EMOJI_ADVANCE_EM : EMOJI_ADVANCE_EM;
       continue;
@@ -903,7 +908,12 @@ function measureTextWidth(text, opts = {}) {
     const table = ch.length === 1 ? INTER_BOLD_ADVANCE_EM[ch] : void 0;
     advanceEmSum += (table !== void 0 ? table : defaultAdvanceEm(ch, code)) / \u5272\u308A\u623B\u3057;
   }
-  const w = advanceEmSum * fontSize + letterSpacing * charCount;
+  return advanceEmSum * fontSize + letterSpacing * charCount;
+}
+function measureTextWidth(text, opts = {}) {
+  const fontSize = opts.fontSize ?? 22;
+  const bound = opts.bound ?? "layout";
+  const w = measureAdvanceWidth(text, opts);
   return bound === "drawn" ? w : Math.max(w, fontSize * 1.2);
 }
 function \u53CE\u3081\u308B\u500D\u7387(text, opts, \u5E45) {
@@ -1271,15 +1281,22 @@ function requiredVerticalLabelGap(pillHs) {
   const step = parallelLabelStepY(pillHs);
   return (pillHs.length - 1) * step + Math.max(first, last) + CLEARANCE_NODE_LABEL * 2;
 }
-function computeLabelBoxW(label, sub) {
-  const mainW = measureTextWidth(label ?? "", { fontSize: EDGE_LABEL_TEXT.main.fontSize });
-  const subW = sub ? measureTextWidth(sub, { fontSize: EDGE_LABEL_TEXT.sub.fontSize, fontFamily: "mono" }) : 0;
+function computeLabelBoxW(label, sub, textMetrics = "proportional") {
+  const mainW = measureTextWidth(label ?? "", {
+    fontSize: EDGE_LABEL_TEXT.main.fontSize,
+    textMetrics
+  });
+  const subW = sub ? measureTextWidth(sub, {
+    fontSize: EDGE_LABEL_TEXT.sub.fontSize,
+    fontFamily: "mono",
+    textMetrics
+  }) : 0;
   const raw = Math.max(mainW, subW) + LABEL_PILL_PAD_X * 2;
   const EPSILON = 1e-6;
   return Math.ceil((raw - EPSILON) / 2) * 2;
 }
-function computeLabelBBoxWorld(edge) {
-  const boxW = computeLabelBoxW(edge.label, edge.sub);
+function computeLabelBBoxWorld(edge, textMetrics = "proportional") {
+  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;
@@ -1503,7 +1520,7 @@ function footerShapeDrawTop(node) {
 // src/layout/collisions.ts
 var LANE_LABEL_CLEARANCE_MARGIN = 2;
 var NEAR_MISS_MARGIN = LANE_LABEL_CLEARANCE_MARGIN;
-function collectBBoxes(lanes, nodes, edges) {
+function collectBBoxes(lanes, nodes, edges, textMetrics = "proportional") {
   const out = [];
   for (const lane of lanes) {
     if (!lane.label) continue;
@@ -1512,7 +1529,7 @@ function collectBBoxes(lanes, nodes, edges) {
       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
     });
   }
@@ -1530,7 +1547,7 @@ function collectBBoxes(lanes, nodes, edges) {
   }
   for (const e of edges) {
     if (!hasRenderedLabel(e)) continue;
-    const bbox = computeLabelBBoxWorld(e);
+    const bbox = computeLabelBBoxWorld(e, textMetrics);
     out.push({
       kind: "edge-label",
       id: e.id,
@@ -2174,7 +2191,7 @@ function clampShiftMagnitude(shift, maxMagnitude) {
   };
   return { dx: clampAxis(shift.dx), dy: clampAxis(shift.dy) };
 }
-function resolveEdgeLabelOverlapsWithChainAndPropagate(edges, obstacles, minClearance = 16, maxIter = 20, pathLabelClearance = LABEL_TO_PATH_CLEARANCE) {
+function resolveEdgeLabelOverlapsWithChainAndPropagate(edges, obstacles, minClearance = 16, maxIter = 20, pathLabelClearance = LABEL_TO_PATH_CLEARANCE, textMetrics = "proportional") {
   if (edges.length === 0) {
     return {
       edges,
@@ -2185,7 +2202,7 @@ function resolveEdgeLabelOverlapsWithChainAndPropagate(edges, obstacles, minClea
   }
   const MAX_ACCUMULATED_SHIFT = CHAIN_SHIFT_MAX_ACCUMULATED;
   const labelBBox = (e, offsetX, offsetY) => {
-    const base = computeLabelBBoxWorld(e);
+    const base = computeLabelBBoxWorld(e, textMetrics);
     return {
       kind: "edge-label",
       id: e.id,
@@ -2786,11 +2803,15 @@ var \u5411\u304D\u306E\u9806 = [
   { axis: "x", sign: -1, \u540D\u524D: "\u5DE6" },
   { axis: "x", sign: 1, \u540D\u524D: "\u53F3" }
 ];
-function \u672D\u304C\u52D5\u3051\u306A\u3044\u7406\u7531(labelId, \u76F8\u624B, edges, obstacles) {
+function \u672D\u304C\u52D5\u3051\u306A\u3044\u7406\u7531(labelId, \u76F8\u624B, edges, obstacles, textMetrics = "proportional") {
   const edgeById = new Map(edges.map((e) => [e.id, e]));
   const \u81EA\u5206 = edgeById.get(labelId);
   if (!\u81EA\u5206) return null;
-  const labels = edges.filter((e) => e.label?.trim() || e.sub?.trim()).map((e) => ({ kind: "edge-label", id: e.id, ...computeLabelBBoxWorld(e) }));
+  const labels = edges.filter((e) => e.label?.trim() || e.sub?.trim()).map((e) => ({
+    kind: "edge-label",
+    id: e.id,
+    ...computeLabelBBoxWorld(e, textMetrics)
+  }));
   const label = labels.find((l) => l.id === labelId);
   if (!label) return null;
   const \u6E2C\u308A\u65B9 = \u7DDA\u306E\u6E2C\u308A\u65B9\u3092\u4F5C\u308B();
@@ -2832,7 +2853,7 @@ function \u672D\u304C\u52D5\u3051\u306A\u3044\u7406\u7531(labelId, \u76F8\u624B,
   }
   return `\u9003\u3052\u5834\u306A\u3057: ${\u7406\u7531.sort((a, b) => a.\u9806 - b.\u9806).map((r) => r.\u6587).join(" / ")}`;
 }
-function resolveLabelClearanceAfterPathPasses(edges, obstacles, maxIter = 8) {
+function resolveLabelClearanceAfterPathPasses(edges, obstacles, maxIter = 8, textMetrics = "proportional") {
   if (edges.length === 0) return edges;
   const labeledIds = new Set(
     edges.filter((e) => e.label?.trim() || e.sub?.trim()).map((e) => e.id)
@@ -2850,7 +2871,7 @@ function resolveLabelClearanceAfterPathPasses(edges, obstacles, maxIter = 8) {
     const out = [];
     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 });
     }
@@ -2983,7 +3004,7 @@ function applyEdgeLabelAndPathShifts(edges, labelShiftMap, edgePathShiftMap) {
 
 // src/layout/curve-path.ts
 var SAME_HEIGHT_THRESHOLD = 1;
-function curvePath(from, to, edge, labelMarginExtra = 0) {
+function curvePath(from, to, edge, labelMarginExtra = 0, textMetrics = "proportional") {
   const fromLeft = from.cx - from.w / 2;
   const fromRight = from.cx + from.w / 2;
   const toLeft = to.cx - to.w / 2;
@@ -3051,7 +3072,7 @@ function curvePath(from, to, edge, labelMarginExtra = 0) {
     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) + (Math.abs(normalX) * labelW + Math.abs(normalY) * labelH) / 2 + labelMarginExtra;
   return {
@@ -3083,7 +3104,7 @@ function polyline(points) {
   });
   return distinct.map((p, i) => `${i === 0 ? "M" : "L"} ${point(p)}`).join(" ");
 }
-function metroPath(from, to, edge, labelMarginExtra = 0) {
+function metroPath(from, to, edge, labelMarginExtra = 0, textMetrics = "proportional") {
   const fromLeft = from.cx - from.w / 2;
   const fromRight = from.cx + from.w / 2;
   const toLeft = to.cx - to.w / 2;
@@ -3194,7 +3215,7 @@ function metroPath(from, to, edge, labelMarginExtra = 0) {
     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) + (Math.abs(normalX) * labelW + Math.abs(normalY) * labelH) / 2 + labelMarginExtra;
   return {
@@ -3363,7 +3384,14 @@ var NARROW_RATIO = 0.37;
 var ASCII_RATIO = 0.86;
 var WIDE_CHARS = "W@%Mm";
 var NARROW_CHARS = "ijlI.,:;'! ";
-function textWidth(s, size, \u5B57\u9001\u308A = 0) {
+function textWidth(s, size, \u5B57\u9001\u308A = 0, textMetrics = "proportional") {
+  if (textMetrics === "monospace") {
+    return measureAdvanceWidth(s, {
+      fontSize: size,
+      letterSpacing: \u5B57\u9001\u308A,
+      fontFamily: "mono"
+    });
+  }
   let \u5E45 = 0;
   let \u5B57\u6570 = 0;
   for (const c of s) {
@@ -3400,8 +3428,8 @@ function splitRow(row) {
   }
   return { left: row.trim(), right: "", split: false };
 }
-function rowColumnWidth(text, size, mono) {
-  return mono ? displayWidth(text) * size * MONO_ADVANCE_RATIO : textWidth(text, size);
+function rowColumnWidth(text, size, mono, textMetrics = "proportional") {
+  return mono ? displayWidth(text) * size * MONO_ADVANCE_RATIO : textWidth(text, size, 0, textMetrics);
 }
 function displayWidth(text) {
   let w = 0;
@@ -3427,12 +3455,12 @@ function \u6841\u3067\u7701\u304F(text, \u4E0A\u9650) {
   if (displayWidth(text) <= \u4E0A\u9650) return text;
   return `${\u6841\u3067\u5272\u308B(text, \u4E0A\u9650 - 1)[0]}\u2026`;
 }
-function requiredRowsWidth(rows, kind) {
+function requiredRowsWidth(rows, kind, textMetrics = "proportional") {
   if (!rows || rows.length === 0) return 0;
   const splits = rows.map(splitRow);
   const \u4E00\u756A\u5E83\u3044 = (\u53D6\u308B) => splits.reduce((m, s) => Math.max(m, \u53D6\u308B(s)), 0);
-  const storage = ROW_PAD_X_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.left, 26, true)) + STORAGE_COL_GAP_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.right, 26, true)) + ROW_RIGHT_PAD_PX;
-  const generic = ROW_PAD_X_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)) + ROW_COL_GAP_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.right, GENERIC_ROW_RIGHT_SIZE_PX, true)) + ROW_RIGHT_PAD_PX;
+  const storage = ROW_PAD_X_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.left, 26, true, textMetrics)) + STORAGE_COL_GAP_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.right, 26, true, textMetrics)) + ROW_RIGHT_PAD_PX;
+  const generic = ROW_PAD_X_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false, textMetrics)) + ROW_COL_GAP_PX + \u4E00\u756A\u5E83\u3044((s) => rowColumnWidth(s.right, GENERIC_ROW_RIGHT_SIZE_PX, true, textMetrics)) + ROW_RIGHT_PAD_PX;
   if (kind === void 0) return Math.ceil(Math.max(storage, generic));
   return Math.ceil(kind === "storage" ? storage : generic);
 }
@@ -3497,7 +3525,10 @@ var \u5DE6\u53F3\u306E\u4F59\u767D = 8;
 function \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45) {
   return \u7BB1\u306E\u5E45 - \u5DE6\u53F3\u306E\u4F59\u767D * 2;
 }
-function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
+function \u7BB1\u306E\u5B57\u3092\u6E2C\u308B(textMetrics = "proportional") {
+  return (text, fontSize) => textWidth(text, fontSize, 0, textMetrics);
+}
+function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B) {
   if (\u4F7F\u3048\u308B\u5E452 <= 0) return "";
   if (\u6E2C\u308B(text, fontSize) <= \u4F7F\u3048\u308B\u5E452) return text;
   const \u7701\u7565 = "\u2026";
@@ -3514,7 +3545,7 @@ function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6
   return `${\u51FA}${\u7701\u7565}`;
 }
 var \u7E2E\u3081\u306E\u4E0B\u9650 = MIN_TEXT_SIZE;
-function \u5E45\u306B\u53CE\u3081\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
+function \u5E45\u306B\u53CE\u3081\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B) {
   let size = fontSize;
   while (size > \u7E2E\u3081\u306E\u4E0B\u9650 && \u6E2C\u308B(text, size) > \u4F7F\u3048\u308B\u5E452) size -= 1;
   return { text: \u5E45\u3067\u5207\u308B(text, size, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B), fontSize: size };
@@ -3524,7 +3555,7 @@ function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
   if (typeof \u533A\u5207\u308A !== "function") return [...text];
   return [...new \u533A\u5207\u308A(void 0, { granularity: "grapheme" }).segment(text)].map((g) => g.segment);
 }
-function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u30553) {
+function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u30553, \u6E2C\u308B) {
   const \u5019\u88DC = \u884C.filter((r, i) => i === 0 || r.text.trim() !== "");
   if (\u5019\u88DC.length === 0) return [];
   const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u30553 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
@@ -3532,7 +3563,7 @@ function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8
   const \u6B8B\u3059 = [...\u5019\u88DC];
   while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
   const \u5E45 = \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45);
-  const \u53CE\u3081\u305F = \u6B8B\u3059.map((r) => ({ ...r, ...\u5E45\u306B\u53CE\u3081\u308B(r.text, r.fontSize, \u5E45) }));
+  const \u53CE\u3081\u305F = \u6B8B\u3059.map((r) => ({ ...r, ...\u5E45\u306B\u53CE\u3081\u308B(r.text, r.fontSize, \u5E45, \u6E2C\u308B) }));
   const \u7DCF\u9AD8 = \u9AD8\u3055(\u53CE\u3081\u305F);
   let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
   return \u53CE\u3081\u305F.map((r) => {
@@ -3545,9 +3576,9 @@ function \u66F8\u3044\u305F\u5024\u304B\u63A7\u3048(\u66F8\u3044\u305F, \u63A7\u
   const v = (\u66F8\u3044\u305F ?? "").trim();
   return v === "" ? \u63A7\u3048 : v;
 }
-function \u5E45\u306E\u500D\u7387(text, size, letterSpacing, \u5E45) {
+function \u5E45\u306E\u500D\u7387(text, size, letterSpacing, \u5E45, textMetrics = "proportional") {
   if (!(\u5E45 > 0) || !(size > 0)) return 1;
-  const \u5B9F\u5E45 = textWidth(text, size, letterSpacing);
+  const \u5B9F\u5E45 = textWidth(text, size, letterSpacing, textMetrics);
   return \u5B9F\u5E45 > \u5E45 ? \u5E45 / \u5B9F\u5E45 : 1;
 }
 function \u8AAD\u3081\u308B\u4E0B\u9650\u306E\u500D\u7387(\u5927\u304D\u3055) {
@@ -3762,13 +3793,13 @@ function fitArt(region, extent, art) {
   );
 }
 var \u5E2F\u306E\u9AD8\u3055\u306B\u5BFE\u3059\u308B\u4E0A\u9650 = 0.8;
-function \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(text, size, letterSpacing = 0) {
+function \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(text, size, letterSpacing = 0, textMetrics = "proportional") {
   return Math.max(
     displayWidth(text) * size * MONO_ADVANCE_RATIO,
-    textWidth(text, size, letterSpacing)
+    textWidth(text, size, letterSpacing, textMetrics)
   );
 }
-function \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u5B57\u3089) {
+function \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u5B57\u3089, textMetrics = "proportional") {
   const \u623B\u3057 = Number.isFinite(\u500D\u7387) && \u500D\u7387 > 0 ? 1 / \u500D\u7387 : 1;
   let \u4E0A\u9650 = Number.POSITIVE_INFINITY;
   for (const \u5B572 of \u5B57\u3089) {
@@ -3777,7 +3808,7 @@ function \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u5B57\u3089)
     if (Number.isFinite(\u9AD8\u3055) && \u9AD8\u3055 > 0) {
       \u4E0A\u9650 = Math.min(\u4E0A\u9650, \u9AD8\u3055 * \u5E2F\u306E\u9AD8\u3055\u306B\u5BFE\u3059\u308B\u4E0A\u9650 / \u5B572.size);
     }
-    const \u5B9F\u5E45 = \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(\u5B572.text, \u5B572.size, \u5B572.letterSpacing ?? 0);
+    const \u5B9F\u5E45 = \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(\u5B572.text, \u5B572.size, \u5B572.letterSpacing ?? 0, textMetrics);
     if (Number.isFinite(\u5E45) && \u5E45 > 0 && \u5B9F\u5E45 > 0) {
       \u4E0A\u9650 = Math.min(\u4E0A\u9650, \u5E45 / \u5B9F\u5E45);
     }
@@ -4972,9 +5003,14 @@ var PAD_LEFT = 24;
 var \u7BB1\u306E\u6700\u5927\u5E45 = 140;
 var \u7BB1\u306E\u6700\u5927\u9AD8\u3055 = 38;
 var \u6728\u306E\u679D\u306E\u592A\u3055 = (\u6BB5) => Math.max(1.1, 2.6 - \u6BB5 * 0.45);
-function \u6728\u306E\u4E2D\u8EAB(node, stateValues = {}) {
+function \u6728\u306E\u4E2D\u8EAB(node, stateValues = {}, textMetrics = "proportional") {
   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
+  );
 }
 function \u6728\u306E\u884C(n) {
   return [
@@ -4987,12 +5023,14 @@ function TreeNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const gradientId = `tree-root-grad-${node.id}`;
-  const layout2 = \u6728\u306E\u4E2D\u8EAB(node, stateValues);
+  const layout2 = \u6728\u306E\u4E2D\u8EAB(node, stateValues, textMetrics);
+  const \u6E2C\u308B = \u7BB1\u306E\u5B57\u3092\u6E2C\u308B(textMetrics);
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u6700\u5927\u6DF1\u3055 = layout2.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
   const \u7BB1\u304C\u51FA\u308B = (\u6DF1\u3055) => !drawing || \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, \u6DF1\u3055, \u6700\u5927\u6DF1\u3055) >= 1;
@@ -5046,10 +5084,10 @@ function TreeNode({
       const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0];
       const isRoot = n.depth === 0;
       const \u6750\u6599 = \u6728\u306E\u884C(n);
-      const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, n.w, n.h);
+      const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, n.w, n.h, \u6E2C\u308B);
       const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
       const \u540D\u524D = \u6750\u6599[0];
-      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B\u5E45(n.w));
+      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B\u5E45(n.w), \u6E2C\u308B);
       return /* @__PURE__ */ jsx(
         "g",
         {
@@ -5131,7 +5169,7 @@ function TreeNode({
     })
   ] });
 }
-function computeTreeLayout(treeNodes, canvasW, canvasH) {
+function computeTreeLayout(treeNodes, canvasW, canvasH, textMetrics = "proportional") {
   const ids = new Set(treeNodes.map((n) => n.id));
   const childrenOf = /* @__PURE__ */ new Map();
   for (const n of treeNodes) {
@@ -5179,7 +5217,7 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
   const \u7BB1\u306E\u5E45 = (n, depth) => {
     const \u6750\u6599 = \u6728\u306E\u884C({ ...n, depth });
     const \u540D\u524D = \u6750\u6599[0];
-    const \u8981\u308B = measureTextWidth(\u540D\u524D.text, { fontSize: \u540D\u524D.fontSize}) + (nodeW - \u4F7F\u3048\u308B\u5E45(nodeW));
+    const \u8981\u308B = measureTextWidth(\u540D\u524D.text, { fontSize: \u540D\u524D.fontSize, textMetrics }) + (nodeW - \u4F7F\u3048\u308B\u5E45(nodeW));
     return Math.min(Math.max(\u8981\u308B, nodeW), slotW * 0.92);
   };
   const \u8449\u306E\u4E26\u3073 = [];
@@ -5283,7 +5321,7 @@ var BRANCH_BOX_H_MAX = 48;
 var SUB_BOX_H_MAX = 40;
 var \u7E26\u306E\u9593\u9694\u306E\u4E0A\u9650 = (\u679D\u306E\u6A2A\u306E\u4F38\u3073) => \u679D\u306E\u6A2A\u306E\u4F38\u3073;
 var MIND_PAD = 40;
-function \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues = {}) {
+function \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues = {}, textMetrics = "proportional") {
   const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : void 0;
   if (!mindData) return void 0;
   return computeMindMapLayout(
@@ -5291,7 +5329,8 @@ function \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues = {}) {
     node.w / 2,
     node.h / 2,
     node.w - MIND_PAD * 2,
-    node.h - MIND_PAD * 2
+    node.h - MIND_PAD * 2,
+    textMetrics
   );
 }
 function \u653E\u5C04\u306E\u884C(n) {
@@ -5305,12 +5344,14 @@ function MindMapNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const layout2 = \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues);
+  const layout2 = \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues, textMetrics);
   if (!layout2) return /* @__PURE__ */ jsx("g", { transform: `translate(${x0} ${y0})` });
+  const \u6E2C\u308B = \u7BB1\u306E\u5B57\u3092\u6E2C\u308B(textMetrics);
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u6700\u5927\u6DF1\u3055 = layout2.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
   const \u7BB1\u304C\u51FA\u308B = (\u6DF1\u3055) => !drawing || \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, \u6DF1\u3055, \u6700\u5927\u6DF1\u3055) >= 1;
@@ -5357,8 +5398,13 @@ function MindMapNode({
       const \u6587\u5B57\u306E\u5BC4\u305B = \u67A0\u306A\u3057 ? \u5916\u3078 ? "start" : "end" : "middle";
       const \u63CF\u753B\u57DF\u306E\u7AEF = \u5916\u3078 ? node.w - MIND_PAD : MIND_PAD;
       const \u4F7F\u3048\u308B = \u67A0\u306A\u3057 ? Math.abs(\u63CF\u753B\u57DF\u306E\u7AEF - \u6587\u5B57\u306Ex) : \u4F7F\u3048\u308B\u5E45(n.w);
-      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B);
-      const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, \u67A0\u306A\u3057 ? \u4F7F\u3048\u308B + (n.w - \u4F7F\u3048\u308B\u5E45(n.w)) : n.w, n.h);
+      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B, \u6E2C\u308B);
+      const \u884C = \u7BB1\u306B\u7A4D\u3080(
+        \u6750\u6599,
+        \u67A0\u306A\u3057 ? \u4F7F\u3048\u308B + (n.w - \u4F7F\u3048\u308B\u5E45(n.w)) : n.w,
+        n.h,
+        \u6E2C\u308B
+      );
       const \u6587\u5B57\u306E\u8272 = n.isRoot ? "var(--cdl-text-on-tone, #ffffff)" : "var(--cdl-chip-text, #1a1f2a)";
       return /* @__PURE__ */ jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
         \u67A0\u306A\u3057 ? null : /* @__PURE__ */ jsx(
@@ -5410,14 +5456,14 @@ function MindMapNode({
     })
   ] });
 }
-function \u63CF\u304F\u6A2A\u306E\u7AEF(n) {
+function \u63CF\u304F\u6A2A\u306E\u7AEF(n, textMetrics = "proportional") {
   if (n.isRoot || !n.isLeaf) return [n.x - n.w / 2, n.x + n.w / 2];
   const \u8D77\u70B9 = n.x + (n.side === "right" ? -n.w / 2 : n.w / 2);
   const \u540D\u524D = \u653E\u5C04\u306E\u884C(n)[0];
-  const \u5E45 = textWidth(\u540D\u524D.text, \u540D\u524D.fontSize);
+  const \u5E45 = textWidth(\u540D\u524D.text, \u540D\u524D.fontSize, 0, textMetrics);
   return n.side === "right" ? [\u8D77\u70B9, \u8D77\u70B9 + \u5E45] : [\u8D77\u70B9 - \u5E45, \u8D77\u70B9];
 }
-function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
+function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH, textMetrics = "proportional") {
   const nodes = [];
   const edges = [];
   const rootW = 120;
@@ -5495,7 +5541,7 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
   const PREFERRED_GAP = MIND_BOX_GAP;
   const \u679D\u306E\u540D\u524D\u306E\u5E45 = (title) => {
     const \u540D\u524D = \u653E\u5C04\u306E\u884C({ title, isRoot: false })[0];
-    return textWidth(\u540D\u524D.text, \u540D\u524D.fontSize);
+    return textWidth(\u540D\u524D.text, \u540D\u524D.fontSize, 0, textMetrics);
   };
   const \u679D\u306E\u6A2A\u3092\u6C7A\u3081\u308B = (br) => {
     const maxSubDepth = subDepthOf(br.id, /* @__PURE__ */ new Set());
@@ -5613,7 +5659,7 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
     let maxExtentX = rootW / 2;
     let maxExtentY = rootH / 2;
     for (const n of nodes) {
-      const [\u5DE6, \u53F3] = \u63CF\u304F\u6A2A\u306E\u7AEF(n);
+      const [\u5DE6, \u53F3] = \u63CF\u304F\u6A2A\u306E\u7AEF(n, textMetrics);
       maxExtentX = Math.max(maxExtentX, Math.abs(\u5DE6 - cx), Math.abs(\u53F3 - cx));
       maxExtentY = Math.max(maxExtentY, Math.abs(n.y - cy) + n.h / 2);
     }
@@ -5633,7 +5679,7 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
     let \u5DE6\u7AEF = Number.POSITIVE_INFINITY;
     let \u53F3\u7AEF = Number.NEGATIVE_INFINITY;
     for (const n of nodes) {
-      const [l, r] = \u63CF\u304F\u6A2A\u306E\u7AEF(n);
+      const [l, r] = \u63CF\u304F\u6A2A\u306E\u7AEF(n, textMetrics);
       \u5DE6\u7AEF = Math.min(\u5DE6\u7AEF, l);
       \u53F3\u7AEF = Math.max(\u53F3\u7AEF, r);
     }
@@ -5855,10 +5901,16 @@ function emptyCounts() {
     "validation-interrupted": 0
   };
 }
-function \u7A4D\u3080\u7BB1\u3092\u96C6\u3081\u308B(n) {
-  const \u7BB1 = (b, \u884C) => ({ \u884C, w: b.w, h: b.h });
-  if (n.kind === "tree-hierarchy") return \u6728\u306E\u4E2D\u8EAB(n).nodes.map((b) => \u7BB1(b, \u6728\u306E\u884C(b)));
-  if (n.kind === "mind-map") return (\u653E\u5C04\u306E\u4E2D\u8EAB(n)?.nodes ?? []).map((b) => \u7BB1(b, \u653E\u5C04\u306E\u884C(b)));
+function \u7A4D\u3080\u7BB1\u3092\u96C6\u3081\u308B(n, textMetrics = "proportional") {
+  const \u7BB1 = (b, \u884C, \u6E2C\u308B) => ({ \u884C, w: b.w, h: b.h, \u6E2C\u308B });
+  if (n.kind === "tree-hierarchy") {
+    const \u6E2C\u308B = \u7BB1\u306E\u5B57\u3092\u6E2C\u308B(textMetrics);
+    return \u6728\u306E\u4E2D\u8EAB(n, {}, textMetrics).nodes.map((b) => \u7BB1(b, \u6728\u306E\u884C(b), \u6E2C\u308B));
+  }
+  if (n.kind === "mind-map") {
+    const \u6E2C\u308B = \u7BB1\u306E\u5B57\u3092\u6E2C\u308B(textMetrics);
+    return (\u653E\u5C04\u306E\u4E2D\u8EAB(n, {}, textMetrics)?.nodes ?? []).map((b) => \u7BB1(b, \u653E\u5C04\u306E\u884C(b), \u6E2C\u308B));
+  }
   return [];
 }
 function measureStubOut(segs) {
@@ -6492,6 +6544,7 @@ function \u4F4D\u7F6E\u3092\u624B\u3067\u66F8\u3044\u305F(n) {
   return n.posX !== void 0 && n.posY !== void 0;
 }
 function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5668) {
+  const textMetrics = laid.textMetrics ?? "proportional";
   const LIFELINE_W_THRESHOLD = 8;
   for (const n of laid.nodes) {
     if (n.w < LIFELINE_W_THRESHOLD) continue;
@@ -6503,7 +6556,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
       );
     }
   }
-  const bboxes = collectBBoxes(laid.lanes, laid.nodes, laid.edges);
+  const bboxes = collectBBoxes(laid.lanes, laid.nodes, laid.edges, textMetrics);
   const collisions = detectCollisions(bboxes, laid.edges);
   for (const c of collisions) {
     const involvesEdgeLabel = c.a.kind === "edge-label" || c.b.kind === "edge-label";
@@ -6523,7 +6576,11 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
     if (!titleTrimmed) continue;
     const \u4F59\u767D = drawsTitleOutsideBox(n.kind) ? 0 : TITLE_BOX_PADDING;
     const \u4F7F\u3048\u308B\u5E452 = n.w - \u4F59\u767D;
-    const \u5B9F\u5E45 = measureTextWidth(titleTrimmed, { fontSize: titleFontSize(n.kind), bound: "drawn" });
+    const \u5B9F\u5E45 = measureTextWidth(titleTrimmed, {
+      fontSize: titleFontSize(n.kind),
+      bound: "drawn",
+      textMetrics
+    });
     if (titleScalesToFit(n.kind, n.h)) {
       const \u7E2E\u3081\u305F\u5927\u304D\u3055 = \u5B9F\u5E45 > 0 ? titleFontSize(n.kind) * Math.min(1, \u4F7F\u3048\u308B\u5E452 / \u5B9F\u5E45) : titleFontSize(n.kind);
       if (\u7E2E\u3081\u305F\u5927\u304D\u3055 < MIN_TITLE_FONT_SIZE) {
@@ -6591,7 +6648,13 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
     const b\u306F\u672D = n.b.kind === "edge-label";
     const \u52D5\u304B\u3059 = a\u306F\u672D && b\u306F\u672D ? (\u8FBA\u306E\u9806.get(n.a.id) ?? 0) > (\u8FBA\u306E\u9806.get(n.b.id) ?? 0) ? n.a : n.b : a\u306F\u672D ? n.a : b\u306F\u672D ? n.b : null;
     const \u76F8\u624B = \u52D5\u304B\u3059 === n.a ? n.b : n.a;
-    const reason = \u52D5\u304B\u3059 !== null ? \u672D\u304C\u52D5\u3051\u306A\u3044\u7406\u7531(\u52D5\u304B\u3059.id, \u76F8\u624B, laid.edges, \u672D\u306E\u969C\u5BB3\u7269) ?? void 0 : void 0;
+    const reason = \u52D5\u304B\u3059 !== null ? \u672D\u304C\u52D5\u3051\u306A\u3044\u7406\u7531(
+      \u52D5\u304B\u3059.id,
+      \u76F8\u624B,
+      laid.edges,
+      \u672D\u306E\u969C\u5BB3\u7269,
+      textMetrics
+    ) ?? void 0 : void 0;
     push(
       "clearance",
       `${n.a.kind}:${n.a.id} \u2194 ${n.b.kind}:${n.b.id} gap=${n.gap.toFixed(1)}px (need ${n.required}px)`,
@@ -6605,7 +6668,10 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
     if (!hasRenderedLabel(e)) continue;
     const segs = extractPathSegments(e.d);
     if (segs.length === 0) continue;
-    const minDist = measurePathLabelGapSegs(flattenPathSegments(segs), computeLabelBBoxWorld(e));
+    const minDist = measurePathLabelGapSegs(
+      flattenPathSegments(segs),
+      computeLabelBBoxWorld(e, textMetrics)
+    );
     if (!Number.isFinite(minDist)) continue;
     if (minDist > PROXIMITY_ERROR_THRESHOLD) {
       push(
@@ -6655,8 +6721,15 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
   }
   for (const e of laid.edges) {
     if (!hasRenderedLabel(e)) continue;
-    const mainW = measureTextWidth(e.label ?? "", { fontSize: EDGE_LABEL_TEXT.main.fontSize });
-    const subW = e.sub ? measureTextWidth(e.sub, { fontSize: EDGE_LABEL_TEXT.sub.fontSize, fontFamily: "mono" }) : 0;
+    const mainW = measureTextWidth(e.label ?? "", {
+      fontSize: EDGE_LABEL_TEXT.main.fontSize,
+      textMetrics
+    });
+    const subW = e.sub ? measureTextWidth(e.sub, {
+      fontSize: EDGE_LABEL_TEXT.sub.fontSize,
+      fontFamily: "mono",
+      textMetrics
+    }) : 0;
     const expectedBoxW = Math.max(mainW, subW) + LABEL_PILL_PAD_X * 2;
     const bbox = bboxes.find((b) => b.kind === "edge-label" && b.id === e.id);
     if (!bbox) continue;
@@ -6798,7 +6871,9 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
     }
   }
   for (const n of laid.nodes) {
-    const \u843D\u3068\u3057\u305F = labelPlan(n).\u843D\u3068\u3057\u305F.filter((line) => droppedLineIsHidden(n.kind, line));
+    const \u843D\u3068\u3057\u305F = labelPlan(n).\u843D\u3068\u3057\u305F.filter(
+      (line) => droppedLineIsHidden(n.kind, line)
+    );
     if (\u843D\u3068\u3057\u305F.length === 0) continue;
     push(
       "shape-label-dropped",
@@ -6807,7 +6882,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
     );
   }
   for (const n of laid.nodes) {
-    const \u7BB1 = \u7A4D\u3080\u7BB1\u3092\u96C6\u3081\u308B(n);
+    const \u7BB1 = \u7A4D\u3080\u7BB1\u3092\u96C6\u3081\u308B(n, textMetrics);
     if (\u7BB1.length === 0) continue;
     let \u5BFE\u8C61 = 0;
     const \u843D\u3061\u305F = [];
@@ -6815,7 +6890,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
       const \u5BA3\u8A00 = b.\u884C.slice(1).filter((r) => r.text.trim() !== "");
       if (\u5BA3\u8A00.length === 0) continue;
       \u5BFE\u8C61 += 1;
-      const \u6B8B\u3063\u305F = new Set(\u7BB1\u306B\u7A4D\u3080(b.\u884C, b.w, b.h).map((r) => r.\u5F79\u5272));
+      const \u6B8B\u3063\u305F = new Set(\u7BB1\u306B\u7A4D\u3080(b.\u884C, b.w, b.h, b.\u6E2C\u308B).map((r) => r.\u5F79\u5272));
       if (\u5BA3\u8A00.every((r) => \u6B8B\u3063\u305F.has(r.\u5F79\u5272))) continue;
       \u843D\u3061\u305F.push({ title: b.\u884C[0]?.text ?? "", h: b.h });
     }
@@ -7878,7 +7953,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
       const allowedLanes = /* @__PURE__ */ new Set();
       if (fromNode) allowedLanes.add(fromNode.lane);
       if (toNode) allowedLanes.add(toNode.lane);
-      const box = computeLabelBBoxWorld(e);
+      const box = computeLabelBBoxWorld(e, textMetrics);
       for (const lane of laid.lanes) {
         if (allowedLanes.has(lane.id)) continue;
         const side = rectCrossesLaneBorder(box, lane, rangeByLane.get(lane.id));
@@ -8002,7 +8077,7 @@ function pickFreeSides(occupied, count) {
   const \u4F7F\u3046 = \u7A7A\u304D.length > 0 ? \u7A7A\u304D : [SELF_LOOP_SIDE_FALLBACK];
   return Array.from({ length: count }, (_, i) => \u4F7F\u3046[i % \u4F7F\u3046.length]);
 }
-function routeSelfLoopGroup(edges, node, side) {
+function routeSelfLoopGroup(edges, node, side, textMetrics = "proportional") {
   const horizontal = side === "left" || side === "right";
   const g = sideGeometry(node, side);
   const span = fitSpan(horizontal ? node.h : node.w, SELF_LOOP_SPAN);
@@ -8011,7 +8086,7 @@ function routeSelfLoopGroup(edges, node, side) {
   const \u6700\u5916 = controlOffset(SELF_LOOP_OUT + (edges.length - 1) * SELF_LOOP_STAGGER);
   const \u8A9E\u307E\u3067 = \u6700\u5916 + LABEL_TO_PATH_CLEARANCE;
   const \u8A9E\u5E45 = edges.map(
-    (e) => horizontal ? labelPillH(e.sub) : computeLabelBoxW(e.label, e.sub)
+    (e) => horizontal ? labelPillH(e.sub) : computeLabelBoxW(e.label, e.sub, textMetrics)
   );
   const \u4F4D\u7F6E = [];
   let \u7A4D = 0;
@@ -8041,7 +8116,7 @@ function routeSelfLoopGroup(edges, node, side) {
 function isSelfLoop(e) {
   return e.from === e.to;
 }
-function layoutSelfLoops(edges, nodes, occupiedBySide) {
+function layoutSelfLoops(edges, nodes, occupiedBySide, textMetrics = "proportional") {
   const \u5272\u5F53 = /* @__PURE__ */ new Map();
   for (const edge of edges) {
     if (edge.side) continue;
@@ -8068,7 +8143,7 @@ function layoutSelfLoops(edges, nodes, occupiedBySide) {
     if (\u65E2) \u65E2.edges.push(edge);
     else \u675F.set(key, { node, side, edges: [edge] });
   }
-  return [...\u675F.values()].flatMap((b) => routeSelfLoopGroup(b.edges, b.node, b.side));
+  return [...\u675F.values()].flatMap((b) => routeSelfLoopGroup(b.edges, b.node, b.side, textMetrics));
 }
 
 // src/layout/tokens.ts
@@ -8286,7 +8361,7 @@ function verticalDetourBlockers(A, B, obstacles) {
 function detourColumnFor(blockers, side) {
   return side === "left" ? Math.min(...blockers.map((n) => n.cx - n.w / 2)) - VERTICAL_DETOUR_GAP : Math.max(...blockers.map((n) => n.cx + n.w / 2)) + VERTICAL_DETOUR_GAP;
 }
-function layoutEdges(diag, nodes, lanes = []) {
+function layoutEdges(diag, nodes, lanes = [], textMetrics = "proportional") {
   const labelMarginExtra = (diag.viewport?.labelMargin ?? diag.viewport?.gap ?? DEFAULT_LABEL_MARGIN) - DEFAULT_LABEL_MARGIN;
   const nmap = new Map(nodes.map((n) => [n.id, n]));
   const lmap = new Map(lanes.map((l) => [l.id, l]));
@@ -8319,7 +8394,7 @@ function layoutEdges(diag, nodes, lanes = []) {
       const to = nmap.get(e.to);
       if (!from) throw new Error(`cdl layout: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u7121\u3044`);
       if (!to) throw new Error(`cdl layout: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u7121\u3044`);
-      const c = curvePath(from, to, e, labelMarginExtra);
+      const c = curvePath(from, to, e, labelMarginExtra, textMetrics);
       positionedEdges.push({
         ...e,
         d: c.d,
@@ -8334,7 +8409,7 @@ function layoutEdges(diag, nodes, lanes = []) {
       const to = nmap.get(e.to);
       if (!from) throw new Error(`cdl layout: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u7121\u3044`);
       if (!to) throw new Error(`cdl layout: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u7121\u3044`);
-      const m = metroPath(from, to, e, labelMarginExtra);
+      const m = metroPath(from, to, e, labelMarginExtra, textMetrics);
       positionedEdges.push({
         ...e,
         d: m.d,
@@ -8382,7 +8457,7 @@ function layoutEdges(diag, nodes, lanes = []) {
     \u4F7F\u3046(le.from, le.fromSide);
     \u4F7F\u3046(le.to, le.toSide);
   }
-  const loopEdges = layoutSelfLoops(selfLoopEdges, nmap, occupiedBySide);
+  const loopEdges = layoutSelfLoops(selfLoopEdges, nmap, occupiedBySide, textMetrics);
   const labelOffsetsByEdgeId = /* @__PURE__ */ new Map();
   const parallelKey = (p) => p.e.from < p.e.to ? `${p.e.from}::${p.e.to}` : `${p.e.to}::${p.e.from}`;
   const byParallel = /* @__PURE__ */ new Map();
@@ -8536,7 +8611,7 @@ function layoutEdges(diag, nodes, lanes = []) {
     const others = nodes.filter((n) => n.id !== c.from && n.id !== c.to);
     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 };
@@ -8651,7 +8726,8 @@ function layoutEdges(diag, nodes, lanes = []) {
       allOtherNodes,
       { x: endpointOffset.fromDx, y: endpointOffset.fromDy },
       { x: endpointOffset.toDx, y: endpointOffset.toDy },
-      avoidRects
+      avoidRects,
+      textMetrics
     );
     const routed1 = route([]);
     const { d, labelX, labelY, labelAnchor, labelAltX } = routed1;
@@ -8707,13 +8783,13 @@ function layoutEdges(diag, nodes, lanes = []) {
     const pillById = /* @__PURE__ */ new Map();
     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 });
     }
     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 });
     }
@@ -8743,7 +8819,7 @@ function layoutEdges(diag, nodes, lanes = []) {
     const laneOfNode = new Map(nodes.map((n) => [n.id, n.lane]));
     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) => ({
         x: centerX - boxW / 2,
@@ -8788,7 +8864,7 @@ function layoutEdges(diag, nodes, lanes = []) {
       if (list.length < 2) continue;
       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, j) => Math.abs(boxes[i].cx - boxes[j].cx) < boxes[i].halfW + boxes[j].halfW + CLEARANCE_LABEL_LABEL;
       const componentOf = list.map((_, i) => i);
@@ -8838,7 +8914,7 @@ function layoutEdges(diag, nodes, lanes = []) {
       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);
@@ -8950,7 +9026,7 @@ function singleStraightSegment(d) {
   if (x1 === x2 && y1 === y2) return null;
   return { x1, y1, x2, y2 };
 }
-function bowSharedStraightPaths(edges, nodes, skipIds) {
+function bowSharedStraightPaths(edges, nodes, skipIds, textMetrics = "proportional") {
   const groups = /* @__PURE__ */ new Map();
   for (const e of edges) {
     if (skipIds.has(e.id)) continue;
@@ -8986,7 +9062,7 @@ function bowSharedStraightPaths(edges, nodes, skipIds) {
       )
     );
     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));
+    const labelRects = edges.filter((x) => hasRenderedLabel(x) && !groupIds.has(x.id)).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, offset) => {
       const cx = midX + nx * offset * 2;
@@ -9029,6 +9105,55 @@ function bowSharedStraightPaths(edges, nodes, skipIds) {
 function nodeRect(n) {
   return { x: n.cx - n.w / 2, y: n.cy - n.h / 2, w: n.w, h: n.h };
 }
+function countPathObstacleCrossings(d, obstacles) {
+  const segments = flattenPathSegments(extractPathSegments(d));
+  return obstacles.filter((obstacle) => segmentsCrossRect(segments, nodeRect(obstacle))).length;
+}
+function makeBackDetourCandidate(A, B, from, to, obstacles, detourY, side) {
+  const lowIsA = A.y >= B.y;
+  const low = lowIsA ? A : B;
+  const lowBendY = low.y - VERTICAL_DETOUR_EXIT;
+  const bandTop = Math.min(detourY, lowBendY);
+  const bandBottom = Math.max(detourY, lowBendY);
+  const bandObstacles = obstacles.map(nodeRect).filter((rect) => rect.y + rect.h >= bandTop && rect.y <= bandBottom);
+  let columnX = detourColumnFor([from, to], side);
+  while (true) {
+    const blockers = bandObstacles.filter(
+      (rect) => rect.x - VERTICAL_DETOUR_GAP < columnX && columnX < rect.x + rect.w + VERTICAL_DETOUR_GAP
+    );
+    if (blockers.length === 0) break;
+    columnX = side === "left" ? Math.min(...blockers.map((rect) => rect.x - VERTICAL_DETOUR_GAP)) : Math.max(...blockers.map((rect) => rect.x + rect.w + VERTICAL_DETOUR_GAP));
+  }
+  const bendAY = lowIsA ? lowBendY : detourY;
+  const bendBY = lowIsA ? detourY : lowBendY;
+  const vertices = [
+    A,
+    { x: A.x, y: bendAY },
+    { x: columnX, y: bendAY },
+    { x: columnX, y: bendBY },
+    { x: B.x, y: bendBY },
+    B
+  ];
+  const d = verticesToPath(vertices);
+  const high = lowIsA ? B : A;
+  return {
+    d,
+    labelX: (high.x + columnX) / 2,
+    crossings: countPathObstacleCrossings(d, obstacles),
+    length: vertices.slice(1).reduce((sum, vertex, index) => {
+      const previous = vertices[index];
+      return sum + Math.hypot(vertex.x - previous.x, vertex.y - previous.y);
+    }, 0)
+  };
+}
+function chooseBackDetourCandidate(A, B, from, to, obstacles, detourY) {
+  const left = makeBackDetourCandidate(A, B, from, to, obstacles, detourY, "left");
+  const right = makeBackDetourCandidate(A, B, from, to, obstacles, detourY, "right");
+  if (left.crossings !== right.crossings) return left.crossings < right.crossings ? left : right;
+  if (Math.abs(left.length - right.length) >= 0.5) return left.length < right.length ? left : right;
+  const preferred = Math.abs(A.x - B.x) < 0.5 ? "right" : A.x < B.x ? "left" : "right";
+  return preferred === "left" ? left : right;
+}
 function rectGap(a, b) {
   const dx = Math.max(0, a.x - (b.x + b.w), b.x - (a.x + a.w));
   const dy = Math.max(0, a.y - (b.y + b.h), b.y - (a.y + a.h));
@@ -9106,8 +9231,8 @@ function sidePoint(n, side) {
       return { x: n.cx + n.w / 2, y: n.cy };
   }
 }
-function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _fromLane, _toLane, edge, labelObstacles = obstacles, fromOffset = { x: 0, y: 0 }, toOffset = { x: 0, y: 0 }, avoidRects = []) {
-  const labelBoxW = edge ? computeLabelBoxW(edge.label, edge.sub) : 0;
+function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _fromLane, _toLane, edge, labelObstacles = obstacles, fromOffset = { x: 0, y: 0 }, toOffset = { x: 0, y: 0 }, avoidRects = [], textMetrics = "proportional") {
+  const labelBoxW = edge ? computeLabelBoxW(edge.label, edge.sub, textMetrics) : 0;
   const labelHalfW = labelBoxW / 2;
   const labelInit = labelInitClearance(edge);
   const verticalPair = fromSide === "bottom" && toSide === "top" || fromSide === "top" && toSide === "bottom";
@@ -9479,7 +9604,7 @@ function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _from
     const detourY = Math.min(A.y, B.y) - 100;
     const corner = 14;
     const xDir = B.x > A.x ? 1 : -1;
-    return {
+    const existing = {
       d: `M ${A.x} ${A.y}
         L ${A.x} ${detourY + corner}
         Q ${A.x} ${detourY}, ${A.x + xDir * corner} ${detourY}
@@ -9493,6 +9618,16 @@ function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _from
       labelY: detourY - labelInit,
       labelAnchor: "middle"
     };
+    const existingCrossings = countPathObstacleCrossings(existing.d, obstacles);
+    if (existingCrossings === 0) return existing;
+    const candidate = chooseBackDetourCandidate(A, B, from, to, obstacles, detourY);
+    if (candidate.crossings >= existingCrossings) return existing;
+    return {
+      d: candidate.d,
+      labelX: candidate.labelX,
+      labelY: detourY - labelInit,
+      labelAnchor: "middle"
+    };
   }
   const midX = fromSide === "left" || fromSide === "right" ? B.x : A.x;
   const midY = fromSide === "top" || fromSide === "bottom" ? B.y : A.y;
@@ -9506,7 +9641,7 @@ function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _from
     labelAnchor: "middle"
   };
 }
-function repositionParallelLabels(edges, nodes) {
+function repositionParallelLabels(edges, nodes, textMetrics = "proportional") {
   const allSegs = new Map(
     edges.map((e) => [e.id, flattenPathSegments(extractPathSegments(e.d))])
   );
@@ -9531,7 +9666,7 @@ function repositionParallelLabels(edges, nodes) {
   for (const pair of byPair.values()) {
     if (pair.length < 2) continue;
     const pairOrder = [...pair].sort(compareSharedPairOrder);
-    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++) {
@@ -9556,17 +9691,27 @@ function repositionParallelLabels(edges, nodes) {
         nodes,
         allEdges: edges,
         allSegs,
-        xRange
+        xRange,
+        textMetrics
       });
       for (let i = 0; i < members.length; i++) members[i].labelY = placed[i];
     }
   }
 }
 function placeAvoidingSiblingPaths(args) {
-  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) => spreadWithMinimalShift(
     idx.map((i) => ({ want: wants[i], size: sizes[i] })),
@@ -9757,14 +9902,14 @@ function labelRectAt(cx, cy, w, h) {
 function inflate(r, pad) {
   return { x: r.x - pad, y: r.y - pad, w: r.w + pad * 2, h: r.h + pad * 2 };
 }
-function slideLabelsAlongOwnPath(edges, nodes) {
+function slideLabelsAlongOwnPath(edges, nodes, textMetrics = "proportional") {
   const withLabel = edges.filter((e) => hasRenderedLabel(e));
   if (withLabel.length === 0) return;
   const segsById = /* @__PURE__ */ new Map();
   for (const e of edges) segsById.set(e.id, flattenPathSegments(extractPathSegments(e.d)));
   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) ?? [];
@@ -10066,7 +10211,7 @@ function separateSharedStraightRuns(edges, nodes) {
     e.d = verticesToPath(verts.get(e.id));
   }
 }
-function pullOutgoingFirstCorner(edges, nodes) {
+function pullOutgoingFirstCorner(edges, nodes, textMetrics = "proportional") {
   if (edges.length < 2) return;
   const \u675F = /* @__PURE__ */ new Map();
   const \u540C\u3058\u7D44\u306E\u6570 = /* @__PURE__ */ new Map();
@@ -10120,10 +10265,10 @@ function pullOutgoingFirstCorner(edges, nodes) {
       }
       e.d = \u524D;
       if (!\u672D\u3092\u65E7\u7D4C\u8DEF\u3078\u8FFD\u5F93\u6E08\u307F) {
-        slideLabelsAlongOwnPath(edges, nodes);
+        slideLabelsAlongOwnPath(edges, nodes, textMetrics);
         \u672D\u3092\u65E7\u7D4C\u8DEF\u3078\u8FFD\u5F93\u6E08\u307F = 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 \u7DDA\u5206\u307E\u3067\u306E\u8DDD\u96E22 = (a, b) => {
         const dx = b.x - a.x;
@@ -10235,13 +10380,13 @@ function fanIncomingEndpoints(edges, nodes) {
   }
   return \u7D42\u70B9\u306E\u79FB\u52D5;
 }
-function followLabelsToFannedTails(edges, obstacles, shifts) {
+function followLabelsToFannedTails(edges, obstacles, shifts, textMetrics = "proportional") {
   if (shifts.size === 0) return;
   const \u6E2C\u308A\u65B9 = \u7DDA\u306E\u6E2C\u308A\u65B9\u3092\u4F5C\u308B();
   const labels = 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]));
   const edgeById = new Map(edges.map((e) => [e.id, e]));
@@ -10273,7 +10418,7 @@ function followLabelsToFannedTails(edges, obstacles, shifts) {
       labelY: e.labelY + \u79FB\u52D5.dy,
       labelAnchor: e.labelAnchor
     };
-    const \u5019\u88DCa\u306E\u7BB1 = computeLabelBBoxWorld({ ...e, ...\u5019\u88DCa });
+    const \u5019\u88DCa\u306E\u7BB1 = computeLabelBBoxWorld({ ...e, ...\u5019\u88DCa }, textMetrics);
     const \u6700\u5F8C\u306F\u7E26 = Math.abs(\u6700\u5F8C.x2 - \u6700\u5F8C.x1) <= Math.abs(\u6700\u5F8C.y2 - \u6700\u5F8C.y1);
     const \u5019\u88DC = [
       \u5019\u88DCa,
@@ -10284,7 +10429,11 @@ function followLabelsToFannedTails(edges, obstacles, shifts) {
       }
     ];
     for (const c of \u5019\u88DC) {
-      const \u672D = { kind: "edge-label", id: e.id, ...computeLabelBBoxWorld({ ...e, ...c }) };
+      const \u672D = {
+        kind: "edge-label",
+        id: e.id,
+        ...computeLabelBBoxWorld({ ...e, ...c }, textMetrics)
+      };
       if (segmentsCrossRect([\u6700\u5F8C], \u672D)) continue;
       if (\u672D\u306E\u79FB\u52D5\u3092\u585E\u3050\u76F8\u624B\u3092\u63A2\u3059(\u5468\u308A, \u5143\u306E\u672D, \u672D) !== null) continue;
       e.labelX = c.labelX;
@@ -10478,7 +10627,7 @@ function expandLanesForNodes(lanes, nodes) {
     };
   });
 }
-function expandLaneGapsForEdgeLabels(lanes, nodes, edges) {
+function expandLaneGapsForEdgeLabels(lanes, nodes, edges, textMetrics = "proportional") {
   if (lanes.length < 2) return lanes;
   const layoutedLanes = lanes.filter((l) => !(l.posX !== void 0 && l.posY !== void 0));
   if (layoutedLanes.length < 2) return lanes;
@@ -10494,7 +10643,7 @@ function expandLaneGapsForEdgeLabels(lanes, nodes, edges) {
     const fi = laneIndexById.get(fromLane);
     const ti = laneIndexById.get(toLane);
     if (fi === void 0 || ti === void 0 || 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);
@@ -10616,7 +10765,7 @@ function \u7DDA\u306E\u7AEF\u306E\u5411\u304D(d, \u7AEF) {
   const \u5019\u88DC = segs.flatMap((s) => [...s.ctrl ?? [], { x: s.x2, y: s.y2 }]);
   return \u5411\u304D\u3092\u53D6\u308B(end, \u5019\u88DC);
 }
-function \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF = "head") {
+function \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF = "head", textMetrics = "proportional") {
   const text = (\u7AEF === "head" ? edge.headLabel : edge.tailLabel)?.trim();
   if (!text) return null;
   const \u5411\u304D = \u7DDA\u306E\u7AEF\u306E\u5411\u304D(edge.d, \u7AEF);
@@ -10627,7 +10776,8 @@ function \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF = "head") {
   const w = measureTextWidth(text, {
     fontSize: \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055,
     fontWeight: EDGE_LABEL_TEXT.sub.fontWeight,
-    fontFamily: "mono"
+    fontFamily: "mono",
+    textMetrics
   });
   const h = \u7BB1\u306E\u9AD8\u3055;
   const \u672D = hasRenderedLabel(edge) && edge.labelX !== void 0 && edge.labelY !== void 0 ? { x: edge.labelX, y: edge.labelY } : null;
@@ -10676,10 +10826,10 @@ function autoStorageHeight(n, defaultH) {
   }
   return Math.max(defaultH, \u5FC5\u8981);
 }
-function autoRowsWidth(n, defaultW) {
+function autoRowsWidth(n, defaultW, textMetrics = "proportional") {
   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);
 }
 function \u7BB1\u306E\u9AD8\u30552(n, \u65E2\u5B9Ah) {
@@ -10717,7 +10867,7 @@ function requiredStackGapForEdgeLabels(diag, allStacks) {
   }
   return required;
 }
-function layoutNodes(diag, lanes) {
+function layoutNodes(diag, lanes, textMetrics) {
   const laneMap = new Map(lanes.map((l) => [l.id, l]));
   const allStacks = Array.from(new Set(diag.nodes.map((n) => n.stack))).sort((a, b) => a - b);
   const rowH = /* @__PURE__ */ new Map();
@@ -10761,7 +10911,7 @@ function layoutNodes(diag, lanes) {
     }
     const size = NODE_SIZE[n.kind];
     if (n.posX !== void 0 && n.posY !== void 0) {
-      const w2 = n.posW ?? n.w ?? autoRowsWidth(n, size.w);
+      const w2 = n.posW ?? n.w ?? autoRowsWidth(n, size.w, textMetrics);
       const h2 = n.posH ?? n.h ?? rowH.get(n.stack) ?? size.h;
       out.push({
         ...n,
@@ -10779,7 +10929,7 @@ function layoutNodes(diag, lanes) {
     const \u81EA\u524D\u306E\u9AD8\u3055 = n.rowMarks !== void 0;
     const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? \u7BB1\u306E\u9AD8\u30552(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
     const cy = \u6BB5\u306E\u82AF;
-    const w = autoRowsWidth(n, size.w);
+    const w = autoRowsWidth(n, size.w, textMetrics);
     out.push({
       ...n,
       cx,
@@ -10899,10 +11049,16 @@ function applyRowLevelNodeShifts(nodes, lanes, nodeShifts) {
   return moved ? { nodes: outNodes, lanes: outLanes } : null;
 }
 function layout(diag) {
+  const textMetrics = resolveTextMetrics(diag.textMetrics);
   const lanes = layoutLanes(diag);
-  const rawNodes = applyFooterShapeDrops(lanes, layoutNodes(diag, lanes));
+  const rawNodes = applyFooterShapeDrops(lanes, layoutNodes(diag, lanes, textMetrics));
   const expandedLanes = expandLanesForNodes(lanes, rawNodes);
-  const gapExpandedLanes = expandLaneGapsForEdgeLabels(expandedLanes, rawNodes, diag.edges);
+  const gapExpandedLanes = expandLaneGapsForEdgeLabels(
+    expandedLanes,
+    rawNodes,
+    diag.edges,
+    textMetrics
+  );
   const nodes = rawNodes.map((n) => {
     if (n.posX !== void 0 && n.posY !== void 0) return n;
     const oldLane = lanes.find((l) => l.id === n.lane);
@@ -10911,13 +11067,13 @@ function layout(diag) {
     return { ...n, cx: newLane.x + newLane.width / 2 };
   });
   const containedLanesPre = recomputeContainedLanes(gapExpandedLanes, nodes);
-  const edgesPre = layoutEdges(diag, nodes, containedLanesPre);
-  const bboxesPre = collectBBoxes(containedLanesPre, nodes, edgesPre);
+  const edgesPre = layoutEdges(diag, nodes, containedLanesPre, textMetrics);
+  const bboxesPre = collectBBoxes(containedLanesPre, nodes, edgesPre, textMetrics);
   const collisionsPre = detectCollisions(bboxesPre, edgesPre);
   const nodesResolved = resolveOverlaps(nodes, collisionsPre);
   const moved = nodesResolved !== nodes;
   const containedLanes = moved ? recomputeContainedLanes(gapExpandedLanes, nodesResolved) : containedLanesPre;
-  const edgesAfterMove = moved ? layoutEdges(diag, nodesResolved, containedLanes) : edgesPre;
+  const edgesAfterMove = moved ? layoutEdges(diag, nodesResolved, containedLanes, textMetrics) : edgesPre;
   const chainShiftClearance = Math.max(CLEARANCE_LABEL_LABEL, CLEARANCE_NODE_LABEL);
   let edges;
   let nodesFinal = nodesResolved;
@@ -10928,10 +11084,13 @@ function layout(diag) {
   } else {
     const propagateResult = resolveEdgeLabelOverlapsWithChainAndPropagate(
       edgesAfterMove,
-      collectBBoxes(containedLanes, nodesResolved, []).filter(
+      collectBBoxes(containedLanes, nodesResolved, [], textMetrics).filter(
         (b) => b.kind === "node" || b.kind === "lane-label"
       ),
-      chainShiftClearance
+      chainShiftClearance,
+      void 0,
+      void 0,
+      textMetrics
     );
     edges = propagateResult.edges;
     if (propagateResult.nodeShifts.size > 0) {
@@ -10943,7 +11102,7 @@ function layout(diag) {
     }
     if (nodesFinal !== nodesResolved) {
       containedLanesFinal = recomputeContainedLanes(laneShiftedBase, nodesFinal);
-      edges = layoutEdges(diag, nodesFinal, containedLanesFinal);
+      edges = layoutEdges(diag, nodesFinal, containedLanesFinal, textMetrics);
     }
   }
   const positionedEdgeIds = new Set(
@@ -10951,21 +11110,31 @@ function layout(diag) {
       (e) => e.routing === "curve" || e.routing === "metro" || e.posX1 !== void 0 && e.posY1 !== void 0 && e.posX2 !== void 0 && e.posY2 !== void 0
     ).map((e) => e.id)
   );
-  bowSharedStraightPaths(edges, nodesFinal, positionedEdgeIds);
-  pullOutgoingFirstCorner(edges, nodesFinal);
+  bowSharedStraightPaths(edges, nodesFinal, positionedEdgeIds, textMetrics);
+  pullOutgoingFirstCorner(edges, nodesFinal, textMetrics);
   const fannedTailShifts = fanIncomingEndpoints(edges, nodesFinal);
   separateSharedStraightRuns(edges, nodesFinal);
   hopEdgeCrossings(edges);
-  const labelClearanceObstacles = collectBBoxes(containedLanesFinal, nodesFinal, []).filter(
+  const labelClearanceObstacles = collectBBoxes(
+    containedLanesFinal,
+    nodesFinal,
+    [],
+    textMetrics
+  ).filter(
     (b) => b.kind === "node" || b.kind === "lane-label"
   );
-  followLabelsToFannedTails(edges, labelClearanceObstacles, fannedTailShifts);
-  repositionParallelLabels(edges, nodesFinal);
-  slideLabelsAlongOwnPath(edges, nodesFinal);
+  followLabelsToFannedTails(edges, labelClearanceObstacles, fannedTailShifts, textMetrics);
+  repositionParallelLabels(edges, nodesFinal, textMetrics);
+  slideLabelsAlongOwnPath(edges, nodesFinal, textMetrics);
   if (!isChainEdgeLabelDisabled()) {
-    edges = resolveLabelClearanceAfterPathPasses(edges, labelClearanceObstacles);
+    edges = resolveLabelClearanceAfterPathPasses(
+      edges,
+      labelClearanceObstacles,
+      void 0,
+      textMetrics
+    );
   }
-  const bboxes = collectBBoxes(containedLanesFinal, nodesFinal, edges);
+  const bboxes = collectBBoxes(containedLanesFinal, nodesFinal, edges, textMetrics);
   const collisions = detectCollisions(bboxes, edges);
   const nearCollisions = detectNearCollisions(bboxes, edges);
   if (collisions.length > 0) {
@@ -11005,6 +11174,8 @@ function layout(diag) {
     // 描画側の固定の字の言語 (#847)。 既定 (`en`) と型の外の値は持たせない = 配置の結果の形を
     // 変更前と揃え、記法の書き損じで一部の字だけ日本語になる形を作らない
     ...resolveLang(diag.lang) === "ja" ? { lang: "ja" } : {},
+    // 既定は持ち越さない。既存の LaidDiagram の形を変えず、等幅の図だけ描画へ伝える
+    ...textMetrics === "monospace" ? { textMetrics: "monospace" } : {},
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...diag.type ? { type: diag.type } : {},
     bboxes,
@@ -11913,6 +12084,7 @@ function CdlEdgeView({
       "data-cdl-edge-label": edge.label,
       "data-cdl-edge-sub": edge.sub ?? "",
       "data-cdl-tone": edge.tone,
+      "data-cdl-edge-role": edge.role,
       children: [
         isDotted ? /* @__PURE__ */ jsxs("g", { children: [
           /* @__PURE__ */ jsx("path", { id: glowPathId, d: glowPathD, fill: "none", stroke: "none" }),
@@ -12064,11 +12236,12 @@ function CdlEdgeGlowView({
 }
 function CdlEdgeLabelView({
   edge,
-  active
+  active,
+  textMetrics = "proportional"
 }) {
   if (!hasRenderedLabel(edge)) return null;
   const color = edgeColor(edge);
-  const bbox = computeLabelBBoxWorld(edge);
+  const bbox = computeLabelBBoxWorld(edge, textMetrics);
   const boxW = bbox.w;
   const boxH = bbox.h;
   const boxLeftX = bbox.x - edge.labelX;
@@ -12084,6 +12257,8 @@ function CdlEdgeLabelView({
       "data-cdl-edge-label-for": edge.id,
       "data-cdl-edge-label-text": edge.label,
       "data-cdl-edge-sub-text": edge.sub ?? "",
+      "data-cdl-tone": edge.tone,
+      "data-cdl-edge-role": edge.role,
       children: [
         edge.labelPlate !== false && /* @__PURE__ */ jsx(
           "rect",
@@ -12137,9 +12312,10 @@ function CdlEdgeLabelView({
 function CdlEdgeEndLabelView({
   edge,
   active,
-  \u7AEF
+  \u7AEF,
+  textMetrics = "proportional"
 }) {
-  const \u7F6E\u304D\u5834\u6240 = \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF);
+  const \u7F6E\u304D\u5834\u6240 = \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF, textMetrics);
   if (!\u7F6E\u304D\u5834\u6240) return null;
   const color = edgeColor(edge);
   return /* @__PURE__ */ jsx(
@@ -12148,6 +12324,8 @@ function CdlEdgeEndLabelView({
       "data-cdl-role": "edge-end-label",
       "data-cdl-edge-end-label-for": edge.id,
       "data-cdl-edge-end": \u7AEF,
+      "data-cdl-tone": edge.tone,
+      "data-cdl-edge-role": edge.role,
       x: \u7F6E\u304D\u5834\u6240.x,
       y: \u7F6E\u304D\u5834\u6240.y,
       fontSize: \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055,
@@ -12392,12 +12570,18 @@ var SEQ_DOT = 7;
 var SEQ_SELF_W = 52;
 var SEQ_COL_MIN = 200;
 var g4 = (v) => Math.round(v / 4) * 4;
-function sequenceBoardMetrics(data) {
+function sequenceBoardMetrics(data, textMetrics = "proportional") {
   const \u540D\u5E45 = data.actors.map(
-    (a) => Math.max(textWidth(a.name, SEQ_NAME), a.subtitle ? textWidth(a.subtitle, SEQ_SUB) : 0)
+    (a) => Math.max(
+      textWidth(a.name, SEQ_NAME, 0, textMetrics),
+      a.subtitle ? textWidth(a.subtitle, SEQ_SUB, 0, textMetrics) : 0
+    )
   );
   const colW = g4(Math.max(SEQ_COL_MIN, Math.max(0, ...\u540D\u5E45) + SEQ_COL_PAD));
-  const \u8A9E\u5E45 = Math.max(0, ...data.messages.map((m) => textWidth(m.label, SEQ_LABEL)));
+  const \u8A9E\u5E45 = Math.max(
+    0,
+    ...data.messages.map((m) => textWidth(m.label, SEQ_LABEL, 0, textMetrics))
+  );
   const gutter = g4(SEQ_EDGE + SEQ_GUTTER_PAD + \u8A9E\u5E45 + SEQ_GUTTER_GAP);
   const headY = SEQ_EDGE + SEQ_HEAD;
   const rowY = (i) => headY + SEQ_ROW_PAD + i * SEQ_ROW;
@@ -12410,11 +12594,12 @@ function sequenceBoardMetrics(data) {
 }
 function SequenceBoardNode({
   node,
-  stateValues
+  stateValues,
+  textMetrics = "proportional"
 }) {
   const data = node.sequenceData;
   if (!data) return /* @__PURE__ */ jsx("g", { "data-cdl-role": "sequence-board" });
-  const m = sequenceBoardMetrics(data);
+  const m = sequenceBoardMetrics(data, textMetrics);
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
   const \u73FE\u5728 = (() => {
@@ -13065,7 +13250,8 @@ function GenericNode({
   active,
   value,
   stateValues,
-  \u5024\u306E\u540D\u524D
+  \u5024\u306E\u540D\u524D,
+  textMetrics = "proportional"
 }) {
   const base = STYLES[node.kind] ?? FALLBACK;
   const toned = toneColor3(node.tone);
@@ -13204,7 +13390,7 @@ function GenericNode({
           const resolved = node.rows.map((row) => interpolate(row, stateValues, \u5024\u306E\u540D\u524D));
           const splits = resolved.map(splitRow);
           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;
@@ -13688,8 +13874,8 @@ function \u5024\u3068\u5272\u5408\u306E\u6587\u5B57(\u5024, \u5272\u5408, \u5408
   return \u7D44.\u5024 === null ? \u7D44.\u5272\u5408 : `${\u7D44.\u5024} ${\u7D44.\u5272\u5408}`;
 }
 var \u7A74\u306B\u5BFE\u3059\u308B\u4E0A\u9650 = 0.8;
-function \u4E2D\u592E\u306E\u5B57(\u6BD4\u4F8B\u3057\u305F\u5927\u304D\u3055, \u7A74\u306E\u534A\u5F84, \u6587) {
-  const \u5165\u308B\u5927\u304D\u3055 = \u7A74\u306E\u534A\u5F84 * 2 * \u7A74\u306B\u5BFE\u3059\u308B\u4E0A\u9650 / Math.max(textWidth(\u6587, 1), 1e-6);
+function \u4E2D\u592E\u306E\u5B57(\u6BD4\u4F8B\u3057\u305F\u5927\u304D\u3055, \u7A74\u306E\u534A\u5F84, \u6587, textMetrics = "proportional") {
+  const \u5165\u308B\u5927\u304D\u3055 = \u7A74\u306E\u534A\u5F84 * 2 * \u7A74\u306B\u5BFE\u3059\u308B\u4E0A\u9650 / Math.max(textWidth(\u6587, 1, 0, textMetrics), 1e-6);
   return Math.min(Math.max(\u6BD4\u4F8B\u3057\u305F\u5927\u304D\u3055, \u7E2E\u3093\u3060\u7D75\u306E\u5B57\u306E\u4E0B\u9650), \u5165\u308B\u5927\u304D\u3055);
 }
 function ChartPieNode({
@@ -13697,7 +13883,8 @@ function ChartPieNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const instanceId = useId().replace(/[^A-Za-z0-9_-]/g, "");
   const x0 = node.cx - node.w / 2;
@@ -13728,15 +13915,26 @@ function ChartPieNode({
     return `${\u5B9F\u5024\u8868\u8A18(d.value)}%` === \u5272\u5408\u306E\u6587\u5B57[i] ? \u540D : `${\u540D}  ${\u5B9F\u5024\u8868\u8A18(d.value)}`;
   });
   if (\u5F62 !== "ring") {
-    const \u5171\u901A = { node, active, data, \u5272\u5408: \u4ECA\u306E\u5272\u5408, x0, y0, drawing, progress, instanceId };
+    const \u5171\u901A = {
+      node,
+      active,
+      data,
+      \u5272\u5408: \u4ECA\u306E\u5272\u5408,
+      x0,
+      y0,
+      drawing,
+      progress,
+      instanceId,
+      textMetrics
+    };
     return \u5F62 === "arcs" ? \u5F27\u306E\u5F62(\u5171\u901A) : \u8868\u306E\u5F62(\u5171\u901A);
   }
   const \u540D\u672D\u5E45 = Math.max(
     0,
     ...data.map(
       (_d, i) => Math.max(
-        textWidth(\u5272\u5408\u306E\u6587\u5B57[i] ?? "", \u5272\u5408\u306E\u7D1A),
-        textWidth(\u540D\u524D\u306E\u6587\u5B57[i] ?? "", \u540D\u524D\u306E\u7D1A)
+        textWidth(\u5272\u5408\u306E\u6587\u5B57[i] ?? "", \u5272\u5408\u306E\u7D1A, 0, textMetrics),
+        textWidth(\u540D\u524D\u306E\u6587\u5B57[i] ?? "", \u540D\u524D\u306E\u7D1A, 0, textMetrics)
       )
     )
   );
@@ -13751,8 +13949,8 @@ function ChartPieNode({
   const \u524D\u306Eslices = \u524D\u3042\u308A ? \u8F2A\u3092\u7D44\u3080(data, cx, cy, \u524D\u306E\u5916\u534A\u5F84, \u524D\u306E\u5185\u534A\u5F84, \u524D\u306E\u5272\u5408) : [];
   const \u7A74 = \u524D\u3042\u308A ? \u524D\u306E\u5185\u534A\u5F84 : \u5916\u306E\u5185\u534A\u5F84;
   const \u5408\u8A08\u306E\u6587 = \u5B9F\u5024\u8868\u8A18(Math.round(\u524D\u3042\u308A ? \u4ECA\u306E\u5408\u8A08 : total));
-  const \u5408\u8A08\u306E\u5B57 = \u4E2D\u592E\u306E\u5B57(Math.round(radius * 0.26), \u7A74, \u5408\u8A08\u306E\u6587);
-  const \u898B\u51FA\u3057\u306E\u5B572 = \u4E2D\u592E\u306E\u5B57(Math.round(radius * 0.12), \u7A74, "\u5408\u8A08");
+  const \u5408\u8A08\u306E\u5B57 = \u4E2D\u592E\u306E\u5B57(Math.round(radius * 0.26), \u7A74, \u5408\u8A08\u306E\u6587, textMetrics);
+  const \u898B\u51FA\u3057\u306E\u5B572 = \u4E2D\u592E\u306E\u5B57(Math.round(radius * 0.12), \u7A74, "\u5408\u8A08", textMetrics);
   const \u5408\u8A08\u306E\u4E0B = Math.max(Math.round(radius * 0.2), \u5408\u8A08\u306E\u5B57 * 0.25 + \u898B\u51FA\u3057\u306E\u5B572 * 0.8);
   const slices = \u8F2A\u3092\u7D44\u3080(data, cx, cy, radius, \u5916\u306E\u5185\u534A\u5F84, \u4ECA\u306E\u5272\u5408);
   const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
@@ -13935,14 +14133,24 @@ function \u67A0(node, active) {
     }
   );
 }
-function \u5F27\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing, progress }) {
+function \u5F27\u306E\u5F62({
+  node,
+  active,
+  data,
+  \u5272\u5408,
+  x0,
+  y0,
+  drawing,
+  progress,
+  textMetrics
+}) {
   const PAD = 20;
   const \u540D\u524D\u306E\u7D1A = 14;
   const \u5272\u5408\u306E\u7D1A = 24;
   const \u5370\u304B\u3089\u540D\u524D\u307E\u30672 = 18;
   const \u540D\u524D\u304B\u3089\u5272\u5408\u307E\u3067 = 24;
   const \u5272\u5408\u306E\u6587\u5B57 = \u5272\u5408.map(\u5272\u5408\u8868\u8A18);
-  const \u4E00\u89A7\u5E45 = 10 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672 + Math.max(0, ...data.map((d) => textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A))) + \u540D\u524D\u304B\u3089\u5272\u5408\u307E\u3067 + Math.max(0, ...\u5272\u5408\u306E\u6587\u5B57.map((t) => textWidth(t, \u5272\u5408\u306E\u7D1A)));
+  const \u4E00\u89A7\u5E45 = 10 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672 + Math.max(0, ...data.map((d) => textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A, 0, textMetrics))) + \u540D\u524D\u304B\u3089\u5272\u5408\u307E\u3067 + Math.max(0, ...\u5272\u5408\u306E\u6587\u5B57.map((t) => textWidth(t, \u5272\u5408\u306E\u7D1A, 0, textMetrics)));
   const \u7E26\u304B\u3089 = (node.h - PAD * 2) / 2;
   const \u6A2A\u304B\u3089 = (node.w - PAD * 2 - \u4E00\u89A7\u5E45 - 28) / 2;
   const R = Math.max(24, Math.min(\u7E26\u304B\u3089, \u6A2A\u304B\u3089));
@@ -14028,7 +14236,18 @@ function \u5F27\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing,
     })
   ] });
 }
-function \u8868\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing, progress, instanceId }) {
+function \u8868\u306E\u5F62({
+  node,
+  active,
+  data,
+  \u5272\u5408,
+  x0,
+  y0,
+  drawing,
+  progress,
+  instanceId,
+  textMetrics
+}) {
   const PAD = 20;
   const \u898B\u51FA\u3057\u306E\u7D1A = 11;
   const \u540D\u524D\u306E\u7D1A = 15;
@@ -14037,9 +14256,18 @@ function \u8868\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing,
   const \u5370\u304B\u3089\u540D\u524D\u307E\u30672 = 18;
   const \u5272\u5408\u306E\u6587\u5B57 = \u5272\u5408.map(\u5272\u5408\u8868\u8A18);
   const \u5B9F\u6570\u306E\u6587\u5B57 = data.map((d) => \u5B9F\u5024\u8868\u8A18(d.value));
-  const \u540D\u524D\u5E45 = Math.max(0, ...data.map((d) => textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A)));
-  const \u5272\u5408\u5E45 = Math.max(textWidth("\u5272\u5408", \u898B\u51FA\u3057\u306E\u7D1A), ...\u5272\u5408\u306E\u6587\u5B57.map((t) => textWidth(t, \u5272\u5408\u306E\u7D1A)));
-  const \u5B9F\u6570\u5E45 = Math.max(textWidth("\u5024", \u898B\u51FA\u3057\u306E\u7D1A), ...\u5B9F\u6570\u306E\u6587\u5B57.map((t) => textWidth(t, \u5B9F\u6570\u306E\u7D1A)));
+  const \u540D\u524D\u5E45 = Math.max(
+    0,
+    ...data.map((d) => textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A, 0, textMetrics))
+  );
+  const \u5272\u5408\u5E45 = Math.max(
+    textWidth("\u5272\u5408", \u898B\u51FA\u3057\u306E\u7D1A, 0, textMetrics),
+    ...\u5272\u5408\u306E\u6587\u5B57.map((t) => textWidth(t, \u5272\u5408\u306E\u7D1A, 0, textMetrics))
+  );
+  const \u5B9F\u6570\u5E45 = Math.max(
+    textWidth("\u5024", \u898B\u51FA\u3057\u306E\u7D1A, 0, textMetrics),
+    ...\u5B9F\u6570\u306E\u6587\u5B57.map((t) => textWidth(t, \u5B9F\u6570\u306E\u7D1A, 0, textMetrics))
+  );
   const \u8868\u5E45 = 10 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672 + \u540D\u524D\u5E45 + 28 + \u5272\u5408\u5E45 + 24 + \u5B9F\u6570\u5E45;
   const \u7E26\u304B\u3089 = (node.h - PAD * 2) / 2;
   const \u6A2A\u304B\u3089 = (node.w - PAD * 2 - \u8868\u5E45 - 28) / 2;
@@ -14048,8 +14276,8 @@ function \u8868\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing,
   const cx = PAD + R;
   const cy = node.h / 2;
   const \u5408\u8A08\u306E\u6587 = \u5B9F\u5024\u8868\u8A18(Math.round(data.reduce((acc, d) => acc + d.value, 0)));
-  const \u5408\u8A08\u306E\u5B57 = \u4E2D\u592E\u306E\u5B57(Math.round(R * 0.26), \u5185\u534A\u5F84, \u5408\u8A08\u306E\u6587);
-  const \u898B\u51FA\u3057\u306E\u5B572 = \u4E2D\u592E\u306E\u5B57(Math.round(R * 0.12), \u5185\u534A\u5F84, "\u5408\u8A08");
+  const \u5408\u8A08\u306E\u5B57 = \u4E2D\u592E\u306E\u5B57(Math.round(R * 0.26), \u5185\u534A\u5F84, \u5408\u8A08\u306E\u6587, textMetrics);
+  const \u898B\u51FA\u3057\u306E\u5B572 = \u4E2D\u592E\u306E\u5B57(Math.round(R * 0.12), \u5185\u534A\u5F84, "\u5408\u8A08", textMetrics);
   const \u5408\u8A08\u306E\u4E0B = Math.max(Math.round(R * 0.2), \u5408\u8A08\u306E\u5B57 * 0.25 + \u898B\u51FA\u3057\u306E\u5B572 * 0.8);
   const \u8868\u5DE6 = node.w - PAD - \u8868\u5E45;
   const \u53F3\u7AEF = node.w - PAD;
@@ -14180,7 +14408,8 @@ function ChartGaugeNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -14199,7 +14428,10 @@ function ChartGaugeNode({
   const \u533A\u753B\u306E\u9593 = 12;
   const \u6570\u5024\u306E\u884C = (d) => \u5024\u3068\u5272\u5408\u306E\u6587\u5B57(\u5B9F\u5024\u8868\u8A18(d.value), \u5272\u5408\u8868\u8A18(d.value / total), total);
   const \u5272\u308A\u4ED8\u3051\u308B = (\u4EF6\u305F\u3061) => {
-    const \u5E45 = Math.max(\u5370\u306E\u5E452, ...\u4EF6\u305F\u3061.map((d) => textWidth(\u6570\u5024\u306E\u884C(d), \u6570\u5024\u306E\u7D1A))) + \u533A\u753B\u306E\u9593;
+    const \u5E45 = Math.max(
+      \u5370\u306E\u5E452,
+      ...\u4EF6\u305F\u3061.map((d) => textWidth(\u6570\u5024\u306E\u884C(d), \u6570\u5024\u306E\u7D1A, 0, textMetrics))
+    ) + \u533A\u753B\u306E\u9593;
     const \u884C\u306E\u4EF6\u65702 = Math.min(
       Math.max(1, Math.floor(\u4F7F\u3048\u308B\u5E452 / Math.max(\u5E45, 1))),
       Math.max(\u4EF6\u305F\u3061.length, 1)
@@ -14274,7 +14506,7 @@ function ChartGaugeNode({
     return { d, frac, path: \u6247\u306E\u9053(a0, a1, \u524D\u306E\u5185\u534A\u5F84, \u524D\u306E\u5916\u534A\u5F84) };
   });
   const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A18(Math.round(total));
-  const \u5358\u4F4D\u5E45 = Math.max(textWidth(\u5408\u8A08\u306E\u6587\u5B57, 100), 1) / 100;
+  const \u5358\u4F4D\u5E45 = Math.max(textWidth(\u5408\u8A08\u306E\u6587\u5B57, 100, 0, textMetrics), 1) / 100;
   const \u7D1A\u306E\u5019\u88DC = Math.min(
     // 横 = 字の上の角が内側の円に入る大きさ
     \u5185\u534A\u5F84 / Math.sqrt((\u5358\u4F4D\u5E45 / 2) ** 2 + 1.25 ** 2),
@@ -14367,7 +14599,7 @@ function ChartGaugeNode({
       const y = \u5185\u8A33\u306Ey + \u6BB5\u306E\u9AD8\u3055 * \u6BB5;
       const \u53CE\u307E\u308B\u5E45 = \u5185\u8A33\u306E\u5E45 - \u533A\u753B\u306E\u9593;
       const \u6570\u306E\u884C = \u5185\u8A33\u306E\u6570\u5024[idx] ?? "";
-      const \u5207\u3063\u305F\u6570\u306E\u884C = \u5207\u308A\u8A70\u3081\u308B(\u6570\u306E\u884C, \u53CE\u307E\u308B\u5E45, \u6570\u5024\u306E\u7D1A);
+      const \u5207\u3063\u305F\u6570\u306E\u884C = \u5207\u308A\u8A70\u3081\u308B(\u6570\u306E\u884C, \u53CE\u307E\u308B\u5E45, \u6570\u5024\u306E\u7D1A, textMetrics);
       return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
         /* @__PURE__ */ jsx(
           "rect",
@@ -14388,7 +14620,7 @@ function ChartGaugeNode({
             fontSize: \u540D\u524D\u306E\u7D1A,
             fontWeight: 700,
             fill: "var(--cdl-text, #1a1f2a)",
-            children: \u5207\u308A\u8A70\u3081\u308B(d.label ?? "", \u53CE\u307E\u308B\u5E45, \u540D\u524D\u306E\u7D1A)
+            children: \u5207\u308A\u8A70\u3081\u308B(d.label ?? "", \u53CE\u307E\u308B\u5E45, \u540D\u524D\u306E\u7D1A, textMetrics)
           }
         ),
         /* @__PURE__ */ jsx("text", { x, y: y + 46, fontSize: \u6570\u5024\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: \u5207\u3063\u305F\u6570\u306E\u884C === \u6570\u306E\u884C ? /* @__PURE__ */ jsx(
@@ -14406,12 +14638,12 @@ function ChartGaugeNode({
 function \u6975(cx, cy, r, a) {
   return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
 }
-function \u5207\u308A\u8A70\u3081\u308B(s, \u4E0A\u9650, \u7D1A) {
-  if (\u4E0A\u9650 <= 0 || textWidth(s, \u7D1A) <= \u4E0A\u9650) return s;
-  const \u8A18\u53F7\u5E45 = textWidth("\u2026", \u7D1A);
+function \u5207\u308A\u8A70\u3081\u308B(s, \u4E0A\u9650, \u7D1A, textMetrics = "proportional") {
+  if (\u4E0A\u9650 <= 0 || textWidth(s, \u7D1A, 0, textMetrics) <= \u4E0A\u9650) return s;
+  const \u8A18\u53F7\u5E45 = textWidth("\u2026", \u7D1A, 0, textMetrics);
   let out = "";
   for (const c of s) {
-    if (textWidth(out + c, \u7D1A) + \u8A18\u53F7\u5E45 > \u4E0A\u9650) break;
+    if (textWidth(out + c, \u7D1A, 0, textMetrics) + \u8A18\u53F7\u5E45 > \u4E0A\u9650) break;
     out += c;
   }
   return `${out}\u2026`;
@@ -14425,7 +14657,8 @@ function ChartRadialNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -14443,7 +14676,10 @@ function ChartRadialNode({
   const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E45 + Math.max(
     0,
     ...data.map(
-      (d, i) => Math.max(textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A), textWidth(\u6570\u5024\u306E\u6587\u5B57[i] ?? "", \u6570\u5024\u306E\u7D1A))
+      (d, i) => Math.max(
+        textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A, 0, textMetrics),
+        textWidth(\u6570\u5024\u306E\u6587\u5B57[i] ?? "", \u6570\u5024\u306E\u7D1A, 0, textMetrics)
+      )
     )
   );
   const \u5F27\u306B\u4F7F\u3048\u308B\u5E45 = node.w - PAD * 2 - \u4E00\u89A7\u306E\u5E45 - \u4E00\u89A7\u3068\u5F27\u306E\u9593;
@@ -14590,7 +14826,8 @@ function arcColor2(tone, idx) {
 function ChartStatNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -14619,7 +14856,13 @@ function ChartStatNode({
       const frac = total > 0 ? d.value / total : 0;
       const \u8272 = \u5370\u306E\u8272(d.tone, idx);
       const \u6570\u5024 = \u5B9F\u5024\u8868\u8A18(d.value);
-      const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A02.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
+      const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(
+        \u6570\u5024,
+        \u67A02.w - \u533A\u753B.\u4F59\u767D * 2,
+        \u533A\u753B.\u6570\u5024\u306E\u7D1A,
+        \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1,
+        textMetrics
+      );
       return /* @__PURE__ */ jsxs(
         "g",
         {
@@ -14676,7 +14919,8 @@ function ChartStatNode({
                   `\u524D ${\u5B9F\u5024\u8868\u8A18(d.previous)}`,
                   \u67A02.w - \u533A\u753B.\u4F59\u767D * 2,
                   \u533A\u753B.\u524D\u306E\u7D1A,
-                  8
+                  8,
+                  textMetrics
                 ),
                 textAnchor: "middle",
                 fill: "var(--cdl-text-dim, #5a6270)",
@@ -14765,9 +15009,9 @@ function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570, \u524D\u3092\u51FA\u
     \u67A0: (idx) => ({ x: \u5E45 * idx, y: 0, w: \u5E45, h })
   };
 }
-function \u53CE\u3081\u308B\u7D1A(\u5B572, \u4F7F\u3048\u308B\u5E452, \u521D\u671F, \u4E0B\u9650) {
+function \u53CE\u3081\u308B\u7D1A(\u5B572, \u4F7F\u3048\u308B\u5E452, \u521D\u671F, \u4E0B\u9650, textMetrics = "proportional") {
   let \u7D1A = \u521D\u671F;
-  while (\u7D1A > \u4E0B\u9650 && textWidth(\u5B572, \u7D1A) > \u4F7F\u3048\u308B\u5E452) \u7D1A -= 1;
+  while (\u7D1A > \u4E0B\u9650 && textWidth(\u5B572, \u7D1A, 0, textMetrics) > \u4F7F\u3048\u308B\u5E452) \u7D1A -= 1;
   return \u7D1A;
 }
 function \u5F27\u306E\u90533(cx, cy, r, \u5272\u5408) {
@@ -14802,7 +15046,8 @@ function ChartWaffleNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -14821,7 +15066,10 @@ function ChartWaffleNode({
   const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E452 + Math.max(
     0,
     ...data.map(
-      (d, i) => Math.max(textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A), textWidth(\u6570\u5024\u306E\u6587\u5B57[i] ?? "", \u6570\u5024\u306E\u7D1A))
+      (d, i) => Math.max(
+        textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A, 0, textMetrics),
+        textWidth(\u6570\u5024\u306E\u6587\u5B57[i] ?? "", \u6570\u5024\u306E\u7D1A, 0, textMetrics)
+      )
     )
   );
   const \u4F7F\u3048\u308B\u9AD8\u3055 = node.h - PAD * 2;
@@ -14923,7 +15171,8 @@ function ChartStackedBarNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -14933,7 +15182,7 @@ function ChartStackedBarNode({
   const \u540D\u524D\u306E\u7D1A = 13;
   const \u533A\u753B\u306E\u7D1A = 12;
   const \u6642\u70B9\u306E\u7D1A = 13;
-  const \u6642\u70B9\u306E\u5E45 = Math.max(0, ...\u5E2F\u305F\u3061.map((b) => textWidth(b.\u540D\u524D, \u6642\u70B9\u306E\u7D1A))) + (\u5E2F\u305F\u3061.length > 1 ? 16 : 0);
+  const \u6642\u70B9\u306E\u5E45 = Math.max(0, ...\u5E2F\u305F\u3061.map((b) => textWidth(b.\u540D\u524D, \u6642\u70B9\u306E\u7D1A, 0, textMetrics))) + (\u5E2F\u305F\u3061.length > 1 ? 16 : 0);
   const \u5E2F\u306E\u5DE6 = PAD + \u6642\u70B9\u306E\u5E45;
   const \u5E2F\u306E\u5E45 = Math.max(40, node.w - \u5E2F\u306E\u5DE6 - PAD);
   const \u5E2F\u306E\u9AD8\u3055 = 44;
@@ -15026,7 +15275,7 @@ function ChartStackedBarNode({
         })()
       ] }, `bar-${\u6BB5}`);
     }),
-    \u4E00\u89A7\u306E\u4E26\u3073(data, \u5E2F\u306E\u5DE6, node.w - PAD, \u540D\u524D\u306E\u7D1A).map(({ d, idx, x, \u884C }) => {
+    \u4E00\u89A7\u306E\u4E26\u3073(data, \u5E2F\u306E\u5DE6, node.w - PAD, \u540D\u524D\u306E\u7D1A, textMetrics).map(({ d, idx, x, \u884C }) => {
       const y = \u4E0A\u7AEF + \u5E2F\u305F\u3061.length * (\u5E2F\u306E\u9AD8\u3055 + \u5E2F\u306E\u9593) - \u5E2F\u306E\u9593 + 16 + \u4E00\u89A7\u306E\u9AD8\u3055 / 2 + \u884C * \u4E00\u89A7\u306E\u9AD8\u3055;
       return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-stacked-bar-legend", children: [
         /* @__PURE__ */ jsx("rect", { x, y: y - 5, width: 10, height: 10, rx: 2, fill: \u5370\u306E\u82723(d.tone, idx) }),
@@ -15061,12 +15310,12 @@ function \u5370\u306E\u82723(tone, idx) {
 }
 var \u5370\u304B\u3089\u540D\u524D\u307E\u3067 = 16;
 var \u4EF6\u306E\u9593 = 10;
-function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
+function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A, textMetrics = "proportional") {
   const out = [];
   let x = \u5DE6;
   let \u884C = 0;
   data.forEach((d, idx) => {
-    const \u5E45 = \u5370\u304B\u3089\u540D\u524D\u307E\u3067 + textWidth(d.label ?? "", \u7D1A);
+    const \u5E45 = \u5370\u304B\u3089\u540D\u524D\u307E\u3067 + textWidth(d.label ?? "", \u7D1A, 0, textMetrics);
     if (x > \u5DE6 && x + \u5E45 > \u53F3\u7AEF) {
       \u884C += 1;
       x = \u5DE6;
@@ -15082,7 +15331,8 @@ function ChartSlopeNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -15125,16 +15375,22 @@ function ChartSlopeNode({
   const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map(
     (s) => \u5F62 === "delta" ? \u5897\u6E1B\u8868\u8A18(s.\u524D, s.\u4ECA) : \u5B9F\u5024\u8868\u8A18(s.\u4ECA)
   );
-  const \u5DE6\u5024\u5E45 = Math.max(0, ...\u5DE6\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
-  const \u53F3\u5024\u5E45 = Math.max(0, ...\u53F3\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
+  const \u5DE6\u5024\u5E45 = Math.max(0, ...\u5DE6\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A, 0, textMetrics)));
+  const \u53F3\u5024\u5E45 = Math.max(0, ...\u53F3\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A, 0, textMetrics)));
   const \u540D\u524D\u306B\u4F7F\u3048\u308B = Math.max(
     0,
     (node.w - PAD * 2 - \u7DDA\u306E\u6700\u5C0F\u5E45 - (\u5DE6\u5024\u5E45 + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067) - (\u53F3\u5024\u5E45 + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067)) / 2
   );
-  const \u540D\u524D\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A2(\u7CFB\u5217\u305F\u3061.map((s) => s.\u540D\u524D), \u540D\u524D\u306B\u4F7F\u3048\u308B, \u540D\u524D\u306E\u4E0A\u9650\u7D1A, \u540D\u524D\u306E\u4E0B\u9650\u7D1A);
+  const \u540D\u524D\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A2(
+    \u7CFB\u5217\u305F\u3061.map((s) => s.\u540D\u524D),
+    \u540D\u524D\u306B\u4F7F\u3048\u308B,
+    \u540D\u524D\u306E\u4E0A\u9650\u7D1A,
+    \u540D\u524D\u306E\u4E0B\u9650\u7D1A,
+    textMetrics
+  );
   const \u540D\u524D\u5E45 = Math.min(
     \u540D\u524D\u306B\u4F7F\u3048\u308B,
-    Math.max(0, ...\u7CFB\u5217\u305F\u3061.map((s) => textWidth(s.\u540D\u524D, \u540D\u524D\u306E\u7D1A)))
+    Math.max(0, ...\u7CFB\u5217\u305F\u3061.map((s) => textWidth(s.\u540D\u524D, \u540D\u524D\u306E\u7D1A, 0, textMetrics)))
   );
   const \u5DE6\u306E\u4F59\u767D = \u540D\u524D\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067 + \u5DE6\u5024\u5E45 + \u8EF8\u304B\u3089\u5024\u307E\u3067;
   const \u53F3\u306E\u4F59\u767D = \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067 + \u540D\u524D\u5E45;
@@ -15320,10 +15576,12 @@ function \u5370\u306E\u82724(tone, idx) {
   if (tone) return TONE[tone];
   return chartSeriesColor(idx);
 }
-function \u53CE\u3081\u308B\u7D1A2(\u540D\u524D\u305F\u3061, \u5E45, \u4E0A\u9650, \u4E0B\u9650) {
+function \u53CE\u3081\u308B\u7D1A2(\u540D\u524D\u305F\u3061, \u5E45, \u4E0A\u9650, \u4E0B\u9650, textMetrics = "proportional") {
   if (\u540D\u524D\u305F\u3061.length === 0) return \u4E0A\u9650;
   let \u7D1A = \u4E0A\u9650;
-  while (\u7D1A > \u4E0B\u9650 && Math.max(...\u540D\u524D\u305F\u3061.map((n) => textWidth(n, \u7D1A))) > \u5E45) \u7D1A -= 1;
+  while (\u7D1A > \u4E0B\u9650 && Math.max(...\u540D\u524D\u305F\u3061.map((n) => textWidth(n, \u7D1A, 0, textMetrics))) > \u5E45) {
+    \u7D1A -= 1;
+  }
   return \u7D1A;
 }
 function \u5C0F\u6570\u306E\u6841(n) {
@@ -15371,6 +15629,7 @@ function ChartBarNode({
     return { y: yAt(v), value: v };
   });
   const \u6FC3\u3055 = (v) => vMax > 0 ? v >= vMax ? 1 : 0.45 : 0.9;
+  const \u4E3B\u5F79\u306E\u68D2\u304B = (v) => vMax > 0 && v >= vMax;
   const \u89D2\u4E38 = Math.min(barW * 0.06, 8);
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u6A2A\u8EF8\u306Ey = PAD_TOP2 + canvasH;
@@ -15437,6 +15696,7 @@ function ChartBarNode({
         {
           "data-cdl-role": "chart-bar",
           "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+          "data-cdl-emphasis": \u4E3B\u5F79\u306E\u68D2\u304B(d.value) ? "primary" : void 0,
           x: bx,
           y: by,
           width: barW,
@@ -15783,7 +16043,8 @@ function FunnelNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -15832,7 +16093,11 @@ function FunnelNode({
     const \u540D\u524D\u306E\u5B9F\u5B57 = \u540D\u524D\u306E\u5B57 * \u7E26\u500D;
     const \u88DC\u8DB3\u306E\u67A0\u5B57 = \u88DC\u8DB3\u306E\u5B57 * \u7E26\u500D;
     const \u53CE\u307E\u308B\u5E45 = Math.max(0, bottomW - 16);
-    const \u88DC\u8DB3\u306E\u5B9F\u5B57 = \u88DC\u8DB3\u306E\u67A0\u5B57 * \u53CE\u3081\u308B\u500D\u7387(\u88DC\u8DB3, { fontSize: \u88DC\u8DB3\u306E\u67A0\u5B57, fontWeight: 500 }, \u53CE\u307E\u308B\u5E45);
+    const \u88DC\u8DB3\u306E\u5B9F\u5B57 = \u88DC\u8DB3\u306E\u67A0\u5B57 * \u53CE\u3081\u308B\u500D\u7387(
+      \u88DC\u8DB3,
+      { fontSize: \u88DC\u8DB3\u306E\u67A0\u5B57, fontWeight: 500, textMetrics },
+      \u53CE\u307E\u308B\u5E45
+    );
     const \u584A\u306E\u4E0A = y + stageH / 2 - (\u540D\u524D\u306E\u5B9F\u5B57 * 1.2 + \u88DC\u8DB3\u306E\u67A0\u5B57 * 1.25) / 2;
     const \u540D\u524D\u306Ey = \u88DC\u8DB3\u3042\u308A ? \u584A\u306E\u4E0A + \u540D\u524D\u306E\u5B9F\u5B57 * 0.95 : y + stageH / 2 + 5;
     const \u88DC\u8DB3\u306Ey = \u584A\u306E\u4E0A + \u540D\u524D\u306E\u5B9F\u5B57 * 1.2 + \u88DC\u8DB3\u306E\u67A0\u5B57 * 0.95;
@@ -15935,7 +16200,8 @@ function \u7573\u3093\u3060\u6587(\u4EF6\u6570) {
 function QuadrantNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -15954,7 +16220,10 @@ function QuadrantNode({
   const SUB_FONT = 10;
   const axisLabelPad = (text) => Math.max(
     PAD_MIN,
-    measureTextWidth(`\u2190 ${text}`, { fontSize: AXIS_LABEL_FONT}) + 12
+    measureTextWidth(`\u2190 ${text}`, {
+      fontSize: AXIS_LABEL_FONT,
+      textMetrics
+    }) + 12
   );
   const padBudget = Math.max(0, node.w * 0.5 - PAD_MIN * 2);
   const wantLeft = axisLabelPad(data.xAxis.left) - PAD_MIN;
@@ -16208,7 +16477,11 @@ function QuadrantNode({
           ITEM_MIN_W,
           Math.max(
             ...\u884C\u30892.map(
-              (r) => measureTextWidth(r.text, { fontSize: r.size, fontWeight: r.weight })
+              (r) => measureTextWidth(r.text, {
+                fontSize: r.size,
+                fontWeight: r.weight,
+                textMetrics
+              })
             )
           ) + ITEM_PAD_X * 2
         )
@@ -16234,7 +16507,7 @@ function QuadrantNode({
           const \u88DC\u8DB3 = (it.subtitle ?? "").trim();
           const \u88DC\u8DB3\u306E\u5B57 = SUB_FONT * \u53CE\u3081\u308B\u500D\u7387(
             \u88DC\u8DB3,
-            { fontSize: SUB_FONT, fontWeight: 500 },
+            { fontSize: SUB_FONT, fontWeight: 500, textMetrics },
             Math.max(0, \u5E45 - ITEM_PAD_X * 2)
           );
           return /* @__PURE__ */ jsxs("g", { children: [
@@ -16638,24 +16911,30 @@ var EYEBROW_GAP2 = 8;
 var EYEBROW_TRACKING = 2;
 var SUB_SIZE = 11;
 var SUB_GAP = 4;
-function labelBlock(node, pos, size, band) {
+function labelBlock(node, pos, size, band, textMetrics = "proportional") {
   const \u4E0A = node.eyebrow ? size + EYEBROW_GAP2 + EYEBROW_SIZE2 * ASCENT2 : size * ASCENT2;
   const \u4E0B = node.subtitle ? size + SUB_GAP + SUB_SIZE * DESCENT2 : size * DESCENT2;
   const \u5E45 = Math.max(
-    textWidth(node.title ?? "", size),
-    node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE2, EYEBROW_TRACKING) : 0,
-    node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0
+    textWidth(node.title ?? "", size, 0, textMetrics),
+    node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE2, EYEBROW_TRACKING, textMetrics) : 0,
+    node.subtitle ? textWidth(node.subtitle, SUB_SIZE, 0, textMetrics) : 0
   );
-  const \u984C\u5E45 = textWidth(node.title ?? "", size);
-  const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", size, 0, band.w, textWidth) : 0;
+  const \u984C\u5E45 = textWidth(node.title ?? "", size, 0, textMetrics);
+  const \u6E2C\u308B = (t, s, ls) => textWidth(t, s, ls, textMetrics);
+  const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", size, 0, band.w, \u6E2C\u308B) : 0;
   const { k, x, y: baseline } = fitLabel(band, { \u4E0A, \u4E0B, \u5E45 }, pos, \u4E0B\u9650);
   return { k, x, baseline, \u4E0A\u7AEF: baseline - \u4E0A * k, \u4E0B\u7AEF: baseline + \u4E0B * k };
 }
-function commonLabel(node, pos, size, band) {
-  const \u584A = labelBlock(node, pos, size, band);
+function commonLabel(node, pos, size, band, textMetrics = "proportional") {
+  const \u584A = labelBlock(node, pos, size, band, textMetrics);
   const k = \u584A.k;
   const x = \u584A.x;
-  const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E2F\u3067\u5207\u308B(t, \u5927\u304D\u3055 * k, band.w, (u, f) => textWidth(u, f, \u5B57\u9593 * k));
+  const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E2F\u3067\u5207\u308B(
+    t,
+    \u5927\u304D\u3055 * k,
+    band.w,
+    (u, f) => textWidth(u, f, \u5B57\u9593 * k, textMetrics)
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     node.eyebrow && /* @__PURE__ */ jsx(
       "text",
@@ -16706,7 +16985,7 @@ var RULE_GAP_RATIO = 0.1;
 var RULE_PAD_MAX = 20;
 var RULE_PAD_RATIO = 0.14;
 var RULE_SHRINK_RATIO = 0.055;
-function ShapeFileNode({ node, active }) {
+function ShapeFileNode({ node, active, textMetrics = "proportional" }) {
   const \u5E2F = bodyBand(node, { \u5F71ry: SHADOW_RY });
   const \u7D19h = \u5E2F.h;
   const \u7D19w = Math.min(\u5E2F.w, \u7D19h * 0.72);
@@ -16726,7 +17005,7 @@ function ShapeFileNode({ node, active }) {
   const foldTriangle = `M ${x + \u7D19w - fold} ${y} L ${x + \u7D19w} ${y + fold} L ${x + \u7D19w - fold} ${y + fold} Z`;
   const \u540D\u524D\u5E2F = { x, y, w: \u7D19w, h: \u7D19h };
   const \u540D\u524D\u4F4D\u7F6E = { x: \u5E2F.cx, y: node.cy + node.h * 0.12 };
-  const \u540D\u524D = labelBlock(node, \u540D\u524D\u4F4D\u7F6E, 16, \u540D\u524D\u5E2F);
+  const \u540D\u524D = labelBlock(node, \u540D\u524D\u4F4D\u7F6E, 16, \u540D\u524D\u5E2F, textMetrics);
   const \u9593\u9694 = Math.min(RULE_GAP_MAX, \u7D19h * RULE_GAP_RATIO);
   const \u7DDA\u4F59\u767D = Math.min(RULE_PAD_MAX, \u7D19w * RULE_PAD_RATIO);
   const textLines = [0, 1, 2].map((i) => ({ i, ly: y + fold + \u9593\u9694 * (i + 1) })).filter(({ ly }) => ly < \u540D\u524D.\u4E0A\u7AEF);
@@ -16758,12 +17037,12 @@ function ShapeFileNode({ node, active }) {
         i
       );
     }),
-    commonLabel(node, \u540D\u524D\u4F4D\u7F6E, 16, \u540D\u524D\u5E2F)
+    commonLabel(node, \u540D\u524D\u4F4D\u7F6E, 16, \u540D\u524D\u5E2F, textMetrics)
   ] });
 }
 var TAB_H_MAX = 22;
 var TAB_H_RATIO = 0.3;
-function ShapeFolderNode({ node, active }) {
+function ShapeFolderNode({ node, active, textMetrics = "proportional" }) {
   const \u5E2F = bodyBand(node, { \u5F71ry: SHADOW_RY });
   const x = \u5E2F.x;
   const y = \u5E2F.y;
@@ -16784,7 +17063,7 @@ function ShapeFolderNode({ node, active }) {
   const \u5883\u754Cy = y + tabH + Math.min(8, (\u5E2F.h - tabH) * 0.2);
   const \u7AEF = Math.min(6, \u5E2F.w * 0.1);
   const \u540D\u524D\u4F4D\u7F6E = { x: \u5E2F.cx, y: node.cy + 18 };
-  const \u540D\u524D = labelBlock(node, \u540D\u524D\u4F4D\u7F6E, 16, \u5E2F);
+  const \u540D\u524D = labelBlock(node, \u540D\u524D\u4F4D\u7F6E, 16, \u5E2F, textMetrics);
   return /* @__PURE__ */ jsxs("g", { children: [
     dropShadow(\u5E2F.cx, \u5E2F.\u5E95, \u5E2F.w * 0.44),
     /* @__PURE__ */ jsx("path", { "data-cdl-role": "node-body", d: bodyPath, ...frame, strokeLinejoin: "round" }),
@@ -16800,13 +17079,13 @@ function ShapeFolderNode({ node, active }) {
         opacity: 0.35
       }
     ),
-    commonLabel(node, \u540D\u524D\u4F4D\u7F6E, 16, \u5E2F)
+    commonLabel(node, \u540D\u524D\u4F4D\u7F6E, 16, \u5E2F, textMetrics)
   ] });
 }
 var CLOUD_VB_W = 640;
 var CLOUD_VB_H = 512;
 var CLOUD_W_RATIO = 0.9;
-function ShapeCloudNode({ node, active }) {
+function ShapeCloudNode({ node, active, textMetrics = "proportional" }) {
   const \u5E2F = bodyBand(node, { \u5F71ry: SHADOW_RY });
   const frame = commonFrame(active);
   const \u7D20\u306E\u500D\u7387 = Math.min(\u5E2F.h / CLOUD_VB_H, \u5E2F.w * CLOUD_W_RATIO / CLOUD_VB_W);
@@ -16829,13 +17108,13 @@ function ShapeCloudNode({ node, active }) {
         strokeLinejoin: "round"
       }
     ) }),
-    commonLabel(node, { x: \u5E2F.cx, y: node.cy + node.h * 0.05 }, 16, \u5E2F)
+    commonLabel(node, { x: \u5E2F.cx, y: node.cy + node.h * 0.05 }, 16, \u5E2F, textMetrics)
   ] });
 }
 var CYLINDER_RY_MAX = 18;
 var CYLINDER_RY_RATIO = 0.1;
 var CYLINDER_DISKS = [0.3, 0.55, 0.8];
-function ShapeCylinderNode({ node, active }) {
+function ShapeCylinderNode({ node, active, textMetrics = "proportional" }) {
   const \u5E2F = bodyBand(node, { \u5F71ry: CYLINDER_SHADOW_RY });
   const x = \u5E2F.x;
   const y = \u5E2F.y;
@@ -16852,7 +17131,7 @@ function ShapeCylinderNode({ node, active }) {
   const \u84CB\u5E95 = y + ry * 2;
   const \u540D\u524D\u4F4D\u7F6E = { x: \u5E2F.cx, y: node.cy + 6 };
   const \u540D\u524D\u5E2F = { x: \u5E2F.x, y: \u84CB\u5E95, w: \u5E2F.w, h: Math.max(0, \u5E2F.\u5E95 - \u84CB\u5E95) };
-  const \u540D\u524D = labelBlock(node, \u540D\u524D\u4F4D\u7F6E, 15, \u540D\u524D\u5E2F);
+  const \u540D\u524D = labelBlock(node, \u540D\u524D\u4F4D\u7F6E, 15, \u540D\u524D\u5E2F, textMetrics);
   return /* @__PURE__ */ jsxs("g", { children: [
     dropShadow(\u5E2F.cx, \u5E2F.\u5E95, rx * 0.85, CYLINDER_SHADOW_RY),
     /* @__PURE__ */ jsx("path", { "data-cdl-role": "node-body", d: bodyPath, ...frame, strokeLinejoin: "round" }),
@@ -16876,11 +17155,11 @@ function ShapeCylinderNode({ node, active }) {
       },
       i
     )),
-    commonLabel(node, \u540D\u524D\u4F4D\u7F6E, 15, \u540D\u524D\u5E2F)
+    commonLabel(node, \u540D\u524D\u4F4D\u7F6E, 15, \u540D\u524D\u5E2F, textMetrics)
   ] });
 }
 var HEX_DOT_R = 2.5;
-function ShapeHexagonNode({ node, active }) {
+function ShapeHexagonNode({ node, active, textMetrics = "proportional" }) {
   const \u5E2F = bodyBand(node, { \u5F71ry: SHADOW_RY, \u5916: Math.max(HEX_DOT_R, FRAME_HALF) });
   const cx = \u5E2F.cx;
   const cy = \u5E2F.cy;
@@ -16903,11 +17182,12 @@ function ShapeHexagonNode({ node, active }) {
       node,
       { x: cx, y: node.cy + 6 },
       16,
-      { x: \u5E2F.x + cut, y: \u5E2F.y, w: Math.max(0, \u5E2F.w - cut * 2), h: \u5E2F.h }
+      { x: \u5E2F.x + cut, y: \u5E2F.y, w: Math.max(0, \u5E2F.w - cut * 2), h: \u5E2F.h },
+      textMetrics
     )
   ] });
 }
-function ShapeDiamondNode({ node, active }) {
+function ShapeDiamondNode({ node, active, textMetrics = "proportional" }) {
   const \u5E2F = bodyBand(node, { \u5F71ry: SHADOW_RY });
   const cx = \u5E2F.cx;
   const cy = \u5E2F.cy;
@@ -16948,13 +17228,14 @@ function ShapeDiamondNode({ node, active }) {
         y: cy - \u5E2F.h * innerScale / 4,
         w: \u5E2F.w * innerScale / 2,
         h: \u5E2F.h * innerScale / 2
-      }
+      },
+      textMetrics
     )
   ] });
 }
 var STACK_OFFSET_MAX = 12;
 var STACK_OFFSET_RATIO = 0.15;
-function ShapeStackNode({ node, active }) {
+function ShapeStackNode({ node, active, textMetrics = "proportional" }) {
   const \u5E2F = bodyBand(node, { \u5F71ry: SHADOW_RY });
   const x = \u5E2F.x;
   const y = \u5E2F.y;
@@ -17008,7 +17289,8 @@ function ShapeStackNode({ node, active }) {
       node,
       { x: \u624B\u524Dcx, y: node.cy + \u305A\u308C + 6 },
       15,
-      { x, y: y + \u305A\u308C * 2, w: cardW, h: cardH }
+      { x, y: y + \u305A\u308C * 2, w: cardW, h: cardH },
+      textMetrics
     )
   ] });
 }
@@ -17020,16 +17302,22 @@ var PERSON_BODY_LEN = 90;
 var PERSON_SHADOW_DY = 20;
 var PERSON_SHADOW_RY = 4;
 var PERSON_SHADOW_RX = 55;
-function planLabel(node, cx, \u5E45\u4E0A\u9650, plan) {
+function planLabel(node, cx, \u5E45\u4E0A\u9650, plan, textMetrics = "proportional") {
   const \u5E45 = Math.max(
-    textWidth(node.title ?? "", plan.\u540D\u524D.size),
-    node.eyebrow && plan.\u80A9\u66F8 ? textWidth(node.eyebrow, plan.\u80A9\u66F8.size, EYEBROW_TRACKING) : 0,
-    node.subtitle && plan.\u8AAC\u660E ? textWidth(node.subtitle, plan.\u8AAC\u660E.size) : 0
+    textWidth(node.title ?? "", plan.\u540D\u524D.size, 0, textMetrics),
+    node.eyebrow && plan.\u80A9\u66F8 ? textWidth(node.eyebrow, plan.\u80A9\u66F8.size, EYEBROW_TRACKING, textMetrics) : 0,
+    node.subtitle && plan.\u8AAC\u660E ? textWidth(node.subtitle, plan.\u8AAC\u660E.size, 0, textMetrics) : 0
   );
-  const \u984C\u5E45 = textWidth(node.title ?? "", plan.\u540D\u524D.size);
-  const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", plan.\u540D\u524D.size, 0, \u5E45\u4E0A\u9650, textWidth) : 0;
+  const \u984C\u5E45 = textWidth(node.title ?? "", plan.\u540D\u524D.size, 0, textMetrics);
+  const \u6E2C\u308B = (t, s, ls) => textWidth(t, s, ls, textMetrics);
+  const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", plan.\u540D\u524D.size, 0, \u5E45\u4E0A\u9650, \u6E2C\u308B) : 0;
   const k = \u5E45 > 0 && \u5E45\u4E0A\u9650 > 0 ? Math.min(1, Math.max(\u5E45\u4E0A\u9650 / \u5E45, \u4E0B\u9650)) : 1;
-  const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E2F\u3067\u5207\u308B(t, \u5927\u304D\u3055 * k, \u5E45\u4E0A\u9650, (u, f) => textWidth(u, f, \u5B57\u9593 * k));
+  const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E2F\u3067\u5207\u308B(
+    t,
+    \u5927\u304D\u3055 * k,
+    \u5E45\u4E0A\u9650,
+    (u, f) => textWidth(u, f, \u5B57\u9593 * k, textMetrics)
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx(
       "text",
@@ -17070,7 +17358,7 @@ function planLabel(node, cx, \u5E45\u4E0A\u9650, plan) {
     )
   ] });
 }
-function ShapePersonNode({ node, active }) {
+function ShapePersonNode({ node, active, textMetrics = "proportional" }) {
   const r = shapeRegion(node);
   const cx = r.cx;
   const strokeColor = active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)";
@@ -17132,7 +17420,7 @@ function ShapePersonNode({ node, active }) {
         )
       ] })
     ),
-    planLabel(node, r.cx, Math.max(0, node.w), r.label)
+    planLabel(node, r.cx, Math.max(0, node.w), r.label, textMetrics)
   ] });
 }
 var commonFrame2 = (active) => ({
@@ -17382,7 +17670,12 @@ function ShapeTerminalNode({ node, active, lang }) {
     )
   ] });
 }
-function ShapeCodeBlockNode({ node, active, lang }) {
+function ShapeCodeBlockNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame2(active);
   const \u7DDA = frame.strokeWidth / 2;
@@ -17393,7 +17686,10 @@ function ShapeCodeBlockNode({ node, active, lang }) {
   const lineFont = "ui-monospace, SFMono-Regular, Menlo, monospace";
   const \u672D = \u66F8\u3044\u305F\u5024\u304B\u63A7\u3048(node.subtitle, \u5B57\u5F15("codeBlock.fileName"));
   const \u672D\u306E\u5B57 = 11;
-  const \u30BF\u30D6\u5E45 = Math.min(Math.max(100, textWidth(\u672D, \u672D\u306E\u5B57, 0) + 24), Math.max(0, w));
+  const \u30BF\u30D6\u5E45 = Math.min(
+    Math.max(100, textWidth(\u672D, \u672D\u306E\u5B57, 0, textMetrics) + 24),
+    Math.max(0, w)
+  );
   const \u30BF\u30D6\u9AD8 = 24;
   const \u89D2 = 10;
   const \u6E9D = 32;
@@ -17433,7 +17729,7 @@ function ShapeCodeBlockNode({ node, active, lang }) {
     { text: \u672D, size: \u672D\u306E\u5B57, \u5E2F: { \u5E45: \u30BF\u30D6\u5E45, \u9AD8\u3055: \u30BF\u30D6\u9AD8 } },
     { text: "1", size: \u884C\u756A\u53F7\u306E\u5B57, \u5E2F: { \u5E45: \u6E9D - \u6301\u3061\u4E0A\u3052, \u9AD8\u3055: \u884C\u9593 } }
   ];
-  const \u500D\u8FD4\u3057 = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+  const \u500D\u8FD4\u3057 = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
   const tabW = \u30BF\u30D6\u5E45 * \u500D;
   const tabH = \u30BF\u30D6\u9AD8 * \u500D;
   const \u4E38 = \u89D2 * \u500D;
@@ -17472,7 +17768,7 @@ function ShapeCodeBlockNode({ node, active, lang }) {
           "data-cdl-counter-scaled": "1",
           x: x + tabW / 2,
           y: y + tabH / 2 + 4 * \u500D,
-          fontSize: \u672D\u306E\u5B57 * \u500D * \u500D\u8FD4\u3057 * \u5E45\u306E\u500D\u7387(\u672D, \u672D\u306E\u5B57 * \u500D * \u500D\u8FD4\u3057, 0, tabW),
+          fontSize: \u672D\u306E\u5B57 * \u500D * \u500D\u8FD4\u3057 * \u5E45\u306E\u500D\u7387(\u672D, \u672D\u306E\u5B57 * \u500D * \u500D\u8FD4\u3057, 0, tabW, textMetrics),
           fontFamily: lineFont,
           textAnchor: "middle",
           fill: "#e6edf3",
@@ -17554,7 +17850,12 @@ function ShapeCodeBlockNode({ node, active, lang }) {
     )
   ] });
 }
-function ShapeKanbanCardNode({ node, active, lang }) {
+function ShapeKanbanCardNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame2(active);
   const \u7DDA = frame.strokeWidth / 2;
@@ -17608,7 +17909,7 @@ function ShapeKanbanCardNode({ node, active, lang }) {
   );
   const \u8AAC\u660E = \u66F8\u3044\u305F\u5024\u304B\u63A7\u3048(node.subtitle, \u5B57\u5F15("kanbanCard.task"));
   const \u72B6\u614B = \u66F8\u3044\u305F\u5024\u304B\u63A7\u3048(node.eyebrow, \u5B57\u5F15("kanbanCard.status"));
-  const \u72B6\u614B\u306E\u500D\u7387 = \u5E45\u306E\u500D\u7387(\u72B6\u614B, PILL\u5B57, PILL\u5B57\u9593, PILL\u5B57\u5E45);
+  const \u72B6\u614B\u306E\u500D\u7387 = \u5E45\u306E\u500D\u7387(\u72B6\u614B, PILL\u5B57, PILL\u5B57\u9593, PILL\u5B57\u5E45, textMetrics);
   const \u8AAC\u660E\u306E\u5B57 = \u540D\u524D.size * \u8AAC\u660E\u5B57\u6BD4;
   const \u4F7F\u3048\u308B\u5E452 = Math.max(0, w - \u5DE6\u53F3\u4F59\u767D * \u500D * 2);
   return /* @__PURE__ */ jsxs("g", { children: [
@@ -17695,7 +17996,7 @@ function ShapeKanbanCardNode({ node, active, lang }) {
         {
           x: x + w / 2,
           y: \u540D\u524D.y + \u540D\u524D.size * \u8AAC\u660E\u57FA\u6E96\u6BD4,
-          fontSize: \u8AAC\u660E\u306E\u5B57 * \u5E45\u306E\u500D\u7387(\u8AAC\u660E, \u8AAC\u660E\u306E\u5B57, 0, \u4F7F\u3048\u308B\u5E452),
+          fontSize: \u8AAC\u660E\u306E\u5B57 * \u5E45\u306E\u500D\u7387(\u8AAC\u660E, \u8AAC\u660E\u306E\u5B57, 0, \u4F7F\u3048\u308B\u5E452, textMetrics),
           textAnchor: "middle",
           fill: "var(--cdl-text-dim, #5a6270)",
           children: \u8AAC\u660E
@@ -17986,18 +18287,33 @@ var externalLabel = (node, cx, bottomY) => /* @__PURE__ */ jsxs(Fragment, { chil
   )
 ] });
 var LABEL_EYEBROW_SPACING = 2;
-function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
-  const \u5E45 = textWidth(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
-  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, textWidth) : 0;
+function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false, textMetrics = "proportional") {
+  const \u6E2C\u308B = (t, s, ls) => textWidth(t, s, ls, textMetrics);
+  const \u5E45 = \u6E2C\u308B(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
+  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u6E2C\u308B) : 0;
   const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
   const size = \u5927\u304D\u3055 * \u500D\u7387;
   const spacing = \u5B57\u9593 * \u500D\u7387;
-  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => textWidth(u, f, spacing)) };
-}
-function bottomLabel(node, cx, plan) {
-  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B2(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
-  const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
-  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
+  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u6E2C\u308B(u, f, spacing)) };
+}
+function bottomLabel(node, cx, plan, textMetrics = "proportional") {
+  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B2(
+    node.eyebrow ?? "",
+    plan.\u80A9\u66F8?.size ?? 0,
+    LABEL_EYEBROW_SPACING,
+    node.w,
+    false,
+    textMetrics
+  );
+  const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true, textMetrics);
+  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(
+    node.subtitle ?? "",
+    plan.\u8AAC\u660E?.size ?? 0,
+    0,
+    node.w,
+    false,
+    textMetrics
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
     /* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: \u540D.text }),
@@ -18011,7 +18327,7 @@ var RACK_SLOT_N = 4;
 var RACK_BOTTOM = 8;
 var RACK_H = RACK_SLOT_TOP + RACK_SLOT_N * RACK_SLOT_H + (RACK_SLOT_N - 1) * RACK_SLOT_GAP + RACK_BOTTOM;
 var RACK_W_MIN = 120;
-function ShapeServerRackNode({ node, active }) {
+function ShapeServerRackNode({ node, active, textMetrics = "proportional" }) {
   const r = shapeRegion(node);
   const frame = commonFrame3(active);
   const \u7DDA = frame.strokeWidth / 2;
@@ -18093,7 +18409,7 @@ function ShapeServerRackNode({ node, active }) {
         ] }, i);
       })
     ] })),
-    bottomLabel(node, r.cx, r.label)
+    bottomLabel(node, r.cx, r.label, textMetrics)
   ] });
 }
 var HUB_R = 30;
@@ -18101,7 +18417,7 @@ var ARM_LEN = 68;
 var END_R = 7;
 var WIFI_ARC_R = [10, 16, 22];
 var WIFI_BASE_Y = 5;
-function ShapeNetworkNodeNode({ node, active }) {
+function ShapeNetworkNodeNode({ node, active, textMetrics = "proportional" }) {
   const r = shapeRegion(node);
   const cx = r.cx;
   const cy = r.cy;
@@ -18177,12 +18493,12 @@ function ShapeNetworkNodeNode({ node, active }) {
       )),
       /* @__PURE__ */ jsx("circle", { cx, cy: cy + WIFI_BASE_Y + 3, r: 2.5, fill: "var(--cdl-tone-accent, #2d6a8f)", stroke: "none" })
     ] })),
-    bottomLabel(node, r.cx, r.label)
+    bottomLabel(node, r.cx, r.label, textMetrics)
   ] });
 }
 var PHONE_H = 240;
 var PHONE_W = 110;
-function ShapeMobileDeviceNode({ node, active }) {
+function ShapeMobileDeviceNode({ node, active, textMetrics = "proportional" }) {
   const r = shapeRegion(node);
   const frame = commonFrame3(active);
   const \u7DDA = frame.strokeWidth / 2;
@@ -18249,7 +18565,7 @@ function ShapeMobileDeviceNode({ node, active }) {
         }
       )
     ] })),
-    bottomLabel(node, r.cx, r.label)
+    bottomLabel(node, r.cx, r.label, textMetrics)
   ] });
 }
 function ShapeIotSensorNode({ node, active }) {
@@ -18520,7 +18836,7 @@ var SAT_DISH_R = 12;
 var SAT_DISH_STEM = 12;
 var SAT_MAST_LEN = 22;
 var SAT_MAST_TIP_R = 4;
-function ShapeSatelliteNode({ node, active }) {
+function ShapeSatelliteNode({ node, active, textMetrics = "proportional" }) {
   const r = shapeRegion(node);
   const cx = r.cx;
   const cy = r.cy;
@@ -18709,7 +19025,7 @@ function ShapeSatelliteNode({ node, active }) {
       ),
       /* @__PURE__ */ jsx("circle", { cx, cy: cy - bodyH / 2 - SAT_MAST_LEN, r: 2, fill: "#ff5f56", stroke: "none", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.4;1;0.4", dur: "1.4s", repeatCount: "indefinite" }) })
     ] })),
-    bottomLabel(node, r.cx, r.label)
+    bottomLabel(node, r.cx, r.label, textMetrics)
   ] });
 }
 var FRAME_SW_ACTIVE = 3;
@@ -18795,9 +19111,9 @@ function blockchainNodeExtent(strokeWidth) {
   const \u6A2A = (NODE_PEER_DIST + NODE_PEER_R) * Math.cos(Math.PI / 6) + \u7DDA;
   return { \u4E0A: \u7E26, \u4E0B: \u7E26, \u5DE6: \u6A2A, \u53F3: \u6A2A };
 }
-function bottomLabel2(node, cx, plan) {
+function bottomLabel2(node, cx, plan, textMetrics = "proportional") {
   const \u53CE\u3081\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593, \u984C\u304B = false) => {
-    const \u6E2C\u308B = (u, f, ls) => \u5B57\u306E\u5E45(u, f) + ls * [...u].length;
+    const \u6E2C\u308B = (u, f, ls) => \u5B57\u306E\u5E45(u, f, textMetrics) + ls * [...u].length;
     const \u7D20\u306E\u5E45 = \u6E2C\u308B(t, \u5927\u304D\u3055, \u5B57\u9593);
     const \u53CE\u307E\u308B = \u7D20\u306E\u5E45 > node.w && node.w > 0 ? node.w / \u7D20\u306E\u5E45 : 1;
     const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(t, \u5927\u304D\u3055, \u5B57\u9593, node.w, \u6E2C\u308B) : 0;
@@ -18830,7 +19146,12 @@ function EthereumDiamond({ cx, cy, h, colors }) {
     /* @__PURE__ */ jsx("path", { d: `M ${cx} ${midY} L ${cx + w} ${cy + h * 0.05} L ${cx} ${lowerBotY} Z`, fill: c.dark, stroke: c.stroke, strokeWidth: 0.6, strokeLinejoin: "round" })
   ] });
 }
-function ShapeSmartContractNode({ node, active, lang }) {
+function ShapeSmartContractNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
@@ -18871,7 +19192,7 @@ function ShapeSmartContractNode({ node, active, lang }) {
     }
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx("path", { "data-cdl-role": "node-body", d: path, ...frame, strokeLinejoin: "round" }),
       /* @__PURE__ */ jsx("path", { d: foldPath, fill: "none", stroke: frame.stroke, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
@@ -18893,10 +19214,10 @@ function ShapeSmartContractNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, smartContractExtent(frame.strokeWidth), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-var \u5B57\u306E\u5E45 = (text, size) => \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(text, size);
+var \u5B57\u306E\u5E45 = (text, size, textMetrics = "proportional") => \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(text, size, 0, textMetrics);
 var BLOCK_DEFAULT_FIELDS = [
   { key: "hash", label: "blockchainBlock.hash", value: { text: "0xaf31..." } },
   { key: "prev", label: "blockchainBlock.prev", value: { text: "0x7b3f..." } },
@@ -18904,10 +19225,16 @@ var BLOCK_DEFAULT_FIELDS = [
   { key: "nonce", label: "blockchainBlock.nonce", value: { text: "82,914" } },
   { key: "tx", label: "blockchainBlock.tx", value: { \u8F9E\u66F8: "blockchainBlock.txCount" } }
 ];
-function ShapeBlockchainBlockNode({ node, active, lang }) {
+function ShapeBlockchainBlockNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
+  const \u6E2C\u308B\u5B57 = (text, size) => \u5B57\u306E\u5E45(text, size, textMetrics);
   const bw = BLOCK_W;
   const bh = BLOCK_H;
   const cx = r.cx;
@@ -18928,9 +19255,9 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
   const \u5E2F\u306E\u6B8B\u308A = bw - 14 - 30;
   const \u80A9\u66F8\u306E\u9699\u9593 = 8;
   const \u80A9\u66F8\u306E\u4E0A\u9650 = (\u5E2F\u306E\u6B8B\u308A - \u80A9\u66F8\u306E\u9699\u9593) / 2;
-  const \u80A9\u66F8\u306E\u500D\u7387 = \u80A9\u66F8 === "" ? 1 : \u5E45\u306E\u500D\u7387(\u80A9\u66F8, \u80A9\u66F8\u306E\u5B57, 0, \u80A9\u66F8\u306E\u4E0A\u9650);
+  const \u80A9\u66F8\u306E\u500D\u7387 = \u80A9\u66F8 === "" ? 1 : \u5E45\u306E\u500D\u7387(\u80A9\u66F8, \u80A9\u66F8\u306E\u5B57, 0, \u80A9\u66F8\u306E\u4E0A\u9650, textMetrics);
   const \u80A9\u66F8\u306E\u6307\u5B9A = \u80A9\u66F8\u306E\u5B57 * \u80A9\u66F8\u306E\u500D\u7387;
-  const \u80A9\u66F8\u306E\u5E45 = \u80A9\u66F8 === "" ? 0 : \u5B57\u306E\u5E45(\u80A9\u66F8, \u80A9\u66F8\u306E\u6307\u5B9A);
+  const \u80A9\u66F8\u306E\u5E45 = \u80A9\u66F8 === "" ? 0 : \u6E2C\u308B\u5B57(\u80A9\u66F8, \u80A9\u66F8\u306E\u6307\u5B9A);
   const \u898B\u51FA\u3057\u306E\u5E45 = \u5E2F\u306E\u6B8B\u308A - (\u80A9\u66F8 === "" ? 0 : \u80A9\u66F8\u306E\u5E45 + \u80A9\u66F8\u306E\u9699\u9593);
   const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
     { text: \u898B\u51FA\u3057, size: \u898B\u51FA\u3057\u306E\u5B57, \u5E2F: { \u5E45: \u898B\u51FA\u3057\u306E\u5E45, \u9AD8\u3055: \u898B\u51FA\u3057\u306E\u5E2F } },
@@ -18941,12 +19268,12 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
       {
         text: f.value,
         size: \u5024\u306E\u5B57,
-        \u5E2F: { \u5E45: bw - 28 - \u5B57\u306E\u5E45(f.label, \u540D\u306E\u5B57) - 8, \u9AD8\u3055: \u884C\u306E\u9593\u9694 }
+        \u5E2F: { \u5E45: bw - 28 - \u6E2C\u308B\u5B57(f.label, \u540D\u306E\u5B57) - 8, \u9AD8\u3055: \u884C\u306E\u9593\u9694 }
       }
     ])
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     const \u984C\u306E\u5927\u304D\u3055 = \u898B\u51FA\u3057\u306E\u5B57 * \u500D;
     const \u80A9\u66F8\u306E\u5927\u304D\u3055 = \u80A9\u66F8\u306E\u6307\u5B9A * \u500D;
     const \u540D\u306E\u5927\u304D\u3055 = \u540D\u306E\u5B57 * \u500D;
@@ -18955,7 +19282,7 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
       /* @__PURE__ */ jsx("rect", { x: x + 6, y: y + 6, width: bw, height: bh, rx: 8, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
       /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 8, ...frame }),
       /* @__PURE__ */ jsx("path", { d: `M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`, fill: "var(--cdl-tone-accent, #2d6a8f)", fillOpacity: 0.9, stroke: "none" }),
-      /* @__PURE__ */ jsx("text", { "data-cdl-role": "blockchain-block-title", "data-cdl-counter-scaled": "1", x: x + 14, y: y + 22, fontSize: \u984C\u306E\u5927\u304D\u3055, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#ffffff", children: \u5E45\u3067\u5207\u308B(\u898B\u51FA\u3057, \u984C\u306E\u5927\u304D\u3055, \u898B\u51FA\u3057\u306E\u5E45, \u5B57\u306E\u5E45) }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-role": "blockchain-block-title", "data-cdl-counter-scaled": "1", x: x + 14, y: y + 22, fontSize: \u984C\u306E\u5927\u304D\u3055, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#ffffff", children: \u5E45\u3067\u5207\u308B(\u898B\u51FA\u3057, \u984C\u306E\u5927\u304D\u3055, \u898B\u51FA\u3057\u306E\u5E45, \u6E2C\u308B\u5B57) }),
       \u80A9\u66F8 !== "" && /* @__PURE__ */ jsx(
         "text",
         {
@@ -18975,7 +19302,12 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
       /* @__PURE__ */ jsx("circle", { cx: x + bw - 16, cy: y + 16, r: 5.5, fill: "#7cd88f", stroke: "#ffffff", strokeWidth: 1.5 }),
       fields.map((f, i) => /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "1", x: x + 14, y: y + 54 + i * \u884C\u306E\u9593\u9694, fontSize: \u540D\u306E\u5927\u304D\u3055, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "var(--cdl-text-dim, #5a6270)", children: f.label }),
-        /* @__PURE__ */ jsx("text", { "data-cdl-role": `blockchain-block-${f.key}`, "data-cdl-counter-scaled": "1", x: x + bw - 14, y: y + 54 + i * \u884C\u306E\u9593\u9694, fontSize: \u5024\u306E\u5927\u304D\u3055, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 600, textAnchor: "end", fill: "var(--cdl-text, #1a1f2a)", children: \u5E45\u3067\u5207\u308B(f.value, \u5024\u306E\u5927\u304D\u3055, bw - 28 - \u5B57\u306E\u5E45(f.label, \u540D\u306E\u5927\u304D\u3055) - 8, \u5B57\u306E\u5E45) }),
+        /* @__PURE__ */ jsx("text", { "data-cdl-role": `blockchain-block-${f.key}`, "data-cdl-counter-scaled": "1", x: x + bw - 14, y: y + 54 + i * \u884C\u306E\u9593\u9694, fontSize: \u5024\u306E\u5927\u304D\u3055, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 600, textAnchor: "end", fill: "var(--cdl-text, #1a1f2a)", children: \u5E45\u3067\u5207\u308B(
+          f.value,
+          \u5024\u306E\u5927\u304D\u3055,
+          bw - 28 - \u6E2C\u308B\u5B57(f.label, \u540D\u306E\u5927\u304D\u3055) - 8,
+          \u6E2C\u308B\u5B57
+        ) }),
         /* @__PURE__ */ jsx("line", { x1: x + 14, y1: y + 60 + i * \u884C\u306E\u9593\u9694, x2: x + bw - 14, y2: y + 60 + i * \u884C\u306E\u9593\u9694, stroke: "var(--cdl-divider, #d4d4d8)", strokeWidth: 0.5, opacity: 0.5 })
       ] }, i)),
       /* @__PURE__ */ jsxs("g", { transform: `translate(${cx - 32}, ${y + bh - 26})`, children: [
@@ -18987,7 +19319,11 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsx("g", { children: fitArt(r, blockchainBlockExtent(frame.strokeWidth), art) });
 }
-function ShapeBlockchainNode({ node, active }) {
+function ShapeBlockchainNode({
+  node,
+  active,
+  textMetrics = "proportional"
+}) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -19003,7 +19339,7 @@ function ShapeBlockchainNode({ node, active }) {
     { text: "0x\u2026", size: CHAIN_HASH_SIZE, \u5E2F: { \u5E45: CHAIN_TEXT_W, \u9AD8\u3055: CHAIN_ROW_GAP } }
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
       const bx = startX + i * (blockW + linkW);
       const isCurrent = i === blockCount - 1;
@@ -19039,10 +19375,14 @@ function ShapeBlockchainNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, chainExtent(), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeBitcoinChainNode({ node, active }) {
+function ShapeBitcoinChainNode({
+  node,
+  active,
+  textMetrics = "proportional"
+}) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -19058,7 +19398,7 @@ function ShapeBitcoinChainNode({ node, active }) {
     { text: "#820", size: BTC_NO_SIZE, \u5E2F: { \u5E45: CHAIN_TEXT_W, \u9AD8\u3055: 20 } }
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
       const bx = startX + i * (blockW + linkW);
       const isCurrent = i === blockCount - 1;
@@ -19089,10 +19429,14 @@ function ShapeBitcoinChainNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, chainExtent(), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeEthereumChainNode({ node, active }) {
+function ShapeEthereumChainNode({
+  node,
+  active,
+  textMetrics = "proportional"
+}) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -19108,7 +19452,7 @@ function ShapeEthereumChainNode({ node, active }) {
     { text: "#214", size: ETH_NO_SIZE, \u5E2F: { \u5E45: CHAIN_TEXT_W, \u9AD8\u3055: 20 } }
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
       const bx = startX + i * (blockW + linkW);
       const isCurrent = i === blockCount - 1;
@@ -19140,10 +19484,14 @@ function ShapeEthereumChainNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, chainExtent(), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeBlockchainNodeNode({ node, active }) {
+function ShapeBlockchainNodeNode({
+  node,
+  active,
+  textMetrics = "proportional"
+}) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -19197,10 +19545,15 @@ function ShapeBlockchainNodeNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, blockchainNodeExtent(frame.strokeWidth), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeRpcNodeNode({ node, active, lang }) {
+function ShapeRpcNodeNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
@@ -19219,10 +19572,10 @@ function ShapeRpcNodeNode({ node, active, lang }) {
     /* @__PURE__ */ jsx("text", { x: cx, y: cy + 26, fontSize: 11, textAnchor: "middle", fill: "#7a8290", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: "JSON-RPC 2.0" }),
     /* @__PURE__ */ jsx("rect", { x: x + 16, y: y + bh - 24, width: bw - 32, height: 8, rx: 4, fill: "#0f1419", stroke: "none" }),
     /* @__PURE__ */ jsx("rect", { x: x + 16, y: y + bh - 24, width: (bw - 32) * 0.92, height: 8, rx: 4, fill: "#27c93f", stroke: "none", children: /* @__PURE__ */ jsx("animate", { attributeName: "width", values: `${(bw - 32) * 0.86};${(bw - 32) * 0.96};${(bw - 32) * 0.86}`, dur: "3s", repeatCount: "indefinite" }) }),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeWalletNode({ node, active }) {
+function ShapeWalletNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -19296,10 +19649,10 @@ function ShapeWalletNode({ node, active }) {
       /* @__PURE__ */ jsx("text", { x: cx, y: foldY + 3, fontSize: 9, fontWeight: 700, fill: "#5a3a10", textAnchor: "middle", opacity: 0.8, children: "\u039E" }),
       /* @__PURE__ */ jsx("path", { d: `M ${x + 2} ${y + 6} L ${x + w - 2} ${y + 6}`, fill: "none", stroke: "#ffffff", strokeWidth: 1, opacity: 0.4 })
     ] }),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeNftNode({ node, active }) {
+function ShapeNftNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -19315,7 +19668,7 @@ function ShapeNftNode({ node, active }) {
     { text: "#1024", size: NFT_ID_SIZE, \u5E2F: { \u5E45: cardW - 16 - 34, \u9AD8\u3055: cardH - artH } }
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx("rect", { x: x + 4, y: y + 4, width: cardW, height: cardH, rx: 14, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
       /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: cardW, height: cardH, rx: 14, ...frame }),
@@ -19353,10 +19706,10 @@ function ShapeNftNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, nftExtent(frame.strokeWidth), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeTokenNode({ node, active }) {
+function ShapeTokenNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -19393,7 +19746,7 @@ function ShapeTokenNode({ node, active }) {
         }
       }
     ),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
 var commonFrame5 = (active) => ({
@@ -19412,7 +19765,8 @@ function \u5B57\u306E\u6BD4(c) {
   if (\u5E83\u5B57.has(c)) return \u5E83\u5B57\u6BD4;
   return (c.codePointAt(0) ?? 0) < 128 ? \u4E26\u5B57\u6BD4 : \u5E83\u5B57\u6BD4;
 }
-function \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
+function \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, textMetrics = "proportional") {
+  if (textMetrics === "monospace") return textWidth(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, textMetrics);
   let \u5E45 = 0;
   let \u5B57\u6570 = 0;
   for (const c of \u6587\u5B57\u5217) {
@@ -19421,18 +19775,33 @@ function \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
   }
   return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
 }
-function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
-  const \u5E45 = \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
-  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u5B57\u5E45) : 0;
+function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false, textMetrics = "proportional") {
+  const \u6E2C\u308B = (t, s, ls) => \u5B57\u5E45(t, s, ls, textMetrics);
+  const \u5E45 = \u6E2C\u308B(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
+  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u6E2C\u308B) : 0;
   const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
   const size = \u5927\u304D\u3055 * \u500D\u7387;
   const spacing = \u5B57\u9593 * \u500D\u7387;
-  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u5B57\u5E45(u, f, spacing)) };
-}
-function bottomLabel3(node, cx, plan) {
-  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B3(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING2, node.w);
-  const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
-  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
+  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u6E2C\u308B(u, f, spacing)) };
+}
+function bottomLabel3(node, cx, plan, textMetrics = "proportional") {
+  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B3(
+    node.eyebrow ?? "",
+    plan.\u80A9\u66F8?.size ?? 0,
+    LABEL_EYEBROW_SPACING2,
+    node.w,
+    false,
+    textMetrics
+  );
+  const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true, textMetrics);
+  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(
+    node.subtitle ?? "",
+    plan.\u8AAC\u660E?.size ?? 0,
+    0,
+    node.w,
+    false,
+    textMetrics
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
     /* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: \u540D.text }),
@@ -19451,7 +19820,7 @@ var BANK_STEP_SW = 1;
 var BANK_COLUMN_MIN = 24;
 var BANK_BLD_W_MIN = 120;
 var BANK_BLD_W_MAX = 280;
-function ShapeBankNode({ node, active }) {
+function ShapeBankNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
   const \u7DDA = frame.strokeWidth / 2;
@@ -19498,7 +19867,7 @@ function ShapeBankNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
 var TRUST_CROWN_RISE = 4;
@@ -19510,7 +19879,12 @@ var TRUST_BASE_H = 14;
 var TRUST_BODY_OUT = 8;
 var TRUST_BLD_W_MIN = 140;
 var TRUST_BLD_W_MAX = 280;
-function ShapeTrustBankNode({ node, active, lang }) {
+function ShapeTrustBankNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
@@ -19564,10 +19938,15 @@ function ShapeTrustBankNode({ node, active, lang }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapePaymentProviderNode({ node, active, lang }) {
+function ShapePaymentProviderNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
@@ -19592,10 +19971,14 @@ function ShapePaymentProviderNode({ node, active, lang }) {
       /* @__PURE__ */ jsx("text", { x: cx, y: cy + 9, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: accentDarker, fontFamily: "Georgia, serif", children: "$" })
     ] }),
     /* @__PURE__ */ jsx("text", { x: cx, y: y + boxH - 16, fontSize: 11, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#a4b5f2", children: \u5B57\u5F15("paymentProvider.status") }),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeCreditCardNode({ node, active }) {
+function ShapeCreditCardNode({
+  node,
+  active,
+  textMetrics = "proportional"
+}) {
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
   const cardW = Math.min(r.availW - 30, 260);
@@ -19617,7 +20000,7 @@ function ShapeCreditCardNode({ node, active }) {
     [0, 1, 2, 3].map((block) => /* @__PURE__ */ jsx("g", { children: [0, 1, 2, 3].map((dot) => /* @__PURE__ */ jsx("circle", { cx: x + 32 + block * (cardW - 64) / 4 + dot * 8, cy: y + cardH - 40, r: 2.8, fill: "#ffffff", stroke: "none" }, dot)) }, block)),
     /* @__PURE__ */ jsx("circle", { cx: x + cardW - 48, cy: y + cardH - 24, r: 15, fill: "#c9302c", opacity: 0.9, stroke: "none" }),
     /* @__PURE__ */ jsx("circle", { cx: x + cardW - 30, cy: y + cardH - 24, r: 15, fill: "#e5c07b", opacity: 0.9, stroke: "none" }),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
 var BROKERAGE_TICK_H = 18;
@@ -19642,7 +20025,12 @@ var BROKERAGE_SHADE_OUT = 2;
 var BROKERAGE_W_MIN = BROKERAGE_COLS * BROKERAGE_CELL_W + (BROKERAGE_COLS - 1) * BROKERAGE_GAP_X + 6;
 var BROKERAGE_W_MAX = 140;
 var BROKERAGE_H_MIN = BROKERAGE_TICK_H + BROKERAGE_LOGO_H + BROKERAGE_BASE_H;
-function ShapeBrokerageNode({ node, active, lang }) {
+function ShapeBrokerageNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
@@ -19681,7 +20069,7 @@ function ShapeBrokerageNode({ node, active, lang }) {
     }
   ];
   const \u7D75 = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx("ellipse", { cx, cy: y + h + BROKERAGE_SHADOW_DY, rx: w * BROKERAGE_SHADOW_RX_RATIO, ry: BROKERAGE_SHADOW_RY, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
       /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: w, height: h, fill: "#255a7a", stroke: accentDarker, strokeWidth: frame.strokeWidth }),
@@ -19709,12 +20097,17 @@ function ShapeBrokerageNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
 var EXCHANGE_SUB_SIZE = 11;
 var EXCHANGE_HEX_R = 52;
-function ShapeExchangeNode({ node, active, lang }) {
+function ShapeExchangeNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
@@ -19759,7 +20152,7 @@ function ShapeExchangeNode({ node, active, lang }) {
     }
   ];
   const \u7D75 = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsxs("g", { children: [
       nodes.map((n, i) => /* @__PURE__ */ jsx("line", { x1: cx, y1: cy, x2: n.cx, y2: n.cy, stroke: accentDarker, strokeWidth: 1.5, strokeDasharray: "3 2" }, `l${i}`)),
       nodes.map((n, i) => {
@@ -19778,7 +20171,7 @@ function ShapeExchangeNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
 var ATM_SIGN_H = 26;
@@ -19795,7 +20188,12 @@ var ATM_PANEL_H = 146;
 var ATM_W_MIN = 100;
 var ATM_W_MAX = ATM_PANEL_W;
 var ATM_H_MIN = ATM_SIGN_H + ATM_SIGN_GAP + 30 + ATM_FLOOR_RESERVE;
-function ShapeAtmNode({ node, active, lang }) {
+function ShapeAtmNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
@@ -19879,7 +20277,7 @@ function ShapeAtmNode({ node, active, lang }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
 var commonFrame6 = (active) => ({
@@ -19898,7 +20296,8 @@ function \u5B57\u306E\u6BD42(c) {
   if (\u5E83\u5B572.has(c)) return \u5E83\u5B57\u6BD42;
   return (c.codePointAt(0) ?? 0) < 128 ? \u4E26\u5B57\u6BD42 : \u5E83\u5B57\u6BD42;
 }
-function \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
+function \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, textMetrics = "proportional") {
+  if (textMetrics === "monospace") return textWidth(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, textMetrics);
   let \u5E45 = 0;
   let \u5B57\u6570 = 0;
   for (const c of \u6587\u5B57\u5217) {
@@ -19907,18 +20306,33 @@ function \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
   }
   return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
 }
-function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
-  const \u5E45 = \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
-  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u5B57\u5E452) : 0;
+function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false, textMetrics = "proportional") {
+  const \u6E2C\u308B = (t, s, ls) => \u5B57\u5E452(t, s, ls, textMetrics);
+  const \u5E45 = \u6E2C\u308B(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
+  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u6E2C\u308B) : 0;
   const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
   const size = \u5927\u304D\u3055 * \u500D\u7387;
   const spacing = \u5B57\u9593 * \u500D\u7387;
-  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u5B57\u5E452(u, f, spacing)) };
-}
-function bottomLabel4(node, cx, plan) {
-  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B4(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING3, node.w);
-  const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
-  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B4(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
+  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u6E2C\u308B(u, f, spacing)) };
+}
+function bottomLabel4(node, cx, plan, textMetrics = "proportional") {
+  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B4(
+    node.eyebrow ?? "",
+    plan.\u80A9\u66F8?.size ?? 0,
+    LABEL_EYEBROW_SPACING3,
+    node.w,
+    false,
+    textMetrics
+  );
+  const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true, textMetrics);
+  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B4(
+    node.subtitle ?? "",
+    plan.\u8AAC\u660E?.size ?? 0,
+    0,
+    node.w,
+    false,
+    textMetrics
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
     /* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: \u540D.text }),
@@ -19930,7 +20344,7 @@ var WEBSITE_BAR_H = 32;
 var WEBSITE_H_MIN = WEBSITE_BAR_H + 98;
 var WEBSITE_W_MIN = 160;
 var WEBSITE_W_MAX = 280;
-function ShapeWebsiteNode({ node, active }) {
+function ShapeWebsiteNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -19956,10 +20370,10 @@ function ShapeWebsiteNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeStorefrontNode({ node, active, lang }) {
+function ShapeStorefrontNode({ node, active, lang, textMetrics = "proportional" }) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
@@ -20004,7 +20418,7 @@ function ShapeStorefrontNode({ node, active, lang }) {
     /* @__PURE__ */ jsx("text", { x: doorX + doorW / 2, y: doorY + doorH * 0.85 + 11, fontSize: 11, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#5a3a10", children: \u5B57\u5F15("storefront.open") }),
     /* @__PURE__ */ jsx("circle", { cx: doorX + 6, cy: doorY + doorH * 0.55, r: 1.5, fill: "#c15a4a" }),
     /* @__PURE__ */ jsx("rect", { x: x - 6, y: y + bh - 6, width: bw + 12, height: 8, fill: "#5a6270", stroke: "none" }),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
 var WAREHOUSE_ROOF_H = 18;
@@ -20018,7 +20432,7 @@ var WAREHOUSE_SHADOW_RX_RATIO = 0.5;
 var WAREHOUSE_H_MIN = WAREHOUSE_ROOF_H + WAREHOUSE_SIGN_H + 68;
 var WAREHOUSE_W_MIN = 160;
 var WAREHOUSE_W_MAX = 240;
-function ShapeWarehouseNode({ node, active, lang }) {
+function ShapeWarehouseNode({ node, active, lang, textMetrics = "proportional" }) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
@@ -20071,13 +20485,13 @@ function ShapeWarehouseNode({ node, active, lang }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
 var HANDLE_GRIP_X = 118;
 var HANDLE_GRIP_R = 4;
 var CART_SHADOW_RX = 80;
-function ShapeOnlineShopNode({ node, active }) {
+function ShapeOnlineShopNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
   const cy = r.cy + 10;
@@ -20133,10 +20547,10 @@ function ShapeOnlineShopNode({ node, active }) {
     /* @__PURE__ */ jsx("circle", { cx: wheelR, cy: wheelY, r: 16 * s, fill: "#0f1830", stroke: "#000", strokeWidth: 2 * s }),
     /* @__PURE__ */ jsx("circle", { cx: wheelR, cy: wheelY, r: 8 * s, fill: "#5a6270", stroke: "#0f1830", strokeWidth: 1.5 * s }),
     /* @__PURE__ */ jsx("circle", { cx: wheelR, cy: wheelY, r: 2 * s, fill: "#0f1830" }),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeCdnEdgeNode({ node, active }) {
+function ShapeCdnEdgeNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -20199,7 +20613,7 @@ function ShapeCdnEdgeNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, { \u4E0A: \u5E83\u304C\u308A, \u4E0B: \u5E83\u304C\u308A, \u5DE6: \u5E83\u304C\u308A, \u53F3: \u5E83\u304C\u308A }, \u7D75),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
 var API_ROW_TOP = 52;
@@ -20214,7 +20628,7 @@ var API_METHOD_BOX_W = 54;
 var API_METHOD_TEXT_W = 48;
 var API_W_MIN = 200;
 var API_W_MAX = 300;
-function ShapeApiGatewayNode({ node, active, lang }) {
+function ShapeApiGatewayNode({ node, active, lang, textMetrics = "proportional" }) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
@@ -20226,7 +20640,13 @@ function ShapeApiGatewayNode({ node, active, lang }) {
   const x = cx - bw / 2;
   const y = r.cy - \u7E26 / 2 + \u4F59\u767D;
   const \u5E83\u304C\u308A = { \u4E0A: \u7E26 / 2, \u4E0B: \u7E26 / 2, \u5DE6: bw / 2 + \u4F59\u767D, \u53F3: bw / 2 + \u4F59\u767D };
-  const \u7A2E\u985E\u306E\u5B57 = (s) => Math.min(11, 11 * API_METHOD_TEXT_W / Math.max(displayWidth(s) * 11 * MONO_ADVANCE_RATIO, textWidth(s, 11)));
+  const \u7A2E\u985E\u306E\u5B57 = (s) => 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)
@@ -20242,7 +20662,7 @@ function ShapeApiGatewayNode({ node, active, lang }) {
     \u5E2F: { \u5E45: bw - 32 - 64 - 16, \u9AD8\u3055: API_ROW_H }
   }));
   const \u7D75 = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx("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" }),
       /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 10, fill: "#1a2332", stroke: frame.stroke, strokeWidth: frame.strokeWidth }),
@@ -20259,7 +20679,7 @@ function ShapeApiGatewayNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
 function bottomLabel5(node, cx, plan) {
@@ -20559,6 +20979,7 @@ function CdlNodeView({
   chartLineScale,
   \u95A2\u4FC2\u306E\u53D7\u3051\u53E3,
   lang,
+  textMetrics,
   \u5024\u306E\u540D\u524D
 }) {
   const value = node.value ? interpolate(node.value, stateValues, \u5024\u306E\u540D\u524D) : void 0;
@@ -20603,7 +21024,14 @@ function CdlNodeView({
         return /* @__PURE__ */ jsx(CardNode, { node: resolvedNode, active });
       // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
       case "sequence-board":
-        return /* @__PURE__ */ jsx(SequenceBoardNode, { node: resolvedNode, stateValues });
+        return /* @__PURE__ */ jsx(
+          SequenceBoardNode,
+          {
+            node: resolvedNode,
+            stateValues,
+            textMetrics
+          }
+        );
       // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
       // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
@@ -20628,7 +21056,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-gauge":
@@ -20639,7 +21068,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-stacked-bar":
@@ -20650,7 +21080,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-slope":
@@ -20661,7 +21092,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-waffle":
@@ -20672,11 +21104,20 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-stat":
-        return /* @__PURE__ */ jsx(ChartStatNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          ChartStatNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            textMetrics
+          }
+        );
       case "chart-radial":
         return /* @__PURE__ */ jsx(
           ChartRadialNode,
@@ -20685,7 +21126,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-bar":
@@ -20718,7 +21160,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "funnel-stages":
@@ -20729,11 +21172,20 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "quadrant-matrix":
-        return /* @__PURE__ */ jsx(QuadrantNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          QuadrantNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            textMetrics
+          }
+        );
       case "tree-hierarchy":
         return /* @__PURE__ */ jsx(
           TreeNode,
@@ -20742,7 +21194,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "journey-map":
@@ -20757,91 +21210,91 @@ function CdlNodeView({
           }
         );
       case "shape-file":
-        return /* @__PURE__ */ jsx(ShapeFileNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeFileNode, { node: resolvedNode, active, textMetrics });
       case "shape-folder":
-        return /* @__PURE__ */ jsx(ShapeFolderNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeFolderNode, { node: resolvedNode, active, textMetrics });
       case "shape-cloud":
-        return /* @__PURE__ */ jsx(ShapeCloudNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeCloudNode, { node: resolvedNode, active, textMetrics });
       case "shape-cylinder":
-        return /* @__PURE__ */ jsx(ShapeCylinderNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeCylinderNode, { node: resolvedNode, active, textMetrics });
       case "shape-hexagon":
-        return /* @__PURE__ */ jsx(ShapeHexagonNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeHexagonNode, { node: resolvedNode, active, textMetrics });
       case "shape-diamond":
-        return /* @__PURE__ */ jsx(ShapeDiamondNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeDiamondNode, { node: resolvedNode, active, textMetrics });
       case "shape-stack":
-        return /* @__PURE__ */ jsx(ShapeStackNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeStackNode, { node: resolvedNode, active, textMetrics });
       case "shape-person":
-        return /* @__PURE__ */ jsx(ShapePersonNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapePersonNode, { node: resolvedNode, active, textMetrics });
       case "shape-window":
         return /* @__PURE__ */ jsx(ShapeWindowNode, { node: resolvedNode, active });
       case "shape-terminal":
         return /* @__PURE__ */ jsx(ShapeTerminalNode, { node: resolvedNode, active, lang });
       case "shape-code-block":
-        return /* @__PURE__ */ jsx(ShapeCodeBlockNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeCodeBlockNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-kanban-card":
-        return /* @__PURE__ */ jsx(ShapeKanbanCardNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeKanbanCardNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-message-bubble":
         return /* @__PURE__ */ jsx(ShapeMessageBubbleNode, { node: resolvedNode, active });
       case "shape-gear":
         return /* @__PURE__ */ jsx(ShapeGearNode, { node: resolvedNode, active });
       case "shape-server-rack":
-        return /* @__PURE__ */ jsx(ShapeServerRackNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeServerRackNode, { node: resolvedNode, active, textMetrics });
       case "shape-network-node":
-        return /* @__PURE__ */ jsx(ShapeNetworkNodeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeNetworkNodeNode, { node: resolvedNode, active, textMetrics });
       case "shape-mobile-device":
-        return /* @__PURE__ */ jsx(ShapeMobileDeviceNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeMobileDeviceNode, { node: resolvedNode, active, textMetrics });
       case "shape-iot-sensor":
         return /* @__PURE__ */ jsx(ShapeIotSensorNode, { node: resolvedNode, active });
       case "shape-robot-arm":
         return /* @__PURE__ */ jsx(ShapeRobotArmNode, { node: resolvedNode, active });
       case "shape-satellite":
-        return /* @__PURE__ */ jsx(ShapeSatelliteNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeSatelliteNode, { node: resolvedNode, active, textMetrics });
       case "shape-smart-contract":
-        return /* @__PURE__ */ jsx(ShapeSmartContractNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeSmartContractNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-blockchain-block":
-        return /* @__PURE__ */ jsx(ShapeBlockchainBlockNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeBlockchainBlockNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-rpc-node":
-        return /* @__PURE__ */ jsx(ShapeRpcNodeNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeRpcNodeNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-wallet":
-        return /* @__PURE__ */ jsx(ShapeWalletNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeWalletNode, { node: resolvedNode, active, textMetrics });
       case "shape-nft":
-        return /* @__PURE__ */ jsx(ShapeNftNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeNftNode, { node: resolvedNode, active, textMetrics });
       case "shape-token":
-        return /* @__PURE__ */ jsx(ShapeTokenNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeTokenNode, { node: resolvedNode, active, textMetrics });
       case "shape-blockchain":
-        return /* @__PURE__ */ jsx(ShapeBlockchainNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeBlockchainNode, { node: resolvedNode, active, textMetrics });
       case "shape-bitcoin-chain":
-        return /* @__PURE__ */ jsx(ShapeBitcoinChainNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeBitcoinChainNode, { node: resolvedNode, active, textMetrics });
       case "shape-ethereum-chain":
-        return /* @__PURE__ */ jsx(ShapeEthereumChainNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeEthereumChainNode, { node: resolvedNode, active, textMetrics });
       case "shape-blockchain-node":
-        return /* @__PURE__ */ jsx(ShapeBlockchainNodeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeBlockchainNodeNode, { node: resolvedNode, active, textMetrics });
       case "shape-bank":
-        return /* @__PURE__ */ jsx(ShapeBankNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeBankNode, { node: resolvedNode, active, textMetrics });
       case "shape-trust-bank":
-        return /* @__PURE__ */ jsx(ShapeTrustBankNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeTrustBankNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-payment-provider":
-        return /* @__PURE__ */ jsx(ShapePaymentProviderNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapePaymentProviderNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-credit-card":
-        return /* @__PURE__ */ jsx(ShapeCreditCardNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeCreditCardNode, { node: resolvedNode, active, textMetrics });
       case "shape-brokerage":
-        return /* @__PURE__ */ jsx(ShapeBrokerageNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeBrokerageNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-exchange":
-        return /* @__PURE__ */ jsx(ShapeExchangeNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeExchangeNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-atm":
-        return /* @__PURE__ */ jsx(ShapeAtmNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeAtmNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-website":
-        return /* @__PURE__ */ jsx(ShapeWebsiteNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeWebsiteNode, { node: resolvedNode, active, textMetrics });
       case "shape-storefront":
-        return /* @__PURE__ */ jsx(ShapeStorefrontNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeStorefrontNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-warehouse":
-        return /* @__PURE__ */ jsx(ShapeWarehouseNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeWarehouseNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-online-shop":
-        return /* @__PURE__ */ jsx(ShapeOnlineShopNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeOnlineShopNode, { node: resolvedNode, active, textMetrics });
       case "shape-cdn-edge":
-        return /* @__PURE__ */ jsx(ShapeCdnEdgeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeCdnEdgeNode, { node: resolvedNode, active, textMetrics });
       case "shape-api-gateway":
-        return /* @__PURE__ */ jsx(ShapeApiGatewayNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeApiGatewayNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-auditor":
         return /* @__PURE__ */ jsx(ShapeAuditorNode, { node: resolvedNode, active });
       case "shape-regulator":
@@ -20861,7 +21314,17 @@ function CdlNodeView({
       case "station":
         return /* @__PURE__ */ jsx(StationNode, { node: resolvedNode, active });
       default:
-        return /* @__PURE__ */ jsx(GenericNode, { node: resolvedNode, active, value: node.value, stateValues, \u5024\u306E\u540D\u524D });
+        return /* @__PURE__ */ jsx(
+          GenericNode,
+          {
+            node: resolvedNode,
+            active,
+            value: node.value,
+            stateValues,
+            \u5024\u306E\u540D\u524D,
+            textMetrics
+          }
+        );
     }
   })();
   const offsetX = node.renderOffsetX !== void 0 ? resolveNumericAttr(node.renderOffsetX, stateValues, 0) : 0;
@@ -20922,7 +21385,7 @@ function CdlNodeView({
           }
         ),
         inner,
-        \u7BB1\u306E\u4E0A\u306E\u8A9E(resolvedNode)
+        \u7BB1\u306E\u4E0A\u306E\u8A9E(resolvedNode, textMetrics ?? "proportional")
       ]
     }
   );
@@ -20931,17 +21394,17 @@ var FIGURE_TITLE_GAP = 10;
 var FIGURE_TITLE_SIZE = 15;
 var FIGURE_EYEBROW_SIZE = 11;
 var FIGURE_EYEBROW_LIFT = 1.1;
-function \u5E45\u306B\u53CE\u3081\u305F\u5927\u304D\u3055(\u8A9E, \u7D20\u306E\u5927\u304D\u3055, \u5E45) {
-  const \u5B9F\u5E45 = textWidth(\u8A9E, \u7D20\u306E\u5927\u304D\u3055, 0);
+function \u5E45\u306B\u53CE\u3081\u305F\u5927\u304D\u3055(\u8A9E, \u7D20\u306E\u5927\u304D\u3055, \u5E45, textMetrics = "proportional") {
+  const \u5B9F\u5E45 = textWidth(\u8A9E, \u7D20\u306E\u5927\u304D\u3055, 0, textMetrics);
   return \u5B9F\u5E45 > \u5E45 ? \u7D20\u306E\u5927\u304D\u3055 * \u5E45 / \u5B9F\u5E45 : \u7D20\u306E\u5927\u304D\u3055;
 }
-function \u7BB1\u306E\u4E0A\u306E\u8A9E(node) {
+function \u7BB1\u306E\u4E0A\u306E\u8A9E(node, textMetrics = "proportional") {
   if (!drawsFigureTitle(node.kind)) return null;
   const \u540D\u524D = (node.title ?? "").trim();
   const \u5C0F\u898B\u51FA\u3057 = (node.eyebrow ?? "").trim();
   if (\u540D\u524D === "" && \u5C0F\u898B\u51FA\u3057 === "") return null;
   const \u984C\u306Ey = node.cy - node.h / 2 - FIGURE_TITLE_GAP;
-  const \u984C\u306E\u5927\u304D\u3055 = \u5E45\u306B\u53CE\u3081\u305F\u5927\u304D\u3055(\u540D\u524D, FIGURE_TITLE_SIZE, node.w);
+  const \u984C\u306E\u5927\u304D\u3055 = \u5E45\u306B\u53CE\u3081\u305F\u5927\u304D\u3055(\u540D\u524D, FIGURE_TITLE_SIZE, node.w, textMetrics);
   const \u5C0F\u898B\u51FA\u3057\u306Ey = \u540D\u524D === "" ? \u984C\u306Ey : \u984C\u306Ey - \u984C\u306E\u5927\u304D\u3055 * FIGURE_EYEBROW_LIFT;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     \u5C0F\u898B\u51FA\u3057 !== "" && /* @__PURE__ */ jsx(
@@ -20951,7 +21414,7 @@ function \u7BB1\u306E\u4E0A\u306E\u8A9E(node) {
         x: node.cx,
         y: \u5C0F\u898B\u51FA\u3057\u306Ey,
         textAnchor: "middle",
-        fontSize: \u5E45\u306B\u53CE\u3081\u305F\u5927\u304D\u3055(\u5C0F\u898B\u51FA\u3057, FIGURE_EYEBROW_SIZE, node.w),
+        fontSize: \u5E45\u306B\u53CE\u3081\u305F\u5927\u304D\u3055(\u5C0F\u898B\u51FA\u3057, FIGURE_EYEBROW_SIZE, node.w, textMetrics),
         fontWeight: 600,
         letterSpacing: 0.6,
         fill: "var(--cdl-text-dim, #5a6270)",
@@ -21276,6 +21739,7 @@ function CdlStage({
                 node,
                 active: activeSet.has(node.id),
                 lang: laid.lang,
+                textMetrics: laid.textMetrics,
                 \u95A2\u4FC2\u306E\u53D7\u3051\u53E3: \u7BB1\u306E\u53D7\u3051\u53E3,
                 drawing: \u63CF\u304F,
                 progress: \u63CF\u304F ? \u63CF\u304F\u9032\u307F : progress,
@@ -21292,7 +21756,8 @@ function CdlStage({
             CdlEdgeLabelView,
             {
               edge,
-              active: activeSet.has(edge.id)
+              active: activeSet.has(edge.id),
+              textMetrics: laid.textMetrics
             },
             `label-${edge.id}`
           )),
@@ -21302,7 +21767,8 @@ function CdlStage({
               {
                 edge,
                 active: activeSet.has(edge.id),
-                \u7AEF
+                \u7AEF,
+                textMetrics: laid.textMetrics
               },
               `${\u7AEF}-label-${edge.id}`
             ))
@@ -22367,7 +22833,15 @@ function useInteractiveIntegration(diagram, options = {}) {
           f.id
         )) }),
         scrolls.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: scrolls.map((s) => /* @__PURE__ */ jsx(ScrollReadout, { id: s.id, name: s.label || s.id, progress: stateOverrides[s.id] }, s.id)) }),
-        readouts.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: readouts.map((r) => /* @__PURE__ */ jsx(ReadoutWidget, { readout: r, stateOverrides: mergedStateValues }, r.id)) })
+        readouts.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: readouts.map((r) => /* @__PURE__ */ jsx(
+          ReadoutWidget,
+          {
+            readout: r,
+            stateOverrides: mergedStateValues,
+            textMetrics: resolveTextMetrics(diagram.textMetrics)
+          },
+          r.id
+        )) })
       ] }) })
     );
   }, [diagram, signals, stateOverrides, mergedStateValues]);
@@ -22788,7 +23262,8 @@ function StepperWidget({
 }
 function ReadoutWidget({
   readout,
-  stateOverrides
+  stateOverrides,
+  textMetrics = "proportional"
 }) {
   const rawValue = "source" in readout ? stateOverrides[readout.source] : void 0;
   const numericValue = typeof rawValue === "number" ? rawValue : typeof rawValue === "string" ? Number(rawValue) : Number.NaN;
@@ -23036,7 +23511,8 @@ function ReadoutWidget({
           max: readout.max,
           viewW: readout.viewW ?? 280,
           viewH: readout.viewH ?? 60,
-          color: readout.color ?? "#2563eb"
+          color: readout.color ?? "#2563eb",
+          textMetrics
         }
       );
     case "radar": {
@@ -23852,7 +24328,8 @@ function ReadoutWidget({
             { status: "idle", color: "#94a3b8" },
             { status: "error", color: "#ef4444" }
           ],
-          max: readout.max ?? 10
+          max: readout.max ?? 10,
+          textMetrics
         }
       );
     case "calendar-week":
@@ -24996,8 +25473,8 @@ function ProgressGroupReadout({
     }) })
   ] });
 }
-function sequenceLabelAnchor(x, name, fontSize, viewW) {
-  const half = textWidth(name, fontSize) / 2;
+function sequenceLabelAnchor(x, name, fontSize, viewW, textMetrics = "proportional") {
+  const half = textWidth(name, fontSize, 0, textMetrics) / 2;
   if (x - half < 0) return "start";
   if (x + half > viewW) return "end";
   return "middle";
@@ -25010,7 +25487,8 @@ function SequenceTimelineReadout({
   max,
   viewW,
   viewH,
-  color
+  color,
+  textMetrics = "proportional"
 }) {
   const events = [];
   const trimmed = value.trim();
@@ -25053,7 +25531,17 @@ function SequenceTimelineReadout({
             const x = xFor(e.t);
             return /* @__PURE__ */ jsxs("g", { "data-cdl-event-marker": e.name, children: [
               /* @__PURE__ */ jsx("circle", { cx: x, cy: trackY, r: 5, fill: color, stroke: "#fff", strokeWidth: 1.5, children: /* @__PURE__ */ jsx(\u5B57\u306E\u898B\u51FA\u3057, { k: "readout.sequenceTimeline.title", v: { name: e.name, t: e.t } }) }),
-              /* @__PURE__ */ jsx("text", { x, y: trackY - 12, textAnchor: sequenceLabelAnchor(x, e.name, 10, viewW), fontSize: 10, fill: "var(--v4-ink, #1a1f2a)", children: e.name }),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x,
+                  y: trackY - 12,
+                  textAnchor: sequenceLabelAnchor(x, e.name, 10, viewW, textMetrics),
+                  fontSize: 10,
+                  fill: "var(--v4-ink, #1a1f2a)",
+                  children: e.name
+                }
+              ),
               /* @__PURE__ */ jsx("text", { x, y: trackY + 18, textAnchor: "middle", fontSize: 9, fill: "var(--v4-mute, #64748b)", children: e.t })
             ] }, i);
           })
@@ -28130,7 +28618,8 @@ function StatusTimelineReadout({
   label,
   value,
   colorMap,
-  max
+  max,
+  textMetrics = "proportional"
 }) {
   const events = [];
   const trimmed = value.trim();
@@ -28155,6 +28644,7 @@ function StatusTimelineReadout({
   const cellW = shown.length > 0 ? (width - 20) / shown.length : 0;
   const height = stripHeight + 40;
   const \u533A\u9593\u306E\u5B57 = (status) => status === "active" || status === "idle" || status === "error" ? \u5F15\u304F(`readout.statusTimeline.${status}`) : status.toUpperCase();
+  const \u6E2C\u308B = \u7BB1\u306E\u5B57\u3092\u6E2C\u308B(textMetrics);
   return /* @__PURE__ */ jsxs("div", { className: "cdl-ip-item cdl-ip-readout-status-timeline", "data-cdl-readout": id, children: [
     /* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: label }),
     /* @__PURE__ */ jsx(
@@ -28168,7 +28658,7 @@ function StatusTimelineReadout({
           const x = 10 + i * cellW;
           const c = colorLookup.get(ev.status) ?? "#cbd5e1";
           const \u5B572 = \u533A\u9593\u306E\u5B57(ev.status);
-          const \u63CF\u304F\u5B57 = \u5E45\u3067\u5207\u308B(\u5B572, 10, cellW - 8);
+          const \u63CF\u304F\u5B57 = \u5E45\u3067\u5207\u308B(\u5B572, 10, cellW - 8, \u6E2C\u308B);
           return /* @__PURE__ */ jsxs("g", { "data-cdl-status-event": i, "data-cdl-status": ev.status, children: [
             /* @__PURE__ */ jsx("rect", { x, y: 10, width: cellW - 2, height: stripHeight, fill: c, rx: 2 }),
             /* @__PURE__ */ jsxs(