@rezi-ui/core 0.1.0-alpha.60 → 0.1.0-alpha.63

package/dist/runtime/commit.js

@@ -15,1379 +15,16 @@
  *
  * @see docs/guide/runtime-and-layout.md
  */
-import { resolveEasing } from "../animation/easing.js";
-import { normalizeDurationMs } from "../animation/interpolate.js";
-import { describeThrown } from "../debug/describeThrown.js";
-import { defaultTheme } from "../theme/defaultTheme.js";
-import { mergeThemeOverride } from "../theme/interop.js";
-import { getCompositeMeta, scopedId, } from "../widgets/composition.js";
-import { getWidgetProtocol, kindRequiresId } from "../widgets/protocol.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([]);
-/** Global commit diagnostics buffer. */
-export const __commitDiag = {
-    enabled: false,
-    entries: [],
-    reset() {
-        this.entries.length = 0;
-    },
-    push(e) {
-        this.entries.push(e);
-    },
-};
-/** Fast equality for packed color values. */
-function colorEqual(a, b) {
-    return a === b;
-}
-/**
- * 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.strikethrough === b.strikethrough &&
-        a.overline === b.overline &&
-        a.blink === b.blink &&
-        colorEqual(a.fg, b.fg) &&
-        colorEqual(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;
-            if (a.props === b.props)
-                return true;
-            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);
-        }
-        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;
-        }
-        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);
-        }
-        case "richText": {
-            if (b.kind !== "richText")
-                return false;
-            const ap = a.props;
-            const bp = b.props;
-            const as = ap.spans;
-            const bs = bp.spans;
-            if (as === bs)
-                return true;
-            if (!as || !bs || as.length !== bs.length)
-                return false;
-            for (let i = 0; i < as.length; i++) {
-                const sa = as[i];
-                const sb = bs[i];
-                if (!sa || !sb)
-                    return false;
-                if (sa.text !== sb.text)
-                    return false;
-                if (!textStyleEqual(sa.style, sb.style))
-                    return false;
-            }
-            return true;
-        }
-        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 transitionPropertiesEqual(a, b) {
-    if (a === b)
-        return true;
-    if (a === undefined || b === undefined)
-        return false;
-    if (a === "all" || b === "all")
-        return a === b;
-    if (!Array.isArray(a) || !Array.isArray(b))
-        return false;
-    if (a.length !== b.length)
-        return false;
-    for (let i = 0; i < a.length; i++) {
-        if (a[i] !== b[i])
-            return false;
-    }
-    return true;
-}
-function transitionSpecEqual(a, b) {
-    if (a === b)
-        return true;
-    if (a === undefined || b === undefined)
-        return false;
-    if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
-        return false;
-    const ao = a;
-    const bo = b;
-    return (ao.duration === bo.duration &&
-        ao.easing === bo.easing &&
-        transitionPropertiesEqual(ao.properties, bo.properties));
-}
-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 shallowRecordEqual(a, b) {
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length)
-        return false;
-    for (const key of aKeys) {
-        if (!(key in b))
-            return false;
-        if (!Object.is(a[key], b[key]))
-            return false;
-    }
-    return true;
-}
-function compositePropsEqual(prev, next) {
-    if (Object.is(prev, next))
-        return true;
-    if (typeof prev !== "object" || prev === null)
-        return false;
-    if (typeof next !== "object" || next === null)
-        return false;
-    return shallowRecordEqual(prev, next);
-}
-function evaluateAppStateSelections(selections, appState) {
-    for (const selection of selections) {
-        try {
-            const nextValue = selection.selector(appState);
-            if (!Object.is(nextValue, selection.value)) {
-                return { changed: true, threw: null };
-            }
-        }
-        catch (e) {
-            return { changed: true, threw: e };
-        }
-    }
-    return { changed: false, threw: null };
-}
-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) &&
-        textStyleEqual(ao.inheritStyle, bo.inheritStyle) &&
-        ao.opacity === bo.opacity &&
-        transitionSpecEqual(ao.transition, bo.transition) &&
-        transitionSpecEqual(ao.exitTransition, bo.exitTransition) &&
-        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) &&
-        textStyleEqual(ao.inheritStyle, bo.inheritStyle) &&
-        transitionSpecEqual(ao.transition, bo.transition) &&
-        transitionSpecEqual(ao.exitTransition, bo.exitTransition) &&
-        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 deepEqualUnknown(a, b) {
-    if (a === b)
-        return true;
-    if (typeof a !== typeof b)
-        return false;
-    if (typeof a !== "object" || a === null || b === null)
-        return false;
-    if (Array.isArray(a) || Array.isArray(b)) {
-        if (!Array.isArray(a) || !Array.isArray(b))
-            return false;
-        if (a.length !== b.length)
-            return false;
-        for (let i = 0; i < a.length; i++) {
-            if (!deepEqualUnknown(a[i], b[i]))
-                return false;
-        }
-        return true;
-    }
-    const aRecord = a;
-    const bRecord = b;
-    const aKeys = Object.keys(aRecord);
-    const bKeys = Object.keys(bRecord);
-    if (aKeys.length !== bKeys.length)
-        return false;
-    for (const key of aKeys) {
-        if (!Object.prototype.hasOwnProperty.call(bRecord, key))
-            return false;
-        if (!deepEqualUnknown(aRecord[key], bRecord[key]))
-            return false;
-    }
-    return true;
-}
-function themedPropsEqual(a, b) {
-    if (a === b)
-        return true;
-    const ao = (a ?? {});
-    const bo = (b ?? {});
-    return deepEqualUnknown(ao.theme, bo.theme);
-}
-function fragmentPropsEqual(a, b) {
-    if (a === b)
-        return true;
-    const ao = (a ?? {});
-    const bo = (b ?? {});
-    return ao.key === bo.key;
-}
-function canFastReuseContainerSelf(prev, next) {
-    if (prev.kind !== next.kind)
-        return false;
-    switch (prev.kind) {
-        case "fragment":
-            return fragmentPropsEqual(prev.props, next.props);
-        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);
-        case "themed":
-            return themedPropsEqual(prev.props, next.props);
-        default:
-            return false;
-    }
-}
-/**
- * Diagnostic: identify which specific prop fails for container reuse.
- * Only called when __commitDiag.enabled is true.
- */
-function diagWhichPropFails(prev, next) {
-    if (prev.kind !== next.kind)
-        return "kind";
-    const ap = (prev.props ?? {});
-    const bp = (next.props ?? {});
-    if (prev.kind === "fragment" && ap.key !== bp.key) {
-        return "key";
-    }
-    if (prev.kind === "row" || prev.kind === "column") {
-        for (const k of ["pad", "gap", "align", "justify", "items"]) {
-            if (ap[k] !== bp[k])
-                return k;
-        }
-        if (!textStyleEqual(ap.style, bp.style))
-            return "style";
-        if (!textStyleEqual(ap.inheritStyle, bp.inheritStyle))
-            return "inheritStyle";
-        // layout constraints
-        for (const k of [
-            "width",
-            "height",
-            "minWidth",
-            "maxWidth",
-            "minHeight",
-            "maxHeight",
-            "flex",
-            "aspectRatio",
-        ]) {
-            if (ap[k] !== bp[k])
-                return k;
-        }
-        // spacing
-        for (const k of [
-            "p",
-            "px",
-            "py",
-            "pt",
-            "pb",
-            "pl",
-            "pr",
-            "m",
-            "mx",
-            "my",
-            "mt",
-            "mr",
-            "mb",
-            "ml",
-        ]) {
-            if (ap[k] !== bp[k])
-                return k;
-        }
-    }
-    if (prev.kind === "box") {
-        for (const k of [
-            "title",
-            "titleAlign",
-            "pad",
-            "border",
-            "borderTop",
-            "borderRight",
-            "borderBottom",
-            "borderLeft",
-            "opacity",
-        ]) {
-            if (ap[k] !== bp[k])
-                return k;
-        }
-        if (!textStyleEqual(ap.style, bp.style))
-            return "style";
-        for (const k of [
-            "width",
-            "height",
-            "minWidth",
-            "maxWidth",
-            "minHeight",
-            "maxHeight",
-            "flex",
-            "aspectRatio",
-        ]) {
-            if (ap[k] !== bp[k])
-                return k;
-        }
-    }
-    return "unknown";
-}
-function runtimeChildrenChanged(prevChildren, nextChildren) {
-    if (prevChildren.length !== nextChildren.length)
-        return true;
-    for (let i = 0; i < prevChildren.length; i++) {
-        if (prevChildren[i] !== nextChildren[i])
-            return true;
-    }
-    return false;
-}
-function hasDirtyChild(children) {
-    for (const child of children) {
-        if (child.dirty)
-            return true;
-    }
-    return false;
-}
-const NODE_ENV = globalThis.process?.env?.NODE_ENV ??
-    "development";
-const DEV_MODE = NODE_ENV !== "production";
-const LAYOUT_DEPTH_WARN_THRESHOLD = 200;
-const MAX_LAYOUT_NESTING_DEPTH = 500;
-const MAX_LAYOUT_DEPTH_PATH_SEGMENTS = 32;
-const MAX_INTERACTIVE_ID_LENGTH = 256;
-const DEFAULT_EXIT_TRANSITION_DURATION_MS = 180;
-const LAYOUT_DEPTH_PATH_TRACK_START = Math.max(1, LAYOUT_DEPTH_WARN_THRESHOLD - MAX_LAYOUT_DEPTH_PATH_SEGMENTS + 2);
-function warnDev(message) {
-    const c = globalThis.console;
-    c?.warn?.(message);
-}
-function widgetPathEntry(vnode) {
-    const props = vnode.props;
-    const id = typeof props?.id === "string" && props.id.length > 0 ? `#${props.id}` : "";
-    const key = typeof props?.key === "string" || typeof props?.key === "number"
-        ? `[key=${String(props.key)}]`
-        : "";
-    return `${vnode.kind}${id}${key}`;
-}
-function formatWidgetPath(depth, tailPath) {
-    if (tailPath.length === 0)
-        return "(root)";
-    const path = tailPath.join(" -> ");
-    return depth > tailPath.length ? `... -> ${path}` : path;
-}
-function isInteractiveVNode(v) {
-    const proto = getWidgetProtocol(v.kind);
-    return proto.requiresId || proto.focusable || proto.pressable;
-}
-function ensureInteractiveId(seen, instanceId, vnode) {
-    if (!isInteractiveVNode(vnode))
-        return null;
-    // Runtime validation (even though most interactive widgets are typed with required ids).
-    const id = vnode.props.id;
-    if (typeof id !== "string" || id.length === 0) {
-        if (!kindRequiresId(vnode.kind))
-            return null;
-        return {
-            code: "ZRUI_INVALID_PROPS",
-            detail: `interactive node missing required id (kind=${vnode.kind}, instanceId=${String(instanceId)})`,
-        };
-    }
-    if (id.trim().length === 0) {
-        return {
-            code: "ZRUI_INVALID_PROPS",
-            detail: `interactive node id must contain non-whitespace characters (kind=${vnode.kind}, instanceId=${String(instanceId)})`,
-        };
-    }
-    const existing = seen.get(id);
-    if (existing !== undefined) {
-        return {
-            code: "ZRUI_DUPLICATE_ID",
-            detail: `Duplicate interactive widget id "${id}". First: <${existing}>, second: <${vnode.kind}>. Hint: Use ctx.id() inside defineWidget to generate unique IDs for list items.`,
-        };
-    }
-    if (DEV_MODE && id.length > MAX_INTERACTIVE_ID_LENGTH) {
-        warnDev(`[rezi][commit] interactive widget id exceeds ${String(MAX_INTERACTIVE_ID_LENGTH)} chars (kind=${vnode.kind}, id length=${String(id.length)}). Consider using shorter IDs.`);
-    }
-    seen.set(id, vnode.kind);
-    return null;
-}
-function isFocusContainerVNode(vnode) {
-    return vnode.kind === "focusZone" || vnode.kind === "focusTrap" || vnode.kind === "modal";
-}
-function ensureFocusContainerId(seen, instanceId, vnode) {
-    if (!isFocusContainerVNode(vnode))
-        return null;
-    const id = vnode.props.id;
-    if (typeof id !== "string" || id.length === 0) {
-        return {
-            code: "ZRUI_INVALID_PROPS",
-            detail: `focus container missing required id (kind=${vnode.kind}, instanceId=${String(instanceId)})`,
-        };
-    }
-    if (id.trim().length === 0) {
-        return {
-            code: "ZRUI_INVALID_PROPS",
-            detail: `focus container id must contain non-whitespace characters (kind=${vnode.kind}, instanceId=${String(instanceId)})`,
-        };
-    }
-    const existing = seen.get(id);
-    if (existing !== undefined) {
-        return {
-            code: "ZRUI_DUPLICATE_ID",
-            detail: `Duplicate focus container id "${id}". First: <${existing}>, second: <${vnode.kind}>. Hint: focusZone, focusTrap, and modal ids must be unique across the tree.`,
-        };
-    }
-    seen.set(id, vnode.kind);
-    return null;
-}
-function isVNode(v) {
-    return typeof v === "object" && v !== null && "kind" in v;
-}
-function commitChildrenForVNode(vnode) {
-    if (vnode.kind === "fragment" ||
-        vnode.kind === "box" ||
-        vnode.kind === "row" ||
-        vnode.kind === "column" ||
-        vnode.kind === "themed" ||
-        vnode.kind === "grid" ||
-        vnode.kind === "focusZone" ||
-        vnode.kind === "focusTrap" ||
-        vnode.kind === "layers" ||
-        vnode.kind === "tabs" ||
-        vnode.kind === "accordion" ||
-        vnode.kind === "breadcrumb" ||
-        vnode.kind === "pagination" ||
-        // Advanced container widgets (GitHub issue #136)
-        vnode.kind === "splitPane" ||
-        vnode.kind === "panelGroup") {
-        return vnode.children;
-    }
-    if (vnode.kind === "field" || vnode.kind === "resizablePanel") {
-        const child = vnode.children[0];
-        return child ? [child] : [];
-    }
-    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);
-        }
-        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 commitNowMs() {
-    const perf = globalThis.performance;
-    const perfNow = perf?.now;
-    if (typeof perfNow === "function")
-        return perfNow.call(perf);
-    return Date.now();
-}
-function readVNodeKey(vnode) {
-    const props = vnode.props;
-    const key = props?.key;
-    return typeof key === "string" ? key : undefined;
-}
-function readExitTransition(vnode) {
-    if (vnode.kind !== "box" &&
-        vnode.kind !== "row" &&
-        vnode.kind !== "column" &&
-        vnode.kind !== "grid") {
-        return null;
-    }
-    const props = vnode.props;
-    return props?.exitTransition ?? null;
-}
-function resolveExitAnimationState(instanceId, transition) {
-    const durationMs = normalizeDurationMs(transition.duration, DEFAULT_EXIT_TRANSITION_DURATION_MS);
-    if (durationMs <= 0)
-        return null;
-    return Object.freeze({
-        instanceId,
-        startMs: commitNowMs(),
-        durationMs,
-        easing: resolveEasing(transition.easing),
-        properties: transition.properties ?? "all",
-    });
-}
-function createDeferredLocalStateCleanup(localState, node) {
-    let cleaned = false;
-    return () => {
-        if (cleaned)
-            return;
-        cleaned = true;
-        deleteLocalStateForSubtree(localState, node);
-    };
-}
-function tryScheduleExitAnimation(ctx, node, parentInstanceId) {
-    const exitTransition = readExitTransition(node.vnode);
-    if (!exitTransition)
-        return false;
-    const exit = resolveExitAnimationState(node.instanceId, exitTransition);
-    if (!exit)
-        return false;
-    const subtreeInstanceIds = [];
-    collectSubtreeInstanceIds(node, subtreeInstanceIds);
-    ctx.pendingExitAnimations.push(Object.freeze({
-        instanceId: node.instanceId,
-        parentInstanceId,
-        runtimeRoot: node,
-        vnodeKind: node.vnode.kind,
-        key: readVNodeKey(node.vnode),
-        exit,
-        subtreeInstanceIds: Object.freeze(subtreeInstanceIds),
-        runDeferredLocalStateCleanup: createDeferredLocalStateCleanup(ctx.localState, node),
-    }));
-    return true;
-}
-function markCompositeSubtreeStale(registry, node) {
-    const stack = [node];
-    while (stack.length > 0) {
-        const cur = stack.pop();
-        if (!cur)
-            continue;
-        registry.incrementGeneration(cur.instanceId);
-        for (const c of cur.children)
-            stack.push(c);
-    }
-}
-function currentCompositeTheme(ctx) {
-    if (ctx.compositeThemeStack.length === 0)
-        return null;
-    return ctx.compositeThemeStack[ctx.compositeThemeStack.length - 1] ?? null;
-}
-function resolveCompositeChildTheme(parentTheme, vnode) {
-    if (vnode.kind === "themed") {
-        const props = vnode.props;
-        return mergeThemeOverride(parentTheme, props.theme);
-    }
-    if (vnode.kind === "row" ||
-        vnode.kind === "column" ||
-        vnode.kind === "grid" ||
-        vnode.kind === "box") {
-        const props = vnode.props;
-        return mergeThemeOverride(parentTheme, props.theme);
-    }
-    return parentTheme;
-}
-function readCompositeColorTokens(ctx) {
-    const composite = ctx.composite;
-    if (!composite)
-        return defaultTheme.definition.colors;
-    const theme = currentCompositeTheme(ctx);
-    if (theme !== null) {
-        if (!composite.getColorTokens)
-            return theme.definition.colors;
-        return composite.getColorTokens(theme) ?? theme.definition.colors;
-    }
-    return composite.colorTokens ?? defaultTheme.definition.colors;
-}
-const MAX_COMPOSITE_RENDER_DEPTH = 100;
-const DEFAULT_VIEWPORT_SNAPSHOT = Object.freeze({
-    width: 0,
-    height: 0,
-    breakpoint: "sm",
-});
-function captureErrorBoundaryState(detail) {
-    return Object.freeze({
-        code: "ZRUI_USER_CODE_THROW",
-        detail,
-        message: detail,
-    });
-}
-function commitErrorBoundaryFallback(prev, instanceId, boundaryPath, fallbackPath, props, state, ctx) {
-    const fallback = props.fallback;
-    if (typeof fallback !== "function") {
-        return {
-            ok: false,
-            fatal: {
-                code: "ZRUI_INVALID_PROPS",
-                detail: "errorBoundary fallback must be a function",
-            },
-        };
-    }
-    let fallbackVNode;
-    try {
-        fallbackVNode = fallback(Object.freeze({
-            code: state.code,
-            message: state.message,
-            detail: state.detail,
-            ...(state.stack ? { stack: state.stack } : {}),
-            retry: () => {
-                ctx.errorBoundary?.requestRetry(boundaryPath);
-            },
-        }));
-    }
-    catch (e) {
-        return {
-            ok: false,
-            fatal: {
-                code: "ZRUI_USER_CODE_THROW",
-                detail: describeThrown(e),
-            },
-        };
-    }
-    if (!isVNode(fallbackVNode)) {
-        return {
-            ok: false,
-            fatal: {
-                code: "ZRUI_INVALID_PROPS",
-                detail: "errorBoundary fallback must return a VNode",
-            },
-        };
-    }
-    return commitNode(prev, instanceId, fallbackVNode, ctx, fallbackPath);
-}
-function appendNodePath(nodePath, segment) {
-    return [...nodePath, segment];
-}
-function formatNodePath(nodePath) {
-    return nodePath.join("/");
-}
-function isContainerVNode(vnode) {
-    return (vnode.kind === "fragment" ||
-        vnode.kind === "box" ||
-        vnode.kind === "row" ||
-        vnode.kind === "column" ||
-        vnode.kind === "themed" ||
-        vnode.kind === "grid" ||
-        vnode.kind === "focusZone" ||
-        vnode.kind === "focusTrap" ||
-        vnode.kind === "layers" ||
-        vnode.kind === "field" ||
-        vnode.kind === "tabs" ||
-        vnode.kind === "accordion" ||
-        vnode.kind === "breadcrumb" ||
-        vnode.kind === "pagination" ||
-        // Advanced container widgets (GitHub issue #136)
-        vnode.kind === "splitPane" ||
-        vnode.kind === "panelGroup" ||
-        vnode.kind === "resizablePanel" ||
-        vnode.kind === "modal" ||
-        vnode.kind === "layer");
-}
-function 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 === "fragment" ||
-        next.kind === "box" ||
-        next.kind === "row" ||
-        next.kind === "column" ||
-        next.kind === "themed" ||
-        next.kind === "grid" ||
-        next.kind === "focusZone" ||
-        next.kind === "focusTrap" ||
-        next.kind === "layers" ||
-        next.kind === "field" ||
-        next.kind === "tabs" ||
-        next.kind === "accordion" ||
-        next.kind === "breadcrumb" ||
-        next.kind === "pagination" ||
-        // Advanced container widgets (GitHub issue #136)
-        next.kind === "splitPane" ||
-        next.kind === "panelGroup" ||
-        next.kind === "resizablePanel") {
-        return {
-            ...next,
-            children: committedChildren,
-        };
-    }
-    return next;
-}
-function commitContainer(instanceId, vnode, prev, ctx, nodePath, depth) {
-    void depth;
-    const parentProps = vnode.props;
-    const parentId = typeof parentProps?.id === "string" && parentProps.id.length > 0 ? parentProps.id : undefined;
-    const prevChildren = prev ? prev.children : [];
-    const compositeWrapperChildren = ctx.containerChildOverrides.get(instanceId) ?? null;
-    const res = reconcileChildren(instanceId, prevChildren, compositeWrapperChildren ? compositeWrapperChildren : commitChildrenForVNode(vnode), ctx.allocator, {
-        kind: vnode.kind,
-        ...(parentId === undefined ? {} : { id: parentId }),
-    });
-    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 parentCompositeTheme = currentCompositeTheme(ctx);
-    let pushedCompositeTheme = false;
-    if (parentCompositeTheme !== null) {
-        const nextCompositeTheme = resolveCompositeChildTheme(parentCompositeTheme, vnode);
-        if (nextCompositeTheme !== parentCompositeTheme) {
-            ctx.compositeThemeStack.push(nextCompositeTheme);
-            pushedCompositeTheme = true;
-        }
-    }
-    try {
-        // 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;
-        let childOrderStable = true;
-        if (canTryFastReuse) {
-            for (let i = 0; i < res.value.nextChildren.length; i++) {
-                const child = res.value.nextChildren[i];
-                if (!child || child.prevIndex !== i) {
-                    childOrderStable = false;
-                    break;
-                }
-            }
-        }
-        // 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, formatNodePath(appendNodePath(nodePath, child.slotId)));
-                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 &&
-                childOrderStable &&
-                canFastReuseContainerSelf(prev.vnode, vnode)) {
-                // Even when child RuntimeInstance references are stable, child VNodes may have
-                // been updated via in-place child commits. Keep the parent VNode's committed
-                // child wiring in sync so layout traverses the same tree shape as runtime.
-                const fastReuseCommittedChildren = prev.children.map((child) => child.vnode);
-                prev.vnode = rewriteCommittedVNode(vnode, fastReuseCommittedChildren);
-                // All children are identical references → reuse parent entirely.
-                // Propagate dirty from children: a child may have been mutated in-place
-                // with dirty=true even though it returned the same reference.
-                if (__commitDiag.enabled) {
-                    const wasDirty = prev.selfDirty;
-                    __commitDiag.push({
-                        id: instanceId,
-                        kind: vnode.kind,
-                        reason: "fast-reuse",
-                        detail: wasDirty ? "was-dirty" : undefined,
-                    });
-                }
-                prev.selfDirty = false;
-                prev.dirty = hasDirtyChild(prev.children);
-                return { ok: true, value: { root: prev } };
-            }
-            // Fast-path in-place mutation: children changed but props are identical.
-            // Mutate the existing RuntimeInstance to preserve reference identity and
-            // prevent parent containers from cascading new-instance creation.
-            if (!allChildrenSame &&
-                prev !== null &&
-                nextChildren !== null &&
-                committedChildVNodes !== null &&
-                canFastReuseContainerSelf(prev.vnode, vnode)) {
-                if (__commitDiag.enabled) {
-                    let childDiffs = 0;
-                    for (let ci = 0; ci < prevChildren.length; ci++) {
-                        if (prevChildren[ci] !== nextChildren[ci])
-                            childDiffs++;
-                    }
-                    __commitDiag.push({
-                        id: instanceId,
-                        kind: vnode.kind,
-                        reason: "fast-reuse",
-                        detail: "children-changed",
-                        childDiffs,
-                        prevChildren: prevChildren.length,
-                        nextChildren: nextChildren.length,
-                    });
-                }
-                prev.children = nextChildren;
-                prev.vnode = rewriteCommittedVNode(vnode, committedChildVNodes);
-                prev.selfDirty = true;
-                prev.dirty = true;
-                return { ok: true, value: { root: prev } };
-            }
-            // Diagnostic: fast-reuse check failed at container level
-            if (__commitDiag.enabled && prev !== null && canTryFastReuse) {
-                if (!allChildrenSame) {
-                    // children are different — but WHY? count how many differ
-                    let childDiffs = 0;
-                    for (let ci = 0; ci < prevChildren.length; ci++) {
-                        if (nextChildren &&
-                            prevChildren[ci] !== nextChildren[ci])
-                            childDiffs++;
-                    }
-                    // also check if props would have passed
-                    const propsOk = canFastReuseContainerSelf(prev.vnode, vnode);
-                    __commitDiag.push({
-                        id: instanceId,
-                        kind: vnode.kind,
-                        reason: "new-instance",
-                        detail: propsOk ? "children-changed" : "props+children",
-                        failingProp: propsOk ? undefined : diagWhichPropFails(prev.vnode, vnode),
-                        childDiffs,
-                        prevChildren: prevChildren.length,
-                        nextChildren: nextChildren
-                            ? nextChildren.length
-                            : res.value.nextChildren.length,
-                    });
-                }
-                else if (!childOrderStable) {
-                    __commitDiag.push({
-                        id: instanceId,
-                        kind: vnode.kind,
-                        reason: "new-instance",
-                        detail: "children-changed",
-                    });
-                }
-                else {
-                    // allChildrenSame && childOrderStable but canFastReuseContainerSelf failed
-                    __commitDiag.push({
-                        id: instanceId,
-                        kind: vnode.kind,
-                        reason: "new-instance",
-                        detail: "props-changed",
-                        failingProp: diagWhichPropFails(prev.vnode, vnode),
-                    });
-                }
-            }
-        }
-        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, formatNodePath(appendNodePath(nodePath, child.slotId)));
-                if (!committed.ok)
-                    return committed;
-                nextChildrenArr.push(committed.value.root);
-                committedChildVNodesArr.push(committed.value.root.vnode);
-            }
-            nextChildren = nextChildrenArr;
-            committedChildVNodes = committedChildVNodesArr;
-        }
-        for (const unmountedId of res.value.unmountedInstanceIds) {
-            const prevNode = byPrevInstanceId?.get(unmountedId);
-            if (!prevNode)
-                continue;
-            if (tryScheduleExitAnimation(ctx, prevNode, instanceId)) {
-                continue;
-            }
-            if (ctx.composite) {
-                markCompositeSubtreeStale(ctx.composite.registry, prevNode);
-            }
-            deleteLocalStateForSubtree(ctx.localState, prevNode);
-            collectSubtreeInstanceIds(prevNode, ctx.lists.unmounted);
-        }
-        if (!nextChildren || !committedChildVNodes) {
-            // All committed children matched existing instances, but we still need to
-            // materialize the next order (e.g., keyed reorders) when parent reuse is disallowed.
-            const reorderedChildren = [];
-            const reorderedVNodes = [];
-            for (const child of res.value.nextChildren) {
-                const reused = child.prevIndex !== null ? byPrevIndex[child.prevIndex] : null;
-                if (!reused)
-                    continue;
-                reorderedChildren.push(reused);
-                reorderedVNodes.push(reused.vnode);
-            }
-            nextChildren = reorderedChildren;
-            committedChildVNodes = reorderedVNodes;
-        }
-        if (!committedChildVNodes) {
-            return {
-                ok: false,
-                fatal: {
-                    code: "ZRUI_INVALID_PROPS",
-                    detail: "commit invariant violated: missing committed child VNodes",
-                },
-            };
-        }
-        const propsChanged = prev === null || !canFastReuseContainerSelf(prev.vnode, vnode);
-        const childrenChanged = prev === null || runtimeChildrenChanged(prevChildren, nextChildren);
-        const selfDirty = propsChanged || childrenChanged;
-        // Diagnostic: general-path new-instance (only if not already logged by fast-reuse diagnostic)
-        if (__commitDiag.enabled && !canTryFastReuse && prev !== null) {
-            let cDiffs = 0;
-            const minLen = Math.min(prevChildren.length, nextChildren.length);
-            for (let ci = 0; ci < minLen; ci++) {
-                if (prevChildren[ci] !== nextChildren[ci])
-                    cDiffs++;
-            }
-            cDiffs += Math.abs(prevChildren.length - nextChildren.length);
-            __commitDiag.push({
-                id: instanceId,
-                kind: vnode.kind,
-                reason: "new-instance",
-                detail: propsChanged && childrenChanged
-                    ? "props+children"
-                    : propsChanged
-                        ? "props-changed"
-                        : childrenChanged
-                            ? "children-changed"
-                            : "general-path",
-                failingProp: propsChanged ? diagWhichPropFails(prev.vnode, vnode) : undefined,
-                childDiffs: cDiffs,
-                prevChildren: prevChildren.length,
-                nextChildren: nextChildren.length,
-            });
-        }
-        else if (__commitDiag.enabled && prev === null) {
-            __commitDiag.push({
-                id: instanceId,
-                kind: vnode.kind,
-                reason: "new-instance",
-                detail: "no-prev",
-            });
-        }
-        // In-place mutation: when props are unchanged and only children references
-        // changed, mutate the existing RuntimeInstance to preserve reference identity.
-        // This prevents parent containers from cascading new-instance creation.
-        if (prev !== null && !propsChanged && childrenChanged) {
-            prev.children = nextChildren;
-            prev.vnode = rewriteCommittedVNode(vnode, committedChildVNodes);
-            prev.selfDirty = true;
-            prev.dirty = true;
-            return { ok: true, value: { root: prev } };
-        }
-        return {
-            ok: true,
-            value: {
-                root: {
-                    instanceId,
-                    vnode: rewriteCommittedVNode(vnode, committedChildVNodes),
-                    children: nextChildren,
-                    dirty: selfDirty || childrenChanged || hasDirtyChild(nextChildren),
-                    selfDirty,
-                    renderPacketKey: prev?.renderPacketKey ?? 0,
-                    renderPacket: prev?.renderPacket ?? null,
-                },
-            },
-        };
-    }
-    finally {
-        if (pushedCompositeTheme) {
-            ctx.compositeThemeStack.pop();
-        }
-    }
-}
-function executeCompositeRender(instanceId, vnode, compositeMeta, ctx, nodePath, depth) {
-    const prev = ctx.prevNodeStack.length > 0 ? (ctx.prevNodeStack[ctx.prevNodeStack.length - 1] ?? null) : null;
-    const compositeRuntime = ctx.composite;
-    let compositeChild = null;
-    let popCompositeStack = false;
-    try {
-        const activeCompositeMeta = compositeMeta;
-        const registry = compositeRuntime.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 (!registry.get(instanceId)) {
-            try {
-                registry.create(instanceId, compositeMeta.widgetKey);
-            }
-            catch (e) {
-                return {
-                    ok: false,
-                    fatal: {
-                        code: "ZRUI_USER_CODE_THROW",
-                        detail: describeThrown(e),
-                    },
-                };
-            }
-        }
-        const state = registry.get(instanceId);
-        if (!state) {
-            return {
-                ok: false,
-                fatal: {
-                    code: "ZRUI_INVALID_PROPS",
-                    detail: `composite state missing for instanceId=${String(instanceId)}`,
-                },
-            };
-        }
-        const invalidateInstance = () => {
-            registry.invalidate(instanceId);
-            ctx.composite?.onInvalidate(instanceId);
-        };
-        const prevMeta = prev ? getCompositeMeta(prev.vnode) : null;
-        const prevChild = prev?.children[0] ?? null;
-        const previousSelections = registry.getAppStateSelections(instanceId);
-        const skipRenderEligible = !state.needsRender &&
-            previousSelections.length > 0 &&
-            prevMeta !== null &&
-            prevChild !== null &&
-            prevMeta.widgetKey === activeCompositeMeta.widgetKey &&
-            compositePropsEqual(prevMeta.props, activeCompositeMeta.props);
-        let canSkipCompositeRender = false;
-        if (skipRenderEligible) {
-            const evalRes = evaluateAppStateSelections(previousSelections, compositeRuntime.appState);
-            if (evalRes.threw !== null) {
-                return {
-                    ok: false,
-                    fatal: {
-                        code: "ZRUI_USER_CODE_THROW",
-                        detail: describeThrown(evalRes.threw),
-                    },
-                };
-            }
-            canSkipCompositeRender = !evalRes.changed;
-        }
-        if (canSkipCompositeRender && prevChild !== null) {
-            compositeChild = prevChild.vnode;
-        }
-        else {
-            let colorTokens;
-            try {
-                colorTokens = readCompositeColorTokens(ctx);
-            }
-            catch (e) {
-                return {
-                    ok: false,
-                    fatal: {
-                        code: "ZRUI_USER_CODE_THROW",
-                        detail: describeThrown(e),
-                    },
-                };
-            }
-            const compositeDepth = ctx.compositeRenderStack.length + 1;
-            if (compositeDepth > MAX_COMPOSITE_RENDER_DEPTH) {
-                const chain = ctx.compositeRenderStack
-                    .map((entry) => entry.widgetKey)
-                    .concat(activeCompositeMeta.widgetKey)
-                    .join(" -> ");
-                return {
-                    ok: false,
-                    fatal: {
-                        code: "ZRUI_INVALID_PROPS",
-                        detail: `ZRUI_MAX_DEPTH: composite render depth ${String(compositeDepth)} exceeds max ${String(MAX_COMPOSITE_RENDER_DEPTH)}. Chain: ${chain}`,
-                    },
-                };
-            }
-            registry.beginRender(instanceId);
-            const hookCtx = createHookContext(state, invalidateInstance);
-            const nextSelections = [];
-            const widgetCtx = Object.freeze({
-                id: (suffix) => scopedId(activeCompositeMeta.widgetKey, instanceId, suffix),
-                useState: hookCtx.useState,
-                useReducer: hookCtx.useReducer,
-                useRef: hookCtx.useRef,
-                useEffect: hookCtx.useEffect,
-                useMemo: hookCtx.useMemo,
-                useCallback: hookCtx.useCallback,
-                useAppState: (selector) => {
-                    const selected = selector(compositeRuntime.appState);
-                    nextSelections.push({
-                        selector: selector,
-                        value: selected,
-                    });
-                    return selected;
-                },
-                useTheme: () => colorTokens,
-                useViewport: () => {
-                    compositeRuntime.onUseViewport?.();
-                    return compositeRuntime.viewport ?? DEFAULT_VIEWPORT_SNAPSHOT;
-                },
-                invalidate: invalidateInstance,
-            });
-            ctx.compositeRenderStack.push({
-                widgetKey: activeCompositeMeta.widgetKey,
-                instanceId,
-            });
-            popCompositeStack = true;
-            try {
-                compositeChild = activeCompositeMeta.render(widgetCtx);
-            }
-            catch (e) {
-                return {
-                    ok: false,
-                    fatal: {
-                        code: "ZRUI_USER_CODE_THROW",
-                        detail: describeThrown(e),
-                    },
-                };
-            }
-            try {
-                const pending = registry.endRender(instanceId);
-                const pendingCleanups = registry.getPendingCleanups(instanceId);
-                for (const cleanup of pendingCleanups)
-                    ctx.pendingCleanups.push(cleanup);
-                for (const eff of pending)
-                    ctx.pendingEffects.push(eff);
-                registry.setAppStateSelections(instanceId, nextSelections);
-            }
-            catch (e) {
-                return {
-                    ok: false,
-                    fatal: {
-                        code: "ZRUI_USER_CODE_THROW",
-                        detail: describeThrown(e),
-                    },
-                };
-            }
-        }
-        if (isContainerVNode(vnode)) {
-            const childOverride = compositeChild ? [compositeChild] : null;
-            if (childOverride) {
-                ctx.containerChildOverrides.set(instanceId, childOverride);
-            }
-            try {
-                return commitContainer(instanceId, vnode, prev, ctx, nodePath, depth);
-            }
-            finally {
-                if (childOverride) {
-                    ctx.containerChildOverrides.delete(instanceId);
-                }
-            }
-        }
-        return {
-            ok: true,
-            value: {
-                root: {
-                    instanceId,
-                    vnode,
-                    children: EMPTY_CHILDREN,
-                    dirty: true,
-                    selfDirty: true,
-                    renderPacketKey: 0,
-                    renderPacket: null,
-                },
-            },
-        };
-    }
-    finally {
-        if (popCompositeStack) {
-            ctx.compositeRenderStack.pop();
-        }
-    }
-}
+export { __commitDiag } from "./commit/equality.js";
 function commitNode(prev, instanceId, vnode, ctx, nodePath) {
     ctx.layoutDepthRef.value += 1;
     const layoutDepth = ctx.layoutDepthRef.value;
@@ -1411,7 +48,6 @@ function commitNode(prev, instanceId, vnode, ctx, nodePath) {
                 },
             };
         }
