angular-three 0.0.0-replace

package/fesm2022/angular-three.mjs

@@ -0,0 +1,3167 @@
+import * as i0 from '@angular/core';
+import { untracked, computed, signal, ElementRef, inject, effect, InjectionToken, Optional, SkipSelf, ViewContainerRef, NgZone, TemplateRef, DestroyRef, Directive, input, getDebugNode, RendererFactory2, Injectable, Injector, makeEnvironmentProviders, EnvironmentInjector, booleanAttribute, output, viewChild, afterNextRender, createEnvironmentInjector, Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, contentChild, forwardRef, reflectComponentType, isSignal } from '@angular/core';
+import { outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { provideResizeOptions, NgxResize } from 'ngxtension/resize';
+import * as THREE from 'three';
+import { DOCUMENT } from '@angular/common';
+import { createInjectionToken } from 'ngxtension/create-injection-token';
+import { Subject, ReplaySubject, filter } from 'rxjs';
+import { assertInjector } from 'ngxtension/assert-injector';
+import * as i1 from '@angular/router';
+import { ActivationEnd, RouterOutlet } from '@angular/router';
+
+const STORE_COMPUTED_KEY = '__ngt_signal_store_computed__';
+function reducer(state) {
+    return (previous) => {
+        const partial = typeof state === 'function' ? state(previous) : state;
+        Object.keys(partial).forEach((key) => {
+            const typedKey = key;
+            if (partial[typedKey] === undefined && previous[typedKey] != null) {
+                partial[typedKey] = previous[typedKey];
+            }
+        });
+        return partial;
+    };
+}
+function updater(_source) {
+    return (state) => {
+        const updater = reducer(state);
+        untracked(() => {
+            _source.update((previous) => ({ ...previous, ...updater(previous) }));
+        });
+    };
+}
+function patcher(_source) {
+    return (state) => {
+        const updater = reducer(state);
+        untracked(() => {
+            _source.update((previous) => ({ ...updater(previous), ...previous }));
+        });
+    };
+}
+function getter(_source) {
+    return (...keys) => {
+        const root = untracked(_source);
+        if (keys.length === 0)
+            return root;
+        return keys.reduce((value, key) => value[key], root);
+    };
+}
+function selector(_state, computedCache) {
+    return (...keysAndOptions) => {
+        if (keysAndOptions.length === 0)
+            return _state;
+        if (keysAndOptions.length === 1 && typeof keysAndOptions[0] === 'object') {
+            const cachedKey = STORE_COMPUTED_KEY.concat(JSON.stringify(keysAndOptions[0]));
+            if (!computedCache.has(cachedKey)) {
+                computedCache.set(cachedKey, computed(_state, keysAndOptions));
+            }
+            return computedCache.get(cachedKey);
+        }
+        const [keys, options] = parseStoreOptions(keysAndOptions);
+        const joinedKeys = keys.join('-');
+        const cachedKeys = joinedKeys.concat(JSON.stringify(options));
+        if (!computedCache.has(cachedKeys)) {
+            computedCache.set(cachedKeys, computed(() => keys.reduce((value, key) => value[key], _state()), options));
+        }
+        return computedCache.get(cachedKeys);
+    };
+}
+function parseStoreOptions(keysAndOptions) {
+    if (typeof keysAndOptions.at(-1) === 'object') {
+        return [keysAndOptions.slice(0, -1), keysAndOptions.at(-1)];
+    }
+    return [keysAndOptions, { equal: Object.is }];
+}
+function signalStore(initialState = {}, options) {
+    let source;
+    let update;
+    let get;
+    let patch;
+    let select;
+    let state;
+    const computedCache = new Map();
+    if (!options) {
+        options = { equal: Object.is };
+    }
+    if (typeof initialState === 'function') {
+        source = signal({}, options);
+        state = source.asReadonly();
+        get = getter(source);
+        update = updater(source);
+        patch = patcher(source);
+        select = selector(state, computedCache);
+        source.set(initialState({ update, get, patch, select }));
+    }
+    else {
+        source = signal(initialState, options);
+        state = source.asReadonly();
+        get = getter(source);
+        update = updater(source);
+        patch = patcher(source);
+        select = selector(state, computedCache);
+    }
+    const store = { select, get, update, patch, state };
+    Object.defineProperty(store, 'snapshot', {
+        get: untracked.bind({}, state),
+        configurable: false,
+        enumerable: false,
+    });
+    return store;
+}
+
+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 && typeof a === 'object' && 'render' in a && typeof a['render'] === 'function',
+    scene: (a) => !!a && a.isScene,
+    ref: (a) => a instanceof ElementRef,
+    instance: (a) => !!a && !!a['__ngt__'],
+    object3D: (a) => !!a && a.isObject3D,
+    // instance: (a: unknown): a is NgtInstanceNode => !!a && !!(a as NgtAnyRecord)['__ngt__'],
+    // ref: (a: unknown): a is ElementRef => a instanceof ElementRef,
+    colorSpaceExist: (object) => 'colorSpace' in object || 'outputColorSpace' in object,
+    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;
+    },
+};
+
+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();
+    if (is.camera(value)) {
+        if (is.perspectiveCamera(value) || is.orthographicCamera(value))
+            value.updateProjectionMatrix();
+        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;
+        }
+        else {
+            camera.aspect = size.width / size.height;
+        }
+        camera.updateProjectionMatrix();
+        camera.updateMatrixWorld();
+    }
+}
+
+function getLocalState(obj) {
+    if (!obj)
+        return undefined;
+    return obj['__ngt__'];
+}
+function invalidateInstance(instance) {
+    const state = getLocalState(instance)?.store.snapshot;
+    if (state && state.internal.frames === 0)
+        state.invalidate();
+    checkUpdate(instance);
+}
+function prepare(object, localState) {
+    const instance = object;
+    if (localState?.primitive || !instance.__ngt__) {
+        const { instanceStore = signalStore({
+            nativeProps: {},
+            parent: null,
+            objects: [],
+            nonObjects: [],
+        }), ...rest } = localState || {};
+        instance.__ngt__ = {
+            previousAttach: null,
+            store: null,
+            memoized: {},
+            eventCount: 0,
+            handlers: {},
+            instanceStore,
+            parent: instanceStore.select('parent'),
+            objects: instanceStore.select('objects'),
+            nonObjects: instanceStore.select('nonObjects'),
+            nativeProps: instanceStore.select('nativeProps'),
+            add(object, type) {
+                const current = instance.__ngt__.instanceStore.get(type);
+                const foundIndex = current.indexOf((node) => object === node);
+                if (foundIndex > -1) {
+                    current.splice(foundIndex, 1, object);
+                    instance.__ngt__.instanceStore.update({ [type]: current });
+                }
+                else {
+                    instance.__ngt__.instanceStore.update((prev) => ({ [type]: [...prev[type], object] }));
+                }
+                notifyAncestors(instance.__ngt__.instanceStore.get('parent'));
+            },
+            remove(object, type) {
+                instance.__ngt__.instanceStore.update((prev) => ({ [type]: prev[type].filter((node) => node !== object) }));
+                notifyAncestors(instance.__ngt__.instanceStore.get('parent'));
+            },
+            setNativeProps(key, value) {
+                instance.__ngt__.instanceStore.update((prev) => ({ nativeProps: { ...prev.nativeProps, [key]: value } }));
+            },
+            setParent(parent) {
+                instance.__ngt__.instanceStore.update({ parent });
+            },
+            ...rest,
+        };
+    }
+    return instance;
+}
+function notifyAncestors(instance) {
+    if (!instance)
+        return;
+    const localState = getLocalState(instance);
+    if (!localState)
+        return;
+    localState.instanceStore.update((prev) => ({ objects: prev.objects, nonObjects: prev.nonObjects }));
+    notifyAncestors(localState.instanceStore.get('parent'));
+}
+
+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) {
+    // Err on the side of progress by assuming 2x dpr if we can't detect it
+    // This will happen in workers where window is defined but dpr isn't.
+    const target = typeof window !== 'undefined' ? window.devicePixelRatio ?? 2 : 1;
+    return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
+}
+function makeRendererInstance(glOptions, canvas) {
+    const customRenderer = (typeof glOptions === 'function' ? glOptions(canvas) : glOptions);
+    if (is.renderer(customRenderer))
+        return customRenderer;
+    return new THREE.WebGLRenderer({
+        powerPreference: 'high-performance',
+        canvas: canvas,
+        antialias: true,
+        alpha: true,
+        ...glOptions,
+    });
+}
+function makeCameraInstance(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 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;
+}
+
+/**
+ * Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
+ */
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+    const captureData = captures.get(obj);
+    if (captureData) {
+        captures.delete(obj);
+        // If this was the last capturing object for this pointer
+        if (captures.size === 0) {
+            capturedMap.delete(pointerId);
+            captureData.target.releasePointerCapture(pointerId);
+        }
+    }
+}
+function removeInteractivity(store, object) {
+    const { internal } = store.snapshot;
+    // Removes every trace of an object from the data store
+    internal.interaction = internal.interaction.filter((o) => o !== object);
+    internal.initialHits = internal.initialHits.filter((o) => o !== object);
+    internal.hovered.forEach((value, key) => {
+        if (value.eventObject === object || value.object === object) {
+            // Clear out intersects, they are outdated by now
+            internal.hovered.delete(key);
+        }
+    });
+    internal.capturedMap.forEach((captures, pointerId) => {
+        releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
+    });
+}
+function createEvents(store) {
+    /** Calculates delta */
+    function calculateDistance(event) {
+        const internal = store.get('internal');
+        const dx = event.offsetX - internal.initialClick[0];
+        const dy = event.offsetY - internal.initialClick[1];
+        return Math.round(Math.sqrt(dx * dx + dy * dy));
+    }
+    /** Returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc */
+    function filterPointerEvents(objects) {
+        return objects.filter((obj) => ['move', 'over', 'enter', 'out', 'leave'].some((name) => {
+            const eventName = `pointer${name}`;
+            return getLocalState(obj)?.handlers?.[eventName];
+        }));
+    }
+    function intersect(event, filter) {
+        const state = store.get();
+        const duplicates = new Set();
+        const intersections = [];
+        // Allow callers to eliminate event objects
+        const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
+        // Reset all raycaster cameras to undefined
+        for (let i = 0; i < eventsObjects.length; i++) {
+            const state = getLocalState(eventsObjects[i])?.store.snapshot;
+            if (state) {
+                state.raycaster.camera = undefined;
+            }
+        }
+        if (!state.previousRoot) {
+            // Make sure root-level pointer and ray are set up
+            state.events.compute?.(event, store, null);
+        }
+        function handleRaycast(obj) {
+            const objLocalState = getLocalState(obj);
+            const objStore = objLocalState?.store;
+            const objState = objStore?.snapshot;
+            // Skip event handling when noEvents is set, or when the raycasters camera is null
+            if (!objState || !objState.events.enabled || objState.raycaster.camera === null)
+                return [];
+            // When the camera is undefined we have to call the event layers update function
+            if (objState.raycaster.camera === undefined) {
+                objState.events.compute?.(event, objStore, objState.previousRoot);
+                // If the camera is still undefined we have to skip this layer entirely
+                if (objState.raycaster.camera === undefined)
+                    objState.raycaster.camera = null;
+            }
+            // Intersect object by object
+            return objState.raycaster.camera ? objState.raycaster.intersectObject(obj, true) : [];
+        }
+        // Collect events
+        let hits = eventsObjects
+            // Intersect objects
+            .flatMap(handleRaycast)
+            // Sort by event priority and distance
+            .sort((a, b) => {
+            const aState = getLocalState(a.object)?.store?.snapshot;
+            const bState = getLocalState(b.object)?.store?.snapshot;
+            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;
+        });
+        // https://github.com/mrdoob/three.js/issues/16031
+        // Allow custom userland intersect sort order, this likely only makes sense on the root filter
+        if (state.events.filter)
+            hits = state.events.filter(hits, store);
+        // Bubble up the events, find the event source (eventObject)
+        for (const hit of hits) {
+            let eventObject = hit.object;
+            // bubble event up
+            while (eventObject) {
+                if (getLocalState(eventObject)?.eventCount) {
+                    intersections.push({ ...hit, eventObject });
+                }
+                eventObject = eventObject.parent;
+            }
+        }
+        // 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()) {
+                if (!duplicates.has(makeId(captureData.intersection)))
+                    intersections.push(captureData.intersection);
+            }
+        }
+        return intersections;
+    }
+    /**  Handles intersections by forwarding them to handlers */
+    function handleIntersects(intersections, event, delta, callback) {
+        const rootState = store.snapshot;
+        // If anything has been found, forward it to the event listeners
+        if (intersections.length) {
+            const localState = { stopped: false };
+            for (const hit of intersections) {
+                const { raycaster, pointer, camera, internal } = getLocalState(hit.object)?.store?.snapshot || rootState;
+                const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
+                const hasPointerCapture = (id) => internal.capturedMap.get(id)?.has(hit.eventObject) ?? false;
+                const setPointerCapture = (id) => {
+                    const captureData = { intersection: hit, target: event.target };
+                    if (internal.capturedMap.has(id)) {
+                        // if the pointerId was previously captured, we add the hit to the
+                        // event capturedMap.
+                        internal.capturedMap.get(id).set(hit.eventObject, captureData);
+                    }
+                    else {
+                        // if the pointerId was not previously captured, we create a map
+                        // containing the hitObject, and the hit. hitObject is used for
+                        // faster access.
+                        internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
+                    }
+                    // Call the original event now
+                    event.target.setPointerCapture(id);
+                };
+                const releasePointerCapture = (id) => {
+                    const captures = internal.capturedMap.get(id);
+                    if (captures) {
+                        releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+                    }
+                };
+                // Add native event props
+                const extractEventProps = {};
+                // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+                for (const prop in event) {
+                    const property = event[prop];
+                    // Only copy over atomics, leave functions alone as these should be
+                    // called as event.nativeEvent.fn()
+                    if (typeof property !== 'function')
+                        extractEventProps[prop] = property;
+                }
+                const raycastEvent = {
+                    ...hit,
+                    ...extractEventProps,
+                    pointer,
+                    intersections,
+                    stopped: localState.stopped,
+                    delta,
+                    unprojectedPoint,
+                    ray: raycaster.ray,
+                    camera,
+                    // 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)
+                    break;
+            }
+        }
+        return intersections;
+    }
+    function cancelPointer(intersections) {
+        const internal = store.get('internal');
+        for (const hoveredObj of internal.hovered.values()) {
+            // When no objects were hit or the the hovered object wasn't found underneath the cursor
+            // we call onPointerOut and delete the object from the hovered-elements map
+            if (!intersections.length ||
+                !intersections.find((hit) => hit.object === hoveredObj.object &&
+                    hit.index === hoveredObj.index &&
+                    hit.instanceId === hoveredObj.instanceId)) {
+                const eventObject = hoveredObj.eventObject;
+                const instance = getLocalState(eventObject);
+                const handlers = instance?.handlers;
+                internal.hovered.delete(makeId(hoveredObj));
+                if (instance?.eventCount) {
+                    // Clear out intersects, they are outdated by now
+                    const data = { ...hoveredObj, intersections };
+                    handlers?.pointerout?.(data);
+                    handlers?.pointerleave?.(data);
+                }
+            }
+        }
+    }
+    function pointerMissed(event, objects) {
+        for (let i = 0; i < objects.length; i++) {
+            const instance = getLocalState(objects[i]);
+            instance?.handlers.pointermissed?.(event);
+        }
+    }
+    function handlePointer(name) {
+        // Deal with cancelation
+        switch (name) {
+            case 'pointerleave':
+            case 'pointercancel':
+                return () => cancelPointer([]);
+            case 'lostpointercapture':
+                return (event) => {
+                    const { internal } = store.snapshot;
+                    if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
+                        // If the object event interface had lostpointercapture, we'd call it here on every
+                        // object that's getting removed. We call it on the next frame because lostpointercapture
+                        // fires before pointerup. Otherwise pointerUp would never be called if the event didn't
+                        // happen in the object it originated from, leaving components in a in-between state.
+                        requestAnimationFrame(() => {
+                            // Only release if pointer-up didn't do it already
+                            if (internal.capturedMap.has(event.pointerId)) {
+                                internal.capturedMap.delete(event.pointerId);
+                                cancelPointer([]);
+                            }
+                        });
+                    }
+                };
+        }
+        // Any other pointer goes here ...
+        return function handleEvent(event) {
+            const pointerMissed$ = store['pointerMissed$'];
+            const internal = store.get('internal');
+            // prepareRay(event)
+            internal.lastEvent.nativeElement = event;
+            // Get fresh intersects
+            const isPointerMove = name === 'pointermove';
+            const isClickEvent = name === 'click' || name === 'contextmenu' || name === 'dblclick';
+            const filter = isPointerMove ? filterPointerEvents : undefined;
+            const hits = 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);
+                    pointerMissed$.next(event);
+                }
+            }
+            // Take care of unhover
+            if (isPointerMove)
+                cancelPointer(hits);
+            function onIntersect(data) {
+                const eventObject = data.eventObject;
+                const instance = getLocalState(eventObject);
+                const handlers = instance?.handlers;
+                // Check presence of handlers
+                if (!instance?.eventCount)
+                    return;
+                /*
+        MAYBE TODO, DELETE IF NOT:
+          Check if the object is captured, captured events should not have intersects running in parallel
+          But wouldn't it be better to just replace capturedMap with a single entry?
+          Also, are we OK with straight up making picking up multiple objects impossible?
+
+        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
+        if (pointerId !== undefined) {
+          const capturedMeshSet = internal.capturedMap.get(pointerId)
+          if (capturedMeshSet) {
+            const captured = capturedMeshSet.get(eventObject)
+            if (captured && captured.localState.stopped) return
+          }
+        }*/
+                if (isPointerMove) {
+                    // Move event ...
+                    if (handlers?.pointerover || handlers?.pointerenter || handlers?.pointerout || handlers?.pointerleave) {
+                        // When enter or out is present take care of hover-state
+                        const id = makeId(data);
+                        const hoveredItem = internal.hovered.get(id);
+                        if (!hoveredItem) {
+                            // If the object wasn't previously hovered, book it and call its handler
+                            internal.hovered.set(id, data);
+                            handlers.pointerover?.(data);
+                            handlers.pointerenter?.(data);
+                        }
+                        else if (hoveredItem.stopped) {
+                            // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
+                            data.stopPropagation();
+                        }
+                    }
+                    // Call mouse move
+                    handlers?.pointermove?.(data);
+                }
+                else {
+                    // All other events ...
+                    const handler = handlers?.[name];
+                    if (handler) {
+                        // Forward all events back to their respective handlers with the exception of click events,
+                        // which must use the initial target
+                        if (!isClickEvent || internal.initialHits.includes(eventObject)) {
+                            // Missed events have to come first
+                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
+                            // Now call the handler
+                            handler(data);
+                        }
+                    }
+                    else {
+                        // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
+                        if (isClickEvent && internal.initialHits.includes(eventObject)) {
+                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
+                        }
+                    }
+                }
+            }
+            handleIntersects(hits, event, delta, onIntersect);
+        };
+    }
+    return { handlePointer };
+}
+
+const DOM_EVENTS = {
+    click: false,
+    contextmenu: false,
+    dblclick: false,
+    wheel: false, // passive wheel errors with OrbitControls
+    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;
+        }, {}),
+        update: () => {
+            const { events, internal } = store.get();
+            if (internal.lastEvent?.nativeElement && events.handlers)
+                events.handlers.pointermove(internal.lastEvent.nativeElement);
+        },
+        connect: (target) => {
+            const state = store.get();
+            state.events.disconnect?.();
+            state.setEvents({ connected: target });
+            Object.entries(state.events.handlers ?? {}).forEach(([eventName, eventHandler]) => {
+                const passive = DOM_EVENTS[eventName];
+                target.addEventListener(eventName, eventHandler, { passive });
+            });
+        },
+        disconnect: () => {
+            const { events, setEvents } = store.get();
+            if (events.connected) {
+                Object.entries(events.handlers ?? {}).forEach(([eventName, eventHandler]) => {
+                    if (events.connected instanceof HTMLElement) {
+                        events.connected.removeEventListener(eventName, eventHandler);
+                    }
+                });
+                setEvents({ connected: undefined });
+            }
+        },
+    };
+}
+
+// This function prepares a set of changes to be applied to the instance
+function diffProps(instance, props) {
+    const propsEntries = Object.entries(props);
+    const changes = [];
+    for (const [propKey, propValue] of propsEntries) {
+        let key = propKey;
+        if (is.colorSpaceExist(instance)) {
+            if (propKey === 'encoding') {
+                key = 'colorSpace';
+            }
+            else if (propKey === 'outputEncoding') {
+                key = 'outputColorSpace';
+            }
+        }
+        if (is.equ(propValue, instance[key]))
+            continue;
+        changes.push([propKey, propValue]);
+    }
+    return changes;
+}
+// This function applies a set of changes to the instance
+function applyProps(instance, props) {
+    // if props is empty
+    if (!Object.keys(props).length)
+        return instance;
+    // filter equals, and reserved props
+    const localState = getLocalState(instance);
+    const rootState = localState?.store?.snapshot ?? {};
+    const changes = diffProps(instance, props);
+    for (let i = 0; i < changes.length; i++) {
+        let [key, value] = changes[i];
+        // Alias (output)encoding => (output)colorSpace (since r152)
+        // https://github.com/pmndrs/react-three-fiber/pull/2829
+        if (is.colorSpaceExist(instance)) {
+            const sRGBEncoding = 3001;
+            const SRGBColorSpace = 'srgb';
+            const LinearSRGBColorSpace = 'srgb-linear';
+            if (key === 'encoding') {
+                key = 'colorSpace';
+                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+            }
+            else if (key === 'outputEncoding') {
+                key = 'outputColorSpace';
+                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+            }
+        }
+        const currentInstance = instance;
+        const targetProp = currentInstance[key];
+        // special treatmen for objects with support for set/copy, and layers
+        if (targetProp && targetProp['set'] && (targetProp['copy'] || targetProp instanceof THREE.Layers)) {
+            const isColor = targetProp instanceof THREE.Color;
+            // if value is an array
+            if (Array.isArray(value)) {
+                if (targetProp['fromArray'])
+                    targetProp['fromArray'](value);
+                else
+                    targetProp['set'](...value);
+            } // test again target.copy
+            else if (targetProp['copy'] &&
+                value &&
+                value.constructor &&
+                targetProp.constructor.name === value.constructor.name) {
+                targetProp['copy'](value);
+                if (!THREE.ColorManagement && !rootState.linear && isColor)
+                    targetProp['convertSRGBToLinear']();
+            } // if nothing else fits, just set the single value, ignore undefined
+            else if (value !== undefined) {
+                const isColor = targetProp instanceof THREE.Color;
+                // allow setting array scalars
+                if (!isColor && targetProp['setScalar'])
+                    targetProp['setScalar'](value);
+                // layers have no copy function, copy the mask
+                else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers)
+                    targetProp.mask = value.mask;
+                // otherwise just set ...
+                else
+                    targetProp['set'](value);
+                // auto-convert srgb
+                if (!THREE.ColorManagement && !rootState?.linear && isColor)
+                    targetProp.convertSRGBToLinear();
+            }
+        } // else just overwrite the value
+        else {
+            currentInstance[key] = value;
+            // auto-convert srgb textures
+            if (currentInstance[key] instanceof THREE.Texture &&
+                currentInstance[key].format === THREE.RGBAFormat &&
+                currentInstance[key].type === THREE.UnsignedByteType) {
+                const texture = currentInstance[key];
+                if (rootState?.gl) {
+                    if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
+                        texture.colorSpace = rootState.gl.outputColorSpace;
+                    // @ts-expect-error - these are removed in new version of three but still available in older versions
+                    else
+                        texture['encoding'] = rootState.gl['outputEncoding'];
+                }
+            }
+        }
+        checkUpdate(currentInstance[key]);
+        checkUpdate(targetProp);
+        invalidateInstance(instance);
+    }
+    const instanceHandlersCount = localState?.eventCount;
+    const parent = localState?.instanceStore?.get('parent');
+    if (parent && rootState.internal && instance['raycast'] && instanceHandlersCount !== localState?.eventCount) {
+        // Pre-emptively remove the instance from the interaction manager
+        const index = rootState.internal.interaction.indexOf(instance);
+        if (index > -1)
+            rootState.internal.interaction.splice(index, 1);
+        // Add the instance to the interaction manager only when it has handlers
+        if (localState?.eventCount)
+            rootState.internal.interaction.push(instance);
+    }
+    if (parent && localState?.afterUpdate && localState.afterUpdate.observed && changes.length) {
+        localState.afterUpdate.next(instance);
+    }
+    return instance;
+}
+
+const shallowLoose = { objects: 'shallow', strict: false };
+const roots = new Map();
+function injectCanvasRootInitializer(injector) {
+    return assertInjector(injectCanvasRootInitializer, injector, () => {
+        const injectedStore = injectNgtStore();
+        const loop = injectNgtLoop();
+        return (canvas) => {
+            const exist = roots.has(canvas);
+            let store = roots.get(canvas);
+            if (store) {
+                console.warn('[NGT] Same canvas root is being created twice');
+            }
+            store ||= injectedStore;
+            if (!store) {
+                throw new Error('[NGT] No store initialized');
+            }
+            if (!exist) {
+                roots.set(canvas, store);
+            }
+            let isConfigured = false;
+            let lastCamera;
+            return {
+                isConfigured,
+                destroy: (timeout = 500) => {
+                    const root = roots.get(canvas);
+                    if (root) {
+                        root.update((state) => ({ internal: { ...state.internal, active: false } }));
+                        setTimeout(() => {
+                            try {
+                                const state = root.get();
+                                state.events.disconnect?.();
+                                state.gl?.renderLists?.dispose?.();
+                                state.gl?.forceContextLoss?.();
+                                if (state.gl?.xr)
+                                    state.xr.disconnect();
+                                dispose(state);
+                                roots.delete(canvas);
+                            }
+                            catch (e) {
+                                console.error('[NGT] Unexpected error while destroying Canvas Root', e);
+                            }
+                        }, timeout);
+                    }
+                },
+                configure: (inputs) => {
+                    const { shadows = false, linear = false, flat = false, legacy = false, orthographic = false, frameloop = 'always', dpr = [1, 2], gl: glOptions, size: sizeOptions, camera: cameraOptions, raycaster: raycasterOptions, scene: sceneOptions, events, lookAt, performance, } = inputs;
+                    const state = store.snapshot;
+                    const stateToUpdate = {};
+                    // setup renderer
+                    let gl = state.gl;
+                    if (!state.gl)
+                        stateToUpdate.gl = gl = makeRendererInstance(glOptions, canvas);
+                    // setup raycaster
+                    let raycaster = state.raycaster;
+                    if (!raycaster)
+                        stateToUpdate.raycaster = raycaster = new THREE.Raycaster();
+                    // set raycaster options
+                    const { params, ...options } = raycasterOptions || {};
+                    if (!is.equ(options, raycaster, shallowLoose))
+                        applyProps(raycaster, options);
+                    if (!is.equ(params, raycaster.params, shallowLoose)) {
+                        applyProps(raycaster, { params: { ...raycaster.params, ...(params || {}) } });
+                    }
+                    // Create default camera, don't overwrite any user-set state
+                    if (!state.camera || (state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose))) {
+                        lastCamera = cameraOptions;
+                        const isCamera = is.camera(cameraOptions);
+                        let camera = isCamera ? cameraOptions : makeCameraInstance(orthographic, state.size);
+                        if (!isCamera) {
+                            camera.position.z = 5;
+                            if (cameraOptions) {
+                                applyProps(camera, cameraOptions);
+                                if ('aspect' in cameraOptions ||
+                                    'left' in cameraOptions ||
+                                    'right' in cameraOptions ||
+                                    'top' in cameraOptions ||
+                                    'bottom' in cameraOptions) {
+                                    Object.assign(camera, { manual: true });
+                                    camera?.updateProjectionMatrix();
+                                }
+                            }
+                            // always look at center or passed-in lookAt by default
+                            if (!state.camera && !cameraOptions?.rotation && !cameraOptions?.quaternion) {
+                                if (Array.isArray(lookAt))
+                                    camera.lookAt(lookAt[0], lookAt[1], lookAt[2]);
+                                else if (lookAt instanceof THREE.Vector3)
+                                    camera.lookAt(lookAt);
+                                else
+                                    camera.lookAt(0, 0, 0);
+                            }
+                            // update projection matrix after applyprops
+                            camera.updateProjectionMatrix?.();
+                        }
+                        if (!is.instance(camera))
+                            camera = prepare(camera, { store });
+                        stateToUpdate.camera = camera;
+                        // Configure raycaster
+                        // https://github.com/pmndrs/react-xr/issues/300
+                        raycaster.camera = camera;
+                    }
+                    // Set up scene (one time only!)
+                    if (!state.scene) {
+                        let scene;
+                        if (sceneOptions instanceof THREE.Scene) {
+                            scene = sceneOptions;
+                        }
+                        else {
+                            scene = new THREE.Scene();
+                            if (sceneOptions)
+                                applyProps(scene, sceneOptions);
+                        }
+                        stateToUpdate.scene = prepare(scene, { store });
+                    }
+                    // Set up XR (one time only!)
+                    if (!state.xr) {
+                        // Handle frame behavior in WebXR
+                        const handleXRFrame = (timestamp, frame) => {
+                            const state = store.snapshot;
+                            if (state.frameloop === 'never')
+                                return;
+                            loop.advance(timestamp, true, store, frame);
+                        };
+                        // Toggle render switching on session
+                        const handleSessionChange = () => {
+                            const state = store.snapshot;
+                            state.gl.xr.enabled = state.gl.xr.isPresenting;
+                            state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+                            if (!state.gl.xr.isPresenting)
+                                loop.invalidate(store);
+                        };
+                        // WebXR session manager
+                        const xr = {
+                            connect: () => {
+                                gl.xr.addEventListener('sessionstart', handleSessionChange);
+                                gl.xr.addEventListener('sessionend', handleSessionChange);
+                            },
+                            disconnect: () => {
+                                gl.xr.removeEventListener('sessionstart', handleSessionChange);
+                                gl.xr.removeEventListener('sessionend', handleSessionChange);
+                            },
+                        };
+                        // Subscribe to WebXR session events
+                        if (gl.xr && typeof gl.xr.addEventListener === 'function')
+                            xr.connect();
+                        stateToUpdate.xr = xr;
+                    }
+                    // Set shadowmap
+                    if (gl.shadowMap) {
+                        const oldEnabled = gl.shadowMap.enabled;
+                        const oldType = gl.shadowMap.type;
+                        gl.shadowMap.enabled = !!shadows;
+                        if (typeof shadows === 'boolean') {
+                            gl.shadowMap.type = THREE.PCFSoftShadowMap;
+                        }
+                        else if (typeof shadows === 'string') {
+                            const types = {
+                                basic: THREE.BasicShadowMap,
+                                percentage: THREE.PCFShadowMap,
+                                soft: THREE.PCFSoftShadowMap,
+                                variance: THREE.VSMShadowMap,
+                            };
+                            gl.shadowMap.type = types[shadows] ?? THREE.PCFSoftShadowMap;
+                        }
+                        else if (is.obj(shadows)) {
+                            Object.assign(gl.shadowMap, shadows);
+                        }
+                        if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type)
+                            checkNeedsUpdate(gl.shadowMap);
+                    }
+                    // Safely set color management if available.
+                    // Avoid accessing THREE.ColorManagement to play nice with older versions
+                    if (THREE.ColorManagement) {
+                        const ColorManagement = THREE.ColorManagement;
+                        if ('enabled' in ColorManagement)
+                            ColorManagement['enabled'] = !legacy || false;
+                        else if ('legacyMode' in ColorManagement)
+                            ColorManagement['legacyMode'] = legacy || true;
+                    }
+                    if (!isConfigured) {
+                        // set color space and tonemapping preferences once
+                        const LinearEncoding = 3000;
+                        const sRGBEncoding = 3001;
+                        applyProps(gl, {
+                            outputEncoding: linear ? LinearEncoding : sRGBEncoding,
+                            toneMapping: flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping,
+                        });
+                    }
+                    // Update color management state
+                    if (state.legacy !== legacy)
+                        stateToUpdate.legacy = legacy;
+                    if (state.linear !== linear)
+                        stateToUpdate.linear = linear;
+                    if (state.flat !== flat)
+                        stateToUpdate.flat = flat;
+                    // Set gl props
+                    gl.setClearAlpha(0);
+                    gl.setPixelRatio(makeDpr(state.viewport.dpr));
+                    gl.setSize(state.size.width, state.size.height);
+                    if (is.obj(glOptions) &&
+                        !(typeof glOptions === 'function') &&
+                        !is.renderer(glOptions) &&
+                        !is.equ(glOptions, gl, shallowLoose)) {
+                        applyProps(gl, glOptions);
+                    }
+                    // Store events internally
+                    if (events && !state.events.handlers)
+                        stateToUpdate.events = events(store);
+                    // Check performance
+                    if (performance && !is.equ(performance, state.performance, shallowLoose)) {
+                        stateToUpdate.performance = { ...state.performance, ...performance };
+                    }
+                    store.update(stateToUpdate);
+                    // Check size, allow it to take on container bounds initially
+                    const size = computeInitialSize(canvas, sizeOptions);
+                    if (!is.equ(size, state.size, shallowLoose)) {
+                        state.setSize(size.width, size.height, size.top, size.left);
+                    }
+                    // Check pixelratio
+                    if (dpr && state.viewport.dpr !== makeDpr(dpr))
+                        state.setDpr(dpr);
+                    // Check frameloop
+                    if (state.frameloop !== frameloop)
+                        state.setFrameloop(frameloop);
+                    isConfigured = true;
+                },
+            };
+        };
+    });
+}
+function computeInitialSize(canvas, defaultSize) {
+    if (defaultSize) {
+        return defaultSize;
+    }
+    if (typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
+        return canvas.parentElement.getBoundingClientRect();
+    }
+    if (typeof OffscreenCanvas !== 'undefined' && canvas instanceof OffscreenCanvas) {
+        return { width: canvas.width, height: canvas.height, top: 0, left: 0 };
+    }
+    return { width: 0, height: 0, top: 0, left: 0 };
+}
+// Disposes an object and all its properties
+function dispose(obj) {
+    if (obj.dispose && obj.type !== 'Scene')
+        obj.dispose();
+    for (const p in obj) {
+        p.dispose?.();
+        delete obj[p];
+    }
+}
+
+function createSubs(callback, subs) {
+    const sub = { callback };
+    subs.add(sub);
+    return () => void subs.delete(sub);
+}
+const globalEffects = new Set();
+const globalAfterEffects = new Set();
+const globalTailEffects = new Set();
+/**
+ * Adds a global render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
+ */
+const addEffect = (callback) => createSubs(callback, globalEffects);
+/**
+ * Adds a global after-render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
+ */
+const addAfterEffect = (callback) => createSubs(callback, globalAfterEffects);
+/**
+ * Adds a global callback which is called when rendering stops.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
+ */
+const addTail = (callback) => createSubs(callback, globalTailEffects);
+function run(effects, timestamp) {
+    if (!effects.size)
+        return;
+    for (const { callback } of effects.values()) {
+        callback(timestamp);
+    }
+}
+function flushGlobalEffects(type, timestamp) {
+    switch (type) {
+        case 'before':
+            return run(globalEffects, timestamp);
+        case 'after':
+            return run(globalAfterEffects, timestamp);
+        case 'tail':
+            return run(globalTailEffects, timestamp);
+    }
+}
+function render(timestamp, store, frame) {
+    const state = store.snapshot;
+    // 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 (beforeRender)
+    const subscribers = state.internal.subscribers;
+    for (let i = 0; i < subscribers.length; i++) {
+        const subscription = subscribers[i];
+        subscription.callback({ ...subscription.store.snapshot, delta, frame });
+    }
+    // Render content
+    if (!state.internal.priority && state.gl.render)
+        state.gl.render(state.scene, state.camera);
+    // Decrease frame count
+    state.internal.frames = Math.max(0, state.internal.frames - 1);
+    return state.frameloop === 'always' ? 1 : state.internal.frames;
+}
+function createLoop(roots) {
+    let running = false;
+    let injectBeforeRenderInProgress = false;
+    let repeat;
+    let frame;
+    function loop(timestamp) {
+        frame = requestAnimationFrame(loop);
+        running = true;
+        repeat = 0;
+        // Run effects
+        flushGlobalEffects('before', timestamp);
+        // Render all roots
+        injectBeforeRenderInProgress = true;
+        for (const root of roots.values()) {
+            const state = root.snapshot;
+            // If the frameloop is invalidated, do not run another frame
+            if (state.internal.active &&
+                (state.frameloop === 'always' || state.internal.frames > 0) &&
+                !state.gl.xr?.isPresenting) {
+                repeat += render(timestamp, root);
+            }
+        }
+        injectBeforeRenderInProgress = false;
+        // Run after-effects
+        flushGlobalEffects('after', timestamp);
+        // Stop the loop if nothing invalidates it
+        if (repeat === 0) {
+            // Tail call effects, they are called when rendering stops
+            flushGlobalEffects('tail', timestamp);
+            // Flag end of operation
+            running = false;
+            return cancelAnimationFrame(frame);
+        }
+    }
+    function invalidate(store, frames = 1) {
+        const state = store?.snapshot;
+        if (!state)
+            return roots.forEach((root) => invalidate(root, frames));
+        if (state.gl.xr?.isPresenting || !state.internal.active || state.frameloop === 'never')
+            return;
+        if (frames > 1) {
+            // legacy support for people using frames parameters
+            // Increase frames, do not go higher than 60
+            state.internal.frames = Math.min(60, state.internal.frames + frames);
+        }
+        else {
+            if (injectBeforeRenderInProgress) {
+                // called from within a injectBeforeRender, it means the user wants an additional frame
+                state.internal.frames = 2;
+            }
+            else {
+                // the user needs a new frame, no need to increment
+                state.internal.frames = 1;
+            }
+        }
+        // If the render-loop isn't active, start it
+        if (!running) {
+            running = true;
+            requestAnimationFrame(loop);
+        }
+    }
+    function advance(timestamp, runGlobalEffects = true, store, frame) {
+        if (runGlobalEffects)
+            flushGlobalEffects('before', timestamp);
+        if (!store)
+            for (const root of roots.values())
+                render(timestamp, root);
+        else
+            render(timestamp, store, frame);
+        if (runGlobalEffects)
+            flushGlobalEffects('after', timestamp);
+    }
+    return {
+        loop,
+        /**
+         * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
+         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
+         */
+        invalidate,
+        /**
+         * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
+         * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
+         */
+        advance,
+    };
+}
+const [injectNgtLoop] = createInjectionToken(() => createLoop(roots));
+
+function storeFactory(previousStore) {
+    const document = inject(DOCUMENT);
+    const window = document.defaultView;
+    if (!window) {
+        // TODO: revisit this when we need to support multiple platforms
+        throw new Error(`[NGT] Window is not available.`);
+    }
+    const loop = injectNgtLoop();
+    // NOTE: using Subject because we do not care about late-subscribers
+    const pointerMissed$ = new Subject();
+    const store = signalStore(({ get, update }) => {
+        const { invalidate, advance } = loop;
+        const position = new THREE.Vector3();
+        const defaultTarget = new THREE.Vector3();
+        const tempTarget = new THREE.Vector3();
+        function getCurrentViewport(camera = get('camera'), target = defaultTarget, size = get('size')) {
+            const { width, height, top, left } = size;
+            const aspect = width / height;
+            if (target instanceof THREE.Vector3)
+                tempTarget.copy(target);
+            else
+                tempTarget.set(...target);
+            const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+            if (is.orthographicCamera(camera)) {
+                return { width: width / camera.zoom, height: height / camera.zoom, top, left, factor: 1, distance, aspect };
+            }
+            const fov = (camera.fov * Math.PI) / 180; // convert vertical fov to radians
+            const h = 2 * Math.tan(fov / 2) * distance; // visible height
+            const w = h * (width / height);
+            return { width: w, height: h, top, left, factor: width / w, distance, aspect };
+        }
+        let performanceTimeout = undefined;
+        const setPerformanceCurrent = (current) => update((state) => ({ performance: { ...state.performance, current } }));
+        const pointer = new THREE.Vector2();
+        return {
+            pointerMissed$: pointerMissed$.asObservable(),
+            events: { priority: 1, enabled: true, connected: false },
+            invalidate: (frames = 1) => invalidate(store, frames),
+            advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, store),
+            legacy: false,
+            linear: false,
+            flat: false,
+            controls: null,
+            clock: new THREE.Clock(),
+            pointer,
+            frameloop: 'always',
+            performance: {
+                current: 1,
+                min: 0.5,
+                max: 1,
+                debounce: 200,
+                regress: () => {
+                    const state = get();
+                    // Clear timeout
+                    if (performanceTimeout)
+                        clearTimeout(performanceTimeout);
+                    // Set lower bound performance
+                    if (state.performance.current !== state.performance.min)
+                        setPerformanceCurrent(state.performance.min);
+                    // Go back to upper bound performance after a while unless something regresses meanwhile
+                    performanceTimeout = setTimeout(() => {
+                        setPerformanceCurrent(get('performance', 'max'));
+                        // safeDetectChanges(cdr);
+                    }, state.performance.debounce);
+                },
+            },
+            size: { width: 0, height: 0, top: 0, left: 0, updateStyle: false },
+            viewport: {
+                initialDpr: 0,
+                dpr: 0,
+                width: 0,
+                height: 0,
+                top: 0,
+                left: 0,
+                aspect: 0,
+                distance: 0,
+                factor: 0,
+                getCurrentViewport,
+            },
+            setEvents: (events) => update((state) => ({ ...state, events: { ...state.events, ...events } })),
+            setSize: (width, height, top, left) => {
+                const camera = get('camera');
+                const size = { width, height, top: top || 0, left: left || 0 };
+                update((state) => ({
+                    size,
+                    viewport: { ...state.viewport, ...getCurrentViewport(camera, defaultTarget, size) },
+                }));
+            },
+            setDpr: (dpr) => update((state) => {
+                const resolved = makeDpr(dpr, window);
+                return { viewport: { ...state.viewport, dpr: resolved, initialDpr: state.viewport.initialDpr || resolved } };
+            }),
+            setFrameloop: (frameloop = 'always') => {
+                const clock = get('clock');
+                // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+                clock.stop();
+                clock.elapsedTime = 0;
+                if (frameloop !== 'never') {
+                    clock.start();
+                    clock.elapsedTime = 0;
+                }
+                update(() => ({ frameloop }));
+            },
+            previousRoot: previousStore,
+            internal: {
+                active: false,
+                priority: 0,
+                frames: 0,
+                lastEvent: new ElementRef(null),
+                interaction: [],
+                hovered: new Map(),
+                subscribers: [],
+                initialClick: [0, 0],
+                initialHits: [],
+                capturedMap: new Map(),
+                subscribe: (callback, priority = 0, _store = store) => {
+                    const internal = get('internal');
+                    // If this subscription was given a priority, it takes rendering into its own hands
+                    // For that reason we switch off automatic rendering and increase the manual flag
+                    // As long as this flag is positive there can be no internal rendering at all
+                    // because there could be multiple render subscriptions
+                    internal.priority = internal.priority + (priority > 0 ? 1 : 0);
+                    internal.subscribers.push({ callback, priority, store: _store });
+                    // Register subscriber and sort layers from lowest to highest, meaning,
+                    // highest priority renders last (on top of the other frames)
+                    internal.subscribers = internal.subscribers.sort((a, b) => (a.priority || 0) - (b.priority || 0));
+                    return () => {
+                        const internal = get('internal');
+                        if (internal?.subscribers) {
+                            // Decrease manual flag if this subscription had a priority
+                            internal.priority = internal.priority - (priority > 0 ? 1 : 0);
+                            // Remove subscriber from list
+                            internal.subscribers = internal.subscribers.filter((s) => s.callback !== callback);
+                        }
+                    };
+                },
+            },
+        };
+    });
+    Object.defineProperty(store, 'pointerMissed$', { get: () => pointerMissed$ });
+    let { size: oldSize, viewport: { dpr: oldDpr }, camera: oldCamera, } = store.snapshot;
+    const [camera, size, viewportDpr] = [store.select('camera'), store.select('size'), store.select('viewport', 'dpr')];
+    effect(() => {
+        const [newCamera, newSize, newDpr, gl] = [camera(), size(), viewportDpr(), store.snapshot.gl];
+        // Resize camera and renderer on changes to size and pixel-ratio
+        if (newSize !== oldSize || newDpr !== oldDpr) {
+            oldSize = newSize;
+            oldDpr = newDpr;
+            // Update camera & renderer
+            updateCamera(newCamera, newSize);
+            gl.setPixelRatio(newDpr);
+            const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
+            gl.setSize(newSize.width, newSize.height, updateStyle);
+        }
+        // Update viewport once the camera changes
+        if (newCamera !== oldCamera) {
+            oldCamera = newCamera;
+            updateCamera(newCamera, newSize);
+            // Update viewport
+            store.update((state) => ({ viewport: { ...state.viewport, ...state.viewport.getCurrentViewport(newCamera) } }));
+        }
+    });
+    return store;
+}
+const NGT_STORE = new InjectionToken('NgtStore Token');
+const [injectNgtStore, provideNgtStore] = createInjectionToken(storeFactory, {
+    isRoot: false,
+    deps: [[new Optional(), new SkipSelf(), NGT_STORE]],
+    token: NGT_STORE,
+});
+
+const catalogue = {};
+function extend(objects) {
+    Object.assign(catalogue, objects);
+}
+const [injectNgtCatalogue] = createInjectionToken(() => catalogue);
+
+const ROUTED_SCENE = '__ngt_renderer_is_routed_scene__';
+const HTML = '__ngt_renderer_is_html';
+const SPECIAL_INTERNAL_ADD_COMMENT = '__ngt_renderer_add_comment__';
+const SPECIAL_DOM_TAG = {
+    NGT_PORTAL: 'ngt-portal',
+    NGT_PRIMITIVE: 'ngt-primitive',
+    NGT_VALUE: 'ngt-value',
+};
+const SPECIAL_PROPERTIES = {
+    COMPOUND: 'ngtCompound',
+    RENDER_PRIORITY: 'priority',
+    ATTACH: 'attach',
+    RAW_VALUE: 'rawValue',
+    REF: 'ref',
+};
+const SPECIAL_EVENTS = {
+    BEFORE_RENDER: 'beforeRender',
+    AFTER_UPDATE: 'afterUpdate',
+    AFTER_ATTACH: 'afterAttach',
+};
+
+const [injectNodeType, provideNodeType] = createInjectionToken(() => '', {
+    isRoot: false,
+});
+class NgtCommonDirective {
+    constructor() {
+        this.vcr = inject(ViewContainerRef);
+        this.zone = inject(NgZone);
+        this.template = inject(TemplateRef);
+        this.nodeType = injectNodeType();
+        this.injected = false;
+        this.shouldCreateView = true;
+        const commentNode = this.vcr.element.nativeElement;
+        if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
+            commentNode[SPECIAL_INTERNAL_ADD_COMMENT](this.nodeType);
+            delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
+        }
+        inject(DestroyRef).onDestroy(() => {
+            this.view?.destroy();
+        });
+    }
+    createView() {
+        this.zone.runOutsideAngular(() => {
+            if (this.shouldCreateView) {
+                if (this.view && !this.view.destroyed) {
+                    this.view.destroy();
+                }
+                this.view = this.vcr.createEmbeddedView(this.template);
+                this.view.detectChanges();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: NgtCommonDirective, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtCommonDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+class NgtArgs extends NgtCommonDirective {
+    constructor() {
+        super();
+        this.args = input(null);
+        this.injectedArgs = [];
+        effect(() => {
+            const args = this.args();
+            if (args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null))
+                return;
+            this.injected = false;
+            this.injectedArgs = args;
+            this.createView();
+        });
+    }
+    get value() {
+        if (this.validate()) {
+            this.injected = true;
+            return this.injectedArgs;
+        }
+        return null;
+    }
+    validate() {
+        return !this.injected && !!this.injectedArgs.length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtArgs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.0", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: { classPropertyName: "args", publicName: "args", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideNodeType('args')], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtArgs, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[args]', standalone: true, providers: [provideNodeType('args')] }]
+        }], ctorParameters: () => [] });
+
+class NgtParent extends NgtCommonDirective {
+    constructor() {
+        super();
+        this.parent = input.required();
+        this.injectedParent = null;
+        effect(() => {
+            const parent = this.parent();
+            if (!parent)
+                return;
+            this.injected = false;
+            this.injectedParent = parent;
+            this.createView();
+        });
+    }
+    get value() {
+        if (this.validate()) {
+            this.injected = true;
+            return this.injectedParent;
+        }
+        return null;
+    }
+    validate() {
+        return !this.injected && !!this.injectedParent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtParent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.0", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideNodeType('parent')], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtParent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[parent]', standalone: true, providers: [provideNodeType('parent')] }]
+        }], ctorParameters: () => [] });
+
+function attach(object, value, paths = []) {
+    const [base, ...remaining] = paths;
+    if (!base)
+        return;
+    if (remaining.length === 0) {
+        applyProps(object, { [base]: value });
+    }
+    else {
+        assignEmpty(object, base);
+        attach(object[base], value, remaining);
+    }
+}
+function detach(parent, child, attachProp) {
+    const childLocalState = getLocalState(child);
+    if (childLocalState) {
+        if (Array.isArray(attachProp))
+            attach(parent, childLocalState.previousAttach, attachProp);
+        else
+            childLocalState.previousAttach();
+    }
+}
+function assignEmpty(obj, base) {
+    if ((!Object.hasOwn(obj, base) && Reflect && !!Reflect.has && !Reflect.has(obj, base)) || obj[base] === undefined) {
+        obj[base] = {};
+    }
+}
+function createAttachFunction(cb) {
+    return (parent, child, store) => cb({ parent, child, store });
+}
+
+// @internal
+var NgtRendererClassId;
+(function (NgtRendererClassId) {
+    NgtRendererClassId[NgtRendererClassId["type"] = 0] = "type";
+    NgtRendererClassId[NgtRendererClassId["parent"] = 1] = "parent";
+    NgtRendererClassId[NgtRendererClassId["injectedParent"] = 2] = "injectedParent";
+    NgtRendererClassId[NgtRendererClassId["children"] = 3] = "children";
+    NgtRendererClassId[NgtRendererClassId["destroyed"] = 4] = "destroyed";
+    NgtRendererClassId[NgtRendererClassId["compound"] = 5] = "compound";
+    NgtRendererClassId[NgtRendererClassId["compoundParent"] = 6] = "compoundParent";
+    NgtRendererClassId[NgtRendererClassId["compounded"] = 7] = "compounded";
+    NgtRendererClassId[NgtRendererClassId["queueOps"] = 8] = "queueOps";
+    NgtRendererClassId[NgtRendererClassId["attributes"] = 9] = "attributes";
+    NgtRendererClassId[NgtRendererClassId["properties"] = 10] = "properties";
+    NgtRendererClassId[NgtRendererClassId["rawValue"] = 11] = "rawValue";
+    NgtRendererClassId[NgtRendererClassId["ref"] = 12] = "ref";
+    NgtRendererClassId[NgtRendererClassId["portalContainer"] = 13] = "portalContainer";
+    NgtRendererClassId[NgtRendererClassId["injectorFactory"] = 14] = "injectorFactory";
+})(NgtRendererClassId || (NgtRendererClassId = {}));
+// @internal
+var NgtCompoundClassId;
+(function (NgtCompoundClassId) {
+    NgtCompoundClassId[NgtCompoundClassId["applyFirst"] = 0] = "applyFirst";
+    NgtCompoundClassId[NgtCompoundClassId["props"] = 1] = "props";
+})(NgtCompoundClassId || (NgtCompoundClassId = {}));
+// @internal
+var NgtQueueOpClassId;
+(function (NgtQueueOpClassId) {
+    NgtQueueOpClassId[NgtQueueOpClassId["type"] = 0] = "type";
+    NgtQueueOpClassId[NgtQueueOpClassId["op"] = 1] = "op";
+    NgtQueueOpClassId[NgtQueueOpClassId["done"] = 2] = "done";
+})(NgtQueueOpClassId || (NgtQueueOpClassId = {}));
+function kebabToPascal(str) {
+    // split the string at each hyphen
+    const parts = str.split('-');
+    // map over the parts, capitalizing the first letter of each part
+    const pascalParts = parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1));
+    // join the parts together to create the final PascalCase string
+    return pascalParts.join('');
+}
+function 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
+    // or child store is the parent of parent store
+    if (!cLS.store || cLS.store === pLS.store.get('previousRoot')) {
+        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;
+            }
+            // 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) {
+                if (cLS.instanceStore.get('parent') !== parent) {
+                    cLS.setParent(parent);
+                }
+                // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
+                if (child.__ngt_renderer__[NgtRendererClassId.rawValue] === undefined)
+                    return;
+                attach(parent, child.__ngt_renderer__[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');
+    if (cLS.instanceStore.get('parent') !== parent) {
+        cLS.setParent(parent);
+    }
+    if (cLS.afterAttach)
+        cLS.afterAttach.next({ parent, node: child });
+    invalidateInstance(child);
+    invalidateInstance(parent);
+}
+function removeThreeChild(parent, child, dispose) {
+    const pLS = getLocalState(parent);
+    const cLS = getLocalState(child);
+    // clear parent ref
+    cLS?.setParent(null);
+    // remove child from parent
+    pLS?.remove(child, 'objects');
+    pLS?.remove(child, 'nonObjects');
+    if (cLS?.attach) {
+        detach(parent, child, cLS.attach);
+    }
+    else if (is.object3D(parent) && is.object3D(child)) {
+        parent.remove(child);
+        const store = cLS?.store || pLS?.store;
+        if (store)
+            removeInteractivity(store, child);
+    }
+    const isPrimitive = cLS?.primitive;
+    if (!isPrimitive) {
+        removeThreeRecursive(cLS?.instanceStore.get('objects') || [], child, !!dispose);
+        removeThreeRecursive(child.children, child, !!dispose);
+    }
+    // dispose
+    if (!isPrimitive && 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) {
+    const lS = getLocalState(instance);
+    if (!lS) {
+        console.warn('[NGT] instance has not been prepared yet.');
+        return () => { };
+    }
+    if (eventName === SPECIAL_EVENTS.BEFORE_RENDER) {
+        return lS.store
+            .get('internal')
+            .subscribe((state) => callback({ state, object: instance }), priority || lS.priority || 0);
+    }
+    if (eventName === SPECIAL_EVENTS.AFTER_UPDATE || eventName === SPECIAL_EVENTS.AFTER_ATTACH) {
+        let emitter = lS[eventName];
+        if (!emitter)
+            emitter = lS[eventName] = new ReplaySubject(1);
+        const sub = emitter.subscribe(callback);
+        // NOTE: for afterAttach event, if the instance already has a parent,
+        //  then we'll emit the event immediately
+        if (eventName === SPECIAL_EVENTS.AFTER_ATTACH && untracked(lS.parent)) {
+            emitter.next({ parent: untracked(lS.parent), node: instance });
+        }
+        return () => {
+            sub.unsubscribe();
+            if (emitter && !emitter.observed) {
+                emitter.complete();
+            }
+        };
+    }
+    if (!lS.handlers)
+        lS.handlers = {};
+    // try to get the previous handler. compound might have one, the THREE object might also have one with the same name
+    const previousHandler = lS.handlers[eventName];
+    // readjust the callback
+    const updatedCallback = (event) => {
+        if (previousHandler)
+            previousHandler(event);
+        callback(event);
+    };
+    Object.assign(lS.handlers, { [eventName]: updatedCallback });
+    // increment the count everytime
+    lS.eventCount += 1;
+    // but only add the instance (target) to the interaction array (so that it is handled by the EventManager with Raycast)
+    // the first time eventCount is incremented
+    if (lS.eventCount === 1 && instance['raycast'])
+        lS.store.get('internal', 'interaction').push(instance);
+    // clean up the event listener by removing the target from the interaction array
+    return () => {
+        const lS = getLocalState(instance);
+        if (lS) {
+            lS.eventCount -= 1;
+            const interactions = lS.store.get('internal', 'interaction') || [];
+            const index = interactions.findIndex((obj) => obj.uuid === instance.uuid);
+            if (index >= 0)
+                interactions.splice(index, 1);
+        }
+    };
+}
+
+const NGT_COMPOUND_PREFIXES = new InjectionToken('NgtCompoundPrefixes');
+class NgtRendererStore {
+    constructor(rootState) {
+        this.rootState = rootState;
+        this.argsCommentNodes = [];
+        this.parentCommentNodes = [];
+        this.portalCommentsNodes = [];
+    }
+    createNode(type, node) {
+        const state = [
+            type,
+            null,
+            null,
+            [],
+            false,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+        ];
+        const rendererNode = Object.assign(node, { __ngt_renderer__: state });
+        // NOTE: assign ownerDocument to node so we can use HostListener in Component
+        if (!rendererNode['ownerDocument'])
+            rendererNode['ownerDocument'] = this.rootState.document;
+        // NOTE: assign injectorFactory on non-three type since
+        // rendererNode is an instance of DOM Node
+        if (state[NgtRendererClassId.type] !== 'three') {
+            state[NgtRendererClassId.injectorFactory] = () => getDebugNode(rendererNode)?.injector;
+        }
+        if (state[NgtRendererClassId.type] === 'comment') {
+            // NOTE: we attach an arrow function to the Comment node
+            // In our directives, we can call this function to then start tracking the RendererNode
+            // this is done to limit the amount of Nodes we need to process for getCreationState
+            rendererNode[SPECIAL_INTERNAL_ADD_COMMENT] = (node) => {
+                if (node === 'args') {
+                    this.argsCommentNodes.push(rendererNode);
+                }
+                else if (node === 'parent') {
+                    this.parentCommentNodes.push(rendererNode);
+                }
+                else if (typeof node === 'object') {
+                    this.portalCommentsNodes.push(node);
+                }
+            };
+            return rendererNode;
+        }
+        if (state[NgtRendererClassId.type] === 'compound') {
+            state[NgtRendererClassId.queueOps] = new Set();
+            state[NgtRendererClassId.attributes] = state[NgtRendererClassId.properties] = {};
+            return rendererNode;
+        }
+        return rendererNode;
+    }
+    isCompound(name) {
+        return this.rootState.compoundPrefixes.some((prefix) => name.startsWith(prefix));
+    }
+    isDOM(node) {
+        const rS = node['__ngt_renderer__'];
+        return (!rS ||
+            (rS[NgtRendererClassId.type] !== 'compound' &&
+                (node instanceof Element || node instanceof Document || node instanceof Window)));
+    }
+    getClosestParentWithInstance(node) {
+        let parent = node.__ngt_renderer__[NgtRendererClassId.parent];
+        while (parent && parent.__ngt_renderer__[NgtRendererClassId.type] !== 'three') {
+            parent = parent.__ngt_renderer__[NgtRendererClassId.portalContainer]
+                ? parent.__ngt_renderer__[NgtRendererClassId.portalContainer]
+                : parent.__ngt_renderer__[NgtRendererClassId.parent];
+        }
+        return parent;
+    }
+    getClosestParentWithCompound(node) {
+        if (node.__ngt_renderer__[NgtRendererClassId.compoundParent]) {
+            return node.__ngt_renderer__[NgtRendererClassId.compoundParent];
+        }
+        let parent = node.__ngt_renderer__[NgtRendererClassId.parent];
+        if (parent &&
+            parent.__ngt_renderer__[NgtRendererClassId.type] === 'compound' &&
+            !parent.__ngt_renderer__[NgtRendererClassId.compounded]) {
+            return parent;
+        }
+        while (parent &&
+            (parent.__ngt_renderer__[NgtRendererClassId.type] === 'three' ||
+                !parent.__ngt_renderer__[NgtRendererClassId.compoundParent] ||
+                parent.__ngt_renderer__[NgtRendererClassId.type] !== 'compound')) {
+            parent = parent.__ngt_renderer__[NgtRendererClassId.parent];
+        }
+        if (!parent)
+            return null;
+        if (parent.__ngt_renderer__[NgtRendererClassId.type] === 'three' &&
+            parent.__ngt_renderer__[NgtRendererClassId.compoundParent]) {
+            return parent.__ngt_renderer__[NgtRendererClassId.compoundParent];
+        }
+        if (!parent.__ngt_renderer__[NgtRendererClassId.compounded]) {
+            return parent;
+        }
+        return null;
+    }
+    processPortalContainer(portal) {
+        const injector = portal.__ngt_renderer__[NgtRendererClassId.injectorFactory]?.();
+        if (!injector)
+            return;
+        const portalStore = injector.get(NGT_STORE, null);
+        if (!portalStore)
+            return;
+        const portalContainer = portalStore.get('scene');
+        if (!portalContainer)
+            return;
+        portal.__ngt_renderer__[NgtRendererClassId.portalContainer] = this.createNode('three', portalContainer);
+    }
+    getCreationState() {
+        return [
+            this.firstNonInjectedDirective('argsCommentNodes', NgtArgs)?.value || [],
+            this.firstNonInjectedDirective('parentCommentNodes', NgtParent)?.value || null,
+            this.tryGetPortalStore(),
+        ];
+    }
+    setParent(node, parent) {
+        if (!node.__ngt_renderer__[NgtRendererClassId.parent]) {
+            node.__ngt_renderer__[NgtRendererClassId.parent] = parent;
+        }
+    }
+    addChild(node, child) {
+        if (!node.__ngt_renderer__[NgtRendererClassId.children].includes(child)) {
+            node.__ngt_renderer__[NgtRendererClassId.children].push(child);
+        }
+    }
+    removeChild(node, child) {
+        const index = node.__ngt_renderer__?.[NgtRendererClassId.children].findIndex((c) => child === c);
+        if (index >= 0) {
+            node.__ngt_renderer__[NgtRendererClassId.children].splice(index, 1);
+        }
+    }
+    setCompound(compound, instance) {
+        const instanceRS = instance.__ngt_renderer__;
+        if (instanceRS && instanceRS[NgtRendererClassId.parent]) {
+            const parentRS = instanceRS[NgtRendererClassId.parent].__ngt_renderer__;
+            // NOTE: if instance is already compounded by its parent. skip
+            if (parentRS[NgtRendererClassId.type] === 'compound' && parentRS[NgtRendererClassId.compounded] === instance) {
+                return;
+            }
+        }
+        const rS = compound.__ngt_renderer__;
+        rS[NgtRendererClassId.compounded] = instance;
+        for (const key of Object.keys(rS[NgtRendererClassId.attributes])) {
+            this.applyAttribute(instance, key, rS[NgtRendererClassId.attributes][key]);
+        }
+        for (const key of Object.keys(rS[NgtRendererClassId.properties])) {
+            this.applyProperty(instance, key, rS[NgtRendererClassId.properties][key]);
+        }
+        this.executeOperation(compound);
+    }
+    queueOperation(node, op) {
+        node.__ngt_renderer__[NgtRendererClassId.queueOps].add(op);
+    }
+    executeOperation(node, type = 'op') {
+        const rS = node.__ngt_renderer__;
+        // TODO: maybe an array with pop() would work better
+        if (rS[NgtRendererClassId.queueOps]?.size) {
+            rS[NgtRendererClassId.queueOps].forEach((op) => {
+                if (op[NgtQueueOpClassId.type] === type) {
+                    op[NgtQueueOpClassId.op]();
+                    rS[NgtRendererClassId.queueOps].delete(op);
+                }
+            });
+        }
+    }
+    applyAttribute(node, name, value) {
+        const rS = node.__ngt_renderer__;
+        if (rS[NgtRendererClassId.destroyed])
+            return;
+        if (name === SPECIAL_PROPERTIES.RENDER_PRIORITY) {
+            // NOTE: priority needs to be set as an attribute string so that they can be set as early as possible
+            // we convert that string to a number. if it's invalid, default 0
+            let priority = Number(value);
+            if (isNaN(priority)) {
+                priority = 0;
+                console.warn(`[NGT] "priority" is an invalid number, default to 0`);
+            }
+            const localState = getLocalState(node);
+            if (localState) {
+                localState.priority = priority;
+            }
+        }
+        if (name === SPECIAL_PROPERTIES.COMPOUND) {
+            // NOTE: we set the compound property on instance node now so we know that this instance is being compounded
+            rS[NgtRendererClassId.compound] = [value === '' || value === 'first', {}];
+            return;
+        }
+        if (name === SPECIAL_PROPERTIES.ATTACH) {
+            // NOTE: handle attach as tring
+            const paths = value.split('.');
+            if (paths.length) {
+                const localState = getLocalState(node);
+                if (localState) {
+                    localState.attach = paths;
+                }
+            }
+            return;
+        }
+        // NOTE: coercion
+        let maybeCoerced = value;
+        if (maybeCoerced === '' || maybeCoerced === 'true' || maybeCoerced === 'false') {
+            maybeCoerced = maybeCoerced === 'true' || maybeCoerced === '';
+        }
+        else if (!isNaN(Number(maybeCoerced))) {
+            maybeCoerced = Number(maybeCoerced);
+        }
+        if (name === SPECIAL_PROPERTIES.RAW_VALUE) {
+            rS[NgtRendererClassId.rawValue] = maybeCoerced;
+            return;
+        }
+        applyProps(node, { [name]: maybeCoerced });
+        this.updateNativeProps(node, name, maybeCoerced);
+    }
+    applyProperty(node, name, value) {
+        const rS = node.__ngt_renderer__;
+        if (rS[NgtRendererClassId.destroyed])
+            return;
+        // [ref]
+        if (name === SPECIAL_PROPERTIES.REF && is.ref(value)) {
+            rS[NgtRendererClassId.ref] = value;
+            value.nativeElement = node;
+            return;
+        }
+        const localState = getLocalState(node);
+        const parent = localState?.instanceStore.get('parent') || rS[NgtRendererClassId.parent];
+        // [rawValue]
+        if (localState?.isRaw && name === SPECIAL_PROPERTIES.RAW_VALUE) {
+            rS[NgtRendererClassId.rawValue] = value;
+            if (parent)
+                attachThreeChild(parent, node);
+            return;
+        }
+        // [attach]
+        if (name === SPECIAL_PROPERTIES.ATTACH) {
+            if (localState)
+                localState.attach = Array.isArray(value) ? value.map((v) => v.toString()) : value;
+            if (parent)
+                attachThreeChild(parent, node);
+            return;
+        }
+        const compound = rS[NgtRendererClassId.compound];
+        if (compound?.[NgtCompoundClassId.props] &&
+            name in compound[NgtCompoundClassId.props] &&
+            !compound[NgtCompoundClassId.applyFirst]) {
+            value = compound[NgtCompoundClassId.props][name];
+        }
+        applyProps(node, { [name]: value });
+        // NOTE: special case for Geometry and Material
+        if (value && (name === 'geometry' || name === 'material')) {
+            const childLS = getLocalState(value);
+            childLS?.setParent(node);
+            localState?.add(value, 'nonObjects');
+        }
+        this.updateNativeProps(node, name, value);
+    }
+    get rootScene() {
+        return this.rootState.store.get('scene');
+    }
+    destroy(node, parent) {
+        const rS = node.__ngt_renderer__;
+        if (!rS || rS[NgtRendererClassId.destroyed])
+            return;
+        if (rS[NgtRendererClassId.type] === 'three') {
+            rS[NgtRendererClassId.compound] = undefined;
+            rS[NgtRendererClassId.compoundParent] = undefined;
+            const localState = getLocalState(node);
+            if (localState?.instanceStore) {
+                localState.instanceStore.get('objects').forEach((obj) => this.destroy(obj, parent));
+                localState.instanceStore.get('nonObjects').forEach((obj) => this.destroy(obj, parent));
+            }
+            if (localState?.afterUpdate)
+                localState.afterUpdate.complete();
+            if (localState?.afterAttach)
+                localState.afterAttach.complete();
+            delete localState['objects'];
+            delete localState['nonObjects'];
+            delete localState['parent'];
+            delete localState['nativeProps'];
+            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 (rS[NgtRendererClassId.type] === 'comment') {
+            rS[NgtRendererClassId.injectorFactory] = null;
+            delete node[SPECIAL_INTERNAL_ADD_COMMENT];
+            if (!this.removeCommentNode(node, this.argsCommentNodes)) {
+                this.removeCommentNode(node, this.parentCommentNodes);
+            }
+        }
+        if (rS[NgtRendererClassId.type] === 'portal') {
+            rS[NgtRendererClassId.injectorFactory] = null;
+            this.removeCommentNode(node, this.portalCommentsNodes);
+        }
+        if (rS[NgtRendererClassId.type] === 'compound') {
+            rS[NgtRendererClassId.compounded] = undefined;
+            rS[NgtRendererClassId.attributes] = null;
+            rS[NgtRendererClassId.properties] = null;
+            this.executeOperation(node, 'cleanUp');
+            rS[NgtRendererClassId.queueOps].clear();
+            rS[NgtRendererClassId.queueOps] = null;
+        }
+        if (rS[NgtRendererClassId.ref]) {
+            // nullify ref
+            // but we do it later so that it doesn't hinder render
+            // TODO: will this cause memory leak?
+            requestAnimationFrame(() => {
+                rS[NgtRendererClassId.ref].nativeElement = null;
+                rS[NgtRendererClassId.ref] = undefined;
+            });
+        }
+        // nullify parent
+        rS[NgtRendererClassId.parent] = null;
+        for (const renderChild of rS[NgtRendererClassId.children] || []) {
+            if (renderChild.__ngt_renderer__?.[NgtRendererClassId.type] === 'three' && parent) {
+                const closestInstance = this.getClosestParentWithInstance(parent);
+                if (closestInstance) {
+                    removeThreeChild(closestInstance, renderChild, true);
+                }
+            }
+            this.destroy(renderChild, parent);
+        }
+        rS[NgtRendererClassId.children] = [];
+        rS[NgtRendererClassId.destroyed] = true;
+        if (parent) {
+            this.removeChild(parent, node);
+        }
+    }
+    removeCommentNode(node, nodes) {
+        const index = nodes.findIndex((comment) => comment === node);
+        if (index > -1) {
+            nodes.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
+    updateNativeProps(node, key, value) {
+        const localState = getLocalState(node);
+        localState?.setNativeProps(key, value);
+    }
+    firstNonInjectedDirective(listProperty, dir) {
+        let directive;
+        const destroyed = [];
+        let i = this[listProperty].length - 1;
+        while (i >= 0) {
+            const comment = this[listProperty][i];
+            if (comment.__ngt_renderer__[NgtRendererClassId.destroyed]) {
+                destroyed.push(i);
+                i--;
+                continue;
+            }
+            const injector = comment.__ngt_renderer__[NgtRendererClassId.injectorFactory]();
+            if (!injector) {
+                i--;
+                continue;
+            }
+            const instance = injector.get(dir, null);
+            if (instance && instance.validate()) {
+                directive = instance;
+                break;
+            }
+            i--;
+        }
+        destroyed.forEach((index) => {
+            this[listProperty].splice(index, 1);
+        });
+        return directive;
+    }
+    tryGetPortalStore() {
+        let store;
+        const destroyed = [];
+        // we only care about the portal states because NgtStore only differs per Portal
+        let i = this.portalCommentsNodes.length - 1;
+        while (i >= 0) {
+            // loop through the portal state backwards to find the closest NgtStore
+            const portal = this.portalCommentsNodes[i];
+            if (portal.__ngt_renderer__[NgtRendererClassId.destroyed]) {
+                destroyed.push(i);
+                i--;
+                continue;
+            }
+            const injector = portal.__ngt_renderer__[NgtRendererClassId.injectorFactory]();
+            if (!injector) {
+                i--;
+                continue;
+            }
+            const instance = injector.get(NGT_STORE, null);
+            // only the instance with previousRoot should pass
+            if (instance && instance.get('previousRoot')) {
+                store = instance;
+                break;
+            }
+            i--;
+        }
+        destroyed.forEach((index) => {
+            this.portalCommentsNodes.splice(index, 1);
+        });
+        return store || this.rootState.store;
+    }
+}
+
+class NgtRendererFactory {
+    constructor() {
+        this.delegateRendererFactory = inject(RendererFactory2, { skipSelf: true });
+        this.catalogue = injectNgtCatalogue();
+        this.rendererMap = new Map();
+        this.routedSet = new Set();
+        // NOTE: all Renderer instances under the same NgtCanvas share the same Store
+        this.rendererStore = new NgtRendererStore({
+            store: injectNgtStore(),
+            compoundPrefixes: inject(NGT_COMPOUND_PREFIXES),
+            document: inject(DOCUMENT),
+        });
+    }
+    createRenderer(hostElement, type) {
+        const delegateRenderer = this.delegateRendererFactory.createRenderer(hostElement, type);
+        if (!type)
+            return delegateRenderer;
+        // NOTE: might need to revisit this
+        if (type['type'][HTML]) {
+            this.rendererMap.set(type.id, delegateRenderer);
+            return delegateRenderer;
+        }
+        if (type['type'][ROUTED_SCENE]) {
+            this.routedSet.add(type.id);
+        }
+        let renderer = this.rendererMap.get(type.id);
+        if (!renderer) {
+            this.rendererMap.set(type.id, (renderer = new NgtRenderer(delegateRenderer, this.rendererStore, this.catalogue, 
+            // setting root scene if there's no routed scene OR this component is the routed Scene
+            !hostElement && (this.routedSet.size === 0 || this.routedSet.has(type.id)))));
+        }
+        return renderer;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtRendererFactory }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtRendererFactory, decorators: [{
+            type: Injectable
+        }] });
+class NgtRenderer {
+    constructor(delegate, store, catalogue, isRoot = true) {
+        this.delegate = delegate;
+        this.store = store;
+        this.catalogue = catalogue;
+        this.isRoot = isRoot;
+        this.createText = this.delegate.createText.bind(this.delegate);
+        this.destroy = this.delegate.destroy.bind(this.delegate);
+        this.destroyNode = null;
+        this.selectRootElement = this.delegate.selectRootElement.bind(this.delegate);
+        this.nextSibling = this.delegate.nextSibling.bind(this.delegate);
+        this.addClass = this.delegate.addClass.bind(this.delegate);
+        this.removeClass = this.delegate.removeClass.bind(this.delegate);
+        this.setStyle = this.delegate.setStyle.bind(this.delegate);
+        this.removeStyle = this.delegate.removeStyle.bind(this.delegate);
+        this.setValue = this.delegate.setValue.bind(this.delegate);
+    }
+    createElement(name, namespace) {
+        const element = this.delegate.createElement(name, namespace);
+        // on first pass, we return the Root Scene as the root node
+        if (this.isRoot) {
+            this.isRoot = false;
+            const node = this.store.createNode('three', this.store.rootScene);
+            node.__ngt_renderer__[NgtRendererClassId.injectorFactory] = () => getDebugNode(element)?.injector;
+            return node;
+        }
+        if (this.store.isCompound(name)) {
+            return this.store.createNode('compound', element);
+        }
+        if (name === SPECIAL_DOM_TAG.NGT_PORTAL) {
+            return this.store.createNode('portal', element);
+        }
+        if (name === SPECIAL_DOM_TAG.NGT_VALUE) {
+            const instanceStore = signalStore({
+                nativeProps: {},
+                parent: null,
+                objects: [],
+                nonObjects: [],
+            });
+            return this.store.createNode('three', Object.assign({ __ngt_renderer__: { rawValue: undefined } }, 
+            // NOTE: we assign this manually to a raw value node
+            //  because we say it is a 'three' node but we're not using prepare()
+            {
+                __ngt__: {
+                    isRaw: true,
+                    instanceStore,
+                    setNativeProps(key, value) {
+                        instanceStore.update((prev) => ({ nativeProps: { ...prev.nativeProps, [key]: value } }));
+                    },
+                    setParent(parent) {
+                        instanceStore.update({ parent });
+                    },
+                },
+            }));
+        }
+        const [injectedArgs, injectedParent, store] = this.store.getCreationState();
+        let parent = injectedParent;
+        if (typeof injectedParent === 'string') {
+            parent = store
+                .get('scene')
+                .getObjectByName(injectedParent);
+        }
+        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 (!localState) {
+                // NOTE: if an object isn't already "prepared", we prepare it
+                localState = getLocalState(prepare(object, { store, args: injectedArgs, primitive: true }));
+            }
+            if (!localState.store)
+                localState.store = store;
+            const node = this.store.createNode('three', object);
+            if (parent) {
+                node.__ngt_renderer__[NgtRendererClassId.injectedParent] = parent;
+            }
+            return node;
+        }
+        const threeName = kebabToPascal(name.startsWith('ngt') ? name.slice(4) : name);
+        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);
+            // auto-attach for geometry and material
+            if (is.geometry(instance)) {
+                localState.attach = ['geometry'];
+            }
+            else if (is.material(instance)) {
+                localState.attach = ['material'];
+            }
+            if (parent) {
+                node.__ngt_renderer__[NgtRendererClassId.injectedParent] = parent;
+            }
+            return node;
+        }
+        return this.store.createNode('dom', element);
+    }
+    createComment(value) {
+        return this.store.createNode('comment', this.delegate.createComment(value));
+    }
+    appendChild(parent, newChild) {
+        const pRS = parent.__ngt_renderer__;
+        const cRS = newChild.__ngt_renderer__;
+        if (pRS[NgtRendererClassId.type] === 'dom' &&
+            (newChild instanceof Text || cRS[NgtRendererClassId.type] === 'dom')) {
+            this.store.addChild(parent, newChild);
+            this.delegate.appendChild(parent, newChild);
+            if (cRS) {
+                this.store.setParent(newChild, parent);
+                if (this.shouldFindGrandparentInstance(pRS, cRS, newChild)) {
+                    // we'll try to get the grandparent instance here so that we can run appendChild with both instances
+                    const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
+                    if (closestGrandparentInstance)
+                        this.appendChild(closestGrandparentInstance, newChild);
+                }
+            }
+            return;
+        }
+        if (cRS?.[NgtRendererClassId.type] === 'comment') {
+            this.store.setParent(newChild, parent);
+            return;
+        }
+        if (cRS?.[NgtRendererClassId.injectedParent]) {
+            if (is.ref(cRS[NgtRendererClassId.injectedParent])) {
+                const injector = cRS[NgtRendererClassId.injectorFactory]()?.get(Injector, null);
+                if (!injector) {
+                    console.warn(`[NGT] NgtRenderer is attempting to start an effect for injectedParent but no Injector is found.`);
+                    return;
+                }
+                const watcher = effect(() => {
+                    const injectedParent = cRS[NgtRendererClassId.injectedParent]
+                        .nativeElement;
+                    if (injectedParent && injectedParent !== parent) {
+                        this.appendChild(injectedParent, newChild);
+                        // only run this effect once
+                        // as soon as we re-run appendChild with the injectedParent, we stop the effect
+                        watcher.destroy();
+                    }
+                }, { injector, manualCleanup: true });
+                return;
+            }
+            else if (parent !== cRS[NgtRendererClassId.injectedParent]) {
+                this.appendChild(cRS[NgtRendererClassId.injectedParent], newChild);
+                return;
+            }
+        }
+        this.store.setParent(newChild, parent);
+        this.store.addChild(parent, newChild);
+        // if new child is a portal
+        if (cRS?.[NgtRendererClassId.type] === 'portal') {
+            this.store.processPortalContainer(newChild);
+            if (cRS[NgtRendererClassId.portalContainer]) {
+                this.appendChild(parent, cRS[NgtRendererClassId.portalContainer]);
+            }
+            return;
+        }
+        // if parent is a portal
+        if (pRS[NgtRendererClassId.type] === 'portal') {
+            this.store.processPortalContainer(parent);
+            if (pRS[NgtRendererClassId.portalContainer]) {
+                this.appendChild(pRS[NgtRendererClassId.portalContainer], newChild);
+            }
+            return;
+        }
+        // if both are three instances, straightforward case
+        if (pRS[NgtRendererClassId.type] === 'three' && cRS?.[NgtRendererClassId.type] === 'three') {
+            const cLS = getLocalState(newChild);
+            // if child already attached to a parent, skip
+            if (cLS?.instanceStore?.get('parent'))
+                return;
+            // attach THREE child
+            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 (!cRS[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 (pRS[NgtRendererClassId.type] === 'three') {
+            for (const renderChild of cRS?.[NgtRendererClassId.children] || []) {
+                this.appendChild(parent, renderChild);
+            }
+        }
+        // if parent is a compound
+        if (pRS[NgtRendererClassId.type] === 'compound') {
+            // if compound doesn't have a THREE instance set yet
+            if (!pRS[NgtRendererClassId.compounded] && cRS[NgtRendererClassId.type] === 'three') {
+                // if child is indeed an ngtCompound
+                if (cRS[NgtRendererClassId.compound])
+                    this.store.setCompound(parent, newChild);
+                // if not, we track the parent (that is supposedly the compound component) on this three instance
+                else if (!cRS[NgtRendererClassId.compoundParent])
+                    cRS[NgtRendererClassId.compoundParent] = parent;
+            }
+            // reset the compound if it's changed
+            if (pRS[NgtRendererClassId.compounded] &&
+                cRS[NgtRendererClassId.type] === 'three' &&
+                cRS[NgtRendererClassId.compound] &&
+                pRS[NgtRendererClassId.compounded] !== newChild) {
+                this.store.setCompound(parent, newChild);
+            }
+        }
+        if (this.shouldFindGrandparentInstance(pRS, cRS, newChild)) {
+            // we'll try to get the grandparent instance here so that we can run appendChild with both instances
+            const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
+            if (closestGrandparentInstance)
+                this.appendChild(closestGrandparentInstance, newChild);
+            return;
+        }
+    }
+    insertBefore(parent, newChild) {
+        if (parent == null || !parent.__ngt_renderer__ || parent === newChild)
+            return;
+        this.appendChild(parent, newChild);
+    }
+    removeChild(parent, oldChild, isHostElement) {
+        const pRS = parent.__ngt_renderer__;
+        const cRS = oldChild.__ngt_renderer__;
+        if ((!cRS || !pRS) &&
+            parent instanceof Element &&
+            (oldChild instanceof Element || oldChild instanceof Text || oldChild instanceof Comment)) {
+            this.delegate.removeChild(parent, oldChild);
+            this.store.destroy(oldChild, parent);
+            return;
+        }
+        if (cRS[NgtRendererClassId.type] === 'dom' && (!pRS || pRS[NgtRendererClassId.type] === 'dom')) {
+            this.delegate.removeChild(parent, oldChild);
+            this.store.destroy(oldChild, parent);
+            return;
+        }
+        if (pRS[NgtRendererClassId.type] === 'three' && cRS[NgtRendererClassId.type] === 'three') {
+            removeThreeChild(parent, oldChild, true);
+            this.store.destroy(oldChild, parent);
+            return;
+        }
+        if (pRS[NgtRendererClassId.type] === 'compound' && pRS[NgtRendererClassId.parent]) {
+            this.removeChild(pRS[NgtRendererClassId.parent], oldChild, isHostElement);
+            return;
+        }
+        if (pRS[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) {
+        const rS = node.__ngt_renderer__;
+        if (rS?.[NgtRendererClassId.parent])
+            return rS[NgtRendererClassId.parent];
+        return this.delegate.parentNode(node);
+    }
+    setAttributeInternal(el, name, value, namespace) {
+        const rS = el.__ngt_renderer__;
+        if (rS[NgtRendererClassId.type] === 'compound') {
+            // we don't have the compound instance yet
+            rS[NgtRendererClassId.attributes][name] = value;
+            if (!rS[NgtRendererClassId.compounded]) {
+                this.store.queueOperation(el, ['op', () => this.setAttribute(el, name, value, namespace)]);
+                return false;
+            }
+            return this.setAttributeInternal(rS[NgtRendererClassId.compounded], name, value, namespace);
+        }
+        if (rS[NgtRendererClassId.type] === 'three') {
+            this.store.applyAttribute(el, name, value);
+            return false;
+        }
+        return true;
+    }
+    setAttribute(el, name, value, namespace) {
+        const useDelegate = this.setAttributeInternal(el, name, value, namespace);
+        if (useDelegate) {
+            this.delegate.setAttribute(el, name, value);
+        }
+    }
+    removeAttribute(el, name, namespace) {
+        const useDelegate = this.setAttributeInternal(el, name, undefined, namespace);
+        if (useDelegate) {
+            this.delegate.removeAttribute(el, name, namespace);
+        }
+    }
+    setProperty(el, name, value) {
+        // TODO: should we support ref value
+        const rS = el.__ngt_renderer__;
+        if (rS[NgtRendererClassId.type] === 'compound') {
+            // we don't have the compound instance yet
+            rS[NgtRendererClassId.properties][name] = value;
+            if (!rS[NgtRendererClassId.compounded]) {
+                this.store.queueOperation(el, ['op', () => this.setProperty(el, name, value)]);
+                return;
+            }
+            if (rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound]) {
+                Object.assign(rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound][NgtCompoundClassId.props], { [name]: value });
+            }
+            this.setProperty(rS[NgtRendererClassId.compounded], name, value);
+            return;
+        }
+        if (rS[NgtRendererClassId.type] === 'three') {
+            this.store.applyProperty(el, name, value);
+            return;
+        }
+        return this.delegate.setProperty(el, name, value);
+    }
+    listen(target, eventName, callback) {
+        const rS = target.__ngt_renderer__;
+        // if the target doesn't have __ngt_renderer__, we delegate
+        // if target is DOM node, we delegate
+        if (!rS || this.store.isDOM(target)) {
+            return this.delegate.listen(target, eventName, callback);
+        }
+        if (rS[NgtRendererClassId.type] === 'three' ||
+            (rS[NgtRendererClassId.type] === 'compound' && rS[NgtRendererClassId.compounded])) {
+            const instance = rS[NgtRendererClassId.compounded] || target;
+            const localState = getLocalState(instance);
+            const priority = localState?.priority ?? 0;
+            return processThreeEvent(instance, priority || 0, eventName, callback);
+        }
+        if (rS[NgtRendererClassId.type] === 'compound' && !rS[NgtRendererClassId.compounded]) {
+            this.store.queueOperation(target, [
+                'op',
+                () => this.store.queueOperation(target, ['cleanUp', this.listen(target, eventName, callback)]),
+            ]);
+            return () => { };
+        }
+        // @ts-expect-error - we know that target is not DOM node
+        if (target === this.store.rootScene) {
+            let [domTarget, event] = eventName.split(':');
+            if (event == null) {
+                event = domTarget;
+                domTarget = '';
+            }
+            const eventTarget = domTarget === 'window'
+                ? target['ownerDocument']['defaultView']
+                : target['ownerDocument'];
+            return this.delegate.listen(eventTarget, event, callback);
+        }
+        return () => { };
+    }
+    shouldFindGrandparentInstance(pRS, cRS, child) {
+        const pType = pRS[NgtRendererClassId.type];
+        const cType = cRS[NgtRendererClassId.type];
+        const isParentCompounded = pRS[NgtRendererClassId.compounded];
+        const isChildCompounded = cRS[NgtRendererClassId.compounded];
+        const cLS = getLocalState(child);
+        // if child is three but haven't been attached to a parent yet
+        const isDanglingThreeChild = cType === 'three' && !cLS?.instanceStore?.get('parent');
+        // or both parent and child are DOM elements
+        // or they are compound AND haven't had a THREE instance yet
+        const isParentStillDOM = pType === 'dom' || (pType === 'compound' && !isParentCompounded);
+        const isChildStillDOM = cType === 'dom' || (cType === 'compound' && !isChildCompounded);
+        // and the child is a compounded compound
+        const isCompoundChildCompounded = cType === 'compound' && !!isChildCompounded;
+        return (isDanglingThreeChild || (isParentStillDOM && isChildStillDOM) || (isParentStillDOM && isCompoundChildCompounded));
+    }
+    get data() {
+        return this.delegate.data;
+    }
+}
+function provideNgtRenderer(store, compoundPrefixes) {
+    if (!compoundPrefixes.includes('ngts'))
+        compoundPrefixes.push('ngts');
+    if (!compoundPrefixes.includes('ngtp'))
+        compoundPrefixes.push('ngtp');
+    return makeEnvironmentProviders([
+        NgtRendererFactory,
+        { provide: RendererFactory2, useExisting: NgtRendererFactory },
+        { provide: NGT_COMPOUND_PREFIXES, useValue: compoundPrefixes },
+        provideNgtStore(store),
+    ]);
+}
+
+class NgtCanvas {
+    constructor() {
+        this.store = injectNgtStore();
+        this.initRoot = injectCanvasRootInitializer();
+        this.autoEffect = injectAutoEffect();
+        this.host = inject(ElementRef);
+        this.zone = inject(NgZone);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.injector = inject(Injector);
+        this.sceneGraph = input.required();
+        this.compoundPrefixes = input([]);
+        this.sceneGraphInputs = input({});
+        this.gl = input();
+        this.size = input();
+        this.shadows = input(false, {
+            transform: (value) => {
+                if (value === '') {
+                    return booleanAttribute(value);
+                }
+                return value;
+            },
+        });
+        this.legacy = input(false, { transform: booleanAttribute });
+        this.linear = input(false, { transform: booleanAttribute });
+        this.flat = input(false, { transform: booleanAttribute });
+        this.orthographic = input(false, { transform: booleanAttribute });
+        this.frameloop = input('always');
+        this.performance = input();
+        this.dpr = input([1, 2]);
+        this.raycaster = input();
+        this.scene = input();
+        this.camera = input();
+        this.events = input(createPointerEvents);
+        this.eventSource = input();
+        this.eventPrefix = input('offset');
+        this.lookAt = input();
+        this.created = output();
+        this.pointerMissed = outputFromObservable(this.store.get('pointerMissed$'));
+        this.glCanvas = viewChild.required('glCanvas');
+        this.glCanvasViewContainerRef = viewChild.required('glCanvas', { read: ViewContainerRef });
+        // NOTE: this signal is updated outside of Zone
+        this.resizeResult = signal({}, { equal: Object.is });
+        this.hbPointerEvents = computed(() => (this.eventSource() ? 'none' : 'auto'));
+        afterNextRender(() => {
+            this.zone.runOutsideAngular(() => {
+                this.configurator = this.initRoot(this.glCanvas().nativeElement);
+                this.noZoneResizeEffect();
+                this.noZoneSceneGraphInputsEffect();
+            });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.glRef?.destroy();
+            this.glEnvironmentInjector?.destroy();
+            this.configurator?.destroy();
+        });
+    }
+    noZoneResizeEffect() {
+        this.autoEffect(() => {
+            const resizeResult = this.resizeResult();
+            if (resizeResult.width > 0 && resizeResult.height > 0) {
+                if (!this.configurator)
+                    this.configurator = this.initRoot(this.glCanvas().nativeElement);
+                this.configurator.configure({
+                    gl: this.gl(),
+                    shadows: this.shadows(),
+                    legacy: this.legacy(),
+                    linear: this.linear(),
+                    flat: this.flat(),
+                    orthographic: this.orthographic(),
+                    frameloop: this.frameloop(),
+                    performance: this.performance(),
+                    dpr: this.dpr(),
+                    raycaster: this.raycaster(),
+                    scene: this.scene(),
+                    camera: this.camera(),
+                    events: this.events(),
+                    eventSource: this.eventSource(),
+                    eventPrefix: this.eventPrefix(),
+                    lookAt: this.lookAt(),
+                    size: resizeResult,
+                });
+                untracked(() => {
+                    if (this.glRef) {
+                        this.glRef.changeDetectorRef.detectChanges();
+                    }
+                    else {
+                        this.noZoneRender();
+                    }
+                });
+            }
+        });
+    }
+    noZoneRender() {
+        // NOTE: destroy previous instances if existed
+        this.glEnvironmentInjector?.destroy();
+        this.glRef?.destroy();
+        // NOTE: Flag the canvas active, rendering will now begin
+        this.store.update((state) => ({ internal: { ...state.internal, active: true } }));
+        const [state, eventSource, eventPrefix] = [
+            this.store.snapshot,
+            untracked(this.eventSource),
+            untracked(this.eventPrefix),
+        ];
+        // connect to event source
+        state.events.connect?.(eventSource ? (is.ref(eventSource) ? eventSource.nativeElement : eventSource) : this.host.nativeElement);
+        // setup compute for eventPrefix
+        if (eventPrefix) {
+            state.setEvents({
+                compute: (event, store) => {
+                    const { pointer, raycaster, camera, size } = store.snapshot;
+                    const x = event[(eventPrefix + 'X')];
+                    const y = event[(eventPrefix + 'Y')];
+                    pointer.set((x / size.width) * 2 - 1, -(y / size.height) * 2 + 1);
+                    raycaster.setFromCamera(pointer, camera);
+                },
+            });
+        }
+        // emit created event if observed
+        this.created.emit(this.store.snapshot);
+        if (!this.store.get('events', 'connected')) {
+            this.store.get('events').connect?.(this.glCanvas().nativeElement);
+        }
+        this.glEnvironmentInjector = createEnvironmentInjector([provideNgtRenderer(this.store, untracked(this.compoundPrefixes))], this.environmentInjector);
+        this.glRef = untracked(this.glCanvasViewContainerRef).createComponent(untracked(this.sceneGraph), {
+            environmentInjector: this.glEnvironmentInjector,
+            injector: this.injector,
+        });
+        this.glRef.changeDetectorRef.detectChanges();
+        this.setSceneGraphInputs(untracked(this.sceneGraphInputs));
+    }
+    noZoneSceneGraphInputsEffect() {
+        this.autoEffect(() => {
+            this.setSceneGraphInputs(this.sceneGraphInputs());
+        });
+    }
+    setSceneGraphInputs(sceneGraphInputs) {
+        if (this.glRef) {
+            for (const [key, value] of Object.entries(sceneGraphInputs)) {
+                this.glRef.setInput(key, value);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.0", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: { classPropertyName: "sceneGraph", publicName: "sceneGraph", isSignal: true, isRequired: true, transformFunction: null }, compoundPrefixes: { classPropertyName: "compoundPrefixes", publicName: "compoundPrefixes", isSignal: true, isRequired: false, transformFunction: null }, sceneGraphInputs: { classPropertyName: "sceneGraphInputs", publicName: "sceneGraphInputs", isSignal: true, isRequired: false, transformFunction: null }, gl: { classPropertyName: "gl", publicName: "gl", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadows: { classPropertyName: "shadows", publicName: "shadows", isSignal: true, isRequired: false, transformFunction: null }, legacy: { classPropertyName: "legacy", publicName: "legacy", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, orthographic: { classPropertyName: "orthographic", publicName: "orthographic", isSignal: true, isRequired: false, transformFunction: null }, frameloop: { classPropertyName: "frameloop", publicName: "frameloop", isSignal: true, isRequired: false, transformFunction: null }, performance: { classPropertyName: "performance", publicName: "performance", isSignal: true, isRequired: false, transformFunction: null }, dpr: { classPropertyName: "dpr", publicName: "dpr", isSignal: true, isRequired: false, transformFunction: null }, raycaster: { classPropertyName: "raycaster", publicName: "raycaster", isSignal: true, isRequired: false, transformFunction: null }, scene: { classPropertyName: "scene", publicName: "scene", isSignal: true, isRequired: false, transformFunction: null }, camera: { classPropertyName: "camera", publicName: "camera", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, eventSource: { classPropertyName: "eventSource", publicName: "eventSource", isSignal: true, isRequired: false, transformFunction: null }, eventPrefix: { classPropertyName: "eventPrefix", publicName: "eventPrefix", isSignal: true, isRequired: false, transformFunction: null }, lookAt: { classPropertyName: "lookAt", publicName: "lookAt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "style.pointerEvents": "hbPointerEvents()" }, styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [
+            provideResizeOptions({ emitInZone: false, emitInitialResult: true, debounce: 250 }),
+            provideNgtStore(),
+        ], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, isSignal: true }, { propertyName: "glCanvasViewContainerRef", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+		<div (ngxResize)="resizeResult.set($event)" style="height: 100%; width: 100%;">
+			<canvas #glCanvas style="display: block;"></canvas>
+		</div>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtCanvas, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-canvas',
+                    standalone: true,
+                    template: `
+		<div (ngxResize)="resizeResult.set($event)" style="height: 100%; width: 100%;">
+			<canvas #glCanvas style="display: block;"></canvas>
+		</div>
+	`,
+                    imports: [NgxResize],
+                    providers: [
+                        provideResizeOptions({ emitInZone: false, emitInitialResult: true, debounce: 250 }),
+                        provideNgtStore(),
+                    ],
+                    host: {
+                        style: 'display: block;position: relative;width: 100%;height: 100%;overflow: hidden;',
+                        '[style.pointerEvents]': 'hbPointerEvents()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+
+const cached = new Map();
+function normalizeInputs(input) {
+    if (Array.isArray(input))
+        return input;
+    if (typeof input === 'string')
+        return [input];
+    return Object.values(input);
+}
+function load(loaderConstructorFactory, inputs, { extensions, onProgress, } = {}) {
+    return () => {
+        const urls = normalizeInputs(inputs());
+        const loader = new (loaderConstructorFactory(urls))();
+        if (extensions)
+            extensions(loader);
+        // TODO: reevaluate this
+        return urls.map((url) => {
+            if (!cached.has(url)) {
+                cached.set(url, new Promise((resolve, reject) => {
+                    loader.load(url, (data) => {
+                        if ('scene' in data) {
+                            Object.assign(data, makeObjectGraph(data['scene']));
+                        }
+                        resolve(data);
+                    }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error}`)));
+                }));
+            }
+            return cached.get(url);
+        });
+    };
+}
+function _injectNgtLoader(loaderConstructorFactory, inputs, { extensions, onProgress, injector, } = {}) {
+    return assertInjector(_injectNgtLoader, injector, () => {
+        const response = signal(null);
+        const effector = load(loaderConstructorFactory, inputs, { extensions, onProgress });
+        effect(() => {
+            const originalUrls = inputs();
+            Promise.all(effector()).then((results) => {
+                response.update(() => {
+                    if (Array.isArray(originalUrls))
+                        return results;
+                    if (typeof originalUrls === 'string')
+                        return results[0];
+                    const keys = Object.keys(originalUrls);
+                    return keys.reduce((result, key) => {
+                        result[key] = results[keys.indexOf(key)];
+                        return result;
+                    }, {});
+                });
+            });
+        });
+        return response.asReadonly();
+    });
+}
+_injectNgtLoader.preload = (loaderConstructorFactory, inputs, extensions) => {
+    void Promise.all(load(loaderConstructorFactory, inputs, { extensions })());
+};
+_injectNgtLoader.destroy = () => {
+    cached.clear();
+};
+const injectNgtLoader = _injectNgtLoader;
+
+function injectNgtRef(initial = null, injector) {
+    return assertInjector(injectNgtRef, injector, () => {
+        const ref = is.ref(initial) ? initial : new ElementRef(initial);
+        const refSignal = signal(ref.nativeElement, { equal: Object.is });
+        const readonlyRef = refSignal.asReadonly();
+        const computedCached = new Map();
+        inject(DestroyRef).onDestroy(() => void computedCached.clear());
+        const children = (type = 'objects') => {
+            if (!computedCached.has(type)) {
+                computedCached.set(type, computed(() => {
+                    const instance = readonlyRef();
+                    if (!instance)
+                        return [];
+                    const localState = getLocalState(instance);
+                    if (!localState?.instanceStore)
+                        return [];
+                    if (type === 'objects')
+                        return localState.objects();
+                    if (type === 'nonObjects')
+                        return localState.nonObjects();
+                    return [...localState.objects(), ...localState.nonObjects()];
+                }));
+            }
+            return computedCached.get(type);
+        };
+        Object.defineProperties(ref, {
+            nativeElement: {
+                set: (newElement) => {
+                    untracked(() => {
+                        if (newElement !== readonlyRef()) {
+                            refSignal.set(newElement);
+                        }
+                    });
+                },
+                get: readonlyRef,
+            },
+            children: { value: children },
+        });
+        return ref;
+    });
+}
+
+function injectBeforeRender(cb, { priority = 0, injector } = {}) {
+    return assertInjector(injectBeforeRender, injector, () => {
+        const store = injectNgtStore();
+        const sub = store.get('internal').subscribe(cb, priority, store);
+        inject(DestroyRef).onDestroy(() => void sub());
+        return sub;
+    });
+}
+
+const privateKeys = [
+    'get',
+    'set',
+    'select',
+    'setSize',
+    'setDpr',
+    'setFrameloop',
+    'events',
+    'invalidate',
+    'advance',
+    'size',
+    'viewport',
+];
+const [, providePortalStore] = createInjectionToken((parentStore) => {
+    const parentState = parentStore.snapshot;
+    const pointer = new THREE.Vector2();
+    const raycaster = new THREE.Raycaster();
+    return signalStore(({ update }) => {
+        return {
+            ...parentState,
+            pointer,
+            raycaster,
+            previousRoot: parentStore,
+            // Layers are allowed to override events
+            setEvents: (events) => update((state) => ({ ...state, events: { ...state.events, ...events } })),
+        };
+    });
+}, { isRoot: false, token: NGT_STORE, deps: [[new SkipSelf(), NGT_STORE]] });
+class NgtPortalBeforeRender {
+    constructor() {
+        this.portalStore = injectNgtStore();
+        this.injector = inject(Injector);
+        this.renderPriority = input(1);
+        this.parentScene = input.required();
+        this.parentCamera = input.required();
+        afterNextRender(() => {
+            let oldClear;
+            injectBeforeRender(() => {
+                const { gl, scene, camera } = this.portalStore.get();
+                oldClear = gl.autoClear;
+                if (this.renderPriority() === 1) {
+                    // clear scene and render with default
+                    gl.autoClear = true;
+                    gl.render(this.parentScene(), this.parentCamera());
+                }
+                // disable cleaning
+                gl.autoClear = false;
+                gl.clearDepth();
+                gl.render(scene, camera);
+                // restore
+                gl.autoClear = oldClear;
+            }, { priority: this.renderPriority(), injector: this.injector });
+        });
+    }
+    onPointerOver() {
+        /* noop */
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.0", type: NgtPortalBeforeRender, isStandalone: true, selector: "ngt-portal-before-render", inputs: { renderPriority: { classPropertyName: "renderPriority", publicName: "renderPriority", isSignal: true, isRequired: false, transformFunction: null }, parentScene: { classPropertyName: "parentScene", publicName: "parentScene", isSignal: true, isRequired: true, transformFunction: null }, parentCamera: { classPropertyName: "parentCamera", publicName: "parentCamera", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+		<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
+		<ngt-group (pointerover)="onPointerOver()" attach="none" />
+	`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-portal-before-render',
+                    standalone: true,
+                    template: `
+		<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
+		<ngt-group (pointerover)="onPointerOver()" attach="none" />
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: () => [] });
+class NgtPortalContent {
+    constructor(vcr, parentVcr) {
+        const commentNode = vcr.element.nativeElement;
+        if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
+            commentNode[SPECIAL_INTERNAL_ADD_COMMENT](parentVcr.element.nativeElement);
+            delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0", type: NgtPortalContent, isStandalone: true, selector: "ng-template[ngtPortalContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtPortalContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ngtPortalContent]', standalone: true }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
+                    type: SkipSelf
+                }] }] });
+class NgtPortal {
+    constructor() {
+        this.options = input({ container: injectNgtRef(prepare(new THREE.Scene())) }, {
+            transform: (value) => ({
+                container: injectNgtRef(prepare(new THREE.Scene())),
+                ...value,
+            }),
+        });
+        this.autoRender = input(false);
+        this.autoRenderPriority = input(1);
+        this.portalContentTemplate = contentChild.required(NgtPortalContent, { read: TemplateRef });
+        this.portalContentAnchor = viewChild.required('portalContentAnchor', { read: ViewContainerRef });
+        this.destroyRef = inject(DestroyRef);
+        this.autoEffect = injectAutoEffect();
+        this.parentStore = injectNgtStore({ skipSelf: true });
+        this.portalStore = injectNgtStore({ self: true });
+        this.portalRendered = signal(false);
+        this.renderAutoBeforeRender = computed(() => this.portalRendered() && this.autoRender());
+        this.parentScene = this.parentStore.get('scene');
+        this.parentCamera = this.parentStore.get('camera');
+        afterNextRender(() => {
+            const parentState = this.parentStore.snapshot;
+            const { container, state: { events = {}, size = {}, ...rest } = {} } = untracked(this.options);
+            this.portalStore.update({
+                scene: (is.ref(container) ? container.nativeElement : container),
+                events: { ...parentState.events, ...events },
+                size: { ...parentState.size, ...size },
+                ...rest,
+            });
+            this.autoEffect(() => {
+                const previous = this.parentStore.state();
+                this.portalStore.update((state) => this.inject(previous, state));
+            });
+            untracked(() => {
+                const portalView = this.portalContentAnchor().createEmbeddedView(this.portalContentTemplate());
+                portalView.detectChanges();
+                this.destroyRef.onDestroy(portalView.destroy.bind(portalView));
+            });
+            this.portalRendered.set(true);
+        });
+    }
+    inject(rootState, injectState) {
+        const intersect = { ...rootState };
+        Object.keys(intersect).forEach((key) => {
+            if (privateKeys.includes(key) ||
+                rootState[key] !== injectState[key]) {
+                delete intersect[key];
+            }
+        });
+        const inputs = untracked(this.options);
+        const { size, events, ...restInputsState } = inputs.state || {};
+        let viewport = undefined;
+        if (injectState && size) {
+            const camera = injectState.camera;
+            viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
+            if (camera !== rootState.camera)
+                updateCamera(camera, size);
+        }
+        return {
+            ...intersect,
+            scene: is.ref(inputs.container) ? inputs.container.nativeElement : inputs.container,
+            previousRoot: this.parentStore,
+            events: { ...rootState.events, ...(injectState?.events || {}), ...events },
+            size: { ...rootState.size, ...size },
+            viewport: { ...rootState.viewport, ...(viewport || {}) },
+            ...restInputsState,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, autoRender: { classPropertyName: "autoRender", publicName: "autoRender", isSignal: true, isRequired: false, transformFunction: null }, autoRenderPriority: { classPropertyName: "autoRenderPriority", publicName: "autoRenderPriority", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePortalStore()], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+		<ng-container #portalContentAnchor>
+			@if (renderAutoBeforeRender()) {
+				<ngt-portal-before-render
+					[renderPriority]="autoRenderPriority()"
+					[parentScene]="parentScene"
+					[parentCamera]="parentCamera"
+				/>
+			}
+		</ng-container>
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtPortalBeforeRender, selector: "ngt-portal-before-render", inputs: ["renderPriority", "parentScene", "parentCamera"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtPortal, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-portal',
+                    standalone: true,
+                    template: `
+		<ng-container #portalContentAnchor>
+			@if (renderAutoBeforeRender()) {
+				<ngt-portal-before-render
+					[renderPriority]="autoRenderPriority()"
+					[parentScene]="parentScene"
+					[parentCamera]="parentCamera"
+				/>
+			}
+		</ng-container>
+	`,
+                    imports: [NgtPortalBeforeRender],
+                    providers: [providePortalStore()],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+
+var _a;
+class NgtRoutedScene {
+    static { _a = ROUTED_SCENE; }
+    static { this[_a] = true; }
+    constructor(router, cdr) {
+        router.events
+            .pipe(filter((event) => event instanceof ActivationEnd), takeUntilDestroyed())
+            .subscribe(cdr.detectChanges.bind(cdr));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `
+		<router-outlet />
+	`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: NgtRoutedScene, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ngt-routed-scene',
+                    template: `
+		<router-outlet />
+	`,
+                    imports: [RouterOutlet],
+                }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: i0.ChangeDetectorRef }] });
+
+function apiFactory(obj) {
+    return obj.api;
+}
+function createApiToken(forwardedObject) {
+    const [injectFn, provideFn] = createInjectionToken((apiFactory), {
+        isRoot: false,
+        deps: [forwardRef(forwardedObject)],
+    });
+    return [injectFn, () => provideFn()];
+}
+
+function injectInputs(dir, dirType) {
+    const mirror = reflectComponentType(dirType);
+    if (!mirror) {
+        throw new Error(`[NGT] The provided symbol is not a component nor a directive`);
+    }
+    const inputs = mirror.inputs.reduce((inputs, cur) => {
+        if (dir[cur.propName] && isSignal(dir[cur.propName])) {
+            inputs[cur.propName] = dir[cur.propName];
+        }
+        return inputs;
+    }, {});
+    return computed(() => Object.keys(inputs).reduce((acc, key) => {
+        acc[key] = inputs[key]();
+        return acc;
+    }, {}));
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HTML, NGT_STORE, NgtArgs, NgtCanvas, NgtPortal, NgtPortalContent, NgtRenderer, NgtRendererFactory, NgtRoutedScene, ROUTED_SCENE, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createApiToken, createAttachFunction, extend, getLocalState, injectBeforeRender, injectInputs, injectNgtLoader, injectNgtRef, injectNgtStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, prepare, provideNgtRenderer, provideNgtStore, signalStore, updateCamera };
+//# sourceMappingURL=angular-three.mjs.map