angular-three 4.0.0-next.104 → 4.0.0-next.105

package/fesm2022/angular-three.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, TemplateRef, Injector, effect, DestroyRef, Directive, input, linkedSignal, computed, InjectionToken, untracked, isSignal, signal, ElementRef, booleanAttribute, resource, Pipe, numberAttribute, contentChild, SkipSelf, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, Injectable, output, model, Renderer2 } from '@angular/core';
+import { inject, ViewContainerRef, TemplateRef, Injector, effect, DestroyRef, Directive, input, linkedSignal, computed, InjectionToken, untracked, isSignal, signal, Injectable, ElementRef, booleanAttribute, resource, Pipe, numberAttribute, contentChild, SkipSelf, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, output, model, Renderer2 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Subject, filter } from 'rxjs';
 import * as THREE from 'three';
@@ -295,59 +295,6 @@ function injectLoop() {
     return inject(NGT_LOOP);
 }
 
-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 defaultOptions = {
-        powerPreference: 'high-performance',
-        canvas,
-        antialias: true,
-        alpha: true,
-    };
-    const customRenderer = (typeof glOptions === 'function' ? glOptions(defaultOptions) : glOptions);
-    if (is.renderer(customRenderer))
-        return customRenderer;
-    return new THREE.WebGLRenderer({ ...defaultOptions, ...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: {}, meshes: {} };
-    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;
-            }
-            if (is.three(child, 'isMesh') && !data.meshes[child.name])
-                data.meshes[child.name] = child;
-        });
-    }
-    return data;
-}
-
 /** ported from ngrx/signals */
 const STATE_SOURCE = Symbol('STATE_SOURCE');
 function patchState(stateSource, ...updaters) {
@@ -444,349 +391,137 @@ function updateCamera(camera, size) {
     }
 }
 
