@tensor_1/react 2.16.0 → 2.18.0

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
+};

package/dist/components/RelationshipGraphList.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { RelationshipGraphNode, RelationshipGraphEdge } from '../relationship-graph-model.js';
+import { RelationshipGraphLabels } from './RelationshipGraph.js';
+
+/** The list every RelationshipGraph mode pairs with its picture (internal). */
+declare function EquivalentRelationshipList({ nodes, edges, selectedId, labels, onSelect, onExpandNeighbors, onOpenDetails, }: {
+    nodes: RelationshipGraphNode[];
+    edges: RelationshipGraphEdge[];
+    selectedId: string | undefined;
+    labels: RelationshipGraphLabels;
+    onSelect: (id: string) => void;
+    onExpandNeighbors: ((node: RelationshipGraphNode) => void) | undefined;
+    onOpenDetails: ((node: RelationshipGraphNode) => void) | undefined;
+}): react.JSX.Element;
+
+export { EquivalentRelationshipList };

package/dist/components/RelationshipGraphList.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { relationshipNeighbors } from "../relationship-graph-model.js";
+function EquivalentRelationshipList({
+  nodes,
+  edges,
+  selectedId,
+  labels,
+  onSelect,
+  onExpandNeighbors,
+  onOpenDetails
+}) {
+  const labelById = new Map(nodes.map((node) => [node.id, node.label]));
+  return /* @__PURE__ */ jsxs("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": labels.list, children: [
+    /* @__PURE__ */ jsx("h3", { children: labels.listHeading }),
+    /* @__PURE__ */ jsx("ul", { children: nodes.map((node) => {
+      const neighbors = relationshipNeighbors(node.id, edges).map((id) => labelById.get(id) ?? id);
+      return /* @__PURE__ */ jsxs("li", { "data-selected": selectedId === node.id || void 0, children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => onSelect(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 ? labels.connectedTo(neighbors.join(", ")) : labels.noConnections })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "uix-relationship-graph__list-actions", children: [
+          onExpandNeighbors && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onExpandNeighbors(node), children: labels.expandNeighbors }),
+          onOpenDetails && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onOpenDetails(node), children: labels.openDetails })
+        ] })
+      ] }, node.id);
+    }) })
+  ] });
+}
+export {
+  EquivalentRelationshipList
+};

package/dist/components/Spinner.d.ts

@@ -4,7 +4,9 @@ import { HTMLAttributes } from 'react';
 interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
     size?: 'md' | 'lg';
     accent?: boolean;
+    /** Announced loading text (default "Loading…"). */
+    label?: string;
 }
-declare function Spinner({ size, accent, className, ...props }: SpinnerProps): react.JSX.Element;
+declare function Spinner({ size, accent, label, className, ...props }: SpinnerProps): react.JSX.Element;
 
 export { Spinner, type SpinnerProps };

package/dist/components/Spinner.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function Spinner({ size = "md", accent, className, ...props }) {
+function Spinner({ size = "md", accent, label, className, ...props }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
       className: cx("uix-spinner", accent && "uix-spinner--accent", size === "lg" && "uix-spinner--lg", className),
       role: "status",
-      "aria-label": "Loading",
-      ...props
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: label ?? "Loading\u2026" })
     }
   );
 }

package/dist/components/Stat.js

@@ -8,7 +8,11 @@ function Stat({ label, value, icon, meta, trend, className, ...props }) {
     ] }),
     /* @__PURE__ */ jsx("div", { className: "uix-stat__value", children: value }),
     (meta != null || trend != null) && /* @__PURE__ */ jsxs("div", { className: "uix-stat__meta", children: [
-      trend != null && /* @__PURE__ */ jsx("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
+      trend != null && /* @__PURE__ */ jsxs("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: [
+        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: trend.direction === "up" ? /* @__PURE__ */ jsx("path", { d: "M12 19V5m-6 6 6-6 6 6" }) : /* @__PURE__ */ jsx("path", { d: "M12 5v14m6-6-6 6-6-6" }) }),
+        /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: trend.direction === "up" ? "up" : "down" }),
+        trend.label
+      ] }),
       meta
     ] })
   ] });

package/dist/components/States.d.ts

@@ -49,6 +49,7 @@ interface LoadingStateProps extends HTMLAttributes<HTMLDivElement> {
     /** Number of skeleton rows to render. */
     rows?: number;
     density?: 'compact' | 'comfortable';
+    /** Announced loading text (default "Loading"). */
     label?: string;
 }
 /** A stack of skeleton rows for list/section loading. `role="status"`. */

package/dist/components/States.js

