@zakmandhro/bunti 0.1.5 → 0.2.1

package/dist/dsl/context.js

@@ -0,0 +1,658 @@
+/**
+ * Bunti DSL context factories: the common per-closure context, the direct
+ * (screen-buffer) box renderer, and the top-level screen context.
+ */
+import { bg, contrastText, createGradient, darken, fade, fg, lighten, rgb, } from '../colors';
+import { identifyTerminal } from '../detect';
+import { beginHookFrame, hintInputReadWithoutKeyboard, hintOverlappingBoxes, } from '../diagnostics';
+import { resolveRect as resolveGeometryRect, resolvePlacedRect, splitRect as splitGeometryRect, } from '../geometry';
+import { icon, replaceEmojis } from '../icons';
+import { dimRect, getWindow, joinHorizontal, joinVertical, blit as layoutBlit, box as layoutBox, gradient as layoutGradient, list as layoutList, table as layoutTable, viewport as layoutViewport, wallpaper as layoutWallpaper, measureBox, rect, resolveSize, } from '../layout';
+import { darkTheme, resolveTheme, } from '../theme';
+import { visibleWidth } from '../utils';
+import { colors } from '../vendor/colors';
+import { createHooks } from './hooks';
+import { createInteraction } from './interaction';
+import { compositeLayer, createLayerScreenState, layerContentBounds, } from './layers';
+import { createMotion } from './motion';
+import { KEYS, } from './types';
+/** Luminance scale applied by layer drop shadows at composite time. */
+const LAYER_SHADOW_DIM = 0.45;
+function pushHitboxFrame(dslState) {
+    const frame = { entries: [] };
+    (dslState.hitboxFrames ??= []).push(frame);
+    return frame;
+}
+function popHitboxFrame(dslState) {
+    dslState.hitboxFrames?.pop();
+}
+/**
+ * Re-places hitboxes registered inside a direct box once its painted rect
+ * is known. Flow-anchored entries land exactly where their content line
+ * painted (per-line alignment included, via the SAME measure the painter
+ * used); area-anchored entries shift by the delta between the assumed and
+ * painted inner origins. Pass `measure` as undefined when the box wraps —
+ * wrapping reflows line indices, so flow entries fall back to the delta.
+ */
+function fixupHitboxFrame(frame, measure, boxX, boxY, dx, dy) {
+    for (const entry of frame.entries) {
+        const flow = entry.flow;
+        if (flow && measure && flow.line >= 0 && flow.line < measure.lines.length) {
+            entry.box.x = boxX + measure.contentLeft(flow.line) + flow.col;
+            entry.box.y = boxY + measure.contentTop(flow.line);
+        }
+        else {
+            entry.box.x += dx;
+            entry.box.y += dy;
+        }
+    }
+}
+/**
+ * Converts flow-anchored entries captured during a nested closure back to
+ * area anchoring. Nested flow boxes and spans re-position their content
+ * within the parent flow in ways the direct-box fixup does not model, so
+ * entries registered inside them keep their eagerly resolved rects.
+ */
+function dropFlowAnchors(dslState, mark) {
+    const frames = dslState.hitboxFrames;
+    const frame = frames?.[frames.length - 1];
+    if (!frame)
+        return;
+    for (let i = mark; i < frame.entries.length; i++) {
+        frame.entries[i].flow = undefined;
+    }
+}
+/** Entry count of the innermost hitbox frame (for dropFlowAnchors marks). */
+function hitboxFrameMark(dslState) {
+    const frames = dslState.hitboxFrames;
+    return frames?.[frames.length - 1]?.entries.length ?? 0;
+}
+function boxBorderInset(options) {
+    return options.border === 'none' || !options.border ? 0 : 1;
+}
+/**
+ * Resolves the effective foreground for a box's `color` option. 'blank'
+ * auto-picks pure black or pure white text by WCAG luminance of the box
+ * background (gradients sample their middle stop).
+ */
+function resolveBoxFg(options) {
+    if (options.color !== 'blank')
+        return options.color;
+    const bgColor = options.bgColor;
+    if (bgColor === undefined)
+        return undefined;
+    if (typeof bgColor === 'object' && 'colors' in bgColor) {
+        const stops = bgColor.colors;
+        if (stops.length === 0)
+            return undefined;
+        return contrastText(stops[Math.floor(stops.length / 2)]);
+    }
+    return contrastText(bgColor);
+}
+function activeTheme(dslState, state) {
+    // options is shared by reference with layer screen-state copies, so
+    // options.theme always reflects the latest setTheme() call.
+    return (dslState.themeStack[dslState.themeStack.length - 1] ??
+        state.options.theme ??
+        state.theme ??
+        darkTheme);
+}
+function resolveBoxArea(parent, options, contentWidth, contentHeight) {
+    return resolvePlacedRect(parent, {
+        x: options.x,
+        y: options.y,
+        width: options.anchor === 'top' || options.anchor === 'bottom'
+            ? parent.width
+            : options.width,
+        height: options.height,
+        anchor: options.anchor,
+        contentWidth,
+        contentHeight,
+    });
+}
+function resolveBoxInnerArea(area, options) {
+    const borderInset = boxBorderInset(options);
+    const px = options.padding?.[1] ?? 0;
+    const py = options.padding?.[0] ?? 0;
+    return {
+        x: area.x + borderInset + px,
+        y: area.y + borderInset + py,
+        width: Math.max(0, area.width - borderInset * 2 - px * 2),
+        height: Math.max(0, area.height - borderInset * 2 - py * 2),
+    };
+}
+/**
+ * Redefines ctx.lastKey / ctx.keys as live getters that also feed the
+ * "input read without { keyboard: true }" dev hint. Non-enumerable so the
+ * screen-context spread of the base context can never trigger a spurious
+ * read — only real user reads do.
+ */
+function defineInputAccessors(ctx, state) {
+    Object.defineProperty(ctx, 'lastKey', {
+        configurable: true,
+        enumerable: false,
+        get: () => {
+            hintInputReadWithoutKeyboard(state.options);
+            return state.lastKey;
+        },
+    });
+    Object.defineProperty(ctx, 'keys', {
+        configurable: true,
+        enumerable: false,
+        get: () => {
+            hintInputReadWithoutKeyboard(state.options);
+            return state.keys ?? [];
+        },
+    });
+}
+const buntiColor = {
+    ...colors,
+    darken,
+    lighten,
+    rgb,
+    fg,
+    bg,
+    dim: (text) => fg({ r: 96, g: 102, b: 118 }, text),
+};
+/**
+ * Common Context Factory: Provided to every closure.
+ */
+function createDSLContext(state, dslState, availableW, availableH, offsetX = 0, offsetY = 0, isRoot = false) {
+    const hooks = createHooks(state);
+    const motion = createMotion(state, hooks.useState);
+    const interaction = createInteraction(state, (bounds) => ctx.resolveRect(bounds), 
+    // Hitboxes registered while a direct box renders are captured so the
+    // renderer can re-place them once the painted rect is known.
+    (box, flow) => {
+        const frames = dslState.hitboxFrames;
+        frames?.[frames.length - 1]?.entries.push({ box, flow });
+    });
+    const ctx = {
+        color: buntiColor,
+        state,
+        width: availableW,
+        height: availableH,
+        area: { x: offsetX, y: offsetY, width: availableW, height: availableH },
+        isRoot,
+        offsetX,
+        offsetY,
+        get cursorX() {
+            const currentFlow = dslState.activeContents.join('');
+            const lines = currentFlow.split('\n');
+            return visibleWidth(lines[lines.length - 1]);
+        },
+        get cursorY() {
+            const currentFlow = dslState.activeContents.join('');
+            return Math.max(0, currentFlow.split('\n').length - 1);
+        },
+        mouseX: state.mouseX,
+        mouseY: state.mouseY,
+        mouseButton: state.mouseButton,
+        isMouseDown: state.isMouseDown,
+        lastKey: state.lastKey,
+        keys: state.keys ?? [],
+        focusedId: state.focusedId,
+        elapsedTime: Date.now() - state.startTime,
+        terminal: (state.terminal ??= identifyTerminal()),
+        get theme() {
+            return activeTheme(dslState, state);
+        },
+        setTheme(theme) {
+            const resolved = resolveTheme(theme);
+            state.theme = resolved;
+            state.options.theme = resolved;
+            state.requestTick?.();
+        },
+        themed(theme, callback) {
+            const next = resolveTheme(theme, activeTheme(dslState, state));
+            dslState.themeStack.push(next);
+            try {
+                callback(ctx);
+            }
+            finally {
+                dslState.themeStack.pop();
+            }
+            return ctx;
+        },
+        keyPressed(name) {
+            hintInputReadWithoutKeyboard(state.options);
+            return (state.keys?.some((e) => e.key === name && e.kind !== 'release') ?? false);
+        },
+        isKeyHeld(name) {
+            hintInputReadWithoutKeyboard(state.options);
+            return state.heldKeys?.isHeld(name) ?? false;
+        },
+        text(str) {
+            dslState.activeContents.push(replaceEmojis(String(str)));
+            return ctx;
+        },
+        ...motion,
+        ...hooks,
+        ...interaction,
+        resolveRect(bounds) {
+            return resolveGeometryRect({ x: offsetX, y: offsetY, width: availableW, height: availableH }, {
+                ...bounds,
+                y: bounds.y ?? ctx.cursorY,
+            });
+        },
+        resolveLocalRect(bounds, options) {
+            return resolvePlacedRect({ x: 0, y: 0, width: availableW, height: availableH }, bounds, options);
+        },
+        split(options) {
+            return splitGeometryRect({ x: 0, y: 0, width: availableW, height: availableH }, options);
+        },
+        list(id, items, options = {}) {
+            const [selectedIndex, setSelectedIndex] = ctx.useState(`${id}_index`, 0);
+            const isFocused = ctx.focusable(id);
+            if (isFocused && options.interactive !== false) {
+                if (state.lastKey === KEYS.UP)
+                    setSelectedIndex(Math.max(0, selectedIndex - 1));
+                if (state.lastKey === KEYS.DOWN)
+                    setSelectedIndex(Math.min(items.length - 1, selectedIndex + 1));
+            }
+            // Mouse: each visible row registers a `${id}:row:${index}` hitbox.
+            // Clicking a row selects it (and focuses the list so the selection is
+            // visible); the hovered row gets a soft selection wash. Keyboard
+            // behavior is unchanged.
+            let hoveredIndex;
+            if (state.options.mouse && options.interactive !== false) {
+                const startY = ctx.cursorY;
+                let visibleItems = items;
+                let offset = 0;
+                let hasMoreAbove = false;
+                if (options.maxVisible && items.length > options.maxVisible) {
+                    const win = getWindow(items, selectedIndex, options.maxVisible);
+                    visibleItems = win.visible;
+                    offset = win.start;
+                    hasMoreAbove = win.hasMoreAbove;
+                }
+                const resolvedW = resolveSize(options.width, availableW, 0);
+                const rowW = resolvedW > 0 ? resolvedW : availableW;
+                for (let i = 0; i < visibleItems.length; i++) {
+                    const actualIdx = offset + i;
+                    const row = ctx.hitbox(`${id}:row:${actualIdx}`, {
+                        x: 0,
+                        y: startY + (hasMoreAbove ? 1 : 0) + i,
+                        width: rowW,
+                        height: 1,
+                    });
+                    if (row.hovered)
+                        hoveredIndex = actualIdx;
+                    if (row.clicked) {
+                        setSelectedIndex(actualIdx);
+                        ctx.focus(id);
+                    }
+                }
+            }
+            // Theme-token fallbacks: focused rows highlight with theme.selection /
+            // theme.focus, unfocused lists mute their selected row via theme.muted.
+            // Explicit options always win.
+            const theme = activeTheme(dslState, state);
+            const content = layoutList(items, {
+                ...options,
+                focusedIndex: selectedIndex,
+                focusStyle: isFocused
+                    ? (options.focusStyle ?? ((s) => theme.focus(s)))
+                    : (s) => theme.muted(s),
+                selectedBg: isFocused
+                    ? (options.selectedBg ?? theme.selection)
+                    : undefined,
+                hoveredIndex: options.hoveredIndex ?? hoveredIndex,
+                hoverBg: options.hoverBg ??
+                    fade(theme.selection.rgb, theme.background.rgb, 0.55),
+            }, availableW);
+            dslState.activeContents.push(content);
+            return ctx;
+        },
+        table(rows, options = {}) {
+            const content = layoutTable(rows, options, availableW);
+            dslState.activeContents.push(content);
+            return ctx;
+        },
+        icon(name) {
+            return icon(name);
+        },
+        blit(x, y, content, style = {}) {
+            layoutBlit(state, x, y, content, style);
+            return ctx;
+        },
+        rect(x, y, w, h, style) {
+            rect(state, x, y, w, h, style);
+            return ctx;
+        },
+        viewport(content, width, height, scrollY = 0) {
+            return layoutViewport(content, width, height, scrollY);
+        },
+        span(options, callback) {
+            const subContents = [];
+            dslState.stack.push(dslState.activeContents);
+            dslState.activeContents = subContents;
+            const mark = hitboxFrameMark(dslState);
+            callback(ctx);
+            dropFlowAnchors(dslState, mark);
+            dslState.activeContents = dslState.stack.pop();
+            const combined = subContents.join('');
+            let styled = combined;
+            if (typeof options.color === 'function') {
+                styled = options.color(combined);
+            }
+            else if (options.color !== undefined) {
+                styled = fg(options.color, combined);
+            }
+            dslState.activeContents.push(styled);
+            return styled;
+        },
+        box(options, callback) {
+            if (options.zIndex !== undefined) {
+                const { zIndex, ...layeredOptions } = options;
+                ctx.layer(zIndex, (layerCtx) => {
+                    layerCtx.box(layeredOptions, callback);
+                });
+                return '';
+            }
+            const preContentW = options.width === undefined ? availableW : 0;
+            const preContentH = options.height === undefined ? availableH : 0;
+            const preArea = resolveBoxArea(ctx.area, options, preContentW, preContentH);
+            const innerArea = resolveBoxInnerArea(preArea, options);
+            const subContents = [];
+            dslState.stack.push(dslState.activeContents);
+            dslState.activeContents = subContents;
+            const mark = hitboxFrameMark(dslState);
+            const subCtx = createDSLContext(state, dslState, innerArea.width, innerArea.height, innerArea.x, innerArea.y);
+            callback(subCtx);
+            dropFlowAnchors(dslState, mark);
+            dslState.activeContents = dslState.stack.pop();
+            const innerContent = subContents.join('');
+            const styledBox = layoutBox(innerContent, options, availableW, availableH);
+            if (!options.detach) {
+                dslState.activeContents.push(styledBox);
+            }
+            return styledBox;
+        },
+        layer(zIndexOrOptions, maybeCallback) {
+            const callback = typeof zIndexOrOptions === 'function' ? zIndexOrOptions : maybeCallback;
+            if (!callback)
+                return ctx;
+            const layerOptions = typeof zIndexOrOptions === 'number'
+                ? { zIndex: zIndexOrOptions }
+                : typeof zIndexOrOptions === 'object'
+                    ? zIndexOrOptions
+                    : {};
+            const zIndex = layerOptions.zIndex ?? 0;
+            const layerState = createLayerScreenState(state);
+            const layerDslState = {
+                activeContents: [],
+                stack: [],
+                layers: dslState.layers,
+                layerOrder: dslState.layerOrder,
+                themeStack: dslState.themeStack,
+            };
+            const layerCtx = createDSLContext(layerState, layerDslState, availableW, availableH, offsetX, offsetY, isRoot);
+            layerCtx.box = createDirectBoxRenderer(layerState, layerDslState, layerCtx);
+            callback(layerCtx);
+            const flow = layerDslState.activeContents.join('');
+            if (flow)
+                layoutBlit(layerState, offsetX, offsetY, flow);
+            dslState.layerOrder = layerDslState.layerOrder + 1;
+            dslState.layers.push({
+                zIndex,
+                order: layerDslState.layerOrder,
+                buffer: layerState.backBuffer,
+                shadow: layerOptions.shadow,
+                backdrop: layerOptions.backdrop,
+                bounds: layerContentBounds(layerState.backBuffer, state.width),
+            });
+            return ctx;
+        },
+        joinHorizontal(...blocks) {
+            return joinHorizontal(...blocks);
+        },
+        joinVertical(...blocks) {
+            return joinVertical(...blocks);
+        },
+        wallpaper(input) {
+            if (typeof input === 'object' && 'colors' in input) {
+                layoutGradient(state, input.colors, { direction: input.direction });
+            }
+            else if (Array.isArray(input)) {
+                layoutGradient(state, input);
+            }
+            else if (typeof input === 'object' && 'color' in input) {
+                ctx.wallpaper(input.color);
+            }
+            else {
+                layoutWallpaper(state, { bg: input });
+            }
+        },
+        gradient: (opts) => ({
+            colors: createGradient(opts.colors, opts.steps || 10),
+            direction: opts.direction || 'vertical',
+            steps: opts.steps || 10,
+        }),
+        rgb,
+        requestStop() {
+            state.requestStop?.();
+        },
+        flushFlow() { },
+    };
+    // Live input accessors (also feed the keyboard-not-enabled dev hint).
+    defineInputAccessors(ctx, state);
+    return ctx;
+}
+function createDirectBoxRenderer(state, dslState, base) {
+    // Dev diagnostics: remember where direct boxes painted this frame
+    // (root screen context only — layer states never set boxRects).
+    // Anchored boxes are exempt: top/bottom bars are deliberate full-width
+    // chrome, and their "overlaps" are almost always small-screen clipping
+    // rather than missing-layer bugs.
+    const trackBoxRect = (area, options) => {
+        if (options.anchor !== undefined)
+            return;
+        const rects = dslState.boxRects;
+        if (rects && rects.length < 50)
+            rects.push(area);
+    };
+    return (options, callback) => {
+        if (options.zIndex !== undefined) {
+            const { zIndex, ...layeredOptions } = options;
+            base.layer(zIndex, (layerCtx) => {
+                layerCtx.box(layeredOptions, callback);
+            });
+            return '';
+        }
+        const boxOptions = options.anchor === 'top' || options.anchor === 'bottom'
+            ? { ...options, width: base.width }
+            : options;
+        const hasFixedSize = boxOptions.width !== undefined &&
+            boxOptions.width !== 'auto' &&
+            boxOptions.height !== undefined &&
+            boxOptions.height !== 'auto';
+        // 'blank' resolves to WCAG auto-contrast black/white vs the box bg.
+        const boxFg = resolveBoxFg(boxOptions);
+        const fgStyle = boxFg !== undefined ? { fg: boxFg } : {};
+        // Visual-only slide (entrance animations): paints shift, geometry
+        // (sub-context, hitboxes) stays at the settled rect.
+        const paintDy = boxOptions.paintOffsetY ?? 0;
+        if (hasFixedSize) {
+            const preArea = resolveBoxArea(base.area, boxOptions, 0, 0);
+            const innerArea = resolveBoxInnerArea(preArea, boxOptions);
+            trackBoxRect(preArea, boxOptions);
+            if (boxOptions.bgColor || boxOptions.color) {
+                rect(state, preArea.x, preArea.y + paintDy, preArea.width, preArea.height, {
+                    char: ' ',
+                    bg: boxOptions.bgColor,
+                    fg: boxFg,
+                });
+            }
+            const styledBox = layoutBox('', boxOptions, base.width, base.height);
+            layoutBlit(state, preArea.x, preArea.y + paintDy, styledBox, fgStyle);
+            const frame = pushHitboxFrame(dslState);
+            const subContents = [];
+            dslState.stack.push(dslState.activeContents);
+            dslState.activeContents = subContents;
+            const subCtx = createDSLContext(state, dslState, innerArea.width, innerArea.height, innerArea.x, innerArea.y);
+            callback(subCtx);
+            dslState.activeContents = dslState.stack.pop();
+            popHitboxFrame(dslState);
+            const contentStr = subContents.join('');
+            if (contentStr) {
+                const innerOptions = {
+                    width: innerArea.width,
+                    height: innerArea.height,
+                    align: boxOptions.align,
+                    valign: boxOptions.valign,
+                    wrap: boxOptions.wrap,
+                    border: 'none',
+                    padding: [0, 0],
+                };
+                const measure = measureBox(contentStr, innerOptions, innerArea.width, innerArea.height);
+                const styledContent = layoutBox(contentStr, innerOptions, innerArea.width, innerArea.height, measure);
+                layoutBlit(state, innerArea.x, innerArea.y + paintDy, styledContent, fgStyle);
+                // Flow-anchored hitboxes land where their content line painted
+                // (alignment included); area-anchored rects were exact already.
+                fixupHitboxFrame(frame, boxOptions.wrap ? undefined : measure, innerArea.x, innerArea.y, 0, 0);
+            }
+            return styledBox;
+        }
+        // Auto-sized path: content must render before the painted rect is
+        // known. Seed the sub-context with last frame's measured rect for this
+        // declaration slot (exact from frame 2 on), fall back to the
+        // parent-sized guess on the first frame, then re-place the sub-context
+        // and every captured hitbox at the measured rect below — so hitboxes
+        // and rendered output share the same resolved rect within one frame.
+        const seqRef = state.autoBoxSeq;
+        const seq = seqRef ? seqRef.n++ : -1;
+        const seeded = seq >= 0 ? state.autoBoxAreas?.get(seq) : undefined;
+        const frame = pushHitboxFrame(dslState);
+        const subContents = [];
+        dslState.stack.push(dslState.activeContents);
+        dslState.activeContents = subContents;
+        const preAreaTemp = seeded ?? resolveBoxArea(base.area, boxOptions, base.width, base.height);
+        const innerAreaTemp = resolveBoxInnerArea(preAreaTemp, boxOptions);
+        const subCtx = createDSLContext(state, dslState, innerAreaTemp.width, innerAreaTemp.height, innerAreaTemp.x, innerAreaTemp.y);
+        callback(subCtx);
+        dslState.activeContents = dslState.stack.pop();
+        popHitboxFrame(dslState);
+        const contentStr = subContents.join('');
+        const measure = measureBox(contentStr, boxOptions, base.width, base.height);
+        const styledBox = layoutBox(contentStr, boxOptions, base.width, base.height, measure);
+        const boxArea = resolveBoxArea(base.area, boxOptions, measure.width, measure.height);
+        trackBoxRect(boxArea, boxOptions);
+        if (seq >= 0)
+            state.autoBoxAreas?.set(seq, boxArea);
+        // Retarget the sub-context to the painted rect so post-render reads
+        // (offsetX/offsetY/width/height/area) match the pixels on screen.
+        const innerArea = resolveBoxInnerArea(boxArea, boxOptions);
+        subCtx.offsetX = innerArea.x;
+        subCtx.offsetY = innerArea.y;
+        subCtx.width = innerArea.width;
+        subCtx.height = innerArea.height;
+        subCtx.area = innerArea;
+        fixupHitboxFrame(frame, boxOptions.wrap ? undefined : measure, boxArea.x, boxArea.y, innerArea.x - innerAreaTemp.x, innerArea.y - innerAreaTemp.y);
+        if (boxOptions.bgColor || boxOptions.color) {
+            rect(state, boxArea.x, boxArea.y + paintDy, boxArea.width, boxArea.height, {
+                char: ' ',
+                bg: boxOptions.bgColor,
+                fg: boxFg,
+            });
+        }
+        layoutBlit(state, boxArea.x, boxArea.y + paintDy, styledBox, fgStyle);
+        return styledBox;
+    };
+}
+/**
+ * Top-level Screen Context
+ */
+export function createScreenContext(state) {
+    state.hookCounter = 0;
+    // Dev diagnostics: frame boundary for keyless hook-drift tracking.
+    beginHookFrame(state);
+    const previousFocusableIds = state.focusableIds;
+    if (state.lastKey === KEYS.TAB && previousFocusableIds.length > 0) {
+        const idx = previousFocusableIds.indexOf(state.focusedId || '');
+        const nextIdx = (idx + 1) % previousFocusableIds.length;
+        state.focusedId = previousFocusableIds[nextIdx];
+    }
+    state.focusableIds = []; // Rebuild from this frame's rendered focusables.
+    // Last frame's settled hitboxes drive hover/click evaluation while this
+    // frame's registrations are still being placed (see interaction.ts).
+    state.prevHitboxes = state.hitboxes;
+    state.hitboxes = new Map(); // Rebuild from this frame's interactive geometry.
+    state.autoBoxSeq = { n: 0 }; // Re-key auto-box area seeding per frame.
+    state.autoBoxAreas ??= new Map();
+    // Hover enter/leave events last one frame; hitbox() refills them as this
+    // frame's hitboxes register (mutated, not reassigned: layers share them).
+    state.hoverEntered?.clear();
+    state.hoverLeft?.clear();
+    const dslState = {
+        activeContents: [],
+        stack: [],
+        layers: [],
+        layerOrder: 0,
+        themeStack: [],
+        boxRects: [],
+    };
+    const base = createDSLContext(state, dslState, state.width, state.height, 0, 0, true);
+    const flushFlow = () => {
+        const flow = dslState.activeContents.join('');
+        if (flow)
+            layoutBlit(state, 0, 0, flow);
+        // Dev diagnostics: direct boxes that painted over each other this
+        // frame with nothing controlling the stacking (hints once).
+        hintOverlappingBoxes(dslState.boxRects);
+        // Layers composite in ascending z-order. Right before each layer lands,
+        // its backdrop dims the whole screen and its shadow dims an offset rect
+        // (+2 cols, +1 row) under its painted bounds — both darken everything
+        // already composited, lower layers included.
+        const screenRect = { x: 0, y: 0, width: state.width, height: state.height };
+        dslState.layers
+            .sort((a, b) => a.zIndex - b.zIndex || a.order - b.order)
+            .forEach((layer) => {
+            if (layer.backdrop)
+                dimRect(state, screenRect, layer.backdrop);
+            if (layer.shadow && layer.bounds) {
+                dimRect(state, {
+                    x: layer.bounds.x + 2,
+                    y: layer.bounds.y + 1,
+                    width: layer.bounds.width,
+                    height: layer.bounds.height,
+                }, LAYER_SHADOW_DIM);
+            }
+            compositeLayer(state, layer.buffer);
+        });
+    };
+    const boxOverride = createDirectBoxRenderer(state, dslState, base);
+    const screenCtx = {
+        ...base,
+        box: boxOverride,
+        flushFlow,
+        requestStop: () => {
+            state.requestStop?.();
+        },
+        // Rebound so callbacks receive the screen context (direct box renderer),
+        // not the flow-mode base it was originally defined against.
+        themed(theme, callback) {
+            const next = resolveTheme(theme, activeTheme(dslState, state));
+            dslState.themeStack.push(next);
+            try {
+                callback(screenCtx);
+            }
+            finally {
+                dslState.themeStack.pop();
+            }
+            return screenCtx;
+        },
+    };
+    // Spreading `base` snapshots getter values; re-declare theme as a live
+    // getter so themed() overrides are visible on the screen context too.
+    Object.defineProperty(screenCtx, 'theme', {
+        configurable: true,
+        enumerable: true,
+        get: () => activeTheme(dslState, state),
+    });
+    // lastKey/keys are non-enumerable on `base` (so the spread above cannot
+    // fake an input read); re-declare them on the screen context.
+    defineInputAccessors(screenCtx, state);
+    return screenCtx;
+}
+//# sourceMappingURL=context.js.map