@react-x11/components 0.9.0 → 0.11.0

package/src/code-editor/node.ts

@@ -58,6 +58,7 @@ import {
 } from 'react-x11/keysyms';
 
 import { startInterval, stopInterval } from '../code-language/timers.js';
+import { spliceAll } from '../internal/splice.js';
 import type { TimerId } from '../code-language/timers.js';
 import {
   clampPos,
@@ -125,6 +126,10 @@ export interface CodeEditorHandle {
   readonly language: Language | null;
   readonly canUndo: boolean;
   readonly canRedo: boolean;
+  /** The `diagnostics` prop as it stands in the text now: moved with every
+   * edit since the prop was set, the way the code they point at moved, and
+   * without the ones whose code an edit took away. */
+  readonly diagnostics: readonly Diagnostic[];
   selectedText(): string;
   replaceRange(from: Position, to: Position, text: string): void;
   insertText(text: string): void;
@@ -235,8 +240,19 @@ interface ClipboardLike {
   read(options?: { selection?: string }): Promise<unknown>;
 }
 
-interface HistoryEntry {
-  value: string;
+/**
+ * One undoable change: the lines `[from, from + before.length)` of the text
+ * before it became `after`, the selection it found, which an undo restores,
+ * and the one it left, which a redo does. A change and not a copy of the
+ * text: a history of copies held two hundred of them, which for a 2.5 MB
+ * file is half a gigabyte, and put every undo through a full reset.
+ */
+interface HistoryStep {
+  from: number;
+  before: readonly string[];
+  after: readonly string[];
+  caretBefore: Position;
+  anchorBefore: Position;
   caret: Position;
   anchor: Position;
 }
@@ -260,6 +276,53 @@ const SEVERITY_COLORS: Record<string, string> = {
   hint: '#8b8f98',
 };
 
+/** Two token style maps that colour alike — the same object, or an
+ *  inline one written again with the same entries, which a render hands
+ *  over every time and which laid every line out again. */
+function sameTokenStyles(
+  a: TokenStyles | undefined,
+  b: TokenStyles | undefined,
+): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const ka = Object.keys(a);
+  if (ka.length !== Object.keys(b).length) return false;
+  for (const k of ka) {
+    const x = (a as Record<string, Record<string, unknown> | undefined>)[k];
+    const y = (b as Record<string, Record<string, unknown> | undefined>)[k];
+    if (x === y) continue;
+    if (!x || !y) return false;
+    const fx = Object.keys(x);
+    if (fx.length !== Object.keys(y).length) return false;
+    for (const f of fx) if (x[f] !== y[f]) return false;
+  }
+  return true;
+}
+
+/** Two diagnostics lists that say the same thing, in the same order. */
+function sameDiagnostics(
+  a: readonly Diagnostic[] | undefined,
+  b: readonly Diagnostic[] | undefined,
+): boolean {
+  if (a === b) return true;
+  if ((a?.length ?? 0) !== (b?.length ?? 0)) return false;
+  if (!a || !b) return true; // both empty
+  for (let i = 0; i < a.length; i++) {
+    const x = a[i];
+    const y = b[i];
+    if (
+      !posEqual(x.from, y.from) ||
+      !posEqual(x.to, y.to) ||
+      x.severity !== y.severity ||
+      x.message !== y.message ||
+      x.source !== y.source
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
+
 function cpToUtf16(text: string, cp: number): number {
   let i = 0;
   for (let n = 0; n < cp && i < text.length; n++) {
@@ -311,7 +374,28 @@ export interface EditorMouseEvent {
   preventDefault?(): void;
 }
 
+type Rect = { x: number; y: number; width: number; height: number };
+
+/** What `_repaintSince` compares a change against: the rows, offsets,
+ *  gutter and thumbs the view had before it. */
+interface ViewBefore {
+  caretLine: number;
+  selection: [number, number] | null;
+  brackets: [number, number] | null;
+  scrollX: number;
+  scrollY: number;
+  gutter: number;
+  empty: boolean;
+  /** What the thumbs are sized by: `_maxScrollX()` and `_maxScrollY()`. */
+  maxX: number;
+  maxY: number;
+}
+
 interface LineCacheEntry {
+  /** The line it was built from — the same string until the line is
+   *  edited, so a lookup that finds it needs nothing else recomputed. */
+  raw: string;
+  tabSize: number;
   display: string;
   tokens: readonly Token[];
   styleKey: string;
@@ -319,11 +403,309 @@ interface LineCacheEntry {
   map: TabMap;
 }
 
+/** A line's tokens with no language. One array, so that a cached line
+ *  entry, which is checked against its tokens by identity, is found again —
+ *  a fresh `[]` per lookup made every paint of a plain-text editor lay out
+ *  every line in view. */
+const NO_TOKENS: readonly Token[] = Object.freeze([]);
+
+/** Line entries past which the ones farthest from the view are let go. An
+ *  entry holds a text layout, native memory on every backend, and a file
+ *  scrolled end to end had one for every line in it. */
+const LINE_CACHE_MAX = 2048;
+
+/** Display code units past which a line is laid out in pieces
+ *  (`ChunkedLayout`). */
+const CHUNKED_PAST = 2048;
+/** A piece is at least this long, and is cut here at the latest. */
+const CHUNK_MIN = 256;
+const CHUNK_MAX = 2048;
+
+/**
+ * A line too long to lay out whole, laid out in pieces placed end to end.
+ *
+ * A minified file or a log line of a hundred thousand characters is one
+ * text layout otherwise, and everything the editor asks of a layout is
+ * linear in its length or worse: putting the caret at the end of a
+ * 100,000-character line took 4.3 s in CoreText's caret lookup, every
+ * keystroke shaped the whole line again, and on X11 a line past 32,767
+ * device pixels threw out of the paint. A piece answers in a layout of its own size, only the
+ * pieces a keystroke changed are shaped again (`_chunkLayouts`, keyed by
+ * what a piece holds — which is why the cuts are made by content,
+ * `chunkBreaks`), and only the pieces in view are drawn (`drawSpan`).
+ *
+ * What it gives up is shaping across the seams: a kerning pair or a
+ * ligature that straddles one is set as two. Code is set in a monospace
+ * face, and a seam is one place in a few hundred characters.
+ */
+/** A layout's first baseline, from its top — where its text sits, whatever
+ *  fallback face in it is taller than the base. Both engines give their
+ *  lines one (ntk's `lines[].baseline`, the CoreText bridge's too); null
+ *  for one that does not. */
+function baselineOf(layout: LayoutLike): number | null {
+  const lines = (layout as { lines?: ReadonlyArray<{ baseline?: unknown }> })
+    .lines;
+  const b = lines?.[0]?.baseline;
+  return typeof b === 'number' && Number.isFinite(b) ? b : null;
+}
+
+/** One piece of a `ChunkedLayout`: where it starts in the line's display
+ *  text, in code points and in UTF-16 units, where it starts across, its
+ *  text, its layout, and the runs its spans styled it in — length, colour,
+ *  weight and style, four entries a run — which is what a rebuild compares
+ *  to keep it (`_chunkedLayout`).
+ *
+ *  `layout` is null until something asks about the piece or one past it,
+ *  when it is made from `spans`. `advance` is how far the next piece
+ *  starts after this one: a guess until then, and after it the caret's
+ *  place at the piece's end (`advanceOf`). */
+interface Chunk {
+  cp: number;
+  u16: number;
+  x: number;
+  text: string;
+  layout: LayoutLike | null;
+  spans: Array<Record<string, unknown>> | null;
+  advance: number;
+  runs: readonly unknown[];
+}
+
+/**
+ * How far a laid-out piece takes the line across: where the caret stands at
+ * its end. Not its layout's width, which leaves out the white space a piece
+ * ends on, as a layout's width does. A piece cut after a space set the next
+ * one a column to its left, so the space vanished from the screen and every
+ * caret after it was a column out: seven columns by the end of a line of
+ * 78,000 characters, from the eight pieces that ended on one. The larger of
+ * the two, since the caret after a right-to-left piece is at its left.
+ */
+function advanceOf(layout: LayoutLike, text: string): number {
+  const end = layout.caretPosition(utf16ToCp(text, text.length)).x;
+  return Math.max(layout.width, end);
+}
+
+class ChunkedLayout implements LayoutLike {
+  /**
+   * The pieces before this one are laid out, and every piece up to it sits
+   * where it is drawn. Past it, a piece sits where the guesses before it
+   * put it.
+   *
+   * Laying out a line of a million characters shaped every piece of it
+   * before the first paint: 1.4 s to open a minified file, of which the
+   * view needed one piece. So a piece is laid out when anything asks about
+   * it or a piece after it: a draw, a caret, a click. Everything left of
+   * what is asked about is laid out too, so whatever is drawn is where one
+   * layout of the whole line would put it. Only the width of the part
+   * nobody has looked at is a guess, and the editor's scroll extent follows
+   * it as it firms up (`grew`).
+   */
+  private _laid = 0;
+
+  constructor(
+    /** The pieces, in order, and never empty. */
+    readonly chunks: readonly Chunk[],
+    /** A piece's layout, from its spans. */
+    private readonly _layOut: (
+      spans: Array<Record<string, unknown>>,
+    ) => LayoutLike,
+    /** Told the line's width when laying out more of it changed it. */
+    private readonly _grew: (width: number) => void = () => {},
+  ) {
+    while (this._laid < chunks.length && chunks[this._laid].layout) {
+      this._laid += 1;
+    }
+    // the first piece at once: the line's height, and its baseline
+    this._layOutThrough(0);
+  }
+
+  get width(): number {
+    // the last piece's ink, as one layout of the whole line measures it
+    const last = this.chunks[this.chunks.length - 1];
+    return last.x + (last.layout?.width ?? last.advance);
+  }
+
+  get height(): number {
+    let height = 0;
+    for (let k = 0; k < this._laid; k++) {
+      height = Math.max(height, this.chunks[k].layout!.height);
+    }
+    return height;
+  }
+
+  /** Lay out the pieces through `k`, and move every piece after them to
+   *  where the laid-out ones now end. */
+  private _layOutThrough(k: number): void {
+    const chunks = this.chunks;
+    const from = this._laid;
+    const through = Math.min(k, chunks.length - 1);
+    if (through < from) return;
+    const before = this.width;
+    for (let j = from; j <= through; j++) {
+      const piece = chunks[j];
+      if (!piece.layout) {
+        piece.layout = this._layOut(piece.spans!);
+        piece.spans = null;
+        piece.advance = advanceOf(piece.layout, piece.text);
+      }
+    }
+    this._laid = through + 1;
+    // the first piece that was not laid out sits where the ones before it
+    // end, and every piece after it where the one before it does
+    let x = chunks[from].x;
+    for (let j = from; j < chunks.length; j++) {
+      const piece = chunks[j];
+      piece.x = x;
+      x += piece.advance;
+    }
+    const width = this.width;
+    if (width !== before) this._grew(width);
+  }
+
+  /** The last piece whose `key` is at or before `at`, laid out. */
+  private _pieceAt(at: number, key: 'cp' | 'u16' | 'x') {
+    const chunks = this.chunks;
+    if (key === 'x') {
+      // a piece's place across is known only as far as the pieces are laid
+      // out: lay them out until the one `at` falls in is among them
+      while (this._laid < chunks.length && chunks[this._laid].x <= at) {
+        this._layOutThrough(this._laid);
+      }
+    }
+    let lo = 0;
+    let hi = chunks.length - 1;
+    while (lo < hi) {
+      const mid = (lo + hi + 1) >> 1;
+      if (chunks[mid][key] <= at) lo = mid;
+      else hi = mid - 1;
+    }
+    this._layOutThrough(lo);
+    return chunks[lo] as Chunk & { layout: LayoutLike };
+  }
+
+  caretPosition(cp: number): { x: number; y: number; height: number } {
+    const piece = this._pieceAt(cp, 'cp');
+    const at = piece.layout.caretPosition(cp - piece.cp);
+    return { x: piece.x + at.x, y: at.y, height: at.height };
+  }
+
+  indexAt(x: number, y: number): number {
+    const piece = this._pieceAt(x, 'x');
+    return piece.cp + piece.layout.indexAt(x - piece.x, y);
+  }
+
+  /** `caretPosition`'s x for a UTF-16 offset into the display text, with
+   *  the code point counted inside the one piece rather than the line. */
+  caretXAt(u16: number): number {
+    const piece = this._pieceAt(u16, 'u16');
+    const cp = utf16ToCp(piece.text, u16 - piece.u16);
+    return piece.x + piece.layout.caretPosition(cp).x;
+  }
+
+  /** `indexAt`, answered as a UTF-16 offset into the display text. */
+  indexAtUtf16(x: number, y: number): number {
+    const piece = this._pieceAt(x, 'x');
+    const cp = piece.layout.indexAt(x - piece.x, y);
+    return piece.u16 + cpToUtf16(piece.text, cp);
+  }
+
+  draw(ctx: unknown, x: number, y: number): void {
+    this.drawSpan(ctx, x, y, -Infinity, Infinity);
+  }
+
+  /**
+   * The pieces that reach into `[from, to)` across the line, each with its
+   * first baseline at `baseline` — a piece holding an emoji is laid out
+   * taller than the rest, and set by its top it sat on a baseline of its
+   * own. `y` places a piece whose engine gives no baseline. The pieces up to
+   * `to` are laid out on the way, so each is drawn where it belongs.
+   */
+  drawSpan(
+    ctx: unknown,
+    x: number,
+    y: number,
+    from: number,
+    to: number,
+    baseline: number | null = null,
+  ) {
+    const chunks = this.chunks;
+    for (let k = 0; k < chunks.length; k++) {
+      // where an unlaid piece sits is exact here: the ones before it are
+      // laid out by now
+      if (chunks[k].x >= to) break;
+      this._layOutThrough(k);
+      const piece = chunks[k] as Chunk & { layout: LayoutLike };
+      if (piece.x + piece.layout.width <= from) continue;
+      const b = baseline == null ? null : baselineOf(piece.layout);
+      piece.layout.draw(ctx, x + piece.x, b == null ? y : baseline! - b);
+    }
+  }
+}
+
+/** Where a long line is cut into pieces: after a delimiter that the few
+ *  characters before it pick out, between `CHUNK_MIN` and `CHUNK_MAX` apart.
+ *  Chosen by what the text says there rather than by how far the line has
+ *  come, so a character typed into a piece moves the cuts near it and none
+ *  of the rest — the pieces after it are the same text as before, and their
+ *  layouts are found again rather than shaped again. */
+function chunkBreaks(display: string, from = 0): number[] {
+  const breaks = [from];
+  let last = from;
+  for (let i = from + 1; i < display.length; i++) {
+    const since = i - last;
+    if (since < CHUNK_MIN) continue;
+    const code = display.charCodeAt(i - 1);
+    // never between the halves of a surrogate pair
+    if (code >= 0xd800 && code <= 0xdbff) continue;
+    const delimiter =
+      code === 32 || code === 44 || code === 59 || code === 123 || code === 125;
+    const picked =
+      delimiter &&
+      ((display.charCodeAt(i - 2) * 31 + display.charCodeAt(i - 3) * 7) &
+        15) ===
+        0;
+    if (picked || since >= CHUNK_MAX) {
+      breaks.push(i);
+      last = i;
+    }
+  }
+  return breaks;
+}
+
+/** A line's spans cut at `breaks`. */
+function chunkSpans(
+  spans: Array<Record<string, unknown>>,
+  breaks: readonly number[],
+): Array<Array<Record<string, unknown>>> {
+  const pieces: Array<Array<Record<string, unknown>>> = [];
+  let piece: Array<Record<string, unknown>> = [];
+  let at = 0;
+  let next = 1;
+  for (const span of spans) {
+    let text = span.text as string;
+    while (text.length > 0) {
+      const cut = next < breaks.length ? breaks[next] : Infinity;
+      const take = Math.min(text.length, cut - at);
+      piece.push({ ...span, text: text.slice(0, take) });
+      text = text.slice(take);
+      at += take;
+      if (at === cut) {
+        pieces.push(piece);
+        piece = [];
+        next += 1;
+      }
+    }
+  }
+  if (piece.length > 0) pieces.push(piece);
+  return pieces;
+}
+
 export class CodeEditorNode extends Node implements CodeEditorHandle {
   private _lines: string[];
   /** What `_lines` was last built from — how a controlled `value` that the
-   * parent refused to update snaps back on the next read (see `_syncProps`). */
-  private _synced: string;
+   * parent refused to update snaps back on the next read (see `_syncProps`).
+   * Null where no `value` prop reads it: the text is joined only for a
+   * reader. */
+  private _synced: string | null;
   private _caret: Position = { line: 0, ch: 0 };
   private _anchor: Position = { line: 0, ch: 0 };
   private _scrollX = 0;
@@ -331,15 +713,29 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
   private _focused = false;
   private _caretOn = false;
   private _blinkTimer: TimerId = null;
+  /** Whether the last paint drew a horizontal thumb — see `paint`. */
+  private _thumbAcross = false;
   private _goalX: number | null = null;
   private _drag: 'char' | 'word' | 'line' | null = null;
   private _dragOrigin: Position = { line: 0, ch: 0 };
   /** Escape was the last key, so the next Tab leaves instead of indenting —
    * the editor's way of not being a keyboard trap (see `defaultKeyDown`). */
   private _tabEscapes = false;
-  private _history: HistoryEntry[];
+  /** The steps, oldest first; `_historyIndex` of them are applied. */
+  private _history: HistoryStep[] = [];
   private _historyIndex = 0;
   private _undoRun: string | null = null;
+  /** The lines the last change replaced, in the text it left: what
+   *  `_repaintSince` claims of an edit. */
+  /** The `diagnostics` prop, moved through the edits since it was set —
+   *  see `_mapDiagnostics` — and the prop array it was taken from. */
+  private _diagnostics: Diagnostic[] = [];
+  private _diagnosticsFrom: readonly Diagnostic[] | undefined = undefined;
+  private _lastEdit: {
+    fromLine: number;
+    removed: number;
+    inserted: number;
+  } | null = null;
   private _pendingValue: string | null = null;
   private _keyNative: unknown = null;
   private _tok: Tokenizer | null = null;
@@ -348,6 +744,12 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
   private _metricsKey = '';
   private _lineH = 0;
   private _charW = 0;
+  /** The base face's first baseline and the bottom of its glyphs, from the
+   *  top of a row: every row's text sits on the one, and a squiggle hugs
+   *  the other, whatever a fallback face in the row would make of its own
+   *  layout. Null baseline: an engine that does not say (see `paint`). */
+  private _baseline: number | null = null;
+  private _textBottom = 0;
   private _widest = 0;
 
   constructor(props: Record<string, unknown>, app: unknown) {
@@ -360,9 +762,6 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
           : '';
     this._lines = initial.split('\n');
     this._synced = initial;
-    this._history = [
-      { value: initial, caret: this._caret, anchor: this._anchor },
-    ];
     // Without this nothing focuses the editor and no key ever reaches it —
     // an app's `focusable`/`tabIndex` prop still overrides either way, which
     // is how `<CodeEditor disabled>` stays out of the tab order.
@@ -408,9 +807,10 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
   set value(next: string) {
     const text = next == null ? '' : String(next);
     if (text === this._lines.join('\n')) return;
+    const view = this._viewBefore();
     this._setText(text);
-    this._noteExternal();
-    this._repaint();
+    this._repaintSince(view, this._lastEdit);
+    this._lastEdit = null;
   }
 
   get name(): string | undefined {
@@ -442,17 +842,29 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     const text = String(v);
     if (text === this._synced) return;
     this._setText(text);
-    this._noteExternal();
   }
 
+  /**
+   * A text from outside — a controlled `value`, the `value` setter — as an
+   * undoable step of its own, and as the edit it really is: the lines it
+   * shares with the text before it at either end are neither tokenized nor
+   * laid out again. A formatter's output, or a parent echoing a value back
+   * with one line changed, used to reset the whole editor.
+   */
   private _setText(text: string): void {
-    this._lines = text.split('\n');
+    const next = text.split('\n');
+    const caret = clampPos(next, this._caret);
+    const anchor = clampPos(next, this._anchor);
     this._synced = text;
-    this._caret = clampPos(this._lines, this._caret);
-    this._anchor = clampPos(this._lines, this._anchor);
-    this._lineCache.clear();
-    this._widest = 0;
-    this._tokenizer()?.setLines(this._lines);
+    this._edit(0, this._lines.length, next, null, caret, anchor);
+    this._caret = caret;
+    this._anchor = anchor;
+    // the widest line may have gone: what is known of the lines left
+    let widest = 0;
+    for (const entry of this._lineCache.values()) {
+      widest = Math.max(widest, entry.layout?.width ?? 0);
+    }
+    this._widest = widest;
   }
 
   // --- tokenizer -----------------------------------------------------------
@@ -466,7 +878,7 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
         ? lang.createTokenizer({
             invalidate: (fromLine) => {
               for (const key of this._lineCache.keys()) {
-                if (key >= fromLine) this._lineCache.delete(key);
+                if (key >= fromLine) this._dropLine(key);
               }
               this._repaint();
             },
@@ -474,6 +886,7 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
         : null;
       this._tok?.setLines(this._lines);
       this._lineCache.clear();
+      this._chunkedStash = null;
     }
     return this._tok;
   }
@@ -548,6 +961,13 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     const probe = fonts.layout('Mg', s);
     this._lineH = probe.height || Number(s.size) * 1.4;
     this._charW = fonts.layout('0', s).width || Number(s.size) * 0.6;
+    this._baseline = baselineOf(probe);
+    const line = (probe as { lines?: ReadonlyArray<{ descent?: unknown }> })
+      .lines?.[0];
+    this._textBottom =
+      this._baseline != null && typeof line?.descent === 'number'
+        ? this._baseline + line.descent
+        : this._lineH;
   }
 
   private _lineHeight(): number {
@@ -633,18 +1053,22 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
 
   private _lineEntry(line: number): LineCacheEntry {
     const raw = this._lines[line];
-    const map = tabMap(raw, this._tabSize());
-    const tokens = this._tokenizer()?.lineTokens(line) ?? [];
+    const tabSize = this._tabSize();
+    const tokens = this._tokenizer()?.lineTokens(line) ?? NO_TOKENS;
     const styleKey = this._metricsKey;
     const cached = this._lineCache.get(line);
+    // the line's own string, not its display: building the tab map is
+    // linear in the line, and a long one is asked for many times a frame
     if (
       cached &&
-      cached.display === map.display &&
+      cached.raw === raw &&
+      cached.tabSize === tabSize &&
       cached.tokens === tokens &&
       cached.styleKey === styleKey
     ) {
       return cached;
     }
+    const map = tabMap(raw, tabSize);
     const fonts = this._fonts();
     const base = this._textStyle();
     let layout: LayoutLike | null = null;
@@ -676,9 +1100,30 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
       if (cursor < map.display.length) {
         spans.push({ text: map.display.slice(cursor) });
       }
-      layout = fonts.layout(spans.length > 0 ? spans : [{ text: '' }], base);
+      if (map.display.length > CHUNKED_PAST) {
+        const stash = this._chunkedStash;
+        const previous =
+          cached?.layout instanceof ChunkedLayout &&
+          cached.styleKey === styleKey
+            ? cached.layout
+            : stash?.styleKey === styleKey
+              ? stash.layout
+              : null;
+        layout = this._chunkedLayout(
+          fonts,
+          base,
+          styleKey,
+          map.display,
+          spans,
+          previous,
+        );
+      } else {
+        layout = fonts.layout(spans.length > 0 ? spans : [{ text: '' }], base);
+      }
     }
     const entry: LineCacheEntry = {
+      raw,
+      tabSize,
       display: map.display,
       tokens,
       styleKey,
@@ -690,11 +1135,194 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     return entry;
   }
 
+  /**
+   * A long line in pieces (`ChunkedLayout`), each piece's layout kept by
+   * what it holds, so an edit shapes only the pieces whose text or colours
+   * it changed. Bounded like the line cache it serves.
+   */
+  private _chunkLayouts = new Map<string, LayoutLike>();
+
+  /** The last long line an edit took out of the line cache, which the next
+   *  long line laid out starts from (`_chunkedLayout`). Checked piece by
+   *  piece against what it is asked for, so one from another line, or from
+   *  before an edit that changed everything, is simply not used. */
+  private _chunkedStash: { styleKey: string; layout: ChunkedLayout } | null =
+    null;
+
+  /** Take a line's entry out of the cache, keeping a long one's pieces for
+   *  the rebuild the edit that dropped it is about to ask for. */
+  private _dropLine(line: number): void {
+    const entry = this._lineCache.get(line);
+    if (entry?.layout instanceof ChunkedLayout) {
+      this._chunkedStash = { styleKey: entry.styleKey, layout: entry.layout };
+    }
+    this._lineCache.delete(line);
+  }
+
+  private _chunkedLayout(
+    fonts: FontsLike,
+    base: Record<string, unknown>,
+    styleKey: string,
+    display: string,
+    spans: Array<Record<string, unknown>>,
+    previous: ChunkedLayout | null,
+  ): LayoutLike {
+    const chunks: Chunk[] = [];
+    // The pieces an edit left alone, from the start of the line: the same
+    // text at the same place, in the same runs. Their layouts, and where
+    // they sit, are what they were, and the break after each is a break of
+    // the new line too, since a break depends on the text before it alone —
+    // all but the old line's last piece, which ended where the old line did.
+    // A keystroke at the end of a line of a million characters built a key
+    // from every piece's text and looked each one up: most of its 30 ms.
+    let from = 0;
+    let si = 0;
+    let spanStart = 0;
+    if (previous) {
+      const old = previous.chunks;
+      for (let k = 0; k < old.length - 1; k++) {
+        const chunk = old[k];
+        // a piece nobody laid out is no saving to keep, and its place across
+        // was a guess
+        if (!chunk.layout) break;
+        if (chunk.u16 !== from || !display.startsWith(chunk.text, from)) break;
+        const end = from + chunk.text.length;
+        let i = si;
+        let start = spanStart;
+        let at = from;
+        let r = 0;
+        let same = true;
+        while (at < end) {
+          const span = spans[i];
+          const spanEnd = start + (span.text as string).length;
+          const take = Math.min(spanEnd, end) - at;
+          const runs = chunk.runs;
+          if (
+            runs[r] !== take ||
+            runs[r + 1] !== (span.color ?? '') ||
+            runs[r + 2] !== (span.weight ?? '') ||
+            runs[r + 3] !== (span.style ?? '')
+          ) {
+            same = false;
+            break;
+          }
+          r += 4;
+          at += take;
+          if (at === spanEnd) {
+            start = spanEnd;
+            i += 1;
+          }
+        }
+        if (!same || r !== chunk.runs.length) break;
+        chunks.push(chunk);
+        from = end;
+        si = i;
+        spanStart = start;
+      }
+    }
+    const last = chunks[chunks.length - 1];
+    let cp = last ? last.cp + utf16ToCp(last.text, last.text.length) : 0;
+    let x = last ? last.x + last.advance : 0;
+    // the spans from where the kept pieces end, the first one cut there
+    const rest = spans.slice(si);
+    if (rest.length > 0 && from > spanStart) {
+      rest[0] = {
+        ...rest[0],
+        text: (rest[0].text as string).slice(from - spanStart),
+      };
+    }
+    // The rest are laid out when something asks about them (ChunkedLayout),
+    // and guessed across until then: a column a code point, which is what
+    // a monospace face makes of ASCII to the pixel.
+    this._metrics();
+    const column = this._charW;
+    const breaks = chunkBreaks(display, from).map((b) => b - from);
+    let u16 = from;
+    for (const piece of chunkSpans(rest, breaks)) {
+      const text = piece.map((sp) => sp.text as string).join('');
+      const runs: unknown[] = [];
+      for (const sp of piece) {
+        runs.push(
+          (sp.text as string).length,
+          sp.color ?? '',
+          sp.weight ?? '',
+          sp.style ?? '',
+        );
+      }
+      const points = utf16ToCp(text, text.length);
+      const guess = points * column;
+      chunks.push({
+        cp,
+        u16,
+        x,
+        text,
+        layout: null,
+        spans: piece,
+        advance: guess,
+        runs,
+      });
+      cp += points;
+      u16 += text.length;
+      x += guess;
+    }
+    if (chunks.length === 0) {
+      // an empty display is never chunked; kept here all the same so the
+      // layout is never empty
+      const layout = fonts.layout([{ text: '' }], base);
+      chunks.push({
+        cp: 0,
+        u16: 0,
+        x: 0,
+        text: '',
+        layout,
+        spans: null,
+        advance: layout.width,
+        runs: [],
+      });
+    }
+    return new ChunkedLayout(
+      chunks,
+      (piece) => this._pieceLayout(fonts, base, styleKey, piece),
+      (width) => {
+        if (width > this._widest) this._widest = width;
+      },
+    );
+  }
+
+  /** A long line's piece, laid out — or found, where the same text in the
+   *  same colours was laid out before (`_chunkLayouts`). */
+  private _pieceLayout(
+    fonts: FontsLike,
+    base: Record<string, unknown>,
+    styleKey: string,
+    piece: Array<Record<string, unknown>>,
+  ): LayoutLike {
+    const key =
+      styleKey +
+      '|' +
+      piece
+        .map(
+          (sp) =>
+            `${sp.color ?? ''},${sp.weight ?? ''},${sp.style ?? ''},${sp.text}`,
+        )
+        .join('\u0000');
+    let layout = this._chunkLayouts.get(key);
+    if (!layout) {
+      if (this._chunkLayouts.size > 4096) this._chunkLayouts.clear();
+      layout = fonts.layout(piece, base);
+      this._chunkLayouts.set(key, layout);
+    }
+    return layout;
+  }
+
   /** Caret x (device pixels from the text origin) for a position. */
   private _caretX(pos: Position): number {
     const entry = this._lineEntry(pos.line);
     if (!entry.layout) return 0;
     const disp = entry.map.toDisplay(pos.ch);
+    if (entry.layout instanceof ChunkedLayout) {
+      return entry.layout.caretXAt(disp);
+    }
     return entry.layout.caretPosition(utf16ToCp(entry.display, disp)).x;
   }
 
@@ -712,8 +1340,11 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     );
     const entry = this._lineEntry(line);
     if (!entry.layout) return { line, ch: 0 };
-    const cp = entry.layout.indexAt(x - textX + this._scrollX, 0);
-    const disp = cpToUtf16(entry.display, cp);
+    const at = x - textX + this._scrollX;
+    const disp =
+      entry.layout instanceof ChunkedLayout
+        ? entry.layout.indexAtUtf16(at, 0)
+        : cpToUtf16(entry.display, entry.layout.indexAt(at, 0));
     return clampPos(this._lines, { line, ch: entry.map.toRaw(disp) });
   }
 
@@ -774,25 +1405,32 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
 
   // --- scrolling -----------------------------------------------------------
 
+  // Both limits, and every offset a caret is revealed at, are whole device
+  // pixels: a line is a measured height, and a shift that is not whole is
+  // not a copy (`_blitScroll`).
   private _maxScrollY(): number {
     const content = this._contentRect();
     return Math.max(
       0,
-      this._lines.length * this._lineHeight() - content.height,
+      Math.ceil(this._lines.length * this._lineHeight() - content.height),
     );
   }
 
   private _maxScrollX(): number {
     const content = this._contentRect();
     const textW = content.width - this._gutterWidth();
-    return Math.max(0, this._widest + CARET_MARGIN * this._scale - textW);
+    return Math.max(
+      0,
+      Math.ceil(this._widest + CARET_MARGIN * this._scale - textW),
+    );
   }
 
-  /** Wheel notches (deltaX/deltaY arrive as ±1 per notch) → three lines a
-   * notch, in the device pixels the offsets are kept in. */
+  /** The wheel, in the unit core hands every scroller: logical pixels, not
+   * notches — a notch is 48 of them (react-x11's `WHEEL_NOTCH_PX`) and a
+   * touchpad reports what it measured — so a notch moves the text as far
+   * as it moves a `<box>` pane beside the editor. */
   handleWheel(ev: { deltaX: number; deltaY: number }): boolean {
-    const step = this._lineHeight() * 3;
-    return this._scrollByDevice(ev.deltaX * step, ev.deltaY * step);
+    return this.scrollBy(ev.deltaX, ev.deltaY);
   }
 
   /** Logical pixels, like core's own `scrollBy`: application code writes
@@ -808,9 +1446,87 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     const nx = Math.max(0, Math.min(this._scrollX + dx, this._maxScrollX()));
     const ny = Math.max(0, Math.min(this._scrollY + dy, this._maxScrollY()));
     if (nx === this._scrollX && ny === this._scrollY) return false;
+    const shiftX = this._scrollX - nx;
+    const shiftY = this._scrollY - ny;
     this._scrollX = nx;
     this._scrollY = ny;
-    this.root?.invalidate(false, this.abs, 'scroll');
+    if (!this._blitScroll(shiftX, shiftY)) {
+      this.root?.invalidate(false, this.abs, 'scroll');
+    }
+    return true;
+  }
+
+  /**
+   * The rect a scroll of the view shifts (core's `scrollContents`): the
+   * content box less the scroll thumbs' strips, which stay put while the
+   * text moves under them — and sideways, less the gutter as well, which
+   * stays put while the text moves beside it.
+   */
+  private _scrollRegion(sideways: boolean): Rect {
+    const box = this._contentRect();
+    const bar = 4 * this._scale; // a thumb's inset, see `paint`
+    const across = this._maxScrollX() > 0 ? bar : 0;
+    const gutter = sideways ? this._gutterWidth() : 0;
+    return {
+      x: box.x + gutter,
+      y: box.y,
+      width: box.width - gutter - bar,
+      height: box.height - across,
+    };
+  }
+
+  /**
+   * A scroll along one axis as a blit: inside `_scrollRegion` the new frame
+   * is the old one shifted. The thumbs' strips are carved out of the region
+   * and claimed beside it, edge to edge, which leaves the frame a blit; the
+   * band the shift exposes is all `paint` draws (`paintDamage()`).
+   * `pinned` are rows that change as well as move — an edit's, the
+   * caret's, when revealing it scrolled — which the frame repaints after
+   * the copy instead of refusing it, so the caller claims inside them.
+   *
+   * False where the promise would not hold: both ways at once, since the
+   * gutter moves with the text down and not across; off the device grid,
+   * where a shift is not a copy; and under a background image, which does
+   * not translate. Core checks the rest — the border ring, a rounded
+   * corner, anything drawn over the box — and repaints the region itself
+   * when one of them fails.
+   */
+  private _blitScroll(
+    shiftX: number,
+    shiftY: number,
+    pinned: Rect[] | null = null,
+  ): boolean {
+    if ((shiftX !== 0) === (shiftY !== 0)) return false;
+    if (!Number.isInteger(shiftX) || !Number.isInteger(shiftY)) return false;
+    if ((this.style as Record<string, unknown>).backgroundImage) return false;
+    const box = this._contentRect();
+    const bar = 4 * this._scale;
+    const rect = this._scrollRegion(shiftX !== 0);
+    const whole = [rect.x, rect.y, rect.width, rect.height, bar];
+    if (!whole.every(Number.isInteger)) return false;
+    if (rect.width <= 0 || rect.height <= 0) return false;
+    if (Math.abs(shiftX) >= rect.width || Math.abs(shiftY) >= rect.height) {
+      return false;
+    }
+    this.scrollContents(rect, shiftX, shiftY, null, pinned);
+    this.invalidate(
+      false,
+      { x: box.x + box.width - bar, y: box.y, width: bar, height: box.height },
+      'scroll',
+    );
+    const across = box.height - rect.height;
+    if (across > 0) {
+      this.invalidate(
+        false,
+        {
+          x: box.x,
+          y: rect.y + rect.height,
+          width: box.width - bar,
+          height: across,
+        },
+        'scroll',
+      );
+    }
     return true;
   }
 
@@ -818,19 +1534,19 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     this._metrics();
     const content = this._contentRect();
     const lineTop = this._caret.line * this._lineH;
-    if (lineTop < this._scrollY) this._scrollY = lineTop;
+    if (lineTop < this._scrollY) this._scrollY = Math.floor(lineTop);
     const lineBottom = lineTop + this._lineH;
     if (lineBottom > this._scrollY + content.height) {
-      this._scrollY = lineBottom - content.height;
+      this._scrollY = Math.ceil(lineBottom - content.height);
     }
     const textW = content.width - this._gutterWidth();
     const x = this._caretX(this._caret);
     const margin = CARET_MARGIN * this._scale;
     if (x < this._scrollX + margin) {
-      this._scrollX = Math.max(0, x - margin);
+      this._scrollX = Math.max(0, Math.floor(x - margin));
     }
     if (x > this._scrollX + textW - margin) {
-      this._scrollX = x - textW + margin;
+      this._scrollX = Math.ceil(x - textW + margin);
     }
     this._scrollY = Math.max(0, Math.min(this._scrollY, this._maxScrollY()));
     this._scrollX = Math.max(0, this._scrollX);
@@ -857,15 +1573,17 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     return ev;
   }
 
+  /** `value` is a thunk where joining the text is the caller's cost: the
+   *  text is joined for a handler that is there to read it, and only then. */
   private _fire(
     prop: 'onChange' | 'onSubmit' | 'onSelectionChange',
-    value: string,
+    value: string | (() => string),
   ): void {
     const handler = this.props[prop] as
       ((ev: CodeEditorEvent) => void) | undefined;
     if (!handler) return;
     const previous = this._pendingValue;
-    this._pendingValue = value;
+    this._pendingValue = typeof value === 'function' ? value() : value;
     try {
       handler(
         this._makeEvent(
@@ -886,23 +1604,347 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     this.root?.invalidate(false, this.abs, 'text');
   }
 
-  // --- history -------------------------------------------------------------
+  /** What an edit or a caret move can change on screen, read before it. */
+  private _viewBefore(): ViewBefore {
+    const selection = this._hasSelection() ? this._selectionRange() : null;
+    const brackets =
+      this._focused && this.props.matchBrackets !== false
+        ? this._findBracketMatch()
+        : null;
+    return {
+      caretLine: this._caret.line,
+      selection: selection && [selection[0].line, selection[1].line],
+      brackets: brackets && [brackets[0].line, brackets[1].line],
+      scrollX: this._scrollX,
+      scrollY: this._scrollY,
+      gutter: this._gutterWidth(),
+      empty: this._lines.length === 1 && this._lines[0].length === 0,
+      maxX: this._maxScrollX(),
+      maxY: this._maxScrollY(),
+    };
+  }
 
-  private _noteExternal(): void {
-    this._undoRun = null;
-    const value = this._lines.join('\n');
-    const top = this._history[this._historyIndex];
-    if (top && top.value === value) return;
-    this._pushHistory({ value, caret: this._caret, anchor: this._anchor });
+  /**
+   * Rows (inclusive ranges, any order) as the device-pixel bands they are
+   * drawn in, `[top, bottom)`, merged where they touch and cut to the
+   * content box. Glyphs ink a little past their row — a descender's
+   * anti-aliasing below it, an accent above — into pixels the next row's
+   * claim covers and this row's does not: a line edited left its old
+   * descenders in the row under it. So a band reaches that far into its
+   * neighbours, which the paint draws for it (`paint` culls a row either
+   * side).
+   */
+  private _rowBands(rows: Array<[number, number]>): Array<[number, number]> {
+    const content = this._contentRect();
+    const lineH = this._lineH;
+    const spill = 2 * this._scale;
+    const bands: Array<[number, number]> = [];
+    const band = (from: number, to: number): void => {
+      const top = Math.max(
+        content.y,
+        Math.floor(content.y + from * lineH - this._scrollY - spill),
+      );
+      const bottom = Math.min(
+        content.y + content.height,
+        Math.ceil(content.y + (to + 1) * lineH - this._scrollY + spill),
+      );
+      if (bottom > top) bands.push([top, bottom]);
+    };
+    const sorted = rows.slice().sort((a, b) => a[0] - b[0]);
+    let open: [number, number] | null = null;
+    for (const [a, b] of sorted) {
+      if (open && a <= open[1] + 1) open[1] = Math.max(open[1], b);
+      else {
+        if (open) band(open[0], open[1]);
+        open = [a, b];
+      }
+    }
+    if (open) band(open[0], open[1]);
+    return bands;
+  }
+
+  /** Claim the rows the squiggles of both lists are on: a linter's answer
+   *  arriving is a few rows, not the editor, and the layouts stay. */
+  private _repaintDiagnostics(
+    before: readonly Diagnostic[],
+    after: readonly Diagnostic[],
+  ): void {
+    const content = this._contentRect();
+    const lineH = this._lineH;
+    if (!this.root || content.width <= 0 || !(lineH > 0)) return;
+    const first = Math.floor(this._scrollY / lineH);
+    const bottom = Math.ceil((this._scrollY + content.height) / lineH);
+    const rows: Array<[number, number]> = [];
+    const last = this._lines.length - 1;
+    for (const d of [...before, ...after]) {
+      // where the paint puts it: clamped to the text
+      const a = Math.max(
+        first,
+        Math.min(last, Math.min(d.from.line, d.to.line)),
+      );
+      const b = Math.min(
+        bottom,
+        Math.min(last, Math.max(d.from.line, d.to.line)),
+      );
+      if (a <= b) rows.push([a, b]);
+    }
+    for (const [top, end] of this._rowBands(rows)) {
+      this.invalidate(
+        false,
+        { x: content.x, y: top, width: content.width, height: end - top },
+        'text',
+      );
+    }
+  }
+
+  /**
+   * Claim what a change since `before` moved: the rows it touched rather
+   * than the editor, so a keystroke paints its line, not the forty in view.
+   *
+   * A row is the caret's, the active line's and its gutter number's, before
+   * and after; every row of the selection and the bracket pair, before and
+   * after; the rows an edit replaced, and every row below them when it
+   * added or took lines away; and a row below the edit whose tokens it
+   * moved — an opened comment or string recolours what follows (the test
+   * `_lineEntry` makes: the line's tokens are no longer the ones it was laid
+   * out with). A thumb's strip goes with a change to what sizes it — the
+   * line count, the widest line — and of the right one, only what no row
+   * already repaints: a strip that overlapped a row would reach core as the
+   * box around both, which is the editor again. A scroll to the caret along
+   * one axis is a blit (`_blitScroll`) with those rows pinned — repainted
+   * after the copy, where they now are. Whatever else moves the whole view
+   * — a scroll both ways, a gutter that grew a digit, the placeholder — is
+   * the editor.
+   */
+  private _repaintSince(
+    before: ViewBefore,
+    edit: { fromLine: number; removed: number; inserted: number } | null,
+  ): void {
+    this._caretOn = true;
+    const root = this.root;
+    if (!root) return;
+    const content = this._contentRect();
+    const lineH = this._lineH;
+    const empty = this._lines.length === 1 && this._lines[0].length === 0;
+    // how far the pixels move: the other way from the offsets
+    const shiftX = before.scrollX - this._scrollX;
+    const shiftY = before.scrollY - this._scrollY;
+    if (
+      content.width <= 0 ||
+      content.height <= 0 ||
+      !(lineH > 0) ||
+      before.gutter !== this._gutterWidth() ||
+      (before.empty !== empty && this.props.placeholder != null)
+    ) {
+      this._repaint();
+      return;
+    }
+    const first = Math.max(0, Math.floor(this._scrollY / lineH));
+    // rows in view, text or not: a row past the last line is still where a
+    // line was drawn before an edit took it away
+    const bottom = Math.ceil((this._scrollY + content.height) / lineH);
+    const last = Math.min(this._lines.length - 1, bottom);
+    // rows as inclusive ranges, merged below
+    const rows: Array<[number, number]> = [];
+    const add = (from: number, to: number): void => {
+      const a = Math.max(first, Math.min(from, to));
+      const b = Math.min(bottom, Math.max(from, to));
+      if (a <= b) rows.push([a, b]);
+    };
+    add(before.caretLine, before.caretLine);
+    add(this._caret.line, this._caret.line);
+    if (before.selection) add(before.selection[0], before.selection[1]);
+    if (this._hasSelection()) {
+      const [a, b] = this._selectionRange();
+      add(a.line, b.line);
+    }
+    if (before.brackets) {
+      add(before.brackets[0], before.brackets[0]);
+      add(before.brackets[1], before.brackets[1]);
+    }
+    if (this._focused && this.props.matchBrackets !== false) {
+      const now = this._findBracketMatch();
+      if (now) {
+        add(now[0].line, now[0].line);
+        add(now[1].line, now[1].line);
+      }
+    }
+    if (edit) {
+      // laid out now rather than in the paint, so the widest line — what
+      // the horizontal thumb is sized by — is known before it is claimed
+      const to = Math.min(last, edit.fromLine + edit.inserted - 1);
+      for (let i = Math.max(first, edit.fromLine); i <= to; i++) {
+        this._lineEntry(i);
+      }
+      if (edit.inserted !== edit.removed) {
+        add(edit.fromLine, bottom);
+      } else {
+        add(edit.fromLine, edit.fromLine + edit.inserted - 1);
+        // the rows after it that its tokens re-coloured
+        const tok = this._tokenizer();
+        for (
+          let i = Math.max(first, edit.fromLine + edit.inserted);
+          tok && i <= last;
+          i++
+        ) {
+          const cached = this._lineCache.get(i);
+          if (
+            !cached ||
+            cached.raw !== this._lines[i] ||
+            cached.tokens !== (tok.lineTokens(i) ?? NO_TOKENS)
+          ) {
+            add(i, i);
+          }
+        }
+      }
+    }
+    const bands = this._rowBands(rows);
+    if (shiftX !== 0 || shiftY !== 0) {
+      // the rows inside the region are pinned: core repaints them after the
+      // copy, changed or not, so what is left to claim is what of them lies
+      // beside it — the gutter, sideways; the thumbs' strips go with the blit
+      const region = this._scrollRegion(shiftX !== 0);
+      const pinned = bands.map(([top, bottom]) => ({
+        x: region.x,
+        y: top,
+        width: region.width,
+        height: bottom - top,
+      }));
+      if (!this._blitScroll(shiftX, shiftY, pinned)) {
+        this._repaint();
+        return;
+      }
+      if (region.x > content.x) {
+        // stopping where the region does: past it is the horizontal
+        // thumb's strip, claimed whole — and two claims that overlap reach
+        // core as the box around both, which here would take in the region
+        // and refuse the blit
+        const end = region.y + region.height;
+        for (const [top, bottom] of bands) {
+          if (Math.min(bottom, end) <= top) continue;
+          this.invalidate(
+            false,
+            {
+              x: content.x,
+              y: top,
+              width: region.x - content.x,
+              height: Math.min(bottom, end) - top,
+            },
+            'text',
+          );
+        }
+      }
+      return;
+    }
+    for (const [top, bottom] of bands) {
+      this.invalidate(
+        false,
+        { x: content.x, y: top, width: content.width, height: bottom - top },
+        'text',
+      );
+    }
+    const strip = 4 * this._scale; // a thumb's inset, see `paint`
+    const maxY = this._maxScrollY();
+    if (maxY !== before.maxY && (maxY > 0 || before.maxY > 0)) {
+      // the rows between the bands, in the right thumb's column
+      let y = content.y;
+      for (const [top, bottom] of [
+        ...bands,
+        [content.y + content.height, content.y + content.height],
+      ]) {
+        if (top > y) {
+          this.invalidate(
+            false,
+            {
+              x: content.x + content.width - strip,
+              y,
+              width: strip,
+              height: top - y,
+            },
+            'text',
+          );
+        }
+        y = Math.max(y, bottom);
+      }
+    }
+    const maxX = this._maxScrollX();
+    if (maxX !== before.maxX && (maxX > 0 || before.maxX > 0)) {
+      this.invalidate(
+        false,
+        {
+          x: content.x,
+          y: content.y + content.height - strip,
+          width: content.width,
+          height: strip,
+        },
+        'text',
+      );
+    }
   }
 
-  private _pushHistory(entry: HistoryEntry): void {
-    this._history.length = this._historyIndex + 1;
-    this._history.push(entry);
+  // --- history -------------------------------------------------------------
+
+  /**
+   * Record a change about to be made — `removed` lines at `from` becoming
+   * `lines` — and the selection it will leave. Called before the lines
+   * change, because merging needs the text the step before it left.
+   *
+   * `run` names a coalescable kind of edit: a change of the same run as
+   * the last one, on lines that one touched or beside them, joins its step
+   * rather than starting one — a word typed is one undo.
+   */
+  private _record(
+    from: number,
+    removed: number,
+    lines: readonly string[],
+    run: string | null,
+    caret: Position,
+    anchor: Position,
+  ): void {
+    const top = this._history[this._historyIndex - 1];
+    const text = this._lines;
+    if (
+      top &&
+      run !== null &&
+      run === this._undoRun &&
+      this._historyIndex === this._history.length &&
+      from <= top.from + top.after.length &&
+      from + removed >= top.from
+    ) {
+      // One step from the text before `top` to the text after this: the
+      // union of the two ranges, in the text between them, read on either
+      // side of what each changed.
+      const lo = Math.min(top.from, from);
+      const hi = Math.max(top.from + top.after.length, from + removed);
+      top.before = [
+        ...text.slice(lo, top.from),
+        ...top.before,
+        ...text.slice(top.from + top.after.length, hi),
+      ];
+      top.after = [
+        ...text.slice(lo, from),
+        ...lines,
+        ...text.slice(from + removed, hi),
+      ];
+      top.from = lo;
+      top.caret = caret;
+      top.anchor = anchor;
+      return;
+    }
+    this._history.length = this._historyIndex;
+    this._history.push({
+      from,
+      before: text.slice(from, from + removed),
+      after: lines,
+      caretBefore: this._caret,
+      anchorBefore: this._anchor,
+      caret,
+      anchor,
+    });
     if (this._history.length > UNDO_LIMIT) {
       this._history.splice(0, this._history.length - UNDO_LIMIT);
     }
-    this._historyIndex = this._history.length - 1;
+    this._historyIndex = this._history.length;
   }
 
   breakUndoRun(): void {
@@ -913,31 +1955,143 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     return this._historyIndex > 0;
   }
 
+  get diagnostics(): readonly Diagnostic[] {
+    return this._currentDiagnostics();
+  }
+
+  private _currentDiagnostics(): Diagnostic[] {
+    const prop = (this.props as unknown as CodeEditorProps).diagnostics;
+    if (prop !== this._diagnosticsFrom) {
+      // A render hands the same answer over as a new array — a list mapped
+      // from the linter's result inline — and that is not a new answer: the
+      // squiggles stay where the edits since the last one moved them,
+      // rather than going back to where the old text had them.
+      if (!sameDiagnostics(prop, this._diagnosticsFrom)) {
+        this._diagnostics = prop ? prop.slice() : [];
+      }
+      this._diagnosticsFrom = prop;
+    }
+    return this._diagnostics;
+  }
+
+  /**
+   * Move the diagnostics through `removed` lines at `from` becoming `lines`,
+   * before the text changes. A squiggle is where a linter looked, and the
+   * linter is asked again only once the text settles: meanwhile, typing a
+   * line above one left it under the line that had been there. The change
+   * is narrowed to the characters it really touched — the text the old and
+   * new lines share at either end — and a position in that text keeps its
+   * character. One inside the change goes to its edge: a diagnostic's start
+   * to the far side of what was inserted there, so typing before a flagged
+   * word moves the flag along with it, and its end to the near side, so
+   * typing after the word does not stretch the flag over the new text. A
+   * diagnostic whose whole range the edit took away goes with it; one that
+   * points at a place rather than a range stays.
+   */
+  private _mapDiagnostics(
+    from: number,
+    removed: number,
+    lines: readonly string[],
+  ): void {
+    const list = this._currentDiagnostics();
+    if (list.length === 0) return;
+    const before = this._lines.slice(from, from + removed).join('\n');
+    const after = lines.join('\n');
+    let head = 0;
+    const most = Math.min(before.length, after.length);
+    while (head < most && before.charCodeAt(head) === after.charCodeAt(head)) {
+      head++;
+    }
+    let tail = 0;
+    while (
+      tail < most - head &&
+      before.charCodeAt(before.length - 1 - tail) ===
+        after.charCodeAt(after.length - 1 - tail)
+    ) {
+      tail++;
+    }
+    const shift = lines.length - removed;
+    const grow = after.length - before.length;
+    // where each old line starts inside `before`
+    const starts: number[] = [];
+    for (let i = 0, at = 0; i < removed; i++) {
+      starts.push(at);
+      at += this._lines[from + i].length + 1;
+    }
+    const move = (p: Position, far: boolean): Position => {
+      if (p.line < from) return p;
+      if (p.line >= from + removed) return { line: p.line + shift, ch: p.ch };
+      const text = this._lines[p.line];
+      const o = starts[p.line - from] + Math.min(p.ch, text.length);
+      let n: number;
+      if (o < head) n = o;
+      else if (o > before.length - tail) n = o + grow;
+      else n = far ? after.length - tail : head;
+      // back to a line and column of the new lines
+      let line = 0;
+      let at = 0;
+      while (line < lines.length - 1 && n > at + lines[line].length) {
+        at += lines[line].length + 1;
+        line++;
+      }
+      return { line: from + line, ch: n - at };
+    };
+    const kept: Diagnostic[] = [];
+    for (const d of list) {
+      const a = minPos(d.from, d.to);
+      const b = maxPos(d.from, d.to);
+      const point = posEqual(a, b);
+      const start = move(a, !point);
+      const end = move(b, false);
+      if (comparePos(end, start) < 0 || (!point && posEqual(start, end))) {
+        if (!point) continue; // what it pointed at is gone
+      }
+      kept.push({
+        ...d,
+        from: start,
+        to: comparePos(end, start) < 0 ? start : end,
+      });
+    }
+    this._diagnostics = kept;
+  }
+
   get canRedo(): boolean {
-    return this._historyIndex < this._history.length - 1;
+    return this._historyIndex < this._history.length;
   }
 
   undo(): void {
     this._syncProps();
     if (!this.canUndo) return;
-    this._historyIndex--;
-    this._applyHistory(this._history[this._historyIndex]);
+    // the selection the change found, so an undo lands where the change
+    // was made — not where the one before it left the caret, which for the
+    // first change of a session was the top of the file
+    const step = this._history[--this._historyIndex];
+    this._applyStep(step.from, step.after.length, step.before, {
+      caret: step.caretBefore,
+      anchor: step.anchorBefore,
+    });
   }
 
   redo(): void {
     this._syncProps();
     if (!this.canRedo) return;
-    this._historyIndex++;
-    this._applyHistory(this._history[this._historyIndex]);
+    const step = this._history[this._historyIndex++];
+    this._applyStep(step.from, step.before.length, step.after, step);
   }
 
-  private _applyHistory(entry: HistoryEntry): void {
+  private _applyStep(
+    from: number,
+    removed: number,
+    lines: readonly string[],
+    selection: { caret: Position; anchor: Position },
+  ): void {
+    const view = this._viewBefore();
     this._undoRun = null;
     this._goalX = null;
-    this._applyLines(entry.value.split('\n'), null);
-    this._caret = clampPos(this._lines, entry.caret);
-    this._anchor = clampPos(this._lines, entry.anchor);
-    this._afterEdit(entry.value);
+    this._replaceLines(from, removed, lines);
+    this._caret = clampPos(this._lines, selection.caret);
+    this._anchor = clampPos(this._lines, selection.anchor);
+    this._afterEdit(view);
   }
 
   // --- editing core --------------------------------------------------------
@@ -978,6 +2132,7 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
   ): void {
     this._syncProps();
     if (this.props.readOnly) return;
+    const view = this._viewBefore();
     const a = clampPos(this._lines, minPos(from, to));
     const b = clampPos(this._lines, maxPos(from, to));
     const insert = String(text).replace(/\r\n?/g, '\n');
@@ -987,77 +2142,145 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     inserted[0] = before + inserted[0];
     const caretCh = inserted[inserted.length - 1].length;
     inserted[inserted.length - 1] += after;
-    const newLines = this._lines.slice();
-    newLines.splice(a.line, b.line - a.line + 1, ...inserted);
-
-    const coalesce =
-      run !== null &&
-      run === this._undoRun &&
-      this._historyIndex === this._history.length - 1;
-    this._applyLines(newLines, {
-      fromLine: a.line,
-      removed: b.line - a.line + 1,
-      inserted: inserted.length,
-    });
-    this._caret = clampPos(this._lines, {
-      line: a.line + inserted.length - 1,
-      ch: caretCh,
-    });
-    this._anchor = { ...this._caret };
+    const caret = { line: a.line + inserted.length - 1, ch: caretCh };
+    this._edit(a.line, b.line - a.line + 1, inserted, run, caret, { ...caret });
+    this._caret = caret;
+    this._anchor = { ...caret };
     this._goalX = null;
+    this._afterEdit(view);
+  }
 
-    const value = this._lines.join('\n');
-    if (coalesce) {
-      this._history[this._historyIndex] = {
-        value,
-        caret: this._caret,
-        anchor: this._anchor,
-      };
-    } else {
-      this._pushHistory({ value, caret: this._caret, anchor: this._anchor });
+  /**
+   * The one way the lines change: `removed` lines at `from` become `lines`,
+   * recorded for undo under `run` with the selection the change leaves.
+   * Narrowed first to the lines it really changes — a replacement that
+   * leaves lines at either end as they were, a select-all and paste of the
+   * same file or a formatter's output, touches only the ones between — and
+   * a change that changes nothing is not one.
+   */
+  private _edit(
+    from: number,
+    removed: number,
+    lines: readonly string[],
+    run: string | null,
+    caret: Position,
+    anchor: Position,
+  ): void {
+    const text = this._lines;
+    let head = 0;
+    while (
+      head < removed &&
+      head < lines.length &&
+      text[from + head] === lines[head]
+    ) {
+      head++;
+    }
+    let tail = 0;
+    while (
+      tail < removed - head &&
+      tail < lines.length - head &&
+      text[from + removed - 1 - tail] === lines[lines.length - 1 - tail]
+    ) {
+      tail++;
+    }
+    const gone = removed - head - tail;
+    const added = lines.slice(head, lines.length - tail);
+    if (gone > 0 || added.length > 0) {
+      this._record(from + head, gone, added, run, caret, anchor);
+      this._replaceLines(from + head, gone, added);
     }
     this._undoRun = run;
-    this._afterEdit(value);
   }
 
-  private _applyLines(
-    newLines: string[],
-    edit: { fromLine: number; removed: number; inserted: number } | null,
+  /**
+   * `removed` lines at `from` become `lines`, in the live array. A
+   * tokenizer keeps the array `setLines` handed it (that is the contract in
+   * `Tokenizer`) and is told about changes through `edit()` alone, so an
+   * edit has to *mutate* it — swapping in a fresh one would leave every
+   * engine tokenizing the pre-edit text at the new line numbers, painting a
+   * split line with its neighbour's colours.
+   */
+  private _replaceLines(
+    from: number,
+    removed: number,
+    lines: readonly string[],
   ): void {
-    if (edit) {
-      // A tokenizer keeps the array `setLines` handed it (that is the
-      // contract in `Tokenizer`) and is told about changes through `edit()`
-      // alone, so an incremental edit has to *mutate* the live array —
-      // swapping in a fresh one would leave every engine tokenizing the
-      // pre-edit text at the new line numbers, painting a split line with
-      // its neighbour's colours. Callers only touch the edited span, so
-      // splicing that span across reproduces `newLines` exactly.
-      this._lines.splice(
-        edit.fromLine,
-        edit.removed,
-        ...newLines.slice(edit.fromLine, edit.fromLine + edit.inserted),
-      );
-    } else {
-      this._lines = newLines;
-    }
-    const tok = this._tokenizer();
-    if (edit && tok) {
-      tok.edit(edit);
-      // line indices at and below the edit moved or changed; drop them
-      for (const key of [...this._lineCache.keys()]) {
-        if (key >= edit.fromLine) this._lineCache.delete(key);
+    this._mapDiagnostics(from, removed, lines);
+    // the widest line known going: what it was is the widest of the lines
+    // still laid out — the one edited is laid out again before it is drawn
+    let widestGoes = false;
+    for (let i = from; i < from + removed && !widestGoes; i++) {
+      const width = this._lineCache.get(i)?.layout?.width ?? 0;
+      widestGoes = width > 0 && width >= this._widest;
+    }
+    spliceAll(this._lines, from, removed, lines);
+    const edit = { fromLine: from, removed, inserted: lines.length };
+    this._tokenizer()?.edit(edit);
+    this._moveLineCache(edit);
+    this._lastEdit = edit;
+    if (widestGoes) {
+      let widest = 0;
+      for (const entry of this._lineCache.values()) {
+        widest = Math.max(widest, entry.layout?.width ?? 0);
+      }
+      this._widest = widest;
+    }
+  }
+
+  /** Let go of the line entries farther than a quarter of the cache from
+   *  the lines in view — see `LINE_CACHE_MAX`. */
+  private _trimLineCache(first: number, last: number): void {
+    const reach = LINE_CACHE_MAX / 4;
+    for (const line of this._lineCache.keys()) {
+      if (line < first - reach || line > last + reach) {
+        this._lineCache.delete(line);
+      }
+    }
+  }
+
+  /**
+   * The line cache across an edit: the edited lines' entries go, and the
+   * ones after them move by the lines it added or took away. Every other
+   * entry stays. An entry is checked against its line's text and tokens
+   * whenever it is asked for (`_lineEntry`), so a line an edit re-coloured
+   * — an opened comment, a closed string — is laid out again then, and a
+   * line it left alone is not: typing on the first line of a file used to
+   * lay out every line in view again on every keystroke.
+   */
+  private _moveLineCache(edit: {
+    fromLine: number;
+    removed: number;
+    inserted: number;
+  }): void {
+    const end = edit.fromLine + edit.removed;
+    const shift = edit.inserted - edit.removed;
+    if (shift === 0) {
+      for (let line = edit.fromLine; line < end; line++) {
+        this._dropLine(line);
+      }
+      return;
+    }
+    const moved = new Map<number, LineCacheEntry>();
+    for (const [line, entry] of this._lineCache) {
+      if (line < edit.fromLine) moved.set(line, entry);
+      else if (line >= end) moved.set(line + shift, entry);
+      else if (entry.layout instanceof ChunkedLayout) {
+        this._chunkedStash = { styleKey: entry.styleKey, layout: entry.layout };
       }
-      if (edit.removed !== edit.inserted) this._lineCache.clear();
-    } else {
-      tok?.setLines(this._lines);
-      this._lineCache.clear();
     }
+    this._lineCache = moved;
   }
 
-  private _afterEdit(value: string): void {
-    this._synced = value;
+  private _afterEdit(before: ViewBefore): void {
+    // The whole text as one string is what `onChange`, `onSelectionChange`
+    // and a controlled `value` speak, and joining fifty thousand lines is a
+    // millisecond or two a keystroke — joined when one of them reads it.
+    let joined: string | null = null;
+    const value = (): string => (joined ??= this._lines.join('\n'));
+    this._synced = this.props.value != null ? value() : null;
     this._ensureCaretVisible();
-    this._repaint();
+    this._repaintSince(before, this._lastEdit);
+    this._lastEdit = null;
     this._fire('onChange', value);
     this._fire('onSelectionChange', value);
   }
@@ -1070,21 +2293,23 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
   moveCaret(pos: Position, extend: boolean): void {
     this._syncProps();
     this.breakUndoRun();
+    const view = this._viewBefore();
     this._caret = clampPos(this._lines, pos);
     if (!extend) this._anchor = { ...this._caret };
     this._ensureCaretVisible();
-    this._repaint();
-    this._fire('onSelectionChange', this.value);
+    this._repaintSince(view, null);
+    this._fire('onSelectionChange', () => this.value);
   }
 
   select(anchor: Position, head: Position): void {
     this._syncProps();
     this.breakUndoRun();
+    const view = this._viewBefore();
     this._anchor = clampPos(this._lines, anchor);
     this._caret = clampPos(this._lines, head);
     this._ensureCaretVisible();
-    this._repaint();
-    this._fire('onSelectionChange', this.value);
+    this._repaintSince(view, null);
+    this._fire('onSelectionChange', () => this.value);
   }
 
   // `: this`, matching the base declaration core grew in #294 — a subclass
@@ -1199,19 +2424,20 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     fromLine: number,
     toLine: number,
   ): void {
-    const caret = this._caret;
-    const anchor = this._anchor;
-    this._applyLines(newLines, {
+    const view = this._viewBefore();
+    const caret = clampPos(newLines, this._caret);
+    const anchor = clampPos(newLines, this._anchor);
+    this._edit(
       fromLine,
-      removed: toLine - fromLine + 1,
-      inserted: toLine - fromLine + 1,
-    });
-    this._caret = clampPos(this._lines, caret);
-    this._anchor = clampPos(this._lines, anchor);
-    this._undoRun = null;
-    const value = this._lines.join('\n');
-    this._pushHistory({ value, caret: this._caret, anchor: this._anchor });
-    this._afterEdit(value);
+      toLine - fromLine + 1,
+      newLines.slice(fromLine, toLine + 1),
+      null,
+      caret,
+      anchor,
+    );
+    this._caret = caret;
+    this._anchor = anchor;
+    this._afterEdit(view);
   }
 
   // --- input: keyboard -----------------------------------------------------
@@ -1464,8 +2690,11 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     const entry = this._lineEntry(line);
     let ch = 0;
     if (entry.layout) {
-      const cp = entry.layout.indexAt(this._goalX, 0);
-      ch = entry.map.toRaw(cpToUtf16(entry.display, cp));
+      ch = entry.map.toRaw(
+        entry.layout instanceof ChunkedLayout
+          ? entry.layout.indexAtUtf16(this._goalX, 0)
+          : cpToUtf16(entry.display, entry.layout.indexAt(this._goalX, 0)),
+      );
     }
     const goal = this._goalX; // moveCaret clears it; this move keeps it
     this.moveCaret({ line, ch }, extend);
@@ -1604,12 +2833,37 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     if (this._blinkTimer == null) {
       this._blinkTimer = startInterval(() => {
         this._caretOn = !this._caretOn;
-        this.root?.invalidate(false, this.abs, 'text');
+        this._claimCaretRow();
       }, CARET_BLINK_MS);
     }
     this._repaint();
   }
 
+  /** A blink changes the caret and nothing else: claim the text row it
+   *  is on rather than the editor, and `paint` draws that one line. The
+   *  whole row, so a caret x worked out a pixel off still falls inside. */
+  private _claimCaretRow(): void {
+    const content = this._contentRect();
+    const gutterW = this._gutterWidth();
+    const top = content.y + this._caret.line * this._lineH - this._scrollY;
+    const y = Math.max(content.y, Math.floor(top));
+    const bottom = Math.min(
+      content.y + content.height,
+      Math.ceil(top + this._lineH),
+    );
+    if (bottom <= y) return; // scrolled out of view
+    this.invalidate(
+      false,
+      {
+        x: content.x + gutterW,
+        y,
+        width: Math.max(0, content.width - gutterW),
+        height: bottom - y,
+      },
+      'text',
+    );
+  }
+
   handleBlur(): void {
     this._focused = false;
     this.breakUndoRun();
@@ -1625,21 +2879,43 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
     prevProps: Record<string, unknown>,
   ): void {
     const before = prevProps ?? this.props;
+    // the squiggles on screen, before the prop they came from is replaced
+    const shown = this._diagnostics;
     super.applyProps(nextProps, prevProps);
-    if (nextProps.value != null) this._syncProps();
+    if (nextProps.value != null && String(nextProps.value) !== this._synced) {
+      // the rows the new value changed, as an edit claims them
+      const view = this._viewBefore();
+      this._syncProps();
+      this._repaintSince(view, this._lastEdit);
+      this._lastEdit = null;
+    }
     if (nextProps.language !== before.language) {
       this._tokenizer(); // re-resolves against the new props
       this._repaint();
     }
     if (nextProps.rows !== before.rows) this.invalidateMeasure('props');
     if (
-      nextProps.tokenStyles !== before.tokenStyles ||
-      nextProps.diagnostics !== before.diagnostics ||
-      nextProps.tabSize !== before.tabSize ||
-      nextProps.lineNumbers !== before.lineNumbers
+      !sameTokenStyles(
+        nextProps.tokenStyles as TokenStyles | undefined,
+        before.tokenStyles as TokenStyles | undefined,
+      ) ||
+      nextProps.tabSize !== before.tabSize
     ) {
       this._lineCache.clear();
+      this._chunkedStash = null;
       this._repaint();
+    } else if (nextProps.lineNumbers !== before.lineNumbers) {
+      this._repaint(); // every column moves with the gutter; no layout does
+    } else if (
+      !sameDiagnostics(
+        nextProps.diagnostics as readonly Diagnostic[] | undefined,
+        before.diagnostics as readonly Diagnostic[] | undefined,
+      )
+    ) {
+      this._repaintDiagnostics(
+        shown,
+        (nextProps.diagnostics as readonly Diagnostic[] | undefined) ?? [],
+      );
     }
   }
 
@@ -1670,6 +2946,7 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
       stroke?(): void;
       strokeStyle?: unknown;
       lineWidth?: number;
+      lineJoin?: string;
     };
     if (typeof c.fillRect !== 'function') return; // mock backend: geometry only
     const content = this._contentRect();
@@ -1698,13 +2975,49 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
       return true;
     };
     const dark = this._onDark();
+    // What of a line this pass can show, in the line's own x: a band, a
+    // squiggle or a caret is drawn over that and no further. A selection
+    // across a minified line was one rectangle as wide as the line, and past
+    // 32,767 device pixels an X11 coordinate does not fit its 16 bits — the
+    // paint threw, and the window stopped painting.
+    const reachFrom = this._scrollX - 8 * s;
+    const reachTo = this._scrollX + content.width - gutterW + 8 * s;
+    const within = (x0: number, x1: number): [number, number] | null => {
+      const a = Math.max(x0, reachFrom);
+      const b = Math.min(x1, reachTo);
+      return b > a ? [a, b] : null;
+    };
 
-    const first = Math.max(0, Math.floor(this._scrollY / lineH));
-    const last = Math.min(
+    let first = Math.max(0, Math.floor(this._scrollY / lineH));
+    let last = Math.min(
       this._lines.length - 1,
       Math.ceil((this._scrollY + content.height) / lineH),
     );
+    if (this._lineCache.size > LINE_CACHE_MAX) this._trimLineCache(first, last);
+    // Only the lines this pass repaints, and one either side for ink that
+    // overhangs its row: a scroll blit hands over the band it exposed, and
+    // a blink the caret's row. The clip would throw the rest away after
+    // they were laid out and drawn.
+    const damage = this.paintDamage();
+    if (damage) {
+      const from = damage.y - content.y + this._scrollY;
+      first = Math.max(first, Math.floor(from / lineH) - 1);
+      last = Math.min(last, Math.ceil((from + damage.height) / lineH) + 1);
+    }
     const lineY = (i: number): number => content.y + i * lineH - this._scrollY;
+    // A fill as tall as a line, on whole device pixels. A line is as tall as
+    // its face says, a fraction of a pixel, and a backend rounds a fill's
+    // fractional edges its own way: X11 cut a band's top and its height
+    // separately, which left a row of background between two selected lines
+    // every seventh or eighth line — at a row that moved with the scroll, so
+    // a blit copied a seam a repaint did not draw. Edges rounded from the
+    // same arithmetic meet whichever line they are shared by.
+    const fillRow = (i: number, x0: number, x1: number): void => {
+      const left = Math.round(x0);
+      const top = Math.round(lineY(i));
+      const bottom = Math.round(lineY(i + 1));
+      c.fillRect!(left, top, Math.round(x1) - left, bottom - top);
+    };
 
     // Everything the editor draws — gutter included — stays inside the
     // content box. The first and last visible rows are partial when
@@ -1743,12 +3056,7 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
       c.fillStyle =
         this._resolveColor(props.activeLineColor) ??
         (dark ? 'rgba(255,255,255,0.06)' : 'rgba(120,140,180,0.10)');
-      c.fillRect(
-        content.x + gutterW,
-        lineY(this._caret.line),
-        content.width - gutterW,
-        lineH,
-      );
+      fillRow(this._caret.line, content.x + gutterW, content.x + content.width);
     }
 
     // selection bands
@@ -1767,12 +3075,8 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
           i === b.line
             ? this._caretX({ line: i, ch: b.ch })
             : (entry.layout?.width ?? 0) + this._charW * 0.5; // the newline
-        c.fillRect(
-          textX + startX,
-          lineY(i),
-          Math.max(2 * s, endX - startX),
-          lineH,
-        );
+        const band = within(startX, startX + Math.max(2 * s, endX - startX));
+        if (band) fillRow(i, textX + band[0], textX + band[1]);
       }
     }
 
@@ -1787,7 +3091,8 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
           if (pos.line < first || pos.line > last) continue;
           const x0 = this._caretX(pos);
           const x1 = this._caretX({ line: pos.line, ch: pos.ch + 1 });
-          c.fillRect(textX + x0, lineY(pos.line), Math.max(s, x1 - x0), lineH);
+          const box = within(x0, x0 + Math.max(s, x1 - x0));
+          if (box) fillRow(pos.line, textX + box[0], textX + box[1]);
         }
       }
     }
@@ -1815,18 +3120,63 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
         layout.draw(ctx, textX, lineY(0) + (lineH - layout.height) / 2);
       }
     } else {
-      for (let i = first; i <= last; i++) {
-        const entry = this._lineEntry(i);
-        entry.layout?.draw(
-          ctx,
-          textX,
-          lineY(i) + (lineH - (entry.layout.height || lineH)) / 2,
+      // across, what the text region shows of a line, in its own x — and
+      // of that, what this pass repaints, give or take a character of ink
+      // past a glyph's advance: a thumb's strip is a column at the right
+      // edge that most lines never reach
+      let shownFrom = this._scrollX;
+      let shownTo = this._scrollX + content.width - gutterW;
+      if (damage) {
+        shownFrom = Math.max(shownFrom, damage.x - textX - this._charW);
+        shownTo = Math.min(
+          shownTo,
+          damage.x + damage.width - textX + this._charW,
         );
       }
+      for (let i = first; shownFrom < shownTo && i <= last; i++) {
+        const entry = this._lineEntry(i);
+        const layout = entry.layout;
+        if (!layout) continue;
+        // a long line's width past what is laid out is a guess, and one
+        // short of the truth would skip text that is there: its pieces are
+        // placed by laying out the ones before them (`drawSpan`)
+        if (!(layout instanceof ChunkedLayout) && layout.width < shownFrom) {
+          continue;
+        }
+        // Every row's text on the base face's baseline. Centred by its own
+        // height, a line with an emoji in it — laid out taller, in a
+        // fallback face — sat a pixel off every other line.
+        const top = lineY(i);
+        const base = this._baseline;
+        const own = base == null ? null : baselineOf(layout);
+        const y =
+          own == null
+            ? top + (lineH - (layout.height || lineH)) / 2
+            : top + base! - own;
+        // …and a row laid out taller than the base keeps its ink in its
+        // own row: past it, the next row's pixels are ones an edit to this
+        // row does not repaint, and an old descender stayed there
+        const tall =
+          layout.height > lineH + 0.5 &&
+          clipTo(content.x + gutterW, top, content.width - gutterW, lineH);
+        if (layout instanceof ChunkedLayout) {
+          layout.drawSpan(
+            ctx,
+            textX,
+            y,
+            shownFrom,
+            shownTo,
+            base == null ? null : top + base,
+          );
+        } else {
+          layout.draw(ctx, textX, y);
+        }
+        if (tall) c.restore!();
+      }
     }
 
     // diagnostics
-    const diagnostics = props.diagnostics ?? [];
+    const diagnostics = this._currentDiagnostics();
     for (const d of diagnostics) {
       const color = SEVERITY_COLORS[d.severity ?? 'error'] ?? '#e5484d';
       const from = clampPos(this._lines, d.from);
@@ -1847,10 +3197,16 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
         // short text — measure where the drawn layout actually ends
         const entry = this._lineEntry(i);
         const glyphBottom =
-          lineY(i) +
-          (lineH - (entry.layout?.height || lineH)) / 2 +
-          (entry.layout?.height || lineH);
-        const y = Math.min(lineY(i) + lineH - 2 * s, glyphBottom - s);
+          this._baseline != null
+            ? lineY(i) + this._textBottom
+            : lineY(i) +
+              (lineH - (entry.layout?.height || lineH)) / 2 +
+              (entry.layout?.height || lineH);
+        // …and inside its own row: the zigzag is 2px tall and stroked 1px
+        // wide, so it inks half a stroke past its path either way. Ink past
+        // the row's bottom is in the next row's pixels, which an edit to
+        // this row does not repaint — the old squiggle left a speck there.
+        const y = Math.min(lineY(i) + lineH - 2.5 * s, glyphBottom - s);
         const width = Math.max(this._charW * 0.6, x1 - x0);
         if (
           typeof c.beginPath === 'function' &&
@@ -1858,30 +3214,44 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
           typeof c.lineTo === 'function' &&
           typeof c.stroke === 'function'
         ) {
-          c.beginPath();
           // a hairline zig-zag, 4px a step and 2px tall, on the panel's grid
+          // — the steps in reach, each where it would be if all were drawn
           const step = 4 * s;
-          let up = true;
-          for (let x = 0; x <= width; x += step) {
-            const px = textX + x0 + x;
-            const py = y + (up ? 0 : 2 * s);
-            if (x === 0) c.moveTo(px, py);
-            else c.lineTo(px, py);
-            up = !up;
+          const from = Math.max(0, Math.floor((reachFrom - x0) / step));
+          const to = Math.min(
+            Math.floor(width / step),
+            Math.ceil((reachTo - x0) / step),
+          );
+          if (to > from) {
+            c.beginPath();
+            for (let k = from; k <= to; k++) {
+              const px = textX + x0 + k * step;
+              const py = y + (k % 2 === 0 ? 0 : 2 * s);
+              if (k === from) c.moveTo(px, py);
+              else c.lineTo(px, py);
+            }
+            c.strokeStyle = color;
+            c.lineWidth = s;
+            // mitred, the zig-zag's corners reach half a pixel past the
+            // stroke — into the next row, at the bottom ones
+            c.lineJoin = 'round';
+            c.stroke();
           }
-          c.strokeStyle = color;
-          c.lineWidth = s;
-          c.stroke();
         } else {
-          c.fillStyle = color;
-          c.fillRect(textX + x0, y + s, width, s);
+          const line = within(x0, x0 + width);
+          if (line) {
+            c.fillStyle = color;
+            c.fillRect(textX + line[0], y + s, line[1] - line[0], s);
+          }
         }
       }
     }
 
     // caret — 2 logical px, in the (theme-resolved) text colour
-    if (this._focused && this._caretOn) {
-      const x = this._caretX(this._caret);
+    const caretAt =
+      this._focused && this._caretOn ? this._caretX(this._caret) : 0;
+    if (this._focused && this._caretOn && within(caretAt, caretAt + 2 * s)) {
+      const x = caretAt;
       c.fillStyle = this._resolveColor(props.caretColor) ?? baseColor;
       c.fillRect(
         Math.round(textX + x),
@@ -1893,8 +3263,9 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
 
     if (textClip) c.restore!();
 
-    // gutter numbers: inside the content clip, outside the text clip
-    if (gutterW > 0) {
+    // gutter numbers: inside the content clip, outside the text clip — and
+    // not for a pass that lies to the right of them
+    if (gutterW > 0 && !(damage && damage.x >= content.x + gutterW)) {
       const fonts = this._fonts();
       if (fonts) {
         const dim =
@@ -1956,6 +3327,25 @@ export class CodeEditorNode extends Node implements CodeEditorHandle {
         3 * s,
       );
     }
+    // A line this pass laid out wider than the view gives the text a
+    // horizontal thumb, where there was none when the scroll decided what
+    // to blit: the frame repaints the band it exposed and not the strip
+    // the thumb is drawn in, so the strip is claimed for the next one.
+    if (maxX > 0 !== this._thumbAcross) {
+      this._thumbAcross = maxX > 0;
+      if (damage) {
+        this.invalidate(
+          false,
+          {
+            x: content.x,
+            y: content.y + content.height - 4 * s,
+            width: content.width,
+            height: 4 * s,
+          },
+          'scroll',
+        );
+      }
+    }
 
     if (outerClip) c.restore!();
   }