@zendir/ui 0.1.8 → 0.1.10

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

@@ -1,1253 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback, useImperativeHandle } from "react";
-import { AstroIcon } from "../core/AstroIcon.js";
-import { SCENE_EARTH_RADIUS, latLonAltToCartesian, KM_TO_SCENE, easeOutCubic } from "./ZenSpace3DUtils.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 { ZenSpace3DCesium } from "./ZenSpace3DCesium.js";
-import { useTheme } from "../theme/ThemeProvider.js";
-const DEFAULT_LAYERS = {
-  planets: true,
-  moons: true,
-  satellites: true,
-  debris: false,
-  stations: true,
-  asteroids: false,
-  groundStations: true,
-  orbits: true,
-  labels: true,
-  constellations: false,
-  coverage: true,
-  atmosphere: true,
-  stars: true,
-  grid: false,
-  terminator: true
-};
-const CAMERA_TRANSITION_DURATION = 2e3;
-const STARS_COUNT = 5e3;
-const EARTH_SEGMENTS = 64;
-const EARTH_SEGMENTS_V = 32;
-const SPHERICAL_SUBDIVISIONS = 16;
-function checkWebGLCapabilities() {
-  try {
-    const canvas = document.createElement("canvas");
-    const gl2 = canvas.getContext("webgl2");
-    if (gl2) return { available: true, version: 2 };
-    const gl = canvas.getContext("webgl");
-    if (gl) return { available: true, version: 1 };
-  } catch {
-  }
-  return { available: false, version: 0 };
-}
-function slerp(v1, v2, t) {
-  const len1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y + v1.z * v1.z);
-  const len2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y + v2.z * v2.z);
-  if (len1 < 1e-4 || len2 < 1e-4) {
-    return { x: v1.x, y: v1.y, z: v1.z };
-  }
-  const n1 = { x: v1.x / len1, y: v1.y / len1, z: v1.z / len1 };
-  const n2 = { x: v2.x / len2, y: v2.y / len2, z: v2.z / len2 };
-  let dot = n1.x * n2.x + n1.y * n2.y + n1.z * n2.z;
-  dot = Math.max(-1, Math.min(1, dot));
-  const theta = Math.acos(dot);
-  if (theta < 1e-3) {
-    return {
-      x: n1.x + t * (n2.x - n1.x),
-      y: n1.y + t * (n2.y - n1.y),
-      z: n1.z + t * (n2.z - n1.z)
-    };
-  }
-  const sinTheta = Math.sin(theta);
-  if (Math.abs(sinTheta) < 1e-4) {
-    return {
-      x: n1.x + t * (n2.x - n1.x),
-      y: n1.y + t * (n2.y - n1.y),
-      z: n1.z + t * (n2.z - n1.z)
-    };
-  }
-  const a = Math.sin((1 - t) * theta) / sinTheta;
-  const b = Math.sin(t * theta) / sinTheta;
-  return {
-    x: a * n1.x + b * n2.x,
-    y: a * n1.y + b * n2.y,
-    z: a * n1.z + b * n2.z
-  };
-}
-function subdivideSphericalPolygon(corners, subdivisions, radius) {
-  if (corners.length < 3 || subdivisions < 1 || radius <= 0) {
-    return corners;
-  }
-  const result = [];
-  for (let i = 0; i < corners.length; i++) {
-    const p1 = corners[i];
-    const p2 = corners[(i + 1) % corners.length];
-    if (!isFinite(p1.x) || !isFinite(p1.y) || !isFinite(p1.z) || !isFinite(p2.x) || !isFinite(p2.y) || !isFinite(p2.z)) {
-      continue;
-    }
-    for (let j = 0; j < subdivisions; j++) {
-      const t = j / subdivisions;
-      const interpolated = slerp(p1, p2, t);
-      if (!isFinite(interpolated.x) || !isFinite(interpolated.y) || !isFinite(interpolated.z)) {
-        continue;
-      }
-      const len = Math.sqrt(interpolated.x ** 2 + interpolated.y ** 2 + interpolated.z ** 2);
-      if (len < 1e-4) continue;
-      result.push({
-        x: interpolated.x / len * radius,
-        y: interpolated.y / len * radius,
-        z: interpolated.z / len * radius
-      });
-    }
-  }
-  return result.length > 0 ? result : corners;
-}
-function createSatelliteShape(THREE, category, size) {
-  const group = new THREE.Group();
-  if (category === "station") {
-    const geo = new THREE.BoxGeometry(size * 1.2, size * 0.6, size * 0.6);
-    const mat = new THREE.MeshBasicMaterial({ color: 13421772 });
-    group.add(new THREE.Mesh(geo, mat));
-    const panelGeo = new THREE.BoxGeometry(size * 2.5, size * 0.03, size * 0.6);
-    const panelMat = new THREE.MeshBasicMaterial({ color: 1723002 });
-    const leftPanel = new THREE.Mesh(panelGeo, panelMat);
-    leftPanel.position.x = -size * 1.5;
-    group.add(leftPanel);
-    const rightPanel = new THREE.Mesh(panelGeo, panelMat);
-    rightPanel.position.x = size * 1.5;
-    group.add(rightPanel);
-  } else if (category === "satellite") {
-    const geo = new THREE.BoxGeometry(size * 0.5, size * 0.5, size * 0.6);
-    const mat = new THREE.MeshBasicMaterial({ color: 11184810 });
-    group.add(new THREE.Mesh(geo, mat));
-    const panelGeo = new THREE.BoxGeometry(size * 1.2, size * 0.02, size * 0.4);
-    const panelMat = new THREE.MeshBasicMaterial({ color: 1718890 });
-    const leftPanel = new THREE.Mesh(panelGeo, panelMat);
-    leftPanel.position.x = -size * 0.7;
-    group.add(leftPanel);
-    const rightPanel = new THREE.Mesh(panelGeo, panelMat);
-    rightPanel.position.x = size * 0.7;
-    group.add(rightPanel);
-  } else if (category === "debris") {
-    const geo = new THREE.IcosahedronGeometry(size * 0.3, 0);
-    const mat = new THREE.MeshBasicMaterial({ color: 6710886 });
-    group.add(new THREE.Mesh(geo, mat));
-  } else {
-    const geo = new THREE.SphereGeometry(size * 0.4, 8, 6);
-    const mat = new THREE.MeshBasicMaterial({ color: 8947848 });
-    group.add(new THREE.Mesh(geo, mat));
-  }
-  return group;
-}
-const ZenSpace3D = forwardRef(
-  function ZenSpace3D2(props, ref) {
-    const [cesiumModule, setCesiumModule] = useState(null);
-    useEffect(() => {
-      import("cesium").then((m) => setCesiumModule(m)).catch(() => setCesiumModule(null));
-    }, []);
-    if (cesiumModule) {
-      return /* @__PURE__ */ jsx(ZenSpace3DCesium, { ref, cesium: cesiumModule, ...props });
-    }
-    return /* @__PURE__ */ jsx(ZenSpace3DThree, { ref, ...props });
-  }
-);
-const ZenSpace3DThree = forwardRef(
-  function ZenSpace3DThree2(props, ref) {
-    const {
-      satellites = [],
-      debris = [],
-      stations = [],
-      groundStations = [],
-      customObjects = [],
-      view = "earth-orbit",
-      focusedObjectId,
-      initialCamera,
-      sunDirection,
-      planetPositions,
-      visibilityCones = [],
-      satelliteCoverages = [],
-      overpasses: _overpasses = [],
-      orbitPaths = [],
-      orbitDesignArcs: _orbitDesignArcs = [],
-      communicationLinks = [],
-      showAxisHelper = false,
-      layers: layerOverrides,
-      showTools = true,
-      showInfoPanel = true,
-      width = "100%",
-      height = 600,
-      callbacks,
-      maxObjects = 1e4,
-      className = "",
-      style
-    } = props;
-    const { tokens: _tokens } = useTheme();
-    const [webglCapabilities] = useState(() => checkWebGLCapabilities());
-    const containerRef = useRef(null);
-    const rendererRef = useRef(null);
-    const sceneRef = useRef(null);
-    const cameraRef = useRef(null);
-    const controlsRef = useRef(null);
-    const animationRef = useRef(null);
-    const raycasterRef = useRef(null);
-    const mouseRef = useRef(null);
-    const earthRef = useRef(null);
-    const starsMaterialRef = useRef(null);
-    const atmosphereMaterialRef = useRef(null);
-    const objectsGroupRef = useRef(null);
-    const linksGroupRef = useRef(null);
-    const conesGroupRef = useRef(null);
-    const orbitsGroupRef = useRef(null);
-    const planetsGroupRef = useRef(null);
-    const timeRef = useRef(0);
-    const focusTransitionRef = useRef(null);
-    const isUserInteractingRef = useRef(false);
-    const objectMeshMapRef = useRef(/* @__PURE__ */ new Map());
-    const isAnimatingRef = useRef(false);
-    useRef(false);
-    const [THREE, setTHREE] = useState(null);
-    const threeRef = useRef(null);
-    threeRef.current = THREE;
-    const [OrbitControlsClass, setOrbitControlsClass] = useState(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [layers, setLayers] = useState({ ...DEFAULT_LAYERS, ...layerOverrides });
-    const [selection, setSelection] = useState({ selectedId: null, selectedObject: null, hoveredId: null });
-    const [hoverTooltip, setHoverTooltip] = useState({ visible: false, x: 0, y: 0, object: null });
-    const [currentView, setCurrentView] = useState(view);
-    const currentViewRef = useRef(view);
-    const effectiveLayers = useMemo(() => ({ ...layers, ...layerOverrides }), [layers, layerOverrides]);
-    useEffect(() => {
-      setCurrentView(view);
-      currentViewRef.current = view;
-    }, [view]);
-    useEffect(() => {
-      if (!webglCapabilities.available) {
-        setIsLoading(false);
-        return;
-      }
-      loadThree().then(({ THREE: threeModule, OrbitControls: controls }) => {
-        setTHREE(threeModule);
-        setOrbitControlsClass(() => controls);
-      }).catch((err) => {
-        setError("Failed to load 3D library");
-        setIsLoading(false);
-      });
-    }, [webglCapabilities.available]);
-    const initScene = useCallback(() => {
-      var _a, _b;
-      if (!THREE || !containerRef.current || !OrbitControlsClass) return;
-      if (rendererRef.current) {
-        isAnimatingRef.current = false;
-        if (animationRef.current) {
-          cancelAnimationFrame(animationRef.current);
-          animationRef.current = null;
-        }
-        (_a = controlsRef.current) == null ? void 0 : _a.dispose();
-        rendererRef.current.dispose();
-        if ((_b = containerRef.current) == null ? void 0 : _b.contains(rendererRef.current.domElement)) {
-          containerRef.current.removeChild(rendererRef.current.domElement);
-        }
-      }
-      const container = containerRef.current;
-      const rect = container.getBoundingClientRect();
-      const w = rect.width;
-      const h = typeof height === "number" ? height : rect.height;
-      const scene = new THREE.Scene();
-      sceneRef.current = scene;
-      const viewMode = currentViewRef.current;
-      const farClip = viewMode === "solar-system" ? 1e6 : 1e5;
-      const camera = new THREE.PerspectiveCamera(45, w / h, 1, farClip);
-      const initialDistance = viewMode === "solar-system" ? 5e3 : 1e4;
-      camera.position.set(0, initialDistance * 0.3, initialDistance);
-      cameraRef.current = camera;
-      if (initialCamera == null ? void 0 : initialCamera.position) {
-        camera.position.set(initialCamera.position.x, initialCamera.position.y, initialCamera.position.z);
-      }
-      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.rotateSpeed = 0.5;
-      controls.minDistance = viewMode === "solar-system" ? 500 : 3050;
-      controls.maxDistance = viewMode === "solar-system" ? 1e5 : 25e3;
-      controls.enablePan = viewMode === "solar-system";
-      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();
-      objectsGroupRef.current = new THREE.Group();
-      objectsGroupRef.current.name = "objects";
-      scene.add(objectsGroupRef.current);
-      linksGroupRef.current = new THREE.Group();
-      linksGroupRef.current.name = "links";
-      scene.add(linksGroupRef.current);
-      conesGroupRef.current = new THREE.Group();
-      conesGroupRef.current.name = "cones";
-      scene.add(conesGroupRef.current);
-      orbitsGroupRef.current = new THREE.Group();
-      orbitsGroupRef.current.name = "orbits";
-      scene.add(orbitsGroupRef.current);
-      planetsGroupRef.current = new THREE.Group();
-      planetsGroupRef.current.name = "planets";
-      scene.add(planetsGroupRef.current);
-      if (viewMode === "solar-system") {
-        createSolarSystem(THREE, scene);
-      } else {
-        createEarth(THREE, scene);
-        createAtmosphere(THREE, scene);
-      }
-      createStars(THREE, scene);
-      createLighting(THREE, scene);
-      if (showAxisHelper && viewMode !== "solar-system") {
-        createAxisHelper(THREE, scene);
-      }
-      setIsLoading(false);
-      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, initialCamera, showAxisHelper]);
-    const createSolarSystem = useCallback((THREE2, _scene) => {
-      const planetsGroup = planetsGroupRef.current;
-      if (!planetsGroup) return;
-      const DISTANCE_SCALE = 5e-6;
-      const SIZE_SCALE = 0.01;
-      const sunRadius = 696340 * SIZE_SCALE;
-      const sunGeo = new THREE2.SphereGeometry(sunRadius, 32, 24);
-      const sunMat = new THREE2.MeshBasicMaterial({ color: 16768324 });
-      const sunMesh = new THREE2.Mesh(sunGeo, sunMat);
-      sunMesh.name = "sun";
-      sunMesh.userData = { objectId: "sun", planetId: "sun", isPlanet: true, isSelectable: true };
-      planetsGroup.add(sunMesh);
-      const glowGeo = new THREE2.SphereGeometry(sunRadius * 1.3, 24, 16);
-      const glowMat = new THREE2.MeshBasicMaterial({ color: 16755200, transparent: true, opacity: 0.2 });
-      planetsGroup.add(new THREE2.Mesh(glowGeo, glowMat));
-      const configs = [
-        { id: "mercury", color: 9205843, radius: 2439.7, distance: 579e5 },
-        { id: "venus", color: 16762441, radius: 6051.8, distance: 1082e5 },
-        { id: "earth", color: 7050198, radius: 6371, distance: 1496e5 },
-        { id: "mars", color: 12665870, radius: 3389.5, distance: 2279e5 },
-        { id: "jupiter", color: 14207645, radius: 69911, distance: 7785e5 },
-        { id: "saturn", color: 16045470, radius: 58232, distance: 1434e6 },
-        { id: "uranus", color: 13756391, radius: 25362, distance: 2871e6 },
-        { id: "neptune", color: 5987807, radius: 24622, distance: 4495e6 }
-      ];
-      configs.forEach((c) => {
-        const visualScale = c.distance < 3e8 ? 15 : 5;
-        const planetRadius = c.radius * SIZE_SCALE * visualScale;
-        const geo = new THREE2.SphereGeometry(planetRadius, 24, 16);
-        const mat = new THREE2.MeshPhongMaterial({ color: c.color, shininess: 30 });
-        const mesh = new THREE2.Mesh(geo, mat);
-        const orbitDist = c.distance * DISTANCE_SCALE;
-        mesh.position.x = orbitDist;
-        mesh.name = c.id;
-        mesh.userData = { objectId: c.id, planetId: c.id, isPlanet: true, isSelectable: true, data: { id: c.id, name: c.id.charAt(0).toUpperCase() + c.id.slice(1), category: "planet" } };
-        planetsGroup.add(mesh);
-        objectMeshMapRef.current.set(c.id, mesh);
-        if (c.id === "saturn") {
-          const ringGeo = new THREE2.RingGeometry(planetRadius * 1.4, planetRadius * 2.2, 32);
-          const ringMat = new THREE2.MeshBasicMaterial({ color: 13219990, transparent: true, opacity: 0.6, side: THREE2.DoubleSide });
-          const ring = new THREE2.Mesh(ringGeo, ringMat);
-          ring.rotation.x = Math.PI / 2.5;
-          ring.position.copy(mesh.position);
-          planetsGroup.add(ring);
-        }
-        const points = [];
-        for (let i = 0; i <= 64; i++) {
-          const angle = i / 64 * Math.PI * 2;
-          points.push(new THREE2.Vector3(orbitDist * Math.cos(angle), 0, orbitDist * Math.sin(angle)));
-        }
-        const orbitGeo = new THREE2.BufferGeometry().setFromPoints(points);
-        const orbitMat = new THREE2.LineBasicMaterial({ color: 4473958, transparent: true, opacity: 0.3 });
-        planetsGroup.add(new THREE2.Line(orbitGeo, orbitMat));
-      });
-      const sunLight = new THREE2.PointLight(16777198, 2, 1e5);
-      sunLight.position.set(0, 0, 0);
-      planetsGroup.add(sunLight);
-    }, []);
-    const createEarth = useCallback((THREE2, scene) => {
-      const earthGeometry = new THREE2.SphereGeometry(SCENE_EARTH_RADIUS, EARTH_SEGMENTS, EARTH_SEGMENTS_V);
-      const earthMaterial = new THREE2.MeshPhongMaterial({ color: 2245802, shininess: 10 });
-      const textureLoader = new THREE2.TextureLoader();
-      textureLoader.load("/world.topo.jpg", (texture) => {
-        texture.wrapS = THREE2.RepeatWrapping;
-        texture.wrapT = THREE2.ClampToEdgeWrapping;
-        texture.minFilter = THREE2.LinearFilter;
-        texture.magFilter = THREE2.LinearFilter;
-        earthMaterial.map = texture;
-        earthMaterial.needsUpdate = true;
-      }, void 0, () => {
-      });
-      const earth = new THREE2.Mesh(earthGeometry, earthMaterial);
-      earth.rotation.y = -Math.PI / 2 + Math.PI;
-      earth.name = "earth";
-      scene.add(earth);
-      earthRef.current = earth;
-    }, []);
-    const createAtmosphere = useCallback((THREE2, scene) => {
-      if (!effectiveLayers.atmosphere) return;
-      const defaultSunDir = new THREE2.Vector3(1, 0.3, 0.5).normalize();
-      const atmosphereGeometry = new THREE2.SphereGeometry(SCENE_EARTH_RADIUS * 1.15, 32, 16);
-      const atmosphereMaterial = new THREE2.ShaderMaterial({
-        uniforms: {
-          uSunDirection: { value: defaultSunDir }
-        },
-        vertexShader: atmosphereVertexShader,
-        fragmentShader: atmosphereFragmentShader,
-        blending: THREE2.AdditiveBlending,
-        side: THREE2.BackSide,
-        transparent: true,
-        depthWrite: false
-      });
-      const atmosphere = new THREE2.Mesh(atmosphereGeometry, atmosphereMaterial);
-      atmosphere.rotation.y = -Math.PI / 2;
-      atmosphere.name = "atmosphere";
-      scene.add(atmosphere);
-      atmosphereMaterialRef.current = atmosphereMaterial;
-    }, [effectiveLayers.atmosphere]);
-    const createStars = useCallback((THREE2, scene) => {
-      const starsGeometry = new THREE2.BufferGeometry();
-      const starsDist = currentView === "solar-system" ? 5e10 : 5e4;
-      const positions = new Float32Array(STARS_COUNT * 3);
-      const opacities = new Float32Array(STARS_COUNT);
-      for (let i = 0; i < STARS_COUNT; i++) {
-        const radius = starsDist + Math.random() * starsDist;
-        const theta = Math.random() * Math.PI * 2;
-        const phi = Math.acos(2 * Math.random() - 1);
-        positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
-        positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
-        positions[i * 3 + 2] = radius * Math.cos(phi);
-        opacities[i] = Math.random();
-      }
-      starsGeometry.setAttribute("position", new THREE2.BufferAttribute(positions, 3));
-      starsGeometry.setAttribute("opacity", new THREE2.BufferAttribute(opacities, 1));
-      const starsMaterial = new THREE2.ShaderMaterial({
-        uniforms: { time: { value: 0 } },
-        vertexShader: starsVertexShader,
-        fragmentShader: starsFragmentShader,
-        transparent: true,
-        depthWrite: false,
-        blending: THREE2.AdditiveBlending
-      });
-      scene.add(new THREE2.Points(starsGeometry, starsMaterial));
-      starsMaterialRef.current = starsMaterial;
-    }, [currentView]);
-    const createLighting = useCallback((THREE2, scene) => {
-      scene.add(new THREE2.AmbientLight(4210752, 0.6));
-      const sunLight = new THREE2.DirectionalLight(16777215, 1.2);
-      sunLight.position.set(1e4, 5e3, 1e4);
-      scene.add(sunLight);
-    }, []);
-    const createAxisHelper = useCallback((THREE2, scene) => {
-      const len = SCENE_EARTH_RADIUS * 1.5;
-      const group = new THREE2.Group();
-      [
-        { color: 16724787, dir: [1, 0, 0] },
-        { color: 3407667, dir: [0, 1, 0] },
-        { color: 3355647, dir: [0, 0, 1] }
-      ].forEach(({ color, dir }) => {
-        const points = [new THREE2.Vector3(0, 0, 0), new THREE2.Vector3(dir[0] * len, dir[1] * len, dir[2] * len)];
-        const geo = new THREE2.BufferGeometry().setFromPoints(points);
-        const mat = new THREE2.LineBasicMaterial({ color });
-        group.add(new THREE2.Line(geo, mat));
-      });
-      scene.add(group);
-    }, []);
-    const updateObjects = useCallback(() => {
-      if (!THREE || !objectsGroupRef.current || currentView === "solar-system") return;
-      const group = objectsGroupRef.current;
-      const meshMap = objectMeshMapRef.current;
-      while (group.children.length > 0) {
-        const child = group.children[0];
-        group.remove(child);
-      }
-      meshMap.clear();
-      const allObjects = [...satellites, ...debris, ...stations, ...customObjects];
-      allObjects.slice(0, maxObjects).forEach((obj) => {
-        const categoryLayer = obj.category === "satellite" ? "satellites" : obj.category === "debris" ? "debris" : obj.category === "station" ? "stations" : "satellites";
-        if (!effectiveLayers[categoryLayer]) return;
-        let size = 50;
-        if (obj.category === "station") size = 100;
-        else if (obj.category === "debris") size = 25;
-        const satelliteGroup = createSatelliteShape(THREE, obj.category, size);
-        satelliteGroup.position.set(obj.position.x, obj.position.y, obj.position.z);
-        satelliteGroup.lookAt(0, 0, 0);
-        satelliteGroup.userData = { objectId: obj.id, category: obj.category, data: obj, isSelectable: true };
-        satelliteGroup.name = obj.id;
-        group.add(satelliteGroup);
-        meshMap.set(obj.id, satelliteGroup);
-      });
-    }, [THREE, satellites, debris, stations, customObjects, maxObjects, effectiveLayers, currentView]);
-    const updateGroundStations = useCallback(() => {
-      if (!THREE || !objectsGroupRef.current || currentView === "solar-system") return;
-      if (!effectiveLayers.groundStations) return;
-      groundStations.forEach((gs) => {
-        const pos = latLonAltToCartesian(gs.latitude, gs.longitude, 0);
-        const geo = new THREE.SphereGeometry(35, 8, 6);
-        const mat = new THREE.MeshBasicMaterial({ color: 65535 });
-        const marker = new THREE.Mesh(geo, mat);
-        marker.position.set(pos.x, pos.y, pos.z);
-        marker.userData = { objectId: gs.id, category: "groundStation", data: gs, isSelectable: true };
-        objectsGroupRef.current.add(marker);
-        objectMeshMapRef.current.set(gs.id, marker);
-        const ringGeo = new THREE.RingGeometry(45, 65, 16);
-        const ringMat = new THREE.MeshBasicMaterial({ color: 65535, transparent: true, opacity: 0.4, side: THREE.DoubleSide });
-        const ring = new THREE.Mesh(ringGeo, ringMat);
-        ring.position.set(pos.x, pos.y, pos.z);
-        ring.lookAt(0, 0, 0);
-        objectsGroupRef.current.add(ring);
-      });
-    }, [THREE, groundStations, effectiveLayers.groundStations, currentView]);
-    const updateCoverage = useCallback(() => {
-      const T = threeRef.current;
-      if (!T || !conesGroupRef.current || currentView === "solar-system") return;
-      while (conesGroupRef.current.children.length > 0) {
-        conesGroupRef.current.remove(conesGroupRef.current.children[0]);
-      }
-      if (!effectiveLayers.coverage) return;
-      satelliteCoverages.forEach((coverage) => {
-        let satPos;
-        if (coverage.satellitePosition) {
-          satPos = new T.Vector3(coverage.satellitePosition.x, coverage.satellitePosition.y, coverage.satellitePosition.z);
-        } else {
-          const satMesh = objectMeshMapRef.current.get(coverage.satelliteId);
-          if (!satMesh) return;
-          satPos = satMesh.position.clone();
-        }
-        const satDistance = satPos.length();
-        const coneColor = new T.Color(coverage.color || "#22d3ee");
-        const highlightColor = new T.Color(coverage.color || "#22d3ee").multiplyScalar(1.3);
-        if (coverage.footprintPolygon && coverage.footprintPolygon.length >= 3 && coverage.showFootprint !== false) {
-          const cornerPoints = coverage.footprintPolygon.map((pt) => latLonAltToCartesian(pt.latitude, pt.longitude, 0));
-          const borderPts = subdivideSphericalPolygon(cornerPoints, SPHERICAL_SUBDIVISIONS, SCENE_EARTH_RADIUS * 1.003).map((pt) => new T.Vector3(pt.x, pt.y, pt.z));
-          borderPts.push(borderPts[0].clone());
-          const borderGeo = new T.BufferGeometry().setFromPoints(borderPts);
-          const borderMat = new T.LineBasicMaterial({ color: highlightColor, transparent: true, opacity: 0.95, linewidth: 2 });
-          conesGroupRef.current.add(new T.Line(borderGeo, borderMat));
-          const glowPts = subdivideSphericalPolygon(cornerPoints, SPHERICAL_SUBDIVISIONS, SCENE_EARTH_RADIUS * 1.005).map((pt) => new T.Vector3(pt.x, pt.y, pt.z));
-          glowPts.push(glowPts[0].clone());
-          const glowGeo = new T.BufferGeometry().setFromPoints(glowPts);
-          const glowMat = new T.LineBasicMaterial({ color: coneColor, transparent: true, opacity: 0.4 });
-          conesGroupRef.current.add(new T.Line(glowGeo, glowMat));
-          if (coverage.showCone !== false) {
-            for (const corner of cornerPoints) {
-              const edgePt = new T.Vector3(corner.x, corner.y, corner.z).normalize().multiplyScalar(SCENE_EARTH_RADIUS);
-              const lineGeo = new T.BufferGeometry().setFromPoints([satPos, edgePt]);
-              const lineMat = new T.LineBasicMaterial({ color: coneColor, transparent: true, opacity: 0.4 });
-              conesGroupRef.current.add(new T.Line(lineGeo, lineMat));
-            }
-          }
-        } else if (coverage.halfAngle && coverage.showCone !== false) {
-          const halfAngleRad = coverage.halfAngle * (Math.PI / 180);
-          const coneHeight = satDistance - SCENE_EARTH_RADIUS * 0.98;
-          const coneRadius = coneHeight * Math.tan(halfAngleRad);
-          const coneGeo = new T.ConeGeometry(coneRadius, coneHeight, 48, 1, true);
-          const coneMat = new T.MeshBasicMaterial({
-            color: coneColor,
-            transparent: true,
-            opacity: 0.12,
-            side: T.DoubleSide,
-            depthWrite: false
-          });
-          const cone = new T.Mesh(coneGeo, coneMat);
-          cone.position.copy(satPos);
-          cone.lookAt(0, 0, 0);
-          cone.rotateX(Math.PI / 2);
-          cone.translateY(-coneHeight / 2);
-          conesGroupRef.current.add(cone);
-          if (coverage.showFootprint !== false) {
-            const nadirDir = satPos.clone().normalize();
-            const footprintPos = nadirDir.clone().multiplyScalar(SCENE_EARTH_RADIUS * 1.003);
-            const footprintRadius = coneRadius * (SCENE_EARTH_RADIUS / satDistance);
-            const footGeo = new T.CircleGeometry(footprintRadius, 64);
-            const footMat = new T.MeshBasicMaterial({
-              color: coneColor,
-              transparent: true,
-              opacity: 0.3,
-              side: T.DoubleSide,
-              depthWrite: false
-            });
-            const footprint = new T.Mesh(footGeo, footMat);
-            footprint.position.copy(footprintPos);
-            footprint.lookAt(satPos);
-            conesGroupRef.current.add(footprint);
-            const ringGeo = new T.RingGeometry(footprintRadius * 0.97, footprintRadius, 64);
-            const ringMat = new T.MeshBasicMaterial({
-              color: highlightColor,
-              transparent: true,
-              opacity: 0.7,
-              side: T.DoubleSide
-            });
-            const ring = new T.Mesh(ringGeo, ringMat);
-            ring.position.copy(footprintPos);
-            ring.lookAt(satPos);
-            conesGroupRef.current.add(ring);
-          }
-        }
-        if (coverage.showNadirLine !== false) {
-          let nadirGroundPoint;
-          if (coverage.nadirPoint) {
-            const np = latLonAltToCartesian(coverage.nadirPoint.latitude, coverage.nadirPoint.longitude, 0);
-            nadirGroundPoint = new T.Vector3(np.x, np.y, np.z);
-          } else {
-            nadirGroundPoint = satPos.clone().normalize().multiplyScalar(SCENE_EARTH_RADIUS);
-          }
-          const lineGeo = new T.BufferGeometry().setFromPoints([satPos, nadirGroundPoint]);
-          const lineMat = new T.LineBasicMaterial({ color: highlightColor, transparent: true, opacity: 0.7 });
-          conesGroupRef.current.add(new T.Line(lineGeo, lineMat));
-        }
-      });
-      visibilityCones.forEach((cone) => {
-        const pos = latLonAltToCartesian(cone.center.latitude, cone.center.longitude, 0);
-        const coneHeight = 1e3 * KM_TO_SCENE;
-        const minElev = cone.minElevation || 10;
-        const coneRadius = coneHeight * Math.tan((90 - minElev) * (Math.PI / 180) * 0.4);
-        const coneColor = new T.Color(cone.color || "#22d3ee");
-        const coneGeo = new T.ConeGeometry(coneRadius, coneHeight, 24, 1, true);
-        const coneMat = new T.MeshBasicMaterial({
-          color: coneColor,
-          transparent: true,
-          opacity: cone.opacity || 0.12,
-          side: T.DoubleSide,
-          depthWrite: false
-        });
-        const coneMesh = new T.Mesh(coneGeo, coneMat);
-        coneMesh.position.set(pos.x, pos.y, pos.z);
-        coneMesh.lookAt(0, 0, 0);
-        coneMesh.rotateX(-Math.PI / 2);
-        coneMesh.translateY(coneHeight / 2);
-        conesGroupRef.current.add(coneMesh);
-        const footGeo = new T.RingGeometry(coneRadius * 0.7, coneRadius * 0.9, 32);
-        const footMat = new T.MeshBasicMaterial({
-          color: coneColor,
-          transparent: true,
-          opacity: 0.3,
-          side: T.DoubleSide
-        });
-        const foot = new T.Mesh(footGeo, footMat);
-        foot.position.set(pos.x * 1.002, pos.y * 1.002, pos.z * 1.002);
-        foot.lookAt(0, 0, 0);
-        conesGroupRef.current.add(foot);
-      });
-    }, [visibilityCones, satelliteCoverages, effectiveLayers.coverage, currentView]);
-    const updateLinks = useCallback(() => {
-      if (!THREE || !linksGroupRef.current || currentView === "solar-system") return;
-      while (linksGroupRef.current.children.length > 0) {
-        linksGroupRef.current.remove(linksGroupRef.current.children[0]);
-      }
-      communicationLinks.forEach((link) => {
-        const fromMesh = objectMeshMapRef.current.get(link.fromId);
-        const toMesh = objectMeshMapRef.current.get(link.toId);
-        if (!fromMesh || !toMesh) return;
-        const color = link.color || (link.status === "active" ? "#00ff88" : "#666666");
-        const geo = new THREE.BufferGeometry().setFromPoints([fromMesh.position.clone(), toMesh.position.clone()]);
-        const mat = new THREE.LineDashedMaterial({
-          color: new THREE.Color(color),
-          transparent: true,
-          opacity: link.status === "active" ? 0.8 : 0.4,
-          dashSize: 30,
-          gapSize: 20
-        });
-        const line = new THREE.Line(geo, mat);
-        line.computeLineDistances();
-        line.userData = { isAnimatedLink: true };
-        linksGroupRef.current.add(line);
-      });
-    }, [THREE, communicationLinks, currentView]);
-    const updateOrbits = useCallback(() => {
-      if (!THREE || !orbitsGroupRef.current || currentView === "solar-system") return;
-      while (orbitsGroupRef.current.children.length > 0) {
-        orbitsGroupRef.current.remove(orbitsGroupRef.current.children[0]);
-      }
-      if (!effectiveLayers.orbits) return;
-      orbitPaths.forEach((path) => {
-        if (path.points.length < 2) return;
-        const points = path.points.map((p) => new THREE.Vector3(p.x, p.y, p.z));
-        const geo = new THREE.BufferGeometry().setFromPoints(points);
-        const mat = new THREE.LineBasicMaterial({ color: new THREE.Color(path.color || "#888888"), transparent: true, opacity: 0.5 });
-        orbitsGroupRef.current.add(new THREE.Line(geo, mat));
-      });
-    }, [THREE, orbitPaths, effectiveLayers.orbits, currentView]);
-    const handleMouseMove = useCallback((event) => {
-      var _a, _b;
-      if (!containerRef.current || !raycasterRef.current || !cameraRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      mouseRef.current.set(
-        (event.clientX - rect.left) / rect.width * 2 - 1,
-        -((event.clientY - rect.top) / rect.height) * 2 + 1
-      );
-      raycasterRef.current.setFromCamera(mouseRef.current, cameraRef.current);
-      const selectables = [];
-      (_a = objectsGroupRef.current) == null ? void 0 : _a.traverse((obj) => {
-        var _a2;
-        if ((_a2 = obj.userData) == null ? void 0 : _a2.isSelectable) selectables.push(obj);
-      });
-      const intersects = raycasterRef.current.intersectObjects(selectables, true);
-      if (intersects.length > 0) {
-        let hit = intersects[0].object;
-        while (hit && !((_b = hit.userData) == null ? void 0 : _b.objectId)) hit = hit.parent;
-        if (hit == null ? void 0 : hit.userData) {
-          setHoverTooltip({ visible: true, x: event.clientX - rect.left, y: event.clientY - rect.top, object: hit.userData.data });
-          if (containerRef.current) containerRef.current.style.cursor = "pointer";
-          return;
-        }
-      }
-      setHoverTooltip({ visible: false, x: 0, y: 0, object: null });
-      if (containerRef.current) containerRef.current.style.cursor = "grab";
-    }, []);
-    const handleClick = useCallback((event) => {
-      var _a, _b, _c, _d, _e, _f;
-      if (!containerRef.current || !raycasterRef.current || !cameraRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      mouseRef.current.set(
-        (event.clientX - rect.left) / rect.width * 2 - 1,
-        -((event.clientY - rect.top) / rect.height) * 2 + 1
-      );
-      raycasterRef.current.setFromCamera(mouseRef.current, cameraRef.current);
-      const selectables = [];
-      (_a = objectsGroupRef.current) == null ? void 0 : _a.traverse((obj) => {
-        var _a2;
-        if ((_a2 = obj.userData) == null ? void 0 : _a2.isSelectable) selectables.push(obj);
-      });
-      (_b = planetsGroupRef.current) == null ? void 0 : _b.traverse((obj) => {
-        var _a2;
-        if ((_a2 = obj.userData) == null ? void 0 : _a2.isSelectable) selectables.push(obj);
-      });
-      const intersects = raycasterRef.current.intersectObjects(selectables, true);
-      if (intersects.length > 0) {
-        let hit = intersects[0].object;
-        while (hit && !((_c = hit.userData) == null ? void 0 : _c.objectId)) hit = hit.parent;
-        if ((_d = hit == null ? void 0 : hit.userData) == null ? void 0 : _d.objectId) {
-          const objectId = hit.userData.objectId;
-          setSelection({ selectedId: objectId, selectedObject: hit.userData.data, hoveredId: null });
-          (_e = callbacks == null ? void 0 : callbacks.onSelect) == null ? void 0 : _e.call(callbacks, hit.userData.data);
-          flyTo(objectId, { animate: true });
-          return;
-        }
-      }
-      setSelection({ selectedId: null, selectedObject: null, hoveredId: null });
-      (_f = callbacks == null ? void 0 : callbacks.onSelect) == null ? void 0 : _f.call(callbacks, null);
-    }, [callbacks]);
-    const flyTo = useCallback((objectId, options) => {
-      var _a, _b, _c, _d, _e, _f;
-      if (!THREE || !cameraRef.current || !controlsRef.current) return;
-      const mesh = objectMeshMapRef.current.get(objectId);
-      if (!mesh) {
-        return;
-      }
-      const targetPos = mesh.position.clone();
-      const camera = cameraRef.current;
-      const controls = controlsRef.current;
-      const category = (_a = mesh.userData) == null ? void 0 : _a.category;
-      const isGroundStation = category === "groundStation";
-      let viewDistance;
-      if (options == null ? void 0 : options.distance) {
-        viewDistance = options.distance;
-      } else {
-        const isPlanet = (_b = mesh.userData) == null ? void 0 : _b.isPlanet;
-        const targetDist = targetPos.length();
-        if (isPlanet) {
-          const planetRadius = ((_d = (_c = mesh.geometry) == null ? void 0 : _c.parameters) == null ? void 0 : _d.radius) || 100;
-          viewDistance = planetRadius * 5;
-        } else if (isGroundStation) {
-          viewDistance = 200;
-        } else if (category === "station") {
-          viewDistance = 80;
-        } else if (category === "satellite") {
-          viewDistance = 60;
-        } else if (targetDist > SCENE_EARTH_RADIUS * 2) {
-          viewDistance = 150;
-        } else {
-          viewDistance = 100 * ((options == null ? void 0 : options.zoom) || 1);
-        }
-      }
-      let cameraTargetPos;
-      if (options == null ? void 0 : options.offset) {
-        cameraTargetPos = targetPos.clone().add(new THREE.Vector3(options.offset.x, options.offset.y, options.offset.z));
-      } else if (isGroundStation) {
-        const upDir = targetPos.clone().normalize();
-        cameraTargetPos = targetPos.clone().add(upDir.multiplyScalar(viewDistance));
-      } else {
-        const dir = targetPos.clone().normalize();
-        const side = new THREE.Vector3(-dir.z, 0.2, dir.x).normalize();
-        cameraTargetPos = targetPos.clone().add(side.multiplyScalar(viewDistance));
-      }
-      if ((options == null ? void 0 : options.animate) !== false) {
-        focusTransitionRef.current = {
-          startTime: Date.now(),
-          startPos: { x: camera.position.x, y: camera.position.y, z: camera.position.z },
-          targetPos: { x: cameraTargetPos.x, y: cameraTargetPos.y, z: cameraTargetPos.z },
-          startTarget: { x: controls.target.x, y: controls.target.y, z: controls.target.z },
-          targetTarget: { x: targetPos.x, y: targetPos.y, z: targetPos.z },
-          duration: CAMERA_TRANSITION_DURATION,
-          isActive: true
-        };
-      } else {
-        camera.position.copy(cameraTargetPos);
-        controls.target.copy(targetPos);
-        controls.update();
-      }
-      (_f = callbacks == null ? void 0 : callbacks.onFocus) == null ? void 0 : _f.call(callbacks, ((_e = mesh.userData) == null ? void 0 : _e.data) || { id: objectId });
-    }, [THREE, callbacks]);
-    const focusOn = flyTo;
-    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 ((_a = focusTransitionRef.current) == null ? void 0 : _a.isActive) {
-        const t = focusTransitionRef.current;
-        const progress = Math.min((Date.now() - t.startTime) / t.duration, 1);
-        const e = easeOutCubic(progress);
-        camera.position.x = t.startPos.x + (t.targetPos.x - t.startPos.x) * e;
-        camera.position.y = t.startPos.y + (t.targetPos.y - t.startPos.y) * e;
-        camera.position.z = t.startPos.z + (t.targetPos.z - t.startPos.z) * e;
-        controls.target.x = t.startTarget.x + (t.targetTarget.x - t.startTarget.x) * e;
-        controls.target.y = t.startTarget.y + (t.targetTarget.y - t.startTarget.y) * e;
-        controls.target.z = t.startTarget.z + (t.targetTarget.z - t.startTarget.z) * e;
-        if (progress >= 1) t.isActive = false;
-      }
-      if (controls) controls.update();
-      timeRef.current += 0.016;
-      if (starsMaterialRef.current) starsMaterialRef.current.uniforms.time.value = timeRef.current;
-      if (linksGroupRef.current) {
-        linksGroupRef.current.children.forEach((child) => {
-          var _a2;
-          if (((_a2 = child.userData) == null ? void 0 : _a2.isAnimatedLink) && child.material) {
-            child.material.dashOffset -= 1.5;
-          }
-        });
-      }
-      rendererRef.current.render(sceneRef.current, camera);
-      animationRef.current = requestAnimationFrame(animate);
-    }, []);
-    useImperativeHandle(ref, () => ({
-      focusOn,
-      flyTo,
-      setView: (mode) => setCurrentView(mode),
-      setTime: () => {
-      },
-      setTimeScale: () => {
-      },
-      togglePlay: () => {
-      },
-      setLayerVisibility: (layer, visible) => setLayers((prev) => ({ ...prev, [layer]: visible })),
-      getCameraState: () => {
-        var _a, _b, _c;
-        if (!cameraRef.current) return { position: { x: 0, y: 0, z: 1e4 }, target: { x: 0, y: 0, z: 0 }, up: { x: 0, y: 1, z: 0 }, fov: 45, near: 0.1, far: 1e5 };
-        const c = cameraRef.current;
-        return { position: { x: c.position.x, y: c.position.y, z: c.position.z }, target: { x: ((_a = controlsRef.current) == null ? void 0 : _a.target.x) || 0, y: ((_b = controlsRef.current) == null ? void 0 : _b.target.y) || 0, z: ((_c = controlsRef.current) == null ? void 0 : _c.target.z) || 0 }, up: { x: c.up.x, y: c.up.y, z: c.up.z }, fov: c.fov, near: c.near, far: c.far };
-      },
-      setCameraState: (state) => {
-        if (!cameraRef.current) return;
-        if (state.position) cameraRef.current.position.set(state.position.x, state.position.y, state.position.z);
-        if (state.target && controlsRef.current) controlsRef.current.target.set(state.target.x, state.target.y, state.target.z);
-      },
-      exportImage: (format = "png") => {
-        var _a;
-        return ((_a = rendererRef.current) == null ? void 0 : _a.domElement.toDataURL(`image/${format}`)) || "";
-      },
-      exportScene: () => new Blob(),
-      getVisibleObjects: () => [...satellites, ...debris, ...stations, ...customObjects],
-      findObjects: (q) => [...satellites, ...debris, ...stations, ...customObjects].filter((obj) => obj.name.toLowerCase().includes(q.toLowerCase()) || obj.id.toLowerCase().includes(q.toLowerCase())),
-      addObject: () => {
-      },
-      removeObject: () => {
-      },
-      updateObject: () => {
-      },
-      measureDistance: (_from, _to) => 0
-    }), [satellites, debris, stations, customObjects, focusOn]);
-    useEffect(() => {
-      if (THREE && OrbitControlsClass) return initScene();
-    }, [THREE, OrbitControlsClass, initScene]);
-    useEffect(() => {
-      if (!isLoading && THREE) {
-        if (animationRef.current) {
-          cancelAnimationFrame(animationRef.current);
-          animationRef.current = null;
-        }
-        isAnimatingRef.current = true;
-        animate();
-        return () => {
-          isAnimatingRef.current = false;
-          if (animationRef.current) {
-            cancelAnimationFrame(animationRef.current);
-            animationRef.current = null;
-          }
-        };
-      }
-    }, [isLoading, THREE, animate]);
-    useEffect(() => {
-      if (THREE && !isLoading) {
-        updateObjects();
-        updateGroundStations();
-        updateCoverage();
-        updateOrbits();
-        updateLinks();
-      }
-    }, [THREE, isLoading, updateObjects, updateGroundStations, updateCoverage, updateOrbits, updateLinks]);
-    useEffect(() => {
-      const container = containerRef.current;
-      if (!container || isLoading) return;
-      container.addEventListener("mousemove", handleMouseMove);
-      container.addEventListener("click", handleClick);
-      return () => {
-        container.removeEventListener("mousemove", handleMouseMove);
-        container.removeEventListener("click", handleClick);
-      };
-    }, [isLoading, handleMouseMove, handleClick]);
-    useEffect(() => {
-      const handleResize = () => {
-        if (!containerRef.current || !rendererRef.current || !cameraRef.current) return;
-        const rect = containerRef.current.getBoundingClientRect();
-        const h = typeof height === "number" ? height : rect.height;
-        cameraRef.current.aspect = rect.width / h;
-        cameraRef.current.updateProjectionMatrix();
-        rendererRef.current.setSize(rect.width, h);
-      };
-      window.addEventListener("resize", handleResize);
-      return () => window.removeEventListener("resize", handleResize);
-    }, [height]);
-    useEffect(() => {
-      if (focusedObjectId) focusOn(focusedObjectId, { animate: true });
-    }, [focusedObjectId, focusOn]);
-    useEffect(() => {
-      if (THREE && atmosphereMaterialRef.current && sunDirection) {
-        const dir = new THREE.Vector3(sunDirection.x, sunDirection.y, sunDirection.z).normalize();
-        atmosphereMaterialRef.current.uniforms.uSunDirection.value = dir;
-      }
-    }, [THREE, sunDirection]);
-    useEffect(() => {
-      if (!THREE || !planetPositions || !planetsGroupRef.current) return;
-      planetsGroupRef.current.traverse((child) => {
-        var _a;
-        if (((_a = child.userData) == null ? void 0 : _a.planetId) && planetPositions[child.userData.planetId]) {
-          const pos = planetPositions[child.userData.planetId];
-          child.position.set(pos.x, pos.y, pos.z);
-        }
-      });
-    }, [THREE, planetPositions]);
-    if (!webglCapabilities.available) {
-      return /* @__PURE__ */ jsxs("div", { className: `zenspace3d-fallback ${className}`, style: { width, height: typeof height === "number" ? height : 600, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backgroundColor: "#030508", borderRadius: 8, fontFamily: "ui-monospace, monospace", ...style }, children: [
-        /* @__PURE__ */ jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsx(AstroIcon, { name: "public", size: "large", label: "Globe", style: { color: "#22d3ee", opacity: 0.5 } }) }),
-        /* @__PURE__ */ jsx("div", { style: { color: "#b8bcc8", fontSize: 14 }, children: "WebGL is not available" })
-      ] });
-    }
-    if (error) return /* @__PURE__ */ jsx("div", { style: { width, height, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "#0a0a0f", color: "#ff4444" }, children: /* @__PURE__ */ jsxs("p", { children: [
-      "Error: ",
-      error
-    ] }) });
-    return /* @__PURE__ */ jsxs("div", { className: `zenspace3d ${className}`, style: { width, height: typeof height === "number" ? height : "100%", position: "relative", backgroundColor: "#000", borderRadius: 8, overflow: "hidden", cursor: "grab", ...style }, children: [
-      /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
-      isLoading && /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "rgba(0,0,0,0.9)" }, children: /* @__PURE__ */ jsx("div", { style: { color: "#22d3ee", fontSize: 14 }, children: "Loading..." }) }),
-      showTools && !isLoading && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 12, left: 12, display: "flex", flexDirection: "column", gap: 4 }, children: [
-        /* @__PURE__ */ jsx(LayerBtn, { icon: "satellite", label: "Satellites", active: layers.satellites, onClick: () => setLayers((l) => ({ ...l, satellites: !l.satellites })) }),
-        /* @__PURE__ */ jsx(LayerBtn, { icon: "home", label: "Stations", active: layers.stations, onClick: () => setLayers((l) => ({ ...l, stations: !l.stations })) }),
-        /* @__PURE__ */ jsx(LayerBtn, { icon: "antenna", label: "Ground", active: layers.groundStations, onClick: () => setLayers((l) => ({ ...l, groundStations: !l.groundStations })) }),
-        /* @__PURE__ */ jsx(LayerBtn, { icon: "timeline", label: "Orbits", active: layers.orbits, onClick: () => setLayers((l) => ({ ...l, orbits: !l.orbits })) }),
-        /* @__PURE__ */ jsx(LayerBtn, { icon: "signal-cellular-4-bar", label: "Coverage", active: layers.coverage, onClick: () => setLayers((l) => ({ ...l, coverage: !l.coverage })) })
-      ] }),
-      !isLoading && /* @__PURE__ */ jsx(
-        ObjectLegend,
-        {
-          currentView,
-          satellites,
-          stations,
-          groundStations,
-          onObjectClick: (id, objectData) => {
-            var _a;
-            setSelection({ selectedId: id, selectedObject: objectData, hoveredId: null });
-            (_a = callbacks == null ? void 0 : callbacks.onSelect) == null ? void 0 : _a.call(callbacks, objectData);
-            flyTo(id, { animate: true });
-          }
-        }
-      ),
-      hoverTooltip.visible && hoverTooltip.object && /* @__PURE__ */ jsxs("div", { style: {
-        position: "absolute",
-        left: hoverTooltip.x + 15,
-        top: hoverTooltip.y - 10,
-        backgroundColor: "rgba(20, 25, 35, 0.95)",
-        color: "#e4e4e7",
-        padding: "10px 14px",
-        borderRadius: 4,
-        fontSize: 12,
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        boxShadow: "0 4px 20px rgba(0,0,0,0.5)",
-        pointerEvents: "none",
-        zIndex: 100,
-        minWidth: 140
-      }, children: [
-        /* @__PURE__ */ jsx("div", { style: { color: "#ffffff", fontWeight: 500, marginBottom: 4 }, children: hoverTooltip.object.name || hoverTooltip.object.targetName || "Unknown" }),
-        hoverTooltip.object.category && /* @__PURE__ */ jsx("div", { style: { color: "#9ca3af", fontSize: 11 }, children: hoverTooltip.object.category }),
-        hoverTooltip.object.overpassTime && /* @__PURE__ */ jsxs("div", { style: { color: "#9ca3af", fontSize: 11, marginTop: 4 }, children: [
-          "Overpass time: ",
-          hoverTooltip.object.overpassTime
-        ] })
-      ] }),
-      showInfoPanel && selection.selectedObject && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", bottom: 16, right: 12, backgroundColor: "rgba(0,0,0,0.9)", color: "#e4e4e7", padding: "14px 18px", borderRadius: 10, fontSize: 12, fontFamily: "ui-monospace, monospace", border: "1px solid rgba(34,211,238,0.3)", minWidth: 180 }, children: [
-        /* @__PURE__ */ jsx("div", { style: { color: "#22d3ee", fontWeight: 500, marginBottom: 8 }, children: selection.selectedObject.name }),
-        /* @__PURE__ */ jsx("div", { style: { color: "#b8bcc8", fontSize: 10 }, children: selection.selectedObject.category }),
-        /* @__PURE__ */ jsx("button", { onClick: () => setSelection({ selectedId: null, selectedObject: null, hoveredId: null }), style: { marginTop: 10, padding: "5px 10px", backgroundColor: "rgba(255,255,255,0.1)", border: "none", borderRadius: 4, color: "#a1a1aa", cursor: "pointer", fontSize: 10, width: "100%" }, children: "Close" })
-      ] }),
-      !isLoading && /* @__PURE__ */ jsx("div", { style: { position: "absolute", bottom: 12, left: 12, backgroundColor: "rgba(0,0,0,0.5)", color: "#b8bcc8", padding: "5px 10px", borderRadius: 6, fontSize: 10 }, children: "Drag to rotate • Scroll to zoom" })
-    ] });
-  }
-);
-function LayerBtn({ icon, label, active, onClick }) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick,
-      "aria-label": `Toggle ${label} layer`,
-      "aria-pressed": active,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        padding: "6px 10px",
-        backgroundColor: active ? "rgba(34,211,238,0.15)" : "rgba(0,0,0,0.7)",
-        border: active ? "1px solid rgba(34,211,238,0.4)" : "1px solid rgba(255,255,255,0.1)",
-        borderRadius: 6,
-        cursor: "pointer",
-        fontSize: "0.6875rem",
-        // 11px in rem
-        color: active ? "#22d3ee" : "#b8bcc8",
-        // WCAG: improved contrast from #71717a
-        minWidth: 110
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(AstroIcon, { name: icon, size: "extra-small", label: "" }) }),
-        /* @__PURE__ */ jsx("span", { children: label })
-      ]
-    }
-  );
-}
-function ObjectLegend({ currentView, satellites, stations, groundStations, onObjectClick }) {
-  const [hoveredSection, setHoveredSection] = React.useState(null);
-  const [pinnedSection, setPinnedSection] = React.useState(null);
-  const isExpanded = (section) => hoveredSection === section || pinnedSection === section;
-  const togglePin = (section) => {
-    setPinnedSection((prev) => prev === section ? null : section);
-  };
-  const sectionStyle = {
-    cursor: "pointer",
-    padding: "4px 0",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    transition: "background-color 0.15s"
-  };
-  const itemStyle = {
-    padding: "3px 8px",
-    marginLeft: 12,
-    cursor: "pointer",
-    borderRadius: 4,
-    fontSize: 10,
-    color: "#a1a1aa",
-    transition: "all 0.15s"
-  };
-  return /* @__PURE__ */ jsxs("div", { style: {
-    position: "absolute",
-    top: 12,
-    right: 12,
-    backgroundColor: "rgba(0,0,0,0.85)",
-    color: "#e4e4e7",
-    padding: "10px 14px",
-    borderRadius: 8,
-    fontSize: 11,
-    fontFamily: "ui-monospace, monospace",
-    minWidth: 160,
-    maxHeight: 400,
-    overflowY: "auto"
-  }, children: [
-    /* @__PURE__ */ jsx("div", { style: { color: "#b8bcc8", fontSize: 10, marginBottom: 8 }, children: currentView === "solar-system" ? "Solar System" : "Earth Orbit" }),
-    satellites.length > 0 && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        onMouseEnter: () => setHoveredSection("satellites"),
-        onMouseLeave: () => setHoveredSection(null),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                ...sectionStyle,
-                backgroundColor: isExpanded("satellites") ? "rgba(255,255,255,0.05)" : "transparent"
-              },
-              onClick: () => togglePin("satellites"),
-              children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("span", { style: { color: "#00ff88" }, children: "●" }),
-                  " ",
-                  satellites.length,
-                  " Satellites"
-                ] }),
-                /* @__PURE__ */ jsxs("span", { style: { color: pinnedSection === "satellites" ? "#00ff88" : "#666", fontSize: 9 }, children: [
-                  isExpanded("satellites") ? "▼" : "▶",
-                  pinnedSection === "satellites" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(AstroIcon, { name: "bookmark", size: "extra-small", label: "", style: { marginLeft: 4, verticalAlign: "middle" } }) }) : null
-                ] })
-              ]
-            }
-          ),
-          isExpanded("satellites") && /* @__PURE__ */ jsx("div", { style: { marginBottom: 4, paddingBottom: 4 }, children: satellites.map((sat) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: itemStyle,
-              onClick: (e) => {
-                e.stopPropagation();
-                onObjectClick(sat.id, sat);
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.backgroundColor = "rgba(0,255,136,0.15)";
-                e.currentTarget.style.color = "#00ff88";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = "transparent";
-                e.currentTarget.style.color = "#a1a1aa";
-              },
-              children: sat.name || sat.id
-            },
-            sat.id
-          )) })
-        ]
-      }
-    ),
-    stations.length > 0 && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        onMouseEnter: () => setHoveredSection("stations"),
-        onMouseLeave: () => setHoveredSection(null),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                ...sectionStyle,
-                backgroundColor: isExpanded("stations") ? "rgba(255,255,255,0.05)" : "transparent"
-              },
-              onClick: () => togglePin("stations"),
-              children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("span", { style: { color: "#ffd700" }, children: "●" }),
-                  " ",
-                  stations.length,
-                  " Stations"
-                ] }),
-                /* @__PURE__ */ jsxs("span", { style: { color: pinnedSection === "stations" ? "#ffd700" : "#666", fontSize: 9 }, children: [
-                  isExpanded("stations") ? "▼" : "▶",
-                  pinnedSection === "stations" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(AstroIcon, { name: "bookmark", size: "extra-small", label: "", style: { marginLeft: 4, verticalAlign: "middle" } }) }) : null
-                ] })
-              ]
-            }
-          ),
-          isExpanded("stations") && /* @__PURE__ */ jsx("div", { style: { marginBottom: 4, paddingBottom: 4 }, children: stations.map((st) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: itemStyle,
-              onClick: (e) => {
-                e.stopPropagation();
-                onObjectClick(st.id, st);
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.backgroundColor = "rgba(255,215,0,0.15)";
-                e.currentTarget.style.color = "#ffd700";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = "transparent";
-                e.currentTarget.style.color = "#a1a1aa";
-              },
-              children: st.name || st.id
-            },
-            st.id
-          )) })
-        ]
-      }
-    ),
-    groundStations.length > 0 && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        onMouseEnter: () => setHoveredSection("groundStations"),
-        onMouseLeave: () => setHoveredSection(null),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                ...sectionStyle,
-                backgroundColor: isExpanded("groundStations") ? "rgba(255,255,255,0.05)" : "transparent"
-              },
-              onClick: () => togglePin("groundStations"),
-              children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("span", { style: { color: "#00ffff" }, children: "▲" }),
-                  " ",
-                  groundStations.length,
-                  " Ground Stations"
-                ] }),
-                /* @__PURE__ */ jsxs("span", { style: { color: pinnedSection === "groundStations" ? "#00ffff" : "#666", fontSize: 9 }, children: [
-                  isExpanded("groundStations") ? "▼" : "▶",
-                  pinnedSection === "groundStations" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(AstroIcon, { name: "bookmark", size: "extra-small", label: "", style: { marginLeft: 4, verticalAlign: "middle" } }) }) : null
-                ] })
-              ]
-            }
-          ),
-          isExpanded("groundStations") && /* @__PURE__ */ jsx("div", { style: { marginBottom: 4, paddingBottom: 4 }, children: groundStations.map((gs) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: itemStyle,
-              onClick: (e) => {
-                e.stopPropagation();
-                onObjectClick(gs.id, gs);
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.backgroundColor = "rgba(0,255,255,0.15)";
-                e.currentTarget.style.color = "#00ffff";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = "transparent";
-                e.currentTarget.style.color = "#a1a1aa";
-              },
-              children: gs.name || gs.id
-            },
-            gs.id
-          )) })
-        ]
-      }
-    )
-  ] });
-}
-export {
-  ZenSpace3D
-};
-//# sourceMappingURL=ZenSpace3D.js.map