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

package/dist/index.d.cts

@@ -2453,4 +2453,115 @@ declare const ResizableHandle: ({ withGrip, className, children, ...props }: rea
     withGrip?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, FormLabelWithTooltip, type FormLabelWithTooltipProps, Grid, type GridProps, Input, type InputProps, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, Skeleton, type SkeletonProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, dialogContentVariants, inputVariants, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, usePortalContainer };
+/**
+ * TreeView
+ *
+ * A keyboard-operable, virtualized tree. The layers panel of an editor is this control: a
+ * hierarchy that can hold thousands of nodes, that someone navigates with arrow keys as much as
+ * with a pointer, and that has to stay responsive while they do.
+ *
+ * **Why virtualized, and why that decides the markup.** A document of a few thousand blocks
+ * renders a few thousand rows, and the cost is not the React work — it is layout and paint on
+ * every expand, scroll and selection. Only the visible window is rendered here.
+ *
+ * That has a consequence the accessibility notes below depend on: with only a window in the DOM,
+ * the nested `role="group"` markup the tree pattern usually uses **cannot be built**, because an
+ * item's children may not be rendered at all. The APG covers this exact case by allowing a FLAT
+ * set of `treeitem`s that describe the hierarchy through `aria-level`, `aria-setsize` and
+ * `aria-posinset` instead of through nesting. A screen reader reads depth and position from those
+ * attributes, so they are not decoration — without them a virtualized tree announces itself as a
+ * flat list of whatever happens to be on screen.
+ *
+ * **Why a headless virtualizer.** The markup above is the requirement, so anything that owns the
+ * DOM is unusable. `@tanstack/react-virtual` computes offsets and renders nothing.
+ *
+ * **State is controllable, not controlled.** `expandedIds`/`selectedId` may be passed with their
+ * `onChange` partners to drive the tree from a store — which an editor will do, since selection is
+ * shared with the canvas and the inspector — or omitted entirely, in which case the tree keeps its
+ * own. Requiring a store for a tree in a settings dialog would be a poor trade.
+ *
+ * **Design specifications**:
+ * - Row height: fixed 28px (`--tree-row`), so the virtualizer needs no measurement pass
+ * - Indent: 12px per level, applied as padding so the whole row stays a hit target
+ * - Selection: `bg-muted`, matching the menu highlight rather than a full-contrast flip
+ * - Focus: `focus-visible` ring in the focus token
+ *
+ * **Accessibility**:
+ * - `role="tree"` with flat `role="treeitem"` children carrying `aria-level`, `aria-setsize`,
+ *   `aria-posinset`, and `aria-expanded` on anything with children
+ * - Roving tabindex: exactly one row is in the tab order, so Tab enters and leaves the tree once
+ *   rather than walking every node
+ * - Arrow keys move and expand, per the APG tree pattern: Right expands then descends, Left
+ *   collapses then ascends, Home/End jump to the ends, `*` expands every sibling
+ * - Typeahead focuses the next row whose label starts with what was typed
+ * - Moving focus scrolls the row into view, which virtualization would otherwise prevent: a row
+ *   outside the window has no element to focus
+ *
+ * @example
+ * ```tsx
+ * <TreeView
+ *   nodes={layers}
+ *   aria-label="Layers"
+ *   selectedId={selected}
+ *   onSelectedChange={setSelected}
+ *   className="h-full"
+ * />
+ * ```
+ *
+ * @module
+ */
+
+/**
+ * One node of the tree. Children are omitted or empty for a leaf.
+ *
+ * @experimental
+ */
+interface TreeNode {
+    /** Stable identity. What selection and expansion are keyed by. */
+    id: string;
+    /** What the row shows. A string also feeds typeahead; anything else needs `textValue`. */
+    label: react.ReactNode;
+    /**
+     * The text typeahead matches on, when `label` is not a string.
+     *
+     * Without it a row rendered as markup cannot be typed to, and a keyboard user loses the fastest
+     * way through a long tree.
+     */
+    textValue?: string;
+    /** Children, if any. An empty array still marks the node as a parent. */
+    children?: readonly TreeNode[];
+    /** Shown before the label, after the twisty. */
+    icon?: react.ReactNode;
+    /** Skipped by every keyboard move and not selectable. */
+    disabled?: boolean;
+}
+/** @experimental */
+interface TreeViewProps extends Omit<react.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** The roots of the tree. */
+    nodes: readonly TreeNode[];
+    /** Expanded node ids, if the caller owns them. */
+    expandedIds?: readonly string[];
+    /** Which ids start expanded when the caller does not own expansion. */
+    defaultExpandedIds?: readonly string[];
+    /** Called with the full next set whenever a branch opens or closes. */
+    onExpandedChange?: (ids: string[]) => void;
+    /** The selected node id, if the caller owns it. */
+    selectedId?: string | null;
+    /** Which id starts selected when the caller does not own selection. */
+    defaultSelectedId?: string | null;
+    /** Called when a row is chosen, by pointer or by Enter. */
+    onSelectedChange?: (id: string) => void;
+    /**
+     * Names the tree for a screen reader. One of this or `aria-labelledby` is required: a tree
+     * announced only as "tree" tells a user nothing about which one they are in.
+     */
+    "aria-label"?: string;
+}
+/**
+ * A virtualized tree.
+ *
+ * @experimental
+ */
+declare const TreeView: react.ForwardRefExoticComponent<TreeViewProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, FormLabelWithTooltip, type FormLabelWithTooltipProps, Grid, type GridProps, Input, type InputProps, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, Skeleton, type SkeletonProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewProps, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, dialogContentVariants, inputVariants, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, usePortalContainer };

