@cardenelabs/cdl 0.46.0 → 0.48.0

package/CHANGELOG.md

@@ -5,6 +5,67 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.48.0] - 2026-09-11
+
+### Fixed
+
+- **札の列を線が横切る時に隙間が足りないまま残るのを直した** (#805)
+
+  同じ 2 つの箱を結ぶ弧が 4 本あると、札は 4 枚の列になる。 列をどこで上下に分けるかは
+  `placeAvoidingSiblingPaths` が決めるが、塊を動かす先を **兄弟の弧が通る帯** だけで決めており、
+  帯の外を通る別の線については置いた後に「貫いているか」 しか見ていなかった。
+
+  貫き (隙間 0) だけを見ると、線が札の縁をかすめる置き方が「貫いていない」 として通る。
+  門 (`clearance` 軸) は 14 を要求するため、門だけが落ちる。
+  実測 = 下を回る線が札の上端 10 の所を通り、要求に 4 足りなかった。
+
+  後段の逃がし pass では直せない。 列は上下とも隣の札で埋まっており、どちらへ動かしても
+  隣との要求 (36) を割る。 列ごとずらす案も測ったが、巻き込んだ札が自分の弧から 162 離れ、
+  `edge-label-proximity` の error 閾値 (160) を越えた。
+
+  塊を「近すぎる線を越える所」 まで押し出した置き方を候補に足した。 押す量は探さずに測る =
+  邪魔をしている線を札の横幅で切った Y 範囲の縁から、要求ぶん離れる位置までの差を取る。
+
+  | | 直す前 | 直した後 |
+  |---|---|---|
+  | 札と横切る線の隙間 | 10 (要求 14) | 14 |
+  | 札と自分の弧の距離 (最遠) | 158 | 130 |
+  | 4 枚の分かれ方 | 上 1 枚 / 下 3 枚 | 上 2 枚 / 下 2 枚 |
+
+  押す前の候補も残すので、押しても越えられない図 (線が札の上下を挟む形) では従来の置き方が
+  選ばれる。 越えられなかった置き方は候補にしない = 隙間が足りないまま位置だけが動くのを防ぐ。
+
+## [0.47.0] - 2026-09-11
+
+### Added
+
+- **箱に触れると関係する線だけが光るようにした** (#806)
+
+  クラス図と ER 図は **順番を持たない**。 段を進めて線を 1 本ずつ引く見せ方は作り手が決めた
+  読ませ方でしかなく、読み手の問い (この箱はどこと繋がっているか) には答えていなかった。
+
+  `CdlDiagram.relationFocus` に `"hover"` を書くと、箱に触れた時に その箱 ・ 繋がる線 ・
+  相手の箱だけが光り、他が沈む。 押すと留まり、もう一度押すか `Esc` で外れる
+  (線を目で追う間に指が外れると読めないため)。
+
+  | 書いた値 | 触れた時 |
+  |---|---|
+  | 書かない / `"off"` | 何もしない (既定) |
+  | `"hover"` | 関係する箱と線だけが光り、繋がる線に粒が流れる |
+
+  光る集合は「触れた箱」「繋がる線」「線の相手の箱」 の 3 つで、**線の向きは問わない** =
+  クラス図の「継ぐ」 は子から親へ、 ER の「持つ」 は親から子へ向くが、読み手にとっては
+  どちらも「この箱の関係」 だから。 集合は `activate` と同じ所に入れるので、光る / 沈むの
+  見え方は既にある仕組みをそのまま使う。
+
+  **触れていない間は段が勝つ** = この指定を足しても、段を持つ図の見え方は変わらない。
+  指定を書かない図では箱に属性も受け口も付かないので、`tab` の順番も DOM も動かない。
+
+  `prefers-reduced-motion` が立っている時は粒を流さない。 光る側は控えない =
+  動きではなく見分けなので、控える指定とは別の軸。
+
+  箱は `role="button"` と `tabIndex` を持ち、`Enter` と `Space` でも留められる。
+
 ## [0.46.0] - 2026-09-11
 
 ### Fixed
@@ -2320,7 +2381,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.46.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.48.0...HEAD
+[0.48.0]: https://github.com/cardene777/cdl/compare/v0.47.0...v0.48.0
+[0.47.0]: https://github.com/cardene777/cdl/compare/v0.46.0...v0.47.0
 [0.46.0]: https://github.com/cardene777/cdl/compare/v0.45.0...v0.46.0
 [0.45.0]: https://github.com/cardene777/cdl/compare/v0.44.0...v0.45.0
 [0.44.0]: https://github.com/cardene777/cdl/compare/v0.43.0...v0.44.0

package/dist/index.cjs

@@ -13751,6 +13751,8 @@ var EDGE_HEADS = [
 var EDGE_HEAD_FILL_DEFAULT = "solid";
 var EDGE_HEAD_FILLS = ["solid", "hollow"];
 var EDGE_REVEALS = ["phase", "all"];
+var RELATION_FOCUSES = ["off", "hover"];
+var RELATION_FOCUS_DEFAULT = "off";
 var EDGE_REVEAL_DEFAULT = "phase";
 
 // src/kinds/text-width.ts
@@ -19576,33 +19578,73 @@ function placeAvoidingSiblingPaths(args) {
     }
   };
   consider([...wants]);
+  const \u62BC\u3059\u91CF = (idx, side, pos) => {
+    let \u8981\u308B = 0;
+    for (const i of idx) {
+      const box = boxes[i];
+      const rect = { x: box.x, y: pos[i] - box.h / 2, w: box.w, h: box.h };
+      for (const probe of probeSegs[i]) {
+        if (measurePathLabelGapSegs(probe.segs, rect) >= CLEARANCE_PATH_LABEL) continue;
+        let lo = Infinity;
+        let hi = -Infinity;
+        for (const seg of probe.segs) {
+          const c = clipY(seg, box.x, box.x + box.w);
+          if (!c) continue;
+          lo = Math.min(lo, c.lo);
+          hi = Math.max(hi, c.hi);
+        }
+        if (lo > hi) continue;
+        const \u884C\u304D\u5148 = side === "above" ? lo - box.h / 2 - CLEARANCE_PATH_LABEL : hi + box.h / 2 + CLEARANCE_PATH_LABEL;
+        \u8981\u308B = Math.max(\u8981\u308B, side === "above" ? pos[i] - \u884C\u304D\u5148 : \u884C\u304D\u5148 - pos[i]);
+      }
+    }
+    return Math.max(0, \u8981\u308B);
+  };
   if (bands.some((b) => b !== null)) {
     for (let split = 0; split <= order.length; split++) {
       const above = order.slice(0, split);
       const below = order.slice(split);
-      const out = new Array(members.length);
-      for (const [idx, side] of [
-        [above, "above"],
-        [below, "below"]
-      ]) {
-        if (idx.length === 0) continue;
-        const ys = spread(idx);
-        let shift = 0;
-        for (let k = 0; k < idx.length; k++) {
-          const band = bands[idx[k]];
-          if (!band) continue;
-          shift = side === "above" ? Math.min(shift, band.lo - ys[k]) : Math.max(shift, band.hi - ys[k]);
-        }
-        for (let k = 0; k < idx.length; k++) out[idx[k]] = ys[k] + shift;
-      }
-      if (above.length > 0 && below.length > 0) {
+      const \u9593\u3092\u7A7A\u3051\u308B = (out) => {
+        if (above.length === 0 || below.length === 0) return;
         const lastIdx = above[above.length - 1];
         const firstIdx = below[0];
         const need = (sizes[lastIdx] + sizes[firstIdx]) / 2 + CLEARANCE_LABEL_LABEL;
         const deficit = need - (out[firstIdx] - out[lastIdx]);
-        if (deficit > 0) for (const i of below) out[i] += deficit;
-      }
-      consider(out);
+        if (deficit > 0) for (const i of below) out[i] = out[i] + deficit;
+      };
+      const \u5E2F\u3092\u8D8A\u3048\u308B = () => {
+        const out = new Array(members.length);
+        for (const [idx, side] of [
+          [above, "above"],
+          [below, "below"]
+        ]) {
+          if (idx.length === 0) continue;
+          const ys = spread(idx);
+          let shift = 0;
+          for (let k = 0; k < idx.length; k++) {
+            const band = bands[idx[k]];
+            if (!band) continue;
+            shift = side === "above" ? Math.min(shift, band.lo - ys[k]) : Math.max(shift, band.hi - ys[k]);
+          }
+          for (let k = 0; k < idx.length; k++) out[idx[k]] = ys[k] + shift;
+        }
+        \u9593\u3092\u7A7A\u3051\u308B(out);
+        return out;
+      };
+      const \u62BC\u3057\u3066\u8D8A\u3048\u308B = () => {
+        const out = \u5E2F\u3092\u8D8A\u3048\u308B();
+        for (let round = 0; round < 4; round += 1) {
+          const a = \u62BC\u3059\u91CF(above, "above", out);
+          const b = \u62BC\u3059\u91CF(below, "below", out);
+          if (a === 0 && b === 0) return out;
+          for (const i of above) out[i] = out[i] - a;
+          for (const i of below) out[i] = out[i] + b;
+        }
+        return \u62BC\u3059\u91CF(above, "above", out) === 0 && \u62BC\u3059\u91CF(below, "below", out) === 0 ? out : null;
+      };
+      consider(\u5E2F\u3092\u8D8A\u3048\u308B());
+      const \u62BC\u3057\u305F = \u62BC\u3057\u3066\u8D8A\u3048\u308B();
+      if (\u62BC\u3057\u305F) consider(\u62BC\u3057\u305F);
     }
   }
   const plain = spread(all);
@@ -20722,6 +20764,7 @@ function layout(diag) {
     ...diag.derived ? { derived: diag.derived } : {},
     // 矢印をいつ出すか (#582)。 描き手が読む欄なので、そのまま持ち越す
     ...diag.edgeReveal ? { edgeReveal: diag.edgeReveal } : {},
+    ...diag.relationFocus ? { relationFocus: diag.relationFocus } : {},
     // どの配色で描くか (#1553)。 空文字は書かなかった扱いにする = 空の目印を出すと、
     // 消費側の `[data-cdl-palette]` が配色を書いていない図にも当たる。
     //
@@ -22809,7 +22852,8 @@ function CdlEdgeView({
   active,
   drawing,
   progress,
-  stateValues
+  stateValues,
+  flowing = false
 }) {
   const color = edgeColor(edge);
   const marker = edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
@@ -22827,6 +22871,7 @@ function CdlEdgeView({
       "data-cdl-from": edge.from,
       "data-cdl-to": edge.to,
       "data-cdl-active": active ? "true" : "false",
+      "data-cdl-flowing": flowing ? "true" : "false",
       "data-cdl-drawing": drawing ? "true" : "false",
       "data-cdl-path-d": edge.d,
       "data-cdl-label-x": edge.labelX,
@@ -22879,7 +22924,11 @@ function CdlEdgeView({
             strokeWidth: 14,
             strokeLinecap: "round"
           }
-        )
+        ),
+        flowing && !isDotted && /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "edge-flow", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { id: glowPathId, d: edge.d, fill: "none", stroke: "none" }),
+          /* @__PURE__ */ jsxRuntime.jsx(EdgeGlowCircles, { color, edgeId: edge.id })
+        ] })
       ]
     }
   );
