@cardenelabs/cdl 0.122.0 → 0.124.0

package/dist/react.cjs

@@ -717,6 +717,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;
@@ -878,10 +883,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;
@@ -889,7 +894,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;
@@ -905,7 +910,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) {
@@ -1273,15 +1283,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;
@@ -1505,7 +1522,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;
@@ -1514,7 +1531,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
     });
   }
@@ -1532,7 +1549,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,
@@ -2176,7 +2193,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,
@@ -2187,7 +2204,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,
@@ -2788,11 +2805,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();
@@ -2834,7 +2855,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)
@@ -2852,7 +2873,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 });
     }
@@ -2985,7 +3006,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;
@@ -3053,7 +3074,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 {
@@ -3085,7 +3106,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;
@@ -3196,7 +3217,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 {
@@ -3365,7 +3386,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) {
@@ -3402,8 +3430,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;
@@ -3429,12 +3457,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);
 }
@@ -3499,7 +3527,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";
@@ -3516,7 +3547,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 };
@@ -3526,7 +3557,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;
@@ -3534,7 +3565,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) => {
@@ -3547,9 +3578,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) {
@@ -3764,13 +3795,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) {
@@ -3779,7 +3810,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);
     }
@@ -4974,9 +5005,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 [
@@ -4989,12 +5025,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;
@@ -5048,10 +5086,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__ */ jsxRuntime.jsx(
         "g",
         {
@@ -5133,7 +5171,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) {
@@ -5181,7 +5219,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 = [];
@@ -5285,7 +5323,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(
@@ -5293,7 +5331,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) {
@@ -5307,12 +5346,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__ */ jsxRuntime.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;
@@ -5359,8 +5400,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__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
         \u67A0\u306A\u3057 ? null : /* @__PURE__ */ jsxRuntime.jsx(
@@ -5412,14 +5458,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;
@@ -5497,7 +5543,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());
@@ -5615,7 +5661,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);
     }
@@ -5635,7 +5681,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);
     }
