{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "glassmorphic-command-hud",
  "type": "registry:ui",
  "title": "Glassmorphic Command HUD",
  "description": "Modern floating spotlight palette with fuzzy search filter, keyboard shortcut triggers, category tags, and frosted dark glass backdrop.",
  "category": "overlays",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/overlays/glassmorphic-command-hud/glassmorphic-command-hud.tsx",
      "type": "registry:ui",
      "target": "components/ui/glassmorphic-command-hud.tsx",
      "content": "import React, { useState, useMemo } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { \n  MagnifyingGlass, \n  Command, \n  Terminal, \n  Gear, \n  ShieldCheck, \n  ArrowRight, \n  FileCode,\n  FolderOpen,\n  Cpu,\n  Check\n} from '@phosphor-icons/react';\n\nexport interface CommandItem {\n  id: string;\n  title: string;\n  category: 'Actions' | 'Navigation' | 'System';\n  shortcut?: string;\n  icon: 'terminal' | 'gear' | 'shield' | 'file' | 'cpu';\n}\n\nconst DEFAULT_COMMANDS: CommandItem[] = [\n  { id: '1', title: 'Open Integrated Terminal', category: 'Actions', shortcut: '⌘`', icon: 'terminal' },\n  { id: '2', title: 'Search File Symbols & Hooks', category: 'Navigation', shortcut: '⌘P', icon: 'file' },\n  { id: '3', title: 'Compile WebAssembly Kernel', category: 'Actions', shortcut: '⇧⌘B', icon: 'cpu' },\n  { id: '4', title: 'Toggle Hardware Acceleration', category: 'System', shortcut: '⌥H', icon: 'gear' },\n  { id: '5', title: 'Audit Cryptographic Secrets', category: 'System', shortcut: '⌘S', icon: 'shield' },\n  { id: '6', title: 'Inspect Network Requests', category: 'Navigation', shortcut: '⌥I', icon: 'terminal' },\n];\n\nexport interface GlassmorphicCommandHudProps {\n  placeholder?: string;\n  maxResults?: number;\n  className?: string;\n}\n\nexport const GlassmorphicCommandHud: React.FC<GlassmorphicCommandHudProps> = ({\n  placeholder = 'Type a command or search action...',\n  maxResults = 5,\n  className = '',\n}) => {\n  const [query, setQuery] = useState('');\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [executedId, setExecutedId] = useState<string | null>(null);\n\n  const filteredCommands = useMemo(() => {\n    if (!query.trim()) return DEFAULT_COMMANDS.slice(0, maxResults);\n    return DEFAULT_COMMANDS.filter((cmd) =>\n      cmd.title.toLowerCase().includes(query.toLowerCase()) ||\n      cmd.category.toLowerCase().includes(query.toLowerCase())\n    ).slice(0, maxResults);\n  }, [query, maxResults]);\n\n  const handleSelect = (cmd: CommandItem) => {\n    setExecutedId(cmd.id);\n    setTimeout(() => setExecutedId(null), 1500);\n  };\n\n  const getIcon = (type: CommandItem['icon']) => {\n    switch (type) {\n      case 'terminal': return <Terminal size={15} weight=\"bold\" className=\"text-emerald-400\" />;\n      case 'gear': return <Gear size={15} weight=\"bold\" className=\"text-zinc-400\" />;\n      case 'shield': return <ShieldCheck size={15} weight=\"bold\" className=\"text-cyan-400\" />;\n      case 'cpu': return <Cpu size={15} weight=\"bold\" className=\"text-amber-400\" />;\n      case 'file': return <FileCode size={15} weight=\"bold\" className=\"text-indigo-400\" />;\n      default: return <Command size={15} weight=\"bold\" className=\"text-zinc-400\" />;\n    }\n  };\n\n  return (\n    <div className={`w-full max-w-xl mx-auto rounded-3xl border border-zinc-200/90 dark:border-white/10 bg-white/90 dark:bg-zinc-950/85 backdrop-blur-2xl shadow-2xl overflow-hidden font-mono text-xs ${className}`}>\n      {/* Search Input Bar */}\n      <div className=\"flex items-center gap-3 px-5 py-4 border-b border-zinc-200/80 dark:border-white/10 bg-zinc-50/50 dark:bg-white/[0.02]\">\n        <MagnifyingGlass size={16} weight=\"bold\" className=\"text-zinc-400\" />\n        <input\n          type=\"text\"\n          value={query}\n          onChange={(e) => {\n            setQuery(e.target.value);\n            setSelectedIndex(0);\n          }}\n          placeholder={placeholder}\n          className=\"flex-1 bg-transparent text-zinc-900 dark:text-white placeholder:text-zinc-400 focus:outline-none text-xs font-mono\"\n        />\n        <div className=\"flex items-center gap-1.5 text-[10px] text-zinc-400 bg-zinc-100 dark:bg-white/5 px-2 py-0.5 rounded-lg border border-zinc-200 dark:border-white/5\">\n          <Command size={11} weight=\"bold\" />\n          <span>K</span>\n        </div>\n      </div>\n\n      {/* Results List */}\n      <div className=\"p-2 space-y-1\">\n        {filteredCommands.length > 0 ? (\n          filteredCommands.map((cmd, idx) => {\n            const isSelected = idx === selectedIndex;\n            const isDone = executedId === cmd.id;\n\n            return (\n              <div\n                key={cmd.id}\n                onClick={() => handleSelect(cmd)}\n                onMouseEnter={() => setSelectedIndex(idx)}\n                className={`flex items-center justify-between px-3.5 py-2.5 rounded-2xl transition-all cursor-pointer ${\n                  isSelected\n                    ? 'bg-zinc-100 dark:bg-white/10 text-zinc-900 dark:text-white shadow-2xs'\n                    : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-white/5'\n                }`}\n              >\n                <div className=\"flex items-center gap-3 truncate\">\n                  <div className=\"flex h-7 w-7 items-center justify-center rounded-xl bg-zinc-200/60 dark:bg-white/5 border border-zinc-300/60 dark:border-white/5\">\n                    {getIcon(cmd.icon)}\n                  </div>\n                  <div className=\"truncate\">\n                    <span className=\"font-semibold\">{cmd.title}</span>\n                    <span className=\"ml-2 text-[10px] text-zinc-400 font-mono\">[{cmd.category}]</span>\n                  </div>\n                </div>\n\n                <div className=\"flex items-center gap-2\">\n                  {isDone ? (\n                    <span className=\"flex items-center gap-1 text-[11px] text-emerald-500 font-bold\">\n                      <Check size={12} weight=\"bold\" />\n                      Executed\n                    </span>\n                  ) : cmd.shortcut ? (\n                    <span className=\"px-2 py-0.5 rounded-md bg-zinc-200/60 dark:bg-zinc-800 text-[10px] text-zinc-500 dark:text-zinc-300 border border-zinc-300/60 dark:border-white/5\">\n                      {cmd.shortcut}\n                    </span>\n                  ) : null}\n                  <ArrowRight size={12} className=\"text-zinc-400 opacity-60\" />\n                </div>\n              </div>\n            );\n          })\n        ) : (\n          <div className=\"py-8 text-center text-zinc-400 text-xs font-mono\">\n            No actions match \"{query}\"\n          </div>\n        )}\n      </div>\n\n      {/* Footer Navigation Hints */}\n      <div className=\"flex items-center justify-between px-4 py-2.5 border-t border-zinc-200/80 dark:border-white/5 bg-zinc-50/50 dark:bg-white/[0.01] text-[10px] text-zinc-400\">\n        <div className=\"flex items-center gap-3\">\n          <span>&uarr;&darr; Navigate</span>\n          <span>&crarr; Execute</span>\n          <span>ESC Close</span>\n        </div>\n        <span className=\"text-zinc-500 font-bold uppercase\">Spotlight HUD v2</span>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}