@remix-run/ui 0.4.0 → 0.5.0

package/dist/runtime/reconcile.js

@@ -1,13 +1,16 @@
-import { createComponent, Frame } from "./component.js";
-import { createFrame } from "./frame.js";
-import { createRangeRoot } from "./vdom.js";
-import { isCommittedComponentNode, isComponentNode, isCommittedHostNode, isCommittedTextNode, isFragmentNode, isHostNode, isNonRenderNode, isTextNode, findContextFromAncestry, } from "./vnode.js";
-import { invariant } from "./invariant.js";
-import { patchHostProps } from "./core/props.js";
-import { skipComments, logHydrationMismatch } from "./client-entries.js";
-import { toVNode } from "./to-vnode.js";
-import { bindMixinRuntime, cancelPendingMixinRemoval, dispatchMixinBeforeUpdate, dispatchMixinCommit, getMixinRuntimeSignal, prepareMixinRemoval, resolveMixedProps, teardownMixins, } from "./mixins/mixin.js";
-import { isOnMixinDescriptor } from "./mixins/on-mixin.js";
+import { createComponent } from './component.js';
+import { createFrame, isFrameRuntime } from './frame.js';
+import { unwrapFrameResolution } from './frame-resolution.js';
+import { createRangeRoot } from './vdom.js';
+import { isCommittedComponentNode, isCommittedHostNode, isCommittedTextNode, isFragmentNode, isHostNode, findContextFromAncestry, } from './vnode.js';
+import { invariant } from './invariant.js';
+import { patchHostProps } from './core/props.js';
+import { skipComments, logHydrationMismatch } from './client-entries.js';
+import { toVNode } from './to-vnode.js';
+import { bindMixinRuntime, cancelPendingMixinRemoval, dispatchMixinBeforeUpdate, dispatchMixinCommit, getMixinRuntimeSignal, prepareMixinRemoval, resolveMixedProps, teardownMixins, } from './mixins/mixin.js';
+import { isOnMixinDescriptor } from './mixins/on-mixin.js';
+import { createComponentErrorEvent } from './error-event.js';
+import { componentStalenessCheck } from './refresh.js';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 let idCounter = 0;
 let persistedRemovalToken = 0;
@@ -15,40 +18,36 @@ const persistedMixinNodes = new Set();
 let activeSchedulerUpdateParents;
 // Compute SVG context for a node based on its parent and type.
 // Returns true if the node is within an SVG subtree, false otherwise.
