@tensor_1/react 2.16.0 → 2.18.0

package/dist/index.cjs

@@ -50,6 +50,7 @@ __export(src_exports, {
   ConfirmDialog: () => ConfirmDialog,
   ContentList: () => ContentList,
   ContentListItem: () => ContentListItem,
+  DEFAULT_RELATIONSHIP_GRAPH_LABELS: () => DEFAULT_RELATIONSHIP_GRAPH_LABELS,
   DateRangePicker: () => DateRangePicker,
   DescriptionItem: () => DescriptionItem,
   DescriptionList: () => DescriptionList,
@@ -134,6 +135,7 @@ __export(src_exports, {
   SubNavItem: () => SubNavItem,
   Switch: () => Switch,
   Tab: () => Tab,
+  TabPanel: () => TabPanel,
   Table: () => Table,
   TableWrap: () => TableWrap,
   Tabs: () => Tabs,
@@ -160,6 +162,8 @@ __export(src_exports, {
   buildThreeWayDiff: () => buildThreeWayDiff,
   clampMetricValue: () => clampMetricValue,
   clampWidth: () => clampWidth,
+  classifyLayeredEdges: () => classifyLayeredEdges,
+  clusterIdFor: () => clusterIdFor,
   computePosition: () => computePosition,
   contrastRatio: () => contrastRatio,
   cx: () => cx,
@@ -174,6 +178,8 @@ __export(src_exports, {
   isDateInRange: () => isDateInRange,
   isDateUnavailable: () => isDateUnavailable,
   isRuleGroup: () => isRuleGroup,
+  layeredNeighbor: () => layeredNeighbor,
+  layoutLayeredGraph: () => layoutLayeredGraph,
   layoutRelationshipGraph: () => layoutRelationshipGraph,
   mapRuleGroup: () => mapRuleGroup,
   matchFilter: () => matchFilter,
@@ -215,6 +221,7 @@ __export(src_exports, {
   useVirtualRows: () => useVirtualRows,
   validateRuleDefinition: () => validateRuleDefinition,
   virtualWindow: () => virtualWindow,
+  wrapEdgeLabel: () => wrapEdgeLabel,
   zonedDateKey: () => zonedDateKey,
   zonedDateSpan: () => zonedDateSpan
 });
@@ -257,8 +264,10 @@ function unlockBodyScroll() {
     saved = null;
   }
 }
-function useDialog(open) {
+function useDialog(open, onClose) {
   const ref = (0, import_react.useRef)(null);
+  const onCloseRef = (0, import_react.useRef)(onClose);
+  onCloseRef.current = onClose;
   (0, import_react.useEffect)(() => {
     const el = ref.current;
     if (!el || !open) {
@@ -267,8 +276,21 @@ function useDialog(open) {
     }
     if (!el.open) el.showModal();
     lockBodyScroll();
+    let locked = true;
+    const handleClose = () => {
+      if (locked) {
+        locked = false;
+        unlockBodyScroll();
+      }
+      onCloseRef.current?.();
+    };
+    el.addEventListener("close", handleClose);
     return () => {
-      unlockBodyScroll();
+      el.removeEventListener("close", handleClose);
+      if (locked) {
+        locked = false;
+        unlockBodyScroll();
+      }
       if (el.open) el.close();
     };
   }, [open]);
@@ -541,6 +563,24 @@ function useTable(data, options = {}) {
   const toggleAllRows = (0, import_react2.useCallback)(() => setSelected((s) => togglePage(s, pageIds)), [pageIds]);
   const clearSelection = (0, import_react2.useCallback)(() => setSelected(/* @__PURE__ */ new Set()), []);
   const togglePin = (0, import_react2.useCallback)((id) => setPinned((s) => toggleId(s, id)), []);
+  const [announcement, setAnnouncement] = (0, import_react2.useState)("");
+  const mounted = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!mounted.current) return;
+    const key = sort[0];
+    setAnnouncement(key ? `Sorted by ${key.field}, ${key.dir}` : "Sort cleared");
+  }, [sort]);
+  (0, import_react2.useEffect)(() => {
+    if (!mounted.current) return;
+    setAnnouncement(`${rows.length} result${rows.length === 1 ? "" : "s"}`);
+  }, [filters, query]);
+  (0, import_react2.useEffect)(() => {
+    if (!mounted.current) return;
+    setAnnouncement(`${selected.size} selected`);
+  }, [selected]);
+  (0, import_react2.useEffect)(() => {
+    mounted.current = true;
+  }, []);
   const view = (0, import_react2.useMemo)(() => ({ sort, filters, q: query }), [sort, filters, query]);
   const viewQueryString = (0, import_react2.useMemo)(() => serializeView(view), [view]);
   const applyView = (0, import_react2.useCallback)((queryString) => {
@@ -557,6 +597,7 @@ function useTable(data, options = {}) {
     selected,
     pinned,
     selectAll,
+    announcement,
     toggleSort: doToggleSort,
     setSort,
     setFilters,
@@ -726,24 +767,40 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
 // src/components/Button.tsx
 var import_react5 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var warnedIconButton = false;
 var Button = (0, import_react5.forwardRef)(
-  ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    {
-      ref,
-      className: cx(
-        "uix-btn",
-        `uix-btn--${variant}`,
-        size !== "md" && `uix-btn--${size}`,
-        icon && "uix-btn--icon",
-        className
-      ),
-      disabled: disabled || loading,
-      "data-loading": loading || void 0,
-      ...props,
-      children
+  ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, onClick, ...props }, ref) => {
+    if (!warnedIconButton && icon && children == null && !props["aria-label"] && !props["aria-labelledby"] && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+      warnedIconButton = true;
+      console.warn("uix: icon-only <Button> has no accessible name \u2014 pass aria-label or aria-labelledby.");
     }
-  )
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref,
+        className: cx(
+          "uix-btn",
+          `uix-btn--${variant}`,
+          size !== "md" && `uix-btn--${size}`,
+          icon && "uix-btn--icon",
+          className
+        ),
+        disabled,
+        "aria-disabled": loading || void 0,
+        "aria-busy": loading || void 0,
+        "data-loading": loading || void 0,
+        onClick: loading || onClick ? (e) => {
+          if (loading) {
+            e.preventDefault();
+            return;
+          }
+          onClick?.(e);
+        } : void 0,
+        ...props,
+        children
+      }
+    );
+  }
 );
 Button.displayName = "Button";
 function ButtonGroup({ children, className }) {
@@ -766,7 +823,22 @@ var Input = (0, import_react6.forwardRef)(
   )
 );
 Input.displayName = "Input";
-function InputGroup({ children, leadingIcon, trailingIcon, className }) {
+function InputGroup({
+  children,
+  leadingIcon,
+  trailingIcon,
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  "aria-required": required
+}) {
+  const control = (0, import_react6.isValidElement)(children) && (id ?? describedBy ?? invalid ?? required) != null ? (0, import_react6.cloneElement)(children, {
+    id: children.props.id ?? id,
+    "aria-describedby": children.props["aria-describedby"] ?? describedBy,
+    "aria-invalid": children.props["aria-invalid"] ?? invalid,
+    "aria-required": children.props["aria-required"] ?? required
+  }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -777,9 +849,9 @@ function InputGroup({ children, leadingIcon, trailingIcon, className }) {
         className
       ),
       children: [
-        leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "uix-input-group__icon", children: leadingIcon }),
-        children,
-        trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "uix-input-group__icon uix-input-group__icon--trailing", children: trailingIcon })
+        leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "uix-input-group__icon", "aria-hidden": "true", children: leadingIcon }),
+        control,
+        trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "uix-input-group__icon uix-input-group__icon--trailing", "aria-hidden": "true", children: trailingIcon })
       ]
     }
   );
@@ -986,8 +1058,12 @@ var Radio = (0, import_react11.forwardRef)(
   ] })
 );
 Radio.displayName = "Radio";
-function RadioGroup({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cx("uix-radio-group", className), children });
+function RadioGroup({ children, className, label }) {
+  if (label == null) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cx("uix-radio-group", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("fieldset", { className: cx("uix-radio-group", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("legend", { className: "uix-radio-group__legend", children: label }),
+    children
+  ] });
 }
 
 // src/components/Switch.tsx
@@ -1009,14 +1085,17 @@ function Field({ label, hint, error, success, required, children, className, htm
   const uid = (0, import_react13.useId)();
   const msgId = `${uid}-msg`;
   const describedBy = error || success || hint ? msgId : void 0;
+  const controlId = (0, import_react13.isValidElement)(children) ? children.props.id ?? `${uid}-ctl` : void 0;
   const control = (0, import_react13.isValidElement)(children) ? (0, import_react13.cloneElement)(children, {
+    id: controlId,
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0,
-    "aria-invalid": error ? true : children.props["aria-invalid"]
+    "aria-invalid": error ? true : children.props["aria-invalid"],
+    "aria-required": children.props["aria-required"] ?? (required || void 0)
   }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("uix-field", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "uix-field__label", htmlFor, "data-required": required || void 0, children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "uix-field__label", htmlFor: htmlFor ?? controlId, "data-required": required || void 0, children: label }),
     control,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "uix-field__success", children: success }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "uix-field__hint", children: hint }) : null })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "uix-field__success", role: "status", children: success }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "uix-field__hint", children: hint }) : null })
   ] });
 }
 
@@ -1024,12 +1103,12 @@ function Field({ label, hint, error, success, required, children, className, htm
 var import_react14 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Modal({ open, onClose, title, children, footer, className, style, closeLabel = "Close dialog", role = "dialog" }) {
-  const ref = useDialog(open);
+function Modal({ open, onClose, title, children, footer, className, closeLabel = "Close dialog", role = "dialog", ...rest }) {
+  const ref = useDialog(open, onClose);
   const titleId = (0, import_react14.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("dialog", { ref, className: cx("uix-dialog", className), style, onClose, role, "aria-labelledby": title != null ? titleId : void 0, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("dialog", { ref, className: cx("uix-dialog", className), role, "aria-labelledby": title != null ? titleId : void 0, ...rest, children: [
     (title != null || onClose) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "uix-dialog__header", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { id: titleId, className: "uix-dialog__title", children: title }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "uix-dialog__title", id: titleId, children: title }),
       onClose && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "uix-dialog__close", onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseIcon, {}) })
     ] }),
     children != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uix-dialog__body", children }),
@@ -1087,13 +1166,15 @@ function PromptDialog({ open, title, description, inputLabel, defaultValue = "",
 }
 
 // src/components/Drawer.tsx
+var import_react16 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Drawer({ open, onClose, title, children, footer, className }) {
-  const ref = useDialog(open);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("dialog", { ref, className: cx("uix-drawer", className), onClose, children: [
+function Drawer({ open, onClose, title, children, footer, className, ...rest }) {
+  const ref = useDialog(open, onClose);
+  const titleId = (0, import_react16.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, children: [
     (title != null || onClose) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uix-drawer__header", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontWeight: 600, fontSize: "var(--uix-text-h3)" }, children: title }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { id: titleId, style: { fontWeight: 600, fontSize: "var(--uix-text-h3)", fontFamily: "inherit", letterSpacing: "inherit", lineHeight: "inherit" }, children: title }),
       onClose && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
@@ -1110,27 +1191,30 @@ function Drawer({ open, onClose, title, children, footer, className }) {
 }
 
 // src/components/Peek.tsx
+var import_react17 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var CloseIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) });
 var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M2 8l4-4 4 4" }) });
 var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M2 4l4 4 4-4" }) });
-function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className }) {
-  const ref = useDialog(open);
+function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className, onClick, ...rest }) {
+  const ref = useDialog(open, onClose);
   const hasNav = onNavPrev != null || onNavNext != null;
+  const titleId = (0, import_react17.useId)();
   const onBackdropClick = (e) => {
+    onClick?.(e);
     if (!onClose || e.target !== e.currentTarget) return;
     const r = e.currentTarget.getBoundingClientRect();
     if (r.width === 0) return;
     const outside = e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom;
     if (outside) onClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("dialog", { ref, className: cx("uix-peek", className), onClose, onClick: onBackdropClick, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: onBackdropClick, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "uix-peek__header", children: [
       hasNav && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "uix-peek__nav", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "uix-peek__navbtn", onClick: onNavPrev, disabled: !onNavPrev, "aria-label": "Previous record", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronUp, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "uix-peek__navbtn", onClick: onNavNext, disabled: !onNavNext, "aria-label": "Next record", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronDown, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": "Previous record", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronUp, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "uix-peek__navbtn", onClick: () => onNavNext?.(), "aria-disabled": onNavNext ? void 0 : true, "aria-label": "Next record", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronDown, {}) })
       ] }),
-      title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uix-peek__title", children: title }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "uix-peek__title", id: titleId, children: title }),
       hint && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "uix-peek__hint", children: hint }),
       onClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "uix-peek__close", onClick: onClose, "aria-label": "Close preview", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon3, {}) })
     ] }),
@@ -1141,12 +1225,12 @@ function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hi
 
 // src/components/Card.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function Card({ title, subtitle, headerAction, footer, children, className, ...props }) {
+function Card({ title, titleAs: TitleTag = "div", subtitle, headerAction, footer, children, className, ...props }) {
   const hasHeader = title != null || subtitle != null || headerAction != null;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cx("uix-card", className), ...props, children: [
     hasHeader && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "uix-card__header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { flex: 1 }, children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-card__title", children: title }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TitleTag, { className: "uix-card__title", children: title }),
         subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-card__subtitle", children: subtitle })
       ] }),
       headerAction
@@ -1171,12 +1255,12 @@ function CardLink({ title, subtitle, headerAction, footer, children, className,
 }
 
 // src/components/Breadcrumbs.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function Breadcrumbs({ items, label, separator = "/", className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { "aria-label": label, className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ol", { className: "uix-breadcrumbs", children: items.map((item, index) => {
     const current = item.current ?? index === items.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react16.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react18.Fragment, { children: [
       index > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { className: "uix-breadcrumbs__sep", "aria-hidden": "true", children: separator }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: item.href && !current ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { href: item.href, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-current": current ? "page" : void 0, children: item.label }) })
     ] }, item.id ?? `${item.href ?? "current"}-${index}`);
@@ -1185,11 +1269,11 @@ function Breadcrumbs({ items, label, separator = "/", className, ...props }) {
 
 // src/components/PageHeader.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function PageHeader({ eyebrow, title, subtitle, actions, className, ...props }) {
+function PageHeader({ eyebrow, title, subtitle, actions, as: TitleTag = "h1", className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: cx("uix-page-header", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uix-page-header__titles", children: [
       eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uix-page-header__eyebrow", children: eyebrow }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { className: "uix-page-header__title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TitleTag, { className: "uix-page-header__title", children: title }),
       subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "uix-page-header__subtitle", children: subtitle })
     ] }),
     actions != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uix-page-header__actions", children: actions })
