@nextlyhq/ui 0.0.2-alpha.51 → 0.0.2-alpha.54

package/README.md

@@ -72,8 +72,10 @@ as a Tailwind v3 preset from `@nextlyhq/ui/tailwind-preset`.
 **Display:** `Badge`, `Card`, `Alert`, `Separator`, `Skeleton`, `Progress`
 **Toggles:** `Checkbox`, `RadioGroup`, `Switch`, `Collapsible`
 **Layout and disclosure:** `Accordion`, `Avatar`, `Tabs`, `Tooltip`, `Popover`
+**Resizable regions:** `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`
+**Hierarchies:** `TreeView` (virtualized, keyboard-operable)
 **Overlays:** `Dialog`, `AlertDialog`, `Sheet`
-**Menus and command palette:** `DropdownMenu`, `Select`, `Command`
+**Menus and command palette:** `DropdownMenu`, `ContextMenu`, `Select`, `Command`
 **Feedback:** `Spinner`, `Toaster` (with `toast()` helper)
 **Tables:** `Table` primitives, `ResponsiveTable`, `TableSearch`, `TablePagination`, `TableSkeleton`, `TableEmpty`, `TableError`, `TableLoading`
 **Providers:** `PortalProvider`, `usePortalContainer`
@@ -118,7 +120,8 @@ Tailwind's internal `--tw-*` registrations, and the ancestor classes `dark:` and
 
 ### Overlays need a portal container
 
-AlertDialog, Command, Dialog, DropdownMenu, Popover, Select, Sheet and Tooltip render
+AlertDialog, Command, ContextMenu, Dialog, DropdownMenu, Popover, Select, Sheet and
+Tooltip render
 their overlay through a portal, which defaults to `document.body` — outside the wrapper,
 where the scoped rules and tokens do not reach. Triggers would look right and the menus
 they open would not. Point them back inside with `PortalProvider`:

package/dist/index.cjs

