{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "artifact",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://turnui.xyz/r/turn-button.json",
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/ui/artifact.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"./turn-button\";\n\n/** Side pane for generated content, with Preview and Code tabs. */\nexport function Artifact({\n  title,\n  preview,\n  code,\n  onClose,\n  className,\n}: {\n  title: string;\n  preview: React.ReactNode;\n  code: React.ReactNode;\n  onClose?: () => void;\n  className?: string;\n}) {\n  return (\n    <Tabs.Root defaultValue=\"preview\" className={cn(\"flex h-full flex-col overflow-hidden rounded border bg-background\", className)}>\n      <div className=\"flex h-11 items-center gap-3 border-b px-3 pt-1\">\n        <span className=\"truncate font-mono text-[13px]\">{title}</span>\n        <Tabs.List className=\"ml-auto flex gap-1 text-xs\">\n          {([\"preview\", \"code\"] as const).map((v) => (\n            <Tabs.Tab\n              key={v}\n              value={v}\n              className=\"-mb-px rounded-sm border-b-2 border-transparent px-2.5 py-1.5 font-mono capitalize text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-[active]:border-foreground data-[active]:text-foreground\"\n            >\n              {v}\n            </Tabs.Tab>\n          ))}\n        </Tabs.List>\n        {onClose && (\n          <Button variant=\"ghost\" size=\"icon\" onClick={onClose} aria-label=\"Close artifact\">\n            <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\"><path d=\"m4 4 8 8M12 4l-8 8\" /></svg>\n          </Button>\n        )}\n      </div>\n      <Tabs.Panel value=\"preview\" className=\"min-h-0 flex-1 overflow-auto p-4\">{preview}</Tabs.Panel>\n      <Tabs.Panel value=\"code\" className=\"min-h-0 flex-1 overflow-auto p-4\">{code}</Tabs.Panel>\n    </Tabs.Root>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}