@tensor_1/react 2.11.0 → 2.12.0

package/dist/index.cjs

@@ -140,6 +140,7 @@ __export(src_exports, {
   useAnchoredPosition: () => useAnchoredPosition,
   useDialog: () => useDialog,
   useTable: () => useTable,
+  useVirtualRows: () => useVirtualRows,
   virtualWindow: () => virtualWindow
 });
 module.exports = __toCommonJS(src_exports);
@@ -203,22 +204,23 @@ function useDialog(open) {
 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";
@@ -418,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";
 }
@@ -444,18 +447,22 @@ 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)), []);
@@ -479,7 +486,7 @@ function useTable(data, options = {}) {
     setSort,
     setFilters,
     setQuery,
-    isSelected: (id) => selected.has(id),
+    isSelected,
     toggleRow,
     toggleAllRows,
     clearSelection,
@@ -490,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" };
@@ -555,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;
@@ -595,9 +649,9 @@ 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 Button = (0, import_react4.forwardRef)(
+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",
     {
@@ -622,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",
     {
@@ -657,9 +711,9 @@ function InputGroup({ children, leadingIcon, trailingIcon, className }) {
 }
 
 // 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",
     {
@@ -673,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",
     {
@@ -688,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]);
@@ -720,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" }),
@@ -735,9 +789,9 @@ function RadioGroup({ children, className }) {
 }
 
 // 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" }),
@@ -747,13 +801,13 @@ 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 control = (0, import_react11.isValidElement)(children) ? (0, import_react11.cloneElement)(children, {
+  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"]
   }) : children;
@@ -890,11 +944,11 @@ function ListItem({ title, meta, trail, leading, children, className, ...props }
 }
 
 // src/components/DescriptionList.tsx
-var import_react12 = 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_react12.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)),
@@ -909,14 +963,15 @@ function DescriptionItem({ term, children }) {
 }
 
 // src/components/Tabs.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TabsCtx = (0, import_react13.createContext)({});
+var TabsCtx = (0, import_react14.createContext)({});
 function Tabs({ variant = "line", value, onChange, children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
+  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_react13.useContext)(TabsCtx);
+  const ctx = (0, import_react14.useContext)(TabsCtx);
   const selected = ctx.value === value;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
@@ -936,7 +991,7 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
 }
 
 // src/components/AppShell.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function AppShell({
   nav,
@@ -951,7 +1006,7 @@ function AppShell({
   ...props
 }) {
   const navState = nav ?? (collapsed ? "rail" : "full");
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!focus || !onExitFocus) return;
     const onKey = (e) => {
       if (e.key === "Escape") onExitFocus();
@@ -978,7 +1033,7 @@ function AppShell({
 }
 
 // src/components/Sidebar.tsx
-var import_react15 = 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 }) {
@@ -1032,7 +1087,7 @@ function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...p
   );
 }
 function NavGroup({ icon, label, children, defaultExpanded = true }) {
-  const [expanded, setExpanded] = (0, import_react15.useState)(defaultExpanded);
+  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",
@@ -1100,7 +1155,7 @@ function StarButton({
 }
 
 // src/components/NavFavourites.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   "svg",
@@ -1114,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" })
   }
 );
@@ -1130,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" })
   }
 );
@@ -1153,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,
@@ -1164,20 +1218,20 @@ function NavFavourites({
   emptyReason,
   className
 }) {
-  const regionId = (0, import_react16.useId)();
-  const headerRef = (0, import_react16.useRef)(null);
-  const regionRef = (0, import_react16.useRef)(null);
-  const focusAfterRef = (0, import_react16.useRef)(null);
-  const triggerRefs = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
-  const order = items.map((i) => i.id);
-  (0, import_react16.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;
@@ -1187,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;
@@ -1197,14 +1251,18 @@ function NavFavourites({
     reordered.splice(next, 0, it);
     focusAfterRef.current = id;
     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: [
+  }, [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",
       {
@@ -1213,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
@@ -1237,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)(
@@ -1260,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
         ))
@@ -1271,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_react16.useState)(false);
-  const [revealed, setRevealed] = (0, import_react16.useState)(false);
-  const menuId = (0, import_react16.useId)();
-  const triggerRef = (0, import_react16.useRef)(null);
-  const itemRefs = (0, import_react16.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_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (open) itemRefs.current[0]?.focus();
   }, [open]);
   const closeAndReturnFocus = () => {
@@ -1319,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",
@@ -1354,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, {})
             }
           ),
