angular-three 4.2.2 → 4.2.4-next.0

package/fesm2022/angular-three.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, TemplateRef, Injector, effect, DestroyRef, Directive, input, linkedSignal, computed, InjectionToken, untracked, isSignal, signal, DOCUMENT, Injectable, ElementRef, booleanAttribute, resource, Pipe, numberAttribute, contentChild, SkipSelf, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, output, model, Renderer2 } from '@angular/core';
+import { inject, ViewContainerRef, TemplateRef, Renderer2, Injector, effect, DestroyRef, Directive, input, linkedSignal, computed, InjectionToken, untracked, isSignal, signal, DOCUMENT, Injectable, ElementRef, booleanAttribute, resource, Pipe, numberAttribute, contentChild, SkipSelf, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, Component, output, model } from '@angular/core';
 import { Subject, filter } from 'rxjs';
 import * as THREE from 'three';
 import { Group } from 'three';
@@ -15,29 +15,118 @@ import { ActivationEnd, RouterOutlet } from '@angular/router';
  */
 /** Flag indicating a node is managed by the Angular Three renderer */
 const NGT_RENDERER_NODE_FLAG = '__ngt_renderer__';
-/** Flag for canvas content template comments */
-const NGT_CANVAS_CONTENT_FLAG = '__ngt_renderer_canvas_content__';
-/** Flag for portal content template comments */
-const NGT_PORTAL_CONTENT_FLAG = '__ngt_renderer_portal_content__';
-/** Flag for args directive comments */
-const NGT_ARGS_FLAG = '__ngt_renderer_args__';
-/** Flag for parent directive comments */
-const NGT_PARENT_FLAG = '__ngt_renderer_parent__';
-/** Internal flag for adding comment nodes */
-const NGT_INTERNAL_ADD_COMMENT_FLAG = '__ngt_renderer_add_comment__';
-/** Internal flag for setting parent on comment nodes */
-const NGT_INTERNAL_SET_PARENT_COMMENT_FLAG = '__ngt_renderer_set_parent_comment__';
+/** Internal hook for scoping structural directive context to embedded view creation */
+const NGT_RENDERER_CONTEXT_FLAG = '__ngt_renderer_context__';
 /** Flag for getting node attributes */
 const NGT_GET_NODE_ATTRIBUTE_FLAG = '__ngt_get_node_attribute__';
 /** Flag for DOM parent element reference */
 const NGT_DOM_PARENT_FLAG = '__ngt_dom_parent__';
-/** Flag indicating the delegate renderer's destroyNode has been patched */
-const NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG = '__ngt_delegate_renderer_destroy_node_patched__';
 /** Flag for HTML directive classes */
 const NGT_HTML_FLAG = '__ngt_html__';
 /** Native Three.js EventDispatcher events */
 const THREE_NATIVE_EVENTS = ['added', 'removed', 'childadded', 'childremoved', 'change', 'disposed'];
 
+function isRendererNode(node) {
+    return !!node && typeof node === 'object' && NGT_RENDERER_NODE_FLAG in node;
+}
+function isRendererNodeType(node, type) {
+    return isRendererNode(node) && node.__ngt_renderer__[0 /* NgtRendererClassId.type */] === type;
+}
+function createRendererNode(type, node, document) {
+    const state = [
+        type,
+        false,
+        undefined,
+        undefined,
+        undefined,
+        [],
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+    ];
+    const rendererNode = Object.assign(node, { [NGT_RENDERER_NODE_FLAG]: state });
+    // NOTE: assign ownerDocument to node so we can use HostListener in Component
+    if (!rendererNode['ownerDocument'])
+        rendererNode['ownerDocument'] = document;
+    // NOTE: Angular SSR calls `node.getAttribute()` to retrieve hydration info on a node
+    if (!('getAttribute' in rendererNode) || typeof rendererNode['getAttribute'] !== 'function') {
+        const getNodeAttribute = (name) => rendererNode[name];
+        getNodeAttribute[NGT_GET_NODE_ATTRIBUTE_FLAG] = true;
+        Object.defineProperty(rendererNode, 'getAttribute', { value: getNodeAttribute, configurable: true });
+    }
+    return rendererNode;
+}
+function removeRendererChildNode(parent, child) {
+    const parentState = parent.__ngt_renderer__;
+    const childState = child.__ngt_renderer__;
+    const childIndex = parentState[5 /* NgtRendererClassId.children */].indexOf(child);
+    if (childIndex >= 0)
+        parentState[5 /* NgtRendererClassId.children */].splice(childIndex, 1);
+    if (childState[4 /* NgtRendererClassId.parent */] === parent) {
+        childState[4 /* NgtRendererClassId.parent */] = undefined;
+    }
+}
+function insertRendererChildNode(parent, child, refChild) {
+    if (parent === child || refChild === child)
+        return;
+    const childState = child.__ngt_renderer__;
+    const previousParent = childState[4 /* NgtRendererClassId.parent */];
+    if (previousParent && isRendererNode(previousParent)) {
+        removeRendererChildNode(previousParent, child);
+    }
+    const children = parent.__ngt_renderer__[5 /* NgtRendererClassId.children */];
+    const refIndex = refChild ? children.indexOf(refChild) : -1;
+    children.splice(refIndex >= 0 ? refIndex : children.length, 0, child);
+    childState[4 /* NgtRendererClassId.parent */] = parent;
+    assignRendererOwner(parent, child, refChild);
+}
+function getRendererNextSibling(node) {
+    const parent = node.__ngt_renderer__[4 /* NgtRendererClassId.parent */];
+    if (!parent || !isRendererNode(parent))
+        return null;
+    const siblings = parent.__ngt_renderer__[5 /* NgtRendererClassId.children */];
+    const index = siblings.indexOf(node);
+    return index >= 0 ? (siblings[index + 1] ?? null) : null;
+}
+function setRendererAnchor(node, anchor) {
+    if (!isRendererNode(node))
+        return false;
+    node.__ngt_renderer__[7 /* NgtRendererClassId.anchor */] = anchor;
+    return true;
+}
+function getRendererAnchor(node) {
+    return isRendererNode(node) ? node.__ngt_renderer__[7 /* NgtRendererClassId.anchor */] : undefined;
+}
+function markRendererViewHost(node) {
+    const state = node.__ngt_renderer__;
+    state[9 /* NgtRendererClassId.ownedNodes */] ??= new Set();
+}
+function assignRendererOwner(parent, child, reference) {
+    const parentState = parent.__ngt_renderer__;
+    const childState = child.__ngt_renderer__;
+    if (childState[8 /* NgtRendererClassId.owner */])
+        return;
+    const parentOwner = parentState[9 /* NgtRendererClassId.ownedNodes */] ? parent : parentState[8 /* NgtRendererClassId.owner */];
+    // Canvas and portal anchors are owned by their declaring view but are not logical
+    // children of the Three scene returned from parentNode(). Angular still supplies the
+    // anchor as the insertion reference, making it the lifecycle bridge into that scene.
+    const referenceOwner = isRendererNode(reference) ? reference.__ngt_renderer__[8 /* NgtRendererClassId.owner */] : undefined;
+    const owner = parentOwner ?? referenceOwner;
+    if (!owner)
+        return;
+    childState[8 /* NgtRendererClassId.owner */] = owner;
+    owner.__ngt_renderer__[9 /* NgtRendererClassId.ownedNodes */]?.add(child);
+}
+function releaseRendererOwner(node, clear = true) {
+    const state = node.__ngt_renderer__;
+    const owner = state[8 /* NgtRendererClassId.owner */];
+    if (owner !== node)
+        owner?.__ngt_renderer__[9 /* NgtRendererClassId.ownedNodes */]?.delete(node);
+    if (clear)
+        state[8 /* NgtRendererClassId.owner */] = undefined;
+}
+
 /**
  * Collection of type checking and comparison utilities for Angular Three.
  *
@@ -151,13 +240,19 @@ class NgtCommonDirective {
     constructor() {
         this.vcr = inject(ViewContainerRef);
         this.template = inject(TemplateRef);
+        this.renderer = inject(Renderer2);
         this.injector = inject(Injector);
         this.injected = false;
         this.injectedValue = null;
         effect(() => {
-            if (this.shouldSkipRender())
-                return;
             const value = this.linkedValue();
+            if (this.shouldSkipRender()) {
+                this.injected = false;
+                this.injectedValue = value;
+                this.view?.destroy();
+                this.view = undefined;
+                return;
+            }
             if (is.equ(value, this.injectedValue)) {
                 // we have the same value as before, no need to update
                 return;
@@ -184,8 +279,14 @@ class NgtCommonDirective {
         if (this.view && !this.view.destroyed)
             this.view.destroy();
         this.beforeCreateView();
-        this.view = this.vcr.createEmbeddedView(this.template);
-        this.view.detectChanges();
+        const createView = () => {
+            const view = this.vcr.createEmbeddedView(this.template);
+            view.detectChanges();
+            return view;
+        };
+        this.view = this.renderer[NGT_RENDERER_CONTEXT_FLAG]
+            ? this.renderer[NGT_RENDERER_CONTEXT_FLAG](this.injector, createView)
+            : createView();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgtCommonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NgtCommonDirective, isStandalone: true, ngImport: i0 }); }
@@ -222,12 +323,7 @@ class NgtArgs extends NgtCommonDirective {
             return args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null);
         }, ...(ngDevMode ? [{ debugName: "shouldSkipRender" }] : /* istanbul ignore next */ []));
         const commentNode = this.commentNode;
-        commentNode.data = NGT_ARGS_FLAG;
-        commentNode[NGT_ARGS_FLAG] = true;
-        if (commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]) {
-            commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]('args', this.injector);
-            delete commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG];
-        }
+        setRendererAnchor(commentNode, { kind: 'args', injector: this.injector });
     }
     validate() {
         return !this.injected && !!this.injectedValue?.length;
@@ -299,12 +395,13 @@ function update(timestamp, store, frame) {
     let delta = state.clock.getDelta();
     // In frameloop='never' mode, clock times are updated using the provided timestamp
     if (state.frameloop === 'never' && typeof timestamp === 'number') {
-        delta = timestamp - state.clock.elapsedTime;
-        state.clock.oldTime = state.clock.elapsedTime;
-        state.clock.elapsedTime = timestamp;
+        const elapsedTime = timestamp / 1000;
+        delta = elapsedTime - state.clock.elapsedTime;
+        state.clock.oldTime = timestamp;
+        state.clock.elapsedTime = elapsedTime;
     }
     // Call subscribers (beforeRender)
-    const subscribers = state.internal.subscribers;
+    const subscribers = state.internal.subscribers.slice();
     for (let i = 0; i < subscribers.length; i++) {
         const subscription = subscribers[i];
         subscription.callback({ ...subscription.store.snapshot, delta, frame });
@@ -614,6 +711,15 @@ function updateCamera(camera, size) {
     }
 }
 
+/** RFC 4122 v4 UUID — safe in non-secure contexts (e.g. http:// on LAN). */
+function uuidv4Fallback() {
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0'));
+    return `${hex.slice(0, 4).join('')}-${hex.slice(4, 6).join('')}-${hex.slice(6, 8).join('')}-${hex.slice(8, 10).join('')}-${hex.slice(10).join('')}`;
+}
 /**
  * @deprecated Use `getInstanceState` instead. Will be removed in 5.0.0
  * @param obj - The object to get local state from
@@ -646,6 +752,7 @@ function getInstanceState(obj) {
         return undefined;
     return obj.__ngt__ || undefined;
 }
+const pointerEventRegistrations = new WeakMap();
 /**
  * Invalidates an instance, triggering a re-render of the scene.
  *
@@ -710,7 +817,7 @@ function prepare(object, type, instanceState) {
             const [_nonObjects] = [nonObjects(), geometryStamp()];
             return _nonObjects;
         }, ...(ngDevMode ? [{ debugName: "nonObjectsChanged" }] : /* istanbul ignore next */ []));
