angular-three 1.10.2 → 2.0.0-beta.0

package/fesm2022/angular-three.mjs

@@ -1,264 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, ElementRef, Injectable, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, makeEnvironmentProviders, EnvironmentInjector, createEnvironmentInjector, Component, HostBinding, Output, ViewChild, Injector, Pipe, SkipSelf, ContentChild } from '@angular/core';
+import { ElementRef, signal, untracked, computed, assertInInjectionContext, runInInjectionContext, inject, ChangeDetectorRef, effect, Injector, Injectable, Optional, Inject, InjectionToken, EventEmitter, ViewContainerRef, NgZone, TemplateRef, Directive, Input, getDebugNode, RendererFactory2, makeEnvironmentProviders, provideZoneChangeDetection, EnvironmentInjector, DestroyRef, createEnvironmentInjector, Component, ChangeDetectionStrategy, Output, ViewChild, SkipSelf, ContentChild } from '@angular/core';
 import { provideNgxResizeOptions, NgxResize } from 'ngx-resize';
-import { isObservable, of, map, from, tap, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, BehaviorSubject, startWith, combineLatest, filter, distinctUntilChanged, takeUntil, merge } from 'rxjs';
 import * as THREE from 'three';
 import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
-import { RxState } from '@rx-angular/state';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/router';
 import { ActivationEnd, RouterOutlet } from '@angular/router';
