@rezi-ui/core 0.1.0-alpha.7 → 0.1.0-alpha.70

package/dist/runtime/commit.js

@@ -15,594 +15,192 @@
  *
  * @see docs/guide/runtime-and-layout.md
  */
-import { createWidgetContext, getCompositeMeta, } from "../widgets/composition.js";
-import { createHookContext, } from "./instances.js";
+import { getCompositeMeta } from "../widgets/composition.js";
+import { executeCompositeRender } from "./commit/composite.js";
+import { commitContainer } from "./commit/container.js";
+import { __commitDiag, leafVNodeEqual } from "./commit/equality.js";
+import { captureErrorBoundaryState, commitErrorBoundaryFallback } from "./commit/errorBoundary.js";
+import { DEV_MODE, EMPTY_CHILDREN, LAYOUT_DEPTH_PATH_TRACK_START, LAYOUT_DEPTH_WARN_THRESHOLD, MAX_LAYOUT_NESTING_DEPTH, } from "./commit/shared.js";
+import { collectSubtreeInstanceIds, deleteLocalStateForSubtree, tryScheduleExitAnimation, } from "./commit/transitions.js";
+import { ensureFocusContainerId, ensureInteractiveId, formatWidgetPath, isContainerVNode, isVNode, warnDev, widgetPathEntry, } from "./commit/validation.js";
 import { reconcileChildren } from "./reconcile.js";
