@cardenelabs/cdl 0.107.0 → 0.109.0

package/dist/react.cjs

@@ -3194,6 +3194,111 @@ function requiredRowsWidth(rows, kind) {
   if (kind === void 0) return Math.ceil(Math.max(storage, generic));
   return Math.ceil(kind === "storage" ? storage : generic);
 }
+
+// src/kinds/compact-title.ts
+function estimateTextWidth(text, fontSize) {
+  let w = 0;
+  for (const ch of text) {
+    const isFullWidth = /[\u3000-\u9FFF\uFF00-\uFFEF]/.test(ch);
+    w += fontSize * (isFullWidth ? 1.05 : 0.62);
+  }
+  return w;
+}
+function fitTextSize(text, maxWidth, targetSize, minSize) {
+  let size = targetSize;
+  while (size > minSize && estimateTextWidth(text, size) > maxWidth) {
+    size -= 1;
+  }
+  return size;
+}
+var COMPACT_MAX_H = 100;
+var COMPACT_PADDING_X = 16;
+var MIN_TEXT_SIZE = 11;
+var ASCENT = 0.72;
+var DESCENT = 0.25;
+var MIN_BAND_H = MIN_TEXT_SIZE * (ASCENT + DESCENT);
+var EYEBROW_BASELINE = 38;
+var EYEBROW_SIZE = 18;
+var EYEBROW_GAP = 8;
+var BOTTOM_INSET = 4;
+var eyebrowBottom = () => EYEBROW_BASELINE + EYEBROW_SIZE * DESCENT;
+var titleBandTop = (hasEyebrow) => eyebrowBottom() + EYEBROW_GAP ;
+var isCompactBox = (h) => h < COMPACT_MAX_H;
+function titlePlacement(node, \u901A\u5E38, opts = {}) {
+  if (!isCompactBox(node.h)) {
+    return { x: \u901A\u5E38.x, y: \u901A\u5E38.y, size: \u901A\u5E38.size, anchor: "start" };
+  }
+  const \u9AD8\u3055 = Math.max(0, node.h);
+  const \u76EE\u5370\u3042\u308A = opts.hasEyebrow === true;
+  const \u4E0A = \u76EE\u5370\u3042\u308A && \u9AD8\u3055 >= eyebrowBottom() ? titleBandTop() : 0;
+  const \u751F\u306E\u5E2F = Math.max(0, \u9AD8\u3055 - \u4E0A);
+  const \u4E0B\u4F59\u767D = \u751F\u306E\u5E2F >= MIN_BAND_H + BOTTOM_INSET ? BOTTOM_INSET : 0;
+  const \u5E2F = \u751F\u306E\u5E2F - \u4E0B\u4F59\u767D;
+  const \u5E45\u3067 = fitTextSize(
+    node.title,
+    Math.max(0, node.w - COMPACT_PADDING_X),
+    \u901A\u5E38.size,
+    MIN_TEXT_SIZE
+  );
+  const \u5E2F\u3067 = Math.floor(\u5E2F / (ASCENT + DESCENT));
+  const size = Math.max(MIN_TEXT_SIZE, Math.min(\u5E45\u3067, \u5E2F\u3067));
+  const \u5B57\u9AD8 = size * (ASCENT + DESCENT);
+  const y = \u5B57\u9AD8 <= \u5E2F ? \u4E0A + \u5E2F / 2 + size * (ASCENT - DESCENT) / 2 : \u4E0A > 0 ? \u4E0A + size * ASCENT : (\u9AD8\u3055 - \u5B57\u9AD8) / 2 + size * ASCENT;
+  return { x: node.w / 2, y, size, anchor: "middle" };
+}
+
+// src/kinds/box-lines.ts
+var \u884C\u9001\u308A\u306E\u6BD4 = 1.15;
+var \u5B57\u306E\u9AD8\u3055\u306E\u6BD4 = 0.72;
+var \u4E0A\u4E0B\u306E\u4F59\u767D = 2;
+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) {
+  if (\u4F7F\u3048\u308B\u5E452 <= 0) return "";
+  if (\u6E2C\u308B(text, fontSize) <= \u4F7F\u3048\u308B\u5E452) return text;
+  const \u7701\u7565 = "\u2026";
+  const \u7701\u7565\u306E\u5E45 = \u6E2C\u308B(\u7701\u7565, fontSize);
+  if (\u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) return "";
+  let \u51FA = "";
+  let \u5E45 = 0;
+  for (const c of \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text)) {
+    const \u5B57\u306E\u5E452 = \u6E2C\u308B(c, fontSize);
+    if (\u5E45 + \u5B57\u306E\u5E452 + \u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) break;
+    \u5E45 += \u5B57\u306E\u5E452;
+    \u51FA += c;
+  }
+  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) {
+  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 };
+}
+function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
+  const \u533A\u5207\u308A = Intl.Segmenter;
+  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) {
+  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;
+  const \u9AD8\u3055 = (rs) => rs.reduce((a, r) => a + r.fontSize * \u884C\u9001\u308A\u306E\u6BD4, 0);
+  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 \u7DCF\u9AD8 = \u9AD8\u3055(\u53CE\u3081\u305F);
+  let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
+  return \u53CE\u3081\u305F.map((r) => {
+    const dy = \u7A4D\u307F + (\u884C\u9001\u308A\u306E\u6BD4 + \u5B57\u306E\u9AD8\u3055\u306E\u6BD4) / 2 * r.fontSize;
+    \u7A4D\u307F += r.fontSize * \u884C\u9001\u308A\u306E\u6BD4;
+    return { ...r, dy };
+  });
+}
 function \u66F8\u3044\u305F\u5024\u304B\u63A7\u3048(\u66F8\u3044\u305F, \u63A7\u3048) {
   const v = (\u66F8\u3044\u305F ?? "").trim();
   return v === "" ? \u63A7\u3048 : v;
@@ -3203,14 +3308,22 @@ function \u5E45\u306E\u500D\u7387(text, size, letterSpacing, \u5E45) {
   const \u5B9F\u5E45 = textWidth(text, size, letterSpacing);
   return \u5B9F\u5E45 > \u5E45 ? \u5E45 / \u5B9F\u5E45 : 1;
 }
+function \u8AAD\u3081\u308B\u4E0B\u9650\u306E\u500D\u7387(\u5927\u304D\u3055) {
+  return \u5927\u304D\u3055 > MIN_TITLE_FONT_SIZE ? MIN_TITLE_FONT_SIZE / \u5927\u304D\u3055 : 0;
+}
+function \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u984C, \u5927\u304D\u3055, \u5B57\u9593, \u5E45\u4E0A\u9650, \u6E2C\u308B) {
+  const \u4E0B\u9650 = \u8AAD\u3081\u308B\u4E0B\u9650\u306E\u500D\u7387(\u5927\u304D\u3055);
+  if (!(\u4E0B\u9650 > 0) || !(\u5E45\u4E0A\u9650 > 0)) return 0;
+  return \u5E45\u3067\u5207\u308B(\u984C, \u5927\u304D\u3055 * \u4E0B\u9650, \u5E45\u4E0A\u9650, (u, f) => \u6E2C\u308B(u, f, \u5B57\u9593 * \u4E0B\u9650)) === "" ? 0 : \u4E0B\u9650;
+}
 var TITLE_MAX = 18;
 var TITLE_MIN = 9;
 var TITLE_RATIO = 0.17;
 var SUB_RATIO = 0.72;
 var LINE_GAP = 3;
 var BOTTOM_PAD = 4;
