@rezi-ui/core 0.1.0-alpha.1

package/dist/app/widgetRenderer.js

@@ -0,0 +1,1891 @@
+/**
+ * packages/core/src/app/widgetRenderer.ts — Widget tree renderer with focus and event routing.
+ *
+ * Why: Handles the "view mode" rendering path where users return VNode trees
+ * from a view function. Orchestrates the full widget pipeline: tree commit,
+ * layout computation, focus management, event routing, input editing, and
+ * drawlist rendering.
+ *
+ * Responsibilities:
+ *   - Commit VNode tree (reconciliation, instance ID allocation)
+ *   - Compute layout for viewport
+ *   - Manage focus state (traversal, pending changes)
+ *   - Route engine events to widgets (keyboard/mouse -> actions)
+ *   - Handle input widget editing (text/key/paste events)
+ *   - Render committed tree to drawlist
+ *
+ * v2 Cursor Protocol:
+ *   - When useV2Cursor is enabled, uses DrawlistBuilderV2
+ *   - Emits SET_CURSOR for focused Input widgets with proper position
+ *
+ * @see docs/guide/runtime-and-layout.md
+ * @see docs/guide/lifecycle-and-updates.md
+ */
+import { CURSOR_DEFAULTS } from "../cursor/index.js";
+import { createDrawlistBuilderV1, createDrawlistBuilderV2, } from "../drawlist/index.js";
+import { ZR_KEY_DOWN, ZR_KEY_ENTER, ZR_KEY_ESCAPE, ZR_KEY_SPACE, ZR_KEY_UP, ZR_MOD_SHIFT, } from "../keybindings/keyCodes.js";
+import { hitTestFocusable } from "../layout/hitTest.js";
+import { layout } from "../layout/layout.js";
+import { measureTextCells } from "../layout/textMeasure.js";
+import { PERF_DETAIL_ENABLED, PERF_ENABLED, perfMarkEnd, perfMarkStart } from "../perf/perf.js";
+import { renderToDrawlist } from "../renderer/renderToDrawlist.js";
+import { commitVNodeTree } from "../runtime/commit.js";
+import { createFocusManagerState, finalizeFocusWithPreCollectedMetadata, } from "../runtime/focus.js";
+import { applyInputEditEvent, normalizeInputCursor } from "../runtime/inputEditor.js";
+import { createInstanceIdAllocator } from "../runtime/instance.js";
+import { createCompositeInstanceRegistry, runPendingEffects } from "../runtime/instances.js";
+import { createLayerRegistry, hitTestLayers } from "../runtime/layers.js";
+import { createTableStateStore, createTreeStateStore, createVirtualListStateStore, } from "../runtime/localState.js";
+import { routeDropdownKey, routeKeyWithZones, routeLayerEscape, routeMouse, routeTableKey, routeTreeKey, routeVirtualListKey, routeVirtualListWheel, } from "../runtime/router.js";
+import { createWidgetMetadataCollector, } from "../runtime/widgetMeta.js";
+import { deleteRange, insertText } from "../widgets/codeEditor.js";
+import { getHunkScrollPosition, navigateHunk } from "../widgets/diffViewer.js";
+import { applyFilters } from "../widgets/logsConsole.js";
+import { computePanelCellSizes, handleDividerDrag, sizesToPercentages, } from "../widgets/splitPane.js";
+import { TOAST_HEIGHT, getToastActionFocusId, parseToastActionFocusId } from "../widgets/toast.js";
+import { flattenTree } from "../widgets/tree.js";
+import { computeVisibleRange, getTotalHeight } from "../widgets/virtualList.js";
+import { routeCodeEditorKeyDown } from "./widgetRenderer/codeEditorRouting.js";
+import { kickoffCommandPaletteItemFetches, routeCommandPaletteKeyDown, } from "./widgetRenderer/commandPaletteRouting.js";
+import { fileNodeGetChildren, fileNodeGetKey, fileNodeHasChildren, makeFileNodeFlatCache, readFileNodeFlatCache, } from "./widgetRenderer/fileNodeCache.js";
+import { routeFilePickerKeyDown, routeFileTreeExplorerKeyDown, } from "./widgetRenderer/filePickerRouting.js";
+import { rebuildRenderCaches, } from "./widgetRenderer/renderCaches.js";
+import { buildLayoutRectIndexes, updateLayoutStabilitySignatures, } from "./widgetRenderer/submitFramePipeline.js";
+import { routeToolApprovalDialogKeyDown } from "./widgetRenderer/toolApprovalRouting.js";
+const UTF8_DECODER = new TextDecoder();
+/** Format thrown value for error message. */
+function describeThrown(v) {
+    if (v instanceof Error)
+        return `${v.name}: ${v.message}`;
+    return String(v);
+}
+function isI32NonNegative(n) {
+    return Number.isInteger(n) && n >= 0 && n <= 2147483647;
+}
+const EMPTY_ROUTING = Object.freeze({});
+const EMPTY_STRING_ARRAY = Object.freeze([]);
+const ROUTE_RENDER = Object.freeze({ needsRender: true });
+const ROUTE_NO_RENDER = Object.freeze({ needsRender: false });
+const ZERO_RECT = Object.freeze({ x: 0, y: 0, w: 0, h: 0 });
+/**
+ * Renderer for widget view mode.
+ *
+ * Maintains committed tree, layout, focus state, and input widget state
+ * across frames. Routes engine events to produce UI actions.
+ *
+ * @typeParam S - Application state type
+ */
+export class WidgetRenderer {
+    backend;
+    builder;
+    useV2Cursor;
+    cursorShape;
+    cursorBlink;
+    requestRender;
+    requestView;
+    /* --- Committed Tree State --- */
+    committedRoot = null;
+    layoutTree = null;
+    /* --- Focus/Interaction State --- */
+    focusState = createFocusManagerState();
+    focusList = Object.freeze([]);
+    baseFocusList = Object.freeze([]);
+    enabledById = new Map();
+    baseEnabledById = new Map();
+    pressableIds = new Set();
+    pressedId = null;
+    pressedVirtualList = null;
+    traps = new Map();
+    /* --- Instance ID Allocation --- */
+    allocator = createInstanceIdAllocator(1);
+    /* --- Composite Widget State --- */
+    compositeRegistry = createCompositeInstanceRegistry();
+    /* --- Input Widget State --- */
+    inputById = new Map();
+    inputCursorByInstanceId = new Map();
+    inputWorkingValueByInstanceId = new Map();
+    /* --- Complex Widget Local State --- */
+    virtualListStore = createVirtualListStateStore();
+    tableStore = createTableStateStore();
+    treeStore = createTreeStateStore();
+    /* --- Tree Lazy-Loading Cache (per tree id, per node key) --- */
+    loadedTreeChildrenByTreeId = new Map();
+    treeLoadTokenByTreeAndKey = new Map();
+    nextTreeLoadToken = 1;
+    /* --- Complex Widget Metadata (rebuilt each commit) --- */
+    virtualListById = new Map();
+    buttonById = new Map();
+    tableById = new Map();
+    treeById = new Map();
+    dropdownById = new Map();
+    selectById = new Map();
+    checkboxById = new Map();
+    radioGroupById = new Map();
+    // Advanced widgets (GitHub issue #136)
+    commandPaletteById = new Map();
+    filePickerById = new Map();
+    fileTreeExplorerById = new Map();
+    splitPaneById = new Map();
+    codeEditorById = new Map();
+    diffViewerById = new Map();
+    toolApprovalDialogById = new Map();
+    logsConsoleById = new Map();
+    /* --- Advanced Widget Runtime State --- */
+    rectById = new Map();
+    splitPaneChildRectsById = new Map();
+    toastContainers = Object.freeze([]);
+    toastActionByFocusId = new Map();
+    toastFocusableActionIds = Object.freeze([]);
+    commandPaletteItemsById = new Map();
+    commandPaletteLoadingById = new Map();
+    commandPaletteFetchTokenById = new Map();
+    commandPaletteLastQueryById = new Map();
+    commandPaletteLastSourcesRefById = new Map();
+    toolApprovalFocusedActionById = new Map();
+    diffViewerFocusedHunkById = new Map();
+    diffViewerExpandedHunksById = new Map();
+    logsConsoleLastGTimeById = new Map();
+    // Tracks whether the currently committed tree needs routing rebuild traversals.
+    hadRoutingWidgets = false;
+    /* --- Render Caches (avoid per-frame recompute) --- */
+    tableRenderCacheById = new Map();
+    logsConsoleRenderCacheById = new Map();
+    diffRenderCacheById = new Map();
+    codeEditorRenderCacheById = new Map();
+    splitPaneDrag = null;
+    /* --- Overlay Routing State (rebuilt each commit) --- */
+    layerRegistry = createLayerRegistry();
+    layerStack = Object.freeze([]);
+    closeOnEscapeByLayerId = new Map();
+    closeOnBackdropByLayerId = new Map();
+    onCloseByLayerId = new Map();
+    dropdownStack = Object.freeze([]);
+    dropdownSelectedIndexById = new Map();
+    /* --- Pooled Collections (reused per-frame to reduce GC pressure) --- */
+    _metadataCollector = createWidgetMetadataCollector();
+    _pooledRectByInstanceId = new Map();
+    _pooledLayoutSigByInstanceId = new Map();
+    _pooledNextLayoutSigByInstanceId = new Map();
+    _pooledRectById = new Map();
+    _pooledSplitPaneChildRectsById = new Map();
+    _layoutMeasureCache = new WeakMap();
+    _pooledCloseOnEscape = new Map();
+    _pooledCloseOnBackdrop = new Map();
+    _pooledOnClose = new Map();
+    _pooledToastActionByFocusId = new Map();
+    _pooledLayoutStack = [];
+    _pooledRuntimeStack = [];
+    _pooledDropdownStack = [];
+    _pooledToastContainers = [];
+    _pooledToastFocusableActionIds = [];
+    // Pooled Sets for tracking previous IDs (GC cleanup detection)
+    _pooledPrevTreeIds = new Set();
+    _pooledPrevDropdownIds = new Set();
+    _pooledPrevTreeStoreIds = new Set();
+    _pooledPrevCommandPaletteIds = new Set();
+    _pooledPrevToolApprovalDialogIds = new Set();
+    _pooledPrevDiffViewerIds = new Set();
+    _pooledPrevLogsConsoleIds = new Set();
+    constructor(opts) {
+        this.backend = opts.backend;
+        this.useV2Cursor = opts.useV2Cursor === true;
+        this.cursorShape = opts.cursorShape ?? CURSOR_DEFAULTS.input.shape;
+        this.cursorBlink = opts.cursorBlink ?? CURSOR_DEFAULTS.input.blink;
+        this.requestRender = opts.requestRender ?? (() => { });
+        this.requestView = opts.requestView ?? (() => { });
+        // Widget rendering is generated from validated layout/runtime data, so we
+        // default builder param validation off here to reduce per-command overhead.
+        const validateParams = opts.drawlistValidateParams ?? false;
+        const builderOpts = {
+            ...(opts.maxDrawlistBytes === undefined ? {} : { maxDrawlistBytes: opts.maxDrawlistBytes }),
+            validateParams,
+            ...(opts.drawlistReuseOutputBuffer === undefined
+                ? {}
+                : { reuseOutputBuffer: opts.drawlistReuseOutputBuffer }),
+            ...(opts.drawlistEncodedStringCacheCap === undefined
+                ? {}
+                : { encodedStringCacheCap: opts.drawlistEncodedStringCacheCap }),
+        };
+        if (opts.builder) {
+            this.builder = opts.builder;
+        }
+        else if (this.useV2Cursor) {
+            this.builder = createDrawlistBuilderV2(builderOpts);
+        }
+        else {
+            this.builder = createDrawlistBuilderV1(builderOpts);
+        }
+    }
+    /**
+     * Get the currently focused widget ID.
+     *
+     * @returns Focused widget ID or null if nothing focused
+     */
+    getFocusedId() {
+        return this.focusState.focusedId;
+    }
+    /**
+     * Determine whether a key event should bypass the keybinding system.
+     *
+     * Why: When dropdowns or modal overlays are active, widgets must be able to
+     * consume Escape to close/deny/exit without being preempted by global
+     * keybindings (e.g., "Escape => menu").
+     */
+    shouldBypassKeybindings(event) {
+        if (event.kind !== "key" || event.action !== "down")
+            return false;
+        if (event.key !== ZR_KEY_ESCAPE)
+            return false;
+        // Dropdown stack should always receive Escape for close behavior.
+        if (this.dropdownStack.length > 0)
+            return true;
+        // Modal layers should receive Escape (even if closeOnEscape=false, the
+        // focused widget inside the modal may handle Escape, e.g. CommandPalette).
+        return this.layerRegistry.getTopmostModal() !== undefined;
+    }
+    /**
+     * Route an engine event through the widget tree.
+     *
+     * Handles focus traversal (Tab/Shift+Tab), mouse interactions,
+     * keyboard activation (Enter/Space), and input widget editing.
+     *
+     * @param event - Engine event from ZREV parsing
+     * @returns Routing outcome with render flag and optional action
+     */
+    routeEngineEvent(event) {
+        if (!this.committedRoot || !this.layoutTree)
+            return ROUTE_NO_RENDER;
+        const enabledById = this.enabledById;
+        const prevFocusedId = this.focusState.focusedId;
+        const prevPressedId = this.pressedId;
+        const focusedId = this.focusState.focusedId;
+        const mouseTargetId = event.kind === "mouse"
+            ? hitTestFocusable(this.committedRoot.vnode, this.layoutTree, event.x, event.y)
+            : null;
+        let localNeedsRender = false;
+        // Overlay routing: dropdown key navigation, layer/modal ESC close, and modal backdrop blocking.
+        if (event.kind === "key" && event.action === "down") {
+            const topDropdownId = this.dropdownStack.length > 0
+                ? (this.dropdownStack[this.dropdownStack.length - 1] ?? null)
+                : null;
+            if (topDropdownId) {
+                const dropdown = this.dropdownById.get(topDropdownId);
+                if (dropdown) {
+                    const selectedIndex = this.dropdownSelectedIndexById.get(topDropdownId) ?? 0;
+                    const ctx = {
+                        dropdownId: topDropdownId,
+                        items: dropdown.items,
+                        selectedIndex,
+                        ...(dropdown.onSelect ? { onSelect: dropdown.onSelect } : {}),
+                        ...(dropdown.onClose ? { onClose: dropdown.onClose } : {}),
+                    };
+                    const r = routeDropdownKey(event, ctx);
+                    if (r.nextSelectedIndex !== undefined) {
+                        this.dropdownSelectedIndexById.set(topDropdownId, r.nextSelectedIndex);
+                    }
+                    if (r.consumed)
+                        return ROUTE_RENDER;
+                }
+            }
+            const layerRes = routeLayerEscape(event, {
+                layerStack: this.layerStack,
+                closeOnEscape: this.closeOnEscapeByLayerId,
+                onClose: this.onCloseByLayerId,
+            });
+            if (layerRes.consumed)
+                return ROUTE_RENDER;
+        }
+        if (event.kind === "mouse") {
+            const hit = hitTestLayers(this.layerRegistry, event.x, event.y);
+            if (hit.blocked) {
+                const blocking = hit.blockingLayer;
+                // Mouse kind 3 = down (locked by ABI).
+                if (blocking &&
+                    event.mouseKind === 3 &&
+                    (this.closeOnBackdropByLayerId.get(blocking.id) ?? false) === true) {
+                    const cb = this.onCloseByLayerId.get(blocking.id);
+                    if (cb) {
+                        try {
+                            cb();
+                        }
+                        catch {
+                            // Swallow close callback errors to preserve routing determinism.
+                        }
+                        return ROUTE_RENDER;
+                    }
+                }
+                // Block all input to lower layers.
+                return ROUTE_NO_RENDER;
+            }
+        }
+        // SplitPane divider dragging (GitHub issue #136). SplitPane is intentionally not focusable;
+        // divider drags are handled directly from mouse events.
+        if (event.kind === "mouse") {
+            const MOUSE_KIND_DOWN = 3;
+            const MOUSE_KIND_UP = 4;
+            const MOUSE_KIND_WHEEL = 5;
+            if (this.splitPaneDrag) {
+                if (event.mouseKind === MOUSE_KIND_UP) {
+                    this.splitPaneDrag = null;
+                    return ROUTE_RENDER;
+                }
+                if (event.mouseKind !== MOUSE_KIND_WHEEL) {
+                    const drag = this.splitPaneDrag;
+                    const pane = this.splitPaneById.get(drag.id);
+                    if (pane) {
+                        const delta = drag.direction === "horizontal" ? event.x - drag.startX : event.y - drag.startY;
+                        const nextCellSizes = handleDividerDrag(drag.startCellSizes, drag.dividerIndex, delta, drag.minSizes, drag.maxSizes);
+                        const nextSizes = drag.sizeMode === "percent" ? sizesToPercentages(nextCellSizes) : nextCellSizes;
+                        pane.onResize(Object.freeze(nextSizes.slice()));
+                        return ROUTE_RENDER;
+                    }
+                    // SplitPane removed mid-drag.
+                    this.splitPaneDrag = null;
+                    return ROUTE_RENDER;
+                }
+            }
+            else if (event.mouseKind === MOUSE_KIND_DOWN) {
+                // Detect divider under cursor.
+                for (const [id, pane] of this.splitPaneById) {
+                    const rect = this.rectById.get(id);
+                    if (!rect || rect.w <= 0 || rect.h <= 0)
+                        continue;
+                    if (event.x < rect.x ||
+                        event.x >= rect.x + rect.w ||
+                        event.y < rect.y ||
+                        event.y >= rect.y + rect.h) {
+                        continue;
+                    }
+                    const childRects = this.splitPaneChildRectsById.get(id) ?? Object.freeze([]);
+                    if (childRects.length < 2)
+                        continue;
+                    const dividerSize = Math.max(1, pane.dividerSize ?? 1);
+                    const direction = pane.direction;
+                    const sizeMode = pane.sizeMode ?? "percent";
+                    const minSizes = pane.minSizes;
+                    const maxSizes = pane.maxSizes;
+                    // Hit expansion for easier grabbing: dividerSize + 2 (one cell on each side).
+                    const expand = 1;
+                    for (let i = 0; i < childRects.length - 1; i++) {
+                        const a = childRects[i];
+                        if (!a)
+                            continue;
+                        if (direction === "horizontal") {
+                            const x0 = a.x + a.w;
+                            const hitX0 = x0 - expand;
+                            const hitX1 = x0 + dividerSize + expand;
+                            if (event.x >= hitX0 && event.x < hitX1) {
+                                const availableCells = rect.w;
+                                const startCellSizes = computePanelCellSizes(childRects.length, pane.sizes, availableCells, sizeMode, dividerSize, minSizes, maxSizes).sizes;
+                                this.splitPaneDrag = Object.freeze({
+                                    id,
+                                    dividerIndex: i,
+                                    direction,
+                                    sizeMode,
+                                    dividerSize,
+                                    minSizes,
+                                    maxSizes,
+                                    startX: event.x,
+                                    startY: event.y,
+                                    startCellSizes,
+                                    availableCells,
+                                });
+                                return ROUTE_RENDER;
+                            }
+                        }
+                        else {
+                            const y0 = a.y + a.h;
+                            const hitY0 = y0 - expand;
+                            const hitY1 = y0 + dividerSize + expand;
+                            if (event.y >= hitY0 && event.y < hitY1) {
+                                const availableCells = rect.h;
+                                const startCellSizes = computePanelCellSizes(childRects.length, pane.sizes, availableCells, sizeMode, dividerSize, minSizes, maxSizes).sizes;
+                                this.splitPaneDrag = Object.freeze({
+                                    id,
+                                    dividerIndex: i,
+                                    direction,
+                                    sizeMode,
+                                    dividerSize,
+                                    minSizes,
+                                    maxSizes,
+                                    startX: event.x,
+                                    startY: event.y,
+                                    startCellSizes,
+                                    availableCells,
+                                });
+                                return ROUTE_RENDER;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // Toast interactions (GitHub issue #136): click toast to dismiss, click action to run.
+        if (event.kind === "mouse" && event.mouseKind === 3 && this.toastContainers.length > 0) {
+            for (let i = this.toastContainers.length - 1; i >= 0; i--) {
+                const tc = this.toastContainers[i];
+                if (!tc)
+                    continue;
+                const rect = tc.rect;
+                if (rect.w <= 0 || rect.h <= 0)
+                    continue;
+                if (event.x < rect.x ||
+                    event.x >= rect.x + rect.w ||
+                    event.y < rect.y ||
+                    event.y >= rect.y + rect.h) {
+                    continue;
+                }
+                const toasts = tc.props.toasts;
+                const maxVisible = tc.props.maxVisible ?? 5;
+                const position = tc.props.position ?? "bottom-right";
+                const maxByHeight = Math.floor(rect.h / TOAST_HEIGHT);
+                const visibleCount = Math.min(toasts.length, maxVisible, maxByHeight);
+                for (let t = 0; t < visibleCount; t++) {
+                    const toast = toasts[t];
+                    if (!toast)
+                        continue;
+                    const toastY = position.startsWith("top")
+                        ? rect.y + t * TOAST_HEIGHT
+                        : rect.y + rect.h - (t + 1) * TOAST_HEIGHT;
+                    if (event.y < toastY || event.y >= toastY + TOAST_HEIGHT)
+                        continue;
+                    if (toast.action && event.y === toastY + 1 && rect.w >= 10) {
+                        const label = `[${toast.action.label}]`;
+                        const lw = measureTextCells(label);
+                        const ax = rect.x + rect.w - 2 - lw;
+                        if (ax > rect.x + 4 && event.x >= ax && event.x < ax + lw) {
+                            this.focusState = Object.freeze({
+                                ...this.focusState,
+                                focusedId: getToastActionFocusId(toast.id),
+                                activeZoneId: null,
+                            });
+                            toast.action.onAction();
+                            return ROUTE_RENDER;
+                        }
+                    }
+                    tc.props.onDismiss(toast.id);
+                    return ROUTE_RENDER;
+                }
+            }
+        }
+        // Route complex widgets first (so arrow keys act "within" the widget, not as focus movement).
+        if (event.kind === "key" && event.action === "down" && focusedId !== null) {
+            // Toast action routing (keyboard). ToastContainer itself is not focusable; individual
+            // toast actions become focusable via runtime-local synthetic ids (PLAN.md).
+            if (parseToastActionFocusId(focusedId) !== null &&
+                (event.key === ZR_KEY_ENTER || event.key === ZR_KEY_SPACE)) {
+                const cb = this.toastActionByFocusId.get(focusedId);
+                if (cb) {
+                    cb();
+                    return ROUTE_RENDER;
+                }
+            }
+            // Command palette routing (GitHub issue #136)
+            const palette = this.commandPaletteById.get(focusedId);
+            if (palette?.open === true) {
+                const items = this.commandPaletteItemsById.get(palette.id) ?? Object.freeze([]);
+                if (routeCommandPaletteKeyDown(event, palette, items)) {
+                    return ROUTE_RENDER;
+                }
+            }
+            // Tool approval dialog routing (GitHub issue #136)
+            const toolDialog = this.toolApprovalDialogById.get(focusedId);
+            if (toolDialog?.open === true) {
+                if (routeToolApprovalDialogKeyDown(event, toolDialog, this.toolApprovalFocusedActionById)) {
+                    return ROUTE_RENDER;
+                }
+            }
+            // File tree explorer routing (GitHub issue #136)
+            const fte = this.fileTreeExplorerById.get(focusedId);
+            if (fte) {
+                if (routeFileTreeExplorerKeyDown(event, fte, this.treeStore)) {
+                    return ROUTE_RENDER;
+                }
+            }
+            // File picker routing (GitHub issue #136)
+            const fp = this.filePickerById.get(focusedId);
+            if (fp) {
+                if (routeFilePickerKeyDown(event, fp, this.treeStore)) {
+                    return ROUTE_RENDER;
+                }
+            }
+            // Code editor routing (GitHub issue #136)
+            const editor = this.codeEditorById.get(focusedId);
+            if (editor) {
+                const rect = this.rectById.get(editor.id) ?? null;
+                const r = routeCodeEditorKeyDown(event, editor, rect);
+                if (r)
+                    return r;
+            }
+            // Logs console routing (GitHub issue #136)
+            const logs = this.logsConsoleById.get(focusedId);
+            if (logs) {
+                const rect = this.rectById.get(logs.id) ?? null;
+                const viewportHeight = rect ? Math.max(1, rect.h) : 1;
+                const cached = this.logsConsoleRenderCacheById.get(logs.id);
+                const filtered = cached?.filtered ??
+                    applyFilters(logs.entries, logs.levelFilter, logs.sourceFilter, logs.searchQuery);
+                const filteredLen = filtered.length;
+                const maxScroll = Math.max(0, filteredLen - viewportHeight);
+                const isShift = (event.mods & ZR_MOD_SHIFT) !== 0;
+                const key = event.key;
+                const isDown = key === ZR_KEY_DOWN || (!isShift && key === 74) /* J */;
+                const isUp = key === ZR_KEY_UP || (!isShift && key === 75) /* K */;
+                if (isDown || isUp) {
+                    const delta = isUp ? -1 : 1;
+                    const nextScrollTop = Math.max(0, Math.min(maxScroll, logs.scrollTop + delta));
+                    if (nextScrollTop !== logs.scrollTop) {
+                        logs.onScroll(nextScrollTop);
+                        return ROUTE_RENDER;
+                    }
+                    return ROUTE_NO_RENDER;
+                }
+                if (key === 71 /* G */) {
+                    if (isShift) {
+                        if (logs.scrollTop !== maxScroll) {
+                            logs.onScroll(maxScroll);
+                            return ROUTE_RENDER;
+                        }
+                        return ROUTE_NO_RENDER;
+                    }
+                    const prevG = this.logsConsoleLastGTimeById.get(logs.id);
+                    this.logsConsoleLastGTimeById.set(logs.id, event.timeMs);
+                    if (prevG !== undefined && event.timeMs - prevG <= 500) {
+                        this.logsConsoleLastGTimeById.delete(logs.id);
+                        if (logs.scrollTop !== 0) {
+                            logs.onScroll(0);
+                            return ROUTE_RENDER;
+                        }
+                        return ROUTE_NO_RENDER;
+                    }
+                    return ROUTE_NO_RENDER;
+                }
+                if (!isShift && key === 67 /* C */ && logs.onClear) {
+                    logs.onClear();
+                    return ROUTE_RENDER;
+                }
+                if (key === ZR_KEY_ENTER && logs.onEntryToggle) {
+                    const idx = Math.max(0, Math.min(filtered.length - 1, logs.scrollTop));
+                    const entry = filtered[idx];
+                    if (entry) {
+                        const expanded = logs.expandedEntries?.includes(entry.id) ?? false;
+                        logs.onEntryToggle(entry.id, !expanded);
+                        return ROUTE_RENDER;
+                    }
+                    return ROUTE_NO_RENDER;
+                }
+            }
+            // Diff viewer routing (GitHub issue #136)
+            const diff = this.diffViewerById.get(focusedId);
+            if (diff) {
+                const isShift = (event.mods & ZR_MOD_SHIFT) !== 0;
+                const key = event.key;
+                const hunkCount = diff.diff.hunks.length;
+                const curFocused = this.diffViewerFocusedHunkById.get(diff.id) ?? diff.focusedHunk ?? 0;
+                const focusedHunk = Math.max(0, Math.min(hunkCount - 1, curFocused));
+                const isNext = key === ZR_KEY_DOWN || (!isShift && key === 74) /* J */;
+                const isPrev = key === ZR_KEY_UP || (!isShift && key === 75) /* K */;
+                if (isNext || isPrev) {
+                    const nextFocused = navigateHunk(focusedHunk, isNext ? "next" : "prev", hunkCount);
+                    this.diffViewerFocusedHunkById.set(diff.id, nextFocused);
+                    diff.onScroll(getHunkScrollPosition(nextFocused, diff.diff.hunks));
+                    return ROUTE_RENDER;
+                }
+                if (key === ZR_KEY_ENTER) {
+                    const base = this.diffViewerExpandedHunksById.get(diff.id) ??
+                        new Set(diff.expandedHunks ?? []);
+                    const next = new Set(base);
+                    const expanded = next.has(focusedHunk);
+                    if (expanded)
+                        next.delete(focusedHunk);
+                    else
+                        next.add(focusedHunk);
+                    this.diffViewerExpandedHunksById.set(diff.id, next);
+                    diff.onHunkToggle?.(focusedHunk, !expanded);
+                    return ROUTE_RENDER;
+                }
+                if (!isShift && key === 83 /* S */ && diff.onStageHunk) {
+                    diff.onStageHunk(focusedHunk);
+                    return ROUTE_RENDER;
+                }
+                if (!isShift && key === 85 /* U */ && diff.onUnstageHunk) {
+                    diff.onUnstageHunk(focusedHunk);
+                    return ROUTE_RENDER;
+                }
+                if (!isShift && key === 65 /* A */ && diff.onApplyHunk) {
+                    diff.onApplyHunk(focusedHunk);
+                    return ROUTE_RENDER;
+                }
+                if (!isShift && key === 82 /* R */ && diff.onRevertHunk) {
+                    diff.onRevertHunk(focusedHunk);
+                    return ROUTE_RENDER;
+                }
+            }
+            // Virtual list routing
+            const vlist = this.virtualListById.get(focusedId);
+            if (vlist) {
+                const state = this.virtualListStore.get(vlist.id);
+                const r = routeVirtualListKey(event, {
+                    virtualListId: vlist.id,
+                    items: vlist.items,
+                    itemHeight: vlist.itemHeight,
+                    state,
+                    keyboardNavigation: vlist.keyboardNavigation !== false,
+                    wrapAround: vlist.wrapAround === true,
+                });
+                let changed = false;
+                if (r.nextSelectedIndex !== undefined || r.nextScrollTop !== undefined) {
+                    const patch = {};
+                    if (r.nextSelectedIndex !== undefined)
+                        patch.selectedIndex = r.nextSelectedIndex;
+                    if (r.nextScrollTop !== undefined)
+                        patch.scrollTop = r.nextScrollTop;
+                    this.virtualListStore.set(vlist.id, patch);
+                    changed = true;
+                }
+                if (r.action && vlist.onSelect) {
+                    const item = vlist.items[r.action.index];
+                    if (item !== undefined)
+                        vlist.onSelect(item, r.action.index);
+                    changed = true;
+                }
+                if (changed)
+                    return ROUTE_RENDER;
+            }
+            // Table routing
+            const table = this.tableById.get(focusedId);
+            if (table) {
+                const rowHeight = table.rowHeight ?? 1;
+                const tableCache = this.tableRenderCacheById.get(table.id);
+                const rowKeys = tableCache?.rowKeys ?? table.data.map((row, i) => table.getRowKey(row, i));
+                const state = this.tableStore.get(table.id);
+                const r = routeTableKey(event, {
+                    tableId: table.id,
+                    rowKeys,
+                    ...(tableCache?.rowKeyToIndex ? { rowKeyToIndex: tableCache.rowKeyToIndex } : {}),
+                    data: table.data,
+                    rowHeight,
+                    state,
+                    selection: (table.selection ?? EMPTY_STRING_ARRAY),
+                    selectionMode: table.selectionMode ?? "none",
+                    keyboardNavigation: true,
+                });
+                if (r.consumed) {
+                    if (r.nextFocusedRowIndex !== undefined ||
+                        r.nextScrollTop !== undefined ||
+                        r.nextLastClickedKey !== undefined) {
+                        const patch = {};
+                        if (r.nextFocusedRowIndex !== undefined)
+                            patch.focusedRowIndex = r.nextFocusedRowIndex;
+                        if (r.nextScrollTop !== undefined)
+                            patch.scrollTop = r.nextScrollTop;
+                        if (r.nextLastClickedKey !== undefined)
+                            patch.lastClickedKey = r.nextLastClickedKey;
+                        this.tableStore.set(table.id, patch);
+                    }
+                    if (r.nextSelection !== undefined && table.onSelectionChange) {
+                        table.onSelectionChange(r.nextSelection);
+                    }
+                    if (r.action && table.onRowPress) {
+                        const row = table.data[r.action.rowIndex];
+                        if (row !== undefined)
+                            table.onRowPress(row, r.action.rowIndex);
+                    }
+                    return ROUTE_RENDER;
+                }
+            }
+            // Tree routing
+            const tree = this.treeById.get(focusedId);
+            if (tree) {
+                const state = this.treeStore.get(tree.id);
+                const expandedSet = state.expandedSetRef === tree.expanded && state.expandedSet
+                    ? state.expandedSet
+                    : new Set(tree.expanded);
+                if (state.expandedSetRef !== tree.expanded) {
+                    this.treeStore.set(tree.id, { expandedSetRef: tree.expanded, expandedSet });
+                }
+                const loaded = this.loadedTreeChildrenByTreeId.get(tree.id);
+                const getChildrenRaw = tree.getChildren;
+                const getKey = tree.getKey;
+                const getChildren = loaded
+                    ? (n) => {
+                        const k = getKey(n);
+                        const cached = loaded.get(k);
+                        return cached ?? getChildrenRaw?.(n);
+                    }
+                    : getChildrenRaw;
+                const cached = state.flatCache;
+                const canReuseFlatCache = cached &&
+                    cached.kind === "tree" &&
+                    cached.dataRef === tree.data &&
+                    cached.expandedRef === tree.expanded &&
+                    cached.getKeyRef === tree.getKey &&
+                    cached.getChildrenRef === tree.getChildren &&
+                    cached.hasChildrenRef === tree.hasChildren &&
+                    cached.loadedRef === loaded;
+                const flatNodes = canReuseFlatCache
+                    ? cached.flatNodes
+                    : flattenTree(tree.data, getKey, getChildren, tree.hasChildren, tree.expanded, expandedSet);
+                if (!canReuseFlatCache) {
+                    this.treeStore.set(tree.id, {
+                        flatCache: Object.freeze({
+                            kind: "tree",
+                            dataRef: tree.data,
+                            expandedRef: tree.expanded,
+                            loadedRef: loaded,
+                            getKeyRef: tree.getKey,
+                            getChildrenRef: tree.getChildren,
+                            hasChildrenRef: tree.hasChildren,
+                            flatNodes: flatNodes,
+                        }),
+                    });
+                }
+                const r = routeTreeKey(event, {
+                    treeId: tree.id,
+                    flatNodes,
+                    expanded: tree.expanded,
+                    state,
+                    keyboardNavigation: true,
+                });
+                if (r.consumed) {
+                    if (r.nextFocusedKey !== undefined || r.nextScrollTop !== undefined) {
+                        const patch = {};
+                        if (r.nextFocusedKey !== undefined)
+                            patch.focusedKey = r.nextFocusedKey;
+                        if (r.nextScrollTop !== undefined)
+                            patch.scrollTop = r.nextScrollTop;
+                        this.treeStore.set(tree.id, patch);
+                    }
+                    if (r.nodeToSelect && tree.onSelect) {
+                        const found = flatNodes.find((n) => n.key === r.nodeToSelect);
+                        if (found)
+                            tree.onSelect(found.node);
+                    }
+                    if (r.nodeToActivate && tree.onActivate) {
+                        const found = flatNodes.find((n) => n.key === r.nodeToActivate);
+                        if (found)
+                            tree.onActivate(found.node);
+                    }
+                    if (r.nodeToLoad && tree.loadChildren) {
+                        const nodeKey = r.nodeToLoad;
+                        const alreadyLoaded = this.loadedTreeChildrenByTreeId.get(tree.id)?.get(nodeKey) !== undefined;
+                        const alreadyLoading = state.loadingKeys.has(nodeKey);
+                        const found = flatNodes.find((n) => n.key === nodeKey);
+                        if (!alreadyLoaded && !alreadyLoading && found) {
+                            this.treeStore.startLoading(tree.id, nodeKey);
+                            const token = this.nextTreeLoadToken++;
+                            const tokenKey = `${tree.id}\u0000${nodeKey}`;
+                            this.treeLoadTokenByTreeAndKey.set(tokenKey, token);
+                            void tree.loadChildren(found.node).then((children) => {
+                                if (this.treeLoadTokenByTreeAndKey.get(tokenKey) !== token)
+                                    return;
+                                this.treeLoadTokenByTreeAndKey.delete(tokenKey);
+                                const prev = this.loadedTreeChildrenByTreeId.get(tree.id);
+                                const next = new Map(prev ? Array.from(prev.entries()) : []);
+                                next.set(nodeKey, Object.freeze(children.slice()));
+                                this.loadedTreeChildrenByTreeId.set(tree.id, next);
+                                this.treeStore.finishLoading(tree.id, nodeKey);
+                                this.requestRender();
+                            }, () => {
+                                if (this.treeLoadTokenByTreeAndKey.get(tokenKey) !== token)
+                                    return;
+                                this.treeLoadTokenByTreeAndKey.delete(tokenKey);
+                                this.treeStore.finishLoading(tree.id, nodeKey);
+                                this.requestRender();
+                            });
+                        }
+                    }
+                    if (r.nextExpanded !== undefined) {
+                        // Best-effort: detect toggled keys and invoke onToggle for each diff.
+                        const prev = new Set(tree.expanded);
+                        const next = new Set(r.nextExpanded);
+                        const diffs = [];
+                        for (const k of next)
+                            if (!prev.has(k))
+                                diffs.push(k);
+                        for (const k of prev)
+                            if (!next.has(k))
+                                diffs.push(k);
+                        for (const k of diffs) {
+                            const found = flatNodes.find((n) => n.key === k);
+                            if (found)
+                                tree.onToggle(found.node, next.has(k));
+                        }
+                    }
+                    return ROUTE_RENDER;
+                }
+            }
+            // Select routing (simple: arrow keys cycle; Enter/Space cycles)
+            const select = this.selectById.get(focusedId);
+            if (select && select.disabled !== true && select.options.length > 0) {
+                const KEY_UP = 20;
+                const KEY_DOWN = 21;
+                const KEY_ENTER = 2;
+                const KEY_SPACE = 32;
+                const dir = event.key === KEY_UP
+                    ? -1
+                    : event.key === KEY_DOWN
+                        ? 1
+                        : event.key === KEY_ENTER || event.key === KEY_SPACE
+                            ? 1
+                            : 0;
+                if (dir !== 0 && select.onChange) {
+                    const opts = select.options.filter((o) => o.disabled !== true);
+                    if (opts.length > 0) {
+                        const idx = opts.findIndex((o) => o.value === select.value);
+                        const nextIdx = idx < 0 ? 0 : (idx + dir + opts.length) % opts.length;
+                        const next = opts[nextIdx];
+                        if (next && next.value !== select.value) {
+                            select.onChange(next.value);
+                            return ROUTE_RENDER;
+                        }
+                    }
+                }
+            }
+            // Checkbox routing (Space/Enter toggles)
+            const checkbox = this.checkboxById.get(focusedId);
+            if (checkbox && checkbox.disabled !== true && checkbox.onChange) {
+                const KEY_ENTER = 2;
+                const KEY_SPACE = 32;
+                if (event.key === KEY_ENTER || event.key === KEY_SPACE) {
+                    checkbox.onChange(!checkbox.checked);
+                    return ROUTE_RENDER;
+                }
+            }
+            // Radio group routing (arrow keys change selection)
+            const radio = this.radioGroupById.get(focusedId);
+            if (radio && radio.disabled !== true && radio.onChange) {
+                const KEY_UP = 20;
+                const KEY_DOWN = 21;
+                const KEY_LEFT = 22;
+                const KEY_RIGHT = 23;
+                const isHorizontal = radio.direction === "horizontal";
+                const dir = (isHorizontal && event.key === KEY_LEFT) || (!isHorizontal && event.key === KEY_UP)
+                    ? -1
+                    : (isHorizontal && event.key === KEY_RIGHT) || (!isHorizontal && event.key === KEY_DOWN)
+                        ? 1
+                        : 0;
+                if (dir !== 0) {
+                    const opts = radio.options.filter((o) => o.disabled !== true);
+                    if (opts.length > 0) {
+                        const idx = opts.findIndex((o) => o.value === radio.value);
+                        const nextIdx = idx < 0 ? 0 : (idx + dir + opts.length) % opts.length;
+                        const next = opts[nextIdx];
+                        if (next && next.value !== radio.value) {
+                            radio.onChange(next.value);
+                            return ROUTE_RENDER;
+                        }
+                    }
+                }
+            }
+        }
+        // Mouse wheel for virtual list (prefer list under cursor; fallback to focused list).
+        if (event.kind === "mouse" && event.mouseKind === 5) {
+            const targetId = mouseTargetId ?? focusedId;
+            if (targetId === null)
+                return ROUTE_NO_RENDER;
+            const vlist = this.virtualListById.get(targetId);
+            if (vlist) {
+                const state = this.virtualListStore.get(vlist.id);
+                const totalHeight = getTotalHeight(vlist.items, vlist.itemHeight);
+                const r = routeVirtualListWheel(event, {
+                    scrollTop: state.scrollTop,
+                    totalHeight,
+                    viewportHeight: state.viewportHeight,
+                });
+                if (r.nextScrollTop !== undefined) {
+                    this.virtualListStore.set(vlist.id, { scrollTop: r.nextScrollTop });
+                    return ROUTE_RENDER;
+                }
+            }
+            if (focusedId !== null) {
+                const editor = this.codeEditorById.get(focusedId);
+                if (editor) {
+                    const rect = this.rectById.get(editor.id) ?? null;
+                    const viewportHeight = rect ? Math.max(1, rect.h) : 1;
+                    const maxScrollTop = Math.max(0, editor.lines.length - viewportHeight);
+                    const nextScrollTop = Math.max(0, Math.min(maxScrollTop, editor.scrollTop + event.wheelY * 3));
+                    const nextScrollLeft = Math.max(0, editor.scrollLeft + event.wheelX * 3);
+                    if (nextScrollTop !== editor.scrollTop || nextScrollLeft !== editor.scrollLeft) {
+                        editor.onScroll(nextScrollTop, nextScrollLeft);
+                        return ROUTE_RENDER;
+                    }
+                }
+                const logs = this.logsConsoleById.get(focusedId);
+                if (logs) {
+                    const rect = this.rectById.get(logs.id) ?? null;
+                    const viewportHeight = rect ? Math.max(1, rect.h) : 1;
+                    const cached = this.logsConsoleRenderCacheById.get(logs.id);
+                    const filteredLen = cached?.filtered.length ??
+                        applyFilters(logs.entries, logs.levelFilter, logs.sourceFilter, logs.searchQuery)
+                            .length;
+                    const maxScroll = Math.max(0, filteredLen - viewportHeight);
+                    const nextScrollTop = Math.max(0, Math.min(maxScroll, logs.scrollTop + event.wheelY * 3));
+                    if (nextScrollTop !== logs.scrollTop) {
+                        logs.onScroll(nextScrollTop);
+                        return ROUTE_RENDER;
+                    }
+                }
+                const diff = this.diffViewerById.get(focusedId);
+                if (diff) {
+                    const rect = this.rectById.get(diff.id) ?? null;
+                    const viewportHeight = rect ? Math.max(1, rect.h) : 1;
+                    let totalLines = 0;
+                    for (const h of diff.diff.hunks) {
+                        if (!h)
+                            continue;
+                        totalLines += 1 + h.lines.length;
+                    }
+                    const maxScroll = Math.max(0, totalLines - viewportHeight);
+                    const nextScrollTop = Math.max(0, Math.min(maxScroll, diff.scrollTop + event.wheelY * 3));
+                    if (nextScrollTop !== diff.scrollTop) {
+                        diff.onScroll(nextScrollTop);
+                        return ROUTE_RENDER;
+                    }
+                }
+            }
+        }
+        // Text/paste input for command palette and code editor (docs/18 text events are distinct from keys).
+        if ((event.kind === "text" || event.kind === "paste") && this.focusState.focusedId !== null) {
+            const focusedId = this.focusState.focusedId;
+            const palette = this.commandPaletteById.get(focusedId);
+            if (palette?.open === true) {
+                const append = event.kind === "text"
+                    ? event.codepoint >= 0 && event.codepoint <= 0x10ffff
+                        ? String.fromCodePoint(event.codepoint)
+                        : ""
+                    : UTF8_DECODER.decode(event.bytes);
+                if (append.length > 0) {
+                    palette.onQueryChange(palette.query + append);
+                    palette.onSelectionChange?.(0);
+                    return ROUTE_RENDER;
+                }
+            }
+            const editor = this.codeEditorById.get(focusedId);
+            if (editor && editor.readOnly !== true) {
+                const insert = event.kind === "text"
+                    ? event.codepoint >= 0 && event.codepoint <= 0x10ffff
+                        ? String.fromCodePoint(event.codepoint)
+                        : ""
+                    : UTF8_DECODER.decode(event.bytes);
+                if (insert.length > 0) {
+                    const base = editor.selection ? deleteRange(editor.lines, editor.selection) : null;
+                    const next = insertText(base ? base.lines : editor.lines, base ? base.cursor : editor.cursor, insert);
+                    if (editor.selection !== null)
+                        editor.onSelectionChange(null);
+                    editor.onChange(next.lines, next.cursor);
+                    return ROUTE_RENDER;
+                }
+            }
+        }
+        // Mouse click for virtual list:
+        // - on down: update selectedIndex
+        // - on up: activate onSelect if released on the same item
+        if (event.kind === "mouse" && (event.mouseKind === 3 || event.mouseKind === 4)) {
+            const targetId = mouseTargetId;
+            if (targetId !== null) {
+                const vlist = this.virtualListById.get(targetId);
+                const rect = this.rectById.get(targetId);
+                if (vlist && rect) {
+                    const state = this.virtualListStore.get(targetId);
+                    const localY = event.y - rect.y;
+                    const inBounds = localY >= 0 && localY < rect.h;
+                    const computeIndex = () => {
+                        if (!inBounds)
+                            return null;
+                        const yInContent = state.scrollTop + localY;
+                        if (yInContent < 0)
+                            return null;
+                        if (vlist.items.length === 0)
+                            return null;
+                        if (typeof vlist.itemHeight === "number") {
+                            const h = vlist.itemHeight;
+                            if (h <= 0)
+                                return null;
+                            return Math.floor(yInContent / h);
+                        }
+                        const { itemOffsets } = computeVisibleRange(vlist.items, vlist.itemHeight, 0, Number.MAX_SAFE_INTEGER, 0);
+                        let lo = 0;
+                        let hi = vlist.items.length - 1;
+                        while (lo <= hi) {
+                            const mid = (lo + hi) >>> 1;
+                            const start = itemOffsets[mid] ?? 0;
+                            const end = itemOffsets[mid + 1] ?? start;
+                            if (yInContent < start) {
+                                hi = mid - 1;
+                            }
+                            else if (yInContent >= end) {
+                                lo = mid + 1;
+                            }
+                            else {
+                                return mid;
+                            }
+                        }
+                        return null;
+                    };
+                    if (event.mouseKind === 3) {
+                        const idx0 = computeIndex();
+                        if (idx0 !== null) {
+                            const idx = Math.max(0, Math.min(vlist.items.length - 1, idx0));
+                            const prev = state.selectedIndex;
+                            this.virtualListStore.set(targetId, { selectedIndex: idx });
+                            this.pressedVirtualList = Object.freeze({ id: targetId, index: idx });
+                            if (idx !== prev)
+                                localNeedsRender = true;
+                        }
+                        else {
+                            this.pressedVirtualList = null;
+                        }
+                    }
+                    else {
+                        const idx0 = computeIndex();
+                        const pressed = this.pressedVirtualList;
+                        this.pressedVirtualList = null;
+                        if (idx0 !== null && pressed && pressed.id === targetId) {
+                            const idx = Math.max(0, Math.min(vlist.items.length - 1, idx0));
+                            if (idx === pressed.index) {
+                                if (vlist.onSelect) {
+                                    const item = vlist.items[idx];
+                                    if (item !== undefined)
+                                        vlist.onSelect(item, idx);
+                                }
+                                localNeedsRender = true;
+                            }
+                        }
+                    }
+                }
+                else if (event.mouseKind === 4) {
+                    this.pressedVirtualList = null;
+                }
+            }
+            else if (event.mouseKind === 4) {
+                this.pressedVirtualList = null;
+            }
+        }
+        const res = event.kind === "key"
+            ? routeKeyWithZones(event, {
+                focusedId: this.focusState.focusedId,
+                activeZoneId: this.focusState.activeZoneId,
+                focusList: this.focusList,
+                zones: this.focusState.zones,
+                traps: this.traps,
+                trapStack: this.focusState.trapStack,
+                enabledById,
+                pressableIds: this.pressableIds,
+            })
+            : event.kind === "mouse"
+                ? routeMouse(event, {
+                    pressedId: this.pressedId,
+                    hitTestTargetId: mouseTargetId,
+                    enabledById,
+                    pressableIds: this.pressableIds,
+                })
+                : EMPTY_ROUTING;
+        if (res.nextPressedId !== undefined)
+            this.pressedId = res.nextPressedId;
+        if (res.nextZoneId !== undefined) {
+            this.focusState = Object.freeze({ ...this.focusState, activeZoneId: res.nextZoneId ?? null });
+        }
+        if (res.nextFocusedId !== undefined) {
+            const nextFocused = res.nextFocusedId;
+            let nextZoneId = this.focusState.activeZoneId;
+            if (nextFocused !== null) {
+                for (const [zoneId, zone] of this.focusState.zones) {
+                    if (zone.focusableIds.includes(nextFocused)) {
+                        nextZoneId = zoneId;
+                        break;
+                    }
+                }
+            }
+            const nextLastFocusedByZone = new Map(this.focusState.lastFocusedByZone);
+            if (nextFocused !== null && nextZoneId !== null) {
+                nextLastFocusedByZone.set(nextZoneId, nextFocused);
+            }
+            this.focusState = Object.freeze({
+                ...this.focusState,
+                focusedId: nextFocused,
+                activeZoneId: nextZoneId,
+                lastFocusedByZone: nextLastFocusedByZone,
+            });
+        }
+        const didFocusChange = this.focusState.focusedId !== prevFocusedId;
+        const needsRender = didFocusChange || this.pressedId !== prevPressedId || localNeedsRender;
+        if (didFocusChange && prevFocusedId !== null) {
+            const prevInput = this.inputById.get(prevFocusedId);
+            if (prevInput?.onBlur)
+                prevInput.onBlur();
+        }
+        if (res.action) {
+            if (res.action.action === "press") {
+                const btn = this.buttonById.get(res.action.id);
+                if (btn?.onPress)
+                    btn.onPress();
+            }
+            return Object.freeze({ needsRender, action: res.action });
+        }
+        // Input editing (docs/18): focused enabled Input is the routing target for key/text/paste events.
+        if (event.kind === "key" || event.kind === "text" || event.kind === "paste") {
+            const focusedId = this.focusState.focusedId;
+            if (focusedId !== null && enabledById.get(focusedId) === true) {
+                const meta = this.inputById.get(focusedId);
+                if (meta) {
+                    const instanceId = meta.instanceId;
+                    const value = this.inputWorkingValueByInstanceId.get(instanceId) ?? meta.value;
+                    const cursor = this.inputCursorByInstanceId.get(instanceId) ?? value.length;
+                    const edit = applyInputEditEvent(event, { id: focusedId, value, cursor });
+                    if (edit) {
+                        this.inputWorkingValueByInstanceId.set(instanceId, edit.nextValue);
+                        this.inputCursorByInstanceId.set(instanceId, edit.nextCursor);
+                        if (edit.action) {
+                            if (meta.onInput)
+                                meta.onInput(edit.action.value, edit.action.cursor);
+                            return Object.freeze({ needsRender, action: edit.action });
+                        }
+                    }
+                }
+            }
+        }
+        return Object.freeze({ needsRender });
+    }
+    /**
+     * Execute view function, commit tree, compute layout, and render to drawlist.
+     *
+     * Pipeline:
+     *   1. Call viewFn(snapshot) to get VNode tree
+     *   2. Commit VNode tree (reconciliation, instance allocation)
+     *   3. Compute layout for viewport dimensions
+     *   4. Finalize focus state for committed tree
+     *   5. Render tree to drawlist
+     *   6. Submit drawlist to backend
+     *
+     * @param viewFn - User view function returning VNode tree
+     * @param snapshot - Current application state (read-only)
+     * @param viewport - Terminal dimensions
+     * @param hooks - Lifecycle hooks for render tracking
+     * @returns Success with in-flight promise, or error with code/detail
+     */
+    submitFrame(viewFn, snapshot, viewport, theme, hooks, plan = { commit: true, layout: true, checkLayoutStability: true }) {
+        if (!isI32NonNegative(viewport.cols) || !isI32NonNegative(viewport.rows)) {
+            return {
+                ok: false,
+                code: "ZRUI_INVALID_PROPS",
+                detail: `viewport must be int32 cols/rows >= 0 (got cols=${String(viewport.cols)}, rows=${String(viewport.rows)})`,
+            };
+        }
+        this.builder.reset();
+        let entered = false;
+        try {
+            hooks.enterRender();
+            entered = true;
+            const doCommit = plan.commit || this.committedRoot === null;
+            // Layout is no longer an unconditional consequence of commit. We rerun
+            // layout when explicitly requested (resize/layout dirty), bootstrap lacks
+            // a tree, or committed layout signatures changed.
+            let doLayout = plan.layout || this.layoutTree === null;
+            let commitRes = null;
+            let prevFocusedIdBeforeFinalize = null;
+            const hadRoutingWidgets = this.hadRoutingWidgets;
+            let hasRoutingWidgets = hadRoutingWidgets;
+            let didRoutingRebuild = false;
+            if (doCommit) {
+                const viewToken = PERF_DETAIL_ENABLED ? perfMarkStart("view") : 0;
+                const vnode = viewFn(snapshot);
+                if (PERF_DETAIL_ENABLED)
+                    perfMarkEnd("view", viewToken);
+                const commitToken = PERF_DETAIL_ENABLED ? perfMarkStart("vnode_commit") : 0;
+                const commitRes0 = commitVNodeTree(this.committedRoot, vnode, {
+                    allocator: this.allocator,
+                    composite: {
+                        registry: this.compositeRegistry,
+                        appState: snapshot,
+                        onInvalidate: () => this.requestView(),
+                    },
+                });
+                if (PERF_DETAIL_ENABLED)
+                    perfMarkEnd("vnode_commit", commitToken);
+                if (!commitRes0.ok) {
+                    return { ok: false, code: commitRes0.fatal.code, detail: commitRes0.fatal.detail };
+                }
+                commitRes = commitRes0.value;
+                this.committedRoot = commitRes.root;
+                if (!doLayout && plan.checkLayoutStability) {
+                    // Detect layout-relevant commit changes (including child order changes)
+                    // using per-instance stability signatures.
+                    if (updateLayoutStabilitySignatures(this.committedRoot, this._pooledLayoutSigByInstanceId, this._pooledNextLayoutSigByInstanceId, this._pooledRuntimeStack)) {
+                        doLayout = true;
+                    }
+                }
+                for (const unmountedId of commitRes.unmountedInstanceIds) {
+                    this.inputCursorByInstanceId.delete(unmountedId);
+                    this.inputWorkingValueByInstanceId.delete(unmountedId);
+                    // Composite instances: invalidate stale closures and run effect cleanups.
+                    this.compositeRegistry.incrementGeneration(unmountedId);
+                    this.compositeRegistry.delete(unmountedId);
+                }
+            }
+            if (!this.committedRoot) {
+                return {
+                    ok: false,
+                    code: "ZRUI_INVALID_PROPS",
+                    detail: "widgetRenderer: missing committed root",
+                };
+            }
+            if (doLayout) {
+                if (doCommit) {
+                    // Commit can replace vnode identities; reset cross-frame measure memoization.
+                    this._layoutMeasureCache = new WeakMap();
+                }
+                const layoutToken = perfMarkStart("layout");
+                const layoutRes = layout(this.committedRoot.vnode, 0, 0, viewport.cols, viewport.rows, "column", this._layoutMeasureCache);
+                perfMarkEnd("layout", layoutToken);
+                if (!layoutRes.ok) {
+                    return { ok: false, code: layoutRes.fatal.code, detail: layoutRes.fatal.detail };
+                }
+                const nextLayoutTree = layoutRes.value;
+                this.layoutTree = nextLayoutTree;
+                // Build a fast instanceId->rect index for overlay routing (modal/layer hit testing),
+                // plus an id->rect map for widget-local interactions (scrolling, divider drags).
+                // Uses pooled collections to avoid per-frame allocations.
+                const layoutIndexesToken = PERF_DETAIL_ENABLED ? perfMarkStart("layout_indexes") : 0;
+                buildLayoutRectIndexes(nextLayoutTree, this.committedRoot, this._pooledRectByInstanceId, this._pooledRectById, this._pooledSplitPaneChildRectsById, this._pooledLayoutStack, this._pooledRuntimeStack);
+                if (PERF_DETAIL_ENABLED)
+                    perfMarkEnd("layout_indexes", layoutIndexesToken);
+                this.rectById = this._pooledRectById;
+                this.splitPaneChildRectsById = this._pooledSplitPaneChildRectsById;
+            }
+            if (!this.layoutTree) {
+                return {
+                    ok: false,
+                    code: "ZRUI_INVALID_PROPS",
+                    detail: "widgetRenderer: missing layout tree",
+                };
+            }
+            if (doCommit) {
+                const metaToken = PERF_DETAIL_ENABLED ? perfMarkStart("metadata_collect") : 0;
+                // Single-pass metadata collection using pooled collector (avoids per-frame allocations)
+                const widgetMeta = this._metadataCollector.collect(this.committedRoot);
+                hasRoutingWidgets = widgetMeta.hasRoutingWidgets;
+                prevFocusedIdBeforeFinalize = this.focusState.focusedId;
+                this.focusState = finalizeFocusWithPreCollectedMetadata(this.focusState, widgetMeta.focusableIds, widgetMeta.zones, widgetMeta.traps);
+                this.baseFocusList = widgetMeta.focusableIds;
+                this.baseEnabledById = widgetMeta.enabledById;
+                this.focusList = widgetMeta.focusableIds;
+                this.enabledById = widgetMeta.enabledById;
+                this.pressableIds = widgetMeta.pressableIds;
+                this.inputById = widgetMeta.inputById;
+                this.traps = widgetMeta.traps;
+                if (PERF_DETAIL_ENABLED)
+                    perfMarkEnd("metadata_collect", metaToken);
+            }
+            if (doCommit && (hasRoutingWidgets || hadRoutingWidgets)) {
+                didRoutingRebuild = true;
+                this.hadRoutingWidgets = hasRoutingWidgets;
+                const routingToken = PERF_DETAIL_ENABLED ? perfMarkStart("routing_rebuild") : 0;
+                const getRectForInstance = (instanceId) => this._pooledRectByInstanceId.get(instanceId) ?? ZERO_RECT;
+                // Rebuild complex widget metadata maps (id -> props) for routing.
+                // Use pooled Sets to track previous IDs for GC cleanup detection (avoids per-frame allocations).
+                this._pooledPrevTreeIds.clear();
+                for (const k of this.treeById.keys())
+                    this._pooledPrevTreeIds.add(k);
+                this._pooledPrevDropdownIds.clear();
+                for (const k of this.dropdownById.keys())
+                    this._pooledPrevDropdownIds.add(k);
+                this._pooledPrevTreeStoreIds.clear();
+                for (const k of this.treeById.keys())
+                    this._pooledPrevTreeStoreIds.add(k);
+                for (const k of this.filePickerById.keys())
+                    this._pooledPrevTreeStoreIds.add(k);
+                for (const k of this.fileTreeExplorerById.keys())
+                    this._pooledPrevTreeStoreIds.add(k);
+                this._pooledPrevCommandPaletteIds.clear();
+                for (const k of this.commandPaletteById.keys())
+                    this._pooledPrevCommandPaletteIds.add(k);
+                this._pooledPrevToolApprovalDialogIds.clear();
+                for (const k of this.toolApprovalDialogById.keys())
+                    this._pooledPrevToolApprovalDialogIds.add(k);
+                this._pooledPrevDiffViewerIds.clear();
+                for (const k of this.diffViewerById.keys())
+                    this._pooledPrevDiffViewerIds.add(k);
+                this._pooledPrevLogsConsoleIds.clear();
+                for (const k of this.logsConsoleById.keys())
+                    this._pooledPrevLogsConsoleIds.add(k);
+                this.virtualListById.clear();
+                this.buttonById.clear();
+                this.tableById.clear();
+                this.treeById.clear();
+                this.dropdownById.clear();
+                this.selectById.clear();
+                this.checkboxById.clear();
+                this.radioGroupById.clear();
+                this.commandPaletteById.clear();
+                this.filePickerById.clear();
+                this.fileTreeExplorerById.clear();
+                this.splitPaneById.clear();
+                this.codeEditorById.clear();
+                this.diffViewerById.clear();
+                this.toolApprovalDialogById.clear();
+                this.logsConsoleById.clear();
+                // Rebuild overlay routing state using pooled collections.
+                this.layerRegistry.clear();
+                this._pooledCloseOnEscape.clear();
+                this._pooledCloseOnBackdrop.clear();
+                this._pooledOnClose.clear();
+                this._pooledDropdownStack.length = 0;
+                this._pooledToastContainers.length = 0;
+                let overlaySeq = 0;
+                this._pooledRuntimeStack.length = 0;
+                this._pooledRuntimeStack.push(this.committedRoot);
+                while (this._pooledRuntimeStack.length > 0) {
+                    const cur = this._pooledRuntimeStack.pop();
+                    if (!cur)
+                        continue;
+                    const v = cur.vnode;
+                    switch (v.kind) {
+                        case "dropdown": {
+                            const p = v.props;
+                            this.dropdownById.set(p.id, p);
+                            this._pooledDropdownStack.push(p.id);
+                            break;
+                        }
+                        case "button": {
+                            const p = v.props;
+                            this.buttonById.set(p.id, p);
+                            break;
+                        }
+                        case "virtualList": {
+                            const p = v.props;
+                            this.virtualListById.set(p.id, p);
+                            break;
+                        }
+                        case "table": {
+                            const p = v.props;
+                            this.tableById.set(p.id, p);
+                            break;
+                        }
+                        case "tree": {
+                            const p = v.props;
+                            this.treeById.set(p.id, p);
+                            break;
+                        }
+                        case "commandPalette": {
+                            const p = v.props;
+                            this.commandPaletteById.set(p.id, p);
+                            break;
+                        }
+                        case "filePicker": {
+                            const p = v.props;
+                            this.filePickerById.set(p.id, p);
+                            break;
+                        }
+                        case "fileTreeExplorer": {
+                            const p = v.props;
+                            this.fileTreeExplorerById.set(p.id, p);
+                            break;
+                        }
+                        case "splitPane": {
+                            const p = v.props;
+                            this.splitPaneById.set(p.id, p);
+                            break;
+                        }
+                        case "codeEditor": {
+                            const p = v.props;
+                            this.codeEditorById.set(p.id, p);
+                            break;
+                        }
+                        case "diffViewer": {
+                            const p = v.props;
+                            this.diffViewerById.set(p.id, p);
+                            break;
+                        }
+                        case "toolApprovalDialog": {
+                            const p = v.props;
+                            this.toolApprovalDialogById.set(p.id, p);
+                            break;
+                        }
+                        case "logsConsole": {
+                            const p = v.props;
+                            this.logsConsoleById.set(p.id, p);
+                            break;
+                        }
+                        case "toastContainer": {
+                            const p = v.props;
+                            const rect = getRectForInstance(cur.instanceId);
+                            this._pooledToastContainers.push({ rect, props: p });
+                            break;
+                        }
+                        case "modal": {
+                            const p = v.props;
+                            const id = typeof p.id === "string" ? p.id : null;
+                            if (id) {
+                                const rect = getRectForInstance(cur.instanceId);
+                                const zIndex = overlaySeq++;
+                                const canClose = p.closeOnEscape !== false;
+                                this._pooledCloseOnEscape.set(id, canClose);
+                                this._pooledCloseOnBackdrop.set(id, p.closeOnBackdrop !== false);
+                                const cb = typeof p.onClose === "function" ? p.onClose : undefined;
+                                if (cb)
+                                    this._pooledOnClose.set(id, cb);
+                                const layerInput = {
+                                    id,
+                                    rect,
+                                    backdrop: p.backdrop === "none" || p.backdrop === "dim" || p.backdrop === "opaque"
+                                        ? p.backdrop
+                                        : "dim",
+                                    modal: true,
+                                    closeOnEscape: canClose,
+                                    zIndex,
+                                };
+                                this.layerRegistry.register(cb ? { ...layerInput, onClose: cb } : layerInput);
+                            }
+                            break;
+                        }
+                        case "layer": {
+                            const p = v.props;
+                            const id = typeof p.id === "string" ? p.id : null;
+                            if (id) {
+                                const rect = getRectForInstance(cur.instanceId);
+                                const baseZ = typeof p.zIndex === "number" && Number.isFinite(p.zIndex)
+                                    ? Math.trunc(p.zIndex)
+                                    : null;
+                                const zIndex = baseZ !== null ? baseZ * 1_000_000 + overlaySeq++ : overlaySeq++;
+                                const modal = p.modal === true;
+                                const canClose = p.closeOnEscape !== false;
+                                this._pooledCloseOnEscape.set(id, canClose);
+                                this._pooledCloseOnBackdrop.set(id, false);
+                                const cb = typeof p.onClose === "function" ? p.onClose : undefined;
+                                if (cb)
+                                    this._pooledOnClose.set(id, cb);
+                                const layerInput = {
+                                    id,
+                                    rect,
+                                    backdrop: p.backdrop === "none" || p.backdrop === "dim" || p.backdrop === "opaque"
+                                        ? p.backdrop
+                                        : "none",
+                                    modal,
+                                    closeOnEscape: canClose,
+                                    zIndex,
+                                };
+                                this.layerRegistry.register(cb ? { ...layerInput, onClose: cb } : layerInput);
+                            }
+                            break;
+                        }
+                        case "select": {
+                            this.selectById.set(v.props.id, v.props);
+                            break;
+                        }
+                        case "checkbox": {
+                            this.checkboxById.set(v.props.id, v.props);
+                            break;
+                        }
+                        case "radioGroup": {
+                            this.radioGroupById.set(v.props.id, v.props);
+                            break;
+                        }
+                        default:
+                            break;
+                    }
+                    for (let i = cur.children.length - 1; i >= 0; i--) {
+                        const c = cur.children[i];
+                        if (c)
+                            this._pooledRuntimeStack.push(c);
+                    }
+                }
+                this.layerStack = Object.freeze(this.layerRegistry.getAll().map((l) => l.id));
+                this.closeOnEscapeByLayerId = this._pooledCloseOnEscape;
+                this.closeOnBackdropByLayerId = this._pooledCloseOnBackdrop;
+                this.onCloseByLayerId = this._pooledOnClose;
+                this.dropdownStack = Object.freeze(this._pooledDropdownStack.slice());
+                this.toastContainers = Object.freeze(this._pooledToastContainers.slice());
+                // Build toast action maps using pooled collections.
+                this._pooledToastActionByFocusId.clear();
+                this._pooledToastFocusableActionIds.length = 0;
+                for (const tc of this._pooledToastContainers) {
+                    if (!tc)
+                        continue;
+                    const rect = tc.rect;
+                    if (rect.w <= 0 || rect.h <= 0)
+                        continue;
+                    const toasts = tc.props.toasts;
+                    const maxVisible = tc.props.maxVisible ?? 5;
+                    const maxByHeight = Math.floor(rect.h / TOAST_HEIGHT);
+                    const visibleCount = Math.min(toasts.length, maxVisible, maxByHeight);
+                    for (let i = 0; i < visibleCount; i++) {
+                        const toast = toasts[i];
+                        if (!toast?.action)
+                            continue;
+                        const fid = getToastActionFocusId(toast.id);
+                        this._pooledToastActionByFocusId.set(fid, toast.action.onAction);
+                        this._pooledToastFocusableActionIds.push(fid);
+                    }
+                }
+                this.toastActionByFocusId = this._pooledToastActionByFocusId;
+                this.toastFocusableActionIds = Object.freeze(this._pooledToastFocusableActionIds.slice());
+                const baseFocusList = this.baseFocusList;
+                const baseEnabledById = this.baseEnabledById;
+                this.focusList = baseFocusList;
+                this.enabledById = baseEnabledById;
+                if (this._pooledToastFocusableActionIds.length > 0) {
+                    this.focusList = Object.freeze([...baseFocusList, ...this.toastFocusableActionIds]);
+                    const enabled = new Map(baseEnabledById);
+                    for (const id of this.toastFocusableActionIds)
+                        enabled.set(id, true);
+                    this.enabledById = enabled;
+                }
+                const preferredToastFocus = prevFocusedIdBeforeFinalize !== null &&
+                    parseToastActionFocusId(prevFocusedIdBeforeFinalize) !== null
+                    ? prevFocusedIdBeforeFinalize
+                    : null;
+                if (preferredToastFocus && this._pooledToastActionByFocusId.has(preferredToastFocus)) {
+                    this.focusState = Object.freeze({
+                        ...this.focusState,
+                        focusedId: preferredToastFocus,
+                        activeZoneId: null,
+                    });
+                }
+                else {
+                    const curFocus = this.focusState.focusedId;
+                    if (curFocus !== null &&
+                        parseToastActionFocusId(curFocus) !== null &&
+                        !this._pooledToastActionByFocusId.has(curFocus)) {
+                        this.focusState = Object.freeze({
+                            ...this.focusState,
+                            focusedId: null,
+                            activeZoneId: null,
+                        });
+                    }
+                }
+                rebuildRenderCaches({
+                    tableById: this.tableById,
+                    logsConsoleById: this.logsConsoleById,
+                    diffViewerById: this.diffViewerById,
+                    codeEditorById: this.codeEditorById,
+                    tableRenderCacheById: this.tableRenderCacheById,
+                    logsConsoleRenderCacheById: this.logsConsoleRenderCacheById,
+                    diffRenderCacheById: this.diffRenderCacheById,
+                    codeEditorRenderCacheById: this.codeEditorRenderCacheById,
+                    emptyStringArray: EMPTY_STRING_ARRAY,
+                });
+                if (PERF_DETAIL_ENABLED)
+                    perfMarkEnd("routing_rebuild", routingToken);
+            }
+            else if (doLayout && hadRoutingWidgets) {
+                // Layout-only turns (e.g. resize) keep the committed widget maps intact.
+                // Rebuild only rect-dependent overlay/ toast routing state.
+                const routingToken = PERF_DETAIL_ENABLED ? perfMarkStart("routing_rebuild") : 0;
+                const getRectForInstance = (instanceId) => this._pooledRectByInstanceId.get(instanceId) ?? ZERO_RECT;
+                this.layerRegistry.clear();
+                this._pooledCloseOnEscape.clear();
+                this._pooledCloseOnBackdrop.clear();
+                this._pooledOnClose.clear();
+                this._pooledToastContainers.length = 0;
+                let overlaySeq = 0;
+                this._pooledRuntimeStack.length = 0;
+                this._pooledRuntimeStack.push(this.committedRoot);
+                while (this._pooledRuntimeStack.length > 0) {
+                    const cur = this._pooledRuntimeStack.pop();
+                    if (!cur)
+                        continue;
+                    const v = cur.vnode;
+                    switch (v.kind) {
+                        case "toastContainer": {
+                            const p = v.props;
+                            const rect = getRectForInstance(cur.instanceId);
+                            this._pooledToastContainers.push({ rect, props: p });
+                            break;
+                        }
+                        case "modal": {
+                            const p = v.props;
+                            const id = typeof p.id === "string" ? p.id : null;
+                            if (id) {
+                                const rect = getRectForInstance(cur.instanceId);
+                                const zIndex = overlaySeq++;
+                                const canClose = p.closeOnEscape !== false;
+                                this._pooledCloseOnEscape.set(id, canClose);
+                                this._pooledCloseOnBackdrop.set(id, p.closeOnBackdrop !== false);
+                                const cb = typeof p.onClose === "function" ? p.onClose : undefined;
+                                if (cb)
+                                    this._pooledOnClose.set(id, cb);
+                                const layerInput = {
+                                    id,
+                                    rect,
+                                    backdrop: p.backdrop === "none" || p.backdrop === "dim" || p.backdrop === "opaque"
+                                        ? p.backdrop
+                                        : "dim",
+                                    modal: true,
+                                    closeOnEscape: canClose,
+                                    zIndex,
+                                };
+                                this.layerRegistry.register(cb ? { ...layerInput, onClose: cb } : layerInput);
+                            }
+                            break;
+                        }
+                        case "layer": {
+                            const p = v.props;
+                            const id = typeof p.id === "string" ? p.id : null;
+                            if (id) {
+                                const rect = getRectForInstance(cur.instanceId);
+                                const baseZ = typeof p.zIndex === "number" && Number.isFinite(p.zIndex)
+                                    ? Math.trunc(p.zIndex)
+                                    : null;
+                                const zIndex = baseZ !== null ? baseZ * 1_000_000 + overlaySeq++ : overlaySeq++;
+                                const modal = p.modal === true;
+                                const canClose = p.closeOnEscape !== false;
+                                this._pooledCloseOnEscape.set(id, canClose);
+                                this._pooledCloseOnBackdrop.set(id, false);
+                                const cb = typeof p.onClose === "function" ? p.onClose : undefined;
+                                if (cb)
+                                    this._pooledOnClose.set(id, cb);
+                                const layerInput = {
+                                    id,
+                                    rect,
+                                    backdrop: p.backdrop === "none" || p.backdrop === "dim" || p.backdrop === "opaque"
+                                        ? p.backdrop
+                                        : "none",
+                                    modal,
+                                    closeOnEscape: canClose,
+                                    zIndex,
+                                };
+                                this.layerRegistry.register(cb ? { ...layerInput, onClose: cb } : layerInput);
+                            }
+                            break;
+                        }
+                        default:
+                            break;
+                    }
+                    for (let i = cur.children.length - 1; i >= 0; i--) {
+                        const c = cur.children[i];
+                        if (c)
+                            this._pooledRuntimeStack.push(c);
+                    }
+                }
+                this.layerStack = Object.freeze(this.layerRegistry.getAll().map((l) => l.id));
+                this.closeOnEscapeByLayerId = this._pooledCloseOnEscape;
+                this.closeOnBackdropByLayerId = this._pooledCloseOnBackdrop;
+                this.onCloseByLayerId = this._pooledOnClose;
+                this.toastContainers = Object.freeze(this._pooledToastContainers.slice());
+                this._pooledToastActionByFocusId.clear();
+                this._pooledToastFocusableActionIds.length = 0;
+                for (const tc of this._pooledToastContainers) {
+                    if (!tc)
+                        continue;
+                    const rect = tc.rect;
+                    if (rect.w <= 0 || rect.h <= 0)
+                        continue;
+                    const toasts = tc.props.toasts;
+                    const maxVisible = tc.props.maxVisible ?? 5;
+                    const maxByHeight = Math.floor(rect.h / TOAST_HEIGHT);
+                    const visibleCount = Math.min(toasts.length, maxVisible, maxByHeight);
+                    for (let i = 0; i < visibleCount; i++) {
+                        const toast = toasts[i];
+                        if (!toast?.action)
+                            continue;
+                        const fid = getToastActionFocusId(toast.id);
+                        this._pooledToastActionByFocusId.set(fid, toast.action.onAction);
+                        this._pooledToastFocusableActionIds.push(fid);
+                    }
+                }
+                this.toastActionByFocusId = this._pooledToastActionByFocusId;
+                this.toastFocusableActionIds = Object.freeze(this._pooledToastFocusableActionIds.slice());
+                const baseFocusList = this.baseFocusList;
+                const baseEnabledById = this.baseEnabledById;
+                this.focusList = baseFocusList;
+                this.enabledById = baseEnabledById;
+                if (this._pooledToastFocusableActionIds.length > 0) {
+                    this.focusList = Object.freeze([...baseFocusList, ...this.toastFocusableActionIds]);
+                    const enabled = new Map(baseEnabledById);
+                    for (const id of this.toastFocusableActionIds)
+                        enabled.set(id, true);
+                    this.enabledById = enabled;
+                }
+                const curFocus = this.focusState.focusedId;
+                if (curFocus !== null &&
+                    parseToastActionFocusId(curFocus) !== null &&
+                    !this._pooledToastActionByFocusId.has(curFocus)) {
+                    this.focusState = Object.freeze({
+                        ...this.focusState,
+                        focusedId: null,
+                        activeZoneId: null,
+                    });
+                }
+                if (PERF_DETAIL_ENABLED)
+                    perfMarkEnd("routing_rebuild", routingToken);
+            }
+            if (doCommit && !didRoutingRebuild) {
+                this.hadRoutingWidgets = hasRoutingWidgets;
+            }
+            if (doCommit && didRoutingRebuild) {
+                // Precompute flattened file trees for filePicker/fileTreeExplorer to avoid per-frame allocations.
+                for (const fp of this.filePickerById.values()) {
+                    const s = this.treeStore.get(fp.id);
+                    if (!readFileNodeFlatCache(s, fp.data, fp.expandedPaths)) {
+                        const next = flattenTree(fp.data, fileNodeGetKey, fileNodeGetChildren, fileNodeHasChildren, fp.expandedPaths);
+                        this.treeStore.set(fp.id, {
+                            flatCache: makeFileNodeFlatCache(fp.data, fp.expandedPaths, next),
+                        });
+                    }
+                }
+                for (const fte of this.fileTreeExplorerById.values()) {
+                    const s = this.treeStore.get(fte.id);
+                    if (!readFileNodeFlatCache(s, fte.data, fte.expanded)) {
+                        const next = flattenTree(fte.data, fileNodeGetKey, fileNodeGetChildren, fileNodeHasChildren, fte.expanded);
+                        this.treeStore.set(fte.id, {
+                            flatCache: makeFileNodeFlatCache(fte.data, fte.expanded, next),
+                        });
+                    }
+                }
+                // Garbage collect per-dropdown routing state for dropdowns that were removed.
+                for (const prevDropdownId of this._pooledPrevDropdownIds) {
+                    if (!this.dropdownById.has(prevDropdownId)) {
+                        this.dropdownSelectedIndexById.delete(prevDropdownId);
+                    }
+                }
+                // Garbage collect per-tree lazy-loading caches for trees that were removed.
+                for (const prevTreeId of this._pooledPrevTreeIds) {
+                    if (!this.treeById.has(prevTreeId)) {
+                        this.loadedTreeChildrenByTreeId.delete(prevTreeId);
+                        const prefix = `${prevTreeId}\u0000`;
+                        for (const tokenKey of this.treeLoadTokenByTreeAndKey.keys()) {
+                            if (tokenKey.startsWith(prefix))
+                                this.treeLoadTokenByTreeAndKey.delete(tokenKey);
+                        }
+                    }
+                }
+                // Garbage collect treeStore entries for tree-like widgets that were removed.
+                for (const prevId of this._pooledPrevTreeStoreIds) {
+                    if (!this.treeById.has(prevId) &&
+                        !this.filePickerById.has(prevId) &&
+                        !this.fileTreeExplorerById.has(prevId)) {
+                        this.treeStore.delete(prevId);
+                    }
+                }
+                // Garbage collect command palette async state for palettes that were removed.
+                for (const prevId of this._pooledPrevCommandPaletteIds) {
+                    if (!this.commandPaletteById.has(prevId)) {
+                        this.commandPaletteItemsById.delete(prevId);
+                        this.commandPaletteLoadingById.delete(prevId);
+                        this.commandPaletteFetchTokenById.delete(prevId);
+                        this.commandPaletteLastQueryById.delete(prevId);
+                        this.commandPaletteLastSourcesRefById.delete(prevId);
+                    }
+                }
+                for (const prevId of this._pooledPrevToolApprovalDialogIds) {
+                    if (!this.toolApprovalDialogById.has(prevId)) {
+                        this.toolApprovalFocusedActionById.delete(prevId);
+                    }
+                }
+                for (const prevId of this._pooledPrevDiffViewerIds) {
+                    if (!this.diffViewerById.has(prevId)) {
+                        this.diffViewerFocusedHunkById.delete(prevId);
+                        this.diffViewerExpandedHunksById.delete(prevId);
+                    }
+                }
+                for (const prevId of this._pooledPrevLogsConsoleIds) {
+                    if (!this.logsConsoleById.has(prevId)) {
+                        this.logsConsoleLastGTimeById.delete(prevId);
+                    }
+                }
+            }
+            if (doCommit) {
+                // Reset per-commit working values to the committed props.value, and normalize cursor (docs/18).
+                for (const meta of this.inputById.values()) {
+                    const instanceId = meta.instanceId;
+                    this.inputWorkingValueByInstanceId.set(instanceId, meta.value);
+                    const prev = this.inputCursorByInstanceId.get(instanceId);
+                    const init = prev === undefined ? meta.value.length : prev;
+                    this.inputCursorByInstanceId.set(instanceId, normalizeInputCursor(meta.value, init));
+                }
+            }
+            if ((doCommit || doLayout) && this.pressedId !== null) {
+                if (this.enabledById.get(this.pressedId) !== true) {
+                    this.pressedId = null;
+                }
+            }
+            // Build cursor info for v2 protocol
+            const cursorInfo = this.useV2Cursor
+                ? {
+                    cursorByInstanceId: this.inputCursorByInstanceId,
+                    shape: this.cursorShape,
+                    blink: this.cursorBlink,
+                }
+                : undefined;
+            if (doCommit) {
+                kickoffCommandPaletteItemFetches(this.commandPaletteById, this.commandPaletteItemsById, this.commandPaletteLoadingById, this.commandPaletteFetchTokenById, this.commandPaletteLastQueryById, this.commandPaletteLastSourcesRefById, this.requestRender);
+            }
+            const renderToken = perfMarkStart("render");
+            renderToDrawlist({
+                tree: this.committedRoot,
+                layout: this.layoutTree,
+                viewport,
+                focusState: this.focusState,
+                builder: this.builder,
+                theme,
+                cursorInfo,
+                virtualListStore: this.virtualListStore,
+                tableStore: this.tableStore,
+                treeStore: this.treeStore,
+                loadedTreeChildrenById: this.loadedTreeChildrenByTreeId,
+                commandPaletteItemsById: this.commandPaletteItemsById,
+                commandPaletteLoadingById: this.commandPaletteLoadingById,
+                toolApprovalFocusedActionById: this.toolApprovalFocusedActionById,
+                diffViewerFocusedHunkById: this.diffViewerFocusedHunkById,
+                diffViewerExpandedHunksById: this.diffViewerExpandedHunksById,
+                layoutIndex: this._pooledRectByInstanceId,
+                idRectIndex: this._pooledRectById,
+                tableRenderCacheById: this.tableRenderCacheById,
+                logsConsoleRenderCacheById: this.logsConsoleRenderCacheById,
+                diffRenderCacheById: this.diffRenderCacheById,
+                codeEditorRenderCacheById: this.codeEditorRenderCacheById,
+            });
+            perfMarkEnd("render", renderToken);
+            const buildToken = perfMarkStart("drawlist_build");
+            const built = this.builder.build();
+            perfMarkEnd("drawlist_build", buildToken);
+            if (!built.ok) {
+                return {
+                    ok: false,
+                    code: "ZRUI_DRAWLIST_BUILD_ERROR",
+                    detail: `${built.error.code}: ${built.error.detail}`,
+                };
+            }
+            // Render hooks are for preventing re-entrant app API calls during user render.
+            hooks.exitRender();
+            entered = false;
+            // Run composite effects after a successful commit+render build.
+            if (commitRes) {
+                const effectsToken = PERF_DETAIL_ENABLED ? perfMarkStart("effects") : 0;
+                try {
+                    runPendingEffects(commitRes.pendingEffects);
+                }
+                catch (e) {
+                    return { ok: false, code: "ZRUI_USER_CODE_THROW", detail: describeThrown(e) };
+                }
+                finally {
+                    if (PERF_DETAIL_ENABLED)
+                        perfMarkEnd("effects", effectsToken);
+                }
+            }
+            try {
+                const backendToken = PERF_ENABLED ? perfMarkStart("backend_request") : 0;
+                try {
+                    const inFlight = this.backend.requestFrame(built.bytes);
+                    return { ok: true, inFlight };
+                }
+                finally {
+                    if (PERF_ENABLED)
+                        perfMarkEnd("backend_request", backendToken);
+                }
+            }
+            catch (e) {
+                return { ok: false, code: "ZRUI_BACKEND_ERROR", detail: describeThrown(e) };
+            }
+        }
+        catch (e) {
+            return { ok: false, code: "ZRUI_USER_CODE_THROW", detail: describeThrown(e) };
+        }
+        finally {
+            if (entered)
+                hooks.exitRender();
+        }
+    }
+}
+//# sourceMappingURL=widgetRenderer.js.map