@cardenelabs/cdl 0.82.0 → 0.102.0

package/dist/react.js

@@ -361,22 +361,22 @@ function resolveLang(value) {
   return value === "ja" ? "ja" : "en";
 }
 var en = {
-  /** `shape-terminal` の 2 行目 (命令の出力) */
   /*
-   * `shape-terminal` の出力の行。
+   * `shape-terminal` の出力の行を **書かない時** の控え (#927)。
    *
    * **いちばん長い行が絵の倍率を決める** (#891)。 端末の中身は自分の座標で組んでから箱へ
    * 収めるので、この行が長いほど全部の字が小さくなる。 120x110 の箱では 20 字の版で
-   * 7.71 world まで落ちていた。
+   * 7.71 world まで落ちていた。 書いた説明を通すようになったので、長い説明を渡した図でも
+   * 同じことが起きる。
    */
   "terminal.output": "\u2192 12 chunks",
-  /** `shape-code-block` の札の file 名 */
+  /** `shape-code-block` の札の file 名を **書かない時** の控え (#927) */
   "codeBlock.fileName": "utils.ts",
   /** `shape-kanban-card` の課題の番号 */
   "kanbanCard.id": "CAR-1111",
   /** `shape-kanban-card` の状態の札 */
   "kanbanCard.status": "IN PROG",
-  /** `shape-kanban-card` の題の下の説明 */
+  /** `shape-kanban-card` の題の下の説明を **書かない時** の控え (#927) */
   "kanbanCard.task": "shape-driven kind \u5B9F\u88C5",
   /** `shape-kanban-card` の期日 */
   "kanbanCard.due": "Jul 10",
@@ -899,6 +899,11 @@ function measureTextWidth(text, opts = {}) {
   const w = advanceEmSum * fontSize + letterSpacing * charCount;
   return 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 = {
@@ -933,17 +938,7 @@ var LABEL_PILL_PAD_X = 18;
 function hasRenderedLabel(e) {
   return Boolean(e.label?.trim() || e.sub?.trim());
 }
-var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
-  // 時系列のやり取り (#578)。 図を丸ごと描く種別で、描くのは面々の名前と言づての語。
-  // 箱の `title` は使わない
-  "sequence-board",
-  // 形だけを描く (DynShapeNode)
-  "dyn-rect",
-  "dyn-circle",
-  "dyn-arc",
-  "dyn-wave",
-  "dyn-polygon",
-  // payload を自前 layout して描く (label は payload 側が持つ)
+var KINDS_DRAWING_OWN_PAYLOAD = /* @__PURE__ */ new Set([
   "chart-pie",
   "chart-line",
   "chart-bar",
@@ -958,22 +953,27 @@ var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
   "funnel-stages",
   "quadrant-matrix",
   "tree-hierarchy",
-  "journey-map",
-  // 印そのものが意味を持つ (#560)
+  "journey-map"
+]);
+function drawsFigureTitle(kind) {
+  return KINDS_DRAWING_OWN_PAYLOAD.has(kind ?? "");
+}
+var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
+  "sequence-board",
   "mark-start",
   "mark-end"
 ]);
 function rendersTitleText(kind) {
   return !KINDS_WITHOUT_TITLE_TEXT.has(kind ?? "");
 }
-var KINDS_FITTING_OWN_TITLE = /* @__PURE__ */ new Set(["shape-blockchain-block"]);
+var KINDS_FITTING_OWN_TITLE = /* @__PURE__ */ new Set([
+  "shape-blockchain-block",
+  ...KINDS_DRAWING_OWN_PAYLOAD
+]);
 function fitsOwnTitleWidth(kind) {
   return KINDS_FITTING_OWN_TITLE.has(kind ?? "");
 }
-var KINDS_WITH_ROW_TEXT = /* @__PURE__ */ new Set([
-  // 専用の表組み (StorageNode)
-  "storage",
-  // 汎用描画 (GenericNode)
+var KINDS_DRAWN_BY_GENERIC = [
   "person",
   "user-group",
   "admin",
@@ -995,10 +995,44 @@ var KINDS_WITH_ROW_TEXT = /* @__PURE__ */ new Set([
   "oracle",
   "merkle-tree",
   "decision"
+];
+var KINDS_WITH_ROW_TEXT = /* @__PURE__ */ new Set([
+  // 専用の表組み (StorageNode)
+  "storage",
+  ...KINDS_DRAWN_BY_GENERIC
 ]);
 function rendersRows(kind) {
   return KINDS_WITH_ROW_TEXT.has(kind ?? "");
 }
+var KINDS_DRAWING_ONLY_SHAPE = [
+  "dyn-rect",
+  "dyn-circle",
+  "dyn-arc",
+  "dyn-wave",
+  "dyn-polygon"
+];
+var KINDS_WITHOUT_EYEBROW_TEXT = /* @__PURE__ */ new Set([
+  ...KINDS_DRAWING_ONLY_SHAPE,
+  ...KINDS_WITHOUT_TITLE_TEXT
+]);
+function rendersEyebrow(kind) {
+  return !KINDS_WITHOUT_EYEBROW_TEXT.has(kind ?? "");
+}
+var KINDS_WITHOUT_SUBTITLE_TEXT = /* @__PURE__ */ new Set([
+  ...KINDS_DRAWING_OWN_PAYLOAD,
+  ...KINDS_WITHOUT_TITLE_TEXT
+]);
+function rendersSubtitle(kind) {
+  return !KINDS_WITHOUT_SUBTITLE_TEXT.has(kind ?? "");
+}
+var KINDS_WITH_VALUE_TEXT = /* @__PURE__ */ new Set([
+  // 面々の絵 (ActorNode)
+  "actor",
+  ...KINDS_DRAWN_BY_GENERIC
+]);
+function rendersValue(kind) {
+  return KINDS_WITH_VALUE_TEXT.has(kind ?? "");
+}
 function rowBaselineY(kind, index) {
   if (!rendersRows(kind)) return null;
   return kind === "storage" ? ROW_TOP_STORAGE + index * ROW_PITCH_STORAGE : ROW_TOP_GENERIC + genericTextShift(kind) + index * ROW_PITCH_GENERIC;
@@ -3041,6 +3075,15 @@ function requiredRowsWidth(rows, kind) {
   if (kind === void 0) return Math.ceil(Math.max(storage, generic));
   return Math.ceil(kind === "storage" ? storage : generic);
 }
+function \u66F8\u3044\u305F\u5024\u304B\u63A7\u3048(\u66F8\u3044\u305F, \u63A7\u3048) {
+  const v = (\u66F8\u3044\u305F ?? "").trim();
+  return v === "" ? \u63A7\u3048 : v;
+}
+function \u5E45\u306E\u500D\u7387(text, size, letterSpacing, \u5E45) {
+  if (!(\u5E45 > 0) || !(size > 0)) return 1;
+  const \u5B9F\u5E45 = textWidth(text, size, letterSpacing);
+  return \u5B9F\u5E45 > \u5E45 ? \u5E45 / \u5B9F\u5E45 : 1;
+}
 var TITLE_MAX = 18;
 var TITLE_MIN = 9;
 var TITLE_RATIO = 0.17;
@@ -3067,7 +3110,10 @@ var \u843D\u3068\u3057\u3066\u3082\u63CF\u304F\u7A2E\u5225 = {
     "shape-code-block",
     "shape-message-bubble",
     "shape-gear",
-    // hardware 系のうち固有 layout を持つもの
+    // 絵の中の字の口に肩書を通す 2 種別 (#941)。 状態の札 / 見出しの帯の右 に描く
+    "shape-kanban-card",
+    "shape-blockchain-block",
+    // hardware / blockchain 系のうち固有 layout を持つもの
     "shape-iot-sensor",
     "shape-robot-arm"
   ]),
@@ -3084,6 +3130,10 @@ var \u843D\u3068\u3057\u3066\u3082\u63CF\u304F\u7A2E\u5225 = {
     "shape-window",
     "shape-message-bubble",
     "shape-gear",
+    // 絵の中の字の口に説明を通す 3 種別 (#927)。 札の file 名 / 出力の行 / 課題の 1 行 に描く
+    "shape-terminal",
+    "shape-code-block",
+    "shape-kanban-card",
     // hardware / blockchain 系のうち固有 layout を持つもの
     "shape-iot-sensor",
     "shape-robot-arm",
@@ -4318,7 +4368,9 @@ function needsResolve(raw) {
   return typeof raw !== "number" || !Number.isFinite(raw);
 }
 function resolveChartData(data, values) {
-  if (!data.some((d) => needsResolve(d.value) || d.previous !== void 0 && needsResolve(d.previous)))
+  if (!data.some(
+    (d) => needsResolve(d.value) || d.previous !== void 0 && needsResolve(d.previous)
+  ))
     return data;
   return data.map((d) => {
     const v = resolveBoundNumber(d.value, values, 0);
@@ -4329,14 +4381,24 @@ function resolveChartData(data, values) {
   });
 }
 function resolveFunnelData(stages, values) {
-  if (!stages.some((s) => needsResolve(s.count))) return stages;
+  const \u8AAD\u3080 = stages.some(
+    (s) => needsResolve(s.count) || (s.subtitle?.includes("{") ?? false)
+  );
+  if (!\u8AAD\u3080) return stages;
   return stages.map((s) => {
     const c = resolveBoundNumber(s.count, values, 0);
-    return c.ok ? { ...s, count: c.value } : { ...s, count: c.value, unresolved: true };
+    const sub = s.subtitle === void 0 ? void 0 : resolveBoundText(s.subtitle, values);
+    const \u7D20 = {
+      ...s,
+      count: c.value,
+      ...sub ? { subtitle: sub.value } : {}
+    };
+    return c.ok && (sub?.ok ?? true) ? \u7D20 : { ...\u7D20, unresolved: true };
   });
 }
 function resolveGanttData(tasks, values) {
-  if (!tasks.some((t) => needsResolve(t.startIdx) || needsResolve(t.endIdx))) return tasks;
+  if (!tasks.some((t) => needsResolve(t.startIdx) || needsResolve(t.endIdx)))
+    return tasks;
   return tasks.map((t) => {
     const start = resolveBoundNumber(t.startIdx, values, 0);
     const end = resolveBoundNumber(t.endIdx, values, start.value);
@@ -4344,16 +4406,48 @@ function resolveGanttData(tasks, values) {
     return start.ok && end.ok ? next : { ...next, unresolved: true };
   });
 }
+function \u5EA7\u6A19\u306E\u8C61\u9650(x, y) {
+  const \u53F3 = x >= 0.5;
+  const \u4E0A = y >= 0.5;
+  if (\u4E0A) return \u53F3 ? "topRight" : "topLeft";
+  return \u53F3 ? "bottomRight" : "bottomLeft";
+}
+var \u57DF\u306B\u53CE\u3081\u308B = (v) => Math.min(1, Math.max(0, v));
 function resolveQuadrantData(data, values) {
   const items = data.items;
-  if (items.every((i) => QUADRANT_KEYS.includes(i.quadrant))) {
-    return data;
-  }
+  const \u8FD1\u9053 = !items.some((i) => i.at !== void 0) && !items.some((i) => i.subtitle?.includes("{") ?? false) && items.every((i) => QUADRANT_KEYS.includes(i.quadrant ?? ""));
+  if (\u8FD1\u9053) return data;
   return {
     ...data,
     items: items.map((i) => {
-      const q = resolveBoundEnum(i.quadrant, values, QUADRANT_KEYS, QUADRANT_FALLBACK);
-      return q.ok ? { ...i, quadrant: q.value } : { ...i, quadrant: q.value, unresolved: true };
+      if (i.at !== void 0) {
+        const x = resolveBoundNumber(i.at.x, values, 0.5);
+        const y = resolveBoundNumber(i.at.y, values, 0.5);
+        const \u7F6E\u304F = { x: \u57DF\u306B\u53CE\u3081\u308B(x.value), y: \u57DF\u306B\u53CE\u3081\u308B(y.value) };
+        const sub2 = i.subtitle === void 0 ? void 0 : resolveBoundText(i.subtitle, values);
+        const \u7D202 = {
+          id: i.id,
+          title: i.title,
+          at: \u7F6E\u304F,
+          quadrant: \u5EA7\u6A19\u306E\u8C61\u9650(\u7F6E\u304F.x, \u7F6E\u304F.y),
+          ...sub2 ? { subtitle: sub2.value } : {}
+        };
+        return x.ok && y.ok && (sub2?.ok ?? true) ? \u7D202 : { ...\u7D202, unresolved: true };
+      }
+      const q = resolveBoundEnum(
+        i.quadrant ?? "",
+        values,
+        QUADRANT_KEYS,
+        QUADRANT_FALLBACK
+      );
+      const sub = i.subtitle === void 0 ? void 0 : resolveBoundText(i.subtitle, values);
+      const \u7D20 = {
+        id: i.id,
+        title: i.title,
+        quadrant: q.value,
+        ...sub ? { subtitle: sub.value } : {}
+      };
+      return q.ok && (sub?.ok ?? true) ? \u7D20 : { ...\u7D20, unresolved: true };
     })
   };
 }
@@ -4473,13 +4567,10 @@ var PAD_TOP = 40;
 var PAD_RIGHT = 24;
 var PAD_BOTTOM = 40;
 var PAD_LEFT = 24;
+var \u6728\u306E\u679D\u306E\u592A\u3055 = (\u6BB5) => Math.max(1.1, 2.6 - \u6BB5 * 0.45);
 function \u6728\u306E\u4E2D\u8EAB(node, stateValues = {}) {
   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);
 }
 function \u6728\u306E\u884C(n) {
   return [
@@ -4538,7 +4629,7 @@ function TreeNode({
             fill: "none",
             stroke: TONE.accent,
             strokeOpacity: 0.55,
-            strokeWidth: 1.5,
+            strokeWidth: \u6728\u306E\u679D\u306E\u592A\u3055(e.depth),
             strokeLinejoin: "round",
             ...\u4F38\u3070\u3059dash(drawing, \u679D\u306E\u4F38\u3073)
           }
@@ -4673,11 +4764,20 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
     if (kids.length === 0) return 1;
     return kids.reduce((sum, k) => sum + leafCount(k.id, seen), 0);
   };
-  const totalLeaves = Math.max(roots.reduce((sum, r) => sum + leafCount(r.id, /* @__PURE__ */ new Set()), 0), 1);
+  const totalLeaves = Math.max(
+    roots.reduce((sum, r) => sum + leafCount(r.id, /* @__PURE__ */ new Set()), 0),
+    1
+  );
   const depthGap = canvasH / Math.max(maxDepth + 1, 1);
   const slotW = canvasW / totalLeaves;
   const nodeH = Math.min(38, depthGap * 0.7);
   const nodeW = Math.min(140, slotW * 0.85);
+  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));
+    return Math.min(Math.max(\u8981\u308B, nodeW), slotW * 0.92);
+  };
   const posOf = /* @__PURE__ */ new Map();
   const nodes = [];
   const placed = /* @__PURE__ */ new Set();
@@ -4701,7 +4801,7 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
       ...n.subtitle !== void 0 ? { subtitle: n.subtitle } : {},
       x,
       y,
-      w: nodeW,
+      w: \u7BB1\u306E\u5E45(n, depth),
       h: nodeH,
       depth,
       ...n.unresolved ? { unresolved: true } : {}
@@ -4752,6 +4852,10 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
 }
 var MIND_TONES = ["accent", "teal", "success", "warning", "info", "error"];
 var MIND_BOX_GAP = 24;
+var \u679D\u306E\u592A\u3055 = (\u6BB5) => Math.max(1.2, 3.2 - \u6BB5 * 0.7);
+var BRANCH_BOX_H_MAX = 48;
+var SUB_BOX_H_MAX = 40;
+var ROW_GAP_MAX = 96;
 var MIND_PAD = 40;
 function \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues = {}) {
   const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : void 0;
@@ -4808,7 +4912,7 @@ function MindMapNode({
           d: e.d,
           fill: "none",
           stroke: toneColor2(e.tone),
-          strokeWidth: 2.5,
+          strokeWidth: \u679D\u306E\u592A\u3055(e.depth),
           strokeOpacity: 0.55,
           strokeLinecap: "round",
           ...\u4F38\u3070\u3059dash(drawing, \u679D\u306E\u4F38\u3073)
@@ -4819,13 +4923,19 @@ function MindMapNode({
     layout2.nodes.map((n) => {
       if (!\u7BB1\u304C\u51FA\u308B(n.depth)) return null;
       const \u6750\u6599 = \u653E\u5C04\u306E\u884C(n);
-      const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, n.w, n.h);
       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 \u67A0\u306A\u3057 = !n.isRoot && n.isLeaf;
+      const \u5916\u3078 = n.side === "right";
+      const \u6587\u5B57\u306Ex = \u67A0\u306A\u3057 ? n.x + (\u5916\u3078 ? -n.w / 2 : n.w / 2) : n.x;
+      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 \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: [
-        /* @__PURE__ */ jsx(
+        \u67A0\u306A\u3057 ? null : /* @__PURE__ */ jsx(
           "rect",
           {
             x: n.x - n.w / 2,
@@ -4842,11 +4952,11 @@ function MindMapNode({
           "text",
           {
             "data-cdl-role": r.\u5F79\u5272 === "subtitle" ? "mind-node-subtitle" : void 0,
-            x: n.x,
+            x: \u6587\u5B57\u306Ex,
             y: n.y + r.dy,
             fontSize: r.fontSize,
             fontWeight: r.\u5F79\u5272 === "title" ? n.isRoot ? 700 : 600 : 500,
-            textAnchor: "middle",
+            textAnchor: \u6587\u5B57\u306E\u5BC4\u305B,
             fill: \u6587\u5B57\u306E\u8272,
             opacity: r.\u5F79\u5272 === "subtitle" ? 0.85 : void 0,
             children: r.text
@@ -4860,11 +4970,11 @@ function MindMapNode({
           /* @__PURE__ */ jsx(
             "text",
             {
-              x: n.x,
+              x: \u6587\u5B57\u306Ex,
               y: n.y + 5,
               fontSize: \u53CE\u3081\u305F\u540D\u524D.fontSize,
               fontWeight: n.isRoot ? 700 : 600,
-              textAnchor: "middle",
+              textAnchor: \u6587\u5B57\u306E\u5BC4\u305B,
               fill: \u6587\u5B57\u306E\u8272,
               children: \u53CE\u3081\u305F\u540D\u524D.text
             }
@@ -4874,6 +4984,13 @@ function MindMapNode({
     })
   ] });
 }
+function \u63CF\u304F\u6A2A\u306E\u7AEF(n) {
+  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 = measureTextWidth(\u540D\u524D.text, { fontSize: \u540D\u524D.fontSize});
+  return n.side === "right" ? [\u8D77\u70B9, \u8D77\u70B9 + \u5E45] : [\u8D77\u70B9 - \u5E45, \u8D77\u70B9];
+}
 function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
   const nodes = [];
   const edges = [];
@@ -4889,6 +5006,9 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
     w: rootW,
     h: rootH,
     isRoot: true,
+    // 中心は枝を持たなくても枠を描く = 図の起点なので、無いと何から広がるのかが読めない
+    isLeaf: false,
+    side: "right",
     // 中心は起点なので段数 0 (cdl#520)
     depth: 0,
     ...mindData.unresolved ? { unresolved: true } : {}
@@ -4925,7 +5045,6 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
   const firstCount = firstLevel.length;
   const leftCount = Math.ceil(firstCount / 2);
   const branchW = 130;
-  const branchH = 38;
   const subBranchW = 100;
   const subBranchH = 30;
   const subDepthOf = (id, seen) => {
@@ -4959,22 +5078,27 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
   const subOffset = (subDepth) => subDepth <= 0 ? 0 : step1 + (subDepth - 1) * stepN;
   const leftBranches = firstLevel.slice(0, leftCount);
   const rightBranches = firstLevel.slice(leftCount);
-  const leavesOfSide = (brs) => Math.max(1, brs.reduce((sum, br) => sum + leafCountOf(br.id, /* @__PURE__ */ new Set()), 0));
+  const leavesOfSide = (brs) => Math.max(
+    1,
+    brs.reduce((sum, br) => sum + leafCountOf(br.id, /* @__PURE__ */ new Set()), 0)
+  );
   const sideLaneCount = Math.max(leavesOfSide(leftBranches), leavesOfSide(rightBranches));
-  const laneBandH = Math.min(canvasH * 0.9, sideLaneCount * (subBranchH + 14));
-  const rowGap = sideLaneCount > 1 ? laneBandH / (sideLaneCount - 1) : subBranchH + 14;
-  const effSubH = Math.min(subBranchH, rowGap * 0.7);
-  const effBranchH = Math.min(branchH, rowGap * 0.7);
-  const laneTop = cy - canvasH / 2 + effSubH / 2;
-  const laneBottom = cy + canvasH / 2 - effSubH / 2;
+  const laneBandH = Math.max(0, canvasH - BRANCH_BOX_H_MAX);
+  const rowGap = sideLaneCount > 1 ? Math.min(laneBandH / (sideLaneCount - 1), ROW_GAP_MAX) : subBranchH + 14;
+  const effSubH = Math.min(SUB_BOX_H_MAX, rowGap * 0.7);
+  const effBranchH = Math.min(BRANCH_BOX_H_MAX, rowGap * 0.7);
+  const \u7AEF\u306E\u4F59\u308A = Math.max(effSubH, effBranchH) / 2;
+  const laneTop = cy - canvasH / 2 + \u7AEF\u306E\u4F59\u308A;
+  const laneBottom = cy + canvasH / 2 - \u7AEF\u306E\u4F59\u308A;
+  const \u4F7F\u3046\u9AD8\u3055 = (sideLaneCount - 1) * rowGap;
   const laneY = (lane) => {
     if (sideLaneCount <= 1) return cy;
-    const y = cy - laneBandH / 2 + lane * rowGap;
+    const y = cy - \u4F7F\u3046\u9AD8\u3055 / 2 + lane * rowGap;
     return Math.max(laneTop, Math.min(laneBottom, y));
   };
-  const rootEdgeXFor = (isLeft) => {
+  const rootEdgeXFor = (isLeft, \u4E2D\u5FC3\u306Ex) => {
     const half = nodeHalfW.get(mindData.rootId) ?? rootW / 2;
-    return cx + (isLeft ? -half : half);
+    return \u4E2D\u5FC3\u306Ex + (isLeft ? -half : half);
   };
   const placeSubtree = (node, subDepth, isLeft, tone, placed, laneRef) => {
     placed.add(node.id);
@@ -4990,7 +5114,14 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
       laneRef.cursor += 1;
     } else {
       const ys = kids.map(
-        (k, i) => placeSubtree(k, subDepth + 1, isLeft, myTone ?? MIND_TONES[i % MIND_TONES.length], placed, laneRef)
+        (k, i) => placeSubtree(
+          k,
+          subDepth + 1,
+          isLeft,
+          myTone ?? MIND_TONES[i % MIND_TONES.length],
+          placed,
+          laneRef
+        )
       );
       y = (ys[0] + ys[ys.length - 1]) / 2;
     }
@@ -5006,6 +5137,8 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
       depth: subDepth + 1,
       tone: myTone,
       isRoot: false,
+      isLeaf: kids.length === 0,
+      side: isLeft ? "left" : "right",
       ...node.unresolved ? { unresolved: true } : {}
     });
     nodePos.set(node.id, { x, y });
@@ -5015,7 +5148,8 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
     return y;
   };
   const placeSide = (brs, isLeft, toneBase) => {
-    const laneRef = { cursor: 0 };
+    const \u8449\u6570 = brs.reduce((sum, br) => sum + leafCountOf(br.id, /* @__PURE__ */ new Set()), 0);
+    const laneRef = { cursor: Math.max(0, (sideLaneCount - \u8449\u6570) / 2) };
     const placed = /* @__PURE__ */ new Set();
     brs.forEach((br, i) => {
       const tone = br.tone ?? MIND_TONES[(toneBase + i) % MIND_TONES.length];
@@ -5045,6 +5179,23 @@ 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);
+      \u5DE6\u7AEF = Math.min(\u5DE6\u7AEF, l);
+      \u53F3\u7AEF = Math.max(\u53F3\u7AEF, r);
+    }
+    const \u5BC4\u305B = Math.round((cx - \u5DE6\u7AEF - (\u53F3\u7AEF - cx)) / 2);
+    if (Number.isFinite(\u5BC4\u305B) && \u5BC4\u305B !== 0) {
+      for (const n of nodes) {
+        n.x += \u5BC4\u305B;
+        nodePos.set(n.id, { x: n.x, y: n.y });
+      }
+    }
+  }
+  const rootX = nodePos.get(mindData.rootId)?.x ?? cx;
   const \u6BB5\u6570 = new Map(nodes.map((n) => [n.id, n.depth]));
   for (const br of mindData.branches) {
     const childPos = nodePos.get(br.id);
@@ -5055,7 +5206,7 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
     const childDepth = \u6BB5\u6570.get(br.id) ?? 1;
     const parentDepth = \u6BB5\u6570.get(br.parent) ?? 0;
     if (br.parent === mindData.rootId) {
-      const startX = rootEdgeXFor(isLeft);
+      const startX = rootEdgeXFor(isLeft, rootX);
       const endX = childPos.x + (isLeft ? childHalfW : -childHalfW);
       edges.push({
         d: makeCurve(startX, cy, endX, childPos.y),
@@ -5235,6 +5386,7 @@ function emptyCounts() {
     "node-inside-lane": 0,
     "shape-label-dropped": 0,
     "box-line-dropped": 0,
+    "node-field-unsupported": 0,
     "edge-inside-viewbox": 0,
     "lane-label-inside-viewbox": 0,
     "lane-label-overlap": 0,
@@ -6404,6 +6556,28 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
       `node "${n.id}" (kind=${n.kind ?? "\u672A\u6307\u5B9A"}) \u304C rows ${n.rows.length} \u884C\u3092\u6301\u3064\u304C\u3001 \u3053\u306E\u7A2E\u5225\u306F\u884C\u3092\u63CF\u304B\u306A\u3044 (\u66F8\u3044\u305F\u5185\u5BB9\u304C\u753B\u9762\u306B\u51FA\u306A\u3044)`
     );
   }
+  const \u6B04\u306E\u63CF\u304D\u5206\u3051 = [
+    { \u6B04: "eyebrow", \u8A9E: "\u80A9\u66F8", \u63CF\u304F\u304B: rendersEyebrow },
+    { \u6B04: "subtitle", \u8A9E: "\u8AAC\u660E", \u63CF\u304F\u304B: rendersSubtitle },
+    { \u6B04: "value", \u8A9E: "\u5024", \u63CF\u304F\u304B: rendersValue }
+  ];
+  for (const n of diag.nodes) {
+    if (!isRenderedNode(n)) continue;
+    for (const { \u6B04, \u8A9E, \u63CF\u304F\u304B } of \u6B04\u306E\u63CF\u304D\u5206\u3051) {
+      const \u66F8\u3044\u305F = (n[\u6B04] ?? "").trim();
+      if (\u66F8\u3044\u305F === "") continue;
+      if (\u63CF\u304F\u304B(n.kind)) continue;
+      push(
+        "node-field-unsupported",
+        `node "${n.id}" (kind=${n.kind ?? "\u672A\u6307\u5B9A"}) \u304C ${\u6B04} (${\u8A9E}) \u306B "${\u66F8\u3044\u305F}" \u3092\u6301\u3064\u304C\u3001 \u3053\u306E\u7A2E\u5225\u306F\u305D\u306E\u6B04\u3092\u63CF\u304B\u306A\u3044 (\u66F8\u3044\u305F\u8A9E\u304C\u753B\u9762\u306B\u51FA\u306A\u3044)`,
+        // 図そのものは正しく描かれており、効かない語が書かれているだけなので警告にする。
+        // 誤り扱いにすると、既に書いている図が 1 枚も通らなくなる (実測 = engine の検査
+        // だけで 8 file が落ちた)。 `rows-not-rendered` は誤り扱いだが、あちらは行が
+        // 箱の主な中身になる種別を相手にしており、落ちた時の図の壊れ方が違う
+        "warn"
+      );
+    }
+  }
   for (const n of diag.nodes) {
     if (!n.rows || n.rows.length === 0) continue;
     if (!rendersRows(n.kind)) continue;
@@ -9893,7 +10067,7 @@ function autoStorageHeight(n, defaultH) {
   if (n.kind !== "storage") return n.h ?? defaultH;
   if (n.h != null) return n.h;
   const \u5370\u3042\u308A = n.rowMarks !== void 0;
-  const \u547C\u3073\u540D\u306E\u5206 = \u5370\u3042\u308A && n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
+  const \u547C\u3073\u540D\u306E\u5206 = n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
   const \u7E70\u308A\u4E0A\u3052 = n.eyebrow ? 0 : \u76EE\u5370\u306A\u3057\u306E\u7E70\u308A\u4E0A\u3052("storage");
   if (!n.rows || n.rows.length === 0) return 115 + \u547C\u3073\u540D\u306E\u5206 - \u7E70\u308A\u4E0A\u3052;
   const \u5FC5\u8981 = requiredRowsHeight("storage", n.rows.length) ?? defaultH;
@@ -10020,22 +10194,33 @@ function layoutNodes(diag, lanes) {
 }
 
 // src/layout/viewbox.ts
+function \u7BB1\u3044\u3063\u3071\u3044\u306B\u63CF\u304F(lane) {
+  return lane.contain === true || lane.lifeline === true;
+}
 function computeViewBox(lanes, nodes, edges, bboxes, viewport) {
+  const \u5E38\u306B\u96A0\u308C\u308B\u7BC0 = new Set(nodes.filter((n) => !isRenderedNode(n)).map((n) => n.id));
   let maxX = 0;
   let maxY = 0;
   let minX = Number.POSITIVE_INFINITY;
   let minY = Number.POSITIVE_INFINITY;
   for (const bbox of bboxes) {
+    if (bbox.kind === "node" && \u5E38\u306B\u96A0\u308C\u308B\u7BC0.has(bbox.id)) continue;
     maxX = Math.max(maxX, bbox.x + bbox.w);
     maxY = Math.max(maxY, bbox.y + bbox.h);
     minX = Math.min(minX, bbox.x);
     minY = Math.min(minY, bbox.y);
   }
   for (const lane of lanes) {
+    if (!\u7BB1\u3044\u3063\u3071\u3044\u306B\u63CF\u304F(lane)) continue;
+    minX = Math.min(minX, lane.x);
+    minY = Math.min(minY, lane.y);
     maxX = Math.max(maxX, lane.x + lane.width);
     maxY = Math.max(maxY, lane.y + lane.height);
   }
   for (const n of nodes) {
+    if (\u5E38\u306B\u96A0\u308C\u308B\u7BC0.has(n.id)) continue;
+    minX = Math.min(minX, n.cx - n.w / 2);
+    minY = Math.min(minY, n.cy - n.h / 2);
     maxX = Math.max(maxX, n.cx + n.w / 2);
     maxY = Math.max(maxY, n.cy + n.h / 2);
   }
@@ -11981,7 +12166,7 @@ function StorageNode({
   const columnDividerX = (leftEndDrawn + rightColX) / 2;
   const columnDividerFits = columnDividerX <= node.w - ROW_PAD_X_PX;
   const \u5370\u3067\u5206\u3051\u308B = node.rowMarks !== void 0;
-  const \u884C\u306E\u4E0B\u3052 = \u5370\u3067\u5206\u3051\u308B && node.subtitle ? SUBTITLE_ROW_SHIFT : 0;
+  const \u884C\u306E\u4E0B\u3052 = node.subtitle ? SUBTITLE_ROW_SHIFT : 0;
   const lastRowBottom = Math.min(
     ROW_TOP_STORAGE + (rows.length - 1) * ROW_PITCH_STORAGE + (rowGlyphDepth("storage") ?? 0),
     node.h - ROW_PAD_X_PX
@@ -12021,8 +12206,7 @@ function StorageNode({
       );
     }),
     node.eyebrow && /* @__PURE__ */ jsx("text", { x: 26, y: 38, fontSize: 18, fontWeight: 700, letterSpacing: 2, fill: accent, children: node.eyebrow }),
-    \u5370\u3067\u5206\u3051\u308B && node.subtitle && // 呼び名は **印で分ける箱でだけ** 出す (#578)。 従来の箱は題の下に区切り線が来るので
-    // 置き場が無い
+    node.subtitle && // 呼び名は書き方によらず出す (#937)。 区切り線を同じ分だけ下げて置き場を作る
     /* @__PURE__ */ jsx(
       "text",
       {
@@ -12053,9 +12237,9 @@ function StorageNode({
       {
         "data-cdl-role": "node-row-divider",
         x1: 26,
-        y1: STORAGE_ROW_DIVIDER_Y,
+        y1: STORAGE_ROW_DIVIDER_Y + \u884C\u306E\u4E0B\u3052,
         x2: node.w - 26,
-        y2: STORAGE_ROW_DIVIDER_Y,
+        y2: STORAGE_ROW_DIVIDER_Y + \u884C\u306E\u4E0B\u3052,
         stroke: "var(--cdl-row-divider, #7e848e)",
         strokeWidth: 1.25
       }
@@ -12065,7 +12249,7 @@ function StorageNode({
       {
         "data-cdl-role": "node-column-divider",
         x1: columnDividerX,
-        y1: STORAGE_ROW_DIVIDER_Y,
+        y1: STORAGE_ROW_DIVIDER_Y + \u884C\u306E\u4E0B\u3052,
         x2: columnDividerX,
         y2: lastRowBottom,
         stroke: "var(--cdl-row-divider, #7e848e)",
@@ -12526,18 +12710,57 @@ function DynShapeNode({
   const strokeColor = shape.stroke ?? "var(--cdl-line, #a89d8f)";
   const fillColor = shape.fill ?? "var(--cdl-fill, #e0e6ef)";
   const activeOpacity = active ? 1 : 0.85;
-  switch (shape.kind) {
-    case "rect":
-      return renderRect(shape, x, y, w, h, stateValues, fillColor, strokeColor, activeOpacity, node);
-    case "circle":
-      return renderCircle(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, activeOpacity);
-    case "arc":
-      return renderArc(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, activeOpacity);
-    case "wave":
-      return /* @__PURE__ */ jsx(WaveShape, { shape, x, y, w, h, stateValues, fillColor, strokeColor, opacity: activeOpacity, node });
-    case "polygon":
-      return renderPolygon(shape, cx, cy, stateValues, fillColor, strokeColor, activeOpacity);
-  }
+  const \u5F62 = (() => {
+    switch (shape.kind) {
+      case "rect":
+        return renderRect(shape, x, y, w, h, stateValues, fillColor, strokeColor, activeOpacity, node);
+      case "circle":
+        return renderCircle(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, activeOpacity);
+      case "arc":
+        return renderArc(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, activeOpacity);
+      case "wave":
+        return /* @__PURE__ */ jsx(WaveShape, { shape, x, y, w, h, stateValues, fillColor, strokeColor, opacity: activeOpacity, node });
+      case "polygon":
+        return renderPolygon(shape, cx, cy, stateValues, fillColor, strokeColor, activeOpacity);
+    }
+  })();
+  const \u540D\u524D = (node.title ?? "").trim();
+  const \u5024 = (node.subtitle ?? "").trim();
+  if (\u540D\u524D === "" && \u5024 === "") return \u5F62;
+  const \u63C3\u3048 = \u7BB1\u3044\u3063\u3071\u3044\u306B\u63CF\u304F2(shape.kind) ? "start" : "middle";
+  return /* @__PURE__ */ jsxs("g", { children: [
+    \u5F62,
+    \u540D\u524D !== "" && /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "shape-name",
+        x: \u63C3\u3048 === "start" ? x : cx,
+        y: y - NAME_GAP,
+        textAnchor: \u63C3\u3048,
+        fontSize: 13,
+        fontWeight: 600,
+        fill: "var(--cdl-text, #23201b)",
+        children: \u540D\u524D
+      }
+    ),
+    \u5024 !== "" && /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "shape-value",
+        x: cx,
+        y: y + h + VALUE_GAP,
+        textAnchor: "middle",
+        fontSize: 12,
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: \u5024
+      }
+    )
+  ] });
+}
+var NAME_GAP = 6;
+var VALUE_GAP = 18;
+function \u7BB1\u3044\u3063\u3071\u3044\u306B\u63CF\u304F2(kind) {
+  return kind === "rect" || kind === "wave";
 }
 function renderRect(shape, x, y, w, h, stateValues, fillColor, strokeColor, opacity, node) {
   const value = resolveNumericAttr(shape.source, stateValues, 0);
@@ -12825,6 +13048,13 @@ function \u5272\u5408\u8868\u8A18(frac) {
   const v = Math.round(frac * 1e3) / 10;
   return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
 }
+function \u5024\u3068\u5272\u5408\u306E\u7D44(\u5024, \u5272\u5408, \u5408\u8A08) {
+  return Math.abs(\u5408\u8A08 - 100) < 1e-9 ? { \u5024: null, \u5272\u5408 } : { \u5024, \u5272\u5408 };
+}
+function \u5024\u3068\u5272\u5408\u306E\u6587\u5B57(\u5024, \u5272\u5408, \u5408\u8A08) {
+  const \u7D44 = \u5024\u3068\u5272\u5408\u306E\u7D44(\u5024, \u5272\u5408, \u5408\u8A08);
+  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);
@@ -13301,6 +13531,18 @@ function sliceColor(tone, idx) {
   if (tone) return TONE[tone];
   return chartSeriesColor(idx);
 }
+function \u5024\u3068\u5272\u5408\u306E\u5B57({
+  \u5024,
+  \u5272\u5408,
+  \u5408\u8A08
+}) {
+  const \u7D44 = \u5024\u3068\u5272\u5408\u306E\u7D44(\u5024, \u5272\u5408, \u5408\u8A08);
+  if (\u7D44.\u5024 === null) return /* @__PURE__ */ jsx("tspan", { "data-cdl-role": "chart-legend-share", children: \u7D44.\u5272\u5408 });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("tspan", { "data-cdl-role": "chart-legend-value", fill: "var(--cdl-text, #1a1f2a)", children: `${\u7D44.\u5024} ` }),
+    /* @__PURE__ */ jsx("tspan", { "data-cdl-role": "chart-legend-share", children: \u7D44.\u5272\u5408 })
+  ] });
+}
 function ChartGaugeNode({
   node,
   active,
@@ -13323,7 +13565,7 @@ function ChartGaugeNode({
   const \u5F27\u3068\u5185\u8A33\u306E\u9593 = 16;
   const \u5370\u306E\u5E452 = 30;
   const \u533A\u753B\u306E\u9593 = 12;
-  const \u6570\u5024\u306E\u884C = (d) => `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u5272\u5408\u8868\u8A18(d.value / total)}`;
+  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 \u884C\u306E\u4EF6\u65702 = Math.min(
@@ -13492,6 +13734,8 @@ function ChartGaugeNode({
       const x = PAD_SIDE + \u5185\u8A33\u306E\u5E45 * \u5217;
       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);
       return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
         /* @__PURE__ */ jsx(
           "rect",
@@ -13515,7 +13759,14 @@ function ChartGaugeNode({
             children: \u5207\u308A\u8A70\u3081\u308B(d.label ?? "", \u53CE\u307E\u308B\u5E45, \u540D\u524D\u306E\u7D1A)
           }
         ),
-        /* @__PURE__ */ jsx("text", { x, y: y + 46, fontSize: \u6570\u5024\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: \u5207\u308A\u8A70\u3081\u308B(\u5185\u8A33\u306E\u6570\u5024[idx] ?? "", \u53CE\u307E\u308B\u5E45, \u6570\u5024\u306E\u7D1A) })
+        /* @__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(
+          \u5024\u3068\u5272\u5408\u306E\u5B57,
+          {
+            \u5024: \u5B9F\u5024\u8868\u8A18(d.value),
+            \u5272\u5408: \u5272\u5408\u8868\u8A18(d.value / total),
+            \u5408\u8A08: total
+          }
+        ) : \u5207\u3063\u305F\u6570\u306E\u884C })
       ] }, `legend-${idx}`);
     })
   ] });
@@ -13554,7 +13805,9 @@ function ChartRadialNode({
   const \u6570\u5024\u306E\u7D1A = 13;
   const \u884C\u306E\u9AD8\u3055 = 42;
   const \u4E00\u89A7\u3068\u5F27\u306E\u9593 = 28;
-  const \u6570\u5024\u306E\u6587\u5B57 = data.map((d) => `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u5272\u5408\u8868\u8A18(d.value / total)}`);
+  const \u6570\u5024\u306E\u6587\u5B57 = data.map(
+    (d) => \u5024\u3068\u5272\u5408\u306E\u6587\u5B57(\u5B9F\u5024\u8868\u8A18(d.value), \u5272\u5408\u8868\u8A18(d.value / total), total)
+  );
   const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E45 + Math.max(
     0,
     ...data.map(
@@ -13566,7 +13819,9 @@ function ChartRadialNode({
   const \u4F7F\u3048\u308B\u539A\u307F = \u5916\u534A\u5F84 * 0.7;
   const \u5E2F1\u672C = \u4F7F\u3048\u308B\u539A\u307F / Math.max(data.length, 1);
   const \u5E2F\u306E\u5E45 = \u5E2F1\u672C * 0.66;
-  const \u5F27\u306Ecx = PAD + \u4E00\u89A7\u306E\u5E45 + \u4E00\u89A7\u3068\u5F27\u306E\u9593 + \u5916\u534A\u5F84;
+  const \u4E2D\u8EAB\u306E\u5E45 = \u4E00\u89A7\u306E\u5E45 + \u4E00\u89A7\u3068\u5F27\u306E\u9593 + \u5916\u534A\u5F84 * 2;
+  const \u4E00\u89A7\u306E\u5DE6 = Math.max(PAD, (node.w - \u4E2D\u8EAB\u306E\u5E45) / 2);
+  const \u5F27\u306Ecx = \u4E00\u89A7\u306E\u5DE6 + \u4E00\u89A7\u306E\u5E45 + \u4E00\u89A7\u3068\u5F27\u306E\u9593 + \u5916\u534A\u5F84;
   const cy = PAD + \u4F7F\u3048\u308B\u9AD8\u3055 / 2;
   const rings = data.map((d, idx) => {
     const frac = d.value / total;
@@ -13641,11 +13896,11 @@ function ChartRadialNode({
     data.map((d, idx) => {
       const y = \u4E00\u89A7\u306E\u59CB\u307E\u308A + \u884C\u306E\u9AD8\u3055 * idx;
       return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-radial-item", children: [
-        /* @__PURE__ */ jsx("rect", { x: PAD, y: y - 11, width: 4, height: 22, rx: 2, fill: arcColor2(d.tone, idx) }),
+        /* @__PURE__ */ jsx("rect", { x: \u4E00\u89A7\u306E\u5DE6, y: y - 11, width: 4, height: 22, rx: 2, fill: arcColor2(d.tone, idx) }),
         /* @__PURE__ */ jsx(
           "text",
           {
-            x: PAD + \u5370\u306E\u5E45,
+            x: \u4E00\u89A7\u306E\u5DE6 + \u5370\u306E\u5E45,
             y: y + 1,
             fontSize: \u540D\u524D\u306E\u7D1A,
             fontWeight: 700,
@@ -13656,11 +13911,18 @@ function ChartRadialNode({
         /* @__PURE__ */ jsx(
           "text",
           {
-            x: PAD + \u5370\u306E\u5E45,
+            x: \u4E00\u89A7\u306E\u5DE6 + \u5370\u306E\u5E45,
             y: y + 20,
             fontSize: \u6570\u5024\u306E\u7D1A,
             fill: "var(--cdl-text-dim, #5a6270)",
-            children: \u6570\u5024\u306E\u6587\u5B57[idx]
+            children: /* @__PURE__ */ jsx(
+              \u5024\u3068\u5272\u5408\u306E\u5B57,
+              {
+                \u5024: \u5B9F\u5024\u8868\u8A18(d.value),
+                \u5272\u5408: \u5272\u5408\u8868\u8A18(d.value / total),
+                \u5408\u8A08: total
+              }
+            )
           }
         )
       ] }, `item-${idx}`);
@@ -13703,7 +13965,7 @@ function ChartStatNode({
   const data = resolveChartData(node.chartData ?? [], stateValues);
   const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
   const \u524D\u3092\u51FA\u3059 = data.some((d) => d.previous !== void 0);
-  const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length, \u524D\u3092\u51FA\u3059);
+  const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length, \u524D\u3092\u51FA\u3059, data.length > 1);
   const \u5272\u5408\u3092\u51FA\u3059 = data.length > 1;
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
@@ -13832,17 +14094,23 @@ function ChartStatNode({
     })
   ] });
 }
-function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570, \u524D\u3092\u51FA\u3059) {
+function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570, \u524D\u3092\u51FA\u3059, \u5272\u5408\u3092\u51FA\u3059) {
   const \u4F59\u767D = 20;
   const \u5E45 = \u4EF6\u6570 > 0 ? w / \u4EF6\u6570 : w;
   const \u540D\u524D\u306E\u7D1A = 14;
-  const \u6570\u5024\u306E\u7D1A = 40;
   const \u524D\u306E\u7D1A = \u540D\u524D\u306E\u7D1A;
   const \u5272\u5408\u306E\u7D1A = 12;
   const \u5F27\u306E\u534A\u5F84 = 20;
   const \u5F27\u306E\u592A\u3055 = 4;
+  const \u6570\u5024\u306E\u7D1A\u306E\u4E0B\u9650 = 40;
+  const \u6570\u5024\u306E\u7D1A\u306E\u4E0A\u9650 = 112;
   const \u524D\u306E\u9AD8\u3055 = \u524D\u3092\u51FA\u3059 ? 8 + \u524D\u306E\u7D1A : 0;
-  const \u4E2D\u8EAB\u306E\u9AD8\u3055 = \u540D\u524D\u306E\u7D1A + 12 + \u6570\u5024\u306E\u7D1A + \u524D\u306E\u9AD8\u3055 + 16 + \u5F27\u306E\u534A\u5F84 * 2 + 8 + \u5272\u5408\u306E\u7D1A;
+  const \u5F27\u3068\u5272\u5408\u306E\u9AD8\u3055 = \u5272\u5408\u3092\u51FA\u3059 ? 16 + \u5F27\u306E\u534A\u5F84 * 2 + 8 + \u5272\u5408\u306E\u7D1A : 0;
+  const \u6570\u5024\u306E\u7D1A = \u5272\u5408\u3092\u51FA\u3059 ? \u6570\u5024\u306E\u7D1A\u306E\u4E0B\u9650 : Math.max(
+    \u6570\u5024\u306E\u7D1A\u306E\u4E0B\u9650,
+    Math.min(\u6570\u5024\u306E\u7D1A\u306E\u4E0A\u9650, Math.floor(h - \u4F59\u767D * 2 - \u540D\u524D\u306E\u7D1A - 12 - \u524D\u306E\u9AD8\u3055))
+  );
+  const \u4E2D\u8EAB\u306E\u9AD8\u3055 = \u540D\u524D\u306E\u7D1A + 12 + \u6570\u5024\u306E\u7D1A + \u524D\u306E\u9AD8\u3055 + \u5F27\u3068\u5272\u5408\u306E\u9AD8\u3055;
   const \u4E0A\u7AEF = Math.max(\u4F59\u767D, (h - \u4E2D\u8EAB\u306E\u9AD8\u3055) / 2);
   const \u540D\u524D\u306Ey = \u4E0A\u7AEF + \u540D\u524D\u306E\u7D1A;
   const \u6570\u5024\u306Ey = \u540D\u524D\u306Ey + 12 + \u6570\u5024\u306E\u7D1A * 0.78;
@@ -13914,7 +14182,10 @@ function ChartWaffleNode({
   const \u884C\u306E\u9AD8\u3055 = 40;
   const \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593 = 28;
   const \u5370\u306E\u5E452 = 18;
-  const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u914D\u5206[i] ?? 0}%`);
+  const \u5B9F\u5024\u306E\u5408\u8A08 = data.reduce((acc, d) => acc + d.value, 0);
+  const \u6570\u5024\u306E\u6587\u5B57 = data.map(
+    (d, i) => \u5024\u3068\u5272\u5408\u306E\u6587\u5B57(\u5B9F\u5024\u8868\u8A18(d.value), `${\u914D\u5206[i] ?? 0}%`, \u5B9F\u5024\u306E\u5408\u8A08)
+  );
   const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E452 + Math.max(
     0,
     ...data.map(
@@ -13925,7 +14196,9 @@ function ChartWaffleNode({
   const \u683C\u5B50\u306B\u4F7F\u3048\u308B\u5E45 = node.w - PAD * 2 - \u4E00\u89A7\u306E\u5E45 - \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593;
   const \u5347 = Math.max(4, Math.min(\u4F7F\u3048\u308B\u9AD8\u3055, \u683C\u5B50\u306B\u4F7F\u3048\u308B\u5E45) / WAFFLE_COLS);
   const \u5370 = \u5347 * 0.78;
-  const \u683C\u5B50\u306E\u5DE6 = PAD + \u4E00\u89A7\u306E\u5E45 + \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593;
+  const \u4E2D\u8EAB\u306E\u5E45 = \u4E00\u89A7\u306E\u5E45 + \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593 + \u5347 * WAFFLE_COLS;
+  const \u4E00\u89A7\u306E\u5DE6 = Math.max(PAD, (node.w - \u4E2D\u8EAB\u306E\u5E45) / 2);
+  const \u683C\u5B50\u306E\u5DE6 = \u4E00\u89A7\u306E\u5DE6 + \u4E00\u89A7\u306E\u5E45 + \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593;
   const \u683C\u5B50\u306E\u4E0A = PAD + (\u4F7F\u3048\u308B\u9AD8\u3055 - \u5347 * WAFFLE_COLS) / 2;
   const \u6301\u3061\u4E3B = [];
   \u914D\u5206.forEach((n, idx) => {
@@ -13972,11 +14245,11 @@ function ChartWaffleNode({
     data.map((d, idx) => {
       const y = \u4E00\u89A7\u306E\u59CB\u307E\u308A + \u884C\u306E\u9AD8\u3055 * idx;
       return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-waffle-item", children: [
-        /* @__PURE__ */ jsx("rect", { x: PAD, y: y - 11, width: 4, height: 22, rx: 2, fill: \u5370\u306E\u82722(d.tone, idx) }),
+        /* @__PURE__ */ jsx("rect", { x: \u4E00\u89A7\u306E\u5DE6, y: y - 11, width: 4, height: 22, rx: 2, fill: \u5370\u306E\u82722(d.tone, idx) }),
         /* @__PURE__ */ jsx(
           "text",
           {
-            x: PAD + \u5370\u306E\u5E452,
+            x: \u4E00\u89A7\u306E\u5DE6 + \u5370\u306E\u5E452,
             y: y + 1,
             fontSize: \u540D\u524D\u306E\u7D1A,
             fontWeight: 700,
@@ -13989,11 +14262,18 @@ function ChartWaffleNode({
           {
             "data-cdl-role": "chart-waffle-count",
             "data-cdl-unresolved": d.unresolved ? "true" : void 0,
-            x: PAD + \u5370\u306E\u5E452,
+            x: \u4E00\u89A7\u306E\u5DE6 + \u5370\u306E\u5E452,
             y: y + 20,
             fontSize: \u6570\u5024\u306E\u7D1A,
             fill: "var(--cdl-text-dim, #5a6270)",
-            children: \u6570\u5024\u306E\u6587\u5B57[idx]
+            children: /* @__PURE__ */ jsx(
+              \u5024\u3068\u5272\u5408\u306E\u5B57,
+              {
+                \u5024: \u5B9F\u5024\u8868\u8A18(d.value),
+                \u5272\u5408: `${\u914D\u5206[idx] ?? 0}%`,
+                \u5408\u8A08: \u5B9F\u5024\u306E\u5408\u8A08
+              }
+            )
           }
         )
       ] }, `item-${idx}`);
@@ -14899,6 +15179,8 @@ function FunnelNode({
     const t = step / stageCount;
     return canvasW * (topRatio + (bottomRatio - topRatio) * t);
   };
+  const \u540D\u524D\u306E\u5B57 = 14;
+  const \u88DC\u8DB3\u306E\u5B57 = 10.5;
   const \u6BB5 = stages.map((s, idx) => {
     const prev = idx > 0 ? stages[idx - 1] : null;
     const dropRate = prev && prev.count > 0 ? (prev.count - s.count) / prev.count * 100 : 0;
@@ -14911,6 +15193,17 @@ function FunnelNode({
     const points = `${topX},${y} ${topX + topW},${y} ${bottomX + bottomW},${y + stageH} ${bottomX},${y + stageH}`;
     const tone = toneByIndex(idx);
     const legendX = PAD_LEFT2 + canvasW + 24;
+    const \u88DC\u8DB3 = (s.subtitle ?? "").trim();
+    const \u88DC\u8DB3\u3042\u308A = \u88DC\u8DB3 !== "";
+    const \u4E8C\u884C\u306E\u9AD8\u3055 = \u540D\u524D\u306E\u5B57 * 1.2 + \u88DC\u8DB3\u306E\u5B57 * 1.25;
+    const \u7E26\u500D = \u88DC\u8DB3\u3042\u308A ? Math.min(1, Math.max(0, stageH - 8) / \u4E8C\u884C\u306E\u9AD8\u3055) : 1;
+    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 \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;
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx(
         "polygon",
@@ -14928,14 +15221,29 @@ function FunnelNode({
         "text",
         {
           x: cx,
-          y: y + stageH / 2 + 5,
-          fontSize: 14,
+          y: \u540D\u524D\u306Ey,
+          fontSize: \u540D\u524D\u306E\u5B9F\u5B57,
           fontWeight: 700,
           textAnchor: "middle",
           fill: "var(--cdl-node-fill, #ffffff)",
           children: s.title
         }
       ),
+      \u88DC\u8DB3\u3042\u308A && /* @__PURE__ */ jsx(
+        "text",
+        {
+          "data-cdl-role": "funnel-stage-subtitle",
+          x: cx,
+          y: \u88DC\u8DB3\u306Ey,
+          fontSize: \u88DC\u8DB3\u306E\u5B9F\u5B57,
+          fontWeight: 500,
+          letterSpacing: 0,
+          textAnchor: "middle",
+          fill: "var(--cdl-node-fill, #ffffff)",
+          fillOpacity: 0.82,
+          children: \u88DC\u8DB3
+        }
+      ),
       \u6BB5\u304C\u51FA\u5207\u3063\u305F(idx) && /* @__PURE__ */ jsx(
         "text",
         {
@@ -14989,6 +15297,9 @@ var TONE_ORDER = [
 function toneByIndex(idx) {
   return TONE_ORDER[idx % TONE_ORDER.length];
 }
+function \u7573\u3093\u3060\u6587(\u4EF6\u6570) {
+  return `\u307B\u304B ${\u4EF6\u6570} \u4EF6`;
+}
 function QuadrantNode({
   node,
   active,
@@ -15006,7 +15317,13 @@ function QuadrantNode({
   const ITEM_FONT = 13;
   const ITEM_PAD_X = 12;
   const ITEM_MIN_W = 48;
-  const axisLabelPad = (text) => Math.max(PAD_MIN, measureTextWidth(`\u2190 ${text}`, { fontSize: AXIS_LABEL_FONT}) + 12);
+  const POINT_R = 5;
+  const POINT_GAP = 6;
+  const SUB_FONT = 10;
+  const axisLabelPad = (text) => Math.max(
+    PAD_MIN,
+    measureTextWidth(`\u2190 ${text}`, { fontSize: AXIS_LABEL_FONT}) + 12
+  );
   const padBudget = Math.max(0, node.w * 0.5 - PAD_MIN * 2);
   const wantLeft = axisLabelPad(data.xAxis.left) - PAD_MIN;
   const wantRight = axisLabelPad(data.xAxis.right) - PAD_MIN;
@@ -15020,11 +15337,13 @@ function QuadrantNode({
   const cy = PAD_TOP2 + canvasH / 2;
   const halfW = canvasW / 2;
   const halfH = canvasH / 2;
+  const \u70B9\u3067\u7F6E\u304F = data.items.filter((i) => i.at !== void 0);
+  const \u7A4D\u3080 = data.items.filter((i) => i.at === void 0);
   const itemsBy = {
-    topLeft: data.items.filter((i) => i.quadrant === "topLeft"),
-    topRight: data.items.filter((i) => i.quadrant === "topRight"),
-    bottomLeft: data.items.filter((i) => i.quadrant === "bottomLeft"),
-    bottomRight: data.items.filter((i) => i.quadrant === "bottomRight")
+    topLeft: \u7A4D\u3080.filter((i) => i.quadrant === "topLeft"),
+    topRight: \u7A4D\u3080.filter((i) => i.quadrant === "topRight"),
+    bottomLeft: \u7A4D\u3080.filter((i) => i.quadrant === "bottomLeft"),
+    bottomRight: \u7A4D\u3080.filter((i) => i.quadrant === "bottomRight")
   };
   const quadrantColor = {
     topLeft: toneFill("success", 0.06),
@@ -15053,10 +15372,50 @@ function QuadrantNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    /* @__PURE__ */ jsx("rect", { "data-cdl-role": "quadrant-bg", x: PAD_LEFT2, y: PAD_TOP2, width: halfW, height: halfH, ...quadrantColor.topLeft }),
-    /* @__PURE__ */ jsx("rect", { "data-cdl-role": "quadrant-bg", x: cx, y: PAD_TOP2, width: halfW, height: halfH, ...quadrantColor.topRight }),
-    /* @__PURE__ */ jsx("rect", { "data-cdl-role": "quadrant-bg", x: PAD_LEFT2, y: cy, width: halfW, height: halfH, ...quadrantColor.bottomLeft }),
-    /* @__PURE__ */ jsx("rect", { "data-cdl-role": "quadrant-bg", x: cx, y: cy, width: halfW, height: halfH, ...quadrantColor.bottomRight }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        "data-cdl-role": "quadrant-bg",
+        x: PAD_LEFT2,
+        y: PAD_TOP2,
+        width: halfW,
+        height: halfH,
+        ...quadrantColor.topLeft
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        "data-cdl-role": "quadrant-bg",
+        x: cx,
+        y: PAD_TOP2,
+        width: halfW,
+        height: halfH,
+        ...quadrantColor.topRight
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        "data-cdl-role": "quadrant-bg",
+        x: PAD_LEFT2,
+        y: cy,
+        width: halfW,
+        height: halfH,
+        ...quadrantColor.bottomLeft
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        "data-cdl-role": "quadrant-bg",
+        x: cx,
+        y: cy,
+        width: halfW,
+        height: halfH,
+        ...quadrantColor.bottomRight
+      }
+    ),
     /* @__PURE__ */ jsx(
       "rect",
       {
@@ -15071,28 +15430,136 @@ function QuadrantNode({
         rx: 8
       }
     ),
-    /* @__PURE__ */ jsx("line", { x1: cx, y1: PAD_TOP2, x2: cx, y2: PAD_TOP2 + canvasH, stroke: "var(--cdl-text-mute, #8a8678)", strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsx("line", { x1: PAD_LEFT2, y1: cy, x2: PAD_LEFT2 + canvasW, y2: cy, stroke: "var(--cdl-text-mute, #8a8678)", strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsx("text", { x: PAD_LEFT2 + halfW / 2, y: PAD_TOP2 + 22, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.topLeft, children: data.quadrantLabels.topLeft }),
-    /* @__PURE__ */ jsx("text", { x: cx + halfW / 2, y: PAD_TOP2 + 22, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.topRight, children: data.quadrantLabels.topRight }),
-    /* @__PURE__ */ jsx("text", { x: PAD_LEFT2 + halfW / 2, y: PAD_TOP2 + canvasH - 12, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.bottomLeft, children: data.quadrantLabels.bottomLeft }),
-    /* @__PURE__ */ jsx("text", { x: cx + halfW / 2, y: PAD_TOP2 + canvasH - 12, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.bottomRight, children: data.quadrantLabels.bottomRight }),
-    /* @__PURE__ */ jsxs("text", { x: cx, y: PAD_TOP2 - 12, fontSize: 12, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: [
-      "\u2191 ",
-      data.yAxis.top
-    ] }),
-    /* @__PURE__ */ jsxs("text", { x: cx, y: PAD_TOP2 + canvasH + 24, fontSize: 12, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: [
-      "\u2193 ",
-      data.yAxis.bottom
-    ] }),
-    /* @__PURE__ */ jsxs("text", { x: PAD_LEFT2 - 12, y: cy + 4, fontSize: AXIS_LABEL_FONT, fontWeight: 700, textAnchor: "end", fill: "var(--cdl-text-dim, #5a6270)", children: [
-      "\u2190 ",
-      data.xAxis.left
-    ] }),
-    /* @__PURE__ */ jsxs("text", { x: PAD_LEFT2 + canvasW + 12, y: cy + 4, fontSize: AXIS_LABEL_FONT, fontWeight: 700, textAnchor: "start", fill: "var(--cdl-text-dim, #5a6270)", children: [
-      data.xAxis.right,
-      " \u2192"
-    ] }),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: cx,
+        y1: PAD_TOP2,
+        x2: cx,
+        y2: PAD_TOP2 + canvasH,
+        stroke: "var(--cdl-text-mute, #8a8678)",
+        strokeWidth: 1.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: PAD_LEFT2,
+        y1: cy,
+        x2: PAD_LEFT2 + canvasW,
+        y2: cy,
+        stroke: "var(--cdl-text-mute, #8a8678)",
+        strokeWidth: 1.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: PAD_LEFT2 + halfW / 2,
+        y: PAD_TOP2 + 22,
+        fontSize: 13,
+        fontWeight: 700,
+        textAnchor: "middle",
+        fill: quadrantAccent.topLeft,
+        children: data.quadrantLabels.topLeft
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx + halfW / 2,
+        y: PAD_TOP2 + 22,
+        fontSize: 13,
+        fontWeight: 700,
+        textAnchor: "middle",
+        fill: quadrantAccent.topRight,
+        children: data.quadrantLabels.topRight
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: PAD_LEFT2 + halfW / 2,
+        y: PAD_TOP2 + canvasH - 12,
+        fontSize: 13,
+        fontWeight: 700,
+        textAnchor: "middle",
+        fill: quadrantAccent.bottomLeft,
+        children: data.quadrantLabels.bottomLeft
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx + halfW / 2,
+        y: PAD_TOP2 + canvasH - 12,
+        fontSize: 13,
+        fontWeight: 700,
+        textAnchor: "middle",
+        fill: quadrantAccent.bottomRight,
+        children: data.quadrantLabels.bottomRight
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x: cx,
+        y: PAD_TOP2 - 12,
+        fontSize: 12,
+        fontWeight: 700,
+        textAnchor: "middle",
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: [
+          "\u2191 ",
+          data.yAxis.top
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x: cx,
+        y: PAD_TOP2 + canvasH + 24,
+        fontSize: 12,
+        fontWeight: 700,
+        textAnchor: "middle",
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: [
+          "\u2193 ",
+          data.yAxis.bottom
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x: PAD_LEFT2 - 12,
+        y: cy + 4,
+        fontSize: AXIS_LABEL_FONT,
+        fontWeight: 700,
+        textAnchor: "end",
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: [
+          "\u2190 ",
+          data.xAxis.left
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x: PAD_LEFT2 + canvasW + 12,
+        y: cy + 4,
+        fontSize: AXIS_LABEL_FONT,
+        fontWeight: 700,
+        textAnchor: "start",
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: [
+          data.xAxis.right,
+          " \u2192"
+        ]
+      }
+    ),
     Object.keys(itemsBy).map((q) => {
       const items = itemsBy[q];
       if (items.length === 0) return null;
@@ -15103,35 +15570,169 @@ function QuadrantNode({
       const qHalfW = halfW - 36;
       const \u67A0\u306E\u4F59\u5730 = qHalfW;
       if (\u67A0\u306E\u4F59\u5730 <= 0) return null;
-      const \u67A0\u306E\u5E45 = (title) => Math.min(
+      const \u67A0\u306E\u5E45 = (\u884C\u30892) => Math.min(
         \u67A0\u306E\u4F59\u5730,
-        Math.max(ITEM_MIN_W, measureTextWidth(title, { fontSize: ITEM_FONT}) + ITEM_PAD_X * 2)
+        Math.max(
+          ITEM_MIN_W,
+          Math.max(
+            ...\u884C\u30892.map(
+              (r) => measureTextWidth(r.text, { fontSize: r.size, fontWeight: r.weight })
+            )
+          ) + ITEM_PAD_X * 2
+        )
       );
+      const \u884C\u3089 = (it) => {
+        const \u88DC\u8DB3 = (it.subtitle ?? "").trim();
+        return [
+          { text: it.title, size: ITEM_FONT, weight: 600 },
+          ...\u88DC\u8DB3 === "" ? [] : [{ text: \u88DC\u8DB3, size: SUB_FONT, weight: 500 }]
+        ];
+      };
       const qHalfH = halfH - 60;
       const gap = 10;
       const rowH = 34;
       const maxRows = Math.max(1, Math.floor(qHalfH / (rowH + gap)));
-      return items.slice(0, maxRows).map((it, idx) => {
-        const py = qyStart + idx * (rowH + gap);
-        return /* @__PURE__ */ jsxs("g", { children: [
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              "data-cdl-role": "quadrant-item",
-              "data-cdl-unresolved": it.unresolved ? "true" : void 0,
-              x: qxStart,
-              y: py,
-              width: \u67A0\u306E\u5E45(it.title),
-              height: rowH,
-              rx: 6,
-              fill: "var(--cdl-node-fill, #ffffff)",
-              stroke: quadrantAccent[q],
-              strokeWidth: 1.5
-            }
-          ),
-          /* @__PURE__ */ jsx("text", { x: qxStart + ITEM_PAD_X, y: py + rowH / 2 + 5, fontSize: ITEM_FONT, fontWeight: 600, letterSpacing: 0, fill: "var(--cdl-text, #1a1f2a)", children: it.title })
-        ] }, `item-${it.id}`);
-      });
+      const \u7573\u3080 = items.length > maxRows;
+      const \u540D\u524D\u3092\u51FA\u3059 = \u7573\u3080 ? items.slice(0, maxRows - 1) : items;
+      const \u7573\u3093\u3060\u4EF6\u6570 = items.length - \u540D\u524D\u3092\u51FA\u3059.length;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        \u540D\u524D\u3092\u51FA\u3059.map((it, idx) => {
+          const py = qyStart + idx * (rowH + gap);
+          const \u5E45 = \u67A0\u306E\u5E45(\u884C\u3089(it));
+          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 },
+            Math.max(0, \u5E45 - ITEM_PAD_X * 2)
+          );
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                "data-cdl-role": "quadrant-item",
+                "data-cdl-unresolved": it.unresolved ? "true" : void 0,
+                x: qxStart,
+                y: py,
+                width: \u5E45,
+                height: rowH,
+                rx: 6,
+                fill: "var(--cdl-node-fill, #ffffff)",
+                stroke: quadrantAccent[q],
+                strokeWidth: 1.5
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: qxStart + ITEM_PAD_X,
+                y: \u88DC\u8DB3 === "" ? py + rowH / 2 + 5 : py + rowH / 2 - 2,
+                fontSize: ITEM_FONT,
+                fontWeight: 600,
+                letterSpacing: 0,
+                fill: "var(--cdl-text, #1a1f2a)",
+                children: it.title
+              }
+            ),
+            \u88DC\u8DB3 !== "" && /* @__PURE__ */ jsx(
+              "text",
+              {
+                "data-cdl-role": "quadrant-item-subtitle",
+                x: qxStart + ITEM_PAD_X,
+                y: py + rowH / 2 + 11,
+                fontSize: \u88DC\u8DB3\u306E\u5B57,
+                fontWeight: 500,
+                letterSpacing: 0,
+                fill: "var(--cdl-text-dim, #5a6270)",
+                children: \u88DC\u8DB3
+              }
+            )
+          ] }, `item-${it.id}`);
+        }),
+        \u7573\u3080 ? (
+          /*
+            畳んだ段は名前の段と見た目を分ける。 同じにすると「ほか 3 件」 という名前の
+            項目があるように読める。 枠を持たず、点線の下線と薄い字で「続きがある」 ことを表す。
+          */
+          /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                "data-cdl-role": "quadrant-more-rule",
+                x1: qxStart,
+                y1: qyStart + \u540D\u524D\u3092\u51FA\u3059.length * (rowH + gap) + rowH / 2 + 9,
+                x2: qxStart + \u67A0\u306E\u5E45([{ text: \u7573\u3093\u3060\u6587(\u7573\u3093\u3060\u4EF6\u6570), size: ITEM_FONT, weight: 600 }]),
+                y2: qyStart + \u540D\u524D\u3092\u51FA\u3059.length * (rowH + gap) + rowH / 2 + 9,
+                stroke: quadrantAccent[q],
+                strokeWidth: 1,
+                strokeDasharray: "3 3",
+                strokeOpacity: 0.6
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                "data-cdl-role": "quadrant-more",
+                x: qxStart + ITEM_PAD_X,
+                y: qyStart + \u540D\u524D\u3092\u51FA\u3059.length * (rowH + gap) + rowH / 2 + 5,
+                fontSize: ITEM_FONT,
+                fontWeight: 600,
+                letterSpacing: 0,
+                fill: quadrantAccent[q],
+                children: \u7573\u3093\u3060\u6587(\u7573\u3093\u3060\u4EF6\u6570)
+              }
+            )
+          ] }, `more-${q}`)
+        ) : null
+      ] }, `q-${q}`);
+    }),
+    \u70B9\u3067\u7F6E\u304F.map((it) => {
+      const at = it.at;
+      const px = PAD_LEFT2 + at.x * canvasW;
+      const py = PAD_TOP2 + (1 - at.y) * canvasH;
+      const \u53F3\u5BC4\u308A = at.x >= 0.5;
+      const \u540D\u524D\u306Ex = px + (\u53F3\u5BC4\u308A ? -11 : POINT_R + POINT_GAP);
+      const \u5BC4\u305B = \u53F3\u5BC4\u308A ? "end" : "start";
+      const \u88DC\u8DB3 = (it.subtitle ?? "").trim();
+      return /* @__PURE__ */ jsxs("g", { "data-cdl-unresolved": it.unresolved ? "true" : void 0, children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            "data-cdl-role": "quadrant-point",
+            cx: px,
+            cy: py,
+            r: POINT_R,
+            fill: quadrantAccent[it.quadrant]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            "data-cdl-role": "quadrant-point-label",
+            x: \u540D\u524D\u306Ex,
+            y: \u88DC\u8DB3 === "" ? py + 4 : py - 1,
+            fontSize: ITEM_FONT,
+            fontWeight: 600,
+            letterSpacing: 0,
+            textAnchor: \u5BC4\u305B,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: it.title
+          }
+        ),
+        \u88DC\u8DB3 !== "" && /* @__PURE__ */ jsx(
+          "text",
+          {
+            "data-cdl-role": "quadrant-point-subtitle",
+            x: \u540D\u524D\u306Ex,
+            y: py + 11,
+            fontSize: SUB_FONT,
+            fontWeight: 500,
+            letterSpacing: 0,
+            textAnchor: \u5BC4\u305B,
+            fill: "var(--cdl-text-dim, #5a6270)",
+            children: \u88DC\u8DB3
+          }
+        )
+      ] }, `at-${it.id}`);
     })
   ] });
 }
@@ -16024,12 +16625,13 @@ function ShapeTerminalNode({ node, active, lang }) {
   const \u5148\u982D = 26;
   const \u884C\u9593 = 22;
   const \u30AB\u30FC\u30BD\u30EB = { \u5DE6: 30, \u5E45: 9, \u9AD8: 14, \u4E0A: 11, \u4E0B: 3 };
+  const \u51FA\u529B = \u66F8\u3044\u305F\u5024\u304B\u63A7\u3048(node.subtitle, \u5B57\u5F15("terminal.output"));
   const \u884C = [
     [
       { \u5DE6: 16, \u5B57: 12.5, \u8272: "#7cd88f", \u6587: "$" },
       { \u5DE6: 30, \u5B57: 12.5, \u8272: "#e6edf3", \u6587: "pnpm build" }
     ],
-    [{ \u5DE6: 16, \u5B57: 12.5, \u8272: "#8b95a5", \u6587: \u5B57\u5F15("terminal.output") }],
+    [{ \u5DE6: 16, \u5B57: 12.5, \u8272: "#8b95a5", \u6587: \u51FA\u529B }],
     [{ \u5DE6: 16, \u5B57: 12.5, \u8272: "#7cd88f", \u6587: "$" }]
   ];
   const \u81EA\u7136\u5E45 = Math.max(...\u884C.flat().map((c) => c.\u5DE6 + \u7B49\u5E45\u306E\u6841(c.\u6587) * MONO_ADVANCE * c.\u5B57)) + \u4F59\u767D;
@@ -16151,7 +16753,9 @@ function ShapeCodeBlockNode({ node, active, lang }) {
   const w = Math.max(0, node.w - \u7DDA * 2);
   const bodyH = Math.max(0, node.h - 42 - \u7DDA * 2);
   const lineFont = "ui-monospace, SFMono-Regular, Menlo, monospace";
-  const \u30BF\u30D6\u5E45 = 100;
+  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\u9AD8 = 24;
   const \u89D2 = 10;
   const \u6E9D = 32;
@@ -16188,7 +16792,7 @@ function ShapeCodeBlockNode({ node, active, lang }) {
   const \u81EA\u7136\u9AD8 = \u30BF\u30D6\u9AD8 + \u884C\u982D + \u884C\u9593 * (lines.length - 1) + Math.max(\u592A\u3055 - \u6301\u3061\u4E0A\u3052, \u884C\u756A\u53F7\u306E\u5B57 * DESCENT3);
   const \u500D = Math.min(1, bodyH / \u81EA\u7136\u9AD8);
   const \u6253\u3061\u6D88\u3059\u5B57\u3089 = [
-    { text: \u5B57\u5F15("codeBlock.fileName"), size: 11, \u5E2F: { \u5E45: \u30BF\u30D6\u5E45, \u9AD8\u3055: \u30BF\u30D6\u9AD8 } },
+    { 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);
@@ -16230,11 +16834,11 @@ function ShapeCodeBlockNode({ node, active, lang }) {
           "data-cdl-counter-scaled": "1",
           x: x + tabW / 2,
           y: y + tabH / 2 + 4 * \u500D,
-          fontSize: 11 * \u500D * \u500D\u8FD4\u3057,
+          fontSize: \u672D\u306E\u5B57 * \u500D * \u500D\u8FD4\u3057 * \u5E45\u306E\u500D\u7387(\u672D, \u672D\u306E\u5B57 * \u500D * \u500D\u8FD4\u3057, 0, tabW),
           fontFamily: lineFont,
           textAnchor: "middle",
           fill: "#e6edf3",
-          children: \u5B57\u5F15("codeBlock.fileName")
+          children: \u672D
         }
       ),
       /* @__PURE__ */ jsx("circle", { cx: x + tabW - \u4E38, cy: y + tabH / 2, r: 3 * \u500D, fill: "#7cd88f", stroke: "none" }),
@@ -16334,6 +16938,7 @@ function ShapeKanbanCardNode({ node, active, lang }) {
   const PILL\u9AD8 = 16;
   const PILL\u5B57 = 11;
   const PILL\u5B57\u9593 = 0;
+  const PILL\u5B57\u5E45 = PILL\u5E45 - 6;
   const FOOTER\u4E0B = 22;
   const AVATAR\u4E2D\u5FC3Y = 4;
   const AVATAR\u534A\u5F84 = 9;
@@ -16363,6 +16968,11 @@ function ShapeKanbanCardNode({ node, active, lang }) {
       \u4E0B: size * \u8AAC\u660E\u57FA\u6E96\u6BD4 + size * \u8AAC\u660E\u5B57\u6BD4 * DESCENT3
     })
   );
+  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 \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: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -16417,15 +17027,16 @@ function ShapeKanbanCardNode({ node, active, lang }) {
       /* @__PURE__ */ jsx(
         "text",
         {
+          "data-cdl-role": "kanban-status",
           x: x + w - (\u5DE6\u53F3\u4F59\u767D + PILL\u5E45 / 2) * \u500D,
           y: pillY + 12 * \u500D,
-          fontSize: PILL\u5B57 * \u500D,
+          fontSize: PILL\u5B57 * \u500D * \u72B6\u614B\u306E\u500D\u7387,
           fontWeight: 700,
-          letterSpacing: PILL\u5B57\u9593 * \u500D,
+          letterSpacing: PILL\u5B57\u9593 * \u500D * \u72B6\u614B\u306E\u500D\u7387,
           textAnchor: "middle",
           fill: "#5a4a1a",
           fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-          children: \u5B57\u5F15("kanbanCard.status")
+          children: \u72B6\u614B
         }
       ),
       /* @__PURE__ */ jsx(
@@ -16446,10 +17057,10 @@ function ShapeKanbanCardNode({ node, active, lang }) {
         {
           x: x + w / 2,
           y: \u540D\u524D.y + \u540D\u524D.size * \u8AAC\u660E\u57FA\u6E96\u6BD4,
-          fontSize: \u540D\u524D.size * \u8AAC\u660E\u5B57\u6BD4,
+          fontSize: \u8AAC\u660E\u306E\u5B57 * \u5E45\u306E\u500D\u7387(\u8AAC\u660E, \u8AAC\u660E\u306E\u5B57, 0, \u4F7F\u3048\u308B\u5E452),
           textAnchor: "middle",
           fill: "var(--cdl-text-dim, #5a6270)",
-          children: \u5B57\u5F15("kanbanCard.task")
+          children: \u8AAC\u660E
         }
       ),
       /* @__PURE__ */ jsxs("g", { transform: `translate(${x + \u5DE6\u53F3\u4F59\u767D * \u500D}, ${footY})`, children: [
@@ -17467,6 +18078,7 @@ var SMART_CONTRACT_H = 220;
 var BLOCK_W = 240;
 var BLOCK_H = 220;
 var \u898B\u51FA\u3057\u306E\u5B57 = 13;
+var \u80A9\u66F8\u306E\u5B57 = 10;
 var \u540D\u306E\u5B57 = 11;
 var \u5024\u306E\u5B57 = 11;
 var \u884C\u306E\u9593\u9694 = 22;
@@ -17542,11 +18154,6 @@ 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 \u5E45\u306E\u500D\u7387(text, size, letterSpacing, \u5E45) {
-  if (!(\u5E45 > 0) || !(size > 0)) return 1;
-  const \u5B9F\u5E45 = textWidth(text, size, letterSpacing);
-  return \u5B9F\u5E45 > \u5E45 ? \u5E45 / \u5B9F\u5E45 : 1;
-}
 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);
@@ -17664,9 +18271,18 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
       value: f.key === "hash" ? \u6E21\u3055\u308C\u305F(node.subtitle) || \u65E2\u5B9A\u5024 : \u65E2\u5B9A\u5024
     };
   });
-  const \u898B\u51FA\u3057\u306E\u5E45 = bw - 14 - 30;
+  const \u80A9\u66F8 = \u6E21\u3055\u308C\u305F(node.eyebrow);
+  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\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 \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 } },
+    // 肩書も帯に入れる = 入れないと打ち消しの倍率が肩書を見ずに決まり、帯から横へ出る
+    ...\u80A9\u66F8 === "" ? [] : [{ text: \u80A9\u66F8, size: \u80A9\u66F8\u306E\u6307\u5B9A, \u5E2F: { \u5E45: \u80A9\u66F8\u306E\u5E45, \u9AD8\u3055: \u898B\u51FA\u3057\u306E\u5E2F } }],
     ...fields.flatMap((f) => [
       { text: f.label, size: \u540D\u306E\u5B57, \u5E2F: { \u5E45: bw - 28, \u9AD8\u3055: \u884C\u306E\u9593\u9694 } },
       {
@@ -17679,6 +18295,7 @@ function ShapeBlockchainBlockNode({ 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 \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;
     const \u5024\u306E\u5927\u304D\u3055 = \u5024\u306E\u5B57 * \u500D;
     return /* @__PURE__ */ jsxs("g", { children: [
@@ -17686,6 +18303,22 @@ function ShapeBlockchainBlockNode({ node, active, lang }) {
       /* @__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) }),
+      \u80A9\u66F8 !== "" && /* @__PURE__ */ jsx(
+        "text",
+        {
+          "data-cdl-role": "blockchain-block-eyebrow",
+          "data-cdl-counter-scaled": "1",
+          x: x + bw - 30,
+          y: y + 21,
+          fontSize: \u80A9\u66F8\u306E\u5927\u304D\u3055,
+          fontWeight: 600,
+          textAnchor: "end",
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+          fill: "#ffffff",
+          fillOpacity: 0.78,
+          children: \u80A9\u66F8
+        }
+      ),
       /* @__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 }),
@@ -17747,7 +18380,7 @@ function ShapeBlockchainNode({ node, active }) {
           420 + i
         ] }),
         /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "0", x: bx + blockW / 2, y: cy + 8, fontSize: 14, fontWeight: 700, textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-tone-accent, #2d6a8f)", fontFamily: "Georgia, serif", children: "#" }),
-        /* @__PURE__ */ jsx("text", { "data-cdl-counter-scaled": "1", x: bx + blockW / 2, y: cy + 22, fontSize: CHAIN_HASH_SIZE * \u500D, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)", opacity: 0.9, children: "0x\u2026" })
+        /* @__PURE__ */ jsx("text", { "data-cdl-ellipsis": "written", "data-cdl-counter-scaled": "1", x: bx + blockW / 2, y: cy + 22, fontSize: CHAIN_HASH_SIZE * \u500D, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", textAnchor: "middle", fill: isCurrent ? "#ffffff" : "var(--cdl-text-dim, #5a6270)", opacity: 0.9, children: "0x\u2026" })
       ] }, i);
     }) });
   };
@@ -18782,13 +19415,18 @@ function ShapeWarehouseNode({ node, active, lang }) {
     bottomLabel4(node, r.cx, r.label)
   ] });
 }
+var HANDLE_GRIP_X = 118;
+var HANDLE_GRIP_R = 4;
+var CART_SHADOW_RX = 80;
 function ShapeOnlineShopNode({ node, active }) {
   const frame = commonFrame6(active);
   const r = shapeRegion(node);
-  const cx = r.cx;
   const cy = r.cy + 10;
   const scale = Math.min(r.availW / 260, r.availH / 320);
   const s = scale * 0.9;
+  const \u5DE6\u3078\u51FA\u308B = HANDLE_GRIP_X + HANDLE_GRIP_R;
+  const \u53F3\u3078\u51FA\u308B = CART_SHADOW_RX;
+  const cx = r.cx + (\u5DE6\u3078\u51FA\u308B - \u53F3\u3078\u51FA\u308B) / 2 * s;
   const accent = "var(--cdl-tone-accent, #2d6a8f)";
   const accentDark = "#1a4a68";
   const accentDarker = "#0f3450";
@@ -18802,9 +19440,9 @@ function ShapeOnlineShopNode({ node, active }) {
   const wheelL = cx - 42 * s;
   const wheelR = cx + 42 * s;
   return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("ellipse", { cx, cy: wheelY + 22 * s, rx: 80 * s, ry: 5 * s, fill: frame.stroke, opacity: 0.25, stroke: "none" }),
-    /* @__PURE__ */ jsx("path", { d: `M ${cx - 118 * s} ${basketTopY - 60 * s} L ${cx - 90 * s} ${basketTopY - 60 * s} L ${cx - 80 * s} ${basketTopY - 30 * s} L ${basketTopL} ${basketTopY}`, fill: "none", stroke: accent, strokeWidth: 6 * s, strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx("circle", { cx: cx - 118 * s, cy: basketTopY - 60 * s, r: 4 * s, fill: accent, stroke: accentDark, strokeWidth: 1.5 }),
+    /* @__PURE__ */ jsx("ellipse", { cx, cy: wheelY + 22 * s, rx: CART_SHADOW_RX * s, ry: 5 * s, fill: frame.stroke, opacity: 0.25, stroke: "none" }),
+    /* @__PURE__ */ jsx("path", { d: `M ${cx - HANDLE_GRIP_X * s} ${basketTopY - 60 * s} L ${cx - 90 * s} ${basketTopY - 60 * s} L ${cx - 80 * s} ${basketTopY - 30 * s} L ${basketTopL} ${basketTopY}`, fill: "none", stroke: accent, strokeWidth: 6 * s, strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: cx - HANDLE_GRIP_X * s, cy: basketTopY - 60 * s, r: HANDLE_GRIP_R * s, fill: accent, stroke: accentDark, strokeWidth: 1.5 }),
     /* @__PURE__ */ jsx(
       "path",
       {
@@ -19622,11 +20260,58 @@ function CdlNodeView({
             pointerEvents: "none"
           }
         ),
-        inner
+        inner,
+        \u7BB1\u306E\u4E0A\u306E\u8A9E(resolvedNode)
       ]
     }
   );
 }
+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);
+  return \u5B9F\u5E45 > \u5E45 ? \u7D20\u306E\u5927\u304D\u3055 * \u5E45 / \u5B9F\u5E45 : \u7D20\u306E\u5927\u304D\u3055;
+}
+function \u7BB1\u306E\u4E0A\u306E\u8A9E(node) {
+  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 \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(
+      "text",
+      {
+        "data-cdl-role": "figure-eyebrow",
+        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),
+        fontWeight: 600,
+        letterSpacing: 0.6,
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: \u5C0F\u898B\u51FA\u3057
+      }
+    ),
+    \u540D\u524D !== "" && /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-cdl-role": "figure-title",
+        x: node.cx,
+        y: \u984C\u306Ey,
+        textAnchor: "middle",
+        fontSize: \u984C\u306E\u5927\u304D\u3055,
+        fontWeight: 600,
+        fill: "var(--cdl-text, #23201b)",
+        children: \u540D\u524D
+      }
+    )
+  ] });
+}
 
 // src/render/relation-focus.ts
 function relatedFocusSet(edges, nodeId) {
@@ -19639,6 +20324,11 @@ function relatedFocusSet(edges, nodeId) {
   }
   return \u96C6\u5408;
 }
+function \u63CF\u304F\u3082\u306E\u304C\u3042\u308B(laid) {
+  if (laid.edges.length > 0) return true;
+  if (laid.nodes.some((n) => isRenderedNode(n))) return true;
+  return laid.lanes.some((l) => l.contain === true || l.lifeline === true || Boolean(l.label));
+}
 function CdlStage({
   laid,
   currentPhase,
@@ -19797,6 +20487,7 @@ function CdlStage({
     );
   }, [laid]);
   const diagramScale = laid.diagramScale ?? 1;
+  if (!\u63CF\u304F\u3082\u306E\u304C\u3042\u308B(laid)) return null;
   return /* @__PURE__ */ jsxs("div", { className: compact ? "px-3 py-3" : "px-6 py-6", style: compact ? void 0 : { minHeight: 460 }, children: [
     /* @__PURE__ */ jsxs(
       "svg",