angular-three 2.0.0-beta.6 → 2.0.0-beta.8

package/fesm2022/angular-three.mjs

@@ -1,82 +1,97 @@
 import * as i0 from '@angular/core';
-import { signal, computed, untracked, Injectable, Optional, Inject, ElementRef, inject, Injector, assertInInjectionContext, runInInjectionContext, ChangeDetectorRef, effect, 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 * as THREE from 'three';
+import { untracked, computed, signal, ElementRef, inject, Injector, assertInInjectionContext, runInInjectionContext, DestroyRef, effect, InjectionToken, ChangeDetectorRef, Optional, SkipSelf, ViewContainerRef, NgZone, TemplateRef, Directive, Input, EventEmitter, getDebugNode, RendererFactory2, Injectable, makeEnvironmentProviders, provideZoneChangeDetection, EnvironmentInjector, createEnvironmentInjector, Component, ChangeDetectionStrategy, Output, ViewChild, ContentChild } from '@angular/core';
 import { DOCUMENT, NgForOf, NgIf } from '@angular/common';
+import { Subject, filter } from 'rxjs';
+import * as THREE from 'three';
+import { provideNgxResizeOptions, NgxResize } from 'ngx-resize';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/router';
 import { ActivationEnd, RouterOutlet } from '@angular/router';
-import { filter } from 'rxjs';
 
-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() }));
-        this.state = this.#state.asReadonly();
-    }
-    select(...keysAndOptions) {
-        if (keysAndOptions.length === 0)
-            return this.state;
-        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(() => keys.reduce((value, key) => value[key], this.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) {
-        const updater = (previous) => {
-            const partial = typeof state === 'function' ? state(previous) : state;
-            Object.keys(partial).forEach((key) => {
-                const partialKey = key;
-                if (partial[partialKey] === undefined && previous[partialKey] != null) {
-                    partial[partialKey] = previous[partialKey];
-                }
-            });
-            return partial;
-        };
-        this.#state.update((previous) => ({ ...previous, ...updater(previous) }));
-        // this.#state.update(previous => ({...previous, ...(typeof state === 'function' ? state(previous) : state)}))
-    }
-    patch(state) {
-        const updater = (previous) => {
-            Object.keys(state).forEach((key) => {
-                const partialKey = key;
-                if (state[partialKey] === undefined && previous[partialKey] != null) {
-                    state[partialKey] = previous[partialKey];
-                }
-            });
-            return state;
-        };
-        this.#state.update((previous) => ({ ...updater(previous), ...previous }));
+const STORE_COMPUTED_KEY = '__ngt_signal_store_computed__';
+const setter = (_source) => (state) => {
+    const updater = (previous) => {
+        const partial = typeof state === 'function' ? state(previous) : state;
+        Object.keys(partial).forEach((key) => {
+            const typedKey = key;
+            if (partial[typedKey] === undefined && previous[typedKey] != null) {
+                partial[typedKey] = previous[typedKey];
+            }
+        });
+        return partial;
+    };
+    untracked(() => {
+        _source.update((previous) => ({ ...previous, ...updater(previous) }));
+    });
+};
+const patcher = (_source) => (state) => {
+    const updater = (previous) => {
+        Object.keys(state).forEach((key) => {
+            const typedKey = key;
+            if (state[typedKey] === undefined && previous[typedKey] != null) {
+                state[typedKey] = previous[typedKey];
+            }
+        });
+        return state;
+    };
+    untracked(() => {
+        _source.update((previous) => ({ ...updater(previous), ...previous }));
+    });
+};
+const getter = (_source) => (...keys) => {
+    const root = untracked(_source);
+    if (keys.length === 0)
+        return root;
+    return keys.reduce((value, key) => value[key], root);
+};
+const selector = (_state, computedCache) => (...keysAndOptions) => {
+    if (keysAndOptions.length === 0)
+        return _state;
+    if (keysAndOptions.length === 1 && typeof keysAndOptions[0] === 'object') {
+        const cachedKey = STORE_COMPUTED_KEY.concat(JSON.stringify(keysAndOptions[0]));
+        if (!computedCache.has(cachedKey)) {
+            computedCache.set(cachedKey, computed(_state, keysAndOptions));
+        }
+        return computedCache.get(cachedKey);
+    }
+    const [keys, options] = parseStoreOptions(keysAndOptions);
+    const joinedKeys = keys.join('-');
+    const cachedKeys = joinedKeys.concat(options ? JSON.stringify(options) : '');
+    if (!computedCache.has(cachedKeys)) {
+        computedCache.set(cachedKeys, computed(() => keys.reduce((value, key) => value[key], _state()), options));
+    }
+    return computedCache.get(cachedKeys);
+};
+function signalStore(initialState = {}, options) {
+    let source;
+    let set;
+    let get;
+    let patch;
+    if (typeof initialState === 'function') {
+        source = signal({}, options);
+        get = getter(source);
+        set = setter(source);
+        patch = patcher(source);
+        source.set(initialState({ set, get, patch }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", 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.3", ngImport: i0, type: NgtSignalStore }); }
+    else {
+        source = signal(initialState, options);
+        get = getter(source);
+        set = setter(source);
+        patch = patcher(source);
+    }
+    const state = source.asReadonly();
+    const computedCache = new Map();
+    const store = { select: selector(state, computedCache), get, set, patch, state };
+    // NOTE: internal _snapshot to debug current state
+    Object.defineProperty(store, '_snapshot', {
+        get: state,
+        configurable: false,
+        enumerable: false,
+    });
+    return store;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtSignalStore, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['INITIAL_STATE']
-                }] }]; } });
-function parseOptions(keysAndOptions) {
+function parseStoreOptions(keysAndOptions) {
     if (typeof keysAndOptions.at(-1) === 'object') {
         return [keysAndOptions.slice(0, -1), keysAndOptions.at(-1)];
     }
@@ -188,27 +203,26 @@ function prepare(object, localState) {
             handlers: {},
             objects,
             nonObjects,
-            nativeProps: new NgtSignalStore({}),
+            nativeProps: signalStore(),
             add: (object, type) => {
-                queueMicrotask(() => {
-                    const current = untracked(instance.__ngt__[type]);
+                untracked(() => {
+                    const current = 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].set(current);
                     }
                     else {
                         instance.__ngt__[type].update((prev) => [...prev, object]);
                     }
-                    notifyAncestors(untracked(instance.__ngt__.parent));
+                    notifyAncestors(instance.__ngt__.parent());
                 });
             },
             remove: (object, type) => {
-                queueMicrotask(() => {
+                untracked(() => {
                     instance.__ngt__[type].update((prev) => prev.filter((o) => o !== object));
-                    notifyAncestors(untracked(instance.__ngt__.parent));
+                    notifyAncestors(instance.__ngt__.parent());
                 });
             },
             ...rest,
@@ -224,7 +238,142 @@ function notifyAncestors(instance) {
         localState.objects.update((prev) => prev);
     if (localState.nonObjects)
         localState.nonObjects.update((prev) => prev);
-    notifyAncestors(untracked(localState.parent));
+    notifyAncestors(localState.parent());
+}
+
+// This function prepares a set of changes to be applied to the instance
+function diffProps(instance, props) {
+    const propsEntries = Object.entries(props);
+    const changes = [];
+    for (const [propKey, propValue] of propsEntries) {
+        let key = propKey;
+        if (is.colorSpaceExist(instance)) {
+            if (propKey === 'encoding') {
+                key = 'colorSpace';
+            }
+            else if (propKey === 'outputEncoding') {
+                key = 'outputColorSpace';
+            }
+        }
+        if (is.equ(propValue, instance[key]))
+            continue;
+        changes.push([propKey, propValue]);
+    }
+    return changes;
+}
+// This function applies a set of changes to the instance
+function applyProps(instance, props) {
+    // if props is empty
+    if (!Object.keys(props).length)
+        return instance;
+    // Filter equals, events and reserved props
+    // 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, value] = changes[i];
+        // Alias (output)encoding => (output)colorSpace (since r152)
+        // https://github.com/pmndrs/react-three-fiber/pull/2829
+        if (is.colorSpaceExist(instance)) {
+            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;
+            }
+        }
+        const currentInstance = instance;
+        const targetProp = currentInstance[key];
+        // 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 (rootState?.gl) {
+                    if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
+                        texture.colorSpace = rootState.gl.outputColorSpace;
+                    else
+                        texture.encoding = rootState.gl.outputEncoding;
+                }
+            }
+        }
+        checkUpdate(currentInstance[key]);
+        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);
+    }
+    if (parent && localState.afterUpdate && localState.afterUpdate.observed && changes.length) {
+        localState.afterUpdate.emit(instance);
+    }
+    return instance;
+}
+
+function assertInjectionContext(fn, injector) {
+    try {
+        if (!injector) {
+            return inject(Injector);
+        }
+        return injector;
+    }
+    catch {
+        !injector && assertInInjectionContext(fn);
+        return null;
+    }
 }
 
 const idCache = {};
@@ -276,97 +425,742 @@ function makeObjectGraph(object) {
     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);