@@ -5857,10 +5903,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) {
@@ -6494,6 +6546,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;
@@ -6505,7 +6558,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";
@@ -6525,7 +6578,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) {
@@ -6593,7 +6650,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)`,
@@ -6607,7 +6670,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(
@@ -6657,8 +6723,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;
@@ -6800,7 +6873,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",
@@ -6809,7 +6884,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 = [];
@@ -6817,7 +6892,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 });
     }
@@ -7880,7 +7955,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));
@@ -8004,7 +8079,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);
@@ -8013,7 +8088,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;
@@ -8043,7 +8118,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;
@@ -8070,7 +8145,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
@@ -8288,7 +8363,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]));
@@ -8321,7 +8396,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,
@@ -8336,7 +8411,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,
@@ -8384,7 +8459,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();
@@ -8538,7 +8613,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 };
@@ -8653,7 +8728,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;
@@ -8709,13 +8785,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 });
     }
@@ -8745,7 +8821,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,
@@ -8790,7 +8866,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);
@@ -8840,7 +8916,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);
@@ -8952,7 +9028,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;
@@ -8988,7 +9064,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;
@@ -9031,6 +9107,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));
@@ -9108,8 +9233,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";
@@ -9481,7 +9606,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}
@@ -9495,6 +9620,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;
@@ -9508,7 +9643,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))])
   );
@@ -9533,7 +9668,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++) {
@@ -9558,17 +9693,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] })),
@@ -9759,14 +9904,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) ?? [];
@@ -10068,7 +10213,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();
@@ -10122,10 +10267,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;
@@ -10237,13 +10382,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]));
@@ -10275,7 +10420,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,
@@ -10286,7 +10431,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;
@@ -10480,7 +10629,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;
@@ -10496,7 +10645,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);
@@ -10618,7 +10767,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);
@@ -10629,7 +10778,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;
@@ -10678,10 +10828,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) {
@@ -10719,7 +10869,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();
@@ -10763,7 +10913,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,
@@ -10781,7 +10931,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,
@@ -10901,10 +11051,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);
@@ -10913,13 +11069,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;
@@ -10930,10 +11086,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) {
@@ -10945,7 +11104,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(
@@ -10953,21 +11112,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) {
@@ -11007,6 +11176,8 @@ function layout(diag) {
     // 描画側の固定の字の言語 (#847)。 既定 (`en`) と型の外の値は持たせない = 配置の結果の形を
     // 変更前と揃え、記法の書き損じで一部の字だけ日本語になる形を作らない
     ...resolveLang(diag.lang) === "ja" ? { lang: "ja" } : {},
+    // 既定は持ち越さない。既存の LaidDiagram の形を変えず、等幅の図だけ描画へ伝える
+    ...textMetrics === "monospace" ? { textMetrics: "monospace" } : {},
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...diag.type ? { type: diag.type } : {},
     bboxes,
@@ -11915,6 +12086,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__ */ jsxRuntime.jsxs("g", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("path", { id: glowPathId, d: glowPathD, fill: "none", stroke: "none" }),
@@ -12066,11 +12238,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;
@@ -12086,6 +12259,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__ */ jsxRuntime.jsx(
           "rect",
@@ -12139,9 +12314,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__ */ jsxRuntime.jsx(
@@ -12150,6 +12326,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,
@@ -12394,12 +12572,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;
@@ -12412,11 +12596,12 @@ function sequenceBoardMetrics(data) {
 }
 function SequenceBoardNode({
   node,
-  stateValues
+  stateValues,
+  textMetrics = "proportional"
 }) {
   const data = node.sequenceData;
   if (!data) return /* @__PURE__ */ jsxRuntime.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 = (() => {
@@ -13067,7 +13252,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);
@@ -13206,7 +13392,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;
@@ -13690,8 +13876,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({
@@ -13699,7 +13885,8 @@ function ChartPieNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const instanceId = react.useId().replace(/[^A-Za-z0-9_-]/g, "");
   const x0 = node.cx - node.w / 2;
@@ -13730,15 +13917,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)
       )
     )
   );
@@ -13753,8 +13951,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);
@@ -13937,14 +14135,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));
@@ -14030,7 +14238,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;
@@ -14039,9 +14258,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;
@@ -14050,8 +14278,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;
@@ -14182,7 +14410,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;
@@ -14201,7 +14430,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)
@@ -14276,7 +14508,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),
@@ -14369,7 +14601,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__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "rect",
@@ -14390,7 +14622,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -14408,12 +14640,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`;
@@ -14427,7 +14659,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;
@@ -14445,7 +14678,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;
@@ -14592,7 +14828,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;
@@ -14621,7 +14858,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__ */ jsxRuntime.jsxs(
         "g",
         {
@@ -14678,7 +14921,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)",
@@ -14767,9 +15011,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) {
@@ -14804,7 +15048,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;
@@ -14823,7 +15068,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;
@@ -14925,7 +15173,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;
@@ -14935,7 +15184,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;
@@ -15028,7 +15277,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__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stacked-bar-legend", children: [
         /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: y - 5, width: 10, height: 10, rx: 2, fill: \u5370\u306E\u82723(d.tone, idx) }),
@@ -15063,12 +15312,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;
@@ -15084,7 +15333,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;
@@ -15127,16 +15377,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;
@@ -15322,10 +15578,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) {
@@ -15373,6 +15631,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;
@@ -15439,6 +15698,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,
@@ -15785,7 +16045,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;
@@ -15834,7 +16095,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;
@@ -15937,7 +16202,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;
@@ -15956,7 +16222,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;
@@ -16210,7 +16479,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
         )
