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[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"] 52:T1dbb,"use client" import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react" import { useTheme } from "next-themes" import type mapboxgl from "mapbox-gl" import { mapgl, detectedLibrary } from "./map-library" import { Globe } from "lucide-react" import { cn } from "@/lib/utils" import { defaultMapStyles, defaultMapLibreStyles, type MapProjection, type MapCoordinates, type MapThemeStyles, type MapSyncLayout, } from "./types" type MapConfig = { style?: string styles?: MapThemeStyles label?: string } type MapSyncProps = { accessToken?: string maps: [MapConfig, MapConfig] | [MapConfig, MapConfig, MapConfig, MapConfig] center?: MapCoordinates zoom?: number bearing?: number pitch?: number projection?: MapProjection layout?: MapSyncLayout showLabels?: boolean loader?: ReactNode } type MapSyncContextValue = { registerMap: (index: number, map: mapboxgl.Map) => void unregisterMap: (index: number) => void accessToken?: string initialCenter: MapCoordinates initialZoom: number initialBearing: number initialPitch: number projection?: MapProjection } type MapSyncProviderProps = { children: ReactNode accessToken?: string initialCenter: MapCoordinates initialZoom: number initialBearing: number initialPitch: number projection?: MapProjection } type SyncedMapPanelProps = { index: number style: { width: string; height: string } label: string showLabel: boolean mapStyle?: string mapStyles?: MapThemeStyles loader?: ReactNode } const DEFAULT_CENTER: MapCoordinates = [0, 0] const DEFAULT_ZOOM = 2 const DEFAULT_BEARING = 0 const DEFAULT_PITCH = 0 const LABEL_BASE_STYLES = "absolute z-10 bg-background/95 backdrop-blur-sm border rounded px-2 py-1 text-xs font-medium" const MapSyncContext = createContext(null) const useMapSync = () => { const context = useContext(MapSyncContext) if (!context) { throw new Error("useMapSync must be used within MapSyncProvider") } return context } export const MapSync = ({ accessToken, maps, center = DEFAULT_CENTER, zoom = DEFAULT_ZOOM, bearing = DEFAULT_BEARING, pitch = DEFAULT_PITCH, projection, layout = "horizontal", showLabels = false, loader, }: MapSyncProps) => { const mapCount = maps.length const isGrid = layout === "grid" && mapCount === 4 const getLayoutClasses = () => { if (isGrid) { return "grid grid-cols-2 grid-rows-2" } if (layout === "vertical") { return "flex flex-col" } return "flex flex-row" } const getPanelSize = () => { if (isGrid) { return { width: "100%", height: "100%" } } if (layout === "vertical") { return { width: "100%", height: `${100 / mapCount}%` } } return { width: `${100 / mapCount}%`, height: "100%" } } const getDefaultLabel = (index: number) => { if (mapCount === 2) { if (layout === "vertical") { return index === 0 ? "Top" : "Bottom" } return index === 0 ? "Left" : "Right" } const labels = ["Top Left", "Top Right", "Bottom Left", "Bottom Right"] return labels[index] } return (

{maps.map((config, index) => { return ( ) })}

) } const MapSyncProvider = ({ children, accessToken, initialCenter, initialZoom, initialBearing, initialPitch, projection, }: MapSyncProviderProps) => { const mapsRef = useRef>(new Map()) const isSyncingRef = useRef(false) const syncMaps = (sourceIndex: number, sourceMap: mapboxgl.Map) => { if (isSyncingRef.current) { return } isSyncingRef.current = true const center = sourceMap.getCenter() const zoom = sourceMap.getZoom() const bearing = sourceMap.getBearing() const pitch = sourceMap.getPitch() mapsRef.current.forEach((map, index) => { if (index === sourceIndex) { return } map.jumpTo({ center, zoom, bearing, pitch, }) }) isSyncingRef.current = false } const registerMap = (index: number, map: mapboxgl.Map) => { mapsRef.current.set(index, map) const handleMove = () => { syncMaps(index, map) } map.on("move", handleMove) } const unregisterMap = (index: number) => { mapsRef.current.delete(index) } const contextValue: MapSyncContextValue = { registerMap, unregisterMap, accessToken, initialCenter, initialZoom, initialBearing, initialPitch, projection, } return {children} } const SyncedMapPanel = ({ index, style, label, showLabel, mapStyle, mapStyles, loader }: SyncedMapPanelProps) => { const containerRef = useRef(null) const mapRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) const initializedRef = useRef(false) const { resolvedTheme } = useTheme() const { registerMap, unregisterMap, accessToken, initialCenter, initialZoom, initialBearing, initialPitch, projection, } = useMapSync() const getMapStyle = () => { if (mapStyle) { return mapStyle } const defaults = detectedLibrary === "maplibre" ? defaultMapLibreStyles : defaultMapStyles const darkStyle = mapStyles?.dark ?? defaults.dark const lightStyle = mapStyles?.light ?? defaults.light return resolvedTheme === "dark" ? darkStyle : lightStyle } useEffect(() => { if (initializedRef.current) { return } if (!containerRef.current) { return } initializedRef.current = true if (accessToken) { mapgl.accessToken = accessToken } const map = new mapgl.Map({ container: containerRef.current, style: getMapStyle(), center: initialCenter, zoom: initialZoom, bearing: initialBearing, pitch: initialPitch, projection, attributionControl: false, }) map.on("load", () => { setIsLoaded(true) registerMap(index, map) }) mapRef.current = map return () => { unregisterMap(index) map.remove() mapRef.current = null initializedRef.current = false } }, []) useEffect(() => { if (!mapRef.current || !isLoaded) { return } mapRef.current.setStyle(getMapStyle()) }, [mapStyle, mapStyles, resolvedTheme]) return (

{showLabel &&

{label}

}

{!isLoaded && (loader || )}

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

) } 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":["https://www.terrae.dev/map.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/map/map-sync.tsx","content":"$52","type":"registry:ui","target":"components/ui/map/map-sync.tsx"}],"className":"h-[70svh] min-h-80"}]]}]