@cardenelabs/cdl 0.10.0 → 0.12.0

package/dist/react.js

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useSyncExternalStore, useRef, useCallback, useState, useLayoutEffect } from 'react';
+import { useMemo, useEffect, useSyncExternalStore, useRef, useCallback, useState, useLayoutEffect, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/render.tsx
@@ -4884,6 +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",
+  "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) {
@@ -5001,8 +5011,10 @@ function validate(diag) {
         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)`);
+      if (!DRAW_KINDS.has(String(kind))) {
+        warnings.push(
+          `phase "${p.id}" \u306E draw "${id}" \u306F kind "${kind}" \u3067\u3001 \u8D77\u70B9\u304B\u3089\u63CF\u304F\u52D5\u304D\u3092\u6301\u305F\u306A\u3044 (\u5BFE\u8C61\u306F ${[...DRAW_KINDS].join(" / ")})`
+        );
       }
     }
     for (const t of p.tweens) {
@@ -6579,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,
@@ -6616,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;
@@ -6701,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) => {
@@ -6767,8 +6817,11 @@ function ChartLineNode({
 function ChartPieNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
+  const instanceId = useId().replace(/[^A-Za-z0-9_-]/g, "");
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
@@ -6781,20 +6834,26 @@ function ChartPieNode({
   const cx = pieAreaW / 2;
   const cy = PAD_TOP + chartAreaH / 2;
   let cumAngle = -Math.PI / 2;
+  let cumFrac = 0;
   const slices = data.map((d) => {
     const frac = d.value / total;
     const angle = frac * Math.PI * 2;
     const a0 = cumAngle;
     const a1 = cumAngle + angle;
     cumAngle = a1;
+    const startFrac = cumFrac;
+    cumFrac += frac;
     const x1 = cx + radius * Math.cos(a0);
     const y1 = cy + radius * Math.sin(a0);
     const x2 = cx + radius * Math.cos(a1);
     const y2 = cy + radius * Math.sin(a1);
     const large = angle > Math.PI ? 1 : 0;
     const path = `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} Z`;
-    return { d, frac, path };
+    return { d, frac, path, startFrac };
   });
+  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;
   const legendGap = Math.min(28, chartAreaH / Math.max(data.length, 1));
   const legendStartY = PAD_TOP + (chartAreaH - legendGap * data.length) / 2 + legendGap / 2;
@@ -6813,7 +6872,8 @@ function ChartPieNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    slices.map((s, idx) => /* @__PURE__ */ jsx(
+    drawing && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, radius + 2, \u958B\u304D) }) }),
+    /* @__PURE__ */ jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, children: slices.map((s, idx) => /* @__PURE__ */ jsx(
       "path",
       {
         "data-cdl-role": "chart-pie-slice",
@@ -6825,8 +6885,8 @@ function ChartPieNode({
         strokeWidth: 1.5
       },
       `slice-${idx}`
-    )),
-    slices.map((s, idx) => /* @__PURE__ */ jsxs("g", { transform: `translate(${legendX} ${legendStartY + idx * legendGap})`, children: [
+    )) }),
+    slices.map((s, idx) => !\u958B\u304D\u59CB\u3081\u305F(s.startFrac) ? null : /* @__PURE__ */ jsxs("g", { transform: `translate(${legendX} ${legendStartY + idx * legendGap})`, children: [
       /* @__PURE__ */ jsx(
         "rect",
         {
@@ -6864,6 +6924,15 @@ function ChartPieNode({
     ] }, `legend-${idx}`))
   ] });
 }
+function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D) {
+  if (\u958B\u304D <= 0) return null;
+  if (\u958B\u304D >= 1) return /* @__PURE__ */ jsx("circle", { cx, cy, r });
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + \u958B\u304D * Math.PI * 2;
+  const large = \u958B\u304D > 0.5 ? 1 : 0;
+  const d = `M ${cx} ${cy} L ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} Z`;
+  return /* @__PURE__ */ jsx("path", { d });
+}
 var FALLBACK_ORDER = ["accent", "teal", "warning", "success", "info", "error"];
 function sliceColor(tone, idx) {
   if (tone) return TONE[tone];
@@ -6872,7 +6941,9 @@ function sliceColor(tone, idx) {
 function ChartBarNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -6895,6 +6966,8 @@ function ChartBarNode({
     const v = vMax * i / gridCount;
     return { y: yAt(v), value: v };
   });
+  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(
       "rect",
@@ -6951,26 +7024,28 @@ function ChartBarNode({
       const bx = xAt(idx);
       const by = yAt(d.value);
       const bh = PAD_TOP + canvasH - by;
+      const \u898B\u3048\u3066\u3044\u308B\u982D = \u6A2A\u8EF8\u306Ey - (\u6A2A\u8EF8\u306Ey - by) * \u4F38\u3073;
+      const \u68D2 = /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-cdl-role": "chart-bar",
+          "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+          x: bx,
+          y: by,
+          width: barW,
+          height: bh,
+          rx: 2,
+          fill: "var(--cdl-tone-accent, #2d6a8f)",
+          fillOpacity: 0.9
+        }
+      );
       return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            "data-cdl-role": "chart-bar",
-            "data-cdl-unresolved": d.unresolved ? "true" : void 0,
-            x: bx,
-            y: by,
-            width: barW,
-            height: bh,
-            rx: 2,
-            fill: "var(--cdl-tone-accent, #2d6a8f)",
-            fillOpacity: 0.9
-          }
-        ),
+        drawing ? /* @__PURE__ */ jsx("g", { transform: `translate(0 ${\u6A2A\u8EF8\u306Ey}) scale(1 ${\u4F38\u3073}) translate(0 ${-\u6A2A\u8EF8\u306Ey})`, children: \u68D2 }) : \u68D2,
         /* @__PURE__ */ jsx(
           "text",
           {
             x: bx + barW / 2,
-            y: by - 6,
+            y: \u898B\u3048\u3066\u3044\u308B\u982D - 6,
             fontSize: 11,
             textAnchor: "middle",
             fill: "var(--cdl-text, #1a1f2a)",
@@ -6995,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;
@@ -7054,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: [
@@ -7128,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);
@@ -7175,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}`)
+      );
     })
   ] });
 }
@@ -7253,7 +7342,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;
@@ -7265,6 +7356,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",
@@ -7280,20 +7374,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 },
@@ -7361,6 +7460,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();
@@ -7472,6 +7573,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 } : {}
@@ -7513,23 +7616,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 };
@@ -7549,7 +7665,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;
@@ -7564,12 +7682,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",
@@ -7585,66 +7770,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 = [
@@ -7830,7 +7957,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;
@@ -7843,6 +7972,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: [
@@ -7870,6 +8002,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",
@@ -7880,13 +8013,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(
@@ -8067,6 +8202,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;
@@ -8075,14 +8211,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;
@@ -8120,6 +8267,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];
@@ -8200,7 +8353,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(
@@ -8212,11 +8366,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",
@@ -12285,21 +12440,84 @@ function CdlNodeView({
           }
         );
       case "chart-pie":
-        return /* @__PURE__ */ jsx(ChartPieNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          ChartPieNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-bar":
-        return /* @__PURE__ */ jsx(ChartBarNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          ChartBarNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       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":