angular-three 2.0.0-beta.242 → 2.0.0-beta.244

package/fesm2022/angular-three.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { untracked, computed, signal, ElementRef, inject, effect, InjectionToken, Optional, SkipSelf, ViewContainerRef, NgZone, TemplateRef, afterNextRender, DestroyRef, Directive, input, getDebugNode, RendererFactory2, Injectable, Injector, makeEnvironmentProviders, EnvironmentInjector, booleanAttribute, output, viewChild, createEnvironmentInjector, Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, contentChild, forwardRef } from '@angular/core';
+import { untracked, computed, signal, ElementRef, input, inject, ViewContainerRef, NgZone, TemplateRef, afterNextRender, DestroyRef, Directive, effect, InjectionToken, getDebugNode, RendererFactory2, Injectable, makeEnvironmentProviders, EnvironmentInjector, Injector, booleanAttribute, output, viewChild, createEnvironmentInjector, Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, contentChild, forwardRef } from '@angular/core';
 import { outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { provideResizeOptions, NgxResize } from 'ngxtension/resize';
 import { MathUtils, WebGLRenderer, OrthographicCamera, PerspectiveCamera, Vector3, Layers, Color, ColorManagement, Texture, RGBAFormat, UnsignedByteType, Raycaster, Scene, PCFSoftShadowMap, BasicShadowMap, PCFShadowMap, VSMShadowMap, NoToneMapping, ACESFilmicToneMapping, Vector2, Clock } from 'three';
 import { DOCUMENT } from '@angular/common';
+import { Subject, filter } from 'rxjs';
 import { createInjectionToken } from 'ngxtension/create-injection-token';
-import { Subject, ReplaySubject, filter } from 'rxjs';
 import { assertInjector } from 'ngxtension/assert-injector';
 import * as i1 from '@angular/router';
 import { ActivationEnd, RouterOutlet } from '@angular/router';
@@ -32,14 +32,6 @@ function updater(_source) {
         });
     };
 }
