@flyingrobots/bijou-tui 1.8.0 → 3.0.0

package/dist/app-frame.js

@@ -4,25 +4,22 @@
  * Provides tabs, pane focus/scroll isolation, shell key handling, help,
  * panel-scoped overlay context, and optional frame-level command palette.
  */
-import { resolveSafeCtx } from '@flyingrobots/bijou';
-import { helpShort, helpView } from './help.js';
-import { createKeyMap, formatKeyCombo, } from './keybindings.js';
-import { isKeyMsg, isMouseMsg, isResizeMsg, QUIT } from './types.js';
-import { composite, modal } from './overlay.js';
+import { createSurface, parseAnsiToSurface, resolveSafeCtx } from '@flyingrobots/bijou';
+import { helpView } from './help.js';
+import { isKeyMsg, isMouseMsg, isResizeMsg } from './types.js';
+import { modal } from './overlay.js';
 import { fitBlock } from './layout-utils.js';
-import { TRANSITION_SHADERS } from './transition-shaders.js';
-import { commandPalette, commandPaletteKeyMap, createCommandPaletteState, cpFilter, cpFocusNext, cpFocusPrev, cpPageDown, cpPageUp, cpSelectedItem, } from './command-palette.js';
-import { grid, gridLayout } from './grid.js';
-import { createFocusAreaState, focusArea, focusAreaPageDown, focusAreaPageUp, focusAreaScrollBy, focusAreaScrollByX, focusAreaScrollToBottom, focusAreaScrollToTop, focusAreaScrollTo, focusAreaScrollToX, } from './focus-area.js';
-import { splitPane, splitPaneLayout } from './split-pane.js';
-import { createPanelVisibilityState, createPanelMaximizeState, toggleMinimized, restorePane, isMinimized, toggleMaximize, } from './panel-state.js';
-import { createPanelDockState, movePaneInContainer, resolveChildOrder, findPaneContainer, getNodeId, } from './panel-dock.js';
-import { restoreLayoutState, } from './layout-preset.js';
-import { clipToWidth, tokenizeAnsi, visibleLength } from './viewport.js';
-import { EASINGS } from './spring.js';
-import { timeline } from './timeline.js';
-const PAGE_MSG_TOKEN = Symbol('app-frame-page-msg');
-const FRAME_MSG_TOKEN = Symbol('app-frame-frame-msg');
+import { commandPalette, commandPaletteKeyMap, } from './command-palette.js';
+import { restoreLayoutState } from './layout-preset.js';
+import { isFrameScopedMsg, isPageScopedMsg, wrapCmdForPage, emitMsg, emitMsgForPage, } from './app-frame-types.js';
+import { createFrameKeyMap, frameBodyRect, mergeBindingSources, } from './app-frame-utils.js';
+import { renderHeaderLine, renderHelpLine, renderPageContent, renderMaximizedPane, renderTransition, } from './app-frame-render.js';
+import { applyFrameAction, syncPageFrameState, } from './app-frame-actions.js';
+import { handlePaletteKey, openCommandPalette, } from './app-frame-palette.js';
+import { visibleLength } from './viewport.js';
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
 /**
  * Create a fully framed TEA app shell.
  */
