@tensor_1/react 2.17.0 → 2.19.0

package/dist/components/RelationshipGraph.js

@@ -1,11 +1,88 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from "react";
-import { boundRelationshipGraph, layoutRelationshipGraph, relationshipNeighbors, traverseRelationshipNode } from "../relationship-graph-model.js";
+import { boundRelationshipGraph, layoutRelationshipGraph, traverseRelationshipNode } from "../relationship-graph-model.js";
 import { cx } from "../cx.js";
+import { LayeredRelationshipGraph } from "./RelationshipGraphLayered.js";
+import { EquivalentRelationshipList } from "./RelationshipGraphList.js";
+const DEFAULT_RELATIONSHIP_GRAPH_LABELS = {
+  graph: "Relationship graph",
+  controls: "Graph view controls",
+  list: "Accessible relationship list",
+  listHeading: "Relationship list",
+  legend: "Relationship types",
+  panLeft: "Pan left",
+  panRight: "Pan right",
+  panUp: "Pan up",
+  panDown: "Pan down",
+  left: "Left",
+  right: "Right",
+  up: "Up",
+  down: "Down",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit",
+  reset: "Reset view",
+  zoomLevel: (percent) => `Zoom ${percent}%`,
+  bounded: (shown, omitted) => `Showing ${shown} nodes; ${omitted} outside this bounded neighborhood.`,
+  graphSummary: (nodes, edges) => `Graph with ${nodes} nodes and ${edges} relationships`,
+  relationship: "Relationship",
+  conflict: "conflict",
+  connectedTo: (names) => `Connected to ${names}`,
+  noConnections: "No visible connections",
+  expandNeighbors: "Expand neighbors",
+  openDetails: "Open details",
+  column: (depth, count) => `${depth === 0 ? "Start" : `${depth} ${depth === 1 ? "hop" : "hops"}`} \xB7 ${count}`,
+  cluster: (count, type, edgeLabel) => `${count} \xD7 ${type ?? "items"}${edgeLabel ? ` \xB7 ${edgeLabel}` : ""}`,
+  expandCluster: "Show all",
+  collapseCluster: (count, type) => `Collapse ${count} ${type ?? "items"}`,
+  cycle: "cycle",
+  relationships: (count) => `${count} ${count === 1 ? "relationship" : "relationships"}`,
+  roleDescription: "relationship map",
+  keyboardHint: "Arrow keys move between connected items, Enter selects, Home returns to the start.",
+  loading: "Loading relationships\u2026",
+  retry: "Try again",
+  emptyTitle: "No relationships to display.",
+  emptyHint: "Adjust the neighborhood or filters to include a node."
+};
 const EMPTY_IDS = /* @__PURE__ */ new Set();
 const EMPTY_LEGEND = [];
