{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tree",
  "type": "registry:component",
  "registryDependencies": [],
  "files": [
    {
      "path": "components/domain-ui/tree.tsx",
      "content": "\"use client\";\nimport { ChevronRight, File, Folder, FolderOpen } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport {\n  type ComponentProps,\n  createContext,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useId,\n  useState,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype TreeContextType = {\n  expandedIds: Set<string>;\n  selectedIds: string[];\n  toggleExpanded: (nodeId: string) => void;\n  handleSelection: (nodeId: string, ctrlKey: boolean) => void;\n  showLines?: boolean;\n  showIcons?: boolean;\n  selectable?: boolean;\n  multiSelect?: boolean;\n  indent?: number;\n  animateExpand?: boolean;\n};\n\nconst TreeContext = createContext<TreeContextType | undefined>(undefined);\n\nconst useTree = () => {\n  const context = useContext(TreeContext);\n  if (!context) {\n    throw new Error(\"Tree components must be used within a TreeProvider\");\n  }\n  return context;\n};\n\ntype TreeNodeContextType = {\n  nodeId: string;\n  level: number;\n  isLast: boolean;\n  parentPath: boolean[];\n};\n\nconst TreeNodeContext = createContext<TreeNodeContextType | undefined>(\n  undefined\n);\n\nconst useTreeNode = () => {\n  const context = useContext(TreeNodeContext);\n  if (!context) {\n    throw new Error(\"TreeNode components must be used within a TreeNode\");\n  }\n  return context;\n};\n\nexport type TreeProviderProps = {\n  children: ReactNode;\n  defaultExpandedIds?: string[];\n  showLines?: boolean;\n  showIcons?: boolean;\n  selectable?: boolean;\n  multiSelect?: boolean;\n  selectedIds?: string[];\n  onSelectionChange?: (selectedIds: string[]) => void;\n  indent?: number;\n  animateExpand?: boolean;\n  className?: string;\n};\n\nexport const TreeProvider = ({\n  children,\n  defaultExpandedIds = [],\n  showLines = true,\n  showIcons = true,\n  selectable = true,\n  multiSelect = false,\n  selectedIds,\n  onSelectionChange,\n  indent = 19,\n  animateExpand = true,\n  className,\n}: TreeProviderProps) => {\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(\n    new Set(defaultExpandedIds)\n  );\n  const [internalSelectedIds, setInternalSelectedIds] = useState<string[]>(\n    selectedIds ?? []\n  );\n\n  const isControlled =\n    selectedIds !== undefined && onSelectionChange !== undefined;\n  const currentSelectedIds = isControlled ? selectedIds : internalSelectedIds;\n\n  const toggleExpanded = useCallback((nodeId: string) => {\n    setExpandedIds((prev) => {\n      const newSet = new Set(prev);\n      if (newSet.has(nodeId)) {\n        newSet.delete(nodeId);\n      } else {\n        newSet.add(nodeId);\n      }\n      return newSet;\n    });\n  }, []);\n\n  const handleSelection = useCallback(\n    (nodeId: string, ctrlKey = false) => {\n      if (!selectable) {\n        return;\n      }\n\n      let newSelection: string[];\n\n      if (multiSelect && ctrlKey) {\n        newSelection = currentSelectedIds.includes(nodeId)\n          ? currentSelectedIds.filter((id) => id !== nodeId)\n          : [...currentSelectedIds, nodeId];\n      } else {\n        newSelection = currentSelectedIds.includes(nodeId) ? [] : [nodeId];\n      }\n\n      if (isControlled) {\n        onSelectionChange?.(newSelection);\n      } else {\n        setInternalSelectedIds(newSelection);\n      }\n    },\n    [\n      selectable,\n      multiSelect,\n      currentSelectedIds,\n      isControlled,\n      onSelectionChange,\n    ]\n  );\n\n  return (\n    <TreeContext.Provider\n      value={{\n        expandedIds,\n        selectedIds: currentSelectedIds,\n        toggleExpanded,\n        handleSelection,\n        showLines,\n        showIcons,\n        selectable,\n        multiSelect,\n        indent,\n        animateExpand,\n      }}\n    >\n      <motion.div\n        animate={{ opacity: 1, y: 0 }}\n        className={cn(\"w-full\", className)}\n        initial={{ opacity: 0, y: 10 }}\n        transition={{ duration: 0.3, ease: \"easeOut\" }}\n      >\n        {children}\n      </motion.div>\n    </TreeContext.Provider>\n  );\n};\n\nexport type TreeViewProps = HTMLAttributes<HTMLDivElement>;\n\nexport const TreeView = ({ className, children, ...props }: TreeViewProps) => (\n  <div className={cn(className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type TreeNodeProps = HTMLAttributes<HTMLDivElement> & {\n  nodeId?: string;\n  level?: number;\n  isLast?: boolean;\n  parentPath?: boolean[];\n  children?: ReactNode;\n};\n\nexport const TreeNode = ({\n  nodeId: providedNodeId,\n  level = 0,\n  isLast = false,\n  parentPath = [],\n  children,\n  className,\n  onClick,\n  ...props\n}: TreeNodeProps) => {\n  const generatedId = useId();\n  const nodeId = providedNodeId ?? generatedId;\n\n  // Build the parent path - mark positions where the parent was the last child\n  const currentPath = level === 0 ? [] : [...parentPath];\n  if (level > 0 && parentPath.length < level - 1) {\n    // Fill in missing levels with false (not last)\n    while (currentPath.length < level - 1) {\n      currentPath.push(false);\n    }\n  }\n  if (level > 0) {\n    currentPath[level - 1] = isLast;\n  }\n\n  return (\n    <TreeNodeContext.Provider\n      value={{\n        nodeId,\n        level,\n        isLast,\n        parentPath: currentPath,\n      }}\n    >\n      <div className={cn(\"select-none\", className)} {...props}>\n        {children}\n      </div>\n    </TreeNodeContext.Provider>\n  );\n};\n\nexport type TreeNodeTriggerProps = ComponentProps<typeof motion.div>;\n\nexport const TreeNodeTrigger = ({\n  children,\n  className,\n  onClick,\n  ...props\n}: TreeNodeTriggerProps) => {\n  const { selectedIds, toggleExpanded, handleSelection, expandedIds } =\n    useTree();\n  const { nodeId, level } = useTreeNode();\n  const isSelected = selectedIds.includes(nodeId);\n  const isExpanded = expandedIds.has(nodeId);\n\n  return (\n    <motion.div\n      aria-selected={isSelected}\n      aria-expanded={isExpanded}\n      className={cn(\n        \"group relative flex h-[28px] cursor-pointer select-none items-center gap-1.5 text-foreground-light text-sm transition-colors hover:bg-control aria-expanded:bg-transparent data-[state=open]:bg-transparent\",\n        isSelected && \"!bg-selection text-foreground\",\n        className\n      )}\n      onClick={(e) => {\n        toggleExpanded(nodeId);\n        handleSelection(nodeId, e.ctrlKey || e.metaKey);\n        onClick?.(e);\n      }}\n      style={{\n        paddingLeft: 24 + ((level - 1) * 38) / 2,\n      }}\n      whileTap={{ scale: 0.98, transition: { duration: 0.1 } }}\n      {...props}\n    >\n      <TreeLines />\n      {children as ReactNode}\n    </motion.div>\n  );\n};\n\nexport const TreeLines = () => {\n  const { showLines, selectedIds } = useTree();\n  const { level, nodeId } = useTreeNode();\n  const isSelected = selectedIds.includes(nodeId);\n\n  const CHEVRON_ICON_SIZE = 14;\n\n  return (\n    <>\n      {showLines &&\n        Array.from({ length: level - 1 }).map((_, i) => (\n          <div\n            // biome-ignore lint/suspicious/noArrayIndexKey: These are purely positional decorative lines\n            key={i}\n            style={{\n              left: 24 + (i * 38) / 2 + CHEVRON_ICON_SIZE / 2,\n            }}\n            className={\"absolute h-full w-px bg-border-strong\"}\n          />\n        ))}\n      {isSelected && (\n        <div className=\"absolute left-0 h-full w-0.5 bg-foreground\" />\n      )}\n    </>\n  );\n};\n\nexport type TreeNodeContentProps = ComponentProps<typeof motion.div> & {\n  hasChildren?: boolean;\n};\n\nexport const TreeNodeContent = ({\n  children,\n  hasChildren = false,\n  className,\n  ...props\n}: TreeNodeContentProps) => {\n  const { animateExpand, expandedIds } = useTree();\n  const { nodeId } = useTreeNode();\n  const isExpanded = expandedIds.has(nodeId);\n\n  return (\n    <AnimatePresence>\n      {hasChildren && isExpanded && (\n        <motion.div\n          animate={{ height: \"auto\", opacity: 1 }}\n          className=\"overflow-hidden\"\n          exit={{ height: 0, opacity: 0 }}\n          initial={{ height: 0, opacity: 0 }}\n          transition={{\n            duration: animateExpand ? 0.3 : 0,\n            ease: \"easeInOut\",\n          }}\n        >\n          <motion.div\n            animate={{ y: 0 }}\n            className={className}\n            exit={{ y: -10 }}\n            initial={{ y: -10 }}\n            transition={{\n              duration: animateExpand ? 0.2 : 0,\n              delay: animateExpand ? 0.1 : 0,\n            }}\n            {...props}\n          >\n            {children}\n          </motion.div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport type TreeExpanderProps = ComponentProps<typeof motion.div> & {\n  hasChildren?: boolean;\n};\n\nexport const TreeExpander = ({\n  hasChildren = false,\n  className,\n  onClick,\n  ...props\n}: TreeExpanderProps) => {\n  const { expandedIds, toggleExpanded } = useTree();\n  const { nodeId } = useTreeNode();\n  const isExpanded = expandedIds.has(nodeId);\n\n  if (!hasChildren) {\n    return null;\n  }\n\n  return (\n    <motion.div\n      animate={{ rotate: isExpanded ? 90 : 0 }}\n      className={cn(\"flex items-center justify-center\", className)}\n      onClick={(e) => {\n        e.stopPropagation();\n        toggleExpanded(nodeId);\n        onClick?.(e);\n      }}\n      transition={{ duration: 0.2, ease: \"easeInOut\" }}\n      {...props}\n    >\n      <ChevronRight\n        className={cn(\n          \"text-foreground-muted\",\n          \"group-aria-selected:text-foreground-light\",\n          \"group-aria-expanded:text-foreground-light\",\n          \"transition-transform duration-200\"\n        )}\n        size={14}\n        strokeWidth={1.5}\n      />\n    </motion.div>\n  );\n};\n\nexport type TreeIconProps = ComponentProps<typeof motion.div> & {\n  icon?: ReactNode;\n  hasChildren?: boolean;\n};\n\nexport const TreeIcon = ({\n  icon,\n  hasChildren = false,\n  className,\n  ...props\n}: TreeIconProps) => {\n  const { showIcons, expandedIds } = useTree();\n  const { nodeId } = useTreeNode();\n  const isExpanded = expandedIds.has(nodeId);\n\n  if (!showIcons) {\n    return null;\n  }\n\n  const getDefaultIcon = () =>\n    hasChildren ? (\n      isExpanded ? (\n        <FolderOpen\n          className={cn(\n            \"transition-colors\",\n            \"text-foreground-muted\",\n            \"group-aria-selected:text-foreground-light\",\n            \"group-aria-expanded:text-foreground-light\"\n          )}\n          size={16}\n          strokeWidth={1.5}\n        />\n      ) : (\n        <Folder\n          className={cn(\n            \"transition-colors\",\n            \"text-foreground-muted\",\n            \"group-aria-selected:text-foreground-light\",\n            \"group-aria-expanded:text-foreground-light\"\n          )}\n          size={16}\n          strokeWidth={1.5}\n        />\n      )\n    ) : (\n      icon || (\n        <File\n          className={cn(\n            \"transition-colors\",\n            \"text-foreground-muted\",\n            \"group-aria-selected:text-foreground-light\",\n            \"group-aria-expanded:text-foreground-light\"\n          )}\n          size={16}\n          strokeWidth={1.5}\n        />\n      )\n    );\n\n  return (\n    <motion.div\n      className={cn(\"flex items-center justify-center\", className)}\n      {...props}\n    >\n      {getDefaultIcon()}\n    </motion.div>\n  );\n};\n\nexport type TreeLabelProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const TreeLabel = ({ className, ...props }: TreeLabelProps) => (\n  <span className={cn(\"truncate text-sm\", className)} {...props} />\n);\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "tree",
      "file-tree",
      "hierarchy",
      "navigation",
      "expand",
      "collapse",
      "nested",
      "folders",
      "files"
    ]
  }
}