-        instance.__ngt_id__ = crypto.randomUUID();
+        instance.__ngt_id__ = typeof crypto.randomUUID === 'function' ? crypto.randomUUID() : uuidv4Fallback();
         instance.__ngt__ = {
             previousAttach: null,
             type,
@@ -721,16 +828,12 @@ function prepare(object, type, instanceState) {
             parent: hierarchyStore.parent,
             objects: hierarchyStore.objects,
             nonObjects: nonObjectsChanged,
-            add(object, type) {
+            add(object, type, before) {
                 const current = instance.__ngt__.hierarchyStore.snapshot[type];
-                const foundIndex = current.findIndex((node) => object === node || (!!object['uuid'] && !!node['uuid'] && object['uuid'] === node['uuid']));
-                if (foundIndex > -1) {
-                    current.splice(foundIndex, 1, object);
-                    instance.__ngt__.hierarchyStore.update({ [type]: current });
-                }
-                else {
-                    instance.__ngt__.hierarchyStore.update((prev) => ({ [type]: [...prev[type], object] }));
-                }
+                const next = current.filter((node) => object !== node && (!object['uuid'] || !node['uuid'] || object['uuid'] !== node['uuid']));
+                const beforeIndex = before ? next.indexOf(before) : -1;
+                next.splice(beforeIndex >= 0 ? beforeIndex : next.length, 0, object);
+                instance.__ngt__.hierarchyStore.update({ [type]: next });
                 notifyAncestors(instance.__ngt__.hierarchyStore.snapshot.parent, type);
             },
             remove(object, type) {
@@ -753,26 +856,42 @@ function prepare(object, type, instanceState) {
         setPointerEvent: {
             value: (eventName, callback) => {
                 const iS = getInstanceState(instance);
-                if (!iS.handlers)
-                    iS.handlers = {};
-                // try to get the previous handler. compound might have one, the THREE object might also have one with the same name
-                const previousHandler = iS.handlers[eventName];
-                // readjust the callback
-                const updatedCallback = (event) => {
-                    if (previousHandler)
-                        previousHandler(event);
-                    callback(event);
-                };
-                Object.assign(iS.handlers, { [eventName]: updatedCallback });
-                // increment the count everytime
+                const handlers = (iS.handlers ??= {});
+                let registrations = pointerEventRegistrations.get(iS);
+                if (!registrations) {
+                    registrations = new Map();
+                    pointerEventRegistrations.set(iS, registrations);
+                }
+                let listeners = registrations.get(eventName);
+                if (!listeners) {
+                    listeners = new Map();
+                    registrations.set(eventName, listeners);
+                    const existingHandler = handlers[eventName];
+                    if (existingHandler)
+                        listeners.set(Symbol('existing'), existingHandler);
+                }
+                const token = Symbol(eventName);
+                listeners.set(token, callback);
+                const dispatch = ((event) => {
+                    for (const listener of [...listeners.values()])
+                        listener(event);
+                });
+                handlers[eventName] = dispatch;
                 iS.eventCount += 1;
-                // clean up the event listener by removing the target from the interaction array
+                let active = true;
                 return () => {
-                    const iS = getInstanceState(instance);
-                    if (iS) {
-                        iS.handlers && delete iS.handlers[eventName];
-                        iS.eventCount -= 1;
+                    if (!active)
+                        return;
+                    active = false;
+                    if (getInstanceState(instance) !== iS || !listeners?.delete(token))
+                        return;
+                    iS.eventCount = Math.max(0, iS.eventCount - 1);
+                    if (listeners.size === 0) {
+                        registrations?.delete(eventName);
+                        delete handlers[eventName];
                     }
+                    if (iS.eventCount === 0)
+                        iS.removeInteraction?.(iS.store);
                 };
             },
             configurable: true,
@@ -808,10 +927,27 @@ function prepare(object, type, instanceState) {
                     root = root.snapshot.previousRoot;
                 }
                 if (root.snapshot.internal) {
-                    const interactions = root.snapshot.internal.interaction;
-                    const index = interactions.findIndex((obj) => obj.uuid === instance.uuid);
+                    const internal = root.snapshot.internal;
+                    const object = instance;
+                    const interactions = internal.interaction;
+                    const index = interactions.findIndex((obj) => obj.uuid === object.uuid);
                     if (index >= 0)
                         interactions.splice(index, 1);
+                    internal.initialHits = internal.initialHits.filter((hit) => hit !== object);
+                    for (const [key, hovered] of internal.hovered) {
+                        if (hovered.eventObject === object || hovered.object === object)
+                            internal.hovered.delete(key);
+                    }
+                    for (const [pointerId, captures] of internal.capturedMap) {
+                        const capture = captures.get(object);
+                        if (!capture)
+                            continue;
+                        captures.delete(object);
+                        if (captures.size === 0) {
+                            internal.capturedMap.delete(pointerId);
+                            capture.target.releasePointerCapture(pointerId);
+                        }
+                    }
                 }
             },
             configurable: true,
@@ -819,7 +955,8 @@ function prepare(object, type, instanceState) {
     });
     return instance;
 }
-const notificationCache = new Map();
+const pendingAncestorNotifications = new Map();
+let ancestorNotificationScheduled = false;
 /**
  * Notify ancestors about changes to a THREE.js objects' children
  *
@@ -827,37 +964,41 @@ const notificationCache = new Map();
  * in which case the model matrices will be settled later. `NgtsCenter` needs to know about this
  * matrices change to re-center everything inside of it.
  *
- * The implementation here uses a naive approach to reduce the number of notifications; we cache
- * the notifications by the instance ID and the type of the notification.
- *
- * 1. If there's no cache or
- * 2. If the type is different for the same instance or
- * 3. We've skipped the notifications for this instance more than a certain amount
- *
- * then we'll proceed with notification
+ * Notifications are coalesced by ancestor and hierarchy kind. Angular renderer
+ * transactions flush them at `RendererFactory2.end`; direct calls use a microtask fallback.
  */
 function notifyAncestors(instance, type) {
-    if (!instance)
-        return;
-    const localState = getInstanceState(instance);
-    if (!localState)
-        return;
-    const id = instance.__ngt_id__ || instance['uuid'];
-    if (!id)
-        return;
-    const maxNotificationSkipCount = localState.store?.snapshot.maxNotificationSkipCount || 5;
-    const cached = notificationCache.get(id);
-    if (!cached || cached.lastType !== type || cached.skipCount > maxNotificationSkipCount) {
-        notificationCache.set(id, { skipCount: 0, lastType: type });
-        if (notificationCache.size === 1) {
-            queueMicrotask(() => notificationCache.clear());
-        }
-        const { parent } = localState.hierarchyStore.snapshot;
-        localState.hierarchyStore.update({ [type]: (localState.hierarchyStore.snapshot[type] || []).slice() });
-        notifyAncestors(parent, type);
+    let current = instance;
+    while (current) {
+        const localState = getInstanceState(current);
+        if (!localState?.hierarchyStore)
+            break;
+        let types = pendingAncestorNotifications.get(current);
+        if (!types)
+            pendingAncestorNotifications.set(current, (types = new Set()));
+        types.add(type);
+        current = localState.hierarchyStore.snapshot.parent;
+    }
+    if (pendingAncestorNotifications.size === 0 || ancestorNotificationScheduled)
         return;
+    ancestorNotificationScheduled = true;
+    queueMicrotask(flushAncestorNotifications);
+}
+/** @internal */
+function flushAncestorNotifications() {
+    ancestorNotificationScheduled = false;
+    const batch = [...pendingAncestorNotifications];
+    pendingAncestorNotifications.clear();
+    for (const [ancestor, types] of batch) {
+        const localState = getInstanceState(ancestor);
+        if (!localState?.hierarchyStore)
+            continue;
+        const snapshot = localState.hierarchyStore.snapshot;
+        const update = {};
+        for (const pendingType of types)
+            update[pendingType] = snapshot[pendingType].slice();
+        localState.hierarchyStore.update(update);
     }
-    notificationCache.set(id, { ...cached, skipCount: cached.skipCount + 1 });
 }
 
 /**
@@ -880,9 +1021,9 @@ function diffProps(instance, props) {
                 key = 'outputColorSpace';
             }
         }
-        if (is.equ(propValue, instance[key]))
+        if (is.equ(propValue, resolveInstanceKey(instance, key).targetProp))
             continue;
-        changes.push([propKey, propValue]);
+        changes.push([key, propValue]);
     }
     return changes;
 }
@@ -896,6 +1037,41 @@ const NGT_APPLY_PROPS = '__ngt_apply_props__';
 // https://github.com/mrdoob/three.js/pull/27042
 // https://github.com/mrdoob/three.js/pull/22748
 const colorMaps = ['map', 'emissiveMap', 'sheenColorMap', 'specularColorMap', 'envMap'];
+const defaultProperties = new WeakMap();
+function snapshotPropertyValue(value) {
+    if (value instanceof THREE.Layers) {
+        const snapshot = new THREE.Layers();
+        snapshot.mask = value.mask;
+        return snapshot;
+    }
+    if (ArrayBuffer.isView(value) && 'slice' in value && typeof value.slice === 'function') {
+        return value.slice();
+    }
+    if (value &&
+        typeof value === 'object' &&
+        'clone' in value &&
+        typeof value.clone === 'function' &&
+        'set' in value &&
+        typeof value.set === 'function' &&
+        'copy' in value &&
+        typeof value.copy === 'function') {
+        // Math-like values are mutated in place by applyProps and need a value
+        // snapshot. Disposable resources and other assigned objects deliberately
+        // retain their original identity for default restoration.
+        return value.clone();
+    }
+    return value;
+}
+function resolvePropertyValue(root, key, currentValue, nextValue) {
+    let defaults = defaultProperties.get(root);
+    if (!defaults) {
+        defaults = new Map();
+        defaultProperties.set(root, defaults);
+    }
+    if (!defaults.has(key))
+        defaults.set(key, snapshotPropertyValue(currentValue));
+    return nextValue === undefined ? snapshotPropertyValue(defaults.get(key)) : nextValue;
+}
 /**
  * Resolves a property key that may contain dot notation (pierced props).
  *
@@ -971,11 +1147,7 @@ function applyProps(instance, props) {
     const rootState = localState?.store?.snapshot ?? instance[NGT_APPLY_PROPS]?.snapshot ?? {};
     const changes = diffProps(instance, props);
     for (let i = 0; i < changes.length; i++) {
-        let [key, value] = changes[i];
-        // Ignore setting undefined props
-        // https://github.com/pmndrs/react-three-fiber/issues/274
-        if (value === undefined)
-            continue;
+        const [key, nextValue] = changes[i];
         // Alias (output)encoding => (output)colorSpace (since r152)
         // https://github.com/pmndrs/react-three-fiber/pull/2829
         // if (is.colorSpaceExist(instance)) {
@@ -992,10 +1164,7 @@ function applyProps(instance, props) {
         // 	}
         // }
         const { root, targetKey, targetProp } = resolveInstanceKey(instance, key);
-        // we have switched due to pierced props
-        if (root !== instance) {
-            return applyProps(root, { [targetKey]: value });
-        }
+        const value = resolvePropertyValue(root, targetKey, targetProp, nextValue);
         // 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;
@@ -1054,22 +1223,13 @@ function applyProps(instance, props) {
         }
         checkUpdate(root[targetKey]);
         checkUpdate(targetProp);
-        invalidateInstance(instance);
     }
-    const instanceHandlersCount = localState?.eventCount;
     const parent = localState?.hierarchyStore?.snapshot.parent;
-    if (parent && rootState.internal && instance['raycast'] && instanceHandlersCount !== localState?.eventCount) {
-        // Pre-emptively remove the instance from the interaction manager
-        const index = rootState.internal.interaction.indexOf(instance);
-        if (index > -1)
-            rootState.internal.interaction.splice(index, 1);
-        // Add the instance to the interaction manager only when it has handlers
-        if (localState?.eventCount)
-            rootState.internal.interaction.push(instance);
-    }
     if (parent && localState?.onUpdate && changes.length) {
         localState.onUpdate(instance);
     }
+    if (changes.length)
+        invalidateInstance(instance);
     // clearing the intermediate store from the instance
     if (instance[NGT_APPLY_PROPS])
         delete instance[NGT_APPLY_PROPS];
@@ -1083,6 +1243,7 @@ function applyProps(instance, props) {
  * allowing the custom renderer to instantiate objects when elements are created.
  */
 const catalogue = {};
+const catalogueOwnership = new Map();
 /**
  * Registers Three.js constructors for use in templates.
  *
@@ -1108,10 +1269,59 @@ const catalogue = {};
  * ```
  */
 function extend(objects) {
-    const keys = Object.keys(objects);
-    Object.assign(catalogue, objects);
+    const registrations = Object.entries(objects).map(([key, value]) => {
+        let ownership = catalogueOwnership.get(key);
+        if (!ownership) {
+            ownership = {
+                baseline: catalogue[key],
+                hadBaseline: Object.prototype.hasOwnProperty.call(catalogue, key),
+                registrations: [],
+            };
+            catalogueOwnership.set(key, ownership);
+        }
+        const registrationValue = value;
+        let registration = ownership.registrations.at(-1);
+        if (!registration || registration.value !== registrationValue) {
+            registration = { value: registrationValue, count: 0 };
+            ownership.registrations.push(registration);
+        }
+        // Repeated component-level extend calls commonly register the same Three
+        // constructor. Coalesce those owners so the catalogue retains one layer,
+        // not one record per component instance.
+        registration.count++;
+        catalogue[key] = registration.value;
+        return { key, ownership, registration };
+    });
+    let cleaned = false;
     return () => {
-        remove(...keys);
+        if (cleaned)
+            return;
+        cleaned = true;
+        for (const { key, ownership, registration } of registrations) {
+            // A public remove followed by a new extend starts a new ownership era. An
+            // older cleanup must never affect that newer registration.
+            if (catalogueOwnership.get(key) !== ownership)
+                continue;
+            registration.count--;
+            if (registration.count > 0)
+                continue;
+            const registrationIndex = ownership.registrations.indexOf(registration);
+            if (registrationIndex === -1)
+                continue;
+            ownership.registrations.splice(registrationIndex, 1);
+            const activeRegistration = ownership.registrations.at(-1);
+            if (activeRegistration) {
+                catalogue[key] = activeRegistration.value;
+                continue;
+            }
+            catalogueOwnership.delete(key);
+            if (ownership.hadBaseline) {
+                catalogue[key] = ownership.baseline;
+            }
+            else {
+                delete catalogue[key];
+            }
+        }
     };
 }
 /**
@@ -1121,6 +1331,9 @@ function extend(objects) {
  */
 function remove(...keys) {
     for (const key of keys) {
+        // Explicit removal is authoritative. Invalidate all outstanding cleanup
+        // tokens so they cannot restore an older value later.
+        catalogueOwnership.delete(key);
         delete catalogue[key];
     }
 }
@@ -1137,34 +1350,6 @@ function injectCatalogue() {
     return inject(NGT_CATALOGUE);
 }
 
-function isRendererNode(node) {
-    return !!node && typeof node === 'object' && NGT_RENDERER_NODE_FLAG in node;
-}
-function createRendererNode(type, node, document) {
-    const state = [type, false, undefined, undefined, undefined, undefined, []];
-    const rendererNode = Object.assign(node, { [NGT_RENDERER_NODE_FLAG]: state });
-    // NOTE: assign ownerDocument to node so we can use HostListener in Component
-    if (!rendererNode['ownerDocument'])
-        rendererNode['ownerDocument'] = document;
-    // NOTE: Angular SSR calls `node.getAttribute()` to retrieve hydration info on a node
-    if (!('getAttribute' in rendererNode) || typeof rendererNode['getAttribute'] !== 'function') {
-        const getNodeAttribute = (name) => rendererNode[name];
-        getNodeAttribute[NGT_GET_NODE_ATTRIBUTE_FLAG] = true;
-        Object.defineProperty(rendererNode, 'getAttribute', { value: getNodeAttribute, configurable: true });
-    }
-    return rendererNode;
-}
-function setRendererParentNode(node, parent) {
-    if (!node.__ngt_renderer__[5 /* NgtRendererClassId.parent */]) {
-        node.__ngt_renderer__[5 /* NgtRendererClassId.parent */] = parent;
-    }
-}
-function addRendererChildNode(node, child) {
-    if (!node.__ngt_renderer__[6 /* NgtRendererClassId.children */].includes(child)) {
-        node.__ngt_renderer__[6 /* NgtRendererClassId.children */].push(child);
-    }
-}
-
 const idCache = {};
 /**
  * Generates a unique identifier.
@@ -1271,6 +1456,7 @@ function makeObjectGraph(object) {
     return data;
 }
 
+const NGT_EVENT_LAYER = Symbol('NGT_EVENT_LAYER');
 /**
  * @fileoverview Event handling system for Angular Three.
  *
@@ -1364,52 +1550,57 @@ function createEvents(store) {
             if (!current)
                 eventsObjects.push(eventsObject);
         }
-        if (!state.previousRoot) {
-            // Make sure root-level pointer and ray are set up
-            state.events.compute?.(event, store, null);
-        }
-        // Skip work if there are no event objects
-        if (eventsObjects.length === 0)
-            return intersections;
-        // Reset all raycaster cameras to undefined - use for loop for better performance
-        const eventsObjectsLen = eventsObjects.length;
-        for (let i = 0; i < eventsObjectsLen; i++) {
-            const objectRootState = getInstanceState(eventsObjects[i])?.store?.snapshot;
-            if (objectRootState) {
-                objectRootState.raycaster.camera = undefined;
-            }
+        const objectsByLayer = new Map();
+        for (const object of eventsObjects) {
+            const objectStore = getInstanceState(object)?.store;
+            if (!objectStore)
+                continue;
+            const layerObjects = objectsByLayer.get(objectStore);
+            if (layerObjects)
+                layerObjects.push(object);
+            else
+                objectsByLayer.set(objectStore, [object]);
         }
-        // Pre-allocate array to avoid garbage collection
+        // The root computation must precede portal/layer computations, which may derive their
+        // pointer or ray from previousRoot. Each layer is reset, computed, and raycast once.
+        const eventLayers = [];
+        const scheduledLayers = new Set();
+        const scheduleLayer = (eventLayer) => {
+            if (scheduledLayers.has(eventLayer))
+                return;
+            scheduledLayers.add(eventLayer);
+            const previousRoot = eventLayer.snapshot.previousRoot;
+            if (previousRoot)
+                scheduleLayer(previousRoot);
+            eventLayers.push(eventLayer);
+        };
+        scheduleLayer(store);
+        for (const objectStore of objectsByLayer.keys())
+            scheduleLayer(objectStore);
+        for (const eventLayer of eventLayers)
+            eventLayer.snapshot.raycaster.camera = undefined;
         const raycastResults = [];
-        function handleRaycast(obj) {
-            const objStore = getInstanceState(obj)?.store;
-            const objState = objStore?.snapshot;
-            // Skip event handling when noEvents is set, or when the raycasters camera is null
-            if (!objState || !objState.events.enabled || objState.raycaster.camera === null)
-                return [];
-            // When the camera is undefined we have to call the event layers update function
-            if (objState.raycaster.camera === undefined) {
-                objState.events.compute?.(event, objStore, objState.previousRoot);
-                // If the camera is still undefined we have to skip this layer entirely
-                if (objState.raycaster.camera === undefined)
-                    objState.raycaster.camera = null;
-            }
-            // Intersect object by object
-            return objState.raycaster.camera ? objState.raycaster.intersectObject(obj, true) : [];
-        }
-        // Collect events
-        for (let i = 0; i < eventsObjectsLen; i++) {
-            const objResults = handleRaycast(eventsObjects[i]);
-            if (objResults.length <= 0)
+        for (const eventLayer of eventLayers) {
+            const layerState = eventLayer.snapshot;
+            if (!layerState.events.enabled)
+                continue;
+            layerState.events.compute?.(event, eventLayer, layerState.previousRoot);
+            if (layerState.raycaster.camera === undefined)
+                layerState.raycaster.camera = null;
+            const layerObjects = objectsByLayer.get(eventLayer);
+            if (!layerState.raycaster.camera || !layerObjects?.length)
                 continue;
-            for (let j = 0; j < objResults.length; j++) {
-                raycastResults.push(objResults[j]);
+            const layerResults = layerState.raycaster.intersectObjects(layerObjects, true);
+            for (let index = 0; index < layerResults.length; index++) {
+                const result = layerResults[index];
+                result[NGT_EVENT_LAYER] = eventLayer;
+                raycastResults.push(result);
             }
         }
         // Sort by event priority and distance
         raycastResults.sort((a, b) => {
-            const aState = getInstanceState(a.object)?.store?.snapshot;
-            const bState = getInstanceState(b.object)?.store?.snapshot;
+            const aState = a[NGT_EVENT_LAYER]?.snapshot ?? getInstanceState(a.object)?.store?.snapshot;
+            const bState = b[NGT_EVENT_LAYER]?.snapshot ?? getInstanceState(b.object)?.store?.snapshot;
             if (!aState || !bState)
                 return a.distance - b.distance;
             return bState.events.priority - aState.events.priority || a.distance - b.distance;
@@ -1471,7 +1662,8 @@ function createEvents(store) {
                         return;
                     });
                 }
-                const { raycaster, pointer, camera, internal } = instanceState?.store?.snapshot || rootState;
+                const eventLayer = hit[NGT_EVENT_LAYER];
+                const { raycaster, pointer, camera, internal } = eventLayer?.snapshot || 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) => {
@@ -1618,6 +1810,15 @@ function createEvents(store) {
             const hits = intersect(event, filter);
             // Only calculate distance for click events to avoid unnecessary math
             const delta = isClickEvent ? calculateDistance(event) : 0;
+            let missedNotified = false;
+            const notifyMissedOnce = () => {
+                if (missedNotified || !isClickEvent)
+                    return;
+                missedNotified = true;
+                const missedObjects = internal.interaction.filter((object) => !internal.initialHits.includes(object));
+                if (missedObjects.length > 0)
+                    pointerMissed(event, missedObjects);
+            };
             // Save initial coordinates on pointer-down
             if (name === 'pointerdown') {
                 internal.initialClick = [event.offsetX, event.offsetY];
@@ -1675,23 +1876,13 @@ function createEvents(store) {
                         // Forward all events back to their respective handlers with the exception of click events,
                         // which must use the initial target
                         if (!isClickEvent || internal.initialHits.includes(eventObject)) {
-                            // Get objects not in initialHits for pointer missed - avoid creating new arrays if possible
-                            const missedObjects = internal.interaction.filter((object) => !internal.initialHits.includes(object));
-                            // Call pointerMissed only if we have objects to notify
-                            if (missedObjects.length > 0) {
-                                pointerMissed(event, missedObjects);
-                            }
+                            notifyMissedOnce();
                             // Now call the handler
                             handler(data);
                         }
                     }
                     else if (isClickEvent && internal.initialHits.includes(eventObject)) {
-                        // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
-                        const missedObjects = internal.interaction.filter((object) => !internal.initialHits.includes(object));
-                        // Call pointerMissed only if we have objects to notify
-                        if (missedObjects.length > 0) {
-                            pointerMissed(event, missedObjects);
-                        }
+                        notifyMissedOnce();
                     }
                 }
             }
@@ -1750,10 +1941,22 @@ function attach(object, value, paths = [], useApplyProps = false) {
 function detach(parent, child, attachProp) {
     const childInstanceState = getInstanceState(child);
     if (childInstanceState) {
-        if (Array.isArray(attachProp))
-            attach(parent, childInstanceState.previousAttach, attachProp, childInstanceState.type === 'ngt-value');
+        const previousAttach = childInstanceState.previousAttach;
+        childInstanceState.previousAttach = undefined;
+        if (Array.isArray(attachProp)) {
+            const attachedValue = attachProp.reduce((value, key) => (value == null ? undefined : value[key]), parent);
+            // Property bindings are applied after Angular has appended every sibling.
+            // An auto-attached resource can therefore retain a stale restoration value
+            // after a later sibling has replaced the same slot. Only the resource that
+            // still owns the slot may restore it. Raw values use applyProps and can be
+            // represented by a transformed value (for example, a THREE.Color), so their
+            // detach path remains unconditional.
+            if (childInstanceState.type !== 'ngt-value' && attachedValue !== child)
+                return;
+            attach(parent, previousAttach, attachProp, childInstanceState.type === 'ngt-value');
+        }
         else
-            childInstanceState.previousAttach?.();
+            previousAttach?.();
     }
 }
 function assignEmpty(obj, base, shouldAssignStoreForApplyProps = false) {
@@ -1813,18 +2016,21 @@ function kebabToPascal(str) {
     }
     return pascalStr;
 }
-function propagateStoreRecursively(node, parentNode) {
+function propagateStoreRecursively(node, parentNode, storeOverride) {
     const iS = getInstanceState(node);
     const pIS = getInstanceState(parentNode);
     if (!iS || !pIS)
         return;
+    const store = storeOverride ?? pIS.store;
+    if (!store)
+        return;
     // assign store on child if not already exist
     // or child store is not the same as parent store
     // or child store is the parent of parent store
-    if (!iS.store || iS.store !== pIS.store || iS.store === pIS.store.snapshot.previousRoot) {
-        iS.store = pIS.store;
+    if (!iS.store || iS.store !== store || iS.store === store.snapshot.previousRoot) {
+        iS.store = store;
         // Call addInteraction if it exists
-        iS.addInteraction?.(pIS.store);
+        iS.addInteraction?.(store);
         // Collect all children (objects and nonObjects)
         const children = [
             ...(iS.objects ? untracked(iS.objects) : []),
@@ -1832,60 +2038,88 @@ function propagateStoreRecursively(node, parentNode) {
         ];
         // Recursively reassign the store for each child
         for (const child of children) {
-            propagateStoreRecursively(child, node);
+            propagateStoreRecursively(child, node, store);
         }
     }
 }
-function attachThreeNodes(parent, child) {
+function placeObject3DChild(parent, child, before) {
+    if (child.parent !== parent)
+        parent.add(child);
+    const currentIndex = parent.children.indexOf(child);
+    if (currentIndex < 0)
+        return;
+    parent.children.splice(currentIndex, 1);
+    const beforeIndex = before ? parent.children.indexOf(before) : -1;
+    const insertionIndex = beforeIndex < 0 ? parent.children.length : Math.min(beforeIndex, parent.children.length);
+    parent.children.splice(insertionIndex, 0, child);
+}
+function attachThreeNodes(parent, child, before, storeOverride) {
     const pIS = getInstanceState(parent);
     const cIS = getInstanceState(child);
     if (!pIS || !cIS) {
         throw new Error(`[NGT] THREE instances need to be prepared with local state.`);
     }
+    propagateStoreRecursively(child, parent, storeOverride);
+    if (untracked(cIS.parent) === parent) {
+        if (!cIS.attach &&
+            is.three(parent, 'isObject3D') &&
+            is.three(child, 'isObject3D')) {
+            placeObject3DChild(parent, child, before);
+            pIS.add?.(child, 'objects', before);
+        }
+        else {
+            // Attached resources have no physical sibling order. A logical move must
+            // not invoke their attach callback or overwrite their restoration value.
+            pIS.add?.(child, 'nonObjects', before);
+        }
+        invalidateInstance(parent);
+        return;
+    }
     // whether the child is added to the parent with parent.add()
     let added = false;
-    // propagate store recursively
-    propagateStoreRecursively(child, parent);
     if (cIS.attach) {
         const attachProp = cIS.attach;
         if (typeof attachProp === 'function') {
             let attachCleanUp = undefined;
             if (cIS.type === 'ngt-value') {
-                if (cIS.hierarchyStore.snapshot.parent !== parent) {
-                    cIS.setParent(parent);
-                }
                 // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
                 if (child.__ngt_renderer__[2 /* NgtRendererClassId.rawValue */] === undefined)
                     return;
+                if (cIS.hierarchyStore.snapshot.parent !== parent) {
+                    cIS.setParent(parent);
+                }
                 attachCleanUp = attachProp(parent, child.__ngt_renderer__[2 /* NgtRendererClassId.rawValue */], cIS.store);
             }
             else {
                 attachCleanUp = attachProp(parent, child, cIS.store);
             }
-            if (attachCleanUp)
-                cIS.previousAttach = attachCleanUp;
+            cIS.previousAttach = attachCleanUp;
         }
         else {
             // we skip attach none if set explicitly
             if (attachProp[0] === 'none') {
+                cIS.previousAttach = undefined;
+                pIS.add?.(child, 'nonObjects', before);
+                cIS.setParent(parent);
                 invalidateInstance(child);
+                invalidateInstance(parent);
                 return;
             }
             // handle material array
             if (attachProp[0] === 'material' &&
-                attachProp[1] &&
-                typeof Number(attachProp[1]) === 'number' &&
+                attachProp[1] !== undefined &&
+                !Number.isNaN(Number(attachProp[1])) &&
                 is.three(child, 'isMaterial') &&
                 !Array.isArray(parent['material'])) {
                 parent['material'] = [];
             }
             if (cIS.type === 'ngt-value') {
-                if (cIS.hierarchyStore.snapshot.parent !== parent) {
-                    cIS.setParent(parent);
-                }
                 // at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
                 if (child.__ngt_renderer__[2 /* NgtRendererClassId.rawValue */] === undefined)
                     return;
+                if (cIS.hierarchyStore.snapshot.parent !== parent) {
+                    cIS.setParent(parent);
+                }
                 // save prev value
                 cIS.previousAttach = attachProp.reduce((value, key) => value[key], parent);
                 attach(parent, child.__ngt_renderer__[2 /* NgtRendererClassId.rawValue */], attachProp, true);
@@ -1898,12 +2132,12 @@ function attachThreeNodes(parent, child) {
         }
     }
     else if (is.three(parent, 'isObject3D') && is.three(child, 'isObject3D')) {
-        parent.add(child);
+        placeObject3DChild(parent, child, before);
         added = true;
         cIS.addInteraction?.(cIS.store || pIS.store);
     }
     if (pIS.add) {
-        pIS.add(child, added ? 'objects' : 'nonObjects');
+        pIS.add(child, added ? 'objects' : 'nonObjects', before);
     }
     if (cIS.parent && untracked(cIS.parent) !== parent) {
         cIS.setParent(parent);
@@ -1915,7 +2149,7 @@ function attachThreeNodes(parent, child) {
     invalidateInstance(child);
     invalidateInstance(parent);
 }
-function removeThreeChild(child, parent, dispose) {
+function removeThreeChild(child, parent, dispose = false) {
     const pIS = getInstanceState(parent);
     const cIS = getInstanceState(child);
     // clear parent ref
@@ -1935,8 +2169,9 @@ function removeThreeChild(child, parent, dispose) {
     }
     // dispose
     const isPrimitive = cIS?.type && cIS.type === 'ngt-primitive';
-    if (!isPrimitive && child['dispose'] && !is.three(child, 'isScene')) {
-        queueMicrotask(() => child['dispose']());
+    if (dispose && !isPrimitive && child['dispose'] && !is.three(child, 'isScene')) {
+        const disposeInstance = child['dispose'].bind(child);
+        queueMicrotask(disposeInstance);
     }
     invalidateInstance(parent);
 }
@@ -1944,18 +2179,31 @@ function internalDestroyNode(node, removeChild) {
     const rS = node.__ngt_renderer__;
     if (!rS || rS[1 /* NgtRendererClassId.destroyed */])
         return;
-    for (const child of rS[6 /* NgtRendererClassId.children */].slice()) {
+    const iS = getInstanceState(node);
+    const physicalParent = iS?.parent ? untracked(iS.parent) : null;
+    if (physicalParent) {
+        removeThreeChild(node, physicalParent, false);
+    }
+    for (const child of rS[5 /* NgtRendererClassId.children */].slice()) {
+        const destructionOwner = rS[9 /* NgtRendererClassId.ownedNodes */] ? node : rS[8 /* NgtRendererClassId.owner */];
+        const childOwner = child.__ngt_renderer__[8 /* NgtRendererClassId.owner */];
         removeChild?.(node, child);
+        if (destructionOwner && childOwner && childOwner !== destructionOwner)
+            continue;
         internalDestroyNode(child, removeChild);
     }
     // clear out parent if haven't
-    rS[5 /* NgtRendererClassId.parent */] = undefined;
+    rS[4 /* NgtRendererClassId.parent */] = undefined;
     // clear out children
-    rS[6 /* NgtRendererClassId.children */].length = 0;
+    rS[5 /* NgtRendererClassId.children */].length = 0;
     // clear out NgtInstanceState
-    const iS = getInstanceState(node);
     if (iS) {
         const temp = iS;
+        const isPrimitive = iS.type === 'ngt-primitive';
+        if (!isPrimitive && node['dispose'] && !is.three(node, 'isScene')) {
+            const disposeInstance = node['dispose'].bind(node);
+            queueMicrotask(disposeInstance);
+        }
         iS.removeInteraction?.(iS.store);
         delete temp['onAttach'];
         delete temp['onUpdate'];
@@ -1978,13 +2226,12 @@ function internalDestroyNode(node, removeChild) {
             delete node['__ngt__'];
         }
     }
-    // clear our debugNode
-    rS[4 /* NgtRendererClassId.injector */] = undefined;
+    // clear renderer metadata
+    rS[6 /* NgtRendererClassId.parentOverride */] = undefined;
+    rS[7 /* NgtRendererClassId.anchor */] = undefined;
+    rS[8 /* NgtRendererClassId.owner */] = undefined;
+    rS[9 /* NgtRendererClassId.ownedNodes */]?.clear();
     if (rS[0 /* NgtRendererClassId.type */] === 'comment') {
-        delete node[NGT_INTERNAL_ADD_COMMENT_FLAG];
-        delete node[NGT_INTERNAL_SET_PARENT_COMMENT_FLAG];
-        delete node[NGT_CANVAS_CONTENT_FLAG];
-        delete node[NGT_PORTAL_CONTENT_FLAG];
         delete node[NGT_DOM_PARENT_FLAG];
     }
     // clear getAttribute if exist
@@ -1997,10 +2244,19 @@ function internalDestroyNode(node, removeChild) {
     rS[1 /* NgtRendererClassId.destroyed */] = true;
 }
 
+var _a$1;
 /**
  * Injection token for renderer factory options.
  */
 const NGT_RENDERER_OPTIONS = new InjectionToken('NGT_RENDERER_OPTIONS');
+/**
+ * Angular's public RendererType2 intentionally omits the component constructor. The runtime
+ * renderer type currently carries it as `type`; keep that private Angular dependency isolated
+ * here so upgrades have one compatibility seam to verify.
+ */
+function isNgtHTMLRendererType(type) {
+    return !!Reflect.get(type, 'type')?.[NGT_HTML_FLAG];
+}
 /**
  * Angular renderer factory for Three.js elements.
  *
@@ -2029,46 +2285,45 @@ class NgtRendererFactory2 {
         this.catalogue = injectCatalogue();
         this.document = inject(DOCUMENT);
         this.options = inject(NGT_RENDERER_OPTIONS, { optional: true }) || {};
-        this.rendererMap = new Map();
+        this.rendererByDelegate = new WeakMap();
     }
     createRenderer(hostElement, type) {
         const delegateRenderer = this.delegateRendererFactory.createRenderer(hostElement, type);
         if (!type)
             return delegateRenderer;
-        let renderer = this.rendererMap.get(type.id);
-        if (renderer) {
-            if (renderer instanceof NgtRenderer2) {
-                renderer.count += 1;
-                if (renderer.delegateRenderer !== delegateRenderer) {
-                    renderer.delegateRenderer = delegateRenderer;
+        if (isNgtHTMLRendererType(type))
+            return delegateRenderer;
+        if (hostElement) {
+            let hostRendererNode;
+            if (isRendererNode(hostElement)) {
+                hostRendererNode = hostElement;
+            }
+            else {
+                const logicalParent = delegateRenderer.parentNode(hostElement);
+                hostRendererNode = createRendererNode('platform', hostElement, this.document);
+                if (isRendererNode(logicalParent)) {
+                    insertRendererChildNode(logicalParent, hostRendererNode);
                 }
             }
-            return renderer;
+            markRendererViewHost(hostRendererNode);
         }
-        if (hostElement && !isRendererNode(hostElement)) {
-            createRendererNode('platform', hostElement, this.document);
-        }
-        if (Reflect.get(type, 'type')?.[NGT_HTML_FLAG]) {
-            this.rendererMap.set(type.id, delegateRenderer);
-            // patch delegate destroyNode so we can destroy this HTML node
-            // TODO: make sure we really need to do this
-            const originalDestroyNode = delegateRenderer.destroyNode?.bind(delegateRenderer);
-            if (!originalDestroyNode || !(NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG in originalDestroyNode)) {
-                delegateRenderer.destroyNode = (node) => {
-                    originalDestroyNode?.(node);
-                    if (node !== hostElement)
-                        return;
-                    internalDestroyNode(node, null);
-                };
-                Object.assign(delegateRenderer.destroyNode, {
-                    [NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG]: true,
-                });
-            }
-            return delegateRenderer;
+        let renderer = this.rendererByDelegate.get(delegateRenderer);
+        if (!renderer) {
+            renderer = new NgtRenderer2(delegateRenderer, this.catalogue, this.document, this.options);
+            this.rendererByDelegate.set(delegateRenderer, renderer);
         }
-        this.rendererMap.set(type.id, (renderer = new NgtRenderer2(delegateRenderer, this.catalogue, this.document, this.options)));
         return renderer;
     }
+    begin() {
+        this.delegateRendererFactory.begin?.();
+    }
+    end() {
+        flushAncestorNotifications();
+        this.delegateRendererFactory.end?.();
+    }
+    whenRenderingDone() {
+        return this.delegateRendererFactory.whenRenderingDone?.() ?? Promise.resolve();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgtRendererFactory2, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgtRendererFactory2 }); }
 }
@@ -2088,40 +2343,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * @internal
  */
 class NgtRenderer2 {
-    constructor(delegateRenderer, catalogue, document, options, count = 1) {
+    static { _a$1 = NGT_RENDERER_CONTEXT_FLAG; }
+    constructor(delegateRenderer, catalogue, document, options) {
         this.delegateRenderer = delegateRenderer;
         this.catalogue = catalogue;
         this.document = document;
         this.options = options;
-        this.count = count;
-        this.argsInjectors = [];
-        this.parentInjectors = [];
-        this.destroyNode = (node) => {
-            internalDestroyNode(node, this.removeChild.bind(this));
+        this.directiveInjectors = [];
+        this.parameterKeys = new WeakMap();
+        this.attachedListeners = new WeakMap();
+        this.updatedListeners = new WeakMap();
+        this[_a$1] = (injector, callback) => {
+            this.directiveInjectors.push(injector);
+            try {
+                return callback();
+            }
+            finally {
+                this.directiveInjectors.pop();
+            }
         };
-        this.addClass = this.delegateRenderer.addClass.bind(this.delegateRenderer);
-        this.removeClass = this.delegateRenderer.removeClass.bind(this.delegateRenderer);
-        this.setStyle = this.delegateRenderer.setStyle.bind(this.delegateRenderer);
-        this.removeStyle = this.delegateRenderer.removeStyle.bind(this.delegateRenderer);
-        this.selectRootElement = this.delegateRenderer.selectRootElement.bind(this.delegateRenderer);
-        this.nextSibling = this.delegateRenderer.nextSibling.bind(this.delegateRenderer);
-        this.setValue = this.delegateRenderer.setValue.bind(this.delegateRenderer);
+        this.data = { ...this.delegateRenderer.data, __ngt_renderer__: true };
         if (!this.options.verbose) {
             this.options.verbose = false;
         }
     }
-    get data() {
-        return { ...this.delegateRenderer.data, __ngt_renderer__: true };
-    }
     destroy() {
-        if (this.count > 1) {
-            this.count -= 1;
-            return;
-        }
-        // this is the last instance of the same NgtRenderer2
-        this.count = 0;
-        this.argsInjectors = [];
-        this.parentInjectors = [];
+        this.delegateRenderer.destroy();
     }
     createElement(name, namespace) {
         const platformElement = this.delegateRenderer.createElement(name, namespace);
@@ -2132,8 +2379,8 @@ class NgtRenderer2 {
             return createRendererNode('three', prepare(platformElement, 'ngt-value'), this.document);
         }
         const [injectedArgs, injectedParent] = [
-            this.getNgtDirective(NgtArgs, this.argsInjectors)?.value || [],
-            this.getNgtDirective(NgtParent, this.parentInjectors)?.value,
+            this.getNgtDirective(NgtArgs)?.value || [],
+            this.getNgtDirective(NgtParent)?.value,
         ];
         if (name === 'ngt-primitive') {
             if (!injectedArgs[0])
@@ -2145,7 +2392,7 @@ class NgtRenderer2 {
             prepare(object, 'ngt-primitive');
             const primitiveRendererNode = createRendererNode('three', object, this.document);
             if (injectedParent) {
-                primitiveRendererNode.__ngt_renderer__[5 /* NgtRendererClassId.parent */] =
+                primitiveRendererNode.__ngt_renderer__[6 /* NgtRendererClassId.parentOverride */] =
                     injectedParent;
             }
             return primitiveRendererNode;
@@ -2175,7 +2422,7 @@ class NgtRenderer2 {
                 instanceState.attach = ['material'];
             }
             if (injectedParent) {
-                rendererNode.__ngt_renderer__[5 /* NgtRendererClassId.parent */] =
+                rendererNode.__ngt_renderer__[6 /* NgtRendererClassId.parentOverride */] =
                     injectedParent;
             }
             return rendererNode;
@@ -2185,31 +2432,24 @@ class NgtRenderer2 {
     createComment(value) {
         const commentNode = this.delegateRenderer.createComment(value);
         const commentRendererNode = createRendererNode('comment', commentNode, this.document);
-        // NOTE: we attach an arrow function to the Comment node
-        //  In our directives, we can call this function to then start tracking the RendererNode
-        //  this is done to limit the amount of Nodes we need to process for getCreationState
-        Object.assign(commentRendererNode, {
-            [NGT_INTERNAL_ADD_COMMENT_FLAG]: (type, injector) => {
-                if (type === 'args') {
-                    this.argsInjectors.push(injector);
-                }
-                else if (type === 'parent') {
-                    Object.assign(commentRendererNode, {
-                        [NGT_INTERNAL_SET_PARENT_COMMENT_FLAG]: (ngtParent) => {
-                            commentRendererNode.__ngt_renderer__[5 /* NgtRendererClassId.parent */] = ngtParent;
-                        },
-                    });
-                    this.parentInjectors.push(injector);
-                }
-                commentRendererNode.__ngt_renderer__[4 /* NgtRendererClassId.injector */] = injector;
-            },
-        });
         return commentRendererNode;
     }
     createText(value) {
         const textNode = this.delegateRenderer.createText(value);
         return createRendererNode('text', textNode, this.document);
     }
+    destroyNode(node) {
+        const shouldDelegate = !isRendererNode(node) || node.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'three';
+        if (isRendererNode(node)) {
+            this.destroyOwnedNodes(node);
+            // Unlink from the owner's set but retain the owner marker until recursive
+            // destruction has used it to protect foreign/projected descendants.
+            releaseRendererOwner(node, false);
+        }
+        internalDestroyNode(node, this.removeChild.bind(this));
+        if (shouldDelegate)
+            this.delegateRenderer.destroyNode?.(node);
+    }
     appendChild(parent, newChild, refChild, isMove) {
         const delegatedFn = refChild
             ? this.delegateRenderer.insertBefore.bind(this.delegateRenderer, parent, newChild, refChild, isMove)
@@ -2221,10 +2461,13 @@ class NgtRenderer2 {
                 console.warn('[NGT dev mode] One of parent or child is not a renderer node.', { parent, newChild });
             return delegatedFn();
         }
+        if (parent === newChild || refChild === newChild)
+            return;
+        this.setNodeRelationship(parent, newChild, refChild);
         if (cRS[0 /* NgtRendererClassId.type */] === 'comment') {
-            // if child is a comment, we'll set the parent then bail.
+            // A comment is a logical anchor. It remains in the ordered host tree even when
+            // the physical Three graph has no corresponding node.
             // comment usually means it's part of a templateRef ViewContainerRef or structural directive
-            setRendererParentNode(newChild, parent);
             // if parent is not three, we'll delegate to the renderer
             if (pRS[0 /* NgtRendererClassId.type */] !== 'three') {
                 delegatedFn();
@@ -2232,52 +2475,43 @@ class NgtRenderer2 {
             return;
         }
         if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'platform') {
-            if (newChild[NGT_DOM_PARENT_FLAG] && newChild[NGT_DOM_PARENT_FLAG] instanceof HTMLElement) {
-                return this.delegateRenderer.appendChild(newChild[NGT_DOM_PARENT_FLAG], newChild);
+            const threeParent = this.findNearestThreeParent(parent);
+            const portalStore = this.findNearestPortalStore(parent);
+            const insertionReference = threeParent
+                ? this.findThreeReferenceAfterLogicalNode(threeParent, newChild)
+                : null;
+            if (newChild[NGT_DOM_PARENT_FLAG]) {
+                this.delegateRenderer.appendChild(newChild[NGT_DOM_PARENT_FLAG], newChild);
             }
-            if (pRS[5 /* NgtRendererClassId.parent */] && !cRS[5 /* NgtRendererClassId.parent */]) {
-                return this.appendChild(pRS[5 /* NgtRendererClassId.parent */], newChild);
+            else {
+                delegatedFn();
             }
-            return delegatedFn();
+            if (threeParent)
+                this.attachThreeDescendants(threeParent, newChild, insertionReference, portalStore);
+            return;
         }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
-            return this.appendThreeRendererNodes(parent, newChild);
+        if (isRendererNodeType(parent, 'three') && isRendererNodeType(newChild, 'three')) {
+            return this.appendThreeRendererNodes(parent, newChild, refChild);
         }
-        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);
+        if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && isRendererNodeType(newChild, 'three')) {
+            const threeParent = this.findNearestThreeParent(parent);
+            if (threeParent) {
+                this.appendThreeRendererNodes(threeParent, newChild, refChild, this.findNearestPortalStore(parent));
             }
-            // platform can also have normal parentNode
-            const platformParentNode = this.delegateRenderer.parentNode(parent);
-            if (platformParentNode) {
-                return this.appendChild(platformParentNode, newChild);
-            }
-            // if not, set up parent and child relationship for this pair then bail
-            this.setNodeRelationship(parent, newChild);
             return;
         }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'platform') {
-            if (!cRS[5 /* NgtRendererClassId.parent */]) {
-                setRendererParentNode(newChild, parent);
-            }
-            for (const child of cRS[6 /* NgtRendererClassId.children */]) {
-                this.appendChild(parent, child);
-            }
-            for (const platformChildNode of newChild['childNodes'] || []) {
-                if (!isRendererNode(platformChildNode) ||
-                    platformChildNode.__ngt_renderer__[0 /* NgtRendererClassId.type */] !== 'platform')
-                    continue;
-                this.appendChild(parent, platformChildNode);
-            }
+        if (isRendererNodeType(parent, 'three') &&
+            (cRS[0 /* NgtRendererClassId.type */] === 'platform' ||
+                cRS[0 /* NgtRendererClassId.type */] === 'portal' ||
+                cRS[0 /* NgtRendererClassId.type */] === 'text')) {
+            if (isRendererNodeType(newChild, 'platform'))
+                this.attachThreeDescendants(parent, newChild);
             return;
         }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'portal' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
-            if (!cRS[5 /* NgtRendererClassId.parent */] && pRS[3 /* NgtRendererClassId.portalContainer */]) {
-                return this.appendChild(pRS[3 /* NgtRendererClassId.portalContainer */], newChild);
-            }
+        if (isRendererNodeType(parent, 'portal') && isRendererNodeType(newChild, 'three')) {
+            const portalContainer = parent.__ngt_renderer__[3 /* NgtRendererClassId.portalContainer */];
+            if (portalContainer)
+                return this.appendThreeRendererNodes(portalContainer, newChild, refChild, this.portalStore(parent));
             return;
         }
         if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'portal') {
@@ -2286,14 +2520,12 @@ class NgtRenderer2 {
         return delegatedFn();
     }
     insertBefore(parent, newChild, refChild, isMove) {
-        // if both are comments and the reference child is NgtCanvasContent, we'll assign the same flag to the newChild
-        // this means that the NgtCanvas component is embedding. This flag allows the Renderer to get the root scene
-        // when it tries to attach the template under `ng-template[canvasContent]`
-        if (refChild &&
-            refChild[NGT_CANVAS_CONTENT_FLAG] &&
-            refChild instanceof Comment &&
-            newChild instanceof Comment) {
-            Object.assign(newChild, { [NGT_CANVAS_CONTENT_FLAG]: refChild[NGT_CANVAS_CONTENT_FLAG] });
+        const referenceAnchor = getRendererAnchor(refChild);
+        if (referenceAnchor &&
+            (referenceAnchor.kind === 'canvas' || referenceAnchor.kind === 'portal') &&
+            isRendererNode(newChild) &&
+            newChild.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'comment') {
+            setRendererAnchor(newChild, referenceAnchor);
         }
         // if there is no parent, we delegate
         if (!parent) {
@@ -2301,21 +2533,19 @@ class NgtRenderer2 {
         }
         return this.appendChild(parent, newChild, refChild, isMove);
     }
-    removeChild(parent, oldChild, isHostElement) {
+    removeChild(parent, oldChild, isHostElement, requireSynchronousElementRemoval) {
         if (parent === null) {
             parent = this.parentNode(oldChild);
         }
         const cRS = oldChild.__ngt_renderer__;
         if (!cRS) {
             try {
-                return this.delegateRenderer.removeChild(parent, oldChild, isHostElement);
+                return this.delegateRenderer.removeChild(parent, oldChild, isHostElement, requireSynchronousElementRemoval);
             }
             catch {
                 return;
             }
         }
-        // disassociate things from oldChild
-        cRS[5 /* NgtRendererClassId.parent */] = null;
         // if parent is still undefined
         if (parent == null) {
             if (cRS[1 /* NgtRendererClassId.destroyed */]) {
@@ -2328,39 +2558,38 @@ class NgtRenderer2 {
         }
         const pRS = parent.__ngt_renderer__;
         if (!pRS) {
-            return this.delegateRenderer.removeChild(parent, oldChild, isHostElement);
+            return this.delegateRenderer.removeChild(parent, oldChild, isHostElement, requireSynchronousElementRemoval);
         }
-        const childIndex = pRS[6 /* NgtRendererClassId.children */].indexOf(oldChild);
-        if (childIndex >= 0) {
-            // disassociate oldChild from parent children
-            pRS[6 /* NgtRendererClassId.children */].splice(childIndex, 1);
+        if (cRS[0 /* NgtRendererClassId.type */] !== 'three') {
+            this.detachThreeDescendants(oldChild);
         }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
-            return removeThreeChild(oldChild, parent, true);
+        removeRendererChildNode(parent, oldChild);
+        if (cRS[0 /* NgtRendererClassId.type */] === 'three') {
+            const childState = getInstanceState(oldChild);
+            const threeParent = childState?.parent ? untracked(childState.parent) : null;
+            if (threeParent) {
+                return removeThreeChild(oldChild, threeParent, false);
+            }
+            return;
         }
         if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'platform') {
-            return this.delegateRenderer.removeChild(parent, oldChild, isHostElement);
+            return this.delegateRenderer.removeChild(parent, oldChild, isHostElement, requireSynchronousElementRemoval);
         }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'three' && cRS[0 /* NgtRendererClassId.type */] === 'platform') {
+        if (pRS[0 /* NgtRendererClassId.type */] === 'three' &&
+            (cRS[0 /* NgtRendererClassId.type */] === 'platform' ||
+                cRS[0 /* NgtRendererClassId.type */] === 'portal' ||
+                cRS[0 /* NgtRendererClassId.type */] === 'text')) {
             return;
         }
-        if (pRS[0 /* NgtRendererClassId.type */] === 'platform' && cRS[0 /* NgtRendererClassId.type */] === 'three') {
-            const childLS = getInstanceState(oldChild);
-            if (!childLS)
-                return;
-            const threeParent = childLS.parent ? untracked(childLS.parent) : null;
-            if (!threeParent)
-                return;
-            return this.removeChild(threeParent, oldChild);
-        }
-        return this.delegateRenderer.removeChild(parent, oldChild, isHostElement);
+        return this.delegateRenderer.removeChild(parent, oldChild, isHostElement, requireSynchronousElementRemoval);
     }
     parentNode(node) {
-        if (node &&
-            (node[NGT_CANVAS_CONTENT_FLAG] || node[NGT_PORTAL_CONTENT_FLAG]) &&
-            node instanceof Comment &&
-            isRendererNode(node)) {
-            const store = node[NGT_CANVAS_CONTENT_FLAG] || node[NGT_PORTAL_CONTENT_FLAG];
+        const anchor = getRendererAnchor(node);
+        if (anchor &&
+            (anchor.kind === 'canvas' || anchor.kind === 'portal') &&
+            isRendererNode(node) &&
+            node.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'comment') {
+            const store = anchor.store;
             // this should not happen but if it does, we'll delegate to the renderer
             if (!store) {
                 return this.delegateRenderer.parentNode(node);
@@ -2370,24 +2599,18 @@ class NgtRenderer2 {
             if (!rootScene) {
                 return this.delegateRenderer.parentNode(node);
             }
-            // if root scene is not a renderer node, we'll make it a renderer node here
-            if (!(NGT_RENDERER_NODE_FLAG in rootScene)) {
-                const sceneRendererNode = createRendererNode('three', rootScene, this.document);
-                // 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])) {
-                const portalContentParent = node[NGT_DOM_PARENT_FLAG];
+            // if root scene is not a Three renderer node, make it one here
+            const rendererRootScene = isRendererNodeType(rootScene, 'three')
+                ? rootScene
+                : createRendererNode('three', rootScene, this.document);
+            if (anchor.kind === 'portal' && anchor.domParent && isRendererNode(anchor.domParent)) {
+                const portalContentParent = anchor.domParent;
                 const portalContentParentRS = portalContentParent.__ngt_renderer__;
-                if (!portalContentParentRS[3 /* NgtRendererClassId.portalContainer */]) {
-                    portalContentParentRS[3 /* NgtRendererClassId.portalContainer */] = rootScene;
-                }
+                portalContentParentRS[3 /* NgtRendererClassId.portalContainer */] = rendererRootScene;
             }
-            return rootScene;
+            return rendererRootScene;
         }
-        const rendererParentNode = node.__ngt_renderer__?.[5 /* NgtRendererClassId.parent */];
+        const rendererParentNode = node.__ngt_renderer__?.[4 /* NgtRendererClassId.parent */];
         // returns the renderer parent node if it exists, otherwise returns the delegateRenderer parentNode
         return rendererParentNode ?? this.delegateRenderer.parentNode(node);
     }
@@ -2396,6 +2619,15 @@ class NgtRenderer2 {
         if (!rS || rS[1 /* NgtRendererClassId.destroyed */])
             return this.delegateRenderer.removeAttribute(el, name, namespace);
         if (rS[0 /* NgtRendererClassId.type */] === 'three') {
+            const instanceState = getInstanceState(el);
+            const parent = (instanceState?.parent ? untracked(instanceState.parent) : null) ?? this.findTargetThreeParent(el);
+            if (name === 'attach') {
+                this.updateAttachment(el, undefined, parent);
+                return;
+            }
+            applyProps(el, { [name]: undefined });
+            if (name === 'geometry')
+                untracked(() => instanceState?.updateGeometryStamp());
             return;
         }
         return this.delegateRenderer.removeAttribute(el, name, namespace);
@@ -2411,12 +2643,9 @@ class NgtRenderer2 {
         }
         if (rS[0 /* NgtRendererClassId.type */] === 'three') {
             if (name === 'attach') {
-                const paths = value.split('.');
-                if (paths.length) {
-                    const instanceState = getInstanceState(el);
-                    if (instanceState)
-                        instanceState.attach = paths;
-                }
+                const instanceState = getInstanceState(el);
+                const parent = (instanceState?.parent ? untracked(instanceState.parent) : null) ?? this.findTargetThreeParent(el);
+                this.updateAttachment(el, value, parent);
                 return;
             }
             // coercion for primitive values
@@ -2443,44 +2672,55 @@ class NgtRenderer2 {
         // NOTE: untrack all signal updates because this is during setProperty which is a reactive context
         // attaching potentially updates signals which is not allowed
         const rS = el.__ngt_renderer__;
-        if (!rS || rS[1 /* NgtRendererClassId.destroyed */]) {
+        if (!rS)
+            return this.delegateRenderer.setProperty(el, name, value);
+        if (rS[1 /* NgtRendererClassId.destroyed */]) {
             this.options.verbose &&
                 console.warn('[NGT dev mode] setProperty is invoked on destroyed renderer node.', { el, name, value });
             return;
         }
-        if (rS[0 /* NgtRendererClassId.type */] === 'three') {
+        if (isRendererNodeType(el, 'three')) {
+            const threeState = el.__ngt_renderer__;
             const instanceState = getInstanceState(el);
-            const parent = instanceState?.hierarchyStore.snapshot.parent || rS[5 /* NgtRendererClassId.parent */];
+            const attachedParent = instanceState?.hierarchyStore.snapshot.parent ?? null;
+            const parent = attachedParent ?? this.findTargetThreeParent(el);
             if (name === 'parameters') {
+                const parameters = value && typeof value === 'object' ? { ...value } : {};
                 // NOTE: short-cut for null raycast to prevent upstream from creating a nullRaycast property
-                if ('raycast' in value && value['raycast'] === null) {
-                    value['raycast'] = () => null;
+                if ('raycast' in parameters && parameters['raycast'] === null) {
+                    parameters['raycast'] = () => null;
                 }
-                applyProps(el, value);
-                if ('geometry' in value && is.three(value['geometry'], 'isBufferGeometry')) {
+                const previousKeys = this.parameterKeys.get(el) ?? new Set();
+                const nextKeys = new Set(Object.keys(parameters));
+                const removedParameters = Object.fromEntries([...previousKeys]
+                    .filter((key) => key !== 'attach' && !nextKeys.has(key))
+                    .map((key) => [key, undefined]));
+                const { attach: nextAttach, ...nextParameters } = parameters;
+                applyProps(el, { ...removedParameters, ...nextParameters });
+                this.parameterKeys.set(el, nextKeys);
+                if (nextKeys.has('geometry') || (previousKeys.has('geometry') && !nextKeys.has('geometry'))) {
                     untracked(() => instanceState?.updateGeometryStamp());
                 }
-                if ('attach' in value && value['attach'] !== undefined) {
-                    if (instanceState)
-                        instanceState.attach = this.normalizeAttach(value['attach']);
-                    if (parent)
-                        untracked(() => attachThreeNodes(parent, el));
+                if ('attach' in parameters || previousKeys.has('attach')) {
+                    this.updateAttachment(el, nextAttach, parent);
                 }
                 return;
             }
             // [rawValue]
             if (instanceState?.type === 'ngt-value' && name === 'rawValue') {
-                rS[2 /* NgtRendererClassId.rawValue */] = value;
-                if (parent)
-                    untracked(() => attachThreeNodes(parent, el));
+                untracked(() => {
+                    if (attachedParent)
+                        removeThreeChild(el, attachedParent, false);
+                    threeState[2 /* NgtRendererClassId.rawValue */] = value;
+                    if (parent) {
+                        attachThreeNodes(parent, el, undefined, instanceState.store ?? undefined);
+                    }
+                });
                 return;
             }
             // [attach]
             if (name === 'attach') {
-                if (instanceState)
-                    instanceState.attach = this.normalizeAttach(value);
-                if (parent)
-                    untracked(() => attachThreeNodes(parent, el));
+                this.updateAttachment(el, value, parent);
                 return;
             }
             // NOTE: short-cut for null raycast to prevent upstream from creating a nullRaycast property
@@ -2488,7 +2728,7 @@ class NgtRenderer2 {
                 value = () => null;
             }
             applyProps(el, { [name]: value });
-            if (instanceState && name === 'geometry' && is.three(value, 'isBufferGeometry')) {
+            if (instanceState && name === 'geometry') {
                 untracked(() => {
                     instanceState.updateGeometryStamp();
                 });
@@ -2497,13 +2737,13 @@ class NgtRenderer2 {
         }
         return this.delegateRenderer.setProperty(el, name, value);
     }
-    listen(target, eventName, callback) {
+    listen(target, eventName, callback, options) {
         if (typeof target === 'string') {
-            return this.delegateRenderer.listen(target, eventName, callback);
+            return this.delegateRenderer.listen(target, eventName, callback, options);
         }
         const rS = target.__ngt_renderer__;
         if (!rS) {
-            return this.delegateRenderer.listen(target, eventName, callback);
+            return this.delegateRenderer.listen(target, eventName, callback, options);
         }
         if (rS[1 /* NgtRendererClassId.destroyed */])
             return () => { };
@@ -2518,43 +2758,34 @@ class NgtRenderer2 {
                 return () => { };
             }
             if (eventName === 'attached') {
-                iS.onAttach = callback;
-                const parent = iS.parent && untracked(iS.parent);
-                if (parent)
-                    iS.onAttach({ parent, node: target });
-                return () => {
-                    iS.onAttach = undefined;
-                };
+                return this.registerWithOptions(callback, options, (listener) => this.listenToInstanceEvent(target, 'attached', listener));
             }
             if (eventName === 'updated') {
-                iS.onUpdate = callback;
-                return () => {
-                    iS.onUpdate = undefined;
-                };
+                return this.registerWithOptions(callback, options, (listener) => this.listenToInstanceEvent(target, 'updated', listener));
             }
             if (THREE_NATIVE_EVENTS.includes(eventName) && target instanceof THREE.EventDispatcher) {
                 // NOTE: rename to dispose because that's the event type, not disposed.
                 if (eventName === 'disposed') {
                     eventName = 'dispose';
                 }
-                if (target.parent &&
-                    (eventName === 'added' || eventName === 'removed')) {
-                    callback({ type: eventName, target });
-                }
-                target.addEventListener(eventName, callback);
-                return () => {
-                    target.removeEventListener(eventName, callback);
-                };
+                return this.registerWithOptions(callback, options, (listener) => {
+                    target.addEventListener(eventName, listener);
+                    if (target.parent && eventName === 'added') {
+                        listener({ type: eventName, target });
+                    }
+                    return () => target.removeEventListener(eventName, listener);
+                });
             }
-            const cleanup = iS.setPointerEvent?.(eventName, callback) || (() => { });
+            const cleanup = this.registerWithOptions(callback, options, (listener) => iS.setPointerEvent?.(eventName, listener) || (() => { }));
             // this means the object has already been attached to the parent and has its store propagated
             if (iS.store)
                 iS.addInteraction?.(iS.store);
             return cleanup;
         }
-        return this.delegateRenderer.listen(target, eventName, callback);
+        return this.delegateRenderer.listen(target, eventName, callback, options);
     }
-    appendThreeRendererNodes(parent, child) {
+    appendThreeRendererNodes(parent, child, refChild, storeOverride) {
+        parent = child.__ngt_renderer__[6 /* NgtRendererClassId.parentOverride */] ?? parent;
         // if parent and child are the same, skip
         if (parent === child) {
             this.options.verbose &&
@@ -2564,31 +2795,226 @@ class NgtRenderer2 {
                 });
             return;
         }
-        const cIS = getInstanceState(child);
-        // if child is already attached to a parent, skip
-        if (cIS?.hierarchyStore.snapshot.parent) {
-            this.options.verbose &&
-                console.warn('[NGT dev mode] appending THREE.js parent and child but child is already attached', {
-                    parent,
-                    child,
-                });
-            return;
+        if (!is.instance(parent) || !is.instance(child)) {
+            throw new Error('[NGT] THREE renderer nodes need to be prepared with local instance state.');
+        }
+        const childState = getInstanceState(child);
+        const currentParent = childState?.parent ? untracked(childState.parent) : null;
+        if (currentParent && currentParent !== parent) {
+            removeThreeChild(child, currentParent, false);
         }
-        // set the relationship
-        this.setNodeRelationship(parent, child);
-        // attach THREE child
-        attachThreeNodes(parent, child);
+        const before = this.findThreeInsertionReference(parent, child, refChild);
+        const anchor = getRendererAnchor(refChild);
+        const attachmentStore = storeOverride ?? (anchor?.kind === 'canvas' || anchor?.kind === 'portal' ? anchor.store : undefined);
+        attachThreeNodes(parent, child, is.instance(before) ? before : null, attachmentStore);
         return;
     }
-    setNodeRelationship(parent, child) {
-        setRendererParentNode(child, parent);
-        addRendererChildNode(parent, child);
+    setNodeRelationship(parent, child, refChild) {
+        const anchor = getRendererAnchor(refChild);
+        const logicalParent = anchor?.kind === 'portal' && anchor.domParent && isRendererNode(anchor.domParent)
+            ? anchor.domParent
+            : parent;
+        insertRendererChildNode(logicalParent, child, refChild);
+    }
+    findNearestThreeParent(node) {
+        let current = node;
+        while (current && isRendererNode(current)) {
+            const state = current.__ngt_renderer__;
+            if (state[0 /* NgtRendererClassId.type */] === 'three')
+                return current;
+            if (state[0 /* NgtRendererClassId.type */] === 'portal' && state[3 /* NgtRendererClassId.portalContainer */]) {
+                return state[3 /* NgtRendererClassId.portalContainer */];
+            }
+            current = state[4 /* NgtRendererClassId.parent */];
+        }
+        return null;
+    }
+    findTargetThreeParent(node) {
+        if (!isRendererNodeType(node, 'three'))
+            return null;
+        const state = node.__ngt_renderer__;
+        const parentOverride = state[6 /* NgtRendererClassId.parentOverride */];
+        if (parentOverride && is.instance(parentOverride))
+            return parentOverride;
+        const logicalParent = this.findNearestThreeParent(state[4 /* NgtRendererClassId.parent */]);
+        return logicalParent && is.instance(logicalParent) ? logicalParent : null;
+    }
+    portalStore(node) {
+        const anchor = getRendererAnchor(node);
+        return anchor?.kind === 'portal' ? anchor.store : undefined;
+    }
+    findNearestPortalStore(node) {
+        let current = node;
+        while (current && isRendererNode(current)) {
+            const store = this.portalStore(current);
+            if (store)
+                return store;
+            current = current.__ngt_renderer__[4 /* NgtRendererClassId.parent */];
+        }
+        return undefined;
+    }
+    findFirstThreeDescendant(node, physicalParent) {
+        if (!node || !isRendererNode(node))
+            return null;
+        const state = node.__ngt_renderer__;
+        if (isRendererNodeType(node, 'three')) {
+            if (!is.instance(node) || !is.instance(physicalParent))
+                return null;
+            if (!is.three(node, 'isObject3D'))
+                return null;
+            if (!is.three(physicalParent, 'isObject3D'))
+                return null;
+            const instanceState = getInstanceState(node);
+            if (instanceState?.parent && untracked(instanceState.parent) === physicalParent) {
+                if (physicalParent.children.includes(node))
+                    return node;
+            }
+            return null;
+        }
+        for (const child of state[5 /* NgtRendererClassId.children */]) {
+            const descendant = this.findFirstThreeDescendant(child, physicalParent);
+            if (descendant)
+                return descendant;
+        }
+        return null;
+    }
+    findThreeInsertionReference(physicalParent, child, requestedRef) {
+        const directReference = this.findFirstThreeDescendant(requestedRef, physicalParent);
+        if (directReference)
+            return directReference;
+        return this.findThreeReferenceAfterLogicalNode(physicalParent, child);
+    }
+    findThreeReferenceAfterLogicalNode(physicalParent, node) {
+        let current = node;
+        while (current) {
+            const logicalParent = current.__ngt_renderer__[4 /* NgtRendererClassId.parent */];
+            if (!logicalParent || !isRendererNode(logicalParent))
+                return null;
+            const siblings = logicalParent.__ngt_renderer__[5 /* NgtRendererClassId.children */];
+            const currentIndex = siblings.indexOf(current);
+            for (let index = currentIndex + 1; index < siblings.length; index++) {
+                const reference = this.findFirstThreeDescendant(siblings[index], physicalParent);
+                if (reference)
+                    return reference;
+            }
+            if (logicalParent === physicalParent)
+                return null;
+            current = logicalParent;
+        }
+        return null;
+    }
+    attachThreeDescendants(parent, node, refChild, storeOverride) {
+        for (const child of node.__ngt_renderer__[5 /* NgtRendererClassId.children */]) {
+            if (child.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+                this.appendThreeRendererNodes(parent, child, refChild, storeOverride);
+            }
+            else {
+                this.attachThreeDescendants(parent, child, refChild, storeOverride);
+            }
+        }
+    }
+    detachThreeDescendants(node) {
+        for (const child of node.__ngt_renderer__[5 /* NgtRendererClassId.children */]) {
+            if (child.__ngt_renderer__[0 /* NgtRendererClassId.type */] === 'three') {
+                const instanceState = getInstanceState(child);
+                const physicalParent = instanceState?.parent ? untracked(instanceState.parent) : null;
+                if (physicalParent) {
+                    removeThreeChild(child, physicalParent, false);
+                }
+            }
+            else {
+                this.detachThreeDescendants(child);
+            }
+        }
+    }
+    destroyOwnedNodes(host) {
+        const ownedNodes = host.__ngt_renderer__[9 /* NgtRendererClassId.ownedNodes */];
+        if (!ownedNodes)
+            return;
+        for (const ownedNode of [...ownedNodes]) {
+            releaseRendererOwner(ownedNode, false);
+            internalDestroyNode(ownedNode, this.removeChild.bind(this));
+        }
+        ownedNodes.clear();
+    }
+    listenToInstanceEvent(target, eventName, callback) {
+        const instanceState = getInstanceState(target);
+        if (!instanceState)
+            return () => { };
+        const registry = eventName === 'attached' ? this.attachedListeners : this.updatedListeners;
+        let bucket = registry.get(target);
+        if (!bucket) {
+            const listeners = new Map();
+            const existing = eventName === 'attached' ? instanceState.onAttach : instanceState.onUpdate;
+            if (existing)
+                listeners.set(Symbol('existing'), existing);
+            const dispatch = (event) => {
+                for (const listener of [...listeners.values()])
+                    listener(event);
+            };
+            bucket = { listeners, dispatch };
+            registry.set(target, bucket);
+            if (eventName === 'attached')
+                instanceState.onAttach = dispatch;
+            else
+                instanceState.onUpdate = dispatch;
+        }
+        const token = Symbol(eventName);
+        bucket.listeners.set(token, callback);
+        if (eventName === 'attached') {
+            const parent = instanceState.parent && untracked(instanceState.parent);
+            if (parent)
+                callback({ parent, node: target });
+        }
+        let active = true;
+        return () => {
+            if (!active)
+                return;
+            active = false;
+            if (!bucket?.listeners.delete(token) || bucket.listeners.size > 0)
+                return;
+            registry.delete(target);
+            if (eventName === 'attached' && instanceState.onAttach === bucket.dispatch) {
+                instanceState.onAttach = undefined;
+            }
+            else if (eventName === 'updated' && instanceState.onUpdate === bucket.dispatch) {
+                instanceState.onUpdate = undefined;
+            }
+        };
     }
-    getNgtDirective(directive, injectors) {
+    registerWithOptions(callback, options, register) {
+        if (!options?.once)
+            return register(callback);
+        let cleanup;
+        let cleanupPending = false;
+        let active = true;
+        const onceCallback = (event) => {
+            if (!active)
+                return;
+            active = false;
+            try {
+                return callback(event);
+            }
+            finally {
+                if (cleanup)
+                    cleanup();
+                else
+                    cleanupPending = true;
+            }
+        };
+        cleanup = register(onceCallback);
+        if (cleanupPending)
+            cleanup();
+        return () => {
+            active = false;
+            cleanup?.();
+        };
+    }
+    getNgtDirective(directive) {
         let directiveInstance;
-        let i = injectors.length - 1;
+        let i = this.directiveInjectors.length - 1;
         while (i >= 0) {
-            const injector = injectors[i];
+            const injector = this.directiveInjectors[i];
             const instance = injector.get(directive, null);
             if (instance && typeof instance === 'object' && instance.validate()) {
                 directiveInstance = instance;
@@ -2599,12 +3025,75 @@ class NgtRenderer2 {
         return directiveInstance;
     }
     normalizeAttach(attach) {
+        if (attach == null)
+            return undefined;
         if (typeof attach === 'function')
             return attach;
         if (typeof attach === 'string')
             return attach.split('.');
         return attach.flatMap((item) => item.toString().split('.'));
     }
+    updateAttachment(node, attach, parent) {
+        untracked(() => {
+            const instanceState = getInstanceState(node);
+            if (!instanceState)
+                return;
+            const nextAttach = this.normalizeAttach(attach);
+            const currentAttach = instanceState.attach;
+            const isSameAttach = currentAttach === nextAttach ||
+                (Array.isArray(currentAttach) &&
+                    Array.isArray(nextAttach) &&
+                    currentAttach.length === nextAttach.length &&
+                    currentAttach.every((part, index) => part === nextAttach[index]));
+            if (isSameAttach)
+                return;
+            const attachedParent = instanceState.hierarchyStore.snapshot.parent;
+            if (attachedParent)
+                removeThreeChild(node, attachedParent, false);
+            instanceState.attach = nextAttach;
+            if (parent) {
+                attachThreeNodes(parent, node, undefined, instanceState.store ?? undefined);
+            }
+        });
+    }
+    addClass(el, name) {
+        if (el?.__ngt_renderer__?.[0 /* NgtRendererClassId.type */] === 'three')
+            return;
+        this.delegateRenderer.addClass(el, name);
+    }
+    removeClass(el, name) {
+        if (el?.__ngt_renderer__?.[0 /* NgtRendererClassId.type */] === 'three')
+            return;
+        this.delegateRenderer.removeClass(el, name);
+    }
+    setStyle(el, style, value, flags) {
+        if (el?.__ngt_renderer__?.[0 /* NgtRendererClassId.type */] === 'three')
+            return;
+        this.delegateRenderer.setStyle(el, style, value, flags);
+    }
+    removeStyle(el, style, flags) {
+        if (el?.__ngt_renderer__?.[0 /* NgtRendererClassId.type */] === 'three')
+            return;
+        this.delegateRenderer.removeStyle(el, style, flags);
+    }
+    selectRootElement(selectorOrNode, preserveContent) {
+        return this.delegateRenderer.selectRootElement(selectorOrNode, preserveContent);
+    }
+    nextSibling(node) {
+        if (isRendererNode(node)) {
+            const state = node.__ngt_renderer__;
+            if (state[4 /* NgtRendererClassId.parent */])
+                return getRendererNextSibling(node);
+            if (state[0 /* NgtRendererClassId.type */] === 'three')
+                return null;
+        }
+        return this.delegateRenderer.nextSibling(node);
+    }
+    setValue(node, value) {
+        if (node?.__ngt_renderer__?.[0 /* NgtRendererClassId.type */] === 'three')
+            return;
+        this.delegateRenderer.setValue(node, value);
+    }
 }
 
 /**
@@ -2633,6 +3122,12 @@ function storeFactory() {
     const defaultTarget = new THREE.Vector3();
     const tempTarget = new THREE.Vector3();
     let performanceTimeout = undefined;
+    const cancelPerformanceRegression = () => {
+        if (performanceTimeout === undefined)
+            return;
+        clearTimeout(performanceTimeout);
+        performanceTimeout = undefined;
+    };
     const pointer = new THREE.Vector2();
     // getCurrentViewport will mutate this instead of creating a new object everytime
     const tempViewport = {
@@ -2672,17 +3167,19 @@ function storeFactory() {
             regress: () => {
                 const state = store.snapshot;
                 // Clear timeout
-                if (performanceTimeout)
-                    clearTimeout(performanceTimeout);
+                cancelPerformanceRegression();
                 // Set lower bound performance
                 if (state.performance.current !== state.performance.min)
                     store.update((state) => ({
                         performance: { ...state.performance, current: state.performance.min },
                     }));
                 // Go back to upper bound performance after a while unless something regresses meanwhile
-                performanceTimeout = setTimeout(() => store.update((state) => ({
-                    performance: { ...state.performance, current: store.snapshot.performance.max },
-                })), state.performance.debounce);
+                performanceTimeout = setTimeout(() => {
+                    performanceTimeout = undefined;
+                    store.update((state) => ({
+                        performance: { ...state.performance, current: store.snapshot.performance.max },
+                    }));
+                }, state.performance.debounce);
             },
         },
         size: { width: 0, height: 0, top: 0, left: 0 },
@@ -2770,27 +3267,34 @@ function storeFactory() {
             subscribers: [],
             subscribe: (callback, priority = 0, _store = store) => {
                 const internal = _store.snapshot.internal;
+                const subscription = { callback, priority, store: _store };
                 // If this subscription was given a priority, it takes rendering into its own hands
                 // For that reason we switch off automatic rendering and increase the manual flag
                 // As long as this flag is positive there can be no internal rendering at all
                 // because there could be multiple render subscriptions
-                internal.priority = internal.priority + (priority > 0 ? 1 : 0);
-                internal.subscribers.push({ callback, priority, store: _store });
+                internal.priority += priority > 0 ? 1 : 0;
                 // Register subscriber and sort layers from lowest to highest, meaning,
                 // highest priority renders last (on top of the other frames)
-                internal.subscribers = internal.subscribers.sort((a, b) => (a.priority || 0) - (b.priority || 0));
+                internal.subscribers = [...internal.subscribers, subscription].sort((a, b) => (a.priority || 0) - (b.priority || 0));
+                let active = true;
                 return () => {
+                    if (!active)
+                        return;
+                    active = false;
                     const internal = _store.snapshot.internal;
-                    if (internal?.subscribers) {
-                        // Decrease manual flag if this subscription had a priority
-                        internal.priority = internal.priority - (priority > 0 ? 1 : 0);
-                        // Remove subscriber from list
-                        internal.subscribers = internal.subscribers.filter((s) => s.callback !== callback);
-                    }
+                    const index = internal?.subscribers.indexOf(subscription);
+                    if (index == null || index < 0)
+                        return;
+                    internal.subscribers = internal.subscribers.filter((record) => record !== subscription);
+                    if (priority > 0)
+                        internal.priority = Math.max(0, internal.priority - 1);
                 };
             },
         },
     });
+    Object.defineProperty(store.snapshot.performance.regress, 'cancel', {
+        value: cancelPerformanceRegression,
+    });
     Object.defineProperty(store, '__pointerMissed$', { get: () => pointerMissed$ });
     let { size: oldSize, viewport: { dpr: oldDpr }, camera: oldCamera, } = store.snapshot;
     effect(() => {
@@ -2904,22 +3408,11 @@ class NgtParent extends NgtCommonDirective {
         this.linkedValue = linkedSignal(this._parent, ...(ngDevMode ? [{ debugName: "linkedValue" }] : /* istanbul ignore next */ []));
         this.shouldSkipRender = computed(() => !this._parent(), ...(ngDevMode ? [{ debugName: "shouldSkipRender" }] : /* istanbul ignore next */ []));
         const commentNode = this.commentNode;
-        commentNode.data = NGT_PARENT_FLAG;
-        commentNode[NGT_PARENT_FLAG] = true;
-        if (commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]) {
-            commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]('parent', this.injector);
-            delete commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG];
-        }
+        setRendererAnchor(commentNode, { kind: 'parent', injector: this.injector });
     }
     validate() {
         return !this.injected && !!this.injectedValue;
     }
-    beforeCreateView() {
-        const commentNode = this.commentNode;
-        if (commentNode[NGT_INTERNAL_SET_PARENT_COMMENT_FLAG]) {
-            commentNode[NGT_INTERNAL_SET_PARENT_COMMENT_FLAG](this.injectedValue);
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgtParent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NgtParent, isStandalone: true, selector: "ng-template[parent]", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
@@ -3085,8 +3578,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             type: Directive
         }], ctorParameters: () => [] });
 
-const cached$1 = new Map();
-const memoizedLoaders$1 = new WeakMap();
+const defaultConfigurationKey = Symbol('ngt-default-loader-configuration');
+/**
+ * Interns semantic tuples component-by-component so equivalent configuration
+ * and multi-part URL tuples share an identity without retaining object parts.
+ */
+class SemanticKeyRegistry {
+    constructor() {
+        this.root = new SemanticKeyNode();
+    }
+    resolve(key) {
+        if (!Array.isArray(key))
+            return key;
+        let node = this.root;
+        for (const part of key) {
+            node = node.child(part);
+        }
+        return (node.value ??= {});
+    }
+    clear() {
+        this.root = new SemanticKeyNode();
+    }
+}
+class SemanticKeyNode {
+    constructor() {
+        this.primitiveChildren = new Map();
+        this.objectChildren = new WeakMap();
+    }
+    child(part) {
+        if ((typeof part === 'object' && part !== null) || typeof part === 'function') {
+            let child = this.objectChildren.get(part);
+            if (!child) {
+                child = new SemanticKeyNode();
+                this.objectChildren.set(part, child);
+            }
+            return child;
+        }
+        let child = this.primitiveChildren.get(part);
+        if (!child) {
+            child = new SemanticKeyNode();
+            this.primitiveChildren.set(part, child);
+        }
+        return child;
+    }
+}
+/**
+ * Owns configured loader instances and their result promises. Constructor,
+ * configuration, and URL are deliberately separate cache dimensions.
+ */
+class NgtLoaderCache {
+    constructor() {
+        this.constructors = new Map();
+        this.configurationKeys = new SemanticKeyRegistry();
+        this.requestKeys = new SemanticKeyRegistry();
+    }
+    configurationKey(extensions, key) {
+        if (key !== undefined)
+            return this.configurationKeys.resolve(key);
+        return extensions ? {} : defaultConfigurationKey;
+    }
+    getOrCreate(LoaderConstructor, configurationKey, request, extensions, load) {
+        const normalizedConfigurationKey = this.configurationKeys.resolve(configurationKey);
+        const requestKey = this.requestKeys.resolve(request);
+        const entry = this.getEntry(LoaderConstructor, normalizedConfigurationKey, extensions);
+        const cachedPromise = entry.promises.get(requestKey);
+        if (cachedPromise)
+            return cachedPromise;
+        let promise;
+        promise = load(entry.loader).catch((error) => {
+            this.evict(LoaderConstructor, normalizedConfigurationKey, entry, requestKey, promise);
+            throw error;
+        });
+        entry.promises.set(requestKey, promise);
+        return promise;
+    }
+    clear(urls) {
+        const requestsToClear = Array.isArray(urls)
+            ? [this.requestKeys.resolve(urls), ...urls.map((url) => this.requestKeys.resolve(url))]
+            : [this.requestKeys.resolve(urls)];
+        for (const [LoaderConstructor, configurations] of this.constructors) {
+            for (const [configurationKey, entry] of configurations) {
+                for (const requestKey of requestsToClear)
+                    entry.promises.delete(requestKey);
+                if (entry.promises.size === 0)
+                    configurations.delete(configurationKey);
+            }
+            if (configurations.size === 0)
+                this.constructors.delete(LoaderConstructor);
+        }
+    }
+    destroy() {
+        this.constructors.clear();
+        this.configurationKeys.clear();
+        this.requestKeys.clear();
+    }
+    getConfigurations(LoaderConstructor) {
+        let configurations = this.constructors.get(LoaderConstructor);
+        if (!configurations) {
+            configurations = new Map();
+            this.constructors.set(LoaderConstructor, configurations);
+        }
+        return configurations;
+    }
+    getEntry(LoaderConstructor, configurationKey, extensions) {
+        const configurations = this.getConfigurations(LoaderConstructor);
+        let entry = configurations.get(configurationKey);
+        if (entry)
+            return entry;
+        const loader = new LoaderConstructor();
+        extensions?.(loader);
+        entry = { loader, promises: new Map() };
+        configurations.set(configurationKey, entry);
+        return entry;
+    }
+    evict(LoaderConstructor, configurationKey, entry, requestKey, promise) {
+        if (entry.promises.get(requestKey) !== promise)
+            return;
+        entry.promises.delete(requestKey);
+        if (entry.promises.size > 0)
+            return;
+        const configurations = this.constructors.get(LoaderConstructor);
+        if (configurations?.get(configurationKey) !== entry)
+            return;
+        configurations.delete(configurationKey);
+        if (configurations.size === 0)
+            this.constructors.delete(LoaderConstructor);
+    }
+}
+
+const loaderCache$1 = new NgtLoaderCache();
 function normalizeInputs$1(input) {
     let urls = [];
     if (Array.isArray(input)) {
@@ -3100,33 +3720,26 @@ function normalizeInputs$1(input) {
     }
     return urls.map((url) => (url.includes('undefined') || url.includes('null') || !url ? '' : url));
 }
-function load(loaderConstructorFactory, inputs, { extensions, onLoad, onProgress, } = {}) {
-    return () => {
+function load(loaderConstructorFactory, inputs, { extensions, cacheKey, onLoad, onProgress, } = {}) {
+    return (consumerOnLoad = onLoad) => {
         const urls = normalizeInputs$1(inputs());
-        let loader = memoizedLoaders$1.get(loaderConstructorFactory(urls));
-        if (!loader) {
-            loader = new (loaderConstructorFactory(urls))();
-            memoizedLoaders$1.set(loaderConstructorFactory(urls), loader);
-        }
-        if (extensions)
-            extensions(loader);
+        const LoaderConstructor = loaderConstructorFactory(urls);
+        const configurationKey = loaderCache$1.configurationKey(extensions, cacheKey?.());
         return urls.map((url) => {
             if (url === '')
                 return Promise.resolve(null);
-            if (!cached$1.has(url)) {
-                cached$1.set(url, new Promise((resolve, reject) => {
-                    loader.load(url, (data) => {
-                        if ('scene' in data) {
-                            Object.assign(data, makeObjectGraph(data['scene']));
-                        }
-                        if (onLoad) {
-                            onLoad(data);
-                        }
-                        resolve(data);
-                    }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error?.message}`)));
-                }));
-            }
-            return cached$1.get(url);
+            const promise = loaderCache$1.getOrCreate(LoaderConstructor, configurationKey, url, extensions, (loader) => new Promise((resolve, reject) => {
+                loader.load(url, (data) => {
+                    if ('scene' in data) {
+                        Object.assign(data, makeObjectGraph(data['scene']));
+                    }
+                    resolve(data);
+                }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error?.message}`)));
+            }));
+            return promise.then((data) => {
+                consumerOnLoad?.(data);
+                return data;
+            });
         });
     };
 }
@@ -3134,18 +3747,30 @@ function load(loaderConstructorFactory, inputs, { extensions, onLoad, onProgress
  * @deprecated Use loaderResource instead. Will be removed in v5.0.0
  * @since v4.0.0~
  */
-function _injectLoader(loaderConstructorFactory, inputs, { extensions, onProgress, onLoad, injector, } = {}) {
+function _injectLoader(loaderConstructorFactory, inputs, { extensions, cacheKey, onProgress, onLoad, injector, } = {}) {
     return assertInjector(_injectLoader, injector, () => {
         const response = signal(null, ...(ngDevMode ? [{ debugName: "response" }] : /* istanbul ignore next */ []));
         const cachedResultPromisesEffect = load(loaderConstructorFactory, inputs, {
             extensions,
+            cacheKey,
             onProgress,
-            onLoad: onLoad,
         });
-        effect(() => {
+        effect((onCleanup) => {
+            let active = true;
+            onCleanup(() => {
+                active = false;
+            });
             const originalUrls = inputs();
-            const cachedResultPromises = cachedResultPromisesEffect();
-            Promise.all(cachedResultPromises).then((results) => {
+            const cachedResultPromises = cachedResultPromisesEffect((data) => {
+                if (active)
+                    onLoad?.(data);
+            });
+            void Promise.all(cachedResultPromises)
+                .then((results) => {
+                // A cached request can resolve after the reactive input has moved on.
+                // Keep the shared promise, but never publish a stale generation.
+                if (!active)
+                    return;
                 response.update(() => {
                     if (Array.isArray(originalUrls))
                         return results;
@@ -3158,25 +3783,23 @@ function _injectLoader(loaderConstructorFactory, inputs, { extensions, onProgres
                         return result;
                     }, {});
                 });
-            });
+            })
+                .catch(() => undefined);
         });
         return response.asReadonly();
     });
 }
-_injectLoader.preload = (loaderConstructorFactory, inputs, extensions, onLoad) => {
-    const effects = load(loaderConstructorFactory, inputs, { extensions, onLoad })();
+_injectLoader.preload = (loaderConstructorFactory, inputs, extensions, onLoad, cacheKey) => {
+    const effects = load(loaderConstructorFactory, inputs, { extensions, cacheKey, onLoad })();
     if (effects) {
-        void Promise.all(effects);
+        void Promise.all(effects).catch(() => undefined);
     }
 };
 _injectLoader.destroy = () => {
-    cached$1.clear();
+    loaderCache$1.destroy();
 };
 _injectLoader.clear = (urls) => {
-    const urlToClear = Array.isArray(urls) ? urls : [urls];
-    urlToClear.forEach((url) => {
-        cached$1.delete(url);
-    });
+    loaderCache$1.clear(urls);
 };
 /**
  * @deprecated Use loaderResource instead. Will be removed in v5.0.0
@@ -3204,38 +3827,26 @@ function normalizeInputs(input) {
     }
     return urls.map((url) => (url.includes('undefined') || url.includes('null') || !url ? '' : url));
 }
-const cached = new Map();
-const memoizedLoaders = new WeakMap();
-function getLoaderResourceParams(input, loaderConstructorFactory, extensions) {
+const loaderCache = new NgtLoaderCache();
+function getLoaderResourceParams(input, loaderConstructorFactory, extensions, cacheKey) {
     const urls = input();
     const LoaderConstructor = loaderConstructorFactory(urls);
     const normalizedUrls = normalizeInputs(urls);
-    let loader = memoizedLoaders.get(LoaderConstructor);
-    if (!loader) {
-        loader = new LoaderConstructor();
-        memoizedLoaders.set(LoaderConstructor, loader);
-    }
-    if (extensions)
-        extensions(loader);
-    return { urls, normalizedUrls, loader };
+    const configurationKey = loaderCache.configurationKey(extensions, cacheKey?.());
+    return { urls, normalizedUrls, LoaderConstructor, configurationKey, extensions };
 }
 function getLoaderPromises(params, onProgress) {
     return params.normalizedUrls.map((url) => {
         if (url === '')
             return Promise.resolve(null);
-        const cachedPromise = cached.get(url);
-        if (cachedPromise)
-            return cachedPromise;
-        const promise = new Promise((res, rej) => {
-            params.loader.load(url, (data) => {
+        return loaderCache.getOrCreate(params.LoaderConstructor, params.configurationKey, url, params.extensions, (loader) => new Promise((res, rej) => {
+            loader.load(url, (data) => {
                 if ('scene' in data) {
                     Object.assign(data, makeObjectGraph(data['scene']));
                 }
                 res(data);
             }, onProgress, (error) => rej(new Error(`[NGT] Could not load ${url}: ${error?.message}`)));
-        });
-        cached.set(url, promise);
-        return promise;
+        }));
     });
 }
 /**
@@ -3275,11 +3886,11 @@ function getLoaderPromises(params, onProgress) {
  * }
  * ```
  */
-function loaderResource(loaderConstructorFactory, input, { extensions, onLoad, onProgress, injector, } = {}) {
+function loaderResource(loaderConstructorFactory, input, { extensions, cacheKey, onLoad, onProgress, injector, } = {}) {
     return assertInjector(loaderResource, injector, () => {
         return resource({
-            params: () => getLoaderResourceParams(input, loaderConstructorFactory, extensions),
-            loader: async ({ params }) => {
+            params: () => getLoaderResourceParams(input, loaderConstructorFactory, extensions, cacheKey),
+            loader: async ({ params, abortSignal }) => {
                 // TODO: use the abortSignal when THREE.Loader supports it
                 const loadedResults = await Promise.all(getLoaderPromises(params, onProgress));
                 let results;
@@ -3297,25 +3908,22 @@ function loaderResource(loaderConstructorFactory, input, { extensions, onLoad, o
                         return result;
                     }, {});
                 }
-                if (onLoad)
-                    onLoad(results);
+                if (!abortSignal.aborted)
+                    onLoad?.(results);
                 return results;
             },
         });
     });
 }
-loaderResource.preload = (loaderConstructor, inputs, extensions) => {
-    const params = getLoaderResourceParams(() => inputs, () => loaderConstructor, extensions);
-    void Promise.all(getLoaderPromises(params));
+loaderResource.preload = (loaderConstructor, inputs, extensions, cacheKey) => {
+    const params = getLoaderResourceParams(() => inputs, () => loaderConstructor, extensions, cacheKey !== undefined ? () => cacheKey : undefined);
+    void Promise.all(getLoaderPromises(params)).catch(() => undefined);
 };
 loaderResource.destroy = () => {
-    cached.clear();
+    loaderCache.destroy();
 };
 loaderResource.clear = (urls) => {
-    const urlToClear = Array.isArray(urls) ? urls : [urls];
-    urlToClear.forEach((url) => {
-        cached.delete(url);
-    });
+    loaderCache.clear(urls);
 };
 
 const RGBA_REGEX = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*\.?\d+)?\)/;
@@ -3639,7 +4247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * ```
  */
 class NgtPortalContent {
-    static ngTemplateContextGuard(_, ctx) {
+    static ngTemplateContextGuard(_, _ctx) {
         return true;
     }
     constructor() {
@@ -3647,9 +4255,10 @@ class NgtPortalContent {
         const { element } = inject(ViewContainerRef);
         const commentNode = element.nativeElement;
         const store = injectStore();
-        commentNode.data = NGT_PORTAL_CONTENT_FLAG;
-        commentNode[NGT_PORTAL_CONTENT_FLAG] = store;
-        commentNode[NGT_DOM_PARENT_FLAG] = host.nativeElement;
+        const domParent = host.nativeElement;
+        const anchor = { kind: 'portal', store, domParent };
+        setRendererAnchor(commentNode, anchor);
+        setRendererAnchor(domParent, anchor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgtPortalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
@@ -3658,34 +4267,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             type: Directive,
             args: [{ selector: 'ng-template[portalContent]' }]
         }], ctorParameters: () => [] });
-function mergeState(previousRoot, store, container, pointer, raycaster, events, size) {
-    // we never want to spread the id
-    const { id: _, ...previousState } = previousRoot.snapshot;
+function mergeState(previousRoot, store, previousState, container, runtime, restState, events, size) {
+    // The portal id belongs to this store. Everything else starts from the
+    // latest parent snapshot so removed overrides cannot leave stale values.
+    const { id: _, ...inheritedState } = previousState;
     const state = store.snapshot;
+    capturePortalLocalState(previousState, state, runtime);
+    const layeredState = { ...inheritedState, ...runtime.localState, ...restState };
+    const camera = layeredState.camera;
+    const mergedSize = { ...previousState.size, ...size };
     let viewport = undefined;
-    if (state.camera && size) {
-        const camera = state.camera;
+    if (camera && (camera !== previousState.camera || size)) {
         // calculate the override viewport, if present
-        viewport = previousState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
-        // update the portal camera, if it differs from the previous layer
-        if (camera !== previousState.camera)
-            updateCamera(camera, size);
-    }
-    return {
-        // the intersect consists of the previous root state
-        ...previousState,
-        ...state,
+        viewport = previousState.viewport.getCurrentViewport(camera, new THREE.Vector3(), mergedSize);
+        // A portal-local camera owns its projection until the portal explicitly
+        // overrides the inherited size. Camera components may intentionally provide
+        // custom orthographic bounds or a custom perspective aspect.
+        if (size && camera !== previousState.camera)
+            updateCamera(camera, mergedSize);
+    }
+    runtime.inputEvents = events;
+    const mergedState = {
+        // Inherited values are refreshed on every effect run. Current input
+        // overrides are applied over that fresh snapshot, never over stale portal
+        // state from a previous run.
+        ...layeredState,
+        id: state.id,
         // portals have their own scene, which forms the root, a raycaster and a pointer
         scene: container,
-        pointer,
-        raycaster,
+        pointer: runtime.pointer,
+        raycaster: runtime.raycaster,
         // their previous root is the layer before it
         previousRoot,
-        events: { ...previousState.events, ...state.events, ...events },
-        size: { ...previousState.size, ...size },
-        viewport: { ...previousState.viewport, ...viewport },
-        // layers are allowed to override events
-        setEvents: (events) => store.update((state) => ({ ...state, events: { ...state.events, ...events } })),
+        // The render loop and subscriptions are portal runtime state. Replacing
+        // them with a new parent object would discard portal-local mutations.
+        internal: state.internal,
+        events: { ...previousState.events, ...runtime.localEvents, ...events },
+        size: mergedSize,
+        viewport: { ...previousState.viewport, ...viewport, ...restState.viewport },
+        setEvents: runtime.setEvents,
+        invalidate: runtime.invalidate,
+    };
+    runtime.lastMerged = mergedState;
+    return mergedState;
+}
+function capturePortalLocalState(parent, current, runtime) {
+    for (const key of ['camera', 'controls']) {
+        const tracker = runtime.localStateTrackers[key];
+        tracker.baselines.add(parent[key]);
+        const previousValue = runtime.lastMerged?.[key];
+        const currentValue = current[key];
+        if (!runtime.lastMerged || Object.is(currentValue, previousValue))
+            continue;
+        if (tracker.baselines.has(currentValue)) {
+            tracker.values.length = 0;
+            delete runtime.localState[key];
+            continue;
+        }
+        const restoredIndex = tracker.values.lastIndexOf(currentValue);
+        if (restoredIndex >= 0)
+            tracker.values.length = restoredIndex + 1;
+        else
+            tracker.values.push(currentValue);
+        Object.assign(runtime.localState, { [key]: tracker.values.at(-1) });
+    }
+}
+function movePortalChildren(store, previousContainer, nextContainer) {
+    if (!previousContainer || previousContainer === nextContainer)
+        return;
+    const previousState = getInstanceState(previousContainer);
+    if (!previousState)
+        return;
+    const children = [...previousState.objects(), ...previousState.nonObjects()];
+    for (const child of children) {
+        const childState = getInstanceState(child);
+        if (childState?.store !== store || childState.parent() !== previousContainer)
+            continue;
+        removeThreeChild(child, previousContainer, false);
+        attachThreeNodes(nextContainer, child, undefined, store);
+    }
+}
+const portalRuntimes = new WeakMap();
+const portalContainerOwnership = new WeakMap();
+function claimPortalContainer(container, store, fallback) {
+    const instanceState = getInstanceState(container);
+    if (!instanceState)
+        return () => undefined;
+    let ownership = portalContainerOwnership.get(container);
+    if (!ownership) {
+        ownership = { baseline: instanceState.store ?? fallback, claims: [] };
+        portalContainerOwnership.set(container, ownership);
+    }
+    const token = Symbol('portal-container');
+    ownership.claims.push({ token, store });
+    instanceState.store = store;
+    let active = true;
+    return () => {
+        if (!active)
+            return;
+        active = false;
+        const current = portalContainerOwnership.get(container);
+        if (!current)
+            return;
+        const index = current.claims.findIndex((claim) => claim.token === token);
+        if (index >= 0)
+            current.claims.splice(index, 1);
+        const latest = current.claims.at(-1);
+        instanceState.store = latest?.store ?? current.baseline;
+        if (!latest)
+            portalContainerOwnership.delete(container);
     };
 }
 /**
@@ -3709,6 +4399,16 @@ function mergeState(previousRoot, store, container, pointer, raycaster, events,
  * ```
  */
 class NgtPortalImpl {
+    /** @internal Subscribe to invalidations originating in this portal layer. */
+    onInvalidate(listener) {
+        const runtime = portalRuntimes.get(this.portalStore);
+        if (!runtime)
+            throw new Error('[NGT] Portal store runtime was not initialized');
+        runtime.invalidationListeners.add(listener);
+        return () => {
+            runtime.invalidationListeners.delete(listener);
+        };
+    }
     constructor() {
         this.container = input.required(...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
         this.state = input({}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
@@ -3717,6 +4417,7 @@ class NgtPortalImpl {
         this.previousStore = injectStore({ skipSelf: true });
         this.portalStore = injectStore();
         this.injector = inject(Injector);
+        this.document = inject(DOCUMENT);
         this.size = pick(this.state, 'size');
         this.events = pick(this.state, 'events');
         this.restState = omit(this.state, ['size', 'events']);
@@ -3724,21 +4425,42 @@ class NgtPortalImpl {
         this.portalRendered = this.portalContentRendered.asReadonly();
         extend({ Group });
         effect(() => {
-            let [container, anchor, content] = [
+            // A makeDefault camera/controls update writes directly to the portal
+            // store. Track those supported local overrides without tracking the
+            // whole state object that this effect itself merges.
+            this.portalStore.camera();
+            this.portalStore.controls();
+            const [inputContainer, anchor, content, previousState, size, events, restState] = [
                 this.container(),
                 this.anchorRef(),
                 this.contentRef(),
                 this.previousStore(),
+                this.size(),
+                this.events(),
+                this.restState(),
             ];
-            const [size, events, restState] = [untracked(this.size), untracked(this.events), untracked(this.restState)];
-            if (!is.instance(container)) {
-                container = prepare(container, 'ngt-portal', { store: this.portalStore });
+            const runtime = portalRuntimes.get(this.portalStore);
+            if (!runtime)
+                throw new Error('[NGT] Portal store runtime was not initialized');
+            const instanceContainer = is.instance(inputContainer)
+                ? inputContainer
+                : prepare(inputContainer, 'ngt-portal', { store: this.previousStore });
+            const container = isRendererNodeType(instanceContainer, 'three')
+                ? instanceContainer
+                : createRendererNode('three', instanceContainer, this.document);
+            const portalAnchor = getRendererAnchor(anchor.element.nativeElement);
+            if (portalAnchor?.kind === 'portal' && portalAnchor.domParent) {
+                portalAnchor.domParent.__ngt_renderer__[3 /* NgtRendererClassId.portalContainer */] = container;
             }
             const instanceState = getInstanceState(container);
-            if (instanceState && instanceState.store !== this.portalStore) {
-                instanceState.store = this.portalStore;
+            if (instanceState && runtime.container !== container) {
+                const nextRelease = claimPortalContainer(container, this.portalStore, this.previousStore);
+                movePortalChildren(this.portalStore, runtime.container, container);
+                runtime.containerClaim?.release();
+                runtime.container = container;
+                runtime.containerClaim = { container, release: nextRelease };
             }
-            this.portalStore.update(restState, mergeState(this.previousStore, this.portalStore, container, this.portalStore.snapshot.pointer, this.portalStore.snapshot.raycaster, events, size));
+            this.portalStore.update(mergeState(this.previousStore, this.portalStore, previousState, container, runtime, restState, events, size));
             if (this.portalViewRef) {
                 this.portalViewRef.detectChanges();
                 return;
@@ -3748,6 +4470,12 @@ class NgtPortalImpl {
             this.portalViewRef.detectChanges();
             this.portalContentRendered.set(true);
         });
+        inject(DestroyRef).onDestroy(() => {
+            const runtime = portalRuntimes.get(this.portalStore);
+            runtime?.containerClaim?.release();
+            runtime?.invalidationListeners.clear();
+            portalRuntimes.delete(this.portalStore);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgtPortalImpl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: [
@@ -3765,7 +4493,32 @@ class NgtPortalImpl {
                         pointer,
                         raycaster,
                     });
-                    store.update(mergeState(previousStore, store, null, pointer, raycaster));
+                    const runtime = {
+                        pointer,
+                        raycaster,
+                        localEvents: {},
+                        invalidate: () => undefined,
+                        invalidationListeners: new Set(),
+                        localState: {},
+                        localStateTrackers: {
+                            camera: { baselines: new Set(), values: [] },
+                            controls: { baselines: new Set(), values: [] },
+                        },
+                        setEvents: () => undefined,
+                    };
+                    runtime.setEvents = (events) => {
+                        Object.assign(runtime.localEvents, events);
+                        store.update((state) => ({
+                            events: { ...state.events, ...events, ...runtime.inputEvents },
+                        }));
+                    };
+                    runtime.invalidate = (frames) => {
+                        for (const listener of runtime.invalidationListeners)
+                            listener();
+                        previousStore.snapshot.invalidate(frames);
+                    };
+                    portalRuntimes.set(store, runtime);
+                    store.update(mergeState(previousStore, store, previousStore.snapshot, null, runtime, {}));
                     return store;
                 },
                 deps: [[new SkipSelf(), NGT_STORE]],
@@ -3804,7 +4557,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                                     pointer,
                                     raycaster,
                                 });
-                                store.update(mergeState(previousStore, store, null, pointer, raycaster));
+                                const runtime = {
+                                    pointer,
+                                    raycaster,
+                                    localEvents: {},
+                                    invalidate: () => undefined,
+                                    invalidationListeners: new Set(),
+                                    localState: {},
+                                    localStateTrackers: {
+                                        camera: { baselines: new Set(), values: [] },
+                                        controls: { baselines: new Set(), values: [] },
+                                    },
+                                    setEvents: () => undefined,
+                                };
+                                runtime.setEvents = (events) => {
+                                    Object.assign(runtime.localEvents, events);
+                                    store.update((state) => ({
+                                        events: { ...state.events, ...events, ...runtime.inputEvents },
+                                    }));
+                                };
+                                runtime.invalidate = (frames) => {
+                                    for (const listener of runtime.invalidationListeners)
+                                        listener();
+                                    previousStore.snapshot.invalidate(frames);
+                                };
+                                portalRuntimes.set(store, runtime);
+                                store.update(mergeState(previousStore, store, previousStore.snapshot, null, runtime, {}));
                                 return store;
                             },
                             deps: [[new SkipSelf(), NGT_STORE]],
@@ -3826,6 +4604,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 const NgtPortal = [NgtPortalImpl, NgtPortalContent];
 
 const shallowLoose = { objects: 'shallow', strict: false };
+const rootLifecycles = new WeakMap();
+function cloneConfigurationValue(value) {
+    if (Array.isArray(value))
+        return value.slice();
+    if (value && typeof value === 'object' && 'clone' in value && typeof value.clone === 'function') {
+        return value.clone();
+    }
+    return value;
+}
+function snapshotCameraOptions(camera) {
+    if (!camera || is.three(camera, 'isCamera'))
+        return camera;
+    const options = camera;
+    return Object.fromEntries(Object.entries(options).map(([key, value]) => [key, cloneConfigurationValue(value)]));
+}
+function configurationValuesEqual(previous, next) {
+    if (Object.is(previous, next))
+        return true;
+    if (Array.isArray(previous) && Array.isArray(next)) {
+        return previous.length === next.length && previous.every((value, index) => Object.is(value, next[index]));
+    }
+    if (previous &&
+        next &&
+        typeof previous === 'object' &&
+        typeof next === 'object' &&
+        'equals' in previous &&
+        typeof previous.equals === 'function') {
+        return previous.equals(next);
+    }
+    return false;
+}
+function cameraOptionsEqual(previous, next) {
+    if (Object.is(previous, next))
+        return true;
+    if (!previous || !next)
+        return false;
+    if (is.three(previous, 'isCamera') || is.three(next, 'isCamera'))
+        return false;
+    const previousKeys = Object.keys(previous);
+    const nextKeys = Object.keys(next);
+    const previousRecord = previous;
+    const nextRecord = next;
+    return (previousKeys.length === nextKeys.length &&
+        previousKeys.every((key) => Object.prototype.hasOwnProperty.call(nextRecord, key) &&
+            configurationValuesEqual(previousRecord[key], nextRecord[key])));
+}
+function cameraConfigurationsEqual(previous, next) {
+    return (!!previous &&
+        previous.orthographic === next.orthographic &&
+        cameraOptionsEqual(previous.camera, next.camera) &&
+        configurationValuesEqual(previous.lookAt, next.lookAt));
+}
+function createManagedCamera(configuration, store, size = store.snapshot.size) {
+    const { camera: cameraOptions, lookAt, orthographic } = configuration;
+    const isCamera = is.three(cameraOptions, 'isCamera');
+    let camera = isCamera ? cameraOptions : makeCameraInstance(orthographic, size);
+    if (!isCamera) {
+        camera.position.z = 5;
+        if (cameraOptions) {
+            applyProps(camera, cameraOptions);
+            if ('aspect' in cameraOptions ||
+                'left' in cameraOptions ||
+                'right' in cameraOptions ||
+                'top' in cameraOptions ||
+                'bottom' in cameraOptions) {
+                Object.assign(camera, { manual: true });
+                camera.updateProjectionMatrix();
+            }
+        }
+        if (!cameraOptions?.rotation && !cameraOptions?.quaternion) {
+            if (Array.isArray(lookAt))
+                camera.lookAt(lookAt[0], lookAt[1], lookAt[2]);
+            else if (typeof lookAt === 'number')
+                camera.lookAt(lookAt, lookAt, lookAt);
+            else if (lookAt?.isVector3)
+                camera.lookAt(lookAt);
+            else
+                camera.lookAt(0, 0, 0);
+        }
+        camera.updateProjectionMatrix?.();
+    }
+    if (!is.instance(camera))
+        camera = prepare(camera, '', { store });
+    return camera;
+}
+function cancelPerformanceRegression(store) {
+    const regress = store.snapshot.performance.regress;
+    regress.cancel?.();
+}
 /**
  * Creates a canvas root initializer function.
  *
@@ -3847,10 +4714,12 @@ function canvasRootInitializer(injector) {
     return assertInjector(canvasRootInitializer, injector, () => {
         const injectedStore = injectStore();
         const loop = injectLoop();
+        const rootInjector = inject(Injector);
         return (canvas) => {
             const exist = roots.has(canvas);
             let store = roots.get(canvas);
-            if (store) {
+            const previousLifecycle = rootLifecycles.get(canvas);
+            if (store && !previousLifecycle?.teardown) {
                 console.warn('[NGT] Same canvas root is being created twice');
             }
             store ||= injectedStore;
@@ -3860,33 +4729,95 @@ function canvasRootInitializer(injector) {
             if (!exist) {
                 roots.set(canvas, store);
             }
+            if (previousLifecycle?.teardown) {
+                clearTimeout(previousLifecycle.teardown);
+                previousLifecycle.teardown = undefined;
+                const performance = store.snapshot.performance;
+                if (performance.current !== performance.max) {
+                    store.update((state) => ({
+                        performance: { ...state.performance, current: state.performance.max },
+                    }));
+                }
+            }
+            const owner = {};
+            const lifecycle = previousLifecycle?.store === store ? previousLifecycle : { store, owner };
+            lifecycle.owner = owner;
+            rootLifecycles.set(canvas, lifecycle);
+            lifecycle.cameraWatcher ??= effect(() => {
+                const activeCamera = store.camera();
+                const desired = lifecycle.cameraConfiguration;
+                if (!desired ||
+                    !lifecycle.managedCamera ||
+                    activeCamera !== lifecycle.managedCamera ||
+                    cameraConfigurationsEqual(lifecycle.appliedCameraConfiguration, desired))
+                    return;
+                const camera = createManagedCamera(desired, store);
+                lifecycle.managedCamera = camera;
+                lifecycle.appliedCameraConfiguration = desired;
+                const raycaster = store.snapshot.raycaster;
+                if (raycaster)
+                    raycaster.camera = camera;
+                store.update({ camera });
+            }, { injector: rootInjector });
             let isConfigured = false;
-            let lastCamera;
+            let destroyRequested = false;
             return {
-                isConfigured,
+                get isConfigured() {
+                    return isConfigured;
+                },
                 destroy: (timeout = 500) => {
+                    if (destroyRequested)
+                        return;
+                    destroyRequested = true;
                     const root = roots.get(canvas);
-                    if (root) {
+                    if (root &&
+                        root === store &&
+                        rootLifecycles.get(canvas) === lifecycle &&
+                        lifecycle.owner === owner) {
                         root.update((state) => ({ internal: { ...state.internal, active: false } }));
-                        setTimeout(() => {
+                        cancelPerformanceRegression(root);
+                        const teardown = setTimeout(() => {
+                            if (roots.get(canvas) !== root ||
+                                rootLifecycles.get(canvas) !== lifecycle ||
+                                lifecycle.owner !== owner ||
+                                lifecycle.teardown !== teardown)
+                                return;
+                            lifecycle.teardown = undefined;
                             try {
                                 const state = root.snapshot;
-                                state.events.disconnect?.();
-                                state.gl?.renderLists?.dispose?.();
-                                state.gl?.dispose?.();
-                                state.gl?.forceContextLoss?.();
-                                if (state.gl?.xr)
-                                    state.xr.disconnect();
-                                dispose(state.scene);
-                                roots.delete(canvas);
+                                const failures = [];
+                                const attempt = (cleanup) => {
+                                    try {
+                                        cleanup();
+                                    }
+                                    catch (error) {
+                                        failures.push(error);
+                                    }
+                                };
+                                attempt(() => state.events.disconnect?.());
+                                attempt(() => state.gl?.renderLists?.dispose?.());
+                                attempt(() => state.gl?.dispose?.());
+                                attempt(() => state.gl?.forceContextLoss?.());
+                                attempt(() => state.xr?.disconnect?.());
+                                attempt(() => dispose(state.scene));
+                                attempt(() => lifecycle.cameraWatcher?.destroy());
+                                if (failures.length) {
+                                    console.error('[NGT] Errors while destroying Canvas Root', failures);
+                                }
                             }
-                            catch (e) {
-                                console.error('[NGT] Unexpected error while destroying Canvas Root', e);
+                            finally {
+                                if (roots.get(canvas) === root)
+                                    roots.delete(canvas);
+                                if (rootLifecycles.get(canvas) === lifecycle)
+                                    rootLifecycles.delete(canvas);
                             }
                         }, timeout);
+                        lifecycle.teardown = teardown;
                     }
                 },
                 configure: (inputs) => {
+                    if (destroyRequested || rootLifecycles.get(canvas) !== lifecycle || lifecycle.owner !== owner)
+                        return;
                     const { shadows = false, linear = false, flat = false, legacy = false, orthographic = false, frameloop = 'always', dpr = [1, 2], gl: glOptions, size: sizeOptions, camera: cameraOptions, raycaster: raycasterOptions, scene: sceneOptions, events, lookAt, performance, } = inputs;
                     const state = store.snapshot;
                     const stateToUpdate = {};
@@ -3905,44 +4836,20 @@ function canvasRootInitializer(injector) {
                     if (!is.equ(params, raycaster.params, shallowLoose)) {
                         applyProps(raycaster, { params: { ...raycaster.params, ...(params || {}) } });
                     }
-                    // Create default camera, don't overwrite any user-set state
+                    const cameraConfiguration = {
+                        camera: snapshotCameraOptions(cameraOptions),
+                        lookAt: cloneConfigurationValue(lookAt),
+                        orthographic,
+                    };
+                    lifecycle.cameraConfiguration = cameraConfiguration;
+                    // Create the root-managed camera, but don't overwrite a camera installed directly in the store.
                     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);
-                        if (!isCamera) {
-                            camera.position.z = 5;
-                            if (cameraOptions) {
-                                applyProps(camera, cameraOptions);
-                                if ('aspect' in cameraOptions ||
-                                    'left' in cameraOptions ||
-                                    'right' in cameraOptions ||
-                                    'top' in cameraOptions ||
-                                    'bottom' in cameraOptions) {
-                                    Object.assign(camera, { manual: true });
-                                    camera?.updateProjectionMatrix();
-                                }
-                            }
-                            // always look at center or passed-in lookAt by default
-                            if (!state.camera && !cameraOptions?.rotation && !cameraOptions?.quaternion) {
-                                if (Array.isArray(lookAt))
-                                    camera.lookAt(lookAt[0], lookAt[1], lookAt[2]);
-                                else if (typeof lookAt === 'number')
-                                    camera.lookAt(lookAt, lookAt, lookAt);
-                                else if (lookAt?.isVector3)
-                                    camera.lookAt(lookAt);
-                                else
-                                    camera.lookAt(0, 0, 0);
-                            }
-                            // update projection matrix after applyprops
-                            camera.updateProjectionMatrix?.();
-                        }
-                        if (!is.instance(camera))
-                            camera = prepare(camera, '', { store });
+                        (state.camera === lifecycle.managedCamera &&
+                            !cameraConfigurationsEqual(lifecycle.appliedCameraConfiguration, cameraConfiguration))) {
+                        const camera = createManagedCamera(cameraConfiguration, store, sizeOptions ?? state.size);
                         stateToUpdate.camera = camera;
+                        lifecycle.managedCamera = camera;
+                        lifecycle.appliedCameraConfiguration = cameraConfiguration;
                         // Configure raycaster
                         // https://github.com/pmndrs/react-xr/issues/300
                         raycaster.camera = camera;
@@ -4311,15 +5218,24 @@ function elementEvents(target, events, { injector } = {}) {
             const targetObj = resolveRef(target());
             if (!targetObj || !is.instance(targetObj))
                 return;
+            const currentCleanUps = [];
             Object.keys(events).forEach((eventName) => {
-                cleanUps.push(renderer.listen(targetObj, eventName, events[eventName]));
+                const cleanUp = renderer.listen(targetObj, eventName, events[eventName]);
+                currentCleanUps.push(cleanUp);
+                cleanUps.push(cleanUp);
             });
             onCleanup(() => {
-                cleanUps.forEach((cleanUp) => cleanUp());
+                for (const cleanUp of currentCleanUps) {
+                    cleanUp();
+                    const index = cleanUps.indexOf(cleanUp);
+                    if (index >= 0)
+                        cleanUps.splice(index, 1);
+                }
             });
         });
         inject(DestroyRef).onDestroy(() => {
-            cleanUps.forEach((cleanUp) => cleanUp());
+            for (const cleanUp of cleanUps.splice(0))
+                cleanUp();
         });
         return cleanUps;
     });
@@ -4438,15 +5354,24 @@ function objectEvents(target, events, { injector } = {}) {
             const targetObj = resolveRef(target());
             if (!targetObj || !is.instance(targetObj))
                 return;
+            const currentCleanUps = [];
             Object.entries(events).forEach(([eventName, eventHandler]) => {
-                cleanUps.push(renderer.listen(targetObj, eventName, eventHandler));
+                const cleanUp = renderer.listen(targetObj, eventName, eventHandler);
+                currentCleanUps.push(cleanUp);
+                cleanUps.push(cleanUp);
             });
             onCleanup(() => {
-                cleanUps.forEach((cleanUp) => cleanUp());
+                for (const cleanUp of currentCleanUps) {
+                    cleanUp();
+                    const index = cleanUps.indexOf(cleanUp);
+                    if (index >= 0)
+                        cleanUps.splice(index, 1);
+                }
             });
         });
         inject(DestroyRef).onDestroy(() => {
-            cleanUps.forEach((cleanUp) => cleanUp());
+            for (const cleanUp of cleanUps.splice(0))
+                cleanUp();
         });
         return cleanUps;
     });
@@ -4478,5 +5403,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_RENDERER_OPTIONS, NGT_STORE, NgtArgs, NgtElementEvents, NgtHTML, NgtHexify, NgtObjectEvents, NgtParent, NgtPortal, NgtPortalAutoRender, NgtPortalContent, NgtPortalImpl, NgtRenderer2, NgtRendererFactory2, NgtRoutedScene, NgtSelect, NgtSelection, NgtSelectionApi, THREE_NATIVE_EVENTS, addAfterEffect, addEffect, addTail, applyProps, attach, beforeRender, canvasRootInitializer, checkNeedsUpdate, checkUpdate, createAttachFunction, createEvents, detach, dispose, elementEvents, extend, flushGlobalEffects, getEmitter, getInstanceState, getLocalState, hasListener, injectBeforeRender, injectCatalogue, injectLoader, injectLoop, injectObjectEvents, injectStore, invalidateInstance, is, loaderResource, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, objectEvents, omit, pick, prepare, provideHTMLDomElement, remove, removeInteractivity, resolveInstanceKey, resolveRef, roots, signalState, storeFactory, toDeepSignal, updateCamera, vector2, vector3, vector4 };
+export { NGT_APPLY_PROPS, NGT_CATALOGUE, NGT_DOM_PARENT_FLAG, NGT_GET_NODE_ATTRIBUTE_FLAG, NGT_HTML_FLAG, NGT_LOOP, NGT_RENDERER_CONTEXT_FLAG, NGT_RENDERER_NODE_FLAG, NGT_RENDERER_OPTIONS, NGT_STORE, NgtArgs, NgtElementEvents, NgtHTML, NgtHexify, NgtObjectEvents, NgtParent, NgtPortal, NgtPortalAutoRender, NgtPortalContent, NgtPortalImpl, NgtRenderer2, NgtRendererFactory2, NgtRoutedScene, NgtSelect, NgtSelection, NgtSelectionApi, THREE_NATIVE_EVENTS, addAfterEffect, addEffect, addTail, applyProps, attach, beforeRender, canvasRootInitializer, checkNeedsUpdate, checkUpdate, createAttachFunction, createEvents, detach, dispose, elementEvents, extend, flushAncestorNotifications, flushGlobalEffects, getEmitter, getInstanceState, getLocalState, hasListener, injectBeforeRender, injectCatalogue, injectLoader, injectLoop, injectObjectEvents, injectStore, invalidateInstance, is, loaderResource, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, objectEvents, omit, pick, prepare, provideHTMLDomElement, remove, removeInteractivity, resolveInstanceKey, resolveRef, roots, setRendererAnchor, signalState, storeFactory, toDeepSignal, updateCamera, uuidv4Fallback, vector2, vector3, vector4 };
 //# sourceMappingURL=angular-three.mjs.map