{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image",
  "title": "Map Image",
  "description": "Image overlay layers on the map.",
  "dependencies": ["mapbox-gl"],
  "devDependencies": ["@types/mapbox-gl"],
  "registryDependencies": ["https://www.terrae.dev/map.json"],
  "files": [
    {
      "path": "src/registry/map/image.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\nimport { useMap } from \"./hooks\"\nimport type { MapImageCorners } from \"./types\"\n\ntype MapImageProps = {\n  id: string\n  url: string\n  coordinates: MapImageCorners\n  opacity?: number\n}\n\nexport const MapImage = ({ id, url, coordinates, opacity = 1 }: MapImageProps) => {\n  const { map, isLoaded } = useMap()\n  const initializedRef = useRef(false)\n\n  useEffect(() => {\n    if (!map || !isLoaded || initializedRef.current) return\n\n    const sourceId = `${id}-source`\n    const layerId = `${id}-layer`\n\n    map.addSource(sourceId, {\n      type: \"image\",\n      url,\n      coordinates,\n    })\n\n    map.addLayer({\n      id: layerId,\n      type: \"raster\",\n      source: sourceId,\n      paint: {\n        \"raster-opacity\": opacity,\n      },\n    })\n\n    initializedRef.current = true\n\n    return () => {\n      if (map) {\n        try {\n          if (map.getLayer && map.getLayer(layerId)) map.removeLayer(layerId)\n          if (map.getSource && map.getSource(sourceId)) map.removeSource(sourceId)\n        } catch {\n          // Silently handle cleanup errors\n        }\n      }\n      initializedRef.current = false\n    }\n  }, [map, isLoaded, id, url, coordinates, opacity])\n\n  return null\n}\n",
      "type": "registry:ui",
      "target": "components/ui/map/image.tsx"
    }
  ],
  "type": "registry:ui"
}