@adecore/editor 0.0.1 → 0.17.0-beta.1

package/src/lens.ts

@@ -0,0 +1,32 @@
+import type { EditorCodeVisionEntry } from './types.ts';
+
+/* What decides whether a row has to be drawn again: the words and the icons, never the handlers, which a press looks up at the time. */
+export function lensSignature(entries: readonly EditorCodeVisionEntry[]): string {
+    return entries.map((entry) => `${entry.id}\0${entry.text}\0${entry.icon ?? ''}`).join('\n');
+}
+
+/*
+ * The entries of a row as buttons. A press looks its entry up when it happens, so an entry the host set
+ * after the row was drawn is the one that answers.
+ */
+export function fillLens(container: HTMLElement, entries: readonly EditorCodeVisionEntry[], lookup: (id: string) => EditorCodeVisionEntry | undefined): void {
+    const document = container.ownerDocument;
+    container.classList.add('se-lens');
+    for (const entry of entries) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'se-lens-entry';
+        button.tabIndex = -1;
+        if (entry.icon !== undefined) {
+            const icon = document.createElement('span');
+            icon.className = `se-lens-icon se-lens-icon-${entry.icon}`;
+            icon.setAttribute('aria-hidden', 'true');
+            button.append(icon);
+        }
+        button.append(entry.text);
+        // The editor keeps the focus, so the caret stays where it was and a popover can hand the keyboard back.
+        button.addEventListener('pointerdown', (event) => event.preventDefault());
+        button.addEventListener('click', () => lookup(entry.id)?.activate(button.getBoundingClientRect()));
+        container.append(button);
+    }
+}

package/src/listeners.ts

