@zendir/ui 0.1.8 → 0.1.9

package/dist/react/3d/EarthViewer.js

@@ -1,836 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useEffect, useState, useCallback } from "react";
-import { AstroIcon } from "../core/AstroIcon.js";
-import { GroundTrackMap } from "../charts/GroundTrackMap.js";
-import atmosphereVertexShader from "../../shaders/atmosphere.vert.js";
-import atmosphereFragmentShader from "../../shaders/atmosphere.frag.js";
-import starsVertexShader from "../../shaders/stars.vert.js";
-import starsFragmentShader from "../../shaders/stars.frag.js";
-import { loadThree } from "./threeLoader.js";
-import { useTheme } from "../theme/ThemeProvider.js";
-function checkWebGLCapabilities() {
-  try {
-    const canvas = document.createElement("canvas");
-    const gl2 = canvas.getContext("webgl2");
-    if (gl2) {
-      return {
-        available: true,
-        version: 2,
-        maxTextureSize: gl2.getParameter(gl2.MAX_TEXTURE_SIZE)
-      };
-    }
-    const gl = canvas.getContext("webgl");
-    if (gl) {
-      return {
-        available: true,
-        version: 1,
-        maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE)
-      };
-    }
-  } catch {
-  }
-  return { available: false, version: 0, maxTextureSize: 0 };
-}
-const EARTH_RADIUS = 3e3;
-const EARTH_RADIUS_KM = 6371;
-const KM_TO_SCENE = EARTH_RADIUS / EARTH_RADIUS_KM;
-const DEG_TO_RAD = Math.PI / 180;
-function latLonAltToCartesian(lat, lon, altKm = 0) {
-  const r = EARTH_RADIUS + altKm * KM_TO_SCENE;
-  const phi = (90 - lat) * DEG_TO_RAD;
-  const theta = (lon + 180) * DEG_TO_RAD;
-  const x = -r * Math.sin(phi) * Math.cos(theta);
-  const y = r * Math.cos(phi);
-  const z = r * Math.sin(phi) * Math.sin(theta);
-  return [x, y, z];
-}
-function EarthViewer({
-  spacecraft = [],
-  groundStations = [],
-  groundTrack = [],
-  selectedSpacecraftId,
-  width = "100%",
-  height = 400,
-  autoRotate = true,
-  showAtmosphere = true,
-  showOrbits = true,
-  showVisibilityCones = false,
-  onSpacecraftClick,
-  onGroundStationClick,
-  className = "",
-  focusTarget,
-  transitionDuration = 2e3,
-  autoOrbit = false
-}) {
-  const { tokens: _tokens } = useTheme();
-  const containerRef = useRef(null);
-  const rendererRef = useRef(null);
-  const sceneRef = useRef(null);
-  const cameraRef = useRef(null);
-  const earthRef = useRef(null);
-  const controlsRef = useRef(null);
-  const raycasterRef = useRef(null);
-  const mouseRef = useRef(null);
-  const animationRef = useRef(null);
-  const starsMaterialRef = useRef(null);
-  const timeRef = useRef(0);
-  const isUserInteractingRef = useRef(false);
-  const focusTransitionRef = useRef(null);
-  const orbitAngleRef = useRef(0);
-  const lastFocusTargetRef = useRef(null);
-  const isAnimatingRef = useRef(false);
-  const autoRotateRef = useRef(autoRotate);
-  const autoOrbitRef = useRef(autoOrbit);
-  const focusTargetRef = useRef(focusTarget);
-  useEffect(() => {
-    autoRotateRef.current = autoRotate;
-  }, [autoRotate]);
-  useEffect(() => {
-    autoOrbitRef.current = autoOrbit;
-  }, [autoOrbit]);
-  useEffect(() => {
-    focusTargetRef.current = focusTarget;
-  }, [focusTarget]);
-  const [webglCapabilities] = useState(() => checkWebGLCapabilities());
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [threeLoaded, setThreeLoaded] = useState(false);
-  const [THREE, setTHREE] = useState(null);
-  const [OrbitControlsClass, setOrbitControlsClass] = useState(null);
-  const [hoveredObject, setHoveredObject] = useState(null);
-  useEffect(() => {
-    if (!webglCapabilities.available) {
-      setIsLoading(false);
-      return;
-    }
-    loadThree().then(({ THREE: threeModule, OrbitControls: controls }) => {
-      setTHREE(threeModule);
-      setOrbitControlsClass(() => controls);
-      setThreeLoaded(true);
-    }).catch((err) => {
-      setError("Failed to load 3D library");
-      setIsLoading(false);
-    });
-  }, [webglCapabilities.available]);
-  const initScene = useCallback(() => {
-    if (!THREE || !containerRef.current || !OrbitControlsClass) return;
-    const container = containerRef.current;
-    const rect = container.getBoundingClientRect();
-    const w = rect.width;
-    const h = height;
-    const scene = new THREE.Scene();
-    sceneRef.current = scene;
-    const camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 1e5);
-    camera.position.set(0, 0, 1e4);
-    cameraRef.current = camera;
-    const renderer = new THREE.WebGLRenderer({
-      antialias: true,
-      alpha: true,
-      powerPreference: "high-performance",
-      preserveDrawingBuffer: true
-      // Prevents flickering from buffer swaps
-    });
-    renderer.setSize(w, h);
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    container.appendChild(renderer.domElement);
-    rendererRef.current = renderer;
-    const controls = new OrbitControlsClass(camera, renderer.domElement);
-    controls.enableDamping = true;
-    controls.dampingFactor = 0.05;
-    controls.minDistance = 4500;
-    controls.maxDistance = 2e4;
-    controls.enablePan = false;
-    let interactionTimer;
-    const handleControlStart = () => {
-      isUserInteractingRef.current = true;
-    };
-    const handleControlEnd = () => {
-      clearTimeout(interactionTimer);
-      interactionTimer = setTimeout(() => {
-        isUserInteractingRef.current = false;
-      }, 3e3);
-    };
-    controls.addEventListener("start", handleControlStart);
-    controls.addEventListener("end", handleControlEnd);
-    controlsRef.current = controls;
-    raycasterRef.current = new THREE.Raycaster();
-    mouseRef.current = new THREE.Vector2();
-    const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 64, 32);
-    const earthMaterial = new THREE.MeshPhongMaterial({
-      color: 2245802,
-      shininess: 10
-    });
-    const textureLoader = new THREE.TextureLoader();
-    textureLoader.load(
-      "/world.topo.jpg",
-      (texture) => {
-        texture.wrapS = THREE.RepeatWrapping;
-        texture.wrapT = THREE.ClampToEdgeWrapping;
-        texture.minFilter = THREE.LinearFilter;
-        texture.magFilter = THREE.LinearFilter;
-        texture.flipY = true;
-        earthMaterial.map = texture;
-        earthMaterial.needsUpdate = true;
-        setIsLoading(false);
-      },
-      void 0,
-      () => {
-        setIsLoading(false);
-      }
-    );
-    const earth = new THREE.Mesh(earthGeometry, earthMaterial);
-    earth.rotation.y = -Math.PI / 2 + Math.PI;
-    scene.add(earth);
-    earthRef.current = earth;
-    if (showAtmosphere) {
-      const atmosphereGeometry = new THREE.SphereGeometry(EARTH_RADIUS * 1.25, 24, 12);
-      const atmosphereMaterial = new THREE.ShaderMaterial({
-        vertexShader: atmosphereVertexShader,
-        fragmentShader: atmosphereFragmentShader,
-        blending: THREE.AdditiveBlending,
-        side: THREE.BackSide,
-        transparent: true,
-        depthWrite: false
-      });
-      const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
-      atmosphere.rotation.y = -Math.PI / 2;
-      scene.add(atmosphere);
-    }
-    const starsCount = 5e3;
-    const starsGeometry = new THREE.BufferGeometry();
-    const starsPositions = new Float32Array(starsCount * 3);
-    const starsOpacities = new Float32Array(starsCount);
-    for (let i = 0; i < starsCount * 3; i += 3) {
-      const radius = 5e4 + Math.random() * 5e4;
-      const theta = Math.random() * Math.PI * 2;
-      const phi = Math.acos(2 * Math.random() - 1);
-      starsPositions[i] = radius * Math.sin(phi) * Math.cos(theta);
-      starsPositions[i + 1] = radius * Math.sin(phi) * Math.sin(theta);
-      starsPositions[i + 2] = radius * Math.cos(phi);
-      starsOpacities[i / 3] = Math.random();
-    }
-    starsGeometry.setAttribute("position", new THREE.BufferAttribute(starsPositions, 3));
-    starsGeometry.setAttribute("opacity", new THREE.BufferAttribute(starsOpacities, 1));
-    const starsMaterial = new THREE.ShaderMaterial({
-      uniforms: { time: { value: 0 } },
-      vertexShader: starsVertexShader,
-      fragmentShader: starsFragmentShader,
-      transparent: true,
-      depthWrite: false,
-      blending: THREE.AdditiveBlending
-    });
-    starsMaterialRef.current = starsMaterial;
-    const stars = new THREE.Points(starsGeometry, starsMaterial);
-    scene.add(stars);
-    const ambientLight = new THREE.AmbientLight(4210752, 0.6);
-    scene.add(ambientLight);
-    const sunLight = new THREE.DirectionalLight(16777215, 1.2);
-    sunLight.position.set(1e4, 5e3, 1e4);
-    scene.add(sunLight);
-    return () => {
-      clearTimeout(interactionTimer);
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-      controls.removeEventListener("start", handleControlStart);
-      controls.removeEventListener("end", handleControlEnd);
-      controls.dispose();
-      renderer.dispose();
-      if (container.contains(renderer.domElement)) {
-        container.removeChild(renderer.domElement);
-      }
-    };
-  }, [THREE, OrbitControlsClass, height, showAtmosphere]);
-  const updateSceneObjects = useCallback(() => {
-    if (!THREE || !sceneRef.current) return;
-    const scene = sceneRef.current;
-    const toRemove = scene.children.filter(
-      (obj) => {
-        var _a, _b, _c, _d;
-        return ((_a = obj.userData) == null ? void 0 : _a.isSpacecraft) || ((_b = obj.userData) == null ? void 0 : _b.isGroundStation) || ((_c = obj.userData) == null ? void 0 : _c.isOrbit) || ((_d = obj.userData) == null ? void 0 : _d.isVisibilityCone);
-      }
-    );
-    toRemove.forEach((obj) => {
-      if (obj.geometry) obj.geometry.dispose();
-      if (obj.material) obj.material.dispose();
-      scene.remove(obj);
-    });
-    spacecraft.forEach((sc) => {
-      const [x, y, z] = latLonAltToCartesian(sc.latitude, sc.longitude, sc.altitude);
-      const isSelected = sc.id === selectedSpacecraftId;
-      const geometry = new THREE.SphereGeometry(isSelected ? 80 : 55, 12, 12);
-      const material = new THREE.MeshBasicMaterial({
-        color: isSelected ? 16766720 : 65416
-      });
-      const marker = new THREE.Mesh(geometry, material);
-      marker.position.set(x, y, z);
-      marker.userData = {
-        isSpacecraft: true,
-        spacecraftId: sc.id,
-        data: sc
-      };
-      scene.add(marker);
-      const glowGeometry = new THREE.RingGeometry(isSelected ? 100 : 80, isSelected ? 130 : 100, 16);
-      const glowMaterial = new THREE.MeshBasicMaterial({
-        color: isSelected ? 16766720 : 65416,
-        transparent: true,
-        opacity: 0.4,
-        side: THREE.DoubleSide
-      });
-      const glow = new THREE.Mesh(glowGeometry, glowMaterial);
-      glow.position.set(x, y, z);
-      glow.lookAt(0, 0, 0);
-      glow.userData = { isSpacecraft: true, isGlow: true };
-      scene.add(glow);
-      const lineGeometry = new THREE.BufferGeometry().setFromPoints([
-        new THREE.Vector3(0, 0, 0),
-        new THREE.Vector3(x, y, z)
-      ]);
-      const lineMaterial = new THREE.LineBasicMaterial({
-        color: isSelected ? 16766720 : 65416,
-        transparent: true,
-        opacity: 0.12
-      });
-      const line = new THREE.Line(lineGeometry, lineMaterial);
-      line.userData = { isSpacecraft: true, isLine: true };
-      scene.add(line);
-    });
-    groundStations.forEach((gs) => {
-      const [x, y, z] = latLonAltToCartesian(gs.latitude, gs.longitude, 0);
-      const geometry = new THREE.ConeGeometry(45, 90, 4);
-      const material = new THREE.MeshBasicMaterial({ color: 65535 });
-      const marker = new THREE.Mesh(geometry, material);
-      marker.position.set(x, y, z);
-      marker.lookAt(0, 0, 0);
-      marker.rotateX(Math.PI / 2);
-      marker.userData = {
-        isGroundStation: true,
-        stationId: gs.id,
-        data: gs
-      };
-      scene.add(marker);
-      const ringGeometry = new THREE.RingGeometry(55, 80, 16);
-      const ringMaterial = new THREE.MeshBasicMaterial({
-        color: 65535,
-        transparent: true,
-        opacity: 0.5,
-        side: THREE.DoubleSide
-      });
-      const ring = new THREE.Mesh(ringGeometry, ringMaterial);
-      ring.position.set(x, y, z);
-      ring.lookAt(0, 0, 0);
-      ring.userData = { isGroundStation: true, isRing: true };
-      scene.add(ring);
-      if (showVisibilityCones) {
-        const coneHeight = 1200;
-        const coneRadius = 600;
-        const coneGeometry = new THREE.ConeGeometry(coneRadius, coneHeight, 16, 1, true);
-        const coneMaterial = new THREE.MeshBasicMaterial({
-          color: 65535,
-          transparent: true,
-          opacity: 0.06,
-          side: THREE.DoubleSide
-        });
-        const cone = new THREE.Mesh(coneGeometry, coneMaterial);
-        cone.position.set(x, y, z);
-        cone.lookAt(0, 0, 0);
-        cone.rotateX(-Math.PI / 2);
-        cone.translateY(coneHeight / 2);
-        cone.userData = { isVisibilityCone: true };
-        scene.add(cone);
-      }
-    });
-    if (showOrbits && groundTrack.length > 1) {
-      const points = [];
-      groundTrack.forEach((pt, i) => {
-        const alt = pt.alt || (spacecraft.length > 0 ? spacecraft[0].altitude : 400);
-        const [x, y, z] = latLonAltToCartesian(pt.latitude, pt.longitude, alt);
-        if (i > 0) {
-          const prevPt = groundTrack[i - 1];
-          const lonDiff = Math.abs(pt.longitude - prevPt.longitude);
-          if (lonDiff > 180) {
-            if (points.length > 1) {
-              const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
-              const lineMaterial = new THREE.LineBasicMaterial({
-                color: 2282478,
-                transparent: true,
-                opacity: 0.7
-              });
-              const line = new THREE.Line(lineGeometry, lineMaterial);
-              line.userData = { isOrbit: true };
-              scene.add(line);
-            }
-            points.length = 0;
-          }
-        }
-        points.push(new THREE.Vector3(x, y, z));
-      });
-      if (points.length > 1) {
-        const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
-        const lineMaterial = new THREE.LineBasicMaterial({
-          color: 2282478,
-          transparent: true,
-          opacity: 0.7
-        });
-        const line = new THREE.Line(lineGeometry, lineMaterial);
-        line.userData = { isOrbit: true };
-        scene.add(line);
-      }
-    }
-  }, [THREE, spacecraft, groundStations, groundTrack, selectedSpacecraftId, showOrbits, showVisibilityCones]);
-  const handleMouseMove = useCallback((event) => {
-    if (!containerRef.current || !raycasterRef.current || !cameraRef.current || !sceneRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    const x = (event.clientX - rect.left) / rect.width * 2 - 1;
-    const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
-    mouseRef.current.set(x, y);
-    raycasterRef.current.setFromCamera(mouseRef.current, cameraRef.current);
-    const interactables = sceneRef.current.children.filter(
-      (obj) => {
-        var _a, _b, _c, _d, _e;
-        return ((_a = obj.userData) == null ? void 0 : _a.isSpacecraft) && !((_b = obj.userData) == null ? void 0 : _b.isGlow) && !((_c = obj.userData) == null ? void 0 : _c.isLine) || ((_d = obj.userData) == null ? void 0 : _d.isGroundStation) && !((_e = obj.userData) == null ? void 0 : _e.isRing);
-      }
-    );
-    const intersects = raycasterRef.current.intersectObjects(interactables);
-    if (intersects.length > 0) {
-      const hit = intersects[0].object;
-      const userData = hit.userData;
-      if (userData.isSpacecraft) {
-        const sc = userData.data;
-        setHoveredObject({
-          type: "spacecraft",
-          id: userData.spacecraftId,
-          name: (sc == null ? void 0 : sc.name) || userData.spacecraftId,
-          data: sc,
-          screenX: event.clientX - rect.left,
-          screenY: event.clientY - rect.top
-        });
-      } else if (userData.isGroundStation) {
-        const gs = userData.data;
-        setHoveredObject({
-          type: "groundStation",
-          id: userData.stationId,
-          name: (gs == null ? void 0 : gs.name) || userData.stationId,
-          data: gs,
-          screenX: event.clientX - rect.left,
-          screenY: event.clientY - rect.top
-        });
-      }
-      if (containerRef.current) {
-        containerRef.current.style.cursor = "pointer";
-      }
-    } else {
-      setHoveredObject(null);
-      if (containerRef.current) {
-        containerRef.current.style.cursor = "grab";
-      }
-    }
-  }, []);
-  const handleClick = useCallback((event) => {
-    if (!containerRef.current || !raycasterRef.current || !cameraRef.current || !sceneRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    const x = (event.clientX - rect.left) / rect.width * 2 - 1;
-    const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
-    mouseRef.current.set(x, y);
-    raycasterRef.current.setFromCamera(mouseRef.current, cameraRef.current);
-    const interactables = sceneRef.current.children.filter(
-      (obj) => {
-        var _a, _b, _c, _d, _e;
-        return ((_a = obj.userData) == null ? void 0 : _a.isSpacecraft) && !((_b = obj.userData) == null ? void 0 : _b.isGlow) && !((_c = obj.userData) == null ? void 0 : _c.isLine) || ((_d = obj.userData) == null ? void 0 : _d.isGroundStation) && !((_e = obj.userData) == null ? void 0 : _e.isRing);
-      }
-    );
-    const intersects = raycasterRef.current.intersectObjects(interactables);
-    if (intersects.length > 0) {
-      const hit = intersects[0].object;
-      const userData = hit.userData;
-      if (userData.isSpacecraft && onSpacecraftClick) {
-        onSpacecraftClick(userData.data);
-      } else if (userData.isGroundStation && onGroundStationClick) {
-        onGroundStationClick(userData.data);
-      }
-    }
-  }, [onSpacecraftClick, onGroundStationClick]);
-  useEffect(() => {
-    if (!THREE || !cameraRef.current || !controlsRef.current || !focusTarget) return;
-    const targetKey = focusTarget.id || focusTarget.name || JSON.stringify(focusTarget);
-    const lastKey = lastFocusTargetRef.current ? lastFocusTargetRef.current.id || lastFocusTargetRef.current.name || JSON.stringify(lastFocusTargetRef.current) : null;
-    if (targetKey === lastKey) return;
-    lastFocusTargetRef.current = focusTarget;
-    const camera = cameraRef.current;
-    const controls = controlsRef.current;
-    let targetLat = 0;
-    let targetLon = 0;
-    let targetZoom = 2;
-    if (focusTarget.latitude !== void 0 && focusTarget.longitude !== void 0) {
-      targetLat = focusTarget.latitude;
-      targetLon = focusTarget.longitude;
-      targetZoom = focusTarget.zoom ?? 2;
-    } else if (focusTarget.type === "spacecraft" && focusTarget.id) {
-      const sc = spacecraft.find((s) => s.id === focusTarget.id);
-      if (sc) {
-        targetLat = sc.latitude;
-        targetLon = sc.longitude;
-        targetZoom = 2.5;
-      }
-    } else if (focusTarget.type === "groundStation" && focusTarget.id) {
-      const gs = groundStations.find((g) => g.id === focusTarget.id);
-      if (gs) {
-        targetLat = gs.latitude;
-        targetLon = gs.longitude;
-        targetZoom = 2;
-      }
-    } else if (focusTarget.type === "overview") {
-      targetLat = 0;
-      targetLon = 0;
-      targetZoom = 1;
-    }
-    const [targetX, targetY, targetZ] = latLonAltToCartesian(targetLat, targetLon, 0);
-    const baseDistance = 1e4;
-    const zoomFactor = 1 / targetZoom;
-    const cameraDistance = baseDistance * zoomFactor;
-    const offset = new THREE.Vector3(targetX, targetY, targetZ).normalize().multiplyScalar(cameraDistance);
-    const targetPos = [
-      targetX + offset.x,
-      targetY + offset.y,
-      targetZ + offset.z
-    ];
-    const startPos = [
-      camera.position.x,
-      camera.position.y,
-      camera.position.z
-    ];
-    const startTarget = [
-      controls.target.x,
-      controls.target.y,
-      controls.target.z
-    ];
-    const targetTarget = [targetX, targetY, targetZ];
-    focusTransitionRef.current = {
-      startTime: Date.now(),
-      startPos,
-      targetPos,
-      startTarget,
-      targetTarget,
-      duration: transitionDuration,
-      isActive: true
-    };
-    orbitAngleRef.current = 0;
-  }, [THREE, focusTarget, transitionDuration, spacecraft, groundStations]);
-  const animate = useCallback(() => {
-    var _a;
-    if (!isAnimatingRef.current) return;
-    if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return;
-    const camera = cameraRef.current;
-    const controls = controlsRef.current;
-    if (focusTransitionRef.current && focusTransitionRef.current.isActive) {
-      const transition = focusTransitionRef.current;
-      const elapsed = Date.now() - transition.startTime;
-      const progress = Math.min(elapsed / transition.duration, 1);
-      const easeProgress = 1 - Math.pow(1 - progress, 3);
-      camera.position.x = transition.startPos[0] + (transition.targetPos[0] - transition.startPos[0]) * easeProgress;
-      camera.position.y = transition.startPos[1] + (transition.targetPos[1] - transition.startPos[1]) * easeProgress;
-      camera.position.z = transition.startPos[2] + (transition.targetPos[2] - transition.startPos[2]) * easeProgress;
-      controls.target.x = transition.startTarget[0] + (transition.targetTarget[0] - transition.startTarget[0]) * easeProgress;
-      controls.target.y = transition.startTarget[1] + (transition.targetTarget[1] - transition.startTarget[1]) * easeProgress;
-      controls.target.z = transition.startTarget[2] + (transition.targetTarget[2] - transition.startTarget[2]) * easeProgress;
-      if (progress >= 1) {
-        transition.isActive = false;
-      }
-    }
-    const currentFocusTarget = focusTargetRef.current;
-    const currentAutoOrbit = autoOrbitRef.current;
-    const currentAutoRotate = autoRotateRef.current;
-    if (currentAutoOrbit && currentFocusTarget && !((_a = focusTransitionRef.current) == null ? void 0 : _a.isActive) && !isUserInteractingRef.current) {
-      orbitAngleRef.current += 5e-3;
-      if (currentFocusTarget.latitude !== void 0 && currentFocusTarget.longitude !== void 0) {
-        const [targetX, targetY, targetZ] = latLonAltToCartesian(
-          currentFocusTarget.latitude,
-          currentFocusTarget.longitude,
-          0
-        );
-        const baseDistance = 1e4 / (currentFocusTarget.zoom ?? 2);
-        const orbitRadius = baseDistance * 0.3;
-        camera.position.x = targetX + Math.cos(orbitAngleRef.current) * orbitRadius;
-        camera.position.y = targetY + Math.sin(orbitAngleRef.current * 0.5) * orbitRadius * 0.5;
-        camera.position.z = targetZ + Math.sin(orbitAngleRef.current) * orbitRadius;
-        controls.target.set(targetX, targetY, targetZ);
-      }
-    }
-    if (controls) {
-      controls.update();
-    }
-    timeRef.current += 0.01;
-    if (starsMaterialRef.current) {
-      starsMaterialRef.current.uniforms.time.value = timeRef.current;
-    }
-    if (currentAutoRotate && earthRef.current && !isUserInteractingRef.current && !currentAutoOrbit) {
-      earthRef.current.rotation.y += 6e-4;
-    }
-    rendererRef.current.render(sceneRef.current, camera);
-    animationRef.current = requestAnimationFrame(animate);
-  }, []);
-  useEffect(() => {
-    if (!threeLoaded || !webglCapabilities.available || !OrbitControlsClass) return;
-    isAnimatingRef.current = false;
-    if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current);
-      animationRef.current = null;
-    }
-    const cleanup = initScene();
-    isAnimatingRef.current = true;
-    animate();
-    return () => {
-      isAnimatingRef.current = false;
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-        animationRef.current = null;
-      }
-      cleanup == null ? void 0 : cleanup();
-    };
-  }, [threeLoaded, webglCapabilities.available, OrbitControlsClass, initScene, animate]);
-  useEffect(() => {
-    if (threeLoaded) {
-      updateSceneObjects();
-    }
-  }, [threeLoaded, updateSceneObjects]);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container || !threeLoaded) return;
-    container.addEventListener("mousemove", handleMouseMove);
-    container.addEventListener("click", handleClick);
-    return () => {
-      container.removeEventListener("mousemove", handleMouseMove);
-      container.removeEventListener("click", handleClick);
-    };
-  }, [threeLoaded, handleMouseMove, handleClick]);
-  useEffect(() => {
-    const handleResize = () => {
-      if (!containerRef.current || !rendererRef.current || !cameraRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      cameraRef.current.aspect = rect.width / height;
-      cameraRef.current.updateProjectionMatrix();
-      rendererRef.current.setSize(rect.width, height);
-    };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [height]);
-  if (!webglCapabilities.available || error) {
-    return /* @__PURE__ */ jsxs("div", { className: `zendir-earth-viewer fallback ${className}`, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx(
-        GroundTrackMap,
-        {
-          groundTrack,
-          groundStations,
-          width,
-          height
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { style: {
-        position: "absolute",
-        bottom: 8,
-        right: 8,
-        backgroundColor: "rgba(0,0,0,0.7)",
-        color: "#d1d5db",
-        padding: "4px 8px",
-        borderRadius: 4,
-        fontSize: 10
-      }, children: error || "2D Mode (WebGL unavailable)" })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `zendir-earth-viewer ${className}`,
-      style: {
-        width,
-        height,
-        position: "relative",
-        backgroundColor: "#030508",
-        borderRadius: 8,
-        overflow: "hidden",
-        cursor: "grab"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: containerRef,
-            style: { width: "100%", height: "100%" }
-          }
-        ),
-        isLoading && /* @__PURE__ */ jsx("div", { style: {
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          color: "#22d3ee",
-          fontSize: 14,
-          fontFamily: "ui-monospace, monospace"
-        }, children: "Loading 3D Earth..." }),
-        !isLoading && /* @__PURE__ */ jsxs("div", { style: {
-          position: "absolute",
-          top: 8,
-          left: 8,
-          backgroundColor: "rgba(0,0,0,0.75)",
-          color: "#e4e4e7",
-          padding: "10px 14px",
-          borderRadius: 8,
-          fontSize: 11,
-          fontFamily: "ui-monospace, monospace",
-          display: "flex",
-          flexDirection: "column",
-          gap: 5,
-          backdropFilter: "blur(4px)"
-        }, children: [
-          spacecraft.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            /* @__PURE__ */ jsx("span", { style: { color: "#00ff88", fontSize: 14 }, children: "●" }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              spacecraft.length,
-              " spacecraft"
-            ] })
-          ] }),
-          groundStations.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            /* @__PURE__ */ jsx("span", { style: { color: "#00ffff", fontSize: 12 }, children: "▲" }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              groundStations.length,
-              " ground stations"
-            ] })
-          ] })
-        ] }),
-        !isLoading && /* @__PURE__ */ jsx("div", { style: {
-          position: "absolute",
-          bottom: 8,
-          right: 8,
-          backgroundColor: "rgba(0,0,0,0.6)",
-          color: "#b8bcc8",
-          padding: "5px 10px",
-          borderRadius: 6,
-          fontSize: 9,
-          fontFamily: "system-ui"
-        }, children: "Drag to rotate • Scroll to zoom" }),
-        hoveredObject && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: Math.min(hoveredObject.screenX + 15, (typeof width === "number" ? width : 400) - 200),
-              top: Math.max(hoveredObject.screenY - 10, 10),
-              backgroundColor: "rgba(9, 9, 11, 0.95)",
-              color: "#e4e4e7",
-              padding: "12px 16px",
-              borderRadius: 10,
-              fontSize: 11,
-              fontFamily: "ui-monospace, monospace",
-              border: hoveredObject.type === "spacecraft" ? "1px solid #22c55e" : "1px solid #22d3ee",
-              boxShadow: "0 12px 40px rgba(0,0,0,0.6)",
-              pointerEvents: "none",
-              zIndex: 100,
-              minWidth: 180,
-              backdropFilter: "blur(8px)"
-            },
-            children: [
-              hoveredObject.type === "spacecraft" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("div", { style: { fontWeight: 500, marginBottom: 8, color: "#22c55e", fontSize: "0.8125rem", display: "flex", alignItems: "center", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx(AstroIcon, { name: "satellite", size: "small", label: "" }),
-                  " ",
-                  hoveredObject.name
-                ] }),
-                hoveredObject.data && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 4 }, children: [
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx("span", { style: {
-                      color: "#b8bcc8"
-                      /* WCAG: improved contrast */
-                    }, children: "Latitude" }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      hoveredObject.data.latitude.toFixed(3),
-                      "°"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx("span", { style: {
-                      color: "#b8bcc8"
-                      /* WCAG: improved contrast */
-                    }, children: "Longitude" }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      hoveredObject.data.longitude.toFixed(3),
-                      "°"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx("span", { style: {
-                      color: "#b8bcc8"
-                      /* WCAG: improved contrast */
-                    }, children: "Altitude" }),
-                    /* @__PURE__ */ jsxs("span", { style: { color: "#22d3ee" }, children: [
-                      hoveredObject.data.altitude.toFixed(1),
-                      " km"
-                    ] })
-                  ] }),
-                  hoveredObject.data.velocity && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx("span", { style: {
-                      color: "#b8bcc8"
-                      /* WCAG: improved contrast */
-                    }, children: "Velocity" }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      (hoveredObject.data.velocity || 0).toFixed(3),
-                      " km/s"
-                    ] })
-                  ] })
-                ] })
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("div", { style: { fontWeight: 500, marginBottom: 8, color: "#22d3ee", fontSize: "0.8125rem", display: "flex", alignItems: "center", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx(AstroIcon, { name: "antenna", size: "small", label: "" }),
-                  " ",
-                  hoveredObject.name
-                ] }),
-                hoveredObject.data && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 4 }, children: [
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx("span", { style: {
-                      color: "#b8bcc8"
-                      /* WCAG: improved contrast */
-                    }, children: "Latitude" }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      hoveredObject.data.latitude.toFixed(3),
-                      "°"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx("span", { style: {
-                      color: "#b8bcc8"
-                      /* WCAG: improved contrast */
-                    }, children: "Longitude" }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      hoveredObject.data.longitude.toFixed(3),
-                      "°"
-                    ] })
-                  ] }),
-                  hoveredObject.data.minElevation !== void 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx("span", { style: {
-                      color: "#b8bcc8"
-                      /* WCAG: improved contrast */
-                    }, children: "Min Elevation" }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      hoveredObject.data.minElevation,
-                      "°"
-                    ] })
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx("div", { style: {
-                marginTop: 8,
-                paddingTop: 8,
-                borderTop: "1px solid rgba(113,113,122,0.3)",
-                color: "#9ca3af",
-                fontSize: 9
-              }, children: "Click for details" })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  EarthViewer
-};
-//# sourceMappingURL=EarthViewer.js.map