{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "code-terminal-session",
  "title": "Code — Terminal Session",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/code-terminal-session/code-terminal-session.component.ts",
      "content": "// Terminal transcript that types itself out line by line on mount, showing prompts,\n// output, and a success summary, and rendering instantly under reduced-motion.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, computed, Input, OnDestroy, OnInit, signal } from '@angular/core'\nimport { LucideAngularModule, Terminal } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport interface TerminalLine {\n  kind: 'prompt' | 'out' | 'ok'\n  text: string\n}\n\nconst lines: TerminalLine[] = [\n  { kind: 'prompt', text: 'npx @northwind/cli connect snowflake' },\n  { kind: 'out', text: 'Testing credentials…  ok' },\n  { kind: 'out', text: 'Mirroring schema…     412 tables' },\n  { kind: 'prompt', text: 'npx @northwind/cli certify revenue_net' },\n  { kind: 'out', text: 'Reconciling 4 quarters…' },\n  { kind: 'out', text: 'Q1 ✓   Q2 ✓   Q3 ✓   Q4 ✓' },\n  { kind: 'ok', text: 'revenue_net certified · 41 consumers notified' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-code-terminal-session, [ui-code-terminal-session]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n  template: `\n    <section data-slot=\"code-terminal-session\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-3xl px-6 py-20\">\n        <span ui-badge variant=\"secondary\" class=\"gap-1.5\">\n          <lucide-icon [img]=\"Terminal\" class=\"size-3\" aria-hidden=\"true\" />\n          CLI\n        </span>\n        <h2 class=\"mt-4 text-2xl font-semibold tracking-tight\">Connected and certified in two commands</h2>\n        <p class=\"text-muted-foreground mt-2\">\n          The CLI does everything the UI does, so the first rollout can live in a script.\n        </p>\n\n        <div ui-card class=\"mt-6\">\n          <div ui-card-content class=\"p-0\">\n            <div class=\"border-border flex items-center gap-1.5 border-b px-4 py-2.5\">\n              <span class=\"bg-muted-foreground/30 size-2.5 rounded-full\" aria-hidden=\"true\"></span>\n              <span class=\"bg-muted-foreground/30 size-2.5 rounded-full\" aria-hidden=\"true\"></span>\n              <span class=\"bg-muted-foreground/30 size-2.5 rounded-full\" aria-hidden=\"true\"></span>\n              <span class=\"text-muted-foreground ml-2 font-mono text-xs\">bash — northwind</span>\n            </div>\n\n            <!-- min-h holds the final transcript height from the first paint, so\n                 the card does not grow line by line and shove the page down. -->\n            <div class=\"min-h-[13.5rem] space-y-1 p-4 font-mono text-xs leading-relaxed\">\n              @for (line of visibleLines(); track $index) {\n                <p [class]=\"toneClass(line.kind)\">\n                  @if (line.kind === 'prompt') {\n                    <span class=\"text-primary select-none\">$ </span>\n                  }\n                  {{ line.text }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n\n        <button ui-button variant=\"outline\" class=\"mt-6\">Read the CLI reference</button>\n      </div>\n    </section>\n  `,\n})\nexport class UiCodeTerminalSessionComponent implements OnInit, OnDestroy {\n  protected readonly Terminal = Terminal\n\n  @Input() lineDelay = 420\n  @Input('class') className?: string\n\n  protected readonly lines = lines\n\n  // Renders the whole transcript immediately when the viewer prefers reduced\n  // motion; otherwise reveals a line at a time from mount.\n  readonly shown = signal(0)\n  private timer: ReturnType<typeof setInterval> | undefined\n\n  readonly visibleLines = computed(() => lines.slice(0, this.shown()))\n\n  ngOnInit(): void {\n    if (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n      this.shown.set(lines.length)\n      return\n    }\n    this.timer = setInterval(() => {\n      const next = this.shown() + 1\n      this.shown.set(next)\n      if (next >= lines.length) clearInterval(this.timer)\n    }, this.lineDelay)\n  }\n\n  ngOnDestroy(): void {\n    clearInterval(this.timer)\n  }\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n\n  toneClass(kind: string): string {\n    if (kind === 'prompt') return 'text-foreground'\n    if (kind === 'ok') return 'text-success'\n    return 'text-muted-foreground'\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/code-terminal-session/code-terminal-session.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/code-terminal-session/index.ts",
      "content": "export { UiCodeTerminalSessionComponent, type TerminalLine } from './code-terminal-session.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/code-terminal-session/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json"
  ],
  "description": "Terminal transcript that types itself out line by line on mount, showing prompts, output, and a success summary, and rendering instantly under reduced-motion.",
  "categories": [
    "marketing"
  ]
}