@cardenelabs/cdl 0.122.0 → 0.124.0

package/dist/index.js

@@ -710,6 +710,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/formula/ast.ts
 var ALLOWED_MATH_FNS = /* @__PURE__ */ new Set([
   "min",
@@ -1648,13 +1653,215 @@ function \u5024\u3092\u540D\u524D\u3067\u8AAD\u3080(\u5165\u529B\u6B04, \u5024)
   return \u5024.split(",").map((v) => \u5165\u529B\u6B04.\u540D\u524D.get(v) ?? v).join(",");
 }
 
+// src/layout/text-width.ts
+var INTER_BOLD_ADVANCE_EM = {
+  // uppercase (実測係数化、 Inter Bold 仕様 × 1.20)
+  A: 0.86,
+  B: 0.86,
+  C: 0.88,
+  D: 0.93,
+  E: 0.82,
+  F: 0.79,
+  G: 0.94,
+  H: 0.92,
+  I: 0.44,
+  J: 0.66,
+  K: 0.86,
+  L: 0.74,
+  M: 1.12,
+  N: 0.94,
+  O: 0.94,
+  P: 0.85,
+  Q: 0.94,
+  R: 0.87,
+  S: 0.79,
+  T: 0.82,
+  U: 0.91,
+  V: 0.85,
+  W: 1.22,
+  X: 0.85,
+  Y: 0.82,
+  Z: 0.82,
+  // lowercase (実測係数化、 Inter Bold 仕様 × 1.22)
+  a: 0.73,
+  b: 0.77,
+  c: 0.68,
+  d: 0.77,
+  e: 0.73,
+  f: 0.51,
+  g: 0.76,
+  h: 0.77,
+  i: 0.39,
+  j: 0.41,
+  k: 0.73,
+  l: 0.39,
+  m: 1.15,
+  n: 0.77,
+  o: 0.76,
+  p: 0.77,
+  q: 0.77,
+  r: 0.54,
+  s: 0.65,
+  t: 0.54,
+  u: 0.77,
+  v: 0.71,
+  w: 1.05,
+  x: 0.71,
+  y: 0.71,
+  z: 0.66,
+  // digits (Inter Bold tabular-nums、 実測係数化 × 1.20)
+  "0": 0.72,
+  "1": 0.72,
+  "2": 0.72,
+  "3": 0.72,
+  "4": 0.72,
+  "5": 0.72,
+  "6": 0.72,
+  "7": 0.72,
+  "8": 0.72,
+  "9": 0.72,
+  // ascii symbols (実測係数化 × 1.15、 punct 系は kerning が広く効くため 1.20)
+  " ": 0.35,
+  "!": 0.44,
+  '"': 0.59,
+  "#": 0.78,
+  "$": 0.72,
+  "%": 1,
+  "&": 0.86,
+  "'": 0.32,
+  "(": 0.46,
+  ")": 0.46,
+  "*": 0.63,
+  "+": 0.78,
+  ",": 0.36,
+  "-": 0.5,
+  ".": 0.36,
+  "/": 0.51,
+  ":": 0.36,
+  ";": 0.36,
+  "<": 0.78,
+  "=": 0.78,
+  ">": 0.78,
+  "?": 0.63,
+  "@": 1.17,
+  "[": 0.48,
+  "\\": 0.51,
+  "]": 0.48,
+  "^": 0.63,
+  "_": 0.63,
+  "`": 0.48,
+  "{": 0.52,
+  "|": 0.37,
+  "}": 0.52,
+  "~": 0.78
+};
+var JETBRAINS_MONO_ADVANCE_EM = 0.63;
+function isCJK(code) {
+  return code >= 12288 && code <= 12543 || // CJK symbols / hiragana / katakana
+  code >= 13312 && code <= 40959 || // CJK ideographs
+  code >= 63744 && code <= 64255 || // CJK compat ideographs
+  code >= 65281 && code <= 65376 || // fullwidth ASCII
+  code >= 65504 && code <= 65510;
+}
+function isHalfwidthKana(code) {
+  return code >= 65377 && code <= 65500;
+}
+var EMOJI_ADVANCE_EM = 1.05;
+var MONO_EMOJI_ADVANCE_EM = 1.16;
+var DRAWN_CJK_RATIO = 1.08;
+var DRAWN_ASCII_RATIO = 1.16;
+function isAscii(code) {
+  return code < 128;
+}
+var WIDE_SYMBOL_ADVANCE_EM = 0.95;
+function isEmoji(code) {
+  return code >= 126976 && code <= 129791 || // 絵文字の主要面
+  code >= 9728 && code <= 10175 || // 記号と絵文字 (♻ ✅ ❤ 等)
+  code >= 127462 && code <= 127487;
+}
+function isEmojiGrapheme(grapheme, firstCode) {
+  return isEmoji(firstCode) || grapheme.includes("\uFE0F");
+}
+function isWideSymbol(code) {
+  return code >= 8592 && code <= 8703 || // 矢印
+  code >= 9472 && code <= 9599 || // 罫線
+  code >= 9632 && code <= 9727 || // 幾何図形
+  code >= 11008 && code <= 11263;
+}
+var CLUSTER_JOINER_RE = /\u200d|\ufe0f|[\u{1f000}-\u{1faff}]|[\u{2600}-\u{27bf}]/u;
+var \u66F8\u8A18\u7D20\u3067\u5206\u3051\u308B;
+function segmentGraphemes(text) {
+  if (typeof Intl === "undefined" || typeof Intl.Segmenter !== "function") {
+    return [...text];
+  }
+  \u66F8\u8A18\u7D20\u3067\u5206\u3051\u308B ??= new Intl.Segmenter(void 0, { granularity: "grapheme" });
+  return [...\u66F8\u8A18\u7D20\u3067\u5206\u3051\u308B.segment(text)].map((s) => s.segment);
+}
+function defaultAdvanceEm(ch, code) {
+  if (isEmoji(code)) return EMOJI_ADVANCE_EM;
+  if (isWideSymbol(code)) return WIDE_SYMBOL_ADVANCE_EM;
+  if (isCJK(code)) return 1.08;
+  if (isHalfwidthKana(code)) return 0.72;
+  if (ch >= "a" && ch <= "z") return 0.73;
+  if (ch >= "A" && ch <= "Z") return 0.86;
+  if (ch >= "0" && ch <= "9") return 0.72;
+  return 0.65;
+}
+function measureAdvanceWidth(text, opts = {}) {
+  const fontSize = opts.fontSize ?? 22;
+  const letterSpacing = opts.letterSpacing ?? 0;
+  const fontFamily = opts.textMetrics === "monospace" ? "mono" : opts.fontFamily ?? "sans";
+  const bound = opts.bound ?? "layout";
+  let advanceEmSum = 0;
+  let charCount = 0;
+  const \u6587\u5B57\u5217 = CLUSTER_JOINER_RE.test(text) ? segmentGraphemes(text) : [...text];
+  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) && 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;
+    }
+    if (fontFamily === "mono") {
+      advanceEmSum += (isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM) / \u5272\u308A\u623B\u3057;
+      continue;
+    }
+    if (isCJK(code)) {
+      advanceEmSum += 1.08 / \u5272\u308A\u623B\u3057;
+      continue;
+    }
+    const table = ch.length === 1 ? INTER_BOLD_ADVANCE_EM[ch] : void 0;
+    advanceEmSum += (table !== void 0 ? table : defaultAdvanceEm(ch, code)) / \u5272\u308A\u623B\u3057;
+  }
+  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) {
+  if (!(\u5E45 > 0) || !(opts.fontSize > 0)) return 1;
+  const \u5B9F\u5E45 = measureTextWidth(text, { ...opts, letterSpacing: 0 });
+  return \u5B9F\u5E45 > \u5E45 ? \u5E45 / \u5B9F\u5E45 : 1;
+}
+
 // src/kinds/text-width.ts
 var WIDE_RATIO = 1.04;
 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) {
@@ -1691,8 +1898,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;
@@ -1718,12 +1925,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);
 }
@@ -1788,7 +1995,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";
@@ -1805,7 +2015,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 };
@@ -1815,7 +2025,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;
@@ -1823,7 +2033,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) => {
@@ -2180,7 +2390,15 @@ function useInteractiveIntegration(diagram2, options = {}) {
           f.id
         )) }),
         scrolls.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: scrolls.map((s) => /* @__PURE__ */ jsx(ScrollReadout, { id: s.id, name: s.label || s.id, progress: stateOverrides[s.id] }, s.id)) }),
-        readouts.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: readouts.map((r) => /* @__PURE__ */ jsx(ReadoutWidget, { readout: r, stateOverrides: mergedStateValues }, r.id)) })
+        readouts.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: readouts.map((r) => /* @__PURE__ */ jsx(
+          ReadoutWidget,
+          {
+            readout: r,
+            stateOverrides: mergedStateValues,
+            textMetrics: resolveTextMetrics(diagram2.textMetrics)
+          },
+          r.id
+        )) })
       ] }) })
     );
   }, [diagram2, signals, stateOverrides, mergedStateValues]);
@@ -2601,7 +2819,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;
@@ -2849,7 +3068,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": {
@@ -3665,7 +3885,8 @@ function ReadoutWidget({
             { status: "idle", color: "#94a3b8" },
             { status: "error", color: "#ef4444" }
           ],
-          max: readout.max ?? 10
+          max: readout.max ?? 10,
+          textMetrics
         }
       );
     case "calendar-week":
@@ -4809,8 +5030,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";
@@ -4823,7 +5044,8 @@ function SequenceTimelineReadout({
   max,
   viewW,
   viewH,
-  color
+  color,
+  textMetrics = "proportional"
 }) {
   const events = [];
   const trimmed = value.trim();
@@ -4866,7 +5088,17 @@ function SequenceTimelineReadout({
             const x = xFor(e.t);
             return /* @__PURE__ */ jsxs("g", { "data-cdl-event-marker": e.name, children: [
               /* @__PURE__ */ jsx("circle", { cx: x, cy: trackY, r: 5, fill: color, stroke: "#fff", strokeWidth: 1.5, children: /* @__PURE__ */ jsx(\u5B57\u306E\u898B\u51FA\u3057, { k: "readout.sequenceTimeline.title", v: { name: e.name, t: e.t } }) }),
-              /* @__PURE__ */ jsx("text", { x, y: trackY - 12, textAnchor: sequenceLabelAnchor(x, e.name, 10, viewW), fontSize: 10, fill: "var(--v4-ink, #1a1f2a)", children: e.name }),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x,
+                  y: trackY - 12,
+                  textAnchor: sequenceLabelAnchor(x, e.name, 10, viewW, textMetrics),
+                  fontSize: 10,
+                  fill: "var(--v4-ink, #1a1f2a)",
+                  children: e.name
+                }
+              ),
               /* @__PURE__ */ jsx("text", { x, y: trackY + 18, textAnchor: "middle", fontSize: 9, fill: "var(--v4-mute, #64748b)", children: e.t })
             ] }, i);
           })
