@cardenelabs/cdl 0.37.0 → 0.39.0

package/dist/react.d.cts

@@ -1,2 +1,2 @@
 import 'react';
-export { q as CdlDiagramView, m as CdlDiagramViewProps } from './render-BYdmSviQ.cjs';
+export { q as CdlDiagramView, m as CdlDiagramViewProps } from './render-B1ArenZ7.cjs';

package/dist/react.d.ts

@@ -1,2 +1,2 @@
 import 'react';
-export { q as CdlDiagramView, m as CdlDiagramViewProps } from './render-BYdmSviQ.js';
+export { q as CdlDiagramView, m as CdlDiagramViewProps } from './render-B1ArenZ7.js';

package/dist/react.js

@@ -64,6 +64,8 @@ var Timeline = class {
   rafHandle = null;
   phaseIndex = 0;
   phaseProgress = 0;
+  /** 曲線を通す前の進み (cdl#711)。 経過時間そのものの割合で、 描く動きが読む */
+  phaseLinearProgress = 0;
   phaseStartedAt = 0;
   status = "idle";
   /**
@@ -92,12 +94,12 @@ var Timeline = class {
     const initial = options.initialPhaseIndex;
     if (initial != null && initial > 0 && initial < phases.length) {
       this.phaseIndex = initial;
-      this.phaseProgress = 1;
+      this.setProgress(1);
       this.status = initial === phases.length - 1 ? "settled" : "paused";
     }
     this.initialState = {
       phaseIndex: this.phaseIndex,
-      phaseProgress: this.phaseProgress,
+      phaseLinearProgress: this.phaseLinearProgress,
       status: this.status
     };
   }
@@ -119,13 +121,14 @@ var Timeline = class {
   }
   snapshot() {
     const cached = this.cachedSnapshot;
-    if (cached && cached.status === this.status && cached.phaseIndex === this.phaseIndex && cached.phaseProgress === this.phaseProgress && cached.totalPhases === this.phases.length) {
+    if (cached && cached.status === this.status && cached.phaseIndex === this.phaseIndex && cached.phaseProgress === this.phaseProgress && cached.phaseLinearProgress === this.phaseLinearProgress && cached.totalPhases === this.phases.length) {
       return cached;
     }
     const next = {
       status: this.status,
       phaseIndex: this.phaseIndex,
       phaseProgress: this.phaseProgress,
+      phaseLinearProgress: this.phaseLinearProgress,
       totalPhases: this.phases.length
     };
     this.cachedSnapshot = next;
@@ -148,7 +151,7 @@ var Timeline = class {
     const clamped = Math.max(0, Math.min(this.phases.length - 1, index));
     this.cancelRaf();
     this.phaseIndex = clamped;
-    this.phaseProgress = 1;
+    this.setProgress(1);
     this.status = clamped === this.phases.length - 1 ? "settled" : "paused";
     this.emit();
   }
@@ -188,14 +191,14 @@ var Timeline = class {
     if (this.phaseIndex <= 0) return;
     this.cancelRaf();
     this.phaseIndex -= 1;
-    this.phaseProgress = 1;
+    this.setProgress(1);
     this.status = "paused";
     this.emit();
   }
   reset() {
     this.cancelRaf();
     this.phaseIndex = 0;
-    this.phaseProgress = 0;
+    this.setProgress(0);
     this.status = "idle";
     this.emit();
   }
@@ -216,7 +219,7 @@ var Timeline = class {
     this.subscribers.clear();
     this.status = this.initialState.status;
     this.phaseIndex = this.initialState.phaseIndex;
-    this.phaseProgress = this.initialState.phaseProgress;
+    this.setProgress(this.initialState.phaseLinearProgress);
   }
   // ─── internals ───────────────────────────────────────────────
   advancePhase() {
@@ -252,20 +255,20 @@ var Timeline = class {
     }, ms);
   }
   beginPhaseTransition() {
-    this.phaseProgress = 0;
+    this.setProgress(0);
     this.phaseStartedAt = performance.now();
     this.cancelRaf();
     const step = (now) => {
       const duration = this.autoAdvanceMsOverride ?? this.getPhase().durationMs ?? 600;
       const elapsed = now - this.phaseStartedAt;
       const linearT = clamp01(elapsed / duration);
-      this.phaseProgress = this.easing(linearT);
+      this.setProgress(linearT);
       this.emit();
       if (linearT < 1) {
         this.rafHandle = requestAnimationFrame(step);
         return;
       }
-      this.phaseProgress = 1;
+      this.setProgress(1);
       this.emit();
       if (this.status === "playing") {
         if (this.phaseIndex < this.phases.length - 1) {
@@ -280,6 +283,19 @@ var Timeline = class {
     };
     this.rafHandle = requestAnimationFrame(step);
   }
+  /**
+   * 段の進みを 2 つ同時に置く (cdl#711)。
+   *
+   * **代入する場所を 1 つに閉じる**。 曲げた進みと曲げる前の進みを別々に書くと、
+   * どちらかを更新し忘れた経路が「前の段の値のまま」 で残る。
+   *
+   * 両端 (0 と 1) は曲線を通さず、 そのまま置く。 曲線は差し替えられる欄なので、
+   * `easing(1)` が 1 を返す保証がない。 段の始まりと終わりの値は曲線に委ねない。
+   */
+  setProgress(linear2) {
+    this.phaseLinearProgress = linear2;
+    this.phaseProgress = linear2 <= 0 ? 0 : linear2 >= 1 ? 1 : this.easing(linear2);
+  }
   cancelRaf() {
     if (this.rafHandle != null) {
       cancelAnimationFrame(this.rafHandle);
@@ -9508,7 +9524,10 @@ var DRAW_KINDS = /* @__PURE__ */ new Set([
   "mind-map",
   "tree-hierarchy",
   "gantt-timeline",
-  "funnel-stages"
+  "funnel-stages",
+  "chart-gauge",
+  "chart-radial",
+  "chart-stacked-bar"
 ]);
 var KINDS = new Set(NODE_KINDS);
 var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
@@ -11837,6 +11856,15 @@ function interpolateColor(template, stateValues, fallback) {
   if (!template) return fallback;
   return interpolate(template, stateValues);
 }
+function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D, \u8D77\u70B9 = -Math.PI / 2, \u5168\u5468 = Math.PI * 2) {
+  if (\u958B\u304D <= 0) return null;
+  if (\u958B\u304D >= 1 && \u5168\u5468 >= Math.PI * 2) return /* @__PURE__ */ jsx("circle", { cx, cy, r });
+  const a0 = \u8D77\u70B9;
+  const a1 = a0 + Math.min(1, \u958B\u304D) * \u5168\u5468;
+  const large = a1 - a0 > Math.PI ? 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 });
+}
 
 // src/kinds/chart-number.ts
 function \u5B9F\u5024\u8868\u8A18(v) {
@@ -12284,15 +12312,6 @@ function \u8F2A\u306E\u9053(cx, cy, R, r, a0, a1) {
   const large = a1 - a0 > Math.PI ? 1 : 0;
   return `M ${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)} L ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} A ${r} ${r} 0 ${large} 0 ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} Z`;
 }
-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 });
-}
 function sliceColor(tone, idx) {
   if (tone) return TONE[tone];
   return chartSeriesColor(idx);
@@ -12300,7 +12319,9 @@ function sliceColor(tone, idx) {
 function ChartGaugeNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -12345,6 +12366,21 @@ function ChartGaugeNode({
   const \u898B\u51FA\u3057\u306E\u7D1A = Math.max(9, Math.round(\u5408\u8A08\u306E\u7D1A * 0.38));
   const \u5185\u8A33\u306E\u5E45 = \u4F7F\u3048\u308B\u5E452 / Math.max(data.length, 1);
   const \u5185\u8A33\u306Ey = cy + \u5F27\u3068\u5185\u8A33\u306E\u9593;
+  const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u5207\u308A\u629C\u304Did = `cdl-gauge-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const \u5F27\u305F\u3061 = slices.map((s, idx) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      "data-cdl-role": "chart-gauge-arc",
+      "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+      d: s.path,
+      fill: arcColor(s.d.tone, idx),
+      stroke: "var(--cdl-node-fill, #ffffff)",
+      strokeWidth: 3,
+      strokeLinejoin: "round"
+    },
+    `arc-${idx}`
+  ));
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -12360,19 +12396,8 @@ function ChartGaugeNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    slices.map((s, idx) => /* @__PURE__ */ jsx(
-      "path",
-      {
-        "data-cdl-role": "chart-gauge-arc",
-        "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
-        d: s.path,
-        fill: arcColor(s.d.tone, idx),
-        stroke: "var(--cdl-node-fill, #ffffff)",
-        strokeWidth: 3,
-        strokeLinejoin: "round"
-      },
-      `arc-${idx}`
-    )),
+    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, \u4F38\u3073, Math.PI, Math.PI) }) }),
+    drawing ? /* @__PURE__ */ jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u5F27\u305F\u3061 }) : \u5F27\u305F\u3061,
     /* @__PURE__ */ jsx(
       "text",
       {
@@ -12437,7 +12462,9 @@ function arcColor(tone, idx) {
 function ChartRadialNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -12476,6 +12503,20 @@ function ChartRadialNode({
     };
   });
   const \u4E00\u89A7\u306E\u59CB\u307E\u308A = PAD + (\u4F7F\u3048\u308B\u9AD8\u3055 - \u884C\u306E\u9AD8\u3055 * data.length) / 2 + \u884C\u306E\u9AD8\u3055 / 2;
+  const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u5207\u308A\u629C\u304Did = `cdl-radial-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const \u53D6\u308A\u5206\u305F\u3061 = rings.map(
+    (r, idx) => r.\u53D6\u308A\u5206 === null ? null : /* @__PURE__ */ jsx(
+      "path",
+      {
+        "data-cdl-role": "chart-radial-arc",
+        "data-cdl-unresolved": r.d.unresolved ? "true" : void 0,
+        d: r.\u53D6\u308A\u5206,
+        fill: arcColor2(r.d.tone, idx)
+      },
+      `arc-${idx}`
+    )
+  );
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -12501,18 +12542,8 @@ function ChartRadialNode({
       },
       `track-${idx}`
     )),
-    rings.map(
-      (r, idx) => r.\u53D6\u308A\u5206 === null ? null : /* @__PURE__ */ jsx(
-        "path",
-        {
-          "data-cdl-role": "chart-radial-arc",
-          "data-cdl-unresolved": r.d.unresolved ? "true" : void 0,
-          d: r.\u53D6\u308A\u5206,
-          fill: arcColor2(r.d.tone, idx)
-        },
-        `arc-${idx}`
-      )
-    ),
+    drawing && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(\u5F27\u306Ecx, cy, \u5916\u534A\u5F84 + \u5E2F\u306E\u5E45, \u958B\u304D) }) }),
+    drawing ? /* @__PURE__ */ jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u53D6\u308A\u5206\u305F\u3061 }) : \u53D6\u308A\u5206\u305F\u3061,
     data.map((d, idx) => {
       const y = \u4E00\u89A7\u306E\u59CB\u307E\u308A + \u884C\u306E\u9AD8\u3055 * idx;
       return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-radial-item", children: [
@@ -12835,7 +12866,9 @@ var SLICE_MIN_W_FOR_VALUE = 84;
 function ChartStackedBarNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -12853,6 +12886,8 @@ function ChartStackedBarNode({
   const \u4E00\u89A7\u306E\u9AD8\u3055 = 26;
   const \u5168\u4F53\u306E\u9AD8\u3055 = \u5E2F\u305F\u3061.length * \u5E2F\u306E\u9AD8\u3055 + (\u5E2F\u305F\u3061.length - 1) * \u5E2F\u306E\u9593 + 16 + \u4E00\u89A7\u306E\u9AD8\u3055;
   const \u4E0A\u7AEF = Math.max(PAD, (node.h - \u5168\u4F53\u306E\u9AD8\u3055) / 2);
+  const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u5207\u308A\u629C\u304Did = `cdl-stacked-bar-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -12868,6 +12903,7 @@ function ChartStackedBarNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
+    drawing && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: \u5E2F\u306E\u5DE6 + \u5E2F\u306E\u5E45 * \u4F38\u3073, height: node.h }) }) }),
     \u5E2F\u305F\u3061.map((\u5E2F, \u6BB5) => {
       const y = \u4E0A\u7AEF + \u6BB5 * (\u5E2F\u306E\u9AD8\u3055 + \u5E2F\u306E\u9593);
       let \u5DE6 = \u5E2F\u306E\u5DE6;
@@ -12884,68 +12920,62 @@ function ChartStackedBarNode({
             children: \u5E2F.\u540D\u524D
           }
         ),
-        \u5E2F.\u533A\u753B.map((s, idx) => {
-          const w = \u5E2F\u306E\u5E45 * s.\u5272\u5408;
-          const x = \u5DE6;
-          \u5DE6 += w;
-          const \u8272 = \u5370\u306E\u82723(s.tone, idx);
-          return /* @__PURE__ */ jsxs("g", { children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                "data-cdl-role": "chart-stacked-bar-slice",
-                "data-cdl-unresolved": s.unresolved ? "true" : void 0,
-                x,
-                y,
-                width: Math.max(0, w),
-                height: \u5E2F\u306E\u9AD8\u3055,
-                fill: \u8272
-              }
-            ),
-            w >= SLICE_MIN_W_FOR_TEXT && /* @__PURE__ */ jsx(
-              "text",
-              {
-                "data-cdl-role": "chart-stacked-bar-slice-text",
-                x: x + w / 2,
-                y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + (w >= SLICE_MIN_W_FOR_VALUE ? -2 : 4),
-                fontSize: \u533A\u753B\u306E\u7D1A,
-                fontWeight: 700,
-                textAnchor: "middle",
-                fill: "#ffffff",
-                children: \u5272\u5408\u8868\u8A18(s.\u5272\u5408)
-              }
-            ),
-            w >= SLICE_MIN_W_FOR_VALUE && /* @__PURE__ */ jsx(
-              "text",
-              {
-                "data-cdl-role": "chart-stacked-bar-slice-value",
-                x: x + w / 2,
-                y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + 13,
-                fontSize: \u533A\u753B\u306E\u7D1A - 1,
-                textAnchor: "middle",
-                fill: "#ffffff",
-                fillOpacity: 0.85,
-                children: \u5B9F\u5024\u8868\u8A18(s.\u5B9F\u5024)
-              }
-            )
-          ] }, `slice-${idx}`);
-        })
+        (() => {
+          const \u533A\u753B\u305F\u3061 = \u5E2F.\u533A\u753B.map((s, idx) => {
+            const w = \u5E2F\u306E\u5E45 * s.\u5272\u5408;
+            const x = \u5DE6;
+            \u5DE6 += w;
+            const \u8272 = \u5370\u306E\u82723(s.tone, idx);
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  "data-cdl-role": "chart-stacked-bar-slice",
+                  "data-cdl-unresolved": s.unresolved ? "true" : void 0,
+                  x,
+                  y,
+                  width: Math.max(0, w),
+                  height: \u5E2F\u306E\u9AD8\u3055,
+                  fill: \u8272
+                }
+              ),
+              w >= SLICE_MIN_W_FOR_TEXT && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  "data-cdl-role": "chart-stacked-bar-slice-text",
+                  x: x + w / 2,
+                  y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + (w >= SLICE_MIN_W_FOR_VALUE ? -2 : 4),
+                  fontSize: \u533A\u753B\u306E\u7D1A,
+                  fontWeight: 700,
+                  textAnchor: "middle",
+                  fill: "#ffffff",
+                  children: \u5272\u5408\u8868\u8A18(s.\u5272\u5408)
+                }
+              ),
+              w >= SLICE_MIN_W_FOR_VALUE && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  "data-cdl-role": "chart-stacked-bar-slice-value",
+                  x: x + w / 2,
+                  y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + 13,
+                  fontSize: \u533A\u753B\u306E\u7D1A - 1,
+                  textAnchor: "middle",
+                  fill: "#ffffff",
+                  fillOpacity: 0.85,
+                  children: \u5B9F\u5024\u8868\u8A18(s.\u5B9F\u5024)
+                }
+              )
+            ] }, `slice-${idx}`);
+          });
+          return drawing ? /* @__PURE__ */ jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u533A\u753B\u305F\u3061 }) : \u533A\u753B\u305F\u3061;
+        })()
       ] }, `bar-${\u6BB5}`);
     }),
     \u4E00\u89A7\u306E\u4E26\u3073(data, \u5E2F\u306E\u5DE6, node.w - PAD, \u540D\u524D\u306E\u7D1A).map(({ d, idx, x, \u884C }) => {
       const y = \u4E0A\u7AEF + \u5E2F\u305F\u3061.length * (\u5E2F\u306E\u9AD8\u3055 + \u5E2F\u306E\u9593) - \u5E2F\u306E\u9593 + 16 + \u4E00\u89A7\u306E\u9AD8\u3055 / 2 + \u884C * \u4E00\u89A7\u306E\u9AD8\u3055;
       return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-stacked-bar-legend", children: [
         /* @__PURE__ */ jsx("rect", { x, y: y - 5, width: 10, height: 10, rx: 2, fill: \u5370\u306E\u82723(d.tone, idx) }),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: x + 16,
-            y: y + 4,
-            fontSize: \u540D\u524D\u306E\u7D1A,
-            fill: "var(--cdl-text, #1a1f2a)",
-            children: d.label
-          }
-        )
+        /* @__PURE__ */ jsx("text", { x: x + 16, y: y + 4, fontSize: \u540D\u524D\u306E\u7D1A, fill: "var(--cdl-text, #1a1f2a)", children: d.label })
       ] }, `legend-${idx}`);
     })
   ] });
@@ -17906,9 +17936,27 @@ function CdlNodeView({
           }
         );
       case "chart-gauge":
-        return /* @__PURE__ */ jsx(ChartGaugeNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          ChartGaugeNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-stacked-bar":
-        return /* @__PURE__ */ jsx(ChartStackedBarNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          ChartStackedBarNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-slope":
         return /* @__PURE__ */ jsx(
           ChartSlopeNode,
@@ -17925,7 +17973,16 @@ function CdlNodeView({
       case "chart-stat":
         return /* @__PURE__ */ jsx(ChartStatNode, { node: resolvedNode, active, stateValues });
       case "chart-radial":
-        return /* @__PURE__ */ jsx(ChartRadialNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsx(
+          ChartRadialNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-bar":
         return /* @__PURE__ */ jsx(
           ChartBarNode,
@@ -18146,6 +18203,7 @@ function CdlStage({
   laid,
   currentPhase,
   progress,
+  drawProgress,
   stateValues,
   debug,
   compact = false,
@@ -18203,7 +18261,8 @@ function CdlStage({
     }
     return scales;
   }, [laid]);
-  const \u63CF\u304F\u9032\u307F = \u63CF\u304F\u9032\u307F\u306B\u76F4\u3059(progress, currentPhase?.drawRatio);
+  const \u63CF\u304F\u7D20\u306E\u9032\u307F = drawProgress ?? progress;
+  const \u63CF\u304F\u9032\u307F = \u63CF\u304F\u9032\u307F\u306B\u76F4\u3059(\u63CF\u304F\u7D20\u306E\u9032\u307F, currentPhase?.drawRatio);
   const { lifelineStarts, uniformFooterTop } = useMemo(() => {
     const starts = lifelineStartYs(laid.nodes);
     return {
@@ -18382,7 +18441,7 @@ function CdlStage({
               edge,
               active: activeSet.has(edge.id),
               drawing: \u77E2\u5370\u306E\u51FA\u756A.\u4F38\u3070\u3059\u304B(edge.id),
-              progress,
+              progress: \u77E2\u5370\u306E\u51FA\u756A.\u4F38\u3070\u3059\u304B(edge.id) ? \u63CF\u304F\u9032\u307F : progress,
               stateValues
             },
             edge.id
@@ -27215,6 +27274,7 @@ function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hideMiniP
   const phaseIdx = focusPhaseId ? laid.phases.findIndex((p) => p.id === focusPhaseId) : state.phaseIndex;
   const currentPhase = laid.phases[Math.max(0, phaseIdx)] ?? laid.phases[0];
   const progress = reduced ? 1 : state.phaseProgress;
+  const drawProgress = reduced ? 1 : state.phaseLinearProgress;
   const baseStateValues = computeStateValues(laid, phaseIdx, progress);
   const isInteractive = hasInteractivePrimitives(diagram);
   const interactive = useInteractiveIntegration(
@@ -27256,7 +27316,7 @@ function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hideMiniP
           }
         ),
         isInteractive && interactive.panel,
-        /* @__PURE__ */ jsx(CdlStage, { laid, currentPhase, progress, stateValues, debug, compact: hideHeader, svgRef: isInteractive ? interactive.svgRef : void 0 }),
+        /* @__PURE__ */ jsx(CdlStage, { laid, currentPhase, progress, drawProgress, stateValues, debug, compact: hideHeader, svgRef: isInteractive ? interactive.svgRef : void 0 }),
         hideHeader && !hideMiniPhaseIndicator && currentPhase && laid.phases.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-[var(--cdl-divider,#d4d4d8)]/40 bg-[var(--cdl-stage-bg,#f1f5f9)]/50 px-3 py-2 text-xs", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
             laid.phases.map((p, i) => /* @__PURE__ */ jsx(