gralobe 1.0.69 → 1.0.70

package/README.md

@@ -299,6 +299,24 @@ npm run build:lib
 npm run build
 ```
 
+## Z-Index Layering
+
+Gralobe constrains all UI elements to z-index range **5-99** for predictable layering:
+
+| Z-Index | Element |
+|---------|---------|
+| 5 | Country labels |
+| 10 | Legend |
+| 50 | Toolbar (bottom-right buttons) |
+| 60 | Hover tooltips |
+| 70 | lil-gui control panels |
+| 80 | Data grid overlay |
+| 90 | Category bar |
+| 95 | GUI toggle button |
+| 99 | Peak tooltips |
+
+**For host applications:** Use z-index 100+ for any UI that must appear above gralobe controls (navbars, modals, install prompts, etc.).
+
 ## Browser Support
 
 Gralobe requires WebGL support. It works in all modern browsers:

package/dist/gralobe.js

@@ -6111,7 +6111,7 @@ function pa() {
       display: flex;
       align-items: center;
       justify-content: center;
-      z-index: 1000;
+      z-index: 80;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.3s ease;
@@ -7711,7 +7711,7 @@ function Ha() {
       right: 12px;
       display: flex;
       gap: 8px;
-      z-index: 100;
+      z-index: 50;
       pointer-events: auto;
     }
 
@@ -8360,7 +8360,7 @@ class Za {
           align-items: center !important;
           justify-content: center !important;
           cursor: pointer !important;
-          z-index: 1002 !important;
+          z-index: 95 !important;
           backdrop-filter: blur(4px) !important;
           -webkit-backdrop-filter: blur(4px) !important;
           transition: all 0.2s ease !important;
@@ -8394,7 +8394,7 @@ class Za {
           display: flex !important;
           flex-direction: column !important;
           gap: 6px !important;
-          z-index: 1001 !important;
+          z-index: 90 !important;
           transition: opacity 0.2s ease, transform 0.2s ease !important;
           pointer-events: none !important;
           opacity: 0 !important;
@@ -8443,7 +8443,7 @@ class Za {
           top: 50px !important; /* Align with top of toolbar */
           right: 100px !important; /* To the left of the toolbar */
           width: 160px !important;
-          z-index: 1000 !important;
+          z-index: 70 !important;
           
           --background-color: rgba(0, 10, 20, 0.9) !important;
           --text-color: #ddd !important;
@@ -8891,7 +8891,7 @@ class Za {
       position: "absolute",
       display: "none",
       pointerEvents: "none",
-      zIndex: "1000",
+      zIndex: "60",
       padding: "8px 12px",
       borderRadius: "6px",
       fontSize: "12px",
@@ -9293,7 +9293,7 @@ class Za {
           fontSize: "12px",
           lineHeight: "1.5",
           maxWidth: "250px",
-          zIndex: "100000",
+          zIndex: "99",
           border: "1px solid rgba(0, 180, 255, 0.3)",
           boxShadow: "0 8px 32px rgba(0,0,0,0.8)",
           pointerEvents: "none",