-        }
-    }
-}
-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);
+const shallowLoose = { objects: 'shallow', strict: false };
+const roots = new Map();
+function injectCanvasRootInitializer(injector) {
+    injector = assertInjectionContext(injectCanvasRootInitializer, injector);
+    return runInInjectionContext(injector, () => {
+        const injectedStore = injectNgtStore();
+        const loop = injectNgtLoop();
+        const destroyRef = inject(DestroyRef);
+        return (canvas) => {
+            const exist = roots.has(canvas);
+            let store = roots.get(canvas);
+            if (store) {
+                console.warn('[NGT] Same canvas root is being created twice');
+            }
+            store ||= injectedStore;
+            if (!store) {
+                throw new Error('[NGT] No store initialized');
+            }
+            if (!exist) {
+                roots.set(canvas, store);
+            }
+            let isConfigured = false;
+            let invalidateRef;
+            destroyRef.onDestroy(() => invalidateRef?.destroy());
+            return {
+                isConfigured,
+                destroy: (timeout = 500) => {
+                    const root = roots.get(canvas);
+                    if (root) {
+                        root.set((state) => ({ internal: { ...state.internal, active: false } }));
+                        setTimeout(() => {
+                            try {
+                                const state = root.get();
+                                state.events.disconnect?.();
+                                state.gl?.renderLists?.dispose?.();
+                                state.gl?.forceContextLoss?.();
+                                if (state.gl?.xr)
+                                    state.xr.disconnect();
+                                dispose(state);
+                                roots.delete(canvas);
+                            }
+                            catch (e) {
+                                console.error('[NGT] Unexpected error while destroying Canvas Root', e);
+                            }
+                        }, timeout);
+                    }
+                },
+                configure: (inputs) => {
+                    const { gl: glOptions, size: sizeOptions, camera: cameraOptions, raycaster: raycasterOptions, scene: sceneOptions, events, orthographic, lookAt, shadows, linear, legacy, flat, dpr, frameloop, performance, } = inputs;
+                    const state = store.get();
+                    const stateToUpdate = {};
+                    // setup renderer
+                    let gl = state.gl;
+                    if (!state.gl)
+                        stateToUpdate.gl = gl = makeDefaultRenderer(glOptions, canvas);
+                    // 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);
+                            }
+                            // update projection matrix after applyprops
+                            camera.updateProjectionMatrix?.();
+                        }
+                        if (!is.instance(camera))
+                            camera = prepare(camera, { store });
+                        stateToUpdate.camera = camera;
+                    }
+                    // Set up scene (one time only!)
+                    if (!state.scene) {
+                        let scene;
+                        if (sceneOptions instanceof THREE.Scene) {
+                            scene = prepare(sceneOptions, { store });
+                        }
+                        else {
+                            scene = prepare(new THREE.Scene(), { store });
+                            if (sceneOptions)
+                                applyProps(scene, sceneOptions);
+                        }
+                        stateToUpdate.scene = scene;
+                    }
+                    // Set up XR (one time only!)
+                    if (!state.xr) {
+                        // Handle frame behavior in WebXR
+                        const handleXRFrame = (timestamp, frame) => {
+                            const state = store.get();
+                            if (state.frameloop === 'never')
+                                return;
+                            loop.advance(timestamp, true, store, frame);
+                        };
+                        // Toggle render switching on session
+                        const handleSessionChange = () => {
+                            const state = store.get();
+                            state.gl.xr.enabled = state.gl.xr.isPresenting;
+                            state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+                            if (!state.gl.xr.isPresenting)
+                                loop.invalidate(store);
+                        };
+                        // 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 && typeof gl.xr.addEventListener === 'function')
+                            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,
+                            };
+                            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);
+                    }
+                    // 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(store);
+                    // Check performance
+                    if (performance && !is.equ(performance, state.performance, shallowLoose)) {
+                        stateToUpdate.performance = { ...state.performance, ...performance };
+                    }
+                    store.set(stateToUpdate);
+                    // Check size, allow it to take on container bounds initially
+                    const size = computeInitialSize(canvas, sizeOptions);
+                    if (!is.equ(size, state.size, shallowLoose)) {
+                        state.setSize(size.width, size.height, size.top, size.left);
+                    }
+                    // Check pixelratio
+                    if (dpr && state.viewport.dpr !== makeDpr(dpr))
+                        state.setDpr(dpr);
+                    // Check frameloop
+                    if (state.frameloop !== frameloop)
+                        state.setFrameloop(frameloop);
+                    isConfigured = true;
+                    invalidateRef?.destroy();
+                    invalidateRef = effect(() => void store.state().invalidate(), { manualCleanup: true, injector });
+                },
+            };
+        };
     });
-    if (store.get('previousStore')) {
-        removeInteractivity(store.get('previousStore'), object);
-    }
 }
-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));
+function computeInitialSize(canvas, defaultSize) {
+    if (defaultSize)
+        return defaultSize;
+    if (canvas instanceof HTMLCanvasElement && canvas.parentElement) {
+        return canvas.parentElement.getBoundingClientRect();
     }
-    /** 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];
-        }));
+    return { width: 0, height: 0, top: 0, left: 0 };
+}
+// Disposes an object and all its properties
+function dispose(obj) {
+    if (obj.dispose && obj.type !== 'Scene')
+        obj.dispose();
+    for (const p in obj) {
+        p.dispose?.();
+        delete obj[p];
     }
-    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 createInjectFn(token) {
+    return (injectOptions) => inject(token, injectOptions);
+}
+function createProvideFn(token, factory, deps, extraProviders) {
+    return (value) => {
+        let provider;
+        if (value) {
+            provider = { provide: token, useValue: value };
         }
-        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) : [];
+        else {
+            provider = { provide: token, useFactory: factory, deps: (deps ?? []) };
         }
-        // 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;
+        return extraProviders ? [extraProviders, provider] : provider;
+    };
+}
+function createInjectionToken(factory, options) {
+    const opts = options ?? { isRoot: true };
+    opts.isRoot ??= true;
+    if (opts.isRoot) {
+        if (opts.token) {
+            throw new Error(`\
+createInjectionToken is creating a root InjectionToken but an external token is passed in.
+`);
+        }
+        const token = new InjectionToken(`Token for ${factory.name}`, {
+            factory: () => {
+                if (opts.deps && Array.isArray(opts.deps)) {
+                    return factory(...opts.deps.map((dep) => inject(dep)));
+                }
+                return factory();
+            },
+        });
+        return [
+            createInjectFn(token),
+            createProvideFn(token, factory, opts.deps),
+            token,
+        ];
+    }
+    const token = opts.token || new InjectionToken(`Token for ${factory.name}`);
+    return [
+        createInjectFn(token),
+        createProvideFn(token, factory, opts.deps, opts.extraProviders),
+        token,
+    ];
+}
+
+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)
+    const subscribers = state.internal.subscribers;
+    for (let i = 0; i < subscribers.length; i++) {
+        const subscription = subscribers[i];
+        subscription.callback({ ...subscription.store.get(), 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) {
+        if (runGlobalEffects)
+            flushGlobalEffects('before', timestamp);
+        const state = store?.get();
+        if (!state)
+            for (const root of roots.values())
+                render(timestamp, root);
+        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,
+    };
+}
+const [injectNgtLoop, , NGT_LOOP] = createInjectionToken(() => createLoop(roots));
+
+function safeDetectChanges(...cdrs) {
+    cdrs.forEach((cdr) => {
+        if (!cdr)
+            return;
+        try {
+            // dynamic created component with ViewContainerRef#createComponent does not have Context
+            // but it has _attachedToViewContainer
+            if (cdr['_attachedToViewContainer'] || !!cdr['context']) {
+                cdr.detectChanges();
+            }
+        }
+        catch (e) {
+            cdr.markForCheck();
+        }
+    });
+}
+
+function storeFactory(loop, document, injector, parent) {
+    return runInInjectionContext(injector, () => {
+        const window = document.defaultView;
+        if (!window) {
+            // TODO: revisit this when we need to support multiple platforms
+            throw new Error(`[NGT] Window is not available.`);
+        }
+        const cdr = inject(ChangeDetectorRef);
+        // NOTE: using Subject because we do not care about late-subscribers
+        const pointerMissed$ = new Subject();
+        const store = signalStore(({ get, set }) => {
+            const { invalidate, advance } = loop;
+            const position = new THREE.Vector3();
+            const defaultTarget = new THREE.Vector3();
+            const tempTarget = new THREE.Vector3();
+            function getCurrentViewport(camera = get('camera'), target = defaultTarget, size = 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,
+                    };
+                }
+                else {
+                    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 * (width / height);
+                    return { width: w, height: h, top, left, factor: width / w, distance, aspect };
+                }
+            }
+            let performanceTimeout = undefined;
+            const setPerformanceCurrent = (current) => set((state) => ({ performance: { ...state.performance, current } }));
+            const pointer = new THREE.Vector2();
+            return {
+                pointerMissed$: pointerMissed$.asObservable(),
+                events: { priority: 1, enabled: true, connected: false },
+                invalidate: (frames = 1) => invalidate(store, frames),
+                advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, store),
+                legacy: false,
+                linear: false,
+                flat: false,
+                controls: null,
+                clock: new THREE.Clock(),
+                pointer,
+                frameloop: 'always',
+                performance: {
+                    current: 1,
+                    min: 0.5,
+                    max: 1,
+                    debounce: 200,
+                    regress: () => {
+                        const state = get();
+                        // Clear timeout
+                        if (performanceTimeout)
+                            clearTimeout(performanceTimeout);
+                        // Set lower bound performance
+                        if (state.performance.current !== state.performance.min)
+                            setPerformanceCurrent(state.performance.min);
+                        // Go back to upper bound performance after a while unless something regresses meanwhile
+                        performanceTimeout = setTimeout(() => {
+                            setPerformanceCurrent(get('performance', 'max'));
+                            safeDetectChanges(cdr);
+                        }, state.performance.debounce);
+                    },
+                },
+                size: { width: 0, height: 0, top: 0, left: 0, updateStyle: false },
+                viewport: {
+                    initialDpr: 0,
+                    dpr: 0,
+                    width: 0,
+                    height: 0,
+                    top: 0,
+                    left: 0,
+                    aspect: 0,
+                    distance: 0,
+                    factor: 0,
+                    getCurrentViewport,
+                },
+                setEvents: (events) => set((state) => ({ ...state, events: { ...state.events, ...events } })),
+                setSize: (width, height, top, left) => {
+                    const camera = get('camera');
+                    const size = { width, height, top: top || 0, left: left || 0 };
+                    set((state) => ({
+                        size,
+                        viewport: { ...state.viewport, ...getCurrentViewport(camera, defaultTarget, size) },
+                    }));
+                },
+                setDpr: (dpr) => set((state) => {
+                    const resolved = makeDpr(dpr, window);
+                    return {
+                        viewport: {
+                            ...state.viewport,
+                            dpr: resolved,
+                            initialDpr: state.viewport.initialDpr || resolved,
+                        },
+                    };
+                }),
+                setFrameloop: (frameloop = 'always') => {
+                    const clock = get('clock');
+                    // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+                    clock.stop();
+                    clock.elapsedTime = 0;
+                    if (frameloop !== 'never') {
+                        clock.start();
+                        clock.elapsedTime = 0;
+                    }
+                    set(() => ({ frameloop }));
+                },
+                previousRoot: parent,
+                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 = store) => {
+                        const internal = 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({ callback, priority, store });
+                        // Register subscriber and sort layers from lowest to highest, meaning,
+                        // highest priority renders last (on top of the other frames)
+                        internal.subscribers = internal.subscribers.sort((a, b) => (a.priority || 0) - (b.priority || 0));
+                        return () => {
+                            const internal = 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);
+                            }
+                        };
+                    },
+                },
+            };
+        });
+        // NOTE: assign pointerMissed$ so we can use it in events
+        Object.defineProperty(store, 'pointerMissed$', { get: () => pointerMissed$ });
+        const state = store.get();
+        let oldSize = state.size;
+        let oldDpr = state.viewport.dpr;
+        let oldCamera = state.camera;
+        const _camera = store.select('camera');
+        const _size = store.select('size');
+        const _viewport = store.select('viewport');
+        effect(() => {
+            const [camera, size, viewport, gl] = [_camera(), _size(), _viewport(), store.get('gl')];
+            // Resize camera and renderer on changes to size and pixelratio
+            if (size !== oldSize || viewport.dpr !== oldDpr) {
+                oldSize = size;
+                oldDpr = viewport.dpr;
+                // Update camera & renderer
+                updateCamera(camera, size);
+                gl.setPixelRatio(viewport.dpr);
+                const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
+                gl.setSize(size.width, size.height, updateStyle);
+            }
+            // Update viewport once the camera changes
+            if (camera !== oldCamera) {
+                oldCamera = camera;
+                updateCamera(camera, size);
+                // Update viewport
+                store.set((state) => ({
+                    viewport: { ...state.viewport, ...state.viewport.getCurrentViewport(camera) },
+                }));
+            }
+        });
+        return store;
+    });
+}
+const NGT_STORE = new InjectionToken('NgtStore token');
+const [injectNgtStore, provideNgtStore] = createInjectionToken(storeFactory, {
+    isRoot: false,
+    deps: [NGT_LOOP, DOCUMENT, Injector, [new Optional(), new SkipSelf(), NGT_STORE]],
+    token: NGT_STORE,
+});
+
+function injectBeforeRender(cb, { priority = 0, injector } = {}) {
+    injector = assertInjectionContext(injectBeforeRender, injector);
+    return runInInjectionContext(injector, () => {
+        const store = injectNgtStore();
+        const sub = store.get('internal').subscribe(cb, priority, store);
+        inject(DestroyRef).onDestroy(() => void sub());
+        return sub;
+    });
+}
+
+/**
+ * Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
+ */
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+    const captureData = captures.get(obj);
+    if (captureData) {
+        captures.delete(obj);
+        // If this was the last capturing object for this pointer
+        if (captures.size === 0) {
+            capturedMap.delete(pointerId);
+            captureData.target.releasePointerCapture(pointerId);
+        }
+    }
+}
+function removeInteractivity(store, object) {
+    const { internal } = store.get();
+    // Removes every trace of an object from the 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);
+    });
+}
+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];
+        }));
+    }
+    function intersect(event, filter) {
+        const state = store.get();
+        const duplicates = new Set();
+        const intersections = [];
+        // Allow callers to eliminate event objects
+        const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
+        // Reset all raycaster cameras to undefined
+        for (let i = 0; i < eventsObjects.length; i++) {
+            const state = getLocalState(eventsObjects[i]).store.get();
+            if (state) {
+                state.raycaster.camera = undefined;
+            }
+        }
+        if (!state.previousRoot) {
+            // Make sure root-level pointer and ray are set up
+            state.events.compute?.(event, store, null);
+        }
+        function handleRaycast(obj) {
+            const objLocalState = getLocalState(obj);
+            const objStore = objLocalState.store;
+            const objState = objStore?.get();
+            // Skip event handling when noEvents is set, or when the raycasters camera is null
+            if (!objState || !objState.events.enabled || objState.raycaster.camera === null)
+                return [];
+            // When the camera is undefined we have to call the event layers update function
+            if (objState.raycaster.camera === undefined) {
+                objState.events.compute?.(event, objStore, objState.previousRoot);
+                // 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 = eventsObjects
+            // Intersect objects
+            .flatMap(handleRaycast)
+            // Sort by event priority and distance
+            .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 out duplicates
             .filter((item) => {
             const id = makeId(item);
             if (duplicates.has(id))
@@ -374,10 +1168,11 @@ function createEvents(store) {
             duplicates.add(id);
             return true;
         });
-        // allow custom userland intersect sort order, this likely only makes sense on the root
+        // https://github.com/mrdoob/three.js/issues/16031
+        // Allow custom userland intersect sort order, this likely only makes sense on the root filter
         if (state.events.filter)
             hits = state.events.filter(hits, store);
-        // bubble up the events, find the event source
+        // Bubble up the events, find the event source (eventObject)
         for (const hit of hits) {
             let eventObject = hit.object;
             // bubble event up
@@ -388,20 +1183,19 @@ function createEvents(store) {
                 eventObject = eventObject.parent;
             }
         }
-        // if the interaction is captured, make all capturing targets part of the intersects
+        // If the interaction is captured, make all capturing targets part of the intersect.
         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);
-                }
+            for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
+                if (!duplicates.has(makeId(captureData.intersection)))
+                    intersections.push(captureData.intersection);
             }
         }
         return intersections;
     }