package/dist/index.d.ts

@@ -2453,4 +2453,115 @@ declare const ResizableHandle: ({ withGrip, className, children, ...props }: rea
     withGrip?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, FormLabelWithTooltip, type FormLabelWithTooltipProps, Grid, type GridProps, Input, type InputProps, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, Skeleton, type SkeletonProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, dialogContentVariants, inputVariants, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, usePortalContainer };
+/**
+ * TreeView
+ *
+ * A keyboard-operable, virtualized tree. The layers panel of an editor is this control: a
+ * hierarchy that can hold thousands of nodes, that someone navigates with arrow keys as much as
+ * with a pointer, and that has to stay responsive while they do.
+ *
+ * **Why virtualized, and why that decides the markup.** A document of a few thousand blocks
+ * renders a few thousand rows, and the cost is not the React work — it is layout and paint on
+ * every expand, scroll and selection. Only the visible window is rendered here.
+ *
+ * That has a consequence the accessibility notes below depend on: with only a window in the DOM,
+ * the nested `role="group"` markup the tree pattern usually uses **cannot be built**, because an
+ * item's children may not be rendered at all. The APG covers this exact case by allowing a FLAT
+ * set of `treeitem`s that describe the hierarchy through `aria-level`, `aria-setsize` and
+ * `aria-posinset` instead of through nesting. A screen reader reads depth and position from those
+ * attributes, so they are not decoration — without them a virtualized tree announces itself as a
+ * flat list of whatever happens to be on screen.
+ *
+ * **Why a headless virtualizer.** The markup above is the requirement, so anything that owns the
+ * DOM is unusable. `@tanstack/react-virtual` computes offsets and renders nothing.
+ *
+ * **State is controllable, not controlled.** `expandedIds`/`selectedId` may be passed with their
+ * `onChange` partners to drive the tree from a store — which an editor will do, since selection is
+ * shared with the canvas and the inspector — or omitted entirely, in which case the tree keeps its
+ * own. Requiring a store for a tree in a settings dialog would be a poor trade.
+ *
+ * **Design specifications**:
+ * - Row height: fixed 28px (`--tree-row`), so the virtualizer needs no measurement pass
+ * - Indent: 12px per level, applied as padding so the whole row stays a hit target
+ * - Selection: `bg-muted`, matching the menu highlight rather than a full-contrast flip
+ * - Focus: `focus-visible` ring in the focus token
+ *
+ * **Accessibility**:
+ * - `role="tree"` with flat `role="treeitem"` children carrying `aria-level`, `aria-setsize`,
+ *   `aria-posinset`, and `aria-expanded` on anything with children
+ * - Roving tabindex: exactly one row is in the tab order, so Tab enters and leaves the tree once
+ *   rather than walking every node
+ * - Arrow keys move and expand, per the APG tree pattern: Right expands then descends, Left
+ *   collapses then ascends, Home/End jump to the ends, `*` expands every sibling
+ * - Typeahead focuses the next row whose label starts with what was typed
+ * - Moving focus scrolls the row into view, which virtualization would otherwise prevent: a row
+ *   outside the window has no element to focus
+ *
+ * @example
+ * ```tsx
+ * <TreeView
+ *   nodes={layers}
+ *   aria-label="Layers"
+ *   selectedId={selected}
+ *   onSelectedChange={setSelected}
+ *   className="h-full"
+ * />
+ * ```
+ *
+ * @module
+ */
+
+/**
+ * One node of the tree. Children are omitted or empty for a leaf.
+ *
+ * @experimental
+ */
+interface TreeNode {
+    /** Stable identity. What selection and expansion are keyed by. */
+    id: string;
+    /** What the row shows. A string also feeds typeahead; anything else needs `textValue`. */
+    label: react.ReactNode;
+    /**
+     * The text typeahead matches on, when `label` is not a string.
+     *
+     * Without it a row rendered as markup cannot be typed to, and a keyboard user loses the fastest
+     * way through a long tree.
+     */
+    textValue?: string;
+    /** Children, if any. An empty array still marks the node as a parent. */
+    children?: readonly TreeNode[];
+    /** Shown before the label, after the twisty. */
+    icon?: react.ReactNode;
+    /** Skipped by every keyboard move and not selectable. */
+    disabled?: boolean;
+}
+/** @experimental */
+interface TreeViewProps extends Omit<react.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** The roots of the tree. */
+    nodes: readonly TreeNode[];
+    /** Expanded node ids, if the caller owns them. */
+    expandedIds?: readonly string[];
+    /** Which ids start expanded when the caller does not own expansion. */
+    defaultExpandedIds?: readonly string[];
+    /** Called with the full next set whenever a branch opens or closes. */
+    onExpandedChange?: (ids: string[]) => void;
+    /** The selected node id, if the caller owns it. */
+    selectedId?: string | null;
+    /** Which id starts selected when the caller does not own selection. */
+    defaultSelectedId?: string | null;
+    /** Called when a row is chosen, by pointer or by Enter. */
+    onSelectedChange?: (id: string) => void;
+    /**
+     * Names the tree for a screen reader. One of this or `aria-labelledby` is required: a tree
+     * announced only as "tree" tells a user nothing about which one they are in.
+     */
+    "aria-label"?: string;
+}
+/**
+ * A virtualized tree.
+ *
+ * @experimental
+ */
+declare const TreeView: react.ForwardRefExoticComponent<TreeViewProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, FormLabelWithTooltip, type FormLabelWithTooltipProps, Grid, type GridProps, Input, type InputProps, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, Skeleton, type SkeletonProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewProps, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, dialogContentVariants, inputVariants, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, usePortalContainer };

