@tensor_1/react 2.5.0 → 2.6.0

package/dist/index.cjs

@@ -24,22 +24,29 @@ __export(src_exports, {
   AppShell: () => AppShell,
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
+  BulkBar: () => BulkBar,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
   Card: () => Card,
+  CellStrong: () => CellStrong,
+  CellSub: () => CellSub,
   Checkbox: () => Checkbox,
   CommandGroup: () => CommandGroup,
   CommandItem: () => CommandItem,
   CommandPalette: () => CommandPalette,
   Comment: () => Comment,
   Comments: () => Comments,
+  Composer: () => Composer,
+  ComposerBar: () => ComposerBar,
   DescriptionItem: () => DescriptionItem,
   DescriptionList: () => DescriptionList,
   DetailLayout: () => DetailLayout,
   Drawer: () => Drawer,
   EmptyState: () => EmptyState,
   ErrorState: () => ErrorState,
+  ExpandToggle: () => ExpandToggle,
   Field: () => Field,
+  Highlighted: () => Highlighted,
   Inbox: () => Inbox,
   InboxDetail: () => InboxDetail,
   InboxItem: () => InboxItem,
@@ -53,6 +60,7 @@ __export(src_exports, {
   List: () => List,
   ListItem: () => ListItem,
   LoadingState: () => LoadingState,
+  Mark: () => Mark,
   Meter: () => Meter,
   Modal: () => Modal,
   NavFavourites: () => NavFavourites,
@@ -67,6 +75,10 @@ __export(src_exports, {
   Prose: () => Prose,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
+  RowAction: () => RowAction,
+  RowActions: () => RowActions,
+  Segmented: () => Segmented,
+  SegmentedOption: () => SegmentedOption,
   Select: () => Select,
   Sidebar: () => Sidebar,
   SidebarSection: () => SidebarSection,
@@ -92,8 +104,26 @@ __export(src_exports, {
   Tr: () => Tr,
   Tree: () => Tree,
   UserChip: () => UserChip,
+  applyFilters: () => applyFilters,
+  clampWidth: () => clampWidth,
   cx: () => cx,
-  useDialog: () => useDialog
+  highlightSegments: () => highlightSegments,
+  matchFilter: () => matchFilter,
+  mergePinned: () => mergePinned,
+  multiSort: () => multiSort,
+  nextSortDir: () => nextSortDir,
+  parseView: () => parseView,
+  reorder: () => reorder,
+  searchRows: () => searchRows,
+  selectAllState: () => selectAllState,
+  serializeView: () => serializeView,
+  shouldVirtualize: () => shouldVirtualize,
+  toggleId: () => toggleId,
+  togglePage: () => togglePage,
+  toggleSort: () => toggleSort,
+  useDialog: () => useDialog,
+  useTable: () => useTable,
+  virtualWindow: () => virtualWindow
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -121,10 +151,235 @@ function useDialog(open) {
   return ref;
 }
 
-// src/components/Button.tsx
+// src/hooks/useTable.ts
 var import_react2 = require("react");
+
+// src/table-engine.ts
+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" });
+}
+function multiSort(rows, keys) {
+  if (!keys.length) return rows.slice();
+  return rows.map((row, i) => ({ row, i })).sort((x, y) => {
+    for (const k of keys) {
+      const c = compare(x.row[k.field], y.row[k.field]);
+      if (c !== 0) return k.dir === "ascending" ? c : -c;
+    }
+    return x.i - y.i;
+  }).map((w) => w.row);
+}
+function nextSortDir(current) {
+  if (current === "ascending") return "descending";
+  if (current === "descending") return "none";
+  return "ascending";
+}
+function toggleSort(keys, field, additive = false) {
+  const existing = keys.find((k) => k.field === field);
+  const dir = nextSortDir(existing?.dir);
+  if (!additive) return dir === "none" ? [] : [{ field, dir }];
+  const rest = keys.filter((k) => k.field !== field);
+  return dir === "none" ? rest : [...rest, { field, dir }];
+}
+function asNum(v) {
+  return typeof v === "number" ? v : Number(v);
+}
+function matchFilter(row, f) {
+  const cell = row[f.field];
+  switch (f.op) {
+    case "isAnyOf":
+      return Array.isArray(f.value) && f.value.includes(cell);
+    case "isNoneOf":
+      return Array.isArray(f.value) && !f.value.includes(cell);
+    case "contains":
+      return String(cell ?? "").toLowerCase().includes(String(f.value ?? "").toLowerCase());
+    case "equals":
+      return String(cell ?? "") === String(f.value ?? "");
+    case "startsWith":
+      return String(cell ?? "").toLowerCase().startsWith(String(f.value ?? "").toLowerCase());
+    case "eq":
+      return asNum(cell) === asNum(f.value);
+    case "lt":
+      return asNum(cell) < asNum(f.value);
+    case "gt":
+      return asNum(cell) > asNum(f.value);
+    case "between": {
+      const [lo, hi] = f.value.map(asNum);
+      return asNum(cell) >= lo && asNum(cell) <= hi;
+    }
+    case "is":
+      return Boolean(cell) === Boolean(f.value);
+    default:
+      return true;
+  }
+}
+function applyFilters(rows, filters) {
+  if (!filters.length) return rows.slice();
+  return rows.filter((r) => filters.every((f) => matchFilter(r, f)));
+}
+function searchRows(rows, query, fields) {
+  const q = query.trim().toLowerCase();
+  if (!q) return rows.slice();
+  return rows.filter((r) => {
+    const vals = fields ? fields.map((f) => r[f]) : Object.values(r);
+    return vals.some((v) => v != null && String(v).toLowerCase().includes(q));
+  });
+}
+function highlightSegments(text, query) {
+  const q = query.trim();
+  if (!q) return [{ text, match: false }];
+  const out = [];
+  const lower = text.toLowerCase();
+  const ql = q.toLowerCase();
+  let i = 0;
+  for (; ; ) {
+    const hit = lower.indexOf(ql, i);
+    if (hit === -1) {
+      if (i < text.length) out.push({ text: text.slice(i), match: false });
+      break;
+    }
+    if (hit > i) out.push({ text: text.slice(i, hit), match: false });
+    out.push({ text: text.slice(hit, hit + q.length), match: true });
+    i = hit + q.length;
+  }
+  return out;
+}
+function serializeView(v) {
+  const p = new URLSearchParams();
+  if (v.sort?.length) p.set("sort", v.sort.map((s) => `${s.field}:${s.dir === "descending" ? "d" : "a"}`).join(","));
+  if (v.columns?.length) p.set("cols", v.columns.join(","));
+  if (v.density && v.density !== "standard") p.set("density", v.density);
+  if (v.q) p.set("q", v.q);
+  if (v.filters?.length) p.set("filter", v.filters.map((f) => `${f.field}~${f.op}~${Array.isArray(f.value) ? f.value.join("|") : f.value ?? ""}`).join(","));
+  return p.toString();
+}
+function parseView(qs) {
+  const p = new URLSearchParams(qs.replace(/^\?/, ""));
+  const v = {};
+  const sort = p.get("sort");
+  if (sort) v.sort = sort.split(",").filter(Boolean).map((tok) => {
+    const [field, d] = tok.split(":");
+    return { field, dir: d === "d" ? "descending" : "ascending" };
+  });
+  const cols = p.get("cols");
+  if (cols) v.columns = cols.split(",").filter(Boolean);
+  const density = p.get("density");
+  if (density === "compact" || density === "comfortable" || density === "standard") v.density = density;
+  const q = p.get("q");
+  if (q) v.q = q;
+  const filter = p.get("filter");
+  if (filter) v.filters = filter.split(",").filter(Boolean).map((tok) => {
+    const [field, op, raw] = tok.split("~");
+    const value = raw?.includes("|") ? raw.split("|") : raw;
+    return { field, kind: "text", op, value };
+  });
+  return v;
+}
+function virtualWindow(scrollTop, viewportH, rowH, count, overscan = 6) {
+  if (rowH <= 0 || count <= 0) return { start: 0, end: count, padTop: 0, padBottom: 0, total: 0 };
+  const first = Math.max(0, Math.floor(scrollTop / rowH) - overscan);
+  const visible = Math.ceil(viewportH / rowH) + overscan * 2;
+  const end = Math.min(count, first + visible);
+  return { start: first, end, padTop: first * rowH, padBottom: (count - end) * rowH, total: count * rowH };
+}
+function shouldVirtualize(count, threshold = 100) {
+  return count > threshold;
+}
+function clampWidth(width, min = 64, max = Infinity) {
+  return Math.max(min, Math.min(max, Math.round(width)));
+}
+function reorder(arr, from, to) {
+  const next = arr.slice();
+  if (from < 0 || from >= next.length || to < 0 || to >= next.length) return next;
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return next;
+}
+function toggleId(set, id) {
+  const next = new Set(set);
+  next.has(id) ? next.delete(id) : next.add(id);
+  return next;
+}
+function selectAllState(selected, pageIds) {
+  const on = pageIds.filter((id) => selected.has(id)).length;
+  if (on === 0) return "none";
+  return on === pageIds.length ? "all" : "some";
+}
+function togglePage(selected, pageIds) {
+  const next = new Set(selected);
+  const all = pageIds.every((id) => next.has(id));
+  for (const id of pageIds) all ? next.delete(id) : next.add(id);
+  return next;
+}
+function mergePinned(all, visible, pinnedIds, idField = "id") {
+  if (!pinnedIds.size) return visible.slice();
+  const pinned = all.filter((r) => pinnedIds.has(String(r[idField])));
+  const pinnedSet = new Set(pinned.map((r) => String(r[idField])));
+  const rest = visible.filter((r) => !pinnedSet.has(String(r[idField])));
+  return [...pinned, ...rest];
+}
+
+// src/hooks/useTable.ts
+function useTable(data, options = {}) {
+  const { idField = "id", searchFields } = options;
+  const [sort, setSort] = (0, import_react2.useState)(() => options.initialSort ?? []);
+  const [filters, setFilters] = (0, import_react2.useState)(() => options.initialFilters ?? []);
+  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 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 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 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) => {
+    const v = parseView(queryString);
+    setSort(v.sort ?? []);
+    setFilters(v.filters ?? []);
+    setQuery(v.q ?? "");
+  }, []);
+  return {
+    rows,
+    sort,
+    filters,
+    query,
+    selected,
+    pinned,
+    selectAll,
+    toggleSort: doToggleSort,
+    setSort,
+    setFilters,
+    setQuery,
+    isSelected: (id) => selected.has(id),
+    toggleRow,
+    toggleAllRows,
+    clearSelection,
+    togglePin,
+    view,
+    viewQueryString,
+    applyView
+  };
+}
+
+// src/components/Button.tsx
+var import_react3 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Button = (0, import_react2.forwardRef)(
+var Button = (0, import_react3.forwardRef)(
   ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
@@ -149,9 +404,9 @@ function ButtonGroup({ children, className }) {
 }
 
 // src/components/Input.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Input = (0, import_react3.forwardRef)(
+var Input = (0, import_react4.forwardRef)(
   ({ size = "md", invalid, valid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "input",
     {
@@ -184,9 +439,9 @@ function InputGroup({ children, leadingIcon, trailingIcon, className }) {
 }
 
 // src/components/Textarea.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Textarea = (0, import_react4.forwardRef)(
+var Textarea = (0, import_react5.forwardRef)(
   ({ invalid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "textarea",
     {
@@ -200,9 +455,9 @@ var Textarea = (0, import_react4.forwardRef)(
 Textarea.displayName = "Textarea";
 
 // src/components/Select.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Select = (0, import_react5.forwardRef)(
+var Select = (0, import_react6.forwardRef)(
   ({ size = "md", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "select",
     {
@@ -215,14 +470,14 @@ var Select = (0, import_react5.forwardRef)(
 Select.displayName = "Select";
 
 // src/components/Checkbox.tsx
-var import_react6 = require("react");
+var import_react7 = 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_react6.forwardRef)(
+var Checkbox = (0, import_react7.forwardRef)(
   ({ label, indeterminate, className, ...props }, forwardedRef) => {
-    const innerRef = (0, import_react6.useRef)(null);
-    (0, import_react6.useEffect)(() => {
+    const innerRef = (0, import_react7.useRef)(null);
+    (0, import_react7.useEffect)(() => {
       const el = innerRef.current;
       if (el) el.indeterminate = !!indeterminate;
     }, [indeterminate]);
@@ -247,9 +502,9 @@ var Checkbox = (0, import_react6.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Radio.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Radio = (0, import_react7.forwardRef)(
+var Radio = (0, import_react8.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" }),
@@ -262,9 +517,9 @@ function RadioGroup({ children, className }) {
 }
 
 // src/components/Switch.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Switch = (0, import_react8.forwardRef)(
+var Switch = (0, import_react9.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" }),
@@ -411,11 +666,11 @@ function ListItem({ title, meta, trail, leading, children, className, ...props }
 }
 
 // src/components/DescriptionList.tsx
-var import_react9 = require("react");
+var import_react10 = 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_react9.Fragment, { children: [
+    items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react10.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)),
@@ -430,14 +685,14 @@ function DescriptionItem({ term, children }) {
 }
 
 // src/components/Tabs.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TabsCtx = (0, import_react10.createContext)({});
+var TabsCtx = (0, import_react11.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 }) });
 }
 function Tab({ value, children, disabled, className, onClick, ...props }) {
-  const ctx = (0, import_react10.useContext)(TabsCtx);
+  const ctx = (0, import_react11.useContext)(TabsCtx);
   const selected = ctx.value === value;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
@@ -457,17 +712,49 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
 }
 
 // src/components/AppShell.tsx
+var import_react12 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function AppShell({ collapsed, sidebar, topbar, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cx("uix-shell", className), "data-collapsed": collapsed || void 0, ...props, children: [
-    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", { className: "uix-shell__main", children })
-  ] });
+function AppShell({
+  nav,
+  collapsed,
+  focus,
+  onExitFocus,
+  mainBleed,
+  sidebar,
+  topbar,
+  children,
+  className,
+  ...props
+}) {
+  const navState = nav ?? (collapsed ? "rail" : "full");
+  (0, import_react12.useEffect)(() => {
+    if (!focus || !onExitFocus) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onExitFocus();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [focus, onExitFocus]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: cx("uix-shell", className),
+      "data-nav": navState !== "full" ? navState : void 0,
+      "data-collapsed": collapsed && nav == null ? "" : void 0,
+      "data-focus": focus || void 0,
+      ...props,
+      children: [
+        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", { 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" }) })
+      ]
+    }
+  );
 }
 
 // src/components/Sidebar.tsx
-var import_react11 = require("react");
+var import_react13 = 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 }) {
@@ -521,7 +808,7 @@ function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...p
   );
 }
 function NavGroup({ icon, label, children, defaultExpanded = true }) {
-  const [expanded, setExpanded] = (0, import_react11.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react13.useState)(defaultExpanded);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uix-navgroup", children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "button",
@@ -589,7 +876,7 @@ function StarButton({
 }
 
 // src/components/NavFavourites.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   "svg",
@@ -653,13 +940,13 @@ function NavFavourites({
   emptyReason,
   className
 }) {
-  const regionId = (0, import_react12.useId)();
-  const headerRef = (0, import_react12.useRef)(null);
-  const regionRef = (0, import_react12.useRef)(null);
-  const focusAfterRef = (0, import_react12.useRef)(null);
-  const triggerRefs = (0, import_react12.useRef)(/* @__PURE__ */ new Map());
+  const regionId = (0, import_react14.useId)();
+  const headerRef = (0, import_react14.useRef)(null);
+  const regionRef = (0, import_react14.useRef)(null);
+  const focusAfterRef = (0, import_react14.useRef)(null);
+  const triggerRefs = (0, import_react14.useRef)(/* @__PURE__ */ new Map());
   const order = items.map((i) => i.id);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const id = focusAfterRef.current;
     if (!id) return;
     focusAfterRef.current = null;
@@ -770,18 +1057,18 @@ function FavouriteRow({
   onRemove,
   registerTrigger
 }) {
-  const [open, setOpen] = (0, import_react12.useState)(false);
-  const [revealed, setRevealed] = (0, import_react12.useState)(false);
-  const menuId = (0, import_react12.useId)();
-  const triggerRef = (0, import_react12.useRef)(null);
-  const itemRefs = (0, import_react12.useRef)([]);
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const [revealed, setRevealed] = (0, import_react14.useState)(false);
+  const menuId = (0, import_react14.useId)();
+  const triggerRef = (0, import_react14.useRef)(null);
+  const itemRefs = (0, import_react14.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 }
   ];
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (open) itemRefs.current[0]?.focus();
   }, [open]);
   const closeAndReturnFocus = () => {
@@ -998,6 +1285,7 @@ function Table({
   density = "standard",
   zebra = true,
   pinnedCol,
+  fixed,
   rowPeek,
   v2,
   className,
@@ -1007,7 +1295,13 @@ function Table({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "table",
     {
-      className: cx("uix-table", !zebra && "uix-table--no-zebra", pinnedCol && "uix-table--pinned-col", className),
+      className: cx(
+        "uix-table",
+        !zebra && "uix-table--no-zebra",
+        pinnedCol && "uix-table--pinned-col",
+        fixed && "uix-table--fixed",
+        className
+      ),
       "data-density": density !== "standard" ? density : void 0,
       "data-uix-rowpeek": rowPeek || void 0,
       "data-uix-table-v2": v2 || void 0,
@@ -1016,12 +1310,13 @@ function Table({
     }
   );
 }
-function Th({ sortable, sortDirection, onSort, className, children, onClick, ...props }) {
+function Th({ sortable, sortDirection, sortOrder, onSort, className, children, onClick, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "th",
     {
       className,
       "data-sort": sortable || void 0,
+      "data-sort-order": sortOrder != null && sortOrder > 0 ? sortOrder : void 0,
       "aria-sort": sortDirection && sortDirection !== "none" ? sortDirection : void 0,
       onClick: sortable ? onSort ?? onClick : onClick,
       ...props,
@@ -1044,6 +1339,49 @@ function Tr({ selected, pinned, className, children, ...props }) {
     }
   );
 }
+function BulkBar({ count, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx("uix-bulkbar", className), role: "toolbar", "aria-label": "Bulk actions", ...props, children: [
+    count != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "uix-bulkbar__count", children: [
+      count,
+      " selected"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "uix-bulkbar__spacer" }),
+    children
+  ] });
+}
+function RowActions({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { className: cx("uix-table__actions", className), ...props, children });
+}
+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, className, type = "button", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "button",
+    {
+      type,
+      className: cx("uix-table__expand", className),
+      "aria-expanded": expanded,
+      "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" }) })
+    }
+  );
+}
+function CellStrong({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cx("uix-cell-strong", className), ...props, children });
+}
+function CellSub({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cx("uix-cell-sub", className), ...props, children });
+}
+function Mark({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("mark", { className: cx("uix-mark", className), ...props, children });
+}
+function Highlighted({ text, query }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: highlightSegments(text, query).map(
+    (seg, i) => seg.match ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("mark", { className: "uix-mark", children: seg.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: seg.text }, i)
+  ) });
+}
 
 // src/components/Pagination.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -1266,72 +1604,113 @@ function Comment({ avatar, author, meta, children, className, ...props }) {
   ] });
 }
 
-// src/components/Timeline.tsx
+// src/components/Composer.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
+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_react15 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var SegmentedCtx = (0, import_react15.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 }) });
+}
+function SegmentedOption({
+  value,
+  children,
+  className,
+  onClick,
+  ...props
+}) {
+  const ctx = (0, import_react15.useContext)(SegmentedCtx);
+  const selected = ctx.value === value;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "button",
+    {
+      type: "button",
+      className: cx("uix-segmented__option", className),
+      "aria-pressed": selected,
+      onClick: (e) => {
+        ctx.onChange?.(value);
+        onClick?.(e);
+      },
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/Timeline.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Timeline({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
 }
-function TimelineItem({ meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "uix-timeline__rail", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "uix-timeline__node" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "uix-timeline__line" })
+function TimelineItem({ node, meta, children, className, ...props }) {
+  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" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "uix-timeline__body", children: [
-      meta != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-timeline__meta", children: meta }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "uix-timeline__body", children: [
+      meta != null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "uix-timeline__meta", children: meta }),
       children
     ] })
   ] });
 }
 
 // src/components/Prose.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Prose({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cx("uix-prose", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cx("uix-prose", className), ...props, children });
 }
 function Note({ tone, icon, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-note__icon", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-note__body", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-note__icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-note__body", children })
   ] });
 }
 
 // src/components/Popover.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function Popover({ popover = "auto", children, className, ...props }) {
   const popoverAttr = { popover };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 
 // src/components/CommandPalette.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function CommandPalette({ inputProps, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-cmdk__list", children })