@@ -7943,7 +8175,8 @@ function StatusTimelineReadout({
   label,
   value,
   colorMap,
-  max
+  max,
+  textMetrics = "proportional"
 }) {
   const events = [];
   const trimmed = value.trim();
@@ -7968,6 +8201,7 @@ function StatusTimelineReadout({
   const cellW = shown.length > 0 ? (width - 20) / shown.length : 0;
   const height = stripHeight + 40;
   const \u533A\u9593\u306E\u5B57 = (status) => status === "active" || status === "idle" || status === "error" ? \u5F15\u304F(`readout.statusTimeline.${status}`) : status.toUpperCase();
+  const \u6E2C\u308B = \u7BB1\u306E\u5B57\u3092\u6E2C\u308B(textMetrics);
   return /* @__PURE__ */ jsxs("div", { className: "cdl-ip-item cdl-ip-readout-status-timeline", "data-cdl-readout": id, children: [
     /* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: label }),
     /* @__PURE__ */ jsx(
@@ -7981,7 +8215,7 @@ function StatusTimelineReadout({
           const x = 10 + i * cellW;
           const c = colorLookup.get(ev.status) ?? "#cbd5e1";
           const \u5B572 = \u533A\u9593\u306E\u5B57(ev.status);
-          const \u63CF\u304F\u5B57 = \u5E45\u3067\u5207\u308B(\u5B572, 10, cellW - 8);
+          const \u63CF\u304F\u5B57 = \u5E45\u3067\u5207\u308B(\u5B572, 10, cellW - 8, \u6E2C\u308B);
           return /* @__PURE__ */ jsxs("g", { "data-cdl-status-event": i, "data-cdl-status": ev.status, children: [
             /* @__PURE__ */ jsx("rect", { x, y: 10, width: cellW - 2, height: stripHeight, fill: c, rx: 2 }),
             /* @__PURE__ */ jsxs(
@@ -12092,6 +12326,8 @@ function diagram(id, options) {
         ...options.palette !== void 0 ? { palette: options.palette } : {},
         // 言語も素通しする。 型の外の値を既定に落とすのは `layout` の 1 箇所に置く
         ...options.lang !== void 0 ? { lang: options.lang } : {},
+        // 字幅の測り方も素通しする。型の外の値を既定に落とすのは `layout` の 1 箇所に置く
+        ...options.textMetrics !== void 0 ? { textMetrics: options.textMetrics } : {},
         // 種類の名前も同じ経路で渡し、空文字の扱いを `layout` の 1 箇所に揃える
         ...options.type !== void 0 ? { type: options.type } : {},
         // inputs / formulas / scrollTriggers / eventBindings は空なら省略 (static diagram の JSON 形状維持)
@@ -12124,196 +12360,6 @@ var ARROW_ANGLE_MAX_DEG = 100;
 var FAN_GAP = 120;
 var DETOUR_GAP = 94;
 
-// src/layout/text-width.ts
-var INTER_BOLD_ADVANCE_EM = {
-  // uppercase (実測係数化、 Inter Bold 仕様 × 1.20)
-  A: 0.86,
-  B: 0.86,
-  C: 0.88,
-  D: 0.93,
-  E: 0.82,
-  F: 0.79,
-  G: 0.94,
-  H: 0.92,
-  I: 0.44,
-  J: 0.66,
-  K: 0.86,
-  L: 0.74,
-  M: 1.12,
-  N: 0.94,
-  O: 0.94,
-  P: 0.85,
-  Q: 0.94,
-  R: 0.87,
-  S: 0.79,
-  T: 0.82,
-  U: 0.91,
-  V: 0.85,
-  W: 1.22,
-  X: 0.85,
-  Y: 0.82,
-  Z: 0.82,
-  // lowercase (実測係数化、 Inter Bold 仕様 × 1.22)
-  a: 0.73,
-  b: 0.77,
-  c: 0.68,
-  d: 0.77,
-  e: 0.73,
-  f: 0.51,
-  g: 0.76,
-  h: 0.77,
-  i: 0.39,
-  j: 0.41,
-  k: 0.73,
-  l: 0.39,
-  m: 1.15,
-  n: 0.77,
-  o: 0.76,
-  p: 0.77,
-  q: 0.77,
-  r: 0.54,
-  s: 0.65,
-  t: 0.54,
-  u: 0.77,
-  v: 0.71,
-  w: 1.05,
-  x: 0.71,
-  y: 0.71,
-  z: 0.66,
-  // digits (Inter Bold tabular-nums、 実測係数化 × 1.20)
-  "0": 0.72,
-  "1": 0.72,
-  "2": 0.72,
-  "3": 0.72,
-  "4": 0.72,
-  "5": 0.72,
-  "6": 0.72,
-  "7": 0.72,
-  "8": 0.72,
-  "9": 0.72,
-  // ascii symbols (実測係数化 × 1.15、 punct 系は kerning が広く効くため 1.20)
-  " ": 0.35,
-  "!": 0.44,
-  '"': 0.59,
-  "#": 0.78,
-  "$": 0.72,
-  "%": 1,
-  "&": 0.86,
-  "'": 0.32,
-  "(": 0.46,
-  ")": 0.46,
-  "*": 0.63,
-  "+": 0.78,
-  ",": 0.36,
-  "-": 0.5,
-  ".": 0.36,
-  "/": 0.51,
-  ":": 0.36,
-  ";": 0.36,
-  "<": 0.78,
-  "=": 0.78,
-  ">": 0.78,
-  "?": 0.63,
-  "@": 1.17,
-  "[": 0.48,
-  "\\": 0.51,
-  "]": 0.48,
-  "^": 0.63,
-  "_": 0.63,
-  "`": 0.48,
-  "{": 0.52,
-  "|": 0.37,
-  "}": 0.52,
-  "~": 0.78
-};
-var JETBRAINS_MONO_ADVANCE_EM = 0.63;
-function isCJK(code) {
-  return code >= 12288 && code <= 12543 || // CJK symbols / hiragana / katakana
-  code >= 13312 && code <= 40959 || // CJK ideographs
-  code >= 63744 && code <= 64255 || // CJK compat ideographs
-  code >= 65281 && code <= 65376 || // fullwidth ASCII
-  code >= 65504 && code <= 65510;
-}
-function isHalfwidthKana(code) {
-  return code >= 65377 && code <= 65500;
-}
-var EMOJI_ADVANCE_EM = 1.05;
-var MONO_EMOJI_ADVANCE_EM = 1.16;
-var DRAWN_CJK_RATIO = 1.08;
-var DRAWN_ASCII_RATIO = 1.16;
-function isAscii(code) {
-  return code < 128;
-}
-var WIDE_SYMBOL_ADVANCE_EM = 0.95;
-function isEmoji(code) {
-  return code >= 126976 && code <= 129791 || // 絵文字の主要面
-  code >= 9728 && code <= 10175 || // 記号と絵文字 (♻ ✅ ❤ 等)
-  code >= 127462 && code <= 127487;
-}
-function isEmojiGrapheme(grapheme, firstCode) {
-  return isEmoji(firstCode) || grapheme.includes("\uFE0F");
-}
-function isWideSymbol(code) {
-  return code >= 8592 && code <= 8703 || // 矢印
-  code >= 9472 && code <= 9599 || // 罫線
-  code >= 9632 && code <= 9727 || // 幾何図形
-  code >= 11008 && code <= 11263;
-}
-var CLUSTER_JOINER_RE = /\u200d|\ufe0f|[\u{1f000}-\u{1faff}]|[\u{2600}-\u{27bf}]/u;
-var \u66F8\u8A18\u7D20\u3067\u5206\u3051\u308B;
-function segmentGraphemes(text) {
-  if (typeof Intl === "undefined" || typeof Intl.Segmenter !== "function") {
-    return [...text];
-  }
-  \u66F8\u8A18\u7D20\u3067\u5206\u3051\u308B ??= new Intl.Segmenter(void 0, { granularity: "grapheme" });
-  return [...\u66F8\u8A18\u7D20\u3067\u5206\u3051\u308B.segment(text)].map((s) => s.segment);
-}
-function defaultAdvanceEm(ch, code) {
-  if (isEmoji(code)) return EMOJI_ADVANCE_EM;
-  if (isWideSymbol(code)) return WIDE_SYMBOL_ADVANCE_EM;
-  if (isCJK(code)) return 1.08;
-  if (isHalfwidthKana(code)) return 0.72;
-  if (ch >= "a" && ch <= "z") return 0.73;
-  if (ch >= "A" && ch <= "Z") return 0.86;
-  if (ch >= "0" && ch <= "9") return 0.72;
-  return 0.65;
-}
-function measureTextWidth(text, opts = {}) {
-  const fontSize = opts.fontSize ?? 22;
-  const letterSpacing = opts.letterSpacing ?? 0;
-  const fontFamily = opts.fontFamily ?? "sans";
-  const bound = opts.bound ?? "layout";
-  let advanceEmSum = 0;
-  let charCount = 0;
-  const \u6587\u5B57\u5217 = CLUSTER_JOINER_RE.test(text) ? segmentGraphemes(text) : [...text];
-  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;
-    if (isEmojiGrapheme(ch, code)) {
-      advanceEmSum += fontFamily === "mono" ? MONO_EMOJI_ADVANCE_EM : EMOJI_ADVANCE_EM;
-      continue;
-    }
-    if (fontFamily === "mono") {
-      advanceEmSum += (isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM) / \u5272\u308A\u623B\u3057;
-      continue;
-    }
-    if (isCJK(code)) {
-      advanceEmSum += 1.08 / \u5272\u308A\u623B\u3057;
-      continue;
-    }
-    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 bound === "drawn" ? w : Math.max(w, fontSize * 1.2);
-}
-function \u53CE\u3081\u308B\u500D\u7387(text, opts, \u5E45) {
-  if (!(\u5E45 > 0) || !(opts.fontSize > 0)) return 1;
-  const \u5B9F\u5E45 = measureTextWidth(text, { ...opts, letterSpacing: 0 });
-  return \u5B9F\u5E45 > \u5E45 ? \u5E45 / \u5B9F\u5E45 : 1;
-}
-
 // src/label-text.ts
 var EDGE_LABEL_TEXT = {
   // main 行は family を指定せず、 host 側の指定を継承する。
@@ -12673,15 +12719,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;
@@ -12920,7 +12973,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;
@@ -12929,7 +12982,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
     });
   }
@@ -12947,7 +13000,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,
@@ -13645,10 +13698,10 @@ function forEachCandidatePair(bboxes, margin, visit) {
     }
   }
 }
-function resolveEdgeLabelOverlapsWithChain(edges, fixedObstacles, minClearance = 16, maxIter = 20) {
+function resolveEdgeLabelOverlapsWithChain(edges, fixedObstacles, minClearance = 16, maxIter = 20, textMetrics = "proportional") {
   if (edges.length === 0) return edges;
   const labelBBox = (e, offsetX, offsetY) => {
-    const base = computeLabelBBoxWorld(e);
+    const base = computeLabelBBoxWorld(e, textMetrics);
     return {
       kind: "edge-label",
       id: e.id,
@@ -13749,7 +13802,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,
@@ -13760,7 +13813,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,
@@ -14361,11 +14414,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();
@@ -14407,7 +14464,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)
@@ -14425,7 +14482,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 });
     }
@@ -14558,7 +14615,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;
@@ -14626,7 +14683,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 {
@@ -14658,7 +14715,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;
@@ -14769,7 +14826,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 {
@@ -14938,9 +14995,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) {
@@ -15155,13 +15212,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) {
@@ -15170,7 +15227,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);
     }
@@ -16026,9 +16083,14 @@ function \u6728\u306E\u5F62(treeNodes) {
   return { \u8449\u306E\u6570, \u6BB5\u6570 };
 }
 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 [
@@ -16041,12 +16103,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;
@@ -16100,10 +16164,10 @@ function TreeNode({
       const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0];
       const isRoot = n.depth === 0;
       const \u6750\u6599 = \u6728\u306E\u884C(n);
-      const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, n.w, n.h);
+      const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, n.w, n.h, \u6E2C\u308B);
       const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
       const \u540D\u524D = \u6750\u6599[0];
-      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B\u5E45(n.w));
+      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B\u5E45(n.w), \u6E2C\u308B);
       return /* @__PURE__ */ jsx(
         "g",
         {
@@ -16185,7 +16249,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) {
@@ -16233,7 +16297,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 = [];
@@ -16337,7 +16401,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(
@@ -16345,7 +16409,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) {
@@ -16359,12 +16424,14 @@ function MindMapNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const layout2 = \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues);
+  const layout2 = \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues, textMetrics);
   if (!layout2) return /* @__PURE__ */ jsx("g", { transform: `translate(${x0} ${y0})` });
+  const \u6E2C\u308B = \u7BB1\u306E\u5B57\u3092\u6E2C\u308B(textMetrics);
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u6700\u5927\u6DF1\u3055 = layout2.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
   const \u7BB1\u304C\u51FA\u308B = (\u6DF1\u3055) => !drawing || \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, \u6DF1\u3055, \u6700\u5927\u6DF1\u3055) >= 1;
@@ -16411,8 +16478,13 @@ function MindMapNode({
       const \u6587\u5B57\u306E\u5BC4\u305B = \u67A0\u306A\u3057 ? \u5916\u3078 ? "start" : "end" : "middle";
       const \u63CF\u753B\u57DF\u306E\u7AEF = \u5916\u3078 ? node.w - MIND_PAD : MIND_PAD;
       const \u4F7F\u3048\u308B = \u67A0\u306A\u3057 ? Math.abs(\u63CF\u753B\u57DF\u306E\u7AEF - \u6587\u5B57\u306Ex) : \u4F7F\u3048\u308B\u5E45(n.w);
-      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B);
-      const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, \u67A0\u306A\u3057 ? \u4F7F\u3048\u308B + (n.w - \u4F7F\u3048\u308B\u5E45(n.w)) : n.w, n.h);
+      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B, \u6E2C\u308B);
+      const \u884C = \u7BB1\u306B\u7A4D\u3080(
+        \u6750\u6599,
+        \u67A0\u306A\u3057 ? \u4F7F\u3048\u308B + (n.w - \u4F7F\u3048\u308B\u5E45(n.w)) : n.w,
+        n.h,
+        \u6E2C\u308B
+      );
       const \u6587\u5B57\u306E\u8272 = n.isRoot ? "var(--cdl-text-on-tone, #ffffff)" : "var(--cdl-chip-text, #1a1f2a)";
       return /* @__PURE__ */ jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
         \u67A0\u306A\u3057 ? null : /* @__PURE__ */ jsx(
@@ -16464,14 +16536,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;
@@ -16549,7 +16621,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());
@@ -16667,7 +16739,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);
     }
@@ -16687,7 +16759,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);
     }
@@ -16930,10 +17002,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) {
@@ -17619,6 +17697,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;
@@ -17630,7 +17709,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";
@@ -17650,7 +17729,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) {
@@ -17718,7 +17801,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)`,
@@ -17732,7 +17821,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(
@@ -17782,8 +17874,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;
@@ -17925,7 +18024,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",
@@ -17934,7 +18035,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 = [];
@@ -17942,7 +18043,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 });
     }
@@ -19005,7 +19106,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));
@@ -19383,7 +19484,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);
@@ -19392,7 +19493,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;
@@ -19422,7 +19523,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;
@@ -19449,7 +19550,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
@@ -19667,7 +19768,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]));
@@ -19700,7 +19801,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,
@@ -19715,7 +19816,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,
@@ -19763,7 +19864,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();
@@ -19917,7 +20018,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 };
@@ -20032,7 +20133,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;
@@ -20088,13 +20190,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 });
     }
@@ -20124,7 +20226,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,
@@ -20169,7 +20271,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);
@@ -20219,7 +20321,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);
@@ -20331,7 +20433,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;
@@ -20367,7 +20469,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;
@@ -20410,6 +20512,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));
@@ -20487,8 +20638,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";
@@ -20860,7 +21011,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}
@@ -20874,6 +21025,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;
@@ -20887,7 +21048,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))])
   );
@@ -20912,7 +21073,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++) {
@@ -20937,17 +21098,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] })),
@@ -21138,14 +21309,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) ?? [];
@@ -21447,7 +21618,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();
@@ -21501,10 +21672,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;
@@ -21616,13 +21787,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]));
@@ -21654,7 +21825,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,
@@ -21665,7 +21836,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;
@@ -21859,7 +22034,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;
@@ -21875,7 +22050,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);
@@ -21997,7 +22172,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);
@@ -22008,7 +22183,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;
@@ -22057,10 +22233,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) {
@@ -22098,7 +22274,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();
@@ -22142,7 +22318,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,
@@ -22160,7 +22336,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,
@@ -22280,10 +22456,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);
@@ -22292,13 +22474,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;
@@ -22309,10 +22491,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) {
@@ -22324,7 +22509,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(
@@ -22332,21 +22517,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) {
@@ -22386,6 +22581,8 @@ function layout(diag) {
     // 描画側の固定の字の言語 (#847)。 既定 (`en`) と型の外の値は持たせない = 配置の結果の形を
     // 変更前と揃え、記法の書き損じで一部の字だけ日本語になる形を作らない
     ...resolveLang(diag.lang) === "ja" ? { lang: "ja" } : {},
+    // 既定は持ち越さない。既存の LaidDiagram の形を変えず、等幅の図だけ描画へ伝える
+    ...textMetrics === "monospace" ? { textMetrics: "monospace" } : {},
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...diag.type ? { type: diag.type } : {},
     bboxes,
@@ -24511,6 +24708,7 @@ function CdlEdgeView({
       "data-cdl-edge-label": edge.label,
       "data-cdl-edge-sub": edge.sub ?? "",
       "data-cdl-tone": edge.tone,
+      "data-cdl-edge-role": edge.role,
       children: [
         isDotted ? /* @__PURE__ */ jsxs("g", { children: [
           /* @__PURE__ */ jsx("path", { id: glowPathId, d: glowPathD, fill: "none", stroke: "none" }),
@@ -24662,11 +24860,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;
@@ -24682,6 +24881,8 @@ function CdlEdgeLabelView({
       "data-cdl-edge-label-for": edge.id,
       "data-cdl-edge-label-text": edge.label,
       "data-cdl-edge-sub-text": edge.sub ?? "",
+      "data-cdl-tone": edge.tone,
+      "data-cdl-edge-role": edge.role,
       children: [
         edge.labelPlate !== false && /* @__PURE__ */ jsx(
           "rect",
@@ -24735,9 +24936,10 @@ function CdlEdgeLabelView({
 function CdlEdgeEndLabelView({
   edge,
   active,
-  \u7AEF
+  \u7AEF,
+  textMetrics = "proportional"
 }) {
-  const \u7F6E\u304D\u5834\u6240 = \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF);
+  const \u7F6E\u304D\u5834\u6240 = \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF, textMetrics);
   if (!\u7F6E\u304D\u5834\u6240) return null;
   const color = edgeColor(edge);
   return /* @__PURE__ */ jsx(
@@ -24746,6 +24948,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,
@@ -24993,12 +25197,18 @@ var g4 = (v) => Math.round(v / 4) * 4;
 function sequenceStepId() {
   return "seq_step";
 }
-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;
@@ -25011,11 +25221,12 @@ function sequenceBoardMetrics(data) {
 }
 function SequenceBoardNode({
   node,
-  stateValues
+  stateValues,
+  textMetrics = "proportional"
 }) {
   const data = node.sequenceData;
   if (!data) return /* @__PURE__ */ jsx("g", { "data-cdl-role": "sequence-board" });
-  const m = sequenceBoardMetrics(data);
+  const m = sequenceBoardMetrics(data, textMetrics);
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
   const \u73FE\u5728 = (() => {
@@ -25666,7 +25877,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);
@@ -25805,7 +26017,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;
@@ -26289,8 +26501,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({
@@ -26298,7 +26510,8 @@ function ChartPieNode({
   active,
   stateValues = {},
   drawing = false,
-  progress = 1
+  progress = 1,
+  textMetrics = "proportional"
 }) {
   const instanceId = useId().replace(/[^A-Za-z0-9_-]/g, "");
   const x0 = node.cx - node.w / 2;
@@ -26329,15 +26542,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)
       )
     )
   );
@@ -26352,8 +26576,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);
@@ -26536,14 +26760,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));
@@ -26629,7 +26863,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;
@@ -26638,9 +26883,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;
@@ -26649,8 +26903,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;
@@ -26781,7 +27035,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;
@@ -26800,7 +27055,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)
@@ -26875,7 +27133,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),
@@ -26968,7 +27226,7 @@ function ChartGaugeNode({
       const y = \u5185\u8A33\u306Ey + \u6BB5\u306E\u9AD8\u3055 * \u6BB5;
       const \u53CE\u307E\u308B\u5E45 = \u5185\u8A33\u306E\u5E45 - \u533A\u753B\u306E\u9593;
       const \u6570\u306E\u884C = \u5185\u8A33\u306E\u6570\u5024[idx] ?? "";
-      const \u5207\u3063\u305F\u6570\u306E\u884C = \u5207\u308A\u8A70\u3081\u308B(\u6570\u306E\u884C, \u53CE\u307E\u308B\u5E45, \u6570\u5024\u306E\u7D1A);
+      const \u5207\u3063\u305F\u6570\u306E\u884C = \u5207\u308A\u8A70\u3081\u308B(\u6570\u306E\u884C, \u53CE\u307E\u308B\u5E45, \u6570\u5024\u306E\u7D1A, textMetrics);
       return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
         /* @__PURE__ */ jsx(
           "rect",
@@ -26989,7 +27247,7 @@ function ChartGaugeNode({
             fontSize: \u540D\u524D\u306E\u7D1A,
             fontWeight: 700,
             fill: "var(--cdl-text, #1a1f2a)",
-            children: \u5207\u308A\u8A70\u3081\u308B(d.label ?? "", \u53CE\u307E\u308B\u5E45, \u540D\u524D\u306E\u7D1A)
+            children: \u5207\u308A\u8A70\u3081\u308B(d.label ?? "", \u53CE\u307E\u308B\u5E45, \u540D\u524D\u306E\u7D1A, textMetrics)
           }
         ),
         /* @__PURE__ */ jsx("text", { x, y: y + 46, fontSize: \u6570\u5024\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: \u5207\u3063\u305F\u6570\u306E\u884C === \u6570\u306E\u884C ? /* @__PURE__ */ jsx(
@@ -27007,12 +27265,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`;
@@ -27026,7 +27284,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;
@@ -27044,7 +27303,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;
@@ -27191,7 +27453,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;
@@ -27220,7 +27483,13 @@ function ChartStatNode({
       const frac = total > 0 ? d.value / total : 0;
       const \u8272 = \u5370\u306E\u8272(d.tone, idx);
       const \u6570\u5024 = \u5B9F\u5024\u8868\u8A18(d.value);
-      const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A02.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
+      const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(
+        \u6570\u5024,
+        \u67A02.w - \u533A\u753B.\u4F59\u767D * 2,
+        \u533A\u753B.\u6570\u5024\u306E\u7D1A,
+        \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1,
+        textMetrics
+      );
       return /* @__PURE__ */ jsxs(
         "g",
         {
@@ -27277,7 +27546,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)",
@@ -27366,9 +27636,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) {
@@ -27403,7 +27673,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;
@@ -27422,7 +27693,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;
@@ -27524,7 +27798,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;
@@ -27534,7 +27809,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;
@@ -27627,7 +27902,7 @@ function ChartStackedBarNode({
         })()
       ] }, `bar-${\u6BB5}`);
     }),
