angular-three-soba 1.14.0 → 2.0.0-beta.3

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

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, Component, CUSTOM_ELEMENTS_SCHEMA, Input, EventEmitter, Output, TemplateRef, ContentChild, ChangeDetectorRef } from '@angular/core';
-import { extend, NgtStore, getLocalState, NgtRxStore, injectNgtRef, NgtArgs, NgtRepeat, is, injectBeforeRender, NgtPush, injectNgtDestroy, injectNgtLoader, startWithUndefined, prepare, NgtPortal, NgtPortalContent, createRunInContext, checkUpdate } from 'angular-three';
-import { DiscardMaterial, SoftShadowMaterial, CausticsProjectionMaterial, CausticsMaterial, shaderMaterial, SpotLightMaterial, StarFieldMaterial } from 'angular-three-soba/shaders';
-import { Subject, combineLatest, switchMap, map, isObservable, of, debounceTime, takeUntil, startWith, withLatestFrom } from 'rxjs';
+import { InjectionToken, inject, computed, untracked, effect, Component, CUSTOM_ELEMENTS_SCHEMA, Input, EventEmitter, Output, Directive, runInInjectionContext, ChangeDetectorRef, DestroyRef, TemplateRef, ContentChild, isSignal } from '@angular/core';
+import { extend, NgtSignalStore, NgtStore, injectNgtRef, requestAnimationInInjectionContext, injectBeforeRender, getLocalState, NgtArgs, NgtRepeat, is, assertInjectionContext, injectNgtLoader, safeDetectChanges, prepare, NgtPortal, NgtPortalContent, checkUpdate, createSignal } from 'angular-three';
+import { DiscardMaterial, SoftShadowMaterial, CausticsProjectionMaterial, CausticsMaterial, SparklesMaterial, SpotLightMaterial, StarFieldMaterial } from 'angular-three-soba/shaders';
 import * as THREE from 'three';
-import { Group, Mesh, PlaneGeometry, DirectionalLight, OrthographicCamera, Vector2, Scene, LineBasicMaterial, Box3, Vector3, Sphere, MeshStandardMaterial, MeshBasicMaterial, CubeTextureLoader, CubeReflectionMapping, EquirectangularReflectionMapping, sRGBEncoding, LinearEncoding, CubeCamera, HalfFloatType, Points, BufferGeometry, BufferAttribute, Vector4, Color, MathUtils, SpotLight, SpotLightHelper, AmbientLight, PointLight, Spherical } from 'three';
+import { Group, Mesh, PlaneGeometry, DirectionalLight, OrthographicCamera, Vector2, Scene, LineBasicMaterial, Box3, Vector3, Sphere, MeshStandardMaterial, MeshBasicMaterial, CubeTextureLoader, CubeReflectionMapping, EquirectangularReflectionMapping, sRGBEncoding, LinearEncoding, CubeCamera, Points, BufferGeometry, BufferAttribute, Vector4, Color, MathUtils, SpotLight, SpotLightHelper, AmbientLight, PointLight } from 'three';
 import { SimplexNoise, FullScreenQuad, HorizontalBlurShader, VerticalBlurShader, RGBELoader, GroundProjectedEnv, Sky } from 'three-stdlib';
 import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 import { NgtsEdges, NgtsBillboard } from 'angular-three-soba/abstractions';
