@cardenelabs/cdl 0.11.0 → 0.12.1

package/dist/react.js

@@ -4884,7 +4884,16 @@ function nodeTemplateTexts(node) {
 
 // src/validate.ts
 var TONES2 = new Set(TONES);
-var DRAW_KINDS = /* @__PURE__ */ new Set(["chart-line", "chart-bar", "chart-pie"]);
+var DRAW_KINDS = /* @__PURE__ */ new Set([
+  "chart-line",
+  "chart-bar",
+  "chart-pie",
+  "journey-map",
+  "mind-map",
+  "tree-hierarchy",
+  "gantt-timeline",
+  "funnel-stages"
+]);
 var KINDS = new Set(NODE_KINDS);
 var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
 function validate(diag) {
@@ -6582,6 +6591,44 @@ function resolveMindData(data, values) {
   const \u89E3\u6C7A\u5F8C = { ...data, rootTitle: root.value, branches };
   return root.ok ? \u89E3\u6C7A\u5F8C : { ...\u89E3\u6C7A\u5F8C, unresolved: true };
 }
+
+// src/kinds/draw-progress.ts
+function \u9032\u307F\u3092\u7573\u3080(drawing, progress) {
+  if (!drawing) return 1;
+  return Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1));
+}
+function \u4F38\u3070\u3059dash(drawing, \u4F38\u3073) {
+  if (!drawing) return {};
+  return { pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1 - \u4F38\u3073 };
+}
+function \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, \u6DF1\u3055, \u6700\u5927\u6DF1\u3055) {
+  if (\u6700\u5927\u6DF1\u3055 <= 0 || \u6DF1\u3055 <= 0) return 1;
+  const \u5E45 = 1 / \u6700\u5927\u6DF1\u3055;
+  const \u59CB\u307E\u308A = (\u6DF1\u3055 - 1) * \u5E45;
+  return Math.min(1, Math.max(0, (\u4F38\u3073 - \u59CB\u307E\u308A) / \u5E45));
+}
+function \u30D9\u30B8\u30A8\u306E\u7D2F\u7A4D\u5272\u5408(\u70B9, \u5236\u5FA1\u70B9, \u5206\u5272\u6570 = 16) {
+  if (\u70B9.length <= 1) return \u70B9.map(() => 0);
+  const \u9577\u3055 = [0];
+  let \u5408\u8A08 = 0;
+  for (let i = 1; i < \u70B9.length; i++) {
+    const p0 = \u70B9[i - 1];
+    const p3 = \u70B9[i];
+    const [p1, p2] = \u5236\u5FA1\u70B9(p0, p3);
+    let \u524D = p0;
+    for (let s = 1; s <= \u5206\u5272\u6570; s++) {
+      const t = s / \u5206\u5272\u6570;
+      const u = 1 - t;
+      const x = u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x;
+      const y = u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y;
+      \u5408\u8A08 += Math.hypot(x - \u524D.x, y - \u524D.y);
+      \u524D = { x, y };
+    }
+    \u9577\u3055.push(\u5408\u8A08);
+  }
+  if (\u5408\u8A08 === 0) return \u70B9.map(() => 0);
+  return \u9577\u3055.map((l) => l / \u5408\u8A08);
+}
 function ChartLineNode({
   node,
   active,
@@ -6619,7 +6666,7 @@ function ChartLineNode({
     \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 \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u7DDA\u306E\u5148\u304C\u5C4A\u3044\u305F = (idx) => {
     if (!drawing) return true;
     if (data.length <= 1) return true;
@@ -6704,7 +6751,7 @@ function ChartLineNode({
         strokeWidth: 2.5,
         strokeLinejoin: "round",
         strokeLinecap: "round",
-        ...drawing ? { pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1 - \u4F38\u3073 } : {}
+        ...\u4F38\u3070\u3059dash(drawing, \u4F38\u3073)
       }
     ),
     data.map((d, idx) => {
@@ -6804,7 +6851,7 @@ function ChartPieNode({
     const path = `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} Z`;
     return { d, frac, path, startFrac };
   });
-  const \u958B\u304D = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
   const \u958B\u304D\u59CB\u3081\u305F = (startFrac) => !drawing || \u958B\u304D > startFrac;
   const legendX = pieAreaW + 8;
@@ -6919,7 +6966,7 @@ function ChartBarNode({
     const v = vMax * i / gridCount;
     return { y: yAt(v), value: v };
   });
-  const \u4F38\u3073 = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u6A2A\u8EF8\u306Ey = PAD_TOP + canvasH;
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
@@ -7023,7 +7070,9 @@ function ChartBarNode({
 function GanttNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -7082,6 +7131,7 @@ function GanttNode({
   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 \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   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: [
@@ -7156,34 +7206,41 @@ function GanttNode({
       const bx = \u5E2F\u306E\u5DE6(t.startIdx);
       const by = yAt(row);
       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,
-            height: rowH,
-            rx: 4,
-            fill: toneColor3(t.tone),
-            fillOpacity: 0.9
-          }
-        ),
-        t.owner && rowH >= 22 && /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: bx + 8,
-            y: by + rowH / 2 + 4,
-            fontSize: 11,
-            fill: "var(--cdl-node-fill, #ffffff)",
-            fontWeight: 600,
-            children: t.owner
-          }
-        )
-      ] }, `bar-${t.id}`);
+      return /* @__PURE__ */ jsxs(
+        "g",
+        {
+          ...drawing ? { transform: `translate(${bx} 0) scale(${\u4F38\u3073} 1) translate(${-bx} 0)` } : {},
+          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,
+                height: rowH,
+                rx: 4,
+                fill: toneColor3(t.tone),
+                fillOpacity: 0.9
+              }
+            ),
+            t.owner && rowH >= 22 && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: bx + 8,
+                y: by + rowH / 2 + 4,
+                fontSize: 11,
+                fill: "var(--cdl-node-fill, #ffffff)",
+                fontWeight: 600,
+                children: t.owner
+              }
+            )
+          ]
+        },
+        `bar-${t.id}`
+      );
     }),
     \u6574\u3048\u305F.filter((t) => t.dependsOn && taskById.has(t.dependsOn)).map((t) => {
       const parent = taskById.get(t.dependsOn);
@@ -7203,29 +7260,33 @@ function GanttNode({
       const hasRoom = enterX - startX >= elbowGap;
       const path = hasRoom ? `M ${startX} ${parentMidY} L ${enterX} ${parentMidY} L ${enterX} ${tipY} L ${tipX} ${tipY}` : `M ${startX} ${parentMidY} L ${startX + elbowGap} ${parentMidY} L ${startX + elbowGap} ${(parentMidY + tipY) / 2} L ${enterX} ${(parentMidY + tipY) / 2} L ${enterX} ${tipY} L ${tipX} ${tipY}`;
       const arrowHeadPath = `M ${tipX + arrowHeadSize} ${tipY} L ${tipX} ${tipY - arrowHeadSize / 2} L ${tipX} ${tipY + arrowHeadSize / 2} Z`;
-      return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "gantt-arrow", children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: path,
-            fill: "none",
-            stroke: "var(--cdl-text-mute, #8a8678)",
-            strokeWidth: 1.75,
-            strokeLinejoin: "round",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: arrowHeadPath,
-            fill: "var(--cdl-text-mute, #8a8678)",
-            stroke: "var(--cdl-text-mute, #8a8678)",
-            strokeWidth: 0.5,
-            strokeLinejoin: "round"
-          }
-        )
-      ] }, `dep-${parent.id}-${t.id}`);
+      return (
+        // 矢印は両端の帯が出てから描く。 帯が無い場所へ矢印だけが伸びると、
+        // 指す先の無い線になる (cdl#521)
+        drawing && \u4F38\u3073 < 1 ? null : /* @__PURE__ */ jsxs("g", { "data-cdl-role": "gantt-arrow", children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: path,
+              fill: "none",
+              stroke: "var(--cdl-text-mute, #8a8678)",
+              strokeWidth: 1.75,
+              strokeLinejoin: "round",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: arrowHeadPath,
+              fill: "var(--cdl-text-mute, #8a8678)",
+              stroke: "var(--cdl-text-mute, #8a8678)",
+              strokeWidth: 0.5,
+              strokeLinejoin: "round"
+            }
+          )
+        ] }, `dep-${parent.id}-${t.id}`)
+      );
     })
   ] });
 }
