worldorbit 3.0.5 → 3.0.7

package/dist/unpkg/worldorbit.js

@@ -37777,6 +37777,15 @@ void main() {
       starCore: "#ffcc67",
       starStroke: "rgba(255, 245, 203, 0.85)",
       starGlow: "#ffe8a3",
+      spaceFog: "#07131d",
+      starfield: "rgba(226, 239, 255, 0.9)",
+      starfieldDim: "rgba(164, 194, 228, 0.45)",
+      objectSpecular: "#f5f8ff",
+      orbitOpacity: 0.34,
+      orbitBandOpacity: 0.24,
+      selectionHalo: "rgba(255, 214, 139, 0.9)",
+      atmosphere: "rgba(143, 202, 255, 0.4)",
+      cometTail: "rgba(193, 243, 255, 0.7)",
       fontFamily: '"Segoe UI Variable", "Bahnschrift", sans-serif',
       displayFont: '"Bahnschrift", "Segoe UI Variable", sans-serif'
     },
@@ -37800,6 +37809,15 @@ void main() {
       starCore: "#e5f98c",
       starStroke: "rgba(246, 255, 217, 0.9)",
       starGlow: "#fffab4",
+      spaceFog: "#071723",
+      starfield: "rgba(220, 255, 245, 0.9)",
+      starfieldDim: "rgba(124, 212, 195, 0.42)",
+      objectSpecular: "#ecfffb",
+      orbitOpacity: 0.3,
+      orbitBandOpacity: 0.22,
+      selectionHalo: "rgba(120, 255, 215, 0.85)",
+      atmosphere: "rgba(120, 255, 215, 0.32)",
+      cometTail: "rgba(181, 255, 236, 0.68)",
       fontFamily: '"Segoe UI Variable", "Bahnschrift", sans-serif',
       displayFont: '"Bahnschrift", "Segoe UI Variable", sans-serif'
     },
@@ -37823,6 +37841,15 @@ void main() {
       starCore: "#ffb766",
       starStroke: "rgba(255, 236, 205, 0.88)",
       starGlow: "#ffe2ad",
+      spaceFog: "#1c0d12",
+      starfield: "rgba(255, 232, 214, 0.88)",
+      starfieldDim: "rgba(255, 176, 138, 0.38)",
+      objectSpecular: "#fff0e6",
+      orbitOpacity: 0.3,
+      orbitBandOpacity: 0.24,
+      selectionHalo: "rgba(255, 178, 125, 0.85)",
+      atmosphere: "rgba(255, 190, 140, 0.26)",
+      cometTail: "rgba(255, 214, 173, 0.62)",
       fontFamily: '"Segoe UI Variable", "Bahnschrift", sans-serif',
       displayFont: '"Bahnschrift", "Segoe UI Variable", sans-serif'
     }