@@ -71,6 +68,7 @@ export function createFramedApp(options) {
                 helpOpen: false,
                 transitionProgress: 1,
                 transitionGeneration: 0,
+                transitionFrame: 0,
                 minimizedByPage: {},
                 maximizedPaneByPage: {},
                 dockStateByPage: {},
@@ -113,6 +111,7 @@ export function createFramedApp(options) {
                             return [{
                                     ...model,
                                     transitionProgress: 1,
+                                    transitionFrame: 0,
                                     previousPageId: undefined,
                                     activeTransition: undefined,
                                     transitionStartMs: undefined,
@@ -123,11 +122,16 @@ export function createFramedApp(options) {
                         return [{
                                 ...model,
                                 transitionProgress: progress,
+                                transitionFrame: model.transitionFrame + 1,
                                 transitionTimelineState: state,
                             }, []];
                     }
                     // Fallback for non-timeline transitions (backward compat)
-                    return [{ ...model, transitionProgress: action.progress }, []];
+                    return [{
+                            ...model,
+                            transitionProgress: action.progress,
+                            transitionFrame: model.transitionFrame + 1,
+                        }, []];
                 }
                 if (action.type === 'transition-complete') {
                     if (action.generation !== model.transitionGeneration)
@@ -135,6 +139,7 @@ export function createFramedApp(options) {
                     return [{
                             ...model,
                             transitionProgress: 1,
+                            transitionFrame: 0,
                             previousPageId: undefined,
                             activeTransition: undefined,
                             transitionStartMs: undefined,
@@ -142,7 +147,7 @@ export function createFramedApp(options) {
                             transitionTimelineState: undefined,
                         }, []];
                 }
-                return applyFrameAction(action, model, frameKeys, options, pagesById);
+                return applyFrameAction(action, model, options, pagesById);
             }
             if (isResizeMsg(msg)) {
                 return [{
@@ -153,7 +158,7 @@ export function createFramedApp(options) {
             }
             if (isKeyMsg(msg)) {
                 if (model.commandPalette != null) {
-                    return handlePaletteKey(msg, model, paletteKeys, frameKeys, options, pagesById);
+                    return handlePaletteKey(msg, model, paletteKeys, options, pagesById);
                 }
                 // Help acts as a modal layer when open: only close keys are handled.
                 if (model.helpOpen) {
@@ -164,7 +169,11 @@ export function createFramedApp(options) {
                 }
                 const frameAction = frameKeys.handle(msg);
                 if (frameAction !== undefined) {
-                    return applyFrameAction(frameAction, model, frameKeys, options, pagesById);
+                    // Handle palette opening here since applyFrameAction doesn't have access to palette deps
+                    if (frameAction.type === 'open-palette' && options.enableCommandPalette) {
+                        return [openCommandPalette(model, frameKeys, options, pagesById), []];
+                    }
+                    return applyFrameAction(frameAction, model, options, pagesById);
                 }
                 const globalAction = options.globalKeys?.handle(msg);
                 if (globalAction !== undefined) {
@@ -188,10 +197,22 @@ export function createFramedApp(options) {
                 return [model, []];
             const targetMsg = scoped?.msg ?? msg;
             const pageModel = model.pageModels[targetPageId];
-            const [nextPageModel, cmds] = targetPage.update(targetMsg, pageModel);
+            const updateResult = targetPage.update(targetMsg, pageModel);
+            let nextPageModel = pageModel; // Default to current
+            let cmds = [];
+            if (updateResult !== undefined && updateResult !== null) {
+                if (Array.isArray(updateResult)) {
+                    nextPageModel = (updateResult[0] ?? pageModel);
+                    cmds = (updateResult[1] ?? []);
+                }
+                else {
+                    nextPageModel = updateResult;
+                }
+            }
             const nextModels = { ...model.pageModels, [targetPageId]: nextPageModel };
             const synced = syncPageFrameState({ ...model, pageModels: nextModels }, targetPageId, pagesById);
-            return [synced, cmds.map((cmd) => wrapCmdForPage(targetPageId, cmd))];
+            const wrappedCmds = Array.isArray(cmds) ? cmds.map((cmd) => wrapCmdForPage(targetPageId, cmd)) : [];
+            return [synced, wrappedCmds];
         },
         view(model) {
             const activePage = pagesById.get(model.activePageId);
@@ -210,14 +231,10 @@ export function createFramedApp(options) {
                 const ctx = resolveSafeCtx();
                 if (ctx) {
                     const prevResult = renderPageContent(model.previousPageId, model, bodyRect, pagesById);
-                    bodyOutput = renderTransition(prevResult.output, activeResult.output, activeTransition, model.transitionProgress, bodyRect.width, bodyRect.height, ctx);
+                    bodyOutput = renderTransition(prevResult.output, activeResult.output, activeTransition, model.transitionProgress, bodyRect.width, bodyRect.height, ctx, model.transitionFrame);
                 }
             }
-            const bodyLines = fitBlock(bodyOutput, bodyRect.width, bodyRect.height);
-            const rows = [header, helpLine, ...bodyLines];
-            while (rows.length < model.rows)
-                rows.push(' '.repeat(Math.max(0, model.columns)));
-            let output = rows.slice(0, model.rows).join('\n');
+            bodyOutput = fitBlock(bodyOutput, bodyRect.width, bodyRect.height).join('\n');
             const overlays = [];
             if (options.overlayFactory != null) {
                 overlays.push(...options.overlayFactory({
@@ -249,894 +266,51 @@ export function createFramedApp(options) {
                     screenHeight: model.rows,
                 }));
             }
-            if (overlays.length > 0) {
-                output = composite(output, overlays, { dim: true });
-            }
-            return output;
+            return composeFrameSurface({
+                width: model.columns,
+                height: model.rows,
+                header,
+                helpLine,
+                bodyOutput,
+                bodyRect,
+                overlays,
+                dimBackground: overlays.length > 0,
+            });
         },
     };
     return app;
 }
-/** Route a key press through the command palette, returning updated model and commands. */
-function handlePaletteKey(msg, model, paletteKeys, frameKeys, options, pagesById) {
-    const cp = model.commandPalette;
-    const action = paletteKeys.handle(msg);
-    if (action != null) {
-        switch (action.type) {
-            case 'cp-next':
-                return [{ ...model, commandPalette: cpFocusNext(cp) }, []];
-            case 'cp-prev':
-                return [{ ...model, commandPalette: cpFocusPrev(cp) }, []];
-            case 'cp-page-down':
-                return [{ ...model, commandPalette: cpPageDown(cp) }, []];
-            case 'cp-page-up':
-                return [{ ...model, commandPalette: cpPageUp(cp) }, []];
-            case 'cp-close':
-                return [{ ...model, commandPalette: undefined, commandPaletteEntries: undefined }, []];
-            case 'cp-select': {
-                const selected = cpSelectedItem(cp);
-                if (selected == null) {
-                    return [{ ...model, commandPalette: undefined, commandPaletteEntries: undefined }, []];
-                }
-                const entry = model.commandPaletteEntries?.find((x) => x.id === selected.id);
-                if (entry?.frameAction != null) {
-                    const closed = { ...model, commandPalette: undefined, commandPaletteEntries: undefined };
-                    return applyFrameAction(entry.frameAction, closed, frameKeys, options, pagesById);
-                }
-                if (entry?.msgAction !== undefined) {
-                    const cmd = entry.targetPageId != null
-                        ? emitMsgForPage(entry.targetPageId, entry.msgAction)
-                        : emitMsg(entry.msgAction);
-                    return [{
-                            ...model,
-                            commandPalette: undefined,
-                            commandPaletteEntries: undefined,
-                        }, [cmd]];
-                }
-                return [{ ...model, commandPalette: undefined, commandPaletteEntries: undefined }, []];
-            }
-        }
-    }
-    if (msg.key === 'backspace') {
-        const next = cpFilter(cp, cp.query.slice(0, -1));
-        return [{ ...model, commandPalette: next }, []];
+function composeFrameSurface(options) {
+    const frame = createSurface(options.width, options.height);
+    frame.blit(parseAnsiToSurface(options.header, options.width, 1), 0, 0);
+    if (options.height > 1) {
+        frame.blit(parseAnsiToSurface(options.helpLine, options.width, 1), 0, 1);
     }
-    if (msg.ctrl && msg.key === 'c') {
-        return [{ ...model, commandPalette: undefined, commandPaletteEntries: undefined }, []];
+    if (options.bodyRect.width > 0 && options.bodyRect.height > 0) {
+        frame.blit(parseAnsiToSurface(options.bodyOutput, options.bodyRect.width, options.bodyRect.height), options.bodyRect.col, options.bodyRect.row);
     }
-    if (!msg.ctrl && !msg.alt && !msg.shift && msg.key === 'q' && cp.query.length === 0) {
-        return [{ ...model, commandPalette: undefined, commandPaletteEntries: undefined }, []];
+    if (options.dimBackground) {
+        dimSurface(frame);
     }
-    if (!msg.ctrl && !msg.alt && msg.key.length === 1) {
-        const next = cpFilter(cp, cp.query + msg.key);
-        return [{ ...model, commandPalette: next }, []];
+    for (const overlay of options.overlays) {
+        const overlaySurface = parseAnsiToSurface(overlay.content, maxVisibleWidth(overlay.content), overlay.content.split('\n').length);
+        frame.blit(overlaySurface, overlay.col, overlay.row);
     }
-    return [model, []];
-}
-/** Dispatch a frame-level action (tab switch, pane cycle, scroll, palette, help toggle, transitions). */
-function applyFrameAction(action, model, frameKeys, options, pagesById) {
-    switch (action.type) {
-        case 'toggle-help':
-            return [{ ...model, helpOpen: !model.helpOpen }, []];
-        case 'prev-tab':
-            return switchTab(model, -1, pagesById, options);
-        case 'next-tab':
-            return switchTab(model, 1, pagesById, options);
-        case 'next-pane':
-            return [cyclePane(model, 1, pagesById), []];
-        case 'prev-pane':
-            return [cyclePane(model, -1, pagesById), []];
-        case 'open-palette':
-            if (!options.enableCommandPalette)
-                return [model, []];
-            return [openCommandPalette(model, frameKeys, options, pagesById), []];
-        case 'toggle-minimize':
-            return [applyToggleMinimize(model, pagesById), []];
-        case 'toggle-maximize':
-            return [applyToggleMaximize(model, pagesById), []];
-        case 'dock-up':
-        case 'dock-down':
-        case 'dock-left':
-        case 'dock-right': {
-            const dir = action.type.replace('dock-', '');
-            return [applyDockMove(model, dir, pagesById), []];
-        }
-        case 'scroll-up':
-        case 'scroll-down':
-        case 'page-up':
-        case 'page-down':
-        case 'top':
-        case 'bottom':
-        case 'scroll-left':
-        case 'scroll-right':
-            return [scrollFocusedPane(model, action, pagesById), []];
-        case 'transition':
-        case 'transition-complete':
-            return [model, []];
-    }
-}
-/** Cycle the active tab by `delta` positions, optionally starting a transition. */
-function switchTab(model, delta, pagesById, options) {
-    const idx = model.pageOrder.indexOf(model.activePageId);
-    if (idx < 0)
-        return [model, []];
-    const nextIdx = (idx + delta + model.pageOrder.length) % model.pageOrder.length;
-    const nextId = model.pageOrder[nextIdx];
-    if (nextId === model.activePageId)
-        return [model, []];
-    const activePageModel = model.pageModels[model.activePageId];
-    const activeTransition = options.transitionOverride
-        ? options.transitionOverride(activePageModel)
-        : options.transition;
-    const hasTransition = activeTransition != null && activeTransition !== 'none';
-    const nextGeneration = model.transitionGeneration + 1;
-    // Use the user-supplied timeline if provided, otherwise build a default.
-    // The timeline MUST contain a 'progress' track (0 → 1).
-    const tl = hasTransition
-        ? (options.transitionTimeline ?? timeline()
-            .add('progress', {
-            type: 'tween',
-            from: 0,
-            to: 1,
-            duration: options.transitionDuration ?? 300,
-            ease: EASINGS.easeInOutCubic,
-        })
-            .build())
-        : undefined;
-    const durationMs = tl?.estimatedDurationMs ?? options.transitionDuration ?? 300;
-    const nextModel = syncPageFrameState({
-        ...model,
-        activePageId: nextId,
-        previousPageId: model.activePageId,
-        activeTransition,
-        transitionProgress: hasTransition ? 0 : 1,
-        transitionGeneration: nextGeneration,
-        transitionStartMs: hasTransition ? Date.now() : undefined,
-        transitionTimeline: tl,
-        transitionTimelineState: tl?.init(),
-    }, nextId, pagesById);
-    if (hasTransition) {
-        // Schedule render ticks at ~60fps for the duration of the transition.
-        // Each tick advances the timeline using wall-clock elapsed time.
-        const cmd = createTransitionTickCmd(durationMs, nextGeneration);
-        return [nextModel, [cmd]];
-    }
-    return [nextModel, []];
-}
-/** Move focus to the next or previous pane in the active page's layout. */
-function cyclePane(model, delta, pagesById) {
-    const page = pagesById.get(model.activePageId);
-    const paneIds = collectPaneIds(page.layout(model.pageModels[model.activePageId]));
-    if (paneIds.length === 0)
-        return model;
-    const curr = model.focusedPaneByPage[model.activePageId];
-    const idx = curr == null ? 0 : paneIds.indexOf(curr);
-    const nextIdx = idx < 0
-        ? 0
-        : (idx + delta + paneIds.length) % paneIds.length;
-    const next = paneIds[nextIdx];
-    return {
-        ...model,
-        focusedPaneByPage: {
-            ...model.focusedPaneByPage,
-            [model.activePageId]: next,
-        },
-    };
-}
-/** Apply a scroll action to the currently focused pane. */
-function scrollFocusedPane(model, action, pagesById) {
-    const pageId = model.activePageId;
-    const focusedPaneId = model.focusedPaneByPage[pageId];
-    if (focusedPaneId == null)
-        return model;
-    const page = pagesById.get(pageId);
-    const layoutTree = page.layout(model.pageModels[pageId]);
-    const bodyRect = frameBodyRect(model.columns, model.rows);
-    const resolved = renderFrameNode(layoutTree, bodyRect, {
-        model,
-        pageId,
-        focusedPaneId,
-        scrollByPane: model.scrollByPage[pageId] ?? {},
-        visibility: model.minimizedByPage[pageId] ?? createPanelVisibilityState(),
-        dockState: model.dockStateByPage[pageId] ?? createPanelDockState(),
-    });
-    const paneRect = resolved.paneRects.get(focusedPaneId);
-    if (paneRect == null || paneRect.width <= 0 || paneRect.height <= 0)
-        return model;
-    const paneNode = findPaneNode(layoutTree, focusedPaneId);
-    if (paneNode == null)
-        return model;
-    const content = paneNode.render(paneRect.width, paneRect.height);
-    let state = createFocusAreaState({
-        content,
-        width: paneRect.width,
-        height: paneRect.height,
-        overflowX: paneNode.overflowX ?? 'hidden',
-    });
-    const prior = model.scrollByPage[pageId]?.[focusedPaneId] ?? { x: 0, y: 0 };
-    state = focusAreaScrollTo(state, prior.y);
-    state = focusAreaScrollToX(state, prior.x);
-    switch (action.type) {
-        case 'scroll-up':
-            state = focusAreaScrollBy(state, -1);
-            break;
-        case 'scroll-down':
-            state = focusAreaScrollBy(state, 1);
-            break;
-        case 'page-up':
-            state = focusAreaPageUp(state);
-            break;
-        case 'page-down':
-            state = focusAreaPageDown(state);
-            break;
-        case 'top':
-            state = focusAreaScrollToTop(state);
-            break;
-        case 'bottom':
-            state = focusAreaScrollToBottom(state);
-            break;
-        case 'scroll-left':
-            state = focusAreaScrollByX(state, -1);
-            break;
-        case 'scroll-right':
-            state = focusAreaScrollByX(state, 1);
-            break;
-    }
-    const pageScroll = model.scrollByPage[pageId] ?? {};
-    return {
-        ...model,
-        scrollByPage: {
-            ...model.scrollByPage,
-            [pageId]: {
-                ...pageScroll,
-                [focusedPaneId]: { x: state.scroll.x, y: state.scroll.y },
-            },
-        },
-    };
-}
-/** Initialize the command palette with entries from frame, global, page key maps, and custom page command items. */
-function openCommandPalette(model, frameKeys, options, pagesById) {
-    const entries = buildPaletteEntries(model, frameKeys, options, pagesById);
-    const items = entries.map((x) => x.item);
-    return {
-        ...model,
-        commandPalette: createCommandPaletteState(items, Math.max(5, Math.min(10, model.rows - 8))),
-        commandPaletteEntries: entries,
-    };
+    return frame;
 }
-/** Collect all available commands from frame, global, page, and custom sources. */
-function buildPaletteEntries(model, frameKeys, options, pagesById) {
-    const entries = [];
-    let seq = 0;
-    for (const b of frameKeys.bindings()) {
-        if (!b.enabled)
-            continue;
-        const action = frameKeys.handle(comboToMsg(b));
-        if (action === undefined)
-            continue;
-        const id = `frame:${seq++}`;
-        entries.push({
-            id,
-            item: {
-                id,
-                label: b.description,
-                category: 'Frame',
-                shortcut: formatKeyCombo(b.combo),
-            },
-            frameAction: action,
-        });
-    }
-    const global = options.globalKeys;
-    if (global != null) {
-        for (const b of global.bindings()) {
-            if (!b.enabled)
-                continue;
-            const action = global.handle(comboToMsg(b));
-            if (action === undefined)
+function dimSurface(surface) {
+    for (let y = 0; y < surface.height; y++) {
+        for (let x = 0; x < surface.width; x++) {
+            const cell = surface.get(x, y);
+            if (cell.empty || cell.char === ' ')
                 continue;
-            const id = `global:${seq++}`;
-            entries.push({
-                id,
-                item: {
-                    id,
-                    label: b.description,
-                    category: 'Global',
-                    shortcut: formatKeyCombo(b.combo),
-                },
-                msgAction: action,
-            });
-        }
-    }
-    const page = pagesById.get(model.activePageId);
-    if (page.keyMap != null) {
-        for (const b of page.keyMap.bindings()) {
-            if (!b.enabled)
-                continue;
-            const action = page.keyMap.handle(comboToMsg(b));
-            if (action === undefined)
-                continue;
-            const id = `page:${seq++}`;
-            entries.push({
-                id,
-                item: {
-                    id,
-                    label: b.description,
-                    category: page.title,
-                    shortcut: formatKeyCombo(b.combo),
-                },
-                msgAction: action,
-                targetPageId: model.activePageId,
-            });
-        }
-    }
-    if (page.commandItems != null) {
-        for (const item of page.commandItems(model.pageModels[model.activePageId])) {
-            const id = `custom:${seq++}`;
-            entries.push({
-                id,
-                item: {
-                    ...item,
-                    id,
-                    category: item.category ?? page.title,
-                },
-                msgAction: item.action,
-                targetPageId: model.activePageId,
-            });
-        }
-    }
-    return entries;
-}
-/** Reconcile pane IDs, scroll offsets, and focus for a page after init, tab switches, or window resizes. */
-function syncPageFrameState(model, pageId, pagesById) {
-    const page = pagesById.get(pageId);
-    const paneIds = collectPaneIds(page.layout(model.pageModels[pageId]));
-    assertUniquePaneIds(paneIds, `page "${pageId}" layout`);
-    const prevScroll = model.scrollByPage[pageId] ?? {};
-    const nextScroll = {};
-    for (const paneId of paneIds) {
-        nextScroll[paneId] = prevScroll[paneId] ?? { x: 0, y: 0 };
-    }
-    const prevFocused = model.focusedPaneByPage[pageId];
-    const focused = prevFocused != null && paneIds.includes(prevFocused)
-        ? prevFocused
-        : paneIds[0];
-    return {
-        ...model,
-        focusedPaneByPage: {
-            ...model.focusedPaneByPage,
-            [pageId]: focused,
-        },
-        scrollByPage: {
-            ...model.scrollByPage,
-            [pageId]: nextScroll,
-        },
-    };
-}
-/** Recursively render a layout tree node (pane, split, or grid) into a rect. */
-function renderFrameNode(node, rect, ctx) {
-    if (rect.width <= 0 || rect.height <= 0) {
-        return { output: '', paneRects: new Map(), paneOrder: [] };
-    }
-    if (node.kind === 'pane') {
-        // Minimized pane: render as collapsed title bar
-        if (isMinimized(ctx.visibility, node.paneId)) {
-            const titleBar = `[${node.paneId}] \u25b8`; // ▸
-            const output = fitBlock(titleBar, rect.width, rect.height).join('\n');
-            return {
-                output,
-                paneRects: new Map([[node.paneId, rect]]),
-                paneOrder: [node.paneId],
-            };
-        }
-        const prior = ctx.scrollByPane[node.paneId] ?? { x: 0, y: 0 };
-        const content = node.render(rect.width, rect.height);
-        let state = createFocusAreaState({
-            content,
-            width: rect.width,
-            height: rect.height,
-            overflowX: node.overflowX ?? 'hidden',
-        });
-        state = focusAreaScrollTo(state, prior.y);
-        state = focusAreaScrollToX(state, prior.x);
-        const output = focusArea(state, { focused: node.paneId === ctx.focusedPaneId });
-        return {
-            output,
-            paneRects: new Map([[node.paneId, rect]]),
-            paneOrder: [node.paneId],
-        };
-    }
-    if (node.kind === 'split') {
-        const direction = node.direction ?? 'row';
-        // Consult dock state for child order
-        const defaultChildIds = [getNodeId(node.paneA), getNodeId(node.paneB)];
-        const resolvedOrder = resolveChildOrder(ctx.dockState, node.splitId, defaultChildIds);
-        const swapped = resolvedOrder[0] !== defaultChildIds[0];
-        const effectiveA = swapped ? node.paneB : node.paneA;
-        const effectiveB = swapped ? node.paneA : node.paneB;
-        // Check for minimized panes — give minimized pane 1 row, sibling gets rest
-        const aMinimized = isPaneMinimized(effectiveA, ctx.visibility);
-        const bMinimized = isPaneMinimized(effectiveB, ctx.visibility);
-        let splitState = node.state;
-        // Apply split ratio overrides from layout presets
-        const ratioOverride = ctx.model.splitRatioOverrides[ctx.pageId]?.[node.splitId];
-        if (ratioOverride !== undefined) {
-            splitState = { ...splitState, ratio: ratioOverride };
-        }
-        if (aMinimized && !bMinimized) {
-            // A is minimized: give it minimal space
-            const mainAxisTotal = direction === 'row' ? rect.width : rect.height;
-            const minimizedSize = Math.min(1, mainAxisTotal);
-            splitState = { ...splitState, ratio: minimizedSize / Math.max(1, mainAxisTotal) };
-        }
-        else if (bMinimized && !aMinimized) {
-            // B is minimized: give A most of the space
-            const mainAxisTotal = direction === 'row' ? rect.width : rect.height;
-            const minimizedSize = Math.min(1, mainAxisTotal);
-            splitState = { ...splitState, ratio: 1 - minimizedSize / Math.max(1, mainAxisTotal) };
-        }
-        const layout = splitPaneLayout(splitState, {
-            direction,
-            width: rect.width,
-            height: rect.height,
-            minA: node.minA,
-            minB: node.minB,
-        });
-        const aRect = offsetRect(layout.paneA, rect.row, rect.col);
-        const bRect = offsetRect(layout.paneB, rect.row, rect.col);
-        const a = renderFrameNode(effectiveA, aRect, ctx);
-        const b = renderFrameNode(effectiveB, bRect, ctx);
-        const output = splitPane(splitState, {
-            direction,
-            width: rect.width,
-            height: rect.height,
-            minA: node.minA,
-            minB: node.minB,
-            dividerChar: node.dividerChar,
-            paneA: () => a.output,
-            paneB: () => b.output,
-        });
-        return {
-            output,
-            paneRects: mergeMaps(a.paneRects, b.paneRects),
-            paneOrder: [...a.paneOrder, ...b.paneOrder],
-        };
-    }
-    const relRects = gridLayout({
-        width: rect.width,
-        height: rect.height,
-        columns: node.columns,
-        rows: node.rows,
-        areas: node.areas,
-        gap: node.gap,
-    });
-    const renderedByArea = new Map();
-    for (const [areaName, areaRect] of relRects) {
-        const absoluteAreaRect = offsetRect(areaRect, rect.row, rect.col);
-        const child = node.cells[areaName];
-        if (child == null) {
-            resolveSafeCtx()?.io.writeError(`createFramedApp: grid cell "${areaName}" missing in page "${ctx.pageId}" — rendering placeholder\n`);
-            renderedByArea.set(areaName, renderMissingGridCell(areaName, absoluteAreaRect));
-            continue;
-        }
-        renderedByArea.set(areaName, renderFrameNode(child, absoluteAreaRect, ctx));
-    }
-    const output = grid({
-        width: rect.width,
-        height: rect.height,
-        columns: node.columns,
-        rows: node.rows,
-        areas: node.areas,
-        gap: node.gap,
-        cells: Object.fromEntries([...renderedByArea.entries()].map(([name, rendered]) => [name, () => rendered.output])),
-    });
-    let paneRects = new Map();
-    const seenPaneIds = new Set();
-    const paneOrder = [];
-    for (const rendered of renderedByArea.values()) {
-        for (const [paneId, paneRect] of rendered.paneRects.entries()) {
-            if (paneRects.has(paneId)) {
-                throw new Error(`createFramedApp: duplicate paneId "${paneId}" in rendered layout`);
-            }
-            paneRects.set(paneId, paneRect);
-        }
-        for (const paneId of rendered.paneOrder) {
-            if (seenPaneIds.has(paneId)) {
-                throw new Error(`createFramedApp: duplicate paneId "${paneId}" in rendered pane order`);
-            }
-            seenPaneIds.add(paneId);
-            paneOrder.push(paneId);
+            const modifiers = new Set(cell.modifiers ?? []);
+            modifiers.add('dim');
+            surface.set(x, y, { ...cell, modifiers: Array.from(modifiers) });
         }
     }
-    return { output, paneRects, paneOrder };
 }
-/** Render a placeholder for a grid area that has no matching cell definition. */
-function renderMissingGridCell(areaName, rect) {
-    return {
-        output: fitBlock(`[missing grid cell: ${areaName}]`, rect.width, rect.height).join('\n'),
-        paneRects: new Map(),
-        paneOrder: [],
-    };
-}
-/** Recursively collect all pane IDs from a layout tree in declaration order. */
-function collectPaneIds(node) {
-    if (node.kind === 'pane')
-        return [node.paneId];
-    if (node.kind === 'split')
-        return [...collectPaneIds(node.paneA), ...collectPaneIds(node.paneB)];
-    const ids = [];
-    for (const areaName of declaredAreaNames(node.areas)) {
-        const child = node.cells[areaName];
-        if (child == null)
-            continue;
-        ids.push(...collectPaneIds(child));
-    }
-    return ids;
-}
-/** Extract unique area names from CSS-grid-style template strings. */
-function declaredAreaNames(areas) {
-    const names = new Set();
-    for (const row of areas) {
-        for (const token of row.trim().split(/\s+/)) {
-            if (token !== '' && token !== '.')
-                names.add(token);
-        }
-    }
-    return [...names];
-}
-/** Throw if any pane ID appears more than once in the given list. */
-function assertUniquePaneIds(paneIds, scope) {
-    const seen = new Set();
-    for (const paneId of paneIds) {
-        if (seen.has(paneId)) {
-            throw new Error(`createFramedApp: duplicate paneId "${paneId}" in ${scope}`);
-        }
-        seen.add(paneId);
-    }
-}
-/** Toggle minimize on the focused pane of the active page. */
-function applyToggleMinimize(model, pagesById) {
-    const pageId = model.activePageId;
-    const focusedPaneId = model.focusedPaneByPage[pageId];
-    if (focusedPaneId == null)
-        return model;
-    const page = pagesById.get(pageId);
-    const allPaneIds = collectPaneIds(page.layout(model.pageModels[pageId]));
-    const current = model.minimizedByPage[pageId] ?? createPanelVisibilityState();
-    const next = toggleMinimized(current, focusedPaneId, allPaneIds);
-    // If we just minimized the focused pane, move focus to a non-minimized sibling
-    let newFocused = focusedPaneId;
-    if (isMinimized(next, focusedPaneId)) {
-        const visible = allPaneIds.filter((id) => !isMinimized(next, id));
-        newFocused = visible[0] ?? focusedPaneId;
-    }
-    return {
-        ...model,
-        minimizedByPage: { ...model.minimizedByPage, [pageId]: next },
-        focusedPaneByPage: { ...model.focusedPaneByPage, [pageId]: newFocused },
-    };
-}
-/** Toggle maximize on the focused pane of the active page. */
-function applyToggleMaximize(model, _pagesById) {
-    const pageId = model.activePageId;
-    const focusedPaneId = model.focusedPaneByPage[pageId];
-    if (focusedPaneId == null)
-        return model;
-    const current = model.maximizedPaneByPage[pageId] ?? createPanelMaximizeState();
-    const next = toggleMaximize(current, focusedPaneId);
-    // If maximizing a minimized pane, restore it first
-    let visibility = model.minimizedByPage[pageId] ?? createPanelVisibilityState();
-    if (next.maximizedPaneId && isMinimized(visibility, next.maximizedPaneId)) {
-        visibility = restorePane(visibility, next.maximizedPaneId);
-    }
-    return {
-        ...model,
-        maximizedPaneByPage: { ...model.maximizedPaneByPage, [pageId]: next },
-        minimizedByPage: { ...model.minimizedByPage, [pageId]: visibility },
-    };
-}
-/** Move the focused pane within its container in the given direction. */
-function applyDockMove(model, direction, pagesById) {
-    const pageId = model.activePageId;
-    const focusedPaneId = model.focusedPaneByPage[pageId];
-    if (focusedPaneId == null)
-        return model;
-    const page = pagesById.get(pageId);
-    const layoutTree = page.layout(model.pageModels[pageId]);
-    const container = findPaneContainer(layoutTree, focusedPaneId);
-    if (container == null)
-        return model;
-    const dockState = model.dockStateByPage[pageId] ?? createPanelDockState();
-    const currentOrder = resolveChildOrder(dockState, container.containerId, container.childIds);
-    const next = movePaneInContainer(dockState, container.containerId, focusedPaneId, direction, currentOrder);
-    return {
-        ...model,
-        dockStateByPage: { ...model.dockStateByPage, [pageId]: next },
-    };
-}
-/** Render only the maximized pane at the full body rect. */
-function renderMaximizedPane(pageId, model, bodyRect, pagesById, maximizedPaneId) {
-    const page = pagesById.get(pageId);
-    const pageModel = model.pageModels[pageId];
-    const layoutTree = page.layout(pageModel);
-    const paneNode = findPaneNode(layoutTree, maximizedPaneId);
-    if (paneNode == null) {
-        // Pane not found, fall back to normal rendering
-        return renderPageContent(pageId, model, bodyRect, pagesById);
-    }
-    const prior = model.scrollByPage[pageId]?.[maximizedPaneId] ?? { x: 0, y: 0 };
-    const content = paneNode.render(bodyRect.width, bodyRect.height);
-    let state = createFocusAreaState({
-        content,
-        width: bodyRect.width,
-        height: bodyRect.height,
-        overflowX: paneNode.overflowX ?? 'hidden',
-    });
-    state = focusAreaScrollTo(state, prior.y);
-    state = focusAreaScrollToX(state, prior.x);
-    const output = focusArea(state, { focused: true });
-    return {
-        output,
-        paneRects: new Map([[maximizedPaneId, bodyRect]]),
-        paneOrder: [maximizedPaneId],
-    };
-}
-/** Walk the layout tree to find the pane node with the given ID. */
-function findPaneNode(node, paneId) {
-    if (node.kind === 'pane')
-        return node.paneId === paneId ? node : undefined;
-    if (node.kind === 'split')
-        return findPaneNode(node.paneA, paneId) ?? findPaneNode(node.paneB, paneId);
-    for (const key of Object.keys(node.cells)) {
-        const found = findPaneNode(node.cells[key], paneId);
-        if (found)
-            return found;
-    }
-    return undefined;
-}
-/** Build the default key map for frame-level actions (tabs, panes, scroll, help '?', command palette 'ctrl+p'/':'). */
-function createFrameKeyMap() {
-    return createKeyMap()
-        .group('Frame', (g) => g
-        .bind('?', 'Toggle help', { type: 'toggle-help' })
-        .bind('[', 'Previous tab', { type: 'prev-tab' })
-        .bind(']', 'Next tab', { type: 'next-tab' })
-        .bind('tab', 'Next pane', { type: 'next-pane' })
-        .bind('shift+tab', 'Previous pane', { type: 'prev-pane' })
-        .bind('ctrl+p', 'Open command palette', { type: 'open-palette' })
-        .bind(':', 'Open command palette', { type: 'open-palette' })
-        .bind('ctrl+m', 'Fold/unfold pane', { type: 'toggle-minimize' })
-        .bind('ctrl+f', 'Full-screen pane', { type: 'toggle-maximize' }))
-        .group('Dock', (g) => g
-        .bind('ctrl+shift+up', 'Move pane up', { type: 'dock-up' })
-        .bind('ctrl+shift+down', 'Move pane down', { type: 'dock-down' })
-        .bind('ctrl+shift+left', 'Move pane left', { type: 'dock-left' })
-        .bind('ctrl+shift+right', 'Move pane right', { type: 'dock-right' }))
-        .group('Scroll', (g) => g
-        .bind('j', 'Scroll down', { type: 'scroll-down' })
-        .bind('k', 'Scroll up', { type: 'scroll-up' })
-        .bind('d', 'Page down', { type: 'page-down' })
-        .bind('u', 'Page up', { type: 'page-up' })
-        .bind('g', 'Top', { type: 'top' })
-        .bind('shift+g', 'Bottom', { type: 'bottom' })
-        .bind('h', 'Scroll left', { type: 'scroll-left' })
-        .bind('l', 'Scroll right', { type: 'scroll-right' }));
-}
-/** Render the top header line showing the app title and tab bar. */
-function renderHeaderLine(model, options, pagesById) {
-    const title = options.title ?? 'App';
-    const tabs = model.pageOrder.map((id) => {
-        const page = pagesById.get(id);
-        return id === model.activePageId ? `[${page.title}]` : ` ${page.title} `;
-    }).join(' ');
-    return fitLine(`${title}  ${tabs}`, model.columns);
-}
-/** Render the bottom status line showing mode, focused pane, and key hints. */
-function renderHelpLine(model, frameKeys, options, activePage) {
-    const mode = model.commandPalette != null
-        ? 'PALETTE'
-        : model.helpOpen
-            ? 'HELP'
-            : 'NORMAL';
-    const focusedPane = model.focusedPaneByPage[model.activePageId] ?? '-';
-    const status = `[${mode}] page:${model.activePageId} pane:${focusedPane}`;
-    const source = mergeBindingSources(frameKeys, options.globalKeys, activePage.helpSource ?? activePage.keyMap);
-    const hint = helpShort(source);
-    const line = hint.length > 0
-        ? ` ${status}  ${hint}`
-        : ` ${status}`;
-    return fitLine(line, model.columns);
-}
-/** Combine multiple binding sources into a single source for help display. */
-function mergeBindingSources(...sources) {
-    return {
-        bindings() {
-            const merged = [];
-            for (const src of sources) {
-                if (src == null)
-                    continue;
-                merged.push(...src.bindings());
-            }
-            return merged;
-        },
-    };
-}
-/** Compute the available rect for page content (screen minus header and footer). */
-function frameBodyRect(columns, rows) {
-    return {
-        row: Math.min(2, Math.max(0, rows)),
-        col: 0,
-        width: Math.max(0, columns),
-        height: Math.max(0, rows - 2),
-    };
-}
-/** Clip or pad a single line to exactly `width` visible columns. */
-function fitLine(line, width) {
-    const clipped = clipToWidth(line, Math.max(0, width));
-    return clipped + ' '.repeat(Math.max(0, width - visibleLength(clipped)));
-}
-/** Check if a layout node (or its first descendant pane) is minimized. */
-function isPaneMinimized(node, visibility) {
-    if (node.kind === 'pane')
-        return isMinimized(visibility, node.paneId);
-    // For containers, check if all descendant panes are minimized
-    const paneIds = collectPaneIds(node);
-    return paneIds.length > 0 && paneIds.every((id) => isMinimized(visibility, id));
-}
-/** Merge two read-only maps into a new mutable map. */
-function mergeMaps(a, b) {
-    const out = new Map();
-    for (const [k, v] of a)
-        out.set(k, v);
-    for (const [k, v] of b)
-        out.set(k, v);
-    return out;
-}
-/** Translate a layout rect by the given row and column offsets. */
-function offsetRect(rect, rowOffset, colOffset) {
-    return {
-        row: rowOffset + rect.row,
-        col: colOffset + rect.col,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-/** Convert a binding's key combo into a synthetic KeyMsg for dispatch. */
-function comboToMsg(binding) {
-    return {
-        type: 'key',
-        key: binding.combo.key,
-        ctrl: binding.combo.ctrl,
-        alt: binding.combo.alt,
-        shift: binding.combo.shift,
-    };
-}
-/** Type guard: is this message a frame-internal action wrapper? */
-function isFrameScopedMsg(value) {
-    return typeof value === 'object'
-        && value !== null
-        && FRAME_MSG_TOKEN in value
-        && value[FRAME_MSG_TOKEN] === true;
-}
-/** Wrap a frame action into a FrameScopedMsg for the update loop. */
-function wrapFrameMsg(action) {
-    return {
-        [FRAME_MSG_TOKEN]: true,
-        action,
-    };
-}
-/** Create a command that immediately resolves with the given message. */
-function emitMsg(msg) {
-    return () => Promise.resolve(msg);
-}
-/** Create a command that emits a page-scoped message. */
-function emitMsgForPage(pageId, msg) {
-    return async () => wrapPageMsg(pageId, msg);
-}
-/** Wrap a page-level command so its emitted messages are tagged with the page ID. */
-function wrapCmdForPage(pageId, cmd) {
-    return async (emit) => {
-        const result = await cmd((msg) => emit(wrapPageMsg(pageId, msg)));
-        if (result === undefined || result === QUIT)
-            return result;
-        return wrapPageMsg(pageId, result);
-    };
-}
-/** Tag a user message with its originating page ID. */
-function wrapPageMsg(pageId, msg) {
-    return {
-        [PAGE_MSG_TOKEN]: true,
-        pageId,
-        msg,
-    };
-}
-/** Type guard: is this message a page-scoped wrapper? */
-function isPageScopedMsg(value) {
-    return typeof value === 'object'
-        && value !== null
-        && PAGE_MSG_TOKEN in value
-        && value[PAGE_MSG_TOKEN] === true;
-}
-/**
- * Create a TEA command that drives transition re-renders via `setInterval`.
- *
- * Each tick emits a frame-scoped 'transition' message. The actual progress
- * is computed from wall-clock time in the update handler, not from the
- * interval count. The interval just schedules re-renders.
- */
-function createTransitionTickCmd(durationMs, generation) {
-    return (emit) => new Promise((resolve) => {
-        if (durationMs <= 0) {
-            emit(wrapFrameMsg({ type: 'transition-complete', generation }));
-            resolve();
-            return;
-        }
-        const startMs = Date.now();
-        const intervalMs = Math.round(1000 / 60);
-        const id = setInterval(() => {
-            const elapsed = Date.now() - startMs;
-            const rawProgress = Math.min(1, elapsed / durationMs);
-            emit(wrapFrameMsg({ type: 'transition', progress: rawProgress, generation }));
-            if (rawProgress >= 1) {
-                clearInterval(id);
-                emit(wrapFrameMsg({ type: 'transition-complete', generation }));
-                resolve();
-            }
-        }, intervalMs);
-    });
-}
-/** Render a page's layout tree within the frame body rect. */
-function renderPageContent(pageId, model, bodyRect, pagesById) {
-    const page = pagesById.get(pageId);
-    const pageModel = model.pageModels[pageId];
-    const renderCtx = {
-        model,
-        pageId,
-        focusedPaneId: model.focusedPaneByPage[pageId],
-        scrollByPane: model.scrollByPage[pageId] ?? {},
-        visibility: model.minimizedByPage[pageId] ?? createPanelVisibilityState(),
-        dockState: model.dockStateByPage[pageId] ?? createPanelDockState(),
-    };
-    return renderFrameNode(page.layout(pageModel), bodyRect, renderCtx);
-}
-/**
- * Split a styled multiline string into a 2D grid of single-column characters.
- * Each cell is a fully-styled string (including resets).
- */
-function stringToGrid(str, width, height) {
-    const lines = str.split('\n');
-    const grid = [];
-    for (let y = 0; y < height; y++) {
-        const line = lines[y] ?? '';
-        grid.push(tokenizeAnsi(line, width));
-    }
-    return grid;
-}
-/** Apply a transition shader to blend between the previous and next page views. */
-function renderTransition(prev, next, style, progress, width, height, ctx) {
-    const shader = typeof style === 'function' ? style : TRANSITION_SHADERS[style];
-    if (!shader)
-        return next;
-    const prevGrid = stringToGrid(prev, width, height);
-    const nextGrid = stringToGrid(next, width, height);
-    const lines = [];
-    for (let y = 0; y < height; y++) {
-        let line = '';
-        for (let x = 0; x < width; x++) {
-            // Shared stable-ish pseudo-random seed based on coordinates
-            const seed = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
-            const rand = seed - Math.floor(seed);
-            const result = shader({ x, y, width, height, progress, rand, ctx });
-            const showNext = result.showNext;
-            const charOverride = result.char;
-            if (charOverride !== undefined) {
-                line += charOverride;
-            }
-            else {
-                line += (showNext ? nextGrid[y]?.[x] : prevGrid[y]?.[x]) ?? ' ';
-            }
-        }
-        lines.push(line);
-    }
-    return lines.join('\n');
+function maxVisibleWidth(text) {
+    return text.split('\n').reduce((max, line) => Math.max(max, visibleLength(line)), 0);
 }
 //# sourceMappingURL=app-frame.js.map