-    /** handle intersections by forwarding them to handlers */
+    /**  Handles 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 anything has been found, forward it to the event listeners
         if (intersections.length) {
             const localState = { stopped: false };
             for (const hit of intersections) {
@@ -412,14 +1206,17 @@ function createEvents(store) {
                 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
+                        // 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
+                        // 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
+                    // Call the original event now
                     event.target.setPointerCapture(id);
                 };
                 const releasePointerCapture = (id) => {
@@ -428,15 +1225,15 @@ function createEvents(store) {
                         releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
                     }
                 };
-                // add native event props
+                // 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') {
+                for (let prop in event) {
+                    let 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,
@@ -447,7 +1244,7 @@ function createEvents(store) {
                     delta,
                     unprojectedPoint,
                     ray: raycaster.ray,
-                    camera: camera,
+                    camera,
                     // Hijack stopPropagation, which just sets a flag
                     stopPropagation() {
                         // https://github.com/pmndrs/react-three-fiber/issues/596
@@ -475,9 +1272,9 @@ function createEvents(store) {
                     currentTarget: { hasPointerCapture, setPointerCapture, releasePointerCapture },
                     nativeEvent: event,
                 };
-                // call subscribers
+                // Call subscribers
                 callback(raycastEvent);
-                // event bubbling may be interupted by stopPropagation
+                // Event bubbling may be interrupted by stopPropagation
                 if (localState.stopped === true)
                     break;
             }
@@ -485,9 +1282,9 @@ function createEvents(store) {
         return intersections;
     }
     function cancelPointer(intersections) {
-        const { internal } = store.get();
+        const internal = store.get('internal');
         for (const hoveredObj of internal.hovered.values()) {
-            // When no objects were hit or the hovered object wasn't found underneath the cursor
+            // When no objects were hit or the 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 &&
@@ -531,14 +1328,14 @@ function createEvents(store) {
         }
         // Any other pointer goes here ...
         return function handleEvent(event) {
-            const { onPointerMissed, internal } = store.get();
+            const pointerMissed$ = store['pointerMissed$'];
+            const internal = store.get('internal');
             // 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
@@ -551,8 +1348,7 @@ function createEvents(store) {
             if (isClickEvent && !hits.length) {
                 if (delta <= 2) {
                     pointerMissed(event, internal.interaction);
-                    if (onPointerMissed)
-                        onPointerMissed(event);
+                    pointerMissed$.next(event);
                 }
             }
             // Take care of unhover
@@ -565,6 +1361,20 @@ function createEvents(store) {
                 // Check presence of handlers
                 if (!instance?.eventCount)
                     return;
+                /*
+        MAYBE TODO, DELETE IF NOT:
+          Check if the object is captured, captured events should not have intersects running in parallel
+          But wouldn't it be better to just replace capturedMap with a single entry?
+          Also, are we OK with straight up making picking up multiple objects impossible?
+
+        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
+        if (pointerId !== undefined) {
+          const capturedMeshSet = internal.capturedMap.get(pointerId)
+          if (capturedMeshSet) {
+            const captured = capturedMeshSet.get(eventObject)
+            if (captured && captured.localState.stopped) return
+          }
+        }*/
                 if (isPointerMove) {
                     // Move event ...
                     if (handlers?.pointerover ||
@@ -659,6 +1469,11 @@ function createPointerEvents(store) {
             handlers[supportedEventName] = handlePointer(supportedEventName);
             return handlers;
         }, {}),
+        update: () => {
+            const { events, internal } = store.get();
+            if (internal.lastEvent?.nativeElement && events.handlers)
+                events.handlers.pointermove(internal.lastEvent.nativeElement);
+        },
         connect: (target) => {
             const state = store.get();
             state.events.disconnect?.();
@@ -682,41 +1497,6 @@ function createPointerEvents(store) {
     };
 }
 
-function assertInjectionContext(fn, injector) {
-    try {
-        if (!injector) {
-            return inject(Injector);
-        }
-        return injector;
-    }
-    catch {
-        !injector && assertInInjectionContext(fn);
-        return null;
-    }
-}
-
-function safeDetectChanges(cdr) {
-    if (!cdr)
-        return;
-    try {
-        // dynamic created component with ViewContainerRef#createComponent does not have Context
-        // but it has _attachedToViewContainer
-        if (cdr['_attachedToViewContainer'] || !!cdr['context']) {
-            cdr.detectChanges();
-        }
-    }
-    catch (e) {
-        cdr.markForCheck();
-    }
-}
-
-function requestAnimationFrameInInjectionContext(cb, injector) {
-    injector = assertInjectionContext(requestAnimationFrameInInjectionContext, injector);
-    return requestAnimationFrame(() => {
-        return runInInjectionContext(injector, cb);
-    });
-}
-
 const cached = new Map();
 function normalizeInputs(input) {
     if (Array.isArray(input))
@@ -752,702 +1532,160 @@ function injectNgtLoader(loaderConstructorFactory, inputs, { extensions, onProgr
     return runInInjectionContext(injector, () => {
         const cdr = inject(ChangeDetectorRef);
         const effector = load(loaderConstructorFactory, inputs, { extensions, onProgress });
-        requestAnimationFrameInInjectionContext(() => {
-            effect(() => {
-                const originalUrls = inputs();
-                Promise.all(effector()).then((results) => {
-                    response.update(() => {
-                        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;
-                        }, {});
-                    });
-                    safeDetectChanges(cdr);
+        effect(() => {
+            const originalUrls = inputs();
+            Promise.all(effector()).then((results) => {
+                response.update(() => {
+                    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;
+                    }, {});
                 });
-            }, { allowSignalWrites: true });
+                safeDetectChanges(cdr);
+            });
         });
         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);
-    }
-}
-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)
-    const subscribers = state.internal.subscribers;
-    for (let i = 0; i < subscribers.length; i++) {
-        const subscription = subscribers[i];
-        subscription.callback({ ...subscription.store.get(), 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);
-        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,
-    };
-}
-
-function diffProps(instance, props) {
-    const propsEntries = Object.entries(props);
-    const changes = [];
-    for (const [propKey, propValue] of propsEntries) {
-        let key = propKey;
-        if (is.colorSpaceExist(instance)) {
-            if (propKey === 'encoding') {
-                key = 'colorSpace';
-            }
-            else if (propKey === 'outputEncoding') {
-                key = 'outputColorSpace';
-            }
-        }
-        if (is.equ(propValue, instance[key]))
-            continue;
-        changes.push([propKey, propValue]);
-    }
-    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++) {
-        const currentInstance = instance;
-        let key = changes[i][0];
-        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;
-            }
-        }
-        const targetProp = currentInstance[key];
-        // 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();
+};
+injectNgtLoader['destroy'] = () => {
+    cached.clear();
+};
+
+const catalogue = {};
+function extend(objects) {
+    Object.assign(catalogue, objects);
+}
+const [injectNgtCatalogue] = createInjectionToken(() => catalogue);
+
+const ROUTED_SCENE = '__ngt_renderer_is_routed_scene__';
+const HTML = '__ngt_renderer_is_html';
+const SPECIAL_INTERNAL_ADD_COMMENT = '__ngt_renderer_add_comment__';
+const SPECIAL_DOM_TAG = {
+    NGT_PORTAL: 'ngt-portal',
+    NGT_PRIMITIVE: 'ngt-primitive',
+    NGT_VALUE: 'ngt-value',
+};
+const SPECIAL_PROPERTIES = {
+    COMPOUND: 'ngtCompound',
+    RENDER_PRIORITY: 'priority',
+    ATTACH: 'attach',
+    VALUE: 'rawValue',
+    REF: 'ref',
+};
+const SPECIAL_EVENTS = {
+    BEFORE_RENDER: 'beforeRender',
+    AFTER_UPDATE: 'afterUpdate',
+    AFTER_ATTACH: 'afterAttach',
+};
+
+class NgtCommonDirective {
+    static { this.processComment = true; }
+    constructor() {
+        this.vcr = inject(ViewContainerRef);
+        this.zone = inject(NgZone);
+        this.template = inject(TemplateRef);
+        this.injected = false;
+        this.shouldCreateView = true;
+        if (NgtCommonDirective.processComment) {
+            const commentNode = this.vcr.element.nativeElement;
+            if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
+                commentNode[SPECIAL_INTERNAL_ADD_COMMENT]();
+                delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
             }
         }
-        // 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 (rootState?.gl) {
-                    if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
-                        texture.colorSpace = rootState.gl.outputColorSpace;
-                    else
-                        texture.encoding = rootState.gl.outputEncoding;
+        inject(DestroyRef).onDestroy(() => {
+            this.view?.destroy();
+        });
+    }
+    createView() {
+        this.zone.runOutsideAngular(() => {
+            if (this.shouldCreateView) {
+                if (this.view && !this.view.destroyed) {
+                    this.view.destroy();
                 }
+                this.view = this.vcr.createEmbeddedView(this.template);
+                safeDetectChanges(this.view);
             }
-        }
-        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);
-    }
-    if (parent && localState.afterUpdate && localState.afterUpdate.observed && changes.length) {
-        localState.afterUpdate.emit(instance);
+        });
     }