@@ -38872,10 +38899,12 @@ void main() {
     let currentVisibleObjectIds = /* @__PURE__ */ new Set();
     let currentSelectedObjectId = null;
     let currentHoveredObjectId = null;
-    let currentTimeSeconds = 0;
     let currentPositions = /* @__PURE__ */ new Map();
     let pendingUpdate = null;
     let destroyed = false;
+    let smoothedCameraPosition = null;
+    let smoothedCameraTarget = null;
+    let currentEnvironmentKey = "";
     const objectVisuals = /* @__PURE__ */ new Map();
     const orbitVisuals = /* @__PURE__ */ new Map();
     const raycastTargets = [];
@@ -38884,7 +38913,7 @@ void main() {
         return;
       }
       const scene3d = new THREE.Scene();
-      const camera = new THREE.PerspectiveCamera(52, 1, 0.1, 2e4);
+      const camera = new THREE.PerspectiveCamera(46, 1, 0.1, 24e3);
       const renderer = new THREE.WebGLRenderer({
         antialias: true,
         alpha: true,
@@ -38894,27 +38923,40 @@ void main() {
       renderer.domElement.dataset.worldorbit3dCanvas = "true";
       root.innerHTML = "";
       root.append(renderer.domElement);
-      const ambientLight = new THREE.AmbientLight(16777215, 1.2);
-      const keyLight = new THREE.PointLight(16777215, 1.35, 0, 2);
-      scene3d.add(ambientLight);
-      scene3d.add(keyLight);
+      const ambientLight = new THREE.AmbientLight(16777215, 0.24);
+      const fillLight = new THREE.DirectionalLight(13625855, 0.36);
+      const rimLight = new THREE.DirectionalLight(8304895, 0.24);
+      const keyLight = new THREE.PointLight(16773327, 2.6, 0, 2);
+      fillLight.position.set(-360, 260, 220);
+      rimLight.position.set(340, 180, -280);
       const orbitLayer = new THREE.Group();
       const objectLayer = new THREE.Group();
+      const starfield = createStarfield(THREE, 320);
+      const raycaster = new THREE.Raycaster();
+      raycaster.params.Line = { threshold: 7 };
+      scene3d.add(ambientLight);
+      scene3d.add(fillLight);
+      scene3d.add(rimLight);
+      scene3d.add(keyLight);
+      scene3d.add(starfield);
       scene3d.add(orbitLayer);
       scene3d.add(objectLayer);
-      const raycaster = new THREE.Raycaster();
-      raycaster.params.Line = { threshold: 10 };
       runtime = {
         THREE,
         scene3d,
         camera,
         renderer,
+        ambientLight,
+        fillLight,
+        rimLight,
         keyLight,
+        starfield,
         orbitLayer,
         objectLayer,
         raycaster,
         pointer: new THREE.Vector2()
       };
+      configureRenderer(renderer, THREE, "balanced");
       if (pendingUpdate) {
         applyUpdate(pendingUpdate);
       }
@@ -38973,6 +39015,8 @@ void main() {
         destroyed = true;
         pendingUpdate = null;
         runtime?.renderer.dispose();
+        runtime?.starfield?.geometry?.dispose?.();
+        runtime?.starfield?.material?.dispose?.();
         root.remove();
         objectVisuals.clear();
         orbitVisuals.clear();
@@ -38991,7 +39035,16 @@ void main() {
       currentVisibleObjectIds = next.visibleObjectIds;
       currentSelectedObjectId = next.selectedObjectId;
       currentHoveredObjectId = next.hoveredObjectId;
-      currentTimeSeconds = next.timeSeconds;
+      configureRenderer(runtime.renderer, runtime.THREE, currentRenderOptions?.quality ?? "balanced");
+      const nextEnvironmentKey = JSON.stringify({
+        theme: currentRenderOptions?.theme ?? null,
+        quality: currentRenderOptions?.quality ?? "balanced",
+        style3d: currentRenderOptions?.style3d ?? "symbolic"
+      });
+      if (nextEnvironmentKey !== currentEnvironmentKey) {
+        updateEnvironment(runtime, currentRenderOptions);
+        currentEnvironmentKey = nextEnvironmentKey;
+      }
       if (sceneChanged) {
         rebuildScene(next.spatialScene);
       }
@@ -39001,8 +39054,9 @@ void main() {
       updateOrbitTransforms();
       updateVisibility();
       updateInteractionState();
+      updateLighting();
       updateCamera();
-      renderNow();
+      runtime.renderer.render(runtime.scene3d, runtime.camera);
     }
     function rebuildScene(spatialScene) {
       if (!runtime) {
@@ -39013,8 +39067,9 @@ void main() {
       objectVisuals.clear();
       orbitVisuals.clear();
       raycastTargets.length = 0;
+      smoothedCameraPosition = null;
+      smoothedCameraTarget = null;
       const theme = resolveTheme(currentRenderOptions?.theme);
-      runtime.scene3d.background = new runtime.THREE.Color(theme.backgroundStart);
       for (const orbit of spatialScene.orbits) {
         const visual = createOrbitVisual2(runtime.THREE, orbit, theme);
         runtime.orbitLayer.add(visual.root);
@@ -39032,10 +39087,9 @@ void main() {
       for (const object of currentScene?.objects ?? []) {
         const visual = objectVisuals.get(object.objectId);
         const position = currentPositions.get(object.objectId);
-        if (!visual || !position) {
-          continue;
+        if (visual && position) {
+          visual.root.position.set(position.x, position.y, position.z);
         }
-        visual.root.position.set(position.x, position.y, position.z);
       }
     }
     function updateOrbitTransforms() {
@@ -39056,8 +39110,7 @@ void main() {
           continue;
         }
         const hideStructure = layers.structures === false && (object.object.type === "structure" || object.object.type === "phenomenon");
-        const hideObjects = layers.objects === false;
-        visual.root.visible = !object.hidden && currentVisibleObjectIds.has(object.objectId) && !hideStructure && !hideObjects;
+        visual.root.visible = !object.hidden && currentVisibleObjectIds.has(object.objectId) && layers.objects !== false && !hideStructure;
       }
       for (const orbit of currentScene?.orbits ?? []) {
         const visual = orbitVisuals.get(orbit.objectId);
@@ -39073,14 +39126,27 @@ void main() {
         return;
       }
       for (const visual of objectVisuals.values()) {
-        applyVisualState(runtime.THREE, visual.materials, visual.baseColor, currentSelectedObjectId === visual.objectId, currentHoveredObjectId === visual.objectId);
-        const scale = currentSelectedObjectId === visual.objectId ? 1.2 : currentHoveredObjectId === visual.objectId ? 1.1 : 1;
+        const selected = currentSelectedObjectId === visual.objectId;
+        const hovered = currentHoveredObjectId === visual.objectId;
+        applyVisualState(runtime.THREE, visual.materials, selected, hovered);
+        const scale = selected ? 1.16 : hovered ? 1.08 : 1;
         visual.root.scale.set(scale, scale, scale);
+        if (visual.halo) {
+          visual.halo.visible = selected || hovered;
+        }
       }
       for (const visual of orbitVisuals.values()) {
-        applyVisualState(runtime.THREE, visual.materials, visual.baseColor, currentSelectedObjectId === visual.objectId, currentHoveredObjectId === visual.objectId);
+        applyVisualState(runtime.THREE, visual.materials, currentSelectedObjectId === visual.objectId, currentHoveredObjectId === visual.objectId);
       }
     }
+    function updateLighting() {
+      if (!runtime || !currentScene) {
+        return;
+      }
+      const primaryStar = currentScene.objects.find((object) => object.object.type === "star" && !object.hidden) ?? null;
+      const starPosition = primaryStar ? currentPositions.get(primaryStar.objectId) ?? primaryStar.position : { x: 0, y: 40, z: 0 };
+      runtime.keyLight.position.set(starPosition.x, starPosition.y + 20, starPosition.z);
+    }
     function updateCamera() {
       if (!runtime || !currentScene || !currentState) {
         return;
@@ -39088,19 +39154,27 @@ void main() {
       const sceneCamera = currentRenderOptions?.camera ?? currentScene.camera;
       const bounds = currentScene.contentBounds;
       const size = Math.max(bounds.width, bounds.depth, bounds.height, 160);
-      const yaw = degreesToRadians3((sceneCamera?.azimuth ?? 34) + currentState.rotationDeg);
-      const pitch = degreesToRadians3(clampValue(sceneCamera?.elevation ?? 24, -75, 75));
-      const zoomDistanceFactor = clampValue(2.4 / Math.max(currentState.scale, 0.1), 0.35, 8);
-      const semanticDistance = clampValue(sceneCamera?.distance ?? 6, 2, 24);
-      const distance = clampValue(size * zoomDistanceFactor * (semanticDistance / 6), 28, 8e3);
+      const yaw = degreesToRadians3((sceneCamera?.azimuth ?? 30) + currentState.rotationDeg);
+      const pitch = degreesToRadians3(clampValue(sceneCamera?.elevation ?? 22, -75, 75));
+      const zoomDistanceFactor = clampValue(2.2 / Math.max(currentState.scale, 0.1), 0.35, 7.2);
+      const semanticDistance = clampValue(sceneCamera?.distance ?? 5.4, 2, 24);
+      const distance = clampValue(size * zoomDistanceFactor * (semanticDistance / 5.4), 24, 8e3);
       const panFactor = Math.max(size / 900, 0.12);
       const target = new runtime.THREE.Vector3(bounds.center.x - currentState.translateX * panFactor, bounds.center.y, bounds.center.z - currentState.translateY * panFactor);
-      runtime.camera.position.set(target.x + distance * Math.cos(pitch) * Math.sin(yaw), target.y + distance * Math.sin(pitch), target.z + distance * Math.cos(pitch) * Math.cos(yaw));
-      runtime.camera.lookAt(target);
+      const desiredPosition = new runtime.THREE.Vector3(target.x + distance * Math.cos(pitch) * Math.sin(yaw), target.y + distance * Math.sin(pitch), target.z + distance * Math.cos(pitch) * Math.cos(yaw));
+      const smoothing = (currentRenderOptions?.style3d ?? "symbolic") === "cinematic" ? 0.16 : 0.32;
+      if (!smoothedCameraPosition || !smoothedCameraTarget) {
+        smoothedCameraPosition = desiredPosition.clone();
+        smoothedCameraTarget = target.clone();
+      } else {
+        smoothedCameraPosition.lerp(desiredPosition, smoothing);
+        smoothedCameraTarget.lerp(target, smoothing);
+      }
+      runtime.camera.position.copy(smoothedCameraPosition);
+      runtime.camera.lookAt(smoothedCameraTarget);
       if (sceneCamera?.roll) {
         runtime.camera.rotation.z = degreesToRadians3(sceneCamera.roll);
       }
-      runtime.keyLight.position.copy(runtime.camera.position);
     }
     function resizeRenderer(spatialScene) {
       if (!runtime) {
@@ -39112,35 +39186,63 @@ void main() {
       runtime.camera.aspect = width / height;
       runtime.camera.updateProjectionMatrix();
     }
-    function renderNow() {
-      if (!runtime) {
-        return;
-      }
-      runtime.renderer.render(runtime.scene3d, runtime.camera);
-    }
   }
   function createObjectVisual(THREE, object, theme) {
     const root = new THREE.Group();
     root.userData.objectId = object.objectId;
     const baseColor = object.fillColor ?? colorForObject(object);
-    const material = new THREE.MeshPhongMaterial({
-      color: baseColor,
-      emissive: object.object.type === "star" ? new THREE.Color(theme.starGlow) : new THREE.Color(0),
-      emissiveIntensity: object.object.type === "star" ? 0.6 : 0.08,
-      transparent: true,
-      opacity: object.object.type === "phenomenon" ? 0.7 : 1
-    });
-    const geometry = geometryForObject(THREE, object);
-    const body = new THREE.Mesh(geometry, material);
+    const materials = [];
+    const bodyMaterial = materialForObject(THREE, object, baseColor, theme);
+    const body = new THREE.Mesh(geometryForObject(THREE, object), bodyMaterial.material);
     body.userData.objectId = object.objectId;
     root.add(body);
-    return {
-      objectId: object.objectId,
-      root,
-      body,
-      materials: [material],
-      baseColor
-    };
+    materials.push(bodyMaterial);
+    if (shouldRenderAtmosphere(object)) {
+      const atmosphereMaterial = {
+        material: new THREE.MeshBasicMaterial({
+          color: theme.atmosphere,
+          transparent: true,
+          opacity: 0.24,
+          depthWrite: false,
+          side: 2
+        }),
+        baseColor: theme.atmosphere,
+        baseOpacity: 0.24,
+        hoveredOpacity: 0.34,
+        selectedOpacity: 0.42
+      };
+      const atmosphere = new THREE.Mesh(new THREE.SphereGeometry(Math.max(object.visualRadius, 2) * 1.16, 20, 14), atmosphereMaterial.material);
+      atmosphere.userData.objectId = object.objectId;
+      root.add(atmosphere);
+      materials.push(atmosphereMaterial);
+    }
+    if (object.object.type === "comet") {
+      const tailMaterial = {
+        material: new THREE.MeshBasicMaterial({
+          color: theme.cometTail,
+          transparent: true,
+          opacity: 0.36,
+          depthWrite: false
+        }),
+        baseColor: theme.cometTail,
+        baseOpacity: 0.36,
+        hoveredOpacity: 0.48,
+        selectedOpacity: 0.56
+      };
+      const tail = new THREE.Mesh(new THREE.ConeGeometry(Math.max(object.visualRadius * 0.55, 2), Math.max(object.visualRadius * 2.8, 8), 12, 1, true), tailMaterial.material);
+      tail.position.set(-Math.max(object.visualRadius * 1.4, 4), 0, 0);
+      tail.rotation.z = -Math.PI / 2;
+      tail.userData.objectId = object.objectId;
+      root.add(tail);
+      materials.push(tailMaterial);
+    }
+    const halo = createHalo(THREE, object, theme);
+    if (halo) {
+      halo.visible = false;
+      halo.userData.objectId = object.objectId;
+      root.add(halo);
+    }
+    return { objectId: object.objectId, root, halo, materials };
   }
   function createOrbitVisual2(THREE, orbit, theme) {
     const root = new THREE.Group();
@@ -39148,60 +39250,174 @@ void main() {
     root.rotation.y = degreesToRadians3(orbit.rotationDeg);
     root.rotation.x = degreesToRadians3(orbit.inclinationDeg);
     const baseColor = orbit.object.properties.color ?? theme.orbit;
-    const materials = [];
     if (orbit.band) {
-      const material = new THREE.MeshBasicMaterial({
-        color: baseColor,
-        transparent: true,
-        opacity: 0.42,
-        side: 2
-      });
-      const geometry = bandGeometryForOrbit(THREE, orbit);
-      const mesh = new THREE.Mesh(geometry, material);
+      const material2 = {
+        material: new THREE.MeshBasicMaterial({
+          color: baseColor,
+          transparent: true,
+          opacity: theme.orbitBandOpacity,
+          side: 2,
+          depthWrite: false
+        }),
+        baseColor,
+        baseOpacity: theme.orbitBandOpacity,
+        hoveredOpacity: Math.min(theme.orbitBandOpacity + 0.1, 0.58),
+        selectedOpacity: Math.min(theme.orbitBandOpacity + 0.18, 0.72),
+        hoveredColor: theme.accent,
+        selectedColor: theme.accentStrong
+      };
+      const mesh = new THREE.Mesh(bandGeometryForOrbit(THREE, orbit), material2.material);
       mesh.userData.objectId = orbit.objectId;
       root.add(mesh);
-      materials.push(material);
-    } else {
-      const material = new THREE.LineBasicMaterial({
+      return { objectId: orbit.objectId, root, materials: [material2] };
+    }
+    const material = {
+      material: new THREE.LineBasicMaterial({
         color: baseColor,
         transparent: true,
-        opacity: 0.55
-      });
-      const points = sampleOrbitPoints(THREE, orbit);
-      const geometry = new THREE.BufferGeometry().setFromPoints(points);
-      const line = new THREE.LineLoop(geometry, material);
-      line.userData.objectId = orbit.objectId;
-      root.add(line);
-      materials.push(material);
-    }
+        opacity: theme.orbitOpacity
+      }),
+      baseColor,
+      baseOpacity: theme.orbitOpacity,
+      hoveredOpacity: Math.min(theme.orbitOpacity + 0.18, 0.72),
+      selectedOpacity: Math.min(theme.orbitOpacity + 0.3, 0.88),
+      hoveredColor: theme.accent,
+      selectedColor: theme.accentStrong
+    };
+    const geometry = new THREE.BufferGeometry().setFromPoints(sampleOrbitPoints(THREE, orbit, 120));
+    const line = new THREE.LineLoop(geometry, material.material);
+    line.userData.objectId = orbit.objectId;
+    root.add(line);
+    return { objectId: orbit.objectId, root, materials: [material] };
+  }
+  function materialForObject(THREE, object, baseColor, theme) {
+    if (object.object.type === "star") {
+      return {
+        material: new THREE.MeshStandardMaterial({
+          color: baseColor,
+          emissive: new THREE.Color(theme.starGlow),
+          emissiveIntensity: 1.2,
+          roughness: 0.35,
+          metalness: 0.02
+        }),
+        baseColor,
+        baseOpacity: 1,
+        hoveredOpacity: 1,
+        selectedOpacity: 1,
+        hoveredColor: theme.starCore,
+        selectedColor: "#fff2c4",
+        baseEmissive: theme.starGlow,
+        hoveredEmissive: theme.starGlow,
+        selectedEmissive: "#fff6cc",
+        baseEmissiveIntensity: 1.2,
+        hoveredEmissiveIntensity: 1.5,
+        selectedEmissiveIntensity: 1.8
+      };
+    }
+    if (object.object.type === "phenomenon") {
+      return {
+        material: new THREE.MeshPhongMaterial({
+          color: baseColor,
+          transparent: true,
+          opacity: 0.7,
+          emissive: new THREE.Color(baseColor),
+          emissiveIntensity: 0.32,
+          shininess: 90
+        }),
+        baseColor,
+        baseOpacity: 0.7,
+        hoveredOpacity: 0.82,
+        selectedOpacity: 0.9,
+        hoveredColor: theme.accent,
+        selectedColor: theme.selectionHalo,
+        baseEmissive: baseColor,
+        hoveredEmissive: theme.accent,
+        selectedEmissive: theme.selectionHalo,
+        baseEmissiveIntensity: 0.32,
+        hoveredEmissiveIntensity: 0.52,
+        selectedEmissiveIntensity: 0.74
+      };
+    }
+    const shininess = object.object.type === "structure" ? 70 : object.object.type === "ring" ? 42 : object.object.type === "belt" ? 26 : 36;
     return {
-      objectId: orbit.objectId,
-      root,
-      materials,
-      baseColor
+      material: new THREE.MeshPhongMaterial({
+        color: baseColor,
+        specular: new THREE.Color(theme.objectSpecular),
+        shininess,
+        transparent: false,
+        opacity: 1,
+        emissive: new THREE.Color(0),
+        emissiveIntensity: 0.02
+      }),
+      baseColor,
+      baseOpacity: 1,
+      hoveredOpacity: 1,
+      selectedOpacity: 1,
+      hoveredColor: shiftColorLightness(THREE, baseColor, 0.08),
+      selectedColor: shiftColorLightness(THREE, baseColor, 0.16),
+      hoveredEmissive: "#8fcaff",
+      selectedEmissive: theme.selectionHalo,
+      baseEmissiveIntensity: 0.02,
+      hoveredEmissiveIntensity: 0.12,
+      selectedEmissiveIntensity: 0.22
     };
   }
   function geometryForObject(THREE, object) {
     const radius = Math.max(object.visualRadius, 2);
     switch (object.object.type) {
       case "star":
-        return new THREE.SphereGeometry(radius * 1.12, 28, 20);
+        return new THREE.SphereGeometry(radius * 1.14, 34, 24);
       case "structure":
-        return new THREE.BoxGeometry(radius * 1.5, radius * 1.5, radius * 1.5);
+        return geometryForStructure(THREE, object, radius);
       case "phenomenon":
-        return new THREE.OctahedronGeometry(radius * 1.25, 0);
+        return new THREE.IcosahedronGeometry(radius * 1.12, 1);
       case "belt":
+        return new THREE.TorusGeometry(Math.max(radius * 1.15, 4), Math.max(radius * 0.28, 1), 10, 24);
       case "ring":
-        return new THREE.OctahedronGeometry(Math.max(radius * 0.85, 3), 0);
+        return new THREE.TorusGeometry(Math.max(radius, 4), Math.max(radius * 0.18, 0.8), 10, 30);
+      case "asteroid":
+        return new THREE.DodecahedronGeometry(radius, 0);
+      case "comet":
+        return new THREE.SphereGeometry(radius * 0.94, 18, 14);
       default:
-        return new THREE.SphereGeometry(radius, 20, 14);
+        return new THREE.SphereGeometry(radius, 24, 18);
+    }
+  }
+  function geometryForStructure(THREE, object, radius) {
+    const kind = String(object.object.properties.kind ?? "").toLowerCase();
+    if (kind.includes("relay")) {
+      return new THREE.OctahedronGeometry(radius * 1.15, 0);
+    }
+    if (kind.includes("elevator") || kind.includes("skyhook")) {
+      return new THREE.CylinderGeometry(radius * 0.36, radius * 0.52, radius * 2.4, 10);
+    }
+    if (kind.includes("station")) {
+      return new THREE.TorusKnotGeometry(radius * 0.6, Math.max(radius * 0.18, 0.6), 42, 8);
+    }
+    return new THREE.BoxGeometry(radius * 1.45, radius * 1.2, radius * 1.45);
+  }
+  function createHalo(THREE, object, theme) {
+    const radius = Math.max(object.visualRadius, 2);
+    const geometry = object.object.type === "structure" ? new THREE.BoxGeometry(radius * 2.2, radius * 2.2, radius * 2.2) : new THREE.SphereGeometry(radius * 1.38, 18, 14);
+    return new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
+      color: theme.selectionHalo,
+      transparent: true,
+      opacity: 0.18,
+      depthWrite: false,
+      side: 1
+    }));
+  }
+  function shouldRenderAtmosphere(object) {
+    if (object.object.type !== "planet" && object.object.type !== "moon") {
+      return false;
     }
+    return object.object.properties.atmosphere !== void 0;
   }
   function bandGeometryForOrbit(THREE, orbit) {
     const thickness = Math.max(orbit.bandThickness ?? 8, 3);
     const points = sampleOrbitPoints(THREE, orbit, 72);
     const curve = new THREE.CatmullRomCurve3(points, true);
-    return new THREE.TubeGeometry(curve, 128, thickness * 0.28, 10, true);
+    return new THREE.TubeGeometry(curve, 144, thickness * 0.18, 10, true);
   }
   function sampleOrbitPoints(THREE, orbit, segments = 96) {
     const points = [];
@@ -39213,6 +39429,94 @@ void main() {
     }
     return points;
   }
+  function createStarfield(THREE, count) {
+    const geometry = new THREE.BufferGeometry();
+    const positions = new Float32Array(count * 3);
+    const colors = new Float32Array(count * 3);
+    for (let index = 0; index < count; index += 1) {
+      const offset = index * 3;
+      const radius = 1800 + Math.random() * 2600;
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(2 * Math.random() - 1);
+      positions[offset] = radius * Math.sin(phi) * Math.cos(theta);
+      positions[offset + 1] = radius * Math.cos(phi) * 0.45;
+      positions[offset + 2] = radius * Math.sin(phi) * Math.sin(theta);
+    }
+    geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+    geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+    return new THREE.Points(geometry, new THREE.PointsMaterial({
+      size: 5,
+      transparent: true,
+      opacity: 0.84,
+      depthWrite: false,
+      vertexColors: true,
+      sizeAttenuation: true
+    }));
+  }
+  function configureRenderer(renderer, THREE, quality) {
+    const pixelRatioCap = quality === "high" ? 2.4 : quality === "low" ? 1.2 : 1.8;
+    renderer.setPixelRatio?.(Math.min(globalThis.window?.devicePixelRatio ?? 1, pixelRatioCap));
+    if ("outputColorSpace" in renderer && "SRGBColorSpace" in THREE) {
+      renderer.outputColorSpace = THREE.SRGBColorSpace;
+    } else if ("outputEncoding" in renderer && "sRGBEncoding" in THREE) {
+      renderer.outputEncoding = THREE.sRGBEncoding;
+    }
+    if ("ACESFilmicToneMapping" in THREE) {
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    }
+  }
+  function updateEnvironment(runtime, renderOptions) {
+    const theme = resolveTheme(renderOptions?.theme);
+    const quality = renderOptions?.quality ?? "balanced";
+    const style3d = renderOptions?.style3d ?? "symbolic";
+    const count = quality === "high" ? 520 : quality === "low" ? 180 : 320;
+    const positions = new Float32Array(count * 3);
+    const colors = new Float32Array(count * 3);
+    const bright = new runtime.THREE.Color(theme.starfield);
+    const dim = new runtime.THREE.Color(theme.starfieldDim);
+    for (let index = 0; index < count; index += 1) {
+      const offset = index * 3;
+      const radius = 1800 + Math.random() * 2600;
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(2 * Math.random() - 1);
+      positions[offset] = radius * Math.sin(phi) * Math.cos(theta);
+      positions[offset + 1] = radius * Math.cos(phi) * 0.45;
+      positions[offset + 2] = radius * Math.sin(phi) * Math.sin(theta);
+      const color = Math.random() > 0.72 ? bright : dim;
+      colors[offset] = color.r;
+      colors[offset + 1] = color.g;
+      colors[offset + 2] = color.b;
+    }
+    runtime.scene3d.background = new runtime.THREE.Color(theme.backgroundStart);
+    runtime.scene3d.fog = new runtime.THREE.FogExp2(theme.spaceFog, 85e-5);
+    runtime.ambientLight.intensity = style3d === "cinematic" ? 0.18 : 0.26;
+    runtime.fillLight.intensity = style3d === "cinematic" ? 0.32 : 0.4;
+    runtime.rimLight.intensity = style3d === "cinematic" ? 0.28 : 0.22;
+    runtime.renderer.toneMappingExposure = style3d === "cinematic" ? 1.18 : 1.08;
+    runtime.starfield.geometry.setAttribute("position", new runtime.THREE.BufferAttribute(positions, 3));
+    runtime.starfield.geometry.setAttribute("color", new runtime.THREE.BufferAttribute(colors, 3));
+    runtime.starfield.material.opacity = quality === "high" ? 0.96 : quality === "low" ? 0.72 : 0.84;
+    runtime.starfield.material.size = quality === "high" ? 5.5 : quality === "low" ? 4.25 : 5;
+  }
+  function applyVisualState(THREE, materials, selected, hovered) {
+    for (const entry of materials) {
+      const material = entry.material;
+      if (!material) {
+        continue;
+      }
+      const color = selected ? entry.selectedColor ?? entry.baseColor : hovered ? entry.hoveredColor ?? entry.baseColor : entry.baseColor;
+      material.color?.set?.(new THREE.Color(color));
+      if (typeof material.opacity === "number") {
+        material.opacity = selected ? entry.selectedOpacity : hovered ? entry.hoveredOpacity : entry.baseOpacity;
+        material.transparent = material.opacity < 0.999;
+      }
+      const emissive = selected ? entry.selectedEmissive ?? entry.baseEmissive : hovered ? entry.hoveredEmissive ?? entry.baseEmissive : entry.baseEmissive;
+      material.emissive?.set?.(emissive ? new THREE.Color(emissive) : new THREE.Color(0));
+      if ("emissiveIntensity" in material) {
+        material.emissiveIntensity = selected ? entry.selectedEmissiveIntensity ?? entry.baseEmissiveIntensity ?? 0 : hovered ? entry.hoveredEmissiveIntensity ?? entry.baseEmissiveIntensity ?? 0 : entry.baseEmissiveIntensity ?? 0;
+      }
+    }
+  }
   function colorForObject(object) {
     switch (object.object.type) {
       case "star":
@@ -39235,35 +39539,23 @@ void main() {
         return "#b8f2ff";
     }
   }
-  function applyVisualState(THREE, materials, baseColor, selected, hovered) {
-    const color = new THREE.Color(baseColor);
-    if (selected) {
-      color.offsetHSL(0, 0, 0.16);
-    } else if (hovered) {
-      color.offsetHSL(0, 0, 0.08);
-    }
-    for (const material of materials) {
-      if (!material) {
-        continue;
-      }
-      material.color?.set?.(color);
-      if (typeof material.opacity === "number") {
-        material.opacity = selected ? 0.85 : hovered ? 0.72 : material.transparent ? 0.55 : 1;
-      }
-      material.emissive?.set?.(selected ? new THREE.Color("#ffdda9") : hovered ? new THREE.Color("#cfe9ff") : new THREE.Color(0));
-      material.emissiveIntensity = selected ? 0.28 : hovered ? 0.14 : material.emissiveIntensity ?? 0.08;
-    }
+  function shiftColorLightness(THREE, colorValue, delta) {
+    const color = new THREE.Color(colorValue);
+    color.offsetHSL(0, 0, delta);
+    return `#${color.getHexString()}`;
   }
   function clearGroup(group) {
     while (group.children.length > 0) {
       const child = group.children[0];
       group.remove(child);
-      child.geometry?.dispose?.();
-      if (Array.isArray(child.material)) {
-        child.material.forEach((entry) => entry?.dispose?.());
-      } else {
-        child.material?.dispose?.();
-      }
+      child.traverse?.((node) => {
+        node.geometry?.dispose?.();
+        if (Array.isArray(node.material)) {
+          node.material.forEach((entry) => entry?.dispose?.());
+        } else {
+          node.material?.dispose?.();
+        }
+      });
     }
   }
   function ensureWebGLSupport() {
@@ -39527,6 +39819,8 @@ void main() {
       preset: options.preset,
       projection: options.projection,
       viewMode: options.viewMode ?? "2d",
+      quality: options.quality ?? "balanced",
+      style3d: options.style3d ?? "symbolic",
       camera: options.camera ? { ...options.camera } : null,
       scaleModel: options.scaleModel ? { ...options.scaleModel } : void 0,
       theme: options.theme,
@@ -39546,6 +39840,7 @@ void main() {
     let cameraRoot = null;
     let runtime3d = null;
     let minimapRoot = null;
+    let labelRoot = null;
     let tooltipRoot = null;
     let suppressClick = false;
     let activePointerId = null;
@@ -39570,7 +39865,7 @@ void main() {
     if (previousTabIndex === null) {
       container.tabIndex = 0;
     }
-    installViewerTooltipStyles();
+    installViewerOverlayStyles();
     container.classList.add("wo-viewer-container");
     container.style.touchAction = behavior.touch ? "none" : previousTouchAction;
     if (!container.style.position) {
@@ -40120,6 +40415,8 @@ void main() {
         stopAnimationLoop();
         runtime3d?.destroy();
         runtime3d = null;
+        labelRoot?.remove();
+        labelRoot = null;
         tooltipRoot?.remove();
         tooltipRoot = null;
         minimapRoot?.remove();
@@ -40150,6 +40447,7 @@ void main() {
       svgElement = null;
       cameraRoot = null;
       minimapRoot = null;
+      labelRoot = null;
       tooltipRoot = null;
       if (is3DView()) {
         spatialScene = spatialScene ?? renderSpatialSceneFromInput(currentInput, renderOptions, providedSpatialScene);
@@ -40168,6 +40466,10 @@ void main() {
         minimapRoot.dataset.worldorbitMinimapRoot = "true";
         container.append(minimapRoot);
       }
+      labelRoot = document.createElement("div");
+      labelRoot.className = "wo-viewer-label-root";
+      labelRoot.dataset.worldorbitLabelRoot = "true";
+      container.append(labelRoot);
       if (behavior.tooltipMode !== "disabled") {
         tooltipRoot = document.createElement("div");
         tooltipRoot.className = "wo-viewer-tooltip-root";
@@ -40179,6 +40481,7 @@ void main() {
       if (!is3DView() && (!svgElement || !cameraRoot)) {
         throw new Error("Interactive viewer could not locate the rendered SVG camera root.");
       }
+      suppressStaticLabelLayers();
       state = resetView ? is3DView() ? { ...DEFAULT_VIEWER_STATE } : fitViewerState(scene, { ...DEFAULT_VIEWER_STATE }, constraints) : sanitizeState(state);
       applySelection(state.selectedObjectId && getObjectById(state.selectedObjectId) ? state.selectedObjectId : null, false);
       applyHover(hoveredObjectId && getObjectById(hoveredObjectId) ? hoveredObjectId : null, false);
@@ -40213,19 +40516,24 @@ void main() {
         return;
       }
       cameraRoot.setAttribute("transform", composeViewerTransform(scene, state));
+      updateScreenLabels();
       updateMinimap();
       updateTooltip();
     }
     function applySelection(objectId, emitCallback = true) {
       if (!is3DView() && state.selectedObjectId) {
-        container.querySelector(`[data-object-id="${cssEscape(state.selectedObjectId)}"]`)?.classList.remove("wo-object-selected");
+        for (const element of container.querySelectorAll(`[data-object-id="${cssEscape(state.selectedObjectId)}"]`)) {
+          element.classList.remove("wo-object-selected");
+        }
       }
       state = {
         ...state,
         selectedObjectId: objectId && getObjectById(objectId) ? objectId : null
       };
       if (!is3DView() && state.selectedObjectId) {
-        container.querySelector(`[data-object-id="${cssEscape(state.selectedObjectId)}"]`)?.classList.add("wo-object-selected");
+        for (const element of container.querySelectorAll(`[data-object-id="${cssEscape(state.selectedObjectId)}"]`)) {
+          element.classList.add("wo-object-selected");
+        }
       }
       syncAtlasHighlights();
       updateTooltip();
@@ -40558,14 +40866,17 @@ void main() {
       };
     }
     function project2DTooltipPoint(renderObject) {
-      if (!svgElement) {
-        return null;
-      }
       const anchor = {
         x: renderObject.anchorX ?? renderObject.x,
         y: renderObject.anchorY ?? renderObject.y - Math.max(renderObject.visualRadius, renderObject.radius)
       };
-      const viewportPoint = projectWorldPoint(anchor);
+      return project2DScenePointToContainer(anchor);
+    }
+    function project2DScenePointToContainer(point) {
+      if (!svgElement) {
+        return null;
+      }
+      const viewportPoint = projectWorldPoint(point);
       const svgRect = svgElement.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
       return {
@@ -40664,9 +40975,182 @@ void main() {
         state,
         timeSeconds: animationState.timeSeconds
       });
+      updateScreenLabels();
       updateMinimap();
       updateTooltip();
     }
+    function suppressStaticLabelLayers() {
+      if (is3DView()) {
+        return;
+      }
+      container.querySelector('[data-layer-id="labels"]')?.setAttribute("display", "none");
+      for (const element of container.querySelectorAll(".wo-event-label")) {
+        element.setAttribute("display", "none");
+      }
+    }
+    function updateScreenLabels() {
+      if (!labelRoot) {
+        return;
+      }
+      const descriptors = buildScreenLabelDescriptors();
+      labelRoot.replaceChildren(...descriptors.map((descriptor) => createScreenLabelElement(descriptor)));
+      labelRoot.hidden = descriptors.length === 0;
+    }
+    function buildScreenLabelDescriptors() {
+      const descriptors = [];
+      const visibleObjectIds = getVisibleObjectIds();
+      if (layerEnabled("labels")) {
+        for (const label of scene.labels) {
+          if (label.hidden || !visibleObjectIds.has(label.objectId)) {
+            continue;
+          }
+          if (is3DView() && !shouldRender3DLabel(label.objectId, visibleObjectIds)) {
+            continue;
+          }
+          const point = is3DView() ? runtime3d?.projectObjectToContainer(label.objectId) ?? null : project2DScenePointToContainer({ x: label.x, y: label.y });
+          if (!point) {
+            continue;
+          }
+          descriptors.push({
+            key: `object:${label.renderId}`,
+            kind: "object",
+            point: is3DView() ? { x: point.x, y: point.y - 18 } : point,
+            textAnchor: label.textAnchor,
+            objectId: label.objectId,
+            primaryText: label.label,
+            secondaryText: label.secondaryLabel,
+            secondaryOffset: Math.max(label.secondaryY - label.y, 12)
+          });
+        }
+      }
+      if (!is3DView() && layerEnabled("events")) {
+        for (const event of scene.events) {
+          if (event.hidden || !isEventVisible(event, visibleObjectIds)) {
+            continue;
+          }
+          const point = project2DScenePointToContainer({ x: event.x, y: event.y - 10 });
+          if (!point) {
+            continue;
+          }
+          descriptors.push({
+            key: `event:${event.renderId}`,
+            kind: "event",
+            point,
+            textAnchor: "middle",
+            primaryText: event.event.label || event.event.id
+          });
+        }
+      }
+      return descriptors;
+    }
+    function isEventVisible(event, visibleObjectIds) {
+      return event.objectIds.some((objectId) => visibleObjectIds.has(objectId));
+    }
+    function shouldRender3DLabel(objectId, visibleObjectIds) {
+      if (!is3DView()) {
+        return true;
+      }
+      if (objectId === state.selectedObjectId || objectId === hoveredObjectId) {
+        return true;
+      }
+      const object = getObjectById(objectId);
+      if (!object || object.hidden || !visibleObjectIds.has(objectId)) {
+        return false;
+      }
+      if (object.object.type === "star") {
+        return true;
+      }
+      const selected = state.selectedObjectId ? buildObjectDetails(state.selectedObjectId) : null;
+      const hovered = hoveredObjectId ? buildObjectDetails(hoveredObjectId) : null;
+      const selectedFocus = selected ? /* @__PURE__ */ new Set([
+        selected.objectId,
+        ...selected.renderObject.ancestorIds,
+        ...selected.renderObject.childIds
+      ]) : null;
+      const hoveredFocus = hovered ? /* @__PURE__ */ new Set([
+        hovered.objectId,
+        ...hovered.renderObject.ancestorIds,
+        ...hovered.renderObject.childIds
+      ]) : null;
+      if (selectedFocus?.has(objectId) || hoveredFocus?.has(objectId)) {
+        return true;
+      }
+      if (object.semanticGroupIds.length > 0 && object.visualRadius >= 12) {
+        return true;
+      }
+      return object.childIds.length > 0 && object.visualRadius >= 10;
+    }
+    function createScreenLabelElement(descriptor) {
+      const element = document.createElement("div");
+      element.className = `wo-viewer-label wo-viewer-label-${descriptor.kind}`;
+      element.dataset.worldorbitScreenLabel = "true";
+      element.dataset.labelKey = descriptor.key;
+      element.dataset.anchor = descriptor.textAnchor;
+      element.style.left = `${descriptor.point.x}px`;
+      element.style.top = `${descriptor.point.y}px`;
+      if (descriptor.objectId) {
+        element.dataset.objectId = descriptor.objectId;
+        for (const className of resolveScreenLabelClasses(descriptor.objectId)) {
+          element.classList.add(className);
+        }
+      }
+      const primary = document.createElement("span");
+      primary.className = "wo-viewer-label-primary";
+      if (descriptor.kind === "object") {
+        primary.style.fontSize = `${14 * scene.scaleModel.labelMultiplier}px`;
+      }
+      primary.textContent = descriptor.primaryText;
+      element.append(primary);
+      if (descriptor.secondaryText) {
+        const secondary = document.createElement("span");
+        secondary.className = "wo-viewer-label-secondary";
+        secondary.style.fontSize = `${11 * scene.scaleModel.labelMultiplier}px`;
+        secondary.style.marginTop = `${Math.max(descriptor.secondaryOffset ?? 12, 10) - 10}px`;
+        secondary.textContent = descriptor.secondaryText;
+        element.append(secondary);
+      }
+      return element;
+    }
+    function layerEnabled(id) {
+      return renderOptions.layers?.[id] !== false;
+    }
+    function resolveScreenLabelClasses(objectId) {
+      const classes = [];
+      const selectedDetails = buildObjectDetails(state.selectedObjectId);
+      const hoveredDetails = buildObjectDetails(hoveredObjectId);
+      if (state.selectedObjectId === objectId) {
+        classes.push("wo-object-selected");
+      }
+      if (selectedDetails) {
+        const selectedChain = /* @__PURE__ */ new Set([
+          selectedDetails.objectId,
+          ...selectedDetails.renderObject.childIds,
+          ...selectedDetails.renderObject.ancestorIds
+        ]);
+        const selectedAncestors = new Set(selectedDetails.ancestors.map((ancestor) => ancestor.objectId));
+        if (selectedChain.has(objectId)) {
+          classes.push("wo-chain-selected");
+        }
+        if (selectedAncestors.has(objectId)) {
+          classes.push("wo-ancestor-selected");
+        }
+      }
+      if (hoveredDetails) {
+        const hoveredChain = /* @__PURE__ */ new Set([
+          hoveredDetails.objectId,
+          ...hoveredDetails.renderObject.childIds,
+          ...hoveredDetails.renderObject.ancestorIds
+        ]);
+        const hoveredAncestors = new Set(hoveredDetails.ancestors.map((ancestor) => ancestor.objectId));
+        if (hoveredChain.has(objectId)) {
+          classes.push("wo-chain-hover");
+        }
+        if (hoveredAncestors.has(objectId)) {
+          classes.push("wo-ancestor-hover");
+        }
+      }
+      return classes;
+    }
     function create3DFocusState(objectId) {
       const target = spatialScene?.focusTargets.find((entry) => entry.objectId === objectId);
       if (!target) {
@@ -40732,7 +41216,9 @@ void main() {
       layers: renderOptions.layers ? { ...renderOptions.layers } : void 0,
       theme: renderOptions.theme && typeof renderOptions.theme === "object" ? { ...renderOptions.theme } : renderOptions.theme,
       activeEventId: renderOptions.activeEventId ?? null,
-      viewMode: renderOptions.viewMode ?? "2d"
+      viewMode: renderOptions.viewMode ?? "2d",
+      quality: renderOptions.quality ?? "balanced",
+      style3d: renderOptions.style3d ?? "symbolic"
     };
   }
   function mergeRenderOptions(current, next) {
@@ -40750,7 +41236,9 @@ void main() {
         ...next.layers
       } : current.layers ? { ...current.layers } : void 0,
       theme: next.theme && typeof next.theme === "object" ? { ...next.theme } : next.theme ?? current.theme,
-      viewMode: next.viewMode ?? current.viewMode ?? "2d"
+      viewMode: next.viewMode ?? current.viewMode ?? "2d",
+      quality: next.quality ?? current.quality ?? "balanced",
+      style3d: next.style3d ?? current.style3d ?? "symbolic"
     };
   }
   function hasSceneAffectingRenderOptions(options) {
@@ -40918,7 +41406,7 @@ void main() {
     }
     return value.replace(/["\\]/g, "\\$&");
   }
-  function installViewerTooltipStyles() {
+  function installViewerOverlayStyles() {
     if (typeof document === "undefined" || document.getElementById(TOOLTIP_STYLE_ID)) {
       return;
     }
@@ -40953,6 +41441,60 @@ void main() {
       height: 100%;
       min-height: 320px;
     }
+    .wo-viewer-label-root {
+      position: absolute;
+      inset: 0;
+      z-index: 8;
+      pointer-events: none;
+      overflow: hidden;
+    }
+    .wo-viewer-label {
+      position: absolute;
+      display: grid;
+      gap: 2px;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: linear-gradient(180deg, rgba(5, 16, 26, 0.72), rgba(5, 16, 26, 0.38));
+      border: 1px solid rgba(164, 194, 228, 0.16);
+      color: #edf6ff;
+      font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
+      line-height: 1.15;
+      text-shadow: 0 1px 2px rgba(7, 16, 25, 0.65), 0 0 18px rgba(7, 16, 25, 0.18);
+      white-space: nowrap;
+    }
+    .wo-viewer-label[data-anchor="middle"] { transform: translate(-50%, 0); }
+    .wo-viewer-label[data-anchor="end"] { transform: translate(-100%, 0); }
+    .wo-viewer-label-primary {
+      font-size: 14px;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+    }
+    .wo-viewer-label-secondary {
+      font-size: 11px;
+      font-weight: 500;
+      color: rgba(237, 246, 255, 0.72);
+    }
+    .wo-viewer-label-event {
+      color: #ffce8a;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+    .wo-viewer-label-event .wo-viewer-label-primary {
+      font-size: 10px;
+      font-weight: 700;
+    }
+    .wo-viewer-label.wo-object-selected .wo-viewer-label-primary,
+    .wo-viewer-label.wo-chain-selected .wo-viewer-label-primary,
+    .wo-viewer-label.wo-chain-hover .wo-viewer-label-primary {
+      color: #ffce8a;
+    }
+    .wo-viewer-label.wo-object-selected .wo-viewer-label-secondary {
+      color: #8fcaff;
+    }
+    .wo-viewer-label.wo-ancestor-selected .wo-viewer-label-primary,
+    .wo-viewer-label.wo-ancestor-hover .wo-viewer-label-primary {
+      opacity: 0.82;
+    }
     .wo-viewer-tooltip-root {
       position: absolute;
       z-index: 12;
@@ -41087,6 +41629,7 @@ void main() {
   }
   function mountWorldOrbitEmbeds(root = document, options = {}) {
     const viewers = /* @__PURE__ */ new Map();
+    const cleanupCallbacks = [];
     const elements = [...root.querySelectorAll(EMBED_SELECTOR)];
     for (const element of elements) {
       const payload = deserializePayloadFromElement(element);
@@ -41100,14 +41643,16 @@ void main() {
       const initialSelectionObjectId = options.viewer?.initialSelectionObjectId ?? payload.options?.initialSelectionObjectId;
       const minimap = options.viewer?.minimap ?? payload.options?.minimap;
       const viewMode = options.viewer?.viewMode ?? payload.options?.viewMode ?? embedModeToViewMode(mode);
+      const measureViewport = () => resolveEmbedViewport(element, payload.scene, options);
       if (mode === "interactive-2d" || mode === "interactive-3d") {
         try {
+          const viewport = measureViewport();
           const viewer = createInteractiveViewer(element, {
             ...options.viewer,
             scene: payload.scene,
             spatialScene: payload.spatialScene,
-            width: options.width ?? payload.scene.width,
-            height: options.height ?? payload.scene.height,
+            width: viewport.width,
+            height: viewport.height,
             padding: options.padding ?? payload.scene.padding,
             preset,
             theme,
@@ -41123,6 +41668,13 @@ void main() {
             viewer.setAtlasState(payload.options.atlasState);
           }
           viewers.set(element, viewer);
+          cleanupCallbacks.push(bindEmbedResize(element, () => {
+            const nextViewport = measureViewport();
+            viewer.setRenderOptions({
+              width: nextViewport.width,
+              height: nextViewport.height
+            });
+          }));
           options.onMount?.(viewer, element);
         } catch (error2) {
           if (error2 instanceof WorldOrbit3DUnavailableError && mode === "interactive-3d") {
@@ -41133,17 +41685,22 @@ void main() {
           }
         }
       } else {
-        element.innerHTML = renderSceneToSvg(payload.scene, {
-          width: options.width ?? payload.scene.width,
-          height: options.height ?? payload.scene.height,
-          padding: options.padding ?? payload.scene.padding,
-          preset,
-          theme,
-          layers,
-          filter: initialFilter,
-          selectedObjectId: initialSelectionObjectId ?? null,
-          subtitle
-        });
+        const renderStaticEmbed = () => {
+          const viewport = measureViewport();
+          element.innerHTML = renderSceneToSvg(payload.scene, {
+            width: viewport.width,
+            height: viewport.height,
+            padding: options.padding ?? payload.scene.padding,
+            preset,
+            theme,
+            layers,
+            filter: initialFilter,
+            selectedObjectId: initialSelectionObjectId ?? null,
+            subtitle
+          });
+        };
+        renderStaticEmbed();
+        cleanupCallbacks.push(bindEmbedResize(element, renderStaticEmbed));
         options.onMount?.(null, element);
       }
       element.dataset.worldorbitMounted = "true";
@@ -41151,14 +41708,65 @@ void main() {
     return {
       viewers: [...viewers.values()],
       destroy() {
+        for (const cleanup of cleanupCallbacks) {
+          cleanup();
+        }
         for (const [element, viewer] of viewers.entries()) {
           viewer.destroy();
           element.removeAttribute("data-worldorbit-mounted");
         }
+        for (const element of elements) {
+          element.removeAttribute("data-worldorbit-mounted");
+        }
         viewers.clear();
       }
     };
   }
+  function resolveEmbedViewport(element, scene, options) {
+    const rect = element.getBoundingClientRect();
+    const width = sanitizeViewportDimension(options.width) ?? sanitizeViewportDimension(element.clientWidth) ?? sanitizeViewportDimension(rect.width) ?? scene.width;
+    const explicitHeight = sanitizeViewportDimension(options.height) ?? sanitizeViewportDimension(element.clientHeight) ?? sanitizeViewportDimension(rect.height);
+    const fallbackHeight = Math.max(Math.round(width * (scene.height / Math.max(scene.width, 1))), Math.min(scene.height, 240));
+    return {
+      width,
+      height: explicitHeight ?? fallbackHeight
+    };
+  }
+  function sanitizeViewportDimension(value) {
+    return typeof value === "number" && Number.isFinite(value) && value > 0 ? Math.round(value) : null;
+  }
+  function bindEmbedResize(element, callback) {
+    let lastWidth = -1;
+    let lastHeight = -1;
+    const run = () => {
+      const rect = element.getBoundingClientRect();
+      const nextWidth = Math.round(Math.max(element.clientWidth || rect.width, 0));
+      const nextHeight = Math.round(Math.max(element.clientHeight || rect.height, 0));
+      if (nextWidth === lastWidth && nextHeight === lastHeight) {
+        return;
+      }
+      lastWidth = nextWidth;
+      lastHeight = nextHeight;
+      callback();
+    };
+    run();
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => {
+        run();
+      });
+      observer.observe(element);
+      return () => {
+        observer.disconnect();
+      };
+    }
+    const handleWindowResize = () => {
+      run();
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }
   function deserializePayloadFromElement(element) {
     const serialized = element.dataset.worldorbitPayload;
     if (!serialized) {