-    \u4E00\u89A7\u306E\u4E26\u3073(data, \u5E2F\u306E\u5DE6, node.w - PAD, \u540D\u524D\u306E\u7D1A).map(({ d, idx, x, \u884C }) => {
+    \u4E00\u89A7\u306E\u4E26\u3073(data, \u5E2F\u306E\u5DE6, node.w - PAD, \u540D\u524D\u306E\u7D1A, textMetrics).map(({ d, idx, x, \u884C }) => {
       const y = \u4E0A\u7AEF + \u5E2F\u305F\u3061.length * (\u5E2F\u306E\u9AD8\u3055 + \u5E2F\u306E\u9593) - \u5E2F\u306E\u9593 + 16 + \u4E00\u89A7\u306E\u9AD8\u3055 / 2 + \u884C * \u4E00\u89A7\u306E\u9AD8\u3055;
       return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-stacked-bar-legend", children: [
         /* @__PURE__ */ jsx("rect", { x, y: y - 5, width: 10, height: 10, rx: 2, fill: \u5370\u306E\u82723(d.tone, idx) }),
@@ -27662,12 +27937,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;
@@ -27683,7 +27958,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;
@@ -27726,16 +28002,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;
@@ -27921,10 +28203,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) {
@@ -27972,6 +28256,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;
@@ -28038,6 +28323,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,
@@ -28384,7 +28670,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;
@@ -28433,7 +28720,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;
@@ -28536,7 +28827,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;
@@ -28555,7 +28847,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;
@@ -28809,7 +29104,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
         )
@@ -28835,7 +29134,7 @@ function QuadrantNode({
           const \u88DC\u8DB3 = (it.subtitle ?? "").trim();
           const \u88DC\u8DB3\u306E\u5B57 = SUB_FONT * \u53CE\u3081\u308B\u500D\u7387(
             \u88DC\u8DB3,
-            { fontSize: SUB_FONT, fontWeight: 500 },
+            { fontSize: SUB_FONT, fontWeight: 500, textMetrics },
             Math.max(0, \u5E45 - ITEM_PAD_X * 2)
           );
           return /* @__PURE__ */ jsxs("g", { children: [
@@ -29239,24 +29538,30 @@ var EYEBROW_GAP2 = 8;
 var EYEBROW_TRACKING = 2;
 var SUB_SIZE = 11;
 var SUB_GAP = 4;
-function labelBlock(node, pos, size, band) {
+function labelBlock(node, pos, size, band, textMetrics = "proportional") {
   const \u4E0A = node.eyebrow ? size + EYEBROW_GAP2 + EYEBROW_SIZE2 * ASCENT2 : size * ASCENT2;
   const \u4E0B = node.subtitle ? size + SUB_GAP + SUB_SIZE * DESCENT2 : size * DESCENT2;
   const \u5E45 = Math.max(
-    textWidth(node.title ?? "", size),
-    node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE2, EYEBROW_TRACKING) : 0,
-    node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0
+    textWidth(node.title ?? "", size, 0, textMetrics),
+    node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE2, EYEBROW_TRACKING, textMetrics) : 0,
+    node.subtitle ? textWidth(node.subtitle, SUB_SIZE, 0, textMetrics) : 0
   );
-  const \u984C\u5E45 = textWidth(node.title ?? "", size);
-  const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", size, 0, band.w, textWidth) : 0;
+  const \u984C\u5E45 = textWidth(node.title ?? "", size, 0, textMetrics);
+  const \u6E2C\u308B = (t, s, ls) => textWidth(t, s, ls, textMetrics);
+  const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", size, 0, band.w, \u6E2C\u308B) : 0;
   const { k, x, y: baseline } = fitLabel(band, { \u4E0A, \u4E0B, \u5E45 }, pos, \u4E0B\u9650);
   return { k, x, baseline, \u4E0A\u7AEF: baseline - \u4E0A * k, \u4E0B\u7AEF: baseline + \u4E0B * k };
 }
-function commonLabel(node, pos, size, band) {
-  const \u584A = labelBlock(node, pos, size, band);
+function commonLabel(node, pos, size, band, textMetrics = "proportional") {
+  const \u584A = labelBlock(node, pos, size, band, textMetrics);
   const k = \u584A.k;
   const x = \u584A.x;
-  const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E2F\u3067\u5207\u308B(t, \u5927\u304D\u3055 * k, band.w, (u, f) => textWidth(u, f, \u5B57\u9593 * k));
+  const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E2F\u3067\u5207\u308B(
+    t,
+    \u5927\u304D\u3055 * k,
+    band.w,
+    (u, f) => textWidth(u, f, \u5B57\u9593 * k, textMetrics)
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     node.eyebrow && /* @__PURE__ */ jsx(
       "text",
@@ -29307,7 +29612,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);
@@ -29327,7 +29632,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);
@@ -29359,12 +29664,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;
@@ -29385,7 +29690,7 @@ function ShapeFolderNode({ node, active }) {
   const \u5883\u754Cy = y + tabH + Math.min(8, (\u5E2F.h - tabH) * 0.2);
   const \u7AEF = Math.min(6, \u5E2F.w * 0.1);
   const \u540D\u524D\u4F4D\u7F6E = { x: \u5E2F.cx, y: node.cy + 18 };
-  const \u540D\u524D = labelBlock(node, \u540D\u524D\u4F4D\u7F6E, 16, \u5E2F);
+  const \u540D\u524D = labelBlock(node, \u540D\u524D\u4F4D\u7F6E, 16, \u5E2F, textMetrics);
   return /* @__PURE__ */ jsxs("g", { children: [
     dropShadow(\u5E2F.cx, \u5E2F.\u5E95, \u5E2F.w * 0.44),
     /* @__PURE__ */ jsx("path", { "data-cdl-role": "node-body", d: bodyPath, ...frame, strokeLinejoin: "round" }),
@@ -29401,13 +29706,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);
@@ -29430,13 +29735,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;
@@ -29453,7 +29758,7 @@ function ShapeCylinderNode({ node, active }) {
   const \u84CB\u5E95 = y + ry * 2;
   const \u540D\u524D\u4F4D\u7F6E = { x: \u5E2F.cx, y: node.cy + 6 };
   const \u540D\u524D\u5E2F = { x: \u5E2F.x, y: \u84CB\u5E95, w: \u5E2F.w, h: Math.max(0, \u5E2F.\u5E95 - \u84CB\u5E95) };
-  const \u540D\u524D = labelBlock(node, \u540D\u524D\u4F4D\u7F6E, 15, \u540D\u524D\u5E2F);
+  const \u540D\u524D = labelBlock(node, \u540D\u524D\u4F4D\u7F6E, 15, \u540D\u524D\u5E2F, textMetrics);
   return /* @__PURE__ */ jsxs("g", { children: [
     dropShadow(\u5E2F.cx, \u5E2F.\u5E95, rx * 0.85, CYLINDER_SHADOW_RY),
     /* @__PURE__ */ jsx("path", { "data-cdl-role": "node-body", d: bodyPath, ...frame, strokeLinejoin: "round" }),
@@ -29477,11 +29782,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;
@@ -29504,11 +29809,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;
@@ -29549,13 +29855,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;
@@ -29609,7 +29916,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
     )
   ] });
 }
@@ -29621,16 +29929,22 @@ var PERSON_BODY_LEN = 90;
 var PERSON_SHADOW_DY = 20;
 var PERSON_SHADOW_RY = 4;
 var PERSON_SHADOW_RX = 55;
-function planLabel(node, cx, \u5E45\u4E0A\u9650, plan) {
+function planLabel(node, cx, \u5E45\u4E0A\u9650, plan, textMetrics = "proportional") {
   const \u5E45 = Math.max(
-    textWidth(node.title ?? "", plan.\u540D\u524D.size),
-    node.eyebrow && plan.\u80A9\u66F8 ? textWidth(node.eyebrow, plan.\u80A9\u66F8.size, EYEBROW_TRACKING) : 0,
-    node.subtitle && plan.\u8AAC\u660E ? textWidth(node.subtitle, plan.\u8AAC\u660E.size) : 0
+    textWidth(node.title ?? "", plan.\u540D\u524D.size, 0, textMetrics),
+    node.eyebrow && plan.\u80A9\u66F8 ? textWidth(node.eyebrow, plan.\u80A9\u66F8.size, EYEBROW_TRACKING, textMetrics) : 0,
+    node.subtitle && plan.\u8AAC\u660E ? textWidth(node.subtitle, plan.\u8AAC\u660E.size, 0, textMetrics) : 0
   );
-  const \u984C\u5E45 = textWidth(node.title ?? "", plan.\u540D\u524D.size);
-  const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", plan.\u540D\u524D.size, 0, \u5E45\u4E0A\u9650, textWidth) : 0;
+  const \u984C\u5E45 = textWidth(node.title ?? "", plan.\u540D\u524D.size, 0, textMetrics);
+  const \u6E2C\u308B = (t, s, ls) => textWidth(t, s, ls, textMetrics);
+  const \u4E0B\u9650 = \u984C\u5E45 >= \u5E45 ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", plan.\u540D\u524D.size, 0, \u5E45\u4E0A\u9650, \u6E2C\u308B) : 0;
   const k = \u5E45 > 0 && \u5E45\u4E0A\u9650 > 0 ? Math.min(1, Math.max(\u5E45\u4E0A\u9650 / \u5E45, \u4E0B\u9650)) : 1;
-  const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E2F\u3067\u5207\u308B(t, \u5927\u304D\u3055 * k, \u5E45\u4E0A\u9650, (u, f) => textWidth(u, f, \u5B57\u9593 * k));
+  const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E2F\u3067\u5207\u308B(
+    t,
+    \u5927\u304D\u3055 * k,
+    \u5E45\u4E0A\u9650,
+    (u, f) => textWidth(u, f, \u5B57\u9593 * k, textMetrics)
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx(
       "text",
@@ -29671,7 +29985,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)";
@@ -29733,7 +30047,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) => ({
@@ -29983,7 +30297,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;
@@ -29994,7 +30313,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;
@@ -30034,7 +30356,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;
@@ -30073,7 +30395,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",
@@ -30155,7 +30477,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;
@@ -30209,7 +30536,7 @@ function ShapeKanbanCardNode({ node, active, lang }) {
   );
   const \u8AAC\u660E = \u66F8\u3044\u305F\u5024\u304B\u63A7\u3048(node.subtitle, \u5B57\u5F15("kanbanCard.task"));
   const \u72B6\u614B = \u66F8\u3044\u305F\u5024\u304B\u63A7\u3048(node.eyebrow, \u5B57\u5F15("kanbanCard.status"));
-  const \u72B6\u614B\u306E\u500D\u7387 = \u5E45\u306E\u500D\u7387(\u72B6\u614B, PILL\u5B57, PILL\u5B57\u9593, PILL\u5B57\u5E45);
+  const \u72B6\u614B\u306E\u500D\u7387 = \u5E45\u306E\u500D\u7387(\u72B6\u614B, PILL\u5B57, PILL\u5B57\u9593, PILL\u5B57\u5E45, textMetrics);
   const \u8AAC\u660E\u306E\u5B57 = \u540D\u524D.size * \u8AAC\u660E\u5B57\u6BD4;
   const \u4F7F\u3048\u308B\u5E452 = Math.max(0, w - \u5DE6\u53F3\u4F59\u767D * \u500D * 2);
   return /* @__PURE__ */ jsxs("g", { children: [
@@ -30296,7 +30623,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
@@ -30587,18 +30914,33 @@ var externalLabel = (node, cx, bottomY) => /* @__PURE__ */ jsxs(Fragment, { chil
   )
 ] });
 var LABEL_EYEBROW_SPACING = 2;
-function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
-  const \u5E45 = textWidth(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
-  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, textWidth) : 0;
+function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false, textMetrics = "proportional") {
+  const \u6E2C\u308B = (t, s, ls) => textWidth(t, s, ls, textMetrics);
+  const \u5E45 = \u6E2C\u308B(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
+  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u6E2C\u308B) : 0;
   const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
   const size = \u5927\u304D\u3055 * \u500D\u7387;
   const spacing = \u5B57\u9593 * \u500D\u7387;
-  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => textWidth(u, f, spacing)) };
-}
-function bottomLabel(node, cx, plan) {
-  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B2(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING, node.w);
-  const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
-  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
+  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u6E2C\u308B(u, f, spacing)) };
+}
+function bottomLabel(node, cx, plan, textMetrics = "proportional") {
+  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B2(
+    node.eyebrow ?? "",
+    plan.\u80A9\u66F8?.size ?? 0,
+    LABEL_EYEBROW_SPACING,
+    node.w,
+    false,
+    textMetrics
+  );
+  const \u540D = \u5E45\u306B\u53CE\u3081\u308B2(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true, textMetrics);
+  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(
+    node.subtitle ?? "",
+    plan.\u8AAC\u660E?.size ?? 0,
+    0,
+    node.w,
+    false,
+    textMetrics
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
     /* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: \u540D.text }),
@@ -30612,7 +30954,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;
@@ -30694,7 +31036,7 @@ function ShapeServerRackNode({ node, active }) {
         ] }, i);
       })
     ] })),
-    bottomLabel(node, r.cx, r.label)
+    bottomLabel(node, r.cx, r.label, textMetrics)
   ] });
 }
 var HUB_R = 30;
@@ -30702,7 +31044,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;
@@ -30778,12 +31120,12 @@ function ShapeNetworkNodeNode({ node, active }) {
       )),
       /* @__PURE__ */ jsx("circle", { cx, cy: cy + WIFI_BASE_Y + 3, r: 2.5, fill: "var(--cdl-tone-accent, #2d6a8f)", stroke: "none" })
     ] })),
-    bottomLabel(node, r.cx, r.label)
+    bottomLabel(node, r.cx, r.label, textMetrics)
   ] });
 }
 var PHONE_H = 240;
 var PHONE_W = 110;
-function ShapeMobileDeviceNode({ node, active }) {
+function ShapeMobileDeviceNode({ node, active, textMetrics = "proportional" }) {
   const r = shapeRegion(node);
   const frame = commonFrame3(active);
   const \u7DDA = frame.strokeWidth / 2;
@@ -30850,7 +31192,7 @@ function ShapeMobileDeviceNode({ node, active }) {
         }
       )
     ] })),
-    bottomLabel(node, r.cx, r.label)
+    bottomLabel(node, r.cx, r.label, textMetrics)
   ] });
 }
 function ShapeIotSensorNode({ node, active }) {
@@ -31121,7 +31463,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;
@@ -31310,7 +31652,7 @@ function ShapeSatelliteNode({ node, active }) {
       ),
       /* @__PURE__ */ jsx("circle", { cx, cy: cy - bodyH / 2 - SAT_MAST_LEN, r: 2, fill: "#ff5f56", stroke: "none", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.4;1;0.4", dur: "1.4s", repeatCount: "indefinite" }) })
     ] })),
