angular-three-soba 2.2.0 → 2.2.1

package/fesm2022/angular-three-soba-staging.mjs

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, computed, afterNextRender, inject, DestroyRef, untracked, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, signal, Directive, output, effect, Injector, contentChild, TemplateRef, numberAttribute, ViewContainerRef } from '@angular/core';
-import { omit, injectStore, pick, extend, getLocalState, injectBeforeRender, checkUpdate, NgtArgs, vector3, is, resolveRef, applyProps, injectLoader, prepare, NgtPortal, NgtPortalContent } from 'angular-three';
+import { input, viewChild, computed, afterNextRender, effect, inject, DestroyRef, untracked, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, signal, Directive, output, Injector, contentChild, TemplateRef, numberAttribute, ViewContainerRef } from '@angular/core';
+import { omit, injectStore, pick, extend, getLocalState, injectBeforeRender, checkUpdate, NgtArgs, vector3, is, resolveRef, injectLoader, applyProps, prepare, NgtPortal, NgtPortalContent } from 'angular-three';
 import { ProgressiveLightMap, SoftShadowMaterial, CausticsProjectionMaterial, createCausticsUpdate, SpotLightMaterial } from 'angular-three-soba/vanilla-exports';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { Group, Mesh, PlaneGeometry, Box3, Vector3, Quaternion, Matrix4, LinearFilter, UnsignedByteType, LinearMipmapLinearFilter, FloatType, CustomBlending, OneFactor, SrcAlphaFactor, CameraHelper, Scene, LineBasicMaterial, OrthographicCamera, Sphere, Color, MeshDepthMaterial, ShaderMaterial, MeshBasicMaterial, WebGLRenderTarget, CubeTextureLoader, CubeTexture, CubeReflectionMapping, EquirectangularReflectionMapping, WebGLCubeRenderTarget, HalfFloatType, CubeCamera, MathUtils, DoubleSide, RingGeometry, AlwaysStencilFunc, ReplaceStencilOp, NotEqualStencilFunc, EqualStencilFunc, KeepStencilOp, RepeatWrapping, Vector2, DirectionalLight, Object3D, CylinderGeometry, RGBAFormat, SpotLightHelper, SpotLight, AmbientLight, PointLight } from 'three';
+import { Group, Mesh, PlaneGeometry, Box3, Vector3, Quaternion, Matrix4, LinearFilter, UnsignedByteType, LinearMipmapLinearFilter, FloatType, CustomBlending, OneFactor, SrcAlphaFactor, CameraHelper, Scene, LineBasicMaterial, OrthographicCamera, Sphere, Color, MeshDepthMaterial, ShaderMaterial, MeshBasicMaterial, WebGLRenderTarget, CubeTexture, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader, WebGLCubeRenderTarget, HalfFloatType, CubeCamera, MathUtils, DoubleSide, RingGeometry, AlwaysStencilFunc, ReplaceStencilOp, NotEqualStencilFunc, EqualStencilFunc, KeepStencilOp, RepeatWrapping, Vector2, DirectionalLight, Object3D, CylinderGeometry, RGBAFormat, SpotLightHelper, SpotLight, AmbientLight, PointLight } from 'three';
 import { SimplexNoise, HorizontalBlurShader, VerticalBlurShader, RGBELoader, EXRLoader, GroundProjectedEnv, Sky, FullScreenQuad } from 'three-stdlib';
 import { injectHelper, NgtsEdges, NgtsHelper } from 'angular-three-soba/abstractions';
 import { injectFBO, sRGBEncoding, LinearEncoding, getVersion } from 'angular-three-soba/misc';
