@naniteninja/trait-visual 1.0.1

package/fesm2022/naniteninja-trait-visual.mjs

@@ -0,0 +1,2020 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Input, ViewChild, Component } from '@angular/core';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import * as PCAImport from 'ml-pca';
+
+class Node extends THREE.Object3D {
+    options;
+    velocity;
+    isSun;
+    attributes;
+    preferences;
+    preference = 0;
+    mesh;
+    swap = null;
+    static attributeWeights = [];
+    static preferenceWeights = [];
+    static normalizeWeights(weights, len) {
+        const list = Array.isArray(weights) ? weights.slice(0, len) : [];
+        const extended = list.slice();
+        while (extended.length < len)
+            extended.push(1);
+        return extended.map((w) => (Number.isFinite(w) && w >= 0 ? w : 0));
+    }
+    sunBaseScale = 3;
+    halo;
+    coreSprite;
+    haloSprite;
+    baseSphereRadius = 0.05; // geometry radius
+    clock = new THREE.Clock();
+    constructor(data, options) {
+        super();
+        this.options = options;
+        this.position.fromArray(data.initialPosition);
+        this.velocity = new THREE.Vector3(0, 0, 0);
+        this.userData = { ...data };
+        this.isSun = data.isSun;
+        this.attributes = data.attributes
+            ? [...Object.values(data.attributes)]
+            : Array.from({ length: 10 }, () => Math.floor(Math.random() * 99));
+        this.preferences = data.preferences
+            ? [...Object.values(data.preferences)]
+            : Array.from({ length: 10 }, () => Math.floor(Math.random() * 99));
+        // Create glowing core using additive Fresnel-like shader (center-bright)
+        const geom = new THREE.SphereGeometry(this.baseSphereRadius, 48, 48);
+        const coreMat = makeCoreGlowMaterial(this.isSun ? new THREE.Color('#C300FF') : new THREE.Color('#FF3366'), this.isSun ? 0.9 : 0.7, 3.5, this.isSun ? 0.6 : 0.35 // base floor so planets stay red from all angles
+        );
+        this.mesh = new THREE.Mesh(geom, coreMat);
+        this.add(this.mesh);
+        // Soft additive rim glow (BackSide Fresnel)
+        const haloMat = makeRimGlowMaterial(this.isSun ? new THREE.Color('#C300FF') : new THREE.Color('#FF3366'), this.isSun ? 0.22 : 0.16, 0.2, 2.2);
+        this.halo = new THREE.Mesh(geom.clone(), haloMat);
+        this.halo.scale.setScalar(this.isSun ? 1.8 : 1.35);
+        this.add(this.halo);
+        // Camera-facing luminous core billboard to ensure visibility from all angles
+        this.coreSprite = this.createBillboardGlow(this.isSun ? new THREE.Color('#C300FF') : new THREE.Color('#FF3366'), this.isSun ? 0.35 : 0.25, // reduced to avoid washing out particles
+        this.isSun ? 1.4 : 1.05);
+        this.coreSprite.visible = false; // keep glow sprites hidden for clearer particles
+        this.add(this.coreSprite);
+        // Softer, larger halo billboard (always-on rim feel)
+        this.halo.visible = false; // keep mesh halo hidden
+        this.haloSprite = this.createBillboardGlow(this.isSun ? new THREE.Color('#C300FF') : new THREE.Color('#FF3366'), this.isSun ? 0.08 : 0.06, // much softer halo
+        this.isSun ? 2.2 : 1.6);
+        this.haloSprite.renderOrder = 18;
+        this.haloSprite.visible = false; // hide outer halo to ensure particles remain readable
+        this.add(this.haloSprite);
+    }
+    updatePhysics(nodes, central, deltaTime) {
+        if (!nodes || nodes.length === 0)
+            return;
+        const forces = nodes.map(() => new THREE.Vector3());
+        // --- Attraction: from each non-sun node to central (sun) ---
+        if (central) {
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (node === central)
+                    continue;
+                const d = central.position.clone().sub(node.position);
+                const distanceSq = d.lengthSq() + 1e-4;
+                const compatibility = node.calculatePreferredCompatibility(central);
+                let force = d
+                    .normalize()
+                    .multiplyScalar((this.options.sun.attraction * compatibility * 2.0) /
+                    (distanceSq + 0.5));
+                // Clamp runaway attraction
+                force.clampLength(0, 0.08);
+                forces[i].add(force);
+            }
+        }
+        // ---Outer ↔ Outer interactions (blend of attraction and repulsion) ---
+        for (let i = 0; i < nodes.length; i++) {
+            const a = nodes[i];
+            if (a === central)
+                continue;
+            for (let j = i + 1; j < nodes.length; j++) {
+                const b = nodes[j];
+                if (b === central)
+                    continue;
+                const dir = b.position.clone().sub(a.position);
+                const distSq = dir.lengthSq() + 1e-6;
+                const dist = Math.sqrt(distSq);
+                if (dist < 1e-8)
+                    continue;
+                const similarity = a.calculateAttributeCompatibility(b);
+                const dissimilarity = 1 - similarity;
+                const radiusA = a.baseSphereRadius * a.mesh.scale.x;
+                const radiusB = b.baseSphereRadius * b.mesh.scale.x;
+                const minDist = (radiusA + radiusB) * 1;
+                if (dist < minDist) {
+                    const repel = dir
+                        .normalize()
+                        .multiplyScalar(this.options.planet.repulsion / (distSq + 0.01));
+                    repel.clampLength(0, 0.25);
+                    forces[i].sub(repel);
+                    forces[j].add(repel);
+                    continue;
+                }
+                const attractMag = (30 * similarity * 3.0) / (distSq + 0.5);
+                const repelMag = 90 * dissimilarity / (distSq + 0.5);
+                const netMag = attractMag - repelMag;
+                if (Math.abs(netMag) < 1e-4)
+                    continue;
+                const f = dir.normalize().multiplyScalar(netMag).clampLength(-0.9, 0.9);
+                forces[i].add(f);
+                forces[j].add(f.clone().multiplyScalar(-1));
+            }
+        }
+        // ---Extra Repulsion (outer nodes only) ---
+        for (let i = 0; i < nodes.length; i++) {
+            const a = nodes[i];
+            if (a === central)
+                continue;
+            for (let j = i + 1; j < nodes.length; j++) {
+                const b = nodes[j];
+                if (b === central)
+                    continue;
+                const dir = a.position.clone().sub(b.position);
+                const distSq = dir.lengthSq() + 1e-4;
+                const similarity = a.calculateAttributeCompatibility(b);
+                const mag = 20 * (1 - similarity) / (distSq + 0.5);
+                const f = dir.normalize().multiplyScalar(mag).clampLength(0, 0.9);
+                forces[i].add(f);
+                forces[j].add(f.clone().multiplyScalar(-1));
+            }
+        }
+        // --- Apply forces → velocities → positions ---
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (node == central)
+                continue;
+            if (!(node.velocity instanceof THREE.Vector3)) {
+                node.velocity = new THREE.Vector3(0, 0, 0);
+            }
+            const effectiveDt = Math.min(deltaTime, 0.95);
+            const acceleration = forces[i];
+            // apply acceleration
+            node.velocity.addScaledVector(acceleration, effectiveDt);
+            // --- jitter suppression ---
+            // add a small deadzone to prevent micro-oscillation
+            if (node.velocity.lengthSq() < 1e-10) {
+                node.velocity.set(0, 0, 0);
+                continue;
+            }
+            // soft low-pass filter to smooth small fluctuations
+            node.velocity.lerp(node.velocity.clone(), 0.95);
+            // damping
+            // const dampingFactor = 1 - 0.8 * 0.9;
+            const dampingFactor = 0.181;
+            node.velocity.multiplyScalar(dampingFactor);
+            // clamp to prevent small high-frequency shake
+            node.velocity.clampLength(0, 0.15);
+            // integrate motion
+            node.position.addScaledVector(node.velocity, effectiveDt);
+            // --- Multi-node jitter suppression (group stabilizer) ---
+            if (nodes.length > 2) {
+                let nearCount = 0;
+                for (let j = 0; j < nodes.length; j++) {
+                    if (j === i || nodes[j] === central)
+                        continue;
+                    const d = node.position.distanceTo(nodes[j].position);
+                    if (d < 0.35)
+                        nearCount++; // consider nodes within a small neighborhood
+                }
+                // if surrounded by 2+ near neighbors and moving very slowly, freeze micro motion
+                if (nearCount >= 2 && node.velocity.lengthSq() < 1e-5) {
+                    node.velocity.multiplyScalar(0.1); // heavy dampening
+                    if (node.velocity.lengthSq() < 1e-10)
+                        node.velocity.set(0, 0, 0);
+                }
+            }
+        }
+        // --- Final stabilization: prevent overlap among similar clusters ---
+        const separationRadius = 0.12;
+        const stiffness = 0.1;
+        for (let i = 0; i < nodes.length; i++) {
+            const a = nodes[i];
+            if (a === central)
+                continue;
+            for (let j = i + 1; j < nodes.length; j++) {
+                const b = nodes[j];
+                if (b === central)
+                    continue;
+                const dir = a.position.clone().sub(b.position);
+                const dist = dir.length();
+                if (dist < separationRadius && dist > 0.01) {
+                    // very small corrective displacement only, not a new force
+                    const overlap = separationRadius - dist;
+                    const correction = dir.normalize().multiplyScalar(overlap * stiffness);
+                    a.position.add(correction);
+                    b.position.sub(correction);
+                }
+            }
+        }
+    }
+    setSun(state = !this.isSun, preference) {
+        this.isSun = state;
+        if (state) {
+            // Switch to neon purple core; keep sprites hidden for clarity
+            const core = this.mesh.material;
+            core.uniforms['glowColor'].value = new THREE.Color('#C300FF');
+            core.uniforms['opacity'].value = 0.9;
+            core.uniforms['base'].value = 0.6;
+            const halo = this.halo.material;
+            halo.uniforms['glowColor'].value = new THREE.Color('#C300FF');
+            halo.uniforms['opacity'].value = 0.22;
+            this.halo.scale.setScalar(1.8);
+            // Billboard core (hidden)
+            this.coreSprite.material.color =
+                new THREE.Color('#C300FF');
+            this.coreSprite.material.opacity = 0.35;
+            const dSun = this.baseSphereRadius * 2 * 1.8;
+            this.coreSprite.scale.set(dSun, dSun, 1);
+            // Billboard halo (hidden)
+            this.haloSprite.material.color =
+                new THREE.Color('#C300FF');
+            this.haloSprite.material.opacity = 0.08;
+            const dSunHalo = this.baseSphereRadius * 2 * 3.0;
+            this.haloSprite.scale.set(dSunHalo, dSunHalo, 1);
+        }
+        else {
+            // Switch to pink-red core; keep sprites hidden for clarity
+            const core = this.mesh.material;
+            core.uniforms['glowColor'].value = new THREE.Color('#FF3366');
+            core.uniforms['opacity'].value = 0.7;
+            core.uniforms['base'].value = 0.35;
+            const halo = this.halo.material;
+            halo.uniforms['glowColor'].value = new THREE.Color('#FF3366');
+            halo.uniforms['opacity'].value = 0.16;
+            this.halo.scale.setScalar(1.35);
+            // Billboard core (hidden)
+            this.coreSprite.material.color =
+                new THREE.Color('#FF3366');
+            this.coreSprite.material.opacity = 0.25;
+            const d = this.baseSphereRadius * 2 * 1.3;
+            this.coreSprite.scale.set(d, d, 1);
+            // Billboard halo (hidden)
+            this.haloSprite.material.color =
+                new THREE.Color('#FF3366');
+            this.haloSprite.material.opacity = 0.06;
+            const dHalo = this.baseSphereRadius * 2 * 2.0;
+            this.haloSprite.scale.set(dHalo, dHalo, 1);
+        }
+        if (preference !== undefined) {
+            this.preference = preference;
+        }
+    }
+    calculatePreferredCompatibility(sun) {
+        const sunPreferences = sun.preferences;
+        const planetAttributes = this.attributes;
+        const len = Math.min(sunPreferences.length, planetAttributes.length);
+        const weights = Node.normalizeWeights(Node.preferenceWeights, len);
+        let diffSum = 0;
+        let weightSum = 0;
+        for (let i = 0; i < len; i++) {
+            const w = weights[i];
+            diffSum += w * Math.abs(sunPreferences[i] - planetAttributes[i]);
+            weightSum += w;
+        }
+        const maxDiff = Math.max(1e-6, weightSum * 100);
+        return 1 - diffSum / maxDiff;
+    }
+    calculateAttributeCompatibility(other) {
+        const attributesA = this.attributes;
+        const attributesB = other.attributes;
+        const len = Math.min(attributesA.length, attributesB.length);
+        const weights = Node.normalizeWeights(Node.attributeWeights, len);
+        let diffSum = 0;
+        let weightSum = 0;
+        for (let i = 0; i < len; i++) {
+            const w = weights[i];
+            diffSum += w * Math.abs(attributesA[i] - attributesB[i]);
+            weightSum += w;
+        }
+        const maxDiff = Math.max(1e-6, weightSum * 100);
+        return 1 - diffSum / maxDiff;
+    }
+    update(nodes, cursorPosition, scene, camera) {
+        if (this.swap) {
+            this.handleSwapAnimation();
+            return;
+        }
+        // Sun: keep steady size and glow (disable pulsation)
+        if (this.isSun) {
+            const targetScale = this.sunBaseScale;
+            this.mesh.scale.lerp(new THREE.Vector3(targetScale, targetScale, targetScale), 0.2);
+            const core = this.mesh.material;
+            core.uniforms['opacity'].value = 0.75;
+            const haloMat = this.halo.material;
+            haloMat.uniforms['opacity'].value = 0.14;
+            const haloScale = 1.8;
+            this.halo.scale.lerp(new THREE.Vector3(haloScale, haloScale, haloScale), 0.2);
+            // Sprites remain hidden/steady
+            return;
+        }
+        let totalForce = new THREE.Vector3();
+        const sun = nodes.find((n) => n.isSun) ?? null;
+        if (sun) {
+            totalForce.add(this.calculateSunForce(sun));
+            // Update planet glow based on compatibility with sun
+            const compat = this.calculatePreferredCompatibility(sun); // 0..1
+            const core = this.mesh.material;
+            core.uniforms['opacity'].value = 0.55 + compat * 0.4; // brighter core with compatibility
+            // Planet additive halo tightly around mesh
+            const haloMat = this.halo.material;
+            const baseOpacity = 0.12 + compat * 0.25; // 0.12..0.37
+            let proximityBoost = 0;
+            if (cursorPosition) {
+                const d = this.position.distanceTo(cursorPosition);
+                proximityBoost = Math.max(0, 1 - d / 1.5) * 0.04; // very subtle
+            }
+            haloMat.uniforms['opacity'].value = Math.min(0.5, baseOpacity + proximityBoost);
+            this.mesh.scale.set(1.9, 1.9, 1.9);
+            const s = 1.35 * (1 + compat * 0.15);
+            this.halo.scale.lerp(new THREE.Vector3(s, s, s), 0.25);
+            // Billboard tuning for planets
+            const coreMat = this.coreSprite.material;
+            coreMat.opacity = 0.45 + compat * 0.35 + proximityBoost * 0.2;
+            const d2 = this.baseSphereRadius * 2 * (1.3 + compat * 0.2) * this.mesh.scale.x;
+            this.coreSprite.scale.lerp(new THREE.Vector3(d2, d2, 1), 0.2);
+            const haloMatS = this.haloSprite.material;
+            haloMatS.opacity = 0.16 + compat * 0.18 + proximityBoost * 0.1;
+            const d2h = this.baseSphereRadius * 2 * (2.0 + compat * 0.5) * this.mesh.scale.x;
+            this.haloSprite.scale.lerp(new THREE.Vector3(d2h, d2h, 1), 0.2);
+        }
+        totalForce.add(this.calculatePlanetRepulsion(nodes));
+        totalForce.add(this.calculatePlanetAttraction(nodes));
+        totalForce.multiplyScalar(this.options.velocityDamping);
+        const deltaTime = this.clock.getDelta();
+        this.updatePhysics(nodes, sun, deltaTime);
+        this.applyForces(totalForce);
+    }
+    // (Sprite-based glow removed in favor of additive core + halo meshes)
+    createBillboardGlow(color, opacity, diameterMultiplier) {
+        const size = 128;
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        const ctx = canvas.getContext('2d');
+        const g = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+        g.addColorStop(0.0, 'rgba(255,255,255,1)');
+        g.addColorStop(0.5, 'rgba(255,255,255,0.6)');
+        g.addColorStop(1.0, 'rgba(255,255,255,0)');
+        ctx.fillStyle = g;
+        ctx.fillRect(0, 0, size, size);
+        const tex = new THREE.CanvasTexture(canvas);
+        tex.minFilter = THREE.LinearFilter;
+        tex.magFilter = THREE.LinearFilter;
+        const material = new THREE.SpriteMaterial({
+            map: tex,
+            color,
+            transparent: true,
+            opacity,
+            depthWrite: false,
+            depthTest: false,
+            blending: THREE.AdditiveBlending,
+        });
+        const sprite = new THREE.Sprite(material);
+        const diameter = this.baseSphereRadius * 2 * diameterMultiplier;
+        sprite.scale.set(diameter, diameter, 1);
+        sprite.renderOrder = 20;
+        return sprite;
+    }
+    calculateSunForce(sun) {
+        let force = new THREE.Vector3();
+        const compatibility = this.calculatePreferredCompatibility(sun);
+        const desiredDistance = 0.25 + (1 - compatibility) * 4.0;
+        const currentDistance = sun.position.distanceTo(this.position);
+        const error = currentDistance - desiredDistance;
+        const directionToSun = new THREE.Vector3()
+            .subVectors(sun.position, this.position)
+            .normalize();
+        if (currentDistance < desiredDistance) {
+            const repulsionForce = -this.options.sun.repulsion *
+                (desiredDistance - currentDistance) *
+                compatibility;
+            force.add(directionToSun.multiplyScalar(repulsionForce));
+        }
+        else {
+            const attractionForce = 2 * this.options.sun.attraction * error * compatibility + 0.001;
+            force.add(directionToSun.multiplyScalar(attractionForce));
+        }
+        return force;
+    }
+    calculatePlanetAttraction(nodes) {
+        let attractionForce = new THREE.Vector3();
+        const attractionConstant = 0.001;
+        nodes.forEach((other) => {
+            if (other !== this && !other.isSun) {
+                const compatibility = this.calculateAttributeCompatibility(other);
+                const forceMagnitude = attractionConstant * compatibility - 0.001;
+                const attractionDirection = new THREE.Vector3()
+                    .subVectors(other.position, this.position)
+                    .normalize();
+                attractionForce.add(attractionDirection.multiplyScalar(forceMagnitude));
+            }
+        });
+        return attractionForce;
+    }
+    calculatePlanetRepulsion(nodes) {
+        let repulsionForce = new THREE.Vector3();
+        nodes.forEach((other) => {
+            if (other !== this && !other.isSun) {
+                const distance = this.position.distanceTo(other.position);
+                if (distance < this.options.planet.repulsionInitializationThreshold) {
+                    const compatibility = this.calculateAttributeCompatibility(other);
+                    const repulsion = this.options.planet.repulsion *
+                        (this.options.planet.repulsionInitializationThreshold -
+                            distance) *
+                        (1 - compatibility) +
+                        0.001;
+                    const repulsionDirection = new THREE.Vector3()
+                        .subVectors(this.position, other.position)
+                        .normalize();
+                    repulsionForce.add(repulsionDirection.multiplyScalar(repulsion));
+                }
+            }
+        });
+        return repulsionForce;
+    }
+    applyForces(force) {
+        this.velocity.add(force);
+        if (this.velocity.length() > this.options.maxVelocity) {
+            this.velocity.setLength(this.options.maxVelocity);
+        }
+        this.velocity.multiplyScalar(this.options.velocityDamping);
+        this.position.add(this.velocity);
+    }
+    handleSwapAnimation() {
+        if (!this.swap)
+            return;
+        const currentSwap = this.swap;
+        const currentTime = performance.now();
+        let progress = (currentTime - currentSwap.startTime) / currentSwap.duration;
+        if (progress >= 1) {
+            progress = 1;
+            this.velocity.set(0, 0, 0);
+            this.swap = null;
+        }
+        this.position.copy(currentSwap.start.clone().lerp(currentSwap.end, progress));
+    }
+}
+function makeCoreGlowMaterial(color, opacity = 0.8, power = 3.5, base = 0.1) {
+    const uniforms = {
+        glowColor: { value: color },
+        opacity: { value: opacity },
+        p: { value: power },
+        base: { value: base },
+    };
+    const vertex = `
+    varying vec3 vNormal;
+    varying vec3 vWorldPosition;
+    void main() {
+      vNormal = normalize(normalMatrix * normal);
+      vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+      vWorldPosition = worldPosition.xyz;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `;
+    const fragment = `
+    uniform vec3 glowColor;
+    uniform float opacity;
+    uniform float p;
+    uniform float base;
+    varying vec3 vNormal;
+    varying vec3 vWorldPosition;
+    void main() {
+      vec3 viewDir = normalize(cameraPosition - vWorldPosition);
+      // Center-bright with a base floor so sides never go black
+      float ndv = clamp(dot(vNormal, viewDir), 0.0, 1.0);
+      float intensity = base + (1.0 - base) * pow(ndv, p);
+      gl_FragColor = vec4(glowColor * intensity, intensity * opacity);
+    }
+  `;
+    return new THREE.ShaderMaterial({
+        uniforms,
+        vertexShader: vertex,
+        fragmentShader: fragment,
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+        side: THREE.FrontSide,
+    });
+}
+function makeRimGlowMaterial(color, opacity = 0.2, c = 0.2, power = 2.2) {
+    const uniforms = {
+        glowColor: { value: color },
+        opacity: { value: opacity },
+        c: { value: c },
+        p: { value: power },
+    };
+    const vertex = `
+    varying vec3 vNormal;
+    varying vec3 vWorldPosition;
+    void main() {
+      vNormal = normalize(normalMatrix * normal);
+      vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+      vWorldPosition = worldPosition.xyz;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `;
+    const fragment = `
+    uniform vec3 glowColor;
+    uniform float opacity;
+    uniform float c;
+    uniform float p;
+    varying vec3 vNormal;
+    varying vec3 vWorldPosition;
+    void main() {
+      vec3 viewDir = normalize(cameraPosition - vWorldPosition);
+      float intensity = pow(max(0.0, c - dot(vNormal, viewDir)), p);
+      gl_FragColor = vec4(glowColor, intensity * opacity);
+    }
+  `;
+    return new THREE.ShaderMaterial({
+        uniforms,
+        vertexShader: vertex,
+        fragmentShader: fragment,
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+        side: THREE.BackSide,
+    });
+}
+Node.prototype.makeCoreGlowMaterial = makeCoreGlowMaterial;
+Node.prototype.makeRimGlowMaterial = makeRimGlowMaterial;
+
+class Cluster extends THREE.Object3D {
+    options;
+    nodes;
+    constructor(nodeData, options) {
+        super();
+        this.options = {
+            sun: {
+                attraction: 1,
+                repulsion: 1,
+                repulsionInitializationThreshold: 0.4,
+            },
+            planet: {
+                attraction: 1,
+                repulsion: 1,
+                repulsionInitializationThreshold: 0.2,
+            },
+            maxVelocity: 0.02,
+            velocityDamping: 0.8,
+            minAttributeValue: 0,
+            minPreferenceValue: 0,
+            maxAttributeValue: 100,
+            maxPreferenceValue: 100,
+            ...options,
+        };
+        this.nodes = [];
+        this.setUp(nodeData);
+    }
+    setUp(nodeData) {
+        nodeData.forEach((data) => {
+            const node = new Node(data, this.options);
+            this.nodes.push(node);
+            this.add(node);
+        });
+    }
+    update(cursorPosition, scene, camera) {
+        this.nodes.forEach((node) => node.update(this.nodes, cursorPosition, scene, camera));
+        // Bound the position within (-8, -8, -8) and (8, 8, 8)
+        const BOUND = 8;
+        this.position.x = THREE.MathUtils.clamp(this.position.x, -BOUND, BOUND);
+        this.position.y = THREE.MathUtils.clamp(this.position.y, -BOUND, BOUND);
+        this.position.z = THREE.MathUtils.clamp(this.position.z, -BOUND, BOUND);
+    }
+}
+
+class BlackHoleParticleField {
+    // Private properties
+    scene;
+    particles = [];
+    particleSystem = null;
+    // Natural particle count for bubble-like effect
+    particleCount = 200;
+    // Visual parameters (scaled by coreRadius)
+    coreRadius = 0.39; // defaults; overridden per-node via options
+    FIELD_RADIUS_FACTOR = 0.9; // relative scale
+    NEON_PURPLE = new THREE.Color(0xc300ff);
+    PINK_RED = new THREE.Color(0xff3366);
+    palette = 'planet';
+    // Use even surface distribution (no view alignment by default)
+    useSurface = true;
+    seedCounter = 0; // Fibonacci seed index
+    speedScale = 1; // instance speed scaler (planets slower)
+    // Animation params (slower, smoother orbits)
+    MIN_SPEED = 0.4; // radians/sec
+    MAX_SPEED = 1.2;
+    get FRONT_MIN() {
+        return this.coreRadius * 0.06;
+    }
+    // Physical speed coupling (omega ≈ k * |v| / r) and clamps
+    OMEGA_K = 1.0;
+    OMEGA_MAX_RIM = 0.9; // rad/s
+    OMEGA_MAX_CAP = 0.7; // rad/s
+    // Surface mode coupling (gentler, avoids insect jitter)
+    OMEGA_SURFACE_K = 0.8; // coupling from |vProj|/r → rad/s
+    OMEGA_SURFACE_MAX = 0.8; // clamp for surface mode
+    OMEGA_SURFACE_BASE_MIN = 0.12; // intrinsic base speed
+    OMEGA_SURFACE_BASE_MAX = 0.28;
+    SPEED_EPS = 1e-5;
+    SHIMMER_FRAC = 0.02; // 2% at rest
+    // Debugging: color bands and periodically log counts
+    debugBands = false;
+    lastDebugLogMs = 0;
+    bandCounts = {
+        topCurve: 0,
+        bottomCurve: 0,
+        orbit: 0,
+        topCap: 0,
+        bottomCap: 0,
+        surface: 0,
+    };
+    MIN_LIFETIME = 3.0;
+    MAX_LIFETIME = 6.0;
+    // --- anchor tracking + flow alignment ---
+    targetAnchor = new THREE.Vector3(); // last received from update()
+    anchor = new THREE.Vector3(); // smoothed, z=0
+    anchorLerp = 1.0; // fully attached to the cursor position
+    lastRight = new THREE.Vector3(1, 0, 0); // cached flow-aligned right axis
+    flowSpeedScale = 1.0;
+    prevTargetAnchor = new THREE.Vector3(); // for anchor-delta velocity
+    worldUp = new THREE.Vector3(0, 1, 0);
+    constructor(scene, opts) {
+        this.scene = scene;
+        if (opts?.coreRadius && Number.isFinite(opts.coreRadius)) {
+            this.coreRadius = Math.max(0.01, opts.coreRadius);
+        }
+        if (opts?.particleCount && Number.isFinite(opts.particleCount)) {
+            this.particleCount = Math.max(8, Math.floor(opts.particleCount));
+        }
+        if (opts?.palette) {
+            this.palette = opts.palette;
+        }
+        if (opts?.distribution) {
+            this.useSurface = opts.distribution === 'surface';
+        }
+        if (opts?.speedScale && Number.isFinite(opts.speedScale)) {
+            this.speedScale = Math.max(0.05, opts.speedScale);
+        }
+        // Enable debug via query param ?debugBands=1
+        try {
+            const search = window?.location?.search ?? '';
+            this.debugBands = /(?:^|[?&])debugBands=1(?:&|$)/.test(search);
+        }
+        catch { }
+        this.initializeParticleField();
+    }
+    // Public methods
+    /**
+     * Update particle field anchored at `anchorPosition`, advected by `flow`.
+     */
+    update(anchorPosition, flow, deltaTime, camera) {
+        if (!this.particleSystem)
+            return;
+        // 1) Accept input, use full 3D coordinates
+        const x = anchorPosition?.x;
+        const y = anchorPosition?.y;
+        const z = anchorPosition?.z;
+        if (Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(z)) {
+            // Anchor exactly at the target position (no world-Z offset)
+            this.targetAnchor.set(x, y, z);
+        }
+        // Smooth follow to avoid jitter (and hide any one-frame glitches)
+        this.anchor.lerp(this.targetAnchor, this.anchorLerp);
+        // Move the ENTIRE particle system to the anchor.
+        // Geometry stays in LOCAL rim-space.
+        this.particleSystem.position.copy(this.anchor);
+        // 2) Delta time guard
+        if (!Number.isFinite(deltaTime) || deltaTime <= 0)
+            deltaTime = 1 / 60;
+        const geom = this.particleSystem.geometry;
+        const positions = geom.getAttribute('position').array;
+        const colors = geom.getAttribute('color').array;
+        // (sizes/opacities kept for shader)
+        const sizes = geom.getAttribute('size').array;
+        // 3) Build a WORLD-coupled plane (flow + worldUp) and fuse flow with anchor-delta
+        const camForward = new THREE.Vector3(0, 0, 1);
+        const camUp = new THREE.Vector3(0, 1, 0);
+        if (camera) {
+            camera.getWorldDirection(camForward);
+            camUp.copy(camera.up).normalize();
+        }
+        // Compute anchor-delta velocity (works during drag/swap)
+        // Prevent first-frame spike
+        if (this.prevTargetAnchor.lengthSq() === 0) {
+            this.prevTargetAnchor.copy(this.targetAnchor);
+        }
+        const anchorDelta = new THREE.Vector3().subVectors(this.targetAnchor, this.prevTargetAnchor);
+        const vAnchor = anchorDelta
+            .clone()
+            .multiplyScalar(1 / Math.max(1e-6, deltaTime));
+        const vNode = (flow || new THREE.Vector3()).clone();
+        const vNodeMag = vNode.length();
+        const vAncMag = vAnchor.length();
+        const w = vAncMag / Math.max(1e-6, vAncMag + vNodeMag); // prefer anchor when node velocity is small
+        const vFlow = vNode.multiplyScalar(1 - w).add(vAnchor.multiplyScalar(w));
+        // Project flow onto world-up plane
+        const proj = vFlow
+            .clone()
+            .sub(this.worldUp.clone().multiplyScalar(vFlow.dot(this.worldUp)));
+        const projLen = proj.length();
+        // Adaptive smoothing: snappier when faster
+        const speedHigh = 0.02; // typical maxVelocity
+        const alpha = THREE.MathUtils.clamp(0.4 - 0.3 * Math.min(1, vFlow.length() / speedHigh), 0.1, 0.45);
+        if (projLen > 1e-6) {
+            const instRight = proj.clone().normalize();
+            this.lastRight.lerp(instRight, alpha).normalize();
+        }
+        // If invalid, fall back to camera plane right
+        if (!Number.isFinite(this.lastRight.x + this.lastRight.y + this.lastRight.z) ||
+            this.lastRight.lengthSq() < 1e-6) {
+            const rightCam = camForward.clone().cross(camUp).normalize();
+            if (rightCam.lengthSq() > 0)
+                this.lastRight.copy(rightCam);
+            else
+                this.lastRight.set(1, 0, 0);
+        }
+        let right = this.lastRight.clone();
+        const up = this.worldUp.clone();
+        let forward = new THREE.Vector3().crossVectors(right, up).normalize();
+        // Hybrid plane: bias normal toward camera to avoid "edge-only" look
+        const speedNorm = THREE.MathUtils.clamp(vFlow.length() / 0.02, 0, 1);
+        const cameraBias = THREE.MathUtils.clamp(0.35 - 0.2 * speedNorm, 0.1, 0.35);
+        forward = forward.clone().lerp(camForward, cameraBias).normalize();
+        // Recompute right to stay orthonormal after blending
+        right = up.clone().cross(forward).normalize();
+        // For sign decisions, use instantaneous (unsmoothed) projected flow when available
+        const instRight = projLen > 1e-6 ? proj.clone().normalize() : this.lastRight.clone();
+        if (right.dot(instRight) < 0)
+            right.multiplyScalar(-1);
+        const flowSpeed = vFlow.length();
+        this.flowSpeedScale = THREE.MathUtils.clamp(flowSpeed * 100, 0, 3); // not used for omega anymore but kept for wiggles
+        for (let i = 0; i < this.particles.length; i++) {
+            let p = this.particles[i];
+            p.age += deltaTime;
+            const twoPi = Math.PI * 2;
+            // Angular wander: scale by flow for banded mode; always small for surface mode
+            const speedFactor = this.useSurface
+                ? 0.5
+                : THREE.MathUtils.clamp(flowSpeed / 0.02, 0, 1);
+            const wander = p.angleWanderAmp *
+                speedFactor *
+                Math.sin(2 * Math.PI * p.angleWanderFreq * p.age + p.angleWanderPhase);
+            if (this.useSurface && p.type === 'surface' && p.u && p.v) {
+                // ALWAYS use dynamic direction based on node velocity, never fixed dirSign
+                const camRight = camForward.clone().cross(camUp).normalize();
+                // Calculate direction based on world velocity + anchor movement
+                const totalFlow = vFlow.clone();
+                const flowMagnitude = totalFlow.length();
+                // Determine rotation direction from velocity:
+                // - Node moving right (+X) → particles rotate clockwise (+1)
+                // - Node moving left (-X) → particles rotate counter-clockwise (-1)
+                let dir = 1; // default when stationary
+                if (flowMagnitude > 1e-5) {
+                    const flowRightComponent = totalFlow.dot(camRight);
+                    dir = Math.sign(flowRightComponent) || 1;
+                }
+                else {
+                    // When stationary, use natural rotation based on particle's orbit plane
+                    // This prevents systematic patterns that cause ring formation
+                    const orbitNormal = new THREE.Vector3().crossVectors(p.u, p.v);
+                    dir = Math.sign(orbitNormal.y) || 1; // Use Y component for consistent but varied direction
+                }
+                // Project node flow into the particle's plane and derive omega
+                const n = new THREE.Vector3().crossVectors(p.u, p.v).normalize();
+                const vProjLen = vFlow
+                    .clone()
+                    .sub(n.clone().multiplyScalar(vFlow.dot(n)))
+                    .length();
+                const baseR = Math.max(1e-4, p.radius);
+                const omegaFlow = this.OMEGA_SURFACE_K * (vProjLen / baseR);
+                const omegaBase = p.baseOmega ?? this.OMEGA_SURFACE_BASE_MIN;
+                const omega = Math.min(this.OMEGA_SURFACE_MAX * this.speedScale, (omegaBase + omegaFlow) * this.speedScale);
+                // Tiny wander for natural look (very small)
+                p.angle += dir * (omega + wander) * deltaTime;
+                if (p.angle > Math.PI)
+                    p.angle -= twoPi;
+                if (p.angle < -Math.PI)
+                    p.angle += twoPi;
+                // Precession disabled for now
+                const local = this.getLocalOrbitPos(p, p.age, right, up, forward, camForward);
+                positions[i * 3 + 0] = local.x;
+                positions[i * 3 + 1] = local.y;
+                positions[i * 3 + 2] = local.z;
+            }
+            else {
+                // Legacy banded motion aligned with flow
+                const margin = p.thetaMargin ?? 0;
+                const baseR = Math.max(1e-4, p.radius);
+                const omegaRaw = this.OMEGA_K * (flowSpeed / baseR);
+                const omegaClamp = p.type === 'topCap' || p.type === 'bottomCap'
+                    ? this.OMEGA_MAX_CAP
+                    : this.OMEGA_MAX_RIM;
+                const omega = Math.min(omegaRaw, omegaClamp);
+                const angSign = Math.sign(vFlow.dot(instRight)) || 1;
+                p.angle += angSign * (omega + wander) * deltaTime;
+                if (p.angle > Math.PI)
+                    p.angle -= twoPi;
+                if (p.angle < -Math.PI)
+                    p.angle += twoPi;
+                const local = this.getLocalOrbitPos(p, p.age, right, up, forward, camForward);
+                positions[i * 3 + 0] = local.x;
+                positions[i * 3 + 1] = local.y;
+                positions[i * 3 + 2] = local.z;
+            }
+            if (p.age >= p.lifetime) {
+                // Retain particle; just reset time and vary wiggle phase
+                p.age = 0;
+                p.lifetime =
+                    this.MIN_LIFETIME +
+                        Math.random() * (this.MAX_LIFETIME - this.MIN_LIFETIME);
+                p.wigglePhase = Math.random() * Math.PI * 2;
+            }
+        }
+        // Periodic debug counts log
+        if (this.debugBands) {
+            const now = performance.now();
+            if (now - this.lastDebugLogMs > 2000) {
+                this.lastDebugLogMs = now;
+                // Recompute counts once (particles are fixed types)
+                const counts = {};
+                for (const p of this.particles)
+                    counts[p.type] = (counts[p.type] || 0) + 1;
+                console.info('[ParticleBands]', counts);
+            }
+        }
+        // 4) Push updates
+        geom.getAttribute('position').needsUpdate = true;
+        geom.getAttribute('color').needsUpdate = true;
+        geom.computeBoundingSphere?.();
+        // Keep last target anchor for next-frame delta
+        this.prevTargetAnchor.copy(this.targetAnchor);
+    }
+    /**
+     * Resize the field to a new `coreRadius` while preserving particle distribution.
+     * Scales all radius-like parameters so visuals stay consistent.
+     */
+    resizeCoreRadius(newRadius) {
+        if (!Number.isFinite(newRadius) || newRadius <= 0)
+            return;
+        const old = this.coreRadius;
+        if (!old || Math.abs(newRadius - old) < 1e-6)
+            return;
+        const s = newRadius / old;
+        // Update core scalar used in shaders/limits
+        this.coreRadius = newRadius;
+        // Proportionally scale particle radii and related amplitudes/biases
+        for (let i = 0; i < this.particles.length; i++) {
+            const p = this.particles[i];
+            p.radius *= s;
+            p.radialJitterAmp *= s;
+            p.upBias *= s;
+            p.depthBias *= s;
+            if (p.capRadBias)
+                p.capRadBias *= s;
+            p.arcUpAmp *= s;
+            p.arcDepthAmp *= s;
+            p.arcRadAmp *= s;
+        }
+    }
+    // Public toggle for debug coloring
+    setDebugBands(enabled) {
+        if (this.debugBands === enabled)
+            return;
+        this.debugBands = enabled;
+        if (!this.particleSystem)
+            return;
+        const colors = this.particleSystem.geometry.getAttribute('color');
+        for (let i = 0; i < this.particles.length; i++) {
+            const c = this.debugBands
+                ? this.getDebugColorForType(this.particles[i].type)
+                : this.particles[i].color;
+            colors.setX(i, c.r);
+            colors.setY(i, c.g);
+            colors.setZ(i, c.b);
+        }
+        colors.needsUpdate = true;
+    }
+    toggleDebugBands() {
+        this.setDebugBands(!this.debugBands);
+        return this.debugBands;
+    }
+    // Switch palette at runtime (e.g., when a node becomes or ceases to be the sun)
+    setPalette(newPalette) {
+        if (this.palette === newPalette)
+            return;
+        this.palette = newPalette;
+        if (!this.particleSystem)
+            return;
+        const geom = this.particleSystem.geometry;
+        const colorsAttr = geom.getAttribute('color');
+        const base = this.palette === 'sun' ? this.NEON_PURPLE : this.PINK_RED;
+        for (let i = 0; i < this.particles.length; i++) {
+            const jitter = THREE.MathUtils.lerp(0.9, 1.1, Math.random());
+            const c = base.clone().multiplyScalar(jitter);
+            c.r = Math.min(1, Math.max(0, c.r));
+            c.g = Math.min(1, Math.max(0, c.g));
+            c.b = Math.min(1, Math.max(0, c.b));
+            this.particles[i].color.copy(c);
+            if (!this.debugBands) {
+                colorsAttr.setX(i, c.r);
+                colorsAttr.setY(i, c.g);
+                colorsAttr.setZ(i, c.b);
+            }
+        }
+        colorsAttr.needsUpdate = true;
+    }
+    dispose() {
+        if (this.particleSystem) {
+            this.scene.remove(this.particleSystem);
+            this.particleSystem.geometry.dispose();
+            this.particleSystem.material.dispose();
+            this.particleSystem = null;
+        }
+        this.particles.length = 0;
+    }
+    // Private methods
+    // --------------------------- init ---------------------------
+    initializeParticleField() {
+        this.generateParticles();
+        this.createParticleSystem();
+    }
+    generateParticles() {
+        this.particles.length = 0;
+        // reset counts
+        Object.keys(this.bandCounts).forEach((k) => (this.bandCounts[k] = 0));
+        for (let i = 0; i < this.particleCount; i++) {
+            const p = this.createNewParticle();
+            this.particles.push(p);
+            this.bandCounts[p.type]++;
+        }
+    }
+    createNewParticle() {
+        // New mode: evenly spread particles around the surface using per-particle orbit planes
+        if (this.useSurface) {
+            const type = 'surface';
+            // Fibonacci sphere to pick an initial position direction (uniform on sphere)
+            const i = this.seedCounter++;
+            const n = Math.max(1, this.particleCount);
+            const golden = Math.PI * (3 - Math.sqrt(5));
+            const offset = 2 / n;
+            const y = i * offset - 1 + offset / 2; // uniform in [-1, 1]
+            const rxy = Math.sqrt(Math.max(0, 1 - y * y));
+            const theta = golden * i;
+            const ux = Math.cos(theta) * rxy;
+            const uz = Math.sin(theta) * rxy;
+            const u = new THREE.Vector3(ux, y, uz).normalize(); // direction to initial point
+            // Build an orbit plane containing u: choose a random axis perpendicular to u
+            let rand = new THREE.Vector3(Math.random(), Math.random(), Math.random()).normalize();
+            if (Math.abs(rand.dot(u)) > 0.95)
+                rand = new THREE.Vector3(1, 0, 0); // avoid parallel
+            const axis = new THREE.Vector3().crossVectors(u, rand).normalize(); // plane normal
+            const v = new THREE.Vector3().crossVectors(axis, u).normalize(); // completes basis
+            // Small random rotation around the plane to avoid grid-like bands
+            const angle = THREE.MathUtils.randFloatSpread(Math.PI * 2);
+            // Tight shell: 1.002R .. 1.008R
+            const radius = this.coreRadius *
+                (1 + THREE.MathUtils.lerp(0.002, 0.008, Math.random()));
+            // Speed is derived from node flow at runtime; initialize small values to avoid spikes
+            const angularSpeed = 0;
+            const radialJitterAmp = this.coreRadius * 0.002; // very subtle breathing
+            const radialJitterFreq = 0.2 + Math.random() * 0.3;
+            // Color from palette with small jitter
+            const base = this.palette === 'sun' ? this.NEON_PURPLE : this.PINK_RED;
+            const cjit = THREE.MathUtils.lerp(0.9, 1.1, Math.random());
+            const color = base.clone().multiplyScalar(cjit);
+            color.r = Math.min(1, Math.max(0, color.r));
+            color.g = Math.min(1, Math.max(0, color.g));
+            color.b = Math.min(1, Math.max(0, color.b));
+            const precessAxis = new THREE.Vector3(0, 0, 1); // disabled precession
+            const precessSpeed = 0;
+            // Intrinsic orbit speed so particles revolve even when node is stationary
+            const baseOmega = THREE.MathUtils.lerp(this.OMEGA_SURFACE_BASE_MIN, this.OMEGA_SURFACE_BASE_MAX, Math.random()) * this.speedScale;
+            return {
+                type,
+                radius,
+                angle,
+                angularSpeed,
+                radialJitterAmp,
+                radialJitterFreq,
+                size: 0.8 + Math.random() * 1.4,
+                color,
+                opacity: 0.85,
+                lifetime: this.MIN_LIFETIME +
+                    Math.random() * (this.MAX_LIFETIME - this.MIN_LIFETIME),
+                age: Math.random() * 0.5,
+                ellipse: 1,
+                upBias: 0,
+                depthBias: 0,
+                wigglePhase: Math.random() * Math.PI * 2,
+                wiggleFreqUp: 0.25 + Math.random() * 0.4,
+                wiggleFreqDepth: 0.25 + Math.random() * 0.4,
+                capRadBias: 0,
+                tiltUF: undefined,
+                arcUpAmp: 0,
+                arcDepthAmp: 0,
+                arcRadAmp: this.coreRadius * 0.004,
+                arcFreq: 1,
+                angleWanderAmp: THREE.MathUtils.lerp(0.01, 0.03, Math.random()),
+                angleWanderFreq: 0.15 + Math.random() * 0.3,
+                angleWanderPhase: Math.random() * Math.PI * 2,
+                verticalOffset: 0,
+                phi: undefined,
+                thetaMargin: 0,
+                frontCurveAngle: undefined,
+                phiAmp: 0,
+                axis,
+                u,
+                v,
+                dirSign: 1, // Unused - direction calculated dynamically
+                precessAxis,
+                precessSpeed,
+                baseOmega,
+            };
+        }
+        // Legacy banded distribution (kept for reference and fallback)
+        // Distribution for full wrap with clear center:
+        // topCurve ~22%, bottomCurve ~22% (rim ~44%), topCap ~28%, bottomCap ~28% (caps ~56%)
+        const rpick = Math.random();
+        const type = rpick < 0.22
+            ? 'topCurve'
+            : rpick < 0.44
+                ? 'bottomCurve'
+                : rpick < 0.72
+                    ? 'topCap'
+                    : 'bottomCap';
+        // Keep particles hugging the node surface
+        const rim = this.coreRadius * 1.005; // very tight
+        const rimBand = 0.01; // thin band width
+        const capSurfaceR = THREE.MathUtils.lerp(this.coreRadius * 1.01, this.coreRadius * 1.03, Math.random());
+        // Per-particle shape and offsets to avoid identical tracks
+        const ellipse = 0.96 + Math.random() * 0.08; // very subtle, 0.96–1.04
+        const upScale = this.coreRadius;
+        let upBias = 0;
+        switch (type) {
+            case 'topCurve':
+                upBias = THREE.MathUtils.lerp(0.006, 0.018, Math.random()) * upScale;
+                break;
+            case 'bottomCurve':
+                upBias = -THREE.MathUtils.lerp(0.006, 0.018, Math.random()) * upScale;
+                break;
+            default:
+                upBias = 0;
+        }
+        const depthBias = THREE.MathUtils.lerp(-0.012, 0.012, Math.random()) * this.coreRadius;
+        const capRadBias = type === 'topCap' || type === 'bottomCap'
+            ? THREE.MathUtils.lerp(-0.004, 0.004, Math.random()) * this.coreRadius
+            : 0;
+        // Optional tilt for mid bands: 1 = use up (vertical), 0 = use forward (horizontal)
+        // Center bands disabled; keep tiltUF unused/default
+        const tiltUF = undefined;
+        // Compute mid-band plane radius if needed
+        // Center bands disabled; mid-plane values unused
+        const midOffset = 0;
+        const midSurfR = 0;
+        const midPlaneRadius = 0;
+        let radius = 0;
+        if (type === 'topCap' || type === 'bottomCap') {
+            radius = Math.max(0.0001, capSurfaceR + capRadBias);
+        }
+        else {
+            // Rim bands, allow very tight to surface
+            radius = rim + Math.random() * rimBand;
+            // Occasionally let bottom dip slightly for occlusion hug
+            if (type === 'bottomCurve' && Math.random() < 0.2) {
+                radius =
+                    this.coreRadius * THREE.MathUtils.lerp(0.98, 1.0, Math.random());
+            }
+        }
+        // Define spherical latitude (phi) per band to control top gap filling
+        // phi: 0 (top pole), PI/2 (equator/rim), PI (bottom pole)
+        const rimPhi = Math.PI * 0.5; // 90° (equator)
+        // Caps sit close to rim so center stays clear, but still on surface
+        const topPhiMin = rimPhi - 0.22; // ~12.6° above rim
+        const topPhiMax = rimPhi - 0.12; // ~6.9° above rim
+        const botPhiMin = rimPhi + 0.12; // ~6.9° below rim
+        const botPhiMax = rimPhi + 0.22; // ~12.6° below rim
+        const biasTowardB = (a, b, pow = 2.0) => a + (b - a) * Math.pow(Math.random(), 1 / pow);
+        const biasTowardA = (a, b, pow = 2.0) => a + (b - a) * (1 - Math.pow(Math.random(), 1 / pow));
+        let phi;
+        // Set phi only for caps and mids to place them on inner surfaces
+        switch (type) {
+            case 'topCap':
+                phi = THREE.MathUtils.clamp(THREE.MathUtils.lerp(topPhiMin, topPhiMax, Math.random()), 0.02, rimPhi - 0.02);
+                break;
+            case 'bottomCap':
+                phi = THREE.MathUtils.clamp(THREE.MathUtils.lerp(botPhiMin, botPhiMax, Math.random()), rimPhi + 0.02, Math.PI - 0.02);
+                break;
+            default:
+                // Rim arcs: slight above/below equator
+                phi =
+                    type === 'topCurve'
+                        ? rimPhi - THREE.MathUtils.lerp(0.02, 0.04, Math.random())
+                        : type === 'bottomCurve'
+                            ? rimPhi + THREE.MathUtils.lerp(0.02, 0.04, Math.random())
+                            : rimPhi;
+        }
+        // Random initial angle per group to avoid trains
+        let angle = 0;
+        if (type === 'topCap' || type === 'bottomCap') {
+            // Start near left edge of front half
+            angle = -Math.PI * 0.95 + Math.random() * 0.1;
+        }
+        else {
+            // Rim arcs: anywhere around
+            angle = THREE.MathUtils.lerp(-Math.PI, Math.PI, Math.random());
+        }
+        // small variance
+        angle += (Math.random() - 0.5) * 0.05;
+        // Per-group base speeds retained but will be overridden by physical mapping
+        const baseSpeed = THREE.MathUtils.lerp(this.MIN_SPEED, this.MAX_SPEED, Math.random());
+        const speedMul = type === 'topCurve' || type === 'bottomCurve'
+            ? 1.1
+            : type === 'topCap' || type === 'bottomCap'
+                ? 0.95
+                : 0.8; // orbit
+        const angularSpeed = baseSpeed * speedMul;
+        // Subtle breathing; even smaller so it hugs the surface and avoids clipping
+        const radialJitterAmp = this.coreRadius *
+            (type === 'topCap' || type === 'bottomCap' ? 0.012 : this.SHIMMER_FRAC);
+        const radialJitterFreq = 0.3 + Math.random() * 0.5; // Hz (gentle)
+        // Color selection based on palette: sun = purple family, planet = pink-red
+        const base = this.palette === 'sun' ? this.NEON_PURPLE : this.PINK_RED;
+        // subtle per-particle variation within same family (lighten/darken slightly)
+        const jitter = THREE.MathUtils.lerp(0.9, 1.1, Math.random());
+        const color = base.clone().multiplyScalar(jitter);
+        color.r = Math.min(1, Math.max(0, color.r));
+        color.g = Math.min(1, Math.max(0, color.g));
+        color.b = Math.min(1, Math.max(0, color.b));
+        // Wiggles for extra micro-variation
+        const wigglePhase = Math.random() * Math.PI * 2;
+        const wiggleFreqUp = 0.3 + Math.random() * 0.5; // 0.3–0.8 Hz
+        const wiggleFreqDepth = 0.25 + Math.random() * 0.4; // 0.25–0.65 Hz
+        // Angle-correlated drift and angular wander
+        const arcFreq = Math.floor(1 + Math.random() * 3); // 1..3
+        const arcUpAmp = type === 'topCap' || type === 'bottomCap'
+            ? upScale * THREE.MathUtils.lerp(0.001, 0.004, Math.random())
+            : upScale * THREE.MathUtils.lerp(0.002, 0.008, Math.random());
+        const arcDepthAmp = type === 'topCap' || type === 'bottomCap'
+            ? this.coreRadius * THREE.MathUtils.lerp(0.001, 0.004, Math.random())
+            : this.coreRadius * THREE.MathUtils.lerp(0.002, 0.006, Math.random());
+        const arcRadAmp = type === 'topCap' || type === 'bottomCap'
+            ? radius * THREE.MathUtils.lerp(0.004, 0.01, Math.random())
+            : radius * THREE.MathUtils.lerp(0.006, 0.015, Math.random());
+        const angleWanderAmp = THREE.MathUtils.lerp(0.03, 0.1, Math.random()); // rad/s (scaled by speed later)
+        const angleWanderFreq = 0.3 + Math.random() * 0.5; // Hz
+        const angleWanderPhase = Math.random() * Math.PI * 2;
+        return {
+            type,
+            radius,
+            angle,
+            angularSpeed,
+            radialJitterAmp,
+            radialJitterFreq,
+            size: 0.8 + Math.random() * 1.4, // smaller discs (0.8..2.2)
+            color,
+            opacity: 0.85,
+            lifetime: this.MIN_LIFETIME +
+                Math.random() * (this.MAX_LIFETIME - this.MIN_LIFETIME),
+            age: Math.random() * 0.5,
+            ellipse,
+            upBias,
+            depthBias,
+            wigglePhase,
+            wiggleFreqUp,
+            wiggleFreqDepth,
+            capRadBias,
+            tiltUF,
+            arcUpAmp,
+            arcDepthAmp,
+            arcRadAmp,
+            arcFreq,
+            angleWanderAmp,
+            angleWanderFreq,
+            angleWanderPhase,
+            verticalOffset: 0,
+            phi,
+            thetaMargin: type === 'topCap' || type === 'bottomCap' ? Math.PI * 0.18 : 0,
+            frontCurveAngle: undefined,
+            phiAmp: type === 'topCap' || type === 'bottomCap'
+                ? THREE.MathUtils.lerp(0.04, 0.1, Math.random())
+                : THREE.MathUtils.lerp(0.0, 0.03, Math.random()),
+        };
+    }
+    // (Removed spline generation in favor of analytic 3D orbits)
+    // --------------------- THREE objects -----------------------
+    createParticleSystem() {
+        const geometry = new THREE.BufferGeometry();
+        const positions = new Float32Array(this.particleCount * 3);
+        const colors = new Float32Array(this.particleCount * 3);
+        // (Kept for future shader; PointsMaterial won't use them per-vertex)
+        const sizes = new Float32Array(this.particleCount);
+        const opacities = new Float32Array(this.particleCount);
+        // Initialize LOCAL positions (do NOT offset by anchor here)
+        for (let i = 0; i < this.particleCount; i++) {
+            const p = this.particles[i];
+            const xy = this.getLocalOrbitPos(p, 0, new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, 1)); // initial position
+            positions[i * 3 + 0] = xy.x;
+            positions[i * 3 + 1] = xy.y;
+            positions[i * 3 + 2] = xy.z;
+            if (this.debugBands) {
+                const c = this.getDebugColorForType(p.type);
+                colors[i * 3 + 0] = c.r;
+                colors[i * 3 + 1] = c.g;
+                colors[i * 3 + 2] = c.b;
+            }
+            else {
+                colors[i * 3 + 0] = p.color.r;
+                colors[i * 3 + 1] = p.color.g;
+                colors[i * 3 + 2] = p.color.b;
+            }
+            sizes[i] = p.size;
+            opacities[i] = p.opacity;
+        }
+        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+        geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+        geometry.setAttribute('opacity', new THREE.BufferAttribute(opacities, 1));
+        // Mark frequently-updated attributes
+        // No need for setUsage in the current version of THREE.js
+        // Just use needsUpdate to tell Three.js to re-upload the buffers each frame
+        geometry.getAttribute('position').needsUpdate = true;
+        geometry.getAttribute('color').needsUpdate = true;
+        // Custom bubble shader for perfect circular bubbles with dramatic lighting
+        const vertexShader = `
+      attribute float size;
+      attribute float opacity;
+      varying vec3 vColor;
+      varying float vOpacity;
+      varying float vSize;
+
+      void main() {
+        vColor = color;
+        vOpacity = opacity;
+        vSize = size;
+
+        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+
+        // Smaller bokeh-style circles
+        gl_PointSize = size * 4.0;
+
+        gl_Position = projectionMatrix * mvPosition;
+      }
+    `;
+        const fragmentShader = `
+      varying vec3 vColor;
+      varying float vOpacity;
+      varying float vSize;
+
+      void main() {
+        // Create circular bubble coordinate system
+        vec2 center = gl_PointCoord - 0.5;
+        float distance = length(center);
+
+        // Perfect circular mask - discard pixels outside circle
+        if (distance > 0.5) discard;
+
+        // Dramatic bubble lighting effects
+        float rimDistance = distance * 2.0; // 0.0 at center, 1.0 at edge
+
+        // Bright center fading to edge (soap bubble effect)
+        float centerGlow = 1.0 - smoothstep(0.0, 0.35, rimDistance);
+
+        // Rim lighting - bright edges
+        float rimGlow = smoothstep(0.65, 1.0, rimDistance) * 2.0;
+
+        // Glass-like inner reflection
+        float bubble = smoothstep(0.85, 0.25, rimDistance);
+
+        // Combine lighting effects
+        float totalGlow = centerGlow * 0.7 + rimGlow * 1.6 + bubble * 0.7;
+
+        // Final bubble color with dramatic lighting
+        vec3 finalColor = vColor * totalGlow * 1.9;
+
+        // Smooth alpha falloff for glass-like appearance
+        float alpha = (1.0 - smoothstep(0.35, 0.52, distance)) * vOpacity;
+
+        gl_FragColor = vec4(finalColor, alpha);
+      }
+    `;
+        const material = new THREE.ShaderMaterial({
+            vertexShader,
+            fragmentShader,
+            transparent: true,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+            vertexColors: true,
+        });
+        this.particleSystem = new THREE.Points(geometry, material);
+        this.particleSystem.frustumCulled = false;
+        // Initial anchor placement at origin; will follow in update()
+        this.particleSystem.position.copy(this.anchor);
+        this.scene.add(this.particleSystem);
+    }
+    // Compute local position on the orbit for a particle at its current angle,
+    // adding a subtle radial breathing.
+    getLocalOrbitPos(p, age, right, up, forward, camForward) {
+        if (this.useSurface && p.type === 'surface' && p.u && p.v) {
+            // Surface-spread: use per-particle plane basis (u, v); allow full wrap
+            const jitter = p.radialJitterAmp * Math.sin(age * 2 * Math.PI * p.radialJitterFreq);
+            const arcRad = p.arcRadAmp * Math.sin(p.arcFreq * p.angle + (p.wigglePhase || 0));
+            let r = Math.max(0.001, p.radius + jitter + arcRad);
+            const cosA = Math.cos(p.angle);
+            const sinA = Math.sin(p.angle);
+            const out = new THREE.Vector3();
+            out.add(p.u.clone().multiplyScalar(cosA * r));
+            out.add(p.v.clone().multiplyScalar(sinA * r));
+            // Tiny axis wiggle for thickness
+            if (p.axis) {
+                const axWiggle = 0.002 *
+                    this.coreRadius *
+                    Math.sin(age * 2 * Math.PI * (p.wiggleFreqUp || 0.3) + (p.wigglePhase || 0));
+                out.add(p.axis.clone().multiplyScalar(axWiggle));
+            }
+            // Hard clamp to tight shell near exact surface
+            const minR = this.coreRadius * 1.0;
+            const maxR = this.coreRadius * 1.01;
+            const len = out.length();
+            if (len < minR)
+                out.setLength(minR);
+            else if (len > maxR)
+                out.setLength(maxR);
+            return out;
+        }
+        const jitter = p.radialJitterAmp * Math.sin(age * 2 * Math.PI * p.radialJitterFreq);
+        // Angle-correlated radial modulation prevents strict rings
+        const arcRad = p.arcRadAmp * Math.sin(p.arcFreq * p.angle + p.wigglePhase * 0.71);
+        let r = Math.max(0.001, p.radius + jitter + arcRad);
+        const cosA = Math.cos(p.angle);
+        const sinA = Math.sin(p.angle);
+        const out = new THREE.Vector3();
+        const upWiggle = 0.004 *
+            this.coreRadius *
+            Math.sin(age * 2 * Math.PI * p.wiggleFreqUp + p.wigglePhase);
+        const depthWiggle = 0.004 *
+            this.coreRadius *
+            Math.cos(age * 2 * Math.PI * p.wiggleFreqDepth + p.wigglePhase * 0.37);
+        const arcUp = p.arcUpAmp * Math.sin(p.arcFreq * p.angle + p.wigglePhase);
+        const arcDepth = p.arcDepthAmp * Math.cos(p.arcFreq * p.angle + p.wigglePhase * 0.53);
+        // Unified spherical placement (true wrap) for rim + caps
+        // Vary phi along theta for cap crescents; keep rim near equator
+        let phi = p.phi ?? Math.PI * 0.5;
+        const isCap = p.type === 'topCap' || p.type === 'bottomCap';
+        if (isCap && p.phiAmp) {
+            const sign = p.type === 'topCap' ? -1 : 1; // pull toward rim at arc center
+            phi = THREE.MathUtils.clamp(phi + sign * p.phiAmp * Math.sin(p.angle), 0.02, Math.PI - 0.02);
+        }
+        const rp = r * Math.sin(phi);
+        const y = r * Math.cos(phi);
+        const x = rp * cosA * p.ellipse;
+        const z = rp * sinA;
+        out.copy(right).multiplyScalar(x);
+        out.add(up.clone().multiplyScalar(y));
+        out.add(forward.clone().multiplyScalar(z));
+        // Layer subtle extras
+        out.add(up.clone().multiplyScalar(p.upBias + upWiggle + arcUp));
+        out.add(forward.clone().multiplyScalar(p.depthBias + depthWiggle + arcDepth));
+        // Different penetration limits for different particle types
+        const minShell = p.type === 'topCurve' || p.type === 'bottomCurve'
+            ? this.coreRadius * 0.7 // Rim particles: 30% inside surface
+            : this.coreRadius * 1.0; // Cap particles: stay at surface level
+        const len = out.length();
+        if (len < minShell) {
+            if (len < 1e-6) {
+                out.set(minShell, 0, 0);
+            }
+            else {
+                out.multiplyScalar(minShell / len);
+            }
+        }
+        // For banded mode, keep a slight front-bias so arcs read clearly
+        if (!(this.useSurface && p.type === 'surface')) {
+            const fCam = out.dot(camForward);
+            if (fCam > -this.FRONT_MIN) {
+                out.add(camForward.clone().multiplyScalar(-this.FRONT_MIN - fCam));
+            }
+        }
+        return out;
+    }
+    // Debug color palette per band
+    getDebugColorForType(type) {
+        switch (type) {
+            case 'topCurve':
+                return new THREE.Color(0x00ffff); // cyan
+            case 'bottomCurve':
+                return new THREE.Color(0xff8800); // orange
+            case 'topCap':
+                return new THREE.Color(0xff00ff); // magenta
+            case 'bottomCap':
+                return new THREE.Color(0xffff00); // yellow
+            case 'orbit':
+                return new THREE.Color(0xffffff); // white
+            case 'surface':
+                return new THREE.Color(0x66ff66); // green for debug
+        }
+    }
+}
+
+class TraitVisualComponent {
+    renderer2;
+    ngZone;
+    canvasRef;
+    // Input properties for configuration
+    nodeData = [];
+    attributeWeights = [];
+    preferenceWeights = [];
+    attributeCount;
+    preferenceCount;
+    // Three.js scene properties
+    scene;
+    camera;
+    renderer;
+    controls;
+    raycaster = new THREE.Raycaster();
+    mouse = new THREE.Vector2();
+    cluster;
+    selectedNode = null;
+    draggingNode = null;
+    dragPlane = new THREE.Plane();
+    dragOffset = new THREE.Vector3();
+    newNodeCounter = 1;
+    isCameraLocked = false;
+    // Private properties
+    nodeAuras = new Map();
+    starFieldNear;
+    starFieldFar;
+    starTexture = null;
+    dustField = null;
+    pointerPitchAxis = new THREE.Vector3(1, 0, 0);
+    pointerYawAxis = new THREE.Vector3(0, 1, 0);
+    pointerPitchCurrent = 0;
+    pointerPitchTarget = 0;
+    pointerYawCurrent = 0;
+    pointerYawTarget = 0;
+    pointerYawAccumulated = 0;
+    pointerOffset = new THREE.Vector3();
+    pointerPitchMax = THREE.MathUtils.degToRad(1.8);
+    pointerYawMax = THREE.MathUtils.degToRad(0.8);
+    pointerYawSpeed = THREE.MathUtils.degToRad(0.15);
+    pointerPitchDamping = 4;
+    pointerYawDamping = 4;
+    constructor(renderer2, ngZone) {
+        this.renderer2 = renderer2;
+        this.ngZone = ngZone;
+    }
+    ngOnInit() {
+        console.log('TraitVisualComponent: ngOnInit - nodeData length:', this.nodeData.length);
+        console.log('TraitVisualComponent: attributeWeights length:', this.attributeWeights.length);
+        console.log('TraitVisualComponent: preferenceWeights length:', this.preferenceWeights.length);
+        this.initScene();
+        if (this.nodeData.length > 0) {
+            this.loadNodes();
+            this.syncNodeWeightGlobals();
+        }
+        else {
+            console.warn('TraitVisualComponent: No nodeData provided!');
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['nodeData'] && !changes['nodeData'].firstChange && this.scene) {
+            // Reload nodes when nodeData changes
+            if (this.cluster) {
+                this.scene.remove(this.cluster);
+                this.nodeAuras.forEach((a) => a.dispose());
+                this.nodeAuras.clear();
+            }
+            if (this.nodeData.length > 0) {
+                this.loadNodes();
+                this.syncNodeWeightGlobals();
+            }
+        }
+        if ((changes['attributeWeights'] || changes['preferenceWeights']) && !changes['attributeWeights']?.firstChange && !changes['preferenceWeights']?.firstChange) {
+            this.syncNodeWeightGlobals();
+        }
+    }
+    ngAfterViewInit() {
+        this.animate();
+        this.renderer2.listen(this.canvasRef.nativeElement, 'contextmenu', (event) => this.onRightClick(event));
+        window.addEventListener('resize', () => this.onWindowResize());
+        const canvas = this.canvasRef.nativeElement;
+        this.renderer2.listen('window', 'mousemove', (event) => this.onMouseMove(event));
+        this.renderer2.listen(canvas, 'mousedown', (event) => this.onDragStart(event));
+        this.renderer2.listen(canvas, 'mousemove', (event) => this.onDragMove(event));
+        this.renderer2.listen(canvas, 'mouseup', (event) => this.onDragEnd(event));
+        this.renderer2.listen(canvas, 'mouseleave', (event) => {
+            this.onDragEnd(event);
+            this.onCanvasLeave();
+        });
+    }
+    ngOnDestroy() {
+        // Dispose all auras
+        this.nodeAuras.forEach((a) => a.dispose());
+        this.nodeAuras.clear();
+        this.dustField?.dispose();
+    }
+    currentCentral() {
+        if (!this.cluster)
+            return null;
+        return this.cluster.nodes.find((node) => node.isSun) || null;
+    }
+    nonSuns() {
+        if (!this.cluster)
+            return [];
+        return this.cluster.nodes.filter((node) => !node.isSun);
+    }
+    syncNodeWeightGlobals() {
+        if (this.attributeWeights.length > 0) {
+            Node.attributeWeights = this.attributeWeights.slice();
+        }
+        if (this.preferenceWeights.length > 0) {
+            Node.preferenceWeights = this.preferenceWeights.slice();
+        }
+    }
+    initScene() {
+        this.scene = new THREE.Scene();
+        this.camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000);
+        this.camera.up.set(0, 1, 0);
+        this.camera.position.set(0, 0, 60);
+        const initialTilt = THREE.MathUtils.degToRad(-45);
+        this.camera.position.applyAxisAngle(new THREE.Vector3(1, 0, 0), -initialTilt);
+        this.camera.lookAt(0, 0, 0);
+        this.renderer = new THREE.WebGLRenderer({
+            canvas: this.canvasRef.nativeElement,
+            antialias: true,
+            alpha: true,
+        });
+        this.renderer.setClearColor(0x000000, 0);
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.target.set(0, 0, 0);
+        this.controls.enableDamping = true;
+        this.controls.enableRotate = true;
+        this.controls.screenSpacePanning = true;
+        this.controls.enablePan = true;
+        this.controls.enableZoom = true;
+        this.scene.add(new THREE.AmbientLight(0xbbbbbb, 1));
+        this.scene.add(new THREE.DirectionalLight(0xffffff, 1));
+        // Add immersive 3D starfields
+        this.starFieldFar = this.createStarField({
+            count: 1200,
+            innerRadius: 120,
+            outerRadius: 170,
+            size: 1,
+            opacity: 0.6,
+        });
+        this.starFieldFar.renderOrder = -2;
+        this.scene.add(this.starFieldFar);
+        this.starFieldNear = this.createStarField({
+            count: 200,
+            innerRadius: 60,
+            outerRadius: 110,
+            size: 1.2,
+            opacity: 0.75,
+        });
+        this.starFieldNear.renderOrder = -1;
+        this.scene.add(this.starFieldNear);
+    }
+    loadNodes() {
+        if (this.nodeData.length === 0)
+            return;
+        this.cluster = new Cluster(this.nodeData);
+        this.scene.add(this.cluster);
+        const initialCentral = this.cluster.nodes.find((node) => node.isSun) || this.cluster.nodes[0];
+        initialCentral.setSun(true, 5);
+        initialCentral.mesh.scale.set(3, 3, 3);
+        this.ensureNodeAuras();
+        const sun = this.currentCentral();
+        if (sun) {
+            const geom = sun.mesh.geometry;
+            const bs = geom.boundingSphere ?? new THREE.Sphere(new THREE.Vector3(), 0.05);
+            const coreRadius = (bs.radius || 0.05) * sun.mesh.scale.x;
+            let dustOuter = 18.0;
+            let dustThickness = 0.0;
+            let dustMidCount = 160000;
+            let dustBokehCount = 24000;
+            let dustNoise = 0.035;
+            let dustMinW = 0.02;
+            let dustMaxW = 0.08;
+            let dustMode = 'disk';
+            let searchParams;
+            try {
+                const rawSearch = window?.location?.search ?? '';
+                searchParams = new URLSearchParams(rawSearch);
+            }
+            catch {
+                searchParams = undefined;
+            }
+            const parseParam = (key, fallback) => {
+                if (!searchParams)
+                    return fallback;
+                const raw = searchParams.get(key);
+                if (raw === null)
+                    return fallback;
+                const value = parseFloat(raw);
+                return Number.isFinite(value) ? value : fallback;
+            };
+            dustOuter = Math.max(coreRadius * 1.05, parseParam('dustOuter', dustOuter));
+            dustThickness = Math.max(0, parseParam('dustThick', dustThickness));
+            dustMidCount = Math.max(0, Math.round(parseParam('dustCount', dustMidCount)));
+            dustBokehCount = Math.max(0, Math.round(parseParam('dustBokeh', dustBokehCount)));
+            dustNoise = Math.max(0, parseParam('dustNoise', dustNoise));
+            dustMinW = Math.max(0.001, parseParam('dustMinW', dustMinW));
+            dustMaxW = Math.max(dustMinW + 0.001, parseParam('dustMaxW', dustMaxW));
+            const dustModeParam = searchParams?.get('dustMode');
+            if (dustModeParam === 'disk') {
+                dustMode = 'disk';
+            }
+        }
+    }
+    onWindowResize() {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.dustField?.setViewportHeight(window.innerHeight);
+    }
+    onRightClick(event) {
+        event.preventDefault();
+        // Simplified right-click handling - just select node
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.cluster?.children || [], true);
+        if (intersects.length > 0) {
+            this.selectedNode = intersects[0].object.parent;
+        }
+    }
+    onMouseMove(event) {
+        if (this.draggingNode)
+            return;
+        this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+        this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+        this.pointerPitchTarget = 0;
+        this.pointerYawTarget = 0;
+        this.pointerYawAccumulated = 0;
+        return;
+    }
+    onDragStart(event) {
+        event.preventDefault();
+        const canvas = this.canvasRef.nativeElement;
+        const rect = canvas.getBoundingClientRect();
+        const mouse = new THREE.Vector2(((event.clientX - rect.left) / rect.width) * 2 - 1, -((event.clientY - rect.top) / rect.height) * 2 + 1);
+        this.raycaster.setFromCamera(mouse, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.cluster?.children || [], true);
+        if (intersects.length > 0) {
+            this.draggingNode = intersects[0].object.parent;
+            this.controls.enabled = false;
+            const planeNormal = this.camera
+                .getWorldDirection(new THREE.Vector3())
+                .clone()
+                .negate();
+            this.dragPlane.setFromNormalAndCoplanarPoint(planeNormal, intersects[0].point);
+            this.dragOffset.copy(intersects[0].point).sub(this.draggingNode.position);
+        }
+    }
+    onDragMove(event) {
+        if (!this.draggingNode)
+            return;
+        event.preventDefault();
+        const canvas = this.canvasRef.nativeElement;
+        const rect = canvas.getBoundingClientRect();
+        const mouse = new THREE.Vector2(((event.clientX - rect.left) / rect.width) * 2 - 1, -((event.clientY - rect.top) / rect.height) * 2 + 1);
+        this.raycaster.setFromCamera(mouse, this.camera);
+        const intersection = new THREE.Vector3();
+        if (this.raycaster.ray.intersectPlane(this.dragPlane, intersection)) {
+            this.draggingNode.position.copy(intersection.sub(this.dragOffset));
+        }
+    }
+    onDragEnd(event) {
+        if (!this.draggingNode)
+            return;
+        event.preventDefault();
+        this.draggingNode = null;
+        this.controls.enabled = true;
+    }
+    onCanvasLeave() {
+        this.resetPointerPitch();
+    }
+    resetPointerPitch(instant = false) {
+        this.pointerPitchTarget = 0;
+        this.pointerYawTarget = 0;
+        this.pointerYawAccumulated = 0;
+        if (!instant)
+            return;
+        if (!this.camera || !this.controls) {
+            this.pointerPitchCurrent = 0;
+            this.pointerYawCurrent = 0;
+            return;
+        }
+        const target = this.controls.target;
+        const offset = this.pointerOffset;
+        offset.copy(this.camera.position).sub(target);
+        if (this.pointerPitchCurrent !== 0) {
+            offset.applyAxisAngle(this.pointerPitchAxis, -this.pointerPitchCurrent);
+        }
+        if (this.pointerYawCurrent !== 0) {
+            offset.applyAxisAngle(this.pointerYawAxis, -this.pointerYawCurrent);
+        }
+        this.camera.position.copy(target).add(offset);
+        this.camera.lookAt(target);
+        this.pointerPitchCurrent = 0;
+        this.pointerYawCurrent = 0;
+    }
+    updateCameraOrbitFromPointer(deltaTime) {
+        if (!this.camera || !this.controls)
+            return;
+        if (this.isCameraLocked)
+            return;
+        const target = this.controls.target;
+        const offset = this.pointerOffset;
+        offset.copy(this.camera.position).sub(target);
+        if (this.pointerPitchCurrent !== 0) {
+            offset.applyAxisAngle(this.pointerPitchAxis, -this.pointerPitchCurrent);
+        }
+        if (this.pointerYawCurrent !== 0) {
+            offset.applyAxisAngle(this.pointerYawAxis, -this.pointerYawCurrent);
+        }
+        const dt = Math.max(deltaTime, 0);
+        const dampingPitch = 1 - Math.exp(-this.pointerPitchDamping * dt);
+        const dampingYaw = 1 - Math.exp(-this.pointerYawDamping * dt);
+        const lerpFactorPitch = THREE.MathUtils.clamp(Number.isFinite(dampingPitch) ? dampingPitch : 0, 0, 1);
+        const lerpFactorYaw = THREE.MathUtils.clamp(Number.isFinite(dampingYaw) ? dampingYaw : 0, 0, 1);
+        this.pointerPitchCurrent = THREE.MathUtils.lerp(this.pointerPitchCurrent, this.pointerPitchTarget, lerpFactorPitch);
+        this.pointerYawCurrent = THREE.MathUtils.lerp(this.pointerYawCurrent, this.pointerYawTarget, lerpFactorYaw);
+        if (Math.abs(this.pointerPitchCurrent) < 1e-4 &&
+            Math.abs(this.pointerPitchTarget) < 1e-4) {
+            this.pointerPitchCurrent = 0;
+        }
+        if (Math.abs(this.pointerYawCurrent) < 1e-4 &&
+            Math.abs(this.pointerYawTarget) < 1e-4) {
+            this.pointerYawCurrent = 0;
+        }
+        if (this.pointerPitchCurrent !== 0) {
+            offset.applyAxisAngle(this.pointerPitchAxis, this.pointerPitchCurrent);
+        }
+        if (this.pointerYawCurrent !== 0) {
+            offset.applyAxisAngle(this.pointerYawAxis, this.pointerYawCurrent);
+        }
+        this.camera.position.copy(target).add(offset);
+        this.camera.lookAt(target);
+    }
+    animate() {
+        this.ngZone.runOutsideAngular(() => {
+            let lastTime = 0;
+            const loop = (currentTime) => {
+                requestAnimationFrame(loop);
+                const deltaTime = (currentTime - lastTime) / 1000;
+                lastTime = currentTime;
+                this.controls.update();
+                this.updateCameraOrbitFromPointer(deltaTime);
+                if (this.cluster)
+                    this.cluster.update(undefined, this.scene, this.camera);
+                if (this.cluster) {
+                    for (const node of this.cluster.nodes) {
+                        const aura = this.nodeAuras.get(node);
+                        if (aura) {
+                            const geom = node.mesh.geometry;
+                            const bs = geom.boundingSphere ??
+                                new THREE.Sphere(new THREE.Vector3(), 0.05);
+                            const newCoreRadius = (bs.radius || 0.05) * node.mesh.scale.x;
+                            const ud = node.userData;
+                            const prevCoreRadius = ud._auraCoreRadius;
+                            const needsResize = !prevCoreRadius ||
+                                Math.abs(newCoreRadius - prevCoreRadius) / prevCoreRadius >
+                                    0.005;
+                            if (needsResize) {
+                                aura.resizeCoreRadius(newCoreRadius);
+                                const occ = ud._occluder;
+                                if (occ && prevCoreRadius) {
+                                    const scaleFactor = newCoreRadius / prevCoreRadius;
+                                    occ.scale.multiplyScalar(scaleFactor);
+                                }
+                                ud._auraCoreRadius = newCoreRadius;
+                            }
+                            aura.update(node.position, node.velocity, deltaTime, this.camera);
+                        }
+                    }
+                }
+                const center = this.currentCentral()?.position ?? new THREE.Vector3();
+                if (this.dustField && this.cluster) {
+                    const atts = this.cluster.nodes
+                        .filter((n) => !n.isSun)
+                        .map((n) => {
+                        const geom = n.mesh.geometry;
+                        const bs = geom.boundingSphere ??
+                            new THREE.Sphere(new THREE.Vector3(), 0.05);
+                        const radius = (bs.radius || 0.05) * n.mesh.scale.x;
+                        return { position: n.position.clone(), radius };
+                    });
+                    this.dustField.setAttractorsWorld(atts);
+                }
+                this.dustField?.update(deltaTime, center);
+                if (this.starFieldNear && this.starFieldFar) {
+                    this.starFieldNear.rotation.y += 0.00025;
+                    this.starFieldFar.rotation.y += 0.0001;
+                }
+                this.renderer.render(this.scene, this.camera);
+            };
+            loop(0);
+        });
+    }
+    ensureNodeAuras() {
+        if (!this.cluster)
+            return;
+        for (const node of this.cluster.nodes) {
+            if (!this.nodeAuras.has(node)) {
+                const geom = node.mesh.geometry;
+                const bs = geom.boundingSphere ?? new THREE.Sphere(new THREE.Vector3(), 0.05);
+                const coreRadius = (bs.radius || 0.05) * node.mesh.scale.x;
+                const particleCount = node.isSun ? 600 : 200;
+                const aura = new BlackHoleParticleField(this.scene, {
+                    coreRadius,
+                    particleCount,
+                    palette: node.isSun ? 'sun' : 'planet',
+                    distribution: 'surface',
+                    speedScale: 0.3,
+                });
+                this.nodeAuras.set(node, aura);
+                const occGeom = new THREE.SphereGeometry(coreRadius * 0.99, 24, 24);
+                const occMat = new THREE.MeshBasicMaterial({
+                    color: 0x000000,
+                    depthWrite: true,
+                });
+                occMat.colorWrite = false;
+                const occluder = new THREE.Mesh(occGeom, occMat);
+                occluder.renderOrder = -0.5;
+                node.add(occluder);
+                node.userData._auraCoreRadius = coreRadius;
+                node.userData._occluder = occluder;
+            }
+        }
+    }
+    createStarField(opts) {
+        const geometry = new THREE.BufferGeometry();
+        const positions = new Float32Array(opts.count * 3);
+        const colors = new Float32Array(opts.count * 3);
+        for (let i = 0; i < opts.count; i++) {
+            const dir = new THREE.Vector3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1).normalize();
+            const r = THREE.MathUtils.lerp(opts.innerRadius, opts.outerRadius, Math.random());
+            const pos = dir.multiplyScalar(r);
+            positions[i * 3 + 0] = pos.x;
+            positions[i * 3 + 1] = pos.y;
+            positions[i * 3 + 2] = pos.z;
+            const warm = Math.random() < 0.45;
+            const c = warm
+                ? new THREE.Color(1.0, 0.92 + Math.random() * 0.05, 0.98)
+                : new THREE.Color(0.92, 0.95 + Math.random() * 0.04, 1.0);
+            colors[i * 3 + 0] = c.r;
+            colors[i * 3 + 1] = c.g;
+            colors[i * 3 + 2] = c.b;
+        }
+        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+        const material = new THREE.PointsMaterial({
+            size: opts.size,
+            sizeAttenuation: true,
+            transparent: true,
+            opacity: opts.opacity,
+            depthWrite: false,
+            vertexColors: true,
+            blending: THREE.AdditiveBlending,
+            map: this.getStarTexture(),
+            alphaMap: this.getStarTexture(),
+        });
+        material.alphaTest = 0.15;
+        const points = new THREE.Points(geometry, material);
+        points.frustumCulled = false;
+        return points;
+    }
+    getStarTexture() {
+        if (this.starTexture)
+            return this.starTexture;
+        const size = 128;
+        const canvas = document.createElement('canvas');
+        canvas.width = size;
+        canvas.height = size;
+        const ctx = canvas.getContext('2d');
+        const g = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+        g.addColorStop(0.0, 'rgba(255,255,255,1)');
+        g.addColorStop(0.4, 'rgba(255,255,255,0.9)');
+        g.addColorStop(0.7, 'rgba(255,255,255,0.4)');
+        g.addColorStop(1.0, 'rgba(255,255,255,0)');
+        ctx.fillStyle = g;
+        ctx.fillRect(0, 0, size, size);
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.minFilter = THREE.LinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+        texture.anisotropy = 2;
+        texture.needsUpdate = true;
+        this.starTexture = texture;
+        return texture;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TraitVisualComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: TraitVisualComponent, isStandalone: true, selector: "tv-trait-visual", inputs: { nodeData: "nodeData", attributeWeights: "attributeWeights", preferenceWeights: "preferenceWeights", attributeCount: "attributeCount", preferenceCount: "preferenceCount" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["rendererCanvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"app-wrapper\">\r\n  <canvas #rendererCanvas></canvas>\r\n</div>\r\n\r\n", styles: [".app-wrapper{display:flex;width:100vw;position:relative;height:100vh;background:#000}canvas{display:flex;width:100vw;height:100vh;overflow:hidden;position:relative;z-index:1;background:transparent!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TraitVisualComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tv-trait-visual', standalone: true, imports: [CommonModule], template: "<div class=\"app-wrapper\">\r\n  <canvas #rendererCanvas></canvas>\r\n</div>\r\n\r\n", styles: [".app-wrapper{display:flex;width:100vw;position:relative;height:100vh;background:#000}canvas{display:flex;width:100vw;height:100vh;overflow:hidden;position:relative;z-index:1;background:transparent!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { canvasRef: [{
+                type: ViewChild,
+                args: ['rendererCanvas', { static: true }]
+            }], nodeData: [{
+                type: Input
+            }], attributeWeights: [{
+                type: Input
+            }], preferenceWeights: [{
+                type: Input
+            }], attributeCount: [{
+                type: Input
+            }], preferenceCount: [{
+                type: Input
+            }] } });
+
+// Dynamically resolve the PCA constructor for different build types
+const PCAClass = PCAImport.default || PCAImport.PCA || PCAImport;
+let dynamicCounts = {
+    attributes: 5,
+    preferences: 5
+};
+function updateCounts(attrCount, prefCount) {
+    dynamicCounts.attributes = attrCount;
+    dynamicCounts.preferences = prefCount;
+}
+/**
+ * Performs PCA on a list of attribute arrays to map them into 3D space.
+ * Returns:
+ *  - positions: normalized [x, y, z] tuples
+ *  - weights: per-attribute magnitude across PCA components
+ */
+function computePCA3D(attributesList) {
+    const pca = new PCAClass(attributesList, { center: true, scale: true });
+    const reduced = pca.predict(attributesList, { nComponents: 3 }).to2DArray();
+    // --- Compute per-attribute weights ---
+    const loadings = pca.getLoadings().to2DArray();
+    const weights = loadings.map((arr) => Math.sqrt(arr[0] ** 2 + arr[1] ** 2 + arr[2] ** 2));
+    const maxAbs = Math.max(...reduced.flatMap((arr) => arr.map((v) => Math.abs(v))));
+    const positions = reduced.map((arr) => [
+        arr[0] / maxAbs,
+        arr[1] / maxAbs,
+        arr[2] / maxAbs
+    ]);
+    return { positions, weights };
+}
+function generateAttributes(count, base = 0) {
+    const attrs = {};
+    for (let i = 0; i < count; i++)
+        attrs[`attr${i + 1}`] = (base + i * 20) % 101;
+    return attrs;
+}
+const colors = ['#C300FF', '#FF3366'];
+const baseNodes = [
+    {
+        id: 1,
+        name: 'James',
+        initialPosition: [0, 0, 0],
+        isSun: true,
+        color: '#C300FF',
+        attributes: generateAttributes(dynamicCounts.attributes, 0),
+        preferences: generateAttributes(dynamicCounts.preferences, 100),
+    },
+    ...[...Array(5)].map((_, i) => {
+        const id = i + 2;
+        const names = ['John', 'Alice', 'Robert', 'Emma', 'Michael'];
+        return {
+            id,
+            name: names[i],
+            initialPosition: [0, 0, 0],
+            isSun: false,
+            color: colors[i % 2],
+            attributes: generateAttributes(dynamicCounts.attributes, i * 10),
+            preferences: generateAttributes(dynamicCounts.preferences, 0),
+        };
+    }),
+];
+const attributesList = baseNodes.map((n) => Object.values(n.attributes));
+const { positions, weights } = computePCA3D(attributesList);
+const nodeData = baseNodes.map((node, i) => {
+    if (node.isSun)
+        return { ...node, initialPosition: [0, 0, 0] };
+    const [x, y, z] = positions[i];
+    return {
+        ...node,
+        initialPosition: [x * 5, y * 5, z * 5],
+    };
+});
+const attributeWeights = weights;
+
+/*
+ * Public API Surface of trait-visual
+ */
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TraitVisualComponent, attributeWeights, dynamicCounts, nodeData, updateCounts };
+//# sourceMappingURL=naniteninja-trait-visual.mjs.map