@cardenelabs/cdl 0.108.0 → 0.110.0

package/CHANGELOG.md

@@ -5,6 +5,64 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.110.0] - 2026-09-30
+
+### Fixed
+
+- **題の下限が、題以外の行まで切っていた** (#957)
+
+  0.108.0 (#953) で入れた読める下限 (11px) の効き方が、題以外の行に及んでいた。
+  引く側 (見本帳) を 0.109.0 に上げると、記法に書いた補いの行が切られる図が出た。
+
+  `shape-diamond` の 260x260 の箱で実測した内訳。
+
+  | 版 | 肩書 | 題 | 説明 |
+  |---|---|---|---|
+  | 0.107.0 相当 | 8.32 `方針` | 10.40 `再送の判定` | 7.63 `間隔を倍に広げる · 最大 3 …` |
+  | 0.109.0 | 8.80 `方針` | 11.00 `再送の判定` | 8.07 `間隔を倍に広げる · 最大 …` |
+  | 0.110.0 (本版) | 8.32 `方針` | 10.40 `再送の判定` | 7.63 `間隔を倍に広げる · 最大 3 回` |
+
+  2 つ直した。
+
+  **1 つ目 = 塊の倍率は一番広い行で決まるのに、下限を題の大きさから出していた**。
+  この箱で一番広いのは説明の行 (14 字) で、題は 5 字しかない。 題を 0.6px 上げるために
+  説明から `3 回` を落としていた = 払うのと得るのが別の行になる。
+
+  下限を当てるのは **題が一番広い行のときだけ** にした。 行ごとに倍率を出す 4 種
+  (`shape-commerce` / `shape-finance` / `shape-hardware` / `shape-blockchain`) では、
+  下限を当てるのは題の行だけにした (#953 の対象外 scope と同じ)。
+
+  **2 つ目 = ちょうど収まる行を丸め誤差で切っていた**。
+  塊の倍率は一番広い行が帯にちょうど収まる値なので、切る側の測り直しが浮動小数で
+  髪の毛 1 本ぶん上回ると、収まっている行を切る。 切る判定に相対の余裕 (1e-9) を入れた。
+
+  これで **切られるのは、自分が入らない行だけ** になる。
+  題が一番広い行のときに下限で止めて切る振る舞い (#953) は変えていない。
+
+## [0.109.0] - 2026-09-30
+
+### Fixed
+
+- **頭の帯が、図の描いた題と同じ字をもう 1 度出していた** (#955)
+
+  `CdlDiagramView` は既定で頭の帯を出し、その左上に図の話題 (`topic`) を小さな字で置く。
+  0.96.0 (#930) から図表 15 種が自分の題を箱の上に描くようになったため、話題と題が同じ
+  文字列の図では同じ字が 2 か所に並んでいた。
+
+  実測は `chart-bar` 1 つの図で 2 件 (帯の `div` と図の `text`)。 `hideHeader` を渡す側
+  (見本帳) には出ず、**engine の既定で描く側** に出る。 この repo の `thumbnail.tsx` も
+  `hideHeader={false}` を渡している。
+
+  図が話題と同じ字を既に描いているなら、帯は話題を出さない。 判定は 0.103.0 (#943) で
+  出した `drawsFigureTitle` から導く = 種別の一覧を手で持つと、図表が増えた日にずれる。
+
+  落とすのは話題の 1 行だけで、帯そのものと段の印は残る。 印は `ml-auto` で右へ寄せてある
+  ので並びも動かない。 話題は図の代替文 (`buildDiagramAltText`) に入るため、読み上げでは
+  引き続き届く。
+
+  箱の題 (`node-label`) が話題と同じ場合は出し続ける。 図表と違い箱は図の中の 1 つに
+  すぎず、話題を名乗る場所が他に無い。
+
 ## [0.108.0] - 2026-09-30
 
 ### Fixed
@@ -4359,7 +4417,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.108.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.110.0...HEAD
+[0.110.0]: https://github.com/cardene777/cdl/compare/v0.109.0...v0.110.0
+[0.109.0]: https://github.com/cardene777/cdl/compare/v0.108.0...v0.109.0
 [0.108.0]: https://github.com/cardene777/cdl/compare/v0.107.0...v0.108.0
 [0.107.0]: https://github.com/cardene777/cdl/compare/v0.106.0...v0.107.0
 [0.106.0]: https://github.com/cardene777/cdl/compare/v0.105.0...v0.106.0

package/dist/index.cjs

@@ -14704,10 +14704,14 @@ function \u5E45\u306E\u500D\u7387(text, size, letterSpacing, \u5E45) {
 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;
 }
+var \u5207\u308B\u4F59\u88D5 = 1e-9;
+function \u5E2F\u3067\u5207\u308B(text, \u5927\u304D\u3055, \u5E45\u4E0A\u9650, \u6E2C\u308B) {
+  return \u5E45\u3067\u5207\u308B(text, \u5927\u304D\u3055, \u5E45\u4E0A\u9650 * (1 + \u5207\u308B\u4F59\u88D5), \u6E2C\u308B);
+}
 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;
+  return \u5E2F\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;
@@ -23476,12 +23480,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;
@@ -28720,7 +28725,8 @@ function labelBlock(node, pos, size, band) {
     node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE2, EYEBROW_TRACKING) : 0,
     node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0
   );
-  const \u4E0B\u9650 = \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", size, 0, band.w, textWidth);
+  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 { 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 };
 }
@@ -28728,7 +28734,7 @@ 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));
+  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));
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
@@ -29099,9 +29105,10 @@ 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 \u4E0B\u9650 = \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(node.title ?? "", plan.\u540D\u524D.size, 0, \u5E45\u4E0A\u9650, textWidth);
+  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 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));
+  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));
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
@@ -30058,16 +30065,17 @@ 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) {
+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 \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 \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(\u6587\u5B57\u5217, \u5927\u304D\u3055, \u5B57\u9593, \u7BB1\u5E45, textWidth) : 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: \u5E45\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => textWidth(u, f, spacing)) };
+  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);
+  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 /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
@@ -30867,14 +30875,15 @@ function blockchainNodeExtent(strokeWidth) {
   return { \u4E0A: \u7E26, \u4E0B: \u7E26, \u5DE6: \u6A2A, \u53F3: \u6A2A };
 }
 function bottomLabel2(node, cx, plan) {
-  const \u53CE\u3081\u308B = (t, \u5927\u304D\u3055, \u5B57\u9593) => {
+  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 \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 \u4E0B\u9650 = \u984C\u304B ? \u5207\u3063\u3066\u53CE\u307E\u308B\u4E0B\u9650(t, \u5927\u304D\u3055, \u5B57\u9593, node.w, \u6E2C\u308B) : 0;
+    const \u500D\u7387 = Math.max(\u5E45\u306E\u500D\u7387(t, \u5927\u304D\u3055, \u5B57\u9593, node.w), \u4E0B\u9650);
     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) };