-        // Temporary debug: trace commit matching (remove after investigation)
         const commitDebug = globalThis;
         if (commitDebug.__commitDebug) {
             const debugLog = commitDebug.__commitDebugLog;
@@ -1419,9 +55,6 @@ function commitNode(prev, instanceId, vnode, ctx, nodePath) {
                 debugLog.push(`commitNode(${String(instanceId)}, ${vnode.kind}, prev=${prev ? `${prev.vnode.kind}:${String(prev.instanceId)}` : "null"})`);
             }
         }
-        // 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 (__commitDiag.enabled) {
                 const wasDirty = prev.selfDirty;
@@ -1438,7 +71,6 @@ function commitNode(prev, instanceId, vnode, ctx, nodePath) {
             prev.selfDirty = false;
             return { ok: true, value: { root: prev } };
         }
-        // Diagnostic: leaf not reused
         if (__commitDiag.enabled && prev && !isContainerVNode(vnode)) {
             if (prev.vnode.kind !== vnode.kind) {
                 __commitDiag.push({
@@ -1475,7 +107,7 @@ function commitNode(prev, instanceId, vnode, ctx, nodePath) {
             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);
+                return commitErrorBoundaryFallback(prev, instanceId, nodePath, fallbackPath, props, existingState, ctx, commitNode);
             }
             const committedProtected = commitNode(prev, instanceId, protectedChild, ctx, protectedPath);
             if (committedProtected.ok) {
@@ -1487,7 +119,7 @@ function commitNode(prev, instanceId, vnode, ctx, nodePath) {
             }
             const trappedState = captureErrorBoundaryState(committedProtected.fatal.detail);
             ctx.errorBoundary?.errorsByPath.set(nodePath, trappedState);
-            return commitErrorBoundaryFallback(prev, instanceId, nodePath, fallbackPath, props, trappedState, ctx);
+            return commitErrorBoundaryFallback(prev, instanceId, nodePath, fallbackPath, props, trappedState, ctx, commitNode);
         }
         const idFatal = ensureInteractiveId(ctx.seenInteractiveIds, instanceId, vnode);
         if (idFatal)
@@ -1507,15 +139,12 @@ function commitNode(prev, instanceId, vnode, ctx, nodePath) {
         if (ctx.composite) {
             const compositeMeta = getCompositeMeta(vnode);
             if (compositeMeta) {
-                return executeCompositeRender(instanceId, vnode, compositeMeta, ctx, [nodePath], layoutDepth);
+                return executeCompositeRender(instanceId, vnode, compositeMeta, ctx, [nodePath], layoutDepth, (nextInstanceId, nextVnode, nextPrev, nextCtx, nextNodePath, nextDepth) => commitContainer(nextInstanceId, nextVnode, nextPrev, nextCtx, nextNodePath, nextDepth, commitNode));
             }
         }
         if (isContainerVNode(vnode)) {
-            return commitContainer(instanceId, vnode, prev, ctx, [nodePath], layoutDepth);
+            return commitContainer(instanceId, vnode, prev, ctx, [nodePath], layoutDepth, commitNode);
         }
-        // Leaf node: when prev exists and kind matches, mutate in-place to preserve
-        // reference identity. This prevents parent containers from cascading new-instance
-        // creation when only leaf content changed.
         if (prev !== null && prev.vnode.kind === vnode.kind) {
             prev.vnode = vnode;
             prev.selfDirty = true;
@@ -1544,14 +173,6 @@ function commitNode(prev, instanceId, vnode, ctx, nodePath) {
         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();
@@ -1590,8 +211,6 @@ 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.
         if (!tryScheduleExitAnimation(ctx, prevRoot, 0)) {
             deleteLocalStateForSubtree(opts.localState, prevRoot);
             collectSubtreeInstanceIds(prevRoot, ctx.lists.unmounted);