@cardenelabs/cdl 0.46.0 → 0.47.0

package/CHANGELOG.md

@@ -5,6 +5,37 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [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 +2351,8 @@ 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.47.0...HEAD
+[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
@@ -20722,6 +20724,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 +22812,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 +22831,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 +22884,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 +30664,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 +30987,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 +31027,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 +31049,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 +31308,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 +31322,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 +32950,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 +33017,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;