@@ -16236,7 +16509,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__ */ jsxRuntime.jsxs("g", { children: [
@@ -16640,24 +16913,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
@@ -16708,7 +16987,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);
@@ -16728,7 +17007,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);
@@ -16760,12 +17039,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;
@@ -16786,7 +17065,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__ */ jsxRuntime.jsxs("g", { children: [
     dropShadow(\u5E2F.cx, \u5E2F.\u5E95, \u5E2F.w * 0.44),
     /* @__PURE__ */ jsxRuntime.jsx("path", { "data-cdl-role": "node-body", d: bodyPath, ...frame, strokeLinejoin: "round" }),
@@ -16802,13 +17081,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);
@@ -16831,13 +17110,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;
@@ -16854,7 +17133,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__ */ jsxRuntime.jsxs("g", { children: [
     dropShadow(\u5E2F.cx, \u5E2F.\u5E95, rx * 0.85, CYLINDER_SHADOW_RY),
     /* @__PURE__ */ jsxRuntime.jsx("path", { "data-cdl-role": "node-body", d: bodyPath, ...frame, strokeLinejoin: "round" }),
@@ -16878,11 +17157,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;
@@ -16905,11 +17184,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;
@@ -16950,13 +17230,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;
@@ -17010,7 +17291,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
     )
   ] });
 }
@@ -17022,16 +17304,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
@@ -17072,7 +17360,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)";
@@ -17134,7 +17422,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) => ({
@@ -17384,7 +17672,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;
@@ -17395,7 +17688,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;
@@ -17435,7 +17731,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;
@@ -17474,7 +17770,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",
@@ -17556,7 +17852,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;
@@ -17610,7 +17911,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__ */ jsxRuntime.jsxs("g", { children: [
@@ -17697,7 +17998,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
@@ -17988,18 +18289,33 @@ var externalLabel = (node, cx, bottomY) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRu
   )
 ] });
 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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 }),
@@ -18013,7 +18329,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;
@@ -18095,7 +18411,7 @@ function ShapeServerRackNode({ node, active }) {
         ] }, i);
       })
     ] })),
-    bottomLabel(node, r.cx, r.label)
+    bottomLabel(node, r.cx, r.label, textMetrics)
   ] });
 }
 var HUB_R = 30;
@@ -18103,7 +18419,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;
@@ -18179,12 +18495,12 @@ function ShapeNetworkNodeNode({ node, active }) {
       )),
       /* @__PURE__ */ jsxRuntime.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;
@@ -18251,7 +18567,7 @@ function ShapeMobileDeviceNode({ node, active }) {
         }
       )
     ] })),