-function storeFactory() {
-    const { invalidate, advance } = injectLoop();
-    const document = inject(DOCUMENT);
-    const window = document.defaultView || undefined;
-    // NOTE: using Subject because we do not care about late-subscribers
-    const pointerMissed$ = new Subject();
-    const position = new THREE.Vector3();
-    const defaultTarget = new THREE.Vector3();
-    const tempTarget = new THREE.Vector3();
-    let performanceTimeout = undefined;
-    const pointer = new THREE.Vector2();
-    const store = signalState({
-        id: makeId(),
-        pointerMissed$: pointerMissed$.asObservable(),
-        events: { priority: 1, enabled: true, connected: false },
-        // Mock objects that have to be configured
-        gl: null,
-        camera: null,
-        raycaster: null,
-        scene: null,
-        xr: null,
-        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 = store.snapshot;
-                // Clear timeout
-                if (performanceTimeout)
-                    clearTimeout(performanceTimeout);
-                // Set lower bound performance
-                if (state.performance.current !== state.performance.min)
-                    store.update((state) => ({
-                        performance: { ...state.performance, current: state.performance.min },
-                    }));
-                // Go back to upper bound performance after a while unless something regresses meanwhile
-                performanceTimeout = setTimeout(() => store.update((state) => ({
-                    performance: { ...state.performance, current: store.snapshot.performance.max },
-                })), state.performance.debounce);
+/**
+ * @deprecated: use `getInstanceState` instead. Will be removed in 5.0.0
+ */
+function getLocalState(obj) {
+    return getInstanceState(obj);
+}
+function getInstanceState(obj) {
+    if (!obj)
+        return undefined;
+    return obj.__ngt__ || undefined;
+}
+function invalidateInstance(instance) {
+    let store = getInstanceState(instance)?.store;
+    if (store) {
+        while (store.snapshot.previousRoot) {
+            store = store.snapshot.previousRoot;
+        }
+        if (store.snapshot.internal.frames === 0) {
+            store.snapshot.invalidate();
+        }
+    }
+    checkUpdate(instance);
+}
+function prepare(object, type, instanceState) {
+    const instance = object;
+    if (instanceState?.type === 'ngt-primitive' || !instance.__ngt__) {
+        const { hierarchyStore = signalState({
+            parent: null,
+            objects: [],
+            nonObjects: [],
+            geometryStamp: Date.now(),
+        }), store = null, ...rest } = instanceState || {};
+        const nonObjects = hierarchyStore.nonObjects;
+        const geometryStamp = hierarchyStore.geometryStamp;
+        const nonObjectsChanged = computed(() => {
+            const [_nonObjects] = [nonObjects(), geometryStamp()];
+            return _nonObjects;
+        });
+        instance.__ngt_id__ = crypto.randomUUID();
+        instance.__ngt__ = {
+            previousAttach: null,
+            type,
+            eventCount: 0,
+            handlers: {},
+            hierarchyStore,
+            object: instance,
+            parent: hierarchyStore.parent,
+            objects: hierarchyStore.objects,
+            nonObjects: nonObjectsChanged,
+            add(object, type) {
+                const current = instance.__ngt__.hierarchyStore.snapshot[type];
+                const foundIndex = current.findIndex((node) => object === node || (!!object['uuid'] && !!node['uuid'] && object['uuid'] === node['uuid']));
+                if (foundIndex > -1) {
+                    current.splice(foundIndex, 1, object);
+                    instance.__ngt__.hierarchyStore.update({ [type]: current });
+                }
+                else {
+                    instance.__ngt__.hierarchyStore.update((prev) => ({ [type]: [...prev[type], object] }));
+                }
+                notifyAncestors(instance.__ngt__.hierarchyStore.snapshot.parent, type);
+            },
+            remove(object, type) {
+                instance.__ngt__.hierarchyStore.update((prev) => ({
+                    [type]: prev[type].filter((node) => node !== object),
+                }));
+                notifyAncestors(instance.__ngt__.hierarchyStore.snapshot.parent, type);
+            },
+            setParent(parent) {
+                instance.__ngt__.hierarchyStore.update({ parent });
+            },
+            updateGeometryStamp() {
+                instance.__ngt__.hierarchyStore.update({ geometryStamp: Date.now() });
             },
+            store,
+            ...rest,
+        };
+    }
+    Object.defineProperty(instance.__ngt__, 'setPointerEvent', {
+        value: (eventName, callback) => {
+            const iS = getInstanceState(instance);
+            if (!iS.handlers)
+                iS.handlers = {};
+            // try to get the previous handler. compound might have one, the THREE object might also have one with the same name
+            const previousHandler = iS.handlers[eventName];
+            // readjust the callback
+            const updatedCallback = (event) => {
+                if (previousHandler)
+                    previousHandler(event);
+                callback(event);
+            };
+            Object.assign(iS.handlers, { [eventName]: updatedCallback });
+            // increment the count everytime
+            iS.eventCount += 1;
+            // clean up the event listener by removing the target from the interaction array
+            return () => {
+                const iS = getInstanceState(instance);
+                if (iS) {
+                    iS.handlers && delete iS.handlers[eventName];
+                    iS.eventCount -= 1;
+                }
+            };
         },
-        size: { width: 0, height: 0, top: 0, left: 0 },
-        viewport: {
-            initialDpr: window?.devicePixelRatio || 1,
-            dpr: window?.devicePixelRatio || 1,
-            width: 0,
-            height: 0,
-            top: 0,
-            left: 0,
-            aspect: 0,
-            distance: 0,
-            factor: 0,
-            getCurrentViewport(camera = store.snapshot.camera, target = defaultTarget, size = store.snapshot.size) {
-                const { width, height, top, left } = size;
-                const aspect = width / height;
-                if (target.isVector3)
-                    tempTarget.copy(target);
-                else
-                    tempTarget.set(...target);
-                const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
-                if (is.three(camera, 'isOrthographicCamera')) {
-                    return {
-                        width: width / camera.zoom,
-                        height: height / camera.zoom,
-                        top,
-                        left,
-                        factor: 1,
-                        distance,
-                        aspect,
-                    };
+        configurable: true,
+    });
+    Object.defineProperties(instance.__ngt__, {
+        addInteraction: {
+            value: (store) => {
+                if (!store)
+                    return;
+                const iS = getInstanceState(instance);
+                if (iS.eventCount < 1 || !('raycast' in instance) || !instance['raycast'])
+                    return;
+                let root = store;
+                while (root.snapshot.previousRoot) {
+                    root = root.snapshot.previousRoot;
+                }
+                if (root.snapshot.internal) {
+                    const interactions = root.snapshot.internal.interaction;
+                    const index = interactions.findIndex((obj) => obj.uuid === instance.uuid);
+                    // if already exists, do not add to interactions
+                    if (index < 0) {
+                        root.snapshot.internal.interaction.push(instance);
+                    }
                 }
-                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 };
             },
+            configurable: true,
         },
-        setEvents: (events) => store.update((state) => ({ events: { ...state.events, ...events } })),
-        setSize: (width, height, top, left) => {
-            const camera = store.snapshot.camera;
-            const size = { width, height, top: top ?? 0, left: left ?? 0 };
-            store.update((state) => ({
-                size,
-                viewport: {
-                    ...state.viewport,
-                    ...state.viewport.getCurrentViewport(camera, defaultTarget, size),
-                },
-            }));
-        },
-        setDpr: (dpr) => {
-            const resolved = makeDpr(dpr, window);
-            store.update((state) => ({
-                viewport: { ...state.viewport, dpr: resolved, initialDpr: state.viewport.initialDpr || resolved },
-            }));
-        },
-        setFrameloop: (frameloop) => {
-            const clock = store.snapshot.clock;
-            // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
-            clock.stop();
-            clock.elapsedTime = 0;
-            if (frameloop !== 'never') {
-                clock.start();
-                clock.elapsedTime = 0;
-            }
-            store.update(() => ({ frameloop }));
-        },
-        previousRoot: null,
-        internal: {
-            active: false,
-            priority: 0,
-            frames: 0,
-            lastEvent: new ElementRef(null),
-            interaction: [],
-            hovered: new Map(),
-            capturedMap: new Map(),
-            initialClick: [0, 0],
-            initialHits: [],
-            subscribers: [],
-            subscribe: (callback, priority = 0, _store = store) => {
-                const internal = _store.snapshot.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 = _store.snapshot.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;
-    effect(() => {
-        const [newCamera, newSize, newDpr, gl] = [store.camera(), store.size(), store.viewport.dpr(), store.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');
-function injectStore(options) {
-    return inject(NGT_STORE, options);
-}
-
-function resolveRef(ref) {
-    if (is.ref(ref)) {
-        return ref.nativeElement;
-    }
-    return ref;
-}
-
-class NgtParent extends NgtCommonDirective {
-    constructor() {
-        super();
-        this.parent = input.required();
-        this.store = injectStore();
-        this._parent = computed(() => {
-            const parent = this.parent();
-            const rawParent = typeof parent === 'function' ? parent() : parent;
-            if (!rawParent)
-                return null;
-            const scene = this.store.scene();
-            if (typeof rawParent === 'string') {
-                return scene.getObjectByName(rawParent);
-            }
-            return resolveRef(rawParent);
-        });
-        this.linkedValue = linkedSignal(this._parent);
-        this.shouldSkipRender = computed(() => !this._parent());
-        const commentNode = this.commentNode;
-        commentNode.data = NGT_PARENT_FLAG;
-        commentNode[NGT_PARENT_FLAG] = true;
-        if (commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]) {
-            commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]('parent', this.injector);
-            delete commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG];
-        }
-    }
-    validate() {
-        return !this.injected && !!this.injectedValue;
-    }
-    beforeCreateView() {
-        const commentNode = this.commentNode;
-        if (commentNode[NGT_INTERNAL_SET_PARENT_COMMENT_FLAG]) {
-            commentNode[NGT_INTERNAL_SET_PARENT_COMMENT_FLAG](this.injectedValue);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtParent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtParent, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[parent]' }]
-        }], ctorParameters: () => [] });
-
-/**
- * @deprecated: use `getInstanceState` instead. Will be removed in 5.0.0
- */
-function getLocalState(obj) {
-    return getInstanceState(obj);
-}
-function getInstanceState(obj) {
-    if (!obj)
-        return undefined;
-    return obj.__ngt__ || undefined;
-}
-function invalidateInstance(instance) {
-    let store = getInstanceState(instance)?.store;
-    if (store) {
-        while (store.snapshot.previousRoot) {
-            store = store.snapshot.previousRoot;
-        }
-        if (store.snapshot.internal.frames === 0) {
-            store.snapshot.invalidate();
-        }
-    }
-    checkUpdate(instance);
-}
-function prepare(object, type, instanceState) {
-    const instance = object;
-    if (instanceState?.type === 'ngt-primitive' || !instance.__ngt__) {
-        const { hierarchyStore = signalState({
-            parent: null,
-            objects: [],
-            nonObjects: [],
-            geometryStamp: Date.now(),
-        }), store = null, ...rest } = instanceState || {};
-        const nonObjects = hierarchyStore.nonObjects;
-        const geometryStamp = hierarchyStore.geometryStamp;
-        const nonObjectsChanged = computed(() => {
-            const [_nonObjects] = [nonObjects(), geometryStamp()];
-            return _nonObjects;
-        });
-        instance.__ngt__ = {
-            previousAttach: null,
-            type,
-            eventCount: 0,
-            handlers: {},
-            hierarchyStore,
-            object: instance,
-            parent: hierarchyStore.parent,
-            objects: hierarchyStore.objects,
-            nonObjects: nonObjectsChanged,
-            add(object, type) {
-                const current = instance.__ngt__.hierarchyStore.snapshot[type];
-                const foundIndex = current.findIndex((node) => object === node || (!!object['uuid'] && !!node['uuid'] && object['uuid'] === node['uuid']));
-                if (foundIndex > -1) {
-                    current.splice(foundIndex, 1, object);
-                    instance.__ngt__.hierarchyStore.update({ [type]: current });
-                }
-                else {
-                    instance.__ngt__.hierarchyStore.update((prev) => ({ [type]: [...prev[type], object] }));
-                }
-                notifyAncestors(instance.__ngt__.hierarchyStore.snapshot.parent, type);
-            },
-            remove(object, type) {
-                instance.__ngt__.hierarchyStore.update((prev) => ({
-                    [type]: prev[type].filter((node) => node !== object),
-                }));
-                notifyAncestors(instance.__ngt__.hierarchyStore.snapshot.parent, type);
-            },
-            setParent(parent) {
-                instance.__ngt__.hierarchyStore.update({ parent });
-            },
-            updateGeometryStamp() {
-                instance.__ngt__.hierarchyStore.update({ geometryStamp: Date.now() });
-            },
-            store,
-            ...rest,
-        };
-    }
-    Object.defineProperty(instance.__ngt__, 'setPointerEvent', {
-        value: (eventName, callback) => {
-            const iS = getInstanceState(instance);
-            if (!iS.handlers)
-                iS.handlers = {};
-            // try to get the previous handler. compound might have one, the THREE object might also have one with the same name
-            const previousHandler = iS.handlers[eventName];
-            // readjust the callback
-            const updatedCallback = (event) => {
-                if (previousHandler)
-                    previousHandler(event);
-                callback(event);
-            };
-            Object.assign(iS.handlers, { [eventName]: updatedCallback });
-            // increment the count everytime
-            iS.eventCount += 1;
-            // clean up the event listener by removing the target from the interaction array
-            return () => {
-                const iS = getInstanceState(instance);
-                if (iS) {
-                    iS.handlers && delete iS.handlers[eventName];
-                    iS.eventCount -= 1;
-                }
-            };
-        },
-        configurable: true,
-    });
-    Object.defineProperties(instance.__ngt__, {
-        addInteraction: {
+        removeInteraction: {
             value: (store) => {
                 if (!store)
                     return;
-                const iS = getInstanceState(instance);
-                if (iS.eventCount < 1 || !('raycast' in instance) || !instance['raycast'])
-                    return;
                 let root = store;
                 while (root.snapshot.previousRoot) {
                     root = root.snapshot.previousRoot;
@@ -794,27 +529,8 @@ function prepare(object, type, instanceState) {
                 if (root.snapshot.internal) {
                     const interactions = root.snapshot.internal.interaction;
                     const index = interactions.findIndex((obj) => obj.uuid === instance.uuid);
-                    // if already exists, do not add to interactions
-                    if (index < 0) {
-                        root.snapshot.internal.interaction.push(instance);
-                    }
-                }
-            },
-            configurable: true,
-        },
-        removeInteraction: {
-            value: (store) => {
-                if (!store)
-                    return;
-                let root = store;
-                while (root.snapshot.previousRoot) {
-                    root = root.snapshot.previousRoot;
-                }
-                if (root.snapshot.internal) {
-                    const interactions = root.snapshot.internal.interaction;
-                    const index = interactions.findIndex((obj) => obj.uuid === instance.uuid);
-                    if (index >= 0)
-                        interactions.splice(index, 1);
+                    if (index >= 0)
+                        interactions.splice(index, 1);
                 }
             },
             configurable: true,
@@ -822,175 +538,398 @@ function prepare(object, type, instanceState) {
     });
     return instance;
 }
+const notificationCache = new Map();
+/**
+ * Notify ancestors about changes to a THREE.js objects' children
+ *
+ * For example: `NgtsCenter` might have a child that asynchronously loads a 3D model
+ * in which case the model matrices will be settled later. `NgtsCenter` needs to know about this
+ * matrices change to re-center everything inside of it.
+ *
+ * The implementation here uses a naive approach to reduce the number of notifications; we cache
+ * the notifications by the instance ID and the type of the notification.
+ *
+ * 1. If there's no cache or
+ * 2. If the type is different for the same instance or
+ * 3. We've skipped the notifications for this instance more than a certain amount
+ *
+ * then we'll proceed with notification
+ */
 function notifyAncestors(instance, type) {
     if (!instance)
         return;
     const localState = getInstanceState(instance);
     if (!localState)
         return;
-    const { parent } = localState.hierarchyStore.snapshot;
-    localState.hierarchyStore.update({ [type]: (localState.hierarchyStore.snapshot[type] || []).slice() });
-    notifyAncestors(parent, type);
-}
-
-class NgtSelectionApi {
-    constructor() {
-        this.enabled = input(true, { alias: 'selection', transform: booleanAttribute });
-        this.source = signal([]);
-        this.selected = this.source.asReadonly();
-    }
-    update(...args) {
-        if (!this.enabled())
-            return;
-        this.source.update(...args);
+    const id = instance.__ngt_id__ || instance['uuid'];
+    if (!id)
+        return;
+    const maxNotificationSkipCount = localState.store?.snapshot.maxNotificationSkipCount || 5;
+    const cached = notificationCache.get(id);
+    if (!cached || cached.lastType !== type || cached.skipCount > maxNotificationSkipCount) {
+        notificationCache.set(id, { skipCount: 0, lastType: type });
+        if (notificationCache.size === 1) {
+            queueMicrotask(() => notificationCache.clear());
+        }
+        const { parent } = localState.hierarchyStore.snapshot;
+        localState.hierarchyStore.update({ [type]: (localState.hierarchyStore.snapshot[type] || []).slice() });
+        notifyAncestors(parent, type);
+        return;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtSelectionApi, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgtSelectionApi, isStandalone: true, selector: "[selection]", inputs: { enabled: { classPropertyName: "enabled", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    notificationCache.set(id, { ...cached, skipCount: cached.skipCount + 1 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtSelectionApi, decorators: [{
-            type: Directive,
-            args: [{ selector: '[selection]' }]
-        }] });
-class NgtSelect {
-    constructor() {
-        this.enabled = input(false, { transform: booleanAttribute, alias: 'select' });
-        const elementRef = inject(ElementRef);
-        const selectionApi = inject(NgtSelectionApi);
-        effect((onCleanup) => {
-            const selectionEnabled = selectionApi.enabled();
-            if (!selectionEnabled)
-                return;
-            const enabled = this.enabled();
-            if (!enabled)
-                return;
-            const host = elementRef.nativeElement;
-            const localState = getInstanceState(host);
-            if (!localState)
-                return;
-            // ngt-mesh[select]
-            if (host.type === 'Mesh') {
-                selectionApi.update((prev) => [...prev, host]);
-                onCleanup(() => selectionApi.update((prev) => prev.filter((el) => el !== host)));
-                return;
+
+// This function prepares a set of changes to be applied to the instance
+function diffProps(instance, props) {
+    const changes = [];
+    for (const propKey in props) {
+        const propValue = props[propKey];
+        let key = propKey;
+        if (is.colorSpaceExist(instance)) {
+            if (propKey === 'encoding') {
+                key = 'colorSpace';
             }
-            const [collection] = [untracked(selectionApi.selected), localState.objects()];
-            let changed = false;
-            const current = [];
-            host.traverse((child) => {
-                child.type === 'Mesh' && current.push(child);
-                if (collection.indexOf(child) === -1)
-                    changed = true;
-            });
-            if (!changed)
-                return;
-            selectionApi.update((prev) => [...prev, ...current]);
-            onCleanup(() => {
-                selectionApi.update((prev) => prev.filter((el) => !current.includes(el)));
-            });
-        });
+            else if (propKey === 'outputEncoding') {
+                key = 'outputColorSpace';
+            }
+        }
+        if (is.equ(propValue, instance[key]))
+            continue;
+        changes.push([propKey, propValue]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgtSelect, isStandalone: true, selector: "ngt-group[select], ngt-mesh[select]", inputs: { enabled: { classPropertyName: "enabled", publicName: "select", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    return changes;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtSelect, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ngt-group[select], ngt-mesh[select]' }]
-        }], ctorParameters: () => [] });
-const NgtSelection = [NgtSelectionApi, NgtSelect];
-
-/**
- * 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);
-        }
+// NOTE: this is a workaround to give the instance a chance to have the store from the parent.
+//  we clear this property after the applyProps is done
+const NGT_APPLY_PROPS = '__ngt_apply_props__';
+// https://github.com/mrdoob/three.js/pull/27042
+// https://github.com/mrdoob/three.js/pull/22748
+const colorMaps = ['map', 'emissiveMap', 'sheenColorMap', 'specularColorMap', 'envMap'];
+function resolveInstanceKey(instance, key) {
+    let targetProp = instance[key];
+    if (!key.includes('.'))
+        return { root: instance, targetKey: key, targetProp };
+    // Resolve pierced target
+    targetProp = instance;
+    for (const part of key.split('.')) {
+        key = part;
+        instance = targetProp;
+        targetProp = targetProp[key];
     }
+    // const chain = key.split('.');
+    // targetProp = chain.reduce((acc, part) => acc[part], instance);
+    // const targetKey = chain.pop()!;
+    //
+    // // Switch root if atomic
+    // if (!targetProp?.set) instance = chain.reduce((acc, part) => acc[part], instance);
+    return { root: instance, targetKey: key, targetProp };
 }
-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);
+// 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;
+    const localState = getInstanceState(instance);
+    const rootState = localState?.store?.snapshot ?? instance[NGT_APPLY_PROPS]?.snapshot ?? {};
+    const changes = diffProps(instance, props);
+    for (let i = 0; i < changes.length; i++) {
+        let [key, value] = changes[i];
+        // Ignore setting undefined props
+        // https://github.com/pmndrs/react-three-fiber/issues/274
+        if (value === undefined)
+            continue;
+        // 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 { root, targetKey, targetProp } = resolveInstanceKey(instance, key);
+        // we have switched due to pierced props
+        if (root !== instance) {
+            return applyProps(root, { [targetKey]: value });
         }
-    });
-    internal.capturedMap.forEach((captures, pointerId) => {
-        releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
-    });
-}
-function createEvents(store) {
-    /** Calculates delta */
-    function calculateDistance(event) {
-        const internal = store.snapshot.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 getInstanceState(obj)?.handlers?.[eventName];
-        }));
-    }
-    function intersect(event, filter) {
-        const state = store.snapshot;
-        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 objectRootState = getInstanceState(eventsObjects[i])?.store?.snapshot;
-            if (objectRootState) {
-                objectRootState.raycaster.camera = undefined;
-            }
+        // Layers have no copy function, we must therefore copy the mask property
+        if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) {
+            targetProp.mask = value.mask;
         }
-        if (!state.previousRoot) {
-            // Make sure root-level pointer and ray are set up
-            state.events.compute?.(event, store, null);
+        else if (is.three(targetProp, 'isColor') && is.colorRepresentation(value)) {
+            targetProp.set(value);
         }
-        function handleRaycast(obj) {
-            const objStore = getInstanceState(obj)?.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;
+        // Copy if properties match signatures
+        else if (targetProp &&
+            typeof targetProp.set === 'function' &&
+            typeof targetProp.copy === 'function' &&
+            value?.constructor &&
+            targetProp.constructor === value.constructor) {
+            // If both are geometries, we should assign the value directly instead of copying
+            if (is.three(targetProp, 'isBufferGeometry') &&
+                is.three(value, 'isBufferGeometry')) {
+                Object.assign(root, { [targetKey]: value });
+            }
+            else {
+                targetProp.copy(value);
             }
-            // 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 = getInstanceState(a.object)?.store?.snapshot;
-            const bState = getInstanceState(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);
+        // Set array types
+        else if (targetProp && typeof targetProp.set === 'function' && Array.isArray(value)) {
+            if (typeof targetProp.fromArray === 'function')
+                targetProp.fromArray(value);
+            else
+                targetProp.set(...value);
+        }
+        // Set literal types
+        else if (targetProp && typeof targetProp.set === 'function' && typeof value !== 'object') {
+            const isColor = is.three(targetProp, 'isColor');
+            // Allow setting array scalars
+            if (!isColor && typeof targetProp.setScalar === 'function' && typeof value === 'number')
+                targetProp.setScalar(value);
+            // Otherwise just set single value
+            else
+                targetProp.set(value);
+        }
+        // Else, just overwrite the value
+        else {
+            Object.assign(root, { [targetKey]: value });
+            // Auto-convert sRGB texture parameters for built-in materials
+            // https://github.com/pmndrs/react-three-fiber/issues/344
+            // https://github.com/mrdoob/three.js/pull/25857
+            if (rootState &&
+                !rootState.linear &&
+                colorMaps.includes(targetKey) &&
+                root[targetKey]?.isTexture &&
+                // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
+                root[targetKey].format === THREE.RGBAFormat &&
+                root[targetKey].type === THREE.UnsignedByteType) {
+                // NOTE: this cannot be set from the renderer (e.g. sRGB source textures rendered to P3)
+                root[targetKey].colorSpace = THREE.SRGBColorSpace;
+            }
+        }
+        checkUpdate(root[targetKey]);
+        checkUpdate(targetProp);
+        invalidateInstance(instance);
+    }
+    const instanceHandlersCount = localState?.eventCount;
+    const parent = localState?.hierarchyStore?.snapshot.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?.onUpdate && changes.length) {
+        localState.onUpdate(instance);
+    }
+    // clearing the intermediate store from the instance
+    if (instance[NGT_APPLY_PROPS])
+        delete instance[NGT_APPLY_PROPS];
+    return instance;
+}
+
+const catalogue = {};
+function extend(objects) {
+    const keys = Object.keys(objects);
+    Object.assign(catalogue, objects);
+    return () => {
+        remove(...keys);
+    };
+}
+function remove(...keys) {
+    for (const key of keys) {
+        delete catalogue[key];
+    }
+}
+const NGT_CATALOGUE = new InjectionToken('NGT_CATALOGUE', { factory: () => catalogue });
+function injectCatalogue() {
+    return inject(NGT_CATALOGUE);
+}
+
+function isRendererNode(node) {
+    return !!node && typeof node === 'object' && NGT_RENDERER_NODE_FLAG in node;
+}
+function createRendererNode(type, node, document) {
+    const state = [type, false, undefined, undefined, undefined, undefined, []];
+    const rendererNode = Object.assign(node, { [NGT_RENDERER_NODE_FLAG]: state });
+    // NOTE: assign ownerDocument to node so we can use HostListener in Component
+    if (!rendererNode['ownerDocument'])
+        rendererNode['ownerDocument'] = document;
+    // NOTE: Angular SSR calls `node.getAttribute()` to retrieve hydration info on a node
+    if (!('getAttribute' in rendererNode) || typeof rendererNode['getAttribute'] !== 'function') {
+        const getNodeAttribute = (name) => rendererNode[name];
+        getNodeAttribute[NGT_GET_NODE_ATTRIBUTE_FLAG] = true;
+        Object.defineProperty(rendererNode, 'getAttribute', { value: getNodeAttribute, configurable: true });
+    }
+    return rendererNode;
+}
+function setRendererParentNode(node, parent) {
+    if (!node.__ngt_renderer__[5 /* NgtRendererClassId.parent */]) {
+        node.__ngt_renderer__[5 /* NgtRendererClassId.parent */] = parent;
+    }
+}
+function addRendererChildNode(node, child) {
+    if (!node.__ngt_renderer__[6 /* NgtRendererClassId.children */].includes(child)) {
+        node.__ngt_renderer__[6 /* NgtRendererClassId.children */].push(child);
+    }
+}
+
+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 defaultOptions = {
+        powerPreference: 'high-performance',
+        canvas,
+        antialias: true,
+        alpha: true,
+    };
+    const customRenderer = (typeof glOptions === 'function' ? glOptions(defaultOptions) : glOptions);
+    if (is.renderer(customRenderer))
+        return customRenderer;
+    return new THREE.WebGLRenderer({ ...defaultOptions, ...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: {}, meshes: {} };
+    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;
+            }
+            if (is.three(child, 'isMesh') && !data.meshes[child.name])
+                data.meshes[child.name] = child;
+        });
+    }
+    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.snapshot.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 getInstanceState(obj)?.handlers?.[eventName];
+        }));
+    }
+    function intersect(event, filter) {
+        const state = store.snapshot;
+        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 objectRootState = getInstanceState(eventsObjects[i])?.store?.snapshot;
+            if (objectRootState) {
+                objectRootState.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 objStore = getInstanceState(obj)?.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 = getInstanceState(a.object)?.store?.snapshot;
+            const bState = getInstanceState(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);
@@ -1172,6 +1111,9 @@ function createEvents(store) {
                     }
                 };
         }
+        const isPointerMove = name === 'pointermove';
+        const isClickEvent = name === 'click' || name === 'contextmenu' || name === 'dblclick';
+        const filter = isPointerMove ? filterPointerEvents : undefined;
         // Any other pointer goes here ...
         return function handleEvent(event) {
             // NOTE: __pointerMissed$ on NgtStore is private subject since we only expose the Observable
@@ -1180,9 +1122,6 @@ function createEvents(store) {
             // 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
@@ -1272,1323 +1211,532 @@ function createEvents(store) {
     return { handlePointer };
 }
 
-var _a;
-const NGT_HTML_DOM_ELEMENT = new InjectionToken('NGT_HTML_DOM_ELEMENT');
-function provideHTMLDomElement(...args) {
-    if (args.length === 0) {
-        return { provide: NGT_HTML_DOM_ELEMENT, useFactory: () => 'gl' };
-    }
-    if (args.length === 1) {
-        return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args[0] };
+function attach(object, value, paths = [], useApplyProps = false) {
+    const [base, ...remaining] = paths;
+    if (!base)
+        return;
+    if (remaining.length === 0) {
+        if (useApplyProps)
+            applyProps(object, { [base]: value });
+        else
+            object[base] = value;
     }
-    return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args.pop(), deps: args };
-}
-class NgtHTML {
-    static { _a = NGT_HTML_FLAG; }
-    static { this[_a] = true; }
-    constructor() {
-        this.domElement = inject(NGT_HTML_DOM_ELEMENT, { self: true, optional: true });
-        const host = inject(ElementRef);
-        const store = injectStore();
-        if (this.domElement === 'gl') {
-            Object.assign(host.nativeElement, {
-                [NGT_DOM_PARENT_FLAG]: store.snapshot.gl.domElement.parentElement,
-            });
-        }
-        else if (this.domElement) {
-            Object.assign(host.nativeElement, { [NGT_DOM_PARENT_FLAG]: this.domElement });
-        }
-        inject(DestroyRef).onDestroy(() => {
-            host.nativeElement[NGT_DOM_PARENT_FLAG] = null;
-            delete host.nativeElement[NGT_DOM_PARENT_FLAG];
-        });
+    else {
+        assignEmpty(object, base, useApplyProps);
+        attach(object[base], value, remaining, useApplyProps);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtHTML, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgtHTML, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtHTML, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [] });
-
-const cached$1 = new Map();
-const memoizedLoaders$1 = new WeakMap();
-function normalizeInputs$1(input) {
-    let urls = [];
-    if (Array.isArray(input)) {
-        urls = input;
+function detach(parent, child, attachProp) {
+    const childInstanceState = getInstanceState(child);
+    if (childInstanceState) {
+        if (Array.isArray(attachProp))
+            attach(parent, childInstanceState.previousAttach, attachProp, childInstanceState.type === 'ngt-value');
+        else
+            childInstanceState.previousAttach?.();
     }
-    else if (typeof input === 'string') {
-        urls = [input];
+}
+function assignEmpty(obj, base, shouldAssignStoreForApplyProps = false) {
+    if ((!Object.hasOwn(obj, base) && Reflect && !!Reflect.has && !Reflect.has(obj, base)) || obj[base] === undefined) {
+        obj[base] = {};
     }
-    else {
-        urls = Object.values(input);
+    if (shouldAssignStoreForApplyProps) {
+        const instanceState = getInstanceState(obj[base]);
+        // if we already have instance state, bail out
+        if (instanceState)
+            return;
+        const parentInstanceState = getInstanceState(obj);
+        // if parent doesn't have instance state, bail out
+        if (!parentInstanceState)
+            return;
+        Object.assign(obj[base], { [NGT_APPLY_PROPS]: parentInstanceState.store });
     }
-    return urls.map((url) => (url.includes('undefined') || url.includes('null') || !url ? '' : url));
-}
-function load(loaderConstructorFactory, inputs, { extensions, onLoad, onProgress, } = {}) {
-    return () => {
-        const urls = normalizeInputs$1(inputs());
-        let loader = memoizedLoaders$1.get(loaderConstructorFactory(urls));
-        if (!loader) {
-            loader = new (loaderConstructorFactory(urls))();
-            memoizedLoaders$1.set(loaderConstructorFactory(urls), loader);
-        }
-        if (extensions)
-            extensions(loader);
-        return urls.map((url) => {
-            if (url === '')
-                return Promise.resolve(null);
-            if (!cached$1.has(url)) {
-                cached$1.set(url, new Promise((resolve, reject) => {
-                    loader.load(url, (data) => {
-                        if ('scene' in data) {
-                            Object.assign(data, makeObjectGraph(data['scene']));
-                        }
-                        if (onLoad) {
-                            onLoad(data);
-                        }
-                        resolve(data);
-                    }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error?.message}`)));
-                }));
-            }
-            return cached$1.get(url);
-        });
-    };
 }
-/**
- * @deprecated Use loaderResource instead. Will be removed in v5.0.0
- * @since v4.0.0~
- */
-function _injectLoader(loaderConstructorFactory, inputs, { extensions, onProgress, onLoad, injector, } = {}) {
-    return assertInjector(_injectLoader, injector, () => {
-        const response = signal(null);
-        const cachedResultPromisesEffect = load(loaderConstructorFactory, inputs, {
-            extensions,
-            onProgress,
-            onLoad: onLoad,
-        });
-        effect(() => {
-            const originalUrls = inputs();
-            const cachedResultPromises = cachedResultPromisesEffect();
-            Promise.all(cachedResultPromises).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) => {
-                        // @ts-ignore
-                        result[key] = results[keys.indexOf(key)];
-                        return result;
-                    }, {});
-                });
-            });
-        });
-        return response.asReadonly();
-    });
+function createAttachFunction(cb) {
+    return (parent, child, store) => cb({ parent, child, store });
 }
-_injectLoader.preload = (loaderConstructorFactory, inputs, extensions, onLoad) => {
-    const effects = load(loaderConstructorFactory, inputs, { extensions, onLoad })();
-    if (effects) {
-        void Promise.all(effects);
-    }
-};
-_injectLoader.destroy = () => {
-    cached$1.clear();
-};
-_injectLoader.clear = (urls) => {
-    const urlToClear = Array.isArray(urls) ? urls : [urls];
-    urlToClear.forEach((url) => {
-        cached$1.delete(url);
-    });
-};
-/**
- * @deprecated Use loaderResource instead. Will be removed in v5.0.0
- * @since v4.0.0~
- */
-const injectLoader = _injectLoader;
 
-function normalizeInputs(input) {
-    let urls = [];
-    if (Array.isArray(input)) {
-        urls = input;
-    }
-    else if (typeof input === 'string') {
-        urls = [input];
-    }
-    else {
-        urls = Object.values(input);
+function kebabToPascal(str) {
+    if (!str)
+        return str; // Handle empty input
+    let pascalStr = '';
+    let capitalizeNext = true; // Flag to track capitalization
+    for (let i = 0; i < str.length; i++) {
+        const char = str[i];
+        if (char === '-') {
+            capitalizeNext = true;
+            continue;
+        }
+        pascalStr += capitalizeNext ? char.toUpperCase() : char;
+        capitalizeNext = false;
     }
-    return urls.map((url) => (url.includes('undefined') || url.includes('null') || !url ? '' : url));
+    return pascalStr;
 }
-const cached = new Map();
-const memoizedLoaders = new WeakMap();
-function getLoaderRequestParams(input, loaderConstructorFactory, extensions) {
-    const urls = input();
-    const LoaderConstructor = loaderConstructorFactory(urls);
-    const normalizedUrls = normalizeInputs(urls);
-    let loader = memoizedLoaders.get(LoaderConstructor);
-    if (!loader) {
-        loader = new LoaderConstructor();
-        memoizedLoaders.set(LoaderConstructor, loader);
+function propagateStoreRecursively(node, parentNode) {
+    const iS = getInstanceState(node);
+    const pIS = getInstanceState(parentNode);
+    if (!iS || !pIS)
+        return;
+    // assign store on child if not already exist
+    // or child store is not the same as parent store
+    // or child store is the parent of parent store
+    if (!iS.store || iS.store !== pIS.store || iS.store === pIS.store.snapshot.previousRoot) {
+        iS.store = pIS.store;
+        // Call addInteraction if it exists
+        iS.addInteraction?.(pIS.store);
+        // Collect all children (objects and nonObjects)
+        const children = [
+            ...(iS.objects ? untracked(iS.objects) : []),
+            ...(iS.nonObjects ? untracked(iS.nonObjects) : []),
+        ];
+        // Recursively reassign the store for each child
+        for (const child of children) {
+            propagateStoreRecursively(child, node);
+        }
     }
-    if (extensions)
-        extensions(loader);
-    return { urls, normalizedUrls, loader };
 }
-function getLoaderPromises(request, onProgress) {
-    return request.normalizedUrls.map((url) => {
-        if (url === '')
-            return Promise.resolve(null);
-        const cachedPromise = cached.get(url);
-        if (cachedPromise)
-            return cachedPromise;
-        const promise = new Promise((res, rej) => {
-            request.loader.load(url, (data) => {
-                if ('scene' in data) {
-                    Object.assign(data, makeObjectGraph(data['scene']));
+function attachThreeNodes(parent, child) {
+    const pIS = getInstanceState(parent);
+    const cIS = getInstanceState(child);
+    if (!pIS || !cIS) {
+        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;
+    // propagate store recursively
+    propagateStoreRecursively(child, parent);
+    if (cIS.attach) {
+        const attachProp = cIS.attach;
+        if (typeof attachProp === 'function') {
+            let attachCleanUp = undefined;
+            if (cIS.type === 'ngt-value') {
+                if (cIS.hierarchyStore.snapshot.parent !== parent) {
+                    cIS.setParent(parent);
                 }
-                res(data);
-            }, onProgress, (error) => rej(new Error(`[NGT] Could not load ${url}: ${error?.message}`)));
-        });
-        cached.set(url, promise);
-        return promise;
-    });
-}
-function loaderResource(loaderConstructorFactory, input, { extensions, onLoad, onProgress, injector, } = {}) {
-    return assertInjector(loaderResource, injector, () => {
-        return resource({
-            request: () => getLoaderRequestParams(input, loaderConstructorFactory, extensions),
-            loader: async ({ request }) => {
-                // TODO: use the abortSignal when THREE.Loader supports it
-                const loadedResults = await Promise.all(getLoaderPromises(request, onProgress));
-                let results;
-                if (Array.isArray(request.urls)) {
-                    results = loadedResults;
-                }
-                else if (typeof request.urls === 'string') {
-                    results = loadedResults[0];
-                }
-                else {
-                    const keys = Object.keys(request.urls);
-                    results = keys.reduce((result, key) => {
-                        // @ts-ignore
-                        result[key] = loadedResults[keys.indexOf(key)];
-                        return result;
-                    }, {});
-                }
-                if (onLoad)
-                    onLoad(results);
-                return results;
-            },
-        });
-    });
-}
-loaderResource.preload = (loaderConstructor, inputs, extensions) => {
-    const params = getLoaderRequestParams(() => inputs, () => loaderConstructor, extensions);
-    void Promise.all(getLoaderPromises(params));
-};
-loaderResource.destroy = () => {
-    cached.clear();
-};
-loaderResource.clear = (urls) => {
-    const urlToClear = Array.isArray(urls) ? urls : [urls];
-    urlToClear.forEach((url) => {
-        cached.delete(url);
-    });
-};
-
-const RGBA_REGEX = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*\.?\d+)?\)/;
-const DEFAULT_COLOR = 0x000000;
-class NgtHexify {
-    constructor() {
-        this.document = inject(DOCUMENT, { optional: true });
-        this.cache = {};
-    }
-    /**
-     * transforms a:
-     * - hex string to a hex number
-     * - rgb string to a hex number
-     * - rgba string to a hex number
-     * - css color string to a hex number
-     *
-     * always default to black if failed
-     * @param value
-     */
-    transform(value) {
-        if (value == null)
-            return DEFAULT_COLOR;
-        if (value.startsWith('#')) {
-            if (!this.cache[value]) {
-                this.cache[value] = this.hexStringToNumber(value);
+                // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
+                if (child.__ngt_renderer__[2 /* NgtRendererClassId.rawValue */] === undefined)
+                    return;
+                attachCleanUp = attachProp(parent, child.__ngt_renderer__[2 /* NgtRendererClassId.rawValue */], cIS.store);
             }
-            return this.cache[value];
-        }
-        if (!this.ctx) {
-            this.ctx = this.document?.createElement('canvas').getContext('2d');
-        }
-        if (!this.ctx) {
-            console.warn('[NGT] hexify: canvas context is not available');
-            return DEFAULT_COLOR;
-        }
-        this.ctx.fillStyle = value;
-        const computedValue = this.ctx.fillStyle;
-        if (computedValue.startsWith('#')) {
-            if (!this.cache[computedValue]) {
-                this.cache[computedValue] = this.hexStringToNumber(computedValue);
+            else {
+                attachCleanUp = attachProp(parent, child, cIS.store);
             }
-            return this.cache[computedValue];
-        }
-        if (!computedValue.startsWith('rgba')) {
-            console.warn(`[NGT] hexify: invalid color format. Expected rgba or hex, receive: ${computedValue}`);
-            return DEFAULT_COLOR;
-        }
-        const match = computedValue.match(RGBA_REGEX);
-        if (!match) {
-            console.warn(`[NGT] hexify: invalid color format. Expected rgba or hex, receive: ${computedValue}`);
-            return DEFAULT_COLOR;
+            if (attachCleanUp)
+                cIS.previousAttach = attachCleanUp;
         }
-        const r = parseInt(match[1], 10);
-        const g = parseInt(match[2], 10);
-        const b = parseInt(match[3], 10);
-        const a = match[4] ? parseFloat(match[4]) : 1.0;
-        const cacheKey = `${r}:${g}:${b}:${a}`;
-        // check result from cache
-        if (!this.cache[cacheKey]) {
-            // Convert the components to hex strings
-            const hexR = this.componentToHex(r);
-            const hexG = this.componentToHex(g);
-            const hexB = this.componentToHex(b);
-            const hexA = this.componentToHex(Math.round(a * 255));
-            // Combine the hex components into a single hex string
-            const hex = `#${hexR}${hexG}${hexB}${hexA}`;
-            this.cache[cacheKey] = this.hexStringToNumber(hex);
+        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.three(child, 'isMaterial') &&
+                !Array.isArray(parent['material'])) {
+                parent['material'] = [];
+            }
+            if (cIS.type === 'ngt-value') {
+                if (cIS.hierarchyStore.snapshot.parent !== parent) {
+                    cIS.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__[2 /* NgtRendererClassId.rawValue */] === undefined)
+                    return;
+                // save prev value
+                cIS.previousAttach = attachProp.reduce((value, key) => value[key], parent);
+                attach(parent, child.__ngt_renderer__[2 /* NgtRendererClassId.rawValue */], attachProp, true);
+            }
+            else {
+                // save prev value
+                cIS.previousAttach = attachProp.reduce((value, key) => value[key], parent);
+                attach(parent, child, attachProp);
+            }
         }
-        return this.cache[cacheKey];
     }
-    hexStringToNumber(hexString) {
-        return parseInt(hexString.replace('#', ''), 16);
+    else if (is.three(parent, 'isObject3D') && is.three(child, 'isObject3D')) {
+        parent.add(child);
+        added = true;
+        cIS.addInteraction?.(cIS.store || pIS.store);
     }
-    componentToHex(component) {
-        const hex = component.toString(16);
-        return hex.length === 1 ? '0' + hex : hex;
+    if (pIS.add) {
+        pIS.add(child, added ? 'objects' : 'nonObjects');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtHexify, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: NgtHexify, isStandalone: true, name: "hexify" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtHexify, decorators: [{
-            type: Pipe,
-            args: [{ name: 'hexify', pure: true }]
-        }] });
-
-const catalogue = {};
-function extend(objects) {
-    const keys = Object.keys(objects);
-    Object.assign(catalogue, objects);
-    return () => {
-        remove(...keys);
-    };
-}
-function remove(...keys) {
-    for (const key of keys) {
-        delete catalogue[key];
+    if (cIS.parent && untracked(cIS.parent) !== parent) {
+        cIS.setParent(parent);
     }
+    // NOTE: this does not mean that the child is actually attached to the parent on the scenegraph.
+    //  a child on the Angular template can also emit onAttach
+    if (cIS.onAttach)
+        cIS.onAttach({ parent, node: child });
+    invalidateInstance(child);
+    invalidateInstance(parent);
 }
-const NGT_CATALOGUE = new InjectionToken('NGT_CATALOGUE', { factory: () => catalogue });
-function injectCatalogue() {
-    return inject(NGT_CATALOGUE);
-}
-
-function omit(objFn, keysToOmit, equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' })) {
-    return computed(() => {
-        const obj = objFn();
-        const result = {};
-        for (const key of Object.keys(obj)) {
-            if (keysToOmit.includes(key))
-                continue;
-            Object.assign(result, { [key]: obj[key] });
-        }
-        return result;
-    }, { equal });
-}
-function pick(objFn, keyOrKeys, equal) {
-    if (Array.isArray(keyOrKeys)) {
-        if (!equal) {
-            equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' });
-        }
-        return computed(() => {
-            const obj = objFn();
-            const result = {};
-            for (const key of keyOrKeys) {
-                if (!(key in obj))
-                    continue;
-                Object.assign(result, { [key]: obj[key] });
-            }
-            return result;
-        }, { equal });
+function removeThreeChild(child, parent, dispose) {
+    const pIS = getInstanceState(parent);
+    const cIS = getInstanceState(child);
+    // clear parent ref
+    cIS?.setParent(null);
+    // remove child from parent
+    pIS?.remove?.(child, 'objects');
+    pIS?.remove?.(child, 'nonObjects');
+    if (cIS?.attach) {
+        detach(parent, child, cIS.attach);
     }
-    return computed(() => objFn()[keyOrKeys], { equal });
-}
-function merge(objFn, toMerge, mode = 'override', equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' })) {
-    if (mode === 'override')
-        return computed(() => ({ ...objFn(), ...toMerge }), { equal });
-    return computed(() => ({ ...toMerge, ...objFn() }), { equal });
+    else if (is.three(parent, 'isObject3D') && is.three(child, 'isObject3D')) {
+        parent.remove(child);
+        const store = cIS?.store || pIS?.store;
+        cIS?.removeInteraction?.(store);
+        if (store)
+            removeInteractivity(store, child);
+    }
+    // dispose
+    const isPrimitive = cIS?.type && cIS.type !== 'ngt-primitive';
+    if (!isPrimitive && child['dispose'] && !is.three(child, 'isScene')) {
+        queueMicrotask(() => child['dispose']());
+    }
+    invalidateInstance(parent);
 }
-function createVectorComputed(vectorCtor) {
-    return ((inputOrOptions, keyOrKeepUndefined, keepUndefined) => {
-        if (typeof keyOrKeepUndefined === 'undefined' || typeof keyOrKeepUndefined === 'boolean') {
-            keepUndefined = !!keyOrKeepUndefined;
-            const input = inputOrOptions;
-            return computed(() => {
-                const value = input();
-                if (keepUndefined && value == undefined)
-                    return undefined;
-                if (typeof value === 'number')
-                    return new vectorCtor().setScalar(value);
-                else if (Array.isArray(value))
-                    return new vectorCtor(...value);
-                else if (value)
-                    return value;
-                else
-                    return new vectorCtor();
-            }, { equal: (a, b) => !!a && !!b && a.equals(b) });
+function internalDestroyNode(node, removeChild) {
+    const rS = node.__ngt_renderer__;
+    if (!rS || rS[1 /* NgtRendererClassId.destroyed */])
+        return;
+    for (const child of rS[6 /* NgtRendererClassId.children */].slice()) {
+        removeChild?.(node, child);
+        internalDestroyNode(child, removeChild);
+    }
+    // clear out parent if haven't
+    rS[5 /* NgtRendererClassId.parent */] = undefined;
+    // clear out children
+    rS[6 /* NgtRendererClassId.children */].length = 0;
+    // clear out NgtInstanceState
+    const iS = getInstanceState(node);
+    if (iS) {
+        const temp = iS;
+        iS.removeInteraction?.(iS.store);
+        delete temp['onAttach'];
+        delete temp['onUpdate'];
+        delete temp['object'];
+        delete temp['objects'];
+        delete temp['nonObjects'];
+        delete temp['parent'];
+        delete temp['add'];
+        delete temp['remove'];
+        delete temp['updateGeometryStamp'];
+        delete temp['setParent'];
+        delete temp['store'];
+        delete temp['handlers'];
+        delete temp['hierarchyStore'];
+        delete temp['previousAttach'];
+        delete temp['setPointerEvent'];
+        delete temp['addInteraction'];
+        delete temp['removeInteraction'];
+        if (iS.type !== 'ngt-primitive') {
+            delete node['__ngt__'];
         }
-        const options = inputOrOptions;
-        const key = keyOrKeepUndefined;
-        return computed(() => {
-            const value = options()[key];
-            if (keepUndefined && value == undefined)
-                return undefined;
-            if (typeof value === 'number')
-                return new vectorCtor().setScalar(value);
-            else if (Array.isArray(value))
-                return new vectorCtor(...value);
-            else if (value)
-                return value;
-            else
-                return new vectorCtor();
-        }, { equal: (a, b) => !!a && !!b && a.equals(b) });
-    });
-}
-const vector2 = createVectorComputed(THREE.Vector2);
-const vector3 = createVectorComputed(THREE.Vector3);
-const vector4 = createVectorComputed(THREE.Vector4);
-
-class NgtPortalAutoRender {
-    constructor() {
-        // TODO: (chau) investigate if this is still needed
-        // effect(() => {
-        // this.portalStore.update((state) => ({ events: { ...state.events, priority: this.renderPriority() + 1 } }));
-        // });
-        this.portalStore = injectStore({ host: true });
-        this.parentStore = injectStore({ skipSelf: true });
-        this.portal = inject(NgtPortalImpl, { host: true });
-        this.renderPriority = input(1, { alias: 'autoRender', transform: (value) => numberAttribute(value, 1) });
-        effect((onCleanup) => {
-            const portalRendered = this.portal.portalRendered();
-            if (!portalRendered)
-                return;
-            // track state
-            const [renderPriority, { internal }] = [this.renderPriority(), this.portalStore()];
-            let oldClean;
-            const cleanup = internal.subscribe(({ gl, scene, camera }) => {
-                const [parentScene, parentCamera] = [
-                    this.parentStore.snapshot.scene,
-                    this.parentStore.snapshot.camera,
-                ];
-                oldClean = gl.autoClear;
-                if (renderPriority === 1) {
-                    // clear scene and render with default
-                    gl.autoClear = true;
-                    gl.render(parentScene, parentCamera);
-                }
-                // disable cleaning
-                gl.autoClear = false;
-                gl.clearDepth();
-                gl.render(scene, camera);
-                // restore
-                gl.autoClear = oldClean;
-            }, renderPriority, this.portalStore);
-            onCleanup(() => cleanup());
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalAutoRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgtPortalAutoRender, isStandalone: true, selector: "ngt-portal[autoRender]", inputs: { renderPriority: { classPropertyName: "renderPriority", publicName: "autoRender", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalAutoRender, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ngt-portal[autoRender]' }]
-        }], ctorParameters: () => [] });
-class NgtPortalContent {
-    static ngTemplateContextGuard(_, ctx) {
-        return true;
+    // clear our debugNode
+    rS[4 /* NgtRendererClassId.injector */] = undefined;
+    if (rS[0 /* NgtRendererClassId.type */] === 'comment') {
+        delete node[NGT_INTERNAL_ADD_COMMENT_FLAG];
+        delete node[NGT_INTERNAL_SET_PARENT_COMMENT_FLAG];
+        delete node[NGT_CANVAS_CONTENT_FLAG];
+        delete node[NGT_PORTAL_CONTENT_FLAG];
+        delete node[NGT_DOM_PARENT_FLAG];
     }
-    constructor() {
-        const host = inject(ElementRef, { skipSelf: true });
-        const { element } = inject(ViewContainerRef);
-        const injector = inject(Injector);
-        const commentNode = element.nativeElement;
-        const store = injectStore();
-        commentNode.data = NGT_PORTAL_CONTENT_FLAG;
-        commentNode[NGT_PORTAL_CONTENT_FLAG] = store;
-        commentNode[NGT_DOM_PARENT_FLAG] = host.nativeElement;
+    // clear getAttribute if exist
+    if ('getAttribute' in node &&
+        typeof node['getAttribute'] === 'function' &&
+        node['getAttribute'][NGT_GET_NODE_ATTRIBUTE_FLAG]) {
+        delete node['getAttribute'];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
+    // mark node as destroyed
+    rS[1 /* NgtRendererClassId.destroyed */] = true;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalContent, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[portalContent]' }]
-        }], ctorParameters: () => [] });
-function mergeState(previousRoot, store, container, pointer, raycaster, events, size) {
-    // we never want to spread the id
-    const { id: _, ...previousState } = previousRoot.snapshot;
-    const state = store.snapshot;
-    let viewport = undefined;
-    if (state.camera && size) {
-        const camera = state.camera;
-        // calculate the override viewport, if present
-        viewport = previousState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
-        // update the portal camera, if it differs from the previous layer
-        if (camera !== previousState.camera)
-            updateCamera(camera, size);
+
+const NGT_RENDERER_OPTIONS = new InjectionToken('NGT_RENDERER_OPTIONS');
+class NgtRendererFactory2 {
+    /**
+     * NOTE: We use `useFactory` to instantiate `NgtRendererFactory2`
+     */
+    constructor(delegateRendererFactory) {
+        this.delegateRendererFactory = delegateRendererFactory;
+        this.catalogue = injectCatalogue();
+        this.document = inject(DOCUMENT);
+        this.options = inject(NGT_RENDERER_OPTIONS, { optional: true }) || {};
+        this.rendererMap = new Map();
     }
-    return {
-        // the intersect consists of the previous root state
-        ...previousState,
-        ...state,
-        // portals have their own scene, which forms the root, a raycaster and a pointer
-        scene: container,
-        pointer,
-        raycaster,
-        // their previous root is the layer before it
-        previousRoot,
-        events: { ...previousState.events, ...state.events, ...events },
-        size: { ...previousState.size, ...size },
-        viewport: { ...previousState.viewport, ...viewport },
-        // layers are allowed to override events
-        setEvents: (events) => store.update((state) => ({ ...state, events: { ...state.events, ...events } })),
-    };
-}
-class NgtPortalImpl {
-    constructor() {
-        this.container = input.required();
-        this.state = input({});
-        this.contentRef = contentChild.required(NgtPortalContent, { read: TemplateRef });
-        this.anchorRef = contentChild.required(NgtPortalContent, { read: ViewContainerRef });
-        this.previousStore = injectStore({ skipSelf: true });
-        this.portalStore = injectStore();
-        this.injector = inject(Injector);
-        this.size = pick(this.state, 'size');
-        this.events = pick(this.state, 'events');
-        this.restState = omit(this.state, ['size', 'events']);
-        this.portalContentRendered = signal(false);
-        this.portalRendered = this.portalContentRendered.asReadonly();
-        extend({ Group });
-        effect(() => {
-            let [container, anchor, content] = [
-                this.container(),
-                this.anchorRef(),
-                this.contentRef(),
-                this.previousStore(),
-            ];
-            const [size, events, restState] = [untracked(this.size), untracked(this.events), untracked(this.restState)];
-            if (!is.instance(container)) {
-                container = prepare(container, 'ngt-portal', { store: this.portalStore });
-            }
-            const instanceState = getInstanceState(container);
-            if (instanceState && instanceState.store !== this.portalStore) {
-                instanceState.store = this.portalStore;
+    createRenderer(hostElement, type) {
+        const delegateRenderer = this.delegateRendererFactory.createRenderer(hostElement, type);
+        if (!type)
+            return delegateRenderer;
+        let renderer = this.rendererMap.get(type.id);
+        if (renderer) {
+            if (renderer instanceof NgtRenderer2) {
+                renderer.count += 1;
+                if (renderer.delegateRenderer !== delegateRenderer) {
+                    renderer.delegateRenderer = delegateRenderer;
+                }
             }
-            this.portalStore.update(restState, mergeState(this.previousStore, this.portalStore, container, this.portalStore.snapshot.pointer, this.portalStore.snapshot.raycaster, events, size));
-            if (this.portalViewRef) {
-                this.portalViewRef.detectChanges();
-                return;
+            return renderer;
+        }
+        if (hostElement && !isRendererNode(hostElement)) {
+            createRendererNode('platform', hostElement, this.document);
+        }
+        if (Reflect.get(type, 'type')?.[NGT_HTML_FLAG]) {
+            this.rendererMap.set(type.id, delegateRenderer);
+            // patch delegate destroyNode so we can destroy this HTML node
+            // TODO: make sure we really need to do this
+            const originalDestroyNode = delegateRenderer.destroyNode?.bind(delegateRenderer);
+            if (!originalDestroyNode || !(NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG in originalDestroyNode)) {
+                delegateRenderer.destroyNode = (node) => {
+                    originalDestroyNode?.(node);
+                    if (node !== hostElement)
+                        return;
+                    internalDestroyNode(node, null);
+                };
+                Object.assign(delegateRenderer.destroyNode, {
+                    [NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG]: true,
+                });
             }
-            this.portalViewRef = anchor.createEmbeddedView(content, { injector: this.injector }, { injector: this.injector });
-            this.portalViewRef.detectChanges();
-            this.portalContentRendered.set(true);
-        });
+            return delegateRenderer;
+        }
+        this.rendererMap.set(type.id, (renderer = new NgtRenderer2(delegateRenderer, this.catalogue, this.document, this.options)));
+        return renderer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalImpl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: NgtPortalImpl, isStandalone: true, selector: "ngt-portal", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NGT_STORE,
-                useFactory: (previousStore) => {
-                    const pointer = new THREE.Vector2();
-                    const raycaster = new THREE.Raycaster();
-                    const { id: _skipId, ...previousState } = previousStore.snapshot;
-                    const store = signalState({
-                        id: makeId(),
-                        ...previousState,
-                        scene: null,
-                        previousRoot: previousStore,
-                        pointer,
-                        raycaster,
-                    });
-                    store.update(mergeState(previousStore, store, null, pointer, raycaster));
-                    return store;
-                },
-                deps: [[new SkipSelf(), NGT_STORE]],
-            },
-        ], queries: [{ propertyName: "contentRef", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "anchorRef", first: true, predicate: NgtPortalContent, descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
-		@if (portalRendered()) {
-			<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
-			<ngt-group (pointerover)="(undefined)" attach="none" />
-		}
-	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtRendererFactory2, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtRendererFactory2 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalImpl, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngt-portal',
-                    template: `
-		@if (portalRendered()) {
-			<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
-			<ngt-group (pointerover)="(undefined)" attach="none" />
-		}
-	`,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: NGT_STORE,
-                            useFactory: (previousStore) => {
-                                const pointer = new THREE.Vector2();
-                                const raycaster = new THREE.Raycaster();
-                                const { id: _skipId, ...previousState } = previousStore.snapshot;
-                                const store = signalState({
-                                    id: makeId(),
-                                    ...previousState,
-                                    scene: null,
-                                    previousRoot: previousStore,
-                                    pointer,
-                                    raycaster,
-                                });
-                                store.update(mergeState(previousStore, store, null, pointer, raycaster));
-                                return store;
-                            },
-                            deps: [[new SkipSelf(), NGT_STORE]],
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [] });
-const NgtPortal = [NgtPortalImpl, NgtPortalContent];
-
-// This function prepares a set of changes to be applied to the instance
-function diffProps(instance, props) {
-    const changes = [];
-    for (const propKey in props) {
-        const propValue = props[propKey];
-        let key = propKey;
-        if (is.colorSpaceExist(instance)) {
-            if (propKey === 'encoding') {
-                key = 'colorSpace';
-            }
-            else if (propKey === 'outputEncoding') {
-                key = 'outputColorSpace';
-            }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtRendererFactory2, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
+class NgtRenderer2 {
+    constructor(delegateRenderer, catalogue, document, options, count = 1) {
+        this.delegateRenderer = delegateRenderer;
+        this.catalogue = catalogue;
+        this.document = document;
+        this.options = options;
+        this.count = count;
+        this.argsInjectors = [];
+        this.parentInjectors = [];
+        this.destroyNode = (node) => {
+            internalDestroyNode(node, this.removeChild.bind(this));
+        };
+        this.addClass = this.delegateRenderer.addClass.bind(this.delegateRenderer);
+        this.removeClass = this.delegateRenderer.removeClass.bind(this.delegateRenderer);
+        this.setStyle = this.delegateRenderer.setStyle.bind(this.delegateRenderer);
+        this.removeStyle = this.delegateRenderer.removeStyle.bind(this.delegateRenderer);
+        this.selectRootElement = this.delegateRenderer.selectRootElement.bind(this.delegateRenderer);
+        this.nextSibling = this.delegateRenderer.nextSibling.bind(this.delegateRenderer);
+        this.setValue = this.delegateRenderer.setValue.bind(this.delegateRenderer);
+        if (!this.options.verbose) {
+            this.options.verbose = false;
         }
-        if (is.equ(propValue, instance[key]))
-            continue;
-        changes.push([propKey, propValue]);
     }
-    return changes;
-}
-// NOTE: this is a workaround to give the instance a chance to have the store from the parent.
-//  we clear this property after the applyProps is done
-const NGT_APPLY_PROPS = '__ngt_apply_props__';
-// https://github.com/mrdoob/three.js/pull/27042
-// https://github.com/mrdoob/three.js/pull/22748
-const colorMaps = ['map', 'emissiveMap', 'sheenColorMap', 'specularColorMap', 'envMap'];
-function resolveInstanceKey(instance, key) {
-    let targetProp = instance[key];
-    if (!key.includes('.'))
-        return { root: instance, targetKey: key, targetProp };
-    // Resolve pierced target
-    targetProp = instance;
-    for (const part of key.split('.')) {
-        key = part;
-        instance = targetProp;
-        targetProp = targetProp[key];
+    get data() {
+        return { ...this.delegateRenderer.data, __ngt_renderer__: true };
     }
-    // const chain = key.split('.');
-    // targetProp = chain.reduce((acc, part) => acc[part], instance);
-    // const targetKey = chain.pop()!;
-    //
-    // // Switch root if atomic
-    // if (!targetProp?.set) instance = chain.reduce((acc, part) => acc[part], instance);
-    return { root: instance, targetKey: key, targetProp };
-}
-// 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;
-    const localState = getInstanceState(instance);
-    const rootState = localState?.store?.snapshot ?? instance[NGT_APPLY_PROPS]?.snapshot ?? {};
-    const changes = diffProps(instance, props);
-    for (let i = 0; i < changes.length; i++) {
-        let [key, value] = changes[i];
-        // Ignore setting undefined props
-        // https://github.com/pmndrs/react-three-fiber/issues/274
-        if (value === undefined)
-            continue;
-        // 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 { root, targetKey, targetProp } = resolveInstanceKey(instance, key);
-        // we have switched due to pierced props
-        if (root !== instance) {
-            return applyProps(root, { [targetKey]: value });
+    destroy() {
+        if (this.count > 1) {
+            this.count -= 1;
+            return;
         }
-        // Layers have no copy function, we must therefore copy the mask property
-        if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) {
-            targetProp.mask = value.mask;
+        // this is the last instance of the same NgtRenderer2
+        this.count = 0;
+        this.argsInjectors = [];
+        this.parentInjectors = [];
+    }
+    createElement(name, namespace) {
+        const platformElement = this.delegateRenderer.createElement(name, namespace);
+        if (name === 'ngt-portal') {
+            return createRendererNode('portal', platformElement, this.document);
         }
-        else if (is.three(targetProp, 'isColor') && is.colorRepresentation(value)) {
-            targetProp.set(value);
+        if (name === 'ngt-value') {
+            return createRendererNode('three', prepare(platformElement, 'ngt-value'), this.document);
         }
-        // Copy if properties match signatures
-        else if (targetProp &&
-            typeof targetProp.set === 'function' &&
-            typeof targetProp.copy === 'function' &&
-            value?.constructor &&
-            targetProp.constructor === value.constructor) {
-            // If both are geometries, we should assign the value directly instead of copying
-            if (is.three(targetProp, 'isBufferGeometry') &&
-                is.three(value, 'isBufferGeometry')) {
-                Object.assign(root, { [targetKey]: value });
+        const [injectedArgs, injectedParent] = [
+            this.getNgtDirective(NgtArgs, this.argsInjectors)?.value || [],
+            this.getNgtDirective(NgtParent, this.parentInjectors)?.value,
+        ];
+        if (name === 'ngt-primitive') {
+            if (!injectedArgs[0])
+                throw new Error(`[NGT] ngt-primitive without args is invalid`);
+            const object = injectedArgs[0];
+            let instanceState = getInstanceState(object);
+            if (!instanceState || instanceState.type !== 'ngt-primitive') {
+                // if an object isn't already "prepared", we'll prepare it
+                prepare(object, 'ngt-primitive', instanceState);
             }
-            else {
-                targetProp.copy(value);
+            const primitiveRendererNode = createRendererNode('three', object, this.document);
+            if (injectedParent) {
+                primitiveRendererNode.__ngt_renderer__[5 /* NgtRendererClassId.parent */] =
+                    injectedParent;
             }
+            return primitiveRendererNode;
         }
-        // Set array types
-        else if (targetProp && typeof targetProp.set === 'function' && Array.isArray(value)) {
-            if (typeof targetProp.fromArray === 'function')
-                targetProp.fromArray(value);
-            else
-                targetProp.set(...value);
-        }
-        // Set literal types
-        else if (targetProp && typeof targetProp.set === 'function' && typeof value !== 'object') {
-            const isColor = is.three(targetProp, 'isColor');
-            // Allow setting array scalars
-            if (!isColor && typeof targetProp.setScalar === 'function' && typeof value === 'number')
-                targetProp.setScalar(value);
-            // Otherwise just set single value
-            else
-                targetProp.set(value);
+        if (!name.startsWith('ngt-')) {
+            return createRendererNode('platform', platformElement, this.document);
         }
-        // Else, just overwrite the value
-        else {
-            Object.assign(root, { [targetKey]: value });
-            // Auto-convert sRGB texture parameters for built-in materials
-            // https://github.com/pmndrs/react-three-fiber/issues/344
-            // https://github.com/mrdoob/three.js/pull/25857
-            if (rootState &&
-                !rootState.linear &&
-                colorMaps.includes(targetKey) &&
-                root[targetKey]?.isTexture &&
-                // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
-                root[targetKey].format === THREE.RGBAFormat &&
-                root[targetKey].type === THREE.UnsignedByteType) {
-                // NOTE: this cannot be set from the renderer (e.g. sRGB source textures rendered to P3)
-                root[targetKey].colorSpace = THREE.SRGBColorSpace;
+        const threeName = kebabToPascal(name.startsWith('ngt-') ? name.slice(4) : name);
+        let threeTarget = this.catalogue[threeName];
+        if (!threeTarget && threeName in THREE) {
+            const threeSymbol = THREE[threeName];
+            if (typeof threeSymbol === 'function') {
+                // we will attempt to prefill the catalogue with symbols from THREE
+                threeTarget = this.catalogue[threeName] = threeSymbol;
             }
         }
-        checkUpdate(root[targetKey]);
-        checkUpdate(targetProp);
-        invalidateInstance(instance);
-    }
-    const instanceHandlersCount = localState?.eventCount;
-    const parent = localState?.hierarchyStore?.snapshot.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?.onUpdate && changes.length) {
-        localState.onUpdate(instance);
-    }
-    // clearing the intermediate store from the instance
-    if (instance[NGT_APPLY_PROPS])
-        delete instance[NGT_APPLY_PROPS];
-    return instance;
-}
-
-function isRendererNode(node) {
-    return !!node && typeof node === 'object' && NGT_RENDERER_NODE_FLAG in node;
-}
-function createRendererNode(type, node, document) {
-    const state = [type, false, undefined, undefined, undefined, undefined, []];
-    const rendererNode = Object.assign(node, { [NGT_RENDERER_NODE_FLAG]: state });
-    // NOTE: assign ownerDocument to node so we can use HostListener in Component
-    if (!rendererNode['ownerDocument'])
-        rendererNode['ownerDocument'] = document;
-    // NOTE: Angular SSR calls `node.getAttribute()` to retrieve hydration info on a node
-    if (!('getAttribute' in rendererNode) || typeof rendererNode['getAttribute'] !== 'function') {
-        const getNodeAttribute = (name) => rendererNode[name];
-        getNodeAttribute[NGT_GET_NODE_ATTRIBUTE_FLAG] = true;
-        Object.defineProperty(rendererNode, 'getAttribute', { value: getNodeAttribute, configurable: true });
-    }
-    return rendererNode;
-}
-function setRendererParentNode(node, parent) {
-    if (!node.__ngt_renderer__[5 /* NgtRendererClassId.parent */]) {
-        node.__ngt_renderer__[5 /* NgtRendererClassId.parent */] = parent;
-    }
-}
-function addRendererChildNode(node, child) {
-    if (!node.__ngt_renderer__[6 /* NgtRendererClassId.children */].includes(child)) {
-        node.__ngt_renderer__[6 /* NgtRendererClassId.children */].push(child);
-    }
-}
-
-function attach(object, value, paths = [], useApplyProps = false) {
-    const [base, ...remaining] = paths;
-    if (!base)
-        return;
-    if (remaining.length === 0) {
-        if (useApplyProps)
-            applyProps(object, { [base]: value });
-        else
-            object[base] = value;
-    }
-    else {
-        assignEmpty(object, base, useApplyProps);
-        attach(object[base], value, remaining, useApplyProps);
+        if (threeTarget) {
+            const threeInstance = prepare(new threeTarget(...injectedArgs), name);
+            const rendererNode = createRendererNode('three', threeInstance, this.document);
+            // assert type here because it is just created so we don't have to null check it
+            const instanceState = getInstanceState(threeInstance);
+            // auto-attach for geometry and material
+            if (is.three(threeInstance, 'isBufferGeometry')) {
+                instanceState.attach = ['geometry'];
+            }
+            else if (is.three(threeInstance, 'isMaterial')) {
+                instanceState.attach = ['material'];
+            }
+            if (injectedParent) {
+                rendererNode.__ngt_renderer__[5 /* NgtRendererClassId.parent */] =
+                    injectedParent;
+            }
+            return rendererNode;
+        }
+        return createRendererNode('platform', platformElement, this.document);
     }
-}
-function detach(parent, child, attachProp) {
-    const childInstanceState = getInstanceState(child);
-    if (childInstanceState) {
-        if (Array.isArray(attachProp))
-            attach(parent, childInstanceState.previousAttach, attachProp, childInstanceState.type === 'ngt-value');
-        else
-            childInstanceState.previousAttach?.();
+    createComment(value) {
+        const commentNode = this.delegateRenderer.createComment(value);
+        const commentRendererNode = createRendererNode('comment', commentNode, this.document);
+        // 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
+        Object.assign(commentRendererNode, {
+            [NGT_INTERNAL_ADD_COMMENT_FLAG]: (type, injector) => {
+                if (type === 'args') {
+                    this.argsInjectors.push(injector);
+                }
+                else if (type === 'parent') {
+                    Object.assign(commentRendererNode, {
+                        [NGT_INTERNAL_SET_PARENT_COMMENT_FLAG]: (ngtParent) => {
+                            commentRendererNode.__ngt_renderer__[5 /* NgtRendererClassId.parent */] = ngtParent;
+                        },
+                    });
+                    this.parentInjectors.push(injector);
+                }
+                commentRendererNode.__ngt_renderer__[4 /* NgtRendererClassId.injector */] = injector;
+            },
+        });
+        return commentRendererNode;
     }
-}
-function assignEmpty(obj, base, shouldAssignStoreForApplyProps = false) {
-    if ((!Object.hasOwn(obj, base) && Reflect && !!Reflect.has && !Reflect.has(obj, base)) || obj[base] === undefined) {
-        obj[base] = {};
+    createText(value) {
+        const textNode = this.delegateRenderer.createText(value);
+        return createRendererNode('text', textNode, this.document);
     }
-    if (shouldAssignStoreForApplyProps) {
-        const instanceState = getInstanceState(obj[base]);
-        // if we already have instance state, bail out
-        if (instanceState)
-            return;
-        const parentInstanceState = getInstanceState(obj);
-        // if parent doesn't have instance state, bail out
-        if (!parentInstanceState)
+    appendChild(parent, newChild, refChild, isMove) {
+        const delegatedFn = refChild
+            ? this.delegateRenderer.insertBefore.bind(this.delegateRenderer, parent, newChild, refChild, isMove)
+            : this.delegateRenderer.appendChild.bind(this.delegateRenderer, parent, newChild);
+        const pRS = parent.__ngt_renderer__;
+        const cRS = newChild.__ngt_renderer__;
+        if (!pRS || !cRS) {
+            this.options.verbose &&
+                console.warn('[NGT dev mode] One of parent or child is not a renderer node.', { parent, newChild });
+            return delegatedFn();
+        }
+        if (cRS[0 /* NgtRendererClassId.type */] === 'comment') {
+            // if child is a comment, we'll set the parent then bail.
+            // comment usually means it's part of a templateRef ViewContainerRef or structural directive
+            setRendererParentNode(newChild, parent);
+            // if parent is not three, we'll delegate to the renderer
+            if (pRS[0 /* NgtRendererClassId.type */] !== 'three') {
+                delegatedFn();
+            }
             return;
-        Object.assign(obj[base], { [NGT_APPLY_PROPS]: parentInstanceState.store });
-    }
-}
-function createAttachFunction(cb) {
-    return (parent, child, store) => cb({ parent, child, store });
-}
-
-function kebabToPascal(str) {
-    if (!str)
-        return str; // Handle empty input
-    let pascalStr = '';
-    let capitalizeNext = true; // Flag to track capitalization
-    for (let i = 0; i < str.length; i++) {
-        const char = str[i];
-        if (char === '-') {
-            capitalizeNext = true;
-            continue;
         }
-        pascalStr += capitalizeNext ? char.toUpperCase() : char;
-        capitalizeNext = false;
-    }
-    return pascalStr;
-}
-function propagateStoreRecursively(node, parentNode) {
-    const iS = getInstanceState(node);
-    const pIS = getInstanceState(parentNode);
-    if (!iS || !pIS)
-        return;
-    // assign store on child if not already exist
-    // or child store is not the same as parent store
-    // or child store is the parent of parent store
-    if (!iS.store || iS.store !== pIS.store || iS.store === pIS.store.snapshot.previousRoot) {
-        iS.store = pIS.store;
-        // Call addInteraction if it exists
-        iS.addInteraction?.(pIS.store);
-        // Collect all children (objects and nonObjects)
-        const children = [
-            ...(iS.objects ? untracked(iS.objects) : []),
-            ...(iS.nonObjects ? untracked(iS.nonObjects) : []),
-        ];
-        // Recursively reassign the store for each child
-        for (const child of children) {
-            propagateStoreRecursively(child, node);
+        if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'platform') {
+            if (newChild[NGT_DOM_PARENT_FLAG] && newChild[NGT_DOM_PARENT_FLAG] instanceof HTMLElement) {
+                return this.delegateRenderer.appendChild(newChild[NGT_DOM_PARENT_FLAG], newChild);
+            }
+            if (pRS[5 /* NgtRendererClassId.parent */] && !cRS[5 /* NgtRendererClassId.parent */]) {
+                return this.appendChild(pRS[5 /* NgtRendererClassId.parent */], newChild);
+            }
+            return delegatedFn();
         }
-    }
-}
-function attachThreeNodes(parent, child) {
-    const pIS = getInstanceState(parent);
-    const cIS = getInstanceState(child);
-    if (!pIS || !cIS) {
-        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;
-    // propagate store recursively
-    propagateStoreRecursively(child, parent);
-    if (cIS.attach) {
-        const attachProp = cIS.attach;
-        if (typeof attachProp === 'function') {
-            let attachCleanUp = undefined;
-            if (cIS.type === 'ngt-value') {
-                if (cIS.hierarchyStore.snapshot.parent !== parent) {
-                    cIS.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__[2 /* NgtRendererClassId.rawValue */] === undefined)
-                    return;
-                attachCleanUp = attachProp(parent, child.__ngt_renderer__[2 /* NgtRendererClassId.rawValue */], cIS.store);
+        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
+            return this.appendThreeRendererNodes(parent, newChild);
+        }
+        if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
+            // if platform has parent, delegate to that parent
+            if (pRS[5 /* NgtRendererClassId.parent */]) {
+                // but track the child for this parent as well
+                addRendererChildNode(parent, newChild);
+                return this.appendChild(pRS[5 /* NgtRendererClassId.parent */], newChild);
             }
-            else {
-                attachCleanUp = attachProp(parent, child, cIS.store);
+            // platform can also have normal parentNode
+            const platformParentNode = this.delegateRenderer.parentNode(parent);
+            if (platformParentNode) {
+                return this.appendChild(platformParentNode, newChild);
             }
-            if (attachCleanUp)
-                cIS.previousAttach = attachCleanUp;
+            // if not, set up parent and child relationship for this pair then bail
+            this.setNodeRelationship(parent, newChild);
+            return;
         }
-        else {
-            // we skip attach none if set explicitly
-            if (attachProp[0] === 'none') {
-                invalidateInstance(child);
-                return;
+        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'platform') {
+            if (!cRS[5 /* NgtRendererClassId.parent */]) {
+                setRendererParentNode(newChild, parent);
             }
-            // handle material array
-            if (attachProp[0] === 'material' &&
-                attachProp[1] &&
-                typeof Number(attachProp[1]) === 'number' &&
-                is.three(child, 'isMaterial') &&
-                !Array.isArray(parent['material'])) {
-                parent['material'] = [];
+            for (const child of cRS[6 /* NgtRendererClassId.children */]) {
+                this.appendChild(parent, child);
             }
-            if (cIS.type === 'ngt-value') {
-                if (cIS.hierarchyStore.snapshot.parent !== parent) {
-                    cIS.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__[2 /* NgtRendererClassId.rawValue */] === undefined)
-                    return;
-                // save prev value
-                cIS.previousAttach = attachProp.reduce((value, key) => value[key], parent);
-                attach(parent, child.__ngt_renderer__[2 /* NgtRendererClassId.rawValue */], attachProp, true);
-            }
-            else {
-                // save prev value
-                cIS.previousAttach = attachProp.reduce((value, key) => value[key], parent);
-                attach(parent, child, attachProp);
+            for (const platformChildNode of newChild['childNodes'] || []) {
+                if (!isRendererNode(platformChildNode) ||
+                    platformChildNode.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'platform')
+                    continue;
+                this.appendChild(parent, platformChildNode);
             }
+            return;
         }
-    }
-    else if (is.three(parent, 'isObject3D') && is.three(child, 'isObject3D')) {
-        parent.add(child);
-        added = true;
-        cIS.addInteraction?.(cIS.store || pIS.store);
-    }
-    if (pIS.add) {
-        pIS.add(child, added ? 'objects' : 'nonObjects');
-    }
-    if (cIS.parent && untracked(cIS.parent) !== parent) {
-        cIS.setParent(parent);
-    }
-    // NOTE: this does not mean that the child is actually attached to the parent on the scenegraph.
-    //  a child on the Angular template can also emit onAttach
-    if (cIS.onAttach)
-        cIS.onAttach({ parent, node: child });
-    invalidateInstance(child);
-    invalidateInstance(parent);
-}
-function removeThreeChild(child, parent, dispose) {
-    const pIS = getInstanceState(parent);
-    const cIS = getInstanceState(child);
-    // clear parent ref
-    cIS?.setParent(null);
-    // remove child from parent
-    pIS?.remove?.(child, 'objects');
-    pIS?.remove?.(child, 'nonObjects');
-    if (cIS?.attach) {
-        detach(parent, child, cIS.attach);
-    }
-    else if (is.three(parent, 'isObject3D') && is.three(child, 'isObject3D')) {
-        parent.remove(child);
-        const store = cIS?.store || pIS?.store;
-        cIS?.removeInteraction?.(store);
-        if (store)
-            removeInteractivity(store, child);
-    }
-    // dispose
-    const isPrimitive = cIS?.type && cIS.type !== 'ngt-primitive';
-    if (!isPrimitive && child['dispose'] && !is.three(child, 'isScene')) {
-        queueMicrotask(() => child['dispose']());
-    }
-    invalidateInstance(parent);
-}
-function internalDestroyNode(node, removeChild) {
-    const rS = node.__ngt_renderer__;
-    if (!rS || rS[1 /* NgtRendererClassId.destroyed */])
-        return;
-    for (const child of rS[6 /* NgtRendererClassId.children */].slice()) {
-        removeChild?.(node, child);
-        internalDestroyNode(child, removeChild);
-    }
-    // clear out parent if haven't
-    rS[5 /* NgtRendererClassId.parent */] = undefined;
-    // clear out children
-    rS[6 /* NgtRendererClassId.children */].length = 0;
-    // clear out NgtInstanceState
-    const iS = getInstanceState(node);
-    if (iS) {
-        const temp = iS;
-        iS.removeInteraction?.(iS.store);
-        delete temp['onAttach'];
-        delete temp['onUpdate'];
-        delete temp['object'];
-        delete temp['objects'];
-        delete temp['nonObjects'];
-        delete temp['parent'];
-        delete temp['add'];
-        delete temp['remove'];
-        delete temp['updateGeometryStamp'];
-        delete temp['setParent'];
-        delete temp['store'];
-        delete temp['handlers'];
-        delete temp['hierarchyStore'];
-        delete temp['previousAttach'];
-        delete temp['setPointerEvent'];
-        delete temp['addInteraction'];
-        delete temp['removeInteraction'];
-        if (iS.type !== 'ngt-primitive') {
-            delete node['__ngt__'];
-        }
-    }
-    // clear our debugNode
-    rS[4 /* NgtRendererClassId.injector */] = undefined;
-    if (rS[0 /* NgtRendererClassId.type */] === 'comment') {
-        delete node[NGT_INTERNAL_ADD_COMMENT_FLAG];
-        delete node[NGT_INTERNAL_SET_PARENT_COMMENT_FLAG];
-        delete node[NGT_CANVAS_CONTENT_FLAG];
-        delete node[NGT_PORTAL_CONTENT_FLAG];
-        delete node[NGT_DOM_PARENT_FLAG];
-    }
-    // clear getAttribute if exist
-    if ('getAttribute' in node &&
-        typeof node['getAttribute'] === 'function' &&
-        node['getAttribute'][NGT_GET_NODE_ATTRIBUTE_FLAG]) {
-        delete node['getAttribute'];
-    }
-    // mark node as destroyed
-    rS[1 /* NgtRendererClassId.destroyed */] = true;
-}
-
-const NGT_RENDERER_OPTIONS = new InjectionToken('NGT_RENDERER_OPTIONS');
-class NgtRendererFactory2 {
-    /**
-     * NOTE: We use `useFactory` to instantiate `NgtRendererFactory2`
-     */
-    constructor(delegateRendererFactory) {
-        this.delegateRendererFactory = delegateRendererFactory;
-        this.catalogue = injectCatalogue();
-        this.document = inject(DOCUMENT);
-        this.options = inject(NGT_RENDERER_OPTIONS, { optional: true }) || {};
-        this.rendererMap = new Map();
-    }
-    createRenderer(hostElement, type) {
-        const delegateRenderer = this.delegateRendererFactory.createRenderer(hostElement, type);
-        if (!type)
-            return delegateRenderer;
-        let renderer = this.rendererMap.get(type.id);
-        if (renderer) {
-            if (renderer instanceof NgtRenderer2) {
-                renderer.count += 1;
-                if (renderer.delegateRenderer !== delegateRenderer) {
-                    renderer.delegateRenderer = delegateRenderer;
-                }
+        if (pRS[0 /* NgtRendererClassId.type */] === 'portal' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
+            if (!cRS[5 /* NgtRendererClassId.parent */] && pRS[3 /* NgtRendererClassId.portalContainer */]) {
+                return this.appendChild(pRS[3 /* NgtRendererClassId.portalContainer */], newChild);
             }
-            return renderer;
-        }
-        if (hostElement && !isRendererNode(hostElement)) {
-            createRendererNode('platform', hostElement, this.document);
+            return;
         }
-        if (Reflect.get(type, 'type')?.[NGT_HTML_FLAG]) {
-            this.rendererMap.set(type.id, delegateRenderer);
-            // patch delegate destroyNode so we can destroy this HTML node
-            // TODO: make sure we really need to do this
-            const originalDestroyNode = delegateRenderer.destroyNode?.bind(delegateRenderer);
-            if (!originalDestroyNode || !(NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG in originalDestroyNode)) {
-                delegateRenderer.destroyNode = (node) => {
-                    originalDestroyNode?.(node);
-                    if (node !== hostElement)
-                        return;
-                    internalDestroyNode(node, null);
-                };
-                Object.assign(delegateRenderer.destroyNode, {
-                    [NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG]: true,
-                });
-            }
-            return delegateRenderer;
+        if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'portal') {
+            return this.delegateRenderer.appendChild(parent, newChild);
         }
-        this.rendererMap.set(type.id, (renderer = new NgtRenderer2(delegateRenderer, this.catalogue, this.document, this.options)));
-        return renderer;
+        return delegatedFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtRendererFactory2, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtRendererFactory2 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtRendererFactory2, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
-class NgtRenderer2 {
-    constructor(delegateRenderer, catalogue, document, options, count = 1) {
-        this.delegateRenderer = delegateRenderer;
-        this.catalogue = catalogue;
-        this.document = document;
-        this.options = options;
-        this.count = count;
-        this.argsInjectors = [];
-        this.parentInjectors = [];
-        this.destroyNode = (node) => {
-            internalDestroyNode(node, this.removeChild.bind(this));
-        };
-        this.addClass = this.delegateRenderer.addClass.bind(this.delegateRenderer);
-        this.removeClass = this.delegateRenderer.removeClass.bind(this.delegateRenderer);
-        this.setStyle = this.delegateRenderer.setStyle.bind(this.delegateRenderer);
-        this.removeStyle = this.delegateRenderer.removeStyle.bind(this.delegateRenderer);
-        this.selectRootElement = this.delegateRenderer.selectRootElement.bind(this.delegateRenderer);
-        this.nextSibling = this.delegateRenderer.nextSibling.bind(this.delegateRenderer);
-        this.setValue = this.delegateRenderer.setValue.bind(this.delegateRenderer);
-        if (!this.options.verbose) {
-            this.options.verbose = false;
+    insertBefore(parent, newChild, refChild, isMove) {
+        // if both are comments and the reference child is NgtCanvasContent, we'll assign the same flag to the newChild
+        // this means that the NgtCanvas component is embedding. This flag allows the Renderer to get the root scene
+        // when it tries to attach the template under `ng-template[canvasContent]`
+        if (refChild &&
+            refChild[NGT_CANVAS_CONTENT_FLAG] &&
+            refChild instanceof Comment &&
+            newChild instanceof Comment) {
+            Object.assign(newChild, { [NGT_CANVAS_CONTENT_FLAG]: refChild[NGT_CANVAS_CONTENT_FLAG] });
         }
-    }
-    get data() {
-        return { ...this.delegateRenderer.data, __ngt_renderer__: true };
-    }
-    destroy() {
-        if (this.count > 1) {
-            this.count -= 1;
-            return;
+        // if there is no parent, we delegate
+        if (!parent) {
+            return this.delegateRenderer.insertBefore(parent, newChild, refChild, isMove);
         }
-        // this is the last instance of the same NgtRenderer2
-        this.count = 0;
-        this.argsInjectors = [];
-        this.parentInjectors = [];
+        return this.appendChild(parent, newChild, refChild, isMove);
     }
-    createElement(name, namespace) {
-        const platformElement = this.delegateRenderer.createElement(name, namespace);
-        if (name === 'ngt-portal') {
-            return createRendererNode('portal', platformElement, this.document);
-        }
-        if (name === 'ngt-value') {
-            return createRendererNode('three', prepare(platformElement, 'ngt-value'), this.document);
+    removeChild(parent, oldChild, isHostElement) {
+        if (parent === null) {
+            parent = this.parentNode(oldChild);
         }
-        const [injectedArgs, injectedParent] = [
-            this.getNgtDirective(NgtArgs, this.argsInjectors)?.value || [],
-            this.getNgtDirective(NgtParent, this.parentInjectors)?.value,
-        ];
-        if (name === 'ngt-primitive') {
-            if (!injectedArgs[0])
-                throw new Error(`[NGT] ngt-primitive without args is invalid`);
-            const object = injectedArgs[0];
-            let instanceState = getInstanceState(object);
-            if (!instanceState || instanceState.type !== 'ngt-primitive') {
-                // if an object isn't already "prepared", we'll prepare it
-                prepare(object, 'ngt-primitive', instanceState);
+        const cRS = oldChild.__ngt_renderer__;
+        if (!cRS) {
+            try {
+                return this.delegateRenderer.removeChild(parent, oldChild, isHostElement);
             }
-            const primitiveRendererNode = createRendererNode('three', object, this.document);
-            if (injectedParent) {
-                primitiveRendererNode.__ngt_renderer__[5 /* NgtRendererClassId.parent */] =
-                    injectedParent;
-            }
-            return primitiveRendererNode;
-        }
-        if (!name.startsWith('ngt-')) {
-            return createRendererNode('platform', platformElement, this.document);
-        }
-        const threeName = kebabToPascal(name.startsWith('ngt-') ? name.slice(4) : name);
-        let threeTarget = this.catalogue[threeName];
-        if (!threeTarget && threeName in THREE) {
-            const threeSymbol = THREE[threeName];
-            if (typeof threeSymbol === 'function') {
-                // we will attempt to prefill the catalogue with symbols from THREE
-                threeTarget = this.catalogue[threeName] = threeSymbol;
-            }
-        }
-        if (threeTarget) {
-            const threeInstance = prepare(new threeTarget(...injectedArgs), name);
-            const rendererNode = createRendererNode('three', threeInstance, this.document);
-            // assert type here because it is just created so we don't have to null check it
-            const instanceState = getInstanceState(threeInstance);
-            // auto-attach for geometry and material
-            if (is.three(threeInstance, 'isBufferGeometry')) {
-                instanceState.attach = ['geometry'];
-            }
-            else if (is.three(threeInstance, 'isMaterial')) {
-                instanceState.attach = ['material'];
-            }
-            if (injectedParent) {
-                rendererNode.__ngt_renderer__[5 /* NgtRendererClassId.parent */] =
-                    injectedParent;
-            }
-            return rendererNode;
-        }
-        return createRendererNode('platform', platformElement, this.document);
-    }
-    createComment(value) {
-        const commentNode = this.delegateRenderer.createComment(value);
-        const commentRendererNode = createRendererNode('comment', commentNode, this.document);
-        // 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
-        Object.assign(commentRendererNode, {
-            [NGT_INTERNAL_ADD_COMMENT_FLAG]: (type, injector) => {
-                if (type === 'args') {
-                    this.argsInjectors.push(injector);
-                }
-                else if (type === 'parent') {
-                    Object.assign(commentRendererNode, {
-                        [NGT_INTERNAL_SET_PARENT_COMMENT_FLAG]: (ngtParent) => {
-                            commentRendererNode.__ngt_renderer__[5 /* NgtRendererClassId.parent */] = ngtParent;
-                        },
-                    });
-                    this.parentInjectors.push(injector);
-                }
-                commentRendererNode.__ngt_renderer__[4 /* NgtRendererClassId.injector */] = injector;
-            },
-        });
-        return commentRendererNode;
-    }
-    createText(value) {
-        const textNode = this.delegateRenderer.createText(value);
-        return createRendererNode('text', textNode, this.document);
-    }
-    appendChild(parent, newChild, refChild, isMove) {
-        const delegatedFn = refChild
-            ? this.delegateRenderer.insertBefore.bind(this.delegateRenderer, parent, newChild, refChild, isMove)
-            : this.delegateRenderer.appendChild.bind(this.delegateRenderer, parent, newChild);
-        const pRS = parent.__ngt_renderer__;
-        const cRS = newChild.__ngt_renderer__;
-        if (!pRS || !cRS) {
-            this.options.verbose &&
-                console.warn('[NGT dev mode] One of parent or child is not a renderer node.', { parent, newChild });
-            return delegatedFn();
-        }
-        if (cRS[0 /* NgtRendererClassId.type */] === 'comment') {
-            // if child is a comment, we'll set the parent then bail.
-            // comment usually means it's part of a templateRef ViewContainerRef or structural directive
-            setRendererParentNode(newChild, parent);
-            // if parent is not three, we'll delegate to the renderer
-            if (pRS[0 /* NgtRendererClassId.type */] !== 'three') {
-                delegatedFn();
-            }
-            return;
-        }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'platform') {
-            if (newChild[NGT_DOM_PARENT_FLAG] && newChild[NGT_DOM_PARENT_FLAG] instanceof HTMLElement) {
-                return this.delegateRenderer.appendChild(newChild[NGT_DOM_PARENT_FLAG], newChild);
-            }
-            if (pRS[5 /* NgtRendererClassId.parent */] && !cRS[5 /* NgtRendererClassId.parent */]) {
-                return this.appendChild(pRS[5 /* NgtRendererClassId.parent */], newChild);
-            }
-            return delegatedFn();
-        }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
-            return this.appendThreeRendererNodes(parent, newChild);
-        }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
-            // if platform has parent, delegate to that parent
-            if (pRS[5 /* NgtRendererClassId.parent */]) {
-                // but track the child for this parent as well
-                addRendererChildNode(parent, newChild);
-                return this.appendChild(pRS[5 /* NgtRendererClassId.parent */], newChild);
-            }
-            // platform can also have normal parentNode
-            const platformParentNode = this.delegateRenderer.parentNode(parent);
-            if (platformParentNode) {
-                return this.appendChild(platformParentNode, newChild);
-            }
-            // if not, set up parent and child relationship for this pair then bail
-            this.setNodeRelationship(parent, newChild);
-            return;
-        }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'platform') {
-            if (!cRS[5 /* NgtRendererClassId.parent */]) {
-                setRendererParentNode(newChild, parent);
-            }
-            for (const child of cRS[6 /* NgtRendererClassId.children */]) {
-                this.appendChild(parent, child);
-            }
-            for (const platformChildNode of newChild['childNodes'] || []) {
-                if (!isRendererNode(platformChildNode) ||
-                    platformChildNode.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'platform')
-                    continue;
-                this.appendChild(parent, platformChildNode);
-            }
-            return;
-        }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'portal' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
-            if (!cRS[5 /* NgtRendererClassId.parent */] && pRS[3 /* NgtRendererClassId.portalContainer */]) {
-                return this.appendChild(pRS[3 /* NgtRendererClassId.portalContainer */], newChild);
-            }
-            return;
-        }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'portal') {
-            return this.delegateRenderer.appendChild(parent, newChild);
-        }
-        return delegatedFn();
-    }
-    insertBefore(parent, newChild, refChild, isMove) {
-        // if both are comments and the reference child is NgtCanvasContent, we'll assign the same flag to the newChild
-        // this means that the NgtCanvas component is embedding. This flag allows the Renderer to get the root scene
-        // when it tries to attach the template under `ng-template[canvasContent]`
-        if (refChild &&
-            refChild[NGT_CANVAS_CONTENT_FLAG] &&
-            refChild instanceof Comment &&
-            newChild instanceof Comment) {
-            Object.assign(newChild, { [NGT_CANVAS_CONTENT_FLAG]: refChild[NGT_CANVAS_CONTENT_FLAG] });
-        }
-        // if there is no parent, we delegate
-        if (!parent) {
-            return this.delegateRenderer.insertBefore(parent, newChild, refChild, isMove);
-        }
-        return this.appendChild(parent, newChild, refChild, isMove);
-    }
-    removeChild(parent, oldChild, isHostElement) {
-        if (parent === null) {
-            parent = this.parentNode(oldChild);
-        }
-        const cRS = oldChild.__ngt_renderer__;
-        if (!cRS) {
-            try {
-                return this.delegateRenderer.removeChild(parent, oldChild, isHostElement);
-            }
-            catch {
-                return;
+            catch {
+                return;
             }
         }
         // disassociate things from oldChild
@@ -2882,6 +2030,907 @@ class NgtRenderer2 {
     }
 }
 
+function storeFactory() {
+    const { invalidate, advance } = injectLoop();
+    const rendererOptions = inject(NGT_RENDERER_OPTIONS, { optional: true }) || {};
+    const document = inject(DOCUMENT);
+    const window = document.defaultView || undefined;
+    // NOTE: using Subject because we do not care about late-subscribers
+    const pointerMissed$ = new Subject();
+    const position = new THREE.Vector3();
+    const defaultTarget = new THREE.Vector3();
+    const tempTarget = new THREE.Vector3();
+    let performanceTimeout = undefined;
+    const pointer = new THREE.Vector2();
+    // getCurrentViewport will mutate this instead of creating a new object everytime
+    const tempViewport = {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        factor: 1,
+        distance: 0,
+        aspect: 0,
+    };
+    const store = signalState({
+        id: makeId(),
+        maxNotificationSkipCount: rendererOptions.maxNotificationSkipCount || 5,
+        pointerMissed$: pointerMissed$.asObservable(),
+        events: { priority: 1, enabled: true, connected: false },
+        // Mock objects that have to be configured
+        gl: null,
+        camera: null,
+        raycaster: null,
+        scene: null,
+        xr: null,
+        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 = store.snapshot;
+                // Clear timeout
+                if (performanceTimeout)
+                    clearTimeout(performanceTimeout);
+                // Set lower bound performance
+                if (state.performance.current !== state.performance.min)
+                    store.update((state) => ({
+                        performance: { ...state.performance, current: state.performance.min },
+                    }));
+                // Go back to upper bound performance after a while unless something regresses meanwhile
+                performanceTimeout = setTimeout(() => store.update((state) => ({
+                    performance: { ...state.performance, current: store.snapshot.performance.max },
+                })), state.performance.debounce);
+            },
+        },
+        size: { width: 0, height: 0, top: 0, left: 0 },
+        viewport: {
+            initialDpr: window?.devicePixelRatio || 1,
+            dpr: window?.devicePixelRatio || 1,
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+            aspect: 0,
+            distance: 0,
+            factor: 0,
+            getCurrentViewport(camera = store.snapshot.camera, target = defaultTarget, size = store.snapshot.size) {
+                const { width, height, top, left } = size;
+                const aspect = width / height;
+                if (target.isVector3)
+                    tempTarget.copy(target);
+                else
+                    tempTarget.set(...target);
+                const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+                // Update the pre-allocated viewport object
+                tempViewport.top = top;
+                tempViewport.left = left;
+                tempViewport.aspect = aspect;
+                tempViewport.distance = distance;
+                if (is.three(camera, 'isOrthographicCamera')) {
+                    // For orthographic cameras
+                    tempViewport.width = width / camera.zoom;
+                    tempViewport.height = height / camera.zoom;
+                    tempViewport.factor = 1;
+                }
+                else {
+                    // For perspective cameras
+                    const fov = (camera.fov * Math.PI) / 180; // convert vertical fov to radians
+                    const h = 2 * Math.tan(fov / 2) * distance; // visible height
+                    const w = h * aspect; // visible width
+                    tempViewport.width = w;
+                    tempViewport.height = h;
+                    tempViewport.factor = width / w;
+                }
+                return tempViewport;
+            },
+        },
+        setEvents: (events) => store.update((state) => ({ events: { ...state.events, ...events } })),
+        setSize: (width, height, top, left) => {
+            const camera = store.snapshot.camera;
+            const size = { width, height, top: top ?? 0, left: left ?? 0 };
+            store.update((state) => ({
+                size,
+                viewport: {
+                    ...state.viewport,
+                    ...state.viewport.getCurrentViewport(camera, defaultTarget, size),
+                },
+            }));
+        },
+        setDpr: (dpr) => {
+            const resolved = makeDpr(dpr, window);
+            store.update((state) => ({
+                viewport: { ...state.viewport, dpr: resolved, initialDpr: state.viewport.initialDpr || resolved },
+            }));
+        },
+        setFrameloop: (frameloop) => {
+            const clock = store.snapshot.clock;
+            // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+            clock.stop();
+            clock.elapsedTime = 0;
+            if (frameloop !== 'never') {
+                clock.start();
+                clock.elapsedTime = 0;
+            }
+            store.update(() => ({ frameloop }));
+        },
+        previousRoot: null,
+        internal: {
+            active: false,
+            priority: 0,
+            frames: 0,
+            lastEvent: new ElementRef(null),
+            interaction: [],
+            hovered: new Map(),
+            capturedMap: new Map(),
+            initialClick: [0, 0],
+            initialHits: [],
+            subscribers: [],
+            subscribe: (callback, priority = 0, _store = store) => {
+                const internal = _store.snapshot.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 = _store.snapshot.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;
+    effect(() => {
+        const [newCamera, newSize, newDpr, gl] = [store.camera(), store.size(), store.viewport.dpr(), store.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');
+function injectStore(options) {
+    return inject(NGT_STORE, options);
+}
+
+function resolveRef(ref) {
+    if (is.ref(ref)) {
+        return ref.nativeElement;
+    }
+    return ref;
+}
+
+class NgtParent extends NgtCommonDirective {
+    constructor() {
+        super();
+        this.parent = input.required();
+        this.store = injectStore();
+        this._parent = computed(() => {
+            const parent = this.parent();
+            const rawParent = typeof parent === 'function' ? parent() : parent;
+            if (!rawParent)
+                return null;
+            const scene = this.store.scene();
+            if (typeof rawParent === 'string') {
+                return scene.getObjectByName(rawParent);
+            }
+            return resolveRef(rawParent);
+        });
+        this.linkedValue = linkedSignal(this._parent);
+        this.shouldSkipRender = computed(() => !this._parent());
+        const commentNode = this.commentNode;
+        commentNode.data = NGT_PARENT_FLAG;
+        commentNode[NGT_PARENT_FLAG] = true;
+        if (commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]) {
+            commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]('parent', this.injector);
+            delete commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG];
+        }
+    }
+    validate() {
+        return !this.injected && !!this.injectedValue;
+    }
+    beforeCreateView() {
+        const commentNode = this.commentNode;
+        if (commentNode[NGT_INTERNAL_SET_PARENT_COMMENT_FLAG]) {
+            commentNode[NGT_INTERNAL_SET_PARENT_COMMENT_FLAG](this.injectedValue);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtParent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtParent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[parent]' }]
+        }], ctorParameters: () => [] });
+
+class NgtSelectionApi {
+    constructor() {
+        this.enabled = input(true, { alias: 'selection', transform: booleanAttribute });
+        this.source = signal([]);
+        this.selected = this.source.asReadonly();
+    }
+    update(...args) {
+        if (!this.enabled())
+            return;
+        this.source.update(...args);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtSelectionApi, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgtSelectionApi, isStandalone: true, selector: "[selection]", inputs: { enabled: { classPropertyName: "enabled", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtSelectionApi, decorators: [{
+            type: Directive,
+            args: [{ selector: '[selection]' }]
+        }] });
+class NgtSelect {
+    constructor() {
+        this.enabled = input(false, { transform: booleanAttribute, alias: 'select' });
+        const elementRef = inject(ElementRef);
+        const selectionApi = inject(NgtSelectionApi);
+        effect((onCleanup) => {
+            const selectionEnabled = selectionApi.enabled();
+            if (!selectionEnabled)
+                return;
+            const enabled = this.enabled();
+            if (!enabled)
+                return;
+            const host = elementRef.nativeElement;
+            const localState = getInstanceState(host);
+            if (!localState)
+                return;
+            // ngt-mesh[select]
+            if (host.type === 'Mesh') {
+                selectionApi.update((prev) => [...prev, host]);
+                onCleanup(() => selectionApi.update((prev) => prev.filter((el) => el !== host)));
+                return;
+            }
+            const [collection] = [untracked(selectionApi.selected), localState.objects()];
+            let changed = false;
+            const current = [];
+            host.traverse((child) => {
+                child.type === 'Mesh' && current.push(child);
+                if (collection.indexOf(child) === -1)
+                    changed = true;
+            });
+            if (!changed)
+                return;
+            selectionApi.update((prev) => [...prev, ...current]);
+            onCleanup(() => {
+                selectionApi.update((prev) => prev.filter((el) => !current.includes(el)));
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgtSelect, isStandalone: true, selector: "ngt-group[select], ngt-mesh[select]", inputs: { enabled: { classPropertyName: "enabled", publicName: "select", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtSelect, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ngt-group[select], ngt-mesh[select]' }]
+        }], ctorParameters: () => [] });
+const NgtSelection = [NgtSelectionApi, NgtSelect];
+
+var _a;
+const NGT_HTML_DOM_ELEMENT = new InjectionToken('NGT_HTML_DOM_ELEMENT');
+function provideHTMLDomElement(...args) {
+    if (args.length === 0) {
+        return { provide: NGT_HTML_DOM_ELEMENT, useFactory: () => 'gl' };
+    }
+    if (args.length === 1) {
+        return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args[0] };
+    }
+    return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args.pop(), deps: args };
+}
+class NgtHTML {
+    static { _a = NGT_HTML_FLAG; }
+    static { this[_a] = true; }
+    constructor() {
+        this.domElement = inject(NGT_HTML_DOM_ELEMENT, { self: true, optional: true });
+        const host = inject(ElementRef);
+        const store = injectStore();
+        if (this.domElement === 'gl') {
+            Object.assign(host.nativeElement, {
+                [NGT_DOM_PARENT_FLAG]: store.snapshot.gl.domElement.parentElement,
+            });
+        }
+        else if (this.domElement) {
+            Object.assign(host.nativeElement, { [NGT_DOM_PARENT_FLAG]: this.domElement });
+        }
+        inject(DestroyRef).onDestroy(() => {
+            host.nativeElement[NGT_DOM_PARENT_FLAG] = null;
+            delete host.nativeElement[NGT_DOM_PARENT_FLAG];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtHTML, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgtHTML, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtHTML, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+const cached$1 = new Map();
+const memoizedLoaders$1 = new WeakMap();
+function normalizeInputs$1(input) {
+    let urls = [];
+    if (Array.isArray(input)) {
+        urls = input;
+    }
+    else if (typeof input === 'string') {
+        urls = [input];
+    }
+    else {
+        urls = Object.values(input);
+    }
+    return urls.map((url) => (url.includes('undefined') || url.includes('null') || !url ? '' : url));
+}
+function load(loaderConstructorFactory, inputs, { extensions, onLoad, onProgress, } = {}) {
+    return () => {
+        const urls = normalizeInputs$1(inputs());
+        let loader = memoizedLoaders$1.get(loaderConstructorFactory(urls));
+        if (!loader) {
+            loader = new (loaderConstructorFactory(urls))();
+            memoizedLoaders$1.set(loaderConstructorFactory(urls), loader);
+        }
+        if (extensions)
+            extensions(loader);
+        return urls.map((url) => {
+            if (url === '')
+                return Promise.resolve(null);
+            if (!cached$1.has(url)) {
+                cached$1.set(url, new Promise((resolve, reject) => {
+                    loader.load(url, (data) => {
+                        if ('scene' in data) {
+                            Object.assign(data, makeObjectGraph(data['scene']));
+                        }
+                        if (onLoad) {
+                            onLoad(data);
+                        }
+                        resolve(data);
+                    }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error?.message}`)));
+                }));
+            }
+            return cached$1.get(url);
+        });
+    };
+}
+/**
+ * @deprecated Use loaderResource instead. Will be removed in v5.0.0
+ * @since v4.0.0~
+ */
+function _injectLoader(loaderConstructorFactory, inputs, { extensions, onProgress, onLoad, injector, } = {}) {
+    return assertInjector(_injectLoader, injector, () => {
+        const response = signal(null);
+        const cachedResultPromisesEffect = load(loaderConstructorFactory, inputs, {
+            extensions,
+            onProgress,
+            onLoad: onLoad,
+        });
+        effect(() => {
+            const originalUrls = inputs();
+            const cachedResultPromises = cachedResultPromisesEffect();
+            Promise.all(cachedResultPromises).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) => {
+                        // @ts-ignore
+                        result[key] = results[keys.indexOf(key)];
+                        return result;
+                    }, {});
+                });
+            });
+        });
+        return response.asReadonly();
+    });
+}
+_injectLoader.preload = (loaderConstructorFactory, inputs, extensions, onLoad) => {
+    const effects = load(loaderConstructorFactory, inputs, { extensions, onLoad })();
+    if (effects) {
+        void Promise.all(effects);
+    }
+};
+_injectLoader.destroy = () => {
+    cached$1.clear();
+};
+_injectLoader.clear = (urls) => {
+    const urlToClear = Array.isArray(urls) ? urls : [urls];
+    urlToClear.forEach((url) => {
+        cached$1.delete(url);
+    });
+};
+/**
+ * @deprecated Use loaderResource instead. Will be removed in v5.0.0
+ * @since v4.0.0~
+ */
+const injectLoader = _injectLoader;
+
+function normalizeInputs(input) {
+    let urls = [];
+    if (Array.isArray(input)) {
+        urls = input;
+    }
+    else if (typeof input === 'string') {
+        urls = [input];
+    }
+    else {
+        urls = Object.values(input);
+    }
+    return urls.map((url) => (url.includes('undefined') || url.includes('null') || !url ? '' : url));
+}
+const cached = new Map();
+const memoizedLoaders = new WeakMap();
+function getLoaderRequestParams(input, loaderConstructorFactory, extensions) {
+    const urls = input();
+    const LoaderConstructor = loaderConstructorFactory(urls);
+    const normalizedUrls = normalizeInputs(urls);
+    let loader = memoizedLoaders.get(LoaderConstructor);
+    if (!loader) {
+        loader = new LoaderConstructor();
+        memoizedLoaders.set(LoaderConstructor, loader);
+    }
+    if (extensions)
+        extensions(loader);
+    return { urls, normalizedUrls, loader };
+}
+function getLoaderPromises(request, onProgress) {
+    return request.normalizedUrls.map((url) => {
+        if (url === '')
+            return Promise.resolve(null);
+        const cachedPromise = cached.get(url);
+        if (cachedPromise)
+            return cachedPromise;
+        const promise = new Promise((res, rej) => {
+            request.loader.load(url, (data) => {
+                if ('scene' in data) {
+                    Object.assign(data, makeObjectGraph(data['scene']));
+                }
+                res(data);
+            }, onProgress, (error) => rej(new Error(`[NGT] Could not load ${url}: ${error?.message}`)));
+        });
+        cached.set(url, promise);
+        return promise;
+    });
+}
+function loaderResource(loaderConstructorFactory, input, { extensions, onLoad, onProgress, injector, } = {}) {
+    return assertInjector(loaderResource, injector, () => {
+        return resource({
+            request: () => getLoaderRequestParams(input, loaderConstructorFactory, extensions),
+            loader: async ({ request }) => {
+                // TODO: use the abortSignal when THREE.Loader supports it
+                const loadedResults = await Promise.all(getLoaderPromises(request, onProgress));
+                let results;
+                if (Array.isArray(request.urls)) {
+                    results = loadedResults;
+                }
+                else if (typeof request.urls === 'string') {
+                    results = loadedResults[0];
+                }
+                else {
+                    const keys = Object.keys(request.urls);
+                    results = keys.reduce((result, key) => {
+                        // @ts-ignore
+                        result[key] = loadedResults[keys.indexOf(key)];
+                        return result;
+                    }, {});
+                }
+                if (onLoad)
+                    onLoad(results);
+                return results;
+            },
+        });
+    });
+}
+loaderResource.preload = (loaderConstructor, inputs, extensions) => {
+    const params = getLoaderRequestParams(() => inputs, () => loaderConstructor, extensions);
+    void Promise.all(getLoaderPromises(params));
+};
+loaderResource.destroy = () => {
+    cached.clear();
+};
+loaderResource.clear = (urls) => {
+    const urlToClear = Array.isArray(urls) ? urls : [urls];
+    urlToClear.forEach((url) => {
+        cached.delete(url);
+    });
+};
+
+const RGBA_REGEX = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*\.?\d+)?\)/;
+const DEFAULT_COLOR = 0x000000;
+class NgtHexify {
+    constructor() {
+        this.document = inject(DOCUMENT, { optional: true });
+        this.cache = {};
+    }
+    /**
+     * transforms a:
+     * - hex string to a hex number
+     * - rgb string to a hex number
+     * - rgba string to a hex number
+     * - css color string to a hex number
+     *
+     * always default to black if failed
+     * @param value
+     */
+    transform(value) {
+        if (value == null)
+            return DEFAULT_COLOR;
+        if (value.startsWith('#')) {
+            if (!this.cache[value]) {
+                this.cache[value] = this.hexStringToNumber(value);
+            }
+            return this.cache[value];
+        }
+        if (!this.ctx) {
+            this.ctx = this.document?.createElement('canvas').getContext('2d');
+        }
+        if (!this.ctx) {
+            console.warn('[NGT] hexify: canvas context is not available');
+            return DEFAULT_COLOR;
+        }
+        this.ctx.fillStyle = value;
+        const computedValue = this.ctx.fillStyle;
+        if (computedValue.startsWith('#')) {
+            if (!this.cache[computedValue]) {
+                this.cache[computedValue] = this.hexStringToNumber(computedValue);
+            }
+            return this.cache[computedValue];
+        }
+        if (!computedValue.startsWith('rgba')) {
+            console.warn(`[NGT] hexify: invalid color format. Expected rgba or hex, receive: ${computedValue}`);
+            return DEFAULT_COLOR;
+        }
+        const match = computedValue.match(RGBA_REGEX);
+        if (!match) {
+            console.warn(`[NGT] hexify: invalid color format. Expected rgba or hex, receive: ${computedValue}`);
+            return DEFAULT_COLOR;
+        }
+        const r = parseInt(match[1], 10);
+        const g = parseInt(match[2], 10);
+        const b = parseInt(match[3], 10);
+        const a = match[4] ? parseFloat(match[4]) : 1.0;
+        const cacheKey = `${r}:${g}:${b}:${a}`;
+        // check result from cache
+        if (!this.cache[cacheKey]) {
+            // Convert the components to hex strings
+            const hexR = this.componentToHex(r);
+            const hexG = this.componentToHex(g);
+            const hexB = this.componentToHex(b);
+            const hexA = this.componentToHex(Math.round(a * 255));
+            // Combine the hex components into a single hex string
+            const hex = `#${hexR}${hexG}${hexB}${hexA}`;
+            this.cache[cacheKey] = this.hexStringToNumber(hex);
+        }
+        return this.cache[cacheKey];
+    }
+    hexStringToNumber(hexString) {
+        return parseInt(hexString.replace('#', ''), 16);
+    }
+    componentToHex(component) {
+        const hex = component.toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtHexify, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: NgtHexify, isStandalone: true, name: "hexify" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtHexify, decorators: [{
+            type: Pipe,
+            args: [{ name: 'hexify', pure: true }]
+        }] });
+
+function omit(objFn, keysToOmit, equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' })) {
+    return computed(() => {
+        const obj = objFn();
+        const result = {};
+        for (const key of Object.keys(obj)) {
+            if (keysToOmit.includes(key))
+                continue;
+            Object.assign(result, { [key]: obj[key] });
+        }
+        return result;
+    }, { equal });
+}
+function pick(objFn, keyOrKeys, equal) {
+    if (Array.isArray(keyOrKeys)) {
+        if (!equal) {
+            equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' });
+        }
+        return computed(() => {
+            const obj = objFn();
+            const result = {};
+            for (const key of keyOrKeys) {
+                if (!(key in obj))
+                    continue;
+                Object.assign(result, { [key]: obj[key] });
+            }
+            return result;
+        }, { equal });
+    }
+    return computed(() => objFn()[keyOrKeys], { equal });
+}
+function merge(objFn, toMerge, mode = 'override', equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' })) {
+    if (mode === 'override')
+        return computed(() => ({ ...objFn(), ...toMerge }), { equal });
+    return computed(() => ({ ...toMerge, ...objFn() }), { equal });
+}
+function createVectorComputed(vectorCtor) {
+    return ((inputOrOptions, keyOrKeepUndefined, keepUndefined) => {
+        if (typeof keyOrKeepUndefined === 'undefined' || typeof keyOrKeepUndefined === 'boolean') {
+            keepUndefined = !!keyOrKeepUndefined;
+            const input = inputOrOptions;
+            return computed(() => {
+                const value = input();
+                if (keepUndefined && value == undefined)
+                    return undefined;
+                if (typeof value === 'number')
+                    return new vectorCtor().setScalar(value);
+                else if (Array.isArray(value))
+                    return new vectorCtor(...value);
+                else if (value)
+                    return value;
+                else
+                    return new vectorCtor();
+            }, { equal: (a, b) => !!a && !!b && a.equals(b) });
+        }
+        const options = inputOrOptions;
+        const key = keyOrKeepUndefined;
+        return computed(() => {
+            const value = options()[key];
+            if (keepUndefined && value == undefined)
+                return undefined;
+            if (typeof value === 'number')
+                return new vectorCtor().setScalar(value);
+            else if (Array.isArray(value))
+                return new vectorCtor(...value);
+            else if (value)
+                return value;
+            else
+                return new vectorCtor();
+        }, { equal: (a, b) => !!a && !!b && a.equals(b) });
+    });
+}
+const vector2 = createVectorComputed(THREE.Vector2);
+const vector3 = createVectorComputed(THREE.Vector3);
+const vector4 = createVectorComputed(THREE.Vector4);
+
+class NgtPortalAutoRender {
+    constructor() {
+        // TODO: (chau) investigate if this is still needed
+        // effect(() => {
+        // this.portalStore.update((state) => ({ events: { ...state.events, priority: this.renderPriority() + 1 } }));
+        // });
+        this.portalStore = injectStore({ host: true });
+        this.parentStore = injectStore({ skipSelf: true });
+        this.portal = inject(NgtPortalImpl, { host: true });
+        this.renderPriority = input(1, { alias: 'autoRender', transform: (value) => numberAttribute(value, 1) });
+        effect((onCleanup) => {
+            const portalRendered = this.portal.portalRendered();
+            if (!portalRendered)
+                return;
+            // track state
+            const [renderPriority, { internal }] = [this.renderPriority(), this.portalStore()];
+            let oldClean;
+            const cleanup = internal.subscribe(({ gl, scene, camera }) => {
+                const [parentScene, parentCamera] = [
+                    this.parentStore.snapshot.scene,
+                    this.parentStore.snapshot.camera,
+                ];
+                oldClean = gl.autoClear;
+                if (renderPriority === 1) {
+                    // clear scene and render with default
+                    gl.autoClear = true;
+                    gl.render(parentScene, parentCamera);
+                }
+                // disable cleaning
+                gl.autoClear = false;
+                gl.clearDepth();
+                gl.render(scene, camera);
+                // restore
+                gl.autoClear = oldClean;
+            }, renderPriority, this.portalStore);
+            onCleanup(() => cleanup());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalAutoRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgtPortalAutoRender, isStandalone: true, selector: "ngt-portal[autoRender]", inputs: { renderPriority: { classPropertyName: "renderPriority", publicName: "autoRender", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalAutoRender, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ngt-portal[autoRender]' }]
+        }], ctorParameters: () => [] });
+class NgtPortalContent {
+    static ngTemplateContextGuard(_, ctx) {
+        return true;
+    }
+    constructor() {
+        const host = inject(ElementRef, { skipSelf: true });
+        const { element } = inject(ViewContainerRef);
+        const injector = inject(Injector);
+        const commentNode = element.nativeElement;
+        const store = injectStore();
+        commentNode.data = NGT_PORTAL_CONTENT_FLAG;
+        commentNode[NGT_PORTAL_CONTENT_FLAG] = store;
+        commentNode[NGT_DOM_PARENT_FLAG] = host.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[portalContent]' }]
+        }], ctorParameters: () => [] });
+function mergeState(previousRoot, store, container, pointer, raycaster, events, size) {
+    // we never want to spread the id
+    const { id: _, ...previousState } = previousRoot.snapshot;
+    const state = store.snapshot;
+    let viewport = undefined;
+    if (state.camera && size) {
+        const camera = state.camera;
+        // calculate the override viewport, if present
+        viewport = previousState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
+        // update the portal camera, if it differs from the previous layer
+        if (camera !== previousState.camera)
+            updateCamera(camera, size);
+    }
+    return {
+        // the intersect consists of the previous root state
+        ...previousState,
+        ...state,
+        // portals have their own scene, which forms the root, a raycaster and a pointer
+        scene: container,
+        pointer,
+        raycaster,
+        // their previous root is the layer before it
+        previousRoot,
+        events: { ...previousState.events, ...state.events, ...events },
+        size: { ...previousState.size, ...size },
+        viewport: { ...previousState.viewport, ...viewport },
+        // layers are allowed to override events
+        setEvents: (events) => store.update((state) => ({ ...state, events: { ...state.events, ...events } })),
+    };
+}
+class NgtPortalImpl {
+    constructor() {
+        this.container = input.required();
+        this.state = input({});
+        this.contentRef = contentChild.required(NgtPortalContent, { read: TemplateRef });
+        this.anchorRef = contentChild.required(NgtPortalContent, { read: ViewContainerRef });
+        this.previousStore = injectStore({ skipSelf: true });
+        this.portalStore = injectStore();
+        this.injector = inject(Injector);
+        this.size = pick(this.state, 'size');
+        this.events = pick(this.state, 'events');
+        this.restState = omit(this.state, ['size', 'events']);
+        this.portalContentRendered = signal(false);
+        this.portalRendered = this.portalContentRendered.asReadonly();
+        extend({ Group });
+        effect(() => {
+            let [container, anchor, content] = [
+                this.container(),
+                this.anchorRef(),
+                this.contentRef(),
+                this.previousStore(),
+            ];
+            const [size, events, restState] = [untracked(this.size), untracked(this.events), untracked(this.restState)];
+            if (!is.instance(container)) {
+                container = prepare(container, 'ngt-portal', { store: this.portalStore });
+            }
+            const instanceState = getInstanceState(container);
+            if (instanceState && instanceState.store !== this.portalStore) {
+                instanceState.store = this.portalStore;
+            }
+            this.portalStore.update(restState, mergeState(this.previousStore, this.portalStore, container, this.portalStore.snapshot.pointer, this.portalStore.snapshot.raycaster, events, size));
+            if (this.portalViewRef) {
+                this.portalViewRef.detectChanges();
+                return;
+            }
+            this.portalViewRef = anchor.createEmbeddedView(content, { injector: this.injector }, { injector: this.injector });
+            this.portalViewRef.detectChanges();
+            this.portalContentRendered.set(true);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalImpl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: NgtPortalImpl, isStandalone: true, selector: "ngt-portal", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NGT_STORE,
+                useFactory: (previousStore) => {
+                    const pointer = new THREE.Vector2();
+                    const raycaster = new THREE.Raycaster();
+                    const { id: _skipId, ...previousState } = previousStore.snapshot;
+                    const store = signalState({
+                        id: makeId(),
+                        ...previousState,
+                        scene: null,
+                        previousRoot: previousStore,
+                        pointer,
+                        raycaster,
+                    });
+                    store.update(mergeState(previousStore, store, null, pointer, raycaster));
+                    return store;
+                },
+                deps: [[new SkipSelf(), NGT_STORE]],
+            },
+        ], queries: [{ propertyName: "contentRef", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "anchorRef", first: true, predicate: NgtPortalContent, descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+		@if (portalRendered()) {
+			<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
+			<ngt-group (pointerover)="(undefined)" attach="none" />
+		}
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgtPortalImpl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-portal',
+                    template: `
+		@if (portalRendered()) {
+			<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
+			<ngt-group (pointerover)="(undefined)" attach="none" />
+		}
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NGT_STORE,
+                            useFactory: (previousStore) => {
+                                const pointer = new THREE.Vector2();
+                                const raycaster = new THREE.Raycaster();
+                                const { id: _skipId, ...previousState } = previousStore.snapshot;
+                                const store = signalState({
+                                    id: makeId(),
+                                    ...previousState,
+                                    scene: null,
+                                    previousRoot: previousStore,
+                                    pointer,
+                                    raycaster,
+                                });
+                                store.update(mergeState(previousStore, store, null, pointer, raycaster));
+                                return store;
+                            },
+                            deps: [[new SkipSelf(), NGT_STORE]],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+const NgtPortal = [NgtPortalImpl, NgtPortalContent];
+
 const shallowLoose = { objects: 'shallow', strict: false };
 function canvasRootInitializer(injector) {
     return assertInjector(canvasRootInitializer, injector, () => {