@cardenelabs/cdl 0.46.0 → 0.47.0

package/dist/{render-UGswDfAh.d.cts → render-C53-PeJZ.d.cts}

@@ -168,6 +168,18 @@ declare const EDGE_HEAD_FILLS: readonly EdgeHeadFill[];
 type EdgeReveal = "phase" | "all";
 /** 書ける値の一覧 (#582)。 利用側はここから導く = 手で並べると増えた時に取り残される */
 declare const EDGE_REVEALS: readonly EdgeReveal[];
+/**
+ * 触れた箱の関係だけを光らせるか (#806)。
+ *
+ * - `"off"` ... 何もしない。 **既定**
+ * - `"hover"` ... 箱に触れると その箱 ・ 繋がる線 ・ 相手の箱だけが光り、他が沈む。
+ *   押すと留まり、もう一度押すか `Esc` で外れる
+ */
+type RelationFocus = "off" | "hover";
+/** 書ける値の一覧 (#806)。 利用側はここから導く */
+declare const RELATION_FOCUSES: readonly RelationFocus[];
+/** 書かなかった時の値 (#806)。 既存の図の見え方を変えないため `"off"` */
+declare const RELATION_FOCUS_DEFAULT: RelationFocus;
 /** 書かなかった時の値 (#582) */
 declare const EDGE_REVEAL_DEFAULT: EdgeReveal;
 /**
@@ -2533,6 +2545,16 @@ type CdlDiagram = {
      * `"all"` は「段で光らせはするが、線そのものは最初から見せたい」 図のための逃げ道。
      */
     edgeReveal?: EdgeReveal;
+    /**
+     * 触れた箱の関係だけを光らせるか (既定 = `"off"`、 #806)。
+     *
+     * クラス図と ER 図は順番を持たない = 段を進めて線を 1 本ずつ引く見せ方は、作り手が決めた
+     * 読ませ方でしかなく、読み手の問い (この箱はどこと繋がっているか) に答えない。
+     * `"hover"` を書くと、箱に触れた時だけ その箱 ・ 繋がる線 ・ 相手の箱が光る。
+     *
+     * **触れていない間は段が勝つ** = この指定を足しても、段を持つ図の見え方は変わらない。
+     */
+    relationFocus?: RelationFocus;
     /**
      * interactive input widgets (v0.5+、 CAR #243)。
      * builder chain の `.input.slider() / .number() / .dropdown() / .toggle()` で追加。
@@ -2749,6 +2771,8 @@ type LaidDiagram = {
     derived?: CdlDerivedValue[];
     /** 矢印をいつ出すか (`CdlDiagram.edgeReveal` をそのまま引き継ぐ、 #582) */
     edgeReveal?: EdgeReveal;
+    /** 触れた箱の関係を光らせるか (`CdlDiagram.relationFocus` をそのまま引き継ぐ、 #806) */
+    relationFocus?: RelationFocus;
     /**
      * キャンバス全要素の bounding box list。
      * engine が「ここに何があるか」 を全部把握、 衝突検証 / debug 表示 / validation で使う。
@@ -2916,4 +2940,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { createScrollProgressHandle as $, EDGE_HEAD_FILL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_REVEALS as D, type EdgeStyle as E, EDGE_REVEAL_DEFAULT as F, EDGE_STYLES as G, type EdgeReveal as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type InteractiveSignalsAccessor as K, type LaidDiagram as L, type LaidLane as M, type NodeKind as N, NODE_KINDS as O, type ScrollProgressHandle as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, TONES as U, computeEventBindingKey as V, computeFormulaKey as W, computeInputSignalKey as X, computeScrollTriggerKey as Y, computed as Z, createInteractiveSignalsAccessor as _, type CdlInput as a, createScrollProgressSignals as a0, hasInteractivePrimitives as a1, sequenceBoardMetrics as a2, sequenceStepId as a3, signal as a4, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, type ChartPieForm as v, type ChartSlopeForm as w, EDGE_HEADS as x, EDGE_HEAD_DEFAULT as y, EDGE_HEAD_FILLS as z };
+export { computeScrollTriggerKey as $, EDGE_HEAD_FILL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_REVEALS as D, type EdgeStyle as E, EDGE_REVEAL_DEFAULT as F, EDGE_STYLES as G, type EdgeReveal as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type InteractiveSignalsAccessor as K, type LaidDiagram as L, type LaidLane as M, type NodeKind as N, NODE_KINDS as O, RELATION_FOCUSES as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, RELATION_FOCUS_DEFAULT as U, type RelationFocus as V, type ScrollProgressHandle as W, TONES as X, computeEventBindingKey as Y, computeFormulaKey as Z, computeInputSignalKey as _, type CdlInput as a, computed as a0, createInteractiveSignalsAccessor as a1, createScrollProgressHandle as a2, createScrollProgressSignals as a3, hasInteractivePrimitives as a4, sequenceBoardMetrics as a5, sequenceStepId as a6, signal as a7, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, type ChartPieForm as v, type ChartSlopeForm as w, EDGE_HEADS as x, EDGE_HEAD_DEFAULT as y, EDGE_HEAD_FILLS as z };

package/dist/{render-UGswDfAh.d.ts → render-C53-PeJZ.d.ts}

@@ -168,6 +168,18 @@ declare const EDGE_HEAD_FILLS: readonly EdgeHeadFill[];
 type EdgeReveal = "phase" | "all";
 /** 書ける値の一覧 (#582)。 利用側はここから導く = 手で並べると増えた時に取り残される */
 declare const EDGE_REVEALS: readonly EdgeReveal[];
