@flyingrobots/bijou-tui 3.1.0 → 4.1.0

package/dist/app-frame.js

@@ -4,25 +4,99 @@
  * Provides tabs, pane focus/scroll isolation, shell key handling, help,
  * panel-scoped overlay context, and optional frame-level command palette.
  */
-import { createSurface, parseAnsiToSurface, resolveSafeCtx, } from '@flyingrobots/bijou';
-import { helpView } from './help.js';
+import { createSurface, preparePreferenceSections, preferenceListSurface, resolvePreferenceRowLayout, resolveClock, resolveSafeCtx, } from '@flyingrobots/bijou';
+import { helpViewSurface } from './help.js';
+import { createKeyMap } from './keybindings.js';
 import { isKeyMsg, isMouseMsg, isResizeMsg } from './types.js';
-import { modal } from './overlay.js';
-import { fitBlock } from './layout-utils.js';
+import { quit } from './commands.js';
+import { compositeSurfaceInto, drawer, modal } from './overlay.js';
+import { isShellQuitConfirmAccept, isShellQuitConfirmDismiss, isShellQuitRequest, renderShellQuitOverlay, shouldUseShellQuitConfirm, } from './shell-quit.js';
 import { commandPalette, commandPaletteKeyMap, } from './command-palette.js';
+import { createPagerStateForSurface, pagerPageDown, pagerPageUp, pagerScrollBy, pagerScrollToBottom, pagerScrollToTop, pagerSurface, } from './pager.js';
 import { restoreLayoutState } from './layout-preset.js';
-import { createNotificationState, notificationsNeedTick, pushNotification, renderNotificationStack, tickNotifications, trimNotificationsToViewport, } from './notification.js';
+import { countNotificationHistory, createNotificationState, dismissNotification, hitTestNotificationStack, notificationsNeedTick, pushNotification, renderNotificationHistorySurface, renderNotificationReviewEntrySurface, renderNotificationStack, tickNotifications, trimNotificationsToViewport, } from './notification.js';
+import { insetLineSurface } from './collection-surface.js';
+import { vstackSurface } from './surface-layout.js';
 import { isFrameScopedMsg, isPageScopedMsg, wrapCmdForPage, emitMsg, emitMsgForPage, wrapFrameMsg, } 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';
+import { activeFrameLayer, describeFrameLayerStack, } from './app-frame-layers.js';
+import { frameEndAnchor, frameMessage, frameNotificationCue, frameNotificationFilterLabel, frameStartAnchor, } from './app-frame-i18n.js';
+import { resolveHeaderLine, renderHelpLine, renderPageContent, renderPageContentInto, renderMaximizedPane, renderMaximizedPaneInto, renderTransition, } from './app-frame-render.js';
+import { applyFrameAction, scrollFocusedPane, switchTab, syncPageFrameState, } from './app-frame-actions.js';
+import { handlePaletteKey, openCommandPalette, openSearchPalette, } from './app-frame-palette.js';
+export { activeFrameLayer, describeFrameLayerStack, underlyingFrameLayer, } from './app-frame-layers.js';
 // ---------------------------------------------------------------------------
 // Frame Notification Helpers
 // ---------------------------------------------------------------------------
 const FRAME_NOTIFICATION_TICK_MS = 40;
 const DEFAULT_FRAME_NOTIFICATION_DURATION_MS = 6_000;
