{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-diagram",
  "type": "registry:component",
  "title": "Diagram",
  "description": "A drawn answer with zoom, reset, and a full-bleed view; you hand it the rendered graphic.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/diagram.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/diagram.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { MaximizeIcon, MinusIcon, PlusIcon, RotateCcwIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { ghostButton, mono, paper } from \"./surfaces\";\n\nexport function Diagram({\n  title,\n  zoom,\n  children,\n  onZoomIn,\n  onZoomOut,\n  onReset,\n  onExpand,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  | \"title\"\n  | \"zoom\"\n  | \"children\"\n  | \"onZoomIn\"\n  | \"onZoomOut\"\n  | \"onReset\"\n  | \"onExpand\"\n> & {\n  title: string;\n  zoom: number;\n  children: React.ReactNode;\n  onZoomIn?: () => void;\n  onZoomOut?: () => void;\n  onReset?: () => void;\n  onExpand?: () => void;\n}) {\n  return (\n    <div\n      data-slot=\"diagram\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-md flex-col overflow-hidden rounded-2xl\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex items-center gap-1 px-3 py-2\">\n        <span className=\"min-w-0 flex-1 truncate text-[13px] font-medium\">\n          {title}\n        </span>\n        <span className={cn(mono, \"text-foreground/30 shrink-0 tabular-nums\")}>\n          {Math.round(zoom * 100)}%\n        </span>\n        <button\n          type=\"button\"\n          aria-label=\"Zoom out\"\n          onClick={onZoomOut}\n          className={cn(ghostButton, \"size-7 shrink-0\")}\n        >\n          <MinusIcon className=\"size-3.5\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"Zoom in\"\n          onClick={onZoomIn}\n          className={cn(ghostButton, \"size-7 shrink-0\")}\n        >\n          <PlusIcon className=\"size-3.5\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"Reset the view\"\n          onClick={onReset}\n          className={cn(ghostButton, \"size-7 shrink-0\")}\n        >\n          <RotateCcwIcon className=\"size-3.5\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"Open full screen\"\n          onClick={onExpand}\n          disabled={!onExpand}\n          className={cn(\n            ghostButton,\n            \"size-7 shrink-0 disabled:pointer-events-none disabled:opacity-30\",\n          )}\n        >\n          <MaximizeIcon className=\"size-3.5\" />\n        </button>\n      </div>\n\n      <div className=\"border-foreground/[0.07] flex min-h-[10rem] items-center justify-center overflow-hidden border-t p-4\">\n        <div\n          className=\"origin-center transition-transform duration-200 ease-out motion-reduce:transition-none\"\n          style={{ transform: `scale(${zoom})` }}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}