{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-block",
  "title": "Code Block",
  "description": "Code in a reply: filename, line numbers, highlights, wrap and copy.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/code-block.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { CheckIcon, CopyIcon, WrapTextIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype CodeBlockProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  code: string;\n  language?: string;\n  filename?: string;\n  /** Lines to highlight (1-based). */\n  highlight?: number[];\n  showLineNumbers?: boolean;\n};\n\n/**\n * Code in an agent's reply: filename and language, line numbers, highlighted lines, soft-wrap toggle and copy. No\n * highlighter bundled, so it stays light; pass pre-highlighted HTML through your own renderer if you need colors.\n */\nfunction CodeBlock({ code, language, filename, highlight = [], showLineNumbers = true, className, ...props }: CodeBlockProps) {\n  const [wrap, setWrap] = React.useState(false);\n  const [copied, setCopied] = React.useState(false);\n  const lines = code.replace(/\\n$/, \"\").split(\"\\n\");\n  const btn = \"grid size-7 place-items-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 aria-pressed:text-foreground [&_svg]:size-3.5\";\n  return (\n    <div data-slot=\"code-block\" className={cn(\"overflow-hidden rounded-xl border border-border bg-muted/30 text-sm\", className)} {...props}>\n      <div className=\"flex items-center gap-2 border-b border-border px-3 py-1.5\">\n        {filename && <span className=\"truncate font-mono text-xs\">{filename}</span>}\n        {language && <span className=\"cue-label\">{language}</span>}\n        <span className=\"ms-auto flex items-center gap-0.5\">\n          <button type=\"button\" aria-label=\"Wrap lines\" aria-pressed={wrap} onClick={() => setWrap((w) => !w)} className={btn}>\n            <WrapTextIcon />\n          </button>\n          <button\n            type=\"button\"\n            aria-label={copied ? \"Copied\" : \"Copy code\"}\n            onClick={async () => {\n              await navigator.clipboard.writeText(code);\n              setCopied(true);\n              setTimeout(() => setCopied(false), 1400);\n            }}\n            className={btn}\n          >\n            {copied ? <CheckIcon className=\"text-success\" /> : <CopyIcon />}\n          </button>\n        </span>\n      </div>\n      <pre className={cn(\"overflow-x-auto py-2.5 font-mono text-xs leading-6\", wrap && \"whitespace-pre-wrap\")}>\n        <code>\n          {lines.map((l, i) => (\n            <span key={i} className={cn(\"block pe-4\", highlight.includes(i + 1) ? \"bg-signal/15 shadow-[inset_2px_0_0_var(--signal)]\" : \"\")}>\n              {showLineNumbers && <span className=\"inline-block w-10 pe-3 text-right text-muted-foreground/60 select-none\">{i + 1}</span>}\n              <span className={showLineNumbers ? \"\" : \"ps-4\"}>{l || \" \"}</span>\n            </span>\n          ))}\n        </code>\n      </pre>\n    </div>\n  );\n}\n\nexport { CodeBlock };\nexport type { CodeBlockProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/code-block",
  "categories": [
    "agents"
  ],
  "type": "registry:ui"
}