@cardenelabs/cdl 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -7,6 +7,50 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 予定 ... feedback を反映した patch / minor。
 
+## [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 +436,8 @@ 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.10.0...HEAD
+[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,20 @@ 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) に合わせて描かれる。 現在の対象種別は `chart-line` で、
+折れ線が左端から右へ伸び、 点と値の数字は線の先が届いた時に現れる (軸 / 格子 / 横軸の名前は
+最初から出る)。 `draw` を書かない図は従来どおり全長で描き、 DOM に dash 属性も付かない。
+
 phase が定義されると自動的に。
 - 全 phase が timeline 化 (autoplay + loop)
 - 各 phase の active set 以外は inactive 化 (灰 dashed)
@@ -351,7 +360,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
@@ -15921,7 +15927,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 +15939,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 +15952,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 +15975,16 @@ 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 (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)`);
+      }
+    }
     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 +21282,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 +21305,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 +21400,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 +21412,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",
           {
@@ -26703,6 +26743,7 @@ function ShapeCustomerServiceNode({ node, active }) {
 function CdlNodeView({
   node,
   active,
+  drawing = false,
   progress,
   stateValues,
   currentPhaseId
@@ -26752,7 +26793,16 @@ 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 });
       case "chart-bar":
@@ -26946,6 +26996,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 +27133,7 @@ function CdlStage({
               {
                 node,
                 active: activeSet.has(node.id),
+                drawing: drawSet.has(node.id),
                 progress,
                 stateValues,
                 currentPhaseId: currentPhase?.id