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:T1e62,'use client'; import { useEffect, useRef, useState } from 'react'; import { useSpring } from '@react-spring/web'; import createGlobe from 'cobe'; interface Marker { location: [number, number]; size: number; } interface GlobeProps { baseColor?: [number, number, number]; markerColor?: [number, number, number]; glowColor?: [number, number, number]; markers?: Marker[]; scale?: number; className?: string; rotateToLocation?: string | [number, number]; autoRotate?: boolean; rotateCities?: string[]; rotationSpeed?: number; } const cityCoordinates: Record = { 'san francisco': [37.7749, -122.4194], 'new york': [40.7128, -74.006], london: [51.5074, -0.1278], tokyo: [35.6762, 139.6503], paris: [48.8566, 2.3522], moscow: [55.7558, 37.6176], dubai: [25.2048, 55.2708], singapore: [1.3521, 103.8198], }; const locationToAngles = (lat: number, long: number): [number, number] => [ Math.PI - ((long * Math.PI) / 180 - Math.PI / 2), (lat * Math.PI) / 180, ]; interface GlobeRenderer { destroy: () => void; } export default function Globe({ baseColor = [0.3, 0.3, 0.3], markerColor = [0.1, 0.8, 1], glowColor = [1, 1, 1], markers = [ { location: [37.7595, -122.4367], size: 0.03 }, { location: [40.7128, -74.006], size: 0.1 }, ], scale = 1, className = 'aspect-square w-full max-w-150', rotateToLocation, autoRotate = true, rotateCities = [], rotationSpeed = 3000, }: GlobeProps) { const canvasRef = useRef(null); const containerRef = useRef(null); const pointerInteracting = useRef(null); const pointerInteractionMovement = useRef(0); const focusRef = useRef<[number, number] | null>(null); const phiRef = useRef(0); const rotationInterval = useRef(null); const [currentCityIndex, setCurrentCityIndex] = useState(0); const globeRef = useRef(null); const [isVisible, setIsVisible] = useState(false); const [{ r }, api] = useSpring(() => ({ r: 0, config: { mass: 1, tension: 280, friction: 40, precision: 0.001, }, })); useEffect(() => { if (!containerRef.current) return; const container = containerRef.current; const observer = new IntersectionObserver( (entries) => { const [entry] = entries; setIsVisible(entry.isIntersecting); }, { threshold: 0.1 }, ); observer.observe(container); return () => { observer.unobserve(container); }; }, []); useEffect(() => { if (rotateCities.length === 0) return; const rotateToNextCity = () => { const nextIndex = (currentCityIndex + 1) % rotateCities.length; const city = rotateCities[nextIndex].toLowerCase(); const coordinates = cityCoordinates[city]; if (coordinates) { focusRef.current = locationToAngles(...coordinates); setCurrentCityIndex(nextIndex); } }; if (isVisible) { const city = rotateCities[currentCityIndex].toLowerCase(); const coordinates = cityCoordinates[city]; if (coordinates) { focusRef.current = locationToAngles(...coordinates); } rotationInterval.current = setInterval(rotateToNextCity, rotationSpeed); } return () => { if (rotationInterval.current) { clearInterval(rotationInterval.current); } }; }, [rotateCities, currentCityIndex, rotationSpeed, isVisible]); useEffect(() => { if (!rotateToLocation) { focusRef.current = null; return; } let coordinates: [number, number]; if (typeof rotateToLocation === 'string') { const city = rotateToLocation.toLowerCase(); coordinates = cityCoordinates[city] || [0, 0]; } else { coordinates = rotateToLocation; } focusRef.current = locationToAngles(...coordinates); }, [rotateToLocation]); useEffect(() => { if (!isVisible || !canvasRef.current) return; let width = canvasRef.current.offsetWidth || 300; const doublePi = Math.PI * 2; let currentPhi = 0; let currentTheta = 0; const animationFrame: number | null = null; const onResize = () => { if (canvasRef.current) { width = canvasRef.current.offsetWidth || 300; } }; window.addEventListener('resize', onResize); try { globeRef.current = createGlobe(canvasRef.current, { devicePixelRatio: 2, width: width * 2, height: width * 2, phi: 0, theta: 0, dark: 1, diffuse: 1.2, mapSamples: 16000, mapBrightness: 6, baseColor: baseColor || [0.3, 0.3, 0.3], markerColor: markerColor || [0.1, 0.8, 1], glowColor: glowColor || [1, 1, 1], markers: markers || [], scale: scale || 1, onRender: (state) => { if (!state) return; if (autoRotate && !pointerInteracting.current && !focusRef.current) { phiRef.current += 0.01; } if (focusRef.current) { const [focusPhi, focusTheta] = focusRef.current; const distPositive = (focusPhi - currentPhi + doublePi) % doublePi; const distNegative = (currentPhi - focusPhi + doublePi) % doublePi; currentPhi += distPositive < distNegative ? distPositive * 0.08 : -distNegative * 0.08; currentTheta = currentTheta * 0.92 + focusTheta * 0.08; } else { currentPhi = phiRef.current + r.get(); } state.phi = currentPhi; state.theta = focusRef.current ? currentTheta : 0; state.width = width * 2; state.height = width * 2; }, }); if (canvasRef.current) { setTimeout(() => { if (canvasRef.current) canvasRef.current.style.opacity = '1'; }, 100); } } catch (error) { console.error('Error creating globe:', error); } return () => { if (globeRef.current) { globeRef.current.destroy(); globeRef.current = null; } window.removeEventListener('resize', onResize); if (animationFrame) { cancelAnimationFrame(animationFrame); } }; }, [ baseColor, markerColor, glowColor, markers, scale, r, autoRotate, isVisible, ]); 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","@react-spring/web",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-spring%2Fweb","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":"@react-spring/web"}]]}]}],["$","li","cobe",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cobe","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":"cobe"}]]}]}]]}],["$","$L50",null,{"namespace":"@scrollxui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/globe.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]