{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contextual-ai-bar",
  "type": "registry:component",
  "title": "Contextual AI Bar",
  "description": "A sleek, adaptive action bar that toggles between tool icons and an AI-powered input field with smooth morphing transitions.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/contextual-ai-bar.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ArrowRight } from 'lucide-react';\n\nexport interface ContextualAIBarProps {\n  defaultExpanded?: boolean;\n  placeholder?: string;\n  tools?: React.ReactNode[];\n  musicIcon: React.ReactNode;\n  sparkleIcon: React.ReactNode;\n}\n\nexport const ContextualAIBar: React.FC<ContextualAIBarProps> = ({\n  defaultExpanded = false,\n  placeholder = 'Refine with AI',\n  tools = [],\n  musicIcon,\n  sparkleIcon,\n}) => {\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n  const spring = {\n    type: 'spring',\n    stiffness: 220,\n    damping: 16,\n    mass: 1.2,\n  } as const;\n\n  return (\n    <motion.div\n      layout\n      transition={spring}\n      className=\"relative flex w-full max-w-[calc(100vw-32px)] items-center justify-between overflow-hidden rounded-full border border-[#e8e8e9]/30 bg-neutral-100 p-1 shadow-sm sm:max-w-md dark:border-neutral-800/30 dark:bg-neutral-900/60\"\n    >\n      <motion.div\n        layout\n        className=\"flex shrink-0 items-center gap-1 rounded-full bg-white p-1 shadow-md dark:bg-neutral-800\"\n      >\n        <motion.button\n          onClick={() => setIsExpanded(false)}\n          whileTap={{ scale: 0.9 }}\n          className=\"relative rounded-full p-2.5 outline-none\"\n        >\n          {!isExpanded && (\n            <motion.div\n              layoutId=\"active-pill\"\n              transition={spring}\n              className=\"absolute inset-0 rounded-full bg-neutral-200 dark:bg-neutral-700\"\n            />\n          )}\n\n          <div className=\"relative z-10\">{musicIcon}</div>\n        </motion.button>\n\n        <motion.button\n          onClick={() => setIsExpanded(true)}\n          whileTap={{ scale: 0.9 }}\n          className=\"relative rounded-full p-2.5 outline-none\"\n        >\n          {isExpanded && (\n            <motion.div\n              layoutId=\"active-pill\"\n              transition={spring}\n              className=\"absolute inset-0 rounded-full bg-neutral-200 dark:bg-neutral-700\"\n            />\n          )}\n\n          <div className=\"relative z-10\">{sparkleIcon}</div>\n        </motion.button>\n      </motion.div>\n\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        {!isExpanded ? (\n          <motion.div\n            key=\"tools\"\n            initial={{ opacity: 0, filter: 'blur(4px)', x: 22 }}\n            animate={{ opacity: 1, filter: 'blur(0px)', x: 0 }}\n            exit={{ opacity: 0, filter: 'blur(4px)', x: 30 }}\n            transition={spring}\n            className=\"flex flex-1 items-center justify-end gap-3 px-4 sm:gap-5\"\n          >\n            {tools.map((tool, index) => (\n              <ToolIcon key={index}>{tool}</ToolIcon>\n            ))}\n          </motion.div>\n        ) : (\n          <motion.div\n            key=\"input\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={spring}\n            className=\"flex flex-1 items-center gap-1 pl-2 sm:gap-2 sm:pl-4\"\n          >\n            <input\n              autoFocus\n              type=\"text\"\n              placeholder={placeholder}\n              className=\"w-full flex-1 border-none bg-transparent text-lg text-gray-800 placeholder-gray-400 outline-none sm:text-xl dark:text-neutral-100 dark:placeholder-neutral-500\"\n            />\n\n            <motion.button\n              whileHover={{ scale: 1.05 }}\n              whileTap={{ scale: 0.92 }}\n              transition={spring}\n              className=\"shrink-0 rounded-full border border-gray-100 bg-[#fcfcfc] p-2.5 text-black shadow-md hover:bg-gray-50 sm:p-3 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700\"\n            >\n              <ArrowRight\n                size={20}\n                className=\"sm:h-[22px] sm:w-[22px]\"\n                strokeWidth={2.5}\n              />\n            </motion.button>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </motion.div>\n  );\n};\n\nconst ToolIcon = ({ children }: { children: React.ReactNode }) => (\n  <motion.div\n    whileHover={{ scale: 1.05 }}\n    whileTap={{ scale: 0.92 }}\n    transition={{\n      type: 'spring',\n      stiffness: 300,\n      damping: 26,\n      mass: 1.1,\n    }}\n    className=\"cursor-pointer text-[#040404] dark:text-neutral-100\"\n  >\n    {children}\n  </motion.div>\n);\n"
    }
  ]
}