@tensor_1/react 2.10.0 → 2.12.0

package/dist/index.cjs

@@ -103,7 +103,6 @@ __export(src_exports, {
   SubNavItem: () => SubNavItem,
   Switch: () => Switch,
   Tab: () => Tab,
-  TabPanel: () => TabPanel,
   Table: () => Table,
   TableWrap: () => TableWrap,
   Tabs: () => Tabs,
@@ -141,6 +140,7 @@ __export(src_exports, {
   useAnchoredPosition: () => useAnchoredPosition,
   useDialog: () => useDialog,
   useTable: () => useTable,
+  useVirtualRows: () => useVirtualRows,
   virtualWindow: () => virtualWindow
 });
 module.exports = __toCommonJS(src_exports);
@@ -182,10 +182,8 @@ function unlockBodyScroll() {
     saved = null;
   }
 }
-function useDialog(open, onClose) {
+function useDialog(open) {
   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) {
@@ -194,21 +192,8 @@ function useDialog(open, onClose) {
     }
     if (!el.open) el.showModal();
     lockBodyScroll();
-    let locked = true;
-    const handleClose = () => {
-      if (locked) {
-        locked = false;
-        unlockBodyScroll();
-      }
-      onCloseRef.current?.();
-    };
-    el.addEventListener("close", handleClose);
     return () => {
-      el.removeEventListener("close", handleClose);
-      if (locked) {
-        locked = false;
-        unlockBodyScroll();
-      }
+      unlockBodyScroll();
       if (el.open) el.close();
     };
   }, [open]);
@@ -219,22 +204,23 @@ function useDialog(open, onClose) {
 var import_react2 = require("react");
 
 // src/table-engine.ts
+var stringCollator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
 function compare(a, b) {
   if (a == null && b == null) return 0;
   if (a == null) return -1;
   if (b == null) return 1;
   if (typeof a === "number" && typeof b === "number") return a - b;
-  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+  return stringCollator.compare(String(a), String(b));
 }
 function multiSort(rows, keys) {
   if (!keys.length) return rows.slice();
-  return rows.map((row, i) => ({ row, i })).sort((x, y) => {
+  return rows.slice().sort((a, b) => {
     for (const k of keys) {
-      const c = compare(x.row[k.field], y.row[k.field]);
+      const c = compare(a[k.field], b[k.field]);
       if (c !== 0) return k.dir === "ascending" ? c : -c;
     }
-    return x.i - y.i;
-  }).map((w) => w.row);
+    return 0;
+  });
 }
 function nextSortDir(current) {
   if (current === "ascending") return "descending";
@@ -434,7 +420,8 @@ function toggleId(set, id) {
   return next;
 }
 function selectAllState(selected, pageIds) {
-  const on = pageIds.filter((id) => selected.has(id)).length;
+  let on = 0;
+  for (const id of pageIds) if (selected.has(id)) on += 1;
   if (on === 0) return "none";
   return on === pageIds.length ? "all" : "some";
 }
@@ -460,39 +447,25 @@ function useTable(data, options = {}) {
   const [query, setQuery] = (0, import_react2.useState)(() => options.initialQuery ?? "");
   const [selected, setSelected] = (0, import_react2.useState)(() => /* @__PURE__ */ new Set());
   const [pinned, setPinned] = (0, import_react2.useState)(() => new Set(options.initialPinned ?? []));
-  const rows = (0, import_react2.useMemo)(() => {
-    const filtered = applyFilters(data, filters);
-    const searched = searchRows(filtered, query, searchFields);
-    const sorted = multiSort(searched, sort);
-    return mergePinned(data, sorted, pinned, idField);
-  }, [data, filters, query, searchFields, sort, pinned, idField]);
+  const visibleRows = (0, import_react2.useMemo)(() => {
+    const filtered = filters.length ? applyFilters(data, filters) : data;
+    const searched = query.trim() ? searchRows(filtered, query, searchFields) : filtered;
+    return sort.length ? multiSort(searched, sort) : searched;
+  }, [data, filters, query, searchFields, sort]);
+  const rows = (0, import_react2.useMemo)(
+    () => pinned.size ? mergePinned(data, visibleRows, pinned, idField) : visibleRows.slice(),
+    [data, visibleRows, pinned, idField]
+  );
   const pageIds = (0, import_react2.useMemo)(() => rows.map((r) => String(r[idField])), [rows, idField]);
   const selectAll = selectAllState(selected, pageIds);
   const doToggleSort = (0, import_react2.useCallback)((field, additive = false) => {
     setSort((keys) => toggleSort(keys, field, additive));
   }, []);
   const toggleRow = (0, import_react2.useCallback)((id) => setSelected((s) => toggleId(s, id)), []);
+  const isSelected = (0, import_react2.useCallback)((id) => selected.has(id), [selected]);
   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) => {
@@ -509,12 +482,11 @@ function useTable(data, options = {}) {
     selected,
     pinned,
     selectAll,
-    announcement,
     toggleSort: doToggleSort,
     setSort,
     setFilters,
     setQuery,
-    isSelected: (id) => selected.has(id),
+    isSelected,
     toggleRow,
     toggleAllRows,
     clearSelection,
@@ -525,8 +497,55 @@ function useTable(data, options = {}) {
   };
 }
 
-// src/hooks/useAnchoredPosition.ts
+// src/hooks/useVirtualRows.ts
 var import_react3 = require("react");
+function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100 }) {
+  const containerRef = (0, import_react3.useRef)(null);
+  const [viewport, setViewport] = (0, import_react3.useState)({ scrollTop: 0, height: 0 });
+  (0, import_react3.useLayoutEffect)(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    let frame = 0;
+    const commitMeasurement = () => {
+      const next = { scrollTop: element.scrollTop, height: element.clientHeight };
+      setViewport((current) => current.scrollTop === next.scrollTop && current.height === next.height ? current : next);
+    };
+    const measure = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        commitMeasurement();
+      });
+    };
+    commitMeasurement();
+    element.addEventListener("scroll", measure, { passive: true });
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => {
+      element.removeEventListener("scroll", measure);
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
+  const enabled = viewport.height > 0 && shouldVirtualize(rows.length, threshold);
+  const window2 = (0, import_react3.useMemo)(
+    () => enabled ? virtualWindow(viewport.scrollTop, viewport.height, rowHeight, rows.length, overscan) : { start: 0, end: rows.length, padTop: 0, padBottom: 0, total: rows.length * rowHeight },
+    [enabled, overscan, rowHeight, rows.length, viewport.height, viewport.scrollTop]
+  );
+  const visibleRows = (0, import_react3.useMemo)(() => rows.slice(window2.start, window2.end), [rows, window2.start, window2.end]);
+  return {
+    containerRef,
+    rows: visibleRows,
+    startIndex: window2.start,
+    padTop: window2.padTop,
+    padBottom: window2.padBottom,
+    totalHeight: window2.total,
+    virtualized: enabled
+  };
+}
+
+// src/hooks/useAnchoredPosition.ts
+var import_react4 = require("react");
 
 // src/overlay-position.ts
 var OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
@@ -590,12 +609,12 @@ function computePosition(anchor, floating, viewport, options = {}) {
 }
 
 // src/hooks/useAnchoredPosition.ts
-var useIsomorphicLayoutEffect = typeof document !== "undefined" ? import_react3.useLayoutEffect : import_react3.useEffect;
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? import_react4.useLayoutEffect : import_react4.useEffect;
 var resolve = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
 function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8 }) {
-  const opts = (0, import_react3.useRef)({ placement, offset, padding });
+  const opts = (0, import_react4.useRef)({ placement, offset, padding });
   opts.current = { placement, offset, padding };
-  const reposition = (0, import_react3.useCallback)(() => {
+  const reposition = (0, import_react4.useCallback)(() => {
     const anchorEl = resolve(anchor);
     const floating = floatingRef.current;
     if (!anchorEl || !floating) return;
@@ -630,42 +649,26 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
 }
 
 // src/components/Button.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var warnedIconButton = false;
-var Button = (0, import_react4.forwardRef)(
-  ({ 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.");
+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
     }
-    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 }) {
@@ -673,9 +676,9 @@ function ButtonGroup({ children, className }) {
 }
 
 // src/components/Input.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Input = (0, import_react5.forwardRef)(
+var Input = (0, import_react6.forwardRef)(
   ({ size = "md", invalid, valid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "input",
     {
@@ -688,22 +691,7 @@ var Input = (0, import_react5.forwardRef)(
   )
 );
 Input.displayName = "Input";
-function InputGroup({
-  children,
-  leadingIcon,
-  trailingIcon,
-  className,
-  id,
-  "aria-describedby": describedBy,
-  "aria-invalid": invalid,
-  "aria-required": required
-}) {
-  const control = (0, import_react5.isValidElement)(children) && (id ?? describedBy ?? invalid ?? required) != null ? (0, import_react5.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;
+function InputGroup({ children, leadingIcon, trailingIcon, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -714,18 +702,18 @@ function InputGroup({
         className
       ),
       children: [
-        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 })
+        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 })
       ]
     }
   );
 }
 
 // src/components/Textarea.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Textarea = (0, import_react6.forwardRef)(
+var Textarea = (0, import_react7.forwardRef)(
   ({ invalid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "textarea",
     {
@@ -739,9 +727,9 @@ var Textarea = (0, import_react6.forwardRef)(
 Textarea.displayName = "Textarea";
 
 // src/components/Select.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Select = (0, import_react7.forwardRef)(
+var Select = (0, import_react8.forwardRef)(
   ({ size = "md", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "select",
     {
@@ -754,14 +742,14 @@ var Select = (0, import_react7.forwardRef)(
 Select.displayName = "Select";
 
 // src/components/Checkbox.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "1.5,6 4.5,9 10.5,3" }) });
 var IndeterminateIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "2", y: "5", width: "8", height: "2", rx: "1", fill: "currentColor" }) });
-var Checkbox = (0, import_react8.forwardRef)(
+var Checkbox = (0, import_react9.forwardRef)(
   ({ label, indeterminate, className, ...props }, forwardedRef) => {
-    const innerRef = (0, import_react8.useRef)(null);
-    (0, import_react8.useEffect)(() => {
+    const innerRef = (0, import_react9.useRef)(null);
+    (0, import_react9.useEffect)(() => {
       const el = innerRef.current;
       if (el) el.indeterminate = !!indeterminate;
     }, [indeterminate]);
@@ -786,9 +774,9 @@ var Checkbox = (0, import_react8.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Radio.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Radio = (0, import_react9.forwardRef)(
+var Radio = (0, import_react10.forwardRef)(
   ({ label, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: cx("uix-radio", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "radio", ref, ...props }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uix-radio__dot" }),
@@ -796,18 +784,14 @@ var Radio = (0, import_react9.forwardRef)(
   ] })
 );
 Radio.displayName = "Radio";
-function RadioGroup({ children, className, label }) {
-  if (label == null) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cx("uix-radio-group", className), children });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("fieldset", { className: cx("uix-radio-group", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { className: "uix-radio-group__legend", children: label }),
-    children
-  ] });
+function RadioGroup({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cx("uix-radio-group", className), children });
 }
 
 // src/components/Switch.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Switch = (0, import_react10.forwardRef)(
+var Switch = (0, import_react11.forwardRef)(
   ({ label, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: cx("uix-switch", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", role: "switch", ref, ...props }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "uix-switch__track" }),
@@ -817,36 +801,31 @@ var Switch = (0, import_react10.forwardRef)(
 Switch.displayName = "Switch";
 
 // src/components/Field.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function Field({ label, hint, error, success, required, children, className, htmlFor }) {
-  const uid = (0, import_react11.useId)();
+  const uid = (0, import_react12.useId)();
   const msgId = `${uid}-msg`;
   const describedBy = error || success || hint ? msgId : void 0;
-  const controlId = (0, import_react11.isValidElement)(children) ? children.props.id ?? `${uid}-ctl` : void 0;
-  const control = (0, import_react11.isValidElement)(children) ? (0, import_react11.cloneElement)(children, {
-    id: controlId,
+  const control = (0, import_react12.isValidElement)(children) ? (0, import_react12.cloneElement)(children, {
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0,
-    "aria-invalid": error ? true : children.props["aria-invalid"],
-    "aria-required": children.props["aria-required"] ?? (required || void 0)
+    "aria-invalid": error ? true : children.props["aria-invalid"]
   }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("uix-field", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "uix-field__label", htmlFor: htmlFor ?? controlId, "data-required": required || void 0, children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "uix-field__label", htmlFor, "data-required": required || void 0, children: label }),
     control,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-field__success", role: "status", children: success }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-field__hint", children: hint }) : null })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-field__success", children: success }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-field__hint", children: hint }) : null })
   ] });
 }
 
 // src/components/Modal.tsx
-var import_react12 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Modal({ open, onClose, title, children, footer, className, ...rest }) {
-  const ref = useDialog(open, onClose);
-  const titleId = (0, import_react12.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("dialog", { ref, className: cx("uix-dialog", className), "aria-labelledby": title ? titleId : void 0, ...rest, children: [
+function Modal({ open, onClose, title, children, footer, className, style }) {
+  const ref = useDialog(open);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("dialog", { ref, className: cx("uix-dialog", className), style, onClose, children: [
     (title != null || onClose) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "uix-dialog__header", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "uix-dialog__title", id: titleId, children: title }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "uix-dialog__title", children: title }),
       onClose && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "uix-dialog__close", onClick: onClose, "aria-label": "Close dialog", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon, {}) })
     ] }),
     children != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "uix-dialog__body", children }),
@@ -855,15 +834,13 @@ function Modal({ open, onClose, title, children, footer, className, ...rest }) {
 }
 
 // src/components/Drawer.tsx
-var import_react13 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var CloseIcon2 = () => /* @__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 Drawer({ open, onClose, title, children, footer, className, ...rest }) {
-  const ref = useDialog(open, onClose);
-  const titleId = (0, import_react13.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, children: [
+function Drawer({ open, onClose, title, children, footer, className }) {
+  const ref = useDialog(open);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("dialog", { ref, className: cx("uix-drawer", className), onClose, children: [
     (title != null || onClose) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "uix-drawer__header", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { id: titleId, style: { fontWeight: 600, fontSize: "var(--uix-text-h3)", fontFamily: "inherit", letterSpacing: "inherit", lineHeight: "inherit" }, children: title }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { fontWeight: 600, fontSize: "var(--uix-text-h3)" }, children: title }),
       onClose && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
@@ -880,30 +857,27 @@ function Drawer({ open, onClose, title, children, footer, className, ...rest })
 }
 
 // src/components/Peek.tsx
-var import_react14 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var CloseIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) });
 var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("path", { d: "M2 8l4-4 4 4" }) });
 var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("path", { d: "M2 4l4 4 4-4" }) });
-function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className, onClick, ...rest }) {
-  const ref = useDialog(open, onClose);
+function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className }) {
+  const ref = useDialog(open);
   const hasNav = onNavPrev != null || onNavNext != null;
-  const titleId = (0, import_react14.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_runtime11.jsxs)("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: onBackdropClick, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("dialog", { ref, className: cx("uix-peek", className), onClose, onClick: onBackdropClick, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uix-peek__header", children: [
       hasNav && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uix-peek__nav", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": "Previous record", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronUp, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "uix-peek__navbtn", onClick: () => onNavNext?.(), "aria-disabled": onNavNext ? void 0 : true, "aria-label": "Next record", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronDown, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "uix-peek__navbtn", onClick: onNavPrev, disabled: !onNavPrev, "aria-label": "Previous record", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronUp, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "uix-peek__navbtn", onClick: onNavNext, disabled: !onNavNext, "aria-label": "Next record", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronDown, {}) })
       ] }),
-      title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: "uix-peek__title", id: titleId, children: title }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "uix-peek__title", children: title }),
       hint && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "uix-peek__hint", children: hint }),
       onClose && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "uix-peek__close", onClick: onClose, "aria-label": "Close preview", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseIcon3, {}) })
     ] }),
@@ -914,12 +888,12 @@ function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hi
 
 // src/components/Card.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-function Card({ title, titleAs: TitleTag = "div", subtitle, headerAction, footer, children, className, ...props }) {
+function Card({ title, subtitle, headerAction, footer, children, className, ...props }) {
   const hasHeader = title != null || subtitle != null || headerAction != null;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cx("uix-card", className), ...props, children: [
     hasHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uix-card__header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { flex: 1 }, children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TitleTag, { className: "uix-card__title", children: title }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uix-card__title", children: title }),
         subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uix-card__subtitle", children: subtitle })
       ] }),
       headerAction
@@ -931,11 +905,11 @@ function Card({ title, titleAs: TitleTag = "div", subtitle, headerAction, footer
 
 // src/components/PageHeader.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function PageHeader({ eyebrow, title, subtitle, actions, as: TitleTag = "h1", className, ...props }) {
+function PageHeader({ eyebrow, title, subtitle, actions, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("header", { className: cx("uix-page-header", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "uix-page-header__titles", children: [
       eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uix-page-header__eyebrow", children: eyebrow }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TitleTag, { className: "uix-page-header__title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h1", { className: "uix-page-header__title", children: title }),
       subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "uix-page-header__subtitle", children: subtitle })
     ] }),
     actions != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uix-page-header__actions", children: actions })
@@ -947,7 +921,7 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 function DetailLayout({ side, children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cx("uix-detail", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-detail__main", children }),
-    side != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("aside", { className: "uix-detail__side", children: side })
+    side != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-detail__side", children: side })
   ] });
 }
 
@@ -970,11 +944,11 @@ function ListItem({ title, meta, trail, leading, children, className, ...props }
 }
 
 // src/components/DescriptionList.tsx
-var import_react15 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function DescriptionList({ items, children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("dl", { className: cx("uix-dl", className), ...props, children: [
-    items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react15.Fragment, { children: [
+    items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react13.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dt", { children: item.term }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dd", { children: item.description })
     ] }, item.id ?? i)),
@@ -989,80 +963,22 @@ function DescriptionItem({ term, children }) {
 }
 
 // src/components/Tabs.tsx
-var import_react16 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TabsCtx = (0, import_react16.createContext)({});
+var TabsCtx = (0, import_react14.createContext)({});
 function Tabs({ variant = "line", value, onChange, children, className }) {
-  const baseId = (0, import_react16.useId)();
-  const listRef = (0, import_react16.useRef)(null);
-  const kids = import_react16.Children.toArray(children);
-  const panels = kids.filter((k) => (0, import_react16.isValidElement)(k) && k.type === TabPanel);
-  const tabs = kids.filter((k) => !((0, import_react16.isValidElement)(k) && k.type === TabPanel));
-  (0, import_react16.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_runtime17.jsxs)(TabsCtx.Provider, { value: { value, onChange, baseId }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "div",
-      {
-        ref: listRef,
-        role: "tablist",
-        className: cx("uix-tabs", `uix-tabs--${variant}`, className),
-        onKeyDown,
-        children: tabs
-      }
-    ),
-    panels
-  ] });
+  const contextValue = (0, import_react14.useMemo)(() => ({ value, onChange }), [value, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsCtx.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
 }
 function Tab({ value, children, disabled, className, onClick, ...props }) {
-  const ctx = (0, import_react16.useContext)(TabsCtx);
+  const ctx = (0, import_react14.useContext)(TabsCtx);
   const selected = ctx.value === value;
   return /* @__PURE__ */ (0, import_jsx_runtime17.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);
@@ -1073,24 +989,9 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
     }
   );
 }
-function TabPanel({ value, children, ...props }) {
-  const ctx = (0, import_react16.useContext)(TabsCtx);
-  if (ctx.value !== value) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.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_react17 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function AppShell({
   nav,
@@ -1098,7 +999,6 @@ function AppShell({
   focus,
   onExitFocus,
   mainBleed,
-  mainId = "uix-main",
   sidebar,
   topbar,
   children,
@@ -1106,7 +1006,7 @@ function AppShell({
   ...props
 }) {
   const navState = nav ?? (collapsed ? "rail" : "full");
-  (0, import_react17.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!focus || !onExitFocus) return;
     const onKey = (e) => {
       if (e.key === "Escape") onExitFocus();
@@ -1123,10 +1023,9 @@ function AppShell({
       "data-focus": focus || void 0,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { className: "uix-skiplink", href: `#${mainId}`, children: "Skip to content" }),
         sidebar && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-shell__sidebar", children: sidebar }),
         topbar && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-shell__topbar", children: topbar }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("main", { id: mainId, tabIndex: -1, className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("main", { className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
         focus && onExitFocus && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-shell__focus-exit", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: onExitFocus, children: "Esc \xB7 Exit focus" }) })
       ]
     }
@@ -1134,7 +1033,7 @@ function AppShell({
 }
 
 // src/components/Sidebar.tsx
-var import_react18 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var ChevronIcon = () => /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsx)("path", { d: "M2 4l4 4 4-4" }) });
 function Sidebar({ collapsed, onToggle, brand, toggleIcon, children, className, ...props }) {
@@ -1188,15 +1087,13 @@ function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...p
   );
 }
 function NavGroup({ icon, label, children, defaultExpanded = true }) {
-  const [expanded, setExpanded] = (0, import_react18.useState)(defaultExpanded);
-  const panelId = (0, import_react18.useId)();
+  const [expanded, setExpanded] = (0, import_react16.useState)(defaultExpanded);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uix-navgroup", children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "button",
       {
         className: "uix-navitem uix-navgroup__trigger",
         "aria-expanded": expanded,
-        "aria-controls": panelId,
         onClick: () => setExpanded((v) => !v),
         children: [
           icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
@@ -1205,7 +1102,7 @@ function NavGroup({ icon, label, children, defaultExpanded = true }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-navgroup__panel", id: panelId, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-navgroup__panel", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children }) })
   ] });
 }
 function SubNavItem({ active, as: Tag = "a", children, className, ...props }) {
@@ -1258,7 +1155,7 @@ function StarButton({
 }
 
 // src/components/NavFavourites.tsx
-var import_react19 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   "svg",
@@ -1272,7 +1169,7 @@ var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    style: { flexShrink: 0 },
+    className: "uix-favourites__chevron",
     children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m6 9 6 6 6-6" })
   }
 );
@@ -1288,7 +1185,7 @@ var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    style: { flexShrink: 0 },
+    className: "uix-favourites__chevron",
     children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m9 18 6-6-6-6" })
   }
 );
@@ -1311,7 +1208,6 @@ var MoreIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     ]
   }
 );