+/**
+ * 触れた箱の関係だけを光らせるか (#806)。
+ *
+ * - `"off"` ... 何もしない。 **既定**
+ * - `"hover"` ... 箱に触れると その箱 ・ 繋がる線 ・ 相手の箱だけが光り、他が沈む。
+ *   押すと留まり、もう一度押すか `Esc` で外れる
+ */
+type RelationFocus = "off" | "hover";
+/** 書ける値の一覧 (#806)。 利用側はここから導く */
+declare const RELATION_FOCUSES: readonly RelationFocus[];
+/** 書かなかった時の値 (#806)。 既存の図の見え方を変えないため `"off"` */
+declare const RELATION_FOCUS_DEFAULT: RelationFocus;
 /** 書かなかった時の値 (#582) */
 declare const EDGE_REVEAL_DEFAULT: EdgeReveal;
 /**
@@ -2533,6 +2545,16 @@ type CdlDiagram = {
      * `"all"` は「段で光らせはするが、線そのものは最初から見せたい」 図のための逃げ道。
      */
     edgeReveal?: EdgeReveal;
+    /**
+     * 触れた箱の関係だけを光らせるか (既定 = `"off"`、 #806)。
+     *
+     * クラス図と ER 図は順番を持たない = 段を進めて線を 1 本ずつ引く見せ方は、作り手が決めた
+     * 読ませ方でしかなく、読み手の問い (この箱はどこと繋がっているか) に答えない。
+     * `"hover"` を書くと、箱に触れた時だけ その箱 ・ 繋がる線 ・ 相手の箱が光る。
+     *
+     * **触れていない間は段が勝つ** = この指定を足しても、段を持つ図の見え方は変わらない。
+     */
+    relationFocus?: RelationFocus;
     /**
      * interactive input widgets (v0.5+、 CAR #243)。
      * builder chain の `.input.slider() / .number() / .dropdown() / .toggle()` で追加。
@@ -2749,6 +2771,8 @@ type LaidDiagram = {
     derived?: CdlDerivedValue[];
     /** 矢印をいつ出すか (`CdlDiagram.edgeReveal` をそのまま引き継ぐ、 #582) */
     edgeReveal?: EdgeReveal;
