50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T30db,/* eslint-disable react-refresh/only-export-components */ import * as React from 'react' import { ChevronRight, Folder, File, Check } from 'lucide-react' import { cn } from '@/lib/utils' import { Collapsible, CollapsibleContent, } from '@/components/ui/collapsible' export interface TreeNode { id: string label: string icon?: React.ReactNode children?: TreeNode[] disabled?: boolean } export interface TreeViewProps extends React.HTMLAttributes { data: TreeNode[] expandedIds?: string[] onExpandedChange?: (ids: string[]) => void selectedIds?: string[] onSelectedChange?: (ids: string[]) => void selectionMode?: 'none' | 'single' | 'multiple' showCheckboxes?: boolean showIcons?: boolean defaultExpandedIds?: string[] defaultSelectedIds?: string[] } // Context interface TreeViewContextValue { expandedIds: Set toggleExpanded: (id: string) => void selectedIds: Set toggleSelected: (id: string) => void selectionMode: 'none' | 'single' | 'multiple' showCheckboxes: boolean showIcons: boolean /** The single tabbable node. ARIA trees are ONE tab stop, not one per node. */ focusedId: string | null setFocusedId: (id: string) => void /** Visible nodes in render order, for Up/Down/Home/End navigation. */ visibleIds: string[] } const TreeViewContext = React.createContext(null) function useTreeView() { const context = React.useContext(TreeViewContext) if (!context) { throw new Error('TreeView components must be used within a ') } return context } const TreeView = React.forwardRef( ( { data, expandedIds: controlledExpandedIds, onExpandedChange, selectedIds: controlledSelectedIds, onSelectedChange, selectionMode = 'none', showCheckboxes = false, showIcons = true, defaultExpandedIds = [], defaultSelectedIds = [], className, ...props }, ref ) => { const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = React.useState>( new Set(defaultExpandedIds) ) const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = React.useState>( new Set(defaultSelectedIds) ) const isExpandedControlled = controlledExpandedIds !== undefined const isSelectedControlled = controlledSelectedIds !== undefined // Memoize Set objects to prevent useCallback dependencies from changing on every render const expandedIds = React.useMemo( () => (isExpandedControlled ? new Set(controlledExpandedIds) : uncontrolledExpandedIds), [isExpandedControlled, controlledExpandedIds, uncontrolledExpandedIds] ) const selectedIds = React.useMemo( () => (isSelectedControlled ? new Set(controlledSelectedIds) : uncontrolledSelectedIds), [isSelectedControlled, controlledSelectedIds, uncontrolledSelectedIds] ) const toggleExpanded = React.useCallback( (id: string) => { const newExpandedIds = new Set(expandedIds) if (newExpandedIds.has(id)) { newExpandedIds.delete(id) } else { newExpandedIds.add(id) } if (!isExpandedControlled) { setUncontrolledExpandedIds(newExpandedIds) } onExpandedChange?.(Array.from(newExpandedIds)) }, [expandedIds, isExpandedControlled, onExpandedChange] ) const toggleSelected = React.useCallback( (id: string) => { if (selectionMode === 'none') return let newSelectedIds: Set if (selectionMode === 'single') { newSelectedIds = selectedIds.has(id) ? new Set() : new Set([id]) } else { newSelectedIds = new Set(selectedIds) if (newSelectedIds.has(id)) { newSelectedIds.delete(id) } else { newSelectedIds.add(id) } } if (!isSelectedControlled) { setUncontrolledSelectedIds(newSelectedIds) } onSelectedChange?.(Array.from(newSelectedIds)) }, [selectedIds, selectionMode, isSelectedControlled, onSelectedChange] ) // Flattened visible order — what ArrowUp/ArrowDown/Home/End walk. const visibleIds = React.useMemo(() => { const out: string[] = [] const walk = (nodes: TreeNode[]) => { for (const node of nodes) { out.push(node.id) if (node.children?.length && expandedIds.has(node.id)) walk(node.children) } } walk(data) return out }, [data, expandedIds]) // An ARIA tree is a single tab stop: exactly one node carries tabIndex=0 // and the arrow keys move between nodes. Every node being tabbable made a // 200-node tree cost 200 Tab presses to get past. const [focusedId, setFocusedId] = React.useState(null) const activeId = focusedId && visibleIds.includes(focusedId) ? focusedId : visibleIds[0] ?? null return (

