{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero-ascii-terminal-stream",
  "title": "Hero Ascii Terminal Stream",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero-ascii-terminal-stream/HeroAsciiTerminalStream.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, Terminal } from 'lucide-vue-next'\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  class?: string\n}\n\nconst ASCII_BANNER = `\n  _   _ ___ ____  _  ______ _____ \n | | | |_ _|  _ \\\\| |/ / ___| ____|\n | | | || || |_) | ' / |  _|  _|  \n | |_| || ||  __/| . \\\\ |_| | |___ \n  \\\\___/|___|_|   |_|\\\\_\\\\____|_____|\n  ================================\n  DUAL-FRAMEWORK UNBUNDLED REGISTRY\n`\n\nconst props = withDefaults(defineProps<HeroAsciiTerminalStreamProps>(), {\n  title: 'Deterministic UI engineering stream for technical operators.',\n  description:\n    'Inspect build outputs, verify zero-dependency bundle telemetry, and stream component ASTs in real time with hardware precision.',\n})\n\nconst terminalLogs = ref<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\nconst inputCommand = ref('')\nconst isRunning = ref(false)\n\nfunction runCommand(cmd: string) {\n  const cleanCmd = cmd.trim().toLowerCase()\n  if (!cleanCmd) return\n\n  terminalLogs.value.push(`$ ${cleanCmd}`)\n  isRunning.value = true\n\n  setTimeout(() => {\n    if (cleanCmd === 'clear') {\n      terminalLogs.value = ['TERMINAL: Buffer cleared.']\n    } else if (cleanCmd === 'bench') {\n      terminalLogs.value.push('BENCHMARK: Button (1.1kb) | Modal (2.8kb) | DataGrid (4.2kb)')\n      terminalLogs.value.push('RESULT: 100% Tree-shaken bundle efficiency.')\n    } else if (cleanCmd === 'parity') {\n      terminalLogs.value.push('PARITY: 31 variant tokens evaluated across Vue & React.')\n      terminalLogs.value.push('STATUS: [PASS] Zero framework divergence detected.')\n    } else if (cleanCmd === 'tree') {\n      terminalLogs.value.push('TREE: packages/registry-vue (471) <-> packages/registry-react (471)')\n    } else {\n      terminalLogs.value.push(`EXEC: Command '${cleanCmd}' executed with exit code 0.`)\n    }\n    isRunning.value = false\n  }, 400)\n\n  inputCommand.value = ''\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-ascii-terminal-stream\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#ascii-terminal\"\n          class=\"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 class=\"text-primary size-3.5\" />\n          <span>Real-time ASCII Telemetry Stream</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h1 class=\"text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n          {{ title }}\n        </h1>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n\n        <!-- Command Chips -->\n        <div class=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n          <span class=\"text-muted-foreground text-xs\">Quick commands:</span>\n          <button\n            v-for=\"chip in ['bench', 'parity', 'tree', 'clear']\"\n            :key=\"chip\"\n            type=\"button\"\n            class=\"border-border bg-muted/40 hover:bg-muted text-foreground rounded border px-2 py-0.5 font-mono text-xs transition-colors\"\n            @click=\"runCommand(chip)\"\n          >\n            ${{ chip }}\n          </button>\n        </div>\n      </div>\n\n      <!-- Main ASCII Terminal Card -->\n      <div class=\"mx-auto mt-12 max-w-4xl\">\n        <Card class=\"border-border bg-card overflow-hidden font-mono text-xs shadow-lg\">\n          <!-- Terminal Title Bar -->\n          <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2.5\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"flex gap-1.5\">\n                <span class=\"bg-destructive/80 size-2.5 rounded-full\" />\n                <span class=\"bg-warning/80 size-2.5 rounded-full\" />\n                <span class=\"bg-success/80 size-2.5 rounded-full\" />\n              </div>\n              <span class=\"text-foreground pl-2 text-xs font-bold\">uipkge-telemetry-cli &bull; zsh</span>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-3 text-xs\">\n              <span class=\"flex items-center gap-1\">\n                <span class=\"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 class=\"bg-background/95 space-y-4 p-6\">\n            <!-- ASCII Art Banner -->\n            <pre\n              class=\"text-primary overflow-x-auto text-xs leading-tight font-bold select-none\"\n            ><code>{{ ASCII_BANNER }}</code></pre>\n\n            <!-- Logs Stream Output -->\n            <div class=\"border-border/80 max-h-56 space-y-1.5 overflow-y-auto border-t pt-2 text-xs\">\n              <div\n                v-for=\"(log, idx) in terminalLogs\"\n                :key=\"idx\"\n                :class=\"\n                  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              >\n                {{ log }}\n              </div>\n            </div>\n\n            <!-- Terminal Interactive Input Prompt -->\n            <form\n              class=\"border-border flex items-center gap-2 border-t pt-3\"\n              @submit.prevent=\"runCommand(inputCommand)\"\n            >\n              <span class=\"text-primary font-bold\">&gt;</span>\n              <input\n                v-model=\"inputCommand\"\n                type=\"text\"\n                placeholder=\"Type command (e.g. bench, parity, clear)...\"\n                class=\"text-foreground placeholder:text-muted-foreground flex-1 bg-transparent text-xs focus-visible:outline-none\"\n              />\n              <Button size=\"sm\" type=\"submit\" class=\"h-7 gap-1 px-2.5 text-xs\">\n                <span>Run</span>\n                <ArrowRight class=\"size-3\" />\n              </Button>\n            </form>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero-ascii-terminal-stream/HeroAsciiTerminalStream.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero-ascii-terminal-stream/index.ts",
      "content": "export { default as HeroAsciiTerminalStream } from './HeroAsciiTerminalStream.vue'\nexport type { HeroAsciiTerminalStreamProps } from './HeroAsciiTerminalStream.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero-ascii-terminal-stream/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Retro-futuristic ASCII terminal stream hero section with command runner and AST telemetry logs.",
  "categories": [
    "hero",
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}