-    return instance;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtCommonDirective, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtCommonDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return []; } });
 
-const rootStateMap = new Map();
-const { invalidate, advance } = createLoop(rootStateMap);
-const shallowLoose = { objects: 'shallow', strict: false };
-class NgtStore extends NgtSignalStore {
+class NgtArgs extends NgtCommonDirective {
     constructor() {
         super(...arguments);
-        this.#parentStore = inject(NgtStore, { optional: true, skipSelf: true });
-        this.#window = inject(DOCUMENT).defaultView;
-        this.#injector = inject(Injector);
-        this.isInit = false;
-    }
-    #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);
-                }
-                // update projection matrix after applyprops
-                camera.updateProjectionMatrix?.();
-            }
-            if (!is.instance(camera))
-                camera = prepare(camera, { store: this });
-            stateToUpdate.camera = camera;
-        }
-        // 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;
-        }
-        // 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,
-                };
-                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);
-        }
-        // 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);
+        this.injectedArgs = [];
     }
-    #resize() {
-        const state = this.get();
-        let oldSize = state.size;
-        let oldDpr = state.viewport.dpr;
-        let oldCamera = state.camera;
-        const camera = this.select('camera');
-        const size = this.select('size');
-        const viewport = this.select('viewport');
-        const triggers = computed(() => ({ camera: camera(), size: size(), viewport: 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);
-            }
-            // update viewport when camera changes
-            if (camera !== oldCamera) {
-                oldCamera = camera;
-                updateCamera(camera, size);
-                this.set((state) => ({
-                    viewport: { ...state.viewport, ...state.viewport.getCurrentViewport(camera) },
-                }));
-            }
-        }, { injector: this.#injector, allowSignalWrites: true });
+    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;
     }
-    #invalidate() {
-        effect(() => void this.state().invalidate(), { injector: this.#injector });
+    validate() {
+        return !this.injected && !!this.injectedArgs.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", 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();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtArgs, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[args]', standalone: true }]
+        }], propDecorators: { args: [{
+                type: Input
+            }] } });
+
+class NgtParent extends NgtCommonDirective {
+    constructor() {
+        super(...arguments);
+        this.injectedParent = null;
     }
-    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];
+    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;
     }
+    validate() {
+        return !this.injected && !!this.injectedParent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
 }
