{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "context-action-menu",
  "type": "registry:ui",
  "title": "Context Action Menu",
  "description": "Desktop-style right-click context menu with keyboard shortcuts, destructive actions, and submenus.",
  "category": "overlays",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/overlays/context-action-menu/context-action-menu.tsx",
      "type": "registry:ui",
      "target": "components/ui/context-action-menu.tsx",
      "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Copy, Code, Trash, Play } from '@phosphor-icons/react';\n\nexport const ContextActionMenu: React.FC = () => {\n  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const handleContextMenu = (e: React.MouseEvent) => {\n    e.preventDefault();\n    openAtCoords(e.clientX, e.clientY);\n  };\n\n  const openAtCoords = (clientX: number, clientY: number) => {\n    const rect = containerRef.current?.getBoundingClientRect();\n    if (rect) {\n      const rawX = clientX - rect.left;\n      const rawY = clientY - rect.top;\n      const clampedX = Math.max(10, Math.min(rawX, rect.width - 200));\n      const clampedY = Math.max(10, Math.min(rawY, rect.height - 160));\n      setPos({ x: clampedX, y: clampedY });\n    }\n  };\n\n  useEffect(() => {\n    const handleClose = () => setPos(null);\n    window.addEventListener('click', handleClose);\n    return () => window.removeEventListener('click', handleClose);\n  }, []);\n\n  return (\n    <div\n      ref={containerRef}\n      onContextMenu={handleContextMenu}\n      onClick={(e) => {\n        if (!pos) openAtCoords(e.clientX, e.clientY);\n      }}\n      className=\"relative w-full max-w-sm mx-auto h-40 rounded-3xl border-2 border-dashed border-zinc-300 dark:border-white/15 bg-zinc-100/60 dark:bg-zinc-900/40 flex flex-col items-center justify-center select-none cursor-context-menu p-4 text-center\"\n    >\n      <span className=\"text-xs font-mono font-bold text-zinc-900 dark:text-white\">RIGHT CLICK OR TAP TO OPEN</span>\n      <span className=\"text-[10px] font-mono text-zinc-500 mt-1\">Triggers custom floating action context menu</span>\n\n      <AnimatePresence>\n        {pos && (\n          <motion.div\n            initial={{ opacity: 0, scale: 0.95 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.95 }}\n            transition={{ duration: 0.12 }}\n            style={{ top: pos.y, left: pos.x }}\n            className=\"absolute z-50 w-48 rounded-2xl border border-zinc-200 dark:border-white/15 bg-white dark:bg-zinc-950 p-1.5 shadow-2xl font-mono text-xs text-zinc-800 dark:text-zinc-200\"\n          >\n            <button className=\"flex w-full items-center justify-between px-2.5 py-1.5 rounded-xl hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors cursor-pointer\">\n              <span className=\"flex items-center gap-2\"><Copy size={13} /> Copy Path</span>\n              <span className=\"text-[10px] text-zinc-400\">⌘C</span>\n            </button>\n            <button className=\"flex w-full items-center justify-between px-2.5 py-1.5 rounded-xl hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors cursor-pointer\">\n              <span className=\"flex items-center gap-2\"><Code size={13} /> View AST</span>\n              <span className=\"text-[10px] text-zinc-400\">⌥V</span>\n            </button>\n            <button className=\"flex w-full items-center justify-between px-2.5 py-1.5 rounded-xl hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors cursor-pointer\">\n              <span className=\"flex items-center gap-2\"><Play size={13} /> Run Kernel</span>\n              <span className=\"text-[10px] text-zinc-400\">↵</span>\n            </button>\n            <div className=\"my-1 border-t border-zinc-200 dark:border-white/10\" />\n            <button className=\"flex w-full items-center justify-between px-2.5 py-1.5 rounded-xl hover:bg-rose-500/10 text-rose-500 transition-colors cursor-pointer\">\n              <span className=\"flex items-center gap-2\"><Trash size={13} /> Delete Block</span>\n              <span className=\"text-[10px]\">⌫</span>\n            </button>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n"
    }
  ]
}