{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-typing-command-center",
  "title": "Hero Typing Command Center",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/hero-typing-command-center/HeroTypingCommandCenter.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, Command, CornerDownLeft, FileCode, FolderGit2, Layers, Palette, Search, Zap } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface CommandAction {\n  id: string\n  title: string\n  category: 'Components' | 'Themes' | 'Git' | 'Workflows'\n  shortcut: string[]\n  icon: React.ComponentType<{ className?: string }>\n  description: string\n  status: string\n}\n\nexport interface HeroTypingCommandCenterProps {\n  title?: string\n  description?: string\n  className?: string\n}\n\nconst actions: CommandAction[] = [\n  {\n    id: 'add-pdp',\n    title: 'Insert Product Detail Page',\n    category: 'Components',\n    shortcut: ['⌘', 'I', 'P'],\n    icon: Layers,\n    description: 'Adds flagship unbundled PDP with gallery, reviews & buy box',\n    status: 'Ready to inject',\n  },\n  {\n    id: 'toggle-dark',\n    title: 'Toggle High-Contrast Dark Theme',\n    category: 'Themes',\n    shortcut: ['⌘', 'T'],\n    icon: Palette,\n    description: 'Switches active OKLCH tokens to studio obsidian mode',\n    status: 'Instant update',\n  },\n  {\n    id: 'git-branch',\n    title: 'Checkout Release Branch: v2.4.0',\n    category: 'Git',\n    shortcut: ['⌘', 'G', 'B'],\n    icon: FolderGit2,\n    description: 'Switches workspace to staging pipeline branch',\n    status: 'Clean working tree',\n  },\n  {\n    id: 'sync-registry',\n    title: 'Synchronize Dual-Framework ASTs',\n    category: 'Workflows',\n    shortcut: ['⌘', 'S', 'Y'],\n    icon: FileCode,\n    description: 'Generates parity manifests between Vue 3.5 and React 19',\n    status: 'Verified 100% parity',\n  },\n  {\n    id: 'run-audit',\n    title: 'Trigger Automated Craft Audit',\n    category: 'Workflows',\n    shortcut: ['⌘', 'A', 'U'],\n    icon: Zap,\n    description: 'Validates semantic scales, AA contrast and eliminates design slop',\n    status: 'Zero regressions',\n  },\n]\n\nexport function HeroTypingCommandCenter({\n  title = 'Execute workflows at the speed of thought with keyboard command palette.',\n  description = 'Instant component insertion, theme switching, git branches, and automated deployment pipelines driven by zero-latency hotkeys.',\n  className,\n}: HeroTypingCommandCenterProps) {\n  const [searchQuery, setSearchQuery] = React.useState('')\n  const [selectedIndex, setSelectedIndex] = React.useState(0)\n  const [executedAction, setExecutedAction] = React.useState<CommandAction | null>(null)\n\n  const filteredActions = React.useMemo(() => {\n    if (!searchQuery.trim()) return actions\n    const q = searchQuery.toLowerCase()\n    return actions.filter(\n      (a) =>\n        a.title.toLowerCase().includes(q) ||\n        a.category.toLowerCase().includes(q) ||\n        a.description.toLowerCase().includes(q),\n    )\n  }, [searchQuery])\n\n  function execute(action: CommandAction) {\n    setExecutedAction(action)\n    setTimeout(() => {\n      setExecutedAction(null)\n    }, 2500)\n  }\n\n  return (\n    <section\n      data-slot=\"hero-typing-command-center\"\n      className={cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div className=\"grid grid-cols-1 gap-12 lg:grid-cols-12 lg:items-center\">\n          {/* Left: Headline & Key Advantages (5 Cols) */}\n          <div className=\"space-y-6 lg:col-span-5\">\n            <div className=\"border-border/80 bg-secondary/60 text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs\">\n              <Command className=\"text-primary size-3.5\" />\n              <span>Keyboard Ergonomics &bull; Zero Latency</span>\n            </div>\n\n            <h1 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">{title}</h1>\n\n            <p className=\"text-muted-foreground text-base sm:text-lg\">{description}</p>\n\n            {/* Hotkey Highlights Grid */}\n            <div className=\"border-border bg-muted/20 grid grid-cols-2 gap-3 rounded-xl border p-4 text-xs\">\n              <div className=\"space-y-1\">\n                <div className=\"text-muted-foreground font-medium\">Global Trigger</div>\n                <div className=\"flex items-center gap-1 font-mono\">\n                  <kbd className=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">⌘</kbd>\n                  <kbd className=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">K</kbd>\n                </div>\n              </div>\n              <div className=\"space-y-1\">\n                <div className=\"text-muted-foreground font-medium\">Quick Insert</div>\n                <div className=\"flex items-center gap-1 font-mono\">\n                  <kbd className=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">⌘</kbd>\n                  <kbd className=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">I</kbd>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Right: Interactive Command Palette Hub (7 Cols) */}\n          <div className=\"lg:col-span-7\">\n            <Card className=\"border-border bg-card shadow-lg\">\n              {/* Search Header */}\n              <div className=\"border-border flex items-center gap-3 border-b px-4 py-3\">\n                <Search className=\"text-muted-foreground size-4 shrink-0\" />\n                <input\n                  value={searchQuery}\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  type=\"text\"\n                  placeholder=\"Type a command or search actions (e.g., 'insert', 'git', 'theme')...\"\n                  className=\"placeholder:text-muted-foreground text-foreground flex-1 bg-transparent text-sm outline-none\"\n                />\n                <div className=\"text-muted-foreground flex items-center gap-1 font-mono text-xs\">\n                  <kbd className=\"border-border bg-muted rounded border px-1.5 py-0.5 text-xs\">ESC</kbd>\n                </div>\n              </div>\n\n              {/* Command List */}\n              <CardContent className=\"space-y-1 p-2\">\n                {filteredActions.map((action, idx) => {\n                  const Icon = action.icon\n                  return (\n                    <button\n                      key={action.id}\n                      type=\"button\"\n                      className={cn(\n                        'group flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left transition-colors',\n                        selectedIndex === idx\n                          ? 'border-primary/30 bg-accent text-accent-foreground border'\n                          : 'hover:bg-muted/50 text-foreground border border-transparent',\n                      )}\n                      onMouseEnter={() => setSelectedIndex(idx)}\n                      onClick={() => execute(action)}\n                    >\n                      <div className=\"flex min-w-0 items-center gap-3\">\n                        <div className=\"border-border bg-background flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs\">\n                          <Icon className=\"text-primary size-4\" />\n                        </div>\n                        <div className=\"min-w-0 space-y-0.5\">\n                          <div className=\"flex items-center gap-2\">\n                            <span className=\"truncate text-xs font-semibold\">{action.title}</span>\n                            <Badge variant=\"outline\" className=\"h-4.5 px-1.5 text-xs\">\n                              {action.category}\n                            </Badge>\n                          </div>\n                          <p className=\"text-muted-foreground truncate text-xs\">{action.description}</p>\n                        </div>\n                      </div>\n\n                      {/* Shortcut Badge Group */}\n                      <div className=\"ml-3 flex shrink-0 items-center gap-1 font-mono text-xs\">\n                        {action.shortcut.map((key, kIdx) => (\n                          <kbd\n                            key={kIdx}\n                            className=\"border-border bg-background rounded border px-1.5 py-0.5 text-xs shadow-2xs\"\n                          >\n                            {key}\n                          </kbd>\n                        ))}\n                      </div>\n                    </button>\n                  )\n                })}\n              </CardContent>\n\n              {/* Status Footer */}\n              <div className=\"border-border bg-muted/30 flex items-center justify-between border-t px-4 py-2.5 text-xs\">\n                <div className=\"text-muted-foreground flex items-center gap-2\">\n                  <CornerDownLeft className=\"size-3.5\" />\n                  <span>\n                    Press <strong>Enter</strong> to run\n                  </span>\n                </div>\n                {executedAction ? (\n                  <div className=\"text-success flex items-center gap-1.5 font-semibold\">\n                    <Check className=\"size-3.5\" />\n                    <span>Executed: {executedAction.title}</span>\n                  </div>\n                ) : (\n                  <div className=\"text-muted-foreground font-mono text-xs\">\n                    {filteredActions.length} actions available\n                  </div>\n                )}\n              </div>\n            </Card>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/hero-typing-command-center/HeroTypingCommandCenter.tsx"
    },
    {
      "path": "packages/registry-react/blocks/hero-typing-command-center/index.ts",
      "content": "export { HeroTypingCommandCenter } from './HeroTypingCommandCenter'\nexport type { HeroTypingCommandCenterProps } from './HeroTypingCommandCenter'\n",
      "type": "registry:block",
      "target": "~/components/blocks/hero-typing-command-center/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Interactive CLI command center hero with animated execution simulator, output logs, and quick workflow presets.",
  "categories": [
    "hero",
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}