-var MUTED = "color-mix(in srgb, var(--uix-text) 50%, transparent)";
 function NavFavourites({
   items,
   collapsed = false,
@@ -1322,21 +1218,20 @@ function NavFavourites({
   emptyReason,
   className
 }) {
-  const regionId = (0, import_react19.useId)();
-  const headerRef = (0, import_react19.useRef)(null);
-  const regionRef = (0, import_react19.useRef)(null);
-  const [announcement, setAnnouncement] = (0, import_react19.useState)("");
-  const focusAfterRef = (0, import_react19.useRef)(null);
-  const triggerRefs = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
-  const order = items.map((i) => i.id);
-  (0, import_react19.useEffect)(() => {
+  const regionId = (0, import_react17.useId)();
+  const headerRef = (0, import_react17.useRef)(null);
+  const regionRef = (0, import_react17.useRef)(null);
+  const focusAfterRef = (0, import_react17.useRef)(null);
+  const triggerRefs = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
+  const order = (0, import_react17.useMemo)(() => items.map((item) => item.id), [items]);
+  (0, import_react17.useEffect)(() => {
     const id = focusAfterRef.current;
     if (!id) return;
     focusAfterRef.current = null;
     const el = triggerRefs.current.get(id);
     if (el) el.focus();
     else headerRef.current?.focus();
-  }, [order.join("|")]);
+  }, [order]);
   const handleToggle = () => {
     if (!collapsed) {
       const active = document.activeElement;
@@ -1346,7 +1241,7 @@ function NavFavourites({
     }
     onToggleCollapsed?.();
   };
-  const move = (id, dir) => {
+  const move = (0, import_react17.useCallback)((id, dir) => {
     const idx = order.indexOf(id);
     const next = idx + dir;
     if (idx < 0 || next < 0 || next >= order.length) return;
@@ -1355,18 +1250,19 @@ 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);
-  };
-  const remove = (id) => {
+  }, [onReorder, order]);
+  const remove = (0, import_react17.useCallback)((id) => {
     const idx = order.indexOf(id);
     const neighbour = order[idx + 1] ?? order[idx - 1] ?? null;
     focusAfterRef.current = neighbour;
     onRemove(id);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx("uix-favourites", className), style: { marginBottom: "var(--uix-space-1)" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
+  }, [onRemove, order]);
+  const registerTrigger = (0, import_react17.useCallback)((id, element) => {
+    if (element) triggerRefs.current.set(id, element);
+    else triggerRefs.current.delete(id);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx("uix-favourites", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "button",
       {
@@ -1375,18 +1271,7 @@ function NavFavourites({
         "aria-expanded": !collapsed,
         "aria-controls": regionId,
         onClick: handleToggle,
-        className: "uix-text-eyebrow",
-        style: {
-          display: "flex",
-          width: "100%",
-          alignItems: "center",
-          gap: "6px",
-          padding: "8px 4px 4px",
-          border: 0,
-          background: "transparent",
-          cursor: "pointer",
-          color: "inherit"
-        },
+        className: "uix-favourites__heading uix-text-eyebrow",
         children: [
           collapsed ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronDownIcon, {}),
           labels.heading
@@ -1399,20 +1284,12 @@ function NavFavourites({
         ref: regionRef,
         id: regionId,
         hidden: collapsed,
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          gap: "1px",
-          listStyle: "none",
-          margin: 0,
-          padding: 0
-        },
+        className: "uix-favourites__list",
         children: items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "li",
           {
-            className: "uix-text-meta",
+            className: "uix-favourites__empty uix-text-meta",
             "data-empty-reason": emptyReason,
-            style: { padding: "6px 8px", color: MUTED },
             children: labels.empty
           }
         ) : items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -1422,10 +1299,9 @@ function NavFavourites({
             isFirst: idx === 0,
             isLast: idx === items.length - 1,
             labels,
-            onMoveUp: () => move(item.id, -1),
-            onMoveDown: () => move(item.id, 1),
-            onRemove: () => remove(item.id),
-            registerTrigger: (el) => triggerRefs.current.set(item.id, el)
+            onMove: move,
+            onRemove: remove,
+            registerTrigger
           },
           item.id
         ))
@@ -1433,28 +1309,26 @@ function NavFavourites({
     )
   ] });
 }
-function FavouriteRow({
+var FavouriteRow = (0, import_react17.memo)(function FavouriteRow2({
   item,
   isFirst,
   isLast,
   labels,
-  onMoveUp,
-  onMoveDown,
+  onMove,
   onRemove,
   registerTrigger
 }) {
-  const [open, setOpen] = (0, import_react19.useState)(false);
-  const [revealed, setRevealed] = (0, import_react19.useState)(false);
-  const menuId = (0, import_react19.useId)();
-  const triggerRef = (0, import_react19.useRef)(null);
-  const itemRefs = (0, import_react19.useRef)([]);
+  const [open, setOpen] = (0, import_react17.useState)(false);
+  const menuId = (0, import_react17.useId)();
+  const triggerRef = (0, import_react17.useRef)(null);
+  const itemRefs = (0, import_react17.useRef)([]);
   const optionsTemplate = labels.options ?? "{label} favourite options";
   const actions = [
-    ...isFirst ? [] : [{ label: labels.moveUp, onSelect: onMoveUp }],
-    ...isLast ? [] : [{ label: labels.moveDown, onSelect: onMoveDown }],
-    { label: labels.remove.replace("{label}", item.label), onSelect: onRemove }
+    ...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_react19.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (open) itemRefs.current[0]?.focus();
   }, [open]);
   const closeAndReturnFocus = () => {
@@ -1470,12 +1344,6 @@ function FavouriteRow({
     } 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();
@@ -1487,34 +1355,27 @@ function FavouriteRow({
     if (!e.altKey) return;
     if (e.key === "ArrowUp" && !isFirst) {
       e.preventDefault();
-      onMoveUp();
+      onMove(item.id, -1);
     } else if (e.key === "ArrowDown" && !isLast) {
       e.preventDefault();
-      onMoveDown();
+      onMove(item.id, 1);
     }
   };
-  const triggerVisible = revealed || open;
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: keyboard accelerators on the row; the focusable controls inside carry their own semantics.
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "li",
       {
-        style: { position: "relative", display: "flex", alignItems: "center" },
+        className: "uix-favourites__row",
         onKeyDown: onRowKeyDown,
-        onMouseEnter: () => setRevealed(true),
-        onMouseLeave: () => setRevealed(false),
-        onFocus: () => setRevealed(true),
-        onBlur: (e) => {
-          if (!e.currentTarget.contains(e.relatedTarget)) setRevealed(false);
-        },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { minWidth: 0, flex: 1 }, children: item.link }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uix-favourites__link", children: item.link }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               ref: (el) => {
                 triggerRef.current = el;
-                registerTrigger(el);
+                registerTrigger(item.id, el);
               },
               type: "button",
               "aria-haspopup": "menu",
@@ -1522,22 +1383,7 @@ function FavouriteRow({
               "aria-controls": open ? menuId : void 0,
               "aria-label": optionsTemplate.replace("{label}", item.label),
               onClick: () => setOpen((v) => !v),
-              style: {
-                marginLeft: "auto",
-                display: "inline-flex",
-                height: "20px",
-                width: "20px",
-                flexShrink: 0,
-                alignItems: "center",
-                justifyContent: "center",
-                border: 0,
-                borderRadius: "2px",
-                background: "transparent",
-                cursor: "pointer",
-                color: MUTED,
-                opacity: triggerVisible ? 1 : 0,
-                transition: "opacity var(--uix-dur-fast) var(--uix-ease-out)"
-              },
+              className: "uix-favourites__menu-trigger",
               children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MoreIcon, {})
             }
           ),
@@ -1548,7 +1394,7 @@ function FavouriteRow({
                 "aria-hidden": "true",
                 role: "presentation",
                 onClick: () => setOpen(false),
-                style: { position: "fixed", inset: 0, cursor: "default", background: "transparent", zIndex: 40 }
+                className: "uix-favourites__backdrop"
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -1556,23 +1402,8 @@ function FavouriteRow({
               {
                 id: menuId,
                 role: "menu",
-                "aria-label": optionsTemplate.replace("{label}", item.label),
                 onKeyDown: onMenuKeyDown,
-                style: {
-                  position: "absolute",
-                  right: 0,
-                  top: "calc(100% + 2px)",
-                  zIndex: 50,
-                  minWidth: "160px",
-                  overflow: "hidden",
-                  margin: 0,
-                  padding: "4px 0",
-                  listStyle: "none",
-                  borderRadius: "6px",
-                  border: "1px solid var(--uix-border)",
-                  background: "var(--uix-surface)",
-                  boxShadow: "var(--uix-shadow-popover)"
-                },
+                className: "uix-favourites__menu",
                 children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
@@ -1586,25 +1417,7 @@ function FavouriteRow({
                       setOpen(false);
                       action.onSelect();
                     },
-                    style: {
-                      display: "flex",
-                      width: "100%",
-                      alignItems: "center",
-                      padding: "6px 12px",
-                      border: 0,
-                      background: "transparent",
-                      cursor: "pointer",
-                      textAlign: "left",
-                      fontSize: "13px",
-                      color: "color-mix(in srgb, var(--uix-text) 85%, transparent)",
-                      transition: "background-color var(--uix-dur-fast) var(--uix-ease-out)"
-                    },
-                    onMouseEnter: (e) => {
-                      e.currentTarget.style.background = "var(--uix-bg-hover)";
-                    },
-                    onMouseLeave: (e) => {
-                      e.currentTarget.style.background = "transparent";
-                    },
+                    className: "uix-favourites__menu-item",
                     children: action.label
                   }
                 ) }, action.label))
@@ -1615,113 +1428,67 @@ function FavouriteRow({
       }
     )
   );
-}
+});
 
 // src/components/Alert.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function Alert({ tone, title, icon, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)("div", { className: "uix-alert__icon", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-alert__title", children: title }),
-          children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-alert__body", children })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-alert__icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-alert__title", children: title }),
+      children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-alert__body", children })
+    ] })
+  ] });
 }
 
 // src/components/Spinner.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function Spinner({ size = "md", accent, label, className, ...props }) {
