@cardenelabs/cdl 0.7.0 → 0.10.0

package/dist/react.js

@@ -460,7 +460,35 @@ function isCJK(code) {
 function isHalfwidthKana(code) {
   return code >= 65377 && code <= 65500;
 }
+var EMOJI_ADVANCE_EM = 1.05;
+var MONO_EMOJI_ADVANCE_EM = 1.16;
+var WIDE_SYMBOL_ADVANCE_EM = 0.95;
+function isEmoji(code) {
+  return code >= 126976 && code <= 129791 || // 絵文字の主要面
+  code >= 9728 && code <= 10175 || // 記号と絵文字 (♻ ✅ ❤ 等)
+  code >= 127462 && code <= 127487;
+}
+function isEmojiGrapheme(grapheme, firstCode) {
+  return isEmoji(firstCode) || grapheme.includes("\uFE0F");
+}
+function isWideSymbol(code) {
+  return code >= 8592 && code <= 8703 || // 矢印
+  code >= 9472 && code <= 9599 || // 罫線
+  code >= 9632 && code <= 9727 || // 幾何図形
+  code >= 11008 && code <= 11263;
+}
+var CLUSTER_JOINER_RE = /\u200d|\ufe0f|[\u{1f000}-\u{1faff}]|[\u{2600}-\u{27bf}]/u;
+var \u66F8\u8A18\u7D20\u3067\u5206\u3051\u308B;
+function segmentGraphemes(text) {
+  if (typeof Intl === "undefined" || typeof Intl.Segmenter !== "function") {
+    return [...text];
+  }
+  \u66F8\u8A18\u7D20\u3067\u5206\u3051\u308B ??= new Intl.Segmenter(void 0, { granularity: "grapheme" });
+  return [...\u66F8\u8A18\u7D20\u3067\u5206\u3051\u308B.segment(text)].map((s) => s.segment);
+}
 function defaultAdvanceEm(ch, code) {
+  if (isEmoji(code)) return EMOJI_ADVANCE_EM;
+  if (isWideSymbol(code)) return WIDE_SYMBOL_ADVANCE_EM;
   if (isCJK(code)) return 1.08;
   if (isHalfwidthKana(code)) return 0.72;
   if (ch >= "a" && ch <= "z") return 0.73;
@@ -474,19 +502,23 @@ function measureTextWidth(text, opts = {}) {
   const fontFamily = opts.fontFamily ?? "sans";
   let advanceEmSum = 0;
   let charCount = 0;
-  for (const ch of text) {
+  const \u6587\u5B57\u5217 = CLUSTER_JOINER_RE.test(text) ? segmentGraphemes(text) : [...text];
+  for (const ch of \u6587\u5B57\u5217) {
     charCount++;
+    const code = ch.codePointAt(0) ?? 0;
+    if (isEmojiGrapheme(ch, code)) {
+      advanceEmSum += fontFamily === "mono" ? MONO_EMOJI_ADVANCE_EM : EMOJI_ADVANCE_EM;
+      continue;
+    }
     if (fontFamily === "mono") {
-      const code2 = ch.codePointAt(0) ?? 0;
-      advanceEmSum += isCJK(code2) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM;
+      advanceEmSum += isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM;
       continue;
     }
-    const code = ch.codePointAt(0) ?? 0;
     if (isCJK(code)) {
       advanceEmSum += 1.08;
       continue;
     }
-    const table = INTER_BOLD_ADVANCE_EM[ch];
+    const table = ch.length === 1 ? INTER_BOLD_ADVANCE_EM[ch] : void 0;
     advanceEmSum += table !== void 0 ? table : defaultAdvanceEm(ch, code);
   }
   const w = advanceEmSum * fontSize + letterSpacing * charCount;
@@ -542,13 +574,15 @@ var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
   "funnel-stages",
   "quadrant-matrix",
   "tree-hierarchy",
-  "journey-map",
-  // 形の中に自前の文字を置く (title は使わない)
-  "shape-blockchain-block"
+  "journey-map"
 ]);
 function rendersTitleText(kind) {
   return !KINDS_WITHOUT_TITLE_TEXT.has(kind ?? "");
 }
+var KINDS_FITTING_OWN_TITLE = /* @__PURE__ */ new Set(["shape-blockchain-block"]);
+function fitsOwnTitleWidth(kind) {
+  return KINDS_FITTING_OWN_TITLE.has(kind ?? "");
+}
 var KINDS_WITH_ROW_TEXT = /* @__PURE__ */ new Set([
   // 専用の表組み (StorageNode)
   "storage",
@@ -735,6 +769,70 @@ function buildDiagramAltText(topic, phase) {
   return parts.join(" ");
 }
 
+// src/layout/footer-shape.ts
+var SHAPE_DRAW_UP_EXTENT = {
+  "shape-robot-arm": 201,
+  // 実測 上 129
+  "shape-iot-sensor": 120,
+  // 48
+  "shape-credit-card": 113,
+  // 40.8
+  "shape-exchange": 107,
+  // 35
+  "shape-storefront": 104,
+  // 32
+  "shape-cdn-edge": 103,
+  // 30.8
+  "shape-payment-provider": 101,
+  // 29
+  "shape-gear": 96,
+  // 23.9
+  "shape-rpc-node": 94,
+  // 22
+  "shape-wallet": 84
+  // 12.1
+};
+function lifelineFooterNodes(lanes, nodes) {
+  const \u6570 = /* @__PURE__ */ new Map();
+  for (const n of nodes) \u6570.set(n.lane, (\u6570.get(n.lane) ?? 0) + 1);
+  const lifelineLanes = /* @__PURE__ */ new Set();
+  for (const lane of lanes) {
+    if (lane.lifeline) lifelineLanes.add(lane.id);
+  }
+  return nodes.filter(
+    (n) => n.role === "lifeline-footer" && lifelineLanes.has(n.lane) && (\u6570.get(n.lane) ?? 0) >= 2
+  );
+}
+function footerShapeDropY(kind, h) {
+  const extent = SHAPE_DRAW_UP_EXTENT[kind];
+  if (extent === void 0) return 0;
+  if (!Number.isFinite(h) || h <= 0) return 0;
+  return Math.max(0, extent - h);
+}
+function footerShapeDrops(lanes, nodes) {
+  return footerShapeDropsOf(lifelineFooterNodes(lanes, nodes));
+}
+function footerShapeDropsOf(footers) {
+  const drops = /* @__PURE__ */ new Map();
+  for (const footer of footers) {
+    const dy = footerShapeDropY(footer.kind, footer.h);
+    if (dy > 0) drops.set(footer.id, dy);
+  }
+  return drops;
+}
+function applyFooterShapeDrops(lanes, nodes) {
+  const drops = footerShapeDrops(lanes, nodes);
+  if (drops.size === 0) return nodes;
+  return nodes.map((n) => {
+    if (n.posX !== void 0 && n.posY !== void 0) return n;
+    const dy = drops.get(n.id);
+    return dy === void 0 ? n : { ...n, cy: n.cy + dy };
+  });
+}
+function footerShapeDrawTop(node) {
+  return node.cy - node.h / 2 - footerShapeDropY(node.kind, node.h);
+}
+
 // src/layout/collisions.ts
 var LANE_LABEL_CLEARANCE_MARGIN = 2;
 function collectBBoxes(lanes, nodes, edges) {
@@ -750,14 +848,16 @@ function collectBBoxes(lanes, nodes, edges) {
       h: 28
     });
   }
+  const footerDraw = footerShapeDrops(lanes, nodes);
   for (const n of nodes) {
+    const up = footerDraw.get(n.id) ?? 0;
     out.push({
       kind: "node",
       id: n.id,
       x: n.cx - n.w / 2,
-      y: n.cy - n.h / 2,
+      y: n.cy - n.h / 2 - up,
       w: n.w,
-      h: n.h
+      h: n.h + up
     });
   }
   for (const e of edges) {
@@ -3582,67 +3682,6 @@ function layoutNodes(diag, lanes) {
   return out;
 }
 
-// src/layout/footer-shape.ts
-var SHAPE_DRAW_UP_EXTENT = {
-  "shape-robot-arm": 201,
-  // 実測 上 129
-  "shape-iot-sensor": 120,
-  // 48
-  "shape-credit-card": 113,
-  // 40.8
-  "shape-exchange": 107,
-  // 35
-  "shape-storefront": 104,
-  // 32
-  "shape-cdn-edge": 103,
-  // 30.8
-  "shape-payment-provider": 101,
-  // 29
-  "shape-gear": 96,
-  // 23.9
-  "shape-rpc-node": 94,
-  // 22
-  "shape-wallet": 84
-  // 12.1
-};
-function lifelineFooterNodes(lanes, nodes) {
-  const byLane = /* @__PURE__ */ new Map();
-  for (const n of nodes) {
-    const inside = byLane.get(n.lane);
-    if (inside) inside.push(n);
-    else byLane.set(n.lane, [n]);
-  }
-  const footers = [];
-  for (const lane of lanes) {
-    if (!lane.lifeline) continue;
-    const inside = byLane.get(lane.id);
-    if (inside === void 0 || inside.length < 2) continue;
-    let footer = inside[0];
-    for (const n of inside) {
-      if (n.cy >= footer.cy) footer = n;
-    }
-    footers.push(footer);
-  }
-  return footers;
-}
-function footerShapeDropY(kind, h) {
-  const extent = SHAPE_DRAW_UP_EXTENT[kind];
-  if (extent === void 0) return 0;
-  if (!Number.isFinite(h) || h <= 0) return 0;
-  return Math.max(0, extent - h);
-}
-function footerShapeDrops(lanes, nodes) {
-  return footerShapeDropsOf(lifelineFooterNodes(lanes, nodes));
-}
-function footerShapeDropsOf(footers) {
-  const drops = /* @__PURE__ */ new Map();
-  for (const footer of footers) {
-    const dy = footerShapeDropY(footer.kind, footer.h);
-    if (dy > 0) drops.set(footer.id, dy);
-  }
-  return drops;
-}
-
 // src/layout/viewbox.ts
 function computeViewBox(lanes, nodes, edges, bboxes, viewport) {
   let maxX = 0;
@@ -3663,11 +3702,6 @@ function computeViewBox(lanes, nodes, edges, bboxes, viewport) {
     maxX = Math.max(maxX, n.cx + n.w / 2);
     maxY = Math.max(maxY, n.cy + n.h / 2);
   }
-  const footerDrops = footerShapeDrops(lanes, nodes);
-  for (const n of nodes) {
-    const dy = footerDrops.get(n.id);
-    if (dy !== void 0) maxY = Math.max(maxY, n.cy + n.h / 2 + dy);
-  }
   if (!Number.isFinite(minX)) minX = 0;
   if (!Number.isFinite(minY)) minY = 0;
   const x = minX - VIEW_PAD;
@@ -3745,7 +3779,7 @@ function applyRowLevelNodeShifts(nodes, lanes, nodeShifts) {
 }
 function layout(diag) {
   const lanes = layoutLanes(diag);
-  const rawNodes = layoutNodes(diag, lanes);
+  const rawNodes = applyFooterShapeDrops(lanes, layoutNodes(diag, lanes));
   const expandedLanes = expandLanesForNodes(lanes, rawNodes);
   const gapExpandedLanes = expandLaneGapsForEdgeLabels(expandedLanes, rawNodes, diag.edges);
   const nodes = rawNodes.map((n) => {
@@ -4608,7 +4642,7 @@ function templateRefIds(text) {
   return out;
 }
 function computeStateValues(laid, phaseIdx, progress) {
-  const values = {};
+  const values = /* @__PURE__ */ Object.create(null);
   for (const s of laid.states) values[s.id] = s.initial;
   for (let i = 0; i < laid.phases.length; i++) {
     const phase = laid.phases[i];
@@ -4626,10 +4660,20 @@ function computeStateValues(laid, phaseIdx, progress) {
       }
     }
   }
-  const out = {};
+  const out = /* @__PURE__ */ Object.create(null);
   for (const [k, v] of Object.entries(values)) out[k] = String(v);
   return withDerivedValues(out, laid.derived);
 }
+function mergeStateValues(base, overrides) {
+  const merged = Object.assign(/* @__PURE__ */ Object.create(null), base);
+  for (const key of Object.keys(overrides)) {
+    const v = overrides[key];
+    if (typeof v === "number" || typeof v === "string" || typeof v === "boolean") {
+      merged[key] = String(v);
+    }
+  }
+  return merged;
+}
 function interpolate(template, values) {
   return template.replace(TEMPLATE_REF_RE, (_, id, accessor) => {
     const raw = Object.hasOwn(values, id) ? values[id] : void 0;
@@ -4779,6 +4823,65 @@ function pathSubpath(d, progress) {
   return d;
 }
 
+// src/render/template-fields.ts
+var TEXT_FIELDS = ["title", "eyebrow", "subtitle", "value", "wBind", "hBind", "visibleIf"];
+var LIST_FIELDS = ["rows"];
+var NUMERIC_FIELDS = ["opacity", "renderOffsetX", "renderOffsetY"];
+var SHAPE_TEMPLATE_FIELDS = ["source", "radius", "fillProgress", "angle", "level", "rotation", "fill"];
+function shapeTexts(shape) {
+  if (!shape) return [];
+  const out = [];
+  const \u4E2D\u8EAB = shape;
+  for (const f of SHAPE_TEMPLATE_FIELDS) {
+    const v = \u4E2D\u8EAB[f];
+    if (typeof v === "string" && v) out.push(v);
+  }
+  return out;
+}
+function payloadTexts(node) {
+  const out = [];
+  const \u8DB3\u3059 = (v) => {
+    if (typeof v === "string" && v) out.push(v);
+  };
+  for (const d of node.chartData ?? []) \u8DB3\u3059(d.value);
+  for (const s of node.funnelData ?? []) \u8DB3\u3059(s.count);
+  for (const t of node.ganttData ?? []) {
+    \u8DB3\u3059(t.startIdx);
+    \u8DB3\u3059(t.endIdx);
+  }
+  for (const i of node.quadrantData?.items ?? []) \u8DB3\u3059(i.quadrant);
+  for (const s of node.journeyData ?? []) \u8DB3\u3059(s.emotion);
+  for (const n of node.treeData ?? []) {
+    \u8DB3\u3059(n.title);
+    \u8DB3\u3059(n.subtitle);
+  }
+  if (node.mindData) {
+    \u8DB3\u3059(node.mindData.rootTitle);
+    for (const b of node.mindData.branches) {
+      \u8DB3\u3059(b.title);
+      \u8DB3\u3059(b.subtitle);
+    }
+  }
+  return out;
+}
+function nodeTemplateTexts(node) {
+  const out = [];
+  for (const f of TEXT_FIELDS) {
+    const v = node[f];
+    if (typeof v === "string" && v) out.push(v);
+  }
+  for (const f of LIST_FIELDS) {
+    for (const v of node[f] ?? []) if (v) out.push(v);
+  }
+  for (const f of NUMERIC_FIELDS) {
+    const v = node[f];
+    if (typeof v === "string" && v) out.push(v);
+  }
+  out.push(...shapeTexts(node.shape));
+  out.push(...payloadTexts(node));
+  return out;
+}
+
 // src/validate.ts
 var TONES2 = new Set(TONES);
 var KINDS = new Set(NODE_KINDS);
@@ -4837,8 +4940,14 @@ function validate(diag) {
   const nodeIds = new Set(diag.nodes.map((n) => n.id));
   const edgeIds = new Set(diag.edges.map((e) => e.id));
   const stateIds = new Set(diag.states.map((s) => s.id));
-  const readableIds = /* @__PURE__ */ new Set([...stateIds, ...(diag.derived ?? []).map((d) => d.id)]);
-  const suggest = (target, candidates) => {
+  const readableIds = /* @__PURE__ */ new Set([
+    ...stateIds,
+    ...(diag.derived ?? []).map((d) => d.id),
+    ...(diag.inputs ?? []).map((i) => i.id),
+    ...(diag.formulas ?? []).map((f) => f.id),
+    ...(diag.scrollTriggers ?? []).map((t) => t.id)
+  ]);
+  const suggest = (target, candidates, candidateKind = "lane") => {
     const list = [...candidates];
     if (list.length === 0) return "";
     let best = "";
@@ -4850,7 +4959,7 @@ function validate(diag) {
         best = c;
       }
     }
-    return bestD <= 2 ? ` (\u3082\u3057\u304B\u3057\u3066 "${best}"?)` : ` (\u5B9A\u7FA9\u6E08 lane: ${list.slice(0, 5).join(", ")}${list.length > 5 ? "..." : ""})`;
+    return bestD <= 2 ? ` (\u3082\u3057\u304B\u3057\u3066 "${best}"?)` : ` (\u5B9A\u7FA9\u6E08 ${candidateKind}: ${list.slice(0, 5).join(", ")}${list.length > 5 ? "..." : ""})`;
   };
   for (const n of diag.nodes) {
     if (!laneIds.has(n.lane)) {
@@ -4863,13 +4972,13 @@ function validate(diag) {
   for (const e of diag.edges) {
     if (!nodeIds.has(e.from)) {
       errors.push(
-        `[cdl] unknown-ref: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.from, nodeIds)}
+        `[cdl] unknown-ref: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.from, nodeIds, "node")}
   \u2192 \u4FEE\u6B63\u4F8B: .node("${e.from}", { lane: "...", stack: 0, kind: "actor", title: "..." }) \u3092 edge \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
       );
     }
     if (!nodeIds.has(e.to)) {
       errors.push(
-        `[cdl] unknown-ref: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.to, nodeIds)}
+        `[cdl] unknown-ref: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.to, nodeIds, "node")}
   \u2192 \u4FEE\u6B63\u4F8B: .node("${e.to}", { lane: "...", stack: 0, kind: "...", title: "..." }) \u3092 edge \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
       );
     }
@@ -4886,6 +4995,16 @@ function validate(diag) {
         errors.push(`[cdl] unknown-ref: phase "${p.id}" \u306E activate "${id}" \u306F node \u3067\u3082 edge \u3067\u3082\u306A\u3044 (typo \u306E\u53EF\u80FD\u6027)`);
       }
     }
+    for (const id of p.draw ?? []) {
+      if (!nodeIds.has(id)) {
+        errors.push(`[cdl] unknown-ref: phase "${p.id}" \u306E draw "${id}" \u306F node \u3067\u306F\u306A\u3044 (typo \u306E\u53EF\u80FD\u6027)${suggest(id, nodeIds, "node")}`);
+        continue;
+      }
+      const kind = diag.nodes.find((n) => n.id === id)?.kind;
+      if (kind !== "chart-line") {
+        warnings.push(`phase "${p.id}" \u306E draw "${id}" \u306F kind "${kind}" \u3067\u3001 \u5DE6\u304B\u3089\u63CF\u304F\u52D5\u304D\u3092\u6301\u305F\u306A\u3044 (\u5BFE\u8C61\u306F chart-line)`);
+      }
+    }
     for (const t of p.tweens) {
       if (!stateIds.has(t.stateId)) {
         errors.push(`[cdl] unknown-ref: phase "${p.id}" tween \u5BFE\u8C61 state "${t.stateId}" \u672A\u5B9A\u7FA9`);
@@ -4904,10 +5023,7 @@ function validate(diag) {
     }
   }
   for (const n of diag.nodes) {
-    const checks = [];
-    if (n.value) checks.push(n.value);
-    if (n.rows) checks.push(...n.rows);
-    for (const text of checks) {
+    for (const text of nodeTemplateTexts(n)) {
       for (const id of templateRefIds(text)) {
         if (!readableIds.has(id)) {
           warnings.push(`node "${n.id}" \u304C\u672A\u5B9A\u7FA9 state "${id}" \u3092\u53C2\u7167`);
@@ -4935,8 +5051,7 @@ function validate(diag) {
     for (const s of p.sets) stateUsed.add(s.stateId);
   }
   for (const n of diag.nodes) {
-    const texts2 = [n.value, ...n.rows ?? []].filter(Boolean);
-    for (const text of texts2) {
+    for (const text of nodeTemplateTexts(n)) {
       for (const id of templateRefIds(text)) stateUsed.add(id);
     }
   }
@@ -5124,7 +5239,7 @@ function StateDiffCard({
           ] }) }),
           /* @__PURE__ */ jsx("tbody", { style: { color: "var(--cdl-text, #1a1f2a)" }, children: states.map((s) => {
             const initial = String(s.initial);
-            const current = stateValues[s.id] ?? initial;
+            const current = Object.hasOwn(stateValues, s.id) ? stateValues[s.id] : initial;
             const changed = initial !== current;
             return /* @__PURE__ */ jsxs("tr", { children: [
               /* @__PURE__ */ jsx("td", { className: "py-1 text-left text-[12px]", children: s.id }),
@@ -6434,21 +6549,32 @@ function resolveBoundText(raw, values) {
   return hasUnresolvedRef(resolved) ? { value: resolved, ok: false } : { value: resolved, ok: true };
 }
 function resolveTreeData(nodes, values) {
-  if (!nodes.some((n) => n.title.includes("{"))) return nodes;
+  const \u8AAD\u3080 = nodes.some((n) => n.title.includes("{") || (n.subtitle?.includes("{") ?? false));
+  if (!\u8AAD\u3080) return nodes;
   return nodes.map((n) => {
     const title = resolveBoundText(n.title, values);
-    const \u89E3\u6C7A\u5F8C = { ...n, title: title.value };
-    return title.ok ? \u89E3\u6C7A\u5F8C : { ...\u89E3\u6C7A\u5F8C, unresolved: true };
+    const subtitle = n.subtitle === void 0 ? void 0 : resolveBoundText(n.subtitle, values);
+    const \u89E3\u6C7A\u5F8C = {
+      ...n,
+      title: title.value,
+      ...subtitle ? { subtitle: subtitle.value } : {}
+    };
+    return title.ok && (subtitle?.ok ?? true) ? \u89E3\u6C7A\u5F8C : { ...\u89E3\u6C7A\u5F8C, unresolved: true };
   });
 }
 function resolveMindData(data, values) {
-  const \u8AAD\u3080 = data.rootTitle.includes("{") || data.branches.some((b) => b.title.includes("{"));
+  const \u8AAD\u3080 = data.rootTitle.includes("{") || data.branches.some((b) => b.title.includes("{") || (b.subtitle?.includes("{") ?? false));
   if (!\u8AAD\u3080) return data;
   const root = resolveBoundText(data.rootTitle, values);
   const branches = data.branches.map((b) => {
     const title = resolveBoundText(b.title, values);
-    const \u89E3\u6C7A\u5F8C2 = { ...b, title: title.value };
-    return title.ok ? \u89E3\u6C7A\u5F8C2 : { ...\u89E3\u6C7A\u5F8C2, unresolved: true };
+    const subtitle = b.subtitle === void 0 ? void 0 : resolveBoundText(b.subtitle, values);
+    const \u89E3\u6C7A\u5F8C2 = {
+      ...b,
+      title: title.value,
+      ...subtitle ? { subtitle: subtitle.value } : {}
+    };
+    return title.ok && (subtitle?.ok ?? true) ? \u89E3\u6C7A\u5F8C2 : { ...\u89E3\u6C7A\u5F8C2, unresolved: true };
   });
   const \u89E3\u6C7A\u5F8C = { ...data, rootTitle: root.value, branches };
   return root.ok ? \u89E3\u6C7A\u5F8C : { ...\u89E3\u6C7A\u5F8C, unresolved: true };
@@ -6456,7 +6582,9 @@ function resolveMindData(data, values) {
 function ChartLineNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -6477,6 +6605,24 @@ function ChartLineNode({
   const xAt = (idx) => PAD_LEFT + (data.length <= 1 ? canvasW / 2 : canvasW * idx / (data.length - 1));
   const yAt = (v) => plotTop + plotH - (v - vMin) / vRange * plotH;
   const points = data.map((d, idx) => `${xAt(idx)},${yAt(d.value)}`).join(" ");
+  const \u70B9\u307E\u3067\u306E\u9577\u3055 = [];
+  let \u7DDA\u306E\u5168\u9577 = 0;
+  let \u524D\u306E\u70B9;
+  for (const [idx, datum] of data.entries()) {
+    const \u4ECA\u306E\u70B9 = { x: xAt(idx), y: yAt(datum.value) };
+    if (\u524D\u306E\u70B9) {
+      \u7DDA\u306E\u5168\u9577 += Math.hypot(\u4ECA\u306E\u70B9.x - \u524D\u306E\u70B9.x, \u4ECA\u306E\u70B9.y - \u524D\u306E\u70B9.y);
+    }
+    \u70B9\u307E\u3067\u306E\u9577\u3055.push(\u7DDA\u306E\u5168\u9577);
+    \u524D\u306E\u70B9 = \u4ECA\u306E\u70B9;
+  }
+  const \u4F38\u3073 = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  const \u7DDA\u306E\u5148\u304C\u5C4A\u3044\u305F = (idx) => {
+    if (!drawing) return true;
+    if (data.length <= 1) return true;
+    if (\u7DDA\u306E\u5168\u9577 === 0) return true;
+    return \u4F38\u3073 >= (\u70B9\u307E\u3067\u306E\u9577\u3055[idx] ?? 0) / \u7DDA\u306E\u5168\u9577;
+  };
   const gridCount = 4;
   const gridTicks = Array.from({ length: gridCount + 1 }, (_, i) => {
     const v = vMin + vRange * i / gridCount;
@@ -6554,7 +6700,8 @@ function ChartLineNode({
         stroke: "var(--cdl-tone-accent, #2d6a8f)",
         strokeWidth: 2.5,
         strokeLinejoin: "round",
-        strokeLinecap: "round"
+        strokeLinecap: "round",
+        ...drawing ? { pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1 - \u4F38\u3073 } : {}
       }
     ),
     data.map((d, idx) => {
@@ -6565,40 +6712,43 @@ function ChartLineNode({
       const isValley = (prev === void 0 || d.value <= prev) && (next === void 0 || d.value <= next);
       const labelAbove = !isValley;
       const labelY = labelAbove ? cy - 12 : cy + 18;
+      const \u51FA\u3059 = \u7DDA\u306E\u5148\u304C\u5C4A\u3044\u305F(idx);
       return /* @__PURE__ */ jsxs("g", { "data-cdl-unresolved": d.unresolved ? "true" : void 0, children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx,
-            cy,
-            r: 5,
-            fill: "var(--cdl-node-fill, #ffffff)",
-            stroke: "var(--cdl-tone-accent, #2d6a8f)",
-            strokeWidth: 2.5
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx,
-            cy,
-            r: 2.5,
-            fill: "var(--cdl-tone-accent, #2d6a8f)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            "data-cdl-role": "chart-line-value",
-            x: cx,
-            y: labelY,
-            fontSize: 11,
-            fontWeight: 600,
-            textAnchor: "middle",
-            fill: "var(--cdl-text, #1a1f2a)",
-            children: d.value.toLocaleString()
-          }
-        ),
+        \u51FA\u3059 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 5,
+              fill: "var(--cdl-node-fill, #ffffff)",
+              stroke: "var(--cdl-tone-accent, #2d6a8f)",
+              strokeWidth: 2.5
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 2.5,
+              fill: "var(--cdl-tone-accent, #2d6a8f)"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              "data-cdl-role": "chart-line-value",
+              x: cx,
+              y: labelY,
+              fontSize: 11,
+              fontWeight: 600,
+              textAnchor: "middle",
+              fill: "var(--cdl-text, #1a1f2a)",
+              children: d.value.toLocaleString()
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           "text",
           {
@@ -6859,16 +7009,53 @@ function GanttNode({
   const rowGap = 20;
   const rowCount = tasks.length || 1;
   const rowH = Math.max(28, (canvasH - rowGap * (rowCount + 1)) / rowCount);
-  const maxIdx = Math.max(1, Math.ceil(Math.max(...tasks.map((t) => t.endIdx + 1), 1)));
+  const \u4F4D\u7F6E\u306E\u4E0A\u9650 = 1e6;
+  const \u53CE\u3081\u305F = tasks.map((t) => {
+    const \u59CB = Math.min(\u4F4D\u7F6E\u306E\u4E0A\u9650, Math.max(0, Number.isFinite(t.startIdx) ? t.startIdx : 0));
+    const \u7D42 = Math.min(\u4F4D\u7F6E\u306E\u4E0A\u9650, Math.max(\u59CB, Number.isFinite(t.endIdx) ? t.endIdx : \u59CB));
+    return { ...t, startIdx: \u59CB, endIdx: \u7D42 };
+  });
+  const \u5BA3\u8A00 = node.ganttAxisMax;
+  const \u5BA3\u8A00\u3057\u305F\u5C3A = typeof \u5BA3\u8A00 === "number" && Number.isFinite(\u5BA3\u8A00) && \u5BA3\u8A00 > 0 ? Math.min(\u4F4D\u7F6E\u306E\u4E0A\u9650, Math.ceil(\u5BA3\u8A00)) : void 0;
+  const maxIdx = \u5BA3\u8A00\u3057\u305F\u5C3A ?? Math.max(
+    1,
+    Math.ceil(Math.max(...\u53CE\u3081\u305F.flatMap((t) => [t.startIdx + 1, t.endIdx + 1]), 1))
+  );
   const cellW = canvasW / maxIdx;
+  const \u6700\u5F8C\u306E\u76EE\u76DB\u308A = maxIdx - 1;
+  const \u6574\u3048\u305F = \u5BA3\u8A00\u3057\u305F\u5C3A === void 0 ? \u53CE\u3081\u305F : \u53CE\u3081\u305F.map((t) => {
+    const \u59CB = Math.min(t.startIdx, \u6700\u5F8C\u306E\u76EE\u76DB\u308A);
+    const \u7D42 = Math.min(t.endIdx, \u6700\u5F8C\u306E\u76EE\u76DB\u308A);
+    const \u5BC4\u305B\u305F = \u59CB !== t.startIdx || \u7D42 !== t.endIdx;
+    return \u5BC4\u305B\u305F ? { ...t, startIdx: \u59CB, endIdx: \u7D42, clipped: true } : t;
+  });
+  const \u76EE\u76DB\u308A\u306E\u4E0A\u9650 = 200;
+  const \u76EE\u76DB\u308A\u306E\u9593\u9694 = Math.max(1, Math.ceil(maxIdx / \u76EE\u76DB\u308A\u306E\u4E0A\u9650));
+  const \u76EE\u76DB\u308A\u306E\u672C\u6570 = Math.ceil(maxIdx / \u76EE\u76DB\u308A\u306E\u9593\u9694);
   const xAt = (idx) => PAD_LEFT + idx * cellW;
   const yAt = (row) => PAD_TOP + rowGap + row * (rowH + rowGap);
-  const gridLabels = Array.from({ length: maxIdx }, (_, i) => {
-    const t = tasks.find((tt) => tt.startIdx === i);
-    return t?.startLabel ?? String(i);
-  });
-  const taskById = new Map(tasks.map((t) => [t.id, t]));
-  const rowOf = new Map(tasks.map((t, i) => [t.id, i]));
+  const \u540D\u524D = { \u6574\u6570\u306E\u958B\u59CB: /* @__PURE__ */ new Map(), \u6574\u6570\u306E\u7D42\u4E86: /* @__PURE__ */ new Map(), \u7AEF\u6570\u306E\u958B\u59CB: /* @__PURE__ */ new Map(), \u7AEF\u6570\u306E\u7D42\u4E86: /* @__PURE__ */ new Map() };
+  const \u7F6E\u304F = (\u8868, \u4F4D\u7F6E, label) => {
+    if (label !== "" && Number.isFinite(\u4F4D\u7F6E) && !\u8868.has(\u4F4D\u7F6E)) \u8868.set(\u4F4D\u7F6E, label);
+  };
+  for (const t of \u53CE\u3081\u305F) {
+    const \u6574\u6570\u306E\u958B\u59CB = Number.isInteger(t.startIdx);
+    \u7F6E\u304F(\u6574\u6570\u306E\u958B\u59CB ? \u540D\u524D.\u6574\u6570\u306E\u958B\u59CB : \u540D\u524D.\u7AEF\u6570\u306E\u958B\u59CB, Math.round(t.startIdx), t.startLabel);
+    const \u6574\u6570\u306E\u7D42\u4E86 = Number.isInteger(t.endIdx);
+    \u7F6E\u304F(\u6574\u6570\u306E\u7D42\u4E86 ? \u540D\u524D.\u6574\u6570\u306E\u7D42\u4E86 : \u540D\u524D.\u7AEF\u6570\u306E\u7D42\u4E86, Math.round(t.endIdx), t.endLabel);
+  }
+  const \u540D\u524D\u3092\u5F15\u304F = (i) => \u540D\u524D.\u6574\u6570\u306E\u958B\u59CB.get(i) ?? \u540D\u524D.\u6574\u6570\u306E\u7D42\u4E86.get(i) ?? \u540D\u524D.\u7AEF\u6570\u306E\u958B\u59CB.get(i) ?? \u540D\u524D.\u7AEF\u6570\u306E\u7D42\u4E86.get(i) ?? "";
+  const \u4F4D\u7F6E\u306E\u96C6\u5408 = /* @__PURE__ */ new Set();
+  for (let n = 0; n < \u76EE\u76DB\u308A\u306E\u672C\u6570; n += 1) \u4F4D\u7F6E\u306E\u96C6\u5408.add(n * \u76EE\u76DB\u308A\u306E\u9593\u9694);
+  for (const \u8868 of [\u540D\u524D.\u6574\u6570\u306E\u958B\u59CB, \u540D\u524D.\u6574\u6570\u306E\u7D42\u4E86, \u540D\u524D.\u7AEF\u6570\u306E\u958B\u59CB, \u540D\u524D.\u7AEF\u6570\u306E\u7D42\u4E86]) {
+    for (const i of \u8868.keys()) if (i >= 0 && i < maxIdx) \u4F4D\u7F6E\u306E\u96C6\u5408.add(i);
+  }
+  const gridLabels = [...\u4F4D\u7F6E\u306E\u96C6\u5408].sort((a, b) => a - b).map((i) => ({ \u4F4D\u7F6E: i, label: \u540D\u524D\u3092\u5F15\u304F(i) }));
+  const \u5E2F\u306E\u4F59\u767D = Math.min(6, cellW / 2);
+  const \u5E2F\u306E\u5DE6 = (idx) => xAt(idx) + \u5E2F\u306E\u4F59\u767D / 2;
+  const \u5E2F\u306E\u53F3 = (idx) => xAt(idx) + cellW - \u5E2F\u306E\u4F59\u767D / 2;
+  const taskById = new Map(\u6574\u3048\u305F.map((t) => [t.id, t]));
+  const rowOf = new Map(\u6574\u3048\u305F.map((t, i) => [t.id, i]));
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -6884,10 +7071,11 @@ function GanttNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    gridLabels.map((label, i) => /* @__PURE__ */ jsxs("g", { children: [
+    gridLabels.map(({ \u4F4D\u7F6E: i, label }) => /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx(
         "line",
         {
+          "data-cdl-role": "gantt-grid",
           x1: xAt(i),
           y1: PAD_TOP,
           x2: xAt(i),
@@ -6898,9 +7086,10 @@ function GanttNode({
           opacity: 0.5
         }
       ),
-      /* @__PURE__ */ jsx(
+      label === "" ? null : /* @__PURE__ */ jsx(
         "text",
         {
+          "data-cdl-role": "gantt-tick",
           x: xAt(i) + cellW / 2,
           y: PAD_TOP + canvasH + 18,
           fontSize: 11,
@@ -6922,7 +7111,7 @@ function GanttNode({
         opacity: 0.5
       }
     ),
-    tasks.map((t, row) => /* @__PURE__ */ jsx(
+    \u6574\u3048\u305F.map((t, row) => /* @__PURE__ */ jsx(
       "text",
       {
         x: PAD_LEFT - 12,
@@ -6935,16 +7124,17 @@ function GanttNode({
       },
       `label-${t.id}`
     )),
-    tasks.map((t, row) => {
-      const bx = xAt(t.startIdx) + 3;
+    \u6574\u3048\u305F.map((t, row) => {
+      const bx = \u5E2F\u306E\u5DE6(t.startIdx);
       const by = yAt(row);
-      const bw = Math.max(cellW - 6, (t.endIdx - t.startIdx + 1) * cellW - 6);
+      const bw = Math.max(0, \u5E2F\u306E\u53F3(t.endIdx) - bx);
       return /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx(
           "rect",
           {
             "data-cdl-role": "gantt-bar",
             "data-cdl-unresolved": t.unresolved ? "true" : void 0,
+            "data-cdl-clipped": "clipped" in t && t.clipped ? "true" : void 0,
             x: bx,
             y: by,
             width: bw,
@@ -6967,13 +7157,13 @@ function GanttNode({
         )
       ] }, `bar-${t.id}`);
     }),
-    tasks.filter((t) => t.dependsOn && taskById.has(t.dependsOn)).map((t) => {
+    \u6574\u3048\u305F.filter((t) => t.dependsOn && taskById.has(t.dependsOn)).map((t) => {
       const parent = taskById.get(t.dependsOn);
       const parentRow = rowOf.get(parent.id);
       const childRow = rowOf.get(t.id);
-      const parentBarRight = xAt(parent.endIdx) + cellW - 3;
+      const parentBarRight = \u5E2F\u306E\u53F3(parent.endIdx);
       const parentMidY = yAt(parentRow) + rowH / 2;
-      const childBarLeft = xAt(t.startIdx) + 3;
+      const childBarLeft = \u5E2F\u306E\u5DE6(t.startIdx);
       const childMidY = yAt(childRow) + rowH / 2;
       const arrowHeadSize = 8;
       const arrowHeadTipGap = 10;
@@ -7015,6 +7205,49 @@ function toneColor3(tone) {
   if (!tone) return TONE.accent;
   return TONE[tone];
 }
+
+// src/kinds/box-lines.ts
+var \u884C\u9001\u308A\u306E\u6BD4 = 1.15;
+var \u5B57\u306E\u9AD8\u3055\u306E\u6BD4 = 0.72;
+var \u4E0A\u4E0B\u306E\u4F59\u767D = 2;
+var \u5DE6\u53F3\u306E\u4F59\u767D = 8;
+function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E45, \u6E2C\u308B = textWidth) {
+  if (\u4F7F\u3048\u308B\u5E45 <= 0) return "";
+  if (\u6E2C\u308B(text, fontSize) <= \u4F7F\u3048\u308B\u5E45) return text;
+  const \u7701\u7565 = "\u2026";
+  const \u7701\u7565\u306E\u5E45 = \u6E2C\u308B(\u7701\u7565, fontSize);
+  if (\u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E45) return "";
+  let \u51FA = "";
+  let \u5E45 = 0;
+  for (const c of \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text)) {
+    const \u5B57\u306E\u5E452 = \u6E2C\u308B(c, fontSize);
+    if (\u5E45 + \u5B57\u306E\u5E452 + \u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E45) break;
+    \u5E45 += \u5B57\u306E\u5E452;
+    \u51FA += c;
+  }
+  return `${\u51FA}${\u7701\u7565}`;
+}
+function \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text) {
+  const \u533A\u5207\u308A = Intl.Segmenter;
+  if (typeof \u533A\u5207\u308A !== "function") return [...text];
+  return [...new \u533A\u5207\u308A(void 0, { granularity: "grapheme" }).segment(text)].map((g) => g.segment);
+}
+function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8\u3055) {
+  const \u5019\u88DC = \u884C.filter((r, i) => i === 0 || r.text.trim() !== "");
+  if (\u5019\u88DC.length === 0) return [];
+  const \u4F7F\u3048\u308B\u9AD8\u3055 = \u7BB1\u306E\u9AD8\u3055 - \u4E0A\u4E0B\u306E\u4F59\u767D * 2;
+  const \u9AD8\u3055 = (rs) => rs.reduce((a, r) => a + r.fontSize * \u884C\u9001\u308A\u306E\u6BD4, 0);
+  const \u6B8B\u3059 = [...\u5019\u88DC];
+  while (\u6B8B\u3059.length > 1 && \u9AD8\u3055(\u6B8B\u3059) > \u4F7F\u3048\u308B\u9AD8\u3055) \u6B8B\u3059.pop();
+  const \u4F7F\u3048\u308B\u5E45 = \u7BB1\u306E\u5E45 - \u5DE6\u53F3\u306E\u4F59\u767D * 2;
+  const \u7DCF\u9AD8 = \u9AD8\u3055(\u6B8B\u3059);
+  let \u7A4D\u307F = -\u7DCF\u9AD8 / 2;
+  return \u6B8B\u3059.map((r) => {
+    const dy = \u7A4D\u307F + (\u884C\u9001\u308A\u306E\u6BD4 + \u5B57\u306E\u9AD8\u3055\u306E\u6BD4) / 2 * r.fontSize;
+    \u7A4D\u307F += r.fontSize * \u884C\u9001\u308A\u306E\u6BD4;
+    return { ...r, text: \u5E45\u3067\u5207\u308B(r.text, r.fontSize, \u4F7F\u3048\u308B\u5E45), dy };
+  });
+}
 var MIND_TONES = ["accent", "teal", "success", "warning", "info", "error"];
 var MIND_BOX_GAP = 24;
 function MindMapNode({
@@ -7060,33 +7293,59 @@ function MindMapNode({
       },
       `edge-${i}`
     )),
-    layout2.nodes.map((n) => /* @__PURE__ */ jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
-      /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: n.x - n.w / 2,
-          y: n.y - n.h / 2,
-          width: n.w,
-          height: n.h,
-          rx: n.isRoot ? 22 : 10,
-          fill: n.isRoot ? toneColor4(n.tone ?? "accent") : "var(--cdl-chip-fill, #f4f6fb)",
-          stroke: n.isRoot ? toneColor4(n.tone ?? "accent") : toneColor4(n.tone),
-          strokeWidth: n.isRoot ? 2 : 1.75
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: n.x,
-          y: n.y + 5,
-          fontSize: n.isRoot ? 15 : 13,
-          fontWeight: n.isRoot ? 700 : 600,
-          textAnchor: "middle",
-          fill: n.isRoot ? "var(--cdl-text-on-tone, #ffffff)" : "var(--cdl-chip-text, #1a1f2a)",
-          children: n.title
-        }
-      )
-    ] }, `n-${n.id}`))
+    layout2.nodes.map((n) => {
+      const \u884C = \u7BB1\u306B\u7A4D\u3080(
+        [
+          { \u5F79\u5272: "title", text: n.title, fontSize: n.isRoot ? 15 : 13 },
+          { \u5F79\u5272: "subtitle", text: n.subtitle ?? "", fontSize: 9 }
+        ],
+        n.w,
+        n.h
+      );
+      const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
+      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(
+          "rect",
+          {
+            x: n.x - n.w / 2,
+            y: n.y - n.h / 2,
+            width: n.w,
+            height: n.h,
+            rx: n.isRoot ? 22 : 10,
+            fill: n.isRoot ? toneColor4(n.tone ?? "accent") : "var(--cdl-chip-fill, #f4f6fb)",
+            stroke: n.isRoot ? toneColor4(n.tone ?? "accent") : toneColor4(n.tone),
+            strokeWidth: n.isRoot ? 2 : 1.75
+          }
+        ),
+        \u88DC\u8DB3\u3042\u308A ? \u884C.map((r) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            "data-cdl-role": r.\u5F79\u5272 === "subtitle" ? "mind-node-subtitle" : void 0,
+            x: n.x,
+            y: n.y + r.dy,
+            fontSize: r.fontSize,
+            fontWeight: r.\u5F79\u5272 === "title" ? n.isRoot ? 700 : 600 : 500,
+            textAnchor: "middle",
+            fill: \u6587\u5B57\u306E\u8272,
+            opacity: r.\u5F79\u5272 === "subtitle" ? 0.85 : void 0,
+            children: r.text
+          },
+          r.\u5F79\u5272
+        )) : /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: n.x,
+            y: n.y + 5,
+            fontSize: n.isRoot ? 15 : 13,
+            fontWeight: n.isRoot ? 700 : 600,
+            textAnchor: "middle",
+            fill: \u6587\u5B57\u306E\u8272,
+            children: n.title
+          }
+        )
+      ] }, `n-${n.id}`);
+    })
   ] });
 }
 function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
@@ -7208,6 +7467,7 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
     nodes.push({
       id: node.id,
       title: node.title,
+      ...node.subtitle !== void 0 ? { subtitle: node.subtitle } : {},
       x,
       y,
       w,
@@ -7412,6 +7672,9 @@ function QuadrantNode({
   const PAD_BOTTOM = 56;
   const AXIS_LABEL_FONT = 12;
   const PAD_MIN = 60;
+  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 padBudget = Math.max(0, node.w * 0.5 - PAD_MIN * 2);
   const wantLeft = axisLabelPad(data.xAxis.left) - PAD_MIN;
@@ -7507,6 +7770,12 @@ function QuadrantNode({
       const qxStart = (isLeft ? PAD_LEFT : cx) + 18;
       const qyStart = (isTop ? PAD_TOP : cy) + 44;
       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(
+        \u67A0\u306E\u4F59\u5730,
+        Math.max(ITEM_MIN_W, measureTextWidth(title, { fontSize: ITEM_FONT}) + ITEM_PAD_X * 2)
+      );
       const qHalfH = halfH - 60;
       const gap = 10;
       const rowH = 34;
@@ -7521,7 +7790,7 @@ function QuadrantNode({
               "data-cdl-unresolved": it.unresolved ? "true" : void 0,
               x: qxStart,
               y: py,
-              width: qHalfW,
+              width: \u67A0\u306E\u5E45(it.title),
               height: rowH,
               rx: 6,
               fill: "var(--cdl-node-fill, #ffffff)",
@@ -7529,12 +7798,35 @@ function QuadrantNode({
               strokeWidth: 1.5
             }
           ),
-          /* @__PURE__ */ jsx("text", { x: qxStart + 12, y: py + rowH / 2 + 5, fontSize: 13, fontWeight: 600, fill: "var(--cdl-text, #1a1f2a)", children: it.title })
+          /* @__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}`);
       });
     })
   ] });
 }
+function \u7BB1\u306E\u6587\u5B57({
+  \u884C,
+  x,
+  \u7BB1\u306E\u9AD8\u3055,
+  fill,
+  \u540D\u524D\u306E\u592A\u3055
+}) {
+  return \u884C.map((r) => /* @__PURE__ */ jsx(
+    "text",
+    {
+      "data-cdl-role": r.\u5F79\u5272 === "subtitle" ? "tree-node-subtitle" : void 0,
+      x,
+      y: \u7BB1\u306E\u9AD8\u3055 / 2 + r.dy,
+      fontSize: r.fontSize,
+      fontWeight: r.\u5F79\u5272 === "title" ? \u540D\u524D\u306E\u592A\u3055 : 500,
+      textAnchor: "middle",
+      fill,
+      opacity: r.\u5F79\u5272 === "subtitle" ? 0.85 : void 0,
+      children: r.text
+    },
+    r.\u5F79\u5272
+  ));
+}
 function TreeNode({
   node,
   active,
@@ -7597,6 +7889,15 @@ function TreeNode({
     layout2.nodes.map((n) => {
       const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0];
       const isRoot = n.depth === 0;
+      const \u884C = \u7BB1\u306B\u7A4D\u3080(
+        [
+          { \u5F79\u5272: "title", text: n.title, fontSize: isRoot ? 13 : 12 },
+          { \u5F79\u5272: "subtitle", text: n.subtitle ?? "", fontSize: 9 }
+        ],
+        n.w,
+        n.h
+      );
+      const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
       return /* @__PURE__ */ jsx(
         "g",
         {
@@ -7615,7 +7916,13 @@ function TreeNode({
                 fill: `url(#${gradientId})`
               }
             ),
-            /* @__PURE__ */ jsx(
+            \u88DC\u8DB3\u3042\u308A ? \u7BB1\u306E\u6587\u5B57({
+              \u884C,
+              x: n.w / 2,
+              \u7BB1\u306E\u9AD8\u3055: n.h,
+              fill: "var(--cdl-text-on-tone, #ffffff)",
+              \u540D\u524D\u306E\u592A\u3055: 700
+            }) : /* @__PURE__ */ jsx(
               "text",
               {
                 x: n.w / 2,
@@ -7643,7 +7950,13 @@ function TreeNode({
               }
             ),
             /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: 4, height: n.h, rx: 2, fill: accent }),
-            /* @__PURE__ */ jsx(
+            \u88DC\u8DB3\u3042\u308A ? \u7BB1\u306E\u6587\u5B57({
+              \u884C,
+              x: n.w / 2 + 2,
+              \u7BB1\u306E\u9AD8\u3055: n.h,
+              fill: "var(--cdl-chip-text, #1a1f2a)",
+              \u540D\u524D\u306E\u592A\u3055: 600
+            }) : /* @__PURE__ */ jsx(
               "text",
               {
                 x: n.w / 2 + 2,
@@ -7724,6 +8037,7 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
     nodes.push({
       id: n.id,
       title: n.title,
+      ...n.subtitle !== void 0 ? { subtitle: n.subtitle } : {},
       x,
       y,
       w: nodeW,
@@ -8014,42 +8328,106 @@ var BOTTOM_PAD = 4;
 var ASCENT2 = 0.72;
 var DESCENT2 = 0.25;
 var ART_GAP = 4;
+var ART_MIN_BAND = 45;
+var \u843D\u3068\u3057\u3066\u3082\u63CF\u304F\u7A2E\u5225 = {
+  \u80A9\u66F8: /* @__PURE__ */ new Set([
+    // basement 系 = `commonLabel` が自前の帯に置く
+    "shape-file",
+    "shape-folder",
+    "shape-cloud",
+    "shape-cylinder",
+    "shape-hexagon",
+    "shape-diamond",
+    "shape-stack",
+    // software 系 = 固有 layout
+    "shape-window",
+    "shape-terminal",
+    "shape-code-block",
+    "shape-message-bubble",
+    "shape-gear",
+    // hardware 系のうち固有 layout を持つもの
+    "shape-iot-sensor",
+    "shape-robot-arm"
+  ]),
+  \u8AAC\u660E: /* @__PURE__ */ new Set([
+    // basement 系 = `commonLabel` が自前の帯に置く
+    "shape-file",
+    "shape-folder",
+    "shape-cloud",
+    "shape-cylinder",
+    "shape-hexagon",
+    "shape-diamond",
+    "shape-stack",
+    // software 系 = 固有 layout
+    "shape-window",
+    "shape-message-bubble",
+    "shape-gear",
+    // hardware / blockchain 系のうち固有 layout を持つもの
+    "shape-iot-sensor",
+    "shape-robot-arm",
+    "shape-blockchain-block"
+  ])
+};
+function droppedLineIsHidden(kind, line) {
+  return kind.startsWith("shape-") && !\u843D\u3068\u3057\u3066\u3082\u63CF\u304F\u7A2E\u5225[line].has(kind);
+}
 function labelPlan(node) {
   const \u9AD8\u3055 = Math.max(0, node.h);
   const \u5E95 = node.cy + \u9AD8\u3055 / 2;
   const \u5929 = node.cy - \u9AD8\u3055 / 2;
-  const \u7A4D\u3080 = (\u540D\u524D\u59272, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u4F59\u767D2) => {
-    const \u5C0F\u3055\u3044\u5B572 = Math.max(1, Math.round(\u540D\u524D\u59272 * SUB_RATIO));
-    let y = \u5E95 - \u4E0B\u4F59\u767D2;
-    const \u8AAC\u660E = \u8AAC\u660E\u3042\u308A2 ? { y, size: \u5C0F\u3055\u3044\u5B572 } : null;
-    if (\u8AAC\u660E !== null) y -= \u5C0F\u3055\u3044\u5B572 + LINE_GAP;
-    const \u540D\u524D = { y, size: \u540D\u524D\u59272 };
-    y -= \u540D\u524D\u59272 + LINE_GAP;
-    const \u80A9\u66F8 = \u80A9\u66F8\u3042\u308A2 ? { y, size: \u5C0F\u3055\u3044\u5B572 } : null;
+  const \u7A4D\u3080 = (\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u4F59\u767D) => {
+    const \u5C0F\u3055\u3044\u5B57 = Math.max(1, Math.round(\u540D\u524D\u5927 * SUB_RATIO));
+    let y = \u5E95 - \u4E0B\u4F59\u767D;
+    const \u8AAC\u660E = \u8AAC\u660E\u3042\u308A2 ? { y, size: \u5C0F\u3055\u3044\u5B57 } : null;
+    if (\u8AAC\u660E !== null) y -= \u5C0F\u3055\u3044\u5B57 + LINE_GAP;
+    const \u540D\u524D = { y, size: \u540D\u524D\u5927 };
+    y -= \u540D\u524D\u5927 + LINE_GAP;
+    const \u80A9\u66F8 = \u80A9\u66F8\u3042\u308A2 ? { y, size: \u5C0F\u3055\u3044\u5B57 } : null;
     const \u4E0A\u306E\u884C = \u80A9\u66F8 ?? \u540D\u524D;
     return { \u540D\u524D, \u8AAC\u660E, \u80A9\u66F8, \u4E0A\u7AEF: \u4E0A\u306E\u884C.y - \u4E0A\u306E\u884C.size * ASCENT2 };
   };
   const \u5165\u308B = (\u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2) => \u7A4D\u3080(1, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, 1 * DESCENT2).\u4E0A\u7AEF >= \u5929;
   let \u8AAC\u660E\u3042\u308A = Boolean(node.subtitle);
   let \u80A9\u66F8\u3042\u308A = Boolean(node.eyebrow);
-  if (!\u5165\u308B(\u8AAC\u660E\u3042\u308A, \u80A9\u66F8\u3042\u308A)) \u80A9\u66F8\u3042\u308A = false;
-  if (!\u5165\u308B(\u8AAC\u660E\u3042\u308A, \u80A9\u66F8\u3042\u308A)) \u8AAC\u660E\u3042\u308A = false;
-  const \u4E0A\u9650 = Math.min(TITLE_MAX, Math.max(1, Math.round(\u9AD8\u3055 * TITLE_RATIO)));
-  let \u540D\u524D\u5927 = 0;
-  for (let size = \u4E0A\u9650; size >= 1; size--) {
-    const \u5C0F\u3055\u3044\u5B572 = Math.max(1, Math.round(size * SUB_RATIO));
-    const \u4E0B\u306E\u884C\u5927 = \u8AAC\u660E\u3042\u308A ? \u5C0F\u3055\u3044\u5B572 : size;
-    if (\u7A4D\u3080(size, \u8AAC\u660E\u3042\u308A, \u80A9\u66F8\u3042\u308A, \u4E0B\u306E\u884C\u5927 * DESCENT2).\u4E0A\u7AEF >= \u5929) {
-      \u540D\u524D\u5927 = size;
-      break;
-    }
+  const \u843D\u3068\u3057\u305F = [];
+  if (!\u5165\u308B(\u8AAC\u660E\u3042\u308A, \u80A9\u66F8\u3042\u308A) && \u80A9\u66F8\u3042\u308A) {
+    \u80A9\u66F8\u3042\u308A = false;
+    \u843D\u3068\u3057\u305F.push("\u80A9\u66F8");
+  }
+  if (!\u5165\u308B(\u8AAC\u660E\u3042\u308A, \u80A9\u66F8\u3042\u308A) && \u8AAC\u660E\u3042\u308A) {
+    \u8AAC\u660E\u3042\u308A = false;
+    \u843D\u3068\u3057\u305F.push("\u8AAC\u660E");
+  }
+  const \u7D44\u3080 = (\u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2) => {
+    const \u4E0A\u9650 = Math.min(TITLE_MAX, Math.max(1, Math.round(\u9AD8\u3055 * TITLE_RATIO)));
+    let \u540D\u524D\u5927 = 0;
+    for (let size = \u4E0A\u9650; size >= 1; size--) {
+      const \u5C0F\u3055\u3044\u5B572 = Math.max(1, Math.round(size * SUB_RATIO));
+      const \u4E0B\u306E\u884C\u5927 = \u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B572 : size;
+      if (\u7A4D\u3080(size, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u306E\u884C\u5927 * DESCENT2).\u4E0A\u7AEF >= \u5929) {
+        \u540D\u524D\u5927 = size;
+        break;
+      }
+    }
+    if (\u540D\u524D\u5927 === 0) \u540D\u524D\u5927 = \u9AD8\u3055 / (ASCENT2 + DESCENT2);
+    const \u5C0F\u3055\u3044\u5B57 = Math.max(1, Math.round(\u540D\u524D\u5927 * SUB_RATIO));
+    const \u5F35\u308A\u51FA\u3057 = (\u8AAC\u660E\u3042\u308A2 ? \u5C0F\u3055\u3044\u5B57 : \u540D\u524D\u5927) * DESCENT2;
+    const \u4F59\u308A = Math.max(0, \u7A4D\u3080(\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u5F35\u308A\u51FA\u3057).\u4E0A\u7AEF - \u5929);
+    const \u4E0B\u4F59\u767D = Math.min(Math.max(BOTTOM_PAD, \u5F35\u308A\u51FA\u3057), \u5F35\u308A\u51FA\u3057 + \u4F59\u308A);
+    return \u7A4D\u3080(\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A2, \u80A9\u66F8\u3042\u308A2, \u4E0B\u4F59\u767D);
+  };
+  const \u7D75\u306E\u5E2F = (\u7D442) => Math.max(0, \u7D442.\u4E0A\u7AEF - ART_GAP - \u5929);
+  let \u7D44 = \u7D44\u3080(\u8AAC\u660E\u3042\u308A, \u80A9\u66F8\u3042\u308A);
+  if (\u7D75\u306E\u5E2F(\u7D44) < ART_MIN_BAND && \u80A9\u66F8\u3042\u308A) {
+    \u80A9\u66F8\u3042\u308A = false;
+    \u843D\u3068\u3057\u305F.push("\u80A9\u66F8");
+    \u7D44 = \u7D44\u3080(\u8AAC\u660E\u3042\u308A, \u80A9\u66F8\u3042\u308A);
+  }
+  if (\u7D75\u306E\u5E2F(\u7D44) < ART_MIN_BAND && \u8AAC\u660E\u3042\u308A) {
+    \u8AAC\u660E\u3042\u308A = false;
+    \u843D\u3068\u3057\u305F.push("\u8AAC\u660E");
+    \u7D44 = \u7D44\u3080(\u8AAC\u660E\u3042\u308A, \u80A9\u66F8\u3042\u308A);
   }
-  if (\u540D\u524D\u5927 === 0) \u540D\u524D\u5927 = \u9AD8\u3055 / (ASCENT2 + DESCENT2);
-  const \u5C0F\u3055\u3044\u5B57 = Math.max(1, Math.round(\u540D\u524D\u5927 * SUB_RATIO));
-  const \u5F35\u308A\u51FA\u3057 = (\u8AAC\u660E\u3042\u308A ? \u5C0F\u3055\u3044\u5B57 : \u540D\u524D\u5927) * DESCENT2;
-  const \u4F59\u308A = Math.max(0, \u7A4D\u3080(\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A, \u80A9\u66F8\u3042\u308A, \u5F35\u308A\u51FA\u3057).\u4E0A\u7AEF - \u5929);
-  const \u4E0B\u4F59\u767D = Math.min(Math.max(BOTTOM_PAD, \u5F35\u308A\u51FA\u3057), \u5F35\u308A\u51FA\u3057 + \u4F59\u308A);
-  const \u7D44 = \u7A4D\u3080(\u540D\u524D\u5927, \u8AAC\u660E\u3042\u308A, \u80A9\u66F8\u3042\u308A, \u4E0B\u4F59\u767D);
   const \u4E00\u756A\u5C0F\u3055\u3044\u884C = Math.min(
     ...[\u7D44.\u540D\u524D, \u7D44.\u8AAC\u660E, \u7D44.\u80A9\u66F8].filter((l) => l !== null).map((l) => l.size)
   );
@@ -8058,7 +8436,8 @@ function labelPlan(node) {
     \u8AAC\u660E: \u7D44.\u8AAC\u660E,
     \u80A9\u66F8: \u7D44.\u80A9\u66F8,
     top: \u7D44.\u4E0A\u7AEF,
-    \u8AAD\u3081\u308B: \u4E00\u756A\u5C0F\u3055\u3044\u884C >= TITLE_MIN
+    \u8AAD\u3081\u308B: \u4E00\u756A\u5C0F\u3055\u3044\u884C >= TITLE_MIN,
+    \u843D\u3068\u3057\u305F
   };
 }
 function shapeRegion(node) {
@@ -10326,6 +10705,15 @@ function ShapeSmartContractNode({ node, active }) {
     bottomLabel2(node, r.cx, r.label)
   ] });
 }
+var \u5B57\u306E\u5E45 = (text, size) => Math.max(displayWidth(text) * size * MONO_ADVANCE_RATIO, textWidth(text, size));
+var BLOCK_DEFAULT_FIELDS = [
+  { label: "hash", value: "0xaf31c9d2..." },
+  { label: "prev", value: "0x7b3f92c1..." },
+  { label: "merkle", value: "0xc1892f4a..." },
+  { label: "nonce", value: "82,914" },
+  { label: "tx", value: "142 tx" }
+];
+var BLOCK_DEFAULT_TITLE = "Block #421,873";
 function ShapeBlockchainBlockNode({ node, active }) {
   const frame = commonFrame4(active);
   const r = shapeRegion(node);
@@ -10335,21 +10723,22 @@ function ShapeBlockchainBlockNode({ node, active }) {
   const cy = r.cy;
   const x = cx - bw / 2;
   const y = cy - bh / 2;
+  const \u6E21\u3055\u308C\u305F = (v) => (v ?? "").trim();
+  const \u898B\u51FA\u3057 = \u6E21\u3055\u308C\u305F(node.title) || BLOCK_DEFAULT_TITLE;
+  const fields = BLOCK_DEFAULT_FIELDS.map((f) => ({
+    label: f.label,
+    value: f.label === "hash" ? \u6E21\u3055\u308C\u305F(node.subtitle) || f.value : f.value
+  }));
+  const \u898B\u51FA\u3057\u306E\u5E45 = bw - 14 - 30;
   const art = /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx("rect", { x: x + 6, y: y + 6, width: bw, height: bh, rx: 8, fill: frame.stroke, opacity: 0.2, stroke: "none" }),
     /* @__PURE__ */ jsx("rect", { "data-cdl-role": "node-body", x, y, width: bw, height: bh, rx: 8, ...frame }),
     /* @__PURE__ */ jsx("path", { d: `M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`, fill: "var(--cdl-tone-accent, #2d6a8f)", fillOpacity: 0.9, stroke: "none" }),
-    /* @__PURE__ */ jsx("text", { x: x + 14, y: y + 22, fontSize: 13, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#ffffff", children: "Block #421,873" }),
+    /* @__PURE__ */ jsx("text", { "data-cdl-role": "blockchain-block-title", x: x + 14, y: y + 22, fontSize: 13, fontWeight: 700, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "#ffffff", children: \u5E45\u3067\u5207\u308B(\u898B\u51FA\u3057, 13, \u898B\u51FA\u3057\u306E\u5E45, \u5B57\u306E\u5E45) }),
     /* @__PURE__ */ jsx("circle", { cx: x + bw - 16, cy: y + 16, r: 5.5, fill: "#7cd88f", stroke: "#ffffff", strokeWidth: 1.5 }),
-    [
-      { label: "hash", value: "0xaf31c9d2..." },
-      { label: "prev", value: "0x7b3f92c1..." },
-      { label: "merkle", value: "0xc1892f4a..." },
-      { label: "nonce", value: "82,914" },
-      { label: "tx", value: "142 tx" }
-    ].map((f, i) => /* @__PURE__ */ jsxs("g", { children: [
+    fields.map((f, i) => /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx("text", { x: x + 14, y: y + 54 + i * 22, fontSize: 10.5, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fill: "var(--cdl-text-dim, #5a6270)", children: f.label }),
-      /* @__PURE__ */ jsx("text", { x: x + bw - 14, y: y + 54 + i * 22, fontSize: 11, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 600, textAnchor: "end", fill: "var(--cdl-text, #1a1f2a)", children: f.value }),
+      /* @__PURE__ */ jsx("text", { "data-cdl-role": `blockchain-block-${f.label}`, x: x + bw - 14, y: y + 54 + i * 22, fontSize: 11, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontWeight: 600, textAnchor: "end", fill: "var(--cdl-text, #1a1f2a)", children: \u5E45\u3067\u5207\u308B(f.value, 11, bw - 28 - \u5B57\u306E\u5E45(f.label, 10.5) - 8, \u5B57\u306E\u5E45) }),
       /* @__PURE__ */ jsx("line", { x1: x + 14, y1: y + 60 + i * 22, x2: x + bw - 14, y2: y + 60 + i * 22, stroke: "var(--cdl-divider, #d4d4d8)", strokeWidth: 0.5, opacity: 0.5 })
     ] }, i)),
     /* @__PURE__ */ jsxs("g", { transform: `translate(${cx - 32}, ${y + bh - 26})`, children: [
@@ -11835,6 +12224,7 @@ function ShapeCustomerServiceNode({ node, active }) {
 function CdlNodeView({
   node,
   active,
+  drawing = false,
   progress,
   stateValues,
   currentPhaseId
@@ -11884,7 +12274,16 @@ function CdlNodeView({
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
       // 親子の繋がりと、描かれない欄 (補足) は解決しない。
       case "chart-line":
-        return /* @__PURE__ */ jsx(ChartLineNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          ChartLineNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-pie":
         return /* @__PURE__ */ jsx(ChartPieNode, { node: resolvedNode, active, stateValues });
       case "chart-bar":
@@ -12045,6 +12444,29 @@ function CdlNodeView({
     }
   );
 }
+
+// src/layout/lifeline.ts
+function lifelineStartYs(nodes) {
+  const topmost = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const cur = topmost.get(n.lane);
+    if (cur === void 0 || n.cy < cur.cy) topmost.set(n.lane, n);
+  }
+  const starts = /* @__PURE__ */ new Map();
+  for (const [laneId, n] of topmost) starts.set(laneId, n.cy + n.h / 2);
+  return starts;
+}
+function uniformLifelineEndY(lanes, nodes, starts = lifelineStartYs(nodes)) {
+  const lifelineLanes = lanes.filter((l) => l.lifeline);
+  let deepestStart = Number.NEGATIVE_INFINITY;
+  for (const lane of lifelineLanes) {
+    const start = starts.get(lane.id);
+    if (start !== void 0) deepestStart = Math.max(deepestStart, start);
+  }
+  const footerTops = lifelineFooterNodes(lanes, nodes).map((f) => footerShapeDrawTop(f)).filter((top) => top > deepestStart);
+  if (footerTops.length > 0) return Math.min(...footerTops);
+  return lifelineLanes[0] ? lifelineLanes[0].y + lifelineLanes[0].height : 0;
+}
 function CdlStage({
   laid,
   currentPhase,
@@ -12055,15 +12477,14 @@ function CdlStage({
   svgRef
 }) {
   const activeSet = new Set(currentPhase?.activate ?? []);
-  const lifelineLanes = laid.lanes.filter((l) => l.lifeline);
-  const { footerTops, footerDropById } = useMemo(() => {
-    const footers = lifelineFooterNodes(laid.lanes, laid.nodes);
+  const drawSet = new Set(currentPhase?.draw ?? []);
+  const { lifelineStarts, uniformFooterTop } = useMemo(() => {
+    const starts = lifelineStartYs(laid.nodes);
     return {
-      footerTops: footers.map((f) => f.cy - f.h / 2),
-      footerDropById: footerShapeDropsOf(footers)
+      lifelineStarts: starts,
+      uniformFooterTop: uniformLifelineEndY(laid.lanes, laid.nodes, starts)
     };
   }, [laid]);
-  const uniformFooterTop = footerTops.length > 0 ? Math.min(...footerTops) : lifelineLanes[0] ? lifelineLanes[0].y + lifelineLanes[0].height : 0;
   const diagramScale = laid.diagramScale ?? 1;
   return /* @__PURE__ */ jsxs("div", { className: compact ? "px-3 py-3" : "px-6 py-6", style: compact ? void 0 : { minHeight: 460 }, children: [
     /* @__PURE__ */ jsxs(
@@ -12150,11 +12571,8 @@ function CdlStage({
                   }
                 ),
                 lane.lifeline && (() => {
-                  const laneNodes = laid.nodes.filter((n) => n.lane === lane.id);
-                  if (laneNodes.length === 0) return null;
-                  const sortedByCy = laneNodes.slice().sort((a, b) => a.cy - b.cy);
-                  const header = sortedByCy[0];
-                  const y1 = header.cy + header.h / 2;
+                  const y1 = lifelineStarts.get(lane.id);
+                  if (y1 === void 0) return null;
                   const y2 = uniformFooterTop;
                   if (y2 <= y1) return null;
                   return /* @__PURE__ */ jsx(
@@ -12196,13 +12614,13 @@ function CdlStage({
               {
                 node,
                 active: activeSet.has(node.id),
+                drawing: drawSet.has(node.id),
                 progress,
                 stateValues,
                 currentPhaseId: currentPhase?.id
               }
             );
-            const dy = footerDropById.get(node.id);
-            return dy === void 0 ? /* @__PURE__ */ jsx("g", { children: view }, node.id) : /* @__PURE__ */ jsx("g", { transform: `translate(0, ${dy})`, children: view }, node.id);
+            return /* @__PURE__ */ jsx("g", { children: view }, node.id);
           }),
           laid.edges.filter((edge) => Boolean(edge.dThrough)).map((edge) => /* @__PURE__ */ jsx(CdlEdgeGlowView, { edge, active: activeSet.has(edge.id) }, `glow-${edge.id}`)),
           laid.edges.map((edge) => /* @__PURE__ */ jsx(
@@ -21084,6 +21502,7 @@ function emptyCounts() {
     "validate-performance-budget": 0,
     "node-inside-viewbox": 0,
     "node-inside-lane": 0,
+    "shape-label-dropped": 0,
     "edge-inside-viewbox": 0,
     "lane-label-inside-viewbox": 0,
     "lane-label-overlap": 0,
@@ -21737,6 +22156,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
   for (const n of laid.nodes) {
     if (n.id.endsWith("-spacer")) continue;
     if (!rendersTitleText(n.kind)) continue;
+    if (fitsOwnTitleWidth(n.kind)) continue;
     if (!isRenderedNode(n)) continue;
     const titleTrimmed = n.title?.trim() ?? "";
     if (!titleTrimmed) continue;
@@ -21993,6 +22413,15 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
       );
     }
   }
+  for (const n of laid.nodes) {
+    const \u843D\u3068\u3057\u305F = labelPlan(n).\u843D\u3068\u3057\u305F.filter((line) => droppedLineIsHidden(n.kind, line));
+    if (\u843D\u3068\u3057\u305F.length === 0) continue;
+    push(
+      "shape-label-dropped",
+      `node "${n.id}" (${n.kind}, ${n.w.toFixed(0)}x${n.h.toFixed(0)}) \u306F\u66F8\u3044\u305F ${\u843D\u3068\u3057\u305F.join(" / ")} \u304C\u63CF\u304B\u308C\u306A\u3044\u3002 \u7BB1\u3092\u9AD8\u304F\u3059\u308B\u304B\u3001 \u305D\u306E\u884C\u3092\u6D88\u3059`,
+      "warn"
+    );
+  }
   for (const e of laid.edges) {
     const segs = flattenPathSegments(extractPathSegments(e.d));
     if (segs.length === 0) continue;
@@ -23182,14 +23611,7 @@ function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hideMiniP
   );
   const stateValues = useMemo(() => {
     if (!isInteractive) return baseStateValues;
-    const merged = { ...baseStateValues };
-    for (const key of Object.keys(interactive.stateOverrides)) {
-      const v = interactive.stateOverrides[key];
-      if (typeof v === "number" || typeof v === "string" || typeof v === "boolean") {
-        merged[key] = String(v);
-      }
-    }
-    return merged;
+    return mergeStateValues(baseStateValues, interactive.stateOverrides);
   }, [isInteractive, baseStateValues, interactive.stateOverrides]);
   return /* @__PURE__ */ jsxs(
     "div",