astro-viewer 3.10.0 → 3.12.0

package/dist/astroviewer.js

@@ -53,6 +53,7 @@ __webpack_require__.d(vec3_namespaceObject, {
   dot: () => (dot),
   fromValues: () => (vec3_fromValues),
   length: () => (vec3_length),
+  lerp: () => (lerp),
   normalize: () => (normalize),
   scale: () => (vec3_scale),
   scaleAndAdd: () => (scaleAndAdd),
@@ -3640,12 +3641,18 @@ class AstroSphere {
     _activeHiPS = null;
     _activeHiPSLayers = [];
     _activeXYZ2 = null;
+    _earthRasterOverlays = [];
+    _earthRasterOverlaySequence = 0;
     _activeMeshHiPS = null;
     _activeBaseLayer = null;
+    _activeDomain = "astronomy";
+    domainCameraStates = {};
     startup = true;
     fov;
-    activeCatalogues = [];
-    activeFootprintSets = [];
+    astronomyCatalogues = [];
+    earthPointSets = [];
+    astronomyFootprintSets = [];
+    earthFootprintSets = [];
     activePolylineSets = [];
     activeSensorCones = [];
     activeSatelliteObjects = [];
@@ -3878,9 +3885,7 @@ class AstroSphere {
         return true;
     }
     emitCameraChanged(reason) {
-        // avoid dispatch before scene is ready
-        if (!this._activeHiPS && !this._activeXYZ2 && !this._activeMeshHiPS)
-            return;
+        // Camera interaction remains meaningful even when no base layer is active.
         if (!this._healpixGrid?.fovObj)
             return;
         const detail = this.getCurrentStatus();
@@ -3906,6 +3911,7 @@ class AstroSphere {
         const handleMouseDown = (event) => {
             canvas.setPointerCapture(event.pointerId);
             this.mouseDown = true;
+            this._camera.cancelFlyTo();
             const rect = canvas.getBoundingClientRect();
             this.lastMouseX = event.clientX - rect.left; // locale al canvas
             this.lastMouseY = event.clientY - rect.top; // locale al canvas
@@ -3944,8 +3950,11 @@ class AstroSphere {
                 if (mousePoint && mousePoint.length > 0) {
                     this.mouseHelper.update(mousePoint);
                     this.updateLastMousePoint();
-                    for (const cat of this.activeCatalogues) {
-                        const clickResult = cat.selectPrimarySourceFromClick(this.mouseHelper);
+                    for (const cat of this.getActivePointSets()) {
+                        const activeModelMatrix = this.getActiveDomainModelMatrix();
+                        if (!activeModelMatrix)
+                            continue;
+                        const clickResult = cat.selectPrimarySourceFromClick(this.mouseHelper, activeModelMatrix, this._camera.getCameraMatrix(), this._perspectiveMatrixManager.pMatrix);
                         if (!clickResult?.sources.length)
                             continue;
                         this._webgl.canvas.dispatchEvent(new CustomEvent("source-clicked", {
@@ -3958,7 +3967,7 @@ class AstroSphere {
                             composed: true,
                         }));
                     }
-                    for (const fset of this.activeFootprintSets) {
+                    for (const fset of this.getActiveFootprintSets()) {
                         const clickResult = fset.selectPrimaryFootprintFromClick(this.mouseHelper);
                         if (!clickResult?.footprints.length)
                             continue;
@@ -4032,6 +4041,7 @@ class AstroSphere {
         const handleMouseWheel = (event) => {
             const currentFov = this._healpixGrid.getMinFoV();
             const zoomStep = this.computeZoomStep(currentFov, event.deltaY);
+            this._camera.cancelFlyTo();
             // Apply wheel zoom immediately and discard any queued inertia so reversing
             // direction feels responsive instead of "buffered".
             this.zoomInertia = 0;
@@ -4054,8 +4064,11 @@ class AstroSphere {
             }
             this.mouseHelper.update(mousePoint);
             this.updateLastMousePoint();
-            for (const cat of this.activeCatalogues) {
-                const pickResult = cat.getSourcesFromPointer(this.mouseHelper);
+            for (const cat of this.getActivePointSets()) {
+                const activeModelMatrix = this.getActiveDomainModelMatrix();
+                if (!activeModelMatrix)
+                    continue;
+                const pickResult = cat.getSourcesFromPointer(this.mouseHelper, activeModelMatrix, this._camera.getCameraMatrix(), this._perspectiveMatrixManager.pMatrix);
                 if (!pickResult?.sources.length)
                     continue;
                 this._webgl.canvas.dispatchEvent(new CustomEvent("source-contextmenu", {
@@ -4070,7 +4083,7 @@ class AstroSphere {
                 }));
                 break;
             }
-            for (const fset of this.activeFootprintSets) {
+            for (const fset of this.getActiveFootprintSets()) {
                 const pickResult = fset.getFootprintsFromPointer(this.mouseHelper);
                 if (!pickResult?.footprints.length)
                     continue;
@@ -4160,19 +4173,22 @@ class AstroSphere {
         return new HiPS_js_1.HiPS(1, [0.0, 0.0, 0.0], 0, 0, hipsDescriptor, this._webgl, this._healpixGrid);
     }
     activateHiPS(hipsDescriptor) {
+        if (this._activeHiPSLayers.length > 0) {
+            throw new Error("Cannot load a HiPS base layer while stacked layers are active.");
+        }
         const tileBuffer = this._healpixGrid.visibleTilesManager.tileBuffer;
-        for (const hips of this._activeHiPSLayers) {
-            tileBuffer.removeHiPS(hips);
+        if (this._activeHiPS) {
+            tileBuffer.removeHiPS(this._activeHiPS);
         }
-        this._activeHiPSLayers = [];
         const hips = this.createHiPS(hipsDescriptor);
-        this._activeHiPSLayers.push(hips);
         this._activeHiPS = hips;
+        this._activeDomain = "astronomy";
         this._activeBaseLayer = "hips";
         return hips;
     }
     setHiPSOpacity(hips, opacity) {
-        if (!this._activeHiPSLayers.includes(hips)) {
+        const isBaseLayer = this._activeHiPSLayers.length === 0 && this._activeHiPS === hips;
+        if (!isBaseLayer && !this._activeHiPSLayers.includes(hips)) {
             throw new Error("HiPS layer is not active in this AstroSphere.");
         }
         hips.setOpacity(opacity);
@@ -4180,6 +4196,13 @@ class AstroSphere {
     addHiPS(hipsDescriptor) {
         const normalizeURL = (url) => String(url).replace(/\/+$/, "");
         const descriptorURL = normalizeURL(hipsDescriptor.url);
+        // Entering stack mode discards the standalone base HiPS. Base mode and
+        // stack mode are intentionally mutually exclusive.
+        if (this._activeHiPSLayers.length === 0 && this._activeHiPS) {
+            const tileBuffer = this._healpixGrid.visibleTilesManager.tileBuffer;
+            tileBuffer.removeHiPS(this._activeHiPS);
+            this._activeHiPS = null;
+        }
         const existing = this._activeHiPSLayers.find((hips) => normalizeURL(hips.baseURL) === descriptorURL);
         if (existing) {
             throw new Error(`HiPS already active: ${String(hipsDescriptor.url)}`);
@@ -4187,6 +4210,7 @@ class AstroSphere {
         const hips = this.createHiPS(hipsDescriptor);
         this._activeHiPSLayers.push(hips);
         this._activeHiPS = hips;
+        this._activeDomain = "astronomy";
         this._activeBaseLayer = "hips";
         return hips;
     }
@@ -4211,8 +4235,13 @@ class AstroSphere {
     }
     removeAllHiPS() {
         const tileBuffer = this._healpixGrid.visibleTilesManager.tileBuffer;
-        for (const hips of this._activeHiPSLayers) {
-            tileBuffer.removeHiPS(hips);
+        if (this._activeHiPSLayers.length === 0 && this._activeHiPS) {
+            tileBuffer.removeHiPS(this._activeHiPS);
+        }
+        else {
+            for (const hips of this._activeHiPSLayers) {
+                tileBuffer.removeHiPS(hips);
+            }
         }
         this._activeHiPSLayers = [];
         this._activeHiPS = null;
@@ -4225,39 +4254,169 @@ class AstroSphere {
         this._activeBaseLayer = "xyz";
     }
     activateXYZ2(config) {
+        this._activeDomain = "earth";
         this._activeXYZ2 = new XYZMap_js_1.XYZMap(1, [0.0, 0.0, 0.0], 0, 0, config, this._webgl, this.gridLabelContainers);
         this._activeBaseLayer = "xyz";
     }
     activateMeshHiPS(descriptor) {
+        this._activeDomain = "mesh";
         this._activeMeshHiPS = new MeshHiPS_js_1.MeshHiPS(descriptor.meshRadius, [0.0, 0.0, 0.0], 0, 0, descriptor, this._webgl, this._healpixGrid);
         this._activeBaseLayer = "meships";
     }
+    setMeshHiPSColor(color) {
+        this._activeMeshHiPS?.setColor(color);
+    }
+    setMeshHiPSWireframe(wireframe) {
+        this._activeMeshHiPS?.setWireframe(wireframe);
+    }
     activateWMTS(config) {
+        this._activeDomain = "earth";
         const adapter = new WMTSAdapter_js_1.WMTSAdapter(config);
         const xyzConfig = adapter.toXYZLayerConfig();
         this._activeXYZ2 = new XYZMap_js_1.XYZMap(1, [0.0, 0.0, 0.0], 0, 0, new XYZMapDescriptor_js_1.XYZMapDescriptor(config.layer ? `WMTS ${config.layer}` : "WMTS Earth2 Layer", xyzConfig.urlTemplate, xyzConfig.minZoom ?? 0, xyzConfig.maxZoom ?? 8, xyzConfig.segmentsPerSide ?? 48, xyzConfig.maxCachedTiles ?? 384, 8, xyzConfig.urlResolver), this._webgl, this.gridLabelContainers);
         this._activeBaseLayer = "xyz";
     }
-    // Catalogue section
+    addXYZRasterOverlay(config) {
+        const map = new XYZMap_js_1.XYZMap(1, [0.0, 0.0, 0.0], 0, 0, config, this._webgl, this.gridLabelContainers);
+        return this.addEarthRasterOverlay(config.name, "xyz", map);
+    }
+    addWMTSRasterOverlay(config) {
+        const adapter = new WMTSAdapter_js_1.WMTSAdapter(config);
+        const xyzConfig = adapter.toXYZLayerConfig();
+        const name = config.layer ? `WMTS ${config.layer}` : "WMTS Earth Raster Overlay";
+        const map = new XYZMap_js_1.XYZMap(1, [0.0, 0.0, 0.0], 0, 0, new XYZMapDescriptor_js_1.XYZMapDescriptor(name, xyzConfig.urlTemplate, xyzConfig.minZoom ?? 0, xyzConfig.maxZoom ?? 8, xyzConfig.segmentsPerSide ?? 48, xyzConfig.maxCachedTiles ?? 384, 8, xyzConfig.urlResolver), this._webgl, this.gridLabelContainers);
+        return this.addEarthRasterOverlay(name, "wmts", map);
+    }
+    getEarthRasterOverlays() {
+        return this._earthRasterOverlays.map(({ map: _map, ...overlay }) => ({ ...overlay }));
+    }
+    setEarthRasterOverlayOpacity(id, opacity) {
+        const overlay = this._earthRasterOverlays.find((entry) => entry.id === id);
+        if (!overlay)
+            return;
+        overlay.opacity = Math.min(1, Math.max(0, opacity));
+        overlay.map.setOpacity(overlay.opacity);
+    }
+    setEarthRasterOverlayVisible(id, visible) {
+        const overlay = this._earthRasterOverlays.find((entry) => entry.id === id);
+        if (overlay)
+            overlay.visible = visible;
+    }
+    removeEarthRasterOverlay(id) {
+        this._earthRasterOverlays = this._earthRasterOverlays.filter((entry) => entry.id !== id);
+    }
+    removeAllEarthRasterOverlays() {
+        this._earthRasterOverlays = [];
+    }
+    addEarthRasterOverlay(name, sourceType, map) {
+        const overlay = {
+            id: `earth-raster-${++this._earthRasterOverlaySequence}`,
+            name,
+            sourceType,
+            visible: true,
+            opacity: 0.65,
+            map,
+        };
+        map.setOpacity(overlay.opacity);
+        this._earthRasterOverlays.push(overlay);
+        const { map: _map, ...info } = overlay;
+        return { ...info };
+    }
+    setActiveDomain(domain) {
+        if (domain !== this._activeDomain) {
+            this.clearGridLabelsForDomain(this._activeDomain);
+            this.domainCameraStates[this._activeDomain] = this._camera.getViewState();
+            const targetCameraState = this.domainCameraStates[domain];
+            if (targetCameraState) {
+                this._camera.restoreViewState(targetCameraState);
+            }
+            this.inertiaX = 0;
+            this.inertiaY = 0;
+            this.zoomInertia = 0;
+            this._cameraStatusChanged = true;
+        }
+        this._activeDomain = domain;
+        if (domain === "astronomy") {
+            this._activeBaseLayer = this._activeHiPS ? "hips" : null;
+        }
+        else if (domain === "earth") {
+            this._activeBaseLayer = this._activeXYZ2 ? "xyz" : null;
+        }
+        else {
+            this._activeBaseLayer = this._activeMeshHiPS ? "meships" : null;
+        }
+        // A hover from the previous vertical must not leak into the new one.
+        this.lastHoveredSource = null;
+        this.lastHoveredCatalogue = null;
+    }
+    clearGridLabelsForDomain(domain) {
+        if (domain === "astronomy") {
+            this._healpixGrid?.clearLabels();
+            this._equatorialGrid?.clearLabels();
+            return;
+        }
+        if (domain === "earth") {
+            this._activeXYZ2?.clearLonLatGridLabels?.();
+        }
+    }
+    get activeDomain() {
+        return this._activeDomain;
+    }
+    getActivePointSets() {
+        if (this._activeDomain === "astronomy")
+            return this.astronomyCatalogues;
+        if (this._activeDomain === "earth")
+            return this.earthPointSets;
+        return [];
+    }
+    getActiveFootprintSets() {
+        if (this._activeDomain === "astronomy")
+            return this.astronomyFootprintSets;
+        if (this._activeDomain === "earth")
+            return this.earthFootprintSets;
+        return [];
+    }
+    // Astronomy catalogue ownership
     async showCatalogue(cat) {
-        // console.log(cat)
-        if (cat)
-            this.activeCatalogues.push(cat);
+        if (cat && !this.astronomyCatalogues.includes(cat)) {
+            this.astronomyCatalogues.push(cat);
+        }
         return cat;
     }
     deleteCatalogue(catalogue) {
-        this.activeCatalogues = this.activeCatalogues.filter((c) => c !== catalogue);
+        this.astronomyCatalogues = this.astronomyCatalogues.filter((c) => c !== catalogue);
     }
-    // End Catalogue section
-    // Footprint section
+    // Earth point-set ownership. TerraPointSetGL still extends CatalogueGL in
+    // 3.12, but it no longer shares the Astronomy lifecycle collection.
+    async showTerraPointSet(pointSet) {
+        if (pointSet && !this.earthPointSets.includes(pointSet)) {
+            this.earthPointSets.push(pointSet);
+        }
+        return pointSet;
+    }
+    deleteTerraPointSet(pointSet) {
+        this.earthPointSets = this.earthPointSets.filter((set) => set !== pointSet);
+    }
+    // Astronomy footprint ownership
     async showFootprintSet(fset) {
-        // console.log(fset)
-        if (fset)
-            this.activeFootprintSets.push(fset);
+        if (fset && !this.astronomyFootprintSets.includes(fset)) {
+            this.astronomyFootprintSets.push(fset);
+        }
         return fset;
     }
     deleteFootprintSet(footprintSet) {
-        this.activeFootprintSets = this.activeFootprintSets.filter((fst) => fst !== footprintSet);
+        this.astronomyFootprintSets = this.astronomyFootprintSets.filter((fst) => fst !== footprintSet);
+    }
+    // Earth footprint ownership. TerraFootprintSetGL still reuses the common
+    // FootprintSetGL rendering implementation, but has an independent lifecycle.
+    async showTerraFootprintSet(footprintSet) {
+        if (footprintSet && !this.earthFootprintSets.includes(footprintSet)) {
+            this.earthFootprintSets.push(footprintSet);
+        }
+        return footprintSet;
+    }
+    deleteTerraFootprintSet(footprintSet) {
+        this.earthFootprintSets = this.earthFootprintSets.filter((fst) => fst !== footprintSet);
     }
     async showPolylineSet(polylineSet) {
         if (polylineSet)
@@ -4287,8 +4446,8 @@ class AstroSphere {
         satelliteObject.dispose();
     }
     getHoveredFootprints() {
-        let footprintsHovered = [];
-        this.activeFootprintSets.forEach((fset) => {
+        const footprintsHovered = [];
+        this.getActiveFootprintSets().forEach((fset) => {
             footprintsHovered.push(fset.hoveredFootprints);
         });
         return footprintsHovered;
@@ -4297,6 +4456,9 @@ class AstroSphere {
     goTo(raDeg, decDeg) {
         this._camera.goTo(raDeg, decDeg);
     }
+    flyTo(raDeg, decDeg, durationMs = 1200) {
+        this._camera.flyTo(raDeg, decDeg, durationMs);
+    }
     getActiveCoordinateMode() {
         if (this._activeBaseLayer === "xyz") {
             return "lonlat";
@@ -4517,8 +4679,6 @@ class AstroSphere {
             return;
         if (!this._webgl)
             return;
-        if (!this._activeHiPS && !this._activeXYZ2 && !this._activeMeshHiPS)
-            return;
         if (!this._healpixGrid || Object.keys(this._healpixGrid).length === 0)
             return;
         if (this._healpixGrid.fovObj === undefined)
@@ -4532,6 +4692,16 @@ class AstroSphere {
         let PHI = 0;
         this._webgl.viewport(0, 0, this._webgl.drawingBufferWidth, this._webgl.drawingBufferHeight);
         this._webgl.clear(this._webgl.COLOR_BUFFER_BIT | this._webgl.DEPTH_BUFFER_BIT);
+        const now = performance.now();
+        const cameraFlying = this._camera.updateFlyTo(now);
+        if (cameraFlying) {
+            this.inertiaX = 0;
+            this.inertiaY = 0;
+            this.lastCameraMotionAt = now;
+            this._cameraStatusChanged = true;
+            this.updateCentralPoint();
+            this._perspectiveMatrixManager.computePerspectiveMatrix(canvas, this._camera, Config_js_1.bootSetup.camera_fov_deg, Config_js_1.bootSetup.camera_near_plane, Global_js_1.default.insideSphere);
+        }
         // Zoom inertia
         if (this.zoomInertia !== 0) {
             if (Math.abs(this.zoomInertia) > 0.0001) {
@@ -4620,8 +4790,10 @@ class AstroSphere {
         this._webgl.enable(this._webgl.CULL_FACE);
         this._webgl.cullFace(Global_js_1.default.insideSphere ? this._webgl.FRONT : this._webgl.BACK);
         this._webgl.blendFunc(this._webgl.SRC_ALPHA, this._webgl.ONE_MINUS_SRC_ALPHA);
-        if (this._activeBaseLayer === "hips" && this._activeHiPSLayers.length > 0) {
-            const maxHiPSOrder = Math.max(...this._activeHiPSLayers.map((hips) => hips.maxOrder));
+        if (this._activeBaseLayer === "hips" && this._activeHiPS) {
+            const maxHiPSOrder = this._activeHiPSLayers.length > 0
+                ? Math.max(...this._activeHiPSLayers.map((hips) => hips.maxOrder))
+                : this._activeHiPS.maxOrder;
             const visibleOrder = Math.min(this._healpixGrid.visibleorder, maxHiPSOrder);
             this._healpixGrid.visibleTilesManager.computeVisiblePixels(visibleOrder, this._webgl, this._camera, this._perspectiveMatrixManager.pMatrix);
         }
@@ -4656,12 +4828,19 @@ class AstroSphere {
         }
         if (this._activeBaseLayer === "xyz") {
             this._activeXYZ2?.draw(skyEntityDrawInput);
+            for (const overlay of this._earthRasterOverlays) {
+                if (overlay.visible) {
+                    overlay.map.draw(skyEntityDrawInput, true);
+                }
+            }
         }
         if (this._activeBaseLayer === "meships") {
             this._activeMeshHiPS?.draw(skyEntityDrawInput);
         }
-        this._healpixGrid.draw(skyEntityDrawInput);
-        this._equatorialGrid.draw(skyEntityDrawInput);
+        if (this._activeDomain === "astronomy") {
+            this._healpixGrid.draw(skyEntityDrawInput);
+            this._equatorialGrid.draw(skyEntityDrawInput);
+        }
         this._webgl.enable(this._webgl.DEPTH_TEST);
         this._webgl.disable(this._webgl.CULL_FACE);
         if (this.startup) {
@@ -4680,52 +4859,53 @@ class AstroSphere {
                 decDMS,
             });
         }
-        this.activeCatalogues.forEach((cat) => {
-            const activeModelMatrix = this._activeHiPS?.getModelMatrix() ??
-                this._activeXYZ2?.getModelMatrix() ??
-                this._activeMeshHiPS?.getModelMatrix();
+        this.getActivePointSets().forEach((cat) => {
+            const activeModelMatrix = this.getActiveDomainModelMatrix();
             if (activeModelMatrix) {
                 cat.draw(activeModelMatrix, this.mouseHelper, this._camera.getCameraMatrix(), this._perspectiveMatrixManager.pMatrix);
             }
         });
         this.emitHoveredSourceIfChanged();
-        this.activeFootprintSets.forEach((fst) => {
-            const activeModelMatrix = this._activeHiPS?.getModelMatrix() ??
-                this._activeXYZ2?.getModelMatrix() ??
-                this._activeMeshHiPS?.getModelMatrix();
+        this.getActiveFootprintSets().forEach((fst) => {
+            const activeModelMatrix = this.getActiveDomainModelMatrix();
             if (activeModelMatrix) {
                 fst.draw(activeModelMatrix, this.mouseHelper, this._camera.getCameraMatrix(), this._perspectiveMatrixManager.pMatrix);
             }
         });
-        this.activePolylineSets.forEach((polylineSet) => {
-            const activeModelMatrix = this._activeHiPS?.getModelMatrix() ??
-                this._activeXYZ2?.getModelMatrix() ??
-                this._activeMeshHiPS?.getModelMatrix();
-            if (activeModelMatrix) {
-                polylineSet.draw(activeModelMatrix, this.mouseHelper, this._camera.getCameraMatrix(), this._perspectiveMatrixManager.pMatrix);
-            }
-        });
-        this.activeSensorCones.forEach((sensorCone) => {
-            const activeModelMatrix = this._activeHiPS?.getModelMatrix() ??
-                this._activeXYZ2?.getModelMatrix() ??
-                this._activeMeshHiPS?.getModelMatrix();
-            if (activeModelMatrix) {
-                sensorCone.draw(this._perspectiveMatrixManager.pMatrix, this._camera.getCameraMatrix(), activeModelMatrix);
-            }
-        });
-        this.activeSatelliteObjects.forEach((satelliteObject) => {
-            const activeModelMatrix = this._activeHiPS?.getModelMatrix() ??
-                this._activeXYZ2?.getModelMatrix() ??
-                this._activeMeshHiPS?.getModelMatrix();
-            if (activeModelMatrix) {
-                satelliteObject.draw(this._perspectiveMatrixManager.pMatrix, this._camera.getCameraMatrix(), activeModelMatrix);
-            }
-        });
+        if (this._activeDomain === "earth") {
+            this.activePolylineSets.forEach((polylineSet) => {
+                const activeModelMatrix = this.getActiveDomainModelMatrix();
+                if (activeModelMatrix) {
+                    polylineSet.draw(activeModelMatrix, this.mouseHelper, this._camera.getCameraMatrix(), this._perspectiveMatrixManager.pMatrix);
+                }
+            });
+            this.activeSensorCones.forEach((sensorCone) => {
+                const activeModelMatrix = this.getActiveDomainModelMatrix();
+                if (activeModelMatrix) {
+                    sensorCone.draw(this._perspectiveMatrixManager.pMatrix, this._camera.getCameraMatrix(), activeModelMatrix);
+                }
+            });
+            this.activeSatelliteObjects.forEach((satelliteObject) => {
+                const activeModelMatrix = this.getActiveDomainModelMatrix();
+                if (activeModelMatrix) {
+                    satelliteObject.draw(this._perspectiveMatrixManager.pMatrix, this._camera.getCameraMatrix(), activeModelMatrix);
+                }
+            });
+        }
+    }
+    getActiveDomainModelMatrix() {
+        if (this._activeDomain === "astronomy") {
+            return (this._activeHiPS?.getModelMatrix() ?? this._healpixGrid.getModelMatrix());
+        }
+        if (this._activeDomain === "earth") {
+            return (this._activeXYZ2?.getModelMatrix() ?? this._healpixGrid.getModelMatrix());
+        }
+        return (this._activeMeshHiPS?.getModelMatrix() ?? this._healpixGrid.getModelMatrix());
     }
     emitHoveredSourceIfChanged() {
         let nextHoveredSource = null;
         let nextHoveredCatalogue = null;
-        for (const cat of this.activeCatalogues) {
+        for (const cat of this.getActivePointSets()) {
             const hovered = cat.getPrimaryHoveredSource();
             if (!hovered)
                 continue;
@@ -4854,25 +5034,25 @@ class AstroViewer {
         return new TerraPointSetGL_js_1.TerraPointSetGL(pointSetName, pointSetDescription, providerUrl, metadataManager, this.webgl, this.astroSphere.healpixGrid.visibleTilesManager);
     }
     showTerraPointSet(pointSet) {
-        this.astroSphere.showCatalogue(pointSet);
+        this.astroSphere.showTerraPointSet(pointSet);
     }
     hideTerraPointSet(pointSet, isVisible) {
         pointSet.setIsVisible(isVisible);
     }
     deleteTerraPointSet(pointSet) {
-        this.astroSphere.deleteCatalogue(pointSet);
+        this.astroSphere.deleteTerraPointSet(pointSet);
     }
     createTerraFootprintSet(footprintSetName, footprintSetDescription, providerUrl, metadataManager) {
         return new TerraFootprintSetGL_js_1.TerraFootprintSetGL(footprintSetName, footprintSetDescription, providerUrl, metadataManager, this.webgl);
     }
     showTerraFootprintSet(footprintSet) {
-        this.astroSphere.showFootprintSet(footprintSet);
+        this.astroSphere.showTerraFootprintSet(footprintSet);
     }
     hideTerraFootprintSet(footprintSet, isVisible) {
         footprintSet.setIsVisible(isVisible);
     }
     deleteTerraFootprintSet(footprintSet) {
-        this.astroSphere.deleteFootprintSet(footprintSet);
+        this.astroSphere.deleteTerraFootprintSet(footprintSet);
     }
     createTerraPolylineSet(polylineSetName, polylineSetDescription, providerUrl, metadataManager) {
         return new TerraPolylineSetGL_js_1.TerraPolylineSetGL(polylineSetName, polylineSetDescription, providerUrl, metadataManager, this.webgl);
@@ -4925,6 +5105,12 @@ class AstroViewer {
     getDefaultHiPSURL() {
         return Config_js_1.bootSetup.defaultHipsUrl;
     }
+    setActiveDomain(domain) {
+        this.astroSphere.setActiveDomain(domain);
+    }
+    getActiveDomain() {
+        return this.astroSphere.activeDomain;
+    }
     activateHiPS(hipsDescriptor) {
         this.astroSphere.activateHiPS(hipsDescriptor);
     }
@@ -4938,9 +5124,37 @@ class AstroViewer {
     activateWMTS(config) {
         this.astroSphere.activateWMTS(config);
     }
+    addXYZRasterOverlay(config) {
+        const descriptor = new XYZMapDescriptor_js_1.XYZMapDescriptor(config.name ?? "XYZ Earth Raster Overlay", config.urlTemplate, config.minZoom ?? 0, config.maxZoom ?? 8, config.segmentsPerSide ?? 48, config.maxCachedTiles ?? 384, 8, config.urlResolver);
+        return this.astroSphere.addXYZRasterOverlay(descriptor);
+    }
+    addWMTSRasterOverlay(config) {
+        return this.astroSphere.addWMTSRasterOverlay(config);
+    }
+    getEarthRasterOverlays() {
+        return this.astroSphere.getEarthRasterOverlays();
+    }
+    setEarthRasterOverlayOpacity(id, opacity) {
+        this.astroSphere.setEarthRasterOverlayOpacity(id, opacity);
+    }
+    setEarthRasterOverlayVisible(id, visible) {
+        this.astroSphere.setEarthRasterOverlayVisible(id, visible);
+    }
+    removeEarthRasterOverlay(id) {
+        this.astroSphere.removeEarthRasterOverlay(id);
+    }
+    removeAllEarthRasterOverlays() {
+        this.astroSphere.removeAllEarthRasterOverlays();
+    }
     activateMeshHiPS(config) {
         this.astroSphere.activateMeshHiPS(new MeshHiPSDescriptor_js_1.MeshHiPSDescriptor(config));
     }
+    setMeshHiPSColor(color) {
+        this.astroSphere.setMeshHiPSColor(color);
+    }
+    setMeshHiPSWireframe(wireframe) {
+        this.astroSphere.setMeshHiPSWireframe(wireframe);
+    }
     setXYZMaxConcurrentRequests(value) {
         XYZTileRequestScheduler_js_1.xyzTileRequestScheduler.setMaxConcurrent(value);
     }
@@ -5063,6 +5277,9 @@ class AstroViewer {
         // console.log(`AstroViewer.goTo goto(${raDeg}, ${decDeg})`)
         this.astroSphere.goTo(raDeg, decDeg);
     }
+    flyTo(raDeg, decDeg, durationMs = 1200) {
+        this.astroSphere.flyTo(raDeg, decDeg, durationMs);
+    }
     getActiveCoordinateMode() {
         return this.astroSphere.getActiveCoordinateMode();
     }
@@ -5385,6 +5602,7 @@ class Camera {
     lockRotX = false;
     lockRotY = false;
     lockRotZ = false;
+    flyToAnimation = null;
     constructor(in_position, in_sphere) {
         this.init(in_position, in_sphere);
     }
@@ -5394,7 +5612,11 @@ class Camera {
         this.vMatrix = gl_matrix_1.mat4.create();
         this.T = gl_matrix_1.mat4.create();
         this.R = gl_matrix_1.mat4.create();
-        gl_matrix_1.mat4.translate(this.T, this.T, [this.cam_pos[0], this.cam_pos[1], this.cam_pos[2]]);
+        gl_matrix_1.mat4.translate(this.T, this.T, [
+            this.cam_pos[0],
+            this.cam_pos[1],
+            this.cam_pos[2],
+        ]);
         // reset helpers
         this.FoV = this.previousFoV = 180.0;
         this.move = gl_matrix_1.vec3.clone([0, 0, 0]);
@@ -5403,11 +5625,15 @@ class Camera {
         this.goTo(raDeg, decDeg);
     }
     goTo(raDeg, decDeg) {
+        this.cancelFlyTo();
         this.goToPhiTheta((0, Utils_js_1.astroDegToSpherical)(raDeg, decDeg));
     }
     goToPhiTheta(ptDeg) {
         const xyz = (0, Utils_js_1.sphericalToCartesian)(ptDeg.phi, ptDeg.theta, this.cam_pos[2]);
-        const targetDirection = gl_matrix_1.vec3.normalize(gl_matrix_1.vec3.create(), gl_matrix_1.vec3.fromValues(xyz[0], xyz[1], xyz[2]));
+        this.applyCameraPosition(gl_matrix_1.vec3.fromValues(xyz[0], xyz[1], xyz[2]));
+    }
+    applyCameraPosition(cameraPosition) {
+        const targetDirection = gl_matrix_1.vec3.normalize(gl_matrix_1.vec3.create(), cameraPosition);
         const celestialNorth = gl_matrix_1.vec3.fromValues(0.0, 0.0, 1.0);
         const northProjection = gl_matrix_1.vec3.scale(gl_matrix_1.vec3.create(), targetDirection, gl_matrix_1.vec3.dot(celestialNorth, targetDirection));
         const cameraUp = gl_matrix_1.vec3.subtract(gl_matrix_1.vec3.create(), celestialNorth, northProjection);
@@ -5418,9 +5644,13 @@ class Camera {
             gl_matrix_1.vec3.normalize(cameraUp, cameraUp);
         }
         let cameraMatrix = gl_matrix_1.mat4.create();
-        cameraMatrix = gl_matrix_1.mat4.translate(cameraMatrix, cameraMatrix, gl_matrix_1.vec3.fromValues(xyz[0], xyz[1], xyz[2]));
+        cameraMatrix = gl_matrix_1.mat4.translate(cameraMatrix, cameraMatrix, cameraPosition);
         const focusPoint = [0.0, 0.0, 0.0];
-        const cameraPos = [cameraMatrix[12], cameraMatrix[13], cameraMatrix[14]];
+        const cameraPos = [
+            cameraMatrix[12],
+            cameraMatrix[13],
+            cameraMatrix[14],
+        ];
         cameraMatrix = gl_matrix_1.mat4.targetTo(cameraMatrix, cameraPos, focusPoint, cameraUp);
         this.R = gl_matrix_1.mat4.clone(cameraMatrix);
         this.R[12] = 0;
@@ -5432,6 +5662,81 @@ class Camera {
         }
         this.vMatrix = viewMatrix;
     }
+    flyTo(raDeg, decDeg, durationMs = 1200) {
+        const targetSpherical = (0, Utils_js_1.astroDegToSpherical)(raDeg, decDeg);
+        const targetPositionValues = (0, Utils_js_1.sphericalToCartesian)(targetSpherical.phi, targetSpherical.theta, this.cam_pos[2]);
+        const targetPosition = gl_matrix_1.vec3.fromValues(targetPositionValues[0], targetPositionValues[1], targetPositionValues[2]);
+        const currentPosition = this.getCameraPosition();
+        const startDirection = gl_matrix_1.vec3.normalize(gl_matrix_1.vec3.create(), gl_matrix_1.vec3.fromValues(currentPosition[0], currentPosition[1], currentPosition[2]));
+        const targetDirection = gl_matrix_1.vec3.normalize(gl_matrix_1.vec3.create(), targetPosition);
+        this.flyToAnimation = {
+            startDirection,
+            targetDirection,
+            targetPosition,
+            startTime: performance.now(),
+            durationMs: Math.max(1, durationMs),
+        };
+    }
+    updateFlyTo(now) {
+        const animation = this.flyToAnimation;
+        if (!animation) {
+            return false;
+        }
+        const elapsed = now - animation.startTime;
+        const progress = Math.min(1, elapsed / animation.durationMs);
+        const easedProgress = progress < 0.5
+            ? 4 * progress * progress * progress
+            : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+        const direction = this.slerpDirection(animation.startDirection, animation.targetDirection, easedProgress);
+        const radius = Math.abs(this.cam_pos[2]);
+        const cameraPosition = gl_matrix_1.vec3.scale(gl_matrix_1.vec3.create(), direction, radius);
+        this.applyCameraPosition(cameraPosition);
+        if (progress >= 1) {
+            this.applyCameraPosition(animation.targetPosition);
+            this.flyToAnimation = null;
+        }
+        return true;
+    }
+    slerpDirection(start, end, t) {
+        const dot = Math.max(-1, Math.min(1, gl_matrix_1.vec3.dot(start, end)));
+        /*
+         * For almost identical directions, normalized linear interpolation is
+         * numerically more stable than the general SLERP formula.
+         */
+        if (dot > 0.999999) {
+            const result = gl_matrix_1.vec3.lerp(gl_matrix_1.vec3.create(), start, end, t);
+            return gl_matrix_1.vec3.normalize(result, result);
+        }
+        /*
+         * The normal SLERP formula becomes singular for antipodal vectors because
+         * sin(pi) = 0. In that case choose a stable vector orthogonal to start and
+         * rotate through that great circle.
+         */
+        if (dot < -0.999999) {
+            const referenceAxis = Math.abs(start[0]) < 0.9
+                ? gl_matrix_1.vec3.fromValues(1, 0, 0)
+                : gl_matrix_1.vec3.fromValues(0, 1, 0);
+            const orthogonal = gl_matrix_1.vec3.cross(gl_matrix_1.vec3.create(), start, referenceAxis);
+            gl_matrix_1.vec3.normalize(orthogonal, orthogonal);
+            const angle = Math.PI * t;
+            const result = gl_matrix_1.vec3.create();
+            gl_matrix_1.vec3.scale(result, start, Math.cos(angle));
+            gl_matrix_1.vec3.scaleAndAdd(result, result, orthogonal, Math.sin(angle));
+            return gl_matrix_1.vec3.normalize(result, result);
+        }
+        const angle = Math.acos(dot);
+        const sinAngle = Math.sin(angle);
+        const startWeight = Math.sin((1 - t) * angle) / sinAngle;
+        const endWeight = Math.sin(t * angle) / sinAngle;
+        const result = gl_matrix_1.vec3.create();
+        result[0] = start[0] * startWeight + end[0] * endWeight;
+        result[1] = start[1] * startWeight + end[1] * endWeight;
+        result[2] = start[2] * startWeight + end[2] * endWeight;
+        return gl_matrix_1.vec3.normalize(result, result);
+    }
+    cancelFlyTo() {
+        this.flyToAnimation = null;
+    }
     toggleInsideSphere() {
         // if (inside !== global.insideSphere) {
         //   global.insideSphere = inside;
@@ -5653,6 +5958,22 @@ class Camera {
         }
         return [inv[12], inv[13], inv[14]];
     }
+    getViewState() {
+        return {
+            position: [this.cam_pos[0], this.cam_pos[1], this.cam_pos[2]],
+            viewMatrix: gl_matrix_1.mat4.clone(this.vMatrix),
+            translationMatrix: gl_matrix_1.mat4.clone(this.T),
+            rotationMatrix: gl_matrix_1.mat4.clone(this.R),
+        };
+    }
+    restoreViewState(state) {
+        this.cancelFlyTo();
+        this.cam_pos = gl_matrix_1.vec3.fromValues(...state.position);
+        this.vMatrix = gl_matrix_1.mat4.clone(state.viewMatrix);
+        this.T = gl_matrix_1.mat4.clone(state.translationMatrix);
+        this.R = gl_matrix_1.mat4.clone(state.rotationMatrix);
+        this.move = gl_matrix_1.vec3.create();
+    }
     setCameraMatrix(viewMatrix) {
         this.vMatrix = viewMatrix;
     }
@@ -5689,9 +6010,15 @@ class Camera {
     clearRotationLock() {
         this.lockRotX = this.lockRotY = this.lockRotZ = false;
     }
-    isRotationLockedX() { return this.lockRotX; }
-    isRotationLockedY() { return this.lockRotY; }
-    isRotationLockedZ() { return this.lockRotZ; }
+    isRotationLockedX() {
+        return this.lockRotX;
+    }
+    isRotationLockedY() {
+        return this.lockRotY;
+    }
+    isRotationLockedZ() {
+        return this.lockRotZ;
+    }
 }
 exports["default"] = Camera;
 
@@ -5864,7 +6191,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.Footprint = exports.Source = exports.MeshHiPSDescriptor = exports.MeshHiPS = exports.WMTSAdapter = exports.XYZMap = exports.HiPS = exports.createColorMapFromSamples = exports.COLOR_MAP_SAMPLE_COUNT = exports.ColorMaps = exports.GeoJSONParser = exports.CoordsType = exports.FoVUtils = exports.CartesianOpts = exports.PointInitOpts = exports.AstroOpts = exports.SphericalOpts = exports.Point = exports.ColumnType = exports.MetadataInit = exports.MetadataColumn = exports.MetadataManager = exports.ObservationTrackViewerAdapter = exports.ObservationTrackTimeline = exports.footprintToRing = exports.createObservationTrackTimeline = exports.SensorConeGL = exports.SatelliteObjectGL = exports.TerraPolylineSetGL = exports.TerraFootprintSetGL = exports.TerraPointSetGL = exports.CatalogueGL = exports.FootprintSetGL = exports.HoveredFootprintDetail = exports.SphereFoV = exports.FoV = exports.HiPSDescriptor = exports.AstroViewer = void 0;
+exports.Footprint = exports.Source = exports.MeshHiPSDescriptor = exports.MeshHiPS = exports.WMTSAdapter = exports.XYZMap = exports.HiPS = exports.createColorMapFromSamples = exports.COLOR_MAP_SAMPLE_COUNT = exports.ColorMaps = exports.GeoJSONParser = exports.CoordsType = exports.FoVUtils = exports.decDMSToDeg = exports.raHMSToDeg = exports.CartesianOpts = exports.PointInitOpts = exports.AstroOpts = exports.SphericalOpts = exports.Point = exports.ColumnType = exports.MetadataInit = exports.MetadataColumn = exports.MetadataManager = exports.ObservationTrackViewerAdapter = exports.ObservationTrackTimeline = exports.footprintToRing = exports.createObservationTrackTimeline = exports.SensorConeGL = exports.SatelliteObjectGL = exports.TerraPolylineSetGL = exports.TerraFootprintSetGL = exports.TerraPointSetGL = exports.CatalogueGL = exports.FootprintSetGL = exports.HoveredFootprintDetail = exports.SphereFoV = exports.FoV = exports.HiPSDescriptor = exports.AstroViewer = void 0;
 var AstroViewer_js_1 = __webpack_require__(772);
 Object.defineProperty(exports, "AstroViewer", ({ enumerable: true, get: function () { return AstroViewer_js_1.AstroViewer; } }));
 var HiPSDescriptor_js_1 = __webpack_require__(5087);
@@ -5905,6 +6232,9 @@ Object.defineProperty(exports, "SphericalOpts", ({ enumerable: true, get: functi
 Object.defineProperty(exports, "AstroOpts", ({ enumerable: true, get: function () { return Point_js_1.AstroOpts; } }));
 Object.defineProperty(exports, "PointInitOpts", ({ enumerable: true, get: function () { return Point_js_1.PointInitOpts; } }));
 Object.defineProperty(exports, "CartesianOpts", ({ enumerable: true, get: function () { return Point_js_1.CartesianOpts; } }));
+var Utils_js_1 = __webpack_require__(7930);
+Object.defineProperty(exports, "raHMSToDeg", ({ enumerable: true, get: function () { return Utils_js_1.raHMSToDeg; } }));
+Object.defineProperty(exports, "decDMSToDeg", ({ enumerable: true, get: function () { return Utils_js_1.decDMSToDeg; } }));
 var FoVUtils_js_1 = __webpack_require__(8083);
 Object.defineProperty(exports, "FoVUtils", ({ enumerable: true, get: function () { return FoVUtils_js_1.FoVUtils; } }));
 var CoordsType_js_1 = __webpack_require__(8145);
@@ -7903,6 +8233,7 @@ class Source {
     _h_pix;
     _shapesize;
     _brightnessFactor;
+    _mediaStyle;
     /**
      * @param in_point Point.js (Cartesian/RA-Dec wrapper)
      * @param in_details Optional array of key/value metadata
@@ -7911,7 +8242,7 @@ class Source {
         this._point = in_point;
         this._details = in_details;
         this._shapesize = 16.0;
-        this._brightnessFactor = -99;
+        this._brightnessFactor = 3.0;
         this.computeHealpixPixel();
     }
     getDetailByindex(index) {
@@ -7955,6 +8286,12 @@ class Source {
     set brightnessFactor(factor) {
         this._brightnessFactor = factor;
     }
+    get mediaStyle() {
+        return this._mediaStyle;
+    }
+    set mediaStyle(style) {
+        this._mediaStyle = style;
+    }
 }
 exports.Source = Source;
 
@@ -8182,6 +8519,9 @@ exports.SphereFoV = SphereFoV;
  *
  * See LICENSE.md, LICENSE-AGPL.md, and LICENSE-COMMERCIAL.md for details.
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.CatalogueGL = void 0;
 const Source_js_1 = __webpack_require__(146);
@@ -8190,11 +8530,14 @@ const CoordsType_js_1 = __webpack_require__(8145);
 const Utils_js_1 = __webpack_require__(7930);
 const CatalogueShaderProgram_js_1 = __webpack_require__(3559);
 const MetadataManager_js_1 = __webpack_require__(5403);
+const gl_matrix_1 = __webpack_require__(3890);
+const healpix_1 = __webpack_require__(4851);
+const Global_js_1 = __importDefault(__webpack_require__(4382));
 class CatalogueGL {
     _kind = "CatalogueGL";
     static ELEM_SIZE = 6;
     static BYTES_X_ELEM = new Float32Array().BYTES_PER_ELEMENT;
-    static STANDARD_SHAPE_SIZE = 10.0;
+    static STANDARD_SHAPE_SIZE = 16.0;
     static STANDARD_SHAPE_HUE = 3.0;
     _ready;
     _name;
@@ -8221,6 +8564,9 @@ class CatalogueGL {
     _providerUrl;
     _catalogueShaderProgram;
     _visibleTilesManager;
+    _mediaOverlayHost = null;
+    _mediaElements = [];
+    _svgMediaDataUrls = new Map();
     constructor(catalogueName, catalogueDescription, providerUrl, metadataManager, webgl, visibleTilesManager) {
         this._webgl = webgl;
         this._ready = false;
@@ -8391,9 +8737,10 @@ class CatalogueGL {
      * @param in_data Rows of TAP results
      * @param columnsmeta TapMetadataList (unused here because `CatalogueProps` already holds indices)
      */
-    addSources(in_data, columnsmeta) {
+    addSources(in_data, columnsmeta, options = {}) {
         this._ready = false;
         this._sources = [];
+        this.clearMediaOverlay();
         this._metadataManager = new MetadataManager_js_1.MetadataManager(columnsmeta);
         // const raDataIndex = (this.catalogueProps.raColumn as any).index ?? (this.catalogueProps.raColumn as any)._index;
         // const decDataIndex = (this.catalogueProps.decColumn as any).index ?? (this.catalogueProps.decColumn as any)._index;
@@ -8407,6 +8754,10 @@ class CatalogueGL {
                 decDeg: in_data[j][decDataIndex],
             }, CoordsType_js_1.CoordsType.ASTRO);
             const source = new Source_js_1.Source(point, in_data[j]);
+            const mediaStyle = this.extractMediaStyle(in_data[j], columnsmeta, options.mediaColumns);
+            if (mediaStyle) {
+                source.mediaStyle = mediaStyle;
+            }
             // Ensure optional fields exist
             source.shapeSize = source.shapeSize ?? CatalogueGL.STANDARD_SHAPE_SIZE;
             source.brightnessFactor = 3;
@@ -8426,11 +8777,226 @@ class CatalogueGL {
         this._ready = true;
         this._bufferInitialised = false;
     }
+    getColumnIndex(columnsmeta, columnName) {
+        if (!columnName)
+            return -1;
+        return (columnsmeta.find((column) => column.name === columnName)?.index ?? -1);
+    }
+    readCell(row, columnsmeta, columnName) {
+        const idx = this.getColumnIndex(columnsmeta, columnName);
+        return idx >= 0 ? row[idx] : undefined;
+    }
+    extractMediaStyle(row, columnsmeta, mediaColumns) {
+        if (!mediaColumns?.src)
+            return undefined;
+        const rawSrc = this.readCell(row, columnsmeta, mediaColumns.src);
+        const src = String(rawSrc ?? "").trim();
+        if (!src)
+            return undefined;
+        const rawKind = String(this.readCell(row, columnsmeta, mediaColumns.type) ?? "sprite")
+            .trim()
+            .toLowerCase();
+        const kind = rawKind === "model"
+            ? "model"
+            : rawKind === "image"
+                ? "image"
+                : rawKind === "icon"
+                    ? "icon"
+                    : rawKind === "circle"
+                        ? "circle"
+                        : "sprite";
+        if (kind === "circle" || kind === "model")
+            return undefined;
+        const scale = Number(this.readCell(row, columnsmeta, mediaColumns.scale));
+        const rotationDeg = Number(this.readCell(row, columnsmeta, mediaColumns.rotation));
+        const opacity = Number(this.readCell(row, columnsmeta, mediaColumns.opacity));
+        return {
+            kind,
+            src,
+            scale: Number.isFinite(scale) && scale > 0 ? scale : undefined,
+            rotationDeg: Number.isFinite(rotationDeg) ? rotationDeg : undefined,
+            opacity: Number.isFinite(opacity)
+                ? Math.max(0, Math.min(1, opacity))
+                : undefined,
+        };
+    }
     clearSources() {
         this._sources = [];
         this.hoveredIndexes = [];
         this._healpixDensityMap.clear();
         this.vertexCataloguePosition = new Float32Array(0);
+        this.clearMediaOverlay();
+    }
+    clearMediaOverlay() {
+        this._mediaElements.forEach((el) => el.remove());
+        this._mediaElements = [];
+        if (this._mediaOverlayHost) {
+            this._mediaOverlayHost.remove();
+            this._mediaOverlayHost = null;
+        }
+    }
+    ensureMediaOverlayHost() {
+        const canvas = this._webgl?.canvas;
+        const parent = canvas?.parentElement;
+        if (!canvas || !parent)
+            return null;
+        const parentStyle = window.getComputedStyle(parent);
+        if (parentStyle.position === "static") {
+            parent.style.position = "relative";
+        }
+        if (!this._mediaOverlayHost) {
+            const host = document.createElement("div");
+            host.dataset.astroCatalogueMedia = "true";
+            host.style.position = "absolute";
+            host.style.left = `${canvas.offsetLeft}px`;
+            host.style.top = `${canvas.offsetTop}px`;
+            host.style.width = `${canvas.clientWidth}px`;
+            host.style.height = `${canvas.clientHeight}px`;
+            host.style.pointerEvents = "none";
+            host.style.overflow = "hidden";
+            host.style.zIndex = "4";
+            canvas.style.position = canvas.style.position || "relative";
+            canvas.style.zIndex = canvas.style.zIndex || "0";
+            parent.appendChild(host);
+            this._mediaOverlayHost = host;
+        }
+        else {
+            this._mediaOverlayHost.style.left = `${canvas.offsetLeft}px`;
+            this._mediaOverlayHost.style.top = `${canvas.offsetTop}px`;
+            this._mediaOverlayHost.style.width = `${canvas.clientWidth}px`;
+            this._mediaOverlayHost.style.height = `${canvas.clientHeight}px`;
+        }
+        return this._mediaOverlayHost;
+    }
+    ensureMediaElement(index, style) {
+        let img = this._mediaElements[index];
+        if (!img) {
+            img = document.createElement("img");
+            img.loading = "lazy";
+            img.decoding = "async";
+            img.style.position = "absolute";
+            img.style.objectFit = "contain";
+            img.style.pointerEvents = "none";
+            img.style.transformOrigin = "center center";
+            img.style.filter = "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))";
+            img.style.willChange = "transform, left, top";
+            this._mediaElements[index] = img;
+        }
+        const src = String(style.src ?? "").trim();
+        const resolvedSrc = src ? new URL(src, document.baseURI).href : "";
+        if (resolvedSrc && img.getAttribute("src") !== resolvedSrc) {
+            img.removeAttribute("data-astro-media-src-index");
+            img.removeAttribute("data-astro-media-loaded");
+            img.onerror = null;
+            img.onload = null;
+            img.setAttribute("src", resolvedSrc);
+            if (/\.svg(?:[?#].*)?$/i.test(resolvedSrc)) {
+                void this.loadSvgMediaAsDataUrl(img, resolvedSrc);
+            }
+        }
+        return img;
+    }
+    async loadSvgMediaAsDataUrl(img, resolvedSrc) {
+        try {
+            let dataUrl = this._svgMediaDataUrls.get(resolvedSrc);
+            if (!dataUrl) {
+                const response = await fetch(resolvedSrc);
+                if (!response.ok)
+                    return;
+                const svg = await response.text();
+                if (!/^\s*<svg[\s>]/i.test(svg))
+                    return;
+                dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+                this._svgMediaDataUrls.set(resolvedSrc, dataUrl);
+            }
+            if (img.getAttribute("src") === resolvedSrc) {
+                img.setAttribute("src", dataUrl);
+            }
+        }
+        catch {
+            // Keep the direct image src; remote servers may already provide a valid MIME type.
+        }
+    }
+    isSourceOnVisibleHemisphere(source, in_mMatrix, vMatrix) {
+        if (Global_js_1.default.insideSphere)
+            return true;
+        const invView = gl_matrix_1.mat4.create();
+        if (!gl_matrix_1.mat4.invert(invView, vMatrix))
+            return true;
+        const cameraPos = gl_matrix_1.vec3.fromValues(invView[12], invView[13], invView[14]);
+        const worldPoint4 = gl_matrix_1.vec4.fromValues(source.point.x, source.point.y, source.point.z, 1);
+        gl_matrix_1.vec4.transformMat4(worldPoint4, worldPoint4, in_mMatrix);
+        const worldPoint = gl_matrix_1.vec3.fromValues(worldPoint4[0], worldPoint4[1], worldPoint4[2]);
+        const normal = gl_matrix_1.vec3.normalize(gl_matrix_1.vec3.create(), worldPoint);
+        const toCamera = gl_matrix_1.vec3.subtract(gl_matrix_1.vec3.create(), cameraPos, worldPoint);
+        return gl_matrix_1.vec3.dot(normal, toCamera) > 0;
+    }
+    updateMediaOverlay(in_mMatrix, vMatrix, pMatrix) {
+        const sourcesWithMedia = this._sources.filter((source) => !!source.mediaStyle?.src);
+        if (!sourcesWithMedia.length) {
+            this.clearMediaOverlay();
+            return;
+        }
+        const host = this.ensureMediaOverlayHost();
+        const canvas = this._webgl.canvas;
+        if (!host || !canvas.clientWidth || !canvas.clientHeight)
+            return;
+        const modelView = gl_matrix_1.mat4.create();
+        const mvp = gl_matrix_1.mat4.create();
+        gl_matrix_1.mat4.multiply(modelView, vMatrix, in_mMatrix);
+        gl_matrix_1.mat4.multiply(mvp, pMatrix, modelView);
+        const width = canvas.clientWidth;
+        const height = canvas.clientHeight;
+        for (let i = 0; i < this._sources.length; i++) {
+            const source = this._sources[i];
+            const style = source.mediaStyle;
+            const img = this._mediaElements[i];
+            if (!style?.src) {
+                if (img)
+                    img.style.display = "none";
+                continue;
+            }
+            if (!this.isSourceOnVisibleHemisphere(source, in_mMatrix, vMatrix)) {
+                if (img)
+                    img.style.display = "none";
+                continue;
+            }
+            const projected = gl_matrix_1.vec4.fromValues(source.point.x, source.point.y, source.point.z, 1);
+            gl_matrix_1.vec4.transformMat4(projected, projected, mvp);
+            if (!projected[3]) {
+                if (img)
+                    img.style.display = "none";
+                continue;
+            }
+            const ndcX = projected[0] / projected[3];
+            const ndcY = projected[1] / projected[3];
+            const ndcZ = projected[2] / projected[3];
+            if (ndcX < -1.15 ||
+                ndcX > 1.15 ||
+                ndcY < -1.15 ||
+                ndcY > 1.15 ||
+                ndcZ < -1.15 ||
+                ndcZ > 1.15) {
+                if (img)
+                    img.style.display = "none";
+                continue;
+            }
+            const mediaEl = this.ensureMediaElement(i, style);
+            if (!mediaEl.parentElement)
+                host.appendChild(mediaEl);
+            const px = (ndcX * 0.5 + 0.5) * width;
+            const py = (1 - (ndcY * 0.5 + 0.5)) * height;
+            const baseSize = source.shapeSize || CatalogueGL.STANDARD_SHAPE_SIZE;
+            const size = Math.max(8, baseSize * (style.scale ?? 2.4));
+            const rotation = style.rotationDeg ?? 0;
+            mediaEl.style.display = "block";
+            mediaEl.style.left = `${px - size / 2}px`;
+            mediaEl.style.top = `${py - size / 2}px`;
+            mediaEl.style.width = `${size}px`;
+            mediaEl.style.height = `${size}px`;
+            mediaEl.style.opacity = `${style.opacity ?? 1}`;
+            mediaEl.style.transform = `rotate(${rotation}deg)`;
+        }
     }
     sourceMatches(left, right) {
         if (left === right)
@@ -8542,33 +9108,46 @@ class CatalogueGL {
         this._webgl.bufferData(this._webgl.ARRAY_BUFFER, this.vertexCataloguePosition, this._webgl.STATIC_DRAW);
         this._bufferInitialised = true;
     }
-    getSelectionRadius() {
-        const order = this._visibleTilesManager.getVisibleOrder();
-        switch (order) {
-            case 0:
-            case 1:
-            case 2:
-                // return 0.005;
-                return 0.01;
-            case 3:
-            // return 0.001;
-            case 4:
-            // return 0.0009;
-            case 5:
-                // return 0.0005;
-                return 0.005;
-            case 6:
-            // return 0.0001;
-            case 7:
-            // return 0.00009;
-            case 8:
-                // return 0.00005;
-                return 0.001;
-            case 9:
-                return 0.0005;
-            default:
-                return 0.0001;
+    static MIN_HIT_RADIUS_PX = 6;
+    static HIT_PADDING_PX = 3;
+    static CANDIDATE_RADIUS_PX = 16;
+    getCanvas() {
+        return this._webgl.canvas;
+    }
+    getHitRadiusPx(source) {
+        const markerSize = source.shapeSize ?? CatalogueGL.STANDARD_SHAPE_SIZE;
+        return Math.max(CatalogueGL.MIN_HIT_RADIUS_PX, markerSize / 2 + CatalogueGL.HIT_PADDING_PX);
+    }
+    getCandidateSearchRadiusRad(pMatrix) {
+        const canvas = this._webgl.canvas;
+        const width = Math.max(1, canvas.clientWidth);
+        const height = Math.max(1, canvas.clientHeight);
+        // pMatrix[0] and pMatrix[5] are the perspective scale factors for X/Y.
+        // Convert a small screen-space radius to a conservative angular radius.
+        const fovXRad = 2 * Math.atan(1 / Math.abs(pMatrix[0]));
+        const fovYRad = 2 * Math.atan(1 / Math.abs(pMatrix[5]));
+        const radPerPixel = Math.max(fovXRad / width, fovYRad / height);
+        return CatalogueGL.CANDIDATE_RADIUS_PX * radPerPixel;
+    }
+    projectPointToScreen(point, mvp, width, height) {
+        const projected = gl_matrix_1.vec4.fromValues(point.x, point.y, point.z, 1);
+        gl_matrix_1.vec4.transformMat4(projected, projected, mvp);
+        if (projected[3] <= 0)
+            return null;
+        const ndcX = projected[0] / projected[3];
+        const ndcY = projected[1] / projected[3];
+        return [(ndcX * 0.5 + 0.5) * width, (1 - (ndcY * 0.5 + 0.5)) * height];
+    }
+    clearSelection() {
+        for (const idx of this.selectedIndexes) {
+            const base = idx * CatalogueGL.ELEM_SIZE;
+            if (base + 4 >= this.vertexCataloguePosition.length)
+                continue;
+            this.vertexCataloguePosition[base + 3] = 0.0;
+            this.vertexCataloguePosition[base + 4] =
+                this._sources[idx]?.shapeSize ?? CatalogueGL.STANDARD_SHAPE_SIZE;
         }
+        this.selectedIndexes = [];
     }
     setSelectedIndexes(selectedIndex) {
         selectedIndex.forEach((idx) => {
@@ -8595,8 +9174,8 @@ class CatalogueGL {
      * Run click-picking and update selection with the nearest candidate in current pixel.
      * Returns the selected source or null if no source was hit.
      */
-    getSourcesFromPointer(in_mouseHelper) {
-        const pickedIndexes = this.checkClicking(in_mouseHelper);
+    getSourcesFromPointer(in_mouseHelper, in_mMatrix, vMatrix, pMatrix) {
+        const pickedIndexes = this.checkClicking(in_mouseHelper, in_mMatrix, vMatrix, pMatrix);
         if (!pickedIndexes.length) {
             return {
                 sources: [],
@@ -8615,8 +9194,8 @@ class CatalogueGL {
      * Run click-picking and update selection with the nearest candidate in current pixel.
      * Returns the selected source or null if no source was hit.
      */
-    selectPrimarySourceFromClick(in_mouseHelper) {
-        const picked = this.getSourcesFromPointer(in_mouseHelper);
+    selectPrimarySourceFromClick(in_mouseHelper, in_mMatrix, vMatrix, pMatrix) {
+        const picked = this.getSourcesFromPointer(in_mouseHelper, in_mMatrix, vMatrix, pMatrix);
         const clickedIndexes = picked?.pickedIndexes ?? [];
         // if (!clickedIndexes.length) {
         //     this.setSelectedIndexes([]);
@@ -8652,42 +9231,65 @@ class CatalogueGL {
         const idx = this.hoveredIndexes[0];
         return this._sources[idx] ?? null;
     }
-    findNearestSourceIndex(in_mouseHelper) {
-        if (in_mouseHelper.x == null ||
-            in_mouseHelper.y == null ||
-            in_mouseHelper.z == null) {
+    findNearestSourceIndex(in_mouseHelper, in_mMatrix, vMatrix, pMatrix) {
+        if (in_mouseHelper.xyz == null)
             return null;
+        const healpix = Global_js_1.default.getHealpix(Global_js_1.default.selectionOrder);
+        const mouseVec = new healpix_1.Vec3(...in_mouseHelper.xyz);
+        const mousePointing = new healpix_1.Pointing(mouseVec, false);
+        const searchRadiusRad = this.getCandidateSearchRadiusRad(pMatrix);
+        const rangeSet = healpix.queryDiscInclusive(mousePointing, searchRadiusRad, 4);
+        const pixels = rangeSet.r;
+        const candidateIndexes = new Set();
+        for (const pixel of pixels) {
+            const indexes = this._healpixDensityMap.get(pixel);
+            if (!indexes)
+                continue;
+            indexes.forEach((idx) => candidateIndexes.add(idx));
         }
-        const mousePix = in_mouseHelper.computeNpix();
-        if (mousePix == null)
+        if (!candidateIndexes.size)
+            return null;
+        const canvas = this._webgl.canvas;
+        const width = canvas.clientWidth;
+        const height = canvas.clientHeight;
+        if (!width || !height)
             return null;
-        const candidates = this._healpixDensityMap.get(mousePix);
-        if (!candidates?.length)
+        const modelView = gl_matrix_1.mat4.create();
+        const mvp = gl_matrix_1.mat4.create();
+        gl_matrix_1.mat4.multiply(modelView, vMatrix, in_mMatrix);
+        gl_matrix_1.mat4.multiply(mvp, pMatrix, modelView);
+        const mousePoint = new Point_js_1.Point({
+            x: in_mouseHelper.xyz[0],
+            y: in_mouseHelper.xyz[1],
+            z: in_mouseHelper.xyz[2],
+        }, CoordsType_js_1.CoordsType.CARTESIAN);
+        const mouseScreen = this.projectPointToScreen(mousePoint, mvp, width, height);
+        if (!mouseScreen)
             return null;
-        const selR = this.getSelectionRadius();
         let nearestIndex = null;
-        let nearestDistance = Number.POSITIVE_INFINITY;
-        for (const sourceIdx of candidates) {
+        let nearestDistancePx = Number.POSITIVE_INFINITY;
+        for (const sourceIdx of candidateIndexes) {
             const source = this._sources[sourceIdx];
             if (!source)
                 continue;
-            const dx = source.point.x - in_mouseHelper.x;
-            const dy = source.point.y - in_mouseHelper.y;
-            const dz = source.point.z - in_mouseHelper.z;
-            const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
-            if (dist <= selR && dist < nearestDistance) {
-                nearestDistance = dist;
+            const sourceScreen = this.projectPointToScreen(source.point, mvp, width, height);
+            if (!sourceScreen)
+                continue;
+            const distancePx = Math.hypot(sourceScreen[0] - mouseScreen[0], sourceScreen[1] - mouseScreen[1]);
+            if (distancePx <= this.getHitRadiusPx(source) &&
+                distancePx < nearestDistancePx) {
+                nearestDistancePx = distancePx;
                 nearestIndex = sourceIdx;
             }
         }
         return nearestIndex;
     }
-    checkClicking(in_mouseHelper) {
-        const nearestIndex = this.findNearestSourceIndex(in_mouseHelper);
+    checkClicking(in_mouseHelper, in_mMatrix, vMatrix, pMatrix) {
+        const nearestIndex = this.findNearestSourceIndex(in_mouseHelper, in_mMatrix, vMatrix, pMatrix);
         return nearestIndex == null ? [] : [nearestIndex];
     }
-    checkHovering(in_mouseHelper) {
-        const nearestIndex = this.findNearestSourceIndex(in_mouseHelper);
+    checkHovering(in_mouseHelper, in_mMatrix, vMatrix, pMatrix) {
+        const nearestIndex = this.findNearestSourceIndex(in_mouseHelper, in_mMatrix, vMatrix, pMatrix);
         return nearestIndex == null ? [] : [nearestIndex];
     }
     /**
@@ -8723,6 +9325,13 @@ class CatalogueGL {
         if (this._catalogueShaderProgram.locations.color) {
             this._webgl.uniform4f(this._catalogueShaderProgram.locations.color, rgb[0], rgb[1], rgb[2], 1.0);
         }
+        const interactionColors = (0, Utils_js_1.interactionColorsFromHex)(this._shapeColor);
+        if (this._catalogueShaderProgram.locations.hoverColor) {
+            this._webgl.uniform4f(this._catalogueShaderProgram.locations.hoverColor, ...interactionColors.hover, 1.0);
+        }
+        if (this._catalogueShaderProgram.locations.selectedColor) {
+            this._webgl.uniform4f(this._catalogueShaderProgram.locations.selectedColor, ...interactionColors.selected, 1.0);
+        }
         // selected flags
         for (let s = 0; s < this.selectedIndexes.length; s++) {
             const idx = this.selectedIndexes[s];
@@ -8733,7 +9342,8 @@ class CatalogueGL {
         // clear old hovered
         for (let k = 0; k < this.hoveredIndexes.length; k++) {
             const base = this.hoveredIndexes[k] * CatalogueGL.ELEM_SIZE;
-            // if (this.vertexCataloguePosition[base + 3] == 2.0) continue; // selected, skip hover
+            if (this.selectedIndexes.includes(this.hoveredIndexes[k]))
+                continue;
             this.vertexCataloguePosition[base + 3] = 0.0; // not hovered
             this.vertexCataloguePosition[base + 4] =
                 this._sources[this.hoveredIndexes[k]].shapeSize; // size
@@ -8747,7 +9357,7 @@ class CatalogueGL {
             //     this.vertexCataloguePosition[base + 3] = 0.0; // not hovered
             //     this.vertexCataloguePosition[base + 4] = this._sources[this.hoveredIndexes[k]].shapeSize; // size
             // }
-            this.hoveredIndexes = this.checkHovering(in_mouseHelper);
+            this.hoveredIndexes = this.checkHovering(in_mouseHelper, in_mMatrix, vMatrix, pMatrix);
             // // new hovered
             // for (let i = 0; i < this.hoveredIndexes.length; i++) {
             //     const idx = this.hoveredIndexes[i];
@@ -8761,7 +9371,8 @@ class CatalogueGL {
         for (let i = 0; i < this.hoveredIndexes.length; i++) {
             const idx = this.hoveredIndexes[i];
             const base = idx * CatalogueGL.ELEM_SIZE;
-            // if (this.vertexCataloguePosition[base + 3] == 2.0) continue; // selected, skip hover
+            if (this.selectedIndexes.includes(idx))
+                continue;
             this.vertexCataloguePosition[base + 3] = 1.0; // hovered
             this.vertexCataloguePosition[base + 4] = this._sources[idx].shapeSize; // size
         }
@@ -8770,6 +9381,7 @@ class CatalogueGL {
         // draw
         const numItems = this.vertexCataloguePosition.length / CatalogueGL.ELEM_SIZE;
         this._webgl.drawArrays(this._webgl.POINTS, 0, numItems);
+        this.updateMediaOverlay(in_mMatrix, vMatrix, pMatrix);
         this._oldMouseCoords = in_mouseHelper.xyz;
     }
 }
@@ -9168,6 +9780,7 @@ class XYZMap extends AbstractSkyEntity_js_1.AbstractSkyEntity {
     _latLonGrid;
     _colorMapIdx = 0;
     _colorMap = ColorMaps_js_1.ColorMaps['native'];
+    _opacity = 1;
     constructor(radius, position, xrad, yrad, descriptor, webgl, gridLabelContainers) {
         super(radius, position, xrad, yrad, descriptor.name, webgl, false);
         this._descriptor = descriptor;
@@ -9182,6 +9795,10 @@ class XYZMap extends AbstractSkyEntity_js_1.AbstractSkyEntity {
         const fov = 180;
         this._zoom = XYZFoVHelper_js_1.xyzFovHelper.getZoom(fov);
     }
+    setOpacity(opacity) {
+        this._opacity = Math.min(1, Math.max(0, opacity));
+        this._xyzShaderProgram.setOpacity(this._opacity);
+    }
     changeColorMap(colorMap) {
         this._colorMap = colorMap;
         switch (colorMap.name) {
@@ -9229,6 +9846,9 @@ class XYZMap extends AbstractSkyEntity_js_1.AbstractSkyEntity {
     initShaders() {
         this._xyzShaderProgram.enableProgram();
     }
+    clearLonLatGridLabels() {
+        this._latLonGrid.clearLabels();
+    }
     isLonLatGridVisible() {
         return this._latLonGrid.isVisible();
     }
@@ -9243,7 +9863,7 @@ class XYZMap extends AbstractSkyEntity_js_1.AbstractSkyEntity {
         // this._zoom = this.resolveVisibleZoom(fov)
         this._zoom = XYZFoVHelper_js_1.xyzFovHelper.getZoom(fov);
     }
-    draw(input) {
+    draw(input, asOverlay = false) {
         const vMatrix = input.camera.getCameraMatrix();
         if (!vMatrix)
             return;
@@ -9253,6 +9873,18 @@ class XYZMap extends AbstractSkyEntity_js_1.AbstractSkyEntity {
         this.refresh(input);
         const mMatrix = this.getModelMatrix();
         this._xyzShaderProgram.setRuntimeColorMap(this._colorMap);
+        this._xyzShaderProgram.setOpacity(this._opacity);
+        const depthTestWasEnabled = this._webgl.isEnabled(this._webgl.DEPTH_TEST);
+        const blendWasEnabled = this._webgl.isEnabled(this._webgl.BLEND);
+        const blendSrcRgb = this._webgl.getParameter(this._webgl.BLEND_SRC_RGB);
+        const blendDstRgb = this._webgl.getParameter(this._webgl.BLEND_DST_RGB);
+        const blendSrcAlpha = this._webgl.getParameter(this._webgl.BLEND_SRC_ALPHA);
+        const blendDstAlpha = this._webgl.getParameter(this._webgl.BLEND_DST_ALPHA);
+        if (asOverlay) {
+            this._webgl.disable(this._webgl.DEPTH_TEST);
+            this._webgl.enable(this._webgl.BLEND);
+            this._webgl.blendFunc(this._webgl.SRC_ALPHA, this._webgl.ONE_MINUS_SRC_ALPHA);
+        }
         const tileSelection = this._visibleTilesManager.computeVisibleTiles(this._zoom, this, this._webgl, input.camera, input.pMatrix);
         const visibleTiles = tileSelection.visibleTiles;
         const ancestorsMap = tileSelection.ancestorsMap;
@@ -9270,7 +9902,20 @@ class XYZMap extends AbstractSkyEntity_js_1.AbstractSkyEntity {
             const ancestorTile = this.findBestAvailableAncestor(tile.coord);
             ancestorTile?.draw(tileSelection.currentZoom, [tile.coord], ancestorsMap, pMatrix, vMatrix, mMatrix, this._colorMapIdx);
         }
-        this._latLonGrid.draw(input);
+        if (asOverlay) {
+            if (depthTestWasEnabled)
+                this._webgl.enable(this._webgl.DEPTH_TEST);
+            else
+                this._webgl.disable(this._webgl.DEPTH_TEST);
+            this._webgl.blendFuncSeparate(blendSrcRgb, blendDstRgb, blendSrcAlpha, blendDstAlpha);
+            if (blendWasEnabled)
+                this._webgl.enable(this._webgl.BLEND);
+            else
+                this._webgl.disable(this._webgl.BLEND);
+        }
+        else {
+            this._latLonGrid.draw(input);
+        }
     }
     createTile(coord) {
         return new XYZAnchestorTile_js_1.XYZAnchestorTile(coord, this.resolveTileUrl(coord), this._webgl, this._xyzShaderProgram, this._meshBuilder, this._descriptor.segmentsPerSide);
@@ -10564,6 +11209,10 @@ class FootprintSetGL {
         }
         return clickedIndexes;
     }
+    clearSelection() {
+        this.selectedIndexes = [];
+        this.refreshSelectedFootprints();
+    }
     setSelectedIndexes(selectedIndex) {
         selectedIndex.forEach((idx) => {
             if (idx < 0 || idx >= this.footprintPolygons.length)
@@ -10865,9 +11514,10 @@ class FootprintSetGL {
         if (in_mouseHelper != null && in_mouseHelper.xyz != this.oldMouseCoords) {
             this.checkSelection(in_mouseHelper);
         }
+        const interactionColors = (0, Utils_js_1.interactionColorsFromHex)(this._shapeColor);
         if (this._hoveredFootprints.length > 0) {
             // TODO POINT_SIZE doesn't have any effect on line thickness!! it only applies to points
-            const rgb = (0, Utils_js_1.colorHex2RGB)("#00FF00");
+            const rgb = interactionColors.hover;
             const alpha = 1.0;
             this._webgl.uniform4f(this._footprintShaderProgram.locations.color, rgb[0], rgb[1], rgb[2], alpha);
             this._webgl.uniform1f(this._footprintShaderProgram.locations.pointSize, 14.0); // <--- POINT_SIZE in LINE_LOOP is not applicable
@@ -10882,7 +11532,7 @@ class FootprintSetGL {
             this._webgl.drawElements(this._webgl.LINE_LOOP, this.hoveredVertexPosition.length / 3 + this.nHoveredPrimitiveFlags, this._webgl.UNSIGNED_INT, 0);
         }
         if (this._selectedFootprints.length > 0) {
-            const rgb = (0, Utils_js_1.colorHex2RGB)("#ECB462");
+            const rgb = interactionColors.selected;
             const alpha = 1.0;
             this._webgl.uniform4f(this._footprintShaderProgram.locations.color, rgb[0], rgb[1], rgb[2], alpha);
             this._webgl.uniform1f(this._footprintShaderProgram.locations.pointSize, 14.0); // <--- POINT_SIZE in LINE_LOOP is not applicable
@@ -10895,6 +11545,11 @@ class FootprintSetGL {
             this._webgl.bufferData(this._webgl.ELEMENT_ARRAY_BUFFER, this.selectedElementIndexes, this._webgl.STATIC_DRAW);
             // this._gl.drawElements (this._gl.LINE_LOOP, this._selectedVertexPosition.length / 3 + this._nSlectedPrimitiveFlags,this._gl.UNSIGNED_SHORT, 0);
             this._webgl.drawElements(this._webgl.LINE_LOOP, this.selectedVertexPosition.length / 3 + this.nSlectedPrimitiveFlags, this._webgl.UNSIGNED_INT, 0);
+            // Keep selection visually distinct from hover without relying on
+            // non-portable line widths. Reuse the selected geometry as small
+            // vertex markers; POINT_SIZE is supported for POINTS in WebGL2.
+            this._webgl.uniform1f(this._footprintShaderProgram.locations.pointSize, 4.0);
+            this._webgl.drawElements(this._webgl.POINTS, this.selectedVertexPosition.length / 3 + this.nSlectedPrimitiveFlags, this._webgl.UNSIGNED_INT, 0);
         }
         this._webgl.bindBuffer(this._webgl.ARRAY_BUFFER, this.vertexCataloguePositionBuffer);
         this._webgl.vertexAttribPointer(this._footprintShaderProgram.locations.position, FootprintSetGL.ELEM_SIZE, this._webgl.FLOAT, false, FootprintSetGL.BYTES_X_ELEM * FootprintSetGL.ELEM_SIZE, 0);
@@ -11128,6 +11783,9 @@ class EquatorialGrid extends AbstractSkyEntity_js_1.AbstractSkyEntity {
             gl.uniform4f(uColor, rgb[0], rgb[1], rgb[2], 1.0);
         }
     }
+    clearLabels() {
+        this.gridText.resetDivSets();
+    }
     isVisible() {
         return this.showGrid;
     }
@@ -11724,6 +12382,9 @@ class HealpixGrid extends AbstractSkyEntity_js_1.AbstractSkyEntity {
         this.gridText.resetDivSets();
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
     }
+    clearLabels() {
+        this.gridText.resetDivSets();
+    }
     get visibleorder() {
         return this._visibleorder;
     }
@@ -11958,6 +12619,9 @@ class LatLonGrid extends AbstractSkyEntity_js_1.AbstractSkyEntity {
             gl.uniform4f(uColor, rgb[0], rgb[1], rgb[2], 1.0);
         }
     }
+    clearLabels() {
+        this.gridText.resetDivSets();
+    }
     draw(input) {
         if (!this._showGrid) {
             this.gridText.resetDivSets();
@@ -14626,6 +15290,8 @@ class MeshHiPS extends AbstractSkyEntity_js_1.AbstractSkyEntity {
     _currentOrder;
     _visibleTiles = [];
     _coverageTiles = [];
+    _color;
+    _wireframe;
     constructor(radius, position, xrad, yrad, _descriptor, webgl, _healpixGrid) {
         super(radius, position, xrad, yrad, _descriptor.name, webgl, false);
         this._descriptor = _descriptor;
@@ -14634,6 +15300,8 @@ class MeshHiPS extends AbstractSkyEntity_js_1.AbstractSkyEntity {
         this._shaderProgram = new MeshHiPSShaderProgram_js_1.MeshHiPSShaderProgram(webgl);
         this._shaderProgram.enableProgram();
         this._currentOrder = _descriptor.selectedOrder;
+        this._color = [..._descriptor.color];
+        this._wireframe = _descriptor.wireframe;
     }
     get currentOrder() {
         return this._currentOrder;
@@ -14656,6 +15324,12 @@ class MeshHiPS extends AbstractSkyEntity_js_1.AbstractSkyEntity {
     getProperty(key) {
         return this._descriptor.getProperty(key);
     }
+    setColor(color) {
+        this._color = [...color];
+    }
+    setWireframe(wireframe) {
+        this._wireframe = wireframe;
+    }
     refreshOrder(fovDeg) {
         if (this._descriptor.fixedOrder) {
             this._currentOrder = this._descriptor.selectedOrder;
@@ -14695,7 +15369,7 @@ class MeshHiPS extends AbstractSkyEntity_js_1.AbstractSkyEntity {
             for (const coord of byOrder.get(order) ?? []) {
                 this._tiles
                     .get(this.tileKey(coord))
-                    ?.draw(pMatrix, vMatrix, mMatrix, this._descriptor.color, this._descriptor.wireframe);
+                    ?.draw(pMatrix, vMatrix, mMatrix, this._color, this._wireframe);
             }
         }
         if (wasCullFace)
@@ -16486,6 +17160,7 @@ exports.TerraFootprintSetGL = TerraFootprintSetGL;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.TerraPointSetGL = void 0;
 const CatalogueGL_js_1 = __webpack_require__(1232);
+const gl_matrix_1 = __webpack_require__(3890);
 const MetadataManager_js_1 = __webpack_require__(5403);
 const Point_js_1 = __webpack_require__(6553);
 const CoordsType_js_1 = __webpack_require__(8145);
@@ -16520,8 +17195,45 @@ class TerraPointSetGL extends CatalogueGL_js_1.CatalogueGL {
         this._ready = true;
         this._bufferInitialised = false;
     }
+    findNearestSourceIndex(inMouseHelper, inMatrix, viewMatrix, projectionMatrix) {
+        if (inMouseHelper.xyz == null)
+            return null;
+        const canvas = this.getCanvas();
+        const width = canvas.clientWidth;
+        const height = canvas.clientHeight;
+        if (!width || !height)
+            return null;
+        const modelView = gl_matrix_1.mat4.create();
+        const mvp = gl_matrix_1.mat4.create();
+        gl_matrix_1.mat4.multiply(modelView, viewMatrix, inMatrix);
+        gl_matrix_1.mat4.multiply(mvp, projectionMatrix, modelView);
+        const mousePoint = new Point_js_1.Point({
+            x: inMouseHelper.xyz[0],
+            y: inMouseHelper.xyz[1],
+            z: inMouseHelper.xyz[2],
+        }, CoordsType_js_1.CoordsType.CARTESIAN);
+        const mouseScreen = this.projectPointToScreen(mousePoint, mvp, width, height);
+        if (!mouseScreen)
+            return null;
+        let nearestIndex = null;
+        let nearestDistancePx = Number.POSITIVE_INFINITY;
+        for (let index = 0; index < this._sources.length; index += 1) {
+            const source = this._sources[index];
+            if (!source)
+                continue;
+            const sourceScreen = this.projectPointToScreen(source.point, mvp, width, height);
+            if (!sourceScreen)
+                continue;
+            const distancePx = Math.hypot(sourceScreen[0] - mouseScreen[0], sourceScreen[1] - mouseScreen[1]);
+            if (distancePx <= this.getHitRadiusPx(source) &&
+                distancePx < nearestDistancePx) {
+                nearestDistancePx = distancePx;
+                nearestIndex = index;
+            }
+        }
+        return nearestIndex;
+    }
     draw(inMatrix, inMouseHelper, viewMatrix, projectionMatrix) {
-        this._oldMouseCoords = inMouseHelper?.xyz ?? null;
         super.draw(inMatrix, inMouseHelper, viewMatrix, projectionMatrix);
     }
 }
@@ -16753,6 +17465,8 @@ class CatalogueShaderProgram {
         this._webgl = webgl;
         this.gl_uniforms = {
             vertex_color: 'u_fragcolor',
+            hover_color: 'u_hovercolor',
+            selected_color: 'u_selectedcolor',
             m_perspective: 'uPMatrix',
             m_model_view: 'uMVMatrix'
         };
@@ -16766,6 +17480,8 @@ class CatalogueShaderProgram {
             pMatrix: null,
             mvMatrix: null,
             color: null,
+            hoverColor: null,
+            selectedColor: null,
             position: -1,
             hovered: -1,
             pointSize: -1,
@@ -16815,6 +17531,8 @@ class CatalogueShaderProgram {
         this.locations.pointSize = gl.getAttribLocation(this.shaderProgram, this.gl_attributes.point_size);
         this.locations.brightness = gl.getAttribLocation(this.shaderProgram, this.gl_attributes.point_hue);
         this.locations.color = gl.getUniformLocation(this.shaderProgram, this.gl_uniforms.vertex_color);
+        this.locations.hoverColor = gl.getUniformLocation(this.shaderProgram, this.gl_uniforms.hover_color);
+        this.locations.selectedColor = gl.getUniformLocation(this.shaderProgram, this.gl_uniforms.selected_color);
     }
     enableShaders(pMatrix, modelMatrix, viewMatrix) {
         // const gl = global.gl as GL
@@ -17505,6 +18223,8 @@ class ShaderManager {
     in float v_brightness;
 
     uniform vec4 u_fragcolor;
+    uniform vec4 u_hovercolor;
+    uniform vec4 u_selectedcolor;
 
     out vec4 fragColor;
 
@@ -17561,11 +18281,12 @@ class ShaderManager {
       #endif
 
       if (v_selected == 1.0){
-        // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * (alpha);
-        fragColor = vec4(1.0, 0.0, 0.0, 1.0) * (alpha);
+        fragColor = u_hovercolor * alpha;
       } else if (v_selected == 2.0){
-        // gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0) * (alpha);
-        fragColor = vec4(1.0, 1.0, 0.0, 1.0) * (alpha);
+        // Persistent selection: keep the dataset colour as an outer ring
+        // and use the hover colour for the fill. This remains visible for
+        // both light and dark user-selected base colours.
+        fragColor = (r > 0.72 ? u_fragcolor : u_hovercolor) * alpha;
       }else{
         if (r < 0.4) {
           discard;
@@ -17973,6 +18694,7 @@ class XYZShaderProgram {
     _shaderProgram;
     _colorMapBlockIndex = null;
     _colorMapBuffer = null;
+    _opacity = 1;
     _runtimeColorMap;
     _colorMapVariableInfo = {
         r_palette: { index: 0, offset: 0 },
@@ -17987,6 +18709,7 @@ class XYZShaderProgram {
             vMatrix: null,
             sampler: null,
             colorMapIdx: null,
+            opacity: null,
             vertexPositionAttribute: -1,
             textureCoordAttribute: -1,
         };
@@ -18007,6 +18730,9 @@ class XYZShaderProgram {
     enableProgram() {
         this._webgl.useProgram(this.shaderProgram);
     }
+    setOpacity(opacity) {
+        this._opacity = Math.min(1, Math.max(0, opacity));
+    }
     setRuntimeColorMap(colorMap) {
         this._runtimeColorMap = colorMap;
     }
@@ -18019,6 +18745,7 @@ class XYZShaderProgram {
         this.locations.vMatrix = gl.getUniformLocation(program, 'uVMatrix');
         this.locations.sampler = gl.getUniformLocation(program, 'uSampler');
         this.locations.colorMapIdx = gl.getUniformLocation(program, 'cmapIdx');
+        this.locations.opacity = gl.getUniformLocation(program, 'uOpacity');
         this.locations.vertexPositionAttribute = gl.getAttribLocation(program, 'aVertexPosition');
         this.locations.textureCoordAttribute = gl.getAttribLocation(program, 'aTextureCoord');
         gl.uniformMatrix4fv(this.locations.pMatrix, false, pMatrix);
@@ -18026,6 +18753,7 @@ class XYZShaderProgram {
         gl.uniformMatrix4fv(this.locations.mMatrix, false, mMatrix);
         gl.uniform1i(this.locations.sampler, 0);
         gl.uniform1i(this.locations.colorMapIdx, colorMapIdx);
+        gl.uniform1f(this.locations.opacity, this._opacity);
         if (colorMapIdx >= 2) {
             this.uploadColorMap(colorMapIdx);
         }
@@ -18048,6 +18776,7 @@ class XYZShaderProgram {
       in vec2 vTextureCoord;
       uniform sampler2D uSampler;
       uniform int cmapIdx;
+      uniform float uOpacity;
 
       layout (std140) uniform colormap {
         float r_palette[256];
@@ -18062,7 +18791,7 @@ class XYZShaderProgram {
 
         if (cmapIdx == 1) {
           float gray = 0.21 * color.r + 0.71 * color.g + 0.07 * color.b;
-          outColor = vec4(vec3(gray), color.a);
+          outColor = vec4(vec3(gray), color.a * uOpacity);
           return;
         }
 
@@ -18075,12 +18804,12 @@ class XYZShaderProgram {
             r_palette[rIndex] / 256.0,
             g_palette[gIndex] / 256.0,
             b_palette[bIndex] / 256.0,
-            color.a
+            color.a * uOpacity
           );
           return;
         }
 
-        outColor = color;
+        outColor = vec4(color.rgb, color.a * uOpacity);
       }`);
         gl.attachShader(this._shaderProgram, vertexShader);
         gl.attachShader(this._shaderProgram, fragmentShader);
@@ -19291,7 +20020,6 @@ exports["default"] = STCSParser;
 (__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-var __webpack_unused_export__;
 
 /*
  * AstroViewer
@@ -19303,9 +20031,10 @@ var __webpack_unused_export__;
  *
  * See LICENSE.md, LICENSE-AGPL.md, and LICENSE-COMMERCIAL.md for details.
  */
-__webpack_unused_export__ = ({ value: true });
+Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.cartesianToSpherical = cartesianToSpherical;
 exports.colorHex2RGB = colorHex2RGB;
+exports.interactionColorsFromHex = interactionColorsFromHex;
 exports.degToRad = degToRad;
 exports.radToDeg = radToDeg;
 exports.sphericalToAstroDeg = sphericalToAstroDeg;
@@ -19313,6 +20042,8 @@ exports.sphericalToCartesian = sphericalToCartesian;
 exports.astroDegToSpherical = astroDegToSpherical;
 exports.raDegToHMS = raDegToHMS;
 exports.decDegToDMS = decDegToDMS;
+exports.raHMSToDeg = raHMSToDeg;
+exports.decDMSToDeg = decDMSToDeg;
 /**
  * @author Fabrizio Giordano (Fab)
  */
@@ -19343,6 +20074,25 @@ function colorHex2RGB(hexColor) {
     const rgb3 = (dec3 / 255).toFixed(2);
     return [parseFloat(rgb1), parseFloat(rgb2), parseFloat(rgb3)];
 }
+/**
+ * Derive interaction colours from the object's normal colour.
+ * Dark colours move towards white; light colours move towards black.
+ * Selection uses the stronger contrast so selected > hover > normal.
+ */
+function interactionColorsFromHex(hexColor) {
+    const base = colorHex2RGB(hexColor);
+    const luminance = 0.2126 * base[0] + 0.7152 * base[1] + 0.0722 * base[2];
+    const target = luminance < 0.55 ? 1.0 : 0.0;
+    const mix = (amount) => [
+        base[0] + (target - base[0]) * amount,
+        base[1] + (target - base[1]) * amount,
+        base[2] + (target - base[2]) * amount,
+    ];
+    return {
+        hover: mix(0.45),
+        selected: mix(0.45),
+    };
+}
 function degToRad(degrees) {
     return (degrees / 180) * Math.PI;
 }
@@ -19389,6 +20139,13 @@ function decDegToDMS(decDeg) {
     d = d * sign;
     return { d, m, s };
 }
+function raHMSToDeg(hms) {
+    return 15 * (hms.h + hms.m / 60 + hms.s / 3600);
+}
+function decDMSToDeg(dms) {
+    const sign = dms.d < 0 || Object.is(dms.d, -0) ? -1 : 1;
+    return sign * (Math.abs(dms.d) + dms.m / 60 + dms.s / 3600);
+}
 
 
 /***/ },