@flyingrobots/bijou-tui 4.0.0 → 4.2.0

package/dist/app-frame.js

@@ -4,23 +4,101 @@
  * Provides tabs, pane focus/scroll isolation, shell key handling, help,
  * panel-scoped overlay context, and optional frame-level command palette.
  */
-import { createSurface, resolveClock, 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 { compositeSurface, modal } from './overlay.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, pagerSurface, } from './pager.js';
 import { restoreLayoutState } from './layout-preset.js';
-import { createNotificationState, dismissNotification, hitTestNotificationStack, 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 { resolveHeaderLine, renderHelpLine, renderPageContent, renderMaximizedPane, renderTransition, } from './app-frame-render.js';
-import { applyFrameAction, switchTab, syncPageFrameState, } from './app-frame-actions.js';
-import { handlePaletteKey, openCommandPalette, } from './app-frame-palette.js';
+import { activeFrameLayer, describeFrameLayerStack, describeFrameRuntimeViewStack, } from './app-frame-layers.js';
+import { applyRuntimeCommandBuffer, bufferRuntimeRouteResult, createRuntimeBuffers, createRuntimeRetainedLayouts, retainRuntimeLayout, routeRuntimeInput, } from './runtime-engine.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, describeFrameRuntimeViewStack, 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 EMPTY_RUNTIME_LAYOUTS = createRuntimeRetainedLayouts();
+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 {
@@ -77,8 +155,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' },
@@ -87,11 +170,783 @@ export function createFramedApp(options) {
         select: { type: 'cp-select' },
         close: { type: 'cp-close' },
     });
-    function withObservedKey(model, cmds, msg, route) {
-        const observed = options.observeKey?.(msg, route);
-        if (observed === undefined)
-            return [...cmds];
-        return [emitMsgForPage(model.activePageId, observed), ...cmds];
+    function getComposedFrameScratch(width, height) {
+        if (composedFrameScratch == null
+            || composedFrameScratch.width !== width
+            || composedFrameScratch.height !== height) {
+            composedFrameScratch = createSurface(width, height);
+        }
+        return composedFrameScratch;
+    }
+    function closeCommandPalette(model) {
+        return {
+            ...model,
+            commandPalette: undefined,
+            commandPaletteEntries: undefined,
+            commandPaletteTitle: undefined,
+            commandPaletteKind: undefined,
+        };
+    }
+    const shellCommandHandlers = {
+        // --- overlay lifecycle ---
+        'close-help': (model) => ({ ...model, helpOpen: false, helpScrollY: 0 }),
+        'close-settings': (model) => ({ ...model, settingsOpen: false }),
+        'close-notification-center': (model) => ({ ...model, notificationCenterOpen: false, notificationCenterScrollY: 0 }),
+        'close-palette': (model) => closeCommandPalette(model),
+        'close-quit-confirm': (model) => ({ ...model, quitConfirmOpen: false }),
+        'open-help': (model) => ({ ...model, helpOpen: true }),
+        'open-quit-confirm': (model) => {
+            if (!shouldUseShellQuitConfirm())
+                return model;
+            if (model.quitConfirmOpen)
+                return model;
+            return {
+                ...model,
+                quitConfirmOpen: true,
+                helpOpen: false,
+                helpScrollY: 0,
+                settingsOpen: false,
+                notificationCenterOpen: false,
+                commandPalette: undefined,
+                commandPaletteEntries: undefined,
+                commandPaletteTitle: undefined,
+                commandPaletteKind: undefined,
+            };
+        },
+        'open-search-palette': (model) => openSearchPalette(model, frameKeys, options, pagesById),
+        'open-command-palette': (model) => openCommandPalette(model, frameKeys, options, pagesById),
+        // --- settings ---
+        'settings-focus-move': (model, cmd) => {
+            const c = cmd;
+            const layout = resolveSettingsLayout(model, options, pagesById);
+            return layout != null ? moveSettingsFocus(model, layout, c.delta) : model;
+        },
+        'settings-scroll': (model, cmd) => {
+            const c = cmd;
+            const layout = resolveSettingsLayout(model, options, pagesById);
+            return layout != null ? scrollSettingsBy(model, layout, c.delta) : model;
+        },
+        'settings-scroll-to': (model, cmd) => {
+            const c = cmd;
+            const layout = resolveSettingsLayout(model, options, pagesById);
+            if (layout == null)
+                return model;
+            return { ...model, settingsScrollY: c.position === 'top' ? 0 : layout.maxScrollY };
+        },
+        'activate-settings-row': (model, cmd, teaCmds) => {
+            const c = cmd;
+            const layout = resolveSettingsLayout(model, options, pagesById);
+            if (layout == null)
+                return model;
+            const hitRow = layout.rows.find((r) => r.index === c.rowIndex);
+            if (hitRow == null)
+                return model;
+            const focusedModel = { ...model, settingsFocusIndex: hitRow.index };
+            if (hitRow.row.action === undefined || hitRow.row.enabled === false || hitRow.row.kind === 'info') {
+                return focusedModel;
+            }
+            const [nextModel, cmds] = activateSettingsRow(focusedModel, hitRow.row);
+            teaCmds.push(...cmds);
+            return nextModel;
+        },
+        // --- notification center ---
+        'notification-center-scroll': (model, cmd) => {
+            const c = cmd;
+            const layout = resolveNotificationCenterLayout(model, options, pagesById);
+            return layout != null ? scrollNotificationCenterBy(model, layout, c.delta) : model;
+        },
+        'notification-center-scroll-to': (model, cmd) => {
+            const c = cmd;
+            const layout = resolveNotificationCenterLayout(model, options, pagesById);
+            if (layout == null)
+                return model;
+            return { ...model, notificationCenterScrollY: c.position === 'top' ? 0 : layout.maxScrollY };
+        },
+        'cycle-notification-filter': (model, _cmd, teaCmds) => {
+            const layout = resolveNotificationCenterLayout(model, options, pagesById);
+            if (layout == null)
+                return model;
+            const [nextModel, cmds] = cycleNotificationCenterFilter(model, layout);
+            teaCmds.push(...cmds);
+            return nextModel;
+        },
+        // --- help ---
+        'help-scroll': (model, cmd) => {
+            const c = cmd;
+            const activePage = pagesById.get(model.activePageId);
+            const overlay = renderHelpOverlay(model, activePage, frameKeys, paletteKeys, options, pagesById);
+            const viewportHeight = Math.max(1, overlay.body.height - 1);
+            const delta = c.action === 'down' ? 3
+                : c.action === 'up' ? -3
+                    : c.action === 'page-down' ? viewportHeight
+                        : c.action === 'page-up' ? -viewportHeight
+                            : c.action === 'bottom' ? Infinity
+                                : /* top */ -Infinity;
+            return {
+                ...model,
+                helpScrollY: Math.max(0, Math.min(overlay.maxScrollY, overlay.scrollY + delta)),
+            };
+        },
+        // --- workspace ---
+        'focus-pane': (model, cmd) => {
+            const c = cmd;
+            return focusPane(model, c.paneId);
+        },
+        'scroll-focused-pane': (model, cmd) => {
+            const c = cmd;
+            return scrollFocusedPane(model, { type: c.direction === 'down' ? 'scroll-down' : 'scroll-up' }, pagesById, options);
+        },
+        'switch-tab': (model, cmd, teaCmds) => {
+            const c = cmd;
+            const [nextModel, cmds] = switchTab(model, c.delta, pagesById, options);
+            teaCmds.push(...cmds);
+            return nextModel;
+        },
+        // --- delegation ---
+        'apply-frame-action': (model, cmd, teaCmds) => {
+            const c = cmd;
+            const [nextModel, cmds] = applyFrameAction(c.action, model, options, pagesById);
+            teaCmds.push(...cmds);
+            return nextModel;
+        },
+        'palette-key': (model, cmd, teaCmds) => {
+            const c = cmd;
+            const [nextModel, cmds] = handlePaletteKey(c.msg, model, paletteKeys, options, pagesById);
+            teaCmds.push(...cmds);
+            return nextModel;
+        },
+        // --- TEA command emissions ---
+        'emit-page-msg': (model, cmd, teaCmds) => {
+            const c = cmd;
+            teaCmds.push(emitMsgForPage(c.pageId, c.msg));
+            return model;
+        },
+        'emit-global-msg': (model, cmd, teaCmds) => {
+            const c = cmd;
+            teaCmds.push(emitMsg(c.msg));
+            return model;
+        },
+        'quit': (_model, _cmd, teaCmds) => {
+            teaCmds.push(quit());
+            return _model;
+        },
+        'dismiss-notification': (model, cmd, teaCmds) => {
+            const c = cmd;
+            if (!frameNotificationOptions.enabled)
+                return model;
+            const nowMs = resolveClock(resolveSafeCtx()).now();
+            const [nextModel, cmds] = applyFrameNotificationState(model, dismissNotification(model.runtimeNotifications, c.notificationId, nowMs), nowMs);
+            teaCmds.push(...cmds);
+            return nextModel;
+        },
+        // --- observation ---
+        'observed-key': (model, cmd, teaCmds) => {
+            const c = cmd;
+            const observed = options.observeKey?.(c.msg, c.route);
+            if (observed !== undefined) {
+                teaCmds.push(emitMsgForPage(model.activePageId, observed));
+            }
+            return model;
+        },
+    };
+    function drainShellCommandBuffer(model, routeResult) {
+        const buffers = bufferRuntimeRouteResult(createRuntimeBuffers(), routeResult);
+        const teaCmds = [];
+        const { state } = applyRuntimeCommandBuffer(model, buffers.commands, (s, cmd) => shellCommandHandlers[cmd.type](s, cmd, teaCmds));
+        return [state, teaCmds];
+    }
+    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 quitRequestCommands(msg, route) {
+        if (!shouldUseShellQuitConfirm()) {
+            return [{ type: 'observed-key', msg, route }, { type: 'quit' }];
+        }
+        return [{ type: 'observed-key', msg, route }, { type: 'open-quit-confirm' }];
+    }
+    function resolveFrameActionCommands(msg, action, route) {
+        if (action.type === 'open-search' && options.enableCommandPalette) {
+            return [{ type: 'observed-key', msg, route }, { type: 'open-search-palette' }];
+        }
+        if (action.type === 'open-palette' && options.enableCommandPalette) {
+            return [{ type: 'observed-key', msg, route }, { type: 'open-command-palette' }];
+        }
+        return [{ type: 'observed-key', msg, route }, { type: 'apply-frame-action', action }];
+    }
+    function handlePaletteLayerKeyCommands(msg, routedLayerKind) {
+        const obs = { type: 'observed-key', msg, route: 'palette' };
+        if (msg.ctrl && !msg.alt && msg.key === 'c') {
+            return quitRequestCommands(msg, 'palette');
+        }
+        if (!msg.ctrl && !msg.alt && !msg.shift && msg.key === 'escape') {
+            return [obs, { type: 'close-palette' }];
+        }
+        const frameAction = frameKeys.handle(msg);
+        if (frameAction?.type === 'open-search') {
+            return routedLayerKind === 'search'
+                ? [obs, { type: 'close-palette' }]
+                : [obs, { type: 'open-search-palette' }];
+        }
+        if (frameAction?.type === 'open-palette') {
+            return routedLayerKind === 'command-palette'
+                ? [obs, { type: 'close-palette' }]
+                : [obs, { type: 'open-command-palette' }];
+        }
+        if (frameAction?.type === 'toggle-notifications') {
+            return [obs, { type: 'close-palette' }, { type: 'apply-frame-action', action: frameAction }];
+        }
+        return [obs, { type: 'palette-key', msg }];
+    }
+    function handleHelpLayerKeyCommands(msg) {
+        const obs = { type: 'observed-key', msg, route: 'help' };
+        if (!msg.ctrl && !msg.alt && (msg.key === '?' || msg.key === 'escape')) {
+            return [obs, { type: 'close-help' }];
+        }
+        if (isShellQuitRequest(msg)) {
+            return quitRequestCommands(msg, 'help');
+        }
+        const helpAction = frameKeys.handle(msg);
+        if (helpAction && isHelpScrollAction(helpAction)) {
+            const action = helpAction.type === 'scroll-down' ? 'down'
+                : helpAction.type === 'scroll-up' ? 'up'
+                    : helpAction.type === 'page-down' ? 'page-down'
+                        : helpAction.type === 'page-up' ? 'page-up'
+                            : helpAction.type === 'bottom' ? 'bottom'
+                                : 'top';
+            return [obs, { type: 'help-scroll', action }];
+        }
+        return [obs];
+    }
+    function handleSettingsLayerKeyCommands(msg, model) {
+        const layout = resolveSettingsLayout(model, options, pagesById);
+        if (layout == null)
+            return undefined;
+        const obs = { type: 'observed-key', msg, route: 'frame' };
+        if (!msg.ctrl && !msg.alt && (msg.key === 'escape' || msg.key === 'f2')) {
+            return [obs, { type: 'close-settings' }];
+        }
+        if (msg.ctrl && !msg.alt && msg.key === ',') {
+            return [obs, { type: 'close-settings' }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === '?') {
+            return [obs, { type: 'open-help' }];
+        }
+        if (isShellQuitRequest(msg)) {
+            return quitRequestCommands(msg, 'frame');
+        }
+        if (options.enableCommandPalette && !msg.ctrl && !msg.alt && msg.key === '/') {
+            return [obs, { type: 'open-search-palette' }];
+        }
+        if (options.enableCommandPalette && ((msg.ctrl && !msg.alt && msg.key === 'p') || (!msg.ctrl && !msg.alt && msg.key === ':'))) {
+            return [obs, { type: 'open-command-palette' }];
+        }
+        const settingsFrameAction = frameKeys.handle(msg);
+        if (settingsFrameAction?.type === 'toggle-notifications') {
+            return [obs, { type: 'apply-frame-action', action: settingsFrameAction }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'up') {
+            return [obs, { type: 'settings-focus-move', delta: -1 }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'down') {
+            return [obs, { type: 'settings-focus-move', delta: 1 }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'j') {
+            return [obs, { type: 'settings-scroll', delta: 1 }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'k') {
+            return [obs, { type: 'settings-scroll', delta: -1 }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'd') {
+            return [obs, { type: 'settings-scroll', delta: Math.max(1, layout.contentHeight - 1) }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'u') {
+            return [obs, { type: 'settings-scroll', delta: -Math.max(1, layout.contentHeight - 1) }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'g') {
+            return [obs, { type: 'settings-scroll-to', position: 'top' }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'G') {
+            return [obs, { type: 'settings-scroll-to', position: 'bottom' }];
+        }
+        if (!msg.ctrl && !msg.alt && (msg.key === 'enter' || msg.key === 'space')) {
+            const rowIndex = clampSettingsFocus(model, layout);
+            const row = layout.rows[rowIndex];
+            if (row?.row.action !== undefined && row.row.enabled !== false && row.row.kind !== 'info') {
+                return [obs, { type: 'activate-settings-row', rowIndex: row.index }];
+            }
+            return [obs];
+        }
+        return [obs];
+    }
+    function handleNotificationCenterLayerKeyCommands(msg, model) {
+        const layout = resolveNotificationCenterLayout(model, options, pagesById);
+        if (layout == null)
+            return undefined;
+        const obs = { type: 'observed-key', msg, route: 'frame' };
+        if (!msg.ctrl && !msg.alt && msg.key === 'escape') {
+            return [obs, { type: 'close-notification-center' }];
+        }
+        if (isShellQuitRequest(msg)) {
+            return quitRequestCommands(msg, 'frame');
+        }
+        const centerFrameAction = frameKeys.handle(msg);
+        if (centerFrameAction?.type === 'toggle-notifications') {
+            return [obs, { type: 'apply-frame-action', action: centerFrameAction }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'f2') {
+            return [obs, { type: 'close-notification-center' }, { type: 'apply-frame-action', action: { type: 'toggle-settings' } }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === '?') {
+            return [obs, { type: 'close-notification-center' }, { type: 'open-help' }];
+        }
+        if (options.enableCommandPalette && !msg.ctrl && !msg.alt && msg.key === '/') {
+            return [obs, { type: 'close-notification-center' }, { type: 'open-search-palette' }];
+        }
+        if (options.enableCommandPalette && ((msg.ctrl && !msg.alt && msg.key === 'p') || (!msg.ctrl && !msg.alt && msg.key === ':'))) {
+            return [obs, { type: 'close-notification-center' }, { type: 'open-command-palette' }];
+        }
+        if (!msg.ctrl && !msg.alt && (msg.key === 'up' || msg.key === 'k')) {
+            return [obs, { type: 'notification-center-scroll', delta: -1 }];
+        }
+        if (!msg.ctrl && !msg.alt && (msg.key === 'down' || msg.key === 'j')) {
+            return [obs, { type: 'notification-center-scroll', delta: 1 }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'd') {
+            return [obs, { type: 'notification-center-scroll', delta: Math.max(1, layout.contentHeight - 2) }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'u') {
+            return [obs, { type: 'notification-center-scroll', delta: -Math.max(1, layout.contentHeight - 2) }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'g') {
+            return [obs, { type: 'notification-center-scroll-to', position: 'top' }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'G') {
+            return [obs, { type: 'notification-center-scroll-to', position: 'bottom' }];
+        }
+        if (!msg.ctrl && !msg.alt && msg.key === 'f') {
+            return [obs, { type: 'cycle-notification-filter' }];
+        }
+        return [obs];
+    }
+    function handleWorkspaceLayerKeyCommands(msg, model) {
+        if (isShellQuitRequest(msg)) {
+            return quitRequestCommands(msg, 'frame');
+        }
+        const context = resolveLayerContext(model);
+        const { activePage, activeInputArea } = context;
+        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 [{ type: 'observed-key', msg, route: 'page' }, { type: 'emit-page-msg', pageId: model.activePageId, msg: paneAction }];
+            }
+            if (pageAction !== undefined) {
+                return [{ type: 'observed-key', msg, route: 'page' }, { type: 'emit-page-msg', pageId: model.activePageId, msg: pageAction }];
+            }
+            if (globalAction !== undefined) {
+                return [{ type: 'observed-key', msg, route: 'global' }, { type: 'emit-global-msg', msg: globalAction }];
+            }
+            if (frameAction !== undefined) {
+                return resolveFrameActionCommands(msg, frameAction, 'frame');
+            }
+            return [{ type: 'observed-key', msg, route: 'unhandled' }];
+        }
+        // frame-first (default)
+        if (frameAction !== undefined) {
+            return resolveFrameActionCommands(msg, frameAction, 'frame');
+        }
+        if (paneAction !== undefined) {
+            return [{ type: 'observed-key', msg, route: 'page' }, { type: 'emit-page-msg', pageId: model.activePageId, msg: paneAction }];
+        }
+        if (globalAction !== undefined) {
+            return [{ type: 'observed-key', msg, route: 'global' }, { type: 'emit-global-msg', msg: globalAction }];
+        }
+        if (pageAction !== undefined) {
+            return [{ type: 'observed-key', msg, route: 'page' }, { type: 'emit-page-msg', pageId: model.activePageId, msg: pageAction }];
+        }
+        return [{ type: 'observed-key', msg, route: 'unhandled' }];
+    }
+    function resolveRoutedKeyLayer(msg, model) {
+        const context = resolveLayerContext(model);
+        const runtimeStack = describeFrameRuntimeViewStack(model, {
+            pageModalOpen: context.pageModalOpen,
+        });
+        return routeRuntimeInput(runtimeStack, EMPTY_RUNTIME_LAYOUTS, { kind: 'key', key: msg.key }, ({ layer }) => {
+            const frameLayer = layer.model;
+            if (frameLayer == null)
+                return undefined;
+            if (frameLayer.kind === 'search' || frameLayer.kind === 'command-palette') {
+                return { handled: true, commands: handlePaletteLayerKeyCommands(msg, frameLayer.kind) };
+            }
+            if (frameLayer.kind === 'help') {
+                return { handled: true, commands: handleHelpLayerKeyCommands(msg) };
+            }
+            if (frameLayer.kind === 'settings') {
+                const cmds = handleSettingsLayerKeyCommands(msg, model);
+                return cmds != null ? { handled: true, commands: cmds } : { bubble: true };
+            }
+            if (frameLayer.kind === 'notification-center') {
+                const cmds = handleNotificationCenterLayerKeyCommands(msg, model);
+                return cmds != null ? { handled: true, commands: cmds } : { bubble: true };
+            }
+            if (frameLayer.kind === 'quit-confirm') {
+                const obs = { type: 'observed-key', msg, route: 'frame' };
+                if (isShellQuitConfirmAccept(msg)) {
+                    return { handled: true, commands: [obs, { type: 'close-quit-confirm' }, { type: 'quit' }] };
+                }
+                if (isShellQuitConfirmDismiss(msg)) {
+                    return { handled: true, commands: [obs, { type: 'close-quit-confirm' }] };
+                }
+                return { handled: true, commands: [obs] };
+            }
+            if (frameLayer.kind === 'page-modal') {
+                const { modalKeyMap } = context;
+                const obs = { type: 'observed-key', msg, route: 'page' };
+                if (modalKeyMap != null) {
+                    const modalAction = modalKeyMap.handle(msg);
+                    if (modalAction !== undefined) {
+                        return { handled: true, commands: [obs, { type: 'emit-page-msg', pageId: model.activePageId, msg: modalAction }] };
+                    }
+                }
+                return { handled: true, commands: [obs] };
+            }
+            // workspace (root layer)
+            return { handled: true, commands: handleWorkspaceLayerKeyCommands(msg, model) };
+        });
+    }
+    function createShellRetainedLayoutNode(id, rect, children) {
+        return {
+            id,
+            rect: {
+                x: rect.col,
+                y: rect.row,
+                width: rect.width,
+                height: rect.height,
+            },
+            children: children ?? [],
+        };
+    }
+    function resolveWorkspacePaneRects(model) {
+        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);
+        return renderResult.paneRects;
+    }
+    function buildWorkspaceLayoutTree(model) {
+        const header = resolveHeaderLine(model, options, pagesById);
+        const tabChildren = header.tabTargets.map((target) => createShellRetainedLayoutNode(`tab:${target.pageId}`, {
+            row: 0,
+            col: target.startCol,
+            width: target.endCol - target.startCol + 1,
+            height: 1,
+        }));
+        const bodyRect = resolveBodyRect(model, options);
+        const paneRects = resolveWorkspacePaneRects(model);
+        const paneChildren = [];
+        for (const [paneId, rect] of paneRects.entries()) {
+            paneChildren.push(createShellRetainedLayoutNode(`pane:${paneId}`, rect));
+        }
+        return createShellRetainedLayoutNode('workspace', { row: 0, col: 0, width: model.columns, height: model.rows }, [
+            createShellRetainedLayoutNode('header-bar', { row: 0, col: 0, width: model.columns, height: 1 }, tabChildren),
+            createShellRetainedLayoutNode('workspace-body', bodyRect, paneChildren),
+        ]);
+    }
+    function buildSettingsRowChildren(model, layout) {
+        const scrollY = clampSettingsScroll(model, layout);
+        const viewportTop = 1;
+        const viewportBottom = model.rows - 1;
+        const children = [];
+        for (const flatRow of layout.rows) {
+            const screenRow = flatRow.line - scrollY + viewportTop;
+            const clippedTop = Math.max(viewportTop, screenRow);
+            const clippedBottom = Math.min(viewportBottom, screenRow + flatRow.height);
+            if (clippedTop >= clippedBottom)
+                continue;
+            children.push(createShellRetainedLayoutNode(`settings-row:${flatRow.index}`, {
+                row: clippedTop,
+                col: layout.startCol,
+                width: layout.drawerWidth,
+                height: clippedBottom - clippedTop,
+            }));
+        }
+        return children;
+    }
+    function resolveFrameMouseRuntimeLayouts(model) {
+        let layouts = EMPTY_RUNTIME_LAYOUTS;
+        const settingsLayout = model.settingsOpen ? resolveSettingsLayout(model, options, pagesById) : undefined;
+        if (settingsLayout != null) {
+            layouts = retainRuntimeLayout(layouts, {
+                viewId: 'settings',
+                tree: createShellRetainedLayoutNode('settings-drawer', {
+                    row: 0,
+                    col: settingsLayout.startCol,
+                    width: settingsLayout.drawerWidth,
+                    height: model.rows,
+                }, buildSettingsRowChildren(model, settingsLayout)),
+            });
+        }
+        const notificationCenterLayout = model.notificationCenterOpen ? resolveNotificationCenterLayout(model, options, pagesById) : undefined;
+        if (notificationCenterLayout != null) {
+            layouts = retainRuntimeLayout(layouts, {
+                viewId: 'notification-center',
+                tree: createShellRetainedLayoutNode('notification-center-drawer', {
+                    row: 0,
+                    col: notificationCenterLayout.startCol,
+                    width: notificationCenterLayout.drawerWidth,
+                    height: model.rows,
+                }),
+            });
+        }
+        layouts = retainRuntimeLayout(layouts, {
+            viewId: 'workspace',
+            tree: buildWorkspaceLayoutTree(model),
+        });
+        return layouts;
+    }
+    function resolveRoutedMouseLayer(msg, model) {
+        const context = resolveLayerContext(model);
+        const { activePageModel, inputAreas } = context;
+        const runtimeStack = describeFrameRuntimeViewStack(model, {
+            pageModalOpen: context.pageModalOpen,
+        });
+        return routeRuntimeInput(runtimeStack, resolveFrameMouseRuntimeLayouts(model), {
+            kind: 'pointer',
+            action: msg.action,
+            x: msg.col,
+            y: msg.row,
+            button: msg.button === 'none' ? undefined : msg.button,
+        }, ({ layer, hit }) => {
+            const frameLayer = layer.model;
+            if (frameLayer == null)
+                return undefined;
+            const cmds = [];
+            if (frameLayer.kind === 'help') {
+                if (msg.action === 'scroll-up' || msg.action === 'scroll-down') {
+                    cmds.push({ type: 'help-scroll', action: msg.action === 'scroll-down' ? 'down' : 'up' });
+                }
+                return { handled: true, commands: cmds };
+            }
+            if (frameLayer.kind === 'search' || frameLayer.kind === 'command-palette'
+                || frameLayer.kind === 'quit-confirm' || frameLayer.kind === 'page-modal') {
+                return { handled: true };
+            }
+            if (frameLayer.kind === 'settings') {
+                if (hit == null)
+                    return { handled: true };
+                if (msg.action === 'scroll-up' || msg.action === 'scroll-down') {
+                    cmds.push({ type: 'settings-scroll', delta: msg.action === 'scroll-down' ? 3 : -3 });
+                    return { handled: true, commands: cmds };
+                }
+                if (msg.action === 'press' && msg.button === 'left') {
+                    const rowNode = hit.path.find((n) => n.id?.startsWith('settings-row:'));
+                    if (rowNode != null) {
+                        const rowIndex = parseInt(rowNode.id.slice('settings-row:'.length), 10);
+                        cmds.push({ type: 'activate-settings-row', rowIndex });
+                    }
+                    return { handled: true, commands: cmds };
+                }
+                return { handled: true };
+            }
+            if (frameLayer.kind === 'notification-center') {
+                if (hit == null)
+                    return { handled: true };
+                if (msg.action === 'scroll-up' || msg.action === 'scroll-down') {
+                    cmds.push({ type: 'notification-center-scroll', delta: msg.action === 'scroll-down' ? 3 : -3 });
+                    return { handled: true, commands: cmds };
+                }
+                return { handled: true };
+            }
+            // workspace layer
+            if (msg.action === 'press' && msg.button === 'left') {
+                // notification toast hit-testing (outside retained layouts)
+                if (frameNotificationOptions.enabled) {
+                    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') {
+                        cmds.push({ type: 'dismiss-notification', notificationId: notificationTarget.item.id });
+                        return { handled: true, commands: cmds };
+                    }
+                    if (notificationTarget != null) {
+                        return { handled: true };
+                    }
+                }
+                // tab click
+                const tabNode = hit?.path.find((n) => n.id?.startsWith('tab:'));
+                if (tabNode != null) {
+                    const pageId = tabNode.id.slice('tab:'.length);
+                    const currentIndex = model.pageOrder.indexOf(model.activePageId);
+                    const nextIndex = model.pageOrder.indexOf(pageId);
+                    if (currentIndex >= 0 && nextIndex >= 0 && nextIndex !== currentIndex) {
+                        cmds.push({ type: 'switch-tab', delta: nextIndex - currentIndex });
+                    }
+                    return { handled: true, commands: cmds };
+                }
+                if (msg.row === 0) {
+                    return { handled: true };
+                }
+                // pane click
+                const clickedPaneNode = hit?.path.find((n) => n.id?.startsWith('pane:'));
+                if (clickedPaneNode != null) {
+                    const paneId = clickedPaneNode.id.slice('pane:'.length);
+                    const paneRects = resolveWorkspacePaneRects(model);
+                    const paneRect = paneRects.get(paneId);
+                    if (paneRect != null) {
+                        cmds.push({ type: 'focus-pane', paneId });
+                        const inputArea = findInputAreaByPaneId(inputAreas, paneId);
+                        const areaMsg = inputArea?.mouse?.({ msg, model: activePageModel, rect: paneRect });
+                        cmds.push({
+                            type: 'emit-page-msg',
+                            pageId: model.activePageId,
+                            msg: areaMsg !== undefined ? areaMsg : msg,
+                        });
+                        return { handled: true, commands: cmds };
+                    }
+                }
+            }
+            if (msg.action === 'scroll-up' || msg.action === 'scroll-down') {
+                const scrollPaneNode = hit?.path.find((n) => n.id?.startsWith('pane:'));
+                if (scrollPaneNode != null) {
+                    const paneId = scrollPaneNode.id.slice('pane:'.length);
+                    const paneRects = resolveWorkspacePaneRects(model);
+                    const paneRect = paneRects.get(paneId);
+                    if (paneRect != null) {
+                        cmds.push({ type: 'focus-pane', paneId });
+                        const inputArea = findInputAreaByPaneId(inputAreas, paneId);
+                        const areaMsg = inputArea?.mouse?.({ msg, model: activePageModel, rect: paneRect });
+                        if (areaMsg !== undefined) {
+                            cmds.push({ type: 'emit-page-msg', pageId: model.activePageId, msg: areaMsg });
+                        }
+                        else {
+                            cmds.push({ type: 'scroll-focused-pane', direction: msg.action === 'scroll-down' ? 'down' : 'up' });
+                        }
+                        return { handled: true, commands: cmds };
+                    }
+                }
+            }
+            return { handled: true };
+        });
+    }
+    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);
@@ -99,60 +954,12 @@ export function createFramedApp(options) {
             return [model, []];
         const pageModel = model.pageModels[targetPageId];
         const updateResult = targetPage.update(targetMsg, pageModel);
-        let nextPageModel = pageModel;
-        let cmds = [];
-        if (updateResult !== undefined && updateResult !== null) {
-            if (Array.isArray(updateResult)) {
-                nextPageModel = (updateResult[0] ?? pageModel);
-                cmds = (updateResult[1] ?? []);
-            }
-            else {
-                nextPageModel = updateResult;
-            }
-        }
+        const [nextPageModel, cmds = []] = updateResult;
         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))
-            : [];
+        const wrappedCmds = cmds.map((cmd) => wrapCmdForPage(targetPageId, cmd));
         return [synced, wrappedCmds];
     }
-    function handleFrameMouse(msg, model) {
-        if (model.helpOpen || model.commandPalette != null)
-            return [model, []];
-        if (msg.action !== 'press' || msg.button !== 'left')
-            return undefined;
-        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, []];
-        }
-        return undefined;
-    }
     function applyFrameNotificationState(model, notifications, nowMs, forceTick = false) {
         const trimmed = trimNotificationsToViewport(notifications, {
             screenWidth: model.columns,
@@ -171,6 +978,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 = {};
@@ -189,6 +1022,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,
@@ -197,6 +1038,7 @@ export function createFramedApp(options) {
                 dockStateByPage: {},
                 splitRatioOverrides: {},
                 runtimeNotifications: createNotificationState(),
+                runtimeNotificationHistoryFilter: 'ALL',
                 runtimeNotificationLoopActive: false,
             };
             for (const pageId of pageOrder) {
@@ -297,95 +1139,55 @@ export function createFramedApp(options) {
                     }, []];
             }
             if (isKeyMsg(msg)) {
-                if (model.commandPalette != null) {
-                    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')];
-                    }
-                    return [model, withObservedKey(model, [], msg, 'help')];
-                }
-                const activePage = pagesById.get(model.activePageId);
-                const activePageModel = model.pageModels[model.activePageId];
-                const modalKeyMap = activePage.modalKeyMap?.(activePageModel);
-                if (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')];
-                }
-                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 (pageAction !== undefined) {
-                        return [model, withObservedKey(model, [emitMsgForPage(model.activePageId, pageAction)], msg, 'page')];
-                    }
-                    if (globalAction !== undefined) {
-                        return [model, withObservedKey(model, [emitMsg(globalAction)], msg, 'global')];
-                    }
-                    if (frameAction !== undefined) {
-                        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')];
-                    }
-                    return [model, withObservedKey(model, [], msg, 'unhandled')];
-                }
-                if (frameAction !== undefined) {
-                    // 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), withObservedKey(model, [], msg, 'frame')];
-                    }
-                    const [nextModel, cmds] = applyFrameAction(frameAction, model, options, pagesById);
-                    return [nextModel, withObservedKey(model, cmds, msg, 'frame')];
-                }
-                if (globalAction !== undefined) {
-                    return [model, withObservedKey(model, [emitMsg(globalAction)], msg, 'global')];
-                }
-                if (pageAction !== undefined) {
-                    return [model, withObservedKey(model, [emitMsgForPage(model.activePageId, pageAction)], msg, 'page')];
-                }
-                return [model, withObservedKey(model, [], msg, 'unhandled')];
+                return drainShellCommandBuffer(model, resolveRoutedKeyLayer(msg, model));
             }
             if (isMouseMsg(msg)) {
-                const frameResult = handleFrameMouse(msg, model);
-                if (frameResult != null)
-                    return frameResult;
+                const mouseRouteResult = resolveRoutedMouseLayer(msg, model);
+                if (mouseRouteResult.handled) {
+                    return drainShellCommandBuffer(model, mouseRouteResult);
+                }
                 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 targetMsg = scoped?.msg ?? msg;
-            return updateTargetPage(model, targetPageId, targetMsg);
+            if (isPageScopedMsg(msg)) {
+                return updateTargetPage(model, msg.pageId, msg.msg);
+            }
+            return updateTargetPage(model, model.activePageId, msg);
         },
         view(model) {
-            const activePage = pagesById.get(model.activePageId);
+            const { activePage, layerStack, activeLayer, } = resolvePresentedLayerContext(model);
             const header = resolveHeaderLine(model, options, pagesById).surface;
-            const helpLine = renderHelpLine(model, frameKeys, options, activePage);
-            const bodyRect = frameBodyRect(model.columns, model.rows);
+            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 bodySurface = activeResult.surface;
+            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);
-                    bodySurface = renderTransition(prevResult.surface, activeResult.surface, 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);
                 }
             }
+            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({
@@ -405,12 +1207,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,
                 }));
@@ -418,25 +1239,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,
-                headerSurface: header,
-                helpLineSurface: helpLine,
-                bodySurface,
-                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)
@@ -446,15 +1269,440 @@ export function createFramedApp(options) {
     };
     return app;
 }
-function composeFrameSurface(options) {
-    const frame = createSurface(options.width, options.height);
-    frame.blit(options.headerSurface, 0, 0);
-    if (options.height > 1) {
-        frame.blit(options.helpLineSurface, 0, 1);
+function focusPane(model, paneId) {
+    if (model.focusedPaneByPage[model.activePageId] === paneId)
+        return model;
+    return {
+        ...model,
+        focusedPaneByPage: {
+            ...model.focusedPaneByPage,
+            [model.activePageId]: paneId,
+        },
+    };
+}
+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 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,
+        };
+    }
+    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;
     }
-    if (options.bodyRect.width > 0 && options.bodyRect.height > 0) {
-        frame.blit(options.bodySurface, options.bodyRect.col, options.bodyRect.row);
+    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 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 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));
+        }
     }
-    return compositeSurface(frame, options.overlays, { dim: options.dimBackground });
+    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