@vibecook/ghosttea-react 0.12.0 → 0.13.0

package/dist/terminal-render.worker.js

@@ -23,6 +23,7 @@ var SectionKind;
   SectionKind2[SectionKind2["AccessibilityText"] = 10] = "AccessibilityText";
   SectionKind2[SectionKind2["ClipboardWrite"] = 11] = "ClipboardWrite";
   SectionKind2[SectionKind2["LinkTargets"] = 12] = "LinkTargets";
+  SectionKind2[SectionKind2["StylePalette"] = 13] = "StylePalette";
 })(SectionKind || (SectionKind = {}));
 var GlyphFormat;
 (function(GlyphFormat2) {
@@ -41,14 +42,15 @@ function assertRange(condition, message) {
     throw new RangeError(`Invalid terminal frame: ${message}`);
 }
 function decodeFrame(buffer) {
-  assertRange(buffer.byteLength >= FRAME_HEADER_BYTES, "truncated header");
-  assertRange(buffer.byteLength <= MAX_FRAME_BYTES, "packet exceeds limit");
-  const view = new DataView(buffer);
+  const bytes = buffer instanceof Uint8Array ? new Uint8Array(buffer.buffer, buffer.byteOffset, buffer.byteLength) : new Uint8Array(buffer);
+  assertRange(bytes.byteLength >= FRAME_HEADER_BYTES, "truncated header");
+  assertRange(bytes.byteLength <= MAX_FRAME_BYTES, "packet exceeds limit");
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
   assertRange(view.getUint32(0, true) === FRAME_MAGIC, "bad magic");
   assertRange(view.getUint16(4, true) === FRAME_PROTOCOL_VERSION, "unsupported protocol version");
   const sectionCount = view.getUint16(60, true);
   const tableEnd = FRAME_HEADER_BYTES + sectionCount * SECTION_HEADER_BYTES;
-  assertRange(tableEnd <= buffer.byteLength, "truncated section table");
+  assertRange(tableEnd <= bytes.byteLength, "truncated section table");
   const sections = [];
   for (let index = 0; index < sectionCount; index += 1) {
     const base = FRAME_HEADER_BYTES + index * SECTION_HEADER_BYTES;
@@ -58,8 +60,8 @@ function decodeFrame(buffer) {
     const length = view.getUint32(base + 8, true);
     const itemCount = view.getUint32(base + 12, true);
     const end = offset + length;
-    assertRange(end >= offset && offset >= tableEnd && end <= buffer.byteLength, "section out of bounds");
-    sections.push({ kind, flags, itemCount, bytes: new Uint8Array(buffer, offset, length) });
+    assertRange(end >= offset && offset >= tableEnd && end <= bytes.byteLength, "section out of bounds");
+    sections.push({ kind, flags, itemCount, bytes: bytes.subarray(offset, end) });
   }
   return {
     protocolVersion: view.getUint16(4, true),
@@ -152,14 +154,14 @@ function decodeGlyphDefinitions(section) {
       bearingX: view.getInt16(offset - 12, true),
       bearingY: view.getInt16(offset - 10, true),
       format,
-      pixels: section.bytes.slice(offset, offset + pixelLength)
+      pixels: new Uint8Array(section.bytes.subarray(offset, offset + pixelLength))
     });
     offset += pixelLength;
   }
   assertRange(offset === section.bytes.byteLength, "trailing glyph definition bytes");
   return definitions;
 }
-function decodeStyleDefinitions(section) {
+function decodeStyleDefinitions(section, paletteSection) {
   assertRange(section.kind === SectionKind.StyleDefinitions, "wrong style definition section kind");
   assertRange(section.bytes.byteLength >= 4, "truncated style definition header");
   const view = new DataView(section.bytes.buffer, section.bytes.byteOffset, section.bytes.byteLength);
@@ -188,7 +190,39 @@ function decodeStyleDefinitions(section) {
       ...backgroundKind === 1 ? { background: [view.getUint8(offset + 11), view.getUint8(offset + 12), view.getUint8(offset + 13)] } : {}
     });
   }
-  return styles;
+  if (!paletteSection)
+    return styles;
+  const palette = new Map(decodeStylePalette(paletteSection).map((entry) => [entry.styleId, entry]));
+  return styles.map((style) => {
+    const entry = palette.get(style.id);
+    if (!entry)
+      return style;
+    return {
+      ...style,
+      ...entry.foreground !== void 0 && style.foreground ? { foregroundPalette: entry.foreground } : {},
+      ...entry.background !== void 0 && style.background ? { backgroundPalette: entry.background } : {}
+    };
+  });
+}
+function decodeStylePalette(section) {
+  assertRange(section.kind === SectionKind.StylePalette, "wrong style palette section kind");
+  assertRange(section.bytes.byteLength >= 4, "truncated style palette header");
+  const view = new DataView(section.bytes.buffer, section.bytes.byteOffset, section.bytes.byteLength);
+  const count = view.getUint32(0, true);
+  assertRange(count === section.itemCount, "style palette count mismatch");
+  assertRange(section.bytes.byteLength === 4 + count * 8, "invalid style palette length");
+  const entries = [];
+  for (let index = 0; index < count; index += 1) {
+    const offset = 4 + index * 8;
+    const flags = view.getUint8(offset + 4);
+    assertRange((flags & ~3) === 0, "invalid style palette flags");
+    entries.push({
+      styleId: view.getUint32(offset, true),
+      ...flags & 1 ? { foreground: view.getUint8(offset + 5) } : {},
+      ...flags & 2 ? { background: view.getUint8(offset + 6) } : {}
+    });
+  }
+  return entries;
 }
 function decodeCursorState(section) {
   assertRange(section.kind === SectionKind.CursorState, "wrong cursor section kind");
@@ -688,8 +722,418 @@ fn sparks(position: vec2f, uv: vec2f) -> vec4f {
 `
 );
 
+// src/renderers/light-adaptation.ts
+var clamp = (value, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, value));
+var toLinear = (v) => v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+var toGamma = (v) => v <= 31308e-7 ? v * 12.92 : 1.055 * v ** (1 / 2.4) - 0.055;
+function oklab([r8, g8, b8]) {
+  const r = toLinear(r8 / 255);
+  const g = toLinear(g8 / 255);
+  const b = toLinear(b8 / 255);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function oklabToLinear([L, a, b]) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+var inGamut = (linear) => linear.every((v) => v >= -1e-4 && v <= 1 + 1e-4);
+var fromLch = (L, C, h) => [L, C * Math.cos(h), C * Math.sin(h)];
+var toRgb = (lab) => oklabToLinear(lab).map((v) => Math.round(clamp(toGamma(clamp(v))) * 255));
+function gamutMap(L, C, h) {
+  L = clamp(L);
+  if (inGamut(oklabToLinear(fromLch(L, C, h)))) return toRgb(fromLch(L, C, h));
+  let lo = 0;
+  let hi = C;
+  for (let i = 0; i < 20; i += 1) {
+    const mid = (lo + hi) / 2;
+    if (inGamut(oklabToLinear(fromLch(L, mid, h)))) lo = mid;
+    else hi = mid;
+  }
+  return toRgb(fromLch(L, lo, h));
+}
+function maxChroma(L, h) {
+  let lo = 0;
+  let hi = 0.4;
+  for (let i = 0; i < 16; i += 1) {
+    const mid = (lo + hi) / 2;
+    if (inGamut(oklabToLinear(fromLch(L, mid, h)))) lo = mid;
+    else hi = mid;
+  }
+  return lo;
+}
+var K1 = 0.206;
+var K2 = 0.03;
+var K3 = (1 + K1) / (1 + K2);
+var toe = (L) => 0.5 * (K3 * L - K1 + Math.sqrt((K3 * L - K1) ** 2 + 4 * K2 * K3 * L));
+var toeInv = (Lr) => (Lr * Lr + K1 * Lr) / (K3 * (Lr + K2));
+function apcaY([r, g, b]) {
+  const y = 0.2126729 * (r / 255) ** 2.4 + 0.7151522 * (g / 255) ** 2.4 + 0.072175 * (b / 255) ** 2.4;
+  return y < 0.022 ? y + (0.022 - y) ** 1.414 : y;
+}
+function apca(text, background) {
+  const yt = apcaY(text);
+  const yb = apcaY(background);
+  if (Math.abs(yb - yt) < 5e-4) return 0;
+  if (yb > yt) {
+    const sapc2 = (yb ** 0.56 - yt ** 0.57) * 1.14;
+    return sapc2 < 0.1 ? 0 : (sapc2 - 0.027) * 100;
+  }
+  const sapc = (yb ** 0.65 - yt ** 0.62) * 1.14;
+  return sapc > -0.1 ? 0 : (sapc + 0.027) * 100;
+}
+var smoothstep = (e0, e1, x) => {
+  const t = clamp((x - e0) / (e1 - e0));
+  return t * t * (3 - 2 * t);
+};
+var toRgba = ([r, g, b]) => [r / 255, g / 255, b / 255, 1];
+var fromRgba = (color) => [
+  Math.round(clamp(color[0]) * 255),
+  Math.round(clamp(color[1]) * 255),
+  Math.round(clamp(color[2]) * 255)
+];
+var keyOf = ([r, g, b]) => r << 16 | g << 8 | b;
+var luminance = ([r, g, b]) => 0.2126 * toLinear(r / 255) + 0.7152 * toLinear(g / 255) + 0.0722 * toLinear(b / 255);
+var contrastRatio = (a, b) => {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+};
+function isLightBackground(color) {
+  const y = luminance(color);
+  return (y + 0.05) / 0.05 > 1.05 / (y + 0.05);
+}
+var contrasted = /* @__PURE__ */ new Map();
+function ensureContrast(text, background, ratio) {
+  if (!(ratio > 1)) return text;
+  const fg = fromRgba(text);
+  const bg = fromRgba(background);
+  const cacheKey = `${keyOf(fg)}/${keyOf(bg)}/${ratio}`;
+  let result = contrasted.get(cacheKey);
+  if (result === void 0) {
+    if (contrastRatio(fg, bg) >= ratio) result = null;
+    else {
+      const towardWhite = contrastRatio([255, 255, 255], bg) > contrastRatio([0, 0, 0], bg);
+      const [L, a, b] = oklab(fg);
+      const C = Math.hypot(a, b);
+      const h = Math.atan2(b, a);
+      let near = L;
+      let far = towardWhite ? 1 : 0;
+      let best = towardWhite ? [255, 255, 255] : [0, 0, 0];
+      if (contrastRatio(best, bg) >= ratio) {
+        for (let i = 0; i < 20; i += 1) {
+          const mid = (near + far) / 2;
+          const candidate = gamutMap(mid, C, h);
+          if (contrastRatio(candidate, bg) >= ratio) {
+            far = mid;
+            best = candidate;
+          } else near = mid;
+        }
+      }
+      result = best;
+    }
+    if (contrasted.size > 4096) contrasted.clear();
+    contrasted.set(cacheKey, result);
+  }
+  if (result === null) return text;
+  return [result[0] / 255, result[1] / 255, result[2] / 255, text[3]];
+}
+function createLightAdaptation(base, paperColor, inkColor) {
+  const paper = fromRgba(paperColor);
+  const inkRgb = fromRgba(inkColor);
+  const baseLab = oklab(base);
+  const paperLab = oklab(paper);
+  const inkLab = oklab(inkRgb);
+  const baseLr = toe(baseLab[0]);
+  const paperLr = toe(paperLab[0]);
+  const surfaces2 = /* @__PURE__ */ new Map();
+  const surfaceRgb = (color) => {
+    const cached = surfaces2.get(keyOf(color));
+    if (cached) return cached;
+    const [L, a, b] = oklab(color);
+    let Lr = clamp(paperLr - (toe(L) - baseLr));
+    const ap = a - baseLab[1] + paperLab[1];
+    const bp = b - baseLab[2] + paperLab[2];
+    const C = Math.hypot(ap, bp);
+    const h = Math.atan2(bp, ap);
+    if (C > 0.015) {
+      const want = Math.min(C, 0.045);
+      const stop = Lr - 0.15;
+      while (Lr > stop && maxChroma(toeInv(Lr), h) < want) Lr -= 5e-3;
+    }
+    const result = gamutMap(toeInv(Lr), C, h);
+    surfaces2.set(keyOf(color), result);
+    return result;
+  };
+  const solveLc = (want, C, h, background) => {
+    const backgroundL = oklab(background)[0];
+    let lo = want > 0 ? 0 : backgroundL;
+    let hi = want > 0 ? backgroundL : 1;
+    let best = gamutMap(want > 0 ? 0 : 1, C, h);
+    for (let i = 0; i < 18; i += 1) {
+      const mid = (lo + hi) / 2;
+      const candidate = gamutMap(mid, C, h);
+      const lc = apca(candidate, background);
+      const enough = want > 0 ? lc >= want : lc <= want;
+      if (enough) best = candidate;
+      if (want > 0 === enough) lo = mid;
+      else hi = mid;
+    }
+    return best;
+  };
+  const inks = /* @__PURE__ */ new Map();
+  const ink = (color, sourceBackground, paletteIndex) => {
+    const themeColor = paletteIndex !== void 0 && CHROMATIC_ANSI.has(paletteIndex);
+    const cacheKey = `${keyOf(color)}/${keyOf(sourceBackground)}${themeColor ? "/p" : ""}`;
+    const cached = inks.get(cacheKey);
+    if (cached) return cached;
+    const mapped = surfaceRgb(sourceBackground);
+    if (themeColor) {
+      const legibility = Math.min(45, Math.abs(apca(color, paper)));
+      if (Math.abs(apca(color, mapped)) >= legibility) {
+        const rgba2 = toRgba(color);
+        inks.set(cacheKey, rgba2);
+        return rgba2;
+      }
+    }
+    const [L, a0, b0] = oklab(color);
+    const C0 = Math.hypot(a0, b0);
+    let a = a0;
+    let b = b0;
+    if (C0 < 0.03) {
+      const w2 = (1 - C0 / 0.03) * 0.7;
+      a = a0 * (1 - w2) + inkLab[1] * w2;
+      b = b0 * (1 - w2) + inkLab[2] * w2;
+    }
+    const C = Math.hypot(a, b);
+    const h = Math.atan2(b, a);
+    const delta = toe(L) - toe(oklab(sourceBackground)[0]);
+    const sign = delta >= 0 ? -1 : 1;
+    const Lr = clamp(toe(oklab(mapped)[0]) + sign * Math.max(Math.abs(delta), 0.06));
+    let result = gamutMap(toeInv(Lr), C, h);
+    const w = smoothstep(0.03, 0.08, C0);
+    if (w > 0) {
+      const source = apca(color, sourceBackground);
+      const lightOnDark = source < 0 || source === 0 && delta >= 0;
+      const magnitude = clamp(Math.abs(source) * 0.5 + 28, 45, 70);
+      const boosted = C0 + w * clamp(0.12 - C0, 0, C0 * 0.8);
+      const accent = solveLc(lightOnDark ? magnitude : -magnitude, boosted, Math.atan2(b0, a0), mapped);
+      if (w >= 1) result = accent;
+      else {
+        const p = oklab(result);
+        const q = oklab(accent);
+        result = toRgb([p[0] * (1 - w) + q[0] * w, p[1] * (1 - w) + q[1] * w, p[2] * (1 - w) + q[2] * w]);
+      }
+    }
+    const rgba = toRgba(result);
+    inks.set(cacheKey, rgba);
+    return rgba;
+  };
+  return {
+    key: [base, paper, inkRgb].map((color) => keyOf(color).toString(16)).join("/"),
+    base,
+    surface: (color) => toRgba(surfaceRgb(color)),
+    ink
+  };
+}
+var CHROMATIC_ANSI = /* @__PURE__ */ new Set([1, 2, 3, 4, 5, 6, 9, 10, 11, 12, 13, 14]);
+var ENGAGE_SHARE = 0.6;
+var RELEASE_SHARE = 0.35;
+function darkPaintedBase(view, engaged) {
+  if ((view.theme.lightAdaptation ?? "off") === "off") return null;
+  if (!isLightBackground(fromRgba(view.theme.background))) return null;
+  const rows = Math.max(view.rows.length, view.nativeStyleRows.length);
+  const total = rows * view.cols;
+  if (total === 0) return null;
+  const areas = /* @__PURE__ */ new Map();
+  let dark = 0;
+  const darkness = /* @__PURE__ */ new Map();
+  for (const runs of view.nativeStyleRows) {
+    for (const run of runs) {
+      const style = view.styleDefinitions.get(run.styleId);
+      const background = style?.inverse ? style.foreground : style?.background;
+      if (!background) continue;
+      const key = keyOf(background);
+      let isDark = darkness.get(key);
+      if (isDark === void 0) {
+        isDark = !isLightBackground(background);
+        darkness.set(key, isDark);
+      }
+      if (!isDark) continue;
+      dark += run.cellSpan;
+      areas.set(key, (areas.get(key) ?? 0) + run.cellSpan);
+    }
+  }
+  if (dark / total < (engaged ? RELEASE_SHARE : ENGAGE_SHARE)) return null;
+  let bestKey = 0;
+  let bestArea = -1;
+  for (const [key, area] of areas) {
+    if (area > bestArea) {
+      bestKey = key;
+      bestArea = area;
+    }
+  }
+  return [bestKey >> 16 & 255, bestKey >> 8 & 255, bestKey & 255];
+}
+
+// src/renderers/glyph-atlas.ts
+var AtlasCapacityError = class extends Error {
+};
+var AtlasBatchFullError = class extends Error {
+};
+var GlyphAtlasPages = class {
+  constructor(device, layout, label, format, maxPages, size = 2048) {
+    this.device = device;
+    this.layout = layout;
+    this.label = label;
+    this.format = format;
+    this.maxPages = maxPages;
+    this.size = size;
+    this.#sampler = device.createSampler({ minFilter: "linear", magFilter: "linear" });
+  }
+  #pages = [];
+  #sampler;
+  #current;
+  #generation = 0;
+  #clock = 0;
+  get generation() {
+    return this.#current?.generation ?? 0;
+  }
+  get bindGroup() {
+    if (!this.#current) throw new Error(`${this.label} has not been prepared`);
+    return this.#current.bindGroup;
+  }
+  prepare(input) {
+    const glyphs = /* @__PURE__ */ new Map();
+    for (const glyph of input) glyphs.set(glyph.key, glyph);
+    if (glyphs.size === 0) return;
+    let selected;
+    let selectedPlan;
+    let bestHits = -1;
+    for (const page of this.#pages) {
+      const plan2 = this.#plan(glyphs.values(), page);
+      if (!plan2) continue;
+      let hits = 0;
+      for (const key of glyphs.keys()) if (page.cache.has(key)) hits += 1;
+      if (hits > bestHits || hits === bestHits && page.used > (selected?.used ?? -1)) {
+        selected = page;
+        selectedPlan = plan2;
+        bestHits = hits;
+      }
+    }
+    if (!selected) {
+      selectedPlan = this.#plan(glyphs.values());
+      if (!selectedPlan) {
+        throw new AtlasCapacityError(`${this.label} cannot fit the glyphs visible in one frame`);
+      }
+      if (this.#pages.length === this.maxPages) {
+        const recyclable = this.#pages.filter((page) => !page.pinned).sort((a, b) => a.used - b.used)[0];
+        if (!recyclable) throw new AtlasBatchFullError(this.label);
+        recyclable.texture.destroy();
+        this.#pages.splice(this.#pages.indexOf(recyclable), 1);
+      }
+      const texture = this.device.createTexture({
+        label: this.label,
+        size: [this.size, this.size],
+        format: this.format,
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+      });
+      selected = {
+        texture,
+        bindGroup: this.device.createBindGroup({
+          label: `${this.label} bindings`,
+          layout: this.layout,
+          entries: [
+            { binding: 0, resource: texture.createView() },
+            { binding: 1, resource: this.#sampler }
+          ]
+        }),
+        cache: /* @__PURE__ */ new Map(),
+        slots: /* @__PURE__ */ new Map(),
+        generation: ++this.#generation,
+        used: 0,
+        pinned: false,
+        x: 1,
+        y: 1,
+        rowHeight: 0
+      };
+      this.#pages.push(selected);
+    }
+    const plan = selectedPlan;
+    for (const [key, slot] of plan.slots) selected.slots.set(key, slot);
+    selected.x = plan.x;
+    selected.y = plan.y;
+    selected.rowHeight = plan.rowHeight;
+    selected.used = ++this.#clock;
+    this.#current = selected;
+  }
+  pin() {
+    if (this.#current) this.#current.pinned = true;
+  }
+  #plan(glyphs, page) {
+    const slots = /* @__PURE__ */ new Map();
+    let x = page?.x ?? 1;
+    let y = page?.y ?? 1;
+    let rowHeight = page?.rowHeight ?? 0;
+    for (const { key, width, height } of glyphs) {
+      if (page?.slots.has(key)) continue;
+      if (width + 2 > this.size || height + 2 > this.size) return void 0;
+      if (x + width + 1 > this.size) {
+        x = 1;
+        y += rowHeight + 1;
+        rowHeight = 0;
+      }
+      if (y + height + 1 > this.size) return void 0;
+      slots.set(key, { origin: [x, y], width, height });
+      x += width + 1;
+      rowHeight = Math.max(rowHeight, height);
+    }
+    return { slots, x, y, rowHeight };
+  }
+  get(key) {
+    return this.#current?.cache.get(key);
+  }
+  insert(key, width, height, cells) {
+    const page = this.#current;
+    if (!page) throw new Error(`${this.label} has not been prepared`);
+    const slot = page.slots.get(key);
+    if (!slot || slot.width !== width || slot.height !== height) {
+      throw new Error(`${this.label} glyph does not match its prepared reservation`);
+    }
+    const origin = slot.origin;
+    const [x, y] = origin;
+    const location = {
+      u0: x / this.size,
+      v0: y / this.size,
+      u1: (x + width) / this.size,
+      v1: (y + height) / this.size,
+      cells
+    };
+    page.cache.set(key, location);
+    return { location, texture: page.texture, origin };
+  }
+  releaseBatch() {
+    for (const page of this.#pages) page.pinned = false;
+  }
+  destroy() {
+    for (const page of this.#pages) page.texture.destroy();
+    this.#pages.length = 0;
+    this.#current = void 0;
+  }
+};
+
 // src/renderers/webgpu-renderer.ts
-var ATLAS_SIZE = 2048;
 var GEOMETRY_CACHE_LIMIT = 8;
 var FONT_STACK = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
 var EFFECT_MODES = {
@@ -870,88 +1314,37 @@ var DynamicVertexBuffer = class {
 var FallbackGlyphAtlas = class {
   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);
   }
-  #texture;
-  #sampler;
-  #bindGroup;
-  #cache = /* @__PURE__ */ new Map();
+  pages;
   #scratch = new OffscreenCanvas(1, 1);
-  #x = 1;
-  #y = 1;
-  #rowHeight = 0;
   #uploadBytes = 0;
   #uploadCalls = 0;
-  #generation = 0;
   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) return void 0;
     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 });
@@ -962,28 +1355,17 @@ var FallbackGlyphAtlas = class {
     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 };
@@ -994,106 +1376,44 @@ var NativeGlyphAtlas = class {
     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 }
-      ]
-    });
+    this.pages = new GlyphAtlasPages(device, bindGroupLayout, label, format, format === "r8unorm" ? 4 : 2);
   }
-  #texture;
-  #sampler;
-  #bindGroup;
-  #cache = /* @__PURE__ */ new Map();
-  #x = 1;
-  #y = 1;
-  #rowHeight = 0;
+  pages;
   #uploadBytes = 0;
   #uploadCalls = 0;
-  #generation = 0;
   get bindGroup() {
-    return this.#bindGroup;
+    return this.pages.bindGroup;
   }
   get generation() {
-    return this.#generation;
+    return this.pages.generation;
   }
   prepare(definitions) {
-    const all = /* @__PURE__ */ new Map();
-    const missing = /* @__PURE__ */ 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,
+      { texture, origin },
+      definition.pixels,
       { bytesPerRow: width * bytesPerPixel, rowsPerImage: height },
       [width, height]
     );
-    this.#uploadBytes += pixels.byteLength;
+    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 };
@@ -1120,7 +1440,7 @@ 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(),
@@ -1137,6 +1457,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(",")
@@ -1351,21 +1673,45 @@ function pushBlockCursorBackground(vertices, view, renderRows, scale, viewportWi
     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) {
+    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) foreground = [foreground[0], foreground[1], foreground[2], foreground[3] * 0.55];
+  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
@@ -1668,7 +2014,10 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
   #monoAtlas;
   #colorAtlas;
   #fallbackAtlas;
+  #adaptations = /* @__PURE__ */ new Map();
   #performanceMeasurementEnabled = false;
+  #submission = { queueSubmits: 0, surfaceIds: [] };
+  #scrollScratch;
   static async create(onLost) {
     if (!navigator.gpu) throw new Error("WebGPU is unavailable");
     const adapter = await navigator.gpu.requestAdapter();
@@ -1708,7 +2057,11 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       cursorBuffer: new DynamicVertexBuffer(this.device, `cursor ${id}`),
       geometryCache: /* @__PURE__ */ new Map(),
       geometryCandidates: /* @__PURE__ */ new Map(),
-      sceneValid: false
+      sceneValid: false,
+      adaptation: null,
+      sceneHadSelection: false,
+      sceneHadOverhang: false,
+      sceneCursorRow: null
     };
     this.#surfaces.set(id, surface2);
     this.#configure(surface2);
@@ -1727,6 +2080,10 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
     surface2.cursorBuffer.destroy();
     clearGeometryCache(surface2);
     this.#surfaces.delete(id);
+    if (this.#surfaces.size === 0) {
+      this.#scrollScratch?.destroy();
+      this.#scrollScratch = void 0;
+    }
   }
   resize(id, size) {
     const surface2 = this.#surfaces.get(id);
@@ -1755,7 +2112,7 @@ var WebGpuTerminalRenderer = 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) {
@@ -1865,32 +2222,186 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       drawCalls: effectPassCount
     };
   }
+  /**
+   * 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(surface2, view) {
+    const base = darkPaintedBase(view, surface2.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) === (surface2.adaptation?.key ?? null)) return;
+    surface2.adaptation = next;
+    surface2.sceneValid = false;
+    clearGeometryCache(surface2);
+  }
+  submission() {
+    return this.#submission;
+  }
+  #releaseAtlasBatch() {
+    this.#monoAtlas.pages.releaseBatch();
+    this.#colorAtlas.pages.releaseBatch();
+    this.#fallbackAtlas.pages.releaseBatch();
+  }
+  #prepareAtlases(view, renderRows, dpr) {
+    const mono = /* @__PURE__ */ new Map();
+    const color = /* @__PURE__ */ 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
+      );
+    }
+    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) {
-    const surface2 = this.#surfaces.get(id);
-    if (!surface2) 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;
+    return this.renderBatch([{ id, view }])[0];
+  }
+  #canCopyScroll(surface2, view) {
+    const shift = view.damage?.scrollRows ?? 0;
+    const top = ORIGIN_Y * surface2.dpr;
+    const line = LINE_HEIGHT * surface2.dpr;
+    const count = view.rows.length;
+    return surface2.sceneValid && !view.damage?.full && Number.isSafeInteger(shift) && shift !== 0 && Math.abs(shift) < count && !view.selection && !surface2.sceneHadSelection && Number.isInteger(top) && Number.isInteger(line) && top + count * line <= surface2.canvas.height;
+  }
+  #prepareScrollScratch(entries) {
+    let width = 0, height = 0;
+    for (const { id, view } of entries) {
+      const surface2 = this.#surfaces.get(id);
+      if (!surface2 || !this.#canCopyScroll(surface2, view)) continue;
+      width = Math.max(width, surface2.canvas.width);
+      height = Math.max(height, view.rows.length * LINE_HEIGHT * surface2.dpr);
+    }
+    if (width === 0) return false;
+    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(surface2, view, encoder) {
+    const dy = view.damage.scrollRows * LINE_HEIGHT * surface2.dpr;
+    const top = ORIGIN_Y * surface2.dpr;
+    const size = [surface2.canvas.width, view.rows.length * LINE_HEIGHT * surface2.dpr - Math.abs(dy)];
+    encoder.copyTextureToTexture(
+      { texture: surface2.sceneTexture, origin: [0, top + Math.max(0, dy)] },
+      { texture: this.#scrollScratch },
+      size
+    );
+    encoder.copyTextureToTexture(
+      { texture: this.#scrollScratch },
+      { texture: surface2.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(() => void 0);
-    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 surface2 = this.#surfaces.get(id);
+      if (surface2) this.#prepareAdaptation(surface2, view);
+      const overhang = view.damage?.geometryChanged === false && surface2?.sceneValid ? surface2.sceneHadOverhang : view.nativeRows.some((row) => row.some((glyph) => glyph.y < 0 || glyph.y + glyph.height > LINE_HEIGHT));
+      if (view.damage && !view.damage.full && (view.damage.scrollRows || view.damage.rows.size > 0) && (overhang || surface2?.sceneHadOverhang)) {
+        view = { ...view, damage: { full: true, rows: /* @__PURE__ */ new Set(), geometryChanged: true } };
+      }
+      return { id, view, overhang };
+    });
+    const canStageScroll = this.#prepareScrollScratch(prepared);
+    let encoder;
+    let pendingIds = [];
     const byId = /* @__PURE__ */ 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 !== void 0);
+        if (first) first.queueSubmits += 1;
+      }
+      encoder = void 0;
+      pendingIds = [];
+      this.#releaseAtlasBatch();
+    };
+    try {
+      for (const { id, view: originalView, overhang } of prepared) {
+        const surface2 = this.#surfaces.get(id);
+        if (!surface2) continue;
+        let view = originalView;
+        const copyScroll = canStageScroll && this.#canCopyScroll(surface2, view);
+        if (view.damage?.scrollRows) {
+          if (copyScroll) {
+            const rows2 = new Set(view.damage.rows);
+            const shift = view.damage.scrollRows;
+            rows2.add(0);
+            rows2.add(view.rows.length - 1);
+            for (let row = 0; row < view.rows.length; row++) {
+              if (row + shift < 0 || row + shift >= view.rows.length) rows2.add(row);
+            }
+            if (surface2.sceneCursorRow !== null) rows2.add(surface2.sceneCursorRow - shift);
+            if (effectiveCursorStyle(view) !== null) rows2.add(view.cursor.y);
+            view = { ...view, damage: { ...view.damage, rows: rows2, geometryChanged: true } };
+          } else {
+            view = { ...view, damage: { full: true, rows: /* @__PURE__ */ new Set(), geometryChanged: true } };
+          }
+        }
+        const count = Math.max(view.rows.length, view.nativeRows.length, view.nativeStyleRows.length);
+        const { rows } = rowsForDamage(count, view.damage, surface2.sceneValid);
+        try {
+          try {
+            this.#prepareAtlases(view, rows, surface2.dpr);
+          } catch (error) {
+            if (!(error instanceof AtlasBatchFullError) || pendingIds.length === 0) throw error;
+            submit();
+            this.#prepareAtlases(view, rows, surface2.dpr);
+          }
+        } catch (error) {
+          if (!(error instanceof AtlasCapacityError)) throw error;
+          console.error(`[terminal-renderer] cannot render ${id}`, error);
+          continue;
+        }
+        encoder ??= this.device.createCommandEncoder({ label: "terminal frame batch" });
+        if (copyScroll) this.#copyScroll(surface2, view, encoder);
+        byId.set(
+          id,
+          view.damage?.geometryChanged === false ? this.#encodeCachedRender(id, view, encoder) : this.#encodeRender(id, view, encoder)
+        );
+        surface2.sceneHadSelection = view.selection !== null;
+        surface2.sceneHadOverhang = overhang;
+        surface2.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 !== void 0);
-    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 = [];
@@ -1899,24 +2410,10 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
     const styleFor = (styleId) => {
       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 = /* @__PURE__ */ new Map();
-    const colorDefinitions = /* @__PURE__ */ 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;
@@ -1974,12 +2471,6 @@ var WebGpuTerminalRenderer = 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] ?? "");
@@ -2010,20 +2501,22 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
           if (blockElement) {
             let backdrop = style.background ?? view.theme.background;
             if (isSelected) backdrop = view.theme.selection;
+            const blockForeground = foreground === style.foreground ? style.fill : foreground;
             if (pushBlockElement(
               rectangleVertices,
               blockElement,
               instance.cellStart,
               row,
               scale,
-              over(foreground, backdrop),
+              over(blockForeground, backdrop),
               viewportWidth,
               viewportHeight
             ))
               continue;
           }
-          const atlas = definition.format === GlyphFormat.Alpha8 ? this.#monoAtlas : this.#colorAtlas;
-          const vertices = definition.format === GlyphFormat.Alpha8 ? glyphVertices : colorGlyphVertices;
+          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,
@@ -2031,7 +2524,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
             instance.width * scale,
             instance.height * scale,
             atlas.glyph(definition),
-            foreground,
+            mono && foreground === style.foreground ? style.text : foreground,
             viewportWidth,
             viewportHeight
           );
@@ -2076,7 +2569,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
             Math.round(rowTop + 16 * scale),
             width,
             stroke,
-            style.foreground,
+            style.text,
             viewportWidth,
             viewportHeight
           );
@@ -2088,7 +2581,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
             Math.round(rowTop + 9 * scale),
             width,
             stroke,
-            style.foreground,
+            style.text,
             viewportWidth,
             viewportHeight
           );
@@ -2133,24 +2626,10 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
     const styleFor = (styleId) => {
       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, surface2.adaptation);
       resolvedStyles.set(styleId, resolved);
       return resolved;
     };
-    const monoDefinitions = /* @__PURE__ */ new Map();
-    const colorDefinitions = /* @__PURE__ */ 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;
@@ -2209,12 +2688,6 @@ var WebGpuTerminalRenderer = 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] ?? "");
@@ -2246,7 +2719,8 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
           if (blockElement) {
             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,
@@ -2259,8 +2733,9 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
             ))
               continue;
           }
-          const atlas = definition.format === GlyphFormat.Alpha8 ? this.#monoAtlas : this.#colorAtlas;
-          const vertices = definition.format === GlyphFormat.Alpha8 ? glyphVertices : colorGlyphVertices;
+          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,
@@ -2268,7 +2743,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
             instance.width * scale,
             instance.height * scale,
             atlas.glyph(definition),
-            foreground,
+            mono && foreground === style.foreground ? style.text : foreground,
             viewportWidth,
             viewportHeight
           );
@@ -2313,7 +2788,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
             Math.round(rowTop + 16 * scale),
             width,
             stroke,
-            style.foreground,
+            style.text,
             viewportWidth,
             viewportHeight
           );
@@ -2325,7 +2800,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
             Math.round(rowTop + 9 * scale),
             width,
             stroke,
-            style.foreground,
+            style.text,
             viewportWidth,
             viewportHeight
           );
@@ -2515,7 +2990,7 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
       this.#colorAtlas.generation,
       this.#fallbackAtlas.generation
     ];
-    let key = geometryCacheKey(view, damage.rows, hasNativeRows, generations());
+    let key = geometryCacheKey(view, damage.rows, hasNativeRows, generations(), surface2.adaptation?.key ?? "-");
     const cached = surface2.geometryCache.get(key);
     const cacheHit = cached !== void 0;
     if (cached) {
@@ -2533,9 +3008,10 @@ var WebGpuTerminalRenderer = class _WebGpuTerminalRenderer {
         hasNativeRows,
         scale,
         viewportWidth,
-        viewportHeight
+        viewportHeight,
+        surface2.adaptation
       );
-      key = geometryCacheKey(view, damage.rows, hasNativeRows, generations());
+      key = geometryCacheKey(view, damage.rows, hasNativeRows, generations(), surface2.adaptation?.key ?? "-");
       const promote = admitted && key === candidateKey;
       geometry = {
         rectangleBuffer: promote ? createCachedVertexBuffer(this.device, `cached rectangles ${id}`, cpu.rectangleData) : surface2.rectangleBuffer.write(cpu.rectangleData),
@@ -2693,13 +3169,72 @@ function cursorActivityChangesPixels(cursor, focused, cursorBlinkVisible) {
   return focused && cursor.visible && cursor.blinking && !cursorBlinkVisible;
 }
 
+// src/row-damage.ts
+function sameRow(before, from, after, to) {
+  if (from < 0 || from >= before.rows.length || before.rows[from] !== after.rows[to]) return false;
+  const a = before.nativeRows[from] ?? [], b = after.nativeRows[to] ?? [];
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const x = a[i], y = b[i];
+    if (x.glyphId !== y.glyphId || x.styleId !== y.styleId || x.x !== y.x || x.y !== y.y || x.width !== y.width || x.height !== y.height || x.cellStart !== y.cellStart || x.cellSpan !== y.cellSpan)
+      return false;
+  }
+  const as = before.nativeStyleRows[from] ?? [], bs = after.nativeStyleRows[to] ?? [];
+  if (as.length !== bs.length) return false;
+  return as.every(
+    (x, i) => x.styleId === bs[i].styleId && x.cellStart === bs[i].cellStart && x.cellSpan === bs[i].cellSpan
+  );
+}
+function rowDamage(before, after) {
+  const positions = /* @__PURE__ */ new Map();
+  for (let row = 0; row < before.rows.length; row++) {
+    const text = before.rows[row];
+    positions.set(text, positions.has(text) ? -1 : row);
+  }
+  const votes = /* @__PURE__ */ new Map();
+  for (let row = 0; row < after.rows.length; row++) {
+    const from = positions.get(after.rows[row]);
+    if (from !== void 0 && from >= 0) {
+      const delta = from - row;
+      votes.set(delta, (votes.get(delta) ?? 0) + 1);
+    }
+  }
+  let scrollRows = 0, best = votes.get(0) ?? 0;
+  for (const [delta, count] of votes)
+    if (count > best) {
+      best = count;
+      scrollRows = delta;
+    }
+  const changed = (delta) => after.rows.flatMap((_, row) => sameRow(before, row + delta, after, row) ? [] : [row]);
+  if (scrollRows !== 0) {
+    const rows = changed(scrollRows);
+    if (after.rows.length - rows.length >= Math.ceil(after.rows.length / 2)) return { scrollRows, rows };
+  }
+  return { scrollRows: 0, rows: changed(0) };
+}
+function shiftDamage(rows, shift, rowCount) {
+  const moved = [...rows].map((row) => row - shift).filter((row) => row >= 0 && row < rowCount);
+  rows.clear();
+  for (const row of moved) rows.add(row);
+}
+function selectionDamageRows(before, after, count) {
+  const rows = /* @__PURE__ */ new Set();
+  for (const selection of [before, after]) {
+    if (!selection) continue;
+    const start = Math.max(0, Math.min(selection.anchor.row, selection.focus.row));
+    const end = Math.min(count - 1, Math.max(selection.anchor.row, selection.focus.row));
+    for (let row = start; row <= end; row++) rows.add(row);
+  }
+  return [...rows];
+}
+
 // src/catalog-budget.ts
 function catalogAdmission(resetsCatalog, alreadyUsingFallback, fits) {
   if (alreadyUsingFallback && !resetsCatalog) return "text-fallback";
   if (fits) return "install";
   return resetsCatalog ? "text-fallback" : "request-full";
 }
-function glyphCatalogFits(sessionDefinitions, sessionPixelBytes, sharedDefinitions, sharedPixelBytes, definitions, budget) {
+function glyphCatalogFits(sessionDefinitions, sessionPixelBytes, sharedDefinitions, sharedPixelBytes, definitions, budget, sharedKey = (id) => id) {
   if (definitions.length === 0) return true;
   let nextDefinitionCount = sessionDefinitions.size;
   let nextSharedDefinitionCount = sharedDefinitions.size;
@@ -2709,7 +3244,7 @@ function glyphCatalogFits(sessionDefinitions, sessionPixelBytes, sharedDefinitio
   for (const definition of definitions) {
     if (sessionDefinitions.has(definition.id) || pending.has(definition.id)) continue;
     pending.add(definition.id);
-    const shared = sharedDefinitions.get(definition.id);
+    const shared = sharedDefinitions.get(sharedKey(definition.id));
     const pixelBytes = shared?.definition.pixels.byteLength ?? definition.pixels.byteLength;
     nextDefinitionCount += 1;
     nextSessionPixelBytes += pixelBytes;
@@ -3084,10 +3619,6 @@ var socketClosing = 2;
 function exactStamp(left, right) {
   return left !== void 0 && compareRoutedSceneContent(left, right) === 0;
 }
-function copyArrayBuffer(bytes) {
-  const copy = bytes.slice();
-  return copy.buffer;
-}
 function capacitiesFitWithin(accepted, advertised) {
   return accepted.connectionCreditBytes <= advertised.connectionCreditBytes && accepted.perActivationCreditBytes <= advertised.perActivationCreditBytes && accepted.stagingBytesPerSession <= advertised.stagingBytesPerSession && accepted.stagingBytesTotal <= advertised.stagingBytesTotal && accepted.maxConcurrentActivations <= advertised.maxConcurrentActivations && accepted.maxConcurrentSeeds <= advertised.maxConcurrentSeeds;
 }
@@ -3395,13 +3926,13 @@ var RoutedFramesTransport = class {
     }
   }
   #incremental(connection, activation, header, payload, chargedBytes) {
-    if (payload.byteLength > connection.accepted.protocolLimits.maxPresentationChunkBytes || !header.resultContent || header.baseContent === void 0 || header.baseContent !== null && !exactStamp(activation.appliedContent, header.baseContent)) {
+    if (payload.byteLength > connection.accepted.protocolLimits.maxUrgentPresentationUnitBytes || !header.resultContent || header.baseContent === void 0 || header.baseContent !== null && !exactStamp(activation.appliedContent, header.baseContent)) {
       this.#protocolFailure(connection, header.activationId, chargedBytes, "incremental base mismatch");
       return;
     }
     try {
       this.#emit({ type: "frames-state", activationId: header.activationId, state: "applying" });
-      this.#applyFrame(copyArrayBuffer(payload), activation.identity);
+      this.#applyFrame(payload, activation.identity, void 0, header.resultContent.sceneEpoch.cellBootId);
       activation.appliedContent = header.resultContent;
       this.#returnCredit(connection, header.activationId, chargedBytes);
       this.#sceneApplied(connection, activation);
@@ -3481,7 +4012,12 @@ var RoutedFramesTransport = class {
     }
     try {
       this.#emit({ type: "frames-state", activationId: header.activationId, state: "applying" });
-      this.#applyFrame(staging.bytes.buffer, activation.identity, staging.targetLayout);
+      this.#applyFrame(
+        staging.bytes.buffer,
+        activation.identity,
+        staging.targetLayout,
+        staging.resultContent.sceneEpoch.cellBootId
+      );
       activation.appliedContent = staging.resultContent;
       this.#releaseTransfer(activation);
       this.#sceneApplied(connection, activation);
@@ -3686,7 +4222,10 @@ var MAX_PERFORMANCE_SAMPLES = 1e5;
 var FRAME_CREDIT_BATCH_BYTES = 4 * 1024 * 1024;
 var FRAME_CREDIT_MAX_DELAY_MS = 8;
 var snapshots = /* @__PURE__ */ new Map();
+var drawnSessions = /* @__PURE__ */ new Set();
+var routedMouseTracking = /* @__PURE__ */ new Map();
 var sharedGlyphDefinitions = /* @__PURE__ */ new Map();
+var nextRendererGlyphId = 1;
 var sharedGlyphPixelBytes = 0;
 var retainedStyleDefinitions = 0;
 var surfaces = /* @__PURE__ */ new Map();
@@ -3882,6 +4421,7 @@ function emptySessionSnapshot() {
     nativeRows: [],
     nativeStyleRows: [],
     glyphDefinitions: /* @__PURE__ */ new Map(),
+    glyphNamespace: "",
     glyphPixelBytes: 0,
     styleDefinitions: /* @__PURE__ */ new Map(),
     rowRevisions: [],
@@ -3905,29 +4445,34 @@ function snapshot(sessionHandle) {
 }
 function clearSessionCatalog(session) {
   for (const glyphId of session.glyphDefinitions.keys()) {
-    const shared = sharedGlyphDefinitions.get(glyphId);
+    const key = `${session.glyphNamespace}:${glyphId}`;
+    const shared = sharedGlyphDefinitions.get(key);
     if (!shared) continue;
     shared.references -= 1;
     if (shared.references <= 0) {
-      sharedGlyphDefinitions.delete(glyphId);
+      sharedGlyphDefinitions.delete(key);
       sharedGlyphPixelBytes -= shared.definition.pixels.byteLength;
     }
   }
-  session.glyphDefinitions.clear();
+  session.glyphDefinitions = /* @__PURE__ */ new Map();
   session.glyphPixelBytes = 0;
   retainedStyleDefinitions -= session.styleDefinitions.size;
   session.styleDefinitions.clear();
 }
-function installGlyphDefinitions(session, definitions) {
+function installGlyphDefinitions(session, definitions, previousDefinitions) {
   for (const decoded of definitions) {
     if (session.glyphDefinitions.has(decoded.id)) continue;
-    let shared = sharedGlyphDefinitions.get(decoded.id);
+    const key = `${session.glyphNamespace}:${decoded.id}`;
+    let shared = sharedGlyphDefinitions.get(key);
     const pixelBytes = shared?.definition.pixels.byteLength ?? decoded.pixels.byteLength;
     if (shared) {
       shared.references += 1;
     } else {
-      shared = { definition: decoded, references: 1 };
-      sharedGlyphDefinitions.set(decoded.id, shared);
+      shared = {
+        definition: { ...decoded, id: previousDefinitions?.get(decoded.id)?.id ?? nextRendererGlyphId++ },
+        references: 1
+      };
+      sharedGlyphDefinitions.set(key, shared);
       sharedGlyphPixelBytes += decoded.pixels.byteLength;
     }
     session.glyphDefinitions.set(decoded.id, shared.definition);
@@ -3945,6 +4490,10 @@ function dropSessionSnapshot(sessionHandle) {
   const session = snapshots.get(sessionHandle);
   if (session) clearSessionCatalog(session);
   snapshots.delete(sessionHandle);
+  drawnSessions.delete(sessionHandle);
+}
+function rowShowsContent(row) {
+  return row.glyphs.length > 0 || /\S/.test(row.text);
 }
 function defaults(sessionHandle) {
   let value = presentationDefaults.get(sessionHandle);
@@ -4069,6 +4618,7 @@ async function recoverDevice(info) {
   try {
     const next = await rendererPromise;
     renderer = next;
+    next.setPerformanceMeasurementEnabled?.(performanceMeasurement !== void 0);
     recoveryAttempts = 0;
     recovering = false;
     for (const [id, mount2] of mounts) {
@@ -4119,7 +4669,10 @@ function scheduleShaderAnimation() {
 }
 async function flush() {
   const backend = await ensureRenderer();
-  const ids = [...dirty].filter((id) => !occluded.has(id));
+  const ids = [...dirty].filter((id) => {
+    const size = mounts.get(id)?.size;
+    return !occluded.has(id) && size !== void 0 && size.width > 0 && size.height > 0;
+  });
   if (performanceMeasurement && ids.length > 0) {
     performanceMeasurement.scheduling.flushes += 1;
     appendPerformanceSample(performanceMeasurement.scheduling.panesPerFlush, ids.length);
@@ -4139,14 +4692,23 @@ async function flush() {
       const active = performanceMeasurement;
       const beforeRender = active ? performance.now() : 0;
       const metrics = backend.renderBatch ? backend.renderBatch(entries) : entries.map(({ id, view }) => backend.render(id, view));
-      for (const metric of metrics) recordLifetimeRenderMetrics(metric ?? emptyRenderMetrics());
+      const submission = backend.submission?.();
+      if (submission) {
+        lifetimeRenderer.queueSubmits += submission.queueSubmits;
+        lifetimeRenderer.presents += submission.surfaceIds.length;
+      } else {
+        for (const metric of metrics) recordLifetimeRenderMetrics(metric ?? emptyRenderMetrics());
+      }
+      const submitted = submission ? new Set(submission.surfaceIds) : void 0;
       const renderedAt = active ? performance.now() : 0;
       for (const { id } of entries) {
+        if (submitted && !submitted.has(id)) continue;
         const damage = surfaces.get(id)?.damage;
         if (!damage) continue;
         damage.full = false;
         damage.rows.clear();
         damage.geometryChanged = false;
+        delete damage.scrollRows;
       }
       if (active && performanceMeasurement === active) {
         active.scheduling.renderCalls += entries.length;
@@ -4185,6 +4747,7 @@ function invalidateFull(id) {
   damage.full = true;
   damage.rows.clear();
   damage.geometryChanged = true;
+  delete damage.scrollRows;
   markDirty(id);
 }
 function invalidateRows(id, rows, geometryChanged = false) {
@@ -4206,15 +4769,35 @@ function invalidateRows(id, rows, geometryChanged = false) {
 function invalidateSessionFull(sessionHandle) {
   for (const surfaceId of surfaceIdsForSession(sessionHandle)) invalidateFull(surfaceId);
 }
+function invalidateScroll(id, shift, rows, rowCount) {
+  const value = surfaces.get(id);
+  if (!value) return;
+  const damage = value.damage;
+  if (!partialRenderingEnabled || damage.full || value.selection || Math.abs((damage.scrollRows ?? 0) + shift) >= rowCount) {
+    invalidateFull(id);
+    return;
+  }
+  shiftDamage(damage.rows, shift, rowCount);
+  damage.scrollRows = (damage.scrollRows ?? 0) + shift;
+  invalidateRows(id, rows, true);
+}
+function changeSelection(id, selection) {
+  const value = surfaces.get(id);
+  if (!value || value.selection === null && selection === null) return;
+  const rows = selectionDamageRows(value.selection, selection, snapshots.get(value.sessionHandle)?.rows.length ?? 0);
+  value.selection = selection;
+  if (value.damage.scrollRows) invalidateFull(id);
+  else invalidateRows(id, rows, true);
+}
 function invalidateSessionRows(sessionHandle, rows, geometryChanged = false) {
   const damagedRows = [...rows];
   for (const surfaceId of surfaceIdsForSession(sessionHandle)) invalidateRows(surfaceId, damagedRows, geometryChanged);
 }
-async function mount(surfaceId, sessionHandle, canvas) {
+async function mount(surfaceId, sessionHandle, canvas, size) {
   if (mounts.has(surfaceId)) renderer?.unmount(surfaceId);
   snapshot(sessionHandle);
   surface(surfaceId, sessionHandle);
-  const entry = { canvas, size: { width: 1, height: 1, dpr: 1 }, sessionHandle };
+  const entry = { canvas, size, sessionHandle };
   mounts.set(surfaceId, entry);
   const backend = await ensureRenderer();
   if (mounts.get(surfaceId) !== entry) return;
@@ -4223,7 +4806,7 @@ async function mount(surfaceId, sessionHandle, canvas) {
   invalidateFull(surfaceId);
   scheduleShaderAnimation();
 }
-function applyFrame(packet, expectedIdentity, expectedLayout) {
+function applyFrame(packet, expectedIdentity, expectedLayout, glyphNamespace) {
   const active = performanceMeasurement;
   const applyStarted = active ? performance.now() : 0;
   lifetimeFrames.received += 1;
@@ -4320,11 +4903,13 @@ function applyFrame(packet, expectedIdentity, expectedLayout) {
     throw new Error("routed transfer row section is not a full snapshot");
   }
   const glyphDefinitions = glyphSection ? decodeGlyphDefinitions(glyphSection) : NO_GLYPH_DEFINITIONS;
-  const styleDefinitions = styleSection ? decodeStyleDefinitions(styleSection) : NO_STYLE_DEFINITIONS;
+  const paletteSection = frame.sections.find((candidate) => candidate.kind === SectionKind.StylePalette);
+  const styleDefinitions = styleSection ? decodeStyleDefinitions(styleSection, paletteSection) : NO_STYLE_DEFINITIONS;
   const replacements = decodeRowReplacements(rowSection);
   for (const replacement of replacements) {
     if (replacement.row >= frame.rows) throw new RangeError("Row replacement exceeds viewport");
   }
+  const firstDrawn = !drawnSessions.has(id) && replacements.some(rowShowsContent);
   const linkSection = frame.sections.find((candidate) => candidate.kind === SectionKind.LinkTargets);
   const links = linkSection ? decodeLinkTargets(linkSection, frame.cols, frame.rows) : [];
   const nextCursor = decodeCursorState(cursorSection);
@@ -4345,13 +4930,21 @@ function applyFrame(packet, expectedIdentity, expectedLayout) {
     throw new Error("transfer scrollback layout does not match TRF1");
   }
   if (active) active.frames.glyphDefinitions += glyphDefinitions.length;
-  const resetsCatalog = replacingScene || changedSession || completingResync || catalogReset;
+  const namespace = glyphNamespace === void 0 ? `session:${id}:${frame.sessionEpoch}` : `cell:${glyphNamespace}`;
+  const resetsCatalog = replacingScene || changedSession || completingResync || catalogReset || previous.glyphNamespace !== namespace;
+  const styleChanged = styleDefinitions.some((definition) => {
+    const old = previous.styleDefinitions.get(definition.id);
+    return old !== void 0 && JSON.stringify(old) !== JSON.stringify(definition);
+  });
+  const canReuseRows = !resetsCatalog && !styleChanged && previous.cols === frame.cols && previous.rows.length === frame.rows && previous.layoutEpoch === frame.layoutEpoch;
   const wasCatalogFallback = previous.catalogFallback;
   if (resetsCatalog) {
+    const previousDefinitions = previous.glyphNamespace === namespace ? previous.glyphDefinitions : void 0;
     previous.rows = [];
     previous.nativeRows = [];
     previous.nativeStyleRows = [];
     clearSessionCatalog(previous);
+    previous.glyphNamespace = namespace;
     previous.rowRevisions = [];
     const catalogFits = glyphCatalogFits(
       previous.glyphDefinitions,
@@ -4359,7 +4952,8 @@ function applyFrame(packet, expectedIdentity, expectedLayout) {
       sharedGlyphDefinitions,
       sharedGlyphPixelBytes,
       glyphDefinitions,
-      GLYPH_CATALOG_BUDGET
+      GLYPH_CATALOG_BUDGET,
+      (glyphId) => `${namespace}:${glyphId}`
     ) && definitionCatalogFits(
       previous.styleDefinitions,
       styleDefinitions,
@@ -4370,7 +4964,7 @@ function applyFrame(packet, expectedIdentity, expectedLayout) {
     const admission = catalogAdmission(true, wasCatalogFallback, catalogFits);
     previous.catalogFallback = admission === "text-fallback";
     if (admission === "install") {
-      installGlyphDefinitions(previous, glyphDefinitions);
+      installGlyphDefinitions(previous, glyphDefinitions, previousDefinitions);
       installStyleDefinitions(previous, styleDefinitions);
     } else if (!wasCatalogFallback) {
       postToRenderer({
@@ -4386,7 +4980,8 @@ function applyFrame(packet, expectedIdentity, expectedLayout) {
       sharedGlyphDefinitions,
       sharedGlyphPixelBytes,
       glyphDefinitions,
-      GLYPH_CATALOG_BUDGET
+      GLYPH_CATALOG_BUDGET,
+      (glyphId) => `${namespace}:${glyphId}`
     ) && definitionCatalogFits(
       previous.styleDefinitions,
       styleDefinitions,
@@ -4426,7 +5021,7 @@ function applyFrame(packet, expectedIdentity, expectedLayout) {
   const nativeRows = fullRows ? Array.from({ length: frame.rows }, () => []) : previous.nativeRows.slice();
   const nativeStyleRows = fullRows ? Array.from({ length: frame.rows }, () => []) : previous.nativeStyleRows.slice();
   const rowRevisions = fullRows ? Array(frame.rows).fill(0n) : previous.rowRevisions.slice();
-  const damagedRows = [];
+  let damagedRows = [];
   if (active) active.frames.rowsDecoded += replacements.length;
   for (const replacement of replacements) {
     if (replacement.revision < (rowRevisions[replacement.row] ?? 0n)) continue;
@@ -4436,12 +5031,24 @@ function applyFrame(packet, expectedIdentity, expectedLayout) {
     rowRevisions[replacement.row] = replacement.revision;
     damagedRows.push(replacement.row);
   }
+  let scrollRows = 0;
+  if (fullRows && canReuseRows) {
+    const damage = rowDamage(previous, { rows, nativeRows, nativeStyleRows });
+    scrollRows = damage.scrollRows;
+    damagedRows = damage.rows;
+    const changed = new Set(damagedRows);
+    for (let row = 0; row < rows.length; row++) {
+      if (changed.has(row)) continue;
+      nativeRows[row] = previous.nativeRows[row + scrollRows];
+      nativeStyleRows[row] = previous.nativeStyleRows[row + scrollRows];
+    }
+  }
   previous.cols = frame.cols;
   previous.rows = rows;
   previous.nativeRows = nativeRows;
   previous.nativeStyleRows = nativeStyleRows;
   previous.rowRevisions = rowRevisions;
-  const geometryChanged = damagedRows.length > 0;
+  const geometryChanged = damagedRows.length > 0 || scrollRows !== 0;
   const previousCursor = previous.cursor;
   const cursorChanged = nextCursor.x !== previousCursor.x || nextCursor.y !== previousCursor.y || nextCursor.visible !== previousCursor.visible || nextCursor.style !== previousCursor.style || nextCursor.blinking !== previousCursor.blinking;
   previous.cursor = nextCursor;
@@ -4461,12 +5068,14 @@ function applyFrame(packet, expectedIdentity, expectedLayout) {
   if (clipboardText !== void 0) postToRenderer({ type: "clipboard-write", text: clipboardText });
   if (scrollbarChanged && scrollbar) postToRenderer({ type: "scrollbar-state", sessionHandle: id, scrollbar });
   if (completingResync) postToRenderer({ type: "frame-resync-complete", sessionHandle: id });
-  const requiresFullRedraw = fullRows || changedSession || completingResync;
-  if (!requiresFullRedraw && cursorChanged) damagedRows.push(previousCursor.y, nextCursor.y);
+  const requiresFullRedraw = !canReuseRows;
+  if (!requiresFullRedraw && (cursorChanged || scrollRows !== 0))
+    damagedRows.push(previousCursor.y - scrollRows, nextCursor.y);
   const hasRowDamage = damagedRows.length > 0;
   for (const surfaceId of surfaceIdsForSession(id)) {
     if (cursorChanged) scheduleCursorBlink(surfaceId, true);
     if (requiresFullRedraw) invalidateFull(surfaceId);
+    else if (scrollRows !== 0) invalidateScroll(surfaceId, scrollRows, damagedRows, rows.length);
     else if (hasRowDamage) invalidateRows(surfaceId, damagedRows, geometryChanged);
   }
   postToRenderer({
@@ -4479,6 +5088,17 @@ function applyFrame(packet, expectedIdentity, expectedLayout) {
     // recovered screen apart from a partial update of the stale one.
     fullSnapshot: fullFrame
   });
+  if (expectedIdentity) {
+    const mouseTracking = (frame.flags & FrameFlag.MouseTracking) !== 0;
+    if (routedMouseTracking.get(id) !== mouseTracking) {
+      routedMouseTracking.set(id, mouseTracking);
+      postToRenderer({ type: "terminal-modes", sessionHandle: id, mouseTracking });
+    }
+  }
+  if (firstDrawn) {
+    drawnSessions.add(id);
+    postToRenderer({ type: "session-drawn", sessionHandle: id });
+  }
   lifetimeFrames.applies += 1;
   counters.applies += 1;
   if (active) appendPerformanceSample(active.samples.frameApplyMs, performance.now() - applyStarted);
@@ -4490,8 +5110,8 @@ function applyFrame(packet, expectedIdentity, expectedLayout) {
   };
 }
 var routedFrames = new RoutedFramesTransport({
-  applyFrame: (packet, identity, expectedLayout) => {
-    const applied = applyFrame(packet, identity, expectedLayout);
+  applyFrame: (packet, identity, expectedLayout, glyphNamespace) => {
+    const applied = applyFrame(packet, identity, expectedLayout, glyphNamespace);
     if (!applied) throw new Error("routed TRF1 frame was not applied");
     return applied;
   },
@@ -4505,7 +5125,7 @@ self.onmessage = (event) => {
   const message = event.data;
   try {
     if (message.type === "mount") {
-      void mount(message.surfaceId, message.sessionHandle, message.canvas).catch((error) => {
+      void mount(message.surfaceId, message.sessionHandle, message.canvas, message.size).catch((error) => {
         console.error("[terminal-renderer] mount failed", error);
       });
     } else if (message.type === "renderer-config") {
@@ -4588,13 +5208,12 @@ self.onmessage = (event) => {
       scheduleShaderAnimation();
     } else if (message.type === "selection") {
       if (message.surfaceId) {
-        surface(message.surfaceId, message.sessionHandle).selection = message.selection;
-        invalidateFull(message.surfaceId);
+        surface(message.surfaceId, message.sessionHandle);
+        changeSelection(message.surfaceId, message.selection);
       } else {
         defaults(message.sessionHandle).selection = message.selection;
         for (const surfaceId of surfaceIdsForSession(message.sessionHandle)) {
-          surfaces.get(surfaceId).selection = message.selection;
-          invalidateFull(surfaceId);
+          changeSelection(surfaceId, message.selection);
         }
       }
     } else if (message.type === "visibility") {
@@ -4660,6 +5279,7 @@ self.onmessage = (event) => {
     } else if (message.type === "performance-counters") {
       postToRenderer({ type: "performance-counters", requestId: message.requestId, snapshot: counterSnapshot() });
     } else if (message.type === "routed-frames-attach") {
+      routedMouseTracking.delete(message.request.sessionHandle);
       routedFrames.attach(message.request);
     } else if (message.type === "routed-frames-detach") {
       routedFrames.detach(message.activationId);