@cardenelabs/cdl 0.46.0 → 0.48.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
@@ -8281,33 +8282,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);
@@ -9427,6 +9468,7 @@ function layout(diag) {
     ...diag.derived ? { derived: diag.derived } : {},
     // 矢印をいつ出すか (#582)。 描き手が読む欄なので、そのまま持ち越す
     ...diag.edgeReveal ? { edgeReveal: diag.edgeReveal } : {},
+    ...diag.relationFocus ? { relationFocus: diag.relationFocus } : {},
     // どの配色で描くか (#1553)。 空文字は書かなかった扱いにする = 空の目印を出すと、
     // 消費側の `[data-cdl-palette]` が配色を書いていない図にも当たる。
     //
@@ -10300,7 +10342,8 @@ function CdlEdgeView({
   active,
   drawing,
   progress,
-  stateValues
+  stateValues,
+  flowing = false
 }) {
   const color = edgeColor(edge);
   const marker = edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
@@ -10318,6 +10361,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,
@@ -10370,7 +10414,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 })
+        ] })
       ]
     }
   );
@@ -18143,7 +18191,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));
@@ -18465,6 +18514,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,
@@ -18488,6 +18554,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,
@@ -18498,7 +18576,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) => {
@@ -18729,6 +18835,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
@@ -18742,6 +18849,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,