50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T1e9c,"use client" import { useTheme } from "next-themes" import { createContext, useEffect, useRef, useState, type ReactNode } from "react" import type mapboxgl from "mapbox-gl" import { mapgl, detectedLibrary } from "./map-library" import { Globe } from "lucide-react" import { defaultMapStyles, defaultMapLibreStyles, type MapContextValue, type MapThemeStyles, type MapProjection, type MapCoordinates, type MapBounds, } from "./types" export const MapContext = createContext(null) const DEFAULT_CENTER: MapCoordinates = [0, 0] const DEFAULT_ZOOM = 2 const DEFAULT_BEARING = 0 const DEFAULT_PITCH = 0 const DEFAULT_ROTATE_SPEED = 3 type MapProps = { accessToken?: string children?: ReactNode loader?: ReactNode // Forces loader to show when true, hides when false, auto when undefined showLoader?: boolean // Overrides theme-based styles when set style?: string styles?: MapThemeStyles center?: MapCoordinates zoom?: number bearing?: number pitch?: number projection?: MapProjection minZoom?: number maxZoom?: number maxBounds?: MapBounds // Auto-rotate the globe (only works with projection="globe") autoRotate?: boolean // Rotation speed in degrees per second rotateSpeed?: number } export const Map = ({ accessToken, children, loader, showLoader, style, styles, center = DEFAULT_CENTER, zoom = DEFAULT_ZOOM, bearing = DEFAULT_BEARING, pitch = DEFAULT_PITCH, projection, minZoom, maxZoom, maxBounds, autoRotate, rotateSpeed = DEFAULT_ROTATE_SPEED, }: MapProps) => { const containerRef = useRef(null) const mapRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) const [error, setError] = useState(null) const { resolvedTheme } = useTheme() const initializedRef = useRef(false) const shouldShowLoader = showLoader ?? !isLoaded const getMapStyle = () => { if (style) { return style } const defaults = detectedLibrary === "maplibre" ? defaultMapLibreStyles : defaultMapStyles const darkStyle = styles?.dark ?? defaults.dark const lightStyle = styles?.light ?? defaults.light return resolvedTheme === "dark" ? darkStyle : lightStyle } const createMapInstance = (container: HTMLDivElement) => { return new mapgl.Map({ container, style: getMapStyle(), center, zoom, bearing, pitch, projection, minZoom, maxZoom, maxBounds, attributionControl: false, }) } const isStandardStyle = (styleUrl: string) => { return styleUrl.includes("mapbox://styles/mapbox/standard") } const updateStandardLightPreset = (mapInstance: mapboxgl.Map) => { if (detectedLibrary !== "mapbox") { return } const currentStyle = getMapStyle() if (isStandardStyle(currentStyle)) { const lightPreset = resolvedTheme === "dark" ? "night" : "day" mapInstance.setConfigProperty("basemap", "lightPreset", lightPreset) } } const handleMapLoad = () => { setIsLoaded(true) if (mapRef.current) { updateStandardLightPreset(mapRef.current) } } const handleMapError = (e: mapboxgl.ErrorEvent) => { console.error("Map error:", e.error) setError("Failed to load map") } const cleanupMap = (mapInstance: mapboxgl.Map) => { mapInstance.remove() mapRef.current = null setIsLoaded(false) initializedRef.current = false } useEffect(() => { if (initializedRef.current) { return } if (!containerRef.current) { return } if (detectedLibrary === "mapbox" && !accessToken) { setError( "Mapbox access token is required. Add NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN to your .env.local file and restart the dev server." ) return } initializedRef.current = true if (accessToken) { mapgl.accessToken = accessToken } try { const container = containerRef.current const originalGetBoundingClientRect = container.getBoundingClientRect.bind(container) container.getBoundingClientRect = () => { const rect = originalGetBoundingClientRect() const width = container.offsetWidth const height = container.offsetHeight return { ...rect, width, height, right: rect.left + width, bottom: rect.top + height } } const mapInstance = createMapInstance(container) mapInstance.on("load", handleMapLoad) mapInstance.on("error", handleMapError) mapRef.current = mapInstance return () => { delete (container as unknown as Record).getBoundingClientRect cleanupMap(mapInstance) } } catch (err) { console.error("Error creating map:", err) setError("Failed to create map") initializedRef.current = false } }, []) useEffect(() => { if (!mapRef.current || !isLoaded) { return } const currentStyle = getMapStyle() if (isStandardStyle(currentStyle)) { updateStandardLightPreset(mapRef.current) } else { mapRef.current.setStyle(currentStyle) } }, [style, styles, resolvedTheme]) useEffect(() => { if (!mapRef.current || !isLoaded) { return } mapRef.current.setCenter(center) }, [center]) useEffect(() => { if (!mapRef.current || !isLoaded) { return } mapRef.current.setZoom(zoom) }, [zoom]) useEffect(() => { if (!mapRef.current || !isLoaded) { return } mapRef.current.setBearing(bearing) }, [bearing]) useEffect(() => { if (!mapRef.current || !isLoaded) { return } mapRef.current.setPitch(pitch) }, [pitch]) useEffect(() => { if (!mapRef.current || !isLoaded || !projection) { return } mapRef.current.setProjection(projection) }, [projection]) useEffect(() => { if (!containerRef.current || !mapRef.current || !isLoaded) { return } const container = containerRef.current const observer = new ResizeObserver(() => { mapRef.current?.resize() }) observer.observe(container) return () => { observer.disconnect() } }, [isLoaded]) useEffect(() => { if (!mapRef.current || !isLoaded || !autoRotate || projection !== "globe") { return } let animationId: number let lastTime = performance.now() const rotate = (currentTime: number) => { if (!mapRef.current) { return } const delta = (currentTime - lastTime) / 1000 lastTime = currentTime const currentCenter = mapRef.current.getCenter() const newLng = currentCenter.lng + rotateSpeed * delta mapRef.current.setCenter([newLng, currentCenter.lat]) animationId = requestAnimationFrame(rotate) } animationId = requestAnimationFrame(rotate) return () => { cancelAnimationFrame(animationId) } }, [isLoaded, autoRotate, projection, rotateSpeed]) const contextValue: MapContextValue = { map: mapRef.current, isLoaded, library: detectedLibrary, } if (error) { return (

{error}

) } return (

{shouldShowLoader && (loader || )} {mapRef.current && children}

) } const DefaultLoader = () => { return (

) } 55:T8f4,import { type RefObject } from "react" import type { Map, Marker, ProjectionSpecification } from "mapbox-gl" import type { MapLibraryName } from "./map-library" export type { MapLibraryName } export type MapCoordinates = [longitude: number, latitude: number] export type MapBounds = [southwest: MapCoordinates, northeast: MapCoordinates] export type MapPath = MapCoordinates[] export type MapImageCorners = [ topLeft: MapCoordinates, topRight: MapCoordinates, bottomRight: MapCoordinates, bottomLeft: MapCoordinates, ] export type MapProjection = ProjectionSpecification["name"] export type LngLatCoordinates = { lng: number lat: number } export type MapThemeStyles = { light?: string dark?: string } export const defaultMapStyles: Required = { light: "mapbox://styles/mapbox/light-v11", dark: "mapbox://styles/mapbox/dark-v11", } export const standardMapStyles: Required = { light: "mapbox://styles/mapbox/standard", dark: "mapbox://styles/mapbox/standard", } export const streetsMapStyles: Required = { light: "mapbox://styles/mapbox/streets-v12", dark: "mapbox://styles/mapbox/dark-v11", } export const outdoorsMapStyles: Required = { light: "mapbox://styles/mapbox/outdoors-v12", dark: "mapbox://styles/mapbox/dark-v11", } export const satelliteMapStyles: Required = { light: "mapbox://styles/mapbox/satellite-streets-v12", dark: "mapbox://styles/mapbox/satellite-streets-v12", } export const navigationMapStyles: Required = { light: "mapbox://styles/mapbox/navigation-day-v1", dark: "mapbox://styles/mapbox/navigation-night-v1", } export const defaultMapLibreStyles: Required = { light: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json", dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json", } export type MapCompareOrientation = "horizontal" | "vertical" export type MapSyncLayout = "horizontal" | "vertical" | "grid" export type MapContextValue = { map: Map | null isLoaded: boolean library: MapLibraryName } export type MarkerContextValue = { markerRef: RefObject markerElementRef: RefObject map: Map | null isReady: boolean } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","mapbox-gl",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/mapbox-gl","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"mapbox-gl"}]]}]}],["$","li","next-themes",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next-themes","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"next-themes"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@terrae","registryDependencies":[]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@layer base {\n\t.mapboxgl-popup-content, .maplibregl-popup-content {\n\t\t@apply bg-transparent! shadow-none! p-0! rounded-none! {\n\n\t\t}\n\t}\n\t.mapboxgl-popup-tip, .maplibregl-popup-tip {\n\t\t@apply hidden! {\n\n\t\t}\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"src/registry/map/map.tsx","content":"$54","type":"registry:ui","target":"components/ui/map/map.tsx"},{"path":"src/registry/map/types.ts","content":"$55","type":"registry:ui","target":"components/ui/map/types.ts"},{"path":"src/registry/map/hooks.ts","content":"import { useContext } from \"react\"\nimport { MapContext } from \"./map\"\n\nexport const useMap = () => {\n const context = useContext(MapContext)\n if (!context) {\n return { map: null, isLoaded: false, library: \"mapbox\" as const }\n }\n return context\n}\n","type":"registry:ui","target":"components/ui/map/hooks.ts"},{"path":"src/registry/map/map-library.ts","content":"import mapboxgl from \"mapbox-gl\"\nimport \"mapbox-gl/dist/mapbox-gl.css\"\n\nexport type MapLibraryName = \"mapbox\" | \"maplibre\"\n\n// Change these two lines to switch between Mapbox GL and MapLibre GL:\n// import mapboxgl from \"maplibre-gl\"\n// import \"maplibre-gl/dist/maplibre-gl.css\"\n// const detectedLibrary: MapLibraryName = \"maplibre\"\nconst detectedLibrary: MapLibraryName = \"mapbox\"\n\nconst mapgl = mapboxgl\n\nexport { mapgl, detectedLibrary }\n","type":"registry:ui","target":"components/ui/map/map-library.ts"}],"className":"h-[70svh] min-h-80"}]]}]