-    bottomLabel(node, r.cx, r.label)
+    bottomLabel(node, r.cx, r.label, textMetrics)
   ] });
 }
 function ShapeIotSensorNode({ node, active }) {
@@ -18522,7 +18838,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;
@@ -18711,7 +19027,7 @@ function ShapeSatelliteNode({ node, active }) {
       ),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy: cy - bodyH / 2 - SAT_MAST_LEN, r: 2, fill: "#ff5f56", stroke: "none", children: /* @__PURE__ */ jsxRuntime.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;
@@ -18797,9 +19113,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;
@@ -18832,7 +19148,12 @@ function EthereumDiamond({ cx, cy, h, colors }) {
     /* @__PURE__ */ jsxRuntime.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);
@@ -18873,7 +19194,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__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("path", { "data-cdl-role": "node-body", d: path, ...frame, strokeLinejoin: "round" }),
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: foldPath, fill: "none", stroke: frame.stroke, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
@@ -18895,10 +19216,10 @@ function ShapeSmartContractNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxRuntime.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..." } },
@@ -18906,10 +19227,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;
@@ -18930,9 +19257,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 } },
@@ -18943,12 +19270,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;
@@ -18957,7 +19284,7 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x + 6, y: y + 6, width: bw, height: bh, rx: 8, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 8, ...frame }),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         "text",
         {
@@ -18977,7 +19304,12 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x + bw - 16, cy: y + 16, r: 5.5, fill: "#7cd88f", stroke: "#ffffff", strokeWidth: 1.5 }),
       fields.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { transform: `translate(${cx - 32}, ${y + bh - 26})`, children: [
@@ -18989,7 +19321,11 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxRuntime.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;
@@ -19005,7 +19341,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__ */ jsxRuntime.jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
       const bx = startX + i * (blockW + linkW);
       const isCurrent = i === blockCount - 1;
@@ -19041,10 +19377,14 @@ function ShapeBlockchainNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxRuntime.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;
@@ -19060,7 +19400,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__ */ jsxRuntime.jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
       const bx = startX + i * (blockW + linkW);
       const isCurrent = i === blockCount - 1;
@@ -19091,10 +19431,14 @@ function ShapeBitcoinChainNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxRuntime.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;
@@ -19110,7 +19454,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__ */ jsxRuntime.jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
       const bx = startX + i * (blockW + linkW);
       const isCurrent = i === blockCount - 1;
@@ -19142,10 +19486,14 @@ function ShapeEthereumChainNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxRuntime.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;
@@ -19199,10 +19547,15 @@ function ShapeBlockchainNodeNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxRuntime.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);
@@ -19221,10 +19574,10 @@ function ShapeRpcNodeNode({ node, active, lang }) {
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { x: x + 16, y: y + bh - 24, width: bw - 32, height: 8, rx: 4, fill: "#0f1419", stroke: "none" }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x + 16, y: y + bh - 24, width: (bw - 32) * 0.92, height: 8, rx: 4, fill: "#27c93f", stroke: "none", children: /* @__PURE__ */ jsxRuntime.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;
@@ -19298,10 +19651,10 @@ function ShapeWalletNode({ node, active }) {
       /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: foldY + 3, fontSize: 9, fontWeight: 700, fill: "#5a3a10", textAnchor: "middle", opacity: 0.8, children: "\u039E" }),
       /* @__PURE__ */ jsxRuntime.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;
@@ -19317,7 +19670,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__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x + 4, y: y + 4, width: cardW, height: cardH, rx: 14, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y, width: cardW, height: cardH, rx: 14, ...frame }),
@@ -19355,10 +19708,10 @@ function ShapeNftNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxRuntime.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;
@@ -19395,7 +19748,7 @@ function ShapeTokenNode({ node, active }) {
         }
       }
     ),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
 var commonFrame5 = (active) => ({
@@ -19414,7 +19767,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) {
@@ -19423,18 +19777,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 }),
@@ -19453,7 +19822,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;
@@ -19500,7 +19869,7 @@ function ShapeBankNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxRuntime.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;
@@ -19512,7 +19881,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);
@@ -19566,10 +19940,15 @@ function ShapeTrustBankNode({ node, active, lang }) {
   ] });
   return /* @__PURE__ */ jsxRuntime.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);
@@ -19594,10 +19973,14 @@ function ShapePaymentProviderNode({ node, active, lang }) {
       /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: cy + 9, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: accentDarker, fontFamily: "Georgia, serif", children: "$" })
     ] }),
     /* @__PURE__ */ jsxRuntime.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);
@@ -19619,7 +20002,7 @@ function ShapeCreditCardNode({ node, active }) {
     [0, 1, 2, 3].map((block) => /* @__PURE__ */ jsxRuntime.jsx("g", { children: [0, 1, 2, 3].map((dot) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: x + cardW - 48, cy: y + cardH - 24, r: 15, fill: "#c9302c", opacity: 0.9, stroke: "none" }),
     /* @__PURE__ */ jsxRuntime.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;
@@ -19644,7 +20027,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);
@@ -19683,7 +20071,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__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y, width: w, height: h, fill: "#255a7a", stroke: accentDarker, strokeWidth: frame.strokeWidth }),
@@ -19711,12 +20099,17 @@ function ShapeBrokerageNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxRuntime.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);
@@ -19761,7 +20154,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__ */ jsxRuntime.jsxs("g", { children: [
       nodes.map((n, i) => /* @__PURE__ */ jsxRuntime.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) => {
@@ -19780,7 +20173,7 @@ function ShapeExchangeNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxRuntime.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;
@@ -19797,7 +20190,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);
@@ -19881,7 +20279,7 @@ function ShapeAtmNode({ node, active, lang }) {
   ] });
   return /* @__PURE__ */ jsxRuntime.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) => ({
@@ -19900,7 +20298,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) {
@@ -19909,18 +20308,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 }),
@@ -19932,7 +20346,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;
@@ -19958,10 +20372,10 @@ function ShapeWebsiteNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxRuntime.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);
@@ -20006,7 +20420,7 @@ function ShapeStorefrontNode({ node, active, lang }) {
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: doorX + 6, cy: doorY + doorH * 0.55, r: 1.5, fill: "#c15a4a" }),
     /* @__PURE__ */ jsxRuntime.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;
