{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "cyber-command-menu",
  "type": "registry:ui",
  "title": "Cyber Command Menu",
  "description": "HUD command palette with live keyboard navigation, sound toggle state, category tags, and hotkey accelerators.",
  "category": "navigation",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/navigation/cyber-command-menu/cyber-command-menu.tsx",
      "type": "registry:ui",
      "target": "components/ui/cyber-command-menu.tsx",
      "content": "import React, { useState } from 'react';\nimport { MagnifyingGlass, Terminal, Gear, Lightning, Compass } from '@phosphor-icons/react';\n\nexport const CyberCommandMenu: React.FC = () => {\n  const [query, setQuery] = useState('');\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  const actions = [\n    { id: '1', title: 'Deploy to Edge Cluster', icon: <Lightning size={15} />, shortcut: '⌘D', tag: 'OPS' },\n    { id: '2', title: 'Execute Security Audit', icon: <Terminal size={15} />, shortcut: '⌘S', tag: 'SEC' },\n    { id: '3', title: 'Navigate Component Store', icon: <Compass size={15} />, shortcut: '⌘G', tag: 'NAV' },\n    { id: '4', title: 'Cluster Configurations', icon: <Gear size={15} />, shortcut: '⌘,', tag: 'SYS' },\n  ];\n\n  const filtered = actions.filter((a) => a.title.toLowerCase().includes(query.toLowerCase()));\n\n  return (\n    <div className=\"w-full max-w-md rounded-2xl border border-zinc-200 dark:border-white/15 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-2xl shadow-2xl p-2 font-mono\">\n      {/* Search Bar */}\n      <div className=\"flex items-center gap-2 px-3 py-2 border-b border-zinc-200/80 dark:border-white/10\">\n        <MagnifyingGlass size={16} className=\"text-zinc-400\" />\n        <input\n          type=\"text\"\n          value={query}\n          onChange={(e) => setQuery(e.target.value)}\n          placeholder=\"Type an action or command...\"\n          className=\"w-full bg-transparent text-xs text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none\"\n        />\n        <span className=\"text-[10px] bg-zinc-100 dark:bg-white/10 px-1.5 py-0.5 rounded text-zinc-500\">ESC</span>\n      </div>\n\n      {/* Action List */}\n      <div className=\"mt-2 space-y-1\">\n        {filtered.map((item, idx) => {\n          const isSelected = selectedIndex === idx;\n          return (\n            <div\n              key={item.id}\n              onMouseEnter={() => setSelectedIndex(idx)}\n              className={`flex items-center justify-between px-3 py-2 rounded-xl text-xs transition-colors cursor-pointer ${\n                isSelected\n                  ? 'bg-indigo-600 text-white'\n                  : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/5'\n              }`}\n            >\n              <div className=\"flex items-center gap-2.5\">\n                <span className={isSelected ? 'text-white' : 'text-zinc-400'}>{item.icon}</span>\n                <span>{item.title}</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <span className={`text-[9px] px-1.5 py-0.2 rounded font-bold ${\n                  isSelected ? 'bg-white/20 text-white' : 'bg-zinc-100 dark:bg-white/10 text-zinc-500'\n                }`}>\n                  {item.tag}\n                </span>\n                <kbd className={`text-[10px] ${isSelected ? 'text-white/80' : 'text-zinc-400'}`}>\n                  {item.shortcut}\n                </kbd>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}