@cardenelabs/cdl 0.37.0 → 0.39.0

package/CHANGELOG.md

@@ -5,6 +5,49 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.39.0] - 2026-09-07
+
+### Added
+
+- **弧と帯で量を表す 3 種も段の `draw` で起点から現れるようにした** (#715)
+
+  半円ゲージ (`chart-gauge`) は 9 時から上を通って 3 時へ弧が伸び、放射 (`chart-radial`) は
+  各輪が 12 時から時計回りに開き、積層帯 (`chart-stacked-bar`) は左から帯が伸びる。
+
+  どれも「量を長さで表す」 図なので、起点と伸びる向きが図の意味から決まる。 それまで
+  `draw` が効く種別は 9 つで、この 3 種は書いても何も起きなかった (実測で 6 秒間、
+  半円ゲージの弧の `d` が一度も変わらなかった)。 見本帳に並べると動く図と動かない図が混ざる。
+
+  **切り抜くのは量を表す形だけ**。 放射の軌道 (全周の薄い輪) は「あとどれだけで一周か」 を
+  示す枠なので最初から出す。 半円ゲージの合計の字は主役なので、左から半分ずつ現れると読めない。
+  積層帯の区画の字だけは区画と一緒に切り抜く (字は区画の上に乗っているため)。
+
+  形を表す属性は今までどおり触らない。 弧の `d` と区画の `width` は進みに関わらず実値で、
+  見える範囲だけが変わる。 `draw` を書かない図の絵は 1 文字も変わらない。
+
+## [0.38.0] - 2026-09-07
+
+### Fixed
+
+- **図を描く動きが前半に寄って読めないのを直した** (#711)
+
+  段の進みは `easeOutQuint` を通っており、`1.2s` の段で半分に達するのが 158 ms だった
+  (直線なら 600 ms)。 値が落ち着く動きには合う曲線だが、線を引く動きはペンの速さなので、
+  同じ曲線を当てると飛び出して這う。
+
+  折れ線は線の先が点に届いた時に値の字を出すが、5 点のうち 4 点が 292 ms の間に出て、
+  最後の 1 点まで 908 ms 空いていた。「1 つずつ現れる」 という読ませ方が成立していない。
+
+  `Timeline` が曲げる前の進み (`phaseLinearProgress`) も持つようにし、描く動き
+  (`draw` の node と、その段で初めて出る矢印) だけがそれを読む。 値の補間は今までどおり
+  曲げた進みで動く。
+
+  直線にしたのは、5 点が等間隔の時刻に出る唯一の曲線だったため (実測 = 直線 294 ms 間隔、
+  `easeOut` は 188 / 219 / 275 / 518、`easeInOut` は真ん中の 3 点が寄る)。
+
+  `drawRatio` も直っている。 曲げた進みで割っていたため `0.4` と書くと段の 4.8% で
+  描き終わっていた。 これからは書いた割合が実時間の割合になる。
+
 ## [0.37.0] - 2026-09-07
 
 ### Added
@@ -1717,7 +1760,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.37.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.39.0...HEAD
+[0.39.0]: https://github.com/cardene777/cdl/compare/v0.38.0...v0.39.0
+[0.38.0]: https://github.com/cardene777/cdl/compare/v0.37.0...v0.38.0
 [0.37.0]: https://github.com/cardene777/cdl/compare/v0.36.0...v0.37.0
 [0.36.0]: https://github.com/cardene777/cdl/compare/v0.35.0...v0.36.0
 [0.35.0]: https://github.com/cardene777/cdl/compare/v0.34.0...v0.35.0

package/SPEC.md

@@ -140,11 +140,15 @@ phase でも線を引き直すことになる。
 | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
 | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
 | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+| `chart-slope` | 左の軸 | 線が右の軸へ伸びる | 右の値は線が右の軸に着いた時 |
 | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
 | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
 | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
 | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
 | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+| `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
+| `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
+| `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
 
 対応種別の一覧は `validate.ts` の `DRAW_KINDS` が持ち、 知らせの文面もそこから組み立てる。
 
@@ -155,7 +159,8 @@ phase でも線を引き直すことになる。
 
 **枝が複数ある種別は段ごとに順に伸ばす** (`mind-map` / `tree-hierarchy`)。 深さを等分し、
 中心 / 根に近い段から順に伸ばす。 全部を同時に伸ばすと、離れた枝が宙に浮いたまま伸びる。
-進みの畳み方と dash の当て方は `kinds/draw-progress.ts` が SSOT。
+進みの畳み方と dash の当て方は `kinds/draw-progress.ts` が、 弧で量を表す図の切り抜きは
+`kinds/draw-arc.tsx` が SSOT。
 
 `draw` を書かない図は従来どおり全体を描き、 DOM に属性も要素も足さない。
 

package/dist/index.cjs

@@ -14158,6 +14158,8 @@ var Timeline = class {
   rafHandle = null;
   phaseIndex = 0;
   phaseProgress = 0;
+  /** 曲線を通す前の進み (cdl#711)。 経過時間そのものの割合で、 描く動きが読む */
+  phaseLinearProgress = 0;
   phaseStartedAt = 0;
   status = "idle";
   /**
@@ -14186,12 +14188,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
     };
   }
@@ -14213,13 +14215,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;
@@ -14242,7 +14245,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();
   }
@@ -14282,14 +14285,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();
   }
@@ -14310,7 +14313,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() {
@@ -14346,20 +14349,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) {
@@ -14374,6 +14377,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);
@@ -20792,7 +20808,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/;
@@ -24338,6 +24357,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d });
+}
 
 // src/kinds/chart-number.ts
 function \u5B9F\u5024\u8868\u8A18(v) {
@@ -24785,15 +24813,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d });
-}
 function sliceColor(tone, idx) {
   if (tone) return TONE[tone];
   return chartSeriesColor(idx);
@@ -24801,7 +24820,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;
@@ -24846,6 +24867,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-${react.useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const \u5F27\u305F\u3061 = slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -24861,19 +24897,8 @@ function ChartGaugeNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u5F27\u305F\u3061 }) : \u5F27\u305F\u3061,
     /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -24938,7 +24963,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;
@@ -24977,6 +25004,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-${react.useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const \u53D6\u308A\u5206\u305F\u3061 = rings.map(
+    (r, idx) => r.\u53D6\u308A\u5206 === null ? null : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -25002,18 +25043,8 @@ function ChartRadialNode({
       },
       `track-${idx}`
     )),
-    rings.map(
-      (r, idx) => r.\u53D6\u308A\u5206 === null ? null : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-radial-item", children: [
@@ -25336,7 +25367,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;
@@ -25354,6 +25387,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-${react.useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -25369,6 +25404,7 @@ function ChartStackedBarNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
+    drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: /* @__PURE__ */ jsxRuntime.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;
@@ -25385,68 +25421,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__ */ jsxRuntime.jsxs("g", { children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stacked-bar-legend", children: [
         /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: y - 5, width: 10, height: 10, rx: 2, fill: \u5370\u306E\u82723(d.tone, idx) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: x + 16,
-            y: y + 4,
-            fontSize: \u540D\u524D\u306E\u7D1A,
-            fill: "var(--cdl-text, #1a1f2a)",
-            children: d.label
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + 16, y: y + 4, fontSize: \u540D\u524D\u306E\u7D1A, fill: "var(--cdl-text, #1a1f2a)", children: d.label })
       ] }, `legend-${idx}`);
     })
   ] });
@@ -30407,9 +30437,27 @@ function CdlNodeView({
           }
         );
       case "chart-gauge":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartGaugeNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartGaugeNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-stacked-bar":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartStackedBarNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartStackedBarNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-slope":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ChartSlopeNode,
@@ -30426,7 +30474,16 @@ function CdlNodeView({
       case "chart-stat":
         return /* @__PURE__ */ jsxRuntime.jsx(ChartStatNode, { node: resolvedNode, active, stateValues });
       case "chart-radial":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartRadialNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartRadialNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-bar":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ChartBarNode,
@@ -30647,6 +30704,7 @@ function CdlStage({
   laid,
   currentPhase,
   progress,
+  drawProgress,
   stateValues,
   debug,
   compact = false,
@@ -30704,7 +30762,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 } = react.useMemo(() => {
     const starts = lifelineStartYs(laid.nodes);
     return {
@@ -30883,7 +30942,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
@@ -31114,6 +31173,7 @@ function CdlDiagramView({ diagram: diagram2, laid: laidProp, hideHeader = false,
   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(diagram2);
   const interactive = useInteractiveIntegration(
@@ -31155,7 +31215,7 @@ function CdlDiagramView({ diagram: diagram2, laid: laidProp, hideHeader = false,
           }
         ),
         isInteractive && interactive.panel,
-        /* @__PURE__ */ jsxRuntime.jsx(CdlStage, { laid, currentPhase, progress, stateValues, debug, compact: hideHeader, svgRef: isInteractive ? interactive.svgRef : void 0 }),
+        /* @__PURE__ */ jsxRuntime.jsx(CdlStage, { laid, currentPhase, progress, drawProgress, stateValues, debug, compact: hideHeader, svgRef: isInteractive ? interactive.svgRef : void 0 }),
         hideHeader && !hideMiniPhaseIndicator && currentPhase && laid.phases.length > 1 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
             laid.phases.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(