{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero-typing-command-center",
  "title": "Hero Typing Command Center",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero-typing-command-center/HeroTypingCommandCenter.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, Command, CornerDownLeft, FileCode, FolderGit2, Layers, Palette, Search, Zap } from 'lucide-vue-next'\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: any\n  description: string\n  status: string\n}\n\nexport interface HeroTypingCommandCenterProps {\n  title?: string\n  description?: string\n  class?: string\n}\n\nconst props = withDefaults(defineProps<HeroTypingCommandCenterProps>(), {\n  title: 'Execute workflows at the speed of thought with keyboard command palette.',\n  description:\n    'Instant component insertion, theme switching, git branches, and automated deployment pipelines driven by zero-latency hotkeys.',\n})\n\nconst searchQuery = ref('')\nconst selectedIndex = ref(0)\nconst executedAction = ref<CommandAction | null>(null)\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\nconst filteredActions = computed(() => {\n  if (!searchQuery.value.trim()) return actions\n  const q = searchQuery.value.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})\n\nfunction execute(action: CommandAction) {\n  executedAction.value = action\n  setTimeout(() => {\n    executedAction.value = null\n  }, 2500)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-typing-command-center\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-12 lg:grid-cols-12 lg:items-center\">\n        <!-- Left: Headline & Key Advantages (5 Cols) -->\n        <div class=\"space-y-6 lg:col-span-5\">\n          <div\n            class=\"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          >\n            <Command class=\"text-primary size-3.5\" />\n            <span>Keyboard Ergonomics &bull; Zero Latency</span>\n          </div>\n\n          <h1 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">\n            {{ title }}\n          </h1>\n\n          <p class=\"text-muted-foreground text-base sm:text-lg\">\n            {{ description }}\n          </p>\n\n          <!-- Hotkey Highlights Grid -->\n          <div class=\"border-border bg-muted/20 grid grid-cols-2 gap-3 rounded-xl border p-4 text-xs\">\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground font-medium\">Global Trigger</div>\n              <div class=\"flex items-center gap-1 font-mono\">\n                <kbd class=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">⌘</kbd>\n                <kbd class=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">K</kbd>\n              </div>\n            </div>\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground font-medium\">Quick Insert</div>\n              <div class=\"flex items-center gap-1 font-mono\">\n                <kbd class=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">⌘</kbd>\n                <kbd class=\"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 class=\"lg:col-span-7\">\n          <Card class=\"border-border bg-card shadow-lg\">\n            <!-- Search Header -->\n            <div class=\"border-border flex items-center gap-3 border-b px-4 py-3\">\n              <Search class=\"text-muted-foreground size-4 shrink-0\" />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                placeholder=\"Type a command or search actions (e.g., 'insert', 'git', 'theme')...\"\n                class=\"placeholder:text-muted-foreground text-foreground flex-1 bg-transparent text-sm outline-none\"\n              />\n              <div class=\"text-muted-foreground flex items-center gap-1 font-mono text-xs\">\n                <kbd class=\"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 class=\"space-y-1 p-2\">\n              <button\n                v-for=\"(action, idx) in filteredActions\"\n                :key=\"action.id\"\n                type=\"button\"\n                :class=\"\n                  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                \"\n                @mouseenter=\"selectedIndex = idx\"\n                @click=\"execute(action)\"\n              >\n                <div class=\"flex min-w-0 items-center gap-3\">\n                  <div\n                    class=\"border-border bg-background flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs\"\n                  >\n                    <component :is=\"action.icon\" class=\"text-primary size-4\" />\n                  </div>\n                  <div class=\"min-w-0 space-y-0.5\">\n                    <div class=\"flex items-center gap-2\">\n                      <span class=\"truncate text-xs font-semibold\">{{ action.title }}</span>\n                      <Badge variant=\"outline\" class=\"h-4.5 px-1.5 text-xs\">{{ action.category }}</Badge>\n                    </div>\n                    <p class=\"text-muted-foreground truncate text-xs\">{{ action.description }}</p>\n                  </div>\n                </div>\n\n                <!-- Shortcut Badge Group -->\n                <div class=\"ml-3 flex shrink-0 items-center gap-1 font-mono text-xs\">\n                  <kbd\n                    v-for=\"(key, kIdx) in action.shortcut\"\n                    :key=\"kIdx\"\n                    class=\"border-border bg-background rounded border px-1.5 py-0.5 text-xs shadow-2xs\"\n                  >\n                    {{ key }}\n                  </kbd>\n                </div>\n              </button>\n            </CardContent>\n\n            <!-- Status Footer -->\n            <div class=\"border-border bg-muted/30 flex items-center justify-between border-t px-4 py-2.5 text-xs\">\n              <div class=\"text-muted-foreground flex items-center gap-2\">\n                <CornerDownLeft class=\"size-3.5\" />\n                <span>Press <strong>Enter</strong> to run</span>\n              </div>\n              <div v-if=\"executedAction\" class=\"text-success flex items-center gap-1.5 font-semibold\">\n                <Check class=\"size-3.5\" />\n                <span>Executed: {{ executedAction.title }}</span>\n              </div>\n              <div v-else class=\"text-muted-foreground font-mono text-xs\">\n                {{ filteredActions.length }} actions available\n              </div>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero-typing-command-center/HeroTypingCommandCenter.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero-typing-command-center/index.ts",
      "content": "export { default as HeroTypingCommandCenter } from './HeroTypingCommandCenter.vue'\nexport type { HeroTypingCommandCenterProps } from './HeroTypingCommandCenter.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero-typing-command-center/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/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"
}