@@ -52,7 +52,13 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
   );
 }
 function LoadingState({ rows = 3, density = "comfortable", label, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-stack", density === "compact" && "uix-stack--compact", className), role: "status", "aria-busy": "true", "aria-label": label, ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
+  return (
+    // no aria-busy: busy=true tells AT the region isn't ready and suppresses the announcement (UIX-A11Y-4)
+    /* @__PURE__ */ jsxs("div", { className: cx("uix-stack", density === "compact" && "uix-stack--compact", className), role: "status", ...props, children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: label ?? "Loading" }),
+      Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i))
+    ] })
+  );
 }
 export {
   EmptyState,

package/dist/components/Table.d.ts

@@ -2,6 +2,11 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes } from 'react';
 
 interface TableWrapProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Polite live-region text for table state changes — "Sorted by …", "N results",
+     * "N selected". Pass `useTable().announcement` straight through (UIX-A11Y-2).
+     */
+    announcement?: string;
     children?: ReactNode;
 }
 declare const TableWrap: react.ForwardRefExoticComponent<TableWrapProps & react.RefAttributes<HTMLDivElement>>;
@@ -53,9 +58,11 @@ interface RowActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 declare function RowAction({ children, className, type, ...props }: RowActionProps): react.JSX.Element;
 interface ExpandToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     expanded?: boolean;
+    /** id of the detail row this toggle controls → `aria-controls` (UIX-A11Y-2). */
+    controls?: string;
 }
 /** Chevron button that expands/collapses an inline detail row. */
-declare function ExpandToggle({ expanded, className, type, ...props }: ExpandToggleProps): react.JSX.Element;
+declare function ExpandToggle({ expanded, controls, className, type, ...props }: ExpandToggleProps): react.JSX.Element;
 /** Emphasised primary cell text. */
 declare function CellStrong({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
 /** Secondary line under a primary cell value (muted, meta size). */

package/dist/components/Table.js

@@ -2,8 +2,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cx } from "../cx.js";
 import { highlightSegments } from "../table-engine.js";
-const TableWrap = forwardRef(function TableWrap2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cx("uix-table-wrap", className), ...props, children });
+const TableWrap = forwardRef(function TableWrap2({ announcement, children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("uix-table-wrap", className), ...props, children: [
+    announcement != null && /* @__PURE__ */ jsx("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
+    children
+  ] });
 });
 function Table({
   density = "standard",
@@ -42,9 +45,9 @@ function Th({ sortable, sortDirection, sortOrder, onSort, className, children, o
       "data-sort": sortable || void 0,
       "data-sort-order": sortOrder != null && sortOrder > 0 ? sortOrder : void 0,
       "aria-sort": sortDirection && sortDirection !== "none" ? sortDirection : void 0,
-      onClick: sortable ? onSort ?? onClick : onClick,
+      onClick: sortable && onSort ? void 0 : onClick,
       ...props,
-      children
+      children: sortable ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-th__sortbtn", onClick: onSort, children }) : children
     }
   );
 }
@@ -56,7 +59,7 @@ function Tr({ selected, pinned, className, children, ...props }) {
     "tr",
     {
       className,
-      "aria-selected": selected || void 0,
+      "data-selected": selected || void 0,
       "data-pinned": pinned || void 0,
       ...props,
       children
@@ -79,13 +82,14 @@ function RowActions({ children, className, ...props }) {
 function RowAction({ children, className, type = "button", ...props }) {
   return /* @__PURE__ */ jsx("button", { type, className: cx("uix-rowact", className), ...props, children });
 }
-function ExpandToggle({ expanded, className, type = "button", ...props }) {
+function ExpandToggle({ expanded, controls, className, type = "button", ...props }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       type,
       className: cx("uix-table__expand", className),
       "aria-expanded": expanded,
+      "aria-controls": controls,
       "aria-label": expanded ? "Collapse row" : "Expand row",
       ...props,
       children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) })

package/dist/components/Tabs.d.ts

@@ -15,5 +15,17 @@ interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     disabled?: boolean;
 }
 declare function Tab({ value, children, disabled, className, onClick, ...props }: TabProps): react.JSX.Element;
+interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** The owning `<Tab>`'s value — the panel renders only while that tab is selected. */
+    value: string;
+    children?: ReactNode;
+}
+/**
+ * The tabpanel paired with a `<Tab>` by `value` (UIX-A11Y-2): labelled by its tab,
+ * `tabIndex 0` so Tab from the tablist lands in the content, rendered only while
+ * selected. Place it as a direct child of `<Tabs>` — it is hoisted out of the tablist —
+ * or anywhere the Tabs context reaches.
+ */
+declare function TabPanel({ value, children, ...props }: TabPanelProps): react.JSX.Element | null;
 
-export { Tab, type TabProps, Tabs, type TabsProps };
+export { Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };