@flyingrobots/bijou-tui 3.1.0 → 4.1.0

package/dist/app-frame-render.js

@@ -2,56 +2,160 @@
  * Layout rendering for `app-frame.ts`.
  *
  * Recursive tree renderer, page content, maximized pane, header/help lines,
- * transition shader, and string-to-grid tokenization.
+ * transition shader, and surface/string bridge helpers.
  */
-import { resolveSafeCtx, surfaceToString } from '@flyingrobots/bijou';
+import { createSurface, darken, hexToRgb, lighten, mix, parseAnsiToSurface, saturate, resolveSafeCtx, } from '@flyingrobots/bijou';
 import { TRANSITION_SHADERS } from './transition-shaders.js';
 import { fitBlock } from './layout-utils.js';
-import { splitPane, splitPaneLayout } from './split-pane.js';
-import { grid, gridLayout } from './grid.js';
-import { createFocusAreaState, focusArea, focusAreaScrollTo, focusAreaScrollToX, } from './focus-area.js';
+import { splitPaneLayout } from './split-pane.js';
+import { gridLayout } from './grid.js';
+import { createFocusAreaStateForSurface, focusAreaSurfaceInto, focusAreaScrollTo, focusAreaScrollToX, } from './focus-area.js';
 import { isMinimized, createPanelVisibilityState } from './panel-state.js';
 import { createPanelDockState, resolveChildOrder, getNodeId } from './panel-dock.js';
-import { tokenizeAnsi } from './viewport.js';
+import { visibleLength } from './viewport.js';
 import { helpShort } from './help.js';