+const SETTINGS_FEEDBACK_TOAST_WIDTH = 40;
+const DEFAULT_NOTIFICATION_CENTER_FILTERS = [
+    'ALL',
+    'ACTIONABLE',
+    'ERROR',
+    'WARNING',
+    'SUCCESS',
+    'INFO',
+];
+const quitHelpKeys = createKeyMap()
+    .group('Exit', (g) => g
+    .bind('q', 'Quit', { type: 'toggle-help' })
+    .bind('escape', 'Quit', { type: 'toggle-help' })
+    .bind('ctrl+c', 'Quit', { type: 'toggle-help' }));
+const helpLayerHelpKeys = createKeyMap()
+    .group('Help', (g) => g
+    .bind('escape', 'Close help', { type: 'noop' })
+    .bind('?', 'Close help', { type: 'noop' })
+    .bind('up', 'Scroll up', { type: 'noop' })
+    .bind('down', 'Scroll down', { type: 'noop' })
+    .bind('j', 'Scroll down', { type: 'noop' })
+    .bind('k', 'Scroll up', { type: 'noop' })
+    .bind('d', 'Page down', { type: 'noop' })
+    .bind('u', 'Page up', { type: 'noop' })
+    .bind('g', 'Top', { type: 'noop' })
+    .bind('shift+g', 'Bottom', { type: 'noop' }));
+const settingsHelpKeys = createKeyMap()
+    .group('Settings', (g) => g
+    .bind('escape', 'Close settings', { type: 'toggle-settings' })
+    .bind('f2', 'Close settings', { type: 'toggle-settings' })
+    .bind('up', 'Previous row', { type: 'scroll-up' })
+    .bind('down', 'Next row', { type: 'scroll-down' })
+    .bind('enter', 'Activate setting', { type: 'toggle-settings' })
+    .bind('space', 'Activate setting', { type: 'toggle-settings' })
+    .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('/', 'Search', { type: 'open-search' })
+    .bind('ctrl+p', 'Open command palette', { type: 'open-palette' })
+    .bind(':', 'Open command palette', { type: 'open-palette' })
+    .bind('?', 'Toggle help', { type: 'toggle-help' }));
+const notificationCenterHelpKeys = createKeyMap()
+    .group('Notifications', (g) => g
+    .bind('shift+n', 'Close notification center', { type: 'noop' })
+    .bind('up', 'Scroll up', { type: 'noop' })
+    .bind('down', 'Scroll down', { type: 'noop' })
+    .bind('j', 'Scroll down', { type: 'noop' })
+    .bind('k', 'Scroll up', { type: 'noop' })
+    .bind('d', 'Page down', { type: 'noop' })
+    .bind('u', 'Page up', { type: 'noop' })
+    .bind('g', 'Top', { type: 'noop' })
+    .bind('shift+g', 'Bottom', { type: 'noop' })
+    .bind('f', 'Cycle filter', { type: 'noop' })
+    .bind('/', 'Search', { type: 'noop' })
+    .bind('ctrl+p', 'Open command palette', { type: 'noop' })
+    .bind(':', 'Open command palette', { type: 'noop' })
+    .bind('?', 'Toggle help', { type: 'noop' }));
+const quitConfirmHelpKeys = createKeyMap()
+    .group('Quit', (g) => g
+    .bind('y', 'Quit', { type: 'noop' })
+    .bind('enter', 'Quit', { type: 'noop' })
+    .bind('n', 'Stay', { type: 'noop' })
+    .bind('escape', 'Stay', { type: 'noop' })
+    .bind('q', 'Stay', { type: 'noop' }));
 function resolveFrameNotificationOptions(options) {
     if (options.runtimeNotifications === false) {
         return {
@@ -79,8 +153,13 @@ export function createFramedApp(options) {
     if (!pagesById.has(defaultPageId)) {
         throw new Error(`createFramedApp: defaultPageId "${defaultPageId}" not found in pages`);
     }
-    const frameKeys = createFrameKeyMap();
+    const frameKeys = createFrameKeyMap({
+        enableSettings: options.settings != null,
+        enableNotifications: options.notificationCenter != null || options.runtimeNotifications !== false,
+        i18n: options.i18n,
+    });
     const frameNotificationOptions = resolveFrameNotificationOptions(options);
+    let composedFrameScratch = null;
     const paletteKeys = commandPaletteKeyMap({
         focusNext: { type: 'cp-next' },
         focusPrev: { type: 'cp-prev' },
@@ -89,12 +168,301 @@ export function createFramedApp(options) {
         select: { type: 'cp-select' },
         close: { type: 'cp-close' },
     });
+    function getComposedFrameScratch(width, height) {
+        if (composedFrameScratch == null
+            || composedFrameScratch.width !== width
+            || composedFrameScratch.height !== height) {
+            composedFrameScratch = createSurface(width, height);
+        }
+        return composedFrameScratch;
+    }
     function withObservedKey(model, cmds, msg, route) {
         const observed = options.observeKey?.(msg, route);
         if (observed === undefined)
             return [...cmds];
         return [emitMsgForPage(model.activePageId, observed), ...cmds];
     }
+    function applyQuitRequest(model, msg) {
+        if (!shouldUseShellQuitConfirm()) {
+            return [model, withObservedKey(model, [quit()], msg, 'frame')];
+        }
+        if (model.quitConfirmOpen) {
+            return [model, withObservedKey(model, [], msg, 'frame')];
+        }
+        return [{
+                ...model,
+                quitConfirmOpen: true,
+                helpOpen: false,
+                helpScrollY: 0,
+                settingsOpen: false,
+                notificationCenterOpen: false,
+                commandPalette: undefined,
+                commandPaletteEntries: undefined,
+                commandPaletteTitle: undefined,
+                commandPaletteKind: undefined,
+            }, withObservedKey(model, [], msg, 'frame')];
+    }
+    function closeCommandPalette(model) {
+        return {
+            ...model,
+            commandPalette: undefined,
+            commandPaletteEntries: undefined,
+            commandPaletteTitle: undefined,
+            commandPaletteKind: undefined,
+        };
+    }
+    function resolveLayerContext(model) {
+        const activePage = pagesById.get(model.activePageId);
+        const activePageModel = model.pageModels[model.activePageId];
+        const inputAreas = resolveInputAreas(activePage, activePageModel);
+        const activeInputArea = findInputAreaByPaneId(inputAreas, model.focusedPaneByPage[model.activePageId]);
+        const modalKeyMap = activePage.modalKeyMap?.(activePageModel);
+        const pageModalOpen = modalKeyMap != null;
+        const activeLayer = activeFrameLayer(model, { pageModalOpen });
+        return {
+            activePage,
+            activePageModel,
+            inputAreas,
+            activeInputArea,
+            modalKeyMap,
+            pageModalOpen,
+            activeLayer,
+        };
+    }
+    function resolveWorkspaceHelpSource(activePage, activeInputArea) {
+        return mergeBindingSources(frameKeys, quitHelpKeys, options.globalKeys, activeInputArea?.helpSource ?? activeInputArea?.keyMap, activePage.helpSource ?? activePage.keyMap);
+    }
+    function resolveWorkspaceHintSource(model, activePage, activeInputArea) {
+        const helpLineOverride = options.helpLineSource?.({
+            model,
+            activePage,
+            frameKeys,
+            globalKeys: options.globalKeys,
+        });
+        if (typeof helpLineOverride === 'string') {
+            return helpLineOverride;
+        }
+        return helpLineOverride ?? mergeBindingSources(frameKeys, options.globalKeys, activeInputArea?.helpSource ?? activeInputArea?.keyMap, activePage.helpSource ?? activePage.keyMap);
+    }
+    function resolveLayerMetadata(model, activePage, activeInputArea, modalKeyMap) {
+        const settings = resolveFrameSettings(model, options, pagesById);
+        const notificationCenter = resolveFrameNotificationCenter(model, options, pagesById);
+        const workspaceHintSource = resolveWorkspaceHintSource(model, activePage, activeInputArea);
+        const workspaceHelpSource = resolveWorkspaceHelpSource(activePage, activeInputArea);
+        const paletteHint = frameMessage(options.i18n, 'palette.hint', 'Enter select • Esc close');
+        const helpHint = frameMessage(options.i18n, 'help.hint', 'j/k scroll • d/u page • g/G top/bottom • mouse wheel • ?/Esc close');
+        const settingsHint = frameMessage(options.i18n, 'settings.footer', 'F2/Esc close • ↑/↓ rows • Enter toggle • / search • q quit');
+        const notificationsHint = frameMessage(options.i18n, 'notifications.footer', 'Shift+N close • f filter • j/k scroll • q quit');
+        const quitHint = frameMessage(options.i18n, 'quit.footer', 'Y quit • N stay');
+        const paletteTitle = model.commandPaletteTitle
+            ?? frameMessage(options.i18n, 'palette.title', 'Command Palette');
+        const searchTitle = model.commandPaletteTitle
+            ?? activePage.searchTitle
+            ?? frameMessage(options.i18n, 'search.title', 'Search');
+        const notificationsTitle = notificationCenter == null
+            ? frameMessage(options.i18n, 'notifications.title', 'Notifications')
+            : `${notificationCenter.title} • ${frameNotificationFilterLabel(options.i18n, notificationCenter.activeFilter)}`;
+        return {
+            workspace: {
+                title: activePage.title,
+                hintSource: workspaceHintSource,
+                helpSource: workspaceHelpSource,
+            },
+            'page-modal': {
+                title: activePage.title,
+                hintSource: modalKeyMap ?? activePage.helpSource ?? activePage.keyMap,
+                helpSource: mergeBindingSources(quitHelpKeys, modalKeyMap, activePage.helpSource ?? activePage.keyMap),
+            },
+            settings: {
+                title: settings?.title ?? frameMessage(options.i18n, 'settings.title', 'Settings'),
+                hintSource: settingsHint,
+                helpSource: mergeBindingSources(settingsHelpKeys, quitHelpKeys),
+            },
+            help: {
+                title: frameMessage(options.i18n, 'help.title', 'Keyboard Help'),
+                hintSource: helpHint,
+                helpSource: helpLayerHelpKeys,
+            },
+            'notification-center': {
+                title: notificationsTitle,
+                hintSource: notificationsHint,
+                helpSource: mergeBindingSources(notificationCenterHelpKeys, quitHelpKeys),
+            },
+            search: {
+                title: searchTitle,
+                hintSource: paletteHint,
+                helpSource: mergeBindingSources(paletteKeys, quitHelpKeys),
+            },
+            'command-palette': {
+                title: paletteTitle,
+                hintSource: paletteHint,
+                helpSource: mergeBindingSources(paletteKeys, quitHelpKeys),
+            },
+            'quit-confirm': {
+                title: frameMessage(options.i18n, 'quit.title', 'Quit?'),
+                hintSource: quitHint,
+                helpSource: quitConfirmHelpKeys,
+            },
+        };
+    }
+    function resolvePresentedLayerContext(model) {
+        const { activePage, activePageModel, inputAreas, activeInputArea, modalKeyMap, pageModalOpen, } = resolveLayerContext(model);
+        const layerStack = describeFrameLayerStack(model, {
+            pageModalOpen,
+            layers: resolveLayerMetadata(model, activePage, activeInputArea, modalKeyMap),
+        });
+        const activeLayer = layerStack[layerStack.length - 1];
+        const underlyingLayer = layerStack.length > 1 ? layerStack[layerStack.length - 2] : undefined;
+        return {
+            activePage,
+            activePageModel,
+            inputAreas,
+            activeInputArea,
+            modalKeyMap,
+            pageModalOpen,
+            layerStack,
+            activeLayer,
+            underlyingLayer,
+        };
+    }
+    function updateTargetPage(model, targetPageId, targetMsg) {
+        const targetPage = pagesById.get(targetPageId);
+        if (targetPage == null)
+            return [model, []];
+        const pageModel = model.pageModels[targetPageId];
+        const updateResult = targetPage.update(targetMsg, pageModel);
+        const [nextPageModel, cmds = []] = updateResult;
+        const nextModels = { ...model.pageModels, [targetPageId]: nextPageModel };
+        const synced = syncPageFrameState({ ...model, pageModels: nextModels }, targetPageId, pagesById);
+        const wrappedCmds = cmds.map((cmd) => wrapCmdForPage(targetPageId, cmd));
+        return [synced, wrappedCmds];
+    }
+    function handleFrameMouse(msg, model) {
+        const { activePage, activePageModel, inputAreas, activeLayer, } = resolveLayerContext(model);
+        if (activeLayer.kind === 'help') {
+            if (msg.action === 'scroll-up' || msg.action === 'scroll-down') {
+                return [applyHelpScroll(model, activePage, msg.action === 'scroll-down' ? 3 : -3, frameKeys, paletteKeys, options, pagesById), []];
+            }
+            return [model, []];
+        }
+        if (activeLayer.kind === 'search' || activeLayer.kind === 'command-palette') {
+            return [model, []];
+        }
+        if (activeLayer.kind === 'quit-confirm' || activeLayer.kind === 'page-modal') {
+            return [model, []];
+        }
+        if (activeLayer.kind === 'settings') {
+            const layout = resolveSettingsLayout(model, options, pagesById);
+            if (layout != null) {
+                if (msg.action === 'scroll-up' || msg.action === 'scroll-down') {
+                    if (isInsideSettingsDrawer(msg.col, msg.row, layout, model)) {
+                        return [
+                            scrollSettingsBy(model, layout, msg.action === 'scroll-down' ? 3 : -3),
+                            [],
+                        ];
+                    }
+                    return [model, []];
+                }
+                if (msg.action === 'press' && msg.button === 'left') {
+                    if (!isInsideSettingsDrawer(msg.col, msg.row, layout, model)) {
+                        return [model, []];
+                    }
+                    const hit = settingsRowAtPosition(msg.col, msg.row, model, layout);
+                    if (hit == null)
+                        return [model, []];
+                    const focusedModel = { ...model, settingsFocusIndex: hit.index };
+                    if (hit.row.action === undefined || hit.row.enabled === false || hit.row.kind === 'info') {
+                        return [focusedModel, []];
+                    }
+                    return activateSettingsRow(focusedModel, hit.row);
+                }
+                return [model, []];
+            }
+        }
+        if (activeLayer.kind === 'notification-center') {
+            const layout = resolveNotificationCenterLayout(model, options, pagesById);
+            if (layout != null) {
+                if (msg.action === 'scroll-up' || msg.action === 'scroll-down') {
+                    if (isInsideNotificationCenterDrawer(msg.col, msg.row, layout, model)) {
+                        return [
+                            scrollNotificationCenterBy(model, layout, msg.action === 'scroll-down' ? 3 : -3),
+                            [],
+                        ];
+                    }
+                    return [model, []];
+                }
+                if (msg.action === 'press' && msg.button === 'left') {
+                    return [model, []];
+                }
+                return [model, []];
+            }
+        }
+        if (msg.action === 'press' && msg.button === 'left') {
+            if (frameNotificationOptions.enabled) {
+                const nowMs = resolveClock(resolveSafeCtx()).now();
+                const notificationTarget = hitTestNotificationStack(model.runtimeNotifications, {
+                    screenWidth: model.columns,
+                    screenHeight: model.rows,
+                    margin: frameNotificationOptions.margin,
+                    gap: frameNotificationOptions.gap,
+                    ctx: resolveSafeCtx() ?? undefined,
+                }, msg.col, msg.row);
+                if (notificationTarget?.kind === 'dismiss') {
+                    return applyFrameNotificationState(model, dismissNotification(model.runtimeNotifications, notificationTarget.item.id, nowMs), nowMs);
+                }
+                if (notificationTarget != null) {
+                    return [model, []];
+                }
+            }
+            if (msg.row === 0) {
+                const header = resolveHeaderLine(model, options, pagesById);
+                const tab = header.tabTargets.find((target) => msg.col >= target.startCol && msg.col <= target.endCol);
+                if (tab != null) {
+                    const currentIndex = model.pageOrder.indexOf(model.activePageId);
+                    const nextIndex = model.pageOrder.indexOf(tab.pageId);
+                    if (currentIndex >= 0 && nextIndex >= 0 && nextIndex !== currentIndex) {
+                        return switchTab(model, nextIndex - currentIndex, pagesById, options);
+                    }
+                    return [model, []];
+                }
+                return [model, []];
+            }
+            const clickedPane = paneHitAtPosition(model, msg.col, msg.row, pagesById, options);
+            if (clickedPane != null) {
+                const focusedModel = focusPane(model, clickedPane.paneId);
+                const inputArea = findInputAreaByPaneId(inputAreas, clickedPane.paneId);
+                const areaMsg = inputArea?.mouse?.({
+                    msg,
+                    model: activePageModel,
+                    rect: clickedPane.rect,
+                });
+                if (areaMsg !== undefined) {
+                    return [focusedModel, [emitMsgForPage(model.activePageId, areaMsg)]];
+                }
+                return [focusedModel, [emitMsgForPage(model.activePageId, msg)]];
+            }
+        }
+        if (msg.action === 'scroll-up' || msg.action === 'scroll-down') {
+            const hoveredPane = paneHitAtPosition(model, msg.col, msg.row, pagesById, options);
+            if (hoveredPane != null) {
+                const focusedModel = focusPane(model, hoveredPane.paneId);
+                const inputArea = findInputAreaByPaneId(inputAreas, hoveredPane.paneId);
+                const areaMsg = inputArea?.mouse?.({
+                    msg,
+                    model: activePageModel,
+                    rect: hoveredPane.rect,
+                });
+                if (areaMsg !== undefined) {
+                    return [focusedModel, [emitMsgForPage(model.activePageId, areaMsg)]];
+                }
+                const action = msg.action === 'scroll-down'
+                    ? { type: 'scroll-down' }
+                    : { type: 'scroll-up' };
+                return [scrollFocusedPane(focusedModel, action, pagesById, options), []];
+            }
+        }
+        return undefined;
+    }
     function applyFrameNotificationState(model, notifications, nowMs, forceTick = false) {
         const trimmed = trimNotificationsToViewport(notifications, {
             screenWidth: model.columns,
@@ -113,6 +481,32 @@ export function createFramedApp(options) {
         }
         return [nextModel, []];
     }
+    function activateSettingsRow(model, row) {
+        if (row.action === undefined || row.enabled === false || row.kind === 'info') {
+            return [model, []];
+        }
+        const cmds = [emitMsgForPage(model.activePageId, row.action)];
+        if (!frameNotificationOptions.enabled) {
+            return [model, cmds];
+        }
+        const feedback = row.feedback ?? {
+            title: 'Setting updated',
+            message: `${row.label} updated.`,
+        };
+        const nowMs = resolveClock(resolveSafeCtx()).now();
+        const notifications = pushNotification(model.runtimeNotifications, {
+            title: feedback.title ?? 'Setting updated',
+            message: feedback.message,
+            variant: 'TOAST',
+            tone: feedback.tone ?? 'INFO',
+            width: SETTINGS_FEEDBACK_TOAST_WIDTH,
+            placement: frameNotificationOptions.placement,
+            durationMs: feedback.durationMs ?? 2_500,
+            overflow: frameNotificationOptions.overflow,
+        }, nowMs);
+        const [nextModel, notificationCmds] = applyFrameNotificationState(model, notifications, nowMs);
+        return [nextModel, [...cmds, ...notificationCmds]];
+    }
     const app = {
         init() {
             const pageModels = {};
@@ -131,6 +525,14 @@ export function createFramedApp(options) {
                 columns: Math.max(1, options.initialColumns ?? 80),
                 rows: Math.max(1, options.initialRows ?? 24),
                 helpOpen: false,
+                helpScrollY: 0,
+                commandPaletteKind: undefined,
+                settingsOpen: false,
+                notificationCenterOpen: false,
+                quitConfirmOpen: false,
+                settingsFocusIndex: 0,
+                settingsScrollY: 0,
+                notificationCenterScrollY: 0,
                 transitionProgress: 1,
                 transitionGeneration: 0,
                 transitionFrame: 0,
@@ -139,6 +541,7 @@ export function createFramedApp(options) {
                 dockStateByPage: {},
                 splitRatioOverrides: {},
                 runtimeNotifications: createNotificationState(),
+                runtimeNotificationHistoryFilter: 'ALL',
                 runtimeNotificationLoopActive: false,
             };
             for (const pageId of pageOrder) {
@@ -239,23 +642,226 @@ export function createFramedApp(options) {
                     }, []];
             }
             if (isKeyMsg(msg)) {
-                if (model.commandPalette != null) {
+                const { activePage, activeInputArea, modalKeyMap, activeLayer, } = resolveLayerContext(model);
+                if (activeLayer.kind === 'search' || activeLayer.kind === 'command-palette') {
+                    if (msg.ctrl && !msg.alt && msg.key === 'c') {
+                        return applyQuitRequest(model, msg);
+                    }
+                    if (!msg.ctrl && !msg.alt && !msg.shift && msg.key === 'escape') {
+                        return [closeCommandPalette(model), withObservedKey(model, [], msg, 'palette')];
+                    }
+                    const frameAction = frameKeys.handle(msg);
+                    if (frameAction?.type === 'open-search') {
+                        if (activeLayer.kind === 'search') {
+                            return [closeCommandPalette(model), withObservedKey(model, [], msg, 'palette')];
+                        }
+                        return [openSearchPalette(model, frameKeys, options, pagesById), withObservedKey(model, [], msg, 'palette')];
+                    }
+                    if (frameAction?.type === 'open-palette') {
+                        if (activeLayer.kind === 'command-palette') {
+                            return [closeCommandPalette(model), withObservedKey(model, [], msg, 'palette')];
+                        }
+                        return [openCommandPalette(model, frameKeys, options, pagesById), withObservedKey(model, [], msg, 'palette')];
+                    }
+                    if (frameAction?.type === 'toggle-notifications') {
+                        const [nextModel, cmds] = applyFrameAction(frameAction, closeCommandPalette(model), options, pagesById);
+                        return [nextModel, withObservedKey(model, cmds, msg, 'palette')];
+                    }
                     const [nextModel, cmds] = handlePaletteKey(msg, model, paletteKeys, options, pagesById);
                     return [nextModel, withObservedKey(model, cmds, msg, 'palette')];
                 }
-                // Help acts as a modal layer when open: only close keys are handled.
-                if (model.helpOpen) {
-                    if (!msg.ctrl && !msg.alt && (msg.key === 'escape' || msg.key === '?')) {
-                        return [{ ...model, helpOpen: false }, withObservedKey(model, [], msg, 'help')];
+                if (activeLayer.kind === 'help') {
+                    if (!msg.ctrl && !msg.alt && (msg.key === '?' || msg.key === 'escape')) {
+                        return [{ ...model, helpOpen: false, helpScrollY: 0 }, withObservedKey(model, [], msg, 'help')];
+                    }
+                    if (isShellQuitRequest(msg)) {
+                        return applyQuitRequest(model, msg);
+                    }
+                    const helpAction = frameKeys.handle(msg);
+                    if (helpAction && isHelpScrollAction(helpAction)) {
+                        return [
+                            applyHelpScrollAction(model, activePage, helpAction, frameKeys, paletteKeys, options, pagesById),
+                            withObservedKey(model, [], msg, 'help'),
+                        ];
                     }
                     return [model, withObservedKey(model, [], msg, 'help')];
                 }
-                const activePage = pagesById.get(model.activePageId);
+                if (activeLayer.kind === 'settings') {
+                    const layout = resolveSettingsLayout(model, options, pagesById);
+                    if (layout != null) {
+                        const settingsFrameAction = frameKeys.handle(msg);
+                        if (!msg.ctrl && !msg.alt && msg.key === 'escape') {
+                            return [{
+                                    ...model,
+                                    settingsOpen: false,
+                                }, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (msg.ctrl && !msg.alt && msg.key === ',') {
+                            return [{
+                                    ...model,
+                                    settingsOpen: false,
+                                }, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'f2') {
+                            return [{
+                                    ...model,
+                                    settingsOpen: false,
+                                }, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === '?') {
+                            return [{ ...model, helpOpen: true }, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (isShellQuitRequest(msg)) {
+                            return applyQuitRequest(model, msg);
+                        }
+                        if (options.enableCommandPalette && !msg.ctrl && !msg.alt && msg.key === '/') {
+                            return [openSearchPalette(model, frameKeys, options, pagesById), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (options.enableCommandPalette && ((msg.ctrl && !msg.alt && msg.key === 'p') || (!msg.ctrl && !msg.alt && msg.key === ':'))) {
+                            return [openCommandPalette(model, frameKeys, options, pagesById), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (settingsFrameAction?.type === 'toggle-notifications') {
+                            const [nextModel, cmds] = applyFrameAction(settingsFrameAction, model, options, pagesById);
+                            return [nextModel, withObservedKey(model, cmds, msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'up') {
+                            return [moveSettingsFocus(model, layout, -1), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'down') {
+                            return [moveSettingsFocus(model, layout, 1), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'j') {
+                            return [scrollSettingsBy(model, layout, 1), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'k') {
+                            return [scrollSettingsBy(model, layout, -1), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'd') {
+                            return [scrollSettingsBy(model, layout, Math.max(1, layout.contentHeight - 1)), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'u') {
+                            return [scrollSettingsBy(model, layout, -Math.max(1, layout.contentHeight - 1)), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'g') {
+                            return [{ ...model, settingsScrollY: 0 }, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'G') {
+                            return [{ ...model, settingsScrollY: layout.maxScrollY }, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && (msg.key === 'enter' || msg.key === 'space')) {
+                            const row = layout.rows[clampSettingsFocus(model, layout)]?.row;
+                            if (row?.action !== undefined && row.enabled !== false && row.kind !== 'info') {
+                                const [nextModel, cmds] = activateSettingsRow(model, row);
+                                return [nextModel, withObservedKey(model, cmds, msg, 'frame')];
+                            }
+                            return [model, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        return [model, withObservedKey(model, [], msg, 'frame')];
+                    }
+                }
+                if (activeLayer.kind === 'notification-center') {
+                    const layout = resolveNotificationCenterLayout(model, options, pagesById);
+                    if (layout != null) {
+                        const centerFrameAction = frameKeys.handle(msg);
+                        if (!msg.ctrl && !msg.alt && msg.key === 'escape') {
+                            return [{
+                                    ...model,
+                                    notificationCenterOpen: false,
+                                    notificationCenterScrollY: 0,
+                                }, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (isShellQuitRequest(msg)) {
+                            return applyQuitRequest(model, msg);
+                        }
+                        if (centerFrameAction?.type === 'toggle-notifications') {
+                            const [nextModel, cmds] = applyFrameAction(centerFrameAction, model, options, pagesById);
+                            return [nextModel, withObservedKey(model, cmds, msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'f2') {
+                            const [nextModel, cmds] = applyFrameAction({ type: 'toggle-settings' }, model, options, pagesById);
+                            return [nextModel, withObservedKey(model, cmds, msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === '?') {
+                            return [{
+                                    ...model,
+                                    helpOpen: true,
+                                    notificationCenterOpen: false,
+                                    notificationCenterScrollY: 0,
+                                }, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (options.enableCommandPalette && !msg.ctrl && !msg.alt && msg.key === '/') {
+                            return [openSearchPalette({
+                                    ...model,
+                                    notificationCenterOpen: false,
+                                    notificationCenterScrollY: 0,
+                                }, frameKeys, options, pagesById), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (options.enableCommandPalette && ((msg.ctrl && !msg.alt && msg.key === 'p') || (!msg.ctrl && !msg.alt && msg.key === ':'))) {
+                            return [openCommandPalette({
+                                    ...model,
+                                    notificationCenterOpen: false,
+                                    notificationCenterScrollY: 0,
+                                }, frameKeys, options, pagesById), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && (msg.key === 'up' || msg.key === 'k')) {
+                            return [scrollNotificationCenterBy(model, layout, -1), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && (msg.key === 'down' || msg.key === 'j')) {
+                            return [scrollNotificationCenterBy(model, layout, 1), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'd') {
+                            return [scrollNotificationCenterBy(model, layout, Math.max(1, layout.contentHeight - 2)), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'u') {
+                            return [scrollNotificationCenterBy(model, layout, -Math.max(1, layout.contentHeight - 2)), withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'g') {
+                            return [{ ...model, notificationCenterScrollY: 0 }, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'G') {
+                            return [{ ...model, notificationCenterScrollY: layout.maxScrollY }, withObservedKey(model, [], msg, 'frame')];
+                        }
+                        if (!msg.ctrl && !msg.alt && msg.key === 'f') {
+                            const [nextModel, cmds] = cycleNotificationCenterFilter(model, layout);
+                            return [nextModel, withObservedKey(model, cmds, msg, 'frame')];
+                        }
+                        return [model, withObservedKey(model, [], msg, 'frame')];
+                    }
+                }
+                if (activeLayer.kind === 'quit-confirm') {
+                    if (isShellQuitConfirmAccept(msg)) {
+                        return [{
+                                ...model,
+                                quitConfirmOpen: false,
+                            }, withObservedKey(model, [quit()], msg, 'frame')];
+                    }
+                    if (isShellQuitConfirmDismiss(msg)) {
+                        return [{
+                                ...model,
+                                quitConfirmOpen: false,
+                            }, withObservedKey(model, [], msg, 'frame')];
+                    }
+                    return [model, withObservedKey(model, [], msg, 'frame')];
+                }
+                if (activeLayer.kind === 'page-modal' && modalKeyMap != null) {
+                    const modalAction = modalKeyMap.handle(msg);
+                    if (modalAction !== undefined) {
+                        return [model, withObservedKey(model, [emitMsgForPage(model.activePageId, modalAction)], msg, 'page')];
+                    }
+                    return [model, withObservedKey(model, [], msg, 'page')];
+                }
+                if (isShellQuitRequest(msg)) {
+                    return applyQuitRequest(model, msg);
+                }
+                const paneAction = activeInputArea?.keyMap?.handle(msg);
                 const pageAction = activePage.keyMap?.handle(msg);
                 const globalAction = options.globalKeys?.handle(msg);
                 const frameAction = frameKeys.handle(msg);
                 const keyPriority = options.keyPriority ?? 'frame-first';
                 if (keyPriority === 'page-first') {
+                    if (paneAction !== undefined) {
+                        return [model, withObservedKey(model, [emitMsgForPage(model.activePageId, paneAction)], msg, 'page')];
+                    }
                     if (pageAction !== undefined) {
                         return [model, withObservedKey(model, [emitMsgForPage(model.activePageId, pageAction)], msg, 'page')];
                     }
@@ -263,6 +869,9 @@ export function createFramedApp(options) {
                         return [model, withObservedKey(model, [emitMsg(globalAction)], msg, 'global')];
                     }
                     if (frameAction !== undefined) {
+                        if (frameAction.type === 'open-search' && options.enableCommandPalette) {
+                            return [openSearchPalette(model, frameKeys, options, pagesById), withObservedKey(model, [], msg, 'frame')];
+                        }
                         if (frameAction.type === 'open-palette' && options.enableCommandPalette) {
                             return [openCommandPalette(model, frameKeys, options, pagesById), withObservedKey(model, [], msg, 'frame')];
                         }
@@ -273,12 +882,18 @@ export function createFramedApp(options) {
                 }
                 if (frameAction !== undefined) {
                     // Handle palette opening here since applyFrameAction doesn't have access to palette deps
+                    if (frameAction.type === 'open-search' && options.enableCommandPalette) {
+                        return [openSearchPalette(model, frameKeys, options, pagesById), withObservedKey(model, [], msg, 'frame')];
+                    }
                     if (frameAction.type === 'open-palette' && options.enableCommandPalette) {
                         return [openCommandPalette(model, frameKeys, options, pagesById), withObservedKey(model, [], msg, 'frame')];
                     }
                     const [nextModel, cmds] = applyFrameAction(frameAction, model, options, pagesById);
                     return [nextModel, withObservedKey(model, cmds, msg, 'frame')];
                 }
+                if (paneAction !== undefined) {
+                    return [model, withObservedKey(model, [emitMsgForPage(model.activePageId, paneAction)], msg, 'page')];
+                }
                 if (globalAction !== undefined) {
                     return [model, withObservedKey(model, [emitMsg(globalAction)], msg, 'global')];
                 }
@@ -288,54 +903,51 @@ export function createFramedApp(options) {
                 return [model, withObservedKey(model, [], msg, 'unhandled')];
             }
             if (isMouseMsg(msg)) {
-                return [model, []];
+                const frameResult = handleFrameMouse(msg, model);
+                if (frameResult != null)
+                    return frameResult;
+                return updateTargetPage(model, model.activePageId, msg);
             }
             // Custom message path: route to originating page when command messages are scoped.
-            const scoped = isPageScopedMsg(msg) ? msg : undefined;
-            const targetPageId = scoped?.pageId ?? model.activePageId;
-            const targetPage = pagesById.get(targetPageId);
-            if (targetPage == null)
-                return [model, []];
-            const targetMsg = scoped?.msg ?? msg;
-            const pageModel = model.pageModels[targetPageId];
-            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;
-                }
+            if (isPageScopedMsg(msg)) {
+                return updateTargetPage(model, msg.pageId, msg.msg);
             }
-            const nextModels = { ...model.pageModels, [targetPageId]: nextPageModel };
-            const synced = syncPageFrameState({ ...model, pageModels: nextModels }, targetPageId, pagesById);
-            const wrappedCmds = Array.isArray(cmds) ? cmds.map((cmd) => wrapCmdForPage(targetPageId, cmd)) : [];
-            return [synced, wrappedCmds];
+            return updateTargetPage(model, model.activePageId, msg);
         },
         view(model) {
-            const activePage = pagesById.get(model.activePageId);
-            const header = renderHeaderLine(model, options, pagesById);
-            const helpLine = renderHelpLine(model, frameKeys, options, activePage);
-            const bodyRect = frameBodyRect(model.columns, model.rows);
+            const { activePage, layerStack, activeLayer, } = resolvePresentedLayerContext(model);
+            const header = resolveHeaderLine(model, options, pagesById).surface;
+            const helpLine = renderHelpLine(model, activeLayer, options.i18n, resolveNotificationFooterCue(model, options, pagesById));
+            const bodyRect = resolveBodyRect(model, options);
             // 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 frameSurface = getComposedFrameScratch(model.columns, model.rows);
+            frameSurface.clear();
+            frameSurface.blit(header, 0, 0);
+            if (model.rows > 1) {
+                frameSurface.blit(helpLine, 0, model.rows - 1);
+            }
+            let activeResult;
+            let bodySurface;
             const activeTransition = model.activeTransition ?? options.transition;
             if (model.previousPageId != null && model.transitionProgress < 1 && activeTransition && activeTransition !== 'none') {
+                const activeBodyResult = maximizedPaneId
+                    ? renderMaximizedPane(model.activePageId, model, bodyRect, pagesById, maximizedPaneId)
+                    : renderPageContent(model.activePageId, model, bodyRect, pagesById);
+                activeResult = activeBodyResult;
+                bodySurface = activeBodyResult.surface;
                 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, model.transitionFrame);
+                    bodySurface = renderTransition(prevResult.surface, activeBodyResult.surface, activeTransition, model.transitionProgress, bodyRect.width, bodyRect.height, ctx, model.transitionFrame);
                 }
             }
-            bodyOutput = fitBlock(bodyOutput, bodyRect.width, bodyRect.height).join('\n');
+            else {
+                activeResult = maximizedPaneId
+                    ? renderMaximizedPaneInto(model.activePageId, model, bodyRect, pagesById, maximizedPaneId, frameSurface)
+                    : renderPageContentInto(model.activePageId, model, bodyRect, pagesById, frameSurface);
+            }
             const overlays = [];
             if (options.overlayFactory != null) {
                 overlays.push(...options.overlayFactory({
@@ -355,12 +967,31 @@ export function createFramedApp(options) {
                     ctx: ctx ?? undefined,
                 }));
             }
+            if (model.settingsOpen) {
+                const settingsLayer = layerStack.find((layer) => layer.kind === 'settings');
+                const settingsOverlay = renderSettingsDrawer(model, options, pagesById, settingsLayer?.title);
+                if (settingsOverlay != null) {
+                    overlays.push(settingsOverlay);
+                }
+            }
+            if (model.notificationCenterOpen) {
+                const notificationLayer = layerStack.find((layer) => layer.kind === 'notification-center');
+                const notificationCenterOverlay = renderNotificationCenterDrawer(model, options, pagesById, notificationLayer?.title);
+                if (notificationCenterOverlay != null) {
+                    overlays.push(notificationCenterOverlay);
+                }
+            }
             if (model.helpOpen) {
-                const full = helpView(mergeBindingSources(frameKeys, options.globalKeys, activePage.helpSource ?? activePage.keyMap));
+                const helpOverlay = renderHelpOverlay(model, activePage, frameKeys, paletteKeys, options, pagesById);
                 overlays.push(modal({
-                    title: 'Keyboard Help',
-                    body: full.length > 0 ? full : 'No bindings',
-                    hint: 'Press ? to close',
+                    title: activeLayer.kind === 'help'
+                        ? (activeLayer.title ?? frameMessage(options.i18n, 'help.title', 'Keyboard Help'))
+                        : frameMessage(options.i18n, 'help.title', 'Keyboard Help'),
+                    body: helpOverlay.body,
+                    hint: typeof activeLayer.hintSource === 'string'
+                        ? activeLayer.hintSource
+                        : frameMessage(options.i18n, 'help.hint', 'j/k scroll • d/u page • g/G top/bottom • mouse wheel • ?/Esc close'),
+                    width: helpOverlay.body.width + 4,
                     screenWidth: model.columns,
                     screenHeight: model.rows,
                 }));
@@ -368,25 +999,27 @@ export function createFramedApp(options) {
             if (model.commandPalette != null) {
                 const paletteWidth = Math.max(20, Math.min(80, model.columns - 4));
                 const paletteBody = commandPalette(model.commandPalette, { width: Math.max(16, paletteWidth - 4) });
+                const paletteLayer = activeLayer.kind === 'search' || activeLayer.kind === 'command-palette'
+                    ? activeLayer
+                    : undefined;
                 overlays.push(modal({
-                    title: 'Command Palette',
+                    title: paletteLayer?.title ?? model.commandPaletteTitle ?? frameMessage(options.i18n, 'palette.title', 'Command Palette'),
                     body: paletteBody,
-                    hint: 'Enter select • Esc close',
+                    hint: typeof paletteLayer?.hintSource === 'string'
+                        ? paletteLayer.hintSource
+                        : frameMessage(options.i18n, 'palette.hint', 'Enter select • Esc close'),
                     width: paletteWidth,
                     screenWidth: model.columns,
                     screenHeight: model.rows,
                 }));
             }
-            return composeFrameSurface({
-                width: model.columns,
-                height: model.rows,
-                header,
-                helpLine,
-                bodyOutput,
-                bodyRect,
-                overlays,
-                dimBackground: overlays.length > 0,
-            });
+            if (model.quitConfirmOpen) {
+                overlays.push(renderShellQuitOverlay(model.columns, model.rows, options.i18n));
+            }
+            if (bodySurface != null && bodyRect.width > 0 && bodyRect.height > 0) {
+                frameSurface.blit(bodySurface, bodyRect.col, bodyRect.row);
+            }
+            return compositeSurfaceInto(frameSurface, frameSurface, overlays, { dim: overlays.length > 0 });
         },
         routeRuntimeIssue(issue) {
             if (!frameNotificationOptions.enabled)
@@ -396,37 +1029,525 @@ export function createFramedApp(options) {
     };
     return app;
 }
-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 (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);
+function focusPane(model, paneId) {
+    if (model.focusedPaneByPage[model.activePageId] === paneId)
+        return model;
+    return {
+        ...model,
+        focusedPaneByPage: {
+            ...model.focusedPaneByPage,
+            [model.activePageId]: paneId,
+        },
+    };
+}
+function paneHitAtPosition(model, col, row, pagesById, options) {
+    const bodyRect = resolveBodyRect(model, options);
+    const maxState = model.maximizedPaneByPage[model.activePageId];
+    const maximizedPaneId = maxState?.maximizedPaneId;
+    const renderResult = maximizedPaneId
+        ? renderMaximizedPane(model.activePageId, model, bodyRect, pagesById, maximizedPaneId)
+        : renderPageContent(model.activePageId, model, bodyRect, pagesById);
+    for (const [paneId, rect] of renderResult.paneRects.entries()) {
+        if (col >= rect.col
+            && col < rect.col + rect.width
+            && row >= rect.row
+            && row < rect.row + rect.height) {
+            return { paneId, rect };
+        }
     }
-    if (options.dimBackground) {
-        dimSurface(frame);
+    return undefined;
+}
+function resolveBodyRect(model, options) {
+    return frameBodyRect(model.columns, model.rows, options.bodyTopRows ?? 1, options.bodyBottomRows ?? 1);
+}
+function renderHelpOverlay(model, activePage, frameKeys, paletteKeys, options, pagesById) {
+    const activePageModel = model.pageModels[model.activePageId];
+    const activeInputArea = findInputAreaByPaneId(resolveInputAreas(activePage, activePageModel), model.focusedPaneByPage[model.activePageId]);
+    const modalKeyMap = activePage.modalKeyMap?.(activePageModel);
+    const settings = resolveFrameSettings(model, options, pagesById);
+    const notificationCenter = resolveFrameNotificationCenter(model, options, pagesById);
+    const workspaceHintSource = options.helpLineSource?.({
+        model,
+        activePage,
+        frameKeys,
+        globalKeys: options.globalKeys,
+    });
+    const workspaceHelpSource = mergeBindingSources(frameKeys, quitHelpKeys, options.globalKeys, activeInputArea?.helpSource ?? activeInputArea?.keyMap, activePage.helpSource ?? activePage.keyMap);
+    const layerStack = describeFrameLayerStack(model, {
+        pageModalOpen: modalKeyMap != null,
+        layers: {
+            workspace: {
+                title: activePage.title,
+                hintSource: typeof workspaceHintSource === 'string'
+                    ? workspaceHintSource
+                    : workspaceHintSource ?? mergeBindingSources(frameKeys, options.globalKeys, activeInputArea?.helpSource ?? activeInputArea?.keyMap, activePage.helpSource ?? activePage.keyMap),
+                helpSource: workspaceHelpSource,
+            },
+            'page-modal': {
+                title: activePage.title,
+                hintSource: modalKeyMap ?? activePage.helpSource ?? activePage.keyMap,
+                helpSource: mergeBindingSources(quitHelpKeys, modalKeyMap, activePage.helpSource ?? activePage.keyMap),
+            },
+            settings: {
+                title: settings?.title ?? frameMessage(options.i18n, 'settings.title', 'Settings'),
+                hintSource: frameMessage(options.i18n, 'settings.footer', 'F2/Esc close • ↑/↓ rows • Enter toggle • / search • q quit'),
+                helpSource: mergeBindingSources(settingsHelpKeys, quitHelpKeys),
+            },
+            help: {
+                title: frameMessage(options.i18n, 'help.title', 'Keyboard Help'),
+                hintSource: frameMessage(options.i18n, 'help.hint', 'j/k scroll • d/u page • g/G top/bottom • mouse wheel • ?/Esc close'),
+                helpSource: helpLayerHelpKeys,
+            },
+            'notification-center': {
+                title: notificationCenter == null
+                    ? frameMessage(options.i18n, 'notifications.title', 'Notifications')
+                    : `${notificationCenter.title} • ${frameNotificationFilterLabel(options.i18n, notificationCenter.activeFilter)}`,
+                hintSource: frameMessage(options.i18n, 'notifications.footer', 'Shift+N close • f filter • j/k scroll • q quit'),
+                helpSource: mergeBindingSources(notificationCenterHelpKeys, quitHelpKeys),
+            },
+            search: {
+                title: model.commandPaletteTitle ?? activePage.searchTitle ?? frameMessage(options.i18n, 'search.title', 'Search'),
+                hintSource: frameMessage(options.i18n, 'palette.hint', 'Enter select • Esc close'),
+                helpSource: mergeBindingSources(paletteKeys, quitHelpKeys),
+            },
+            'command-palette': {
+                title: model.commandPaletteTitle ?? frameMessage(options.i18n, 'palette.title', 'Command Palette'),
+                hintSource: frameMessage(options.i18n, 'palette.hint', 'Enter select • Esc close'),
+                helpSource: mergeBindingSources(paletteKeys, quitHelpKeys),
+            },
+            'quit-confirm': {
+                title: frameMessage(options.i18n, 'quit.title', 'Quit?'),
+                hintSource: frameMessage(options.i18n, 'quit.footer', 'Y quit • N stay'),
+                helpSource: quitConfirmHelpKeys,
+            },
+        },
+    });
+    const beneathHelpLayer = layerStack.length > 1 ? layerStack[layerStack.length - 2] : undefined;
+    const source = beneathHelpLayer?.helpSource ?? workspaceHelpSource;
+    const maxDialogWidth = Math.max(28, Math.min(model.columns - 4, 88));
+    const bodyWidth = Math.max(20, maxDialogWidth - 4);
+    const helpSurface = helpViewSurface(source, {
+        title: undefined,
+        width: bodyWidth,
+    });
+    const pagerHeight = Math.max(4, Math.min(helpSurface.height + 1, Math.max(4, model.rows - 8)));
+    const pagerState = createPagerStateForSurface(helpSurface, {
+        width: bodyWidth,
+        height: pagerHeight,
+    });
+    const scrollY = Math.max(0, Math.min(model.helpScrollY, pagerState.scroll.maxY));
+    const scrolledState = {
+        ...pagerState,
+        scroll: {
+            ...pagerState.scroll,
+            y: scrollY,
+        },
+    };
+    return {
+        body: pagerSurface(helpSurface, scrolledState, { showScrollbar: true, showStatus: true }),
+        maxScrollY: pagerState.scroll.maxY,
+        scrollY,
+    };
+}
+function isHelpScrollAction(action) {
+    return action.type === 'scroll-up'
+        || action.type === 'scroll-down'
+        || action.type === 'page-up'
+        || action.type === 'page-down'
+        || action.type === 'top'
+        || action.type === 'bottom';
+}
+function applyHelpScrollAction(model, activePage, action, frameKeys, paletteKeys, options, pagesById) {
+    const overlay = renderHelpOverlay(model, activePage, frameKeys, paletteKeys, options, pagesById);
+    const pagerState = {
+        scroll: {
+            y: overlay.scrollY,
+            maxY: overlay.maxScrollY,
+            x: 0,
+            maxX: 0,
+            totalLines: overlay.maxScrollY + Math.max(1, overlay.body.height - 1),
+            visibleLines: Math.max(1, overlay.body.height - 1),
+        },
+        content: '',
+        width: overlay.body.width,
+        height: overlay.body.height,
+    };
+    let next = pagerState;
+    switch (action.type) {
+        case 'scroll-up':
+            next = pagerScrollBy(pagerState, -1);
+            break;
+        case 'scroll-down':
+            next = pagerScrollBy(pagerState, 1);
+            break;
+        case 'page-up':
+            next = pagerPageUp(pagerState);
+            break;
+        case 'page-down':
+            next = pagerPageDown(pagerState);
+            break;
+        case 'top':
+            next = pagerScrollToTop(pagerState);
+            break;
+        case 'bottom':
+            next = pagerScrollToBottom(pagerState);
+            break;
     }
-    for (const overlay of options.overlays) {
-        const overlaySurface = overlay.surface ?? parseAnsiToSurface(overlay.content, maxVisibleWidth(overlay.content), overlay.content.split('\n').length);
-        frame.blit(overlaySurface, overlay.col, overlay.row);
+    return {
+        ...model,
+        helpScrollY: next.scroll.y,
+    };
+}
+function applyHelpScroll(model, activePage, delta, frameKeys, paletteKeys, options, pagesById) {
+    const overlay = renderHelpOverlay(model, activePage, frameKeys, paletteKeys, options, pagesById);
+    return {
+        ...model,
+        helpScrollY: Math.max(0, Math.min(overlay.maxScrollY, overlay.scrollY + delta)),
+    };
+}
+function resolveFrameSettings(model, options, pagesById) {
+    const activePage = pagesById.get(model.activePageId);
+    return options.settings?.({
+        model,
+        activePage,
+        pageModel: model.pageModels[model.activePageId],
+    });
+}
+function resolveFrameNotificationCenter(model, options, pagesById) {
+    const activePage = pagesById.get(model.activePageId);
+    const pageModel = model.pageModels[model.activePageId];
+    const provided = options.notificationCenter?.({
+        model,
+        activePage,
+        pageModel,
+        runtimeNotifications: model.runtimeNotifications,
+    });
+    if (provided != null) {
+        const filters = provided.filters != null && provided.filters.length > 0
+            ? provided.filters
+            : DEFAULT_NOTIFICATION_CENTER_FILTERS;
+        const activeFilter = filters.includes(provided.activeFilter ?? 'ALL')
+            ? (provided.activeFilter ?? 'ALL')
+            : filters[0];
+        return {
+            title: provided.title ?? frameMessage(options.i18n, 'notifications.title', 'Notifications'),
+            state: provided.state,
+            filters,
+            activeFilter,
+            onFilterChange: provided.onFilterChange,
+        };
     }
-    return frame;
-}
-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 modifiers = new Set(cell.modifiers ?? []);
-            modifiers.add('dim');
-            surface.set(x, y, { ...cell, modifiers: Array.from(modifiers) });
+    if (options.runtimeNotifications === false)
+        return undefined;
+    return {
+        title: frameMessage(options.i18n, 'notifications.title', 'Notifications'),
+        state: model.runtimeNotifications,
+        filters: DEFAULT_NOTIFICATION_CENTER_FILTERS,
+        activeFilter: model.runtimeNotificationHistoryFilter,
+    };
+}
+function resolveSettingsLayout(model, options, pagesById) {
+    const settings = resolveFrameSettings(model, options, pagesById);
+    if (settings == null)
+        return undefined;
+    const sections = settings.sections.filter((section) => section.rows.length > 0);
+    if (sections.length === 0)
+        return undefined;
+    const drawerWidth = resolveSettingsDrawerWidth(model.columns);
+    const anchor = frameStartAnchor(options.i18n);
+    const startCol = anchor === 'left' ? 0 : Math.max(0, model.columns - drawerWidth);
+    const contentWidth = Math.max(16, drawerWidth - 4);
+    const preferenceSections = preparePreferenceSections(toPreferenceSections(sections));
+    const rows = [];
+    let line = 0;
+    for (let sectionIndex = 0; sectionIndex < preferenceSections.length; sectionIndex++) {
+        const section = preferenceSections[sectionIndex];
+        if (sectionIndex > 0) {
+            line += 1;
+        }
+        line += 1;
+        line += 1;
+        for (let rowIndex = 0; rowIndex < section.rows.length; rowIndex++) {
+            const preparedRow = section.rows[rowIndex];
+            const row = sections[sectionIndex].rows[rowIndex];
+            const rowLayout = resolvePreferenceRowLayout(preparedRow, contentWidth);
+            rows.push({
+                index: rows.length,
+                line,
+                height: rowLayout.height,
+                row,
+            });
+            line += rowLayout.height;
+            if (rowIndex < section.rows.length - 1) {
+                line += 1;
+            }
         }
     }
+    const contentHeight = Math.max(1, model.rows - 2);
+    const totalLines = Math.max(1, line);
+    const maxScrollY = Math.max(0, totalLines - contentHeight);
+    return {
+        settings: {
+            ...settings,
+            sections,
+        },
+        preferenceSections,
+        rows,
+        anchor,
+        startCol,
+        drawerWidth,
+        contentWidth,
+        contentHeight,
+        totalLines,
+        maxScrollY,
+    };
+}
+function resolveNotificationCenterDrawerWidth(columns) {
+    const boundedColumns = Math.max(28, columns);
+    return Math.min(Math.max(32, Math.floor(boundedColumns * 0.34)), Math.max(32, boundedColumns - 4), 52);
+}
+function resolveNotificationCenterLayout(model, options, pagesById) {
+    const center = resolveFrameNotificationCenter(model, options, pagesById);
+    if (center == null)
+        return undefined;
+    const drawerWidth = resolveNotificationCenterDrawerWidth(model.columns);
+    const anchor = frameEndAnchor(options.i18n);
+    const startCol = anchor === 'left' ? 0 : Math.max(0, model.columns - drawerWidth);
+    const contentWidth = Math.max(18, drawerWidth - 4);
+    const content = renderNotificationCenterSurface(center, contentWidth, options.i18n);
+    const contentHeight = Math.max(1, model.rows - 2);
+    const pagerState = createPagerStateForSurface(content, {
+        width: contentWidth,
+        height: contentHeight,
+    });
+    return {
+        center,
+        anchor,
+        startCol,
+        drawerWidth,
+        contentWidth,
+        contentHeight,
+        content,
+        maxScrollY: pagerState.scroll.maxY,
+    };
+}
+function resolveSettingsDrawerWidth(columns) {
+    const boundedColumns = Math.max(24, columns);
+    return Math.min(Math.max(28, Math.floor(boundedColumns * 0.3)), Math.max(28, boundedColumns - 4), 42);
+}
+function clampSettingsFocus(model, layout) {
+    if (layout.rows.length === 0)
+        return 0;
+    return Math.max(0, Math.min(model.settingsFocusIndex, layout.rows.length - 1));
+}
+function clampSettingsScroll(model, layout) {
+    return Math.max(0, Math.min(model.settingsScrollY, layout.maxScrollY));
+}
+function resolveInputAreas(page, pageModel) {
+    return page.inputAreas?.(pageModel) ?? [];
+}
+function findInputAreaByPaneId(inputAreas, paneId) {
+    if (paneId == null)
+        return undefined;
+    return inputAreas.find((area) => area.paneId === paneId);
+}
+function ensureSettingsRangeVisible(startLine, height, scrollY, visibleLines, maxScrollY) {
+    let next = scrollY;
+    const endLine = startLine + Math.max(1, height) - 1;
+    if (startLine < next) {
+        next = startLine;
+    }
+    else if (endLine >= next + visibleLines) {
+        next = endLine - visibleLines + 1;
+    }
+    return Math.max(0, Math.min(next, maxScrollY));
+}
+function moveSettingsFocus(model, layout, delta) {
+    if (layout.rows.length === 0)
+        return model;
+    const nextFocus = Math.max(0, Math.min(clampSettingsFocus(model, layout) + delta, layout.rows.length - 1));
+    const focusedRow = layout.rows[nextFocus];
+    return {
+        ...model,
+        settingsFocusIndex: nextFocus,
+        settingsScrollY: ensureSettingsRangeVisible(focusedRow.line, focusedRow.height, clampSettingsScroll(model, layout), layout.contentHeight, layout.maxScrollY),
+    };
+}
+function scrollSettingsBy(model, layout, delta) {
+    return {
+        ...model,
+        settingsScrollY: Math.max(0, Math.min(clampSettingsScroll(model, layout) + delta, layout.maxScrollY)),
+    };
 }
-function maxVisibleWidth(text) {
-    return text.split('\n').reduce((max, line) => Math.max(max, visibleLength(line)), 0);
+function scrollNotificationCenterBy(model, layout, delta) {
+    return {
+        ...model,
+        notificationCenterScrollY: Math.max(0, Math.min(model.notificationCenterScrollY + delta, layout.maxScrollY)),
+    };
+}
+function cycleNotificationCenterFilter(model, layout) {
+    const filters = layout.center.filters;
+    if (filters.length < 2)
+        return [model, []];
+    const currentIndex = Math.max(0, filters.indexOf(layout.center.activeFilter));
+    const nextFilter = filters[(currentIndex + 1) % filters.length];
+    if (layout.center.onFilterChange != null) {
+        const action = layout.center.onFilterChange(nextFilter);
+        return [{
+                ...model,
+                notificationCenterScrollY: 0,
+            }, action === undefined ? [] : [emitMsgForPage(model.activePageId, action)]];
+    }
+    return [{
+            ...model,
+            runtimeNotificationHistoryFilter: nextFilter,
+            notificationCenterScrollY: 0,
+        }, []];
+}
+function isInsideSettingsDrawer(col, row, layout, model) {
+    return col >= layout.startCol
+        && col < layout.startCol + layout.drawerWidth
+        && row >= 0
+        && row < model.rows;
+}
+function settingsRowAtPosition(col, row, model, layout) {
+    if (!isInsideSettingsDrawer(col, row, layout, model))
+        return undefined;
+    if (row <= 0 || row >= model.rows - 1)
+        return undefined;
+    const contentLine = (row - 1) + clampSettingsScroll(model, layout);
+    return layout.rows.find((candidate) => contentLine >= candidate.line && contentLine < candidate.line + candidate.height);
+}
+function isInsideNotificationCenterDrawer(col, row, layout, model) {
+    return col >= layout.startCol
+        && col < layout.startCol + layout.drawerWidth
+        && row >= 0
+        && row < model.rows;
+}
+function renderSettingsDrawer(model, options, pagesById, titleOverride) {
+    const layout = resolveSettingsLayout(model, options, pagesById);
+    if (layout == null)
+        return undefined;
+    const scrollY = clampSettingsScroll(model, layout);
+    const content = renderSettingsSurface(layout, model);
+    const pagerState = createPagerStateForSurface(content, {
+        width: layout.contentWidth,
+        height: layout.contentHeight,
+    });
+    const scrolledState = {
+        ...pagerState,
+        scroll: {
+            ...pagerState.scroll,
+            y: scrollY,
+        },
+    };
+    const body = pagerSurface(content, scrolledState, {
+        showScrollbar: layout.maxScrollY > 0,
+        showStatus: false,
+    });
+    return drawer({
+        anchor: layout.anchor,
+        title: titleOverride ?? layout.settings.title ?? frameMessage(options.i18n, 'settings.title', 'Settings'),
+        content: body,
+        borderToken: layout.settings.borderToken,
+        bgToken: layout.settings.bgToken,
+        ctx: resolveSafeCtx() ?? undefined,
+        width: layout.drawerWidth,
+        screenWidth: model.columns,
+        screenHeight: model.rows,
+    });
+}
+function renderNotificationCenterDrawer(model, options, pagesById, titleOverride) {
+    const layout = resolveNotificationCenterLayout(model, options, pagesById);
+    if (layout == null)
+        return undefined;
+    const pagerState = createPagerStateForSurface(layout.content, {
+        width: layout.contentWidth,
+        height: layout.contentHeight,
+    });
+    const scrolledState = {
+        ...pagerState,
+        scroll: {
+            ...pagerState.scroll,
+            y: Math.max(0, Math.min(model.notificationCenterScrollY, layout.maxScrollY)),
+        },
+    };
+    const body = pagerSurface(layout.content, scrolledState, {
+        showScrollbar: layout.maxScrollY > 0,
+        showStatus: false,
+    });
+    return drawer({
+        anchor: layout.anchor,
+        title: titleOverride ?? `${layout.center.title} • ${frameNotificationFilterLabel(options.i18n, layout.center.activeFilter)}`,
+        content: body,
+        width: layout.drawerWidth,
+        screenWidth: model.columns,
+        screenHeight: model.rows,
+    });
+}
+function renderSettingsSurface(layout, model) {
+    const focusedIndex = clampSettingsFocus(model, layout);
+    return preferenceListSurface(layout.preferenceSections, {
+        width: layout.contentWidth,
+        selectedRowId: layout.rows[focusedIndex]?.row.id,
+        ctx: resolveSafeCtx() ?? undefined,
+        theme: layout.settings.listTheme,
+    });
+}
+function toPreferenceSections(sections) {
+    return sections.map((section) => ({
+        id: section.id,
+        title: section.title,
+        rows: section.rows.map((row) => toPreferenceRow(row)),
+    }));
+}
+function toPreferenceRow(row) {
+    return {
+        id: row.id,
+        label: row.label,
+        description: row.description,
+        valueLabel: row.valueLabel,
+        kind: row.kind,
+        checked: row.checked,
+        enabled: row.enabled,
+    };
+}
+function resolveNotificationFooterCue(model, options, pagesById) {
+    const center = resolveFrameNotificationCenter(model, options, pagesById);
+    if (center == null)
+        return undefined;
+    const liveCount = center.state.items.length;
+    const archivedCount = countNotificationHistory(center.state, center.activeFilter);
+    return frameNotificationCue(options.i18n, liveCount, archivedCount);
+}
+function renderNotificationCenterSurface(center, width, i18n) {
+    const ctx = resolveSafeCtx() ?? undefined;
+    const rows = [
+        insetLineSurface(`Live: ${center.state.items.length} • Archived: ${center.state.history.length}`, width),
+        insetLineSurface(`Filter: ${frameNotificationFilterLabel(i18n, center.activeFilter)}`, width),
+    ];
+    const liveItems = [...center.state.items].sort((left, right) => right.updatedAtMs - left.updatedAtMs || right.id - left.id);
+    if (liveItems.length > 0) {
+        rows.push(createSurface(width, 1));
+        rows.push(insetLineSurface(ctx == null ? 'Current stack' : ctx.style.bold('Current stack'), width));
+        rows.push(createSurface(width, 1));
+        for (let index = 0; index < liveItems.length; index++) {
+            rows.push(renderNotificationReviewEntrySurface(liveItems[index], {
+                width,
+                ctx,
+                metaLabel: `${liveItems[index].variant} • live`,
+            }));
+            if (index < liveItems.length - 1)
+                rows.push(createSurface(width, 1));
+        }
+    }
+    rows.push(createSurface(width, 1));
+    rows.push(renderNotificationHistorySurface(center.state, {
+        width,
+        height: Number.MAX_SAFE_INTEGER,
+        filter: center.activeFilter,
+        ctx,
+    }));
+    return vstackSurface(...rows);
 }
 //# sourceMappingURL=app-frame.js.map