@react-x11/components 0.9.0 → 0.10.0

package/dist/code-editor/node.js

@@ -35,6 +35,7 @@
 import { CARET_BLINK_MS, Node } from 'react-x11/node';
 import { ctrlChordLetter, XK_BACKSPACE, XK_DELETE, XK_DOWN, XK_END, XK_ESCAPE, XK_HOME, XK_KP_ENTER, XK_LEFT, XK_PAGE_DOWN, XK_PAGE_UP, XK_RETURN, XK_RIGHT, XK_TAB, XK_UP, } from 'react-x11/keysyms';
 import { startInterval, stopInterval } from '../code-language/timers.js';
+import { spliceAll } from '../internal/splice.js';
 import { clampPos, comparePos, maxPos, minPos, movePos, posEqual, tabMap, wordBoundary, wordRangeAt, } from './doc.js';
 import { DARK_TOKEN_STYLES, isDarkBackground, LIGHT_TOKEN_STYLES, tokenStyleFor, } from '../code-language/theme.js';
 /**
@@ -69,6 +70,54 @@ const SEVERITY_COLORS = {
     information: '#3b82f6',
     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, b) {
+    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[k];
+        const y = b[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, b) {
+    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, cp) {
     let i = 0;
     for (let n = 0; n < cp && i < text.length; n++) {
@@ -86,10 +135,268 @@ function utf16ToCp(text, index) {
     }
     return cp;
 }
+/** 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 = 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) {
+    const lines = layout
+        .lines;
+    const b = lines?.[0]?.baseline;
+    return typeof b === 'number' && Number.isFinite(b) ? b : null;
+}
+/**
+ * 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, text) {
+    const end = layout.caretPosition(utf16ToCp(text, text.length)).x;
+    return Math.max(layout.width, end);
+}
+class ChunkedLayout {
+    chunks;
+    _layOut;
+    _grew;
+    /**
+     * 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`).
+     */
+    _laid = 0;
+    constructor(
+    /** The pieces, in order, and never empty. */
+    chunks, 
+    /** A piece's layout, from its spans. */
+    _layOut, 
+    /** Told the line's width when laying out more of it changed it. */
+    _grew = () => { }) {
+        this.chunks = chunks;
+        this._layOut = _layOut;
+        this._grew = _grew;
+        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() {
+        // 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() {
+        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. */
+    _layOutThrough(k) {
+        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. */
+    _pieceAt(at, key) {
+        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];
+    }
+    caretPosition(cp) {
+        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, y) {
+        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) {
+        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, y) {
+        const piece = this._pieceAt(x, 'x');
+        const cp = piece.layout.indexAt(x - piece.x, y);
+        return piece.u16 + cpToUtf16(piece.text, cp);
+    }
+    draw(ctx, x, y) {
+        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, x, y, from, to, baseline = 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];
+            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, from = 0) {
+    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, breaks) {
+    const pieces = [];
+    let piece = [];
+    let at = 0;
+    let next = 1;
+    for (const span of spans) {
+        let text = span.text;
+        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 {
     _lines;
     /** What `_lines` was last built from — how a controlled `value` that the
-     * parent refused to update snaps back on the next read (see `_syncProps`). */
+     * 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. */
     _synced;
     _caret = { line: 0, ch: 0 };
     _anchor = { line: 0, ch: 0 };
@@ -98,15 +405,25 @@ export class CodeEditorNode extends Node {
     _focused = false;
     _caretOn = false;
     _blinkTimer = null;
+    /** Whether the last paint drew a horizontal thumb — see `paint`. */
+    _thumbAcross = false;
     _goalX = null;
     _drag = null;
     _dragOrigin = { 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`). */
     _tabEscapes = false;
-    _history;
+    /** The steps, oldest first; `_historyIndex` of them are applied. */
+    _history = [];
     _historyIndex = 0;
     _undoRun = 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. */
+    _diagnostics = [];
+    _diagnosticsFrom = undefined;
+    _lastEdit = null;
     _pendingValue = null;
     _keyNative = null;
     _tok = null;
@@ -115,6 +432,12 @@ export class CodeEditorNode extends Node {
     _metricsKey = '';
     _lineH = 0;
     _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`). */
+    _baseline = null;
+    _textBottom = 0;
     _widest = 0;
     constructor(props, app) {
         super(ELEMENT, props, app);
@@ -125,9 +448,6 @@ export class CodeEditorNode extends Node {
                 : '';
         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.
@@ -172,9 +492,10 @@ export class CodeEditorNode extends Node {
         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() {
         return this.props.name;
@@ -203,16 +524,28 @@ export class CodeEditorNode extends Node {
         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.
+     */
     _setText(text) {
-        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 -----------------------------------------------------------
     _tokenizer() {
@@ -225,7 +558,7 @@ export class CodeEditorNode extends Node {
                     invalidate: (fromLine) => {
                         for (const key of this._lineCache.keys()) {
                             if (key >= fromLine)
-                                this._lineCache.delete(key);
+                                this._dropLine(key);
                         }
                         this._repaint();
                     },
@@ -233,6 +566,7 @@ export class CodeEditorNode extends Node {
                 : null;
             this._tok?.setLines(this._lines);
             this._lineCache.clear();
+            this._chunkedStash = null;
         }
         return this._tok;
     }
@@ -298,6 +632,13 @@ export class CodeEditorNode extends Node {
         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
+            .lines?.[0];
+        this._textBottom =
+            this._baseline != null && typeof line?.descent === 'number'
+                ? this._baseline + line.descent
+                : this._lineH;
     }
     _lineHeight() {
         this._metrics();
@@ -369,16 +710,20 @@ export class CodeEditorNode extends Node {
     }
     _lineEntry(line) {
         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 = null;
@@ -413,9 +758,23 @@ export class CodeEditorNode extends Node {
             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 = {
+            raw,
+            tabSize,
             display: map.display,
             tokens,
             styleKey,
@@ -427,12 +786,167 @@ export class CodeEditorNode extends Node {
             this._widest = layout.width;
         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.
+     */
+    _chunkLayouts = new Map();
+    /** 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. */
+    _chunkedStash = 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. */
+    _dropLine(line) {
+        const entry = this._lineCache.get(line);
+        if (entry?.layout instanceof ChunkedLayout) {
+            this._chunkedStash = { styleKey: entry.styleKey, layout: entry.layout };
+        }
+        this._lineCache.delete(line);
+    }
+    _chunkedLayout(fonts, base, styleKey, display, spans, previous) {
+        const chunks = [];
+        // 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.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.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).join('');
+            const runs = [];
+            for (const sp of piece) {
+                runs.push(sp.text.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`). */
+    _pieceLayout(fonts, base, styleKey, piece) {
+        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. */
     _caretX(pos) {
         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;
     }
     /** Window coordinates, device pixels → document position. */
@@ -444,8 +958,10 @@ export class CodeEditorNode extends Node {
         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) });
     }
     /** Font facts the completion popup sizes itself with — logical pixels,
@@ -495,20 +1011,24 @@ export class CodeEditorNode extends Node {
         };
     }
     // --- 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`).
     _maxScrollY() {
         const content = this._contentRect();
-        return Math.max(0, this._lines.length * this._lineHeight() - content.height);
+        return Math.max(0, Math.ceil(this._lines.length * this._lineHeight() - content.height));
     }
     _maxScrollX() {
         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) {
-        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
      * the unit it writes its styles in. Returns true when the offset moved
@@ -523,9 +1043,78 @@ export class CodeEditorNode extends Node {
         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.
+     */
+    _scrollRegion(sideways) {
+        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.
+     */
+    _blitScroll(shiftX, shiftY, pinned = null) {
+        if ((shiftX !== 0) === (shiftY !== 0))
+            return false;
+        if (!Number.isInteger(shiftX) || !Number.isInteger(shiftY))
+            return false;
+        if (this.style.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;
     }
     _ensureCaretVisible() {
@@ -533,19 +1122,19 @@ export class CodeEditorNode extends Node {
         const content = this._contentRect();
         const lineTop = this._caret.line * this._lineH;
         if (lineTop < this._scrollY)
-            this._scrollY = lineTop;
+            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);
@@ -569,12 +1158,14 @@ export class CodeEditorNode extends Node {
         };
         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. */
     _fire(prop, value) {
         const handler = this.props[prop];
         if (!handler)
             return;
         const previous = this._pendingValue;
-        this._pendingValue = value;
+        this._pendingValue = typeof value === 'function' ? value() : value;
         try {
             handler(this._makeEvent(prop === 'onSubmit'
                 ? 'submit'
@@ -590,22 +1181,297 @@ export class CodeEditorNode extends Node {
         this._caretOn = true;
         this.root?.invalidate(false, this.abs, 'text');
     }
-    // --- history -------------------------------------------------------------
-    _noteExternal() {
-        this._undoRun = null;
-        const value = this._lines.join('\n');
-        const top = this._history[this._historyIndex];
-        if (top && top.value === value)
+    /** What an edit or a caret move can change on screen, read before it. */
+    _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(),
+        };
+    }
+    /**
+     * 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).
+     */
+    _rowBands(rows) {
+        const content = this._contentRect();
+        const lineH = this._lineH;
+        const spill = 2 * this._scale;
+        const bands = [];
+        const band = (from, to) => {
+            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 = 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. */
+    _repaintDiagnostics(before, after) {
+        const content = this._contentRect();
+        const lineH = this._lineH;
+        if (!this.root || content.width <= 0 || !(lineH > 0))
             return;
-        this._pushHistory({ value, caret: this._caret, anchor: this._anchor });
+        const first = Math.floor(this._scrollY / lineH);
+        const bottom = Math.ceil((this._scrollY + content.height) / lineH);
+        const rows = [];
+        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');
+        }
     }
-    _pushHistory(entry) {
-        this._history.length = this._historyIndex + 1;
-        this._history.push(entry);
+    /**
+     * 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.
+     */
+    _repaintSince(before, edit) {
+        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 = [];
+        const add = (from, to) => {
+            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');
+        }
+    }
+    // --- 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.
+     */
+    _record(from, removed, lines, run, caret, anchor) {
+        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() {
         this._undoRun = null;
@@ -613,30 +1479,135 @@ export class CodeEditorNode extends Node {
     get canUndo() {
         return this._historyIndex > 0;
     }
+    get diagnostics() {
+        return this._currentDiagnostics();
+    }
+    _currentDiagnostics() {
+        const prop = this.props.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.
+     */
+    _mapDiagnostics(from, removed, lines) {
+        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 = [];
+        for (let i = 0, at = 0; i < removed; i++) {
+            starts.push(at);
+            at += this._lines[from + i].length + 1;
+        }
+        const move = (p, far) => {
+            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;
+            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 = [];
+        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() {
-        return this._historyIndex < this._history.length - 1;
+        return this._historyIndex < this._history.length;
     }
     undo() {
         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() {
         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);
     }
-    _applyHistory(entry) {
+    _applyStep(from, removed, lines, selection) {
+        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 --------------------------------------------------------
     _selectionRange() {
@@ -671,6 +1642,7 @@ export class CodeEditorNode extends Node {
         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');
@@ -680,70 +1652,123 @@ export class CodeEditorNode extends Node {
         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;
-        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 });
+        this._afterEdit(view);
+    }
+    /**
+     * 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.
+     */
+    _edit(from, removed, lines, run, caret, anchor) {
+        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);
     }
-    _applyLines(newLines, edit) {
-        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));
+    /**
+     * `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.
+     */
+    _replaceLines(from, removed, lines) {
+        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;
         }
-        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);
+    }
+    /** Let go of the line entries farther than a quarter of the cache from
+     *  the lines in view — see `LINE_CACHE_MAX`. */
+    _trimLineCache(first, last) {
+        const reach = LINE_CACHE_MAX / 4;
+        for (const line of this._lineCache.keys()) {
+            if (line < first - reach || line > last + reach) {
+                this._lineCache.delete(line);
             }
-            if (edit.removed !== edit.inserted)
-                this._lineCache.clear();
         }
-        else {
-            tok?.setLines(this._lines);
-            this._lineCache.clear();
+    }
+    /**
+     * 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.
+     */
+    _moveLineCache(edit) {
+        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();
+        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 };
+            }
         }
+        this._lineCache = moved;
     }
-    _afterEdit(value) {
-        this._synced = value;
+    _afterEdit(before) {
+        // 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 = null;
+        const value = () => (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);
     }
@@ -754,21 +1779,23 @@ export class CodeEditorNode extends Node {
     moveCaret(pos, extend) {
         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, head) {
         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
     // narrowing it to void stops being structurally a DrawnNode.
@@ -875,19 +1902,13 @@ export class CodeEditorNode extends Node {
     /** Line-rewriting commands share this: one undo step, selection kept on
      * the same lines (clamped to their new lengths). */
     _replaceAllPreservingSelection(newLines, fromLine, toLine) {
-        const caret = this._caret;
-        const anchor = this._anchor;
-        this._applyLines(newLines, {
-            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);
+        const view = this._viewBefore();
+        const caret = clampPos(newLines, this._caret);
+        const anchor = clampPos(newLines, this._anchor);
+        this._edit(fromLine, toLine - fromLine + 1, newLines.slice(fromLine, toLine + 1), null, caret, anchor);
+        this._caret = caret;
+        this._anchor = anchor;
+        this._afterEdit(view);
     }
     // --- input: keyboard -----------------------------------------------------
     /**
@@ -1139,8 +2160,9 @@ export class CodeEditorNode extends Node {
         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);
@@ -1271,11 +2293,29 @@ export class CodeEditorNode extends Node {
         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. */
+    _claimCaretRow() {
+        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() {
         this._focused = false;
         this.breakUndoRun();
@@ -1286,22 +2326,34 @@ export class CodeEditorNode extends Node {
     // --- lifecycle -----------------------------------------------------------
     applyProps(nextProps, prevProps) {
         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)
+        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) {
+        if (!sameTokenStyles(nextProps.tokenStyles, before.tokenStyles) ||
+            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, before.diagnostics)) {
+            this._repaintDiagnostics(shown, nextProps.diagnostics ?? []);
+        }
     }
     destroySubtree() {
         stopInterval(this._blinkTimer);
@@ -1344,9 +2396,46 @@ export class CodeEditorNode extends Node {
             return true;
         };
         const dark = this._onDark();
-        const first = Math.max(0, Math.floor(this._scrollY / lineH));
-        const last = Math.min(this._lines.length - 1, Math.ceil((this._scrollY + content.height) / lineH));
+        // 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, x1) => {
+            const a = Math.max(x0, reachFrom);
+            const b = Math.min(x1, reachTo);
+            return b > a ? [a, b] : null;
+        };
+        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) => 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, x0, x1) => {
+            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
         // scrolled, and without this their overhang (up to a line each way)
@@ -1369,7 +2458,7 @@ export class CodeEditorNode extends Node {
             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
         if (this._hasSelection()) {
@@ -1385,7 +2474,9 @@ export class CodeEditorNode extends Node {
                 const endX = 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]);
             }
         }
         // matching brackets
@@ -1400,7 +2491,9 @@ export class CodeEditorNode extends Node {
                         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]);
                 }
             }
         }
@@ -1423,13 +2516,53 @@ export class CodeEditorNode extends Node {
             }
         }
         else {
-            for (let i = first; i <= last; i++) {
+            // 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);
-                entry.layout?.draw(ctx, textX, lineY(i) + (lineH - (entry.layout.height || lineH)) / 2);
+                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);
@@ -1444,48 +2577,65 @@ export class CodeEditorNode extends Node {
                 // band, so a squiggle at the band's bottom floats visibly below
                 // 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);
+                const glyphBottom = 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' &&
                     typeof c.moveTo === 'function' &&
                     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), lineY(this._caret.line) + s, 2 * s, lineH - 2 * s);
         }
         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 = this._resolveColor(props.gutterColor) ??
@@ -1522,6 +2672,21 @@ export class CodeEditorNode extends Node {
             c.fillStyle = 'rgba(128,128,128,0.35)';
             c.fillRect(content.x + gutterW + xOff, content.y + content.height - 4 * s, thumbW, 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();
     }