-function getSvgContext(vParent, nodeType) {
+function getSvgContext(vParent, node) {
     // Only host elements (strings) can affect SVG context
-    if (typeof nodeType === 'string') {
+    if (node.kind === 'host') {
         // svg element creates SVG context
-        if (nodeType === 'svg')
+        if (node.type === 'svg')
             return true;
         // foreignObject switches back to HTML context
-        if (nodeType === 'foreignObject')
+        if (node.type === 'foreignObject')
             return false;
     }
     // Otherwise inherit from parent
-    return vParent._svg ?? false;
+    return vParent._svg;
 }
 function getHostProps(node) {
-    return node._mixedProps ?? node.props;
+    return '_mixedProps' in node ? node._mixedProps : node.props;
 }
 function markNodePersistedByMixins(node, domParent, token) {
-    node._persistedByMixins = true;
-    node._persistedParentByMixins = domParent;
-    node._persistedRemovalToken = token;
+    node._persistence = { parent: domParent, token };
     persistedMixinNodes.add(node);
     bindMixinRuntime(node._mixState, undefined);
 }
 function unmarkNodePersistedByMixins(node) {
-    node._persistedByMixins = false;
-    node._persistedParentByMixins = undefined;
-    node._persistedRemovalToken = undefined;
+    node._persistence = undefined;
     persistedMixinNodes.delete(node);
 }
 function findMatchingPersistedMixinNode(type, key, domParent) {
     if (key == null)
         return null;
     for (let node of persistedMixinNodes) {
-        if (node._persistedParentByMixins !== domParent)
+        if (node._persistence?.parent !== domParent)
             continue;
         if (node.type !== type)
             continue;
@@ -59,6 +58,7 @@ function findMatchingPersistedMixinNode(type, key, domParent) {
     return null;
 }
 const EMPTY_DIRECT_EVENT_DESCRIPTORS = [];
+const EMPTY_COMMITTED_CHILDREN = [];
 function shouldRestoreControlledReflectionOnInput(node, state) {
     // Some controls dispatch `input` before `change` for the same interaction.
     // When checked/value state is typically handled on `change`, restoring on the
@@ -152,6 +152,15 @@ function teardownControlledReflection(node) {
         state.listenersAttached = false;
     }
 }
+// See abandonDirectEventListeners: skips removeEventListener for discarded subtrees.
+function abandonControlledReflection(node) {
+    let state = node._controlledState;
+    if (!state)
+        return;
+    state.disposed = true;
+    state.pendingRestoreVersion++;
+    state.listenersAttached = false;
+}
 function canManageValue(type, element) {
     if (type === 'progress')
         return false;
@@ -176,23 +185,16 @@ function setPropertyReflection(element, key, value) {
         return;
     element[key] = value == null ? '' : value;
 }
-function resolveNodeMixProps(node, frame, scheduler, state) {
+function resolveNodeMixProps(node, parent, frame, scheduler, state) {
     let mix = node.props.mix;
     let directEventDescriptors = resolveDirectEventDescriptors(mix);
     if (directEventDescriptors) {
-        if (state) {
+        if (state)
             teardownMixins(state);
-        }
-        node._mixState = undefined;
-        node._mixedProps = node.props;
-        node._directEventDescriptors = directEventDescriptors;
-        return node.props;
+        return { props: node.props, directEventDescriptors };
     }
-    node._directEventDescriptors = undefined;
     if (state == null && (mix == null || (Array.isArray(mix) && mix.length === 0))) {
-        node._mixState = undefined;
-        node._mixedProps = node.props;
-        return node.props;
+        return { props: node.props };
     }
     let resolved = resolveMixedProps({
         hostType: node.type,
@@ -202,14 +204,17 @@ function resolveNodeMixProps(node, frame, scheduler, state) {
             if (typeof type !== 'function') {
                 return undefined;
             }
-            return findContextFromAncestry(node, type);
+            return findContextFromAncestry(parent, type);
         },
         props: node.props,
         state,
     });
-    node._mixState = resolved.state;
+    return { props: resolved.props, mixState: resolved.state };
+}
+function applyResolvedHostProps(node, resolved) {
     node._mixedProps = resolved.props;
-    return resolved.props;
+    node._mixState = resolved.mixState;
+    node._directEventDescriptors = resolved.directEventDescriptors;
 }
 function resolveDirectEventDescriptors(mix) {
     if (!mix)
@@ -220,8 +225,8 @@ function resolveDirectEventDescriptors(mix) {
     return areOnMixinDescriptors(mix) ? mix : null;
 }
 function areOnMixinDescriptors(descriptors) {
-    for (let item of descriptors) {
-        if (!isOnMixinDescriptor(item))
+    for (let i = 0; i < descriptors.length; i++) {
+        if (!isOnMixinDescriptor(descriptors[i]))
             return false;
     }
     return true;
@@ -237,11 +242,12 @@ function enqueueMixinBindingUpdate(done) {
             }
             dispatchMixinBeforeUpdate(state);
             let prevProps = getHostProps(node);
-            let nextProps = resolveNodeMixProps(node, this.frame, this.scheduler, state);
-            patchHostProps(prevProps, nextProps, this.node);
-            if (node._controlledState || shouldTrackControlledReflection(nextProps)) {
+            let resolved = resolveNodeMixProps(node, node._parent, this.frame, this.scheduler, state);
+            applyResolvedHostProps(node, resolved);
+            patchHostProps(prevProps, resolved.props, this.node);
+            if (node._controlledState || shouldTrackControlledReflection(resolved.props)) {
                 ensureControlledReflection(node, this.scheduler);
-                syncControlledReflection(node, nextProps);
+                syncControlledReflection(node, resolved.props);
             }
             dispatchMixinCommit(state);
             done(state ? getMixinRuntimeSignal(state) : AbortSignal.abort());
@@ -252,7 +258,7 @@ function bindNodeMixRuntime(node, frame, scheduler, styles, reclaimed = false, p
     let state = node._mixState;
     bindMixinRuntime(state, {
         node: node._dom,
-        parent: parent ?? node._dom.parentNode,
+        parent: parent ?? getRequiredDomParent(node._dom),
         key: node.key,
         target: node,
         frame,
@@ -267,6 +273,11 @@ function isHeadHostNode(node) {
         return false;
     return node.type.toLowerCase() === 'head';
 }
+function getRequiredDomParent(node) {
+    let parent = node.parentNode;
+    invariant(parent, 'Expected mounted host node to have a DOM parent');
+    return parent;
+}
 function getDocumentHead(domParent) {
     if (domParent instanceof Document) {
         return domParent.head;
@@ -276,65 +287,112 @@ function getDocumentHead(domParent) {
     }
     return null;
 }
-export function diffVNodes(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, anchor, rootCursor) {
-    next._parent = vParent; // set parent for initial render context lookups
-    next._svg = getSvgContext(vParent, next.type);
-    // new
+function commitNonRenderNode(node, parent, svg) {
+    let committed = node;
+    committed._parent = parent;
+    committed._svg = svg;
+    return committed;
+}
+function commitTextNode(node, parent, svg, dom) {
+    let committed = node;
+    committed._parent = parent;
+    committed._svg = svg;
+    committed._dom = dom;
+    return committed;
+}
+function beginFragmentNode(node, parent, svg) {
+    let committed = node;
+    committed._parent = parent;
+    committed._svg = svg;
+    committed._children = EMPTY_COMMITTED_CHILDREN;
+    return committed;
+}
+function commitHostNode(node, parent, svg, dom, resolved, children = EMPTY_COMMITTED_CHILDREN) {
+    let committed = node;
+    committed._parent = parent;
+    committed._svg = svg;
+    committed._dom = dom;
+    committed._children = children;
+    committed._mixedProps = resolved.props;
+    committed._mixState = resolved.mixState;
+    committed._directEventDescriptors = resolved.directEventDescriptors;
+    return committed;
+}
+function beginComponentNode(node, parent, svg, handle, context) {
+    let mounting = node;
+    mounting._parent = parent;
+    mounting._svg = svg;
+    mounting._handle = handle;
+    mounting._context = context;
+    return mounting;
+}
+function commitComponentNode(node, content) {
+    let committed = node;
+    committed._content = content;
+    return committed;
+}
+export function diffVNodes(curr, next, domParent, vParent, context, anchor, cursor) {
     if (curr === null) {
-        return insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, anchor, rootCursor);
-    }
-    if (curr.type !== next.type) {
-        replace(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, anchor);
-        return rootCursor;
-    }
-    if (isNonRenderNode(curr) && isNonRenderNode(next)) {
-        return rootCursor;
+        return insert(next, domParent, vParent, context, anchor, cursor);
     }
-    if (isCommittedTextNode(curr) && isTextNode(next)) {
-        diffText(curr, next, vParent);
-        return rootCursor;
+    if (componentStalenessCheck !== null &&
+        curr.kind === 'component' &&
+        next.kind === 'component' &&
+        componentStalenessCheck(curr.type) === true) {
+        return replace(curr, next, domParent, vParent, context, anchor);
     }
-    if (isCommittedHostNode(curr) && isHostNode(next)) {
-        diffHost(curr, next, frame, scheduler, styles, vParent, rootTarget);
-        return rootCursor;
+    if (curr.kind !== next.kind || curr.type !== next.type) {
+        return replace(curr, next, domParent, vParent, context, anchor);
     }
-    if (isCommittedComponentNode(curr) && isComponentNode(next)) {
-        diffComponent(curr, next, frame, scheduler, styles, domParent, vParent, rootTarget);
-        return rootCursor;
-    }
-    if (isFragmentNode(curr) && isFragmentNode(next)) {
-        diffChildren(curr._children, next._children, domParent, frame, scheduler, styles, next, rootTarget, undefined, anchor);
-        return rootCursor;
-    }
-    if (curr.type === Frame && next.type === Frame) {
-        diffFrame(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, anchor);
-        return rootCursor;
+    switch (next.kind) {
+        case 'host': {
+            return diffHost(curr, next, vParent, context);
+        }
+        case 'text': {
+            return diffText(curr, next, vParent, getSvgContext(vParent, next));
+        }
+        case 'empty': {
+            return commitNonRenderNode(next, vParent, getSvgContext(vParent, next));
+        }
+        case 'fragment': {
+            let childInputs = next._children;
+            let committed = beginFragmentNode(next, vParent, getSvgContext(vParent, next));
+            committed._children = diffChildren(curr._children, childInputs, domParent, committed, context, undefined, anchor);
+            return committed;
+        }
+        case 'frame': {
+            return diffFrame(curr, next, domParent, vParent, context, getSvgContext(vParent, next), anchor);
+        }
+        case 'component': {
+            return diffComponent(curr, next, domParent, vParent, context, getSvgContext(vParent, next), anchor, cursor);
+        }
     }
-    invariant(false, 'Unexpected diff case');
 }
-function replace(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, anchor) {
+function replace(curr, next, domParent, vParent, context, anchor) {
     let currAnchor = findFirstDomAnchor(curr);
     if (currAnchor && currAnchor.parentNode === domParent) {
         let replacementAnchor = document.createComment('rmx:replace');
         domParent.insertBefore(replacementAnchor, currAnchor);
         try {
-            remove(curr, domParent, scheduler, styles);
-            insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replacementAnchor);
+            remove(curr, domParent, context);
+            return insert(next, domParent, vParent, context, replacementAnchor);
         }
         finally {
             replacementAnchor.parentNode?.removeChild(replacementAnchor);
         }
-        return;
     }
     let replacementAnchor = findNextSiblingDomAnchor(curr) ?? anchor;
-    remove(curr, domParent, scheduler, styles);
-    insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replacementAnchor);
+    remove(curr, domParent, context);
+    return insert(next, domParent, vParent, context, replacementAnchor);
 }
-function diffHost(curr, next, frame, scheduler, styles, vParent, rootTarget) {
+function diffHost(curr, next, vParent, context) {
+    let { frame, scheduler, styles } = context;
     let mixState = curr._mixState;
     let currProps = getHostProps(curr);
-    let nextProps = resolveNodeMixProps(next, frame, scheduler, mixState);
-    let nextMixState = next._mixState;
+    let resolved = resolveNodeMixProps(next, vParent, frame, scheduler, mixState);
+    let childInputs = next._children;
+    let nextProps = resolved.props;
+    let nextMixState = resolved.mixState;
     let shouldDispatchMixinLifecycle = (nextMixState?.runners.length ?? 0) > 0 && shouldDispatchInlineMixinLifecycle(curr._dom);
     if (shouldDispatchMixinLifecycle) {
         dispatchMixinBeforeUpdate(nextMixState);
@@ -350,34 +408,30 @@ function diffHost(curr, next, frame, scheduler, styles, vParent, rootTarget) {
         // innerHTML was removed, clear it before adding children
         curr._dom.innerHTML = '';
     }
-    diffChildren(curr._children, next._children, curr._dom, frame, scheduler, styles, next, rootTarget);
+    let committed = commitHostNode(next, vParent, getSvgContext(vParent, next), curr._dom, resolved);
+    committed._directEventState = curr._directEventState;
+    committed._controlledState = curr._controlledState;
+    committed._children = diffChildren(curr._children, childInputs, curr._dom, committed, context);
     patchHostProps(currProps, nextProps, curr._dom);
-    next._dom = curr._dom;
-    next._parent = vParent;
-    next._controller = curr._controller;
-    next._directEventState = curr._directEventState;
-    next._controlledState = curr._controlledState;
-    syncDirectEventListeners(next);
-    if (next._controlledState || shouldTrackControlledReflection(nextProps)) {
-        ensureControlledReflection(next, scheduler);
-        syncControlledReflection(next, nextProps);
-    }
-    if (next._mixState) {
-        bindNodeMixRuntime(next, frame, scheduler, styles);
+    syncDirectEventListeners(committed);
+    if (committed._controlledState || shouldTrackControlledReflection(nextProps)) {
+        ensureControlledReflection(committed, scheduler);
+        syncControlledReflection(committed, nextProps);
+    }
+    if (committed._mixState) {
+        bindNodeMixRuntime(committed, frame, scheduler, styles);
     }
     if (shouldDispatchMixinLifecycle) {
         scheduler.enqueueCommitPhase([() => dispatchMixinCommit(nextMixState)]);
     }
-    return;
+    return committed;
 }
-function setupHostNode(node, dom, scheduler) {
-    node._dom = dom;
+function setupHostNode(node, scheduler) {
     let props = getHostProps(node);
-    let committedNode = node;
-    syncDirectEventListeners(committedNode);
+    syncDirectEventListeners(node);
     if (shouldTrackControlledReflection(props)) {
-        ensureControlledReflection(committedNode, scheduler);
-        syncControlledReflection(committedNode, props);
+        ensureControlledReflection(node, scheduler);
+        syncControlledReflection(node, props);
     }
 }
 function syncDirectEventListeners(node) {
@@ -397,8 +451,12 @@ function syncDirectEventListeners(node) {
     }
     let bindings = state.bindings;
     for (let index = 0; index < descriptors.length; index++) {
-        let descriptor = descriptors[index];
-        let [type, handler, captureBoolean = false] = descriptor.args;
+        // Indexed access instead of array destructuring: destructuring goes through
+        // the iterator protocol and allocates on every host-node update.
+        let args = descriptors[index].args;
+        let type = args[0];
+        let handler = args[1];
+        let captureBoolean = args[2] ?? false;
         let binding = bindings[index];
         if (!binding) {
             binding = createDirectEventBinding(type, handler, captureBoolean);
@@ -457,258 +515,286 @@ function teardownDirectEventListeners(node) {
     state.bindings.length = 0;
     node._directEventState = undefined;
 }
+// Teardown for a node whose DOM subtree is being discarded wholesale: abort
+// pending handler work but skip removeEventListener — the listeners die with
+// the detached node, and removing them one-by-one dominates large teardowns.
+function abandonDirectEventListeners(node) {
+    let state = node._directEventState;
+    if (!state)
+        return;
+    for (let binding of state.bindings) {
+        binding.reentry?.abort(new DOMException('', 'AbortError'));
+        binding.reentry = null;
+    }
+    state.bindings.length = 0;
+    node._directEventState = undefined;
+}
 function invokeDirectEventBinding(binding, event) {
     binding.reentry?.abort(new DOMException('', 'EventReentry'));
     binding.reentry = new AbortController();
     void binding.handler(event, binding.reentry.signal);
 }
-function diffText(curr, next, vParent) {
+function diffText(curr, next, vParent, svg) {
     if (curr._text !== next._text) {
         curr._dom.textContent = next._text;
     }
-    next._dom = curr._dom;
-    next._parent = vParent;
+    return commitTextNode(next, vParent, svg, curr._dom);
 }
-function insert(node, domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor) {
-    node._parent = vParent; // set parent for initial render context lookups
-    node._svg = getSvgContext(vParent, node.type);
+function insert(node, domParent, vParent, context, anchor, cursor) {
+    let { frame, scheduler, styles } = context;
+    let svg = getSvgContext(vParent, node);
+    let hydrationNode = cursor?.current;
     // Stop hydration if cursor has reached the anchor (end boundary)
     // Check BEFORE skipComments to prevent escaping range root markers
-    if (cursor && anchor && cursor === anchor) {
-        cursor = null;
+    if (hydrationNode && anchor && hydrationNode === anchor) {
+        hydrationNode = null;
     }
     // Preserve frame-start markers for non-Frame nodes too, so a following <Frame>
     // (e.g. the first child of a bare Fragment at a clientEntry boundary) can still
     // claim its rmx:f marker during hydration instead of being re-inserted fresh.
     // A rmx:f marker always belongs to a <Frame>, so no non-Frame node should
     // consume one.
-    cursor = skipCommentsExceptFrameStart(cursor ?? null);
+    hydrationNode = skipCommentsExceptFrameStart(hydrationNode ?? null);
     // Also check after skipComments in case we skipped past the anchor
-    if (cursor && anchor && cursor === anchor) {
-        cursor = null;
+    if (hydrationNode && anchor && hydrationNode === anchor) {
+        hydrationNode = null;
     }
+    if (cursor)
+        cursor.current = hydrationNode;
     let doInsert = anchor
         ? (dom) => domParent.insertBefore(dom, anchor)
         : (dom) => domParent.appendChild(dom);
-    if (isNonRenderNode(node)) {
-        return cursor;
+    if (node.kind === 'empty') {
+        return commitNonRenderNode(node, vParent, svg);
     }
-    if (isTextNode(node)) {
-        if (cursor instanceof Text) {
-            node._parent = vParent;
+    if (node.kind === 'text') {
+        if (hydrationNode instanceof Text) {
             // Handle text node consolidation: server renders adjacent text as single node
             // e.g., <span>Hello {world}</span> → server: "Hello world", client: ["Hello ", "world"]
-            if (cursor.data !== node._text) {
-                if (cursor.data.startsWith(node._text) && node._text.length < cursor.data.length) {
+            if (hydrationNode.data !== node._text) {
+                if (hydrationNode.data.startsWith(node._text) &&
+                    node._text.length < hydrationNode.data.length) {
                     // Consolidation case: split the text node at the boundary
                     // cursor becomes the first part (node._text), remainder is returned for next vnode
-                    let remainder = cursor.splitText(node._text.length);
-                    node._dom = cursor;
-                    return remainder;
+                    let remainder = hydrationNode.splitText(node._text.length);
+                    if (cursor)
+                        cursor.current = remainder;
+                    return commitTextNode(node, vParent, svg, hydrationNode);
                 }
                 // Genuine mismatch - correct it
-                logHydrationMismatch('text mismatch', cursor.data, node._text);
-                cursor.data = node._text;
+                logHydrationMismatch('text mismatch', hydrationNode.data, node._text);
+                hydrationNode.data = node._text;
             }
-            node._dom = cursor;
-            return cursor.nextSibling;
+            if (cursor)
+                cursor.current = hydrationNode.nextSibling;
+            return commitTextNode(node, vParent, svg, hydrationNode);
         }
         let dom = document.createTextNode(node._text);
-        node._dom = dom;
-        node._parent = vParent;
         doInsert(dom);
-        return cursor;
+        return commitTextNode(node, vParent, svg, dom);
     }
-    if (isHostNode(node)) {
-        let hostProps = resolveNodeMixProps(node, frame, scheduler);
+    if (node.kind === 'host') {
+        let resolved = resolveNodeMixProps(node, vParent, frame, scheduler);
+        let hostProps = resolved.props;
+        let childInputs = node._children;
         if (isHeadHostNode(node)) {
             let targetHead = getDocumentHead(domParent);
             if (targetHead) {
-                let childCursor = cursor;
-                if (cursor instanceof Element && cursor.tagName.toLowerCase() === 'head') {
-                    childCursor = cursor.firstChild;
-                    let nextCursor = cursor.nextSibling;
-                    if (cursor !== targetHead) {
-                        while (cursor.firstChild) {
-                            targetHead.appendChild(cursor.firstChild);
+                let childCursor = cursor ? { current: hydrationNode } : undefined;
+                if (hydrationNode instanceof Element && hydrationNode.tagName.toLowerCase() === 'head') {
+                    if (childCursor)
+                        childCursor.current = hydrationNode.firstChild;
+                    let nextCursor = hydrationNode.nextSibling;
+                    if (hydrationNode !== targetHead) {
+                        while (hydrationNode.firstChild) {
+                            targetHead.appendChild(hydrationNode.firstChild);
                         }
-                        cursor.remove();
+                        hydrationNode.remove();
                     }
-                    cursor = nextCursor;
+                    if (cursor)
+                        cursor.current = nextCursor;
                 }
+                let committed = commitHostNode(node, vParent, svg, targetHead, resolved);
                 // Render explicit <head> children directly into document.head.
-                diffChildren(null, node._children, targetHead, frame, scheduler, styles, node, rootTarget, childCursor);
+                committed._children = diffChildren(null, childInputs, targetHead, committed, context, childCursor);
                 patchHostProps({}, hostProps, targetHead);
-                setupHostNode(node, targetHead, scheduler);
-                if (node._mixState) {
-                    bindNodeMixRuntime(node, frame, scheduler, styles);
+                setupHostNode(committed, scheduler);
+                if (committed._mixState) {
+                    bindNodeMixRuntime(committed, frame, scheduler, styles);
                 }
-                return cursor;
+                return committed;
             }
         }
         // Check for matching mixin-persisted node that can be reclaimed
         let persistedNode = findMatchingPersistedMixinNode(node.type, node.key, domParent);
         if (persistedNode) {
-            reclaimPersistedMixinNode(persistedNode, node, frame, scheduler, styles, vParent, rootTarget);
-            return cursor;
+            return reclaimPersistedMixinNode(persistedNode, node, vParent, context);
         }
-        if (cursor instanceof Element) {
+        if (hydrationNode instanceof Element) {
             // SVG elements have case-sensitive tag names (e.g. linearGradient, clipPath)
             // HTML elements are case-insensitive, so we lowercase for comparison
-            let cursorTag = node._svg ? cursor.tagName : cursor.tagName.toLowerCase();
+            let cursorTag = svg ? hydrationNode.tagName : hydrationNode.tagName.toLowerCase();
             if (cursorTag === node.type) {
-                let nextCursor = cursor.nextSibling;
-                patchHostProps({}, hostProps, cursor);
+                let nextCursor = hydrationNode.nextSibling;
+                patchHostProps({}, hostProps, hydrationNode);
+                let committed = commitHostNode(node, vParent, svg, hydrationNode, resolved);
                 // Handle innerHTML prop
                 if (hostProps.innerHTML != null) {
-                    cursor.innerHTML = hostProps.innerHTML;
+                    hydrationNode.innerHTML = hostProps.innerHTML;
                 }
                 else {
-                    let childCursor = cursor.firstChild;
+                    let childCursor = { current: hydrationNode.firstChild };
                     // Ignore excess nodes - browser extensions may inject content
-                    diffChildren(null, node._children, cursor, frame, scheduler, styles, node, rootTarget, childCursor);
+                    committed._children = diffChildren(null, childInputs, hydrationNode, committed, context, childCursor);
                 }
-                setupHostNode(node, cursor, scheduler);
-                if (node._mixState) {
-                    bindNodeMixRuntime(node, frame, scheduler, styles);
+                setupHostNode(committed, scheduler);
+                if (committed._mixState) {
+                    bindNodeMixRuntime(committed, frame, scheduler, styles);
                 }
-                return nextCursor;
+                if (cursor)
+                    cursor.current = nextCursor;
+                return committed;
             }
             else {
                 // Type mismatch - try single-advance retry to handle browser extension injections
                 // at the start of containers. Skip this node and try the next sibling once.
-                let nextSibling = skipComments(cursor.nextSibling);
+                let nextSibling = skipComments(hydrationNode.nextSibling);
                 if (nextSibling instanceof Element) {
-                    let nextTag = node._svg ? nextSibling.tagName : nextSibling.tagName.toLowerCase();
+                    let nextTag = svg ? nextSibling.tagName : nextSibling.tagName.toLowerCase();
                     if (nextTag === node.type) {
                         let nextCursor = nextSibling.nextSibling;
                         // Found a match after skipping - adopt it and leave skipped node in place
                         patchHostProps({}, hostProps, nextSibling);
+                        let committed = commitHostNode(node, vParent, svg, nextSibling, resolved);
                         if (hostProps.innerHTML != null) {
                             nextSibling.innerHTML = hostProps.innerHTML;
                         }
                         else {
-                            let childCursor = nextSibling.firstChild;
-                            diffChildren(null, node._children, nextSibling, frame, scheduler, styles, node, rootTarget, childCursor);
+                            let childCursor = { current: nextSibling.firstChild };
+                            committed._children = diffChildren(null, childInputs, nextSibling, committed, context, childCursor);
                         }
-                        setupHostNode(node, nextSibling, scheduler);
-                        if (node._mixState) {
-                            bindNodeMixRuntime(node, frame, scheduler, styles);
+                        setupHostNode(committed, scheduler);
+                        if (committed._mixState) {
+                            bindNodeMixRuntime(committed, frame, scheduler, styles);
                         }
-                        return nextCursor;
+                        if (cursor)
+                            cursor.current = nextCursor;
+                        return committed;
                     }
                 }
                 // Retry failed - log mismatch and create new element (don't remove mismatched nodes)
                 logHydrationMismatch('tag', cursorTag, node.type);
-                cursor = undefined; // stop hydration for this tree
+                if (cursor)
+                    cursor.current = undefined; // stop hydration for this tree
             }
         }
-        let dom = node._svg
-            ? document.createElementNS(SVG_NS, node.type)
-            : document.createElement(node.type);
+        let dom = svg ? document.createElementNS(SVG_NS, node.type) : document.createElement(node.type);
         patchHostProps({}, hostProps, dom);
+        let committed = commitHostNode(node, vParent, svg, dom, resolved);
         // Handle innerHTML prop
         if (hostProps.innerHTML != null) {
             dom.innerHTML = hostProps.innerHTML;
         }
         else {
-            diffChildren(null, node._children, dom, frame, scheduler, styles, node, rootTarget);
+            committed._children = diffChildren(null, childInputs, dom, committed, context);
         }
-        setupHostNode(node, dom, scheduler);
-        if (node._mixState) {
-            bindNodeMixRuntime(node, frame, scheduler, styles, false, domParent);
+        setupHostNode(committed, scheduler);
+        if (committed._mixState) {
+            bindNodeMixRuntime(committed, frame, scheduler, styles, false, domParent);
         }
         doInsert(dom);
-        return cursor;
+        return committed;
     }
-    if (isFragmentNode(node)) {
+    if (node.kind === 'fragment') {
+        let childInputs = node._children;
+        let committed = beginFragmentNode(node, vParent, svg);
+        let children = childInputs;
         // Insert fragment children in order before the same anchor
-        for (let child of node._children) {
-            cursor = insert(child, domParent, frame, scheduler, styles, node, rootTarget, anchor, cursor);
+        for (let i = 0; i < childInputs.length; i++) {
+            children[i] = insert(childInputs[i], domParent, committed, context, anchor, cursor);
         }
-        return cursor;
+        committed._children = children;
+        return committed;
     }
-    if (isComponentNode(node)) {
-        return diffComponent(null, node, frame, scheduler, styles, domParent, vParent, rootTarget, anchor, cursor);
+    if (node.kind === 'component') {
+        return diffComponent(null, node, domParent, vParent, context, svg, anchor, cursor);
     }
-    if (node.type === Frame) {
-        return insertFrame(node, domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor);
+    if (node.kind === 'frame') {
+        return insertFrame(node, domParent, vParent, context, svg, anchor, cursor);
     }
     invariant(false, 'Unexpected node type');
 }
-function diffFrame(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, anchor) {
+function diffFrame(curr, next, domParent, vParent, context, svg, anchor) {
+    let { frame } = context;
     let currSrc = getFrameSrc(curr);
     let nextSrc = getFrameSrc(next);
     let currName = getFrameName(curr);
     let nextName = getFrameName(next);
     if (currName !== nextName) {
-        let replaceAnchor = curr._rangeEnd?.nextSibling ?? anchor;
-        remove(curr, domParent, scheduler, styles);
-        insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replaceAnchor);
-        return;
+        let replaceAnchor = curr._rangeEnd.nextSibling ?? anchor;
+        remove(curr, domParent, context);
+        return insertFrame(next, domParent, vParent, context, svg, replaceAnchor);
     }
     // If the frame hasn't resolved yet, preserve existing cancel/remount behavior
     // so pending streams from the old src cannot take over the new src.
-    if (currSrc !== nextSrc && !curr._frameResolved) {
-        let replaceAnchor = curr._rangeEnd?.nextSibling ?? anchor;
-        remove(curr, domParent, scheduler, styles);
-        insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replaceAnchor);
-        return;
+    if (currSrc !== nextSrc && !curr._state.resolved) {
+        let replaceAnchor = curr._rangeEnd.nextSibling ?? anchor;
+        remove(curr, domParent, context);
+        return insertFrame(next, domParent, vParent, context, svg, replaceAnchor);
     }
-    next._rangeStart = curr._rangeStart;
-    next._rangeEnd = curr._rangeEnd;
-    next._frameInstance = curr._frameInstance;
-    next._frameFallbackRoot = curr._frameFallbackRoot;
-    next._frameResolveToken = curr._frameResolveToken;
-    next._frameResolved = curr._frameResolved;
-    next._parent = vParent;
+    let committed = next;
+    Object.assign(committed, {
+        _rangeStart: curr._rangeStart,
+        _rangeEnd: curr._rangeEnd,
+        _state: curr._state,
+        _parent: vParent,
+        _svg: svg,
+    });
+    let frameRuntime = getFrameRuntime(frame);
+    let frameInstance = committed._state.instance;
+    let serverFrameReload = frameRuntime?.serverFrameReload;
     if (currSrc !== nextSrc) {
-        let frameInstance = next._frameInstance;
         if (frameInstance) {
             frameInstance.handle.src = nextSrc;
         }
-        let runtime = getFrameRuntime(frame);
-        if (runtime) {
-            resolveClientFrame(next, runtime);
+        if (frameRuntime) {
+            resolveClientFrame(committed, frameRuntime, serverFrameReload);
         }
     }
-    if (!next._frameResolved && next._frameFallbackRoot) {
-        next._frameFallbackRoot.render(next.props?.fallback ?? null);
+    else if (frameRuntime && frameInstance && serverFrameReload) {
+        // Reload client frames that have the same src during a render triggered by an ancestor frame reload
+        resolveClientFrame(committed, frameRuntime, serverFrameReload);
+    }
+    if (!committed._state.resolved && committed._state.fallbackRoot) {
+        committed._state.fallbackRoot.render(committed.props.fallback ?? null);
     }
+    return committed;
 }
-function insertFrame(node, domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor) {
+function insertFrame(node, domParent, vParent, context, svg, anchor, cursor) {
+    let { frame, styles } = context;
     let runtime = getFrameRuntime(frame);
     if (!runtime || runtime.canResolveFrames === false) {
         throw new Error('Cannot render <Frame /> without frame runtime. Use run() or pass frameInit to createRoot/createRangeRoot.');
     }
     // Hydration path: adopt server-rendered frame markers and reuse the existing
     // frame instance created during createSubFrames().
-    if (isFrameStartComment(cursor)) {
-        let start = cursor;
+    if (isFrameStartComment(cursor?.current)) {
+        let start = cursor.current;
         let end = findFrameEndComment(start);
         if (end) {
-            node._rangeStart = start;
-            node._rangeEnd = end;
-            node._parent = vParent;
-            node._frameResolveToken = 0;
-            node._frameResolveController = undefined;
-            node._frameFallbackRoot = undefined;
-            node._frameResolved = true;
-            let frameId = getFrameIdFromComment(start);
-            let marker = frameId ? runtime.data.f?.[frameId] : undefined;
-            let src = marker?.src ?? getFrameSrc(node);
             let instance = runtime.frameInstances.get(start);
+            let src = instance?.handle.src ?? getFrameSrc(node);
             if (!instance) {
                 instance = createFrame([start, end], {
                     name: getFrameName(node),
                     src,
-                    marker: frameId && marker ? { ...marker, id: frameId } : undefined,
                     errorTarget: runtime.errorTarget,
                     loadModule: runtime.loadModule,
                     resolveFrame: runtime.resolveFrame,
                     pendingClientEntries: runtime.pendingClientEntries,
                     scheduler: runtime.scheduler,
-                    data: runtime.data,
+                    styleManager: runtime.styleManager,
+                    data: {},
                     moduleCache: runtime.moduleCache,
                     moduleLoads: runtime.moduleLoads,
                     frameInstances: runtime.frameInstances,
@@ -716,8 +802,20 @@ function insertFrame(node, domParent, frame, scheduler, styles, vParent, rootTar
                 });
                 runtime.frameInstances.set(start, instance);
             }
-            node._frameInstance = instance;
-            return end.nextSibling;
+            cursor.current = end.nextSibling;
+            return Object.assign(node, {
+                _rangeStart: start,
+                _rangeEnd: end,
+                _parent: vParent,
+                _svg: svg,
+                _state: {
+                    instance,
+                    resolveToken: 0,
+                    resolveController: undefined,
+                    fallbackRoot: undefined,
+                    resolved: true,
+                },
+            });
         }
     }
     let start = document.createComment(` rmx:f:${randomFrameId()} `);
@@ -727,17 +825,11 @@ function insertFrame(node, domParent, frame, scheduler, styles, vParent, rootTar
         : (dom) => domParent.appendChild(dom);
     doInsert(start);
     doInsert(end);
-    node._rangeStart = start;
-    node._rangeEnd = end;
-    node._parent = vParent;
     let fallbackRoot = createRangeRoot([start, end], {
         frame,
         styleManager: styles,
     });
-    fallbackRoot.render(node.props?.fallback ?? null);
-    node._frameFallbackRoot = fallbackRoot;
-    node._frameResolved = false;
-    node._frameResolveToken = 0;
+    fallbackRoot.render(node.props.fallback ?? null);
     let instance = createFrame([start, end], {
         name: getFrameName(node),
         src: getFrameSrc(node),
@@ -746,57 +838,84 @@ function insertFrame(node, domParent, frame, scheduler, styles, vParent, rootTar
         resolveFrame: runtime.resolveFrame,
         pendingClientEntries: runtime.pendingClientEntries,
         scheduler: runtime.scheduler,
-        data: runtime.data,
+        styleManager: runtime.styleManager,
+        data: {},
         moduleCache: runtime.moduleCache,
         moduleLoads: runtime.moduleLoads,
         frameInstances: runtime.frameInstances,
         namedFrames: runtime.namedFrames,
     });
-    node._frameInstance = instance;
     runtime.frameInstances.set(start, instance);
-    resolveClientFrame(node, runtime);
-    return cursor;
+    let committed = Object.assign(node, {
+        _rangeStart: start,
+        _rangeEnd: end,
+        _parent: vParent,
+        _svg: svg,
+        _state: {
+            instance,
+            fallbackRoot,
+            resolved: false,
+            resolveToken: 0,
+            resolveController: undefined,
+        },
+    });
+    resolveClientFrame(committed, runtime);
+    return committed;
 }
-function resolveClientFrame(node, runtime) {
+function resolveClientFrame(node, runtime, serverFrameReload) {
     let frameSrc = getFrameSrc(node);
-    let instance = node._frameInstance;
-    if (!instance)
-        return;
-    let token = (node._frameResolveToken ?? 0) + 1;
-    node._frameResolveToken = token;
-    node._frameResolveController?.abort();
-    let resolveController = new AbortController();
-    node._frameResolveController = resolveController;
-    Promise.resolve(runtime.resolveFrame(frameSrc, resolveController.signal, getFrameName(node)))
-        .then(async (content) => {
-        if (node._frameResolveToken !== token || resolveController.signal.aborted)
+    let state = node._state;
+    let instance = state.instance;
+    let token = state.resolveToken + 1;
+    state.resolveToken = token;
+    state.resolveController?.abort();
+    let reload = serverFrameReload
+        ? instance.beginClientFrameReloadForAncestorReload(serverFrameReload.signal)
+        : undefined;
+    if (!reload) {
+        instance.cancelReload();
+    }
+    let resolveController = reload?.controller ?? new AbortController();
+    state.resolveController = resolveController;
+    Promise.resolve()
+        .then(() => runtime.resolveFrame(frameSrc, {
+        signal: resolveController.signal,
+        target: getFrameName(node),
+    }))
+        .then(async (resolution) => {
+        if (state.resolveToken !== token || resolveController.signal.aborted)
             return;
-        node._frameFallbackRoot?.dispose();
-        node._frameFallbackRoot = undefined;
+        let { content } = await unwrapFrameResolution(resolution);
+        if (state.resolveToken !== token || resolveController.signal.aborted)
+            return;
+        state.fallbackRoot?.dispose();
+        state.fallbackRoot = undefined;
         let nextContent = asAbortableFrameContent(content, resolveController.signal);
         await instance.render(nextContent, { signal: resolveController.signal });
-        if (node._frameResolveToken !== token || resolveController.signal.aborted)
+        if (state.resolveToken !== token || resolveController.signal.aborted)
             return;
-        node._frameResolved = true;
+        state.resolved = true;
+    })
+        .catch((error) => {
+        if (reload && state.resolveToken === token && !resolveController.signal.aborted) {
+            runtime.errorTarget.dispatchEvent(createComponentErrorEvent(error));
+        }
     })
-        .catch(() => { })
         .finally(() => {
-        if (node._frameResolveController === resolveController) {
-            node._frameResolveController = undefined;
+        reload?.complete();
+        if (state.resolveController === resolveController) {
+            state.resolveController = undefined;
         }
     });
 }
 function disposeFrameResources(node) {
-    node._frameResolveToken = (node._frameResolveToken ?? 0) + 1;
-    node._frameResolveController?.abort();
-    node._frameResolveController = undefined;
-    node._frameFallbackRoot?.dispose();
-    node._frameFallbackRoot = undefined;
-    let frameInstance = node._frameInstance;
-    if (frameInstance) {
-        frameInstance.dispose();
-        node._frameInstance = undefined;
-    }
+    let state = node._state;
+    state.resolveToken++;
+    state.resolveController?.abort();
+    state.resolveController = undefined;
+    state.fallbackRoot?.dispose();
+    state.fallbackRoot = undefined;
+    state.instance.dispose();
 }
 function asAbortableFrameContent(content, signal) {
     if (!(content instanceof ReadableStream))
@@ -832,13 +951,13 @@ function createAbortableReadableStream(source, signal) {
                 removeAbortReadListener = () => signal.removeEventListener('abort', onAbortRead);
                 signal.addEventListener('abort', onAbortRead, { once: true });
             });
-            let { done, value } = await Promise.race([reader.read(), abortRead]);
+            let result = await Promise.race([reader.read(), abortRead]);
             removeAbortReadListener?.();
-            if (done) {
+            if (result.done) {
                 controller.close();
                 return;
             }
-            controller.enqueue(value);
+            controller.enqueue(result.value);
         },
         cancel(reason) {
             signal.removeEventListener('abort', onAbort);
@@ -849,8 +968,6 @@ function createAbortableReadableStream(source, signal) {
 function removeFrameDomRange(node, domParent) {
     let start = node._rangeStart;
     let end = node._rangeEnd;
-    if (!(start instanceof Comment) || !(end instanceof Comment))
-        return;
     let cursor = start;
     while (cursor) {
         let nextSibling = cursor.nextSibling;
@@ -861,19 +978,16 @@ function removeFrameDomRange(node, domParent) {
             break;
         cursor = nextSibling;
     }
-    node._rangeStart = undefined;
-    node._rangeEnd = undefined;
 }
 function getFrameRuntime(frame) {
-    return frame.$runtime;
+    let runtime = frame.$runtime;
+    return isFrameRuntime(runtime) ? runtime : undefined;
 }
 function getFrameSrc(node) {
-    let src = node.props?.src;
-    invariant(typeof src === 'string' && src.length > 0, '<Frame /> requires a src prop');
-    return src;
+    return node.props.src;
 }
 function getFrameName(node) {
-    let name = node.props?.name;
+    let name = node.props.name;
     return typeof name === 'string' && name.length > 0 ? name : undefined;
 }
 function randomFrameId() {
@@ -888,16 +1002,13 @@ function skipCommentsExceptFrameStart(cursor) {
     return cursor;
 }
 function isFrameStartComment(node) {
-    return node instanceof Comment && node.data.trim().startsWith('rmx:f:');
+    return isCommentNode(node) && node.data.trim().startsWith('rmx:f:');
 }
 function isFrameEndComment(node) {
-    return node instanceof Comment && node.data.trim() === '/rmx:f';
+    return isCommentNode(node) && node.data.trim() === '/rmx:f';
 }
-function getFrameIdFromComment(comment) {
-    let text = comment.data.trim();
-    if (!text.startsWith('rmx:f:'))
-        return undefined;
-    return text.slice('rmx:f:'.length);
+function isCommentNode(node) {
+    return node?.nodeType === Node.COMMENT_NODE;
 }
 function findFrameEndComment(start) {
     let depth = 1;
@@ -914,32 +1025,32 @@ function findFrameEndComment(start) {
     }
     return null;
 }
-export function renderComponent(handle, currContent, next, domParent, frame, scheduler, styles, rootTarget, vParent, anchor, cursor) {
-    if (handle.isRemoved())
-        return cursor;
+export function renderComponent(currContent, next, domParent, context, anchor, cursor) {
+    let { scheduler } = context;
+    let handle = next._handle;
+    if (handle.isRemoved()) {
+        invariant('_content' in next, 'Expected removed component to be committed');
+        return next;
+    }
     let [element, tasks] = handle.render(next.props);
-    let content = toVNode(element);
-    let newCursor = diffVNodes(currContent, content, domParent, frame, scheduler, styles, next, rootTarget, anchor, cursor);
-    next._content = content;
-    next._handle = handle;
-    next._parent = vParent;
-    let committed = next;
-    handle.setScheduleUpdate(() => {
-        scheduler.enqueue(committed, domParent);
-    });
+    let content = diffVNodes(currContent, toVNode(element), domParent, next, context, anchor, cursor);
+    let committed = commitComponentNode(next, content);
+    handle.setScheduleUpdate(scheduler, committed, domParent);
     scheduler.enqueueTasks(tasks);
-    return newCursor;
+    return committed;
 }
-function diffComponent(curr, next, frame, scheduler, styles, domParent, vParent, rootTarget, anchor, cursor) {
+function diffComponent(curr, next, domParent, vParent, context, svg, anchor, cursor) {
+    let { frame } = context;
     if (curr === null) {
-        let componentId = vParent._pendingHydrationComponentId;
+        let componentId = vParent.kind === 'root' ? vParent._pendingHydrationComponentId : undefined;
         if (componentId) {
-            vParent._pendingHydrationComponentId = undefined;
+            if (vParent.kind === 'root')
+                vParent._pendingHydrationComponentId = undefined;
         }
         else {
             componentId = `c${++idCounter}`;
         }
-        next._handle = createComponent({
+        let handle = createComponent({
             id: componentId,
             frame,
             type: next.type,
@@ -953,52 +1064,54 @@ function diffComponent(curr, next, frame, scheduler, styles, domParent, vParent,
                 return runtime?.topFrame;
             },
         });
-        return renderComponent(next._handle, null, next, domParent, frame, scheduler, styles, rootTarget, vParent, anchor, cursor);
+        let mounting = beginComponentNode(next, vParent, svg, handle, context);
+        return renderComponent(null, mounting, domParent, context, anchor, cursor);
     }
-    next._handle = curr._handle;
-    let { _content, _handle } = curr;
-    return renderComponent(_handle, _content, next, domParent, frame, scheduler, styles, rootTarget, vParent, anchor, cursor);
+    let mounting = beginComponentNode(next, vParent, svg, curr._handle, context);
+    return renderComponent(curr._content, mounting, domParent, context, anchor, cursor);
 }
 // Cleanup without DOM removal - used for descendants when parent DOM node is removed
-function cleanupDescendants(node, scheduler, styles) {
+function cleanupDescendants(node, context) {
+    let { scheduler } = context;
     if (isCommittedTextNode(node)) {
         return;
     }
     if (isCommittedHostNode(node)) {
-        for (let child of node._children) {
-            cleanupDescendants(child, scheduler, styles);
+        let children = node._children;
+        for (let i = 0; i < children.length; i++) {
+            cleanupDescendants(children[i], context);
         }
         teardownMixins(node._mixState);
-        teardownDirectEventListeners(node);
-        teardownControlledReflection(node);
-        if (node._controller)
-            node._controller.abort();
+        abandonDirectEventListeners(node);
+        abandonControlledReflection(node);
         return;
     }
     if (isFragmentNode(node)) {
-        for (let child of node._children) {
-            cleanupDescendants(child, scheduler, styles);
+        let children = node._children;
+        for (let i = 0; i < children.length; i++) {
+            cleanupDescendants(children[i], context);
         }
         return;
     }
     if (isCommittedComponentNode(node)) {
-        cleanupDescendants(node._content, scheduler, styles);
+        cleanupDescendants(node._content, context);
         let tasks = node._handle.remove();
         scheduler.enqueueTasks(tasks);
         return;
     }
-    if (node.type === Frame) {
+    if (node.kind === 'frame') {
         disposeFrameResources(node);
         return;
     }
 }
-export function remove(node, domParent, scheduler, styles) {
+export function remove(node, domParent, context) {
+    let { scheduler } = context;
     if (isCommittedTextNode(node)) {
         node._dom.parentNode?.removeChild(node._dom);
         return;
     }
     if (isCommittedHostNode(node)) {
-        if (node._persistedByMixins)
+        if (node._persistence)
             return;
         let persistedRemoval = prepareMixinRemoval(node._mixState);
         if (persistedRemoval) {
@@ -1007,106 +1120,108 @@ export function remove(node, domParent, scheduler, styles) {
             void persistedRemoval
                 .catch(() => { })
                 .finally(() => {
-                if (!node._persistedByMixins)
+                if (!node._persistence)
                     return;
-                if (node._persistedRemovalToken !== token)
+                if (node._persistence.token !== token)
                     return;
                 unmarkNodePersistedByMixins(node);
-                performHostNodeRemoval(node, domParent, scheduler, styles);
+                performHostNodeRemoval(node, domParent, context);
             });
             return;
         }
-        performHostNodeRemoval(node, domParent, scheduler, styles);
+        performHostNodeRemoval(node, domParent, context);
         return;
     }
     if (isFragmentNode(node)) {
-        for (let child of node._children) {
-            remove(child, domParent, scheduler, styles);
+        let children = node._children;
+        for (let i = 0; i < children.length; i++) {
+            remove(children[i], domParent, context);
         }
         return;
     }
     if (isCommittedComponentNode(node)) {
-        remove(node._content, domParent, scheduler, styles);
+        remove(node._content, domParent, context);
         let tasks = node._handle.remove();
         scheduler.enqueueTasks(tasks);
         return;
     }
-    if (node.type === Frame) {
+    if (node.kind === 'frame') {
         disposeFrameResources(node);
         removeFrameDomRange(node, domParent);
         return;
     }
 }
 // Actually remove a host node from DOM and clean up
-function performHostNodeRemoval(node, domParent, scheduler, styles) {
+function performHostNodeRemoval(node, domParent, context) {
+    let children = node._children;
     if (isHeadHostNode(node)) {
-        for (let child of node._children) {
-            remove(child, node._dom, scheduler, styles);
+        for (let i = 0; i < children.length; i++) {
+            remove(children[i], node._dom, context);
         }
     }
     else {
         // Clean up all descendants first (before removing DOM subtree)
-        for (let child of node._children) {
-            cleanupDescendants(child, scheduler, styles);
+        for (let i = 0; i < children.length; i++) {
+            cleanupDescendants(children[i], context);
         }
     }
     teardownMixins(node._mixState);
-    teardownDirectEventListeners(node);
-    teardownControlledReflection(node);
-    // Never remove the real document.head node when reconciling a <head> vnode.
-    if (!isHeadHostNode(node)) {
+    // Never remove the real document.head node when reconciling a <head> vnode,
+    // and since it stays alive, detach its listeners for real.
+    if (isHeadHostNode(node)) {
+        teardownDirectEventListeners(node);
+        teardownControlledReflection(node);
+    }
+    else {
+        abandonDirectEventListeners(node);
+        abandonControlledReflection(node);
         node._dom.parentNode?.removeChild(node._dom);
     }
-    if (node._controller)
-        node._controller.abort();
 }
-function diffChildren(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, cursor, anchor) {
+function diffChildren(curr, next, domParent, vParent, context, cursor, anchor) {
     let hasKeys = hasKeyedChildren(next);
+    let committed = next;
     if (curr === null) {
         if (hasKeys) {
             warnDuplicateKeys(next);
         }
-        for (let node of next) {
-            cursor = insert(node, domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor);
+        for (let i = 0; i < next.length; i++) {
+            committed[i] = insert(next[i], domParent, vParent, context, anchor, cursor);
         }
-        vParent._children = next;
-        return cursor;
+        return committed;
     }
     if (next.length === 0 &&
         anchor === undefined &&
         !parentUsesInnerHTML(vParent) &&
         canBulkClearChildren(curr)) {
-        for (let node of curr) {
-            cleanupDescendants(node, scheduler, styles);
+        for (let i = 0; i < curr.length; i++) {
+            cleanupDescendants(curr[i], context);
         }
         domParent.textContent = '';
-        vParent._children = next;
-        return;
+        return EMPTY_COMMITTED_CHILDREN;
     }
     if (!hasKeys) {
         for (let i = 0; i < next.length; i++) {
             let currentNode = i < curr.length ? curr[i] : null;
-            diffVNodes(currentNode, next[i], domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor);
+            committed[i] = diffVNodes(currentNode, next[i], domParent, vParent, context, anchor, cursor);
         }
         if (curr.length > next.length) {
             for (let i = next.length; i < curr.length; i++) {
                 let node = curr[i];
                 if (node)
-                    remove(node, domParent, scheduler, styles);
+                    remove(node, domParent, context);
             }
         }
-        vParent._children = next;
-        return;
+        return committed;
     }
-    patchKeyedChildren(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, cursor, anchor);
-    return;
+    return patchKeyedChildren(curr, next, domParent, vParent, context, cursor, anchor);
 }
 function parentUsesInnerHTML(parent) {
     return isHostNode(parent) && getHostProps(parent).innerHTML != null;
 }
 function canBulkClearChildren(children) {
-    for (let child of children) {
-        if (!canBulkClearNode(child))
+    for (let i = 0; i < children.length; i++) {
+        if (!canBulkClearNode(children[i]))
             return false;
     }
     return true;
@@ -1117,11 +1232,7 @@ function canBulkClearNode(node) {
     if (isCommittedHostNode(node)) {
         if (node._mixState)
             return false;
-        for (let child of node._children) {
-            if (!canBulkClearNode(child))
-                return false;
-        }
-        return true;
+        return canBulkClearChildren(node._children);
     }
     if (isFragmentNode(node)) {
         return canBulkClearChildren(node._children);
@@ -1132,8 +1243,8 @@ function canBulkClearNode(node) {
     return false;
 }
 function hasKeyedChildren(children) {
-    for (let node of children) {
-        if (node.key != null)
+    for (let i = 0; i < children.length; i++) {
+        if (children[i].key != null)
             return true;
     }
     return false;
@@ -1157,11 +1268,11 @@ function warnDuplicateKeys(children) {
         }
     }
     if (duplicateKeys?.size) {
-        let quotedKeys = Array.from(duplicateKeys, (key) => `"${key}"`);
+        let quotedKeys = Array.from(duplicateKeys, (key) => `"${String(key)}"`);
         console.warn(`Duplicate keys detected in siblings: ${quotedKeys.join(', ')}. Keys should be unique.`);
     }
 }
-function patchKeyedChildren(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, cursor, anchor) {
+function patchKeyedChildren(curr, next, domParent, vParent, context, cursor, anchor) {
     let matches = matchKeyedChildrenInOrder(curr, next) ??
         matchKeyedChildrenAfterSingleRemoval(curr, next) ??
         matchKeyedChildrenAfterPairSwap(curr, next);
@@ -1169,34 +1280,36 @@ function patchKeyedChildren(curr, next, domParent, frame, scheduler, styles, vPa
         warnDuplicateKeys(next);
         matches = matchKeyedChildren(curr, next);
     }
+    let committed = next;
     let matchAnalysis = analyzeKeyedChildMatches(curr.length, matches);
     if (matchAnalysis.hasRemovals) {
         let usedOldIndexes = new Uint8Array(curr.length);
-        for (let match of matches) {
-            if (match.oldIndex >= 0) {
-                usedOldIndexes[match.oldIndex] = 1;
+        for (let index = 0; index < matches.length; index++) {
+            let oldIndex = matches[index];
+            if (oldIndex >= 0) {
+                usedOldIndexes[oldIndex] = 1;
             }
         }
         for (let oldIndex = 0; oldIndex < curr.length; oldIndex++) {
             if (usedOldIndexes[oldIndex] === 0) {
-                remove(curr[oldIndex], domParent, scheduler, styles);
+                remove(curr[oldIndex], domParent, context);
             }
         }
     }
-    vParent._children = next;
     for (let index = 0; index < next.length; index++) {
-        let match = matches[index];
-        let oldNode = match.oldIndex >= 0 ? curr[match.oldIndex] : null;
-        diffVNodes(oldNode, next[index], domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor);
+        let oldIndex = matches[index];
+        let oldNode = oldIndex >= 0 ? curr[oldIndex] : null;
+        committed[index] = diffVNodes(oldNode, next[index], domParent, vParent, context, anchor, cursor);
     }
+    let committedChildren = committed;
     if (matchAnalysis.canSkipPlacement) {
-        return;
+        return committedChildren;
     }
     let stableIndexes = lisMatches(matches);
     let stableCursor = stableIndexes.length - 1;
     let placementAnchor = anchor ?? null;
     for (let index = next.length - 1; index >= 0; index--) {
-        let nextNode = next[index];
+        let nextNode = committedChildren[index];
         let isStable = stableIndexes[stableCursor] === index;
         if (isStable) {
             stableCursor--;
@@ -1206,7 +1319,11 @@ function patchKeyedChildren(curr, next, domParent, frame, scheduler, styles, vPa
         }
         placementAnchor = findFirstDomAnchor(nextNode) ?? placementAnchor;
     }
+    return committedChildren;
 }
+// Keyed child matches are arrays of old indexes (-1 = no match / new node),
+// parallel to `next`. Plain numbers instead of wrapper objects keep large
+// keyed diffs (1000-row tables) allocation-free.
 function matchKeyedChildren(curr, next) {
     let oldKeyMap = new Map();
     let usedOldIndexes = new Set();
@@ -1216,7 +1333,9 @@ function matchKeyedChildren(curr, next) {
         if (key != null)
             oldKeyMap.set(key, index);
     }
-    return next.map((nextNode) => {
+    let matches = [];
+    for (let nextIndex = 0; nextIndex < next.length; nextIndex++) {
+        let nextNode = next[nextIndex];
         let oldIndex = -1;
         if (nextNode.key != null) {
             let keyedOldIndex = oldKeyMap.get(nextNode.key);
@@ -1240,8 +1359,9 @@ function matchKeyedChildren(curr, next) {
         }
         if (oldIndex >= 0)
             usedOldIndexes.add(oldIndex);
-        return { oldIndex };
-    });
+        matches.push(oldIndex);
+    }
+    return matches;
 }
 function matchKeyedChildrenInOrder(curr, next) {
     let length = Math.min(curr.length, next.length);
@@ -1254,12 +1374,12 @@ function matchKeyedChildrenInOrder(curr, next) {
         if (oldNode.key !== nextNode.key || oldNode.type !== nextNode.type) {
             return null;
         }
-        matches.push({ oldIndex: index });
+        matches.push(index);
     }
     for (let index = length; index < next.length; index++) {
         if (next[index].key == null)
             return null;
-        matches.push({ oldIndex: -1 });
+        matches.push(-1);
     }
     return matches;
 }
@@ -1275,7 +1395,7 @@ function matchKeyedChildrenAfterSingleRemoval(curr, next) {
             return null;
         let oldNode = curr[oldIndex];
         if (oldNode.key === nextNode.key && oldNode.type === nextNode.type) {
-            matches.push({ oldIndex });
+            matches.push(oldIndex);
             oldIndex++;
             continue;
         }
@@ -1287,7 +1407,7 @@ function matchKeyedChildrenAfterSingleRemoval(curr, next) {
         if (oldNode.key !== nextNode.key || oldNode.type !== nextNode.type) {
             return null;
         }
-        matches.push({ oldIndex });
+        matches.push(oldIndex);
         oldIndex++;
     }
     return matches;
@@ -1304,7 +1424,7 @@ function matchKeyedChildrenAfterPairSwap(curr, next) {
             return null;
         let oldNode = curr[index];
         if (oldNode.key === nextNode.key && oldNode.type === nextNode.type) {
-            matches.push({ oldIndex: index });
+            matches.push(index);
             continue;
         }
         if (firstMismatch === -1) {
@@ -1316,7 +1436,7 @@ function matchKeyedChildrenAfterPairSwap(curr, next) {
         else {
             return null;
         }
-        matches.push({ oldIndex: -1 });
+        matches.push(-1);
     }
     if (firstMismatch === -1)
         return matches;
@@ -1332,8 +1452,8 @@ function matchKeyedChildrenAfterPairSwap(curr, next) {
         secondOldNode.type !== firstNextNode.type) {
         return null;
     }
-    matches[firstMismatch] = { oldIndex: secondMismatch };
-    matches[secondMismatch] = { oldIndex: firstMismatch };
+    matches[firstMismatch] = secondMismatch;
+    matches[secondMismatch] = firstMismatch;
     return matches;
 }
 function analyzeKeyedChildMatches(currentLength, matches) {
@@ -1341,16 +1461,17 @@ function analyzeKeyedChildMatches(currentLength, matches) {
     let canSkipPlacement = true;
     let lastOldIndex = -1;
     let sawNewNode = false;
-    for (let match of matches) {
-        if (match.oldIndex < 0) {
+    for (let index = 0; index < matches.length; index++) {
+        let oldIndex = matches[index];
+        if (oldIndex < 0) {
             hasRemovals = true;
             sawNewNode = true;
             continue;
         }
-        if (sawNewNode || match.oldIndex < lastOldIndex) {
+        if (sawNewNode || oldIndex < lastOldIndex) {
             canSkipPlacement = false;
         }
-        lastOldIndex = match.oldIndex;
+        lastOldIndex = oldIndex;
     }
     return { hasRemovals, canSkipPlacement };
 }
@@ -1358,14 +1479,14 @@ function lisMatches(matches) {
     let predecessors = Array.from({ length: matches.length });
     let tails = [];
     for (let index = 0; index < matches.length; index++) {
-        let value = matches[index].oldIndex + 1;
+        let value = matches[index] + 1;
         if (value === 0)
             continue;
         let low = 0;
         let high = tails.length;
         while (low < high) {
             let middle = (low + high) >> 1;
-            if (matches[tails[middle]].oldIndex + 1 < value) {
+            if (matches[tails[middle]] + 1 < value) {
                 low = middle + 1;
             }
             else {
@@ -1404,11 +1525,12 @@ export function findFirstDomAnchor(node) {
         return node._dom;
     if (isCommittedComponentNode(node))
         return findFirstDomAnchor(node._content);
-    if (node.type === Frame)
-        return node._rangeStart ?? null;
+    if (node.kind === 'frame')
+        return node._rangeStart;
     if (isFragmentNode(node)) {
-        for (let child of node._children) {
-            let dom = findFirstDomAnchor(child);
+        let children = node._children;
+        for (let i = 0; i < children.length; i++) {
+            let dom = findFirstDomAnchor(children[i]);
             if (dom)
                 return dom;
         }
@@ -1424,8 +1546,8 @@ export function findLastDomAnchor(node) {
         return node._dom;
     if (isCommittedComponentNode(node))
         return findLastDomAnchor(node._content);
-    if (node.type === Frame)
-        return node._rangeEnd ?? null;
+    if (node.kind === 'frame')
+        return node._rangeEnd;
     if (isFragmentNode(node)) {
         for (let i = node._children.length - 1; i >= 0; i--) {
             let dom = findLastDomAnchor(node._children[i]);
@@ -1464,6 +1586,8 @@ function shouldDispatchInlineMixinLifecycle(node) {
     if (!parents?.length)
         return true;
     for (let parent of parents) {
+        if (!(parent instanceof Node))
+            continue;
         let parentNode = parent;
         if (parentNode === node)
             return false;
@@ -1474,11 +1598,16 @@ function shouldDispatchInlineMixinLifecycle(node) {
 }
 export function findNextSiblingDomAnchor(curr) {
     let vParent = curr._parent;
-    if (!vParent || !Array.isArray(vParent._children))
-        return null;
-    let children = vParent._children;
-    if (children.length === 0)
+    if (vParent.kind === 'component')
         return findNextSiblingDomAnchor(vParent);
+    let children = vParent._children;
+    if (children.length === 0) {
+        if (vParent.kind === 'root')
+            return vParent._rangeEnd ?? null;
+        if (vParent.kind === 'fragment')
+            return findNextSiblingDomAnchor(vParent);
+        return null;
+    }
     let idx = children.indexOf(curr);
     if (idx === -1)
         return null;
@@ -1490,34 +1619,33 @@ export function findNextSiblingDomAnchor(curr) {
     if (isFragmentNode(vParent)) {
         return findNextSiblingDomAnchor(vParent);
     }
-    return null;
+    return vParent.kind === 'root' ? (vParent._rangeEnd ?? null) : null;
 }
-function reclaimPersistedMixinNode(persistedNode, newNode, frame, scheduler, styles, vParent, rootTarget) {
+function reclaimPersistedMixinNode(persistedNode, newNode, vParent, context) {
+    let { frame, scheduler, styles } = context;
     cancelPendingMixinRemoval(persistedNode._mixState);
     unmarkNodePersistedByMixins(persistedNode);
-    newNode._dom = persistedNode._dom;
-    newNode._parent = vParent;
-    newNode._controller = persistedNode._controller;
-    newNode._mixState = persistedNode._mixState;
-    newNode._directEventState = persistedNode._directEventState;
-    newNode._controlledState = persistedNode._controlledState;
     let prevProps = getHostProps(persistedNode);
-    let nextProps = resolveNodeMixProps(newNode, frame, scheduler, newNode._mixState);
+    let childInputs = newNode._children;
+    let resolved = resolveNodeMixProps(newNode, vParent, frame, scheduler, persistedNode._mixState);
+    let nextProps = resolved.props;
+    let committed = commitHostNode(newNode, vParent, getSvgContext(vParent, newNode), persistedNode._dom, resolved);
+    committed._directEventState = persistedNode._directEventState;
+    committed._controlledState = persistedNode._controlledState;
     if (shouldDispatchInlineMixinLifecycle(persistedNode._dom)) {
-        dispatchMixinBeforeUpdate(newNode._mixState);
+        dispatchMixinBeforeUpdate(committed._mixState);
     }
     patchHostProps(prevProps, nextProps, persistedNode._dom);
-    syncDirectEventListeners(newNode);
-    ensureControlledReflection(newNode, scheduler);
-    syncControlledReflection(newNode, nextProps);
-    diffChildren(persistedNode._children, newNode._children, persistedNode._dom, frame, scheduler, styles, newNode, rootTarget);
-    if (newNode._mixState) {
-        bindNodeMixRuntime(newNode, frame, scheduler, styles, true);
+    syncDirectEventListeners(committed);
+    ensureControlledReflection(committed, scheduler);
+    syncControlledReflection(committed, nextProps);
+    committed._children = diffChildren(persistedNode._children, childInputs, persistedNode._dom, committed, context);
+    if (committed._mixState) {
+        bindNodeMixRuntime(committed, frame, scheduler, styles, true);
     }
     if (shouldDispatchInlineMixinLifecycle(persistedNode._dom)) {
-        scheduler.enqueueCommitPhase([
-            () => dispatchMixinCommit(newNode._mixState),
-        ]);
+        scheduler.enqueueCommitPhase([() => dispatchMixinCommit(committed._mixState)]);
     }
+    return committed;
 }
 //# sourceMappingURL=reconcile.js.map