-
-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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtParent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[parent]', standalone: true }]
+        }], propDecorators: { parent: [{
+                type: Input
+            }] } });
 
 function attach(object, value, paths = []) {
     const [base, ...remaining] = paths;
@@ -1479,25 +1717,6 @@ 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',
-    NGT_VALUE: 'ngt-value',
-};
-const SPECIAL_PROPERTIES = {
-    COMPOUND: 'ngtCompound',
-    RENDER_PRIORITY: 'priority',
-    ATTACH: 'attach',
-    VALUE: 'rawValue',
-    REF: 'ref',
-};
-const SPECIAL_EVENTS = {
-    BEFORE_RENDER: 'beforeRender',
-    AFTER_UPDATE: 'afterUpdate',
-    AFTER_ATTACH: 'afterAttach',
-};
 function attachThreeChild(parent, child) {
     const pLS = getLocalState(parent);
     const cLS = getLocalState(child);
@@ -1508,7 +1727,7 @@ function attachThreeChild(parent, child) {
     let added = false;
     // assign store on child if not already exist
     // or child store is the parent of parent store
-    if (!cLS.store || cLS.store === pLS.store.get('previousStore')) {
+    if (!cLS.store || cLS.store === pLS.store.get('previousRoot')) {
         cLS.store = pLS.store;
     }
     if (cLS.attach) {
@@ -1534,8 +1753,8 @@ function attachThreeChild(parent, child) {
             }
             // attach
             if (cLS.isRaw) {
-                if (cLS.parent) {
-                    queueMicrotask(() => {
+                if (cLS.parent && cLS.parent() !== parent) {
+                    untracked(() => {
                         cLS.parent.set(parent);
                     });
                 }
@@ -1556,8 +1775,8 @@ function attachThreeChild(parent, child) {
         added = true;
     }
     pLS.add(child, added ? 'objects' : 'nonObjects');
-    if (cLS.parent) {
-        queueMicrotask(() => {
+    if (cLS.parent && cLS.parent() !== parent) {
+        untracked(() => {
             cLS.parent.set(parent);
         });
     }
@@ -1570,7 +1789,7 @@ function removeThreeChild(parent, child, dispose) {
     const pLS = getLocalState(parent);
     const cLS = getLocalState(child);
     // clear parent ref
-    queueMicrotask(() => {
+    untracked(() => {
         cLS.parent?.set(null);
     });
     // remove child from parent
@@ -1600,7 +1819,15 @@ function removeThreeRecursive(array, parent, dispose) {
     if (array)
         [...array].forEach((child) => removeThreeChild(parent, child, dispose));
 }
-function processThreeEvent(instance, priority, eventName, callback, zone, cdr, targetCdr) {
+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('');
+}
+function processThreeEvent(instance, priority, eventName, callback, zone, rootCdr, targetCdr) {
     const lS = getLocalState(instance);
     if (eventName === SPECIAL_EVENTS.BEFORE_RENDER) {
         return lS.store
@@ -1624,8 +1851,7 @@ function processThreeEvent(instance, priority, eventName, callback, zone, cdr, t
             previousHandler(event);
         zone.run(() => {
             callback(event);
-            safeDetectChanges(targetCdr);
-            safeDetectChanges(cdr);
+            safeDetectChanges(targetCdr, rootCdr);
         });
     };
     Object.assign(lS.handlers, { [eventName]: updatedCallback });
@@ -1639,6 +1865,7 @@ function processThreeEvent(instance, priority, eventName, callback, zone, cdr, t
     return () => {
         const localState = getLocalState(instance);
         if (localState && localState.eventCount) {
+            localState.eventCount -= 1;
             const index = localState.store
                 .get('internal', 'interaction')
                 .findIndex((obj) => obj.uuid === instance.uuid);
@@ -1647,117 +1874,12 @@ function processThreeEvent(instance, priority, eventName, callback, zone, cdr, t
         }
     };
 }
-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);
-                safeDetectChanges(this.#view);
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtCommonDirective, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", 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.3", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", 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;
-    }
-    validate() {
-        return !this.injected && !!this.#injectedParent;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtParent, isStandalone: true, selector: "[parent]", inputs: { parent: "parent" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtParent, decorators: [{
-            type: Directive,
-            args: [{ selector: '[parent]', standalone: true }]
-        }], propDecorators: { parent: [{
-                type: Input
-            }] } });
 
+const NGT_COMPOUND_PREFIXES = new InjectionToken('NgtCompoundPrefixes');
 class NgtRendererStore {
-    #comments = [];
     constructor(root) {
         this.root = root;
+        this.comments = [];
     }
     createNode(type, node) {
         const state = [
@@ -1778,10 +1900,10 @@ class NgtRendererStore {
             undefined,
         ];
         const rendererNode = Object.assign(node, { __ngt_renderer__: state });
-        // assign ownerDocument to node so we can use HostListener in Component
+        // NOTE: assign ownerDocument to node so we can use HostListener in Component
         if (!rendererNode['ownerDocument'])
             rendererNode['ownerDocument'] = this.root.document;
-        // assign injectorFactory on non-three type since
+        // NOTE: assign injectorFactory on non-three type since
         // rendererNode is an instance of DOM Node
         if (state[0 /* NgtRendererClassId.type */] !== 'three') {
             state[14 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode).injector;
@@ -1795,7 +1917,7 @@ class NgtRendererStore {
                     this.portals.push(node);
                 }
                 else {
-                    this.#comments.push(rendererNode);
+                    this.comments.push(rendererNode);
                 }
             };
             return rendererNode;
@@ -1819,12 +1941,21 @@ class NgtRendererStore {
         }
     }
     removeChild(node, child) {
-        const index = node.__ngt_renderer__[3 /* NgtRendererClassId.children */].findIndex((c) => child === c);
+        const index = node.__ngt_renderer__?.[3 /* NgtRendererClassId.children */].findIndex((c) => child === c);
         if (index >= 0) {
             node.__ngt_renderer__[3 /* NgtRendererClassId.children */].splice(index, 1);
         }
     }
     setCompound(compound, instance) {
+        const instanceRS = instance.__ngt_renderer__;
+        if (instanceRS && instanceRS[1 /* NgtRendererClassId.parent */]) {
+            const parentRS = instanceRS[1 /* NgtRendererClassId.parent */].__ngt_renderer__;
+            // NOTE: if instance is already compounded by its parent. skip
+            if (parentRS[0 /* NgtRendererClassId.type */] === 'compound' &&
+                parentRS[7 /* NgtRendererClassId.compounded */] === instance) {
+                return;
+            }
+        }
         const rS = compound.__ngt_renderer__;
         rS[7 /* NgtRendererClassId.compounded */] = instance;
         const attributes = Object.keys(rS[9 /* NgtRendererClassId.attributes */]);
@@ -1856,7 +1987,7 @@ class NgtRendererStore {
         const injector = injectorFactory?.();
         if (!injector)
             return;
-        const portalStore = injector.get(NgtStore, null);
+        const portalStore = injector.get(NGT_STORE, null);
         if (!portalStore)
             return;
         const portalContainer = portalStore.get('scene');
@@ -1869,8 +2000,8 @@ class NgtRendererStore {
         if (rS[4 /* NgtRendererClassId.destroyed */])
             return;
         if (name === SPECIAL_PROPERTIES.RENDER_PRIORITY) {
-            // priority needs to be set as an attribute string so that they can be set as early as possible
-            // we convert that string to a number. if it's invalid, 0
+            // NOTE: priority needs to be set as an attribute string so that they can be set as early as possible
+            // we convert that string to a number. if it's invalid, default 0
             let priority = Number(value);
             if (isNaN(priority)) {
                 priority = 0;
@@ -1879,19 +2010,19 @@ class NgtRendererStore {
             getLocalState(node).priority = priority;
         }
         if (name === SPECIAL_PROPERTIES.COMPOUND) {
-            // we set the compound property on instance node now so we know that this instance is being compounded
+            // NOTE: we set the compound property on instance node now so we know that this instance is being compounded
             rS[5 /* NgtRendererClassId.compound */] = [value === '' || value === 'first', {}];
             return;
         }
         if (name === SPECIAL_PROPERTIES.ATTACH) {
-            // handle attach as tring
+            // NOTE: handle attach as tring
             const paths = value.split('.');
             if (paths.length)
                 getLocalState(node).attach = paths;
             return;
         }
         if (name === SPECIAL_PROPERTIES.VALUE) {
-            // coercion
+            // NOTE: coercion
             let maybeCoerced = value;
             if (maybeCoerced === '' || maybeCoerced === 'true' || maybeCoerced === 'false') {
                 maybeCoerced = maybeCoerced === 'true' || maybeCoerced === '';
@@ -1903,7 +2034,7 @@ class NgtRendererStore {
             return;
         }
         applyProps(node, { [name]: value });
-        this.#updateNativeProps(node, name, value);
+        this.updateNativeProps(node, name, value);
     }
     applyProperty(node, name, value) {
         const rS = node.__ngt_renderer__;
@@ -1937,7 +2068,7 @@ class NgtRendererStore {
             value = compound[1 /* NgtCompoundClassId.props */][name];
         }
         applyProps(node, { [name]: value });
-        this.#updateNativeProps(node, name, value);
+        this.updateNativeProps(node, name, value);
     }
     isCompound(name) {
         return this.root.compoundPrefixes.some((prefix) => name.startsWith(prefix));
@@ -1991,14 +2122,14 @@ class NgtRendererStore {
         return null;
     }
     getCreationState() {
-        const injectedArgs = this.#firstNonInjectedDirective(NgtArgs)?.args || [];
-        const injectedParent = this.#firstNonInjectedDirective(NgtParent)?.parent || null;
-        const store = this.#tryGetPortalStore();
+        const injectedArgs = this.firstNonInjectedDirective(NgtArgs)?.args || [];
+        const injectedParent = this.firstNonInjectedDirective(NgtParent)?.parent || null;
+        const store = this.tryGetPortalStore();
         return { injectedArgs, injectedParent, store };
     }
     destroy(node, parent) {
         const rS = node.__ngt_renderer__;
-        if (rS[4 /* NgtRendererClassId.destroyed */])
+        if (!rS || rS[4 /* NgtRendererClassId.destroyed */])
             return;
         if (rS[0 /* NgtRendererClassId.type */] === 'three') {
             rS[5 /* NgtRendererClassId.compound */] = undefined;
@@ -2030,9 +2161,9 @@ class NgtRendererStore {
         if (rS[0 /* NgtRendererClassId.type */] === 'comment') {
             rS[14 /* NgtRendererClassId.injectorFactory */] = null;
             delete node[SPECIAL_INTERNAL_ADD_COMMENT];
-            const index = this.#comments.findIndex((comment) => comment === node);
+            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') {
@@ -2052,13 +2183,17 @@ class NgtRendererStore {
         }
         if (rS[12 /* NgtRendererClassId.ref */]) {
             // nullify ref
-            rS[12 /* NgtRendererClassId.ref */].nativeElement = null;
-            rS[12 /* NgtRendererClassId.ref */] = undefined;
+            // but we do it later so that it doesn't hinder render
+            // TODO: will this cause memory leak?
+            requestAnimationFrame(() => {
+                rS[12 /* NgtRendererClassId.ref */].nativeElement = null;
+                rS[12 /* NgtRendererClassId.ref */] = undefined;
+            });
         }
         // nullify parent
         rS[1 /* NgtRendererClassId.parent */] = null;
         for (const renderChild of rS[3 /* NgtRendererClassId.children */] || []) {
-            if (renderChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' && parent) {
+            if (renderChild.__ngt_renderer__?.[0 /* NgtRendererClassId.type */] === 'three' && parent) {
                 removeThreeChild(parent, renderChild, true);
             }
             this.destroy(renderChild, parent);
@@ -2069,20 +2204,20 @@ class NgtRendererStore {
             this.removeChild(parent, node);
         }
     }
-    #updateNativeProps(node, name, value) {
+    updateNativeProps(node, key, value) {
         const localState = getLocalState(node);
         if (!localState || !localState.nativeProps)
             return;
-        queueMicrotask(() => {
-            localState.nativeProps.set({ [name]: value });
-        });
+        localState.nativeProps.set({ [key]: value });
     }
-    #firstNonInjectedDirective(dir) {
+    firstNonInjectedDirective(dir) {
         let directive;
-        let i = this.#comments.length - 1;
+        const destroyed = [];
+        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 */]) {
+                destroyed.push(i);
                 i--;
                 continue;
             }
@@ -2098,16 +2233,21 @@ class NgtRendererStore {
             }
             i--;
         }
+        destroyed.forEach((index) => {
+            this.comments.splice(index, 1);
+        });
         return directive;
     }
-    #tryGetPortalStore() {
+    tryGetPortalStore() {
         let store;
+        const destroyed = [];
         // we only care about the portal states because NgtStore only differs per Portal
         let i = this.portals.length - 1;
         while (i >= 0) {
             // loop through the portal state backwards to find the closest NgtStore
             const portal = this.portals[i];
             if (portal.__ngt_renderer__[4 /* NgtRendererClassId.destroyed */]) {
+                destroyed.push(i);
                 i--;
                 continue;
             }
@@ -2116,55 +2256,62 @@ class NgtRendererStore {
                 i--;
                 continue;
             }
-            const instance = injector.get(NgtStore, null);
-            // only the instance with previousStore should pass
-            if (instance && instance.get('previousStore')) {
+            const instance = injector.get(NGT_STORE, null);
+            // only the instance with previousRoot should pass
+            if (instance && instance.get('previousRoot')) {
                 store = instance;
                 break;
             }
             i--;
         }
+        destroyed.forEach((index) => {
+            this.portals.splice(index, 1);
+        });
         return store || this.root.store;
     }
 }
 
 class NgtRendererFactory {
-    #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),
-    });
+    constructor() {
+        this.delegateRendererFactory = inject(RendererFactory2, { skipSelf: true });
+        this.zone = inject(NgZone);
+        this.catalogue = injectNgtCatalogue();
+        this.cdr = inject(ChangeDetectorRef);
+        this.rendererMap = new Map();
+        this.routedSet = new Set();
+        // all Renderer instances share the same Store
+        this.rendererStore = new NgtRendererStore({
+            portals: [],
+            store: injectNgtStore(),
+            compoundPrefixes: inject(NGT_COMPOUND_PREFIXES),
+            document: inject(DOCUMENT),
+        });
+    }
     createRenderer(hostElement, type) {
-        const delegateRenderer = this.#delegateRendererFactory.createRenderer(hostElement, type);
+        const delegate = this.delegateRendererFactory.createRenderer(hostElement, type);
         if (!type)
-            return delegateRenderer;
-        // if ((type as NgtAnyRecord)['type']['isHtml']) {
-        // return delegateRenderer;
-        // }
+            return delegate;
+        // TODO: handle html in canvas
+        if (type['type'][HTML]) {
+            this.rendererMap.set(type.id, delegate);
+            return delegate;
+        }
         if (type['type'][ROUTED_SCENE]) {
-            this.#routedSet.add(type.id);
+            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, this.#zone, this.#cdr, 
+            renderer = new NgtRenderer(delegate, 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;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRendererFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtRendererFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRendererFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtRendererFactory, decorators: [{
             type: Injectable
         }] });
 /**
@@ -2265,16 +2412,19 @@ class NgtRenderer {
         return this.store.createNode('comment', this.delegate.createComment(value));
     }
     appendChild(parent, newChild) {
-        // TODO: just ignore text node for now
-        if (newChild instanceof Text)
-            return;
-        const cRS = newChild.__ngt_renderer__;
         const pRS = parent.__ngt_renderer__;
-        if (cRS[0 /* NgtRendererClassId.type */] === 'comment') {
+        const cRS = newChild.__ngt_renderer__;
+        if (pRS[0 /* NgtRendererClassId.type */] === 'dom' &&
+            (newChild instanceof Text || cRS[0 /* NgtRendererClassId.type */] === 'dom')) {
+            this.store.addChild(parent, newChild);
+            this.delegate.appendChild(parent, newChild);
+            return;
+        }
+        if (cRS?.[0 /* NgtRendererClassId.type */] === 'comment') {
             this.store.setParent(newChild, parent);
             return;
         }
-        if (cRS[2 /* NgtRendererClassId.injectedParent */]) {
+        if (cRS?.[2 /* NgtRendererClassId.injectedParent */]) {
             if (is.ref(cRS[2 /* NgtRendererClassId.injectedParent */])) {
                 const injector = cRS[14 /* NgtRendererClassId.injectorFactory */]().get(Injector, null);
                 if (!injector) {
@@ -2300,7 +2450,7 @@ class NgtRenderer {
         this.store.setParent(newChild, parent);
         this.store.addChild(parent, newChild);
         // if new child is a portal
-        if (cRS[0 /* NgtRendererClassId.type */] === 'portal') {
+        if (cRS?.[0 /* NgtRendererClassId.type */] === 'portal') {
             this.store.processPortalContainer(newChild);
             if (cRS[13 /* NgtRendererClassId.portalContainer */]) {
                 this.appendChild(parent, cRS[13 /* NgtRendererClassId.portalContainer */]);
@@ -2316,7 +2466,7 @@ class NgtRenderer {
             return;
         }
         // if both are three instances, straightforward case
-        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
+        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS?.[0 /* NgtRendererClassId.type */] === 'three') {
             // if child already attached to a parent, skip
             if (getLocalState(newChild).parent && untracked(getLocalState(newChild).parent))
                 return;
@@ -2333,7 +2483,7 @@ class NgtRenderer {
         }
         // if only the parent is the THREE instance
         if (pRS[0 /* NgtRendererClassId.type */] === 'three') {
-            for (const renderChild of cRS[3 /* NgtRendererClassId.children */]) {
+            for (const renderChild of cRS?.[3 /* NgtRendererClassId.children */]) {
                 this.appendChild(parent, renderChild);
             }
         }
@@ -2356,27 +2506,15 @@ class NgtRenderer {
                 this.store.setCompound(parent, newChild);
             }
         }
-        const shouldFindGrandparentInstance = 
-        // if child is three but haven't been attached to a parent yet
-        (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' ||
-                (pRS[0 /* NgtRendererClassId.type */] === 'compound' && !pRS[7 /* NgtRendererClassId.compounded */])) &&
-                (cRS[0 /* NgtRendererClassId.type */] === 'dom' ||
-                    (cRS[0 /* NgtRendererClassId.type */] === 'compound' && !cRS[7 /* NgtRendererClassId.compounded */])));
-        if (shouldFindGrandparentInstance) {
+        if (this.shouldFindGrandparentInstance(pRS, cRS, newChild)) {
             // we'll try to get the grandparent instance here so that we can run appendChild with both instances
             const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
             if (closestGrandparentInstance)
                 this.appendChild(closestGrandparentInstance, newChild);
+            return;
         }
     }
-    insertBefore(parent, newChild
-    // TODO: we might need these?
-    // refChild: NgtRendererNode
-    // isMove?: boolean | undefined
-    ) {
+    insertBefore(parent, newChild) {
         if (parent == null || !parent.__ngt_renderer__ || parent === newChild)
             return;
         this.appendChild(parent, newChild);
@@ -2384,6 +2522,18 @@ class NgtRenderer {
     removeChild(parent, oldChild, isHostElement) {
         const pRS = parent.__ngt_renderer__;
         const cRS = oldChild.__ngt_renderer__;
+        if ((!cRS || !pRS) &&
+            parent instanceof Element &&
+            (oldChild instanceof Element || oldChild instanceof Text || oldChild instanceof Comment)) {
+            this.delegate.removeChild(parent, oldChild);
+            this.store.destroy(oldChild, parent);
+            return;
+        }
+        if (cRS[0 /* NgtRendererClassId.type */] === 'dom' && (!pRS || pRS[0 /* NgtRendererClassId.type */] === 'dom')) {
+            this.delegate.removeChild(parent, oldChild);
+            this.store.destroy(oldChild, parent);
+            return;
+        }
         if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
             removeThreeChild(parent, oldChild, true);
             this.store.destroy(oldChild, parent);
@@ -2420,8 +2570,11 @@ class NgtRenderer {
             this.setAttribute(rS[7 /* NgtRendererClassId.compounded */], name, value, namespace);
             return;
         }
-        if (rS[0 /* NgtRendererClassId.type */] === 'three')
+        if (rS[0 /* NgtRendererClassId.type */] === 'three') {
             this.store.applyAttribute(el, name, value);
+            return;
+        }
+        return this.delegate.setAttribute(el, name, value);
     }
     setProperty(el, name, value) {
         const rS = el.__ngt_renderer__;
@@ -2433,15 +2586,16 @@ class NgtRenderer {
                 return;
             }
             if (rS[7 /* NgtRendererClassId.compounded */].__ngt_renderer__[5 /* NgtRendererClassId.compound */]) {
-                Object.assign(rS[7 /* NgtRendererClassId.compounded */].__ngt_renderer__[5 /* NgtRendererClassId.compound */], {
-                    props: Object.assign(rS[7 /* NgtRendererClassId.compounded */].__ngt_renderer__[5 /* NgtRendererClassId.compound */], { [name]: value }),
-                });
+                Object.assign(rS[7 /* NgtRendererClassId.compounded */].__ngt_renderer__[5 /* NgtRendererClassId.compound */][1 /* NgtCompoundClassId.props */], { [name]: value });
             }
             this.setProperty(rS[7 /* NgtRendererClassId.compounded */], name, value);
             return;
         }
-        if (rS[0 /* NgtRendererClassId.type */] === 'three')
+        if (rS[0 /* NgtRendererClassId.type */] === 'three') {
             this.store.applyProperty(el, name, value);
+            return;
+        }
+        return this.delegate.setProperty(el, name, value);
     }
     listen(target, eventName, callback) {
         const rS = target.__ngt_renderer__;
@@ -2479,171 +2633,165 @@ class NgtRenderer {
         }
         return () => { };
     }
+    shouldFindGrandparentInstance(pRS, cRS, child) {
+        const pType = pRS[0 /* NgtRendererClassId.type */];
+        const cType = cRS[0 /* NgtRendererClassId.type */];
+        const isParentCompounded = pRS[7 /* NgtRendererClassId.compounded */];
+        const isChildCompounded = cRS[7 /* NgtRendererClassId.compounded */];
+        // if child is three but haven't been attached to a parent yet
+        const isDanglingThreeChild = cType === 'three' && !untracked(getLocalState(child).parent);
+        // or both parent and child are DOM elements
+        // or they are compound AND haven't had a THREE instance yet
+        const isParentStillDOM = pType === 'dom' || (pType === 'compound' && !isParentCompounded);
+        const isChildStillDOM = cType === 'dom' || (cType === 'compound' && !isChildCompounded);
+        // and the child is a compounded compound
+        const isCompoundChildCompounded = cType === 'compound' && !!isChildCompounded;
+        return (isDanglingThreeChild ||
+            (isParentStillDOM && isChildStillDOM) ||
+            (isParentStillDOM && isCompoundChildCompounded));
+    }
     get data() {
         return this.delegate.data;
     }
 }
-
-function provideNgtRenderer({ store, changeDetectorRef, compoundPrefixes = [] }) {
+function provideNgtRenderer(store, compoundPrefixes, cdr) {
     if (!compoundPrefixes.includes('ngts'))
         compoundPrefixes.push('ngts');
     if (!compoundPrefixes.includes('ngtp'))
         compoundPrefixes.push('ngtp');
     return makeEnvironmentProviders([
         { provide: RendererFactory2, useClass: NgtRendererFactory },
-        { provide: NgtStore, useValue: store },
-        { provide: ChangeDetectorRef, useValue: changeDetectorRef },
         { provide: NGT_COMPOUND_PREFIXES, useValue: compoundPrefixes },
+        { provide: ChangeDetectorRef, useValue: cdr },
+        provideNgtStore(store),
         provideZoneChangeDetection({ runCoalescing: true, eventCoalescing: true }),
     ]);
 }
 
-class NgtCanvas extends NgtSignalStore {
-    #envInjector;
-    #injector;
-    #host;
-    #zone;
-    #cdr;
-    #store;
-    #isReady;
+class NgtCanvas {
+    constructor() {
+        this.store = injectNgtStore();
+        this.initRoot = injectCanvasRootInitializer();
+        this.host = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.injector = inject(Injector);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.zone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.inputs = signalStore({
+            shadows: false,
+            linear: false,
+            flat: false,
+            legacy: false,
+            orthographic: false,
+            frameloop: 'always',
+            dpr: [1, 2],
+            events: createPointerEvents,
+        });
+        this.sceneGraphInputs = {};
+        this.compoundPrefixes = [];
+        this.created = new EventEmitter();
+        this.inputsEventSource = this.inputs.select('eventSource');
+        this.hbPointerEvents = computed(() => (!!this.inputsEventSource() ? 'none' : 'auto'));
+    }
     set linear(linear) {
-        this.set({ linear });
+        this.inputs.set({ linear });
     }
     set legacy(legacy) {
-        this.set({ legacy });
+        this.inputs.set({ legacy });
     }
     set flat(flat) {
-        this.set({ flat });
+        this.inputs.set({ flat });
     }
     set orthographic(orthographic) {
-        this.set({ orthographic });
+        this.inputs.set({ orthographic });
     }
     set frameloop(frameloop) {
-        this.set({ frameloop });
+        this.inputs.set({ frameloop });
     }
     set dpr(dpr) {
-        this.set({ dpr });
+        this.inputs.set({ dpr });
     }
     set raycaster(raycaster) {
-        this.set({ raycaster });
+        this.inputs.set({ raycaster });
     }
     set shadows(shadows) {
-        this.set({ shadows });
+        this.inputs.set({ shadows });
     }
     set camera(camera) {
-        this.set({ camera });
+        this.inputs.set({ camera });
     }
     set scene(scene) {
-        this.set({ scene });
+        this.inputs.set({ scene });
     }
     set gl(gl) {
-        this.set({ gl });
+        this.inputs.set({ gl });
     }
     set eventSource(eventSource) {
-        this.set({ eventSource });
+        this.inputs.set({ eventSource });
     }
     set eventPrefix(eventPrefix) {
-        this.set({ eventPrefix });
+        this.inputs.set({ eventPrefix });
     }
     set lookAt(lookAt) {
-        this.set({ lookAt });
+        this.inputs.set({ lookAt });
     }
     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';
+        this.inputs.set({ performance });
     }
     ngOnChanges(changes) {
-        if (changes['sceneGraphInputs'] && !changes['sceneGraphInputs'].firstChange && 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.set({ eventSource: this.#host.nativeElement });
-        }
-        if (this.pointerMissed.observed) {
-            this.#store.set({
-                onPointerMissed: (event) => {
-                    this.pointerMissed.emit(event);
-                    safeDetectChanges(this.#cdr);
-                },
-            });
-        }
-        // setup NgtStore
-        this.#store.init();
-        // set rootStateMap
-        rootStateMap.set(this.glCanvas.nativeElement, this.#store);
-        // subscribe to store to listen for ready state
-        effect(() => {
-            this.#zone.runOutsideAngular(() => {
-                if (this.#isReady())
-                    this.#storeReady();
-            });
-        }, { injector: this.#injector, allowSignalWrites: true });
-    }
-    #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.#resizeRef = this.#zone.run(() => effect(() => {
-                const canvasInputs = this.state();
-                this.#zone.runOutsideAngular(() => {
-                    this.#store.configure({ ...canvasInputs, size: { width, height, top, left } }, this.glCanvas.nativeElement);
+        // NOTE: we resolve glCanvas at this point, setup the configurator
+        this.configurator = this.initRoot(this.glCanvas.nativeElement);
+        this.destroyRef.onDestroy(() => {
+            this.glEnvironmentInjector?.destroy();
+            this.glRef?.destroy();
+            this.resizeEffectRef?.destroy();
+            injectNgtLoader.destroy();
+            this.configurator?.destroy();
+        });
+    }
+    // NOTE: runs outside of Zone due to emitInZone: false
+    onResize(result) {
+        if (result.width > 0 && result.height > 0) {
+            this.resizeEffectRef?.destroy();
+            const inputs = this.inputs.select();
+            // NOTE: go back into zone so that effect runs
+            // TODO: Double-check when effect is made not depended on zone
+            this.resizeEffectRef = this.zone.run(() => effect(() => {
+                this.zone.runOutsideAngular(() => {
+                    if (!this.configurator)
+                        this.configurator = this.initRoot(this.glCanvas.nativeElement);
+                    this.configurator.configure({ ...inputs(), size: result });
+                    if (this.glRef) {
+                        this.cdr.detectChanges();
+                    }
+                    else {
+                        this.render();
+                    }
                 });
-            }, { injector: this.#injector, manualCleanup: true, allowSignalWrites: true }));
+            }, { manualCleanup: true, injector: this.injector }));
         }
     }
-    // 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 } }));
-        const inputs = this.get();
-        const state = this.#store.get();
+    render() {
+        this.glEnvironmentInjector?.destroy();
+        this.glRef?.destroy();
+        // Flag the canvas active, rendering will now begin
+        this.store.set((state) => ({ internal: { ...state.internal, active: true } }));
+        const inputs = this.inputs.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
+        state.events.connect?.(inputs.eventSource
+            ? is.ref(inputs.eventSource)
+                ? inputs.eventSource.nativeElement
+                : inputs.eventSource
+            : this.host.nativeElement);
+        // setup compute for eventPrefix
         if (inputs.eventPrefix) {
             state.setEvents({
                 compute: (event, store) => {
@@ -2657,70 +2805,65 @@ class NgtCanvas extends NgtSignalStore {
         }
         // emit created event if observed
         if (this.created.observed) {
-            // but go back into zone to run it
-            this.#zone.run(() => {
-                this.created.emit(this.#store.get());
+            // but go back into zone to do so
+            this.zone.run(() => {
+                this.created.emit(this.store.get());
             });
         }
-        // render
-        if (this.#glRef)
-            this.#glRef.destroy();
-        requestAnimationFrame(() => {
-            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);
+        if (!this.store.get('events', 'connected')) {
+            this.store.get('events').connect?.(this.glCanvas.nativeElement);
+        }
+        this.glEnvironmentInjector = createEnvironmentInjector([provideNgtRenderer(this.store, this.compoundPrefixes, this.cdr)], this.environmentInjector);
+        this.glRef = this.viewContainerRef.createComponent(this.sceneGraph, {
+            environmentInjector: this.glEnvironmentInjector,
+            injector: this.injector,
         });
+        this.overrideChangeDetectorRef();
+        this.setSceneGraphInputs();
     }
-    #overrideChangeDetectorRef() {
-        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() {
-        this.#zone.run(() => {
-            if (this.#glRef) {
+    setSceneGraphInputs() {
+        this.zone.run(() => {
+            if (this.glRef) {
                 for (const [key, value] of Object.entries(this.sceneGraphInputs)) {
-                    this.#glRef.setInput(key, value);
+                    this.glRef.setInput(key, value);
                 }
-                safeDetectChanges(this.#glRef.changeDetectorRef);
+                this.glRef.changeDetectorRef.detectChanges();
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", 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>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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" }, host: { properties: { "style.pointerEvents": "hbPointerEvents()" }, styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [provideNgxResizeOptions({ emitInZone: false, emitInitialResult: true }), provideNgtStore()], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+		<div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
+			<canvas #glCanvas style="display: block;"> </canvas>
+		</div>
+	`, 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.3", ngImport: i0, type: NgtCanvas, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-canvas',
                     standalone: true,
                     template: `
-        <div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
-            <canvas #glCanvas style="display: block;"> </canvas>
-        </div>
-    `,
+		<div (ngxResize)="onResize($event)" style="height: 100%; width: 100%;">
+			<canvas #glCanvas style="display: block;"> </canvas>
+		</div>
+	`,
                     imports: [NgxResize],
-                    providers: [NgtStore, provideNgxResizeOptions({ emitInZone: false, emitInitialResult: true })],
-                    host: { style: 'display: block;position: relative;width: 100%;height: 100%;overflow: hidden;' },
+                    providers: [provideNgxResizeOptions({ emitInZone: false, emitInitialResult: true }), provideNgtStore()],
+                    host: {
+                        style: 'display: block;position: relative;width: 100%;height: 100%;overflow: hidden;',
+                        '[style.pointerEvents]': 'hbPointerEvents()',
+                    },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { sceneGraph: [{
+        }], propDecorators: { sceneGraph: [{
                 type: Input,
                 args: [{ required: true }]
             }], sceneGraphInputs: [{
@@ -2759,34 +2902,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
                 type: Input
             }], created: [{
                 type: Output
-            }], pointerMissed: [{
-                type: Output
             }], glCanvas: [{
                 type: ViewChild,
                 args: ['glCanvas', { static: true }]
-            }], glAnchor: [{
-                type: ViewChild,
-                args: ['glCanvas', { static: true, read: ViewContainerRef }]
             }] } });
 
-function injectBeforeRender(cb, { priority = 0, injector } = {}) {
-    injector = assertInjectionContext(injectBeforeRender, injector);
-    return runInInjectionContext(injector, () => {
-        const store = inject(NgtStore);
-        const sub = store.get('internal').subscribe(cb, priority, store);
-        inject(DestroyRef).onDestroy(() => void sub());
-        return sub;
-    });
+class NgtKey extends NgtCommonDirective {
+    constructor() {
+        super(...arguments);
+        this.lastKey = '';
+    }
+    static { this.processComment = false; }
+    validate() {
+        return false;
+    }
+    set key(key) {
+        const normalizedKey = JSON.stringify(key);
+        if (this.lastKey !== normalizedKey) {
+            this.lastKey = normalizedKey;
+            this.createView();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtKey, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtKey, isStandalone: true, selector: "ng-template[key]", inputs: { key: "key" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtKey, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[key]', standalone: true }]
+        }], propDecorators: { key: [{
+                type: Input
+            }] } });
+
+class NgtRepeat extends NgForOf {
+    set ngForRepeat(count) {
+        this.ngForOf = Number.isInteger(count) ? Array.from({ length: count }, (_, i) => i) : [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtRepeat, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngFor][ngForRepeat]', standalone: true }]
+        }], propDecorators: { ngForRepeat: [{
+                type: Input
+            }] } });
 
 function injectNgtRef(initial = null, injector) {
-    injector = assertInjectionContext(injectNgtRef, injector);
+    injector = assertInjectionContext(injectNgtRef);
     const ref = is.ref(initial) ? initial : new ElementRef(initial);
     const signalRef = signal(ref.nativeElement);
     const readonlySignal = signalRef.asReadonly();
     const cached = new Map();
     return runInInjectionContext(injector, () => {
-        const cdr = inject(ChangeDetectorRef);
         inject(DestroyRef).onDestroy(() => void cached.clear());
         const children = (type = 'objects') => {
             if (!cached.has(type)) {
@@ -2806,42 +2973,24 @@ function injectNgtRef(initial = null, injector) {
             }
             return cached.get(type);
         };
-        Object.defineProperty(ref, 'nativeElement', {
-            set: (newElement) => {
-                if (newElement !== untracked(signalRef)) {
-                    try {
-                        signalRef.set(newElement);
-                    }
-                    catch {
-                        requestAnimationFrame(() => {
+        Object.defineProperties(ref, {
+            nativeElement: {
+                set: (newElement) => {
+                    untracked(() => {
+                        if (newElement !== signalRef()) {
                             signalRef.set(newElement);
-                        });
-                    }
-                    requestAnimationFrame(() => void safeDetectChanges(cdr));
-                    // trigger CDR
-                }
+                        }
+                    });
+                },
+                get: readonlySignal,
             },
-            get: () => readonlySignal(),
+            untracked: { get: () => untracked(readonlySignal) },
+            children: { get: () => children },
         });
-        Object.defineProperty(ref, 'untracked', { get: () => untracked(readonlySignal) });
-        return Object.assign(ref, { children });
+        return ref;
     });
 }
 
-class NgtRepeat extends NgForOf {
-    set ngForRepeat(count) {
-        this.ngForOf = Number.isInteger(count) ? Array.from({ length: count }, (_, i) => i) : [];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtRepeat, decorators: [{
-            type: Directive,
-            args: [{ selector: '[ngFor][ngForRepeat]', standalone: true }]
-        }], propDecorators: { ngForRepeat: [{
-                type: Input
-            }] } });
-
 const privateKeys = [
     'get',
     'set',
@@ -2856,38 +3005,38 @@ const privateKeys = [
     'viewport',
 ];
 class NgtPortalBeforeRender {
-    #portalStore;
     constructor() {
-        this.#portalStore = inject(NgtStore);
+        this.portalStore = injectNgtStore();
+        this.injector = inject(Injector);
         this.renderPriority = 1;
         this.beforeRender = new EventEmitter();
-        let oldClear;
-        requestAnimationFrameInInjectionContext(() => {
-            injectBeforeRender(({ 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
-                    gl.autoClear = true;
-                    gl.render(this.parentScene, this.parentCamera);
-                }
-                // disable cleaning
-                gl.autoClear = false;
-                gl.clearDepth();
-                gl.render(scene, camera);
-                // restore
-                gl.autoClear = oldClear;
-            }, { priority: this.renderPriority });
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtPortalBeforeRender, isStandalone: true, selector: "[ngtPortalBeforeRender]", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 }); }
+    ngOnInit() {
+        let oldClear;
+        injectBeforeRender(({ 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
+                gl.autoClear = true;
+                gl.render(this.parentScene, this.parentCamera);
+            }
+            // disable cleaning
+            gl.autoClear = false;
+            gl.clearDepth();
+            gl.render(scene, camera);
+            // restore
+            gl.autoClear = oldClear;
+        }, { priority: this.renderPriority, injector: this.injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtPortalBeforeRender, isStandalone: true, selector: "[ngtPortalBeforeRender]", inputs: { renderPriority: "renderPriority", parentScene: "parentScene", parentCamera: "parentCamera" }, outputs: { beforeRender: "beforeRender" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
             type: Directive,
             args: [{ selector: '[ngtPortalBeforeRender]', standalone: true }]
-        }], ctorParameters: function () { return []; }, propDecorators: { renderPriority: [{
+        }], propDecorators: { renderPriority: [{
                 type: Input
             }], parentScene: [{
                 type: Input,
@@ -2906,96 +3055,90 @@ class NgtPortalContent {
             delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.3", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortalContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtPortalContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[ngtPortalContent]', standalone: true }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
                     type: SkipSelf
                 }] }]; } });
-class NgtPortal extends NgtSignalStore {
+class NgtPortal {
     set container(container) {
-        this.set({ container });
+        this.inputs.set({ container });
     }
     set portalState(state) {
-        this.set({ state });
-    }
-    #parentStore;
-    #portalStore;
-    #injector;
-    #zone;
-    #raycaster;
-    #pointer;
-    #portalContentView;
+        this.inputs.set({ state });
+    }
     constructor() {
-        super({ container: injectNgtRef(prepare(new THREE.Scene())) });
+        this.inputs = signalStore({ 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.parentStore = injectNgtStore({ skipSelf: true });
+        this.parentScene = this.parentStore.get('scene');
+        this.parentCamera = this.parentStore.get('camera');
+        this.portalStore = injectNgtStore({ 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();
+            if (this.portalContentView && !this.portalContentView.destroyed) {
+                this.portalContentView.destroy();
             }
         });
     }
     ngOnInit() {
-        const previousState = this.#parentStore.get();
-        const inputsState = this.get();
+        const previousState = this.parentStore.get();
+        const inputsState = this.inputs.get();
         if (!inputsState.state && this.autoRender) {
             inputsState.state = { events: { priority: this.autoRenderPriority + 1 } };
         }
         const { events, size, ...restInputsState } = inputsState.state || {};
         const containerState = inputsState.container;
-        const container = is.ref(containerState) ? containerState.nativeElement : containerState;
+        let container = is.ref(containerState) ? containerState.nativeElement : containerState;
+        if (!is.instance(container)) {
+            container = prepare(container);
+        }
         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,
+            previousRoot: 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),
-            setEvents: (events) => this.#portalStore.set((state) => ({ ...state, events: { ...state.events, ...events } })),
+            setEvents: (events) => this.portalStore.set((state) => ({ ...state, events: { ...state.events, ...events } })),
         });
-        const parentState = this.#parentStore.select();
+        const parentState = this.parentStore.select();
         effect(() => {
             const previous = parentState();
-            this.#zone.runOutsideAngular(() => {
-                this.#portalStore.set((state) => this.#inject(previous, state));
+            this.zone.runOutsideAngular(() => {
+                this.portalStore.set((state) => this.inject(previous, state));
             });
-        }, { injector: this.#injector, allowSignalWrites: true });
+        }, { injector: this.injector });
         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);
-        safeDetectChanges(this.#portalContentView);
+        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,
         });
     }
-    #inject(rootState, injectState) {
+    inject(rootState, injectState) {
         const intersect = { ...rootState };
         Object.keys(intersect).forEach((key) => {
             if (privateKeys.includes(key) ||
@@ -3003,7 +3146,7 @@ class NgtPortal extends NgtSignalStore {
                 delete intersect[key];
             }
         });
-        const inputs = this.get();
+        const inputs = this.inputs.get();
         const { size, events, ...restInputsState } = inputs.state || {};
         let viewport = undefined;
         if (injectState && size) {
@@ -3015,53 +3158,54 @@ class NgtPortal extends NgtSignalStore {
         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,
+            previousRoot: 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.3", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", portalState: "portalState", 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
-                *ngIf="autoRender && portalContentRendered"
-                ngtPortalBeforeRender
-                [renderPriority]="autoRenderPriority"
-                [parentScene]="parentScene"
-                [parentCamera]="parentCamera"
-                (beforeRender)="onBeforeRender($event)"
-            />
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtPortalBeforeRender, selector: "[ngtPortalBeforeRender]", inputs: ["renderPriority", "parentScene", "parentCamera"], outputs: ["beforeRender"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: "container", portalState: ["state", "portalState"], autoRender: "autoRender", autoRenderPriority: "autoRenderPriority" }, outputs: { beforeRender: "beforeRender" }, providers: [{ provide: NGT_STORE, useFactory: () => signalStore({}) }], 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 }], ngImport: i0, template: `
+		<ng-container #portalContentAnchor>
+			<ng-container
+				*ngIf="autoRender && portalContentRendered"
+				ngtPortalBeforeRender
+				[renderPriority]="autoRenderPriority"
+				[parentScene]="parentScene"
+				[parentCamera]="parentCamera"
+				(beforeRender)="onBeforeRender($event)"
+			/>
+		</ng-container>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtPortalBeforeRender, selector: "[ngtPortalBeforeRender]", inputs: ["renderPriority", "parentScene", "parentCamera"], outputs: ["beforeRender"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgtPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtPortal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal',
                     standalone: true,
                     template: `
-        <ng-container #portalContentAnchor>
-            <ng-container
-                *ngIf="autoRender && portalContentRendered"
-                ngtPortalBeforeRender
-                [renderPriority]="autoRenderPriority"
-                [parentScene]="parentScene"
-                [parentCamera]="parentCamera"
-                (beforeRender)="onBeforeRender($event)"
-            />
-        </ng-container>
-    `,
+		<ng-container #portalContentAnchor>
+			<ng-container
+				*ngIf="autoRender && portalContentRendered"
+				ngtPortalBeforeRender
+				[renderPriority]="autoRenderPriority"
+				[parentScene]="parentScene"
+				[parentCamera]="parentCamera"
+				(beforeRender)="onBeforeRender($event)"
+			/>
+		</ng-container>
+	`,
                     imports: [NgIf, NgtPortalBeforeRender],
-                    providers: [NgtStore],
+                    providers: [{ provide: NGT_STORE, useFactory: () => signalStore({}) }],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { container: [{
                 type: Input
             }], portalState: [{
-                type: Input
+                type: Input,
+                args: ['state']
             }], autoRender: [{
                 type: Input
             }], autoRenderPriority: [{
@@ -3085,10 +3229,10 @@ class NgtRoutedScene {
             .pipe(filter((event) => event instanceof ActivationEnd), takeUntilDestroyed())
             .subscribe(() => safeDetectChanges(cdr));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", 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.3", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", 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.1.7", 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.3", ngImport: i0, type: NgtRoutedScene, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -3102,5 +3246,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtParent, NgtPortal, NgtPortalContent, NgtRepeat, NgtRoutedScene, NgtSignalStore, NgtStore, addAfterEffect, addEffect, addTail, applyProps, assertInjectionContext, checkNeedsUpdate, checkUpdate, createAttachFunction, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, requestAnimationFrameInInjectionContext, rootStateMap, safeDetectChanges, updateCamera };
+export { HTML, NGT_STORE, NgtArgs, NgtCanvas, NgtKey, NgtParent, NgtPortal, NgtPortalContent, NgtRepeat, NgtRoutedScene, addAfterEffect, addEffect, addTail, applyProps, assertInjectionContext, checkNeedsUpdate, checkUpdate, createAttachFunction, createInjectionToken, diffProps, extend, getLocalState, injectBeforeRender, injectNgtLoader, injectNgtRef, injectNgtStore, invalidateInstance, is, makeDefaultCamera, makeDefaultRenderer, makeDpr, makeId, makeObjectGraph, prepare, provideNgtRenderer, provideNgtStore, safeDetectChanges, signalStore, updateCamera };
 //# sourceMappingURL=angular-three.mjs.map