gralobe 1.0.13 → 1.0.15

package/dist/gralobe.js

@@ -5312,44 +5312,48 @@ class ho {
     e.textContent = `
       .country-label {
         font-family: system-ui, -apple-system, sans-serif;
-        font-weight: 400;
-        color: rgba(255, 255, 255, 0.65);
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.9);
         text-shadow:
-          0 0 2px rgba(0, 0, 0, 0.9),
-          0 0 4px rgba(0, 0, 0, 0.5);
+          0 1px 2px rgba(0, 0, 0, 1),
+          0 0 4px rgba(0, 0, 0, 0.9),
+          0 0 8px rgba(0, 0, 0, 0.7),
+          0 0 12px rgba(0, 0, 0, 0.5);
         white-space: nowrap;
         pointer-events: none;
         user-select: none;
         transform: translateX(-50%);
         transition: opacity 0.3s ease;
-        letter-spacing: 0.5px;
+        letter-spacing: 1px;
         text-transform: uppercase;
       }
 
       /* Size categories - proportional to country size */
       .country-label.size-large {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 2.5px;
+        color: rgba(255, 255, 255, 0.95);
+      }
+
+      .country-label.size-medium {
         font-size: 9px;
         font-weight: 500;
-        letter-spacing: 2px;
-        color: rgba(255, 255, 255, 0.7);
+        letter-spacing: 1.5px;
+        color: rgba(255, 255, 255, 0.9);
       }
 
-      .country-label.size-medium {
+      .country-label.size-small {
         font-size: 7px;
+        font-weight: 500;
         letter-spacing: 1px;
-        color: rgba(255, 255, 255, 0.6);
+        color: rgba(255, 255, 255, 0.8);
       }
 
-      .country-label.size-small {
+      .country-label.size-tiny {
         font-size: 6px;
         letter-spacing: 0.5px;
-        color: rgba(255, 255, 255, 0.5);
-      }
-
-      .country-label.size-tiny {
-        font-size: 5px;
-        letter-spacing: 0.3px;
-        color: rgba(255, 255, 255, 0.4);
+        color: rgba(255, 255, 255, 0.7);
       }
 
       .country-label.hidden {
@@ -5357,37 +5361,38 @@ class ho {
         visibility: hidden;
       }
 
-      /* Minimal style - slightly bolder for the 7 largest */
+      /* Minimal style - bold for the 7 largest */
       .label-style-minimal .country-label.size-large {
-        font-size: 10px;
-        font-weight: 600;
+        font-size: 12px;
+        font-weight: 700;
         letter-spacing: 3px;
-        color: rgba(255, 255, 255, 0.75);
+        color: #fff;
       }
 
       /* Major style - balanced visibility */
       .label-style-major .country-label.size-large {
-        font-size: 8px;
+        font-size: 10px;
+        font-weight: 600;
         letter-spacing: 2px;
       }
 
       .label-style-major .country-label.size-medium {
-        font-size: 6px;
+        font-size: 8px;
       }
 
-      /* All style - keep everything subtle */
+      /* All style - slightly more subtle but still readable */
       .label-style-all .country-label {
-        color: rgba(255, 255, 255, 0.5);
+        color: rgba(255, 255, 255, 0.85);
       }
 
       .label-style-all .country-label.size-large {
-        font-size: 8px;
-        color: rgba(255, 255, 255, 0.6);
+        font-size: 9px;
+        color: rgba(255, 255, 255, 0.9);
       }
 
       .label-style-all .country-label.size-tiny {
-        font-size: 4px;
-        color: rgba(255, 255, 255, 0.35);
+        font-size: 5px;
+        color: rgba(255, 255, 255, 0.6);
       }
     `, document.head.appendChild(e);
   }
@@ -6358,13 +6363,20 @@ class xo {
     this.stars = new S.Points(t, s), this.scene.add(this.stars);
   }
   createGUI() {
-    this.gui = new Vi({ title: "Globe Controls", width: 300 });
-    const e = this.gui.addFolder("View");
-    e.add({ toGlobe: () => this.toGlobe() }, "toGlobe").name("→ Globe"), e.add({ toFlat: () => this.toFlat() }, "toFlat").name("→ Flat Map"), e.add({ morph: this.morph }, "morph", 0, 1).name("Morph").onChange((r) => this.setMorph(r)), e.open();
-    const t = this.gui.addFolder("Statistics"), i = Object.keys(wi);
-    t.add({ stat: this.config.statistic }, "stat", i).name("Statistic").onChange((r) => this.setStatistic(r)), t.open();
-    const n = ["none", "minimal", "major", "all"];
-    this.gui.add({ labels: this.config.labels }, "labels", n).name("Labels").onChange((r) => this.setLabels(r)), this.gui.add(this.config, "autoRotate").name("Auto Rotate");
+    getComputedStyle(this.container).position === "static" && (this.container.style.position = "relative"), this.gui = new Vi({
+      container: this.container,
+      title: "⚙ Controls",
+      width: 220,
+      closeFolders: !0
+    });
+    const t = this.gui.domElement;
+    t.style.position = "absolute", t.style.top = "8px", t.style.right = "8px", t.style.zIndex = "100", this.gui.close();
+    const i = this.gui.addFolder("View");
+    i.add({ toGlobe: () => this.toGlobe() }, "toGlobe").name("→ Globe"), i.add({ toFlat: () => this.toFlat() }, "toFlat").name("→ Flat"), i.add({ morph: this.morph }, "morph", 0, 1).name("Morph").onChange((o) => this.setMorph(o));
+    const n = this.gui.addFolder("Statistics"), r = Object.keys(wi);
+    n.add({ stat: this.config.statistic }, "stat", r).name("Statistic").onChange((o) => this.setStatistic(o));
+    const s = ["none", "minimal", "major", "all"];
+    this.gui.addFolder("Display").add({ labels: this.config.labels }, "labels", s).name("Labels").onChange((o) => this.setLabels(o)), this.gui.add(this.config, "autoRotate").name("Auto Rotate");
   }
   handleResize = () => {
     if (this.isDestroyed) return;