angular-three 0.0.7 → 1.0.0-beta.0

package/fesm2015/angular-three.mjs

@@ -1,1160 +1,561 @@
-import { DOCUMENT, NgIf, NgTemplateOutlet, AsyncPipe, NgForOf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, NgZone, EventEmitter, Directive, Input, Output, ElementRef, Component, TemplateRef, ChangeDetectionStrategy, HostBinding, ViewChild, ContentChild, ViewContainerRef, Injector, Optional, Self, Inject, Pipe } from '@angular/core';
-import * as THREE from 'three';
-import { BehaviorSubject, filter, noop, tap, isObservable, combineLatest, Observable, Subject, pipe, debounceTime, takeUntil, fromEvent, share, ReplaySubject, from, retry, catchError, of, forkJoin, map, merge } from 'rxjs';
-import { ComponentStore } from '@ngrx/component-store';
+import { ElementRef, Injectable, inject, InjectionToken, ViewContainerRef, TemplateRef, Directive, Input, EventEmitter, getDebugNode, ChangeDetectorRef, RendererFactory2, Component, Output, EnvironmentInjector, createEnvironmentInjector, HostBinding, ViewChild } from '@angular/core';
+import { injectNgxResize, provideNgxResizeOptions } from 'ngx-resize';
+import { BehaviorSubject, startWith, tap, isObservable, of, map, from, retry, catchError, share, ReplaySubject, switchMap, forkJoin, take, filter } from 'rxjs';
 import { __rest } from 'tslib';
+import { DOCUMENT, NgForOf } from '@angular/common';
+import { RxState, selectSlice } from '@rx-angular/state';
+import * as THREE from 'three';
+import { ɵDomRendererFactory2 } from '@angular/platform-browser';
 
-function getInstanceLocalState(obj) {
-    if (!obj)
-        return undefined;
-    return obj['__ngt__'];
+function createSubs(callback, subs) {
+    const sub = { callback };
+    subs.add(sub);
+    return () => void subs.delete(sub);
 }
-
-const idCache = {};
-function makeId(event) {
-    if (event) {
-        return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
-    }
-    const newId = THREE.MathUtils.generateUUID();
-    // ensure not already used
-    if (!idCache[newId]) {
-        idCache[newId] = true;
-        return newId;
+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);
     }
-    return makeId();
 }
