{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-terminal-session",
  "title": "Code — Terminal Session",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/code-terminal-session/CodeTerminalSession.tsx",
      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { Terminal } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\n\nconst lines = [\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\nfunction toneClass(kind: string) {\n  if (kind === 'prompt') return 'text-foreground'\n  if (kind === 'ok') return 'text-success'\n  return 'text-muted-foreground'\n}\n\nexport function CodeTerminalSession({ lineDelay = 420 }: { lineDelay?: number }) {\n  // Renders the whole transcript immediately when the viewer prefers reduced\n  // motion; otherwise reveals a line at a time from mount.\n  const [shown, setShown] = useState(0)\n\n  useEffect(() => {\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n      setShown(lines.length)\n      return\n    }\n    const timer = setInterval(() => {\n      setShown((value) => {\n        if (value >= lines.length) {\n          clearInterval(timer)\n          return value\n        }\n        return value + 1\n      })\n    }, lineDelay)\n    return () => clearInterval(timer)\n  }, [lineDelay])\n\n  return (\n    <section data-slot=\"code-terminal-session\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-3xl px-6 py-20\">\n        <Badge variant=\"secondary\" className=\"gap-1.5\">\n          <Terminal className=\"size-3\" aria-hidden=\"true\" />\n          CLI\n        </Badge>\n        <h2 className=\"mt-4 text-2xl font-semibold tracking-tight\">Connected and certified in two commands</h2>\n        <p className=\"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        <Card className=\"mt-6\">\n          <CardContent className=\"p-0\">\n            <div className=\"border-border flex items-center gap-1.5 border-b px-4 py-2.5\">\n              <span className=\"bg-muted-foreground/30 size-2.5 rounded-full\" aria-hidden=\"true\" />\n              <span className=\"bg-muted-foreground/30 size-2.5 rounded-full\" aria-hidden=\"true\" />\n              <span className=\"bg-muted-foreground/30 size-2.5 rounded-full\" aria-hidden=\"true\" />\n              <span className=\"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 className=\"min-h-[13.5rem] space-y-1 p-4 font-mono text-xs leading-relaxed\">\n              {lines.slice(0, shown).map((line, index) => (\n                <p key={index} className={toneClass(line.kind)}>\n                  {line.kind === 'prompt' && <span className=\"text-primary select-none\">$ </span>}\n                  {line.text}\n                </p>\n              ))}\n            </div>\n          </CardContent>\n        </Card>\n\n        <Button variant=\"outline\" className=\"mt-6\">\n          Read the CLI reference\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CodeTerminalSession.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/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"
  ]
}