{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-developer-terminal",
  "title": "Hero Developer Terminal",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/hero-developer-terminal/HeroDeveloperTerminal.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Check, Code2, Copy, RotateCcw } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\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@latest add https://uipkge.dev/r/react/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 hook 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@latest add https://uipkge.dev/r/react/kpi-grid.json',\n    output: [\n      '✔ Fetched manifest for kpi-grid (registry:ui)',\n      '✔ Added components/ui/kpi-grid/KpiGrid.tsx',\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\nexport interface HeroDeveloperTerminalProps {\n  className?: string\n}\n\nexport function HeroDeveloperTerminal({ className }: HeroDeveloperTerminalProps) {\n  const [activePresetIndex, setActivePresetIndex] = React.useState(0)\n  const [displayedLines, setDisplayedLines] = React.useState<string[]>([])\n  const [isExecuting, setIsExecuting] = React.useState(false)\n  const [copied, setCopied] = React.useState(false)\n  const [executionSpeed, setExecutionSpeed] = React.useState<1 | 2>(1)\n\n  const executionTimeoutRef = React.useRef<NodeJS.Timeout[]>([])\n\n  const clearTimeouts = () => {\n    executionTimeoutRef.current.forEach((t) => clearTimeout(t))\n    executionTimeoutRef.current = []\n  }\n\n  const runPreset = React.useCallback(\n    (index: number) => {\n      setActivePresetIndex(index)\n      setDisplayedLines([])\n      setIsExecuting(true)\n      clearTimeouts()\n\n      const currentPreset = presets[index]\n      const lines = currentPreset.output\n      const delay = executionSpeed === 1 ? 160 : 70\n\n      lines.forEach((line, i) => {\n        const timeout = setTimeout(\n          () => {\n            setDisplayedLines((prev) => [...prev, line])\n            if (i === lines.length - 1) {\n              setIsExecuting(false)\n            }\n          },\n          (i + 1) * delay,\n        )\n        executionTimeoutRef.current.push(timeout)\n      })\n    },\n    [executionSpeed],\n  )\n\n  React.useEffect(() => {\n    runPreset(0)\n    return () => clearTimeouts()\n  }, [runPreset])\n\n  const copyCommand = () => {\n    const current = presets[activePresetIndex]\n    navigator.clipboard.writeText(current.command)\n    setCopied(true)\n    setTimeout(() => setCopied(false), 2000)\n  }\n\n  const currentPreset = presets[activePresetIndex]\n\n  return (\n    <section\n      data-slot=\"hero-developer-terminal\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"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 className=\"space-y-6 text-left lg:col-span-6\">\n          {/* Parity Badge */}\n          <div className=\"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            <span className=\"bg-success size-2 rounded-full\" />\n            <span className=\"text-foreground font-medium\">Dual-Framework UI Registry</span>\n            <span className=\"text-muted-foreground\">&bull;</span>\n            <span className=\"text-muted-foreground\">Vue 3.5 & React 19</span>\n          </div>\n\n          {/* Main Headline */}\n          <h1 className=\"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 className=\"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 className=\"flex flex-wrap items-center gap-3 pt-2\">\n            <Button asChild size=\"lg\" className=\"gap-2 font-semibold shadow-xs\">\n              <a href=\"#components\">\n                <span>Explore 300+ Blocks</span>\n                <ArrowRight className=\"size-4\" />\n              </a>\n            </Button>\n\n            <Button asChild variant=\"outline\" size=\"lg\" className=\"gap-2 font-medium\">\n              <a href=\"#spec\">\n                <Code2 className=\"text-muted-foreground size-4\" />\n                <span>Registry Spec</span>\n              </a>\n            </Button>\n          </div>\n\n          {/* Telemetry Metrics Strip */}\n          <div className=\"border-border/80 grid grid-cols-3 gap-4 border-t pt-6 text-left\">\n            <div>\n              <p className=\"text-foreground font-mono text-2xl font-bold\">300+</p>\n              <p className=\"text-muted-foreground mt-0.5 text-xs\">Workbenches & Primitives</p>\n            </div>\n            <div>\n              <p className=\"text-foreground font-mono text-2xl font-bold\">0 kB</p>\n              <p className=\"text-muted-foreground mt-0.5 text-xs\">Runtime Package Bloat</p>\n            </div>\n            <div>\n              <p className=\"text-foreground font-mono text-2xl font-bold\">100%</p>\n              <p className=\"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 className=\"lg:col-span-6\">\n          <Card className=\"border-border bg-card overflow-hidden rounded-xl shadow-sm\">\n            {/* Terminal Header */}\n            <div className=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2.5\">\n              {/* Window Controls & File Path */}\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-1.5\">\n                  <div className=\"bg-destructive/80 size-3 rounded-full\" />\n                  <div className=\"bg-warning/80 size-3 rounded-full\" />\n                  <div className=\"bg-success/80 size-3 rounded-full\" />\n                </div>\n                <span className=\"text-muted-foreground ml-2 font-mono text-xs\">uipkge-cli &mdash; bash</span>\n              </div>\n\n              {/* Action Controls */}\n              <div className=\"flex items-center gap-1.5\">\n                {/* Speed Selector */}\n                <button\n                  type=\"button\"\n                  className=\"border-border bg-background text-muted-foreground hover:text-foreground rounded border px-2 py-0.5 font-mono text-xs transition-colors\"\n                  onClick={() => setExecutionSpeed((s) => (s === 1 ? 2 : 1))}\n                >\n                  {executionSpeed}x speed\n                </button>\n\n                {/* Copy Button */}\n                <button\n                  type=\"button\"\n                  className=\"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                  onClick={copyCommand}\n                >\n                  {copied ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                  <span>{copied ? 'Copied' : 'Copy'}</span>\n                </button>\n              </div>\n            </div>\n\n            {/* Preset Navigation Tabs */}\n            <div className=\"border-border/80 bg-muted/20 flex items-center overflow-x-auto border-b px-2\">\n              {presets.map((preset, idx) => (\n                <button\n                  key={preset.id}\n                  type=\"button\"\n                  className={cn(\n                    'border-b-2 px-3 py-2 font-mono text-xs whitespace-nowrap transition-colors',\n                    activePresetIndex === idx\n                      ? 'border-primary text-foreground bg-background/50 font-semibold'\n                      : 'text-muted-foreground hover:text-foreground border-transparent',\n                  )}\n                  onClick={() => runPreset(idx)}\n                >\n                  {preset.label}\n                </button>\n              ))}\n            </div>\n\n            {/* Terminal Content Viewport */}\n            <div className=\"bg-card min-h-[220px] space-y-3 p-4 font-mono text-xs sm:p-5\">\n              {/* Command Input Line */}\n              <div className=\"text-foreground flex items-start gap-2\">\n                <span className=\"text-primary font-bold select-none\">&gt;</span>\n                <span className=\"text-foreground font-medium break-all\">{currentPreset.command}</span>\n              </div>\n\n              {/* Output Lines */}\n              <div className=\"space-y-1.5 pt-1\">\n                {displayedLines.map((line, idx) => (\n                  <div\n                    key={idx}\n                    className=\"text-muted-foreground flex items-center gap-2 transition-colors duration-150\"\n                  >\n                    <span className=\"text-success shrink-0 font-bold select-none\">✓</span>\n                    <span className=\"text-xs\">{line.replace(/^✔\\s*/, '')}</span>\n                  </div>\n                ))}\n\n                {/* Typing / Loading Cursor */}\n                {isExecuting && (\n                  <div className=\"text-muted-foreground flex items-center gap-2 pt-1\">\n                    <span className=\"bg-primary size-1.5 rounded-full\" />\n                    <span className=\"text-muted-foreground text-xs italic\">Streaming AST payload...</span>\n                  </div>\n                )}\n              </div>\n            </div>\n\n            {/* Terminal Footer Status Bar */}\n            <div className=\"border-border bg-muted/30 text-muted-foreground flex items-center justify-between border-t px-4 py-2 font-mono text-xs\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"bg-success size-2 rounded-full\" />\n                <span>Registry v2.4.0 (OKLCH)</span>\n              </div>\n              <button\n                type=\"button\"\n                className=\"text-primary inline-flex items-center gap-1 hover:underline\"\n                onClick={() => runPreset(activePresetIndex)}\n              >\n                <RotateCcw className=\"size-3\" />\n                <span>Re-run</span>\n              </button>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default HeroDeveloperTerminal\n",
      "type": "registry:block",
      "target": "~/components/blocks/HeroDeveloperTerminal.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/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"
}