@@ -30655,7 +30704,8 @@ function CdlNodeView({
   progress,
   stateValues,
   currentPhaseId,
-  chartLineScale
+  chartLineScale,
+  \u95A2\u4FC2\u306E\u53D7\u3051\u53E3
 }) {
   const value = node.value ? interpolate(node.value, stateValues) : void 0;
   const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues));
@@ -30977,6 +31027,23 @@ function CdlNodeView({
       "data-cdl-eyebrow": resolvedNode.eyebrow ?? "",
       "data-cdl-offset-x": offsetX || void 0,
       "data-cdl-offset-y": offsetY || void 0,
+      ...\u95A2\u4FC2\u306E\u53D7\u3051\u53E3 === void 0 ? {} : {
+        // 読み上げに「押せる」 ことを伝え、 tab でも辿れるようにする。
+        role: "button",
+        tabIndex: 0,
+        "aria-pressed": \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u7126\u70B9 === node.id,
+        style: { cursor: "pointer" },
+        onPointerEnter: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u89E6\u308C\u305F(node.id),
+        onPointerLeave: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u96E2\u308C\u305F(),
+        onFocus: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u89E6\u308C\u305F(node.id),
+        onBlur: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u96E2\u308C\u305F(),
+        onClick: () => \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u62BC\u3057\u305F(node.id),
+        onKeyDown: (e) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          e.preventDefault();
+          \u95A2\u4FC2\u306E\u53D7\u3051\u53E3.\u62BC\u3057\u305F(node.id);
+        }
+      },
       transform: hasOffset ? `translate(${offsetX}, ${offsetY})` : void 0,
       opacity: boundOpacity,
       "data-cdl-tone": node.tone,
@@ -31000,6 +31067,18 @@ function CdlNodeView({
     }
   );
 }