-var ASCENT = 0.72;
-var DESCENT = 0.25;
+var ASCENT2 = 0.72;
+var DESCENT2 = 0.25;
 var ART_GAP = 4;
 var ART_MIN_BAND = 45;
 var \u843D\u3068\u3057\u3066\u3082\u63CF\u304F\u7A2E\u5225 = {
@@ -3275,9 +3388,9 @@ function labelPlan(node) {
     y -= \u540D\u524D\u5927 + LINE_GAP;
     const \u80A9\u66F8 = \u80A9\u66F8\u3042\u308A2 ? { y, size: \u5C0F\u3055\u3044\u5B57 } : null;
     const \u4E0A\u306E\u884C = \u80A9\u66F8 ?? \u540D\u524D;
-    return { \u540D\u524D, \u8AAC\u660E, \u80A9\u66F8, \u4E0A\u7AEF: \u4E0A\u306E\u884C.y - \u4E0A\u306E\u884C.size * ASCENT };
+    return { \u540D\u524D, \u8AAC\u660E, \u80A9\u66F8, \u4E0A\u7AEF: \u4E0A\u306E\u884C.y - \u4E0A\u306E\u884C.size * ASCENT2 };
   };
-  const \u5165\u308B = (\u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2) => \u7A4D\u3080(1, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, 1 * DESCENT).\u4E0A\u7AEF >= \u5929;
+  const \u5165\u308B = (\u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2) => \u7A4D\u3080(1, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, 1 * DESCENT2).\u4E0A\u7AEF >= \u5929;
   let \u8AAC\u660E\u3042\u308A = Boolean(node.subtitle);
   let \u80A9\u66F8\u3042\u308A = Boolean(node.eyebrow);
   const \u843D\u3068\u3057\u305F = [];
@@ -3295,14 +3408,14 @@ function labelPlan(node) {
     for (let size = \u4E0A\u9650; size >= 1; size--) {
       const \u5C0F\u3055\u3044\u5B572 = Math.max(1, Math.round(size * SUB_RATIO));
       const \u4E0B\u306E\u884C\u5927 = \u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B572 : size;
-      if (\u7A4D\u3080(size, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u306E\u884C\u5927 * DESCENT).\u4E0A\u7AEF >= \u5929) {
+      if (\u7A4D\u3080(size, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u306E\u884C\u5927 * DESCENT2).\u4E0A\u7AEF >= \u5929) {
         \u540D\u524D\u5927 = size;
         break;
       }
     }
-    if (\u540D\u524D\u5927 === 0) \u540D\u524D\u5927 = \u9AD8\u3055 / (ASCENT + DESCENT);
+    if (\u540D\u524D\u5927 === 0) \u540D\u524D\u5927 = \u9AD8\u3055 / (ASCENT2 + DESCENT2);
     const \u5C0F\u3055\u3044\u5B57 = Math.max(1, Math.round(\u540D\u524D\u5927 * SUB_RATIO));
-    const \u5F35\u308A\u51FA\u3057 = (\u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B57 : \u540D\u524D\u5927) * DESCENT;
+    const \u5F35\u308A\u51FA\u3057 = (\u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B57 : \u540D\u524D\u5927) * DESCENT2;
     const \u4F59\u308A = Math.max(0, \u7A4D\u3080(\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u5F35\u308A\u51FA\u3057).\u4E0A\u7AEF - \u5929);
     const \u4E0B\u4F59\u767D = Math.min(Math.max(BOTTOM_PAD, \u5F35\u308A\u51FA\u3057), \u5F35\u308A\u51FA\u3057 + \u4F59\u308A);
     return \u7A4D\u3080(\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u4F59\u767D);
@@ -3362,16 +3475,19 @@ function bodyBand(node, opt) {
   const h = Math.max(0, \u7BB1h - \u7E26\u4F59\u767D * ky);
   return { x, y, w, h, cx: x + w / 2, cy: y + h / 2, \u53F3: x + w, \u5E95: y + h };
 }
-function fitLabel(band, block, pos) {
+function fitLabel(band, block, pos, \u6A2A\u306E\u4E0B\u9650 = 0) {
   const \u7E26 = block.\u4E0A + block.\u4E0B;
   const \u6A2A = Math.max(0, block.\u5E45);
   if (!(\u7E26 > 0)) return { k: 1, x: pos.x, y: pos.y };
   if (!(band.h > 0) || !(band.w > 0)) return { k: 0, x: band.x + band.w / 2, y: band.y };
-  const k = Math.min(1, band.h / \u7E26, \u6A2A > 0 ? band.w / \u6A2A : 1);
+  const \u6A2A\u3067 = \u6A2A > 0 ? Math.max(band.w / \u6A2A, \u6A2A\u306E\u4E0B\u9650) : 1;
+  const k = Math.min(1, band.h / \u7E26, \u6A2A\u3067);
   const \u534A = \u6A2A * k / 2;
   return {
     k,
-    x: Math.max(band.x + \u534A, Math.min(pos.x, band.x + band.w - \u534A)),
+    // 下限で止めた塊は帯より広い。 その時は帯の中央に置いて左右へ均等に出す =
+    // 寄せの式をそのまま当てると片側だけに出る (`compact-title.ts` と同じ判断)
+    x: \u534A * 2 > band.w ? band.x + band.w / 2 : Math.max(band.x + \u534A, Math.min(pos.x, band.x + band.w - \u534A)),
     y: Math.max(band.y + block.\u4E0A * k, Math.min(pos.y, band.y + band.h - block.\u4E0B * k))
   };
 }
@@ -3424,111 +3540,6 @@ function \u6253\u3061\u6D88\u3057\u306E\u500D\u7387(\u500D\u7387, \u5B57\u3089)
   return Math.max(1, Math.min(\u623B\u3057, \u4E0A\u9650));
 }
 
-// src/kinds/compact-title.ts
-function estimateTextWidth(text, fontSize) {
-  let w = 0;
-  for (const ch of text) {
-    const isFullWidth = /[\u3000-\u9FFF\uFF00-\uFFEF]/.test(ch);
-    w += fontSize * (isFullWidth ? 1.05 : 0.62);
-  }
-  return w;
-}
-function fitTextSize(text, maxWidth, targetSize, minSize) {
-  let size = targetSize;
-  while (size > minSize && estimateTextWidth(text, size) > maxWidth) {
-    size -= 1;
-  }
-  return size;
-}
-var COMPACT_MAX_H = 100;
-var COMPACT_PADDING_X = 16;
-var MIN_TEXT_SIZE = 11;
-var ASCENT2 = 0.72;
-var DESCENT2 = 0.25;
-var MIN_BAND_H = MIN_TEXT_SIZE * (ASCENT2 + DESCENT2);
-var EYEBROW_BASELINE = 38;
-var EYEBROW_SIZE = 18;
-var EYEBROW_GAP = 8;
-var BOTTOM_INSET = 4;
-var eyebrowBottom = () => EYEBROW_BASELINE + EYEBROW_SIZE * DESCENT2;
-var titleBandTop = (hasEyebrow) => eyebrowBottom() + EYEBROW_GAP ;
-var isCompactBox = (h) => h < COMPACT_MAX_H;
-function titlePlacement(node, \u901A\u5E38, opts = {}) {
-  if (!isCompactBox(node.h)) {
-    return { x: \u901A\u5E38.x, y: \u901A\u5E38.y, size: \u901A\u5E38.size, anchor: "start" };
-  }
-  const \u9AD8\u3055 = Math.max(0, node.h);
-  const \u76EE\u5370\u3042\u308A = opts.hasEyebrow === true;
-  const \u4E0A = \u76EE\u5370\u3042\u308A && \u9AD8\u3055 >= eyebrowBottom() ? titleBandTop() : 0;
-  const \u751F\u306E\u5E2F = Math.max(0, \u9AD8\u3055 - \u4E0A);
-  const \u4E0B\u4F59\u767D = \u751F\u306E\u5E2F >= MIN_BAND_H + BOTTOM_INSET ? BOTTOM_INSET : 0;
-  const \u5E2F = \u751F\u306E\u5E2F - \u4E0B\u4F59\u767D;
-  const \u5E45\u3067 = fitTextSize(
-    node.title,
-    Math.max(0, node.w - COMPACT_PADDING_X),
-    \u901A\u5E38.size,
-    MIN_TEXT_SIZE
-  );
-  const \u5E2F\u3067 = Math.floor(\u5E2F / (ASCENT2 + DESCENT2));
-  const size = Math.max(MIN_TEXT_SIZE, Math.min(\u5E45\u3067, \u5E2F\u3067));
-  const \u5B57\u9AD8 = size * (ASCENT2 + DESCENT2);
-  const y = \u5B57\u9AD8 <= \u5E2F ? \u4E0A + \u5E2F / 2 + size * (ASCENT2 - DESCENT2) / 2 : \u4E0A > 0 ? \u4E0A + size * ASCENT2 : (\u9AD8\u3055 - \u5B57\u9AD8) / 2 + size * ASCENT2;
-  return { x: node.w / 2, y, size, anchor: "middle" };
-}
-
-// src/kinds/box-lines.ts
-var \u884C\u9001\u308A\u306E\u6BD4 = 1.15;
-var \u5B57\u306E\u9AD8\u3055\u306E\u6BD4 = 0.72;
-var \u4E0A\u4E0B\u306E\u4F59\u767D = 2;
-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) {
-  if (\u4F7F\u3048\u308B\u5E452 <= 0) return "";
-  if (\u6E2C\u308B(text, fontSize) <= \u4F7F\u3048\u308B\u5E452) return text;
-  const \u7701\u7565 = "\u2026";
-  const \u7701\u7565\u306E\u5E45 = \u6E2C\u308B(\u7701\u7565, fontSize);
-  if (\u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) return "";
-  let \u51FA = "";
-  let \u5E45 = 0;
-  for (const c of \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text)) {
-    const \u5B57\u306E\u5E452 = \u6E2C\u308B(c, fontSize);
-    if (\u5E45 + \u5B57\u306E\u5E452 + \u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) break;
-    \u5E45 += \u5B57\u306E\u5E452;
-    \u51FA += c;
-  }
-  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) {
-  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 };
-}
-function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
-  const \u533A\u5207\u308A = Intl.Segmenter;
-  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) {
-  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;
-  const \u9AD8\u3055 = (rs) => rs.reduce((a, r) => a + r.fontSize * \u884C\u9001\u308A\u306E\u6BD4, 0);
-  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 \u7DCF\u9AD8 = \u9AD8\u3055(\u53CE\u3081\u305F);
-  let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
-  return \u53CE\u3081\u305F.map((r) => {
-    const dy = \u7A4D\u307F + (\u884C\u9001\u308A\u306E\u6BD4 + \u5B57\u306E\u9AD8\u3055\u306E\u6BD4) / 2 * r.fontSize;
-    \u7A4D\u307F += r.fontSize * \u884C\u9001\u308A\u306E\u6BD4;
-    return { ...r, dy };
-  });
-}
-
 // src/render/tone.ts
 var TONE = {
   accent: "var(--cdl-tone-accent, #2d6a8f)",
@@ -10904,12 +10915,13 @@ function CdlHeader({
   stateValues,
   states,
   onJumpPhase,
-  headingLevel = 3
+  headingLevel = 3,
+  showTopic = true
 }) {
   const HeadingTag = `h${headingLevel}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-[var(--cdl-divider,#d4d4d8)]/35 px-7 py-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-5 flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-bold uppercase tracking-[0.2em]", style: { color: "var(--cdl-text-accent, #2d6a8f)" }, children: topic }),
+      showTopic && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-bold uppercase tracking-[0.2em]", style: { color: "var(--cdl-text-accent, #2d6a8f)" }, children: topic }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [
         phases.map((p, idx) => {
           const active = idx === phaseIdx;
@@ -11841,7 +11853,7 @@ function CardNode({ node, active }) {
   const textAnchor = compact ? "middle" : "start";
   const subtitleY = 124 - \u305A\u3089\u3057;
   const \u6700\u5927\u306E\u884C\u9001\u308A = SUBTITLE_SIZE * \u884C\u9001\u308A\u306E\u500D\u7387;
-  const \u4E8C\u884C\u304C\u5165\u308B = !compact && subtitleY - \u6700\u5927\u306E\u884C\u9001\u308A / 2 - SUBTITLE_SIZE * ASCENT2 > titleY + titleSize * DESCENT2 && subtitleY + \u6700\u5927\u306E\u884C\u9001\u308A / 2 + SUBTITLE_SIZE * DESCENT2 <= node.h - 4;
+  const \u4E8C\u884C\u304C\u5165\u308B = !compact && subtitleY - \u6700\u5927\u306E\u884C\u9001\u308A / 2 - SUBTITLE_SIZE * ASCENT > titleY + titleSize * DESCENT && subtitleY + \u6700\u5927\u306E\u884C\u9001\u308A / 2 + SUBTITLE_SIZE * DESCENT <= node.h - 4;
   const \u8AAC\u660E = node.subtitle ? \u8AAC\u660E\u6587\u3092\u5272\u308A\u4ED8\u3051\u308B(node.subtitle, availableW, { \u4E8C\u884C\u307E\u3067: \u4E8C\u884C\u304C\u5165\u308B }) : void 0;
   const subtitleSize = \u8AAC\u660E?.size ?? 21;
   const \u884C\u9001\u308A = subtitleSize * \u884C\u9001\u308A\u306E\u500D\u7387;
@@ -16138,20 +16150,22 @@ var EYEBROW_TRACKING = 2;
 var SUB_SIZE = 11;
 var SUB_GAP = 4;
 function labelBlock(node, pos, size, band) {
-  const \u4E0A = node.eyebrow ? size + EYEBROW_GAP2 + EYEBROW_SIZE2 * ASCENT : size * ASCENT;
-  const \u4E0B = node.subtitle ? size + SUB_GAP + SUB_SIZE * DESCENT : size * DESCENT;
+  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
   );
-  const { k, x, y: baseline } = fitLabel(band, { \u4E0A, \u4E0B, \u5E45 }, pos);
+  const \u4E0B\u9650 = \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", size, 0, band.w, textWidth);
+  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);
   const k = \u584A.k;
   const x = \u584A.x;
+  const \u5207\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593 = 0) => \u5E45\u3067\u5207\u308B(t, \u5927\u304D\u3055 * k, band.w, (u, f) => textWidth(u, f, \u5B57\u9593 * k));
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
@@ -16163,7 +16177,7 @@ function commonLabel(node, pos, size, band) {
         letterSpacing: EYEBROW_TRACKING * k,
         textAnchor: "middle",
         fill: "var(--cdl-tone-accent, #2d6a8f)",
-        children: node.eyebrow
+        children: \u5207\u308B(node.eyebrow, EYEBROW_SIZE2, EYEBROW_TRACKING)
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -16176,7 +16190,7 @@ function commonLabel(node, pos, size, band) {
         fontWeight: 700,
         textAnchor: "middle",
         fill: "var(--cdl-text, #1a1f2a)",
-        children: node.title
+        children: \u5207\u308B(node.title ?? "", size)
       }
     ),
     node.subtitle && /* @__PURE__ */ jsxRuntime.jsx(
@@ -16187,7 +16201,7 @@ function commonLabel(node, pos, size, band) {
         fontSize: SUB_SIZE * k,
         textAnchor: "middle",
         fill: "var(--cdl-text-dim, #5a6270)",
-        children: node.subtitle
+        children: \u5207\u308B(node.subtitle, SUB_SIZE)
       }
     )
   ] });
@@ -16522,7 +16536,9 @@ function planLabel(node, cx, \u5E45\u4E0A\u9650, plan) {
     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
   );
-  const k = \u5E45 > 0 && \u5E45\u4E0A\u9650 > 0 ? Math.min(1, \u5E45\u4E0A\u9650 / \u5E45) : 1;
+  const \u4E0B\u9650 = \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", plan.\u540D\u524D.size, 0, \u5E45\u4E0A\u9650, textWidth);
+  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) => \u5E45\u3067\u5207\u308B(t, \u5927\u304D\u3055 * k, \u5E45\u4E0A\u9650, (u, f) => textWidth(u, f, \u5B57\u9593 * k));
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
@@ -16534,7 +16550,7 @@ function planLabel(node, cx, \u5E45\u4E0A\u9650, plan) {
         letterSpacing: EYEBROW_TRACKING * k,
         textAnchor: "middle",
         fill: "var(--cdl-tone-accent, #2d6a8f)",
-        children: node.eyebrow
+        children: \u5207\u308B(node.eyebrow, plan.\u80A9\u66F8.size, EYEBROW_TRACKING)
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -16547,7 +16563,7 @@ function planLabel(node, cx, \u5E45\u4E0A\u9650, plan) {
         fontWeight: 700,
         textAnchor: "middle",
         fill: "var(--cdl-text, #1a1f2a)",
-        children: node.title
+        children: \u5207\u308B(node.title ?? "", plan.\u540D\u524D.size)
       }
     ),
     node.subtitle && plan.\u8AAC\u660E && /* @__PURE__ */ jsxRuntime.jsx(
@@ -16558,7 +16574,7 @@ function planLabel(node, cx, \u5E45\u4E0A\u9650, plan) {
         fontSize: plan.\u8AAC\u660E.size * k,
         textAnchor: "middle",
         fill: "var(--cdl-text-dim, #5a6270)",
-        children: node.subtitle
+        children: \u5207\u308B(node.subtitle, plan.\u8AAC\u660E.size)
       }
     )
   ] });
@@ -17481,17 +17497,19 @@ var externalLabel = (node, cx, bottomY) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRu
 var LABEL_EYEBROW_SPACING = 2;
 function \u5E45\u306B\u53CE\u3081\u308B2(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
   const \u5E45 = textWidth(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
-  const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
-  return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
+  const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, textWidth))) : 1;
+  const size = \u5927\u304D\u3055 * \u500D\u7387;
+  const spacing = \u5B57\u9593 * \u500D\u7387;
+  return { size, spacing, text: \u5E45\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);
   const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B2(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: node.eyebrow }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: node.title }),
-    node.subtitle && plan.\u8AAC\u660E && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u8AAC\u660E.y, fontSize: \u8AAC.size, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
+    node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: \u540D.text }),
+    node.subtitle && plan.\u8AAC\u660E && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u8AAC\u660E.y, fontSize: \u8AAC.size, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: \u8AAC.text })
   ] });
 }
 var RACK_SLOT_TOP = 20;
@@ -18286,13 +18304,22 @@ function blockchainNodeExtent(strokeWidth) {
   return { \u4E0A: \u7E26, \u4E0B: \u7E26, \u5DE6: \u6A2A, \u53F3: \u6A2A };
 }
 function bottomLabel2(node, cx, plan) {
-  const \u80A9\u66F8\u500D\u7387 = node.eyebrow && plan.\u80A9\u66F8 ? \u5E45\u306E\u500D\u7387(node.eyebrow, plan.\u80A9\u66F8.size, 2, node.w) : 1;
-  const \u540D\u524D\u500D\u7387 = \u5E45\u306E\u500D\u7387(node.title, plan.\u540D\u524D.size, 0, node.w);
-  const \u8AAC\u660E\u500D\u7387 = node.subtitle && plan.\u8AAC\u660E ? \u5E45\u306E\u500D\u7387(node.subtitle, plan.\u8AAC\u660E.size, 0, node.w) : 1;
+  const \u53CE\u3081\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593) => {
+    const \u6E2C\u308B = (u, f, ls) => \u5B57\u306E\u5E45(u, f) + ls * [...u].length;
+    const \u500D\u7387 = Math.max(\u5E45\u306E\u500D\u7387(t, \u5927\u304D\u3055, \u5B57\u9593, node.w), \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(t, \u5927\u304D\u3055, \u5B57\u9593, node.w, \u6E2C\u308B));
+    const size = \u5927\u304D\u3055 * \u500D\u7387;
+    return { \u500D\u7387, text: \u5E45\u3067\u5207\u308B(t, size, node.w, (u, f) => \u5B57\u306E\u5E45(u, f) + \u5B57\u9593 * \u500D\u7387 * [...u].length) };
+  };
+  const \u80A9 = node.eyebrow && plan.\u80A9\u66F8 ? \u53CE\u3081\u308B(node.eyebrow, plan.\u80A9\u66F8.size, 2) : { \u500D\u7387: 1, text: node.eyebrow ?? "" };
+  const \u540D = \u53CE\u3081\u308B(node.title ?? "", plan.\u540D\u524D.size, 0);
+  const \u8AAC = node.subtitle && plan.\u8AAC\u660E ? \u53CE\u3081\u308B(node.subtitle, plan.\u8AAC\u660E.size, 0) : { \u500D\u7387: 1, text: node.subtitle ?? "" };
+  const \u80A9\u66F8\u500D\u7387 = \u80A9.\u500D\u7387;
+  const \u540D\u524D\u500D\u7387 = \u540D.\u500D\u7387;
+  const \u8AAC\u660E\u500D\u7387 = \u8AAC.\u500D\u7387;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: plan.\u80A9\u66F8.size * \u80A9\u66F8\u500D\u7387, fontWeight: 700, letterSpacing: 2 * \u80A9\u66F8\u500D\u7387, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: node.eyebrow }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: plan.\u540D\u524D.size * \u540D\u524D\u500D\u7387, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: node.title }),
-    node.subtitle && plan.\u8AAC\u660E && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u8AAC\u660E.y, fontSize: plan.\u8AAC\u660E.size * \u8AAC\u660E\u500D\u7387, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
+    node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: plan.\u80A9\u66F8.size * \u80A9\u66F8\u500D\u7387, fontWeight: 700, letterSpacing: 2 * \u80A9\u66F8\u500D\u7387, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: plan.\u540D\u524D.size * \u540D\u524D\u500D\u7387, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: \u540D.text }),
+    node.subtitle && plan.\u8AAC\u660E && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u8AAC\u660E.y, fontSize: plan.\u8AAC\u660E.size * \u8AAC\u660E\u500D\u7387, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: \u8AAC.text })
   ] });
 }
 function EthereumDiamond({ cx, cy, h, colors }) {
@@ -18901,17 +18928,19 @@ function \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
 }
 function \u5E45\u306B\u53CE\u3081\u308B3(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
   const \u5E45 = \u5B57\u5E45(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
-  const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
-  return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
+  const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u5B57\u5E45))) : 1;
+  const size = \u5927\u304D\u3055 * \u500D\u7387;
+  const spacing = \u5B57\u9593 * \u500D\u7387;
+  return { size, spacing, text: \u5E45\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);
   const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B3(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: node.eyebrow }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: node.title }),
-    node.subtitle && plan.\u8AAC\u660E && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u8AAC\u660E.y, fontSize: \u8AAC.size, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
+    node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: \u540D.text }),
+    node.subtitle && plan.\u8AAC\u660E && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u8AAC\u660E.y, fontSize: \u8AAC.size, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: \u8AAC.text })
   ] });
 }
 var BANK_PEDIMENT_H = 44;
@@ -19384,17 +19413,19 @@ function \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593) {
 }
 function \u5E45\u306B\u53CE\u3081\u308B4(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45) {
   const \u5E45 = \u5B57\u5E452(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593);
-  const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, \u7BB1\u5E45 / \u5E45) : 1;
-  return { size: \u5927\u304D\u3055 * \u500D\u7387, spacing: \u5B57\u9593 * \u500D\u7387 };
+  const \u500D\u7387 = \u5E45 > 0 && \u7BB1\u5E45 > 0 ? Math.min(1, Math.max(\u7BB1\u5E45 / \u5E45, \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, \u5B57\u5E452))) : 1;
+  const size = \u5927\u304D\u3055 * \u500D\u7387;
+  const spacing = \u5B57\u9593 * \u500D\u7387;
+  return { size, spacing, text: \u5E45\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);
   const \u8AAC = \u5E45\u306B\u53CE\u3081\u308B4(node.subtitle ?? "", plan.\u8AAC\u660E?.size ?? 0, 0, node.w);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: node.eyebrow }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: node.title }),
-    node.subtitle && plan.\u8AAC\u660E && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u8AAC\u660E.y, fontSize: \u8AAC.size, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: node.subtitle })
+    node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { "data-cdl-role": "node-label", x: cx, y: plan.\u540D\u524D.y, fontSize: \u540D.size, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text, #1a1f2a)", children: \u540D.text }),
+    node.subtitle && plan.\u8AAC\u660E && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u8AAC\u660E.y, fontSize: \u8AAC.size, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: \u8AAC.text })
   ] });
 }
 var DROP_SHADOW_D = 4;
@@ -29603,6 +29634,11 @@ function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hideMiniP
     return mergeStateValues(baseStateValues, interactive.stateOverrides);
   }, [isInteractive, baseStateValues, interactive.stateOverrides]);
   const \u5024\u306E\u540D\u524D = react.useMemo(() => \u5024\u306E\u540D\u524D\u306E\u8868\u3092\u4F5C\u308B(diagram.inputs), [diagram.inputs]);
+  const \u56F3\u304C\u8A71\u984C\u3092\u63CF\u304F = react.useMemo(() => {
+    const \u8A71\u984C = laid.topic.trim();
+    if (\u8A71\u984C === "") return false;
+    return laid.nodes.some((n) => drawsFigureTitle(n.kind) && (n.title ?? "").trim() === \u8A71\u984C);
+  }, [laid.nodes, laid.topic]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -29627,7 +29663,8 @@ function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hideMiniP
               timeline.goto(idx);
               timeline.play();
             },
-            headingLevel
+            headingLevel,
+            showTopic: !\u56F3\u304C\u8A71\u984C\u3092\u63CF\u304F
           }
         ),
         isInteractive && interactive.panel,