@@ -7239,17 +7300,20 @@ 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;
+function \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45) {
+  return \u7BB1\u306E\u5E45 - \u5DE6\u53F3\u306E\u4F59\u767D * 2;
+}
+function \u5E45\u3067\u5207\u308B(text, fontSize, \u4F7F\u3048\u308B\u5E452, \u6E2C\u308B = textWidth) {
+  if (\u4F7F\u3048\u308B\u5E452 <= 0) return "";
+  if (\u6E2C\u308B(text, fontSize) <= \u4F7F\u3048\u308B\u5E452) return text;
   const \u7701\u7565 = "\u2026";
   const \u7701\u7565\u306E\u5E45 = \u6E2C\u308B(\u7701\u7565, fontSize);
-  if (\u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E45) return "";
+  if (\u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) return "";
   let \u51FA = "";
   let \u5E45 = 0;
   for (const c of \u66F8\u8A18\u7D20\u306B\u5206\u3051\u308B(text)) {
     const \u5B57\u306E\u5E452 = \u6E2C\u308B(c, fontSize);
-    if (\u5E45 + \u5B57\u306E\u5E452 + \u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E45) break;
+    if (\u5E45 + \u5B57\u306E\u5E452 + \u7701\u7565\u306E\u5E45 > \u4F7F\u3048\u308B\u5E452) break;
     \u5E45 += \u5B57\u306E\u5E452;
     \u51FA += c;
   }
@@ -7267,13 +7331,13 @@ function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8
   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 \u5E45 = \u4F7F\u3048\u308B\u5E45(\u7BB1\u306E\u5E45);
   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 };