+
+// src/render/relation-focus.ts
+function relatedFocusSet(edges, nodeId) {
+  const \u96C6\u5408 = /* @__PURE__ */ new Set([nodeId]);
+  for (const e of edges) {
+    if (e.from !== nodeId && e.to !== nodeId) continue;
+    \u96C6\u5408.add(e.id);
+    \u96C6\u5408.add(e.from);
+    \u96C6\u5408.add(e.to);
+  }
+  return \u96C6\u5408;
+}
 function CdlStage({
   laid,
   currentPhase,
@@ -31010,7 +31089,35 @@ function CdlStage({
   compact = false,
   svgRef
 }) {
-  const activeSet = new Set(currentPhase?.activate ?? []);
+  const [\u7126\u70B9, set\u7126\u70B9] = react.useState(null);
+  const \u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B = (laid.relationFocus ?? RELATION_FOCUS_DEFAULT) === "hover";
+  const \u52D5\u304D\u3092\u63A7\u3048\u308B = useReducedMotion();
+  react.useEffect(() => {
+    if (!\u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B) set\u7126\u70B9(null);
+  }, [\u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B]);
+  react.useEffect(() => {
+    if (!\u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B || \u7126\u70B9?.\u7559\u3081\u305F !== true) return;
+    const \u62BC\u3057\u305F2 = (e) => {
+      if (e.key === "Escape") set\u7126\u70B9(null);
+    };
+    window.addEventListener("keydown", \u62BC\u3057\u305F2);
+    return () => window.removeEventListener("keydown", \u62BC\u3057\u305F2);
+  }, [\u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B, \u7126\u70B9?.\u7559\u3081\u305F]);
+  const \u89E6\u308C\u305F = react.useCallback((id) => {
+    set\u7126\u70B9((\u524D) => \u524D?.\u7559\u3081\u305F === true ? \u524D : { id, \u7559\u3081\u305F: false });
+  }, []);
+  const \u96E2\u308C\u305F = react.useCallback(() => {
+    set\u7126\u70B9((\u524D) => \u524D?.\u7559\u3081\u305F === true ? \u524D : null);
+  }, []);
+  const \u62BC\u3057\u305F = react.useCallback((id) => {
+    set\u7126\u70B9((\u524D) => \u524D?.id === id && \u524D.\u7559\u3081\u305F ? null : { id, \u7559\u3081\u305F: true });
+  }, []);
+  const \u7126\u70B9\u306E\u96C6\u5408 = react.useMemo(
+    () => \u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B && \u7126\u70B9 !== null ? relatedFocusSet(laid.edges, \u7126\u70B9.id) : null,
+    [\u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B, \u7126\u70B9, laid.edges]
+  );
+  const activeSet = \u7126\u70B9\u306E\u96C6\u5408 ?? new Set(currentPhase?.activate ?? []);
+  const \u7BB1\u306E\u53D7\u3051\u53E3 = \u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B ? { \u89E6\u308C\u305F, \u96E2\u308C\u305F, \u62BC\u3057\u305F, \u7126\u70B9: \u7126\u70B9?.id ?? null } : void 0;
   const \u77E2\u5370\u306E\u51FA\u756A = react.useMemo(() => {
     const \u521D\u51FA = /* @__PURE__ */ new Map();
     laid.phases.forEach((p, i) => {
@@ -31241,6 +31348,7 @@ function CdlStage({
             {
               edge,
               active: activeSet.has(edge.id),
+              flowing: \u7126\u70B9\u306E\u96C6\u5408?.has(edge.id) === true && !\u52D5\u304D\u3092\u63A7\u3048\u308B,
               drawing: \u77E2\u5370\u306E\u51FA\u756A.\u4F38\u3070\u3059\u304B(edge.id),
               progress: \u77E2\u5370\u306E\u51FA\u756A.\u4F38\u3070\u3059\u304B(edge.id) ? \u63CF\u304F\u9032\u307F : progress,
               stateValues
@@ -31254,6 +31362,7 @@ function CdlStage({
               {
                 node,
                 active: activeSet.has(node.id),
+                \u95A2\u4FC2\u306E\u53D7\u3051\u53E3: \u7BB1\u306E\u53D7\u3051\u53E3,
                 drawing: \u63CF\u304F,
                 progress: \u63CF\u304F ? \u63CF\u304F\u9032\u307F : progress,
                 stateValues,
@@ -32881,6 +32990,8 @@ exports.NEAR_COLLISION_DEFAULT_MIN = NEAR_COLLISION_DEFAULT_MIN;
 exports.NEAR_COLLISION_POLICY = NEAR_COLLISION_POLICY;
 exports.NODE_FRAME_SELECTOR = NODE_FRAME_SELECTOR;
 exports.NODE_KINDS = NODE_KINDS;
+exports.RELATION_FOCUSES = RELATION_FOCUSES;
+exports.RELATION_FOCUS_DEFAULT = RELATION_FOCUS_DEFAULT;
 exports.ROW_GAP_VARIANCE_TOL = ROW_GAP_VARIANCE_TOL;
 exports.SEQUENCE_MESSAGE_LOOK = SEQUENCE_MESSAGE_LOOK;
 exports.SPEC_CLEARANCE_POLICY = SPEC_CLEARANCE_POLICY;
@@ -32946,6 +33057,7 @@ exports.pxToWorld = pxToWorld;
 exports.quadrant = quadrant;
 exports.rectRectClearance = rectRectClearance;
 exports.rectRectOverlapArea = rectRectOverlapArea;
+exports.relatedFocusSet = relatedFocusSet;
 exports.rendersRows = rendersRows;
 exports.requiredContrastRatio = requiredContrastRatio;
 exports.requiredNearClearance = requiredNearClearance;