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:T363d,"use client" import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react" import { createPortal } from "react-dom" import type mapboxgl from "mapbox-gl" import { mapgl } from "./map-library" import { X } from "lucide-react" import { cn } from "@/lib/utils" import { useMap } from "./hooks" import type { MapCoordinates, LngLatCoordinates } from "./types" type MarkerContextValue = { markerRef: React.RefObject markerElementRef: React.RefObject map: mapboxgl.Map | null // State triggers re-render when marker element is ready. // Refs don't cause re-renders, so children would see null without this. isMounted: boolean } type MapMarkerProps = { coordinates: MapCoordinates children: ReactNode onClick?: (e: MouseEvent) => void onMouseEnter?: (e: MouseEvent) => void onMouseLeave?: (e: MouseEvent) => void onDragStart?: (lngLat: LngLatCoordinates) => void onDrag?: (lngLat: LngLatCoordinates) => void onDragEnd?: (lngLat: LngLatCoordinates) => void draggable?: boolean offset?: [number, number] rotation?: number rotationAlignment?: "map" | "viewport" | "auto" pitchAlignment?: "map" | "viewport" | "auto" } type MarkerCallbacks = { onClick?: (e: MouseEvent) => void onMouseEnter?: (e: MouseEvent) => void onMouseLeave?: (e: MouseEvent) => void onDragStart?: (lngLat: LngLatCoordinates) => void onDrag?: (lngLat: LngLatCoordinates) => void onDragEnd?: (lngLat: LngLatCoordinates) => void } type MarkerContentProps = { children?: ReactNode className?: string } type MarkerPopupProps = { children: ReactNode className?: string closeButton?: boolean offset?: number | [number, number] maxWidth?: string } type MarkerTooltipProps = { children: ReactNode className?: string offset?: number | [number, number] maxWidth?: string } type MarkerLabelProps = { children: ReactNode className?: string position?: "top" | "bottom" } type MarkerLabelPosition = "top" | "bottom" type MarkerStatusColor = "green" | "red" | "yellow" | "blue" type MarkerAvatarProps = { src: string alt: string size?: number online?: boolean statusColor?: MarkerStatusColor className?: string } type MarkerAvatarPinProps = { src: string alt: string size?: number borderWidth?: number className?: string } const DEFAULT_DRAGGABLE = false const DEFAULT_CLOSE_BUTTON = false const DEFAULT_POPUP_OFFSET = 16 const DEFAULT_TOOLTIP_OFFSET = 16 const DEFAULT_LABEL_POSITION: MarkerLabelPosition = "top" const DEFAULT_AVATAR_SIZE = 40 const DEFAULT_STATUS_COLOR: MarkerStatusColor = "green" const DEFAULT_AVATAR_PIN_SIZE = 56 const DEFAULT_AVATAR_PIN_BORDER_WIDTH = 4 const LABEL_POSITION_CLASSES: Record = { top: "bottom-full mb-1", bottom: "top-full mt-1", } const STATUS_COLORS: Record = { green: "bg-green-500", red: "bg-red-500", yellow: "bg-yellow-500", blue: "bg-blue-500", } const MarkerContext = createContext(null) const useMarkerContext = () => { const context = useContext(MarkerContext) if (!context) { throw new Error("Marker components must be used within MapMarker") } return context } export const MapMarker = ({ coordinates, children, onClick, onMouseEnter, onMouseLeave, onDragStart, onDrag, onDragEnd, draggable = DEFAULT_DRAGGABLE, offset, rotation, rotationAlignment, pitchAlignment, }: MapMarkerProps) => { const { map, isLoaded } = useMap() const markerRef = useRef(null) const markerElementRef = useRef(null) const [isMounted, setIsMounted] = useState(false) const callbacksRef = useRef({ onClick, onMouseEnter, onMouseLeave, onDragStart, onDrag, onDragEnd }) useEffect(() => { callbacksRef.current = { onClick, onMouseEnter, onMouseLeave, onDragStart, onDrag, onDragEnd } }, [onClick, onMouseEnter, onMouseLeave, onDragStart, onDrag, onDragEnd]) useEffect(() => { if (!map || !isLoaded || !map.getContainer?.() || !map.getCanvasContainer?.()) { return } const container = document.createElement("div") markerElementRef.current = container const marker = new mapgl.Marker({ element: container, draggable, offset, rotation, rotationAlignment, pitchAlignment, }) .setLngLat(coordinates) .addTo(map) markerRef.current = marker const handleClick = (e: MouseEvent) => { callbacksRef.current.onClick?.(e) } const handleMouseEnter = (e: MouseEvent) => { callbacksRef.current.onMouseEnter?.(e) } const handleMouseLeave = (e: MouseEvent) => { callbacksRef.current.onMouseLeave?.(e) } const handleDragStart = () => { const lngLat = markerRef.current?.getLngLat() if (lngLat) { callbacksRef.current.onDragStart?.({ lng: lngLat.lng, lat: lngLat.lat }) } } const handleDrag = () => { const lngLat = markerRef.current?.getLngLat() if (lngLat) { callbacksRef.current.onDrag?.({ lng: lngLat.lng, lat: lngLat.lat }) } } const handleDragEnd = () => { const lngLat = markerRef.current?.getLngLat() if (lngLat) { callbacksRef.current.onDragEnd?.({ lng: lngLat.lng, lat: lngLat.lat }) } } container.addEventListener("click", handleClick) container.addEventListener("mouseenter", handleMouseEnter) container.addEventListener("mouseleave", handleMouseLeave) marker.on("dragstart", handleDragStart) marker.on("drag", handleDrag) marker.on("dragend", handleDragEnd) setIsMounted(true) return () => { container.removeEventListener("click", handleClick) container.removeEventListener("mouseenter", handleMouseEnter) container.removeEventListener("mouseleave", handleMouseLeave) marker.off("dragstart", handleDragStart) marker.off("drag", handleDrag) marker.off("dragend", handleDragEnd) marker.remove() markerRef.current = null markerElementRef.current = null setIsMounted(false) } }, [map, isLoaded]) useEffect(() => { if (!markerRef.current) { return } markerRef.current.setLngLat(coordinates) }, [coordinates]) useEffect(() => { if (!markerRef.current) { return } markerRef.current.setDraggable(draggable) }, [draggable]) useEffect(() => { if (!markerRef.current) { return } if (offset) { markerRef.current.setOffset(offset) } }, [offset]) useEffect(() => { if (!markerRef.current) { return } if (rotation !== undefined) { markerRef.current.setRotation(rotation) } }, [rotation]) useEffect(() => { if (!markerRef.current) { return } if (rotationAlignment) { markerRef.current.setRotationAlignment(rotationAlignment) } }, [rotationAlignment]) useEffect(() => { if (!markerRef.current) { return } if (pitchAlignment) { markerRef.current.setPitchAlignment(pitchAlignment) } }, [pitchAlignment]) return ( {children} ) } const DefaultMarkerIcon = () => { return

} export const MarkerContent = ({ children, className }: MarkerContentProps) => { const { markerElementRef, isMounted } = useMarkerContext() if (!isMounted || !markerElementRef.current) { return null } return createPortal(

{children || }

, markerElementRef.current ) } export const MarkerPopup = ({ children, className, closeButton = DEFAULT_CLOSE_BUTTON, offset = DEFAULT_POPUP_OFFSET, maxWidth, }: MarkerPopupProps) => { const { markerRef, isMounted } = useMarkerContext() const containerRef = useRef(null) const popupRef = useRef(null) const [mounted, setMounted] = useState(false) useEffect(() => { if (!isMounted || !markerRef.current) { return } const container = document.createElement("div") containerRef.current = container const popup = new mapgl.Popup({ offset, closeButton: false, className: "custom-map-popup", }) .setMaxWidth(maxWidth || "none") .setDOMContent(container) popupRef.current = popup markerRef.current.setPopup(popup) setMounted(true) return () => { popup.remove() popupRef.current = null containerRef.current = null setMounted(false) } }, [isMounted, offset, maxWidth]) const handleClose = () => { popupRef.current?.remove() } if (!mounted || !containerRef.current) { return null } return createPortal(

{closeButton && ( )} {children}

, containerRef.current ) } export const MarkerTooltip = ({ children, className, offset = DEFAULT_TOOLTIP_OFFSET, maxWidth, }: MarkerTooltipProps) => { const { markerRef, markerElementRef, map, isMounted } = useMarkerContext() const containerRef = useRef(null) const popupRef = useRef(null) const [mounted, setMounted] = useState(false) useEffect(() => { if (!isMounted || !markerRef.current || !markerElementRef.current || !map) { return } const container = document.createElement("div") containerRef.current = container const popup = new mapgl.Popup({ offset, closeOnClick: true, closeButton: false, className: "custom-map-popup", }) .setMaxWidth(maxWidth || "none") .setDOMContent(container) popupRef.current = popup const markerElement = markerElementRef.current const marker = markerRef.current const handleMouseEnter = () => { popup.setLngLat(marker.getLngLat()).addTo(map) } const handleMouseLeave = () => { popup.remove() } markerElement.addEventListener("mouseenter", handleMouseEnter) markerElement.addEventListener("mouseleave", handleMouseLeave) setMounted(true) return () => { markerElement.removeEventListener("mouseenter", handleMouseEnter) markerElement.removeEventListener("mouseleave", handleMouseLeave) popup.remove() popupRef.current = null containerRef.current = null setMounted(false) } }, [isMounted, map, offset, maxWidth]) if (!mounted || !containerRef.current) { return null } return createPortal(

{children}

, containerRef.current ) } export const MarkerLabel = ({ children, className, position = DEFAULT_LABEL_POSITION }: MarkerLabelProps) => { return (

{children}

) } export const MarkerAvatar = ({ src, alt, size = DEFAULT_AVATAR_SIZE, online, statusColor = DEFAULT_STATUS_COLOR, className, }: MarkerAvatarProps) => { return (

{online !== undefined && (

)}

) } export const MarkerAvatarPin = ({ src, alt, size = DEFAULT_AVATAR_PIN_SIZE, borderWidth = DEFAULT_AVATAR_PIN_BORDER_WIDTH, className, }: MarkerAvatarPinProps) => { const pinSize = size * 0.32 const pinOffset = pinSize * 0.35 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","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/marker.tsx","content":"$52","type":"registry:ui","target":"components/ui/map/marker.tsx"}],"className":"h-[70svh] min-h-80"}]]}]