release: bump version to 0.37.0

frontend/public/earth/js/info-card.js

@@ -32,7 +32,7 @@ function getMobilePopupSubtitle(type, data) {
   }
 }
 
-function positionMobilePopup(popup, touchX, touchY) {
+function positionMobilePopup(popup, touchX, touchY, options = {}) {
   const margin = 14;
   const drawerClearance = 52;
   const vpW = window.innerWidth;
@@ -46,6 +46,14 @@ function positionMobilePopup(popup, touchX, touchY) {
   const popW = popup.offsetWidth || 200;
   const popH = popup.offsetHeight || 68;
 
+  if (options.absolute === true) {
+    const left = Math.max(margin, Math.min(touchX, vpW - popW - margin));
+    const top = Math.max(margin, Math.min(touchY, bottomBound - popH - margin));
+    popup.style.left = `${left}px`;
+    popup.style.top  = `${top}px`;
+    return;
+  }
+
   const gap = 22;
   const spaceRight  = vpW - touchX;
   const spaceLeft   = touchX;
@@ -81,7 +89,7 @@ function positionMobilePopup(popup, touchX, touchY) {
 
 let popupShowToken = 0;
 
-function showMobilePopup(type, data, x, y) {
+function showMobilePopup(type, data, x, y, options = {}) {
   // Require coordinates — skip if called without position (e.g. from handleCableClick)
   if (x == null || y == null) return;
 
@@ -102,15 +110,19 @@ function showMobilePopup(type, data, x, y) {
   popupShowToken += 1;
   const token = popupShowToken;
 
+  popup.dataset.dockSide = options.dockSide === 'right' ? 'right' : 'left';
+  popup.classList.toggle('earth-mobile-popup--anchor-stable', options.anchorStable === true);
   popup.removeAttribute('hidden');
   popup.classList.remove('is-visible');
 
   requestAnimationFrame(() => {
-    positionMobilePopup(popup, x, y);
-    requestAnimationFrame(() => {
-      if (token !== popupShowToken) return; // superseded
-      popup.classList.add('is-visible');
-    });
+    positionMobilePopup(popup, x, y, options);
+    if (options.reveal === false) {
+      return;
+    }
+    if (token !== popupShowToken) return; // superseded
+    void popup.getBoundingClientRect();
+    popup.classList.add('is-visible');
   });
 }
 
@@ -119,6 +131,8 @@ function hideMobilePopup() {
   if (!popup) return;
   popupShowToken += 1; // invalidate any pending show
   popup.classList.remove('is-visible');
+  popup.classList.remove('earth-mobile-popup--anchor-stable');
+  delete popup.dataset.dockSide;
   popup.addEventListener('transitionend', () => {
     if (!popup.classList.contains('is-visible')) {
       popup.setAttribute('hidden', '');
@@ -139,6 +153,19 @@ function ensurePopupClickHandler() {
   let dragged = false;
   const DRAG_THRESHOLD = 10;
 
+  const emitDragEvent = (dragging) => {
+    const rect = popup.getBoundingClientRect();
+    window.dispatchEvent(new CustomEvent('earth:info-card-drag', {
+      detail: {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+        dragging,
+      },
+    }));
+  };
+
   popup.addEventListener('pointerdown', (e) => {
     if (e.button > 0) return;
     e.stopPropagation();
@@ -164,6 +191,7 @@ function ensurePopupClickHandler() {
     const top  = Math.max(margin, Math.min(startTop  + dy, window.innerHeight - popup.offsetHeight - margin));
     popup.style.left = `${left}px`;
     popup.style.top  = `${top}px`;
+    emitDragEvent(true);
   });
 
   document.addEventListener('pointerup', (e) => {
@@ -171,6 +199,7 @@ function ensurePopupClickHandler() {
     const wasDragged = dragged;
     dragPointerId = null;
     dragged = false;
+    emitDragEvent(false);
     if (!wasDragged) {
       window.dispatchEvent(new CustomEvent('earth:open-details-tab'));
     }
@@ -180,6 +209,7 @@ function ensurePopupClickHandler() {
     if (e.pointerId === dragPointerId) {
       dragPointerId = null;
       dragged = false;
+      emitDragEvent(false);
     }
   });
 
@@ -331,6 +361,21 @@ function setupInfoCardDrag(panel) {
   let startLeft = 0;
   let startTop = 0;
 
+  const emitDragEvent = () => {
+    const rect = panel.getBoundingClientRect();
+    window.dispatchEvent(
+      new CustomEvent('earth:info-card-drag', {
+        detail: {
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height,
+          dragging: isDragging,
+        },
+      })
+    );
+  };
+
   const stopDragging = (event) => {
     if (
       event &&
@@ -344,6 +389,7 @@ function setupInfoCardDrag(panel) {
     activePointerId = null;
     panel.classList.remove('is-dragging');
     document.body.style.userSelect = '';
+    emitDragEvent();
   };
 
   const onMove = (event) => {
@@ -362,6 +408,7 @@ function setupInfoCardDrag(panel) {
     );
     panel.style.left = `${nextLeft}px`;
     panel.style.top = `${nextTop}px`;
+    emitDragEvent();
   };
 
   handle.addEventListener('pointerdown', (event) => {
@@ -382,6 +429,7 @@ function setupInfoCardDrag(panel) {
     panel.classList.add('is-dragging');
     document.body.style.userSelect = 'none';
     handle.setPointerCapture?.(event.pointerId);
+    emitDragEvent();
   });
 
   // Listen in capture phase so card-level stopPropagation used to shield the
@@ -402,6 +450,8 @@ function mountCard() {
   panel.id = 'info-panel';
   panel.className = 'hud-panel hud-panel-info';
   panel.setAttribute('aria-live', 'polite');
+  panel.setAttribute('aria-hidden', 'true');
+  panel.setAttribute('hidden', '');
   panel.innerHTML = `
     <div id="info-card" class="info-card">
       <div class="info-card-header hud-panel-drag-handle">
@@ -516,8 +566,17 @@ function positionPanel(panel, x, y, options = {}) {
 function showPanel(x, y, options = {}) {
   const panel = getPanel();
   if (!panel) return;
+  panel.classList.toggle('hud-panel-info--anchor-stable', options.anchorStable === true);
+  panel.removeAttribute('hidden');
+  panel.setAttribute('aria-hidden', 'false');
   if (x != null && y != null) positionPanel(panel, x, y, options);
-  panel.classList.add('is-visible');
+  if (options.reveal === false) {
+    panel.classList.remove('is-visible');
+    return;
+  }
+  requestAnimationFrame(() => {
+    panel.classList.add('is-visible');
+  });
   document.body.classList.add('earth-info-open');
   window.dispatchEvent(
     new CustomEvent('earth:info-card-visibility-change', { detail: { visible: true } })
@@ -526,7 +585,12 @@ function showPanel(x, y, options = {}) {
 
 function hidePanel() {
   const panel = getPanel();
-  if (panel) panel.classList.remove('is-visible');
+  if (panel) {
+    panel.classList.remove('is-visible');
+    panel.classList.remove('hud-panel-info--anchor-stable');
+    panel.setAttribute('aria-hidden', 'true');
+    panel.setAttribute('hidden', '');
+  }
   document.body.classList.remove('earth-info-open');
   window.dispatchEvent(
     new CustomEvent('earth:info-card-visibility-change', { detail: { visible: false } })
@@ -586,7 +650,7 @@ export function showInfoCard(type, data, options = {}) {
     // Show the floating mini popup near the touch point (requires coordinates)
     if (options.x != null && options.y != null) {
       ensurePopupClickHandler();
-      showMobilePopup(type, data, options.x, options.y);
+      showMobilePopup(type, data, options.x, options.y, options);
       document.body.classList.add('earth-info-open');
       window.dispatchEvent(
         new CustomEvent('earth:info-card-visibility-change', { detail: { visible: true } })