{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hero-ascii-terminal-stream", "title": "Hero Ascii Terminal Stream", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hero-ascii-terminal-stream/hero-ascii-terminal-stream.component.ts", "content": "// Retro-futuristic ASCII terminal stream hero with an interactive command\n// executor (bench / parity / tree / clear) and live telemetry logs.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, inject, signal } from '@angular/core'\nimport { FormsModule } from '@angular/forms'\nimport { ArrowRight, LucideAngularModule, Terminal } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport interface HeroAsciiTerminalStreamProps {\n title?: string\n description?: string\n}\n\nconst ASCII_BANNER = `\n _ _ ___ ____ _ ______ _____\n | | | |_ _| _ \\\\| |/ / ___| ____|\n | | | || || |_) | ' / | _| _|\n | |_| || || __/| . \\\\ |_| | |___\n \\\\___/|___|_| |_|\\\\_\\\\____|_____|\n ================================\n DUAL-FRAMEWORK UNBUNDLED REGISTRY\n`\n\nconst initialLogs: 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 quickCommands = ['bench', 'parity', 'tree', 'clear'] as const\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hero-ascii-terminal-stream, [ui-hero-ascii-terminal-stream]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [FormsModule, LucideAngularModule, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n \n
\n \n \n Real-time ASCII Telemetry Stream\n \n \n\n

\n {{ title }}\n

\n\n

\n {{ description }}\n

\n\n \n
\n Quick commands:\n @for (chip of commandChips; track chip) {\n \n {{ '$' + chip }}\n \n }\n
\n
\n\n \n
\n
\n \n
\n
\n
\n \n \n \n
\n uipkge-telemetry-cli • zsh\n
\n
\n \n \n 60 FPS\n \n 1.2MB RSS\n
\n
\n\n \n
\n \n 
{{\n                asciiBanner\n              }}
\n\n \n
\n @for (log of terminalLogs(); track $index) {\n
\n {{ log }}\n
\n }\n
\n\n \n
\n >\n \n \n \n
\n
\n
\n
\n
\n `,\n})\nexport class UiHeroAsciiTerminalStreamComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Terminal = Terminal\n\n protected readonly asciiBanner = ASCII_BANNER\n protected readonly commandChips = quickCommands\n\n @Input() title = 'Deterministic UI engineering stream for technical operators.'\n @Input() description =\n 'Inspect build outputs, verify zero-dependency bundle telemetry, and stream component ASTs in real time with hardware precision.'\n @Input('class') className?: string\n\n readonly terminalLogs = signal([...initialLogs])\n readonly isRunning = signal(false)\n protected inputCommand = ''\n\n private runTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.runTimer))\n }\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n logClass(log: string): string {\n return 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 onSubmit(event: SubmitEvent): void {\n event.preventDefault()\n this.runCommand(this.inputCommand)\n }\n\n runCommand(cmd: string): void {\n const cleanCmd = cmd.trim().toLowerCase()\n if (!cleanCmd) return\n\n this.terminalLogs.update((prev) => [...prev, `$ ${cleanCmd}`])\n this.isRunning.set(true)\n\n clearTimeout(this.runTimer)\n this.runTimer = setTimeout(() => {\n if (cleanCmd === 'clear') {\n this.terminalLogs.set(['TERMINAL: Buffer cleared.'])\n } else if (cleanCmd === 'bench') {\n this.terminalLogs.update((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 this.terminalLogs.update((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 this.terminalLogs.update((prev) => [\n ...prev,\n 'TREE: packages/registry-vue (471) <-> packages/registry-react (471)',\n ])\n } else {\n this.terminalLogs.update((prev) => [...prev, `EXEC: Command '${cleanCmd}' executed with exit code 0.`])\n }\n this.isRunning.set(false)\n }, 400)\n\n this.inputCommand = ''\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-ascii-terminal-stream/hero-ascii-terminal-stream.component.ts" }, { "path": "packages/registry-angular/blocks/hero-ascii-terminal-stream/index.ts", "content": "export {\n UiHeroAsciiTerminalStreamComponent,\n type HeroAsciiTerminalStreamProps,\n} from './hero-ascii-terminal-stream.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-ascii-terminal-stream/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Retro-futuristic ASCII terminal stream hero section with command runner and AST telemetry logs.", "categories": [ "hero", "marketing" ], "deprecated": true, "replacedBy": "hero" }