@@ -1380,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)(
@@ -1389,21 +1403,7 @@ function FavouriteRow({
                 id: menuId,
                 role: "menu",
                 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",
                   {
@@ -1417,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))
@@ -1446,7 +1428,7 @@ function FavouriteRow({
       }
     )
   );
-}
+});
 
 // src/components/Alert.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -1502,10 +1484,11 @@ function Toaster({ children, className, ...props }) {
 }
 
 // src/components/Table.tsx
+var import_react18 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-function TableWrap({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cx("uix-table-wrap", className), ...props, 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,
@@ -1735,13 +1718,13 @@ function Stat({ label, value, icon, meta, trend, className, ...props }) {
 }
 
 // src/components/Tooltip.tsx
-var import_react17 = 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_react17.useRef)(null);
-  const bubbleRef = (0, import_react17.useRef)(null);
-  const [open, setOpen] = (0, import_react17.useState)(false);
-  const id = (0, import_react17.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 show = () => {
     const b = bubbleRef.current;
@@ -1763,7 +1746,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
     }
     setOpen(false);
   };
-  (0, import_react17.useEffect)(() => () => {
+  (0, import_react19.useEffect)(() => () => {
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
       try {
@@ -1894,11 +1877,12 @@ function ComposerBar({ children, className, ...props }) {
 }
 
 // src/components/Segmented.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var SegmentedCtx = (0, import_react18.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,
@@ -1907,7 +1891,7 @@ function SegmentedOption({
   onClick,
   ...props
 }) {
-  const ctx = (0, import_react18.useContext)(SegmentedCtx);
+  const ctx = (0, import_react20.useContext)(SegmentedCtx);
   const selected = ctx.value === value;
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "button",
@@ -1956,7 +1940,7 @@ function Note({ tone, icon, children, className, ...props }) {
 }
 
 // src/components/Popover.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function Popover({
   popover = "auto",
@@ -1967,15 +1951,15 @@ function Popover({
   children,
   ...props
 }) {
-  const ref = (0, import_react19.useRef)(null);
-  const [open, setOpen] = (0, import_react19.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_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const el = ref.current;
     if (!el || !anchor) return;
     const sync = () => {
@@ -2073,7 +2057,7 @@ function KanbanCard({ title, meta, children, className, ...props }) {
 }
 
 // src/components/Tree.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/tree-model.ts
 function flattenTree(nodes, expanded, level = 1) {
@@ -2185,12 +2169,12 @@ function Tree({
   className,
   ...props
 }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react20.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
+  const [internalExpanded, setInternalExpanded] = (0, import_react22.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
   const expanded = controlledExpanded ?? internalExpanded;
-  const rootRef = (0, import_react20.useRef)(null);
-  const [focusedId, setFocusedId] = (0, import_react20.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_react20.useCallback)((id) => {
+  const handleToggle = (0, import_react22.useCallback)((id) => {
     if (!controlledExpanded) {
       setInternalExpanded((prev) => {
         const next = new Set(prev);
@@ -2201,7 +2185,7 @@ function Tree({
     }
     onToggle?.(id);
   }, [controlledExpanded, onToggle]);
-  const flat = (0, import_react20.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) {
@@ -2305,12 +2289,12 @@ function VirtualTreeView({
   className,
   ...props
 }) {
-  const scrollRef = (0, import_react20.useRef)(null);
-  const [scrollTop, setScrollTop] = (0, import_react20.useState)(0);
-  const pendingFocus = (0, import_react20.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);
-  (0, import_react20.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) {
@@ -2687,5 +2671,6 @@ function StatusRow({ indicator, name, meta, className, ...props }) {
   useAnchoredPosition,
   useDialog,
   useTable,
+  useVirtualRows,
   virtualWindow
 });