@cardenelabs/cdl 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -7,6 +7,68 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 予定 ... feedback を反映した patch / minor。
 
+## [0.11.0] - 2026-08-21
+
+### Added
+
+- **棒と扇も段の進みでそれぞれの起点から描けるようにした** (#517)
+
+  段の `draw` は `0.10.0` で入ったが `chart-line` だけが対応していた。 対象を 3 種に広げ、
+  棒は横軸から上へ伸び、扇は 12 時から時計回りに開くようにした。 数字は棒の頭に付いて動き、
+  凡例はその扇が開き始めた時に出る。
+
+  **形を表す属性は触らない**。 折れ線が `points` を触らず dash で伸ばしたのと同じ制約で、
+  棒は足元を動かさない点にした倍率で包み、円は扇形の切り抜きで見える範囲だけを変える。
+  `rect` の `height` / `y` と `path` の `d` は進みに関わらず実値のまま = 図形の寸法から値を
+  測る利用側が、進みの途中で別の値を読まない。
+
+  対応種別の一覧を `validate.ts` の `DRAW_KINDS` が持ち、書けない種別を指した時の知らせも
+  そこから組み立てる。
+
+## [0.10.0] - 2026-08-21
+
+### Added
+
+- **段の進みで折れ線を左の起点から伸ばせるようにした** (#513)
+
+  段 (`CdlPhase`) に `draw` を足した。 `activate` と同じ形で node id を並べると、その node が
+  段の進み (0 → 1) に合わせて描かれる。 最初の対象は折れ線 (`chart-line`) で、線が左端から
+  右へ伸び、点と値の数字は線の先が自分の位置に届いた時に現れる。 軸 / 格子 / 横軸の名前は
+  最初から出る。
+
+  伸ばすのは dash (`pathLength` / `strokeDasharray` / `strokeDashoffset`) で、`points` は進みに
+  関わらず全点を持つ。 点を削る形にすると、利用側が数えている点の数が進みの途中で変わる。
+
+  引き金に `activate` を使わないのは、1 箱で図全体を描く種別では焦点がその箱に解決されるため。
+  連続する段で光り続ける図が実在し、「光っていたら描く」 にすると値が動くだけの段でも線を
+  引き直すことになる。
+
+  組立て API は `PhaseBuilder.draw(...ids)`。 `draw` を書かない図は従来どおり全長で描き、
+  DOM に属性も 1 つも増えない。
+
+### Fixed
+
+- **候補が node の時に「定義済 lane」 と知らせるのをやめた** (#513)
+
+  近い候補が無い時に出る一覧の文言が `lane` 固定で、探す先を間違える案内になっていた。
+  `suggest` に候補の種別を渡せるようにし、node を候補にする 3 箇所 (`draw` / edge の `from` /
+  edge の `to`) を揃えた。
+
+### Changed
+
+- **repo 内の agent worktree を eslint の対象から外した** (#507)
+
+  指摘の 6 割が worktree の複製から出ており、実体を直しても消えなかった。
+
+- **README と CONTRIBUTING の記述を実態に合わせた** (#505)
+
+  存在しない playground と command を前提にした記述が残っていた。
+
+- **skip されていた検査 2 件を解除した** (#510 / #511)
+
+  どちらも routing の不具合ではなく、検査の前提が誤っていた。 実装は 1 行も変えていない。
+  併せて、行き先として書かれていた実在しない Issue 番号を実在するものに付け替えた。
+
 ## [0.9.0] - 2026-08-20
 
 `0.8.0` は tag を打った後 npm に公開されないまま 17 commit が載った。 同じ番号で公開すると
@@ -392,7 +454,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.9.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.11.0...HEAD
+[0.11.0]: https://github.com/cardene777/cdl/compare/v0.10.0...v0.11.0
+[0.10.0]: https://github.com/cardene777/cdl/compare/v0.9.0...v0.10.0
 [0.9.0]: https://github.com/cardene777/cdl/compare/v0.8.0...v0.9.0
 [0.8.0]: https://github.com/cardene777/cdl/compare/v0.7.0...v0.8.0
 [0.7.0]: https://github.com/cardene777/cdl/compare/v0.6.1...v0.7.0

package/SPEC.md

@@ -123,11 +123,32 @@ diagram.phase(id, {
   body: string,        // 説明文 (日本語、 header に表示)
 }, builder => builder
     .activate(...ids)  // active な node / edge id を列挙
+    .draw(...ids)      // この phase で左の起点から描き始める node id を列挙
     .tween(stateId, from, to)  // state を線形補間
     .badge(text)       // BalanceDiffCard 等の status badge 文字列
 );
 ```
 
+`draw` は `activate` と別集合で持つ。 1 箱で図全体を描く種別では焦点がその箱に解決される
+ため、 連続する phase で光り続ける図が実在し、 光っているかを引き金にすると値が動くだけの
+phase でも線を引き直すことになる。
+
+対象の node は phase の進み (0→1) に合わせて描かれる。 起点は種別ごとに違う。
+
+| kind | 起点 | 動き | 添える値 |
+|---|---|---|---|
+| `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
+| `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
+| `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+
+対応種別の一覧は `validate.ts` の `DRAW_KINDS` が持ち、 知らせの文面もそこから組み立てる。
+
+**形を表す属性は触らない**。 折れ線は `points` を、 棒は `rect` の `height` / `y` を、
+円は `path` の `d` を進みに関わらず実値のまま保ち、 見える範囲だけを変える (dash / 倍率 /
+切り抜き)。 図形の寸法から値を測る利用側が、 進みの途中で別の値を読まないようにするため。
+
+`draw` を書かない図は従来どおり全体を描き、 DOM に属性も要素も足さない。
+
 phase が定義されると自動的に。
 - 全 phase が timeline 化 (autoplay + loop)
 - 各 phase の active set 以外は inactive 化 (灰 dashed)
@@ -351,7 +372,7 @@ export const erc20Transfer = diagram("erc20-transfer", { topic: "ERC-20 Transfer
 | arrow | edge の from/to が存在、 同 from/to ペアが side hint なく被る |
 | label | label / sublabel 文字数で box が lane 幅を超える |
 | japanese-only | title / eyebrow / subtitle / label に uppercase 英単語 (FUNCTION/STORAGE/...) |
-| phase-isolation | phase の activate id が存在する node/edge を指す |
+| phase-isolation | phase の activate id が存在する node/edge を指す、 draw id が存在する node を指す |
 | neumorphism | tone が定義された 4 色から外れる |
 
 build error / warn を投げ、 著者は cdl 段階で修正できる (screenshot 取る前に)。

package/dist/index.cjs

@@ -9363,6 +9363,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;
@@ -11442,7 +11446,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,
@@ -11450,6 +11454,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
@@ -15858,6 +15864,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) {
@@ -15921,7 +15928,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 = "";
@@ -15933,7 +15940,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)) {
@@ -15946,13 +15953,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`
       );
     }
@@ -15969,6 +15976,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`);
@@ -21266,7 +21285,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;
@@ -21287,6 +21308,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;
@@ -21364,7 +21403,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) => {
@@ -21375,40 +21415,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__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": d.unresolved ? "true" : void 0, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            cx,
-            cy,
-            r: 5,
-            fill: "var(--cdl-node-fill, #ffffff)",
-            stroke: "var(--cdl-tone-accent, #2d6a8f)",
-            strokeWidth: 2.5
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            cx,
-            cy,
-            r: 2.5,
-            fill: "var(--cdl-tone-accent, #2d6a8f)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 5,
+              fill: "var(--cdl-node-fill, #ffffff)",
+              stroke: "var(--cdl-tone-accent, #2d6a8f)",
+              strokeWidth: 2.5
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 2.5,
+              fill: "var(--cdl-tone-accent, #2d6a8f)"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
           "text",
           {
@@ -21427,8 +21470,11 @@ function ChartLineNode({
 function ChartPieNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
+  const instanceId = react.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);
@@ -21441,20 +21487,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;
@@ -21473,7 +21525,8 @@ function ChartPieNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    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, \u958B\u304D) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, children: slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         "data-cdl-role": "chart-pie-slice",
@@ -21485,8 +21538,8 @@ function ChartPieNode({
         strokeWidth: 1.5
       },
       `slice-${idx}`
-    )),
-    slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${legendX} ${legendStartY + idx * legendGap})`, children: [
+    )) }),
+    slices.map((s, idx) => !\u958B\u304D\u59CB\u3081\u305F(s.startFrac) ? null : /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${legendX} ${legendStartY + idx * legendGap})`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
         {
@@ -21524,6 +21577,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__ */ 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 });
+}
 var FALLBACK_ORDER = ["accent", "teal", "warning", "success", "info", "error"];
 function sliceColor(tone, idx) {
   if (tone) return TONE[tone];
@@ -21532,7 +21594,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;
@@ -21555,6 +21619,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__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -21611,26 +21677,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("g", { transform: `translate(0 ${\u6A2A\u8EF8\u306Ey}) scale(1 ${\u4F38\u3073}) translate(0 ${-\u6A2A\u8EF8\u306Ey})`, children: \u68D2 }) : \u68D2,
         /* @__PURE__ */ jsxRuntime.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)",
@@ -26703,6 +26771,7 @@ function ShapeCustomerServiceNode({ node, active }) {
 function CdlNodeView({
   node,
   active,
+  drawing = false,
   progress,
   stateValues,
   currentPhaseId
@@ -26752,11 +26821,38 @@ function CdlNodeView({
       // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
       // 親子の繋がりと、描かれない欄 (補足) は解決しない。
       case "chart-line":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartLineNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartLineNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-pie":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartPieNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartPieNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-bar":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartBarNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartBarNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "gantt-timeline":
         return /* @__PURE__ */ jsxRuntime.jsx(GanttNode, { node: resolvedNode, active, stateValues });
       case "mind-map":
@@ -26946,6 +27042,7 @@ function CdlStage({
   svgRef
 }) {
   const activeSet = new Set(currentPhase?.activate ?? []);
+  const drawSet = new Set(currentPhase?.draw ?? []);
   const { lifelineStarts, uniformFooterTop } = react.useMemo(() => {
     const starts = lifelineStartYs(laid.nodes);
     return {
@@ -27082,6 +27179,7 @@ function CdlStage({
               {
                 node,
                 active: activeSet.has(node.id),
+                drawing: drawSet.has(node.id),
                 progress,
                 stateValues,
                 currentPhaseId: currentPhase?.id