@tensor_1/react 2.6.0 → 2.7.0

package/dist/index.cjs

@@ -106,7 +106,9 @@ __export(src_exports, {
   UserChip: () => UserChip,
   applyFilters: () => applyFilters,
   clampWidth: () => clampWidth,
+  computePosition: () => computePosition,
   cx: () => cx,
+  flattenTree: () => flattenTree,
   highlightSegments: () => highlightSegments,
   matchFilter: () => matchFilter,
   mergePinned: () => mergePinned,
@@ -121,6 +123,8 @@ __export(src_exports, {
   toggleId: () => toggleId,
   togglePage: () => togglePage,
   toggleSort: () => toggleSort,
+  treeNav: () => treeNav,
+  useAnchoredPosition: () => useAnchoredPosition,
   useDialog: () => useDialog,
   useTable: () => useTable,
   virtualWindow: () => virtualWindow
@@ -134,17 +138,48 @@ 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]);
@@ -187,8 +222,36 @@ function toggleSort(keys, field, additive = false) {
 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);
@@ -247,13 +310,53 @@ function highlightSegments(text, query) {
   }
   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((f) => `${f.field}~${f.op}~${Array.isArray(f.value) ? f.value.join("|") : f.value ?? ""}`).join(","));
+  if (v.filters?.length) p.set("filter", v.filters.map(serializeFilter).join(","));
   return p.toString();
 }
 function parseView(qs) {
@@ -271,11 +374,9 @@ function parseView(qs) {
   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 };
-  });
+  if (filter) {
+    v.filters = filter.split(",").filter(Boolean).map(parseFilter).filter((f) => f !== null);
+  }
   return v;
 }
 function virtualWindow(scrollTop, viewportH, rowH, count, overscan = 6) {
@@ -376,10 +477,114 @@ function useTable(data, options = {}) {
   };
 }
 
-// src/components/Button.tsx
+// 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_react3.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",
     {
@@ -404,9 +609,9 @@ function ButtonGroup({ children, className }) {
 }
 
 // src/components/Input.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Input = (0, import_react4.forwardRef)(
+var Input = (0, import_react5.forwardRef)(
   ({ size = "md", invalid, valid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "input",
     {
@@ -439,9 +644,9 @@ function InputGroup({ children, leadingIcon, trailingIcon, className }) {
 }
 
 // src/components/Textarea.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Textarea = (0, import_react5.forwardRef)(
+var Textarea = (0, import_react6.forwardRef)(
   ({ invalid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "textarea",
     {
@@ -455,9 +660,9 @@ var Textarea = (0, import_react5.forwardRef)(
 Textarea.displayName = "Textarea";
 
 // src/components/Select.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Select = (0, import_react6.forwardRef)(
+var Select = (0, import_react7.forwardRef)(
   ({ size = "md", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "select",
     {
@@ -470,14 +675,14 @@ var Select = (0, import_react6.forwardRef)(
 Select.displayName = "Select";
 
 // src/components/Checkbox.tsx
-var import_react7 = 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_react7.forwardRef)(
+var Checkbox = (0, import_react8.forwardRef)(
   ({ label, indeterminate, className, ...props }, forwardedRef) => {
-    const innerRef = (0, import_react7.useRef)(null);
-    (0, import_react7.useEffect)(() => {
+    const innerRef = (0, import_react8.useRef)(null);
+    (0, import_react8.useEffect)(() => {
       const el = innerRef.current;
       if (el) el.indeterminate = !!indeterminate;
     }, [indeterminate]);
@@ -502,9 +707,9 @@ var Checkbox = (0, import_react7.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Radio.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Radio = (0, import_react8.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" }),
@@ -517,9 +722,9 @@ function RadioGroup({ children, className }) {
 }
 
 // src/components/Switch.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Switch = (0, import_react9.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" }),
@@ -529,14 +734,20 @@ var Switch = (0, import_react9.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 })
   ] });
 }
 
@@ -666,11 +877,11 @@ function ListItem({ title, meta, trail, leading, children, className, ...props }
 }
 
 // src/components/DescriptionList.tsx
-var import_react10 = 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_react10.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)),
@@ -685,14 +896,14 @@ function DescriptionItem({ term, children }) {
 }
 
 // src/components/Tabs.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TabsCtx = (0, import_react11.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_react11.useContext)(TabsCtx);
+  const ctx = (0, import_react13.useContext)(TabsCtx);
   const selected = ctx.value === value;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
@@ -712,7 +923,7 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
 }
 
 // src/components/AppShell.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function AppShell({
   nav,
@@ -727,7 +938,7 @@ function AppShell({
   ...props
 }) {
   const navState = nav ?? (collapsed ? "rail" : "full");
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!focus || !onExitFocus) return;
     const onKey = (e) => {
       if (e.key === "Escape") onExitFocus();
@@ -754,7 +965,7 @@ function AppShell({
 }
 
 // src/components/Sidebar.tsx
-var import_react13 = 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 }) {
@@ -808,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_react13.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",
@@ -876,7 +1087,7 @@ function StarButton({
 }
 
 // src/components/NavFavourites.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   "svg",
@@ -940,13 +1151,13 @@ function NavFavourites({
   emptyReason,
   className
 }) {
-  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 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_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const id = focusAfterRef.current;
     if (!id) return;
     focusAfterRef.current = null;
@@ -1057,18 +1268,18 @@ function FavouriteRow({
   onRemove,
   registerTrigger
 }) {
-  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 [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_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (open) itemRefs.current[0]?.focus();
   }, [open]);
   const closeAndReturnFocus = () => {
@@ -1253,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 })
@@ -1273,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
@@ -1510,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
@@ -1614,9 +1881,9 @@ function ComposerBar({ children, className, ...props }) {
 }
 
 // src/components/Segmented.tsx
-var import_react15 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var SegmentedCtx = (0, import_react15.createContext)({});
+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 }) });
 }
@@ -1627,7 +1894,7 @@ function SegmentedOption({
   onClick,
   ...props
 }) {
-  const ctx = (0, import_react15.useContext)(SegmentedCtx);
+  const ctx = (0, import_react18.useContext)(SegmentedCtx);
   const selected = ctx.value === value;
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "button",
@@ -1676,10 +1943,37 @@ function Note({ tone, icon, children, className, ...props }) {
 }
 
 // src/components/Popover.tsx
+var import_react19 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
-function Popover({ popover = "auto", children, className, ...props }) {
+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_runtime40.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
@@ -1766,48 +2060,124 @@ function KanbanCard({ title, meta, children, className, ...props }) {
 }
 
 // src/components/Tree.tsx
-var import_react16 = require("react");
+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, onToggle, onSelect, level = 0 }) {
+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_runtime44.jsxs)("li", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.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: [
+  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);
+      },
+      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 }),
-          node.label
-        ]
-      }
-    ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      TreeNode,
-      {
-        node: child,
-        expanded,
-        selected,
-        onToggle,
-        onSelect,
-        level: level + 1
-      },
-      child.id
-    )) })
-  ] });
+          /* @__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_react16.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);
@@ -1817,19 +2187,202 @@ 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_runtime44.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime44.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,
@@ -1918,7 +2471,9 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   UserChip,
   applyFilters,
   clampWidth,
+  computePosition,
   cx,
+  flattenTree,
   highlightSegments,
   matchFilter,
   mergePinned,
@@ -1933,6 +2488,8 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   toggleId,
   togglePage,
   toggleSort,
+  treeNav,
+  useAnchoredPosition,
   useDialog,
   useTable,
   virtualWindow