@project-skymap/library 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -1,8 +1,6 @@
 'use strict';
 
 var THREE4 = require('three');
-var OrbitControls_js = require('three/examples/jsm/controls/OrbitControls.js');
-var DragControls_js = require('three/examples/jsm/controls/DragControls.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -334,100 +332,80 @@ var init_layout = __esm({
     init_constellations();
   }
 });
-function matches(node, when) {
-  for (const [k, v] of Object.entries(when)) {
-    const val = node[k] !== void 0 ? node[k] : node.meta?.[k];
-    if (val !== v) return false;
-  }
-  return true;
-}
-function getColorRules(cfg) {
-  const anyCfg = cfg;
-  const styleColors = anyCfg?.style?.colors;
-  if (Array.isArray(styleColors)) return styleColors;
-  const visualsColorBy = anyCfg?.visuals?.colorBy;
-  if (Array.isArray(visualsColorBy)) {
-    return visualsColorBy.map((r) => ({
-      when: r.when ?? {},
-      color: r.value,
-      opacity: r.opacity
-    }));
-  }
-  return [];
+
+// src/engine/shaders.ts
+var BLEND_CHUNK, MASK_CHUNK;
+var init_shaders = __esm({
+  "src/engine/shaders.ts"() {
+    BLEND_CHUNK = `
+uniform float uScale;
+uniform float uAspect;
+uniform float uBlend;
+
+vec4 smartProject(vec4 viewPos) {
+    vec3 dir = normalize(viewPos.xyz);
+    float dist = length(viewPos.xyz);
+    float zLinear = max(0.01, -dir.z);
+    float kStereo = 2.0 / (1.0 - dir.z);
+    float kLinear = 1.0 / zLinear;
+    float k = mix(kLinear, kStereo, uBlend);
+    vec2 projected = vec2(k * dir.x, k * dir.y);
+    projected *= uScale;
+    projected.x /= uAspect;
+    float zMetric = -1.0 + (dist / 2000.0);
+    // Clip backward facing points in fisheye mode
+    if (uBlend > 0.5 && dir.z > 0.4) return vec4(10.0, 10.0, 10.0, 1.0);
+    // Clip very close points in linear mode
+    if (uBlend < 0.1 && dir.z > -0.1) return vec4(10.0, 10.0, 10.0, 1.0);
+    return vec4(projected, zMetric, 1.0);
 }
-function getSizeRules(cfg) {
-  const anyCfg = cfg;
-  const styleSizes = anyCfg?.style?.sizes;
-  if (Array.isArray(styleSizes)) return styleSizes;
-  const visualsSizeBy = anyCfg?.visuals?.sizeBy;
-  if (Array.isArray(visualsSizeBy)) return visualsSizeBy;
-  return [];
+`;
+    MASK_CHUNK = `
+uniform float uAspect;
+uniform float uBlend;
+varying vec2 vScreenPos;
+float getMaskAlpha() {
+    if (uBlend < 0.1) return 1.0;
+    vec2 p = vScreenPos;
+    p.x *= uAspect;
+    float dist = length(p);
+    float t = smoothstep(0.75, 1.0, uBlend);
+    float currentRadius = mix(2.5, 1.0, t);
+    float edgeSoftness = mix(0.5, 0.02, t);
+    return 1.0 - smoothstep(currentRadius - edgeSoftness, currentRadius, dist);
 }
-function applyVisuals({
-  model,
-  cfg,
-  meshById
-}) {
-  const colorRules = getColorRules(cfg);
-  const sizeRules = getSizeRules(cfg);
-  const domains = {};
-  for (const rule of sizeRules) {
-    const key = JSON.stringify(rule.when) + "|" + rule.field;
-    if (domains[key]) continue;
-    if (rule.domain) {
-      domains[key] = { min: rule.domain[0], max: rule.domain[1] };
-      continue;
-    }
-    let min = Number.POSITIVE_INFINITY;
-    let max = Number.NEGATIVE_INFINITY;
-    for (const n of model.nodes) {
-      if (!matches(n, rule.when)) continue;
-      const v = n[rule.field] ?? n.meta?.[rule.field];
-      if (typeof v !== "number" || !Number.isFinite(v)) continue;
-      min = Math.min(min, v);
-      max = Math.max(max, v);
-    }
-    if (!Number.isFinite(min) || !Number.isFinite(max)) {
-      min = 0;
-      max = 1;
-    }
-    domains[key] = { min, max };
-  }
-  for (const node of model.nodes) {
-    const mesh = meshById.get(node.id);
-    if (!mesh) continue;
-    for (const rule of colorRules) {
-      if (!matches(node, rule.when)) continue;
-      mesh.traverse((obj) => {
-        if (!obj.material) return;
-        const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
-        for (const m of mats) {
-          if (m?.color) m.color = new THREE4__namespace.Color(rule.color);
-          m.transparent = true;
-          m.opacity = rule.opacity ?? 1;
-        }
-      });
-      break;
-    }
-    for (const rule of sizeRules) {
-      if (!matches(node, rule.when)) continue;
-      const w = node[rule.field] ?? node.meta?.[rule.field];
-      if (typeof w !== "number" || !Number.isFinite(w)) continue;
-      const key = JSON.stringify(rule.when) + "|" + rule.field;
-      const domain = domains[key];
-      if (!domain) continue;
-      const { min, max } = domain;
-      const range = max - min;
-      const t = range === 0 ? 0.5 : (w - min) / range;
-      const clamped = Math.min(1, Math.max(0, t));
-      const s = rule.scale[0] + clamped * (rule.scale[1] - rule.scale[0]);
-      mesh.scale.setScalar(s);
-      break;
-    }
+`;
   }
+});
+function createSmartMaterial(params) {
+  const uniforms = { ...globalUniforms, ...params.uniforms };
+  return new THREE4__namespace.ShaderMaterial({
+    uniforms,
+    vertexShader: `
+            ${BLEND_CHUNK} 
+            varying vec2 vScreenPos; 
+            ${params.vertexShaderBody}
+        `,
+    fragmentShader: `
+            ${MASK_CHUNK} 
+            ${params.fragmentShader}
+        `,
+    transparent: params.transparent || false,
+    depthWrite: params.depthWrite !== void 0 ? params.depthWrite : true,
+    depthTest: params.depthTest !== void 0 ? params.depthTest : true,
+    side: params.side || THREE4__namespace.FrontSide,
+    blending: params.blending || THREE4__namespace.NormalBlending
+  });
 }
+var globalUniforms;
 var init_materials = __esm({
   "src/engine/materials.ts"() {
+    init_shaders();
+    globalUniforms = {
+      uScale: { value: 1 },
+      uAspect: { value: 1 },
+      uBlend: { value: 0 }
+    };
   }
 });
 
@@ -442,380 +420,359 @@ function createEngine({
   onHover,
   onArrangementChange
 }) {
-  const renderer = new THREE4__namespace.WebGLRenderer({ antialias: true });
+  const renderer = new THREE4__namespace.WebGLRenderer({ antialias: true, alpha: false });
   renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
-  renderer.setClearColor(0, 1);
+  renderer.setSize(container.clientWidth, container.clientHeight);
   container.appendChild(renderer.domElement);
-  renderer.domElement.style.width = "100%";
-  renderer.domElement.style.height = "100%";
-  renderer.domElement.style.touchAction = "none";
   const scene = new THREE4__namespace.Scene();
-  const camera = new THREE4__namespace.PerspectiveCamera(90, 1, 0.1, 5e3);
-  camera.position.set(0, 0, 0.01);
+  scene.background = new THREE4__namespace.Color(0);
+  const camera = new THREE4__namespace.PerspectiveCamera(60, 1, 0.1, 3e3);
+  camera.position.set(0, 0, 0);
   camera.up.set(0, 1, 0);
-  const controls = new OrbitControls_js.OrbitControls(camera, renderer.domElement);
-  controls.target.set(0, 0, 0);
-  controls.enableRotate = true;
-  controls.enablePan = false;
-  controls.enableZoom = false;
-  controls.enableDamping = true;
-  controls.dampingFactor = 0.07;
-  controls.screenSpacePanning = false;
-  const EPS = THREE4__namespace.MathUtils.degToRad(0.05);
-  controls.minAzimuthAngle = -Infinity;
-  controls.maxAzimuthAngle = Infinity;
-  controls.minPolarAngle = Math.PI / 2 + EPS;
-  controls.maxPolarAngle = Math.PI - EPS;
-  controls.update();
-  const env = {
-    skyRadius: 2800,
-    groundRadius: 995,
-    timeScale: 60,
-    // 1 = real-time; 60 = 60x faster drift
-    defaultFov: 90,
-    minFov: 6,
-    maxFov: 110,
-    // 0.02 works well for mouse wheels; trackpads are moderated via ctrlKey
-    fovWheelSensitivity: 0.02,
-    zoomLerp: 0.12,
-    focusZoomFov: 18,
-    focusDurationMs: 650};
-  const SIDEREAL_RATE = THREE4__namespace.MathUtils.degToRad(15) / 3600;
-  let lastFrameMs = performance.now();
-  let targetFov = env.defaultFov;
-  let zoomOutLimitFov = env.defaultFov;
+  let running = false;
+  let raf = 0;
+  const state = {
+    isDragging: false,
+    lastMouseX: 0,
+    lastMouseY: 0,
+    velocityX: 0,
+    velocityY: 0,
+    lat: 0.5,
+    lon: 0,
+    targetLat: 0.5,
+    targetLon: 0,
+    fov: ENGINE_CONFIG.defaultFov,
+    dragMode: "none",
+    draggedNodeId: null,
+    draggedStarIndex: -1,
+    draggedDist: 2e3,
+    draggedGroup: null
+  };
+  const mouseNDC = new THREE4__namespace.Vector2();
+  let isMouseInWindow = false;
+  let handlers = { onSelect, onHover, onArrangementChange };
+  let currentConfig;
+  function mix(a, b, t) {
+    return a * (1 - t) + b * t;
+  }
+  function getBlendFactor(fov) {
+    if (fov <= ENGINE_CONFIG.blendStart) return 0;
+    if (fov >= ENGINE_CONFIG.blendEnd) return 1;
+    let t = (fov - ENGINE_CONFIG.blendStart) / (ENGINE_CONFIG.blendEnd - ENGINE_CONFIG.blendStart);
+    return t * t * (3 - 2 * t);
+  }
+  function updateUniforms() {
+    const blend = getBlendFactor(state.fov);
+    globalUniforms.uBlend.value = blend;
+    const fovRad = state.fov * Math.PI / 180;
+    const scaleLinear = 1 / Math.tan(fovRad / 2);
+    const scaleStereo = 1 / (2 * Math.tan(fovRad / 4));
+    globalUniforms.uScale.value = mix(scaleLinear, scaleStereo, blend);
+    globalUniforms.uAspect.value = camera.aspect;
+    camera.fov = Math.min(state.fov, ENGINE_CONFIG.defaultFov);
+    camera.updateProjectionMatrix();
+  }
+  function getMouseViewVector(fovDeg, aspectRatio) {
+    const blend = getBlendFactor(fovDeg);
+    const fovRad = fovDeg * Math.PI / 180;
+    const uvX = mouseNDC.x * aspectRatio;
+    const uvY = mouseNDC.y;
+    const r_uv = Math.sqrt(uvX * uvX + uvY * uvY);
+    const halfHeightLinear = Math.tan(fovRad / 2);
+    const theta_lin = Math.atan(r_uv * halfHeightLinear);
+    const halfHeightStereo = 2 * Math.tan(fovRad / 4);
+    const theta_str = 2 * Math.atan(r_uv * halfHeightStereo / 2);
+    const theta = mix(theta_lin, theta_str, blend);
+    const phi = Math.atan2(uvY, uvX);
+    const sinTheta = Math.sin(theta);
+    const cosTheta = Math.cos(theta);
+    return new THREE4__namespace.Vector3(sinTheta * Math.cos(phi), sinTheta * Math.sin(phi), -cosTheta).normalize();
+  }
+  function getMouseWorldVector(pixelX, pixelY, width, height) {
+    const aspect = width / height;
+    const ndcX = pixelX / width * 2 - 1;
+    const ndcY = -(pixelY / height) * 2 + 1;
+    const blend = getBlendFactor(state.fov);
+    const fovRad = state.fov * Math.PI / 180;
+    const uvX = ndcX * aspect;
+    const uvY = ndcY;
+    const r_uv = Math.sqrt(uvX * uvX + uvY * uvY);
+    const halfHeightLinear = Math.tan(fovRad / 2);
+    const theta_lin = Math.atan(r_uv * halfHeightLinear);
+    const halfHeightStereo = 2 * Math.tan(fovRad / 4);
+    const theta_str = 2 * Math.atan(r_uv * halfHeightStereo / 2);
+    const theta = mix(theta_lin, theta_str, blend);
+    const phi = Math.atan2(uvY, uvX);
+    const sinTheta = Math.sin(theta);
+    const cosTheta = Math.cos(theta);
+    const vView = new THREE4__namespace.Vector3(sinTheta * Math.cos(phi), sinTheta * Math.sin(phi), -cosTheta).normalize();
+    return vView.applyQuaternion(camera.quaternion);
+  }
+  function smartProjectJS(worldPos) {
+    const viewPos = worldPos.clone().applyMatrix4(camera.matrixWorldInverse);
+    const dir = viewPos.clone().normalize();
+    const zLinear = Math.max(0.01, -dir.z);
+    const kStereo = 2 / (1 - dir.z);
+    const kLinear = 1 / zLinear;
+    const blend = globalUniforms.uBlend.value;
+    const k = mix(kLinear, kStereo, blend);
+    return { x: k * dir.x, y: k * dir.y, z: dir.z };
+  }
   const groundGroup = new THREE4__namespace.Group();
   scene.add(groundGroup);
-  function buildGroundHemisphere(radius) {
+  function createGround() {
     groundGroup.clear();
-    const hemi = new THREE4__namespace.SphereGeometry(radius, 64, 32, 0, Math.PI * 2, Math.PI / 2, Math.PI);
-    hemi.scale(-1, 1, 1);
-    const count = hemi.attributes.position.count;
-    const colors = new Float32Array(count * 3);
-    const pos = hemi.attributes.position;
-    const c = new THREE4__namespace.Color();
-    for (let i = 0; i < count; i++) {
-      const y = pos.getY(i);
-      const t = THREE4__namespace.MathUtils.clamp(1 - Math.abs(y) / radius, 0, 1);
-      c.setRGB(
-        THREE4__namespace.MathUtils.lerp(6 / 255, 21 / 255, t),
-        THREE4__namespace.MathUtils.lerp(16 / 255, 35 / 255, t),
-        THREE4__namespace.MathUtils.lerp(23 / 255, 53 / 255, t)
-      );
-      colors.set([c.r, c.g, c.b], i * 3);
-    }
-    hemi.setAttribute("color", new THREE4__namespace.BufferAttribute(colors, 3));
-    const groundMat = new THREE4__namespace.MeshBasicMaterial({
-      vertexColors: true,
-      side: THREE4__namespace.FrontSide,
+    const radius = 995;
+    const geometry = new THREE4__namespace.SphereGeometry(radius, 128, 64, 0, Math.PI * 2, Math.PI / 2, Math.PI / 2);
+    const material = createSmartMaterial({
+      uniforms: { color: { value: new THREE4__namespace.Color(526862) } },
+      vertexShaderBody: `varying vec3 vPos; void main() { vPos = position; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_Position = smartProject(mvPosition); vScreenPos = gl_Position.xy / gl_Position.w; }`,
+      fragmentShader: `uniform vec3 color; varying vec3 vPos; void main() { float alphaMask = getMaskAlpha(); if (alphaMask < 0.01) discard; float noise = sin(vPos.x * 0.2) * sin(vPos.z * 0.2) * 0.05; vec3 col = color + noise; vec3 n = normalize(vPos); float horizon = smoothstep(-0.02, 0.0, n.y); col += vec3(0.1, 0.15, 0.2) * horizon; gl_FragColor = vec4(col, 1.0); }`,
+      side: THREE4__namespace.BackSide,
+      transparent: false,
       depthWrite: true,
-      // important: occlude stars under horizon
       depthTest: true
     });
-    const hemiMesh = new THREE4__namespace.Mesh(hemi, groundMat);
-    groundGroup.add(hemiMesh);
-    {
-      const inner = radius * 0.985;
-      const outer = radius * 1.005;
-      const ringGeo = new THREE4__namespace.RingGeometry(inner, outer, 128);
-      ringGeo.rotateX(-Math.PI / 2);
-      const ringMat = new THREE4__namespace.ShaderMaterial({
-        transparent: true,
-        depthWrite: false,
-        uniforms: {
-          uInner: { value: inner },
-          uOuter: { value: outer },
-          uColor: { value: new THREE4__namespace.Color(8037119) }
-        },
-        vertexShader: `
-          varying vec2 vXY;
-          void main() {
-            vXY = position.xz;
-            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-          }
-        `,
-        fragmentShader: `
-          uniform float uInner;
-          uniform float uOuter;
-          uniform vec3 uColor;
-          varying vec2 vXY;
-
-          void main() {
-            float r = length(vXY);
-            float t = clamp((r - uInner) / (uOuter - uInner), 0.0, 1.0);
-            // peak glow near inner edge, fade outwards
-            float a = pow(1.0 - t, 2.2) * 0.35;
-            gl_FragColor = vec4(uColor, a);
-          }
-        `
-      });
-      const ring = new THREE4__namespace.Mesh(ringGeo, ringMat);
-      ring.position.y = 0;
-      groundGroup.add(ring);
+    const ground = new THREE4__namespace.Mesh(geometry, material);
+    groundGroup.add(ground);
+    const boxGeo = new THREE4__namespace.BoxGeometry(8, 30, 8);
+    for (let i = 0; i < 12; i++) {
+      const angle = i / 12 * Math.PI * 2;
+      const b = new THREE4__namespace.Mesh(boxGeo, material);
+      const r = radius * 0.98;
+      b.position.set(Math.cos(angle) * r, -15, Math.sin(angle) * r);
+      b.lookAt(0, 0, 0);
+      groundGroup.add(b);
     }
   }
-  buildGroundHemisphere(env.groundRadius);
+  function createAtmosphere() {
+    const geometry = new THREE4__namespace.SphereGeometry(990, 128, 64);
+    const material = createSmartMaterial({
+      uniforms: { top: { value: new THREE4__namespace.Color(0) }, bot: { value: new THREE4__namespace.Color(1712172) } },
+      vertexShaderBody: `
+    
+                    varying vec3 vP; 
+    
+                    void main() { 
+    
+                        vP = position; 
+    
+                        vec4 mv = modelViewMatrix * vec4(position, 1.0); 
+    
+                        gl_Position = smartProject(mv); 
+    
+                        vScreenPos = gl_Position.xy / gl_Position.w; 
+    
+                    }
+    
+                `,
+      fragmentShader: `
+    
+                    uniform vec3 top; 
+    
+                    uniform vec3 bot; 
+    
+                    varying vec3 vP; 
+    
+                    void main() { 
+    
+                        float alphaMask = getMaskAlpha(); 
+    
+                        if (alphaMask < 0.01) discard; 
+    
+                        vec3 n = normalize(vP); 
+    
+                        float h = max(0.0, n.y); 
+    
+                        gl_FragColor = vec4(mix(bot, top, pow(h, 0.6)), 1.0); 
+    
+                    }
+    
+                `,
+      side: THREE4__namespace.BackSide,
+      depthWrite: false,
+      depthTest: true
+    });
+    const atm = new THREE4__namespace.Mesh(geometry, material);
+    groundGroup.add(atm);
+  }
   const backdropGroup = new THREE4__namespace.Group();
   scene.add(backdropGroup);
-  function buildBackdropStars(radius, count) {
+  function createBackdropStars() {
     backdropGroup.clear();
-    const starGeo = new THREE4__namespace.BufferGeometry();
-    const starPos = new Float32Array(count * 3);
-    for (let i = 0; i < count; i++) {
-      const r = radius + Math.random() * (radius * 0.5);
-      const theta = Math.random() * Math.PI * 2;
-      const phi = Math.acos(2 * Math.random() - 1);
-      starPos[i * 3] = r * Math.sin(phi) * Math.cos(theta);
-      starPos[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
-      starPos[i * 3 + 2] = r * Math.cos(phi);
+    const geometry = new THREE4__namespace.BufferGeometry();
+    const positions = [];
+    const sizes = [];
+    const colors = [];
+    const colorPalette = [
+      new THREE4__namespace.Color(10203391),
+      new THREE4__namespace.Color(11190271),
+      new THREE4__namespace.Color(13293567),
+      new THREE4__namespace.Color(16316415),
+      new THREE4__namespace.Color(16774378),
+      new THREE4__namespace.Color(16765601),
+      new THREE4__namespace.Color(16764015)
+    ];
+    const r = 2500;
+    new THREE4__namespace.Vector3(0, 1, 0.5).normalize();
+    for (let i = 0; i < 4e3; i++) {
+      const isMilkyWay = Math.random() < 0.4;
+      let x, y, z;
+      if (isMilkyWay) {
+        const theta = Math.random() * Math.PI * 2;
+        const scatter = (Math.random() - 0.5) * 0.4;
+        const v = new THREE4__namespace.Vector3(Math.cos(theta), scatter, Math.sin(theta));
+        v.normalize();
+        v.applyAxisAngle(new THREE4__namespace.Vector3(1, 0, 0), THREE4__namespace.MathUtils.degToRad(60));
+        x = v.x * r;
+        y = v.y * r;
+        z = v.z * r;
+      } else {
+        const u = Math.random();
+        const v = Math.random();
+        const theta = 2 * Math.PI * u;
+        const phi = Math.acos(2 * v - 1);
+        x = r * Math.sin(phi) * Math.cos(theta);
+        y = r * Math.sin(phi) * Math.sin(theta);
+        z = r * Math.cos(phi);
+      }
+      positions.push(x, y, z);
+      const size = 0.5 + -Math.log(Math.random()) * 0.8 * 1.5;
+      sizes.push(size);
+      const cIndex = Math.floor(Math.random() * colorPalette.length);
+      const c = colorPalette[cIndex];
+      colors.push(c.r, c.g, c.b);
     }
-    starGeo.setAttribute("position", new THREE4__namespace.BufferAttribute(starPos, 3));
-    const starMat = new THREE4__namespace.PointsMaterial({
-      color: 10135218,
-      size: 0.5,
+    geometry.setAttribute("position", new THREE4__namespace.Float32BufferAttribute(positions, 3));
+    geometry.setAttribute("size", new THREE4__namespace.Float32BufferAttribute(sizes, 1));
+    geometry.setAttribute("color", new THREE4__namespace.Float32BufferAttribute(colors, 3));
+    const material = createSmartMaterial({
+      uniforms: { pixelRatio: { value: renderer.getPixelRatio() } },
+      vertexShaderBody: `
+                attribute float size; 
+                attribute vec3 color; 
+                varying vec3 vColor; 
+                uniform float pixelRatio; 
+                void main() { 
+                    vColor = color; 
+                    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
+                    gl_Position = smartProject(mvPosition); 
+                    vScreenPos = gl_Position.xy / gl_Position.w; 
+                    gl_PointSize = size * pixelRatio * (600.0 / -mvPosition.z); 
+                }
+            `,
+      fragmentShader: `
+                varying vec3 vColor; 
+                void main() { 
+                    vec2 coord = gl_PointCoord - vec2(0.5); 
+                    float dist = length(coord) * 2.0; 
+                    if (dist > 1.0) discard; 
+                    float alphaMask = getMaskAlpha(); 
+                    if (alphaMask < 0.01) discard; 
+                    // Use same Gaussian glow for backdrop
+                    float alpha = exp(-3.0 * dist * dist);
+                    gl_FragColor = vec4(vColor, alpha * alphaMask); 
+                }
+            `,
       transparent: true,
-      opacity: 0.55,
-      depthWrite: false
+      depthWrite: false,
+      depthTest: true
     });
-    const stars = new THREE4__namespace.Points(starGeo, starMat);
-    backdropGroup.add(stars);
+    const points = new THREE4__namespace.Points(geometry, material);
+    points.frustumCulled = false;
+    backdropGroup.add(points);
   }
-  buildBackdropStars(env.skyRadius, 6500);
+  createGround();
+  createAtmosphere();
+  createBackdropStars();
   const raycaster = new THREE4__namespace.Raycaster();
-  const pointer = new THREE4__namespace.Vector2();
+  raycaster.params.Points.threshold = 5;
+  new THREE4__namespace.Vector2();
   const root = new THREE4__namespace.Group();
   scene.add(root);
-  let raf = 0;
-  let running = false;
-  let handlers = { onSelect, onHover, onArrangementChange };
-  let hoveredId = null;
-  let isDragging = false;
-  let dragControls = null;
-  let currentConfig;
   const nodeById = /* @__PURE__ */ new Map();
-  const meshById = /* @__PURE__ */ new Map();
-  const lineByBookId = /* @__PURE__ */ new Map();
-  const dynamicObjects = [];
-  function getFullArrangement() {
-    const arr = {};
-    for (const [id, mesh] of meshById.entries()) {
-      arr[id] = {
-        position: [mesh.position.x, mesh.position.y, mesh.position.z]
-      };
-    }
-    return arr;
-  }
-  function updateBookLine(bookId) {
-    const line = lineByBookId.get(bookId);
-    if (!line) return;
-    const chapters = [];
-    for (const n of nodeById.values()) {
-      if (n.parent === bookId && n.level === 3) {
-        chapters.push(n);
-      }
-    }
-    chapters.sort((a, b) => {
-      const cA = a.meta?.chapter || 0;
-      const cB = b.meta?.chapter || 0;
-      return cA - cB;
-    });
-    const points = [];
-    for (const c of chapters) {
-      const m = meshById.get(c.id);
-      if (m) {
-        points.push(m.position.clone());
-      }
-    }
-    if (points.length > 1) {
-      line.geometry.setFromPoints(points);
-    }
-  }
-  function updateDragControls(editable) {
-    if (!editable) {
-      if (dragControls) {
-        dragControls.dispose();
-        dragControls = null;
-      }
-      return;
-    }
-    const draggables = [];
-    for (const [id, mesh] of meshById.entries()) {
-      const node = nodeById.get(id);
-      if (node?.level === 3) {
-        draggables.push(mesh);
-      } else if (node?.level === 2 && mesh instanceof THREE4__namespace.Sprite) {
-        draggables.push(mesh);
+  const starIndexToId = [];
+  const dynamicLabels = [];
+  let constellationLines = null;
+  let starPoints = null;
+  function clearRoot() {
+    for (const child of [...root.children]) {
+      root.remove(child);
+      if (child.geometry) child.geometry.dispose();
+      if (child.material) {
+        const m = child.material;
+        if (Array.isArray(m)) m.forEach((mm) => mm.dispose());
+        else m.dispose();
       }
     }
-    if (dragControls) {
-      dragControls.dispose();
-    }
-    dragControls = new DragControls_js.DragControls(draggables, camera, renderer.domElement);
-    const lastPos = new THREE4__namespace.Vector3();
-    dragControls.addEventListener("dragstart", (event) => {
-      controls.enabled = false;
-      isDragging = true;
-      lastPos.copy(event.object.position);
-    });
-    dragControls.addEventListener("drag", (event) => {
-      const obj = event.object;
-      const id = obj.userData.id;
-      const node = nodeById.get(id);
-      if (node && node.level === 2) {
-        const currentPos = obj.position;
-        const delta = new THREE4__namespace.Vector3().subVectors(currentPos, lastPos);
-        const bookId = id;
-        const childStars = [];
-        for (const [nId, n] of nodeById.entries()) {
-          if (n.parent === bookId && n.level === 3) {
-            const starMesh = meshById.get(nId);
-            if (starMesh) childStars.push(starMesh);
-          }
-        }
-        for (const star of childStars) {
-          star.position.add(delta);
-        }
-        updateBookLine(bookId);
-        lastPos.copy(currentPos);
-      } else if (node && node.level === 3) {
-        if (node.parent) {
-          updateBookLine(node.parent);
-        }
-      }
-    });
-    dragControls.addEventListener("dragend", (event) => {
-      controls.enabled = true;
-      setTimeout(() => {
-        isDragging = false;
-      }, 0);
-      const obj = event.object;
-      const id = obj.userData.id;
-      if (id && currentConfig) {
-        handlers.onArrangementChange?.(getFullArrangement());
-      }
-    });
-  }
-  function resize() {
-    const w = container.clientWidth || 1;
-    const h = container.clientHeight || 1;
-    renderer.setSize(w, h, false);
-    camera.aspect = w / h;
-    camera.updateProjectionMatrix();
-  }
-  function disposeObject(obj) {
-    obj.traverse((o) => {
-      if (o.geometry) o.geometry.dispose?.();
-      if (o.material) {
-        const mats = Array.isArray(o.material) ? o.material : [o.material];
-        mats.forEach((m) => {
-          if (m.map) m.map.dispose?.();
-          m.dispose?.();
-        });
-      }
-    });
+    nodeById.clear();
+    starIndexToId.length = 0;
+    dynamicLabels.length = 0;
+    constellationLines = null;
+    starPoints = null;
   }
-  function createTextSprite(text, color = "#ffffff") {
+  function createTextTexture(text, color = "#ffffff") {
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     if (!ctx) return null;
     const fontSize = 96;
-    const font = `bold ${fontSize}px sans-serif`;
-    ctx.font = font;
+    ctx.font = `bold ${fontSize}px sans-serif`;
     const metrics = ctx.measureText(text);
     const w = Math.ceil(metrics.width);
     const h = Math.ceil(fontSize * 1.2);
     canvas.width = w;
     canvas.height = h;
-    ctx.font = font;
+    ctx.font = `bold ${fontSize}px sans-serif`;
     ctx.fillStyle = color;
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
     ctx.fillText(text, w / 2, h / 2);
     const tex = new THREE4__namespace.CanvasTexture(canvas);
     tex.minFilter = THREE4__namespace.LinearFilter;
-    const mat = new THREE4__namespace.SpriteMaterial({
-      map: tex,
-      transparent: true,
-      depthWrite: false,
-      depthTest: true
-    });
-    const sprite = new THREE4__namespace.Sprite(mat);
-    const targetHeight = 4;
-    const aspect = w / h;
-    sprite.scale.set(targetHeight * aspect, targetHeight, 1);
-    return sprite;
+    return { tex, aspect: w / h };
   }
-  function createStarTexture() {
-    const canvas = document.createElement("canvas");
-    canvas.width = 64;
-    canvas.height = 64;
-    const ctx = canvas.getContext("2d");
-    const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
-    gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
-    gradient.addColorStop(0.3, "rgba(255, 255, 255, 0.9)");
-    gradient.addColorStop(0.6, "rgba(255, 255, 255, 0.4)");
-    gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, 64, 64);
-    const tex = new THREE4__namespace.CanvasTexture(canvas);
-    return tex;
-  }
-  const starTexture = createStarTexture();
-  function clearRoot() {
-    for (const child of [...root.children]) {
-      root.remove(child);
-      disposeObject(child);
+  function getPosition(n) {
+    if (currentConfig?.arrangement) {
+      const arr = currentConfig.arrangement[n.id];
+      if (arr) return new THREE4__namespace.Vector3(arr.position[0], arr.position[1], arr.position[2]);
     }
-    nodeById.clear();
-    meshById.clear();
-    lineByBookId.clear();
-    dynamicObjects.length = 0;
+    return new THREE4__namespace.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 THREE4__namespace.Vector3(x, y, z).multiplyScalar(radius);
   }
   function buildFromModel(model, cfg) {
     clearRoot();
-    if (cfg.background && cfg.background !== "transparent") {
-      scene.background = new THREE4__namespace.Color(cfg.background);
-    } else {
-      scene.background = null;
-    }
-    camera.fov = cfg.camera?.fov ?? env.defaultFov;
-    camera.updateProjectionMatrix();
-    targetFov = camera.fov;
-    zoomOutLimitFov = camera.fov;
-    const layoutCfg = {
-      ...cfg.layout,
-      radius: cfg.layout?.radius ?? 2e3
-    };
+    scene.background = cfg.background && cfg.background !== "transparent" ? new THREE4__namespace.Color(cfg.background) : new THREE4__namespace.Color(0);
+    const layoutCfg = { ...cfg.layout, radius: cfg.layout?.radius ?? 2e3 };
     const laidOut = computeLayoutPositions(model, layoutCfg);
-    const boundaries = laidOut.meta?.divisionBoundaries ?? [];
-    if (boundaries.length > 0) {
-      const boundaryMat = new THREE4__namespace.LineBasicMaterial({
-        color: 5601177,
-        transparent: true,
-        opacity: 0.15,
-        depthWrite: false,
-        blending: THREE4__namespace.AdditiveBlending
-      });
-      boundaries.forEach((angle) => {
-        const points = [];
-        const steps = 32;
-        for (let i = 0; i <= steps; i++) {
-          const t = i / steps;
-          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;
-          const pos = new THREE4__namespace.Vector3(x, y, z).multiplyScalar(layoutCfg.radius);
-          points.push(pos);
-        }
-        const geo = new THREE4__namespace.BufferGeometry().setFromPoints(points);
-        const line = new THREE4__namespace.Line(geo, boundaryMat);
-        root.add(line);
-      });
-    }
+    const starPositions = [];
+    const starSizes = [];
+    const starColors = [];
+    const SPECTRAL_COLORS = [
+      new THREE4__namespace.Color(10203391),
+      // O - Blue
+      new THREE4__namespace.Color(11190271),
+      // B - Blue-white
+      new THREE4__namespace.Color(13293567),
+      // A - White-blue
+      new THREE4__namespace.Color(16316415),
+      // F - White
+      new THREE4__namespace.Color(16774378),
+      // G - Yellow-white
+      new THREE4__namespace.Color(16765601),
+      // K - Yellow-orange
+      new THREE4__namespace.Color(16764015)
+      // M - Orange-red
+    ];
     let minWeight = Infinity;
     let maxWeight = -Infinity;
     for (const n of laidOut.nodes) {
+      nodeById.set(n.id, n);
       if (n.level === 3 && typeof n.weight === "number") {
         if (n.weight < minWeight) minWeight = n.weight;
         if (n.weight > maxWeight) maxWeight = n.weight;
@@ -828,75 +785,113 @@ function createEngine({
       maxWeight = minWeight + 1;
     }
     for (const n of laidOut.nodes) {
-      nodeById.set(n.id, n);
-      let x = n.meta?.x ?? 0;
-      let y = n.meta?.y ?? 0;
-      let z = n.meta?.z ?? 0;
-      if (cfg.arrangement) {
-        const arr = cfg.arrangement[n.id];
-        if (arr) {
-          const pos = arr.position;
-          x = pos[0];
-          y = pos[1];
-          z = pos[2];
-        }
-      }
       if (n.level === 3) {
-        const mat = new THREE4__namespace.SpriteMaterial({
-          map: starTexture,
-          color: 16777215,
-          transparent: true,
-          blending: THREE4__namespace.AdditiveBlending,
-          depthWrite: false
-        });
-        const sprite = new THREE4__namespace.Sprite(mat);
-        sprite.position.set(x, y, z);
-        sprite.userData = { id: n.id, level: n.level };
-        let baseScale = 3.5;
+        const p = getPosition(n);
+        starPositions.push(p.x, p.y, p.z);
+        starIndexToId.push(n.id);
+        let baseSize = 3.5;
         if (typeof n.weight === "number") {
           const t = (n.weight - minWeight) / (maxWeight - minWeight);
-          baseScale = 3 + t * 4;
-        }
-        sprite.scale.setScalar(baseScale);
-        dynamicObjects.push({ obj: sprite, initialScale: sprite.scale.clone(), type: "star" });
-        if (n.label) {
-          const labelSprite = createTextSprite(n.label);
-          if (labelSprite) {
-            labelSprite.position.set(0, 3, 0);
-            labelSprite.scale.multiplyScalar(1.33);
-            labelSprite.visible = false;
-            sprite.add(labelSprite);
-          }
+          baseSize = 3 + t * 4;
         }
-        root.add(sprite);
-        meshById.set(n.id, sprite);
-      } else if (n.level === 1 || n.level === 2) {
-        if (n.label) {
-          const isBook = n.level === 2;
-          const color = isBook ? "#ffffff" : "#38bdf8";
-          const baseScale = isBook ? 6 : 4.66;
-          const labelSprite = createTextSprite(n.label, color);
-          if (labelSprite) {
-            labelSprite.position.set(x, y, z);
-            labelSprite.scale.multiplyScalar(baseScale);
-            root.add(labelSprite);
-            if (isBook) {
-              labelSprite.userData = { id: n.id, level: n.level, interactive: true };
-              meshById.set(n.id, labelSprite);
-              dynamicObjects.push({ obj: labelSprite, initialScale: labelSprite.scale.clone(), type: "label" });
-            }
-          }
+        starSizes.push(baseSize);
+        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);
+      } else if (n.level === 2) {
+        const color = "#ffffff";
+        const texRes = createTextTexture(n.label, color);
+        if (texRes) {
+          const baseScale = 0.05;
+          const size = new THREE4__namespace.Vector2(baseScale * texRes.aspect, baseScale);
+          const mat = createSmartMaterial({
+            uniforms: {
+              uMap: { value: texRes.tex },
+              uSize: { value: size },
+              uAlpha: { value: 0 }
+            },
+            vertexShaderBody: `
+                            uniform vec2 uSize;
+                            varying vec2 vUv;
+                            void main() {
+                                vUv = uv;
+                                vec4 mvPos = modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);
+                                vec4 projected = smartProject(mvPos);
+                                vec2 offset = position.xy * uSize;
+                                projected.xy += offset / vec2(uAspect, 1.0);
+                                gl_Position = projected;
+                            }
+                        `,
+            fragmentShader: `
+                            uniform sampler2D uMap;
+                            uniform float uAlpha;
+                            varying vec2 vUv;
+                            void main() {
+                                float mask = getMaskAlpha();
+                                if (mask < 0.01) discard;
+                                vec4 tex = texture2D(uMap, vUv);
+                                gl_FragColor = vec4(tex.rgb, tex.a * uAlpha * mask);
+                            }
+                        `,
+            transparent: true,
+            depthWrite: false,
+            depthTest: true
+          });
+          const mesh = new THREE4__namespace.Mesh(new THREE4__namespace.PlaneGeometry(1, 1), mat);
+          const p = getPosition(n);
+          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() });
         }
       }
     }
-    applyVisuals({ model: laidOut, cfg, meshById });
-    const lineMat = new THREE4__namespace.LineBasicMaterial({
-      color: 4478310,
+    const starGeo = new THREE4__namespace.BufferGeometry();
+    starGeo.setAttribute("position", new THREE4__namespace.Float32BufferAttribute(starPositions, 3));
+    starGeo.setAttribute("size", new THREE4__namespace.Float32BufferAttribute(starSizes, 1));
+    starGeo.setAttribute("color", new THREE4__namespace.Float32BufferAttribute(starColors, 3));
+    const starMat = createSmartMaterial({
+      uniforms: { pixelRatio: { value: renderer.getPixelRatio() } },
+      vertexShaderBody: `
+                attribute float size; 
+                attribute vec3 color; 
+                varying vec3 vColor; 
+                uniform float pixelRatio; 
+                void main() { 
+                    vColor = color; 
+                    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
+                    gl_Position = smartProject(mvPosition); 
+                    vScreenPos = gl_Position.xy / gl_Position.w; 
+                    gl_PointSize = size * pixelRatio * (2000.0 / -mvPosition.z); 
+                }
+            `,
+      fragmentShader: `
+                varying vec3 vColor; 
+                void main() { 
+                    vec2 coord = gl_PointCoord - vec2(0.5); 
+                    // Use larger drawing area for glow
+                    float dist = length(coord) * 2.0; 
+                    if (dist > 1.0) discard; 
+                    
+                    float alphaMask = getMaskAlpha(); 
+                    if (alphaMask < 0.01) discard; 
+                    
+                    // Gaussian Glow: Sharp core, soft halo
+                    float alpha = exp(-3.0 * dist * dist);
+                    
+                    gl_FragColor = vec4(vColor, alpha * alphaMask); 
+                }
+            `,
       transparent: true,
-      opacity: 0.3,
       depthWrite: false,
-      blending: THREE4__namespace.AdditiveBlending
+      depthTest: true
     });
+    starPoints = new THREE4__namespace.Points(starGeo, starMat);
+    starPoints.frustumCulled = false;
+    root.add(starPoints);
+    const linePoints = [];
     const bookMap = /* @__PURE__ */ new Map();
     for (const n of laidOut.nodes) {
       if (n.level === 3 && n.parent) {
@@ -905,94 +900,63 @@ function createEngine({
         bookMap.set(n.parent, list);
       }
     }
-    for (const [bookId, chapters] of bookMap.entries()) {
-      chapters.sort((a, b) => {
-        const cA = a.meta?.chapter || 0;
-        const cB = b.meta?.chapter || 0;
-        return cA - cB;
-      });
+    for (const chapters of bookMap.values()) {
+      chapters.sort((a, b) => (a.meta?.chapter || 0) - (b.meta?.chapter || 0));
       if (chapters.length < 2) continue;
-      const points = [];
-      for (const c of chapters) {
-        const x = c.meta?.x ?? 0;
-        const y = c.meta?.y ?? 0;
-        const z = c.meta?.z ?? 0;
-        points.push(new THREE4__namespace.Vector3(x, y, z));
-      }
-      const geo = new THREE4__namespace.BufferGeometry().setFromPoints(points);
-      const line = new THREE4__namespace.Line(geo, lineMat);
-      root.add(line);
-      lineByBookId.set(bookId, line);
-    }
-    resize();
-  }
-  function applyFocus(targetId, animate = true) {
-    if (!targetId) {
-      for (const [id, mesh] of meshById.entries()) {
-        mesh.traverse((obj) => {
-          if (obj.material) obj.material.opacity = 1;
-        });
-        mesh.userData.interactive = true;
-      }
-      for (const line of lineByBookId.values()) {
-        line.visible = true;
-        line.material.opacity = 0.3;
-      }
-      return;
-    }
-    const childrenMap = /* @__PURE__ */ new Map();
-    for (const n of nodeById.values()) {
-      if (n.parent) {
-        const list = childrenMap.get(n.parent) ?? [];
-        list.push(n.id);
-        childrenMap.set(n.parent, list);
+      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);
       }
     }
-    const activeIds = /* @__PURE__ */ new Set();
-    const queue = [targetId];
-    activeIds.add(targetId);
-    while (queue.length > 0) {
-      const curr = queue.pop();
-      const kids = childrenMap.get(curr);
-      if (kids) {
-        for (const k of kids) {
-          activeIds.add(k);
-          queue.push(k);
-        }
-      }
-    }
-    for (const [id, mesh] of meshById.entries()) {
-      const isActive = activeIds.has(id);
-      const opacity = isActive ? 1 : 0.1;
-      mesh.traverse((obj) => {
-        if (obj.material) obj.material.opacity = opacity;
+    if (linePoints.length > 0) {
+      const lineGeo = new THREE4__namespace.BufferGeometry();
+      lineGeo.setAttribute("position", new THREE4__namespace.Float32BufferAttribute(linePoints, 3));
+      const lineMat = createSmartMaterial({
+        uniforms: { color: { value: new THREE4__namespace.Color(4478310) } },
+        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: THREE4__namespace.AdditiveBlending
       });
-      mesh.userData.interactive = isActive;
-    }
-    for (const [bookId, line] of lineByBookId.entries()) {
-      const isActive = activeIds.has(bookId);
-      line.material.opacity = isActive ? 0.3 : 0.05;
+      constellationLines = new THREE4__namespace.LineSegments(lineGeo, lineMat);
+      constellationLines.frustumCulled = false;
+      root.add(constellationLines);
     }
-    if (animate) {
-      const targetMesh = meshById.get(targetId);
-      if (targetMesh) {
-        animateFocusTo(targetMesh);
-      } else {
-        const sum = new THREE4__namespace.Vector3();
-        let count = 0;
-        for (const id of activeIds) {
-          const mesh = meshById.get(id);
-          if (mesh) {
-            sum.add(mesh.getWorldPosition(new THREE4__namespace.Vector3()));
-            count++;
-          }
-        }
-        if (count > 0) {
-          const centroid = sum.divideScalar(count);
-          animateFocusTo(centroid);
+    const boundaries = laidOut.meta?.divisionBoundaries ?? [];
+    if (boundaries.length > 0) {
+      const boundaryMat = createSmartMaterial({
+        uniforms: { color: { value: new THREE4__namespace.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: THREE4__namespace.AdditiveBlending
+      });
+      const boundaryGeo = new THREE4__namespace.BufferGeometry();
+      const bPoints = [];
+      boundaries.forEach((angle) => {
+        const steps = 32;
+        for (let i = 0; i < steps; i++) {
+          const t1 = i / steps;
+          const t2 = (i + 1) / steps;
+          const p1 = getBoundaryPoint(angle, t1, layoutCfg.radius);
+          const p2 = getBoundaryPoint(angle, t2, layoutCfg.radius);
+          bPoints.push(p1.x, p1.y, p1.z);
+          bPoints.push(p2.x, p2.y, p2.z);
         }
-      }
+      });
+      boundaryGeo.setAttribute("position", new THREE4__namespace.Float32BufferAttribute(bPoints, 3));
+      const boundaryLines = new THREE4__namespace.LineSegments(boundaryGeo, boundaryMat);
+      boundaryLines.frustumCulled = false;
+      root.add(boundaryLines);
     }
+    resize();
   }
   let lastData = void 0;
   let lastAdapter = void 0;
@@ -1019,268 +983,370 @@ function createEngine({
     }
     if (shouldRebuild && model) {
       buildFromModel(model, cfg);
-    } else if (cfg.arrangement) {
-      for (const [id, val] of Object.entries(cfg.arrangement)) {
-        const mesh = meshById.get(id);
-        if (mesh) {
-          mesh.position.set(val.position[0], val.position[1], val.position[2]);
-        }
-      }
-    }
-    if (cfg.focus?.nodeId) {
-      applyFocus(cfg.focus.nodeId, cfg.focus.animate);
-    } else {
-      applyFocus(void 0, false);
+    } else if (cfg.arrangement && starPoints) {
+      if (lastModel) buildFromModel(lastModel, cfg);
     }
-    updateDragControls(!!cfg.editable);
   }
   function setHandlers(next) {
     handlers = next;
   }
-  function pick(ev) {
-    const rect = renderer.domElement.getBoundingClientRect();
-    pointer.x = (ev.clientX - rect.left) / rect.width * 2 - 1;
-    pointer.y = -((ev.clientY - rect.top) / rect.height * 2 - 1);
-    raycaster.setFromCamera(pointer, camera);
-    const hits = raycaster.intersectObjects(root.children, true);
-    const hit = hits.find(
-      (h) => (h.object.type === "Mesh" || h.object.type === "Sprite") && h.object.userData.interactive !== false
-    );
-    const id = hit?.object?.userData?.id;
-    return id ? nodeById.get(id) : void 0;
-  }
-  function onPointerMove(ev) {
-    const node = pick(ev);
-    const nextId = node?.id ?? null;
-    if (nextId !== hoveredId) {
-      if (hoveredId) {
-        const prevMesh = meshById.get(hoveredId);
-        const prevNode = nodeById.get(hoveredId);
-        if (prevMesh && prevNode && prevNode.level === 3) {
-          const label = prevMesh.children.find((c) => c instanceof THREE4__namespace.Sprite);
-          if (label) label.visible = false;
-        }
-      }
-      hoveredId = nextId;
-      if (nextId) {
-        const mesh = meshById.get(nextId);
-        const n = nodeById.get(nextId);
-        if (mesh && n && n.level === 3) {
-          const label = mesh.children.find((c) => c instanceof THREE4__namespace.Sprite);
-          if (label) {
-            label.visible = true;
-            label.position.set(0, 3, 0);
-          }
-          if (n.parent) {
-            const line = lineByBookId.get(n.parent);
-            if (line) line.material.opacity = 0.8;
+  function getFullArrangement() {
+    const arr = {};
+    if (starPoints && starPoints.geometry.attributes.position) {
+      const positions = starPoints.geometry.attributes.position.array;
+      for (let i = 0; i < starIndexToId.length; i++) {
+        const id = starIndexToId[i];
+        if (id) {
+          const x = positions[i * 3] ?? 0;
+          const y = positions[i * 3 + 1] ?? 0;
+          const z = positions[i * 3 + 2] ?? 0;
+          if (Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(z)) {
+            arr[id] = { position: [x, y, z] };
           }
         }
       }
-      handlers.onHover?.(node);
     }
+    for (const item of dynamicLabels) {
+      arr[item.node.id] = { position: [item.obj.position.x, item.obj.position.y, item.obj.position.z] };
+    }
+    return arr;
   }
-  function onPointerDown() {
-    isDragging = false;
-  }
-  function onChange() {
-    isDragging = true;
+  function pick(ev) {
+    const rect = renderer.domElement.getBoundingClientRect();
+    const mX = ev.clientX - rect.left;
+    const mY = ev.clientY - rect.top;
+    mouseNDC.x = mX / rect.width * 2 - 1;
+    mouseNDC.y = -(mY / rect.height) * 2 + 1;
+    let closestLabel = null;
+    let minLabelDist = 40;
+    const uScale = globalUniforms.uScale.value;
+    const uAspect = camera.aspect;
+    const w = rect.width;
+    const h = rect.height;
+    for (const item of dynamicLabels) {
+      if (!item.obj.visible) continue;
+      const pWorld = item.obj.position;
+      const pProj = smartProjectJS(pWorld);
+      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);
+      const isBehind = globalUniforms.uBlend.value > 0.5 && pProj.z > 0.4 || globalUniforms.uBlend.value < 0.1 && pProj.z > -0.1;
+      if (!isBehind && d < minLabelDist) {
+        minLabelDist = d;
+        closestLabel = item;
+      }
+    }
+    if (closestLabel) return { type: "label", node: closestLabel.node, object: closestLabel.obj, point: closestLabel.obj.position.clone(), index: void 0 };
+    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 = 5 * (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) return { type: "star", node, index: pointHit.index, point: pointHit.point, object: void 0 };
+      }
+    }
+    return void 0;
   }
-  const onWheelFov = (ev) => {
-    ev.preventDefault();
-    const speed = (ev.ctrlKey ? 0.15 : 1) * (env.fovWheelSensitivity);
-    const maxFov = Math.min(env.maxFov, zoomOutLimitFov) ;
-    targetFov = THREE4__namespace.MathUtils.clamp(
-      targetFov + ev.deltaY * speed,
-      env.minFov,
-      maxFov
-    );
-  };
-  const onDblClick = (ev) => {
-    const node = pick(ev);
-    if (node) {
-      const mesh = meshById.get(node.id);
-      if (mesh) {
-        animateFocusTo(mesh);
+  function onMouseDown(e) {
+    state.lastMouseX = e.clientX;
+    state.lastMouseY = e.clientY;
+    if (currentConfig?.editable) {
+      const hit = pick(e);
+      if (hit) {
+        state.dragMode = "node";
+        state.draggedNodeId = hit.node.id;
+        state.draggedDist = hit.point.length();
+        document.body.style.cursor = "crosshair";
+        if (hit.type === "star") {
+          state.draggedStarIndex = hit.index ?? -1;
+          state.draggedGroup = null;
+        } else if (hit.type === "label") {
+          const bookId = hit.node.id;
+          const children = [];
+          if (starPoints && starPoints.geometry.attributes.position) {
+            const positions = starPoints.geometry.attributes.position.array;
+            for (let i = 0; i < starIndexToId.length; i++) {
+              const starId = starIndexToId[i];
+              if (starId) {
+                const starNode = nodeById.get(starId);
+                if (starNode && starNode.parent === bookId) {
+                  children.push({ index: i, initialPos: new THREE4__namespace.Vector3(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]) });
+                }
+              }
+            }
+          }
+          state.draggedGroup = { labelInitialPos: hit.object.position.clone(), children };
+          state.draggedStarIndex = -1;
+        }
         return;
       }
     }
-    targetFov = env.defaultFov;
-  };
-  let focusAnimRaf = 0;
-  function cancelFocusAnim() {
-    if (focusAnimRaf) cancelAnimationFrame(focusAnimRaf);
-    focusAnimRaf = 0;
-  }
-  function getControlsAnglesSafe() {
-    const getAz = controls.getAzimuthalAngle?.bind(controls);
-    const getPol = controls.getPolarAngle?.bind(controls);
-    return {
-      azimuth: typeof getAz === "function" ? getAz() : 0,
-      polar: typeof getPol === "function" ? getPol() : Math.PI / 4
-    };
+    state.dragMode = "camera";
+    state.isDragging = true;
+    state.velocityX = 0;
+    state.velocityY = 0;
+    document.body.style.cursor = "grabbing";
   }
-  function setControlsAnglesSafe(azimuth, polar) {
-    const setAz = controls.setAzimuthalAngle?.bind(controls);
-    const setPol = controls.setPolarAngle?.bind(controls);
-    if (typeof setAz === "function" && typeof setPol === "function") {
-      setAz(azimuth);
-      setPol(polar);
-      controls.update();
-      return;
+  function onMouseMove(e) {
+    const rect = renderer.domElement.getBoundingClientRect();
+    const mX = e.clientX - rect.left;
+    const mY = e.clientY - rect.top;
+    mouseNDC.x = mX / rect.width * 2 - 1;
+    mouseNDC.y = -(mY / rect.height) * 2 + 1;
+    isMouseInWindow = true;
+    if (state.dragMode === "node") {
+      const worldDir = getMouseWorldVector(mX, mY, rect.width, rect.height);
+      const newPos = worldDir.multiplyScalar(state.draggedDist);
+      if (state.draggedStarIndex !== -1 && starPoints) {
+        const idx = state.draggedStarIndex;
+        const attr = starPoints.geometry.attributes.position;
+        attr.setXYZ(idx, newPos.x, newPos.y, newPos.z);
+        attr.needsUpdate = true;
+      } else if (state.draggedGroup && state.draggedNodeId) {
+        const group = state.draggedGroup;
+        const item = dynamicLabels.find((l) => l.node.id === state.draggedNodeId);
+        if (item) item.obj.position.copy(newPos);
+        const vStart = group.labelInitialPos.clone().normalize();
+        const vEnd = newPos.clone().normalize();
+        const q = new THREE4__namespace.Quaternion().setFromUnitVectors(vStart, vEnd);
+        if (starPoints && group.children.length > 0) {
+          const attr = starPoints.geometry.attributes.position;
+          const tempVec = new THREE4__namespace.Vector3();
+          for (const child of group.children) {
+            tempVec.copy(child.initialPos).applyQuaternion(q);
+            attr.setXYZ(child.index, tempVec.x, tempVec.y, tempVec.z);
+          }
+          attr.needsUpdate = true;
+        }
+      }
+    } else if (state.dragMode === "camera") {
+      const deltaX = e.clientX - state.lastMouseX;
+      const deltaY = e.clientY - state.lastMouseY;
+      state.lastMouseX = e.clientX;
+      state.lastMouseY = e.clientY;
+      const speedScale = state.fov / ENGINE_CONFIG.defaultFov;
+      state.targetLon += deltaX * ENGINE_CONFIG.dragSpeed * speedScale;
+      state.targetLat += deltaY * ENGINE_CONFIG.dragSpeed * speedScale;
+      state.targetLat = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, state.targetLat));
+      state.velocityX = deltaX * ENGINE_CONFIG.dragSpeed * speedScale;
+      state.velocityY = deltaY * ENGINE_CONFIG.dragSpeed * speedScale;
+      state.lon = state.targetLon;
+      state.lat = state.targetLat;
+    } else {
+      const hit = pick(e);
+      if (hit?.node.id !== handlers._lastHoverId) {
+        handlers._lastHoverId = hit?.node.id;
+        handlers.onHover?.(hit?.node);
+      }
+      document.body.style.cursor = hit ? currentConfig?.editable ? "crosshair" : "pointer" : "default";
     }
-    const dir = new THREE4__namespace.Vector3();
-    dir.setFromSphericalCoords(1, polar, azimuth);
-    const lookAt2 = dir.clone().multiplyScalar(10);
-    camera.lookAt(lookAt2);
   }
-  function aimAtWorldPoint(worldPoint) {
-    const dir = worldPoint.clone().normalize().negate();
-    const spherical = new THREE4__namespace.Spherical().setFromVector3(dir);
-    let targetPolar = spherical.phi;
-    let targetAz = spherical.theta;
-    targetPolar = THREE4__namespace.MathUtils.clamp(targetPolar, controls.minPolarAngle, controls.maxPolarAngle);
-    return { targetAz, targetPolar };
-  }
-  function easeInOutCubic(t) {
-    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+  function onMouseUp(e) {
+    if (state.dragMode === "node") {
+      const fullArr = getFullArrangement();
+      handlers.onArrangementChange?.(fullArr);
+      state.dragMode = "none";
+      state.draggedNodeId = null;
+      state.draggedStarIndex = -1;
+      state.draggedGroup = null;
+      document.body.style.cursor = "default";
+    } else if (state.dragMode === "camera") {
+      state.isDragging = false;
+      state.dragMode = "none";
+      document.body.style.cursor = "default";
+    } else {
+      const hit = pick(e);
+      if (hit) handlers.onSelect?.(hit.node);
+    }
   }
-  function animateFocusTo(target) {
-    cancelFocusAnim();
-    const { azimuth: startAz, polar: startPolar } = getControlsAnglesSafe();
-    const startFov = camera.fov;
-    const targetPos = target instanceof THREE4__namespace.Object3D ? target.getWorldPosition(new THREE4__namespace.Vector3()) : target;
-    const { targetAz, targetPolar } = aimAtWorldPoint(targetPos);
-    const endFov = THREE4__namespace.MathUtils.clamp(env.focusZoomFov, env.minFov, env.maxFov);
-    const start2 = performance.now();
-    const dur = Math.max(120, env.focusDurationMs);
-    const tick = (now) => {
-      const t = THREE4__namespace.MathUtils.clamp((now - start2) / dur, 0, 1);
-      const k = easeInOutCubic(t);
-      let dAz = targetAz - startAz;
-      dAz = (dAz + Math.PI) % (Math.PI * 2) - Math.PI;
-      const curAz = startAz + dAz * k;
-      const curPolar = THREE4__namespace.MathUtils.lerp(startPolar, targetPolar, k);
-      setControlsAnglesSafe(curAz, curPolar);
-      camera.fov = THREE4__namespace.MathUtils.lerp(startFov, endFov, k);
-      camera.updateProjectionMatrix();
-      if (t < 1) {
-        focusAnimRaf = requestAnimationFrame(tick);
-      } else {
-        focusAnimRaf = 0;
-      }
-    };
-    focusAnimRaf = requestAnimationFrame(tick);
+  function onWheel(e) {
+    e.preventDefault();
+    const aspect = container.clientWidth / container.clientHeight;
+    renderer.domElement.getBoundingClientRect();
+    const vBefore = getMouseViewVector(state.fov, aspect);
+    const zoomSpeed = 1e-3 * state.fov;
+    state.fov += e.deltaY * zoomSpeed;
+    state.fov = Math.max(ENGINE_CONFIG.minFov, Math.min(ENGINE_CONFIG.maxFov, state.fov));
+    updateUniforms();
+    const vAfter = getMouseViewVector(state.fov, aspect);
+    const quaternion = new THREE4__namespace.Quaternion().setFromUnitVectors(vAfter, vBefore);
+    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 THREE4__namespace.Vector3(x, y, z);
+    const camForward = currentLook.clone().normalize();
+    const camUp = camera.up.clone();
+    const camRight = new THREE4__namespace.Vector3().crossVectors(camForward, camUp).normalize();
+    const camUpOrtho = new THREE4__namespace.Vector3().crossVectors(camRight, camForward).normalize();
+    const mat = new THREE4__namespace.Matrix4().makeBasis(camRight, camUpOrtho, camForward.clone().negate());
+    const qOld = new THREE4__namespace.Quaternion().setFromRotationMatrix(mat);
+    const qNew = qOld.clone().multiply(quaternion);
+    const newForward = new THREE4__namespace.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 THREE4__namespace.Vector3(0, 1, 0).applyQuaternion(qNew);
+    camera.up.copy(newUp);
+    if (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));
+      const bias = ENGINE_CONFIG.zenithStrength * t;
+      const zenithLat = Math.PI / 2 - 1e-3;
+      state.lat = mix(state.lat, zenithLat, bias);
+    }
+    state.targetLat = state.lat;
+    state.targetLon = state.lon;
   }
-  function onPointerUp(ev) {
-    if (isDragging) return;
-    const node = pick(ev);
-    if (!node) return;
-    handlers.onSelect?.(node);
+  function resize() {
+    const w = container.clientWidth || 1;
+    const h = container.clientHeight || 1;
+    renderer.setSize(w, h, false);
+    camera.aspect = w / h;
+    updateUniforms();
   }
   function start() {
     if (running) return;
     running = true;
     resize();
     window.addEventListener("resize", resize);
-    renderer.domElement.addEventListener("pointermove", onPointerMove);
-    renderer.domElement.addEventListener("pointerdown", onPointerDown);
-    renderer.domElement.addEventListener("pointerup", onPointerUp);
-    renderer.domElement.addEventListener("wheel", onWheelFov, { passive: false });
-    renderer.domElement.addEventListener("dblclick", onDblClick);
-    controls.addEventListener("change", onChange);
-    lastFrameMs = performance.now();
-    const tick = () => {
-      raf = requestAnimationFrame(tick);
-      const now = performance.now();
-      const dt = Math.min(0.05, Math.max(0, (now - lastFrameMs) / 1e3));
-      lastFrameMs = now;
-      const lerpK = 1 - Math.pow(1 - (env.zoomLerp), dt * 60);
-      const prevFov = camera.fov;
-      camera.fov = THREE4__namespace.MathUtils.lerp(camera.fov, targetFov, lerpK);
-      if (Math.abs(camera.fov - prevFov) > 1e-4) camera.updateProjectionMatrix();
-      controls.rotateSpeed = camera.fov / (env.defaultFov);
-      {
-        backdropGroup.rotation.y += SIDEREAL_RATE * (env.timeScale) * dt;
-      }
-      const fovNorm = (env.maxFov - camera.fov) / Math.max(1e-6, env.maxFov - env.minFov);
-      const fovN = THREE4__namespace.MathUtils.clamp(fovNorm, 0, 1);
-      const overlayFade = THREE4__namespace.MathUtils.clamp(1 - fovN * 1.15, 0, 1);
-      const minZoomFov = 15;
-      const scaleFactor = THREE4__namespace.MathUtils.clamp(
-        1 + (camera.fov - minZoomFov) * 0.05,
-        0.85,
-        6
-      );
-      const cameraDir = new THREE4__namespace.Vector3();
-      camera.getWorldDirection(cameraDir);
-      const objPos = new THREE4__namespace.Vector3();
-      const objDir = new THREE4__namespace.Vector3();
-      for (const item of dynamicObjects) {
-        item.obj.scale.copy(item.initialScale).multiplyScalar(scaleFactor);
-        if (item.type === "label") {
-          const sprite = item.obj;
-          sprite.getWorldPosition(objPos);
-          objDir.subVectors(objPos, camera.position).normalize();
-          const dot = cameraDir.dot(objDir);
-          const fullVisibleDot = 0.96;
-          const invisibleDot = 0.88;
-          let opacity = 0;
-          if (dot >= fullVisibleDot) {
-            opacity = 1;
-          } else if (dot > invisibleDot) {
-            opacity = (dot - invisibleDot) / (fullVisibleDot - invisibleDot);
-          }
-          const finalOpacity = opacity * overlayFade;
-          sprite.material.opacity = finalOpacity;
-          sprite.visible = finalOpacity > 0.01;
-          const bookId = nodeById.get(item.obj.userData.id)?.id;
-          if (bookId) {
-            const line = lineByBookId.get(bookId);
-            if (line) {
-              line.material.opacity = (0.05 + opacity * 0.45) * overlayFade;
-            }
-          }
-        }
+    const el = renderer.domElement;
+    el.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    el.addEventListener("wheel", onWheel, { passive: false });
+    el.addEventListener("mouseenter", () => {
+      isMouseInWindow = true;
+    });
+    el.addEventListener("mouseleave", () => {
+      isMouseInWindow = false;
+    });
+    raf = requestAnimationFrame(tick);
+  }
+  function tick() {
+    if (!running) return;
+    raf = requestAnimationFrame(tick);
+    if (!state.isDragging && isMouseInWindow) {
+      const t = ENGINE_CONFIG.edgePanThreshold;
+      const speedBase = ENGINE_CONFIG.edgePanMaxSpeed * (state.fov / ENGINE_CONFIG.defaultFov);
+      let panX = 0;
+      let panY = 0;
+      if (mouseNDC.x < -1 + t) {
+        const s = (-1 + t - mouseNDC.x) / t;
+        panX = -s * s * speedBase;
+      } else if (mouseNDC.x > 1 - t) {
+        const s = (mouseNDC.x - (1 - t)) / t;
+        panX = s * s * speedBase;
+      }
+      if (mouseNDC.y < -1 + t) {
+        const s = (-1 + t - mouseNDC.y) / t;
+        panY = -s * s * speedBase;
+      } else if (mouseNDC.y > 1 - t) {
+        const s = (mouseNDC.y - (1 - t)) / t;
+        panY = s * s * speedBase;
+      }
+      if (Math.abs(panX) > 0 || Math.abs(panY) > 0) {
+        state.lon += panX;
+        state.lat += panY;
+        state.targetLon = state.lon;
+        state.targetLat = state.lat;
+      } else {
+        state.lon += state.velocityX;
+        state.lat += state.velocityY;
+        state.velocityX *= ENGINE_CONFIG.inertiaDamping;
+        state.velocityY *= ENGINE_CONFIG.inertiaDamping;
+        if (Math.abs(state.velocityX) < 1e-6) state.velocityX = 0;
+        if (Math.abs(state.velocityY) < 1e-6) state.velocityY = 0;
+      }
+    } else if (!state.isDragging) {
+      state.lon += state.velocityX;
+      state.lat += state.velocityY;
+      state.velocityX *= ENGINE_CONFIG.inertiaDamping;
+      state.velocityY *= ENGINE_CONFIG.inertiaDamping;
+    }
+    state.lat = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, state.lat));
+    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 target = new THREE4__namespace.Vector3(x, y, z);
+    const idealUp = new THREE4__namespace.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);
+    updateUniforms();
+    const cameraDir = new THREE4__namespace.Vector3();
+    camera.getWorldDirection(cameraDir);
+    const objPos = new THREE4__namespace.Vector3();
+    const objDir = new THREE4__namespace.Vector3();
+    const SHOW_LABELS_FOV = 60;
+    for (const item of dynamicLabels) {
+      const uniforms = item.obj.material.uniforms;
+      let targetAlpha = 0;
+      if (state.fov < SHOW_LABELS_FOV) {
+        item.obj.getWorldPosition(objPos);
+        objDir.subVectors(objPos, camera.position).normalize();
+        const dot = cameraDir.dot(objDir);
+        const fullVisibleDot = 0.98;
+        const invisibleDot = 0.9;
+        let gazeOpacity = 0;
+        if (dot >= fullVisibleDot) gazeOpacity = 1;
+        else if (dot > invisibleDot) gazeOpacity = (dot - invisibleDot) / (fullVisibleDot - invisibleDot);
+        const zoomFactor = 1 - THREE4__namespace.MathUtils.smoothstep(40, SHOW_LABELS_FOV, state.fov);
+        targetAlpha = gazeOpacity * zoomFactor;
+      }
+      if (uniforms.uAlpha) {
+        uniforms.uAlpha.value = THREE4__namespace.MathUtils.lerp(uniforms.uAlpha.value, targetAlpha, 0.1);
+        item.obj.visible = uniforms.uAlpha.value > 0.01;
       }
-      controls.update();
-      renderer.render(scene, camera);
-    };
-    tick();
+    }
+    renderer.render(scene, camera);
   }
   function stop() {
     running = false;
     cancelAnimationFrame(raf);
-    cancelFocusAnim();
     window.removeEventListener("resize", resize);
-    renderer.domElement.removeEventListener("pointermove", onPointerMove);
-    renderer.domElement.removeEventListener("pointerdown", onPointerDown);
-    renderer.domElement.removeEventListener("pointerup", onPointerUp);
-    renderer.domElement.removeEventListener("wheel", onWheelFov);
-    renderer.domElement.removeEventListener("dblclick", onDblClick);
-    controls.removeEventListener("change", onChange);
+    const el = renderer.domElement;
+    el.removeEventListener("mousedown", onMouseDown);
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+    el.removeEventListener("wheel", onWheel);
   }
   function dispose() {
     stop();
-    clearRoot();
-    for (const child of [...groundGroup.children]) {
-      groundGroup.remove(child);
-      disposeObject(child);
-    }
-    for (const child of [...backdropGroup.children]) {
-      backdropGroup.remove(child);
-      disposeObject(child);
-    }
-    controls.dispose();
     renderer.dispose();
     renderer.domElement.remove();
   }
   return { setConfig, start, stop, dispose, setHandlers, getFullArrangement };
 }
+var ENGINE_CONFIG;
 var init_createEngine = __esm({
   "src/engine/createEngine.ts"() {
     init_layout();
     init_materials();
+    ENGINE_CONFIG = {
+      minFov: 10,
+      maxFov: 165,
+      defaultFov: 80,
+      dragSpeed: 125e-5,
+      inertiaDamping: 0.92,
+      blendStart: 60,
+      blendEnd: 165,
+      zenithStartFov: 110,
+      zenithStrength: 0.02,
+      horizonLockStrength: 0.05,
+      edgePanThreshold: 0.15,
+      edgePanMaxSpeed: 0.02
+    };
   }
 });
 var StarMap = react.forwardRef(