{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero-developer-terminal",
  "title": "Hero Developer Terminal",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero-developer-terminal/HeroDeveloperTerminal.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref } from 'vue'\nimport { ArrowRight, Check, Code2, Copy, RotateCcw } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\ninterface CommandPreset {\n  id: string\n  label: string\n  command: string\n  output: string[]\n}\n\nconst presets: CommandPreset[] = [\n  {\n    id: 'init',\n    label: '1. Init Theme',\n    command: 'npx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json',\n    output: [\n      '✔ Resolving registry dependencies...',\n      '✔ Downloaded packages/shared/styles/tailwind.css (OKLCH @theme inline)',\n      '✔ Configured cn() utility in src/lib/utils.ts',\n      '✔ Injected useTheme composable with system preference sync',\n      '✔ UIPKGE bootstrap complete in 124ms.',\n    ],\n  },\n  {\n    id: 'component',\n    label: '2. Add KPI Grid',\n    command: 'npx shadcn-vue@latest add https://uipkge.dev/r/vue/kpi-grid.json',\n    output: [\n      '✔ Fetched manifest for kpi-grid (registry:ui)',\n      '✔ Added components/ui/kpi-grid/KpiGrid.vue',\n      '✔ Verified CVA variants in kpi-grid.variants.ts',\n      '✔ Installed transitive primitives: Card, Badge, Sparkline',\n      '✔ Zero npm bundle overhead added to node_modules.',\n    ],\n  },\n  {\n    id: 'verify',\n    label: '3. Parity Check',\n    command: 'npm run check:parity',\n    output: [\n      '✔ Checking 31 shared CVA variant definitions...',\n      '✔ Validating Vue 3.5 SFC and React 19 TSX type contracts...',\n      '✔ Token synchronization: styles/tailwind.css (100% match)',\n      '✔ PASS: Full cross-framework parity confirmed across all 300+ items.',\n    ],\n  },\n]\n\nconst activePresetIndex = ref(0)\nconst activeTab = ref<'terminal' | 'source'>('terminal')\nconst displayedLines = ref<string[]>([])\nconst isExecuting = ref(false)\nconst copied = ref(false)\nconst executionSpeed = ref<1 | 2>(1)\n\nlet executionTimeout: ReturnType<typeof setTimeout> | undefined\n\nfunction runPreset(index: number) {\n  activePresetIndex.value = index\n  activeTab.value = 'terminal'\n  displayedLines.value = []\n  isExecuting.value = true\n\n  if (executionTimeout) clearTimeout(executionTimeout)\n\n  const currentPreset = presets[index]\n  const lines = currentPreset.output\n  const delay = executionSpeed.value === 1 ? 160 : 70\n\n  lines.forEach((line, i) => {\n    executionTimeout = setTimeout(\n      () => {\n        displayedLines.value.push(line)\n        if (i === lines.length - 1) {\n          isExecuting.value = false\n        }\n      },\n      (i + 1) * delay,\n    )\n  })\n}\n\nfunction copyCommand() {\n  const current = presets[activePresetIndex.value]\n  navigator.clipboard.writeText(current.command)\n  copied.value = true\n  setTimeout(() => (copied.value = false), 2000)\n}\n\nonMounted(() => {\n  runPreset(0)\n})\n\nonUnmounted(() => {\n  if (executionTimeout) clearTimeout(executionTimeout)\n})\n\nconst currentPreset = computed(() => presets[activePresetIndex.value])\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-developer-terminal\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <div class=\"mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-8\">\n      <!-- Left Column: Value Proposition & CTAs (6 Cols) -->\n      <div class=\"space-y-6 text-left lg:col-span-6\">\n        <!-- Parity Badge -->\n        <div\n          class=\"border-border bg-muted/40 inline-flex items-center gap-2 rounded-full border px-3 py-1 font-mono text-xs shadow-xs\"\n        >\n          <span class=\"bg-success size-2 rounded-full\" />\n          <span class=\"text-foreground font-medium\">Dual-Framework UI Registry</span>\n          <span class=\"text-muted-foreground\">&bull;</span>\n          <span class=\"text-muted-foreground\">Vue 3.5 & React 19</span>\n        </div>\n\n        <!-- Main Headline -->\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n          The unbundled UI registry for design engineers.\n        </h1>\n\n        <!-- Subtitle -->\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed sm:text-lg\">\n          Own your source code. Copy production-grade components and dense workbenches directly into your project with\n          zero npm runtime lock-in.\n        </p>\n\n        <!-- CTA Buttons -->\n        <div class=\"flex flex-wrap items-center gap-3 pt-2\">\n          <Button as=\"a\" href=\"#components\" size=\"lg\" class=\"gap-2 font-semibold shadow-xs\">\n            <span>Explore 300+ Blocks</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n\n          <Button as=\"a\" href=\"#spec\" variant=\"outline\" size=\"lg\" class=\"gap-2 font-medium\">\n            <Code2 class=\"text-muted-foreground size-4\" />\n            <span>Registry Spec</span>\n          </Button>\n        </div>\n\n        <!-- Telemetry Metrics Strip -->\n        <div class=\"border-border/80 grid grid-cols-3 gap-4 border-t pt-6 text-left\">\n          <div>\n            <p class=\"text-foreground font-mono text-2xl font-bold\">300+</p>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Workbenches & Primitives</p>\n          </div>\n          <div>\n            <p class=\"text-foreground font-mono text-2xl font-bold\">0 kB</p>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Runtime Package Bloat</p>\n          </div>\n          <div>\n            <p class=\"text-foreground font-mono text-2xl font-bold\">100%</p>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Cross-Framework Parity</p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column: Interactive Developer Terminal Workbench (6 Cols) -->\n      <div class=\"lg:col-span-6\">\n        <Card class=\"border-border bg-card overflow-hidden rounded-xl shadow-sm\">\n          <!-- Terminal Header -->\n          <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2.5\">\n            <!-- Window Controls & File Path -->\n            <div class=\"flex items-center gap-2\">\n              <div class=\"flex gap-1.5\">\n                <div class=\"bg-destructive/80 size-3 rounded-full\" />\n                <div class=\"bg-warning/80 size-3 rounded-full\" />\n                <div class=\"bg-success/80 size-3 rounded-full\" />\n              </div>\n              <span class=\"text-muted-foreground ml-2 font-mono text-xs\">uipkge-cli &mdash; bash</span>\n            </div>\n\n            <!-- Action Controls -->\n            <div class=\"flex items-center gap-1.5\">\n              <!-- Speed Selector -->\n              <button\n                type=\"button\"\n                class=\"border-border bg-background text-muted-foreground hover:text-foreground rounded border px-2 py-0.5 font-mono text-xs transition-colors\"\n                @click=\"executionSpeed = executionSpeed === 1 ? 2 : 1\"\n              >\n                {{ executionSpeed }}x speed\n              </button>\n\n              <!-- Copy Button -->\n              <button\n                type=\"button\"\n                class=\"border-border bg-background text-muted-foreground hover:text-foreground flex items-center gap-1 rounded border px-2 py-0.5 font-mono text-xs transition-colors\"\n                @click=\"copyCommand\"\n              >\n                <Check v-if=\"copied\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                <span>{{ copied ? 'Copied' : 'Copy' }}</span>\n              </button>\n            </div>\n          </div>\n\n          <!-- Preset Navigation Tabs -->\n          <div class=\"border-border/80 bg-muted/20 flex items-center overflow-x-auto border-b px-2\">\n            <button\n              v-for=\"(preset, idx) in presets\"\n              :key=\"preset.id\"\n              type=\"button\"\n              class=\"border-b-2 px-3 py-2 font-mono text-xs whitespace-nowrap transition-colors\"\n              :class=\"\n                activePresetIndex === idx\n                  ? 'border-primary text-foreground bg-background/50 font-semibold'\n                  : 'text-muted-foreground hover:text-foreground border-transparent'\n              \"\n              @click=\"runPreset(idx)\"\n            >\n              {{ preset.label }}\n            </button>\n          </div>\n\n          <!-- Terminal Content Viewport -->\n          <div class=\"bg-card min-h-[220px] space-y-3 p-4 font-mono text-xs sm:p-5\">\n            <!-- Command Input Line -->\n            <div class=\"text-foreground flex items-start gap-2\">\n              <span class=\"text-primary font-bold select-none\">&gt;</span>\n              <span class=\"text-foreground font-medium break-all\">{{ currentPreset.command }}</span>\n            </div>\n\n            <!-- Output Lines -->\n            <div class=\"space-y-1.5 pt-1\">\n              <div\n                v-for=\"(line, idx) in displayedLines\"\n                :key=\"idx\"\n                class=\"text-muted-foreground flex items-center gap-2 transition-colors duration-150\"\n              >\n                <span class=\"text-success shrink-0 font-bold select-none\">✓</span>\n                <span class=\"text-xs\">{{ line.replace(/^✔\\s*/, '') }}</span>\n              </div>\n\n              <!-- Typing / Loading Cursor -->\n              <div v-if=\"isExecuting\" class=\"text-muted-foreground flex items-center gap-2 pt-1\">\n                <span class=\"bg-primary size-1.5 rounded-full\" />\n                <span class=\"text-muted-foreground text-xs italic\">Streaming AST payload...</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Terminal Footer Status Bar -->\n          <div\n            class=\"border-border bg-muted/30 text-muted-foreground flex items-center justify-between border-t px-4 py-2 font-mono text-xs\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <span class=\"bg-success size-2 rounded-full\" />\n              <span>Registry v2.4.0 (OKLCH)</span>\n            </div>\n            <button\n              type=\"button\"\n              class=\"text-primary inline-flex items-center gap-1 hover:underline\"\n              @click=\"runPreset(activePresetIndex)\"\n            >\n              <RotateCcw class=\"size-3\" />\n              <span>Re-run</span>\n            </button>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HeroDeveloperTerminal.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Developer-first hero section with split value proposition and an interactive live CLI terminal sandbox with preset command switching and copy controls.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}