+  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 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-cmdk__group", 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, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
+  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_runtime39.jsx)("span", { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children }),
     shortcut
   ] });
 }
 
 // src/components/Inbox.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Inbox({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cx("uix-inbox", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cx("uix-inbox", className), ...props, children });
 }
 function InboxList({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cx("uix-inbox__list", className), role: "listbox", ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cx("uix-inbox__list", className), role: "listbox", ...props, children });
 }
 function InboxItem({
   subject,
@@ -1343,7 +1722,7 @@ function InboxItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       role: "option",
@@ -1353,48 +1732,48 @@ function InboxItem({
       ...props,
       children: [
         leading,
-        subject != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-inbox__subject", children: subject }),
-        preview != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-inbox__preview", children: preview }),
+        subject != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "uix-inbox__subject", children: subject }),
+        preview != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "uix-inbox__preview", children: preview }),
         children
       ]
     }
   );
 }
 function InboxDetail({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cx("uix-inbox__detail", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cx("uix-inbox__detail", className), ...props, children });
 }
 
 // src/components/Kanban.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Kanban({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
 }
 function KanbanColumn({ title, count, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
-    (title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "uix-kanban__head", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
+    (title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "uix-kanban__head", children: [
       title,
-      count != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "uix-kanban__count", children: count })
+      count != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "uix-kanban__count", children: count })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-kanban__body", children })
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uix-kanban__body", children })
   ] });
 }
 function KanbanCard({ title, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-kanban__card-title", children: title }),
-    meta && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
+  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_react13 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M2 4l4 4 4-4" }) });
+var import_react16 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M2 4l4 4 4-4" }) });
 function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
   const isExpanded = expanded.has(node.id);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       "button",
       {
         className: "uix-tree__row",
@@ -1405,13 +1784,13 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
           onSelect?.(node.id);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronIcon2, {}) }),