@@ -74,6 +74,20 @@ __export(index_exports, {
   CommandList: () => CommandList,
   CommandSeparator: () => CommandSeparator,
   CommandShortcut: () => CommandShortcut,
+  ContextMenu: () => ContextMenu,
+  ContextMenuCheckboxItem: () => ContextMenuCheckboxItem,
+  ContextMenuContent: () => ContextMenuContent,
+  ContextMenuGroup: () => ContextMenuGroup,
+  ContextMenuItem: () => ContextMenuItem,
+  ContextMenuLabel: () => ContextMenuLabel,
+  ContextMenuRadioGroup: () => ContextMenuRadioGroup,
+  ContextMenuRadioItem: () => ContextMenuRadioItem,
+  ContextMenuSeparator: () => ContextMenuSeparator,
+  ContextMenuShortcut: () => ContextMenuShortcut,
+  ContextMenuSub: () => ContextMenuSub,
+  ContextMenuSubContent: () => ContextMenuSubContent,
+  ContextMenuSubTrigger: () => ContextMenuSubTrigger,
+  ContextMenuTrigger: () => ContextMenuTrigger,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -111,6 +125,9 @@ __export(index_exports, {
   Progress: () => Progress,
   RadioGroup: () => RadioGroup,
   RadioGroupItem: () => RadioGroupItem,
+  ResizableHandle: () => ResizableHandle,
+  ResizablePanel: () => ResizablePanel,
+  ResizablePanelGroup: () => ResizablePanelGroup,
   Select: () => Select,
   SelectContent: () => SelectContent,
   SelectGroup: () => SelectGroup,
@@ -160,6 +177,7 @@ __export(index_exports, {
   TooltipContent: () => TooltipContent,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
+  TreeView: () => TreeView,
   alertVariants: () => alertVariants,
   avatarVariants: () => avatarVariants,
   badgeVariants: () => badgeVariants,
@@ -1167,10 +1185,12 @@ var DialogOverlay = (0, import_react14.forwardRef)(({ className, ...props }, ref
     ref,
     "data-slot": "dialog-overlay",
     className: cn(
-      // A modal scrim: a black wash is the point, so it stays a literal
-      // rather than a surface token. Painting it from `background` would
-      // make it a white veil in light mode and near-invisible in dark.
-      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm transition-opacity duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      // A modal scrim, from the `--nx-overlay` token rather than a surface
+      // token. A black wash is the point — painting it from `background` would
+      // make it a white veil in light mode — but the alpha still has to differ
+      // per mode, because what it composites over is white in one and mid-tone
+      // in the other.
+      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm transition-opacity duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -1287,10 +1307,12 @@ var AlertDialogOverlay = (0, import_react15.forwardRef)(({ className, ...props }
   {
     ref,
     className: cn(
-      // A modal scrim: a black wash is the point, so it stays a literal
-      // rather than a surface token. Painting it from `background` would
-      // make it a white veil in light mode and near-invisible in dark.
-      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm transition-opacity duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      // A modal scrim, from the `--nx-overlay` token rather than a surface
+      // token. A black wash is the point — painting it from `background` would
+      // make it a white veil in light mode — but the alpha still has to differ
+      // per mode, because what it composites over is white in one and mid-tone
+      // in the other.
+      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm transition-opacity duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -1712,10 +1734,12 @@ var SheetOverlay = React7.forwardRef(({ className, ...props }, ref) => /* @__PUR
   DialogPrimitive2.Overlay,
   {
     className: cn(
-      // A modal scrim: a black wash is the point, so it stays a literal
-      // rather than a surface token. Painting it from `background` would
-      // make it a white veil in light mode and near-invisible in dark.
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+      // A modal scrim, from the `--nx-overlay` token rather than a surface
+      // token. A black wash is the point — painting it from `background` would
+      // make it a white veil in light mode — but the alpha still has to differ
+      // per mode, because what it composites over is white in one and mid-tone
+      // in the other.
+      "fixed inset-0 z-50 bg-overlay backdrop-blur-sm",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
@@ -1830,10 +1854,12 @@ var CommandDialogOverlay = (0, import_react17.forwardRef)(({ className, ...props
   {
     ref,
     className: cn(
-      // A modal scrim: a black wash is the point, so it stays a literal
-      // rather than a surface token. Painting it from `background` would
-      // make it a white veil in light mode and near-invisible in dark.
-      "fixed inset-0 z-[99] bg-black/80 backdrop-blur-sm",
+      // A modal scrim, from the `--nx-overlay` token rather than a surface
+      // token. A black wash is the point — painting it from `background` would
+      // make it a white veil in light mode — but the alpha still has to differ
+      // per mode, because what it composites over is white in one and mid-tone
+      // in the other.
+      "fixed inset-0 z-[99] bg-overlay backdrop-blur-sm",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "transition-opacity duration-200",
@@ -2278,6 +2304,511 @@ var TableSkeleton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "table-wrapper rounded-md  border border-border bg-card overflow-hidden", children: content });
 };
 TableSkeleton.displayName = "TableSkeleton";
+
+// src/components/context-menu.tsx
+var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"), 1);
+var import_lucide_react12 = require("lucide-react");
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var menuItemBase2 = "cursor-pointer transition-colors data-[highlighted]:bg-muted data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var menuSurface = "z-50 max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-[--radix-context-menu-content-transform-origin]";
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuSub = ContextMenuPrimitive.Sub;
+var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+var ContextMenuSubTrigger = React9.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  ContextMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-muted [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      menuItemBase2,
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react12.ChevronRight, { className: "ml-auto" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React9.forwardRef(({ className, ...props }, ref) => {
+  const portalContainer = usePortalContainer();
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ContextMenuPrimitive.SubContent,
+    {
+      ref,
+      className: cn(menuSurface, className),
+      ...props
+    }
+  ) });
+});
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+var ContextMenuContent = React9.forwardRef(({ className, ...props }, ref) => {
+  const portalContainer = usePortalContainer();
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ContextMenuPrimitive.Content,
+    {
+      ref,
+      className: cn(menuSurface, className),
+      ...props
+    }
+  ) });
+});
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React9.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  ContextMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      menuItemBase2,
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+var ContextMenuCheckboxItem = React9.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      menuItemBase2,
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react12.Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  ContextMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      menuItemBase2,
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react12.Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React9.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  ContextMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+var ContextMenuSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  ContextMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+var ContextMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  "span",
+  {
+    className: cn(
+      "ml-auto text-xs tracking-widest text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+// src/components/resizable.tsx
+var import_lucide_react13 = require("lucide-react");
+var ResizablePrimitive = __toESM(require("react-resizable-panels"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var ResizablePanelGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  ResizablePrimitive.Group,
+  {
+    className: cn("h-full w-full", className),
+    ...props
+  }
+);
+var ResizablePanel = ResizablePrimitive.Panel;
+var ResizableHandle = ({
+  withGrip,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  ResizablePrimitive.Separator,
+  {
+    className: cn(
+      // The drawn line is 1px; the element around it is wider and transparent, so the pointer
+      // target is comfortably larger than what it appears to grab (WCAG 2.5.8).
+      "relative flex items-center justify-center bg-border",
+      // Keyed off `aria-orientation`, which is what the separator actually carries, and read as
+      // the ARIA spec defines it: the attribute describes the SEPARATOR, not the group. A
+      // horizontal group puts its panels side by side, so its separator is a vertical line.
+      "aria-[orientation=vertical]:w-px aria-[orientation=horizontal]:h-px",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      // Reachable without precision pointing, without drawing a heavier divider: the hit area
+      // grows across the line, so a vertical line widens and a horizontal one deepens.
+      "after:absolute after:inset-0",
+      "aria-[orientation=vertical]:after:-inset-x-1 aria-[orientation=horizontal]:after:-inset-y-1",
+      className
+    ),
+    ...props,
+    children: [
+      withGrip ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react13.GripVertical, { className: "h-2.5 w-2.5 text-muted-foreground" }) }) : null,
+      children
+    ]
+  }
+);
+
+// src/components/tree-view.tsx
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_lucide_react14 = require("lucide-react");
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ROW_HEIGHT = 28;
+var INDENT_PER_LEVEL = 12;
+function textOf(node) {
+  if (typeof node.textValue === "string") return node.textValue;
+  return typeof node.label === "string" ? node.label : "";
+}
+function flatten(nodes, expanded) {
+  const rows = [];
+  const pending = [{ list: nodes, index: 0, level: 0 }];
+  while (pending.length > 0) {
+    const frame = pending[pending.length - 1];
+    if (frame === void 0 || frame.index >= frame.list.length) {
+      pending.pop();
+      continue;
+    }
+    const node = frame.list[frame.index];
+    const posInSet = frame.index;
+    frame.index += 1;
+    if (node === void 0) continue;
+    const hasChildren = node.children !== void 0;
+    rows.push({
+      node,
+      level: frame.level,
+      setSize: frame.list.length,
+      posInSet,
+      parentId: frame.parentId,
+      hasChildren
+    });
+    if (hasChildren && expanded.has(node.id)) {
+      pending.push({
+        list: node.children ?? [],
+        index: 0,
+        level: frame.level + 1,
+        parentId: node.id
+      });
+    }
+  }
+  return rows;
+}
+function useControllable(controlled, fallback) {
+  const [uncontrolled, setUncontrolled] = React10.useState(fallback);
+  return [
+    controlled === void 0 ? uncontrolled : controlled,
+    setUncontrolled
+  ];
+}
+var TreeView = React10.forwardRef(
+  ({
+    nodes,
+    expandedIds,
+    defaultExpandedIds,
+    onExpandedChange,
+    selectedId,
+    defaultSelectedId,
+    onSelectedChange,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, forwardedRef) => {
+    const scrollRef = React10.useRef(null);
+    const attachScroll = React10.useCallback(
+      (node) => {
+        scrollRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef !== null && forwardedRef !== void 0) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef]
+    );
+    const [expandedState, setExpandedState] = useControllable(
+      expandedIds === void 0 ? void 0 : [...expandedIds],
+      [...defaultExpandedIds ?? []]
+    );
+    const expanded = React10.useMemo(
+      () => new Set(expandedIds ?? expandedState),
+      [expandedIds, expandedState]
+    );
+    const [selected, setSelected] = useControllable(
+      selectedId === void 0 ? void 0 : selectedId,
+      defaultSelectedId ?? null
+    );
+    const rows = React10.useMemo(
+      () => flatten(nodes, expanded),
+      [nodes, expanded]
+    );
+    const [activeId, setActiveId] = React10.useState(null);
+    const activeIndex = Math.max(
+      0,
+      rows.findIndex((row) => row.node.id === (activeId ?? selected))
+    );
+    const virtualizer = (0, import_react_virtual.useVirtualizer)({
+      count: rows.length,
+      getScrollElement: () => scrollRef.current,
+      estimateSize: () => ROW_HEIGHT,
+      overscan: 8
+    });
+    const commitExpanded = (next) => {
+      const ids = [...next];
+      if (expandedIds === void 0) setExpandedState(ids);
+      onExpandedChange?.(ids);
+    };
+    const setExpansion = (id, open) => {
+      const next = new Set(expanded);
+      if (open) next.add(id);
+      else next.delete(id);
+      commitExpanded(next);
+    };
+    const choose = (id) => {
+      if (selectedId === void 0) setSelected(id);
+      onSelectedChange?.(id);
+    };
+    const focusRow = (index) => {
+      const row = rows[index];
+      if (row === void 0) return;
+      setActiveId(row.node.id);
+      virtualizer.scrollToIndex(index, { align: "auto" });
+      requestAnimationFrame(() => {
+        const element = scrollRef.current?.querySelector(
+          `[data-tree-index="${index}"]`
+        );
+        element?.focus();
+      });
+    };
+    const step = (from, delta) => {
+      for (let index = from + delta; index >= 0 && index < rows.length; index += delta) {
+        if (rows[index]?.node.disabled !== true) return index;
+      }
+      return from;
+    };
+    const typeahead = React10.useRef({ query: "", at: 0 });
+    const onKeyDown = (event) => {
+      const index = activeIndex;
+      const row = rows[index];
+      if (row === void 0) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          focusRow(step(index, 1));
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          focusRow(step(index, -1));
+          return;
+        case "ArrowRight":
+          event.preventDefault();
+          if (row.hasChildren && !expanded.has(row.node.id)) {
+            setExpansion(row.node.id, true);
+          } else if (row.hasChildren) {
+            for (let child = index + 1; child < rows.length && (rows[child]?.level ?? 0) > row.level; child += 1) {
+              if (rows[child]?.parentId === row.node.id && rows[child]?.node.disabled !== true) {
+                focusRow(child);
+                break;
+              }
+            }
+          }
+          return;
+        case "ArrowLeft":
+          event.preventDefault();
+          if (row.hasChildren && expanded.has(row.node.id)) {
+            setExpansion(row.node.id, false);
+          } else if (row.parentId !== void 0) {
+            let ancestor = row.parentId;
+            while (ancestor !== void 0) {
+              const at = rows.findIndex(
+                (candidate) => candidate.node.id === ancestor
+              );
+              if (at < 0) break;
+              if (rows[at]?.node.disabled !== true) {
+                focusRow(at);
+                break;
+              }
+              ancestor = rows[at]?.parentId;
+            }
+          }
+          return;
+        case "Home":
+          event.preventDefault();
+          focusRow(rows[0]?.node.disabled === true ? step(0, 1) : 0);
+          return;
+        case "End": {
+          event.preventDefault();
+          const last = rows.length - 1;
+          focusRow(rows[last]?.node.disabled === true ? step(last, -1) : last);
+          return;
+        }
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          if (row.node.disabled !== true) choose(row.node.id);
+          return;
+        case "*": {
+          event.preventDefault();
+          const next = new Set(expanded);
+          for (const sibling of rows) {
+            if (sibling.parentId === row.parentId && sibling.hasChildren) {
+              next.add(sibling.node.id);
+            }
+          }
+          commitExpanded(next);
+          return;
+        }
+        default:
+          break;
+      }
+      if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) {
+        return;
+      }
+      event.preventDefault();
+      const now = Date.now();
+      const state = typeahead.current;
+      state.query = now - state.at > 500 ? event.key : state.query + event.key;
+      state.at = now;
+      const query = state.query.toLowerCase();
+      for (let offset = 1; offset <= rows.length; offset += 1) {
+        const candidate = rows[(index + offset) % rows.length];
+        if (candidate === void 0 || candidate.node.disabled === true)
+          continue;
+        if (textOf(candidate.node).toLowerCase().startsWith(query)) {
+          focusRow(rows.indexOf(candidate));
+          return;
+        }
+      }
+    };
+    const virtualItems = virtualizer.getVirtualItems();
+    const usable = (index) => rows[index]?.node.disabled !== true;
+    const tabStopIndex = virtualItems.some((item) => item.index === activeIndex) && usable(activeIndex) ? activeIndex : virtualItems.find((item) => usable(item.index))?.index ?? -1;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        ref: attachScroll,
+        className: cn("overflow-auto", className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "div",
+          {
+            role: "tree",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            onKeyDown,
+            style: { height: virtualizer.getTotalSize(), position: "relative" },
+            children: virtualItems.map((item) => {
+              const row = rows[item.index];
+              if (row === void 0) return null;
+              const isSelected = selected === row.node.id;
+              return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                "div",
+                {
+                  "data-tree-index": item.index,
+                  role: "treeitem",
+                  "aria-level": row.level + 1,
+                  "aria-setsize": row.setSize,
+                  "aria-posinset": row.posInSet + 1,
+                  "aria-selected": isSelected,
+                  "aria-expanded": row.hasChildren ? expanded.has(row.node.id) : void 0,
+                  "aria-disabled": row.node.disabled === true ? true : void 0,
+                  tabIndex: item.index === tabStopIndex ? 0 : -1,
+                  onFocus: () => setActiveId(row.node.id),
+                  onClick: () => {
+                    if (row.node.disabled === true) return;
+                    setActiveId(row.node.id);
+                    choose(row.node.id);
+                  },
+                  className: cn(
+                    "absolute left-0 flex w-full select-none items-center gap-1 rounded-sm pr-2 text-sm outline-none",
+                    "focus-visible:ring-1 focus-visible:ring-ring",
+                    row.node.disabled === true ? "pointer-events-none opacity-50" : "cursor-pointer",
+                    isSelected ? "bg-muted text-foreground" : "hover:bg-muted/50"
+                  ),
+                  style: {
+                    height: item.size,
+                    transform: `translateY(${item.start}px)`,
+                    paddingLeft: 4 + row.level * INDENT_PER_LEVEL
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "flex size-4 shrink-0 items-center justify-center",
+                        onClick: (event) => {
+                          if (!row.hasChildren) return;
+                          event.stopPropagation();
+                          setExpansion(row.node.id, !expanded.has(row.node.id));
+                        },
+                        children: row.hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          import_lucide_react14.ChevronRight,
+                          {
+                            className: cn(
+                              "size-3.5 text-muted-foreground transition-transform",
+                              expanded.has(row.node.id) && "rotate-90"
+                            )
+                          }
+                        ) : null
+                      }
+                    ),
+                    row.node.icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground", children: row.node.icon }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "truncate", children: row.node.label })
+                  ]
+                },
+                row.node.id
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2323,6 +2854,20 @@ TableSkeleton.displayName = "TableSkeleton";
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
   Dialog,
   DialogClose,
   DialogContent,
@@ -2360,6 +2905,9 @@ TableSkeleton.displayName = "TableSkeleton";
   Progress,
   RadioGroup,
   RadioGroupItem,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
   Select,
   SelectContent,
   SelectGroup,
@@ -2409,6 +2957,7 @@ TableSkeleton.displayName = "TableSkeleton";
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TreeView,
   alertVariants,
   avatarVariants,
   badgeVariants,