@@ -0,0 +1,15 @@
+export type Listener = () => void;
+
+export function subscribe(listeners: Set<Listener>, listener: Listener): () => void {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+
+/* Over a copy, so a listener that unsubscribes itself does not skip the next one. */
+export function emit(listeners: Set<Listener>): void {
+    for (const listener of [...listeners]) {
+        listener();
+    }
+}

package/src/metrics.ts

@@ -0,0 +1,65 @@
+import type { LayoutMetrics } from './layout.ts';
+
+export interface EditorFont {
+    family: string;
+    /* In pixels. */
+    size: number;
+    lineHeight: number;
+}
+
+const FALLBACK: EditorFont = { family: 'monospace', size: 13, lineHeight: 20 };
+
+function pixels(value: string): number | null {
+    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: HTMLElement): EditorFont {
+    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: EditorFont, tabSize: number, document: Document): LayoutMetrics {
+    let context: CanvasRenderingContext2D | null = 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<string, number>();
+    const measure = (text: string, face: string, fallback: number): number => {
+        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/src/modifier-gesture.ts

@@ -0,0 +1,115 @@
+/*
+ * 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.
+ */
+
+export interface GestureEvent {
+    key: string;
+    timeStamp: number;
+    repeat?: boolean;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}
+
+export type GestureAction = 'above' | 'below';
+
+/* 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 {
+    private firstPressed = false;
+    private firstReleased = false;
+    private secondPressed = false;
+    private last = 0;
+    private readonly modifier: 'Alt' | 'Control';
+
+    constructor(modifier: 'Alt' | 'Control') {
+        this.modifier = modifier;
+    }
+
+    reset(): void {
+        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(): boolean {
+        return this.firstPressed && this.firstReleased && this.secondPressed;
+    }
+
+    /* Another modifier held with the one that counts spoils the gesture. */
+    private spoiled(event: GestureEvent): boolean {
+        const others = this.modifier === 'Alt' ? event.ctrlKey || event.metaKey || event.shiftKey : event.altKey || event.metaKey || event.shiftKey;
+        return others;
+    }
+
+    keydown(event: GestureEvent): GestureAction | null {
+        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: GestureEvent): void {
+        if (event.key === this.modifier) {
+            if (this.spoiled(event)) {
+                this.reset();
+                return;
+            }
+            this.step(event, 'release');
+        } else if (!this.armed) {
+            this.reset();
+        }
+    }
+
+    private step(event: GestureEvent, kind: 'press' | 'release'): void {
+        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/src/native-input.ts

@@ -0,0 +1,179 @@
+import type { DocumentModel, Selection, TextEdit } from '@adecore/editor-core';
+import { findChange, modelOffset, textareaOffset, textareaText } from './input.ts';
+
+interface InputContext {
+    from: number;
+    source: string;
+    value: string;
+    start: number;
+    end: number;
+}
+
+export interface NativeInputHost {
+    readOnly(): boolean;
+    replace(text: string): void;
+    /* One typed character, with the pairing and the overtyping a keystroke gets. */
+    type(character: string): void;
+    apply(edit: TextEdit, selection: Selection): void;
+    preview(text: string | undefined): void;
+    selectionChanged(selection: Selection): void;
+}
+
+/* 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;
+    private context: InputContext = { from: 0, source: '', value: '', start: 0, end: 0 };
+    private compositionContext: InputContext | undefined;
+    private writing = false;
+    private readonly element: HTMLTextAreaElement;
+    private readonly model: DocumentModel;
+    private readonly host: NativeInputHost;
+
+    constructor(element: HTMLTextAreaElement, model: DocumentModel, host: NativeInputHost) {
+        this.element = element;
+        this.model = model;
+        this.host = host;
+    }
+
+    sync(): void {
+        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(): void {
+        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(): void {
+        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(): void {
+        if (this.host.readOnly()) {
+            return;
+        }
+        this.compositionContext = { ...this.context };
+        this.composing = true;
+    }
+
+    endComposition(data: string): void {
+        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: string): string {
+        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);
+    }
+
+    private composedText(): string {
+        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/src/offsets.ts

@@ -0,0 +1,16 @@
+import type { DocumentChange } from '@adecore/editor-core';
+
+/* Where an offset is after a batch of changes. One inside a replaced range lands after the new text. */
+export function mapOffset(offset: number, changes: readonly DocumentChange[]): number {
+    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/src/outline.ts

@@ -0,0 +1,248 @@
+import type { DocumentChange, FoldingRange } from '@adecore/editor-core';
+import { mapOffset } from './offsets.ts';
+import type { EditorBlock } from './types.ts';
+
+/* A block with a header line, in zero-based lines and both ends inclusive. */
+export interface OutlineBlock {
+    startLine: number;
+    endLine: number;
+    /* What a breadcrumb calls it. Blocks of the editor's own structure only have one when their header declares something. */
+    name?: string;
+    kind?: string;
+}
+
+interface OutlineEntry {
+    /* The start of the header line and the end of the last line, so an edit inside moves them along. */
+    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;
+}
+
+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: Record<string, string> = {
+    '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: string): { name?: string; kind?: string } {
+    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: string): string {
+    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: readonly FoldingRange[],
+    document: OutlineDocument,
+    slice: (from: number, to: number) => string,
+    mate: (offset: number) => number | undefined
+): OutlineEntry[] {
+    const entries: OutlineEntry[] = [];
+    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: OutlineEntry, document: OutlineDocument): OutlineBlock {
+    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 {
+    private structure: OutlineEntry[] = [];
+    private provided: OutlineEntry[] | null = null;
+    private version = 0;
+    private cache: { version: number; blocks: OutlineBlock[] } | undefined;
+
+    setStructure(entries: OutlineEntry[]): void {
+        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: readonly EditorBlock[] | null, document: OutlineDocument): void {
+        this.version++;
+        if (blocks === null) {
+            this.provided = null;
+            return;
+        }
+        const last = document.getLineCount() - 1;
+        const clamp = (line: number): number => 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: readonly (readonly DocumentChange[])[]): void {
+        const move = (entries: OutlineEntry[]): OutlineEntry[] =>
+            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: OutlineDocument): readonly OutlineBlock[] {
+        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;
+    }
+}
+
+/* Where the rows of the document are, which the pinned headers are placed by. */
+export interface StickyRows {
+    /* The top and the bottom of the row a line is drawn in. */
+    top(line: number): number;
+    bottom(line: number): number;
+    /* Whether the line starts a row of its own, which a line a fold hides does not. */
+    startsRow(line: number): boolean;
+}
+
+export interface StickyPlacement {
+    block: OutlineBlock;
+    /* How many headers are pinned above this one. */
+    depth: number;
+    /* Zero while the block goes on, then up to a row's height of pixels it is pushed out of the top by the end of its block. */
+    offset: number;
+}
+
+/*
+ * 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: readonly OutlineBlock[], scrollTop: number, lineHeight: number, max: number, rows: StickyRows): StickyPlacement[] {
+    const placements: StickyPlacement[] = [];
+    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: readonly StickyPlacement[], lineHeight: number): number {
+    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: readonly OutlineBlock[], line: number): OutlineBlock[] {
+    return blocks.filter((block) => block.name !== undefined && block.startLine <= line && block.endLine >= line);
+}