@@ -20020,7 +20434,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);
@@ -20073,13 +20487,13 @@ function ShapeWarehouseNode({ node, active, lang }) {
   ] });
   return /* @__PURE__ */ jsxRuntime.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;
@@ -20135,10 +20549,10 @@ function ShapeOnlineShopNode({ node, active }) {
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: wheelR, cy: wheelY, r: 16 * s, fill: "#0f1830", stroke: "#000", strokeWidth: 2 * s }),
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: wheelR, cy: wheelY, r: 8 * s, fill: "#5a6270", stroke: "#0f1830", strokeWidth: 1.5 * s }),
     /* @__PURE__ */ jsxRuntime.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;
@@ -20201,7 +20615,7 @@ function ShapeCdnEdgeNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxRuntime.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;
@@ -20216,7 +20630,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);
@@ -20228,7 +20642,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)
@@ -20244,7 +20664,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__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 10, fill: "#1a2332", stroke: frame.stroke, strokeWidth: frame.strokeWidth }),
@@ -20261,7 +20681,7 @@ function ShapeApiGatewayNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxRuntime.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) {
@@ -20561,6 +20981,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;
@@ -20605,7 +21026,14 @@ function CdlNodeView({
         return /* @__PURE__ */ jsxRuntime.jsx(CardNode, { node: resolvedNode, active });
       // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
       case "sequence-board":
-        return /* @__PURE__ */ jsxRuntime.jsx(SequenceBoardNode, { node: resolvedNode, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SequenceBoardNode,
+          {
+            node: resolvedNode,
+            stateValues,
+            textMetrics
+          }
+        );
       // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
       // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
@@ -20630,7 +21058,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-gauge":
@@ -20641,7 +21070,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-stacked-bar":
@@ -20652,7 +21082,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-slope":
@@ -20663,7 +21094,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-waffle":
@@ -20674,11 +21106,20 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-stat":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartStatNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartStatNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            textMetrics
+          }
+        );
       case "chart-radial":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ChartRadialNode,
@@ -20687,7 +21128,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-bar":
@@ -20720,7 +21162,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "funnel-stages":
@@ -20731,11 +21174,20 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "quadrant-matrix":
-        return /* @__PURE__ */ jsxRuntime.jsx(QuadrantNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          QuadrantNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            textMetrics
+          }
+        );
       case "tree-hierarchy":
         return /* @__PURE__ */ jsxRuntime.jsx(
           TreeNode,
@@ -20744,7 +21196,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "journey-map":
@@ -20759,91 +21212,91 @@ function CdlNodeView({
           }
         );
       case "shape-file":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeFileNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeFileNode, { node: resolvedNode, active, textMetrics });
       case "shape-folder":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeFolderNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeFolderNode, { node: resolvedNode, active, textMetrics });
       case "shape-cloud":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCloudNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCloudNode, { node: resolvedNode, active, textMetrics });
       case "shape-cylinder":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCylinderNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCylinderNode, { node: resolvedNode, active, textMetrics });
       case "shape-hexagon":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeHexagonNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeHexagonNode, { node: resolvedNode, active, textMetrics });
       case "shape-diamond":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeDiamondNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeDiamondNode, { node: resolvedNode, active, textMetrics });
       case "shape-stack":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeStackNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeStackNode, { node: resolvedNode, active, textMetrics });
       case "shape-person":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapePersonNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapePersonNode, { node: resolvedNode, active, textMetrics });
       case "shape-window":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeWindowNode, { node: resolvedNode, active });
       case "shape-terminal":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeTerminalNode, { node: resolvedNode, active, lang });
       case "shape-code-block":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCodeBlockNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCodeBlockNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-kanban-card":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeKanbanCardNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeKanbanCardNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-message-bubble":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeMessageBubbleNode, { node: resolvedNode, active });
       case "shape-gear":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeGearNode, { node: resolvedNode, active });
       case "shape-server-rack":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeServerRackNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeServerRackNode, { node: resolvedNode, active, textMetrics });
       case "shape-network-node":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeNetworkNodeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeNetworkNodeNode, { node: resolvedNode, active, textMetrics });
       case "shape-mobile-device":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeMobileDeviceNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeMobileDeviceNode, { node: resolvedNode, active, textMetrics });
       case "shape-iot-sensor":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeIotSensorNode, { node: resolvedNode, active });
       case "shape-robot-arm":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeRobotArmNode, { node: resolvedNode, active });
       case "shape-satellite":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeSatelliteNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeSatelliteNode, { node: resolvedNode, active, textMetrics });
       case "shape-smart-contract":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeSmartContractNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeSmartContractNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-blockchain-block":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBlockchainBlockNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBlockchainBlockNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-rpc-node":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeRpcNodeNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeRpcNodeNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-wallet":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeWalletNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeWalletNode, { node: resolvedNode, active, textMetrics });
       case "shape-nft":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeNftNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeNftNode, { node: resolvedNode, active, textMetrics });
       case "shape-token":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeTokenNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeTokenNode, { node: resolvedNode, active, textMetrics });
       case "shape-blockchain":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBlockchainNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBlockchainNode, { node: resolvedNode, active, textMetrics });
       case "shape-bitcoin-chain":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBitcoinChainNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBitcoinChainNode, { node: resolvedNode, active, textMetrics });
       case "shape-ethereum-chain":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeEthereumChainNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeEthereumChainNode, { node: resolvedNode, active, textMetrics });
       case "shape-blockchain-node":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBlockchainNodeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBlockchainNodeNode, { node: resolvedNode, active, textMetrics });
       case "shape-bank":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBankNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBankNode, { node: resolvedNode, active, textMetrics });
       case "shape-trust-bank":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeTrustBankNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeTrustBankNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-payment-provider":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapePaymentProviderNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapePaymentProviderNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-credit-card":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCreditCardNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCreditCardNode, { node: resolvedNode, active, textMetrics });
       case "shape-brokerage":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBrokerageNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeBrokerageNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-exchange":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeExchangeNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeExchangeNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-atm":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeAtmNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeAtmNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-website":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeWebsiteNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeWebsiteNode, { node: resolvedNode, active, textMetrics });
       case "shape-storefront":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeStorefrontNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeStorefrontNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-warehouse":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeWarehouseNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeWarehouseNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-online-shop":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeOnlineShopNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeOnlineShopNode, { node: resolvedNode, active, textMetrics });
       case "shape-cdn-edge":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCdnEdgeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeCdnEdgeNode, { node: resolvedNode, active, textMetrics });
       case "shape-api-gateway":