+    return { ...r, text: \u5E45\u3067\u5207\u308B(r.text, r.fontSize, \u5E45), dy };
   });
 }
 var MIND_TONES = ["accent", "teal", "success", "warning", "info", "error"];
@@ -7281,7 +7345,9 @@ var MIND_BOX_GAP = 24;
 function MindMapNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -7293,6 +7359,9 @@ function MindMapNode({
   const canvasW = node.w - PAD * 2;
   const canvasH = node.h - PAD * 2;
   const layout2 = computeMindMapLayout(mindData, canvasCx, canvasCy, canvasW, canvasH);
+  const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u6700\u5927\u6DF1\u3055 = layout2.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
+  const \u7BB1\u304C\u51FA\u308B = (\u6DF1\u3055) => !drawing || \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, \u6DF1\u3055, \u6700\u5927\u6DF1\u3055) >= 1;
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -7308,20 +7377,25 @@ function MindMapNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    layout2.edges.map((e, i) => /* @__PURE__ */ jsx(
-      "path",
-      {
-        "data-cdl-role": "mind-edge",
-        d: e.d,
-        fill: "none",
-        stroke: toneColor4(e.tone),
-        strokeWidth: 2.5,
-        strokeOpacity: 0.55,
-        strokeLinecap: "round"
-      },
-      `edge-${i}`
-    )),
+    layout2.edges.map((e, i) => {
+      const \u679D\u306E\u4F38\u3073 = e.deferUntilComplete ? \u4F38\u3073 >= 1 ? 1 : 0 : \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, e.depth, \u6700\u5927\u6DF1\u3055);
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          "data-cdl-role": "mind-edge",
+          d: e.d,
+          fill: "none",
+          stroke: toneColor4(e.tone),
+          strokeWidth: 2.5,
+          strokeOpacity: 0.55,
+          strokeLinecap: "round",
+          ...\u4F38\u3070\u3059dash(drawing, \u679D\u306E\u4F38\u3073)
+        },
+        `edge-${i}`
+      );
+    }),
     layout2.nodes.map((n) => {
+      if (!\u7BB1\u304C\u51FA\u308B(n.depth)) return null;
       const \u884C = \u7BB1\u306B\u7A4D\u3080(
         [
           { \u5F79\u5272: "title", text: n.title, fontSize: n.isRoot ? 15 : 13 },
@@ -7360,17 +7434,22 @@ function MindMapNode({
             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
-          }
+        )) : (
+          // 補足が無くても **幅に収める** (#526)。 `箱に積む` を通らないこの経路だけが
+          // 幅を見ておらず、長い名前がそのまま箱の外へ出て枝の線と重なっていた
+          // (実測 = 中心の箱で文字 163px に対し箱 120px)
+          /* @__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: \u5E45\u3067\u5207\u308B(n.title, n.isRoot ? 15 : 13, \u4F7F\u3048\u308B\u5E45(n.w))
+            }
+          )
         )
       ] }, `n-${n.id}`);
     })
@@ -7389,6 +7468,8 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
     w: rootW,
     h: rootH,
     isRoot: true,
+    // 中心は起点なので段数 0 (cdl#520)
+    depth: 0,
     ...mindData.unresolved ? { unresolved: true } : {}
   });
   const childrenOf = /* @__PURE__ */ new Map();
@@ -7500,6 +7581,8 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
       y,
       w,
       h,
+      // 第 1 階層が段数 1 (`subDepth` は 0 始まり、 cdl#520)
+      depth: subDepth + 1,
       tone: myTone,
       isRoot: false,
       ...node.unresolved ? { unresolved: true } : {}
@@ -7541,23 +7624,36 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
       }
     }
   }
+  const \u6BB5\u6570 = new Map(nodes.map((n) => [n.id, n.depth]));
   for (const br of mindData.branches) {
     const childPos = nodePos.get(br.id);
     if (!childPos) continue;
     const isLeft = nodeSide.get(br.id) === "left";
     const childHalfW = nodeHalfW.get(br.id) ?? subBranchW / 2;
     const tone = nodeTone.get(br.id);
+    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 endX = childPos.x + (isLeft ? childHalfW : -childHalfW);
-      edges.push({ d: makeCurve(startX, cy, endX, childPos.y), tone });
+      edges.push({
+        d: makeCurve(startX, cy, endX, childPos.y),
+        tone,
+        depth: childDepth,
+        deferUntilComplete: false
+      });
     } else {
       const parentPos = nodePos.get(br.parent);
       if (!parentPos) continue;
       const parentHalfW = nodeHalfW.get(br.parent) ?? branchW / 2;
       const startX = parentPos.x + (isLeft ? -parentHalfW : parentHalfW);
       const endX = childPos.x + (isLeft ? childHalfW : -childHalfW);
-      edges.push({ d: makeCurve(startX, parentPos.y, endX, childPos.y), tone });
+      edges.push({
+        d: makeCurve(startX, parentPos.y, endX, childPos.y),
+        tone,
+        depth: Math.max(parentDepth, childDepth),
+        deferUntilComplete: parentDepth >= childDepth
+      });
     }
   }
   return { nodes, edges };