-import { findPaneNode, isPaneMinimized, mergeMaps, offsetRect, fitLine, mergeBindingSources, } from './app-frame-utils.js';
-import { normalizeViewOutput } from './view-output.js';
-import { styleTextWithBCSS } from './css/text-style.js';
+import { findPaneNode, isPaneMinimized, mergeMaps, offsetRect, fitLine, } from './app-frame-utils.js';
+import { normalizeViewOutput, normalizeViewOutputInto } from './view-output.js';
+import { createStyledTextSurfaceWithBCSS } from './css/text-style.js';
+import { frameModeLabel } from './app-frame-i18n.js';
+const framePaneScratchBySize = new Map();
+function relativeLuminance(hex) {
+    const [red, green, blue] = hexToRgb(hex);
+    const r = srgbChannelToLinear(red);
+    const g = srgbChannelToLinear(green);
+    const b = srgbChannelToLinear(blue);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function srgbChannelToLinear(channel) {
+    const normalized = channel / 255;
+    return normalized <= 0.03928
+        ? normalized / 12.92
+        : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+function contrastRatio(a, b) {
+    const lighter = Math.max(relativeLuminance(a), relativeLuminance(b));
+    const darker = Math.min(relativeLuminance(a), relativeLuminance(b));
+    return (lighter + 0.05) / (darker + 0.05);
+}
+function colorDistance(a, b) {
+    const [ar, ag, ab] = hexToRgb(a);
+    const [br, bg, bb] = hexToRgb(b);
+    return Math.sqrt((ar - br) ** 2 + (ag - bg) ** 2 + (ab - bb) ** 2);
+}
+function deriveActiveHeaderTabToken(ctx, backgroundHex, baseHex) {
+    const darkBackground = relativeLuminance(backgroundHex) < 0.35;
+    const accent = ctx.semantic('accent');
+    const info = ctx.semantic('info');
+    const primary = ctx.semantic('primary');
+    const warning = ctx.semantic('warning');
+    const seeds = [
+        accent,
+        info,
+        mix(accent, info, 0.5),
+        mix(accent, warning, 0.3),
+        mix(primary, accent, 0.3),
+    ];
+    const candidates = seeds.flatMap((seed) => {
+        const emphasized = saturate(seed, 0.35);
+        return darkBackground
+            ? [
+                emphasized,
+                lighten(seed, 0.18),
+                lighten(emphasized, 0.3),
+                lighten(mix(seed, primary, 0.25), 0.2),
+            ]
+            : [
+                darken(seed, 0.18),
+                darken(emphasized, 0.28),
+                darken(mix(seed, primary, 0.1), 0.22),
+            ];
+    });
+    let best = candidates[0] ?? accent;
+    let bestScore = Number.NEGATIVE_INFINITY;
+    for (const candidate of candidates) {
+        const contrast = contrastRatio(candidate.hex, backgroundHex);
+        const distance = colorDistance(candidate.hex, baseHex) / Math.sqrt(3 * 255 * 255);
+        const score = contrast * 3 + distance;
+        if (score > bestScore) {
+            bestScore = score;
+            best = candidate;
+        }
+    }
+    return {
+        hex: best.hex,
+        modifiers: ['bold'],
+    };
+}
+function paintActiveHeaderTab(surface, tabTargets, activePageId, ctx, tokenOverride) {
+    if (ctx == null)
+        return;
+    const activeTarget = tabTargets.find((target) => target.pageId === activePageId);
+    if (activeTarget == null)
+        return;
+    const sampleCell = surface.get(activeTarget.startCol, 0);
+    const backgroundHex = sampleCell.bg
+        ?? ctx.surface('primary').bg
+        ?? ctx.surface('secondary').bg
+        ?? '#000000';
+    const baseHex = sampleCell.fg
+        ?? ctx.surface('primary').hex
+        ?? ctx.semantic('primary').hex;
+    const token = tokenOverride ?? deriveActiveHeaderTabToken(ctx, backgroundHex, baseHex);
+    for (let x = activeTarget.startCol; x <= activeTarget.endCol; x++) {
+        const cell = surface.get(x, 0);
+        surface.set(x, 0, {
+            ...cell,
+            fg: token.hex,
+            bg: token.bg ?? cell.bg,
+            modifiers: token.modifiers == null
+                ? cell.modifiers
+                : Array.from(new Set([...(cell.modifiers ?? []), ...token.modifiers])),
+            empty: false,
+        });
+    }
+}
 /** Recursively render a layout tree node (pane, split, or grid) into a rect. */
 export function renderFrameNode(node, rect, ctx) {
     if (rect.width <= 0 || rect.height <= 0) {
-        return { output: '', paneRects: new Map(), paneOrder: [] };
+        return { surface: createSurface(rect.width, rect.height), paneRects: new Map(), paneOrder: [] };
+    }
+    const surface = createSurface(rect.width, rect.height);
+    const painted = paintFrameNodeInto(node, { row: 0, col: 0, width: rect.width, height: rect.height }, rect, ctx, surface);
+    return { surface, paneRects: painted.paneRects, paneOrder: painted.paneOrder };
+}
+function paintFrameNodeInto(node, localRect, absoluteRect, ctx, target) {
+    if (localRect.width <= 0 || localRect.height <= 0) {
+        return { paneRects: new Map(), paneOrder: [] };
     }
     if (node.kind === 'pane') {
         // Minimized pane: render as collapsed title bar
         if (isMinimized(ctx.visibility, node.paneId)) {
             const titleBar = `[${node.paneId}] \u25b8`; // ▸
-            const output = fitBlock(titleBar, rect.width, rect.height).join('\n');
+            target.blit(blockSurface(titleBar, localRect.width, localRect.height), localRect.col, localRect.row);
             return {
-                output,
-                paneRects: new Map([[node.paneId, rect]]),
+                paneRects: new Map([[node.paneId, absoluteRect]]),
                 paneOrder: [node.paneId],
             };
         }
         const prior = ctx.scrollByPane[node.paneId] ?? { x: 0, y: 0 };
-        const content = framePaneOutputToString(node.render(rect.width, rect.height), rect.width, rect.height);
-        let state = createFocusAreaState({
-            content,
-            width: rect.width,
-            height: rect.height,
+        const contentSurface = framePaneOutputToSurface(node.render(localRect.width, localRect.height), localRect.width, localRect.height, getFramePaneScratch(localRect.width, localRect.height));
+        let state = createFocusAreaStateForSurface(contentSurface, {
+            width: localRect.width,
+            height: localRect.height,
             overflowX: node.overflowX ?? 'hidden',
         });
         state = focusAreaScrollTo(state, prior.y);
         state = focusAreaScrollToX(state, prior.x);
-        const output = focusArea(state, {
+        focusAreaSurfaceInto(contentSurface, state, target, {
             focused: node.paneId === ctx.focusedPaneId,
             ctx: resolveSafeCtx(),
             id: node.paneId,
             classes: [node.paneId === ctx.focusedPaneId ? 'focused' : 'unfocused'],
-        });
+            focusedGutterToken: node.focusedGutterToken,
+            unfocusedGutterToken: node.unfocusedGutterToken,
+        }, localRect.col, localRect.row);
         return {
-            output,
-            paneRects: new Map([[node.paneId, rect]]),
+            paneRects: new Map([[node.paneId, absoluteRect]]),
             paneOrder: [node.paneId],
         };
     }
@@ -74,75 +178,56 @@ export function renderFrameNode(node, rect, ctx) {
         }
         if (aMinimized && !bMinimized) {
             // A is minimized: give it minimal space
-            const mainAxisTotal = direction === 'row' ? rect.width : rect.height;
+            const mainAxisTotal = direction === 'row' ? localRect.width : localRect.height;
             const minimizedSize = Math.min(1, mainAxisTotal);
             splitState = { ...splitState, ratio: minimizedSize / Math.max(1, mainAxisTotal) };
         }
         else if (bMinimized && !aMinimized) {
             // B is minimized: give A most of the space
-            const mainAxisTotal = direction === 'row' ? rect.width : rect.height;
+            const mainAxisTotal = direction === 'row' ? localRect.width : localRect.height;
             const minimizedSize = Math.min(1, mainAxisTotal);
             splitState = { ...splitState, ratio: 1 - minimizedSize / Math.max(1, mainAxisTotal) };
         }
         const layout = splitPaneLayout(splitState, {
             direction,
-            width: rect.width,
-            height: rect.height,
-            minA: node.minA,
-            minB: node.minB,
-        });
-        const aRect = offsetRect(layout.paneA, rect.row, rect.col);
-        const bRect = offsetRect(layout.paneB, rect.row, rect.col);
-        const a = renderFrameNode(effectiveA, aRect, ctx);
-        const b = renderFrameNode(effectiveB, bRect, ctx);
-        const output = splitPane(splitState, {
-            direction,
-            width: rect.width,
-            height: rect.height,
+            width: localRect.width,
+            height: localRect.height,
             minA: node.minA,
             minB: node.minB,
-            dividerChar: node.dividerChar,
-            paneA: () => a.output,
-            paneB: () => b.output,
         });
+        const localARect = offsetRect(layout.paneA, localRect.row, localRect.col);
+        const localBRect = offsetRect(layout.paneB, localRect.row, localRect.col);
+        const absoluteARect = offsetRect(layout.paneA, absoluteRect.row, absoluteRect.col);
+        const absoluteBRect = offsetRect(layout.paneB, absoluteRect.row, absoluteRect.col);
+        const a = paintFrameNodeInto(effectiveA, localARect, absoluteARect, ctx, target);
+        const b = paintFrameNodeInto(effectiveB, localBRect, absoluteBRect, ctx, target);
+        paintDivider(target, offsetRect(layout.divider, localRect.row, localRect.col), node.dividerChar, direction);
         return {
-            output,
             paneRects: mergeMaps(a.paneRects, b.paneRects),
             paneOrder: [...a.paneOrder, ...b.paneOrder],
         };
     }
     const relRects = gridLayout({
-        width: rect.width,
-        height: rect.height,
+        width: localRect.width,
+        height: localRect.height,
         columns: node.columns,
         rows: node.rows,
         areas: node.areas,
         gap: node.gap,
     });
-    const renderedByArea = new Map();
+    let paneRects = new Map();
+    const seenPaneIds = new Set();
+    const paneOrder = [];
     for (const [areaName, areaRect] of relRects) {
-        const absoluteAreaRect = offsetRect(areaRect, rect.row, rect.col);
+        const localAreaRect = offsetRect(areaRect, localRect.row, localRect.col);
+        const absoluteAreaRect = offsetRect(areaRect, absoluteRect.row, absoluteRect.col);
         const child = node.cells[areaName];
         if (child == null) {
             resolveSafeCtx()?.io.writeError(`createFramedApp: grid cell "${areaName}" missing in page "${ctx.pageId}" — rendering placeholder\n`);
-            renderedByArea.set(areaName, renderMissingGridCell(areaName, absoluteAreaRect));
+            target.blit(blockSurface(`[missing grid cell: ${areaName}]`, localAreaRect.width, localAreaRect.height), localAreaRect.col, localAreaRect.row);
             continue;
         }
-        renderedByArea.set(areaName, renderFrameNode(child, absoluteAreaRect, ctx));
-    }
-    const output = grid({
-        width: rect.width,
-        height: rect.height,
-        columns: node.columns,
-        rows: node.rows,
-        areas: node.areas,
-        gap: node.gap,
-        cells: Object.fromEntries([...renderedByArea.entries()].map(([name, rendered]) => [name, () => rendered.output])),
-    });
-    let paneRects = new Map();
-    const seenPaneIds = new Set();
-    const paneOrder = [];
-    for (const rendered of renderedByArea.values()) {
+        const rendered = paintFrameNodeInto(child, localAreaRect, absoluteAreaRect, ctx, target);
         for (const [paneId, paneRect] of rendered.paneRects.entries()) {
             if (paneRects.has(paneId)) {
                 throw new Error(`createFramedApp: duplicate paneId "${paneId}" in rendered layout`);
@@ -157,18 +242,24 @@ export function renderFrameNode(node, rect, ctx) {
             paneOrder.push(paneId);
         }
     }
-    return { output, paneRects, paneOrder };
+    return { paneRects, paneOrder };
 }
 /** Render a placeholder for a grid area that has no matching cell definition. */
 export function renderMissingGridCell(areaName, rect) {
     return {
-        output: fitBlock(`[missing grid cell: ${areaName}]`, rect.width, rect.height).join('\n'),
+        surface: blockSurface(`[missing grid cell: ${areaName}]`, rect.width, rect.height),
         paneRects: new Map(),
         paneOrder: [],
     };
 }
 /** Render a page's layout tree within the frame body rect. */
 export function renderPageContent(pageId, model, bodyRect, pagesById) {
+    const surface = createSurface(bodyRect.width, bodyRect.height);
+    const geometry = renderPageContentInto(pageId, model, bodyRect, pagesById, surface, 0, 0);
+    return { surface, paneRects: geometry.paneRects, paneOrder: geometry.paneOrder };
+}
+/** Paint a page's layout tree directly into an existing target surface. */
+export function renderPageContentInto(pageId, model, bodyRect, pagesById, target, offsetRow = bodyRect.row, offsetCol = bodyRect.col) {
     const page = pagesById.get(pageId);
     const pageModel = model.pageModels[pageId];
     const renderCtx = {
@@ -179,92 +270,131 @@ export function renderPageContent(pageId, model, bodyRect, pagesById) {
         visibility: model.minimizedByPage[pageId] ?? createPanelVisibilityState(),
         dockState: model.dockStateByPage[pageId] ?? createPanelDockState(),
     };
-    return renderFrameNode(page.layout(pageModel), bodyRect, renderCtx);
+    return paintFrameNodeInto(page.layout(pageModel), { row: offsetRow, col: offsetCol, width: bodyRect.width, height: bodyRect.height }, bodyRect, renderCtx, target);
 }
 /** Render only the maximized pane at the full body rect. */
 export function renderMaximizedPane(pageId, model, bodyRect, pagesById, maximizedPaneId) {
+    const surface = createSurface(bodyRect.width, bodyRect.height);
+    const geometry = renderMaximizedPaneInto(pageId, model, bodyRect, pagesById, maximizedPaneId, surface, 0, 0);
+    return { surface, paneRects: geometry.paneRects, paneOrder: geometry.paneOrder };
+}
+/** Paint only the maximized pane directly into an existing target surface. */
+export function renderMaximizedPaneInto(pageId, model, bodyRect, pagesById, maximizedPaneId, target, offsetRow = bodyRect.row, offsetCol = bodyRect.col) {
     const page = pagesById.get(pageId);
     const pageModel = model.pageModels[pageId];
     const layoutTree = page.layout(pageModel);
     const paneNode = findPaneNode(layoutTree, maximizedPaneId);
     if (paneNode == null) {
         // Pane not found, fall back to normal rendering
-        return renderPageContent(pageId, model, bodyRect, pagesById);
+        return renderPageContentInto(pageId, model, bodyRect, pagesById, target, offsetRow, offsetCol);
     }
     const prior = model.scrollByPage[pageId]?.[maximizedPaneId] ?? { x: 0, y: 0 };
-    const content = framePaneOutputToString(paneNode.render(bodyRect.width, bodyRect.height), bodyRect.width, bodyRect.height);
-    let state = createFocusAreaState({
-        content,
+    const contentSurface = framePaneOutputToSurface(paneNode.render(bodyRect.width, bodyRect.height), bodyRect.width, bodyRect.height, getFramePaneScratch(bodyRect.width, bodyRect.height));
+    let state = createFocusAreaStateForSurface(contentSurface, {
         width: bodyRect.width,
         height: bodyRect.height,
         overflowX: paneNode.overflowX ?? 'hidden',
     });
     state = focusAreaScrollTo(state, prior.y);
     state = focusAreaScrollToX(state, prior.x);
-    const output = focusArea(state, {
+    focusAreaSurfaceInto(contentSurface, state, target, {
         focused: true,
         ctx: resolveSafeCtx(),
         id: maximizedPaneId,
         classes: ['focused', 'maximized'],
-    });
+        focusedGutterToken: paneNode.focusedGutterToken,
+        unfocusedGutterToken: paneNode.unfocusedGutterToken,
+    }, offsetCol, offsetRow);
     return {
-        output,
         paneRects: new Map([[maximizedPaneId, bodyRect]]),
         paneOrder: [maximizedPaneId],
     };
 }
-/** Render the top header line showing the app title and tab bar. */
-export function renderHeaderLine(model, options, pagesById) {
+/** Resolve the top header line plus clickable tab target geometry. */
+export function resolveHeaderLine(model, options, pagesById) {
+    const ctx = resolveSafeCtx();
+    const activePage = pagesById.get(model.activePageId);
+    const activePageModel = model.pageModels[model.activePageId];
+    const headerStyle = options.headerStyle?.({
+        model,
+        activePage,
+        pageModel: activePageModel,
+    });
     const title = options.title ?? 'App';
-    const tabs = model.pageOrder.map((id) => {
+    let cursor = visibleLength(title) + 2;
+    const tabTargets = [];
+    const tabs = model.pageOrder.map((id, index) => {
         const page = pagesById.get(id);
-        return id === model.activePageId ? `[${page.title}]` : ` ${page.title} `;
+        const label = id === model.activePageId ? `[${page.title}]` : ` ${page.title} `;
+        const width = visibleLength(label);
+        const startCol = cursor;
+        const endCol = cursor + width - 1;
+        if (endCol >= 0 && startCol < model.columns) {
+            tabTargets.push({
+                pageId: id,
+                startCol: Math.max(0, startCol),
+                endCol: Math.min(Math.max(0, model.columns - 1), endCol),
+            });
+        }
+        cursor += width;
+        if (index < model.pageOrder.length - 1) {
+            cursor += 1;
+        }
+        return label;
     }).join(' ');
     const line = fitLine(`${title}  ${tabs}`, model.columns);
-    return styleTextWithBCSS(line, resolveSafeCtx(), {
+    const surface = createStyledTextSurfaceWithBCSS(line, model.columns, ctx, {
         type: 'FrameHeader',
         id: 'frame-header',
         classes: [`page-${model.activePageId}`],
     });
+    paintActiveHeaderTab(surface, tabTargets, model.activePageId, ctx, headerStyle?.activeTabToken);
+    return {
+        surface,
+        tabTargets,
+    };
 }
-/** Render the bottom status line showing mode, focused pane, and key hints. */
-export function renderHelpLine(model, frameKeys, options, activePage) {
-    const mode = model.commandPalette != null
+/** Render the footer status line showing mode, focused pane, and key hints. */
+export function renderHelpLine(model, activeLayer, i18n, notificationCue) {
+    const mode = activeLayer.kind === 'search' || activeLayer.kind === 'command-palette'
         ? 'PALETTE'
-        : model.helpOpen
+        : activeLayer.kind === 'help'
             ? 'HELP'
-            : 'NORMAL';
+            : activeLayer.kind === 'quit-confirm'
+                ? 'QUIT'
+                : activeLayer.kind === 'settings'
+                    ? 'SETTINGS'
+                    : activeLayer.kind === 'notification-center'
+                        ? 'NOTICES'
+                        : activeLayer.kind === 'page-modal'
+                            ? 'MODAL'
+                            : 'NORMAL';
     const focusedPane = model.focusedPaneByPage[model.activePageId] ?? '-';
-    const status = `[${mode}] page:${model.activePageId} pane:${focusedPane}`;
-    const source = options.helpLineSource?.({
-        model,
-        activePage,
-        frameKeys,
-        globalKeys: options.globalKeys,
-    }) ?? mergeBindingSources(frameKeys, options.globalKeys, activePage.helpSource ?? activePage.keyMap);
-    const hint = helpShort(source);
+    const modeLabel = frameModeLabel(i18n, mode);
+    const status = notificationCue == null || notificationCue.length === 0
+        ? `[${modeLabel}] page:${model.activePageId} pane:${focusedPane}`
+        : `[${modeLabel}] page:${model.activePageId} pane:${focusedPane} ${notificationCue}`;
+    const hint = typeof activeLayer.hintSource === 'string'
+        ? activeLayer.hintSource
+        : activeLayer.hintSource == null
+            ? ''
+            : helpShort(activeLayer.hintSource);
     const line = hint.length > 0
-        ? ` ${status}  ${hint}`
+        ? (() => {
+            const statusWithPadding = ` ${status}`;
+            const gap = model.columns - visibleLength(statusWithPadding) - visibleLength(hint);
+            return gap >= 2
+                ? `${statusWithPadding}${' '.repeat(gap)}${hint}`
+                : `${statusWithPadding}  ${hint}`;
+        })()
         : ` ${status}`;
-    return styleTextWithBCSS(fitLine(line, model.columns), resolveSafeCtx(), {
+    return createStyledTextSurfaceWithBCSS(fitLine(line, model.columns), model.columns, resolveSafeCtx(), {
         type: 'FrameHelp',
         id: 'frame-help',
         classes: [`mode-${mode.toLowerCase()}`, `page-${model.activePageId}`],
     });
 }
 /**
- * Split a styled multiline string into a 2D grid of single-column characters.
- * Each cell is a fully-styled string (including resets).
- */
-export function stringToGrid(str, width, height) {
-    const lines = str.split('\n');
-    const grid = [];
-    for (let y = 0; y < height; y++) {
-        const line = lines[y] ?? '';
-        grid.push(tokenizeAnsi(line, width));
-    }
-    return grid;
-}
 /**
  * Apply a transition shader to blend between the previous and next page views.
  *
@@ -273,52 +403,69 @@ export function stringToGrid(str, width, height) {
  */
 export function renderTransition(prev, next, style, progress, width, height, ctx, frame = 0) {
     const shader = typeof style === 'function' ? style : TRANSITION_SHADERS[style];
-    if (!shader)
+    if (!shader || width <= 0 || height <= 0)
         return next;
-    if (width <= 0 || height <= 0)
-        return next;
-    const prevGrid = stringToGrid(prev, width, height);
-    const nextGrid = stringToGrid(next, width, height);
-    const lines = [];
+    const surface = createSurface(width, height);
     for (let y = 0; y < height; y++) {
-        let line = '';
         for (let x = 0; x < width; x++) {
-            // Shared stable-ish pseudo-random seed based on coordinates
             const seed = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
             const rand = seed - Math.floor(seed);
             const result = shader({ x, y, width, height, progress, rand, frame, ctx });
-            const showNext = result.showNext;
-            const charOverride = result.char;
-            if (charOverride !== undefined) {
-                line += charOverride;
-            }
-            else {
-                line += (showNext ? nextGrid[y]?.[x] : prevGrid[y]?.[x]) ?? ' ';
-            }
+            const baseCell = result.showNext ? next.get(x, y) : prev.get(x, y);
+            surface.set(x, y, applyTransitionCell(baseCell, result));
         }
-        lines.push(line);
     }
-    return lines.join('\n');
+    return surface;
 }
-export function framePaneOutputToString(output, width, height) {
-    if (typeof output === 'string')
-        return output;
-    const surface = normalizeViewOutput(output, { width, height }).surface;
-    const ctx = resolveSafeCtx();
-    if (ctx?.style) {
-        return surfaceToString(surface, ctx.style);
-    }
-    return surfaceToPlainText(surface);
+export function framePaneOutputToSurface(output, width, height, scratch) {
+    return scratch == null
+        ? normalizeViewOutput(output, { width, height }).surface
+        : normalizeViewOutputInto(output, { width, height }, scratch).surface;
+}
+export function blockSurface(content, width, height) {
+    return parseAnsiToSurface(fitBlock(content, width, height).join('\n'), width, height);
 }
-function surfaceToPlainText(surface) {
-    const lines = [];
-    for (let y = 0; y < surface.height; y++) {
-        let line = '';
-        for (let x = 0; x < surface.width; x++) {
-            line += surface.get(x, y).char;
+function paintDivider(target, rect, dividerChar, direction) {
+    const unit = resolveDividerUnit(dividerChar, direction === 'row' ? '│' : '─');
+    for (let y = 0; y < rect.height; y++) {
+        for (let x = 0; x < rect.width; x++) {
+            target.set(rect.col + x, rect.row + y, { char: unit, empty: false });
         }
-        lines.push(line);
     }
-    return lines.join('\n');
+}
+function resolveDividerUnit(dividerChar, fallback) {
+    if (dividerChar == null || dividerChar.length === 0)
+        return fallback;
+    return dividerChar[0] ?? fallback;
+}
+function getFramePaneScratch(width, height) {
+    const key = `${width}x${height}`;
+    let scratch = framePaneScratchBySize.get(key);
+    if (scratch == null) {
+        scratch = createSurface(width, height);
+        framePaneScratchBySize.set(key, scratch);
+    }
+    return scratch;
+}
+function applyTransitionCell(baseCell, result) {
+    if (result.overrideCell != null) {
+        return {
+            ...baseCell,
+            ...result.overrideCell,
+            char: result.overrideCell.char,
+            empty: false,
+        };
+    }
+    if (result.overrideChar !== undefined) {
+        return {
+            ...baseCell,
+            char: result.overrideChar,
+            empty: false,
+        };
+    }
+    return {
+        ...baseCell,
+        empty: false,
+    };
 }
 //# sourceMappingURL=app-frame-render.js.map