+function Spinner({ size = "md", accent, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "span",
     {
       className: cx("uix-spinner", accent && "uix-spinner--accent", size === "lg" && "uix-spinner--lg", className),
       role: "status",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "uix-visually-hidden", children: label ?? "Loading\u2026" })
+      "aria-label": "Loading",
+      ...props
     }
   );
 }
 
 // src/components/Toast.tsx
-var import_react20 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var ToasterContext = (0, import_react20.createContext)(null);
 function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
   const assertive = tone === "danger";
-  const toaster = (0, import_react20.useContext)(ToasterContext);
-  const bodyRef = (0, import_react20.useRef)(null);
-  (0, import_react20.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_runtime24.jsxs)(
     "div",
     {
       className: cx("uix-toast", tone && `uix-toast--${tone}`, className),
       "data-leaving": leaving || void 0,
-      role: ownLiveRegion ? assertive ? "alert" : "status" : void 0,
-      "aria-live": ownLiveRegion ? assertive ? "assertive" : "polite" : void 0,
+      role: assertive ? "alert" : "status",
+      "aria-live": assertive ? "assertive" : "polite",
       ...props,
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "uix-toast__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "uix-toast__body", ref: bodyRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "uix-toast__body", children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "uix-toast__title", children: title }),
           message && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "uix-toast__msg", children: message })
         ] }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": "Dismiss", children: "\xD7" })
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { className: "uix-toast__close", onClick: onClose, "aria-label": "Dismiss", children: "\xD7" })
       ]
     }
   );
 }
 function Toaster({ children, className, ...props }) {
-  const [announced, setAnnounced] = (0, import_react20.useState)("");
-  const clearTimer = (0, import_react20.useRef)(null);
-  const announce = (0, import_react20.useCallback)((text) => {
-    setAnnounced((cur) => cur ? `${cur} ${text}` : text);
-    if (clearTimer.current != null) clearTimeout(clearTimer.current);
-    clearTimer.current = window.setTimeout(() => setAnnounced(""), 3e3);
-  }, []);
-  (0, import_react20.useEffect)(() => () => {
-    if (clearTimer.current != null) clearTimeout(clearTimer.current);
-  }, []);
-  const ctx = (0, import_react20.useMemo)(() => ({ announce }), [announce]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cx("uix-toaster", className), role: "region", "aria-label": "Notifications", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
-    children
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx("uix-toaster", className), ...props, children });
 }
 
 // src/components/Table.tsx