-function RelationshipGraph({
+const RADIAL_SCALE_X = 6;
+const RADIAL_SCALE_Y = 4;
+const RADIAL_NODE_HALF_W = 55;
+const RADIAL_NODE_HALF_H = 18;
+const RADIAL_MARGIN = 12;
+function radialViewBox(nodes) {
+  if (nodes.length === 0) return "0 0 600 400";
+  const xs = nodes.map((node) => node.x * RADIAL_SCALE_X);
+  const ys = nodes.map((node) => node.y * RADIAL_SCALE_Y);
+  const minX = Math.min(...xs) - RADIAL_NODE_HALF_W - RADIAL_MARGIN;
+  const maxX = Math.max(...xs) + RADIAL_NODE_HALF_W + RADIAL_MARGIN;
+  const minY = Math.min(...ys) - RADIAL_NODE_HALF_H - RADIAL_MARGIN;
+  const maxY = Math.max(...ys) + RADIAL_NODE_HALF_H + RADIAL_MARGIN;
+  const round = (value) => Number(value.toFixed(2));
+  const width = Math.max(round(maxX - minX), 600);
+  const height = Math.max(round(maxY - minY), 400);
+  return `${round(minX)} ${round(minY)} ${width} ${height}`;
+}
+function RelationshipGraph(props) {
+  const labels = useMemo(() => ({ ...DEFAULT_RELATIONSHIP_GRAPH_LABELS, ...props.labels }), [props.labels]);
+  const stateClass = cx("uix-relationship-graph uix-relationship-graph--state", props.className);
+  if (props.loading) return /* @__PURE__ */ jsx("div", { className: stateClass, role: "status", children: labels.loading });
+  if (props.error) {
+    return /* @__PURE__ */ jsxs("div", { className: stateClass, role: "alert", children: [
+      /* @__PURE__ */ jsx("p", { children: props.error }),
+      props.onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: props.onRetry, children: labels.retry })
+    ] });
+  }
+  if (props.nodes.length === 0) return /* @__PURE__ */ jsxs("div", { className: stateClass, children: [
+    /* @__PURE__ */ jsx("p", { children: labels.emptyTitle }),
+    /* @__PURE__ */ jsx("p", { children: labels.emptyHint })
+  ] });
+  if (props.layout === "layered") return /* @__PURE__ */ jsx(LayeredRelationshipGraph, { ...props, labels });
+  return /* @__PURE__ */ jsx(RadialRelationshipGraph, { ...props, labels });
+}
+function RadialRelationshipGraph({
   nodes,
   edges,
   selectedId,
@@ -19,10 +96,9 @@ function RelationshipGraph({
   highlightedEdgeIds = EMPTY_IDS,
   conflictedEdgeIds = EMPTY_IDS,
   legend = EMPTY_LEGEND,
-  loading,
-  error,
-  onRetry,
-  className
+  className,
+  labels,
+  showList = true
 }) {
   const bounded = useMemo(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
   const positioned = useMemo(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
@@ -53,49 +129,30 @@ function RelationshipGraph({
     setZoom(1);
     setPan({ x: 0, y: 0 });
   };
-  if (loading) return /* @__PURE__ */ jsx("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), role: "status", children: "Loading relationships\u2026" });
-  if (error) return /* @__PURE__ */ jsxs("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), role: "alert", children: [
-    /* @__PURE__ */ jsx("p", { children: error }),
-    onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
-  ] });
-  if (bounded.nodes.length === 0) return /* @__PURE__ */ jsxs("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), children: [
-    /* @__PURE__ */ jsx("p", { children: "No relationships to display." }),
-    /* @__PURE__ */ jsx("p", { children: "Adjust the neighborhood or filters to include a node." })
-  ] });
-  return /* @__PURE__ */ jsxs("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": "Relationship graph", children: [
-    /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__toolbar", "aria-label": "Graph view controls", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": "Pan left", children: "Left" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": "Pan up", children: "Up" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": "Pan down", children: "Down" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x + 24 })), "aria-label": "Pan right", children: "Right" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setZoom((value) => Math.min(2, Number((value + 0.2).toFixed(1)))), "aria-label": "Zoom in", children: "Zoom in" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setZoom((value) => Math.max(0.5, Number((value - 0.2).toFixed(1)))), "aria-label": "Zoom out", children: "Zoom out" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: reset, children: "Reset view" }),
-      /* @__PURE__ */ jsxs("span", { "aria-live": "polite", children: [
-        "Zoom ",
-        Math.round(zoom * 100),
-        "%"
-      ] })
-    ] }),
-    bounded.omittedNodeCount > 0 && /* @__PURE__ */ jsxs("p", { className: "uix-relationship-graph__bounded", role: "status", children: [
-      "Showing ",
-      bounded.nodes.length,
-      " nodes; ",
-      bounded.omittedNodeCount,
-      " outside this bounded neighborhood."
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": labels.graph, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__toolbar", "aria-label": labels.controls, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": labels.panLeft, children: labels.left }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": labels.panUp, children: labels.up }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": labels.panDown, children: labels.down }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x + 24 })), "aria-label": labels.panRight, children: labels.right }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setZoom((value) => Math.min(2, Number((value + 0.2).toFixed(1)))), "aria-label": labels.zoomIn, children: labels.zoomIn }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setZoom((value) => Math.max(0.5, Number((value - 0.2).toFixed(1)))), "aria-label": labels.zoomOut, children: labels.zoomOut }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: reset, children: labels.reset }),
+      /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(zoom * 100)) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ jsx("svg", { ref: svgRef, viewBox: "0 0 600 400", role: "group", "aria-label": `Graph with ${bounded.nodes.length} nodes and ${bounded.edges.length} relationships`, children: /* @__PURE__ */ jsxs("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
+    bounded.omittedNodeCount > 0 && /* @__PURE__ */ jsx("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
+    /* @__PURE__ */ jsx("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ jsx("svg", { ref: svgRef, viewBox: radialViewBox(positioned), role: "group", "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), children: /* @__PURE__ */ jsxs("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
       bounded.edges.map((edge) => {
         const source = positionedById.get(edge.source);
         const target = positionedById.get(edge.target);
-        return /* @__PURE__ */ jsx("line", { x1: source.x * 6, y1: source.y * 4, x2: target.x * 6, y2: target.y * 4, className: "uix-relationship-graph__edge", "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ jsx("title", { children: edge.label ?? edge.type ?? "Relationship" }) }, edge.id);
+        return /* @__PURE__ */ jsx("line", { x1: source.x * RADIAL_SCALE_X, y1: source.y * RADIAL_SCALE_Y, x2: target.x * RADIAL_SCALE_X, y2: target.y * RADIAL_SCALE_Y, className: "uix-relationship-graph__edge", "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ jsx("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
       }),
       positioned.map((node) => /* @__PURE__ */ jsxs(
         "g",
         {
-          transform: `translate(${node.x * 6} ${node.y * 4})`,
+          transform: `translate(${node.x * RADIAL_SCALE_X} ${node.y * RADIAL_SCALE_Y})`,
           role: "button",
-          "aria-label": `${node.label}${node.type ? `, ${node.type}` : ""}${conflictedNodeIds.has(node.id) ? ", conflict" : ""}`,
+          "aria-label": `${node.label}${node.type ? `, ${node.type}` : ""}${conflictedNodeIds.has(node.id) ? `, ${labels.conflict}` : ""}`,
           tabIndex: focusedId === node.id ? 0 : -1,
           "data-node-id": node.id,
           className: "uix-relationship-graph__node",
@@ -106,33 +163,19 @@ function RelationshipGraph({
           onKeyDown: (event) => onNodeKeyDown(event, node.id),
           onClick: () => select(node.id),
           children: [
-            /* @__PURE__ */ jsx("rect", { x: "-55", y: "-18", width: "110", height: "36", rx: "8" }),
+            /* @__PURE__ */ jsx("title", { children: node.label }),
+            /* @__PURE__ */ jsx("rect", { x: -RADIAL_NODE_HALF_W, y: -RADIAL_NODE_HALF_H, width: RADIAL_NODE_HALF_W * 2, height: RADIAL_NODE_HALF_H * 2, rx: "8" }),
             /* @__PURE__ */ jsx("text", { textAnchor: "middle", dominantBaseline: "middle", children: node.label.length > 16 ? `${node.label.slice(0, 15)}\u2026` : node.label })
           ]
         },
         node.id
       ))
     ] }) }) }),
-    legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-relationship-graph__legend", "aria-label": "Relationship types", children: legend.map((item) => /* @__PURE__ */ jsx("li", { "data-type": item.id, children: item.label }, item.id)) }),
-    /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": "Accessible relationship list", children: [
-      /* @__PURE__ */ jsx("h3", { children: "Relationship list" }),
-      /* @__PURE__ */ jsx("ul", { children: bounded.nodes.map((node) => {
-        const neighbors = relationshipNeighbors(node.id, bounded.edges).map((id) => bounded.nodes.find((item) => item.id === id)?.label ?? id);
-        return /* @__PURE__ */ jsxs("li", { "data-selected": selectedId === node.id || void 0, children: [
-          /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => select(node.id), "aria-pressed": selectedId === node.id, children: [
-            /* @__PURE__ */ jsx("strong", { children: node.label }),
-            node.type && /* @__PURE__ */ jsx("span", { children: node.type }),
-            /* @__PURE__ */ jsx("span", { children: neighbors.length ? `Connected to ${neighbors.join(", ")}` : "No visible connections" })
-          ] }),
-          /* @__PURE__ */ jsxs("span", { className: "uix-relationship-graph__list-actions", children: [
-            onExpandNeighbors && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onExpandNeighbors(node), children: "Expand neighbors" }),
-            onOpenDetails && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onOpenDetails(node), children: "Open details" })
-          ] })
-        ] }, node.id);
-      }) })
-    ] })
+    legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((item) => /* @__PURE__ */ jsx("li", { "data-type": item.id, children: item.label }, item.id)) }),
+    showList && /* @__PURE__ */ jsx(EquivalentRelationshipList, { nodes: bounded.nodes, edges: bounded.edges, selectedId, labels, onSelect: select, onExpandNeighbors, onOpenDetails })
   ] });
 }
 export {
+  DEFAULT_RELATIONSHIP_GRAPH_LABELS,
   RelationshipGraph
 };