-
-const idCache = {};
-function makeId(event) {
-    if (event) {
-        return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
-    }
-    const newId = THREE.MathUtils.generateUUID();
-    // ensure not already used
-    if (!idCache[newId]) {
-        idCache[newId] = true;
-        return newId;
-    }
-    return makeId();
-}
-function makeDpr(dpr, window) {
-    const target = window?.devicePixelRatio || 1;
-    return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
-}
-function makeDefaultCamera(isOrthographic, size) {
-    if (isOrthographic)
-        return new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000);
-    return new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
-}
-function makeDefaultRenderer(glOptions, canvasElement) {
-    const customRenderer = (typeof glOptions === 'function' ? glOptions(canvasElement) : glOptions);
-    if (customRenderer?.render != null)
-        return customRenderer;
-    return new THREE.WebGLRenderer({
-        powerPreference: 'high-performance',
-        canvas: canvasElement,
-        antialias: true,
-        alpha: true,
-        ...(glOptions || {}),
-    });
-}
-function makeObjectGraph(object) {
-    const data = { nodes: {}, materials: {} };
-    if (object) {
-        object.traverse((child) => {
-            if (child.name)
-                data.nodes[child.name] = child;
-            if ('material' in child && !data.materials[child.material.name]) {
-                data.materials[child.material.name] = child
-                    .material;
-            }
-        });
-    }
-    return data;
-}
-
-function safeDetectChanges(cdr) {
-    if (!cdr)
-        return;
-    try {
-        // dynamic created component with ViewContainerRef#createComponent does not have Context
-        // but it has _attachedToViewContainer
-        if (cdr['context'] || cdr['_attachedToViewContainer']) {
-            cdr.detectChanges();
-        }
-    }
-    catch (e) {
-        cdr.markForCheck();
-    }
-}
-
-const cached = new Map();
-function load(loaderConstructorFactory, input, extensions, onProgress) {
-    const urls$ = isObservable(input) ? input : of(input);
-    return urls$.pipe(map((inputs) => {
-        const loaderConstructor = loaderConstructorFactory(inputs);
-        const loader = new loaderConstructor();
-        if (extensions)
-            extensions(loader);
-        const urls = Array.isArray(inputs) ? inputs : typeof inputs === 'string' ? [inputs] : Object.values(inputs);
-        return [
-            urls.map((url) => {
-                if (!cached.has(url)) {
-                    cached.set(url, from(loader.loadAsync(url, onProgress)).pipe(tap((data) => {
-                        if (data['scene'])
-                            Object.assign(data, makeObjectGraph(data['scene']));
-                    }), retry(2), catchError((err) => {
-                        console.error(`[NGT] Error loading ${url}: ${err.message}`);
-                        return of([]);
-                    }), share({ connector: () => new ReplaySubject(1) })));
-                }
-                return cached.get(url);
-            }),
-            inputs,
-        ];
-    }));
-}
-function injectNgtLoader(loaderConstructorFactory, input, extensions, onProgress) {
-    const cdr = inject(ChangeDetectorRef);
-    return load(loaderConstructorFactory, input, extensions, onProgress).pipe(switchMap(([observables$, inputs]) => {
-        return forkJoin(observables$).pipe(map((results) => {
-            if (Array.isArray(inputs))
-                return results;
-            if (typeof inputs === 'string')
-                return results[0];
-            const keys = Object.keys(inputs);
-            return keys.reduce((result, key) => {
-                result[key] = results[keys.indexOf(key)];
-                return result;
-            }, {});
-        }), tap(() => {
-            requestAnimationFrame(() => void safeDetectChanges(cdr));
-        }));
-    }));
-}
-injectNgtLoader['destroy'] = () => {
-    cached.clear();
-};
-injectNgtLoader['preLoad'] = (loaderConstructorFactory, inputs, extensions) => {
-    load(loaderConstructorFactory, inputs, extensions).pipe(take(1)).subscribe();
-};
-
-function createSubs(callback, subs) {
-    const sub = { callback };
-    subs.add(sub);
-    return () => void subs.delete(sub);
-}
-const globalEffects = new Set();
-const globalAfterEffects = new Set();
-const globalTailEffects = new Set();
-/**
- * Adds a global render callback which is called each frame.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
- */
-const addEffect = (callback) => createSubs(callback, globalEffects);
-/**
- * Adds a global after-render callback which is called each frame.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
- */
-const addAfterEffect = (callback) => createSubs(callback, globalAfterEffects);
-/**
- * Adds a global callback which is called when rendering stops.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
- */
-const addTail = (callback) => createSubs(callback, globalTailEffects);
-function run(effects, timestamp) {
-    if (!effects.size)
-        return;
-    for (const { callback } of effects.values()) {
-        callback(timestamp);
-    }
-}
-function flushGlobalEffects(type, timestamp) {
-    switch (type) {
-        case 'before':
-            return run(globalEffects, timestamp);
-        case 'after':
-            return run(globalAfterEffects, timestamp);
-        case 'tail':
-            return run(globalTailEffects, timestamp);
-    }
-}
-function render(timestamp, store, frame) {
-    const state = store.get();
-    // Run local effects
-    let delta = state.clock.getDelta();
-    // In frameloop='never' mode, clock times are updated using the provided timestamp
-    if (state.frameloop === 'never' && typeof timestamp === 'number') {
-        delta = timestamp - state.clock.elapsedTime;
-        state.clock.oldTime = state.clock.elapsedTime;
-        state.clock.elapsedTime = timestamp;
-    }
-    // Call subscribers (useFrame)
-    // subscribers = state.internal.subscribers;
-    for (let i = 0; i < state.internal.subscribers.length; i++) {
-        const subscriber = state.internal.subscribers[i];
-        subscriber.callback({ ...state, delta, frame });
-    }
-    // Render content
-    if (!state.internal.priority && state.gl.render) {
-        state.gl.render(state.scene, state.camera);
-    }
-    // Decrease frame count
-    state.internal.frames = Math.max(0, state.internal.frames - 1);
-    return state.frameloop === 'always' ? 1 : state.internal.frames;
-}
-function createLoop(roots) {
-    let running = false;
-    let repeat;
-    let frame;
-    function loop(timestamp) {
-        frame = requestAnimationFrame(loop);
-        running = true;
-        repeat = 0;
-        // Run effects
-        flushGlobalEffects('before', timestamp);
-        // Render all roots
-        for (const root of roots.values()) {
-            const state = root.get();
-            // If the frameloop is invalidated, do not run another frame
-            if (state.internal.active &&
-                (state.frameloop === 'always' || state.internal.frames > 0) &&
-                !state.gl.xr?.isPresenting) {
-                repeat += render(timestamp, root);
-            }
-        }
-        // Run after-effects
-        flushGlobalEffects('after', timestamp);
-        // Stop the loop if nothing invalidates it
-        if (repeat === 0) {
-            // Tail call effects, they are called when rendering stops
-            flushGlobalEffects('tail', timestamp);
-            // Flag end of operation
-            running = false;
-            return cancelAnimationFrame(frame);
-        }
-    }
-    function invalidate(store, frames = 1) {
-        const state = store?.get();
-        if (!state)
-            return roots.forEach((root) => invalidate(root, frames));
-        if (state.gl.xr?.isPresenting || !state.internal.active || state.frameloop === 'never')
-            return;
-        // Increase frames, do not go higher than 60
-        state.internal.frames = Math.min(60, state.internal.frames + frames);
-        // If the render-loop isn't active, start it
-        if (!running) {
-            running = true;
-            requestAnimationFrame(loop);
-        }
-    }
-    function advance(timestamp, runGlobalEffects = true, store, frame) {
-        const state = store?.get();
-        if (runGlobalEffects)
-            flushGlobalEffects('before', timestamp);
-        if (!state)
-            for (const root of roots.values())
-                render(timestamp, root);
-        // safe to assume store is available here
-        else
-            render(timestamp, store, frame);
-        if (runGlobalEffects)
-            flushGlobalEffects('after', timestamp);
-    }
-    return {
-        loop,
-        /**
-         * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
-         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
-         */
-        invalidate,
-        /**
-         * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
-         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
-         */
-        advance,
-    };
-}
+import { filter } from 'rxjs';
 
 const is = {
     obj: (a) => a === Object(a) && !Array.isArray(a) && typeof a !== 'function',
@@ -353,35 +101,35 @@ function invalidateInstance(instance) {
     checkUpdate(instance);
 }
 function prepare(object, localState) {
-    const instance = (typeof object === 'function' ? object() : object);
+    const instance = object;
     if (localState?.primitive || !instance.__ngt__) {
-        const { objects = new BehaviorSubject([]), nonObjects = new BehaviorSubject([]), ...rest } = localState || {};
+        const { objects = signal([]), nonObjects = signal([]), ...rest } = localState || {};
         instance.__ngt__ = {
             previousAttach: null,
             store: null,
-            parent: null,
+            parent: signal(null),
             memoized: {},
             eventCount: 0,
             handlers: {},
             objects,
             nonObjects,
             add: (object, type) => {
-                const current = instance.__ngt__[type].value;
+                const current = untracked(instance.__ngt__[type]);
                 const foundIndex = current.indexOf((obj) => obj === object);
                 if (foundIndex > -1) {
                     // if we add an object with the same reference, then we switch it out
                     // and update the BehaviorSubject
                     current.splice(foundIndex, 1, object);
-                    instance.__ngt__[type].next(current);
+                    instance.__ngt__[type].set(current);
                 }
                 else {
-                    instance.__ngt__[type].next([...instance.__ngt__[type].value, object]);
+                    instance.__ngt__[type].update((prev) => [...prev, object]);
                 }
-                notifyAncestors(instance.__ngt__.parent);
+                notifyAncestors(untracked(instance.__ngt__.parent));
             },
             remove: (object, type) => {
-                instance.__ngt__[type].next(instance.__ngt__[type].value.filter((o) => o !== object));
-                notifyAncestors(instance.__ngt__.parent);
+                instance.__ngt__[type].update((prev) => prev.filter((o) => o !== object));
+                notifyAncestors(untracked(instance.__ngt__.parent));
             },
             ...rest,
         };
@@ -393,1045 +141,1266 @@ function notifyAncestors(instance) {
         return;
     const localState = getLocalState(instance);
     if (localState.objects)
-        localState.objects.next(localState.objects.value);
+        localState.objects.update((prev) => prev);
     if (localState.nonObjects)
-        localState.nonObjects.next(localState.nonObjects.value);
-    notifyAncestors(localState.parent);
+        localState.nonObjects.update((prev) => prev);
+    notifyAncestors(untracked(localState.parent));
 }
 
-function diffProps(instance, props) {
-    const propsEntries = Object.entries(props);
-    const changes = [];
-    for (const [propKey, propValue] of propsEntries) {
-        if (is.equ(propValue, instance[propKey]))
-            continue;
-        changes.push([propKey, propValue]);
+const idCache = {};
+function makeId(event) {
+    if (event) {
+        return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
     }
-    return changes;
+    const newId = THREE.MathUtils.generateUUID();
+    // ensure not already used
+    if (!idCache[newId]) {
+        idCache[newId] = true;
+        return newId;
+    }
+    return makeId();
 }
-function applyProps(instance, props) {
-    // if props is empty
-    if (!Object.keys(props).length)
-        return instance;
-    // filter equals, events , and reserved props
-    const localState = getLocalState(instance);
-    const rootState = localState.store?.get();
-    const changes = diffProps(instance, props);
-    for (let i = 0; i < changes.length; i++) {
-        let key = changes[i][0];
-        const currentInstance = instance;
-        const targetProp = currentInstance[key];
-        let value = changes[i][1];
-        if (is.colorSpaceExist(currentInstance)) {
-            const sRGBEncoding = 3001;
-            const SRGBColorSpace = 'srgb';
-            const LinearSRGBColorSpace = 'srgb-linear';
-            if (key === 'encoding') {
-                key = 'colorSpace';
-                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
-            }
-            else if (key === 'outputEncoding') {
-                key = 'outputColorSpace';
-                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
-            }
-        }
-        // special treatmen for objects with support for set/copy, and layers
-        if (targetProp && targetProp['set'] && (targetProp['copy'] || targetProp instanceof THREE.Layers)) {
-            const isColor = targetProp instanceof THREE.Color;
-            // if value is an array
-            if (Array.isArray(value)) {
-                if (targetProp['fromArray'])
-                    targetProp['fromArray'](value);
-                else
-                    targetProp['set'](...value);
-            }
-            // test again target.copy
-            else if (targetProp['copy'] &&
-                value &&
-                value.constructor &&
-                targetProp.constructor.name === value.constructor.name) {
-                targetProp['copy'](value);
-                if (!THREE.ColorManagement && !rootState.linear && isColor)
-                    targetProp['convertSRGBToLinear']();
-            }
-            // if nothing else fits, just set the single value, ignore undefined
-            else if (value !== undefined) {
-                const isColor = targetProp instanceof THREE.Color;
-                // allow setting array scalars
-                if (!isColor && targetProp['setScalar'])
-                    targetProp['setScalar'](value);
-                // layers have no copy function, copy the mask
-                else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers)
-                    targetProp.mask = value.mask;
-                // otherwise just set ...
-                else
-                    targetProp['set'](value);
-                // auto-convert srgb
-                if (!THREE.ColorManagement && !rootState?.linear && isColor)
-                    targetProp.convertSRGBToLinear();
-            }
-        }
-        // else just overwrite the value
-        else {
-            currentInstance[key] = value;
-            // auto-convert srgb textures
-            if (currentInstance[key] instanceof THREE.Texture &&
-                currentInstance[key].format === THREE.RGBAFormat &&
-                currentInstance[key].type === THREE.UnsignedByteType) {
-                const texture = currentInstance[key];
-                if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
-                    texture.colorSpace = rootState.gl.outputColorSpace;
-                else
-                    texture.encoding = rootState.gl.outputEncoding;
-            }
-        }
-        checkUpdate(targetProp);
-        invalidateInstance(instance);
-    }
-    const instanceHandlers = localState.eventCount;
-    if (localState.parent && rootState.internal && instance['raycast'] && instanceHandlers !== localState.eventCount) {
-        // pre-emptively remove the interaction from manager
-        rootState.removeInteraction(instance['uuid']);
-        // add the instance to the interaction manager only when it has handlers
-        if (localState.eventCount)
-            rootState.addInteraction(instance);
-    }
-    if (localState.parent && localState.afterUpdate && localState.afterUpdate.observed && changes.length) {
-        localState.afterUpdate.emit(instance);
-    }
-    return instance;
+function makeDpr(dpr, window) {
+    const target = window?.devicePixelRatio || 1;
+    return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
-
-const startWithUndefined = () => startWith(undefined);
-/**
- * An extended `tap` operator that accepts an `effectFn` which:
- * - runs on every `next` notification from `source$`
- * - can optionally return a `cleanUp` function that
- * invokes from the 2nd `next` notification onward and on `unsubscribe` (destroyed)
- *
- * @example
- * ```typescript
- * source$.pipe(
- *  tapEffect((sourceValue) = {
- *    const cb = () => {
- *      doStuff(sourceValue);
- *    };
- *    addListener('event', cb);
- *
- *    return () => {
- *      removeListener('event', cb);
- *    }
- *  })
- * )
- * ```
- */
-function tapEffect(effectFn) {
-    let cleanupFn = () => { };
-    let firstRun = false;
-    let prev = undefined;
-    const teardown = (error) => () => {
-        if (cleanupFn)
-            cleanupFn({ prev, complete: true, error });
-    };
-    return tap({
-        next: (value) => {
-            if (cleanupFn && firstRun)
-                cleanupFn({ prev, complete: false, error: false });
-            const cleanUpOrVoid = effectFn(value);
-            if (cleanUpOrVoid)
-                cleanupFn = cleanUpOrVoid;
-            prev = value;
-            if (!firstRun)
-                firstRun = true;
-        },
-        complete: teardown(false),
-        unsubscribe: teardown(false),
-        error: teardown(true),
+function makeDefaultCamera(isOrthographic, size) {
+    if (isOrthographic)
+        return new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000);
+    return new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
+}
+function makeDefaultRenderer(glOptions, canvasElement) {
+    const customRenderer = (typeof glOptions === 'function' ? glOptions(canvasElement) : glOptions);
+    if (customRenderer?.render != null)
+        return customRenderer;
+    return new THREE.WebGLRenderer({
+        powerPreference: 'high-performance',
+        canvas: canvasElement,
+        antialias: true,
+        alpha: true,
+        ...(glOptions || {}),
     });
 }
-class NgtRxStore extends RxState {
-    constructor() {
-        super();
-        // set a dummy property so that initial this.get() won't return undefined
-        this.set({ __ngt_dummy__: '__ngt_dummy__' });
-        // override set so our consumers don't have to handle undefined for state that already have default values
-        const originalSet = this.set.bind(this);
-        Object.defineProperty(this, 'set', {
-            get: () => {
-                return (...args) => {
-                    const firstArg = args[0];
-                    if (is.obj(firstArg)) {
-                        const modArgs = Object.entries(firstArg).reduce((modded, [key, value]) => {
-                            modded[key] = value === undefined ? this.get(key) : value;
-                            return modded;
-                        }, {});
-                        return originalSet(modArgs);
-                    }
-                    return originalSet(...args);
-                };
-            },
-        });
-        // override get to return {} if get() returns undefined
-        const originalGet = this.get.bind(this);
-        Object.defineProperty(this, 'get', {
-            get: () => (...args) => {
-                if (args.length === 0)
-                    return originalGet() ?? {};
-                return originalGet(...args);
-            },
+function makeObjectGraph(object) {
+    const data = { nodes: {}, materials: {} };
+    if (object) {
+        object.traverse((child) => {
+            if (child.name)
+                data.nodes[child.name] = child;
+            if ('material' in child && !data.materials[child.material.name]) {
+                data.materials[child.material.name] = child
+                    .material;
+            }
         });
-        // call initialize that might be setup by derived Stores
-        this.initialize();
     }
-    initialize() {
-        return;
-    }
-    effect(obs, sideEffectFn) {
-        return this.hold(obs.pipe(tapEffect(sideEffectFn)));
+    return data;
+}
+
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+    const captureData = captures.get(obj);
+    if (captureData) {
+        captures.delete(obj);
+        // if this was the last captured object for this pointer
+        if (captures.size === 0) {
+            capturedMap.delete(pointerId);
+            captureData.target.releasePointerCapture(pointerId);
+        }
     }
-    triggerChangeDetection(cdr, keys = []) {
-        let $ = this.$;
-        if (keys.length) {
-            $ = combineLatest(keys.map((key) => this.select(key).pipe(startWith(this.get(key) ?? undefined))));
+}
+function removeInteractivity(store, object) {
+    const internal = store.get('internal');
+    // removes every trace of an object from data store
+    internal.interaction = internal.interaction.filter((o) => o !== object);
+    internal.initialHits = internal.initialHits.filter((o) => o !== object);
+    internal.hovered.forEach((value, key) => {
+        if (value.eventObject === object || value.object === object) {
+            // clear out intersects, they are outdated by now
+            internal.hovered.delete(key);
         }
-        this.hold($, () => void requestAnimationFrame(() => void safeDetectChanges(cdr)));
+    });
+    internal.capturedMap.forEach((captures, pointerId) => {
+        releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
+    });
+    if (store.get('previousStore')) {
+        removeInteractivity(store.get('previousStore'), object);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRxStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRxStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRxStore, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-const rootStateMap = new Map();
-const { invalidate, advance } = createLoop(rootStateMap);
-const shallowLoose = { objects: 'shallow', strict: false };
-class NgtStore extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.parentStore = inject(NgtStore, { optional: true, skipSelf: true });
-        this.window = inject(DOCUMENT).defaultView;
-        this.isInit = false;
+function createEvents(store) {
+    /** calculates delta **/
+    function calculateDistance(event) {
+        const internal = store.get('internal');
+        const dx = event.offsetX - internal.initialClick[0];
+        const dy = event.offsetY - internal.initialClick[1];
+        return Math.round(Math.sqrt(dx * dx + dy * dy));
     }
-    init() {
-        if (!this.isInit) {
-            const position = new THREE.Vector3();
-            const defaultTarget = new THREE.Vector3();
-            const tempTarget = new THREE.Vector3();
-            const getCurrentViewport = (camera = this.get('camera'), target = defaultTarget, size = this.get('size')) => {
-                const { width, height, top, left } = size;
-                const aspect = width / height;
-                if (target instanceof THREE.Vector3)
-                    tempTarget.copy(target);
-                else
-                    tempTarget.set(...target);
-                const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
-                if (is.orthographicCamera(camera)) {
-                    return {
-                        width: width / camera.zoom,
-                        height: height / camera.zoom,
-                        top,
-                        left,
-                        factor: 1,
-                        distance,
-                        aspect,
-                    };
+    /** returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc... **/
+    function filterPointerEvents(objects) {
+        return objects.filter((obj) => ['move', 'over', 'enter', 'out', 'leave'].some((name) => {
+            const eventName = `pointer${name}`;
+            return getLocalState(obj).handlers?.[eventName];
+        }));
+    }
+    function intersect(event, filter) {
+        const state = store.get();
+        const duplicates = new Set();
+        const intersections = [];
+        // allow callers to eliminate event objects
+        const eventObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
+        // reset all raycaster cameras to undefined
+        for (let i = 0; i < eventObjects.length; i++) {
+            const instanceState = getLocalState(eventObjects[i]).store?.get();
+            if (instanceState) {
+                instanceState.raycaster.camera = undefined;
+            }
+        }
+        if (!state.previousStore) {
+            // make sure root-level pointer and ray are setup
+            state.events.compute?.(event, store);
+        }
+        function handleRaycast(obj) {
+            const objLocalState = getLocalState(obj);
+            const objStore = objLocalState.store;
+            const objState = objStore?.get();
+            // skip event handling when noEvents is set, or when raycaster camera is null
+            if (!objState || !objState.events.enabled || objState.raycaster.camera === null)
+                return [];
+            // when the camera is undefined, we have to call the events layers to update function
+            if (objState.raycaster.camera === undefined) {
+                objState.events.compute?.(event, objStore, objState.previousStore);
+                // if the camera is still undefined, we have to skip this layer entirely
+                if (objState.raycaster.camera === undefined)
+                    objState.raycaster.camera = null;
+            }
+            // intersect object by object
+            return objState.raycaster.camera ? objState.raycaster.intersectObject(obj, true) : [];
+        }
+        // collect events
+        let hits = eventObjects
+            // intersect objects
+            .flatMap(handleRaycast)
+            // sort by event priority
+            .sort((a, b) => {
+            const aState = getLocalState(a.object).store.get();
+            const bState = getLocalState(b.object).store.get();
+            if (!aState || !bState)
+                return a.distance - b.distance;
+            return bState.events.priority - aState.events.priority || a.distance - b.distance;
+        })
+            // filter out duplicates
+            .filter((item) => {
+            const id = makeId(item);
+            if (duplicates.has(id))
+                return false;
+            duplicates.add(id);
+            return true;
+        });
+        // allow custom userland intersect sort order, this likely only makes sense on the root
+        if (state.events.filter)
+            hits = state.events.filter(hits, store);
+        // bubble up the events, find the event source
+        for (const hit of hits) {
+            let eventObject = hit.object;
+            // bubble event up
+            while (eventObject) {
+                if (getLocalState(eventObject).eventCount) {
+                    intersections.push({ ...hit, eventObject });
                 }
-                const fov = (camera.fov * Math.PI) / 180; // convert vertical fov to radians
-                const h = 2 * Math.tan(fov / 2) * distance; // visible height
-                const w = h * aspect;
-                return { width: w, height: h, top, left, factor: width / w, distance, aspect };
-            };
-            let performanceTimeout;
-            const setPerformanceCurrent = (current) => {
-                this.set((state) => ({ performance: { ...state.performance, current } }));
-            };
-            this.set({
-                get: this.get.bind(this),
-                set: this.set.bind(this),
-                select: this.select.bind(this),
-                ready: false,
-                scene: prepare(new THREE.Scene(), { store: this }),
-                events: { priority: 1, enabled: true, connected: false },
-                invalidate: (frames = 1) => invalidate(this, frames),
-                advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, this),
-                legacy: false,
-                linear: false,
-                flat: false,
-                controls: null,
-                clock: new THREE.Clock(),
-                pointer: new THREE.Vector2(),
-                frameloop: 'always',
-                performance: {
-                    current: 1,
-                    min: 0.5,
-                    max: 1,
-                    debounce: 200,
-                    regress: () => {
-                        const state = this.get();
-                        // clear timeout
-                        if (performanceTimeout)
-                            clearTimeout(performanceTimeout);
-                        // set lower bound
-                        if (state.performance.current !== state.performance.min) {
-                            setPerformanceCurrent(state.performance.min);
-                        }
-                        // go back to upper bound
-                        performanceTimeout = setTimeout(() => setPerformanceCurrent(this.get('performance', 'max') || 1), state.performance.debounce);
-                    },
-                },
-                size: { width: 0, height: 0, top: 0, left: 0 },
-                viewport: {
-                    initialDpr: 0,
-                    dpr: 0,
-                    width: 0,
-                    height: 0,
-                    top: 0,
-                    left: 0,
-                    aspect: 0,
-                    distance: 0,
-                    factor: 0,
-                    getCurrentViewport,
-                },
-                previousStore: this.parentStore,
-                internal: {
-                    active: false,
-                    priority: 0,
-                    frames: 0,
-                    lastEvent: null,
-                    interaction: [],
-                    hovered: new Map(),
-                    subscribers: [],
-                    initialClick: [0, 0],
-                    initialHits: [],
-                    capturedMap: new Map(),
-                    subscribe: (callback, priority = 0, store = this) => {
-                        const internal = this.get('internal');
-                        // If this subscription was given a priority, it takes rendering into its own hands
-                        // For that reason we switch off automatic rendering and increase the manual flag
-                        // As long as this flag is positive there can be no internal rendering at all
-                        // because there could be multiple render subscriptions
-                        internal.priority = internal.priority + (priority > 0 ? 1 : 0);
-                        internal.subscribers.push({ priority, store, callback });
-                        // Register subscriber and sort layers from lowest to highest, meaning,
-                        // highest priority renders last (on top of the other frames)
-                        internal.subscribers.sort((a, b) => (a.priority || 0) - (b.priority || 0));
-                        return () => {
-                            const internal = this.get('internal');
-                            if (internal?.subscribers) {
-                                // Decrease manual flag if this subscription had a priority
-                                internal.priority = internal.priority - (priority > 0 ? 1 : 0);
-                                // Remove subscriber from list
-                                internal.subscribers = internal.subscribers.filter((s) => s.callback !== callback);
+                eventObject = eventObject.parent;
+            }
+        }
+        // if the interaction is captured, make all capturing targets part of the intersects
+        if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
+            for (const capturedData of state.internal.capturedMap.get(event.pointerId).values()) {
+                if (!duplicates.has(makeId(capturedData.intersection))) {
+                    intersections.push(capturedData.intersection);
+                }
+            }
+        }
+        return intersections;
+    }
+    /** handle intersections by forwarding them to handlers */
+    function handleIntersects(intersections, event, delta, callback) {
+        const rootState = store.get();
+        // if anything has been found, forward it to the event listeners
+        if (intersections.length) {
+            const localState = { stopped: false };
+            for (const hit of intersections) {
+                const state = getLocalState(hit.object).store?.get() || rootState;
+                const { raycaster, pointer, camera, internal } = state;
+                const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
+                const hasPointerCapture = (id) => internal.capturedMap.get(id)?.has(hit.eventObject) ?? false;
+                const setPointerCapture = (id) => {
+                    const captureData = { intersection: hit, target: event.target };
+                    if (internal.capturedMap.has(id)) {
+                        // if the pointerId was previously captured, we add the hit to the event capturedMap
+                        internal.capturedMap.get(id).set(hit.eventObject, captureData);
+                    }
+                    else {
+                        // if the pointerId was not previously captured, we create a Map containing the hitObject, and the hit. hitObject is used for faster access
+                        internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
+                    }
+                    // call the original event now
+                    event.target.setPointerCapture(id);
+                };
+                const releasePointerCapture = (id) => {
+                    const captures = internal.capturedMap.get(id);
+                    if (captures) {
+                        releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+                    }
+                };
+                // add native event props
+                const extractEventProps = {};
+                // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+                for (const prop in event) {
+                    const property = event[prop];
+                    // only copy over atomics, leave functions alone as these should be called as event.nativeEvent.fn()
+                    if (typeof property !== 'function') {
+                        extractEventProps[prop] = property;
+                    }
+                }
+                const raycastEvent = {
+                    ...hit,
+                    ...extractEventProps,
+                    pointer,
+                    intersections,
+                    stopped: localState.stopped,
+                    delta,
+                    unprojectedPoint,
+                    ray: raycaster.ray,
+                    camera: camera,
+                    // Hijack stopPropagation, which just sets a flag
+                    stopPropagation() {
+                        // https://github.com/pmndrs/react-three-fiber/issues/596
+                        // Events are not allowed to stop propagation if the pointer has been captured
+                        const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId);
+                        // We only authorize stopPropagation...
+                        if (
+                        // ...if this pointer hasn't been captured
+                        !capturesForPointer ||
+                            // ... or if the hit object is capturing the pointer
+                            capturesForPointer.has(hit.eventObject)) {
+                            raycastEvent.stopped = localState.stopped = true;
+                            // Propagation is stopped, remove all other hover records
+                            // An event handler is only allowed to flush other handlers if it is hovered itself
+                            if (internal.hovered.size &&
+                                Array.from(internal.hovered.values()).find((i) => i.eventObject === hit.eventObject)) {
+                                // Objects cannot flush out higher up objects that have already caught the event
+                                const higher = intersections.slice(0, intersections.indexOf(hit));
+                                cancelPointer([...higher, hit]);
                             }
-                        };
+                        }
                     },
-                },
-                setEvents: (events) => {
-                    this.set((state) => ({ events: { ...state.events, ...events } }));
-                },
-                setSize: (width, height, top, left) => {
-                    const camera = this.get('camera');
-                    const size = { width, height, top: top || 0, left: left || 0 };
-                    this.set((state) => ({
-                        size,
-                        viewport: { ...state.viewport, ...getCurrentViewport(camera, defaultTarget, size) },
-                    }));
-                },
-                setDpr: (dpr) => {
-                    const resolved = makeDpr(dpr, this.window);
-                    this.set((state) => ({
-                        viewport: {
-                            ...state.viewport,
-                            dpr: resolved,
-                            initialDpr: state.viewport.initialDpr || resolved,
-                        },
-                    }));
-                },
-                setFrameloop: (frameloop = 'always') => {
-                    const clock = this.get('clock');
-                    clock.stop();
-                    clock.elapsedTime = 0;
-                    if (frameloop !== 'never') {
-                        clock.start();
-                        clock.elapsedTime = 0;
+                    // there should be a distinction between target and currentTarget
+                    target: { hasPointerCapture, setPointerCapture, releasePointerCapture },
+                    currentTarget: { hasPointerCapture, setPointerCapture, releasePointerCapture },
+                    nativeEvent: event,
+                };
+                // call subscribers
+                callback(raycastEvent);
+                // event bubbling may be interupted by stopPropagation
+                if (localState.stopped === true)
+                    break;
+            }
+        }
+        return intersections;
+    }
+    function cancelPointer(intersections) {
+        const { internal } = store.get();
+        for (const hoveredObj of internal.hovered.values()) {
+            // When no objects were hit or the hovered object wasn't found underneath the cursor
+            // we call onPointerOut and delete the object from the hovered-elements map
+            if (!intersections.length ||
+                !intersections.find((hit) => hit.object === hoveredObj.object &&
+                    hit.index === hoveredObj.index &&
+                    hit.instanceId === hoveredObj.instanceId)) {
+                const eventObject = hoveredObj.eventObject;
+                const instance = getLocalState(eventObject);
+                const handlers = instance?.handlers;
+                internal.hovered.delete(makeId(hoveredObj));
+                if (instance?.eventCount) {
+                    // Clear out intersects, they are outdated by now
+                    const data = { ...hoveredObj, intersections };
+                    handlers?.pointerout?.(data);
+                    handlers?.pointerleave?.(data);
+                }
+            }
+        }
+    }
+    function pointerMissed(event, objects) {
+        for (let i = 0; i < objects.length; i++) {
+            const instance = getLocalState(objects[i]);
+            instance?.handlers.pointermissed?.(event);
+        }
+    }
+    function handlePointer(name) {
+        // Deal with cancelation
+        switch (name) {
+            case 'pointerleave':
+            case 'pointercancel':
+                return () => cancelPointer([]);
+            case 'lostpointercapture':
+                return (event) => {
+                    const { internal } = store.get();
+                    if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
+                        // If the object event interface had onLostPointerCapture, we'd call it here on every
+                        // object that's getting removed.
+                        internal.capturedMap.delete(event.pointerId);
+                        cancelPointer([]);
                     }
-                    this.set({ frameloop });
-                },
-                addInteraction: (interaction) => {
-                    this.set((state) => ({
-                        internal: { ...state.internal, interaction: [...state.internal.interaction, interaction] },
-                    }));
-                },
-                removeInteraction: (uuid) => {
-                    this.set((state) => ({
-                        internal: {
-                            ...state.internal,
-                            interaction: state.internal.interaction.filter((interaction) => interaction.uuid !== uuid),
-                        },
-                    }));
-                },
+                };
+        }
+        // Any other pointer goes here ...
+        return function handleEvent(event) {
+            const { onPointerMissed, internal } = store.get();
+            // prepareRay(event)
+            internal.lastEvent.nativeElement = event;
+            // Get fresh intersects
+            const isPointerMove = name === 'pointermove';
+            const isClickEvent = name === 'click' || name === 'contextmenu' || name === 'dblclick';
+            const filter = isPointerMove ? filterPointerEvents : undefined;
+            // const hits = patchIntersects(intersect(filter), event)
+            const hits = intersect(event, filter);
+            const delta = isClickEvent ? calculateDistance(event) : 0;
+            // Save initial coordinates on pointer-down
+            if (name === 'pointerdown') {
+                internal.initialClick = [event.offsetX, event.offsetY];
+                internal.initialHits = hits.map((hit) => hit.eventObject);
+            }
+            // If a click yields no results, pass it back to the user as a miss
+            // Missed events have to come first in order to establish user-land side-effect clean up
+            if (isClickEvent && !hits.length) {
+                if (delta <= 2) {
+                    pointerMissed(event, internal.interaction);
+                    if (onPointerMissed)
+                        onPointerMissed(event);
+                }
+            }
+            // Take care of unhover
+            if (isPointerMove)
+                cancelPointer(hits);
+            function onIntersect(data) {
+                const eventObject = data.eventObject;
+                const instance = getLocalState(eventObject);
+                const handlers = instance?.handlers;
+                // Check presence of handlers
+                if (!instance?.eventCount)
+                    return;
+                if (isPointerMove) {
+                    // Move event ...
+                    if (handlers?.pointerover ||
+                        handlers?.pointerenter ||
+                        handlers?.pointerout ||
+                        handlers?.pointerleave) {
+                        // When enter or out is present take care of hover-state
+                        const id = makeId(data);
+                        const hoveredItem = internal.hovered.get(id);
+                        if (!hoveredItem) {
+                            // If the object wasn't previously hovered, book it and call its handler
+                            internal.hovered.set(id, data);
+                            handlers.pointerover?.(data);
+                            handlers.pointerenter?.(data);
+                        }
+                        else if (hoveredItem.stopped) {
+                            // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
+                            data.stopPropagation();
+                        }
+                    }
+                    // Call mouse move
+                    handlers?.pointermove?.(data);
+                }
+                else {
+                    // All other events ...
+                    const handler = handlers?.[name];
+                    if (handler) {
+                        // Forward all events back to their respective handlers with the exception of click events,
+                        // which must use the initial target
+                        if (!isClickEvent || internal.initialHits.includes(eventObject)) {
+                            // Missed events have to come first
+                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
+                            // Now call the handler
+                            handler(data);
+                        }
+                    }
+                    else {
+                        // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
+                        if (isClickEvent && internal.initialHits.includes(eventObject)) {
+                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
+                        }
+                    }
+                }
+            }
+            handleIntersects(hits, event, delta, onIntersect);
+        };
+    }
+    return { handlePointer };
+}
+
+const DOM_EVENTS = {
+    click: false,
+    contextmenu: false,
+    dblclick: false,
+    wheel: false,
+    pointerdown: true,
+    pointerup: true,
+    pointerleave: true,
+    pointermove: true,
+    pointercancel: true,
+    lostpointercapture: true,
+};
+const supportedEvents = [
+    'click',
+    'contextmenu',
+    'dblclick',
+    'pointerup',
+    'pointerdown',
+    'pointerover',
+    'pointerout',
+    'pointerenter',
+    'pointerleave',
+    'pointermove',
+    'pointermissed',
+    'pointercancel',
+    'wheel',
+];
+function createPointerEvents(store) {
+    const { handlePointer } = createEvents(store);
+    return {
+        priority: 1,
+        enabled: true,
+        compute: (event, root) => {
+            const state = root.get();
+            // https://github.com/pmndrs/react-three-fiber/pull/782
+            // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+            state.pointer.set((event.offsetX / state.size.width) * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+            state.raycaster.setFromCamera(state.pointer, state.camera);
+        },
+        connected: undefined,
+        handlers: Object.keys(DOM_EVENTS).reduce((handlers, supportedEventName) => {
+            handlers[supportedEventName] = handlePointer(supportedEventName);
+            return handlers;
+        }, {}),
+        connect: (target) => {
+            const state = store.get();
+            state.events.disconnect?.();
+            state.setEvents({ connected: target });
+            Object.entries(state.events.handlers ?? {}).forEach(([eventName, eventHandler]) => {
+                const passive = DOM_EVENTS[eventName];
+                target.addEventListener(eventName, eventHandler, { passive });
             });
-            this.isInit = true;
-            this.resize();
-        }
-    }
-    configure(inputs, canvasElement) {
-        const { gl: glOptions, size: sizeOptions, camera: cameraOptions, raycaster: raycasterOptions, events, orthographic, lookAt, shadows, linear, legacy, flat, dpr, frameloop, performance, } = inputs;
-        const state = this.get();
-        const stateToUpdate = {};
-        // setup renderer
-        let gl = state.gl;
-        if (!state.gl)
-            stateToUpdate.gl = gl = makeDefaultRenderer(glOptions, canvasElement);
-        // setup raycaster
-        let raycaster = state.raycaster;
-        if (!raycaster)
-            stateToUpdate.raycaster = raycaster = new THREE.Raycaster();
-        // set raycaster options
-        const { params, ...options } = raycasterOptions || {};
-        if (!is.equ(options, raycaster, shallowLoose))
-            applyProps(raycaster, { ...options });
-        if (!is.equ(params, raycaster.params, shallowLoose)) {
-            applyProps(raycaster, { params: { ...raycaster.params, ...(params || {}) } });
-        }
-        // create default camera
-        if (!state.camera) {
-            const isCamera = is.camera(cameraOptions);
-            let camera = isCamera ? cameraOptions : makeDefaultCamera(orthographic || false, state.size);
-            if (!isCamera) {
-                if (cameraOptions)
-                    applyProps(camera, cameraOptions);
-                // set position.z
-                if (!cameraOptions?.position)
-                    camera.position.z = 5;
-                // always look at center or passed-in lookAt by default
-                if (!cameraOptions?.rotation) {
-                    if (Array.isArray(lookAt))
-                        camera.lookAt(lookAt[0], lookAt[1], lookAt[2]);
-                    else if (lookAt instanceof THREE.Vector3)
-                        camera.lookAt(lookAt);
-                    else
-                        camera.lookAt(0, 0, 0);
-                }
-                // update projection matrix after applyprops
-                camera.updateProjectionMatrix?.();
-            }
-            if (!is.instance(camera))
-                camera = prepare(camera, { store: this });
-            stateToUpdate.camera = camera;
-        }
-        // Set up XR (one time only!)
-        if (!state.xr) {
-            // Handle frame behavior in WebXR
-            const handleXRFrame = (timestamp, frame) => {
-                const state = this.get();
-                if (state.frameloop === 'never')
-                    return;
-                advance(timestamp, true, this, frame);
-            };
-            // Toggle render switching on session
-            const handleSessionChange = () => {
-                const state = this.get();
-                state.gl.xr.enabled = state.gl.xr.isPresenting;
-                state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
-                if (!state.gl.xr.isPresenting)
-                    invalidate(this);
-            };
-            // WebXR session manager
-            const xr = {
-                connect: () => {
-                    gl.xr.addEventListener('sessionstart', handleSessionChange);
-                    gl.xr.addEventListener('sessionend', handleSessionChange);
-                },
-                disconnect: () => {
-                    gl.xr.removeEventListener('sessionstart', handleSessionChange);
-                    gl.xr.removeEventListener('sessionend', handleSessionChange);
-                },
-            };
-            // Subscribe to WebXR session events
-            if (gl.xr)
-                xr.connect();
-            stateToUpdate.xr = xr;
-        }
-        // Set shadowmap
-        if (gl.shadowMap) {
-            const isBoolean = typeof shadows === 'boolean';
-            if ((isBoolean && gl.shadowMap.enabled !== shadows) || !is.equ(shadows, gl.shadowMap, shallowLoose)) {
-                const old = gl.shadowMap.enabled;
-                gl.shadowMap.enabled = !!shadows;
-                if (!isBoolean)
-                    Object.assign(gl.shadowMap, shadows);
-                else
-                    gl.shadowMap.type = THREE.PCFSoftShadowMap;
-                if (old !== gl.shadowMap.enabled)
-                    checkNeedsUpdate(gl.shadowMap);
+        },
+        disconnect: () => {
+            const { events, setEvents } = store.get();
+            if (events.connected) {
+                Object.entries(events.handlers ?? {}).forEach(([eventName, eventHandler]) => {
+                    if (events.connected instanceof HTMLElement) {
+                        events.connected.removeEventListener(eventName, eventHandler);
+                    }
+                });
+                setEvents({ connected: undefined });
             }
+        },
+    };
+}
+
+function safeDetectChanges(cdr) {
+    if (!cdr)
+        return;
+    try {
+        // dynamic created component with ViewContainerRef#createComponent does not have Context
+        // but it has _attachedToViewContainer
+        if (cdr['context'] || cdr['_attachedToViewContainer']) {
+            cdr.detectChanges();
         }
-        // Safely set color management if available.
-        // Avoid accessing THREE.ColorManagement to play nice with older versions
-        if (THREE.ColorManagement) {
-            const ColorManagement = THREE.ColorManagement;
-            if ('enabled' in ColorManagement)
-                ColorManagement['enabled'] = !legacy ?? false;
-            else if ('legacyMode' in ColorManagement)
-                ColorManagement['legacyMode'] = legacy ?? true;
-        }
-        // set color space and tonemapping preferences
-        const LinearEncoding = 3000;
-        const sRGBEncoding = 3001;
-        applyProps(gl, {
-            outputEncoding: linear ? LinearEncoding : sRGBEncoding,
-            toneMapping: flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping,
-        });
-        // Update color management state
-        if (state.legacy !== legacy)
-            stateToUpdate.legacy = legacy;
-        if (state.linear !== linear)
-            stateToUpdate.linear = linear;
-        if (state.flat !== flat)
-            stateToUpdate.flat = flat;
-        // Set gl props
-        gl.setClearAlpha(0);
-        gl.setPixelRatio(makeDpr(state.viewport.dpr));
-        gl.setSize(state.size.width, state.size.height);
-        if (is.obj(glOptions) &&
-            !(typeof glOptions === 'function') &&
-            !is.renderer(glOptions) &&
-            !is.equ(glOptions, gl, shallowLoose)) {
-            applyProps(gl, glOptions);
-        }
-        // Store events internally
-        if (events && !state.events.handlers)
-            stateToUpdate.events = events(this);
-        // Check performance
-        if (performance && !is.equ(performance, state.performance, shallowLoose)) {
-            stateToUpdate.performance = { ...state.performance, ...performance };
-        }
-        this.set(stateToUpdate);
-        // Check pixelratio
-        if (dpr && state.viewport.dpr !== makeDpr(dpr))
-            state.setDpr(dpr);
-        // Check size, allow it to take on container bounds initially
-        const size = computeInitialSize(canvasElement, sizeOptions);
-        if (!is.equ(size, state.size, shallowLoose))
-            state.setSize(size.width, size.height, size.top, size.left);
-        // Check frameloop
-        if (state.frameloop !== frameloop)
-            state.setFrameloop(frameloop);
-        if (!this.get('ready'))
-            this.set({ ready: true });
-        this.invalidate();
     }
-    destroy(canvas) {
-        this.set((state) => ({ internal: { ...state.internal, active: false } }));
-        setTimeout(() => {
-            const { gl, xr, events } = this.get();
-            if (gl) {
-                if (events.disconnect) {
-                    events.disconnect();
-                }
-                gl.renderLists.dispose();
-                gl.forceContextLoss();
-                if (gl.xr && gl.xr.enabled) {
-                    gl.xr.setAnimationLoop(null);
-                    xr.disconnect();
-                }
-                dispose(this.get());
-                rootStateMap.delete(canvas);
-            }
-        }, 500);
+    catch (e) {
+        cdr.markForCheck();
     }
-    resize() {
-        const state = this.get();
-        let oldSize = state.size;
-        let oldDpr = state.viewport.dpr;
-        let oldCamera = state.camera;
-        this.hold(combineLatest([this.select('camera'), this.select('size'), this.select('viewport'), this.select('gl')]), ([camera, size, viewport, gl]) => {
-            // resize camera and renderer on changes to size and dpr
-            if (size !== oldSize || viewport.dpr !== oldDpr) {
-                oldSize = size;
-                oldDpr = viewport.dpr;
-                // update camera
-                updateCamera(camera, size);
-                gl.setPixelRatio(viewport.dpr);
-                gl.setSize(size.width, size.height);
+}
+
+const cached = new Map();
+function load(loaderConstructorFactory, inputs, { extensions, onProgress, } = {}) {
+    const computedUrls = computed(() => {
+        const input = inputs();
+        if (Array.isArray(input))
+            return input;
+        if (typeof input === 'string')
+            return [input];
+        return Object.values(input);
+    });
+    return () => {
+        const urls = computedUrls();
+        const loaderConstructor = loaderConstructorFactory(urls);
+        const loader = new loaderConstructor();
+        if (extensions)
+            extensions(loader);
+        return urls.map((url) => new Promise((resolve, reject) => {
+            if (cached.has(url)) {
+                resolve(cached.get(url));
             }
-            // update viewport when camera changes
-            if (camera !== oldCamera) {
-                updateCamera(camera, size);
-                oldCamera = camera;
-                this.set((state) => ({
-                    viewport: { ...state.viewport, ...state.viewport.getCurrentViewport(camera) },
-                }));
+            else {
+                loader.load(url, (data) => {
+                    if ('scene' in data)
+                        Object.assign(data, makeObjectGraph(data['scene']));
+                    cached.set(url, data);
+                    resolve(data);
+                }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error}`)));
             }
-        });
-    }
-    invalidate() {
-        this.hold(this.select(), () => invalidate(this));
+        }));
+    };
+}
+function injectNgtLoader(loaderConstructorFactory, inputs, { extensions, onProgress, injector = inject(Injector, { optional: true }), } = {}) {
+    !injector && assertInInjectionContext(injectNgtLoader);
+    return runInInjectionContext(injector, () => {
+        const cdr = inject(ChangeDetectorRef);
+        const response = signal(null);
+        const effector = load(loaderConstructorFactory, inputs, { extensions, onProgress });
+        effect(() => {
+            const originalUrls = untracked(inputs);
+            Promise.all(effector())
+                .then((results) => {
+                if (Array.isArray(originalUrls))
+                    return results;
+                if (typeof originalUrls === 'string')
+                    return results[0];
+                const keys = Object.keys(originalUrls);
+                return keys.reduce((result, key) => {
+                    result[key] = results[keys.indexOf(key)];
+                    return result;
+                }, {});
+            })
+                .then((value) => {
+                response.set(value);
+                safeDetectChanges(cdr);
+            });
+        }, { injector: injector, allowSignalWrites: true });
+        return response.asReadonly();
+    });
+}
+injectNgtLoader['preload'] = (loaderConstructorFactory, inputs, extensions) => {
+    Promise.all(load(loaderConstructorFactory, inputs, { extensions })());
+};
+injectNgtLoader['destroy'] = () => {
+    cached.clear();
+};
+
+function createSubs(callback, subs) {
+    const sub = { callback };
+    subs.add(sub);
+    return () => void subs.delete(sub);
+}
+const globalEffects = new Set();
+const globalAfterEffects = new Set();
+const globalTailEffects = new Set();
+/**
+ * Adds a global render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
+ */
+const addEffect = (callback) => createSubs(callback, globalEffects);
+/**
+ * Adds a global after-render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
+ */
+const addAfterEffect = (callback) => createSubs(callback, globalAfterEffects);
+/**
+ * Adds a global callback which is called when rendering stops.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
+ */
+const addTail = (callback) => createSubs(callback, globalTailEffects);
+function run(effects, timestamp) {
+    if (!effects.size)
+        return;
+    for (const { callback } of effects.values()) {
+        callback(timestamp);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtStore, decorators: [{
-            type: Injectable
-        }] });
-function computeInitialSize(canvas, defaultSize) {
-    if (defaultSize)
-        return defaultSize;
-    if (canvas instanceof HTMLCanvasElement && canvas.parentElement) {
-        return canvas.parentElement.getBoundingClientRect();
+function flushGlobalEffects(type, timestamp) {
+    switch (type) {
+        case 'before':
+            return run(globalEffects, timestamp);
+        case 'after':
+            return run(globalAfterEffects, timestamp);
+        case 'tail':
+            return run(globalTailEffects, timestamp);
     }
-    return { width: 0, height: 0, top: 0, left: 0 };
 }
-// Disposes an object and all its properties
-function dispose(obj) {
-    if (obj.dispose && !is.scene(obj))
-        obj.dispose();
-    for (const p in obj) {
-        p.dispose?.();
-        delete obj[p];
+function render(timestamp, store, frame) {
+    const state = store.get();
+    // Run local effects
+    let delta = state.clock.getDelta();
+    // In frameloop='never' mode, clock times are updated using the provided timestamp
+    if (state.frameloop === 'never' && typeof timestamp === 'number') {
+        delta = timestamp - state.clock.elapsedTime;
+        state.clock.oldTime = state.clock.elapsedTime;
+        state.clock.elapsedTime = timestamp;
     }
-}
-
-const NGT_COMPOUND_PREFIXES = new InjectionToken('NgtCompoundPrefixes');
-
-const catalogue = {};
-function extend(objects) {
-    Object.assign(catalogue, objects);
-}
-const NGT_CATALOGUE = new InjectionToken('THREE Constructors Catalogue', { factory: () => catalogue });
-
-class NgtCommonDirective {
-    constructor() {
-        this.vcr = inject(ViewContainerRef);
-        this.template = inject(TemplateRef);
-        this.injected = false;
-        this.shouldCreateView = true;
-        const commentNode = this.vcr.element.nativeElement;
-        if (commentNode['__ngt_renderer_add_comment__']) {
-            commentNode['__ngt_renderer_add_comment__']();
-            delete commentNode['__ngt_renderer_add_comment__'];
-        }
+    // Call subscribers (useFrame)
+    const subscribers = state.internal.subscribers;
+    for (let i = 0; i < subscribers.length; i++) {
+        const subscription = subscribers[i];
+        subscription.callback({ ...subscription.store.get(), delta, frame });
     }
-    createView() {
-        if (this.shouldCreateView) {
-            if (this.view && !this.view.destroyed) {
-                this.view.destroy();
+    // Render content
+    if (!state.internal.priority && state.gl.render)
+        state.gl.render(state.scene, state.camera);
+    // Decrease frame count
+    state.internal.frames = Math.max(0, state.internal.frames - 1);
+    return state.frameloop === 'always' ? 1 : state.internal.frames;
+}
+function createLoop(roots) {
+    let running = false;
+    let repeat;
+    let frame;
+    function loop(timestamp) {
+        frame = requestAnimationFrame(loop);
+        running = true;
+        repeat = 0;
+        // Run effects
+        flushGlobalEffects('before', timestamp);
+        // Render all roots
+        for (const root of roots.values()) {
+            const state = root.get();
+            // If the frameloop is invalidated, do not run another frame
+            if (state.internal.active &&
+                (state.frameloop === 'always' || state.internal.frames > 0) &&
+                !state.gl.xr?.isPresenting) {
+                repeat += render(timestamp, root);
             }
-            this.view = this.vcr.createEmbeddedView(this.template);
-            safeDetectChanges(this.view);
+        }
+        // Run after-effects
+        flushGlobalEffects('after', timestamp);
+        // Stop the loop if nothing invalidates it
+        if (repeat === 0) {
+            // Tail call effects, they are called when rendering stops
+            flushGlobalEffects('tail', timestamp);
+            // Flag end of operation
+            running = false;
+            return cancelAnimationFrame(frame);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtCommonDirective, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCommonDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return []; } });
-
-class NgtArgs extends NgtCommonDirective {
-    constructor() {
-        super(...arguments);
-        this.injectedArgs = [];
-    }
-    set args(args) {
-        if (args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null))
+    function invalidate(store, frames = 1) {
+        const state = store?.get();
+        if (!state)
+            return roots.forEach((root) => invalidate(root, frames));
+        if (state.gl.xr?.isPresenting || !state.internal.active || state.frameloop === 'never')
             return;
-        this.injected = false;
-        this.injectedArgs = args;
-        this.createView();
-    }
-    get args() {
-        if (this.validate()) {
-            this.injected = true;
-            return this.injectedArgs;
+        // Increase frames, do not go higher than 60
+        state.internal.frames = Math.min(60, state.internal.frames + frames);
+        // If the render-loop isn't active, start it
+        if (!running) {
+            running = true;
+            requestAnimationFrame(loop);
         }
-        return null;
     }
-    validate() {
-        return !this.injected && !!this.injectedArgs.length;
+    function advance(timestamp, runGlobalEffects = true, store, frame) {
+        const state = store?.get();
+        if (runGlobalEffects)
+            flushGlobalEffects('before', timestamp);
+        if (!state)
+            for (const root of roots.values())
+                render(timestamp, root);
+        else
+            render(timestamp, store, frame);
+        if (runGlobalEffects)
+            flushGlobalEffects('after', timestamp);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
+    return {
+        loop,
+        /**
+         * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+         */
+        invalidate,
+        /**
+         * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+         */
+        advance,
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtArgs, decorators: [{
-            type: Directive,
-            args: [{ selector: '[args]', standalone: true }]
-        }], propDecorators: { args: [{
-                type: Input
-            }] } });
 
-class NgtParent extends NgtCommonDirective {
-    constructor() {
-        super(...arguments);
-        this.injectedParent = null;
-    }
-    set parent(parent) {
-        if (!parent)
-            return;
-        this.injected = false;
-        this.injectedParent = parent;
-        this.createView();
+function diffProps(instance, props) {
+    const propsEntries = Object.entries(props);
+    const changes = [];
+    for (const [propKey, propValue] of propsEntries) {
+        if (is.equ(propValue, instance[propKey]))
+            continue;
+        changes.push([propKey, propValue]);
     }
-    get parent() {
-        if (this.validate()) {
-            this.injected = true;
-            return this.injectedParent;
+    return changes;
+}
+function applyProps(instance, props) {
+    // if props is empty
+    if (!Object.keys(props).length)
+        return instance;
+    // filter equals, events , and reserved props
+    const localState = getLocalState(instance);
+    const rootState = localState.store?.get();
+    const changes = diffProps(instance, props);
+    for (let i = 0; i < changes.length; i++) {
+        let key = changes[i][0];
+        const currentInstance = instance;
+        const targetProp = currentInstance[key];
+        let value = changes[i][1];
+        if (is.colorSpaceExist(currentInstance)) {
+            const sRGBEncoding = 3001;
+            const SRGBColorSpace = 'srgb';
+            const LinearSRGBColorSpace = 'srgb-linear';
+            if (key === 'encoding') {
+                key = 'colorSpace';
+                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+            }
+            else if (key === 'outputEncoding') {
+                key = 'outputColorSpace';
+                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+            }
         }
-        return null;
+        // special treatmen for objects with support for set/copy, and layers
+        if (targetProp && targetProp['set'] && (targetProp['copy'] || targetProp instanceof THREE.Layers)) {
+            const isColor = targetProp instanceof THREE.Color;
+            // if value is an array
+            if (Array.isArray(value)) {
+                if (targetProp['fromArray'])
+                    targetProp['fromArray'](value);
+                else
+                    targetProp['set'](...value);
+            }
+            // test again target.copy
+            else if (targetProp['copy'] &&
+                value &&
+                value.constructor &&
+                targetProp.constructor.name === value.constructor.name) {
+                targetProp['copy'](value);
+                if (!THREE.ColorManagement && !rootState.linear && isColor)
+                    targetProp['convertSRGBToLinear']();
+            }
+            // if nothing else fits, just set the single value, ignore undefined
+            else if (value !== undefined) {
+                const isColor = targetProp instanceof THREE.Color;
+                // allow setting array scalars
+                if (!isColor && targetProp['setScalar'])
+                    targetProp['setScalar'](value);
+                // layers have no copy function, copy the mask
+                else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers)
+                    targetProp.mask = value.mask;
+                // otherwise just set ...
+                else
+                    targetProp['set'](value);
+                // auto-convert srgb
+                if (!THREE.ColorManagement && !rootState?.linear && isColor)
+                    targetProp.convertSRGBToLinear();
+            }
+        }
+        // else just overwrite the value
+        else {
+            currentInstance[key] = value;
+            // auto-convert srgb textures
+            if (currentInstance[key] instanceof THREE.Texture &&
+                currentInstance[key].format === THREE.RGBAFormat &&
+                currentInstance[key].type === THREE.UnsignedByteType) {
+                const texture = currentInstance[key];
+                if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
+                    texture.colorSpace = rootState.gl.outputColorSpace;
+                else
+                    texture.encoding = rootState.gl.outputEncoding;
+            }
+        }
+        checkUpdate(targetProp);
+        invalidateInstance(instance);
+    }
+    const instanceHandlers = localState.eventCount;
+    const parent = localState.parent ? untracked(localState.parent) : null;
+    if (parent && rootState.internal && instance['raycast'] && instanceHandlers !== localState.eventCount) {
+        // Pre-emptively remove the instance from the interaction manager
+        const index = rootState.internal.interaction.indexOf(instance);
+        if (index > -1)
+            rootState.internal.interaction.splice(index, 1);
+        // Add the instance to the interaction manager only when it has handlers
+        if (localState.eventCount)
+            rootState.internal.interaction.push(instance);
     }
-    validate() {
-        return !this.injected && !!this.injectedParent;
+    if (parent && localState.afterUpdate && localState.afterUpdate.observed && changes.length) {
+        localState.afterUpdate.emit(instance);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
+    return instance;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtParent, decorators: [{
-            type: Directive,
-            args: [{ selector: '[parent]', standalone: true }]
-        }], propDecorators: { parent: [{
-                type: Input
-            }] } });
 
-function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
-    const captureData = captures.get(obj);
-    if (captureData) {
-        captures.delete(obj);
-        // if this was the last captured object for this pointer
-        if (captures.size === 0) {
-            capturedMap.delete(pointerId);
-            captureData.target.releasePointerCapture(pointerId);
-        }
+const STORE_COMPUTED_KEY = '__ngt_store_computed__';
+class NgtSignalStore {
+    #state;
+    #computedCache = new Map();
+    constructor(initialState = {}) {
+        initialState ??= {};
+        this.#state = signal(Object.assign(initialState, { __ngt_dummy_state__: Date.now() }));
+    }
+    select(...keysAndOptions) {
+        if (keysAndOptions.length === 0)
+            return this.#state.asReadonly();
+        if (keysAndOptions.length === 1 && typeof keysAndOptions[0] === 'object') {
+            if (!this.#computedCache.has(STORE_COMPUTED_KEY)) {
+                this.#computedCache.set(STORE_COMPUTED_KEY, computed(() => this.#state(), keysAndOptions));
+                return this.#computedCache.get(STORE_COMPUTED_KEY);
+            }
+        }
+        const [keys, options] = parseOptions(keysAndOptions);
+        const joinedKeys = keys.join('-');
+        if (!this.#computedCache.has(joinedKeys)) {
+            this.#computedCache.set(joinedKeys, computed(() => {
+                const state = this.#state();
+                return keys.reduce((value, key) => value[key], state);
+            }, options));
+        }
+        return this.#computedCache.get(joinedKeys);
+    }
+    get(...keys) {
+        const state = untracked(this.#state);
+        if (keys.length === 0)
+            return state;
+        return keys.reduce((value, key) => value[key], state);
+    }
+    set(state) {
+        this.#state.update((previous) => ({
+            ...previous,
+            ...(typeof state === 'function' ? state(previous) : state),
+        }));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtSignalStore, deps: [{ token: 'INITIAL_STATE', optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtSignalStore }); }
 }
-function removeInteractivity(store, object) {
-    const internal = store.get('internal');
-    // removes every trace of an object from data store
-    internal.interaction = internal.interaction.filter((o) => o !== object);
-    internal.initialHits = internal.initialHits.filter((o) => o !== object);
-    internal.hovered.forEach((value, key) => {
-        if (value.eventObject === object || value.object === object) {
-            // clear out intersects, they are outdated by now
-            internal.hovered.delete(key);
-        }
-    });
-    internal.capturedMap.forEach((captures, pointerId) => {
-        releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
-    });
-    if (store.get('previousStore')) {
-        removeInteractivity(store.get('previousStore'), object);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtSignalStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: ['INITIAL_STATE']
+                }] }]; } });
+function parseOptions(keysAndOptions) {
+    if (typeof keysAndOptions.at(-1) === 'object') {
+        return [keysAndOptions.slice(0, -1), keysAndOptions.at(-1)];
     }
+    return [keysAndOptions];
 }
-function createEvents(store) {
-    /** calculates delta **/
-    function calculateDistance(event) {
-        const internal = store.get('internal');
-        const dx = event.offsetX - internal.initialClick[0];
-        const dy = event.offsetY - internal.initialClick[1];
-        return Math.round(Math.sqrt(dx * dx + dy * dy));
-    }
-    /** returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc... **/
-    function filterPointerEvents(objects) {
-        return objects.filter((obj) => ['move', 'over', 'enter', 'out', 'leave'].some((name) => {
-            const eventName = `pointer${name}`;
-            return getLocalState(obj).handlers?.[eventName];
-        }));
+
+const rootStateMap = new Map();
+const { invalidate, advance } = createLoop(rootStateMap);
+const shallowLoose = { objects: 'shallow', strict: false };
+class NgtStore extends NgtSignalStore {
+    constructor() {
+        super(...arguments);
+        this.#parentStore = inject(NgtStore, { optional: true, skipSelf: true });
+        this.#window = inject(DOCUMENT).defaultView;
+        this.#injector = inject(Injector);
+        this.isInit = false;
     }
-    function intersect(event, filter) {
-        const state = store.get();
-        const duplicates = new Set();
-        const intersections = [];
-        // allow callers to eliminate event objects
-        const eventObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
-        // reset all raycaster cameras to undefined
-        for (let i = 0; i < eventObjects.length; i++) {
-            const instanceState = getLocalState(eventObjects[i]).store?.get();
-            if (instanceState) {
-                instanceState.raycaster.camera = undefined;
-            }
-        }
-        if (!state.previousStore) {
-            // make sure root-level pointer and ray are setup
-            state.events.compute?.(event, store);
-        }
-        function handleRaycast(obj) {
-            const objLocalState = getLocalState(obj);
-            const objStore = objLocalState.store;
-            const objState = objStore?.get();
-            // skip event handling when noEvents is set, or when raycaster camera is null
-            if (!objState || !objState.events.enabled || objState.raycaster.camera === null)
-                return [];
-            // when the camera is undefined, we have to call the events layers to update function
-            if (objState.raycaster.camera === undefined) {
-                objState.events.compute?.(event, objStore, objState.previousStore);
-                // if the camera is still undefined, we have to skip this layer entirely
-                if (objState.raycaster.camera === undefined)
-                    objState.raycaster.camera = null;
-            }
-            // intersect object by object
-            return objState.raycaster.camera ? objState.raycaster.intersectObject(obj, true) : [];
-        }
-        // collect events
-        let hits = eventObjects
-            // intersect objects
-            .flatMap(handleRaycast)
-            // sort by event priority
-            .sort((a, b) => {
-            const aState = getLocalState(a.object).store.get();
-            const bState = getLocalState(b.object).store.get();
-            if (!aState || !bState)
-                return a.distance - b.distance;
-            return bState.events.priority - aState.events.priority || a.distance - b.distance;
-        })
-            // filter out duplicates
-            .filter((item) => {
-            const id = makeId(item);
-            if (duplicates.has(id))
-                return false;
-            duplicates.add(id);
-            return true;
-        });
-        // allow custom userland intersect sort order, this likely only makes sense on the root
-        if (state.events.filter)
-            hits = state.events.filter(hits, store);
-        // bubble up the events, find the event source
-        for (const hit of hits) {
-            let eventObject = hit.object;
-            // bubble event up
-            while (eventObject) {
-                if (getLocalState(eventObject).eventCount) {
-                    intersections.push({ ...hit, eventObject });
+    #parentStore;
+    #window;
+    #injector;
+    init() {
+        if (!this.isInit) {
+            const position = new THREE.Vector3();
+            const defaultTarget = new THREE.Vector3();
+            const tempTarget = new THREE.Vector3();
+            const getCurrentViewport = (camera = this.get('camera'), target = defaultTarget, size = this.get('size')) => {
+                const { width, height, top, left } = size;
+                const aspect = width / height;
+                if (target instanceof THREE.Vector3)
+                    tempTarget.copy(target);
+                else
+                    tempTarget.set(...target);
+                const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+                if (is.orthographicCamera(camera)) {
+                    return {
+                        width: width / camera.zoom,
+                        height: height / camera.zoom,
+                        top,
+                        left,
+                        factor: 1,
+                        distance,
+                        aspect,
+                    };
+                }
+                const fov = (camera.fov * Math.PI) / 180; // convert vertical fov to radians
+                const h = 2 * Math.tan(fov / 2) * distance; // visible height
+                const w = h * aspect;
+                return { width: w, height: h, top, left, factor: width / w, distance, aspect };
+            };
+            let performanceTimeout;
+            const setPerformanceCurrent = (current) => {
+                this.set((state) => ({ performance: { ...state.performance, current } }));
+            };
+            this.set({
+                get: this.get.bind(this),
+                set: this.set.bind(this),
+                ready: false,
+                events: { priority: 1, enabled: true, connected: false },
+                invalidate: (frames = 1) => invalidate(this, frames),
+                advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, this),
+                legacy: false,
+                linear: false,
+                flat: false,
+                controls: null,
+                clock: new THREE.Clock(),
+                pointer: new THREE.Vector2(),
+                frameloop: 'always',
+                performance: {
+                    current: 1,
+                    min: 0.5,
+                    max: 1,
+                    debounce: 200,
+                    regress: () => {
+                        const state = this.get();
+                        // clear timeout
+                        if (performanceTimeout)
+                            clearTimeout(performanceTimeout);
+                        // set lower bound
+                        if (state.performance.current !== state.performance.min)
+                            setPerformanceCurrent(state.performance.min);
+                        // go back to upper bound
+                        performanceTimeout = setTimeout(() => setPerformanceCurrent(this.get('performance', 'max') || 1), state.performance.debounce);
+                    },
+                },
+                size: { width: 0, height: 0, top: 0, left: 0 },
+                viewport: {
+                    initialDpr: 0,
+                    dpr: 0,
+                    width: 0,
+                    height: 0,
+                    top: 0,
+                    left: 0,
+                    aspect: 0,
+                    distance: 0,
+                    factor: 0,
+                    getCurrentViewport,
+                },
+                previousStore: this.#parentStore,
+                internal: {
+                    active: false,
+                    priority: 0,
+                    frames: 0,
+                    lastEvent: new ElementRef(null),
+                    interaction: [],
+                    hovered: new Map(),
+                    subscribers: [],
+                    initialClick: [0, 0],
+                    initialHits: [],
+                    capturedMap: new Map(),
+                    subscribe: (callback, priority = 0, store = this) => {
+                        const internal = this.get('internal');
+                        // If this subscription was given a priority, it takes rendering into its own hands
+                        // For that reason we switch off automatic rendering and increase the manual flag
+                        // As long as this flag is positive there can be no internal rendering at all
+                        // because there could be multiple render subscriptions
+                        internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+                        internal.subscribers.push({ priority, store, callback });
+                        // Register subscriber and sort layers from lowest to highest, meaning,
+                        // highest priority renders last (on top of the other frames)
+                        internal.subscribers.sort((a, b) => (a.priority || 0) - (b.priority || 0));
+                        return () => {
+                            const internal = this.get('internal');
+                            if (internal?.subscribers) {
+                                // Decrease manual flag if this subscription had a priority
+                                internal.priority = internal.priority - (priority > 0 ? 1 : 0);
+                                // Remove subscriber from list
+                                internal.subscribers = internal.subscribers.filter((s) => s.callback !== callback);
+                            }
+                        };
+                    },
+                },
+                setEvents: (events) => {
+                    this.set((state) => ({ events: { ...state.events, ...events } }));
+                },
+                setSize: (width, height, top, left) => {
+                    const camera = this.get('camera');
+                    const size = { width, height, top: top || 0, left: left || 0 };
+                    this.set((state) => ({
+                        size,
+                        viewport: { ...state.viewport, ...getCurrentViewport(camera, defaultTarget, size) },
+                    }));
+                },
+                setDpr: (dpr) => {
+                    const resolved = makeDpr(dpr, this.#window);
+                    this.set((state) => ({
+                        viewport: {
+                            ...state.viewport,
+                            dpr: resolved,
+                            initialDpr: state.viewport.initialDpr || resolved,
+                        },
+                    }));
+                },
+                setFrameloop: (frameloop = 'always') => {
+                    const clock = this.get('clock');
+                    clock.stop();
+                    clock.elapsedTime = 0;
+                    if (frameloop !== 'never') {
+                        clock.start();
+                        clock.elapsedTime = 0;
+                    }
+                    this.set({ frameloop });
+                },
+            });
+            this.isInit = true;
+            this.#resize();
+        }
+    }
+    configure(inputs, canvasElement) {
+        const { gl: glOptions, size: sizeOptions, camera: cameraOptions, raycaster: raycasterOptions, scene: sceneOptions, events, orthographic, lookAt, shadows, linear, legacy, flat, dpr, frameloop, performance, } = inputs;
+        const state = this.get();
+        const stateToUpdate = {};
+        // setup renderer
+        let gl = state.gl;
+        if (!state.gl)
+            stateToUpdate.gl = gl = makeDefaultRenderer(glOptions, canvasElement);
+        // setup raycaster
+        let raycaster = state.raycaster;
+        if (!raycaster)
+            stateToUpdate.raycaster = raycaster = new THREE.Raycaster();
+        // set raycaster options
+        const { params, ...options } = raycasterOptions || {};
+        if (!is.equ(options, raycaster, shallowLoose))
+            applyProps(raycaster, { ...options });
+        if (!is.equ(params, raycaster.params, shallowLoose)) {
+            applyProps(raycaster, { params: { ...raycaster.params, ...(params || {}) } });
+        }
+        // create default camera
+        if (!state.camera) {
+            const isCamera = is.camera(cameraOptions);
+            let camera = isCamera ? cameraOptions : makeDefaultCamera(orthographic || false, state.size);
+            if (!isCamera) {
+                if (cameraOptions)
+                    applyProps(camera, cameraOptions);
+                // set position.z
+                if (!cameraOptions?.position)
+                    camera.position.z = 5;
+                // always look at center or passed-in lookAt by default
+                if (!cameraOptions?.rotation && !cameraOptions?.quaternion) {
+                    if (Array.isArray(lookAt))
+                        camera.lookAt(lookAt[0], lookAt[1], lookAt[2]);
+                    else if (lookAt instanceof THREE.Vector3)
+                        camera.lookAt(lookAt);
+                    else
+                        camera.lookAt(0, 0, 0);
                 }
-                eventObject = eventObject.parent;
+                // update projection matrix after applyprops
+                camera.updateProjectionMatrix?.();
             }
+            if (!is.instance(camera))
+                camera = prepare(camera, { store: this });
+            stateToUpdate.camera = camera;
         }
-        // if the interaction is captured, make all capturing targets part of the intersects
-        if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
-            for (const capturedData of state.internal.capturedMap.get(event.pointerId).values()) {
-                if (!duplicates.has(makeId(capturedData.intersection))) {
-                    intersections.push(capturedData.intersection);
-                }
+        // Set up scene (one time only!)
+        if (!state.scene) {
+            let scene;
+            if (sceneOptions instanceof THREE.Scene) {
+                scene = prepare(sceneOptions, { store: this });
+            }
+            else {
+                scene = prepare(new THREE.Scene(), { store: this });
+                if (sceneOptions)
+                    applyProps(scene, sceneOptions);
             }
+            stateToUpdate.scene = scene;
         }
-        return intersections;
-    }
-    /** handle intersections by forwarding them to handlers */
-    function handleIntersects(intersections, event, delta, callback) {
-        const rootState = store.get();
-        // if anything has been found, forward it to the event listeners
-        if (intersections.length) {
-            const localState = { stopped: false };
-            for (const hit of intersections) {
-                const state = getLocalState(hit.object).store?.get() || rootState;
-                const { raycaster, pointer, camera, internal } = state;
-                const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
-                const hasPointerCapture = (id) => internal.capturedMap.get(id)?.has(hit.eventObject) ?? false;
-                const setPointerCapture = (id) => {
-                    const captureData = { intersection: hit, target: event.target };
-                    if (internal.capturedMap.has(id)) {
-                        // if the pointerId was previously captured, we add the hit to the event capturedMap
-                        internal.capturedMap.get(id).set(hit.eventObject, captureData);
-                    }
-                    else {
-                        // if the pointerId was not previously captured, we create a Map containing the hitObject, and the hit. hitObject is used for faster access
-                        internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
-                    }
-                    // call the original event now
-                    event.target.setPointerCapture(id);
-                };
-                const releasePointerCapture = (id) => {
-                    const captures = internal.capturedMap.get(id);
-                    if (captures) {
-                        releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
-                    }
-                };
-                // add native event props
-                const extractEventProps = {};
-                // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
-                for (const prop in event) {
-                    const property = event[prop];
-                    // only copy over atomics, leave functions alone as these should be called as event.nativeEvent.fn()
-                    if (typeof property !== 'function') {
-                        extractEventProps[prop] = property;
-                    }
-                }
-                const raycastEvent = {
-                    ...hit,
-                    ...extractEventProps,
-                    pointer,
-                    intersections,
-                    stopped: localState.stopped,
-                    delta,
-                    unprojectedPoint,
-                    ray: raycaster.ray,
-                    camera: camera,
-                    // Hijack stopPropagation, which just sets a flag
-                    stopPropagation() {
-                        // https://github.com/pmndrs/react-three-fiber/issues/596
-                        // Events are not allowed to stop propagation if the pointer has been captured
-                        const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId);
-                        // We only authorize stopPropagation...
-                        if (
-                        // ...if this pointer hasn't been captured
-                        !capturesForPointer ||
-                            // ... or if the hit object is capturing the pointer
-                            capturesForPointer.has(hit.eventObject)) {
-                            raycastEvent.stopped = localState.stopped = true;
-                            // Propagation is stopped, remove all other hover records
-                            // An event handler is only allowed to flush other handlers if it is hovered itself
-                            if (internal.hovered.size &&
-                                Array.from(internal.hovered.values()).find((i) => i.eventObject === hit.eventObject)) {
-                                // Objects cannot flush out higher up objects that have already caught the event
-                                const higher = intersections.slice(0, intersections.indexOf(hit));
-                                cancelPointer([...higher, hit]);
-                            }
-                        }
-                    },
-                    // there should be a distinction between target and currentTarget
-                    target: { hasPointerCapture, setPointerCapture, releasePointerCapture },
-                    currentTarget: { hasPointerCapture, setPointerCapture, releasePointerCapture },
-                    nativeEvent: event,
+        // Set up XR (one time only!)
+        if (!state.xr) {
+            // Handle frame behavior in WebXR
+            const handleXRFrame = (timestamp, frame) => {
+                const state = this.get();
+                if (state.frameloop === 'never')
+                    return;
+                advance(timestamp, true, this, frame);
+            };
+            // Toggle render switching on session
+            const handleSessionChange = () => {
+                const state = this.get();
+                state.gl.xr.enabled = state.gl.xr.isPresenting;
+                state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+                if (!state.gl.xr.isPresenting)
+                    state.invalidate();
+            };
+            // WebXR session manager
+            const xr = {
+                connect: () => {
+                    gl.xr.addEventListener('sessionstart', handleSessionChange);
+                    gl.xr.addEventListener('sessionend', handleSessionChange);
+                },
+                disconnect: () => {
+                    gl.xr.removeEventListener('sessionstart', handleSessionChange);
+                    gl.xr.removeEventListener('sessionend', handleSessionChange);
+                },
+            };
+            // Subscribe to WebXR session events
+            if (gl.xr)
+                xr.connect();
+            stateToUpdate.xr = xr;
+        }
+        // Set shadowmap
+        if (gl.shadowMap) {
+            const oldEnabled = gl.shadowMap.enabled;
+            const oldType = gl.shadowMap.type;
+            gl.shadowMap.enabled = !!shadows;
+            if (typeof shadows === 'boolean') {
+                gl.shadowMap.type = THREE.PCFSoftShadowMap;
+            }
+            else if (typeof shadows === 'string') {
+                const types = {
+                    basic: THREE.BasicShadowMap,
+                    percentage: THREE.PCFShadowMap,
+                    soft: THREE.PCFSoftShadowMap,
+                    variance: THREE.VSMShadowMap,
                 };
-                // call subscribers
-                callback(raycastEvent);
-                // event bubbling may be interupted by stopPropagation
-                if (localState.stopped === true)
-                    break;
+                gl.shadowMap.type = types[shadows] ?? THREE.PCFSoftShadowMap;
             }
+            else if (is.obj(shadows)) {
+                Object.assign(gl.shadowMap, shadows);
+            }
+            if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type)
+                checkNeedsUpdate(gl.shadowMap);
         }
-        return intersections;
+        // Safely set color management if available.
+        // Avoid accessing THREE.ColorManagement to play nice with older versions
+        if (THREE.ColorManagement) {
+            const ColorManagement = THREE.ColorManagement;
+            if ('enabled' in ColorManagement)
+                ColorManagement['enabled'] = !legacy ?? false;
+            else if ('legacyMode' in ColorManagement)
+                ColorManagement['legacyMode'] = legacy ?? true;
+        }
+        // set color space and tonemapping preferences
+        const LinearEncoding = 3000;
+        const sRGBEncoding = 3001;
+        applyProps(gl, {
+            outputEncoding: linear ? LinearEncoding : sRGBEncoding,
+            toneMapping: flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping,
+        });
+        // Update color management state
+        if (state.legacy !== legacy)
+            stateToUpdate.legacy = legacy;
+        if (state.linear !== linear)
+            stateToUpdate.linear = linear;
+        if (state.flat !== flat)
+            stateToUpdate.flat = flat;
+        // Set gl props
+        gl.setClearAlpha(0);
+        gl.setPixelRatio(makeDpr(state.viewport.dpr));
+        gl.setSize(state.size.width, state.size.height);
+        if (is.obj(glOptions) &&
+            !(typeof glOptions === 'function') &&
+            !is.renderer(glOptions) &&
+            !is.equ(glOptions, gl, shallowLoose)) {
+            applyProps(gl, glOptions);
+        }
+        // Store events internally
+        if (events && !state.events.handlers)
+            stateToUpdate.events = events(this);
+        // Check performance
+        if (performance && !is.equ(performance, state.performance, shallowLoose)) {
+            stateToUpdate.performance = { ...state.performance, ...performance };
+        }
+        this.set(stateToUpdate);
+        // Check pixelratio
+        if (dpr && state.viewport.dpr !== makeDpr(dpr))
+            state.setDpr(dpr);
+        // Check size, allow it to take on container bounds initially
+        const size = computeInitialSize(canvasElement, sizeOptions);
+        if (!is.equ(size, state.size, shallowLoose))
+            state.setSize(size.width, size.height, size.top, size.left);
+        // Check frameloop
+        if (state.frameloop !== frameloop)
+            state.setFrameloop(frameloop);
+        if (!this.get('ready'))
+            this.set({ ready: true });
+        this.#invalidate();
     }
-    function cancelPointer(intersections) {
-        const { internal } = store.get();
-        for (const hoveredObj of internal.hovered.values()) {
-            // When no objects were hit or the hovered object wasn't found underneath the cursor
-            // we call onPointerOut and delete the object from the hovered-elements map
-            if (!intersections.length ||
-                !intersections.find((hit) => hit.object === hoveredObj.object &&
-                    hit.index === hoveredObj.index &&
-                    hit.instanceId === hoveredObj.instanceId)) {
-                const eventObject = hoveredObj.eventObject;
-                const instance = getLocalState(eventObject);
-                const handlers = instance?.handlers;
-                internal.hovered.delete(makeId(hoveredObj));
-                if (instance?.eventCount) {
-                    // Clear out intersects, they are outdated by now
-                    const data = { ...hoveredObj, intersections };
-                    handlers?.pointerout?.(data);
-                    handlers?.pointerleave?.(data);
+    destroy(canvas) {
+        this.set((state) => ({ internal: { ...state.internal, active: false } }));
+        setTimeout(() => {
+            const { gl, xr, events } = this.get();
+            if (gl) {
+                if (events.disconnect) {
+                    events.disconnect();
                 }
+                gl.renderLists.dispose();
+                gl.forceContextLoss();
+                if (gl.xr && gl.xr.enabled) {
+                    gl.xr.setAnimationLoop(null);
+                    xr.disconnect();
+                }
+                dispose(this.get());
+                rootStateMap.delete(canvas);
             }
-        }
-    }
-    function pointerMissed(event, objects) {
-        for (let i = 0; i < objects.length; i++) {
-            const instance = getLocalState(objects[i]);
-            instance?.handlers.pointermissed?.(event);
-        }
+        }, 500);
     }
-    function handlePointer(name) {
-        // Deal with cancelation
-        switch (name) {
-            case 'pointerleave':
-            case 'pointercancel':
-                return () => cancelPointer([]);
-            case 'lostpointercapture':
-                return (event) => {
-                    const { internal } = store.get();
-                    if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-                        // If the object event interface had onLostPointerCapture, we'd call it here on every
-                        // object that's getting removed.
-                        internal.capturedMap.delete(event.pointerId);
-                        cancelPointer([]);
-                    }
-                };
-        }
-        // Any other pointer goes here ...
-        return function handleEvent(event) {
-            const { onPointerMissed, internal } = store.get();
-            // prepareRay(event)
-            internal.lastEvent = event;
-            // Get fresh intersects
-            const isPointerMove = name === 'pointermove';
-            const isClickEvent = name === 'click' || name === 'contextmenu' || name === 'dblclick';
-            const filter = isPointerMove ? filterPointerEvents : undefined;
-            // const hits = patchIntersects(intersect(filter), event)
-            const hits = intersect(event, filter);
-            const delta = isClickEvent ? calculateDistance(event) : 0;
-            // Save initial coordinates on pointer-down
-            if (name === 'pointerdown') {
-                internal.initialClick = [event.offsetX, event.offsetY];
-                internal.initialHits = hits.map((hit) => hit.eventObject);
-            }
-            // If a click yields no results, pass it back to the user as a miss
-            // Missed events have to come first in order to establish user-land side-effect clean up
-            if (isClickEvent && !hits.length) {
-                if (delta <= 2) {
-                    pointerMissed(event, internal.interaction);
-                    if (onPointerMissed)
-                        onPointerMissed(event);
-                }
+    #resize() {
+        const state = this.get();
+        let oldSize = state.size;
+        let oldDpr = state.viewport.dpr;
+        let oldCamera = state.camera;
+        const triggers = computed(() => {
+            return {
+                camera: this.select('camera')(),
+                size: this.select('size')(),
+                viewport: this.select('viewport')(),
+                gl: this.get('gl'),
+            };
+        });
+        effect(() => {
+            const { camera, size, viewport, gl } = triggers();
+            // resize camera and renderer on changes to size and dpr
+            if (size !== oldSize || viewport.dpr !== oldDpr) {
+                oldSize = size;
+                oldDpr = viewport.dpr;
+                // update camera
+                updateCamera(camera, size);
+                gl.setPixelRatio(viewport.dpr);
+                gl.setSize(size.width, size.height);
             }
-            // Take care of unhover
-            if (isPointerMove)
-                cancelPointer(hits);
-            function onIntersect(data) {
-                const eventObject = data.eventObject;
-                const instance = getLocalState(eventObject);
-                const handlers = instance?.handlers;
-                // Check presence of handlers
-                if (!instance?.eventCount)
-                    return;
-                if (isPointerMove) {
-                    // Move event ...
-                    if (handlers?.pointerover ||
-                        handlers?.pointerenter ||
-                        handlers?.pointerout ||
-                        handlers?.pointerleave) {
-                        // When enter or out is present take care of hover-state
-                        const id = makeId(data);
-                        const hoveredItem = internal.hovered.get(id);
-                        if (!hoveredItem) {
-                            // If the object wasn't previously hovered, book it and call its handler
-                            internal.hovered.set(id, data);
-                            handlers.pointerover?.(data);
-                            handlers.pointerenter?.(data);
-                        }
-                        else if (hoveredItem.stopped) {
-                            // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
-                            data.stopPropagation();
-                        }
-                    }
-                    // Call mouse move
-                    handlers?.pointermove?.(data);
-                }
-                else {
-                    // All other events ...
-                    const handler = handlers?.[name];
-                    if (handler) {
-                        // Forward all events back to their respective handlers with the exception of click events,
-                        // which must use the initial target
-                        if (!isClickEvent || internal.initialHits.includes(eventObject)) {
-                            // Missed events have to come first
-                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
-                            // Now call the handler
-                            handler(data);
-                        }
-                    }
-                    else {
-                        // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
-                        if (isClickEvent && internal.initialHits.includes(eventObject)) {
-                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
-                        }
-                    }
-                }
+            // update viewport when camera changes
+            if (camera !== oldCamera) {
+                oldCamera = camera;
+                updateCamera(camera, size);
+                this.set((state) => ({
+                    viewport: { ...state.viewport, ...state.viewport.getCurrentViewport(camera) },
+                }));
             }
-            handleIntersects(hits, event, delta, onIntersect);
-        };
+        }, { injector: this.#injector, allowSignalWrites: true });
     }
-    return { handlePointer };
+    #invalidate() {
+        const state = this.select();
+        effect(() => {
+            state().invalidate();
+        }, { injector: this.#injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtStore, decorators: [{
+            type: Injectable
+        }] });
+function computeInitialSize(canvas, defaultSize) {
+    if (defaultSize)
+        return defaultSize;
+    if (canvas instanceof HTMLCanvasElement && canvas.parentElement) {
+        return canvas.parentElement.getBoundingClientRect();
+    }
+    return { width: 0, height: 0, top: 0, left: 0 };
+}
+// Disposes an object and all its properties
+function dispose(obj) {
+    if (obj.dispose && !is.scene(obj))
+        obj.dispose();
+    for (const p in obj) {
+        p.dispose?.();
+        delete obj[p];
+    }
+}
+
+const NGT_COMPOUND_PREFIXES = new InjectionToken('NgtCompoundPrefixes');
+
+const catalogue = {};
+function extend(objects) {
+    Object.assign(catalogue, objects);
 }
+const NGT_CATALOGUE = new InjectionToken('THREE Constructors Catalogue', { factory: () => catalogue });
 
 function attach(object, value, paths = []) {
     const [base, ...remaining] = paths;
@@ -1463,6 +1432,8 @@ function createAttachFunction(cb) {
     return (parent, child, store) => cb({ parent, child, store });
 }
 
+const ROUTED_SCENE = '__ngt_renderer_is_routed_scene__';
+const SPECIAL_INTERNAL_ADD_COMMENT = '__ngt_renderer_add_comment__';
 const SPECIAL_DOM_TAG = {
     NGT_PORTAL: 'ngt-portal',
     NGT_PRIMITIVE: 'ngt-primitive',
@@ -1516,7 +1487,7 @@ function attachThreeChild(parent, child) {
             }
             // attach
             if (cLS.isRaw) {
-                cLS.parent = parent;
+                cLS.parent.set(parent);
                 // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
                 if (child.__ngt_renderer__[11 /* NgtRendererClassId.rawValue */] === undefined)
                     return;
@@ -1534,7 +1505,7 @@ function attachThreeChild(parent, child) {
         added = true;
     }
     pLS.add(child, added ? 'objects' : 'nonObjects');
-    cLS.parent = parent;
+    cLS.parent.set(parent);
     if (cLS.afterAttach)
         cLS.afterAttach.emit({ parent, node: child });
     invalidateInstance(child);
@@ -1544,11 +1515,11 @@ function removeThreeChild(parent, child, dispose) {
     const pLS = getLocalState(parent);
     const cLS = getLocalState(child);
     // clear parent ref
-    cLS.parent = null;
+    cLS.parent?.set(null);
     // remove child from parent
-    if (pLS.objects)
+    if (untracked(pLS.objects))
         pLS.remove(child, 'objects');
-    if (pLS.nonObjects)
+    if (untracked(pLS.nonObjects))
         pLS.remove(child, 'nonObjects');
     if (cLS.attach) {
         detach(parent, child, cLS.attach);
@@ -1559,8 +1530,8 @@ function removeThreeChild(parent, child, dispose) {
     }
     const isPrimitive = cLS.primitive;
     if (!isPrimitive) {
-        removeThreeRecursive(cLS.objects?.value || [], child, !!dispose);
-        removeThreeRecursive(child.childre, child, !!dispose);
+        removeThreeRecursive(cLS.objects ? untracked(cLS.objects) : [], child, !!dispose);
+        removeThreeRecursive(child.children, child, !!dispose);
     }
     // dispose
     if (!isPrimitive && child['dispose'] && !is.scene(child)) {
@@ -1572,64 +1543,164 @@ function removeThreeRecursive(array, parent, dispose) {
     if (array)
         [...array].forEach((child) => removeThreeChild(parent, child, dispose));
 }
-function processThreeEvent(instance, priority, eventName, callback, cdr, targetCdr) {
+function processThreeEvent(instance, priority, eventName, callback, zone, cdr) {
     const lS = getLocalState(instance);
     if (eventName === SPECIAL_EVENTS.BEFORE_RENDER) {
         return lS.store
             .get('internal')
             .subscribe((state) => callback({ state, object: instance }), priority || lS.priority || 0);
     }
-    if (eventName === SPECIAL_EVENTS.AFTER_UPDATE || eventName === SPECIAL_EVENTS.AFTER_ATTACH) {
-        let emitter = lS[eventName];
-        if (!emitter)
-            emitter = lS[eventName] = new EventEmitter();
-        const sub = emitter.subscribe(callback);
-        return sub.unsubscribe.bind(sub);
+    if (eventName === SPECIAL_EVENTS.AFTER_UPDATE || eventName === SPECIAL_EVENTS.AFTER_ATTACH) {
+        let emitter = lS[eventName];
+        if (!emitter)
+            emitter = lS[eventName] = new EventEmitter();
+        const sub = emitter.subscribe(callback);
+        return sub.unsubscribe.bind(sub);
+    }
+    if (!lS.handlers)
+        lS.handlers = {};
+    // try to get the previous handler. compound might have one, the THREE object might also have one with the same name
+    const previousHandler = lS.handlers[eventName];
+    // readjust the callback
+    const updatedCallback = (event) => {
+        if (previousHandler)
+            previousHandler(event);
+        zone.run(() => {
+            callback(event);
+            safeDetectChanges(cdr);
+            // cdr.detectChanges();
+        });
+    };
+    Object.assign(lS.handlers, { [eventName]: eventToHandler(updatedCallback) });
+    // increment the count everytime
+    lS.eventCount += 1;
+    // but only add the instance (target) to the interaction array (so that it is handled by the EventManager with Raycast)
+    // the first time eventCount is incremented
+    if (lS.eventCount === 1 && instance['raycast'])
+        lS.store.get('internal', 'interaction').push(instance);
+    // clean up the event listener by removing the target from the interaction array
+    return () => {
+        const localState = getLocalState(instance);
+        if (localState && localState.eventCount) {
+            const index = localState.store
+                .get('internal', 'interaction')
+                .findIndex((obj) => obj.uuid === instance.uuid);
+            if (index >= 0)
+                localState.store.get('internal', 'interaction').splice(index, 1);
+        }
+    };
+}
+function eventToHandler(callback) {
+    return (event) => {
+        callback(event);
+    };
+}
+function kebabToPascal(str) {
+    // split the string at each hyphen
+    const parts = str.split('-');
+    // map over the parts, capitalizing the first letter of each part
+    const pascalParts = parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1));
+    // join the parts together to create the final PascalCase string
+    return pascalParts.join('');
+}
+
+class NgtCommonDirective {
+    #vcr;
+    #zone;
+    #template;
+    #view;
+    constructor() {
+        this.#vcr = inject(ViewContainerRef);
+        this.#zone = inject(NgZone);
+        this.#template = inject(TemplateRef);
+        this.injected = false;
+        this.shouldCreateView = true;
+        const commentNode = this.#vcr.element.nativeElement;
+        if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
+            commentNode[SPECIAL_INTERNAL_ADD_COMMENT]();
+            delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
+        }
+    }
+    createView() {
+        if (this.shouldCreateView) {
+            if (this.#view && !this.#view.destroyed) {
+                this.#view.destroy();
+            }
+            this.#zone.runOutsideAngular(() => {
+                this.#view = this.#vcr.createEmbeddedView(this.#template);
+                this.#view.detectChanges();
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtCommonDirective, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCommonDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return []; } });
+
+class NgtArgs extends NgtCommonDirective {
+    #injectedArgs = [];
+    set args(args) {
+        if (args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null))
+            return;
+        this.injected = false;
+        this.#injectedArgs = args;
+        this.createView();
+    }
+    get args() {
+        if (this.validate()) {
+            this.injected = true;
+            return this.#injectedArgs;
+        }
+        return null;
+    }
+    validate() {
+        return !this.injected && !!this.#injectedArgs.length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtArgs, decorators: [{
+            type: Directive,
+            args: [{ selector: '[args]', standalone: true }]
+        }], propDecorators: { args: [{
+                type: Input
+            }] } });
+
+class NgtParent extends NgtCommonDirective {
+    #injectedParent = null;
+    set parent(parent) {
+        if (!parent)
+            return;
+        this.injected = false;
+        this.#injectedParent = parent;
+        this.createView();
+    }
+    get parent() {
+        if (this.validate()) {
+            this.injected = true;
+            return this.#injectedParent;
+        }
+        return null;
     }
-    if (!lS.handlers)
-        lS.handlers = {};
-    // try to get the previous handler. compound might have one, the THREE object might also have one with the same name
-    const previousHandler = lS.handlers[eventName];
-    // readjust the callback
-    const updatedCallback = (event) => {
-        if (previousHandler)
-            previousHandler(event);
-        callback(event);
-    };
-    Object.assign(lS.handlers, { [eventName]: eventToHandler(updatedCallback, cdr, targetCdr) });
-    // increment the count everytime
-    lS.eventCount += 1;
-    // but only add the instance (target) to the interaction array (so that it is handled by the EventManager with Raycast)
-    // the first time eventCount is incremented
-    if (lS.eventCount === 1 && instance['raycast'])
-        lS.store.get('addInteraction')(instance);
-    // clean up the event listener by removing the target from the interaction array
-    return () => {
-        const localState = getLocalState(instance);
-        if (localState && localState.eventCount)
-            localState.store.get('removeInteraction')(instance['uuid']);
-    };
-}
-function eventToHandler(callback, cdr, targetCdr) {
-    return (event) => {
-        callback(event);
-        safeDetectChanges(targetCdr);
-        safeDetectChanges(cdr);
-    };
-}
-function kebabToPascal(str) {
-    // split the string at each hyphen
-    const parts = str.split('-');
-    // map over the parts, capitalizing the first letter of each part
-    const pascalParts = parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1));
-    // join the parts together to create the final PascalCase string
-    return pascalParts.join('');
+    validate() {
+        return !this.injected && !!this.#injectedParent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtParent, decorators: [{
+            type: Directive,
+            args: [{ selector: '[parent]', standalone: true }]
+        }], propDecorators: { parent: [{
+                type: Input
+            }] } });
 
 class NgtRendererStore {
+    #comments = [];
     constructor(root) {
         this.root = root;
-        this.comments = [];
     }
     createNode(type, node) {
         const state = [
@@ -1662,12 +1733,12 @@ class NgtRendererStore {
             // we attach an arrow function to the Comment node
             // In our directives, we can call this function to then start tracking the RendererNode
             // this is done to limit the amount of Nodes we need to process for getCreationState
-            rendererNode['__ngt_renderer_add_comment__'] = (node) => {
+            rendererNode[SPECIAL_INTERNAL_ADD_COMMENT] = (node) => {
                 if (node && node.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal') {
                     this.portals.push(node);
                 }
                 else {
-                    this.comments.push(rendererNode);
+                    this.#comments.push(rendererNode);
                 }
             };
             return rendererNode;
@@ -1786,7 +1857,7 @@ class NgtRendererStore {
             value.nativeElement = node;
             return;
         }
-        const parent = getLocalState(node).parent || rS[1 /* NgtRendererClassId.parent */];
+        const parent = getLocalState(node).parent() || rS[1 /* NgtRendererClassId.parent */];
         // [rawValue]
         if (getLocalState(node).isRaw && name === SPECIAL_PROPERTIES.VALUE) {
             rS[11 /* NgtRendererClassId.rawValue */] = value;
@@ -1821,9 +1892,6 @@ class NgtRendererStore {
     get rootScene() {
         return this.root.store.get('scene');
     }
-    get rootCdr() {
-        return this.root.cdr;
-    }
     get portals() {
         return this.root.portals;
     }
@@ -1878,12 +1946,10 @@ class NgtRendererStore {
             rS[6 /* NgtRendererClassId.compoundParent */] = undefined;
             const localState = getLocalState(node);
             if (localState.objects) {
-                localState.objects.value.forEach((obj) => this.destroy(obj, parent));
-                localState.objects.complete();
+                untracked(localState.objects).forEach((obj) => this.destroy(obj, parent));
             }
             if (localState.nonObjects) {
-                localState.nonObjects.value.forEach((obj) => this.destroy(obj, parent));
-                localState.nonObjects.complete();
+                untracked(localState.nonObjects).forEach((obj) => this.destroy(obj, parent));
             }
             if (localState.afterUpdate)
                 localState.afterUpdate.complete();
@@ -1903,10 +1969,10 @@ class NgtRendererStore {
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'comment') {
             rS[14 /* NgtRendererClassId.injectorFactory */] = null;
-            delete node['__ngt_renderer_add_comment__'];
-            const index = this.comments.findIndex((comment) => comment === node);
+            delete node[SPECIAL_INTERNAL_ADD_COMMENT];
+            const index = this.#comments.findIndex((comment) => comment === node);
             if (index > -1) {
-                this.comments.splice(index, 1);
+                this.#comments.splice(index, 1);
             }
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'portal') {
@@ -1945,9 +2011,9 @@ class NgtRendererStore {
     }
     firstNonInjectedDirective(dir) {
         let directive;
-        let i = this.comments.length - 1;
+        let i = this.#comments.length - 1;
         while (i >= 0) {
-            const comment = this.comments[i];
+            const comment = this.#comments[i];
             if (comment.__ngt_renderer__[4 /* NgtRendererClassId.destroyed */]) {
                 i--;
                 continue;
@@ -1995,33 +2061,35 @@ class NgtRendererStore {
 }
 
 class NgtRendererFactory {
-    constructor() {
-        this.delegateRendererFactory = inject(RendererFactory2, { skipSelf: true });
-        this.catalogue = inject(NGT_CATALOGUE);
-        this.rendererMap = new Map();
-        this.routedSet = new Set();
-        // all Renderer instances share the same Store
-        this.rendererStore = new NgtRendererStore({
-            store: inject(NgtStore),
-            cdr: inject(ChangeDetectorRef),
-            portals: [],
-            compoundPrefixes: inject(NGT_COMPOUND_PREFIXES),
-            document: inject(DOCUMENT),
-        });
-    }
+    #delegateRendererFactory = inject(RendererFactory2, { skipSelf: true });
+    #catalogue = inject(NGT_CATALOGUE);
+    #zone = inject(NgZone);
+    #cdr = inject(ChangeDetectorRef);
+    #rendererMap = new Map();
+    #routedSet = new Set();
+    // all Renderer instances share the same Store
+    #rendererStore = new NgtRendererStore({
+        portals: [],
+        store: inject(NgtStore),
+        compoundPrefixes: inject(NGT_COMPOUND_PREFIXES),
+        document: inject(DOCUMENT),
+    });
     createRenderer(hostElement, type) {
-        const delegateRenderer = this.delegateRendererFactory.createRenderer(hostElement, type);
+        const delegateRenderer = this.#delegateRendererFactory.createRenderer(hostElement, type);
         if (!type)
             return delegateRenderer;
-        if (type['type']['isRoutedScene']) {
-            this.routedSet.add(type.id);
+        // if ((type as NgtAnyRecord)['type']['isHtml']) {
+        // return delegateRenderer;
+        // }
+        if (type['type'][ROUTED_SCENE]) {
+            this.#routedSet.add(type.id);
         }
-        let renderer = this.rendererMap.get(type.id);
+        let renderer = this.#rendererMap.get(type.id);
         if (!renderer) {
-            renderer = new NgtRenderer(delegateRenderer, this.rendererStore, this.catalogue, 
+            renderer = new NgtRenderer(delegateRenderer, this.#rendererStore, this.#catalogue, this.#zone, this.#cdr, 
             // setting root scene if there's no routed scene OR this component is the routed Scene
-            !hostElement && (this.routedSet.size === 0 || this.routedSet.has(type.id)));
-            this.rendererMap.set(type.id, renderer);
+            !hostElement && (this.#routedSet.size === 0 || this.#routedSet.has(type.id)));
+            this.#rendererMap.set(type.id, renderer);
         }
         return renderer;
     }
@@ -2035,10 +2103,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
  * Anything abbreviated with rS/RS stands for RendererState
  */
 class NgtRenderer {
-    constructor(delegate, store, catalogue, root = true) {
+    constructor(delegate, store, catalogue, zone, cdr, root = true) {
         this.delegate = delegate;
         this.store = store;
         this.catalogue = catalogue;
+        this.zone = zone;
+        this.cdr = cdr;
         this.root = root;
         this.createText = this.delegate.createText.bind(this.delegate);
         this.destroy = this.delegate.destroy.bind(this.delegate);
@@ -2135,11 +2205,20 @@ class NgtRenderer {
         }
         if (cRS[2 /* NgtRendererClassId.injectedParent */]) {
             if (is.ref(cRS[2 /* NgtRendererClassId.injectedParent */])) {
-                cRS[2 /* NgtRendererClassId.injectedParent */].$.pipe(take(1)).subscribe((val) => {
-                    if (val !== parent) {
-                        this.appendChild(val, newChild);
+                const injector = cRS[14 /* NgtRendererClassId.injectorFactory */]().get(Injector, null);
+                if (!injector) {
+                    console.warn(`[NGT] NgtRenderer is attempting to start an effect for injectedParent but no Injector is found.`);
+                    return;
+                }
+                const watcher = effect(() => {
+                    const injectedParent = cRS[2 /* NgtRendererClassId.injectedParent */].nativeElement;
+                    if (injectedParent && injectedParent !== parent) {
+                        this.appendChild(injectedParent, newChild);
+                        // only run this effect once
+                        // as soon as we re-run appendChild with the injectedParent, we stop the effect
+                        watcher.destroy();
                     }
-                });
+                }, { injector, manualCleanup: true });
                 return;
             }
             else if (parent !== cRS[2 /* NgtRendererClassId.injectedParent */]) {
@@ -2168,7 +2247,7 @@ class NgtRenderer {
         // if both are three instances, straightforward case
         if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
             // if child already attached to a parent, skip
-            if (getLocalState(newChild).parent)
+            if (getLocalState(newChild).parent && untracked(getLocalState(newChild).parent))
                 return;
             // attach THREE child
             attachThreeChild(parent, newChild);
@@ -2208,7 +2287,7 @@ class NgtRenderer {
         }
         const shouldFindGrandparentInstance = 
         // if child is three but haven't been attached to a parent yet
-        (cRS[0 /* NgtRendererClassId.type */] === 'three' && !getLocalState(newChild).parent) ||
+        (cRS[0 /* NgtRendererClassId.type */] === 'three' && !untracked(getLocalState(newChild).parent)) ||
             // or both parent and child are DOM elements
             // or they are compound AND haven't had a THREE instance yet
             ((pRS[0 /* NgtRendererClassId.type */] === 'dom' ||
@@ -2223,7 +2302,7 @@ class NgtRenderer {
         }
     }
     insertBefore(parent, newChild
-    // TODO  we might need these?
+    // TODO: we might need these?
     // refChild: NgtRendererNode
     // isMove?: boolean | undefined
     ) {
@@ -2295,33 +2374,23 @@ class NgtRenderer {
     }
     listen(target, eventName, callback) {
         const rS = target.__ngt_renderer__;
-        const targetCdr = rS?.[14 /* NgtRendererClassId.injectorFactory */]?.().get(ChangeDetectorRef, null);
+        // if the target doesn't have __ngt_renderer__, we delegate
+        // if target is DOM node, then we pass that to delegate Renderer
+        if (!rS || this.store.isDOM(target)) {
+            return this.delegate.listen(target, eventName, callback);
+        }
         if (rS[0 /* NgtRendererClassId.type */] === 'three' ||
             (rS[0 /* NgtRendererClassId.type */] === 'compound' && rS[7 /* NgtRendererClassId.compounded */])) {
             const instance = rS[7 /* NgtRendererClassId.compounded */] || target;
             const priority = getLocalState(target).priority;
-            return processThreeEvent(instance, priority || 0, eventName, callback, this.store.rootCdr, targetCdr);
+            return processThreeEvent(instance, priority || 0, eventName, callback, this.zone, this.cdr);
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'compound' && !rS[7 /* NgtRendererClassId.compounded */]) {
             this.store.queueOperation(target, [
                 'op',
                 () => this.store.queueOperation(target, ['cleanUp', this.listen(target, eventName, callback)]),
             ]);
-        }
-        // setup a new callback with CDR so that it will trigger change detection properly
-        const callbackWithCdr = (event) => {
-            const value = callback(event);
-            safeDetectChanges(targetCdr);
-            safeDetectChanges(this.store.rootCdr);
-            return value;
-        };
-        // if the target doesn't have __ngt_renderer__, we delegate
-        if (!rS) {
-            return this.delegate.listen(target, eventName, callbackWithCdr);
-        }
-        // if target is DOM node, then we pass that to delegate Renderer
-        if (this.store.isDOM(target)) {
-            return this.delegate.listen(target, eventName, callbackWithCdr);
+            return () => { };
         }
         // @ts-expect-error - we know that target is not DOM node
         if (target === this.store.rootScene) {
@@ -2333,7 +2402,7 @@ class NgtRenderer {
             const eventTarget = domTarget === 'window'
                 ? target['ownerDocument']['defaultView']
                 : target['ownerDocument'];
-            return this.delegate.listen(eventTarget, event, callbackWithCdr);
+            return this.delegate.listen(eventTarget, event, callback);
         }
         return () => { };
     }
@@ -2352,105 +2421,18 @@ function provideNgtRenderer({ store, changeDetectorRef, compoundPrefixes = [] })
         { provide: NgtStore, useValue: store },
         { provide: ChangeDetectorRef, useValue: changeDetectorRef },
         { provide: NGT_COMPOUND_PREFIXES, useValue: compoundPrefixes },
+        provideZoneChangeDetection({ runCoalescing: true, eventCoalescing: true }),
     ]);
 }
 
-const DOM_EVENTS = {
-    click: false,
-    contextmenu: false,
-    dblclick: false,
-    wheel: false,
-    pointerdown: true,
-    pointerup: true,
-    pointerleave: true,
-    pointermove: true,
-    pointercancel: true,
-    lostpointercapture: true,
-};
-const supportedEvents = [
-    'click',
-    'contextmenu',
-    'dblclick',
-    'pointerup',
-    'pointerdown',
-    'pointerover',
-    'pointerout',
-    'pointerenter',
-    'pointerleave',
-    'pointermove',
-    'pointermissed',
-    'pointercancel',
-    'wheel',
-];
-function createPointerEvents(store) {
-    const { handlePointer } = createEvents(store);
-    return {
-        priority: 1,
-        enabled: true,
-        compute: (event, root) => {
-            const state = root.get();
-            // https://github.com/pmndrs/react-three-fiber/pull/782
-            // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
-            state.pointer.set((event.offsetX / state.size.width) * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
-            state.raycaster.setFromCamera(state.pointer, state.camera);
-        },
-        connected: undefined,
-        handlers: Object.keys(DOM_EVENTS).reduce((handlers, supportedEventName) => {
-            handlers[supportedEventName] = handlePointer(supportedEventName);
-            return handlers;
-        }, {}),
-        connect: (target) => {
-            const state = store.get();
-            state.events.disconnect?.();
-            state.setEvents({ connected: target });
-            Object.entries(state.events.handlers ?? {}).forEach(([eventName, eventHandler]) => {
-                const passive = DOM_EVENTS[eventName];
-                target.addEventListener(eventName, eventHandler, { passive });
-            });
-        },
-        disconnect: () => {
-            const { events, setEvents } = store.get();
-            if (events.connected) {
-                Object.entries(events.handlers ?? {}).forEach(([eventName, eventHandler]) => {
-                    if (events.connected instanceof HTMLElement) {
-                        events.connected.removeEventListener(eventName, eventHandler);
-                    }
-                });
-                setEvents({ connected: undefined });
-            }
-        },
-    };
-}
-
-class NgtCanvas extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.cdr = inject(ChangeDetectorRef);
-        this.envInjector = inject(EnvironmentInjector);
-        this.host = inject(ElementRef);
-        this.store = inject(NgtStore);
-        this.hbClass = true;
-        this.sceneGraphInputs = {};
-        this.compoundPrefixes = [];
-        this.created = new EventEmitter();
-        this.pointerMissed = new EventEmitter();
-    }
-    initialize() {
-        super.initialize();
-        this.set({
-            shadows: false,
-            linear: false,
-            flat: false,
-            legacy: false,
-            orthographic: false,
-            frameloop: 'always',
-            dpr: [1, 2],
-            events: createPointerEvents,
-        });
-    }
-    get hbPointerEvents() {
-        return this.get('eventSource') !== this.host.nativeElement ? 'none' : 'auto';
-    }
+class NgtCanvas extends NgtSignalStore {
+    #envInjector;
+    #injector;
+    #host;
+    #zone;
+    #cdr;
+    #store;
+    #isReady;
     set linear(linear) {
         this.set({ linear });
     }
@@ -2473,13 +2455,14 @@ class NgtCanvas extends NgtRxStore {
         this.set({ raycaster });
     }
     set shadows(shadows) {
-        this.set({
-            shadows: typeof shadows === 'object' ? shadows : shadows,
-        });
+        this.set({ shadows });
     }
     set camera(camera) {
         this.set({ camera });
     }
+    set scene(scene) {
+        this.set({ scene });
+    }
     set gl(gl) {
         this.set({ gl });
     }
@@ -2495,43 +2478,96 @@ class NgtCanvas extends NgtRxStore {
     set performance(performance) {
         this.set({ performance });
     }
+    #glRef;
+    #glEnvInjector;
+    constructor() {
+        super({
+            shadows: false,
+            linear: false,
+            flat: false,
+            legacy: false,
+            orthographic: false,
+            frameloop: 'always',
+            dpr: [1, 2],
+            events: createPointerEvents,
+        });
+        this.#envInjector = inject(EnvironmentInjector);
+        this.#injector = inject(Injector);
+        this.#host = inject(ElementRef);
+        this.#zone = inject(NgZone);
+        this.#cdr = inject(ChangeDetectorRef);
+        this.#store = inject(NgtStore);
+        this.#isReady = this.#store.select('ready');
+        this.sceneGraphInputs = {};
+        this.compoundPrefixes = [];
+        this.created = new EventEmitter();
+        this.pointerMissed = new EventEmitter();
+        inject(DestroyRef).onDestroy(() => {
+            if (this.#glRef)
+                this.#glRef.destroy();
+            if (this.#glEnvInjector)
+                this.#glEnvInjector.destroy();
+            injectNgtLoader.destroy();
+            this.#store.destroy(this.glCanvas.nativeElement);
+        });
+    }
+    get hbPointerEvents() {
+        return this.select('eventSource')() !== this.#host.nativeElement ? 'none' : 'auto';
+    }
     ngOnChanges(changes) {
-        if (changes['sceneGraphInputs'] && this.glRef) {
-            this.setSceneGraphInputs();
+        if (changes['sceneGraphInputs'] && !changes['sceneGraphInputs'].firstChange && this.#glRef) {
+            this.#setSceneGraphInputs();
         }
     }
     ngOnInit() {
         if (!this.get('eventSource')) {
             // set default event source to the host element
-            this.eventSource = this.host.nativeElement;
+            this.set({ eventSource: this.#host.nativeElement });
         }
         if (this.pointerMissed.observed) {
-            this.store.set({
+            this.#store.set({
                 onPointerMissed: (event) => {
                     this.pointerMissed.emit(event);
-                    safeDetectChanges(this.cdr);
                 },
             });
         }
         // setup NgtStore
-        this.store.init();
+        this.#store.init();
         // set rootStateMap
-        rootStateMap.set(this.glCanvas.nativeElement, this.store);
+        rootStateMap.set(this.glCanvas.nativeElement, this.#store);
         // subscribe to store to listen for ready state
-        this.hold(this.store.select('ready').pipe(filter((ready) => ready)), () => this.storeReady());
+        effect(() => {
+            this.#zone.runOutsideAngular(() => {
+                if (this.#isReady())
+                    this.#storeReady();
+            });
+        }, { injector: this.#injector, allowSignalWrites: true });
     }
-    onResize({ width, height }) {
+    #resizeRef;
+    // NOTE: this is invoked outside of Angular Zone
+    onResize({ width, height, top, left }) {
+        // destroy previous effect
+        if (this.#resizeRef) {
+            this.#resizeRef.destroy();
+        }
         if (width > 0 && height > 0) {
-            if (!this.store.isInit)
-                this.store.init();
-            this.store.configure(this.get(), this.glCanvas.nativeElement);
+            if (!this.#store.isInit)
+                this.#store.init();
+            const inputs = this.select();
+            this.#resizeRef = this.#zone.run(() => effect(() => {
+                const canvasInputs = inputs();
+                this.#zone.runOutsideAngular(() => {
+                    this.#store.configure({ ...canvasInputs, size: { width, height, top, left } }, this.glCanvas.nativeElement);
+                });
+            }, { injector: this.#injector, manualCleanup: true, allowSignalWrites: true }));
         }
     }
-    storeReady() {
+    // NOTE: This is invoked outside of Angular Zone
+    #storeReady() {
         // canvas is ready, let's activate the loop
-        this.store.set((state) => ({ internal: { ...state.internal, active: true } }));
+        this.#store.set((state) => ({ internal: { ...state.internal, active: true } }));
         const inputs = this.get();
-        const state = this.store.get();
+        const state = this.#store.get();
         // connect to event source
         state.events.connect?.(is.ref(inputs.eventSource) ? inputs.eventSource.nativeElement : inputs.eventSource);
         // setup compute function for events
@@ -2547,68 +2583,73 @@ class NgtCanvas extends NgtRxStore {
             });
         }
         // emit created event if observed
-        if (this.created.observed)
-            this.created.emit(this.store.get());
+        if (this.created.observed) {
+            // but go back into zone to run it
+            this.#zone.run(() => {
+                this.created.emit(this.#store.get());
+            });
+        }
         // render
-        if (this.glRef)
-            this.glRef.destroy();
+        if (this.#glRef)
+            this.#glRef.destroy();
         requestAnimationFrame(() => {
-            const { store, cdr: changeDetectorRef, compoundPrefixes } = this;
-            this.glEnvInjector = createEnvironmentInjector([provideNgtRenderer({ store, changeDetectorRef, compoundPrefixes })], this.envInjector);
-            this.glRef = this.glAnchor.createComponent(this.sceneGraph, { environmentInjector: this.glEnvInjector });
-            // detach the Scene graph from Change Detection mechanism
-            // everything from this point forward will trigger CD manually with detectChanges
-            this.glRef.changeDetectorRef.detach();
-            this.setSceneGraphInputs();
-            // here, we override the detectChanges to also call detectChanges on the ComponentRef
-            this.overrideDetectChanges();
-            this.cdr.detectChanges();
+            this.#glEnvInjector = createEnvironmentInjector([
+                provideNgtRenderer({
+                    store: this.#store,
+                    changeDetectorRef: this.#cdr,
+                    compoundPrefixes: this.compoundPrefixes,
+                }),
+            ], this.#envInjector);
+            this.#glRef = this.glAnchor.createComponent(this.sceneGraph, {
+                environmentInjector: this.#glEnvInjector,
+            });
+            this.#setSceneGraphInputs();
+            this.#overrideChangeDetectorRef();
+            safeDetectChanges(this.#cdr);
         });
     }
-    ngOnDestroy() {
-        if (this.glRef)
-            this.glRef.destroy();
-        if (this.glEnvInjector)
-            this.glEnvInjector.destroy();
-        injectNgtLoader.destroy();
-        this.store.destroy(this.glCanvas.nativeElement);
-        super.ngOnDestroy();
-    }
-    overrideDetectChanges() {
-        const originalDetectChanges = this.cdr.detectChanges.bind(this.cdr);
-        this.cdr.detectChanges = () => {
+    #overrideChangeDetectorRef() {
+        const originalDetectChanges = this.#cdr.detectChanges.bind(this.#cdr);
+        this.#cdr.detectChanges = () => {
             originalDetectChanges();
-            safeDetectChanges(this.glRef?.changeDetectorRef);
+            safeDetectChanges(this.#glRef?.changeDetectorRef);
         };
     }
-    setSceneGraphInputs() {
-        for (const key of Object.keys(this.sceneGraphInputs)) {
-            this.glRef.setInput(key, this.sceneGraphInputs[key]);
-        }
-        safeDetectChanges(this.cdr);
+    #setSceneGraphInputs() {
+        this.#zone.run(() => {
+            if (this.#glRef) {
+                for (const [key, value] of Object.entries(this.sceneGraphInputs)) {
+                    this.#glRef.setInput(key, value);
+                }
+                safeDetectChanges(this.#glRef.changeDetectorRef);
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCanvas, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", sceneGraphInputs: "sceneGraphInputs", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hbClass", "style.pointerEvents": "this.hbPointerEvents" } }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: "sceneGraph", sceneGraphInputs: "sceneGraphInputs", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", scene: "scene", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false, emitInitialResult: true })], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
-            <canvas #glCanvas style="display: block;"></canvas>
+            <canvas #glCanvas style="display: block;"> </canvas>
         </div>
-    `, isInline: true, styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
-            args: [{ selector: 'ngt-canvas', standalone: true, template: `
+            args: [{
+                    selector: 'ngt-canvas',
+                    standalone: true,
+                    template: `
         <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
-            <canvas #glCanvas style="display: block;"></canvas>
+            <canvas #glCanvas style="display: block;"> </canvas>
         </div>
-    `, imports: [NgxResize], providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false })], styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"] }]
-        }], propDecorators: { hbClass: [{
-                type: HostBinding,
-                args: ['class.ngt-canvas']
-            }], hbPointerEvents: [{
-                type: HostBinding,
-                args: ['style.pointerEvents']
-            }], sceneGraph: [{
-                type: Input
+    `,
+                    imports: [NgxResize],
+                    providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false, emitInitialResult: true })],
+                    host: { style: 'display: block;position: relative;width: 100%;height: 100%;overflow: hidden;' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { sceneGraph: [{
+                type: Input,
+                args: [{ required: true }]
             }], sceneGraphInputs: [{
                 type: Input
             }], compoundPrefixes: [{
@@ -2631,6 +2672,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], camera: [{
                 type: Input
+            }], scene: [{
+                type: Input
             }], gl: [{
                 type: Input
             }], eventSource: [{
@@ -2653,135 +2696,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 args: ['glCanvas', { static: true, read: ViewContainerRef }]
             }] } });
 
-/**
- * A utility injection fn that can be used in other injection fn to provide the destroy capability.
- */
-function injectNgtDestroy(cb) {
-    try {
-        const cdr = inject(ChangeDetectorRef);
-        const destroy$ = new ReplaySubject();
-        queueMicrotask(() => {
-            cdr.onDestroy(() => {
-                destroy$.next();
-                destroy$.complete();
-                cb?.();
-            });
-        });
-        return { destroy$, cdr };
-    }
-    catch (e) {
-        throw new Error(`[NGT] injectNgtDestroy is being called outside of Constructor Context`);
-    }
-}
-
-function injectBeforeRender(cb, priority = 0) {
-    try {
+function injectBeforeRender(cb, { priority = 0, injector = inject(Injector, { optional: true }), } = {}) {
+    !injector && assertInInjectionContext(injectBeforeRender);
+    return runInInjectionContext(injector, () => {
         const store = inject(NgtStore);
         const sub = store.get('internal').subscribe(cb, priority, store);
-        injectNgtDestroy(() => void sub());
+        inject(DestroyRef).onDestroy(() => void sub());
         return sub;
-    }
-    catch (e) {
-        throw new Error(`[NGT] "injectBeforeRender" is invoked outside of Constructor Context`);
-    }
-}
-
-function injectNgtRef(initialValue = null) {
-    const ref = is.ref(initialValue) ? initialValue : new ElementRef(initialValue);
-    let lastValue = ref.nativeElement;
-    const cdRefs = [];
-    const ref$ = new BehaviorSubject(lastValue);
-    const { destroy$, cdr } = injectNgtDestroy(() => void ref$.complete());
-    cdRefs.push(cdr);
-    const obs$ = ref$.asObservable().pipe(distinctUntilChanged(), takeUntil(destroy$));
-    const subscribe = (callback) => obs$.subscribe((current) => {
-        callback(current, lastValue);
-        lastValue = current;
-    });
-    const useCDR = (cdr) => void cdRefs.push(cdr);
-    const $ = obs$.pipe(filter((value, index) => index > 0 || value != null), takeUntil(destroy$));
-    const children$ = (type = 'objects') => $.pipe(switchMap((instance) => {
-        const localState = getLocalState(instance);
-        if (localState.objects && localState.nonObjects) {
-            return merge(localState.objects, localState.nonObjects).pipe(map(() => {
-                try {
-                    return type === 'both'
-                        ? [...localState.objects.value, ...localState.nonObjects.value]
-                        : localState[type].value;
-                }
-                catch (e) {
-                    console.error(`[NGT] Exception in accessing children of ${instance}`);
-                    return [];
-                }
-            }));
-        }
-        return of([]);
-    }), filter((children, index) => index > 0 || children.length > 0), takeUntil(destroy$));
-    // here, we override nativeElement to  add more functionalities to nativeElement
-    Object.defineProperty(ref, 'nativeElement', {
-        set: (newVal) => {
-            if (ref.nativeElement !== newVal) {
-                ref$.next(newVal);
-                lastValue = ref.nativeElement;
-                ref.nativeElement = newVal;
-                // clone the cdRefs so we can mutate cdRefs in the loop
-                const cds = [...cdRefs];
-                for (let i = 0; i < cds.length; i++) {
-                    const cd = cds[i];
-                    // if a ChangeDetectorRef is destroyed, we stop tracking it and go to the next one
-                    if (cd.destroyed) {
-                        cdRefs.splice(i, 1);
-                        continue;
-                    }
-                    // during creation phase, 'context' on ViewRef will be null
-                    // we check the "context" to avoid running detectChanges during this phase.
-                    // because there's nothing to check
-                    safeDetectChanges(cd);
-                }
-            }
-        },
-        get: () => ref$.value,
     });
-    return Object.assign(ref, { subscribe, $, children$, useCDR });
 }
 
-/**
- * Please use this sparringly and know what you're doing.
- *
- * Create a runInContext function that has access to the NodeInjector as well
- */
-function createRunInContext() {
-    const nodeInjector = inject(Injector);
-    const envInjector = inject(EnvironmentInjector);
-    const originalGet = envInjector.get.bind(envInjector);
-    return (cb) => {
-        let tryFromNodeInjector = false;
-        envInjector.get = (...args) => {
-            try {
-                const originalFlags = args[2];
-                if (!(originalFlags & 8)) {
-                    args[2] |= 8;
-                }
-                const fromEnvInjector = originalGet(...args);
-                if (fromEnvInjector)
-                    return fromEnvInjector;
-                if (fromEnvInjector === null && ((args[1] !== undefined && args[1] === null) || originalFlags & 8))
-                    return fromEnvInjector;
-                args[2] = originalFlags;
-                if (!tryFromNodeInjector) {
-                    tryFromNodeInjector = true;
-                    const fromNodeInjector = nodeInjector.get(...args);
-                    tryFromNodeInjector = false;
-                    return fromNodeInjector;
-                }
-                return null;
-            }
-            catch (e) {
-                return originalGet(...args);
+function injectNgtRef(initial = null, injector = inject(Injector, { optional: true })) {
+    !injector && assertInInjectionContext(injectNgtRef);
+    return runInInjectionContext(injector, () => {
+        const cdr = inject(ChangeDetectorRef);
+        const ref = is.ref(initial) ? initial : new ElementRef(initial);
+        const signalRef = signal(ref.nativeElement);
+        const readonlySignal = signalRef.asReadonly();
+        const cached = new Map();
+        inject(DestroyRef).onDestroy(() => void cached.clear());
+        const children = (type = 'objects') => {
+            if (!cached.has(type)) {
+                cached.set(type, computed(() => {
+                    const instance = readonlySignal();
+                    if (!instance)
+                        return [];
+                    const localState = getLocalState(instance);
+                    if (!localState.objects || !localState.nonObjects)
+                        return [];
+                    if (type === 'objects')
+                        return localState.objects();
+                    if (type === 'nonObjects')
+                        return localState.nonObjects();
+                    return [...localState.objects(), ...localState.nonObjects()];
+                }));
             }
+            return cached.get(type);
         };
-        return envInjector.runInContext(cb);
-    };
+        Object.defineProperty(ref, 'nativeElement', {
+            set: (newElement) => {
+                if (newElement !== untracked(signalRef)) {
+                    signalRef.set(newElement);
+                    safeDetectChanges(cdr);
+                }
+            },
+            get: () => readonlySignal(),
+        });
+        return Object.assign(ref, { children });
+    });
 }
 
 class NgtRepeat extends NgForOf {
@@ -2798,51 +2760,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
-function isPromise(value) {
-    return ((value instanceof Promise || Object.prototype.toString.call(value) === '[object Promise]') &&
-        typeof value['then'] === 'function');
-}
-class NgtPush {
-    constructor() {
-        this.cdr = inject(ChangeDetectorRef);
-        this.parentCdr = inject(ChangeDetectorRef, { skipSelf: true, optional: true });
-        this.envCdr = inject(EnvironmentInjector).get(ChangeDetectorRef, null);
-    }
-    transform(value, defaultValue = null) {
-        if (this.obj === value)
-            return this.latestValue;
-        this.obj = value;
-        this.latestValue = defaultValue;
-        if (this.sub)
-            this.sub.unsubscribe();
-        if (isObservable(this.obj))
-            this.sub = this.obj.subscribe(this.updateValue.bind(this));
-        else if (isPromise(this.obj))
-            this.obj.then(this.updateValue.bind(this));
-        else
-            throw new Error(`[NGT] Invalid value passed to ngtPush pipe`);
-        return this.latestValue;
-    }
-    updateValue(val) {
-        this.latestValue = val;
-        safeDetectChanges(this.cdr);
-        safeDetectChanges(this.parentCdr);
-        safeDetectChanges(this.envCdr);
-    }
-    ngOnDestroy() {
-        if (this.sub)
-            this.sub.unsubscribe();
-        this.latestValue = undefined;
-        this.obj = undefined;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPush, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: NgtPush, isStandalone: true, name: "ngtPush", pure: false }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPush, decorators: [{
-            type: Pipe,
-            args: [{ name: 'ngtPush', pure: false, standalone: true }]
-        }] });
-
 const privateKeys = [
     'get',
     'set',
@@ -2855,20 +2772,23 @@ const privateKeys = [
     'advance',
     'size',
     'viewport',
-    'addInteraction',
-    'removeInteraction',
 ];
 class NgtPortalBeforeRender {
+    #portalStore;
+    #subscription;
     constructor() {
-        this.portalStore = inject(NgtStore);
+        this.#portalStore = inject(NgtStore);
         this.renderPriority = 1;
         this.beforeRender = new EventEmitter();
+        inject(DestroyRef).onDestroy(() => {
+            this.#subscription?.();
+        });
     }
     ngOnInit() {
         let oldClear;
-        this.subscription = this.portalStore.get('internal').subscribe(({ delta, frame }) => {
-            this.beforeRender.emit({ ...this.portalStore.get(), delta, frame });
-            const { gl, scene, camera } = this.portalStore.get();
+        this.#subscription = this.#portalStore.get('internal').subscribe(({ delta, frame }) => {
+            this.beforeRender.emit({ ...this.#portalStore.get(), delta, frame });
+            const { gl, scene, camera } = this.#portalStore.get();
             oldClear = gl.autoClear;
             if (this.renderPriority === 1) {
                 // clear scene and render with default
@@ -2881,10 +2801,7 @@ class NgtPortalBeforeRender {
             gl.render(scene, camera);
             // restore
             gl.autoClear = oldClear;
-        }, this.renderPriority, this.portalStore);
-    }
-    ngOnDestroy() {
-        this.subscription?.();
+        }, this.renderPriority, this.#portalStore);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtPortalBeforeRender, isStandalone: true, selector: "[ngtPortalBeforeRender]", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 }); }
@@ -2892,21 +2809,23 @@ class NgtPortalBeforeRender {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
             type: Directive,
             args: [{ selector: '[ngtPortalBeforeRender]', standalone: true }]
-        }], propDecorators: { renderPriority: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { renderPriority: [{
                 type: Input
             }], parentScene: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], parentCamera: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], beforeRender: [{
                 type: Output
             }] } });
 class NgtPortalContent {
     constructor(vcr, parentVcr) {
         const commentNode = vcr.element.nativeElement;
-        if (commentNode['__ngt_renderer_add_comment__']) {
-            commentNode['__ngt_renderer_add_comment__'](parentVcr.element.nativeElement);
-            delete commentNode['__ngt_renderer_add_comment__'];
+        if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
+            commentNode[SPECIAL_INTERNAL_ADD_COMMENT](parentVcr.element.nativeElement);
+            delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -2918,32 +2837,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
                     type: SkipSelf
                 }] }]; } });
-class NgtPortal extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.autoRender = true;
-        this.autoRenderPriority = 1;
-        this.beforeRender = new EventEmitter();
-        this.parentStore = inject(NgtStore, { skipSelf: true });
-        this.parentScene = this.parentStore.get('scene');
-        this.parentCamera = this.parentStore.get('camera');
-        this.portalStore = inject(NgtStore, { self: true });
-        this.raycaster = new THREE.Raycaster();
-        this.pointer = new THREE.Vector2();
-        this.portalContentRendered = false;
-    }
+class NgtPortal extends NgtSignalStore {
     set container(container) {
         this.set({ container });
     }
     set state(state) {
         this.set({ state });
     }
-    initialize() {
-        super.initialize();
-        this.set({ container: injectNgtRef(prepare(new THREE.Scene())) });
+    #parentStore;
+    #portalStore;
+    #injector;
+    #zone;
+    #raycaster;
+    #pointer;
+    #portalContentView;
+    constructor() {
+        super({ container: injectNgtRef(prepare(new THREE.Scene())) });
+        this.autoRender = true;
+        this.autoRenderPriority = 1;
+        this.beforeRender = new EventEmitter();
+        this.#parentStore = inject(NgtStore, { skipSelf: true });
+        this.parentScene = this.#parentStore.get('scene');
+        this.parentCamera = this.#parentStore.get('camera');
+        this.#portalStore = inject(NgtStore, { self: true });
+        this.#injector = inject(Injector);
+        this.#zone = inject(NgZone);
+        this.#raycaster = new THREE.Raycaster();
+        this.#pointer = new THREE.Vector2();
+        this.portalContentRendered = false;
+        inject(DestroyRef).onDestroy(() => {
+            if (this.#portalContentView && !this.#portalContentView.destroyed) {
+                this.#portalContentView.destroy();
+            }
+        });
     }
     ngOnInit() {
-        const previousState = this.parentStore.get();
+        const previousState = this.#parentStore.get();
         const inputsState = this.get();
         if (!inputsState.state && this.autoRender) {
             inputsState.state = { events: { priority: this.autoRenderPriority + 1 } };
@@ -2953,43 +2882,42 @@ class NgtPortal extends NgtRxStore {
         const container = is.ref(containerState) ? containerState.nativeElement : containerState;
         const localState = getLocalState(container);
         if (!localState.store) {
-            localState.store = this.portalStore;
+            localState.store = this.#portalStore;
         }
-        this.portalStore.set({
+        this.#portalStore.set({
             ...previousState,
             scene: container,
-            raycaster: this.raycaster,
-            pointer: this.pointer,
-            previousStore: this.parentStore,
+            raycaster: this.#raycaster,
+            pointer: this.#pointer,
+            previousStore: this.#parentStore,
             events: { ...previousState.events, ...(events || {}) },
             size: { ...previousState.size, ...(size || {}) },
             ...restInputsState,
-            get: this.portalStore.get.bind(this.portalStore),
-            set: this.portalStore.set.bind(this.portalStore),
-            select: this.portalStore.select.bind(this.portalStore),
-            setEvents: (events) => this.portalStore.set((state) => ({ ...state, events: { ...state.events, ...events } })),
+            get: this.#portalStore.get.bind(this.#portalStore),
+            set: this.#portalStore.set.bind(this.#portalStore),
+            setEvents: (events) => this.#portalStore.set((state) => ({ ...state, events: { ...state.events, ...events } })),
         });
-        this.hold(this.parentStore.select(), (previous) => this.portalStore.set((state) => this.inject(previous, state)));
+        const parentState = this.#parentStore.select();
+        effect(() => {
+            const previous = parentState();
+            this.#zone.runOutsideAngular(() => {
+                this.#portalStore.set((state) => this.#inject(previous, state));
+            });
+        }, { injector: this.#injector, allowSignalWrites: true });
         requestAnimationFrame(() => {
-            this.portalStore.set((injectState) => this.inject(this.parentStore.get(), injectState));
+            this.#portalStore.set((injectState) => this.#inject(this.#parentStore.get(), injectState));
         });
-        this.portalContentView = this.portalContentAnchor.createEmbeddedView(this.portalContentTemplate);
-        this.portalContentView.detectChanges();
+        this.#portalContentView = this.portalContentAnchor.createEmbeddedView(this.portalContentTemplate);
+        safeDetectChanges(this.#portalContentView);
         this.portalContentRendered = true;
     }
     onBeforeRender(portal) {
         this.beforeRender.emit({
-            root: { ...this.parentStore.get(), delta: portal.delta, frame: portal.frame },
+            root: { ...this.#parentStore.get(), delta: portal.delta, frame: portal.frame },
             portal,
         });
     }
-    ngOnDestroy() {
-        if (this.portalContentView && !this.portalContentView.destroyed) {
-            this.portalContentView.destroy();
-        }
-        super.ngOnDestroy();
-    }
-    inject(rootState, injectState) {
+    #inject(rootState, injectState) {
         const intersect = { ...rootState };
         Object.keys(intersect).forEach((key) => {
             if (privateKeys.includes(key) ||
@@ -3009,16 +2937,16 @@ class NgtPortal extends NgtRxStore {
         return {
             ...intersect,
             scene: is.ref(inputs.container) ? inputs.container.nativeElement : inputs.container,
-            raycaster: this.raycaster,
-            pointer: this.pointer,
-            previousStore: this.parentStore,
+            raycaster: this.#raycaster,
+            pointer: this.#pointer,
+            previousStore: this.#parentStore,
             events: { ...rootState.events, ...(injectState?.events || {}), ...events },
             size: { ...rootState.size, ...size },
             viewport: { ...rootState.viewport, ...(viewport || {}) },
             ...restInputsState,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortal, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", state: "state", autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, outputs: { beforeRender: "beforeRender" }, providers: [NgtStore], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container #portalContentAnchor>
             <ng-container
@@ -3052,7 +2980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     imports: [NgIf, NgtPortalBeforeRender],
                     providers: [NgtStore],
                 }]
-        }], propDecorators: { container: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { container: [{
                 type: Input
             }], state: [{
                 type: Input
@@ -3070,15 +2998,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 args: ['portalContentAnchor', { read: ViewContainerRef, static: true }]
             }] } });
 
+var _a;
 class NgtRoutedScene {
-    static { this.isRoutedScene = true; }
-    constructor(router) {
-        const { destroy$, cdr } = injectNgtDestroy();
+    static { _a = ROUTED_SCENE; }
+    static { this[_a] = true; }
+    constructor(router, cdr) {
         router.events
-            .pipe(filter((event) => event instanceof ActivationEnd), takeUntil(destroy$))
+            .pipe(filter((event) => event instanceof ActivationEnd), takeUntilDestroyed())
             .subscribe(() => safeDetectChanges(cdr));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `<router-outlet />`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtRoutedScene, decorators: [{
@@ -3089,11 +3018,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     template: `<router-outlet />`,
                     imports: [RouterOutlet],
                 }]
-        }], ctorParameters: function () { return [{ type: i1.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtParent, NgtPortal, NgtPortalBeforeRender, NgtPortalContent, NgtPush, NgtRepeat, NgtRoutedScene, NgtRxStore, NgtStore, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createAttachFunction, createLoop, createRunInContext, extend, flushGlobalEffects, getLocalState, injectBeforeRender, injectNgtDestroy, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, rootStateMap, safeDetectChanges, startWithUndefined, tapEffect, updateCamera };
+export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtParent, NgtPortal, NgtPortalContent, NgtRepeat, NgtRoutedScene, NgtSignalStore, NgtStore, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createAttachFunction, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, rootStateMap, safeDetectChanges, updateCamera };
 //# sourceMappingURL=angular-three.mjs.map