-    bottomLabel(node, r.cx, r.label)
+    bottomLabel(node, r.cx, r.label, textMetrics)
   ] });
 }
 var FRAME_SW_ACTIVE = 3;
@@ -31396,9 +31738,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;
@@ -31431,7 +31773,12 @@ function EthereumDiamond({ cx, cy, h, colors }) {
     /* @__PURE__ */ jsx("path", { d: `M ${cx} ${midY} L ${cx + w} ${cy + h * 0.05} L ${cx} ${lowerBotY} Z`, fill: c.dark, stroke: c.stroke, strokeWidth: 0.6, strokeLinejoin: "round" })
   ] });
 }
-function ShapeSmartContractNode({ node, active, lang }) {
+function ShapeSmartContractNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
@@ -31472,7 +31819,7 @@ function ShapeSmartContractNode({ node, active, lang }) {
     }
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx("path", { "data-cdl-role": "node-body", d: path, ...frame, strokeLinejoin: "round" }),
       /* @__PURE__ */ jsx("path", { d: foldPath, fill: "none", stroke: frame.stroke, strokeWidth: frame.strokeWidth, strokeLinejoin: "round" }),
@@ -31494,10 +31841,10 @@ function ShapeSmartContractNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, smartContractExtent(frame.strokeWidth), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-var \u5B57\u306E\u5E45 = (text, size) => \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(text, size);
+var \u5B57\u306E\u5E45 = (text, size, textMetrics = "proportional") => \u7D75\u306E\u4E2D\u306E\u5B57\u306E\u5E45(text, size, 0, textMetrics);
 var BLOCK_DEFAULT_FIELDS = [
   { key: "hash", label: "blockchainBlock.hash", value: { text: "0xaf31..." } },
   { key: "prev", label: "blockchainBlock.prev", value: { text: "0x7b3f..." } },
@@ -31505,10 +31852,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;
@@ -31529,9 +31882,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 } },
@@ -31542,12 +31895,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;
@@ -31556,7 +31909,7 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
       /* @__PURE__ */ jsx("rect", { x: x + 6, y: y + 6, width: bw, height: bh, rx: 8, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
       /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 8, ...frame }),
       /* @__PURE__ */ jsx("path", { d: `M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`, fill: "var(--cdl-tone-accent, #2d6a8f)", fillOpacity: 0.9, stroke: "none" }),
