{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "map",
  "title": "Map",
  "description": "Map preview primitive with graceful fallback.",
  "files": [
    {
      "path": "registry/berlin/blocks/map.tsx",
      "content": "// Generated from packages/ui/src/components/map.tsx\n\"use client\";\n\nimport * as React from \"react\";\n\ntype MapboxInstance = {\n  remove: () => void;\n};\n\nexport interface MapProps {\n  coordinates?: { lat?: number; lng?: number };\n  config?: Record<string, unknown>;\n  style?: React.CSSProperties;\n  dark?: boolean;\n  accessToken?: string;\n}\n\nexport function Map({\n  accessToken,\n  config,\n  coordinates,\n  dark = false,\n  style,\n}: MapProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const mapRef = React.useRef<MapboxInstance | null>(null);\n  const [ready, setReady] = React.useState(false);\n  const [error, setError] = React.useState(false);\n  const hasToken = Boolean(accessToken?.trim());\n  const hasCoordinates =\n    typeof coordinates?.lat === \"number\" && typeof coordinates?.lng === \"number\";\n  const lat = hasCoordinates ? coordinates.lat : undefined;\n  const lng = hasCoordinates ? coordinates.lng : undefined;\n\n  React.useEffect(() => {\n    if (\n      !hasToken ||\n      !hasCoordinates ||\n      !containerRef.current ||\n      ready ||\n      error\n    ) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (container.children.length > 0) {\n      return;\n    }\n\n    let isMounted = true;\n    let cleanup: (() => void) | undefined;\n\n    void import(\"mapbox-gl\")\n      .then((module) => {\n        if (!isMounted) {\n          return;\n        }\n\n        const mapboxgl = module.default;\n        mapboxgl.accessToken = accessToken!;\n        const map = new mapboxgl.Map({\n          container,\n          style: `mapbox://styles/mapbox/${dark ? \"dark\" : \"light\"}-v11`,\n          center: [lng!, lat!],\n          zoom: 12,\n          pitch: 0,\n          ...config,\n        });\n\n        map.on(\"load\", () => {\n          new mapboxgl.Marker().setLngLat([lng!, lat!]).addTo(map);\n          setReady(true);\n        });\n        map.on(\"error\", () => setError(true));\n\n        mapRef.current = map;\n        cleanup = () => {\n          map.remove();\n          mapRef.current = null;\n        };\n      })\n      .catch(() => {\n        if (isMounted) {\n          setError(true);\n        }\n      });\n\n    return () => {\n      isMounted = false;\n      cleanup?.();\n    };\n  }, [\n    accessToken,\n    config,\n    dark,\n    error,\n    hasCoordinates,\n    hasToken,\n    lat,\n    lng,\n    ready,\n  ]);\n\n  if (!hasCoordinates) {\n    return (\n      <div\n        style={{\n          background: \"var(--secondary)\",\n          borderRadius: \"var(--radius-media)\",\n          color: \"var(--muted-foreground)\",\n          fontSize: \"14px\",\n          minHeight: 200,\n          padding: 16,\n          ...style,\n        }}\n      >\n        No location\n      </div>\n    );\n  }\n\n  if (!hasToken || error) {\n    return (\n      <div\n        style={{\n          alignItems: \"center\",\n          background: \"var(--secondary)\",\n          borderRadius: \"var(--radius-media)\",\n          color: \"var(--muted-foreground)\",\n          display: \"flex\",\n          fontSize: \"14px\",\n          justifyContent: \"center\",\n          minHeight: 200,\n          padding: 16,\n          ...style,\n        }}\n      >\n        {lat!.toFixed(4)}, {lng!.toFixed(4)}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        borderRadius: \"var(--radius-media)\",\n        minHeight: 200,\n        overflow: \"hidden\",\n        ...style,\n      }}\n    />\n  );\n}\n",
      "type": "registry:ui",
      "target": "src/components/ui/map.tsx"
    }
  ],
  "type": "registry:ui"
}