angular-three 4.0.0-next.9 → 4.0.0-next.90

package/fesm2022/angular-three.mjs

@@ -19,7 +19,7 @@ const NGT_GET_NODE_ATTRIBUTE_FLAG = '__ngt_get_node_attribute__';
 const NGT_DOM_PARENT_FLAG = '__ngt_dom_parent__';
 const NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG = '__ngt_delegate_renderer_destroy_node_patched__';
 const NGT_HTML_FLAG = '__ngt_html__';
-const THREE_NATIVE_EVENTS = ['added', 'removed', 'childadded', 'childremoved', 'disposed'];
+const THREE_NATIVE_EVENTS = ['added', 'removed', 'childadded', 'childremoved', 'change', 'disposed'];
 
 const is = {
     obj: (a) => a === Object(a) && !Array.isArray(a) && typeof a !== 'function',
@@ -34,6 +34,7 @@ const is = {
     instance: (a) => !!a && !!a['__ngt__'],
     object3D: (a) => !!a && a.isObject3D,
     three: (a, isKey) => !!a && a[isKey],
+    colorRepresentation: (a) => a != null && (typeof a === 'string' || typeof a === 'number' || is.three(a, 'isColor')),
     colorSpaceExist: (object) => 'colorSpace' in object || 'outputColorSpace' in object,
     equ(a, b, { arrays = 'shallow', objects = 'reference', strict = true } = {}) {
         // Wrong type or one of the two undefined, doesn't match
@@ -82,9 +83,9 @@ class NgtCommonDirective {
         this.injected = false;
         this.injectedValue = null;
         effect(() => {
-            const value = this.linkedValue();
             if (this.shouldSkipRender())
                 return;
+            const value = this.linkedValue();
             if (is.equ(value, this.injectedValue)) {
                 // we have the same value as before, no need to update
                 return;
@@ -114,10 +115,10 @@ class NgtCommonDirective {
         this.view = this.vcr.createEmbeddedView(this.template);
         this.view.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: NgtCommonDirective, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: NgtCommonDirective, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtCommonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtCommonDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
@@ -141,10 +142,10 @@ class NgtArgs extends NgtCommonDirective {
     validate() {
         return !this.injected && !!this.injectedValue?.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtArgs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: { classPropertyName: "args", publicName: "args", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtArgs, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: NgtArgs, isStandalone: true, selector: "ng-template[args]", inputs: { args: { classPropertyName: "args", publicName: "args", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtArgs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtArgs, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[args]' }]
         }], ctorParameters: () => [] });
@@ -314,16 +315,16 @@ function makeDpr(dpr, window) {
     return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 function makeRendererInstance(glOptions, canvas) {
-    const customRenderer = (typeof glOptions === 'function' ? glOptions(canvas) : glOptions);
-    if (is.renderer(customRenderer))
-        return customRenderer;
-    return new THREE.WebGLRenderer({
+    const defaultOptions = {
         powerPreference: 'high-performance',
         canvas,
         antialias: true,
         alpha: true,
-        ...glOptions,
-    });
+    };
+    const customRenderer = (typeof glOptions === 'function' ? glOptions(defaultOptions) : glOptions);
+    if (is.renderer(customRenderer))
+        return customRenderer;
+    return new THREE.WebGLRenderer({ ...defaultOptions, ...glOptions });
 }
 function makeCameraInstance(isOrthographic, size) {
     if (isOrthographic)
@@ -331,7 +332,7 @@ function makeCameraInstance(isOrthographic, size) {
     return new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
 }
 function makeObjectGraph(object) {
-    const data = { nodes: {}, materials: {} };
+    const data = { nodes: {}, materials: {}, meshes: {} };
     if (object) {
         object.traverse((child) => {
             if (child.name)
@@ -340,6 +341,8 @@ function makeObjectGraph(object) {
                 data.materials[child.material.name] = child
                     .material;
             }
+            if (is.three(child, 'isMesh') && !data.meshes[child.name])
+                data.meshes[child.name] = child;
         });
     }
     return data;
@@ -483,7 +486,9 @@ function storeFactory() {
                     clearTimeout(performanceTimeout);
                 // Set lower bound performance
                 if (state.performance.current !== state.performance.min)
-                    store.update((state) => ({ performance: { ...state.performance, current: state.performance.min } }));
+                    store.update((state) => ({
+                        performance: { ...state.performance, current: state.performance.min },
+                    }));
                 // Go back to upper bound performance after a while unless something regresses meanwhile
                 performanceTimeout = setTimeout(() => store.update((state) => ({
                     performance: { ...state.performance, current: store.snapshot.performance.max },
@@ -510,7 +515,15 @@ function storeFactory() {
                     tempTarget.set(...target);
                 const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
                 if (is.three(camera, 'isOrthographicCamera')) {
-                    return { width: width / camera.zoom, height: height / camera.zoom, top, left, factor: 1, distance, aspect };
+                    return {
+                        width: width / camera.zoom,
+                        height: height / camera.zoom,
+                        top,
+                        left,
+                        factor: 1,
+                        distance,
+                        aspect,
+                    };
                 }
                 const fov = (camera.fov * Math.PI) / 180; // convert vertical fov to radians
                 const h = 2 * Math.tan(fov / 2) * distance; // visible height
@@ -604,7 +617,9 @@ function storeFactory() {
             oldCamera = newCamera;
             updateCamera(newCamera, newSize);
             // Update viewport
-            store.update((state) => ({ viewport: { ...state.viewport, ...state.viewport.getCurrentViewport(newCamera) } }));
+            store.update((state) => ({
+                viewport: { ...state.viewport, ...state.viewport.getCurrentViewport(newCamera) },
+            }));
         }
     });
     return store;
@@ -614,6 +629,13 @@ function injectStore(options) {
     return inject(NGT_STORE, options);
 }
 
+function resolveRef(ref) {
+    if (is.ref(ref)) {
+        return ref.nativeElement;
+    }
+    return ref;
+}
+
 class NgtParent extends NgtCommonDirective {
     constructor() {
         super();
@@ -628,10 +650,7 @@ class NgtParent extends NgtCommonDirective {
             if (typeof rawParent === 'string') {
                 return scene.getObjectByName(rawParent);
             }
-            if ('nativeElement' in rawParent) {
-                return rawParent.nativeElement;
-            }
-            return rawParent;
+            return resolveRef(rawParent);
         });
         this.linkedValue = linkedSignal(this._parent);
         this.shouldSkipRender = computed(() => !this._parent());
@@ -652,10 +671,10 @@ class NgtParent extends NgtCommonDirective {
             commentNode[NGT_INTERNAL_SET_PARENT_COMMENT_FLAG](this.injectedValue);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtParent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtParent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtParent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtParent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[parent]' }]
         }], ctorParameters: () => [] });
@@ -721,7 +740,9 @@ function prepare(object, type, instanceState) {
                 notifyAncestors(instance.__ngt__.hierarchyStore.snapshot.parent, type);
             },
             remove(object, type) {
-                instance.__ngt__.hierarchyStore.update((prev) => ({ [type]: prev[type].filter((node) => node !== object) }));
+                instance.__ngt__.hierarchyStore.update((prev) => ({
+                    [type]: prev[type].filter((node) => node !== object),
+                }));
                 notifyAncestors(instance.__ngt__.hierarchyStore.snapshot.parent, type);
             },
             setParent(parent) {
@@ -754,7 +775,7 @@ function prepare(object, type, instanceState) {
             return () => {
                 const iS = getInstanceState(instance);
                 if (iS) {
-                    delete iS.handlers[eventName];
+                    iS.handlers && delete iS.handlers[eventName];
                     iS.eventCount -= 1;
                 }
             };
@@ -815,9 +836,9 @@ function notifyAncestors(instance, type) {
     notifyAncestors(parent, type);
 }
 
-class NgtSelection {
+class NgtSelectionApi {
     constructor() {
-        this.enabled = input(true, { alias: 'ngtSelection', transform: booleanAttribute });
+        this.enabled = input(true, { alias: 'selection', transform: booleanAttribute });
         this.source = signal([]);
         this.selected = this.source.asReadonly();
     }
@@ -826,20 +847,20 @@ class NgtSelection {
             return;
         this.source.update(...args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: NgtSelection, isStandalone: true, selector: "[ngtSelection]", inputs: { enabled: { classPropertyName: "enabled", publicName: "ngtSelection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtSelectionApi, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: NgtSelectionApi, isStandalone: true, selector: "[selection]", inputs: { enabled: { classPropertyName: "enabled", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtSelection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtSelectionApi, decorators: [{
             type: Directive,
-            args: [{ selector: '[ngtSelection]' }]
+            args: [{ selector: '[selection]' }]
         }] });
 class NgtSelect {
     constructor() {
-        this.enabled = input(false, { transform: booleanAttribute, alias: 'ngtSelect' });
+        this.enabled = input(false, { transform: booleanAttribute, alias: 'select' });
         const elementRef = inject(ElementRef);
-        const selection = inject(NgtSelection);
+        const selectionApi = inject(NgtSelectionApi);
         effect((onCleanup) => {
-            const selectionEnabled = selection.enabled();
+            const selectionEnabled = selectionApi.enabled();
             if (!selectionEnabled)
                 return;
             const enabled = this.enabled();
@@ -851,13 +872,13 @@ class NgtSelect {
             const localState = getInstanceState(host);
             if (!localState)
                 return;
-            // ngt-mesh[ngtSelect]
+            // ngt-mesh[select]
             if (host.type === 'Mesh') {
-                selection.update((prev) => [...prev, host]);
-                onCleanup(() => selection.update((prev) => prev.filter((el) => el !== host)));
+                selectionApi.update((prev) => [...prev, host]);
+                onCleanup(() => selectionApi.update((prev) => prev.filter((el) => el !== host)));
                 return;
             }
-            const [collection] = [untracked(selection.selected), localState.objects()];
+            const [collection] = [untracked(selectionApi.selected), localState.objects()];
             let changed = false;
             const current = [];
             host.traverse((child) => {
@@ -867,19 +888,20 @@ class NgtSelect {
             });
             if (!changed)
                 return;
-            selection.update((prev) => [...prev, ...current]);
+            selectionApi.update((prev) => [...prev, ...current]);
             onCleanup(() => {
-                selection.update((prev) => prev.filter((el) => !current.includes(el)));
+                selectionApi.update((prev) => prev.filter((el) => !current.includes(el)));
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: NgtSelect, isStandalone: true, selector: "ngt-group[ngtSelect], ngt-mesh[ngtSelect]", inputs: { enabled: { classPropertyName: "enabled", publicName: "ngtSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: NgtSelect, isStandalone: true, selector: "ngt-group[select], ngt-mesh[select]", inputs: { enabled: { classPropertyName: "enabled", publicName: "select", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtSelect, decorators: [{
             type: Directive,
-            args: [{ selector: 'ngt-group[ngtSelect], ngt-mesh[ngtSelect]' }]
+            args: [{ selector: 'ngt-group[select], ngt-mesh[select]' }]
         }], ctorParameters: () => [] });
+const NgtSelection = [NgtSelectionApi, NgtSelect];
 
 var _a;
 //
@@ -913,10 +935,10 @@ class NgtHTML {
             delete host.nativeElement[NGT_DOM_PARENT_FLAG];
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtHTML, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: NgtHTML, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtHTML, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: NgtHTML, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtHTML, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtHTML, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
@@ -1085,10 +1107,10 @@ class NgtHexify {
         const hex = component.toString(16);
         return hex.length === 1 ? '0' + hex : hex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtHexify, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: NgtHexify, isStandalone: true, name: "hexify" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtHexify, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: NgtHexify, isStandalone: true, name: "hexify" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtHexify, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtHexify, decorators: [{
             type: Pipe,
             args: [{ name: 'hexify', pure: true }]
         }] });
@@ -1181,7 +1203,7 @@ class NgtPortalAutoRender {
     constructor() {
         this.portalStore = injectStore({ host: true });
         this.parentStore = injectStore({ skipSelf: true });
-        this.portal = inject(NgtPortal, { host: true });
+        this.portal = inject(NgtPortalImpl, { host: true });
         this.renderPriority = input(1, { alias: 'autoRender', transform: (value) => numberAttribute(value, 1) });
         effect(() => {
             // this.portalStore.update((state) => ({ events: { ...state.events, priority: this.renderPriority() + 1 } }));
@@ -1194,7 +1216,10 @@ class NgtPortalAutoRender {
             const [renderPriority, { internal }] = [this.renderPriority(), this.portalStore()];
             let oldClean;
             const cleanup = internal.subscribe(({ gl, scene, camera }) => {
-                const [parentScene, parentCamera] = [this.parentStore.snapshot.scene, this.parentStore.snapshot.camera];
+                const [parentScene, parentCamera] = [
+                    this.parentStore.snapshot.scene,
+                    this.parentStore.snapshot.camera,
+                ];
                 oldClean = gl.autoClear;
                 if (renderPriority === 1) {
                     // clear scene and render with default
@@ -1211,10 +1236,10 @@ class NgtPortalAutoRender {
             onCleanup(() => cleanup());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtPortalAutoRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: NgtPortalAutoRender, isStandalone: true, selector: "ngt-portal[autoRender]", inputs: { renderPriority: { classPropertyName: "renderPriority", publicName: "autoRender", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtPortalAutoRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: NgtPortalAutoRender, isStandalone: true, selector: "ngt-portal[autoRender]", inputs: { renderPriority: { classPropertyName: "renderPriority", publicName: "autoRender", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtPortalAutoRender, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtPortalAutoRender, decorators: [{
             type: Directive,
             args: [{ selector: 'ngt-portal[autoRender]' }]
         }], ctorParameters: () => [] });
@@ -1236,10 +1261,10 @@ class NgtPortalContent {
             delete commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtPortalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtPortalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtPortalContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtPortalContent, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[portalContent]' }]
         }], ctorParameters: () => [] });
@@ -1273,7 +1298,7 @@ function mergeState(previousRoot, store, container, pointer, raycaster, events,
         setEvents: (events) => store.update((state) => ({ ...state, events: { ...state.events, ...events } })),
     };
 }
-class NgtPortal {
+class NgtPortalImpl {
     constructor() {
         this.container = input.required();
         this.state = input({});
@@ -1289,7 +1314,12 @@ class NgtPortal {
         this.portalRendered = this.portalContentRendered.asReadonly();
         extend({ Group });
         effect(() => {
-            let [container, anchor, content] = [this.container(), this.anchorRef(), this.contentRef(), this.previousStore()];
+            let [container, anchor, content] = [
+                this.container(),
+                this.anchorRef(),
+                this.contentRef(),
+                this.previousStore(),
+            ];
             const [size, events, restState] = [untracked(this.size), untracked(this.events), untracked(this.restState)];
             if (!is.instance(container)) {
                 container = prepare(container, 'ngt-portal', { store: this.portalStore });
@@ -1308,8 +1338,8 @@ class NgtPortal {
             this.portalContentRendered.set(true);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtPortal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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 } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtPortalImpl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: NgtPortalImpl, isStandalone: true, selector: "ngt-portal", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NGT_STORE,
                 useFactory: (previousStore) => {
@@ -1336,7 +1366,7 @@ class NgtPortal {
 		}
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtPortal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtPortalImpl, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-portal',
@@ -1371,7 +1401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     ],
                 }]
         }], ctorParameters: () => [] });
-const NgtPortalDeclarations = [NgtPortal, NgtPortalContent];
+const NgtPortal = [NgtPortalImpl, NgtPortalContent];
 
 /**
  * Release pointer captures.
@@ -1501,7 +1531,20 @@ function createEvents(store) {
         if (intersections.length) {
             const localState = { stopped: false };
             for (const hit of intersections) {
-                const { raycaster, pointer, camera, internal } = getInstanceState(hit.object)?.store?.snapshot || rootState;
+                let instanceState = getInstanceState(hit.object);
+                // If the object is not managed by NGT, it might be parented to an element which is.
+                // Traverse upwards until we find a managed parent and use its state instead.
+                if (!instanceState) {
+                    hit.object.traverseAncestors((ancestor) => {
+                        const parentInstanceState = getInstanceState(ancestor);
+                        if (parentInstanceState) {
+                            instanceState = parentInstanceState;
+                            return false;
+                        }
+                        return;
+                    });
+                }
+                const { raycaster, pointer, camera, internal } = instanceState?.store?.snapshot || rootState;
                 const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
                 const hasPointerCapture = (id) => internal.capturedMap.get(id)?.has(hit.eventObject) ?? false;
                 const setPointerCapture = (id) => {
@@ -1686,7 +1729,10 @@ function createEvents(store) {
         }*/
                 if (isPointerMove) {
                     // Move event ...
-                    if (handlers?.pointerover || handlers?.pointerenter || handlers?.pointerout || handlers?.pointerleave) {
+                    if (handlers?.pointerover ||
+                        handlers?.pointerenter ||
+                        handlers?.pointerout ||
+                        handlers?.pointerleave) {
                         // When enter or out is present take care of hover-state
                         const id = makeId(data);
                         const hoveredItem = internal.hovered.get(id);
@@ -1733,9 +1779,9 @@ function createEvents(store) {
 
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, props) {
-    const propsEntries = Object.entries(props);
     const changes = [];
-    for (const [propKey, propValue] of propsEntries) {
+    for (const propKey in props) {
+        const propValue = props[propKey];
         let key = propKey;
         if (is.colorSpaceExist(instance)) {
             if (propKey === 'encoding') {
@@ -1771,6 +1817,19 @@ function getMemoizedPrototype(root) {
     }
     return ctor;
 }
+function resolve(instance, key) {
+    let targetProp = instance[key];
+    if (!key.includes('.'))
+        return { root: instance, targetKey: key, targetProp };
+    // Resolve pierced target
+    const chain = key.split('.');
+    targetProp = chain.reduce((acc, part) => acc[part], instance);
+    const targetKey = chain.pop();
+    // Switch root if atomic
+    if (!targetProp?.set)
+        instance = chain.reduce((acc, part) => acc[part], instance);
+    return { root: instance, targetKey, targetProp };
+}
 // This function applies a set of changes to the instance
 function applyProps(instance, props) {
     // if props is empty
@@ -1800,45 +1859,45 @@ function applyProps(instance, props) {
         // 		value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
         // 	}
         // }
-        const currentInstance = instance;
-        const targetProp = currentInstance[key];
+        const { root, targetKey, targetProp } = resolve(instance, key);
+        // we have switched due to pierced props
+        if (root !== instance) {
+            return applyProps(root, { [targetKey]: value });
+        }
+        // Layers have no copy function, we must therefore copy the mask property
+        if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) {
+            targetProp.mask = value.mask;
+        }
+        else if (is.three(targetProp, 'isColor') && is.colorRepresentation(value)) {
+            targetProp.set(value);
+        }
         // Copy if properties match signatures
-        if (targetProp?.copy &&
+        else if (targetProp &&
+            typeof targetProp.set === 'function' &&
+            typeof targetProp.copy === 'function' &&
             value?.constructor &&
             targetProp.constructor === value.constructor) {
             // If both are geometries, we should assign the value directly instead of copying
             if (is.three(targetProp, 'isBufferGeometry') &&
                 is.three(value, 'isBufferGeometry')) {
-                Object.assign(currentInstance, { [key]: value });
+                Object.assign(root, { [targetKey]: value });
             }
             else {
-                // fetch the default state of the target
-                const ctor = getMemoizedPrototype(currentInstance);
-                // The target key was originally null or undefined, which indicates that the object which
-                // is now present was externally set by the user, we should therefore assign the value directly
-                if (ctor !== undefined && ctor[key] == null)
-                    Object.assign(currentInstance, { [key]: value });
-                // Otherwise copy is correct
-                else
-                    targetProp.copy(value);
+                targetProp.copy(value);
             }
         }
-        // Layers have no copy function, we must therefore copy the mask property
-        else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) {
-            targetProp.mask = value.mask;
-        }
         // Set array types
-        else if (targetProp?.set && Array.isArray(value)) {
-            if (targetProp.fromArray)
+        else if (targetProp && typeof targetProp.set === 'function' && Array.isArray(value)) {
+            if (typeof targetProp.fromArray === 'function')
                 targetProp.fromArray(value);
             else
                 targetProp.set(...value);
         }
         // Set literal types
-        else if (targetProp?.set && typeof value !== 'object') {
-            const isColor = targetProp?.isColor;
+        else if (targetProp && typeof targetProp.set === 'function' && typeof value !== 'object') {
+            const isColor = is.three(targetProp, 'isColor');
             // Allow setting array scalars
-            if (!isColor && targetProp.setScalar && typeof value === 'number')
+            if (!isColor && typeof targetProp.setScalar === 'function' && typeof value === 'number')
                 targetProp.setScalar(value);
             // Otherwise just set single value
             else
@@ -1846,22 +1905,22 @@ function applyProps(instance, props) {
         }
         // Else, just overwrite the value
         else {
-            Object.assign(currentInstance, { [key]: value });
+            Object.assign(root, { [targetKey]: value });
             // Auto-convert sRGB texture parameters for built-in materials
             // https://github.com/pmndrs/react-three-fiber/issues/344
             // https://github.com/mrdoob/three.js/pull/25857
             if (rootState &&
                 !rootState.linear &&
-                colorMaps.includes(key) &&
-                currentInstance[key]?.isTexture &&
+                colorMaps.includes(targetKey) &&
+                root[targetKey]?.isTexture &&
                 // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
-                currentInstance[key].format === THREE.RGBAFormat &&
-                currentInstance[key].type === THREE.UnsignedByteType) {
+                root[targetKey].format === THREE.RGBAFormat &&
+                root[targetKey].type === THREE.UnsignedByteType) {
                 // NOTE: this cannot be set from the renderer (e.g. sRGB source textures rendered to P3)
-                currentInstance[key].colorSpace = THREE.SRGBColorSpace;
+                root[targetKey].colorSpace = THREE.SRGBColorSpace;
             }
         }
-        checkUpdate(currentInstance[key]);
+        checkUpdate(root[targetKey]);
         checkUpdate(targetProp);
         invalidateInstance(instance);
     }
@@ -1987,7 +2046,10 @@ function propagateStoreRecursively(node, parentNode) {
         // Call addInteraction if it exists
         iS.addInteraction?.(pIS.store);
         // Collect all children (objects and nonObjects)
-        const children = [...(iS.objects ? untracked(iS.objects) : []), ...(iS.nonObjects ? untracked(iS.nonObjects) : [])];
+        const children = [
+            ...(iS.objects ? untracked(iS.objects) : []),
+            ...(iS.nonObjects ? untracked(iS.nonObjects) : []),
+        ];
         // Recursively reassign the store for each child
         for (const child of children) {
             propagateStoreRecursively(child, node);
@@ -2155,6 +2217,7 @@ function internalDestroyNode(node, removeChild) {
     rS[1 /* NgtRendererClassId.destroyed */] = true;
 }
 
+const NGT_RENDERER_OPTIONS = new InjectionToken('NGT_RENDERER_OPTIONS');
 class NgtRendererFactory2 {
     /**
      * NOTE: We use `useFactory` to instantiate `NgtRendererFactory2`
@@ -2163,6 +2226,7 @@ class NgtRendererFactory2 {
         this.delegateRendererFactory = delegateRendererFactory;
         this.catalogue = injectCatalogue();
         this.document = inject(DOCUMENT);
+        this.options = inject(NGT_RENDERER_OPTIONS, { optional: true }) || {};
         this.rendererMap = new Map();
     }
     createRenderer(hostElement, type) {
@@ -2194,24 +2258,27 @@ class NgtRendererFactory2 {
                         return;
                     internalDestroyNode(node, null);
                 };
-                Object.assign(delegateRenderer.destroyNode, { [NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG]: true });
+                Object.assign(delegateRenderer.destroyNode, {
+                    [NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG]: true,
+                });
             }
             return delegateRenderer;
         }
-        this.rendererMap.set(type.id, (renderer = new NgtRenderer2(delegateRenderer, this.catalogue, this.document)));
+        this.rendererMap.set(type.id, (renderer = new NgtRenderer2(delegateRenderer, this.catalogue, this.document, this.options)));
         return renderer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtRendererFactory2, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtRendererFactory2 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtRendererFactory2, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtRendererFactory2 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtRendererFactory2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtRendererFactory2, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
 class NgtRenderer2 {
-    constructor(delegateRenderer, catalogue, document, count = 1) {
+    constructor(delegateRenderer, catalogue, document, options, count = 1) {
         this.delegateRenderer = delegateRenderer;
         this.catalogue = catalogue;
         this.document = document;
+        this.options = options;
         this.count = count;
         this.argsInjectors = [];
         this.parentInjectors = [];
@@ -2226,6 +2293,9 @@ class NgtRenderer2 {
         this.selectRootElement = this.delegateRenderer.selectRootElement.bind(this.delegateRenderer);
         this.nextSibling = this.delegateRenderer.nextSibling.bind(this.delegateRenderer);
         this.setValue = this.delegateRenderer.setValue.bind(this.delegateRenderer);
+        if (!this.options.verbose) {
+            this.options.verbose = false;
+        }
     }
     get data() {
         return { ...this.delegateRenderer.data, __ngt_renderer__: true };
@@ -2258,10 +2328,9 @@ class NgtRenderer2 {
                 throw new Error(`[NGT] ngt-primitive without args is invalid`);
             const object = injectedArgs[0];
             let instanceState = getInstanceState(object);
-            if (!instanceState || instanceState.type === 'ngt-primitive') {
+            if (!instanceState || instanceState.type !== 'ngt-primitive') {
                 // if an object isn't already "prepared", we'll prepare it
                 prepare(object, 'ngt-primitive', instanceState);
-                instanceState = getInstanceState(object);
             }
             const primitiveRendererNode = createRendererNode('three', object, this.document);
             if (injectedParent) {
@@ -2330,11 +2399,12 @@ class NgtRenderer2 {
         const pRS = parent.__ngt_renderer__;
         const cRS = newChild.__ngt_renderer__;
         if (!pRS || !cRS) {
-            ngDevMode && console.warn('[NGT dev mode] One of parent or child is not a renderer node.', { parent, newChild });
+            this.options.verbose &&
+                console.warn('[NGT dev mode] One of parent or child is not a renderer node.', { parent, newChild });
             return delegatedFn();
         }
         if (cRS[0 /* NgtRendererClassId.type */] === 'comment') {
-            // if chid is a comment, we'll set the parent then bail.
+            // if child is a comment, we'll set the parent then bail.
             // comment usually means it's part of a templateRef ViewContainerRef or structural directive
             setRendererParentNode(newChild, parent);
             // if parent is not three, we'll delegate to the renderer
@@ -2358,6 +2428,8 @@ class NgtRenderer2 {
         if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
             // if platform has parent, delegate to that parent
             if (pRS[5 /* NgtRendererClassId.parent */]) {
+                // but track the child for this parent as well
+                addRendererChildNode(parent, newChild);
                 return this.appendChild(pRS[5 /* NgtRendererClassId.parent */], newChild);
             }
             // platform can also have normal parentNode
@@ -2399,7 +2471,10 @@ class NgtRenderer2 {
         // if both are comments and the reference child is NgtCanvasContent, we'll assign the same flag to the newChild
         // this means that the NgtCanvas component is embedding. This flag allows the Renderer to get the root scene
         // when it tries to attach the template under `ng-template[canvasContent]`
-        if (refChild && refChild[NGT_CANVAS_CONTENT_FLAG] && refChild instanceof Comment && newChild instanceof Comment) {
+        if (refChild &&
+            refChild[NGT_CANVAS_CONTENT_FLAG] &&
+            refChild instanceof Comment &&
+            newChild instanceof Comment) {
             Object.assign(newChild, { [NGT_CANVAS_CONTENT_FLAG]: refChild[NGT_CANVAS_CONTENT_FLAG] });
         }
         // if there is no parent, we delegate
@@ -2429,7 +2504,8 @@ class NgtRenderer2 {
                 // if the child is already destroyed, just skip
                 return;
             }
-            ngDevMode && console.warn('[NGT dev mode] parent is not found when remove child', { parent, oldChild });
+            this.options.verbose &&
+                console.warn('[NGT dev mode] parent is not found when remove child', { parent, oldChild });
             return;
         }
         const pRS = parent.__ngt_renderer__;
@@ -2482,7 +2558,9 @@ class NgtRenderer2 {
                 // set parent to the comment too
                 setRendererParentNode(node, sceneRendererNode);
             }
-            if (node[NGT_PORTAL_CONTENT_FLAG] && node[NGT_DOM_PARENT_FLAG] && isRendererNode(node[NGT_DOM_PARENT_FLAG])) {
+            if (node[NGT_PORTAL_CONTENT_FLAG] &&
+                node[NGT_DOM_PARENT_FLAG] &&
+                isRendererNode(node[NGT_DOM_PARENT_FLAG])) {
                 const portalContentParent = node[NGT_DOM_PARENT_FLAG];
                 const portalContentParentRS = portalContentParent.__ngt_renderer__;
                 if (!portalContentParentRS[3 /* NgtRendererClassId.portalContainer */]) {
@@ -2495,7 +2573,6 @@ class NgtRenderer2 {
         // returns the renderer parent node if it exists, otherwise returns the delegateRenderer parentNode
         return rendererParentNode ?? this.delegateRenderer.parentNode(node);
     }
-    // removeAttribute = this.delegateRenderer.removeAttribute.bind(this.delegateRenderer);
     removeAttribute(el, name, namespace) {
         const rS = el.__ngt_renderer__;
         if (!rS || rS[1 /* NgtRendererClassId.destroyed */])
@@ -2510,7 +2587,7 @@ class NgtRenderer2 {
         if (!rS)
             return this.delegateRenderer.setAttribute(el, name, value, namespace);
         if (rS[1 /* NgtRendererClassId.destroyed */]) {
-            ngDevMode &&
+            this.options.verbose &&
                 console.warn(`[NGT dev mode] setAttribute is invoked on destroyed renderer node.`, { el, name, value });
             return;
         }
@@ -2522,24 +2599,23 @@ class NgtRenderer2 {
                     if (instanceState)
                         instanceState.attach = paths;
                 }
+                return;
+            }
+            // coercion for primitive values
+            let maybeCoerced = value;
+            if (maybeCoerced === '' || maybeCoerced === 'true' || maybeCoerced === 'false') {
+                maybeCoerced = maybeCoerced === 'true' || maybeCoerced === '';
             }
             else {
-                // coercion for primitive values
-                let maybeCoerced = value;
-                if (maybeCoerced === '' || maybeCoerced === 'true' || maybeCoerced === 'false') {
-                    maybeCoerced = maybeCoerced === 'true' || maybeCoerced === '';
-                }
-                else {
-                    const maybeNumber = Number(maybeCoerced);
-                    if (!isNaN(maybeNumber))
-                        maybeCoerced = maybeNumber;
-                }
-                if (name === 'rawValue') {
-                    rS[2 /* NgtRendererClassId.rawValue */] = maybeCoerced;
-                }
-                else {
-                    applyProps(el, { [name]: maybeCoerced });
-                }
+                const maybeNumber = Number(maybeCoerced);
+                if (!isNaN(maybeNumber))
+                    maybeCoerced = maybeNumber;
+            }
+            if (name === 'rawValue') {
+                rS[2 /* NgtRendererClassId.rawValue */] = maybeCoerced;
+            }
+            else {
+                applyProps(el, { [name]: maybeCoerced });
             }
             return;
         }
@@ -2550,7 +2626,7 @@ class NgtRenderer2 {
         // attaching potentially updates signals which is not allowed
         const rS = el.__ngt_renderer__;
         if (!rS || rS[1 /* NgtRendererClassId.destroyed */]) {
-            ngDevMode &&
+            this.options.verbose &&
                 console.warn('[NGT dev mode] setProperty is invoked on destroyed renderer node.', { el, name, value });
             return;
         }
@@ -2562,7 +2638,7 @@ class NgtRenderer2 {
                     value['raycast'] = () => null;
                 }
                 applyProps(el, value);
-                if ('geometry' in value && value['geometry'].isBufferGeometry) {
+                if ('geometry' in value && is.three(value['geometry'], 'isBufferGeometry')) {
                     untracked(() => {
                         instanceState?.updateGeometryStamp();
                     });
@@ -2574,8 +2650,6 @@ class NgtRenderer2 {
             if (instanceState?.type === 'ngt-value' && name === 'rawValue') {
                 rS[2 /* NgtRendererClassId.rawValue */] = value;
                 if (parent) {
-                    // untrack this attach because this is during setProperty which is a reactive context
-                    // attaching potentially updates signals which is not allowed
                     untracked(() => attachThreeNodes(parent, el));
                 }
                 return;
@@ -2600,7 +2674,7 @@ class NgtRenderer2 {
                 value = () => null;
             }
             applyProps(el, { [name]: value });
-            if (instanceState && name === 'geometry' && value.isBufferGeometry) {
+            if (instanceState && name === 'geometry' && is.three(value, 'isBufferGeometry')) {
                 untracked(() => {
                     instanceState.updateGeometryStamp();
                 });
@@ -2625,6 +2699,10 @@ class NgtRenderer2 {
                 console.warn('[NGT] instance which has not been prepared cannot have events. Call `prepare()` manually if needed.');
                 return () => { };
             }
+            if (eventName === 'created') {
+                callback(target);
+                return () => { };
+            }
             if (eventName === 'attached') {
                 iS.onAttach = callback;
                 const parent = iS.parent && untracked(iS.parent);
@@ -2645,7 +2723,8 @@ class NgtRenderer2 {
                 if (eventName === 'disposed') {
                     eventName = 'dispose';
                 }
-                if (target.parent && (eventName === 'added' || eventName === 'removed')) {
+                if (target.parent &&
+                    (eventName === 'added' || eventName === 'removed')) {
                     callback({ type: eventName, target });
                 }
                 target.addEventListener(eventName, callback);
@@ -2654,7 +2733,7 @@ class NgtRenderer2 {
                 };
             }
             const cleanup = iS.setPointerEvent?.(eventName, callback) || (() => { });
-            // this means the object has already been attaached to the parent and has its store propgated
+            // this means the object has already been attached to the parent and has its store propagated
             if (iS.store) {
                 iS.addInteraction?.(iS.store);
             }
@@ -2663,16 +2742,19 @@ class NgtRenderer2 {
         return this.delegateRenderer.listen(target, eventName, callback);
     }
     appendThreeRendererNodes(parent, child) {
-        // if parent and chlid are the same, skip
+        // if parent and child are the same, skip
         if (parent === child) {
-            ngDevMode &&
-                console.warn('[NGT dev mode] appending THREE.js parent and child but they are the same', { parent, child });
+            this.options.verbose &&
+                console.warn('[NGT dev mode] appending THREE.js parent and child but they are the same', {
+                    parent,
+                    child,
+                });
             return;
         }
         const cIS = getInstanceState(child);
         // if child is already attached to a parent, skip
         if (cIS?.hierarchyStore.snapshot.parent) {
-            ngDevMode &&
+            this.options.verbose &&
                 console.warn('[NGT dev mode] appending THREE.js parent and child but child is already attached', {
                     parent,
                     child,
@@ -2736,6 +2818,7 @@ function injectCanvasRootInitializer(injector) {
                                 const state = root.snapshot;
                                 state.events.disconnect?.();
                                 state.gl?.renderLists?.dispose?.();
+                                state.gl?.dispose?.();
                                 state.gl?.forceContextLoss?.();
                                 if (state.gl?.xr)
                                     state.xr.disconnect();
@@ -2768,10 +2851,13 @@ function injectCanvasRootInitializer(injector) {
                         applyProps(raycaster, { params: { ...raycaster.params, ...(params || {}) } });
                     }
                     // Create default camera, don't overwrite any user-set state
-                    if (!state.camera || (state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose))) {
+                    if (!state.camera ||
+                        (state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose))) {
                         lastCamera = cameraOptions;
                         const isCamera = is.three(cameraOptions, 'isCamera');
-                        let camera = isCamera ? cameraOptions : makeCameraInstance(orthographic, sizeOptions ?? state.size);
+                        let camera = isCamera
+                            ? cameraOptions
+                            : makeCameraInstance(orthographic, sizeOptions ?? state.size);
                         if (!isCamera) {
                             camera.position.z = 5;
                             if (cameraOptions) {
@@ -2973,12 +3059,12 @@ class NgtRoutedScene {
             onCleanup(() => sub.unsubscribe());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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: "19.1.4", type: NgtRoutedScene, isStandalone: true, selector: "ngt-routed-scene", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.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: "19.1.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", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtRoutedScene, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtRoutedScene, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngt-routed-scene',
@@ -2993,32 +3079,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
  * `injectBeforeRender` invokes its callback on every frame. Hence, the notion of tracking
  * changes (i.e: signals) does not really matter since we're getting latest values of the things we need on every frame anyway.
  *
- * If `priority` is dynamic, consumers should set up `injectBeforeRender` in
- * an `effect` and track `priority` changes. Make use of `onCleanup` to clean up
- * previous before render subscription
+ * If `priority` is a Signal, `injectBeforeRender` will set up an Effect internally and returns the `EffectRef#destroy` instead.
  *
  * @example
  * ```ts
- * const injector = inject(Injector);
- *
- * effect((onCleanup) => {
- *   const priority = this.priority(); // track priority
- *
- *   const sub = injectBeforeRender(
- *    ({ gl, camera }) => {
- *      // before render logic
- *    },
- *    {
- *      priority,
- *      injector, // injector is needed since injectBeforeRender is invoked in effect body
- *    }
- *   });
- *
- *   onCleanup(() => sub());
- * });
+ * const destroy = injectBeforeRender(
+ *  ({ gl, camera }) => {
+ *    // before render logic
+ *  },
+ *  {
+ *    priority: this.priority, // this.priority is a Signal<number>
+ *  }
+ * )
  * ```
  */
 function injectBeforeRender(cb, { priority = 0, injector } = {}) {
+    if (typeof priority === 'function') {
+        const effectRef = assertInjector(injectBeforeRender, injector, () => {
+            const store = injectStore();
+            const ref = effect((onCleanup) => {
+                const p = priority();
+                const sub = store.snapshot.internal.subscribe(cb, p, store);
+                onCleanup(() => sub());
+            });
+            inject(DestroyRef).onDestroy(() => void ref.destroy());
+            return ref;
+        });
+        return effectRef.destroy.bind(effectRef);
+    }
     return assertInjector(injectBeforeRender, injector, () => {
         const store = injectStore();
         const sub = store.snapshot.internal.subscribe(cb, priority, store);
@@ -3027,29 +3115,22 @@ function injectBeforeRender(cb, { priority = 0, injector } = {}) {
     });
 }
 
-function resolveRef(ref) {
-    if (is.ref(ref)) {
-        return ref.nativeElement;
-    }
-    return ref;
-}
-
 /**
  * As host directive:
  * - outputs: [
- * 'click',
- * 'dblclick',
- * 'contextmenu',
- * 'pointerup',
- * 'pointerdown',
- * 'pointerover',
- * 'pointerout',
- * 'pointerenter',
- * 'pointerleave',
- * 'pointermove',
- * 'pointermissed',
- * 'pointercancel',
- * 'wheel',
+ 'click',
+ 'dblclick',
+ 'contextmenu',
+ 'pointerup',
+ 'pointerdown',
+ 'pointerover',
+ 'pointerout',
+ 'pointerenter',
+ 'pointerleave',
+ 'pointermove',
+ 'pointermissed',
+ 'pointercancel',
+ 'wheel',
  * ]
  * - inputs: [
  *   'ngtObjectEvents'
@@ -3097,10 +3178,10 @@ class NgtObjectEvents {
     emitEvent(eventName) {
         return this[eventName].emit.bind(this[eventName]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtObjectEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: NgtObjectEvents, isStandalone: true, selector: "[ngtObjectEvents]", inputs: { ngtObjectEvents: { classPropertyName: "ngtObjectEvents", publicName: "ngtObjectEvents", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", dblclick: "dblclick", contextmenu: "contextmenu", pointerup: "pointerup", pointerdown: "pointerdown", pointerover: "pointerover", pointerout: "pointerout", pointerenter: "pointerenter", pointerleave: "pointerleave", pointermove: "pointermove", pointermissed: "pointermissed", pointercancel: "pointercancel", wheel: "wheel", ngtObjectEvents: "ngtObjectEventsChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtObjectEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.6", type: NgtObjectEvents, isStandalone: true, selector: "[ngtObjectEvents]", inputs: { ngtObjectEvents: { classPropertyName: "ngtObjectEvents", publicName: "ngtObjectEvents", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", dblclick: "dblclick", contextmenu: "contextmenu", pointerup: "pointerup", pointerdown: "pointerdown", pointerover: "pointerover", pointerout: "pointerout", pointerenter: "pointerenter", pointerleave: "pointerleave", pointermove: "pointermove", pointermissed: "pointermissed", pointercancel: "pointercancel", wheel: "wheel", ngtObjectEvents: "ngtObjectEventsChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtObjectEvents, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: NgtObjectEvents, decorators: [{
             type: Directive,
             args: [{ selector: '[ngtObjectEvents]' }]
         }], ctorParameters: () => [] });
@@ -3109,11 +3190,11 @@ function injectObjectEvents(target, events, { injector } = {}) {
         const renderer = inject(Renderer2);
         const cleanUps = [];
         effect((onCleanup) => {
-            const targetRef = resolveRef(target());
-            if (!targetRef || !is.instance(targetRef))
+            const targetObj = resolveRef(target());
+            if (!targetObj || !is.instance(targetObj))
                 return;
             Object.entries(events).forEach(([eventName, eventHandler]) => {
-                cleanUps.push(renderer.listen(targetRef, eventName, eventHandler));
+                cleanUps.push(renderer.listen(targetObj, eventName, eventHandler));
             });
             onCleanup(() => {
                 cleanUps.forEach((cleanUp) => cleanUp());
@@ -3139,5 +3220,5 @@ function hasListener(...emitterRefs) {
  * Generated bundle index. Do not edit.
  */
 
-export { NGT_APPLY_PROPS, NGT_ARGS_FLAG, NGT_CANVAS_CONTENT_FLAG, NGT_CATALOGUE, NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG, NGT_DOM_PARENT_FLAG, NGT_GET_NODE_ATTRIBUTE_FLAG, NGT_HTML_FLAG, NGT_INTERNAL_ADD_COMMENT_FLAG, NGT_INTERNAL_SET_PARENT_COMMENT_FLAG, NGT_LOOP, NGT_PARENT_FLAG, NGT_PORTAL_CONTENT_FLAG, NGT_RENDERER_NODE_FLAG, NGT_STORE, NgtArgs, NgtHTML, NgtHexify, NgtObjectEvents, NgtParent, NgtPortal, NgtPortalAutoRender, NgtPortalContent, NgtPortalDeclarations, NgtRenderer2, NgtRendererFactory2, NgtRoutedScene, NgtSelect, NgtSelection, THREE_NATIVE_EVENTS, addAfterEffect, addEffect, addTail, applyProps, attach, checkNeedsUpdate, checkUpdate, createAttachFunction, createEvents, detach, dispose, extend, flushGlobalEffects, getEmitter, getInstanceState, getLocalState, hasListener, injectBeforeRender, injectCanvasRootInitializer, injectCatalogue, injectLoader, injectLoop, injectObjectEvents, injectStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, omit, pick, prepare, provideHTMLDomElement, removeInteractivity, resolveRef, roots, signalState, storeFactory, updateCamera, vector2, vector3, vector4 };
+export { NGT_APPLY_PROPS, NGT_ARGS_FLAG, NGT_CANVAS_CONTENT_FLAG, NGT_CATALOGUE, NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG, NGT_DOM_PARENT_FLAG, NGT_GET_NODE_ATTRIBUTE_FLAG, NGT_HTML_FLAG, NGT_INTERNAL_ADD_COMMENT_FLAG, NGT_INTERNAL_SET_PARENT_COMMENT_FLAG, NGT_LOOP, NGT_PARENT_FLAG, NGT_PORTAL_CONTENT_FLAG, NGT_RENDERER_NODE_FLAG, NGT_RENDERER_OPTIONS, NGT_STORE, NgtArgs, NgtHTML, NgtHexify, NgtObjectEvents, NgtParent, NgtPortal, NgtPortalAutoRender, NgtPortalContent, NgtPortalImpl, NgtRenderer2, NgtRendererFactory2, NgtRoutedScene, NgtSelect, NgtSelection, NgtSelectionApi, THREE_NATIVE_EVENTS, addAfterEffect, addEffect, addTail, applyProps, attach, checkNeedsUpdate, checkUpdate, createAttachFunction, createEvents, detach, dispose, extend, flushGlobalEffects, getEmitter, getInstanceState, getLocalState, hasListener, injectBeforeRender, injectCanvasRootInitializer, injectCatalogue, injectLoader, injectLoop, injectObjectEvents, injectStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, omit, pick, prepare, provideHTMLDomElement, removeInteractivity, resolveRef, roots, signalState, storeFactory, updateCamera, vector2, vector3, vector4 };
 //# sourceMappingURL=angular-three.mjs.map