@tetrascience-npm/tetrascience-react-ui 1.0.0-beta.145.1 → 1.0.0-beta.147.1

package/dist/ui/tree.js

@@ -1,244 +1,359 @@
-import { jsx as a, jsxs as A } from "react/jsx-runtime";
-import { useControllableState as j } from "@radix-ui/react-use-controllable-state";
-import { cva as W } from "class-variance-authority";
-import { ChevronRightIcon as Y } from "lucide-react";
-import * as n from "react";
-import { TooltipProvider as J, Tooltip as Q, TooltipTrigger as X, TooltipContent as Z } from "./tooltip.js";
-import { cn as E } from "../lib/utils.js";
-const O = n.createContext(null);
-function G(e) {
-  const r = n.useContext(O);
+import { jsx as i, jsxs as q, Fragment as se } 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);
   if (!r)
     throw new Error(`\`${e}\` must be rendered inside a \`Tree\`.`);
   return r;
 }
-const B = n.createContext(1), H = n.createContext({
+const U = o.createContext(1), ne = o.createContext({
   posinset: 1,
   setsize: 1,
   lastBranchPos: 0
-}), K = n.createContext(null), ee = [];
-function M(e) {
-  const r = n.useContext(K);
+}), W = o.createContext(null), me = [];
+function Y(e) {
+  const r = o.useContext(W);
   if (!r)
     throw new Error(`\`${e}\` must be rendered inside a \`TreeItem\`.`);
   return r;
 }
-function ue() {
-  return M("useTreeItem");
+function Se() {
+  return Y("useTreeItem");
 }
-function te(e) {
-  return n.useMemo(() => {
-    const r = n.Children.toArray(e), t = r.filter(n.isValidElement), o = t.length, l = (c) => c.props?.hasChildren === !0, u = t.reduce((c, p, v) => l(p) ? v + 1 : c, 0);
-    let x = 0;
-    return r.map((c, p) => n.isValidElement(c) ? (x += 1, /* @__PURE__ */ a(H.Provider, { value: { posinset: x, setsize: o, lastBranchPos: u }, children: c }, c.key ?? p)) : c);
+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);
   }, [e]);
 }
-const R = '[role="treeitem"]';
-function $(e) {
-  return e ? [...e.querySelectorAll(R)] : [];
+const M = '[role="treeitem"]';
+function D(e) {
+  return e ? [...e.querySelectorAll(M)] : [];
 }
-function re(e, r) {
+const he = '[role="group"], [role="tree"]';
+function G(e, r) {
+  return D(e).find((t) => t.dataset.treeItemId === r);
+}
+function Q(e) {
+  return e.parentElement?.closest(he) ?? null;
+}
+function ge(e) {
+  const r = [];
+  for (let t = e.parentElement?.closest(M); t; )
+    t.dataset.treeItemId && r.unshift(t.dataset.treeItemId), t = t.parentElement?.closest(M);
+  return r;
+}
+function oe(e) {
+  if (e.nodeType === Node.TEXT_NODE) return e.textContent ?? "";
+  if (!(e instanceof HTMLElement) || e.getAttribute("aria-hidden") === "true") return "";
+  let r = "";
+  for (const t of e.childNodes) r += oe(t);
+  return r;
+}
+function xe(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);
+  if (s) return s;
+  for (let a = t.length - 1; a >= 0; a -= 1) {
+    const c = G(e, t[a]);
+    if (c) return c;
+  }
+  return D(e)[0];
+}
+function Ie(e, r) {
   const t = e?.dataset.treeItemId;
   !e || !t || (r(t), e.focus());
 }
-function L({ event: e, setFocusedId: r }, t) {
-  e.preventDefault(), re(t, r);
+const Te = 600, ve = 800;
+function K({ event: e, setFocusedId: r }, t) {
+  e.preventDefault(), Ie(t, r);
 }
-function F(e, r) {
-  const t = $(e.root);
-  L(e, t[t.indexOf(e.current) + r]);
+function Z(e, r) {
+  const t = D(e.root);
+  K(e, t[t.indexOf(e.current) + r]);
 }
-const ne = {
-  ArrowDown: (e) => F(e, 1),
-  ArrowUp: (e) => F(e, -1),
+const ye = {
+  ArrowDown: (e) => Z(e, 1),
+  ArrowUp: (e) => Z(e, -1),
   ArrowRight: (e) => {
-    const { event: r, current: t, id: o, hasChildren: l, expanded: u, setExpanded: x } = e;
-    if (l && !u) {
-      r.preventDefault(), x(o, !0);
+    const { event: r, current: t, id: s, hasChildren: a, expanded: c, setExpanded: u } = e;
+    if (a && !c) {
+      r.preventDefault(), u(s, !0);
       return;
     }
-    u && L(e, t.querySelector(R));
+    c && K(e, t.querySelector(M));
   },
   ArrowLeft: (e) => {
-    const { event: r, current: t, id: o, expanded: l, setExpanded: u } = e;
-    if (l) {
-      r.preventDefault(), u(o, !1);
+    const { event: r, current: t, id: s, expanded: a, setExpanded: c } = e;
+    if (a) {
+      r.preventDefault(), c(s, !1);
       return;
     }
-    L(e, t.parentElement?.closest(R));
+    K(e, t.parentElement?.closest(M));
   },
-  Home: (e) => L(e, $(e.root)[0]),
+  Home: (e) => K(e, D(e.root)[0]),
   End: (e) => {
-    const r = $(e.root);
-    L(e, r[r.length - 1]);
+    const r = D(e.root);
+    K(e, r[r.length - 1]);
   },
   Enter: (e) => {
     e.disabled || (e.event.preventDefault(), e.activate(e.id, e.hasChildren, e.expanded));
+  },
+  /** 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;
+    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);
   }
 };
-function me({
+function Ce(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);
+  for (let x = 1; x <= p.length; x += 1) {
+    const v = p[(T + x) % p.length];
+    if (xe(v).startsWith(m)) {
+      K(e, v);
+      return;
+    }
+  }
+}
+function _e({
   className: e,
   children: r,
   expandedIds: t,
-  defaultExpandedIds: o,
-  onExpandedChange: l,
-  selectedId: u,
-  defaultSelectedId: x = null,
-  onSelectedChange: c,
-  onActivate: p,
-  expandOnSelect: v = !0,
-  guides: C = "hover",
-  ...N
+  defaultExpandedIds: s,
+  onExpandedChange: a,
+  selectedId: c,
+  defaultSelectedId: u = null,
+  onSelectedChange: l,
+  onActivate: m,
+  expandOnSelect: p = !0,
+  guides: T = "hover",
+  onFocus: x,
+  onBlur: v,
+  ...P
 }) {
-  const D = n.useRef(null), [w, P] = j({
+  const R = o.useRef(null), [y, E] = J({
     prop: t,
-    defaultProp: o ?? /* @__PURE__ */ new Set(),
-    onChange: l
-  }), [b, z] = j({
-    prop: u,
-    defaultProp: x,
-    onChange: (s) => {
-      s != null && c?.(s);
+    defaultProp: s ?? /* @__PURE__ */ new Set(),
+    onChange: a
+  }), [C, b] = J({
+    prop: c,
+    defaultProp: u,
+    onChange: (n) => {
+      n != null && l?.(n);
     }
-  }), [m, g] = n.useState(null), h = n.useCallback(
-    (s, I) => {
-      P((d) => {
-        const k = new Set(d);
-        return I ? k.add(s) : k.delete(s), k;
+  }), [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(
+    () => () => {
+      clearTimeout(B.current.timer), clearTimeout(B.current.fadeTimer);
+    },
+    []
+  );
+  const A = o.useCallback(
+    (n, g) => {
+      E((d) => {
+        const I = new Set(d);
+        return g ? I.add(n) : I.delete(n), I;
+      });
+    },
+    [E]
+  ), z = o.useCallback(
+    (n) => {
+      E((g) => {
+        const d = new Set(g);
+        for (const I of n) d.add(I);
+        return d;
       });
     },
-    [P]
-  ), T = n.useCallback(
-    (s, I, d) => {
-      z(s), v && I && h(s, !d), p?.(s);
+    [E]
+  ), H = o.useCallback(
+    (n, g, d) => {
+      b(n), p && g && A(n, !d), m?.(n);
     },
-    [z, v, h, p]
-  ), y = n.useCallback(
-    (s) => {
-      const I = D.current, d = s.target?.closest(R), k = d?.dataset.treeItemId;
-      if (!I || !d || !k || !I.contains(d)) return;
-      const S = ne[s.key];
-      S && S({
-        event: s,
-        root: I,
+    [b, p, A, m]
+  ), F = o.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({
+        event: n,
+        root: g,
         current: d,
-        id: k,
+        id: I,
         hasChildren: d.dataset.treeHasChildren === "true",
         expanded: d.getAttribute("aria-expanded") === "true",
         disabled: d.getAttribute("aria-disabled") === "true",
-        setExpanded: h,
-        setFocusedId: g,
-        activate: T
+        setExpanded: A,
+        expandIds: z,
+        setFocusedId: L,
+        activate: H,
+        typeahead: B.current,
+        setTypeaheadMatch: k
       });
     },
-    [h, T]
-  ), i = n.useMemo(
+    [A, z, H]
+  ), $ = o.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);
+      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(
     () => ({
-      expandedIds: w ?? /* @__PURE__ */ new Set(),
-      setExpanded: h,
-      selectedId: b ?? null,
-      activateItem: T,
-      focusedId: m,
-      setFocusedId: g,
-      expandOnSelect: v,
-      guides: C,
-      onItemKeyDown: y
+      expandedIds: y ?? /* @__PURE__ */ new Set(),
+      setExpanded: A,
+      expandIds: z,
+      selectedId: C ?? null,
+      activateItem: H,
+      focusedId: h,
+      setFocusedId: L,
+      entryId: w,
+      expandOnSelect: p,
+      guides: T,
+      onItemKeyDown: F
     }),
-    [w, h, b, T, m, v, C, y]
+    [
+      y,
+      A,
+      z,
+      C,
+      H,
+      h,
+      w,
+      p,
+      T,
+      F
+    ]
   );
-  return /* @__PURE__ */ a(O.Provider, { value: i, children: /* @__PURE__ */ a(B.Provider, { value: 1, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ i(ee.Provider, { value: V, children: /* @__PURE__ */ i(te.Provider, { value: f, children: /* @__PURE__ */ i(U.Provider, { value: 1, children: /* @__PURE__ */ i(
     "div",
     {
-      ref: D,
+      ref: R,
       "data-slot": "tree",
-      "data-guides": C,
+      "data-guides": T,
       role: "tree",
       tabIndex: -1,
-      className: E(
+      onFocus: (n) => {
+        x?.(n), _.current = !0;
+      },
+      onBlur: (n) => {
+        v?.(n), n.currentTarget.contains(n.relatedTarget) || (_.current = !1);
+      },
+      className: N(
         "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
       ),
-      ...N,
-      children: /* @__PURE__ */ a(J, { delayDuration: 500, children: /* @__PURE__ */ a(q, { children: r }) })
+      ...P,
+      children: /* @__PURE__ */ i(ce, { delayDuration: 500, children: /* @__PURE__ */ i(ae, { children: r }) })
     }
-  ) }) });
+  ) }) }) });
 }
-function q({ children: e }) {
-  return te(e);
+function ae({ children: e }) {
+  return pe(e);
 }
-function fe({
+function Me({
   className: e,
   children: r,
   id: t,
-  hasChildren: o = !1,
-  disabled: l = !1,
-  onClick: u,
-  onFocus: x,
-  onKeyDown: c,
-  style: p,
-  ...v
+  hasChildren: s = !1,
+  disabled: a = !1,
+  onClick: c,
+  onFocus: u,
+  onKeyDown: l,
+  style: m,
+  ...p
 }) {
-  const { expandedIds: C, setExpanded: N, selectedId: D, activateItem: w, focusedId: P, setFocusedId: b, onItemKeyDown: z } = G("TreeItem"), m = n.useContext(B), { posinset: g, setsize: h, lastBranchPos: T } = n.useContext(H), y = `${n.useId()}-label`, i = o && C.has(t), s = D === t, I = n.useCallback(() => {
-    o && N(t, !i);
-  }, [o, N, t, i]), d = n.useCallback(() => {
-    l || (b(t), w(t, o, i));
-  }, [l, b, t, w, o, i]), k = P ? P === t : m === 1 && g === 1, _ = n.useContext(K)?.trunkLevels ?? ee, V = n.useMemo(
-    () => m > 1 && g < T ? [..._, m - 1] : _,
-    [_, m, g, T]
-  ), U = n.useMemo(
+  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(
     () => ({
       id: t,
-      labelId: y,
-      level: m,
-      expanded: i,
-      hasChildren: o,
-      selected: s,
-      disabled: l,
-      trunkLevels: V,
-      toggle: I,
-      select: d
+      labelId: S,
+      level: b,
+      expanded: f,
+      hasChildren: s,
+      selected: k,
+      disabled: a,
+      trunkLevels: $,
+      toggle: O,
+      select: _
     }),
-    [t, y, m, i, o, s, l, V, I, d]
+    [t, S, b, f, s, k, a, $, O, _]
   );
-  return /* @__PURE__ */ a(K.Provider, { value: U, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ i(W.Provider, { value: V, children: /* @__PURE__ */ i(
     "div",
     {
-      ...v,
+      ...p,
       "data-slot": "tree-item",
       "data-tree-item-id": t,
-      "data-tree-has-children": o,
-      "data-state": i ? "expanded" : "collapsed",
+      "data-tree-has-children": s,
+      "data-state": f ? "expanded" : "collapsed",
       role: "treeitem",
-      "aria-labelledby": y,
-      "aria-expanded": o ? i : void 0,
-      "aria-level": m,
-      "aria-posinset": g,
-      "aria-setsize": h,
-      "aria-selected": s,
-      "aria-disabled": l || void 0,
-      tabIndex: k ? 0 : -1,
-      onKeyDown: (f) => {
-        c?.(f), !f.defaultPrevented && z(f);
+      "aria-labelledby": S,
+      "aria-expanded": s ? f : void 0,
+      "aria-level": b,
+      "aria-posinset": h,
+      "aria-setsize": L,
+      "aria-selected": k,
+      "aria-disabled": a || void 0,
+      tabIndex: z ? 0 : -1,
+      onKeyDown: (n) => {
+        l?.(n), !n.defaultPrevented && C(n);
       },
-      onClick: (f) => {
-        u?.(f), !f.defaultPrevented && f.target.closest(R) === f.currentTarget && d();
+      onClick: (n) => {
+        c?.(n), !n.defaultPrevented && n.target.closest(M) === n.currentTarget && _();
       },
-      onFocus: (f) => {
-        x?.(f), f.target === f.currentTarget && b(t);
+      onFocus: (n) => {
+        u?.(n), n.target === n.currentTarget && y(t);
       },
       style: {
         // Inherited by the label, which draws the elbow from the same two values.
-        "--tree-guide-left": `calc(var(--tree-indent) * ${m - 2} + 0.6875rem)`,
+        "--tree-guide-left": `calc(var(--tree-indent) * ${b - 2} + 0.6875rem)`,
         // Stops 0.25rem short of the row's chevron rather than touching it, so the connector
         // reads as pointing at the row instead of welded to the glyph.
         "--tree-elbow-run": "calc(var(--tree-indent) - 0.6875rem)",
         // 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",
-        ...p
+        ...m
       },
-      className: E(
+      className: N(
         "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
@@ -251,7 +366,7 @@ function fe({
     }
   ) });
 }
-const oe = W(
+const we = le(
   "flex w-full min-w-0 cursor-default items-center gap-1.5 rounded-md pr-2 text-left transition-colors select-none",
   {
     variants: {
@@ -266,31 +381,31 @@ const oe = W(
     }
   }
 );
-function pe({ className: e, children: r, size: t, style: o, icon: l, trailing: u, ...x }) {
-  const { labelId: c, level: p, expanded: v, hasChildren: C, selected: N, disabled: D, trunkLevels: w, toggle: P } = M("TreeItemLabel"), { guides: b } = G("TreeItemLabel"), z = b !== "none" && p > 1 && C, m = b !== "none" && (z || w.length > 0), g = n.useRef(null), [h, T] = n.useState(!1), y = (i) => {
-    const s = g.current;
-    T(i && !!s && s.scrollWidth > s.clientWidth);
+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);
   };
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ q(
     "div",
     {
-      ...x,
-      id: c,
+      ...u,
+      id: l,
       "data-slot": "tree-item-label",
-      style: { paddingInlineStart: `calc(var(--tree-indent) * ${p - 1} + 0.25rem)`, ...o },
-      className: E(
-        oe({ size: t }),
+      style: { paddingInlineStart: `calc(var(--tree-indent) * ${m - 1} + 0.25rem)`, ...s },
+      className: N(
+        we({ 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.
-        N ? "bg-accent text-accent-foreground font-medium" : "hover:bg-muted",
+        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.
-        D && "pointer-events-none opacity-50",
+        v && "pointer-events-none opacity-50",
         e
       ),
       children: [
-        m ? (
+        b ? (
           // One absolutely-positioned layer owns every guide on this row, fixing two bugs at once.
           //
           // Paint order: the trunk used to be drawn by the `TreeItem`, an *ancestor* of every
@@ -303,37 +418,37 @@ function pe({ className: e, children: r, size: t, style: o, icon: l, trailing: u
           // *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__ */ A(
+          /* @__PURE__ */ q(
             "span",
             {
               "data-slot": "tree-item-guides",
               "aria-hidden": "true",
-              className: E(
+              className: N(
                 "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.
-                b === "hover" && "opacity-0 transition-opacity group-hover/tree:opacity-100 motion-reduce:transition-none"
+                y === "hover" && "opacity-0 transition-opacity group-hover/tree:opacity-100 motion-reduce:transition-none"
               ),
               children: [
-                w.map((i) => /* @__PURE__ */ a(
+                P.map((f) => /* @__PURE__ */ i(
                   "span",
                   {
                     "data-slot": "tree-item-guide-trunk",
-                    style: { left: `calc(var(--tree-indent) * ${i - 1} + 0.6875rem)` },
+                    style: { left: `calc(var(--tree-indent) * ${f - 1} + 0.6875rem)` },
                     className: "absolute top-[-0.4375rem] bottom-0 w-0 border-l border-[var(--tree-guide-color)]"
                   },
-                  i
+                  f
                 )),
-                z ? (
+                C ? (
                   // 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.
-                  /* @__PURE__ */ a(
+                  /* @__PURE__ */ i(
                     "span",
                     {
                       "data-slot": "tree-item-guide-elbow",
-                      className: E(
+                      className: N(
                         "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)]"
@@ -345,62 +460,92 @@ function pe({ className: e, children: r, size: t, style: o, icon: l, trailing: u
             }
           )
         ) : null,
-        C ? (
+        T ? (
           // A pointer-only affordance, deliberately not a `<button>`: expansion is reachable from the
           // keyboard through the parent treeitem's arrow keys, so this stays non-focusable. A focusable
           // element hidden from assistive tech is a contradiction, and inside a single-tab-stop widget
           // it would also be a second focus stop reachable by pointer.
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ i(
             "span",
             {
               "data-slot": "tree-item-indicator",
               "aria-hidden": "true",
-              onClick: (i) => {
-                i.stopPropagation(), P();
+              onClick: (f) => {
+                f.stopPropagation(), R();
               },
               className: "flex size-3.5 shrink-0 items-center justify-center text-muted-foreground",
-              children: /* @__PURE__ */ a(Y, { className: E("size-3.5 transition-transform", v && "rotate-90") })
+              children: /* @__PURE__ */ i(ie, { className: N("size-3.5 transition-transform", p && "rotate-90") })
             }
           )
-        ) : /* @__PURE__ */ a("span", { "data-slot": "tree-item-indicator-spacer", "aria-hidden": "true", className: "size-3.5 shrink-0" }),
-        l ? /* @__PURE__ */ a(
+        ) : /* @__PURE__ */ i("span", { "data-slot": "tree-item-indicator-spacer", "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+        a ? /* @__PURE__ */ i(
           "span",
           {
             "data-slot": "tree-item-icon",
             "aria-hidden": "true",
-            className: E(
+            className: N(
               "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0",
-              N ? "text-accent-foreground" : "text-muted-foreground"
+              x ? "text-accent-foreground" : "text-muted-foreground"
             ),
-            children: l
+            children: a
           }
         ) : null,
-        /* @__PURE__ */ A(Q, { open: h, onOpenChange: y, children: [
-          /* @__PURE__ */ a(X, { asChild: !0, children: /* @__PURE__ */ a("span", { ref: g, className: "min-w-0 flex-1 truncate", children: r }) }),
-          /* @__PURE__ */ a(Z, { children: r })
+        /* @__PURE__ */ q(ue, { open: L, onOpenChange: S, children: [
+          /* @__PURE__ */ i(de, { asChild: !0, children: /* @__PURE__ */ i(
+            "span",
+            {
+              ref: h,
+              "data-slot": "tree-item-text",
+              className: "-mx-1 min-w-0 flex-1 truncate px-1",
+              children: /* @__PURE__ */ i(ke, { match: E, children: r })
+            }
+          ) }),
+          /* @__PURE__ */ i(fe, { children: r })
         ] }),
-        u ? /* @__PURE__ */ a(
-          "span",
-          {
-            "data-slot": "tree-item-trailing",
-            className: "ml-auto flex shrink-0 items-center gap-1 [&_svg]:size-3.5",
-            children: u
-          }
-        ) : null
+        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
       ]
     }
   );
 }
-function xe({ className: e, children: r, ...t }) {
-  const { expanded: o, level: l } = M("TreeItemGroup");
-  return o ? /* @__PURE__ */ a(B.Provider, { value: l + 1, children: /* @__PURE__ */ a("div", { ...t, "data-slot": "tree-item-group", role: "group", className: E("flex flex-col", e), children: /* @__PURE__ */ a(q, { children: r }) }) }) : null;
+function ke({ 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: [
+    /* @__PURE__ */ i(
+      "span",
+      {
+        "data-slot": "tree-item-typeahead-match",
+        "data-state": s ? "fading" : "active",
+        className: N(
+          // 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.
+          "rounded-sm ring-1",
+          // Padding either side so the ring does not hug the glyphs, with a matching negative
+          // margin so the rest of the label stays put while the highlight comes and goes.
+          "-mx-0.5 px-0.5",
+          // Eased out over the fade window rather than snapped off; the span itself is removed
+          // only once the transition has finished.
+          "transition-[color,background-color,box-shadow] duration-700 ease-out motion-reduce:transition-none",
+          s ? "bg-transparent text-inherit ring-transparent" : "bg-selected text-selected-foreground ring-selected-border"
+        ),
+        children: r.slice(0, t.length)
+      }
+    ),
+    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;
 }
 export {
-  me as Tree,
-  fe as TreeItem,
-  xe as TreeItemGroup,
-  pe as TreeItemLabel,
-  oe as treeItemLabelVariants,
-  ue as useTreeItem
+  _e as Tree,
+  Me as TreeItem,
+  Fe as TreeItemGroup,
+  ze as TreeItemLabel,
+  we as treeItemLabelVariants,
+  Se as useTreeItem
 };
 //# sourceMappingURL=tree.js.map