4f: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"] 50: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"] 51:T3042,"use client"; import { AnimatePresence, motion, useMotionValue, useSpring, useTransform, } from "motion/react"; import NextImage from "next/image"; import type React from "react"; import { useEffect, useMemo, useRef, useState } from "react"; interface LocationMapProps { /** Location name to display */ location?: string; /** Latitude coordinate */ latitude?: number; /** Longitude coordinate */ longitude?: number; /** Zoom level for the map (1-18) */ zoom?: number; /** Additional CSS classes */ className?: string; /** Map tile provider */ tileProvider?: "openstreetmap" | "carto-light" | "carto-dark"; } // Convert lat/lng to tile coordinates function latLngToTile(lat: number, lng: number, zoom: number) { const n = 2 ** zoom; const x = Math.floor(((lng + 180) / 360) * n); const latRad = (lat * Math.PI) / 180; const y = Math.floor( ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2) * n, ); return { x, y }; } // Get tile URL based on provider function getTileUrl(provider: string, x: number, y: number, z: number) { switch (provider) { case "carto-light": return `https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/${z}/${x}/${y}.png`; case "carto-dark": return `https://cartodb-basemaps-a.global.ssl.fastly.net/dark_all/${z}/${x}/${y}.png`; default: return `https://tile.openstreetmap.org/${z}/${x}/${y}.png`; } } // Format coordinates for display function formatCoordinates(lat: number, lng: number) { const latDir = lat >= 0 ? "N" : "S"; const lngDir = lng >= 0 ? "E" : "W"; return `${Math.abs(lat).toFixed(4)}° ${latDir}, ${Math.abs(lng).toFixed(4)}° ${lngDir}`; } export function LocationMap({ location = "San Francisco, CA", latitude = 37.7749, longitude = -122.4194, zoom = 14, className, tileProvider = "carto-light", }: LocationMapProps) { const [isHovered, setIsHovered] = useState(false); const [isExpanded, setIsExpanded] = useState(false); const [tilesLoaded, setTilesLoaded] = useState(false); const containerRef = useRef(null); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const rotateX = useTransform(mouseY, [-50, 50], [8, -8]); const rotateY = useTransform(mouseX, [-50, 50], [-8, 8]); const springRotateX = useSpring(rotateX, { stiffness: 300, damping: 30 }); const springRotateY = useSpring(rotateY, { stiffness: 300, damping: 30 }); const coordinates = useMemo( () => formatCoordinates(latitude, longitude), [latitude, longitude], ); // Generate tile URLs for a 3x3 grid around the center tile const tiles = useMemo(() => { const centerTile = latLngToTile(latitude, longitude, zoom); const tileUrls: { url: string; offsetX: number; offsetY: number }[] = []; for (let dy = -1; dy <= 1; dy++) { for (let dx = -1; dx <= 1; dx++) { tileUrls.push({ url: getTileUrl( tileProvider, centerTile.x + dx, centerTile.y + dy, zoom, ), offsetX: dx, offsetY: dy, }); } } return tileUrls; }, [latitude, longitude, zoom, tileProvider]); // Preload tiles useEffect(() => { let loadedCount = 0; const totalTiles = tiles.length; tiles.forEach((tile) => { const img = new Image(); img.crossOrigin = "anonymous"; img.onload = () => { loadedCount++; if (loadedCount === totalTiles) { setTilesLoaded(true); } }; img.onerror = () => { loadedCount++; if (loadedCount === totalTiles) { setTilesLoaded(true); } }; img.src = tile.url; }); }, [tiles]); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; mouseX.set(e.clientX - centerX); mouseY.set(e.clientY - centerY); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); setIsHovered(false); }; const handleClick = () => { setIsExpanded(!isExpanded); }; return ( setIsHovered(true)} onMouseLeave={handleMouseLeave} onClick={handleClick} > {/* Subtle gradient overlay */}

{isExpanded && ( {/* Real map tiles */}

{tiles.map((tile, index) => ( ))}

{/* Map loading placeholder */} {!tilesLoaded && (

)} {/* Location marker */} {/* Gradient overlays for better text readability */}

)} {/* Grid pattern - only show when collapsed */} {/* Content */}

{/* Top section */}

{/* Map Icon SVG */}

{/* Bottom section */}

{location} {isExpanded && ( {coordinates} )} {/* Animated underline */}

); } 4e:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@jolyui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"ui/expanded-map.tsx","content":"$51","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]