@@ -1201,7 +1285,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 function DetailLayout({ side, children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cx("uix-detail", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uix-detail__main", children }),
-    side != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uix-detail__side", children: side })
+    side != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("aside", { className: "uix-detail__side", children: side })
   ] });
 }
 
@@ -1278,11 +1362,11 @@ function ListItem({ title, meta, trail, leading, children, className, ...props }
 }
 
 // src/components/DescriptionList.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function DescriptionList({ items, children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("dl", { className: cx("uix-dl", className), ...props, children: [
-    items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react17.Fragment, { children: [
+    items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react19.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("dt", { children: item.term }),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("dd", { children: item.description })
     ] }, item.id ?? i)),
@@ -1297,22 +1381,81 @@ function DescriptionItem({ term, children }) {
 }
 
 // src/components/Tabs.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var TabsCtx = (0, import_react18.createContext)({});
+var TabsCtx = (0, import_react20.createContext)({});
 function Tabs({ variant = "line", value, onChange, children, className }) {
-  const contextValue = (0, import_react18.useMemo)(() => ({ value, onChange }), [value, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsCtx.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
+  const baseId = (0, import_react20.useId)();
+  const listRef = (0, import_react20.useRef)(null);
+  const contextValue = (0, import_react20.useMemo)(() => ({ value, onChange, baseId }), [value, onChange, baseId]);
+  const kids = import_react20.Children.toArray(children);
+  const panels = kids.filter((k) => (0, import_react20.isValidElement)(k) && k.type === TabPanel);
+  const tabs = kids.filter((k) => !((0, import_react20.isValidElement)(k) && k.type === TabPanel));
+  (0, import_react20.useEffect)(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const all = Array.from(list.querySelectorAll('[role="tab"]'));
+    const enabled = all.filter((t) => !t.matches(":disabled"));
+    const active = enabled.find((t) => t.getAttribute("aria-selected") === "true") ?? enabled[0];
+    for (const t of all) t.tabIndex = t === active ? 0 : -1;
+  });
+  const onKeyDown = (e) => {
+    const items = Array.from(
+      listRef.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? []
+    );
+    const cur = e.target.closest('[role="tab"]');
+    const idx = cur ? items.indexOf(cur) : -1;
+    if (idx < 0 || items.length === 0) return;
+    let next;
+    switch (e.key) {
+      case "ArrowRight":
+        next = (idx + 1) % items.length;
+        break;
+      case "ArrowLeft":
+        next = (idx - 1 + items.length) % items.length;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = items.length - 1;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    const target = items[next];
+    if (target) {
+      target.focus();
+      target.click();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(TabsCtx.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      {
+        ref: listRef,
+        role: "tablist",
+        className: cx("uix-tabs", `uix-tabs--${variant}`, className),
+        onKeyDown,
+        children: tabs
+      }
+    ),
+    panels
+  ] });
 }
 function Tab({ value, children, disabled, className, onClick, ...props }) {
-  const ctx = (0, import_react18.useContext)(TabsCtx);
+  const ctx = (0, import_react20.useContext)(TabsCtx);
   const selected = ctx.value === value;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "button",
     {
       role: "tab",
+      id: ctx.baseId ? `${ctx.baseId}-tab-${value}` : void 0,
+      "aria-controls": ctx.baseId ? `${ctx.baseId}-panel-${value}` : void 0,
       className: cx("uix-tab", className),
       "aria-selected": selected,
+      tabIndex: selected ? 0 : -1,
       disabled,
       onClick: (e) => {
         ctx.onChange?.(value);
@@ -1323,9 +1466,24 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
     }
   );
 }
+function TabPanel({ value, children, ...props }) {
+  const ctx = (0, import_react20.useContext)(TabsCtx);
+  if (ctx.value !== value) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      role: "tabpanel",
+      id: ctx.baseId ? `${ctx.baseId}-panel-${value}` : void 0,
+      "aria-labelledby": ctx.baseId ? `${ctx.baseId}-tab-${value}` : void 0,
+      tabIndex: 0,
+      ...props,
+      children
+    }
+  );
+}
 
 // src/components/AppShell.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function AppShell({
   nav,
@@ -1333,6 +1491,7 @@ function AppShell({
   focus,
   onExitFocus,
   mainBleed,
+  mainId = "uix-main",
   sidebar,
   topbar,
   children,
@@ -1340,7 +1499,7 @@ function AppShell({
   ...props
 }) {
   const navState = nav ?? (collapsed ? "rail" : "full");
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!focus || !onExitFocus) return;
     const onKey = (e) => {
       if (e.key === "Escape") onExitFocus();
@@ -1357,9 +1516,10 @@ function AppShell({
       "data-focus": focus || void 0,
       ...props,
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { className: "uix-skiplink", href: `#${mainId}`, children: "Skip to content" }),
         sidebar && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "uix-shell__sidebar", children: sidebar }),
         topbar && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "uix-shell__topbar", children: topbar }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("main", { className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("main", { id: mainId, tabIndex: -1, className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
         focus && onExitFocus && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "uix-shell__focus-exit", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: onExitFocus, children: "Esc \xB7 Exit focus" }) })
       ]
     }
@@ -1367,7 +1527,7 @@ function AppShell({
 }
 
 // src/components/Sidebar.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var ChevronIcon = () => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "uix-navgroup__chevron", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M2 4l4 4 4-4" }) });
 function Sidebar({ collapsed, nav, onToggle, brand, toggleIcon, children, expandLabel = "Expand sidebar", collapseLabel = "Collapse sidebar", className, ...props }) {
@@ -1423,12 +1583,12 @@ function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...p
   );
 }
 function NavGroup({ icon, label, children, defaultExpanded = true, expanded: controlledExpanded, onExpandedChange }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react20.useState)(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = (0, import_react22.useState)(defaultExpanded);
   const expanded = controlledExpanded ?? internalExpanded;
-  const panelId = (0, import_react20.useId)();
-  const triggerRef = (0, import_react20.useRef)(null);
-  const panelRef = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const panelId = (0, import_react22.useId)();
+  const triggerRef = (0, import_react22.useRef)(null);
+  const panelRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     panelRef.current?.toggleAttribute("inert", !expanded);
     if (!expanded && panelRef.current?.contains(document.activeElement)) triggerRef.current?.focus();
   }, [expanded]);
