{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "fluid-action-panel",
  "type": "registry:ui",
  "title": "Fluid Action Panel",
  "description": "Floating quick-action toolbar that morphs dynamically with spring expansion and sub-action triggers.",
  "category": "navigation",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/navigation/fluid-action-panel/fluid-action-panel.tsx",
      "type": "registry:ui",
      "target": "components/ui/fluid-action-panel.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Plus, MagnifyingGlass, Gear, Terminal, BookmarkSimple } from '@phosphor-icons/react';\n\nexport const FluidActionPanel: React.FC = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <div className=\"flex items-center justify-center py-6\">\n      <motion.div\n        layout\n        transition={{ type: 'spring', stiffness: 450, damping: 30 }}\n        className=\"flex items-center gap-1.5 p-1.5 rounded-full border border-zinc-200 dark:border-white/15 bg-white/90 dark:bg-zinc-950/90 shadow-2xl backdrop-blur-2xl\"\n      >\n        <button\n          onClick={() => setIsExpanded(!isExpanded)}\n          className=\"flex h-9 w-9 items-center justify-center rounded-full bg-indigo-600 hover:bg-indigo-500 text-white shadow-md transition-transform cursor-pointer\"\n        >\n          <motion.div animate={{ rotate: isExpanded ? 45 : 0 }} transition={{ duration: 0.2 }}>\n            <Plus size={16} weight=\"bold\" />\n          </motion.div>\n        </button>\n\n        <AnimatePresence>\n          {isExpanded && (\n            <motion.div\n              initial={{ opacity: 0, width: 0 }}\n              animate={{ opacity: 1, width: 'auto' }}\n              exit={{ opacity: 0, width: 0 }}\n              className=\"flex items-center gap-1 overflow-hidden\"\n            >\n              <button className=\"flex h-9 w-9 items-center justify-center rounded-full text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors cursor-pointer\">\n                <MagnifyingGlass size={16} />\n              </button>\n              <button className=\"flex h-9 w-9 items-center justify-center rounded-full text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors cursor-pointer\">\n                <Terminal size={16} />\n              </button>\n              <button className=\"flex h-9 w-9 items-center justify-center rounded-full text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors cursor-pointer\">\n                <BookmarkSimple size={16} />\n              </button>\n              <button className=\"flex h-9 w-9 items-center justify-center rounded-full text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors cursor-pointer\">\n                <Gear size={16} />\n              </button>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </motion.div>\n    </div>\n  );\n};\n"
    }
  ]
}