@zendir/ui 0.5.0 → 0.6.0

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

@@ -1,1254 +1,1698 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback, useImperativeHandle } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
 import { AstroIcon } from "../core/display/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 { KM_TO_SCENE, SCENE_EARTH_RADIUS, easeOutCubic, latLonAltToCartesian } from "./ZenSpace3DUtils.js";
+import atmosphere_default from "../../shaders/atmosphere.vert.js";
+import atmosphere_default$1 from "../../shaders/atmosphere.frag.js";
+import stars_default from "../../shaders/stars.vert.js";
+import stars_default$1 from "../../shaders/stars.frag.js";
 import { loadThree } from "./threeLoader.js";
 import { ZenSpace3DCesium } from "./ZenSpace3DCesium.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
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/3d/ZenSpace3D.tsx
+/**
+* @zendir/ui - ZenSpace3D Component (Optimized)
+*
+* Professional 3D space visualization with smooth interactions.
+* Optimized for performance with settings from EarthViewer.
+*/
+var 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;
+var CAMERA_TRANSITION_DURATION = 2e3;
+var STARS_COUNT = 5e3;
+var EARTH_SEGMENTS = 64;
+var EARTH_SEGMENTS_V = 32;
+var 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 };
+	try {
+		const canvas = document.createElement("canvas");
+		if (canvas.getContext("webgl2")) return {
+			available: true,
+			version: 2
+		};
+		if (canvas.getContext("webgl")) return {
+			available: true,
+			version: 1
+		};
+	} catch {}
+	return {
+		available: false,
+		version: 0
+	};
 }
+/**
+* Spherical linear interpolation (SLERP) between two unit vectors
+* Creates smooth arc along the sphere surface
+*/
 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
-  };
+	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 < .001) 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
+	};
 }
+/**
+* Subdivide polygon edges along great circles for spherical rendering
+* Takes corner points and returns a densely sampled spherical polygon
+*/
 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;
