release: bump version to 0.27.8

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "planet-frontend",
-  "version": "0.27.7",
+  "version": "0.27.8",
   "private": true,
   "packageManager": "bun@1",
   "dependencies": {

frontend/public/earth/js/controls.js

@@ -18,6 +18,7 @@ import {
 import { getShowCables } from "./cables.js";
 import { toggleBGP, getShowBGP, getBGPCount } from "./bgp.js";
 import { ensureTVPanelReady } from "./tv.js";
+import { createHUDPanel } from "./hud-panels.js";
 import {
   ensureNewsPanelReady,
   setNewsPanelVisible,
@@ -631,13 +632,20 @@ function setupLayerPanel() {
   const emptyState = document.getElementById("layer-panel-empty");
   if (!panel) return;
 
+  const layerPanel = createHUDPanel({
+    panel,
+    header: ".layer-panel-header",
+    body: "#layer-panel-body",
+    collapseBtn,
+    collapsedClass: "layer-panel--collapsed",
+    preferredDirection: "down",
+    expandLabel: "展开图层列表",
+    collapseLabel: "折叠图层列表",
+  });
+
   bindListener(collapseBtn, "click", (e) => {
     e.stopPropagation();
-    const isCollapsed = panel.classList.toggle("layer-panel--collapsed");
-    collapseBtn.title = isCollapsed ? "展开" : "折叠";
-    collapseBtn.setAttribute("aria-label", isCollapsed ? "展开图层列表" : "折叠图层列表");
-    const icon = collapseBtn.querySelector(".material-symbols-rounded");
-    if (icon) icon.textContent = isCollapsed ? "expand_more" : "expand_less";
+    layerPanel.setCollapsed(!layerPanel.isCollapsed());
   });
 
   if (searchInput) {

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);