@cardenelabs/cdl 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -5,6 +5,81 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.18.0] - 2026-08-29
+
+### Added
+
+- **段が来るまで矢印を描かないようにした** (#582)
+
+  段を進めるごとに関係が 1 本ずつ増える図で、**全ての矢印が 1 段目から見えていた**。
+  段が矢印を光らせるとその線だけ引き直されるが、既に見えているので「増えた」 とは読めず、
+  無関係な線がちらついたようにしか見えない (user 実機確認)。
+
+  判定は **段が矢印を名指ししているか** で行う。 段のどこかで `activate` に載る矢印は、
+  その段が来るまで描かない。 1 度出たら以降は出したままにする = 消える向きの動きは、
+  読み手が「戻った」 と読む。
+
+  **段が矢印を 1 度も名指ししない図では隠さない**。 そういう図では矢印が骨格そのもので、
+  隠すと図が読めなくなる = 既定を変えても既存の図は動かない。
+
+  著者が切り替えられるよう `CdlDiagram.edgeReveal` を足した。
+
+  | 値 | 何が起きるか |
+  |---|---|
+  | `phase` (既定) | 段が名指しする矢印は、その段が来るまで描かない |
+  | `all` | 段に関わらず最初から全部描く |
+
+  書ける値の一覧 (`EDGE_REVEALS`) と既定 (`EDGE_REVEAL_DEFAULT`) を公開する。
+  利用側が手で並べると、値を足した時に書けないまま取り残される。
+
+## [0.17.1] - 2026-08-29
+
+### Changed
+
+- **箱の題を行より大きくした** (#580)
+
+  題が 22、行の名前が 26 で **題の方が小さかった**。 呼び名も題と同じ 22 で、どちらが主か
+  字の大きさから読めない。 箱を見た人が「何の箱か」 を最初に読めない状態だった。
+
+  | 要素 | いままで | これから |
+  |---|---|---|
+  | 題 | 22 | 34 |
+  | 行の名前 | 26 | 26 (据え置き、ここが基準) |
+  | 行の型 | 24 | 22 |
+  | 呼び名 | 22 | 20 |
+
+  行の名前を基準に上下へ広げる。 題を上げたぶん、1 行目の位置 (130 → 152) と題の位置
+  (78 → 86) も取り直した。 値は `layout/spec.ts` が SSOT で、検査もそこから引く。
+
+- **横に並ぶ箱を段の芯で揃えるようにした** (#580)
+
+  #578 では上端で揃えていたが、高さの違う箱が並ぶと背の低い箱ほど上に寄り、図全体が上へ
+  引っ張られて見えた。 芯で揃えると上端と下端は箱ごとに違うが、並びの重心が 1 本に通る。
+
+  見た目検査の `row-alignment` を厳しい側 (芯のみ) に戻した。 #578 で上端も認めていたのは
+  この揃え方に合わせたもので、前提が消えたので外す。
+
+- **格子に置く箱では縦の間隔の均一を求めないようにした** (#580)
+
+  `column-gap-uniform` は「engine が縦の間隔を制御している」 ことを前提に、そのばらつきを
+  layout の破綻として見る軸。 行頭の印を持つ箱は前提が違う = 段の位置を著者が `col` / `row`
+  で決め、高さは中身から出る (`autoStorageHeight`)。 段ごとに背が違えば間隔は必ずばらつく
+  (実測 = クラス図の 2 列目で端 132/216)。
+
+  **近づき過ぎだけは見る**。 均一を外しても、箱どうしが接する形は通さない
+  (#202 が実測した形)。
+
+### Added
+
+- **「いまどこか」 の色を意味の色と分けた** (#580)
+
+  順序図の板が引く朱を `--cdl-now` から取り、書かれていなければ従来どおり
+  `--cdl-tone-accent` に落ちる。
+
+  意味の 6 色は図の中で「呼び」 のような種類を描き分けるもので、利用側が系統色から取ることが
+  ある (実測 = dragon は青)。 板が指すのは意味ではなく「いまどこか」 で、役割は強調した箱の枠と
+  同じ = 利用側の主役色に揃うべき。
+
 ## [0.17.0] - 2026-08-28
 
 ### Added
@@ -870,7 +945,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.17.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.18.0...HEAD
+[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
 [0.16.0]: https://github.com/cardene777/cdl/compare/v0.15.0...v0.16.0
 [0.15.0]: https://github.com/cardene777/cdl/compare/v0.14.0...v0.15.0

package/dist/index.cjs

@@ -11803,7 +11803,7 @@ function genericTextCentered(kind, hasRows) {
 function genericTitleBaselineY(kind, h, hasRows) {
   return genericTextCentered(kind, hasRows) ? h / 2 + GENERIC_TITLE_CENTER_OFFSET : GENERIC_TITLE_TOP + genericTextShift(kind);
 }
-var ROW_TOP_STORAGE = 130;
+var ROW_TOP_STORAGE = 152;
 var ROW_PITCH_STORAGE = 56;
 var ROW_TOP_GENERIC = 100;
 var ROW_PITCH_GENERIC = 28;
@@ -11814,7 +11814,8 @@ var GENERIC_TITLE_FONT = 20;
 var GLYPH_CAP_RATIO = 0.72;
 var ROW_FONT_STORAGE = 26;
 var ROW_FONT_GENERIC = 21;
-var STORAGE_TITLE_BASELINE = 78;
+var STORAGE_TITLE_BASELINE = 86;
+var STORAGE_TITLE_FONT = 34;
 var SUBTITLE_ROW_SHIFT = 46;
 var STORAGE_ROW_DIVIDER_Y = Math.round(
   (STORAGE_TITLE_BASELINE + (ROW_TOP_STORAGE - ROW_FONT_STORAGE * GLYPH_CAP_RATIO)) / 2
@@ -15182,7 +15183,7 @@ function layoutNodes(diag, lanes) {
     const \u6BB5\u306E\u9AD8\u3055 = rowH.get(n.stack);
     const \u81EA\u524D\u306E\u9AD8\u3055 = n.rowMarks !== void 0;
     const h = n.h ?? (\u81EA\u524D\u306E\u9AD8\u3055 ? autoStorageHeight(n, size.h) : \u6BB5\u306E\u9AD8\u3055);
-    const cy = \u81EA\u524D\u306E\u9AD8\u3055 ? \u6BB5\u306E\u82AF - \u6BB5\u306E\u9AD8\u3055 / 2 + h / 2 : \u6BB5\u306E\u82AF;
+    const cy = \u6BB5\u306E\u82AF;
     const w = autoRowsWidth(n, size.w);
     out.push({
       ...n,
@@ -15372,6 +15373,8 @@ function layout(diag) {
     states: diag.states,
     phases: diag.phases,
     ...diag.derived ? { derived: diag.derived } : {},
+    // 矢印をいつ出すか (#582)。 描き手が読む欄なので、そのまま持ち越す
+    ...diag.edgeReveal ? { edgeReveal: diag.edgeReveal } : {},
     bboxes,
     collisions,
     nearCollisions,
@@ -15530,6 +15533,8 @@ var EDGE_HEADS = [
 ];
 var EDGE_HEAD_FILL_DEFAULT = "solid";
 var EDGE_HEAD_FILLS = ["solid", "hollow"];
+var EDGE_REVEALS = ["phase", "all"];
+var EDGE_REVEAL_DEFAULT = "phase";
 
 // src/anim/core/easing.ts
 function cubicBezier(x1, y1, x2, y2) {
@@ -18681,11 +18686,9 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
     for (const [stack, group] of byStack) {
       if (group.length < 2) continue;
       const cy0 = group[0].cy;
-      const top0 = cy0 - (group[0].h ?? 0) / 2;
       for (const n of group.slice(1)) {
         const diff = Math.abs(n.cy - cy0);
-        const topDiff = Math.abs(n.cy - (n.h ?? 0) / 2 - top0);
-        if (diff > MIN_ROW_ALIGNMENT_TOLERANCE && topDiff > MIN_ROW_ALIGNMENT_TOLERANCE) {
+        if (diff > MIN_ROW_ALIGNMENT_TOLERANCE) {
           push(
             "row-alignment",
             `stack=${stack} row \u5185 node "${n.id}" cy=${n.cy.toFixed(1)} \u304C row \u57FA\u6E96 cy=${cy0.toFixed(1)} \u3068 ${diff.toFixed(1)} world \u5DEE (\u8A31\u5BB9 ${MIN_ROW_ALIGNMENT_TOLERANCE})`
@@ -19734,18 +19737,24 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
       if (group.length < 3) continue;
       const sorted = [...group].sort((a, b) => a.cy - b.cy);
       const gaps = [];
-      const tops = [];
       for (let i = 1; i < sorted.length; i++) {
         const prev = sorted[i - 1];
         const cur = sorted[i];
         gaps.push(cur.cy - cur.h / 2 - (prev.cy + prev.h / 2));
-        tops.push(cur.cy - cur.h / 2 - (prev.cy - prev.h / 2));
       }
       const maxGap = Math.max(...gaps);
       const minGap = Math.min(...gaps);
       const variance = maxGap - minGap;
-      const topVariance = Math.max(...tops) - Math.min(...tops);
-      if (variance > COLUMN_GAP_VARIANCE_TOL && topVariance > COLUMN_GAP_VARIANCE_TOL) {
+      const \u683C\u5B50\u306B\u7F6E\u304F = group.every((n) => n.rowMarks !== void 0);
+      const \u7AEF\u304C\u8DB3\u308A\u3066\u3044\u308B = minGap >= requiredNearClearance("node", "node");
+      if (\u683C\u5B50\u306B\u7F6E\u304F) {
+        if (!\u7AEF\u304C\u8DB3\u308A\u3066\u3044\u308B) {
+          push(
+            "column-gap-uniform",
+            `lane "${laneId}" \u5185 node \u9593\u306E\u7AEF\u9593 gap ${minGap.toFixed(0)} world \u304C\u4E0B\u9650 ${requiredNearClearance("node", "node")} \u3092\u5272\u308B`
+          );
+        }
+      } else if (variance > COLUMN_GAP_VARIANCE_TOL) {
         push(
           "column-gap-uniform",
           `lane "${laneId}" \u5185 node \u9593\u306E\u7AEF\u9593 gap variance ${variance.toFixed(1)} world \u304C spec ${COLUMN_GAP_VARIANCE_TOL} \u8D85\u904E (min=${minGap.toFixed(0)} max=${maxGap.toFixed(0)})`
@@ -21689,7 +21698,7 @@ function SequenceBoardNode({
     const v = Number.parseInt(interpolate(node.sequenceStep, stateValues ?? {}).trim(), 10);
     return Number.isFinite(v) ? v : null;
   })();
-  const \u6731 = "var(--cdl-tone-accent, #2d6a8f)";
+  const \u6731 = "var(--cdl-now, var(--cdl-tone-accent, #2d6a8f))";
   const \u58A8 = "var(--cdl-text-2, #4a5162)";
   const \u898B\u305F\u76EE = (i) => {
     if (\u73FE\u5728 === null) return { opacity: 1, color: \u6731 };
@@ -21983,9 +21992,9 @@ function FunctionNode({ node, active }) {
 var ROW_GLYPH_HALF = 7;
 var ROW_GLYPH_CX = ROW_PAD_X_PX + ROW_GLYPH_HALF + 1;
 var ROW_GLYPH_LEAD = 40;
-var ROW_TYPE_FONT = 24;
-var SUBTITLE_BASELINE = 108;
-var SUBTITLE_FONT = 22;
+var ROW_TYPE_FONT = 22;
+var SUBTITLE_BASELINE = 118;
+var SUBTITLE_FONT = 20;
 var UNDERLINE_DROP = 7;
 function RowGlyph({ mark, x, y, color }) {
   const \u534A = ROW_GLYPH_HALF;
@@ -22012,7 +22021,7 @@ function StorageNode({
   const accent = nodeAccent(node, "var(--cdl-tone-accent, #2d6a8f)");
   const x = node.cx - node.w / 2;
   const y = node.cy - node.h / 2;
-  const \u540D\u524D = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE, size: 22 }, { hasEyebrow: Boolean(node.eyebrow) });
+  const \u540D\u524D = titlePlacement(node, { x: 26, y: STORAGE_TITLE_BASELINE, size: STORAGE_TITLE_FONT }, { hasEyebrow: Boolean(node.eyebrow) });
   const splits = rows.map((r) => splitRow(r));
   const leftMaxWidth = splits.reduce((m, s) => Math.max(m, displayWidth(s.left)), 0);
   const rightColX = ROW_PAD_X_PX + leftMaxWidth * STORAGE_CHAR_ADVANCE_PX + STORAGE_COL_GAP_PX;
@@ -28798,6 +28807,19 @@ 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 \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;
+    };
+  }, [laid.phases, currentPhase]);
   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(() => {
@@ -28957,7 +28979,7 @@ function CdlStage({
             },
             lane.id
           )),
-          laid.edges.map((edge) => /* @__PURE__ */ jsxRuntime.jsx(CdlEdgeView, { edge, active: activeSet.has(edge.id), progress, stateValues }, edge.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.nodes.map((node) => {
             const \u63CF\u304F = drawSet.has(node.id);
             const view = /* @__PURE__ */ jsxRuntime.jsx(
@@ -28973,8 +28995,8 @@ function CdlStage({
             );
             return /* @__PURE__ */ jsxRuntime.jsx("g", { children: view }, node.id);
           }),
-          laid.edges.filter((edge) => Boolean(edge.dThrough)).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(CdlEdgeGlowView, { edge, active: activeSet.has(edge.id) }, `glow-${edge.id}`)),
-          laid.edges.map((edge) => /* @__PURE__ */ jsxRuntime.jsx(
+          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(
             CdlEdgeLabelView,
             {
               edge,
@@ -30560,6 +30582,8 @@ exports.EDGE_HEAD_DEFAULT = EDGE_HEAD_DEFAULT;
 exports.EDGE_HEAD_FILLS = EDGE_HEAD_FILLS;
 exports.EDGE_HEAD_FILL_DEFAULT = EDGE_HEAD_FILL_DEFAULT;
 exports.EDGE_LABEL_TEXT = EDGE_LABEL_TEXT;
+exports.EDGE_REVEALS = EDGE_REVEALS;
+exports.EDGE_REVEAL_DEFAULT = EDGE_REVEAL_DEFAULT;
 exports.EDGE_STUB_OUT = EDGE_STUB_OUT;
 exports.EDGE_STYLES = EDGE_STYLES;
 exports.ER_CARDINALITY_HEAD = ER_CARDINALITY_HEAD;