-/** Shared frozen empty array for leaf RuntimeInstance children. Avoids per-node allocation. */
-const EMPTY_CHILDREN = Object.freeze([]);
-/**
- * Fast shallow equality for text style objects.
- * Returns true if both styles produce identical render output.
- */
-function textStyleEqual(a, b) {
-    if (a === b)
-        return true;
-    if (!a || !b)
-        return false;
-    return (a.bold === b.bold &&
-        a.dim === b.dim &&
-        a.italic === b.italic &&
-        a.underline === b.underline &&
-        a.inverse === b.inverse &&
-        a.fg === b.fg &&
-        a.bg === b.bg);
-}
-/**
- * Check if two leaf VNodes are semantically equal (same render output).
- * Used to skip allocating new RuntimeInstance objects for unchanged leaves.
- * Only covers common leaf kinds; returns false for unknown kinds (safe fallback).
- */
-function leafVNodeEqual(a, b) {
-    switch (a.kind) {
-        case "text": {
-            if (b.kind !== "text")
-                return false;
-            if (a.text !== b.text)
-                return false;
-            const ap = a.props;
-            const bp = b.props;
-            // Even when render output is identical, `id` changes must re-commit so downstream
-            // id-based lookups (layout rect indexing, anchors, etc) don't observe stale ids.
-            if (ap.id !== bp.id)
-                return false;
-            if (ap.textOverflow !== bp.textOverflow)
-                return false;
-            if (ap.variant !== bp.variant)
-                return false;
-            if (ap.maxWidth !== bp.maxWidth)
-                return false;
-            return textStyleEqual(ap.style, bp.style);
+export { __commitDiag } from "./commit/equality.js";
+function commitNode(prev, instanceId, vnode, ctx, nodePath) {
+    ctx.layoutDepthRef.value += 1;
+    const layoutDepth = ctx.layoutDepthRef.value;
+    const trackPath = layoutDepth >= LAYOUT_DEPTH_PATH_TRACK_START;
+    if (trackPath)
+        ctx.layoutPathTail.push(widgetPathEntry(vnode));
+    ctx.prevNodeStack.push(prev);
+    try {
+        if (DEV_MODE &&
+            layoutDepth > LAYOUT_DEPTH_WARN_THRESHOLD &&
+            !ctx.emittedWarnings.has("layout_depth")) {
+            ctx.emittedWarnings.add("layout_depth");
+            warnDev(`[rezi][commit] layout depth ${String(layoutDepth)} exceeds warning threshold ${String(LAYOUT_DEPTH_WARN_THRESHOLD)}. Deep trees may fail near depth ${String(MAX_LAYOUT_NESTING_DEPTH)}. Path: ${formatWidgetPath(layoutDepth, ctx.layoutPathTail)}`);
         }
-        case "spacer": {
-            if (b.kind !== "spacer")
-                return false;
-            const ap = a.props;
-            const bp = b.props;
-            return ap.size === bp.size && ap.flex === bp.flex;
+        if (layoutDepth > MAX_LAYOUT_NESTING_DEPTH) {
+            return {
+                ok: false,
+                fatal: {
+                    code: "ZRUI_INVALID_PROPS",
+                    detail: `ZRUI_MAX_DEPTH: layout nesting depth ${String(layoutDepth)} exceeds max ${String(MAX_LAYOUT_NESTING_DEPTH)}. Path: ${formatWidgetPath(layoutDepth, ctx.layoutPathTail)}`,
+                },
+            };
         }
-        case "divider": {
-            if (b.kind !== "divider")
-                return false;
-            const ap = a.props;
-            const bp = b.props;
-            return (ap.direction === bp.direction &&
-                ap.char === bp.char &&
-                ap.label === bp.label &&
-                ap.color === bp.color);
+        const commitDebug = globalThis;
+        if (commitDebug.__commitDebug) {
+            const debugLog = commitDebug.__commitDebugLog;
+            if (debugLog) {
+                debugLog.push(`commitNode(${String(instanceId)}, ${vnode.kind}, prev=${prev ? `${prev.vnode.kind}:${String(prev.instanceId)}` : "null"})`);
+            }
         }
-        default:
-            return false;
-    }
-}
-function boxShadowEqual(a, b) {
-    if (a === b)
-        return true;
-    if (a === undefined || b === undefined)
-        return false;
-    if (typeof a === "boolean" || typeof b === "boolean")
-        return a === b;
-    if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
-        return false;
-    const ao = a;
-    const bo = b;
-    return ao.offsetX === bo.offsetX && ao.offsetY === bo.offsetY && ao.density === bo.density;
-}
-function layoutConstraintsEqual(a, b) {
-    if (a === b)
-        return true;
-    const ao = (a ?? {});
-    const bo = (b ?? {});
-    return (ao.width === bo.width &&
-        ao.height === bo.height &&
-        ao.minWidth === bo.minWidth &&
-        ao.maxWidth === bo.maxWidth &&
-        ao.minHeight === bo.minHeight &&
-        ao.maxHeight === bo.maxHeight &&
-        ao.flex === bo.flex &&
-        ao.aspectRatio === bo.aspectRatio);
-}
-function spacingPropsEqual(a, b) {
-    if (a === b)
-        return true;
-    const ao = (a ?? {});
-    const bo = (b ?? {});
-    return (ao.p === bo.p &&
-        ao.px === bo.px &&
-        ao.py === bo.py &&
-        ao.pt === bo.pt &&
-        ao.pb === bo.pb &&
-        ao.pl === bo.pl &&
-        ao.pr === bo.pr &&
-        ao.m === bo.m &&
-        ao.mx === bo.mx &&
-        ao.my === bo.my &&
-        ao.mt === bo.mt &&
-        ao.mr === bo.mr &&
-        ao.mb === bo.mb &&
-        ao.ml === bo.ml);
-}
-function boxPropsEqual(a, b) {
-    if (a === b)
-        return true;
-    const ao = (a ?? {});
-    const bo = (b ?? {});
-    return (ao.title === bo.title &&
-        ao.titleAlign === bo.titleAlign &&
-        ao.pad === bo.pad &&
-        ao.border === bo.border &&
-        ao.borderTop === bo.borderTop &&
-        ao.borderRight === bo.borderRight &&
-        ao.borderBottom === bo.borderBottom &&
-        ao.borderLeft === bo.borderLeft &&
-        boxShadowEqual(ao.shadow, bo.shadow) &&
-        textStyleEqual(ao.style, bo.style) &&
-        spacingPropsEqual(ao, bo) &&
-        layoutConstraintsEqual(ao, bo));
-}
-function stackPropsEqual(a, b) {
-    if (a === b)
-        return true;
-    const ao = (a ?? {});
-    const bo = (b ?? {});
-    return (ao.pad === bo.pad &&
-        ao.gap === bo.gap &&
-        ao.align === bo.align &&
-        ao.justify === bo.justify &&
-        ao.items === bo.items &&
-        textStyleEqual(ao.style, bo.style) &&
-        spacingPropsEqual(ao, bo) &&
-        layoutConstraintsEqual(ao, bo));
-}
-function focusZonePropsEqual(a, b) {
-    if (a === b)
-        return true;
-    const ao = (a ?? {});
-    const bo = (b ?? {});
-    return (ao.id === bo.id &&
-        ao.tabIndex === bo.tabIndex &&
-        ao.navigation === bo.navigation &&
-        ao.columns === bo.columns &&
-        ao.wrapAround === bo.wrapAround &&
-        ao.onEnter === bo.onEnter &&
-        ao.onExit === bo.onExit);
-}
-function focusTrapPropsEqual(a, b) {
-    if (a === b)
-        return true;
-    const ao = (a ?? {});
-    const bo = (b ?? {});
-    return (ao.id === bo.id &&
-        ao.active === bo.active &&
-        ao.returnFocusTo === bo.returnFocusTo &&
-        ao.initialFocus === bo.initialFocus);
-}
-function canFastReuseContainerSelf(prev, next) {
-    if (prev.kind !== next.kind)
-        return false;
-    switch (prev.kind) {
-        case "box":
-            return boxPropsEqual(prev.props, next.props);
-        case "row":
-        case "column":
-            return stackPropsEqual(prev.props, next.props);
-        case "focusZone":
-            return focusZonePropsEqual(prev.props, next.props);
-        case "focusTrap":
-            return focusTrapPropsEqual(prev.props, next.props);
-        default:
-            return false;
-    }
-}
-function isInteractiveVNode(v) {
-    // Interactive set: widgets with required `id` that participate in focus/routing.
-    return (v.kind === "button" ||
-        v.kind === "input" ||
-        v.kind === "virtualList" ||
-        v.kind === "table" ||
-        v.kind === "tree" ||
-        v.kind === "select" ||
-        v.kind === "checkbox" ||
-        v.kind === "radioGroup" ||
-        v.kind === "modal" ||
-        v.kind === "layer" ||
-        v.kind === "dropdown" ||
-        // Advanced widgets (GitHub issue #136)
-        v.kind === "commandPalette" ||
-        v.kind === "filePicker" ||
-        v.kind === "fileTreeExplorer" ||
-        v.kind === "splitPane" ||
-        v.kind === "panelGroup" ||
-        v.kind === "codeEditor" ||
-        v.kind === "diffViewer" ||
-        v.kind === "toolApprovalDialog" ||
-        v.kind === "logsConsole");
-}
-function ensureInteractiveId(seen, instanceId, vnode) {
-    if (!isInteractiveVNode(vnode))
-        return null;
-    // Runtime validation (even though ButtonProps is typed).
-    const id = vnode.props.id;
-    if (typeof id !== "string" || id.length === 0) {
-        return {
-            code: "ZRUI_INVALID_PROPS",
-            detail: `interactive node missing required id (kind=${vnode.kind}, instanceId=${String(instanceId)})`,
-        };
-    }
-    const existing = seen.get(id);
-    if (existing !== undefined) {
-        return {
-            code: "ZRUI_DUPLICATE_ID",
-            detail: `duplicate interactive id "${id}" on instanceId=${String(instanceId)} (already used by instanceId=${String(existing)})`,
-        };
-    }
-    seen.set(id, instanceId);
-    return null;
-}
-function isVNode(v) {
-    return typeof v === "object" && v !== null && "kind" in v;
-}
-function commitChildrenForVNode(vnode) {
-    if (vnode.kind === "box" ||
-        vnode.kind === "row" ||
-        vnode.kind === "column" ||
-        vnode.kind === "focusZone" ||
-        vnode.kind === "focusTrap" ||
-        vnode.kind === "layers" ||
-        vnode.kind === "field" ||
-        // Advanced container widgets (GitHub issue #136)
-        vnode.kind === "splitPane" ||
-        vnode.kind === "panelGroup" ||
-        vnode.kind === "resizablePanel") {
-        return vnode.children;
-    }
-    if (vnode.kind === "layer") {
-        const content = vnode.props.content;
-        return isVNode(content) ? [content] : [];
-    }
-    if (vnode.kind === "modal") {
-        const props = vnode.props;
-        const content = isVNode(props.content) ? props.content : null;
-        const actionsRaw = Array.isArray(props.actions) ? props.actions : [];
-        const actions = [];
-        for (const a of actionsRaw) {
-            if (isVNode(a))
-                actions.push(a);
+        if (prev && prev.vnode.kind === vnode.kind && leafVNodeEqual(prev.vnode, vnode)) {
+            if (__commitDiag.enabled) {
+                const wasDirty = prev.selfDirty;
+                __commitDiag.push({
+                    id: instanceId,
+                    kind: vnode.kind,
+                    reason: "leaf-reuse",
+                    detail: wasDirty ? "was-dirty" : undefined,
+                });
+            }
+            if (ctx.collectLifecycleInstanceIds)
+                ctx.lists.reused.push(instanceId);
+            prev.dirty = false;
+            prev.selfDirty = false;
+            return { ok: true, value: { root: prev } };
         }
-        const children = [];
-        if (content)
-            children.push(content);
-        children.push(...actions);
-        return children;
-    }
-    return [];
-}
-function collectSubtreeInstanceIds(node, out) {
-    out.push(node.instanceId);
-    for (const c of node.children)
-        collectSubtreeInstanceIds(c, out);
-}
-function deleteLocalStateForSubtree(store, node) {
-    if (!store)
-        return;
-    const stack = [node];
-    while (stack.length > 0) {
-        const cur = stack.pop();
-        if (!cur)
-            continue;
-        store.delete(cur.instanceId);
-        for (const c of cur.children)
-            stack.push(c);
-    }
-}
-function commitNode(prev, instanceId, vnode, ctx) {
-    // Leaf nodes — fast path: reuse previous RuntimeInstance when content is unchanged.
-    // Do this before any bookkeeping so unchanged leaf-heavy subtrees (lists, tables)
-    // don't pay per-node validation overhead.
-    if (prev && prev.vnode.kind === vnode.kind && leafVNodeEqual(prev.vnode, vnode)) {
-        if (ctx.collectLifecycleInstanceIds)
-            ctx.lists.reused.push(instanceId);
-        return { ok: true, value: { root: prev } };
-    }
-    const idFatal = ensureInteractiveId(ctx.seenInteractiveIds, instanceId, vnode);
-    if (idFatal)
-        return { ok: false, fatal: idFatal };
-    if (ctx.collectLifecycleInstanceIds) {
-        if (prev)
-            ctx.lists.reused.push(instanceId);
-        else
-            ctx.lists.mounted.push(instanceId);
-    }
-    // Composite widgets: execute render function and treat result as the node's children.
-    // This integrates defineWidget() into the commit pipeline.
-    let compositeMeta = null;
-    let compositeChild = null;
-    if (ctx.composite) {
-        compositeMeta = getCompositeMeta(vnode);
-        if (compositeMeta) {
-            const registry = ctx.composite.registry;
-            const existing = registry.get(instanceId);
-            if (existing && existing.widgetKey !== compositeMeta.widgetKey) {
-                // Same instanceId but different widget type: invalidate stale closures and remount hooks.
-                registry.incrementGeneration(instanceId);
-                registry.delete(instanceId);
+        if (__commitDiag.enabled && prev && !isContainerVNode(vnode)) {
+            if (prev.vnode.kind !== vnode.kind) {
+                __commitDiag.push({
+                    id: instanceId,
+                    kind: vnode.kind,
+                    reason: "new-instance",
+                    detail: "leaf-kind-mismatch",
+                });
             }
-            if (!registry.get(instanceId)) {
-                try {
-                    registry.create(instanceId, compositeMeta.widgetKey);
-                }
-                catch (e) {
-                    return {
-                        ok: false,
-                        fatal: {
-                            code: "ZRUI_USER_CODE_THROW",
-                            detail: e instanceof Error ? `${e.name}: ${e.message}` : String(e),
-                        },
-                    };
-                }
+            else {
+                __commitDiag.push({
+                    id: instanceId,
+                    kind: vnode.kind,
+                    reason: "new-instance",
+                    detail: "leaf-content-changed",
+                });
             }
-            const state = registry.get(instanceId);
-            if (!state) {
+        }
+        if (vnode.kind === "errorBoundary") {
+            ctx.errorBoundary?.activePaths.add(nodePath);
+            const props = vnode.props;
+            const protectedChild = props.children;
+            if (!isVNode(protectedChild)) {
                 return {
                     ok: false,
                     fatal: {
                         code: "ZRUI_INVALID_PROPS",
-                        detail: `composite state missing for instanceId=${String(instanceId)}`,
+                        detail: "errorBoundary children must be a VNode",
                     },
                 };
             }
-            registry.beginRender(instanceId);
-            const hookCtx = createHookContext(state, () => {
-                registry.invalidate(instanceId);
-                ctx.composite?.onInvalidate(instanceId);
-            });
-            const widgetCtx = createWidgetContext(compositeMeta.widgetKey, instanceId, hookCtx, ctx.composite.appState, () => {
-                registry.invalidate(instanceId);
-                ctx.composite?.onInvalidate(instanceId);
-            });
-            try {
-                compositeChild = compositeMeta.render(widgetCtx);
-            }
-            catch (e) {
-                return {
-                    ok: false,
-                    fatal: {
-                        code: "ZRUI_USER_CODE_THROW",
-                        detail: e instanceof Error ? `${e.name}: ${e.message}` : String(e),
-                    },
-                };
+            const protectedPath = `${nodePath}/b:protected`;
+            const fallbackPath = `${nodePath}/b:fallback`;
+            const retryRequested = ctx.errorBoundary?.retryRequestedPaths.delete(nodePath) === true;
+            const existingState = ctx.errorBoundary?.errorsByPath.get(nodePath);
+            if (existingState && !retryRequested) {
+                return commitErrorBoundaryFallback(prev, instanceId, nodePath, fallbackPath, props, existingState, ctx, commitNode);
             }
-            try {
-                const pending = registry.endRender(instanceId);
-                for (const eff of pending)
-                    ctx.pendingEffects.push(eff);
+            const committedProtected = commitNode(prev, instanceId, protectedChild, ctx, protectedPath);
+            if (committedProtected.ok) {
+                ctx.errorBoundary?.errorsByPath.delete(nodePath);
+                return committedProtected;
             }
-            catch (e) {
-                return {
-                    ok: false,
-                    fatal: {
-                        code: "ZRUI_USER_CODE_THROW",
-                        detail: e instanceof Error ? `${e.name}: ${e.message}` : String(e),
-                    },
-                };
-            }
-        }
-    }
-    const compositeWrapperChildren = compositeMeta && compositeChild ? [compositeChild] : null;
-    const rewriteCommittedVNode = (next, committedChildren) => {
-        if (next.kind === "modal") {
-            const props = next.props;
-            const contentPresent = isVNode(props.content);
-            const nextContent = contentPresent ? (committedChildren[0] ?? props.content) : props.content;
-            const actionsStart = contentPresent ? 1 : 0;
-            const actions = committedChildren.slice(actionsStart);
-            return {
-                ...next,
-                props: {
-                    ...next.props,
-                    ...(isVNode(nextContent) ? { content: nextContent } : {}),
-                    actions: actions.length > 0 ? actions : undefined,
-                },
-            };
-        }
-        if (next.kind === "layer") {
-            const props = next.props;
-            const nextContent = committedChildren[0] ?? props.content;
-            return {
-                ...next,
-                props: {
-                    ...next.props,
-                    ...(isVNode(nextContent) ? { content: nextContent } : {}),
-                },
-            };
-        }
-        if (next.kind === "box" ||
-            next.kind === "row" ||
-            next.kind === "column" ||
-            next.kind === "focusZone" ||
-            next.kind === "focusTrap" ||
-            next.kind === "layers" ||
-            next.kind === "field" ||
-            // Advanced container widgets (GitHub issue #136)
-            next.kind === "splitPane" ||
-            next.kind === "panelGroup" ||
-            next.kind === "resizablePanel") {
-            return {
-                ...next,
-                children: committedChildren,
-            };
-        }
-        return next;
-    };
-    if (vnode.kind === "box" ||
-        vnode.kind === "row" ||
-        vnode.kind === "column" ||
-        vnode.kind === "focusZone" ||
-        vnode.kind === "focusTrap" ||
-        vnode.kind === "layers" ||
-        vnode.kind === "field" ||
-        // Advanced container widgets (GitHub issue #136)
-        vnode.kind === "splitPane" ||
-        vnode.kind === "panelGroup" ||
-        vnode.kind === "resizablePanel" ||
-        vnode.kind === "modal" ||
-        vnode.kind === "layer") {
-        const vnodeForCommit = compositeWrapperChildren
-            ? {
-                ...vnode,
-                children: compositeWrapperChildren,
+            if (committedProtected.fatal.code !== "ZRUI_USER_CODE_THROW") {
+                return committedProtected;
             }
-            : vnode;
-        const prevChildren = prev ? prev.children : [];
-        const res = reconcileChildren(instanceId, prevChildren, compositeWrapperChildren ? compositeWrapperChildren : commitChildrenForVNode(vnodeForCommit), ctx.allocator);
-        if (!res.ok)
-            return { ok: false, fatal: res.fatal };
-        const byPrevIndex = prevChildren;
-        let byPrevInstanceId = null;
-        if (res.value.unmountedInstanceIds.length > 0) {
-            byPrevInstanceId = new Map();
-            for (const c of prevChildren)
-                byPrevInstanceId.set(c.instanceId, c);
+            const trappedState = captureErrorBoundaryState(committedProtected.fatal.detail);
+            ctx.errorBoundary?.errorsByPath.set(nodePath, trappedState);
+            return commitErrorBoundaryFallback(prev, instanceId, nodePath, fallbackPath, props, trappedState, ctx, commitNode);
         }
-        // Container fast path: when reconciliation reuses all children with no
-        // additions/removals, commit each child and check if all return the exact
-        // same RuntimeInstance reference. If so, reuse the parent's RuntimeInstance,
-        // avoiding new arrays, VNode spreads, and RuntimeInstance allocation.
-        const canTryFastReuse = prev !== null &&
-            res.value.newInstanceIds.length === 0 &&
-            res.value.unmountedInstanceIds.length === 0 &&
-            res.value.nextChildren.length === prevChildren.length;
-        // Avoid allocating nextChildren/committedChildVNodes for the common case where
-        // everything is reused (e.g., list updates where only a couple rows change).
-        let nextChildren = null;
-        let committedChildVNodes = null;
-        if (canTryFastReuse) {
-            let allChildrenSame = true;
-            for (let i = 0; i < res.value.nextChildren.length; i++) {
-                const child = res.value.nextChildren[i];
-                if (!child)
-                    continue;
-                const prevChild = child.prevIndex !== null ? byPrevIndex[child.prevIndex] : null;
-                const committed = commitNode(prevChild ?? null, child.instanceId, child.vnode, ctx);
-                if (!committed.ok)
-                    return committed;
-                if (allChildrenSame && committed.value.root !== prevChild) {
-                    allChildrenSame = false;
-                    // First mismatch: allocate arrays and backfill prior entries with the prevChild refs
-                    // we already proved were identical in earlier iterations.
-                    const len = res.value.nextChildren.length;
-                    const nextChildrenArr = new Array(len);
-                    const committedChildVNodesArr = new Array(len);
-                    nextChildren = nextChildrenArr;
-                    committedChildVNodes = committedChildVNodesArr;
-                    for (let j = 0; j < i; j++) {
-                        const plan = res.value.nextChildren[j];
-                        if (!plan)
-                            continue;
-                        const pc = plan.prevIndex !== null ? byPrevIndex[plan.prevIndex] : null;
-                        if (!pc)
-                            continue;
-                        nextChildrenArr[j] = pc;
-                        committedChildVNodesArr[j] = pc.vnode;
-                    }
-                }
-                if (!allChildrenSame) {
-                    // Arrays are allocated after the first mismatch.
-                    if (!nextChildren || !committedChildVNodes) {
-                        return {
-                            ok: false,
-                            fatal: {
-                                code: "ZRUI_INVALID_PROPS",
-                                detail: "commitNode: internal fast-reuse invariant",
-                            },
-                        };
-                    }
-                    nextChildren[i] = committed.value.root;
-                    committedChildVNodes[i] = committed.value.root.vnode;
-                }
-            }
-            if (allChildrenSame &&
-                prev !== null &&
-                canFastReuseContainerSelf(prev.vnode, vnodeForCommit)) {
-                // All children are identical references → reuse parent entirely.
-                return { ok: true, value: { root: prev } };
+        const idFatal = ensureInteractiveId(ctx.seenInteractiveIds, instanceId, vnode);
+        if (idFatal)
+            return { ok: false, fatal: idFatal };
+        const focusContainerFatal = ensureFocusContainerId(ctx.seenFocusContainerIds, instanceId, vnode);
+        if (focusContainerFatal)
+            return { ok: false, fatal: focusContainerFatal };
+        if (ctx.collectLifecycleInstanceIds) {
+            if (prev)
+                ctx.lists.reused.push(instanceId);
+            else {
+                ctx.lists.mounted.push(instanceId);
+                if (__commitDiag.enabled)
+                    __commitDiag.push({ id: instanceId, kind: vnode.kind, reason: "new-mount" });
             }
         }
-        else {
-            // General path: commit children and build next arrays.
-            const nextChildrenArr = [];
-            const committedChildVNodesArr = [];
-            for (const child of res.value.nextChildren) {
-                const prevChild = child.prevIndex !== null ? byPrevIndex[child.prevIndex] : null;
-                const committed = commitNode(prevChild ?? null, child.instanceId, child.vnode, ctx);
-                if (!committed.ok)
-                    return committed;
-                nextChildrenArr.push(committed.value.root);
-                committedChildVNodesArr.push(committed.value.root.vnode);
+        if (ctx.composite) {
+            const compositeMeta = getCompositeMeta(vnode);
+            if (compositeMeta) {
+                return executeCompositeRender(instanceId, vnode, compositeMeta, ctx, [nodePath], layoutDepth, (nextInstanceId, nextVnode, nextPrev, nextCtx, nextNodePath, nextDepth) => commitContainer(nextInstanceId, nextVnode, nextPrev, nextCtx, nextNodePath, nextDepth, commitNode));
             }
-            nextChildren = nextChildrenArr;
-            committedChildVNodes = committedChildVNodesArr;
         }
-        for (const unmountedId of res.value.unmountedInstanceIds) {
-            const prevNode = byPrevInstanceId?.get(unmountedId);
-            if (!prevNode)
-                continue;
-            deleteLocalStateForSubtree(ctx.localState, prevNode);
-            collectSubtreeInstanceIds(prevNode, ctx.lists.unmounted);
+        if (isContainerVNode(vnode)) {
+            return commitContainer(instanceId, vnode, prev, ctx, [nodePath], layoutDepth, commitNode);
         }
-        if (!nextChildren || !committedChildVNodes) {
-            // canTryFastReuse=true and there was at least one mismatch, so arrays must exist.
-            nextChildren = prevChildren;
-            committedChildVNodes = prevChildren.map((c) => c.vnode);
+        if (prev !== null && prev.vnode.kind === vnode.kind) {
+            prev.vnode = vnode;
+            prev.selfDirty = true;
+            prev.dirty = true;
+            return { ok: true, value: { root: prev } };
         }
         return {
             ok: true,
             value: {
                 root: {
                     instanceId,
-                    vnode: rewriteCommittedVNode(vnodeForCommit, committedChildVNodes),
-                    children: nextChildren,
+                    vnode,
+                    children: EMPTY_CHILDREN,
+                    dirty: true,
+                    selfDirty: true,
+                    renderPacketKey: 0,
+                    renderPacket: null,
                 },
             },
         };
     }
-    return {
-        ok: true,
-        value: {
-            root: { instanceId, vnode, children: EMPTY_CHILDREN },
-        },
-    };
+    finally {
+        ctx.prevNodeStack.pop();
+        if (trackPath)
+            ctx.layoutPathTail.pop();
+        ctx.layoutDepthRef.value -= 1;
+    }
 }
-/**
- * Deterministically commit a VNode tree into a runtime instance tree, applying
- * locked reconciliation rules (docs/10) and enforcing interactive id uniqueness.
- *
- * Notes:
- * - Uses an implicit root parent instanceId=0 for reconciliation of the returned root VNode.
- * - Does not perform layout, focus, routing, or drawlist building.
- */
 export function commitVNodeTree(prevRoot, nextRootVNode, opts) {
     const collectLifecycleInstanceIds = opts.collectLifecycleInstanceIds !== false;
+    const interactiveIdIndex = opts.interactiveIdIndex ?? new Map();
+    interactiveIdIndex.clear();
     const ctx = {
         allocator: opts.allocator,
         localState: opts.localState,
-        seenInteractiveIds: new Map(),
+        seenInteractiveIds: interactiveIdIndex,
+        seenFocusContainerIds: new Map(),
+        prevNodeStack: [],
+        containerChildOverrides: new Map(),
+        layoutDepthRef: { value: 0 },
+        layoutPathTail: [],
+        emittedWarnings: new Set(),
         lists: { mounted: [], reused: [], unmounted: [] },
         collectLifecycleInstanceIds,
         composite: opts.composite ?? null,
+        compositeThemeStack: opts.composite?.theme ? [opts.composite.theme] : [],
+        compositeRenderStack: [],
+        pendingExitAnimations: [],
+        pendingCleanups: [],
         pendingEffects: [],
+        errorBoundary: opts.errorBoundary ?? null,
     };
     const prevChildren = prevRoot ? [{ instanceId: prevRoot.instanceId, vnode: prevRoot.vnode }] : [];
-    const res = reconcileChildren(0, prevChildren, [nextRootVNode], opts.allocator);
+    const res = reconcileChildren(0, prevChildren, [nextRootVNode], opts.allocator, {
+        kind: "root",
+    });
     if (!res.ok)
         return { ok: false, fatal: res.fatal };
     const rootPlan = res.value.nextChildren[0];
@@ -613,13 +211,13 @@ export function commitVNodeTree(prevRoot, nextRootVNode, opts) {
         };
     }
     if (prevRoot && rootPlan.prevIndex === null) {
-        // Root was replaced; unmount the entire previous tree before committing the new one so
-        // the returned lists include the unmount lifecycle deterministically.
-        deleteLocalStateForSubtree(opts.localState, prevRoot);
-        collectSubtreeInstanceIds(prevRoot, ctx.lists.unmounted);
+        if (!tryScheduleExitAnimation(ctx, prevRoot, 0)) {
+            deleteLocalStateForSubtree(opts.localState, prevRoot);
+            collectSubtreeInstanceIds(prevRoot, ctx.lists.unmounted);
+        }
     }
     const prevMatch = rootPlan.prevIndex === 0 ? prevRoot : null;
-    const committedRoot = commitNode(prevMatch, rootPlan.instanceId, rootPlan.vnode, ctx);
+    const committedRoot = commitNode(prevMatch, rootPlan.instanceId, rootPlan.vnode, ctx, "root");
     if (!committedRoot.ok)
         return committedRoot;
     return {
@@ -629,6 +227,8 @@ export function commitVNodeTree(prevRoot, nextRootVNode, opts) {
             mountedInstanceIds: ctx.lists.mounted,
             reusedInstanceIds: ctx.lists.reused,
             unmountedInstanceIds: ctx.lists.unmounted,
+            pendingExitAnimations: ctx.pendingExitAnimations,
+            pendingCleanups: ctx.pendingCleanups,
             pendingEffects: ctx.pendingEffects,
         },
     };