@adecore/editor 0.22.0 → 0.23.0

package/src/view.ts

@@ -1,3 +1,5 @@
+import { offsetOfStop, xOfStop } from './geometry-stops.ts';
+import { visibleBidi } from './bidi.ts';
 import {
     type DocumentChange,
     type DocumentModel,
@@ -11,13 +13,26 @@ import {
     type BracketIndex,
     type Selection as EditorSelection
 } from '@adecore/editor-core';
+import { createSearchClient, type EditorSearchClientOptions } from './search-client.ts';
 import { FindController } from './find.ts';
-import { type BlockWidget, EditorLayout, type FoldState, type Inlay, type LayoutRect, type LayoutRow, RIGHT_PADDING, type TextRow } from './layout.ts';
+import {
+    type BlockReplacement,
+    type BlockWidget,
+    EditorLayout,
+    type FoldState,
+    type Inlay,
+    type LayoutRect,
+    type LayoutRow,
+    RIGHT_PADDING,
+    type TextRow,
+    subRowBand,
+    type VerticalWindow
+} from './layout.ts';
 import { createMetrics, type EditorFont, readEditorFont } from './metrics.ts';
 import { type AttributedLines, AttributionRuns, colorValue, tintValue } from './attribution.ts';
 import { renderCodeBlock } from './code-block.ts';
 import { emit, subscribe } from './listeners.ts';
-import { mapOffset } from './offsets.ts';
+import { mapOffset, offsetMapper } from './offsets.ts';
 import { mapTrackedRange } from './tracked-range.ts';
 import { type ScrollKind, scrollPosition } from './scroll.ts';
 import { easeOut, scrollDuration } from './scroll-animation.ts';
@@ -46,11 +61,15 @@ import type {
     EditorFindQuery,
     EditorFindState,
     EditorHighlightKind,
+    EditorInputPopup,
+    EditorLineHighlight,
+    EditorGutterIcon,
     EditorMarkerSeverity,
     EditorMessages,
     EditorRect,
     EditorSmartKeys,
     LineToken,
+    LineTokenKind,
     LineTokenizer,
     ScopeColors
 } from './types.ts';
@@ -59,23 +78,24 @@ function sameRect(left: EditorRect, right: EditorRect): boolean {
     return left.left === right.left && left.top === right.top && left.right === right.right && left.bottom === right.bottom;
 }
 
-function mapRange<Range extends { from: number; to: number }>(range: Range, changes: readonly DocumentChange[]): Range {
-    return { ...range, from: mapOffset(range.from, changes), to: mapOffset(range.to, changes) };
+function mapRange<Range extends { from: number; to: number }>(range: Range, map: (offset: number) => number): Range {
+    return { ...range, from: map(range.from), to: map(range.to) };
 }
 
-function mapFoldHints(hints: FoldHints, changes: readonly DocumentChange[]): FoldHints {
+function mapFoldHints(hints: FoldHints, map: (offset: number) => number): FoldHints {
     return {
-        symbols: hints.symbols?.map((hint) => mapRange(hint, changes)) ?? [],
+        symbols: hints.symbols?.map((hint) => mapRange(hint, map)) ?? [],
         ranges:
             hints.ranges?.map((hint) => ({
-                ...mapRange(hint, changes),
-                ...(hint.head === undefined ? {} : { head: mapOffset(hint.head, changes) }),
-                ...(hint.tail === undefined ? {} : { tail: mapOffset(hint.tail, changes) })
+                ...mapRange(hint, map),
+                ...(hint.head === undefined ? {} : { head: map(hint.head) }),
+                ...(hint.tail === undefined ? {} : { tail: map(hint.tail) })
             })) ?? []
     };
 }
 
 export interface ViewSettings {
+    searchWorker?: EditorSearchClientOptions['workerFactory'];
     language: string | undefined;
     tabSize: number;
     insertSpaces: boolean;
@@ -93,6 +113,7 @@ export interface ViewSettings {
     rightMargin: number | null;
     /* When the arrow that folds a block shows in the gutter. */
     foldOutline: 'off' | 'hover' | 'always';
+    folding?: boolean;
 }
 
 /* The lines past the visible ones that are colored ahead of the scroll, and how long one slice of that work may take. */
@@ -142,9 +163,18 @@ export interface ViewSemanticToken {
     from: number;
     to: number;
     scopes: readonly string[];
+    within?: LineTokenKind;
 }
 
 /* A problem the host marked, anchored to offsets that follow the text through edits. */
+export interface GutterMarker {
+    id: string;
+    line: number;
+    label: string;
+    icon?: EditorGutterIcon;
+    pressed?: boolean;
+}
+
 export interface ViewMarker {
     severity: EditorMarkerSeverity;
     from: number;
@@ -176,6 +206,7 @@ export class EditorView {
     private readonly preview: HTMLElement;
     private readonly signs: HTMLElement;
     private readonly notice: HTMLElement;
+    private readonly live: HTMLElement;
     private readonly sticky: HTMLElement;
     private readonly overview: HTMLElement;
     private readonly tickTip: HTMLElement;
@@ -187,10 +218,17 @@ export class EditorView {
     private readonly findListeners = new Set<(state: EditorFindState) => void>();
     private readonly scopeListeners = new Set<(scope: readonly EditorBlock[]) => void>();
     private readonly viewListeners = new Set<() => void>();
+    private readonly lineHeightListeners = new Set<() => void>();
+    private announcedLineHeights = -1;
     private readonly gutterActionListeners = new Set<(line: number) => void>();
     private gutterAction: { line: number; label: string } | null = null;
     private readonly gutterMarkerListeners = new Set<(id: string) => void>();
-    private readonly gutterMarkers = new Map<string, readonly { id: string; line: number; label: string }[]>();
+    private readonly gutterMarkers = new Map<string, readonly GutterMarker[]>();
+    private lineTokenProvider: ((line: number) => readonly LineToken[] | null | undefined) | null = null;
+    private lineNumberProvider: ((line: number) => string | null) | null = null;
+    private lineNumberLabels: (string | null)[] = [];
+    private lineNumberRevision = -1;
+    private lineNumberWidth = 0;
     private semantic: ViewSemanticToken[] = [];
     private scopeColors: ScopeColors | null = null;
     private semanticVersion = 0;
@@ -204,8 +242,13 @@ export class EditorView {
     private readonly outline = new Outline();
     private stickyEntries: StickyEntry[] = [];
     private scopeKey = '';
-    private changeMarks: { kind: EditorChangeKind; from: number; to: number }[] = [];
+    private readonly changeLayers = new Map<string, { kind: EditorChangeKind; from: number; to: number }[]>();
     private changeVersion = 0;
+    private changeCache: {
+        version: number;
+        lines: Map<number, EditorChangeKind>;
+        runs: { kind: EditorChangeKind; start: number; end: number }[];
+    } | null = null;
     private readonly attribution = new AttributionRuns();
     private readonly highlights = new AttributionRuns();
     private remoteCarets: { id: string; name: string; color: string; at: number }[] = [];
@@ -231,9 +274,14 @@ export class EditorView {
     private frameGeometry: { top: number; left: number; width: number; height: number } | null = null;
     private disposed = false;
     private inlays: Inlay[] = [];
+    private readonly inlayHoverListeners = new Set<(target: { id: string; part: number | null; rect: EditorRect } | null) => void>();
+    private inlayHover: { id: string; part: number | null } | null = null;
+    private inlayLink: { id: string; part: number | null } | null = null;
+    private inlayLinkElement: HTMLElement | null = null;
     /* The host's widgets by owner, so one owner setting its rows never takes another's away. */
     private readonly blocks = new Map<string, BlockWidget[]>();
     private lenses: BlockWidget[] = [];
+    private readonly replacements = new Map<string, BlockReplacement[]>();
     private occurrences: Occurrence[] = [];
     private replacePreview: { text: string; preserveCase: boolean } | null = null;
     private dropCaret: number | null = null;
@@ -260,6 +308,8 @@ export class EditorView {
     private foldTimer: ReturnType<typeof setTimeout> | undefined;
     private colorTimer: ReturnType<typeof setTimeout> | undefined;
     private noticeTimer: ReturnType<typeof setTimeout> | undefined;
+    private liveTimer: ReturnType<typeof setTimeout> | undefined;
+    private lineLabelProvider: ((line: number) => string | null) | null = null;
     private bracketCache: { revision: number; language: string | undefined; index: BracketIndex } | undefined;
     private wrapWidth: number | null = null;
     /* The offset a click past the end of a wrapped visual line chose, which its caret is drawn at the end of that line for. */
@@ -316,6 +366,8 @@ export class EditorView {
         for (const name of ['autocapitalize', 'autocomplete', 'autocorrect']) {
             this.input.setAttribute(name, 'off');
         }
+        this.input.setAttribute('enterkeyhint', 'enter');
+        this.input.setAttribute('inputmode', 'text');
         this.input.setAttribute('aria-multiline', 'true');
         this.sticky.setAttribute('aria-hidden', 'true');
         this.sticky.hidden = true;
@@ -326,14 +378,31 @@ export class EditorView {
         this.notice = make('div', 'se-notice');
         this.notice.setAttribute('role', 'status');
         this.notice.hidden = true;
-        this.root.append(this.viewport, this.overview, this.tickTip, this.input, this.notice);
+        this.live = make('div', 'se-live');
+        this.live.setAttribute('role', 'status');
+        this.live.setAttribute('aria-live', 'polite');
+        this.live.setAttribute('aria-atomic', 'true');
+        this.root.append(this.viewport, this.overview, this.tickTip, this.input, this.notice, this.live);
         this.wireOverview();
         this.wireAttribution();
         container.append(this.root);
 
         this.font = readEditorFont(this.root);
         this.layout = new EditorLayout(model, createMetrics(this.font, settings.tabSize, document));
-        this.find = new FindController(model);
+        this.find = new FindController(model, {
+            createClient: () => (settings.searchWorker === undefined ? null : createSearchClient({ workerFactory: settings.searchWorker })),
+            changed: (reveal) => {
+                if (this.disposed) {
+                    return;
+                }
+                this.announceFind();
+                if (reveal) {
+                    this.revealFind();
+                }
+                this.paintPreview();
+                this.requestRender();
+            }
+        });
         this.tokens = new TokenCache({ getLineCount: () => model.getLineCount(), getLineText: (line) => model.getLine(line).text });
         const ResizeObserverClass = document.defaultView?.ResizeObserver;
         this.blockObserver = ResizeObserverClass
@@ -371,6 +440,11 @@ export class EditorView {
         this.render();
     }
 
+    /* Words the gutter draws changed, not a metric: the lines keep their layout. */
+    repaint(): void {
+        this.render();
+    }
+
     refreshFont(): void {
         this.font = readEditorFont(this.root);
         this.applySettings();
@@ -382,8 +456,37 @@ export class EditorView {
         this.render();
     }
 
+    grammarChanged(): void {
+        if (!this.disposed && this.lineTokenProvider === null && this.tokens.revalidate()) {
+            this.colorAhead(true);
+        }
+    }
+
+    setLineTokens(tokens: ((line: number) => readonly LineToken[] | null | undefined) | null): void {
+        this.lineTokenProvider = tokens;
+        clearTimeout(this.colorTimer);
+        this.semanticLines.clear();
+        this.layoutVersion++;
+        this.render();
+    }
+
+    setLineNumbers(labels: ((line: number) => string | null) | null): void {
+        this.lineNumberProvider = labels;
+        this.lineNumberRevision = -1;
+        this.stickyEntries = [];
+        this.render();
+    }
+
+    private lineNumberLabel(line: number): string | null {
+        return this.lineNumberProvider === null ? String(line + 1) : (this.lineNumberLabels[line] ?? null);
+    }
+
     setInlays(inlays: readonly Inlay[]): void {
-        this.inlays = inlays.map((inlay) => ({ ...inlay, text: inlay.text.replace(/[\r\n]/g, ' ') }));
+        this.inlays = inlays.map((inlay) => ({
+            ...inlay,
+            text: inlay.text.replace(/[\r\n]/g, ' '),
+            ...(inlay.parts === undefined ? {} : { parts: inlay.parts.map((part) => part.replace(/[\r\n]/g, ' ')) })
+        }));
         this.configureText();
     }
 
@@ -397,6 +500,24 @@ export class EditorView {
         this.render();
     }
 
+    /* Lines the host draws as a row of its own, by owner; where two owners claim the same line the owner that sorts first keeps it. */
+    setReplacements(owner: string, replacements: readonly BlockReplacement[]): void {
+        if (replacements.length === 0 && !this.replacements.has(owner)) {
+            return;
+        }
+        if (replacements.length === 0) {
+            this.replacements.delete(owner);
+        } else {
+            this.replacements.set(owner, [...replacements]);
+        }
+        this.anchorScroll(() => this.layout.configure({ replacements: this.allReplacements() }));
+        this.render();
+    }
+
+    private allReplacements(): BlockReplacement[] {
+        return [...this.replacements.keys()].sort().flatMap((owner) => this.replacements.get(owner)!);
+    }
+
     /* The quiet rows above declarations: kept apart from the host's widgets, so setting one kind never takes the other away. */
     setLenses(lenses: readonly BlockWidget[]): void {
         this.lenses = [...lenses];
@@ -442,7 +563,7 @@ export class EditorView {
 
     /* The grammar's colors of a line with the servers' laid over them, the same object for as long as neither changed. */
     private styledTokensOf(line: number): readonly LineToken[] | null {
-        const base = this.tokens.tokensOf(line);
+        const base = this.lineTokenProvider === null ? this.tokens.tokensOf(line) : (this.lineTokenProvider(line) ?? null);
         if (base === null || this.semantic.length === 0 || this.scopeColors === null) {
             return base;
         }
@@ -450,7 +571,7 @@ export class EditorView {
         if (spans === undefined) {
             return base;
         }
-        const signature = spans.map((span) => `${span.from}:${span.to}:${span.color}:${span.fontStyle}`).join('|');
+        const signature = spans.map((span) => `${span.from}:${span.to}:${span.color}:${span.fontStyle}:${span.within ?? ''}`).join('|');
         const cached = this.semanticLines.get(line);
         if (cached?.base === base && cached.signature === signature) {
             return cached.result;
@@ -482,7 +603,7 @@ export class EditorView {
                 continue;
             }
             const list = lines.get(line) ?? [];
-            list.push({ from: token.from - start, to: token.to - start, color: style.color, fontStyle: style.fontStyle });
+            list.push({ from: token.from - start, to: token.to - start, color: style.color, fontStyle: style.fontStyle, within: token.within });
             lines.set(line, list);
         }
         for (const list of lines.values()) {
@@ -513,6 +634,45 @@ export class EditorView {
         }, NOTICE_MS);
     }
 
+    private foldName(line: number, collapsed: boolean): string {
+        const template =
+            (collapsed ? this.settings.messages.unfold : this.settings.messages.fold) ??
+            (collapsed ? 'Unfold lines {start} to {end}' : 'Fold lines {start} to {end}');
+        const end = this.foldAt(line)?.endLine ?? line;
+        return template.replace('{start}', String(line + 1)).replace('{end}', String(end + 1));
+    }
+
+    /* A new child each time, since a region only speaks what is added to it and a repeated sentence would otherwise stay silent. */
+    announce(message: string): void {
+        const sentence = this.document.createElement('span');
+        sentence.textContent = message;
+        this.live.replaceChildren(sentence);
+        clearTimeout(this.liveTimer);
+        this.liveTimer = setTimeout(() => this.live.replaceChildren(), NOTICE_MS);
+    }
+
+    setInputPopup(popup: EditorInputPopup | null): void {
+        if (popup === null) {
+            for (const name of ['aria-expanded', 'aria-controls', 'aria-autocomplete', 'aria-activedescendant']) {
+                this.input.removeAttribute(name);
+            }
+            return;
+        }
+        this.input.setAttribute('aria-expanded', 'true');
+        this.input.setAttribute('aria-autocomplete', 'list');
+        this.input.setAttribute('aria-controls', popup.controls);
+        if (popup.activeDescendant === undefined) {
+            this.input.removeAttribute('aria-activedescendant');
+        } else {
+            this.input.setAttribute('aria-activedescendant', popup.activeDescendant);
+        }
+    }
+
+    setLineLabels(labels: ((line: number) => string | null) | null): void {
+        this.lineLabelProvider = labels;
+        this.render();
+    }
+
     get gutterElement(): HTMLElement {
         return this.gutter;
     }
@@ -529,6 +689,10 @@ export class EditorView {
         return this.document.activeElement === this.input;
     }
 
+    get contentHeight(): number {
+        return this.layout.height + Math.max(0, (this.viewport.offsetHeight ?? 0) - (this.viewport.clientHeight ?? 0));
+    }
+
     get viewportHeight(): number {
         return this.clientHeight || DEFAULT_HEIGHT;
     }
@@ -585,7 +749,14 @@ export class EditorView {
             this.outline.edited(batches);
             this.changeVersion++;
             this.tokens.edited(batches, (offset) => this.model.positionAt(offset).line);
-            this.layout.configure({ textChanged: true, inlays: this.displayedInlays(), blocks: this.allBlocks(), folds: this.foldStates() });
+            this.layout.configure({
+                textChanged: true,
+                changes: batches,
+                inlays: this.displayedInlays(),
+                blocks: this.allBlocks(),
+                folds: this.foldStates(),
+                replacements: this.allReplacements()
+            });
             if (anchor && this.viewport.scrollTop > 0) {
                 let offset = anchor.offset;
                 for (const changes of batches) {
@@ -606,34 +777,46 @@ export class EditorView {
 
     /* Moves everything anchored to an offset along with one batch of changes. */
     private followEdit(changes: readonly DocumentChange[]): void {
-        this.inlays = this.inlays.map((inlay) => ({ ...inlay, at: mapOffset(inlay.at, changes) }));
+        const map = offsetMapper(changes);
+        this.inlays = this.inlays.map((inlay) => ({ ...inlay, at: map(inlay.at) }));
         for (const [owner, blocks] of this.blocks) {
             this.blocks.set(
                 owner,
-                blocks.map((block) => ({ ...block, at: mapOffset(block.at, changes) }))
+                blocks.map((block) => ({ ...block, at: map(block.at) }))
             );
         }
-        this.lenses = this.lenses.map((lens) => ({ ...lens, at: mapOffset(lens.at, changes) }));
-        this.collapsed = new Set([...this.collapsed].map((anchor) => mapOffset(anchor, changes)));
-        this.settled = new Set([...this.settled].map((anchor) => mapOffset(anchor, changes)));
+        this.lenses = this.lenses.map((lens) => ({ ...lens, at: map(lens.at) }));
+        for (const [owner, entries] of this.replacements) {
+            this.replacements.set(
+                owner,
+                entries.map((entry) => ({ ...entry, from: map(entry.from), to: map(entry.to) }))
+            );
+        }
+        this.collapsed = new Set([...this.collapsed].map((anchor) => map(anchor)));
+        this.settled = new Set([...this.settled].map((anchor) => map(anchor)));
         if (this.foldHints !== null) {
-            this.foldHints = mapFoldHints(this.foldHints, changes);
+            this.foldHints = mapFoldHints(this.foldHints, map);
         }
-        this.customFolds = this.customFolds.map((fold) => mapRange(fold, changes));
+        this.customFolds = this.customFolds.map((fold) => mapRange(fold, map));
         this.find.mapBounds(changes);
-        this.changeMarks = this.changeMarks.map((mark) => mapRange(mark, changes));
-        this.markers = this.markers.map((marker) => mapRange(marker, changes));
+        for (const [layer, marks] of this.changeLayers) {
+            this.changeLayers.set(
+                layer,
+                marks.map((mark) => mapRange(mark, map))
+            );
+        }
+        this.markers = this.markers.map((marker) => mapRange(marker, map));
         this.mapTracked(changes);
-        this.attribution.map(changes);
-        this.highlights.map(changes);
-        this.remoteCarets = this.remoteCarets.map((caret) => ({ ...caret, at: mapOffset(caret.at, changes) }));
+        this.attribution.map(changes, map);
+        this.highlights.map(changes, map);
+        this.remoteCarets = this.remoteCarets.map((caret) => ({ ...caret, at: map(caret.at) }));
         for (const [owner, entries] of this.lineActions) {
             this.lineActions.set(
                 owner,
-                entries.map((entry) => ({ ...entry, at: mapOffset(entry.at, changes) }))
+                entries.map((entry) => ({ ...entry, at: map(entry.at) }))
             );
         }
-        this.semantic = this.semantic.map((token) => mapRange(token, changes));
+        this.semantic = this.semantic.map((token) => mapRange(token, map));
     }
 
     private mapTracked(changes: readonly DocumentChange[]): void {
@@ -664,13 +847,14 @@ export class EditorView {
 
     /* The ranges follow the text until the next read of the document, so a fold above an edit stays closed meanwhile. */
     private mappedFolds(batches: readonly (readonly DocumentChange[])[]): ViewFold[] {
+        const mappers = batches.map(offsetMapper);
         const mapped: ViewFold[] = [];
         for (const range of this.foldRanges) {
             let from = range.from;
             let to = range.to;
-            for (const changes of batches) {
-                from = mapOffset(from, changes);
-                to = mapOffset(to, changes);
+            for (const map of mappers) {
+                from = map(from);
+                to = map(to);
             }
             const startLine = this.model.positionAt(from).line;
             const endLine = this.model.positionAt(to).line;
@@ -712,7 +896,7 @@ export class EditorView {
                           height: rest.length * this.layout.metrics.lineHeight,
                           render: (container) => {
                               container.classList.add('se-widget', 'se-ghost-rows');
-                              renderCodeBlock(container, rest.join('\n'), null, this.settings.tabSize, {});
+                              renderCodeBlock(container, visibleBidi(rest.join('\n')), null, this.settings.tabSize, {});
                           }
                       }
                   ]
@@ -756,12 +940,15 @@ export class EditorView {
     /* The folds of the document, a moment after the last edit since they read all of it. */
     private scheduleFolds(): void {
         clearTimeout(this.foldTimer);
+        if (this.settings.folding === false) {
+            return;
+        }
         this.foldTimer = setTimeout(() => this.refreshFolds(), FOLD_DELAY_MS);
     }
 
     /* Reads the folds off the document now, which otherwise waits for a pause in editing. */
     refreshFolds(): void {
-        if (this.disposed) {
+        if (this.disposed || this.settings.folding === false) {
             return;
         }
         const ranges =
@@ -934,6 +1121,9 @@ export class EditorView {
      * and closes one of the document's own. A selection inside one line has no line to fold.
      */
     foldSelection(): void {
+        if (this.settings.folding === false) {
+            return;
+        }
         const { anchor, head } = this.model.getPrimary();
         let from = Math.min(anchor, head);
         let to = Math.max(anchor, head);
@@ -985,6 +1175,9 @@ export class EditorView {
         state: { collapsed: readonly { startLine: number; endLine: number }[]; custom: readonly { startLine: number; endLine: number }[] } | null,
         defaults: readonly FoldRole[] = []
     ): void {
+        if (this.settings.folding === false) {
+            return;
+        }
         const last = this.model.getLineCount() - 1;
         if (state !== null) {
             this.customFolds = state.custom
@@ -1085,6 +1278,10 @@ export class EditorView {
     /* Opens the folds that hide an offset, so a caret or a search result is where it can be seen. */
     ensureVisible(offset: number): void {
         const line = this.model.positionAt(offset).line;
+        const row = this.layout.rowForLine(line);
+        if (row.kind === 'text') {
+            row.replacement?.onReveal?.();
+        }
         if (!this.layout.hides(offset)) {
             return;
         }
@@ -1109,7 +1306,8 @@ export class EditorView {
         action();
         const next = this.layout.rows.find((row) => row.key === anchor.key);
         if (next) {
-            this.viewport.scrollTop = Math.max(0, next.top + offset);
+            // Unwrapping can shrink the anchor below its old offset.
+            this.viewport.scrollTop = Math.max(0, next.top + Math.min(offset, Math.max(0, next.height - 1)));
         }
     }
 
@@ -1290,6 +1488,26 @@ export class EditorView {
         return ranges;
     }
 
+    private get paintWindow(): VerticalWindow {
+        return { top: this.scrollTop - this.overscan, bottom: this.scrollTop + this.viewportHeight + this.overscan };
+    }
+
+    private paintRectangles(from: number, to: number, rows: readonly LayoutRow[]): LayoutRect[] {
+        return this.layout.rectangles(from, to, rows, this.paintWindow);
+    }
+
+    private visibleTextBounds(row: TextRow): { from: number; to: number } {
+        const geometry = this.layout.geometry(row);
+        const band = subRowBand(row.top, geometry.subRows, this.layout.metrics.lineHeight, this.paintWindow);
+        return {
+            from: geometry.start + offsetOfStop(geometry, geometry.rowStarts[band.first]!),
+            to:
+                band.last + 1 === geometry.subRows
+                    ? this.model.getLine(row.line).next
+                    : geometry.start + offsetOfStop(geometry, geometry.rowStarts[band.last + 1]!)
+        };
+    }
+
     /* The arrows of the soft wraps in the rows on screen. */
     private wrapSigns(rows: readonly LayoutRow[]): WrapSign[] {
         if (!this.layout.wrapping) {
@@ -1302,14 +1520,15 @@ export class EditorView {
                 continue;
             }
             const geometry = this.layout.geometry(row);
-            for (let subRow = 0; subRow < geometry.subRows; subRow++) {
+            const band = subRowBand(row.top, geometry.subRows, lineHeight, this.paintWindow);
+            for (let subRow = band.first; subRow <= band.last; subRow++) {
                 const y = row.top + subRow * lineHeight;
                 if (subRow + 1 < geometry.subRows) {
                     const x = geometry.rowEnds[subRow]!;
                     signs.push({ x, y, width: this.viewportWidth - x });
                 }
                 if (subRow > 0) {
-                    signs.push({ x: 0, y, width: geometry.before[geometry.rowStarts[subRow]!]! });
+                    signs.push({ x: 0, y, width: xOfStop(geometry, geometry.rowStarts[subRow]!) });
                 }
             }
         }
@@ -1494,6 +1713,58 @@ export class EditorView {
             !this.settings.readOnly && event.buttons === 0 && this.selectionAtPoint(event.clientX, event.clientY) !== null
         );
         this.setHover(event.buttons === 0 ? this.characterAtPoint(event.clientX, event.clientY, event.target) : null);
+        this.setInlayHover(event.buttons === 0 ? event.target : null);
+    }
+
+    /* The hint, and the part of its label, an event happened on, or null anywhere else. */
+    inlayAt(target: EventTarget | null): { id: string; part: number | null; element: HTMLElement } | null {
+        const element = (target as HTMLElement | null)?.closest?.<HTMLElement>('.se-inlay');
+        if (!element?.dataset.inlayId) {
+            return null;
+        }
+        const part = (target as HTMLElement).closest<HTMLElement>('[data-part]');
+        return { id: element.dataset.inlayId, part: part === null ? null : Number(part.dataset.part), element: part ?? element };
+    }
+
+    /* Says which hint the pointer is on, or that it left them all. */
+    setInlayHover(target: EventTarget | null): void {
+        const found = this.inlayAt(target);
+        if (found?.id === this.inlayHover?.id && found?.part === this.inlayHover?.part) {
+            return;
+        }
+        this.inlayHover = found === null ? null : { id: found.id, part: found.part };
+        emit(this.inlayHoverListeners, found === null ? null : { id: found.id, part: found.part, rect: found.element.getBoundingClientRect() });
+    }
+
+    onInlayHover(listener: (target: { id: string; part: number | null; rect: EditorRect } | null) => void): () => void {
+        return subscribe(this.inlayHoverListeners, listener);
+    }
+
+    /* Draws a hint or one of its parts as a link, which only the pill on screen can show. The target outlives a repaint of its line. */
+    setInlayLink(target: { id: string; part: number | null } | null): void {
+        this.inlayLink = target === null ? null : { id: target.id, part: target.part };
+        this.applyInlayLink();
+    }
+
+    private applyInlayLink(): void {
+        const target = this.inlayLink;
+        if (target === null && this.inlayLinkElement === null) {
+            return;
+        }
+        let element: HTMLElement | undefined;
+        if (target !== null) {
+            const pill = Array.from(this.content.querySelectorAll<HTMLElement>('[data-inlay-id]')).find((candidate) => candidate.dataset.inlayId === target.id);
+            element =
+                target.part === null
+                    ? pill
+                    : (Array.from(pill?.querySelectorAll<HTMLElement>('[data-part]') ?? []).find((part) => part.dataset.part === String(target.part)) ?? pill);
+        }
+        if (element === this.inlayLinkElement) {
+            return;
+        }
+        this.inlayLinkElement?.classList.remove('se-inlay-link');
+        element?.classList.add('se-inlay-link');
+        this.inlayLinkElement = element ?? null;
     }
 
     setHover(offset: number | null): void {
@@ -1504,6 +1775,30 @@ export class EditorView {
         emit(this.hoverListeners, offset);
     }
 
+    getLineHeight(line: number): number {
+        if (!Number.isInteger(line) || line < 0 || line >= this.model.getLineCount() || this.layout.isHidden(line)) {
+            return 0;
+        }
+        return this.layout.rowForLine(line).height;
+    }
+
+    onLineHeights(listener: () => void): () => void {
+        return subscribe(this.lineHeightListeners, listener);
+    }
+
+    setScrollTop(top: number): void {
+        if (!Number.isFinite(top)) {
+            return;
+        }
+        this.cancelScroll();
+        const next = Math.max(0, top);
+        if (this.viewport.scrollTop === next) {
+            return;
+        }
+        this.viewport.scrollTop = next;
+        this.render();
+    }
+
     onViewChange(listener: () => void): () => void {
         return subscribe(this.viewListeners, listener);
     }
@@ -1618,37 +1913,32 @@ export class EditorView {
     /* What a regular expression replacement writes for the match the find is on, drawn under that match; null takes it away. */
     setReplacePreview(replacement: string | null, preserveCase = false): void {
         this.replacePreview = replacement === null ? null : { text: replacement, preserveCase };
+        this.find.setPreview(replacement !== null);
         this.paintPreview();
     }
 
     /* Shown only when it says something the replacement text does not, as a regular expression's does. */
     private paintPreview(): void {
-        const mark = this.find.currentMark;
-        const query = this.find.activeQuery;
+        const match = this.find.currentMatch;
         const wanted = this.replacePreview;
         let shown: string | null = null;
-        if (wanted !== null && mark !== null && query?.regex === true) {
+        if (wanted !== null && match?.regex === true) {
             try {
-                const match = this.model.find(query.text, {
-                    caseSensitive: query.caseSensitive,
-                    wholeWord: query.wholeWord,
-                    regex: true,
-                    from: mark.from,
-                    to: mark.to,
-                    maxResults: 1
-                })[0];
-                const text = match === undefined ? wanted.text : replacementText(this.model.getText(), match, wanted.text, false, wanted.preserveCase);
+                if (wanted.text.length > 10000) {
+                    throw new RangeError('The replacement preview is too large.');
+                }
+                const text = replacementText(this.model.getText(), match, wanted.text, false, wanted.preserveCase, 10000);
                 shown = text === wanted.text ? null : text;
             } catch {
                 shown = null;
             }
         }
         this.preview.hidden = shown === null;
-        if (shown === null || mark === null) {
+        if (shown === null || match === null) {
             return;
         }
-        const start = this.layout.caret(mark.from);
-        const end = this.layout.caret(mark.to);
+        const start = this.layout.caret(match.from);
+        const end = this.layout.caret(match.to);
         this.preview.textContent = shown;
         this.preview.style.left = `${(start.x + end.x) / 2}px`;
         this.preview.style.top = `${end.y + end.height}px`;
@@ -1687,7 +1977,7 @@ export class EditorView {
 
     /* Colors the lines on and just past the screen, a slice at a time so typing never waits on a grammar. */
     colorAhead(immediate = false): void {
-        if (this.disposed || !this.tokens.ready) {
+        if (this.disposed || this.lineTokenProvider !== null || !this.tokens.ready) {
             return;
         }
         clearTimeout(this.colorTimer);
@@ -1707,9 +1997,16 @@ export class EditorView {
         );
     }
 
-    /* The gutter is as wide as its widest number needs, which only changes when the line count gains a digit. */
+    /* Source numbering can be much larger than the display document's line count. */
     private syncGutter(): void {
-        const digits = String(this.model.getLineCount()).length;
+        if (this.lineNumberProvider !== null && this.lineNumberRevision !== this.model.getRevision()) {
+            const provider = this.lineNumberProvider;
+            this.lineNumberLabels = Array.from({ length: this.model.getLineCount() }, (_, line) => provider(line));
+            this.lineNumberWidth = this.lineNumberLabels.reduce((width, label) => Math.max(width, label?.length ?? 0), 0);
+            this.lineNumberRevision = this.model.getRevision();
+            this.stickyEntries = [];
+        }
+        const digits = this.lineNumberProvider === null ? String(this.model.getLineCount()).length : this.lineNumberWidth;
         const width = Math.max(MIN_GUTTER_WIDTH, Math.ceil(digits * this.layout.metrics.charWidth) + 40);
         if (width !== this.gutterWidth) {
             this.gutterWidth = width;
@@ -1765,7 +2062,7 @@ export class EditorView {
             const lastLine = rows.at(-1)?.line ?? 0;
             const firstRow = this.layout.rowAt(this.scrollTop);
             this.topAnchor = { offset: this.model.getLine(firstRow.line).start, delta: this.scrollTop - firstRow.top };
-            if (lastLine - this.tokens.colored <= COLOR_MARGIN * 4) {
+            if (this.lineTokenProvider === null && lastLine - this.tokens.colored <= COLOR_MARGIN * 4) {
                 this.tokens.advance(lastLine, FIRST_PAINT_MS);
             }
             const paint = {
@@ -1773,6 +2070,7 @@ export class EditorView {
                 whitespace: this.settings.whitespace,
                 tokensOf: (line: number) => this.styledTokensOf(line),
                 viewportWidth: this.viewportWidth - RIGHT_PADDING,
+                window: this.paintWindow,
                 hostLeft: this.scrollLeft - this.gutterWidth,
                 hostWidth: this.viewportWidth + this.gutterWidth,
                 onUnfold: (line: number) => this.toggleFold(line, false)
@@ -1781,6 +2079,7 @@ export class EditorView {
                 rows = this.layout.visibleRows(this.scrollTop, this.viewportHeight, this.overscan);
                 this.painter.paint(rows, paint);
             }
+            this.applyInlayLink();
             this.content.style.height = `${this.layout.height}px`;
             this.content.style.width = `${Math.max(this.layout.width, this.viewportWidth)}px`;
             this.renderedScroll = { top: this.scrollTop, left: this.scrollLeft };
@@ -1800,6 +2099,11 @@ export class EditorView {
             this.frameGeometry = null;
             this.rendering = false;
         }
+        if (!this.disposed && this.announcedLineHeights !== this.layout.lineHeightsVersion) {
+            this.announcedLineHeights = this.layout.lineHeightsVersion;
+            // Hosts may adjust rows in response; rendering must already have finished.
+            emit(this.lineHeightListeners);
+        }
     }
 
     private paintDecorations(rows: readonly LayoutRow[]): void {
@@ -1815,11 +2119,14 @@ export class EditorView {
         const lastLine = lastRow?.kind === 'text' ? lastRow.lastLine : (lastRow?.line ?? 0);
         const highlighted = this.highlightedLines(firstLine, lastLine);
         paintGutter(this.gutterLines, this.layout, rows, {
+            lineNumber: (line) => this.lineNumberLabel(line),
             changes: this.changedLines(rows),
             attribution: this.attributedLines(firstLine, lastLine),
             highlights: highlighted,
             activeLines: new Set(selections.map((selection) => this.model.positionAt(selection.head).line)),
             foldable,
+            lineLabel: (line) => this.lineLabelProvider?.(line) ?? null,
+            foldName: (line, collapsed) => this.foldName(line, collapsed),
             action: this.gutterAction,
             markers: this.markersByLine()
         });
@@ -1834,7 +2141,7 @@ export class EditorView {
             if (group.length > 0) {
                 marks.push({
                     className: kind === 'write' ? 'se-occurrence se-occurrence-write' : 'se-occurrence',
-                    rects: group.flatMap((mark) => this.layout.rectangles(mark.from, mark.to, rows))
+                    rects: group.flatMap((mark) => this.paintRectangles(mark.from, mark.to, rows))
                 });
             }
         }
@@ -1850,7 +2157,7 @@ export class EditorView {
         paintSigns(this.signs, this.wrapSigns(rows), this.layout.metrics.lineHeight);
         const alike = this.selectionOccurrences();
         if (alike.length > 0) {
-            marks.push({ className: 'se-occurrence', rects: alike.flatMap((range) => this.layout.rectangles(range.from, range.to, rows)) });
+            marks.push({ className: 'se-occurrence', rects: alike.flatMap((range) => this.paintRectangles(range.from, range.to, rows)) });
         }
         const faded: LayoutRect[] = [];
         const struck: LayoutRect[] = [];
@@ -1858,7 +2165,7 @@ export class EditorView {
             if (marker.to <= marker.from) {
                 continue;
             }
-            const rects = this.layout.rectangles(marker.from, marker.to, rows);
+            const rects = this.paintRectangles(marker.from, marker.to, rows);
             if (marker.severity !== 'hint') {
                 marks.push({ className: `se-squiggle se-squiggle-${marker.severity}`, rects });
             }
@@ -1871,11 +2178,22 @@ export class EditorView {
         }
         const current = this.find.currentMark;
         const textRows = rows.filter((candidate) => candidate.kind === 'text');
-        const visibleFrom = textRows.length > 0 ? this.model.getLine(textRows[0]!.line).start : 0;
-        const visibleTo = textRows.length > 0 ? this.model.getLine(textRows.at(-1)!.line).next : 0;
-        for (const mark of this.find.matches) {
-            if (mark.to > mark.from && mark.to >= visibleFrom && mark.from <= visibleTo) {
-                marks.push({ className: mark === current ? 'se-find-current' : 'se-find-match', rects: this.layout.rectangles(mark.from, mark.to, rows) });
+        const visibleFrom = textRows.length > 0 ? this.visibleTextBounds(textRows[0]!).from : 0;
+        const visibleTo = textRows.length > 0 ? this.visibleTextBounds(textRows.at(-1)!).to : 0;
+        const found = this.find.matchesBetween(visibleFrom, visibleTo);
+        const spans =
+            current !== null &&
+            !found.some((mark) => mark.from === current.from && mark.to === current.to) &&
+            current.to >= visibleFrom &&
+            current.from <= visibleTo
+                ? [...found, current]
+                : found;
+        for (const mark of spans) {
+            if (mark.to > mark.from) {
+                marks.push({
+                    className: mark.from === current?.from && mark.to === current.to ? 'se-find-current' : 'se-find-match',
+                    rects: this.paintRectangles(mark.from, mark.to, rows)
+                });
             }
         }
         const seen = new Set<number>();
@@ -1886,27 +2204,27 @@ export class EditorView {
             }
             if (bracket.mate === undefined) {
                 if (this.unmatchedBracket(bracket.at)) {
-                    marks.push({ className: 'se-bracket-unmatched', rects: this.layout.rectangles(bracket.at, bracket.at + 1, rows) });
+                    marks.push({ className: 'se-bracket-unmatched', rects: this.paintRectangles(bracket.at, bracket.at + 1, rows) });
                 }
                 continue;
             }
             for (const offset of [bracket.at, bracket.mate]) {
                 if (!seen.has(offset)) {
                     seen.add(offset);
-                    marks.push({ className: 'se-bracket-match', rects: this.layout.rectangles(offset, offset + 1, rows) });
+                    marks.push({ className: 'se-bracket-match', rects: this.paintRectangles(offset, offset + 1, rows) });
                 }
             }
         }
         const selected = selections.flatMap((selection) =>
             selection.anchor === selection.head
                 ? []
-                : this.layout.rectangles(Math.min(selection.anchor, selection.head), Math.max(selection.anchor, selection.head), rows)
+                : this.paintRectangles(Math.min(selection.anchor, selection.head), Math.max(selection.anchor, selection.head), rows)
         );
         paintOverlays(this.overlays, { currentLine, selections: selected, focused, marks });
         paintOver(this.over, [
             { className: 'se-faded', rects: faded },
             { className: 'se-struck', rects: struck },
-            { className: 'se-link', rects: this.link === null ? [] : this.layout.rectangles(this.link.from, this.link.to, rows) }
+            { className: 'se-link', rects: this.link === null ? [] : this.paintRectangles(this.link.from, this.link.to, rows) }
         ]);
         const top = this.scrollTop;
         const caretRects = focused
@@ -1929,38 +2247,84 @@ export class EditorView {
         this.root.dataset.carets = String(selections.length);
     }
 
-    /* The lines the host marked, which stay on their lines through edits until it marks them again. */
-    setChangeMarks(marks: readonly EditorChangeMark[]): void {
+    /*
+     * The lines the host marked in a layer, which stay on their lines through edits until the layer is set again. Layers
+     * draw together; where two mark the same line the layer that was set first after being empty sits below the later one.
+     */
+    setChangeMarks(marks: readonly EditorChangeMark[], layer = ''): void {
         const last = this.model.getLineCount();
         const clamp = (line: number): number => Math.min(last, Math.max(1, Math.trunc(line) || 1)) - 1;
-        this.changeMarks = marks.map((mark) => {
-            const from = this.model.getLine(clamp(mark.startLine)).start;
-            return { kind: mark.kind, from, to: mark.kind === 'deleted' ? from : this.model.getLine(Math.max(clamp(mark.startLine), clamp(mark.endLine))).end };
-        });
+        if (marks.length === 0) {
+            this.changeLayers.delete(layer);
+        } else {
+            this.changeLayers.set(
+                layer,
+                marks.map((mark) => {
+                    const from = this.model.getLine(clamp(mark.startLine)).start;
+                    return {
+                        kind: mark.kind,
+                        from,
+                        to: mark.kind === 'deleted' ? from : this.model.getLine(Math.max(clamp(mark.startLine), clamp(mark.endLine))).end
+                    };
+                })
+            );
+        }
         this.changeVersion++;
         this.render();
     }
 
-    private markedLines(mark: { kind: EditorChangeKind; from: number; to: number }): { start: number; end: number } {
-        const start = this.model.positionAt(mark.from).line;
-        return { start, end: mark.kind === 'deleted' ? start : this.model.positionAt(Math.max(mark.from, mark.to)).line };
+    /*
+     * How every marked line differs. The layer that last became non-empty wins a shared line for every kind; inside one
+     * layer a removal never covers a line that was added or changed, as its mark sits on the line after the removed text.
+     */
+    private resolvedChanges(): { lines: Map<number, EditorChangeKind>; runs: { kind: EditorChangeKind; start: number; end: number }[] } {
+        if (this.changeCache?.version === this.changeVersion) {
+            return this.changeCache;
+        }
+        const lines = new Map<number, EditorChangeKind>();
+        for (const marks of this.changeLayers.values()) {
+            const layer = new Map<number, EditorChangeKind>();
+            for (const mark of marks) {
+                const start = this.model.positionAt(mark.from).line;
+                const end = mark.kind === 'deleted' ? start : this.model.positionAt(Math.max(mark.from, mark.to)).line;
+                for (let line = start; line <= end; line++) {
+                    if (mark.kind !== 'deleted' || !layer.has(line)) {
+                        layer.set(line, mark.kind);
+                    }
+                }
+            }
+            for (const [line, kind] of layer) {
+                lines.set(line, kind);
+            }
+        }
+        const runs: { kind: EditorChangeKind; start: number; end: number }[] = [];
+        for (const line of [...lines.keys()].sort((left, right) => left - right)) {
+            const kind = lines.get(line)!;
+            const run = runs.at(-1);
+            if (run !== undefined && kind !== 'deleted' && run.kind === kind && run.end === line - 1) {
+                run.end = line;
+            } else {
+                runs.push({ kind, start: line, end: line });
+            }
+        }
+        this.changeCache = { version: this.changeVersion, lines, runs };
+        return this.changeCache;
     }
 
-    /* How each line on screen differs, a removal never covering a line that was added or changed. */
+    /* How each line on screen differs. */
     private changedLines(rows: readonly LayoutRow[]): Map<number, EditorChangeKind> {
-        const lines = new Map<number, EditorChangeKind>();
+        const { lines } = this.resolvedChanges();
         const first = rows[0]?.line ?? 0;
         const lastRow = rows.at(-1);
         const last = lastRow?.kind === 'text' ? lastRow.lastLine : (lastRow?.line ?? 0);
-        for (const mark of this.changeMarks) {
-            const { start, end } = this.markedLines(mark);
-            for (let line = Math.max(start, first); line <= Math.min(end, last); line++) {
-                if (mark.kind !== 'deleted' || !lines.has(line)) {
-                    lines.set(line, mark.kind);
-                }
+        const visible = new Map<number, EditorChangeKind>();
+        for (let line = first; line <= last; line++) {
+            const kind = lines.get(line);
+            if (kind !== undefined) {
+                visible.set(line, kind);
             }
         }
-        return lines;
+        return visible;
     }
 
     /* The carets of agents, each at an offset that follows its text through edits until the host sets them again. */
@@ -2054,7 +2418,7 @@ export class EditorView {
     }
 
     /* Lines the host tinted, which follow their text through edits until it sets them again. */
-    setLineHighlights(highlights: readonly { startLine: number; endLine: number; color: string; sign?: string; fill?: string }[]): void {
+    setLineHighlights(highlights: readonly EditorLineHighlight[]): void {
         this.highlights.set(
             highlights.map((highlight) => ({ id: '', ...highlight })),
             this.model.getLineCount(),
@@ -2080,6 +2444,7 @@ export class EditorView {
     ): { className: string; rects: LayoutRect[]; background: string }[] {
         const byBackground = new Map<string, LayoutRect[]>();
         const width = Math.max(this.layout.width, this.viewportWidth);
+        const emphasisByColor = new Map<string, LayoutRect[]>();
         for (const row of rows) {
             const highlight = row.kind === 'text' ? lines.get(row.line) : undefined;
             if (highlight !== undefined) {
@@ -2087,14 +2452,32 @@ export class EditorView {
                 const rects = byBackground.get(background) ?? [];
                 rects.push({ x: 0, y: row.top, width, height: row.height });
                 byBackground.set(background, rects);
+                if (row.kind === 'text' && highlight.emphasis !== undefined) {
+                    const bounds = this.model.getLine(row.line);
+                    const emphasisBackground = `color-mix(in srgb, ${colorValue(highlight.color)} 22%, transparent)`;
+                    const emphasized = emphasisByColor.get(emphasisBackground) ?? [];
+                    for (const range of highlight.emphasis) {
+                        emphasized.push(...this.paintRectangles(Math.max(bounds.start, range.from), Math.min(bounds.end, range.to), [row]));
+                    }
+                    emphasisByColor.set(emphasisBackground, emphasized);
+                }
             }
         }
-        return [...byBackground].map(([background, rects]) => ({ className: 'se-line-highlight', rects, background }));
+        return [
+            ...[...byBackground].map(([background, rects]) => ({ className: 'se-line-highlight', rects, background })),
+            ...[...emphasisByColor].map(([background, rects]) => ({ className: 'se-line-emphasis', rects, background }))
+        ];
     }
 
     /* Code that is not in the document, drawn in the editor's own face and colors. */
     renderCode(container: HTMLElement, text: string, options: EditorCodeBlockOptions): void {
-        renderCodeBlock(container, text, this.tokens.tokenizeText(text.split(/\r?\n/)), this.settings.tabSize, options);
+        renderCodeBlock(
+            container,
+            text,
+            options.tokens === undefined ? this.tokens.tokenizeText(text.split(/\r?\n/)) : options.tokens,
+            this.settings.tabSize,
+            options
+        );
     }
 
     private attributedLines(first: number, last: number): Map<number, AttributedLines> {
@@ -2213,9 +2596,8 @@ export class EditorView {
             const row = this.layout.rowForLine(line);
             return row.top + row.height;
         };
-        for (const mark of this.changeMarks) {
-            const { start, end } = this.markedLines(mark);
-            spans.push({ kind: mark.kind, top: rowTop(start), bottom: mark.kind === 'deleted' ? rowTop(start) : rowBottom(end) });
+        for (const { kind, start, end } of this.resolvedChanges().runs) {
+            spans.push({ kind, top: rowTop(start), bottom: kind === 'deleted' ? rowTop(start) : rowBottom(end) });
         }
         for (const marker of this.markers) {
             if (marker.severity !== 'hint' && marker.to > marker.from) {
@@ -2297,13 +2679,18 @@ export class EditorView {
         const placements = this.scrollTop <= 0 ? [] : this.stickyAt(this.scrollTop);
         const entries = placements.map((placement): StickyEntry => {
             const row = this.layout.rowForLine(placement.block.startLine) as TextRow;
-            return { line: placement.block.startLine, geometry: this.layout.geometry(row), tokens: this.styledTokensOf(placement.block.startLine) };
+            return {
+                line: placement.block.startLine,
+                label: this.lineNumberLabel(placement.block.startLine),
+                geometry: this.layout.geometry(row),
+                tokens: this.styledTokensOf(placement.block.startLine)
+            };
         });
         const changed =
             entries.length !== this.stickyEntries.length ||
             entries.some((entry, index) => {
                 const before = this.stickyEntries[index]!;
-                return entry.line !== before.line || entry.geometry !== before.geometry || entry.tokens !== before.tokens;
+                return entry.line !== before.line || entry.label !== before.label || entry.geometry !== before.geometry || entry.tokens !== before.tokens;
             });
         this.sticky.hidden = entries.length === 0;
         this.sticky.style.setProperty('--se-scroll-left', `${this.scrollLeft}px`);
@@ -2343,11 +2730,18 @@ export class EditorView {
         return subscribe(this.gutterActionListeners, listener);
     }
 
-    setGutterMarkers(owner: string, markers: readonly { id: string; line: number; label: string }[]): void {
+    setGutterMarkers(owner: string, markers: readonly GutterMarker[]): void {
         const before = this.gutterMarkers.get(owner) ?? [];
         if (
             before.length === markers.length &&
-            before.every((marker, index) => marker.id === markers[index]!.id && marker.line === markers[index]!.line && marker.label === markers[index]!.label)
+            before.every(
+                (marker, index) =>
+                    marker.id === markers[index]!.id &&
+                    marker.line === markers[index]!.line &&
+                    marker.label === markers[index]!.label &&
+                    marker.icon === markers[index]!.icon &&
+                    marker.pressed === markers[index]!.pressed
+            )
         ) {
             return;
         }
@@ -2374,12 +2768,12 @@ export class EditorView {
     }
 
     /* One marker per line: where two owners mark the same line, the owner that sorts first stays. */
-    private markersByLine(): ReadonlyMap<number, { id: string; label: string }> {
-        const byLine = new Map<number, { id: string; label: string }>();
+    private markersByLine(): ReadonlyMap<number, GutterMarker> {
+        const byLine = new Map<number, GutterMarker>();
         for (const owner of [...this.gutterMarkers.keys()].sort()) {
             for (const marker of this.gutterMarkers.get(owner)!) {
                 if (!byLine.has(marker.line)) {
-                    byLine.set(marker.line, { id: marker.id, label: marker.label });
+                    byLine.set(marker.line, marker);
                 }
             }
         }
@@ -2408,12 +2802,14 @@ export class EditorView {
         }
         this.disposed = true;
         this.cancelScroll();
+        this.find.dispose();
         this.subscription.dispose();
         this.resizeObserver?.disconnect();
         this.blockObserver?.disconnect();
         clearTimeout(this.foldTimer);
         clearTimeout(this.colorTimer);
         clearTimeout(this.noticeTimer);
+        clearTimeout(this.liveTimer);
         clearTimeout(this.caretTimer);
         if (this.frame !== undefined) {
             this.document.defaultView?.cancelAnimationFrame?.(this.frame);
@@ -2421,7 +2817,9 @@ export class EditorView {
         this.findListeners.clear();
         this.scopeListeners.clear();
         this.viewListeners.clear();
+        this.lineHeightListeners.clear();
         this.hoverListeners.clear();
+        this.inlayHoverListeners.clear();
         this.gutterActionListeners.clear();
         this.gutterMarkerListeners.clear();
         this.gutterMarkers.clear();