-      /* @__PURE__ */ jsx("text", { "data-cdl-role": "blockchain-block-title", "data-cdl-counter-scaled": "1", x: x + 14, y: y + 22, fontSize: \u984C\u306E\u5927\u304D\u3055, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#ffffff", children: \u5E45\u3067\u5207\u308B(\u898B\u51FA\u3057, \u984C\u306E\u5927\u304D\u3055, \u898B\u51FA\u3057\u306E\u5E45, \u5B57\u306E\u5E45) }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-role": "blockchain-block-title", "data-cdl-counter-scaled": "1", x: x + 14, y: y + 22, fontSize: \u984C\u306E\u5927\u304D\u3055, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#ffffff", children: \u5E45\u3067\u5207\u308B(\u898B\u51FA\u3057, \u984C\u306E\u5927\u304D\u3055, \u898B\u51FA\u3057\u306E\u5E45, \u6E2C\u308B\u5B57) }),
       \u80A9\u66F8 !== "" && /* @__PURE__ */ jsx(
         "text",
         {
@@ -31576,7 +31929,12 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
       /* @__PURE__ */ jsx("circle", { cx: x + bw - 16, cy: y + 16, r: 5.5, fill: "#7cd88f", stroke: "#ffffff", strokeWidth: 1.5 }),
       fields.map((f, i) => /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "1", x: x + 14, y: y + 54 + i * \u884C\u306E\u9593\u9694, fontSize: \u540D\u306E\u5927\u304D\u3055, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "var(--cdl-text-dim, #5a6270)", children: f.label }),
-        /* @__PURE__ */ jsx("text", { "data-cdl-role": `blockchain-block-${f.key}`, "data-cdl-counter-scaled": "1", x: x + bw - 14, y: y + 54 + i * \u884C\u306E\u9593\u9694, fontSize: \u5024\u306E\u5927\u304D\u3055, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 600, textAnchor: "end", fill: "var(--cdl-text, #1a1f2a)", children: \u5E45\u3067\u5207\u308B(f.value, \u5024\u306E\u5927\u304D\u3055, bw - 28 - \u5B57\u306E\u5E45(f.label, \u540D\u306E\u5927\u304D\u3055) - 8, \u5B57\u306E\u5E45) }),
+        /* @__PURE__ */ jsx("text", { "data-cdl-role": `blockchain-block-${f.key}`, "data-cdl-counter-scaled": "1", x: x + bw - 14, y: y + 54 + i * \u884C\u306E\u9593\u9694, fontSize: \u5024\u306E\u5927\u304D\u3055, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 600, textAnchor: "end", fill: "var(--cdl-text, #1a1f2a)", children: \u5E45\u3067\u5207\u308B(
+          f.value,
+          \u5024\u306E\u5927\u304D\u3055,
+          bw - 28 - \u6E2C\u308B\u5B57(f.label, \u540D\u306E\u5927\u304D\u3055) - 8,
+          \u6E2C\u308B\u5B57
+        ) }),
         /* @__PURE__ */ jsx("line", { x1: x + 14, y1: y + 60 + i * \u884C\u306E\u9593\u9694, x2: x + bw - 14, y2: y + 60 + i * \u884C\u306E\u9593\u9694, stroke: "var(--cdl-divider, #d4d4d8)", strokeWidth: 0.5, opacity: 0.5 })
       ] }, i)),
       /* @__PURE__ */ jsxs("g", { transform: `translate(${cx - 32}, ${y + bh - 26})`, children: [
@@ -31588,7 +31946,11 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsx("g", { children: fitArt(r, blockchainBlockExtent(frame.strokeWidth), art) });
 }
-function ShapeBlockchainNode({ node, active }) {
+function ShapeBlockchainNode({
+  node,
+  active,
+  textMetrics = "proportional"
+}) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -31604,7 +31966,7 @@ function ShapeBlockchainNode({ node, active }) {
     { text: "0x\u2026", size: CHAIN_HASH_SIZE, \u5E2F: { \u5E45: CHAIN_TEXT_W, \u9AD8\u3055: CHAIN_ROW_GAP } }
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
       const bx = startX + i * (blockW + linkW);
       const isCurrent = i === blockCount - 1;
@@ -31640,10 +32002,14 @@ function ShapeBlockchainNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, chainExtent(), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeBitcoinChainNode({ node, active }) {
+function ShapeBitcoinChainNode({
+  node,
+  active,
+  textMetrics = "proportional"
+}) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -31659,7 +32025,7 @@ function ShapeBitcoinChainNode({ node, active }) {
     { text: "#820", size: BTC_NO_SIZE, \u5E2F: { \u5E45: CHAIN_TEXT_W, \u9AD8\u3055: 20 } }
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
       const bx = startX + i * (blockW + linkW);
       const isCurrent = i === blockCount - 1;
@@ -31690,10 +32056,14 @@ function ShapeBitcoinChainNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, chainExtent(), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeEthereumChainNode({ node, active }) {
+function ShapeEthereumChainNode({
+  node,
+  active,
+  textMetrics = "proportional"
+}) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -31709,7 +32079,7 @@ function ShapeEthereumChainNode({ node, active }) {
     { text: "#214", size: ETH_NO_SIZE, \u5E2F: { \u5E45: CHAIN_TEXT_W, \u9AD8\u3055: 20 } }
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsx("g", { children: Array.from({ length: blockCount }, (_, i) => i).map((i) => {
       const bx = startX + i * (blockW + linkW);
       const isCurrent = i === blockCount - 1;
@@ -31741,10 +32111,14 @@ function ShapeEthereumChainNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, chainExtent(), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeBlockchainNodeNode({ node, active }) {
+function ShapeBlockchainNodeNode({
+  node,
+  active,
+  textMetrics = "proportional"
+}) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -31798,10 +32172,15 @@ function ShapeBlockchainNodeNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, blockchainNodeExtent(frame.strokeWidth), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeRpcNodeNode({ node, active, lang }) {
+function ShapeRpcNodeNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
@@ -31820,10 +32199,10 @@ function ShapeRpcNodeNode({ node, active, lang }) {
     /* @__PURE__ */ jsx("text", { x: cx, y: cy + 26, fontSize: 11, textAnchor: "middle", fill: "#7a8290", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", children: "JSON-RPC 2.0" }),
     /* @__PURE__ */ jsx("rect", { x: x + 16, y: y + bh - 24, width: bw - 32, height: 8, rx: 4, fill: "#0f1419", stroke: "none" }),
     /* @__PURE__ */ jsx("rect", { x: x + 16, y: y + bh - 24, width: (bw - 32) * 0.92, height: 8, rx: 4, fill: "#27c93f", stroke: "none", children: /* @__PURE__ */ jsx("animate", { attributeName: "width", values: `${(bw - 32) * 0.86};${(bw - 32) * 0.96};${(bw - 32) * 0.86}`, dur: "3s", repeatCount: "indefinite" }) }),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeWalletNode({ node, active }) {
+function ShapeWalletNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -31897,10 +32276,10 @@ function ShapeWalletNode({ node, active }) {
       /* @__PURE__ */ jsx("text", { x: cx, y: foldY + 3, fontSize: 9, fontWeight: 700, fill: "#5a3a10", textAnchor: "middle", opacity: 0.8, children: "\u039E" }),
       /* @__PURE__ */ jsx("path", { d: `M ${x + 2} ${y + 6} L ${x + w - 2} ${y + 6}`, fill: "none", stroke: "#ffffff", strokeWidth: 1, opacity: 0.4 })
     ] }),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeNftNode({ node, active }) {
+function ShapeNftNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -31916,7 +32295,7 @@ function ShapeNftNode({ node, active }) {
     { text: "#1024", size: NFT_ID_SIZE, \u5E2F: { \u5E45: cardW - 16 - 34, \u9AD8\u3055: cardH - artH } }
   ];
   const art = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx("rect", { x: x + 4, y: y + 4, width: cardW, height: cardH, rx: 14, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
       /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: cardW, height: cardH, rx: 14, ...frame }),
@@ -31954,10 +32333,10 @@ function ShapeNftNode({ node, active }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, nftExtent(frame.strokeWidth), art),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeTokenNode({ node, active }) {
+function ShapeTokenNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -31994,7 +32373,7 @@ function ShapeTokenNode({ node, active }) {
         }
       }
     ),
-    bottomLabel2(node, r.cx, r.label)
+    bottomLabel2(node, r.cx, r.label, textMetrics)
   ] });
 }
 var commonFrame5 = (active) => ({
@@ -32013,7 +32392,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) {
@@ -32022,18 +32402,33 @@ function \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
   }
   return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
 }
-function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
-  const \u5E45 = \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
-  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u5B57\u5E45) : 0;
+function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false, textMetrics = "proportional") {
+  const \u6E2C\u308B = (t, s, ls) => \u5B57\u5E45(t, s, ls, textMetrics);
+  const \u5E45 = \u6E2C\u308B(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
+  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u6E2C\u308B) : 0;
   const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
   const size = \u5927\u304D\u3055 * \u500D\u7387;
   const spacing = \u5B57\u9593 * \u500D\u7387;
-  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u5B57\u5E45(u, f, spacing)) };
-}
-function bottomLabel3(node, cx, plan) {
-  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B3(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING2, node.w);
-  const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
-  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
+  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u6E2C\u308B(u, f, spacing)) };
+}
+function bottomLabel3(node, cx, plan, textMetrics = "proportional") {
+  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B3(
+    node.eyebrow ?? "",
+    plan.\u80A9\u66F8?.size ?? 0,
+    LABEL_EYEBROW_SPACING2,
+    node.w,
+    false,
+    textMetrics
+  );
+  const \u540D = \u5E45\u306B\u53CE\u3081\u308B3(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true, textMetrics);
+  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(
+    node.subtitle ?? "",
+    plan.\u8AAC\u660E?.size ?? 0,
+    0,
+    node.w,
+    false,
+    textMetrics
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
     /* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: \u540D.text }),
@@ -32052,7 +32447,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;
@@ -32099,7 +32494,7 @@ function ShapeBankNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
 var TRUST_CROWN_RISE = 4;
@@ -32111,7 +32506,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);
@@ -32165,10 +32565,15 @@ function ShapeTrustBankNode({ node, active, lang }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapePaymentProviderNode({ node, active, lang }) {
+function ShapePaymentProviderNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
@@ -32193,10 +32598,14 @@ function ShapePaymentProviderNode({ node, active, lang }) {
       /* @__PURE__ */ jsx("text", { x: cx, y: cy + 9, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: accentDarker, fontFamily: "Georgia, serif", children: "$" })
     ] }),
     /* @__PURE__ */ jsx("text", { x: cx, y: y + boxH - 16, fontSize: 11, fontWeight: 700, letterSpacing: 2, textAnchor: "middle", fill: "#a4b5f2", children: \u5B57\u5F15("paymentProvider.status") }),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeCreditCardNode({ node, active }) {
+function ShapeCreditCardNode({
+  node,
+  active,
+  textMetrics = "proportional"
+}) {
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
   const cardW = Math.min(r.availW - 30, 260);
@@ -32218,7 +32627,7 @@ function ShapeCreditCardNode({ node, active }) {
     [0, 1, 2, 3].map((block) => /* @__PURE__ */ jsx("g", { children: [0, 1, 2, 3].map((dot) => /* @__PURE__ */ jsx("circle", { cx: x + 32 + block * (cardW - 64) / 4 + dot * 8, cy: y + cardH - 40, r: 2.8, fill: "#ffffff", stroke: "none" }, dot)) }, block)),
     /* @__PURE__ */ jsx("circle", { cx: x + cardW - 48, cy: y + cardH - 24, r: 15, fill: "#c9302c", opacity: 0.9, stroke: "none" }),
     /* @__PURE__ */ jsx("circle", { cx: x + cardW - 30, cy: y + cardH - 24, r: 15, fill: "#e5c07b", opacity: 0.9, stroke: "none" }),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
 var BROKERAGE_TICK_H = 18;
@@ -32243,7 +32652,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);
@@ -32282,7 +32696,7 @@ function ShapeBrokerageNode({ node, active, lang }) {
     }
   ];
   const \u7D75 = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx("ellipse", { cx, cy: y + h + BROKERAGE_SHADOW_DY, rx: w * BROKERAGE_SHADOW_RX_RATIO, ry: BROKERAGE_SHADOW_RY, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
       /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: w, height: h, fill: "#255a7a", stroke: accentDarker, strokeWidth: frame.strokeWidth }),
@@ -32310,12 +32724,17 @@ function ShapeBrokerageNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
 var EXCHANGE_SUB_SIZE = 11;
 var EXCHANGE_HEX_R = 52;
-function ShapeExchangeNode({ node, active, lang }) {
+function ShapeExchangeNode({
+  node,
+  active,
+  lang,
+  textMetrics = "proportional"
+}) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame5(active);
   const r = shapeRegion(node);
@@ -32360,7 +32779,7 @@ function ShapeExchangeNode({ node, active, lang }) {
     }
   ];
   const \u7D75 = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsxs("g", { children: [
       nodes.map((n, i) => /* @__PURE__ */ jsx("line", { x1: cx, y1: cy, x2: n.cx, y2: n.cy, stroke: accentDarker, strokeWidth: 1.5, strokeDasharray: "3 2" }, `l${i}`)),
       nodes.map((n, i) => {
@@ -32379,7 +32798,7 @@ function ShapeExchangeNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
 var ATM_SIGN_H = 26;
@@ -32396,7 +32815,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);
@@ -32480,7 +32904,7 @@ function ShapeAtmNode({ node, active, lang }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel3(node, r.cx, r.label)
+    bottomLabel3(node, r.cx, r.label, textMetrics)
   ] });
 }
 var commonFrame6 = (active) => ({
@@ -32499,7 +32923,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) {
@@ -32508,18 +32933,33 @@ function \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
   }
   return \u5E45 + \u5B57\u9593 * \u5B57\u6570;
 }
-function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false) {
-  const \u5E45 = \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
-  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u5B57\u5E452) : 0;
+function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u984C\u304B = false, textMetrics = "proportional") {
+  const \u6E2C\u308B = (t, s, ls) => \u5B57\u5E452(t, s, ls, textMetrics);
+  const \u5E45 = \u6E2C\u308B(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
+  const \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u6E2C\u308B) : 0;
   const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u4E0B\u9650)) : 1;
   const size = \u5927\u304D\u3055 * \u500D\u7387;
   const spacing = \u5B57\u9593 * \u500D\u7387;
-  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u5B57\u5E452(u, f, spacing)) };
-}
-function bottomLabel4(node, cx, plan) {
-  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B4(node.eyebrow ?? "", plan.\u80A9\u66F8?.size ?? 0, LABEL_EYEBROW_SPACING3, node.w);
-  const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true);
-  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B4(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
+  return { size, spacing, text: \u5E2F\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u6E2C\u308B(u, f, spacing)) };
+}
+function bottomLabel4(node, cx, plan, textMetrics = "proportional") {
+  const \u80A9 = \u5E45\u306B\u53CE\u3081\u308B4(
+    node.eyebrow ?? "",
+    plan.\u80A9\u66F8?.size ?? 0,
+    LABEL_EYEBROW_SPACING3,
+    node.w,
+    false,
+    textMetrics
+  );
+  const \u540D = \u5E45\u306B\u53CE\u3081\u308B4(node.title ?? "", plan.\u540D\u524D.size, 0, node.w, true, textMetrics);
+  const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B4(
+    node.subtitle ?? "",
+    plan.\u8AAC\u660E?.size ?? 0,
+    0,
+    node.w,
+    false,
+    textMetrics
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
     /* @__PURE__ */ jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: \u540D.text }),