@@ -17,6 +16,7 @@ function isLight(object) {
 function isGeometry(object) {
     return !!object.geometry;
 }
+// Based on "Progressive Light Map Accumulator", by [zalo](https://github.com/zalo/)
 class ProgressiveLightMap {
     constructor(renderer, scene, res = 1024) {
         this.renderer = renderer;
@@ -32,11 +32,9 @@ class ProgressiveLightMap {
         const format = /(Android|iPad|iPhone|iPod)/g.test(navigator.userAgent) ? THREE.HalfFloatType : THREE.FloatType;
         this.progressiveLightMap1 = new THREE.WebGLRenderTarget(this.res, this.res, {
             type: format,
-            encoding: renderer.outputEncoding,
         });
         this.progressiveLightMap2 = new THREE.WebGLRenderTarget(this.res, this.res, {
             type: format,
-            encoding: renderer.outputEncoding,
         });
         // Inject some spicy new logic into a standard phong material
         this.discardMat = new DiscardMaterial();
@@ -59,6 +57,7 @@ class ProgressiveLightMap {
                     `\nvec3 texelOld = texture2D(previousShadowMap, vUv).rgb;
         gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/ averagingWindow);
       }`;
+            // Set the Previous Frame's Texture Buffer and Averaging Window
             // Set the Previous Frame's Texture Buffer and Averaging Window
             shader.uniforms['previousShadowMap'] = this.previousShadowMap;
             shader.uniforms['averagingWindow'] = this.averagingWindow;
@@ -119,100 +118,7 @@ class ProgressiveLightMap {
 
 extend({ SoftShadowMaterial, Group, Mesh, PlaneGeometry });
 const NGTS_ACCUMULATIVE_SHADOWS_API = new InjectionToken('NgtsAccumulativeShadows API');
-function accumulativeShadowsApiFactory(accumulativeShadows) {
-    const store = inject(NgtStore);
-    const api = {
-        lights: new Map(),
-        count: 0,
-        getMesh: () => accumulativeShadows.meshRef.nativeElement,
-        reset: () => {
-            accumulativeShadows.pLM.clear();
-            const material = api.getMesh().material;
-            material.opacity = 0;
-            material.alphaTest = 0;
-            api.count = 0;
-        },
-        update: (frames = 1) => {
-            // adapt the opacity blend ratio to the number of frames
-            const material = api.getMesh().material;
-            if (!api.temporal) {
-                material.opacity = accumulativeShadows.get('opacity');
-                material.alphaTest = accumulativeShadows.get('alphaTest');
-            }
-            else {
-                material.opacity = Math.min(accumulativeShadows.get('opacity'), material.opacity + accumulativeShadows.get('opacity') / api.blend);
-                material.alphaTest = Math.min(accumulativeShadows.get('alphaTest'), material.alphaTest + accumulativeShadows.get('alphaTest') / api.blend);
-            }
-            // switch accumulative lights on
-            accumulativeShadows.accumulativeShadowsRef.nativeElement.visible = true;
-            // collect scene lights and meshes
-            accumulativeShadows.pLM.prepare();
-            // update the lightmap and the accumulative lights
-            for (let i = 0; i < frames; i++) {
-                api.lights.forEach((light) => light.update());
-                accumulativeShadows.pLM.update(store.get('camera'), api.blend);
-            }
-            // switch lights off
-            accumulativeShadows.accumulativeShadowsRef.nativeElement.visible = false;
-            // restore lights and meshes
-            accumulativeShadows.pLM.finish();
-        },
-    };
-    Object.defineProperties(api, {
-        temporal: {
-            get: () => !!accumulativeShadows.get('temporal'),
-        },
-        frames: {
-            get: () => Math.max(2, accumulativeShadows.get('frames')),
-        },
-        blend: {
-            get: () => Math.max(2, accumulativeShadows.get('frames') === Infinity
-                ? accumulativeShadows.get('blend')
-                : accumulativeShadows.get('frames')),
-        },
-    });
-    const subject = new Subject();
-    accumulativeShadows.hold(accumulativeShadows.meshRef.$, (mesh) => {
-        accumulativeShadows.pLM.configure(mesh);
-        accumulativeShadows.hold(combineLatest([accumulativeShadows.select(), getLocalState(store.get('scene')).objects]), () => {
-            // reset internals, buffers, ...
-            api.reset();
-            // update lightmap
-            if (!api.temporal && api.frames !== Infinity)
-                api.update(api.blend);
-        });
-        accumulativeShadows.effect(subject, () => store.get('internal').subscribe(() => {
-            const limit = accumulativeShadows.get('limit');
-            if ((api.temporal || api.frames === Infinity) && api.count < api.frames && api.count < limit) {
-                api.update();
-                api.count++;
-            }
-        }));
-        subject.next();
-    });
-    return api;
-}
-class AccumulativeShadowsConsumer {
-    constructor() {
-        inject(NGTS_ACCUMULATIVE_SHADOWS_API);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AccumulativeShadowsConsumer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: AccumulativeShadowsConsumer, isStandalone: true, selector: "[ngtsAccumulativeShadowsConsumer]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AccumulativeShadowsConsumer, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ngtsAccumulativeShadowsConsumer]', standalone: true }]
-        }], ctorParameters: function () { return []; } });
-class NgtsAccumulativeShadows extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.nullTraverse = () => null;
-        this.Math = Math;
-        this.store = inject(NgtStore);
-        this.pLM = new ProgressiveLightMap(this.store.get('gl'), this.store.get('scene'), this.get('resolution'));
-        this.accumulativeShadowsRef = injectNgtRef();
-        this.meshRef = injectNgtRef();
-    }
+class NgtsAccumulativeShadows extends NgtSignalStore {
     /** How many frames it can render, more yields cleaner results but takes more time, 40 */
     set frames(frames) {
         this.set({ frames });
@@ -257,9 +163,18 @@ class NgtsAccumulativeShadows extends NgtRxStore {
     set toneMapped(toneMapped) {
         this.set({ toneMapped });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    #store;
+    #gl;
+    #scene;
+    #camera;
+    #resolution;
+    #temporal;
+    #blend;
+    #frames;
+    #opacity;
+    #alphaTest;
+    constructor() {
+        super({
             frames: 40,
             limit: Infinity,
             blend: 20,
@@ -270,34 +185,151 @@ class NgtsAccumulativeShadows extends NgtRxStore {
             colorBlend: 2,
             resolution: 1024,
             toneMapped: true,
+            temporal: false,
         });
+        this.nullTraverse = () => null;
+        this.Math = Math;
+        this.#store = inject(NgtStore);
+        this.#gl = this.#store.select('gl');
+        this.#scene = this.#store.select('scene');
+        this.#camera = this.#store.select('camera');
+        this.#resolution = this.select('resolution');
+        this.#temporal = this.select('temporal');
+        this.#blend = this.select('blend');
+        this.#frames = this.select('frames');
+        this.#opacity = this.select('opacity');
+        this.#alphaTest = this.select('alphaTest');
+        this.accumulativeShadowsScale = this.select('scale');
+        this.accumulativeShadowsToneMapped = this.select('toneMapped');
+        this.accumulativeShadowsColor = this.select('color');
+        this.accumulativeShadowsColorBlend = this.select('colorBlend');
+        this.meshRef = injectNgtRef();
+        this.accumulativeShadowsRef = injectNgtRef();
+        this.pLM = computed(() => new ProgressiveLightMap(untracked(this.#gl), untracked(this.#scene), this.#resolution()));
+        this.api = computed(() => {
+            const pLM = this.pLM();
+            const alphaTest = this.#alphaTest();
+            const opacity = this.#opacity();
+            const camera = this.#camera();
+            return {
+                lights: new Map(),
+                temporal: this.#temporal(),
+                frames: Math.max(2, this.#frames()),
+                blend: Math.max(2, this.#frames() === Infinity ? this.#blend() : this.#frames()),
+                count: 0,
+                getMesh: () => this.meshRef.nativeElement,
+                reset: () => {
+                    if (!this.meshRef.nativeElement)
+                        return;
+                    // Clear buffers, reset opacities, set frame count to 0
+                    pLM.clear();
+                    const material = this.meshRef.nativeElement.material;
+                    material.opacity = 0;
+                    material.alphaTest = 0;
+                    this.api().count = 0;
+                },
+                update: (frames = 1) => {
+                    if (!this.meshRef.nativeElement)
+                        return;
+                    // Adapt the opacity-blend ratio to the number of frames
+                    const material = this.meshRef.nativeElement.material;
+                    if (!this.api().temporal) {
+                        material.opacity = opacity;
+                        material.alphaTest = alphaTest;
+                    }
+                    else {
+                        material.opacity = Math.min(opacity, material.opacity + opacity / this.api().blend);
+                        material.alphaTest = Math.min(alphaTest, material.alphaTest + alphaTest / this.api().blend);
+                    }
+                    // Switch accumulative lights on
+                    this.accumulativeShadowsRef.nativeElement.visible = true;
+                    // Collect scene lights and meshes
+                    pLM.prepare();
+                    // Update the lightmap and the accumulative lights
+                    for (let i = 0; i < frames; i++) {
+                        this.api().lights.forEach((light) => light().update());
+                        pLM.update(camera, this.api().blend);
+                    }
+                    // Switch lights off
+                    this.accumulativeShadowsRef.nativeElement.visible = false;
+                    // Restore lights and meshes
+                    pLM.finish();
+                },
+            };
+        });
+        requestAnimationInInjectionContext(() => {
+            this.#configure();
+            this.#resetAndUpdate();
+        });
+        injectBeforeRender(this.#onBeforeRender.bind(this));
+    }
+    #onBeforeRender() {
+        const invalidate = this.#store.get('invalidate');
+        const limit = this.get('limit');
+        const api = this.api();
+        if ((api.temporal || api.frames === Infinity) && api.count < api.frames && api.count < limit) {
+            invalidate();
+            api.update();
+            api.count++;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsAccumulativeShadows, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    #configure() {
+        const trigger = computed(() => ({ pLM: this.pLM(), mesh: this.meshRef.nativeElement }));
+        effect(() => {
+            const { pLM, mesh } = trigger();
+            if (!mesh)
+                return;
+            pLM.configure(mesh);
+        });
+    }
+    #resetAndUpdate() {
+        const trigger = computed(() => ({
+            state: this.select()(),
+            objects: getLocalState(this.#store.get('scene')).objects(),
+            mesh: this.meshRef.nativeElement,
+        }));
+        effect(() => {
+            const { mesh } = trigger();
+            if (!mesh)
+                return;
+            const api = untracked(this.api);
+            // Reset internals, buffers, ...
+            api.reset();
+            // Update lightmap
+            if (!api.temporal && api.frames !== Infinity)
+                api.update(api.blend);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsAccumulativeShadows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsAccumulativeShadows, isStandalone: true, selector: "ngts-accumulative-shadows", inputs: { frames: "frames", blend: "blend", limit: "limit", scale: "scale", temporal: "temporal", opacity: "opacity", alphaTest: "alphaTest", color: "color", colorBlend: "colorBlend", resolution: "resolution", toneMapped: "toneMapped" }, providers: [
             {
                 provide: NGTS_ACCUMULATIVE_SHADOWS_API,
-                useFactory: accumulativeShadowsApiFactory,
+                useFactory: (shadows) => shadows.api,
                 deps: [NgtsAccumulativeShadows],
             },
         ], usesInheritance: true, ngImport: i0, template: `
         <ngt-group ngtCompound>
             <ngt-group [ref]="accumulativeShadowsRef" [traverse]="nullTraverse">
                 <ng-content />
-                <ng-container ngtsAccumulativeShadowsConsumer />
             </ngt-group>
-            <ngt-mesh [ref]="meshRef" [receiveShadow]="true" [scale]="get('scale')" [rotation]="[-Math.PI / 2, 0, 0]">
+            <ngt-mesh
+                [ref]="meshRef"
+                [receiveShadow]="true"
+                [scale]="accumulativeShadowsScale()"
+                [rotation]="[-Math.PI / 2, 0, 0]"
+            >
                 <ngt-plane-geometry />
                 <ngt-soft-shadow-material
                     [transparent]="true"
                     [depthWrite]="false"
-                    [color]="get('color')"
-                    [toneMapped]="get('toneMapped')"
-                    [blend]="get('colorBlend')"
-                    [map]="pLM.progressiveLightMap2.texture"
+                    [toneMapped]="accumulativeShadowsToneMapped()"
+                    [color]="accumulativeShadowsColor()"
+                    [blend]="accumulativeShadowsColorBlend()"
+                    [map]="pLM().progressiveLightMap2.texture"
                 />
             </ngt-mesh>
         </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: AccumulativeShadowsConsumer, selector: "[ngtsAccumulativeShadowsConsumer]" }] }); }
+    `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsAccumulativeShadows, decorators: [{
             type: Component,
@@ -308,32 +340,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
         <ngt-group ngtCompound>
             <ngt-group [ref]="accumulativeShadowsRef" [traverse]="nullTraverse">
                 <ng-content />
-                <ng-container ngtsAccumulativeShadowsConsumer />
             </ngt-group>
-            <ngt-mesh [ref]="meshRef" [receiveShadow]="true" [scale]="get('scale')" [rotation]="[-Math.PI / 2, 0, 0]">
+            <ngt-mesh
+                [ref]="meshRef"
+                [receiveShadow]="true"
+                [scale]="accumulativeShadowsScale()"
+                [rotation]="[-Math.PI / 2, 0, 0]"
+            >
                 <ngt-plane-geometry />
                 <ngt-soft-shadow-material
                     [transparent]="true"
                     [depthWrite]="false"
-                    [color]="get('color')"
-                    [toneMapped]="get('toneMapped')"
-                    [blend]="get('colorBlend')"
-                    [map]="pLM.progressiveLightMap2.texture"
+                    [toneMapped]="accumulativeShadowsToneMapped()"
+                    [color]="accumulativeShadowsColor()"
+                    [blend]="accumulativeShadowsColorBlend()"
+                    [map]="pLM().progressiveLightMap2.texture"
                 />
             </ngt-mesh>
         </ngt-group>
     `,
-                    imports: [AccumulativeShadowsConsumer],
                     providers: [
                         {
                             provide: NGTS_ACCUMULATIVE_SHADOWS_API,
-                            useFactory: accumulativeShadowsApiFactory,
+                            useFactory: (shadows) => shadows.api,
                             deps: [NgtsAccumulativeShadows],
                         },
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { frames: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { frames: [{
                 type: Input
             }], blend: [{
                 type: Input
@@ -358,58 +393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 extend({ Group, DirectionalLight, OrthographicCamera, Vector2 });
-const NGTS_RANDOMIZED_LIGHTS_API = new InjectionToken('NgtsRandomizedLights API');
-function randomizedLightsApiFactory(randomizedLights) {
-    const accumulativeApi = inject(NGTS_ACCUMULATIVE_SHADOWS_API);
-    const update = () => {
-        let light;
-        if (randomizedLights.lightsRef.nativeElement) {
-            for (let l = 0; l < randomizedLights.lightsRef.nativeElement.children.length; l++) {
-                light = randomizedLights.lightsRef.nativeElement.children[l];
-                if (Math.random() > randomizedLights.get('ambient')) {
-                    const position = randomizedLights.get('position');
-                    const radius = randomizedLights.get('radius');
-                    light.position.set(position[0] + THREE.MathUtils.randFloatSpread(radius), position[1] + THREE.MathUtils.randFloatSpread(radius), position[2] + THREE.MathUtils.randFloatSpread(radius));
-                }
-                else {
-                    const lambda = Math.acos(2 * Math.random() - 1) - Math.PI / 2.0;
-                    const phi = 2 * Math.PI * Math.random();
-                    const length = randomizedLights.get('length');
-                    light.position.set(Math.cos(lambda) * Math.cos(phi) * length, Math.abs(Math.cos(lambda) * Math.sin(phi) * length), Math.sin(lambda) * length);
-                }
-            }
-        }
-    };
-    const api = { update };
-    randomizedLights.effect(combineLatest([
-        randomizedLights.lightsRef.$,
-        randomizedLights.select('position'),
-        randomizedLights.select('radius'),
-        randomizedLights.select('length'),
-        randomizedLights.select('ambient'),
-    ]), ([group]) => {
-        if (accumulativeApi)
-            accumulativeApi.lights.set(group.uuid, api);
-        return () => accumulativeApi.lights.delete(group.uuid);
-    });
-    return api;
-}
-class RandomizedLightsConsumer {
-    constructor() {
-        inject(NGTS_RANDOMIZED_LIGHTS_API);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: RandomizedLightsConsumer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: RandomizedLightsConsumer, isStandalone: true, selector: "[ngtsRandomizedLightsConsumer]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: RandomizedLightsConsumer, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ngtsRandomizedLightsConsumer]', standalone: true }]
-        }], ctorParameters: function () { return []; } });
-class NgtsRandomizedLights extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.lightsRef = injectNgtRef();
-    }
+class NgtsRandomizedLights extends NgtSignalStore {
     /** How many frames it will jiggle the lights, 1.
      *  Frames is context aware, if a provider like AccumulativeShadows exists, frames will be taken from there!  */
     set frames(frames) {
@@ -459,9 +443,16 @@ class NgtsRandomizedLights extends NgtRxStore {
     set far(far) {
         this.set({ far });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    #parent;
+    #size;
+    #near;
+    #far;
+    #mapSize;
+    #ambient;
+    #position;
+    #radius;
+    constructor() {
+        super({
             castShadow: true,
             bias: 0.001,
             mapSize: 512,
@@ -475,26 +466,83 @@ class NgtsRandomizedLights extends NgtRxStore {
             intensity: 1,
             ambient: 0.5,
         });
-        this.connect('cameraArgs', this.select(['size', 'near', 'far'], ({ size, near, far }) => [-size, size, size, -size, near, far]));
-        this.connect('length', this.select(['position'], ({ position }) => new THREE.Vector3(...position).length()));
+        this.lightsRef = injectNgtRef();
+        this.#parent = inject(NGTS_ACCUMULATIVE_SHADOWS_API);
+        this.#size = this.select('size');
+        this.#near = this.select('near');
+        this.#far = this.select('far');
+        this.#mapSize = this.select('mapSize');
+        this.#ambient = this.select('ambient');
+        this.#position = this.select('position');
+        this.#radius = this.select('radius');
+        this.lightsAmount = this.select('amount');
+        this.lightsCastShadow = this.select('castShadow');
+        this.lightsIntensity = this.select('intensity');
+        this.lightsBias = this.select('bias');
+        this.shadowMapSize = computed(() => [this.#mapSize(), this.#mapSize()]);
+        this.cameraArgs = computed(() => [
+            -this.#size(),
+            this.#size(),
+            this.#size(),
+            -this.#size(),
+            this.#near(),
+            this.#far(),
+        ]);
+        this.length = computed(() => new THREE.Vector3(...this.#position()).length());
+        this.api = computed(() => {
+            const radius = this.#radius();
+            const position = this.#position();
+            const ambient = this.#ambient();
+            const length = this.length();
+            const lights = this.lightsRef.nativeElement;
+            const update = () => {
+                let light;
+                if (lights) {
+                    for (let l = 0; l < lights.children.length; l++) {
+                        light = lights.children[l];
+                        if (Math.random() > ambient) {
+                            light.position.set(position[0] + THREE.MathUtils.randFloatSpread(radius), position[1] + THREE.MathUtils.randFloatSpread(radius), position[2] + THREE.MathUtils.randFloatSpread(radius));
+                        }
+                        else {
+                            const lambda = Math.acos(2 * Math.random() - 1) - Math.PI / 2.0;
+                            const phi = 2 * Math.PI * Math.random();
+                            light.position.set(Math.cos(lambda) * Math.cos(phi) * length, Math.abs(Math.cos(lambda) * Math.sin(phi) * length), Math.sin(lambda) * length);
+                        }
+                    }
+                }
+            };
+            return { update };
+        });
+        requestAnimationInInjectionContext(() => {
+            this.#updateLightsMap();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsRandomizedLights, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsRandomizedLights, isStandalone: true, selector: "ngts-randomized-lights", inputs: { lightsRef: "lightsRef", frames: "frames", position: "position", radius: "radius", amount: "amount", intensity: "intensity", ambient: "ambient", castShadow: "castShadow", bias: "bias", mapSize: "mapSize", size: "size", near: "near", far: "far" }, providers: [
-            { provide: NGTS_RANDOMIZED_LIGHTS_API, useFactory: randomizedLightsApiFactory, deps: [NgtsRandomizedLights] },
-        ], usesInheritance: true, ngImport: i0, template: `
+    #updateLightsMap() {
+        effect((onCleanup) => {
+            const lights = this.lightsRef.nativeElement;
+            if (!lights)
+                return;
+            const parent = this.#parent();
+            if (parent) {
+                parent.lights.set(lights.uuid, this.api);
+                onCleanup(() => parent.lights.delete(lights.uuid));
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsRandomizedLights, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsRandomizedLights, isStandalone: true, selector: "ngts-randomized-lights", inputs: { lightsRef: "lightsRef", frames: "frames", position: "position", radius: "radius", amount: "amount", intensity: "intensity", ambient: "ambient", castShadow: "castShadow", bias: "bias", mapSize: "mapSize", size: "size", near: "near", far: "far" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-group ngtCompound [ref]="lightsRef">
             <ngt-directional-light
-                *ngFor="let i; repeat: get('amount')"
-                [castShadow]="get('castShadow')"
-                [intensity]="get('intensity') / get('amount')"
+                *ngFor="let i; repeat: lightsAmount()"
+                [castShadow]="lightsCastShadow()"
+                [intensity]="lightsIntensity() / lightsAmount()"
             >
-                <ngt-value [rawValue]="get('bias')" attach="shadow.bias" />
-                <ngt-vector2 *args="[get('mapSize'), get('mapSize')]" attach="shadow.mapSize" />
-                <ngt-orthographic-camera *args="get('cameraArgs')" attach="shadow.camera" />
+                <ngt-value [rawValue]="lightsBias()" attach="shadow.bias" />
+                <ngt-vector2 *args="shadowMapSize()" attach="shadow.mapSize" />
+                <ngt-orthographic-camera *args="cameraArgs()" attach="shadow.camera" />
             </ngt-directional-light>
-            <ng-container ngtsRandomizedLightsConsumer />
         </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: RandomizedLightsConsumer, selector: "[ngtsRandomizedLightsConsumer]" }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRepeat, selector: "[ngFor][ngForRepeat]", inputs: ["ngForRepeat"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRepeat, selector: "[ngFor][ngForRepeat]", inputs: ["ngForRepeat"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsRandomizedLights, decorators: [{
             type: Component,
@@ -504,24 +552,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     template: `
         <ngt-group ngtCompound [ref]="lightsRef">
             <ngt-directional-light
-                *ngFor="let i; repeat: get('amount')"
-                [castShadow]="get('castShadow')"
-                [intensity]="get('intensity') / get('amount')"
+                *ngFor="let i; repeat: lightsAmount()"
+                [castShadow]="lightsCastShadow()"
+                [intensity]="lightsIntensity() / lightsAmount()"
             >
-                <ngt-value [rawValue]="get('bias')" attach="shadow.bias" />
-                <ngt-vector2 *args="[get('mapSize'), get('mapSize')]" attach="shadow.mapSize" />
-                <ngt-orthographic-camera *args="get('cameraArgs')" attach="shadow.camera" />
+                <ngt-value [rawValue]="lightsBias()" attach="shadow.bias" />
+                <ngt-vector2 *args="shadowMapSize()" attach="shadow.mapSize" />
+                <ngt-orthographic-camera *args="cameraArgs()" attach="shadow.camera" />
             </ngt-directional-light>
-            <ng-container ngtsRandomizedLightsConsumer />
         </ngt-group>
     `,
-                    imports: [RandomizedLightsConsumer, NgtArgs, NgtRepeat],
-                    providers: [
-                        { provide: NGTS_RANDOMIZED_LIGHTS_API, useFactory: randomizedLightsApiFactory, deps: [NgtsRandomizedLights] },
-                    ],
+                    imports: [NgtArgs, NgtRepeat],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { lightsRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { lightsRef: [{
                 type: Input
             }], frames: [{
                 type: Input
@@ -559,201 +603,8 @@ function damp(v, t, lambda, delta) {
     v.z = THREE.MathUtils.damp(v.z, t.z, lambda, delta);
 }
 const NGTS_BOUNDS_API = new InjectionToken('NgtsBounds API');
-function boundsApiFactory(bounds) {
-    const store = inject(NgtStore);
-    const box = new THREE.Box3();
-    function getSize() {
-        const camera = store.get('camera');
-        const margin = bounds.get('margin');
-        const size = box.getSize(new THREE.Vector3());
-        const center = box.getCenter(new THREE.Vector3());
-        const maxSize = Math.max(size.x, size.y, size.z);
-        const fitHeightDistance = is.orthographicCamera(camera)
-            ? maxSize * 4
-            : maxSize / (2 * Math.atan((Math.PI * camera.fov) / 360));
-        const fitWidthDistance = is.orthographicCamera(camera) ? maxSize * 4 : fitHeightDistance / camera.aspect;
-        const distance = margin * Math.max(fitHeightDistance, fitWidthDistance);
-        return { box, size, center, distance };
-    }
-    const api = {
-        getSize,
-        refresh(object) {
-            const { camera, controls: storeControls } = store.get();
-            const controls = storeControls;
-            if (isBox3(object))
-                box.copy(object);
-            else {
-                const target = object || bounds.boundsRef.nativeElement;
-                if (target) {
-                    target.updateWorldMatrix(true, true);
-                    box.setFromObject(target);
-                }
-            }
-            if (box.isEmpty()) {
-                const max = camera.position.length() || 10;
-                box.setFromCenterAndSize(new THREE.Vector3(), new THREE.Vector3(max, max, max));
-            }
-            if (controls?.constructor.name === 'OrthographicTrackballControls') {
-                // put camera on a sphere along which it would move
-                const { distance } = getSize();
-                const direction = camera.position.clone().sub(controls.target).normalize().multiplyScalar(distance);
-                const newPos = controls.target.clone().add(direction);
-                camera.position.copy(newPos);
-            }
-            return this;
-        },
-        clip() {
-            const { distance } = getSize();
-            const { camera, controls: storeControls, invalidate } = store.get();
-            const controls = storeControls;
-            if (controls)
-                controls.maxDistance = distance * 10;
-            camera.near = distance / 100;
-            camera.far = distance * 100;
-            camera.updateProjectionMatrix();
-            if (controls)
-                controls.update();
-            invalidate();
-            return this;
-        },
-        to({ position, target }) {
-            const { camera } = store.get();
-            const { damping } = bounds.get();
-            bounds.current.camera.copy(camera.position);
-            const { center } = getSize();
-            bounds.goal.camera.set(...position);
-            if (target) {
-                bounds.goal.focus.set(...target);
-            }
-            else {
-                bounds.goal.focus.copy(center);
-            }
-            if (damping) {
-                bounds.current.animating = true;
-            }
-            else {
-                camera.position.set(...position);
-            }
-            return this;
-        },
-        fit() {
-            const { camera, controls: storeControls, invalidate } = store.get();
-            const controls = storeControls;
-            const { damping, margin } = bounds.get();
-            bounds.current.camera.copy(camera.position);
-            if (controls)
-                bounds.current.focus.copy(controls.target);
-            const { center, distance } = getSize();
-            const direction = center.clone().sub(camera.position).normalize().multiplyScalar(distance);
-            bounds.goal.camera.copy(center).sub(direction);
-            bounds.goal.focus.copy(center);
-            if (is.orthographicCamera(camera)) {
-                bounds.current.zoom = camera.zoom;
-                let maxHeight = 0, maxWidth = 0;
-                const vertices = [
-                    new THREE.Vector3(box.min.x, box.min.y, box.min.z),
-                    new THREE.Vector3(box.min.x, box.max.y, box.min.z),
-                    new THREE.Vector3(box.min.x, box.min.y, box.max.z),
-                    new THREE.Vector3(box.min.x, box.max.y, box.max.z),
-                    new THREE.Vector3(box.max.x, box.max.y, box.max.z),
-                    new THREE.Vector3(box.max.x, box.max.y, box.min.z),
-                    new THREE.Vector3(box.max.x, box.min.y, box.max.z),
-                    new THREE.Vector3(box.max.x, box.min.y, box.min.z),
-                ];
-                // Transform the center and each corner to camera space
-                center.applyMatrix4(camera.matrixWorldInverse);
-                for (const v of vertices) {
-                    v.applyMatrix4(camera.matrixWorldInverse);
-                    maxHeight = Math.max(maxHeight, Math.abs(v.y - center.y));
-                    maxWidth = Math.max(maxWidth, Math.abs(v.x - center.x));
-                }
-                maxHeight *= 2;
-                maxWidth *= 2;
-                const zoomForHeight = (camera.top - camera.bottom) / maxHeight;
-                const zoomForWidth = (camera.right - camera.left) / maxWidth;
-                bounds.goal.zoom = Math.min(zoomForHeight, zoomForWidth) / margin;
-                if (!damping) {
-                    camera.zoom = bounds.goal.zoom;
-                    camera.updateProjectionMatrix();
-                }
-            }
-            if (damping) {
-                bounds.current.animating = true;
-            }
-            else {
-                camera.position.copy(bounds.goal.camera);
-                camera.lookAt(bounds.goal.focus);
-                if (controls) {
-                    controls.target.copy(bounds.goal.focus);
-                    controls.update();
-                }
-            }
-            if (bounds.fitted.observed)
-                bounds.fitted.emit(this.getSize());
-            invalidate();
-            return this;
-        },
-    };
-    let count = 0;
-    bounds.hold(bounds.boundsRef.$.pipe(switchMap(() => combineLatest([
-        bounds.select('clip'),
-        bounds.select('fit'),
-        bounds.select('observe'),
-        store.select('camera'),
-        store.select('controls'),
-        store.select('size'),
-        bounds.boundsRef.children$(),
-    ]))), ([clip, fit, observe]) => {
-        if (observe || count++ === 0) {
-            api.refresh();
-            if (fit)
-                api.fit();
-            if (clip)
-                api.clip();
-        }
-    });
-    injectBeforeRender(({ delta }) => {
-        if (bounds.current.animating) {
-            const { damping, eps } = bounds.get();
-            const { camera, controls: storeControls, invalidate } = store.get();
-            const controls = storeControls;
-            damp(bounds.current.focus, bounds.goal.focus, damping, delta);
-            damp(bounds.current.camera, bounds.goal.camera, damping, delta);
-            bounds.current.zoom = THREE.MathUtils.damp(bounds.current.zoom, bounds.goal.zoom, damping, delta);
-            camera.position.copy(bounds.current.camera);
-            if (is.orthographicCamera(camera)) {
-                camera.zoom = bounds.current.zoom;
-                camera.updateProjectionMatrix();
-            }
-            if (!controls) {
-                camera.lookAt(bounds.current.focus);
-            }
-            else {
-                controls.target.copy(bounds.current.focus);
-                controls.update();
-            }
-            invalidate();
-            if (is.orthographicCamera(camera) && !(Math.abs(bounds.current.zoom - bounds.goal.zoom) < eps))
-                return;
-            if (!is.orthographicCamera(camera) && !equals(bounds.current.camera, bounds.goal.camera, eps))
-                return;
-            if (controls && !equals(bounds.current.focus, bounds.goal.focus, eps))
-                return;
-            bounds.current.animating = false;
-        }
-    });
-    return api;
-}
 extend({ Group });
-class NgtsBounds extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.boundsRef = injectNgtRef();
-        this.fitted = new EventEmitter();
-        this.store = inject(NgtStore);
-        this.current = { animating: false, focus: new THREE.Vector3(), camera: new THREE.Vector3(), zoom: 1 };
-        this.goal = { focus: new THREE.Vector3(), camera: new THREE.Vector3(), zoom: 1 };
-    }
+class NgtsBounds extends NgtSignalStore {
     set damping(damping) {
         this.set({ damping });
     }
@@ -772,24 +623,241 @@ class NgtsBounds extends NgtRxStore {
     set eps(eps) {
         this.set({ eps });
     }
-    initialize() {
-        super.initialize();
-        this.set({ damping: 6, fit: false, clip: false, observe: false, margin: 1.2, eps: 0.01 });
+    #store;
+    #controls;
+    #camera;
+    #invalidate;
+    #size;
+    #current;
+    #goal;
+    #box;
+    #margin;
+    #damping;
+    #fit;
+    #clip;
+    #observe;
+    #count;
+    constructor() {
+        super({ damping: 6, fit: false, clip: false, observe: false, margin: 1.2, eps: 0.01 });
+        this.boundsRef = injectNgtRef();
+        this.fitted = new EventEmitter();
+        this.#store = inject(NgtStore);
+        this.#controls = this.#store.select('controls');
+        this.#camera = this.#store.select('camera');
+        this.#invalidate = this.#store.select('invalidate');
+        this.#size = this.#store.select('size');
+        this.#current = { animating: false, focus: new THREE.Vector3(), camera: new THREE.Vector3(), zoom: 1 };
+        this.#goal = { focus: new THREE.Vector3(), camera: new THREE.Vector3(), zoom: 1 };
+        this.#box = new THREE.Box3();
+        this.#margin = this.select('margin');
+        this.#damping = this.select('damping');
+        this.#fit = this.select('fit');
+        this.#clip = this.select('clip');
+        this.#observe = this.select('observe');
+        this.#count = 0;
+        this.api = computed(() => {
+            const margin = this.#margin();
+            const damping = this.#damping();
+            const camera = this.#camera();
+            const controls = this.#controls();
+            const invalidate = this.#invalidate();
+            const current = this.#current;
+            const goal = this.#goal;
+            const box = this.#box;
+            const ref = () => this.boundsRef.untracked;
+            const fitted = this.fitted;
+            function getSize() {
+                const size = box.getSize(new THREE.Vector3());
+                const center = box.getCenter(new THREE.Vector3());
+                const maxSize = Math.max(size.x, size.y, size.z);
+                const fitHeightDistance = is.orthographicCamera(camera)
+                    ? maxSize * 4
+                    : maxSize / (2 * Math.atan((Math.PI * camera.fov) / 360));
+                const fitWidthDistance = is.orthographicCamera(camera) ? maxSize * 4 : fitHeightDistance / camera.aspect;
+                const distance = margin * Math.max(fitHeightDistance, fitWidthDistance);
+                return { box, size, center, distance };
+            }
+            return {
+                getSize,
+                refresh(object) {
+                    if (isBox3(object))
+                        box.copy(object);
+                    else {
+                        const target = object || ref();
+                        if (target) {
+                            target.updateWorldMatrix(true, true);
+                            box.setFromObject(target);
+                        }
+                    }
+                    if (box.isEmpty()) {
+                        const max = camera.position.length() || 10;
+                        box.setFromCenterAndSize(new THREE.Vector3(), new THREE.Vector3(max, max, max));
+                    }
+                    if (controls?.constructor.name === 'OrthographicTrackballControls') {
+                        // Put camera on a sphere along which it should move
+                        const { distance } = getSize();
+                        const direction = camera.position.clone().sub(controls.target).normalize().multiplyScalar(distance);
+                        const newPos = controls.target.clone().add(direction);
+                        camera.position.copy(newPos);
+                    }
+                    return this;
+                },
+                clip() {
+                    const { distance } = getSize();
+                    if (controls)
+                        controls.maxDistance = distance * 10;
+                    camera.near = distance / 100;
+                    camera.far = distance * 100;
+                    camera.updateProjectionMatrix();
+                    if (controls)
+                        controls.update();
+                    invalidate();
+                    return this;
+                },
+                to({ position, target }) {
+                    current.camera.copy(camera.position);
+                    const { center } = getSize();
+                    goal.camera.set(...position);
+                    if (target) {
+                        goal.focus.set(...target);
+                    }
+                    else {
+                        goal.focus.copy(center);
+                    }
+                    if (damping) {
+                        current.animating = true;
+                    }
+                    else {
+                        camera.position.set(...position);
+                    }
+                    return this;
+                },
+                fit() {
+                    current.camera.copy(camera.position);
+                    if (controls)
+                        current.focus.copy(controls.target);
+                    const { center, distance } = getSize();
+                    const direction = center.clone().sub(camera.position).normalize().multiplyScalar(distance);
+                    goal.camera.copy(center).sub(direction);
+                    goal.focus.copy(center);
+                    if (is.orthographicCamera(camera)) {
+                        current.zoom = camera.zoom;
+                        let maxHeight = 0, maxWidth = 0;
+                        const vertices = [
+                            new THREE.Vector3(box.min.x, box.min.y, box.min.z),
+                            new THREE.Vector3(box.min.x, box.max.y, box.min.z),
+                            new THREE.Vector3(box.min.x, box.min.y, box.max.z),
+                            new THREE.Vector3(box.min.x, box.max.y, box.max.z),
+                            new THREE.Vector3(box.max.x, box.max.y, box.max.z),
+                            new THREE.Vector3(box.max.x, box.max.y, box.min.z),
+                            new THREE.Vector3(box.max.x, box.min.y, box.max.z),
+                            new THREE.Vector3(box.max.x, box.min.y, box.min.z),
+                        ];
+                        // Transform the center and each corner to camera space
+                        center.applyMatrix4(camera.matrixWorldInverse);
+                        for (const v of vertices) {
+                            v.applyMatrix4(camera.matrixWorldInverse);
+                            maxHeight = Math.max(maxHeight, Math.abs(v.y - center.y));
+                            maxWidth = Math.max(maxWidth, Math.abs(v.x - center.x));
+                        }
+                        maxHeight *= 2;
+                        maxWidth *= 2;
+                        const zoomForHeight = (camera.top - camera.bottom) / maxHeight;
+                        const zoomForWidth = (camera.right - camera.left) / maxWidth;
+                        goal.zoom = Math.min(zoomForHeight, zoomForWidth) / margin;
+                        if (!damping) {
+                            camera.zoom = goal.zoom;
+                            camera.updateProjectionMatrix();
+                        }
+                    }
+                    if (damping) {
+                        current.animating = true;
+                    }
+                    else {
+                        camera.position.copy(goal.camera);
+                        camera.lookAt(goal.focus);
+                        if (controls) {
+                            controls.target.copy(goal.focus);
+                            controls.update();
+                        }
+                    }
+                    if (fitted.observed)
+                        fitted.emit(this.getSize());
+                    invalidate();
+                    return this;
+                },
+            };
+        });
+        this.#preventDragHijacking();
+        requestAnimationInInjectionContext(() => {
+            this.#scalePointer();
+            injectBeforeRender(this.#onBeforeRender.bind(this));
+        });
+    }
+    #scalePointer() {
+        const trigger = computed(() => ({
+            size: this.#size(),
+            fit: this.#fit(),
+            clip: this.#clip(),
+            observe: this.#observe(),
+            camera: this.#camera(),
+            controls: this.#controls(),
+        }));
+        effect(() => {
+            const { observe, fit, clip } = trigger();
+            const api = untracked(this.api);
+            if (observe || this.#count++ === 0) {
+                api.refresh();
+                if (fit)
+                    api.fit();
+                if (clip)
+                    api.clip();
+            }
+        });
     }
-    ngOnInit() {
-        this.preventDragHijacking();
+    #onBeforeRender({ delta }) {
+        const { damping, eps } = this.get();
+        const invalidate = this.#invalidate();
+        const camera = this.#camera();
+        const controls = this.#controls();
+        if (this.#current.animating) {
+            damp(this.#current.focus, this.#goal.focus, damping, delta);
+            damp(this.#current.camera, this.#goal.camera, damping, delta);
+            this.#current.zoom = THREE.MathUtils.damp(this.#current.zoom, this.#goal.zoom, damping, delta);
+            camera.position.copy(this.#current.camera);
+            if (is.orthographicCamera(camera)) {
+                camera.zoom = this.#current.zoom;
+                camera.updateProjectionMatrix();
+            }
+            if (!controls) {
+                camera.lookAt(this.#current.focus);
+            }
+            else {
+                controls.target.copy(this.#current.focus);
+                controls.update();
+            }
+            invalidate();
+            if (is.orthographicCamera(camera) && !(Math.abs(this.#current.zoom - this.#goal.zoom) < eps))
+                return;
+            if (!is.orthographicCamera(camera) && !equals(this.#current.camera, this.#goal.camera, eps))
+                return;
+            if (controls && !equals(this.#current.focus, this.#goal.focus, eps))
+                return;
+            this.#current.animating = false;
+        }
     }
-    preventDragHijacking() {
-        this.effect(this.store.select('controls'), (controls) => {
+    #preventDragHijacking() {
+        effect((onCleanup) => {
+            const controls = this.#controls();
             if (controls) {
-                const callback = () => (this.current.animating = false);
+                const callback = () => (this.#current.animating = false);
                 controls.addEventListener('start', callback);
-                return () => controls.removeEventListener('start', callback);
+                onCleanup(() => controls.removeEventListener('start', callback));
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsBounds, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsBounds, isStandalone: true, selector: "ngts-bounds", inputs: { boundsRef: "boundsRef", damping: "damping", fit: "fit", clip: "clip", observe: "observe", margin: "margin", eps: "eps" }, outputs: { fitted: "fitted" }, providers: [{ provide: NGTS_BOUNDS_API, useFactory: boundsApiFactory, deps: [NgtsBounds] }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsBounds, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsBounds, isStandalone: true, selector: "ngts-bounds", inputs: { boundsRef: "boundsRef", damping: "damping", fit: "fit", clip: "clip", observe: "observe", margin: "margin", eps: "eps" }, outputs: { fitted: "fitted" }, providers: [{ provide: NGTS_BOUNDS_API, useFactory: (bounds) => bounds.api, deps: [NgtsBounds] }], usesInheritance: true, ngImport: i0, template: `
         <ngt-group ngtCompound [ref]="boundsRef">
             <ng-content />
         </ngt-group>
@@ -805,10 +873,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             <ng-content />
         </ngt-group>
     `,
-                    providers: [{ provide: NGTS_BOUNDS_API, useFactory: boundsApiFactory, deps: [NgtsBounds] }],
+                    providers: [{ provide: NGTS_BOUNDS_API, useFactory: (bounds) => bounds.api, deps: [NgtsBounds] }],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { boundsRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { boundsRef: [{
                 type: Input
             }], damping: [{
                 type: Input
@@ -826,7 +894,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Output
             }] } });
 
-class NgtsCameraShake extends NgtRxStore {
+class NgtsCameraShake extends NgtSignalStore {
+    #store = inject(NgtStore);
+    #initialRotation = this.#store.get('camera').rotation.clone();
+    #yawNoise = new SimplexNoise();
+    #rollNoise = new SimplexNoise();
+    #pitchNoise = new SimplexNoise();
     set intensity(intensity) {
         this.set({ intensity });
     }
@@ -854,9 +927,8 @@ class NgtsCameraShake extends NgtRxStore {
     set rollFrequency(rollFrequency) {
         this.set({ rollFrequency });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    constructor() {
+        super({
             intensity: 1,
             decayRate: 0.65,
             maxYaw: 0.1,
@@ -866,37 +938,32 @@ class NgtsCameraShake extends NgtRxStore {
             pitchFrequency: 0.1,
             rollFrequency: 0.1,
         });
-    }
-    constructor() {
-        super();
-        this.store = inject(NgtStore);
-        this.initialRotation = this.store.get('camera').rotation.clone();
-        this.yawNoise = new SimplexNoise();
-        this.pitchNoise = new SimplexNoise();
-        this.rollNoise = new SimplexNoise();
         injectBeforeRender(({ clock, delta, camera }) => {
             const { intensity, maxYaw, maxPitch, maxRoll, yawFrequency, pitchFrequency, rollFrequency, decay, decayRate, } = this.get();
             const shake = Math.pow(intensity, 2);
-            const yaw = maxYaw * shake * this.yawNoise.noise(clock.elapsedTime * yawFrequency, 1);
-            const pitch = maxPitch * shake * this.pitchNoise.noise(clock.elapsedTime * pitchFrequency, 1);
-            const roll = maxRoll * shake * this.rollNoise.noise(clock.elapsedTime * rollFrequency, 1);
-            camera.rotation.set(this.initialRotation.x + pitch, this.initialRotation.y + yaw, this.initialRotation.z + roll);
+            const yaw = maxYaw * shake * this.#yawNoise.noise(clock.elapsedTime * yawFrequency, 1);
+            const pitch = maxPitch * shake * this.#pitchNoise.noise(clock.elapsedTime * pitchFrequency, 1);
+            const roll = maxRoll * shake * this.#rollNoise.noise(clock.elapsedTime * rollFrequency, 1);
+            camera.rotation.set(this.#initialRotation.x + pitch, this.#initialRotation.y + yaw, this.#initialRotation.z + roll);
             if (decay && intensity > 0) {
                 this.set({ intensity: intensity - decayRate * delta });
-                this.constraintIntensity();
+                this.#constraintIntensity();
             }
         });
-    }
-    ngOnInit() {
-        this.setChangeEvent();
-    }
-    setChangeEvent() {
-        this.effect(combineLatest([this.store.select('camera'), this.store.select('controls')]), ([camera, controls]) => {
+        this.#setChangeEvent();
+    }
+    ngOnInit() { }
+    #setChangeEvent() {
+        const camera = this.#store.select('camera');
+        const controls = this.#store.select('controls');
+        const trigger = computed(() => ({ camera: camera(), controls: controls() }));
+        effect((onCleanup) => {
+            const { camera, controls } = trigger();
             if (controls) {
-                const callback = () => void (this.initialRotation = camera.rotation.clone());
+                const callback = () => void (this.#initialRotation = camera.rotation.clone());
                 controls.addEventListener('change', callback);
                 callback();
-                return () => void controls.removeEventListener('change', callback);
+                onCleanup(() => void controls.removeEventListener('change', callback));
             }
         });
     }
@@ -905,9 +972,9 @@ class NgtsCameraShake extends NgtRxStore {
     }
     setIntensity(intensity) {
         this.set({ intensity });
-        this.constraintIntensity();
+        this.#constraintIntensity();
     }
-    constraintIntensity() {
+    #constraintIntensity() {
         const intensity = this.get('intensity');
         if (intensity < 0 || intensity > 1) {
             this.set({ intensity: intensity < 0 ? 0 : 1 });
@@ -918,10 +985,7 @@ class NgtsCameraShake extends NgtRxStore {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCameraShake, decorators: [{
             type: Directive,
-            args: [{
-                    selector: 'ngts-camera-shake',
-                    standalone: true,
-                }]
+            args: [{ selector: 'ngts-camera-shake', standalone: true }]
         }], ctorParameters: function () { return []; }, propDecorators: { intensity: [{
                 type: Input
             }], decay: [{
@@ -973,23 +1037,7 @@ function createNormalMaterial(side = THREE.FrontSide) {
         },
     });
 }
-class NgtsCaustics extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.CustomBlending = THREE.CustomBlending;
-        this.OneFactor = THREE.OneFactor;
-        this.SrcAlphaFactor = THREE.SrcAlphaFactor;
-        this.Math = Math;
-        this.planeRef = injectNgtRef();
-        this.sceneRef = injectNgtRef();
-        this.cameraRef = injectNgtRef();
-        this.causticsRef = injectNgtRef();
-        this.normalTargetFbo = injectNgtsFBO(() => this.select('resolution').pipe(map((resolution) => ({ width: resolution, height: resolution, settings: NORMALPROPS }))));
-        this.normalTargetBFbo = injectNgtsFBO(() => this.select('resolution').pipe(map((resolution) => ({ width: resolution, height: resolution, settings: NORMALPROPS }))));
-        this.causticsTargetFbo = injectNgtsFBO(() => this.select('resolution').pipe(map((resolution) => ({ width: resolution, height: resolution, settings: CAUSTICPROPS }))));
-        this.causticsTargetBFbo = injectNgtsFBO(() => this.select('resolution').pipe(map((resolution) => ({ width: resolution, height: resolution, settings: CAUSTICPROPS }))));
-        this.store = inject(NgtStore);
-    }
+class NgtsCaustics extends NgtSignalStore {
     /** How many frames it will render, set it to Infinity for runtime, default: 1 */
     set frames(frames) {
         this.set({ frames });
@@ -1034,8 +1082,12 @@ class NgtsCaustics extends NgtRxStore {
     set lightSource(lightSource) {
         this.set({ lightSource });
     }
-    initialize() {
-        this.set({
+    #resolution;
+    #normalTargetSettings;
+    #causticsTargetSettings;
+    #store;
+    constructor() {
+        super({
             frames: 1,
             ior: 1.1,
             color: 'white',
@@ -1047,37 +1099,74 @@ class NgtsCaustics extends NgtRxStore {
             resolution: 2024,
             lightSource: [5, 5, 5],
         });
+        this.CustomBlending = THREE.CustomBlending;
+        this.OneFactor = THREE.OneFactor;
+        this.SrcAlphaFactor = THREE.SrcAlphaFactor;
+        this.Math = Math;
+        this.planeRef = injectNgtRef();
+        this.sceneRef = injectNgtRef();
+        this.cameraRef = injectNgtRef();
+        this.causticsRef = injectNgtRef();
+        this.causticsColor = this.select('color');
+        this.causticsDebug = this.select('debug');
+        this.#resolution = this.select('resolution');
+        this.#normalTargetSettings = computed(() => ({
+            width: this.#resolution(),
+            height: this.#resolution(),
+            settings: NORMALPROPS,
+        }));
+        this.#causticsTargetSettings = computed(() => ({
+            width: this.#resolution(),
+            height: this.#resolution(),
+            settings: CAUSTICPROPS,
+        }));
+        this.normalTargetFbo = injectNgtsFBO(this.#normalTargetSettings);
+        this.normalTargetBFbo = injectNgtsFBO(this.#normalTargetSettings);
+        this.causticsTargetFbo = injectNgtsFBO(this.#causticsTargetSettings);
+        this.causticsTargetBFbo = injectNgtsFBO(this.#causticsTargetSettings);
+        this.#store = inject(NgtStore);
+        requestAnimationInInjectionContext(() => {
+            this.#updateWorldMatrix();
+            this.#setBeforeRender();
+        });
     }
-    ngOnInit() {
-        this.updateWorldMatrix();
-        this.setBeforeRender();
-    }
-    updateWorldMatrix() {
-        this.hold(combineLatest([this.sceneRef.children$(), this.causticsRef.$, this.causticsRef.children$(), this.select()]), () => {
-            if (this.causticsRef.nativeElement) {
-                this.causticsRef.nativeElement.updateWorldMatrix(false, true);
-            }
+    #updateWorldMatrix() {
+        const trigger = computed(() => ({
+            sceneChildren: this.sceneRef.children()(),
+            caustics: this.causticsRef.nativeElement,
+            causticsChildren: this.causticsRef.children()(),
+            state: this.select()(),
+        }));
+        effect(() => {
+            const { caustics } = trigger();
+            if (!caustics)
+                return;
+            caustics.updateWorldMatrix(false, true);
         });
     }
-    setBeforeRender() {
+    #setBeforeRender() {
         const causticsMaterial = new CausticsMaterial();
         const causticsQuad = new FullScreenQuad(causticsMaterial);
         const normalMaterial = createNormalMaterial();
         const normalMaterialB = createNormalMaterial(THREE.BackSide);
-        this.effect(combineLatest([
-            this.sceneRef.$,
-            this.sceneRef.children$(),
-            this.causticsRef.$,
-            this.cameraRef.$,
-            this.normalTargetFbo.$,
-            this.normalTargetBFbo.$,
-            this.causticsTargetFbo.$,
-            this.causticsTargetBFbo.$,
-            this.planeRef.$,
-            this.planeRef.children$('both'),
-        ]), ([scene, children, caustics, camera, normalTarget, normalTargetB, causticsTarget, causticsTargetB, plane,]) => {
+        const trigger = computed(() => ({
+            scene: this.sceneRef.nativeElement,
+            sceneChildren: this.sceneRef.children()(),
+            caustics: this.causticsRef.nativeElement,
+            camera: this.cameraRef.nativeElement,
+            normalTarget: this.normalTargetFbo(),
+            normalTargetB: this.normalTargetBFbo(),
+            causticsTarget: this.causticsTargetFbo(),
+            causticsTargetB: this.causticsTargetBFbo(),
+            plane: this.planeRef.nativeElement,
+            planeChildren: this.planeRef.children('both')(),
+        }));
+        effect((onCleanup) => {
+            const { caustics, sceneChildren, scene, camera, plane, normalTarget, normalTargetB, causticsTarget, causticsTargetB, } = trigger();
+            if (!caustics)
+                return;
             caustics.updateWorldMatrix(false, true);
-            if (children.length > 1) {
+            if (sceneChildren.length > 1) {
                 const v = new THREE.Vector3();
                 const lpF = new THREE.Frustum();
                 const lpM = new THREE.Matrix4();
@@ -1087,8 +1176,8 @@ class NgtsCaustics extends NgtRxStore {
                 const bounds = new THREE.Box3();
                 const focusPos = new THREE.Vector3();
                 let count = 0;
-                return this.store.get('internal').subscribe(({ gl }) => {
-                    const { frames, lightSource, resolution, worldRadius, intensity, backside, backsideIOR, ior, causticsOnly, debug, } = this.get();
+                const sub = this.#store.get('internal').subscribe(({ gl }) => {
+                    const { frames, lightSource, resolution, worldRadius, intensity, backside, backsideIOR, ior, causticsOnly, } = this.get();
                     if (frames === Infinity || count++ < frames) {
                         if (Array.isArray(lightSource))
                             lightDir.fromArray(lightSource).normalize();
@@ -1117,9 +1206,7 @@ class NgtsCaustics extends NgtRxStore {
                         const radius = projectedVerts
                             .map((v) => v.distanceTo(centralVert))
                             .reduce((a, b) => Math.max(a, b));
-                        const dirLength = boundsVertices
-                            .map((x) => x.dot(lightDir))
-                            .reduce((a, b) => Math.max(a, b));
+                        const dirLength = boundsVertices.map((x) => x.dot(lightDir)).reduce((a, b) => Math.max(a, b));
                         // Shadows
                         camera.position.copy(lightDir.clone().multiplyScalar(dirLength).add(focusPos));
                         camera.lookAt(scene.localToWorld(focusPos.clone()));
@@ -1147,8 +1234,7 @@ class NgtsCaustics extends NgtRxStore {
                         plane.position.copy(centerPos);
                         // if (debug) helper.current?.update();
                         // Inject uniforms
-                        normalMaterialB.viewMatrix.value = normalMaterial.viewMatrix.value =
-                            camera.matrixWorldInverse;
+                        normalMaterialB.viewMatrix.value = normalMaterial.viewMatrix.value = camera.matrixWorldInverse;
                         const dirLightNearPlane = lpF.setFromProjectionMatrix(lpM.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse)).planes[4];
                         causticsMaterial.cameraMatrixWorld = camera.matrixWorld;
                         causticsMaterial.cameraProjectionMatrixInv = camera.projectionMatrixInverse;
@@ -1179,10 +1265,8 @@ class NgtsCaustics extends NgtRxStore {
                         scene.overrideMaterial = null;
                         // Render front face caustics
                         causticsMaterial.ior = ior;
-                        plane.material.lightProjMatrix =
-                            camera.projectionMatrix;
-                        plane.material.lightViewMatrix =
-                            camera.matrixWorldInverse;
+                        plane.material.lightProjMatrix = camera.projectionMatrix;
+                        plane.material.lightViewMatrix = camera.matrixWorldInverse;
                         causticsMaterial.normalTexture = normalTarget.texture;
                         causticsMaterial.depthTexture = normalTarget.depthTexture;
                         gl.setRenderTarget(causticsTarget);
@@ -1203,10 +1287,11 @@ class NgtsCaustics extends NgtRxStore {
                             scene.visible = false;
                     }
                 });
+                onCleanup(() => sub());
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCaustics, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCaustics, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCaustics, isStandalone: true, selector: "ngts-caustics", inputs: { causticsRef: "causticsRef", frames: "frames", debug: "debug", causticsOnly: "causticsOnly", backside: "backside", ior: "ior", backsideIOR: "backsideIOR", worldRadius: "worldRadius", intensity: "intensity", color: "color", resolution: "resolution", lightSource: "lightSource" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-group [ref]="causticsRef" ngtCompound>
             <ngt-scene [ref]="sceneRef">
@@ -1216,18 +1301,18 @@ class NgtsCaustics extends NgtRxStore {
             <ngt-mesh [renderOrder]="2" [ref]="planeRef" [rotation]="[-Math.PI / 2, 0, 0]">
                 <ngt-plane-geometry />
                 <ngt-caustics-projection-material
-                    *ngIf="causticsTargetFbo.nativeElement && causticsTargetBFbo.nativeElement"
+                    *ngIf="causticsTargetFbo() && causticsTargetBFbo()"
                     [transparent]="true"
-                    [color]="get('color')"
-                    [causticsTexture]="causticsTargetFbo.nativeElement.texture"
-                    [causticsTextureB]="causticsTargetBFbo.nativeElement.texture"
+                    [color]="causticsColor()"
+                    [causticsTexture]="causticsTargetFbo().texture"
+                    [causticsTextureB]="causticsTargetBFbo().texture"
                     [blending]="CustomBlending"
                     [blendSrc]="OneFactor"
                     [blendDst]="SrcAlphaFactor"
                     [depthWrite]="false"
                 />
 
-                <ngts-edges *ngIf="get('debug')" [withChildren]="true">
+                <ngts-edges *ngIf="causticsDebug()" [withChildren]="true">
                     <ngt-line-basic-material color="#ffff00" [toneMapped]="false" />
                 </ngts-edges>
             </ngt-mesh>
@@ -1248,18 +1333,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             <ngt-mesh [renderOrder]="2" [ref]="planeRef" [rotation]="[-Math.PI / 2, 0, 0]">
                 <ngt-plane-geometry />
                 <ngt-caustics-projection-material
-                    *ngIf="causticsTargetFbo.nativeElement && causticsTargetBFbo.nativeElement"
+                    *ngIf="causticsTargetFbo() && causticsTargetBFbo()"
                     [transparent]="true"
-                    [color]="get('color')"
-                    [causticsTexture]="causticsTargetFbo.nativeElement.texture"
-                    [causticsTextureB]="causticsTargetBFbo.nativeElement.texture"
+                    [color]="causticsColor()"
+                    [causticsTexture]="causticsTargetFbo().texture"
+                    [causticsTextureB]="causticsTargetBFbo().texture"
                     [blending]="CustomBlending"
                     [blendSrc]="OneFactor"
                     [blendDst]="SrcAlphaFactor"
                     [depthWrite]="false"
                 />
 
-                <ngts-edges *ngIf="get('debug')" [withChildren]="true">
+                <ngts-edges *ngIf="causticsDebug()" [withChildren]="true">
                     <ngt-line-basic-material color="#ffff00" [toneMapped]="false" />
                 </ngts-edges>
             </ngt-mesh>
@@ -1268,7 +1353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     imports: [NgIf, NgtsEdges],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { causticsRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { causticsRef: [{
                 type: Input
             }], frames: [{
                 type: Input
@@ -1295,14 +1380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 extend({ Group });
-class NgtsCenter extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.centerRef = injectNgtRef();
-        this.outerRef = injectNgtRef();
-        this.innerRef = injectNgtRef();
-        this.centered = new EventEmitter();
-    }
+class NgtsCenter extends NgtSignalStore {
     set top(top) {
         this.set({ top });
     }
@@ -1330,24 +1408,37 @@ class NgtsCenter extends NgtRxStore {
     set disableZ(disableZ) {
         this.set({ disableZ });
     }
-    set disabled(disabled) {
-        this.set({ disabled });
+    set disable(disable) {
+        this.set({ disable });
     }
     set precise(precise) {
         this.set({ precise });
     }
-    initialize() {
-        super.initialize();
-        this.set({ precise: true });
-    }
-    ngOnInit() {
-        this.setPosition();
+    constructor() {
+        super({ precise: true });
+        this.centerRef = injectNgtRef();
+        this.outerRef = injectNgtRef();
+        this.innerRef = injectNgtRef();
+        this.centered = new EventEmitter();
+        requestAnimationInInjectionContext(() => {
+            this.#setPosition();
+        });
     }
-    setPosition() {
-        this.hold(combineLatest([this.centerRef.$, this.outerRef.$, this.innerRef.$, this.innerRef.children$()]), ([centerGroup, outerGroup, innerGroup]) => {
-            const { precise, top, left, front, disabled, disableX, disableY, disableZ, back, bottom, right } = this.get();
-            outerGroup.matrixWorld.identity();
-            const box3 = new Box3().setFromObject(innerGroup, precise);
+    #setPosition() {
+        const trigger = computed(() => {
+            const center = this.centerRef.nativeElement;
+            const outer = this.outerRef.nativeElement;
+            const inner = this.innerRef.nativeElement;
+            const innerChildren = this.innerRef.children();
+            return { center, outer, inner, innerChildren: innerChildren() };
+        });
+        effect(() => {
+            const { center: centerGroup, outer, inner } = trigger();
+            if (!outer || !inner)
+                return;
+            const { precise, top, left, front, disable, disableX, disableY, disableZ, back, bottom, right } = this.get();
+            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;
@@ -1358,7 +1449,7 @@ class NgtsCenter extends NgtRxStore {
             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;
-            outerGroup.position.set(disabled || disableX ? 0 : -center.x + hAlign, disabled || disableY ? 0 : -center.y + vAlign, disabled || disableZ ? 0 : -center.z + dAlign);
+            outer.position.set(disable || disableX ? 0 : -center.x + hAlign, disable || disableY ? 0 : -center.y + vAlign, disable || disableZ ? 0 : -center.z + dAlign);
             if (this.centered.observed) {
                 this.centered.emit({
                     parent: centerGroup.parent,
@@ -1376,8 +1467,8 @@ class NgtsCenter extends NgtRxStore {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCenter, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCenter, isStandalone: true, selector: "ngts-center", inputs: { centerRef: "centerRef", top: "top", right: "right", bottom: "bottom", left: "left", front: "front", back: "back", disableX: "disableX", disableY: "disableY", disableZ: "disableZ", disabled: "disabled", precise: "precise" }, outputs: { centered: "centered" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCenter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCenter, isStandalone: true, selector: "ngts-center", inputs: { centerRef: "centerRef", top: "top", right: "right", bottom: "bottom", left: "left", front: "front", back: "back", disableX: "disableX", disableY: "disableY", disableZ: "disableZ", disable: "disable", precise: "precise" }, outputs: { centered: "centered" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-group ngtCompound [ref]="centerRef">
             <ngt-group [ref]="outerRef">
                 <ngt-group [ref]="innerRef">
@@ -1403,7 +1494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
     `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { centerRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { centerRef: [{
                 type: Input
             }], top: [{
                 type: Input
@@ -1423,7 +1514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], disableZ: [{
                 type: Input
-            }], disabled: [{
+            }], disable: [{
                 type: Input
             }], precise: [{
                 type: Input
@@ -1432,16 +1523,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 const CLOUD_URL = 'https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png';
+injectNgtsTextureLoader.preload(() => CLOUD_URL);
 extend({ Group, Mesh, PlaneGeometry, MeshStandardMaterial });
-class NgtsCloud extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.store = inject(NgtStore);
-        this.encoding = this.store.get('gl', 'outputEncoding');
-        this.groupRef = injectNgtRef();
-        this.clouds$ = this.select('clouds');
-        this.cloudTexture$ = injectNgtsTextureLoader(this.select('texture'));
-    }
+class NgtsCloud extends NgtSignalStore {
     set opacity(opacity) {
         this.set({ opacity });
     }
@@ -1466,9 +1550,11 @@ class NgtsCloud extends NgtRxStore {
     set depthTest(depthTest) {
         this.set({ depthTest });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    #store;
+    #width;
+    #speed;
+    constructor() {
+        super({
             opacity: 0.5,
             speed: 0.4,
             width: 10,
@@ -1478,53 +1564,62 @@ class NgtsCloud extends NgtRxStore {
             color: '#ffffff',
             depthTest: true,
         });
-        this.connect('clouds', this.select(['width', 'segments', 'speed'], ({ width, segments, speed }) => {
-            return [...new Array(segments)].map((_, index) => ({
-                x: width / 2 - Math.random() * width,
-                y: width / 2 - Math.random() * width,
-                scale: 0.4 + Math.sin(((index + 1) / segments) * Math.PI) * ((0.2 + Math.random()) * 10),
-                density: Math.max(0.2, Math.random()),
-                rotation: Math.max(0.002, 0.005 * Math.random()) * speed,
-            }));
-        }));
+        this.groupRef = injectNgtRef();
+        this.#store = inject(NgtStore);
+        this.#width = this.select('width');
+        this.#speed = this.select('speed');
+        this.cloudSegments = this.select('segments');
+        this.cloudDepth = this.select('depth');
+        this.cloudDepthTest = this.select('depthTest');
+        this.cloudOpacity = this.select('opacity');
+        this.cloudColor = this.select('color');
+        this.encoding = this.#store.select('gl', 'outputEncoding');
+        this.cloudTexture = injectNgtsTextureLoader(this.select('texture'));
+        this.clouds = computed(() => [...new Array(this.cloudSegments())].map((_, index) => ({
+            x: this.#width() / 2 - Math.random() * this.#width(),
+            y: this.#width() / 2 - Math.random() * this.#width(),
+            scale: 0.4 + Math.sin(((index + 1) / this.cloudSegments()) * Math.PI) * ((0.2 + Math.random()) * 10),
+            density: Math.max(0.2, Math.random()),
+            rotation: Math.max(0.002, 0.005 * Math.random()) * this.#speed(),
+        })));
     }
     onBeforeRender({ state, object }) {
-        const clouds = this.get('clouds');
+        const clouds = this.clouds();
         object.children.forEach((cloud, index) => {
             cloud.children[0].rotation.z += clouds[index].rotation;
             cloud.children[0].scale.setScalar(clouds[index].scale + (((1 + Math.sin(state.clock.getElapsedTime() / 10)) / 2) * index) / 10);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCloud, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCloud, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsCloud, isStandalone: true, selector: "ngts-cloud", inputs: { groupRef: "groupRef", opacity: "opacity", speed: "speed", width: "width", depth: "depth", segments: "segments", texture: "texture", color: "color", depthTest: "depthTest" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-group ngtCompound [ref]="groupRef">
             <ngt-group
-                [position]="[0, 0, (get('segments') / 2) * get('depth')]"
-                (beforeRender)="onBeforeRender($any($event))"
+                [position]="[0, 0, (cloudSegments() / 2) * cloudDepth()]"
+                (beforeRender)="onBeforeRender($event)"
             >
                 <ngts-billboard
-                    *ngFor="let cloud of clouds$ | ngtPush : []; let i = index"
-                    [position]="[cloud.x, cloud.y, -i * get('depth')]"
+                    *ngFor="let cloud of clouds(); let i = index"
+                    [position]="[cloud.x, cloud.y, -i * cloudDepth()]"
                 >
                     <ngt-mesh [scale]="cloud.scale" [rotation]="[0, 0, 0]">
                         <ngt-plane-geometry />
                         <!-- we use ngIf here for texture because by the time ngt-value is initialized -->
-                        <!-- [map] has not been resolved yet. we ngIf it so that texture is available before -->
+                        <!-- [map] has not been resolved yet. we ngIf it so that texture is available before hand -->
                         <ngt-mesh-standard-material
-                            *ngIf="cloudTexture$ | ngtPush as cloudTexture"
+                            *ngIf="cloudTexture() as cloudTexture"
                             [transparent]="true"
                             [map]="cloudTexture"
-                            [depthTest]="get('depthTest')"
-                            [opacity]="(cloud.scale / 6) * cloud.density * get('opacity')"
-                            [color]="get('color')"
+                            [depthTest]="cloudDepthTest()"
+                            [opacity]="(cloud.scale / 6) * cloud.density * cloudOpacity()"
+                            [color]="cloudColor()"
                         >
-                            <ngt-value [rawValue]="encoding" attach="map.encoding" />
+                            <ngt-value [rawValue]="encoding()" attach="map.encoding" />
                         </ngt-mesh-standard-material>
                     </ngt-mesh>
                 </ngts-billboard>
             </ngt-group>
         </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }, { kind: "component", type: NgtsBillboard, selector: "ngts-billboard", inputs: ["billboardRef", "follow", "lockX", "lockY", "lockZ"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NgtsBillboard, selector: "ngts-billboard", inputs: ["billboardRef", "follow", "lockX", "lockY", "lockZ"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsCloud, decorators: [{
             type: Component,
@@ -1534,36 +1629,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     template: `
         <ngt-group ngtCompound [ref]="groupRef">
             <ngt-group
-                [position]="[0, 0, (get('segments') / 2) * get('depth')]"
-                (beforeRender)="onBeforeRender($any($event))"
+                [position]="[0, 0, (cloudSegments() / 2) * cloudDepth()]"
+                (beforeRender)="onBeforeRender($event)"
             >
                 <ngts-billboard
-                    *ngFor="let cloud of clouds$ | ngtPush : []; let i = index"
-                    [position]="[cloud.x, cloud.y, -i * get('depth')]"
+                    *ngFor="let cloud of clouds(); let i = index"
+                    [position]="[cloud.x, cloud.y, -i * cloudDepth()]"
                 >
                     <ngt-mesh [scale]="cloud.scale" [rotation]="[0, 0, 0]">
                         <ngt-plane-geometry />
                         <!-- we use ngIf here for texture because by the time ngt-value is initialized -->
-                        <!-- [map] has not been resolved yet. we ngIf it so that texture is available before -->
+                        <!-- [map] has not been resolved yet. we ngIf it so that texture is available before hand -->
                         <ngt-mesh-standard-material
-                            *ngIf="cloudTexture$ | ngtPush as cloudTexture"
+                            *ngIf="cloudTexture() as cloudTexture"
                             [transparent]="true"
                             [map]="cloudTexture"
-                            [depthTest]="get('depthTest')"
-                            [opacity]="(cloud.scale / 6) * cloud.density * get('opacity')"
-                            [color]="get('color')"
+                            [depthTest]="cloudDepthTest()"
+                            [opacity]="(cloud.scale / 6) * cloud.density * cloudOpacity()"
+                            [color]="cloudColor()"
                         >
-                            <ngt-value [rawValue]="encoding" attach="map.encoding" />
+                            <ngt-value [rawValue]="encoding()" attach="map.encoding" />
                         </ngt-mesh-standard-material>
                     </ngt-mesh>
                 </ngts-billboard>
             </ngt-group>
         </ngt-group>
     `,
-                    imports: [NgFor, NgtPush, NgtsBillboard, NgIf],
+                    imports: [NgFor, NgtsBillboard, NgIf],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { groupRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { groupRef: [{
                 type: Input
             }], opacity: [{
                 type: Input
@@ -1584,7 +1679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 extend({ Group, Mesh, MeshBasicMaterial, OrthographicCamera });
-class NgtsContactShadows extends NgtRxStore {
+class NgtsContactShadows extends NgtSignalStore {
     set opacity(opacity) {
         this.set({ opacity });
     }
@@ -1619,21 +1714,19 @@ class NgtsContactShadows extends NgtRxStore {
         this.set({ depthWrite });
     }
     set renderOrder(renderOrder) {
-        this.set({ renderOrder });
-    }
-    constructor() {
-        super();
-        this.store = inject(NgtStore);
-        this.shadowCameraRef = injectNgtRef();
-        this.encoding = this.store.get('gl', 'outputEncoding');
-        this.contactShadows$ = this.select('contactShadows');
-        this.Math = Math;
-        this.contactShadowsRef = injectNgtRef();
-        injectBeforeRender(this.onBeforeRender.bind(this, 0));
+        this.set({ renderOrder });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    #store;
+    #scale;
+    #width;
+    #height;
+    #far;
+    #resolution;
+    #color;
+    #scaledWidth;
+    #scaledHeight;
+    constructor() {
+        super({
             scale: 10,
             frames: Infinity,
             opacity: 1,
@@ -1647,16 +1740,40 @@ class NgtsContactShadows extends NgtRxStore {
             depthWrite: false,
             renderOrder: 0,
         });
-        this.connect('scaledWidth', this.select(['width', 'scale'], ({ width, scale }) => width * (Array.isArray(scale) ? scale[0] : scale || 1)));
-        this.connect('scaledHeight', this.select(['height', 'scale'], ({ height, scale }) => height * (Array.isArray(scale) ? scale[1] : scale || 1)));
-        this.connect('cameraArgs', this.select(['scaledWidth', 'scaledHeight', 'far'], ({ scaledWidth: width, scaledHeight: height, far }) => {
-            return [-width / 2, width / 2, height / 2, -height / 2, 0, far];
-        }));
-        this.connect('contactShadows', this.select(['resolution', 'scaledWidth', 'scaledHeight', 'scale', 'color'], ({ resolution, scaledWidth: width, scaledHeight: height, color }) => {
+        this.contactShadowsRef = injectNgtRef();
+        this.Math = Math;
+        this.#store = inject(NgtStore);
+        this.shadowCameraRef = injectNgtRef();
+        this.#scale = this.select('scale');
+        this.#width = this.select('width');
+        this.#height = this.select('height');
+        this.#far = this.select('far');
+        this.#resolution = this.select('resolution');
+        this.#color = this.select('color');
+        this.#scaledWidth = computed(() => {
+            const scale = this.#scale();
+            return this.#width() * (Array.isArray(scale) ? scale[0] : scale || 1);
+        });
+        this.#scaledHeight = computed(() => {
+            const scale = this.#scale();
+            return this.#height() * (Array.isArray(scale) ? scale[1] : scale || 1);
+        });
+        this.encoding = this.#store.select('gl', 'outputEncoding');
+        this.shadowRenderOrder = this.select('renderOrder');
+        this.shadowOpacity = this.select('opacity');
+        this.shadowDepthWrite = this.select('depthWrite');
+        this.cameraArgs = computed(() => {
+            const width = this.#scaledWidth();
+            const height = this.#scaledHeight();
+            return [-width / 2, width / 2, height / 2, -height / 2, 0, this.#far()];
+        });
+        this.contactShadows = computed(() => {
+            const color = this.#color();
+            const resolution = this.#resolution();
             const renderTarget = new THREE.WebGLRenderTarget(resolution, resolution);
             const renderTargetBlur = new THREE.WebGLRenderTarget(resolution, resolution);
             renderTargetBlur.texture.generateMipmaps = renderTarget.texture.generateMipmaps = false;
-            const planeGeometry = new THREE.PlaneGeometry(width, height).rotateX(Math.PI / 2);
+            const planeGeometry = new THREE.PlaneGeometry(this.#scaledWidth(), this.#scaledHeight()).rotateX(Math.PI / 2);
             const blurPlane = new Mesh(planeGeometry);
             const depthMaterial = new THREE.MeshDepthMaterial();
             depthMaterial.depthTest = depthMaterial.depthWrite = false;
@@ -1667,8 +1784,8 @@ class NgtsContactShadows extends NgtRxStore {
                 };
                 shader.fragmentShader = shader.fragmentShader.replace(`void main() {`, //
                 `uniform vec3 ucolor;
-                             void main() {
-                            `);
+                 void main() {
+                `);
                 shader.fragmentShader = shader.fragmentShader.replace('vec4( vec3( 1.0 - fragCoordZ ), opacity );', 
                 // Colorize the shadow, multiply by the falloff so that the center can remain darker
                 'vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );');
@@ -1685,65 +1802,67 @@ class NgtsContactShadows extends NgtRxStore {
                 verticalBlurMaterial,
                 renderTargetBlur,
             };
-        }));
+        });
+        injectBeforeRender(this.#onBeforeRender.bind(this, 0));
     }
-    onBeforeRender(count, { scene, gl }) {
-        const { frames, blur, contactShadows: { depthMaterial, renderTarget }, smooth, } = this.get();
-        if (this.shadowCameraRef.nativeElement && (frames === Infinity || count < frames)) {
+    #onBeforeRender(count, { scene, gl }) {
+        const { frames = Infinity, blur = 1, smooth = true } = this.get();
+        const { depthMaterial, renderTarget } = this.contactShadows();
+        const shadowCamera = this.shadowCameraRef.nativeElement;
+        if (shadowCamera && (frames === Infinity || count < frames)) {
             const initialBackground = scene.background;
             scene.background = null;
             const initialOverrideMaterial = scene.overrideMaterial;
             scene.overrideMaterial = depthMaterial;
             gl.setRenderTarget(renderTarget);
-            gl.render(scene, this.shadowCameraRef.nativeElement);
+            gl.render(scene, shadowCamera);
             scene.overrideMaterial = initialOverrideMaterial;
-            this.blurShadows(blur);
+            this.#blurShadows(blur);
             if (smooth)
-                this.blurShadows(blur * 0.4);
+                this.#blurShadows(blur * 0.4);
             gl.setRenderTarget(null);
             scene.background = initialBackground;
             count++;
         }
     }
-    blurShadows(blur) {
-        const { blurPlane, horizontalBlurMaterial, verticalBlurMaterial, renderTargetBlur, renderTarget } = this.get('contactShadows');
-        const gl = this.store.get('gl');
+    #blurShadows(blur) {
+        const { blurPlane, horizontalBlurMaterial, verticalBlurMaterial, renderTargetBlur, renderTarget } = this.contactShadows();
+        const gl = this.#store.get('gl');
+        const shadowCamera = this.shadowCameraRef.nativeElement;
         blurPlane.visible = true;
         blurPlane.material = horizontalBlurMaterial;
-        horizontalBlurMaterial.uniforms.tDiffuse.value = renderTarget.texture;
-        horizontalBlurMaterial.uniforms.h.value = (blur * 1) / 256;
+        horizontalBlurMaterial.uniforms['tDiffuse'].value = renderTarget.texture;
+        horizontalBlurMaterial.uniforms['h'].value = (blur * 1) / 256;
         gl.setRenderTarget(renderTargetBlur);
-        gl.render(blurPlane, this.shadowCameraRef.nativeElement);
+        gl.render(blurPlane, shadowCamera);
         blurPlane.material = verticalBlurMaterial;
-        verticalBlurMaterial.uniforms.tDiffuse.value = renderTargetBlur.texture;
-        verticalBlurMaterial.uniforms.v.value = (blur * 1) / 256;
+        verticalBlurMaterial.uniforms['tDiffuse'].value = renderTargetBlur.texture;
+        verticalBlurMaterial.uniforms['v'].value = (blur * 1) / 256;
         gl.setRenderTarget(renderTarget);
-        gl.render(blurPlane, this.shadowCameraRef.nativeElement);
+        gl.render(blurPlane, shadowCamera);
         blurPlane.visible = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsContactShadows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsContactShadows, isStandalone: true, selector: "ngts-contact-shadows", inputs: { contactShadowsRef: "contactShadowsRef", opacity: "opacity", width: "width", height: "height", blur: "blur", far: "far", smooth: "smooth", resolution: "resolution", frames: "frames", scale: "scale", color: "color", depthWrite: "depthWrite", renderOrder: "renderOrder" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-group ngtCompound [ref]="contactShadowsRef" [rotation]="[Math.PI / 2, 0, 0]">
-            <ng-container *ngIf="contactShadows$ | ngtPush : null as contactShadows">
-                <ngt-mesh
-                    [renderOrder]="get('renderOrder')"
-                    [geometry]="contactShadows.planeGeometry"
-                    [scale]="[1, -1, 1]"
-                    [rotation]="[-Math.PI / 2, 0, 0]"
+            <ngt-mesh
+                [renderOrder]="shadowRenderOrder() ?? 0"
+                [geometry]="contactShadows().planeGeometry"
+                [scale]="[1, -1, 1]"
+                [rotation]="[-Math.PI / 2, 0, 0]"
+            >
+                <ngt-mesh-basic-material
+                    [map]="contactShadows().renderTarget.texture"
+                    [transparent]="true"
+                    [opacity]="shadowOpacity() ?? 1"
+                    [depthWrite]="shadowDepthWrite() ?? false"
                 >
-                    <ngt-mesh-basic-material
-                        [map]="contactShadows.renderTarget.texture"
-                        [transparent]="true"
-                        [opacity]="get('opacity')"
-                        [depthWrite]="get('depthWrite')"
-                    >
-                        <ngt-value [rawValue]="encoding" attach="map.encoding" />
-                    </ngt-mesh-basic-material>
-                </ngt-mesh>
-                <ngt-orthographic-camera *args="get('cameraArgs')" [ref]="shadowCameraRef" />
-            </ng-container>
+                    <ngt-value [rawValue]="encoding()" attach="map.encoding" />
+                </ngt-mesh-basic-material>
+            </ngt-mesh>
+            <ngt-orthographic-camera *args="cameraArgs()" [ref]="shadowCameraRef" />
         </ngt-group>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NgtPush, name: "ngtPush" }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsContactShadows, decorators: [{
             type: Component,
@@ -1752,27 +1871,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     standalone: true,
                     template: `
         <ngt-group ngtCompound [ref]="contactShadowsRef" [rotation]="[Math.PI / 2, 0, 0]">
-            <ng-container *ngIf="contactShadows$ | ngtPush : null as contactShadows">
-                <ngt-mesh
-                    [renderOrder]="get('renderOrder')"
-                    [geometry]="contactShadows.planeGeometry"
-                    [scale]="[1, -1, 1]"
-                    [rotation]="[-Math.PI / 2, 0, 0]"
+            <ngt-mesh
+                [renderOrder]="shadowRenderOrder() ?? 0"
+                [geometry]="contactShadows().planeGeometry"
+                [scale]="[1, -1, 1]"
+                [rotation]="[-Math.PI / 2, 0, 0]"
+            >
+                <ngt-mesh-basic-material
+                    [map]="contactShadows().renderTarget.texture"
+                    [transparent]="true"
+                    [opacity]="shadowOpacity() ?? 1"
+                    [depthWrite]="shadowDepthWrite() ?? false"
                 >
-                    <ngt-mesh-basic-material
-                        [map]="contactShadows.renderTarget.texture"
-                        [transparent]="true"
-                        [opacity]="get('opacity')"
-                        [depthWrite]="get('depthWrite')"
-                    >
-                        <ngt-value [rawValue]="encoding" attach="map.encoding" />
-                    </ngt-mesh-basic-material>
-                </ngt-mesh>
-                <ngt-orthographic-camera *args="get('cameraArgs')" [ref]="shadowCameraRef" />
-            </ng-container>
+                    <ngt-value [rawValue]="encoding()" attach="map.encoding" />
+                </ngt-mesh-basic-material>
+            </ngt-mesh>
+            <ngt-orthographic-camera *args="cameraArgs()" [ref]="shadowCameraRef" />
         </ngt-group>
     `,
-                    imports: [NgIf, NgtPush, NgtArgs],
+                    imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { contactShadowsRef: [{
@@ -1816,10 +1933,30 @@ const ngtsEnvironmentPresetsObj = {
     lobby: 'st-fagans/st_fagans_interior_1k.hdr',
 };
 
-class NgtsEnvironmentInputs extends NgtRxStore {
+class NgtsEnvironmentInput extends NgtSignalStore {
     constructor() {
         super(...arguments);
-        this.store = inject(NgtStore);
+        this.environmentFrames = this.select('frames');
+        this.environmentNear = this.select('near');
+        this.environmentFar = this.select('far');
+        this.environmentResolution = this.select('resolution');
+        this.environmentBackground = this.select('background');
+        this.environmentBlur = this.select('blur');
+        this.environmentMap = this.select('map');
+        this.environmentFiles = this.select('files');
+        this.environmentPath = this.select('path');
+        this.environmentPreset = this.select('preset');
+        this.environmentScene = this.select('scene');
+        this.environmentExtensions = this.select('extensions');
+        this.environmentGround = this.select('ground');
+        this.environmentEncoding = this.select('encoding');
+        this.environmentParams = computed(() => ({
+            files: this.environmentFiles(),
+            path: this.environmentPath(),
+            preset: this.environmentPreset(),
+            extensions: this.environmentExtensions(),
+            encoding: this.environmentEncoding(),
+        }));
     }
     set frames(frames) {
         this.set({ frames });
@@ -1863,10 +2000,10 @@ class NgtsEnvironmentInputs extends NgtRxStore {
     set encoding(encoding) {
         this.set({ encoding });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentInputs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironmentInputs, inputs: { frames: "frames", near: "near", far: "far", resolution: "resolution", background: "background", blur: "blur", map: "map", files: "files", path: "path", preset: "preset", scene: "scene", extensions: "extensions", ground: "ground", encoding: "encoding" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentInput, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironmentInput, inputs: { frames: "frames", near: "near", far: "far", resolution: "resolution", background: "background", blur: "blur", map: "map", files: "files", path: "path", preset: "preset", scene: "scene", extensions: "extensions", ground: "ground", encoding: "encoding" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentInputs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentInput, decorators: [{
             type: Directive
         }], propDecorators: { frames: [{
                 type: Input
@@ -1922,72 +2059,93 @@ function setEnvProps(background, scene, defaultScene, texture, blur = 0) {
     };
 }
 const CUBEMAP_ROOT = 'https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/';
-function injectNgtsEnvironment(paramsFactory) {
-    let p = {
-        files: ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
-        path: '',
-        preset: undefined,
-        encoding: undefined,
-    };
-    const params = paramsFactory(p);
-    const params$ = isObservable(params) ? params : of(params);
-    const textureRef = injectNgtRef();
-    const { destroy$ } = injectNgtDestroy(() => {
-        textureRef.nativeElement?.dispose();
-    });
-    const loaderResult = injectNgtLoader((inputs) => (Array.isArray(inputs) ? CubeTextureLoader : RGBELoader), params$.pipe(debounceTime(0), map((data) => {
-        p = data;
-        return p;
-    }), map((data) => {
-        if (data.preset) {
-            if (!(data.preset in ngtsEnvironmentPresetsObj))
-                throw new Error('Preset must be one of: ' + Object.keys(ngtsEnvironmentPresetsObj).join(', '));
-            data.files = ngtsEnvironmentPresetsObj[data.preset];
-            data.path = CUBEMAP_ROOT;
-        }
-        return Array.isArray(data.files) ? [data.files] : data.files;
-    })), (loader) => {
-        if (p.path) {
-            loader.setPath(p.path);
-        }
-        if (p.extensions) {
-            p.extensions(loader);
-        }
-    });
-    loaderResult.pipe(takeUntil(destroy$)).subscribe((results) => {
-        const texture = Array.isArray(p.files) ? results[0] : results;
-        texture.mapping = Array.isArray(p.files) ? CubeReflectionMapping : EquirectangularReflectionMapping;
-        texture.encoding = (p.encoding ?? Array.isArray(p.files)) ? sRGBEncoding : LinearEncoding;
-        textureRef.nativeElement = texture;
+function injectNgtsEnvironment(paramsFactory, injector) {
+    injector = assertInjectionContext(injectNgtsEnvironment, injector);
+    return runInInjectionContext(injector, () => {
+        const cdr = inject(ChangeDetectorRef);
+        const textureRef = injectNgtRef();
+        inject(DestroyRef).onDestroy(() => {
+            textureRef.untracked.dispose();
+        });
+        const params = computed(() => {
+            let { files, preset, encoding, path, extensions } = paramsFactory();
+            if (files == null) {
+                files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'];
+            }
+            if (path == null) {
+                path = '';
+            }
+            if (preset) {
+                if (!(preset in ngtsEnvironmentPresetsObj))
+                    throw new Error('Preset must be one of: ' + Object.keys(ngtsEnvironmentPresetsObj).join(', '));
+                files = ngtsEnvironmentPresetsObj[preset];
+                path = CUBEMAP_ROOT;
+            }
+            return { files, preset, encoding, path, extensions };
+        });
+        const loaderResult = injectNgtLoader(
+        // @ts-expect-error
+        () => {
+            const { files } = params();
+            return Array.isArray(files) ? CubeTextureLoader : RGBELoader;
+        }, () => {
+            const { files } = params();
+            return Array.isArray(files) ? [files] : files;
+        }, {
+            extensions: (loader) => {
+                const { path, extensions } = params();
+                loader.setPath(path);
+                if (extensions)
+                    extensions(loader);
+            },
+        });
+        effect(() => {
+            const result = loaderResult();
+            if (!result)
+                return;
+            const { files, encoding } = params();
+            const texture = Array.isArray(files) ? result[0] : result;
+            texture.mapping = Array.isArray(files) ? CubeReflectionMapping : EquirectangularReflectionMapping;
+            texture.encoding = encoding ?? Array.isArray(files) ? sRGBEncoding : LinearEncoding;
+            textureRef.nativeElement = texture;
+            safeDetectChanges(cdr);
+        }, { allowSignalWrites: true });
+        return textureRef;
     });
-    return textureRef;
 }
 
-class NgtsEnvironmentCube extends NgtsEnvironmentInputs {
-    constructor() {
-        super(...arguments);
-        this.textureRef = injectNgtsEnvironment((params) => this.select().pipe(startWith(params)));
-    }
-    initialize() {
-        super.initialize();
-        this.set({ background: false });
+class NgtsEnvironmentCube {
+    #store;
+    set background(background) {
+        this.environmentInput.set({ background });
     }
-    ngOnInit() {
-        this.setEnvProps();
+    constructor() {
+        this.environmentInput = inject(NgtsEnvironmentInput);
+        this.#store = inject(NgtStore);
+        this.textureRef = injectNgtsEnvironment(this.environmentInput.environmentParams);
+        this.environmentInput.patch({ background: false });
+        requestAnimationInInjectionContext(() => {
+            this.#setEnvProps();
+        });
     }
-    setEnvProps() {
-        this.effect(combineLatest([
-            this.store.select('scene'),
-            this.select('scene').pipe(startWithUndefined()),
-            this.select('background'),
-            this.select('blur').pipe(startWithUndefined()),
-            this.textureRef.$,
-        ]), ([defaultScene, scene, background, blur, texture]) => {
-            return setEnvProps(background, scene, defaultScene, texture, blur);
+    #setEnvProps() {
+        const scene = this.#store.select('scene');
+        const trigger = computed(() => ({
+            defaultScene: scene(),
+            scene: this.environmentInput.environmentScene(),
+            background: this.environmentInput.environmentBackground(),
+            blur: this.environmentInput.environmentBlur(),
+            texture: this.textureRef.nativeElement,
+        }));
+        effect((onCleanup) => {
+            const { background, defaultScene, scene, blur, texture } = trigger();
+            if (!texture)
+                return;
+            onCleanup(setEnvProps(background, scene, defaultScene, texture, blur));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentCube, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironmentCube, isStandalone: true, selector: "ngts-environment-cube", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentCube, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironmentCube, isStandalone: true, selector: "ngts-environment-cube", inputs: { background: "background" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentCube, decorators: [{
             type: Directive,
@@ -1995,31 +2153,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-environment-cube',
                     standalone: true,
                 }]
-        }] });
+        }], ctorParameters: function () { return []; }, propDecorators: { background: [{
+                type: Input
+            }] } });
 
-class NgtsEnvironmentMap extends NgtsEnvironmentInputs {
-    initialize() {
-        super.initialize();
-        this.set({ background: false });
-    }
-    ngOnInit() {
-        this.setEnvProps();
-    }
-    setEnvProps() {
-        this.effect(combineLatest([
-            this.store.select('scene'),
-            this.select('map'),
-            this.select('scene').pipe(startWithUndefined()),
-            this.select('background'),
-            this.select('blur').pipe(startWithUndefined()),
-        ]), ([defaultScene, map, scene, background, blur]) => {
-            if (map) {
-                return setEnvProps(background, scene, defaultScene, map, blur);
-            }
+class NgtsEnvironmentMap {
+    #store;
+    set map(map) {
+        this.environmentInput.set({ map });
+    }
+    set background(background) {
+        this.environmentInput.set({ background });
+    }
+    constructor() {
+        this.environmentInput = inject(NgtsEnvironmentInput);
+        this.#store = inject(NgtStore);
+        this.environmentInput.patch({ background: false });
+        requestAnimationInInjectionContext(() => {
+            this.#setEnvProps();
+        });
+    }
+    #setEnvProps() {
+        const scene = this.#store.select('scene');
+        const trigger = computed(() => ({
+            defaultScene: scene(),
+            scene: this.environmentInput.environmentScene(),
+            background: this.environmentInput.environmentBackground(),
+            blur: this.environmentInput.environmentBlur(),
+            texture: this.environmentInput.environmentMap(),
+        }));
+        effect((onCleanup) => {
+            const { background, defaultScene, scene, blur, texture } = trigger();
+            if (!texture)
+                return;
+            onCleanup(setEnvProps(background, scene, defaultScene, texture, blur));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentMap, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironmentMap, isStandalone: true, selector: "ngts-environment-map", usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentMap, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironmentMap, isStandalone: true, selector: "ngts-environment-map", inputs: { map: "map", background: "background" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentMap, decorators: [{
             type: Directive,
@@ -2027,38 +2198,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-environment-map',
                     standalone: true,
                 }]
-        }] });
+        }], ctorParameters: function () { return []; }, propDecorators: { map: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }] } });
 
 extend({ GroundProjectedEnv });
-class NgtsEnvironmentGround extends NgtsEnvironmentInputs {
+class NgtsEnvironmentGround {
     constructor() {
-        super(...arguments);
-        this.defaultTexture = injectNgtsEnvironment((params) => this.select().pipe(startWith(params)));
-    }
-    ngOnInit() {
-        this.connect('texture', combineLatest([this.select('map').pipe(startWithUndefined()), this.defaultTexture.$]).pipe(map(([map, texture]) => map || texture)));
-        this.connect('groundArgs', this.select('texture').pipe(map((texture) => [texture])));
-        this.connect('groundHeight', this.select(['ground'], ({ ground }) => ground?.height));
-        this.connect('groundRadius', this.select(['ground'], ({ ground }) => ground?.radius));
-        this.connect('groundScale', this.select(['ground'], ({ ground }) => ground?.scale ?? 1000));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentGround, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironmentGround, isStandalone: true, selector: "ngts-environment-ground", usesInheritance: true, ngImport: i0, template: `
-        <ngts-environment-map
-            [background]="get('background')"
-            [blur]="get('blur')"
-            [scene]="get('scene')"
-            [map]="get('texture')"
-        />
-        <ng-container *ngIf="get('groundArgs') as groundArgs">
-            <ngt-ground-projected-env
-                *args="groundArgs"
-                [scale]="get('groundScale')"
-                [height]="get('groundHeight')"
-                [radius]="get('groundRadius')"
-            />
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map" }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        this.environmentInput = inject(NgtsEnvironmentInput);
+        this.#defaultTexture = injectNgtsEnvironment(this.environmentInput.environmentParams);
+        this.texture = computed(() => {
+            const defaultTexture = this.#defaultTexture.nativeElement;
+            return this.environmentInput.environmentMap() || defaultTexture;
+        });
+        this.groundArgs = computed(() => (this.texture() ? [this.texture()] : []));
+        this.height = computed(() => this.environmentInput.environmentGround()?.height);
+        this.radius = computed(() => this.environmentInput.environmentGround()?.radius);
+        this.scale = computed(() => this.environmentInput.environmentGround()?.scale ?? 1000);
+    }
+    #defaultTexture;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentGround, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironmentGround, isStandalone: true, selector: "ngts-environment-ground", ngImport: i0, template: `
+        <ngts-environment-map [map]="texture()" [background]="!!environmentInput.environmentBackground()" />
+        <ngt-ground-projected-env *args="groundArgs()" [scale]="scale()" [height]="height()" [radius]="radius()" />
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map", inputs: ["map", "background"] }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentGround, decorators: [{
             type: Component,
@@ -2066,94 +2231,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-environment-ground',
                     standalone: true,
                     template: `
-        <ngts-environment-map
-            [background]="get('background')"
-            [blur]="get('blur')"
-            [scene]="get('scene')"
-            [map]="get('texture')"
-        />
-        <ng-container *ngIf="get('groundArgs') as groundArgs">
-            <ngt-ground-projected-env
-                *args="groundArgs"
-                [scale]="get('groundScale')"
-                [height]="get('groundHeight')"
-                [radius]="get('groundRadius')"
-            />
-        </ng-container>
+        <ngts-environment-map [map]="texture()" [background]="!!environmentInput.environmentBackground()" />
+        <ngt-ground-projected-env *args="groundArgs()" [scale]="scale()" [height]="height()" [radius]="radius()" />
     `,
-                    imports: [NgtsEnvironmentMap, NgtArgs, NgIf],
+                    imports: [NgtsEnvironmentMap, NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }] });
 
 extend({ CubeCamera });
-class NgtsEnvironmentPortal extends NgtsEnvironmentInputs {
-    initialize() {
-        super.initialize();
-        this.set({ near: 1, far: 1000, resolution: 256, frames: 1, background: false, preset: undefined });
-        this.connect('fbo', this.select(['resolution'], ({ resolution }) => {
-            const fbo = new THREE.WebGLCubeRenderTarget(resolution);
-            fbo.texture.type = HalfFloatType;
-            return fbo;
-        }));
-        this.connect('cameraArgs', this.select(['fbo', 'near', 'far'], ({ near, far, fbo }) => [near, far, fbo]));
-    }
+class NgtsEnvironmentPortal {
+    #store;
+    #fbo;
     constructor() {
-        super();
+        this.environmentInput = inject(NgtsEnvironmentInput);
+        this.#store = inject(NgtStore);
         this.virtualSceneRef = injectNgtRef(prepare(new THREE.Scene()));
         this.cubeCameraRef = injectNgtRef();
-        injectBeforeRender(this.onBeforeRender.bind(this, 1));
-    }
-    ngOnInit() {
-        this.setEnvProps();
-    }
-    setEnvProps() {
-        this.effect(combineLatest([
-            this.store.select('gl'),
-            this.store.select('scene'),
-            this.select('fbo'),
-            this.select('scene'),
-            this.select('background'),
-            this.select('frames'),
-            this.select('blur'),
-            this.virtualSceneRef.$,
-            this.cubeCameraRef.$,
-        ]), ([gl, defaultScene, fbo, scene, background, frames, blur, virtualScene, camera]) => {
+        this.#fbo = computed(() => {
+            const fbo = new THREE.WebGLCubeRenderTarget(this.environmentInput.environmentResolution());
+            fbo.texture.type = THREE.HalfFloatType;
+            return fbo;
+        });
+        this.cameraArgs = computed(() => [
+            this.environmentInput.environmentNear(),
+            this.environmentInput.environmentFar(),
+            this.#fbo(),
+        ]);
+        this.environmentInput.patch({
+            near: 1,
+            far: 1000,
+            resolution: 256,
+            frames: 1,
+            background: false,
+            preset: undefined,
+        });
+        requestAnimationInInjectionContext(() => {
+            this.#setEnvProps();
+        });
+        injectBeforeRender(this.#onBeforeRender.bind(this, 1));
+    }
+    #setEnvProps() {
+        const gl = this.#store.select('gl');
+        const scene = this.#store.select('scene');
+        const trigger = computed(() => ({
+            gl: gl(),
+            defaultScene: scene(),
+            fbo: this.#fbo(),
+            scene: this.environmentInput.environmentScene(),
+            background: this.environmentInput.environmentBackground(),
+            frames: this.environmentInput.environmentFrames(),
+            blur: this.environmentInput.environmentBlur(),
+            virtualScene: this.virtualSceneRef.nativeElement,
+            cubeCamera: this.cubeCameraRef.nativeElement,
+        }));
+        effect((onCleanup) => {
+            const { virtualScene, blur, frames, background, scene, fbo, defaultScene, gl, cubeCamera } = trigger();
+            if (!cubeCamera || !virtualScene)
+                return;
             if (frames === 1)
-                camera.update(gl, virtualScene);
-            return setEnvProps(background, scene, defaultScene, fbo.texture, blur);
+                cubeCamera.update(gl, virtualScene);
+            onCleanup(setEnvProps(background, scene, defaultScene, fbo.texture, blur));
         });
     }
-    onBeforeRender(count, { gl }) {
-        const { frames } = this.get();
+    #onBeforeRender(count, { gl }) {
+        const { frames } = this.environmentInput.get();
         if (frames === Infinity || count < frames) {
-            if (this.cubeCameraRef.nativeElement) {
-                this.cubeCameraRef.nativeElement.update(gl, this.virtualSceneRef.nativeElement);
+            const camera = this.cubeCameraRef.nativeElement;
+            const virtualScene = this.virtualSceneRef.nativeElement;
+            if (camera && virtualScene) {
+                camera.update(gl, virtualScene);
                 count++;
             }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironmentPortal, isStandalone: true, selector: "ngts-environment-portal", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironmentPortal, isStandalone: true, selector: "ngts-environment-portal", ngImport: i0, template: `
         <ngt-portal [container]="virtualSceneRef">
             <ng-template ngtPortalContent>
                 <ng-content />
-                <ngt-cube-camera *args="get('cameraArgs')" [ref]="cubeCameraRef" />
-                <ng-container *ngIf="get('files') || get('preset'); else environmentMap">
-                    <ngts-environment-cube
-                        [background]="true"
-                        [files]="get('files')"
-                        [preset]="get('preset')"
-                        [path]="get('path')"
-                        [extensions]="get('extensions')"
-                    />
+                <ngt-cube-camera *args="cameraArgs()" [ref]="cubeCameraRef" />
+                <ng-container
+                    *ngIf="
+                        environmentInput.environmentFiles() || environmentInput.environmentPreset();
+                        else environmentMap
+                    "
+                >
+                    <ngts-environment-cube [background]="true" />
                 </ng-container>
                 <ng-template #environmentMap>
-                    <ngts-environment-map [background]="true" [map]="get('map')" [extensions]="get('extensions')" />
+                    <ngts-environment-map
+                        *ngIf="environmentInput.environmentMap() as map"
+                        [background]="true"
+                        [map]="map"
+                    />
                 </ng-template>
             </ng-template>
         </ngt-portal>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"], outputs: ["beforeRender"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[ngtPortalContent]" }, { kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map" }, { kind: "directive", type: NgtsEnvironmentCube, selector: "ngts-environment-cube" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"], outputs: ["beforeRender"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[ngtPortalContent]" }, { kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map", inputs: ["map", "background"] }, { kind: "directive", type: NgtsEnvironmentCube, selector: "ngts-environment-cube", inputs: ["background"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironmentPortal, decorators: [{
             type: Component,
@@ -2164,18 +2339,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
         <ngt-portal [container]="virtualSceneRef">
             <ng-template ngtPortalContent>
                 <ng-content />
-                <ngt-cube-camera *args="get('cameraArgs')" [ref]="cubeCameraRef" />
-                <ng-container *ngIf="get('files') || get('preset'); else environmentMap">
-                    <ngts-environment-cube
-                        [background]="true"
-                        [files]="get('files')"
-                        [preset]="get('preset')"
-                        [path]="get('path')"
-                        [extensions]="get('extensions')"
-                    />
+                <ngt-cube-camera *args="cameraArgs()" [ref]="cubeCameraRef" />
+                <ng-container
+                    *ngIf="
+                        environmentInput.environmentFiles() || environmentInput.environmentPreset();
+                        else environmentMap
+                    "
+                >
+                    <ngts-environment-cube [background]="true" />
                 </ng-container>
                 <ng-template #environmentMap>
-                    <ngts-environment-map [background]="true" [map]="get('map')" [extensions]="get('extensions')" />
+                    <ngts-environment-map
+                        *ngIf="environmentInput.environmentMap() as map"
+                        [background]="true"
+                        [map]="map"
+                    />
                 </ng-template>
             </ng-template>
         </ngt-portal>
@@ -2193,70 +2371,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             type: Directive,
             args: [{ selector: 'ng-template[ngtsEnvironmentContent]', standalone: true }]
         }] });
-class NgtsEnvironment extends NgtsEnvironmentInputs {
+class NgtsEnvironment extends NgtsEnvironmentInput {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironment, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironment, isStandalone: true, selector: "ngts-environment", queries: [{ propertyName: "content", first: true, predicate: NgtsEnvironmentContent, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: `
-        <ngts-environment-ground
-            *ngIf="get('ground'); else noGround"
-            [ground]="get('ground')"
-            [map]="get('map')"
-            [scene]="get('scene')"
-            [blur]="get('blur')"
-            [background]="get('background')"
-            [preset]="get('preset')"
-            [frames]="get('frames')"
-            [far]="get('far')"
-            [near]="get('near')"
-            [resolution]="get('resolution')"
-            [files]="get('files')"
-            [path]="get('path')"
-            [extensions]="get('extensions')"
-        />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsEnvironment, isStandalone: true, selector: "ngts-environment", providers: [{ provide: NgtsEnvironmentInput, useExisting: NgtsEnvironment }], queries: [{ propertyName: "content", first: true, predicate: NgtsEnvironmentContent, descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: `
+        <ngts-environment-ground *ngIf="environmentGround(); else noGround" />
         <ng-template #noGround>
             <ngts-environment-map
-                *ngIf="get('map'); else noMap"
-                [map]="get('map')"
-                [scene]="get('scene')"
-                [blur]="get('blur')"
-                [background]="get('background')"
+                *ngIf="environmentMap() as map; else noMap"
+                [map]="map"
+                [background]="!!environmentBackground()"
             />
             <ng-template #noMap>
-                <ngts-environment-portal
-                    *ngIf="content; else noPortal"
-                    [frames]="get('frames')"
-                    [far]="get('far')"
-                    [near]="get('near')"
-                    [resolution]="get('resolution')"
-                    [map]="get('map')"
-                    [background]="get('background')"
-                    [blur]="get('blur')"
-                    [scene]="get('scene')"
-                    [files]="get('files')"
-                    [path]="get('path')"
-                    [preset]="get('preset')"
-                    [extensions]="get('extensions')"
-                >
+                <ngts-environment-portal *ngIf="content; else noPortal">
                     <ng-container *ngTemplateOutlet="content" />
                 </ngts-environment-portal>
                 <ng-template #noPortal>
-                    <ngts-environment-cube
-                        [frames]="get('frames')"
-                        [far]="get('far')"
-                        [near]="get('near')"
-                        [resolution]="get('resolution')"
-                        [map]="get('map')"
-                        [background]="get('background')"
-                        [blur]="get('blur')"
-                        [scene]="get('scene')"
-                        [files]="get('files')"
-                        [path]="get('path')"
-                        [preset]="get('preset')"
-                        [extensions]="get('extensions')"
-                    />
+                    <ngts-environment-cube [background]="!!environmentBackground()" />
                 </ng-template>
             </ng-template>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map" }, { kind: "component", type: NgtsEnvironmentGround, selector: "ngts-environment-ground" }, { kind: "directive", type: NgtsEnvironmentCube, selector: "ngts-environment-cube" }, { kind: "component", type: NgtsEnvironmentPortal, selector: "ngts-environment-portal" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtsEnvironmentMap, selector: "ngts-environment-map", inputs: ["map", "background"] }, { kind: "component", type: NgtsEnvironmentGround, selector: "ngts-environment-ground" }, { kind: "directive", type: NgtsEnvironmentCube, selector: "ngts-environment-cube", inputs: ["background"] }, { kind: "component", type: NgtsEnvironmentPortal, selector: "ngts-environment-portal" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsEnvironment, decorators: [{
             type: Component,
@@ -2264,63 +2398,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-environment',
                     standalone: true,
                     template: `
-        <ngts-environment-ground
-            *ngIf="get('ground'); else noGround"
-            [ground]="get('ground')"
-            [map]="get('map')"
-            [scene]="get('scene')"
-            [blur]="get('blur')"
-            [background]="get('background')"
-            [preset]="get('preset')"
-            [frames]="get('frames')"
-            [far]="get('far')"
-            [near]="get('near')"
-            [resolution]="get('resolution')"
-            [files]="get('files')"
-            [path]="get('path')"
-            [extensions]="get('extensions')"
-        />
+        <ngts-environment-ground *ngIf="environmentGround(); else noGround" />
         <ng-template #noGround>
             <ngts-environment-map
-                *ngIf="get('map'); else noMap"
-                [map]="get('map')"
-                [scene]="get('scene')"
-                [blur]="get('blur')"
-                [background]="get('background')"
+                *ngIf="environmentMap() as map; else noMap"
+                [map]="map"
+                [background]="!!environmentBackground()"
             />
             <ng-template #noMap>
-                <ngts-environment-portal
-                    *ngIf="content; else noPortal"
-                    [frames]="get('frames')"
-                    [far]="get('far')"
-                    [near]="get('near')"
-                    [resolution]="get('resolution')"
-                    [map]="get('map')"
-                    [background]="get('background')"
-                    [blur]="get('blur')"
-                    [scene]="get('scene')"
-                    [files]="get('files')"
-                    [path]="get('path')"
-                    [preset]="get('preset')"
-                    [extensions]="get('extensions')"
-                >
+                <ngts-environment-portal *ngIf="content; else noPortal">
                     <ng-container *ngTemplateOutlet="content" />
                 </ngts-environment-portal>
                 <ng-template #noPortal>
-                    <ngts-environment-cube
-                        [frames]="get('frames')"
-                        [far]="get('far')"
-                        [near]="get('near')"
-                        [resolution]="get('resolution')"
-                        [map]="get('map')"
-                        [background]="get('background')"
-                        [blur]="get('blur')"
-                        [scene]="get('scene')"
-                        [files]="get('files')"
-                        [path]="get('path')"
-                        [preset]="get('preset')"
-                        [extensions]="get('extensions')"
-                    />
+                    <ngts-environment-cube [background]="!!environmentBackground()" />
                 </ng-template>
             </ng-template>
         </ng-template>
@@ -2333,6 +2423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         NgIf,
                         NgTemplateOutlet,
                     ],
+                    providers: [{ provide: NgtsEnvironmentInput, useExisting: NgtsEnvironment }],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { content: [{
@@ -2341,7 +2432,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 extend({ Group });
-class NgtsFloat extends NgtRxStore {
+class NgtsFloat extends NgtSignalStore {
+    #offset;
+    set enabled(enabled) {
+        this.set({ enabled });
+    }
     set speed(speed) {
         this.set({ speed });
     }
@@ -2354,30 +2449,29 @@ class NgtsFloat extends NgtRxStore {
     set floatingRange(floatingRange) {
         this.set({ floatingRange });
     }
-    initialize() {
-        super.initialize();
-        this.set({ speed: 1, rotationIntensity: 1, floatIntensity: 1, floatingRange: [-0.1, 0.1] });
-    }
     constructor() {
-        super();
-        this.offset = Math.random() * 10000;
+        super({ speed: 1, rotationIntensity: 1, floatIntensity: 1, floatingRange: [-0.1, 0.1], enabled: true });
+        this.#offset = Math.random() * 10000;
         this.floatRef = injectNgtRef();
-        injectBeforeRender(this.onBeforeRender.bind(this));
+        injectBeforeRender(this.#onBeforeRender.bind(this));
     }
-    onBeforeRender({ clock }) {
-        if (!this.floatRef.nativeElement)
+    #onBeforeRender({ clock }) {
+        const float = this.floatRef.untracked;
+        if (!float)
+            return;
+        const { enabled, speed, floatingRange, floatIntensity, rotationIntensity } = this.get();
+        if (!enabled || speed === 0)
             return;
-        const { speed, floatingRange, floatIntensity, rotationIntensity } = this.get();
-        const t = this.offset + clock.getElapsedTime();
-        this.floatRef.nativeElement.rotation.x = (Math.cos((t / 4) * speed) / 8) * rotationIntensity;
-        this.floatRef.nativeElement.rotation.y = (Math.sin((t / 4) * speed) / 8) * rotationIntensity;
-        this.floatRef.nativeElement.rotation.z = (Math.sin((t / 4) * speed) / 20) * rotationIntensity;
+        const t = this.#offset + clock.getElapsedTime();
+        float.rotation.x = (Math.cos((t / 4) * speed) / 8) * rotationIntensity;
+        float.rotation.y = (Math.sin((t / 4) * speed) / 8) * rotationIntensity;
+        float.rotation.z = (Math.sin((t / 4) * speed) / 20) * rotationIntensity;
         let yPosition = Math.sin((t / 4) * speed) / 10;
         yPosition = THREE.MathUtils.mapLinear(yPosition, -0.1, 0.1, floatingRange[0] ?? -0.1, floatingRange[1] ?? 0.1);
-        this.floatRef.nativeElement.position.y = yPosition * floatIntensity;
+        float.position.y = yPosition * floatIntensity;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsFloat, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsFloat, isStandalone: true, selector: "ngts-float", inputs: { floatRef: "floatRef", speed: "speed", rotationIntensity: "rotationIntensity", floatIntensity: "floatIntensity", floatingRange: "floatingRange" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsFloat, isStandalone: true, selector: "ngts-float", inputs: { floatRef: "floatRef", enabled: "enabled", speed: "speed", rotationIntensity: "rotationIntensity", floatIntensity: "floatIntensity", floatingRange: "floatingRange" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-group ngtCompound>
             <ngt-group [ref]="floatRef">
                 <ng-content />
@@ -2401,6 +2495,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { floatRef: [{
                 type: Input
+            }], enabled: [{
+                type: Input
             }], speed: [{
                 type: Input
             }], rotationIntensity: [{
@@ -2411,7 +2507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
-function calcPosFromAngles(inclination, azimuth, vector = new Vector3()) {
+function calcPosFromAngles(inclination, azimuth, vector = new THREE.Vector3()) {
     const theta = Math.PI * (inclination - 0.5);
     const phi = 2 * Math.PI * (azimuth - 0.5);
     vector.x = Math.cos(phi);
@@ -2419,12 +2515,7 @@ function calcPosFromAngles(inclination, azimuth, vector = new Vector3()) {
     vector.z = Math.sin(phi);
     return vector;
 }
-class NgtsSky extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.skyRef = injectNgtRef();
-        this.sky = new Sky();
-    }
+class NgtsSky extends NgtSignalStore {
     set distance(distance) {
         this.set({ distance });
     }
@@ -2449,31 +2540,41 @@ class NgtsSky extends NgtRxStore {
     set turbidity(turbidity) {
         this.set({ turbidity });
     }
-    initialize() {
-        super.initialize();
-        const inclination = 0.6;
-        const azimuth = 0.1;
-        this.set({
-            inclination,
-            azimuth,
+    #inclination;
+    #azimuth;
+    #sunPosition;
+    #distance;
+    constructor() {
+        super({
+            inclination: 0.6,
+            azimuth: 0.1,
             distance: 1000,
             mieCoefficient: 0.005,
             mieDirectionalG: 0.8,
             rayleigh: 0.5,
             turbidity: 10,
-            sunPosition: calcPosFromAngles(inclination, azimuth),
         });
-        this.connect('sunPosition', this.select(['inclination', 'azimuth'], ({ inclination, azimuth }) => calcPosFromAngles(inclination, azimuth)));
-        this.connect('scale', this.select(['distance'], ({ distance }) => new Vector3().setScalar(distance)));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSky, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+        this.skyRef = injectNgtRef();
+        this.#inclination = this.select('inclination');
+        this.#azimuth = this.select('azimuth');
+        this.#sunPosition = this.select('sunPosition');
+        this.#distance = this.select('distance');
+        this.sky = new Sky();
+        this.skyMieCoefficient = this.select('mieCoefficient');
+        this.skyMieDirectionalG = this.select('mieDirectionalG');
+        this.skyRayleigh = this.select('rayleigh');
+        this.skyTurbidity = this.select('turbidity');
+        this.calculatedSunPosition = computed(() => this.#sunPosition() || calcPosFromAngles(this.#inclination(), this.#azimuth()));
+        this.scale = computed(() => new THREE.Vector3().setScalar(this.#distance()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSky, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsSky, isStandalone: true, selector: "ngts-sky", inputs: { skyRef: "skyRef", distance: "distance", sunPosition: "sunPosition", inclination: "inclination", azimuth: "azimuth", mieCoefficient: "mieCoefficient", mieDirectionalG: "mieDirectionalG", rayleigh: "rayleigh", turbidity: "turbidity" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive ngtCompound *args="[sky]" [ref]="skyRef" [scale]="get('scale')">
-            <ngt-value [rawValue]="get('mieCoefficient')" attach="material.uniforms.mieCoefficient.value" />
-            <ngt-value [rawValue]="get('mieDirectionalG')" attach="material.uniforms.mieDirectionalG.value" />
-            <ngt-value [rawValue]="get('rayleigh')" attach="material.uniforms.rayleigh.value" />
-            <ngt-value [rawValue]="get('sunPosition')" attach="material.uniforms.sunPosition.value" />
-            <ngt-value [rawValue]="get('turbidity')" attach="material.uniforms.turbidity.value" />
+        <ngt-primitive ngtCompound *args="[sky]" [ref]="skyRef" [scale]="scale()">
+            <ngt-value [rawValue]="skyMieCoefficient()" attach="material.uniforms.mieCoefficient.value" />
+            <ngt-value [rawValue]="skyMieDirectionalG()" attach="material.uniforms.mieDirectionalG.value" />
+            <ngt-value [rawValue]="skyRayleigh()" attach="material.uniforms.rayleigh.value" />
+            <ngt-value [rawValue]="calculatedSunPosition()" attach="material.uniforms.sunPosition.value" />
+            <ngt-value [rawValue]="skyTurbidity()" attach="material.uniforms.turbidity.value" />
         </ngt-primitive>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
@@ -2483,18 +2584,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-sky',
                     standalone: true,
                     template: `
-        <ngt-primitive ngtCompound *args="[sky]" [ref]="skyRef" [scale]="get('scale')">
-            <ngt-value [rawValue]="get('mieCoefficient')" attach="material.uniforms.mieCoefficient.value" />
-            <ngt-value [rawValue]="get('mieDirectionalG')" attach="material.uniforms.mieDirectionalG.value" />
-            <ngt-value [rawValue]="get('rayleigh')" attach="material.uniforms.rayleigh.value" />
-            <ngt-value [rawValue]="get('sunPosition')" attach="material.uniforms.sunPosition.value" />
-            <ngt-value [rawValue]="get('turbidity')" attach="material.uniforms.turbidity.value" />
+        <ngt-primitive ngtCompound *args="[sky]" [ref]="skyRef" [scale]="scale()">
+            <ngt-value [rawValue]="skyMieCoefficient()" attach="material.uniforms.mieCoefficient.value" />
+            <ngt-value [rawValue]="skyMieDirectionalG()" attach="material.uniforms.mieDirectionalG.value" />
+            <ngt-value [rawValue]="skyRayleigh()" attach="material.uniforms.rayleigh.value" />
+            <ngt-value [rawValue]="calculatedSunPosition()" attach="material.uniforms.sunPosition.value" />
+            <ngt-value [rawValue]="skyTurbidity()" attach="material.uniforms.turbidity.value" />
         </ngt-primitive>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { skyRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { skyRef: [{
                 type: Input
             }], distance: [{
                 type: Input
@@ -2514,51 +2615,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
-const SparklesMaterial = shaderMaterial({ time: 0, pixelRatio: 1 }, 
-// language=GLSL
-`
-uniform float pixelRatio;
-uniform float time;
-
-attribute float size;
-attribute float speed;
-attribute float opacity;
-attribute vec3 noise;
-attribute vec3 color;
-
-varying vec3 vColor;
-varying float vOpacity;
-
-void main() {
-  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-
-  modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
-  modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
-  modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
-
-  vec4 viewPosition = viewMatrix * modelPosition;
-  vec4 projectionPostion = projectionMatrix * viewPosition;
-
-  gl_Position = projectionPostion;
-  gl_PointSize = size * 25. * pixelRatio;
-  gl_PointSize *= (1.0 / - viewPosition.z);
-
-  vColor = color;
-  vOpacity = opacity;
-}
-  `, 
-// language=GLSL
-`
-varying vec3 vColor;
-varying float vOpacity;
-
-void main() {
-  float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
-  float strength = 0.05 / distanceToCenter - 0.1;
-
-  gl_FragColor = vec4(vColor, strength * vOpacity);
-}
-  `);
 extend({ SparklesMaterial, Points, BufferGeometry, BufferAttribute });
 const isFloat32Array = (def) => def && def.constructor === Float32Array;
 const expandColor = (v) => [v.r, v.g, v.b];
@@ -2589,7 +2645,7 @@ function usePropAsIsOrAsAttribute(count, prop, setDefault) {
     }
     return Float32Array.from({ length: count }, setDefault);
 }
-class NgtsSparkles extends NgtRxStore {
+class NgtsSparkles extends NgtSignalStore {
     /** Number of particles (default: 100) */
     set count(count) {
         this.set({ count });
@@ -2618,63 +2674,59 @@ class NgtsSparkles extends NgtRxStore {
     set noise(noise) {
         this.set({ noise });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    #store;
+    #count;
+    #scale;
+    #color;
+    #getComputed(nameOrComputed, count, setDefault) {
+        const value = typeof nameOrComputed !== 'string' && isSignal(nameOrComputed)
+            ? nameOrComputed
+            : this.select(nameOrComputed);
+        return computed(() => usePropAsIsOrAsAttribute(count(), value(), setDefault));
+    }
+    constructor() {
+        super({
             noise: 1,
             count: 100,
             speed: 1,
             opacity: 1,
             scale: 1,
         });
-        this.connect('positions', this.select(['count', 'scale'], ({ count, scale }) => Float32Array.from(Array.from({ length: count }, () => normalizeVector(scale).map(MathUtils.randFloatSpread)).flat())));
-        this.connect('sizes', this.getAttribute$('size', { setDefault: Math.random }));
-        this.connect('opacities', this.getAttribute$('opacity'));
-        this.connect('speeds', this.getAttribute$('speed'));
-        this.connect('noises', this.getAttribute$('noise', {
-            countValue: (_, count) => count * 3,
-        }));
-        this.connect('colors', this.getAttribute$('color', {
-            keyValue: (color) => (!isFloat32Array(color) ? new Color(color) : color),
-            countValue: (color, count) => (color === undefined ? count * 3 : count),
-            setDefault: () => 1,
-        }));
-    }
-    constructor() {
-        super();
-        this.store = inject(NgtStore);
-        this.dpr = this.store.get('viewport', 'dpr');
-        this.materialRef = injectNgtRef();
         this.pointsRef = injectNgtRef();
-        injectBeforeRender(this.onBeforeRender.bind(this));
-    }
-    onBeforeRender({ clock }) {
+        this.#store = inject(NgtStore);
+        this.#count = this.select('count');
+        this.#scale = this.select('scale');
+        this.#color = this.select('color');
+        this.materialRef = injectNgtRef();
+        this.dpr = this.#store.select('viewport', 'dpr');
+        this.positions = computed(() => Float32Array.from(Array.from({ length: this.#count() }, () => normalizeVector(this.#scale()).map(MathUtils.randFloatSpread)).flat()));
+        this.sizes = this.#getComputed('size', this.#count, Math.random);
+        this.opacities = this.#getComputed('opacity', this.#count);
+        this.speeds = this.#getComputed('speed', this.#count);
+        this.noises = this.#getComputed('noise', () => this.#count() * 3);
+        this.colors = this.#getComputed(computed(() => {
+            const color = this.#color();
+            return !isFloat32Array(color) ? new THREE.Color(color) : color;
+        }), () => (this.#color() === undefined ? this.#count() * 3 : this.#count()), () => 1);
+        injectBeforeRender(this.#onBeforeRender.bind(this));
+    }
+    #onBeforeRender({ clock }) {
         if (!this.materialRef.nativeElement)
             return;
         this.materialRef.nativeElement.uniforms['time'].value = clock.elapsedTime;
     }
-    getAttribute$(key, options) {
-        options ??= {};
-        if (!options.keyValue) {
-            options.keyValue = (value) => value;
-        }
-        if (!options.countValue) {
-            options.countValue = (_, count) => count;
-        }
-        return this.select(key).pipe(startWith(this.get(key) || undefined), withLatestFrom(this.select('count')), map(([value, count]) => usePropAsIsOrAsAttribute(options.countValue(value, count), options.keyValue(value, count), options?.setDefault)));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSparkles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsSparkles, isStandalone: true, selector: "ngts-sparkles", inputs: { pointsRef: "pointsRef", count: "count", speed: "speed", opacity: "opacity", color: "color", size: "size", scale: "scale", noise: "noise" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-points ngtCompount [ref]="pointsRef">
             <ngt-buffer-geometry>
-                <ngt-buffer-attribute *args="[get('positions'), 3]" attach="attributes.position" />
-                <ngt-buffer-attribute *args="[get('sizes'), 1]" attach="attributes.size" />
-                <ngt-buffer-attribute *args="[get('opacities'), 1]" attach="attributes.opacity" />
-                <ngt-buffer-attribute *args="[get('speeds'), 1]" attach="attributes.speed" />
-                <ngt-buffer-attribute *args="[get('colors'), 3]" attach="attributes.color" />
-                <ngt-buffer-attribute *args="[get('noises'), 3]" attach="attributes.noise" />
+                <ngt-buffer-attribute *args="[positions(), 3]" attach="attributes.position" />
+                <ngt-buffer-attribute *args="[sizes(), 1]" attach="attributes.size" />
+                <ngt-buffer-attribute *args="[opacities(), 1]" attach="attributes.opacity" />
+                <ngt-buffer-attribute *args="[speeds(), 1]" attach="attributes.speed" />
+                <ngt-buffer-attribute *args="[colors(), 3]" attach="attributes.color" />
+                <ngt-buffer-attribute *args="[noises(), 3]" attach="attributes.noise" />
             </ngt-buffer-geometry>
-            <ngt-sparkles-material [ref]="materialRef" [transparent]="true" [depthWrite]="false" [pixelRatio]="dpr" />
+            <ngt-sparkles-material [ref]="materialRef" [transparent]="true" [depthWrite]="false" [pixelRatio]="dpr()" />
         </ngt-points>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
@@ -2686,14 +2738,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     template: `
         <ngt-points ngtCompount [ref]="pointsRef">
             <ngt-buffer-geometry>
-                <ngt-buffer-attribute *args="[get('positions'), 3]" attach="attributes.position" />
-                <ngt-buffer-attribute *args="[get('sizes'), 1]" attach="attributes.size" />
-                <ngt-buffer-attribute *args="[get('opacities'), 1]" attach="attributes.opacity" />
-                <ngt-buffer-attribute *args="[get('speeds'), 1]" attach="attributes.speed" />
-                <ngt-buffer-attribute *args="[get('colors'), 3]" attach="attributes.color" />
-                <ngt-buffer-attribute *args="[get('noises'), 3]" attach="attributes.noise" />
+                <ngt-buffer-attribute *args="[positions(), 3]" attach="attributes.position" />
+                <ngt-buffer-attribute *args="[sizes(), 1]" attach="attributes.size" />
+                <ngt-buffer-attribute *args="[opacities(), 1]" attach="attributes.opacity" />
+                <ngt-buffer-attribute *args="[speeds(), 1]" attach="attributes.speed" />
+                <ngt-buffer-attribute *args="[colors(), 3]" attach="attributes.color" />
+                <ngt-buffer-attribute *args="[noises(), 3]" attach="attributes.noise" />
             </ngt-buffer-geometry>
-            <ngt-sparkles-material [ref]="materialRef" [transparent]="true" [depthWrite]="false" [pixelRatio]="dpr" />
+            <ngt-sparkles-material [ref]="materialRef" [transparent]="true" [depthWrite]="false" [pixelRatio]="dpr()" />
         </ngt-points>
     `,
                     imports: [NgtArgs],
@@ -2717,7 +2769,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
-class NgtsSpotLightInput extends NgtRxStore {
+class NgtsSpotLightInput extends NgtSignalStore {
+    constructor() {
+        super(...arguments);
+        this.lightDebug = this.select('debug');
+        this.lightColor = this.select('color');
+        this.lightOpacity = this.select('opacity');
+        this.lightRadiusBottom = this.select('radiusBottom');
+        this.lightRadiusTop = this.select('radiusTop');
+        this.lightAnglePower = this.select('anglePower');
+        this.lightAttenuation = this.select('attenuation');
+        this.lightDistance = this.select('distance');
+        this.lightAngle = this.select('angle');
+        this.lightDepthBuffer = this.select('depthBuffer');
+    }
     set depthBuffer(depthBuffer) {
         this.set({ depthBuffer });
     }
@@ -2776,54 +2841,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 extend({ Mesh });
-class NgtsVolumetricMesh extends NgtsSpotLightInput {
-    initialize() {
-        super.initialize();
-        this.set({ opacity: 1, color: 'white', distance: 5, angle: 0.15, attenuation: 5, anglePower: 5 });
-    }
+class NgtsVolumetricMesh {
+    #vec;
+    #store;
+    #camera;
+    #size;
+    #dpr;
+    #normalizedRadiusTop;
+    #normalizedRadiusBottom;
     constructor() {
-        super();
+        this.spotLightInput = inject(NgtsSpotLightInput);
         this.mesh = injectNgtRef();
         this.material = new SpotLightMaterial();
         this.nullRaycast = () => null;
-        this.vec = new THREE.Vector3();
-        this.store = inject(NgtStore);
-        this.connect('normalizedRadiusTop', this.select('radiusTop').pipe(startWithUndefined(), map((radiusTop) => (radiusTop === undefined ? 0.1 : radiusTop))));
-        this.connect('normalizedRadiusBottom', combineLatest([this.select('radiusBottom').pipe(startWithUndefined()), this.select('angle')]).pipe(map(([radiusBottom, angle]) => (radiusBottom === undefined ? angle * 7 : radiusBottom))));
-        this.connect('geometry', combineLatest([
-            this.select('normalizedRadiusTop'),
-            this.select('normalizedRadiusBottom'),
-            this.select('distance'),
-        ]).pipe(map(([radiusTop, radiusBottom, distance]) => {
+        this.#vec = new THREE.Vector3();
+        this.#store = inject(NgtStore);
+        this.#camera = this.#store.select('camera');
+        this.#size = this.#store.select('size');
+        this.#dpr = this.#store.select('viewport', 'dpr');
+        this.#normalizedRadiusTop = computed(() => this.spotLightInput.lightRadiusTop() === undefined ? 0.1 : this.spotLightInput.lightRadiusTop());
+        this.#normalizedRadiusBottom = computed(() => this.spotLightInput.lightRadiusBottom() === undefined
+            ? this.spotLightInput.lightAngle() * 7
+            : this.spotLightInput.lightRadiusBottom());
+        this.geometry = computed(() => {
+            const distance = this.spotLightInput.lightDistance();
+            const radiusTop = this.#normalizedRadiusTop();
+            const radiusBottom = this.#normalizedRadiusBottom();
             const geometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, distance, 128, 64, true);
             geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, -distance / 2, 0));
             geometry.applyMatrix4(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
             return geometry;
-        })));
-        this.connect('cameraNear', this.store.select('camera').pipe(map((camera) => camera.near)));
-        this.connect('cameraFar', this.store.select('camera').pipe(map((camera) => camera.far)));
-        this.connect('resolution', combineLatest([
-            this.select('depthBuffer').pipe(startWithUndefined()),
-            this.store.select('size'),
-            this.store.select('viewport', 'dpr'),
-        ]).pipe(map(([depthBuffer, size, dpr]) => (depthBuffer ? [size.width * dpr, size.height * dpr] : [0, 0]))));
+        });
+        this.near = computed(() => this.#camera().near);
+        this.far = computed(() => this.#camera().far);
+        this.resolution = computed(() => this.spotLightInput.lightDepthBuffer()
+            ? [this.#size().width * this.#dpr(), this.#size().height * this.#dpr()]
+            : [0, 0]);
+        this.spotLightInput.patch({
+            opacity: 1,
+            color: 'white',
+            distance: 5,
+            angle: 0.15,
+            attenuation: 5,
+            anglePower: 5,
+        });
         injectBeforeRender(() => {
-            this.material.uniforms['spotPosition'].value.copy(this.mesh.nativeElement.getWorldPosition(this.vec));
-            this.mesh.nativeElement.lookAt(this.mesh.nativeElement.parent.target.getWorldPosition(this.vec));
+            const mesh = this.mesh.nativeElement;
+            if (!mesh)
+                return;
+            this.material.uniforms['spotPosition'].value.copy(mesh.getWorldPosition(this.#vec));
+            mesh.lookAt(mesh.parent.target.getWorldPosition(this.#vec));
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsVolumetricMesh, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsVolumetricMesh, isStandalone: true, selector: "ngts-volumetric-mesh", usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh [ref]="mesh" [geometry]="get('geometry')" [raycast]="nullRaycast">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsVolumetricMesh, isStandalone: true, selector: "ngts-volumetric-mesh", ngImport: i0, template: `
+        <ngt-mesh [ref]="mesh" [geometry]="geometry()" [raycast]="nullRaycast">
             <ngt-primitive *args="[material]" attach="material">
-                <ngt-value [rawValue]="get('opacity')" attach="uniforms.opacity.value" />
-                <ngt-value [rawValue]="get('color')" attach="uniforms.lightColor.value" />
-                <ngt-value [rawValue]="get('attenuation')" attach="uniforms.attenuation.value" />
-                <ngt-value [rawValue]="get('anglePower')" attach="uniforms.anglePower.value" />
-                <ngt-value [rawvalue]="get('depthBuffer')" attach="uniforms.depth.value" />
-                <ngt-value [rawvalue]="get('cameraNear')" attach="uniforms.cameraNear.value" />
-                <ngt-value [rawvalue]="get('cameraFar')" attach="uniforms.cameraFar.value" />
-                <ngt-value [rawvalue]="get('resolution')" attach="uniforms.resolution.value" />
+                <ngt-value [rawValue]="spotLightInput.lightOpacity()" attach="uniforms.opacity.value" />
+                <ngt-value [rawValue]="spotLightInput.lightColor()" attach="uniforms.lightColor.value" />
+                <ngt-value [rawValue]="spotLightInput.lightAttenuation()" attach="uniforms.attenuation.value" />
+                <ngt-value [rawValue]="spotLightInput.lightAnglePower()" attach="uniforms.anglePower.value" />
+                <ngt-value [rawvalue]="spotLightInput.lightDepthBuffer()" attach="uniforms.depth.value" />
+                <ngt-value [rawvalue]="near()" attach="uniforms.cameraNear.value" />
+                <ngt-value [rawvalue]="far()" attach="uniforms.cameraFar.value" />
+                <ngt-value [rawvalue]="resolution()" attach="uniforms.resolution.value" />
             </ngt-primitive>
         </ngt-mesh>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
@@ -2834,16 +2915,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-volumetric-mesh',
                     standalone: true,
                     template: `
-        <ngt-mesh [ref]="mesh" [geometry]="get('geometry')" [raycast]="nullRaycast">
+        <ngt-mesh [ref]="mesh" [geometry]="geometry()" [raycast]="nullRaycast">
             <ngt-primitive *args="[material]" attach="material">
-                <ngt-value [rawValue]="get('opacity')" attach="uniforms.opacity.value" />
-                <ngt-value [rawValue]="get('color')" attach="uniforms.lightColor.value" />
-                <ngt-value [rawValue]="get('attenuation')" attach="uniforms.attenuation.value" />
-                <ngt-value [rawValue]="get('anglePower')" attach="uniforms.anglePower.value" />
-                <ngt-value [rawvalue]="get('depthBuffer')" attach="uniforms.depth.value" />
-                <ngt-value [rawvalue]="get('cameraNear')" attach="uniforms.cameraNear.value" />
-                <ngt-value [rawvalue]="get('cameraFar')" attach="uniforms.cameraFar.value" />
-                <ngt-value [rawvalue]="get('resolution')" attach="uniforms.resolution.value" />
+                <ngt-value [rawValue]="spotLightInput.lightOpacity()" attach="uniforms.opacity.value" />
+                <ngt-value [rawValue]="spotLightInput.lightColor()" attach="uniforms.lightColor.value" />
+                <ngt-value [rawValue]="spotLightInput.lightAttenuation()" attach="uniforms.attenuation.value" />
+                <ngt-value [rawValue]="spotLightInput.lightAnglePower()" attach="uniforms.anglePower.value" />
+                <ngt-value [rawvalue]="spotLightInput.lightDepthBuffer()" attach="uniforms.depth.value" />
+                <ngt-value [rawvalue]="near()" attach="uniforms.cameraNear.value" />
+                <ngt-value [rawvalue]="far()" attach="uniforms.cameraFar.value" />
+                <ngt-value [rawvalue]="resolution()" attach="uniforms.resolution.value" />
             </ngt-primitive>
         </ngt-mesh>
     `,
@@ -2855,24 +2936,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 extend({ SpotLight, SpotLightHelper, Group });
 const NGTS_SPOT_LIGHT_API = new InjectionToken('NgtsSpotLight API');
 function spotLightApiFactory(spotLight) {
-    const api = {
+    return {
         spotLight: spotLight.spotLightRef,
+        debug: spotLight.lightDebug,
     };
-    Object.defineProperty(api, 'debug', {
-        get: () => spotLight.get('debug'),
-    });
-    return api;
 }
 class NgtsSpotLight extends NgtsSpotLightInput {
-    constructor() {
-        super(...arguments);
-        this.spotLightRef = injectNgtRef();
-    }
     set volumetric(volumetric) {
         this.set({ volumetric });
     }
-    initialize() {
-        super.initialize();
+    constructor() {
+        super();
+        this.spotLightRef = injectNgtRef();
+        this.showVolumetric = this.select('volumetric');
         this.set({
             opacity: 1,
             color: 'white',
@@ -2884,33 +2960,24 @@ class NgtsSpotLight extends NgtsSpotLightInput {
             debug: false,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLight, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsSpotLight, isStandalone: true, selector: "ngts-spot-light", inputs: { spotLightRef: "spotLightRef", volumetric: "volumetric" }, providers: [{ provide: NGTS_SPOT_LIGHT_API, useFactory: spotLightApiFactory, deps: [NgtsSpotLight] }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLight, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsSpotLight, isStandalone: true, selector: "ngts-spot-light", inputs: { spotLightRef: "spotLightRef", volumetric: "volumetric" }, providers: [
+            { provide: NGTS_SPOT_LIGHT_API, useFactory: spotLightApiFactory, deps: [NgtsSpotLight] },
+            { provide: NgtsSpotLightInput, useExisting: NgtsSpotLight },
+        ], usesInheritance: true, ngImport: i0, template: `
         <ngt-group>
-            <ng-container *ngIf="get('debug') && spotLightRef.nativeElement">
+            <ng-container *ngIf="lightDebug() && spotLightRef.nativeElement">
                 <ngt-spot-light-helper *args="[spotLightRef.nativeElement]" />
             </ng-container>
             <ngt-spot-light
                 [ref]="spotLightRef"
-                [color]="get('color')"
-                [distance]="get('distance')"
-                [angle]="get('angle')"
+                [color]="lightColor()"
+                [distance]="lightDistance()"
+                [angle]="lightAngle()"
                 [castShadow]="true"
                 ngtCompound
             >
-                <ngts-volumetric-mesh
-                    *ngIf="get('volumetric')"
-                    [debug]="get('debug')"
-                    [opacity]="get('opacity')"
-                    [radiusTop]="get('radiusTop')"
-                    [radiusBottom]="get('radiusBottom')"
-                    [depthBuffer]="get('depthBuffer')"
-                    [color]="get('color')"
-                    [distance]="get('distance')"
-                    [angle]="get('angle')"
-                    [attenuation]="get('attenuation')"
-                    [anglePower]="get('anglePower')"
-                />
+                <ngts-volumetric-mesh *ngIf="showVolumetric()" />
             </ngt-spot-light>
             <ng-content />
         </ngt-group>
@@ -2923,48 +2990,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     standalone: true,
                     template: `
         <ngt-group>
-            <ng-container *ngIf="get('debug') && spotLightRef.nativeElement">
+            <ng-container *ngIf="lightDebug() && spotLightRef.nativeElement">
                 <ngt-spot-light-helper *args="[spotLightRef.nativeElement]" />
             </ng-container>
             <ngt-spot-light
                 [ref]="spotLightRef"
-                [color]="get('color')"
-                [distance]="get('distance')"
-                [angle]="get('angle')"
+                [color]="lightColor()"
+                [distance]="lightDistance()"
+                [angle]="lightAngle()"
                 [castShadow]="true"
                 ngtCompound
             >
-                <ngts-volumetric-mesh
-                    *ngIf="get('volumetric')"
-                    [debug]="get('debug')"
-                    [opacity]="get('opacity')"
-                    [radiusTop]="get('radiusTop')"
-                    [radiusBottom]="get('radiusBottom')"
-                    [depthBuffer]="get('depthBuffer')"
-                    [color]="get('color')"
-                    [distance]="get('distance')"
-                    [angle]="get('angle')"
-                    [attenuation]="get('attenuation')"
-                    [anglePower]="get('anglePower')"
-                />
+                <ngts-volumetric-mesh *ngIf="showVolumetric()" />
             </ngt-spot-light>
             <ng-content />
         </ngt-group>
     `,
+                    providers: [
+                        { provide: NGTS_SPOT_LIGHT_API, useFactory: spotLightApiFactory, deps: [NgtsSpotLight] },
+                        { provide: NgtsSpotLightInput, useExisting: NgtsSpotLight },
+                    ],
                     imports: [NgIf, NgtArgs, NgtsVolumetricMesh],
-                    providers: [{ provide: NGTS_SPOT_LIGHT_API, useFactory: spotLightApiFactory, deps: [NgtsSpotLight] }],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { spotLightRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { spotLightRef: [{
                 type: Input
             }], volumetric: [{
                 type: Input
             }] } });
 
-class NgtsSpotLightShadowMeshInput extends NgtRxStore {
+class NgtsSpotLightShadowMeshInput extends NgtSignalStore {
     constructor() {
         super(...arguments);
-        this.map$ = this.select('map');
+        this.shadowMeshDistance = this.select('distance');
+        this.shadowMeshAlphaTest = this.select('alphaTest');
+        this.shadowMeshScale = this.select('scale');
+        this.shadowMeshMap = this.select('map');
+        this.shadowMeshShader = this.select('shader');
+        this.shadowMeshWidth = this.select('width');
+        this.shadowMeshHeight = this.select('height');
     }
     set distance(distance) {
         this.set({ distance });
@@ -3011,210 +3075,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 const isSpotLight = (child) => {
     return child?.isSpotLight;
 };
-function injectShadowMeshCommon(spotLight, mesh, width, height, distance) {
-    const pos = new THREE.Vector3();
-    const dir = new THREE.Vector3();
-    const commonEffect = (instance) => {
-        instance.hold(combineLatest([
-            spotLight.$,
-            instance.select('width').pipe(startWith(width)),
-            instance.select('height').pipe(startWith(height)),
-        ]), ([light, width, height]) => {
-            if (isSpotLight(light)) {
-                console.log('[NGTS] SpotLight instance -->', light);
-                light.shadow.mapSize.set(width, height);
-                light.shadow.needsUpdate = true;
-            }
-            else {
-                throw new Error('<ngts-spot-light-shadow> must be a child of a <ngts-spot-light>');
+function injectShadowMeshCommon(spotLightRef, meshRef, width, height, distance, injector) {
+    injector = assertInjectionContext(injectShadowMeshCommon, injector);
+    runInInjectionContext(injector, () => {
+        const pos = new THREE.Vector3();
+        const dir = new THREE.Vector3();
+        requestAnimationInInjectionContext(() => {
+            effect(() => {
+                const spotLight = spotLightRef.nativeElement;
+                if (!spotLight)
+                    return;
+                if (isSpotLight(spotLight)) {
+                    spotLight.shadow.mapSize.set(width(), height());
+                    spotLight.shadow.map.setSize(width(), height());
+                    spotLight.shadow.needsUpdate = true;
+                }
+                else {
+                    throw new Error('<ngts-spot-light-shadow> must be a child of a <ngts-spot-light>');
+                }
+            });
+        });
+        injectBeforeRender(() => {
+            const spotLight = spotLightRef.nativeElement;
+            const mesh = meshRef.nativeElement;
+            if (!spotLight)
+                return;
+            const A = spotLight.position;
+            const B = spotLight.target.position;
+            dir.copy(B).sub(A);
+            const len = dir.length();
+            dir.normalize().multiplyScalar(len * distance());
+            pos.copy(A).add(dir);
+            if (mesh) {
+                mesh.position.copy(pos);
+                mesh.lookAt(spotLight.target.position);
             }
         });
-    };
-    injectBeforeRender(() => {
-        if (!spotLight.nativeElement)
-            return;
-        const A = spotLight.nativeElement.position;
-        const B = spotLight.nativeElement.target.position;
-        dir.copy(B).sub(A);
-        const len = dir.length();
-        dir.normalize().multiplyScalar(len * distance);
-        pos.copy(A).add(dir);
-        if (mesh.nativeElement) {
-            mesh.nativeElement.position.copy(pos);
-            mesh.nativeElement.lookAt(spotLight.nativeElement.target.position);
-        }
     });
-    return commonEffect;
 }
-
 extend({ Mesh, PlaneGeometry, MeshBasicMaterial });
-class NgtsSpotLightShadowNoShader extends NgtsSpotLightShadowMeshInput {
+class NgtsSpotLightShadowMeshNoShader {
+    #spotLightApi;
     constructor() {
-        super(...arguments);
-        this.mesh = injectNgtRef();
-        this.spotLightApi = inject(NGTS_SPOT_LIGHT_API);
+        this.shadowMeshInput = inject(NgtsSpotLightShadowMeshInput);
+        this.#spotLightApi = inject(NGTS_SPOT_LIGHT_API);
+        this.meshRef = injectNgtRef();
         this.DoubleSide = THREE.DoubleSide;
-        this.runInContext = createRunInContext();
-    }
-    initialize() {
-        super.initialize();
-        this.set({ distance: 0.4, alphaTest: 0.5, width: 512, height: 512 });
-        this.hold(this.select('map'), (map) => {
-            if (map) {
-                map.wrapS = map.wrapT = THREE.RepeatWrapping;
-                checkUpdate(map);
-            }
-        });
-    }
-    ngOnInit() {
-        const commonEffect = this.runInContext(() => {
-            return injectShadowMeshCommon(this.spotLightApi.spotLight, this.mesh, this.get('width'), this.get('height'), this.get('distance'));
+        this.debug = this.#spotLightApi.debug;
+        this.shadowMeshInput.patch({ distance: 0.4, alphaTest: 0.5, width: 512, height: 512, scale: 1 });
+        requestAnimationInInjectionContext(() => {
+            effect(() => {
+                const map = this.shadowMeshInput.shadowMeshMap();
+                if (map) {
+                    map.wrapS = map.wrapT = THREE.RepeatWrapping;
+                    checkUpdate(map);
+                }
+            });
         });
-        commonEffect(this);
+        injectShadowMeshCommon(this.#spotLightApi.spotLight, this.meshRef, this.shadowMeshInput.shadowMeshWidth, this.shadowMeshInput.shadowMeshHeight, this.shadowMeshInput.shadowMeshDistance);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLightShadowNoShader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsSpotLightShadowNoShader, isStandalone: true, selector: "ngts-spot-light-shadow-no-shader", usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh [ref]="mesh" [scale]="get('scale')" [castShadow]="true">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLightShadowMeshNoShader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsSpotLightShadowMeshNoShader, isStandalone: true, selector: "ngts-spot-light-shadow-mesh-no-shader", ngImport: i0, template: `
+        <ngt-mesh [ref]="meshRef" [scale]="shadowMeshInput.shadowMeshScale()" [castShadow]="true">
             <ngt-plane-geometry />
             <ngt-mesh-basic-material
                 [transparent]="true"
                 [side]="DoubleSide"
-                [alphaTest]="get('alphaTest')"
-                [alphaMap]="map$ | ngtPush"
-                [opacity]="spotLightApi.debug ? 1 : 0"
+                [alphaTest]="shadowMeshInput.shadowMeshAlphaTest()"
+                [alphaMap]="shadowMeshInput.shadowMeshMap()"
+                [opacity]="debug() ? 1 : 0"
             >
                 <ng-content />
             </ngt-mesh-basic-material>
         </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "pipe", type: NgtPush, name: "ngtPush" }] }); }
+    `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLightShadowNoShader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLightShadowMeshNoShader, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-spot-light-shadow-no-shader',
+                    selector: 'ngts-spot-light-shadow-mesh-no-shader',
                     standalone: true,
                     template: `
-        <ngt-mesh [ref]="mesh" [scale]="get('scale')" [castShadow]="true">
+        <ngt-mesh [ref]="meshRef" [scale]="shadowMeshInput.shadowMeshScale()" [castShadow]="true">
             <ngt-plane-geometry />
             <ngt-mesh-basic-material
                 [transparent]="true"
                 [side]="DoubleSide"
-                [alphaTest]="get('alphaTest')"
-                [alphaMap]="map$ | ngtPush"
-                [opacity]="spotLightApi.debug ? 1 : 0"
+                [alphaTest]="shadowMeshInput.shadowMeshAlphaTest()"
+                [alphaMap]="shadowMeshInput.shadowMeshMap()"
+                [opacity]="debug() ? 1 : 0"
             >
                 <ng-content />
             </ngt-mesh-basic-material>
         </ngt-mesh>
     `,
-                    imports: [NgtPush],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }] });
-
-extend({ Mesh, PlaneGeometry, MeshBasicMaterial });
-class NgtsSpotLightShadowShader extends NgtsSpotLightShadowMeshInput {
-    initialize() {
-        super.initialize();
-        this.set({ distance: 0.4, alphaTest: 0.5, width: 512, height: 512, scale: 1 });
-    }
+        }], ctorParameters: function () { return []; } });
+class NgtsSpotLightShadowMeshShader {
+    #spotLightApi;
+    #fsQuad;
     constructor() {
-        super();
-        this.mesh = injectNgtRef();
-        this.spotLightApi = inject(NGTS_SPOT_LIGHT_API);
+        this.shadowMeshInput = inject(NgtsSpotLightShadowMeshInput);
+        this.meshRef = injectNgtRef();
+        this.#spotLightApi = inject(NGTS_SPOT_LIGHT_API);
         this.DoubleSide = THREE.DoubleSide;
         this.RepeatWrapping = THREE.RepeatWrapping;
-        this.runInContext = createRunInContext();
-        this.texture$ = this.select('renderTarget', 'texture');
-        this.uniforms = {
-            uShadowMap: { value: this.get('map') },
-            uTime: { value: 0 },
-        };
-        this.connect('renderTarget', combineLatest([this.select('width'), this.select('height')]).pipe(map(([width, height]) => {
+        this.debug = this.#spotLightApi.debug;
+        this.renderTarget = computed(() => {
+            const width = this.shadowMeshInput.shadowMeshWidth();
+            const height = this.shadowMeshInput.shadowMeshHeight();
             return new THREE.WebGLRenderTarget(width, height, {
                 format: THREE.RGBAFormat,
                 encoding: THREE.LinearEncoding,
                 stencilBuffer: false,
                 // depthTexture: null!
             });
-        })));
-        this.connect('fsQuad', this.select('shader').pipe(map((shader) => {
+        });
+        this.uniforms = {
+            uShadowMap: { value: this.shadowMeshInput.shadowMeshMap() },
+            uTime: { value: 0 },
+        };
+        this.#fsQuad = computed(() => {
+            const shader = this.shadowMeshInput.shadowMeshShader();
+            if (!shader)
+                return null;
             return new FullScreenQuad(new THREE.ShaderMaterial({
                 uniforms: this.uniforms,
                 vertexShader: /* glsl */ `
-                              varying vec2 vUv;
+                  varying vec2 vUv;
 
-                              void main() {
-                                vUv = uv;
-                                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-                              }
-                            `,
+                  void main() {
+                    vUv = uv;
+                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                  }
+                `,
                 fragmentShader: shader,
             }));
-        })));
-        this.hold(this.select('map'), (map) => {
-            this.uniforms.uShadowMap.value = map;
-        });
-        this.effect(this.select('fsQuad'), (fsQuad) => {
-            return () => {
-                fsQuad.dispose();
-                fsQuad.material.dispose();
-            };
-        });
-        this.effect(this.select('renderTarget'), (renderTarget) => {
-            return () => {
-                renderTarget.dispose();
-            };
         });
+        this.shadowMeshInput.patch({ distance: 0.4, alphaTest: 0.5, width: 512, height: 512, scale: 4 });
+        injectShadowMeshCommon(this.#spotLightApi.spotLight, this.meshRef, this.shadowMeshInput.shadowMeshWidth, this.shadowMeshInput.shadowMeshHeight, this.shadowMeshInput.shadowMeshDistance);
         injectBeforeRender(({ delta, gl }) => {
             this.uniforms.uTime.value += delta;
-            const fsQuad = this.get('fsQuad');
-            const renderTarget = this.get('renderTarget');
+            const fsQuad = this.#fsQuad();
+            const renderTarget = this.renderTarget();
             if (fsQuad && renderTarget) {
                 gl.setRenderTarget(renderTarget);
                 fsQuad.render(gl);
                 gl.setRenderTarget(null);
             }
         });
-    }
-    ngOnInit() {
-        const commonEffect = this.runInContext(() => {
-            return injectShadowMeshCommon(this.spotLightApi.spotLight, this.mesh, this.get('width'), this.get('height'), this.get('distance'));
+        requestAnimationInInjectionContext(() => {
+            effect(() => {
+                const map = this.shadowMeshInput.shadowMeshMap();
+                if (map) {
+                    this.uniforms.uShadowMap.value = map;
+                }
+            });
+            effect((onCleanup) => {
+                const fsQuad = this.#fsQuad();
+                onCleanup(() => {
+                    if (fsQuad) {
+                        fsQuad.dispose();
+                        fsQuad.material.dispose();
+                    }
+                });
+            });
+            effect((onCleanup) => {
+                const renderTarget = this.renderTarget();
+                onCleanup(() => {
+                    renderTarget.dispose();
+                });
+            });
         });
-        commonEffect(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLightShadowShader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsSpotLightShadowShader, isStandalone: true, selector: "ngts-spot-light-shadow-shader", usesInheritance: true, ngImport: i0, template: `
-        <ngt-mesh [ref]="mesh" [scale]="get('scale')" [castShadow]="true">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLightShadowMeshShader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsSpotLightShadowMeshShader, isStandalone: true, selector: "ngts-spot-light-shadow-mesh-shader", ngImport: i0, template: `
+        <ngt-mesh [ref]="meshRef" [scale]="shadowMeshInput.shadowMeshScale()" [castShadow]="true">
             <ngt-plane-geometry />
             <ngt-mesh-basic-material
                 [transparent]="true"
                 [side]="DoubleSide"
-                [alphaTest]="get('alphaTest')"
-                [alphaMap]="texture$ | ngtPush"
-                [opacity]="spotLightApi.debug ? 1 : 0"
+                [alphaTest]="shadowMeshInput.shadowMeshAlphaTest()"
+                [alphaMap]="renderTarget().texture"
+                [opacity]="debug() ? 1 : 0"
             >
                 <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapS" />
                 <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapT" />
                 <ng-content />
             </ngt-mesh-basic-material>
         </ngt-mesh>
-    `, isInline: true, dependencies: [{ kind: "pipe", type: NgtPush, name: "ngtPush" }] }); }
+    `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLightShadowShader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLightShadowMeshShader, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-spot-light-shadow-shader',
+                    selector: 'ngts-spot-light-shadow-mesh-shader',
                     standalone: true,
                     template: `
-        <ngt-mesh [ref]="mesh" [scale]="get('scale')" [castShadow]="true">
+        <ngt-mesh [ref]="meshRef" [scale]="shadowMeshInput.shadowMeshScale()" [castShadow]="true">
             <ngt-plane-geometry />
             <ngt-mesh-basic-material
                 [transparent]="true"
                 [side]="DoubleSide"
-                [alphaTest]="get('alphaTest')"
-                [alphaMap]="texture$ | ngtPush"
-                [opacity]="spotLightApi.debug ? 1 : 0"
+                [alphaTest]="shadowMeshInput.shadowMeshAlphaTest()"
+                [alphaMap]="renderTarget().texture"
+                [opacity]="debug() ? 1 : 0"
             >
                 <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapS" />
                 <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapT" />
@@ -3222,35 +3288,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             </ngt-mesh-basic-material>
         </ngt-mesh>
     `,
-                    imports: [NgtPush],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; } });
-
 class NgtsSpotLightShadow extends NgtsSpotLightShadowMeshInput {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLightShadow, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsSpotLightShadow, isStandalone: true, selector: "ngts-spot-light-shadow", usesInheritance: true, ngImport: i0, template: `
-        <ngts-spot-light-shadow-shader
-            *ngIf="get('shader'); else noShader"
-            [distance]="get('distance')"
-            [shader]="get('shader')"
-            [alphaTest]="get('alphaTest')"
-            [scale]="get('scale')"
-            [map]="get('map')"
-            [width]="get('width')"
-            [height]="get('height')"
-        />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsSpotLightShadow, isStandalone: true, selector: "ngts-spot-light-shadow", providers: [{ provide: NgtsSpotLightShadowMeshInput, useExisting: NgtsSpotLightShadow }], usesInheritance: true, ngImport: i0, template: `
+        <ngts-spot-light-shadow-mesh-shader *ngIf="shadowMeshShader(); else noShader" />
         <ng-template #noShader>
-            <ngts-spot-light-shadow-no-shader
-                [distance]="get('distance')"
-                [alphaTest]="get('alphaTest')"
-                [scale]="get('scale')"
-                [map]="get('map')"
-                [width]="get('width')"
-                [height]="get('height')"
-            />
+            <ngts-spot-light-shadow-mesh-no-shader />
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtsSpotLightShadowShader, selector: "ngts-spot-light-shadow-shader" }, { kind: "component", type: NgtsSpotLightShadowNoShader, selector: "ngts-spot-light-shadow-no-shader" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsSpotLightShadowMeshShader, selector: "ngts-spot-light-shadow-mesh-shader" }, { kind: "component", type: NgtsSpotLightShadowMeshNoShader, selector: "ngts-spot-light-shadow-mesh-no-shader" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsSpotLightShadow, decorators: [{
             type: Component,
@@ -3258,28 +3306,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-spot-light-shadow',
                     standalone: true,
                     template: `
-        <ngts-spot-light-shadow-shader
-            *ngIf="get('shader'); else noShader"
-            [distance]="get('distance')"
-            [shader]="get('shader')"
-            [alphaTest]="get('alphaTest')"
-            [scale]="get('scale')"
-            [map]="get('map')"
-            [width]="get('width')"
-            [height]="get('height')"
-        />
+        <ngts-spot-light-shadow-mesh-shader *ngIf="shadowMeshShader(); else noShader" />
         <ng-template #noShader>
-            <ngts-spot-light-shadow-no-shader
-                [distance]="get('distance')"
-                [alphaTest]="get('alphaTest')"
-                [scale]="get('scale')"
-                [map]="get('map')"
-                [width]="get('width')"
-                [height]="get('height')"
-            />
+            <ngts-spot-light-shadow-mesh-no-shader />
         </ng-template>
     `,
-                    imports: [NgtsSpotLightShadowShader, NgtsSpotLightShadowNoShader, NgIf],
+                    imports: [NgtsSpotLightShadowMeshShader, NgtsSpotLightShadowMeshNoShader, NgIf],
+                    providers: [{ provide: NgtsSpotLightShadowMeshInput, useExisting: NgtsSpotLightShadow }],
                 }]
         }] });
 
@@ -3303,13 +3336,14 @@ const presets = {
 };
 class NgtsStageRefit {
     constructor() {
-        this.boundsApi = inject(NGTS_BOUNDS_API);
+        this.#boundsApi = inject(NGTS_BOUNDS_API);
         this.radius = 0;
         this.adjustCamera = true;
     }
+    #boundsApi;
     ngOnChanges() {
         if (this.adjustCamera) {
-            this.boundsApi.refresh().clip().fit();
+            this.#boundsApi().refresh().clip().fit();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsStageRefit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -3324,13 +3358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 extend({ AmbientLight, SpotLight, Vector2, PointLight, Group });
-class NgtsStage extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.cdr = inject(ChangeDetectorRef);
-        this.Number = Number;
-        this.centered = new EventEmitter();
-    }
+class NgtsStage extends NgtSignalStore {
+    #cdr;
     set preset(preset) {
         this.set({ preset });
     }
@@ -3349,21 +3378,33 @@ class NgtsStage extends NgtRxStore {
     set center(center) {
         this.set({ center });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    #preset;
+    #environment;
+    constructor() {
+        super({
             adjustCamera: true,
             intensity: 0.5,
             shadows: 'contact',
             environment: 'city',
             preset: 'rembrandt',
-            radius: 0,
-            width: 0,
-            height: 0,
-            depth: 0,
         });
-        this.connect('config', this.select('preset').pipe(map((preset) => (typeof preset === 'string' ? presets[preset] : preset))));
-        this.connect('shadowsInfo', this.select('shadows').pipe(map((shadows) => {
+        this.#cdr = inject(ChangeDetectorRef);
+        this.Number = Number;
+        this.centered = new EventEmitter();
+        this.boundingState = createSignal({ radius: 0, width: 0, height: 0, depth: 0 });
+        this.#preset = this.select('preset');
+        this.#environment = this.select('environment');
+        this.stageShadows = this.select('shadows');
+        this.stageIntensity = this.select('intensity');
+        this.stageAdjustCamera = this.select('adjustCamera');
+        this.stageCenter = this.select('center');
+        this.config = computed(() => {
+            const preset = this.#preset();
+            return typeof preset === 'string' ? presets[preset] : preset;
+        });
+        this.shadowsInfo = computed(() => {
+            const shadows = this.stageShadows();
+            const restProps = typeof shadows === 'string' ? {} : shadows || {};
             return {
                 contactShadow: shadows === 'contact' || shadows?.type === 'contact',
                 accumulativeShadow: shadows === 'accumulative' || shadows?.type === 'accumulative',
@@ -3371,136 +3412,138 @@ class NgtsStage extends NgtRxStore {
                 normalBias: shadows?.normalBias ?? 0,
                 shadowSize: shadows?.size ?? 1024,
                 shadowOffset: shadows?.offset ?? 0,
-                ...(typeof shadows === 'string' ? {} : shadows || {}),
+                ...restProps,
             };
-        })));
-        this.connect('spotLightPosition', this.select(['config', 'radius'], ({ config, radius }) => [
-            config.main[0] * radius,
-            config.main[1] * radius,
-            config.main[2] * radius,
-        ]));
-        this.connect('pointLightPosition', this.select(['config', 'radius'], ({ config, radius }) => [
-            config.fill[0] * radius,
-            config.fill[1] * radius,
-            config.fill[2] * radius,
-        ]));
-        this.connect('environmentInfo', this.select('environment').pipe(map((environment) => {
+        });
+        this.spotLightPosition = computed(() => {
+            const config = this.config();
+            if (!config)
+                return [0, 0, 0];
+            const radius = this.boundingState().radius;
+            return [config.main[0] * radius, config.main[1] * radius, config.main[2] * radius];
+        });
+        this.pointLightPosition = computed(() => {
+            const config = this.config();
+            if (!config)
+                return [0, 0, 0];
+            const radius = this.boundingState().radius;
+            return [config.fill[0] * radius, config.fill[1] * radius, config.fill[2] * radius];
+        });
+        this.environmentInfo = computed(() => {
+            const environment = this.#environment();
             if (!environment)
                 return null;
             if (typeof environment === 'string')
                 return { preset: environment };
             return environment;
-        })));
+        });
     }
     onCentered(props) {
         const { boundingSphere, width, height, depth } = props;
-        this.set({ radius: boundingSphere.radius, width, height, depth });
-        this.cdr.detectChanges();
+        this.boundingState.set({ radius: boundingSphere.radius, width, height, depth });
+        safeDetectChanges(this.#cdr);
         if (this.centered.observed)
             this.centered.emit(props);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsStage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsStage, isStandalone: true, selector: "ngts-stage", inputs: { preset: "preset", shadows: "shadows", adjustCamera: "adjustCamera", environment: "environment", intensity: "intensity", center: "center" }, outputs: { centered: "centered" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-ambient-light [intensity]="get('intensity')! / 3" />
+        <ngt-ambient-light [intensity]="stageIntensity() / 3" />
         <ngt-spot-light
             [penumbra]="1"
-            [position]="get('spotLightPosition')"
-            [intensity]="get('intensity')! * 2"
-            [castShadow]="!!get('shadows')"
+            [position]="spotLightPosition()"
+            [intensity]="stageIntensity() * 2"
+            [castShadow]="!!stageShadows()"
         >
-            <ngt-value [rawValue]="get('shadowsInfo').shadowBias" attach="shadow.bias" />
-            <ngt-value [rawValue]="get('shadowsInfo').normalBias" attach="shadow.normalBias" />
-            <ngt-vector2
-                *args="[get('shadowsInfo').shadowSize, get('shadowsInfo').shadowSize]"
-                attach="shadow.mapSize"
-            />
+            <ngt-value [rawValue]="shadowsInfo().shadowBias" attach="shadow.bias" />
+            <ngt-value [rawValue]="shadowsInfo().normalBias" attach="shadow.normalBias" />
+            <ngt-vector2 *args="[shadowsInfo().shadowSize, shadowsInfo().shadowSize]" attach="shadow.mapSize" />
         </ngt-spot-light>
-        <ngt-point-light [position]="get('pointLightPosition')" [intensity]="get('intensity')" />
+        <ngt-point-light [position]="pointLightPosition()" [intensity]="stageIntensity()" />
 
         <ngts-bounds
-            [fit]="!!get('adjustCamera')"
-            [clip]="!!get('adjustCamera')"
-            [margin]="Number(get('adjustCamera'))"
+            [fit]="!!stageAdjustCamera()"
+            [clip]="!!stageAdjustCamera()"
+            [margin]="Number(stageAdjustCamera())"
             [observe]="true"
         >
-            <ngts-stage-refit [radius]="get('radius')" [adjustCamera]="!!get('adjustCamera')" />
+            <ngts-stage-refit [radius]="boundingState().radius" [adjustCamera]="!!stageAdjustCamera()" />
             <ngts-center
-                [position]="[0, get('shadowsInfo').shadowOffset / 2, 0]"
-                [top]="!!get('center')?.top"
-                [right]="!!get('center')?.right"
-                [bottom]="!!get('center')?.bottom"
-                [left]="!!get('center')?.left"
-                [front]="!!get('center')?.front"
-                [back]="!!get('center')?.back"
-                [disableX]="!!get('center')?.disableX"
-                [disableY]="!!get('center')?.disableY"
-                [disableZ]="!!get('center')?.disableZ"
-                [precise]="!!get('center')?.precise"
+                [position]="[0, shadowsInfo().shadowOffset / 2, 0]"
+                [top]="!!stageCenter()?.top"
+                [right]="!!stageCenter()?.right"
+                [bottom]="!!stageCenter()?.bottom"
+                [left]="!!stageCenter()?.left"
+                [front]="!!stageCenter()?.front"
+                [back]="!!stageCenter()?.back"
+                [disableX]="!!stageCenter()?.disableX"
+                [disableY]="!!stageCenter()?.disableY"
+                [disableZ]="!!stageCenter()?.disableZ"
+                [precise]="!!stageCenter()?.precise"
                 (centered)="onCentered($event)"
             >
                 <ng-content />
             </ngts-center>
         </ngts-bounds>
-        <ngt-group [position]="[0, -get('height') / 2 - get('shadowsInfo').shadowOffset / 2, 0]">
+        <ngt-group [position]="[0, -boundingState().height / 2 - shadowsInfo().shadowOffset / 2, 0]">
             <ngts-contact-shadows
-                *ngIf="get('shadowsInfo').contactShadow"
-                [scale]="get('radius') * 4"
-                [far]="get('radius')"
+                *ngIf="shadowsInfo().contactShadow"
+                [scale]="boundingState().radius * 4"
+                [far]="boundingState().radius"
                 [blur]="2"
-                [opacity]="get('shadowsInfo').opacity"
-                [width]="get('shadowsInfo').width"
-                [height]="get('shadowsInfo').height"
-                [smooth]="get('shadowsInfo').smooth"
-                [resolution]="get('shadowsInfo').resolution"
-                [frames]="get('shadowsInfo').frames"
-                [scale]="get('shadowsInfo').scale"
-                [color]="get('shadowsInfo').color"
-                [depthWrite]="get('shadowsInfo').depthWrite"
-                [renderOrder]="get('shadowsInfo').renderOrder"
+                [opacity]="shadowsInfo().opacity"
+                [width]="shadowsInfo().width"
+                [height]="shadowsInfo().height"
+                [smooth]="shadowsInfo().smooth"
+                [resolution]="shadowsInfo().resolution"
+                [frames]="shadowsInfo().frames"
+                [scale]="shadowsInfo().scale"
+                [color]="shadowsInfo().color"
+                [depthWrite]="shadowsInfo().depthWrite"
+                [renderOrder]="shadowsInfo().renderOrder"
             />
             <ngts-accumulative-shadows
-                *ngIf="get('shadowsInfo').accumulativeShadow"
+                *ngIf="shadowsInfo().accumulativeShadow"
                 [temporal]="true"
                 [frames]="100"
                 [alphaTest]="0.9"
                 [toneMapped]="true"
-                [scale]="get('radius') * 4"
-                [opacity]="get('shadowsInfo').opacity"
-                [alphaTest]="get('shadowsInfo').alphaTest"
-                [color]="get('shadowsInfo').color"
-                [colorBlend]="get('shadowsInfo').colorBlend"
-                [resolution]="get('shadowsInfo').resolution"
+                [scale]="boundingState().radius * 4"
+                [opacity]="shadowsInfo().opacity"
+                [alphaTest]="shadowsInfo().alphaTest"
+                [color]="shadowsInfo().color"
+                [colorBlend]="shadowsInfo().colorBlend"
+                [resolution]="shadowsInfo().resolution"
             >
                 <ngts-randomized-lights
-                    [amount]="get('shadowsInfo').amount ?? 8"
-                    [radius]="get('shadowsInfo').radius ?? get('radius')"
-                    [ambient]="get('shadowsInfo').ambient ?? 0.5"
-                    [intensity]="get('shadowsInfo').intensity ?? 1"
-                    [position]="get('spotLightPosition')"
-                    [size]="get('radius') * 4"
-                    [bias]="-get('shadowsInfo').shadowBias"
-                    [mapSize]="get('shadowsInfo').shadowSize"
+                    [amount]="shadowsInfo().amount ?? 8"
+                    [radius]="shadowsInfo().radius ?? boundingState().radius"
+                    [ambient]="shadowsInfo().ambient ?? 0.5"
+                    [intensity]="shadowsInfo().intensity ?? 1"
+                    [position]="spotLightPosition()"
+                    [size]="boundingState().radius * 4"
+                    [bias]="-shadowsInfo().shadowBias"
+                    [mapSize]="shadowsInfo().shadowSize"
                 />
             </ngts-accumulative-shadows>
         </ngt-group>
         <ngts-environment
-            *ngIf="get('environmentInfo')"
-            [frames]="get('environmentInfo').frames"
-            [near]="get('environmentInfo').near"
-            [far]="get('environmentInfo').far"
-            [resolution]="get('environmentInfo').resolution"
-            [background]="get('environmentInfo').background"
-            [blur]="get('environmentInfo').blur"
-            [map]="get('environmentInfo').map"
-            [files]="get('environmentInfo').files"
-            [path]="get('environmentInfo').path"
-            [preset]="get('environmentInfo').preset"
-            [scene]="get('environmentInfo').scene"
-            [extensions]="get('environmentInfo').extensions"
-            [ground]="get('environmentInfo').ground"
-            [encoding]="get('environmentInfo').encoding"
+            *ngIf="environmentInfo() as environmentInfo"
+            [frames]="environmentInfo.frames"
+            [near]="environmentInfo.near"
+            [far]="environmentInfo.far"
+            [resolution]="environmentInfo.resolution"
+            [background]="environmentInfo.background"
+            [blur]="environmentInfo.blur"
+            [map]="environmentInfo.map"
+            [files]="environmentInfo.files"
+            [path]="environmentInfo.path"
+            [preset]="environmentInfo.preset"
+            [scene]="environmentInfo.scene"
+            [extensions]="environmentInfo.extensions"
+            [ground]="environmentInfo.ground"
+            [encoding]="environmentInfo.encoding"
         />
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "component", type: NgtsBounds, selector: "ngts-bounds", inputs: ["boundsRef", "damping", "fit", "clip", "observe", "margin", "eps"], outputs: ["fitted"] }, { kind: "directive", type: NgtsStageRefit, selector: "ngts-stage-refit", inputs: ["radius", "adjustCamera"] }, { kind: "component", type: NgtsCenter, selector: "ngts-center", inputs: ["centerRef", "top", "right", "bottom", "left", "front", "back", "disableX", "disableY", "disableZ", "disabled", "precise"], outputs: ["centered"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtsContactShadows, selector: "ngts-contact-shadows", inputs: ["contactShadowsRef", "opacity", "width", "height", "blur", "far", "smooth", "resolution", "frames", "scale", "color", "depthWrite", "renderOrder"] }, { kind: "component", type: NgtsAccumulativeShadows, selector: "ngts-accumulative-shadows", inputs: ["frames", "blend", "limit", "scale", "temporal", "opacity", "alphaTest", "color", "colorBlend", "resolution", "toneMapped"] }, { kind: "component", type: NgtsRandomizedLights, selector: "ngts-randomized-lights", inputs: ["lightsRef", "frames", "position", "radius", "amount", "intensity", "ambient", "castShadow", "bias", "mapSize", "size", "near", "far"] }, { kind: "component", type: NgtsEnvironment, selector: "ngts-environment" }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "component", type: NgtsBounds, selector: "ngts-bounds", inputs: ["boundsRef", "damping", "fit", "clip", "observe", "margin", "eps"], outputs: ["fitted"] }, { kind: "directive", type: NgtsStageRefit, selector: "ngts-stage-refit", inputs: ["radius", "adjustCamera"] }, { kind: "component", type: NgtsCenter, selector: "ngts-center", inputs: ["centerRef", "top", "right", "bottom", "left", "front", "back", "disableX", "disableY", "disableZ", "disable", "precise"], outputs: ["centered"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtsContactShadows, selector: "ngts-contact-shadows", inputs: ["contactShadowsRef", "opacity", "width", "height", "blur", "far", "smooth", "resolution", "frames", "scale", "color", "depthWrite", "renderOrder"] }, { kind: "component", type: NgtsAccumulativeShadows, selector: "ngts-accumulative-shadows", inputs: ["frames", "blend", "limit", "scale", "temporal", "opacity", "alphaTest", "color", "colorBlend", "resolution", "toneMapped"] }, { kind: "component", type: NgtsRandomizedLights, selector: "ngts-randomized-lights", inputs: ["lightsRef", "frames", "position", "radius", "amount", "intensity", "ambient", "castShadow", "bias", "mapSize", "size", "near", "far"] }, { kind: "component", type: NgtsEnvironment, selector: "ngts-environment" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsStage, decorators: [{
             type: Component,
@@ -3508,104 +3551,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngts-stage',
                     standalone: true,
                     template: `
-        <ngt-ambient-light [intensity]="get('intensity')! / 3" />
+        <ngt-ambient-light [intensity]="stageIntensity() / 3" />
         <ngt-spot-light
             [penumbra]="1"
-            [position]="get('spotLightPosition')"
-            [intensity]="get('intensity')! * 2"
-            [castShadow]="!!get('shadows')"
+            [position]="spotLightPosition()"
+            [intensity]="stageIntensity() * 2"
+            [castShadow]="!!stageShadows()"
         >
-            <ngt-value [rawValue]="get('shadowsInfo').shadowBias" attach="shadow.bias" />
-            <ngt-value [rawValue]="get('shadowsInfo').normalBias" attach="shadow.normalBias" />
-            <ngt-vector2
-                *args="[get('shadowsInfo').shadowSize, get('shadowsInfo').shadowSize]"
-                attach="shadow.mapSize"
-            />
+            <ngt-value [rawValue]="shadowsInfo().shadowBias" attach="shadow.bias" />
+            <ngt-value [rawValue]="shadowsInfo().normalBias" attach="shadow.normalBias" />
+            <ngt-vector2 *args="[shadowsInfo().shadowSize, shadowsInfo().shadowSize]" attach="shadow.mapSize" />
         </ngt-spot-light>
-        <ngt-point-light [position]="get('pointLightPosition')" [intensity]="get('intensity')" />
+        <ngt-point-light [position]="pointLightPosition()" [intensity]="stageIntensity()" />
 
         <ngts-bounds
-            [fit]="!!get('adjustCamera')"
-            [clip]="!!get('adjustCamera')"
-            [margin]="Number(get('adjustCamera'))"
+            [fit]="!!stageAdjustCamera()"
+            [clip]="!!stageAdjustCamera()"
+            [margin]="Number(stageAdjustCamera())"
             [observe]="true"
         >
-            <ngts-stage-refit [radius]="get('radius')" [adjustCamera]="!!get('adjustCamera')" />
+            <ngts-stage-refit [radius]="boundingState().radius" [adjustCamera]="!!stageAdjustCamera()" />
             <ngts-center
-                [position]="[0, get('shadowsInfo').shadowOffset / 2, 0]"
-                [top]="!!get('center')?.top"
-                [right]="!!get('center')?.right"
-                [bottom]="!!get('center')?.bottom"
-                [left]="!!get('center')?.left"
-                [front]="!!get('center')?.front"
-                [back]="!!get('center')?.back"
-                [disableX]="!!get('center')?.disableX"
-                [disableY]="!!get('center')?.disableY"
-                [disableZ]="!!get('center')?.disableZ"
-                [precise]="!!get('center')?.precise"
+                [position]="[0, shadowsInfo().shadowOffset / 2, 0]"
+                [top]="!!stageCenter()?.top"
+                [right]="!!stageCenter()?.right"
+                [bottom]="!!stageCenter()?.bottom"
+                [left]="!!stageCenter()?.left"
+                [front]="!!stageCenter()?.front"
+                [back]="!!stageCenter()?.back"
+                [disableX]="!!stageCenter()?.disableX"
+                [disableY]="!!stageCenter()?.disableY"
+                [disableZ]="!!stageCenter()?.disableZ"
+                [precise]="!!stageCenter()?.precise"
                 (centered)="onCentered($event)"
             >
                 <ng-content />
             </ngts-center>
         </ngts-bounds>
-        <ngt-group [position]="[0, -get('height') / 2 - get('shadowsInfo').shadowOffset / 2, 0]">
+        <ngt-group [position]="[0, -boundingState().height / 2 - shadowsInfo().shadowOffset / 2, 0]">
             <ngts-contact-shadows
-                *ngIf="get('shadowsInfo').contactShadow"
-                [scale]="get('radius') * 4"
-                [far]="get('radius')"
+                *ngIf="shadowsInfo().contactShadow"
+                [scale]="boundingState().radius * 4"
+                [far]="boundingState().radius"
                 [blur]="2"
-                [opacity]="get('shadowsInfo').opacity"
-                [width]="get('shadowsInfo').width"
-                [height]="get('shadowsInfo').height"
-                [smooth]="get('shadowsInfo').smooth"
-                [resolution]="get('shadowsInfo').resolution"
-                [frames]="get('shadowsInfo').frames"
-                [scale]="get('shadowsInfo').scale"
-                [color]="get('shadowsInfo').color"
-                [depthWrite]="get('shadowsInfo').depthWrite"
-                [renderOrder]="get('shadowsInfo').renderOrder"
+                [opacity]="shadowsInfo().opacity"
+                [width]="shadowsInfo().width"
+                [height]="shadowsInfo().height"
+                [smooth]="shadowsInfo().smooth"
+                [resolution]="shadowsInfo().resolution"
+                [frames]="shadowsInfo().frames"
+                [scale]="shadowsInfo().scale"
+                [color]="shadowsInfo().color"
+                [depthWrite]="shadowsInfo().depthWrite"
+                [renderOrder]="shadowsInfo().renderOrder"
             />
             <ngts-accumulative-shadows
-                *ngIf="get('shadowsInfo').accumulativeShadow"
+                *ngIf="shadowsInfo().accumulativeShadow"
                 [temporal]="true"
                 [frames]="100"
                 [alphaTest]="0.9"
                 [toneMapped]="true"
-                [scale]="get('radius') * 4"
-                [opacity]="get('shadowsInfo').opacity"
-                [alphaTest]="get('shadowsInfo').alphaTest"
-                [color]="get('shadowsInfo').color"
-                [colorBlend]="get('shadowsInfo').colorBlend"
-                [resolution]="get('shadowsInfo').resolution"
+                [scale]="boundingState().radius * 4"
+                [opacity]="shadowsInfo().opacity"
+                [alphaTest]="shadowsInfo().alphaTest"
+                [color]="shadowsInfo().color"
+                [colorBlend]="shadowsInfo().colorBlend"
+                [resolution]="shadowsInfo().resolution"
             >
                 <ngts-randomized-lights
-                    [amount]="get('shadowsInfo').amount ?? 8"
-                    [radius]="get('shadowsInfo').radius ?? get('radius')"
-                    [ambient]="get('shadowsInfo').ambient ?? 0.5"
-                    [intensity]="get('shadowsInfo').intensity ?? 1"
-                    [position]="get('spotLightPosition')"
-                    [size]="get('radius') * 4"
-                    [bias]="-get('shadowsInfo').shadowBias"
-                    [mapSize]="get('shadowsInfo').shadowSize"
+                    [amount]="shadowsInfo().amount ?? 8"
+                    [radius]="shadowsInfo().radius ?? boundingState().radius"
+                    [ambient]="shadowsInfo().ambient ?? 0.5"
+                    [intensity]="shadowsInfo().intensity ?? 1"
+                    [position]="spotLightPosition()"
+                    [size]="boundingState().radius * 4"
+                    [bias]="-shadowsInfo().shadowBias"
+                    [mapSize]="shadowsInfo().shadowSize"
                 />
             </ngts-accumulative-shadows>
         </ngt-group>
         <ngts-environment
-            *ngIf="get('environmentInfo')"
-            [frames]="get('environmentInfo').frames"
-            [near]="get('environmentInfo').near"
-            [far]="get('environmentInfo').far"
-            [resolution]="get('environmentInfo').resolution"
-            [background]="get('environmentInfo').background"
-            [blur]="get('environmentInfo').blur"
-            [map]="get('environmentInfo').map"
-            [files]="get('environmentInfo').files"
-            [path]="get('environmentInfo').path"
-            [preset]="get('environmentInfo').preset"
-            [scene]="get('environmentInfo').scene"
-            [extensions]="get('environmentInfo').extensions"
-            [ground]="get('environmentInfo').ground"
-            [encoding]="get('environmentInfo').encoding"
+            *ngIf="environmentInfo() as environmentInfo"
+            [frames]="environmentInfo.frames"
+            [near]="environmentInfo.near"
+            [far]="environmentInfo.far"
+            [resolution]="environmentInfo.resolution"
+            [background]="environmentInfo.background"
+            [blur]="environmentInfo.blur"
+            [map]="environmentInfo.map"
+            [files]="environmentInfo.files"
+            [path]="environmentInfo.path"
+            [preset]="environmentInfo.preset"
+            [scene]="environmentInfo.scene"
+            [extensions]="environmentInfo.extensions"
+            [ground]="environmentInfo.ground"
+            [encoding]="environmentInfo.encoding"
         />
     `,
                     imports: [
@@ -3621,7 +3661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { preset: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { preset: [{
                 type: Input
             }], shadows: [{
                 type: Input
@@ -3639,9 +3679,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 
 extend({ Points, BufferGeometry, BufferAttribute });
 const genStar = (r) => {
-    return new Vector3().setFromSpherical(new Spherical(r, Math.acos(1 - Math.random() * 2), Math.random() * 2 * Math.PI));
+    return new THREE.Vector3().setFromSpherical(new THREE.Spherical(r, Math.acos(1 - Math.random() * 2), Math.random() * 2 * Math.PI));
 };
-class NgtsStars extends NgtRxStore {
+class NgtsStars extends NgtSignalStore {
     set radius(radius) {
         this.set({ radius });
     }
@@ -3657,15 +3697,19 @@ class NgtsStars extends NgtRxStore {
     set saturation(saturation) {
         this.set({ saturation });
     }
-    set fade(fade) {
+    set starsFade(fade) {
         this.set({ fade });
     }
     set speed(speed) {
         this.set({ speed });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    #count;
+    #depth;
+    #factor;
+    #radius;
+    #saturation;
+    constructor() {
+        super({
             radius: 100,
             depth: 50,
             count: 5000,
@@ -3674,17 +3718,26 @@ class NgtsStars extends NgtRxStore {
             fade: false,
             speed: 1,
         });
-        this.connect('bufferAttributes', this.select(['count', 'depth', 'factor', 'radius', 'saturation'], ({ count, depth, factor, radius, saturation }) => {
+        this.AdditiveBlending = THREE.AdditiveBlending;
+        this.material = new StarFieldMaterial();
+        this.starsRef = injectNgtRef();
+        this.#count = this.select('count');
+        this.#depth = this.select('depth');
+        this.#factor = this.select('factor');
+        this.#radius = this.select('radius');
+        this.#saturation = this.select('saturation');
+        this.fade = this.select('fade');
+        this.bufferAttributes = computed(() => {
             const positions = [];
             const colors = [];
-            const sizes = Array.from({ length: count }, () => (0.5 + 0.5 * Math.random()) * factor);
-            const color = new Color();
-            let r = radius + depth;
-            const increment = depth / count;
-            for (let i = 0; i < count; i++) {
+            const sizes = Array.from({ length: this.#count() }, () => (0.5 + 0.5 * Math.random()) * this.#factor());
+            const color = new THREE.Color();
+            let r = this.#radius() + this.#depth();
+            const increment = this.#depth() / this.#count();
+            for (let i = 0; i < this.#count(); i++) {
                 r -= increment * Math.random();
                 positions.push(...genStar(r).toArray());
-                color.setHSL(i / count, saturation, 0.9);
+                color.setHSL(i / this.#count(), this.#saturation(), 0.9);
                 colors.push(color.r, color.g, color.b);
             }
             return {
@@ -3692,25 +3745,19 @@ class NgtsStars extends NgtRxStore {
                 colors: new Float32Array(colors),
                 sizes: new Float32Array(sizes),
             };
-        }));
-    }
-    constructor() {
-        super();
-        this.AdditiveBlending = THREE.AdditiveBlending;
-        this.material = new StarFieldMaterial();
-        this.starsRef = injectNgtRef();
-        injectBeforeRender(this.onBeforeRender.bind(this));
+        });
+        injectBeforeRender(this.#onBeforeRender.bind(this));
     }
-    onBeforeRender({ clock }) {
+    #onBeforeRender({ clock }) {
         this.material.uniforms['time'].value = clock.getElapsedTime() * this.get('speed');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsStars, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsStars, isStandalone: true, selector: "ngts-stars", inputs: { starsRef: "starsRef", radius: "radius", depth: "depth", count: "count", factor: "factor", saturation: "saturation", fade: "fade", speed: "speed" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsStars, isStandalone: true, selector: "ngts-stars", inputs: { starsRef: "starsRef", radius: "radius", depth: "depth", count: "count", factor: "factor", saturation: "saturation", starsFade: ["fade", "starsFade"], speed: "speed" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-points [ref]="starsRef">
             <ngt-buffer-geometry>
-                <ngt-buffer-attribute attach="attributes.position" *args="[get('bufferAttributes').positions, 3]" />
-                <ngt-buffer-attribute attach="attributes.color" *args="[get('bufferAttributes').colors, 3]" />
-                <ngt-buffer-attribute attach="attributes.size" *args="[get('bufferAttributes').sizes, 1]" />
+                <ngt-buffer-attribute attach="attributes.position" *args="[bufferAttributes().positions, 3]" />
+                <ngt-buffer-attribute attach="attributes.color" *args="[bufferAttributes().colors, 3]" />
+                <ngt-buffer-attribute attach="attributes.size" *args="[bufferAttributes().sizes, 1]" />
             </ngt-buffer-geometry>
             <ngt-primitive
                 *args="[material]"
@@ -3720,7 +3767,7 @@ class NgtsStars extends NgtRxStore {
                 [transparent]="true"
                 [vertexColors]="true"
             >
-                <ngt-value attach="uniforms.fade.value" [rawValue]="get('fade')" />
+                <ngt-value attach="uniforms.fade.value" [rawValue]="fade()" />
             </ngt-primitive>
         </ngt-points>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
@@ -3733,9 +3780,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     template: `
         <ngt-points [ref]="starsRef">
             <ngt-buffer-geometry>
-                <ngt-buffer-attribute attach="attributes.position" *args="[get('bufferAttributes').positions, 3]" />
-                <ngt-buffer-attribute attach="attributes.color" *args="[get('bufferAttributes').colors, 3]" />
-                <ngt-buffer-attribute attach="attributes.size" *args="[get('bufferAttributes').sizes, 1]" />
+                <ngt-buffer-attribute attach="attributes.position" *args="[bufferAttributes().positions, 3]" />
+                <ngt-buffer-attribute attach="attributes.color" *args="[bufferAttributes().colors, 3]" />
+                <ngt-buffer-attribute attach="attributes.size" *args="[bufferAttributes().sizes, 1]" />
             </ngt-buffer-geometry>
             <ngt-primitive
                 *args="[material]"
@@ -3745,7 +3792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 [transparent]="true"
                 [vertexColors]="true"
             >
-                <ngt-value attach="uniforms.fade.value" [rawValue]="get('fade')" />
+                <ngt-value attach="uniforms.fade.value" [rawValue]="fade()" />
             </ngt-primitive>
         </ngt-points>
     `,
@@ -3764,8 +3811,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], saturation: [{
                 type: Input
-            }], fade: [{
-                type: Input
+            }], starsFade: [{
+                type: Input,
+                args: ['fade']
             }], speed: [{
                 type: Input
             }] } });
@@ -3774,5 +3822,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGTS_BOUNDS_API, NGTS_SPOT_LIGHT_API, NgtsAccumulativeShadows, NgtsBounds, NgtsCameraShake, NgtsCaustics, NgtsCenter, NgtsCloud, NgtsContactShadows, NgtsEnvironment, NgtsEnvironmentContent, NgtsFloat, NgtsRandomizedLights, NgtsSky, NgtsSparkles, NgtsSpotLight, NgtsSpotLightShadow, NgtsStage, NgtsStageRefit, NgtsStars, calcPosFromAngles, ngtsEnvironmentPresetsObj };
+export { NGTS_ACCUMULATIVE_SHADOWS_API, NGTS_BOUNDS_API, NGTS_SPOT_LIGHT_API, NgtsAccumulativeShadows, NgtsBounds, NgtsCameraShake, NgtsCaustics, NgtsCenter, NgtsCloud, NgtsContactShadows, NgtsEnvironment, NgtsEnvironmentContent, NgtsFloat, NgtsRandomizedLights, NgtsSky, NgtsSparkles, NgtsSpotLight, NgtsSpotLightShadow, NgtsStage, NgtsStageRefit, NgtsStars, ngtsEnvironmentPresetsObj };
 //# sourceMappingURL=angular-three-soba-staging.mjs.map