{
  "name": "image",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "description": "A component for displaying images from base64 or Uint8Array data, with full accessibility and responsive styling. Perfect for AI-generated or user-uploaded images.",
  "files": [
    {
      "path": "image.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useEffect, useState, type ImgHTMLAttributes } from \"react\"\n\nexport type GeneratedImageLike = {\n  base64?: string\n  uint8Array?: Uint8Array\n  mediaType?: string\n}\n\nexport type ImageProps = GeneratedImageLike &\n  Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\"> & {\n    alt: string\n  }\n\nfunction getImageSrc({\n  base64,\n  mediaType,\n}: Pick<GeneratedImageLike, \"base64\" | \"mediaType\">) {\n  if (base64 && mediaType) {\n    return `data:${mediaType};base64,${base64}`\n  }\n  return undefined\n}\n\nexport const Image = ({\n  base64,\n  uint8Array,\n  mediaType = \"image/png\",\n  className,\n  alt,\n  ...props\n}: ImageProps) => {\n  const [objectUrl, setObjectUrl] = useState<string | undefined>(undefined)\n\n  useEffect(() => {\n    if (uint8Array && mediaType) {\n      const blob = new Blob([uint8Array as BlobPart], { type: mediaType })\n      const url = URL.createObjectURL(blob)\n      setObjectUrl(url)\n      return () => {\n        URL.revokeObjectURL(url)\n      }\n    }\n    setObjectUrl(undefined)\n    return\n  }, [uint8Array, mediaType])\n\n  const base64Src = getImageSrc({ base64, mediaType })\n  const src = base64Src ?? objectUrl\n\n  if (!src) {\n    return (\n      <div\n        aria-label={alt}\n        role=\"img\"\n        className={cn(\n          \"h-auto max-w-full animate-pulse overflow-hidden rounded-md bg-gray-100 dark:bg-neutral-800\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={cn(\"h-auto max-w-full overflow-hidden rounded-md\", className)}\n      role=\"img\"\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}