@zendir/ui 0.1.0

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

@@ -0,0 +1,1253 @@
+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