+var import_react18 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-function TableWrap({ announcement, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx("uix-table-wrap", className), ...props, children: [
-    announcement != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
-    children
-  ] });
-}
+var TableWrap = (0, import_react18.forwardRef)(function TableWrap2({ children, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cx("uix-table-wrap", className), ...props, children });
+});
 function Table({
   density = "standard",
   zebra = true,
@@ -1759,9 +1526,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 ? void 0 : onClick,
+      onClick: sortable ? onSort ?? onClick : onClick,
       ...props,
-      children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: "uix-th__sortbtn", onClick: onSort, children }) : children
+      children
     }
   );
 }
@@ -1773,7 +1540,7 @@ function Tr({ selected, pinned, className, children, ...props }) {
     "tr",
     {
       className,
-      "data-selected": selected || void 0,
+      "aria-selected": selected || void 0,
       "data-pinned": pinned || void 0,
       ...props,
       children
@@ -1796,14 +1563,13 @@ function RowActions({ children, className, ...props }) {
 function RowAction({ children, className, type = "button", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type, className: cx("uix-rowact", className), ...props, children });
 }
-function ExpandToggle({ expanded, controls, className, type = "button", ...props }) {
+function ExpandToggle({ expanded, className, type = "button", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.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_runtime25.jsx)("path", { d: "M6 4l4 4-4 4" }) })
@@ -1894,17 +1660,15 @@ function StatusPill({ tone = "neutral", treatment = "filled", dot, children, cla
 
 // src/components/Progress.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-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;
+function Progress({ value = 0, max = 100, indeterminate, className, ...props }) {
+  const pct = Math.max(0, Math.min(100, value / (max || 100) * 100));
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       role: "progressbar",
       "aria-valuemin": 0,
       "aria-valuemax": max,
-      "aria-valuenow": indeterminate ? void 0 : clamped,
-      "aria-label": label,
+      "aria-valuenow": indeterminate ? void 0 : value,
       className: cx("uix-progress", indeterminate && "uix-progress--indeterminate", className),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
@@ -1914,13 +1678,7 @@ function Progress({ value = 0, max = 100, indeterminate, label, className, ...pr
 
 // src/components/Meter.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var toneText = {
-  warning: "warning",
-  danger: "critical",
-  attention: "needs attention",
-  overdue: "overdue"
-};
-function Meter({ value = 0, tone, label, className, ...props }) {
+function Meter({ value = 0, tone, className, ...props }) {
   const pct = Math.max(0, Math.min(100, value));
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
@@ -1929,8 +1687,6 @@ function Meter({ value = 0, tone, label, 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_runtime29.jsx)(
@@ -1955,34 +1711,22 @@ function Stat({ label, value, icon, meta, trend, className, ...props }) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "uix-stat__value", children: value }),
     (meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "uix-stat__meta", children: [
-      trend != null && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)("path", { d: "M12 19V5m-6 6 6-6 6 6" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M12 5v14m6-6-6 6-6-6" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "uix-visually-hidden", children: trend.direction === "up" ? "up" : "down" }),
-        trend.label
-      ] }),
+      trend != null && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
       meta
     ] })
   ] });
 }
 
 // src/components/Tooltip.tsx
-var import_react21 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function Tooltip({ label, placement = "top", className, children, ...props }) {
-  const triggerRef = (0, import_react21.useRef)(null);
-  const bubbleRef = (0, import_react21.useRef)(null);
-  const closeTimer = (0, import_react21.useRef)(null);
-  const [open, setOpen] = (0, import_react21.useState)(false);
-  const id = (0, import_react21.useId)();
+  const triggerRef = (0, import_react19.useRef)(null);
+  const bubbleRef = (0, import_react19.useRef)(null);
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  const id = (0, import_react19.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 {
@@ -1993,7 +1737,6 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
     setOpen(true);
   };
   const hide = () => {
-    cancelClose();
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
       try {
@@ -2003,20 +1746,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
     }
     setOpen(false);
   };
-  const scheduleHide = () => {
-    cancelClose();
-    closeTimer.current = window.setTimeout(hide, 100);
-  };
-  (0, import_react21.useEffect)(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") hide();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open]);
-  (0, import_react21.useEffect)(() => () => {
-    if (closeTimer.current != null) clearTimeout(closeTimer.current);
+  (0, import_react19.useEffect)(() => () => {
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
       try {
@@ -2026,19 +1756,14 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
     }
   }, []);
   const bubbleAttr = { popover: "manual" };
-  const single = (0, import_react21.isValidElement)(children);
-  const child = single ? (0, import_react21.cloneElement)(children, {
-    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" ")
-  }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "span",
     {
       ref: triggerRef,
       className: cx("uix-tooltip", className),
-      "aria-describedby": single ? void 0 : id,
-      tabIndex: single ? void 0 : 0,
+      "aria-describedby": id,
       onMouseEnter: show,
-      onMouseLeave: scheduleHide,
+      onMouseLeave: hide,
       onFocus: show,
       onBlur: hide,
       onKeyDown: (e) => {
@@ -2046,20 +1771,8 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
       },
       ...props,
       children: [
-        child,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "span",
-          {
-            ref: bubbleRef,
-            id,
-            role: "tooltip",
-            className: "uix-tooltip__bubble",
-            onMouseEnter: cancelClose,
-            onMouseLeave: scheduleHide,
-            ...bubbleAttr,
-            children: label
-          }
-        )
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { ref: bubbleRef, id, role: "tooltip", className: "uix-tooltip__bubble", ...bubbleAttr, children: label })
       ]
     }
   );
@@ -2099,14 +1812,8 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
     }
   );
 }