package/dist/components/RelationshipGraphLayered.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { ResolvedRelationshipGraphProps } from './RelationshipGraph.js';
+import '../relationship-graph-model.js';
+
+/** `RelationshipGraph layout="layered"` (ADR-0003). Internal — reached through RelationshipGraph. */
+declare function LayeredRelationshipGraph({ nodes, edges, selectedId, onSelect, onExpandNeighbors, onOpenDetails, maxNodes, density, highlightedNodeIds, conflictedNodeIds, highlightedEdgeIds, conflictedEdgeIds, legend, className, labels, rootId, renderNode, nodeAriaLabel, renderCluster, clusterThreshold, expandedClusterIds, onToggleCluster, dimmedNodeIds, edgeLabels, showList, height, focusId, onFocusChange, }: ResolvedRelationshipGraphProps): react.JSX.Element;
+
+export { LayeredRelationshipGraph };

package/dist/components/RelationshipGraphLayered.js

@@ -0,0 +1,420 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { boundRelationshipGraph, layeredNeighbor, layoutLayeredGraph } from "../relationship-graph-model.js";
+import { cx } from "../cx.js";
+import { EquivalentRelationshipList } from "./RelationshipGraphList.js";
+const EMPTY_IDS = /* @__PURE__ */ new Set();
+const MIN_ZOOM = 0.4;
+const MAX_ZOOM = 1.5;
+const READABLE_ZOOM = 0.75;
+const ZOOM_STEP = 1.2;
+const PAN_STEP = 64;
+const FOCUS_MARGIN = 24;
+const NAV_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"];
+const clampZoom = (zoom) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+function initialView(layout, size) {
+  if (size.width === 0 || size.height === 0 || layout.width === 0) return { x: 0, y: 0, zoom: 1 };
+  const fit = Math.min(size.width / layout.width, size.height / layout.height);
+  if (fit < READABLE_ZOOM) return { x: 0, y: 0, zoom: READABLE_ZOOM };
+  const zoom = Math.min(fit, 1);
+  return { x: (size.width - layout.width * zoom) / 2, y: Math.max(0, (size.height - layout.height * zoom) / 2), zoom };
+}
+function fitView(layout, size) {
+  if (size.width === 0 || layout.width === 0) return { x: 0, y: 0, zoom: 1 };
+  const zoom = clampZoom(Math.min(size.width / layout.width, size.height / layout.height, 1));
+  return { x: (size.width - layout.width * zoom) / 2, y: Math.max(0, (size.height - layout.height * zoom) / 2), zoom };
+}
+const arrowPoints = "0,0 -8,-4.5 -8,4.5";
+function LayeredRelationshipGraph({
+  nodes,
+  edges,
+  selectedId,
+  onSelect,
+  onExpandNeighbors,
+  onOpenDetails,
+  maxNodes = 400,
+  density = "standard",
+  highlightedNodeIds = EMPTY_IDS,
+  conflictedNodeIds = EMPTY_IDS,
+  highlightedEdgeIds = EMPTY_IDS,
+  conflictedEdgeIds = EMPTY_IDS,
+  legend = [],
+  className,
+  labels,
+  rootId,
+  renderNode,
+  nodeAriaLabel,
+  renderCluster,
+  clusterThreshold,
+  expandedClusterIds,
+  onToggleCluster,
+  dimmedNodeIds = EMPTY_IDS,
+  edgeLabels = "auto",
+  showList = true,
+  height,
+  focusId,
+  onFocusChange
+}) {
+  const hintId = useId();
+  const bounded = useMemo(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
+  const [localExpanded, setLocalExpanded] = useState(EMPTY_IDS);
+  const expanded = expandedClusterIds ?? localExpanded;
+  const layout = useMemo(
+    () => layoutLayeredGraph(bounded.nodes, bounded.edges, {
+      ...rootId !== void 0 ? { rootId } : {},
+      ...clusterThreshold !== void 0 ? { clusterThreshold } : {},
+      expandedClusterIds: expanded,
+      density
+    }),
+    [bounded, rootId, clusterThreshold, expanded, density]
+  );
+  const itemById = useMemo(() => new Map(layout.items.map((item) => [item.id, item])), [layout]);
+  const viewportRef = useRef(null);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [view, setView] = useState({ x: 0, y: 0, zoom: 1 });
+  const [animate, setAnimate] = useState(false);
+  const [localFocus, setLocalFocus] = useState(void 0);
+  const [hoverId, setHoverId] = useState(void 0);
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  const layoutRef = useRef(layout);
+  layoutRef.current = layout;
+  const pendingFocus = useRef(void 0);
+  const initialisedFor = useRef(void 0);
+  const rootItemId = layout.rootId !== void 0 ? layout.itemOf[layout.rootId] : layout.items[0]?.id;
+  const requestedFocus = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : localFocus;
+  const focusedId = requestedFocus !== void 0 && itemById.has(requestedFocus) ? requestedFocus : rootItemId;
+  const selectedItemId = selectedId !== void 0 ? layout.itemOf[selectedId] : void 0;
+  const activeIds = useMemo(
+    () => new Set([hoverId, selectedItemId].filter((id) => id !== void 0)),
+    [hoverId, selectedItemId]
+  );
+  useEffect(() => {
+    const element = viewportRef.current;
+    if (!element) return;
+    const measure = () => setSize({ width: element.clientWidth, height: element.clientHeight });
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    if (size.width === 0) return;
+    const key = `${layout.rootId ?? ""}`;
+    if (initialisedFor.current === key) return;
+    initialisedFor.current = key;
+    setView(initialView(layout, size));
+  }, [layout, size]);
+  const moveView = useCallback((next, smooth) => {
+    setAnimate(smooth);
+    setView(next);
+  }, []);
+  const ensureVisible = useCallback((id, smooth) => {
+    const element = viewportRef.current;
+    const item = layoutRef.current.items.find((candidate) => candidate.id === id);
+    if (!element || !item) return;
+    const { x, y, zoom } = viewRef.current;
+    const width = element.clientWidth;
+    const heightPx = element.clientHeight;
+    const left = item.x * zoom + x;
+    const top = item.y * zoom + y;
+    const right = left + item.width * zoom;
+    const bottom = top + item.height * zoom;
+    let nextX = x;
+    let nextY = y;
+    if (left < FOCUS_MARGIN) nextX += FOCUS_MARGIN - left;
+    else if (right > width - FOCUS_MARGIN) nextX -= right - (width - FOCUS_MARGIN);
+    if (top < FOCUS_MARGIN) nextY += FOCUS_MARGIN - top;
+    else if (bottom > heightPx - FOCUS_MARGIN) nextY -= bottom - (heightPx - FOCUS_MARGIN);
+    if (nextX !== x || nextY !== y) moveView({ x: nextX, y: nextY, zoom }, smooth);
+  }, [moveView]);
+  const focusItem = useCallback((id) => {
+    setLocalFocus(id);
+    onFocusChange?.(id);
+    requestAnimationFrame(() => {
+      itemRefs.current.get(id)?.focus({ preventScroll: true });
+      ensureVisible(id, true);
+    });
+  }, [ensureVisible, onFocusChange]);
+  useEffect(() => {
+    const wanted = pendingFocus.current;
+    if (wanted !== void 0 && itemById.has(wanted)) {
+      pendingFocus.current = void 0;
+      focusItem(wanted);
+    }
+  }, [itemById, focusItem]);
+  const controlledTarget = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : void 0;
+  const controlledPresent = controlledTarget !== void 0 && itemById.has(controlledTarget);
+  const controlledKey = `${controlledTarget ?? ""}|${controlledPresent}`;
+  const lastControlledKey = useRef(controlledKey);
+  useEffect(() => {
+    if (lastControlledKey.current === controlledKey) return;
+    lastControlledKey.current = controlledKey;
+    if (!controlledPresent || controlledTarget === void 0) return;
+    requestAnimationFrame(() => {
+      itemRefs.current.get(controlledTarget)?.focus({ preventScroll: true });
+      ensureVisible(controlledTarget, true);
+    });
+  }, [controlledKey, controlledTarget, controlledPresent, ensureVisible]);
+  useEffect(() => {
+    const element = viewportRef.current;
+    if (!element) return;
+    const onWheel = (event) => {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      const rect = element.getBoundingClientRect();
+      const px = event.clientX - rect.left;
+      const py = event.clientY - rect.top;
+      const current = viewRef.current;
+      const zoom = clampZoom(current.zoom * Math.exp(-event.deltaY * 2e-3));
+      const ratio = zoom / current.zoom;
+      setAnimate(false);
+      setView({ zoom, x: px - (px - current.x) * ratio, y: py - (py - current.y) * ratio });
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => element.removeEventListener("wheel", onWheel);
+  }, []);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const pinchDistance = useRef(void 0);
+  const onPointerDown = (event) => {
+    if (event.target.closest("button")) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    pinchDistance.current = void 0;
+    setAnimate(false);
+  };
+  const onPointerMove = (event) => {
+    const previous = pointers.current.get(event.pointerId);
+    if (!previous) return;
+    const current = { x: event.clientX, y: event.clientY };
+    pointers.current.set(event.pointerId, current);
+    const all = [...pointers.current.values()];
+    if (all.length >= 2) {
+      const [a, b] = all;
+      const distance = Math.hypot(a.x - b.x, a.y - b.y);
+      const rect = event.currentTarget.getBoundingClientRect();
+      const mx = (a.x + b.x) / 2 - rect.left;
+      const my = (a.y + b.y) / 2 - rect.top;
+      if (pinchDistance.current !== void 0 && pinchDistance.current > 0) {
+        const base = viewRef.current;
+        const zoom = clampZoom(base.zoom * (distance / pinchDistance.current));
+        const ratio = zoom / base.zoom;
+        setView({ zoom, x: mx - (mx - base.x) * ratio, y: my - (my - base.y) * ratio });
+      }
+      pinchDistance.current = distance;
+      return;
+    }
+    const dx = current.x - previous.x;
+    const dy = current.y - previous.y;
+    setView((value) => ({ ...value, x: value.x + dx, y: value.y + dy }));
+  };
+  const onPointerEnd = (event) => {
+    pointers.current.delete(event.pointerId);
+    pinchDistance.current = void 0;
+  };
+  const zoomBy = (factor) => {
+    const current = viewRef.current;
+    const zoom = clampZoom(current.zoom * factor);
+    const ratio = zoom / current.zoom;
+    const cx0 = size.width / 2;
+    const cy0 = size.height / 2;
+    moveView({ zoom, x: cx0 - (cx0 - current.x) * ratio, y: cy0 - (cy0 - current.y) * ratio }, true);
+  };
+  const panBy = (dx, dy) => moveView({ ...viewRef.current, x: viewRef.current.x + dx, y: viewRef.current.y + dy }, true);
+  const toggleCluster = (clusterId, focusAfter) => {
+    const isExpanded = expanded.has(clusterId);
+    pendingFocus.current = focusAfter;
+    if (expandedClusterIds === void 0) {
+      setLocalExpanded((previous) => {
+        const next = new Set(previous);
+        if (isExpanded) next.delete(clusterId);
+        else next.add(clusterId);
+        return next;
+      });
+    }
+    onToggleCluster?.(clusterId, !isExpanded);
+  };
+  const activate = (item) => {
+    if (item.cluster) {
+      toggleCluster(item.cluster.id, item.cluster.members[0]?.id ?? item.id);
+      return;
+    }
+    if (item.node) {
+      setLocalFocus(item.id);
+      onFocusChange?.(item.id);
+      onSelect?.(item.node);
+    }
+  };
+  const onItemKeyDown = (event, item) => {
+    if (NAV_KEYS.includes(event.key)) {
+      event.preventDefault();
+      const next = layeredNeighbor(layout, item.id, event.key);
+      if (next !== void 0) focusItem(next);
+    }
+  };
+  const labelFor = (item) => {
+    if (item.cluster) {
+      const cluster = item.cluster;
+      return `${labels.cluster(cluster.members.length, cluster.type, cluster.edgeLabel)}, ${labels.expandCluster}`;
+    }
+    const node = item.node;
+    const conflict = conflictedNodeIds.has(node.id) ? labels.conflict : void 0;
+    if (nodeAriaLabel) return [nodeAriaLabel(node), item.inCycle ? labels.cycle : void 0, conflict].filter(Boolean).join(", ");
+    return [node.label, node.type, node.description, labels.relationships(item.degree), item.inCycle ? labels.cycle : void 0, conflict].filter(Boolean).join(", ");
+  };
+  const showLabel = (edge) => {
+    if (edgeLabels === "never" || edge.label === void 0) return false;
+    if (edgeLabels === "always") return true;
+    return edge.autoLabel || activeIds.has(edge.source) || activeIds.has(edge.target) || focusedId === edge.source || focusedId === edge.target;
+  };
+  const viewportStyle = height !== void 0 ? { "--uix-relationship-graph-height": height } : {};
+  const stageStyle = {
+    width: layout.width,
+    height: layout.height,
+    transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-relationship-graph", "uix-relationship-graph--layered", density === "compact" && "uix-relationship-graph--compact", className), "aria-label": labels.graph, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__toolbar", role: "group", "aria-label": labels.controls, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => zoomBy(ZOOM_STEP), disabled: view.zoom >= MAX_ZOOM, children: labels.zoomIn }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => zoomBy(1 / ZOOM_STEP), disabled: view.zoom <= MIN_ZOOM, children: labels.zoomOut }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => moveView(fitView(layout, size), true), children: labels.fit }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => moveView(initialView(layout, size), true), children: labels.reset }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => panBy(PAN_STEP, 0), "aria-label": labels.panLeft, children: labels.left }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => panBy(0, PAN_STEP), "aria-label": labels.panUp, children: labels.up }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => panBy(0, -PAN_STEP), "aria-label": labels.panDown, children: labels.down }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => panBy(-PAN_STEP, 0), "aria-label": labels.panRight, children: labels.right }),
+      /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(view.zoom * 100)) })
+    ] }),
+    bounded.omittedNodeCount > 0 && /* @__PURE__ */ jsx("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
+    /* @__PURE__ */ jsx("p", { id: hintId, className: "uix-visually-hidden", children: labels.keyboardHint }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: viewportRef,
+        className: "uix-relationship-graph__viewport",
+        style: viewportStyle,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: onPointerEnd,
+        onPointerCancel: onPointerEnd,
+        children: /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__stage", style: stageStyle, "data-animate": animate || void 0, onTransitionEnd: () => setAnimate(false), children: [
+          /* @__PURE__ */ jsx("svg", { className: "uix-relationship-graph__edges", width: layout.width, height: layout.height, "aria-hidden": "true", focusable: "false", children: layout.edges.map((edge) => {
+            const active = activeIds.has(edge.source) || activeIds.has(edge.target) || edge.edgeIds.some((id) => highlightedEdgeIds.has(id));
+            const angle = edge.arrowAngle * 180 / Math.PI;
+            return /* @__PURE__ */ jsxs(
+              "g",
+              {
+                className: "uix-relationship-graph__link",
+                "data-kind": edge.kind,
+                "data-active": active || void 0,
+                "data-emphasis": edge.emphasis || void 0,
+                "data-conflicted": edge.edgeIds.some((id) => conflictedEdgeIds.has(id)) || void 0,
+                "data-dimmed": dimmedNodeIds.has(edge.source) && dimmedNodeIds.has(edge.target) || void 0,
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: edge.path }),
+                  edge.arrow !== "none" && /* @__PURE__ */ jsx("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` }),
+                  showLabel(edge) && /* @__PURE__ */ jsx("text", { x: edge.labelX, y: edge.labelY, textAnchor: "middle", dominantBaseline: "middle", children: (edge.kind === "cycle" ? [...edge.labelLines, labels.cycle] : edge.labelLines).map((line, index, lines) => /* @__PURE__ */ jsx("tspan", { x: edge.labelX, dy: index === 0 ? `${-(lines.length - 1) * 0.55}em` : "1.1em", children: line }, index)) })
+                ]
+              },
+              edge.id
+            );
+          }) }),
+          layout.columns.map((column) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "uix-relationship-graph__column",
+              "aria-hidden": "true",
+              style: { left: column.x, width: layout.nodeWidth },
+              children: labels.column(column.depth, column.count)
+            },
+            column.depth
+          )),
+          /* @__PURE__ */ jsx("div", { role: "group", "aria-roledescription": labels.roleDescription, "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), "aria-describedby": hintId, children: layout.items.map((item) => {
+            const selected = item.id === selectedItemId;
+            const dimmed = item.node ? dimmedNodeIds.has(item.node.id) : item.cluster.members.every((member) => dimmedNodeIds.has(member.id));
+            const body = item.cluster ? renderCluster?.(item.cluster) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-label", children: labels.cluster(item.cluster.members.length, item.cluster.type, item.cluster.edgeLabel) }),
+              /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-meta", children: labels.expandCluster })
+            ] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-label", children: item.node.label }),
+              (item.node.type || item.node.description) && /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-meta", children: [item.node.type, item.node.description].filter(Boolean).join(" \xB7 ") })
+            ] });
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref: (element) => {
+                  if (element) itemRefs.current.set(item.id, element);
+                  else itemRefs.current.delete(item.id);
+                },
+                type: "button",
+                className: "uix-relationship-graph__item",
+                "data-kind": item.kind,
+                "data-node-id": item.id,
+                "data-selected": selected || void 0,
+                "data-dimmed": dimmed || void 0,
+                "data-highlighted": item.node && highlightedNodeIds.has(item.node.id) || void 0,
+                "data-conflicted": item.node && conflictedNodeIds.has(item.node.id) || void 0,
+                "data-root": item.id === rootItemId || void 0,
+                style: { left: item.x, top: item.y, width: item.width, height: item.height },
+                tabIndex: item.id === focusedId ? 0 : -1,
+                "aria-label": labelFor(item),
+                ...item.cluster ? { "aria-expanded": false } : { "aria-pressed": selected },
+                onClick: () => activate(item),
+                onKeyDown: (event) => onItemKeyDown(event, item),
+                onFocus: () => {
+                  if (item.id === focusedId) return;
+                  setLocalFocus(item.id);
+                  onFocusChange?.(item.id);
+                },
+                onPointerEnter: () => setHoverId(item.id),
+                onPointerLeave: () => setHoverId((current) => current === item.id ? void 0 : current),
+                children: [
+                  body,
+                  item.inCycle && /* @__PURE__ */ jsx("span", { className: "uix-relationship-graph__item-flag", "aria-hidden": "true", children: labels.cycle })
+                ]
+              },
+              item.id
+            );
+          }) }),
+          layout.items.filter((item) => item.expandedGroup).map((item) => {
+            const group = item.expandedGroup;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "uix-relationship-graph__collapse",
+                "aria-expanded": "true",
+                style: { left: item.x, top: item.y - 26, width: item.width },
+                onClick: () => toggleCluster(group.id, group.id),
+                children: labels.collapseCluster(group.members.length, group.type)
+              },
+              `collapse:${group.id}`
+            );
+          })
+        ] })
+      }
+    ),
+    legend.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ jsx("li", { "data-type": entry.id, children: entry.label }, entry.id)) }),
+    showList && /* @__PURE__ */ jsx(
+      EquivalentRelationshipList,
+      {
+        nodes: bounded.nodes,
+        edges: bounded.edges,
+        selectedId,
+        labels,
+        onSelect: (id) => {
+          const node = bounded.nodes.find((candidate) => candidate.id === id);
+          if (node) onSelect?.(node);
+        },
+        onExpandNeighbors,
+        onOpenDetails
+      }
+    )
+  ] });
+}
+export {
+  LayeredRelationshipGraph
+};