@tetrascience-npm/tetrascience-react-ui 1.0.0-beta.163.1 → 1.0.0-beta.164.1

package/dist/ui/tree.js

@@ -1,53 +1,58 @@
-import { jsx as i, jsxs as q, Fragment as se } from "react/jsx-runtime";
+import { jsx as i, jsxs as O, Fragment as ie } from "react/jsx-runtime";
 import { useControllableState as J } from "@radix-ui/react-use-controllable-state";
-import { cva as le } from "class-variance-authority";
-import { ChevronRightIcon as ie } from "lucide-react";
-import * as o from "react";
-import { TooltipProvider as ce, Tooltip as ue, TooltipTrigger as de, TooltipContent as fe } from "./tooltip.js";
-import { cn as N } from "../lib/utils.js";
-const ee = o.createContext(null), te = o.createContext(null);
-function re(e) {
-  const r = o.useContext(ee);
+import { cva as de } from "class-variance-authority";
+import { ChevronRightIcon as ce } from "lucide-react";
+import * as a from "react";
+import { TooltipProvider as ue, Tooltip as fe, TooltipTrigger as me, TooltipContent as pe } from "./tooltip.js";
+import { cn as I } from "../lib/utils.js";
+const te = a.createContext(null), re = a.createContext(null);
+function ne(e) {
+  const r = a.useContext(te);
   if (!r)
     throw new Error(`\`${e}\` must be rendered inside a \`Tree\`.`);
   return r;
 }
-const U = o.createContext(1), ne = o.createContext({
+const j = a.createContext(1), ae = a.createContext({
   posinset: 1,
   setsize: 1,
   lastBranchPos: 0
-}), W = o.createContext(null), me = [];
+}), G = a.createContext(null), ge = [];
 function Y(e) {
-  const r = o.useContext(W);
+  const r = a.useContext(G);
   if (!r)
     throw new Error(`\`${e}\` must be rendered inside a \`TreeItem\`.`);
   return r;
 }
-function Se() {
+function Me() {
   return Y("useTreeItem");
 }
-function pe(e) {
-  return o.useMemo(() => {
-    const r = o.Children.toArray(e), t = r.filter(o.isValidElement), s = t.length, a = (l) => l.props?.hasChildren === !0, c = t.reduce((l, m, p) => a(m) ? p + 1 : l, 0);
-    let u = 0;
-    return r.map((l, m) => o.isValidElement(l) ? (u += 1, /* @__PURE__ */ i(ne.Provider, { value: { posinset: u, setsize: s, lastBranchPos: c }, children: l }, l.key ?? m)) : l);
+function Q(e) {
+  return e.type === Re || e.type === Pe;
+}
+function he(e) {
+  return a.useMemo(() => {
+    const r = a.Children.toArray(e), t = r.filter(
+      (l) => a.isValidElement(l) && !Q(l)
+    ), s = t.length, o = (l) => l.props?.hasChildren === !0, d = t.reduce((l, f, p) => o(f) ? p + 1 : l, 0);
+    let c = 0;
+    return r.map((l, f) => !a.isValidElement(l) || Q(l) ? l : (c += 1, /* @__PURE__ */ i(ae.Provider, { value: { posinset: c, setsize: s, lastBranchPos: d }, children: l }, l.key ?? f)));
   }, [e]);
 }
-const M = '[role="treeitem"]';
-function D(e) {
-  return e ? [...e.querySelectorAll(M)] : [];
+const z = '[role="treeitem"][data-tree-item-id]';
+function A(e) {
+  return e ? [...e.querySelectorAll(z)] : [];
 }
-const he = '[role="group"], [role="tree"]';
-function G(e, r) {
-  return D(e).find((t) => t.dataset.treeItemId === r);
+const xe = '[role="group"], [role="tree"]';
+function U(e, r) {
+  return A(e).find((t) => t.dataset.treeItemId === r);
 }
-function Q(e) {
-  return e.parentElement?.closest(he) ?? null;
+function Z(e) {
+  return e.parentElement?.closest(xe) ?? null;
 }
-function ge(e) {
+function be(e) {
   const r = [];
-  for (let t = e.parentElement?.closest(M); t; )
-    t.dataset.treeItemId && r.unshift(t.dataset.treeItemId), t = t.parentElement?.closest(M);
+  for (let t = e.parentElement?.closest(z); t; )
+    t.dataset.treeItemId && r.unshift(t.dataset.treeItemId), t = t.parentElement?.closest(z);
   return r;
 }
 function oe(e) {
@@ -57,53 +62,53 @@ function oe(e) {
   for (const t of e.childNodes) r += oe(t);
   return r;
 }
-function xe(e) {
+function ve(e) {
   const r = e.getAttribute("aria-labelledby"), t = r ? e.ownerDocument.getElementById(r) : null;
   return (t ? oe(t) : "").trim().toLowerCase();
 }
-function be(e, r, t) {
-  const s = G(e, r);
+function Ie(e, r, t) {
+  const s = U(e, r);
   if (s) return s;
-  for (let a = t.length - 1; a >= 0; a -= 1) {
-    const c = G(e, t[a]);
-    if (c) return c;
+  for (let o = t.length - 1; o >= 0; o -= 1) {
+    const d = U(e, t[o]);
+    if (d) return d;
   }
-  return D(e)[0];
+  return A(e)[0];
 }
-function Ie(e, r) {
+function Te(e, r) {
   const t = e?.dataset.treeItemId;
   !e || !t || (r(t), e.focus());
 }
-const Te = 600, ve = 800;
+const ye = 600, Ce = 800;
 function K({ event: e, setFocusedId: r }, t) {
-  e.preventDefault(), Ie(t, r);
+  e.preventDefault(), Te(t, r);
 }
-function Z(e, r) {
-  const t = D(e.root);
+function ee(e, r) {
+  const t = A(e.root);
   K(e, t[t.indexOf(e.current) + r]);
 }
-const ye = {
-  ArrowDown: (e) => Z(e, 1),
-  ArrowUp: (e) => Z(e, -1),
+const we = {
+  ArrowDown: (e) => ee(e, 1),
+  ArrowUp: (e) => ee(e, -1),
   ArrowRight: (e) => {
-    const { event: r, current: t, id: s, hasChildren: a, expanded: c, setExpanded: u } = e;
-    if (a && !c) {
-      r.preventDefault(), u(s, !0);
+    const { event: r, current: t, id: s, hasChildren: o, expanded: d, setExpanded: c } = e;
+    if (o && !d) {
+      r.preventDefault(), c(s, !0);
       return;
     }
-    c && K(e, t.querySelector(M));
+    d && K(e, t.querySelector(z));
   },
   ArrowLeft: (e) => {
-    const { event: r, current: t, id: s, expanded: a, setExpanded: c } = e;
-    if (a) {
-      r.preventDefault(), c(s, !1);
+    const { event: r, current: t, id: s, expanded: o, setExpanded: d } = e;
+    if (o) {
+      r.preventDefault(), d(s, !1);
       return;
     }
-    K(e, t.parentElement?.closest(M));
+    K(e, t.parentElement?.closest(z));
   },
-  Home: (e) => K(e, D(e.root)[0]),
+  Home: (e) => K(e, A(e.root)[0]),
   End: (e) => {
-    const r = D(e.root);
+    const r = A(e.root);
     K(e, r[r.length - 1]);
   },
   Enter: (e) => {
@@ -111,151 +116,151 @@ const ye = {
   },
   /** Expands every collapsed branch among the focused node's siblings, the node itself included. */
   "*": (e) => {
-    const { event: r, root: t, current: s, expandIds: a } = e;
+    const { event: r, root: t, current: s, expandIds: o } = e;
     r.preventDefault();
-    const c = Q(s) ?? t, u = D(c).filter((l) => Q(l) === c).filter((l) => l.dataset.treeHasChildren === "true" && l.getAttribute("aria-expanded") !== "true").map((l) => l.dataset.treeItemId).filter((l) => !!l);
-    u.length && a(u);
+    const d = Z(s) ?? t, c = A(d).filter((l) => Z(l) === d).filter((l) => l.dataset.treeHasChildren === "true" && l.getAttribute("aria-expanded") !== "true").map((l) => l.dataset.treeItemId).filter((l) => !!l);
+    c.length && o(c);
   }
 };
-function Ce(e) {
+function Ee(e) {
   return e.key.length === 1 && e.key !== " ";
 }
-function Ee(e) {
-  const { event: r, root: t, current: s, typeahead: a, setTypeaheadMatch: c } = e;
-  r.preventDefault(), clearTimeout(a.timer), clearTimeout(a.fadeTimer), a.buffer += r.key.toLowerCase();
-  const { buffer: u } = a, m = u.length > 1 && [...u].every((x) => x === u[0]) ? u[0] : u;
-  c({ query: m, fading: !1 }), a.timer = setTimeout(() => {
-    a.buffer = "", c({ query: m, fading: !0 }), a.fadeTimer = setTimeout(() => c(null), ve);
-  }, Te);
-  const p = D(t), T = p.indexOf(s);
+function ke(e) {
+  const { event: r, root: t, current: s, typeahead: o, setTypeaheadMatch: d } = e;
+  r.preventDefault(), clearTimeout(o.timer), clearTimeout(o.fadeTimer), o.buffer += r.key.toLowerCase();
+  const { buffer: c } = o, f = c.length > 1 && [...c].every((x) => x === c[0]) ? c[0] : c;
+  d({ query: f, fading: !1 }), o.timer = setTimeout(() => {
+    o.buffer = "", d({ query: f, fading: !0 }), o.fadeTimer = setTimeout(() => d(null), Ce);
+  }, ye);
+  const p = A(t), T = p.indexOf(s);
   for (let x = 1; x <= p.length; x += 1) {
-    const v = p[(T + x) % p.length];
-    if (xe(v).startsWith(m)) {
-      K(e, v);
+    const y = p[(T + x) % p.length];
+    if (ve(y).startsWith(f)) {
+      K(e, y);
       return;
     }
   }
 }
-function _e({
+function Fe({
   className: e,
   children: r,
   expandedIds: t,
   defaultExpandedIds: s,
-  onExpandedChange: a,
-  selectedId: c,
-  defaultSelectedId: u = null,
+  onExpandedChange: o,
+  selectedId: d,
+  defaultSelectedId: c = null,
   onSelectedChange: l,
-  onActivate: m,
+  onActivate: f,
   expandOnSelect: p = !0,
   guides: T = "hover",
   onFocus: x,
-  onBlur: v,
-  ...P
+  onBlur: y,
+  ...D
 }) {
-  const R = o.useRef(null), [y, E] = J({
+  const R = a.useRef(null), [C, E] = J({
     prop: t,
     defaultProp: s ?? /* @__PURE__ */ new Set(),
-    onChange: a
-  }), [C, b] = J({
-    prop: c,
-    defaultProp: u,
+    onChange: o
+  }), [w, b] = J({
+    prop: d,
+    defaultProp: c,
     onChange: (n) => {
       n != null && l?.(n);
     }
-  }), [h, L] = o.useState(null), [w, S] = o.useState(null), [f, k] = o.useState(null), O = o.useRef([]), _ = o.useRef(!1), B = o.useRef({ buffer: "", timer: void 0, fadeTimer: void 0 });
-  o.useEffect(
+  }), [g, L] = a.useState(null), [k, S] = a.useState(null), [m, N] = a.useState(null), B = a.useRef([]), _ = a.useRef(!1), $ = a.useRef({ buffer: "", timer: void 0, fadeTimer: void 0 });
+  a.useEffect(
     () => () => {
-      clearTimeout(B.current.timer), clearTimeout(B.current.fadeTimer);
+      clearTimeout($.current.timer), clearTimeout($.current.fadeTimer);
     },
     []
   );
-  const A = o.useCallback(
-    (n, g) => {
-      E((d) => {
-        const I = new Set(d);
-        return g ? I.add(n) : I.delete(n), I;
+  const P = a.useCallback(
+    (n, h) => {
+      E((u) => {
+        const v = new Set(u);
+        return h ? v.add(n) : v.delete(n), v;
       });
     },
     [E]
-  ), z = o.useCallback(
+  ), M = a.useCallback(
     (n) => {
-      E((g) => {
-        const d = new Set(g);
-        for (const I of n) d.add(I);
-        return d;
+      E((h) => {
+        const u = new Set(h);
+        for (const v of n) u.add(v);
+        return u;
       });
     },
     [E]
-  ), H = o.useCallback(
-    (n, g, d) => {
-      b(n), p && g && A(n, !d), m?.(n);
+  ), H = a.useCallback(
+    (n, h, u) => {
+      b(n), p && h && P(n, !u), f?.(n);
     },
-    [b, p, A, m]
-  ), F = o.useCallback(
+    [b, p, P, f]
+  ), F = a.useCallback(
     (n) => {
-      const g = R.current, d = n.target?.closest(M), I = d?.dataset.treeItemId;
-      if (!g || !d || !I || !g.contains(d) || d !== n.currentTarget || n.ctrlKey || n.metaKey || n.altKey) return;
-      const j = ye[n.key] ?? (Ce(n) ? Ee : void 0);
-      j && j({
+      const h = R.current, u = n.target?.closest(z), v = u?.dataset.treeItemId;
+      if (!h || !u || !v || !h.contains(u) || u !== n.currentTarget || n.ctrlKey || n.metaKey || n.altKey) return;
+      const W = we[n.key] ?? (Ee(n) ? ke : void 0);
+      W && W({
         event: n,
-        root: g,
-        current: d,
-        id: I,
-        hasChildren: d.dataset.treeHasChildren === "true",
-        expanded: d.getAttribute("aria-expanded") === "true",
-        disabled: d.getAttribute("aria-disabled") === "true",
-        setExpanded: A,
-        expandIds: z,
+        root: h,
+        current: u,
+        id: v,
+        hasChildren: u.dataset.treeHasChildren === "true",
+        expanded: u.getAttribute("aria-expanded") === "true",
+        disabled: u.getAttribute("aria-disabled") === "true",
+        setExpanded: P,
+        expandIds: M,
         setFocusedId: L,
         activate: H,
-        typeahead: B.current,
-        setTypeaheadMatch: k
+        typeahead: $.current,
+        setTypeaheadMatch: N
       });
     },
-    [A, z, H]
-  ), $ = o.useCallback(() => {
+    [P, M, H]
+  ), q = a.useCallback(() => {
     const n = R.current;
     if (!n) return;
-    if (h == null) {
-      const X = C != null && !G(n, C) ? D(n)[0]?.dataset.treeItemId ?? null : null;
-      X !== w && S(X);
+    if (g == null) {
+      const X = w != null && !U(n, w) ? A(n)[0]?.dataset.treeItemId ?? null : null;
+      X !== k && S(X);
       return;
     }
-    const g = be(n, h, O.current), d = g?.dataset.treeItemId;
-    if (!g || !d) return;
-    d === h ? O.current = ge(g) : L(d);
-    const I = n.ownerDocument.activeElement;
-    _.current && (!n.contains(I) || I === n) && g.focus();
-  }, [h, C, w]);
-  o.useLayoutEffect($);
-  const V = o.useMemo(
+    const h = Ie(n, g, B.current), u = h?.dataset.treeItemId;
+    if (!h || !u) return;
+    u === g ? B.current = be(h) : L(u);
+    const v = n.ownerDocument.activeElement;
+    _.current && (!n.contains(v) || v === n) && h.focus();
+  }, [g, w, k]);
+  a.useLayoutEffect(q);
+  const V = a.useMemo(
     () => ({
-      expandedIds: y ?? /* @__PURE__ */ new Set(),
-      setExpanded: A,
-      expandIds: z,
-      selectedId: C ?? null,
+      expandedIds: C ?? /* @__PURE__ */ new Set(),
+      setExpanded: P,
+      expandIds: M,
+      selectedId: w ?? null,
       activateItem: H,
-      focusedId: h,
+      focusedId: g,
       setFocusedId: L,
-      entryId: w,
+      entryId: k,
       expandOnSelect: p,
       guides: T,
       onItemKeyDown: F
     }),
     [
-      y,
-      A,
-      z,
       C,
-      H,
-      h,
+      P,
+      M,
       w,
+      H,
+      g,
+      k,
       p,
       T,
       F
     ]
   );
-  return /* @__PURE__ */ i(ee.Provider, { value: V, children: /* @__PURE__ */ i(te.Provider, { value: f, children: /* @__PURE__ */ i(U.Provider, { value: 1, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(te.Provider, { value: V, children: /* @__PURE__ */ i(re.Provider, { value: m, children: /* @__PURE__ */ i(j.Provider, { value: 1, children: /* @__PURE__ */ i(
     "div",
     {
       ref: R,
@@ -267,80 +272,80 @@ function _e({
         x?.(n), _.current = !0;
       },
       onBlur: (n) => {
-        v?.(n), n.currentTarget.contains(n.relatedTarget) || (_.current = !1);
+        y?.(n), n.currentTarget.contains(n.relatedTarget) || (_.current = !1);
       },
-      className: N(
+      className: I(
         "group/tree text-foreground flex w-full flex-col text-sm",
         "[--tree-indent:1.25rem] [--tree-guide-color:color-mix(in_oklch,var(--muted-foreground)_40%,var(--background))]",
         e
       ),
-      ...P,
-      children: /* @__PURE__ */ i(ce, { delayDuration: 500, children: /* @__PURE__ */ i(ae, { children: r }) })
+      ...D,
+      children: /* @__PURE__ */ i(ue, { delayDuration: 500, children: /* @__PURE__ */ i(se, { children: r }) })
     }
   ) }) }) });
 }
-function ae({ children: e }) {
-  return pe(e);
+function se({ children: e }) {
+  return he(e);
 }
-function Me({
+function Ke({
   className: e,
   children: r,
   id: t,
   hasChildren: s = !1,
-  disabled: a = !1,
-  onClick: c,
-  onFocus: u,
+  disabled: o = !1,
+  onClick: d,
+  onFocus: c,
   onKeyDown: l,
-  style: m,
+  style: f,
   ...p
 }) {
-  const { expandedIds: T, setExpanded: x, selectedId: v, activateItem: P, focusedId: R, setFocusedId: y, entryId: E, onItemKeyDown: C } = re("TreeItem"), b = o.useContext(U), { posinset: h, setsize: L, lastBranchPos: w } = o.useContext(ne), S = `${o.useId()}-label`, f = s && T.has(t), k = v === t, O = o.useCallback(() => {
-    s && x(t, !f);
-  }, [s, x, t, f]), _ = o.useCallback(() => {
-    a || (y(t), P(t, s, f));
-  }, [a, y, t, P, s, f]), B = b === 1 && h === 1, A = v == null ? B : v === t, z = R ? R === t : E ? E === t : A, F = o.useContext(W)?.trunkLevels ?? me, $ = o.useMemo(
-    () => b > 1 && h < w ? [...F, b - 1] : F,
-    [F, b, h, w]
-  ), V = o.useMemo(
+  const { expandedIds: T, setExpanded: x, selectedId: y, activateItem: D, focusedId: R, setFocusedId: C, entryId: E, onItemKeyDown: w } = ne("TreeItem"), b = a.useContext(j), { posinset: g, setsize: L, lastBranchPos: k } = a.useContext(ae), S = `${a.useId()}-label`, m = s && T.has(t), N = y === t, B = a.useCallback(() => {
+    s && x(t, !m);
+  }, [s, x, t, m]), _ = a.useCallback(() => {
+    o || (C(t), D(t, s, m));
+  }, [o, C, t, D, s, m]), $ = b === 1 && g === 1, P = y == null ? $ : y === t, M = R ? R === t : E ? E === t : P, F = a.useContext(G)?.trunkLevels ?? ge, q = a.useMemo(
+    () => b > 1 && g < k ? [...F, b - 1] : F,
+    [F, b, g, k]
+  ), V = a.useMemo(
     () => ({
       id: t,
       labelId: S,
       level: b,
-      expanded: f,
+      expanded: m,
       hasChildren: s,
-      selected: k,
-      disabled: a,
-      trunkLevels: $,
-      toggle: O,
+      selected: N,
+      disabled: o,
+      trunkLevels: q,
+      toggle: B,
       select: _
     }),
-    [t, S, b, f, s, k, a, $, O, _]
+    [t, S, b, m, s, N, o, q, B, _]
   );
-  return /* @__PURE__ */ i(W.Provider, { value: V, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(G.Provider, { value: V, children: /* @__PURE__ */ i(
     "div",
     {
       ...p,
       "data-slot": "tree-item",
       "data-tree-item-id": t,
       "data-tree-has-children": s,
-      "data-state": f ? "expanded" : "collapsed",
+      "data-state": m ? "expanded" : "collapsed",
       role: "treeitem",
       "aria-labelledby": S,
-      "aria-expanded": s ? f : void 0,
+      "aria-expanded": s ? m : void 0,
       "aria-level": b,
-      "aria-posinset": h,
+      "aria-posinset": g,
       "aria-setsize": L,
-      "aria-selected": k,
-      "aria-disabled": a || void 0,
-      tabIndex: z ? 0 : -1,
+      "aria-selected": N,
+      "aria-disabled": o || void 0,
+      tabIndex: M ? 0 : -1,
       onKeyDown: (n) => {
-        l?.(n), !n.defaultPrevented && C(n);
+        l?.(n), !n.defaultPrevented && w(n);
       },
       onClick: (n) => {
-        c?.(n), !n.defaultPrevented && n.target.closest(M) === n.currentTarget && _();
+        d?.(n), !n.defaultPrevented && n.target.closest(z) === n.currentTarget && _();
       },
       onFocus: (n) => {
-        u?.(n), n.target === n.currentTarget && y(t);
+        c?.(n), n.target === n.currentTarget && C(t);
       },
       style: {
         // Inherited by the label, which draws the elbow from the same two values.
@@ -351,9 +356,9 @@ function Me({
         // Shared by the elbow's corner and by where the same-column trunk picks up, so the two
         // meet exactly instead of overlapping or leaving a gap.
         "--tree-elbow-radius": "0.5rem",
-        ...m
+        ...f
       },
-      className: N(
+      className: I(
         "relative outline-none",
         // Direct-child selectors, deliberately not `group-*/tree-item`: tree items nest, and a
         // group variant matches *any* ancestor, so a focused or selected parent painted its focus
@@ -366,7 +371,7 @@ function Me({
     }
   ) });
 }
-const we = le(
+const le = de(
   "flex w-full min-w-0 cursor-default items-center gap-1.5 rounded-md pr-2 text-left transition-colors select-none",
   {
     variants: {
@@ -381,27 +386,27 @@ const we = le(
     }
   }
 );
-function ze({ className: e, children: r, size: t, style: s, icon: a, trailing: c, ...u }) {
-  const { labelId: l, level: m, expanded: p, hasChildren: T, selected: x, disabled: v, trunkLevels: P, toggle: R } = Y("TreeItemLabel"), { guides: y } = re("TreeItemLabel"), E = o.useContext(te), C = y !== "none" && m > 1 && T, b = y !== "none" && (C || P.length > 0), h = o.useRef(null), [L, w] = o.useState(!1), S = (f) => {
-    const k = h.current;
-    w(f && !!k && k.scrollWidth > k.clientWidth);
+function Oe({ className: e, children: r, size: t, style: s, icon: o, trailing: d, ...c }) {
+  const { labelId: l, level: f, expanded: p, hasChildren: T, selected: x, disabled: y, trunkLevels: D, toggle: R } = Y("TreeItemLabel"), { guides: C } = ne("TreeItemLabel"), E = a.useContext(re), w = C !== "none" && f > 1 && T, b = C !== "none" && (w || D.length > 0), g = a.useRef(null), [L, k] = a.useState(!1), S = (m) => {
+    const N = g.current;
+    k(m && !!N && N.scrollWidth > N.clientWidth);
   };
-  return /* @__PURE__ */ q(
+  return /* @__PURE__ */ O(
     "div",
     {
-      ...u,
+      ...c,
       id: l,
       "data-slot": "tree-item-label",
-      style: { paddingInlineStart: `calc(var(--tree-indent) * ${m - 1} + 0.25rem)`, ...s },
-      className: N(
-        we({ size: t }),
+      style: { paddingInlineStart: `calc(var(--tree-indent) * ${f - 1} + 0.25rem)`, ...s },
+      className: I(
+        le({ size: t }),
         "relative border border-transparent",
         // Only selection paints a background — an open folder is already marked by its rotated
         // chevron, open-folder icon and the connectors running down from it.
         x ? "bg-accent text-accent-foreground font-medium" : "hover:bg-muted",
         // From this node's own state, not an ancestor selector: `aria-disabled` is per-node, so a
         // disabled folder must not dim the contents underneath it.
-        v && "pointer-events-none opacity-50",
+        y && "pointer-events-none opacity-50",
         e
       ),
       children: [
@@ -418,29 +423,29 @@ function ze({ className: e, children: r, size: t, style: s, icon: a, trailing: c
           // *padding* box. The label carries `border border-transparent` for its focus ring while the
           // `TreeItem` carries none, so one `--tree-guide-left` landed 1px apart on the two elements
           // and the elbow/trunk overlap read as a 2px line. Both now share this container.
-          /* @__PURE__ */ q(
+          /* @__PURE__ */ O(
             "span",
             {
               "data-slot": "tree-item-guides",
               "aria-hidden": "true",
-              className: N(
+              className: I(
                 "pointer-events-none absolute inset-0",
                 // The fade lives on the container, not on each line. Opacity on the parent renders the
                 // whole layer into one buffer and composites it once, so a seam between two segments
                 // can never double-expose mid-transition.
-                y === "hover" && "opacity-0 transition-opacity group-hover/tree:opacity-100 motion-reduce:transition-none"
+                C === "hover" && "opacity-0 transition-opacity group-hover/tree:opacity-100 motion-reduce:transition-none"
               ),
               children: [
-                P.map((f) => /* @__PURE__ */ i(
+                D.map((m) => /* @__PURE__ */ i(
                   "span",
                   {
                     "data-slot": "tree-item-guide-trunk",
-                    style: { left: `calc(var(--tree-indent) * ${f - 1} + 0.6875rem)` },
+                    style: { left: `calc(var(--tree-indent) * ${m - 1} + 0.6875rem)` },
                     className: "absolute top-[-0.4375rem] bottom-0 w-0 border-l border-[var(--tree-guide-color)]"
                   },
-                  f
+                  m
                 )),
-                C ? (
+                w ? (
                   // Down the guide line, then a rounded turn right, stopping just short of this row's
                   // chevron. Starts half a chevron above the row so the line emerges from under the
                   // parent's chevron instead of leaving a half-row gap.
@@ -448,7 +453,7 @@ function ze({ className: e, children: r, size: t, style: s, icon: a, trailing: c
                     "span",
                     {
                       "data-slot": "tree-item-guide-elbow",
-                      className: N(
+                      className: I(
                         "absolute top-[-0.4375rem] left-[var(--tree-guide-left)] border-[var(--tree-guide-color)]",
                         "h-[calc(50%+0.4375rem)] w-[var(--tree-elbow-run)] border-b border-l",
                         "rounded-bl-[var(--tree-elbow-radius)]"
@@ -470,54 +475,54 @@ function ze({ className: e, children: r, size: t, style: s, icon: a, trailing: c
             {
               "data-slot": "tree-item-indicator",
               "aria-hidden": "true",
-              onClick: (f) => {
-                f.stopPropagation(), R();
+              onClick: (m) => {
+                m.stopPropagation(), R();
               },
               className: "flex size-3.5 shrink-0 items-center justify-center text-muted-foreground",
-              children: /* @__PURE__ */ i(ie, { className: N("size-3.5 transition-transform", p && "rotate-90") })
+              children: /* @__PURE__ */ i(ce, { className: I("size-3.5 transition-transform", p && "rotate-90") })
             }
           )
         ) : /* @__PURE__ */ i("span", { "data-slot": "tree-item-indicator-spacer", "aria-hidden": "true", className: "size-3.5 shrink-0" }),
-        a ? /* @__PURE__ */ i(
+        o ? /* @__PURE__ */ i(
           "span",
           {
             "data-slot": "tree-item-icon",
             "aria-hidden": "true",
-            className: N(
+            className: I(
               "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0",
               x ? "text-accent-foreground" : "text-muted-foreground"
             ),
-            children: a
+            children: o
           }
         ) : null,
-        /* @__PURE__ */ q(ue, { open: L, onOpenChange: S, children: [
-          /* @__PURE__ */ i(de, { asChild: !0, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ O(fe, { open: L, onOpenChange: S, children: [
+          /* @__PURE__ */ i(me, { asChild: !0, children: /* @__PURE__ */ i(
             "span",
             {
-              ref: h,
+              ref: g,
               "data-slot": "tree-item-text",
               className: "-mx-1 min-w-0 flex-1 truncate px-1",
-              children: /* @__PURE__ */ i(ke, { match: E, children: r })
+              children: /* @__PURE__ */ i(Ne, { match: E, children: r })
             }
           ) }),
-          /* @__PURE__ */ i(fe, { children: r })
+          /* @__PURE__ */ i(pe, { children: r })
         ] }),
-        c ? /* @__PURE__ */ i("span", { "data-slot": "tree-item-trailing", className: "ml-auto flex shrink-0 items-center gap-1 [&_svg]:size-3.5", children: c }) : null
+        d ? /* @__PURE__ */ i("span", { "data-slot": "tree-item-trailing", className: "ml-auto flex shrink-0 items-center gap-1 [&_svg]:size-3.5", children: d }) : null
       ]
     }
   );
 }
-function ke({ match: e, children: r }) {
+function Ne({ match: e, children: r }) {
   if (!e || typeof r != "string" || !r.toLowerCase().startsWith(e.query))
     return r;
   const { query: t, fading: s } = e;
-  return /* @__PURE__ */ q(se, { children: [
+  return /* @__PURE__ */ O(ie, { children: [
     /* @__PURE__ */ i(
       "span",
       {
         "data-slot": "tree-item-typeahead-match",
         "data-state": s ? "fading" : "active",
-        className: N(
+        className: I(
           // The SW-2445 selected-state tokens: a primary tint that reads as "this is the match" on
           // a resting, hovered or selected row, in both themes. Plain spans, not `<mark>`, so the
           // label's accessible name is unchanged.
@@ -536,16 +541,75 @@ function ke({ match: e, children: r }) {
     r.slice(t.length)
   ] });
 }
-function Fe({ className: e, children: r, ...t }) {
-  const { expanded: s, level: a } = Y("TreeItemGroup");
-  return s ? /* @__PURE__ */ i(U.Provider, { value: a + 1, children: /* @__PURE__ */ i("div", { ...t, "data-slot": "tree-item-group", role: "group", className: N("flex flex-col", e), children: /* @__PURE__ */ i(ae, { children: r }) }) }) : null;
+function Be({ className: e, children: r, ...t }) {
+  const { expanded: s, level: o } = Y("TreeItemGroup");
+  return s ? /* @__PURE__ */ i(j.Provider, { value: o + 1, children: /* @__PURE__ */ i("div", { ...t, "data-slot": "tree-item-group", role: "group", className: I("flex flex-col", e), children: /* @__PURE__ */ i(se, { children: r }) }) }) : null;
+}
+function Re({ className: e, children: r, style: t, ...s }) {
+  const o = a.useContext(j);
+  return /* @__PURE__ */ O(
+    "div",
+    {
+      ...s,
+      "data-slot": "tree-empty",
+      role: "treeitem",
+      "aria-selected": "false",
+      tabIndex: -1,
+      style: { paddingInlineStart: `calc(var(--tree-indent) * ${o - 1} + 0.25rem)`, ...t },
+      className: I(
+        "text-muted-foreground flex h-7 w-full min-w-0 items-center gap-1.5 rounded-md border border-transparent pr-2 text-left text-sm [&_svg]:size-4 [&_svg]:shrink-0",
+        e
+      ),
+      children: [
+        /* @__PURE__ */ i("span", { "data-slot": "tree-item-indicator-spacer", "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+        r
+      ]
+    }
+  );
+}
+function Pe({ className: e, children: r = "Load more", icon: t, size: s, style: o, onClick: d, ...c }) {
+  const l = a.useContext(j);
+  return /* @__PURE__ */ i("div", { "data-slot": "tree-load-more", role: "treeitem", "aria-selected": "false", className: "flex w-full", children: /* @__PURE__ */ O(
+    "button",
+    {
+      ...c,
+      type: "button",
+      onClick: (f) => {
+        f.stopPropagation(), d?.(f);
+      },
+      style: { paddingInlineStart: `calc(var(--tree-indent) * ${l - 1} + 0.25rem)`, ...o },
+      className: I(
+        le({ size: s }),
+        "text-muted-foreground border border-transparent outline-none",
+        "hover:bg-muted hover:text-foreground",
+        "focus-visible:border-ring focus-visible:shadow-focus",
+        "active:bg-accent active:text-accent-foreground",
+        e
+      ),
+      children: [
+        /* @__PURE__ */ i("span", { "data-slot": "tree-item-indicator-spacer", "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+        t ? /* @__PURE__ */ i(
+          "span",
+          {
+            "data-slot": "tree-item-icon",
+            "aria-hidden": "true",
+            className: "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0",
+            children: t
+          }
+        ) : null,
+        /* @__PURE__ */ i("span", { className: "min-w-0 flex-1 truncate", children: r })
+      ]
+    }
+  ) });
 }
 export {
-  _e as Tree,
-  Me as TreeItem,
-  Fe as TreeItemGroup,
-  ze as TreeItemLabel,
-  we as treeItemLabelVariants,
-  Se as useTreeItem
+  Fe as Tree,
+  Re as TreeEmpty,
+  Ke as TreeItem,
+  Be as TreeItemGroup,
+  Oe as TreeItemLabel,
+  Pe as TreeLoadMore,
+  le as treeItemLabelVariants,
+  Me as useTreeItem
 };
 //# sourceMappingURL=tree.js.map