@cardenelabs/cdl 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -5,6 +5,45 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.19.0] - 2026-08-29
+
+### Changed
+
+- **字だけの箱で上下の余白を揃えた** (#586)
+
+  字しか持たない箱が、字の下に余白を大きく残したまま並んでいた (user 実機指摘)。
+  実測で `service` は上 15.7 に対し下が 81、 `merkle-tree` は下が 121 空いていた。
+  字は上から描かれるので、箱を高くしたぶんがそのまま下の空きになっていた。
+
+  上の余白と同じだけを下にも取る形へ揃える (`新 h = 上の余白 × 2 + 字の高さ`)。
+  23 種別が 19 から 104 縮む。 `person` / `service` / `api` 等 18 種別は 116 に揃う。
+
+  **絵を持つ種別は動かさない**。 `shape-` の 49 種別は箱いっぱいに絵を描くので、
+  詰めると絵が入らない (実測で `cloud` は絵が 200 あり、箱 173 を既に超えている)。
+  差が 5 未満の 2 種別 (`card` -1 / `decision` -3) も、見た目が変わらないので据え置く。
+
+  行を持たない `storage` だけは token ではなく `autoStorageHeight` の中の値で決まるため、
+  そちらを 150 から 115 にした。 行を持つ形 (token 240 が下限) は変えていない。
+
+## [0.18.1] - 2026-08-29
+
+### Fixed
+
+- **矢印を伸ばすのは初めて出る段だけにした** (#584)
+
+  伸ばすかを「その矢印が光っているか」 で引いていたため、段をまたいで光り続ける図で
+  **既に見えている線が段の変わるたびに引き直されて** いた (実測 = 表の図で 3 本とも毎段伸び直す)。
+
+  「増えた」 のは 1 度だけなので、動くのも 1 度にする。 段の並びから矢印ごとの初出を求め、
+  その段でだけ起点から伸ばす。
+
+  **隠さない図 (`edgeReveal: "all"`) でも初出は数える**。 `all` は「最初から見せる」 だけの
+  指定で、伸びる動きまで毎段繰り返してよいという意味ではない。
+
+  段が矢印を 1 度も名指ししない図では伸ばさない = 初出が無く、いつ伸ばすか決められない。
+
+  検査が実際の描画から読めるよう、`data-cdl-drawing` を矢印に出す。
+
 ## [0.18.0] - 2026-08-29
 
 ### Added
@@ -945,7 +984,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.18.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.19.0...HEAD
+[0.19.0]: https://github.com/cardene777/cdl/compare/v0.18.1...v0.19.0
+[0.18.1]: https://github.com/cardene777/cdl/compare/v0.18.0...v0.18.1
 [0.18.0]: https://github.com/cardene777/cdl/compare/v0.17.1...v0.18.0
 [0.17.1]: https://github.com/cardene777/cdl/compare/v0.17.0...v0.17.1
 [0.17.0]: https://github.com/cardene777/cdl/compare/v0.16.0...v0.17.0

package/dist/index.cjs

@@ -13300,35 +13300,35 @@ var TOKENS = {
   contain_pad: 28,
   // node sizes (kind ごと、 unified row h は engine が max() で算出)
   node: {
-    actor: { w: 340, h: 200 },
-    function: { w: 380, h: 170 },
+    actor: { w: 340, h: 165 },
+    function: { w: 380, h: 151 },
     storage: { w: 400, h: 240 },
-    event: { w: 360, h: 200 },
+    event: { w: 360, h: 156 },
     card: { w: 320, h: 150 },
     // 人系
-    person: { w: 280, h: 180 },
-    "user-group": { w: 320, h: 180 },
-    admin: { w: 280, h: 180 },
-    developer: { w: 280, h: 180 },
-    "external-user": { w: 300, h: 180 },
+    person: { w: 280, h: 116 },
+    "user-group": { w: 320, h: 116 },
+    admin: { w: 280, h: 116 },
+    developer: { w: 280, h: 116 },
+    "external-user": { w: 300, h: 116 },
     // インフラ
-    database: { w: 320, h: 200 },
-    cache: { w: 280, h: 160 },
-    queue: { w: 340, h: 140 },
-    "message-bus": { w: 380, h: 140 },
+    database: { w: 320, h: 172 },
+    cache: { w: 280, h: 116 },
+    queue: { w: 340, h: 116 },
+    "message-bus": { w: 380, h: 116 },
     cloud: { w: 320, h: 180 },
-    cdn: { w: 320, h: 160 },
+    cdn: { w: 320, h: 116 },
     // アプリ系
-    service: { w: 320, h: 180 },
-    api: { w: 320, h: 160 },
-    frontend: { w: 320, h: 180 },
-    backend: { w: 320, h: 180 },
-    webhook: { w: 320, h: 160 },
-    microservice: { w: 320, h: 180 },
+    service: { w: 320, h: 116 },
+    api: { w: 320, h: 116 },
+    frontend: { w: 320, h: 116 },
+    backend: { w: 320, h: 116 },
+    webhook: { w: 320, h: 116 },
+    microservice: { w: 320, h: 116 },
     // データ / 判定
-    signer: { w: 300, h: 180 },
-    oracle: { w: 320, h: 180 },
-    "merkle-tree": { w: 340, h: 220 },
+    signer: { w: 300, h: 116 },
+    oracle: { w: 320, h: 116 },
+    "merkle-tree": { w: 340, h: 116 },
     decision: { w: 300, h: 180 },
     // Chart 系 (CAR-994 Phase A) ... 1 node に datum 配列を持ち、 kind 内で SVG geometry 描画。
     // 実際の w/h は preset chart() が w/h override で指定 (default fallback は preset 未指定時のみ)。
@@ -15088,7 +15088,7 @@ function autoStorageHeight(n, defaultH) {
   if (n.h != null) return n.h;
   const \u5370\u3042\u308A = n.rowMarks !== void 0;
   const \u547C\u3073\u540D\u306E\u5206 = \u5370\u3042\u308A && n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
-  if (!n.rows || n.rows.length === 0) return 150 + \u547C\u3073\u540D\u306E\u5206;
+  if (!n.rows || n.rows.length === 0) return 115 + \u547C\u3073\u540D\u306E\u5206;
   const \u5FC5\u8981 = requiredRowsHeight("storage", n.rows.length) ?? defaultH;
   if (\u5370\u3042\u308A) return \u5FC5\u8981 + \u547C\u3073\u540D\u306E\u5206;
   return Math.max(defaultH, \u5FC5\u8981);
@@ -21274,6 +21274,7 @@ function labelTextOpacity(line) {
 function CdlEdgeView({
   edge,
   active,
+  drawing,
   progress,
   stateValues
 }) {
@@ -21298,6 +21299,7 @@ function CdlEdgeView({
       "data-cdl-from": edge.from,
       "data-cdl-to": edge.to,
       "data-cdl-active": active ? "true" : "false",
+      "data-cdl-drawing": drawing ? "true" : "false",
       "data-cdl-path-d": edge.d,
       "data-cdl-label-x": edge.labelX,
       "data-cdl-label-y": edge.labelY,
@@ -21329,6 +21331,7 @@ function CdlEdgeView({
           {
             edge,
             active,
+            drawing,
             progress,
             color,
             marker,
@@ -21356,6 +21359,7 @@ function CdlEdgeView({
 function SolidEdgePath({
   edge,
   active,
+  drawing,
   progress,
   color,
   marker,
@@ -21363,7 +21367,7 @@ function SolidEdgePath({
   dashed,
   stateValues
 }) {
-  const visibleD = active ? pathSubpath(edge.d, progress) : edge.d;
+  const visibleD = drawing ? pathSubpath(edge.d, progress) : edge.d;
   const defaultWidth = active ? 5 : 2.5;
   const boundWidth = edge.widthBind && stateValues ? resolveNumericAttr(edge.widthBind, stateValues, defaultWidth) : defaultWidth;
   const boundStroke = edge.strokeBind && stateValues ? interpolate(edge.strokeBind, stateValues) : color;
@@ -28807,19 +28811,36 @@ function CdlStage({
   svgRef
 }) {
   const activeSet = new Set(currentPhase?.activate ?? []);
-  const \u51FA\u756A\u306E\u6765\u305F\u77E2\u5370 = react.useMemo(() => {
-    if ((laid.edgeReveal ?? EDGE_REVEAL_DEFAULT) === "all") return () => true;
+  const \u77E2\u5370\u306E\u51FA\u756A = react.useMemo(() => {
     const \u521D\u51FA = /* @__PURE__ */ new Map();
     laid.phases.forEach((p, i) => {
       for (const id of p.activate ?? []) if (!\u521D\u51FA.has(id)) \u521D\u51FA.set(id, i);
     });
     const \u4ECA = currentPhase === void 0 ? -1 : laid.phases.findIndex((p) => p.id === currentPhase.id);
-    return (edgeId) => {
-      const first = \u521D\u51FA.get(edgeId);
-      if (first === void 0) return true;
-      return \u4ECA < 0 || \u4ECA >= first;
+    const \u96A0\u3059 = (laid.edgeReveal ?? EDGE_REVEAL_DEFAULT) !== "all";
+    return {
+      \u51FA\u308B\u304B: (edgeId) => {
+        if (!\u96A0\u3059) return true;
+        const first = \u521D\u51FA.get(edgeId);
+        if (first === void 0) return true;
+        return \u4ECA < 0 || \u4ECA >= first;
+      },
+      /*
+       * この段で初めて出るか (#584)。
+       *
+       * 起点から伸ばすのはこの段だけ。 光っているかで引くと、段をまたいで光り続ける図で
+       * 既に見えている線が毎段引き直される (実測 = 表の図で 3 本とも段が変わるたびに伸び直した)。
+       *
+       * **隠さない図でも初出は数える**。 `all` は「最初から見せる」 だけの指定で、
+       * 伸びる動きまで毎段繰り返してよいという意味ではない。
+       */
+      \u4F38\u3070\u3059\u304B: (edgeId) => {
+        const first = \u521D\u51FA.get(edgeId);
+        if (first === void 0) return false;
+        return \u4ECA === first;
+      }
     };
-  }, [laid.phases, currentPhase]);
+  }, [laid.phases, currentPhase, laid.edgeReveal]);
   const drawSet = new Set(currentPhase?.draw ?? []);
   const \u63CF\u304F\u9032\u307F = \u63CF\u304F\u9032\u307F\u306B\u76F4\u3059(progress, currentPhase?.drawRatio);
   const { lifelineStarts, uniformFooterTop } = react.useMemo(() => {
@@ -28979,7 +29000,17 @@ function CdlStage({
             },
             lane.id
           )),
-          laid.edges.filter((edge) => \u51FA\u756A\u306E\u6765\u305F\u77E2\u5370(edge.id)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(CdlEdgeView, { edge, active: activeSet.has(edge.id), progress, stateValues }, edge.id)),
+          laid.edges.filter((edge) => \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(
+            CdlEdgeView,
+            {
+              edge,
+              active: activeSet.has(edge.id),
+              drawing: \u77E2\u5370\u306E\u51FA\u756A.\u4F38\u3070\u3059\u304B(edge.id),
+              progress,
+              stateValues
+            },
+            edge.id
+          )),
           laid.nodes.map((node) => {
             const \u63CF\u304F = drawSet.has(node.id);
             const view = /* @__PURE__ */ jsxRuntime.jsx(
@@ -28995,8 +29026,8 @@ function CdlStage({
             );
             return /* @__PURE__ */ jsxRuntime.jsx("g", { children: view }, node.id);
           }),
-          laid.edges.filter((edge) => Boolean(edge.dThrough) && \u51FA\u756A\u306E\u6765\u305F\u77E2\u5370(edge.id)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(CdlEdgeGlowView, { edge, active: activeSet.has(edge.id) }, `glow-${edge.id}`)),
-          laid.edges.filter((edge) => \u51FA\u756A\u306E\u6765\u305F\u77E2\u5370(edge.id)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(
+          laid.edges.filter((edge) => Boolean(edge.dThrough) && \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(CdlEdgeGlowView, { edge, active: activeSet.has(edge.id) }, `glow-${edge.id}`)),
+          laid.edges.filter((edge) => \u77E2\u5370\u306E\u51FA\u756A.\u51FA\u308B\u304B(edge.id)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(
             CdlEdgeLabelView,
             {
               edge,