@mindexec/cli 0.2.0

package/wwwroot/_content/MindExecution.Shared/js/background-themes.js

@@ -0,0 +1,1721 @@
+// File: X:\Dev@Work\MindExecution\wwwroot\js\background-themes.js
+// 3D background theme library shared by MindMap, PlanMaster, etc.
+(function () {
+    if (typeof globalThis.THREE === 'undefined') {
+        console.error('THREE not loaded, BackgroundThemes will not initialize.');
+        return;
+    }
+
+    const THREE = globalThis.THREE;
+    let plusTexture = null; // Reusable '+' texture for SpatialGrid
+    const THEME_ANIMATION_MODE = Object.freeze({
+        None: 'none',
+        Camera: 'camera',
+        Continuous: 'continuous'
+    });
+    const THEME_ANIMATION_MODE_BY_NAME = Object.freeze({
+        SpatialGrid2D: THEME_ANIMATION_MODE.Camera,
+        GridPlane: THEME_ANIMATION_MODE.Camera,
+        XYGrid: THEME_ANIMATION_MODE.Camera,
+        SpinningBoxes: THEME_ANIMATION_MODE.Continuous,
+        Space3D: THEME_ANIMATION_MODE.Continuous,
+        SpiritFlow: THEME_ANIMATION_MODE.Continuous,
+        None: THEME_ANIMATION_MODE.None
+    });
+    const THEME_CAMERA_EPSILON = 0.001;
+
+    // --- Helper 1: create '+' texture (for SpatialGrid) ---
+    function createPlusTexture() {
+        if (plusTexture) return plusTexture; // Reuse if already created
+
+        const canvas = document.createElement('canvas');
+        canvas.width = 64;
+        canvas.height = 64;
+        const ctx = canvas.getContext('2d');
+        // Mid gray so it remains visible on bright backgrounds
+        ctx.fillStyle = '#888888'; // '#333333' -> '#888888'
+        ctx.fillRect(28, 4, 8, 56);
+        ctx.fillRect(4, 28, 56, 8);
+
+        plusTexture = new THREE.CanvasTexture(canvas);
+        plusTexture.colorSpace = THREE.SRGBColorSpace;
+        plusTexture.needsUpdate = true;
+        return plusTexture;
+    }
+
+    // --- Helper 2: dispose theme resources ---
+    function disposeThemeObject(themeObject) {
+        if (!themeObject) return;
+        if (typeof themeObject.customDispose === 'function') {
+            themeObject.customDispose();
+            return;
+        }
+        themeObject.traverse(child => {
+            if (child.geometry) child.geometry.dispose();
+            if (child.material) {
+                if (Array.isArray(child.material)) {
+                    child.material.forEach(m => { if (m.map) m.map.dispose(); m.dispose(); });
+                } else {
+                    if (child.material.map) child.material.map.dispose();
+                    child.material.dispose();
+                }
+            }
+        });
+    }
+
+    function setThemeAnimationMode(themeObject, mode) {
+        if (!themeObject) return themeObject;
+        if (!themeObject.userData) {
+            themeObject.userData = {};
+        }
+        themeObject.userData.backgroundThemeAnimationMode = mode;
+        return themeObject;
+    }
+
+    function getThemeAnimationMode(themeName, themeObject) {
+        const objectMode = themeObject?.userData?.backgroundThemeAnimationMode;
+        if (objectMode) {
+            return objectMode;
+        }
+        return THEME_ANIMATION_MODE_BY_NAME[themeName] || THEME_ANIMATION_MODE.None;
+    }
+
+    function readFiniteNumber(value, fallback = 0) {
+        const number = Number(value);
+        return Number.isFinite(number) ? number : fallback;
+    }
+
+    function captureThemeCameraSignature(camera) {
+        if (!camera) return null;
+        return {
+            x: readFiniteNumber(camera.position?.x),
+            y: readFiniteNumber(camera.position?.y),
+            z: readFiniteNumber(camera.position?.z),
+            rx: readFiniteNumber(camera.rotation?.x),
+            ry: readFiniteNumber(camera.rotation?.y),
+            rz: readFiniteNumber(camera.rotation?.z),
+            zoom: readFiniteNumber(camera.zoom, 1),
+            fov: readFiniteNumber(camera.fov),
+            aspect: readFiniteNumber(camera.aspect)
+        };
+    }
+
+    function hasThemeCameraChanged(previous, next) {
+        if (!previous || !next) return true;
+        return Object.keys(next).some(key => Math.abs(next[key] - previous[key]) > THEME_CAMERA_EPSILON);
+    }
+
+    function getThemeAnimationState(themeObject) {
+        if (!themeObject) return null;
+        if (!themeObject.userData) {
+            themeObject.userData = {};
+        }
+        if (!themeObject.userData.backgroundThemeAnimationState) {
+            themeObject.userData.backgroundThemeAnimationState = {
+                lastCameraSignature: null
+            };
+        }
+        return themeObject.userData.backgroundThemeAnimationState;
+    }
+
+    function shouldAnimateTheme(themeName, themeObject, camera, options = {}) {
+        if (!themeObject || typeof themeObject.animate !== 'function') {
+            return false;
+        }
+
+        const mode = getThemeAnimationMode(themeName, themeObject);
+        if (mode === THEME_ANIMATION_MODE.Continuous) {
+            return true;
+        }
+        if (mode === THEME_ANIMATION_MODE.None) {
+            return options.force === true;
+        }
+
+        const state = getThemeAnimationState(themeObject);
+        const nextSignature = captureThemeCameraSignature(camera);
+        return options.force === true || hasThemeCameraChanged(state?.lastCameraSignature, nextSignature);
+    }
+
+    function runThemeAnimationIfNeeded(themeName, themeObject, camera, options = {}) {
+        if (!shouldAnimateTheme(themeName, themeObject, camera, options)) {
+            return false;
+        }
+
+        themeObject.animate(camera);
+
+        const mode = getThemeAnimationMode(themeName, themeObject);
+        if (mode === THEME_ANIMATION_MODE.Camera || mode === THEME_ANIMATION_MODE.None) {
+            const state = getThemeAnimationState(themeObject);
+            if (state) {
+                state.lastCameraSignature = captureThemeCameraSignature(camera);
+            }
+        }
+
+        return true;
+    }
+
+    function resolveThemeGridColor(colorValue, fallback = 0xcccccc) {
+        if (colorValue && colorValue.isColor) {
+            return colorValue.clone();
+        }
+
+        try {
+            return new THREE.Color(colorValue ?? fallback);
+        } catch {
+            return new THREE.Color(fallback);
+        }
+    }
+
+    function setInfiniteGridHelperOpacity(gridHelper, opacityFactor, baseSmallOpacity, baseLargeOpacity) {
+        if (!gridHelper || !gridHelper.children) return;
+
+        const visible = opacityFactor > 0.01;
+        gridHelper.visible = visible;
+        if (!visible) {
+            return;
+        }
+
+        if (gridHelper.children[0]?.material) {
+            gridHelper.children[0].material.opacity = baseSmallOpacity * opacityFactor;
+        }
+        if (gridHelper.children[1]?.material) {
+            gridHelper.children[1].material.opacity = baseLargeOpacity * opacityFactor;
+        }
+    }
+
+    function getAdaptiveXYGridOpacityFactors(cameraZ) {
+        if (cameraZ < 1800) {
+            return { fine: 1.0, coarse: 0.0, far: 0.0 };
+        }
+        if (cameraZ < 3600) {
+            const t = (cameraZ - 1800) / 1800;
+            return { fine: 1.0 - t, coarse: t, far: 0.0 };
+        }
+        if (cameraZ < 12000) {
+            return { fine: 0.0, coarse: 1.0, far: 0.0 };
+        }
+        if (cameraZ < 22000) {
+            const t = (cameraZ - 12000) / 10000;
+            return { fine: 0.0, coarse: 1.0 - t, far: t };
+        }
+        if (cameraZ < 50000) {
+            return { fine: 0.0, coarse: 0.0, far: 0.9 };
+        }
+        if (cameraZ < 80000) {
+            const t = (cameraZ - 50000) / 30000;
+            return { fine: 0.0, coarse: 0.0, far: 0.9 - (t * 0.35) };
+        }
+
+        return { fine: 0.0, coarse: 0.0, far: 0.55 };
+    }
+
+    function createAdaptiveXYGridOverlay(colorValue, options = {}) {
+        const overlayGroup = new THREE.Group();
+        const color = resolveThemeGridColor(colorValue, 0xcccccc);
+        const tmp = new THREE.Vector3();
+        const settings = {
+            fineDistance: 45000,
+            coarseDistance: 120000,
+            farDistance: 320000,
+            fineSmallOpacity: 0.4,
+            fineLargeOpacity: 0.25,
+            coarseSmallOpacity: 0.34,
+            coarseLargeOpacity: 0.22,
+            farSmallOpacity: 0.26,
+            farLargeOpacity: 0.16,
+            ...options
+        };
+
+        const grids = [
+            {
+                key: 'fine',
+                helper: new window.InfiniteGridHelper(10, 100, color.clone(), settings.fineDistance, 'xyz'),
+                snap: 100,
+                baseSmallOpacity: settings.fineSmallOpacity,
+                baseLargeOpacity: settings.fineLargeOpacity
+            },
+            {
+                key: 'coarse',
+                helper: new window.InfiniteGridHelper(100, 1000, color.clone(), settings.coarseDistance, 'xyz'),
+                snap: 1000,
+                baseSmallOpacity: settings.coarseSmallOpacity,
+                baseLargeOpacity: settings.coarseLargeOpacity
+            },
+            {
+                key: 'far',
+                helper: new window.InfiniteGridHelper(1000, 10000, color.clone(), settings.farDistance, 'xyz'),
+                snap: 10000,
+                baseSmallOpacity: settings.farSmallOpacity,
+                baseLargeOpacity: settings.farLargeOpacity
+            }
+        ];
+
+        grids.forEach((grid, index) => {
+            grid.helper.visible = index === 0;
+            overlayGroup.add(grid.helper);
+        });
+
+        overlayGroup.animate = (camera) => {
+            if (!camera) return;
+
+            tmp.copy(camera.position);
+            tmp.z = 0;
+
+            grids.forEach(grid => {
+                const snappedX = Math.round(tmp.x / grid.snap) * grid.snap;
+                const snappedY = Math.round(tmp.y / grid.snap) * grid.snap;
+                grid.helper.position.set(snappedX, snappedY, 0);
+            });
+
+            const factors = getAdaptiveXYGridOpacityFactors(camera.position.z);
+            grids.forEach(grid => {
+                setInfiniteGridHelperOpacity(
+                    grid.helper,
+                    factors[grid.key] || 0,
+                    grid.baseSmallOpacity,
+                    grid.baseLargeOpacity);
+            });
+        };
+
+        return setThemeAnimationMode(overlayGroup, THEME_ANIMATION_MODE.Camera);
+    }
+
+    // --- Theme definitions ---
+    const themes = {
+        // Theme 1: SpatialGrid (3D dots + '+' markers)
+        'SpatialGrid3D': {
+            create: (scene) => {
+                scene.background = new THREE.Color(0xf0f2f5); // Bright background
+                const gridRange = 50, gridStep = 1, markerStep = 10;
+                const markerSize = 0.5, dotSize = 0.1;
+                const dotVertices = [], markerVertices = [];
+                for (let x = -gridRange; x <= gridRange; x += gridStep) {
+                    for (let y = -gridRange; y <= gridRange; y += gridStep) {
+                        for (let z = -gridRange; z <= gridRange; z += gridStep) {
+                            if (x % markerStep === 0 && y % markerStep === 0 && z % markerStep === 0) { markerVertices.push(x, y, z); }
+                            else { dotVertices.push(x, y, z); }
+                        }
+                    }
+                }
+                const themeGroup = new THREE.Group();
+                const dotGeom = new THREE.BufferGeometry();
+                dotGeom.setAttribute('position', new THREE.Float32BufferAttribute(dotVertices, 3));
+                const dotMaterial = new THREE.PointsMaterial({ color: 0x888888, size: dotSize, sizeAttenuation: true });
+                themeGroup.add(new THREE.Points(dotGeom, dotMaterial));
+                const markerGeom = new THREE.BufferGeometry();
+                markerGeom.setAttribute('position', new THREE.Float32BufferAttribute(markerVertices, 3));
+                const markerMaterial = new THREE.PointsMaterial({ map: createPlusTexture(), size: markerSize, sizeAttenuation: true, transparent: true, alphaTest: 0.1 });
+                themeGroup.add(new THREE.Points(markerGeom, markerMaterial));
+                return themeGroup;
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
+
+        // Theme 2: SpatialGrid2D (dots and '+' markers on the XY plane only)
+        'SpatialGrid2D': {
+            create: (scene) => {
+                scene.background = new THREE.Color(0xf0f2f5); // Bright background
+                const gridRange = 10000; // Larger XY plane range
+                const gridStep = 10;   // Larger dot spacing
+                const markerStep = 100; // Larger '+' marker spacing
+                const markerSize = 10;  // '+' marker size
+                const dotSize = 2;    // Dot size
+
+                const dotVertices = [];
+                const markerVertices = [];
+
+                // Iterate X/Y only; keep Z fixed at 0
+                for (let x = -gridRange; x <= gridRange; x += gridStep) {
+                    for (let y = -gridRange; y <= gridRange; y += gridStep) {
+                        const z = 0; // Keep Z fixed at 0
+
+                        // Check whether XY coordinates are multiples of markerStep
+                        if (x % markerStep === 0 && y % markerStep === 0) {
+                            markerVertices.push(x, y, z);
+                        } else {
+                            dotVertices.push(x, y, z);
+                        }
+                    }
+                }
+
+                const themeGroup = new THREE.Group();
+
+                // 1. Dots
+                const dotGeom = new THREE.BufferGeometry();
+                dotGeom.setAttribute('position', new THREE.Float32BufferAttribute(dotVertices, 3));
+                const dotMaterial = new THREE.PointsMaterial({
+                    color: 0xaaaaaa, // Dot color (slightly brighter)
+                    size: dotSize,
+                    sizeAttenuation: true,
+                    transparent: true, // Needed for opacity control
+                    opacity: 1.0,
+                    depthWrite: false // ▼ [Fix] Prevent Z-fighting with nodes
+                });
+                const dotMesh = new THREE.Points(dotGeom, dotMaterial);
+                dotMesh.renderOrder = -1; // ▼ [Fix] Render before nodes to avoid Z-fighting
+                themeGroup.add(dotMesh);
+
+                // 2. '+' Markers
+                const markerGeom = new THREE.BufferGeometry();
+                markerGeom.setAttribute('position', new THREE.Float32BufferAttribute(markerVertices, 3));
+                const markerMaterial = new THREE.PointsMaterial({
+                    map: createPlusTexture(),
+                    size: markerSize,
+                    sizeAttenuation: true,
+                    transparent: true,
+                    alphaTest: 0.1,
+                    color: 0x888888, // Marker color (slightly darker than dots)
+                    opacity: 1.0,
+                    depthWrite: false // ▼ [Fix] Prevent Z-fighting with nodes
+                });
+                const markerMesh = new THREE.Points(markerGeom, markerMaterial);
+                markerMesh.renderOrder = -1; // ▼ [Fix] Render before nodes to avoid Z-fighting
+                themeGroup.add(markerMesh);
+
+                const tmp = new THREE.Vector3();
+                const snapSize = markerStep;
+
+                // ▼▼▼ [New] Distance-based opacity control (see XYGrid) ▼▼▼
+                themeGroup.animate = function (camera) {
+                    if (!camera) return;
+
+                    // Position snapping
+                    tmp.copy(camera.position);
+                    tmp.z = 0; // Same plane as nodes (no parallax)
+                    tmp.x = Math.round(tmp.x / snapSize) * snapSize;
+                    tmp.y = Math.round(tmp.y / snapSize) * snapSize;
+                    themeGroup.position.copy(tmp);
+
+                    // Distance-based opacity
+                    const z = camera.position.z;
+                    let opacity = 1.0;
+
+                    if (z < 1600) {
+                        // [~1600] Near: 100%
+                        opacity = 1.0;
+                    }
+                    else if (z >= 1600 && z < 2400) {
+                        // [1600~2400] Transition: start fading
+                        const t = (z - 1600) / 800; // 0.0 ~ 1.0
+                        opacity = 1.0 - (t * 0.5); // 1.0 -> 0.5
+                    }
+                    else if (z >= 2400 && z < 4000) {
+                        // [2400~4000] Mid-range
+                        opacity = 0.5;
+                    }
+                    else if (z >= 4000 && z < 6000) {
+                        // [4000~6000] Far: fade out
+                        const t = (z - 4000) / 2000; // 0.0 ~ 1.0
+                        opacity = 0.5 - (t * 0.5); // 0.5 -> 0
+                    }
+                    else {
+                        // [6000~] Very far: hidden
+                        opacity = 0;
+                    }
+
+                    // Apply opacity
+                    dotMaterial.opacity = opacity;
+                    markerMaterial.opacity = opacity;
+                };
+                // ▲▲▲ [New] ▲▲▲
+
+                return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.Camera);
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
+
+        // Theme 3: GridPlane (basic 2D grid - uses InfiniteGridHelper)
+        'GridPlane': {
+            create: (scene) => {
+                scene.background = new THREE.Color(0xffffff); // Very bright background
+                const gridHelper = new window.InfiniteGridHelper(
+                    10, // size1 (small cells)
+                    100, // size2 (large cells)
+                    new THREE.Color(0xcccccc),
+                    50000, // Distance
+                    'xzy' // XZ plane
+                );
+                // ▼▼▼ [Change] Snap from 10 to 100 (align to large grid centers) ▼▼▼
+                const tmp = new THREE.Vector3();
+                const snap = 100; // size2 (large grid)
+                gridHelper.animate = (camera) => {
+                    if (!camera) return;
+                    tmp.copy(camera.position);
+                    // axes = 'xzy' (XZ plane; Y is height)
+                    tmp.y = -10; // Keep Y fixed below 0 (XZ plane)
+                    tmp.x = Math.round(tmp.x / snap) * snap;
+                    tmp.z = Math.round(tmp.z / snap) * snap;
+                    gridHelper.position.copy(tmp);
+                };
+                // ▲▲▲ [Change] ▲▲▲
+                return setThemeAnimationMode(gridHelper, THEME_ANIMATION_MODE.Camera);
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
+
+        // Theme 4: SpinningBoxes (reuses 3d-model-viewer logic)
+        'SpinningBoxes': {
+            create: (scene) => {
+                scene.background = new THREE.Color(0xf0f2f5); // Bright background
+
+                const themeGroup = new THREE.Group();
+
+                // Lighting (adjusted for scale)
+                const ambientLight = new THREE.AmbientLight(0xE0E0E0, 0.8); themeGroup.add(ambientLight);
+                const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); directionalLight.position.set(10, 10, 5); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; themeGroup.add(directionalLight);
+                const pointLight = new THREE.PointLight(0xd4a022, 1.0, 10000); pointLight.position.set(-500, 500, 500); themeGroup.add(pointLight);
+
+                // 5000 boxes (InstancedMesh)
+                const count = 5000;
+                // Box size scaled up (800 -> 16000)
+                const geometry = new THREE.BoxGeometry(200, 200, 200);
+                const material = new THREE.MeshPhongMaterial({ color: 0x808080, specular: 0x111111, shininess: 100 });
+                const instancedMesh = new THREE.InstancedMesh(geometry, material, count); instancedMesh.castShadow = true; instancedMesh.receiveShadow = true;
+
+                const dummy = new THREE.Object3D();
+                for (let i = 0; i < count; i++) {
+                    // World distribution range expanded + Z offset -2000
+                    const px = (Math.random() - 0.5) * 20000;
+                    const py = (Math.random() - 0.5) * 10000;
+                    const pz = (Math.random() - 0.5) * 20000;
+                    dummy.position.set(px, py, pz);
+                    dummy.rotation.set(Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI);
+                    dummy.updateMatrix();
+                    instancedMesh.setMatrixAt(i, dummy.matrix);
+                }
+                themeGroup.add(instancedMesh);
+
+                // Background-only: omit the ground
+
+                // Animation / dispose logic
+                themeGroup.userData.instancedMesh = instancedMesh; themeGroup.userData.pointLight = pointLight;
+                themeGroup.animate = (camera) => {
+                    const mesh = themeGroup.userData.instancedMesh; const light = themeGroup.userData.pointLight;
+                    if (mesh) { mesh.rotation.x += 0.0005; mesh.rotation.y += 0.001; }
+                    if (light) {
+                        const time = Date.now() * 0.0005;
+                        light.position.x = Math.sin(time * 0.7) * 2000;
+                        light.position.y = Math.cos(time * 0.5) * 2000;
+                        light.position.z = Math.cos(time * 0.3) * 2000 - 1000;
+                    }
+                };
+                themeGroup.customDispose = () => { disposeThemeObject(themeGroup); themeGroup.userData = {}; themeGroup.animate = undefined; themeGroup.customDispose = undefined; };
+
+                return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.Continuous);
+            },
+            dispose: (themeObject) => { if (typeof themeObject?.customDispose === 'function') { themeObject.customDispose(); } else { disposeThemeObject(themeObject); } }
+        },
+
+        // Theme 5: FloorBoxes (boxes placed on the XZ plane)
+        'FloorBoxes': {
+            create: (scene) => {
+                scene.background = new THREE.Color(0xf0f2f5); // Bright background
+
+                const themeGroup = new THREE.Group();
+
+                // Lighting
+                const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+                themeGroup.add(ambientLight);
+                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+                directionalLight.position.set(50, 100, 75);
+                directionalLight.castShadow = true;
+                directionalLight.shadow.mapSize.width = 1024;
+                directionalLight.shadow.mapSize.height = 1024;
+                // Shadow camera bounds
+                if (directionalLight.shadow && directionalLight.shadow.camera) {
+                    const cam = directionalLight.shadow.camera;
+                    cam.left = -200; cam.right = 200; cam.top = 200; cam.bottom = -200;
+                    cam.near = 0.5; cam.far = 500;
+                }
+                themeGroup.add(directionalLight);
+
+                // Boxes
+                const count = 10000;
+                const boxSize = 500;
+                const spread = 500000; // Range on the XZ plane
+                const geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
+                const material = new THREE.MeshLambertMaterial({ color: 0xaaaaaa });
+                const instancedMesh = new THREE.InstancedMesh(geometry, material, count);
+                instancedMesh.castShadow = true;
+                instancedMesh.receiveShadow = true;
+
+                const dummy = new THREE.Object3D();
+                for (let i = 0; i < count; i++) {
+                    const px = (Math.random() - 0.5) * spread;
+                    const pz = (Math.random() - 0.5) * spread;
+                    const py = (Math.random() * boxSize * 0.5) + (boxSize / 2) - 10000;
+                    dummy.position.set(px, py, pz);
+                    //dummy.rotation.set(0, Math.random() * Math.PI *2,0);
+                    dummy.rotation.set(0, 40, 0);
+                    const scale = Math.random() * 20; // Random scale
+                    dummy.scale.set(scale, scale, scale);
+                    dummy.updateMatrix();
+                    instancedMesh.setMatrixAt(i, dummy.matrix);
+                }
+                themeGroup.add(instancedMesh);
+
+
+                // Dispose logic
+                themeGroup.customDispose = () => {
+                    disposeThemeObject(themeGroup);
+                    themeGroup.userData = {};
+                    themeGroup.customDispose = undefined;
+                };
+
+                return themeGroup;
+            },
+            dispose: (themeObject) => {
+                if (typeof themeObject?.customDispose === 'function') {
+                    themeObject.customDispose();
+                } else {
+                    disposeThemeObject(themeObject);
+                }
+            }
+        },
+
+        // Theme 6: XYGrid (distance-based auto LOD grid)
+        'XYGrid': {
+            create: (scene) => {
+                scene.background = new THREE.Color(0xfefefe);
+                return createAdaptiveXYGridOverlay(new THREE.Color(0xcccccc), {
+                    fineDistance: 45000,
+                    coarseDistance: 120000,
+                    farDistance: 320000,
+                    fineSmallOpacity: 0.4,
+                    fineLargeOpacity: 0.25,
+                    coarseSmallOpacity: 0.34,
+                    coarseLargeOpacity: 0.22,
+                    farSmallOpacity: 0.26,
+                    farLargeOpacity: 0.16
+                });
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
+
+        // Theme 7: Core Particles (inverted galaxy shader particles + faint XYGrid overlay)
+        'Space3D': {
+            create: (scene, renderer) => {
+                scene.background = new THREE.Color(0xfefefe);
+
+                const themeGroup = new THREE.Group();
+                const simSize = 64;
+                const pointCount = simSize * simSize;
+                const resolution = new THREE.Vector2(simSize, simSize);
+                const galaxyCount = 2;
+                const galaxyMass = 0.000075;
+                const galaxyHaloSize = 6;
+                const renderTargetOptions = {
+                    wrapS: THREE.ClampToEdgeWrapping,
+                    wrapT: THREE.ClampToEdgeWrapping,
+                    minFilter: THREE.NearestFilter,
+                    magFilter: THREE.NearestFilter,
+                    format: THREE.RGBAFormat,
+                    type: THREE.FloatType,
+                    depthBuffer: false,
+                    stencilBuffer: false
+                };
+
+                const createRenderTarget = () => {
+                    const target = new THREE.WebGLRenderTarget(simSize, simSize, renderTargetOptions);
+                    target.texture.generateMipmaps = false;
+                    return target;
+                };
+
+                const createInitialTextures = () => {
+                    const positionData = new Float32Array(pointCount * 4);
+                    const velocityData = new Float32Array(pointCount * 4);
+                    const randomSigned = () => Math.random() * 2 - 1;
+                    const particleCountWithoutCenters = pointCount - galaxyCount;
+                    const firstGalaxyParticleCount = Math.round(particleCountWithoutCenters / 2);
+                    const galaxyParticleCounts = [
+                        firstGalaxyParticleCount,
+                        particleCountWithoutCenters - firstGalaxyParticleCount
+                    ];
+                    const galaxySizes = [0.78 * galaxyHaloSize, 0.84 * galaxyHaloSize];
+                    const galaxyInclinations = [0.35 * Math.PI, -0.28 * Math.PI];
+                    const galaxyPositions = [
+                        new THREE.Vector3(-1.2 * galaxyHaloSize, -0.1 * galaxyHaloSize, 0),
+                        new THREE.Vector3(1.2 * galaxyHaloSize, 0.1 * galaxyHaloSize, 0)
+                    ];
+                    const galaxyVelocities = [
+                        new THREE.Vector3(0.00145, 0.00014, 0.0018),
+                        new THREE.Vector3(-0.00145, -0.00014, -0.0018)
+                    ];
+
+                    const writeParticle = (particleIndex, position, velocity) => {
+                        const offset = particleIndex * 4;
+                        positionData[offset] = position.x;
+                        positionData[offset + 1] = position.y;
+                        positionData[offset + 2] = position.z;
+                        positionData[offset + 3] = 1;
+                        velocityData[offset] = velocity.x;
+                        velocityData[offset + 1] = velocity.y;
+                        velocityData[offset + 2] = velocity.z;
+                        velocityData[offset + 3] = 1;
+                    };
+
+                    for (let i = 0; i < galaxyCount; i++) {
+                        writeParticle(i, galaxyPositions[i], galaxyVelocities[i]);
+                    }
+
+                    let startIndex = galaxyCount;
+                    for (let i = 0; i < galaxyCount; i++) {
+                        const center = galaxyPositions[i];
+                        const centerVelocity = galaxyVelocities[i];
+                        const sinInclination = Math.sin(galaxyInclinations[i]);
+                        const cosInclination = Math.cos(galaxyInclinations[i]);
+
+                        for (let j = startIndex; j < startIndex + galaxyParticleCounts[i]; j++) {
+                            const diffuseSeed = Math.random();
+                            const position = new THREE.Vector3();
+                            const velocity = new THREE.Vector3();
+
+                            if (diffuseSeed < 0.16) {
+                                const radius = galaxySizes[i] * (0.72 + Math.pow(Math.random(), 0.55) * 0.62);
+                                const angle = 2 * Math.PI * Math.random();
+
+                                position.set(
+                                    center.x + Math.cos(angle) * radius + randomSigned() * 0.75,
+                                    center.y + cosInclination * Math.sin(angle) * radius * 0.64 + randomSigned() * 0.72,
+                                    center.z - sinInclination * Math.sin(angle) * radius * 0.64 + randomSigned() * 0.95
+                                );
+                                velocity.set(
+                                    -Math.sin(angle) * 0.0034 + centerVelocity.x * 0.66,
+                                    cosInclination * Math.cos(angle) * 0.0021 + centerVelocity.y * 0.66,
+                                    -sinInclination * Math.cos(angle) * 0.0021 + randomSigned() * 0.0009 + centerVelocity.z * 0.66
+                                );
+                            } else {
+                                const distance = galaxySizes[i] * (0.18 + Math.pow(Math.random(), 0.7) * 0.82);
+                                const safeDistance = Math.max(distance, 0.08);
+                                const angle = 2 * Math.PI * Math.random();
+                                const massAtPosition = galaxyMass * Math.min(safeDistance, galaxyHaloSize) / galaxyHaloSize;
+                                const speed = Math.sqrt(massAtPosition / safeDistance);
+                                const x = distance * Math.cos(angle);
+                                const y = distance * Math.sin(angle);
+                                const vx = -speed * Math.sin(angle) * 1.75;
+                                const vy = speed * Math.cos(angle) * 1.75;
+
+                                position.set(
+                                    center.x + x,
+                                    center.y + cosInclination * y,
+                                    center.z - sinInclination * y
+                                );
+                                velocity.set(
+                                    centerVelocity.x + vx,
+                                    centerVelocity.y + cosInclination * vy,
+                                    centerVelocity.z - sinInclination * vy
+                                );
+
+                                const jitter = 0.14 + Math.pow(Math.random(), 2.0) * 0.62;
+                                position.x += randomSigned() * jitter;
+                                position.y += randomSigned() * jitter * 0.42;
+                                position.z += randomSigned() * jitter * 0.46;
+
+                                if (Math.random() < 0.16) {
+                                    const direction = i === 0 ? -1 : 1;
+                                    position.x += direction * (0.8 + Math.random() * 2.5);
+                                    position.y += randomSigned() * 0.72;
+                                    position.z += randomSigned() * 0.82;
+                                    velocity.x += direction * (0.00022 + Math.random() * 0.00035);
+                                    velocity.y += randomSigned() * 0.00018;
+                                    velocity.z += randomSigned() * 0.00022;
+                                }
+                            }
+
+                            writeParticle(j, position, velocity);
+                        }
+
+                        startIndex += galaxyParticleCounts[i];
+                    }
+
+                    const positionTexture = new THREE.DataTexture(positionData, simSize, simSize, THREE.RGBAFormat, THREE.FloatType);
+                    const velocityTexture = new THREE.DataTexture(velocityData, simSize, simSize, THREE.RGBAFormat, THREE.FloatType);
+                    positionTexture.needsUpdate = true;
+                    velocityTexture.needsUpdate = true;
+
+                    return { positionTexture, velocityTexture };
+                };
+
+                const computeVertexShader = `
+                    void main() {
+                        gl_Position = vec4(position.xy, 0.0, 1.0);
+                    }
+                `;
+
+                const copyMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_texture: { value: null },
+                        u_resolution: { value: resolution }
+                    },
+                    vertexShader: computeVertexShader,
+                    fragmentShader: `
+                        precision highp float;
+                        uniform sampler2D u_texture;
+                        uniform vec2 u_resolution;
+
+                        void main() {
+                            vec2 uv = gl_FragCoord.xy / u_resolution;
+                            gl_FragColor = texture2D(u_texture, uv);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false
+                });
+
+                const positionMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_positionTexture: { value: null },
+                        u_velocityTexture: { value: null },
+                        u_resolution: { value: resolution },
+                        u_dt: { value: 0.18 }
+                    },
+                    vertexShader: computeVertexShader,
+                    fragmentShader: `
+                        precision highp float;
+                        uniform sampler2D u_positionTexture;
+                        uniform sampler2D u_velocityTexture;
+                        uniform vec2 u_resolution;
+                        uniform float u_dt;
+
+                        void main() {
+                            vec2 uv = gl_FragCoord.xy / u_resolution;
+                            vec3 position = texture2D(u_positionTexture, uv).xyz;
+                            vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
+                            float speedSeed = fract(sin(dot(uv, vec2(127.1, 311.7))) * 43758.5453);
+                            float particleDt = u_dt * mix(0.82, 1.22, speedSeed);
+                            gl_FragColor = vec4(position + particleDt * velocity, 1.0);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false
+                });
+
+                const velocityMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_positionTexture: { value: null },
+                        u_velocityTexture: { value: null },
+                        u_resolution: { value: resolution },
+                        u_dt: { value: 0.18 },
+                        u_mass: { value: galaxyMass },
+                        u_haloSize: { value: galaxyHaloSize },
+                        u_softening: { value: 1.7 },
+                        u_damping: { value: 0.991 },
+                        u_maxSpeed: { value: 0.038 },
+                        u_velocityDeadzone: { value: 0.0026 },
+                        u_settleDamping: { value: 0.78 }
+                    },
+                    vertexShader: computeVertexShader,
+                    fragmentShader: `
+                        precision highp float;
+                        #define GALAXY_COUNT 2
+
+                        uniform sampler2D u_positionTexture;
+                        uniform sampler2D u_velocityTexture;
+                        uniform vec2 u_resolution;
+                        uniform float u_dt;
+                        uniform float u_mass;
+                        uniform float u_haloSize;
+                        uniform float u_softening;
+                        uniform float u_damping;
+                        uniform float u_maxSpeed;
+                        uniform float u_velocityDeadzone;
+                        uniform float u_settleDamping;
+
+                        void main() {
+                            vec2 uv = gl_FragCoord.xy / u_resolution;
+                            vec3 position = texture2D(u_positionTexture, uv).xyz;
+                            vec3 velocity = texture2D(u_velocityTexture, uv).xyz;
+                            vec3 totalForce = vec3(0.0);
+                            vec3 centerSum = vec3(0.0);
+                            vec3 nearestCenter = vec3(0.0);
+                            float nearestDistance = 99999.0;
+
+                            for (int i = 0; i < GALAXY_COUNT; i++) {
+                                float particleIndex = float(i);
+                                vec2 particleUv = vec2(
+                                    mod(particleIndex, u_resolution.x) + 0.5,
+                                    floor(particleIndex / u_resolution.x) + 0.5
+                                ) / u_resolution;
+                                vec3 particlePosition = texture2D(u_positionTexture, particleUv).xyz;
+                                vec3 forceDirection = particlePosition - position;
+                                float distance = length(forceDirection);
+                                centerSum += particlePosition;
+
+                                if (distance > 0.0001) {
+                                    vec3 directionToCenter = forceDirection / distance;
+                                    float nearFade = smoothstep(u_haloSize * 0.45, u_haloSize * 1.05, distance);
+                                    float massAtPosition = u_mass * nearFade * min(distance, u_haloSize) / u_haloSize;
+                                    float coreRepulsion = 1.0 - smoothstep(u_haloSize * 0.42, u_haloSize * 0.88, distance);
+                                    totalForce += massAtPosition * directionToCenter / pow(distance + u_softening, 2.0);
+                                    totalForce -= directionToCenter * coreRepulsion * u_mass * 0.36 / (distance + u_softening);
+                                }
+
+                                if (distance < nearestDistance) {
+                                    nearestDistance = distance;
+                                    nearestCenter = particlePosition;
+                                }
+                            }
+
+                            vec3 barycenter = centerSum / float(GALAXY_COUNT);
+                            vec3 fromBarycenter = position - barycenter;
+                            float baryDistance = length(fromBarycenter);
+                            if (baryDistance > 0.0001) {
+                                vec3 outwardDirection = fromBarycenter / baryDistance;
+                                float compression = 1.0 - smoothstep(u_haloSize * 0.65, u_haloSize * 1.75, baryDistance);
+                                vec3 orbitDirection = vec3(-outwardDirection.y, outwardDirection.x, 0.0);
+                                float orbitLength = length(orbitDirection);
+                                totalForce += outwardDirection * compression * u_mass * 0.42 / (baryDistance + 0.75);
+                                if (orbitLength > 0.0001) {
+                                    totalForce += (orbitDirection / orbitLength) * compression * u_mass * 0.28;
+                                }
+                            }
+
+                            vec3 nextVelocity = (velocity + u_dt * totalForce) * u_damping;
+                            if (nearestDistance > 0.0001 && nearestDistance < u_haloSize * 0.72) {
+                                vec3 awayFromCore = (position - nearestCenter) / nearestDistance;
+                                float corePressure = (u_haloSize * 0.72 - nearestDistance) / (u_haloSize * 0.72);
+                                nextVelocity += awayFromCore * corePressure * 0.0018;
+                            }
+                            float settleFactor = 1.0 - smoothstep(u_velocityDeadzone, u_velocityDeadzone * 4.0, length(nextVelocity));
+                            nextVelocity *= mix(1.0, u_settleDamping, settleFactor);
+                            float speed = length(nextVelocity);
+                            if (speed > u_maxSpeed) {
+                                nextVelocity = normalize(nextVelocity) * u_maxSpeed;
+                            }
+
+                            gl_FragColor = vec4(nextVelocity, 1.0);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false
+                });
+
+                const computeScene = new THREE.Scene();
+                const computeCamera = new THREE.Camera();
+                const computeQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), copyMaterial);
+                computeQuad.frustumCulled = false;
+                computeScene.add(computeQuad);
+
+                const initialTextures = createInitialTextures();
+                let positionTargetA = createRenderTarget();
+                let positionTargetB = createRenderTarget();
+                let velocityTargetA = createRenderTarget();
+                let velocityTargetB = createRenderTarget();
+                let currentPositionTarget = positionTargetA;
+                let nextPositionTarget = positionTargetB;
+                let currentVelocityTarget = velocityTargetA;
+                let nextVelocityTarget = velocityTargetB;
+                let simulationReady = renderer && typeof renderer.setRenderTarget === 'function';
+                let simulationWarningShown = false;
+                const simulationStepsPerTick = 16;
+
+                const renderComputePass = (material, target) => {
+                    computeQuad.material = material;
+                    renderer.setRenderTarget(target);
+                    renderer.render(computeScene, computeCamera);
+                };
+
+                const copyTextureToTarget = (texture, target) => {
+                    copyMaterial.uniforms.u_texture.value = texture;
+                    renderComputePass(copyMaterial, target);
+                };
+
+                if (simulationReady) {
+                    const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
+                    try {
+                        copyTextureToTarget(initialTextures.positionTexture, currentPositionTarget);
+                        copyTextureToTarget(initialTextures.velocityTexture, currentVelocityTarget);
+                        renderer.setRenderTarget(previousTarget);
+                    } catch (error) {
+                        simulationReady = false;
+                        console.warn('[BackgroundThemes] Galaxy particle simulation disabled.', error);
+                    }
+                }
+
+                const particleGeometry = new THREE.BufferGeometry();
+                const indices = new Float32Array(pointCount);
+                const dummyPositions = new Float32Array(pointCount * 3);
+                for (let i = 0; i < pointCount; i++) {
+                    indices[i] = i;
+                }
+                particleGeometry.setAttribute('a_index', new THREE.BufferAttribute(indices, 1));
+                particleGeometry.setAttribute('position', new THREE.BufferAttribute(dummyPositions, 3));
+
+                const particleMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_width: { value: simSize },
+                        u_height: { value: simSize },
+                        u_particleSize: { value: 64800 },
+                        u_worldScale: { value: 720 },
+                        u_depthScale: { value: 620 },
+                        u_backgroundZ: { value: -14000 },
+                        u_time: { value: 0 },
+                        u_positionTexture: { value: currentPositionTarget.texture }
+                    },
+                    vertexShader: `
+                        attribute float a_index;
+                        uniform float u_width;
+                        uniform float u_height;
+                        uniform float u_particleSize;
+                        uniform float u_worldScale;
+                        uniform float u_depthScale;
+                        uniform float u_backgroundZ;
+                        uniform float u_time;
+                        uniform sampler2D u_positionTexture;
+                        varying float vDepth;
+                        varying float vNearness;
+
+                        void main() {
+                            const float TWO_PI = 6.28318530718;
+                            vec2 uv = vec2(
+                                (mod(a_index, u_width) + 0.5) / u_width,
+                                (floor(a_index / u_width) + 0.5) / u_height
+                            );
+                            vec3 gravityPosition = texture2D(u_positionTexture, uv).xyz;
+                            float seed = fract(sin(a_index * 12.9898) * 43758.5453);
+                            float sizeSeed = fract(sin((a_index + 17.31) * 78.233) * 43758.5453);
+                            float depthSeed = fract(sin((a_index + 91.73) * 39.425) * 24634.6345);
+                            float speedSeed = fract(sin((a_index + 211.13) * 17.317) * 19542.349);
+                            float phaseSeed = fract(sin((a_index + 47.77) * 63.721) * 31571.231);
+                            float localTime = u_time * mix(0.72, 1.38, speedSeed) + phaseSeed * TWO_PI;
+                            float radius = length(gravityPosition.xy);
+                            float fieldFlow = mod(u_time * mix(0.046, 0.062, speedSeed), TWO_PI);
+                            float fc = cos(fieldFlow);
+                            float fs = sin(fieldFlow);
+                            gravityPosition.xy = mat2(fc, -fs, fs, fc) * gravityPosition.xy;
+
+                            float flow = mod(localTime * mix(0.018, 0.054, seed) * (1.0 - smoothstep(9.0, 18.0, radius)), TWO_PI);
+                            float c = cos(flow);
+                            float s = sin(flow);
+                            gravityPosition.xy = mat2(c, -s, s, c) * gravityPosition.xy;
+                            gravityPosition.xy += vec2(
+                                sin(mod(localTime * mix(0.08, 0.22, seed) + seed * TWO_PI, TWO_PI)),
+                                cos(mod(localTime * mix(0.07, 0.2, seed) + seed * 8.713, TWO_PI))
+                            ) * mix(0.055, 0.18, seed);
+                            float depthLayer = (depthSeed - 0.5) * mix(4.0, 8.4, sizeSeed);
+                            float depthDrift = sin(mod(localTime * mix(0.035, 0.1, seed) + seed * 12.421, TWO_PI)) * mix(0.1, 0.34, depthSeed);
+                            float layeredZ = clamp(gravityPosition.z + depthLayer + depthDrift, -6.8, 4.2);
+                            vec3 simPosition = vec3(
+                                gravityPosition.xy * u_worldScale,
+                                u_backgroundZ + layeredZ * u_depthScale
+                            );
+                            vec4 mvPosition = modelViewMatrix * vec4(simPosition, 1.0);
+                            float viewDepth = max(-mvPosition.z, 1.0);
+                            float seededSize = mix(0.55, 2.05, pow(sizeSeed, 1.42));
+                            gl_PointSize = clamp((u_particleSize / viewDepth) * seededSize * 2.0, 1.0, 17.0);
+                            gl_Position = projectionMatrix * mvPosition;
+                            vDepth = clamp((viewDepth - 9000.0) / 52000.0, 0.0, 1.0);
+                            vNearness = 1.0 - clamp((viewDepth - 9000.0) / 28000.0, 0.0, 1.0);
+                        }
+                    `,
+                    fragmentShader: `
+                        precision mediump float;
+                        varying float vDepth;
+                        varying float vNearness;
+
+                        void main() {
+                            vec2 uv = gl_PointCoord - vec2(0.5);
+                            float dist = length(uv);
+                            float radius = mix(0.38, 0.49, vNearness);
+                            float core = 1.0 - smoothstep(0.02, radius, dist);
+                            float halo = (1.0 - smoothstep(0.28, 0.5, dist)) * vNearness * 0.24;
+                            float alpha = (pow(max(core, 0.0), mix(1.6, 1.05, vNearness)) + halo) * mix(0.92, 0.46, vDepth);
+                            if (alpha < 0.015) discard;
+                            gl_FragColor = vec4(vec3(0.0, 0.0, 0.0), min(alpha, 0.94));
+                        }
+                    `,
+                    transparent: true,
+                    depthTest: true,
+                    depthWrite: false,
+                    blending: THREE.NormalBlending
+                });
+
+                const gravityPoints = new THREE.Points(particleGeometry, particleMaterial);
+                gravityPoints.frustumCulled = false;
+                gravityPoints.renderOrder = -40;
+                themeGroup.add(gravityPoints);
+
+                const themeStartTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001;
+
+                const syncParticleView = (camera) => {
+                    if (!camera) return;
+
+                    const cameraZ = Math.max(600, Math.abs(Number(camera.position?.z || 1200)));
+                    const cameraFar = Math.max(120000, Number(camera.far || 500000));
+                    const clipSafeDepth = Math.max(14000, cameraFar - cameraZ - 5000);
+                    const backgroundDepth = Math.min(Math.max(26000, cameraZ * 6.0), clipSafeDepth * 0.82);
+                    const viewDistance = cameraZ + backgroundDepth;
+                    const elapsedTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001 - themeStartTime;
+                    const animationTime = elapsedTime * 8.0;
+                    particleMaterial.uniforms.u_worldScale.value = Math.max(820, backgroundDepth * 0.052);
+                    particleMaterial.uniforms.u_depthScale.value = Math.max(1050, backgroundDepth * 0.075);
+                    particleMaterial.uniforms.u_backgroundZ.value = -backgroundDepth;
+                    particleMaterial.uniforms.u_particleSize.value = Math.max(68000, Math.min(cameraZ * 34, viewDistance * 2.75));
+                    particleMaterial.uniforms.u_time.value = animationTime;
+                    gravityPoints.rotation.z = (animationTime * 0.085) % (Math.PI * 2);
+                    gravityPoints.rotation.x = 0;
+                    gravityPoints.position.x = 0;
+                    gravityPoints.position.y = 0;
+                    gravityPoints.updateMatrixWorld(true);
+                };
+
+                gravityPoints.onBeforeRender = (_renderer, _scene, camera) => {
+                    syncParticleView(camera);
+                };
+
+                // --- 2) XYGrid overlay (same distance-based LOD as XYGrid theme) ---
+                const adaptiveGridOverlay = createAdaptiveXYGridOverlay(new THREE.Color(0xc8cdd2), {
+                    fineDistance: 45000,
+                    coarseDistance: 120000,
+                    farDistance: 320000,
+                    fineSmallOpacity: 0.17,
+                    fineLargeOpacity: 0.1,
+                    coarseSmallOpacity: 0.15,
+                    coarseLargeOpacity: 0.085,
+                    farSmallOpacity: 0.12,
+                    farLargeOpacity: 0.07
+                });
+                themeGroup.add(adaptiveGridOverlay);
+
+                // Animation: galaxy texture simulation and camera tracking for grid
+                themeGroup.animate = (camera) => {
+                    if (!camera) return;
+
+                    if (simulationReady) {
+                        const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
+                        try {
+                            for (let i = 0; i < simulationStepsPerTick; i++) {
+                                velocityMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
+                                velocityMaterial.uniforms.u_velocityTexture.value = currentVelocityTarget.texture;
+                                renderComputePass(velocityMaterial, nextVelocityTarget);
+
+                                positionMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
+                                positionMaterial.uniforms.u_velocityTexture.value = nextVelocityTarget.texture;
+                                renderComputePass(positionMaterial, nextPositionTarget);
+
+                                const oldPositionTarget = currentPositionTarget;
+                                currentPositionTarget = nextPositionTarget;
+                                nextPositionTarget = oldPositionTarget;
+
+                                const oldVelocityTarget = currentVelocityTarget;
+                                currentVelocityTarget = nextVelocityTarget;
+                                nextVelocityTarget = oldVelocityTarget;
+                            }
+
+                            renderer.setRenderTarget(previousTarget);
+
+                            particleMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
+                        } catch (error) {
+                            simulationReady = false;
+                            if (!simulationWarningShown) {
+                                simulationWarningShown = true;
+                                console.warn('[BackgroundThemes] Galaxy particle simulation stopped.', error);
+                            }
+                            if (renderer.setRenderTarget) {
+                                renderer.setRenderTarget(previousTarget);
+                            }
+                        }
+                    }
+
+                    syncParticleView(camera);
+
+                    adaptiveGridOverlay.animate(camera);
+                };
+
+                themeGroup.customDispose = () => {
+                    themeGroup.traverse(child => {
+                        if (child.geometry) child.geometry.dispose();
+                        if (child.material) {
+                            if (Array.isArray(child.material)) {
+                                child.material.forEach(material => material.dispose());
+                            } else {
+                                child.material.dispose();
+                            }
+                        }
+                    });
+                    initialTextures.positionTexture.dispose();
+                    initialTextures.velocityTexture.dispose();
+                    positionTargetA.dispose();
+                    positionTargetB.dispose();
+                    velocityTargetA.dispose();
+                    velocityTargetB.dispose();
+                    copyMaterial.dispose();
+                    positionMaterial.dispose();
+                    velocityMaterial.dispose();
+                    particleMaterial.dispose();
+                };
+
+                return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.Continuous);
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
+
+        // Theme 8: SpiritFlow (curl-noise particle flow inspired by ref/~spirit)
+        'SpiritFlow': {
+            create: (scene, renderer) => {
+                scene.background = new THREE.Color(0xf0f2f5);
+
+                const themeGroup = new THREE.Group();
+                const textureWidth = 256;
+                const textureHeight = 256;
+                const pointCount = textureWidth * textureHeight;
+                const resolution = new THREE.Vector2(textureWidth, textureHeight);
+                const renderTargetOptions = {
+                    wrapS: THREE.ClampToEdgeWrapping,
+                    wrapT: THREE.ClampToEdgeWrapping,
+                    minFilter: THREE.NearestFilter,
+                    magFilter: THREE.NearestFilter,
+                    format: THREE.RGBAFormat,
+                    type: THREE.FloatType,
+                    depthBuffer: false,
+                    stencilBuffer: false
+                };
+
+                const createRenderTarget = () => {
+                    const target = new THREE.WebGLRenderTarget(textureWidth, textureHeight, renderTargetOptions);
+                    target.texture.generateMipmaps = false;
+                    return target;
+                };
+
+                const createDefaultPositionTexture = () => {
+                    const data = new Float32Array(pointCount * 4);
+                    for (let i = 0; i < pointCount; i++) {
+                        const offset = i * 4;
+                        const radius = (0.5 + Math.random() * 0.5) * 50;
+                        const phi = (Math.random() - 0.5) * Math.PI;
+                        const theta = Math.random() * Math.PI * 2;
+                        data[offset] = radius * Math.cos(theta) * Math.cos(phi);
+                        data[offset + 1] = radius * Math.sin(phi);
+                        data[offset + 2] = radius * Math.sin(theta) * Math.cos(phi);
+                        data[offset + 3] = Math.random();
+                    }
+
+                    const texture = new THREE.DataTexture(data, textureWidth, textureHeight, THREE.RGBAFormat, THREE.FloatType);
+                    texture.minFilter = THREE.NearestFilter;
+                    texture.magFilter = THREE.NearestFilter;
+                    texture.generateMipmaps = false;
+                    texture.flipY = false;
+                    texture.needsUpdate = true;
+                    return texture;
+                };
+
+                const computeVertexShader = `
+                    void main() {
+                        gl_Position = vec4(position.xy, 0.0, 1.0);
+                    }
+                `;
+
+                const copyMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_texture: { value: null },
+                        u_resolution: { value: resolution }
+                    },
+                    vertexShader: computeVertexShader,
+                    fragmentShader: `
+                        precision highp float;
+                        uniform sampler2D u_texture;
+                        uniform vec2 u_resolution;
+
+                        void main() {
+                            vec2 uv = gl_FragCoord.xy / u_resolution;
+                            gl_FragColor = texture2D(u_texture, uv);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false
+                });
+
+                const positionMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_positionTexture: { value: null },
+                        u_defaultTexture: { value: null },
+                        u_resolution: { value: resolution },
+                        u_mouse3d: { value: new THREE.Vector3() },
+                        u_speed: { value: 0.81 },
+                        u_dieSpeed: { value: 0 },
+                        u_radius: { value: 0.6 },
+                        u_curlSize: { value: 0.018 },
+                        u_attraction: { value: 0.87 },
+                        u_time: { value: 0 },
+                        u_initAnimation: { value: 0 }
+                    },
+                    vertexShader: computeVertexShader,
+                    fragmentShader: `
+                        precision highp float;
+
+                        uniform sampler2D u_positionTexture;
+                        uniform sampler2D u_defaultTexture;
+                        uniform vec2 u_resolution;
+                        uniform vec3 u_mouse3d;
+                        uniform float u_speed;
+                        uniform float u_dieSpeed;
+                        uniform float u_radius;
+                        uniform float u_curlSize;
+                        uniform float u_attraction;
+                        uniform float u_time;
+                        uniform float u_initAnimation;
+
+                        vec4 mod289(vec4 x) {
+                            return x - floor(x * (1.0 / 289.0)) * 289.0;
+                        }
+
+                        float mod289(float x) {
+                            return x - floor(x * (1.0 / 289.0)) * 289.0;
+                        }
+
+                        vec4 permute(vec4 x) {
+                            return mod289(((x * 34.0) + 1.0) * x);
+                        }
+
+                        float permute(float x) {
+                            return mod289(((x * 34.0) + 1.0) * x);
+                        }
+
+                        vec4 taylorInvSqrt(vec4 r) {
+                            return 1.79284291400159 - 0.85373472095314 * r;
+                        }
+
+                        float taylorInvSqrt(float r) {
+                            return 1.79284291400159 - 0.85373472095314 * r;
+                        }
+
+                        vec4 grad4(float j, vec4 ip) {
+                            const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
+                            vec4 p;
+                            vec4 s;
+
+                            p.xyz = floor(fract(vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
+                            p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
+                            s = vec4(
+                                p.x < 0.0 ? 1.0 : 0.0,
+                                p.y < 0.0 ? 1.0 : 0.0,
+                                p.z < 0.0 ? 1.0 : 0.0,
+                                p.w < 0.0 ? 1.0 : 0.0
+                            );
+                            p.xyz = p.xyz + (s.xyz * 2.0 - 1.0) * s.www;
+
+                            return p;
+                        }
+
+                        #define F4 0.309016994374947451
+
+                        vec4 simplexNoiseDerivatives(vec4 v) {
+                            const vec4 C = vec4(0.138196601125011, 0.276393202250021, 0.414589803375032, -0.447213595499958);
+
+                            vec4 i = floor(v + dot(v, vec4(F4)));
+                            vec4 x0 = v - i + dot(i, C.xxxx);
+
+                            vec4 i0;
+                            vec3 isX = step(x0.yzw, x0.xxx);
+                            vec3 isYZ = step(x0.zww, x0.yyz);
+                            i0.x = isX.x + isX.y + isX.z;
+                            i0.yzw = 1.0 - isX;
+                            i0.y += isYZ.x + isYZ.y;
+                            i0.zw += 1.0 - isYZ.xy;
+                            i0.z += isYZ.z;
+                            i0.w += 1.0 - isYZ.z;
+
+                            vec4 i3 = clamp(i0, 0.0, 1.0);
+                            vec4 i2 = clamp(i0 - 1.0, 0.0, 1.0);
+                            vec4 i1 = clamp(i0 - 2.0, 0.0, 1.0);
+
+                            vec4 x1 = x0 - i1 + C.xxxx;
+                            vec4 x2 = x0 - i2 + C.yyyy;
+                            vec4 x3 = x0 - i3 + C.zzzz;
+                            vec4 x4 = x0 + C.wwww;
+
+                            i = mod289(i);
+                            float j0 = permute(permute(permute(permute(i.w) + i.z) + i.y) + i.x);
+                            vec4 j1 = permute(permute(permute(permute(
+                                      i.w + vec4(i1.w, i2.w, i3.w, 1.0))
+                                    + i.z + vec4(i1.z, i2.z, i3.z, 1.0))
+                                    + i.y + vec4(i1.y, i2.y, i3.y, 1.0))
+                                    + i.x + vec4(i1.x, i2.x, i3.x, 1.0));
+
+                            vec4 ip = vec4(1.0 / 294.0, 1.0 / 49.0, 1.0 / 7.0, 0.0);
+
+                            vec4 p0 = grad4(j0, ip);
+                            vec4 p1 = grad4(j1.x, ip);
+                            vec4 p2 = grad4(j1.y, ip);
+                            vec4 p3 = grad4(j1.z, ip);
+                            vec4 p4 = grad4(j1.w, ip);
+
+                            vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+                            p0 *= norm.x;
+                            p1 *= norm.y;
+                            p2 *= norm.z;
+                            p3 *= norm.w;
+                            p4 *= taylorInvSqrt(dot(p4, p4));
+
+                            vec3 values0 = vec3(dot(p0, x0), dot(p1, x1), dot(p2, x2));
+                            vec2 values1 = vec2(dot(p3, x3), dot(p4, x4));
+
+                            vec3 m0 = max(0.5 - vec3(dot(x0, x0), dot(x1, x1), dot(x2, x2)), 0.0);
+                            vec2 m1 = max(0.5 - vec2(dot(x3, x3), dot(x4, x4)), 0.0);
+
+                            vec3 temp0 = -6.0 * m0 * m0 * values0;
+                            vec2 temp1 = -6.0 * m1 * m1 * values1;
+
+                            vec3 mmm0 = m0 * m0 * m0;
+                            vec2 mmm1 = m1 * m1 * m1;
+
+                            float dx = temp0[0] * x0.x + temp0[1] * x1.x + temp0[2] * x2.x + temp1[0] * x3.x + temp1[1] * x4.x + mmm0[0] * p0.x + mmm0[1] * p1.x + mmm0[2] * p2.x + mmm1[0] * p3.x + mmm1[1] * p4.x;
+                            float dy = temp0[0] * x0.y + temp0[1] * x1.y + temp0[2] * x2.y + temp1[0] * x3.y + temp1[1] * x4.y + mmm0[0] * p0.y + mmm0[1] * p1.y + mmm0[2] * p2.y + mmm1[0] * p3.y + mmm1[1] * p4.y;
+                            float dz = temp0[0] * x0.z + temp0[1] * x1.z + temp0[2] * x2.z + temp1[0] * x3.z + temp1[1] * x4.z + mmm0[0] * p0.z + mmm0[1] * p1.z + mmm0[2] * p2.z + mmm1[0] * p3.z + mmm1[1] * p4.z;
+                            float dw = temp0[0] * x0.w + temp0[1] * x1.w + temp0[2] * x2.w + temp1[0] * x3.w + temp1[1] * x4.w + mmm0[0] * p0.w + mmm0[1] * p1.w + mmm0[2] * p2.w + mmm1[0] * p3.w + mmm1[1] * p4.w;
+
+                            return vec4(dx, dy, dz, dw) * 49.0;
+                        }
+
+                        vec3 curl(vec3 p, float noiseTime, float persistence) {
+                            vec4 xNoisePotentialDerivatives = vec4(0.0);
+                            vec4 yNoisePotentialDerivatives = vec4(0.0);
+                            vec4 zNoisePotentialDerivatives = vec4(0.0);
+
+                            for (int i = 0; i < 3; ++i) {
+                                float twoPowI = pow(2.0, float(i));
+                                float scale = 0.5 * twoPowI * pow(persistence, float(i));
+
+                                xNoisePotentialDerivatives += simplexNoiseDerivatives(vec4(p * twoPowI, noiseTime)) * scale;
+                                yNoisePotentialDerivatives += simplexNoiseDerivatives(vec4((p + vec3(123.4, 129845.6, -1239.1)) * twoPowI, noiseTime)) * scale;
+                                zNoisePotentialDerivatives += simplexNoiseDerivatives(vec4((p + vec3(-9519.0, 9051.0, -123.0)) * twoPowI, noiseTime)) * scale;
+                            }
+
+                            return vec3(
+                                zNoisePotentialDerivatives[1] - yNoisePotentialDerivatives[2],
+                                xNoisePotentialDerivatives[2] - zNoisePotentialDerivatives[0],
+                                yNoisePotentialDerivatives[0] - xNoisePotentialDerivatives[1]
+                            );
+                        }
+
+                        void main() {
+                            vec2 uv = gl_FragCoord.xy / u_resolution;
+                            vec4 positionInfo = texture2D(u_positionTexture, uv);
+                            vec4 defaultInfo = texture2D(u_defaultTexture, uv);
+                            vec3 position = mix(vec3(0.0, -200.0, 0.0), positionInfo.xyz, smoothstep(0.0, 0.3, u_initAnimation));
+                            float life = positionInfo.a - u_dieSpeed;
+
+                            vec3 followPosition = mix(
+                                vec3(0.0, -(1.0 - u_initAnimation) * 200.0, 0.0),
+                                u_mouse3d,
+                                smoothstep(0.2, 0.7, u_initAnimation)
+                            );
+
+                            if (life < 0.0) {
+                                position = defaultInfo.xyz * (1.0 + sin(u_time * 15.0) * 0.2 + (1.0 - u_initAnimation)) * 0.4 * u_radius;
+                                position += followPosition;
+                                life = 0.5 + fract(defaultInfo.w * 21.4131 + u_time);
+                            } else {
+                                vec3 delta = followPosition - position;
+                                float distanceToFollow = length(delta);
+                                position += delta * (0.005 + life * 0.01) * u_attraction * (1.0 - smoothstep(50.0, 350.0, distanceToFollow)) * u_speed;
+                                position += curl(position * u_curlSize, u_time, 0.1 + (1.0 - life) * 0.1) * u_speed;
+                            }
+
+                            gl_FragColor = vec4(position, life);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false,
+                    blending: THREE.NoBlending
+                });
+
+                const computeScene = new THREE.Scene();
+                const computeCamera = new THREE.Camera();
+                const computeQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), copyMaterial);
+                computeQuad.frustumCulled = false;
+                computeScene.add(computeQuad);
+
+                const defaultTexture = createDefaultPositionTexture();
+                let positionTargetA = createRenderTarget();
+                let positionTargetB = createRenderTarget();
+                let currentPositionTarget = positionTargetA;
+                let nextPositionTarget = positionTargetB;
+                let simulationReady = renderer && typeof renderer.setRenderTarget === 'function';
+                let simulationWarningShown = false;
+
+                const renderComputePass = (material, target) => {
+                    computeQuad.material = material;
+                    renderer.setRenderTarget(target);
+                    renderer.render(computeScene, computeCamera);
+                };
+
+                const copyTextureToTarget = (texture, target) => {
+                    copyMaterial.uniforms.u_texture.value = texture;
+                    renderComputePass(copyMaterial, target);
+                };
+
+                if (simulationReady) {
+                    const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
+                    try {
+                        copyTextureToTarget(defaultTexture, currentPositionTarget);
+                        copyTextureToTarget(defaultTexture, nextPositionTarget);
+                        renderer.setRenderTarget(previousTarget);
+                    } catch (error) {
+                        simulationReady = false;
+                        console.warn('[BackgroundThemes] Spirit particle simulation disabled.', error);
+                        if (renderer.setRenderTarget) {
+                            renderer.setRenderTarget(previousTarget);
+                        }
+                    }
+                }
+
+                const particleGeometry = new THREE.BufferGeometry();
+                const particleUvs = new Float32Array(pointCount * 3);
+                for (let i = 0; i < pointCount; i++) {
+                    const offset = i * 3;
+                    particleUvs[offset] = (i % textureWidth + 0.5) / textureWidth;
+                    particleUvs[offset + 1] = (Math.floor(i / textureWidth) + 0.5) / textureHeight;
+                    particleUvs[offset + 2] = 0;
+                }
+                particleGeometry.setAttribute('position', new THREE.BufferAttribute(particleUvs, 3));
+
+                const backdropMaterial = new THREE.ShaderMaterial({
+                    vertexShader: `
+                        varying vec2 vUv;
+
+                        void main() {
+                            vUv = uv;
+                            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                        }
+                    `,
+                    fragmentShader: `
+                        precision mediump float;
+                        varying vec2 vUv;
+
+                        void main() {
+                            vec3 topColor = vec3(0.84, 0.85, 0.84);
+                            vec3 horizonColor = vec3(0.97, 0.97, 0.94);
+                            vec3 bottomColor = vec3(0.72, 0.73, 0.72);
+                            float horizon = 1.0 - smoothstep(0.20, 0.64, abs(vUv.y - 0.53));
+                            vec3 vertical = mix(bottomColor, topColor, smoothstep(0.0, 1.0, vUv.y));
+                            vec3 color = mix(vertical, horizonColor, horizon * 0.78);
+                            gl_FragColor = vec4(color, 1.0);
+                        }
+                    `,
+                    depthTest: false,
+                    depthWrite: false
+                });
+                const backdrop = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), backdropMaterial);
+                backdrop.frustumCulled = false;
+                backdrop.renderOrder = -90;
+                themeGroup.add(backdrop);
+
+                const particleMaterial = new THREE.ShaderMaterial({
+                    uniforms: {
+                        u_positionTexture: { value: simulationReady ? currentPositionTarget.texture : defaultTexture },
+                        u_particleSize: { value: 42000 },
+                        u_worldScale: { value: 120 },
+                        u_depthScale: { value: 85 },
+                        u_backgroundZ: { value: -26000 },
+                        u_color: { value: new THREE.Color(0xffffff) }
+                    },
+                    vertexShader: `
+                        uniform sampler2D u_positionTexture;
+                        uniform float u_particleSize;
+                        uniform float u_worldScale;
+                        uniform float u_depthScale;
+                        uniform float u_backgroundZ;
+                        varying float vLife;
+                        varying float vAlpha;
+                        varying float vNearness;
+                        varying float vShade;
+
+                        void main() {
+                            vec4 positionInfo = texture2D(u_positionTexture, position.xy);
+                            float life = clamp(positionInfo.w, 0.0, 1.0);
+                            vec3 flowPosition = positionInfo.xyz;
+                            float sizeSeed = fract(sin(dot(position.xy, vec2(127.1, 311.7))) * 43758.5453);
+
+                            vec3 simPosition = vec3(
+                                flowPosition.x * u_worldScale,
+                                flowPosition.y * u_worldScale,
+                                u_backgroundZ + flowPosition.z * u_depthScale
+                            );
+
+                            vec4 mvPosition = modelViewMatrix * vec4(simPosition, 1.0);
+                            float viewDepth = max(-mvPosition.z, 1.0);
+                            float fadeOut = smoothstep(0.0, 0.28, life);
+                            float seededSize = mix(0.62, 2.15, pow(sizeSeed, 1.35));
+                            float nearness = 1.0 - clamp((viewDepth - 9000.0) / 28000.0, 0.0, 1.0);
+                            float depthBoost = mix(0.78, 1.62, nearness);
+                            gl_PointSize = clamp((u_particleSize / viewDepth) * seededSize * depthBoost * fadeOut, 0.12, 9.6);
+                            gl_Position = projectionMatrix * mvPosition;
+                            vLife = life;
+                            vAlpha = fadeOut;
+                            vNearness = nearness;
+                            float upperLight = smoothstep(-20.0, 115.0, flowPosition.y);
+                            float frontLight = smoothstep(-90.0, 85.0, flowPosition.z);
+                            vShade = mix(0.46, 1.18, clamp(upperLight * 0.72 + frontLight * 0.35, 0.0, 1.0));
+                        }
+                    `,
+                    fragmentShader: `
+                        precision mediump float;
+                        uniform vec3 u_color;
+                        varying float vLife;
+                        varying float vAlpha;
+                        varying float vNearness;
+                        varying float vShade;
+
+                        void main() {
+                            vec2 uv = gl_PointCoord - vec2(0.5);
+                            float dist = length(uv);
+                            float core = 1.0 - smoothstep(0.16, mix(0.44, 0.5, vNearness), dist);
+                            float halo = (1.0 - smoothstep(0.3, 0.5, dist)) * vNearness * 0.22;
+                            float particleAlpha = (core + halo) * vAlpha;
+                            if (particleAlpha < 0.01) discard;
+                            vec3 outgoingLight = mix(u_color * 0.58, u_color, smoothstep(0.0, 0.7, vLife));
+                            gl_FragColor = vec4(outgoingLight * vShade, min(particleAlpha, 0.96));
+                        }
+                    `,
+                    transparent: true,
+                    depthTest: true,
+                    depthWrite: false,
+                    blending: THREE.NormalBlending
+                });
+
+                const particles = new THREE.Points(particleGeometry, particleMaterial);
+                particles.frustumCulled = false;
+                particles.renderOrder = -40;
+                themeGroup.add(particles);
+
+                const themeStartTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001;
+                let lastElapsedTime = 0;
+                let followPointTime = 0;
+                const followPoint = new THREE.Vector3(0, 0, 0);
+                const autoFollowPoint = new THREE.Vector3(0, 0, 0);
+                const spiritMotion = Object.freeze({
+                    followTimeScale: 0.79,
+                    followBlend: 0.16,
+                    followX: 182,
+                    followY: 49,
+                    followZ: 132,
+                    depthTravelScale: 0.67,
+                    particleSpeed: 0.81,
+                    lifeDecay: 0.013
+                });
+
+                const syncParticleView = (camera, elapsedTime) => {
+                    if (!camera) return;
+
+                    const cameraZ = Math.max(600, Math.abs(Number(camera.position?.z || 1200)));
+                    const cameraFar = Math.max(120000, Number(camera.far || 500000));
+                    const clipSafeDepth = Math.max(14000, cameraFar - cameraZ - 5000);
+                    const backgroundDepth = Math.min(Math.max(26000, cameraZ * 6.0), clipSafeDepth * 0.82);
+                    const viewDistance = cameraZ + backgroundDepth;
+                    const fovRadians = THREE.MathUtils?.degToRad
+                        ? THREE.MathUtils.degToRad(Number(camera.fov || 45))
+                        : Number(camera.fov || 45) * Math.PI / 180;
+                    const viewportHeight = Math.max(1, Math.tan(fovRadians * 0.5) * viewDistance * 2);
+                    const viewportWidth = viewportHeight * Math.max(0.1, Number(camera.aspect || 1));
+                    particleMaterial.uniforms.u_worldScale.value = Math.max(105, backgroundDepth * 0.0043);
+                    particleMaterial.uniforms.u_depthScale.value = Math.max(56, backgroundDepth * 0.0037 * spiritMotion.depthTravelScale);
+                    particleMaterial.uniforms.u_backgroundZ.value = -backgroundDepth;
+                    particleMaterial.uniforms.u_particleSize.value = Math.max(44000, viewDistance * 1.92);
+                    particles.rotation.z = Math.sin(elapsedTime * 0.08) * 0.08;
+                    particles.rotation.x = Math.sin(elapsedTime * 0.11) * 0.05;
+                    particles.position.x = Number(camera.position?.x || 0);
+                    particles.position.y = Number(camera.position?.y || 0);
+                    particles.updateMatrixWorld(true);
+                    backdrop.position.x = Number(camera.position?.x || 0);
+                    backdrop.position.y = Number(camera.position?.y || 0);
+                    backdrop.position.z = -backgroundDepth - 1200;
+                    backdrop.scale.set(viewportWidth * 1.12, viewportHeight * 1.12, 1);
+                    backdrop.updateMatrixWorld(true);
+                };
+
+                particles.onBeforeRender = (_renderer, _scene, camera) => {
+                    const elapsedTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001 - themeStartTime;
+                    syncParticleView(camera, elapsedTime);
+                };
+
+                themeGroup.animate = (camera) => {
+                    if (!camera) return;
+
+                    const elapsedTime = (typeof performance !== 'undefined' ? performance.now() : Date.now()) * 0.001 - themeStartTime;
+                    const deltaMs = Math.min(48, Math.max(0, (elapsedTime - lastElapsedTime) * 1000 || 16.6667));
+                    const deltaRatio = deltaMs / 16.6667;
+                    lastElapsedTime = elapsedTime;
+
+                    followPointTime += deltaMs * 0.001 * spiritMotion.followTimeScale;
+                    autoFollowPoint.set(
+                        Math.cos(followPointTime * 0.9) * spiritMotion.followX,
+                        Math.cos(followPointTime * 2.8) * spiritMotion.followY,
+                        Math.sin(followPointTime * 1.55) * spiritMotion.followZ
+                    );
+                    followPoint.lerp(autoFollowPoint, Math.min(1.0, spiritMotion.followBlend * deltaRatio));
+
+                    if (simulationReady) {
+                        const previousTarget = renderer.getRenderTarget ? renderer.getRenderTarget() : null;
+                        try {
+                            positionMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
+                            positionMaterial.uniforms.u_defaultTexture.value = defaultTexture;
+                            positionMaterial.uniforms.u_mouse3d.value.copy(followPoint);
+                            positionMaterial.uniforms.u_speed.value = spiritMotion.particleSpeed * deltaRatio;
+                            positionMaterial.uniforms.u_dieSpeed.value = spiritMotion.lifeDecay * deltaRatio;
+                            positionMaterial.uniforms.u_time.value = elapsedTime;
+                            positionMaterial.uniforms.u_initAnimation.value = Math.min(1, elapsedTime * 0.25);
+                            renderComputePass(positionMaterial, nextPositionTarget);
+
+                            const oldPositionTarget = currentPositionTarget;
+                            currentPositionTarget = nextPositionTarget;
+                            nextPositionTarget = oldPositionTarget;
+                            renderer.setRenderTarget(previousTarget);
+
+                            particleMaterial.uniforms.u_positionTexture.value = currentPositionTarget.texture;
+                        } catch (error) {
+                            simulationReady = false;
+                            if (!simulationWarningShown) {
+                                simulationWarningShown = true;
+                                console.warn('[BackgroundThemes] Spirit particle simulation stopped.', error);
+                            }
+                            if (renderer.setRenderTarget) {
+                                renderer.setRenderTarget(previousTarget);
+                            }
+                        }
+                    }
+
+                    syncParticleView(camera, elapsedTime);
+                };
+
+                themeGroup.customDispose = () => {
+                    themeGroup.traverse(child => {
+                        if (child.geometry) child.geometry.dispose();
+                        if (child.material) {
+                            if (Array.isArray(child.material)) {
+                                child.material.forEach(material => material.dispose());
+                            } else {
+                                child.material.dispose();
+                            }
+                        }
+                    });
+                    defaultTexture.dispose();
+                    positionTargetA.dispose();
+                    positionTargetB.dispose();
+                    copyMaterial.dispose();
+                    positionMaterial.dispose();
+                    particleMaterial.dispose();
+                    backdropMaterial.dispose();
+                };
+
+                return setThemeAnimationMode(themeGroup, THEME_ANIMATION_MODE.Continuous);
+            },
+            dispose: (themeObject) => { disposeThemeObject(themeObject); }
+        },
+
+        // Theme 9: None (no background)
+        'None': { create: (scene) => { scene.background = new THREE.Color(0xf0f2f5); return null; }, dispose: (themeObject) => { } }
+    };
+
+    // --- Expose theme manager on window ---
+    window.MindMapThemes = {
+        getTheme: (themeName) => themes[themeName],
+        getAnimationMode: getThemeAnimationMode,
+        shouldAnimate: shouldAnimateTheme,
+        runAnimationIfNeeded: runThemeAnimationIfNeeded,
+        disposeShared: () => { if (plusTexture) { plusTexture.dispose(); plusTexture = null; } console.log('[BackgroundThemes] Shared resources disposed.'); }
+    };
+
+    console.log('✅ background-themes.js loaded (InfiniteGridHelper integrated)');
+})();
+