release: bump version to 0.27.8

frontend/public/earth/js/hud-panels.js

@@ -1,6 +1,20 @@
 const DEFAULT_COLLAPSED_CLASS = "hud-panel--collapsed";
 const DEFAULT_HIDDEN_CLASS = "hud-panel-hidden";
-const EXPAND_DIRECTION_BUFFER_PX = 20;
+
+function getHudScale() {
+  const rootStyle = getComputedStyle(document.documentElement);
+  const scale = parseFloat(rootStyle.getPropertyValue("--hud-scale"));
+  return Number.isFinite(scale) && scale > 0 ? scale : 1;
+}
+
+function getEdgeFlipThresholdPx() {
+  const rootStyle = getComputedStyle(document.documentElement);
+  const hudOffset = parseFloat(rootStyle.getPropertyValue("--hud-offset"));
+  if (Number.isFinite(hudOffset) && hudOffset > 0) {
+    return hudOffset;
+  }
+  return 20 * getHudScale();
+}
 
 function clampExpandDirection(direction) {
   return direction === "up" ? "up" : "down";
@@ -16,41 +30,20 @@ function resolveElement(target, root = document) {
 }
 
 function pickExpandDirection({
-  headerRect,
-  expandedHeight,
+  panelRect,
   preferredDirection,
-  currentDirection,
 }) {
-  const spaceAbove = Math.max(0, headerRect.top);
-  const spaceBelow = Math.max(0, window.innerHeight - headerRect.bottom);
+  const spaceBelow = Math.max(0, window.innerHeight - panelRect.bottom);
+  const edgeFlipThresholdPx = getEdgeFlipThresholdPx();
   const preferred = clampExpandDirection(preferredDirection);
-  const fitsAbove = expandedHeight <= spaceAbove;
-  const fitsBelow = expandedHeight <= spaceBelow;
-  const bufferedFitsBelow = expandedHeight + EXPAND_DIRECTION_BUFFER_PX <= spaceBelow;
-  const activeDirection = clampExpandDirection(currentDirection ?? preferred);
 
-  // Hysteresis:
-  // - if we're already in "up", keep it until bottom space drops below h
-  // - if we're already in "down", keep it until bottom space grows beyond h + 20
-  if (activeDirection === "up" && spaceBelow > expandedHeight && fitsAbove) {
-    return "up";
-  }
-
-  if (activeDirection === "down" && spaceBelow < expandedHeight + EXPAND_DIRECTION_BUFFER_PX && fitsBelow) {
-    return "down";
-  }
-
-  // Main contract:
-  // d = spaceBelow, h = expandedHeight
-  // - d > h + 20 => up
-  // - d <= h + 20 => down
-  // Only fall back when the preferred side cannot actually fit.
-  if (bufferedFitsBelow && fitsAbove) return "up";
-  if (!bufferedFitsBelow && fitsBelow) return "down";
-  if (fitsAbove && fitsBelow) return preferred;
-  if (fitsAbove) return "up";
-  if (fitsBelow) return "down";
-  return spaceAbove > spaceBelow ? "up" : "down";
+  // Pure edge-threshold contract:
+  // - d < threshold => "up" family
+  // - d >= threshold => "down" family
+  // Do not pre-flip early based on expanded height.
+  if (spaceBelow <= edgeFlipThresholdPx) return "up";
+  if (spaceBelow > edgeFlipThresholdPx) return "down";
+  return preferred;
 }
 
 function getCollapseButtonState({ collapsed, direction, expandLabel, collapseLabel }) {
@@ -125,10 +118,8 @@ export function createHUDPanel({
   const syncDirection = () => {
     const expandedHeight = Math.max(bodyEl.scrollHeight, bodyEl.getBoundingClientRect().height);
     const nextDirection = pickExpandDirection({
-      headerRect: headerEl.getBoundingClientRect(),
-      expandedHeight,
+      panelRect: panelEl.getBoundingClientRect(),
       preferredDirection,
-      currentDirection,
     });
 
     currentDirection = nextDirection;
@@ -194,15 +185,23 @@ export function createHUDPanel({
   };
 
   const handleViewportChange = () => {
-    if (!panelEl.classList.contains(collapsedClass) && !panelEl.classList.contains(hiddenClass)) {
+    if (!panelEl.classList.contains(hiddenClass)) {
+      syncLayout();
+    }
+  };
+
+  const handlePointerMove = () => {
+    if (!panelEl.classList.contains(hiddenClass) && panelEl.classList.contains("is-dragging")) {
       syncLayout();
     }
   };
 
   window.addEventListener("resize", handleViewportChange);
   document.addEventListener("pointerup", handleViewportChange);
+  document.addEventListener("pointermove", handlePointerMove);
 
   syncLayout();
+  requestAnimationFrame(syncLayout);
 
   return {
     panel: panelEl,
@@ -215,6 +214,7 @@ export function createHUDPanel({
     destroy() {
       window.removeEventListener("resize", handleViewportChange);
       document.removeEventListener("pointerup", handleViewportChange);
+      document.removeEventListener("pointermove", handlePointerMove);
     },
     isCollapsed() {
       return panelEl.classList.contains(collapsedClass);