-function makeDpr(dpr, window) {
-    const target = (window === null || window === void 0 ? void 0 : window.devicePixelRatio) || 1;
-    return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
+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 make(type, input) {
-    if (!input)
-        return new type();
-    if (input instanceof type) {
-        return input;
+function render(timestamp, store, frame) {
+    const state = store.get();
+    // Run local effects
+    let delta = state.clock.getDelta();
+    // In frameloop='never' mode, clock times are updated using the provided timestamp
+    if (state.frameloop === 'never' && typeof timestamp === 'number') {
+        delta = timestamp - state.clock.elapsedTime;
+        state.clock.oldTime = state.clock.elapsedTime;
+        state.clock.elapsedTime = timestamp;
+    }
+    // Call subscribers (useFrame)
+    // subscribers = state.internal.subscribers;
+    for (let i = 0; i < state.internal.subscribers.length; i++) {
+        const subscriber = state.internal.subscribers[i];
+        subscriber.callback(Object.assign(Object.assign({}, state), { delta, frame }));
     }
-    if (!Array.isArray(input)) {
-        input = typeof input === 'number' ? [input, input, input, input] : [input];
+    // Render content
+    if (!state.internal.priority && state.gl.render) {
+        state.gl.render(state.scene, state.camera);
     }
-    return new type(...input);
+    // Decrease frame count
+    state.internal.frames = Math.max(0, state.internal.frames - 1);
+    return state.frameloop === 'always' ? 1 : state.internal.frames;
 }
-
-/**
- * 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 createLoop(roots) {
+    let running = false;
+    let repeat;
+    let frame;
+    function loop(timestamp) {
+        var _a;
+        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) &&
+                !((_a = state.gl.xr) === null || _a === void 0 ? void 0 : _a.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 removeInteractivity(stateFactory, object) {
-    const { internal } = stateFactory();
-    // 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);
+    function invalidate(store, frames = 1) {
+        var _a;
+        const state = store === null || store === void 0 ? void 0 : store.get();
+        if (!state)
+            return roots.forEach((root) => invalidate(root, frames));
+        if (((_a = state.gl.xr) === null || _a === void 0 ? void 0 : _a.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);
         }
-    });
-    internal.capturedMap.forEach((captures, pointerId) => {
-        releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
-    });
-}
-function createEvents(stateFactory) {
-    /** Calculates delta */
-    function calculateDistance(event) {
-        const { internal } = stateFactory();
-        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) => {
-            var _a;
-            const eventName = ('pointer' + name);
-            return (_a = getInstanceLocalState(obj)) === null || _a === void 0 ? void 0 : _a.handlers[eventName];
-        }));
+    function advance(timestamp, runGlobalEffects = true, store, frame) {
+        const state = store === null || store === void 0 ? void 0 : store.get();
+        if (runGlobalEffects)
+            flushGlobalEffects('before', timestamp);
+        if (!state)
+            for (const root of roots.values())
+                render(timestamp, root);
+        // safe to assume store is available here
+        else
+            render(timestamp, store, frame);
+        if (runGlobalEffects)
+            flushGlobalEffects('after', timestamp);
     }
-    function intersect(event, filter) {
-        var _a, _b, _c, _d;
-        const state = stateFactory();
-        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 instanceState = (_a = getInstanceLocalState(eventsObjects[i])) === null || _a === void 0 ? void 0 : _a.stateFactory();
-            if (instanceState) {
-                instanceState.raycaster.camera = undefined;
-            }
+    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 is = {
+    obj: (a) => a === Object(a) && !Array.isArray(a) && typeof a !== 'function',
+    material: (a) => !!a && a.isMaterial,
+    geometry: (a) => !!a && a.isBufferGeometry,
+    orthographicCamera: (a) => !!a && a.isOrthographicCamera,
+    perspectiveCamera: (a) => !!a && a.isPerspectiveCamera,
+    camera: (a) => !!a && a.isCamera,
+    renderer: (a) => !!a && a instanceof THREE.WebGLRenderer,
+    scene: (a) => !!a && a.isScene,
+    object3D: (a) => !!a && a.isObject3D,
+    instance: (a) => !!a && !!a['__ngt__'],
+    ref: (a) => a instanceof ElementRef,
+    equ(a, b, { arrays = 'shallow', objects = 'reference', strict = true } = {}) {
+        // Wrong type or one of the two undefined, doesn't match
+        if (typeof a !== typeof b || !!a !== !!b)
+            return false;
+        // Atomic, just compare a against b
+        if (typeof a === 'string' || typeof a === 'number')
+            return a === b;
+        const isObj = is.obj(a);
+        if (isObj && objects === 'reference')
+            return a === b;
+        const isArr = Array.isArray(a);
+        if (isArr && arrays === 'reference')
+            return a === b;
+        // Array or Object, shallow compare first to see if it's a match
+        if ((isArr || isObj) && a === b)
+            return true;
+        // Last resort, go through keys
+        let i;
+        for (i in a)
+            if (!(i in b))
+                return false;
+        for (i in strict ? b : a)
+            if (a[i] !== b[i])
+                return false;
+        if (i === void 0) {
+            if (isArr && a.length === 0 && b.length === 0)
+                return true;
+            if (isObj && Object.keys(a).length === 0 && Object.keys(b).length === 0)
+                return true;
+            if (a !== b)
+                return false;
         }
-        if (!state.previousStateFactory) {
-            // Make sure root-level pointer and ray are set up
-            (_c = (_b = state.events).compute) === null || _c === void 0 ? void 0 : _c.call(_b, event, () => state);
+        return true;
+    },
+};
+
+function checkNeedsUpdate(value) {
+    if (value !== null && is.obj(value) && 'needsUpdate' in value) {
+        value['needsUpdate'] = true;
+        if ('uniformsNeedUpdate' in value) {
+            value['uniformsNeedUpdate'] = true;
         }
-        function handleRaycast(obj) {
-            var _a, _b, _c;
-            const state = (_a = getInstanceLocalState(obj)) === null || _a === void 0 ? void 0 : _a.stateFactory();
-            // Skip event handling when noEvents is set, or when the raycasters camera is null
-            if (!state || !state.events.enabled || state.raycaster.camera === null)
-                return [];
-            // When the camera is undefined we have to call the event layers update function
-            if (state.raycaster.camera === undefined) {
-                (_c = (_b = state.events).compute) === null || _c === void 0 ? void 0 : _c.call(_b, event, () => state, state.previousStateFactory);
-                // If the camera is still undefined we have to skip this layer entirely
-                if (state.raycaster.camera === undefined)
-                    state.raycaster.camera = null;
-            }
-            // Intersect object by object
-            return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
+    }
+}
+function checkUpdate(value) {
+    if (is.object3D(value)) {
+        value.updateMatrix();
+    }
+    if (is.camera(value)) {
+        if (is.perspectiveCamera(value) || is.orthographicCamera(value)) {
+            value.updateProjectionMatrix();
         }
-        // Collect events
-        let hits = eventsObjects
-            // Intersect objects
-            .flatMap(handleRaycast)
-            // Sort by event priority and distance
-            .sort((a, b) => {
-            var _a, _b;
-            const aState = (_a = getInstanceLocalState(a.object)) === null || _a === void 0 ? void 0 : _a.stateFactory();
-            const bState = (_b = getInstanceLocalState(b.object)) === null || _b === void 0 ? void 0 : _b.stateFactory();
-            if (!aState || !bState)
-                return 0;
-            return bState.events.priority - aState.events.priority || a.distance - b.distance;
-        })
-            // Filter out duplicates
-            .filter((item) => {
-            const id = makeId(item);
-            if (duplicates.has(id))
-                return false;
-            duplicates.add(id);
-            return true;
-        });
-        // 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, () => state);
-        // Bubble up the events, find the event source (eventObject)
-        for (const hit of hits) {
-            let eventObject = hit.object;
-            // Bubble event up
-            while (eventObject) {
-                if ((_d = getInstanceLocalState(eventObject)) === null || _d === void 0 ? void 0 : _d.eventCount)
-                    intersections.push(Object.assign(Object.assign({}, hit), { eventObject }));
-                eventObject = eventObject.parent;
-            }
+        value.updateMatrixWorld();
+    }
+    checkNeedsUpdate(value);
+}
+function updateCamera(camera, size) {
+    if (!camera.manual) {
+        if (is.orthographicCamera(camera)) {
+            camera.left = size.width / -2;
+            camera.right = size.width / 2;
+            camera.top = size.height / 2;
+            camera.bottom = size.height / -2;
         }
-        // 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 captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-                intersections.push(captureData.intersection);
-            }
+        else {
+            camera.aspect = size.width / size.height;
         }
-        return intersections;
-    }
-    /**  Handles intersections by forwarding them to handlers */
-    function handleIntersects(intersections, event, delta, callback) {
-        var _a;
-        const rootState = stateFactory();
-        // If anything has been found, forward it to the event listeners
-        if (intersections.length) {
-            const localState = { stopped: false };
-            for (const hit of intersections) {
-                const state = ((_a = getInstanceLocalState(hit.object)) === null || _a === void 0 ? void 0 : _a.stateFactory()) || rootState;
-                const { raycaster, pointer, camera, internal } = state;
-                const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
-                const hasPointerCapture = (id) => { var _a, _b; return (_b = (_a = internal.capturedMap.get(id)) === null || _a === void 0 ? void 0 : _a.has(hit.eventObject)) !== null && _b !== void 0 ? _b : false; };
-                const setPointerCapture = (id) => {
-                    const captureData = {
-                        intersection: hit,
-                        target: event.target,
-                    };
-                    if (internal.capturedMap.has(id)) {
-                        // if the pointerId was previously captured, we add the hit to the
-                        // event capturedMap.
-                        internal.capturedMap.get(id).set(hit.eventObject, captureData);
-                    }
-                    else {
-                        // if the pointerId was not previously captured, we create a map
-                        // containing the hitObject, and the hit. hitObject is used for
-                        // faster access.
-                        internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
-                    }
-                    // Call the original event now
-                    event.target.setPointerCapture(id);
-                };
-                const releasePointerCapture = (id) => {
-                    const captures = internal.capturedMap.get(id);
-                    if (captures) {
-                        releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
-                    }
-                };
-                // Add native event props
-                const extractEventProps = {};
-                // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
-                for (const prop in event) {
-                    const property = event[prop];
-                    // Only copy over atomics, leave functions alone as these should be
-                    // called as event.nativeEvent.fn()
-                    if (typeof property !== 'function')
-                        extractEventProps[prop] = property;
-                }
-                const raycastEvent = Object.assign(Object.assign(Object.assign({}, hit), extractEventProps), { pointer,
-                    intersections, stopped: localState.stopped, delta,
-                    unprojectedPoint, ray: raycaster.ray, camera: camera, 
-                    // Hijack stopPropagation, which just sets a flag
-                    stopPropagation() {
-                        // https://github.com/pmndrs/react-three-fiber/issues/596
-                        // Events are not allowed to stop propagation if the pointer has been captured
-                        const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId);
-                        // We only authorize stopPropagation...
-                        if (
-                        // ...if this pointer hasn't been captured
-                        !capturesForPointer ||
-                            // ... or if the hit object is capturing the pointer
-                            capturesForPointer.has(hit.eventObject)) {
-                            raycastEvent.stopped = localState.stopped = true;
-                            // Propagation is stopped, remove all other hover records
-                            // An event handler is only allowed to flush other handlers if it is hovered itself
-                            if (internal.hovered.size &&
-                                Array.from(internal.hovered.values()).find((i) => i.eventObject === hit.eventObject)) {
-                                // Objects cannot flush out higher up objects that have already caught the event
-                                const higher = intersections.slice(0, intersections.indexOf(hit));
-                                cancelPointer([...higher, hit]);
-                            }
-                        }
-                    }, 
-                    // there should be a distinction between target and currentTarget
-                    target: {
-                        hasPointerCapture,
-                        setPointerCapture,
-                        releasePointerCapture,
-                    }, currentTarget: {
-                        hasPointerCapture,
-                        setPointerCapture,
-                        releasePointerCapture,
-                    }, nativeEvent: event });
-                // Call subscribers
-                callback(raycastEvent);
-                // Event bubbling may be interrupted by stopPropagation
-                if (localState.stopped === true)
-                    break;
-            }
-        }
-        return intersections;
-    }
-    function cancelPointer(intersections) {
-        var _a, _b;
-        const { internal } = stateFactory();
-        for (const hoveredObj of internal.hovered.values()) {
-            // When no objects were hit or the hovered object wasn't found underneath the cursor
-            // we call onPointerOut and delete the object from the hovered-elements map
-            if (!intersections.length ||
-                !intersections.find((hit) => hit.object === hoveredObj.object &&
-                    hit.index === hoveredObj.index &&
-                    hit.instanceId === hoveredObj.instanceId)) {
-                const eventObject = hoveredObj.eventObject;
-                const instance = getInstanceLocalState(eventObject);
-                const handlers = instance === null || instance === void 0 ? void 0 : instance.handlers;
-                internal.hovered.delete(makeId(hoveredObj));
-                if (instance === null || instance === void 0 ? void 0 : instance.eventCount) {
-                    // Clear out intersects, they are outdated by now
-                    const data = Object.assign(Object.assign({}, hoveredObj), { intersections });
-                    (_a = handlers === null || handlers === void 0 ? void 0 : handlers.pointerout) === null || _a === void 0 ? void 0 : _a.call(handlers, data);
-                    (_b = handlers === null || handlers === void 0 ? void 0 : handlers.pointerleave) === null || _b === void 0 ? void 0 : _b.call(handlers, data);
-                }
-            }
-        }
-    }
-    function pointerMissed(event, objects) {
-        var _a, _b;
-        for (let i = 0; i < objects.length; i++) {
-            const instance = getInstanceLocalState(objects[i]);
-            (_b = instance === null || instance === void 0 ? void 0 : (_a = instance.handlers).pointermissed) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        }
-    }
-    function handlePointer(name) {
-        // Deal with cancelation
-        switch (name) {
-            case 'pointerleave':
-            case 'pointercancel':
-                return () => cancelPointer([]);
-            case 'lostpointercapture':
-                return (event) => {
-                    const { internal } = stateFactory();
-                    if ('pointerId' in event && !internal.capturedMap.has(event.pointerId)) {
-                        // If the object event interface had onLostPointerCapture, we'd call it here on every
-                        // object that's getting removed.
-                        internal.capturedMap.delete(event.pointerId);
-                        cancelPointer([]);
-                    }
-                };
-        }
-        // Any other pointer goes here ...
-        return function handleEvent(event) {
-            const { onPointerMissed, internal } = stateFactory();
-            // prepareRay(event)
-            internal.lastEvent = event;
-            // Get fresh intersects
-            const isPointerMove = name === 'pointermove';
-            const isClickEvent = name === 'click' || name === 'contextmenu' || name === 'dblclick';
-            const filter = isPointerMove ? filterPointerEvents : undefined;
-            // const hits = patchIntersects(intersect(filter), event)
-            const hits = intersect(event, filter);
-            const delta = isClickEvent ? calculateDistance(event) : 0;
-            // Save initial coordinates on pointer-down
-            if (name === 'pointerdown') {
-                internal.initialClick = [event.offsetX, event.offsetY];
-                internal.initialHits = hits.map((hit) => hit.eventObject);
-            }
-            // If a click yields no results, pass it back to the user as a miss
-            // Missed events have to come first in order to establish user-land side-effect clean up
-            if (isClickEvent && !hits.length) {
-                if (delta <= 2) {
-                    pointerMissed(event, internal.interaction);
-                    if (onPointerMissed)
-                        onPointerMissed(event);
-                }
-            }
-            // Take care of unhover
-            if (isPointerMove)
-                cancelPointer(hits);
-            function onIntersect(data) {
-                var _a, _b, _c;
-                const eventObject = data.eventObject;
-                const instance = getInstanceLocalState(eventObject);
-                const handlers = instance === null || instance === void 0 ? void 0 : instance.handlers;
-                // Check presence of handlers
-                if (!(instance === null || instance === void 0 ? void 0 : instance.eventCount))
-                    return;
-                if (isPointerMove) {
-                    // Move event ...
-                    if ((handlers === null || handlers === void 0 ? void 0 : handlers.pointerover) ||
-                        (handlers === null || handlers === void 0 ? void 0 : handlers.pointerenter) ||
-                        (handlers === null || handlers === void 0 ? void 0 : handlers.pointerout) ||
-                        (handlers === null || handlers === void 0 ? void 0 : handlers.pointerleave)) {
-                        // When enter or out is present take care of hover-state
-                        const id = makeId(data);
-                        const hoveredItem = internal.hovered.get(id);
-                        if (!hoveredItem) {
-                            // If the object wasn't previously hovered, book it and call its handler
-                            internal.hovered.set(id, data);
-                            (_a = handlers.pointerover) === null || _a === void 0 ? void 0 : _a.call(handlers, data);
-                            (_b = handlers.pointerenter) === null || _b === void 0 ? void 0 : _b.call(handlers, data);
-                        }
-                        else if (hoveredItem.stopped) {
-                            // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
-                            data.stopPropagation();
-                        }
-                    }
-                    // Call mouse move
-                    (_c = handlers === null || handlers === void 0 ? void 0 : handlers.pointermove) === null || _c === void 0 ? void 0 : _c.call(handlers, data);
-                }
-                else {
-                    // All other events ...
-                    const handler = handlers[name];
-                    if (handler) {
-                        // Forward all events back to their respective handlers with the exception of click events,
-                        // which must use the initial target
-                        if (!isClickEvent || internal.initialHits.includes(eventObject)) {
-                            // Missed events have to come first
-                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
-                            // Now call the handler
-                            handler(data);
-                        }
-                    }
-                    else {
-                        // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
-                        if (isClickEvent && internal.initialHits.includes(eventObject)) {
-                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
-                        }
-                    }
-                }
-            }
-            handleIntersects(hits, event, delta, onIntersect);
-        };
-    }
-    return { handlePointer };
-}
-
-const DOM_EVENTS = {
-    click: false,
-    contextmenu: false,
-    dblclick: false,
-    wheel: false,
-    pointerdown: true,
-    pointerup: true,
-    pointerleave: true,
-    pointermove: true,
-    pointercancel: true,
-    lostpointercapture: true,
-};
-function createPointerEvents(stateFactory) {
-    const { handlePointer } = createEvents(stateFactory);
-    return {
-        priority: 1,
-        enabled: true,
-        compute: (event, rootFactory) => {
-            const state = rootFactory();
-            // https://github.com/pmndrs/react-three-fiber/pull/782
-            // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
-            state.pointer.set((event.offsetX / state.size.width) * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
-            state.raycaster.setFromCamera(state.pointer, state.camera);
-        },
-        connected: undefined,
-        handlers: Object.keys(DOM_EVENTS).reduce((handlers, supportedEventName) => {
-            handlers[supportedEventName] = handlePointer(supportedEventName);
-            return handlers;
-        }, {}),
-        connect: (target) => {
-            var _a, _b, _c;
-            const state = stateFactory();
-            (_b = (_a = state.events).disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
-            state.setEvents({ connected: target });
-            Object.entries((_c = state.events.handlers) !== null && _c !== void 0 ? _c : {}).forEach(([eventName, eventHandler]) => {
-                const passive = DOM_EVENTS[eventName];
-                target.addEventListener(eventName, eventHandler, { passive });
-            });
-        },
-        disconnect: () => {
-            var _a;
-            const { events, setEvents } = stateFactory();
-            if (events.connected) {
-                Object.entries((_a = events.handlers) !== null && _a !== void 0 ? _a : {}).forEach(([eventName, eventHandler]) => {
-                    if (events.connected instanceof HTMLElement) {
-                        events.connected.removeEventListener(eventName, eventHandler);
-                    }
-                });
-                setEvents({ connected: undefined });
-            }
-        },
-    };
-}
-
-class NgtRef extends BehaviorSubject {
-    constructor(value) {
-        super(value ? value : null);
-    }
-    set(valueOrFactory) {
-        if (typeof valueOrFactory === 'function') {
-            this.next(valueOrFactory(this.value));
-        }
-        else {
-            this.next(valueOrFactory);
-        }
-    }
-}
-
-const is = {
-    obj: (a) => a === Object(a) && !Array.isArray(a) && typeof a !== 'function',
-    material: (a) => !!a && a.isMaterial,
-    geometry: (a) => !!a && a.isBufferGeometry,
-    mesh: (a) => !!a && a.isMesh,
-    color: (a) => !!a && a.isColor,
-    orthographic: (a) => !!a && a.isOrthographicCamera,
-    perspective: (a) => !!a && a.isPerspectiveCamera,
-    camera: (a) => !!a && a.isCamera,
-    glRenderer: (a) => !!a && a instanceof THREE.WebGLRenderer,
-    scene: (a) => !!a && a.isScene,
-    object3d: (a) => !!a && a.isObject3D,
-    instance: (a) => !!a && !!a['__ngt__'],
-    ref: (a) => !!a && a instanceof NgtRef,
-    supportColorManagement: () => 'ColorManagement' in THREE,
-    canvas: (a) => a instanceof HTMLCanvasElement,
-    equ(a, b, { arrays = 'shallow', objects = 'reference', strict = true } = {}) {
-        // Wrong type or one of the two undefined, doesn't match
-        if (typeof a !== typeof b || !!a !== !!b)
-            return false;
-        // Atomic, just compare a against b
-        if (typeof a === 'string' || typeof a === 'number')
-            return a === b;
-        const isObj = is.obj(a);
-        if (isObj && objects === 'reference')
-            return a === b;
-        const isArr = Array.isArray(a);
-        if (isArr && arrays === 'reference')
-            return a === b;
-        // Array or Object, shallow compare first to see if it's a match
-        if ((isArr || isObj) && a === b)
-            return true;
-        // Last resort, go through keys
-        let i;
-        for (i in a)
-            if (!(i in b))
-                return false;
-        for (i in strict ? b : a)
-            if (a[i] !== b[i])
-                return false;
-        if (i === void 0) {
-            if (isArr && a.length === 0 && b.length === 0)
-                return true;
-            if (isObj && Object.keys(a).length === 0 && Object.keys(b).length === 0)
-                return true;
-            if (a !== b)
-                return false;
-        }
-        return true;
-    },
-};
-
-/**
- * a default Selector that consumers can quickly use for their selectors projector
- */
-const defaultProjector = () => ({});
-/**
- * A custom operator that skips the first undefined value but allows subsequent undefined values.
- * NgRxComponentStore#select always emits the first value regardless of undefined or not after initialize
- */
-const skipFirstUndefined = () => filter((value, index) => index > 0 || value !== undefined);
-/**
- * An extended `tap` operator that accepts an `effectFn` which:
- * - runs on every `next` notification from `source$`
- * - can optionally return a `cleanUp` function that
- * invokes from the 2nd `next` notification onward and on `unsubscribe` (destroyed)
- *
- *
- * @example
- * ```typescript
- * source$.pipe(
- *  tapEffect((sourceValue) = {
- *    const cb = () => {
- *      doStuff(sourceValue);
- *    };
- *    addListener('event', cb);
- *
- *    return () => {
- *      removeListener('event', cb);
- *    }
- *  })
- * )
- * ```
- */
-function tapEffect(effectFn) {
-    let cleanupFn = noop;
-    let firstRun = false;
-    let prev = undefined;
-    const teardown = (error) => {
-        return () => {
-            if (cleanupFn) {
-                cleanupFn({ prev, complete: true, error });
-            }
-        };
-    };
-    return tap({
-        next: (value) => {
-            if (cleanupFn && firstRun) {
-                cleanupFn({ prev, complete: false, error: false });
-            }
-            const cleanUpOrVoid = effectFn(value);
-            if (cleanUpOrVoid) {
-                cleanupFn = cleanUpOrVoid;
-            }
-            prev = value;
-            if (!firstRun) {
-                firstRun = true;
-            }
-        },
-        complete: teardown(false),
-        unsubscribe: teardown(false),
-        error: teardown(true),
-    });
-}
-class NgtComponentStore extends ComponentStore {
-    constructor() {
-        super({});
-        // exposing get since THREE is imperative at its core
-        // we need to imperatively get state sometimes for usages in Animation Loop
-        // we also bind "this" instance, so we don't have to bind it later
-        this.read = this.get.bind(this);
-        this.initialize();
-    }
-    /**
-     * A custom patchState that allows for:
-     * - Partial state updates and Observable of partial state updates like patchState
-     * - Pass a Record<string, ObservableInput> to update a specific key with an Observable.
-     * This is similar to `RxState.connect()` API
-     */
-    write(partialStateOrFactory) {
-        if (typeof partialStateOrFactory === 'function') {
-            return this.write(partialStateOrFactory(this.read()));
-        }
-        const partialState = partialStateOrFactory;
-        if (Object.keys(partialState).length === 0) {
-            return;
-        }
-        if (isObservable(partialState)) {
-            return this.patchState(partialState);
-        }
-        const entries = Object.entries(partialState);
-        const hasObservable = entries.some(([_, value]) => isObservable(value) && !is.ref(value));
-        if (!hasObservable) {
-            return this.patchState(partialState);
-        }
-        const [rawValues, observableValues] = entries.reduce((result, [key, value]) => {
-            if (isObservable(value)) {
-                result[1][key] = value;
-            }
-            else {
-                result[0][key] = value;
-            }
-            return result;
-        }, [{}, {}]);
-        if (Object.keys(rawValues).length > 0) {
-            this.patchState(rawValues);
-        }
-        if (Object.keys(observableValues).length > 0) {
-            this.patchState(combineLatest(observableValues));
-        }
-    }
-    initialize() {
-        return;
-    }
-    /**
-     * A utility class method to select a state on the template as Observable
-     * - This method always debounce the Observable
-     */
-    selectKey(key, skipFirst = false) {
-        return this.select((s) => s[key], { debounce: true }).pipe(skipFirst ? skipFirstUndefined() : (s) => s);
-    }
-    /**
-     * A utility class method to get a state on the template as imperative Value
-     */
-    readKey(key) {
-        return this.read((s) => s[key]);
-    }
-}
-NgtComponentStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgtComponentStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtComponentStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtComponentStore, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-function createInjection(description, { defaultValueOrFactory, provideValueFactory, } = {}) {
-    const factory = (defaultValueOrFactory && typeof defaultValueOrFactory === 'function'
-        ? defaultValueOrFactory
-        : () => defaultValueOrFactory);
-    const injectionToken = new InjectionToken(description, { factory });
-    function injectFn(options = {}) {
-        return inject(injectionToken, options);
-    }
-    function provideFn(value) {
-        return {
-            provide: injectionToken,
-            useValue: provideValueFactory ? provideValueFactory(value) : value,
-        };
+        camera.updateProjectionMatrix();
+        camera.updateMatrixWorld();
     }
-    return [injectFn, provideFn, injectionToken];
 }
 
-const [injectWindow] = createInjection('window', {
-    defaultValueOrFactory: () => {
-        const { defaultView } = inject(DOCUMENT);
-        if (!defaultView) {
-            throw `window is not available!`;
-        }
-        return defaultView;
-    },
-});
-
-function checkNeedsUpdate(value) {
-    if (value !== null && is.obj(value) && 'needsUpdate' in value) {
-        value['needsUpdate'] = true;
-        if ('uniformsNeedUpdate' in value) {
-            value['uniformsNeedUpdate'] = true;
-        }
-    }
-}
-function checkUpdate(value) {
-    if (is.object3d(value)) {
-        value.updateMatrix();
-    }
-    else if (is.camera(value)) {
-        if (is.perspective(value) || is.orthographic(value)) {
-            value.updateProjectionMatrix();
-        }
-        value.updateMatrixWorld();
-    }
-    checkNeedsUpdate(value);
+function getLocalState(obj) {
+    if (!obj)
+        return {};
+    return obj['__ngt__'] || {};
 }
-
 function invalidateInstance(instance) {
     var _a;
-    const state = (_a = getInstanceLocalState(instance)) === null || _a === void 0 ? void 0 : _a.stateFactory();
+    const state = (_a = getLocalState(instance).store) === null || _a === void 0 ? void 0 : _a.get();
     if (state && state.internal.frames === 0)
         state.invalidate();
     checkUpdate(instance);
 }
-function prepare(instance, parentStateFactory, rootStateFactory, parentInstance, previousInstance, isPrimitive = false) {
-    var _a, _b, _c, _d;
-    const previousInstanceInternal = getInstanceLocalState(previousInstance === null || previousInstance === void 0 ? void 0 : previousInstance.value);
-    const parent = parentInstance
-        ? parentInstance
-        : previousInstanceInternal
-            ? previousInstanceInternal.parentRef
-            : undefined;
-    if (is.scene(instance)) {
-        applyProps(instance, { dispose: null });
-    }
-    return Object.assign(instance, {
-        __ngt__: {
-            stateFactory: parentStateFactory,
-            rootFactory: rootStateFactory,
-            isPrimitive: !isPrimitive ? previousInstanceInternal === null || previousInstanceInternal === void 0 ? void 0 : previousInstanceInternal.isPrimitive : isPrimitive,
-            eventCount: (_a = previousInstanceInternal === null || previousInstanceInternal === void 0 ? void 0 : previousInstanceInternal.eventCount) !== null && _a !== void 0 ? _a : 0,
-            handlers: (_b = previousInstanceInternal === null || previousInstanceInternal === void 0 ? void 0 : previousInstanceInternal.handlers) !== null && _b !== void 0 ? _b : {},
-            instancesRefs: (_c = previousInstanceInternal === null || previousInstanceInternal === void 0 ? void 0 : previousInstanceInternal.instancesRefs) !== null && _c !== void 0 ? _c : new NgtRef([]),
-            objectsRefs: (_d = previousInstanceInternal === null || previousInstanceInternal === void 0 ? void 0 : previousInstanceInternal.objectsRefs) !== null && _d !== void 0 ? _d : new NgtRef([]),
-            parentRef: parent ? (parent === instance || parent.value === instance ? null : parent) : null,
-        },
-    });
+function prepare(object, localState) {
+    const instance = object;
+    if ((localState === null || localState === void 0 ? void 0 : localState.primitive) || !instance.__ngt__) {
+        const _a = localState || {}, { objects = new BehaviorSubject([]), nonObjects = new BehaviorSubject([]) } = _a, rest = __rest(_a, ["objects", "nonObjects"]);
+        instance.__ngt__ = Object.assign({ previousAttach: null, store: null, parent: null, memoized: {}, eventCount: 0, handlers: {}, objects,
+            nonObjects, add: (object, type) => {
+                instance.__ngt__[type].next([...instance.__ngt__[type].value, object]);
+                notifyAncestors(instance.__ngt__.parent);
+            }, remove: (object, type) => {
+                instance.__ngt__[type].next(instance.__ngt__[type].value.filter((o) => o !== object));
+                notifyAncestors(instance.__ngt__.parent);
+            } }, rest);
+    }
+    return instance;
+}
+function notifyAncestors(instance) {
+    if (!instance)
+        return;
+    const localState = getLocalState(instance);
+    if (localState.objects)
+        localState.objects.next(localState.objects.value);
+    if (localState.nonObjects)
+        localState.nonObjects.next(localState.nonObjects.value);
+    notifyAncestors(localState.parent);
 }
 
-const DEFAULT = '__default';
-function diffProps(instance, props, previousProps = {}, remove = false) {
-    const localState = getInstanceLocalState(instance) || {};
+function diffProps(instance, props) {
     const propsEntries = Object.entries(props);
     const changes = [];
-    // Catch removed props, prepend them, so they can be reset or removed
-    if (remove) {
-        const previousKeys = Object.keys(previousProps);
-        for (const previousKey of previousKeys) {
-            // @ts-ignore
-            if (!Object.hasOwn(props, previousKey)) {
-                propsEntries.unshift([previousKey, DEFAULT + 'remove']);
-            }
-        }
-    }
     for (const [propKey, propValue] of propsEntries) {
-        if (is.equ(propValue, previousProps[propKey]))
+        if (is.equ(propValue, instance[propKey]))
             continue;
-        changes.push([propKey, propValue]);
-    }
-    const memoized = Object.assign({}, props);
-    if (localState.memoized && localState.memoized['args']) {
-        memoized['args'] = localState.memoized['args'];
-    }
-    if (localState.memoized && localState.memoized['attach']) {
-        memoized['attach'] = localState.memoized['attach'] || localState.attach;
-    }
-    return { changes, memoized };
-}
-function applyProps(instance, props) {
-    var _a, _b, _c, _d;
-    // props is empty
-    if (!Object.keys(props).length)
-        return instance;
-    // Filter equals, events and reserved props
-    const localState = getInstanceLocalState(instance) || {};
-    const rootState = (_a = localState.stateFactory) === null || _a === void 0 ? void 0 : _a.call(localState);
-    const { changes, memoized } = diffProps(instance, props);
-    const instanceHandlers = localState.eventCount;
-    if (getInstanceLocalState(instance)) {
-        getInstanceLocalState(instance).memoized = memoized;
-    }
-    for (let i = 0; i < changes.length; i++) {
-        const key = changes[i][0];
-        const currentInstance = instance;
-        const targetProp = currentInstance[key];
-        let value = changes[i][1];
-        if (is.ref(value)) {
-            value = value.value;
-        }
-        if (value === DEFAULT + 'remove') {
-            if (targetProp && targetProp.constructor) {
-                // use the prop constructor to find the default it should be
-                value = new targetProp.constructor(...((_b = memoized['args']) !== null && _b !== void 0 ? _b : []));
-            }
-            else if (currentInstance.constructor) {
-                const dummyInstance = new currentInstance.constructor(...(((_d = (_c = getInstanceLocalState(currentInstance)) === null || _c === void 0 ? void 0 : _c.memoized) === null || _d === void 0 ? void 0 : _d['args']) || []));
-                value = dummyInstance[targetProp];
-                // destroy the instance
-                if (dummyInstance.dispose)
-                    dummyInstance.dispose();
-            }
-            else {
-                value = 0;
-            }
-        }
-        // Special treatment 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(class) next ...
-            else if (targetProp['copy'] &&
-                value &&
-                value.constructor &&
-                targetProp.constructor.name === value.constructor.name) {
-                targetProp['copy'](value);
-                if (!is.supportColorManagement() && !rootState.linear && isColor) {
-                    targetProp['convertSRGBToLinear']();
-                }
-            }
-            // If nothing else fits, just set the single value, ignore undefined
-            // https://github.com/pmndrs/react-three-fiber/issues/274
-            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, we must therefore copy the mask property
-                else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers)
-                    targetProp.mask = value.mask;
-                // Otherwise just set ...
-                else
-                    targetProp['set'](value);
-                // For versions of three which don't support THREE.ColorManagement,
-                // Auto-convert sRGB colors
-                // https://github.com/pmndrs/react-three-fiber/issues/344
-                if (!is.supportColorManagement() && !rootState.linear && isColor)
-                    targetProp.convertSRGBToLinear();
-            }
-            // Else, just overwrite the value
-        }
-        else {
-            currentInstance[key] = value;
-            // Auto-convert sRGB textures, for now ...
-            // https://github.com/pmndrs/react-three-fiber/issues/344
-            if (!(rootState === null || rootState === void 0 ? void 0 : rootState.linear) && currentInstance[key] instanceof THREE.Texture) {
-                currentInstance[key]['encoding'] = THREE.sRGBEncoding;
-            }
-        }
-        checkNeedsUpdate(targetProp);
-        invalidateInstance(instance);
-    }
-    if (localState.parentRef &&
-        rootState.internal &&
-        instance['raycast'] &&
-        instanceHandlers !== localState.eventCount) {
-        // Pre-emptively remove the instance from the interaction manager
-        rootState.removeInteraction(instance['uuid']);
-        // Add the instance to the interaction manager only when it has handlers
-        if (localState.eventCount)
-            rootState.addInteraction(instance);
-    }
-    return instance;
-}
-
-function updateCamera(camera, size) {
-    // https://github.com/pmndrs/react-three-fiber/issues/92
-    // Do not mess with the camera if it belongs to the user
-    if (!camera.manual) {
-        if (is.orthographic(camera)) {
-            camera.left = size.width / -2;
-            camera.right = size.width / 2;
-            camera.top = size.height / 2;
-            camera.bottom = size.height / -2;
-        }
-        else {
-            camera.aspect = size.width / size.height;
-        }
-        camera.updateProjectionMatrix();
-        // https://github.com/pmndrs/react-three-fiber/issues/178
-        // Update matrix world since the renderer is a frame late
-        camera.updateMatrixWorld();
-    }
-}
-function createDefaultCamera(isOrthographic, size) {
-    if (isOrthographic) {
-        return new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000);
-    }
-    return new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
-}
-
-function 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, stateFactory, frame) {
-    const state = stateFactory();
-    // Run local effects
-    let delta = state.clock.getDelta();
-    // In frameloop='never' mode, clock times are updated using the provided timestamp
-    if (state.frameloop === 'never' && typeof timestamp === 'number') {
-        delta = timestamp - state.clock.elapsedTime;
-        state.clock.oldTime = state.clock.elapsedTime;
-        state.clock.elapsedTime = timestamp;
-    }
-    // Call subscribers (useFrame)
-    // subscribers = state.internal.subscribers;
-    for (let i = 0; i < state.internal.subscribers.length; i++) {
-        const subscriber = state.internal.subscribers[i];
-        const object = is.ref(subscriber.obj) ? subscriber.obj.value : subscriber.obj;
-        subscriber.callback(Object.assign(Object.assign({}, state), { delta, frame }), object);
+        changes.push([propKey, propValue]);
     }
-    // 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;
+    return changes;
 }
-function createLoop(roots) {
-    let running = false;
-    let repeat;
-    let frame;
-    let state;
-    function loop(timestamp) {
-        var _a;
-        frame = requestAnimationFrame(loop);
-        running = true;
-        repeat = 0;
-        // Run effects
-        flushGlobalEffects('before', timestamp);
-        // Render all roots
-        for (const root of roots.values()) {
-            state = root();
-            // If the frameloop is invalidated, do not run another frame
-            if (state.internal.active &&
-                (state.frameloop === 'always' || state.internal.frames > 0) &&
-                !((_a = state.gl.xr) === null || _a === void 0 ? void 0 : _a.isPresenting)) {
-                repeat += render(timestamp, root);
+function applyProps(instance, props) {
+    var _a;
+    // if props is empty
+    if (!Object.keys(props).length)
+        return instance;
+    // filter equals, events , and reserved props
+    const localState = getLocalState(instance);
+    const rootState = (_a = localState.store) === null || _a === void 0 ? void 0 : _a.get();
+    const changes = diffProps(instance, props);
+    for (let i = 0; i < changes.length; i++) {
+        const key = changes[i][0];
+        const currentInstance = instance;
+        const targetProp = currentInstance[key];
+        const value = changes[i][1];
+        // 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 === null || rootState === void 0 ? void 0 : rootState.linear) && isColor) {
+                    targetProp.convertSRGBToLinear();
+                }
             }
         }
-        // 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);
+        // else just overwrite the value
+        else {
+            currentInstance[key] = value;
+            // auto-convert srgb textures
+            if (!(rootState === null || rootState === void 0 ? void 0 : rootState.linear) && currentInstance[key] instanceof THREE.Texture) {
+                currentInstance[key]['encoding'] = THREE.sRGBEncoding;
+            }
         }
+        checkUpdate(targetProp);
+        invalidateInstance(instance);
     }
-    function invalidate(stateFactory, frames = 1) {
-        var _a;
-        const stateToInvalidate = stateFactory === null || stateFactory === void 0 ? void 0 : stateFactory();
-        if (!stateToInvalidate)
-            return roots.forEach((root) => invalidate(root, frames));
-        if (((_a = stateToInvalidate.gl.xr) === null || _a === void 0 ? void 0 : _a.isPresenting) ||
-            !stateToInvalidate.internal.active ||
-            stateToInvalidate.frameloop === 'never')
-            return;
-        // Increase frames, do not go higher than 60
-        stateToInvalidate.internal.frames = Math.min(60, stateToInvalidate.internal.frames + frames);
-        // If the render-loop isn't active, start it
-        if (!running) {
-            running = true;
-            requestAnimationFrame(loop);
-        }
+    const instanceHandlers = localState.eventCount;
+    if (localState.parent && rootState.internal && instance['raycast'] && instanceHandlers !== localState.eventCount) {
+        // pre-emptively remove the interaction from manager
+        rootState.removeInteraction(instance['uuid']);
+        // add the instance to the interaction manager only when it has handlers
+        if (localState.eventCount)
+            rootState.addInteraction(instance);
     }
-    function advance(timestamp, runGlobalEffects = true, stateFactory, frame) {
-        if (runGlobalEffects)
-            flushGlobalEffects('before', timestamp);
-        if (!stateFactory)
-            for (const root of roots.values())
-                render(timestamp, root);
-        else
-            render(timestamp, stateFactory, frame);
-        if (runGlobalEffects)
-            flushGlobalEffects('after', timestamp);
+    if (localState.parent && localState.afterUpdate && localState.afterUpdate.observed && changes.length) {
+        localState.afterUpdate.emit(instance);
     }
-    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,
-    };
+    return instance;
 }
 
-function createRenderer(glOptions, canvasElement) {
+const idCache = {};
+function makeId(event) {
+    if (event) {
+        return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
+    }
+    const newId = THREE.MathUtils.generateUUID();
+    // ensure not already used
+    if (!idCache[newId]) {
+        idCache[newId] = true;
+        return newId;
+    }
+    return makeId();
+}
+function makeDpr(dpr, window) {
+    const target = (window === null || window === void 0 ? void 0 : window.devicePixelRatio) || 1;
+    return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
+}
+function makeDefaultCamera(isOrthographic, size) {
+    if (isOrthographic)
+        return new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000);
+    return new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
+}
+function makeDefaultRenderer(glOptions, canvasElement) {
     const customRenderer = (typeof glOptions === 'function' ? glOptions(canvasElement) : glOptions);
-    if ((customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.render) != null) {
+    if ((customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.render) != null)
         return customRenderer;
-    }
     return new THREE.WebGLRenderer(Object.assign({ powerPreference: 'high-performance', canvas: canvasElement, antialias: true, alpha: true }, (glOptions || {})));
 }
+function makeObjectGraph(object) {
+    const data = { nodes: {}, materials: {} };
+    if (object) {
+        object.traverse((child) => {
+            if (child.name)
+                data.nodes[child.name] = child;
+            if ('material' in child && !data.materials[child.material.name]) {
+                data.materials[child.material.name] = child
+                    .material;
+            }
+        });
+    }
+    return data;
+}
+
+const startWithUndefined = () => startWith(undefined);
+/**
+ * An extended `tap` operator that accepts an `effectFn` which:
+ * - runs on every `next` notification from `source$`
+ * - can optionally return a `cleanUp` function that
+ * invokes from the 2nd `next` notification onward and on `unsubscribe` (destroyed)
+ *
+ *
+ * @example
+ * ```typescript
+ * source$.pipe(
+ *  tapEffect((sourceValue) = {
+ *    const cb = () => {
+ *      doStuff(sourceValue);
+ *    };
+ *    addListener('event', cb);
+ *
+ *    return () => {
+ *      removeListener('event', cb);
+ *    }
+ *  })
+ * )
+ * ```
+ */
+function tapEffect(effectFn) {
+    let cleanupFn = () => { };
+    let firstRun = false;
+    let prev = undefined;
+    const teardown = (error) => {
+        return () => {
+            if (cleanupFn) {
+                cleanupFn({ prev, complete: true, error });
+            }
+        };
+    };
+    return tap({
+        next: (value) => {
+            if (cleanupFn && firstRun) {
+                cleanupFn({ prev, complete: false, error: false });
+            }
+            const cleanUpOrVoid = effectFn(value);
+            if (cleanUpOrVoid) {
+                cleanupFn = cleanUpOrVoid;
+            }
+            prev = value;
+            if (!firstRun) {
+                firstRun = true;
+            }
+        },
+        complete: teardown(false),
+        unsubscribe: teardown(false),
+        error: teardown(true),
+    });
+}
+class NgtRxStore extends RxState {
+    constructor() {
+        super();
+        // set a dummy property so that initial this.get() won't return undefined
+        this.set({ __ngt_dummy__: '__ngt_dummy__' });
+        // call initialize that might be setup by derived Stores
+        this.initialize();
+        // override set so our consumers don't have to handle undefined for state that already have default values
+        const originalSet = this.set.bind(this);
+        Object.defineProperty(this, 'set', {
+            get: () => {
+                // Parameters type does not do well with overloads. So we use any[] here
+                return (...args) => {
+                    const firstArg = args[0];
+                    if (is.obj(firstArg)) {
+                        const modArgs = Object.entries(firstArg).reduce((modded, [key, value]) => {
+                            modded[key] = value === undefined ? this.get(key) : value;
+                            return modded;
+                        }, {});
+                        return originalSet(modArgs);
+                    }
+                    // @ts-ignore
+                    return originalSet(...args);
+                };
+            },
+        });
+    }
+    initialize() {
+        return;
+    }
+    effect(obs, sideEffectFn) {
+        return this.hold(obs.pipe(tapEffect(sideEffectFn)));
+    }
+}
+NgtRxStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRxStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgtRxStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRxStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRxStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
 const rootStateMap = new Map();
 const { invalidate, advance } = createLoop(rootStateMap);
 const shallowLoose = { objects: 'shallow', strict: false };
-class NgtStore extends NgtComponentStore {
+class NgtStore extends NgtRxStore {
     constructor() {
         super(...arguments);
         this.parentStore = inject(NgtStore, { optional: true, skipSelf: true });
-        this.zone = inject(NgZone);
-        this.window = injectWindow();
-        this.position = new THREE.Vector3();
-        this.defaultTarget = new THREE.Vector3();
-        this.tempTarget = new THREE.Vector3();
-        this.resize = this.effect(($) => {
-            let oldSize = this.read((s) => s.size);
-            let oldDpr = this.read((s) => { var _a; return (_a = s.viewport) === null || _a === void 0 ? void 0 : _a.dpr; });
-            return $.pipe(tap(() => {
-                const { camera, size, viewport, gl } = this.read();
-                // 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);
-                    gl.setSize(size.width, size.height, size.updateStyle);
-                }
-            }));
-        });
-        this.invalidate = this.effect(tap(() => void this.read((s) => s.invalidate)()));
+        this.window = inject(DOCUMENT).defaultView;
         this.isInit = false;
-        this.isConfigured = false;
-        this.addInteraction = (interaction) => {
-            this.write((state) => (Object.assign(Object.assign({}, state), { internal: Object.assign(Object.assign({}, state.internal), { interaction: [...state.internal.interaction, interaction] }) })));
-        };
-        this.removeInteraction = (uuid) => {
-            this.write((state) => (Object.assign(Object.assign({}, state), { internal: Object.assign(Object.assign({}, state.internal), { interaction: state.internal.interaction.filter((interaction) => interaction.uuid !== uuid) }) })));
-        };
-        this.setPerformanceCurrent = (current) => {
-            this.write((s) => ({ performance: Object.assign(Object.assign({}, s.performance), { current }) }));
-        };
-        this.setEvents = (events) => {
-            this.write((s) => ({ events: Object.assign(Object.assign({}, s.events), events) }));
-        };
-        this.setSize = (width, height, top, left, updateStyle) => {
-            const camera = this.read((s) => s.camera);
-            const size = { width, height, top: top || 0, left: left || 0, updateStyle };
-            this.write((state) => ({
-                size,
-                viewport: Object.assign(Object.assign({}, state.viewport), this.getCurrentViewport(camera, this.defaultTarget, size)),
-            }));
-        };
-        this.setCamera = (camera) => {
-            this.write((s) => ({
-                camera,
-                viewport: Object.assign(Object.assign({}, s.viewport), this.getCurrentViewport(camera)),
-            }));
-            this.read((s) => s.cameraRef).set(camera);
-        };
-        this.setDpr = (dpr) => {
-            const resolved = makeDpr(dpr, this.window);
-            this.write((s) => ({
-                viewport: Object.assign(Object.assign({}, s.viewport), { dpr: resolved, initialDpr: s.viewport.initialDpr || resolved }),
-            }));
-        };
-        this.setFrameloop = (frameloop = 'always') => {
-            const clock = this.read((s) => s.clock);
-            // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
-            clock.stop();
-            clock.elapsedTime = 0;
-            if (frameloop !== 'never') {
-                clock.start();
-                clock.elapsedTime = 0;
-            }
-            this.write({ frameloop });
-        };
-        this.getCurrentViewport = (camera = this.read((s) => s.camera), target = this.defaultTarget, size = this.read((s) => s.size)) => {
-            const { width, height, top, left } = size;
-            const aspect = width / height;
-            if (target instanceof THREE.Vector3)
-                this.tempTarget.copy(target);
-            else
-                this.tempTarget.set(...target);
-            const distance = camera.getWorldPosition(this.position).distanceTo(this.tempTarget);
-            if (is.orthographic(camera)) {
+    }
+    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: width / camera.zoom,
-                    height: height / camera.zoom,
+                    width: w,
+                    height: h,
                     top,
                     left,
-                    factor: 1,
+                    factor: width / w,
                     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 * (width / height);
-            return {
-                width: w,
-                height: h,
-                top,
-                left,
-                factor: width / w,
-                distance,
-                aspect,
             };
-        };
-    }
-    get rootStateFactory() {
-        let root = this.read((s) => s.previousStateFactory);
-        while (root && root().previousStateFactory) {
-            root = root().previousStateFactory;
-        }
-        return root || this.read;
-    }
-    init() {
-        var _a, _b;
-        if (!this.isInit) {
             const pointer = new THREE.Vector2();
-            const scene = prepare(new THREE.Scene(), this.read, this.rootStateFactory, (_a = this.parentStore) === null || _a === void 0 ? void 0 : _a.get((s) => s.sceneRef));
             let performanceTimeout;
-            this.write({
+            const setPerformanceCurrent = (current) => {
+                this.set((state) => ({ performance: Object.assign(Object.assign({}, state.performance), { current }) }));
+            };
+            this.set({
+                get: this.get.bind(this),
+                set: this.set.bind(this),
+                select: this.select.bind(this),
                 ready: false,
-                cameraRef: new NgtRef(),
-                scene,
-                sceneRef: new NgtRef(scene),
+                scene: prepare(new THREE.Scene(), { store: this }),
                 events: { priority: 1, enabled: true, connected: false },
-                invalidate: (frames = 1) => invalidate(this.read, frames),
-                advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, this.read),
+                invalidate: (frames = 1) => invalidate(this, frames),
+                advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, this),
                 legacy: false,
                 linear: false,
                 flat: false,
@@ -1168,20 +569,19 @@ class NgtStore extends NgtComponentStore {
                     max: 1,
                     debounce: 200,
                     regress: () => {
-                        this.zone.runOutsideAngular(() => {
-                            const state = this.read();
-                            // Clear timeout
-                            if (performanceTimeout)
-                                clearTimeout(performanceTimeout);
-                            // Set lower bound performance
-                            if (state.performance.current !== state.performance.min)
-                                this.setPerformanceCurrent(state.performance.min);
-                            // Go back to upper bound performance after a while unless something regresses meanwhile
-                            performanceTimeout = setTimeout(() => { var _a; return this.setPerformanceCurrent(((_a = this.read((s) => s.performance)) === null || _a === void 0 ? void 0 : _a.max) || 1); }, state.performance.debounce);
-                        });
+                        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, updateStyle: false },
+                size: { width: 0, height: 0, top: 0, left: 0 },
                 viewport: {
                     initialDpr: 0,
                     dpr: 0,
@@ -1192,9 +592,9 @@ class NgtStore extends NgtComponentStore {
                     aspect: 0,
                     distance: 0,
                     factor: 0,
-                    getCurrentViewport: this.getCurrentViewport,
+                    getCurrentViewport,
                 },
-                previousStateFactory: (_b = this.parentStore) === null || _b === void 0 ? void 0 : _b.read.bind(this.parentStore),
+                previousStore: this.parentStore,
                 internal: {
                     active: false,
                     priority: 0,
@@ -1202,128 +602,146 @@ class NgtStore extends NgtComponentStore {
                     lastEvent: null,
                     interaction: [],
                     hovered: new Map(),
-                    capturedMap: new Map(),
-                    animations: new Map(),
                     subscribers: [],
                     initialClick: [0, 0],
                     initialHits: [],
-                    subscribe: (callback, priority = 0, stateFactory = this.read, obj) => {
-                        const internal = this.read((s) => s.internal);
+                    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, stateFactory, callback, obj });
+                        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 internalOnCleanUp = this.read((s) => s.internal);
-                            if (internalOnCleanUp.subscribers) {
+                            const internal = this.get('internal');
+                            if (internal === null || internal === void 0 ? void 0 : internal.subscribers) {
                                 // Decrease manual flag if this subscription had a priority
-                                internalOnCleanUp.priority = internalOnCleanUp.priority - (priority > 0 ? 1 : 0);
+                                internal.priority = internal.priority - (priority > 0 ? 1 : 0);
                                 // Remove subscriber from list
-                                internalOnCleanUp.subscribers = internalOnCleanUp.subscribers.filter((s) => s.callback !== callback);
+                                internal.subscribers = internal.subscribers.filter((s) => s.callback !== callback);
                             }
                         };
                     },
                 },
-                setPerformanceCurrent: this.setPerformanceCurrent,
-                setEvents: this.setEvents,
-                setFrameloop: this.setFrameloop,
-                setSize: this.setSize,
-                setDpr: this.setDpr,
-                setCamera: this.setCamera,
-                addInteraction: this.addInteraction,
-                removeInteraction: this.removeInteraction,
+                setEvents: (events) => {
+                    this.set((state) => ({ events: Object.assign(Object.assign({}, 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: Object.assign(Object.assign({}, state.viewport), getCurrentViewport(camera, defaultTarget, size)),
+                    }));
+                },
+                setDpr: (dpr) => {
+                    const resolved = makeDpr(dpr, this.window);
+                    this.set((state) => ({
+                        viewport: Object.assign(Object.assign({}, 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 });
+                },
+                addInteraction: (interaction) => {
+                    this.set((state) => ({
+                        internal: Object.assign(Object.assign({}, state.internal), { interaction: [...state.internal.interaction, interaction] }),
+                    }));
+                },
+                removeInteraction: (uuid) => {
+                    this.set((state) => ({
+                        internal: Object.assign(Object.assign({}, state.internal), { interaction: state.internal.interaction.filter((interaction) => interaction.uuid !== uuid) }),
+                    }));
+                },
             });
             this.isInit = true;
+            this.resize();
         }
     }
     configure(inputs, canvasElement) {
-        var _a;
-        const { gl: glOptions, size: sizeOptions, camera: cameraOptions, raycaster: raycasterOptions, events, orthographic, lookAt, shadows, linear, flat, legacy, dpr, frameloop, performance, } = inputs;
-        const state = this.read();
-        // Set up renderer (one time only!)
+        const { gl: glOptions, size: sizeOptions, camera: cameraOptions, raycaster: raycasterOptions, events, orthographic, lookAt, shadows, linear, legacy, flat, dpr, frameloop, performance, } = inputs;
+        const state = this.get();
+        const stateToUpdate = {};
+        // setup renderer
         let gl = state.gl;
         if (!state.gl) {
-            this.write({ gl: (gl = createRenderer(glOptions, canvasElement)) });
+            stateToUpdate.gl = gl = makeDefaultRenderer(glOptions, canvasElement);
         }
-        // Set up raycaster (one time only!)
+        // setup raycaster
         let raycaster = state.raycaster;
         if (!raycaster) {
-            this.write({ raycaster: (raycaster = new THREE.Raycaster()) });
+            stateToUpdate.raycaster = raycaster = new THREE.Raycaster();
         }
-        // Set raycaster options
-        const _b = raycasterOptions || {}, { params } = _b, options = __rest(_b, ["params"]);
-        if (!is.equ(options, raycaster, shallowLoose)) {
+        // set raycaster options
+        const _a = raycasterOptions || {}, { params } = _a, options = __rest(_a, ["params"]);
+        if (!is.equ(options, raycaster, shallowLoose))
             applyProps(raycaster, Object.assign({}, options));
-        }
         if (!is.equ(params, raycaster.params, shallowLoose)) {
-            applyProps(raycaster, {
-                params: Object.assign(Object.assign({}, raycaster.params), (params || {})),
-            });
+            applyProps(raycaster, { params: Object.assign(Object.assign({}, raycaster.params), (params || {})) });
         }
-        // Create default camera (one time only!)
+        // create default camera
         if (!state.camera) {
             const isCamera = is.camera(cameraOptions);
-            let camera = isCamera ? cameraOptions : createDefaultCamera(orthographic, state.size);
+            let camera = isCamera ? cameraOptions : makeDefaultCamera(orthographic || false, state.size);
             if (!isCamera) {
-                if (cameraOptions) {
+                if (cameraOptions)
                     applyProps(camera, cameraOptions);
-                }
-                // Set position.z if position not passed in
-                if (!(cameraOptions === null || cameraOptions === void 0 ? void 0 : cameraOptions.position)) {
+                // set position.z
+                if (!(cameraOptions === null || cameraOptions === void 0 ? void 0 : cameraOptions.position))
                     camera.position.z = 5;
-                }
-                // Always look at center or passed-in lookAt by default
+                // always look at center or passed-in lookAt by default
                 if (!(cameraOptions === null || cameraOptions === void 0 ? void 0 : cameraOptions.rotation)) {
-                    if (Array.isArray(lookAt)) {
+                    if (Array.isArray(lookAt))
                         camera.lookAt(lookAt[0], lookAt[1], lookAt[2]);
-                    }
-                    else if (lookAt instanceof THREE.Vector3) {
+                    else if (lookAt instanceof THREE.Vector3)
                         camera.lookAt(lookAt);
-                    }
-                    else {
+                    else
                         camera.lookAt(0, 0, 0);
-                    }
                 }
-                // Update projection matrix after applying props
+                // update projection matrix after applyprops
                 camera.updateProjectionMatrix();
             }
             if (!is.instance(camera)) {
-                camera = prepare(camera, this.read, this.rootStateFactory, (_a = this.parentStore) === null || _a === void 0 ? void 0 : _a.get((s) => s.cameraRef));
+                camera = prepare(camera, { store: this });
             }
-            this.write({ camera });
-            this.read((s) => s.cameraRef).set(camera);
+            stateToUpdate.camera = camera;
         }
         // Set up XR (one time only!)
         if (!state.xr) {
             // Handle frame behavior in WebXR
             const handleXRFrame = (timestamp, frame) => {
-                const state = this.read();
+                const state = this.get();
                 if (state.frameloop === 'never')
                     return;
-                advance(timestamp, true, this.read, frame);
+                advance(timestamp, true, this, frame);
             };
             // Toggle render switching on session
             const handleSessionChange = () => {
-                const state = this.read();
+                const state = this.get();
                 state.gl.xr.enabled = state.gl.xr.isPresenting;
                 state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
                 if (!state.gl.xr.isPresenting)
-                    invalidate(this.read);
+                    invalidate(this);
             };
             // WebXR session manager
             const xr = {
                 connect: () => {
-                    const gl = this.read((s) => s.gl);
                     gl.xr.addEventListener('sessionstart', handleSessionChange);
                     gl.xr.addEventListener('sessionend', handleSessionChange);
                 },
                 disconnect: () => {
-                    const gl = this.read((s) => s.gl);
                     gl.xr.removeEventListener('sessionstart', handleSessionChange);
                     gl.xr.removeEventListener('sessionend', handleSessionChange);
                 },
@@ -1331,7 +749,7 @@ class NgtStore extends NgtComponentStore {
             // Subscribe to WebXR session events
             if (gl.xr)
                 xr.connect();
-            this.write({ xr });
+            stateToUpdate.xr = xr;
         }
         // Set shadowmap
         if (gl.shadowMap) {
@@ -1349,9 +767,8 @@ class NgtStore extends NgtComponentStore {
         }
         // Safely set color management if available.
         // Avoid accessing THREE.ColorManagement to play nice with older versions
-        if (is.supportColorManagement()) {
+        if (THREE.ColorManagement)
             THREE.ColorManagement.legacyMode = state.legacy;
-        }
         const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
         const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
         if (gl.outputEncoding !== outputEncoding)
@@ -1360,71 +777,482 @@ class NgtStore extends NgtComponentStore {
             gl.toneMapping = toneMapping;
         // Update color management state
         if (state.legacy !== legacy)
-            this.write({ legacy });
+            stateToUpdate.legacy = legacy;
         if (state.linear !== linear)
-            this.write({ linear });
+            stateToUpdate.linear = linear;
         if (state.flat !== flat)
-            this.write({ flat });
+            stateToUpdate.flat = flat;
         // Set gl props
         gl.setClearAlpha(0);
         gl.setPixelRatio(makeDpr(state.viewport.dpr));
-        gl.setSize(state.size.width, state.size.height, state.size.updateStyle);
+        gl.setSize(state.size.width, state.size.height);
         if (is.obj(glOptions) &&
             !(typeof glOptions === 'function') &&
-            !is.glRenderer(glOptions) &&
+            !is.renderer(glOptions) &&
             !is.equ(glOptions, gl, shallowLoose)) {
             applyProps(gl, glOptions);
         }
         // Store events internally
         if (events && !state.events.handlers) {
-            this.write({ events: events(this.read) });
+            stateToUpdate.events = events(this);
         }
+        // Check performance
+        if (performance && !is.equ(performance, state.performance, shallowLoose)) {
+            stateToUpdate.performance = Object.assign(Object.assign({}, state.performance), performance);
+        }
+        this.set(stateToUpdate);
         // Check pixelratio
-        if (dpr && state.viewport.dpr !== makeDpr(dpr)) {
+        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)) {
+        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);
-        // Check performance
-        if (performance && !is.equ(performance, state.performance, shallowLoose)) {
-            this.write((state) => ({
-                performance: Object.assign(Object.assign({}, state.performance), performance),
-            }));
-        }
-        this.write({ ready: true });
-        this.resize(this.select(this.select((s) => s.size), this.select((s) => s.viewport.dpr), defaultProjector, { debounce: true }));
-        this.invalidate(this.select((s) => s, { debounce: true }));
-        this.zone.run(() => {
-            this.isConfigured = true;
+        if (!this.get('ready')) {
+            this.set({ ready: true });
+        }
+        this.invalidate();
+    }
+    resize() {
+        const state = this.get();
+        let oldSize = state.size;
+        let oldDpr = state.viewport.dpr;
+        let oldCamera = state.camera;
+        this.hold(this.select(selectSlice(['camera', 'size', 'viewport', 'gl'])), () => {
+            const { camera, size, viewport, gl, set } = this.get();
+            // 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) {
+                updateCamera(camera, size);
+                oldCamera = camera;
+                set((state) => ({ viewport: Object.assign(Object.assign({}, state.viewport), state.viewport.getCurrentViewport(camera)) }));
+            }
         });
     }
-    onReady(cb) {
-        return this.effect(tapEffect(cb))(this.select((s) => s.ready).pipe(filter((ready) => ready)));
+    invalidate() {
+        this.hold(this.select(), () => invalidate(this));
     }
 }
-NgtStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-NgtStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtStore, decorators: [{
+NgtStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtStore, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+NgtStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtStore, decorators: [{
             type: Injectable
         }] });
 function computeInitialSize(canvas, defaultSize) {
     if (defaultSize) {
         return defaultSize;
     }
-    if (is.canvas(canvas) && canvas.parentElement) {
+    if (canvas instanceof HTMLCanvasElement && canvas.parentElement) {
         const { width, height, top, left } = canvas.parentElement.getBoundingClientRect();
         return { width, height, top, left };
     }
-    return { width: 0, height: 0, top: 0, left: 0 };
+    return { width: 0, height: 0, top: 0, left: 0 };
+}
+
+const NGT_COMPOUND_PREFIXES = new InjectionToken('NgtCompoundPrefixes');
+
+const catalogue = {};
+function extend(objects) {
+    Object.assign(catalogue, objects);
+}
+const NGT_CATALOGUE = new InjectionToken('THREE Constructors Catalogue', { factory: () => catalogue });
+
+class NgtArgs {
+    constructor() {
+        this.vcr = inject(ViewContainerRef);
+        this.template = inject(TemplateRef);
+        this.injectedArgs = [];
+        this.injected = false;
+        const commentNode = this.vcr.element.nativeElement;
+        if (commentNode['__ngt_renderer_add_comment__']) {
+            commentNode['__ngt_renderer_add_comment__']();
+            delete commentNode['__ngt_renderer_add_comment__'];
+        }
+    }
+    set args(args) {
+        if (args == null || !Array.isArray(args))
+            return;
+        if (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;
+    }
+    createView() {
+        if (this.view && !this.view.destroyed) {
+            this.view.destroy();
+        }
+        this.view = this.vcr.createEmbeddedView(this.template);
+        this.view.detectChanges();
+    }
+}
+NgtArgs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtArgs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgtArgs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtArgs, decorators: [{
+            type: Directive,
+            args: [{ selector: '[args]', standalone: true }]
+        }], ctorParameters: function () { return []; }, propDecorators: { args: [{
+                type: Input
+            }] } });
+
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+    const captureData = captures.get(obj);
+    if (captureData) {
+        captures.delete(obj);
+        // if this was the last captured object for this pointer
+        if (captures.size === 0) {
+            capturedMap.delete(pointerId);
+            captureData.target.releasePointerCapture(pointerId);
+        }
+    }
+}
+function removeInteractivity(store, object) {
+    const internal = store.get('internal');
+    // removes every trace of an object from data store
+    internal.interaction = internal.interaction.filter((o) => o !== object);
+    internal.initialHits = internal.initialHits.filter((o) => o !== object);
+    internal.hovered.forEach((value, key) => {
+        if (value.eventObject === object || value.object === object) {
+            // clear out intersects, they are outdated by now
+            internal.hovered.delete(key);
+        }
+    });
+    internal.capturedMap.forEach((captures, pointerId) => {
+        releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
+    });
+    if (store.get('previousStore')) {
+        removeInteractivity(store.get('previousStore'), object);
+    }
+}
+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) => {
+            var _a;
+            const eventName = `pointer${name}`;
+            return (_a = getLocalState(obj).handlers) === null || _a === void 0 ? void 0 : _a[eventName];
+        }));
+    }
+    function intersect(event, filter) {
+        var _a, _b, _c;
+        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 = (_a = getLocalState(eventObjects[i]).store) === null || _a === void 0 ? void 0 : _a.get();
+            if (instanceState) {
+                instanceState.raycaster.camera = undefined;
+            }
+        }
+        if (!state.previousStore) {
+            // make sure root-level pointer and ray are setup
+            (_c = (_b = state.events).compute) === null || _c === void 0 ? void 0 : _c.call(_b, event, store);
+        }
+        function handleRaycast(obj) {
+            var _a, _b;
+            const objLocalState = getLocalState(obj);
+            const objStore = objLocalState.store;
+            const objState = objStore === null || objStore === void 0 ? void 0 : 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) {
+                (_b = (_a = objState.events).compute) === null || _b === void 0 ? void 0 : _b.call(_a, event, objStore, objState.previousStore);
+                // if the camera is still undefined, we have to skip this layer entirely
+                if (objState.raycaster.camera === undefined)
+                    objState.raycaster.camera = null;
+            }
+            // intersect object by object
+            return objState.raycaster.camera ? objState.raycaster.intersectObject(obj, true) : [];
+        }
+        // collect events
+        let hits = eventObjects
+            // intersect objects
+            .flatMap(handleRaycast)
+            // sort by event priority
+            .sort((a, b) => {
+            const aState = getLocalState(a.object).store.get();
+            const bState = getLocalState(b.object).store.get();
+            if (!aState || !bState)
+                return a.distance - b.distance;
+            return bState.events.priority - aState.events.priority || a.distance - b.distance;
+        })
+            // filter out duplicates
+            .filter((item) => {
+            const id = makeId(item);
+            if (duplicates.has(id))
+                return false;
+            duplicates.add(id);
+            return true;
+        });
+        // allow custom userland intersect sort order, this likely only makes sense on the root
+        if (state.events.filter)
+            hits = state.events.filter(hits, store);
+        // bubble up the events, find the event source
+        for (const hit of hits) {
+            let eventObject = hit.object;
+            // bubble event up
+            while (eventObject) {
+                if (getLocalState(eventObject).eventCount) {
+                    intersections.push(Object.assign(Object.assign({}, hit), { eventObject }));
+                }
+                eventObject = eventObject.parent;
+            }
+        }
+        // if the interaction is captured, make all capturing targets part of the intersects
+        if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
+            for (const capturedData of state.internal.capturedMap.get(event.pointerId).values()) {
+                if (!duplicates.has(makeId(capturedData.intersection))) {
+                    intersections.push(capturedData.intersection);
+                }
+            }
+        }
+        return intersections;
+    }
+    /** handle intersections by forwarding them to handlers */
+    function handleIntersects(intersections, event, delta, callback) {
+        var _a;
+        const rootState = store.get();
+        // if anything has been found, forward it to the event listeners
+        if (intersections.length) {
+            const localState = { stopped: false };
+            for (const hit of intersections) {
+                const state = ((_a = getLocalState(hit.object).store) === null || _a === void 0 ? void 0 : _a.get()) || rootState;
+                const { raycaster, pointer, camera, internal } = state;
+                const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
+                const hasPointerCapture = (id) => { var _a, _b; return (_b = (_a = internal.capturedMap.get(id)) === null || _a === void 0 ? void 0 : _a.has(hit.eventObject)) !== null && _b !== void 0 ? _b : false; };
+                const setPointerCapture = (id) => {
+                    const captureData = { intersection: hit, target: event.target };
+                    if (internal.capturedMap.has(id)) {
+                        // if the pointerId was previously captured, we add the hit to the event capturedMap
+                        internal.capturedMap.get(id).set(hit.eventObject, captureData);
+                    }
+                    else {
+                        // if the pointerId was not previously captured, we create a Map containing the hitObject, and the hit. hitObject is used for faster access
+                        internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
+                    }
+                    // call the original event now
+                    event.target.setPointerCapture(id);
+                };
+                const releasePointerCapture = (id) => {
+                    const captures = internal.capturedMap.get(id);
+                    if (captures) {
+                        releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+                    }
+                };
+                // add native event props
+                const extractEventProps = {};
+                // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+                for (const prop in event) {
+                    const property = event[prop];
+                    // only copy over atomics, leave functions alone as these should be called as event.nativeEvent.fn()
+                    if (typeof property !== 'function') {
+                        extractEventProps[prop] = property;
+                    }
+                }
+                const raycastEvent = Object.assign(Object.assign(Object.assign({}, hit), extractEventProps), { pointer,
+                    intersections, stopped: localState.stopped, delta,
+                    unprojectedPoint, ray: raycaster.ray, camera: camera, 
+                    // Hijack stopPropagation, which just sets a flag
+                    stopPropagation() {
+                        // https://github.com/pmndrs/react-three-fiber/issues/596
+                        // Events are not allowed to stop propagation if the pointer has been captured
+                        const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId);
+                        // We only authorize stopPropagation...
+                        if (
+                        // ...if this pointer hasn't been captured
+                        !capturesForPointer ||
+                            // ... or if the hit object is capturing the pointer
+                            capturesForPointer.has(hit.eventObject)) {
+                            raycastEvent.stopped = localState.stopped = true;
+                            // Propagation is stopped, remove all other hover records
+                            // An event handler is only allowed to flush other handlers if it is hovered itself
+                            if (internal.hovered.size &&
+                                Array.from(internal.hovered.values()).find((i) => i.eventObject === hit.eventObject)) {
+                                // Objects cannot flush out higher up objects that have already caught the event
+                                const higher = intersections.slice(0, intersections.indexOf(hit));
+                                cancelPointer([...higher, hit]);
+                            }
+                        }
+                    }, 
+                    // there should be a distinction between target and currentTarget
+                    target: { hasPointerCapture, setPointerCapture, releasePointerCapture }, currentTarget: { hasPointerCapture, setPointerCapture, releasePointerCapture }, nativeEvent: event });
+                // call subscribers
+                callback(raycastEvent);
+                // event bubbling may be interupted by stopPropagation
+                if (localState.stopped === true)
+                    break;
+            }
+        }
+        return intersections;
+    }
+    function cancelPointer(intersections) {
+        var _a, _b;
+        const { internal } = store.get();
+        for (const hoveredObj of internal.hovered.values()) {
+            // When no objects were hit or the hovered object wasn't found underneath the cursor
+            // we call onPointerOut and delete the object from the hovered-elements map
+            if (!intersections.length ||
+                !intersections.find((hit) => hit.object === hoveredObj.object &&
+                    hit.index === hoveredObj.index &&
+                    hit.instanceId === hoveredObj.instanceId)) {
+                const eventObject = hoveredObj.eventObject;
+                const instance = getLocalState(eventObject);
+                const handlers = instance === null || instance === void 0 ? void 0 : instance.handlers;
+                internal.hovered.delete(makeId(hoveredObj));
+                if (instance === null || instance === void 0 ? void 0 : instance.eventCount) {
+                    // Clear out intersects, they are outdated by now
+                    const data = Object.assign(Object.assign({}, hoveredObj), { intersections });
+                    (_a = handlers === null || handlers === void 0 ? void 0 : handlers.pointerout) === null || _a === void 0 ? void 0 : _a.call(handlers, data);
+                    (_b = handlers === null || handlers === void 0 ? void 0 : handlers.pointerleave) === null || _b === void 0 ? void 0 : _b.call(handlers, data);
+                }
+            }
+        }
+    }
+    function pointerMissed(event, objects) {
+        var _a, _b;
+        for (let i = 0; i < objects.length; i++) {
+            const instance = getLocalState(objects[i]);
+            (_b = instance === null || instance === void 0 ? void 0 : (_a = instance.handlers).pointermissed) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        }
+    }
+    function handlePointer(name) {
+        // Deal with cancelation
+        switch (name) {
+            case 'pointerleave':
+            case 'pointercancel':
+                return () => cancelPointer([]);
+            case 'lostpointercapture':
+                return (event) => {
+                    const { internal } = store.get();
+                    if ('pointerId' in event && !internal.capturedMap.has(event.pointerId)) {
+                        // If the object event interface had onLostPointerCapture, we'd call it here on every
+                        // object that's getting removed.
+                        internal.capturedMap.delete(event.pointerId);
+                        cancelPointer([]);
+                    }
+                };
+        }
+        // Any other pointer goes here ...
+        return function handleEvent(event) {
+            const { onPointerMissed, internal } = store.get();
+            // prepareRay(event)
+            internal.lastEvent = event;
+            // Get fresh intersects
+            const isPointerMove = name === 'pointermove';
+            const isClickEvent = name === 'click' || name === 'contextmenu' || name === 'dblclick';
+            const filter = isPointerMove ? filterPointerEvents : undefined;
+            // const hits = patchIntersects(intersect(filter), event)
+            const hits = intersect(event, filter);
+            const delta = isClickEvent ? calculateDistance(event) : 0;
+            // Save initial coordinates on pointer-down
+            if (name === 'pointerdown') {
+                internal.initialClick = [event.offsetX, event.offsetY];
+                internal.initialHits = hits.map((hit) => hit.eventObject);
+            }
+            // If a click yields no results, pass it back to the user as a miss
+            // Missed events have to come first in order to establish user-land side-effect clean up
+            if (isClickEvent && !hits.length) {
+                if (delta <= 2) {
+                    pointerMissed(event, internal.interaction);
+                    if (onPointerMissed)
+                        onPointerMissed(event);
+                }
+            }
+            // Take care of unhover
+            if (isPointerMove)
+                cancelPointer(hits);
+            function onIntersect(data) {
+                var _a, _b, _c;
+                const eventObject = data.eventObject;
+                const instance = getLocalState(eventObject);
+                const handlers = instance === null || instance === void 0 ? void 0 : instance.handlers;
+                // Check presence of handlers
+                if (!(instance === null || instance === void 0 ? void 0 : instance.eventCount))
+                    return;
+                if (isPointerMove) {
+                    // Move event ...
+                    if ((handlers === null || handlers === void 0 ? void 0 : handlers.pointerover) ||
+                        (handlers === null || handlers === void 0 ? void 0 : handlers.pointerenter) ||
+                        (handlers === null || handlers === void 0 ? void 0 : handlers.pointerout) ||
+                        (handlers === null || handlers === void 0 ? void 0 : handlers.pointerleave)) {
+                        // When enter or out is present take care of hover-state
+                        const id = makeId(data);
+                        const hoveredItem = internal.hovered.get(id);
+                        if (!hoveredItem) {
+                            // If the object wasn't previously hovered, book it and call its handler
+                            internal.hovered.set(id, data);
+                            (_a = handlers.pointerover) === null || _a === void 0 ? void 0 : _a.call(handlers, data);
+                            (_b = handlers.pointerenter) === null || _b === void 0 ? void 0 : _b.call(handlers, data);
+                        }
+                        else if (hoveredItem.stopped) {
+                            // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
+                            data.stopPropagation();
+                        }
+                    }
+                    // Call mouse move
+                    (_c = handlers === null || handlers === void 0 ? void 0 : handlers.pointermove) === null || _c === void 0 ? void 0 : _c.call(handlers, data);
+                }
+                else {
+                    // All other events ...
+                    const handler = handlers === null || handlers === void 0 ? void 0 : handlers[name];
+                    if (handler) {
+                        // Forward all events back to their respective handlers with the exception of click events,
+                        // which must use the initial target
+                        if (!isClickEvent || internal.initialHits.includes(eventObject)) {
+                            // Missed events have to come first
+                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
+                            // Now call the handler
+                            handler(data);
+                        }
+                    }
+                    else {
+                        // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
+                        if (isClickEvent && internal.initialHits.includes(eventObject)) {
+                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
+                        }
+                    }
+                }
+            }
+            handleIntersects(hits, event, delta, onIntersect);
+        };
+    }
+    return { handlePointer };
 }
 
-function mutate(object, value, paths = []) {
+function attach(object, value, paths = []) {
     const [base, ...remaining] = paths;
     if (!base)
         return;
@@ -1432,755 +1260,1152 @@ function mutate(object, value, paths = []) {
         applyProps(object, { [base]: value });
     }
     else {
-        // assign an empty object in order to spread object if undefined
         assignEmpty(object, base);
-        // recursion
-        mutate(object[base], value, remaining);
+        attach(object[base], value, remaining);
+    }
+}
+function detach(parent, child, attachProp) {
+    const childLocalState = getLocalState(child);
+    if (Array.isArray(attachProp)) {
+        attach(parent, childLocalState.previousAttach, attachProp);
+    }
+    else {
+        childLocalState.previousAttach();
     }
 }
 function assignEmpty(obj, base) {
-    if (
-    // @ts-ignore
-    (!Object.hasOwn(obj, base) && Reflect && !!Reflect.has && !Reflect.has(obj, base)) ||
-        obj[base] === undefined) {
+    if ((!Object.hasOwn(obj, base) && Reflect && !!Reflect.has && !Reflect.has(obj, base)) || obj[base] === undefined) {
         obj[base] = {};
     }
 }
 
-const NGT_PROXY_INSTANCE = Symbol.for('__ngt__proxy__instance__');
-const NGT_INSTANCE_REF_FACTORY = new InjectionToken('NgtInstance[instanceRef] factory');
-function provideInstanceRef(ctor, factory) {
-    return {
-        provide: NGT_INSTANCE_REF_FACTORY,
-        useFactory: (instance) => {
-            if (factory) {
-                return () => factory(instance);
+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);
+    if (!pLS || !cLS) {
+        throw new Error(`[NGT] THREE instances need to be prepared with local state.`);
+    }
+    // whether the child is added to the parent with parent.add()
+    let added = false;
+    // assign store on child if not already exist
+    if (!cLS.store) {
+        cLS.store = pLS.store;
+    }
+    if (cLS.attach) {
+        const attachProp = cLS.attach;
+        if (typeof attachProp === 'function') {
+            const attachCleanUp = attachProp(parent, child, cLS.store);
+            if (attachCleanUp)
+                cLS.previousAttach = attachCleanUp;
+        }
+        else {
+            // we skip attach none if set explicitly
+            if (attachProp[0] === 'none') {
+                invalidateInstance(child);
+                return;
             }
-            return () => instance['instanceRef'] || instance['instance']['instanceRef'];
-        },
-        deps: [ctor],
+            // handle material array
+            if (attachProp[0] === 'material' &&
+                attachProp[1] &&
+                typeof Number(attachProp[1]) === 'number' &&
+                is.material(child) &&
+                !Array.isArray(parent['material'])) {
+                parent['material'] = [];
+            }
+            // attach
+            if (cLS.isRaw) {
+                cLS.parent = parent;
+                // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
+                if (child.__ngt_renderer__[10 /* NgtRendererClassId.rawValue */] === undefined)
+                    return;
+                attach(parent, child.__ngt_renderer__[10 /* NgtRendererClassId.rawValue */], attachProp);
+            }
+            else {
+                attach(parent, child, attachProp);
+            }
+            // save value
+            cLS.previousAttach = attachProp.reduce((value, property) => value[property], parent);
+        }
+    }
+    else if (is.object3D(parent) && is.object3D(child)) {
+        parent.add(child);
+        added = true;
+    }
+    pLS.add(child, added ? 'objects' : 'nonObjects');
+    cLS.parent = parent;
+    if (cLS.afterAttach) {
+        cLS.afterAttach.emit({ parent, node: child });
+    }
+    invalidateInstance(child);
+    invalidateInstance(parent);
+}
+function removeThreeChild(parent, child, dispose) {
+    var _a;
+    const pLS = getLocalState(parent);
+    const cLS = getLocalState(child);
+    // clear parent ref
+    cLS.parent = null;
+    // remove child from parent
+    if (pLS.objects) {
+        pLS.remove(child, 'objects');
+    }
+    if (pLS.nonObjects) {
+        pLS.remove(child, 'nonObjects');
+    }
+    if (cLS.attach) {
+        detach(parent, child, cLS.attach);
+    }
+    else if (is.object3D(parent) && is.object3D(child)) {
+        parent.remove(child);
+        removeInteractivity(cLS.store || pLS.store, child);
+    }
+    const isPrimitive = cLS.primitive;
+    if (!isPrimitive) {
+        removeThreeRecursive(((_a = cLS.objects) === null || _a === void 0 ? void 0 : _a.value) || [], child, !!dispose);
+        removeThreeRecursive(child.childre, child, !!dispose);
+    }
+    // dispose
+    if (child['dispose'] && !is.scene(child)) {
+        queueMicrotask(() => child['dispose']());
+    }
+    invalidateInstance(parent);
+}
+function removeThreeRecursive(array, parent, dispose) {
+    if (array)
+        [...array].forEach((child) => removeThreeChild(parent, child, dispose));
+}
+function processThreeEvent(instance, priority, eventName, callback, cdr) {
+    var _a;
+    const lS = getLocalState(instance);
+    if (eventName === SPECIAL_EVENTS.BEFORE_RENDER) {
+        return lS.store
+            .get('internal')
+            .subscribe((state) => callback({ state, object: instance }), priority || lS.priority || 0);
+    }
+    if (eventName === SPECIAL_EVENTS.AFTER_UPDATE || eventName === SPECIAL_EVENTS.AFTER_ATTACH) {
+        if (!lS[eventName]) {
+            lS[eventName] = new EventEmitter();
+        }
+        const sub = (_a = lS[eventName]) === null || _a === void 0 ? void 0 : _a.subscribe(callback);
+        return sub.unsubscribe.bind(sub);
+    }
+    if (!lS.handlers) {
+        lS.handlers = {};
+    }
+    // try to get the previous handler. compound might have one, the THREE object might also have one with the same name
+    const previousHandler = lS.handlers[eventName];
+    // readjust the callback
+    const updatedCallback = (event) => {
+        if (previousHandler)
+            previousHandler(event);
+        callback(event);
+    };
+    lS.handlers = Object.assign(Object.assign({}, lS.handlers), { [eventName]: eventToHandler(updatedCallback, cdr) });
+    // increment the count everytime
+    lS.eventCount += 1;
+    // but only add the instance (target) to the interaction array (so that it is handled by the EventManager with Raycast)
+    // the first time eventCount is incremented
+    if (lS.eventCount === 1 && instance['raycast']) {
+        lS.store.get('addInteraction')(instance);
+    }
+    // clean up the event listener by removing the target from the interaction array
+    return () => {
+        const localState = getLocalState(instance);
+        if (localState && localState.eventCount) {
+            localState.store.get('removeInteraction')(instance['uuid']);
+        }
     };
 }
-function injectInstanceRef(options = {}) {
-    return inject(NGT_INSTANCE_REF_FACTORY, options);
+function eventToHandler(callback, cdr) {
+    return (event) => {
+        callback(event);
+        cdr.detectChanges();
+    };
 }
-function injectInstance(options = {}) {
-    return inject(NgtInstance, options);
+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) => {
+        return part.charAt(0).toUpperCase() + part.slice(1);
+    });
+    // join the parts together to create the final PascalCase string
+    return pascalParts.join('');
 }
-const supportedEvents = [
-    'click',
-    'contextmenu',
-    'dblclick',
-    'pointerup',
-    'pointerdown',
-    'pointerover',
-    'pointerout',
-    'pointerenter',
-    'pointerleave',
-    'pointermove',
-    'pointermissed',
-    'pointercancel',
-    'wheel',
-];
-class NgtInstance extends NgtComponentStore {
-    constructor() {
-        super(...arguments);
-        this.priority = 0;
-        this.click = new EventEmitter();
-        this.contextmenu = new EventEmitter();
-        this.dblclick = new EventEmitter();
-        this.pointerup = new EventEmitter();
-        this.pointerdown = new EventEmitter();
-        this.pointerover = new EventEmitter();
-        this.pointerout = new EventEmitter();
-        this.pointerenter = new EventEmitter();
-        this.pointerleave = new EventEmitter();
-        this.pointermove = new EventEmitter();
-        this.pointermissed = new EventEmitter();
-        this.pointercancel = new EventEmitter();
-        this.wheel = new EventEmitter();
-        this.zone = inject(NgZone);
-        this.store = inject(NgtStore);
-        this.parentRef = injectInstanceRef({ skipSelf: true, optional: true });
-        this._isRaw = false;
-        this.hasEmittedAlready = false;
-        this.instanceReady = this.effect(tapEffect(() => {
-            var _a, _b;
-            this.handleEvents();
-            let attachToParentSubscription;
-            if (this.parentRef) {
-                attachToParentSubscription = this.attachToParent(this.parent.pipe(filter((parent) => !!parent)));
-                const { noAttach, skipWrapper } = this.read();
-                if (!noAttach && !skipWrapper) {
-                    const parentInstanceNode = getInstanceLocalState((_b = (_a = getInstanceLocalState(this.instanceValue)) === null || _a === void 0 ? void 0 : _a.parentRef) === null || _b === void 0 ? void 0 : _b.value);
-                    if (parentInstanceNode) {
-                        const collections = is.object3d(this.instanceValue)
-                            ? parentInstanceNode.objectsRefs
-                            : parentInstanceNode.instancesRefs;
-                        collections.set((s) => [...s, this.instanceRef]);
-                    }
-                }
-            }
-            let beforeRenderCleanUp;
-            if (this.beforeRender && is.object3d(this.instanceValue) && is.object3d(this.proxyInstance)) {
-                beforeRenderCleanUp = this.store
-                    .read((s) => s.internal)
-                    .subscribe((state, object) => this.beforeRender(state, object), this.priority, this.store.read, this.proxyInstance);
-            }
-            if (this.readyCallback)
-                this.readyCallback(this.instanceValue);
-            return () => {
-                beforeRenderCleanUp === null || beforeRenderCleanUp === void 0 ? void 0 : beforeRenderCleanUp();
-                attachToParentSubscription === null || attachToParentSubscription === void 0 ? void 0 : attachToParentSubscription.unsubscribe();
-            };
-        }));
-        this.handleEvents = this.effect(tapEffect(() => {
-            var _a;
-            if (this.instanceValue && is.object3d(this.instanceValue)) {
-                const observedEvents = supportedEvents.reduce((result, event) => {
-                    const controllerEvent = this[event].observed ? this[event] : null;
-                    if (controllerEvent) {
-                        result.handlers[event] = this.eventNameToHandler(controllerEvent);
-                        result.eventCount += 1;
-                    }
-                    return result;
-                }, { handlers: {}, eventCount: 0 });
-                // patch __ngt__ with events
-                applyProps(this.__ngt__, observedEvents);
-                // add as an interaction if there are events observed
-                if (observedEvents.eventCount > 0) {
-                    (_a = getInstanceLocalState(this.instanceValue)) === null || _a === void 0 ? void 0 : _a.rootFactory().addInteraction(this.instanceValue);
-                }
-            }
-            return () => {
-                var _a;
-                if (is.object3d(this.instanceValue) && this.__ngt__.eventCount > 0) {
-                    (_a = getInstanceLocalState(this.instanceValue)) === null || _a === void 0 ? void 0 : _a.rootFactory().removeInteraction(this.instanceValue.uuid);
-                }
+
+class NgtRendererStore {
+    constructor(root) {
+        this.root = root;
+        this.comments = [];
+        this.portals = [];
+    }
+    createNode(type, node) {
+        const state = [
+            type,
+            null,
+            [],
+            false,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+        ];
+        const rendererNode = Object.assign(node, { __ngt_renderer__: state });
+        if (state[0 /* NgtRendererClassId.type */] === 'comment') {
+            state[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode).injector;
+            // we attach an arrow function to the Comment node
+            // In our directives, we can call this function to then start tracking the RendererNode
+            rendererNode['__ngt_renderer_add_comment__'] = () => {
+                this.comments.push(rendererNode);
             };
-        }));
-        this.attachToParent = this.effect(tap(() => {
-            var _a, _b, _c, _d;
-            const attach = this.read((s) => s.attach);
-            let parentInstanceRef = (_a = this.__ngt__) === null || _a === void 0 ? void 0 : _a.parentRef;
-            // if no parentInstance, try re-run the factory due to late init
-            if (!parentInstanceRef || !parentInstanceRef.value) {
-                // return early if failed to retrieve
-                if (!((_b = this.parent) === null || _b === void 0 ? void 0 : _b.value))
-                    return;
-                // reassign on instance internal state
-                if (this.__ngt__) {
-                    this.__ngt__.parentRef = this.parent;
-                }
-                parentInstanceRef = this.parent;
-            }
-            if (typeof attach === 'function') {
-                const attachCleanUp = attach(parentInstanceRef, this.instanceRef, this.store.read);
-                if (attachCleanUp) {
-                    this.__ngt__.attach = attachCleanUp;
-                }
+            return rendererNode;
+        }
+        if (state[0 /* NgtRendererClassId.type */] === 'portal') {
+            state[13 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode).injector;
+            this.portals.push(rendererNode);
+            return rendererNode;
+        }
+        if (state[0 /* NgtRendererClassId.type */] === 'compound') {
+            state[7 /* NgtRendererClassId.queueOps */] = new Set();
+            state[8 /* NgtRendererClassId.attributes */] = {};
+            state[9 /* NgtRendererClassId.properties */] = {};
+            return rendererNode;
+        }
+        return rendererNode;
+    }
+    setParent(node, parent) {
+        if (!node.__ngt_renderer__[1 /* NgtRendererClassId.parent */]) {
+            node.__ngt_renderer__[1 /* NgtRendererClassId.parent */] = parent;
+        }
+    }
+    addChild(node, child) {
+        if (!node.__ngt_renderer__[2 /* NgtRendererClassId.children */].includes(child)) {
+            node.__ngt_renderer__[2 /* NgtRendererClassId.children */].push(child);
+        }
+    }
+    removeChild(node, child) {
+        const index = node.__ngt_renderer__[2 /* NgtRendererClassId.children */].findIndex((c) => child === c);
+        if (index >= 0) {
+            node.__ngt_renderer__[2 /* NgtRendererClassId.children */].splice(index, 1);
+        }
+    }
+    setCompound(compound, instance) {
+        compound.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] = instance;
+        const attributes = Object.keys(compound.__ngt_renderer__[8 /* NgtRendererClassId.attributes */]);
+        const properties = Object.keys(compound.__ngt_renderer__[9 /* NgtRendererClassId.properties */]);
+        if (attributes.length) {
+            for (const key of attributes) {
+                this.applyAttribute(instance, key, compound.__ngt_renderer__[8 /* NgtRendererClassId.attributes */][key]);
             }
-            else {
-                const propertyToAttach = [...attach];
-                // if propertyToAttach is empty
-                if (propertyToAttach.length === 0) {
-                    // this might be the case where we are attaching an object3D to the parent object3D
-                    if (is.object3d(this.instanceValue) &&
-                        is.object3d(this.proxyInstance) &&
-                        is.object3d((_c = this.parent) === null || _c === void 0 ? void 0 : _c.value)) {
-                        (_d = this.parent) === null || _d === void 0 ? void 0 : _d.value.add(this.proxyInstance);
-                    }
-                }
-                else {
-                    // array material handling
-                    if (propertyToAttach[0] === 'material' &&
-                        propertyToAttach[1] &&
-                        typeof Number(propertyToAttach[1]) === 'number' &&
-                        is.material(this.instanceValue)) {
-                        if (!Array.isArray(parentInstanceRef.value.material)) {
-                            parentInstanceRef.value.material = [];
-                        }
-                    }
-                    // retrieve the current value on the parentInstance, so we can reset it later
-                    if (this.__ngt__) {
-                        this.__ngt__.attachValue = propertyToAttach.reduce((value, property) => value[property], parentInstanceRef.value);
-                    }
-                    // attach the instance value on the parent
-                    mutate(parentInstanceRef.value, this.proxyInstance, propertyToAttach);
-                }
-                // validate on the instance
-                invalidateInstance(this.instanceValue);
-                // validate on the parent
-                if (getInstanceLocalState(parentInstanceRef.value)) {
-                    invalidateInstance(parentInstanceRef.value);
-                }
-                // save the attach
-                if (this.__ngt__) {
-                    this.__ngt__.attach = propertyToAttach;
-                }
-                this.write({ attach: propertyToAttach });
+        }
+        if (properties.length) {
+            for (const key of properties) {
+                this.applyProperty(instance, key, compound.__ngt_renderer__[9 /* NgtRendererClassId.properties */][key]);
             }
-        }));
+        }
+        this.executeOperation(compound);
     }
-    set ref(instance) {
-        this.write({ instanceRef: is.ref(instance) ? instance : new NgtRef(instance) });
+    queueOperation(node, op) {
+        node.__ngt_renderer__[7 /* NgtRendererClassId.queueOps */].add(op);
     }
-    set skipWrapper(skipWrapper) {
-        this.write({ skipWrapper });
-        this.write({ skipWrapperExplicit: true });
+    executeOperation(node, type = 'op') {
+        var _a;
+        if ((_a = node.__ngt_renderer__[7 /* NgtRendererClassId.queueOps */]) === null || _a === void 0 ? void 0 : _a.size) {
+            node.__ngt_renderer__[7 /* NgtRendererClassId.queueOps */].forEach((op) => {
+                if (op[0 /* NgtQueueOpClassId.type */] === type) {
+                    op[1 /* NgtQueueOpClassId.op */]();
+                    node.__ngt_renderer__[7 /* NgtRendererClassId.queueOps */].delete(op);
+                }
+            });
+        }
     }
-    set skipInit(skipInit) {
-        this.write({ skipInit });
-        this.write({ skipInitExplicit: true });
+    processPortalContainer(portal) {
+        const injectorFactory = portal.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */];
+        const injector = injectorFactory === null || injectorFactory === void 0 ? void 0 : injectorFactory();
+        if (!injector)
+            return;
+        const portalStore = injector.get(NgtStore, null);
+        if (!portalStore)
+            return;
+        const portalContainer = portalStore.get('scene');
+        if (!portalContainer)
+            return;
+        portal.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */] = this.createNode('three', portalContainer);
     }
-    set noAttach(noAttach) {
-        this.write({ noAttach });
-        this.write({ noAttachExplicit: true });
+    applyAttribute(node, name, value) {
+        if (node.__ngt_renderer__[3 /* 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
+            let priority = Number(value);
+            if (isNaN(priority)) {
+                priority = 0;
+                console.warn(`[NGT] "priority" is an invalid number, default to 0`);
+            }
+            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
+            node.__ngt_renderer__[4 /* NgtRendererClassId.compound */] = [value === '' || value === 'first', {}];
+            return;
+        }
+        if (name === SPECIAL_PROPERTIES.ATTACH) {
+            // handle attach as tring
+            const paths = value.split('.');
+            if (paths.length)
+                getLocalState(node).attach = paths;
+            return;
+        }
+        if (name === SPECIAL_PROPERTIES.VALUE) {
+            // TODO  the last time we tried this here, this didn't work
+            // coercion
+            let maybeCoerced = value;
+            if (maybeCoerced === '' || maybeCoerced === 'true' || maybeCoerced === 'false') {
+                maybeCoerced = maybeCoerced === 'true' || maybeCoerced === '';
+            }
+            else if (!isNaN(Number(maybeCoerced))) {
+                maybeCoerced = Number(maybeCoerced);
+            }
+            node.__ngt_renderer__[10 /* NgtRendererClassId.rawValue */] = maybeCoerced;
+            return;
+        }
+        applyProps(node, { [name]: value });
     }
-    set attach(value) {
-        if (value) {
-            const attach = typeof value === 'function'
-                ? value
-                : Array.isArray(value)
-                    ? value.map((item) => (typeof item === 'number' ? item.toString() : item))
-                    : [value];
-            this.write({ attach, attachExplicit: true });
+    applyProperty(node, name, value) {
+        if (node.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */])
+            return;
+        // setup [ref] here
+        if (name === SPECIAL_PROPERTIES.REF && is.ref(value)) {
+            node.__ngt_renderer__[11 /* NgtRendererClassId.ref */] = value;
+            value.nativeElement = node;
+            return;
+        }
+        const parent = getLocalState(node).parent || node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
+        // rawValue
+        if (getLocalState(node).isRaw && name === SPECIAL_PROPERTIES.VALUE) {
+            node.__ngt_renderer__[10 /* NgtRendererClassId.rawValue */] = value;
+            attachThreeChild(parent, node);
+            return;
         }
+        // attach
+        if (name === SPECIAL_PROPERTIES.ATTACH) {
+            getLocalState(node).attach = Array.isArray(value) ? value.map((v) => v.toString()) : value;
+            attachThreeChild(parent, node);
+            return;
+        }
+        const compound = node.__ngt_renderer__[4 /* NgtRendererClassId.compound */];
+        if ((compound === null || compound === void 0 ? void 0 : compound[1 /* NgtCompoundClassId.props */]) &&
+            name in compound[1 /* NgtCompoundClassId.props */] &&
+            !compound[0 /* NgtCompoundClassId.applyFirst */]) {
+            value = compound[1 /* NgtCompoundClassId.props */][name];
+        }
+        applyProps(node, { [name]: value });
     }
-    set isRaw(val) {
-        this._isRaw = val;
+    isCompound(name) {
+        return this.root.compoundPrefixes.some((prefix) => name.startsWith(prefix));
     }
-    initialize() {
-        super.initialize();
-        this.write({
-            instanceRef: new NgtRef(null),
-            attach: [],
-            noAttach: false,
-            skipWrapper: false,
-            skipInit: false,
-        });
+    get rootScene() {
+        return this.root.store.get('scene');
     }
-    ngOnInit() {
-        this.zone.runOutsideAngular(() => {
-            this.store.onReady(() => {
-                this.instanceReady(this.instanceRef.pipe(filter((instance) => !!instance)));
-            });
-        });
+    get rootCdr() {
+        return this.root.cdr;
     }
-    get instanceRef() {
-        return this.read((s) => s.instanceRef);
+    getClosestParentWithInstance(node) {
+        let parent = node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
+        while (parent && parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'three') {
+            parent = parent.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */]
+                ? parent.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */]
+                : parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
+        }
+        return parent;
     }
-    get instanceValue() {
-        var _a;
-        if (!this.instanceRef.value)
-            return this.instanceRef.value;
-        return this._isRaw ? (_a = this.instanceRef.value) === null || _a === void 0 ? void 0 : _a.valueOf() : this.instanceRef.value;
+    getClosestParentWithCompound(node) {
+        if (node.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */]) {
+            return node.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */];
+        }
+        let parent = node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
+        if (parent &&
+            parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
+            !parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {
+            return parent;
+        }
+        while (parent &&
+            (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' ||
+                !parent.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */] ||
+                parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'compound')) {
+            parent = parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
+        }
+        if (!parent)
+            return;
+        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' &&
+            parent.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */]) {
+            return parent.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */];
+        }
+        if (!parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {
+            return parent;
+        }
+        return null;
     }
-    get proxyInstance() {
+    getCreationState() {
         var _a;
-        return (_a = this.instanceValue) === null || _a === void 0 ? void 0 : _a[NGT_PROXY_INSTANCE];
+        const injectedArgs = ((_a = this.firstNonInjectedDirective(NgtArgs)) === null || _a === void 0 ? void 0 : _a.args) || [];
+        const store = this.tryGetPortalStore();
+        return { injectedArgs, store };
     }
-    get __ngt__() {
-        return getInstanceLocalState(this._isRaw ? this.instanceRef.value : this.instanceValue);
+    destroy(node, parent) {
+        const state = node.__ngt_renderer__;
+        if (state[3 /* NgtRendererClassId.destroyed */])
+            return;
+        if (state[0 /* NgtRendererClassId.type */] === 'three') {
+            state[4 /* NgtRendererClassId.compound */] = undefined;
+            state[5 /* NgtRendererClassId.compoundParent */] = undefined;
+            const localState = getLocalState(node);
+            if (localState.objects) {
+                localState.objects.value.forEach((obj) => this.destroy(obj, parent));
+                localState.objects.complete();
+            }
+            if (localState.nonObjects) {
+                localState.nonObjects.value.forEach((obj) => this.destroy(obj, parent));
+                localState.nonObjects.complete();
+            }
+            if (localState.afterUpdate)
+                localState.afterUpdate.complete();
+            if (localState.afterAttach)
+                localState.afterAttach.complete();
+            delete localState['objects'];
+            delete localState['nonObjects'];
+            delete localState['add'];
+            delete localState['remove'];
+            delete localState['afterUpdate'];
+            delete localState['afterAttach'];
+            delete localState['store'];
+            delete localState['handlers'];
+            if (!localState.primitive) {
+                delete node['__ngt__'];
+            }
+        }
+        if (state[0 /* NgtRendererClassId.type */] === 'comment') {
+            state[13 /* NgtRendererClassId.injectorFactory */] = null;
+            delete node['__ngt_renderer_add_comment__'];
+            const index = this.comments.findIndex((comment) => comment === node);
+            if (index > -1) {
+                this.comments.splice(index, 1);
+            }
+        }
+        if (state[0 /* NgtRendererClassId.type */] === 'portal') {
+            state[13 /* NgtRendererClassId.injectorFactory */] = null;
+            const index = this.portals.findIndex((portal) => portal === node);
+            if (index > -1) {
+                this.portals.splice(index, 1);
+            }
+        }
+        if (state[0 /* NgtRendererClassId.type */] === 'compound') {
+            state[6 /* NgtRendererClassId.compounded */] = undefined;
+            state[8 /* NgtRendererClassId.attributes */] = null;
+            state[9 /* NgtRendererClassId.properties */] = null;
+            this.executeOperation(node, 'cleanUp');
+            state[7 /* NgtRendererClassId.queueOps */].clear();
+            state[7 /* NgtRendererClassId.queueOps */] = null;
+        }
+        if (state[11 /* NgtRendererClassId.ref */]) {
+            // nullify ref
+            state[11 /* NgtRendererClassId.ref */].nativeElement = null;
+            state[11 /* NgtRendererClassId.ref */] = undefined;
+        }
+        // nullify parent
+        state[1 /* NgtRendererClassId.parent */] = null;
+        for (const renderChild of state[2 /* NgtRendererClassId.children */] || []) {
+            if (renderChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' && parent) {
+                removeThreeChild(parent, renderChild, true);
+            }
+            this.destroy(renderChild, parent);
+        }
+        state[2 /* NgtRendererClassId.children */] = [];
+        state[3 /* NgtRendererClassId.destroyed */] = true;
+        if (parent) {
+            this.removeChild(parent, node);
+        }
     }
-    get parent() {
-        var _a;
-        return (_a = this.parentRef) === null || _a === void 0 ? void 0 : _a.call(this);
+    firstNonInjectedDirective(dir) {
+        let directive;
+        let i = this.comments.length - 1;
+        while (i >= 0) {
+            const comment = this.comments[i];
+            if (comment.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */]) {
+                i--;
+                continue;
+            }
+            const injector = comment.__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */]();
+            if (!injector) {
+                i--;
+                continue;
+            }
+            const instance = injector.get(dir, null);
+            if (instance && instance.validate()) {
+                directive = instance;
+                break;
+            }
+            i--;
+        }
+        return directive;
+    }
+    tryGetPortalStore() {
+        let store;
+        // 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 injector = this.portals[i].__ngt_renderer__[13 /* NgtRendererClassId.injectorFactory */]();
+            if (!injector) {
+                i--;
+                continue;
+            }
+            const instance = injector.get(NgtStore, null);
+            if (instance) {
+                store = instance;
+                break;
+            }
+            i--;
+        }
+        return store || this.root.store;
     }
-    ngOnDestroy() {
-        this.zone.runOutsideAngular(() => {
-            this.destroy();
+}
+
+class NgtRendererFactory {
+    constructor() {
+        this.domRendererFactory = inject(ɵDomRendererFactory2);
+        this.cdr = inject(ChangeDetectorRef);
+        this.store = inject(NgtStore);
+        this.catalogue = inject(NGT_CATALOGUE);
+        this.compoundPrefixes = inject(NGT_COMPOUND_PREFIXES);
+        this.rendererStore = new NgtRendererStore({
+            store: this.store,
+            cdr: this.cdr,
+            compoundPrefixes: this.compoundPrefixes,
         });
-        super.ngOnDestroy();
     }
-    destroy() {
-        if (this.instanceValue) {
-            if (is.object3d(this.instanceValue)) {
-                const parentInstance = this.parent;
-                if (parentInstance && is.object3d(parentInstance.value)) {
-                    removeInteractivity(this.__ngt__.stateFactory.bind(this.__ngt__), this.instanceValue);
-                    parentInstance.value.remove(this.instanceValue);
-                    invalidateInstance(parentInstance.value);
-                }
-                if (this.instanceValue.clear != null) {
-                    this.instanceValue.clear();
+    createRenderer(hostElement, type) {
+        // TODO  we might need to check on "type" to return DomRenderer for that particular type to support HTML
+        if (!this.renderer) {
+            const domRenderer = this.domRendererFactory.createRenderer(hostElement, type);
+            this.renderer = new NgtRenderer(domRenderer, this.rendererStore, this.catalogue);
+        }
+        return this.renderer;
+    }
+}
+NgtRendererFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NgtRendererFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRendererFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRendererFactory, decorators: [{
+            type: Injectable
+        }] });
+class NgtRenderer {
+    constructor(domRenderer, store, catalogue) {
+        this.domRenderer = domRenderer;
+        this.store = store;
+        this.catalogue = catalogue;
+        this.first = false;
+        this.createText = this.domRenderer.createText.bind(this.domRenderer);
+        this.destroy = this.domRenderer.destroy.bind(this.domRenderer);
+        this.destroyNode = null;
+        this.selectRootElement = this.domRenderer.selectRootElement.bind(this.domRenderer);
+        this.nextSibling = this.domRenderer.nextSibling.bind(this.domRenderer);
+        this.removeAttribute = this.domRenderer.removeAttribute.bind(this.domRenderer);
+        this.addClass = this.domRenderer.addClass.bind(this.domRenderer);
+        this.removeClass = this.domRenderer.removeClass.bind(this.domRenderer);
+        this.setStyle = this.domRenderer.setStyle.bind(this.domRenderer);
+        this.removeStyle = this.domRenderer.removeStyle.bind(this.domRenderer);
+        this.setValue = this.domRenderer.setValue.bind(this.domRenderer);
+    }
+    createElement(name, namespace) {
+        const element = this.domRenderer.createElement(name, namespace);
+        // on first pass, we return the Root Scene as the root node
+        if (!this.first) {
+            this.first = true;
+            return this.store.createNode('three', this.store.rootScene);
+        }
+        // handle compound
+        if (this.store.isCompound(name))
+            return this.store.createNode('compound', element);
+        // handle portal
+        if (name === SPECIAL_DOM_TAG.NGT_PORTAL) {
+            return this.store.createNode('portal', element);
+        }
+        // handle raw value
+        if (name === SPECIAL_DOM_TAG.NGT_VALUE) {
+            return this.store.createNode('three', Object.assign({ __ngt_renderer__: { rawValue: undefined } }, { __ngt__: { isRaw: true } }));
+        }
+        const { injectedArgs, store } = this.store.getCreationState();
+        // handle primitive
+        if (name === SPECIAL_DOM_TAG.NGT_PRIMITIVE) {
+            if (!injectedArgs[0])
+                throw new Error(`[NGT] ngt-primitive without args is invalid`);
+            const object = injectedArgs[0];
+            let localState = getLocalState(object);
+            if (!Object.keys(localState).length) {
+                prepare(object, { store, args: injectedArgs, primitive: true });
+                localState = getLocalState(object);
+            }
+            if (!localState.store)
+                localState.store = store;
+            return this.store.createNode('three', object);
+        }
+        const threeTag = name.startsWith('ngt') ? name.slice(4) : name;
+        const threeName = kebabToPascal(threeTag);
+        const threeTarget = this.catalogue[threeName];
+        // we have the THREE constructor here, handle it
+        if (threeTarget) {
+            const instance = prepare(new threeTarget(...injectedArgs), { store, args: injectedArgs });
+            const node = this.store.createNode('three', instance);
+            const localState = getLocalState(instance);
+            if (is.geometry(instance)) {
+                localState.attach = ['geometry'];
+            }
+            else if (is.material(instance)) {
+                localState.attach = ['material'];
+            }
+            return node;
+        }
+        return this.store.createNode('dom', element);
+    }
+    createComment(value) {
+        const comment = this.domRenderer.createComment(value);
+        return this.store.createNode('comment', comment);
+    }
+    appendChild(parent, newChild) {
+        // TODO: just ignore text node for now
+        if (newChild instanceof Text)
+            return;
+        if (newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'comment') {
+            this.store.setParent(newChild, parent);
+            return;
+        }
+        this.store.setParent(newChild, parent);
+        this.store.addChild(parent, newChild);
+        // if new chlid is a portal
+        if (newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal') {
+            this.store.processPortalContainer(newChild);
+            if (newChild.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */]) {
+                this.appendChild(parent, newChild.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */]);
+            }
+            return;
+        }
+        // if parent is a portal
+        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal') {
+            this.store.processPortalContainer(parent);
+            if (parent.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */]) {
+                this.appendChild(parent.__ngt_renderer__[12 /* NgtRendererClassId.portalContainer */], newChild);
+            }
+            return;
+        }
+        // if both are three instances, straightforward case
+        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' &&
+            newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+            attachThreeChild(parent, newChild);
+            // here, we handle the special case of if the parent has a compoundParent, which means this child is part of a compound parent template
+            if (!newChild.__ngt_renderer__[4 /* NgtRendererClassId.compound */])
+                return;
+            const closestGrandparentWithCompound = this.store.getClosestParentWithCompound(parent);
+            if (!closestGrandparentWithCompound)
+                return;
+            this.appendChild(closestGrandparentWithCompound, newChild);
+            return;
+        }
+        // if only the parent is the THREE instance
+        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+            if (newChild.__ngt_renderer__[2 /* NgtRendererClassId.children */].length) {
+                for (const renderChild of newChild.__ngt_renderer__[2 /* NgtRendererClassId.children */]) {
+                    this.appendChild(parent, renderChild);
                 }
             }
-            else {
-                if (this.__ngt__) {
-                    // non-scene objects
-                    const previousAttach = this.__ngt__.attach;
-                    if (previousAttach != null) {
-                        if (typeof previousAttach === 'function') {
-                            previousAttach();
-                        }
-                        else {
-                            const previousAttachValue = this.__ngt__.attachValue;
-                            if (this.__ngt__.parentRef && this.__ngt__.parentRef.value) {
-                                mutate(this.__ngt__.parentRef.value, previousAttachValue, previousAttach);
-                            }
-                        }
-                        if (this.__ngt__.parentRef && this.__ngt__.parentRef.value) {
-                            invalidateInstance(this.__ngt__.parentRef.value);
-                        }
+        }
+        // if parent is a compound
+        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound') {
+            // if compound doesn't have a THREE instance set yet
+            if (!parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] &&
+                newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+                // if child is indeed an ngtCompound
+                if (newChild.__ngt_renderer__[4 /* NgtRendererClassId.compound */]) {
+                    this.store.setCompound(parent, newChild);
+                }
+                else {
+                    // if not, we track the parent (that is supposedly the compound component) on this three instance
+                    if (!newChild.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */]) {
+                        newChild.__ngt_renderer__[5 /* NgtRendererClassId.compoundParent */] = parent;
                     }
                 }
             }
-            const dispose = this.instanceValue['dispose'];
-            if (dispose && typeof dispose === 'function') {
-                dispose.apply(this.instanceValue);
+            // reset the compound if it's changed
+            if (parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] &&
+                newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' &&
+                newChild.__ngt_renderer__[4 /* NgtRendererClassId.compound */] &&
+                parent.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] !== newChild) {
+                this.store.setCompound(parent, newChild);
+            }
+        }
+        if (newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' && !getLocalState(newChild).parent) {
+            // 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;
+        }
+        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'dom' &&
+            newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'dom') {
+            const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
+            if (closestGrandparentInstance) {
+                this.appendChild(closestGrandparentInstance, newChild);
+            }
+        }
+    }
+    insertBefore(parent, newChild
+    // TODO  we might need these?
+    // refChild: NgtRendererNode,
+    // isMove?: boolean | undefined
+    ) {
+        if (!parent.__ngt_renderer__)
+            return;
+        this.appendChild(parent, newChild);
+    }
+    removeChild(parent, oldChild, isHostElement) {
+        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' &&
+            oldChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+            removeThreeChild(parent, oldChild, true);
+            this.store.destroy(oldChild, parent);
+            return;
+        }
+        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
+            parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */]) {
+            this.removeChild(parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */], oldChild, isHostElement);
+            return;
+        }
+        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+            this.store.destroy(oldChild, parent);
+            return;
+        }
+        const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
+        if (closestGrandparentInstance) {
+            this.removeChild(closestGrandparentInstance, oldChild, isHostElement);
+        }
+        this.store.destroy(oldChild, closestGrandparentInstance);
+    }
+    parentNode(node) {
+        var _a;
+        if ((_a = node.__ngt_renderer__) === null || _a === void 0 ? void 0 : _a[1 /* NgtRendererClassId.parent */])
+            return node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
+        return this.domRenderer.parentNode(node);
+    }
+    setAttribute(el, name, value, namespace) {
+        if (el.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound') {
+            // we don't have the compound instance yet
+            el.__ngt_renderer__[8 /* NgtRendererClassId.attributes */][name] = value;
+            if (!el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {
+                this.store.queueOperation(el, ['op', () => this.setAttribute(el, name, value, namespace)]);
+                return;
+            }
+            this.setAttribute(el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */], name, value, namespace);
+            return;
+        }
+        if (el.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+            this.store.applyAttribute(el, name, value);
+        }
+    }
+    setProperty(el, name, value) {
+        if (el.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound') {
+            // we don't have the compound instance yet
+            el.__ngt_renderer__[9 /* NgtRendererClassId.properties */][name] = value;
+            if (!el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {
+                this.store.queueOperation(el, ['op', () => this.setProperty(el, name, value)]);
+                return;
+            }
+            if (el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */]) {
+                Object.assign(el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */], {
+                    props: Object.assign(Object.assign({}, el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */].__ngt_renderer__[4 /* NgtRendererClassId.compound */]), { [name]: value }),
+                });
             }
+            this.setProperty(el.__ngt_renderer__[6 /* NgtRendererClassId.compounded */], name, value);
+            return;
+        }
+        if (el.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+            this.store.applyProperty(el, name, value);
         }
-        this.write({ attach: [] });
-        this.instanceRef.complete();
     }
-    eventNameToHandler(controllerEvent) {
-        return (event) => {
-            // go back into Angular Zone so that state updates on these events trigger CD
-            this.zone.run(() => {
-                controllerEvent.emit(event);
-            });
-        };
+    listen(target, eventName, callback) {
+        if (target.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' ||
+            (target.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
+                target.__ngt_renderer__[6 /* NgtRendererClassId.compounded */])) {
+            const instance = target.__ngt_renderer__[6 /* NgtRendererClassId.compounded */] || target;
+            const priority = getLocalState(target).priority;
+            return processThreeEvent(instance, priority || 0, eventName, callback, this.store.rootCdr);
+        }
+        if (target.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
+            !target.__ngt_renderer__[6 /* NgtRendererClassId.compounded */]) {
+            this.store.queueOperation(target, [
+                'op',
+                () => this.store.queueOperation(target, ['cleanUp', this.listen(target, eventName, callback)]),
+            ]);
+        }
+        return () => { };
     }
-}
-NgtInstance.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtInstance, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtInstance.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: NgtInstance, isStandalone: true, selector: "[ngtInstance]", inputs: { ref: "ref", skipWrapper: "skipWrapper", skipInit: "skipInit", noAttach: "noAttach", attach: "attach", priority: "priority", beforeRender: "beforeRender", readyCallback: "readyCallback", updateCallback: "updateCallback" }, outputs: { click: "click", contextmenu: "contextmenu", dblclick: "dblclick", pointerup: "pointerup", pointerdown: "pointerdown", pointerover: "pointerover", pointerout: "pointerout", pointerenter: "pointerenter", pointerleave: "pointerleave", pointermove: "pointermove", pointermissed: "pointermissed", pointercancel: "pointercancel", wheel: "wheel" }, exportAs: ["ngtInstance"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtInstance, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngtInstance]',
-                    exportAs: 'ngtInstance',
-                    standalone: true,
-                }]
-        }], propDecorators: { ref: [{
-                type: Input
-            }], skipWrapper: [{
-                type: Input
-            }], skipInit: [{
-                type: Input
-            }], noAttach: [{
-                type: Input
-            }], attach: [{
-                type: Input
-            }], priority: [{
-                type: Input
-            }], beforeRender: [{
-                type: Input
-            }], readyCallback: [{
-                type: Input
-            }], updateCallback: [{
-                type: Input
-            }], click: [{
-                type: Output
-            }], contextmenu: [{
-                type: Output
-            }], dblclick: [{
-                type: Output
-            }], pointerup: [{
-                type: Output
-            }], pointerdown: [{
-                type: Output
-            }], pointerover: [{
-                type: Output
-            }], pointerout: [{
-                type: Output
-            }], pointerenter: [{
-                type: Output
-            }], pointerleave: [{
-                type: Output
-            }], pointermove: [{
-                type: Output
-            }], pointermissed: [{
-                type: Output
-            }], pointercancel: [{
-                type: Output
-            }], wheel: [{
-                type: Output
-            }] } });
-const NGT_INSTANCE_INPUTS = [
-    'ref',
-    'attach',
-    'skipWrapper',
-    'skipInit',
-    'noAttach',
-    'beforeRender',
-    'priority',
-    'updateCallback',
-    'readyCallback',
-];
-const NGT_INSTANCE_OUTPUTS = [...supportedEvents];
-
-const defaultResizeOptions = {
-    box: 'content-box',
-    scroll: false,
-    offsetSize: false,
-    debounce: { scroll: 50, resize: 0 },
-};
-const [injectResizeOptions, provideResizeOptions] = createInjection('ngtResize Options', {
-    defaultValueOrFactory: defaultResizeOptions,
-    provideValueFactory: (value) => (Object.assign(Object.assign({}, defaultResizeOptions), value)),
-});
-const [injectResizeObserverSupport] = createInjection('Resize Observer API support', {
-    defaultValueOrFactory: () => {
-        const window = injectWindow();
-        return 'ResizeObserver' in window && window['ResizeObserver'] != null;
-    },
-});
-
-class NgtResize extends Observable {
-    constructor() {
-        const { nativeElement } = inject(ElementRef);
-        const zone = inject(NgZone);
-        const document = inject(DOCUMENT);
-        const window = injectWindow();
-        const isSupport = injectResizeObserverSupport();
-        const { box, offsetSize, scroll, debounce } = injectResizeOptions();
-        let observer;
-        let lastBounds;
-        let lastEntries = [];
-        const torndown$ = new Subject();
-        const scrollContainers = findScrollContainers(nativeElement, document.body);
-        // set actual debounce values early, so effects know if they should react accordingly
-        const scrollDebounce = debounce ? (typeof debounce === 'number' ? debounce : debounce.scroll) : null;
-        const resizeDebounce = debounce ? (typeof debounce === 'number' ? debounce : debounce.resize) : null;
-        const debounceAndDestroy = (debounce) => {
-            return pipe(debounceTime(debounce !== null && debounce !== void 0 ? debounce : 0), takeUntil(torndown$));
-        };
-        super((subscriber) => {
-            if (!isSupport) {
-                subscriber.error('ResizeObserver is not supported in your browser. Please use a polyfill');
-                return;
-            }
-            zone.runOutsideAngular(() => {
-                const callback = (entries) => {
-                    lastEntries = entries;
-                    const { left, top, width, height, bottom, right, x, y } = nativeElement.getBoundingClientRect();
-                    const size = {
-                        left,
-                        top,
-                        width,
-                        height,
-                        bottom,
-                        right,
-                        x,
-                        y,
-                    };
-                    if (nativeElement instanceof HTMLElement && offsetSize) {
-                        size.height = nativeElement.offsetHeight;
-                        size.width = nativeElement.offsetWidth;
-                    }
-                    Object.freeze(size);
-                    subscriber.next(Object.assign({ entries, dpr: window.devicePixelRatio }, size));
-                    if (!areBoundsEqual(lastBounds || {}, size)) {
-                        lastBounds = size;
-                    }
-                };
-                const boundEntriesCallback = () => {
-                    callback(lastEntries);
-                };
-                observer = new ResizeObserver(callback);
-                observer.observe(nativeElement, { box });
-                if (scroll) {
-                    if (scrollContainers) {
-                        scrollContainers.forEach((scrollContainer) => {
-                            fromEvent(scrollContainer, 'scroll', {
-                                capture: true,
-                                passive: true,
-                            })
-                                .pipe(debounceAndDestroy(scrollDebounce))
-                                .subscribe(boundEntriesCallback);
-                        });
-                    }
-                    fromEvent(window, 'scroll', {
-                        capture: true,
-                        passive: true,
-                    })
-                        .pipe(debounceAndDestroy(scrollDebounce))
-                        .subscribe(boundEntriesCallback);
-                }
-                fromEvent(window, 'resize').pipe(debounceAndDestroy(resizeDebounce)).subscribe(boundEntriesCallback);
-            });
-            return () => {
-                if (observer) {
-                    observer.unobserve(nativeElement);
-                    observer.disconnect();
-                }
-                torndown$.next();
-                torndown$.complete();
-            };
-        });
-        return this.pipe(debounceTime(scrollDebounce || 0), share({
-            connector: () => new ReplaySubject(1),
-            resetOnRefCountZero: true,
-            resetOnComplete: true,
-        }));
+    get data() {
+        return this.domRenderer.data;
     }
 }
-NgtResize.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtResize, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgtResize.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtResize });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtResize, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-// Returns a list of scroll offsets
-function findScrollContainers(element, documentBody) {
-    const result = [];
-    if (!element || element === documentBody)
-        return result;
-    const { overflow, overflowX, overflowY } = window.getComputedStyle(element);
-    if ([overflow, overflowX, overflowY].some((prop) => prop === 'auto' || prop === 'scroll'))
-        result.push(element);
-    return [...result, ...findScrollContainers(element.parentElement, documentBody)];
+
+function provideNgtRenderer({ store, changeDetectorRef, compoundPrefixes = [] }) {
+    if (!compoundPrefixes.includes('ngts')) {
+        compoundPrefixes.push('ngts');
+    }
+    if (!compoundPrefixes.includes('ngtp')) {
+        compoundPrefixes.push('ngtp');
+    }
+    return [
+        { provide: RendererFactory2, useClass: NgtRendererFactory },
+        { provide: NgtStore, useValue: store },
+        { provide: ChangeDetectorRef, useValue: changeDetectorRef },
+        { provide: NGT_COMPOUND_PREFIXES, useValue: compoundPrefixes },
+    ];
 }
-// Checks if element boundaries are equal
-const keys = [
-    'x',
-    'y',
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'width',
-    'height',
-];
-const areBoundsEqual = (a, b) => keys.every((key) => a[key] === b[key]);
 
-function buildGraph(object) {
-    const data = { nodes: {}, materials: {} };
-    if (object) {
-        object.traverse((obj) => {
-            if (obj.name)
-                data.nodes[obj.name] = obj;
-            if ('material' in obj && !data.materials[obj.material.name]) {
-                data.materials[obj.material.name] = obj
-                    .material;
+const DOM_EVENTS = {
+    click: false,
+    contextmenu: false,
+    dblclick: false,
+    wheel: false,
+    pointerdown: true,
+    pointerup: true,
+    pointerleave: true,
+    pointermove: true,
+    pointercancel: true,
+    lostpointercapture: true,
+};
+const supportedEvents = [
+    'click',
+    'contextmenu',
+    'dblclick',
+    'pointerup',
+    'pointerdown',
+    'pointerover',
+    'pointerout',
+    'pointerenter',
+    'pointerleave',
+    'pointermove',
+    'pointermissed',
+    'pointercancel',
+    'wheel',
+];
+function createPointerEvents(store) {
+    const { handlePointer } = createEvents(store);
+    return {
+        priority: 1,
+        enabled: true,
+        compute: (event, root) => {
+            const state = root.get();
+            // https://github.com/pmndrs/react-three-fiber/pull/782
+            // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+            state.pointer.set((event.offsetX / state.size.width) * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+            state.raycaster.setFromCamera(state.pointer, state.camera);
+        },
+        connected: undefined,
+        handlers: Object.keys(DOM_EVENTS).reduce((handlers, supportedEventName) => {
+            handlers[supportedEventName] = handlePointer(supportedEventName);
+            return handlers;
+        }, {}),
+        connect: (target) => {
+            var _a, _b, _c;
+            const state = store.get();
+            (_b = (_a = state.events).disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
+            state.setEvents({ connected: target });
+            Object.entries((_c = state.events.handlers) !== null && _c !== void 0 ? _c : {}).forEach(([eventName, eventHandler]) => {
+                const passive = DOM_EVENTS[eventName];
+                target.addEventListener(eventName, eventHandler, { passive });
+            });
+        },
+        disconnect: () => {
+            var _a;
+            const { events, setEvents } = store.get();
+            if (events.connected) {
+                Object.entries((_a = events.handlers) !== null && _a !== void 0 ? _a : {}).forEach(([eventName, eventHandler]) => {
+                    if (events.connected instanceof HTMLElement) {
+                        events.connected.removeEventListener(eventName, eventHandler);
+                    }
+                });
+                setEvents({ connected: undefined });
             }
-        });
-    }
-    return data;
+        },
+    };
 }
 
-class NgtLoader {
-    constructor() {
-        this.cached = new Map();
-    }
-    use(loadConstructor, input, extensions, onProgress) {
-        const urls = Array.isArray(input) ? input : [input];
-        const loader = new loadConstructor();
+const cached = new Map();
+function injectLoader(loaderConstructorFactory, input, extensions, onProgress) {
+    const urls$ = isObservable(input) ? input : of(input);
+    return urls$.pipe(map((inputs) => {
+        const loaderConstructor = loaderConstructorFactory(inputs);
+        const loader = new loaderConstructor();
         if (extensions) {
             extensions(loader);
         }
-        const observables$ = urls.map((url) => {
-            if (!this.cached.has(url)) {
-                this.cached.set(url, from(loader.loadAsync(url, onProgress)).pipe(tap((data) => {
-                    if (data.scene) {
-                        Object.assign(data, buildGraph(data.scene));
-                    }
-                }), retry(2), catchError((err) => {
-                    console.error(`[NgtLoader]: Error loading ${url}: ${err.message}`);
-                    return of(null);
-                }), share({
-                    connector: () => new ReplaySubject(1),
-                    resetOnComplete: true,
-                    resetOnRefCountZero: true,
-                    resetOnError: true,
-                })));
-            }
-            return this.cached.get(url);
-        });
-        return forkJoin(observables$).pipe(map((results) => (Array.isArray(input) ? results : results[0])));
-    }
-    destroy() {
-        this.cached.clear();
-    }
+        const urls = Array.isArray(inputs) ? inputs : typeof inputs === 'string' ? [inputs] : Object.values(inputs);
+        return [
+            urls.map((url) => {
+                if (!cached.has(url)) {
+                    cached.set(url, from(loader.loadAsync(url, onProgress)).pipe(tap((data) => {
+                        if (data.scene) {
+                            Object.assign(data, makeObjectGraph(data.scene));
+                        }
+                    }), retry(2), catchError((err) => {
+                        console.error(`[NGT] Error loading ${url}: ${err.message}`);
+                        return of([]);
+                    }), share({
+                        connector: () => new ReplaySubject(1),
+                        resetOnComplete: true,
+                        resetOnError: true,
+                        resetOnRefCountZero: true,
+                    })));
+                }
+                return cached.get(url);
+            }),
+            inputs,
+        ];
+    }), switchMap(([observables$, inputs]) => {
+        return forkJoin(observables$).pipe(map((results) => {
+            if (Array.isArray(inputs))
+                return results;
+            if (typeof inputs === 'string')
+                return results[0];
+            const keys = Object.keys(inputs);
+            return keys.reduce((result, key) => {
+                result[key] = results[keys.indexOf(key)];
+                return result;
+            }, {});
+        }));
+    }));
 }
-NgtLoader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NgtLoader.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtLoader, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtLoader, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+injectLoader.destroy = () => {
+    cached.clear();
+};
+injectLoader.preLoad = (loaderConstructorFactory, inputs, extensions) => {
+    injectLoader(loaderConstructorFactory, inputs, extensions).pipe(take(1)).subscribe();
+};
+const injectNgtLoader = injectLoader;
 
 class NgtCanvasContainer {
     constructor() {
-        this.resize = inject(NgtResize);
+        this.canvasResize = injectNgxResize();
     }
 }
-NgtCanvasContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtCanvasContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgtCanvasContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: NgtCanvasContainer, isStandalone: true, selector: "ngt-canvas-container", outputs: { resize: "resize" }, providers: [NgtResize], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;height:100%;width:100%}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtCanvasContainer, decorators: [{
+NgtCanvasContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtCanvasContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgtCanvasContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: NgtCanvasContainer, isStandalone: true, selector: "ngt-canvas-container", outputs: { canvasResize: "canvasResize" }, providers: [provideNgxResizeOptions({ emitInZone: false })], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtCanvasContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'ngt-canvas-container', standalone: true, template: '<ng-content></ng-content>', providers: [NgtResize], styles: [":host{display:block;height:100%;width:100%}\n"] }]
-        }], propDecorators: { resize: [{
+            args: [{ selector: 'ngt-canvas-container', standalone: true, template: '<ng-content />', providers: [provideNgxResizeOptions({ emitInZone: false })], styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], propDecorators: { canvasResize: [{
                 type: Output
             }] } });
-class NgtCanvas extends NgtComponentStore {
+class NgtCanvas extends NgtRxStore {
     constructor() {
         super(...arguments);
+        this.cdr = inject(ChangeDetectorRef);
+        this.envInjector = inject(EnvironmentInjector);
+        this.host = inject(ElementRef);
+        this.store = inject(NgtStore);
         this.hostClass = true;
+        this.compoundPrefixes = [];
         this.created = new EventEmitter();
-        this.canvasPointerMissed = new EventEmitter();
-        this.zone = inject(NgZone);
-        this.loader = inject(NgtLoader);
-        this.store = inject(NgtStore, { self: true });
-        this.host = inject(ElementRef);
+        this.pointerMissed = new EventEmitter();
+    }
+    initialize() {
+        super.initialize();
+        this.set({
+            shadows: false,
+            linear: false,
+            flat: false,
+            legacy: false,
+            orthographic: false,
+            frameloop: 'always',
+            dpr: [1, 2],
+            events: createPointerEvents,
+        });
     }
     get pointerEvents() {
-        return this.read((s) => s.eventSource) !== this.host.nativeElement ? 'none' : 'auto';
+        return this.get('eventSource') !== this.host.nativeElement ? 'none' : 'auto';
     }
     set linear(linear) {
-        this.write({ linear });
+        this.set({ linear });
     }
     set legacy(legacy) {
-        this.write({ legacy });
+        this.set({ legacy });
     }
     set flat(flat) {
-        this.write({ flat });
+        this.set({ flat });
     }
     set orthographic(orthographic) {
-        this.write({ orthographic });
+        this.set({ orthographic });
     }
     set frameloop(frameloop) {
-        this.write({ frameloop });
+        this.set({ frameloop });
     }
     set dpr(dpr) {
-        this.write({ dpr });
+        this.set({ dpr });
     }
     set raycaster(raycaster) {
-        this.write({ raycaster });
+        this.set({ raycaster });
     }
     set shadows(shadows) {
-        this.write({
+        this.set({
             shadows: typeof shadows === 'object' ? shadows : shadows,
         });
     }
     set camera(camera) {
-        this.write({ camera });
+        this.set({ camera });
     }
     set gl(gl) {
-        this.write({ gl });
+        this.set({ gl });
     }
     set eventSource(eventSource) {
-        this.write({ eventSource });
+        this.set({ eventSource });
     }
     set eventPrefix(eventPrefix) {
-        this.write({ eventPrefix });
+        this.set({ eventPrefix });
     }
     set lookAt(lookAt) {
-        this.write({ lookAt });
+        this.set({ lookAt });
     }
     set performance(performance) {
-        this.write({ performance });
-    }
-    get sceneRef() {
-        return this.store.read((s) => s.sceneRef);
-    }
-    get isConfigured() {
-        return this.store.isConfigured;
-    }
-    initialize() {
-        super.initialize();
-        this.write({
-            shadows: false,
-            linear: false,
-            flat: false,
-            legacy: false,
-            orthographic: false,
-            frameloop: 'always',
-            dpr: [1, 2],
-            events: createPointerEvents,
-        });
+        this.set({ performance });
     }
     ngOnInit() {
-        this.zone.runOutsideAngular(() => {
-            if (!this.eventSource) {
-                this.eventSource = this.host.nativeElement;
-            }
-            if (this.canvasPointerMissed.observed) {
-                // update pointerMissed event
-                this.store.write({
-                    onPointerMissed: (event) => {
-                        // go back into angular zone
-                        this.zone.run(() => {
-                            this.canvasPointerMissed.emit(event);
-                        });
-                    },
-                });
-            }
-            // set rootStateMap
-            rootStateMap.set(this.glCanvas.nativeElement, this.store.read);
-            // setup canvas state
-            this.store.init();
-            this.store.onReady(() => {
-                var _a, _b;
-                const state = this.store.read();
-                const inputs = this.read();
-                // canvas is ready
-                this.store.write((s) => ({ internal: Object.assign(Object.assign({}, s.internal), { active: true }) }));
-                // Connect to eventsource
-                (_b = (_a = state.events).connect) === null || _b === void 0 ? void 0 : _b.call(_a, inputs.eventSource instanceof ElementRef ? inputs.eventSource.nativeElement : inputs.eventSource);
-                // Set up compute function
-                if (inputs.eventPrefix) {
-                    state.setEvents({
-                        compute: (event, stateGetter) => {
-                            const innerState = stateGetter();
-                            const x = event[(inputs.eventPrefix + 'X')];
-                            const y = event[(inputs.eventPrefix + 'Y')];
-                            innerState.pointer.set((x / innerState.size.width) * 2 - 1, -(y / innerState.size.height) * 2 + 1);
-                            innerState.raycaster.setFromCamera(innerState.pointer, innerState.camera);
-                        },
-                    });
-                }
-                if (this.created.observed) {
-                    this.zone.run(() => {
-                        requestAnimationFrame(() => {
-                            this.created.emit(this.store.read());
-                        });
-                    });
-                }
+        if (!this.get('eventSource')) {
+            // set default event source to the host element
+            this.eventSource = this.host.nativeElement;
+        }
+        if (this.pointerMissed.observed) {
+            this.store.set({
+                onPointerMissed: (event) => {
+                    this.pointerMissed.emit(event);
+                    this.cdr.detectChanges();
+                },
             });
+        }
+        // setup NgtStore
+        this.store.init();
+        // set rootStateMap
+        rootStateMap.set(this.glCanvas.nativeElement, this.store);
+        // subscribe to store to listen for ready state
+        this.hold(this.store.select('ready').pipe(filter((ready) => ready)), () => {
+            this.storeReady();
         });
     }
-    onResize(resizeResult) {
-        this.zone.runOutsideAngular(() => {
-            const { width, height } = resizeResult;
-            if (width > 0 && height > 0) {
-                if (!this.store.isInit) {
-                    this.store.init();
-                }
-                this.store.configure(this.read(), this.glCanvas.nativeElement);
-            }
+    onResize({ width, height }) {
+        if (width > 0 && height > 0) {
+            if (!this.store.isInit)
+                this.store.init();
+            this.store.configure(this.get(), this.glCanvas.nativeElement);
+        }
+    }
+    storeReady() {
+        var _a, _b;
+        // canvas is ready, let's activate the loop
+        this.store.set((state) => ({ internal: Object.assign(Object.assign({}, state.internal), { active: true }) }));
+        const inputs = this.get();
+        const state = this.store.get();
+        // connect to event source
+        (_b = (_a = state.events).connect) === null || _b === void 0 ? void 0 : _b.call(_a, is.ref(inputs.eventSource) ? inputs.eventSource.nativeElement : inputs.eventSource);
+        // setup compute function for events
+        if (inputs.eventPrefix) {
+            state.setEvents({
+                compute: (event, store) => {
+                    const innerState = store.get();
+                    const x = event[(inputs.eventPrefix + 'X')];
+                    const y = event[(inputs.eventPrefix + 'Y')];
+                    innerState.pointer.set((x / innerState.size.width) * 2 - 1, -(y / innerState.size.height) * 2 + 1);
+                    innerState.raycaster.setFromCamera(innerState.pointer, innerState.camera);
+                },
+            });
+        }
+        // emit created event if observed
+        if (this.created.observed) {
+            this.created.emit(this.store.get());
+            this.cdr.detectChanges();
+        }
+        // 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.scene, { environmentInjector: this.glEnvInjector });
+            this.glRef.changeDetectorRef.detectChanges();
+            this.glRef.changeDetectorRef.detach();
+            this.cdr.detectChanges();
         });
     }
     ngOnDestroy() {
-        this.loader.destroy();
+        if (this.glRef) {
+            this.glRef.destroy();
+        }
+        if (this.glEnvInjector) {
+            this.glEnvInjector.destroy();
+        }
+        injectNgtLoader.destroy();
         super.ngOnDestroy();
     }
 }
-NgtCanvas.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtCanvas, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", canvasPointerMissed: "canvasPointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hostClass", "style.pointerEvents": "this.pointerEvents" } }, providers: [NgtStore, provideInstanceRef(NgtCanvas, (canvas) => canvas.sceneRef)], queries: [{ propertyName: "canvasContent", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <ngt-canvas-container (resize)="onResize($event)">
-            <canvas #glCanvas style="display: block">
-                <ng-container *ngIf="isConfigured" [ngTemplateOutlet]="canvasContent"></ng-container>
-                <ng-content></ng-content>
-            </canvas>
+NgtCanvas.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtCanvas, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtCanvas.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { scene: "scene", compoundPrefixes: "compoundPrefixes", linear: "linear", legacy: "legacy", flat: "flat", orthographic: "orthographic", frameloop: "frameloop", dpr: "dpr", raycaster: "raycaster", shadows: "shadows", camera: "camera", gl: "gl", eventSource: "eventSource", eventPrefix: "eventPrefix", lookAt: "lookAt", performance: "performance" }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "class.ngt-canvas": "this.hostClass", "style.pointerEvents": "this.pointerEvents" } }, providers: [NgtStore], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, static: true }, { propertyName: "glAnchor", first: true, predicate: ["glAnchor"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <ngt-canvas-container (canvasResize)="onResize($event)">
+            <canvas #glCanvas style="display: block;"></canvas>
+            <ng-container #glAnchor />
         </ngt-canvas-container>
-    `, isInline: true, styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "component", type: NgtCanvasContainer, selector: "ngt-canvas-container", outputs: ["resize"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtCanvas, decorators: [{
+    `, isInline: true, styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "component", type: NgtCanvasContainer, selector: "ngt-canvas-container", outputs: ["canvasResize"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{ selector: 'ngt-canvas', standalone: true, template: `
-        <ngt-canvas-container (resize)="onResize($event)">
-            <canvas #glCanvas style="display: block">
-                <ng-container *ngIf="isConfigured" [ngTemplateOutlet]="canvasContent"></ng-container>
-                <ng-content></ng-content>
-            </canvas>
+        <ngt-canvas-container (canvasResize)="onResize($event)">
+            <canvas #glCanvas style="display: block;"></canvas>
+            <ng-container #glAnchor />
         </ngt-canvas-container>
-    `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgtCanvasContainer, NgIf, NgTemplateOutlet, AsyncPipe], providers: [NgtStore, provideInstanceRef(NgtCanvas, (canvas) => canvas.sceneRef)], styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"] }]
+    `, imports: [NgtCanvasContainer], providers: [NgtStore], styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"] }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.ngt-canvas']
             }], pointerEvents: [{
                 type: HostBinding,
                 args: ['style.pointerEvents']
+            }], scene: [{
+                type: Input
+            }], compoundPrefixes: [{
+                type: Input
             }], linear: [{
                 type: Input
             }], legacy: [{
@@ -2211,251 +2436,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                 type: Input
             }], created: [{
                 type: Output
-            }], canvasPointerMissed: [{
+            }], pointerMissed: [{
                 type: Output
             }], glCanvas: [{
                 type: ViewChild,
                 args: ['glCanvas', { static: true }]
-            }], canvasContent: [{
-                type: ContentChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
-
-const NGT_ARGS = new InjectionToken('NgtArgs');
-function injectArgs(options = {}) {
-    return inject(NGT_ARGS, options);
-}
-class NgtArgs {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-        this.vcr = inject(ViewContainerRef);
-    }
-    set args(args) {
-        if (this.view) {
-            this.view.destroy();
-        }
-        this.view = this.vcr.createEmbeddedView(this.templateRef, {}, { injector: Injector.create({ providers: [{ provide: NGT_ARGS, useValue: args }] }) });
-    }
-}
-NgtArgs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtArgs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-NgtArgs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: NgtArgs, isStandalone: true, selector: "[args]", inputs: { args: "args" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtArgs, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[args]',
-                    standalone: true,
-                }]
-        }], propDecorators: { args: [{
-                type: Input
+            }], glAnchor: [{
+                type: ViewChild,
+                args: ['glAnchor', { static: true, read: ViewContainerRef }]
             }] } });
 
-class NgtCursor {
-    constructor(instance, document) {
-        if (!instance)
-            return;
-        merge(instance.pointerover.pipe(map(() => true)), instance.pointerout.pipe(map(() => false)))
-            .pipe(takeUntil(instance.destroy$))
-            .subscribe((hovered) => {
-            document.body.style.cursor = hovered ? 'pointer' : 'auto';
-        });
-    }
-}
-NgtCursor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtCursor, deps: [{ token: NgtInstance, optional: true, self: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
-NgtCursor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: NgtCursor, isStandalone: true, selector: "[ngtCursor]", exportAs: ["ngtCursor"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtCursor, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngtCursor]',
-                    standalone: true,
-                    exportAs: 'ngtCursor',
-                }]
-        }], ctorParameters: function () {
-        return [{ type: NgtInstance, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Self
-                    }] }, { type: Document, decorators: [{
-                        type: Inject,
-                        args: [DOCUMENT]
-                    }] }];
-    } });
-
 class NgtRepeat extends NgForOf {
     set ngForRepeat(count) {
         this.ngForOf = Number.isInteger(count) ? Array.from({ length: count }, (_, i) => i) : [];
     }
 }
-NgtRepeat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NgtRepeat.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtRepeat, decorators: [{
+NgtRepeat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRepeat, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtRepeat.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: NgtRepeat, isStandalone: true, selector: "[ngFor][ngForRepeat]", inputs: { ngForRepeat: "ngForRepeat" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: NgtRepeat, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[ngFor][ngForRepeat]',
-                    standalone: true,
-                }]
+            args: [{ selector: '[ngFor][ngForRepeat]', standalone: true }]
         }], propDecorators: { ngForRepeat: [{
                 type: Input
             }] } });
 
-class NgtPiPipe {
-    transform(value) {
-        return value * Math.PI;
-    }
-}
-NgtPiPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtPiPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-NgtPiPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: NgtPiPipe, isStandalone: true, name: "pi" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtPiPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'pi', standalone: true }]
-        }] });
-
-class NgtMathPipe {
-    transform(value, keyOfMath) {
-        const params = Array.isArray(value) ? value : [value];
-        return Math[keyOfMath](...params);
-    }
-}
-NgtMathPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtMathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-NgtMathPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: NgtMathPipe, isStandalone: true, name: "math" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtMathPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'math', standalone: true }]
-        }] });
-
-class NgtRadianPipe {
-    transform(degree) {
-        return (degree * Math.PI) / 180;
-    }
-}
-NgtRadianPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtRadianPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-NgtRadianPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: NgtRadianPipe, isStandalone: true, name: "radian" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtRadianPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'radian', standalone: true }]
-        }] });
-
-class NgtSidePipe {
-    transform(side) {
-        switch (side) {
-            case 'front':
-                return THREE.FrontSide;
-            case 'back':
-                return THREE.BackSide;
-            case 'double':
-                return THREE.DoubleSide;
-        }
-    }
-}
-NgtSidePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtSidePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-NgtSidePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: NgtSidePipe, isStandalone: true, name: "side" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: NgtSidePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'side', standalone: true }]
-        }] });
-
-function capitalize(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-function proxify(instance, proxifyOptions = {}) {
-    const ngtInstance = injectInstance({ host: true });
-    const store = inject(NgtStore);
-    const zone = inject(NgZone);
-    const parentInstance = injectInstanceRef({ skipSelf: true, optional: true });
-    return zone.runOutsideAngular(() => {
-        // prep the instance w/ local state
-        instance = prepare(instance, store.read, store.rootStateFactory, parentInstance === null || parentInstance === void 0 ? void 0 : parentInstance(), ngtInstance.instanceValue ? ngtInstance.instanceRef : undefined, !!proxifyOptions.primitive);
-        let storeReadySubscription;
-        const newValueSubscriptionMap = new Map();
-        function setProp(obj, prop, newValue) {
-            const capitalizedProp = `set${capitalize(prop)}`;
-            if (isObservable(newValue)) {
-                const sub = newValue.subscribe((val) => {
-                    if (obj[capitalizedProp] && typeof obj[capitalizedProp] === 'function') {
-                        obj[capitalizedProp](val);
-                    }
-                    else {
-                        applyProps(obj, { [prop]: val });
-                    }
-                    ngtInstance.write({ [prop]: val });
-                });
-                return () => sub.unsubscribe();
-            }
-            if (obj[capitalizedProp] && typeof obj[capitalizedProp] === 'function') {
-                obj[capitalizedProp](newValue);
-            }
-            else {
-                applyProps(obj, { [prop]: newValue });
-            }
-            ngtInstance.write({ [prop]: newValue });
-            return;
-        }
-        const handler = {
-            get(target, p, receiver) {
-                if (p === 'instanceRef')
-                    return ngtInstance.instanceRef;
-                if (p === 'instance')
-                    return ngtInstance;
-                if (p === NGT_PROXY_INSTANCE)
-                    return target;
-                const capitalizedProp = `get${capitalize(p)}`;
-                if (target[capitalizedProp] && typeof target[capitalizedProp] === 'function') {
-                    return target[capitalizedProp]();
-                }
-                return Reflect.get(target, p, receiver);
-            },
-            set(target, p, newValue, receiver) {
-                const prop = p;
-                if (storeReadySubscription)
-                    storeReadySubscription.unsubscribe();
-                if (newValueSubscriptionMap.has(prop))
-                    newValueSubscriptionMap.get(prop)();
-                // Angular sets this property
-                if (p === '__ngContext__')
-                    return Reflect.set(target, p, newValue, receiver);
-                return zone.runOutsideAngular(() => {
-                    // TODO: figure out what else we need to handle
-                    // we should handle if newValue is an Observable as well
-                    if (store.read((s) => s.ready)) {
-                        const cleanUp = setProp(instance, prop, newValue);
-                        if (cleanUp)
-                            newValueSubscriptionMap.set(prop, cleanUp);
-                    }
-                    else {
-                        storeReadySubscription = store.onReady(() => setProp(instance, prop, newValue));
-                    }
-                    // schedule updateCallback on next event loop
-                    queueMicrotask(() => {
-                        if (ngtInstance.updateCallback)
-                            ngtInstance.updateCallback(instance);
-                    });
-                    return true;
-                });
-            },
-        };
-        ngtInstance.effect(tapEffect(() => () => {
-            if (storeReadySubscription)
-                storeReadySubscription.unsubscribe();
-            newValueSubscriptionMap.forEach((cleanUp) => cleanUp());
-        }))();
-        const proxied = new Proxy(instance, handler);
-        if (proxifyOptions.attach)
-            ngtInstance.attach = proxifyOptions.attach;
-        if (proxifyOptions.created)
-            proxifyOptions.created(proxied, store.read, ngtInstance);
-        ngtInstance.instanceRef.set(proxied);
-        return proxied;
-    });
-}
-
-/**
- * main exports
- */
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NGT_ARGS, NGT_INSTANCE_INPUTS, NGT_INSTANCE_OUTPUTS, NGT_INSTANCE_REF_FACTORY, NGT_PROXY_INSTANCE, NgtArgs, NgtCanvas, NgtCanvasContainer, NgtComponentStore, NgtCursor, NgtInstance, NgtLoader, NgtMathPipe, NgtPiPipe, NgtRadianPipe, NgtRepeat, NgtResize, NgtSidePipe, NgtStore, addAfterEffect, addEffect, addTail, createLoop, defaultProjector, defaultResizeOptions, flushGlobalEffects, injectArgs, injectInstance, injectInstanceRef, injectResizeObserverSupport, injectResizeOptions, provideInstanceRef, provideResizeOptions, proxify, rootStateMap, skipFirstUndefined, tapEffect };
-//# sourceMappingURL=angular-three.mjs.map
+export { NGT_CATALOGUE, NgtArgs, NgtCanvas, NgtCanvasContainer, NgtRepeat, extend };
 //# sourceMappingURL=angular-three.mjs.map