@@ -32531,7 +32971,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;
@@ -32557,10 +32997,10 @@ function ShapeWebsiteNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeStorefrontNode({ node, active, lang }) {
+function ShapeStorefrontNode({ node, active, lang, textMetrics = "proportional" }) {
   const \u5B57\u5F15 = \u5B57\u5F15\u304D\u3092\u4F5C\u308B(lang);
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
@@ -32605,7 +33045,7 @@ function ShapeStorefrontNode({ node, active, lang }) {
     /* @__PURE__ */ jsx("text", { x: doorX + doorW / 2, y: doorY + doorH * 0.85 + 11, fontSize: 11, fontWeight: 700, letterSpacing: 1, textAnchor: "middle", fill: "#5a3a10", children: \u5B57\u5F15("storefront.open") }),
     /* @__PURE__ */ jsx("circle", { cx: doorX + 6, cy: doorY + doorH * 0.55, r: 1.5, fill: "#c15a4a" }),
     /* @__PURE__ */ jsx("rect", { x: x - 6, y: y + bh - 6, width: bw + 12, height: 8, fill: "#5a6270", stroke: "none" }),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
 var WAREHOUSE_ROOF_H = 18;
@@ -32619,7 +33059,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);
@@ -32672,13 +33112,13 @@ function ShapeWarehouseNode({ node, active, lang }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
 var HANDLE_GRIP_X = 118;
 var HANDLE_GRIP_R = 4;
 var CART_SHADOW_RX = 80;
-function ShapeOnlineShopNode({ node, active }) {
+function ShapeOnlineShopNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
   const cy = r.cy + 10;
@@ -32734,10 +33174,10 @@ function ShapeOnlineShopNode({ node, active }) {
     /* @__PURE__ */ jsx("circle", { cx: wheelR, cy: wheelY, r: 16 * s, fill: "#0f1830", stroke: "#000", strokeWidth: 2 * s }),
     /* @__PURE__ */ jsx("circle", { cx: wheelR, cy: wheelY, r: 8 * s, fill: "#5a6270", stroke: "#0f1830", strokeWidth: 1.5 * s }),
     /* @__PURE__ */ jsx("circle", { cx: wheelR, cy: wheelY, r: 2 * s, fill: "#0f1830" }),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
-function ShapeCdnEdgeNode({ node, active }) {
+function ShapeCdnEdgeNode({ node, active, textMetrics = "proportional" }) {
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
   const cx = r.cx;
@@ -32800,7 +33240,7 @@ function ShapeCdnEdgeNode({ node, active }) {
   ] });
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, { \u4E0A: \u5E83\u304C\u308A, \u4E0B: \u5E83\u304C\u308A, \u5DE6: \u5E83\u304C\u308A, \u53F3: \u5E83\u304C\u308A }, \u7D75),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
 var API_ROW_TOP = 52;
@@ -32815,7 +33255,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);
@@ -32827,7 +33267,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)
@@ -32843,7 +33289,7 @@ function ShapeApiGatewayNode({ node, active, lang }) {
     \u5E2F: { \u5E45: bw - 32 - 64 - 16, \u9AD8\u3055: API_ROW_H }
   }));
   const \u7D75 = (\u500D\u7387) => {
-    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089);
+    const \u500D = \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u6253\u3061\u6D88\u3059\u5B57\u3089, textMetrics);
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx("rect", { x: x + DROP_SHADOW_D, y: y + DROP_SHADOW_D, width: bw, height: bh, rx: 10, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
       /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 10, fill: "#1a2332", stroke: frame.stroke, strokeWidth: frame.strokeWidth }),