@@ -7577,7 +7673,9 @@ function toneColor4(tone, alpha = 1) {
 function FunnelNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -7592,12 +7690,79 @@ function FunnelNode({
   const stageCount = stages.length || 1;
   const gap = 4;
   const stageH = (canvasH - gap * (stageCount - 1)) / stageCount;
+  const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u5207\u308A\u629C\u304Did = `cdl-funnel-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const \u6BB5\u306E\u4E0B\u7AEF\u306E\u5272\u5408 = (idx) => {
+    if (canvasH <= 0) return 0;
+    return ((idx + 1) * stageH + idx * gap) / canvasH;
+  };
+  const \u6BB5\u304C\u51FA\u5207\u3063\u305F = (idx) => !drawing || \u4F38\u3073 >= \u6BB5\u306E\u4E0B\u7AEF\u306E\u5272\u5408(idx);
   const widthAtStep = (step) => {
     const topRatio = 1;
     const bottomRatio = 0.35;
     const t = step / stageCount;
     return canvasW * (topRatio + (bottomRatio - topRatio) * t);
   };
+  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;
+    const y = PAD_TOP + idx * (stageH + gap);
+    const topW = widthAtStep(idx);
+    const bottomW = widthAtStep(idx + 1);
+    const cx = PAD_LEFT + canvasW / 2;
+    const topX = cx - topW / 2;
+    const bottomX = cx - bottomW / 2;
+    const points = `${topX},${y} ${topX + topW},${y} ${bottomX + bottomW},${y + stageH} ${bottomX},${y + stageH}`;
+    const tone = toneByIndex(idx);
+    const legendX = PAD_LEFT + canvasW + 24;
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          "data-cdl-role": "funnel-stage",
+          "data-cdl-unresolved": s.unresolved ? "true" : void 0,
+          points,
+          fill: tone,
+          fillOpacity: 0.9,
+          stroke: tone,
+          strokeWidth: 0
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: cx,
+          y: y + stageH / 2 + 5,
+          fontSize: 14,
+          fontWeight: 700,
+          textAnchor: "middle",
+          fill: "var(--cdl-node-fill, #ffffff)",
+          children: s.title
+        }
+      ),
+      \u6BB5\u304C\u51FA\u5207\u3063\u305F(idx) && /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: legendX,
+          y: y + stageH / 2 - 2,
+          fontSize: 13,
+          fontWeight: 700,
+          fill: "var(--cdl-text, #1a1f2a)",
+          children: s.count.toLocaleString()
+        }
+      ),
+      \u6BB5\u304C\u51FA\u5207\u3063\u305F(idx) && prev && /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: legendX,
+          y: y + stageH / 2 + 14,
+          fontSize: 11,
+          fill: dropRate > 0 ? "var(--cdl-text-dim, #5a6270)" : "var(--cdl-text-mute, #8a8678)",
+          children: dropRate > 0 ? `\u2193 ${dropRate.toFixed(1)}%` : "\xB10%"
+        }
+      )
+    ] }, `stage-${s.id}`);
+  });
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -7613,66 +7778,8 @@ function FunnelNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    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;
-      const y = PAD_TOP + idx * (stageH + gap);
-      const topW = widthAtStep(idx);
-      const bottomW = widthAtStep(idx + 1);
-      const cx = PAD_LEFT + canvasW / 2;
-      const topX = cx - topW / 2;
-      const bottomX = cx - bottomW / 2;
-      const points = `${topX},${y} ${topX + topW},${y} ${bottomX + bottomW},${y + stageH} ${bottomX},${y + stageH}`;
-      const tone = toneByIndex(idx);
-      const legendX = PAD_LEFT + canvasW + 24;
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            "data-cdl-role": "funnel-stage",
-            "data-cdl-unresolved": s.unresolved ? "true" : void 0,
-            points,
-            fill: tone,
-            fillOpacity: 0.9,
-            stroke: tone,
-            strokeWidth: 0
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: cx,
-            y: y + stageH / 2 + 5,
-            fontSize: 14,
-            fontWeight: 700,
-            textAnchor: "middle",
-            fill: "var(--cdl-node-fill, #ffffff)",
-            children: s.title
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: legendX,
-            y: y + stageH / 2 - 2,
-            fontSize: 13,
-            fontWeight: 700,
-            fill: "var(--cdl-text, #1a1f2a)",
-            children: s.count.toLocaleString()
-          }
-        ),
-        prev && /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: legendX,
-            y: y + stageH / 2 + 14,
-            fontSize: 11,
-            fill: dropRate > 0 ? "var(--cdl-text-dim, #5a6270)" : "var(--cdl-text-mute, #8a8678)",
-            children: dropRate > 0 ? `\u2193 ${dropRate.toFixed(1)}%` : "\xB10%"
-          }
-        )
-      ] }, `stage-${s.id}`);
-    })
+    drawing && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: node.w, height: PAD_TOP + canvasH * \u4F38\u3073 }) }) }),
+    drawing ? /* @__PURE__ */ jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u6BB5 }) : \u6BB5
   ] });
 }
 var TONE_ORDER = [
@@ -7858,7 +7965,9 @@ function \u7BB1\u306E\u6587\u5B57({
 function TreeNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -7871,6 +7980,9 @@ function TreeNode({
   const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
   const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
   const layout2 = computeTreeLayout(treeNodes, canvasW, canvasH);
+  const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u6700\u5927\u6DF1\u3055 = layout2.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
+  const \u7BB1\u304C\u51FA\u308B = (\u6DF1\u3055) => !drawing || \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, \u6DF1\u3055, \u6700\u5927\u6DF1\u3055) >= 1;
   const depthColors = [TONE.accent, TONE.teal, TONE.success, TONE.warning, TONE.info];
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
@@ -7898,6 +8010,7 @@ function TreeNode({
       const y2 = PAD_TOP + e.y2;
       const midY = (y1 + y2) / 2;
       const path = `M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`;
+      const \u679D\u306E\u4F38\u3073 = e.deferUntilComplete ? \u4F38\u3073 >= 1 ? 1 : 0 : \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, e.depth, \u6700\u5927\u6DF1\u3055);
       return /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx(
           "path",
@@ -7908,13 +8021,15 @@ function TreeNode({
             stroke: TONE.accent,
             strokeOpacity: 0.55,
             strokeWidth: 1.5,
-            strokeLinejoin: "round"
+            strokeLinejoin: "round",
+            ...\u4F38\u3070\u3059dash(drawing, \u679D\u306E\u4F38\u3073)
           }
         ),
-        /* @__PURE__ */ jsx("circle", { cx: x1, cy: midY, r: 2.5, fill: TONE.accent, fillOpacity: 0.75 })
+        (!drawing || \u679D\u306E\u4F38\u3073 >= 1) && /* @__PURE__ */ jsx("circle", { cx: x1, cy: midY, r: 2.5, fill: TONE.accent, fillOpacity: 0.75 })
       ] }, `edge-${i}`);
     }),
     layout2.nodes.map((n) => {
+      if (!\u7BB1\u304C\u51FA\u308B(n.depth)) return null;
       const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0];
       const isRoot = n.depth === 0;
       const \u884C = \u7BB1\u306B\u7A4D\u3080(
@@ -7950,17 +8065,21 @@ function TreeNode({
               \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,
-                y: n.h / 2 + 5,
-                fontSize: 13,
-                fontWeight: 700,
-                textAnchor: "middle",
-                fill: "var(--cdl-text-on-tone, #ffffff)",
-                children: n.title
-              }
+            }) : (
+              // 補足が無くても幅に収める (#526)。 `箱の文字` を通らないこの経路だけが
+              // 幅を見ておらず、長い名前が箱の外へ出ていた
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: n.w / 2,
+                  y: n.h / 2 + 5,
+                  fontSize: 13,
+                  fontWeight: 700,
+                  textAnchor: "middle",
+                  fill: "var(--cdl-text-on-tone, #ffffff)",
+                  children: \u5E45\u3067\u5207\u308B(n.title, 13, \u4F7F\u3048\u308B\u5E45(n.w))
+                }
+              )
             )
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
@@ -7993,7 +8112,7 @@ function TreeNode({
                 fontWeight: 600,
                 textAnchor: "middle",
                 fill: "var(--cdl-chip-text, #1a1f2a)",
-                children: n.title
+                children: \u5E45\u3067\u5207\u308B(n.title, 12, \u4F7F\u3048\u308B\u5E45(n.w))
               }
             )
           ] })
@@ -8095,6 +8214,7 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
     }
   }
   const hById = new Map(nodes.map((n) => [n.id, n.h]));
+  const \u6BB5\u6570 = new Map(nodes.map((n) => [n.id, n.depth]));
   const edges = [];
   for (const n of treeNodes) {
     if (!n.parent) continue;
@@ -8103,14 +8223,25 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
     if (!parent || !child) continue;
     const parentH = hById.get(n.parent) ?? nodeH;
     const childH = hById.get(n.id) ?? nodeH;
-    edges.push({ x1: parent.x, y1: parent.y + parentH / 2, x2: child.x, y2: child.y - childH / 2 });
+    const parentDepth = \u6BB5\u6570.get(n.parent) ?? 0;
+    const childDepth = \u6BB5\u6570.get(n.id) ?? 1;
+    edges.push({
+      x1: parent.x,
+      y1: parent.y + parentH / 2,
+      x2: child.x,
+      y2: child.y - childH / 2,
+      depth: Math.max(parentDepth, childDepth),
+      deferUntilComplete: parentDepth >= childDepth
+    });
   }
   return { nodes, edges };
 }
 function UserJourneyNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -8148,6 +8279,12 @@ function UserJourneyNode({
   const xAt = (idx) => PAD_LEFT + (steps.length <= 1 ? canvasW / 2 : colW / 2 + colW * idx);
   const yAt = (emotion) => PAD_TOP + rowH / 2 + (4 - emotionScore[emotion]) * rowH;
   const pts = steps.map((s, i) => ({ x: xAt(i), y: yAt(s.emotion) }));
+  const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u6BB5\u307E\u3067\u306E\u5272\u5408 = \u30D9\u30B8\u30A8\u306E\u7D2F\u7A4D\u5272\u5408(pts, (\u524D, \u5F8C) => {
+    const midX = (\u524D.x + \u5F8C.x) / 2;
+    return [{ x: midX, y: \u524D.y }, { x: midX, y: \u5F8C.y }];
+  });
+  const \u7DDA\u306E\u5148\u304C\u5C4A\u3044\u305F = (idx) => !drawing || \u4F38\u3073 >= (\u6BB5\u307E\u3067\u306E\u5272\u5408[idx] ?? 0);
   const smoothPath = pts.length > 1 ? pts.reduce((acc, p, i) => {
     if (i === 0) return `M ${p.x} ${p.y}`;
     const prev = pts[i - 1];
@@ -8228,7 +8365,8 @@ function UserJourneyNode({
           stroke: "var(--cdl-tone-accent, #2d6a8f)",
           strokeOpacity: 0.18,
           strokeWidth: 10,
-          strokeLinecap: "round"
+          strokeLinecap: "round",
+          ...\u4F38\u3070\u3059dash(drawing, \u4F38\u3073)
         }
       ),
       /* @__PURE__ */ jsx(
@@ -8240,11 +8378,12 @@ function UserJourneyNode({
           stroke: "var(--cdl-tone-accent, #2d6a8f)",
           strokeWidth: 2.75,
           strokeLinejoin: "round",
-          strokeLinecap: "round"
+          strokeLinecap: "round",
+          ...\u4F38\u3070\u3059dash(drawing, \u4F38\u3073)
         }
       )
     ] }),
-    steps.map((s, idx) => /* @__PURE__ */ jsxs(
+    steps.map((s, idx) => !\u7DDA\u306E\u5148\u304C\u5C4A\u3044\u305F(idx) ? null : /* @__PURE__ */ jsxs(
       "g",
       {
         "data-cdl-role": "journey-step",
@@ -12335,17 +12474,62 @@ function CdlNodeView({
           }
         );
       case "gantt-timeline":
-        return /* @__PURE__ */ jsx(GanttNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          GanttNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "mind-map":
-        return /* @__PURE__ */ jsx(MindMapNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          MindMapNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "funnel-stages":
-        return /* @__PURE__ */ jsx(FunnelNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          FunnelNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "quadrant-matrix":
         return /* @__PURE__ */ jsx(QuadrantNode, { node: resolvedNode, active, stateValues });
       case "tree-hierarchy":
-        return /* @__PURE__ */ jsx(TreeNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          TreeNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "journey-map":
-        return /* @__PURE__ */ jsx(UserJourneyNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          UserJourneyNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "shape-file":
         return /* @__PURE__ */ jsx(ShapeFileNode, { node: resolvedNode, active });
       case "shape-folder":