@flyingrobots/bijou-tui 1.7.0 → 2.1.0

package/dist/app-frame.js

@@ -5,21 +5,20 @@
  * 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 { helpView } from './help.js';
+import { isKeyMsg, isMouseMsg, isResizeMsg } from './types.js';
 import { composite, 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 { 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';
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
 /**
  * Create a fully framed TEA app shell.
  */
@@ -68,10 +67,28 @@ export function createFramedApp(options) {
                 helpOpen: false,
                 transitionProgress: 1,
                 transitionGeneration: 0,
+                transitionFrame: 0,
+                minimizedByPage: {},
+                maximizedPaneByPage: {},
+                dockStateByPage: {},
+                splitRatioOverrides: {},
             };
             for (const pageId of pageOrder) {
                 model = syncPageFrameState(model, pageId, pagesById);
             }
+            // Apply initial layout if provided
+            if (options.initialLayout) {
+                const restored = restoreLayoutState(options.initialLayout);
+                model = {
+                    ...model,
+                    activePageId: pagesById.has(restored.activePageId) ? restored.activePageId : model.activePageId,
+                    focusedPaneByPage: { ...model.focusedPaneByPage, ...restored.focusedPaneByPage },
+                    minimizedByPage: restored.minimizedByPage,
+                    maximizedPaneByPage: restored.maximizedPaneByPage,
+                    dockStateByPage: restored.dockStateByPage,
+                    splitRatioOverrides: restored.splitRatiosByPage,
+                };
+            }
             return [model, initCmds];
         },
         update(msg, model) {
@@ -93,6 +110,7 @@ export function createFramedApp(options) {
                             return [{
                                     ...model,
                                     transitionProgress: 1,
+                                    transitionFrame: 0,
                                     previousPageId: undefined,
                                     activeTransition: undefined,
                                     transitionStartMs: undefined,
@@ -103,11 +121,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)
@@ -115,6 +138,7 @@ export function createFramedApp(options) {
                     return [{
                             ...model,
                             transitionProgress: 1,
+                            transitionFrame: 0,
                             previousPageId: undefined,
                             activeTransition: undefined,
                             transitionStartMs: undefined,
@@ -122,7 +146,7 @@ export function createFramedApp(options) {
                             transitionTimelineState: undefined,
                         }, []];
                 }
-                return applyFrameAction(action, model, frameKeys, options, pagesById);
+                return applyFrameAction(action, model, options, pagesById);
             }
             if (isResizeMsg(msg)) {
                 return [{
@@ -133,7 +157,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) {
@@ -144,7 +168,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) {
@@ -178,14 +206,19 @@ export function createFramedApp(options) {
             const header = renderHeaderLine(model, options, pagesById);
             const helpLine = renderHelpLine(model, frameKeys, options, activePage);
             const bodyRect = frameBodyRect(model.columns, model.rows);
-            const activeResult = renderPageContent(model.activePageId, model, bodyRect, pagesById);
+            // Check for maximized pane — if set, render only that pane at full body rect
+            const maxState = model.maximizedPaneByPage[model.activePageId];
+            const maximizedPaneId = maxState?.maximizedPaneId;
+            const activeResult = maximizedPaneId
+                ? renderMaximizedPane(model.activePageId, model, bodyRect, pagesById, maximizedPaneId)
+                : renderPageContent(model.activePageId, model, bodyRect, pagesById);
             let bodyOutput = activeResult.output;
             const activeTransition = model.activeTransition ?? options.transition;
             if (model.previousPageId != null && model.transitionProgress < 1 && activeTransition && activeTransition !== 'none') {
                 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);
@@ -232,732 +265,4 @@ export function createFramedApp(options) {
     };
     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 }, []];
-    }
-    if (msg.ctrl && msg.key === 'c') {
-        return [{ ...model, commandPalette: undefined, commandPaletteEntries: undefined }, []];
-    }
-    if (!msg.ctrl && !msg.alt && !msg.shift && msg.key === 'q' && cp.query.length === 0) {
-        return [{ ...model, commandPalette: undefined, commandPaletteEntries: undefined }, []];
-    }
-    if (!msg.ctrl && !msg.alt && msg.key.length === 1) {
-        const next = cpFilter(cp, cp.query + msg.key);
-        return [{ ...model, commandPalette: next }, []];
-    }
-    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 '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] ?? {},
-    });
-    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,
-    };
-}
-/** 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)
-                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') {
-        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';
-        const layout = splitPaneLayout(node.state, {
-            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(node.paneA, aRect, ctx);
-        const b = renderFrameNode(node.paneB, bRect, ctx);
-        const output = splitPane(node.state, {
-            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) {
-            console.warn(`createFramedApp: grid cell "${areaName}" missing in page "${ctx.pageId}" — rendering placeholder`);
-            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);
-        }
-    }
-    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);
-    }
-}
-/** 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' }))
-        .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)));
-}
-/** 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] ?? {},
-    };
-    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');
-}
 //# sourceMappingURL=app-frame.js.map