@cardenelabs/cdl 0.9.0 → 0.11.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as CdlState, f as CdlEventTarget, g as Computed, h as CdlDerivedValue, i as CdlScrollTrigger, L as LaidDiagram, j as CdlDiagramViewProps, k as LaidEdge, l as LaidNode, m as CdlEdge, B as BBox, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-hmFRAabt.cjs';
-export { n as CdlDiagramView, o as CdlEventBinding, p as CdlEventKind, q as CdlFormula, r as CdlPhase, I as InteractiveHandlerMap, s as InteractiveSignalsAccessor, t as LaidLane, u as NODE_KINDS, v as ScrollProgressHandle, w as TONES, x as computeEventBindingKey, y as computeFormulaKey, z as computeInputSignalKey, A as computeScrollTriggerKey, D as computed, F as createInteractiveSignalsAccessor, G as createScrollProgressHandle, H as createScrollProgressSignals, K as hasInteractivePrimitives, M as signal } from './render-hmFRAabt.cjs';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as CdlState, f as CdlEventTarget, g as Computed, h as CdlDerivedValue, i as CdlScrollTrigger, L as LaidDiagram, j as CdlDiagramViewProps, k as LaidEdge, l as LaidNode, m as CdlEdge, B as BBox, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-DwH8v5Mb.cjs';
+export { n as CdlDiagramView, o as CdlEventBinding, p as CdlEventKind, q as CdlFormula, r as CdlPhase, I as InteractiveHandlerMap, s as InteractiveSignalsAccessor, t as LaidLane, u as NODE_KINDS, v as ScrollProgressHandle, w as TONES, x as computeEventBindingKey, y as computeFormulaKey, z as computeInputSignalKey, A as computeScrollTriggerKey, D as computed, F as createInteractiveSignalsAccessor, G as createScrollProgressHandle, H as createScrollProgressSignals, K as hasInteractivePrimitives, M as signal } from './render-DwH8v5Mb.cjs';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -997,6 +997,11 @@ type InputChain = {
 };
 type PhaseBuilder = {
     activate: (...ids: string[]) => PhaseBuilder;
+    /**
+     * この phase で左の起点から描き始める node を指定する (cdl#512)。
+     * 対象は phase の進み (0→1) に合わせて描かれる。 現在の対象種別は `chart-line`。
+     */
+    draw: (...ids: string[]) => PhaseBuilder;
     /** 数値 state の線形補間 (write phase で 100→90 等) */
     tween: (stateId: string, from: number, to: number) => PhaseBuilder;
     /** 任意型 state を即時切替 (この phase 到達で value 上書き、 lerp なし) */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as CdlState, f as CdlEventTarget, g as Computed, h as CdlDerivedValue, i as CdlScrollTrigger, L as LaidDiagram, j as CdlDiagramViewProps, k as LaidEdge, l as LaidNode, m as CdlEdge, B as BBox, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-hmFRAabt.js';
-export { n as CdlDiagramView, o as CdlEventBinding, p as CdlEventKind, q as CdlFormula, r as CdlPhase, I as InteractiveHandlerMap, s as InteractiveSignalsAccessor, t as LaidLane, u as NODE_KINDS, v as ScrollProgressHandle, w as TONES, x as computeEventBindingKey, y as computeFormulaKey, z as computeInputSignalKey, A as computeScrollTriggerKey, D as computed, F as createInteractiveSignalsAccessor, G as createScrollProgressHandle, H as createScrollProgressSignals, K as hasInteractivePrimitives, M as signal } from './render-hmFRAabt.js';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as CdlState, f as CdlEventTarget, g as Computed, h as CdlDerivedValue, i as CdlScrollTrigger, L as LaidDiagram, j as CdlDiagramViewProps, k as LaidEdge, l as LaidNode, m as CdlEdge, B as BBox, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-DwH8v5Mb.js';
+export { n as CdlDiagramView, o as CdlEventBinding, p as CdlEventKind, q as CdlFormula, r as CdlPhase, I as InteractiveHandlerMap, s as InteractiveSignalsAccessor, t as LaidLane, u as NODE_KINDS, v as ScrollProgressHandle, w as TONES, x as computeEventBindingKey, y as computeFormulaKey, z as computeInputSignalKey, A as computeScrollTriggerKey, D as computed, F as createInteractiveSignalsAccessor, G as createScrollProgressHandle, H as createScrollProgressSignals, K as hasInteractivePrimitives, M as signal } from './render-DwH8v5Mb.js';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -997,6 +997,11 @@ type InputChain = {
 };
 type PhaseBuilder = {
     activate: (...ids: string[]) => PhaseBuilder;
+    /**
+     * この phase で左の起点から描き始める node を指定する (cdl#512)。
+     * 対象は phase の進み (0→1) に合わせて描かれる。 現在の対象種別は `chart-line`。
+     */
+    draw: (...ids: string[]) => PhaseBuilder;
     /** 数値 state の線形補間 (write phase で 100→90 等) */
     tween: (stateId: string, from: number, to: number) => PhaseBuilder;
     /** 任意型 state を即時切替 (この phase 到達で value 上書き、 lerp なし) */

package/dist/index.js

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState, useSyncExternalStore, useRef, useCallback, useLayoutEffect } from 'react';
+import { useMemo, useEffect, useState, useSyncExternalStore, useRef, useCallback, useLayoutEffect, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/reactive/internal.ts
@@ -9361,6 +9361,10 @@ function makePhaseBuilder(acc) {
       acc.activate.push(...ids);
       return api;
     },
+    draw(...ids) {
+      acc.draw.push(...ids);
+      return api;
+    },
     tween(stateId, from, to) {
       acc.tweens.push({ stateId, from, to });
       return api;
@@ -11440,7 +11444,7 @@ function diagram(id, options) {
       }
     },
     phase(phaseId, opts, build) {
-      const acc = { activate: [], tweens: [], sets: [] };
+      const acc = { activate: [], draw: [], tweens: [], sets: [] };
       build(makePhaseBuilder(acc));
       phases.push({
         id: phaseId,
@@ -11448,6 +11452,8 @@ function diagram(id, options) {
         title: opts.title,
         body: opts.body,
         activate: acc.activate,
+        // 空なら欄ごと置かない。 置くと `draw` を使わない図の JSON の形が変わる
+        ...acc.draw.length > 0 ? { draw: acc.draw } : {},
         tweens: acc.tweens,
         sets: acc.sets,
         badge: acc.badge
@@ -15856,6 +15862,7 @@ function nodeTemplateTexts(node) {
 
 // src/validate.ts
 var TONES2 = new Set(TONES);
+var DRAW_KINDS = /* @__PURE__ */ new Set(["chart-line", "chart-bar", "chart-pie"]);
 var KINDS = new Set(NODE_KINDS);
 var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
 function validate(diag) {
@@ -15919,7 +15926,7 @@ function validate(diag) {
     ...(diag.formulas ?? []).map((f) => f.id),
     ...(diag.scrollTriggers ?? []).map((t) => t.id)
   ]);
-  const suggest = (target, candidates) => {
+  const suggest = (target, candidates, candidateKind = "lane") => {
     const list = [...candidates];
     if (list.length === 0) return "";
     let best = "";
@@ -15931,7 +15938,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)) {
@@ -15944,13 +15951,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`
       );
     }
@@ -15967,6 +15974,18 @@ 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 (!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) {
       if (!stateIds.has(t.stateId)) {
         errors.push(`[cdl] unknown-ref: phase "${p.id}" tween \u5BFE\u8C61 state "${t.stateId}" \u672A\u5B9A\u7FA9`);
@@ -21264,7 +21283,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;
@@ -21285,6 +21306,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;
@@ -21362,7 +21401,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) => {
@@ -21373,40 +21413,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",
           {
@@ -21425,8 +21468,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);
@@ -21439,20 +21485,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 = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  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;
@@ -21471,7 +21523,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",
@@ -21483,8 +21536,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",
         {
@@ -21522,6 +21575,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];
@@ -21530,7 +21592,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;
@@ -21553,6 +21617,8 @@ 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 \u6A2A\u8EF8\u306Ey = PAD_TOP + canvasH;
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -21609,26 +21675,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)",
@@ -26701,6 +26769,7 @@ function ShapeCustomerServiceNode({ node, active }) {
 function CdlNodeView({
   node,
   active,
+  drawing = false,
   progress,
   stateValues,
   currentPhaseId
@@ -26750,11 +26819,38 @@ 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 });
+        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 });
       case "mind-map":
@@ -26944,6 +27040,7 @@ function CdlStage({
   svgRef
 }) {
   const activeSet = new Set(currentPhase?.activate ?? []);
+  const drawSet = new Set(currentPhase?.draw ?? []);
   const { lifelineStarts, uniformFooterTop } = useMemo(() => {
     const starts = lifelineStartYs(laid.nodes);
     return {
@@ -27080,6 +27177,7 @@ function CdlStage({
               {
                 node,
                 active: activeSet.has(node.id),
+                drawing: drawSet.has(node.id),
                 progress,
                 stateValues,
                 currentPhaseId: currentPhase?.id