@@ -72,23 +71,22 @@ class NgtsAccumulativeShadows {
         this.blend = computed(() => Math.max(2, this.options().frames === Infinity ? this.options().blend : this.options().frames));
         this.count = 0;
         extend({ Group, SoftShadowMaterial, Mesh, PlaneGeometry });
-        const autoEffect = injectAutoEffect();
         afterNextRender(() => {
             this.pLM().configure(this.planeRef().nativeElement);
-            autoEffect(() => {
-                const sceneLS = getLocalState(this.scene());
-                if (!sceneLS)
-                    return;
-                // track deps
-                this.planeRef();
-                this.options();
-                sceneLS.objects();
-                // Reset internals, buffers, ...
-                this.reset();
-                // Update lightmap
-                if (!this.temporal() && this.frames() !== Infinity)
-                    this.update(this.blend());
-            });
+        });
+        effect(() => {
+            const sceneLS = getLocalState(this.scene());
+            if (!sceneLS)
+                return;
+            // track deps
+            this.planeRef();
+            this.options();
+            sceneLS.objects();
+            // Reset internals, buffers, ...
+            this.reset();
+            // Update lightmap
+            if (!this.temporal() && this.frames() !== Infinity)
+                this.update(this.blend());
         });
         injectBeforeRender(() => {
             const [frames, temporal, invalidate, limit] = [this.frames(), !!this.temporal(), this.invalidate(), this.limit()];
@@ -138,8 +136,8 @@ class NgtsAccumulativeShadows {
         // Restore lights and meshes
         this.pLM().finish();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAccumulativeShadows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsAccumulativeShadows, isStandalone: true, selector: "ngts-accumulative-shadows", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lightsRef", first: true, predicate: ["lights"], descendants: true, isSignal: true }, { propertyName: "planeRef", first: true, predicate: ["plane"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsAccumulativeShadows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsAccumulativeShadows, isStandalone: true, selector: "ngts-accumulative-shadows", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lightsRef", first: true, predicate: ["lights"], descendants: true, isSignal: true }, { propertyName: "planeRef", first: true, predicate: ["plane"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group [parameters]="parameters()">
 			<ngt-group #lights [traverse]="nullTraversal">
 				<ng-content />
@@ -159,7 +157,7 @@ class NgtsAccumulativeShadows {
 		</ngt-group>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAccumulativeShadows, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsAccumulativeShadows, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-accumulative-shadows',
@@ -206,28 +204,25 @@ class NgtsBackdrop {
         this.segments = pick(this.options, 'segments');
         this.floor = pick(this.options, 'floor');
         extend({ Group, Mesh, PlaneGeometry });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const plane = this.planeRef()?.nativeElement;
-                if (!plane)
-                    return;
-                const [segments, floor] = [this.segments(), this.floor()];
-                let i = 0;
-                const offset = segments / segments / 2;
-                const position = plane.attributes['position'];
-                for (let x = 0; x < segments + 1; x++) {
-                    for (let y = 0; y < segments + 1; y++) {
-                        position.setXYZ(i++, x / segments - offset + (x === 0 ? -floor : 0), y / segments - offset, easeInExpo(x / segments));
-                    }
+        effect(() => {
+            const plane = this.planeRef()?.nativeElement;
+            if (!plane)
+                return;
+            const [segments, floor] = [this.segments(), this.floor()];
+            let i = 0;
+            const offset = segments / segments / 2;
+            const position = plane.attributes['position'];
+            for (let x = 0; x < segments + 1; x++) {
+                for (let y = 0; y < segments + 1; y++) {
+                    position.setXYZ(i++, x / segments - offset + (x === 0 ? -floor : 0), y / segments - offset, easeInExpo(x / segments));
                 }
-                checkUpdate(position);
-                plane.computeVertexNormals();
-            });
+            }
+            checkUpdate(position);
+            plane.computeVertexNormals();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsBackdrop, isStandalone: true, selector: "ngts-backdrop", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "planeRef", first: true, predicate: ["plane"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsBackdrop, isStandalone: true, selector: "ngts-backdrop", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "planeRef", first: true, predicate: ["plane"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #group [parameters]="parameters()">
 			<ngt-mesh [receiveShadow]="receiveShadow()" [rotation]="[-Math.PI / 2, 0, Math.PI / 2]">
 				<ngt-plane-geometry #plane *args="[1, 1, segments(), segments()]" />
@@ -236,7 +231,7 @@ class NgtsBackdrop {
 		</ngt-group>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBackdrop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsBackdrop, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-backdrop',
@@ -287,14 +282,14 @@ class NgtsBBAnchor {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBBAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsBBAnchor, isStandalone: true, selector: "ngts-bb-anchor", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "bbAnchorRef", first: true, predicate: ["bbAnchor"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsBBAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsBBAnchor, isStandalone: true, selector: "ngts-bb-anchor", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "bbAnchorRef", first: true, predicate: ["bbAnchor"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #bbAnchor [parameters]="parameters()">
 			<ng-content />
 		</ngt-group>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBBAnchor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsBBAnchor, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-bb-anchor',
@@ -359,44 +354,41 @@ class NgtsBounds {
         this.t = 0;
         this.box = new Box3();
         extend({ Group });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const [controls, camera] = [this.controls(), untracked(this.camera)];
-                if (!controls)
-                    return;
-                const callback = () => {
-                    if (controls && this.goal.target && this.animationState !== AnimationState.NONE) {
-                        const front = new Vector3().setFromMatrixColumn(camera.matrix, 2);
-                        const d0 = this.origin.camPos.distanceTo(controls.target);
-                        const d1 = (this.goal.camPos || this.origin.camPos).distanceTo(this.goal.target);
-                        const d = (1 - this.t) * d0 + this.t * d1;
-                        controls.target.copy(camera.position).addScaledVector(front, -d);
-                        controls.update();
-                    }
-                    this.animationState = AnimationState.NONE;
-                };
-                controls.addEventListener('start', callback);
-                return () => controls.removeEventListener('start', callback);
-            });
-            let count = 0;
-            autoEffect(() => {
-                const [clip, fit, observe] = [
-                    this.clipOption(),
-                    this.fitOption(),
-                    this.observe(),
-                    this.size(),
-                    this.camera(),
-                    this.controls(),
-                ];
-                if (observe || count++ === 0) {
-                    this.refresh();
-                    if (fit)
-                        this.reset().fit();
-                    if (clip)
-                        this.clip();
+        effect((onCleanup) => {
+            const [controls, camera] = [this.controls(), untracked(this.camera)];
+            if (!controls)
+                return;
+            const callback = () => {
+                if (controls && this.goal.target && this.animationState !== AnimationState.NONE) {
+                    const front = new Vector3().setFromMatrixColumn(camera.matrix, 2);
+                    const d0 = this.origin.camPos.distanceTo(controls.target);
+                    const d1 = (this.goal.camPos || this.origin.camPos).distanceTo(this.goal.target);
+                    const d = (1 - this.t) * d0 + this.t * d1;
+                    controls.target.copy(camera.position).addScaledVector(front, -d);
+                    controls.update();
                 }
-            });
+                this.animationState = AnimationState.NONE;
+            };
+            controls.addEventListener('start', callback);
+            onCleanup(() => controls.removeEventListener('start', callback));
+        });
+        let count = 0;
+        effect(() => {
+            const [clip, fit, observe] = [
+                this.clipOption(),
+                this.fitOption(),
+                this.observe(),
+                this.size(),
+                this.camera(),
+                this.controls(),
+            ];
+            if (observe || count++ === 0) {
+                this.refresh();
+                if (fit)
+                    this.reset().fit();
+                if (clip)
+                    this.clip();
+            }
         });
         injectBeforeRender(({ delta }) => {
             // This [additional animation step START] is needed to guarantee that delta used in animation isn't absurdly high (2-3 seconds) which is actually possible if rendering happens on demand...
@@ -567,14 +559,14 @@ class NgtsBounds {
         invalidate();
         return this;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBounds, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsBounds, isStandalone: true, selector: "ngts-bounds", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsBounds, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsBounds, isStandalone: true, selector: "ngts-bounds", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #group>
 			<ng-content />
 		</ngt-group>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBounds, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsBounds, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-bounds',
@@ -608,7 +600,6 @@ class NgtsCameraShake {
     }
     constructor() {
         this.options = input(defaultOptions$b, { transform: mergeInputs(defaultOptions$b) });
-        this.autoEffect = injectAutoEffect();
         this.store = injectStore();
         this.camera = this.store.select('camera');
         this.defaultControls = this.store.select('controls');
@@ -617,17 +608,15 @@ class NgtsCameraShake {
         this.yawNoise = new SimplexNoise();
         this.pitchNoise = new SimplexNoise();
         this.rollNoise = new SimplexNoise();
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const defaultControls = this.defaultControls();
-                if (!defaultControls)
-                    return;
-                const camera = this.camera();
-                const callback = () => void (this.initialRotation = camera.rotation.clone());
-                defaultControls.addEventListener('change', callback);
-                callback();
-                return () => void defaultControls.removeEventListener('change', callback);
-            });
+        effect((onCleanup) => {
+            const defaultControls = this.defaultControls();
+            if (!defaultControls)
+                return;
+            const camera = this.camera();
+            const callback = () => void (this.initialRotation = camera.rotation.clone());
+            defaultControls.addEventListener('change', callback);
+            callback();
+            onCleanup(() => void defaultControls.removeEventListener('change', callback));
         });
         injectBeforeRender(({ delta, clock }) => {
             const [{ maxYaw, yawFrequency, maxPitch, pitchFrequency, maxRoll, rollFrequency, decay, decayRate }, camera] = [
@@ -644,10 +633,10 @@ class NgtsCameraShake {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCameraShake, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsCameraShake, isStandalone: true, selector: "ngts-camera-shake", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCameraShake, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtsCameraShake, isStandalone: true, selector: "ngts-camera-shake", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCameraShake, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCameraShake, decorators: [{
             type: Directive,
             args: [{ selector: 'ngts-camera-shake', standalone: true }]
         }], ctorParameters: () => [] });
@@ -721,7 +710,25 @@ class NgtsCaustics {
         this.causticsTargetB = injectFBO(this.causticsTargetParams);
         this.cameraHelper = injectHelper(() => (this.debug() ? this.cameraRef().nativeElement : null), () => CameraHelper);
         extend({ CausticsProjectionMaterial, Group, Scene, Mesh, PlaneGeometry, LineBasicMaterial, OrthographicCamera });
-        const autoEffect = injectAutoEffect();
+        effect(() => {
+            // track all changes
+            const [group, scene, plane] = [
+                this.groupRef().nativeElement,
+                this.sceneRef().nativeElement,
+                this.planeRef().nativeElement,
+                this.options(),
+            ];
+            const groupLocalState = getLocalState(group);
+            const sceneLocalState = getLocalState(scene);
+            const planeLocalState = getLocalState(plane);
+            if (!groupLocalState || !sceneLocalState || !planeLocalState)
+                return;
+            groupLocalState.objects();
+            sceneLocalState.objects();
+            planeLocalState.objects();
+            planeLocalState.nonObjects();
+            group.updateWorldMatrix(false, true);
+        });
         const update = createCausticsUpdate(() => {
             const { lightSource, ...rest } = this.options();
             return {
@@ -740,30 +747,9 @@ class NgtsCaustics {
             };
         });
         injectBeforeRender(({ gl }) => update(gl));
-        afterNextRender(() => {
-            autoEffect(() => {
-                // track all changes
-                this.options();
-                const [group, scene, plane] = [
-                    this.groupRef().nativeElement,
-                    this.sceneRef().nativeElement,
-                    this.planeRef().nativeElement,
-                ];
-                const groupLocalState = getLocalState(group);
-                const sceneLocalState = getLocalState(scene);
-                const planeLocalState = getLocalState(plane);
-                if (!groupLocalState || !sceneLocalState || !planeLocalState)
-                    return;
-                groupLocalState.objects();
-                sceneLocalState.objects();
-                planeLocalState.objects();
-                planeLocalState.nonObjects();
-                group.updateWorldMatrix(false, true);
-            });
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCaustics, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsCaustics, isStandalone: true, selector: "ngts-caustics", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "sceneRef", first: true, predicate: ["scene"], descendants: true, isSignal: true }, { propertyName: "cameraRef", first: true, predicate: ["camera"], descendants: true, isSignal: true }, { propertyName: "planeRef", first: true, predicate: ["plane"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCaustics, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsCaustics, isStandalone: true, selector: "ngts-caustics", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "sceneRef", first: true, predicate: ["scene"], descendants: true, isSignal: true }, { propertyName: "cameraRef", first: true, predicate: ["camera"], descendants: true, isSignal: true }, { propertyName: "planeRef", first: true, predicate: ["plane"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #group [parameters]="parameters()">
 			<ngt-scene #scene>
 				<ngt-orthographic-camera #camera [up]="[0, 1, 0]" />
@@ -792,7 +778,7 @@ class NgtsCaustics {
 		</ngt-group>
 	`, isInline: true, dependencies: [{ kind: "component", type: NgtsEdges, selector: "ngts-edges", inputs: ["options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCaustics, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCaustics, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-caustics',
@@ -871,32 +857,29 @@ class NgtsCenter {
             'cacheKey',
         ]);
         extend({ Group });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const [{ precise, top, bottom, right, left, front, back, disable, disableZ, disableY, disableX }, group, outer, inner,] = [
-                    this.centerOptions(),
-                    this.groupRef().nativeElement,
-                    this.outerRef().nativeElement,
-                    this.innerRef().nativeElement,
-                ];
-                const localState = getLocalState(inner);
-                const children = localState?.objects();
-                if (!children?.length)
-                    return;
-                outer.matrixWorld.identity();
-                const box3 = new Box3().setFromObject(inner, precise);
-                const center = new Vector3();
-                const sphere = new Sphere();
-                const width = box3.max.x - box3.min.x;
-                const height = box3.max.y - box3.min.y;
-                const depth = box3.max.z - box3.min.z;
-                box3.getCenter(center);
-                box3.getBoundingSphere(sphere);
-                const vAlign = top ? height / 2 : bottom ? -height / 2 : 0;
-                const hAlign = left ? -width / 2 : right ? width / 2 : 0;
-                const dAlign = front ? depth / 2 : back ? -depth / 2 : 0;
-                outer.position.set(disable || disableX ? 0 : -center.x + hAlign, disable || disableY ? 0 : -center.y + vAlign, disable || disableZ ? 0 : -center.z + dAlign);
+        effect(() => {
+            const inner = this.innerRef().nativeElement;
+            const localState = getLocalState(inner);
+            if (!localState)
+                return;
+            const children = [localState.objects(), localState.nonObjects()];
+            if (!children?.length)
+                return;
+            const [{ precise, top, bottom, right, left, front, back, disable, disableZ, disableY, disableX }, group, outer] = [this.centerOptions(), this.groupRef().nativeElement, this.outerRef().nativeElement];
+            outer.matrixWorld.identity();
+            const box3 = new Box3().setFromObject(inner, precise);
+            const center = new Vector3();
+            const sphere = new Sphere();
+            const width = box3.max.x - box3.min.x;
+            const height = box3.max.y - box3.min.y;
+            const depth = box3.max.z - box3.min.z;
+            box3.getCenter(center);
+            box3.getBoundingSphere(sphere);
+            const vAlign = top ? height / 2 : bottom ? -height / 2 : 0;
+            const hAlign = left ? -width / 2 : right ? width / 2 : 0;
+            const dAlign = front ? depth / 2 : back ? -depth / 2 : 0;
+            outer.position.set(disable || disableX ? 0 : -center.x + hAlign, disable || disableY ? 0 : -center.y + vAlign, disable || disableZ ? 0 : -center.z + dAlign);
+            untracked(() => {
                 this.centered.emit({
                     parent: group.parent,
                     container: group,
@@ -913,8 +896,8 @@ class NgtsCenter {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCenter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsCenter, isStandalone: true, selector: "ngts-center", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { centered: "centered" }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "outerRef", first: true, predicate: ["outer"], descendants: true, isSignal: true }, { propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCenter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsCenter, isStandalone: true, selector: "ngts-center", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { centered: "centered" }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "outerRef", first: true, predicate: ["outer"], descendants: true, isSignal: true }, { propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #group [parameters]="parameters()">
 			<ngt-group #outer>
 				<ngt-group #inner>
@@ -924,7 +907,7 @@ class NgtsCenter {
 		</ngt-group>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCenter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsCenter, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-center',
@@ -1102,8 +1085,8 @@ class NgtsContactShadows {
         renderTarget.texture.generateMipmaps = false;
         return renderTarget;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsContactShadows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsContactShadows, isStandalone: true, selector: "ngts-contact-shadows", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contactShadowsRef", first: true, predicate: ["contactShadows"], descendants: true, isSignal: true }, { propertyName: "shadowsCameraRef", first: true, predicate: ["shadowsCamera"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsContactShadows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsContactShadows, isStandalone: true, selector: "ngts-contact-shadows", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contactShadowsRef", first: true, predicate: ["contactShadows"], descendants: true, isSignal: true }, { propertyName: "shadowsCameraRef", first: true, predicate: ["shadowsCamera"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #contactShadows [rotation]="[Math.PI / 2, 0, 0]" [parameters]="parameters()">
 			<ngt-mesh
 				[scale]="[1, -1, 1]"
@@ -1122,7 +1105,7 @@ class NgtsContactShadows {
 		</ngt-group>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsContactShadows, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsContactShadows, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-contact-shadows',
@@ -1151,7 +1134,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/';
 const ENVIRONMENT_PRESETS = {
     apartment: 'lebombo_1k.hdr',
     city: 'potsdamer_platz_1k.hdr',
@@ -1164,103 +1146,37 @@ const ENVIRONMENT_PRESETS = {
     sunset: 'venice_sunset_1k.hdr',
     warehouse: 'empty_warehouse_01_1k.hdr',
 };
-function resolveScene(scene) {
-    return is.ref(scene) ? scene.nativeElement : scene;
-}
-function setEnvProps(background, scene, defaultScene, texture, sceneProps = {}) {
-    sceneProps.backgroundBlurriness ??= sceneProps.blur ?? 0;
-    sceneProps.backgroundIntensity ??= 1;
-    // @ts-expect-error - it's ok, we're sending through applyProps
-    sceneProps.backgroundRotation ??= [0, 0, 0];
-    sceneProps.environmentIntensity ??= 1;
-    // @ts-expect-error - it's ok, we're sending through applyProps
-    sceneProps.environmentRotation ??= [0, 0, 0];
-    const target = resolveScene(scene || defaultScene);
-    const oldbg = target.background;
-    const oldenv = target.environment;
-    const oldSceneProps = {
-        backgroundBlurriness: target.backgroundBlurriness,
-        backgroundIntensity: target.backgroundIntensity,
-        backgroundRotation: target.backgroundRotation?.clone?.() ?? [0, 0, 0],
-        environmentIntensity: target.environmentIntensity,
-        environmentRotation: target.environmentRotation?.clone?.() ?? [0, 0, 0],
-    };
-    if (background !== 'only')
-        target.environment = texture;
-    if (background)
-        target.background = texture;
-    applyProps(target, sceneProps);
-    return () => {
-        if (background !== 'only')
-            target.environment = oldenv;
-        if (background)
-            target.background = oldbg;
-        applyProps(target, oldSceneProps);
-    };
-}
+const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/';
+const defaultFiles = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'];
 function injectEnvironment(options = () => ({}), { injector } = {}) {
     return assertInjector(injectEnvironment, injector, () => {
         const adjustedOptions = computed(() => {
             const { preset, extensions, encoding, ...rest } = options();
             let { files, path } = rest;
             if (files == null) {
-                files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'];
+                files = defaultFiles;
             }
             if (path == null) {
                 path = '';
             }
             if (preset) {
-                if (!(preset in ENVIRONMENT_PRESETS))
-                    throw new Error('Preset must be one of: ' + Object.keys(ENVIRONMENT_PRESETS).join(', '));
+                validatePreset(preset);
                 files = ENVIRONMENT_PRESETS[preset];
                 path = CUBEMAP_ROOT;
             }
             return { files, preset, encoding, path, extensions };
         });
         const files = pick(adjustedOptions, 'files');
-        const resultOptions = computed(() => {
-            const { files } = adjustedOptions();
-            const multiFile = Array.isArray(files);
-            const isCubeMap = multiFile && files.length === 6;
-            const isGainmain = multiFile && files.length === 3 && files.some((file) => file.endsWith('json'));
-            const firstEntry = multiFile ? files[0] : files;
-            const extension = isCubeMap
-                ? 'cube'
-                : isGainmain
-                    ? 'webp'
-                    : firstEntry.startsWith('data:application/exr')
-                        ? 'exr'
-                        : firstEntry.startsWith('data:application/hdr')
-                            ? 'hdr'
-                            : firstEntry.startsWith('data:image/jpeg')
-                                ? 'jpg'
-                                : firstEntry.split('.').pop()?.split('?')?.shift()?.toLowerCase();
-            return { multiFile, extension, isCubeMap };
-        });
-        const loader = computed(() => {
-            const { extension } = resultOptions();
-            const loader = extension === 'cube'
-                ? CubeTextureLoader
-                : extension === 'hdr'
-                    ? RGBELoader
-                    : extension === 'exr'
-                        ? EXRLoader
-                        : extension === 'jpg' || extension === 'jpeg'
-                            ? HDRJPGLoader
-                            : extension === 'webp'
-                                ? GainMapLoader
-                                : null;
-            if (!loader) {
-                throw new Error('injectEnvironment: Unrecognized file extension: ' + extension);
-            }
-            return loader;
-        });
+        const multiFile = computed(() => Array.isArray(files()));
+        const resultOptions = computed(() => getExtension(files()));
+        const extension = pick(resultOptions, 'extension');
+        const loader = computed(() => getLoader(extension()));
         const store = injectStore();
         const gl = store.select('gl');
         const texture = signal(null);
         effect(() => {
-            const [{ extension, multiFile }, _files] = [untracked(resultOptions), files()];
-            if (extension !== 'webp' && extension !== 'jpg' && extension !== 'jpeg')
+            const [_extension, _multiFile, _files] = [untracked(extension), untracked(multiFile), files()];
+            if (_extension !== 'webp' && _extension !== 'jpg' && _extension !== 'jpeg')
                 return;
             gl().domElement.addEventListener('webglcontextlost', () => {
                 // @ts-expect-error - files is correctly passed
@@ -1290,13 +1206,14 @@ function injectEnvironment(options = () => ({}), { injector } = {}) {
             if (!loaderResult)
                 return;
             untracked(() => {
-                const { multiFile, extension, isCubeMap } = resultOptions();
+                const { extension, isCubeMap } = resultOptions();
+                const _multiFile = multiFile();
                 const { encoding } = adjustedOptions();
                 // @ts-expect-error - ensure textureResult is a Texture or CubeTexture
-                let textureResult = (multiFile ? loaderResult[0] : loaderResult);
+                let textureResult = (_multiFile ? loaderResult[0] : loaderResult);
                 // NOTE: racing condition, we can skip this
                 //  we just said above that if multiFile is false, it is a single Texture
-                if (!multiFile && Array.isArray(textureResult) && textureResult[0] instanceof CubeTexture) {
+                if (!_multiFile && Array.isArray(textureResult) && textureResult[0] instanceof CubeTexture) {
                     return;
                 }
                 if (!(textureResult instanceof CubeTexture) &&
@@ -1314,6 +1231,120 @@ function injectEnvironment(options = () => ({}), { injector } = {}) {
         return texture.asReadonly();
     });
 }
+injectEnvironment.preload = (options = () => ({})) => {
+    const _options = options();
+    let { files, path } = _options;
+    const { preset, extensions } = _options;
+    if (files == null) {
+        files = defaultFiles;
+    }
+    if (path == null) {
+        path = '';
+    }
+    if (preset) {
+        validatePreset(preset);
+        files = ENVIRONMENT_PRESETS[preset];
+        path = CUBEMAP_ROOT;
+    }
+    const { extension } = getExtension(files);
+    if (extension === 'webp' || extension === 'jpg' || extension === 'jpeg') {
+        throw new Error('injectEnvironment: Preloading gainmaps is not supported');
+    }
+    const loader = getLoader(extension);
+    if (!loader)
+        throw new Error('injectEnvironment: Unrecognized file extension: ' + files);
+    injectLoader.preload(() => loader, 
+    // @ts-expect-error - files is correctly passed
+    () => (Array.isArray(files) ? [files] : files), (loader) => {
+        loader.setPath?.(path);
+        if (extensions)
+            extensions(loader);
+    });
+};
+injectEnvironment.clear = (clearOptions) => {
+    const options = { files: defaultFiles, ...clearOptions };
+    let { files } = options;
+    const preset = options.preset;
+    if (preset) {
+        validatePreset(preset);
+        files = ENVIRONMENT_PRESETS[preset];
+    }
+    injectLoader.clear(files);
+};
+function validatePreset(preset) {
+    if (!(preset in ENVIRONMENT_PRESETS))
+        throw new Error('Preset must be one of: ' + Object.keys(ENVIRONMENT_PRESETS).join(', '));
+}
+function getExtension(files) {
+    const isCubeMap = Array.isArray(files) && files.length === 6;
+    const isGainmap = Array.isArray(files) && files.length === 3 && files.some((file) => file.endsWith('json'));
+    const firstEntry = Array.isArray(files) ? files[0] : files;
+    // Everything else
+    const extension = isCubeMap
+        ? 'cube'
+        : isGainmap
+            ? 'webp'
+            : firstEntry.startsWith('data:application/exr')
+                ? 'exr'
+                : firstEntry.startsWith('data:application/hdr')
+                    ? 'hdr'
+                    : firstEntry.startsWith('data:image/jpeg')
+                        ? 'jpg'
+                        : firstEntry.split('.').pop()?.split('?')?.shift()?.toLowerCase();
+    return { extension, isCubeMap, isGainmap };
+}
+function getLoader(extension) {
+    const loader = extension === 'cube'
+        ? CubeTextureLoader
+        : extension === 'hdr'
+            ? RGBELoader
+            : extension === 'exr'
+                ? EXRLoader
+                : extension === 'jpg' || extension === 'jpeg'
+                    ? HDRJPGLoader
+                    : extension === 'webp'
+                        ? GainMapLoader
+                        : null;
+    if (!loader) {
+        throw new Error('injectEnvironment: Unrecognized file extension: ' + extension);
+    }
+    return loader;
+}
+
+function resolveScene(scene) {
+    return is.ref(scene) ? scene.nativeElement : scene;
+}
+function setEnvProps(background, scene, defaultScene, texture, sceneProps = {}) {
+    sceneProps.backgroundBlurriness ??= sceneProps.blur ?? 0;
+    sceneProps.backgroundIntensity ??= 1;
+    // @ts-expect-error - it's ok, we're sending through applyProps
+    sceneProps.backgroundRotation ??= [0, 0, 0];
+    sceneProps.environmentIntensity ??= 1;
+    // @ts-expect-error - it's ok, we're sending through applyProps
+    sceneProps.environmentRotation ??= [0, 0, 0];
+    const target = resolveScene(scene || defaultScene);
+    const oldbg = target.background;
+    const oldenv = target.environment;
+    const oldSceneProps = {
+        backgroundBlurriness: target.backgroundBlurriness,
+        backgroundIntensity: target.backgroundIntensity,
+        backgroundRotation: target.backgroundRotation?.clone?.() ?? [0, 0, 0],
+        environmentIntensity: target.environmentIntensity,
+        environmentRotation: target.environmentRotation?.clone?.() ?? [0, 0, 0],
+    };
+    if (background !== 'only')
+        target.environment = texture;
+    if (background)
+        target.background = texture;
+    applyProps(target, sceneProps);
+    return () => {
+        if (background !== 'only')
+            target.environment = oldenv;
+        if (background)
+            target.background = oldbg;
+        applyProps(target, oldSceneProps);
+    };
+}
 const defaultBackground = {
     background: false,
 };
@@ -1321,10 +1352,10 @@ class NgtsEnvironmentMap {
     constructor() {
         this.options = input(defaultBackground, { transform: mergeInputs(defaultBackground) });
         this.envSet = output();
-        this.autoEffect = injectAutoEffect();
-        this.store = injectStore();
-        this.defaultScene = this.store.select('scene');
-        this.envConfig = computed(() => {
+        const store = injectStore();
+        const defaultScene = store.select('scene');
+        const _map = pick(this.options, 'map');
+        const _envConfig = computed(() => {
             const { background = false, scene, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, } = this.options();
             return {
                 background,
@@ -1337,23 +1368,20 @@ class NgtsEnvironmentMap {
                 environmentRotation,
             };
         });
-        this.map = pick(this.options, 'map');
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const map = this.map();
-                if (!map)
-                    return;
-                const { background = false, scene, ...config } = this.envConfig();
-                const cleanup = setEnvProps(background, scene, this.defaultScene(), map, config);
-                this.envSet.emit();
-                return () => cleanup();
-            });
+        effect((onCleanup) => {
+            const map = _map();
+            if (!map)
+                return;
+            const { background = false, scene, ...config } = _envConfig();
+            const cleanup = setEnvProps(background, scene, defaultScene(), map, config);
+            this.envSet.emit();
+            onCleanup(() => cleanup());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEnvironmentMap, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsEnvironmentMap, isStandalone: true, selector: "ngts-environment-map", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { envSet: "envSet" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEnvironmentMap, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtsEnvironmentMap, isStandalone: true, selector: "ngts-environment-map", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { envSet: "envSet" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEnvironmentMap, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEnvironmentMap, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: 'ngts-environment-map' }]
         }], ctorParameters: () => [] });
@@ -1361,10 +1389,8 @@ class NgtsEnvironmentCube {
     constructor() {
         this.options = input(defaultBackground, { transform: mergeInputs(defaultBackground) });
         this.envSet = output();
-        this.autoEffect = injectAutoEffect();
         this.store = injectStore();
         this.defaultScene = this.store.select('scene');
-        this.injector = inject(Injector);
         this.envConfig = computed(() => {
             const { background = false, scene, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, } = this.options();
             return {
@@ -1378,23 +1404,21 @@ class NgtsEnvironmentCube {
                 environmentRotation,
             };
         });
-        afterNextRender(() => {
-            const _texture = injectEnvironment(this.options, { injector: this.injector });
-            this.autoEffect(() => {
-                const texture = _texture();
-                if (!texture)
-                    return;
-                const { background = false, scene, ...config } = this.envConfig();
-                const cleanup = setEnvProps(background, scene, this.defaultScene(), texture, config);
-                this.envSet.emit();
-                return () => cleanup();
-            });
+        const _texture = injectEnvironment(this.options);
+        effect((onCleanup) => {
+            const texture = _texture();
+            if (!texture)
+                return;
+            const { background = false, scene, ...config } = this.envConfig();
+            const cleanup = setEnvProps(background, scene, this.defaultScene(), texture, config);
+            this.envSet.emit();
+            onCleanup(() => cleanup());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEnvironmentCube, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsEnvironmentCube, isStandalone: true, selector: "ngts-environment-cube", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { envSet: "envSet" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEnvironmentCube, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtsEnvironmentCube, isStandalone: true, selector: "ngts-environment-cube", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { envSet: "envSet" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEnvironmentCube, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEnvironmentCube, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: 'ngts-environment-cube' }]
         }], ctorParameters: () => [] });
@@ -1410,7 +1434,7 @@ class NgtsEnvironmentPortal {
         this.options = input(this.defaultOptions, { transform: mergeInputs(this.defaultOptions) });
         this.content = input.required();
         this.envSet = output();
-        this.autoEffect = injectAutoEffect();
+        this.injector = inject(Injector);
         this.store = injectStore();
         this.defaultScene = this.store.select('scene');
         this.gl = this.store.select('gl');
@@ -1439,14 +1463,13 @@ class NgtsEnvironmentPortal {
         this.cameraArgs = computed(() => [this.near(), this.far(), this.fbo()]);
         this.virtualScene = prepare(new Scene());
         extend({ CubeCamera });
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const [files, preset, map] = [this.files(), this.preset(), this.map()];
-                // NOTE: when there's none of this, we don't render cube or map so we need to setEnv here
-                if (!!files || !!preset || !!map)
-                    return;
-                return this.setPortalEnv();
-            });
+        effect((onCleanup) => {
+            const [files, preset, map] = [this.files(), this.preset(), this.map()];
+            // NOTE: when there's none of this, we don't render cube or map so we need to setEnv here
+            if (!!files || !!preset || !!map)
+                return;
+            const cleanup = this.setPortalEnv();
+            onCleanup(() => cleanup?.());
         });
         let count = 1;
         injectBeforeRender(() => {
@@ -1459,14 +1482,19 @@ class NgtsEnvironmentPortal {
                 }
             }
         });
+        inject(DestroyRef).onDestroy(() => {
+            if (this.setEnvEffectRef)
+                this.setEnvEffectRef.destroy();
+        });
     }
     // NOTE: we use onEnvSet here to ensure that EnvironmentCube or EnvironmentMap sets the env before the portal
     onEnvSet() {
         if (this.setEnvEffectRef)
             this.setEnvEffectRef.destroy();
-        this.setEnvEffectRef = this.autoEffect(() => {
-            return this.setPortalEnv();
-        }, { manualCleanup: true });
+        this.setEnvEffectRef = effect((onCleanup) => {
+            const cleanup = this.setPortalEnv();
+            onCleanup(() => cleanup?.());
+        }, { manualCleanup: true, injector: this.injector });
     }
     setPortalEnv() {
         const camera = this.cameraRef();
@@ -1486,8 +1514,8 @@ class NgtsEnvironmentPortal {
         this.envSet.emit();
         return cleanup;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEnvironmentPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsEnvironmentPortal, isStandalone: true, selector: "ngts-environment-portal", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { envSet: "envSet" }, viewQueries: [{ propertyName: "cameraRef", first: true, predicate: ["cubeCamera"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEnvironmentPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsEnvironmentPortal, isStandalone: true, selector: "ngts-environment-portal", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { envSet: "envSet" }, viewQueries: [{ propertyName: "cameraRef", first: true, predicate: ["cubeCamera"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-portal [container]="virtualScene">
 			<ng-template portalContent let-injector="injector" let-container="container">
 				<ng-container
@@ -1507,7 +1535,7 @@ class NgtsEnvironmentPortal {
 		</ngt-portal>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtsEnvironmentCube, selector: "ngts-environment-cube", inputs: ["options"], outputs: ["envSet"] }, { kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map", inputs: ["options"], outputs: ["envSet"] }, { kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[portalContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEnvironmentPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEnvironmentPortal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-environment-portal',
@@ -1540,33 +1568,25 @@ class NgtsEnvironmentGround {
     constructor() {
         this.options = input({});
         this.envSet = output();
-        this.args = signal([null]);
+        this.defaultTexture = injectEnvironment(this.options);
         this.height = computed(() => this.options().ground?.height);
         this.radius = computed(() => this.options().ground?.radius);
         this.scale = computed(() => this.options().ground?.scale ?? 1000);
+        this.args = computed(() => [this.options().map || this.defaultTexture()]);
         this.envMapOptions = computed(() => {
             const { map: _, ...options } = this.options();
             const [map] = this.args();
             return Object.assign(options, { map });
         });
         extend({ GroundProjectedEnv });
-        const injector = inject(Injector);
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            const defaultTexture = injectEnvironment(this.options, { injector });
-            const texture = computed(() => this.options().map || defaultTexture());
-            autoEffect(() => {
-                this.args.set([texture()]);
-            }, { allowSignalWrites: true });
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEnvironmentGround, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsEnvironmentGround, isStandalone: true, selector: "ngts-environment-ground", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { envSet: "envSet" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEnvironmentGround, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtsEnvironmentGround, isStandalone: true, selector: "ngts-environment-ground", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { envSet: "envSet" }, ngImport: i0, template: `
 		<ngts-environment-map [options]="envMapOptions()" (envSet)="envSet.emit()" />
 		<ngt-ground-projected-env *args="args()" [scale]="scale()" [height]="height()" [radius]="radius()" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map", inputs: ["options"], outputs: ["envSet"] }, { kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEnvironmentGround, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEnvironmentGround, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-environment-ground',
@@ -1586,8 +1606,8 @@ class NgtsEnvironment {
         this.content = contentChild(TemplateRef);
         this.envSet = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEnvironment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsEnvironment, isStandalone: true, selector: "ngts-environment", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { envSet: "envSet" }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEnvironment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsEnvironment, isStandalone: true, selector: "ngts-environment", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { envSet: "envSet" }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
 		@if (options().ground) {
 			<ngts-environment-ground [options]="options()" (envSet)="envSet.emit()" />
 		} @else if (options().map) {
@@ -1599,7 +1619,7 @@ class NgtsEnvironment {
 		}
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtsEnvironmentCube, selector: "ngts-environment-cube", inputs: ["options"], outputs: ["envSet"] }, { kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map", inputs: ["options"], outputs: ["envSet"] }, { kind: "component", type: NgtsEnvironmentPortal, selector: "ngts-environment-portal", inputs: ["options", "content"], outputs: ["envSet"] }, { kind: "component", type: NgtsEnvironmentGround, selector: "ngts-environment-ground", inputs: ["options"], outputs: ["envSet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsEnvironment, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsEnvironment, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-environment',
@@ -1660,8 +1680,8 @@ class NgtsFloat {
             container.updateMatrix();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsFloat, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsFloat, isStandalone: true, selector: "ngts-float", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "floatRef", first: true, predicate: ["float"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsFloat, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsFloat, isStandalone: true, selector: "ngts-float", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "floatRef", first: true, predicate: ["float"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group [parameters]="parameters()">
 			<ngt-group #float [matrixAutoUpdate]="false">
 				<ng-content />
@@ -1669,7 +1689,7 @@ class NgtsFloat {
 		</ngt-group>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsFloat, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsFloat, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-float',
@@ -1712,26 +1732,23 @@ class NgtsLightformer {
         this.meshRef = viewChild.required('mesh');
         this.defaultMaterialRef = viewChild('defaultMaterial');
         extend({ Mesh, MeshBasicMaterial, RingGeometry, PlaneGeometry });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const material = this.defaultMaterialRef()?.nativeElement;
-                if (material) {
-                    applyProps(material, { color: this.color() });
-                    material.color.multiplyScalar(this.intensity());
-                }
-            });
-            autoEffect(() => {
-                const target = this.target();
-                if (!target)
-                    return;
-                const mesh = this.meshRef().nativeElement;
-                mesh.lookAt(target);
-            });
+        effect(() => {
+            const material = this.defaultMaterialRef()?.nativeElement;
+            if (!material)
+                return;
+            applyProps(material, { color: this.color() });
+            material.color.multiplyScalar(this.intensity());
+        });
+        effect(() => {
+            const target = this.target();
+            if (!target)
+                return;
+            const mesh = this.meshRef().nativeElement;
+            mesh.lookAt(target);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsLightformer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsLightformer, isStandalone: true, selector: "ngts-lightformer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }, { propertyName: "defaultMaterialRef", first: true, predicate: ["defaultMaterial"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsLightformer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsLightformer, isStandalone: true, selector: "ngts-lightformer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }, { propertyName: "defaultMaterialRef", first: true, predicate: ["defaultMaterial"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-mesh #mesh [scale]="fixedScale()" [parameters]="parameters()">
 			<ng-content select="[data-lightformer-geometry]">
 				@switch (form()) {
@@ -1754,7 +1771,7 @@ class NgtsLightformer {
 		</ngt-mesh>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsLightformer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsLightformer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-lightformer',
@@ -1813,22 +1830,19 @@ class NgtsMask {
             };
         });
         extend({ Mesh });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const [mesh, spread] = [this.meshRef().nativeElement, this.spread()];
-                Object.assign(mesh.material, spread);
-            });
+        effect(() => {
+            const [mesh, spread] = [this.meshRef().nativeElement, this.spread()];
+            Object.assign(mesh.material, spread);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMask, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsMask, isStandalone: true, selector: "ngts-mask", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsMask, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsMask, isStandalone: true, selector: "ngts-mask", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-mesh #mesh [renderOrder]="-id()" [parameters]="parameters()">
 			<ng-content />
 		</ngt-mesh>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMask, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsMask, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mask',
@@ -1904,17 +1918,15 @@ class NgtsMatcapTexture {
     constructor() {
         this.matcapTexture = input();
         this.matcapTextureLoaded = output();
-        this.injector = inject(Injector);
         this.template = inject(TemplateRef);
         this.vcr = inject(ViewContainerRef);
         this.id = computed(() => this.matcapTexture()?.id ?? 0);
         this.format = computed(() => this.matcapTexture()?.format ?? 1024);
+        const { texture } = injectMatcapTexture(this.id, {
+            format: this.format,
+            onLoad: this.matcapTextureLoaded.emit.bind(this.matcapTextureLoaded),
+        });
         afterNextRender(() => {
-            const { texture } = injectMatcapTexture(this.id, {
-                format: this.format,
-                onLoad: this.matcapTextureLoaded.emit.bind(this.matcapTextureLoaded),
-                injector: this.injector,
-            });
             untracked(() => {
                 this.ref = this.vcr.createEmbeddedView(this.template, { $implicit: texture });
                 this.ref.detectChanges();
@@ -1927,10 +1939,10 @@ class NgtsMatcapTexture {
     static ngTemplateContextGuard(_, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMatcapTexture, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsMatcapTexture, isStandalone: true, selector: "ng-template[matcapTexture]", inputs: { matcapTexture: { classPropertyName: "matcapTexture", publicName: "matcapTexture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { matcapTextureLoaded: "matcapTextureLoaded" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsMatcapTexture, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtsMatcapTexture, isStandalone: true, selector: "ng-template[matcapTexture]", inputs: { matcapTexture: { classPropertyName: "matcapTexture", publicName: "matcapTexture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { matcapTextureLoaded: "matcapTextureLoaded" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMatcapTexture, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsMatcapTexture, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[matcapTexture]', standalone: true }]
         }], ctorParameters: () => [] });
@@ -1977,7 +1989,6 @@ class NgtsNormalTexture {
     constructor() {
         this.normalTexture = input();
         this.normalTextureLoaded = output();
-        this.injector = inject(Injector);
         this.template = inject(TemplateRef);
         this.vcr = inject(ViewContainerRef);
         this.id = computed(() => this.normalTexture()?.id ?? 0);
@@ -1985,12 +1996,11 @@ class NgtsNormalTexture {
             const { id: _, ...settings } = this.normalTexture() || {};
             return settings;
         });
+        const { texture } = injectNormalTexture(this.id, {
+            settings: this.settings,
+            onLoad: this.normalTextureLoaded.emit.bind(this.normalTextureLoaded),
+        });
         afterNextRender(() => {
-            const { texture } = injectNormalTexture(this.id, {
-                settings: this.settings,
-                onLoad: this.normalTextureLoaded.emit.bind(this.normalTextureLoaded),
-                injector: this.injector,
-            });
             untracked(() => {
                 this.ref = this.vcr.createEmbeddedView(this.template, { $implicit: texture });
                 this.ref.detectChanges();
@@ -2003,10 +2013,10 @@ class NgtsNormalTexture {
     static ngTemplateContextGuard(_, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsNormalTexture, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsNormalTexture, isStandalone: true, selector: "ng-template[normalTexture]", inputs: { normalTexture: { classPropertyName: "normalTexture", publicName: "normalTexture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { normalTextureLoaded: "normalTextureLoaded" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsNormalTexture, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtsNormalTexture, isStandalone: true, selector: "ng-template[normalTexture]", inputs: { normalTexture: { classPropertyName: "normalTexture", publicName: "normalTexture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { normalTextureLoaded: "normalTextureLoaded" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsNormalTexture, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsNormalTexture, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[normalTexture]', standalone: true }]
         }], ctorParameters: () => [] });
@@ -2045,13 +2055,10 @@ class NgtsRandomizedLights {
         this.far = pick(this.options, 'far');
         this.cameraArgs = computed(() => [-this.size(), this.size(), this.size(), -this.size(), this.near(), this.far()]);
         extend({ Group, DirectionalLight, OrthographicCamera, Vector2 });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const lights = this.lightsRef().nativeElement;
-                this.accumulativeShadows.lightsMap.set(lights.uuid, this.update.bind(this));
-                return () => this.accumulativeShadows.lightsMap.delete(lights.uuid);
-            });
+        effect((onCleanup) => {
+            const lights = this.lightsRef().nativeElement;
+            this.accumulativeShadows.lightsMap.set(lights.uuid, this.update.bind(this));
+            onCleanup(() => this.accumulativeShadows.lightsMap.delete(lights.uuid));
         });
     }
     update() {
@@ -2072,8 +2079,8 @@ class NgtsRandomizedLights {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRandomizedLights, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsRandomizedLights, isStandalone: true, selector: "ngts-randomized-lights", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lightsRef", first: true, predicate: ["lights"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsRandomizedLights, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsRandomizedLights, isStandalone: true, selector: "ngts-randomized-lights", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lightsRef", first: true, predicate: ["lights"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #lights [parameters]="parameters()">
 			@for (i of count(); track $index) {
 				<ngt-directional-light [castShadow]="castShadow()" [intensity]="intensity() / amount()">
@@ -2085,7 +2092,7 @@ class NgtsRandomizedLights {
 		</ngt-group>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRandomizedLights, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsRandomizedLights, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-randomized-lights',
@@ -2115,16 +2122,14 @@ class NgtsRenderTextureContainer {
         this.frames = input.required();
         this.injector = input.required();
         this.store = injectStore();
-        injectAutoEffect()(() => {
-            // track
-            this.store.state();
-            const renderPriority = this.renderPriority();
+        effect((onCleanup) => {
+            const [renderPriority, { internal }] = [this.renderPriority(), this.store.state()];
             let count = 0;
             let oldAutoClear;
             let oldXrEnabled;
             let oldRenderTarget;
             let oldIsPresenting;
-            const sub = injectBeforeRender(({ gl, scene, camera }) => {
+            const cleanup = internal.subscribe(({ gl, scene, camera }) => {
                 const [fbo, frames] = [this.fbo(), this.frames()];
                 // NOTE: render  the frames ^ 2
                 //  due to some race condition, we want to render double the frames here.
@@ -2144,14 +2149,16 @@ class NgtsRenderTextureContainer {
                     gl.xr.isPresenting = oldIsPresenting;
                     count++;
                 }
-            }, { priority: renderPriority, injector: this.injector() });
-            return () => sub();
+            }, renderPriority, this.store);
+            onCleanup(() => {
+                cleanup();
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRenderTextureContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsRenderTextureContainer, isStandalone: true, selector: "[ngtsRenderTextureContainer]", inputs: { fbo: { classPropertyName: "fbo", publicName: "fbo", isSignal: true, isRequired: true, transformFunction: null }, renderPriority: { classPropertyName: "renderPriority", publicName: "renderPriority", isSignal: true, isRequired: true, transformFunction: null }, frames: { classPropertyName: "frames", publicName: "frames", isSignal: true, isRequired: true, transformFunction: null }, injector: { classPropertyName: "injector", publicName: "injector", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsRenderTextureContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtsRenderTextureContainer, isStandalone: true, selector: "[ngtsRenderTextureContainer]", inputs: { fbo: { classPropertyName: "fbo", publicName: "fbo", isSignal: true, isRequired: true, transformFunction: null }, renderPriority: { classPropertyName: "renderPriority", publicName: "renderPriority", isSignal: true, isRequired: true, transformFunction: null }, frames: { classPropertyName: "frames", publicName: "frames", isSignal: true, isRequired: true, transformFunction: null }, injector: { classPropertyName: "injector", publicName: "injector", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRenderTextureContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsRenderTextureContainer, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: '[ngtsRenderTextureContainer]' }]
         }], ctorParameters: () => [] });
@@ -2168,10 +2175,10 @@ class NgtsRenderTextureContent {
     static ngTemplateContextGuard(_, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRenderTextureContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: NgtsRenderTextureContent, isStandalone: true, selector: "ng-template[renderTextureContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsRenderTextureContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: NgtsRenderTextureContent, isStandalone: true, selector: "ng-template[renderTextureContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRenderTextureContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsRenderTextureContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[renderTextureContent]', standalone: true }]
         }] });
@@ -2249,8 +2256,8 @@ class NgtsRenderTexture {
     onPointerOver() {
         /* noop */
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRenderTexture, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsRenderTexture, isStandalone: true, selector: "ngts-render-texture", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", first: true, predicate: NgtsRenderTextureContent, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsRenderTexture, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsRenderTexture, isStandalone: true, selector: "ngts-render-texture", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", first: true, predicate: NgtsRenderTextureContent, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
 		<ngt-portal [container]="virtualScene()" [state]="{ events: { compute: compute(), priority: eventPriority() } }">
 			<ng-template portalContent let-injector="injector" let-container="container">
 				<ng-container
@@ -2271,7 +2278,7 @@ class NgtsRenderTexture {
 		<ngt-primitive *args="[fbo().texture]" [attach]="attach()" [parameters]="parameters()" />
 	`, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"] }, { kind: "directive", type: NgtsRenderTextureContainer, selector: "[ngtsRenderTextureContainer]", inputs: ["fbo", "renderPriority", "frames", "injector"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[portalContent]" }, { kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsRenderTexture, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsRenderTexture, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-render-texture',
@@ -2349,8 +2356,8 @@ class NgtsSky {
         });
         this.sky = new Sky();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSky, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsSky, isStandalone: true, selector: "ngts-sky", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSky, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtsSky, isStandalone: true, selector: "ngts-sky", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[sky]" [parameters]="parameters()" [scale]="scale()">
 			<ngt-value attach="material.uniforms.mieCoefficient.value" [rawValue]="mieCoefficient()" />
 			<ngt-value attach="material.uniforms.mieDirectionalG.value" [rawValue]="mieDirectionalG()" />
@@ -2361,7 +2368,7 @@ class NgtsSky {
 		</ngt-primitive>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSky, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSky, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-sky',
@@ -2430,8 +2437,8 @@ class NgtsVolumetricMesh {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsVolumetricMesh, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsVolumetricMesh, isStandalone: true, selector: "ngts-volumetric-mesh", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsVolumetricMesh, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsVolumetricMesh, isStandalone: true, selector: "ngts-volumetric-mesh", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-mesh #mesh [geometry]="geometry()" [raycast]="null">
 			<ngt-primitive *args="[material]" attach="material">
 				<ngt-value attach="uniforms.opacity.value" [rawValue]="opacity()" />
@@ -2449,7 +2456,7 @@ class NgtsVolumetricMesh {
 		</ngt-mesh>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsVolumetricMesh, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsVolumetricMesh, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-volumetric-mesh',
@@ -2562,25 +2569,21 @@ class NgtsSpotLightShadowShader {
             uTime: { value: 0 },
         };
         extend({ Mesh, PlaneGeometry, MeshBasicMaterial });
-        const autoEffect = injectAutoEffect();
-        const injector = inject(Injector);
-        afterNextRender(() => {
-            injectSpotLightCommon(this.spotLight.spotLight, this.mesh, this.width, this.height, this.distance, injector);
-            autoEffect(() => {
-                this.uniforms.uShadowMap.value = this.map();
-            });
-            autoEffect(() => {
-                const fsQuad = this.fsQuad();
-                return () => {
-                    fsQuad.material.dispose();
-                    fsQuad.dispose();
-                };
+        injectSpotLightCommon(this.spotLight.spotLight, this.mesh, this.width, this.height, this.distance);
+        effect(() => {
+            this.uniforms.uShadowMap.value = this.map();
+        });
+        effect((onCleanup) => {
+            const fsQuad = this.fsQuad();
+            onCleanup(() => {
+                fsQuad.material.dispose();
+                fsQuad.dispose();
             });
-            autoEffect(() => {
-                const renderTarget = this.renderTarget();
-                return () => {
-                    renderTarget.dispose();
-                };
+        });
+        effect((onCleanup) => {
+            const renderTarget = this.renderTarget();
+            onCleanup(() => {
+                renderTarget.dispose();
             });
         });
         injectBeforeRender(({ gl, delta }) => {
@@ -2590,8 +2593,8 @@ class NgtsSpotLightShadowShader {
             gl.setRenderTarget(null);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSpotLightShadowShader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsSpotLightShadowShader, isStandalone: true, selector: "ngts-spot-light-shadow-shader", inputs: { shader: { classPropertyName: "shader", publicName: "shader", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mesh", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSpotLightShadowShader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsSpotLightShadowShader, isStandalone: true, selector: "ngts-spot-light-shadow-shader", inputs: { shader: { classPropertyName: "shader", publicName: "shader", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mesh", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-mesh #mesh [scale]="scale()" [castShadow]="true">
 			<ngt-plane-geometry />
 			<ngt-mesh-basic-material
@@ -2606,7 +2609,7 @@ class NgtsSpotLightShadowShader {
 		</ngt-mesh>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSpotLightShadowShader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSpotLightShadowShader, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-spot-light-shadow-shader',
@@ -2649,13 +2652,10 @@ class NgtsSpotLightShadowNoShader {
         this.height = pick(this.options, 'height');
         this.distance = pick(this.options, 'distance');
         extend({ Mesh, PlaneGeometry, MeshBasicMaterial });
-        const injector = inject(Injector);
-        afterNextRender(() => {
-            injectSpotLightCommon(this.spotLight.spotLight, this.mesh, this.width, this.height, this.distance, injector);
-        });
+        injectSpotLightCommon(this.spotLight.spotLight, this.mesh, this.width, this.height, this.distance);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSpotLightShadowNoShader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsSpotLightShadowNoShader, isStandalone: true, selector: "ngts-spot-light-shadow-no-shader", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mesh", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSpotLightShadowNoShader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsSpotLightShadowNoShader, isStandalone: true, selector: "ngts-spot-light-shadow-no-shader", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mesh", first: true, predicate: ["mesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-mesh #mesh [scale]="scale()" [castShadow]="true">
 			<ngt-plane-geometry />
 			<ngt-mesh-basic-material
@@ -2670,7 +2670,7 @@ class NgtsSpotLightShadowNoShader {
 		</ngt-mesh>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSpotLightShadowNoShader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSpotLightShadowNoShader, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-spot-light-shadow-no-shader',
@@ -2698,8 +2698,8 @@ class NgtsSpotLightShadow {
         this.shader = input();
         this.options = input(defaultSpotLightShadowOptions, { transform: mergeInputs(defaultSpotLightShadowOptions) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSpotLightShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsSpotLightShadow, isStandalone: true, selector: "ngts-spot-light-shadow", inputs: { shader: { classPropertyName: "shader", publicName: "shader", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSpotLightShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsSpotLightShadow, isStandalone: true, selector: "ngts-spot-light-shadow", inputs: { shader: { classPropertyName: "shader", publicName: "shader", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		@if (shader(); as shader) {
 			<ngts-spot-light-shadow-shader [shader]="shader" [options]="options()" />
 		} @else {
@@ -2707,7 +2707,7 @@ class NgtsSpotLightShadow {
 		}
 	`, isInline: true, dependencies: [{ kind: "component", type: NgtsSpotLightShadowShader, selector: "ngts-spot-light-shadow-shader", inputs: ["shader", "options"] }, { kind: "component", type: NgtsSpotLightShadowNoShader, selector: "ngts-spot-light-shadow-no-shader", inputs: ["options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSpotLightShadow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSpotLightShadow, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-spot-light-shadow',
@@ -2770,8 +2770,8 @@ class NgtsSpotLight {
         this.volumetric = pick(this.options, 'volumetric');
         extend({ Group, SpotLight });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSpotLight, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsSpotLight, isStandalone: true, selector: "ngts-spot-light", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "spotLight", first: true, predicate: ["spotLight"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSpotLight, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsSpotLight, isStandalone: true, selector: "ngts-spot-light", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "spotLight", first: true, predicate: ["spotLight"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group>
 			<ngt-spot-light
 				#spotLight
@@ -2793,7 +2793,7 @@ class NgtsSpotLight {
 		</ngt-group>
 	`, isInline: true, dependencies: [{ kind: "component", type: NgtsVolumetricMesh, selector: "ngts-volumetric-mesh", inputs: ["options"] }, { kind: "component", type: NgtsHelper, selector: "ngts-helper", inputs: ["type", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSpotLight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSpotLight, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-spot-light',
@@ -2854,20 +2854,17 @@ class NgtsStageRefit {
     constructor() {
         this.radius = input.required();
         this.adjustCamera = input.required();
-        const autoEffect = injectAutoEffect();
         const bounds = inject(NgtsBounds);
-        afterNextRender(() => {
-            autoEffect(() => {
-                const [, adjustCamera] = [this.radius(), this.adjustCamera()];
-                if (adjustCamera)
-                    bounds.refresh().clip().fit();
-            });
+        effect(() => {
+            const [, adjustCamera] = [this.radius(), this.adjustCamera()];
+            if (adjustCamera)
+                bounds.refresh().clip().fit();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsStageRefit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsStageRefit, isStandalone: true, selector: "ngts-stage-refit", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: true, transformFunction: null }, adjustCamera: { classPropertyName: "adjustCamera", publicName: "adjustCamera", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsStageRefit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtsStageRefit, isStandalone: true, selector: "ngts-stage-refit", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: true, transformFunction: null }, adjustCamera: { classPropertyName: "adjustCamera", publicName: "adjustCamera", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsStageRefit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsStageRefit, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: 'ngts-stage-refit' }]
         }], ctorParameters: () => [] });
@@ -2947,8 +2944,8 @@ class NgtsStage {
         this.dims.set({ radius: boundingSphere.radius, width, height, depth });
         this.centered.emit($event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsStage, isStandalone: true, selector: "ngts-stage", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { centered: "centered" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsStage, isStandalone: true, selector: "ngts-stage", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { centered: "centered" }, ngImport: i0, template: `
 		<ngt-ambient-light [intensity]="intensity() / 3" />
 		<ngt-spot-light
 			[penumbra]="1"
@@ -2989,7 +2986,7 @@ class NgtsStage {
 		}
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtsBounds, selector: "ngts-bounds", inputs: ["options"] }, { kind: "directive", type: NgtsStageRefit, selector: "ngts-stage-refit", inputs: ["radius", "adjustCamera"] }, { kind: "component", type: NgtsCenter, selector: "ngts-center", inputs: ["options"], outputs: ["centered"] }, { kind: "component", type: NgtsContactShadows, selector: "ngts-contact-shadows", inputs: ["options"] }, { kind: "component", type: NgtsAccumulativeShadows, selector: "ngts-accumulative-shadows", inputs: ["options"] }, { kind: "component", type: NgtsEnvironment, selector: "ngts-environment", inputs: ["options"], outputs: ["envSet"] }, { kind: "component", type: NgtsRandomizedLights, selector: "ngts-randomized-lights", inputs: ["options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsStage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsStage, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-stage',