release: bump version to 0.27.1

frontend/package.json

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

frontend/public/earth/css/base.css

@@ -55,6 +55,9 @@ body,
   height: 100%;
 }
 
+/* Ensure [hidden] always wins over component display rules */
+[hidden] { display: none !important; }
+
 body.earth-page {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   background-color: #0a0a1a;

frontend/public/earth/css/info-panel.css

@@ -24,8 +24,9 @@
 /* ── Brand panel ──────────────────────────────────────────────── */
 
 .hud-panel-brand {
+  --brand-scale: 0.88;
   border-radius: 0;
-  padding: calc(12px * var(--hud-scale)) calc(14px * var(--hud-scale));
+  padding: calc(18px * var(--hud-scale)) calc(20px * var(--hud-scale));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -36,15 +37,15 @@
 .hud-panel-brand .earth-brand {
   display: flex;
   align-items: center;
-  gap: calc(10px * var(--hud-scale));
+  gap: calc(10px * var(--hud-scale) * var(--brand-scale));
   min-width: 0;
 }
 
 .hud-panel-brand .earth-brand__logo {
   display: block;
   flex: 0 0 auto;
-  width: calc(128px * var(--hud-scale));
-  height: calc(128px * var(--hud-scale));
+  width: calc(128px * var(--hud-scale) * var(--brand-scale));
+  height: calc(128px * var(--hud-scale) * var(--brand-scale));
   object-fit: contain;
 }
 
@@ -54,28 +55,28 @@
   min-width: 0;
   flex-direction: column;
   justify-content: center;
-  gap: calc(5px * var(--hud-scale));
+  gap: calc(5px * var(--hud-scale) * var(--brand-scale));
 }
 
 .hud-panel-brand .earth-brand__title {
   display: block;
-  width: min(100%, calc(160px * var(--hud-scale)));
+  width: min(100%, calc(160px * var(--hud-scale) * var(--brand-scale)));
   max-width: 100%;
   height: auto;
-  min-height: calc(20px * var(--hud-scale));
+  min-height: calc(20px * var(--hud-scale) * var(--brand-scale));
   object-fit: contain;
 }
 
 .hud-panel-brand .earth-brand__meta {
   display: flex;
   flex-direction: column;
-  gap: calc(2px * var(--hud-scale));
+  gap: calc(2px * var(--hud-scale) * var(--brand-scale));
   width: fit-content;
 }
 
 .hud-panel-brand .earth-brand__subtitle {
   color: var(--hud-text-muted);
-  font-size: calc(0.74rem * var(--hud-scale));
+  font-size: calc(0.74rem * var(--hud-scale) * var(--brand-scale));
   line-height: 1.3;
   font-weight: 500;
   letter-spacing: 0.01em;
@@ -89,7 +90,7 @@
 
 .hud-panel-brand .earth-brand__description {
   color: var(--hud-text-soft);
-  font-size: calc(0.6rem * var(--hud-scale));
+  font-size: calc(0.6rem * var(--hud-scale) * var(--brand-scale));
   line-height: 1.3;
   letter-spacing: 0.08em;
   width: fit-content;
@@ -100,7 +101,7 @@
 }
 
 .hud-panel-brand .earth-brand--en .earth-brand__title {
-  width: min(100%, calc(172px * var(--hud-scale)));
+  width: min(100%, calc(172px * var(--hud-scale) * var(--brand-scale)));
 }
 
 .hud-panel-brand .earth-brand--en .earth-brand__subtitle,

frontend/public/earth/css/layer-panel.css

@@ -1,13 +1,13 @@
 /* layer-panel.css — layer toggle panel (below brand, in left column) */
 
 .hud-panel-layers {
-  /* Lives inside .earth-left-column — position is relative via column rule */
+  /* Lives inside .earth-left-column — narrower than brand panel intentionally */
   border-radius: 0;
   padding: 0;
-  width: 100%;
+  width: calc(260px * var(--hud-scale));
   z-index: 10;
   overflow: hidden;
-  margin-top: calc(6px * var(--hud-scale));
+  margin-top: calc(12px * var(--hud-scale));
 }
 
 /* ── Header / drag handle ─────────────────────────────────────── */

frontend/public/earth/index.html

@@ -71,7 +71,7 @@
           <div class="layer-panel-search">
             <span class="material-symbols-rounded layer-panel-search-icon">search</span>
             <input
-              type="search"
+              type="text"
               id="layer-search-input"
               class="layer-panel-search-input"
               placeholder="搜索图层..."

frontend/public/earth/js/controls.js

@@ -193,14 +193,31 @@ function setupDraggableHudPanels() {
       if (!isDragging) return;
       const appRect = app.getBoundingClientRect();
       const panelRect = panel.getBoundingClientRect();
-      const nextLeft = Math.min(
+      const brandPanel = document.getElementById("brand-panel");
+      const brandRect = brandPanel ? brandPanel.getBoundingClientRect() : null;
+      const brandBottom = brandRect ? brandRect.bottom - appRect.top : 0;
+      const brandRight = brandRect ? brandRect.right - appRect.left : 0;
+
+      let nextLeft = Math.min(
         Math.max(startLeft + (event.clientX - startPointerX), 0),
         appRect.width - panelRect.width,
       );
-      const nextTop = Math.min(
+      let nextTop = Math.min(
         Math.max(startTop + (event.clientY - startPointerY), 0),
         appRect.height - panelRect.height,
       );
+      // Brand 面板形成 L 形禁区：panel 不能进入 brand 左上角矩形区域。
+      // 当两个轴同时越界时，比较两侧超出量——哪侧需要的调整量更小就卡哪侧。
+      // 从右侧滑入 → leftAdjust 小 → 卡右边；从下方滑入 → topAdjust 小 → 卡底边。
+      if (brandRect && nextLeft < brandRight && nextTop < brandBottom) {
+        const leftAdjust = brandRight - nextLeft;
+        const topAdjust = brandBottom - nextTop;
+        if (leftAdjust <= topAdjust) {
+          nextLeft = brandRight;
+        } else {
+          nextTop = brandBottom;
+        }
+      }
 
       panel.style.left = `${nextLeft}px`;
       panel.style.top = `${nextTop}px`;