@@ -32860,7 +33306,7 @@ function ShapeApiGatewayNode({ node, active, lang }) {
   };
   return /* @__PURE__ */ jsxs("g", { children: [
     fitArt(r, \u5E83\u304C\u308A, \u7D75),
-    bottomLabel4(node, r.cx, r.label)
+    bottomLabel4(node, r.cx, r.label, textMetrics)
   ] });
 }
 function bottomLabel5(node, cx, plan) {
@@ -33160,6 +33606,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;
@@ -33204,7 +33651,14 @@ function CdlNodeView({
         return /* @__PURE__ */ jsx(CardNode, { node: resolvedNode, active });
       // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
       case "sequence-board":
-        return /* @__PURE__ */ jsx(SequenceBoardNode, { node: resolvedNode, stateValues });
+        return /* @__PURE__ */ jsx(
+          SequenceBoardNode,
+          {
+            node: resolvedNode,
+            stateValues,
+            textMetrics
+          }
+        );
       // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
       // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
@@ -33229,7 +33683,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-gauge":
@@ -33240,7 +33695,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-stacked-bar":
@@ -33251,7 +33707,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-slope":
@@ -33262,7 +33719,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-waffle":
@@ -33273,11 +33731,20 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-stat":
-        return /* @__PURE__ */ jsx(ChartStatNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          ChartStatNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            textMetrics
+          }
+        );
       case "chart-radial":
         return /* @__PURE__ */ jsx(
           ChartRadialNode,
@@ -33286,7 +33753,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "chart-bar":
@@ -33319,7 +33787,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "funnel-stages":
@@ -33330,11 +33799,20 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "quadrant-matrix":
-        return /* @__PURE__ */ jsx(QuadrantNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          QuadrantNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            textMetrics
+          }
+        );
       case "tree-hierarchy":
         return /* @__PURE__ */ jsx(
           TreeNode,
@@ -33343,7 +33821,8 @@ function CdlNodeView({
             active,
             stateValues,
             drawing,
-            progress
+            progress,
+            textMetrics
           }
         );
       case "journey-map":
@@ -33358,91 +33837,91 @@ function CdlNodeView({
           }
         );
       case "shape-file":
-        return /* @__PURE__ */ jsx(ShapeFileNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeFileNode, { node: resolvedNode, active, textMetrics });
       case "shape-folder":
-        return /* @__PURE__ */ jsx(ShapeFolderNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeFolderNode, { node: resolvedNode, active, textMetrics });
       case "shape-cloud":
-        return /* @__PURE__ */ jsx(ShapeCloudNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeCloudNode, { node: resolvedNode, active, textMetrics });
       case "shape-cylinder":
-        return /* @__PURE__ */ jsx(ShapeCylinderNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeCylinderNode, { node: resolvedNode, active, textMetrics });
       case "shape-hexagon":
-        return /* @__PURE__ */ jsx(ShapeHexagonNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeHexagonNode, { node: resolvedNode, active, textMetrics });
       case "shape-diamond":
-        return /* @__PURE__ */ jsx(ShapeDiamondNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeDiamondNode, { node: resolvedNode, active, textMetrics });
       case "shape-stack":
-        return /* @__PURE__ */ jsx(ShapeStackNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeStackNode, { node: resolvedNode, active, textMetrics });
       case "shape-person":
-        return /* @__PURE__ */ jsx(ShapePersonNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapePersonNode, { node: resolvedNode, active, textMetrics });
       case "shape-window":
         return /* @__PURE__ */ jsx(ShapeWindowNode, { node: resolvedNode, active });
       case "shape-terminal":
         return /* @__PURE__ */ jsx(ShapeTerminalNode, { node: resolvedNode, active, lang });
       case "shape-code-block":
-        return /* @__PURE__ */ jsx(ShapeCodeBlockNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeCodeBlockNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-kanban-card":
-        return /* @__PURE__ */ jsx(ShapeKanbanCardNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeKanbanCardNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-message-bubble":
         return /* @__PURE__ */ jsx(ShapeMessageBubbleNode, { node: resolvedNode, active });
       case "shape-gear":
         return /* @__PURE__ */ jsx(ShapeGearNode, { node: resolvedNode, active });
       case "shape-server-rack":
-        return /* @__PURE__ */ jsx(ShapeServerRackNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeServerRackNode, { node: resolvedNode, active, textMetrics });
       case "shape-network-node":
-        return /* @__PURE__ */ jsx(ShapeNetworkNodeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeNetworkNodeNode, { node: resolvedNode, active, textMetrics });
       case "shape-mobile-device":
-        return /* @__PURE__ */ jsx(ShapeMobileDeviceNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeMobileDeviceNode, { node: resolvedNode, active, textMetrics });
       case "shape-iot-sensor":
         return /* @__PURE__ */ jsx(ShapeIotSensorNode, { node: resolvedNode, active });
       case "shape-robot-arm":
         return /* @__PURE__ */ jsx(ShapeRobotArmNode, { node: resolvedNode, active });
       case "shape-satellite":
-        return /* @__PURE__ */ jsx(ShapeSatelliteNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeSatelliteNode, { node: resolvedNode, active, textMetrics });
       case "shape-smart-contract":
-        return /* @__PURE__ */ jsx(ShapeSmartContractNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeSmartContractNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-blockchain-block":
-        return /* @__PURE__ */ jsx(ShapeBlockchainBlockNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeBlockchainBlockNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-rpc-node":
-        return /* @__PURE__ */ jsx(ShapeRpcNodeNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeRpcNodeNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-wallet":
-        return /* @__PURE__ */ jsx(ShapeWalletNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeWalletNode, { node: resolvedNode, active, textMetrics });
       case "shape-nft":
-        return /* @__PURE__ */ jsx(ShapeNftNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeNftNode, { node: resolvedNode, active, textMetrics });
       case "shape-token":
-        return /* @__PURE__ */ jsx(ShapeTokenNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeTokenNode, { node: resolvedNode, active, textMetrics });
       case "shape-blockchain":
-        return /* @__PURE__ */ jsx(ShapeBlockchainNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeBlockchainNode, { node: resolvedNode, active, textMetrics });
       case "shape-bitcoin-chain":
-        return /* @__PURE__ */ jsx(ShapeBitcoinChainNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeBitcoinChainNode, { node: resolvedNode, active, textMetrics });
       case "shape-ethereum-chain":
-        return /* @__PURE__ */ jsx(ShapeEthereumChainNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeEthereumChainNode, { node: resolvedNode, active, textMetrics });
       case "shape-blockchain-node":
-        return /* @__PURE__ */ jsx(ShapeBlockchainNodeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeBlockchainNodeNode, { node: resolvedNode, active, textMetrics });
       case "shape-bank":
-        return /* @__PURE__ */ jsx(ShapeBankNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeBankNode, { node: resolvedNode, active, textMetrics });
       case "shape-trust-bank":
-        return /* @__PURE__ */ jsx(ShapeTrustBankNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeTrustBankNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-payment-provider":
-        return /* @__PURE__ */ jsx(ShapePaymentProviderNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapePaymentProviderNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-credit-card":
-        return /* @__PURE__ */ jsx(ShapeCreditCardNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeCreditCardNode, { node: resolvedNode, active, textMetrics });
       case "shape-brokerage":
-        return /* @__PURE__ */ jsx(ShapeBrokerageNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeBrokerageNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-exchange":
-        return /* @__PURE__ */ jsx(ShapeExchangeNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeExchangeNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-atm":
-        return /* @__PURE__ */ jsx(ShapeAtmNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeAtmNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-website":
-        return /* @__PURE__ */ jsx(ShapeWebsiteNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeWebsiteNode, { node: resolvedNode, active, textMetrics });
       case "shape-storefront":
-        return /* @__PURE__ */ jsx(ShapeStorefrontNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeStorefrontNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-warehouse":
-        return /* @__PURE__ */ jsx(ShapeWarehouseNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeWarehouseNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-online-shop":
-        return /* @__PURE__ */ jsx(ShapeOnlineShopNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeOnlineShopNode, { node: resolvedNode, active, textMetrics });
       case "shape-cdn-edge":
-        return /* @__PURE__ */ jsx(ShapeCdnEdgeNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ShapeCdnEdgeNode, { node: resolvedNode, active, textMetrics });
       case "shape-api-gateway":
-        return /* @__PURE__ */ jsx(ShapeApiGatewayNode, { node: resolvedNode, active, lang });
+        return /* @__PURE__ */ jsx(ShapeApiGatewayNode, { node: resolvedNode, active, lang, textMetrics });
       case "shape-auditor":
         return /* @__PURE__ */ jsx(ShapeAuditorNode, { node: resolvedNode, active });
       case "shape-regulator":
@@ -33462,7 +33941,17 @@ function CdlNodeView({
       case "station":
         return /* @__PURE__ */ jsx(StationNode, { node: resolvedNode, active });
       default:
-        return /* @__PURE__ */ jsx(GenericNode, { node: resolvedNode, active, value: node.value, stateValues, \u5024\u306E\u540D\u524D });
+        return /* @__PURE__ */ jsx(
+          GenericNode,
+          {
+            node: resolvedNode,
+            active,
+            value: node.value,
+            stateValues,
+            \u5024\u306E\u540D\u524D,
+            textMetrics
+          }
+        );
     }
   })();
   const offsetX = node.renderOffsetX !== void 0 ? resolveNumericAttr(node.renderOffsetX, stateValues, 0) : 0;
@@ -33523,7 +34012,7 @@ function CdlNodeView({
           }
         ),
         inner,
-        \u7BB1\u306E\u4E0A\u306E\u8A9E(resolvedNode)
+        \u7BB1\u306E\u4E0A\u306E\u8A9E(resolvedNode, textMetrics ?? "proportional")
       ]
     }
   );
@@ -33532,17 +34021,17 @@ var FIGURE_TITLE_GAP = 10;
 var FIGURE_TITLE_SIZE = 15;
 var FIGURE_EYEBROW_SIZE = 11;
 var FIGURE_EYEBROW_LIFT = 1.1;
-function \u5E45\u306B\u53CE\u3081\u305F\u5927\u304D\u3055(\u8A9E, \u7D20\u306E\u5927\u304D\u3055, \u5E45) {
-  const \u5B9F\u5E45 = textWidth(\u8A9E, \u7D20\u306E\u5927\u304D\u3055, 0);
+function \u5E45\u306B\u53CE\u3081\u305F\u5927\u304D\u3055(\u8A9E, \u7D20\u306E\u5927\u304D\u3055, \u5E45, textMetrics = "proportional") {
+  const \u5B9F\u5E45 = textWidth(\u8A9E, \u7D20\u306E\u5927\u304D\u3055, 0, textMetrics);
   return \u5B9F\u5E45 > \u5E45 ? \u7D20\u306E\u5927\u304D\u3055 * \u5E45 / \u5B9F\u5E45 : \u7D20\u306E\u5927\u304D\u3055;
 }
-function \u7BB1\u306E\u4E0A\u306E\u8A9E(node) {
+function \u7BB1\u306E\u4E0A\u306E\u8A9E(node, textMetrics = "proportional") {
   if (!drawsFigureTitle(node.kind)) return null;
   const \u540D\u524D = (node.title ?? "").trim();
   const \u5C0F\u898B\u51FA\u3057 = (node.eyebrow ?? "").trim();
   if (\u540D\u524D === "" && \u5C0F\u898B\u51FA\u3057 === "") return null;
   const \u984C\u306Ey = node.cy - node.h / 2 - FIGURE_TITLE_GAP;
-  const \u984C\u306E\u5927\u304D\u3055 = \u5E45\u306B\u53CE\u3081\u305F\u5927\u304D\u3055(\u540D\u524D, FIGURE_TITLE_SIZE, node.w);
+  const \u984C\u306E\u5927\u304D\u3055 = \u5E45\u306B\u53CE\u3081\u305F\u5927\u304D\u3055(\u540D\u524D, FIGURE_TITLE_SIZE, node.w, textMetrics);
   const \u5C0F\u898B\u51FA\u3057\u306Ey = \u540D\u524D === "" ? \u984C\u306Ey : \u984C\u306Ey - \u984C\u306E\u5927\u304D\u3055 * FIGURE_EYEBROW_LIFT;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     \u5C0F\u898B\u51FA\u3057 !== "" && /* @__PURE__ */ jsx(
@@ -33552,7 +34041,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)",
@@ -33877,6 +34366,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,
@@ -33893,7 +34383,8 @@ function CdlStage({
             CdlEdgeLabelView,
             {
               edge,
-              active: activeSet.has(edge.id)
+              active: activeSet.has(edge.id),
+              textMetrics: laid.textMetrics
             },
             `label-${edge.id}`
           )),
@@ -33903,7 +34394,8 @@ function CdlStage({
               {
                 edge,
                 active: activeSet.has(edge.id),
-                \u7AEF
+                \u7AEF,
+                textMetrics: laid.textMetrics
               },
               `${\u7AEF}-label-${edge.id}`
             ))
@@ -34348,8 +34840,8 @@ function pointToSegmentDistance2(px, py, seg) {
 }
 
 // src/layout/predict-bbox.ts
-function predictLabelBBoxWorld(edge) {
-  return computeLabelBBoxWorld(edge);
+function predictLabelBBoxWorld(edge, textMetrics = "proportional") {
+  return computeLabelBBoxWorld(edge, textMetrics);
 }
 function predictNodeBBoxWorld(n) {
   return {
@@ -34409,12 +34901,12 @@ function resolveStorageBoxW(width, presetName, optionName) {
   }
   return width;
 }
-function fitRowsWidth(boxW, rows) {
-  return Math.max(boxW, requiredRowsWidth(rows ? [...rows] : void 0, "storage"));
+function fitRowsWidth(boxW, rows, textMetrics = "proportional") {
+  return Math.max(boxW, requiredRowsWidth(rows ? [...rows] : void 0, "storage", textMetrics));
 }
 function swimlane(preset) {
   const w = preset.laneWidth ?? 400;
-  const b = diagram(preset.id, { topic: preset.topic, type: "swimlane" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "swimlane" });
   const labelToId = /* @__PURE__ */ new Map();
   const idsInOrder = [];
   for (const label of preset.lanes) {
@@ -34434,7 +34926,7 @@ function swimlane(preset) {
 }
 function flow(preset) {
   const w = preset.laneWidth ?? 400;
-  const b = diagram(preset.id, { topic: preset.topic, type: "flow" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "flow" });
   b.lane("flow", { width: w, ...preset.laneLabel ? { label: preset.laneLabel } : {} });
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "dotted-flow";
@@ -34495,7 +34987,7 @@ var SEQUENCE_MESSAGE_LOOK = {
 };
 function sequence(preset) {
   const tone = preset.defaultTone ?? "accent";
-  const b = diagram(preset.id, { topic: preset.topic, type: "sequence" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "sequence" });
   const \u9762\u3005 = preset.actors.map(
     (a) => typeof a === "string" ? { name: a } : { name: a.name, ...a.subtitle ? { subtitle: a.subtitle } : {} }
   );
@@ -34521,7 +35013,7 @@ function sequence(preset) {
         return \u51FA\u756A.length > 0 ? { actor: i, from: \u51FA\u756A[0], to: \u51FA\u756A[\u51FA\u756A.length - 1] } : null;
       }).filter((x) => x !== null);
       const data = { actors: \u9762\u3005, messages: \u8A00\u3065\u3066, bands: \u5E2F };
-      const m = sequenceBoardMetrics(data);
+      const m = sequenceBoardMetrics(data, resolveTextMetrics(preset.textMetrics));
       const laneId = "seq";
       b.lane(laneId, { width: m.w + LANE_PAD_MIN * 2 });
       b.node(preset.id, {
@@ -34550,7 +35042,7 @@ function topology(preset) {
   const groupW = preset.groupWidth ?? 460;
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic, type: "topology" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "topology" });
   const groupOrder = [];
   const groupStackCount = /* @__PURE__ */ new Map();
   const phaseActivate = [];
@@ -34619,7 +35111,12 @@ function er(preset) {
   const entityW = resolveStorageBoxW(preset.entityWidth, "er", "entityWidth");
   const tone = preset.defaultTone ?? "info";
   const \u7E1E\u3092\u6577\u304F = preset.rowStripe ?? true;
-  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette, type: "er" });
+  const b = diagram(preset.id, {
+    topic: preset.topic,
+    palette: preset.palette,
+    textMetrics: preset.textMetrics,
+    type: "er"
+  });
   const entities = [];
   const phaseActivate = [];
   let relIdx = 0;
@@ -34642,7 +35139,7 @@ function er(preset) {
       \u5024.forEach(\u8DB3\u3059);
       const \u8A2D\u8A08\u306E\u5F62 = \u884C.length > 0;
       const rows = \u8A2D\u8A08\u306E\u5F62 ? \u884C : e.rows ?? [];
-      const boxW = fitRowsWidth(entityW, rows);
+      const boxW = fitRowsWidth(entityW, rows, resolveTextMetrics(preset.textMetrics));
       b.lane(laneId, { width: boxLaneW(boxW) });
       b.node(e.id, {
         lane: laneId,
@@ -34706,7 +35203,7 @@ function stateMachine(preset) {
   const stateW = resolveStateW(preset.stateWidth, "stateMachine");
   const tone = preset.defaultTone ?? "accent";
   const diagramType = "state";
-  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: diagramType });
   const phaseActivate = [];
   const stateOrder = /* @__PURE__ */ new Map();
   const \u72B6\u614B = [];
@@ -34737,7 +35234,7 @@ function stateMachine(preset) {
         const \u884C = (s.actions ?? []).map((a) => a.note ? `${a.label}: ${a.note}` : a.label);
         const \u5370 = (s.actions ?? []).map((a) => FSM_ACTION_MARK[a.when]);
         const laneId = \u683C\u5B50 && s.col !== void 0 ? `col-${s.col}` : `lane-${s.id}`;
-        const boxW = \u8A2D\u8A08\u306E\u5F62 ? fitRowsWidth(stateW, \u884C) : stateW;
+        const boxW = \u8A2D\u8A08\u306E\u5F62 ? fitRowsWidth(stateW, \u884C, resolveTextMetrics(preset.textMetrics)) : stateW;
         return { s, \u884C, \u5370, laneId, boxW, stack: \u683C\u5B50 ? s.row ?? 0 : 0 };
       });
       const \u7BC0\u70B9\u306E\u4E2D\u8EAB = \u7BC0\u70B9.map((m) => ({
@@ -34818,7 +35315,11 @@ function infrastructure(preset) {
   const laneW = preset.laneWidth ?? 380;
   const tone = preset.defaultTone ?? "accent";
   const style = preset.defaultStyle ?? "solid";
-  const b = diagram(preset.id, { topic: preset.topic, type: "infrastructure" });
+  const b = diagram(preset.id, {
+    topic: preset.topic,
+    textMetrics: preset.textMetrics,
+    type: "infrastructure"
+  });
   const colLaneIds = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let connIdx = 0;
@@ -34899,7 +35400,12 @@ function classDiagram(preset) {
   const classW = resolveStorageBoxW(preset.classWidth, "classDiagram", "classWidth");
   const \u56F3\u306E\u65E2\u5B9A = preset.defaultTone;
   const \u7E1E\u3092\u6577\u304F = preset.rowStripe ?? true;
-  const b = diagram(preset.id, { topic: preset.topic, palette: preset.palette, type: "class" });
+  const b = diagram(preset.id, {
+    topic: preset.topic,
+    palette: preset.palette,
+    textMetrics: preset.textMetrics,
+    type: "class"
+  });
   const classes = [];
   const phaseActivate = [];
   const \u7BB1 = [];
@@ -34925,7 +35431,7 @@ function classDiagram(preset) {
           rows.push(stripAccess(m));
           rowMarks.push({ shape: "chevron", filled: isPublic(m) });
         }
-        const boxW = fitRowsWidth(classW, rows);
+        const boxW = fitRowsWidth(classW, rows, resolveTextMetrics(preset.textMetrics));
         const laneId = c.col !== void 0 ? `col-${c.col}` : `lane-${c.id}`;
         return { c, rows, rowMarks, boxW, laneId, stack: c.col !== void 0 ? c.row ?? 0 : 0 };
       });
@@ -34988,7 +35494,7 @@ function classDiagram(preset) {
 }
 function tree(preset) {
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic, type: "tree" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "tree" });
   const treeNodes = [];
   const api = {
     node(n) {
@@ -35027,7 +35533,7 @@ function tree(preset) {
 function userJourney(preset) {
   const canvasW = preset.stepWidth ? preset.stepWidth * 2 : 720;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic, type: "journey" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "journey" });
   const steps = [];
   const api = {
     step(s) {
@@ -35067,7 +35573,7 @@ function mindMap(preset) {
   const canvasW = preset.branchWidth ? preset.branchWidth * 2 : 720;
   const canvasH = 480;
   const diagramType = "mind";
-  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: diagramType });
   const branches = [];
   const api = {
     branch(br) {
@@ -35111,7 +35617,7 @@ function mindMap(preset) {
 function funnel(preset) {
   const canvasW = toGridSize(preset.stageWidth ?? 560);
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic, type: "funnel" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "funnel" });
   const stages = [];
   const api = {
     stage(s) {
@@ -35149,7 +35655,7 @@ function funnel(preset) {
 function quadrant(preset) {
   const canvasW = 640;
   const canvasH = 480;
-  const b = diagram(preset.id, { topic: preset.topic, type: "quadrant" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "quadrant" });
   const items = [];
   const api = {
     item(it) {
@@ -35200,7 +35706,7 @@ function chart(preset) {
   const canvasH = toGridSize(
     preset.type === "pie" || preset.type === "gauge" || preset.type === "radial" || preset.type === "stat" || preset.type === "waffle" || preset.type === "stacked-bar" ? 320 : 360
   );
-  const b = diagram(preset.id, { topic: preset.topic, type: "chart" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "chart" });
   const data = [];
   const kindMap = {
     line: "chart-line",
@@ -35250,7 +35756,7 @@ function gantt(preset) {
   const canvasW = preset.laneWidth ? preset.laneWidth * 2 : 720;
   const canvasH = 360;
   const tone = preset.defaultTone ?? "teal";
-  const b = diagram(preset.id, { topic: preset.topic, type: "gantt" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "gantt" });
   const tasks = [];
   const api = {
     task(t) {
@@ -35318,7 +35824,7 @@ function flowchart(preset) {
   const laneW = preset.laneWidth ?? 380;
   const tone = preset.defaultTone ?? "accent";
   const \u7E26\u306B\u7A4D\u3080 = (preset.direction ?? "horizontal") === "vertical";
-  const b = diagram(preset.id, { topic: preset.topic, type: "flowchart" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "flowchart" });
   const laneToId = /* @__PURE__ */ new Map();
   const laneStackCount = /* @__PURE__ */ new Map();
   if (\u7E26\u306B\u7A4D\u3080) {
@@ -35393,7 +35899,7 @@ var NET_KIND_LABEL = {
 function network(preset) {
   const laneW = preset.laneWidth ?? 320;
   const tone = preset.defaultTone ?? "info";
-  const b = diagram(preset.id, { topic: preset.topic, type: "network" });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: "network" });
   const colLaneIds = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let edgeIdx = 0;
@@ -35444,7 +35950,7 @@ function stateMachine2(preset) {
   const laneW = boxLaneW(stateW);
   const tone = preset.defaultTone ?? "accent";
   const diagramType = "state";
-  const b = diagram(preset.id, { topic: preset.topic, type: diagramType });
+  const b = diagram(preset.id, { topic: preset.topic, textMetrics: preset.textMetrics, type: diagramType });
   const stateOrder = /* @__PURE__ */ new Map();
   const phaseActivate = [];
   let transIdx = 0;
@@ -35523,6 +36029,6 @@ function slugify(s) {
   return s.toLowerCase().replace(/[^a-z0-9぀-ゟ゠-ヿ一-龯]+/g, "-").replace(/^-|-$/g, "");
 }
 
-export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLASS_RELATION_LOOK, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDiagramThumbnail, CdlDiagramView, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, EDGE_HEADS, EDGE_HEAD_DEFAULT, EDGE_HEAD_FILLS, EDGE_HEAD_FILL_DEFAULT, EDGE_LABEL_TEXT, EDGE_REVEALS, EDGE_REVEAL_DEFAULT, EDGE_STUB_OUT, EDGE_STYLES, ER_CARDINALITY_HEAD, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, FSM_ACTION_MARK, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, NODE_KINDS, PERF_BUDGET_TOTAL_MS, PERF_SLOWEST_SAMPLE, RELATION_FOCUSES, RELATION_FOCUS_DEFAULT, ROW_GAP_VARIANCE_TOL, SEQUENCE_MESSAGE_LOOK, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, TARGET_LABEL_PATH_DIST, TONES, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeEventBindingKey, computeFormulaKey, computeInputSignalKey, computeScrollProgress, computeScrollTriggerKey, computeStateValues, computeViewportScale, computed, countEdgeCrossings, countOrderCrossings, createFormulaComputeds, createInputSignals, createInteractiveSignalsAccessor, createScrollProgressHandle, createScrollProgressSignals, diagram, drawsFigureTitle, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, hasInteractivePrimitives, infrastructure, inputDefaultValue, interpolate, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, orderNodes, parseFormula, pointRectEdgeDistance, pointToSegmentDistance2 as pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, relatedFocusSet, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveLabelClearanceAfterPathPasses, resolveLang, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, segmentsIntersect2 as segmentsIntersect, sequence, sequenceBoardMetrics, sequenceStepId, signal, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx, 木の札の幅 };
+export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLASS_RELATION_LOOK, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDiagramThumbnail, CdlDiagramView, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, EDGE_HEADS, EDGE_HEAD_DEFAULT, EDGE_HEAD_FILLS, EDGE_HEAD_FILL_DEFAULT, EDGE_LABEL_TEXT, EDGE_REVEALS, EDGE_REVEAL_DEFAULT, EDGE_STUB_OUT, EDGE_STYLES, ER_CARDINALITY_HEAD, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, FSM_ACTION_MARK, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, NODE_KINDS, PERF_BUDGET_TOTAL_MS, PERF_SLOWEST_SAMPLE, RELATION_FOCUSES, RELATION_FOCUS_DEFAULT, ROW_GAP_VARIANCE_TOL, SEQUENCE_MESSAGE_LOOK, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, TARGET_LABEL_PATH_DIST, TONES, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeEventBindingKey, computeFormulaKey, computeInputSignalKey, computeScrollProgress, computeScrollTriggerKey, computeStateValues, computeViewportScale, computed, countEdgeCrossings, countOrderCrossings, createFormulaComputeds, createInputSignals, createInteractiveSignalsAccessor, createScrollProgressHandle, createScrollProgressSignals, diagram, drawsFigureTitle, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, hasInteractivePrimitives, infrastructure, inputDefaultValue, interpolate, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, orderNodes, parseFormula, pointRectEdgeDistance, pointToSegmentDistance2 as pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, relatedFocusSet, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveLabelClearanceAfterPathPasses, resolveLang, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, resolveTextMetrics, segmentsIntersect2 as segmentsIntersect, sequence, sequenceBoardMetrics, sequenceStepId, signal, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx, 木の札の幅 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map