@@ -1507,7 +1667,7 @@ function StarButton({
 }
 
 // src/components/NavFavourites.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
   "svg",
@@ -1570,13 +1730,14 @@ function NavFavourites({
   emptyReason,
   className
 }) {
-  const regionId = (0, import_react21.useId)();
-  const headerRef = (0, import_react21.useRef)(null);
-  const regionRef = (0, import_react21.useRef)(null);
-  const focusAfterRef = (0, import_react21.useRef)(null);
-  const triggerRefs = (0, import_react21.useRef)(/* @__PURE__ */ new Map());
-  const order = (0, import_react21.useMemo)(() => items.map((item) => item.id), [items]);
-  (0, import_react21.useEffect)(() => {
+  const regionId = (0, import_react23.useId)();
+  const headerRef = (0, import_react23.useRef)(null);
+  const regionRef = (0, import_react23.useRef)(null);
+  const [announcement, setAnnouncement] = (0, import_react23.useState)("");
+  const focusAfterRef = (0, import_react23.useRef)(null);
+  const triggerRefs = (0, import_react23.useRef)(/* @__PURE__ */ new Map());
+  const order = (0, import_react23.useMemo)(() => items.map((item) => item.id), [items]);
+  (0, import_react23.useEffect)(() => {
     const id = focusAfterRef.current;
     if (!id) return;
     focusAfterRef.current = null;
@@ -1593,7 +1754,7 @@ function NavFavourites({
     }
     onToggleCollapsed?.();
   };
-  const move = (0, import_react21.useCallback)((id, dir) => {
+  const move = (0, import_react23.useCallback)((id, dir) => {
     const idx = order.indexOf(id);
     const next = idx + dir;
     if (idx < 0 || next < 0 || next >= order.length) return;
@@ -1602,19 +1763,22 @@ function NavFavourites({
     if (it === void 0) return;
     reordered.splice(next, 0, it);
     focusAfterRef.current = id;
+    const moved = items.find((i) => i.id === id);
+    if (moved) setAnnouncement(`${moved.label} moved to position ${next + 1} of ${order.length}`);
     onReorder(reordered);
   }, [onReorder, order]);
-  const remove = (0, import_react21.useCallback)((id) => {
+  const remove = (0, import_react23.useCallback)((id) => {
     const idx = order.indexOf(id);
     const neighbour = order[idx + 1] ?? order[idx - 1] ?? null;
     focusAfterRef.current = neighbour;
     onRemove(id);
   }, [onRemove, order]);
-  const registerTrigger = (0, import_react21.useCallback)((id, element) => {
+  const registerTrigger = (0, import_react23.useCallback)((id, element) => {
     if (element) triggerRefs.current.set(id, element);
     else triggerRefs.current.delete(id);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cx("uix-favourites", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "button",
       {
@@ -1661,7 +1825,7 @@ function NavFavourites({
     )
   ] });
 }
-var FavouriteRow = (0, import_react21.memo)(function FavouriteRow2({
+var FavouriteRow = (0, import_react23.memo)(function FavouriteRow2({
   item,
   isFirst,
   isLast,
@@ -1670,17 +1834,17 @@ var FavouriteRow = (0, import_react21.memo)(function FavouriteRow2({
   onRemove,
   registerTrigger
 }) {
-  const [open, setOpen] = (0, import_react21.useState)(false);
-  const menuId = (0, import_react21.useId)();
-  const triggerRef = (0, import_react21.useRef)(null);
-  const itemRefs = (0, import_react21.useRef)([]);
+  const [open, setOpen] = (0, import_react23.useState)(false);
+  const menuId = (0, import_react23.useId)();
+  const triggerRef = (0, import_react23.useRef)(null);
+  const itemRefs = (0, import_react23.useRef)([]);
   const optionsTemplate = labels.options ?? "{label} favourite options";
   const actions = [
     ...isFirst ? [] : [{ label: labels.moveUp, onSelect: () => onMove(item.id, -1) }],
     ...isLast ? [] : [{ label: labels.moveDown, onSelect: () => onMove(item.id, 1) }],
     { label: labels.remove.replace("{label}", item.label), onSelect: () => onRemove(item.id) }
   ];
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (open) itemRefs.current[0]?.focus();
   }, [open]);
   const closeAndReturnFocus = () => {
@@ -1696,6 +1860,12 @@ var FavouriteRow = (0, import_react21.memo)(function FavouriteRow2({
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       menuItems[(currentIdx - 1 + menuItems.length) % menuItems.length]?.focus();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      menuItems[0]?.focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      menuItems[menuItems.length - 1]?.focus();
     } else if (e.key === "Escape") {
       e.preventDefault();
       closeAndReturnFocus();
@@ -1754,6 +1924,7 @@ var FavouriteRow = (0, import_react21.memo)(function FavouriteRow2({
               {
                 id: menuId,
                 role: "menu",
+                "aria-label": optionsTemplate.replace("{label}", item.label),
                 onKeyDown: onMenuKeyDown,
                 className: "uix-favourites__menu",
                 children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -1785,61 +1956,108 @@ var FavouriteRow = (0, import_react21.memo)(function FavouriteRow2({
 // src/components/Alert.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function Alert({ tone, title, icon, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-alert__icon", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-alert__title", children: title }),
-      children && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-alert__body", children })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className),
+      role: tone === "danger" || tone === "warning" ? "alert" : "status",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-alert__icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-alert__title", children: title }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-alert__body", children })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/components/Spinner.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-function Spinner({ size = "md", accent, className, ...props }) {
+function Spinner({ size = "md", accent, label, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.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__ */ (0, import_jsx_runtime30.jsx)("span", { className: "uix-visually-hidden", children: label ?? "Loading\u2026" })
     }
   );
 }
 
 // src/components/Toast.tsx
+var import_react24 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
+var ToasterContext = (0, import_react24.createContext)(null);
 function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
   const assertive = tone === "danger";
+  const toaster = (0, import_react24.useContext)(ToasterContext);
+  const bodyRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
+    if (assertive || !toaster) return;
+    const text = bodyRef.current?.textContent?.trim();
+    if (text) toaster.announce(text);
+  }, []);
+  const handleClose = (e) => {
+    const btn = e.currentTarget;
+    if (document.activeElement === btn) {
+      const toasterEl = btn.closest(".uix-toaster");
+      if (toasterEl) {
+        const closes = Array.from(toasterEl.querySelectorAll(".uix-toast__close"));
+        const i = closes.indexOf(btn);
+        (closes[i + 1] ?? closes[i - 1])?.focus();
+      }
+    }
+    onClose?.();
+  };
+  const ownLiveRegion = assertive || !toaster;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       className: cx("uix-toast", tone && `uix-toast--${tone}`, className),
       "data-leaving": leaving || void 0,
-      role: assertive ? "alert" : "status",
-      "aria-live": assertive ? "assertive" : "polite",
+      role: ownLiveRegion ? assertive ? "alert" : "status" : void 0,
+      "aria-live": ownLiveRegion ? assertive ? "assertive" : "polite" : void 0,
       ...props,
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-toast__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "uix-toast__body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "uix-toast__body", ref: bodyRef, children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-toast__title", children: title }),
           message && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-toast__msg", children: message })
         ] }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: "uix-toast__close", onClick: onClose, "aria-label": "Dismiss", children: "\xD7" })
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": "Dismiss", children: "\xD7" })
       ]
     }
   );
 }
 function Toaster({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cx("uix-toaster", className), ...props, children });
+  const [announced, setAnnounced] = (0, import_react24.useState)("");
+  const clearTimer = (0, import_react24.useRef)(null);
+  const announce = (0, import_react24.useCallback)((text) => {
+    setAnnounced((cur) => cur ? `${cur} ${text}` : text);
+    if (clearTimer.current != null) clearTimeout(clearTimer.current);
+    clearTimer.current = window.setTimeout(() => setAnnounced(""), 3e3);
+  }, []);
+  (0, import_react24.useEffect)(() => () => {
+    if (clearTimer.current != null) clearTimeout(clearTimer.current);
+  }, []);
+  const ctx = (0, import_react24.useMemo)(() => ({ announce }), [announce]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cx("uix-toaster", className), role: "region", "aria-label": "Notifications", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
+    children
+  ] }) });
 }
 
 // src/components/Table.tsx
-var import_react22 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var TableWrap = (0, import_react22.forwardRef)(function TableWrap2({ children, className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: cx("uix-table-wrap", className), ...props, children });
+var TableWrap = (0, import_react25.forwardRef)(function TableWrap2({ announcement, children, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ref, className: cx("uix-table-wrap", className), ...props, children: [
+    announcement != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
+    children
+  ] });
 });
 function Table({
   density = "standard",
@@ -1878,9 +2096,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__ */ (0, import_jsx_runtime32.jsx)("button", { type: "button", className: "uix-th__sortbtn", onClick: onSort, children }) : children
     }
   );
 }
@@ -1892,7 +2110,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
@@ -1915,13 +2133,14 @@ function RowActions({ children, className, ...props }) {
 function RowAction({ children, className, type = "button", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime32.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__ */ (0, import_jsx_runtime32.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__ */ (0, import_jsx_runtime32.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M6 4l4 4-4 4" }) })
@@ -2012,15 +2231,17 @@ function StatusPill({ tone = "neutral", treatment = "filled", dot, children, cla
 
 // src/components/Progress.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
-function Progress({ value = 0, max = 100, indeterminate, className, ...props }) {
-  const pct = Math.max(0, Math.min(100, value / (max || 100) * 100));
+function Progress({ value = 0, max = 100, indeterminate, label, className, ...props }) {
+  const clamped = Math.max(0, Math.min(max || 100, value));
+  const pct = clamped / (max || 100) * 100;
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       role: "progressbar",
       "aria-valuemin": 0,
       "aria-valuemax": max,
-      "aria-valuenow": indeterminate ? void 0 : value,
+      "aria-valuenow": indeterminate ? void 0 : clamped,
+      "aria-label": label,
       className: cx("uix-progress", indeterminate && "uix-progress--indeterminate", className),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
@@ -2030,7 +2251,13 @@ function Progress({ value = 0, max = 100, indeterminate, className, ...props })
 
 // src/components/Meter.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-function Meter({ value = 0, tone, className, ...props }) {
+var toneText = {
+  warning: "warning",
+  danger: "critical",
+  attention: "needs attention",
+  overdue: "overdue"
+};
+function Meter({ value = 0, tone, label, className, ...props }) {
   const pct = Math.max(0, Math.min(100, value));
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
@@ -2039,6 +2266,8 @@ function Meter({ value = 0, tone, className, ...props }) {
       "aria-valuenow": pct,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
+      "aria-valuetext": tone && tone !== "success" ? `${pct}%, ${toneText[tone]}` : void 0,
+      "aria-label": label,
       className: cx("uix-meter", className),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -2063,22 +2292,34 @@ function Stat({ label, value, icon, meta, trend, className, ...props }) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-stat__value", children: value }),
     (meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "uix-stat__meta", children: [
-      trend != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
+      trend != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.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__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M12 19V5m-6 6 6-6 6 6" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M12 5v14m6-6-6 6-6-6" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "uix-visually-hidden", children: trend.direction === "up" ? "up" : "down" }),
+        trend.label
+      ] }),
       meta
     ] })
   ] });
 }
 
 // src/components/Tooltip.tsx
-var import_react23 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function Tooltip({ label, placement = "top", className, children, ...props }) {
-  const triggerRef = (0, import_react23.useRef)(null);
-  const bubbleRef = (0, import_react23.useRef)(null);
-  const [open, setOpen] = (0, import_react23.useState)(false);
-  const id = (0, import_react23.useId)();
+  const triggerRef = (0, import_react26.useRef)(null);
+  const bubbleRef = (0, import_react26.useRef)(null);
+  const closeTimer = (0, import_react26.useRef)(null);
+  const [open, setOpen] = (0, import_react26.useState)(false);
+  const id = (0, import_react26.useId)();
   useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
+  const cancelClose = () => {
+    if (closeTimer.current != null) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
   const show = () => {
+    cancelClose();
     const b = bubbleRef.current;
     if (b && !b.matches(":popover-open")) {
       try {
@@ -2089,6 +2330,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
     setOpen(true);
   };
   const hide = () => {
+    cancelClose();
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
       try {
@@ -2098,7 +2340,20 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
     }
     setOpen(false);
   };
-  (0, import_react23.useEffect)(() => () => {
+  const scheduleHide = () => {
+    cancelClose();
+    closeTimer.current = window.setTimeout(hide, 100);
+  };
+  (0, import_react26.useEffect)(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  (0, import_react26.useEffect)(() => () => {
+    if (closeTimer.current != null) clearTimeout(closeTimer.current);
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
       try {
@@ -2108,14 +2363,19 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
     }
   }, []);
   const bubbleAttr = { popover: "manual" };
+  const single = (0, import_react26.isValidElement)(children);
+  const child = single ? (0, import_react26.cloneElement)(children, {
+    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" ")
+  }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "span",
     {
       ref: triggerRef,
       className: cx("uix-tooltip", className),
-      "aria-describedby": id,
+      "aria-describedby": single ? void 0 : id,
+      tabIndex: single ? void 0 : 0,
       onMouseEnter: show,
-      onMouseLeave: hide,
+      onMouseLeave: scheduleHide,
       onFocus: show,
       onBlur: hide,
       onKeyDown: (e) => {
@@ -2123,8 +2383,20 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
       },
       ...props,
       children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { ref: bubbleRef, id, role: "tooltip", className: "uix-tooltip__bubble", ...bubbleAttr, children: label })
+        child,
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "span",
+          {
+            ref: bubbleRef,
+            id,
+            role: "tooltip",
+            className: "uix-tooltip__bubble",
+            onMouseEnter: cancelClose,
+            onMouseLeave: scheduleHide,
+            ...bubbleAttr,
+            children: label
+          }
+        )
       ]
     }
   );
@@ -2184,11 +2456,17 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
   );
 }
 function LoadingState({ rows = 3, density = "comfortable", label, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.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__ */ (0, import_jsx_runtime39.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__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-stack", density === "compact" && "uix-stack--compact", className), role: "status", ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "uix-visually-hidden", children: label ?? "Loading" }),
+      Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i))
+    ] })
+  );
 }
 
 // src/components/RelativeTime.tsx
-var import_react24 = require("react");
+var import_react27 = require("react");
 
 // src/relative-time-model.ts
 function parseDateValue(value) {
@@ -2251,12 +2529,12 @@ function RelativeTime({
 }) {
   const interval = refreshInterval === false ? 0 : Math.max(0, refreshInterval);
   const fixedNow = now == null ? void 0 : new Date(now).getTime();
-  const subscribe = (0, import_react24.useCallback)((listener) => fixedNow == null ? subscribeRelativeClock(interval, listener) : () => {
+  const subscribe = (0, import_react27.useCallback)((listener) => fixedNow == null ? subscribeRelativeClock(interval, listener) : () => {
   }, [fixedNow, interval]);
-  const getSnapshot = (0, import_react24.useCallback)(() => fixedNow ?? readRelativeClock(interval), [fixedNow, interval]);
-  const getServerSnapshot = (0, import_react24.useCallback)(() => fixedNow ?? Date.now(), [fixedNow]);
-  const clock = (0, import_react24.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
-  const date = (0, import_react24.useMemo)(() => parseDateValue(value), [value]);
+  const getSnapshot = (0, import_react27.useCallback)(() => fixedNow ?? readRelativeClock(interval), [fixedNow, interval]);
+  const getServerSnapshot = (0, import_react27.useCallback)(() => fixedNow ?? Date.now(), [fixedNow]);
+  const clock = (0, import_react27.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+  const date = (0, import_react27.useMemo)(() => parseDateValue(value), [value]);
   if (!date) return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("time", { "data-invalid": "true", suppressHydrationWarning: true, ...props, children: invalidLabel });
   const current = new Date(clock);
   const content = formatter ? formatter({ date, now: current, locale, timeZone }) : (() => {
@@ -2305,7 +2583,8 @@ var import_jsx_runtime43 = require("react/jsx-runtime");
 function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
     src ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("img", { src, alt: alt ?? "" }) : children,
-    status && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "uix-avatar__status" })
+    status && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "uix-avatar__status", "aria-hidden": "true" }),
+    status && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "uix-visually-hidden", children: "online" })
   ] });
 }
 function AvatarGroup({ children, className, ...props }) {
@@ -2325,7 +2604,7 @@ function UserChip({ avatar, name, sub, className, children, ...props }) {
 // src/components/Comments.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function Comments({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cx("uix-comments", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "log", className: cx("uix-comments", className), ...props, children });
 }
 function Comment({ avatar, author, meta, children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
@@ -2342,20 +2621,25 @@ function Comment({ avatar, author, meta, children, className, ...props }) {
 }
 
 // src/components/Composer.tsx
+var import_react28 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-function Composer({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cx("uix-composer", className), ...props, children });
+function Composer({ children, className, label = "Add a comment", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cx("uix-composer", className), ...props, children: import_react28.Children.map(children, (child) => {
+    if (!(0, import_react28.isValidElement)(child) || child.type !== "textarea") return child;
+    const p = child.props;
+    return p["aria-label"] || p["aria-labelledby"] || p.id ? child : (0, import_react28.cloneElement)(child, { "aria-label": label });
+  }) });
 }
 function ComposerBar({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cx("uix-composer__bar", className), ...props, children });
 }
 
 // src/components/Segmented.tsx
-var import_react25 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var SegmentedCtx = (0, import_react25.createContext)({});
+var SegmentedCtx = (0, import_react29.createContext)({});
 function Segmented({ value, onChange, children, className, ...props }) {
-  const contextValue = (0, import_react25.useMemo)(() => ({ value, onChange }), [value, onChange]);
+  const contextValue = (0, import_react29.useMemo)(() => ({ value, onChange }), [value, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
 }
 function SegmentedOption({
@@ -2365,7 +2649,7 @@ function SegmentedOption({
   onClick,
   ...props
 }) {
-  const ctx = (0, import_react25.useContext)(SegmentedCtx);
+  const ctx = (0, import_react29.useContext)(SegmentedCtx);
   const selected = ctx.value === value;
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "button",
@@ -2384,12 +2668,12 @@ function SegmentedOption({
 }
 
 // src/components/TableControls.tsx
-var import_react26 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebra, freeze, columns, columnsLabel, onColumnVisibilityChange }) {
-  const densityLabelId = (0, import_react26.useId)();
-  const zebraLabelId = (0, import_react26.useId)();
-  const freezeLabelId = (0, import_react26.useId)();
+  const densityLabelId = (0, import_react30.useId)();
+  const zebraLabelId = (0, import_react30.useId)();
+  const freezeLabelId = (0, import_react30.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uix-view-menu", children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uix-view-menu__group", children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { id: densityLabelId, className: "uix-view-menu__label", children: densityLabel }),
@@ -2438,11 +2722,11 @@ function SavedViewMenu({ items, onSelect, onPinChange, pinLabel, unpinLabel, emp
 // src/components/Timeline.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function Timeline({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("ol", { className: cx("uix-timeline", className), ...props, children });
 }
 function TimelineItem({ node, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uix-timeline__rail", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("li", { className: cx("uix-timeline__item", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uix-timeline__rail", "aria-hidden": "true", children: [
       node ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "uix-timeline__node" }),
       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "uix-timeline__line" })
     ] }),
@@ -2454,10 +2738,10 @@ function TimelineItem({ node, meta, children, className, ...props }) {
 }
 
 // src/components/Pipeline.tsx
-var import_react27 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function Pipeline({ detailed = false, children, className, tabIndex, ...props }) {
-  const stages = detailed ? import_react27.Children.map(children, (child) => (0, import_react27.isValidElement)(child) && child.type === PipelineStage ? (0, import_react27.cloneElement)(child, { detailed: child.props.detailed ?? true }) : child) : children;
+  const stages = detailed ? import_react31.Children.map(children, (child) => (0, import_react31.isValidElement)(child) && child.type === PipelineStage ? (0, import_react31.cloneElement)(child, { detailed: child.props.detailed ?? true }) : child) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "ol",
     {
@@ -2573,7 +2857,7 @@ function Note({ tone, icon, children, className, ...props }) {
 }
 
 // src/components/Popover.tsx
-var import_react28 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function Popover({
   popover = "auto",
@@ -2584,15 +2868,15 @@ function Popover({
   children,
   ...props
 }) {
-  const ref = (0, import_react28.useRef)(null);
-  const [open, setOpen] = (0, import_react28.useState)(false);
+  const ref = (0, import_react32.useRef)(null);
+  const [open, setOpen] = (0, import_react32.useState)(false);
   const popoverAttr = { popover };
   const reposition = useAnchoredPosition(anchor ?? null, ref, {
     open: open && !!anchor,
     placement,
     offset
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const el = ref.current;
     if (!el || !anchor) return;
     const sync = () => {
@@ -2607,34 +2891,138 @@ function Popover({
 }
 
 // src/components/CommandPalette.tsx
+var import_react33 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
+var CmdkContext = (0, import_react33.createContext)(null);
 function CommandPalette({ inputProps, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-cmdk__list", children })
-  ] });
+  const listId = (0, import_react33.useId)();
+  const [activeId, setActiveId] = (0, import_react33.useState)(null);
+  const [count, setCount] = (0, import_react33.useState)(0);
+  const [announced, setAnnounced] = (0, import_react33.useState)("");
+  const setActive = (0, import_react33.useCallback)((id, active) => {
+    setActiveId((cur) => active ? id : cur === id ? null : cur);
+  }, []);
+  const registerItem = (0, import_react33.useCallback)(() => {
+    setCount((c) => c + 1);
+    return () => setCount((c) => c - 1);
+  }, []);
+  (0, import_react33.useEffect)(() => {
+    const t = window.setTimeout(() => setAnnounced(`${count} result${count === 1 ? "" : "s"}`), 150);
+    return () => clearTimeout(t);
+  }, [count]);
+  const ctx = (0, import_react33.useMemo)(() => ({ listId, setActive, registerItem }), [listId, setActive, registerItem]);
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CmdkContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      "input",
+      {
+        className: "uix-cmdk__input",
+        role: "combobox",
+        "aria-expanded": "true",
+        "aria-autocomplete": "list",
+        "aria-controls": listId,
+        "aria-activedescendant": activeId ?? void 0,
+        "aria-label": "Command palette",
+        ...inputProps
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-cmdk__list", role: "listbox", id: listId, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uix-visually-hidden", role: "status", children: announced })
+  ] }) });
 }
 function CommandGroup({ label, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-cmdk__group", children: label }),
+  const labelId = (0, import_react33.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { role: "group", "aria-labelledby": label != null ? labelId : void 0, children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-cmdk__group", id: labelId, children: label }),
     children
   ] });
 }
-function CommandItem({ icon, shortcut, active, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
-    icon,
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children }),
-    shortcut
-  ] });
+function CommandItem({ icon, shortcut, active, children, className, id, ...props }) {
+  const ctx = (0, import_react33.useContext)(CmdkContext);
+  const autoId = (0, import_react33.useId)();
+  const itemId = id ?? autoId;
+  (0, import_react33.useEffect)(() => ctx?.registerItem(), [ctx]);
+  (0, import_react33.useEffect)(() => {
+    if (!ctx || !active) return;
+    ctx.setActive(itemId, true);
+    return () => ctx.setActive(itemId, false);
+  }, [ctx, itemId, active]);
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    "div",
+    {
+      className: cx("uix-cmdk__item", className),
+      "data-active": active || void 0,
+      id: itemId,
+      role: "option",
+      "aria-selected": !!active,
+      ...props,
+      children: [
+        icon,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children }),
+        shortcut
+      ]
+    }
+  );
 }
 
 // src/components/Inbox.tsx
+var import_react34 = require("react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
-function Inbox({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cx("uix-inbox", className), ...props, children });
+function Inbox({ view, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cx("uix-inbox", className), "data-view": view, ...props, children });
 }
+var InboxListCtx = (0, import_react34.createContext)({});
 function InboxList({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cx("uix-inbox__list", className), role: "listbox", ...props, children });
+  const listRef = (0, import_react34.useRef)(null);
+  const [activeId, setActiveId] = (0, import_react34.useState)(void 0);
+  const ctx = (0, import_react34.useMemo)(() => ({ activeId }), [activeId]);
+  const onKeyDown = (e) => {
+    const opts = Array.from(listRef.current?.querySelectorAll('[role="option"]') ?? []);
+    if (opts.length === 0) return;
+    const idx = opts.findIndex((el2) => el2.id === activeId);
+    let next;
+    switch (e.key) {
+      case "ArrowDown":
+        next = Math.min(idx + 1, opts.length - 1);
+        break;
+      case "ArrowUp":
+        next = idx < 0 ? 0 : Math.max(idx - 1, 0);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = opts.length - 1;
+        break;
+      case "Enter":
+      case " ":
+        if (idx >= 0) {
+          e.preventDefault();
+          opts[idx]?.click();
+        }
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+    const el = opts[next];
+    if (!el || !el.id) return;
+    setActiveId(el.id);
+    el.scrollIntoView({ block: "nearest" });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(InboxListCtx.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    "div",
+    {
+      ref: listRef,
+      className: cx("uix-inbox__list", className),
+      role: "listbox",
+      tabIndex: 0,
+      "aria-label": "Inbox",
+      "aria-activedescendant": activeId,
+      onKeyDown,
+      ...props,
+      children
+    }
+  ) });
 }
 function InboxItem({
   subject,
@@ -2644,13 +3032,19 @@ function InboxItem({
   selected,
   children,
   className,
+  id,
   ...props
 }) {
+  const autoId = (0, import_react34.useId)();
+  const itemId = id ?? autoId;
+  const { activeId } = (0, import_react34.useContext)(InboxListCtx);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "div",
     {
       role: "option",
+      id: itemId,
       "aria-selected": selected ?? false,
+      "data-active": activeId === itemId ? "" : void 0,
       className: cx("uix-inbox__item", className),
       ...unread ? { "data-unread": "" } : {},
       ...props,
@@ -2668,29 +3062,60 @@ function InboxDetail({ children, className, ...props }) {
 }
 
 // src/components/Kanban.tsx
+var import_react35 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
-function Kanban({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
+function Kanban({ announcement, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("uix-kanban", className), ...props, children: [
+    announcement != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
+    children
+  ] });
 }
 function KanbanColumn({ title, count, children, className, ...props }) {
+  const headId = (0, import_react35.useId)();
+  const hasHead = title != null || count != null;
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
-    (title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uix-kanban__head", children: [
+    hasHead && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uix-kanban__head", id: headId, children: [
       title,
       count != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "uix-kanban__count", children: count })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__body", children })
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__body", role: "list", "aria-labelledby": hasHead ? headId : void 0, children })
   ] });
 }
-function KanbanCard({ title, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__card-title", children: title }),
-    meta && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
-    children
-  ] });
+var MOVE_KEYS = {
+  ArrowUp: "up",
+  ArrowDown: "down",
+  ArrowLeft: "left",
+  ArrowRight: "right"
+};
+function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...props }) {
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (!onMove || !e.altKey || e.defaultPrevented) return;
+    const dir = MOVE_KEYS[e.key];
+    if (dir) {
+      e.preventDefault();
+      onMove(dir);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    "div",
+    {
+      role: "listitem",
+      tabIndex: 0,
+      className: cx("uix-kanban__card", className),
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__card-title", children: title }),
+        meta && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
+        children
+      ]
+    }
+  );
 }
 
 // src/components/Tree.tsx
-var import_react29 = require("react");
+var import_react36 = require("react");
 
 // src/tree-model.ts
 function flattenTree(nodes, expanded, level = 1) {
@@ -2735,6 +3160,14 @@ function treeNav(flat, currentId, key) {
     case " ":
       return cur.hasChildren ? { toggleId: cur.node.id, selectId: cur.node.id } : { selectId: cur.node.id };
     default:
+      if (key.length === 1) {
+        const q = key.toLowerCase();
+        for (let step = 1; step <= flat.length; step++) {
+          const f = flat[(idx + step) % flat.length];
+          const label = f.node.typeaheadLabel ?? (typeof f.node.label === "string" ? f.node.label : void 0);
+          if (label != null && label.toLowerCase().startsWith(q)) return { focusId: f.node.id };
+        }
+      }
       return {};
   }
 }
@@ -2802,12 +3235,12 @@ function Tree({
   className,
   ...props
 }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react29.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
+  const [internalExpanded, setInternalExpanded] = (0, import_react36.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
   const expanded = controlledExpanded ?? internalExpanded;
-  const rootRef = (0, import_react29.useRef)(null);
-  const [focusedId, setFocusedId] = (0, import_react29.useState)(void 0);
+  const rootRef = (0, import_react36.useRef)(null);
+  const [focusedId, setFocusedId] = (0, import_react36.useState)(void 0);
   const selectable = selected !== void 0 || onSelect != null;
-  const handleToggle = (0, import_react29.useCallback)((id) => {
+  const handleToggle = (0, import_react36.useCallback)((id) => {
     if (!controlledExpanded) {
       setInternalExpanded((prev) => {
         const next = new Set(prev);
@@ -2818,7 +3251,7 @@ function Tree({
     }
     onToggle?.(id);
   }, [controlledExpanded, onToggle]);
-  const flat = (0, import_react29.useMemo)(() => flattenTree(nodes, expanded), [nodes, expanded]);
+  const flat = (0, import_react36.useMemo)(() => flattenTree(nodes, expanded), [nodes, expanded]);
   const useVirtual = virtualize ?? shouldVirtualize(flat.length);
   const tabbableId = focusedId ?? selected ?? nodes[0]?.id;
   if (useVirtual) {
@@ -2889,6 +3322,13 @@ function Tree({
         setFocusedId(id);
         break;
       default:
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+          const act = treeNav(flat, id, e.key);
+          if (act.focusId !== void 0) {
+            e.preventDefault();
+            focusItem(rootRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(act.focusId)}"]`));
+          }
+        }
         break;
     }
   };
@@ -2922,12 +3362,14 @@ function VirtualTreeView({
   className,
   ...props
 }) {
-  const scrollRef = (0, import_react29.useRef)(null);
-  const [scrollTop, setScrollTop] = (0, import_react29.useState)(0);
-  const pendingFocus = (0, import_react29.useRef)(false);
+  const scrollRef = (0, import_react36.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react36.useState)(0);
+  const pendingFocus = (0, import_react36.useRef)(false);
+  const hadFocus = (0, import_react36.useRef)(false);
   const win = virtualWindow(scrollTop, maxHeight, rowHeight, flat.length);
   const rows = flat.slice(win.start, win.end);
-  (0, import_react29.useEffect)(() => {
+  const windowHasTabbable = tabbableId != null && rows.some((f) => f.node.id === tabbableId);
+  (0, import_react36.useEffect)(() => {
     if (!pendingFocus.current || focusedId == null) return;
     const el = scrollRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(focusedId)}"]`);
     if (el) {
@@ -2935,6 +3377,11 @@ function VirtualTreeView({
       pendingFocus.current = false;
     }
   }, [focusedId, win.start, win.end]);
+  (0, import_react36.useEffect)(() => {
+    if (!hadFocus.current || pendingFocus.current) return;
+    const active = document.activeElement;
+    if (active === document.body || active == null) scrollRef.current?.focus({ preventScroll: true });
+  });
   const moveTo = (id) => {
     const i = flat.findIndex((f) => f.node.id === id);
     if (i < 0) return;
@@ -2950,6 +3397,7 @@ function VirtualTreeView({
     setFocusedId(id);
   };
   const onKeyDown = (e) => {
+    if (e.key.length === 1 && (e.ctrlKey || e.metaKey || e.altKey)) return;
     const curId = e.target.closest('[role="treeitem"]')?.dataset.id ?? focusedId;
     const act = treeNav(flat, curId, e.key);
     if (act.focusId === void 0 && act.toggleId === void 0 && act.selectId === void 0) return;
@@ -2970,13 +3418,20 @@ function VirtualTreeView({
       ref: scrollRef,
       className: cx("uix-tree", "uix-tree--virtual", className),
       role: "tree",
+      tabIndex: -1,
       style: { maxHeight, overflow: "auto" },
       onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
       onKeyDown,
+      onFocus: () => {
+        hadFocus.current = true;
+      },
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) hadFocus.current = false;
+      },
       ...props,
       children: [
-        win.padTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { "aria-hidden": "true", style: { height: win.padTop } }),
-        rows.map((f) => {
+        win.padTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { role: "presentation", "aria-hidden": "true", style: { height: win.padTop } }),
+        rows.map((f, i) => {
           const rowStyle = { height: rowHeight, paddingLeft: `calc(${f.level - 1} * var(--uix-space-5))` };
           return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "li",
@@ -2988,7 +3443,7 @@ function VirtualTreeView({
               "aria-expanded": f.hasChildren ? f.isExpanded : void 0,
               "aria-selected": selectable ? selected === f.node.id : void 0,
               "data-id": f.node.id,
-              tabIndex: tabbableId === f.node.id ? 0 : -1,
+              tabIndex: tabbableId === f.node.id || !windowHasTabbable && i === 0 ? 0 : -1,
               className: "uix-tree__item",
               onFocus: (e) => {
                 if (e.target === e.currentTarget) setFocusedId(f.node.id);
@@ -3008,7 +3463,7 @@ function VirtualTreeView({
             f.node.id
           );
         }),
-        win.padBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { "aria-hidden": "true", style: { height: win.padBottom } })
+        win.padBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { role: "presentation", "aria-hidden": "true", style: { height: win.padBottom } })
       ]
     }
   );
@@ -3427,7 +3882,7 @@ function RuleBuilder({
 }
 
 // src/components/BuilderCanvas.tsx
-var import_react30 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 function BuilderCanvas({
   items,
@@ -3443,13 +3898,13 @@ function BuilderCanvas({
   emptyMessage = "Add an item from the palette to begin.",
   className
 }) {
-  const [internalSelectedId, setInternalSelectedId] = (0, import_react30.useState)();
-  const [draggedId, setDraggedId] = (0, import_react30.useState)();
-  const propertyHeadingRef = (0, import_react30.useRef)(null);
-  const shouldFocusProperties = (0, import_react30.useRef)(false);
+  const [internalSelectedId, setInternalSelectedId] = (0, import_react37.useState)();
+  const [draggedId, setDraggedId] = (0, import_react37.useState)();
+  const propertyHeadingRef = (0, import_react37.useRef)(null);
+  const shouldFocusProperties = (0, import_react37.useRef)(false);
   const selectedId = controlledSelectedId ?? internalSelectedId;
   const selected = items.find((item) => item.id === selectedId);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (shouldFocusProperties.current && selected) {
       propertyHeadingRef.current?.focus();
       shouldFocusProperties.current = false;
@@ -3540,7 +3995,7 @@ function BuilderCanvas({
 }
 
 // src/components/SchedulingCalendar.tsx
-var import_react31 = require("react");
+var import_react38 = require("react");
 
 // src/calendar-model.ts
 function fromDateKey(value) {
@@ -3643,19 +4098,19 @@ function SchedulingCalendar({
   onRetry,
   className
 }) {
-  const [internalView, setInternalView] = (0, import_react31.useState)("month");
+  const [internalView, setInternalView] = (0, import_react38.useState)("month");
   const view = controlledView ?? internalView;
-  const [activeDate, setActiveDate] = (0, import_react31.useState)(anchorDate);
-  const gridRef = (0, import_react31.useRef)(null);
-  const visibleEntries = (0, import_react31.useMemo)(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
-  const entrySpans = (0, import_react31.useMemo)(() => new Map(visibleEntries.map((entry) => [entry.id, zonedDateSpan(entry.start, entry.end, timeZone)])), [visibleEntries, timeZone]);
-  const overlaySpans = (0, import_react31.useMemo)(() => new Map(overlays.map((overlay) => [overlay.id, { start: overlay.start.slice(0, 10), end: overlay.end.slice(0, 10) }])), [overlays]);
-  const monthDays = (0, import_react31.useMemo)(() => buildMonthGrid(startOfMonth(anchorDate)), [anchorDate]);
+  const [activeDate, setActiveDate] = (0, import_react38.useState)(anchorDate);
+  const gridRef = (0, import_react38.useRef)(null);
+  const visibleEntries = (0, import_react38.useMemo)(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
+  const entrySpans = (0, import_react38.useMemo)(() => new Map(visibleEntries.map((entry) => [entry.id, zonedDateSpan(entry.start, entry.end, timeZone)])), [visibleEntries, timeZone]);
+  const overlaySpans = (0, import_react38.useMemo)(() => new Map(overlays.map((overlay) => [overlay.id, { start: overlay.start.slice(0, 10), end: overlay.end.slice(0, 10) }])), [overlays]);
+  const monthDays = (0, import_react38.useMemo)(() => buildMonthGrid(startOfMonth(anchorDate)), [anchorDate]);
   const weekday = ((/* @__PURE__ */ new Date(`${anchorDate}T00:00:00Z`)).getUTCDay() + 6) % 7;
   const weekStart = addCalendarDays(anchorDate, -weekday);
-  const weekDays = (0, import_react31.useMemo)(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
-  const days = (0, import_react31.useMemo)(() => view === "month" ? monthDays.map((day) => day.date) : weekDays, [view, monthDays, weekDays]);
-  (0, import_react31.useEffect)(() => {
+  const weekDays = (0, import_react38.useMemo)(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
+  const days = (0, import_react38.useMemo)(() => view === "month" ? monthDays.map((day) => day.date) : weekDays, [view, monthDays, weekDays]);
+  (0, import_react38.useEffect)(() => {
     if (view !== "agenda" && !days.includes(activeDate)) setActiveDate(days[0]);
   }, [activeDate, days, view]);
   const setView = (next) => {
@@ -3739,7 +4194,7 @@ function SchedulingCalendar({
 }
 
 // src/components/DateRangePicker.tsx
-var import_react32 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
 var dateLabel2 = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
@@ -3759,25 +4214,25 @@ function DateRangePicker({
   disabled,
   className
 }) {
-  const id = (0, import_react32.useId)();
-  const [internalMonth, setInternalMonth] = (0, import_react32.useState)(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
+  const id = (0, import_react39.useId)();
+  const [internalMonth, setInternalMonth] = (0, import_react39.useState)(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
   const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);
-  const [activeDate, setActiveDate] = (0, import_react32.useState)(value.end ?? value.start ?? visibleMonth);
-  const rootRef = (0, import_react32.useRef)(null);
-  const pendingFocus = (0, import_react32.useRef)(false);
+  const [activeDate, setActiveDate] = (0, import_react39.useState)(value.end ?? value.start ?? visibleMonth);
+  const rootRef = (0, import_react39.useRef)(null);
+  const pendingFocus = (0, import_react39.useRef)(false);
   const count = Math.max(1, Math.min(3, months));
-  const calendars = (0, import_react32.useMemo)(() => Array.from({ length: count }, (_, index) => {
+  const calendars = (0, import_react39.useMemo)(() => Array.from({ length: count }, (_, index) => {
     const month = startOfMonth(addCalendarMonths(visibleMonth, index));
     return { month, days: buildMonthGrid(month).filter((day) => day.inMonth) };
   }), [visibleMonth, count]);
   const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
-  (0, import_react32.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const first = calendars[0]?.days[0]?.date;
     const finalDays = calendars[calendars.length - 1]?.days;
     const last = finalDays?.[finalDays.length - 1]?.date;
     if (first && last && (activeDate < first || activeDate > last)) setActiveDate(first);
   }, [activeDate, calendars]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!pendingFocus.current) return;
     rootRef.current?.querySelector(`[data-date="${activeDate}"]`)?.focus();
     pendingFocus.current = false;
@@ -3858,7 +4313,7 @@ function DateRangePicker({
 }
 
 // src/components/RelationshipGraph.tsx
-var import_react33 = require("react");
+var import_react41 = require("react");
 
 // src/relationship-graph-model.ts
 function boundRelationshipGraph(nodes, edges, maxNodes = 40) {
@@ -3923,37 +4378,955 @@ function traverseRelationshipNode(nodes, currentId, direction) {
   const current = Math.max(0, nodes.findIndex((node) => node.id === currentId));
   return nodes[(current + direction + nodes.length) % nodes.length]?.id;
 }
+var LAYERED_GEOMETRY = {
+  standard: { nodeWidth: 176, nodeHeight: 76, columnGap: 96, rowGap: 12 },
+  compact: { nodeWidth: 160, nodeHeight: 60, columnGap: 80, rowGap: 8 }
+};
+var LAYERED_PADDING = 16;
+var LAYERED_HEADER = 28;
+var GROUP_HEADER = 28;
+var AUTO_LABEL_MAX_FANOUT = 4;
+var LABEL_CHAR_WIDTH = 5.6;
+var LABEL_MAX_LINES = 2;
+function wrapEdgeLabel(label, width) {
+  const max = Math.max(4, Math.floor(width / LABEL_CHAR_WIDTH));
+  const clip = (word) => word.length > max ? `${word.slice(0, max - 1)}\u2026` : word;
+  const lines = [];
+  let current = "";
+  for (const word of label.split(/\s+/).filter(Boolean)) {
+    const next = current ? `${current} ${word}` : word;
+    if (next.length <= max) {
+      current = next;
+      continue;
+    }
+    if (current) lines.push(current);
+    current = clip(word);
+    if (lines.length === LABEL_MAX_LINES) break;
+  }
+  if (current && lines.length < LABEL_MAX_LINES) lines.push(current);
+  if (lines.length === LABEL_MAX_LINES) {
+    const consumed = lines.join(" ").replace(/…$/, "").length;
+    if (consumed < label.replace(/\s+/g, " ").trim().length) {
+      const last = lines[LABEL_MAX_LINES - 1];
+      lines[LABEL_MAX_LINES - 1] = last.endsWith("\u2026") ? last : `${last.slice(0, Math.max(1, max - 1))}\u2026`;
+    }
+  }
+  return lines;
+}
+var drawableEdge = (edge, ids) => ids.has(edge.source) && ids.has(edge.target) && edge.source !== edge.target;
+function classifyLayeredEdges(nodes, edges, rootId = nodes[0]?.id) {
+  const ids = new Set(nodes.map((node) => node.id));
+  const root = rootId !== void 0 && ids.has(rootId) ? rootId : nodes[0]?.id;
+  const outgoing = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (!drawableEdge(edge, ids)) continue;
+    const list = outgoing.get(edge.source);
+    if (list) list.push(edge.target);
+    else outgoing.set(edge.source, [edge.target]);
+  }
+  const bfs = /* @__PURE__ */ new Map();
+  if (root !== void 0) {
+    bfs.set(root, 0);
+    const queue = [root];
+    for (let head = 0; head < queue.length; head += 1) {
+      const current = queue[head];
+      for (const next of outgoing.get(current) ?? []) {
+        if (!bfs.has(next)) {
+          bfs.set(next, bfs.get(current) + 1);
+          queue.push(next);
+        }
+      }
+    }
+  }
+  const depthById = /* @__PURE__ */ new Map();
+  let deepest = 0;
+  for (const node of nodes) {
+    const supplied = node.depth !== void 0 && Number.isFinite(node.depth) ? Math.max(0, Math.floor(node.depth)) : void 0;
+    const depth = supplied ?? bfs.get(node.id);
+    if (depth === void 0) continue;
+    depthById.set(node.id, depth);
+    deepest = Math.max(deepest, depth);
+  }
+  for (const node of nodes) if (!depthById.has(node.id)) depthById.set(node.id, deepest + 1);
+  const forwardOut = /* @__PURE__ */ new Map();
+  const kindById = /* @__PURE__ */ new Map();
+  const backEdges = [];
+  for (const edge of edges) {
+    if (!drawableEdge(edge, ids)) continue;
+    const from = depthById.get(edge.source);
+    const to = depthById.get(edge.target);
+    if (to === from + 1) {
+      kindById.set(edge.id, "forward");
+      const list = forwardOut.get(edge.source);
+      if (list) list.push(edge.target);
+      else forwardOut.set(edge.source, [edge.target]);
+    } else if (to < from) {
+      backEdges.push(edge);
+    } else {
+      kindById.set(edge.id, "lateral");
+    }
+  }
+  for (const edge of backEdges) {
+    const limit = depthById.get(edge.source);
+    const seen = /* @__PURE__ */ new Set([edge.target]);
+    const stack = [edge.target];
+    let closes = false;
+    while (stack.length > 0 && !closes) {
+      const current = stack.pop();
+      for (const next of forwardOut.get(current) ?? []) {
+        if (next === edge.source) {
+          closes = true;
+          break;
+        }
+        if (!seen.has(next) && depthById.get(next) < limit) {
+          seen.add(next);
+          stack.push(next);
+        }
+      }
+    }
+    kindById.set(edge.id, closes ? "cycle" : "lateral");
+  }
+  return { depthById, kindById };
+}
+function clusterIdFor(parentId, type, edgeType) {
+  return `cluster:${parentId}:${type ?? ""}:${edgeType ?? ""}`;
+}
+var mean = (values) => values.reduce((sum, value) => sum + value, 0) / values.length;
+var round1 = (value) => Math.round(value * 10) / 10;
+function layoutLayeredGraph(nodes, edges, options = {}) {
+  const { nodeWidth, nodeHeight, columnGap, rowGap } = LAYERED_GEOMETRY[options.density ?? "standard"];
+  const threshold = options.clusterThreshold ?? 6;
+  const expanded = options.expandedClusterIds ?? /* @__PURE__ */ new Set();
+  const rootId = options.rootId !== void 0 && nodes.some((node) => node.id === options.rootId) ? options.rootId : nodes[0]?.id;
+  if (nodes.length === 0) {
+    return {
+      rootId,
+      items: [],
+      edges: [],
+      clusters: [],
+      columns: [],
+      itemOf: {},
+      width: 0,
+      height: 0,
+      nodeWidth,
+      nodeHeight,
+      headerHeight: LAYERED_HEADER
+    };
+  }
+  const { depthById, kindById } = classifyLayeredEdges(nodes, edges, rootId);
+  const drawable = edges.filter((edge) => kindById.has(edge.id));
+  const forwardParents = /* @__PURE__ */ new Map();
+  const forwardChildCount = /* @__PURE__ */ new Map();
+  const inCycle = /* @__PURE__ */ new Set();
+  const nodeDegree = /* @__PURE__ */ new Map();
+  for (const edge of drawable) {
+    nodeDegree.set(edge.source, (nodeDegree.get(edge.source) ?? 0) + 1);
+    nodeDegree.set(edge.target, (nodeDegree.get(edge.target) ?? 0) + 1);
+    if (kindById.get(edge.id) === "forward") {
+      const list = forwardParents.get(edge.target);
+      if (list) list.push(edge);
+      else forwardParents.set(edge.target, [edge]);
+      forwardChildCount.set(edge.source, (forwardChildCount.get(edge.source) ?? 0) + 1);
+    } else {
+      inCycle.add(edge.source);
+      inCycle.add(edge.target);
+    }
+  }
+  const groups = /* @__PURE__ */ new Map();
+  if (threshold > 0) {
+    for (const node of nodes) {
+      if (node.id === rootId || inCycle.has(node.id) || (forwardChildCount.get(node.id) ?? 0) > 0) continue;
+      const parents = forwardParents.get(node.id) ?? [];
+      if (parents.length !== 1) continue;
+      const via = parents[0];
+      const id = clusterIdFor(via.source, node.type, via.type);
+      const group = groups.get(id);
+      if (group) {
+        group.members.push(node);
+        continue;
+      }
+      const created = { id, parentId: via.source, depth: depthById.get(node.id), members: [node] };
+      if (node.type !== void 0) created.type = node.type;
+      if (via.type !== void 0) created.edgeType = via.type;
+      const edgeLabel = via.label ?? via.type;
+      if (edgeLabel !== void 0) created.edgeLabel = edgeLabel;
+      groups.set(id, created);
+    }
+  }
+  const clusterById = /* @__PURE__ */ new Map();
+  const itemOf = {};
+  const expandedGroupOf = /* @__PURE__ */ new Map();
+  for (const group of groups.values()) {
+    if (group.members.length < threshold) continue;
+    if (expanded.has(group.id)) {
+      for (const member of group.members) expandedGroupOf.set(member.id, group);
+      continue;
+    }
+    clusterById.set(group.id, group);
+    for (const member of group.members) itemOf[member.id] = group.id;
+  }
+  for (const node of nodes) if (itemOf[node.id] === void 0) itemOf[node.id] = node.id;
+  const columnsByDepth = /* @__PURE__ */ new Map();
+  const itemById = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const id = itemOf[node.id];
+    if (itemById.has(id)) continue;
+    const cluster = clusterById.get(id);
+    const depth = depthById.get(node.id);
+    const item = {
+      id,
+      kind: cluster ? "cluster" : "node",
+      depth,
+      index: 0,
+      x: 0,
+      y: 0,
+      width: nodeWidth,
+      height: nodeHeight,
+      parents: [],
+      children: [],
+      inCycle: cluster ? false : inCycle.has(node.id),
+      degree: cluster ? cluster.members.length : nodeDegree.get(node.id) ?? 0
+    };
+    if (cluster) item.cluster = cluster;
+    else item.node = node;
+    itemById.set(id, item);
+    const column = columnsByDepth.get(depth);
+    if (column) column.push(item);
+    else columnsByDepth.set(depth, [item]);
+  }
+  for (const edge of drawable) {
+    if (kindById.get(edge.id) !== "forward") continue;
+    const from = itemById.get(itemOf[edge.source]);
+    const to = itemById.get(itemOf[edge.target]);
+    if (!from.children.includes(to.id)) from.children.push(to.id);
+    if (!to.parents.includes(from.id)) to.parents.push(from.id);
+  }
+  const depths = [...columnsByDepth.keys()].sort((a, b) => a - b);
+  const position = /* @__PURE__ */ new Map();
+  const reindex = (column) => {
+    column.forEach((item, index) => {
+      item.index = index;
+      position.set(item.id, index);
+    });
+  };
+  for (const depth of depths) reindex(columnsByDepth.get(depth));
+  const groupOfItem = (item) => item.node ? expandedGroupOf.get(item.node.id) : void 0;
+  const sweep = (depth, neighbours) => {
+    const keyed = columnsByDepth.get(depth).map((item) => {
+      const around = neighbours(item).map((id) => position.get(id)).filter((value) => value !== void 0);
+      return { item, key: around.length > 0 ? mean(around) : item.index, tie: item.index };
+    });
+    keyed.sort((a, b) => a.key - b.key || a.tie - b.tie);
+    const ordered = [];
+    const placed = /* @__PURE__ */ new Set();
+    for (const { item } of keyed) {
+      if (placed.has(item.id)) continue;
+      const group = groupOfItem(item);
+      for (const candidate of group ? keyed.map((entry) => entry.item).filter((other) => groupOfItem(other) === group) : [item]) {
+        if (placed.has(candidate.id)) continue;
+        ordered.push(candidate);
+        placed.add(candidate.id);
+      }
+    }
+    columnsByDepth.set(depth, ordered);
+    reindex(ordered);
+  };
+  const inner = depths.slice(1);
+  for (const depth of inner) sweep(depth, (item) => item.parents);
+  for (const depth of [...inner].reverse()) sweep(depth, (item) => item.children);
+  for (const depth of inner) sweep(depth, (item) => item.parents);
+  const top = LAYERED_PADDING + LAYERED_HEADER;
+  const columns = [];
+  let width = 0;
+  let height = 0;
+  for (const depth of depths) {
+    const column = columnsByDepth.get(depth);
+    const x = LAYERED_PADDING + depth * (nodeWidth + columnGap);
+    let cursor = top;
+    let count = 0;
+    const ledGroups = /* @__PURE__ */ new Set();
+    for (const item of column) {
+      const parentCentres = item.parents.map((id) => itemById.get(id)).filter((parent) => parent.depth < depth).map((parent) => parent.y + parent.height / 2);
+      const group = groupOfItem(item);
+      const leadsGroup = group !== void 0 && !ledGroups.has(group);
+      if (group) ledGroups.add(group);
+      const floor = cursor + (leadsGroup ? GROUP_HEADER : 0);
+      const target = parentCentres.length > 0 ? mean(parentCentres) - item.height / 2 : floor;
+      item.x = x;
+      item.y = round1(Math.max(target, floor));
+      if (leadsGroup) item.expandedGroup = group;
+      cursor = item.y + item.height + rowGap;
+      count += item.cluster ? item.cluster.members.length : 1;
+      width = Math.max(width, x + item.width);
+      height = Math.max(height, item.y + item.height);
+    }
+    columns.push({ depth, x, count });
+  }
+  const byPosition = (a, b) => (position.get(a) ?? 0) - (position.get(b) ?? 0);
+  for (const item of itemById.values()) {
+    item.children.sort(byPosition);
+    item.parents.sort(byPosition);
+  }
+  const routed = /* @__PURE__ */ new Map();
+  for (const edge of drawable) {
+    const kind = kindById.get(edge.id);
+    const from = itemById.get(itemOf[edge.source]);
+    const to = itemById.get(itemOf[edge.target]);
+    const key = from.kind === "cluster" || to.kind === "cluster" ? `${from.id}->${to.id}` : edge.id;
+    const existing = routed.get(key);
+    if (existing) {
+      existing.edgeIds.push(edge.id);
+      continue;
+    }
+    let startX;
+    let startY;
+    let endX;
+    let endY;
+    let path;
+    let labelX;
+    let labelY;
+    let startAngle;
+    let endAngle;
+    if (kind === "forward") {
+      startX = from.x + from.width;
+      startY = from.y + from.height / 2;
+      endX = to.x;
+      endY = to.y + to.height / 2;
+      const bend = Math.max(columnGap / 2, 24);
+      path = `M${round1(startX)} ${round1(startY)} C${round1(startX + bend)} ${round1(startY)} ${round1(endX - bend)} ${round1(endY)} ${round1(endX)} ${round1(endY)}`;
+      labelX = (startX + endX) / 2;
+      labelY = (startY + endY) / 2;
+      startAngle = Math.PI;
+      endAngle = 0;
+    } else if (from.depth === to.depth) {
+      startX = from.x + from.width;
+      startY = from.y + from.height / 2;
+      endX = to.x + to.width;
+      endY = to.y + to.height / 2;
+      const bulge = Math.min(columnGap - 8, 20 + Math.abs(endY - startY) * 0.1);
+      path = `M${round1(startX)} ${round1(startY)} C${round1(startX + bulge)} ${round1(startY)} ${round1(endX + bulge)} ${round1(endY)} ${round1(endX)} ${round1(endY)}`;
+      labelX = startX + bulge * 0.75;
+      labelY = (startY + endY) / 2;
+      startAngle = Math.PI;
+      endAngle = Math.PI;
+    } else {
+      startX = from.x + from.width / 2;
+      startY = from.y + from.height;
+      endX = to.x + to.width / 2;
+      endY = to.y + to.height;
+      const dip = 28 + Math.abs(endX - startX) * 0.12;
+      const low = Math.max(startY, endY) + dip;
+      path = `M${round1(startX)} ${round1(startY)} C${round1(startX)} ${round1(low)} ${round1(endX)} ${round1(low)} ${round1(endX)} ${round1(endY)}`;
+      labelX = (startX + endX) / 2;
+      labelY = low - dip * 0.25;
+      startAngle = -Math.PI / 2;
+      endAngle = -Math.PI / 2;
+      height = Math.max(height, low);
+    }
+    const arrow = edge.arrow ?? "forward";
+    const atStart = arrow === "backward";
+    const entry = {
+      id: key,
+      source: from.id,
+      target: to.id,
+      kind,
+      edgeIds: [edge.id],
+      arrow,
+      emphasis: edge.emphasis === true,
+      path,
+      labelX: round1(labelX),
+      labelY: round1(labelY),
+      arrowX: round1(atStart ? startX : endX),
+      arrowY: round1(atStart ? startY : endY),
+      arrowAngle: atStart ? startAngle : endAngle,
+      labelLines: [],
+      autoLabel: to.kind !== "cluster" && (edge.emphasis === true || kind === "forward" && from.children.length <= AUTO_LABEL_MAX_FANOUT)
+    };
+    if (edge.type !== void 0) entry.type = edge.type;
+    const label = edge.label ?? edge.type;
+    if (label !== void 0) entry.label = label;
+    routed.set(key, entry);
+  }
+  const seenLabels = /* @__PURE__ */ new Set();
+  for (const entry of routed.values()) {
+    if (entry.label === void 0) continue;
+    entry.labelLines = wrapEdgeLabel(entry.label, columnGap - 8);
+    if (!entry.autoLabel || entry.emphasis || entry.kind !== "forward") continue;
+    const key = `${entry.source}|${entry.label}`;
+    if (seenLabels.has(key)) entry.autoLabel = false;
+    else seenLabels.add(key);
+  }
+  return {
+    rootId,
+    items: depths.flatMap((depth) => columnsByDepth.get(depth)),
+    edges: [...routed.values()],
+    clusters: [...clusterById.values()],
+    columns,
+    itemOf,
+    width: round1(width + LAYERED_PADDING),
+    height: round1(height + LAYERED_PADDING + 8),
+    nodeWidth,
+    nodeHeight,
+    headerHeight: LAYERED_HEADER
+  };
+}
+function layeredNeighbor(layout, currentId, key) {
+  const root = layout.rootId !== void 0 ? layout.itemOf[layout.rootId] : layout.items[0]?.id;
+  const current = layout.items.find((item) => item.id === currentId);
+  if (!current) return root ?? layout.items[0]?.id;
+  const column = layout.items.filter((item) => item.depth === current.depth);
+  switch (key) {
+    case "ArrowUp":
+      return column[current.index - 1]?.id;
+    case "ArrowDown":
+      return column[current.index + 1]?.id;
+    case "ArrowRight":
+      return current.children[0];
+    case "ArrowLeft":
+      return current.parents[0];
+    case "Home":
+      return root;
+    case "End":
+      return column[column.length - 1]?.id;
+    default:
+      return void 0;
+  }
+}
 
-// src/components/RelationshipGraph.tsx
+// src/components/RelationshipGraphLayered.tsx
+var import_react40 = require("react");
+
+// src/components/RelationshipGraphList.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
+function EquivalentRelationshipList({
+  nodes,
+  edges,
+  selectedId,
+  labels,
+  onSelect,
+  onExpandNeighbors,
+  onOpenDetails
+}) {
+  const labelById = new Map(nodes.map((node) => [node.id, node.label]));
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": labels.list, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h3", { children: labels.listHeading }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { children: nodes.map((node) => {
+      const neighbors = relationshipNeighbors(node.id, edges).map((id) => labelById.get(id) ?? id);
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { "data-selected": selectedId === node.id || void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", onClick: () => onSelect(node.id), "aria-pressed": selectedId === node.id, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("strong", { children: node.label }),
+          node.type && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: node.type }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: neighbors.length ? labels.connectedTo(neighbors.join(", ")) : labels.noConnections })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "uix-relationship-graph__list-actions", children: [
+          onExpandNeighbors && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => onExpandNeighbors(node), children: labels.expandNeighbors }),
+          onOpenDetails && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => onOpenDetails(node), children: labels.openDetails })
+        ] })
+      ] }, node.id);
+    }) })
+  ] });
+}
+
+// src/components/RelationshipGraphLayered.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var EMPTY_IDS = /* @__PURE__ */ new Set();
-var EMPTY_LEGEND = [];
-function RelationshipGraph({
+var MIN_ZOOM = 0.4;
+var MAX_ZOOM = 1.5;
+var READABLE_ZOOM = 0.75;
+var ZOOM_STEP = 1.2;
+var PAN_STEP = 64;
+var FOCUS_MARGIN = 24;
+var NAV_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"];
+var 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 };
+}
+var arrowPoints = "0,0 -8,-4.5 -8,4.5";
+function LayeredRelationshipGraph({
   nodes,
   edges,
   selectedId,
   onSelect,
   onExpandNeighbors,
   onOpenDetails,
-  maxNodes = 40,
+  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 = (0, import_react40.useId)();
+  const bounded = (0, import_react40.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
+  const [localExpanded, setLocalExpanded] = (0, import_react40.useState)(EMPTY_IDS);
+  const expanded = expandedClusterIds ?? localExpanded;
+  const layout = (0, import_react40.useMemo)(
+    () => layoutLayeredGraph(bounded.nodes, bounded.edges, {
+      ...rootId !== void 0 ? { rootId } : {},
+      ...clusterThreshold !== void 0 ? { clusterThreshold } : {},
+      expandedClusterIds: expanded,
+      density
+    }),
+    [bounded, rootId, clusterThreshold, expanded, density]
+  );
+  const itemById = (0, import_react40.useMemo)(() => new Map(layout.items.map((item) => [item.id, item])), [layout]);
+  const viewportRef = (0, import_react40.useRef)(null);
+  const itemRefs = (0, import_react40.useRef)(/* @__PURE__ */ new Map());
+  const [size, setSize] = (0, import_react40.useState)({ width: 0, height: 0 });
+  const [view, setView] = (0, import_react40.useState)({ x: 0, y: 0, zoom: 1 });
+  const [animate, setAnimate] = (0, import_react40.useState)(false);
+  const [localFocus, setLocalFocus] = (0, import_react40.useState)(void 0);
+  const [hoverId, setHoverId] = (0, import_react40.useState)(void 0);
+  const viewRef = (0, import_react40.useRef)(view);
+  viewRef.current = view;
+  const layoutRef = (0, import_react40.useRef)(layout);
+  layoutRef.current = layout;
+  const pendingFocus = (0, import_react40.useRef)(void 0);
+  const initialisedFor = (0, import_react40.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 = (0, import_react40.useMemo)(
+    () => new Set([hoverId, selectedItemId].filter((id) => id !== void 0)),
+    [hoverId, selectedItemId]
+  );
+  (0, import_react40.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();
+  }, []);
+  (0, import_react40.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 = (0, import_react40.useCallback)((next, smooth) => {
+    setAnimate(smooth);
+    setView(next);
+  }, []);
+  const ensureVisible = (0, import_react40.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 = (0, import_react40.useCallback)((id) => {
+    setLocalFocus(id);
+    onFocusChange?.(id);
+    requestAnimationFrame(() => {
+      itemRefs.current.get(id)?.focus({ preventScroll: true });
+      ensureVisible(id, true);
+    });
+  }, [ensureVisible, onFocusChange]);
+  (0, import_react40.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 = (0, import_react40.useRef)(controlledKey);
+  (0, import_react40.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]);
+  (0, import_react40.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 = (0, import_react40.useRef)(/* @__PURE__ */ new Map());
+  const pinchDistance = (0, import_react40.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__ */ (0, import_jsx_runtime63.jsxs)("section", { className: cx("uix-relationship-graph", "uix-relationship-graph--layered", density === "compact" && "uix-relationship-graph--compact", className), "aria-label": labels.graph, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-relationship-graph__toolbar", role: "group", "aria-label": labels.controls, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", onClick: () => zoomBy(ZOOM_STEP), disabled: view.zoom >= MAX_ZOOM, children: labels.zoomIn }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", onClick: () => zoomBy(1 / ZOOM_STEP), disabled: view.zoom <= MIN_ZOOM, children: labels.zoomOut }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", onClick: () => moveView(fitView(layout, size), true), children: labels.fit }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", onClick: () => moveView(initialView(layout, size), true), children: labels.reset }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", onClick: () => panBy(PAN_STEP, 0), "aria-label": labels.panLeft, children: labels.left }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", onClick: () => panBy(0, PAN_STEP), "aria-label": labels.panUp, children: labels.up }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", onClick: () => panBy(0, -PAN_STEP), "aria-label": labels.panDown, children: labels.down }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", onClick: () => panBy(-PAN_STEP, 0), "aria-label": labels.panRight, children: labels.right }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(view.zoom * 100)) })
+    ] }),
+    bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { id: hintId, className: "uix-visually-hidden", children: labels.keyboardHint }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      "div",
+      {
+        ref: viewportRef,
+        className: "uix-relationship-graph__viewport",
+        style: viewportStyle,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: onPointerEnd,
+        onPointerCancel: onPointerEnd,
+        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-relationship-graph__stage", style: stageStyle, "data-animate": animate || void 0, onTransitionEnd: () => setAnimate(false), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.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__ */ (0, import_jsx_runtime63.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__ */ (0, import_jsx_runtime63.jsx)("path", { d: edge.path }),
+                  edge.arrow !== "none" && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` }),
+                  showLabel(edge) && /* @__PURE__ */ (0, import_jsx_runtime63.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__ */ (0, import_jsx_runtime63.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__ */ (0, import_jsx_runtime63.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__ */ (0, import_jsx_runtime63.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__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uix-relationship-graph__item-label", children: labels.cluster(item.cluster.members.length, item.cluster.type, item.cluster.edgeLabel) }),
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uix-relationship-graph__item-meta", children: labels.expandCluster })
+            ] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uix-relationship-graph__item-label", children: item.node.label }),
+              (item.node.type || item.node.description) && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uix-relationship-graph__item-meta", children: [item.node.type, item.node.description].filter(Boolean).join(" \xB7 ") })
+            ] });
+            return /* @__PURE__ */ (0, import_jsx_runtime63.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__ */ (0, import_jsx_runtime63.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__ */ (0, import_jsx_runtime63.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__ */ (0, import_jsx_runtime63.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("li", { "data-type": entry.id, children: entry.label }, entry.id)) }),
+    showList && /* @__PURE__ */ (0, import_jsx_runtime63.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
+      }
+    )
+  ] });
+}
+
+// src/components/RelationshipGraph.tsx
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var 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."
+};
+var EMPTY_IDS2 = /* @__PURE__ */ new Set();
+var EMPTY_LEGEND = [];
+function RelationshipGraph(props) {
+  const labels = (0, import_react41.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__ */ (0, import_jsx_runtime64.jsx)("div", { className: stateClass, role: "status", children: labels.loading });
+  if (props.error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: stateClass, role: "alert", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { children: props.error }),
+      props.onRetry && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: props.onRetry, children: labels.retry })
+    ] });
+  }
+  if (props.nodes.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: stateClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { children: labels.emptyTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { children: labels.emptyHint })
+  ] });
+  if (props.layout === "layered") return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LayeredRelationshipGraph, { ...props, labels });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RadialRelationshipGraph, { ...props, labels });
+}
+function RadialRelationshipGraph({
+  nodes,
+  edges,
+  selectedId,
+  onSelect,
+  onExpandNeighbors,
+  onOpenDetails,
+  maxNodes = 40,
+  density = "standard",
+  highlightedNodeIds = EMPTY_IDS2,
+  conflictedNodeIds = EMPTY_IDS2,
+  highlightedEdgeIds = EMPTY_IDS2,
+  conflictedEdgeIds = EMPTY_IDS2,
   legend = EMPTY_LEGEND,
-  loading,
-  error,
-  onRetry,
-  className
+  className,
+  labels,
+  showList = true
 }) {
-  const bounded = (0, import_react33.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
-  const positioned = (0, import_react33.useMemo)(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
-  const positionedById = (0, import_react33.useMemo)(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
-  const [zoom, setZoom] = (0, import_react33.useState)(1);
-  const [pan, setPan] = (0, import_react33.useState)({ x: 0, y: 0 });
-  const [focusedId, setFocusedId] = (0, import_react33.useState)(selectedId ?? positioned[0]?.id);
-  const svgRef = (0, import_react33.useRef)(null);
+  const bounded = (0, import_react41.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
+  const positioned = (0, import_react41.useMemo)(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
+  const positionedById = (0, import_react41.useMemo)(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
+  const [zoom, setZoom] = (0, import_react41.useState)(1);
+  const [pan, setPan] = (0, import_react41.useState)({ x: 0, y: 0 });
+  const [focusedId, setFocusedId] = (0, import_react41.useState)(selectedId ?? positioned[0]?.id);
+  const svgRef = (0, import_react41.useRef)(null);
   const select = (id) => {
     const node = bounded.nodes.find((item) => item.id === id);
     if (node) onSelect?.(node);
@@ -3976,49 +5349,30 @@ function RelationshipGraph({
     setZoom(1);
     setPan({ x: 0, y: 0 });
   };
-  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), role: "status", children: "Loading relationships\u2026" });
-  if (error) return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), role: "alert", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: error }),
-    onRetry && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
-  ] });
-  if (bounded.nodes.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: "No relationships to display." }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: "Adjust the neighborhood or filters to include a node." })
-  ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": "Relationship graph", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "uix-relationship-graph__toolbar", "aria-label": "Graph view controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": "Pan left", children: "Left" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": "Pan up", children: "Up" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": "Pan down", children: "Down" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x + 24 })), "aria-label": "Pan right", children: "Right" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.min(2, Number((value + 0.2).toFixed(1)))), "aria-label": "Zoom in", children: "Zoom in" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.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__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: reset, children: "Reset view" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { "aria-live": "polite", children: [
-        "Zoom ",
-        Math.round(zoom * 100),
-        "%"
-      ] })
-    ] }),
-    bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("p", { className: "uix-relationship-graph__bounded", role: "status", children: [
-      "Showing ",
-      bounded.nodes.length,
-      " nodes; ",
-      bounded.omittedNodeCount,
-      " outside this bounded neighborhood."
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": labels.graph, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uix-relationship-graph__toolbar", "aria-label": labels.controls, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": labels.panLeft, children: labels.left }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": labels.panUp, children: labels.up }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": labels.panDown, children: labels.down }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x + 24 })), "aria-label": labels.panRight, children: labels.right }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.min(2, Number((value + 0.2).toFixed(1)))), "aria-label": labels.zoomIn, children: labels.zoomIn }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.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__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", onClick: reset, children: labels.reset }),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(zoom * 100)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ (0, import_jsx_runtime62.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__ */ (0, import_jsx_runtime62.jsxs)("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
+    bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("svg", { ref: svgRef, viewBox: "0 0 600 400", role: "group", "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), children: /* @__PURE__ */ (0, import_jsx_runtime64.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__ */ (0, import_jsx_runtime62.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__ */ (0, import_jsx_runtime62.jsx)("title", { children: edge.label ?? edge.type ?? "Relationship" }) }, edge.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime64.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__ */ (0, import_jsx_runtime64.jsx)("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
       }),
-      positioned.map((node) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+      positioned.map((node) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
         "g",
         {
           transform: `translate(${node.x * 6} ${node.y * 4})`,
           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",
@@ -4029,37 +5383,21 @@ function RelationshipGraph({
           onKeyDown: (event) => onNodeKeyDown(event, node.id),
           onClick: () => select(node.id),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("rect", { x: "-55", y: "-18", width: "110", height: "36", rx: "8" }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("text", { textAnchor: "middle", dominantBaseline: "middle", children: node.label.length > 16 ? `${node.label.slice(0, 15)}\u2026` : node.label })
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("rect", { x: "-55", y: "-18", width: "110", height: "36", rx: "8" }),
+            /* @__PURE__ */ (0, import_jsx_runtime64.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__ */ (0, import_jsx_runtime62.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": "Relationship types", children: legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("li", { "data-type": item.id, children: item.label }, item.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": "Accessible relationship list", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h3", { children: "Relationship list" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.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__ */ (0, import_jsx_runtime62.jsxs)("li", { "data-selected": selectedId === node.id || void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", onClick: () => select(node.id), "aria-pressed": selectedId === node.id, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("strong", { children: node.label }),
-            node.type && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: node.type }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: neighbors.length ? `Connected to ${neighbors.join(", ")}` : "No visible connections" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "uix-relationship-graph__list-actions", children: [
-            onExpandNeighbors && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => onExpandNeighbors(node), children: "Expand neighbors" }),
-            onOpenDetails && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => onOpenDetails(node), children: "Open details" })
-          ] })
-        ] }, node.id);
-      }) })
-    ] })
+    legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("li", { "data-type": item.id, children: item.label }, item.id)) }),
+    showList && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(EquivalentRelationshipList, { nodes: bounded.nodes, edges: bounded.edges, selectedId, labels, onSelect: select, onExpandNeighbors, onOpenDetails })
   ] });
 }
 
 // src/components/MatchReview.tsx
-var import_react34 = require("react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_react42 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var valueText = (value) => value == null ? "\u2014" : typeof value === "string" ? value : JSON.stringify(value);
 function MatchReview({
   incoming,
@@ -4075,11 +5413,11 @@ function MatchReview({
   onRetry,
   className
 }) {
-  const [internalSelection, setInternalSelection] = (0, import_react34.useState)(/* @__PURE__ */ new Set());
-  const [announcement, setAnnouncement] = (0, import_react34.useState)("");
-  const [bulkPending, setBulkPending] = (0, import_react34.useState)(false);
+  const [internalSelection, setInternalSelection] = (0, import_react42.useState)(/* @__PURE__ */ new Set());
+  const [announcement, setAnnouncement] = (0, import_react42.useState)("");
+  const [bulkPending, setBulkPending] = (0, import_react42.useState)(false);
   const selection = selectedIds ?? internalSelection;
-  const pending = (0, import_react34.useMemo)(() => candidates.filter((candidate) => candidate.status !== "resolved"), [candidates]);
+  const pending = (0, import_react42.useMemo)(() => candidates.filter((candidate) => candidate.status !== "resolved"), [candidates]);
   const setSelection = (next) => {
     if (selectedIds === void 0) setInternalSelection(next);
     onSelectionChange?.(next);
@@ -4107,55 +5445,55 @@ function MatchReview({
       setBulkPending(false);
     }
   };
-  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "status", children: "Loading match candidates\u2026" });
-  if (error) return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "alert", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: error }),
-    onRetry && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "status", children: "Loading match candidates\u2026" });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "alert", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { children: error }),
+    onRetry && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
   ] });
-  if (candidates.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: "No candidate matches found." }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: "Choose another record source or continue without a match." })
+  if (candidates.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { children: "No candidate matches found." }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { children: "Choose another record source or continue without a match." })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("section", { className: cx("uix-match-review", className), "aria-label": "Match review", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-match-review__summary", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("strong", { children: incomingLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("section", { className: cx("uix-match-review", className), "aria-label": "Match review", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uix-match-review__summary", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("strong", { children: incomingLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { children: [
           pending.length,
           " pending of ",
           candidates.length
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uix-match-review__incoming", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("b", { children: field.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uix-match-review__incoming", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("b", { children: field.label }),
         field.render?.(incoming[field.id], incoming) ?? valueText(incoming[field.id])
       ] }, field.id)) })
     ] }),
-    onBulkDecision && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-match-review__bulk", "aria-label": "Bulk candidate actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { children: [
+    onBulkDecision && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uix-match-review__bulk", "aria-label": "Bulk candidate actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { children: [
         selection.size,
         " selected"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("accept"), children: bulkPending ? "Applying\u2026" : "Accept selected" }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("dismiss"), children: bulkPending ? "Applying\u2026" : "Dismiss selected" })
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("accept"), children: bulkPending ? "Applying\u2026" : "Accept selected" }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("dismiss"), children: bulkPending ? "Applying\u2026" : "Dismiss selected" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uix-match-review__table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("table", { className: "uix-table uix-match-review__table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("caption", { className: "uix-visually-hidden", children: "Candidate matches and available decisions" }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uix-visually-hidden", children: "Select" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: "Confidence" }),
-        fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: field.label }, field.id)),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: "Status" }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: "Actions" })
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uix-match-review__table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("table", { className: "uix-table uix-match-review__table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("caption", { className: "uix-visually-hidden", children: "Candidate matches and available decisions" }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("th", { scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "uix-visually-hidden", children: "Select" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("th", { scope: "col", children: "Confidence" }),
+        fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("th", { scope: "col", children: field.label }, field.id)),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("th", { scope: "col", children: "Status" }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("th", { scope: "col", children: "Actions" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tbody", { children: candidates.map((candidate) => {
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tbody", { children: candidates.map((candidate) => {
         const resolved = candidate.status === "resolved";
-        return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("tr", { "data-status": candidate.status ?? "pending", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("input", { type: "checkbox", checked: selection.has(candidate.id), onChange: () => toggle(candidate.id), "aria-label": `Select candidate ${candidate.id}` }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uix-match-review__confidence", children: candidate.confidence == null ? "Not scored" : `${Math.round(candidate.confidence * 100)}%` }) }),
-          fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: field.render?.(candidate.record[field.id], candidate.record) ?? valueText(candidate.record[field.id]) }, field.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StatusPill, { tone: resolved ? "success" : "warning", children: resolved ? candidate.decision ?? "Resolved" : "Pending" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uix-match-review__actions", children: ["accept", "dismiss", "split", "pick-other"].map((action) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("tr", { "data-status": candidate.status ?? "pending", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("input", { type: "checkbox", checked: selection.has(candidate.id), onChange: () => toggle(candidate.id), "aria-label": `Select candidate ${candidate.id}` }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "uix-match-review__confidence", children: candidate.confidence == null ? "Not scored" : `${Math.round(candidate.confidence * 100)}%` }) }),
+          fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("td", { children: field.render?.(candidate.record[field.id], candidate.record) ?? valueText(candidate.record[field.id]) }, field.id)),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StatusPill, { tone: resolved ? "success" : "warning", children: resolved ? candidate.decision ?? "Resolved" : "Pending" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uix-match-review__actions", children: ["accept", "dismiss", "split", "pick-other"].map((action) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
             "button",
             {
               type: "button",
@@ -4169,12 +5507,12 @@ function MatchReview({
         ] }, candidate.id);
       }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
   ] });
 }
 
 // src/components/MetricInput.tsx
-var import_react35 = require("react");
+var import_react43 = require("react");
 
 // src/metric-model.ts
 function decimals(value) {
@@ -4199,7 +5537,7 @@ function parseMetricValue(value) {
 }
 
 // src/components/MetricInput.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var defaultMetricFormat = (input) => input == null ? "" : String(input);
 function MetricInput({
   value,
@@ -4218,11 +5556,11 @@ function MetricInput({
   className,
   id: providedId
 }) {
-  const generatedId = (0, import_react35.useId)();
+  const generatedId = (0, import_react43.useId)();
   const id = providedId ?? generatedId;
   const errorId = `${id}-error`;
-  const [text, setText] = (0, import_react35.useState)(() => format(value));
-  (0, import_react35.useEffect)(() => setText(format(value)), [value, format]);
+  const [text, setText] = (0, import_react43.useState)(() => format(value));
+  (0, import_react43.useEffect)(() => setText(format(value)), [value, format]);
   const commit = (input) => {
     const parsed = parse(input);
     if (input.trim() === "" || parsed !== null) {
@@ -4248,10 +5586,10 @@ function MetricInput({
     const parsed = parse(event.currentTarget.value);
     setText(parsed === null && event.currentTarget.value.trim() !== "" ? format(value) : format(parsed));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("label", { className: "uix-field__label", htmlFor: id, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uix-metric-input__control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("label", { className: "uix-field__label", htmlFor: id, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uix-metric-input__control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         Input,
         {
           id,
@@ -4270,22 +5608,22 @@ function MetricInput({
           readOnly
         }
       ),
-      unit && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "uix-metric-input__unit", "aria-hidden": "true", children: unit }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "uix-metric-input__steps", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: "+" }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: "\u2212" })
+      unit && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "uix-metric-input__unit", "aria-hidden": "true", children: unit }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "uix-metric-input__steps", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: "+" }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: "\u2212" })
       ] })
     ] }),
-    unit && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "uix-visually-hidden", children: [
+    unit && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "uix-visually-hidden", children: [
       "Unit: ",
       unit
     ] }),
-    invalid && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { id: errorId, className: "uix-field__error", children: errorMessage })
+    invalid && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { id: errorId, className: "uix-field__error", children: errorMessage })
   ] });
 }
 
 // src/components/LicensePositionBar.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var defaultCapacityFormat = (value) => new Intl.NumberFormat().format(value);
 function LicensePositionBar({
   consumed,
@@ -4306,18 +5644,18 @@ function LicensePositionBar({
   const percent = safeEntitled === 0 ? safeConsumed > 0 ? 100 : 0 : safeConsumed / safeEntitled * 100;
   const format = (value) => `${formatValue(value)}${unit ? ` ${unit}` : ""}`;
   const summary = `${consumedLabel}: ${format(safeConsumed)}. ${entitledLabel}: ${format(safeEntitled)}. ${over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}`}.`;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cx("uix-license-position", over > 0 && "uix-license-position--over", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uix-license-position__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "uix-license-position__value", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: cx("uix-license-position", over > 0 && "uix-license-position--over", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-license-position__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { className: "uix-license-position__value", children: [
         format(safeConsumed),
         " / ",
         format(safeEntitled)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StatusPill, { tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", children: over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}` })
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(StatusPill, { tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", children: over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}` })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uix-license-position__track", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Meter, { value: Math.min(100, percent), tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", "aria-label": summary, "aria-valuetext": summary }),
-      over > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-license-position__track", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Meter, { value: Math.min(100, percent), tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", "aria-label": summary, "aria-valuetext": summary }),
+      over > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         "span",
         {
           className: "uix-license-position__overflow",
@@ -4326,12 +5664,12 @@ function LicensePositionBar({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "uix-visually-hidden", children: summary })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "uix-visually-hidden", children: summary })
   ] });
 }
 
 // src/components/BrandProfiles.tsx
-var import_react37 = require("react");
+var import_react45 = require("react");
 
 // src/color-model.ts
 var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
@@ -4400,8 +5738,8 @@ function meetsContrast(background, foreground, minimum = 4.5) {
 }
 
 // src/components/ColorPicker.tsx
-var import_react36 = require("react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_react44 = require("react");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var EMPTY_COLORS = [];
 function ColorPicker({
   value,
@@ -4414,17 +5752,17 @@ function ColorPicker({
   disabled,
   className
 }) {
-  const id = (0, import_react36.useId)();
-  const triggerRef = (0, import_react36.useRef)(null);
-  const dialogRef = (0, import_react36.useRef)(null);
-  const [open, setOpen] = (0, import_react36.useState)(false);
+  const id = (0, import_react44.useId)();
+  const triggerRef = (0, import_react44.useRef)(null);
+  const dialogRef = (0, import_react44.useRef)(null);
+  const [open, setOpen] = (0, import_react44.useState)(false);
   const normalized = normalizeHex(value) ?? "#000000";
-  const [hexText, setHexText] = (0, import_react36.useState)(normalized);
-  const hsv = (0, import_react36.useMemo)(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
+  const [hexText, setHexText] = (0, import_react44.useState)(normalized);
+  const hsv = (0, import_react44.useMemo)(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
   const ratio = contrastRatio(normalized, foreground) ?? 0;
   const passes = ratio >= minimumContrast;
-  (0, import_react36.useEffect)(() => setHexText(normalized), [normalized]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react44.useEffect)(() => setHexText(normalized), [normalized]);
+  (0, import_react44.useEffect)(() => {
     if (!open) return;
     const dialog = dialogRef.current;
     dialog?.querySelector("input,button")?.focus();
@@ -4467,8 +5805,8 @@ function ColorPicker({
     if (next) onChange(next);
   };
   const sampleStyle = { backgroundColor: normalized };
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cx("uix-color-picker", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cx("uix-color-picker", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -4480,12 +5818,12 @@ function ColorPicker({
         onClick: () => setOpen((current) => !current),
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "uix-color-picker__swatch", style: sampleStyle, "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: normalized })
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "uix-color-picker__swatch", style: sampleStyle, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: normalized })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "div",
       {
         ref: dialogRef,
@@ -4496,57 +5834,57 @@ function ColorPicker({
         className: "uix-color-picker__popover",
         onKeyDown: onDialogKeyDown,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { style: { color: foreground }, children: "Aa" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__range", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { style: { color: foreground }, children: "Aa" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("label", { className: "uix-color-picker__range", children: [
             "Hue ",
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
               Math.round(hsv.h),
               "\xB0"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__range", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("label", { className: "uix-color-picker__range", children: [
             "Saturation ",
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
               Math.round(hsv.s * 100),
               "%"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__range", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("label", { className: "uix-color-picker__range", children: [
             "Brightness ",
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
               Math.round(hsv.v * 100),
               "%"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__hex", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("label", { className: "uix-color-picker__hex", children: [
             "Hex",
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "uix-color-picker__hex-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { className: "uix-input", value: hexText, onChange: (event) => setHexText(event.currentTarget.value), onBlur: commitHex, onKeyDown: (event) => {
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { className: "uix-color-picker__hex-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("input", { className: "uix-input", value: hexText, onChange: (event) => setHexText(event.currentTarget.value), onBlur: commitHex, onKeyDown: (event) => {
                 if (event.key === "Enter") commitHex();
               }, "aria-invalid": !normalizeHex(hexText) }),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: "Set" })
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: "Set" })
             ] })
           ] }),
-          (presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uix-color-picker__palettes", children: [
-            presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("fieldset", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("legend", { children: "Presets" }),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use preset ${color}` }, color)) })
+          (presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "uix-color-picker__palettes", children: [
+            presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("fieldset", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("legend", { children: "Presets" }),
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { children: presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use preset ${color}` }, color)) })
             ] }),
-            recent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("fieldset", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("legend", { children: "Recent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: recent.map((color) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use recent color ${color}` }, color)) })
+            recent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("fieldset", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("legend", { children: "Recent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { children: recent.map((color) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use recent color ${color}` }, color)) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("p", { className: cx("uix-color-picker__contrast", passes ? "uix-color-picker__contrast--pass" : "uix-color-picker__contrast--fail"), role: "status", "aria-live": "polite", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: cx("uix-color-picker__contrast", passes ? "uix-color-picker__contrast--pass" : "uix-color-picker__contrast--fail"), role: "status", "aria-live": "polite", children: [
             "Contrast ",
             ratio.toFixed(2),
             ":1 \u2014 ",
             passes ? `passes WCAG AA (${minimumContrast}:1)` : `does not meet WCAG AA (${minimumContrast}:1)`
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: "Done" })
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: "Done" })
         ]
       }
     )
@@ -4554,7 +5892,7 @@ function ColorPicker({
 }
 
 // src/components/BrandProfiles.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var PROFILE_PROPERTIES = {
   brand: "--uix-brand",
   brandForeground: "--uix-brand-fg",
@@ -4623,7 +5961,7 @@ function BrandProfileEditor({
   colorPresets = EMPTY_COLORS2,
   className
 }) {
-  const [announcement, setAnnouncement] = (0, import_react37.useState)("");
+  const [announcement, setAnnouncement] = (0, import_react45.useState)("");
   const update = (patch) => onChange({ ...value, ...patch });
   const apply = () => {
     if (applyTarget !== null) applyBrandProfile(value, applyTarget);
@@ -4640,54 +5978,54 @@ function BrandProfileEditor({
     ...value.typography?.sans ? { "--uix-font-sans": value.typography.sans } : {},
     ...value.typography?.heading ? { "--uix-font-heading": value.typography.heading } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("section", { className: cx("uix-brand-profiles", className), "aria-label": "Brand profile editor", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__form", children: [
-      profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("section", { className: cx("uix-brand-profiles", className), "aria-label": "Brand profile editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uix-brand-profiles__form", children: [
+      profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { className: "uix-field__label", children: [
         "Profile",
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("select", { className: "uix-select", value: value.id, onChange: (event) => {
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("select", { className: "uix-select", value: value.id, onChange: (event) => {
           const selected = profiles.find((profile) => profile.id === event.currentTarget.value);
           if (selected) onSelectProfile?.(selected);
-        }, children: profiles.map((profile) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("option", { value: profile.id, children: profile.name }, profile.id)) })
+        }, children: profiles.map((profile) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("option", { value: profile.id, children: profile.name }, profile.id)) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { className: "uix-field__label", children: [
         "Name",
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__colors", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uix-brand-profiles__colors", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { children: [
           "Brand",
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ColorPicker, { label: "Brand color", value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ColorPicker, { label: "Brand color", value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { children: [
           "On brand",
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ColorPicker, { label: "Brand foreground color", value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ColorPicker, { label: "Brand foreground color", value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { className: "uix-field__label", children: [
         "Body font",
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { className: "uix-field__label", children: [
         "Heading font",
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
         "Logo file",
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { type: "file", accept: "image/*", onChange: onFile })
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("input", { type: "file", accept: "image/*", onChange: onFile })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: "Apply profile" }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: "Apply profile" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": `Live preview of ${value.name}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__preview-header", children: [
-        value.logo ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "uix-brand-profiles__logo-placeholder", children: "Logo" }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("strong", { children: value.name || "Brand preview" })
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": `Live preview of ${value.name}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uix-brand-profiles__preview-header", children: [
+        value.logo ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "uix-brand-profiles__logo-placeholder", children: "Logo" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("strong", { children: value.name || "Brand preview" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__preview-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { children: "Readable, serializable branding" }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { children: "Accent, links, rings, and muted states continue through the existing UIx token chain." }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", children: "Primary action" }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("a", { href: "#brand-profile-preview", children: "Preview link" })
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uix-brand-profiles__preview-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("h3", { children: "Readable, serializable branding" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { children: "Accent, links, rings, and muted states continue through the existing UIx token chain." }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", children: "Primary action" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("a", { href: "#brand-profile-preview", children: "Preview link" })
       ] })
     ] })
   ] });
@@ -4695,7 +6033,7 @@ function BrandProfileEditor({
 var BrandProfiles = BrandProfileEditor;
 
 // src/components/DiffViewer.tsx
-var import_react38 = require("react");
+var import_react46 = require("react");
 
 // src/diff-model.ts
 function isJsonObject(value) {
@@ -4746,7 +6084,7 @@ function summarizeDiff(entries, resolutions = {}) {
 }
 
 // src/components/DiffViewer.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var GROUPS = [
   { kind: "conflicted", label: "Conflicted" },
   { kind: "changed", label: "Changed" },
@@ -4765,65 +6103,65 @@ function DiffViewer({
   labels = DEFAULT_LABELS,
   className
 }) {
-  const id = (0, import_react38.useId)();
-  const entries = (0, import_react38.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
-  const [internalResolutions, setInternalResolutions] = (0, import_react38.useState)({});
+  const id = (0, import_react46.useId)();
+  const entries = (0, import_react46.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
+  const [internalResolutions, setInternalResolutions] = (0, import_react46.useState)({});
   const resolutions = controlledResolutions ?? internalResolutions;
   const summary = summarizeDiff(entries, resolutions);
   const resolve2 = (path, resolution) => {
     if (controlledResolutions === void 0) setInternalResolutions((currentState) => ({ ...currentState, [path]: resolution }));
     onResolutionChange?.(path, resolution);
   };
-  if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { className: cx("uix-diff-viewer uix-diff-viewer--empty", className), "aria-label": "Configuration differences", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h3", { children: "No differences" }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { children: "Base, current, and incoming values are aligned." })
+  if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("section", { className: cx("uix-diff-viewer uix-diff-viewer--empty", className), "aria-label": "Configuration differences", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("h3", { children: "No differences" }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { children: "Base, current, and incoming values are aligned." })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": "Configuration differences", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "uix-diff-viewer__summary", "aria-label": "Difference summary", children: [
-      GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("b", { children: summary[group.kind] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": "Configuration differences", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uix-diff-viewer__summary", "aria-label": "Difference summary", children: [
+      GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("b", { children: summary[group.kind] }),
         " ",
         group.label.toLowerCase()
       ] }, group.kind)),
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("b", { children: summary.resolved }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("b", { children: summary.resolved }),
         " resolved"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("b", { children: summary.pending }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("b", { children: summary.pending }),
         " pending"
       ] })
     ] }),
     GROUPS.map((group) => {
       const grouped = entries.filter((entry) => entry.kind === group.kind);
       if (!grouped.length) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { className: "uix-diff-viewer__group", "aria-labelledby": `${id}-${group.kind}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("h3", { id: `${id}-${group.kind}`, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("section", { className: "uix-diff-viewer__group", "aria-labelledby": `${id}-${group.kind}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("h3", { id: `${id}-${group.kind}`, children: [
           group.label,
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: grouped.length })
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: grouped.length })
         ] }),
         grouped.map((entry) => {
           const resolution = resolutions[entry.path] ?? "pending";
-          return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("summary", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("code", { children: entry.path }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolution })
+          return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("summary", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("code", { children: entry.path }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolution })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { role: "region", "aria-label": `${labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}`} value for ${entry.path}`, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("strong", { children: labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}` }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("pre", { children: renderValue(entry[version]) })
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { role: "region", "aria-label": `${labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}`} value for ${entry.path}`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("strong", { children: labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}` }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("pre", { children: renderValue(entry[version]) })
             ] }, version)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "uix-diff-viewer__actions", "aria-label": `Resolve ${entry.path}`, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", "aria-pressed": resolution === "accept", onClick: () => resolve2(entry.path, "accept"), children: "Accept incoming" }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", "aria-pressed": resolution === "skip", onClick: () => resolve2(entry.path, "skip"), children: "Keep current" }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", "aria-pressed": resolution === "pending", onClick: () => resolve2(entry.path, "pending"), children: "Mark pending" })
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uix-diff-viewer__actions", "aria-label": `Resolve ${entry.path}`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", "aria-pressed": resolution === "accept", onClick: () => resolve2(entry.path, "accept"), children: "Accept incoming" }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", "aria-pressed": resolution === "skip", onClick: () => resolve2(entry.path, "skip"), children: "Keep current" }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", "aria-pressed": resolution === "pending", onClick: () => resolve2(entry.path, "pending"), children: "Mark pending" })
             ] })
           ] }, entry.path);
         })
       ] }, group.kind);
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: [
       summary.resolved,
       " of ",
       entries.length,
@@ -4863,6 +6201,7 @@ function DiffViewer({
   ConfirmDialog,
   ContentList,
   ContentListItem,
+  DEFAULT_RELATIONSHIP_GRAPH_LABELS,
   DateRangePicker,
   DescriptionItem,
   DescriptionList,
@@ -4947,6 +6286,7 @@ function DiffViewer({
   SubNavItem,
   Switch,
   Tab,
+  TabPanel,
   Table,
   TableWrap,
   Tabs,
@@ -4973,6 +6313,8 @@ function DiffViewer({
   buildThreeWayDiff,
   clampMetricValue,
   clampWidth,
+  classifyLayeredEdges,
+  clusterIdFor,
   computePosition,
   contrastRatio,
   cx,
@@ -4987,6 +6329,8 @@ function DiffViewer({
   isDateInRange,
   isDateUnavailable,
   isRuleGroup,
+  layeredNeighbor,
+  layoutLayeredGraph,
   layoutRelationshipGraph,
   mapRuleGroup,
   matchFilter,
@@ -5028,6 +6372,7 @@ function DiffViewer({
   useVirtualRows,
   validateRuleDefinition,
   virtualWindow,
+  wrapEdgeLabel,
   zonedDateKey,
   zonedDateSpan
 });