{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-ascii-terminal-stream",
  "title": "Hero Ascii Terminal Stream",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/hero-ascii-terminal-stream/HeroAsciiTerminalStream.tsx",
      "content": "import * as React from 'react'\nimport { ArrowRight, Terminal } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface HeroAsciiTerminalStreamProps {\n  title?: string\n  description?: string\n  className?: string\n}\n\nconst ASCII_BANNER = `\n  _   _ ___ ____  _  ______ _____ \n | | | |_ _|  _ \\\\| |/ / ___| ____|\n | | | || || |_) | ' / |  _|  _|  \n | |_| || ||  __/| . \\\\ |_| | |___ \n  \\\\___/|___|_|   |_|\\\\_\\\\____|_____|\n  ================================\n  DUAL-FRAMEWORK UNBUNDLED REGISTRY\n`\n\nexport function HeroAsciiTerminalStream({\n  title = 'Deterministic UI engineering stream for technical operators.',\n  description = 'Inspect build outputs, verify zero-dependency bundle telemetry, and stream component ASTs in real time with hardware precision.',\n  className,\n}: HeroAsciiTerminalStreamProps) {\n  const [terminalLogs, setTerminalLogs] = React.useState<string[]>([\n    'INIT: Initializing UIPKGE dual-framework AST registry...',\n    'RESOLVE: Synchronizing @uipkge/button -> Vue 3.5 & React 19',\n    'OKLCH: Loaded 48 semantic color variables from packages/shared',\n    'BENCHMARK: Cold compilation completed in 1.42ms (zero dead code)',\n    'READY: Terminal listening on edge:8080',\n  ])\n  const [inputCommand, setInputCommand] = React.useState('')\n  const [isRunning, setIsRunning] = React.useState(false)\n\n  function runCommand(cmd: string) {\n    const cleanCmd = cmd.trim().toLowerCase()\n    if (!cleanCmd) return\n\n    setTerminalLogs((prev) => [...prev, `$ ${cleanCmd}`])\n    setIsRunning(true)\n\n    setTimeout(() => {\n      if (cleanCmd === 'clear') {\n        setTerminalLogs(['TERMINAL: Buffer cleared.'])\n      } else if (cleanCmd === 'bench') {\n        setTerminalLogs((prev) => [\n          ...prev,\n          'BENCHMARK: Button (1.1kb) | Modal (2.8kb) | DataGrid (4.2kb)',\n          'RESULT: 100% Tree-shaken bundle efficiency.',\n        ])\n      } else if (cleanCmd === 'parity') {\n        setTerminalLogs((prev) => [\n          ...prev,\n          'PARITY: 31 variant tokens evaluated across Vue & React.',\n          'STATUS: [PASS] Zero framework divergence detected.',\n        ])\n      } else if (cleanCmd === 'tree') {\n        setTerminalLogs((prev) => [...prev, 'TREE: packages/registry-vue (471) <-> packages/registry-react (471)'])\n      } else {\n        setTerminalLogs((prev) => [...prev, `EXEC: Command '${cleanCmd}' executed with exit code 0.`])\n      }\n      setIsRunning(false)\n    }, 400)\n\n    setInputCommand('')\n  }\n\n  function handleSubmit(e: React.FormEvent) {\n    e.preventDefault()\n    runCommand(inputCommand)\n  }\n\n  return (\n    <section\n      data-slot=\"hero-ascii-terminal-stream\"\n      className={cn('bg-background relative overflow-hidden py-16 sm:py-24', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <a\n            href=\"#ascii-terminal\"\n            className=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n          >\n            <Terminal className=\"text-primary size-3.5\" />\n            <span>Real-time ASCII Telemetry Stream</span>\n            <ArrowRight className=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n          </a>\n\n          <h1 className=\"text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl\">{title}</h1>\n\n          <p className=\"text-muted-foreground text-base sm:text-lg\">{description}</p>\n\n          {/* Command Chips */}\n          <div className=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n            <span className=\"text-muted-foreground text-xs\">Quick commands:</span>\n            {['bench', 'parity', 'tree', 'clear'].map((chip) => (\n              <button\n                key={chip}\n                type=\"button\"\n                className=\"border-border bg-muted/40 hover:bg-muted text-foreground rounded border px-2 py-0.5 font-mono text-xs transition-colors\"\n                onClick={() => runCommand(chip)}\n              >\n                ${chip}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Main ASCII Terminal Card */}\n        <div className=\"mx-auto mt-12 max-w-4xl\">\n          <Card className=\"border-border bg-card overflow-hidden font-mono text-xs shadow-lg\">\n            {/* Terminal Title Bar */}\n            <div className=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2.5\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-1.5\">\n                  <span className=\"bg-destructive/80 size-2.5 rounded-full\" />\n                  <span className=\"bg-warning/80 size-2.5 rounded-full\" />\n                  <span className=\"bg-success/80 size-2.5 rounded-full\" />\n                </div>\n                <span className=\"text-foreground pl-2 text-xs font-bold\">uipkge-telemetry-cli &bull; zsh</span>\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-3 text-xs\">\n                <span className=\"flex items-center gap-1\">\n                  <span className=\"bg-success size-1.5 rounded-full\" />\n                  <span>60 FPS</span>\n                </span>\n                <span>1.2MB RSS</span>\n              </div>\n            </div>\n\n            {/* Terminal Content Viewport */}\n            <CardContent className=\"bg-background/95 space-y-4 p-6\">\n              {/* ASCII Art Banner */}\n              <pre className=\"text-primary overflow-x-auto text-xs leading-tight font-bold select-none\">\n                <code>{ASCII_BANNER}</code>\n              </pre>\n\n              {/* Logs Stream Output */}\n              <div className=\"border-border/80 max-h-56 space-y-1.5 overflow-y-auto border-t pt-2 text-xs\">\n                {terminalLogs.map((log, idx) => (\n                  <div\n                    key={idx}\n                    className={cn(\n                      'leading-relaxed',\n                      log.startsWith('$')\n                        ? 'text-primary font-bold'\n                        : log.includes('PASS') || log.includes('OKLCH')\n                          ? 'text-success'\n                          : 'text-muted-foreground',\n                    )}\n                  >\n                    {log}\n                  </div>\n                ))}\n              </div>\n\n              {/* Terminal Interactive Input Prompt */}\n              <form className=\"border-border flex items-center gap-2 border-t pt-3\" onSubmit={handleSubmit}>\n                <span className=\"text-primary font-bold\">&gt;</span>\n                <input\n                  type=\"text\"\n                  placeholder=\"Type command (e.g. bench, parity, clear)...\"\n                  value={inputCommand}\n                  onChange={(e) => setInputCommand(e.target.value)}\n                  className=\"text-foreground placeholder:text-muted-foreground flex-1 bg-transparent text-xs focus-visible:outline-none\"\n                />\n                <Button size=\"sm\" type=\"submit\" className=\"h-7 gap-1 px-2.5 text-xs\">\n                  <span>Run</span>\n                  <ArrowRight className=\"size-3\" />\n                </Button>\n              </form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/hero-ascii-terminal-stream/HeroAsciiTerminalStream.tsx"
    },
    {
      "path": "packages/registry-react/blocks/hero-ascii-terminal-stream/index.ts",
      "content": "export { HeroAsciiTerminalStream } from './HeroAsciiTerminalStream'\nexport type { HeroAsciiTerminalStreamProps } from './HeroAsciiTerminalStream'\n",
      "type": "registry:block",
      "target": "~/components/blocks/hero-ascii-terminal-stream/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Retro-futuristic ASCII terminal stream hero section with command runner and AST telemetry logs.",
  "categories": [
    "hero",
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}