{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "terminal",
  "title": "Terminal",
  "description": "Streaming command output in a dark console.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/terminal.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { gsap, motionScale } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\ntype TerminalProps = React.ComponentProps<\"div\"> & {\n  lines: string[];\n  title?: string;\n  /** Shows a live caret and keeps the view pinned to the newest line. */\n  streaming?: boolean;\n};\n\nconst tone = (line: string) =>\n  line.startsWith(\"$ \") ? \"text-[oklch(0.9_0.18_127)]\" : /^(✓|✔|done|ok\\b)/i.test(line) ? \"text-[oklch(0.78_0.15_150)]\" : /^(✗|✘|error|fail)/i.test(line) ? \"text-[oklch(0.72_0.18_25)]\" : /^(warn|!)/i.test(line) ? \"text-[oklch(0.82_0.14_80)]\" : \"text-[oklch(0.85_0_0)]\";\n\n/**\n * Command output from an agent: always a dark console (readable in both themes), prompts in signal, success and\n * failure lines colored, new lines sliding in while it streams, auto-following the bottom.\n */\nfunction Terminal({ lines, title = \"Terminal\", streaming = false, className, ...props }: TerminalProps) {\n  const body = React.useRef<HTMLDivElement>(null);\n  const count = React.useRef(lines.length);\n\n  React.useLayoutEffect(() => {\n    const el = body.current;\n    if (!el) return;\n    const added = Array.from(el.querySelectorAll(\"[data-line]\")).slice(count.current);\n    count.current = lines.length;\n    if (added.length && motionScale(el)) gsap.fromTo(added, { opacity: 0, x: -4 }, { opacity: 1, x: 0, duration: 0.2, ease: \"cue\", stagger: 0.03 });\n    el.scrollTop = el.scrollHeight;\n  }, [lines.length]);\n\n  return (\n    <div data-slot=\"terminal\" className={cn(\"overflow-hidden rounded-xl bg-[oklch(0.16_0.005_80)] text-[oklch(0.85_0_0)] shadow-raised ring-1 ring-black/20\", className)} {...props}>\n      <div className=\"flex items-center gap-1.5 border-b border-white/8 px-3 py-2\">\n        <span className=\"size-2.5 rounded-full bg-white/15\" />\n        <span className=\"size-2.5 rounded-full bg-white/15\" />\n        <span className=\"size-2.5 rounded-full bg-white/15\" />\n        <span className=\"ms-2 font-mono text-[0.6875rem] text-white/50\">{title}</span>\n        {streaming && <span className=\"ms-auto size-1.5 animate-pulse rounded-full bg-[oklch(0.9_0.18_127)]\" aria-label=\"Running\" />}\n      </div>\n      <div ref={body} role=\"log\" aria-live=\"polite\" className=\"max-h-64 overflow-y-auto p-3 font-mono text-xs leading-relaxed\">\n        {lines.map((l, i) => (\n          <div key={i} data-line className={cn(\"whitespace-pre-wrap\", tone(l))}>\n            {l || \" \"}\n          </div>\n        ))}\n        {streaming && <span aria-hidden=\"true\" className=\"inline-block h-3.5 w-1.5 translate-y-0.5 animate-pulse bg-[oklch(0.9_0.18_127)]\" />}\n      </div>\n    </div>\n  );\n}\n\nexport { Terminal };\nexport type { TerminalProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/terminal",
  "categories": [
    "agents"
  ],
  "type": "registry:ui"
}