@project-skymap/library 0.7.4 → 0.8.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import * as THREE5 from 'three';
+import * as THREE6 from 'three';
 import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -129,14 +129,14 @@ var init_constellations = __esm({
 });
 function lookAt(point, target, up) {
   const zAxis = target.clone().normalize();
-  let xAxis = new THREE5.Vector3().crossVectors(up, zAxis);
+  let xAxis = new THREE6.Vector3().crossVectors(up, zAxis);
   if (xAxis.lengthSq() < 1e-4) {
-    xAxis = new THREE5.Vector3().crossVectors(new THREE5.Vector3(1, 0, 0), zAxis);
+    xAxis = new THREE6.Vector3().crossVectors(new THREE6.Vector3(1, 0, 0), zAxis);
   }
   xAxis.normalize();
-  const yAxis = new THREE5.Vector3().crossVectors(zAxis, xAxis).normalize();
-  const m = new THREE5.Matrix4().makeBasis(xAxis, yAxis, zAxis);
-  const v = new THREE5.Vector3(point.x, point.y, point.z);
+  const yAxis = new THREE6.Vector3().crossVectors(zAxis, xAxis).normalize();
+  const m = new THREE6.Matrix4().makeBasis(xAxis, yAxis, zAxis);
+  const v = new THREE6.Vector3(point.x, point.y, point.z);
   v.applyMatrix4(m);
   v.add(target);
   return { x: v.x, y: v.y, z: v.z };
@@ -217,7 +217,7 @@ function computeLayoutPositions(model, layout) {
           const radiusAtY = Math.sqrt(1 - y * y);
           const x = Math.cos(midAngle) * radiusAtY;
           const z = Math.sin(midAngle) * radiusAtY;
-          const labelPos = new THREE5.Vector3(x, y, z).multiplyScalar(radius);
+          const labelPos = new THREE6.Vector3(x, y, z).multiplyScalar(radius);
           uDivision.meta.x = labelPos.x;
           uDivision.meta.y = labelPos.y;
           uDivision.meta.z = labelPos.z;
@@ -233,7 +233,7 @@ function computeLayoutPositions(model, layout) {
           const theta = startAngle + t * angleSpan;
           const x = Math.cos(theta) * radiusAtY;
           const z = Math.sin(theta) * radiusAtY;
-          const bookPos = new THREE5.Vector3(x, y, z).multiplyScalar(radius);
+          const bookPos = new THREE6.Vector3(x, y, z).multiplyScalar(radius);
           const labelPos = bookPos.clone();
           labelPos.y += radius * 0.025;
           labelPos.setLength(radius);
@@ -244,7 +244,7 @@ function computeLayoutPositions(model, layout) {
           if (chapters.length > 0) {
             const territoryRadius = radius * 2 / Math.sqrt(books.length * 2) * 0.7;
             const localPoints = getConstellationLayout(bookKey, chapters.length, territoryRadius);
-            const up = new THREE5.Vector3(0, 1, 0);
+            const up = new THREE6.Vector3(0, 1, 0);
             chapters.forEach((chap, idx) => {
               const uChap = updatedNodeMap.get(chap.id);
               const lp = localPoints[idx];
@@ -263,10 +263,10 @@ function computeLayoutPositions(model, layout) {
     testaments.forEach((t) => {
       const children = childrenMap.get(t.id) ?? [];
       if (children.length === 0) return;
-      const centroid = new THREE5.Vector3();
+      const centroid = new THREE6.Vector3();
       children.forEach((c) => {
         const u = updatedNodeMap.get(c.id);
-        centroid.add(new THREE5.Vector3(u.meta.x, u.meta.y, u.meta.z));
+        centroid.add(new THREE6.Vector3(u.meta.x, u.meta.y, u.meta.z));
       });
       centroid.divideScalar(children.length);
       if (centroid.length() > 0.1) {
@@ -387,7 +387,7 @@ float getMaskAlpha() {
 });
 function createSmartMaterial(params) {
   const uniforms = { ...globalUniforms, ...params.uniforms };
-  return new THREE5.ShaderMaterial({
+  return new THREE6.ShaderMaterial({
     uniforms,
     vertexShader: `
             ${BLEND_CHUNK} 
@@ -401,8 +401,8 @@ function createSmartMaterial(params) {
     transparent: params.transparent || false,
     depthWrite: params.depthWrite !== void 0 ? params.depthWrite : true,
     depthTest: params.depthTest !== void 0 ? params.depthTest : true,
-    side: params.side || THREE5.FrontSide,
-    blending: params.blending || THREE5.NormalBlending
+    side: params.side || THREE6.FrontSide,
+    blending: params.blending || THREE6.NormalBlending
   });
 }
 var globalUniforms;
@@ -420,16 +420,102 @@ var init_materials = __esm({
       uAtmGlow: { value: 1 },
       uAtmDark: { value: 0.6 },
       uAtmExtinction: { value: 4 },
-      uAtmTwinkle: { value: 0.8 },
-      uColorHorizon: { value: new THREE5.Color(3825292) },
-      uColorZenith: { value: new THREE5.Color(132104) }
+      uAtmTwinkle: { value: 0 },
+      uColorHorizon: { value: new THREE6.Color(3825292) },
+      uColorZenith: { value: new THREE6.Color(132104) }
     };
   }
 });
+
+// src/engine/fader.ts
+var Fader;
+var init_fader = __esm({
+  "src/engine/fader.ts"() {
+    Fader = class {
+      target = false;
+      value = 0;
+      duration;
+      constructor(duration = 0.3) {
+        this.duration = duration;
+      }
+      update(dt) {
+        const goal = this.target ? 1 : 0;
+        if (this.value === goal) return;
+        const speed = 1 / this.duration;
+        const step = speed * dt;
+        const diff = goal - this.value;
+        this.value += Math.sign(diff) * Math.min(step, Math.abs(diff));
+      }
+      /** Smoothstep-eased value for perceptually smooth transitions */
+      get eased() {
+        const v = this.value;
+        return v * v * (3 - 2 * v);
+      }
+    };
+  }
+});
+function buildSphereQuad(center, rightDir, upDir, halfWidth, halfHeight, domeRadius, subdivisions = 8) {
+  const vertsPerSide = subdivisions + 1;
+  const vertCount = vertsPerSide * vertsPerSide;
+  const positions = new Float32Array(vertCount * 3);
+  const uvs = new Float32Array(vertCount * 2);
+  const centerNorm = center.clone().normalize();
+  const temp = new THREE6.Vector3();
+  const tangent = new THREE6.Vector3();
+  const q = new THREE6.Quaternion();
+  const halfAngleX = Math.atan2(halfWidth, domeRadius);
+  const halfAngleY = Math.atan2(halfHeight, domeRadius);
+  for (let iy = 0; iy < vertsPerSide; iy++) {
+    for (let ix = 0; ix < vertsPerSide; ix++) {
+      const idx = iy * vertsPerSide + ix;
+      const u = ix / subdivisions;
+      const v = iy / subdivisions;
+      const angX = (u - 0.5) * 2 * halfAngleX;
+      const angY = (v - 0.5) * 2 * halfAngleY;
+      tangent.copy(rightDir).multiplyScalar(angX).addScaledVector(upDir, angY);
+      const angle = tangent.length();
+      if (angle > 1e-5) {
+        tangent.normalize();
+        q.setFromAxisAngle(tangent, angle);
+        temp.copy(centerNorm).applyQuaternion(q).multiplyScalar(domeRadius);
+      } else {
+        temp.copy(center);
+      }
+      positions[idx * 3 + 0] = temp.x;
+      positions[idx * 3 + 1] = temp.y;
+      positions[idx * 3 + 2] = temp.z;
+      uvs[idx * 2 + 0] = u;
+      uvs[idx * 2 + 1] = 1 - v;
+    }
+  }
+  const indexCount = subdivisions * subdivisions * 6;
+  const indices = new Uint16Array(indexCount);
+  let ii = 0;
+  for (let iy = 0; iy < subdivisions; iy++) {
+    for (let ix = 0; ix < subdivisions; ix++) {
+      const a = iy * vertsPerSide + ix;
+      const b = a + 1;
+      const c = a + vertsPerSide;
+      const d = c + 1;
+      indices[ii++] = a;
+      indices[ii++] = c;
+      indices[ii++] = b;
+      indices[ii++] = b;
+      indices[ii++] = c;
+      indices[ii++] = d;
+    }
+  }
+  const geometry = new THREE6.BufferGeometry();
+  geometry.setAttribute("position", new THREE6.BufferAttribute(positions, 3));
+  geometry.setAttribute("uv", new THREE6.BufferAttribute(uvs, 2));
+  geometry.setIndex(new THREE6.BufferAttribute(indices, 1));
+  return geometry;
+}
 var ConstellationArtworkLayer;
 var init_ConstellationArtworkLayer = __esm({
   "src/engine/ConstellationArtworkLayer.ts"() {
     init_materials();
+    init_fader();
     ConstellationArtworkLayer = class {
       root;
       items = [];
@@ -437,27 +523,22 @@ var init_ConstellationArtworkLayer = __esm({
       hoveredId = null;
       focusedId = null;
       constructor(root) {
-        this.textureLoader = new THREE5.TextureLoader();
+        this.textureLoader = new THREE6.TextureLoader();
         this.textureLoader.crossOrigin = "anonymous";
-        this.root = new THREE5.Group();
+        this.root = new THREE6.Group();
         this.root.renderOrder = -1;
         root.add(this.root);
       }
       getItems() {
         return this.items;
       }
-      setPosition(id, pos) {
-        const item = this.items.find((i) => i.config.id === id);
-        if (item) {
-          item.mesh.position.copy(pos);
-        }
-      }
-      load(config, getPosition) {
+      load(config, getPosition, getOrientationPosition) {
+        const getAnchorPos = getOrientationPosition ?? getPosition;
         this.clear();
         console.log(`[Constellation] Loading ${config.constellations.length} constellations from ${config.atlasBasePath}`);
         const basePath = config.atlasBasePath.replace(/\/$/, "");
         config.constellations.forEach((c) => {
-          let center = new THREE5.Vector3();
+          let center = new THREE6.Vector3();
           let valid = false;
           let radius = 2e3;
           const arrPos = getPosition(c.id);
@@ -475,7 +556,7 @@ var init_ConstellationArtworkLayer = __esm({
               }
             }
           } else if (c.center) {
-            center.set(c.center[0], c.center[1], c.center[2]);
+            center.set(c.center[0], c.center[1], 0);
             valid = true;
           } else if (c.anchors.length > 0) {
             const points = [];
@@ -495,100 +576,65 @@ var init_ConstellationArtworkLayer = __esm({
             }
           }
           if (!valid) return;
-          const normal = center.clone().normalize().negate();
-          const upVec = center.clone().normalize();
-          let right = new THREE5.Vector3(1, 0, 0);
+          const centerNorm = center.clone().normalize();
+          let rightDir = new THREE6.Vector3();
+          let upDir = new THREE6.Vector3();
           if (c.anchors.length >= 2) {
-            const p0 = getPosition(c.anchors[0]);
-            const p1 = getPosition(c.anchors[1]);
-            if (p0 && p1) {
-              const diff = new THREE5.Vector3().subVectors(p1, p0);
-              right.copy(diff).sub(upVec.clone().multiplyScalar(diff.dot(upVec))).normalize();
+            const p0 = getAnchorPos(c.anchors[0]);
+            const p1 = getAnchorPos(c.anchors[1]);
+            if (p0 && p1 && p0.distanceTo(p1) > 1e-3) {
+              const diff = new THREE6.Vector3().subVectors(p1, p0);
+              rightDir.copy(diff).sub(centerNorm.clone().multiplyScalar(diff.dot(centerNorm))).normalize();
+              upDir.crossVectors(centerNorm, rightDir).normalize();
+              rightDir.crossVectors(upDir, centerNorm).normalize();
+            } else {
+              this._defaultTangentFrame(centerNorm, rightDir, upDir);
             }
           } else {
-            if (Math.abs(upVec.y) > 0.9) right.set(1, 0, 0).cross(upVec).normalize();
-            else right.set(0, 1, 0).cross(upVec).normalize();
+            this._defaultTangentFrame(centerNorm, rightDir, upDir);
+          }
+          if (c.rotationDeg !== 0) {
+            const q = new THREE6.Quaternion().setFromAxisAngle(centerNorm, THREE6.MathUtils.degToRad(c.rotationDeg));
+            rightDir.applyQuaternion(q);
+            upDir.applyQuaternion(q);
           }
-          const top = new THREE5.Vector3().crossVectors(upVec, right).normalize();
-          right.crossVectors(top, upVec).normalize();
-          new THREE5.Matrix4().makeBasis(right, top, normal);
-          const geometry = new THREE5.PlaneGeometry(1, 1);
           let size = c.radius;
           if (size <= 1) size *= radius;
           size *= 2;
+          const sqrtAspect = Math.sqrt(c.aspectRatio ?? 1);
+          const halfWidth = size / 2 * sqrtAspect;
+          const halfHeight = size / 2 / sqrtAspect;
+          const geometry = buildSphereQuad(center, rightDir, upDir, halfWidth, halfHeight, radius, 8);
           const texPath = `${basePath}/${c.image}`;
-          let blending = THREE5.NormalBlending;
-          if (c.blend === "additive") blending = THREE5.AdditiveBlending;
+          const blending = c.blend === "additive" ? THREE6.AdditiveBlending : THREE6.NormalBlending;
           const material = createSmartMaterial({
             uniforms: {
               uMap: { value: this.textureLoader.load(texPath) },
-              // Placeholder, updated below
-              uOpacity: { value: c.opacity },
-              uSize: { value: size },
-              uImgRotation: { value: THREE5.MathUtils.degToRad(c.rotationDeg) },
-              uImgAspect: { value: c.aspectRatio ?? 1 }
-              // uScale, uAspect (screen) are injected by createSmartMaterial/globalUniforms
+              uOpacity: { value: c.opacity }
             },
             vertexShaderBody: `
-                    #ifdef GL_ES
-                    precision highp float;
-                    #endif
-
-                    uniform float uSize;
-                    uniform float uImgRotation;
-                    uniform float uImgAspect;
-
                     varying vec2 vUv;
-
+                    varying float vClipFade;
                     void main() {
                         vUv = uv;
-                        
-                        // 1. Project Center Point (Proven Method)
-                        vec4 mvCenter = modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);
-                        vec4 clipCenter = smartProject(mvCenter);
-                        
-                        // 2. Project "Up" Point (World Zenith)
-                        // Transform World Up (0,1,0) to View Space
-                        vec3 viewUpDir = mat3(viewMatrix) * vec3(0.0, 1.0, 0.0);
-                        // Offset center by a significant amount (1000.0) to ensure screen delta
-                        vec4 mvUp = mvCenter + vec4(viewUpDir * 1000.0, 0.0);
-                        vec4 clipUp = smartProject(mvUp);
-                        
-                        // 3. Calculate Horizon Angle
-                        vec2 screenCenter = clipCenter.xy / clipCenter.w;
-                        vec2 screenUp = clipUp.xy / clipUp.w;
-                        vec2 screenDelta = screenUp - screenCenter;
-                        
-                        float horizonAngle = 0.0;
-                        if (length(screenDelta) > 0.001) {
-                             vec2 screenDir = normalize(screenDelta);
-                             horizonAngle = atan(screenDir.y, screenDir.x) - 1.5708; // -90 deg
+                        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+
+                        // Compute clip-boundary fade BEFORE smartProject
+                        // (Stellarium culls entire constellations near the boundary;
+                        //  we fade per-vertex for smoother transitions)
+                        vec3 viewDir = normalize(mvPosition.xyz);
+                        float clipZ;
+                        if (uProjectionType == 0) {
+                            clipZ = -0.1;
+                        } else if (uProjectionType == 1) {
+                            clipZ = 0.1;
+                        } else {
+                            clipZ = mix(-0.1, 0.1, uBlend);
                         }
-                        
-                        // 4. Combine with User Rotation
-                        float finalAngle = uImgRotation + horizonAngle;
-                        
-                        // 5. Billboard Offset
-                        vec2 offset = position.xy;
-                        
-                        float cr = cos(finalAngle);
-                        float sr = sin(finalAngle);
-                        vec2 rotated = vec2(
-                            offset.x * cr - offset.y * sr,
-                            offset.x * sr + offset.y * cr
-                        );
-                        
-                        rotated.x *= uImgAspect;
-                        
-                        float dist = length(mvCenter.xyz);
-                        float scale = (uSize / dist) * uScale;
-                        
-                        rotated *= scale;
-                        rotated.x /= uAspect;
-                        
-                        gl_Position = clipCenter;
-                        gl_Position.xy += rotated * clipCenter.w;
-                        
+                        // Smooth fade over 0.3 radians before the clip threshold
+                        vClipFade = smoothstep(clipZ, clipZ - 0.3, viewDir.z);
+
+                        gl_Position = smartProject(mvPosition);
                         vScreenPos = gl_Position.xy / gl_Position.w;
                     }
                 `,
@@ -599,30 +645,50 @@ var init_ConstellationArtworkLayer = __esm({
                     uniform sampler2D uMap;
                     uniform float uOpacity;
                     varying vec2 vUv;
+                    varying float vClipFade;
                     void main() {
                         float mask = getMaskAlpha();
                         if (mask < 0.01) discard;
                         vec4 tex = texture2D(uMap, vUv);
-                        gl_FragColor = vec4(tex.rgb, tex.a * uOpacity * mask);
+
+                        // Apply a slight blue tinge to the artwork
+                        vec3 color = tex.rgb * vec3(0.8, 0.9, 1.0);
+
+                        // vClipFade smoothly hides vertices near the projection
+                        // clip boundary, preventing mesh distortion from escape positions
+                        gl_FragColor = vec4(color, tex.a * uOpacity * mask * vClipFade);
                     }
                 `,
             transparent: true,
             depthWrite: false,
             depthTest: true,
             blending,
-            side: THREE5.DoubleSide
+            side: THREE6.DoubleSide
           });
           material.uniforms.uMap.value = this.textureLoader.load(
             texPath,
             (tex) => {
-              tex.minFilter = THREE5.LinearFilter;
-              tex.magFilter = THREE5.LinearFilter;
+              tex.minFilter = THREE6.LinearFilter;
+              tex.magFilter = THREE6.LinearFilter;
               tex.generateMipmaps = false;
               tex.needsUpdate = true;
               if (c.aspectRatio === void 0 && tex.image.width && tex.image.height) {
                 const natAspect = tex.image.width / tex.image.height;
-                material.uniforms.uImgAspect.value = natAspect;
+                const sqrtNatAspect = Math.sqrt(natAspect);
+                const newHalfWidth = size / 2 * sqrtNatAspect;
+                const newHalfHeight = size / 2 / sqrtNatAspect;
+                const newGeometry = buildSphereQuad(center, rightDir, upDir, newHalfWidth, newHalfHeight, radius, 8);
+                const item2 = this.items.find((i) => i.config.id === c.id);
+                if (item2) {
+                  item2.mesh.geometry.dispose();
+                  item2.mesh.geometry = newGeometry;
+                  item2.halfWidth = newHalfWidth;
+                  item2.halfHeight = newHalfHeight;
+                  item2.imageLoadedFader.target = true;
+                }
               }
+              const item = this.items.find((i) => i.config.id === c.id);
+              if (item) item.imageLoadedFader.target = true;
               console.log(`[Constellation] Loaded: ${c.id} (${tex.image.width}x${tex.image.height})`);
             },
             (progress) => {
@@ -635,23 +701,55 @@ var init_ConstellationArtworkLayer = __esm({
             material.polygonOffset = true;
             material.polygonOffsetFactor = -c.zBias;
           }
-          const mesh = new THREE5.Mesh(geometry, material);
+          const mesh = new THREE6.Mesh(geometry, material);
           mesh.frustumCulled = false;
           mesh.userData = { id: c.id, type: "constellation" };
-          mesh.position.copy(center);
           this.root.add(mesh);
-          this.items.push({ config: c, mesh, material, baseOpacity: c.opacity });
+          this.items.push({
+            config: c,
+            mesh,
+            material,
+            baseOpacity: c.opacity,
+            center: center.clone(),
+            rightDir: rightDir.clone(),
+            upDir: upDir.clone(),
+            halfWidth,
+            halfHeight,
+            domeRadius: radius,
+            visibleFader: new Fader(0.35),
+            imageLoadedFader: new Fader(0.5)
+          });
         });
       }
+      _defaultTangentFrame(centerNorm, rightDir, upDir) {
+        const worldUp = new THREE6.Vector3(0, 1, 0);
+        if (Math.abs(centerNorm.dot(worldUp)) > 0.99) {
+          rightDir.crossVectors(new THREE6.Vector3(1, 0, 0), centerNorm).normalize();
+        } else {
+          rightDir.crossVectors(worldUp, centerNorm).normalize();
+        }
+        upDir.crossVectors(centerNorm, rightDir).normalize();
+        rightDir.crossVectors(upDir, centerNorm).normalize();
+      }
       _globalOpacity = 1;
       setGlobalOpacity(v) {
         this._globalOpacity = v;
       }
-      update(fov, showArt) {
+      /**
+       * Update visibility and opacity.
+       * Accepts an optional camera for Stellarium-style visibility culling:
+       * constellations whose center is near or past the projection clip
+       * boundary are hidden to prevent mesh distortion from escape positions.
+       */
+      update(fov, showArt, camera, dt = 0.016) {
         this.root.visible = showArt;
         if (!showArt) {
           return;
         }
+        let cameraForward = null;
+        if (camera) {
+          cameraForward = new THREE6.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+        }
         for (const item of this.items) {
           const { fade } = item.config;
           let opacity = fade.maxOpacity;
@@ -661,10 +759,30 @@ var init_ConstellationArtworkLayer = __esm({
             opacity = fade.minOpacity;
           } else {
             const t = (fade.zoomInStart - fov) / (fade.zoomInStart - fade.zoomInEnd);
-            opacity = THREE5.MathUtils.lerp(fade.maxOpacity, fade.minOpacity, t);
+            opacity = THREE6.MathUtils.lerp(fade.maxOpacity, fade.minOpacity, t);
+          }
+          const halfAngleX = Math.atan2(item.halfWidth, item.domeRadius);
+          const halfAngleY = Math.atan2(item.halfHeight, item.domeRadius);
+          const diameterDeg = Math.max(halfAngleX, halfAngleY) * 2 * THREE6.MathUtils.RAD2DEG;
+          const zoomFade = THREE6.MathUtils.smoothstep(fov, diameterDeg / 5, diameterDeg / 2);
+          opacity *= zoomFade;
+          opacity = Math.min(Math.max(opacity, 0), 1) * this._globalOpacity * item.baseOpacity;
+          if (cameraForward) {
+            const centerDir = item.center.clone().normalize();
+            const dot = cameraForward.dot(centerDir);
+            const angle = Math.acos(THREE6.MathUtils.clamp(dot, -1, 1));
+            const angularRadius = Math.max(halfAngleX, halfAngleY);
+            const margin = THREE6.MathUtils.degToRad(8);
+            item.visibleFader.target = angle <= Math.PI * 0.5 + angularRadius + margin;
+          } else {
+            item.visibleFader.target = true;
           }
-          opacity = Math.min(Math.max(opacity, 0), 1) * this._globalOpacity;
+          item.visibleFader.update(dt);
+          opacity *= item.visibleFader.eased;
+          item.imageLoadedFader.update(dt);
+          opacity *= item.imageLoadedFader.eased;
           item.material.uniforms.uOpacity.value = opacity;
+          item.mesh.visible = opacity > 1e-3;
         }
       }
       setHovered(id) {
@@ -761,6 +879,7 @@ var init_projections = __esm({
       blendEnd;
       /** Current blend factor, updated via setFov() */
       blend = 0;
+      blendOverride = null;
       constructor(blendStart = 40, blendEnd = 100) {
         this.blendStart = blendStart;
         this.blendEnd = blendEnd;
@@ -779,14 +898,22 @@ var init_projections = __esm({
         this.blend = t * t * (3 - 2 * t);
       }
       getBlend() {
-        return this.blend;
+        return this.blendOverride ?? this.blend;
+      }
+      setBlendOverride(value) {
+        if (value === null || value === void 0 || Number.isNaN(value)) {
+          this.blendOverride = null;
+          return;
+        }
+        this.blendOverride = Math.max(0, Math.min(1, value));
       }
       forward(dir) {
-        if (this.blend > 0.5 && dir.z > 0.4) return null;
-        if (this.blend < 0.1 && dir.z > -0.1) return null;
+        const b = this.getBlend();
+        if (b > 0.5 && dir.z > 0.4) return null;
+        if (b < 0.1 && dir.z > -0.1) return null;
         const kLinear = 1 / Math.max(0.01, -dir.z);
         const kStereo = 2 / (1 - dir.z);
-        const k = kLinear * (1 - this.blend) + kStereo * this.blend;
+        const k = kLinear * (1 - b) + kStereo * b;
         return { x: k * dir.x, y: k * dir.y, z: dir.z };
       }
       inverse(uvX, uvY, fovRad) {
@@ -795,7 +922,8 @@ var init_projections = __esm({
         const thetaLin = Math.atan(r * halfHeightLin);
         const halfHeightStereo = 2 * Math.tan(fovRad / 4);
         const thetaStereo = 2 * Math.atan(r * halfHeightStereo / 2);
-        const theta = thetaLin * (1 - this.blend) + thetaStereo * this.blend;
+        const b = this.getBlend();
+        const theta = thetaLin * (1 - b) + thetaStereo * b;
         const phi = Math.atan2(uvY, uvX);
         const sinT = Math.sin(theta);
         return {
@@ -807,11 +935,13 @@ var init_projections = __esm({
       getScale(fovRad) {
         const scaleLinear = 1 / Math.tan(fovRad / 2);
         const scaleStereo = 1 / (2 * Math.tan(fovRad / 4));
-        return scaleLinear * (1 - this.blend) + scaleStereo * this.blend;
+        const b = this.getBlend();
+        return scaleLinear * (1 - b) + scaleStereo * b;
       }
       isClipped(dirZ) {
-        if (this.blend > 0.5) return dirZ > 0.4;
-        if (this.blend < 0.1) return dirZ > -0.1;
+        const b = this.getBlend();
+        if (b > 0.5) return dirZ > 0.4;
+        if (b < 0.1) return dirZ > -0.1;
         return false;
       }
     };
@@ -821,30 +951,366 @@ var init_projections = __esm({
     };
   }
 });
-
-// src/engine/fader.ts
-var Fader;
-var init_fader = __esm({
-  "src/engine/fader.ts"() {
-    Fader = class {
-      target = false;
-      value = 0;
-      duration;
-      constructor(duration = 0.3) {
-        this.duration = duration;
+function levelToClass(level) {
+  if (level === 1) return "division";
+  if (level === 2) return "book";
+  if (level === 2.5) return "group";
+  return "chapter";
+}
+function isClassEnabled(classKey, toggles) {
+  if (classKey === "division") return toggles.showDivisionLabels;
+  if (classKey === "book") return toggles.showBookLabels;
+  if (classKey === "group") return toggles.showGroupLabels;
+  return toggles.showChapterLabels;
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function resolveLabelBehavior(config) {
+  const classes = { ...DEFAULT_LABEL_BEHAVIOR.classes };
+  const mergeClass = (key, source) => {
+    const base = DEFAULT_LABEL_BEHAVIOR.classes[key];
+    return {
+      minFov: source?.minFov ?? base.minFov,
+      maxFov: source?.maxFov ?? base.maxFov,
+      priority: source?.priority ?? base.priority,
+      mode: source?.mode ?? base.mode,
+      maxOverlapPx: source?.maxOverlapPx ?? base.maxOverlapPx,
+      radialFadeStart: source?.radialFadeStart ?? base.radialFadeStart,
+      radialFadeEnd: source?.radialFadeEnd ?? base.radialFadeEnd,
+      fadeDuration: source?.fadeDuration ?? base.fadeDuration
+    };
+  };
+  classes.division = mergeClass("division", config?.classes?.division);
+  classes.book = mergeClass("book", config?.classes?.book);
+  classes.group = mergeClass("group", config?.classes?.group);
+  classes.chapter = mergeClass("chapter", config?.classes?.chapter);
+  return {
+    hideBackFacing: config?.hideBackFacing ?? DEFAULT_LABEL_BEHAVIOR.hideBackFacing,
+    overlapPaddingPx: config?.overlapPaddingPx ?? DEFAULT_LABEL_BEHAVIOR.overlapPaddingPx,
+    reappearDelayMs: config?.reappearDelayMs ?? DEFAULT_LABEL_BEHAVIOR.reappearDelayMs,
+    classes
+  };
+}
+function boundsOverlapDepth(a, b) {
+  const ix0 = Math.max(a.x, b.x);
+  const iy0 = Math.max(a.y, b.y);
+  const ix1 = Math.min(a.x + a.w, b.x + b.w);
+  const iy1 = Math.min(a.y + a.h, b.y + b.h);
+  if (ix1 <= ix0 || iy1 <= iy0) return 0;
+  return Math.min(ix1 - ix0, iy1 - iy0);
+}
+function boundsDistPoint(rect, px, py) {
+  const cx = rect.x + rect.w * 0.5;
+  const cy = rect.y + rect.h * 0.5;
+  const dx = Math.max(Math.abs(px - cx) - rect.w * 0.5, 0);
+  const dy = Math.max(Math.abs(py - cy) - rect.h * 0.5, 0);
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function getLabelUniforms(obj) {
+  const material = obj.material;
+  if (!(material instanceof THREE6.ShaderMaterial) || !material.uniforms) return null;
+  const uniforms = material.uniforms;
+  const uSize = uniforms.uSize;
+  const uAlpha = uniforms.uAlpha;
+  const uAngle = uniforms.uAngle;
+  if (!uSize || !(uSize.value instanceof THREE6.Vector2) || !uAlpha || typeof uAlpha.value !== "number") {
+    return null;
+  }
+  return {
+    uSize: { value: uSize.value },
+    uAlpha: { value: uAlpha.value },
+    uAngle: uAngle && typeof uAngle.value === "number" ? { value: uAngle.value } : void 0
+  };
+}
+function applyUniformAlpha(obj, alpha, angle) {
+  const material = obj.material;
+  if (!(material instanceof THREE6.ShaderMaterial) || !material.uniforms) return;
+  const uniforms = material.uniforms;
+  if (uniforms.uAlpha && typeof uniforms.uAlpha.value === "number") {
+    uniforms.uAlpha.value = alpha;
+  }
+}
+var DEFAULT_LABEL_BEHAVIOR, LabelManager;
+var init_LabelManager = __esm({
+  "src/engine/LabelManager.ts"() {
+    init_fader();
+    DEFAULT_LABEL_BEHAVIOR = {
+      hideBackFacing: true,
+      overlapPaddingPx: 2,
+      reappearDelayMs: 60,
+      classes: {
+        division: {
+          minFov: 55,
+          maxFov: 180,
+          priority: 70,
+          mode: "floating",
+          maxOverlapPx: 10,
+          radialFadeStart: 1,
+          radialFadeEnd: 1.2,
+          fadeDuration: 0.28
+        },
+        book: {
+          minFov: 0,
+          maxFov: 22,
+          priority: 60,
+          mode: "pinned",
+          maxOverlapPx: 999,
+          radialFadeStart: 1,
+          radialFadeEnd: 1.2,
+          fadeDuration: 0.22
+        },
+        group: {
+          minFov: 0,
+          maxFov: 22,
+          priority: 42,
+          mode: "pinned",
+          maxOverlapPx: 999,
+          radialFadeStart: 1,
+          radialFadeEnd: 1.2,
+          fadeDuration: 0.22
+        },
+        chapter: {
+          minFov: 0,
+          maxFov: 22,
+          priority: 30,
+          mode: "pinned",
+          maxOverlapPx: 999,
+          radialFadeStart: 0.55,
+          radialFadeEnd: 0.95,
+          fadeDuration: 0.16
+        }
       }
-      update(dt) {
-        const goal = this.target ? 1 : 0;
-        if (this.value === goal) return;
-        const speed = 1 / this.duration;
-        const step = speed * dt;
-        const diff = goal - this.value;
-        this.value += Math.sign(diff) * Math.min(step, Math.abs(diff));
+    };
+    LabelManager = class {
+      records = /* @__PURE__ */ new Map();
+      setLabels(labels) {
+        const activeIds = /* @__PURE__ */ new Set();
+        for (const label of labels) {
+          activeIds.add(label.node.id);
+          const existing = this.records.get(label.node.id);
+          if (existing) {
+            existing.label = label;
+            existing.classKey = levelToClass(label.node.level);
+            continue;
+          }
+          this.records.set(label.node.id, {
+            id: label.node.id,
+            label,
+            fader: new Fader(0.2),
+            classKey: levelToClass(label.node.level),
+            lastRejectedAtMs: 0,
+            lastAccepted: false,
+            targetAlpha: 0
+          });
+        }
+        for (const [id] of this.records) {
+          if (!activeIds.has(id)) {
+            this.records.delete(id);
+          }
+        }
       }
-      /** Smoothstep-eased value for perceptually smooth transitions */
-      get eased() {
-        const v = this.value;
-        return v * v * (3 - 2 * v);
+      clear() {
+        this.records.clear();
+      }
+      update(ctx) {
+        const behavior = resolveLabelBehavior(ctx.config);
+        const candidates = [];
+        const cameraForward = new THREE6.Vector3(0, 0, -1).applyQuaternion(ctx.camera.quaternion);
+        for (const record of this.records.values()) {
+          const classBehavior = behavior.classes[record.classKey];
+          record.fader.duration = classBehavior.fadeDuration;
+          const isEnabled = isClassEnabled(record.classKey, ctx.toggles);
+          const isSpecial = record.id === ctx.selectedId || record.id === ctx.hoverId || record.id === ctx.focusedId;
+          let targetAlpha = 0;
+          let angleTarget;
+          if (isEnabled) {
+            const maxFov = classBehavior.maxFov + (record.label.maxFovBias ?? 0);
+            const inFovRange = ctx.fov >= classBehavior.minFov && ctx.fov <= maxFov;
+            if (inFovRange || isSpecial) {
+              const pWorld = record.label.obj.position;
+              const pProj = ctx.project(pWorld);
+              const frontVisible = pProj.z <= 0.2;
+              let backFacing = false;
+              if (behavior.hideBackFacing) {
+                const worldDir = pWorld.clone().normalize();
+                backFacing = worldDir.dot(cameraForward) < -0.2;
+              }
+              if (frontVisible && !backFacing) {
+                const ndcX = pProj.x * ctx.globalScale / ctx.aspect;
+                const ndcY = pProj.y * ctx.globalScale;
+                const sX = (ndcX * 0.5 + 0.5) * ctx.screenW;
+                const sY = (-ndcY * 0.5 + 0.5) * ctx.screenH;
+                const uniforms = getLabelUniforms(record.label.obj);
+                if (uniforms) {
+                  const pixelH = uniforms.uSize.value.y * ctx.screenH * 0.8;
+                  const pixelW = uniforms.uSize.value.x * ctx.screenH * 0.8;
+                  targetAlpha = 1;
+                  if (targetAlpha > 0 && record.classKey === "chapter" && !isSpecial) {
+                    const dist = Math.sqrt(ndcX * ndcX + ndcY * ndcY);
+                    const fovWeight = THREE6.MathUtils.smoothstep(ctx.fov, 10, 40);
+                    const focusOuter = THREE6.MathUtils.lerp(0.82, 0.62, fovWeight);
+                    const focusInner = THREE6.MathUtils.lerp(0.24, 0.16, fovWeight);
+                    const centerFocus = 1 - THREE6.MathUtils.smoothstep(dist, focusInner, focusOuter);
+                    const chapterVisibility = THREE6.MathUtils.lerp(1, centerFocus, fovWeight);
+                    targetAlpha *= chapterVisibility;
+                    if (dist > focusOuter && ctx.fov > 12) {
+                      targetAlpha = 0;
+                    }
+                    if (dist < 0.18 && ctx.fov < 58) {
+                      targetAlpha = Math.max(targetAlpha, 0.55);
+                    }
+                  }
+                  if (targetAlpha > 0 && (record.classKey === "book" || record.classKey === "group") && !isSpecial) {
+                    const dist = Math.sqrt(ndcX * ndcX + ndcY * ndcY);
+                    const fovWeight = THREE6.MathUtils.smoothstep(ctx.fov, 15, 58);
+                    const focusOuter = THREE6.MathUtils.lerp(0.95, 0.7, fovWeight);
+                    const focusInner = THREE6.MathUtils.lerp(0.35, 0.22, fovWeight);
+                    const centerFocus = 1 - THREE6.MathUtils.smoothstep(dist, focusInner, focusOuter);
+                    const bookVisibility = THREE6.MathUtils.lerp(1, centerFocus, fovWeight);
+                    targetAlpha *= bookVisibility;
+                    if (dist > focusOuter && ctx.fov > 20) {
+                      targetAlpha = 0;
+                    }
+                  }
+                  if (targetAlpha > 0 && ctx.shouldFilter) {
+                    const node = record.label.node;
+                    if (node.level === 3) {
+                      targetAlpha = 0;
+                    } else if (node.level === 2 || node.level === 2.5) {
+                      if (ctx.isNodeFiltered(node)) targetAlpha = 0;
+                    }
+                  }
+                  if (targetAlpha > 0 && record.classKey === "chapter" && record.label.chapterStarWorldPos) {
+                    const starProj = ctx.project(record.label.chapterStarWorldPos);
+                    if (starProj.z <= 0.2) {
+                      const starNdcX = starProj.x * ctx.globalScale / ctx.aspect;
+                      const starNdcY = starProj.y * ctx.globalScale;
+                      const starSX = (starNdcX * 0.5 + 0.5) * ctx.screenW;
+                      const starSY = (-starNdcY * 0.5 + 0.5) * ctx.screenH;
+                      const rect = {
+                        x: sX - pixelW / 2,
+                        y: sY - pixelH / 2,
+                        w: pixelW,
+                        h: pixelH,
+                        priority: classBehavior.priority
+                      };
+                      const glowRadiusPx = record.label.chapterGlowRadiusPx ?? 18;
+                      const clearancePx = Math.max(1, glowRadiusPx * 0.02);
+                      const distToLabel = boundsDistPoint(rect, starSX, starSY);
+                      if (glowRadiusPx >= 70) {
+                        const threshold = glowRadiusPx + clearancePx;
+                        const visibility = THREE6.MathUtils.smoothstep(distToLabel, threshold - 4, threshold + 2);
+                        const lowFovRelief = 1 - THREE6.MathUtils.smoothstep(ctx.fov, 8, 18);
+                        const boostedVisibility = isSpecial ? Math.max(visibility, 0.92) : Math.max(visibility, lowFovRelief * 0.85);
+                        targetAlpha *= boostedVisibility;
+                      }
+                    }
+                  }
+                  if (record.classKey === "division" && uniforms.uAngle) {
+                    angleTarget = 0;
+                    if (ctx.projectionId !== "perspective") {
+                      const dx = sX - ctx.screenW / 2;
+                      const dy = sY - ctx.screenH / 2;
+                      angleTarget = Math.atan2(-dy, -dx) - Math.PI / 2;
+                    }
+                  }
+                  if (targetAlpha > 0) {
+                    const priorityBoost = isSpecial ? record.id === ctx.selectedId ? 400 : 300 : 0;
+                    candidates.push({
+                      record,
+                      behavior: classBehavior,
+                      uniforms,
+                      sX,
+                      sY,
+                      w: pixelW,
+                      h: pixelH,
+                      ndcX,
+                      ndcY,
+                      priority: classBehavior.priority + priorityBoost,
+                      isPinned: isSpecial || classBehavior.mode === "pinned",
+                      isSpecial,
+                      centerDist: Math.sqrt((sX - ctx.screenW * 0.5) ** 2 + (sY - ctx.screenH * 0.5) ** 2)
+                    });
+                  }
+                }
+              }
+            }
+          }
+          if (typeof angleTarget === "number") {
+            const material = record.label.obj.material;
+            if (material instanceof THREE6.ShaderMaterial && material.uniforms.uAngle && typeof material.uniforms.uAngle.value === "number") {
+              const current = material.uniforms.uAngle.value;
+              material.uniforms.uAngle.value = lerp(current, angleTarget, 0.1);
+            }
+          }
+          record.targetAlpha = targetAlpha;
+        }
+        candidates.sort((a, b) => {
+          if (a.priority !== b.priority) return b.priority - a.priority;
+          if (a.record.lastAccepted !== b.record.lastAccepted) return a.record.lastAccepted ? -1 : 1;
+          return a.centerDist - b.centerDist;
+        });
+        let guaranteedCenterChapterId = null;
+        if (ctx.toggles.showChapterLabels && ctx.fov <= behavior.classes.chapter.maxFov + 15) {
+          const centerChapter = candidates.filter((c) => c.record.classKey === "chapter" && c.record.targetAlpha > 0).sort((a, b) => a.centerDist - b.centerDist)[0];
+          if (centerChapter) {
+            guaranteedCenterChapterId = centerChapter.record.id;
+            centerChapter.record.targetAlpha = Math.max(centerChapter.record.targetAlpha, 0.85);
+          }
+        }
+        const occupied = [];
+        const accepted = /* @__PURE__ */ new Set();
+        for (const c of candidates) {
+          if (c.record.targetAlpha <= 0) continue;
+          const rect = {
+            x: c.sX - c.w / 2 - behavior.overlapPaddingPx,
+            y: c.sY - c.h / 2 - behavior.overlapPaddingPx,
+            w: c.w + behavior.overlapPaddingPx * 2,
+            h: c.h + behavior.overlapPaddingPx * 2,
+            priority: c.priority
+          };
+          let rejected = false;
+          const isGuaranteedCenterChapter = c.record.id === guaranteedCenterChapterId;
+          if (!c.isPinned && !isGuaranteedCenterChapter) {
+            if (!c.record.lastAccepted && !c.isSpecial && c.record.lastRejectedAtMs > 0) {
+              const sinceReject = ctx.nowMs - c.record.lastRejectedAtMs;
+              if (sinceReject < behavior.reappearDelayMs) {
+                rejected = true;
+              }
+            }
+            if (!rejected) {
+              for (const other of occupied) {
+                if (other.priority < c.priority) continue;
+                const overlapDepth = boundsOverlapDepth(rect, other);
+                if (overlapDepth > c.behavior.maxOverlapPx) {
+                  rejected = true;
+                  break;
+                }
+              }
+            }
+          }
+          if (rejected) {
+            c.record.lastAccepted = false;
+            c.record.lastRejectedAtMs = ctx.nowMs;
+            continue;
+          }
+          occupied.push(rect);
+          accepted.add(c.record.id);
+          c.record.lastAccepted = true;
+        }
+        for (const record of this.records.values()) {
+          const acceptedThisFrame = accepted.has(record.id) && record.targetAlpha > 0;
+          record.fader.target = acceptedThisFrame;
+          record.fader.update(ctx.dt);
+          const baseAlpha = acceptedThisFrame ? record.targetAlpha : record.targetAlpha > 0 ? 1 : 0;
+          const alpha = record.fader.eased * baseAlpha;
+          applyUniformAlpha(record.label.obj, alpha);
+          record.label.obj.visible = alpha > 0.01;
+          if (!acceptedThisFrame) {
+            record.lastAccepted = false;
+          }
+        }
       }
     };
   }
@@ -871,6 +1337,7 @@ function createEngine({
 }) {
   let hoveredBookId = null;
   let focusedBookId = null;
+  let focusedNodeId = null;
   let orderRevealEnabled = true;
   let activeBookIndex = -1;
   let orderRevealStrength = 0;
@@ -889,26 +1356,15 @@ function createEngine({
   const bookIdToIndex = /* @__PURE__ */ new Map();
   const testamentToIndex = /* @__PURE__ */ new Map();
   const divisionToIndex = /* @__PURE__ */ new Map();
-  const renderer = new THREE5.WebGLRenderer({ antialias: true, alpha: false });
+  const renderer = new THREE6.WebGLRenderer({ antialias: true, alpha: false });
   renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
   renderer.setSize(container.clientWidth, container.clientHeight);
   container.appendChild(renderer.domElement);
-  const scene = new THREE5.Scene();
-  scene.background = new THREE5.Color(0);
-  const camera = new THREE5.PerspectiveCamera(60, 1, 0.1, 1e4);
+  const scene = new THREE6.Scene();
+  scene.background = null;
+  const camera = new THREE6.PerspectiveCamera(60, 1, 0.1, 1e4);
   camera.position.set(0, 0, 0);
   camera.up.set(0, 1, 0);
-  function setHoveredBook(id) {
-    if (id === hoveredBookId) return;
-    const now = performance.now();
-    if (hoveredBookId) {
-      hoverCooldowns.set(hoveredBookId, now);
-    }
-    if (id) {
-      hoverCooldowns.get(id) || 0;
-    }
-    hoveredBookId = id;
-  }
   let running = false;
   let raf = 0;
   const state = {
@@ -946,12 +1402,15 @@ function createEngine({
     longPressTimer: null,
     longPressTriggered: false
   };
-  const mouseNDC = new THREE5.Vector2();
+  const mouseNDC = new THREE6.Vector2();
   let isMouseInWindow = false;
   let isTouchDevice = false;
   let edgeHoverStart = 0;
   let handlers = { onSelect, onHover, onArrangementChange, onFovChange, onLongPress };
   let currentConfig;
+  function getSceneDebug() {
+    return currentConfig?.debug?.sceneMechanics;
+  }
   const constellationLayer = new ConstellationArtworkLayer(scene);
   function mix(a, b, t) {
     return a * (1 - t) + b * t;
@@ -960,6 +1419,7 @@ function createEngine({
   function syncProjectionState() {
     if (currentProjection instanceof BlendedProjection) {
       currentProjection.setFov(state.fov);
+      currentProjection.setBlendOverride(getSceneDebug()?.projectionBlendOverride ?? null);
       globalUniforms.uBlend.value = currentProjection.getBlend();
     }
     globalUniforms.uProjectionType.value = currentProjection.glslProjectionType;
@@ -970,10 +1430,10 @@ function createEngine({
     let scale = currentProjection.getScale(fovRad);
     const aspect = camera.aspect;
     if (currentConfig?.fitProjection) {
-      if (aspect > 1) {
+      if (aspect >= 1) {
         scale /= aspect;
       } else {
-        scale *= aspect;
+        scale *= aspect * aspect;
       }
     }
     globalUniforms.uScale.value = scale;
@@ -987,7 +1447,7 @@ function createEngine({
     const uvX = mouseNDC.x * aspectRatio;
     const uvY = mouseNDC.y;
     const v = currentProjection.inverse(uvX, uvY, fovRad);
-    return new THREE5.Vector3(v.x, v.y, v.z).normalize();
+    return new THREE6.Vector3(v.x, v.y, v.z).normalize();
   }
   function getMouseWorldVector(pixelX, pixelY, width, height) {
     const aspect = width / height;
@@ -996,7 +1456,7 @@ function createEngine({
     syncProjectionState();
     const fovRad = state.fov * Math.PI / 180;
     const v = currentProjection.inverse(ndcX * aspect, ndcY, fovRad);
-    const vView = new THREE5.Vector3(v.x, v.y, v.z).normalize();
+    const vView = new THREE6.Vector3(v.x, v.y, v.z).normalize();
     return vView.applyQuaternion(camera.quaternion);
   }
   function smartProjectJS(worldPos) {
@@ -1006,80 +1466,438 @@ function createEngine({
     if (!result) return { x: 0, y: 0, z: dir.z };
     return result;
   }
-  const groundGroup = new THREE5.Group();
+  const groundGroup = new THREE6.Group();
   scene.add(groundGroup);
+  const MAX_HORIZON_POINTS = 64;
+  let groundMaterial = null;
+  let horizonLine = null;
+  let activeHorizonProfile = {
+    mode: 0,
+    pointCount: 0,
+    azDeg: [],
+    altDeg: [],
+    rotateRad: 0,
+    baseAltDeg: 3
+  };
+  let lastHorizonDiagTs = 0;
+  function toColor(input, fallbackHex) {
+    if (!input) return new THREE6.Color(fallbackHex);
+    try {
+      return new THREE6.Color(input);
+    } catch {
+      return new THREE6.Color(fallbackHex);
+    }
+  }
+  function applyGroundTheme(cfg) {
+    if (!groundMaterial) return;
+    const theme = getSceneDebug()?.disableHorizonTheme ? void 0 : cfg?.horizonTheme;
+    const uniforms = groundMaterial.uniforms;
+    const atmo = theme?.atmosphere;
+    const mode = theme?.source === "polygonal" && (theme.profile?.points?.length ?? 0) >= 2 ? 1 : 0;
+    const groundColor = toColor(theme?.groundColor, 65794);
+    const fogColor = toColor(theme?.horizonLineColor, 663098);
+    const fogIntensity = THREE6.MathUtils.clamp(atmo?.fogIntensity ?? 0.6, 0, 1.5);
+    const fogVisible = atmo?.fogVisible === false ? 0 : 1;
+    const minBrightness = THREE6.MathUtils.clamp(atmo?.minimalBrightness ?? 0, 0, 1);
+    const rotateRad = (theme?.profile?.angleRotateZDeg ?? 0) * Math.PI / 180;
+    const azSamples = new Array(MAX_HORIZON_POINTS).fill(0);
+    const altSamples = new Array(MAX_HORIZON_POINTS).fill(0);
+    let pointCount = 0;
+    let sortedPoints = [];
+    if (mode === 1 && theme?.profile?.points) {
+      sortedPoints = [...theme.profile.points].map((p) => ({
+        azDeg: (p.azDeg % 360 + 360) % 360,
+        altDeg: THREE6.MathUtils.clamp(p.altDeg, -30, 35)
+      })).sort((a, b) => a.azDeg - b.azDeg);
+      pointCount = Math.min(sortedPoints.length, MAX_HORIZON_POINTS);
+      for (let i = 0; i < pointCount; i++) {
+        azSamples[i] = sortedPoints[i].azDeg;
+        altSamples[i] = sortedPoints[i].altDeg;
+      }
+    }
+    const baseAltDeg = pointCount > 0 ? altSamples.slice(0, pointCount).reduce((sum, v) => sum + v, 0) / pointCount : 3;
+    activeHorizonProfile = {
+      mode,
+      pointCount,
+      azDeg: azSamples.slice(0, pointCount),
+      altDeg: altSamples.slice(0, pointCount),
+      rotateRad,
+      baseAltDeg
+    };
+    uniforms.color.value = groundColor;
+    uniforms.fogColor.value = fogColor;
+    uniforms.uFogIntensity.value = fogIntensity;
+    uniforms.uFogVisible.value = fogVisible;
+    uniforms.uMinBrightness.value = minBrightness;
+    uniforms.uHorizonMode.value = mode;
+    uniforms.uHorizonPointCount.value = pointCount;
+    uniforms.uHorizonAzDeg.value = azSamples;
+    uniforms.uHorizonAltDeg.value = altSamples;
+    uniforms.uHorizonRotateRad.value = rotateRad;
+    uniforms.uBaseAltDeg.value = baseAltDeg;
+    groundMaterial.uniformsNeedUpdate = true;
+    if (atmosphereMesh && atmosphereMesh.material instanceof THREE6.ShaderMaterial) {
+      const atmUniforms = atmosphereMesh.material.uniforms;
+      const topAltDeg = atmo?.fogBandTopAltDeg ?? 90;
+      const bottomAltDeg = atmo?.fogBandBottomAltDeg ?? -90;
+      atmUniforms.uThemeFogVisible.value = fogVisible;
+      atmUniforms.uThemeFogIntensity.value = fogIntensity;
+      atmUniforms.uThemeFogTopSin.value = Math.sin(THREE6.MathUtils.degToRad(topAltDeg));
+      atmUniforms.uThemeFogBottomSin.value = Math.sin(THREE6.MathUtils.degToRad(bottomAltDeg));
+      atmUniforms.uThemeMinBrightness.value = minBrightness;
+      atmosphereMesh.material.uniformsNeedUpdate = true;
+    }
+    if (horizonLine) {
+      groundGroup.remove(horizonLine);
+      horizonLine.geometry.dispose();
+      horizonLine.material.dispose();
+      horizonLine = null;
+    }
+    const lineThickness = THREE6.MathUtils.clamp(theme?.horizonLineThickness ?? 0, 0, 8);
+    const shouldDrawLine = mode === 1 && pointCount >= 2 && lineThickness > 0;
+    if (!shouldDrawLine) return;
+    const lineColor = toColor(theme?.horizonLineColor, 5601177);
+    const lineRadius = 997;
+    const pts = [];
+    for (let i = 0; i < pointCount; i++) {
+      const sample = sortedPoints[i];
+      const angleDeg = sample.azDeg - (theme?.profile?.angleRotateZDeg ?? 0);
+      const a = THREE6.MathUtils.degToRad(angleDeg);
+      const alt = THREE6.MathUtils.degToRad(sample.altDeg);
+      const rc = Math.cos(alt);
+      pts.push(new THREE6.Vector3(
+        lineRadius * rc * Math.cos(a),
+        lineRadius * Math.sin(alt),
+        lineRadius * rc * Math.sin(a)
+      ));
+    }
+    if (pts.length > 0) pts.push(pts[0].clone());
+    const geo = new THREE6.BufferGeometry().setFromPoints(pts);
+    const mat = createSmartMaterial({
+      uniforms: {
+        color: { value: lineColor },
+        alpha: { value: 0.95 }
+      },
+      vertexShaderBody: `
+                uniform vec3 color;
+                varying vec3 vColor;
+                void main() {
+                    vColor = color;
+                    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+                    gl_Position = smartProject(mvPosition);
+                    vScreenPos = gl_Position.xy / gl_Position.w;
+                }
+            `,
+      fragmentShader: `
+                uniform float alpha;
+                varying vec3 vColor;
+                void main() {
+                    float alphaMask = getMaskAlpha();
+                    if (alphaMask < 0.01) discard;
+                    gl_FragColor = vec4(vColor, alpha * alphaMask);
+                }
+            `,
+      transparent: true,
+      depthWrite: false,
+      depthTest: true
+    });
+    const line = new THREE6.Line(geo, mat);
+    line.material.linewidth = lineThickness;
+    line.frustumCulled = false;
+    line.renderOrder = 3;
+    horizonLine = line;
+    groundGroup.add(line);
+  }
+  function sampleActiveHorizonAltDeg(azDeg) {
+    const profile = activeHorizonProfile;
+    if (profile.mode !== 1 || profile.pointCount < 2) return profile.baseAltDeg;
+    const query = ((azDeg + THREE6.MathUtils.radToDeg(profile.rotateRad)) % 360 + 360) % 360;
+    const n = profile.pointCount;
+    const firstAz = profile.azDeg[0];
+    const firstAlt = profile.altDeg[0];
+    for (let i = 1; i < n; i++) {
+      const prevAz2 = profile.azDeg[i - 1];
+      const prevAlt2 = profile.altDeg[i - 1];
+      const curAz = profile.azDeg[i];
+      const curAlt = profile.altDeg[i];
+      if (query >= prevAz2 && query <= curAz) {
+        const t2 = (query - prevAz2) / Math.max(1e-4, curAz - prevAz2);
+        return mix(prevAlt2, curAlt, t2);
+      }
+    }
+    const prevAz = profile.azDeg[n - 1];
+    const prevAlt = profile.altDeg[n - 1];
+    const wrappedQuery = query < firstAz ? query + 360 : query;
+    const t = (wrappedQuery - prevAz) / Math.max(1e-4, firstAz + 360 - prevAz);
+    return mix(prevAlt, firstAlt, t);
+  }
+  function runHorizonDiagnostics(nowMs) {
+    if (nowMs - lastHorizonDiagTs < 1200) return;
+    lastHorizonDiagTs = nowMs;
+    const points = [];
+    const r = 997;
+    const scale = globalUniforms.uScale.value;
+    const aspect = Math.max(1e-4, globalUniforms.uAspect.value);
+    for (let az = 0; az < 360; az += 2) {
+      const altDeg = sampleActiveHorizonAltDeg(az);
+      const azRad = THREE6.MathUtils.degToRad(az);
+      const altRad = THREE6.MathUtils.degToRad(altDeg);
+      const rc = Math.cos(altRad);
+      const worldPos = new THREE6.Vector3(
+        r * rc * Math.cos(azRad),
+        r * Math.sin(altRad),
+        r * rc * Math.sin(azRad)
+      );
+      const p = smartProjectJS(worldPos);
+      if (currentProjection.isClipped(p.z)) continue;
+      const x = p.x * scale / aspect;
+      const y = p.y * scale;
+      if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
+      if (Math.abs(x) > 1) continue;
+      points.push({ x, y });
+    }
+    if (points.length < 16) {
+      console.debug(`[HorizonDiag] insufficient visible horizon samples at fov=${state.fov.toFixed(1)}`);
+      return;
+    }
+    const binCount = 12;
+    const maxY = new Array(binCount).fill(-Infinity);
+    for (const p of points) {
+      const ax = Math.min(0.999, Math.abs(p.x));
+      const idx = Math.floor(ax * binCount);
+      maxY[idx] = Math.max(maxY[idx], p.y);
+    }
+    const compact = maxY.map((v) => Number.isFinite(v) ? Number(v.toFixed(3)) : null);
+    let dropCount = 0;
+    for (let i = 1; i < binCount; i++) {
+      const prev = maxY[i - 1];
+      const cur = maxY[i];
+      if (!Number.isFinite(prev) || !Number.isFinite(cur)) continue;
+      if (cur < prev - 0.02) dropCount++;
+    }
+    const flatten = groundMaterial?.uniforms?.uZenithFlatten?.value;
+    const blend = currentProjection instanceof BlendedProjection ? currentProjection.getBlend() : -1;
+    console.debug(
+      `[HorizonDiag] fov=${state.fov.toFixed(1)} latDeg=${THREE6.MathUtils.radToDeg(state.lat).toFixed(1)} mode=${activeHorizonProfile.mode} blend=${blend.toFixed(3)} flatten=${Number(flatten ?? 0).toFixed(3)} drops=${dropCount} bins=${JSON.stringify(compact)}`
+    );
+  }
   function createGround() {
     groundGroup.clear();
     const radius = 995;
-    const geometry = new THREE5.SphereGeometry(radius, 128, 64, 0, Math.PI * 2, Math.PI / 2 - 0.15, Math.PI / 2 + 0.15);
+    const geometry = new THREE6.SphereGeometry(radius, 128, 64, 0, Math.PI * 2, Math.PI / 2 - 0.15, Math.PI / 2 + 0.15);
     const material = createSmartMaterial({
       uniforms: {
-        color: { value: new THREE5.Color(65794) },
-        fogColor: { value: new THREE5.Color(663098) }
+        color: { value: new THREE6.Color(65794) },
+        fogColor: { value: new THREE6.Color(663098) },
+        uFogIntensity: { value: 0.6 },
+        uFogVisible: { value: 1 },
+        uMinBrightness: { value: 0 },
+        uHorizonMode: { value: 0 },
+        uHorizonPointCount: { value: 0 },
+        uHorizonAzDeg: { value: new Array(MAX_HORIZON_POINTS).fill(0) },
+        uHorizonAltDeg: { value: new Array(MAX_HORIZON_POINTS).fill(0) },
+        uHorizonRotateRad: { value: 0 },
+        uHorizonRadius: { value: radius },
+        uBaseAltDeg: { value: 3 },
+        uZenithFlatten: { value: 0 }
       },
       vertexShaderBody: `
                 varying vec3 vPos; 
                 varying vec3 vWorldPos;
+                varying float vViewDirZ;
                 void main() { 
                     vPos = position; 
                     vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
                     gl_Position = smartProject(mvPosition); 
                     vScreenPos = gl_Position.xy / gl_Position.w; 
                     vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz;
+                    vViewDirZ = normalize(mvPosition.xyz).z;
                 }
             `,
       fragmentShader: `
                 uniform vec3 color; 
                 uniform vec3 fogColor;
+                uniform float uFogIntensity;
+                uniform float uFogVisible;
+                uniform float uMinBrightness;
+                uniform int uHorizonMode;
+                uniform int uHorizonPointCount;
+                uniform float uHorizonAzDeg[64];
+                uniform float uHorizonAltDeg[64];
+                uniform float uHorizonRotateRad;
+                uniform float uHorizonRadius;
+                uniform float uBaseAltDeg;
+                uniform float uZenithFlatten;
                 varying vec3 vPos; 
                 varying vec3 vWorldPos;
+                varying float vViewDirZ;
+
+                float samplePolygonalAltDeg(float azDeg) {
+                    if (uHorizonPointCount < 2) return 0.0;
+                    float z = mod(azDeg, 360.0);
+                    if (z < 0.0) z += 360.0;
+
+                    float prevAz = uHorizonAzDeg[0];
+                    float prevAlt = uHorizonAltDeg[0];
+                    for (int i = 1; i < 64; i++) {
+                        if (i >= uHorizonPointCount) break;
+                        float curAz = uHorizonAzDeg[i];
+                        float curAlt = uHorizonAltDeg[i];
+                        if (z >= prevAz && z <= curAz) {
+                            float t = (z - prevAz) / max(0.0001, curAz - prevAz);
+                            return mix(prevAlt, curAlt, t);
+                        }
+                        prevAz = curAz;
+                        prevAlt = curAlt;
+                    }
+
+                    float firstAz = uHorizonAzDeg[0] + 360.0;
+                    float firstAlt = uHorizonAltDeg[0];
+                    float zw = z;
+                    if (zw < uHorizonAzDeg[0]) zw += 360.0;
+                    float t = (zw - prevAz) / max(0.0001, firstAz - prevAz);
+                    return mix(prevAlt, firstAlt, t);
+                }
                 
                 void main() { 
                     float alphaMask = getMaskAlpha(); 
                     if (alphaMask < 0.01) discard; 
+
+                    // Keep ground visibility aligned with the active projection clip.
+                    float clipZ = -0.1;
+                    if (uProjectionType == 1) {
+                        clipZ = 0.1;
+                    } else if (uProjectionType == 2) {
+                        clipZ = mix(-0.1, 0.1, clamp(uBlend, 0.0, 1.0));
+                    }
+                    if (vViewDirZ > clipZ) discard;
                     
-                    // Procedural Horizon (Mountains)
                     float angle = atan(vPos.z, vPos.x);
-                    
-                    // FBM-like terrain with increased amplitude
-                    float h = 0.0;
-                    h += sin(angle * 6.0) * 35.0;
-                    h += sin(angle * 13.0 + 1.0) * 18.0;
-                    h += sin(angle * 29.0 + 2.0) * 8.0;
-                    h += sin(angle * 63.0 + 4.0) * 3.0;
-                    h += sin(angle * 97.0 + 5.0) * 1.5;
+                    float terrainHeight;
 
-                    float terrainHeight = h + 12.0;
+                    if (uHorizonMode == 1 && uHorizonPointCount >= 2) {
+                        float azDeg = mod(degrees(angle) + 360.0 + degrees(uHorizonRotateRad), 360.0);
+                        float altDeg = samplePolygonalAltDeg(azDeg);
+                        terrainHeight = uHorizonRadius * sin(radians(altDeg));
+                    } else {
+                        // Procedural Horizon (Mountains)
+                        float h = 0.0;
+                        h += sin(angle * 6.0) * 35.0;
+                        h += sin(angle * 13.0 + 1.0) * 18.0;
+                        h += sin(angle * 29.0 + 2.0) * 8.0;
+                        h += sin(angle * 63.0 + 4.0) * 3.0;
+                        h += sin(angle * 97.0 + 5.0) * 1.5;
+                        terrainHeight = h + 12.0;
+                    }
+                    float circularHeight = uHorizonRadius * sin(radians(uBaseAltDeg));
+                    terrainHeight = mix(terrainHeight, circularHeight, clamp(uZenithFlatten, 0.0, 1.0));
 
                     if (vPos.y > terrainHeight) discard;
 
                     // Atmospheric rim glow just below terrain peaks
                     float rimDist = terrainHeight - vPos.y;
-                    float rim = exp(-rimDist * 0.15) * 0.4;
+                    float rim = exp(-rimDist * 0.15) * 0.4 * uFogVisible;
                     vec3 rimColor = fogColor * 1.5;
 
                     // Atmospheric haze \u2014 stronger near horizon
                     float fogFactor = smoothstep(-120.0, terrainHeight, vPos.y);
-                    vec3 finalCol = mix(color, fogColor, fogFactor * 0.6);
+                    vec3 finalCol = mix(color, fogColor, fogFactor * uFogIntensity * uFogVisible);
 
                     // Add rim glow near terrain peaks
                     finalCol += rimColor * rim;
+                    finalCol = max(finalCol, color * uMinBrightness);
 
                     gl_FragColor = vec4(finalCol, 1.0); 
                 }
             `,
-      side: THREE5.BackSide,
+      side: THREE6.BackSide,
       transparent: false,
       depthWrite: true,
       depthTest: true
     });
-    const ground = new THREE5.Mesh(geometry, material);
+    groundMaterial = material;
+    const ground = new THREE6.Mesh(geometry, material);
     groundGroup.add(ground);
+    applyGroundTheme(currentConfig);
   }
+  let skyBackgroundMesh = null;
   let atmosphereMesh = null;
+  let moonMesh = null;
+  let moonGlowMesh = null;
+  let sunDiscMesh = null;
+  let sunHaloMesh = null;
+  let milkyWayMesh = null;
+  let editHoverMesh = null;
+  let editHoverTargetPos = null;
+  let editDropFlash = 0;
+  function createSkyBackground() {
+    const geo = new THREE6.SphereGeometry(2400, 32, 32);
+    const mat = createSmartMaterial({
+      uniforms: {},
+      vertexShaderBody: `
+                varying vec3 vWorldNormal;
+                void main() {
+                    vWorldNormal = normalize(position);
+                    vec4 mv = modelViewMatrix * vec4(position, 1.0);
+                    gl_Position = smartProject(mv);
+                    vScreenPos = gl_Position.xy / gl_Position.w;
+                }
+            `,
+      fragmentShader: `
+                varying vec3 vWorldNormal;
+                void main() {
+                    float h = clamp(normalize(vWorldNormal).y, -1.0, 1.0);
+
+                    // Scotopic-inspired 5-stop gradient.
+                    // Night sky: blue channel ~2.6x red, derived from CIE (x=0.25, y=0.25).
+                    vec3 cZenith  = vec3(0.010, 0.022, 0.055);
+                    vec3 cUpper   = vec3(0.015, 0.033, 0.080);
+                    vec3 cMid     = vec3(0.022, 0.048, 0.108);
+                    vec3 cLower   = vec3(0.035, 0.072, 0.148);
+                    vec3 cHorizon = vec3(0.052, 0.100, 0.190);
+
+                    float t1 = smoothstep(0.0, 0.30, h);
+                    float t2 = smoothstep(0.3, 0.60, h);
+                    float t3 = smoothstep(0.6, 0.85, h);
+                    float t4 = smoothstep(0.85, 1.00, h);
+
+                    vec3 col = cHorizon;
+                    col = mix(col, cLower,  t1);
+                    col = mix(col, cMid,    t2);
+                    col = mix(col, cUpper,  t3);
+                    col = mix(col, cZenith, t4);
+
+                    // Rayleigh limb brightening at horizon
+                    float limb = exp(-18.0 * abs(h)) * smoothstep(-0.05, 0.06, h);
+                    col += vec3(0.012, 0.024, 0.050) * limb;
+
+                    // Below ground: fade to near-black
+                    float below = smoothstep(-0.04, -0.18, h);
+                    col = mix(col, vec3(0.002, 0.003, 0.006), below);
+
+                    gl_FragColor = vec4(col, 1.0);
+                }
+            `,
+      transparent: false,
+      depthWrite: false,
+      depthTest: false,
+      side: THREE6.BackSide
+    });
+    skyBackgroundMesh = new THREE6.Mesh(geo, mat);
+    skyBackgroundMesh.renderOrder = -2;
+    skyBackgroundMesh.frustumCulled = false;
+    scene.add(skyBackgroundMesh);
+  }
   function createAtmosphere() {
-    const geometry = new THREE5.SphereGeometry(990, 64, 64);
+    const geometry = new THREE6.SphereGeometry(990, 64, 64);
     const material = createSmartMaterial({
+      uniforms: {
+        uThemeFogVisible: { value: 1 },
+        uThemeFogTopSin: { value: 0.95 },
+        uThemeFogBottomSin: { value: -1 },
+        uThemeFogIntensity: { value: 1 },
+        uThemeMinBrightness: { value: 0 }
+      },
       vertexShaderBody: `
                 varying vec3 vWorldNormal;
                 void main() { 
@@ -1095,6 +1913,11 @@ function createEngine({
                 uniform float uAtmDark;
                 uniform vec3 uColorHorizon;
                 uniform vec3 uColorZenith;
+                uniform float uThemeFogVisible;
+                uniform float uThemeFogTopSin;
+                uniform float uThemeFogBottomSin;
+                uniform float uThemeFogIntensity;
+                uniform float uThemeMinBrightness;
                 
                 void main() {
                     float alphaMask = getMaskAlpha();
@@ -1108,6 +1931,10 @@ function createEngine({
 
                     // Non-linear mix for realistic sky falloff
                     vec3 skyColor = mix(uColorHorizon * uAtmGlow, uColorZenith * (1.0 - uAtmDark), pow(t, 0.6));
+                    float hazeBand = smoothstep(uThemeFogBottomSin, uThemeFogTopSin, h);
+                    float hazeFadeEnd = max(uThemeFogTopSin + 0.001, min(1.0, uThemeFogTopSin + 0.25));
+                    hazeBand *= (1.0 - smoothstep(uThemeFogTopSin, hazeFadeEnd, h));
+                    float fogTheme = uThemeFogVisible * uThemeFogIntensity;
 
                     // 2. Teal tint at mid-altitudes (subtle colour variation)
                     float midBand = exp(-6.0 * pow(h - 0.3, 2.0));
@@ -1115,26 +1942,393 @@ function createEngine({
 
                     // 3. Primary horizon glow band (wider than before)
                     float horizonBand = exp(-10.0 * abs(h - 0.02));
-                    skyColor += uColorHorizon * horizonBand * 0.5 * uAtmGlow;
+                    skyColor += uColorHorizon * horizonBand * 0.5 * uAtmGlow * fogTheme * max(0.15, hazeBand);
 
                     // 4. Warm secondary glow (light pollution / sodium scatter)
                     float warmGlow = exp(-8.0 * abs(h));
-                    skyColor += vec3(0.4, 0.25, 0.15) * warmGlow * 0.3 * uAtmGlow;
+                    skyColor += vec3(0.4, 0.25, 0.15) * warmGlow * 0.3 * uAtmGlow * fogTheme * max(0.15, hazeBand);
+                    skyColor = max(skyColor, uColorZenith * (0.2 * uThemeMinBrightness));
 
                     gl_FragColor = vec4(skyColor, 1.0);
                 }
             `,
-      side: THREE5.BackSide,
+      side: THREE6.BackSide,
       depthWrite: false,
       depthTest: true
     });
-    const atm = new THREE5.Mesh(geometry, material);
+    const atm = new THREE6.Mesh(geometry, material);
     atmosphereMesh = atm;
     groundGroup.add(atm);
   }
-  const backdropGroup = new THREE5.Group();
+  function createMoon() {
+    const moonDir = new THREE6.Vector3(-0.38, 0.62, -0.68).normalize();
+    const moonWorldPos = moonDir.clone().multiplyScalar(2e3);
+    const glowGeo = new THREE6.PlaneGeometry(1, 1);
+    const glowMat = createSmartMaterial({
+      uniforms: { uMoonSize: { value: 0.082 } },
+      vertexShaderBody: `
+                uniform float uMoonSize;
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    vec4 mvPos = modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);
+                    vec4 projected = smartProject(mvPos);
+                    if (projected.z > 4.0) { gl_Position = vec4(10.0, 10.0, 10.0, 1.0); return; }
+                    vec2 offset = position.xy * uMoonSize * uScale * 2.4;
+                    projected.xy += offset / vec2(uAspect, 1.0);
+                    vScreenPos = projected.xy / projected.w;
+                    gl_Position = projected;
+                }
+            `,
+      fragmentShader: `
+                varying vec2 vUv;
+                void main() {
+                    float alphaMask = getMaskAlpha();
+                    if (alphaMask < 0.01) discard;
+                    vec2 p = vUv * 2.0 - 1.0;
+                    float d = length(p);
+                    if (d > 1.0) discard;
+                    float halo = exp(-5.0 * d * d) * 0.07;
+                    halo += exp(-2.5 * max(0.0, d - 0.42)) * 0.045;
+                    if (halo < 0.003) discard;
+                    gl_FragColor = vec4(vec3(0.78, 0.88, 1.0) * halo, halo * alphaMask);
+                }
+            `,
+      transparent: true,
+      depthWrite: false,
+      depthTest: true,
+      blending: THREE6.AdditiveBlending
+    });
+    moonGlowMesh = new THREE6.Mesh(glowGeo, glowMat);
+    moonGlowMesh.position.copy(moonWorldPos);
+    moonGlowMesh.frustumCulled = false;
+    moonGlowMesh.renderOrder = 2;
+    scene.add(moonGlowMesh);
+    const discGeo = new THREE6.PlaneGeometry(1, 1);
+    const discMat = createSmartMaterial({
+      uniforms: { uMoonSize: { value: 0.082 } },
+      vertexShaderBody: `
+                uniform float uMoonSize;
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    vec4 mvPos = modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);
+                    vec4 projected = smartProject(mvPos);
+                    if (projected.z > 4.0) { gl_Position = vec4(10.0, 10.0, 10.0, 1.0); return; }
+                    vec2 offset = position.xy * uMoonSize * uScale;
+                    projected.xy += offset / vec2(uAspect, 1.0);
+                    vScreenPos = projected.xy / projected.w;
+                    gl_Position = projected;
+                }
+            `,
+      fragmentShader: `
+                varying vec2 vUv;
+                void main() {
+                    float alphaMask = getMaskAlpha();
+                    if (alphaMask < 0.01) discard;
+                    vec2 p = vUv * 2.0 - 1.0;
+                    float d = length(p);
+                    if (d > 1.0) discard;
+
+                    float edge = smoothstep(1.0, 0.90, d);
+
+                    // Phase: sunlight from upper-right (gibbous moon)
+                    vec2 sunDir2D = normalize(vec2(0.55, 0.45));
+                    float phaseRaw = dot(normalize(p + vec2(0.0001)), sunDir2D);
+                    float lit = smoothstep(-0.18, 0.32, phaseRaw);
+
+                    // Limb darkening (classical sqrt law)
+                    float cosTheta = sqrt(max(0.001, 1.0 - d * d));
+                    float limb = cosTheta * 0.42 + 0.58;
+
+                    // Procedural surface texture
+                    float angle = atan(p.y, p.x);
+                    float r = d;
+                    float detail = sin(angle * 5.0 + 2.1) * sin(r * 8.3) * 0.038
+                                 + sin(angle * 11.0 - 1.3) * sin(r * 13.0) * 0.022
+                                 + sin(angle * 2.0 + 0.8) * (1.0 - r) * 0.055
+                                 + sin(angle * 17.0 + r * 6.5) * 0.014
+                                 + sin(angle * 23.0 - r * 11.0) * 0.009;
+
+                    // Mare (dark maria) patches
+                    float mare1 = 1.0 - smoothstep(0.0, 0.30, length(p - vec2(-0.20, 0.22)));
+                    float mare2 = 1.0 - smoothstep(0.0, 0.20, length(p - vec2( 0.10, 0.30)));
+                    float mare3 = 1.0 - smoothstep(0.0, 0.24, length(p - vec2( 0.17,-0.06)));
+                    float mare4 = 1.0 - smoothstep(0.0, 0.14, length(p - vec2(-0.30,-0.20)));
+                    float totalMare = clamp(mare1*0.50 + mare2*0.38 + mare3*0.32 + mare4*0.28, 0.0, 0.58);
+
+                    vec3 highland  = vec3(0.88, 0.85, 0.80);
+                    vec3 mareColor = vec3(0.40, 0.39, 0.37);
+                    vec3 moonBase  = clamp(mix(highland, mareColor, totalMare) + detail, 0.0, 1.0);
+
+                    vec3 litSurface = moonBase * limb;
+                    vec3 earthshine = vec3(0.038, 0.052, 0.078);
+                    vec3 finalColor = mix(earthshine, litSurface, lit);
+
+                    gl_FragColor = vec4(finalColor * edge, edge * alphaMask);
+                }
+            `,
+      transparent: true,
+      depthWrite: true,
+      depthTest: true,
+      blending: THREE6.NormalBlending
+    });
+    moonMesh = new THREE6.Mesh(discGeo, discMat);
+    moonMesh.position.copy(moonWorldPos);
+    moonMesh.frustumCulled = false;
+    moonMesh.renderOrder = 3;
+    scene.add(moonMesh);
+  }
+  function createSun() {
+    const sunDir = new THREE6.Vector3(-1, -0.08, 0).normalize();
+    const sunWorldPos = sunDir.clone().multiplyScalar(2e3);
+    const haloGeo = new THREE6.PlaneGeometry(1, 1);
+    const haloMat = createSmartMaterial({
+      uniforms: { uSunHaloSize: { value: 0.46 } },
+      vertexShaderBody: `
+                uniform float uSunHaloSize;
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    vec4 mvPos = modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);
+                    vec4 projected = smartProject(mvPos);
+                    if (projected.z > 4.0) { gl_Position = vec4(10.0, 10.0, 10.0, 1.0); return; }
+                    vec2 offset = position.xy * uSunHaloSize * uScale;
+                    projected.xy += offset / vec2(uAspect, 1.0);
+                    vScreenPos = projected.xy / projected.w;
+                    gl_Position = projected;
+                }
+            `,
+      fragmentShader: `
+                varying vec2 vUv;
+                void main() {
+                    float alphaMask = getMaskAlpha();
+                    if (alphaMask < 0.01) discard;
+
+                    vec2 p = vUv * 2.0 - 1.0;
+                    float d = length(p);
+                    if (d > 1.0) discard;
+
+                    // Asymmetric falloff: spread wider horizontally than vertically
+                    float asymDist = length(vec2(p.x * 0.55, p.y));
+
+                    // Radial glow: warm near centre, fading outward
+                    float glow = exp(-2.8 * asymDist * asymDist) * 1.0;
+                    glow      += exp(-1.0 * asymDist) * 0.35;
+
+                    // Crepuscular rays: fan out from bottom, visible above sun centre
+                    float rayMask = smoothstep(-0.05, 0.35, p.y);
+                    float rayFade = max(0.0, 1.0 - d) * (1.0 - d);
+                    float rayAngle = atan(p.x, max(0.0001, p.y)); // angle from vertical
+                    float rays = pow(abs(sin(rayAngle * 7.0  + 0.30)), 9.0) * 0.10
+                               + pow(abs(sin(rayAngle * 13.0 - 1.10)), 14.0) * 0.07
+                               + pow(abs(sin(rayAngle * 19.0 + 2.30)), 11.0) * 0.05;
+                    rays *= rayMask * rayFade;
+
+                    // Colour: white-yellow \u2192 orange \u2192 hot-pink \u2192 purple
+                    vec3 cYellow = vec3(1.00, 0.88, 0.52);
+                    vec3 cOrange = vec3(1.00, 0.42, 0.10);
+                    vec3 cPink   = vec3(0.90, 0.22, 0.52);
+                    vec3 cPurple = vec3(0.38, 0.12, 0.48);
+                    vec3 col = mix(cYellow, cOrange, smoothstep(0.00, 0.40, asymDist));
+                    col      = mix(col,    cPink,   smoothstep(0.35, 0.72, asymDist));
+                    col      = mix(col,    cPurple, smoothstep(0.65, 1.00, asymDist));
+
+                    float total = (glow + rays) * alphaMask;
+                    if (total < 0.005) discard;
+                    gl_FragColor = vec4(col * total, total);
+                }
+            `,
+      transparent: true,
+      depthWrite: false,
+      depthTest: true,
+      blending: THREE6.AdditiveBlending
+    });
+    sunHaloMesh = new THREE6.Mesh(haloGeo, haloMat);
+    sunHaloMesh.position.copy(sunWorldPos);
+    sunHaloMesh.frustumCulled = false;
+    sunHaloMesh.renderOrder = 1;
+    scene.add(sunHaloMesh);
+    const discGeo = new THREE6.PlaneGeometry(1, 1);
+    const discMat = createSmartMaterial({
+      uniforms: { uSunSize: { value: 0.09 } },
+      vertexShaderBody: `
+                uniform float uSunSize;
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    vec4 mvPos = modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);
+                    vec4 projected = smartProject(mvPos);
+                    if (projected.z > 4.0) { gl_Position = vec4(10.0, 10.0, 10.0, 1.0); return; }
+                    vec2 offset = position.xy * uSunSize * uScale;
+                    projected.xy += offset / vec2(uAspect, 1.0);
+                    vScreenPos = projected.xy / projected.w;
+                    gl_Position = projected;
+                }
+            `,
+      fragmentShader: `
+                varying vec2 vUv;
+                void main() {
+                    float alphaMask = getMaskAlpha();
+                    if (alphaMask < 0.01) discard;
+
+                    vec2 p = vUv * 2.0 - 1.0;
+                    float d = length(p);
+                    if (d > 1.0) discard;
+
+                    float edge = smoothstep(1.0, 0.86, d);
+
+                    // Photosphere limb darkening: bright white core \u2192 orange limb
+                    float core = smoothstep(0.28, 0.00, d);
+                    float mid  = smoothstep(0.68, 0.22, d) * (1.0 - core);
+                    float limb = (1.0 - smoothstep(0.70, 1.00, d)) * (1.0 - core - mid);
+
+                    vec3 cCore = vec3(1.00, 0.97, 0.88); // hot white
+                    vec3 cMid  = vec3(1.00, 0.80, 0.38); // yellow
+                    vec3 cLimb = vec3(1.00, 0.52, 0.08); // deep orange
+
+                    vec3 col = cCore * (core + 0.12) + cMid * mid + cLimb * limb;
+                    col = clamp(col, 0.0, 1.5); // allow slight overbright
+
+                    gl_FragColor = vec4(col * edge, edge * alphaMask);
+                }
+            `,
+      transparent: true,
+      depthWrite: true,
+      depthTest: true,
+      blending: THREE6.NormalBlending
+    });
+    sunDiscMesh = new THREE6.Mesh(discGeo, discMat);
+    sunDiscMesh.position.copy(sunWorldPos);
+    sunDiscMesh.frustumCulled = false;
+    sunDiscMesh.renderOrder = 3;
+    scene.add(sunDiscMesh);
+  }
+  function createMilkyWay() {
+    if (milkyWayMesh) {
+      scene.remove(milkyWayMesh);
+      milkyWayMesh.geometry.dispose();
+      milkyWayMesh.material.dispose();
+      milkyWayMesh = null;
+    }
+    const geo = new THREE6.PlaneGeometry(1100, 380, 4, 4);
+    const mat = createSmartMaterial({
+      uniforms: {},
+      vertexShaderBody: `
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    vec4 mv = modelViewMatrix * vec4(position, 1.0);
+                    gl_Position = smartProject(mv);
+                    vScreenPos = gl_Position.xy / gl_Position.w;
+                }
+            `,
+      fragmentShader: `
+                varying vec2 vUv;
+
+                // --- Noise helpers ---
+                float hash(vec2 p) {
+                    p = fract(p * vec2(127.1, 311.7));
+                    p += dot(p, p + 19.19);
+                    return fract(p.x * p.y);
+                }
+                float vnoise(vec2 p) {
+                    vec2 i = floor(p); vec2 f = fract(p);
+                    f = f * f * (3.0 - 2.0 * f);
+                    return mix(
+                        mix(hash(i),              hash(i + vec2(1.0, 0.0)), f.x),
+                        mix(hash(i + vec2(0.0,1.0)), hash(i + vec2(1.0,1.0)), f.x), f.y
+                    );
+                }
+                float fbm(vec2 p) {
+                    float v = 0.0; float a = 0.5;
+                    mat2 m = mat2(1.6, 1.2, -1.2, 1.6);
+                    for (int i = 0; i < 7; i++) { v += a * vnoise(p); p = m * p; a *= 0.5; }
+                    return v;
+                }
+
+                void main() {
+                    float alphaMask = getMaskAlpha();
+                    if (alphaMask < 0.01) discard;
+
+                    vec2 uv = vUv * 2.0 - 1.0; // -1..1 centred
+
+                    // Galactic band: tight Gaussian falloff vertically
+                    float bandMask = exp(-uv.y * uv.y * 10.0);
+
+                    // Warp UV for organic turbulence (two layers of distortion)
+                    vec2 q = vec2(fbm(uv * 1.5),
+                                  fbm(uv * 1.5 + vec2(5.2, 1.3)));
+                    vec2 r = vec2(fbm(uv * 1.0 + 4.0 * q + vec2(1.7, 9.2)),
+                                  fbm(uv * 1.0 + 4.0 * q + vec2(8.3, 2.8)));
+
+                    float nebula = fbm(uv * 2.0 + 2.0 * r);
+                    float detail = fbm(uv * 5.0 + r * 3.0 + vec2(3.1, 2.7));
+                    float fine   = fbm(uv * 10.0 + vec2(1.0, 5.0));
+
+                    // Base density
+                    float density = smoothstep(0.30, 0.80, nebula) * bandMask;
+                    density      += smoothstep(0.45, 0.85, detail) * bandMask * 0.35;
+
+                    // Dust lanes \u2014 dark patches carved into the band
+                    float dust = fbm(uv * 3.5 + vec2(11.0, 7.0));
+                    density   *= (1.0 - smoothstep(0.52, 0.62, dust) * 0.7 * bandMask);
+
+                    // Galactic core boost toward horizontal centre
+                    float galCore = exp(-uv.x * uv.x * 1.2) * bandMask;
+
+                    // --- Color palette ---
+                    vec3 deepBlue  = vec3(0.10, 0.15, 0.45);
+                    vec3 midBlue   = vec3(0.25, 0.30, 0.65);
+                    vec3 purple    = vec3(0.40, 0.20, 0.60);
+                    vec3 coreWarm  = vec3(0.85, 0.80, 0.65); // warm star-cluster glow
+                    vec3 pinkNeb   = vec3(0.65, 0.28, 0.50); // emission nebula pink
+
+                    float t1 = smoothstep(0.3, 0.7, nebula);
+                    float t2 = smoothstep(0.5, 0.8, detail);
+                    float t3 = smoothstep(0.55, 0.75, fine);
+
+                    vec3 color = mix(deepBlue, midBlue, t1);
+                    color = mix(color, purple,  t2 * 0.5);
+                    color = mix(color, pinkNeb, t3 * 0.25 * bandMask);
+                    color += coreWarm * galCore * 0.45 * density;
+
+                    // Micro-star field \u2014 denser in the band
+                    float starThresh = mix(0.975, 0.940, bandMask);
+                    float starSeed   = hash(floor(vUv * 500.0));
+                    float star       = step(starThresh, starSeed);
+                    float starBright = hash(floor(vUv * 500.0) + 37.0);
+                    color   += vec3(0.90, 0.95, 1.0) * star * (0.4 + 0.6 * starBright);
+                    density  = max(density, star * bandMask * 0.5);
+
+                    // Soft edge vignette
+                    float ex = smoothstep(0.0, 0.12, vUv.x) * smoothstep(1.0, 0.88, vUv.x);
+                    float ey = smoothstep(0.0, 0.18, vUv.y) * smoothstep(1.0, 0.82, vUv.y);
+
+                    float alpha = density * ex * ey * alphaMask * 0.80;
+                    if (alpha < 0.004) discard;
+                    gl_FragColor = vec4(color, alpha);
+                }
+            `,
+      transparent: true,
+      depthWrite: false,
+      depthTest: true,
+      side: THREE6.DoubleSide,
+      blending: THREE6.AdditiveBlending
+    });
+    milkyWayMesh = new THREE6.Mesh(geo, mat);
+    const mwDir = new THREE6.Vector3(-0.62, 0.6, -0.5).normalize();
+    milkyWayMesh.position.copy(mwDir.clone().multiplyScalar(920));
+    milkyWayMesh.lookAt(0, 0, 0);
+    milkyWayMesh.rotateY(Math.PI);
+    milkyWayMesh.frustumCulled = false;
+    milkyWayMesh.renderOrder = 1;
+    scene.add(milkyWayMesh);
+  }
+  const backdropGroup = new THREE6.Group();
   scene.add(backdropGroup);
-  function createBackdropStars(count = 31e3) {
+  let backdropStarsMaterial = null;
+  function createBackdropStars(count = 5e3) {
     backdropGroup.clear();
     while (backdropGroup.children.length > 0) {
       const c = backdropGroup.children[0];
@@ -1142,7 +2336,7 @@ function createEngine({
       if (c.geometry) c.geometry.dispose();
       if (c.material) c.material.dispose();
     }
-    const geometry = new THREE5.BufferGeometry();
+    const geometry = new THREE6.BufferGeometry();
     const positions = [];
     const sizes = [];
     const colors = [];
@@ -1177,14 +2371,17 @@ function createEngine({
       }
       colors.push(cr, cg, cb);
     }
-    geometry.setAttribute("position", new THREE5.Float32BufferAttribute(positions, 3));
-    geometry.setAttribute("size", new THREE5.Float32BufferAttribute(sizes, 1));
-    geometry.setAttribute("color", new THREE5.Float32BufferAttribute(colors, 3));
+    geometry.setAttribute("position", new THREE6.Float32BufferAttribute(positions, 3));
+    geometry.setAttribute("size", new THREE6.Float32BufferAttribute(sizes, 1));
+    geometry.setAttribute("color", new THREE6.Float32BufferAttribute(colors, 3));
     const material = createSmartMaterial({
       uniforms: {
         pixelRatio: { value: renderer.getPixelRatio() },
         uScale: globalUniforms.uScale,
-        uTime: globalUniforms.uTime
+        uTime: globalUniforms.uTime,
+        uBackdropGain: { value: 1 },
+        uBackdropEnergy: { value: 2.2 },
+        uBackdropSizeExp: { value: 0.9 }
       },
       vertexShaderBody: `
                 attribute float size;
@@ -1195,6 +2392,9 @@ function createEngine({
                 uniform float uAtmExtinction;
                 uniform float uAtmTwinkle;
                 uniform float uTime;
+                uniform float uBackdropGain;
+                uniform float uBackdropEnergy;
+                uniform float uBackdropSizeExp;
 
                 void main() {
                     vec3 nPos = normalize(position);
@@ -1210,15 +2410,16 @@ function createEngine({
                     float twinkle = sin(uTime * 3.0 + position.x * 0.05 + position.z * 0.03) * 0.5 + 0.5;
                     float scintillation = mix(1.0, twinkle * 2.0, uAtmTwinkle * 0.4 * turbulence);
 
-                    vColor = color * 3.0 * extinction * horizonFade * scintillation;
+                    vColor = color * uBackdropEnergy * extinction * horizonFade * scintillation * uBackdropGain;
 
                     vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
                     gl_Position = smartProject(mvPosition);
                     vScreenPos = gl_Position.xy / gl_Position.w;
 
-                    float zoomScale = pow(uScale, 0.5);
+                    float zoomScale = pow(max(uScale, 0.0001), uBackdropSizeExp);
                     float perceptualSize = pow(size, 0.55);
-                    gl_PointSize = clamp(perceptualSize * zoomScale * 0.5 * pixelRatio * (800.0 / -mvPosition.z) * horizonFade, 0.5, 20.0);
+                    float sizeGain = mix(0.78, 1.0, uBackdropGain);
+                    gl_PointSize = clamp(perceptualSize * zoomScale * sizeGain * 0.5 * pixelRatio * (800.0 / length(mvPosition.xyz)) * horizonFade, 0.5, 20.0);
                 }
             `,
       fragmentShader: `
@@ -1242,27 +2443,84 @@ function createEngine({
       transparent: true,
       depthWrite: false,
       depthTest: true,
-      blending: THREE5.AdditiveBlending
+      blending: THREE6.AdditiveBlending
     });
-    const points = new THREE5.Points(geometry, material);
+    backdropStarsMaterial = material;
+    const points = new THREE6.Points(geometry, material);
     points.frustumCulled = false;
     backdropGroup.add(points);
   }
+  function createEditHoverRing() {
+    const geo = new THREE6.PlaneGeometry(1, 1);
+    const mat = createSmartMaterial({
+      uniforms: {
+        uRingSize: { value: 0.06 },
+        uRingAlpha: { value: 0 },
+        uRingColor: { value: new THREE6.Color(0.55, 0.88, 1) }
+      },
+      vertexShaderBody: `
+                uniform float uRingSize;
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    vec4 mvPos = modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);
+                    vec4 proj = smartProject(mvPos);
+                    if (proj.z > 4.0) { gl_Position = vec4(10.0, 10.0, 10.0, 1.0); return; }
+                    vec2 offset = position.xy * uRingSize * uScale;
+                    proj.xy += offset / vec2(uAspect, 1.0);
+                    vScreenPos = proj.xy / proj.w;
+                    gl_Position = proj;
+                }
+            `,
+      fragmentShader: `
+                varying vec2 vUv;
+                uniform float uRingAlpha;
+                uniform vec3 uRingColor;
+                void main() {
+                    float alphaMask = getMaskAlpha();
+                    if (alphaMask < 0.01) discard;
+                    vec2 p = vUv * 2.0 - 1.0;
+                    float d = length(p);
+                    float ring = smoothstep(0.52, 0.62, d) * (1.0 - smoothstep(0.80, 0.92, d));
+                    float glow = (1.0 - smoothstep(0.55, 0.98, d)) * 0.18;
+                    float a = (ring + glow) * uRingAlpha * alphaMask;
+                    if (a < 0.005) discard;
+                    gl_FragColor = vec4(uRingColor * (ring * 1.2 + glow), a);
+                }
+            `,
+      transparent: true,
+      depthWrite: false,
+      depthTest: false,
+      side: THREE6.DoubleSide,
+      blending: THREE6.AdditiveBlending
+    });
+    editHoverMesh = new THREE6.Mesh(geo, mat);
+    editHoverMesh.renderOrder = 500;
+    editHoverMesh.frustumCulled = false;
+    scene.add(editHoverMesh);
+  }
+  createSkyBackground();
   createGround();
   createAtmosphere();
+  createMoon();
+  createSun();
+  createMilkyWay();
   createBackdropStars();
-  const raycaster = new THREE5.Raycaster();
+  createEditHoverRing();
+  const raycaster = new THREE6.Raycaster();
   raycaster.params.Points.threshold = 5;
-  new THREE5.Vector2();
-  const root = new THREE5.Group();
+  new THREE6.Vector2();
+  const root = new THREE6.Group();
   scene.add(root);
   const nodeById = /* @__PURE__ */ new Map();
   const starIndexToId = [];
+  const starIdToIndex = /* @__PURE__ */ new Map();
   const dynamicLabels = [];
+  const labelManager = new LabelManager();
   const hoverLabelMat = createSmartMaterial({
     uniforms: {
       uMap: { value: null },
-      uSize: { value: new THREE5.Vector2(1, 1) },
+      uSize: { value: new THREE6.Vector2(1, 1) },
       uAlpha: { value: 0 },
       uAngle: { value: 0 }
     },
@@ -1300,7 +2558,7 @@ function createEngine({
     depthTest: false
     // Always on top of stars
   });
-  const hoverLabelMesh = new THREE5.Mesh(new THREE5.PlaneGeometry(1, 1), hoverLabelMat);
+  const hoverLabelMesh = new THREE6.Mesh(new THREE6.PlaneGeometry(1, 1), hoverLabelMat);
   hoverLabelMesh.visible = false;
   hoverLabelMesh.renderOrder = 999;
   hoverLabelMesh.frustumCulled = false;
@@ -1324,7 +2582,9 @@ function createEngine({
     }
     nodeById.clear();
     starIndexToId.length = 0;
+    starIdToIndex.clear();
     dynamicLabels.length = 0;
+    labelManager.clear();
     constellationLines = null;
     boundaryLines = null;
     starPoints = null;
@@ -1346,49 +2606,132 @@ function createEngine({
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
     ctx.fillText(text, w / 2, h / 2);
-    const tex = new THREE5.CanvasTexture(canvas);
-    tex.minFilter = THREE5.LinearFilter;
+    const tex = new THREE6.CanvasTexture(canvas);
+    tex.minFilter = THREE6.LinearFilter;
     return { tex, aspect: w / h };
   }
   function getPosition(n) {
     if (currentConfig?.arrangement) {
       const arr = currentConfig.arrangement[n.id];
       if (arr) {
-        if (arr.position[2] === 0) {
-          const x = arr.position[0];
-          const y = arr.position[1];
+        const [px, py, pz] = arr.position;
+        if (pz === 0) {
           const radius = currentConfig.layout?.radius ?? 2e3;
-          const r_norm = Math.min(1, Math.sqrt(x * x + y * y) / radius);
-          const phi = Math.atan2(y, x);
-          const theta = r_norm * (Math.PI / 2);
-          return new THREE5.Vector3(
-            Math.sin(theta) * Math.cos(phi),
-            Math.cos(theta),
-            Math.sin(theta) * Math.sin(phi)
-          ).multiplyScalar(radius);
+          const len3d = Math.sqrt(px * px + py * py);
+          if (len3d < radius * 0.99) {
+            const r_norm = Math.min(1, len3d / radius);
+            const phi = Math.atan2(py, px);
+            const theta = r_norm * (Math.PI / 2);
+            return new THREE6.Vector3(
+              Math.sin(theta) * Math.cos(phi),
+              Math.cos(theta),
+              Math.sin(theta) * Math.sin(phi)
+            ).multiplyScalar(radius);
+          }
         }
-        return new THREE5.Vector3(arr.position[0], arr.position[1], arr.position[2]);
+        return new THREE6.Vector3(px, py, pz);
       }
     }
-    return new THREE5.Vector3(n.meta?.x ?? 0, n.meta?.y ?? 0, n.meta?.z ?? 0);
+    return new THREE6.Vector3(n.meta?.x ?? 0, n.meta?.y ?? 0, n.meta?.z ?? 0);
   }
   function getBoundaryPoint(angle, t, radius) {
     const y = 0.05 + t * (1 - 0.05);
     const rY = Math.sqrt(1 - y * y);
     const x = Math.cos(angle) * rY;
     const z = Math.sin(angle) * rY;
-    return new THREE5.Vector3(x, y, z).multiplyScalar(radius);
+    return new THREE6.Vector3(x, y, z).multiplyScalar(radius);
+  }
+  function updateChapterLabelAnchors() {
+    if (!starPoints) return;
+    const attr = starPoints.geometry.attributes.position;
+    if (!attr) return;
+    const cameraUpWorld = new THREE6.Vector3(0, 1, 0).applyQuaternion(camera.quaternion).normalize();
+    const cameraRightWorld = new THREE6.Vector3(1, 0, 0).applyQuaternion(camera.quaternion).normalize();
+    for (const item of dynamicLabels) {
+      if (item.node.level !== 3) continue;
+      const idx = starIdToIndex.get(item.node.id);
+      if (idx === void 0) continue;
+      const starPos = new THREE6.Vector3(attr.getX(idx), attr.getY(idx), attr.getZ(idx));
+      const normal = starPos.clone().normalize();
+      const tangent = cameraUpWorld.clone().sub(normal.clone().multiplyScalar(cameraUpWorld.dot(normal)));
+      if (tangent.lengthSq() < 1e-6) {
+        tangent.copy(cameraRightWorld).sub(normal.clone().multiplyScalar(cameraRightWorld.dot(normal)));
+      }
+      if (tangent.lengthSq() < 1e-6) continue;
+      tangent.normalize();
+      const starNorm = item.chapterStarSizeNorm ?? 0.5;
+      const baseSize = item.chapterStarBaseSize ?? 3.5;
+      const altitude = normal.y;
+      const horizonFade = THREE6.MathUtils.smoothstep(altitude, -0.1, 0.05);
+      const mvPos = starPos.clone().applyMatrix4(camera.matrixWorldInverse);
+      const dist = Math.max(1, mvPos.length());
+      const perceptualSize = Math.pow(baseSize, 0.7);
+      const sizeBoost = 1 + Math.pow(baseSize, 0.5) * 0.08;
+      const pointSize = THREE6.MathUtils.clamp(
+        perceptualSize * sizeBoost * 20 * globalUniforms.uScale.value * renderer.getPixelRatio() * (2e3 / dist) * horizonFade,
+        1,
+        600
+      );
+      item.chapterGlowRadiusPx = pointSize * 0.6;
+      const viewportH = Math.max(1, renderer.domElement.clientHeight);
+      const fovRad = state.fov * Math.PI / 180;
+      const worldPerPixel = 2 * dist * Math.tan(fovRad * 0.5) / viewportH;
+      let labelHalfDiagPx = 18;
+      const mat = item.obj.material;
+      if (mat instanceof THREE6.ShaderMaterial && mat.uniforms?.uSize?.value instanceof THREE6.Vector2) {
+        const uAlpha = typeof mat.uniforms.uAlpha?.value === "number" ? mat.uniforms.uAlpha.value : 0;
+        const revealT = THREE6.MathUtils.smoothstep(uAlpha, 0, 1);
+        const revealScale = 0.82 + 0.28 * revealT;
+        const fadeOutScale = 1 + (1 - revealT) * 0.06;
+        const zoomTextBoost = THREE6.MathUtils.lerp(1.4, 0.55, THREE6.MathUtils.smoothstep(state.fov, 8, 46));
+        const starTextBoost = THREE6.MathUtils.lerp(0.9, 1.35, starNorm);
+        const scaleMul = zoomTextBoost * starTextBoost * revealScale * fadeOutScale;
+        const uSize = mat.uniforms.uSize.value;
+        const targetX = item.initialScale.x * scaleMul;
+        const targetY = item.initialScale.y * scaleMul;
+        uSize.x = THREE6.MathUtils.lerp(uSize.x, targetX, 0.2);
+        uSize.y = THREE6.MathUtils.lerp(uSize.y, targetY, 0.2);
+        const size = mat.uniforms.uSize.value;
+        const pixelH = size.y * viewportH * 0.8;
+        const pixelW = size.x * viewportH * 0.8;
+        labelHalfDiagPx = Math.max(6, Math.max(pixelH, pixelW * 0.45) * 0.5);
+      }
+      const edgeMarginPx = THREE6.MathUtils.lerp(1, 3, starNorm);
+      const requiredPx = item.chapterGlowRadiusPx + edgeMarginPx + labelHalfDiagPx;
+      const zoomPush = 1 + (1 - THREE6.MathUtils.smoothstep(state.fov, 8, 30)) * 0.8;
+      const starPush = THREE6.MathUtils.lerp(0.95, 1.2, starNorm);
+      const offset = THREE6.MathUtils.clamp(requiredPx * worldPerPixel * zoomPush * starPush, 3, 76);
+      item.obj.position.copy(starPos);
+      item.obj.position.addScaledVector(tangent, offset);
+      item.obj.position.addScaledVector(normal, 2.5);
+      item.chapterStarWorldPos = starPos.clone();
+    }
+    for (const item of dynamicLabels) {
+      const level = item.node.level;
+      if (level !== 2 && level !== 2.5) continue;
+      const mat = item.obj.material;
+      if (!(mat instanceof THREE6.ShaderMaterial) || !(mat.uniforms?.uSize?.value instanceof THREE6.Vector2)) continue;
+      const entryFov = 22;
+      const zoomBoost = THREE6.MathUtils.lerp(1.3, 0.5, THREE6.MathUtils.smoothstep(state.fov, 8, entryFov));
+      const uAlpha = typeof mat.uniforms.uAlpha?.value === "number" ? mat.uniforms.uAlpha.value : 0;
+      const revealT = THREE6.MathUtils.smoothstep(uAlpha, 0, 1);
+      const revealScale = 0.82 + 0.28 * revealT;
+      const scaleMul = zoomBoost * revealScale;
+      const uSize = mat.uniforms.uSize.value;
+      uSize.x = THREE6.MathUtils.lerp(uSize.x, item.initialScale.x * scaleMul, 0.2);
+      uSize.y = THREE6.MathUtils.lerp(uSize.y, item.initialScale.y * scaleMul, 0.2);
+    }
   }
   function buildFromModel(model, cfg) {
     clearRoot();
     bookIdToIndex.clear();
     testamentToIndex.clear();
     divisionToIndex.clear();
-    scene.background = cfg.background && cfg.background !== "transparent" ? new THREE5.Color(cfg.background) : new THREE5.Color(0);
+    scene.background = cfg.background && cfg.background !== "transparent" ? new THREE6.Color(cfg.background) : null;
     const layoutCfg = { ...cfg.layout, radius: cfg.layout?.radius ?? 2e3 };
     const laidOut = computeLayoutPositions(model, layoutCfg);
     const divisionPositions = /* @__PURE__ */ new Map();
-    if (cfg.arrangement) {
+    {
       const divMap = /* @__PURE__ */ new Map();
       for (const n of laidOut.nodes) {
         if (n.level === 2 && n.parent) {
@@ -1398,7 +2741,7 @@ function createEngine({
         }
       }
       for (const [divId, books] of divMap.entries()) {
-        const centroid = new THREE5.Vector3();
+        const centroid = new THREE6.Vector3();
         let count = 0;
         for (const b of books) {
           const p = getPosition(b);
@@ -1419,20 +2762,25 @@ function createEngine({
     const starChapterIndices = [];
     const starTestamentIndices = [];
     const starDivisionIndices = [];
+    const chapterLineCutById = /* @__PURE__ */ new Map();
+    const chapterStarSizeById = /* @__PURE__ */ new Map();
+    const chapterWeightNormById = /* @__PURE__ */ new Map();
+    let minChapterStarSize = Infinity;
+    let maxChapterStarSize = -Infinity;
     const SPECTRAL_COLORS = [
-      new THREE5.Color(14544639),
+      new THREE6.Color(14544639),
       // O - Blueish White
-      new THREE5.Color(15660287),
+      new THREE6.Color(15660287),
       // B - White
-      new THREE5.Color(16317695),
+      new THREE6.Color(16317695),
       // A - White
-      new THREE5.Color(16777208),
+      new THREE6.Color(16777208),
       // F - White
-      new THREE5.Color(16775406),
+      new THREE6.Color(16775406),
       // G - Yellowish White
-      new THREE5.Color(16773085),
+      new THREE6.Color(16773085),
       // K - Pale Orange
-      new THREE5.Color(16771788)
+      new THREE6.Color(16771788)
       // M - Light Orange
     ];
     let minWeight = Infinity;
@@ -1452,15 +2800,38 @@ function createEngine({
     }
     for (const n of laidOut.nodes) {
       if (n.level === 3) {
-        const p = getPosition(n);
-        starPositions.push(p.x, p.y, p.z);
-        starIndexToId.push(n.id);
         let baseSize = 3.5;
+        let weightNorm = 0;
         if (typeof n.weight === "number") {
-          const t = (n.weight - minWeight) / (maxWeight - minWeight);
-          baseSize = 0.1 + Math.pow(t, 0.5) * 11.9;
+          weightNorm = (n.weight - minWeight) / (maxWeight - minWeight);
+          const sizeExp = cfg.starSizeExponent ?? 4;
+          const sizeScale = cfg.starSizeScale ?? 6;
+          baseSize = Math.pow(weightNorm, sizeExp) * 22 * sizeScale;
         }
+        chapterStarSizeById.set(n.id, baseSize);
+        chapterWeightNormById.set(n.id, weightNorm);
+        minChapterStarSize = Math.min(minChapterStarSize, baseSize);
+        maxChapterStarSize = Math.max(maxChapterStarSize, baseSize);
+      }
+    }
+    if (!Number.isFinite(minChapterStarSize)) {
+      minChapterStarSize = 1;
+      maxChapterStarSize = 2;
+    } else if (minChapterStarSize === maxChapterStarSize) {
+      maxChapterStarSize = minChapterStarSize + 1;
+    }
+    for (const n of laidOut.nodes) {
+      if (n.level === 3) {
+        const p = getPosition(n);
+        starPositions.push(p.x, p.y, p.z);
+        starIdToIndex.set(n.id, starIndexToId.length);
+        starIndexToId.push(n.id);
+        const baseSize = chapterStarSizeById.get(n.id) ?? 3.5;
         starSizes.push(baseSize);
+        chapterLineCutById.set(
+          n.id,
+          THREE6.MathUtils.clamp(2.5 + baseSize * 0.45, 3, 40)
+        );
         const colorIdx = Math.floor(Math.pow(Math.random(), 1.5) * SPECTRAL_COLORS.length);
         const c = SPECTRAL_COLORS[Math.min(colorIdx, SPECTRAL_COLORS.length - 1)];
         starColors.push(c.r, c.g, c.b);
@@ -1511,8 +2882,11 @@ function createEngine({
           let baseScale = 0.05;
           if (n.level === 1) baseScale = 0.08;
           else if (n.level === 2) baseScale = 0.04;
-          else if (n.level === 3) baseScale = 0.03;
-          const size = new THREE5.Vector2(baseScale * texRes.aspect, baseScale);
+          else if (n.level === 3) {
+            const wn2 = chapterWeightNormById.get(n.id) ?? 0;
+            baseScale = THREE6.MathUtils.lerp(0.019, 0.039, wn2);
+          }
+          const size = new THREE6.Vector2(baseScale * texRes.aspect, baseScale);
           const mat = createSmartMaterial({
             uniforms: {
               uMap: { value: texRes.tex },
@@ -1551,39 +2925,59 @@ function createEngine({
                         `,
             transparent: true,
             depthWrite: false,
-            depthTest: true
+            depthTest: n.level === 3 ? false : true
           });
-          const mesh = new THREE5.Mesh(new THREE5.PlaneGeometry(1, 1), mat);
+          const mesh = new THREE6.Mesh(new THREE6.PlaneGeometry(1, 1), mat);
           let p = getPosition(n);
           if (n.level === 1) {
-            if (divisionPositions.has(n.id)) {
-              p.copy(divisionPositions.get(n.id));
+            if (cfg.arrangement?.[n.id]) {
+              const arr = cfg.arrangement[n.id];
+              p.set(arr.position[0], arr.position[1], arr.position[2]);
+            } else {
+              if (divisionPositions.has(n.id)) {
+                p.copy(divisionPositions.get(n.id));
+              }
+              const r = layoutCfg.radius * 0.95;
+              const angle = Math.atan2(p.z, p.x);
+              p.set(r * Math.cos(angle), 150, r * Math.sin(angle));
             }
-            const r = layoutCfg.radius * 0.95;
-            const angle = Math.atan2(p.z, p.x);
-            p.set(r * Math.cos(angle), 150, r * Math.sin(angle));
           } else if (n.level === 3) {
-            p.y += 30;
-            p.multiplyScalar(1.001);
+            const starSize = chapterStarSizeById.get(n.id) ?? 3.5;
+            const starNorm = THREE6.MathUtils.clamp(
+              (starSize - minChapterStarSize) / (maxChapterStarSize - minChapterStarSize),
+              0,
+              1
+            );
+            const radialOffset = THREE6.MathUtils.lerp(16, 46, starNorm);
+            p.addScaledVector(p.clone().normalize(), radialOffset);
           }
           mesh.position.set(p.x, p.y, p.z);
           mesh.scale.set(size.x, size.y, 1);
           mesh.frustumCulled = false;
           mesh.userData = { id: n.id };
           root.add(mesh);
-          dynamicLabels.push({ obj: mesh, node: n, initialScale: size.clone() });
+          const wn = n.level === 3 ? chapterWeightNormById.get(n.id) ?? 0 : 0;
+          const chapterMaxFovBias = n.level === 3 ? THREE6.MathUtils.lerp(-4, 8, wn) : 0;
+          dynamicLabels.push({
+            obj: mesh,
+            node: n,
+            initialScale: size.clone(),
+            maxFovBias: chapterMaxFovBias,
+            chapterStarSizeNorm: n.level === 3 ? wn : void 0,
+            chapterStarBaseSize: n.level === 3 ? chapterStarSizeById.get(n.id) ?? 3.5 : void 0
+          });
         }
       }
     }
-    const starGeo = new THREE5.BufferGeometry();
-    starGeo.setAttribute("position", new THREE5.Float32BufferAttribute(starPositions, 3));
-    starGeo.setAttribute("size", new THREE5.Float32BufferAttribute(starSizes, 1));
-    starGeo.setAttribute("color", new THREE5.Float32BufferAttribute(starColors, 3));
-    starGeo.setAttribute("phase", new THREE5.Float32BufferAttribute(starPhases, 1));
-    starGeo.setAttribute("bookIndex", new THREE5.Float32BufferAttribute(starBookIndices, 1));
-    starGeo.setAttribute("chapterIndex", new THREE5.Float32BufferAttribute(starChapterIndices, 1));
-    starGeo.setAttribute("testamentIndex", new THREE5.Float32BufferAttribute(starTestamentIndices, 1));
-    starGeo.setAttribute("divisionIndex", new THREE5.Float32BufferAttribute(starDivisionIndices, 1));
+    const starGeo = new THREE6.BufferGeometry();
+    starGeo.setAttribute("position", new THREE6.Float32BufferAttribute(starPositions, 3));
+    starGeo.setAttribute("size", new THREE6.Float32BufferAttribute(starSizes, 1));
+    starGeo.setAttribute("color", new THREE6.Float32BufferAttribute(starColors, 3));
+    starGeo.setAttribute("phase", new THREE6.Float32BufferAttribute(starPhases, 1));
+    starGeo.setAttribute("bookIndex", new THREE6.Float32BufferAttribute(starBookIndices, 1));
+    starGeo.setAttribute("chapterIndex", new THREE6.Float32BufferAttribute(starChapterIndices, 1));
+    starGeo.setAttribute("testamentIndex", new THREE6.Float32BufferAttribute(starTestamentIndices, 1));
+    starGeo.setAttribute("divisionIndex", new THREE6.Float32BufferAttribute(starDivisionIndices, 1));
     const starMat = createSmartMaterial({
       uniforms: {
         pixelRatio: { value: renderer.getPixelRatio() },
@@ -1592,7 +2986,7 @@ function createEngine({
         uActiveBookIndex: { value: -1 },
         uOrderRevealStrength: { value: 0 },
         uGlobalDimFactor: { value: ORDER_REVEAL_CONFIG.globalDim },
-        uPulseParams: { value: new THREE5.Vector3(
+        uPulseParams: { value: new THREE6.Vector3(
           ORDER_REVEAL_CONFIG.pulseDuration,
           ORDER_REVEAL_CONFIG.delayPerChapter,
           ORDER_REVEAL_CONFIG.pulseAmplitude
@@ -1613,6 +3007,7 @@ function createEngine({
                 attribute float divisionIndex;
 
                 varying vec3 vColor;
+                varying float vSize;
                 uniform float pixelRatio;
 
                 uniform float uTime;
@@ -1685,41 +3080,159 @@ function createEngine({
                     gl_Position = smartProject(mvPosition); 
                     vScreenPos = gl_Position.xy / gl_Position.w; 
                     
-                    float sizeBoost = 1.0 + activePulse * 0.8;
-                    float perceptualSize = pow(size, 0.55);
-                    gl_PointSize = clamp((perceptualSize * sizeBoost * 1.5) * uScale * pixelRatio * (2000.0 / -mvPosition.z) * horizonFade, 1.0, 40.0); 
+                    float sizeBoost = 1.0 + activePulse * 0.15;
+                    // pow(size, 0.7) is gentler compression than 0.55 \u2014 preserves more of
+                    // the aggressive JS curve so large stars stay visually dominant.
+                    float perceptualSize = pow(size, 0.7);
+                    gl_PointSize = clamp((perceptualSize * sizeBoost * 20.0) * uScale * pixelRatio * (2000.0 / length(mvPosition.xyz)) * horizonFade, 1.0, 600.0);
+                    vSize = gl_PointSize;
                 }
             `,
       fragmentShader: `
-                varying vec3 vColor; 
-                void main() { 
-                    vec2 coord = gl_PointCoord - vec2(0.5); 
-                    float d = length(coord) * 2.0; 
-                    if (d > 1.0) discard; 
-                    
-                    float alphaMask = getMaskAlpha(); 
-                    if (alphaMask < 0.01) discard; 
-                    
-                    // Stellarium-style dual-layer: sharp core + soft glow
-                    float core = smoothstep(0.8, 0.4, d);
-                    float glow = smoothstep(1.0, 0.0, d) * 0.08;
-                    float k = core + glow;
+                varying vec3 vColor;
+                varying float vSize;
+                void main() {
+                    vec2 coord = gl_PointCoord - vec2(0.5);
+                    float d = length(coord) * 2.0;
+                    if (d > 1.0) discard;
+
+                    float alphaMask = getMaskAlpha();
+                    if (alphaMask < 0.01) discard;
+
+                    // --- Multi-layer Gaussian star model ---
+                    // Tight white-hot core
+                    float core      = exp(-d * d * 9.0);
+                    // Broader coloured inner halo
+                    float innerGlow = exp(-d * d * 3.0) * 0.45;
+                    // Wide faint bloom that fades smoothly to the disc edge
+                    float outerBloom = max(0.0, 1.0 - d * d) * 0.10;
+
+                    float k = core + innerGlow + outerBloom;
+
+                    // White-hot centre \u2192 spectral colour at the halo
+                    vec3 finalColor = mix(vColor, vec3(1.0), core * 0.88);
+
+                    // --- Size-dependent diffraction spikes ---
+                    // Only appear on larger (brighter) stars, matching real optics.
+                    float spikeFactor = smoothstep(10.0, 24.0, vSize);
+                    float spikeH = exp(-coord.y * coord.y * 180.0) * exp(-abs(coord.x) * 6.0);
+                    float spikeV = exp(-coord.x * coord.x * 180.0) * exp(-abs(coord.y) * 6.0);
+                    float spikes = (spikeH + spikeV) * 0.18 * spikeFactor;
 
-                    // White-hot core blending into coloured halo
-                    vec3 finalColor = mix(vColor, vec3(1.0), core * 0.7);
-                    gl_FragColor = vec4(finalColor * k * alphaMask, 1.0); 
+                    gl_FragColor = vec4(finalColor * (k + spikes) * alphaMask, 1.0);
                 }
             `,
       transparent: true,
       depthWrite: false,
       depthTest: true,
-      blending: THREE5.AdditiveBlending
+      blending: THREE6.AdditiveBlending
     });
-    starPoints = new THREE5.Points(starGeo, starMat);
+    starPoints = new THREE6.Points(starGeo, starMat);
     starPoints.frustumCulled = false;
     root.add(starPoints);
     const linePoints = [];
+    const lineWeights = [];
+    const seenEdges = /* @__PURE__ */ new Set();
     const bookMap = /* @__PURE__ */ new Map();
+    const parseBookKeyFromChapterId = (id) => {
+      if (!id) return null;
+      const parts = id.split(":");
+      if (parts.length < 3 || parts[0] !== "C") return null;
+      return parts[1] || null;
+    };
+    const weightScaleFromLabel = (weight) => {
+      if (weight === "thin") return 0.65;
+      if (weight === "bold") return 1.6;
+      return 1;
+    };
+    const edgeKey = (aNodeId, bNodeId) => aNodeId < bNodeId ? `${aNodeId}|${bNodeId}` : `${bNodeId}|${aNodeId}`;
+    const addTruncatedSegment = (aNodeId, bNodeId, weightScale) => {
+      if (aNodeId === bNodeId) return;
+      const k = edgeKey(aNodeId, bNodeId);
+      if (seenEdges.has(k)) return;
+      seenEdges.add(k);
+      const aNode = nodeById.get(aNodeId);
+      const bNode = nodeById.get(bNodeId);
+      if (!aNode || !bNode) return;
+      const p1 = getPosition(aNode);
+      const p2 = getPosition(bNode);
+      const dir = new THREE6.Vector3().subVectors(p2, p1);
+      const len = dir.length();
+      if (len < 1e-3) return;
+      dir.divideScalar(len);
+      let cutA = chapterLineCutById.get(aNodeId) ?? 4;
+      let cutB = chapterLineCutById.get(bNodeId) ?? 4;
+      const maxTotalCut = len * 0.8;
+      const totalCut = cutA + cutB;
+      if (totalCut > maxTotalCut && totalCut > 0) {
+        const scale = maxTotalCut / totalCut;
+        cutA *= scale;
+        cutB *= scale;
+      }
+      const a = p1.clone().addScaledVector(dir, cutA);
+      const b = p2.clone().addScaledVector(dir, -cutB);
+      linePoints.push(a.x, a.y, a.z);
+      linePoints.push(b.x, b.y, b.z);
+      lineWeights.push(weightScale);
+    };
+    const customBooks = /* @__PURE__ */ new Set();
+    const rawConstellations = cfg.constellations && Array.isArray(cfg.constellations.constellations) ? cfg.constellations.constellations : [];
+    for (const c of rawConstellations) {
+      const linePaths = Array.isArray(c?.linePaths) ? c.linePaths : [];
+      const lineSegments = Array.isArray(c?.lineSegments) ? c.lineSegments : [];
+      if (linePaths.length === 0 && lineSegments.length === 0) continue;
+      const anchorBookKey = parseBookKeyFromChapterId(c?.anchors?.[0]);
+      if (anchorBookKey) customBooks.add(anchorBookKey);
+      for (const segDef of lineSegments) {
+        let from;
+        let to;
+        let weightLabel;
+        if (Array.isArray(segDef)) {
+          const raw = segDef;
+          if (typeof raw[0] === "string" && (raw[0] === "thin" || raw[0] === "bold" || raw[0] === "normal")) {
+            weightLabel = raw[0];
+            from = typeof raw[1] === "string" ? raw[1] : void 0;
+            to = typeof raw[2] === "string" ? raw[2] : void 0;
+          } else {
+            from = typeof raw[0] === "string" ? raw[0] : void 0;
+            to = typeof raw[1] === "string" ? raw[1] : void 0;
+          }
+        } else if (segDef) {
+          from = typeof segDef.from === "string" ? segDef.from : void 0;
+          to = typeof segDef.to === "string" ? segDef.to : void 0;
+          weightLabel = typeof segDef.weight === "string" ? segDef.weight : void 0;
+        }
+        if (!from || !to) continue;
+        const k1 = parseBookKeyFromChapterId(from);
+        const k2 = parseBookKeyFromChapterId(to);
+        if (k1) customBooks.add(k1);
+        if (k2) customBooks.add(k2);
+        addTruncatedSegment(from, to, weightScaleFromLabel(weightLabel));
+      }
+      for (const pathDef of linePaths) {
+        let nodes = [];
+        let weightLabel = void 0;
+        if (Array.isArray(pathDef)) {
+          const raw = pathDef;
+          if (typeof raw[0] === "string" && (raw[0] === "thin" || raw[0] === "bold" || raw[0] === "normal")) {
+            weightLabel = raw[0];
+            nodes = raw.slice(1).filter((v) => typeof v === "string");
+          } else {
+            nodes = raw.filter((v) => typeof v === "string");
+          }
+        } else if (pathDef && Array.isArray(pathDef.nodes)) {
+          nodes = pathDef.nodes.filter((v) => typeof v === "string");
+          weightLabel = typeof pathDef.weight === "string" ? pathDef.weight : void 0;
+        }
+        if (nodes.length < 2) continue;
+        const inferredBookKey = parseBookKeyFromChapterId(nodes[0]);
+        if (inferredBookKey) customBooks.add(inferredBookKey);
+        const w = weightScaleFromLabel(weightLabel);
+        for (let i = 0; i < nodes.length - 1; i++) {
+          addTruncatedSegment(nodes[i], nodes[i + 1], w);
+        }
+      }
+    }
     for (const n of laidOut.nodes) {
       if (n.level === 3 && n.parent) {
         const list = bookMap.get(n.parent) ?? [];
@@ -1730,24 +3243,27 @@ function createEngine({
     for (const chapters of bookMap.values()) {
       chapters.sort((a, b) => (a.meta?.chapter || 0) - (b.meta?.chapter || 0));
       if (chapters.length < 2) continue;
+      const bookKey = chapters[0]?.meta?.bookKey ?? null;
+      if (bookKey && customBooks.has(bookKey)) continue;
       for (let i = 0; i < chapters.length - 1; i++) {
         const c1 = chapters[i];
         const c2 = chapters[i + 1];
         if (!c1 || !c2) continue;
-        const p1 = getPosition(c1);
-        const p2 = getPosition(c2);
-        linePoints.push(p1.x, p1.y, p1.z);
-        linePoints.push(p2.x, p2.y, p2.z);
+        addTruncatedSegment(c1.id, c2.id, 1);
       }
     }
     if (linePoints.length > 0) {
       const quadPositions = [];
       const quadUvs = [];
+      const quadLineWeight = [];
+      const quadSegmentIndex = [];
       const quadIndices = [];
       const lineWidth = 8;
+      const segmentCount = linePoints.length / 6;
       for (let i = 0; i < linePoints.length; i += 6) {
         const ax = linePoints[i], ay = linePoints[i + 1], az = linePoints[i + 2];
         const bx = linePoints[i + 3], by = linePoints[i + 4], bz = linePoints[i + 5];
+        const segIndex = i / 6;
         const dx = bx - ax, dy = by - ay, dz = bz - az;
         const len = Math.sqrt(dx * dx + dy * dy + dz * dz);
         if (len < 1e-3) continue;
@@ -1772,23 +3288,36 @@ function createEngine({
         quadUvs.push(1, -1);
         quadPositions.push(bx + px * hw, by + py * hw, bz + pz * hw);
         quadUvs.push(1, 1);
+        const w = lineWeights[segIndex] ?? 1;
+        quadLineWeight.push(w, w, w, w);
+        quadSegmentIndex.push(segIndex, segIndex, segIndex, segIndex);
         quadIndices.push(baseIdx, baseIdx + 1, baseIdx + 2, baseIdx + 1, baseIdx + 3, baseIdx + 2);
       }
-      const lineGeo = new THREE5.BufferGeometry();
-      lineGeo.setAttribute("position", new THREE5.Float32BufferAttribute(quadPositions, 3));
-      lineGeo.setAttribute("lineUv", new THREE5.Float32BufferAttribute(quadUvs, 2));
+      const lineGeo = new THREE6.BufferGeometry();
+      lineGeo.setAttribute("position", new THREE6.Float32BufferAttribute(quadPositions, 3));
+      lineGeo.setAttribute("lineUv", new THREE6.Float32BufferAttribute(quadUvs, 2));
+      lineGeo.setAttribute("lineWeight", new THREE6.Float32BufferAttribute(quadLineWeight, 1));
+      lineGeo.setAttribute("segmentIndex", new THREE6.Float32BufferAttribute(quadSegmentIndex, 1));
       lineGeo.setIndex(quadIndices);
       const lineMat = createSmartMaterial({
         uniforms: {
-          color: { value: new THREE5.Color(11193599) },
+          color: { value: new THREE6.Color(11193599) },
           uLineWidth: { value: 1.5 },
-          uGlowIntensity: { value: 0.3 }
+          uGlowIntensity: { value: 0.3 },
+          uReveal: { value: 0 },
+          uSegmentCount: { value: Math.max(1, segmentCount) }
         },
         vertexShaderBody: `
                     attribute vec2 lineUv;
+                    attribute float lineWeight;
+                    attribute float segmentIndex;
                     varying vec2 vLineUv;
+                    varying float vLineWeight;
+                    varying float vSegmentIndex;
                     void main() {
                         vLineUv = lineUv;
+                        vLineWeight = lineWeight;
+                        vSegmentIndex = segmentIndex;
                         vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
                         gl_Position = smartProject(mvPosition);
                         vScreenPos = gl_Position.xy / gl_Position.w;
@@ -1798,32 +3327,53 @@ function createEngine({
                     uniform vec3 color;
                     uniform float uLineWidth;
                     uniform float uGlowIntensity;
+                    uniform float uReveal;
+                    uniform float uSegmentCount;
                     varying vec2 vLineUv;
+                    varying float vLineWeight;
+                    varying float vSegmentIndex;
                     void main() {
                         float alphaMask = getMaskAlpha();
                         if (alphaMask < 0.01) discard;
 
+                        // Progressive line draw tuned closer to Stellarium feel:
+                        // - eased global reveal
+                        // - sequential segment staggering with slight overlap
+                        // - smooth growth of each segment endpoint
+                        float reveal = smoothstep(0.0, 1.0, uReveal);
+                        float segCount = max(uSegmentCount, 1.0);
+                        float segStart = vSegmentIndex / segCount;
+                        float segSpan = (1.25 / segCount) + 0.04;
+                        float localReveal = clamp((reveal - segStart) / segSpan, 0.0, 1.0);
+                        localReveal = smoothstep(0.0, 1.0, localReveal);
+
+                        // Keep fragment only when x is before the animated endpoint.
+                        float endpointMask = 1.0 - smoothstep(localReveal - 0.03, localReveal + 0.02, vLineUv.x);
+                        // Fade in segment brightness as it begins drawing.
+                        float drawMask = endpointMask * smoothstep(0.0, 0.08, localReveal);
+                        if (drawMask < 0.001) discard;
+
                         float dist = abs(vLineUv.y);
 
                         // Anti-aliased core line
-                        float hw = uLineWidth * 0.05;
+                        float hw = (uLineWidth * vLineWeight) * 0.05;
                         float base = smoothstep(hw + 0.08, hw - 0.08, dist);
 
                         // Soft glow extending outward
-                        float glow = (1.0 - dist) * uGlowIntensity;
+                        float glow = (1.0 - dist) * uGlowIntensity * vLineWeight;
 
                         float alpha = max(glow, base);
                         if (alpha < 0.005) discard;
 
-                        gl_FragColor = vec4(color, alpha * alphaMask);
+                        gl_FragColor = vec4(color, alpha * alphaMask * drawMask);
                     }
                 `,
         transparent: true,
         depthWrite: false,
-        blending: THREE5.AdditiveBlending,
-        side: THREE5.DoubleSide
+        blending: THREE6.AdditiveBlending,
+        side: THREE6.DoubleSide
       });
-      constellationLines = new THREE5.Mesh(lineGeo, lineMat);
+      constellationLines = new THREE6.Mesh(lineGeo, lineMat);
       constellationLines.frustumCulled = false;
       root.add(constellationLines);
     }
@@ -1836,7 +3386,7 @@ function createEngine({
         if (groupList) {
           groupList.forEach((g, idx) => {
             const groupId = `G:${bookId}:${idx}`;
-            let p = new THREE5.Vector3();
+            let p = new THREE6.Vector3();
             if (cfg.arrangement && cfg.arrangement[groupId]) {
               const arr = cfg.arrangement[groupId];
               p.set(arr.position[0], arr.position[1], arr.position[2]);
@@ -1855,7 +3405,7 @@ function createEngine({
             const texRes = createTextTexture(labelText, "#4fa4fa80");
             if (texRes) {
               const baseScale = 0.036;
-              const size = new THREE5.Vector2(baseScale * texRes.aspect, baseScale);
+              const size = new THREE6.Vector2(baseScale * texRes.aspect, baseScale);
               const mat = createSmartMaterial({
                 uniforms: {
                   uMap: { value: texRes.tex },
@@ -1896,7 +3446,7 @@ function createEngine({
                 depthWrite: false,
                 depthTest: true
               });
-              const mesh = new THREE5.Mesh(new THREE5.PlaneGeometry(1, 1), mat);
+              const mesh = new THREE6.Mesh(new THREE6.PlaneGeometry(1, 1), mat);
               mesh.position.copy(p);
               mesh.scale.set(size.x, size.y, 1);
               mesh.frustumCulled = false;
@@ -1918,14 +3468,14 @@ function createEngine({
     const boundaries = laidOut.meta?.divisionBoundaries ?? [];
     if (boundaries.length > 0) {
       const boundaryMat = createSmartMaterial({
-        uniforms: { color: { value: new THREE5.Color(5601177) } },
+        uniforms: { color: { value: new THREE6.Color(5601177) } },
         vertexShaderBody: `uniform vec3 color; varying vec3 vColor; void main() { vColor = color; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_Position = smartProject(mvPosition); vScreenPos = gl_Position.xy / gl_Position.w; }`,
         fragmentShader: `varying vec3 vColor; void main() { float alphaMask = getMaskAlpha(); if (alphaMask < 0.01) discard; gl_FragColor = vec4(vColor, 0.10 * alphaMask); }`,
         transparent: true,
         depthWrite: false,
-        blending: THREE5.AdditiveBlending
+        blending: THREE6.AdditiveBlending
       });
-      const boundaryGeo = new THREE5.BufferGeometry();
+      const boundaryGeo = new THREE6.BufferGeometry();
       const bPoints = [];
       boundaries.forEach((angle) => {
         const steps = 32;
@@ -1938,8 +3488,8 @@ function createEngine({
           bPoints.push(p2.x, p2.y, p2.z);
         }
       });
-      boundaryGeo.setAttribute("position", new THREE5.Float32BufferAttribute(bPoints, 3));
-      boundaryLines = new THREE5.LineSegments(boundaryGeo, boundaryMat);
+      boundaryGeo.setAttribute("position", new THREE6.Float32BufferAttribute(bPoints, 3));
+      boundaryLines = new THREE6.LineSegments(boundaryGeo, boundaryMat);
       boundaryLines.frustumCulled = false;
       root.add(boundaryLines);
     }
@@ -1958,7 +3508,7 @@ function createEngine({
             const r_norm = Math.sqrt(x * x + y * y);
             const phi = Math.atan2(y, x);
             const theta = r_norm * (Math.PI / 2);
-            return new THREE5.Vector3(
+            return new THREE6.Vector3(
               Math.sin(theta) * Math.cos(phi),
               Math.cos(theta),
               Math.sin(theta) * Math.sin(phi)
@@ -1971,22 +3521,23 @@ function createEngine({
         }
       }
       if (polyPoints.length > 0) {
-        const polyGeo = new THREE5.BufferGeometry();
-        polyGeo.setAttribute("position", new THREE5.Float32BufferAttribute(polyPoints, 3));
+        const polyGeo = new THREE6.BufferGeometry();
+        polyGeo.setAttribute("position", new THREE6.Float32BufferAttribute(polyPoints, 3));
         const polyMat = createSmartMaterial({
-          uniforms: { color: { value: new THREE5.Color(3718648) } },
+          uniforms: { color: { value: new THREE6.Color(3718648) } },
           // Cyan-ish
           vertexShaderBody: `uniform vec3 color; varying vec3 vColor; void main() { vColor = color; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_Position = smartProject(mvPosition); vScreenPos = gl_Position.xy / gl_Position.w; }`,
           fragmentShader: `varying vec3 vColor; void main() { float alphaMask = getMaskAlpha(); if (alphaMask < 0.01) discard; gl_FragColor = vec4(vColor, 0.2 * alphaMask); }`,
           transparent: true,
           depthWrite: false,
-          blending: THREE5.AdditiveBlending
+          blending: THREE6.AdditiveBlending
         });
-        const polyLines = new THREE5.LineSegments(polyGeo, polyMat);
+        const polyLines = new THREE6.LineSegments(polyGeo, polyMat);
         polyLines.frustumCulled = false;
         root.add(polyLines);
       }
     }
+    labelManager.setLabels(dynamicLabels);
     resize();
   }
   let lastData = void 0;
@@ -2007,6 +3558,10 @@ function createEngine({
   }
   function setConfig(cfg) {
     currentConfig = cfg;
+    applyGroundTheme(cfg);
+    const externalFocusId = cfg.focus?.nodeId;
+    if (typeof externalFocusId === "string") focusedNodeId = externalFocusId;
+    if (externalFocusId === null) focusedNodeId = null;
     if (cfg.projection) setProjection(cfg.projection);
     if (typeof cfg.camera?.lon === "number" && cfg.camera.lon !== lastAppliedLon) {
       state.lon = cfg.camera.lon;
@@ -2047,6 +3602,25 @@ function createEngine({
       if (lastModel) buildFromModel(lastModel, cfg);
     }
     if (cfg.constellations) {
+      const getLayoutPosition = (id) => {
+        const n = nodeById.get(id);
+        if (!n) return null;
+        const x = n.meta?.x ?? 0;
+        const y = n.meta?.y ?? 0;
+        const z = n.meta?.z ?? 0;
+        if (z === 0) {
+          const radius = cfg.layout?.radius ?? 2e3;
+          const r_norm = Math.min(1, Math.sqrt(x * x + y * y) / radius);
+          const phi = Math.atan2(y, x);
+          const theta = r_norm * (Math.PI / 2);
+          return new THREE6.Vector3(
+            Math.sin(theta) * Math.cos(phi),
+            Math.cos(theta),
+            Math.sin(theta) * Math.sin(phi)
+          ).multiplyScalar(radius);
+        }
+        return new THREE6.Vector3(x, y, z);
+      };
       constellationLayer.load(cfg.constellations, (id) => {
         if (cfg.arrangement && cfg.arrangement[id]) {
           const arr = cfg.arrangement[id];
@@ -2057,17 +3631,16 @@ function createEngine({
             const r_norm = Math.min(1, Math.sqrt(x * x + y * y) / radius);
             const phi = Math.atan2(y, x);
             const theta = r_norm * (Math.PI / 2);
-            return new THREE5.Vector3(
+            return new THREE6.Vector3(
               Math.sin(theta) * Math.cos(phi),
               Math.cos(theta),
               Math.sin(theta) * Math.sin(phi)
             ).multiplyScalar(radius);
           }
-          return new THREE5.Vector3(arr.position[0], arr.position[1], arr.position[2]);
+          return new THREE6.Vector3(arr.position[0], arr.position[1], arr.position[2]);
         }
-        const n = nodeById.get(id);
-        return n ? getPosition(n) : null;
-      });
+        return getLayoutPosition(id);
+      }, getLayoutPosition);
     }
   }
   function setHandlers(next) {
@@ -2092,7 +3665,7 @@ function createEngine({
       arr[item.node.id] = { position: [item.obj.position.x, item.obj.position.y, item.obj.position.z] };
     }
     for (const item of constellationLayer.getItems()) {
-      arr[item.config.id] = { position: [item.mesh.position.x, item.mesh.position.y, item.mesh.position.z] };
+      arr[item.config.id] = { position: [item.center.x, item.center.y, item.center.z] };
     }
     Object.assign(arr, state.tempArrangement);
     return arr;
@@ -2116,60 +3689,70 @@ function createEngine({
     const uAspect = camera.aspect;
     const w = rect.width;
     const h = rect.height;
-    let closestLabel = null;
-    const LABEL_THRESHOLD = isTouchDevice ? 48 : 40;
-    let minLabelDist = LABEL_THRESHOLD;
-    for (const item of dynamicLabels) {
-      if (!item.obj.visible) continue;
-      if (isNodeFiltered(item.node)) continue;
-      const pWorld = item.obj.position;
-      const pProj = smartProjectJS(pWorld);
-      if (currentProjection.isClipped(pProj.z)) continue;
-      const xNDC = pProj.x * uScale / uAspect;
-      const yNDC = pProj.y * uScale;
-      const sX = (xNDC * 0.5 + 0.5) * w;
-      const sY = (-yNDC * 0.5 + 0.5) * h;
-      const dx = mX - sX;
-      const dy = mY - sY;
-      const d = Math.sqrt(dx * dx + dy * dy);
-      if (d < minLabelDist) {
-        minLabelDist = d;
-        closestLabel = item;
+    const isEditMode = currentConfig?.editable ?? false;
+    function pickLabel(threshold) {
+      let closest = null;
+      let minDist = threshold;
+      for (const item of dynamicLabels) {
+        if (!item.obj.visible) continue;
+        if (isNodeFiltered(item.node)) continue;
+        const labelMat = item.obj.material;
+        if ((labelMat?.uniforms?.uAlpha?.value ?? 0) < 0.1) continue;
+        const pWorld = item.obj.position;
+        const pProj = smartProjectJS(pWorld);
+        if (currentProjection.isClipped(pProj.z)) continue;
+        const xNDC = pProj.x * uScale / uAspect;
+        const yNDC = pProj.y * uScale;
+        const sX = (xNDC * 0.5 + 0.5) * w;
+        const sY = (-yNDC * 0.5 + 0.5) * h;
+        const d = Math.sqrt((mX - sX) ** 2 + (mY - sY) ** 2);
+        if (d < minDist) {
+          minDist = d;
+          closest = item;
+        }
       }
+      return closest;
     }
+    if (isEditMode) {
+      if (starPoints) {
+        const worldDir = getMouseWorldVector(mX, mY, rect.width, rect.height);
+        raycaster.ray.origin.set(0, 0, 0);
+        raycaster.ray.direction.copy(worldDir);
+        raycaster.params.Points.threshold = 65 * (state.fov / 60);
+        const hits = raycaster.intersectObject(starPoints, false);
+        const pointHit = hits[0];
+        if (pointHit && pointHit.index !== void 0) {
+          const id = starIndexToId[pointHit.index];
+          if (id) {
+            const node = nodeById.get(id);
+            if (node && !isNodeFiltered(node)) {
+              const attr = starPoints.geometry.attributes.position;
+              const starPos = new THREE6.Vector3(attr.getX(pointHit.index), attr.getY(pointHit.index), attr.getZ(pointHit.index));
+              return { type: "star", node, index: pointHit.index, point: starPos, object: void 0 };
+            }
+          }
+        }
+      }
+      const editLabel = pickLabel(isTouchDevice ? 48 : 32);
+      if (editLabel) {
+        return { type: "label", node: editLabel.node, object: editLabel.obj, point: editLabel.obj.position.clone(), index: void 0 };
+      }
+      return void 0;
+    }
+    const closestLabel = pickLabel(isTouchDevice ? 48 : 40);
     if (closestLabel) {
       return { type: "label", node: closestLabel.node, object: closestLabel.obj, point: closestLabel.obj.position.clone(), index: void 0 };
     }
     let closestConst = null;
     let minConstDist = Infinity;
+    const artWorldDir = getMouseWorldVector(mX, mY, rect.width, rect.height);
+    raycaster.ray.origin.set(0, 0, 0);
+    raycaster.ray.direction.copy(artWorldDir);
     for (const item of constellationLayer.getItems()) {
       if (!item.mesh.visible) continue;
-      const pWorld = item.mesh.position;
-      const pProj = smartProjectJS(pWorld);
-      if (currentProjection.isClipped(pProj.z)) continue;
-      const uniforms = item.material.uniforms;
-      if (!uniforms || !uniforms.uSize) continue;
-      const uSize = uniforms.uSize.value;
-      const uImgAspect = uniforms.uImgAspect.value;
-      const uImgRotation = uniforms.uImgRotation.value;
-      const dist = pWorld.length();
-      if (dist < 1e-3) continue;
-      const scale = uSize / dist * uScale;
-      const halfH_px = scale / 2 * (h / 2);
-      const halfW_px = halfH_px * uImgAspect;
-      const xNDC = pProj.x * uScale / uAspect;
-      const yNDC = pProj.y * uScale;
-      const sX = (xNDC * 0.5 + 0.5) * w;
-      const sY = (-yNDC * 0.5 + 0.5) * h;
-      const dx = mX - sX;
-      const dy = mY - sY;
-      const dy_cart = -dy;
-      const cr = Math.cos(-uImgRotation);
-      const sr = Math.sin(-uImgRotation);
-      const localX = dx * cr - dy_cart * sr;
-      const localY = dx * sr + dy_cart * cr;
-      if (Math.abs(localX) < halfW_px * 1.2 && Math.abs(localY) < halfH_px * 1.2) {
-        const d = Math.sqrt(dx * dx + dy * dy);
+      const hits = raycaster.intersectObject(item.mesh, false);
+      if (hits.length > 0) {
+        const d = hits[0].distance;
         if (!closestConst || d < minConstDist) {
           minConstDist = d;
           closestConst = item;
@@ -2182,7 +3765,7 @@ function createEngine({
         label: closestConst.config.title,
         level: -1
       };
-      return { type: "constellation", node: fakeNode, object: closestConst.mesh, point: closestConst.mesh.position.clone(), index: void 0 };
+      return { type: "constellation", node: fakeNode, object: closestConst.mesh, point: closestConst.center.clone(), index: void 0 };
     }
     if (starPoints) {
       const worldDir = getMouseWorldVector(mX, mY, rect.width, rect.height);
@@ -2213,11 +3796,20 @@ function createEngine({
       if (hit) {
         state.dragMode = "node";
         state.draggedNodeId = hit.node.id;
-        state.draggedDist = hit.point.length();
+        if (hit.type === "star" && hit.index !== void 0 && starPoints) {
+          const attr = starPoints.geometry.attributes.position;
+          const starWorldPos = new THREE6.Vector3(attr.getX(hit.index), attr.getY(hit.index), attr.getZ(hit.index));
+          state.draggedDist = starWorldPos.length();
+        } else {
+          state.draggedDist = hit.point.length();
+        }
         document.body.style.cursor = "crosshair";
+        state.velocityX = 0;
+        state.velocityY = 0;
         if (hit.type === "star") {
           state.draggedStarIndex = hit.index ?? -1;
           state.draggedGroup = null;
+          state.tempArrangement = {};
         } else if (hit.type === "label") {
           const bookId = hit.node.id;
           const children = [];
@@ -2228,7 +3820,7 @@ function createEngine({
               if (starId) {
                 const starNode = nodeById.get(starId);
                 if (starNode && starNode.parent === bookId) {
-                  children.push({ index: i, initialPos: new THREE5.Vector3(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]) });
+                  children.push({ index: i, initialPos: new THREE6.Vector3(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]) });
                 }
               }
             }
@@ -2236,7 +3828,7 @@ function createEngine({
           state.draggedGroup = { labelInitialPos: hit.object.position.clone(), children };
           state.draggedStarIndex = -1;
         } else if (hit.type === "constellation") {
-          state.draggedGroup = null;
+          state.draggedGroup = { labelInitialPos: hit.point.clone(), children: [] };
           state.draggedStarIndex = -1;
         }
       }
@@ -2265,6 +3857,9 @@ function createEngine({
         const attr = starPoints.geometry.attributes.position;
         attr.setXYZ(idx, newPos.x, newPos.y, newPos.z);
         attr.needsUpdate = true;
+        editHoverTargetPos = newPos.clone();
+        const starId = starIndexToId[idx];
+        if (starId) state.tempArrangement[starId] = { position: [newPos.x, newPos.y, newPos.z] };
       } else if (state.draggedGroup && state.draggedNodeId) {
         const group = state.draggedGroup;
         const item = dynamicLabels.find((l) => l.node.id === state.draggedNodeId);
@@ -2274,16 +3869,19 @@ function createEngine({
         } else if (state.draggedNodeId) {
           const cItem = constellationLayer.getItems().find((c) => c.config.id === state.draggedNodeId);
           if (cItem) {
-            cItem.mesh.position.copy(newPos);
+            const vS = group.labelInitialPos.clone().normalize();
+            const vE = newPos.clone().normalize();
+            cItem.mesh.quaternion.setFromUnitVectors(vS, vE);
+            cItem.center.copy(newPos);
             state.tempArrangement[state.draggedNodeId] = { position: [newPos.x, newPos.y, newPos.z] };
           }
         }
         const vStart = group.labelInitialPos.clone().normalize();
         const vEnd = newPos.clone().normalize();
-        const q = new THREE5.Quaternion().setFromUnitVectors(vStart, vEnd);
+        const q = new THREE6.Quaternion().setFromUnitVectors(vStart, vEnd);
         if (starPoints && group.children.length > 0) {
           const attr = starPoints.geometry.attributes.position;
-          const tempVec = new THREE5.Vector3();
+          const tempVec = new THREE6.Vector3();
           for (const child of group.children) {
             tempVec.copy(child.initialPos).applyQuaternion(q);
             attr.setXYZ(child.index, tempVec.x, tempVec.y, tempVec.z);
@@ -2319,7 +3917,7 @@ function createEngine({
           if (res) {
             hoverLabelMat.uniforms.uMap.value = res.tex;
             const baseScale = 0.03;
-            const size = new THREE5.Vector2(baseScale * res.aspect, baseScale);
+            const size = new THREE6.Vector2(baseScale * res.aspect, baseScale);
             hoverLabelMat.uniforms.uSize.value = size;
             hoverLabelMesh.scale.set(size.x, size.y, 1);
           }
@@ -2327,10 +3925,19 @@ function createEngine({
         hoverLabelMesh.position.copy(hit.point);
         hoverLabelMat.uniforms.uAlpha.value = 1;
         hoverLabelMesh.visible = true;
+        if (currentConfig?.editable && hit.type === "star" && hit.index !== void 0 && starPoints) {
+          const attr = starPoints.geometry.attributes.position;
+          editHoverTargetPos = new THREE6.Vector3(attr.getX(hit.index), attr.getY(hit.index), attr.getZ(hit.index));
+        } else if (currentConfig?.editable && hit.type === "star") {
+          editHoverTargetPos = hit.point.clone();
+        }
       } else {
         currentHoverNodeId = null;
         hoverLabelMat.uniforms.uAlpha.value = 0;
         hoverLabelMesh.visible = false;
+        if (currentConfig?.editable && state.dragMode !== "node") {
+          editHoverTargetPos = null;
+        }
       }
       if (hit?.node.id !== handlers._lastHoverId) {
         handlers._lastHoverId = hit?.node.id;
@@ -2347,6 +3954,7 @@ function createEngine({
     if (state.dragMode === "node") {
       const fullArr = getFullArrangement();
       handlers.onArrangementChange?.(fullArr);
+      editDropFlash = 1;
       state.dragMode = "none";
       state.draggedNodeId = null;
       state.draggedStarIndex = -1;
@@ -2361,10 +3969,12 @@ function createEngine({
         if (hit) {
           handlers.onSelect?.(hit.node);
           constellationLayer.setFocused(hit.node.id);
+          focusedNodeId = hit.node.id;
           if (hit.node.level === 2) setFocusedBook(hit.node.id);
           else if (hit.node.level === 3 && hit.node.parent) setFocusedBook(hit.node.parent);
         } else {
           setFocusedBook(null);
+          focusedNodeId = null;
         }
       }
     } else {
@@ -2372,10 +3982,12 @@ function createEngine({
       if (hit) {
         handlers.onSelect?.(hit.node);
         constellationLayer.setFocused(hit.node.id);
+        focusedNodeId = hit.node.id;
         if (hit.node.level === 2) setFocusedBook(hit.node.id);
         else if (hit.node.level === 3 && hit.node.parent) setFocusedBook(hit.node.parent);
       } else {
         setFocusedBook(null);
+        focusedNodeId = null;
       }
     }
   }
@@ -2391,7 +4003,7 @@ function createEngine({
     handlers.onFovChange?.(state.fov);
     updateUniforms();
     const vAfter = getMouseViewVector(state.fov, aspect);
-    const quaternion = new THREE5.Quaternion().setFromUnitVectors(vAfter, vBefore);
+    const quaternion = new THREE6.Quaternion().setFromUnitVectors(vAfter, vBefore);
     const dampStartFov = 40;
     const dampEndFov = 120;
     let spinAmount = 1;
@@ -2400,27 +4012,27 @@ function createEngine({
       spinAmount = 1 - Math.pow(t, 1.5) * 0.8;
     }
     if (spinAmount < 0.999) {
-      const identityQuat = new THREE5.Quaternion();
+      const identityQuat = new THREE6.Quaternion();
       quaternion.slerp(identityQuat, 1 - spinAmount);
     }
     const y = Math.sin(state.lat);
     const r = Math.cos(state.lat);
     const x = r * Math.sin(state.lon);
     const z = -r * Math.cos(state.lon);
-    const currentLook = new THREE5.Vector3(x, y, z);
+    const currentLook = new THREE6.Vector3(x, y, z);
     const camForward = currentLook.clone().normalize();
     const camUp = camera.up.clone();
-    const camRight = new THREE5.Vector3().crossVectors(camForward, camUp).normalize();
-    const camUpOrtho = new THREE5.Vector3().crossVectors(camRight, camForward).normalize();
-    const mat = new THREE5.Matrix4().makeBasis(camRight, camUpOrtho, camForward.clone().negate());
-    const qOld = new THREE5.Quaternion().setFromRotationMatrix(mat);
+    const camRight = new THREE6.Vector3().crossVectors(camForward, camUp).normalize();
+    const camUpOrtho = new THREE6.Vector3().crossVectors(camRight, camForward).normalize();
+    const mat = new THREE6.Matrix4().makeBasis(camRight, camUpOrtho, camForward.clone().negate());
+    const qOld = new THREE6.Quaternion().setFromRotationMatrix(mat);
     const qNew = qOld.clone().multiply(quaternion);
-    const newForward = new THREE5.Vector3(0, 0, -1).applyQuaternion(qNew);
+    const newForward = new THREE6.Vector3(0, 0, -1).applyQuaternion(qNew);
     state.lat = Math.asin(Math.max(-0.999, Math.min(0.999, newForward.y)));
     state.lon = Math.atan2(newForward.x, -newForward.z);
-    const newUp = new THREE5.Vector3(0, 1, 0).applyQuaternion(qNew);
+    const newUp = new THREE6.Vector3(0, 1, 0).applyQuaternion(qNew);
     camera.up.copy(newUp);
-    if (e.deltaY > 0 && state.fov > ENGINE_CONFIG.zenithStartFov) {
+    if (!getSceneDebug()?.disableZenithBias && e.deltaY > 0 && state.fov > ENGINE_CONFIG.zenithStartFov) {
       const range = ENGINE_CONFIG.maxFov - ENGINE_CONFIG.zenithStartFov;
       let t = (state.fov - ENGINE_CONFIG.zenithStartFov) / range;
       t = Math.max(0, Math.min(1, t));
@@ -2532,7 +4144,7 @@ function createEngine({
       state.fov = state.pinchStartFov / scale;
       state.fov = Math.max(ENGINE_CONFIG.minFov, Math.min(ENGINE_CONFIG.maxFov, state.fov));
       handlers.onFovChange?.(state.fov);
-      if (state.fov > prevFov && state.fov > ENGINE_CONFIG.zenithStartFov) {
+      if (!getSceneDebug()?.disableZenithBias && state.fov > prevFov && state.fov > ENGINE_CONFIG.zenithStartFov) {
         const range = ENGINE_CONFIG.maxFov - ENGINE_CONFIG.zenithStartFov;
         let t = (state.fov - ENGINE_CONFIG.zenithStartFov) / range;
         t = Math.max(0, Math.min(1, t));
@@ -2768,14 +4380,24 @@ function createEngine({
     const r = Math.cos(state.lat);
     const x = r * Math.sin(state.lon);
     const z = -r * Math.cos(state.lon);
-    const target = new THREE5.Vector3(x, y, z);
-    const idealUp = new THREE5.Vector3(-Math.sin(state.lat) * Math.sin(state.lon), Math.cos(state.lat), Math.sin(state.lat) * Math.cos(state.lon)).normalize();
+    const target = new THREE6.Vector3(x, y, z);
+    const idealUp = new THREE6.Vector3(-Math.sin(state.lat) * Math.sin(state.lon), Math.cos(state.lat), Math.sin(state.lat) * Math.cos(state.lon)).normalize();
     camera.up.lerp(idealUp, ENGINE_CONFIG.horizonLockStrength);
     camera.up.normalize();
     camera.lookAt(target);
     camera.updateMatrixWorld();
     camera.matrixWorldInverse.copy(camera.matrixWorld).invert();
+    if (groundMaterial?.uniforms?.uZenithFlatten) {
+      const flatten = getSceneDebug()?.disableZenithFlatten ? 0 : THREE6.MathUtils.smoothstep(
+        state.lat,
+        THREE6.MathUtils.degToRad(68),
+        THREE6.MathUtils.degToRad(88)
+      );
+      groundMaterial.uniforms.uZenithFlatten.value = flatten;
+    }
     updateUniforms();
+    if (getSceneDebug()?.horizonDiagnostics) runHorizonDiagnostics(now);
+    updateChapterLabelAnchors();
     const nowSec = now / 1e3;
     const dt = lastTickTime > 0 ? Math.min(nowSec - lastTickTime, 0.1) : 0.016;
     lastTickTime = nowSec;
@@ -2783,21 +4405,60 @@ function createEngine({
     linesFader.update(dt);
     artFader.target = currentConfig?.showConstellationArt ?? false;
     artFader.update(dt);
-    constellationLayer.update(state.fov, artFader.eased > 0.01);
-    if (artFader.eased < 1) {
-      constellationLayer.setGlobalOpacity?.(artFader.eased);
-    }
+    constellationLayer.update(state.fov, artFader.eased > 0.01, camera, dt);
+    const baseArtOpacity = THREE6.MathUtils.clamp(currentConfig?.constellationBaseOpacity ?? 1, 0, 300);
+    constellationLayer.setGlobalOpacity?.(artFader.eased * baseArtOpacity);
     backdropGroup.visible = currentConfig?.showBackdropStars ?? true;
+    if (backdropStarsMaterial?.uniforms) {
+      const minGain = THREE6.MathUtils.clamp(currentConfig?.backdropWideFovGain ?? 0.42, 0, 1);
+      const fovT = THREE6.MathUtils.smoothstep(state.fov, 24, 100);
+      const gain = THREE6.MathUtils.lerp(1, minGain, fovT);
+      backdropStarsMaterial.uniforms.uBackdropGain.value = gain;
+      backdropStarsMaterial.uniforms.uBackdropEnergy.value = THREE6.MathUtils.clamp(currentConfig?.backdropEnergy ?? 2.2, 0.2, 5);
+      backdropStarsMaterial.uniforms.uBackdropSizeExp.value = THREE6.MathUtils.clamp(currentConfig?.backdropSizeExponent ?? 0.9, 0.4, 1.4);
+    }
+    if (skyBackgroundMesh) skyBackgroundMesh.visible = currentConfig?.background !== "transparent";
     if (atmosphereMesh) atmosphereMesh.visible = currentConfig?.showAtmosphere ?? false;
-    const DIVISION_THRESHOLD = 60;
-    const showDivisions = state.fov > DIVISION_THRESHOLD;
+    if (moonMesh) moonMesh.visible = currentConfig?.showMoon ?? true;
+    if (moonGlowMesh) moonGlowMesh.visible = currentConfig?.showMoon ?? true;
+    const showSun = currentConfig?.showSunrise ?? true;
+    if (sunDiscMesh) sunDiscMesh.visible = showSun;
+    if (sunHaloMesh) sunHaloMesh.visible = showSun;
+    if (milkyWayMesh) milkyWayMesh.visible = currentConfig?.showMilkyWay ?? true;
+    if (editHoverMesh) {
+      const ringMat = editHoverMesh.material;
+      const isEditing = currentConfig?.editable ?? false;
+      const isDraggingStar = state.dragMode === "node" && state.draggedStarIndex !== -1;
+      const hasTarget = isEditing && editHoverTargetPos !== null;
+      if (hasTarget) {
+        editHoverMesh.position.copy(editHoverTargetPos);
+        const pulseBoost = editDropFlash * 1.8;
+        const targetAlpha = 0.8 + pulseBoost;
+        ringMat.uniforms.uRingAlpha.value = THREE6.MathUtils.lerp(ringMat.uniforms.uRingAlpha.value, targetAlpha, 0.15);
+        const tGold = isDraggingStar ? 1 : editDropFlash;
+        const targetColor = new THREE6.Color(
+          THREE6.MathUtils.lerp(0.55, 1, tGold),
+          THREE6.MathUtils.lerp(0.88, 0.82, tGold),
+          THREE6.MathUtils.lerp(1, 0.18, tGold)
+        );
+        ringMat.uniforms.uRingColor.value.lerp(targetColor, 0.18);
+        const baseSize = isDraggingStar ? 0.075 : 0.06;
+        const targetSize = baseSize * (1 + editDropFlash * 0.7);
+        ringMat.uniforms.uRingSize.value = THREE6.MathUtils.lerp(ringMat.uniforms.uRingSize.value, targetSize, 0.18);
+        editDropFlash = Math.max(0, editDropFlash - dt * 3);
+      } else {
+        ringMat.uniforms.uRingAlpha.value = THREE6.MathUtils.lerp(ringMat.uniforms.uRingAlpha.value, 0, 0.15);
+        ringMat.uniforms.uRingSize.value = THREE6.MathUtils.lerp(ringMat.uniforms.uRingSize.value, 0.06, 0.2);
+      }
+    }
     if (constellationLines) {
       constellationLines.visible = linesFader.eased > 0.01;
       if (constellationLines.visible && constellationLines.material) {
         const mat = constellationLines.material;
         if (mat.uniforms?.color) {
           mat.uniforms.color.value.setHex(11193599);
-          mat.opacity = linesFader.eased;
+          if (mat.uniforms.uReveal) mat.uniforms.uReveal.value = linesFader.eased;
+          mat.opacity = 1;
         }
       }
     }
@@ -2808,116 +4469,35 @@ function createEngine({
     const screenW = rect.width;
     const screenH = rect.height;
     const aspect = screenW / screenH;
-    const labelsToCheck = [];
-    const occupied = [];
-    function isOverlapping(x2, y2, w, h) {
-      for (const r2 of occupied) {
-        if (x2 < r2.x + r2.w && x2 + w > r2.x && y2 < r2.y + r2.h && y2 + h > r2.y) return true;
-      }
-      return false;
-    }
-    const showBookLabels = currentConfig?.showBookLabels === true;
-    const showDivisionLabels = currentConfig?.showDivisionLabels === true;
-    const showChapterLabels = currentConfig?.showChapterLabels === true;
-    const showGroupLabels = currentConfig?.showGroupLabels === true;
-    const showChapters = state.fov < 45;
-    for (const item of dynamicLabels) {
-      const uniforms = item.obj.material.uniforms;
-      const level = item.node.level;
-      let isEnabled = false;
-      if (level === 2 && showBookLabels) isEnabled = true;
-      else if (level === 1 && showDivisionLabels) isEnabled = true;
-      else if (level === 3 && showChapterLabels) isEnabled = true;
-      else if (level === 2.5 && showGroupLabels) isEnabled = true;
-      if (!isEnabled) {
-        uniforms.uAlpha.value = THREE5.MathUtils.lerp(uniforms.uAlpha.value, 0, 0.2);
-        item.obj.visible = uniforms.uAlpha.value > 0.01;
-        continue;
-      }
-      const pWorld = item.obj.position;
-      const pProj = smartProjectJS(pWorld);
-      if (pProj.z > 0.2) {
-        uniforms.uAlpha.value = THREE5.MathUtils.lerp(uniforms.uAlpha.value, 0, 0.2);
-        item.obj.visible = uniforms.uAlpha.value > 0.01;
-        continue;
-      }
-      if ((level === 3 || level === 2.5) && !showChapters && item.node.id !== state.draggedNodeId) {
-        uniforms.uAlpha.value = THREE5.MathUtils.lerp(uniforms.uAlpha.value, 0, 0.2);
-        item.obj.visible = uniforms.uAlpha.value > 0.01;
-        continue;
-      }
-      const ndcX = pProj.x * globalUniforms.uScale.value / aspect;
-      const ndcY = pProj.y * globalUniforms.uScale.value;
-      const sX = (ndcX * 0.5 + 0.5) * screenW;
-      const sY = (-ndcY * 0.5 + 0.5) * screenH;
-      const size = uniforms.uSize.value;
-      const pixelH = size.y * screenH * 0.8;
-      const pixelW = size.x * screenH * 0.8;
-      labelsToCheck.push({ item, sX, sY, w: pixelW, h: pixelH, uniforms, level, ndcX, ndcY });
-    }
-    const hoverId = handlers._lastHoverId;
+    const hoverId = handlers._lastHoverId ?? null;
     const selectedId = state.draggedNodeId;
-    labelsToCheck.sort((a, b) => {
-      const getScore = (l) => {
-        if (l.item.node.id === selectedId) return 10;
-        if (l.item.node.id === hoverId) return 9;
-        const level = l.level;
-        if (level === 2) return 5;
-        if (level === 1) return showDivisions ? 6 : 1;
-        return 0;
-      };
-      return getScore(b) - getScore(a);
+    labelManager.update({
+      nowMs: now,
+      dt,
+      fov: state.fov,
+      camera,
+      projectionId: currentProjection.id,
+      screenW,
+      screenH,
+      globalScale: globalUniforms.uScale.value,
+      aspect,
+      hoverId,
+      selectedId,
+      focusedId: focusedNodeId,
+      shouldFilter: !!currentFilter && filterStrength > 0.01,
+      isNodeFiltered: (node) => {
+        const nodeToCheck = node.level === 2.5 && node.parent ? nodeById.get(node.parent) : node;
+        return !!nodeToCheck && isNodeFiltered(nodeToCheck);
+      },
+      toggles: {
+        showBookLabels: currentConfig?.showBookLabels === true,
+        showDivisionLabels: currentConfig?.showDivisionLabels === true,
+        showChapterLabels: currentConfig?.showChapterLabels === true,
+        showGroupLabels: currentConfig?.showGroupLabels === true
+      },
+      config: currentConfig?.labelBehavior,
+      project: smartProjectJS
     });
-    for (const l of labelsToCheck) {
-      let target2 = 0;
-      const isSpecial = l.item.node.id === selectedId || l.item.node.id === hoverId;
-      if (l.level === 1) {
-        let rot = 0;
-        const isWideAngle = currentProjection.id !== "perspective";
-        if (isWideAngle) {
-          const dx = l.sX - screenW / 2;
-          const dy = l.sY - screenH / 2;
-          rot = Math.atan2(-dy, -dx) - Math.PI / 2;
-        }
-        l.uniforms.uAngle.value = THREE5.MathUtils.lerp(l.uniforms.uAngle.value, rot, 0.1);
-      }
-      if (l.level === 2) {
-        {
-          target2 = 1;
-          occupied.push({ x: l.sX - l.w / 2, y: l.sY - l.h / 2, w: l.w, h: l.h });
-        }
-      } else if (l.level === 1) {
-        if (showDivisions || isSpecial) {
-          const pad = -5;
-          if (!isOverlapping(l.sX - l.w / 2 - pad, l.sY - l.h / 2 - pad, l.w + pad * 2, l.h + pad * 2)) {
-            target2 = 1;
-            occupied.push({ x: l.sX - l.w / 2, y: l.sY - l.h / 2, w: l.w, h: l.h });
-          }
-        }
-      } else if (l.level === 2.5 || l.level === 3) {
-        if (showChapters || isSpecial) {
-          target2 = 1;
-          if (!isSpecial) {
-            const dist = Math.sqrt(l.ndcX * l.ndcX + l.ndcY * l.ndcY);
-            const focusFade = 1 - THREE5.MathUtils.smoothstep(0.4, 0.7, dist);
-            target2 *= focusFade;
-          }
-        }
-      }
-      if (target2 > 0 && currentFilter && filterStrength > 0.01) {
-        const node = l.item.node;
-        if (node.level === 3) {
-          target2 = 0;
-        } else if (node.level === 2 || node.level === 2.5) {
-          const nodeToCheck = node.level === 2.5 && node.parent ? nodeById.get(node.parent) : node;
-          if (nodeToCheck && isNodeFiltered(nodeToCheck)) {
-            target2 = 0;
-          }
-        }
-      }
-      l.uniforms.uAlpha.value = THREE5.MathUtils.lerp(l.uniforms.uAlpha.value, target2, 0.1);
-      l.item.obj.visible = l.uniforms.uAlpha.value > 0.01;
-    }
     renderer.render(scene, camera);
   }
   function stop() {
@@ -2942,6 +4522,48 @@ function createEngine({
   function dispose() {
     stop();
     constellationLayer.dispose();
+    if (moonMesh) {
+      scene.remove(moonMesh);
+      moonMesh.geometry.dispose();
+      moonMesh.material.dispose();
+      moonMesh = null;
+    }
+    if (moonGlowMesh) {
+      scene.remove(moonGlowMesh);
+      moonGlowMesh.geometry.dispose();
+      moonGlowMesh.material.dispose();
+      moonGlowMesh = null;
+    }
+    if (sunDiscMesh) {
+      scene.remove(sunDiscMesh);
+      sunDiscMesh.geometry.dispose();
+      sunDiscMesh.material.dispose();
+      sunDiscMesh = null;
+    }
+    if (sunHaloMesh) {
+      scene.remove(sunHaloMesh);
+      sunHaloMesh.geometry.dispose();
+      sunHaloMesh.material.dispose();
+      sunHaloMesh = null;
+    }
+    if (milkyWayMesh) {
+      scene.remove(milkyWayMesh);
+      milkyWayMesh.geometry.dispose();
+      milkyWayMesh.material.dispose();
+      milkyWayMesh = null;
+    }
+    if (skyBackgroundMesh) {
+      scene.remove(skyBackgroundMesh);
+      skyBackgroundMesh.geometry.dispose();
+      skyBackgroundMesh.material.dispose();
+      skyBackgroundMesh = null;
+    }
+    if (editHoverMesh) {
+      scene.remove(editHoverMesh);
+      editHoverMesh.geometry.dispose();
+      editHoverMesh.material.dispose();
+      editHoverMesh = null;
+    }
     renderer.dispose();
     renderer.domElement.remove();
   }
@@ -2961,6 +4583,7 @@ function createEngine({
   function flyTo(nodeId, targetFov) {
     const node = nodeById.get(nodeId);
     if (!node) return;
+    focusedNodeId = nodeId;
     const pos = getPosition(node).normalize();
     flyToTargetLat = Math.asin(Math.max(-0.999, Math.min(0.999, pos.y)));
     flyToTargetLon = Math.atan2(pos.x, -pos.z);
@@ -2991,10 +4614,11 @@ var init_createEngine = __esm({
     init_ConstellationArtworkLayer();
     init_projections();
     init_fader();
+    init_LabelManager();
     ENGINE_CONFIG = {
       minFov: 1,
       maxFov: 135,
-      defaultFov: 50,
+      defaultFov: 35,
       dragSpeed: 125e-5,
       inertiaDamping: 0.92,
       blendStart: 35,
@@ -3021,7 +4645,7 @@ var init_createEngine = __esm({
     };
     ORDER_REVEAL_CONFIG = {
       globalDim: 0.85,
-      pulseAmplitude: 0.6,
+      pulseAmplitude: 0.12,
       pulseDuration: 2,
       delayPerChapter: 0.1
     };
@@ -32211,7 +33835,7 @@ var RNG = class {
     const r = Math.sqrt(1 - y * y);
     const x = r * Math.cos(theta);
     const z = r * Math.sin(theta);
-    return new THREE5.Vector3(x, y, z);
+    return new THREE6.Vector3(x, y, z);
   }
 };
 function simpleNoise3D(v, scale) {
@@ -32249,11 +33873,11 @@ function generateArrangement(bible, options = {}) {
     });
   });
   const bookCount = books.length;
-  const mwRad = THREE5.MathUtils.degToRad(opts.milkyWayAngle);
-  const mwNormal = new THREE5.Vector3(Math.sin(mwRad), Math.cos(mwRad), 0).normalize();
+  const mwRad = THREE6.MathUtils.degToRad(opts.milkyWayAngle);
+  const mwNormal = new THREE6.Vector3(Math.sin(mwRad), Math.cos(mwRad), 0).normalize();
   const anchors = [];
   for (let i = 0; i < bookCount; i++) {
-    let bestP = new THREE5.Vector3();
+    let bestP = new THREE6.Vector3();
     let valid = false;
     let attempt = 0;
     while (!valid && attempt < 100) {
@@ -32279,7 +33903,7 @@ function generateArrangement(bible, options = {}) {
     arrangement[`B:${book.key}`] = { position: [anchorPos.x, anchorPos.y, anchorPos.z] };
     for (let c = 0; c < book.chapters; c++) {
       const localSpread = opts.clusterSpread * (0.8 + rng.next() * 0.4);
-      const offset = new THREE5.Vector3(
+      const offset = new THREE6.Vector3(
         (rng.next() - 0.5) * 2,
         (rng.next() - 0.5) * 2,
         (rng.next() - 0.5) * 2
@@ -32300,7 +33924,7 @@ function generateArrangement(bible, options = {}) {
     const anchorPos = anchor.clone().multiplyScalar(opts.discRadius);
     const divId = `D:${book.testament}:${book.division}`;
     if (!divisions.has(divId)) {
-      divisions.set(divId, { sum: new THREE5.Vector3(), count: 0 });
+      divisions.set(divId, { sum: new THREE6.Vector3(), count: 0 });
     }
     const entry = divisions.get(divId);
     entry.sum.add(anchorPos);