+    return { \u500D\u7387, text: \u5E2F\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 \u540D = \u53CE\u3081\u308B(node.title ?? "", plan.\u540D\u524D.size, 0, true);
   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;
@@ -31489,16 +31498,17 @@ 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) {
+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 \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 \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;
+  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: \u5E45\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u5B57\u5E45(u, f, spacing)) };
+  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);
+  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 /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
@@ -31974,16 +31984,17 @@ 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) {
+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 \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 \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;
+  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: \u5E45\u3067\u5207\u308B(\u6587\u5B57\u5217, size, \u7BB1\u5E45, (u, f) => \u5B57\u5E452(u, f, spacing)) };
+  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);
+  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 /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     node.eyebrow && plan.\u80A9\u66F8 && /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx, y: plan.\u80A9\u66F8.y, fontSize: \u80A9.size, fontWeight: 700, letterSpacing: \u80A9.spacing, textAnchor: "middle", fill: "var(--cdl-tone-accent, #2d6a8f)", children: \u80A9.text }),
@@ -33587,6 +33598,11 @@ function CdlDiagramView({ diagram: diagram2, laid: laidProp, hideHeader = false,
     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(diagram2.inputs), [diagram2.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",
     {
@@ -33611,7 +33627,8 @@ function CdlDiagramView({ diagram: diagram2, laid: laidProp, hideHeader = false,
               timeline.goto(idx);
               timeline.play();
             },
-            headingLevel
+            headingLevel,
+            showTopic: !\u56F3\u304C\u8A71\u984C\u3092\u63CF\u304F
           }
         ),
         isInteractive && interactive.panel,