{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hero-typing-command-center", "title": "Hero Typing Command Center", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hero-typing-command-center/hero-typing-command-center.component.ts", "content": "// Keyboard command-palette hero: searchable action list with category badges,\n// shortcut kbd hints, hover selection and an executed-action status footer.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Check,\n Command,\n CornerDownLeft,\n FileCode,\n FolderGit2,\n Layers,\n LucideAngularModule,\n Palette,\n Search,\n Zap,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport interface HeroTypingCommandAction {\n id: string\n title: string\n category: 'Components' | 'Themes' | 'Git' | 'Workflows'\n shortcut: string[]\n icon: LucideIconData\n description: string\n status: string\n}\n\nconst actions: HeroTypingCommandAction[] = [\n {\n id: 'add-pdp',\n title: 'Insert Product Detail Page',\n category: 'Components',\n shortcut: ['⌘', 'I', 'P'],\n icon: Layers,\n description: 'Adds flagship unbundled PDP with gallery, reviews & buy box',\n status: 'Ready to inject',\n },\n {\n id: 'toggle-dark',\n title: 'Toggle High-Contrast Dark Theme',\n category: 'Themes',\n shortcut: ['⌘', 'T'],\n icon: Palette,\n description: 'Switches active OKLCH tokens to studio obsidian mode',\n status: 'Instant update',\n },\n {\n id: 'git-branch',\n title: 'Checkout Release Branch: v2.4.0',\n category: 'Git',\n shortcut: ['⌘', 'G', 'B'],\n icon: FolderGit2,\n description: 'Switches workspace to staging pipeline branch',\n status: 'Clean working tree',\n },\n {\n id: 'sync-registry',\n title: 'Synchronize Dual-Framework ASTs',\n category: 'Workflows',\n shortcut: ['⌘', 'S', 'Y'],\n icon: FileCode,\n description: 'Generates parity manifests between Vue 3.5 and React 19',\n status: 'Verified 100% parity',\n },\n {\n id: 'run-audit',\n title: 'Trigger Automated Craft Audit',\n category: 'Workflows',\n shortcut: ['⌘', 'A', 'U'],\n icon: Zap,\n description: 'Validates semantic scales, AA contrast and eliminates design slop',\n status: 'Zero regressions',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hero-typing-command-center, [ui-hero-typing-command-center]',\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: [LucideAngularModule, UiBadgeComponent, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n
\n \n
\n \n \n Keyboard Ergonomics • Zero Latency\n
\n\n

\n {{ title }}\n

\n\n

\n {{ description }}\n

\n\n \n
\n
\n
Global Trigger
\n
\n ⌘\n K\n
\n
\n
\n
Quick Insert
\n
\n ⌘\n I\n
\n
\n
\n
\n\n \n
\n
\n \n
\n \n \n
\n ESC\n
\n
\n\n \n
\n @for (action of filteredActions(); track action.id; let idx = $index) {\n \n
\n \n \n
\n
\n
\n {{ action.title }}\n {{ action.category }}\n
\n

{{ action.description }}

\n
\n
\n\n \n
\n @for (key of action.shortcut; track key) {\n \n {{ key }}\n \n }\n
\n \n }\n
\n\n \n
\n
\n \n Press Enter to run\n
\n @if (executedAction()) {\n
\n \n Executed: {{ executedAction()!.title }}\n
\n } @else {\n
\n {{ filteredActions().length }} actions available\n
\n }\n
\n
\n
\n \n \n
\n `,\n})\nexport class UiHeroTypingCommandCenterComponent {\n protected readonly Check = Check\n protected readonly Command = Command\n protected readonly CornerDownLeft = CornerDownLeft\n protected readonly Search = Search\n\n @Input() title = 'Execute workflows at the speed of thought with keyboard command palette.'\n @Input() description =\n 'Instant component insertion, theme switching, git branches, and automated deployment pipelines driven by zero-latency hotkeys.'\n @Input('class') className?: string\n\n readonly searchQuery = signal('')\n readonly selectedIndex = signal(0)\n readonly executedAction = signal(null)\n\n private executeTimer: ReturnType | undefined\n\n readonly filteredActions = computed(() => {\n const q = this.searchQuery().trim().toLowerCase()\n if (!q) return actions\n return actions.filter(\n (a) =>\n a.title.toLowerCase().includes(q) ||\n a.category.toLowerCase().includes(q) ||\n a.description.toLowerCase().includes(q),\n )\n })\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', this.className)\n }\n\n actionClass(idx: number): string {\n return cn(\n 'group flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n this.selectedIndex() === idx\n ? 'border-primary/30 bg-accent text-accent-foreground border'\n : 'hover:bg-muted/50 text-foreground border border-transparent',\n )\n }\n\n execute(action: HeroTypingCommandAction): void {\n this.executedAction.set(action)\n clearTimeout(this.executeTimer)\n this.executeTimer = setTimeout(() => this.executedAction.set(null), 2500)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-typing-command-center/hero-typing-command-center.component.ts" }, { "path": "packages/registry-angular/blocks/hero-typing-command-center/index.ts", "content": "export {\n UiHeroTypingCommandCenterComponent,\n type HeroTypingCommandAction,\n} from './hero-typing-command-center.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-typing-command-center/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Interactive CLI command center hero with animated execution simulator, output logs, and quick workflow presets.", "categories": [ "hero", "marketing" ], "deprecated": true, "replacedBy": "hero" }