@tensor_1/react 2.5.0 → 2.7.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,30 @@ __export(src_exports, {
   Tr: () => Tr,
   Tree: () => Tree,
   UserChip: () => UserChip,
+  applyFilters: () => applyFilters,
+  clampWidth: () => clampWidth,
+  computePosition: () => computePosition,
   cx: () => cx,
-  useDialog: () => useDialog
+  flattenTree: () => flattenTree,
+  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,
+  treeNav: () => treeNav,
+  useAnchoredPosition: () => useAnchoredPosition,
+  useDialog: () => useDialog,
+  useTable: () => useTable,
+  virtualWindow: () => virtualWindow
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -104,27 +138,453 @@ function cx(...args) {
 
 // src/hooks/useDialog.ts
 var import_react = require("react");
+var lockCount = 0;
+var saved = null;
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (++lockCount > 1) return;
+  const el = document.scrollingElement ?? document.documentElement;
+  const scrollbarW = window.innerWidth - document.documentElement.clientWidth;
+  saved = {
+    el,
+    overflow: el.style.overflow,
+    paddingRight: el.style.paddingRight,
+    overscroll: el.style.overscrollBehavior
+  };
+  el.style.overflow = "hidden";
+  if (scrollbarW > 0) {
+    const current = parseFloat(getComputedStyle(el).paddingRight) || 0;
+    el.style.paddingRight = `${current + scrollbarW}px`;
+  }
+  el.style.overscrollBehavior = "contain";
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined" || lockCount === 0) return;
+  if (--lockCount > 0) return;
+  if (saved) {
+    saved.el.style.overflow = saved.overflow;
+    saved.el.style.paddingRight = saved.paddingRight;
+    saved.el.style.overscrollBehavior = saved.overscroll;
+    saved = null;
+  }
+}
 function useDialog(open) {
   const ref = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     const el = ref.current;
-    if (!el) return;
-    if (open) {
-      if (!el.open) el.showModal();
-    } else {
-      if (el.open) el.close();
+    if (!el || !open) {
+      if (el && el.open) el.close();
+      return;
     }
+    if (!el.open) el.showModal();
+    lockBodyScroll();
     return () => {
+      unlockBodyScroll();
       if (el.open) el.close();
     };
   }, [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 asTime(v) {
+  if (v == null) return NaN;
+  if (v instanceof Date) return v.getTime();
+  if (typeof v === "number") return v;
+  const s = String(v).trim();
+  if (s === "") return NaN;
+  const parsed = Date.parse(s);
+  return Number.isNaN(parsed) ? Number(s) : parsed;
+}
+function matchDate(cell, f) {
+  const c = asTime(cell);
+  if (Number.isNaN(c)) return false;
+  switch (f.op) {
+    case "eq":
+      return c === asTime(f.value);
+    case "lt":
+      return c < asTime(f.value);
+    case "gt":
+      return c > asTime(f.value);
+    case "between": {
+      const [lo, hi] = f.value.map(asTime);
+      return c >= lo && c <= hi;
+    }
+    default:
+      return true;
+  }
+}
+function matchFilter(row, f) {
+  const cell = row[f.field];
+  if (f.kind === "date") return matchDate(cell, f);
+  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;
+}
+var ARRAY_OPS = /* @__PURE__ */ new Set(["isAnyOf", "isNoneOf", "between"]);
+var escapePart = (s) => encodeURIComponent(s).replace(/~/g, "%7E");
+var unescapePart = (s) => decodeURIComponent(s);
+var scalarToStr = (v) => v == null ? "" : String(v);
+function parseScalar(s, kind) {
+  switch (kind) {
+    case "number":
+      return Number(s);
+    case "boolean":
+      return s === "true";
+    case "date":
+      return /^-?\d+$/.test(s) ? Number(s) : s;
+    // epoch-ms number, else the ISO/date string
+    default:
+      return s;
+  }
+}
+function kindFromOp(op) {
+  if (op === "isAnyOf" || op === "isNoneOf") return "enum";
+  if (op === "is") return "boolean";
+  if (op === "contains" || op === "equals" || op === "startsWith") return "text";
+  return "number";
+}
+function serializeFilter(f) {
+  const value = Array.isArray(f.value) ? f.value.map((x) => escapePart(scalarToStr(x))).join("|") : escapePart(scalarToStr(f.value));
+  return `${escapePart(f.field)}~${f.kind}~${f.op}~${value}`;
+}
+function parseFilter(tok) {
+  const parts = tok.split("~");
+  let field, kind, op, raw;
+  if (parts.length >= 4) {
+    [field, kind, op, raw] = [unescapePart(parts[0]), parts[1], parts[2], parts[3] ?? ""];
+  } else {
+    [field, op, raw] = [unescapePart(parts[0]), parts[1], parts[2] ?? ""];
+    kind = kindFromOp(op);
+  }
+  if (!field || !op) return null;
+  const value = ARRAY_OPS.has(op) ? raw.split("|").filter((s) => s !== "").map((s) => parseScalar(unescapePart(s), kind)) : parseScalar(unescapePart(raw), kind);
+  return { field, kind, op, value };
+}
+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(serializeFilter).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(parseFilter).filter((f) => f !== null);
+  }
+  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/hooks/useAnchoredPosition.ts
+var import_react3 = require("react");
+
+// src/overlay-position.ts
+var OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+function parsePlacement(p) {
+  const [side, align] = p.split("-");
+  return { side, align: align ?? "center" };
+}
+var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+function spaceOn(side, a, vp, offset) {
+  switch (side) {
+    case "top":
+      return a.y - offset;
+    case "bottom":
+      return vp.height - (a.y + a.height) - offset;
+    case "left":
+      return a.x - offset;
+    case "right":
+      return vp.width - (a.x + a.width) - offset;
+  }
+}
+function fitsOn(side, a, f, vp, offset, padding) {
+  const need = side === "top" || side === "bottom" ? f.height : f.width;
+  return spaceOn(side, a, vp, offset) >= need + padding;
+}
+function computePosition(anchor, floating, viewport, options = {}) {
+  const { placement = "bottom-start", offset = 6, padding = 8, flip = true, shift = true } = options;
+  const { side: preferred, align } = parsePlacement(placement);
+  let side = preferred;
+  if (flip && !fitsOn(side, anchor, floating, viewport, offset, padding)) {
+    const opp = OPPOSITE[side];
+    if (fitsOn(opp, anchor, floating, viewport, offset, padding) || spaceOn(opp, anchor, viewport, offset) > spaceOn(side, anchor, viewport, offset)) {
+      side = opp;
+    }
+  }
+  let x, y;
+  const horizontal = side === "top" || side === "bottom";
+  if (side === "top") y = anchor.y - floating.height - offset;
+  else if (side === "bottom") y = anchor.y + anchor.height + offset;
+  else if (side === "left") x = anchor.x - floating.width - offset;
+  else x = anchor.x + anchor.width + offset;
+  if (horizontal) {
+    const start = anchor.x;
+    const end = anchor.x + anchor.width - floating.width;
+    const center = anchor.x + (anchor.width - floating.width) / 2;
+    x = align === "start" ? start : align === "end" ? end : center;
+    if (shift) x = clamp(x, padding, Math.max(padding, viewport.width - floating.width - padding));
+  } else {
+    const start = anchor.y;
+    const end = anchor.y + anchor.height - floating.height;
+    const center = anchor.y + (anchor.height - floating.height) / 2;
+    y = align === "start" ? start : align === "end" ? end : center;
+    if (shift) y = clamp(y, padding, Math.max(padding, viewport.height - floating.height - padding));
+  }
+  return {
+    x,
+    y,
+    placement: align === "center" ? side : `${side}-${align}`,
+    side,
+    align
+  };
+}
+
+// src/hooks/useAnchoredPosition.ts
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? import_react3.useLayoutEffect : import_react3.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 });
+  opts.current = { placement, offset, padding };
+  const reposition = (0, import_react3.useCallback)(() => {
+    const anchorEl = resolve(anchor);
+    const floating = floatingRef.current;
+    if (!anchorEl || !floating) return;
+    const s = floating.style;
+    s.position = "fixed";
+    s.inset = "auto";
+    s.margin = "0";
+    const a = anchorEl.getBoundingClientRect();
+    const { placement: p, offset: o, padding: pad } = opts.current;
+    const pos = computePosition(
+      { x: a.x, y: a.y, width: a.width, height: a.height },
+      { width: floating.offsetWidth, height: floating.offsetHeight },
+      { width: window.innerWidth, height: window.innerHeight },
+      { placement: p, offset: o, padding: pad }
+    );
+    s.left = `${Math.round(pos.x)}px`;
+    s.top = `${Math.round(pos.y)}px`;
+    floating.dataset.placement = pos.placement;
+  }, [anchor, floatingRef]);
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    reposition();
+    const onScroll = () => reposition();
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [open, reposition]);
+  return reposition;
+}
+
+// src/components/Button.tsx
+var import_react4 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Button = (0, import_react2.forwardRef)(
+var Button = (0, import_react4.forwardRef)(
   ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
@@ -149,9 +609,9 @@ function ButtonGroup({ children, className }) {
 }
 
 // src/components/Input.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Input = (0, import_react3.forwardRef)(
+var Input = (0, import_react5.forwardRef)(
   ({ size = "md", invalid, valid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "input",
     {
@@ -184,9 +644,9 @@ function InputGroup({ children, leadingIcon, trailingIcon, className }) {
 }
 
 // src/components/Textarea.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Textarea = (0, import_react4.forwardRef)(
+var Textarea = (0, import_react6.forwardRef)(
   ({ invalid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "textarea",
     {
@@ -200,9 +660,9 @@ var Textarea = (0, import_react4.forwardRef)(
 Textarea.displayName = "Textarea";
 
 // src/components/Select.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Select = (0, import_react5.forwardRef)(
+var Select = (0, import_react7.forwardRef)(
   ({ size = "md", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "select",
     {
@@ -215,14 +675,14 @@ var Select = (0, import_react5.forwardRef)(
 Select.displayName = "Select";
 
 // src/components/Checkbox.tsx
-var import_react6 = require("react");
+var import_react8 = 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_react8.forwardRef)(
   ({ label, indeterminate, className, ...props }, forwardedRef) => {
-    const innerRef = (0, import_react6.useRef)(null);
-    (0, import_react6.useEffect)(() => {
+    const innerRef = (0, import_react8.useRef)(null);
+    (0, import_react8.useEffect)(() => {
       const el = innerRef.current;
       if (el) el.indeterminate = !!indeterminate;
     }, [indeterminate]);
@@ -247,9 +707,9 @@ var Checkbox = (0, import_react6.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Radio.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Radio = (0, import_react7.forwardRef)(
+var Radio = (0, import_react9.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 +722,9 @@ function RadioGroup({ children, className }) {
 }
 
 // src/components/Switch.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Switch = (0, import_react8.forwardRef)(
+var Switch = (0, import_react10.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" }),
@@ -274,14 +734,20 @@ var Switch = (0, import_react8.forwardRef)(
 Switch.displayName = "Switch";
 
 // src/components/Field.tsx
+var import_react11 = 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 msgId = `${uid}-msg`;
+  const describedBy = error || success || hint ? msgId : void 0;
+  const control = (0, import_react11.isValidElement)(children) ? (0, import_react11.cloneElement)(children, {
+    "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || 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, "data-required": required || void 0, children: label }),
-    children,
-    error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-field__error", children: error }),
-    success && !error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-field__success", children: success }),
-    hint && !error && !success && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-field__hint", children: hint })
+    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", children: success }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-field__hint", children: hint }) : null })
   ] });
 }
 
@@ -411,11 +877,11 @@ function ListItem({ title, meta, trail, leading, children, className, ...props }
 }
 
 // src/components/DescriptionList.tsx
-var import_react9 = require("react");
+var import_react12 = 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_react12.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 +896,14 @@ function DescriptionItem({ term, children }) {
 }
 
 // src/components/Tabs.tsx
-var import_react10 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TabsCtx = (0, import_react10.createContext)({});
+var TabsCtx = (0, import_react13.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_react13.useContext)(TabsCtx);
   const selected = ctx.value === value;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
@@ -457,17 +923,49 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
 }
 
 // src/components/AppShell.tsx
+var import_react14 = 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_react14.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_react15 = 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 +1019,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_react15.useState)(defaultExpanded);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uix-navgroup", children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "button",
@@ -589,7 +1087,7 @@ function StarButton({
 }
 
 // src/components/NavFavourites.tsx
-var import_react12 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   "svg",
@@ -653,13 +1151,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_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_react12.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const id = focusAfterRef.current;
     if (!id) return;
     focusAfterRef.current = null;
@@ -770,18 +1268,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_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 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_react16.useEffect)(() => {
     if (open) itemRefs.current[0]?.focus();
   }, [open]);
   const closeAndReturnFocus = () => {
@@ -966,16 +1464,17 @@ function Spinner({ size = "md", accent, className, ...props }) {
 // src/components/Toast.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
+  const assertive = tone === "danger";
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: cx("uix-toast", tone && `uix-toast--${tone}`, className),
       "data-leaving": leaving || void 0,
-      role: "status",
-      "aria-live": "polite",
+      role: assertive ? "alert" : "status",
+      "aria-live": assertive ? "assertive" : "polite",
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "uix-toast__icon", children: icon }),
+        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", 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 })
@@ -986,7 +1485,7 @@ function Toast({ title, message, tone, icon, onClose, leaving, className, ...pro
   );
 }
 function Toaster({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx("uix-toaster", className), "aria-live": "polite", "aria-atomic": "false", ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx("uix-toaster", className), ...props, children });
 }
 
 // src/components/Table.tsx
@@ -998,6 +1497,7 @@ function Table({
   density = "standard",
   zebra = true,
   pinnedCol,
+  fixed,
   rowPeek,
   v2,
   className,
@@ -1007,7 +1507,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 +1522,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 +1551,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");
@@ -1172,9 +1722,64 @@ function Stat({ label, value, icon, meta, trend, className, ...props }) {
 }
 
 // src/components/Tooltip.tsx
+var import_react17 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-function Tooltip({ label, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "data-uix-tip": label, ...props, children });
+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)();
+  useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
+  const show = () => {
+    const b = bubbleRef.current;
+    if (b && !b.matches(":popover-open")) {
+      try {
+        b.showPopover();
+      } catch {
+      }
+    }
+    setOpen(true);
+  };
+  const hide = () => {
+    const b = bubbleRef.current;
+    if (b && b.matches(":popover-open")) {
+      try {
+        b.hidePopover();
+      } catch {
+      }
+    }
+    setOpen(false);
+  };
+  (0, import_react17.useEffect)(() => () => {
+    const b = bubbleRef.current;
+    if (b && b.matches(":popover-open")) {
+      try {
+        b.hidePopover();
+      } catch {
+      }
+    }
+  }, []);
+  const bubbleAttr = { popover: "manual" };
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    "span",
+    {
+      ref: triggerRef,
+      className: cx("uix-tooltip", className),
+      "aria-describedby": id,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") hide();
+      },
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { ref: bubbleRef, id, role: "tooltip", className: "uix-tooltip__bubble", ...bubbleAttr, children: label })
+      ]
+    }
+  );
 }
 
 // src/components/States.tsx
@@ -1266,72 +1871,140 @@ 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_react18 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var SegmentedCtx = (0, import_react18.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_react18.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");
-function Popover({ popover = "auto", children, className, ...props }) {
+var import_react19 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function Popover({
+  popover = "auto",
+  anchor,
+  placement = "bottom-start",
+  offset = 6,
+  className,
+  children,
+  ...props
+}) {
+  const ref = (0, import_react19.useRef)(null);
+  const [open, setOpen] = (0, import_react19.useState)(false);
   const popoverAttr = { popover };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
+  const reposition = useAnchoredPosition(anchor ?? null, ref, {
+    open: open && !!anchor,
+    placement,
+    offset
+  });
+  (0, import_react19.useEffect)(() => {
+    const el = ref.current;
+    if (!el || !anchor) return;
+    const sync = () => {
+      const isOpen = el.matches(":popover-open");
+      if (isOpen) reposition();
+      setOpen(isOpen);
+    };
+    el.addEventListener("toggle", sync);
+    return () => el.removeEventListener("toggle", sync);
+  }, [anchor, reposition]);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, 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 +2016,7 @@ function InboxItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       role: "option",
@@ -1353,82 +2026,158 @@ 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" }) });
-function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
+var import_react20 = require("react");
+
+// src/tree-model.ts
+function flattenTree(nodes, expanded, level = 1) {
+  const out = [];
+  const setsize = nodes.length;
+  nodes.forEach((node, i) => {
+    const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+    const isExpanded = hasChildren && expanded.has(node.id);
+    out.push({ node, level, setsize, posinset: i + 1, hasChildren, isExpanded });
+    if (isExpanded) out.push(...flattenTree(node.children, expanded, level + 1));
+  });
+  return out;
+}
+function treeNav(flat, currentId, key) {
+  const idx = flat.findIndex((f) => f.node.id === currentId);
+  if (idx < 0) return {};
+  const cur = flat[idx];
+  const focusAt = (i) => {
+    const clamped = Math.max(0, Math.min(flat.length - 1, i));
+    return { focusId: flat[clamped]?.node.id };
+  };
+  switch (key) {
+    case "ArrowDown":
+      return focusAt(idx + 1);
+    case "ArrowUp":
+      return focusAt(idx - 1);
+    case "Home":
+      return focusAt(0);
+    case "End":
+      return focusAt(flat.length - 1);
+    case "ArrowRight":
+      if (cur.hasChildren && !cur.isExpanded) return { toggleId: cur.node.id };
+      if (cur.hasChildren && cur.isExpanded) return focusAt(idx + 1);
+      return {};
+    case "ArrowLeft":
+      if (cur.hasChildren && cur.isExpanded) return { toggleId: cur.node.id };
+      for (let i = idx - 1; i >= 0; i--) {
+        if (flat[i].level === cur.level - 1) return { focusId: flat[i].node.id };
+      }
+      return {};
+    case "Enter":
+    case " ":
+      return cur.hasChildren ? { toggleId: cur.node.id, selectId: cur.node.id } : { selectId: cur.node.id };
+    default:
+      return {};
+  }
+}
+
+// src/components/Tree.tsx
+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, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1 }) {
   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)(
-      "button",
-      {
-        className: "uix-tree__row",
-        "aria-expanded": hasChildren ? isExpanded : void 0,
-        "aria-selected": selected === node.id,
-        onClick: () => {
-          if (hasChildren) onToggle(node.id);
-          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 }),
-          node.label
-        ]
-      }
-    ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      TreeNode,
-      {
-        node: child,
-        expanded,
-        selected,
-        onToggle,
-        onSelect,
-        level: level + 1
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "li",
+    {
+      role: "treeitem",
+      "aria-level": level,
+      "aria-expanded": hasChildren ? isExpanded : void 0,
+      "aria-selected": selectable ? selected === node.id : void 0,
+      "data-id": node.id,
+      tabIndex: tabbableId === node.id ? 0 : -1,
+      className: "uix-tree__item",
+      onFocus: (e) => {
+        if (e.target === e.currentTarget) onFocusNode(node.id);
       },
-      child.id
-    )) })
-  ] });
+      onClick: (e) => {
+        e.stopPropagation();
+        if (hasChildren) onToggle(node.id);
+        onSelect?.(node.id);
+        onFocusNode(node.id);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "uix-tree__row", children: [
+          /* @__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 }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "uix-tree__label", children: node.label })
+        ] }),
+        hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { role: "group", className: "uix-tree__group", children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          TreeNode,
+          {
+            node: child,
+            expanded,
+            selected,
+            selectable,
+            tabbableId,
+            onToggle,
+            onSelect,
+            onFocusNode,
+            level: level + 1
+          },
+          child.id
+        )) })
+      ]
+    }
+  );
 }
-function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react13.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
+function Tree({
+  nodes,
+  expanded: controlledExpanded,
+  defaultExpanded,
+  selected,
+  onToggle,
+  onSelect,
+  virtualize,
+  rowHeight = 32,
+  maxHeight = 384,
+  className,
+  ...props
+}) {
+  const [internalExpanded, setInternalExpanded] = (0, import_react20.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
   const expanded = controlledExpanded ?? internalExpanded;
-  function handleToggle(id) {
+  const rootRef = (0, import_react20.useRef)(null);
+  const [focusedId, setFocusedId] = (0, import_react20.useState)(void 0);
+  const selectable = selected !== void 0 || onSelect != null;
+  const handleToggle = (0, import_react20.useCallback)((id) => {
     if (!controlledExpanded) {
       setInternalExpanded((prev) => {
         const next = new Set(prev);
@@ -1438,41 +2187,231 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
       });
     }
     onToggle?.(id);
+  }, [controlledExpanded, onToggle]);
+  const flat = (0, import_react20.useMemo)(() => flattenTree(nodes, expanded), [nodes, expanded]);
+  const useVirtual = virtualize ?? shouldVirtualize(flat.length);
+  const tabbableId = focusedId ?? selected ?? nodes[0]?.id;
+  if (useVirtual) {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      VirtualTreeView,
+      {
+        flat,
+        rowHeight,
+        maxHeight,
+        selectable,
+        selected,
+        tabbableId,
+        onToggle: handleToggle,
+        onSelect,
+        focusedId,
+        setFocusedId,
+        className,
+        ...props
+      }
+    );
   }
-  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)(
+  const treeItems = () => Array.from(rootRef.current?.querySelectorAll('[role="treeitem"]') ?? []);
+  const focusItem = (el) => {
+    if (el) {
+      el.focus();
+      setFocusedId(el.dataset.id);
+    }
+  };
+  const onKeyDown = (e) => {
+    const cur = e.target.closest('[role="treeitem"]');
+    if (!cur || !rootRef.current?.contains(cur)) return;
+    const list = treeItems();
+    const idx = list.indexOf(cur);
+    const id = cur.dataset.id;
+    const exp = cur.getAttribute("aria-expanded");
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusItem(list[Math.min(idx + 1, list.length - 1)]);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusItem(list[Math.max(idx - 1, 0)]);
+        break;
+      case "Home":
+        e.preventDefault();
+        focusItem(list[0]);
+        break;
+      case "End":
+        e.preventDefault();
+        focusItem(list[list.length - 1]);
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        if (exp === "false") handleToggle(id);
+        else if (exp === "true") focusItem(cur.querySelector(':scope > [role="group"] > [role="treeitem"]'));
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (exp === "true") handleToggle(id);
+        else focusItem(cur.parentElement?.closest('[role="treeitem"]'));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (exp !== null) handleToggle(id);
+        onSelect?.(id);
+        setFocusedId(id);
+        break;
+      default:
+        break;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { ref: rootRef, className: cx("uix-tree", className), role: "tree", onKeyDown, ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     TreeNode,
     {
       node,
       expanded,
       selected,
+      selectable,
+      tabbableId,
       onToggle: handleToggle,
-      onSelect
+      onSelect,
+      onFocusNode: setFocusedId,
+      level: 1
     },
     node.id
   )) });
 }
+function VirtualTreeView({
+  flat,
+  rowHeight,
+  maxHeight,
+  selectable,
+  selected,
+  tabbableId,
+  onToggle,
+  onSelect,
+  focusedId,
+  setFocusedId,
+  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 win = virtualWindow(scrollTop, maxHeight, rowHeight, flat.length);
+  const rows = flat.slice(win.start, win.end);
+  (0, import_react20.useEffect)(() => {
+    if (!pendingFocus.current || focusedId == null) return;
+    const el = scrollRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(focusedId)}"]`);
+    if (el) {
+      el.focus();
+      pendingFocus.current = false;
+    }
+  }, [focusedId, win.start, win.end]);
+  const moveTo = (id) => {
+    const i = flat.findIndex((f) => f.node.id === id);
+    if (i < 0) return;
+    const top = i * rowHeight;
+    let next = scrollTop;
+    if (top < scrollTop) next = top;
+    else if (top + rowHeight > scrollTop + maxHeight) next = top + rowHeight - maxHeight;
+    if (next !== scrollTop) {
+      if (scrollRef.current) scrollRef.current.scrollTop = next;
+      setScrollTop(next);
+    }
+    pendingFocus.current = true;
+    setFocusedId(id);
+  };
+  const onKeyDown = (e) => {
+    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;
+    e.preventDefault();
+    if (act.toggleId !== void 0) onToggle(act.toggleId);
+    if (act.selectId !== void 0) {
+      onSelect?.(act.selectId);
+      if (act.focusId === void 0) {
+        pendingFocus.current = true;
+        setFocusedId(act.selectId);
+      }
+    }
+    if (act.focusId !== void 0) moveTo(act.focusId);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "ul",
+    {
+      ref: scrollRef,
+      className: cx("uix-tree", "uix-tree--virtual", className),
+      role: "tree",
+      style: { maxHeight, overflow: "auto" },
+      onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+      onKeyDown,
+      ...props,
+      children: [
+        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",
+            {
+              role: "treeitem",
+              "aria-level": f.level,
+              "aria-setsize": f.setsize,
+              "aria-posinset": f.posinset,
+              "aria-expanded": f.hasChildren ? f.isExpanded : void 0,
+              "aria-selected": selectable ? selected === f.node.id : void 0,
+              "data-id": f.node.id,
+              tabIndex: tabbableId === f.node.id ? 0 : -1,
+              className: "uix-tree__item",
+              onFocus: (e) => {
+                if (e.target === e.currentTarget) setFocusedId(f.node.id);
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                if (f.hasChildren) onToggle(f.node.id);
+                onSelect?.(f.node.id);
+                setFocusedId(f.node.id);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "uix-tree__row", style: rowStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "uix-tree__toggle", children: f.hasChildren && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronIcon2, {}) }),
+                f.node.icon && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": "true", children: f.node.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "uix-tree__label", children: f.node.label })
+              ] })
+            },
+            f.node.id
+          );
+        }),
+        win.padBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("li", { "aria-hidden": "true", style: { height: win.padBottom } })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
   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 +2425,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   List,
   ListItem,
   LoadingState,
+  Mark,
   Meter,
   Modal,
   NavFavourites,
@@ -1500,6 +2440,10 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   Prose,
   Radio,
   RadioGroup,
+  RowAction,
+  RowActions,
+  Segmented,
+  SegmentedOption,
   Select,
   Sidebar,
   SidebarSection,
@@ -1525,6 +2469,28 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   Tr,
   Tree,
   UserChip,
+  applyFilters,
+  clampWidth,
+  computePosition,
   cx,
-  useDialog
+  flattenTree,
+  highlightSegments,
+  matchFilter,
+  mergePinned,
+  multiSort,
+  nextSortDir,
+  parseView,
+  reorder,
+  searchRows,
+  selectAllState,
+  serializeView,
+  shouldVirtualize,
+  toggleId,
+  togglePage,
+  toggleSort,
+  treeNav,
+  useAnchoredPosition,
+  useDialog,
+  useTable,
+  virtualWindow
 });