-function LoadingState({ rows = 3, label, className, ...props }) {
-  return (
-    // no aria-busy: busy=true tells AT the region isn't ready and suppresses the announcement (UIX-A11Y-4)
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-stack", className), role: "status", ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "uix-visually-hidden", children: label ?? "Loading" }),
-      Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i))
-    ] })
-  );
+function LoadingState({ rows = 3, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cx("uix-stack", className), role: "status", "aria-busy": "true", ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
 }
 
 // src/components/Label.tsx
@@ -2124,8 +1831,7 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
 function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
     src ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { src, alt: alt ?? "" }) : children,
-    status && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-avatar__status", "aria-hidden": "true" }),
-    status && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-visually-hidden", children: "online" })
+    status && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-avatar__status" })
   ] });
 }
 function AvatarGroup({ children, className, ...props }) {
@@ -2145,7 +1851,7 @@ function UserChip({ avatar, name, sub, className, children, ...props }) {
 // src/components/Comments.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function Comments({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { role: "log", className: cx("uix-comments", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("uix-comments", className), ...props, children });
 }
 function Comment({ avatar, author, meta, children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
@@ -2162,25 +1868,21 @@ function Comment({ avatar, author, meta, children, className, ...props }) {
 }
 
 // src/components/Composer.tsx
-var import_react22 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-function Composer({ children, className, label = "Add a comment", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-composer", className), ...props, children: import_react22.Children.map(children, (child) => {
-    if (!(0, import_react22.isValidElement)(child) || child.type !== "textarea") return child;
-    const p = child.props;
-    return p["aria-label"] || p["aria-labelledby"] || p.id ? child : (0, import_react22.cloneElement)(child, { "aria-label": label });
-  }) });
+function Composer({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-composer", className), ...props, children });
 }
 function ComposerBar({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-composer__bar", className), ...props, children });
 }
 
 // src/components/Segmented.tsx
-var import_react23 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var SegmentedCtx = (0, import_react23.createContext)({});
+var SegmentedCtx = (0, import_react20.createContext)({});
 function Segmented({ value, onChange, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SegmentedCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
+  const contextValue = (0, import_react20.useMemo)(() => ({ value, onChange }), [value, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
 }
 function SegmentedOption({
   value,
@@ -2189,7 +1891,7 @@ function SegmentedOption({
   onClick,
   ...props
 }) {
-  const ctx = (0, import_react23.useContext)(SegmentedCtx);
+  const ctx = (0, import_react20.useContext)(SegmentedCtx);
   const selected = ctx.value === value;
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "button",
@@ -2210,11 +1912,11 @@ function SegmentedOption({
 // src/components/Timeline.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function Timeline({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ol", { className: cx("uix-timeline", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
 }
 function TimelineItem({ node, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { className: cx("uix-timeline__item", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "uix-timeline__rail", "aria-hidden": "true", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "uix-timeline__rail", children: [
       node ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-timeline__node" }),
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-timeline__line" })
     ] }),
@@ -2238,7 +1940,7 @@ function Note({ tone, icon, children, className, ...props }) {
 }
 
 // src/components/Popover.tsx
-var import_react24 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function Popover({
   popover = "auto",
@@ -2249,15 +1951,15 @@ function Popover({
   children,
   ...props
 }) {
-  const ref = (0, import_react24.useRef)(null);
-  const [open, setOpen] = (0, import_react24.useState)(false);
+  const ref = (0, import_react21.useRef)(null);
+  const [open, setOpen] = (0, import_react21.useState)(false);
   const popoverAttr = { popover };
   const reposition = useAnchoredPosition(anchor ?? null, ref, {
     open: open && !!anchor,
     placement,
     offset
   });
-  (0, import_react24.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const el = ref.current;
     if (!el || !anchor) return;
     const sync = () => {
@@ -2272,138 +1974,34 @@ function Popover({
 }
 
 // src/components/CommandPalette.tsx
-var import_react25 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var CmdkContext = (0, import_react25.createContext)(null);
 function CommandPalette({ inputProps, children, className, ...props }) {
-  const listId = (0, import_react25.useId)();
-  const [activeId, setActiveId] = (0, import_react25.useState)(null);
-  const [count, setCount] = (0, import_react25.useState)(0);
-  const [announced, setAnnounced] = (0, import_react25.useState)("");
-  const setActive = (0, import_react25.useCallback)((id, active) => {
-    setActiveId((cur) => active ? id : cur === id ? null : cur);
-  }, []);
-  const registerItem = (0, import_react25.useCallback)(() => {
-    setCount((c) => c + 1);
-    return () => setCount((c) => c - 1);
-  }, []);
-  (0, import_react25.useEffect)(() => {
-    const t = window.setTimeout(() => setAnnounced(`${count} result${count === 1 ? "" : "s"}`), 150);
-    return () => clearTimeout(t);
-  }, [count]);
-  const ctx = (0, import_react25.useMemo)(() => ({ listId, setActive, registerItem }), [listId, setActive, registerItem]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CmdkContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)("div", { className: "uix-cmdk__list", role: "listbox", id: listId, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "uix-visually-hidden", role: "status", children: announced })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-cmdk__list", children })
+  ] });
 }
 function CommandGroup({ label, children }) {
-  const labelId = (0, import_react25.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { role: "group", "aria-labelledby": label != null ? labelId : void 0, children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-cmdk__group", id: labelId, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-cmdk__group", children: label }),
     children
   ] });
 }
-function CommandItem({ icon, shortcut, active, children, className, id, ...props }) {
-  const ctx = (0, import_react25.useContext)(CmdkContext);
-  const autoId = (0, import_react25.useId)();
-  const itemId = id ?? autoId;
-  (0, import_react25.useEffect)(() => ctx?.registerItem(), [ctx]);
-  (0, import_react25.useEffect)(() => {
-    if (!ctx || !active) return;
-    ctx.setActive(itemId, true);
-    return () => ctx.setActive(itemId, false);
-  }, [ctx, itemId, active]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)("span", { children }),
-        shortcut
-      ]
-    }
-  );
+function CommandItem({ icon, shortcut, active, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
+    icon,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children }),
+    shortcut
+  ] });
 }
 
 // src/components/Inbox.tsx
-var import_react26 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
-function Inbox({ view, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cx("uix-inbox", className), "data-view": view, ...props, children });
+function Inbox({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cx("uix-inbox", className), ...props, children });
 }
-var InboxListCtx = (0, import_react26.createContext)({});
 function InboxList({ children, className, ...props }) {
-  const listRef = (0, import_react26.useRef)(null);
-  const [activeId, setActiveId] = (0, import_react26.useState)(void 0);
-  const ctx = (0, import_react26.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_runtime42.jsx)(InboxListCtx.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    "div",
-    {
-      ref: listRef,
-      className: cx("uix-inbox__list", className),
-      role: "listbox",
-      tabIndex: 0,
-      "aria-label": "Inbox",
-      "aria-activedescendant": activeId,
-      onKeyDown,
-      ...props,
-      children
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cx("uix-inbox__list", className), role: "listbox", ...props, children });
 }
 function InboxItem({
   subject,
@@ -2413,19 +2011,13 @@ function InboxItem({
   selected,
   children,
   className,
-  id,
   ...props
 }) {
-  const autoId = (0, import_react26.useId)();
-  const itemId = id ?? autoId;
-  const { activeId } = (0, import_react26.useContext)(InboxListCtx);
   return /* @__PURE__ */ (0, import_jsx_runtime42.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,
@@ -2443,60 +2035,29 @@ function InboxDetail({ children, className, ...props }) {
 }
 
 // src/components/Kanban.tsx
-var import_react27 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-function Kanban({ announcement, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx("uix-kanban", className), ...props, children: [
-    announcement != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
-    children
-  ] });
+function Kanban({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
 }
 function KanbanColumn({ title, count, children, className, ...props }) {
-  const headId = (0, import_react27.useId)();
-  const hasHead = title != null || count != null;
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
-    hasHead && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "uix-kanban__head", id: headId, children: [
+    (title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "uix-kanban__head", children: [
       title,
       count != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "uix-kanban__count", children: count })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uix-kanban__body", role: "list", "aria-labelledby": hasHead ? headId : void 0, children })
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uix-kanban__body", 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_runtime43.jsxs)(
-    "div",
-    {
-      role: "listitem",
-      tabIndex: 0,
-      className: cx("uix-kanban__card", className),
-      onKeyDown: handleKeyDown,
-      ...props,
-      children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uix-kanban__card-title", children: title }),
-        meta && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
-        children
-      ]
-    }
-  );
+function KanbanCard({ title, meta, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uix-kanban__card-title", children: title }),
+    meta && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
+    children
+  ] });
 }
 
 // src/components/Tree.tsx
-var import_react28 = require("react");
+var import_react22 = require("react");
 
 // src/tree-model.ts
 function flattenTree(nodes, expanded, level = 1) {
@@ -2541,14 +2102,6 @@ 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 {};
   }
 }
@@ -2616,12 +2169,12 @@ function Tree({
   className,
   ...props
 }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react28.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
+  const [internalExpanded, setInternalExpanded] = (0, import_react22.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
   const expanded = controlledExpanded ?? internalExpanded;
-  const rootRef = (0, import_react28.useRef)(null);
-  const [focusedId, setFocusedId] = (0, import_react28.useState)(void 0);
+  const rootRef = (0, import_react22.useRef)(null);
+  const [focusedId, setFocusedId] = (0, import_react22.useState)(void 0);
   const selectable = selected !== void 0 || onSelect != null;
-  const handleToggle = (0, import_react28.useCallback)((id) => {
+  const handleToggle = (0, import_react22.useCallback)((id) => {
     if (!controlledExpanded) {
       setInternalExpanded((prev) => {
         const next = new Set(prev);
@@ -2632,7 +2185,7 @@ function Tree({
     }
     onToggle?.(id);
   }, [controlledExpanded, onToggle]);
-  const flat = (0, import_react28.useMemo)(() => flattenTree(nodes, expanded), [nodes, expanded]);
+  const flat = (0, import_react22.useMemo)(() => flattenTree(nodes, expanded), [nodes, expanded]);
   const useVirtual = virtualize ?? shouldVirtualize(flat.length);
   const tabbableId = focusedId ?? selected ?? nodes[0]?.id;
   if (useVirtual) {
@@ -2703,13 +2256,6 @@ 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;
     }
   };
@@ -2743,14 +2289,12 @@ function VirtualTreeView({
   className,
   ...props
 }) {
-  const scrollRef = (0, import_react28.useRef)(null);
-  const [scrollTop, setScrollTop] = (0, import_react28.useState)(0);
-  const pendingFocus = (0, import_react28.useRef)(false);
-  const hadFocus = (0, import_react28.useRef)(false);
+  const scrollRef = (0, import_react22.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react22.useState)(0);
+  const pendingFocus = (0, import_react22.useRef)(false);
   const win = virtualWindow(scrollTop, maxHeight, rowHeight, flat.length);
   const rows = flat.slice(win.start, win.end);
-  const windowHasTabbable = tabbableId != null && rows.some((f) => f.node.id === tabbableId);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!pendingFocus.current || focusedId == null) return;
     const el = scrollRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(focusedId)}"]`);
     if (el) {
@@ -2758,11 +2302,6 @@ function VirtualTreeView({
       pendingFocus.current = false;
     }
   }, [focusedId, win.start, win.end]);
-  (0, import_react28.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;
@@ -2778,7 +2317,6 @@ 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;
@@ -2799,20 +2337,13 @@ 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_runtime44.jsx)("li", { role: "presentation", "aria-hidden": "true", style: { height: win.padTop } }),
-        rows.map((f, i) => {
+        win.padTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("li", { "aria-hidden": "true", style: { height: win.padTop } }),
+        rows.map((f) => {
           const rowStyle = { height: rowHeight, paddingLeft: `calc(${f.level - 1} * var(--uix-space-5))` };
           return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "li",
@@ -2824,7 +2355,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 || !windowHasTabbable && i === 0 ? 0 : -1,
+              tabIndex: tabbableId === f.node.id ? 0 : -1,
               className: "uix-tree__item",
               onFocus: (e) => {
                 if (e.target === e.currentTarget) setFocusedId(f.node.id);
@@ -2844,7 +2375,7 @@ function VirtualTreeView({
             f.node.id
           );
         }),
-        win.padBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("li", { role: "presentation", "aria-hidden": "true", style: { height: win.padBottom } })
+        win.padBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("li", { "aria-hidden": "true", style: { height: win.padBottom } })
       ]
     }
   );
@@ -3103,7 +2634,6 @@ function StatusRow({ indicator, name, meta, className, ...props }) {
   SubNavItem,
   Switch,
   Tab,
-  TabPanel,
   Table,
   TableWrap,
   Tabs,
@@ -3141,5 +2671,6 @@ function StatusRow({ indicator, name, meta, className, ...props }) {
   useAnchoredPosition,
   useDialog,
   useTable,
+  useVirtualRows,
   virtualWindow
 });