{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-output",
  "title": "Image Output",
  "description": "Component for rendering images in notebook outputs. Handles base64-encoded image data from Jupyter kernels as well as regular URLs. Supports PNG, JPEG, GIF, and WebP.",
  "files": [
    {
      "path": "registry/outputs/image-output.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ninterface ImageOutputProps {\n  /**\n   * Image data - can be base64 encoded string, data URL, or regular URL\n   */\n  data: string;\n  /**\n   * The media type of the image\n   */\n  mediaType?: \"image/png\" | \"image/jpeg\" | \"image/gif\" | \"image/webp\";\n  /**\n   * Alt text for accessibility\n   */\n  alt?: string;\n  /**\n   * Optional width constraint\n   */\n  width?: number;\n  /**\n   * Optional height constraint\n   */\n  height?: number;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n}\n\n/**\n * ImageOutput component for rendering images in notebook outputs\n *\n * Handles base64-encoded image data from Jupyter kernels as well as\n * regular image URLs. Supports PNG, JPEG, GIF, and WebP formats.\n */\nexport function ImageOutput({\n  data,\n  mediaType = \"image/png\",\n  alt = \"Output image\",\n  width,\n  height,\n  className = \"\",\n}: ImageOutputProps) {\n  if (!data) {\n    return null;\n  }\n\n  // Determine the image source:\n  // - If already a data URL or regular URL, use as-is\n  // - Otherwise, assume base64 and construct data URL\n  const src =\n    data.startsWith(\"data:\") ||\n    data.startsWith(\"http://\") ||\n    data.startsWith(\"https://\") ||\n    data.startsWith(\"/\")\n      ? data\n      : `data:${mediaType};base64,${data}`;\n\n  const sizeProps: { width?: number; height?: number } = {};\n  if (width) sizeProps.width = width;\n  if (height) sizeProps.height = height;\n\n  return (\n    <div data-slot=\"image-output\" className={cn(\"not-prose py-2\", className)}>\n      <img\n        src={src}\n        alt={alt}\n        className=\"block max-w-full h-auto\"\n        style={{ objectFit: \"contain\" }}\n        {...sizeProps}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/outputs/image-output.tsx"
    }
  ],
  "type": "registry:component"
}