@adecore/editor 0.0.1 → 0.17.0-beta.1

package/dist/metrics.js

@@ -0,0 +1,54 @@
+const FALLBACK = { family: 'monospace', size: 13, lineHeight: 20 };
+function pixels(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+/* The code face the page gives the editor's element, in whole pixels so a line is as tall as the viewer's. */
+export function readEditorFont(element) {
+    const view = element.ownerDocument.defaultView;
+    if (!view?.getComputedStyle) {
+        return FALLBACK;
+    }
+    const style = view.getComputedStyle(element);
+    const size = pixels(style.fontSize) ?? FALLBACK.size;
+    const lineHeight = pixels(style.lineHeight) ?? Math.round(size * 1.5);
+    return { family: style.fontFamily || FALLBACK.family, size, lineHeight: Math.round(lineHeight) };
+}
+/* Character widths from a canvas, which sets the text in the same face the page draws it in. Without a canvas a character is 0.6 of the size. */
+export function createMetrics(font, tabSize, document) {
+    let context = null;
+    try {
+        context = document.createElement('canvas').getContext('2d');
+    }
+    catch {
+        context = null;
+    }
+    const codeFont = `${font.size}px ${font.family}`;
+    const inlayFont = `${Math.max(12, font.size - 1)}px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`;
+    const cache = new Map();
+    const measure = (text, face, fallback) => {
+        if (!context) {
+            return Array.from(text).length * fallback;
+        }
+        context.font = face;
+        context.fontKerning = 'none';
+        return context.measureText(text).width;
+    };
+    return {
+        lineHeight: font.lineHeight,
+        charWidth: measure('M', codeFont, font.size * 0.6),
+        tabSize,
+        measureText(text) {
+            let width = cache.get(text);
+            if (width === undefined) {
+                width = measure(text, codeFont, font.size * 0.6);
+                if (cache.size > 2000) {
+                    cache.clear();
+                }
+                cache.set(text, width);
+            }
+            return width;
+        },
+        measureInlay: (text) => measure(text, inlayFont, font.size * 0.5)
+    };
+}

package/dist/modifier-gesture.d.ts

@@ -0,0 +1,24 @@
+export interface GestureEvent {
+    key: string;
+    timeStamp: number;
+    repeat?: boolean;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}
+export type GestureAction = 'above' | 'below';
+export declare class DoubleModifierGesture {
+    private firstPressed;
+    private firstReleased;
+    private secondPressed;
+    private last;
+    private readonly modifier;
+    constructor(modifier: 'Alt' | 'Control');
+    reset(): void;
+    get armed(): boolean;
+    private spoiled;
+    keydown(event: GestureEvent): GestureAction | null;
+    keyup(event: GestureEvent): void;
+    private step;
+}

package/dist/modifier-gesture.js

@@ -0,0 +1,98 @@
+/*
+ * The gesture that adds a caret above or below: tap a modifier twice, hold it down the second time and
+ * press an arrow, which Option does on macOS and Ctrl elsewhere. The taps have to follow each other
+ * within a third of a second; the arrow can come as long as the modifier stays down.
+ */
+/* How long the taps may be apart. */
+const TAP_MS = 300;
+/* A first tap this old is forgotten even by a press that comes after the slower rule. */
+const FORGET_MS = 500;
+export class DoubleModifierGesture {
+    firstPressed = false;
+    firstReleased = false;
+    secondPressed = false;
+    last = 0;
+    modifier;
+    constructor(modifier) {
+        this.modifier = modifier;
+    }
+    reset() {
+        this.firstPressed = false;
+        this.firstReleased = false;
+        this.secondPressed = false;
+    }
+    /* Whether the modifier is down for the second time, which is when an arrow means something. */
+    get armed() {
+        return this.firstPressed && this.firstReleased && this.secondPressed;
+    }
+    /* Another modifier held with the one that counts spoils the gesture. */
+    spoiled(event) {
+        const others = this.modifier === 'Alt' ? event.ctrlKey || event.metaKey || event.shiftKey : event.altKey || event.metaKey || event.shiftKey;
+        return others;
+    }
+    keydown(event) {
+        if (event.key === this.modifier) {
+            if (event.repeat === true) {
+                return null;
+            }
+            if (this.spoiled(event)) {
+                this.reset();
+                return null;
+            }
+            if (this.firstPressed && event.timeStamp - this.last > FORGET_MS) {
+                this.reset();
+            }
+            this.step(event, 'press');
+            return null;
+        }
+        if (this.armed) {
+            const held = this.modifier === 'Alt' ? event.altKey : event.ctrlKey;
+            if (held && !this.spoiled(event) && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+                return event.key === 'ArrowUp' ? 'above' : 'below';
+            }
+            return null;
+        }
+        this.reset();
+        return null;
+    }
+    keyup(event) {
+        if (event.key === this.modifier) {
+            if (this.spoiled(event)) {
+                this.reset();
+                return;
+            }
+            this.step(event, 'release');
+        }
+        else if (!this.armed) {
+            this.reset();
+        }
+    }
+    step(event, kind) {
+        if (this.firstPressed && event.timeStamp - this.last > TAP_MS) {
+            this.reset();
+            return;
+        }
+        if (kind === 'press') {
+            if (!this.firstPressed) {
+                this.reset();
+                this.firstPressed = true;
+                this.last = event.timeStamp;
+            }
+            else if (this.firstReleased) {
+                this.secondPressed = true;
+                this.last = event.timeStamp;
+            }
+            else {
+                this.reset();
+            }
+            return;
+        }
+        if (this.firstPressed && !this.firstReleased) {
+            this.firstReleased = true;
+            this.last = event.timeStamp;
+        }
+        else {
+            this.reset();
+        }
+    }
+}

package/dist/native-input.d.ts

@@ -0,0 +1,26 @@
+import type { DocumentModel, Selection, TextEdit } from '@adecore/editor-core';
+export interface NativeInputHost {
+    readOnly(): boolean;
+    replace(text: string): void;
+    type(character: string): void;
+    apply(edit: TextEdit, selection: Selection): void;
+    preview(text: string | undefined): void;
+    selectionChanged(selection: Selection): void;
+}
+export declare class NativeInput {
+    composing: boolean;
+    private context;
+    private compositionContext;
+    private writing;
+    private readonly element;
+    private readonly model;
+    private readonly host;
+    constructor(element: HTMLTextAreaElement, model: DocumentModel, host: NativeInputHost);
+    sync(): void;
+    readSelection(): void;
+    onInput(): void;
+    startComposition(): void;
+    endComposition(data: string): void;
+    normalizeNewlines(text: string): string;
+    private composedText;
+}

package/dist/native-input.js

@@ -0,0 +1,147 @@
+import { findChange, modelOffset, textareaOffset, textareaText } from './input.js';
+/* The most of the document the textarea holds around the caret; a screen reader gets its context, a megabyte file does not get copied on every keystroke. */
+const CONTEXT = 8192;
+/* A dead key and the key after it commit as one composition of at most two characters, which is typing and not an input method's text. */
+const DEAD_KEY_RESULT = /^[\x20-\x7e]{1,2}$/;
+/*
+ * The hidden textarea. It is the sink for what the platform types, composes and pastes, and carries
+ * the text around the caret for assistive technology. It never draws and never decides: the model
+ * owns the text and the selection, and the textarea is written from it.
+ */
+export class NativeInput {
+    composing = false;
+    context = { from: 0, source: '', value: '', start: 0, end: 0 };
+    compositionContext;
+    writing = false;
+    element;
+    model;
+    host;
+    constructor(element, model, host) {
+        this.element = element;
+        this.model = model;
+        this.host = host;
+    }
+    sync() {
+        if (this.composing) {
+            return;
+        }
+        const selection = this.model.getPrimary();
+        const caretCount = this.model.getSelectionCount();
+        const length = this.model.getLength();
+        const start = Math.min(selection.anchor, selection.head);
+        const end = Math.max(selection.anchor, selection.head);
+        let from = 0;
+        let to = length;
+        if (length > CONTEXT) {
+            from = Math.max(0, Math.min(start, selection.head - 2048));
+            to = Math.min(length, end + 2048);
+            if (to - from > CONTEXT) {
+                from = Math.max(0, selection.head - CONTEXT / 2);
+                to = Math.min(length, from + CONTEXT);
+            }
+            // A boundary must not split a surrogate pair or a CRLF.
+            if (from > 0 && /[\uDC00-\uDFFF\n]/.test(this.model.slice(from, from + 1))) {
+                from--;
+            }
+            if (to < length && /[\uDC00-\uDFFF\n]/.test(this.model.slice(to, to + 1))) {
+                to++;
+            }
+        }
+        const source = this.model.slice(from, to);
+        const value = textareaText(source);
+        const nativeStart = textareaOffset(source, Math.max(0, start - from));
+        const nativeEnd = textareaOffset(source, Math.max(0, end - from));
+        this.context = { from, source, value, start: nativeStart, end: nativeEnd };
+        this.writing = true;
+        if (this.element.value !== value) {
+            this.element.value = value;
+        }
+        this.element.setSelectionRange(nativeStart, nativeEnd, selection.head < selection.anchor ? 'backward' : 'forward');
+        this.writing = false;
+        const position = this.model.positionAt(selection.head);
+        this.element.setAttribute('aria-description', `Line ${position.line + 1}, column ${position.column + 1}. ${caretCount} caret${caretCount === 1 ? '' : 's'}.`);
+    }
+    /* A selection the platform made inside the textarea, such as a long press or an accessibility action. */
+    readSelection() {
+        if (this.writing || this.composing || this.element.value !== this.context.value) {
+            return;
+        }
+        const start = this.element.selectionStart;
+        const end = this.element.selectionEnd;
+        if (start === this.context.start && end === this.context.end) {
+            return;
+        }
+        const from = this.context.from + modelOffset(this.context.source, start);
+        const to = this.context.from + modelOffset(this.context.source, end);
+        this.host.selectionChanged(this.element.selectionDirection === 'backward' ? { anchor: to, head: from } : { anchor: from, head: to });
+    }
+    onInput() {
+        if (this.composing) {
+            this.host.preview(this.composedText());
+            return;
+        }
+        if (this.host.readOnly()) {
+            this.sync();
+            return;
+        }
+        const context = this.context;
+        const change = findChange(context.value, this.element.value);
+        if (change.from === change.to && !change.text) {
+            return;
+        }
+        if (this.model.getSelections().length > 1) {
+            const suffix = context.value.length - context.end;
+            this.host.replace(this.element.value.slice(context.start, Math.max(context.start, this.element.value.length - suffix)));
+            return;
+        }
+        const edit = {
+            from: context.from + modelOffset(context.source, change.from),
+            to: context.from + modelOffset(context.source, change.to),
+            text: this.normalizeNewlines(change.text)
+        };
+        const next = context.source.slice(0, edit.from - context.from) + edit.text + context.source.slice(edit.to - context.from);
+        const start = context.from + modelOffset(next, this.element.selectionStart);
+        const end = context.from + modelOffset(next, this.element.selectionEnd);
+        this.host.apply(edit, this.element.selectionDirection === 'backward' ? { anchor: end, head: start } : { anchor: start, head: end });
+    }
+    startComposition() {
+        if (this.host.readOnly()) {
+            return;
+        }
+        this.compositionContext = { ...this.context };
+        this.composing = true;
+    }
+    endComposition(data) {
+        if (!this.composing) {
+            return;
+        }
+        const text = this.composedText();
+        const context = this.compositionContext;
+        const unchanged = this.element.value === context.value;
+        this.composing = false;
+        this.compositionContext = undefined;
+        this.host.preview(undefined);
+        if (data && !unchanged && !this.host.readOnly()) {
+            if (DEAD_KEY_RESULT.test(text)) {
+                for (const character of text) {
+                    this.host.type(character);
+                }
+            }
+            else {
+                this.host.replace(text);
+            }
+        }
+        this.sync();
+    }
+    /* The document's own line break, not the textarea's. */
+    normalizeNewlines(text) {
+        const first = this.model.getLine(0);
+        const newline = this.model.slice(first.end, first.next) === '\r\n' ? '\r\n' : '\n';
+        return textareaText(text).replace(/\n/g, newline);
+    }
+    composedText() {
+        const context = this.compositionContext;
+        const suffix = context.value.length - context.end;
+        return this.element.value.slice(context.start, Math.max(context.start, this.element.value.length - suffix));
+    }
+}

package/dist/offsets.d.ts

@@ -0,0 +1,2 @@
+import type { DocumentChange } from '@adecore/editor-core';
+export declare function mapOffset(offset: number, changes: readonly DocumentChange[]): number;

package/dist/offsets.js

@@ -0,0 +1,14 @@
+/* Where an offset is after a batch of changes. One inside a replaced range lands after the new text. */
+export function mapOffset(offset, changes) {
+    let delta = 0;
+    for (const change of changes) {
+        if (offset < change.from) {
+            break;
+        }
+        if (offset < change.to || (offset === change.from && change.from === change.to)) {
+            return change.from + delta + change.insertedLength;
+        }
+        delta += change.insertedLength - (change.to - change.from);
+    }
+    return offset + delta;
+}

package/dist/outline.d.ts

@@ -0,0 +1,55 @@
+import type { DocumentChange, FoldingRange } from '@adecore/editor-core';
+import type { EditorBlock } from './types.ts';
+export interface OutlineBlock {
+    startLine: number;
+    endLine: number;
+    name?: string;
+    kind?: string;
+}
+interface OutlineEntry {
+    from: number;
+    to: number;
+    name?: string;
+    kind?: string;
+}
+export interface OutlineDocument {
+    getLine(line: number): {
+        start: number;
+        end: number;
+        text: string;
+    };
+    positionAt(offset: number): {
+        line: number;
+    };
+    getLineCount(): number;
+}
+export declare function describeHeader(text: string): {
+    name?: string;
+    kind?: string;
+};
+export declare function headerLabel(text: string): string;
+export declare function structuralEntries(ranges: readonly FoldingRange[], document: OutlineDocument, slice: (from: number, to: number) => string, mate: (offset: number) => number | undefined): OutlineEntry[];
+export declare class Outline {
+    private structure;
+    private provided;
+    private version;
+    private cache;
+    setStructure(entries: OutlineEntry[]): void;
+    setProvided(blocks: readonly EditorBlock[] | null, document: OutlineDocument): void;
+    edited(batches: readonly (readonly DocumentChange[])[]): void;
+    blocks(document: OutlineDocument): readonly OutlineBlock[];
+}
+export interface StickyRows {
+    top(line: number): number;
+    bottom(line: number): number;
+    startsRow(line: number): boolean;
+}
+export interface StickyPlacement {
+    block: OutlineBlock;
+    depth: number;
+    offset: number;
+}
+export declare function stickyPlacements(blocks: readonly OutlineBlock[], scrollTop: number, lineHeight: number, max: number, rows: StickyRows): StickyPlacement[];
+export declare function stickyCover(placements: readonly StickyPlacement[], lineHeight: number): number;
+export declare function scopeChain(blocks: readonly OutlineBlock[], line: number): OutlineBlock[];
+export {};

package/dist/outline.js

@@ -0,0 +1,181 @@
+import { mapOffset } from './offsets.js';
+const MODIFIERS = '(?:export\\s+|default\\s+|declare\\s+|abstract\\s+|async\\s+|pub(?:\\([^)]*\\))?\\s+|public\\s+|private\\s+|protected\\s+|static\\s+|final\\s+|readonly\\s+|override\\s+|unsafe\\s+|extern\\s+)*';
+const DECLARATION = new RegExp(`^${MODIFIERS}(function\\*?|class|interface|enum|type|namespace|module|trait|impl|struct|fn|def|func|object|record)\\s+([A-Za-z_$][\\w$]*)`);
+const VARIABLE = new RegExp(`^${MODIFIERS}(?:const|let|var)\\s+([A-Za-z_$][\\w$]*)`);
+const KEYWORDS = new Set([
+    'if',
+    'for',
+    'while',
+    'switch',
+    'catch',
+    'function',
+    'return',
+    'else',
+    'with',
+    'do',
+    'try',
+    'new',
+    'await',
+    'typeof',
+    'super',
+    'finally'
+]);
+const METHOD = /^(?:(?:public|private|protected|static|async|get|set|override|readonly|abstract)\s+)*\*?\s*([A-Za-z_$#][\w$]*)\s*[(<]/;
+const PROPERTY = /^["']?([\w$-]+)["']?\s*:\s*[{[(]?$/;
+const KINDS = {
+    'function*': 'function',
+    fn: 'function',
+    def: 'function',
+    func: 'function',
+    object: 'class',
+    record: 'class',
+    struct: 'class',
+    trait: 'interface',
+    impl: 'class'
+};
+const LABEL_LIMIT = 48;
+/* What a header line declares, when it declares something a person would look for by name. */
+export function describeHeader(text) {
+    const line = text.trim();
+    const declaration = DECLARATION.exec(line);
+    if (declaration) {
+        return { name: declaration[2], kind: KINDS[declaration[1]] ?? declaration[1] };
+    }
+    const variable = VARIABLE.exec(line);
+    if (variable) {
+        return { name: variable[1], kind: 'variable' };
+    }
+    const method = METHOD.exec(line);
+    if (method && !KEYWORDS.has(method[1])) {
+        return { name: method[1], kind: 'method' };
+    }
+    const property = PROPERTY.exec(line);
+    return property ? { name: property[1], kind: 'property' } : {};
+}
+/* The header line as a label: what a breadcrumb shows for a block that declares nothing. */
+export function headerLabel(text) {
+    const label = text.trim().replace(/[\s{(:]+$/, '');
+    return label.length > LABEL_LIMIT ? `${label.slice(0, LABEL_LIMIT - 1)}…` : label;
+}
+/*
+ * The blocks a language-less editor can tell from brackets and indentation: braces and indented
+ * stretches, each headed by the line it opens on. A header that only closes a parameter list is
+ * headed by the line the list opens on, so the signature of a function is the header and not its tail.
+ */
+export function structuralEntries(ranges, document, slice, mate) {
+    const entries = [];
+    for (const range of ranges) {
+        if (range.kind === 'comment' || (range.kind === 'bracket' && slice(range.from, range.from + 1) !== '{')) {
+            continue;
+        }
+        let headerLine = range.startLine;
+        const header = document.getLine(headerLine);
+        const lead = header.text.length - header.text.trimStart().length;
+        if (/^[)\]]/.test(header.text.slice(lead))) {
+            const opener = mate(header.start + lead);
+            if (opener !== undefined && opener < header.start) {
+                headerLine = document.positionAt(opener).line;
+            }
+        }
+        const start = document.getLine(headerLine);
+        entries.push({ from: start.start, to: document.getLine(range.endLine).end, ...describeHeader(start.text) });
+    }
+    return entries;
+}
+function toEditorLines(entry, document) {
+    const startLine = document.positionAt(entry.from).line;
+    return {
+        startLine,
+        endLine: Math.max(startLine, document.positionAt(entry.to).line),
+        ...(entry.name === undefined ? {} : { name: entry.name }),
+        ...(entry.kind === undefined ? {} : { kind: entry.kind })
+    };
+}
+/*
+ * The blocks the editor knows the document by: its own reading of the structure, or the host's
+ * where it has better, such as a language server's symbols. Ends are offsets, so an edit keeps
+ * them on their lines until the next reading.
+ */
+export class Outline {
+    structure = [];
+    provided = null;
+    version = 0;
+    cache;
+    setStructure(entries) {
+        this.structure = entries;
+        this.version++;
+    }
+    /* Blocks the host drew from its own source, in one-based lines; null goes back to the structure. */
+    setProvided(blocks, document) {
+        this.version++;
+        if (blocks === null) {
+            this.provided = null;
+            return;
+        }
+        const last = document.getLineCount() - 1;
+        const clamp = (line) => Math.min(last, Math.max(0, Math.trunc(line) - 1));
+        this.provided = blocks.map((block) => {
+            const start = document.getLine(clamp(block.startLine));
+            const header = block.name === undefined ? headerLabel(start.text) : block.name;
+            return {
+                from: start.start,
+                to: document.getLine(Math.max(clamp(block.startLine), clamp(block.endLine))).end,
+                name: header,
+                ...(block.kind === undefined ? {} : { kind: block.kind })
+            };
+        });
+    }
+    edited(batches) {
+        const move = (entries) => entries.map((entry) => {
+            let from = entry.from;
+            let to = entry.to;
+            for (const changes of batches) {
+                from = mapOffset(from, changes);
+                to = mapOffset(to, changes);
+            }
+            return { ...entry, from, to };
+        });
+        this.structure = move(this.structure);
+        this.provided = this.provided === null ? null : move(this.provided);
+        this.version++;
+    }
+    /* Outermost first. Of two blocks that start on one line, only the larger one. */
+    blocks(document) {
+        if (this.cache?.version !== this.version) {
+            const sorted = (this.provided ?? this.structure)
+                .map((entry) => toEditorLines(entry, document))
+                .sort((left, right) => left.startLine - right.startLine || right.endLine - left.endLine);
+            this.cache = { version: this.version, blocks: sorted.filter((block, index) => index === 0 || block.startLine !== sorted[index - 1].startLine) };
+        }
+        return this.cache.blocks;
+    }
+}
+/*
+ * The headers pinned at the top, outermost first. A header is pinned from the moment its own row
+ * reaches the place it would be pinned at, which is the one a row of its own is at when it comes
+ * there, so it never jumps. At the end of its block the next row pushes it up and out.
+ */
+export function stickyPlacements(blocks, scrollTop, lineHeight, max, rows) {
+    const placements = [];
+    for (let depth = 0; depth < max; depth++) {
+        const pinnedAt = scrollTop + depth * lineHeight;
+        const parent = placements.at(-1)?.block;
+        const next = blocks.find((block) => (parent === undefined || (block.startLine > parent.startLine && block.endLine <= parent.endLine)) &&
+            rows.startsRow(block.startLine) &&
+            rows.top(block.startLine) < pinnedAt &&
+            rows.bottom(block.endLine) > pinnedAt);
+        if (next === undefined) {
+            break;
+        }
+        placements.push({ block: next, depth, offset: Math.min(0, rows.bottom(next.endLine) - (pinnedAt + lineHeight)) });
+    }
+    return placements;
+}
+/* How far down from the top the pinned headers reach. */
+export function stickyCover(placements, lineHeight) {
+    return Math.max(0, ...placements.map((placement) => (placement.depth + 1) * lineHeight + placement.offset));
+}
+/* The named blocks around a line, outermost first. */
+export function scopeChain(blocks, line) {
+    return blocks.filter((block) => block.name !== undefined && block.startLine <= line && block.endLine >= line);
+}

package/dist/overview.d.ts

@@ -0,0 +1,17 @@
+export type OverviewKind = 'added' | 'modified' | 'deleted' | 'find' | 'find-current' | 'occurrence' | 'info' | 'warning' | 'error';
+export interface OverviewSpan {
+    kind: OverviewKind;
+    top: number;
+    bottom: number;
+    offset?: number;
+    title?: string;
+}
+export interface OverviewTick {
+    kind: OverviewKind;
+    y: number;
+    height: number;
+    offset?: number;
+    title?: string;
+}
+export declare function overviewTicks(spans: readonly OverviewSpan[], contentHeight: number, trackHeight: number): OverviewTick[];
+export declare function paintOverview(container: HTMLElement, ticks: readonly OverviewTick[]): void;

package/dist/overview.js

@@ -0,0 +1,55 @@
+const MIN_TICK_HEIGHT = 3;
+/*
+ * The spans of the content as ticks in a track as tall as the view. A short document is not
+ * stretched over the track, so a tick is where its line is. Ticks of one kind that touch are one.
+ */
+export function overviewTicks(spans, contentHeight, trackHeight) {
+    if (trackHeight <= 0) {
+        return [];
+    }
+    const scale = trackHeight / Math.max(contentHeight, trackHeight);
+    const ticks = spans
+        .map((span) => ({
+        kind: span.kind,
+        y: Math.round(span.top * scale),
+        height: Math.max(MIN_TICK_HEIGHT, Math.round((span.bottom - span.top) * scale)),
+        ...(span.offset === undefined ? {} : { offset: span.offset }),
+        ...(span.title === undefined ? {} : { title: span.title })
+    }))
+        .sort((left, right) => left.y - right.y);
+    const merged = [];
+    const last = new Map();
+    for (const tick of ticks) {
+        const before = last.get(tick.kind);
+        if (before && tick.y <= before.y + before.height) {
+            before.height = Math.max(before.height, tick.y + tick.height - before.y);
+            continue;
+        }
+        const next = { ...tick };
+        last.set(tick.kind, next);
+        merged.push(next);
+    }
+    return merged;
+}
+/* What is painted later is on top: the current find match, and the worse a problem is the later it goes. */
+const PAINT_ORDER = { warning: 1, error: 2, 'find-current': 3 };
+/* Draws the ticks. */
+export function paintOverview(container, ticks) {
+    const document = container.ownerDocument;
+    const order = (tick) => PAINT_ORDER[tick.kind] ?? 0;
+    container.replaceChildren(...[...ticks]
+        .sort((left, right) => order(left) - order(right))
+        .map((tick) => {
+        const element = document.createElement('span');
+        element.className = `se-tick se-tick-${tick.kind}`;
+        element.style.top = `${tick.y}px`;
+        element.style.height = `${tick.height}px`;
+        if (tick.offset !== undefined) {
+            element.setAttribute('data-offset', String(tick.offset));
+        }
+        if (tick.title !== undefined) {
+            element.setAttribute('data-title', tick.title);
+        }
+        return element;
+    }));
+}