-          node.icon && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "aria-hidden": "true", children: node.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronIcon2, {}) }),
+          node.icon && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": "true", children: node.icon }),
           node.label
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       TreeNode,
       {
         node: child,
@@ -1426,7 +1805,7 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
   ] });
 }
 function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react13.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
+  const [internalExpanded, setInternalExpanded] = (0, import_react16.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
   const expanded = controlledExpanded ?? internalExpanded;
   function handleToggle(id) {
     if (!controlledExpanded) {
@@ -1439,7 +1818,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
     }
     onToggle?.(id);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     TreeNode,
     {
       node,
@@ -1457,22 +1836,29 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   AppShell,
   Avatar,
   AvatarGroup,
+  BulkBar,
   Button,
   ButtonGroup,
   Card,
+  CellStrong,
+  CellSub,
   Checkbox,
   CommandGroup,
   CommandItem,
   CommandPalette,
   Comment,
   Comments,
+  Composer,
+  ComposerBar,
   DescriptionItem,
   DescriptionList,
   DetailLayout,
   Drawer,
   EmptyState,
   ErrorState,
+  ExpandToggle,
   Field,
+  Highlighted,
   Inbox,
   InboxDetail,
   InboxItem,
@@ -1486,6 +1872,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   List,
   ListItem,
   LoadingState,
+  Mark,
   Meter,
   Modal,
   NavFavourites,
@@ -1500,6 +1887,10 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   Prose,
   Radio,
   RadioGroup,
+  RowAction,
+  RowActions,
+  Segmented,
+  SegmentedOption,
   Select,
   Sidebar,
   SidebarSection,
@@ -1525,6 +1916,24 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   Tr,
   Tree,
   UserChip,
+  applyFilters,
+  clampWidth,
   cx,
-  useDialog
+  highlightSegments,
+  matchFilter,
+  mergePinned,
+  multiSort,
+  nextSortDir,
+  parseView,
+  reorder,
+  searchRows,
+  selectAllState,
+  serializeView,
+  shouldVirtualize,
+  toggleId,
+  togglePage,
+  toggleSort,
+  useDialog,
+  useTable,
+  virtualWindow
 });