package/dist/index.mjs

@@ -2317,6 +2317,325 @@ var ResizableHandle = ({
     ]
   }
 );
+
+// src/components/tree-view.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ChevronRight as ChevronRight3 } from "lucide-react";
+import * as React10 from "react";
+import { jsx as jsx36, jsxs as jsxs15 } from "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 = 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__ */ jsx36(
+      "div",
+      {
+        ref: attachScroll,
+        className: cn("overflow-auto", className),
+        ...props,
+        children: /* @__PURE__ */ jsx36(
+          "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__ */ jsxs15(
+                "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__ */ jsx36(
+                      "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__ */ jsx36(
+                          ChevronRight3,
+                          {
+                            className: cn(
+                              "size-3.5 text-muted-foreground transition-transform",
+                              expanded.has(row.node.id) && "rotate-90"
+                            )
+                          }
+                        ) : null
+                      }
+                    ),
+                    row.node.icon !== void 0 ? /* @__PURE__ */ jsx36("span", { className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground", children: row.node.icon }) : null,
+                    /* @__PURE__ */ jsx36("span", { className: "truncate", children: row.node.label })
+                  ]
+                },
+                row.node.id
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
 export {
   Accordion,
   AccordionContent,
@@ -2464,6 +2783,7 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TreeView,
   alertVariants,
   avatarVariants,
   badgeVariants,