@vibecook/ghosttea-react 0.11.1 → 0.13.0

package/dist/renderers/webgpu-renderer.js

@@ -3,9 +3,11 @@ import { CursorStyle, GlyphFormat } from "@vibecook/ghosttea-frame";
 import { emptyRenderMetrics } from "../performance.js";
 import { CELL_WIDTH, LINE_HEIGHT, ORIGIN_X, ORIGIN_Y, effectiveCursorStyle, renderedSizeChanged, } from "./types.js";
 import { graphemeCellWidth, splitGraphemes } from "../cell-width.js";
+import { backgroundRunBounds } from "./background-geometry.js";
 import { rowsForDamage } from "./render-damage.js";
 import { SHADER_EFFECT_WGSL } from "./shader-effects.js";
-const ATLAS_SIZE = 2048;
+import { createLightAdaptation, darkPaintedBase, ensureContrast } from "./light-adaptation.js";
+import { AtlasBatchFullError, AtlasCapacityError, GlyphAtlasPages } from "./glyph-atlas.js";
 const GEOMETRY_CACHE_LIMIT = 8;
 const FONT_STACK = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
 const EFFECT_MODES = {
@@ -179,74 +181,29 @@ class DynamicVertexBuffer {
 }
 class FallbackGlyphAtlas {
     device;
-    #texture;
-    #sampler;
-    #bindGroup;
-    #cache = new Map();
+    pages;
     #scratch = new OffscreenCanvas(1, 1);
-    #x = 1;
-    #y = 1;
-    #rowHeight = 0;
     #uploadBytes = 0;
     #uploadCalls = 0;
-    #generation = 0;
     constructor(device, bindGroupLayout) {
         this.device = device;
-        this.#texture = device.createTexture({
-            label: "terminal glyph atlas",
-            size: [ATLAS_SIZE, ATLAS_SIZE],
-            format: "rgba8unorm",
-            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
-        });
-        this.#sampler = device.createSampler({ minFilter: "linear", magFilter: "linear" });
-        this.#bindGroup = device.createBindGroup({
-            label: "terminal glyph atlas bindings",
-            layout: bindGroupLayout,
-            entries: [
-                { binding: 0, resource: this.#texture.createView() },
-                { binding: 1, resource: this.#sampler },
-            ],
-        });
+        this.pages = new GlyphAtlasPages(device, bindGroupLayout, "terminal diagnostic glyph atlas", "rgba8unorm", 1);
     }
     get bindGroup() {
-        return this.#bindGroup;
+        return this.pages.bindGroup;
     }
     get generation() {
-        return this.#generation;
+        return this.pages.generation;
     }
     prepare(values, dpr) {
         const scale = Math.max(1, Math.min(3, dpr));
-        const all = [...new Set(values)].filter((value) => value.trim().length > 0);
-        const missing = all.filter((value) => !this.#cache.has(`${scale.toFixed(2)}:${value}`));
-        if (this.#fits(missing, scale, this.#x, this.#y, this.#rowHeight))
-            return;
-        this.#cache.clear();
-        this.#generation += 1;
-        this.#x = 1;
-        this.#y = 1;
-        this.#rowHeight = 0;
-        if (!this.#fits(all, scale, this.#x, this.#y, this.#rowHeight)) {
-            throw new Error("The diagnostic glyph atlas cannot fit the text visible in one frame");
-        }
-    }
-    #fits(values, scale, startX, startY, startRowHeight) {
-        let x = startX;
-        let y = startY;
-        let rowHeight = startRowHeight;
-        for (const value of values) {
-            const width = Math.max(1, Math.ceil(CELL_WIDTH * graphemeCellWidth(value) * scale));
-            const height = Math.max(1, Math.ceil(LINE_HEIGHT * scale));
-            if (x + width + 1 > ATLAS_SIZE) {
-                x = 1;
-                y += rowHeight + 1;
-                rowHeight = 0;
-            }
-            if (y + height + 1 > ATLAS_SIZE)
-                return false;
-            x += width + 1;
-            rowHeight = Math.max(rowHeight, height);
-        }
-        return true;
+        this.pages.prepare([...new Set(values)]
+            .filter((value) => value.trim().length > 0)
+            .map((value) => ({
+            key: `${scale.toFixed(2)}:${value}`,
+            width: Math.max(1, Math.ceil(CELL_WIDTH * graphemeCellWidth(value) * scale)),
+            height: Math.max(1, Math.ceil(LINE_HEIGHT * scale)),
+        })));
     }
     glyph(grapheme, dpr) {
         if (grapheme.trim().length === 0)
@@ -254,19 +211,11 @@ class FallbackGlyphAtlas {
         const scale = Math.max(1, Math.min(3, dpr));
         const cells = graphemeCellWidth(grapheme);
         const key = `${scale.toFixed(2)}:${grapheme}`;
-        const cached = this.#cache.get(key);
+        const cached = this.pages.get(key);
         if (cached)
             return cached;
         const width = Math.max(1, Math.ceil(CELL_WIDTH * cells * scale));
         const height = Math.max(1, Math.ceil(LINE_HEIGHT * scale));
-        if (this.#x + width + 1 > ATLAS_SIZE) {
-            this.#x = 1;
-            this.#y += this.#rowHeight + 1;
-            this.#rowHeight = 0;
-        }
-        if (this.#y + height + 1 > ATLAS_SIZE) {
-            throw new Error("Temporary glyph atlas exhausted");
-        }
         this.#scratch.width = width;
         this.#scratch.height = height;
         const context = this.#scratch.getContext("2d", { willReadFrequently: true });
@@ -278,23 +227,17 @@ class FallbackGlyphAtlas {
         context.textBaseline = "top";
         context.fillText(grapheme, 0, Math.max(0, Math.floor((height - 15 * scale) / 2)));
         const image = context.getImageData(0, 0, width, height);
-        this.device.queue.writeTexture({ texture: this.#texture, origin: [this.#x, this.#y] }, image.data, { bytesPerRow: width * 4, rowsPerImage: height }, [width, height]);
+        const { location, texture, origin } = this.pages.insert(key, width, height, cells);
+        this.device.queue.writeTexture({ texture, origin }, image.data, { bytesPerRow: width * 4, rowsPerImage: height }, [
+            width,
+            height,
+        ]);
         this.#uploadBytes += image.data.byteLength;
         this.#uploadCalls += 1;
-        const location = {
-            u0: this.#x / ATLAS_SIZE,
-            v0: this.#y / ATLAS_SIZE,
-            u1: (this.#x + width) / ATLAS_SIZE,
-            v1: (this.#y + height) / ATLAS_SIZE,
-            cells,
-        };
-        this.#cache.set(key, location);
-        this.#x += width + 1;
-        this.#rowHeight = Math.max(this.#rowHeight, height);
         return location;
     }
     destroy() {
-        this.#texture.destroy();
+        this.pages.destroy();
     }
     uploadMetrics() {
         return { bytes: this.#uploadBytes, calls: this.#uploadCalls };
@@ -304,111 +247,44 @@ class NativeGlyphAtlas {
     device;
     label;
     format;
-    #texture;
-    #sampler;
-    #bindGroup;
-    #cache = new Map();
-    #x = 1;
-    #y = 1;
-    #rowHeight = 0;
+    pages;
     #uploadBytes = 0;
     #uploadCalls = 0;
-    #generation = 0;
     constructor(device, bindGroupLayout, label, format) {
         this.device = device;
         this.label = label;
         this.format = format;
-        this.#texture = device.createTexture({
-            label,
-            size: [ATLAS_SIZE, ATLAS_SIZE],
-            format,
-            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
-        });
-        this.#sampler = device.createSampler({ minFilter: "linear", magFilter: "linear" });
-        this.#bindGroup = device.createBindGroup({
-            label: `${label} bindings`,
-            layout: bindGroupLayout,
-            entries: [
-                { binding: 0, resource: this.#texture.createView() },
-                { binding: 1, resource: this.#sampler },
-            ],
-        });
+        // At most 16 MiB mono + 32 MiB color + 16 MiB diagnostic pages. Empty
+        // formats allocate no textures. The ordinary ASCII working set uses 4 MiB.
+        this.pages = new GlyphAtlasPages(device, bindGroupLayout, label, format, format === "r8unorm" ? 4 : 2);
     }
     get bindGroup() {
-        return this.#bindGroup;
+        return this.pages.bindGroup;
     }
     get generation() {
-        return this.#generation;
+        return this.pages.generation;
     }
     prepare(definitions) {
-        const all = new Map();
-        const missing = new Map();
-        for (const definition of definitions) {
-            all.set(definition.id, definition);
-            if (!this.#cache.has(definition.id))
-                missing.set(definition.id, definition);
-        }
-        if (this.#fits(missing.values(), this.#x, this.#y, this.#rowHeight))
-            return;
-        this.#cache.clear();
-        this.#generation += 1;
-        this.#x = 1;
-        this.#y = 1;
-        this.#rowHeight = 0;
-        if (!this.#fits(all.values(), this.#x, this.#y, this.#rowHeight)) {
-            throw new Error(`${this.label} cannot fit the glyphs visible in one frame`);
-        }
-    }
-    #fits(definitions, startX, startY, startRowHeight) {
-        let x = startX;
-        let y = startY;
-        let rowHeight = startRowHeight;
-        for (const { width, height } of definitions) {
-            if (width + 2 > ATLAS_SIZE || height + 2 > ATLAS_SIZE)
-                return false;
-            if (x + width + 1 > ATLAS_SIZE) {
-                x = 1;
-                y += rowHeight + 1;
-                rowHeight = 0;
-            }
-            if (y + height + 1 > ATLAS_SIZE)
-                return false;
-            x += width + 1;
-            rowHeight = Math.max(rowHeight, height);
-        }
-        return true;
+        this.pages.prepare(Array.from(definitions, (definition) => ({
+            key: definition.id,
+            width: definition.width,
+            height: definition.height,
+        })));
     }
     glyph(definition) {
-        const cached = this.#cache.get(definition.id);
+        const cached = this.pages.get(definition.id);
         if (cached)
             return cached;
         const { width, height } = definition;
-        if (this.#x + width + 1 > ATLAS_SIZE) {
-            this.#x = 1;
-            this.#y += this.#rowHeight + 1;
-            this.#rowHeight = 0;
-        }
-        if (this.#y + height + 1 > ATLAS_SIZE)
-            throw new Error(`${this.label} exhausted`);
-        const pixels = definition.pixels;
+        const { location, texture, origin } = this.pages.insert(definition.id, width, height, 0);
         const bytesPerPixel = this.format === "r8unorm" ? 1 : 4;
-        this.device.queue.writeTexture({ texture: this.#texture, origin: [this.#x, this.#y] }, pixels, { bytesPerRow: width * bytesPerPixel, rowsPerImage: height }, [width, height]);
-        this.#uploadBytes += pixels.byteLength;
+        this.device.queue.writeTexture({ texture, origin }, definition.pixels, { bytesPerRow: width * bytesPerPixel, rowsPerImage: height }, [width, height]);
+        this.#uploadBytes += definition.pixels.byteLength;
         this.#uploadCalls += 1;
-        const location = {
-            u0: this.#x / ATLAS_SIZE,
-            v0: this.#y / ATLAS_SIZE,
-            u1: (this.#x + width) / ATLAS_SIZE,
-            v1: (this.#y + height) / ATLAS_SIZE,
-            cells: 0,
-        };
-        this.#cache.set(definition.id, location);
-        this.#x += width + 1;
-        this.#rowHeight = Math.max(this.#rowHeight, height);
         return location;
     }
     destroy() {
-        this.#texture.destroy();
+        this.pages.destroy();
     }
     uploadMetrics() {
         return { bytes: this.#uploadBytes, calls: this.#uploadCalls };
@@ -437,13 +313,14 @@ function createCachedVertexBuffer(device, label, data) {
     device.queue.writeBuffer(buffer, 0, data);
     return buffer;
 }
-function geometryCacheKey(view, rows, hasNativeRows, atlasGenerations) {
+function geometryCacheKey(view, rows, hasNativeRows, atlasGenerations, adaptationKey) {
     const selection = view.selection
         ? `${view.selection.anchor.row},${view.selection.anchor.column},${view.selection.focus.row},${view.selection.focus.column}`
         : "-";
     return [
         view.sessionEpoch.toString(),
         view.layoutEpoch.toString(),
+        view.cols,
         hasNativeRows ? "native" : "fallback",
         rows.map((row) => `${row}:${view.rowRevisions[row]?.toString() ?? "-"}`).join(","),
         [
@@ -455,6 +332,8 @@ function geometryCacheKey(view, rows, hasNativeRows, atlasGenerations) {
             ...view.theme.selectionForeground,
         ].join(","),
         view.theme.backgroundOpacityCells ? "opacity-cells" : "opaque-cells",
+        view.theme.minimumContrast ?? 1,
+        adaptationKey,
         selection,
         effectiveCursorStyle(view) === CursorStyle.Block ? `${view.cursor.x},${view.cursor.y}` : "-",
         atlasGenerations.join(","),
@@ -657,22 +536,51 @@ function pushBlockCursorBackground(vertices, view, renderRows, scale, viewportWi
         return;
     pushRectangle(vertices, (ORIGIN_X + view.cursor.x * CELL_WIDTH) * scale, (ORIGIN_Y + view.cursor.y * LINE_HEIGHT) * scale, CELL_WIDTH * scale, LINE_HEIGHT * scale, view.theme.cursor, viewportWidth, viewportHeight);
 }
-function resolveStyle(style, theme) {
+function resolveStyle(style, theme, adaptation = null) {
     let foreground = style?.foreground ? rgb(style.foreground) : theme.foreground;
     let background = style?.background ? rgb(style.background) : null;
-    if (style?.inverse) {
+    let fill = foreground;
+    if (adaptation) {
+        // Application colors were designed on the app's dark base; theme-owned
+        // defaults already belong to the light theme and pass through.
+        const source = { foreground: style?.foreground, background: style?.background };
+        if (style?.inverse) {
+            background = source.foreground ? adaptation.surface(source.foreground) : theme.foreground;
+            foreground = source.background
+                ? adaptation.ink(source.background, source.foreground ?? adaptation.base, style?.backgroundPalette)
+                : theme.background;
+            fill = foreground;
+        }
+        else {
+            foreground = source.foreground
+                ? adaptation.ink(source.foreground, source.background ?? adaptation.base, style?.foregroundPalette)
+                : theme.foreground;
+            background = source.background ? adaptation.surface(source.background) : null;
+            fill = source.foreground ? adaptation.surface(source.foreground) : theme.foreground;
+        }
+    }
+    else if (style?.inverse) {
         const originalForeground = foreground;
         foreground = background ?? theme.background;
         background = originalForeground;
+        fill = foreground;
     }
     if (background && theme.backgroundOpacityCells) {
         background = [background[0], background[1], background[2], theme.background[3]];
     }
-    if (style?.faint)
+    // Graphics (box drawing, block elements) and color glyphs keep the raw
+    // foreground, as in Ghostty; the backdrop ignores window transparency.
+    let text = ensureContrast(foreground, over(background ?? theme.background, theme.background), theme.minimumContrast ?? 1);
+    if (style?.faint) {
         foreground = [foreground[0], foreground[1], foreground[2], foreground[3] * 0.55];
+        fill = [fill[0], fill[1], fill[2], fill[3] * 0.55];
+        text = [text[0], text[1], text[2], text[3] * 0.55];
+    }
     return {
         foreground,
         background,
+        fill,
+        text,
         underline: style?.underline ?? false,
         strikethrough: style?.strikethrough ?? false,
         invisible: style?.invisible ?? false,
@@ -819,7 +727,10 @@ export class WebGpuTerminalRenderer {
     #monoAtlas;
     #colorAtlas;
     #fallbackAtlas;
+    #adaptations = new Map();
     #performanceMeasurementEnabled = false;
+    #submission = { queueSubmits: 0, surfaceIds: [] };
+    #scrollScratch;
     constructor(device, format) {
         this.device = device;
         this.format = format;
@@ -1018,6 +929,10 @@ export class WebGpuTerminalRenderer {
             geometryCache: new Map(),
             geometryCandidates: new Map(),
             sceneValid: false,
+            adaptation: null,
+            sceneHadSelection: false,
+            sceneHadOverhang: false,
+            sceneCursorRow: null,
         };
         this.#surfaces.set(id, surface);
         this.#configure(surface);
@@ -1039,6 +954,10 @@ export class WebGpuTerminalRenderer {
         surface.cursorBuffer.destroy();
         clearGeometryCache(surface);
         this.#surfaces.delete(id);
+        if (this.#surfaces.size === 0) {
+            this.#scrollScratch?.destroy();
+            this.#scrollScratch = undefined;
+        }
     }
     resize(id, size) {
         const surface = this.#surfaces.get(id);
@@ -1071,7 +990,10 @@ export class WebGpuTerminalRenderer {
             label: "terminal scene before Ghostty custom shaders",
             size: [Math.max(1, width), Math.max(1, height)],
             format: this.format,
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT |
+                GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.COPY_SRC |
+                GPUTextureUsage.COPY_DST,
         });
     }
     #createEffectTexture(width, height, suffix) {
@@ -1188,37 +1110,227 @@ export class WebGpuTerminalRenderer {
             drawCalls: effectPassCount,
         };
     }
-    render(id, view) {
-        const surface = this.#surfaces.get(id);
-        if (!surface)
+    /**
+     * Engage, re-key, or release light adaptation for a pane. Any change remaps
+     * every color, so the persistent scene and cached geometry are invalidated.
+     */
+    #prepareAdaptation(surface, view) {
+        const base = darkPaintedBase(view, surface.adaptation !== null);
+        let next = null;
+        if (base) {
+            const key = `${base.join(",")}|${view.theme.background.join(",")}|${view.theme.foreground.join(",")}`;
+            next = this.#adaptations.get(key) ?? null;
+            if (!next) {
+                next = createLightAdaptation(base, view.theme.background, view.theme.foreground);
+                this.#adaptations.set(key, next);
+                if (this.#adaptations.size > 8)
+                    this.#adaptations.delete(this.#adaptations.keys().next().value);
+            }
+        }
+        if ((next?.key ?? null) === (surface.adaptation?.key ?? null))
             return;
-        const encoder = this.device.createCommandEncoder({ label: `terminal frame ${id}` });
-        const metrics = view.damage?.geometryChanged === false
-            ? this.#encodeCachedRender(id, view, encoder)
-            : this.#encodeRender(id, view, encoder);
-        this.device.queue.submit([encoder.finish()]);
-        if (metrics)
-            metrics.queueSubmits = 1;
-        return metrics;
+        surface.adaptation = next;
+        surface.sceneValid = false;
+        clearGeometryCache(surface);
+    }
+    submission() {
+        return this.#submission;
+    }
+    #releaseAtlasBatch() {
+        this.#monoAtlas.pages.releaseBatch();
+        this.#colorAtlas.pages.releaseBatch();
+        this.#fallbackAtlas.pages.releaseBatch();
+    }
+    #prepareAtlases(view, renderRows, dpr) {
+        const mono = new Map();
+        const color = new Map();
+        for (const row of renderRows) {
+            for (const glyph of view.nativeRows[row] ?? []) {
+                const definition = view.glyphDefinitions.get(glyph.glyphId);
+                if (definition)
+                    (definition.format === GlyphFormat.Alpha8 ? mono : color).set(definition.id, definition);
+            }
+        }
+        this.#monoAtlas.prepare(mono.values());
+        this.#colorAtlas.prepare(color.values());
+        const fallback = !view.nativeRows.some((row) => row.length > 0);
+        if (fallback) {
+            this.#fallbackAtlas.prepare(renderRows.flatMap((row) => splitGraphemes(view.rows[row] ?? "")), dpr);
+        }
+        // Pin only after every format fits, so a rejected pane cannot occupy the
+        // batch budget with pages that no pending draw actually references.
+        if (mono.size > 0)
+            this.#monoAtlas.pages.pin();
+        if (color.size > 0)
+            this.#colorAtlas.pages.pin();
+        if (fallback && renderRows.length > 0)
+            this.#fallbackAtlas.pages.pin();
+    }
+    render(id, view) {
+        return this.renderBatch([{ id, view }])[0];
+    }
+    #canCopyScroll(surface, view) {
+        const shift = view.damage?.scrollRows ?? 0;
+        const top = ORIGIN_Y * surface.dpr;
+        const line = LINE_HEIGHT * surface.dpr;
+        const count = view.rows.length;
+        return (surface.sceneValid &&
+            !view.damage?.full &&
+            Number.isSafeInteger(shift) &&
+            shift !== 0 &&
+            Math.abs(shift) < count &&
+            !view.selection &&
+            !surface.sceneHadSelection &&
+            Number.isInteger(top) &&
+            Number.isInteger(line) &&
+            top + count * line <= surface.canvas.height);
+    }
+    #prepareScrollScratch(entries) {
+        let width = 0, height = 0;
+        for (const { id, view } of entries) {
+            const surface = this.#surfaces.get(id);
+            if (!surface || !this.#canCopyScroll(surface, view))
+                continue;
+            width = Math.max(width, surface.canvas.width);
+            height = Math.max(height, view.rows.length * LINE_HEIGHT * surface.dpr);
+        }
+        if (width === 0)
+            return false;
+        // One shared staging texture, never one per pane. Fall back to redraw if
+        // the batch's maximum extent would exceed this fixed memory ceiling.
+        if (width * height * 4 > 64 * 1024 * 1024)
+            return false;
+        if (!this.#scrollScratch || this.#scrollScratch.width < width || this.#scrollScratch.height < height) {
+            this.#scrollScratch?.destroy();
+            this.#scrollScratch = this.device.createTexture({
+                label: "terminal shared scroll staging",
+                size: [width, height],
+                format: this.format,
+                usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST,
+            });
+        }
+        return true;
+    }
+    #copyScroll(surface, view, encoder) {
+        const dy = view.damage.scrollRows * LINE_HEIGHT * surface.dpr;
+        const top = ORIGIN_Y * surface.dpr;
+        const size = [surface.canvas.width, view.rows.length * LINE_HEIGHT * surface.dpr - Math.abs(dy)];
+        // A texture cannot copy overlapping regions to itself. Encoder ordering
+        // lets all panes safely share this scratch texture, even within one batch.
+        encoder.copyTextureToTexture({ texture: surface.sceneTexture, origin: [0, top + Math.max(0, dy)] }, { texture: this.#scrollScratch }, size);
+        encoder.copyTextureToTexture({ texture: this.#scrollScratch }, { texture: surface.sceneTexture, origin: [0, top + Math.max(0, -dy)] }, size);
     }
     renderBatch(entries) {
-        const active = entries.filter(({ id }) => this.#surfaces.has(id));
-        if (active.length === 0)
-            return entries.map(() => undefined);
-        const encoder = this.device.createCommandEncoder({ label: `terminal frame batch (${active.length} panes)` });
+        this.#submission = { queueSubmits: 0, surfaceIds: [] };
+        this.#releaseAtlasBatch();
+        const prepared = entries.map(({ id, view }) => {
+            const surface = this.#surfaces.get(id);
+            // Light adaptation first, for the whole batch: a change remaps every color
+            // and invalidates the scene, so every decision below (the overhang
+            // shortcut, the scroll staging, the scroll copy) sees it invalidated.
+            if (surface)
+                this.#prepareAdaptation(surface, view);
+            const overhang = view.damage?.geometryChanged === false && surface?.sceneValid
+                ? surface.sceneHadOverhang
+                : view.nativeRows.some((row) => row.some((glyph) => glyph.y < 0 || glyph.y + glyph.height > LINE_HEIGHT));
+            // Row clears cannot reconstruct cross-row alpha composition at the
+            // repair boundary. Preserve those glyphs with a complete scene redraw.
+            if (view.damage &&
+                !view.damage.full &&
+                (view.damage.scrollRows || view.damage.rows.size > 0) &&
+                (overhang || surface?.sceneHadOverhang)) {
+                view = { ...view, damage: { full: true, rows: new Set(), geometryChanged: true } };
+            }
+            return { id, view, overhang };
+        });
+        const canStageScroll = this.#prepareScrollScratch(prepared);
+        let encoder;
+        let pendingIds = [];
         const byId = new Map();
-        for (const { id, view } of active) {
-            byId.set(id, view.damage?.geometryChanged === false
-                ? this.#encodeCachedRender(id, view, encoder)
-                : this.#encodeRender(id, view, encoder));
+        const submit = () => {
+            if (encoder && pendingIds.length > 0) {
+                this.device.queue.submit([encoder.finish()]);
+                this.#submission.queueSubmits += 1;
+                this.#submission.surfaceIds.push(...pendingIds);
+                const first = pendingIds.map((id) => byId.get(id)).find((metric) => metric !== undefined);
+                if (first)
+                    first.queueSubmits += 1;
+            }
+            encoder = undefined;
+            pendingIds = [];
+            this.#releaseAtlasBatch();
+        };
+        try {
+            for (const { id, view: originalView, overhang } of prepared) {
+                const surface = this.#surfaces.get(id);
+                if (!surface)
+                    continue;
+                let view = originalView;
+                const copyScroll = canStageScroll && this.#canCopyScroll(surface, view);
+                if (view.damage?.scrollRows) {
+                    if (copyScroll) {
+                        const rows = new Set(view.damage.rows);
+                        const shift = view.damage.scrollRows;
+                        // Repaint exposed rows, the two clipped edges and the cursor
+                        // baked into the last submitted scene (possibly several frames ago).
+                        rows.add(0);
+                        rows.add(view.rows.length - 1);
+                        for (let row = 0; row < view.rows.length; row++) {
+                            if (row + shift < 0 || row + shift >= view.rows.length)
+                                rows.add(row);
+                        }
+                        if (surface.sceneCursorRow !== null)
+                            rows.add(surface.sceneCursorRow - shift);
+                        if (effectiveCursorStyle(view) !== null)
+                            rows.add(view.cursor.y);
+                        view = { ...view, damage: { ...view.damage, rows, geometryChanged: true } };
+                    }
+                    else {
+                        view = { ...view, damage: { full: true, rows: new Set(), geometryChanged: true } };
+                    }
+                }
+                const count = Math.max(view.rows.length, view.nativeRows.length, view.nativeStyleRows.length);
+                const { rows } = rowsForDamage(count, view.damage, surface.sceneValid);
+                try {
+                    try {
+                        this.#prepareAtlases(view, rows, surface.dpr);
+                    }
+                    catch (error) {
+                        if (!(error instanceof AtlasBatchFullError) || pendingIds.length === 0)
+                            throw error;
+                        // All recyclable pages are referenced by pending draws. Submit
+                        // them before overwriting any texels, then retry this pane once.
+                        submit();
+                        this.#prepareAtlases(view, rows, surface.dpr);
+                    }
+                }
+                catch (error) {
+                    if (!(error instanceof AtlasCapacityError))
+                        throw error;
+                    // Capacity failure is isolated to this pane and preserves its old
+                    // scene. Other panes still submit; new content/resize can retry it.
+                    console.error(`[terminal-renderer] cannot render ${id}`, error);
+                    continue;
+                }
+                encoder ??= this.device.createCommandEncoder({ label: "terminal frame batch" });
+                if (copyScroll)
+                    this.#copyScroll(surface, view, encoder);
+                byId.set(id, view.damage?.geometryChanged === false
+                    ? this.#encodeCachedRender(id, view, encoder)
+                    : this.#encodeRender(id, view, encoder));
+                surface.sceneHadSelection = view.selection !== null;
+                surface.sceneHadOverhang = overhang;
+                surface.sceneCursorRow = effectiveCursorStyle(view) === null ? null : view.cursor.y;
+                pendingIds.push(id);
+            }
+            submit();
+        }
+        finally {
+            this.#releaseAtlasBatch();
         }
-        this.device.queue.submit([encoder.finish()]);
-        const firstMetrics = [...byId.values()].find((metrics) => metrics !== undefined);
-        if (firstMetrics)
-            firstMetrics.queueSubmits = 1;
         return entries.map(({ id }) => byId.get(id));
     }
-    #buildGeometry(view, renderRows, rowCount, fullRedraw, hasNativeRows, scale, viewportWidth, viewportHeight) {
+    #buildGeometry(view, renderRows, rowCount, fullRedraw, hasNativeRows, scale, viewportWidth, viewportHeight, adaptation) {
         const rectangleVertices = [];
         const glyphVertices = [];
         const colorGlyphVertices = [];
@@ -1228,22 +1340,10 @@ export class WebGpuTerminalRenderer {
             const cached = resolvedStyles.get(styleId);
             if (cached)
                 return cached;
-            const resolved = resolveStyle(view.styleDefinitions.get(styleId), view.theme);
+            const resolved = resolveStyle(view.styleDefinitions.get(styleId), view.theme, adaptation);
             resolvedStyles.set(styleId, resolved);
             return resolved;
         };
-        const monoDefinitions = new Map();
-        const colorDefinitions = new Map();
-        for (const row of renderRows) {
-            for (const glyph of view.nativeRows[row] ?? []) {
-                const definition = view.glyphDefinitions.get(glyph.glyphId);
-                if (!definition)
-                    continue;
-                (definition.format === GlyphFormat.Rgba8Premultiplied ? colorDefinitions : monoDefinitions).set(definition.id, definition);
-            }
-        }
-        this.#monoAtlas.prepare(monoDefinitions.values());
-        this.#colorAtlas.prepare(colorDefinitions.values());
         if (!fullRedraw) {
             for (const row of renderRows) {
                 const top = row === 0 ? 0 : (ORIGIN_Y + row * LINE_HEIGHT) * scale;
@@ -1259,7 +1359,10 @@ export class WebGpuTerminalRenderer {
                 const style = styleFor(run.styleId);
                 if (!style.background)
                     continue;
-                pushRectangle(rectangleVertices, (ORIGIN_X + run.cellStart * CELL_WIDTH) * scale, (ORIGIN_Y + row * LINE_HEIGHT) * scale, run.cellSpan * CELL_WIDTH * scale, LINE_HEIGHT * scale, style.background, viewportWidth, viewportHeight);
+                const bounds = backgroundRunBounds(run, row, view.cols, rowCount, scale, viewportWidth, viewportHeight);
+                if (!bounds)
+                    continue;
+                pushRectangle(rectangleVertices, bounds.x, bounds.y, bounds.width, bounds.height, style.background, viewportWidth, viewportHeight);
             }
         }
         const backgroundInstanceCount = rectangleVertices.length / 10;
@@ -1276,9 +1379,6 @@ export class WebGpuTerminalRenderer {
         }
         pushBlockCursorBackground(rectangleVertices, view, renderRows, scale, viewportWidth, viewportHeight);
         const selectionInstanceCount = rectangleVertices.length / 10 - backgroundInstanceCount;
-        if (!hasNativeRows) {
-            this.#fallbackAtlas.prepare(renderRows.flatMap((row) => splitGraphemes(view.rows[row] ?? "")), scale);
-        }
         if (hasNativeRows) {
             for (const row of renderRows) {
                 const { box: boxCells, block: blockCells } = specialDrawingCells(view.rows[row] ?? "");
@@ -1310,12 +1410,14 @@ export class WebGpuTerminalRenderer {
                         let backdrop = style.background ?? view.theme.background;
                         if (isSelected)
                             backdrop = view.theme.selection;
-                        if (pushBlockElement(rectangleVertices, blockElement, instance.cellStart, row, scale, over(foreground, backdrop), viewportWidth, viewportHeight))
+                        const blockForeground = foreground === style.foreground ? style.fill : foreground;
+                        if (pushBlockElement(rectangleVertices, blockElement, instance.cellStart, row, scale, over(blockForeground, backdrop), viewportWidth, viewportHeight))
                             continue;
                     }
-                    const atlas = definition.format === GlyphFormat.Alpha8 ? this.#monoAtlas : this.#colorAtlas;
-                    const vertices = definition.format === GlyphFormat.Alpha8 ? glyphVertices : colorGlyphVertices;
-                    pushGlyph(vertices, (ORIGIN_X + instance.x) * scale, (ORIGIN_Y + row * LINE_HEIGHT + instance.y) * scale, instance.width * scale, instance.height * scale, atlas.glyph(definition), foreground, viewportWidth, viewportHeight);
+                    const mono = definition.format === GlyphFormat.Alpha8;
+                    const atlas = mono ? this.#monoAtlas : this.#colorAtlas;
+                    const vertices = mono ? glyphVertices : colorGlyphVertices;
+                    pushGlyph(vertices, (ORIGIN_X + instance.x) * scale, (ORIGIN_Y + row * LINE_HEIGHT + instance.y) * scale, instance.width * scale, instance.height * scale, atlas.glyph(definition), mono && foreground === style.foreground ? style.text : foreground, viewportWidth, viewportHeight);
                 }
             }
         }
@@ -1347,10 +1449,10 @@ export class WebGpuTerminalRenderer {
                 const rowTop = (ORIGIN_Y + row * LINE_HEIGHT) * scale;
                 const stroke = Math.max(1, Math.round(scale));
                 if (style.underline) {
-                    pushRectangle(rectangleVertices, x, Math.round(rowTop + 16 * scale), width, stroke, style.foreground, viewportWidth, viewportHeight);
+                    pushRectangle(rectangleVertices, x, Math.round(rowTop + 16 * scale), width, stroke, style.text, viewportWidth, viewportHeight);
                 }
                 if (style.strikethrough) {
-                    pushRectangle(rectangleVertices, x, Math.round(rowTop + 9 * scale), width, stroke, style.foreground, viewportWidth, viewportHeight);
+                    pushRectangle(rectangleVertices, x, Math.round(rowTop + 9 * scale), width, stroke, style.text, viewportWidth, viewportHeight);
                 }
             }
         }
@@ -1394,22 +1496,10 @@ export class WebGpuTerminalRenderer {
             const cached = resolvedStyles.get(styleId);
             if (cached)
                 return cached;
-            const resolved = resolveStyle(view.styleDefinitions.get(styleId), view.theme);
+            const resolved = resolveStyle(view.styleDefinitions.get(styleId), view.theme, surface.adaptation);
             resolvedStyles.set(styleId, resolved);
             return resolved;
         };
-        const monoDefinitions = new Map();
-        const colorDefinitions = new Map();
-        for (const row of renderRows) {
-            for (const glyph of view.nativeRows[row] ?? []) {
-                const definition = view.glyphDefinitions.get(glyph.glyphId);
-                if (!definition)
-                    continue;
-                (definition.format === GlyphFormat.Rgba8Premultiplied ? colorDefinitions : monoDefinitions).set(definition.id, definition);
-            }
-        }
-        this.#monoAtlas.prepare(monoDefinitions.values());
-        this.#colorAtlas.prepare(colorDefinitions.values());
         if (!fullRedraw) {
             for (const row of renderRows) {
                 const top = row === 0 ? 0 : (ORIGIN_Y + row * LINE_HEIGHT) * scale;
@@ -1425,7 +1515,10 @@ export class WebGpuTerminalRenderer {
                 const style = styleFor(run.styleId);
                 if (!style.background)
                     continue;
-                pushRectangle(rectangleVertices, (ORIGIN_X + run.cellStart * CELL_WIDTH) * scale, (ORIGIN_Y + row * LINE_HEIGHT) * scale, run.cellSpan * CELL_WIDTH * scale, LINE_HEIGHT * scale, style.background, viewportWidth, viewportHeight);
+                const bounds = backgroundRunBounds(run, row, view.cols, rowCount, scale, viewportWidth, viewportHeight);
+                if (!bounds)
+                    continue;
+                pushRectangle(rectangleVertices, bounds.x, bounds.y, bounds.width, bounds.height, style.background, viewportWidth, viewportHeight);
             }
         }
         const backgroundInstanceCount = rectangleVertices.length / 10;
@@ -1443,9 +1536,6 @@ export class WebGpuTerminalRenderer {
         pushBlockCursorBackground(rectangleVertices, view, renderRows, scale, viewportWidth, viewportHeight);
         const selectionInstanceCount = rectangleVertices.length / 10 - backgroundInstanceCount;
         const hasNativeRows = view.nativeRows.some((row) => row.length > 0);
-        if (!hasNativeRows) {
-            this.#fallbackAtlas.prepare(renderRows.flatMap((row) => splitGraphemes(view.rows[row] ?? "")), scale);
-        }
         if (hasNativeRows) {
             for (const row of renderRows) {
                 const { box: boxCells, block: blockCells } = specialDrawingCells(view.rows[row] ?? "");
@@ -1479,13 +1569,15 @@ export class WebGpuTerminalRenderer {
                         let backdrop = style.background ?? view.theme.background;
                         if (isSelected)
                             backdrop = view.theme.selection;
-                        const blockColor = over(foreground, backdrop);
+                        const blockForeground = foreground === style.foreground ? style.fill : foreground;
+                        const blockColor = over(blockForeground, backdrop);
                         if (pushBlockElement(rectangleVertices, blockElement, instance.cellStart, row, scale, blockColor, viewportWidth, viewportHeight))
                             continue;
                     }
-                    const atlas = definition.format === GlyphFormat.Alpha8 ? this.#monoAtlas : this.#colorAtlas;
-                    const vertices = definition.format === GlyphFormat.Alpha8 ? glyphVertices : colorGlyphVertices;
-                    pushGlyph(vertices, (ORIGIN_X + instance.x) * scale, (ORIGIN_Y + row * LINE_HEIGHT + instance.y) * scale, instance.width * scale, instance.height * scale, atlas.glyph(definition), foreground, viewportWidth, viewportHeight);
+                    const mono = definition.format === GlyphFormat.Alpha8;
+                    const atlas = mono ? this.#monoAtlas : this.#colorAtlas;
+                    const vertices = mono ? glyphVertices : colorGlyphVertices;
+                    pushGlyph(vertices, (ORIGIN_X + instance.x) * scale, (ORIGIN_Y + row * LINE_HEIGHT + instance.y) * scale, instance.width * scale, instance.height * scale, atlas.glyph(definition), mono && foreground === style.foreground ? style.text : foreground, viewportWidth, viewportHeight);
                 }
             }
         }
@@ -1517,10 +1609,10 @@ export class WebGpuTerminalRenderer {
                 const rowTop = (ORIGIN_Y + row * LINE_HEIGHT) * scale;
                 const stroke = Math.max(1, Math.round(scale));
                 if (style.underline) {
-                    pushRectangle(rectangleVertices, x, Math.round(rowTop + 16 * scale), width, stroke, style.foreground, viewportWidth, viewportHeight);
+                    pushRectangle(rectangleVertices, x, Math.round(rowTop + 16 * scale), width, stroke, style.text, viewportWidth, viewportHeight);
                 }
                 if (style.strikethrough) {
-                    pushRectangle(rectangleVertices, x, Math.round(rowTop + 9 * scale), width, stroke, style.foreground, viewportWidth, viewportHeight);
+                    pushRectangle(rectangleVertices, x, Math.round(rowTop + 9 * scale), width, stroke, style.text, viewportWidth, viewportHeight);
                 }
             }
         }
@@ -1684,7 +1776,7 @@ export class WebGpuTerminalRenderer {
             this.#colorAtlas.generation,
             this.#fallbackAtlas.generation,
         ];
-        let key = geometryCacheKey(view, damage.rows, hasNativeRows, generations());
+        let key = geometryCacheKey(view, damage.rows, hasNativeRows, generations(), surface.adaptation?.key ?? "-");
         const cached = surface.geometryCache.get(key);
         const cacheHit = cached !== undefined;
         if (cached) {
@@ -1695,8 +1787,8 @@ export class WebGpuTerminalRenderer {
         else {
             const admitted = surface.geometryCandidates.has(key);
             const candidateKey = key;
-            const cpu = this.#buildGeometry(view, damage.rows, rowCount, false, hasNativeRows, scale, viewportWidth, viewportHeight);
-            key = geometryCacheKey(view, damage.rows, hasNativeRows, generations());
+            const cpu = this.#buildGeometry(view, damage.rows, rowCount, false, hasNativeRows, scale, viewportWidth, viewportHeight, surface.adaptation);
+            key = geometryCacheKey(view, damage.rows, hasNativeRows, generations(), surface.adaptation?.key ?? "-");
             const promote = admitted && key === candidateKey;
             geometry = {
                 rectangleBuffer: promote