+    /** 触れた箱の関係を光らせるか (`CdlDiagram.relationFocus` をそのまま引き継ぐ、 #806) */
+    relationFocus?: RelationFocus;
     /**
      * キャンバス全要素の bounding box list。
      * engine が「ここに何があるか」 を全部把握、 衝突検証 / debug 表示 / validation で使う。
@@ -2916,4 +2940,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { createScrollProgressHandle as $, EDGE_HEAD_FILL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_REVEALS as D, type EdgeStyle as E, EDGE_REVEAL_DEFAULT as F, EDGE_STYLES as G, type EdgeReveal as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type InteractiveSignalsAccessor as K, type LaidDiagram as L, type LaidLane as M, type NodeKind as N, NODE_KINDS as O, type ScrollProgressHandle as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, TONES as U, computeEventBindingKey as V, computeFormulaKey as W, computeInputSignalKey as X, computeScrollTriggerKey as Y, computed as Z, createInteractiveSignalsAccessor as _, type CdlInput as a, createScrollProgressSignals as a0, hasInteractivePrimitives as a1, sequenceBoardMetrics as a2, sequenceStepId as a3, signal as a4, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, type ChartPieForm as v, type ChartSlopeForm as w, EDGE_HEADS as x, EDGE_HEAD_DEFAULT as y, EDGE_HEAD_FILLS as z };
+export { computeScrollTriggerKey as $, EDGE_HEAD_FILL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_REVEALS as D, type EdgeStyle as E, EDGE_REVEAL_DEFAULT as F, EDGE_STYLES as G, type EdgeReveal as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type InteractiveSignalsAccessor as K, type LaidDiagram as L, type LaidLane as M, type NodeKind as N, NODE_KINDS as O, RELATION_FOCUSES as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, RELATION_FOCUS_DEFAULT as U, type RelationFocus as V, type ScrollProgressHandle as W, TONES as X, computeEventBindingKey as Y, computeFormulaKey as Z, computeInputSignalKey as _, type CdlInput as a, computed as a0, createInteractiveSignalsAccessor as a1, createScrollProgressHandle as a2, createScrollProgressSignals as a3, hasInteractivePrimitives as a4, sequenceBoardMetrics as a5, sequenceStepId as a6, signal as a7, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, type ChartPieForm as v, type ChartSlopeForm as w, EDGE_HEADS as x, EDGE_HEAD_DEFAULT as y, EDGE_HEAD_FILLS as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/index.ts

@@ -293,6 +293,7 @@ export type {
   EdgeHead,
   EdgeHeadFill,
   EdgeReveal,
+  RelationFocus,
   RowMark,
   EdgeStyle,
   LaidDiagram,
@@ -307,6 +308,9 @@ export type {
 // 手書きせずに済ませるため公開する。
 // 値としての tone / kind 一覧。 downstream (dragon の記法一覧 / parser 等) が
 // 受理できる値の集合を手書きせずに済ませるため公開する。
+export { relatedFocusSet } from "./render/relation-focus";
+export type { 関係を持つ線 } from "./render/relation-focus";
+
 export {
   TONES,
   NODE_KINDS,
@@ -317,6 +321,8 @@ export {
   EDGE_REVEALS,
   EDGE_REVEAL_DEFAULT,
   EDGE_STYLES,
+  RELATION_FOCUSES,
+  RELATION_FOCUS_DEFAULT,
 } from "./types";
 
 /**

package/src/layout.ts

@@ -415,6 +415,7 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     ...(diag.derived ? { derived: diag.derived } : {}),
     // 矢印をいつ出すか (#582)。 描き手が読む欄なので、そのまま持ち越す
     ...(diag.edgeReveal ? { edgeReveal: diag.edgeReveal } : {}),
+    ...(diag.relationFocus ? { relationFocus: diag.relationFocus } : {}),
     // どの配色で描くか (#1553)。 空文字は書かなかった扱いにする = 空の目印を出すと、
     // 消費側の `[data-cdl-palette]` が配色を書いていない図にも当たる。
     //

package/src/render/edges.tsx

@@ -47,6 +47,7 @@ export function CdlEdgeView({
   drawing,
   progress,
   stateValues,
+  flowing = false,
 }: {
   edge: LaidEdge;
   active: boolean;
@@ -59,6 +60,13 @@ export function CdlEdgeView({
   drawing: boolean;
   progress: number;
   stateValues?: Record<string, string>;
+  /**
+   * 焦点が当たって流れているか (#806)。 触れた箱に繋がる線だけが `true` になる。
+   *
+   * `active` と分ける = 段で光る線は伸びる動きを既に持っており、そこへ粒を足すと
+   * 2 つの動きが同時に走って線がどちらに進んでいるか読めなくなる。
+   */
+  flowing?: boolean;
 }): JSX.Element {
   const color = edgeColor(edge);
   // 光っていない edge も tone の色で描く。 以前は一律の灰色に落としていたため、 何も光っていない
@@ -101,6 +109,7 @@ export 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}
@@ -151,6 +160,16 @@ export function CdlEdgeView({
           strokeLinecap="round"
         />
       )}
