{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tree-menu",
  "type": "registry:component",
  "title": "Tree-menu",
  "description": "A nested tree navigation menu with animated level transitions and breadcrumb navigation.",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/tree-menu.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState, useRef, type FC } from 'react';\nimport { motion, AnimatePresence, type Variants } from 'motion/react';\nimport { TbArrowBackUp } from 'react-icons/tb';\n\nexport interface MenuItem {\n  id: string;\n  label: string;\n  children?: MenuItem[];\n}\n\ninterface TreeMenuProps {\n  menuData?: MenuItem[];\n  onSelect?: (item: MenuItem) => void;\n}\n\nexport const TreeMenu: FC<TreeMenuProps> = ({ menuData = [], onSelect }) => {\n  const [path, setPath] = useState<MenuItem[]>([]);\n  const [activeItemId, setActiveItemId] = useState<string | null>(null);\n  const clickedIndexRef = useRef<number | null>(null);\n\n  const currentItems =\n    path.length === 0 ? menuData : path[path.length - 1].children || [];\n\n  const handleNavigateForward = (item: MenuItem, index: number) => {\n    if (item.children?.length) {\n      clickedIndexRef.current = index;\n      setPath((prev) => [...prev, item]);\n      setActiveItemId(null); // Clear selection when navigating deeper\n    } else {\n      setActiveItemId(item.id);\n      if (onSelect) {\n        onSelect(item);\n      }\n    }\n  };\n\n  const handleNavigateBack = (index: number) => {\n    clickedIndexRef.current = null;\n    setPath((prev) => prev.slice(0, index));\n  };\n\n  const containerVariants: Variants = {\n    initial: { opacity: 0 },\n    animate: { opacity: 1, transition: { staggerChildren: 0.05 } },\n    exit: {},\n  };\n\n  const itemVariants: Variants = {\n    initial: { opacity: 0, y: 15 },\n    animate: { opacity: 1, y: 0 },\n    exit: (index: number) => {\n      const clicked = clickedIndexRef.current;\n      if (clicked !== null) {\n        if (index < clicked)\n          return {\n            opacity: 0,\n            y: -100,\n            transition: { duration: 0.3, ease: 'easeOut' },\n          };\n        if (index > clicked)\n          return {\n            opacity: 0,\n            y: 100,\n            transition: { duration: 0.3, ease: 'easeOut' },\n          };\n        return { opacity: 0, transition: { duration: 0.2 } };\n      }\n      return { opacity: 0, y: -10, transition: { duration: 0.2 } };\n    },\n  };\n\n  return (\n    <div className=\"flex min-h-full w-full flex-col items-center justify-center overflow-x-hidden bg-transparent pt-12 pb-20 transition-colors duration-300\">\n      <div className=\"flex min-h-100 w-full max-w-lg flex-col px-6 sm:px-10\">\n        {/* Breadcrumb */}\n        <div className=\"mb-8 flex flex-col items-start space-y-1\">\n          <AnimatePresence mode=\"popLayout\">\n            {path.map((item, idx) => (\n              <motion.button\n                key={`path-${item.id}`}\n                layout=\"position\"\n                initial={{ opacity: 0, x: -10 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0, x: -5, transition: { duration: 0.4 } }}\n                onClick={() => handleNavigateBack(idx)}\n                className=\"flex items-center gap-2 rounded-lg px-2 py-1 text-xl font-semibold text-neutral-400 transition-colors hover:bg-neutral-100 sm:text-2xl dark:text-neutral-500 dark:hover:bg-neutral-800\"\n                style={{ marginLeft: `${idx * 12}px` }}\n              >\n                <TbArrowBackUp size={20} />\n                <motion.span\n                  layoutId={`name-${item.id}`}\n                  className=\"inline-block max-w-50 truncate sm:max-w-xs\"\n                >\n                  {item.label}\n                </motion.span>\n              </motion.button>\n            ))}\n          </AnimatePresence>\n        </div>\n\n        {/* Menu List */}\n        <div className=\"relative\">\n          <AnimatePresence mode=\"popLayout\">\n            <motion.ul\n              key={path.length === 0 ? 'root' : path[path.length - 1].id}\n              variants={containerVariants}\n              initial=\"initial\"\n              animate=\"animate\"\n              exit=\"exit\"\n              className=\"flex w-full flex-col items-start space-y-1\"\n              style={{ paddingLeft: `${path.length * 16}px` }}\n            >\n              {currentItems.map((item, index) => {\n                const hasChildren = !!item.children?.length;\n\n                return (\n                  <motion.li\n                    key={item.id}\n                    custom={index}\n                    variants={itemVariants}\n                    className=\"w-full\"\n                  >\n                    <button\n                      onClick={() => handleNavigateForward(item, index)}\n                      className={`group w-full rounded-xl px-4 py-3 text-left text-xl font-semibold transition-all duration-200 sm:text-2xl ${\n                        hasChildren\n                          ? 'text-neutral-900 hover:bg-neutral-100 hover:text-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-300'\n                          : activeItemId === item.id\n                            ? 'bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'\n                            : 'text-neutral-500 hover:bg-neutral-50 hover:text-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-200'\n                      }`}\n                    >\n                      <motion.span\n                        layoutId={hasChildren ? `name-${item.id}` : undefined}\n                        className=\"inline-block\"\n                      >\n                        {item.label}\n                      </motion.span>\n                    </button>\n                  </motion.li>\n                );\n              })}\n            </motion.ul>\n          </AnimatePresence>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default TreeMenu;\n"
    }
  ]
}