{data.map((node) => ( ))}

) } ) TreeView.displayName = 'TreeView' // Tree Node Component interface TreeNodeProps { node: TreeNode level: number } function TreeNodeItem({ node, level }: TreeNodeProps) { const { expandedIds, toggleExpanded, selectedIds, toggleSelected, selectionMode, showCheckboxes, showIcons, focusedId, setFocusedId, visibleIds, } = useTreeView() const hasChildren = node.children && node.children.length > 0 const isExpanded = expandedIds.has(node.id) const isSelected = selectedIds.has(node.id) const isFocused = focusedId === node.id const itemRef = React.useRef(null) // Move DOM focus to whichever node holds the roving tabindex, otherwise the // focus ring stops tracking arrow-key navigation. React.useEffect(() => { if (isFocused && document.activeElement !== itemRef.current) { const tree = itemRef.current?.closest('[role="tree"]') if (tree?.contains(document.activeElement)) itemRef.current?.focus() } }, [isFocused]) const moveFocus = (delta: number | 'first' | 'last') => { if (!visibleIds.length) return const current = Math.max(0, visibleIds.indexOf(node.id)) const next = delta === 'first' ? 0 : delta === 'last' ? visibleIds.length - 1 : Math.min(visibleIds.length - 1, Math.max(0, current + delta)) setFocusedId(visibleIds[next]) } const handleKeyDown = (e: React.KeyboardEvent) => { // A treeitem contains its descendants' group, so a key pressed on a child // also bubbles to every ancestor treeitem. Without this, the outermost // handler runs last and overwrites the focus the child just moved. if (e.target !== e.currentTarget) return switch (e.key) { case 'Enter': case ' ': e.preventDefault() if (selectionMode !== 'none') { toggleSelected(node.id) } else if (hasChildren) { toggleExpanded(node.id) } break case 'ArrowDown': e.preventDefault() moveFocus(1) break case 'ArrowUp': e.preventDefault() moveFocus(-1) break case 'Home': e.preventDefault() moveFocus('first') break case 'End': e.preventDefault() moveFocus('last') break case 'ArrowRight': e.preventDefault() // APG: expand a collapsed parent, else move into it. if (hasChildren && !isExpanded) toggleExpanded(node.id) else if (hasChildren) moveFocus(1) break case 'ArrowLeft': e.preventDefault() // APG: collapse an expanded parent, else move out to the parent. if (hasChildren && isExpanded) toggleExpanded(node.id) else moveFocus(-1) break } } // The treeitem owns its own group, so every treeitem's nearest role-bearing // ancestor is `tree` or `group` (axe `aria-required-parent`). It used to be // wrapped in a CollapsibleTrigger, which both broke that and made the row a // button containing other buttons (axe `nested-interactive`). return (

{ if (e.target === e.currentTarget) setFocusedId(node.id) }} onClick={(e) => { if (node.disabled) return // A treeitem owns its descendants' group, so a click inside a child // must not also activate this node. e.stopPropagation() setFocusedId(node.id) if (hasChildren) { toggleExpanded(node.id) } if (selectionMode !== 'none') { toggleSelected(node.id) } }} className="focus:outline-none" >

{/* Expand/collapse affordance. Presentational, not a button: the row already toggles on click and ArrowLeft/ArrowRight do it from the keyboard, and a real button here would be interactive content nested inside the treeitem. */} {hasChildren ? ( ) : ( )} {/* Checkbox — drawn, not a real control. `aria-selected` on the treeitem already conveys the state, and Radix's Checkbox renders a

{hasChildren && (

{(node.children ?? []).map((child) => ( ))}

)}

) } export { TreeView, useTreeView } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-collapsible",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-collapsible","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-collapsible"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils","@boldkit/checkbox","@boldkit/collapsible"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/tree-view.tsx","content":"$52","type":"registry:ui","target":"components/ui/tree-view.tsx"}],"className":"h-[70svh] min-h-80"}]]}]