-        return /* @__PURE__ */ jsxRuntime.jsx(ShapeApiGatewayNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsxRuntime.jsx(ShapeApiGatewayNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-auditor":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeAuditorNode, { node: resolvedNode, active });
       case "shape-regulator":
@@ -20863,7 +21316,17 @@ function CdlNodeView({
       case "station":
         return /* @__PURE__ */ jsxRuntime.jsx(StationNode, { node: resolvedNode, active });
       default:
-        return /* @__PURE__ */ jsxRuntime.jsx(GenericNode, { node: resolvedNode, active, value: node.value, stateValues, \u5024\u306E\u540D\u524D });
+        return /* @__PURE__ */ jsxRuntime.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;
@@ -20924,7 +21387,7 @@ function CdlNodeView({
           }
         ),
         inner,
-        \u7BB1\u306E\u4E0A\u306E\u8A9E(resolvedNode)
+        \u7BB1\u306E\u4E0A\u306E\u8A9E(resolvedNode, textMetrics ?? "proportional")
       ]
     }
   );
@@ -20933,17 +21396,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     \u5C0F\u898B\u51FA\u3057 !== "" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -20953,7 +21416,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)",
@@ -21278,6 +21741,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,
@@ -21294,7 +21758,8 @@ function CdlStage({
             CdlEdgeLabelView,
             {
               edge,
-              active: activeSet.has(edge.id)
+              active: activeSet.has(edge.id),
+              textMetrics: laid.textMetrics
             },
             `label-${edge.id}`
           )),