-function patcher(_source) {
-    return (state) => {
-        const updater = reducer(state);
-        untracked(() => {
-            _source.update((previous) => ({ ...updater(previous), ...previous }));
-        });
-    };
-}
 function getter(_source) {
     return (...keys) => {
         const root = untracked(_source);
@@ -78,7 +70,6 @@ function signalStore(initialState = {}, options) {
     let source;
     let update;
     let get;
-    let patch;
     let select;
     let state;
     const computedCache = new Map();
@@ -90,19 +81,17 @@ function signalStore(initialState = {}, options) {
         state = source.asReadonly();
         get = getter(source);
         update = updater(source);
-        patch = patcher(source);
         select = selector(state, computedCache);
-        source.set(initialState({ update, get, patch, select }));
+        source.set(initialState({ update, get, select }));
     }
     else {
         source = signal(initialState, options);
         state = source.asReadonly();
         get = getter(source);
         update = updater(source);
-        patch = patcher(source);
         select = selector(state, computedCache);
     }
-    const store = { select, get, update, patch, state };
+    const store = { select, get, update, state };
     Object.defineProperty(store, 'snapshot', {
         get: untracked.bind({}, state),
         configurable: false,
@@ -201,16 +190,21 @@ function getLocalState(obj) {
     return obj['__ngt__'];
 }
 function invalidateInstance(instance) {
-    const state = getLocalState(instance)?.store.snapshot;
-    if (state && state.internal.frames === 0)
-        state.invalidate();
+    let store = getLocalState(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, localState) {
     const instance = object;
     if (localState?.primitive || !instance.__ngt__) {
         const { instanceStore = signalStore({
-            nativeProps: {},
             parent: null,
             objects: [],
             nonObjects: [],
@@ -225,7 +219,6 @@ function prepare(object, localState) {
             parent: instanceStore.select('parent'),
             objects: instanceStore.select('objects'),
             nonObjects: instanceStore.select('nonObjects'),
-            nativeProps: instanceStore.select('nativeProps'),
             add(object, type) {
                 const current = instance.__ngt__.instanceStore.get(type);
                 const foundIndex = current.indexOf((node) => object === node);
@@ -242,9 +235,6 @@ function prepare(object, localState) {
                 instance.__ngt__.instanceStore.update((prev) => ({ [type]: prev[type].filter((node) => node !== object) }));
                 notifyAncestors(instance.__ngt__.instanceStore.get('parent'));
             },
-            setNativeProps(key, value) {
-                instance.__ngt__.instanceStore.update((prev) => ({ nativeProps: { ...prev.nativeProps, [key]: value } }));
-            },
             setParent(parent) {
                 instance.__ngt__.instanceStore.update({ parent });
             },
@@ -743,6 +733,83 @@ function createPointerEvents(store) {
     };
 }
 
+const ROUTED_SCENE = '__ngt_renderer_is_routed_scene__';
+const HTML = '__ngt_renderer_is_html';
+const SPECIAL_INTERNAL_ADD_COMMENT = '__ngt_renderer_add_comment__';
+const SPECIAL_DOM_TAG = {
+    NGT_PORTAL: 'ngt-portal',
+    NGT_PRIMITIVE: 'ngt-primitive',
+    NGT_VALUE: 'ngt-value',
+};
+const SPECIAL_PROPERTIES = {
+    RENDER_PRIORITY: 'priority',
+    ATTACH: 'attach',
+    RAW_VALUE: 'rawValue',
+    PARAMETERS: 'parameters',
+};
+const SPECIAL_EVENTS = {
+    BEFORE_RENDER: 'beforeRender',
+    UPDATED: 'updated',
+    ATTACHED: 'attached',
+};
+
+class NgtArgs {
+    constructor() {
+        this.args = input.required();
+        this.vcr = inject(ViewContainerRef);
+        this.zone = inject(NgZone);
+        this.template = inject(TemplateRef);
+        this.autoEffect = injectAutoEffect();
+        this.injected = false;
+        this.injectedArgs = null;
+        const commentNode = this.vcr.element.nativeElement;
+        if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
+            commentNode[SPECIAL_INTERNAL_ADD_COMMENT]('args');
+            delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
+        }
+        afterNextRender(() => {
+            this.autoEffect(() => {
+                const value = this.args();
+                if (value == null || !Array.isArray(value) || (value.length === 1 && value[0] === null))
+                    return;
+                this.injected = false;
+                this.injectedArgs = value;
+                untracked(() => {
+                    this.createView();
+                });
+            });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.view?.destroy();
+        });
+    }
+    get value() {
+        if (this.validate()) {
+            this.injected = true;
+            return this.injectedArgs;
+        }
+        return null;
+    }
+    validate() {
+        return !this.injected && !!this.injectedArgs?.length;
+    }
+    createView() {
+        this.zone.runOutsideAngular(() => {
+            if (this.view && !this.view.destroyed) {
+                this.view.destroy();
+            }
+            this.view = this.vcr.createEmbeddedView(this.template);
+            this.view.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtArgs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.6", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: { classPropertyName: "args", publicName: "args", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtArgs, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[args]', standalone: true }]
+        }], ctorParameters: () => [] });
+
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, props) {
     const propsEntries = Object.entries(props);
@@ -856,8 +923,8 @@ function applyProps(instance, props) {
         if (localState?.eventCount)
             rootState.internal.interaction.push(instance);
     }
-    if (parent && localState?.afterUpdate && localState.afterUpdate.observed && changes.length) {
-        localState.afterUpdate.next(instance);
+    if (parent && localState?.onUpdate && changes.length) {
+        localState.onUpdate(instance);
     }
     return instance;
 }
@@ -866,8 +933,8 @@ const shallowLoose = { objects: 'shallow', strict: false };
 const roots = new Map();
 function injectCanvasRootInitializer(injector) {
     return assertInjector(injectCanvasRootInitializer, injector, () => {
-        const injectedStore = injectNgtStore();
-        const loop = injectNgtLoop();
+        const injectedStore = injectStore();
+        const loop = injectLoop();
         return (canvas) => {
             const exist = roots.has(canvas);
             let store = roots.get(canvas);
@@ -889,21 +956,19 @@ function injectCanvasRootInitializer(injector) {
                     const root = roots.get(canvas);
                     if (root) {
                         root.update((state) => ({ internal: { ...state.internal, active: false } }));
-                        setTimeout(() => {
-                            try {
-                                const state = root.get();
-                                state.events.disconnect?.();
-                                state.gl?.renderLists?.dispose?.();
-                                state.gl?.forceContextLoss?.();
-                                if (state.gl?.xr)
-                                    state.xr.disconnect();
-                                dispose(state);
-                                roots.delete(canvas);
-                            }
-                            catch (e) {
-                                console.error('[NGT] Unexpected error while destroying Canvas Root', e);
-                            }
-                        }, timeout);
+                        try {
+                            const state = root.get();
+                            state.events.disconnect?.();
+                            state.gl?.renderLists?.dispose?.();
+                            state.gl?.forceContextLoss?.();
+                            if (state.gl?.xr)
+                                state.xr.disconnect();
+                            dispose(state);
+                            roots.delete(canvas);
+                        }
+                        catch (e) {
+                            console.error('[NGT] Unexpected error while destroying Canvas Root', e);
+                        }
                     }
                 },
                 configure: (inputs) => {
@@ -1057,9 +1122,9 @@ function injectCanvasRootInitializer(injector) {
                     if (state.flat !== flat)
                         stateToUpdate.flat = flat;
                     // Set gl props
-                    gl.setClearAlpha(0);
-                    gl.setPixelRatio(makeDpr(state.viewport.dpr));
-                    gl.setSize(state.size.width, state.size.height);
+                    // gl.setClearAlpha(0);
+                    // gl.setPixelRatio(makeDpr(state.viewport.dpr));
+                    // gl.setSize(state.size.width, state.size.height);
                     if (is.obj(glOptions) &&
                         !(typeof glOptions === 'function') &&
                         !is.renderer(glOptions) &&
@@ -1073,7 +1138,9 @@ function injectCanvasRootInitializer(injector) {
                     if (performance && !is.equ(performance, state.performance, shallowLoose)) {
                         stateToUpdate.performance = { ...state.performance, ...performance };
                     }
-                    store.update(stateToUpdate);
+                    if (Object.keys(stateToUpdate).length) {
+                        store.update(stateToUpdate);
+                    }
                     // Check size, allow it to take on container bounds initially
                     const size = computeInitialSize(canvas, sizeOptions);
                     if (!is.equ(size, state.size, shallowLoose)) {
@@ -1250,7 +1317,7 @@ function createLoop(roots) {
     }
     return { loop, invalidate, advance };
 }
-const [injectNgtLoop] = createInjectionToken(() => createLoop(roots));
+const [injectLoop] = createInjectionToken(() => createLoop(roots));
 
 function storeFactory(previousStore) {
     const document = inject(DOCUMENT);
@@ -1259,7 +1326,7 @@ function storeFactory(previousStore) {
         // TODO: revisit this when we need to support multiple platforms
         throw new Error(`[NGT] Window is not available.`);
     }
-    const loop = injectNgtLoop();
+    const loop = injectLoop();
     // NOTE: using Subject because we do not care about late-subscribers
     const pointerMissed$ = new Subject();
     const store = signalStore(({ get, update }) => {
@@ -1393,9 +1460,8 @@ function storeFactory(previousStore) {
     });
     Object.defineProperty(store, 'pointerMissed$', { get: () => pointerMissed$ });
     let { size: oldSize, viewport: { dpr: oldDpr }, camera: oldCamera, } = store.snapshot;
-    const [camera, size, viewportDpr] = [store.select('camera'), store.select('size'), store.select('viewport', 'dpr')];
     effect(() => {
-        const [newCamera, newSize, newDpr, gl] = [camera(), size(), viewportDpr(), store.snapshot.gl];
+        const { camera: newCamera, size: newSize, viewport: { dpr: newDpr }, gl, } = store.state();
         // Resize camera and renderer on changes to size and pixel-ratio
         if (newSize !== oldSize || newDpr !== oldDpr) {
             oldSize = newSize;
@@ -1417,138 +1483,69 @@ function storeFactory(previousStore) {
     return store;
 }
 const NGT_STORE = new InjectionToken('NgtStore Token');
-const [injectNgtStore, provideNgtStore] = createInjectionToken(storeFactory, {
-    isRoot: false,
-    deps: [[new Optional(), new SkipSelf(), NGT_STORE]],
-    token: NGT_STORE,
-});
+function provideStore(store) {
+    if (store) {
+        return { provide: NGT_STORE, useFactory: store };
+    }
+    return { provide: NGT_STORE, useFactory: storeFactory };
+}
+function injectStore(options) {
+    return inject(NGT_STORE, options);
+}
 
 const catalogue = {};
 function extend(objects) {
     Object.assign(catalogue, objects);
 }
-const [injectNgtCatalogue] = createInjectionToken(() => catalogue);
-
-const ROUTED_SCENE = '__ngt_renderer_is_routed_scene__';
-const HTML = '__ngt_renderer_is_html';
-const SPECIAL_INTERNAL_ADD_COMMENT = '__ngt_renderer_add_comment__';
-const SPECIAL_DOM_TAG = {
-    NGT_PORTAL: 'ngt-portal',
-    NGT_PRIMITIVE: 'ngt-primitive',
-    NGT_VALUE: 'ngt-value',
-};
-const SPECIAL_PROPERTIES = {
-    COMPOUND: 'ngtCompound',
-    RENDER_PRIORITY: 'priority',
-    ATTACH: 'attach',
-    RAW_VALUE: 'rawValue',
-    PARAMETERS: 'parameters',
-    REF: 'ref',
-};
-const SPECIAL_EVENTS = {
-    BEFORE_RENDER: 'beforeRender',
-    AFTER_UPDATE: 'afterUpdate',
-    AFTER_ATTACH: 'afterAttach',
-};
+const [injectCatalogue] = createInjectionToken(() => catalogue);
 
-const [injectNodeType, provideNodeType] = createInjectionToken(() => '', {
-    isRoot: false,
-});
-class NgtCommonDirective {
-    constructor() {
-        this.vcr = inject(ViewContainerRef);
-        this.zone = inject(NgZone);
-        this.template = inject(TemplateRef);
-        this.nodeType = injectNodeType();
-        this.autoEffect = injectAutoEffect();
-        this.injected = false;
-        this.injectedValue = null;
-        this.shouldCreateView = true;
-        const commentNode = this.vcr.element.nativeElement;
-        if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
-            commentNode[SPECIAL_INTERNAL_ADD_COMMENT](this.nodeType);
-            delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
-        }
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const value = this.inputValue();
-                if (this.shouldSkipCreateView(value))
-                    return;
-                this.injected = false;
-                this.injectedValue = value;
-                untracked(() => {
-                    this.createView();
-                });
-            });
-        });
-        inject(DestroyRef).onDestroy(() => {
-            this.view?.destroy();
-        });
-    }
-    shouldSkipCreateView(value) {
-        return !value;
-    }
-    get value() {
-        if (this.validate()) {
-            this.injected = true;
-            return this.injectedValue;
-        }
-        return null;
-    }
-    createView() {
-        this.zone.runOutsideAngular(() => {
-            if (this.shouldCreateView) {
-                if (this.view && !this.view.destroyed) {
-                    this.view.destroy();
-                }
-                this.view = this.vcr.createEmbeddedView(this.template);
-                this.view.detectChanges();
-            }
-        });
+function createNode(type, node, document) {
+    const state = [type, null, [], false, undefined, undefined, undefined];
+    const rendererNode = Object.assign(node, { __ngt_renderer__: state });
+    // NOTE: assign ownerDocument to node so we can use HostListener in Component
+    if (!rendererNode['ownerDocument'])
+        rendererNode['ownerDocument'] = document;
+    // NOTE: assign injectorFactory on non-three type since
+    // rendererNode is an instance of DOM Node
+    if (state[0 /* NgtRendererClassId.type */] !== 'three') {
+        state[6 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode)?.injector;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: NgtCommonDirective, ngImport: i0 }); }
+    return rendererNode;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtCommonDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [] });
-
-class NgtArgs extends NgtCommonDirective {
-    constructor() {
-        super(...arguments);
-        this.args = input.required();
-        this.inputValue = this.args;
+function isDOM(node) {
+    const rS = node['__ngt_renderer__'];
+    return !rS || node instanceof Element || node instanceof Document || node instanceof Window;
+}
+function getClosestParentWithInstance(node) {
+    let parent = node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
+    if (parent &&
+        parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal' &&
+        parent.__ngt_renderer__[5 /* NgtRendererClassId.portalContainer */]?.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+        return parent.__ngt_renderer__[5 /* NgtRendererClassId.portalContainer */];
     }
-    shouldSkipCreateView(value) {
-        return value == null || !Array.isArray(value) || (value.length === 1 && value[0] === null);
+    while (parent && parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'three') {
+        parent = parent.__ngt_renderer__[5 /* NgtRendererClassId.portalContainer */]
+            ? parent.__ngt_renderer__[5 /* NgtRendererClassId.portalContainer */]
+            : parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
     }
-    validate() {
-        return !this.injected && !!this.injectedValue?.length;
+    return parent;
+}
+function setParent(node, parent) {
+    if (!node.__ngt_renderer__[1 /* NgtRendererClassId.parent */]) {
+        node.__ngt_renderer__[1 /* NgtRendererClassId.parent */] = parent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtArgs, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.3", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: { classPropertyName: "args", publicName: "args", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideNodeType('args')], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtArgs, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[args]', standalone: true, providers: [provideNodeType('args')] }]
-        }] });
-
-class NgtParent extends NgtCommonDirective {
-    constructor() {
-        super(...arguments);
-        this.parent = input.required();
-        this.inputValue = this.parent;
+function addChild(node, child) {
+    if (!node.__ngt_renderer__[2 /* NgtRendererClassId.children */].includes(child)) {
+        node.__ngt_renderer__[2 /* NgtRendererClassId.children */].push(child);
     }
-    validate() {
-        return !this.injected && !!this.injectedValue;
+}
+function removeChild(node, child) {
+    const index = node.__ngt_renderer__?.[2 /* NgtRendererClassId.children */].findIndex((c) => child === c);
+    if (index >= 0) {
+        node.__ngt_renderer__[2 /* NgtRendererClassId.children */].splice(index, 1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtParent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.3", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideNodeType('parent')], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtParent, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[parent]', standalone: true, providers: [provideNodeType('parent')] }]
-        }] });
 
 function attach(object, value, paths = []) {
     const [base, ...remaining] = paths;
@@ -1596,10 +1593,22 @@ function attachThreeChild(parent, child) {
     }
     // whether the child is added to the parent with parent.add()
     let added = false;
+    let attached = false;
     // 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 (!cLS.store || cLS.store === pLS.store.get('previousRoot')) {
+    if (!cLS.store || cLS.store !== pLS.store || cLS.store === pLS.store.get('previousRoot')) {
         cLS.store = pLS.store;
+        const grandchildren = [
+            ...(cLS.objects ? untracked(cLS.objects) : []),
+            ...(cLS.nonObjects ? untracked(cLS.nonObjects) : []),
+        ];
+        for (const grandchild of grandchildren) {
+            const grandChildLS = getLocalState(grandchild);
+            if (!grandChildLS)
+                continue;
+            grandChildLS.store = cLS.store;
+        }
     }
     if (cLS.attach) {
         const attachProp = cLS.attach;
@@ -1628,9 +1637,9 @@ function attachThreeChild(parent, child) {
                     cLS.setParent(parent);
                 }
                 // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
-                if (child.__ngt_renderer__[11 /* NgtRendererClassId.rawValue */] === undefined)
+                if (child.__ngt_renderer__[4 /* NgtRendererClassId.rawValue */] === undefined)
                     return;
-                attach(parent, child.__ngt_renderer__[11 /* NgtRendererClassId.rawValue */], attachProp);
+                attach(parent, child.__ngt_renderer__[4 /* NgtRendererClassId.rawValue */], attachProp);
             }
             else {
                 attach(parent, child, attachProp);
@@ -1644,11 +1653,13 @@ function attachThreeChild(parent, child) {
         added = true;
     }
     pLS.add(child, added ? 'objects' : 'nonObjects');
-    if (cLS.instanceStore.get('parent') !== parent) {
+    if (cLS.parent && untracked(cLS.parent) !== parent) {
         cLS.setParent(parent);
     }
-    if (cLS.afterAttach)
-        cLS.afterAttach.next({ parent, node: child });
+    // 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 (cLS.onAttach)
+        cLS.onAttach({ parent, node: child });
     invalidateInstance(child);
     invalidateInstance(parent);
 }
@@ -1695,22 +1706,19 @@ function processThreeEvent(instance, priority, eventName, callback) {
             .get('internal')
             .subscribe((state) => callback({ state, object: instance }), priority || lS.priority || 0);
     }
-    if (eventName === SPECIAL_EVENTS.AFTER_UPDATE || eventName === SPECIAL_EVENTS.AFTER_ATTACH) {
-        let emitter = lS[eventName];
-        if (!emitter)
-            emitter = lS[eventName] = new ReplaySubject(1);
-        const sub = emitter.subscribe(callback);
-        // NOTE: for afterAttach event, if the instance already has a parent,
-        //  then we'll emit the event immediately
-        if (eventName === SPECIAL_EVENTS.AFTER_ATTACH && untracked(lS.parent)) {
-            emitter.next({ parent: untracked(lS.parent), node: instance });
+    if (eventName === SPECIAL_EVENTS.ATTACHED) {
+        lS.onAttach = callback;
+        if (untracked(lS.parent)) {
+            lS.onAttach({ parent: untracked(lS.parent), node: instance });
         }
         return () => {
-            sub.unsubscribe();
-            const emitter = lS[eventName];
-            if (emitter && !emitter.observed) {
-                emitter.complete();
-            }
+            lS.onAttach = undefined;
+        };
+    }
+    if (eventName === SPECIAL_EVENTS.UPDATED) {
+        lS.onUpdate = callback;
+        return () => {
+            lS.onUpdate = undefined;
         };
     }
     if (!lS.handlers)
@@ -1728,8 +1736,14 @@ function processThreeEvent(instance, priority, eventName, callback) {
     lS.eventCount += 1;
     // but only add the instance (target) to the interaction array (so that it is handled by the EventManager with Raycast)
     // the first time eventCount is incremented
-    if (lS.eventCount === 1 && instance['raycast'])
-        lS.store.get('internal', 'interaction').push(instance);
+    if (lS.eventCount === 1 && instance['raycast']) {
+        let root = lS.store;
+        while (root.get('previousRoot')) {
+            root = root.get('previousRoot');
+        }
+        const interactions = root.get('internal', 'interaction') || [];
+        interactions.push(instance);
+    }
     // clean up the event listener by removing the target from the interaction array
     return () => {
         const lS = getLocalState(instance);
@@ -1743,590 +1757,146 @@ function processThreeEvent(instance, priority, eventName, callback) {
     };
 }
 
-const NGT_COMPOUND_PREFIXES = new InjectionToken('NgtCompoundPrefixes');
-class NgtRendererStore {
-    constructor(rootState) {
-        this.rootState = rootState;
-        this.argsCommentNodes = [];
-        this.parentCommentNodes = [];
+class NgtRendererFactory {
+    constructor() {
+        this.delegateRendererFactory = inject(RendererFactory2, { skipSelf: true });
+        this.document = inject(DOCUMENT);
+        this.catalogue = injectCatalogue();
+        this.rootStore = injectStore();
         this.portalCommentsNodes = [];
+        this.rendererMap = new Map();
+        this.routedSet = new Set();
     }
-    createNode(type, node) {
-        const state = [
-            type,
-            null,
-            null,
-            [],
-            false,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-            undefined,
-        ];
-        const rendererNode = Object.assign(node, { __ngt_renderer__: state });
-        // NOTE: assign ownerDocument to node so we can use HostListener in Component
-        if (!rendererNode['ownerDocument'])
-            rendererNode['ownerDocument'] = this.rootState.document;
-        // NOTE: assign injectorFactory on non-three type since
-        // rendererNode is an instance of DOM Node
-        if (state[0 /* NgtRendererClassId.type */] !== 'three') {
-            state[14 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(rendererNode)?.injector;
-        }
-        if (state[0 /* NgtRendererClassId.type */] === 'comment') {
-            // NOTE: we attach an arrow function to the Comment node
-            // In our directives, we can call this function to then start tracking the RendererNode
-            // this is done to limit the amount of Nodes we need to process for getCreationState
-            rendererNode[SPECIAL_INTERNAL_ADD_COMMENT] = (node) => {
-                if (node === 'args') {
-                    this.argsCommentNodes.push(rendererNode);
-                }
-                else if (node === 'parent') {
-                    this.parentCommentNodes.push(rendererNode);
-                }
-                else if (typeof node === 'object') {
-                    this.portalCommentsNodes.push(node);
-                }
-            };
-            return rendererNode;
-        }
-        if (state[0 /* NgtRendererClassId.type */] === 'compound') {
-            state[8 /* NgtRendererClassId.queueOps */] = new Set();
-            state[9 /* NgtRendererClassId.attributes */] = state[10 /* NgtRendererClassId.properties */] = {};
-            return rendererNode;
-        }
-        return rendererNode;
-    }
-    isCompound(name) {
-        return this.rootState.compoundPrefixes.some((prefix) => name.startsWith(prefix));
-    }
-    isDOM(node) {
-        const rS = node['__ngt_renderer__'];
-        return (!rS ||
-            (rS[0 /* NgtRendererClassId.type */] !== 'compound' &&
-                (node instanceof Element || node instanceof Document || node instanceof Window)));
-    }
-    getClosestParentWithInstance(node) {
-        let parent = node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
-        if (parent &&
-            parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
-            parent.__ngt_renderer__[7 /* NgtRendererClassId.compounded */] &&
-            parent.__ngt_renderer__[7 /* NgtRendererClassId.compounded */].__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
-            return parent.__ngt_renderer__[7 /* NgtRendererClassId.compounded */];
-        }
-        if (parent &&
-            parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'portal' &&
-            parent.__ngt_renderer__[13 /* NgtRendererClassId.portalContainer */]?.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
-            return parent.__ngt_renderer__[13 /* NgtRendererClassId.portalContainer */];
-        }
-        while (parent && parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'three') {
-            parent = parent.__ngt_renderer__[13 /* NgtRendererClassId.portalContainer */]
-                ? parent.__ngt_renderer__[13 /* NgtRendererClassId.portalContainer */]
-                : parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
-        }
-        return parent;
-    }
-    getClosestParentWithCompound(node) {
-        if (node.__ngt_renderer__[6 /* NgtRendererClassId.compoundParent */]) {
-            return node.__ngt_renderer__[6 /* NgtRendererClassId.compoundParent */];
-        }
-        let parent = node.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
-        if (parent &&
-            parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'compound' &&
-            !parent.__ngt_renderer__[7 /* NgtRendererClassId.compounded */]) {
-            return parent;
-        }
-        while (parent &&
-            (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' ||
-                !parent.__ngt_renderer__[6 /* NgtRendererClassId.compoundParent */] ||
-                parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'compound')) {
-            parent = parent.__ngt_renderer__[1 /* NgtRendererClassId.parent */];
-        }
-        if (!parent)
-            return null;
-        if (parent.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three' &&
-            parent.__ngt_renderer__[6 /* NgtRendererClassId.compoundParent */]) {
-            return parent.__ngt_renderer__[6 /* NgtRendererClassId.compoundParent */];
+    createRenderer(hostElement, type) {
+        const delegateRenderer = this.delegateRendererFactory.createRenderer(hostElement, type);
+        if (!type)
+            return delegateRenderer;
+        // NOTE: might need to revisit this
+        if (type['type'][HTML]) {
+            this.rendererMap.set(type.id, delegateRenderer);
+            return delegateRenderer;
+        }
+        if (type['type'][ROUTED_SCENE]) {
+            this.routedSet.add(type.id);
         }
-        if (!parent.__ngt_renderer__[7 /* NgtRendererClassId.compounded */]) {
-            return parent;
+        let renderer = this.rendererMap.get(type.id);
+        if (!renderer) {
+            this.rendererMap.set(type.id, (renderer = new NgtRenderer(delegateRenderer, this.rootStore, this.document, this.portalCommentsNodes, this.catalogue, 
+            // setting root scene if there's no routed scene OR this component is the routed Scene
+            !hostElement && (this.routedSet.size === 0 || this.routedSet.has(type.id)))));
         }
-        return null;
-    }
-    processPortalContainer(portal) {
-        const injector = portal.__ngt_renderer__[14 /* NgtRendererClassId.injectorFactory */]?.();
-        if (!injector)
-            return;
-        const portalStore = injector.get(NGT_STORE, null);
-        if (!portalStore)
-            return;
-        const portalContainer = portalStore.get('scene');
-        if (!portalContainer)
-            return;
-        portal.__ngt_renderer__[13 /* NgtRendererClassId.portalContainer */] = this.createNode('three', portalContainer);
+        return renderer;
     }
-    getCreationState() {
-        return [
-            this.firstNonInjectedDirective('argsCommentNodes', NgtArgs)?.value || [],
-            this.firstNonInjectedDirective('parentCommentNodes', NgtParent)?.value || null,
-            this.tryGetPortalStore(),
-        ];
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtRendererFactory }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtRendererFactory, decorators: [{
+            type: Injectable
+        }] });
+class NgtRenderer {
+    constructor(delegate, rootStore, document, portalCommentsNodes, catalogue, isRoot = true) {
+        this.delegate = delegate;
+        this.rootStore = rootStore;
+        this.document = document;
+        this.portalCommentsNodes = portalCommentsNodes;
+        this.catalogue = catalogue;
+        this.isRoot = isRoot;
+        this.argsCommentNodes = [];
+        this.createText = this.delegate.createText.bind(this.delegate);
+        this.destroy = this.delegate.destroy.bind(this.delegate);
+        this.destroyNode = null;
+        this.selectRootElement = this.delegate.selectRootElement.bind(this.delegate);
+        this.nextSibling = this.delegate.nextSibling.bind(this.delegate);
+        this.addClass = this.delegate.addClass.bind(this.delegate);
+        this.removeClass = this.delegate.removeClass.bind(this.delegate);
+        this.setStyle = this.delegate.setStyle.bind(this.delegate);
+        this.removeStyle = this.delegate.removeStyle.bind(this.delegate);
+        this.setValue = this.delegate.setValue.bind(this.delegate);
     }
-    setParent(node, parent) {
-        if (!node.__ngt_renderer__[1 /* NgtRendererClassId.parent */]) {
-            node.__ngt_renderer__[1 /* NgtRendererClassId.parent */] = parent;
+    createElement(name, namespace) {
+        const element = this.delegate.createElement(name, namespace);
+        // on first pass, we return the Root Scene as the root node
+        if (this.isRoot) {
+            this.isRoot = false;
+            const node = createNode('three', this.rootStore.snapshot.scene, this.document);
+            node.__ngt_renderer__[6 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(element)?.injector;
+            return node;
         }
-    }
-    addChild(node, child) {
-        if (!node.__ngt_renderer__[3 /* NgtRendererClassId.children */].includes(child)) {
-            node.__ngt_renderer__[3 /* NgtRendererClassId.children */].push(child);
+        if (name === SPECIAL_DOM_TAG.NGT_PORTAL) {
+            return createNode('portal', element, this.document);
         }
-    }
-    removeChild(node, child) {
-        const index = node.__ngt_renderer__?.[3 /* NgtRendererClassId.children */].findIndex((c) => child === c);
-        if (index >= 0) {
-            node.__ngt_renderer__[3 /* NgtRendererClassId.children */].splice(index, 1);
+        if (name === SPECIAL_DOM_TAG.NGT_VALUE) {
+            const instanceStore = signalStore({ parent: null, objects: [], nonObjects: [] });
+            return createNode('three', Object.assign({ __ngt_renderer__: { rawValue: undefined } }, 
+            // NOTE: we assign this manually to a raw value node
+            // because we say it is a 'three' node but we're not using prepare()
+            {
+                __ngt__: {
+                    isRaw: true,
+                    instanceStore,
+                    setParent(parent) {
+                        instanceStore.update({ parent });
+                    },
+                },
+            }), this.document);
         }
-    }
-    setCompound(compound, instance) {
-        const instanceRS = instance.__ngt_renderer__;
-        if (instanceRS && instanceRS[1 /* NgtRendererClassId.parent */]) {
-            const parentRS = instanceRS[1 /* NgtRendererClassId.parent */].__ngt_renderer__;
-            // NOTE: if instance is already compounded by its parent. skip
-            if (parentRS[0 /* NgtRendererClassId.type */] === 'compound' && parentRS[7 /* NgtRendererClassId.compounded */] === instance) {
-                return;
+        const [injectedArgs] = [this.getNgtArgs()?.value || []];
+        if (name === SPECIAL_DOM_TAG.NGT_PRIMITIVE) {
+            if (!injectedArgs[0])
+                throw new Error(`[NGT] ngt-primitive without args is invalid`);
+            const object = injectedArgs[0];
+            let localState = getLocalState(object);
+            if (!localState) {
+                // NOTE: if an object isn't already "prepared", we prepare it
+                prepare(object, { store: this.rootStore, primitive: true });
             }
+            return createNode('three', object, this.document);
         }
-        const rS = compound.__ngt_renderer__;
-        rS[7 /* NgtRendererClassId.compounded */] = instance;
-        for (const key of Object.keys(rS[9 /* NgtRendererClassId.attributes */])) {
-            this.applyAttribute(instance, key, rS[9 /* NgtRendererClassId.attributes */][key]);
-        }
-        for (const key of Object.keys(rS[10 /* NgtRendererClassId.properties */])) {
-            this.applyProperty(instance, key, rS[10 /* NgtRendererClassId.properties */][key]);
+        const threeName = kebabToPascal(name.startsWith('ngt-') ? name.slice(4) : name);
+        const threeTarget = this.catalogue[threeName];
+        // we have the THREE constructor here, handle it
+        if (threeTarget) {
+            const instance = prepare(new threeTarget(...injectedArgs), { store: this.rootStore });
+            const node = createNode('three', instance, this.document);
+            const localState = getLocalState(instance);
+            // auto-attach for geometry and material
+            if (is.geometry(instance)) {
+                localState.attach = ['geometry'];
+            }
+            else if (is.material(instance)) {
+                localState.attach = ['material'];
+            }
+            return node;
         }
-        this.executeOperation(compound);
+        return createNode('dom', element, this.document);
     }
-    queueOperation(node, op) {
-        node.__ngt_renderer__[8 /* NgtRendererClassId.queueOps */].add(op);
-    }
-    executeOperation(node, type = 'op') {
-        const rS = node.__ngt_renderer__;
-        // TODO: maybe an array with pop() would work better
-        if (rS[8 /* NgtRendererClassId.queueOps */]?.size) {
-            rS[8 /* NgtRendererClassId.queueOps */].forEach((op) => {
-                if (op[0 /* NgtQueueOpClassId.type */] === type) {
-                    op[1 /* NgtQueueOpClassId.op */]();
-                    rS[8 /* NgtRendererClassId.queueOps */].delete(op);
-                }
-            });
-        }
-    }
-    applyAttribute(node, name, value) {
-        const rS = node.__ngt_renderer__;
-        if (rS[4 /* NgtRendererClassId.destroyed */])
-            return;
-        if (name === SPECIAL_PROPERTIES.RENDER_PRIORITY) {
-            // NOTE: priority needs to be set as an attribute string so that they can be set as early as possible
-            // we convert that string to a number. if it's invalid, default 0
-            let priority = Number(value);
-            if (isNaN(priority)) {
-                priority = 0;
-                console.warn(`[NGT] "priority" is an invalid number, default to 0`);
-            }
-            const localState = getLocalState(node);
-            if (localState) {
-                localState.priority = priority;
-            }
-        }
-        if (name === SPECIAL_PROPERTIES.COMPOUND) {
-            // NOTE: we set the compound property on instance node now so we know that this instance is being compounded
-            rS[5 /* NgtRendererClassId.compound */] = [value === '' || value === 'first', {}];
-            return;
-        }
-        if (name === SPECIAL_PROPERTIES.ATTACH) {
-            // NOTE: handle attach as tring
-            const paths = value.split('.');
-            if (paths.length) {
-                const localState = getLocalState(node);
-                if (localState) {
-                    localState.attach = paths;
-                }
-            }
-            return;
-        }
-        if (name === SPECIAL_PROPERTIES.RAW_VALUE) {
-            // NOTE: coercion
-            let maybeCoerced = value;
-            if (maybeCoerced === '' || maybeCoerced === 'true' || maybeCoerced === 'false') {
-                maybeCoerced = maybeCoerced === 'true' || maybeCoerced === '';
-            }
-            else if (!isNaN(Number(maybeCoerced))) {
-                maybeCoerced = Number(maybeCoerced);
-            }
-            rS[11 /* NgtRendererClassId.rawValue */] = maybeCoerced;
-            return;
-        }
-        applyProps(node, { [name]: value });
-        this.updateNativeProps(node, name, value);
-    }
-    applyProperty(node, name, value) {
-        const rS = node.__ngt_renderer__;
-        if (rS[4 /* NgtRendererClassId.destroyed */])
-            return;
-        // [ref]
-        if (name === SPECIAL_PROPERTIES.REF && is.ref(value)) {
-            rS[12 /* NgtRendererClassId.ref */] = value;
-            value.nativeElement = node;
-            return;
-        }
-        const localState = getLocalState(node);
-        const parent = localState?.instanceStore.get('parent') || rS[1 /* NgtRendererClassId.parent */];
-        // [rawValue]
-        if (localState?.isRaw && name === SPECIAL_PROPERTIES.RAW_VALUE) {
-            rS[11 /* NgtRendererClassId.rawValue */] = value;
-            if (parent)
-                attachThreeChild(parent, node);
-            return;
-        }
-        // [attach]
-        if (name === SPECIAL_PROPERTIES.ATTACH) {
-            if (localState)
-                localState.attach = Array.isArray(value) ? value.map((v) => v.toString()) : value;
-            if (parent)
-                attachThreeChild(parent, node);
-            return;
-        }
-        const compound = rS[5 /* NgtRendererClassId.compound */];
-        if (compound?.[1 /* NgtCompoundClassId.props */] &&
-            name in compound[1 /* NgtCompoundClassId.props */] &&
-            !compound[0 /* NgtCompoundClassId.applyFirst */]) {
-            value = compound[1 /* NgtCompoundClassId.props */][name];
-        }
-        applyProps(node, { [name]: value });
-        this.updateNativeProps(node, name, value);
-    }
-    applyParameters(node, parameters) {
-        const rS = node.__ngt_renderer__;
-        if (rS[4 /* NgtRendererClassId.destroyed */])
-            return;
-        applyProps(node, parameters);
-        this.updateNativeProps(node, 'parameters', parameters);
-    }
-    get rootScene() {
-        return this.rootState.store.get('scene');
-    }
-    destroy(node, parent) {
-        const rS = node.__ngt_renderer__;
-        if (!rS || rS[4 /* NgtRendererClassId.destroyed */])
-            return;
-        if (rS[0 /* NgtRendererClassId.type */] === 'three') {
-            rS[5 /* NgtRendererClassId.compound */] = undefined;
-            rS[6 /* NgtRendererClassId.compoundParent */] = undefined;
-            const localState = getLocalState(node);
-            if (localState?.instanceStore) {
-                localState.instanceStore.get('objects').forEach((obj) => this.destroy(obj, parent));
-                localState.instanceStore.get('nonObjects').forEach((obj) => this.destroy(obj, parent));
-            }
-            if (localState?.afterUpdate)
-                localState.afterUpdate.complete();
-            if (localState?.afterAttach)
-                localState.afterAttach.complete();
-            delete localState['objects'];
-            delete localState['nonObjects'];
-            delete localState['parent'];
-            delete localState['nativeProps'];
-            delete localState['add'];
-            delete localState['remove'];
-            delete localState['afterUpdate'];
-            delete localState['afterAttach'];
-            delete localState['store'];
-            delete localState['handlers'];
-            if (!localState?.primitive) {
-                delete node['__ngt__'];
-            }
-        }
-        if (rS[0 /* NgtRendererClassId.type */] === 'comment') {
-            rS[14 /* NgtRendererClassId.injectorFactory */] = null;
-            delete node[SPECIAL_INTERNAL_ADD_COMMENT];
-            if (!this.removeCommentNode(node, this.argsCommentNodes)) {
-                this.removeCommentNode(node, this.parentCommentNodes);
-            }
-        }
-        if (rS[0 /* NgtRendererClassId.type */] === 'portal') {
-            rS[14 /* NgtRendererClassId.injectorFactory */] = null;
-            this.removeCommentNode(node, this.portalCommentsNodes);
-        }
-        if (rS[0 /* NgtRendererClassId.type */] === 'compound') {
-            rS[7 /* NgtRendererClassId.compounded */] = undefined;
-            rS[9 /* NgtRendererClassId.attributes */] = null;
-            rS[10 /* NgtRendererClassId.properties */] = null;
-            this.executeOperation(node, 'cleanUp');
-            rS[8 /* NgtRendererClassId.queueOps */].clear();
-            rS[8 /* NgtRendererClassId.queueOps */] = null;
-        }
-        if (rS[12 /* NgtRendererClassId.ref */]) {
-            // nullify ref
-            // but we do it later so that it doesn't hinder render
-            // TODO: will this cause memory leak?
-            requestAnimationFrame(() => {
-                rS[12 /* NgtRendererClassId.ref */].nativeElement = null;
-                rS[12 /* NgtRendererClassId.ref */] = undefined;
-            });
-        }
-        // nullify parent
-        rS[1 /* NgtRendererClassId.parent */] = null;
-        for (const renderChild of rS[3 /* NgtRendererClassId.children */] || []) {
-            if (renderChild.__ngt_renderer__?.[0 /* NgtRendererClassId.type */] === 'three' && parent) {
-                if (parent.__ngt_renderer__?.[0 /* NgtRendererClassId.type */] === 'three') {
-                    removeThreeChild(parent, renderChild, true);
-                    continue;
-                }
-                const closestInstance = this.getClosestParentWithInstance(parent);
-                if (closestInstance) {
-                    removeThreeChild(closestInstance, renderChild, true);
-                }
-            }
-            this.destroy(renderChild, parent);
-        }
-        rS[3 /* NgtRendererClassId.children */] = [];
-        rS[4 /* NgtRendererClassId.destroyed */] = true;
-        if (parent) {
-            this.removeChild(parent, node);
-        }
-    }
-    removeCommentNode(node, nodes) {
-        const index = nodes.findIndex((comment) => comment === node);
-        if (index > -1) {
-            nodes.splice(index, 1);
-            return true;
-        }
-        return false;
-    }
-    updateNativeProps(node, key, value) {
-        const localState = getLocalState(node);
-        localState?.setNativeProps(key, value);
-    }
-    firstNonInjectedDirective(listProperty, dir) {
-        let directive;
-        const destroyed = [];
-        let i = this[listProperty].length - 1;
-        while (i >= 0) {
-            const comment = this[listProperty][i];
-            if (comment.__ngt_renderer__[4 /* NgtRendererClassId.destroyed */]) {
-                destroyed.push(i);
-                i--;
-                continue;
-            }
-            const injector = comment.__ngt_renderer__[14 /* NgtRendererClassId.injectorFactory */]();
-            if (!injector) {
-                i--;
-                continue;
-            }
-            const instance = injector.get(dir, null);
-            if (instance && instance.validate()) {
-                directive = instance;
-                break;
-            }
-            i--;
-        }
-        destroyed.forEach((index) => {
-            this[listProperty].splice(index, 1);
-        });
-        return directive;
-    }
-    tryGetPortalStore() {
-        let store;
-        const destroyed = [];
-        // we only care about the portal states because NgtStore only differs per Portal
-        let i = this.portalCommentsNodes.length - 1;
-        while (i >= 0) {
-            // loop through the portal state backwards to find the closest NgtStore
-            const portal = this.portalCommentsNodes[i];
-            if (portal.__ngt_renderer__[4 /* NgtRendererClassId.destroyed */]) {
-                destroyed.push(i);
-                i--;
-                continue;
-            }
-            const injector = portal.__ngt_renderer__[14 /* NgtRendererClassId.injectorFactory */]();
-            if (!injector) {
-                i--;
-                continue;
-            }
-            const instance = injector.get(NGT_STORE, null);
-            // only the instance with previousRoot should pass
-            if (instance && instance.get('previousRoot')) {
-                store = instance;
-                break;
-            }
-            i--;
-        }
-        destroyed.forEach((index) => {
-            this.portalCommentsNodes.splice(index, 1);
-        });
-        return store || this.rootState.store;
-    }
-}
-
-class NgtRendererFactory {
-    constructor() {
-        this.delegateRendererFactory = inject(RendererFactory2, { skipSelf: true });
-        this.catalogue = injectNgtCatalogue();
-        this.rendererMap = new Map();
-        this.routedSet = new Set();
-        // NOTE: all Renderer instances under the same NgtCanvas share the same Store
-        this.rendererStore = new NgtRendererStore({
-            store: injectNgtStore(),
-            compoundPrefixes: inject(NGT_COMPOUND_PREFIXES),
-            document: inject(DOCUMENT),
-        });
-    }
-    createRenderer(hostElement, type) {
-        const delegateRenderer = this.delegateRendererFactory.createRenderer(hostElement, type);
-        if (!type)
-            return delegateRenderer;
-        // NOTE: might need to revisit this
-        if (type['type'][HTML]) {
-            this.rendererMap.set(type.id, delegateRenderer);
-            return delegateRenderer;
-        }
-        if (type['type'][ROUTED_SCENE]) {
-            this.routedSet.add(type.id);
-        }
-        let renderer = this.rendererMap.get(type.id);
-        if (!renderer) {
-            this.rendererMap.set(type.id, (renderer = new NgtRenderer(delegateRenderer, this.rendererStore, this.catalogue, 
-            // setting root scene if there's no routed scene OR this component is the routed Scene
-            !hostElement && (this.routedSet.size === 0 || this.routedSet.has(type.id)))));
-        }
-        return renderer;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtRendererFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtRendererFactory }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtRendererFactory, decorators: [{
-            type: Injectable
-        }] });
-class NgtRenderer {
-    constructor(delegate, store, catalogue, isRoot = true) {
-        this.delegate = delegate;
-        this.store = store;
-        this.catalogue = catalogue;
-        this.isRoot = isRoot;
-        this.createText = this.delegate.createText.bind(this.delegate);
-        this.destroy = this.delegate.destroy.bind(this.delegate);
-        this.destroyNode = null;
-        this.selectRootElement = this.delegate.selectRootElement.bind(this.delegate);
-        this.nextSibling = this.delegate.nextSibling.bind(this.delegate);
-        this.addClass = this.delegate.addClass.bind(this.delegate);
-        this.removeClass = this.delegate.removeClass.bind(this.delegate);
-        this.setStyle = this.delegate.setStyle.bind(this.delegate);
-        this.removeStyle = this.delegate.removeStyle.bind(this.delegate);
-        this.setValue = this.delegate.setValue.bind(this.delegate);
-    }
-    createElement(name, namespace) {
-        const element = this.delegate.createElement(name, namespace);
-        // on first pass, we return the Root Scene as the root node
-        if (this.isRoot) {
-            this.isRoot = false;
-            const node = this.store.createNode('three', this.store.rootScene);
-            node.__ngt_renderer__[14 /* NgtRendererClassId.injectorFactory */] = () => getDebugNode(element)?.injector;
-            return node;
-        }
-        if (this.store.isCompound(name)) {
-            return this.store.createNode('compound', element);
-        }
-        if (name === SPECIAL_DOM_TAG.NGT_PORTAL) {
-            return this.store.createNode('portal', element);
-        }
-        if (name === SPECIAL_DOM_TAG.NGT_VALUE) {
-            const instanceStore = signalStore({
-                nativeProps: {},
-                parent: null,
-                objects: [],
-                nonObjects: [],
-            });
-            return this.store.createNode('three', Object.assign({ __ngt_renderer__: { rawValue: undefined } }, 
-            // NOTE: we assign this manually to a raw value node
-            // because we say it is a 'three' node but we're not using prepare()
-            {
-                __ngt__: {
-                    isRaw: true,
-                    instanceStore,
-                    setNativeProps(key, value) {
-                        instanceStore.update((prev) => ({ nativeProps: { ...prev.nativeProps, [key]: value } }));
-                    },
-                    setParent(parent) {
-                        instanceStore.update({ parent });
-                    },
-                },
-            }));
-        }
-        const [injectedArgs, injectedParent, store] = this.store.getCreationState();
-        let parent = injectedParent;
-        if (typeof injectedParent === 'string') {
-            parent = store
-                .get('scene')
-                .getObjectByName(injectedParent);
-        }
-        if (name === SPECIAL_DOM_TAG.NGT_PRIMITIVE) {
-            if (!injectedArgs[0])
-                throw new Error(`[NGT] ngt-primitive without args is invalid`);
-            const object = injectedArgs[0];
-            let localState = getLocalState(object);
-            if (!localState) {
-                // NOTE: if an object isn't already "prepared", we prepare it
-                localState = getLocalState(prepare(object, { store, args: injectedArgs, primitive: true }));
-            }
-            if (!localState.store)
-                localState.store = store;
-            const node = this.store.createNode('three', object);
-            if (parent) {
-                node.__ngt_renderer__[2 /* NgtRendererClassId.injectedParent */] = parent;
-            }
-            return node;
-        }
-        const threeName = kebabToPascal(name.startsWith('ngt') ? name.slice(4) : name);
-        const threeTarget = this.catalogue[threeName];
-        // we have the THREE constructor here, handle it
-        if (threeTarget) {
-            const instance = prepare(new threeTarget(...injectedArgs), { store, args: injectedArgs });
-            const node = this.store.createNode('three', instance);
-            const localState = getLocalState(instance);
-            // auto-attach for geometry and material
-            if (is.geometry(instance)) {
-                localState.attach = ['geometry'];
-            }
-            else if (is.material(instance)) {
-                localState.attach = ['material'];
+    createComment(value) {
+        const comment = this.delegate.createComment(value);
+        // 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
+        comment[SPECIAL_INTERNAL_ADD_COMMENT] = (node) => {
+            if (node === 'args') {
+                this.argsCommentNodes.push(comment);
             }
-            if (parent) {
-                node.__ngt_renderer__[2 /* NgtRendererClassId.injectedParent */] = parent;
+            else if (typeof node === 'object') {
+                this.portalCommentsNodes.push(node);
             }
-            return node;
-        }
-        return this.store.createNode('dom', element);
-    }
-    createComment(value) {
-        return this.store.createNode('comment', this.delegate.createComment(value));
+        };
+        return createNode('comment', comment, this.document);
     }
     appendChild(parent, newChild) {
         const pRS = parent.__ngt_renderer__;
         const cRS = newChild.__ngt_renderer__;
         if (pRS[0 /* NgtRendererClassId.type */] === 'dom' &&
             (newChild instanceof Text || cRS[0 /* NgtRendererClassId.type */] === 'dom')) {
-            this.store.addChild(parent, newChild);
+            addChild(parent, newChild);
             this.delegate.appendChild(parent, newChild);
             if (cRS) {
-                this.store.setParent(newChild, parent);
+                setParent(newChild, parent);
                 if (this.shouldFindGrandparentInstance(pRS, cRS, newChild)) {
                     // we'll try to get the grandparent instance here so that we can run appendChild with both instances
-                    const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
+                    const closestGrandparentInstance = getClosestParentWithInstance(parent);
                     if (closestGrandparentInstance)
                         this.appendChild(closestGrandparentInstance, newChild);
                 }
@@ -2334,48 +1904,26 @@ class NgtRenderer {
             return;
         }
         if (cRS?.[0 /* NgtRendererClassId.type */] === 'comment') {
-            this.store.setParent(newChild, parent);
+            setParent(newChild, parent);
             return;
         }
-        if (cRS?.[2 /* NgtRendererClassId.injectedParent */]) {
-            if (is.ref(cRS[2 /* NgtRendererClassId.injectedParent */])) {
-                const injector = cRS[14 /* NgtRendererClassId.injectorFactory */]()?.get(Injector, null);
-                if (!injector) {
-                    console.warn(`[NGT] NgtRenderer is attempting to start an effect for injectedParent but no Injector is found.`);
-                    return;
-                }
-                const watcher = effect(() => {
-                    const injectedParent = cRS[2 /* NgtRendererClassId.injectedParent */]
-                        .nativeElement;
-                    if (injectedParent && injectedParent !== parent) {
-                        this.appendChild(injectedParent, newChild);
-                        // only run this effect once
-                        // as soon as we re-run appendChild with the injectedParent, we stop the effect
-                        watcher.destroy();
-                    }
-                }, { injector, manualCleanup: true });
-                return;
-            }
-            else if (parent !== cRS[2 /* NgtRendererClassId.injectedParent */]) {
-                this.appendChild(cRS[2 /* NgtRendererClassId.injectedParent */], newChild);
-                return;
-            }
-        }
-        this.store.setParent(newChild, parent);
-        this.store.addChild(parent, newChild);
+        setParent(newChild, parent);
+        addChild(parent, newChild);
         // if new child is a portal
         if (cRS?.[0 /* NgtRendererClassId.type */] === 'portal') {
-            this.store.processPortalContainer(newChild);
-            if (cRS[13 /* NgtRendererClassId.portalContainer */]) {
-                this.appendChild(parent, cRS[13 /* NgtRendererClassId.portalContainer */]);
+            if (!cRS[5 /* NgtRendererClassId.portalContainer */])
+                this.processPortalContainer(newChild);
+            if (cRS[5 /* NgtRendererClassId.portalContainer */]) {
+                this.appendChild(parent, cRS[5 /* NgtRendererClassId.portalContainer */]);
             }
             return;
         }
         // if parent is a portal
         if (pRS[0 /* NgtRendererClassId.type */] === 'portal') {
-            this.store.processPortalContainer(parent);
-            if (pRS[13 /* NgtRendererClassId.portalContainer */]) {
-                this.appendChild(pRS[13 /* NgtRendererClassId.portalContainer */], newChild);
+            if (!pRS[5 /* NgtRendererClassId.portalContainer */])
+                this.processPortalContainer(parent);
+            if (pRS[5 /* NgtRendererClassId.portalContainer */]) {
+                this.appendChild(pRS[5 /* NgtRendererClassId.portalContainer */], newChild);
             }
             return;
         }
@@ -2389,43 +1937,17 @@ class NgtRenderer {
                 return;
             // attach THREE child
             attachThreeChild(parent, newChild);
-            // here, we handle the special case of if the parent has a compoundParent, which means this child is part of a compound parent template
-            if (!cRS[5 /* NgtRendererClassId.compound */])
-                return;
-            const closestGrandparentWithCompound = this.store.getClosestParentWithCompound(parent);
-            if (!closestGrandparentWithCompound)
-                return;
-            this.appendChild(closestGrandparentWithCompound, newChild);
             return;
         }
         // if only the parent is the THREE instance
         if (pRS[0 /* NgtRendererClassId.type */] === 'three') {
-            for (const renderChild of cRS?.[3 /* NgtRendererClassId.children */] || []) {
+            for (const renderChild of cRS?.[2 /* NgtRendererClassId.children */] || []) {
                 this.appendChild(parent, renderChild);
             }
         }
-        // if parent is a compound
-        if (pRS[0 /* NgtRendererClassId.type */] === 'compound') {
-            // if compound doesn't have a THREE instance set yet
-            if (!pRS[7 /* NgtRendererClassId.compounded */] && cRS[0 /* NgtRendererClassId.type */] === 'three') {
-                // if child is indeed an ngtCompound
-                if (cRS[5 /* NgtRendererClassId.compound */])
-                    this.store.setCompound(parent, newChild);
-                // if not, we track the parent (that is supposedly the compound component) on this three instance
-                else if (!cRS[6 /* NgtRendererClassId.compoundParent */])
-                    cRS[6 /* NgtRendererClassId.compoundParent */] = parent;
-            }
-            // reset the compound if it's changed
-            if (pRS[7 /* NgtRendererClassId.compounded */] &&
-                cRS[0 /* NgtRendererClassId.type */] === 'three' &&
-                cRS[5 /* NgtRendererClassId.compound */] &&
-                pRS[7 /* NgtRendererClassId.compounded */] !== newChild) {
-                this.store.setCompound(parent, newChild);
-            }
-        }
         if (this.shouldFindGrandparentInstance(pRS, cRS, newChild)) {
             // we'll try to get the grandparent instance here so that we can run appendChild with both instances
-            const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
+            const closestGrandparentInstance = getClosestParentWithInstance(parent);
             if (closestGrandparentInstance)
                 this.appendChild(closestGrandparentInstance, newChild);
             return;
@@ -2443,42 +1965,32 @@ class NgtRenderer {
             parent instanceof Element &&
             (oldChild instanceof Element || oldChild instanceof Text || oldChild instanceof Comment)) {
             this.delegate.removeChild(parent, oldChild);
-            this.store.destroy(oldChild, parent);
+            this.destroyInternal(oldChild, parent);
             return;
         }
         if (cRS[0 /* NgtRendererClassId.type */] === 'dom' && (!pRS || pRS[0 /* NgtRendererClassId.type */] === 'dom')) {
             this.delegate.removeChild(parent, oldChild);
-            this.store.destroy(oldChild, parent);
+            this.destroyInternal(oldChild, parent);
             return;
         }
         if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
             removeThreeChild(parent, oldChild, true);
-            this.store.destroy(oldChild, parent);
+            this.destroyInternal(oldChild, parent);
             return;
         }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'compound') {
-            if (pRS[7 /* NgtRendererClassId.compounded */]) {
-                this.removeChild(pRS[7 /* NgtRendererClassId.compounded */], oldChild, isHostElement);
-                return;
-            }
-            if (pRS[1 /* NgtRendererClassId.parent */]) {
-                this.removeChild(pRS[1 /* NgtRendererClassId.parent */], oldChild, isHostElement);
-                return;
-            }
-        }
         if (pRS[0 /* NgtRendererClassId.type */] === 'portal' &&
-            pRS[13 /* NgtRendererClassId.portalContainer */]?.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
-            this.removeChild(pRS[13 /* NgtRendererClassId.portalContainer */], oldChild, isHostElement);
+            pRS[5 /* NgtRendererClassId.portalContainer */]?.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+            this.removeChild(pRS[5 /* NgtRendererClassId.portalContainer */], oldChild, isHostElement);
             return;
         }
         if (pRS[0 /* NgtRendererClassId.type */] === 'three') {
-            this.store.destroy(oldChild, parent);
+            this.destroyInternal(oldChild, parent);
             return;
         }
-        const closestGrandparentInstance = this.store.getClosestParentWithInstance(parent);
+        const closestGrandparentInstance = getClosestParentWithInstance(parent);
         if (closestGrandparentInstance)
             this.removeChild(closestGrandparentInstance, oldChild, isHostElement);
-        this.store.destroy(oldChild, closestGrandparentInstance);
+        this.destroyInternal(oldChild, closestGrandparentInstance);
     }
     parentNode(node) {
         const rS = node.__ngt_renderer__;
@@ -2488,17 +2000,42 @@ class NgtRenderer {
     }
     setAttributeInternal(el, name, value, namespace) {
         const rS = el.__ngt_renderer__;
-        if (rS[0 /* NgtRendererClassId.type */] === 'compound') {
-            // we don't have the compound instance yet
-            rS[9 /* NgtRendererClassId.attributes */][name] = value;
-            if (!rS[7 /* NgtRendererClassId.compounded */]) {
-                this.store.queueOperation(el, ['op', () => this.setAttribute(el, name, value, namespace)]);
-                return false;
-            }
-            return this.setAttributeInternal(rS[7 /* NgtRendererClassId.compounded */], name, value, namespace);
-        }
+        if (rS[3 /* NgtRendererClassId.destroyed */])
+            return false;
         if (rS[0 /* NgtRendererClassId.type */] === 'three') {
-            this.store.applyAttribute(el, name, value);
+            if (name === SPECIAL_PROPERTIES.RENDER_PRIORITY) {
+                // NOTE: priority needs to be set as an attribute string so that they can be set as early as possible
+                // we convert that string to a number. if it's invalid, default 0
+                let priority = Number(value);
+                if (isNaN(priority)) {
+                    priority = 0;
+                    console.warn(`[NGT] "priority" is an invalid number, default to 0`);
+                }
+                const localState = getLocalState(el);
+                if (localState)
+                    localState.priority = priority;
+            }
+            else if (name === SPECIAL_PROPERTIES.ATTACH) {
+                // NOTE: handle attach as string
+                const paths = value.split('.');
+                if (paths.length) {
+                    const localState = getLocalState(el);
+                    if (localState)
+                        localState.attach = paths;
+                }
+            }
+            else if (name === SPECIAL_PROPERTIES.RAW_VALUE) {
+                // NOTE: coercion
+                let maybeCoerced = value;
+                if (maybeCoerced === '' || maybeCoerced === 'true' || maybeCoerced === 'false') {
+                    maybeCoerced = maybeCoerced === 'true' || maybeCoerced === '';
+                }
+                else if (!isNaN(Number(maybeCoerced))) {
+                    maybeCoerced = Number(maybeCoerced);
+                }
+                rS[4 /* NgtRendererClassId.rawValue */] = maybeCoerced;
+            }
+            applyProps(el, { [name]: value });
             return false;
         }
         return true;
@@ -2516,28 +2053,36 @@ class NgtRenderer {
         }
     }
     setProperty(el, name, value) {
-        // TODO: should we support ref value
         const rS = el.__ngt_renderer__;
-        if (rS[0 /* NgtRendererClassId.type */] === 'compound') {
-            // we don't have the compound instance yet
-            rS[10 /* NgtRendererClassId.properties */][name] = value;
-            if (!rS[7 /* NgtRendererClassId.compounded */]) {
-                this.store.queueOperation(el, ['op', () => this.setProperty(el, name, value)]);
-                return;
-            }
-            if (rS[7 /* NgtRendererClassId.compounded */].__ngt_renderer__[5 /* NgtRendererClassId.compound */]) {
-                Object.assign(rS[7 /* NgtRendererClassId.compounded */].__ngt_renderer__[5 /* NgtRendererClassId.compound */][1 /* NgtCompoundClassId.props */], { [name]: value });
-            }
-            this.setProperty(rS[7 /* NgtRendererClassId.compounded */], name, value);
+        if (rS[3 /* NgtRendererClassId.destroyed */])
             return;
-        }
         if (rS[0 /* NgtRendererClassId.type */] === 'three') {
             if (name === SPECIAL_PROPERTIES.PARAMETERS) {
-                this.store.applyParameters(el, value);
+                applyProps(el, value);
+                return;
             }
-            else {
-                this.store.applyProperty(el, name, value);
+            const localState = getLocalState(el);
+            const parent = localState?.instanceStore.get('parent') || rS[1 /* NgtRendererClassId.parent */];
+            // [rawValue]
+            if (localState?.isRaw && name === SPECIAL_PROPERTIES.RAW_VALUE) {
+                rS[4 /* NgtRendererClassId.rawValue */] = value;
+                if (parent)
+                    attachThreeChild(parent, el);
+                return;
             }
+            // [attach]
+            if (name === SPECIAL_PROPERTIES.ATTACH) {
+                if (localState)
+                    localState.attach = Array.isArray(value)
+                        ? value.map((v) => v.toString())
+                        : typeof value === 'function'
+                            ? value
+                            : [value];
+                if (parent)
+                    attachThreeChild(parent, el);
+                return;
+            }
+            applyProps(el, { [name]: value });
             return;
         }
         return this.delegate.setProperty(el, name, value);
@@ -2546,25 +2091,17 @@ class NgtRenderer {
         const rS = target.__ngt_renderer__;
         // if the target doesn't have __ngt_renderer__, we delegate
         // if target is DOM node, we delegate
-        if (!rS || this.store.isDOM(target)) {
+        if (!rS || isDOM(target)) {
             return this.delegate.listen(target, eventName, callback);
         }
-        if (rS[0 /* NgtRendererClassId.type */] === 'three' ||
-            (rS[0 /* NgtRendererClassId.type */] === 'compound' && rS[7 /* NgtRendererClassId.compounded */])) {
-            const instance = rS[7 /* NgtRendererClassId.compounded */] || target;
+        if (rS[0 /* NgtRendererClassId.type */] === 'three') {
+            const instance = target;
             const localState = getLocalState(instance);
             const priority = localState?.priority ?? 0;
             return processThreeEvent(instance, priority, eventName, callback);
         }
-        if (rS[0 /* NgtRendererClassId.type */] === 'compound' && !rS[7 /* NgtRendererClassId.compounded */]) {
-            this.store.queueOperation(target, [
-                'op',
-                () => this.store.queueOperation(target, ['cleanUp', this.listen(target, eventName, callback)]),
-            ]);
-            return () => { };
-        }
         // @ts-expect-error - we know that target is not DOM node
-        if (target === this.store.rootScene) {
+        if (target === this.rootStore.snapshot.scene) {
             let [domTarget, event] = eventName.split(':');
             if (event == null) {
                 event = domTarget;
@@ -2577,43 +2114,170 @@ class NgtRenderer {
         }
         return () => { };
     }
+    destroyInternal(node, parent) {
+        const rS = node.__ngt_renderer__;
+        if (!rS || rS[3 /* NgtRendererClassId.destroyed */])
+            return;
+        if (rS[0 /* NgtRendererClassId.type */] === 'three') {
+            const localState = getLocalState(node);
+            if (localState?.instanceStore) {
+                localState.instanceStore.get('objects').forEach((obj) => this.destroyInternal(obj, parent));
+                localState.instanceStore.get('nonObjects').forEach((obj) => this.destroyInternal(obj, parent));
+            }
+            if (localState?.onUpdate)
+                delete localState.onUpdate;
+            if (localState?.onAttach)
+                delete localState.onAttach;
+            delete localState['objects'];
+            delete localState['nonObjects'];
+            delete localState['parent'];
+            delete localState['add'];
+            delete localState['remove'];
+            delete localState['store'];
+            delete localState['handlers'];
+            if (!localState?.primitive) {
+                delete node['__ngt__'];
+            }
+        }
+        if (rS[0 /* NgtRendererClassId.type */] === 'comment') {
+            rS[6 /* NgtRendererClassId.injectorFactory */] = null;
+            delete node[SPECIAL_INTERNAL_ADD_COMMENT];
+            this.removeCommentNode(node, this.argsCommentNodes);
+        }
+        if (rS[0 /* NgtRendererClassId.type */] === 'portal') {
+            rS[6 /* NgtRendererClassId.injectorFactory */] = null;
+            this.removeCommentNode(node, this.portalCommentsNodes);
+        }
+        // nullify parent
+        rS[1 /* NgtRendererClassId.parent */] = null;
+        for (const renderChild of rS[2 /* NgtRendererClassId.children */] || []) {
+            if (renderChild.__ngt_renderer__?.[0 /* NgtRendererClassId.type */] === 'three' && parent) {
+                if (parent.__ngt_renderer__?.[0 /* NgtRendererClassId.type */] === 'three') {
+                    removeThreeChild(parent, renderChild, true);
+                    continue;
+                }
+                const closestInstance = getClosestParentWithInstance(parent);
+                if (closestInstance) {
+                    removeThreeChild(closestInstance, renderChild, true);
+                }
+            }
+            this.destroyInternal(renderChild, parent);
+        }
+        rS[2 /* NgtRendererClassId.children */] = [];
+        rS[3 /* NgtRendererClassId.destroyed */] = true;
+        if (parent) {
+            removeChild(parent, node);
+        }
+    }
+    removeCommentNode(node, nodes) {
+        const index = nodes.findIndex((comment) => comment === node);
+        if (index > -1) {
+            nodes.splice(index, 1);
+        }
+    }
+    processPortalContainer(portal) {
+        const injector = portal.__ngt_renderer__[6 /* NgtRendererClassId.injectorFactory */]?.();
+        if (!injector)
+            return;
+        const portalStore = injector.get(NGT_STORE, null);
+        if (!portalStore)
+            return;
+        const portalContainer = portalStore.get('scene');
+        if (!portalContainer)
+            return;
+        const localState = getLocalState(portalContainer);
+        if (localState) {
+            localState.store = portalStore;
+        }
+        portal.__ngt_renderer__[5 /* NgtRendererClassId.portalContainer */] = createNode('three', portalContainer, this.document);
+    }
     shouldFindGrandparentInstance(pRS, cRS, child) {
         const pType = pRS[0 /* NgtRendererClassId.type */];
         const cType = cRS[0 /* NgtRendererClassId.type */];
-        const isParentCompounded = pRS[7 /* NgtRendererClassId.compounded */];
-        const isChildCompounded = cRS[7 /* NgtRendererClassId.compounded */];
         const cLS = getLocalState(child);
         // if child is three but haven't been attached to a parent yet
         const isDanglingThreeChild = cType === 'three' && !cLS?.instanceStore?.get('parent');
         // or both parent and child are DOM elements
         // or they are compound AND haven't had a THREE instance yet
-        const isParentStillDOM = pType === 'dom' || (pType === 'compound' && !isParentCompounded);
-        const isChildStillDOM = cType === 'dom' || (cType === 'compound' && !isChildCompounded);
-        // and the child is a compounded compound
-        const isCompoundChildCompounded = cType === 'compound' && !!isChildCompounded;
-        return (isDanglingThreeChild || (isParentStillDOM && isChildStillDOM) || (isParentStillDOM && isCompoundChildCompounded));
+        const isParentStillDOM = pType === 'dom';
+        const isChildStillDOM = cType === 'dom';
+        return isDanglingThreeChild || (isParentStillDOM && isChildStillDOM) || isParentStillDOM;
+    }
+    getNgtArgs() {
+        let directive;
+        const destroyed = [];
+        let i = this.argsCommentNodes.length - 1;
+        while (i >= 0) {
+            const comment = this.argsCommentNodes[i];
+            if (comment.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */]) {
+                destroyed.push(i);
+                i--;
+                continue;
+            }
+            const injector = comment.__ngt_renderer__[6 /* NgtRendererClassId.injectorFactory */]();
+            if (!injector) {
+                i--;
+                continue;
+            }
+            const instance = injector.get(NgtArgs, null);
+            if (instance && instance.validate()) {
+                directive = instance;
+                break;
+            }
+            i--;
+        }
+        destroyed.forEach((index) => {
+            this.argsCommentNodes.splice(index, 1);
+        });
+        return directive;
+    }
+    tryGetPortalStore() {
+        let store;
+        const destroyed = [];
+        // we only care about the portal states because NgtStore only differs per Portal
+        let i = this.portalCommentsNodes.length - 1;
+        while (i >= 0) {
+            // loop through the portal state backwards to find the closest NgtStore
+            const portal = this.portalCommentsNodes[i];
+            if (portal.__ngt_renderer__[3 /* NgtRendererClassId.destroyed */]) {
+                destroyed.push(i);
+                i--;
+                continue;
+            }
+            const injector = portal.__ngt_renderer__[6 /* NgtRendererClassId.injectorFactory */]();
+            if (!injector) {
+                i--;
+                continue;
+            }
+            const instance = injector.get(NGT_STORE, null);
+            // only the instance with previousRoot should pass
+            if (instance && instance.get('previousRoot')) {
+                store = instance;
+                break;
+            }
+            i--;
+        }
+        destroyed.forEach((index) => {
+            this.portalCommentsNodes.splice(index, 1);
+        });
+        return store || this.rootStore;
     }
     get data() {
         return this.delegate.data;
     }
 }
-function provideNgtRenderer(store, compoundPrefixes) {
-    if (!compoundPrefixes.includes('ngts'))
-        compoundPrefixes.push('ngts');
-    if (!compoundPrefixes.includes('ngtp'))
-        compoundPrefixes.push('ngtp');
+function provideNgtRenderer(store) {
     const providers = [
         NgtRendererFactory,
         { provide: RendererFactory2, useExisting: NgtRendererFactory },
-        { provide: NGT_COMPOUND_PREFIXES, useValue: compoundPrefixes },
-        provideNgtStore(store),
+        provideStore(() => store),
     ];
     return makeEnvironmentProviders(providers);
 }
 
 class NgtCanvas {
     constructor() {
-        this.store = injectNgtStore();
+        this.store = injectStore();
         this.initRoot = injectCanvasRootInitializer();
         this.autoEffect = injectAutoEffect();
         this.host = inject(ElementRef);
@@ -2622,8 +2286,6 @@ class NgtCanvas {
         this.environmentInjector = inject(EnvironmentInjector);
         this.injector = inject(Injector);
         this.sceneGraph = input.required();
-        this.compoundPrefixes = input([]);
-        this.sceneGraphInputs = input({});
         this.gl = input();
         this.size = input();
         this.shadows = input(false, {
@@ -2658,7 +2320,6 @@ class NgtCanvas {
             this.zone.runOutsideAngular(() => {
                 this.configurator = this.initRoot(this.glCanvas().nativeElement);
                 this.noZoneResizeEffect();
-                this.noZoneSceneGraphInputsEffect();
             });
         });
         inject(DestroyRef).onDestroy(() => {
@@ -2734,38 +2395,29 @@ class NgtCanvas {
             this.store.get('events').connect?.(untracked(this.glCanvas).nativeElement);
         }
         untracked(() => {
-            this.glEnvironmentInjector = createEnvironmentInjector([provideNgtRenderer(this.store, untracked(this.compoundPrefixes))], this.environmentInjector);
+            this.glEnvironmentInjector = createEnvironmentInjector([provideNgtRenderer(this.store)], this.environmentInjector);
             this.glRef = this.viewContainerRef.createComponent(untracked(this.sceneGraph), {
                 environmentInjector: this.glEnvironmentInjector,
                 injector: this.injector,
             });
             this.glRef.changeDetectorRef.detectChanges();
-            this.setSceneGraphInputs(this.sceneGraphInputs());
         });
     }
-    noZoneSceneGraphInputsEffect() {
-        this.autoEffect(() => {
-            this.setSceneGraphInputs(this.sceneGraphInputs());
-        });
-    }
-    setSceneGraphInputs(sceneGraphInputs) {
-        if (this.glRef) {
-            for (const [key, value] of Object.entries(sceneGraphInputs)) {
-                this.glRef.setInput(key, value);
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: { classPropertyName: "sceneGraph", publicName: "sceneGraph", isSignal: true, isRequired: true, transformFunction: null }, compoundPrefixes: { classPropertyName: "compoundPrefixes", publicName: "compoundPrefixes", isSignal: true, isRequired: false, transformFunction: null }, sceneGraphInputs: { classPropertyName: "sceneGraphInputs", publicName: "sceneGraphInputs", isSignal: true, isRequired: false, transformFunction: null }, gl: { classPropertyName: "gl", publicName: "gl", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadows: { classPropertyName: "shadows", publicName: "shadows", isSignal: true, isRequired: false, transformFunction: null }, legacy: { classPropertyName: "legacy", publicName: "legacy", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, orthographic: { classPropertyName: "orthographic", publicName: "orthographic", isSignal: true, isRequired: false, transformFunction: null }, frameloop: { classPropertyName: "frameloop", publicName: "frameloop", isSignal: true, isRequired: false, transformFunction: null }, performance: { classPropertyName: "performance", publicName: "performance", isSignal: true, isRequired: false, transformFunction: null }, dpr: { classPropertyName: "dpr", publicName: "dpr", isSignal: true, isRequired: false, transformFunction: null }, raycaster: { classPropertyName: "raycaster", publicName: "raycaster", isSignal: true, isRequired: false, transformFunction: null }, scene: { classPropertyName: "scene", publicName: "scene", isSignal: true, isRequired: false, transformFunction: null }, camera: { classPropertyName: "camera", publicName: "camera", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, eventSource: { classPropertyName: "eventSource", publicName: "eventSource", isSignal: true, isRequired: false, transformFunction: null }, eventPrefix: { classPropertyName: "eventPrefix", publicName: "eventPrefix", isSignal: true, isRequired: false, transformFunction: null }, lookAt: { classPropertyName: "lookAt", publicName: "lookAt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "style.pointerEvents": "hbPointerEvents()" }, styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [
-            provideResizeOptions({ emitInZone: false, emitInitialResult: true, debounce: 250 }),
-            provideNgtStore(),
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.6", type: NgtCanvas, isStandalone: true, selector: "ngt-canvas", inputs: { sceneGraph: { classPropertyName: "sceneGraph", publicName: "sceneGraph", isSignal: true, isRequired: true, transformFunction: null }, gl: { classPropertyName: "gl", publicName: "gl", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadows: { classPropertyName: "shadows", publicName: "shadows", isSignal: true, isRequired: false, transformFunction: null }, legacy: { classPropertyName: "legacy", publicName: "legacy", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, orthographic: { classPropertyName: "orthographic", publicName: "orthographic", isSignal: true, isRequired: false, transformFunction: null }, frameloop: { classPropertyName: "frameloop", publicName: "frameloop", isSignal: true, isRequired: false, transformFunction: null }, performance: { classPropertyName: "performance", publicName: "performance", isSignal: true, isRequired: false, transformFunction: null }, dpr: { classPropertyName: "dpr", publicName: "dpr", isSignal: true, isRequired: false, transformFunction: null }, raycaster: { classPropertyName: "raycaster", publicName: "raycaster", isSignal: true, isRequired: false, transformFunction: null }, scene: { classPropertyName: "scene", publicName: "scene", isSignal: true, isRequired: false, transformFunction: null }, camera: { classPropertyName: "camera", publicName: "camera", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, eventSource: { classPropertyName: "eventSource", publicName: "eventSource", isSignal: true, isRequired: false, transformFunction: null }, eventPrefix: { classPropertyName: "eventPrefix", publicName: "eventPrefix", isSignal: true, isRequired: false, transformFunction: null }, lookAt: { classPropertyName: "lookAt", publicName: "lookAt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", pointerMissed: "pointerMissed" }, host: { properties: { "style.pointerEvents": "hbPointerEvents()" }, styleAttribute: "display: block;position: relative;width: 100%;height: 100%;overflow: hidden;" }, providers: [
+            provideResizeOptions({
+                emitInZone: false,
+                emitInitialResult: true,
+                debounce: { scroll: 50, resize: 0 },
+            }),
+            provideStore(),
         ], viewQueries: [{ propertyName: "glCanvas", first: true, predicate: ["glCanvas"], descendants: true, isSignal: true }, { propertyName: "glCanvasViewContainerRef", first: true, predicate: ["glCanvas"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
 		<div (ngxResize)="resizeResult.set($event)" style="height: 100%; width: 100%;">
 			<canvas #glCanvas style="display: block;"></canvas>
 		</div>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgxResize, selector: "[ngxResize]", inputs: ["ngxResizeOptions"], outputs: ["ngxResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtCanvas, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtCanvas, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-canvas',
@@ -2777,8 +2429,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
 	`,
                     imports: [NgxResize],
                     providers: [
-                        provideResizeOptions({ emitInZone: false, emitInitialResult: true, debounce: 250 }),
-                        provideNgtStore(),
+                        provideResizeOptions({
+                            emitInZone: false,
+                            emitInitialResult: true,
+                            debounce: { scroll: 50, resize: 0 },
+                        }),
+                        provideStore(),
                     ],
                     host: {
                         style: 'display: block;position: relative;width: 100%;height: 100%;overflow: hidden;',
@@ -2870,12 +2526,13 @@ const injectLoader = _injectLoader;
 
 function injectBeforeRender(cb, { priority = 0, injector } = {}) {
     return assertInjector(injectBeforeRender, injector, () => {
-        const store = injectNgtStore();
+        const store = injectStore();
         const sub = store.get('internal').subscribe(cb, priority, store);
         inject(DestroyRef).onDestroy(() => void sub());
         return sub;
     });
 }
+// TODO (chau): clean this up
 function injectNextBeforeRender(cb, { priority = 0, injector } = {}) {
     return assertInjector(injectNextBeforeRender, injector, () => {
         const assertedInjector = inject(Injector);
@@ -2887,30 +2544,19 @@ function injectNextBeforeRender(cb, { priority = 0, injector } = {}) {
     });
 }
 
-const privateKeys = [
-    'get',
-    'set',
-    'select',
-    'setSize',
-    'setDpr',
-    'setFrameloop',
-    'events',
-    'invalidate',
-    'advance',
-    'size',
-    'viewport',
-];
 class NgtPortalBeforeRender {
     constructor() {
-        this.portalStore = injectNgtStore();
-        this.injector = inject(Injector);
+        this.portalStore = injectStore();
         this.renderPriority = input(1);
         this.parentScene = input.required();
         this.parentCamera = input.required();
-        afterNextRender(() => {
+        injectAutoEffect()((injector) => {
+            // track state
+            this.portalStore.state();
+            const priority = this.renderPriority();
             let oldClear;
-            injectBeforeRender(() => {
-                const { gl, scene, camera } = this.portalStore.get();
+            return injectBeforeRender(() => {
+                const { gl, scene, camera } = this.portalStore.snapshot;
                 oldClear = gl.autoClear;
                 if (this.renderPriority() === 1) {
                     // clear scene and render with default
@@ -2923,19 +2569,19 @@ class NgtPortalBeforeRender {
                 gl.render(scene, camera);
                 // restore
                 gl.autoClear = oldClear;
-            }, { priority: this.renderPriority(), injector: this.injector });
+            }, { priority, injector });
         });
     }
     onPointerOver() {
         /* noop */
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", type: NgtPortalBeforeRender, isStandalone: true, selector: "ngt-portal-before-render", inputs: { renderPriority: { classPropertyName: "renderPriority", publicName: "renderPriority", isSignal: true, isRequired: false, transformFunction: null }, parentScene: { classPropertyName: "parentScene", publicName: "parentScene", isSignal: true, isRequired: true, transformFunction: null }, parentCamera: { classPropertyName: "parentCamera", publicName: "parentCamera", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtPortalBeforeRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: NgtPortalBeforeRender, isStandalone: true, selector: "ngt-portal-before-render", inputs: { renderPriority: { classPropertyName: "renderPriority", publicName: "renderPriority", isSignal: true, isRequired: false, transformFunction: null }, parentScene: { classPropertyName: "parentScene", publicName: "parentScene", isSignal: true, isRequired: true, transformFunction: null }, parentCamera: { classPropertyName: "parentCamera", publicName: "parentCamera", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
 		<ngt-group (pointerover)="onPointerOver()" attach="none" />
 	`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtPortalBeforeRender, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal-before-render',
@@ -2948,194 +2594,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 class NgtPortalContent {
-    constructor(vcr, parentVcr) {
-        const commentNode = vcr.element.nativeElement;
+    constructor() {
+        const { element: comment } = inject(ViewContainerRef);
+        const { element: parentComment } = inject(ViewContainerRef, { skipSelf: true });
+        const commentNode = comment.nativeElement;
         if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
-            commentNode[SPECIAL_INTERNAL_ADD_COMMENT](parentVcr.element.nativeElement);
+            commentNode[SPECIAL_INTERNAL_ADD_COMMENT](parentComment.nativeElement);
             delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtPortalContent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ViewContainerRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
+    static ngTemplateContextGuard(_, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtPortalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtPortalContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtPortalContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[portalContent]', standalone: true }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ViewContainerRef, decorators: [{
-                    type: SkipSelf
-                }] }] });
+        }], ctorParameters: () => [] });
+// Keys that shouldn't be copied between stores
+const privateKeys = [
+    'setSize',
+    'setFrameloop',
+    'setDpr',
+    'events',
+    'setEvents',
+    'invalidate',
+    'advance',
+    'size',
+    'viewport',
+];
 class NgtPortal {
     constructor() {
-        this.container = input(prepare(new Scene()));
-        this.camera = input();
-        this.state = input();
+        this.container = input.required();
+        this.state = input({});
+        /**
+         * @decsription turn this on to enable "HUD" like rendering
+         */
         this.autoRender = input(false);
         this.autoRenderPriority = input(1);
-        this.portalContentTemplate = contentChild.required(NgtPortalContent, { read: TemplateRef });
-        this.portalContentAnchor = viewChild.required('portalContentAnchor', { read: ViewContainerRef });
-        this.destroyRef = inject(DestroyRef);
-        this.autoEffect = injectAutoEffect();
-        this.parentStore = injectNgtStore({ skipSelf: true });
-        this.portalStore = injectNgtStore({ self: true });
-        this.portalRendered = signal(false);
-        this.renderAutoBeforeRender = computed(() => this.portalRendered() && this.autoRender());
-        this.parentScene = this.parentStore.get('scene');
-        this.parentCamera = this.parentStore.get('camera');
+        this.portalContent = contentChild.required(NgtPortalContent, { read: TemplateRef });
+        this.portalAnchor = viewChild.required('anchor', { read: ViewContainerRef });
+        this.injector = inject(Injector);
+        this.portalStore = injectStore({ self: true });
+        this.parentStore = injectStore({ skipSelf: true });
+        this.parentScene = this.parentStore.select('scene');
+        this.parentCamera = this.parentStore.select('camera');
         this.raycaster = new Raycaster();
         this.pointer = new Vector2();
+        this.portalRendered = signal(false);
+        this.renderAutoBeforeRender = computed(() => this.portalRendered() && this.autoRender());
+        const autoEffect = injectAutoEffect();
+        const parentState = this.parentStore.select();
         afterNextRender(() => {
-            const parentState = this.parentStore.snapshot;
-            let [container, state, autoRender, autoRenderPriority] = [
-                this.container(),
-                this.state(),
-                this.autoRender(),
-                this.autoRenderPriority(),
-            ];
-            let stateFromInput = state;
-            if (!stateFromInput && autoRender) {
-                stateFromInput = { events: { priority: autoRenderPriority + 1 } };
-            }
-            const { events = {}, size = {}, ...rest } = stateFromInput || {};
+            const previousState = this.parentStore.snapshot;
+            const { events = {}, size = {}, ...rest } = this.state();
+            let container = this.container();
             if (!is.instance(container)) {
-                container = prepare(container);
+                container = prepare(container, { store: this.portalStore });
             }
             const localState = getLocalState(container);
             if (localState && !localState.store) {
                 localState.store = this.portalStore;
             }
             this.portalStore.update({
-                ...parentState,
+                ...previousState,
                 scene: container,
                 raycaster: this.raycaster,
                 pointer: this.pointer,
+                events: { ...previousState.events, ...events },
+                size: { ...previousState.size, ...size },
                 previousRoot: this.parentStore,
-                events: { ...parentState.events, ...events },
-                size: { ...parentState.size, ...size },
                 ...rest,
                 setEvents: (events) => this.portalStore.update((state) => ({ ...state, events: { ...state.events, ...events } })),
             });
-            this.autoEffect(() => {
-                const previous = this.parentStore.state();
-                this.portalStore.update((state) => this.inject(previous, state));
-            });
-            untracked(() => {
-                const portalView = this.portalContentAnchor().createEmbeddedView(this.portalContentTemplate());
-                portalView.detectChanges();
-                this.destroyRef.onDestroy(() => {
-                    portalView.destroy();
+            autoEffect(() => {
+                const state = this.state();
+                const _parentState = parentState();
+                this.portalStore.update((prev) => this.inject(_parentState, prev, state, untracked(this.container)));
+                untracked(() => {
+                    if (this.portalView) {
+                        this.portalView.detectChanges();
+                        return;
+                    }
+                    this.portalView = this.portalAnchor().createEmbeddedView(this.portalContent(), { container: this.container(), injector: this.injector }, { injector: this.injector });
+                    this.portalView.detectChanges();
+                    this.portalRendered.set(true);
                 });
             });
-            this.portalRendered.set(true);
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.portalView?.destroy();
         });
     }
-    inject(rootState, injectState) {
-        const intersect = { ...rootState };
-        Object.keys(intersect).forEach((key) => {
+    inject(parentState, portalState, injectedState, container) {
+        const { events = {}, size, ...rest } = injectedState;
+        const intersect = { ...parentState }; // all prev state props
+        Object.keys(parentState).forEach((key) => {
             if (privateKeys.includes(key) ||
-                rootState[key] !== injectState[key]) {
+                (parentState[key] !== portalState[key] &&
+                    portalState[key])) {
                 delete intersect[key];
             }
         });
-        const container = untracked(this.container);
-        const { size, events, ...restInputsState } = untracked(this.state) || {};
         let viewport = undefined;
-        if (injectState && size) {
-            const camera = injectState.camera;
-            viewport = rootState.viewport.getCurrentViewport(camera, new Vector3(), size);
-            if (camera !== rootState.camera)
+        if (portalState && size) {
+            const camera = portalState.camera;
+            // Calculate the override viewport, if present
+            viewport = parentState.viewport.getCurrentViewport(camera, new Vector3(), size);
+            // Update the portal camera, if it differs from the previous layer
+            if (camera !== parentState.camera) {
                 updateCamera(camera, size);
+            }
         }
         return {
             ...intersect,
             scene: container,
-            previousRoot: this.parentStore,
-            events: { ...rootState.events, ...(injectState?.events || {}), ...events },
-            size: { ...rootState.size, ...size },
-            viewport: { ...rootState.viewport, ...(viewport || {}) },
-            ...restInputsState,
+            raycaster: this.raycaster,
+            pointer: this.pointer,
+            events: { ...parentState.events, ...(portalState.events || {}), ...(events || {}) },
+            size: { ...parentState.size, ...(size || {}) },
+            viewport: { ...parentState.viewport, ...(viewport || {}) },
+            ...rest,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: NgtPortal, isStandalone: true, selector: "ngt-portal", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, camera: { classPropertyName: "camera", publicName: "camera", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, autoRender: { classPropertyName: "autoRender", publicName: "autoRender", isSignal: true, isRequired: false, transformFunction: null }, autoRenderPriority: { classPropertyName: "autoRenderPriority", publicName: "autoRenderPriority", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideNgtStore(signalStore({}))], queries: [{ propertyName: "portalContentTemplate", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "portalContentAnchor", first: true, predicate: ["portalContentAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
-		<ng-container #portalContentAnchor>
-			@if (renderAutoBeforeRender()) {
-				<ngt-portal-before-render
-					[renderPriority]="autoRenderPriority()"
-					[parentScene]="parentScene"
-					[parentCamera]="parentCamera"
-				/>
-			}
-		</ng-container>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: NgtPortal, 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 }, autoRender: { classPropertyName: "autoRender", publicName: "autoRender", isSignal: true, isRequired: false, transformFunction: null }, autoRenderPriority: { classPropertyName: "autoRenderPriority", publicName: "autoRenderPriority", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideStore(() => signalStore({}))], queries: [{ propertyName: "portalContent", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "portalAnchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+		<ng-container #anchor />
+
+		@if (renderAutoBeforeRender()) {
+			<ngt-portal-before-render
+				[renderPriority]="autoRenderPriority()"
+				[parentScene]="parentScene()"
+				[parentCamera]="parentCamera()"
+			/>
+		}
 	`, isInline: true, dependencies: [{ kind: "component", type: NgtPortalBeforeRender, selector: "ngt-portal-before-render", inputs: ["renderPriority", "parentScene", "parentCamera"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtPortal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal',
                     standalone: true,
                     template: `
-		<ng-container #portalContentAnchor>
-			@if (renderAutoBeforeRender()) {
-				<ngt-portal-before-render
-					[renderPriority]="autoRenderPriority()"
-					[parentScene]="parentScene"
-					[parentCamera]="parentCamera"
-				/>
-			}
-		</ng-container>
+		<ng-container #anchor />
+
+		@if (renderAutoBeforeRender()) {
+			<ngt-portal-before-render
+				[renderPriority]="autoRenderPriority()"
+				[parentScene]="parentScene()"
+				[parentCamera]="parentCamera()"
+			/>
+		}
 	`,
                     imports: [NgtPortalBeforeRender],
-                    providers: [provideNgtStore(signalStore({}))],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [provideStore(() => signalStore({}))],
                 }]
         }], ctorParameters: () => [] });
 
-function injectNgtRef(initial = null, injector) {
-    if (initial && Reflect.get(initial, '__ngtType')) {
-        return initial;
-    }
-    return assertInjector(injectNgtRef, injector, () => {
-        const ref = is.ref(initial) ? initial : new ElementRef(initial);
-        const refSignal = signal(ref.nativeElement, { equal: Object.is });
-        const readonlyRef = refSignal.asReadonly();
-        const computedCached = new Map();
-        inject(DestroyRef).onDestroy(() => void computedCached.clear());
-        const children = (type = 'objects') => {
-            if (!computedCached.has(type)) {
-                computedCached.set(type, computed(() => {
-                    const instance = readonlyRef();
-                    if (!instance)
-                        return [];
-                    const localState = getLocalState(instance);
-                    if (!localState?.instanceStore)
-                        return [];
-                    if (type === 'objects')
-                        return localState.objects();
-                    if (type === 'nonObjects')
-                        return localState.nonObjects();
-                    return [...localState.objects(), ...localState.nonObjects()];
-                }));
-            }
-            return computedCached.get(type);
-        };
-        Object.defineProperties(ref, {
-            nativeElement: {
-                set: (newElement) => {
-                    untracked(() => {
-                        if (newElement !== readonlyRef()) {
-                            refSignal.set(newElement);
-                        }
-                    });
-                },
-                get: readonlyRef,
-            },
-            children: { value: children },
-            __ngtType: { value: 'ngtRef' },
-        });
-        return ref;
-    });
-}
-
 var _a;
 class NgtRoutedScene {
     static { _a = ROUTED_SCENE; }
@@ -3145,12 +2764,12 @@ class NgtRoutedScene {
             .pipe(filter((event) => event instanceof ActivationEnd), takeUntilDestroyed())
             .subscribe(cdr.detectChanges.bind(cdr));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtRoutedScene, deps: [{ token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `
 		<router-outlet />
 	`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtRoutedScene, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -3173,63 +2792,75 @@ function createApiToken(forwardedObject) {
     return [injectFn, () => provideFn()];
 }
 
-function exclude(options, keysToExclude) {
+function omit(objFn, keysToOmit) {
     return computed(() => {
-        const opts = options();
-        return Object.keys(opts).reduce((acc, key) => {
-            const optKey = key;
-            if (!keysToExclude.includes(optKey)) {
-                acc[optKey] = opts[optKey];
-            }
-            return acc;
-        }, {});
+        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;
     });
 }
-function pick(options, keys) {
-    if (Array.isArray(keys)) {
+function pick(objFn, keyOrKeys) {
+    if (Array.isArray(keyOrKeys)) {
         return computed(() => {
-            const opts = options();
-            return keys.reduce((acc, key) => {
-                // @ts-expect-error - fix this later
-                acc[key] = opts[key];
-                return acc;
-            }, {});
+            const obj = objFn();
+            const result = {};
+            for (const key of keyOrKeys) {
+                if (!(key in obj))
+                    continue;
+                Object.assign(result, { [key]: obj[key] });
+            }
+            return result;
         });
     }
-    return computed(() => options()[keys]);
+    return computed(() => objFn()[keyOrKeys]);
 }
-function merge(options, toMerge, mode = 'override') {
-    return computed(() => {
-        const opts = options();
-        return mode === 'override' ? { ...opts, ...toMerge } : { ...toMerge, ...opts };
-    });
+function merge(objFn, toMerge, mode = 'override') {
+    if (mode === 'override')
+        return computed(() => ({ ...objFn(), ...toMerge }));
+    return computed(() => ({ ...toMerge, ...objFn() }));
 }
-function vector2(options, key) {
+function vector2(options, key, keepUndefined = false) {
     return computed(() => {
         const value = options()[key];
+        if (keepUndefined && value == undefined)
+            return undefined;
         if (typeof value === 'number')
             return new Vector2(value, value);
         else if (value)
             return new Vector2(...value);
         else
             return new Vector2();
-    });
+    }, { equal: (a, b) => !!a && !!b && a.equals(b) });
 }
-function vector3(options, key) {
+function vector3(options, key, keepUndefined = false) {
     return computed(() => {
         const value = options()[key];
+        if (keepUndefined && value == undefined)
+            return undefined;
         if (typeof value === 'number')
             return new Vector3(value, value, value);
         else if (value)
             return new Vector3(...value);
         else
             return new Vector3();
-    });
+    }, { equal: (a, b) => !!a && !!b && a.equals(b) });
+}
+
+function resolveRef(ref) {
+    if (is.ref(ref)) {
+        return ref.nativeElement;
+    }
+    return ref;
 }
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { HTML, NGT_STORE, NgtArgs, NgtCanvas, NgtPortal, NgtPortalContent, NgtRenderer, NgtRendererFactory, NgtRoutedScene, ROUTED_SCENE, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createApiToken, createAttachFunction, exclude, extend, getLocalState, injectBeforeRender, injectLoader, injectNextBeforeRender, injectNgtRef, injectNgtStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, pick, prepare, provideNgtRenderer, provideNgtStore, signalStore, updateCamera, vector2, vector3 };
+export { HTML, NGT_STORE, NgtArgs, NgtCanvas, NgtPortal, NgtPortalContent, NgtRenderer, NgtRendererFactory, NgtRoutedScene, ROUTED_SCENE, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createApiToken, createAttachFunction, extend, getLocalState, injectBeforeRender, injectLoader, injectNextBeforeRender, injectStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, omit, pick, prepare, provideNgtRenderer, provideStore, resolveRef, signalStore, updateCamera, vector2, vector3 };
 //# sourceMappingURL=angular-three.mjs.map