52: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"] 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:T265b,"use client" import { useEffect, useRef, useCallback, useState, type CSSProperties } from "react" import { useMap } from "./hooks" import type { MapCoordinates } from "./types" const DEFAULT_SIZE = 120 const DEFAULT_BRACKET_LENGTH = 24 const DEFAULT_BRACKET_THICKNESS = 2 const DEFAULT_GAP = 8 const DEFAULT_COLOR = "rgba(59, 130, 246, 0.9)" const DEFAULT_LOCKED_COLOR = "rgba(34, 197, 94, 0.9)" const DEFAULT_TRACKING_SPEED = 0.02 const DEFAULT_LOCKED_THICKNESS_MULTIPLIER = 2.5 const DEFAULT_CROSSHAIR_LENGTH = 12 type MapTargetingReticleProps = { coordinates: MapCoordinates target?: MapCoordinates size?: number bracketLength?: number bracketThickness?: number gap?: number color?: string lockedColor?: string locked?: boolean trackingSpeed?: number showCrosshair?: boolean showCoordinates?: boolean onLocked?: () => void } type Corner = "topLeft" | "topRight" | "bottomLeft" | "bottomRight" type CornerBracketProps = { corner: Corner bracketLength: number bracketThickness: number gap: number color: string } const CornerBracket = ({ corner, bracketLength, bracketThickness, gap, color }: CornerBracketProps) => { const getPosition = (): CSSProperties => { switch (corner) { case "topLeft": return { top: gap, left: gap } case "topRight": return { top: gap, right: gap } case "bottomLeft": return { bottom: gap, left: gap } case "bottomRight": return { bottom: gap, right: gap } } } const getTransform = (): string => { switch (corner) { case "topLeft": return "rotate(0deg)" case "topRight": return "rotate(90deg)" case "bottomLeft": return "rotate(-90deg)" case "bottomRight": return "rotate(180deg)" } } const style: CSSProperties = { position: "absolute", width: bracketLength, height: bracketLength, ...getPosition(), } return (

) } type CrosshairProps = { size: number color: string thickness: number } const Crosshair = ({ size, color, thickness }: CrosshairProps) => { const center = size / 2 const style: CSSProperties = { position: "absolute", top: 0, left: 0, width: size, height: size, pointerEvents: "none", } return ( ) } type CoordinatesDisplayProps = { coordinates: MapCoordinates size: number color: string } const getDirection = (value: number, isLatitude: boolean): string => { if (isLatitude) { return value >= 0 ? "N" : "S" } return value >= 0 ? "E" : "W" } const formatCoordinate = (value: number, isLatitude: boolean): string => { const absolute = Math.abs(value) const degrees = Math.floor(absolute) const minutes = Math.floor((absolute - degrees) * 60) const seconds = ((absolute - degrees - minutes / 60) * 3600).toFixed(1) const direction = getDirection(value, isLatitude) return `${degrees}°${minutes}'${seconds}"${direction}` } const CoordinatesDisplay = ({ coordinates, size, color }: CoordinatesDisplayProps) => { const [lng, lat] = coordinates const style: CSSProperties = { position: "absolute", top: size + 4, left: "50%", transform: "translateX(-50%)", whiteSpace: "nowrap", fontFamily: "ui-monospace, monospace", fontSize: "10px", fontWeight: 600, color: color, textShadow: "0 1px 2px rgba(0,0,0,0.8)", letterSpacing: "0.5px", } return (

{formatCoordinate(lat, true)} {formatCoordinate(lng, false)}

) } export const MapTargetingReticle = ({ coordinates, target, size = DEFAULT_SIZE, bracketLength = DEFAULT_BRACKET_LENGTH, bracketThickness = DEFAULT_BRACKET_THICKNESS, gap = DEFAULT_GAP, color = DEFAULT_COLOR, lockedColor = DEFAULT_LOCKED_COLOR, locked = false, trackingSpeed = DEFAULT_TRACKING_SPEED, showCrosshair = true, showCoordinates = false, onLocked, }: MapTargetingReticleProps) => { const { map, isLoaded } = useMap() const overlayRef = useRef(null) const animationFrameRef = useRef(null) const currentPositionRef = useRef<{ x: number; y: number } | null>(null) const [isLocked, setIsLocked] = useState(locked) const [currentCoordinates, setCurrentCoordinates] = useState(coordinates) const targetRef = useRef(target) const coordinatesRef = useRef(coordinates) const onLockedRef = useRef(onLocked) const isLockedRef = useRef(isLocked) targetRef.current = target coordinatesRef.current = coordinates onLockedRef.current = onLocked isLockedRef.current = isLocked const activeColor = isLocked ? lockedColor : color const activeThickness = isLocked ? bracketThickness * DEFAULT_LOCKED_THICKNESS_MULTIPLIER : bracketThickness const updatePosition = useCallback(() => { if (!overlayRef.current || !map) { return } const currentTarget = targetRef.current const currentCoords = coordinatesRef.current const positionToUse = isLockedRef.current && currentTarget ? currentTarget : currentCoords const projected = map.project(positionToUse) const halfSize = size / 2 overlayRef.current.style.left = `${projected.x - halfSize}px` overlayRef.current.style.top = `${projected.y - halfSize}px` }, [map, size]) const animateToTarget = useCallback((): boolean => { const currentTarget = targetRef.current if (!map || !currentTarget || isLockedRef.current) { return false } const targetProjected = map.project(currentTarget) if (!currentPositionRef.current) { const currentProjected = map.project(coordinatesRef.current) currentPositionRef.current = { x: currentProjected.x, y: currentProjected.y } } const current = currentPositionRef.current const dx = targetProjected.x - current.x const dy = targetProjected.y - current.y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < 2) { setIsLocked(true) setCurrentCoordinates(currentTarget) onLockedRef.current?.() return false } current.x += dx * trackingSpeed current.y += dy * trackingSpeed if (overlayRef.current) { const halfSize = size / 2 overlayRef.current.style.left = `${current.x - halfSize}px` overlayRef.current.style.top = `${current.y - halfSize}px` } if (showCoordinates) { const lngLat = map.unproject([current.x, current.y]) setCurrentCoordinates([lngLat.lng, lngLat.lat]) } return true }, [map, trackingSpeed, size, showCoordinates]) useEffect(() => { setIsLocked(locked) if (locked && target) { setCurrentCoordinates(target) } }, [locked, target]) useEffect(() => { if (!map || !isLoaded) { return } if (target && !isLocked) { if (!currentPositionRef.current) { const currentProjected = map.project(coordinates) currentPositionRef.current = { x: currentProjected.x, y: currentProjected.y } } const runAnimation = () => { const shouldContinue = animateToTarget() if (shouldContinue) { animationFrameRef.current = requestAnimationFrame(runAnimation) } } runAnimation() } else { updatePosition() } const handleMapChange = () => { if (!targetRef.current || isLockedRef.current) { updatePosition() } } map.on("move", handleMapChange) map.on("zoom", handleMapChange) map.on("rotate", handleMapChange) map.on("pitch", handleMapChange) map.on("resize", handleMapChange) return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } map.off("move", handleMapChange) map.off("zoom", handleMapChange) map.off("rotate", handleMapChange) map.off("pitch", handleMapChange) map.off("resize", handleMapChange) } }, [map, isLoaded, target, isLocked, coordinates, updatePosition, animateToTarget]) const containerStyle: CSSProperties = { position: "absolute", width: size, height: size, pointerEvents: "none", zIndex: 10, transition: isLocked ? "none" : "opacity 0.2s ease-out", } const corners: Corner[] = ["topLeft", "topRight", "bottomLeft", "bottomRight"] return (

{corners.map((corner) => { return ( ) })} {showCrosshair && } {showCoordinates && }

) } 51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@terrae","registryDependencies":["https://www.terrae.dev/map.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/map/targeting-reticle.tsx","content":"$54","type":"registry:ui","target":"components/ui/map/targeting-reticle.tsx"}],"className":"h-[70svh] min-h-80"}]]}]