@@ -21304,7 +21769,8 @@ function CdlStage({
               {
                 edge,
                 active: activeSet.has(edge.id),
-                \u7AEF
+                \u7AEF,
+                textMetrics: laid.textMetrics
               },
               `${\u7AEF}-label-${edge.id}`
             ))
@@ -22369,7 +22835,15 @@ function useInteractiveIntegration(diagram, options = {}) {
           f.id
         )) }),
         scrolls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdl-ip-group", children: scrolls.map((s) => /* @__PURE__ */ jsxRuntime.jsx(ScrollReadout, { id: s.id, name: s.label || s.id, progress: stateOverrides[s.id] }, s.id)) }),
-        readouts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdl-ip-group", children: readouts.map((r) => /* @__PURE__ */ jsxRuntime.jsx(ReadoutWidget, { readout: r, stateOverrides: mergedStateValues }, r.id)) })
+        readouts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdl-ip-group", children: readouts.map((r) => /* @__PURE__ */ jsxRuntime.jsx(
+          ReadoutWidget,
+          {
+            readout: r,
+            stateOverrides: mergedStateValues,
+            textMetrics: resolveTextMetrics(diagram.textMetrics)
+          },
+          r.id
+        )) })
       ] }) })
     );
   }, [diagram, signals, stateOverrides, mergedStateValues]);
@@ -22790,7 +23264,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;
@@ -23038,7 +23513,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": {
@@ -23854,7 +24330,8 @@ function ReadoutWidget({
             { status: "idle", color: "#94a3b8" },
             { status: "error", color: "#ef4444" }
           ],
-          max: readout.max ?? 10
+          max: readout.max ?? 10,
+          textMetrics
         }
       );
     case "calendar-week":
@@ -24998,8 +25475,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";
@@ -25012,7 +25489,8 @@ function SequenceTimelineReadout({
   max,
   viewW,
   viewH,
-  color
+  color,
+  textMetrics = "proportional"
 }) {
   const events = [];
   const trimmed = value.trim();
@@ -25055,7 +25533,17 @@ function SequenceTimelineReadout({
             const x = xFor(e.t);
             return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-event-marker": e.name, children: [
               /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: trackY, r: 5, fill: color, stroke: "#fff", strokeWidth: 1.5, children: /* @__PURE__ */ jsxRuntime.jsx(\u5B57\u306E\u898B\u51FA\u3057, { k: "readout.sequenceTimeline.title", v: { name: e.name, t: e.t } }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("text", { x, y: trackY - 12, textAnchor: sequenceLabelAnchor(x, e.name, 10, viewW), fontSize: 10, fill: "var(--v4-ink, #1a1f2a)", children: e.name }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("text", { x, y: trackY + 18, textAnchor: "middle", fontSize: 9, fill: "var(--v4-mute, #64748b)", children: e.t })
             ] }, i);
           })
@@ -28132,7 +28620,8 @@ function StatusTimelineReadout({
   label,
   value,
   colorMap,
-  max
+  max,
+  textMetrics = "proportional"
 }) {
   const events = [];
   const trimmed = value.trim();
@@ -28157,6 +28646,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__ */ jsxRuntime.jsxs("div", { className: "cdl-ip-item cdl-ip-readout-status-timeline", "data-cdl-readout": id, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-label", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -28170,7 +28660,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__ */ jsxRuntime.jsxs("g", { "data-cdl-status-event": i, "data-cdl-status": ev.status, children: [
             /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: 10, width: cellW - 2, height: stripHeight, fill: c, rx: 2 }),
             /* @__PURE__ */ jsxRuntime.jsxs(