+	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 interpolated = slerp(p1, p2, j / subdivisions);
+			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 group = new THREE.Group();
+	if (category === "station") {
+		const geo = new THREE.BoxGeometry(size * 1.2, size * .6, size * .6);
+		const mat = new THREE.MeshBasicMaterial({ color: 13421772 });
+		group.add(new THREE.Mesh(geo, mat));
+		const panelGeo = new THREE.BoxGeometry(size * 2.5, size * .03, size * .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 * .5, size * .5, size * .6);
+		const mat = new THREE.MeshBasicMaterial({ color: 11184810 });
+		group.add(new THREE.Mesh(geo, mat));
+		const panelGeo = new THREE.BoxGeometry(size * 1.2, size * .02, size * .4);
+		const panelMat = new THREE.MeshBasicMaterial({ color: 1718890 });
+		const leftPanel = new THREE.Mesh(panelGeo, panelMat);
+		leftPanel.position.x = -size * .7;
+		group.add(leftPanel);
+		const rightPanel = new THREE.Mesh(panelGeo, panelMat);
+		rightPanel.position.x = size * .7;
+		group.add(rightPanel);
+	} else if (category === "debris") {
+		const geo = new THREE.IcosahedronGeometry(size * .3, 0);
+		const mat = new THREE.MeshBasicMaterial({ color: 6710886 });
+		group.add(new THREE.Mesh(geo, mat));
+	} else {
+		const geo = new THREE.SphereGeometry(size * .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" })
-    ] });
-  }
-);
+var ZenSpace3D = forwardRef(function ZenSpace3D(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
+	});
+});
+var ZenSpace3DThree = forwardRef(function ZenSpace3DThree(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(() => {
+		if (!THREE || !containerRef.current || !OrbitControlsClass) return;
+		if (rendererRef.current) {
+			isAnimatingRef.current = false;
+			if (animationRef.current) {
+				cancelAnimationFrame(animationRef.current);
+				animationRef.current = null;
+			}
+			controlsRef.current?.dispose();
+			rendererRef.current.dispose();
+			if (containerRef.current?.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 * .3, initialDistance);
+		cameraRef.current = camera;
+		if (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
+		});
+		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 = .05;
+		controls.rotateSpeed = .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((THREE, _scene) => {
+		const planetsGroup = planetsGroupRef.current;
+		if (!planetsGroup) return;
+		const DISTANCE_SCALE = 5e-6;
+		const SIZE_SCALE = .01;
+		const sunRadius = 696340 * SIZE_SCALE;
+		const sunGeo = new THREE.SphereGeometry(sunRadius, 32, 24);
+		const sunMat = new THREE.MeshBasicMaterial({ color: 16768324 });
+		const sunMesh = new THREE.Mesh(sunGeo, sunMat);
+		sunMesh.name = "sun";
+		sunMesh.userData = {
+			objectId: "sun",
+			planetId: "sun",
+			isPlanet: true,
+			isSelectable: true
+		};
+		planetsGroup.add(sunMesh);
+		const glowGeo = new THREE.SphereGeometry(sunRadius * 1.3, 24, 16);
+		const glowMat = new THREE.MeshBasicMaterial({
+			color: 16755200,
+			transparent: true,
+			opacity: .2
+		});
+		planetsGroup.add(new THREE.Mesh(glowGeo, glowMat));
+		[
+			{
+				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
+			}
+		].forEach((c) => {
+			const visualScale = c.distance < 3e8 ? 15 : 5;
+			const planetRadius = c.radius * SIZE_SCALE * visualScale;
+			const geo = new THREE.SphereGeometry(planetRadius, 24, 16);
+			const mat = new THREE.MeshPhongMaterial({
+				color: c.color,
+				shininess: 30
+			});
+			const mesh = new THREE.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 THREE.RingGeometry(planetRadius * 1.4, planetRadius * 2.2, 32);
+				const ringMat = new THREE.MeshBasicMaterial({
+					color: 13219990,
+					transparent: true,
+					opacity: .6,
+					side: THREE.DoubleSide
+				});
+				const ring = new THREE.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 THREE.Vector3(orbitDist * Math.cos(angle), 0, orbitDist * Math.sin(angle)));
+			}
+			const orbitGeo = new THREE.BufferGeometry().setFromPoints(points);
+			const orbitMat = new THREE.LineBasicMaterial({
+				color: 4473958,
+				transparent: true,
+				opacity: .3
+			});
+			planetsGroup.add(new THREE.Line(orbitGeo, orbitMat));
+		});
+		const sunLight = new THREE.PointLight(16777198, 2, 1e5);
+		sunLight.position.set(0, 0, 0);
+		planetsGroup.add(sunLight);
+	}, []);
+	const createEarth = useCallback((THREE, scene) => {
+		const earthGeometry = new THREE.SphereGeometry(SCENE_EARTH_RADIUS, EARTH_SEGMENTS, EARTH_SEGMENTS_V);
+		const earthMaterial = new THREE.MeshPhongMaterial({
+			color: 2245802,
+			shininess: 10
+		});
+		new THREE.TextureLoader().load("/world.topo.jpg", (texture) => {
+			texture.wrapS = THREE.RepeatWrapping;
+			texture.wrapT = THREE.ClampToEdgeWrapping;
+			texture.minFilter = THREE.LinearFilter;
+			texture.magFilter = THREE.LinearFilter;
+			earthMaterial.map = texture;
+			earthMaterial.needsUpdate = true;
+		}, void 0, () => {});
+		const earth = new THREE.Mesh(earthGeometry, earthMaterial);
+		earth.rotation.y = -Math.PI / 2 + Math.PI;
+		earth.name = "earth";
+		scene.add(earth);
+		earthRef.current = earth;
+	}, []);
+	const createAtmosphere = useCallback((THREE, scene) => {
+		if (!effectiveLayers.atmosphere) return;
+		const defaultSunDir = new THREE.Vector3(1, .3, .5).normalize();
+		const atmosphereGeometry = new THREE.SphereGeometry(SCENE_EARTH_RADIUS * 1.15, 32, 16);
+		const atmosphereMaterial = new THREE.ShaderMaterial({
+			uniforms: { uSunDirection: { value: defaultSunDir } },
+			vertexShader: atmosphere_default,
+			fragmentShader: atmosphere_default$1,
+			blending: THREE.AdditiveBlending,
+			side: THREE.BackSide,
+			transparent: true,
+			depthWrite: false
+		});
+		const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
+		atmosphere.rotation.y = -Math.PI / 2;
+		atmosphere.name = "atmosphere";
+		scene.add(atmosphere);
+		atmosphereMaterialRef.current = atmosphereMaterial;
+	}, [effectiveLayers.atmosphere]);
+	const createStars = useCallback((THREE, scene) => {
+		const starsGeometry = new THREE.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 THREE.BufferAttribute(positions, 3));
+		starsGeometry.setAttribute("opacity", new THREE.BufferAttribute(opacities, 1));
+		const starsMaterial = new THREE.ShaderMaterial({
+			uniforms: { time: { value: 0 } },
+			vertexShader: stars_default,
+			fragmentShader: stars_default$1,
+			transparent: true,
+			depthWrite: false,
+			blending: THREE.AdditiveBlending
+		});
+		scene.add(new THREE.Points(starsGeometry, starsMaterial));
+		starsMaterialRef.current = starsMaterial;
+	}, [currentView]);
+	const createLighting = useCallback((THREE, scene) => {
+		scene.add(new THREE.AmbientLight(4210752, .6));
+		const sunLight = new THREE.DirectionalLight(16777215, 1.2);
+		sunLight.position.set(1e4, 5e3, 1e4);
+		scene.add(sunLight);
+	}, []);
+	const createAxisHelper = useCallback((THREE, scene) => {
+		const len = SCENE_EARTH_RADIUS * 1.5;
+		const group = new THREE.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 THREE.Vector3(0, 0, 0), new THREE.Vector3(dir[0] * len, dir[1] * len, dir[2] * len)];
+			const geo = new THREE.BufferGeometry().setFromPoints(points);
+			const mat = new THREE.LineBasicMaterial({ color });
+			group.add(new THREE.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();
+		[
+			...satellites,
+			...debris,
+			...stations,
+			...customObjects
+		].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: .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: .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: .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: .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 * .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: .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 footprintPos = satPos.clone().normalize().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: .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 * .97, footprintRadius, 64);
+					const ringMat = new T.MeshBasicMaterial({
+						color: highlightColor,
+						transparent: true,
+						opacity: .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: .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) * .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 || .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 * .7, coneRadius * .9, 32);
+			const footMat = new T.MeshBasicMaterial({
+				color: coneColor,
+				transparent: true,
+				opacity: .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" ? .8 : .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: .5
+			});
+			orbitsGroupRef.current.add(new THREE.Line(geo, mat));
+		});
+	}, [
+		THREE,
+		orbitPaths,
+		effectiveLayers.orbits,
+		currentView
+	]);
+	const handleMouseMove = useCallback((event) => {
+		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 = [];
+		objectsGroupRef.current?.traverse((obj) => {
+			if (obj.userData?.isSelectable) selectables.push(obj);
+		});
+		const intersects = raycasterRef.current.intersectObjects(selectables, true);
+		if (intersects.length > 0) {
+			let hit = intersects[0].object;
+			while (hit && !hit.userData?.objectId) hit = hit.parent;
+			if (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) => {
+		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 = [];
+		objectsGroupRef.current?.traverse((obj) => {
+			if (obj.userData?.isSelectable) selectables.push(obj);
+		});
+		planetsGroupRef.current?.traverse((obj) => {
+			if (obj.userData?.isSelectable) selectables.push(obj);
+		});
+		const intersects = raycasterRef.current.intersectObjects(selectables, true);
+		if (intersects.length > 0) {
+			let hit = intersects[0].object;
+			while (hit && !hit.userData?.objectId) hit = hit.parent;
+			if (hit?.userData?.objectId) {
+				const objectId = hit.userData.objectId;
+				setSelection({
+					selectedId: objectId,
+					selectedObject: hit.userData.data,
+					hoveredId: null
+				});
+				callbacks?.onSelect?.(hit.userData.data);
+				flyTo(objectId, { animate: true });
+				return;
+			}
+		}
+		setSelection({
+			selectedId: null,
+			selectedObject: null,
+			hoveredId: null
+		});
+		callbacks?.onSelect?.(null);
+	}, [callbacks]);
+	const flyTo = useCallback((objectId, options) => {
+		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 = mesh.userData?.category;
+		const isGroundStation = category === "groundStation";
+		let viewDistance;
+		if (options?.distance) viewDistance = options.distance;
+		else {
+			const isPlanet = mesh.userData?.isPlanet;
+			const targetDist = targetPos.length();
+			if (isPlanet) viewDistance = (mesh.geometry?.parameters?.radius || 100) * 5;
+			else if (isGroundStation) viewDistance = 200;
+			else if (category === "station") viewDistance = 80;
+			else if (category === "satellite") viewDistance = 60;
+			else if (targetDist > 3e3 * 2) viewDistance = 150;
+			else viewDistance = 100 * (options?.zoom || 1);
+		}
+		let cameraTargetPos;
+		if (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, .2, dir.x).normalize();
+			cameraTargetPos = targetPos.clone().add(side.multiplyScalar(viewDistance));
+		}
+		if (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();
+		}
+		callbacks?.onFocus?.(mesh.userData?.data || { id: objectId });
+	}, [THREE, callbacks]);
+	const focusOn = flyTo;
+	const animate = useCallback(() => {
+		if (!isAnimatingRef.current) return;
+		if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return;
+		const camera = cameraRef.current;
+		const controls = controlsRef.current;
+		if (focusTransitionRef.current?.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 += .016;
+		if (starsMaterialRef.current) starsMaterialRef.current.uniforms.time.value = timeRef.current;
+		if (linksGroupRef.current) linksGroupRef.current.children.forEach((child) => {
+			if (child.userData?.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: () => {
+			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: .1,
+				far: 1e5
+			};
+			const c = cameraRef.current;
+			return {
+				position: {
+					x: c.position.x,
+					y: c.position.y,
+					z: c.position.z
+				},
+				target: {
+					x: controlsRef.current?.target.x || 0,
+					y: controlsRef.current?.target.y || 0,
+					z: controlsRef.current?.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") => rendererRef.current?.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) => {
+			if (child.userData?.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: .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) => {
+					setSelection({
+						selectedId: id,
+						selectedObject: objectData,
+						hoveredId: null
+					});
+					callbacks?.onSelect?.(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 })
-      ]
-    }
-  );
+	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",
+			color: active ? "#22d3ee" : "#b8bcc8",
+			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
-          )) })
-        ]
-      }
-    )
-  ] });
+	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,
-  ZenSpace3D as default
-};
-//# sourceMappingURL=ZenSpace3D.js.map
+//#endregion
+export { ZenSpace3D, ZenSpace3D as default };
+
+//# sourceMappingURL=ZenSpace3D.js.map