@cardenelabs/cdl 0.45.0 → 0.47.0

package/dist/react.cjs

@@ -2423,6 +2423,7 @@ var EDGE_HEADS = [
 ];
 var EDGE_HEAD_FILL_DEFAULT = "solid";
 var EDGE_HEAD_FILLS = ["solid", "hollow"];
+var RELATION_FOCUS_DEFAULT = "off";
 var EDGE_REVEAL_DEFAULT = "phase";
 
 // src/kinds/text-width.ts
@@ -6887,6 +6888,9 @@ var LANE_PAD_MIN = 25;
 // src/layout/edges.ts
 var VERTICAL_DETOUR_GAP = 50;
 var VERTICAL_DETOUR_CORNER = 14;
+function verticalCornerDir(from, to) {
+  return to < from ? -1 : 1;
+}
 var VERTICAL_DETOUR_EXIT = 45;
 function nearestBoxDistance(anchorX, dir, verticalTop, verticalBottom, boxes) {
   let nearest = Infinity;
@@ -8068,12 +8072,14 @@ function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _from
     midY2 = retreatBelowMidBlockers(midY2);
     const corner = 14;
     const labelY = midY2 - labelInit;
+    const \u7E26\u306E\u5411\u304DA = verticalCornerDir(A.y, midY2);
+    const \u7E26\u306E\u5411\u304DB = verticalCornerDir(midY2, B.y);
     return {
       d: `M ${A.x} ${A.y}
-        L ${A.x} ${midY2 - corner}
+        L ${A.x} ${midY2 - \u7E26\u306E\u5411\u304DA * corner}
         Q ${A.x} ${midY2}, ${A.x + xDir * corner} ${midY2}
         L ${B.x - xDir * corner} ${midY2}
-        Q ${B.x} ${midY2}, ${B.x} ${midY2 + corner}
+        Q ${B.x} ${midY2}, ${B.x} ${midY2 + \u7E26\u306E\u5411\u304DB * corner}
         L ${B.x} ${B.y}`,
       labelX: (A.x + B.x) / 2,
       labelY,
@@ -9422,6 +9428,7 @@ function layout(diag) {
     ...diag.derived ? { derived: diag.derived } : {},
     // 矢印をいつ出すか (#582)。 描き手が読む欄なので、そのまま持ち越す
     ...diag.edgeReveal ? { edgeReveal: diag.edgeReveal } : {},
+    ...diag.relationFocus ? { relationFocus: diag.relationFocus } : {},
     // どの配色で描くか (#1553)。 空文字は書かなかった扱いにする = 空の目印を出すと、
     // 消費側の `[data-cdl-palette]` が配色を書いていない図にも当たる。
     //
@@ -10295,7 +10302,8 @@ function CdlEdgeView({
   active,
   drawing,
   progress,
-  stateValues
+  stateValues,
+  flowing = false
 }) {
   const color = edgeColor(edge);
   const marker = edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
@@ -10313,6 +10321,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,
@@ -10365,7 +10374,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 })
+        ] })
       ]
     }
   );
@@ -18138,7 +18151,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));
@@ -18460,6 +18474,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,
@@ -18483,6 +18514,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,
@@ -18493,7 +18536,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) => {
@@ -18724,6 +18795,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
@@ -18737,6 +18809,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,