+      {/*
+        焦点が当たった線を流す (#806)。 点線は元から粒を持つので足さない =
+        2 組の粒が別々の速さで走ると、線が 2 本あるように見える。
+      */}
+      {flowing && !isDotted && (
+        <g data-cdl-role="edge-flow">
+          <path id={glowPathId} d={edge.d} fill="none" stroke="none" />
+          <EdgeGlowCircles color={color} edgeId={edge.id} />
+        </g>
+      )}
     </g>
   );
 }

package/src/render/nodes.tsx

@@ -1,4 +1,4 @@
-import type { JSX } from "react";
+import type { JSX, KeyboardEvent as ReactKeyboardEvent } from "react";
 import { ActorNode } from "../kinds/actor";
 import { CardNode } from "../kinds/card";
 import { SequenceBoardNode } from "../kinds/sequence-board";
@@ -89,6 +89,23 @@ import {
 import type { LaidNode } from "../types";
 import { hasUnresolvedRef, interpolate, resolveNumericAttr } from "./utils";
 
+/**
+ * 触れた箱の関係を光らせる時に、箱へ付ける受け口 (#806)。
+ *
+ * 指定を書かない図では `undefined` が渡る = `<g>` に属性も handler も足さないので、
+ * DOM も tab の順番も変わらない。
+ */
+export interface 関係の受け口 {
+  /** 触れた時 */
+  readonly 触れた: (id: string) => void;
+  /** 離れた時 */
+  readonly 離れた: () => void;
+  /** 押した時 (留める / 外す) */
+  readonly 押した: (id: string) => void;
+  /** いま焦点が当たっている箱。 誰も当たっていなければ `null` */
+  readonly 焦点: string | null;
+}
+
 export function CdlNodeView({
   node,
   active,
@@ -97,6 +114,7 @@ export function CdlNodeView({
   stateValues,
   currentPhaseId,
   chartLineScale,
+  関係の受け口,
 }: {
   node: LaidNode;
   active: boolean;
@@ -109,6 +127,8 @@ export function CdlNodeView({
   stateValues: Record<string, string>;
   currentPhaseId: string | undefined;
   chartLineScale?: ChartLineScale;
+  /** 触れた箱の関係を光らせる時の受け口 (#806)。 書かない図では `undefined` */
+  関係の受け口?: 関係の受け口;
 }): JSX.Element {
   const value = node.value ? interpolate(node.value, stateValues) : undefined;
   const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues));
@@ -445,6 +465,25 @@ export function CdlNodeView({
       data-cdl-eyebrow={resolvedNode.eyebrow ?? ""}
       data-cdl-offset-x={offsetX || undefined}
       data-cdl-offset-y={offsetY || undefined}
+      {...(関係の受け口 === undefined
+        ? {}
+        : {
+            // 読み上げに「押せる」 ことを伝え、 tab でも辿れるようにする。
+            role: "button" as const,
+            tabIndex: 0,
+            "aria-pressed": 関係の受け口.焦点 === node.id,
+            style: { cursor: "pointer" as const },
+            onPointerEnter: () => 関係の受け口.触れた(node.id),
+            onPointerLeave: () => 関係の受け口.離れた(),
+            onFocus: () => 関係の受け口.触れた(node.id),
+            onBlur: () => 関係の受け口.離れた(),
+            onClick: () => 関係の受け口.押した(node.id),
+            onKeyDown: (e: ReactKeyboardEvent<SVGGElement>) => {
+              if (e.key !== "Enter" && e.key !== " ") return;
+              e.preventDefault();
+              関係の受け口.押した(node.id);
+            },
+          })}
       transform={hasOffset ? `translate(${offsetX}, ${offsetY})` : undefined}
       opacity={boundOpacity}
       data-cdl-tone={node.tone}

package/src/render/relation-focus.ts

@@ -0,0 +1,40 @@
+/**
+ * 触れた箱から「光らせる集合」 を作る (#806)。
+ *
+ * クラス図と ER 図は順番を持たない図で、段を追う見せ方は読み手の問い
+ * (この箱はどこと繋がっているか) に答えない。 触れた箱の関係だけを光らせれば、
+ * 問いにその場で答えられる。
+ *
+ * 集合は 3 つで作る = 触れた箱 / その箱に繋がる線 / 線の相手の箱。
+ * **線の向きは問わない** = クラス図の「継ぐ」 は子から親へ、 ER の「持つ」 は親から子へ向くが、
+ * 読み手にとってはどちらも「この箱の関係」 で、向きで見え方が変わる理由が無い。
+ */
+
+/** 集合を作るのに要る線の情報だけを取る */
+export interface 関係を持つ線 {
+  readonly id: string;
+  readonly from: string;
+  readonly to: string;
+}
+
+/**
+ * 触れた箱に繋がるものを集める。
+ *
+ * @param edges 図の全ての線
+ * @param nodeId 触れた箱の id
+ * @returns 光らせる id の集合 (触れた箱を必ず含む)
+ */
+export function relatedFocusSet(
+  edges: readonly 関係を持つ線[],
+  nodeId: string,
+): Set<string> {
+  // 線を 1 本も持たない箱でも自分は光る = 「関係が無い」 ことが読み取れる形にする。
+  const 集合 = new Set<string>([nodeId]);
+  for (const e of edges) {
+    if (e.from !== nodeId && e.to !== nodeId) continue;
+    集合.add(e.id);
+    集合.add(e.from);
+    集合.add(e.to);
+  }
+  return 集合;
+}

package/src/render/stage.tsx

@@ -1,6 +1,7 @@
-import { useMemo, type JSX } from "react";
+import { useCallback, useEffect, useMemo, useState, type JSX } from "react";
 import { 折れ線の目盛, type ChartLineScale } from "../kinds/chart-line";
 import { 描く進みに直す } from "../kinds/draw-ratio";
+import { useReducedMotion } from "../anim/react/useReducedMotion";
 import { lifelineStartYs, uniformLifelineEndY } from "../layout/lifeline";
 import { buildDiagramAltText } from "../layout/spec";
 import {
@@ -8,6 +9,7 @@ import {
   EDGE_HEAD_FILLS,
   EDGE_HEAD_FILL_DEFAULT,
   EDGE_REVEAL_DEFAULT,
+  RELATION_FOCUS_DEFAULT,
   type CdlPhase,
   type LaidDiagram,
 } from "../types";
@@ -21,6 +23,7 @@ import {
 import { CdlEdgeView, CdlEdgeGlowView, CdlEdgeLabelView } from "./edges";
 import { CdlNodeView } from "./nodes";
 import { resolveChartData } from "./payload-binding";
+import { relatedFocusSet } from "./relation-focus";
 import { TONE, TONE_HEX } from "./tone";
 import { computeStateValues } from "./utils";
 
@@ -50,7 +53,55 @@ export function CdlStage({
   /** interactive integration (CAR #246) 用 SVG ref、 caller が event handler attach に使う */
   svgRef?: React.RefObject<SVGSVGElement | null>;
 }): JSX.Element {
-  const activeSet = new Set(currentPhase?.activate ?? []);
+  /**
+   * 触れている / 留めている箱 (#806)。
+   *
+   * `留めた` を別に持つ = 線を目で追う間に指が外れると読めないため、押した箱は離しても
+   * 光ったままにする。 もう一度押すか `Esc` で外れる。
+   */
+  const [焦点, set焦点] = useState<{ id: string; 留めた: boolean } | null>(null);
+  const 関係を光らせる = (laid.relationFocus ?? RELATION_FOCUS_DEFAULT) === "hover";
+  const 動きを控える = useReducedMotion();
+
+  /*
+   * 指定を外した図では状態を捨てる。 残すと、指定を切り替える呼出側で前の焦点が光り続ける。
+   */
+  useEffect(() => {
+    if (!関係を光らせる) set焦点(null);
+  }, [関係を光らせる]);
+
+  /* 留めている間だけ `Esc` を見る。 常に見ると、同じ画面の別の図の `Esc` まで拾う。 */
+  useEffect(() => {
+    if (!関係を光らせる || 焦点?.留めた !== true) return;
+    const 押した = (e: KeyboardEvent): void => {
+      if (e.key === "Escape") set焦点(null);
+    };
+    window.addEventListener("keydown", 押した);
+    return () => window.removeEventListener("keydown", 押した);
+  }, [関係を光らせる, 焦点?.留めた]);
+
+  const 触れた = useCallback((id: string) => {
+    set焦点((前) => (前?.留めた === true ? 前 : { id, 留めた: false }));
+  }, []);
+  const 離れた = useCallback(() => {
+    set焦点((前) => (前?.留めた === true ? 前 : null));
+  }, []);
+  const 押した = useCallback((id: string) => {
+    set焦点((前) => (前?.id === id && 前.留めた ? null : { id, 留めた: true }));
+  }, []);
+
+  /**
+   * 光らせる集合 (#806)。 触れていない間は `null` で、その時は段の集合が勝つ。
+   */
+  const 焦点の集合 = useMemo(
+    () => (関係を光らせる && 焦点 !== null ? relatedFocusSet(laid.edges, 焦点.id) : null),
+    [関係を光らせる, 焦点, laid.edges],
+  );
+  const activeSet = 焦点の集合 ?? new Set(currentPhase?.activate ?? []);
+  /** 箱に付ける受け口。 指定を書かない図では `undefined` = DOM も挙動も変わらない */
+  const 箱の受け口 = 関係を光らせる
+    ? { 触れた, 離れた, 押した, 焦点: 焦点?.id ?? null }
+    : undefined;
   /*
    * まだ出番の来ていない矢印は描かない (#582)。
    *
@@ -358,6 +409,7 @@ export function CdlStage({
             key={edge.id}
             edge={edge}
             active={activeSet.has(edge.id)}
+            flowing={焦点の集合?.has(edge.id) === true && !動きを控える}
             drawing={矢印の出番.伸ばすか(edge.id)}
             progress={矢印の出番.伸ばすか(edge.id) ? 描く進み : progress}
             stateValues={stateValues}
@@ -374,6 +426,7 @@ export function CdlStage({
             <CdlNodeView
               node={node}
               active={activeSet.has(node.id)}
+              関係の受け口={箱の受け口}
               drawing={描く}
               progress={描く ? 描く進み : progress}
               stateValues={stateValues}

package/src/types.ts

@@ -223,6 +223,21 @@ export type EdgeReveal = "phase" | "all";
 /** 書ける値の一覧 (#582)。 利用側はここから導く = 手で並べると増えた時に取り残される */
 export const EDGE_REVEALS: readonly EdgeReveal[] = ["phase", "all"];
 
+/**
+ * 触れた箱の関係だけを光らせるか (#806)。
+ *
+ * - `"off"` ... 何もしない。 **既定**
+ * - `"hover"` ... 箱に触れると その箱 ・ 繋がる線 ・ 相手の箱だけが光り、他が沈む。
+ *   押すと留まり、もう一度押すか `Esc` で外れる
+ */
+export type RelationFocus = "off" | "hover";
+
+/** 書ける値の一覧 (#806)。 利用側はここから導く */
+export const RELATION_FOCUSES: readonly RelationFocus[] = ["off", "hover"];
+
+/** 書かなかった時の値 (#806)。 既存の図の見え方を変えないため `"off"` */
+export const RELATION_FOCUS_DEFAULT: RelationFocus = "off";
+
 /** 書かなかった時の値 (#582) */
 export const EDGE_REVEAL_DEFAULT: EdgeReveal = "phase";
 
@@ -2611,6 +2626,16 @@ export type CdlDiagram = {
    * `"all"` は「段で光らせはするが、線そのものは最初から見せたい」 図のための逃げ道。
    */
   edgeReveal?: EdgeReveal;
+  /**
+   * 触れた箱の関係だけを光らせるか (既定 = `"off"`、 #806)。
+   *
+   * クラス図と ER 図は順番を持たない = 段を進めて線を 1 本ずつ引く見せ方は、作り手が決めた
+   * 読ませ方でしかなく、読み手の問い (この箱はどこと繋がっているか) に答えない。
+   * `"hover"` を書くと、箱に触れた時だけ その箱 ・ 繋がる線 ・ 相手の箱が光る。
+   *
+   * **触れていない間は段が勝つ** = この指定を足しても、段を持つ図の見え方は変わらない。
+   */
+  relationFocus?: RelationFocus;
   /**
    * interactive input widgets (v0.5+、 CAR #243)。
    * builder chain の `.input.slider() / .number() / .dropdown() / .toggle()` で追加。
@@ -2829,6 +2854,8 @@ export type LaidDiagram = {
   derived?: CdlDerivedValue[];
   /** 矢印をいつ出すか (`CdlDiagram.edgeReveal` をそのまま引き継ぐ、 #582) */
   edgeReveal?: EdgeReveal;
+  /** 触れた箱の関係を光らせるか (`CdlDiagram.relationFocus` をそのまま引き継ぐ、 #806) */
+  relationFocus?: RelationFocus;
   /**
    * キャンバス全要素の bounding box list。
    * engine が「ここに何があるか」 を全部把握、 衝突検証 / debug 表示 / validation で使う。