lognal 0.1.0

package/dist/viewer/viewer.js

@@ -0,0 +1,1201 @@
+import { entrySearchText } from '../core/filter.js';
+import { DEFAULT_LAYOUT_OPTIONS, LogLayout } from '../core/layout/layout.js';
+import { DEFAULT_STORE_OPTIONS, LogStore } from '../core/store.js';
+import { measureCells } from '../core/text/measure.js';
+import { formatTimestamp } from '../core/time.js';
+import { CanvasRenderer } from '../renderer/canvas/canvas-renderer.js';
+import { createConsole, hookConsole } from '../sources/console/hook.js';
+import { snapshotValue } from '../sources/console/snapshot.js';
+import { createIcon } from './icons.js';
+import { InputLine } from './input-line.js';
+import { labelsFor } from './labels.js';
+import { Scrollbar } from './scrollbar.js';
+import { readFont, readTheme } from './theme.js';
+const DEFAULT_TOOLBAR = {
+    follow: true,
+    clear: true,
+    scroll: true,
+    wrap: true,
+    filter: true,
+    levels: true
+};
+/** Padding around the text, in CSS pixels. */
+const PADDING_LEFT = 8;
+const PADDING_RIGHT = 16;
+const PADDING_TOP = 4;
+const PADDING_BOTTOM = 8;
+/** Cells of the column with the level marker. */
+const MARKER_CELLS = 3;
+/**
+ * The tallest scroll area the viewer creates. Browsers cap the height of an element; Firefox is
+ * the lowest at about 17.9 million pixels. Taller content is mapped onto this height.
+ */
+const MAX_SCROLL_HEIGHT = 15000000;
+/** How close to the bottom, in CSS pixels, still counts as following. */
+const FOLLOW_THRESHOLD = 4;
+/** How often the status bar and the screen reader mirror update, in milliseconds. */
+const ACCESSORY_DELAY = 200;
+const FILTER_DELAY = 120;
+const DRAG_THRESHOLD = 4;
+/** The most entries laid out exactly when a frame starts. Past it, row counts are estimated. */
+const SYNC_BUDGET = 2000;
+/** Rows laid out exactly above and below the view, so a short scroll finds them ready. */
+const MEASURE_MARGIN_ROWS = 50;
+/** How long one slice of background layout may run, and how many entries it takes at a time. */
+const MEASURE_SLICE_MS = 8;
+const MEASURE_BATCH = 200;
+const LEVEL_OPTIONS = [
+    { value: '', label: 'levelAll' },
+    { value: 'log', label: 'levelLog' },
+    { value: 'info', label: 'levelInfo' },
+    { value: 'warn', label: 'levelWarn' },
+    { value: 'error', label: 'levelError' }
+];
+/** Captures a pointer, ignoring the error a pointer that is no longer active throws. */
+const capturePointer = (element, pointerId) => {
+    try {
+        element.setPointerCapture(pointerId);
+    }
+    catch {
+        // The pointer ended before the capture could start.
+    }
+};
+const comparePositions = (a, b) => {
+    return a.entryId - b.entryId || a.line - b.line || a.cell - b.cell;
+};
+const pick = (source, keys) => {
+    const result = {};
+    for (const key of keys) {
+        if (source[key] !== undefined) {
+            result[key] = source[key];
+        }
+    }
+    return result;
+};
+const STORE_KEYS = Object.keys(DEFAULT_STORE_OPTIONS);
+const LAYOUT_KEYS = Object.keys(DEFAULT_LAYOUT_OPTIONS);
+/**
+ * A log viewer: a toolbar, the log drawn by a renderer, an optional input line and a status
+ * bar. The viewer does the scrolling, selection, keyboard handling and accessibility, and
+ * hands each frame to the renderer.
+ *
+ * Import `lognal/style.css` once for the layout and the themes.
+ */
+export class LogViewer {
+    store;
+    layout;
+    element;
+    ownerDocument;
+    renderer;
+    options;
+    body;
+    viewport;
+    spacer;
+    mirror;
+    verticalScrollbar;
+    horizontalScrollbar;
+    newLogsButton;
+    toolbarElement = null;
+    statusElement = null;
+    inputLine = null;
+    controls = new Map();
+    metrics = { width: 8, height: 20, baseline: 14 };
+    width = 0;
+    height = 0;
+    following;
+    hasUnseen = false;
+    topPixels = 0;
+    firstRow = 0;
+    visibleRows = [];
+    expectedScrollTop = null;
+    lastScrollTop = 0;
+    anchor = null;
+    columns = 1;
+    measureTimer;
+    selection = null;
+    drag = null;
+    autoScrollFrame = 0;
+    lastPointer = null;
+    frame = 0;
+    accessoryTimer;
+    filterTimer;
+    filter = null;
+    listeners = new Map();
+    cleanups = [];
+    consoleObject = null;
+    /** The wrapping mode the toolbar button restores after turning wrapping off. */
+    wrapMode = 'word';
+    cachedNumberFormat = null;
+    disposed = false;
+    constructor(container, options = {}) {
+        this.ownerDocument = container.ownerDocument;
+        const core = options.core ?? {};
+        this.store = options.store ?? new LogStore(pick(core, STORE_KEYS));
+        if (options.store && Object.keys(pick(core, STORE_KEYS)).length > 0) {
+            this.store.setOptions(pick(core, STORE_KEYS));
+        }
+        this.layout = new LogLayout(this.store, pick(core, LAYOUT_KEYS));
+        this.options = this.resolveOptions(options);
+        this.following = options.follow ?? true;
+        const doc = this.ownerDocument;
+        this.element = doc.createElement('div');
+        this.element.className = 'lognal';
+        this.body = doc.createElement('div');
+        this.body.className = 'lognal-body';
+        this.viewport = doc.createElement('div');
+        this.viewport.className = 'lognal-viewport';
+        this.viewport.tabIndex = 0;
+        this.spacer = doc.createElement('div');
+        this.spacer.className = 'lognal-spacer';
+        this.viewport.append(this.spacer);
+        this.mirror = doc.createElement('ul');
+        this.mirror.className = 'lognal-mirror';
+        this.renderer = options.renderer ? options.renderer(doc) : new CanvasRenderer(doc);
+        this.verticalScrollbar = new Scrollbar(doc, 'vertical', this.viewport);
+        this.horizontalScrollbar = new Scrollbar(doc, 'horizontal', this.viewport);
+        this.newLogsButton = doc.createElement('button');
+        this.newLogsButton.type = 'button';
+        this.newLogsButton.className = 'lognal-new-logs';
+        this.newLogsButton.hidden = true;
+        this.newLogsButton.addEventListener('click', () => this.scrollToBottom());
+        this.body.append(this.renderer.element, this.viewport, this.mirror, this.verticalScrollbar.element, this.horizontalScrollbar.element, this.newLogsButton);
+        this.element.append(this.body);
+        container.append(this.element);
+        this.buildChrome();
+        this.applyTheme();
+        this.applyFont();
+        if (core.filter) {
+            this.setFilter(core.filter);
+        }
+        this.bindEvents();
+        this.onResize();
+    }
+    /** An object with the console methods that writes to this viewer's store. */
+    get console() {
+        if (!this.consoleObject) {
+            this.consoleObject = createConsole(this.store);
+        }
+        return this.consoleObject;
+    }
+    /** Whether the view follows new entries. */
+    get isFollowing() {
+        return this.following;
+    }
+    /** Changes options after creation. Only the options given are changed. */
+    setOptions(options) {
+        const core = options.core ?? {};
+        const storeOptions = pick(core, STORE_KEYS);
+        const layoutOptions = pick(core, LAYOUT_KEYS);
+        if (Object.keys(storeOptions).length > 0) {
+            this.store.setOptions(storeOptions);
+        }
+        if (Object.keys(layoutOptions).length > 0) {
+            this.layout.setOptions(layoutOptions);
+            this.syncWrapButton();
+        }
+        if (core.filter !== undefined) {
+            this.setFilter(core.filter);
+        }
+        const previous = this.options;
+        this.options = this.resolveOptions({ ...this.unresolvedOptions(), ...options });
+        if (options.toolbar !== undefined ||
+            options.statusBar !== undefined ||
+            options.input !== undefined ||
+            options.labels !== undefined ||
+            'locale' in options) {
+            this.buildChrome();
+        }
+        if (options.theme !== undefined && options.theme !== previous.theme) {
+            this.applyTheme();
+        }
+        if (options.font !== undefined || options.timestamps !== undefined) {
+            this.applyFont();
+        }
+        if (options.follow !== undefined) {
+            this.setFollowing(options.follow);
+        }
+        this.requestRender();
+    }
+    /** Adds text as one entry. */
+    write(text, options) {
+        this.store.write(text, options);
+    }
+    /** Adds text as one entry per line. */
+    writeLines(text, options) {
+        this.store.writeLines(text, options);
+    }
+    /**
+     * Starts recording a console, `console` by default, into this viewer's store. Returns a
+     * function that stops recording. Recording also stops when the viewer is disposed.
+     */
+    hookConsole(target = console, options) {
+        const unhook = hookConsole(target, this.store, options);
+        this.cleanups.push(unhook);
+        return unhook;
+    }
+    /** Removes every entry. */
+    clear() {
+        this.store.clear();
+        this.selection = null;
+        this.hasUnseen = false;
+    }
+    /** Sets the filter. `null` shows every entry. */
+    setFilter(filter) {
+        this.filter = filter;
+        const compiled = this.layout.setFilter(filter);
+        const input = this.controls.get('filter');
+        const levels = this.controls.get('levels');
+        if (input instanceof HTMLInputElement) {
+            if (input.value !== (filter?.text ?? '')) {
+                input.value = filter?.text ?? '';
+            }
+            input.toggleAttribute('aria-invalid', compiled.error !== null);
+            input.title = compiled.error ? this.options.labels.invalidFilter : '';
+        }
+        if (levels instanceof HTMLSelectElement) {
+            levels.value = filter?.minLevel ?? '';
+        }
+        this.emit('filter', filter);
+        this.requestRender();
+    }
+    getFilter() {
+        return this.filter;
+    }
+    /** Turns following new entries on or off. Turning it on scrolls to the newest entry. */
+    setFollowing(following) {
+        if (this.following === following) {
+            return;
+        }
+        this.following = following;
+        if (following) {
+            this.hasUnseen = false;
+        }
+        const button = this.controls.get('follow');
+        if (button) {
+            button.setAttribute('aria-pressed', String(following));
+        }
+        this.emit('follow', following);
+        this.requestRender();
+    }
+    scrollToTop() {
+        this.setFollowing(false);
+        this.layout.sync(SYNC_BUDGET);
+        const first = this.layout.entryAt(0);
+        this.anchor = first ? { entryId: first.id, entryRow: 0, offset: PADDING_TOP } : null;
+        this.viewport.scrollTop = 0;
+        this.lastScrollTop = 0;
+        this.requestRender();
+    }
+    scrollToBottom() {
+        this.setFollowing(true);
+        this.requestRender();
+    }
+    /** Scrolls so that an entry is at the top of the view. */
+    scrollToEntry(entryId) {
+        this.layout.sync(SYNC_BUDGET);
+        if (this.layout.indexOf(entryId) < 0) {
+            return;
+        }
+        this.setFollowing(false);
+        this.anchor = { entryId, entryRow: 0, offset: 0 };
+        this.requestRender();
+    }
+    /** Returns the selected text, or an empty string. */
+    getSelectionText() {
+        if (!this.selection || comparePositions(this.selection.anchor, this.selection.head) === 0) {
+            return '';
+        }
+        this.layout.sync();
+        return this.layout.getText(this.selection.anchor, this.selection.head);
+    }
+    /** Selects the text of every visible entry. */
+    selectAll() {
+        this.layout.sync();
+        const first = this.layout.entryAt(0);
+        const last = this.layout.entryAt(this.layout.visibleCount - 1);
+        if (!first || !last) {
+            return;
+        }
+        this.selection = {
+            anchor: { entryId: first.id, line: 0, cell: 0 },
+            head: { entryId: last.id, line: Number.MAX_SAFE_INTEGER, cell: Number.MAX_SAFE_INTEGER }
+        };
+        this.emit('selection', this.getSelectionText());
+        this.requestRender();
+    }
+    clearSelection() {
+        if (!this.selection) {
+            return;
+        }
+        this.selection = null;
+        this.emit('selection', '');
+        this.requestRender();
+    }
+    /** Copies the selected text to the clipboard. Resolves to whether anything was copied. */
+    async copySelection() {
+        const text = this.getSelectionText();
+        if (!text) {
+            return false;
+        }
+        const view = this.ownerDocument.defaultView;
+        const clipboard = view?.navigator.clipboard;
+        if (clipboard?.writeText && view?.isSecureContext) {
+            try {
+                await clipboard.writeText(text);
+                return true;
+            }
+            catch {
+                // Fall back to the copy command below.
+            }
+        }
+        const textarea = this.ownerDocument.createElement('textarea');
+        textarea.value = text;
+        textarea.setAttribute('readonly', '');
+        textarea.className = 'lognal-clipboard';
+        this.element.append(textarea);
+        textarea.select();
+        let copied;
+        try {
+            copied = this.ownerDocument.execCommand('copy');
+        }
+        catch {
+            copied = false;
+        }
+        textarea.remove();
+        this.viewport.focus({ preventScroll: true });
+        return copied;
+    }
+    /** Moves keyboard focus to the input line, or to the log when there is no input line. */
+    focus() {
+        if (this.inputLine) {
+            this.inputLine.focus();
+        }
+        else {
+            this.viewport.focus();
+        }
+    }
+    /** Reads the theme and the font from CSS again, for example after the page changed them. */
+    refresh() {
+        this.applyTheme();
+        this.applyFont();
+    }
+    /** Calls a listener for an event. Returns a function that removes the listener. */
+    on(name, listener) {
+        const listeners = this.listeners.get(name) ?? new Set();
+        listeners.add(listener);
+        this.listeners.set(name, listeners);
+        return () => {
+            listeners.delete(listener);
+        };
+    }
+    /** Removes the viewer from the page and stops everything it started. */
+    dispose() {
+        if (this.disposed) {
+            return;
+        }
+        this.disposed = true;
+        cancelAnimationFrame(this.frame);
+        cancelAnimationFrame(this.autoScrollFrame);
+        clearTimeout(this.accessoryTimer);
+        clearTimeout(this.filterTimer);
+        clearTimeout(this.measureTimer);
+        for (const cleanup of this.cleanups.splice(0)) {
+            cleanup();
+        }
+        this.layout.dispose();
+        this.renderer.dispose();
+        this.verticalScrollbar.dispose();
+        this.horizontalScrollbar.dispose();
+        this.inputLine?.dispose();
+        this.listeners.clear();
+        this.element.remove();
+    }
+    resolveOptions(options) {
+        const labelOverrides = options.labels ?? {};
+        const labels = { ...labelsFor(options.locale), ...labelOverrides };
+        const toolbar = options.toolbar === false
+            ? null
+            : options.toolbar === true || options.toolbar === undefined
+                ? DEFAULT_TOOLBAR
+                : { ...DEFAULT_TOOLBAR, ...options.toolbar };
+        const timestamps = options.timestamps === false
+            ? null
+            : options.timestamps === true || options.timestamps === undefined
+                ? 'time'
+                : options.timestamps;
+        return {
+            theme: options.theme ?? 'auto',
+            font: options.font ?? {},
+            timestamps,
+            toolbar,
+            statusBar: options.statusBar ?? true,
+            input: options.input ?? null,
+            locale: options.locale,
+            labels,
+            labelOverrides
+        };
+    }
+    unresolvedOptions() {
+        const { theme, font, timestamps, toolbar, statusBar, input, locale, labelOverrides } = this.options;
+        return {
+            theme,
+            font,
+            timestamps: timestamps ?? false,
+            toolbar: toolbar ?? false,
+            statusBar,
+            input,
+            locale,
+            labels: labelOverrides
+        };
+    }
+    emit(name, value) {
+        for (const listener of this.listeners.get(name) ?? []) {
+            listener(value);
+        }
+    }
+    listen(target, type, handler, options) {
+        target.addEventListener(type, handler, options);
+        this.cleanups.push(() => target.removeEventListener(type, handler, options));
+    }
+    bindEvents() {
+        const view = this.ownerDocument.defaultView;
+        this.listen(this.viewport, 'scroll', this.onScroll, { passive: true });
+        this.listen(this.viewport, 'pointerdown', this.onPointerDown);
+        this.listen(this.viewport, 'pointermove', this.onPointerMove);
+        this.listen(this.viewport, 'pointerup', this.onPointerUp);
+        this.listen(this.viewport, 'pointercancel', this.onPointerUp);
+        this.listen(this.viewport, 'dblclick', this.onDoubleClick);
+        this.listen(this.viewport, 'keydown', this.onKeyDown);
+        this.listen(this.viewport, 'copy', this.onCopy);
+        this.cleanups.push(this.store.subscribe(this.onStoreChange));
+        this.renderer.onFontsChanged(() => this.applyFont());
+        if (view && 'ResizeObserver' in view) {
+            const observer = new view.ResizeObserver(() => this.onResize());
+            observer.observe(this.body);
+            this.cleanups.push(() => observer.disconnect());
+        }
+        if (view?.matchMedia) {
+            const scheme = view.matchMedia('(prefers-color-scheme: dark)');
+            this.listen(scheme, 'change', () => {
+                if (this.options.theme === 'auto') {
+                    this.applyTheme();
+                }
+            });
+            this.watchPixelRatio();
+        }
+        const fonts = this.ownerDocument.fonts;
+        if (fonts?.ready) {
+            fonts.ready.then(() => {
+                if (!this.disposed) {
+                    this.applyFont();
+                }
+            });
+        }
+    }
+    watchPixelRatio() {
+        const view = this.ownerDocument.defaultView;
+        if (!view?.matchMedia) {
+            return;
+        }
+        const query = view.matchMedia(`(resolution: ${view.devicePixelRatio}dppx)`);
+        const onChange = () => {
+            query.removeEventListener('change', onChange);
+            if (!this.disposed) {
+                this.onResize();
+                this.watchPixelRatio();
+            }
+        };
+        query.addEventListener('change', onChange);
+        this.cleanups.push(() => query.removeEventListener('change', onChange));
+    }
+    buildChrome() {
+        const doc = this.ownerDocument;
+        const { labels, toolbar, statusBar, input } = this.options;
+        this.toolbarElement?.remove();
+        this.statusElement?.remove();
+        this.controls.clear();
+        this.element.setAttribute('role', 'region');
+        this.element.setAttribute('aria-label', labels.viewer);
+        this.viewport.setAttribute('aria-label', labels.viewer);
+        this.mirror.setAttribute('aria-label', labels.entryList);
+        this.newLogsButton.replaceChildren(createIcon(doc, 'arrowDown'), doc.createTextNode(labels.newLogs));
+        if (toolbar) {
+            this.toolbarElement = this.buildToolbar(toolbar, labels);
+            this.element.prepend(this.toolbarElement);
+        }
+        else {
+            this.toolbarElement = null;
+        }
+        if (input) {
+            const lineOptions = {
+                onSubmit: (command) => this.onCommand(command),
+                prompt: input.prompt ?? '>',
+                placeholder: input.placeholder ?? labels.inputPlaceholder,
+                label: labels.input,
+                historySize: input.historySize ?? 100
+            };
+            if (this.inputLine) {
+                this.inputLine.setOptions(lineOptions);
+            }
+            else {
+                this.inputLine = new InputLine(doc, lineOptions);
+            }
+            this.body.after(this.inputLine.element);
+        }
+        else if (this.inputLine) {
+            this.inputLine.dispose();
+            this.inputLine = null;
+        }
+        if (statusBar) {
+            this.statusElement = doc.createElement('div');
+            this.statusElement.className = 'lognal-statusbar';
+            const count = doc.createElement('span');
+            const follow = doc.createElement('span');
+            count.className = 'lognal-status-count';
+            follow.className = 'lognal-status-follow';
+            this.statusElement.append(count, follow);
+            this.element.append(this.statusElement);
+        }
+        else {
+            this.statusElement = null;
+        }
+        this.updateAccessories();
+    }
+    buildToolbar(toolbar, labels) {
+        const doc = this.ownerDocument;
+        const element = doc.createElement('div');
+        const start = doc.createElement('div');
+        const end = doc.createElement('div');
+        element.className = 'lognal-toolbar';
+        element.setAttribute('role', 'toolbar');
+        element.setAttribute('aria-label', labels.toolbar);
+        start.className = 'lognal-toolbar-group';
+        end.className = 'lognal-toolbar-group lognal-toolbar-end';
+        const button = (name, icon, label, onClick, pressed) => {
+            const control = doc.createElement('button');
+            control.type = 'button';
+            control.className = 'lognal-button';
+            control.title = label;
+            control.setAttribute('aria-label', label);
+            control.append(createIcon(doc, icon));
+            if (pressed !== undefined) {
+                control.setAttribute('aria-pressed', String(pressed));
+            }
+            control.addEventListener('click', onClick);
+            start.append(control);
+            this.controls.set(name, control);
+        };
+        const separator = () => {
+            if (start.lastElementChild &&
+                !start.lastElementChild.classList.contains('lognal-separator')) {
+                const line = doc.createElement('span');
+                line.className = 'lognal-separator';
+                line.setAttribute('aria-hidden', 'true');
+                start.append(line);
+            }
+        };
+        if (toolbar.follow) {
+            button('follow', 'follow', labels.follow, () => this.setFollowing(!this.following), this.following);
+        }
+        if (toolbar.clear) {
+            button('clear', 'clear', labels.clear, () => this.clear());
+        }
+        if (toolbar.scroll) {
+            separator();
+            button('top', 'top', labels.scrollToTop, () => this.scrollToTop());
+            button('bottom', 'bottom', labels.scrollToBottom, () => this.scrollToBottom());
+        }
+        if (toolbar.wrap) {
+            separator();
+            button('wrap', 'wrap', labels.wrap, () => {
+                const current = this.layout.getOptions().wrap;
+                if (current !== 'none') {
+                    this.wrapMode = current;
+                }
+                this.layout.setOptions({ wrap: current === 'none' ? this.wrapMode : 'none' });
+                this.syncWrapButton();
+                this.requestRender();
+            }, this.layout.getOptions().wrap !== 'none');
+        }
+        if (toolbar.filter) {
+            const field = doc.createElement('label');
+            const input = doc.createElement('input');
+            field.className = 'lognal-filter';
+            field.append(createIcon(doc, 'search'));
+            input.type = 'search';
+            input.className = 'lognal-filter-input';
+            input.placeholder = labels.filter;
+            input.setAttribute('aria-label', labels.filter);
+            input.spellcheck = false;
+            input.value = this.filter?.text ?? '';
+            input.addEventListener('input', () => {
+                clearTimeout(this.filterTimer);
+                this.filterTimer = setTimeout(() => {
+                    this.setFilter({ ...this.filter, text: input.value });
+                }, FILTER_DELAY);
+            });
+            field.append(input);
+            end.append(field);
+            this.controls.set('filter', input);
+        }
+        if (toolbar.levels) {
+            const select = doc.createElement('select');
+            select.className = 'lognal-levels';
+            select.setAttribute('aria-label', labels.levels);
+            select.title = labels.levels;
+            for (const option of LEVEL_OPTIONS) {
+                const element = doc.createElement('option');
+                element.value = option.value;
+                element.textContent = labels[option.label];
+                select.append(element);
+            }
+            select.value = this.filter?.minLevel ?? '';
+            select.addEventListener('change', () => {
+                // The menu sets a minimum level, which replaces a list of levels set through code.
+                this.setFilter({
+                    ...this.filter,
+                    levels: undefined,
+                    minLevel: (select.value || undefined)
+                });
+            });
+            end.append(select);
+            this.controls.set('levels', select);
+        }
+        element.append(start, end);
+        return element;
+    }
+    syncWrapButton() {
+        this.controls
+            .get('wrap')
+            ?.setAttribute('aria-pressed', String(this.layout.getOptions().wrap !== 'none'));
+    }
+    applyTheme() {
+        this.element.dataset.theme = this.options.theme;
+        this.renderer.setTheme(readTheme(this.element));
+        this.requestRender();
+    }
+    applyFont() {
+        if (this.disposed) {
+            return;
+        }
+        this.metrics = this.renderer.setFont(readFont(this.element, this.options.font));
+        this.element.style.setProperty('--lognal-cell-height', `${this.metrics.height}px`);
+        this.updateColumns();
+        this.requestRender();
+    }
+    timestampCells() {
+        const format = this.options.timestamps;
+        if (format === null) {
+            return 0;
+        }
+        return measureCells(formatTimestamp(Date.now(), format)) + 2;
+    }
+    contentLeft() {
+        return PADDING_LEFT + (this.timestampCells() + MARKER_CELLS) * this.metrics.width;
+    }
+    updateColumns() {
+        const available = this.width - this.contentLeft() - PADDING_RIGHT;
+        this.columns = Math.max(1, Math.floor(available / this.metrics.width));
+        this.layout.setColumns(this.columns);
+    }
+    scrollScale() {
+        const content = this.contentHeight();
+        const client = this.viewport.clientHeight;
+        const scrollable = Math.min(content, MAX_SCROLL_HEIGHT);
+        if (content <= scrollable || scrollable <= client) {
+            return 1;
+        }
+        return (content - client) / (scrollable - client);
+    }
+    contentHeight() {
+        return PADDING_TOP + this.layout.rowCount * this.metrics.height + PADDING_BOTTOM;
+    }
+    requestRender() {
+        if (this.frame || this.disposed) {
+            return;
+        }
+        const view = this.ownerDocument.defaultView;
+        this.frame = (view ?? globalThis).requestAnimationFrame(() => {
+            this.frame = 0;
+            this.render();
+        });
+    }
+    render() {
+        if (this.disposed || this.width <= 0 || this.height <= 0) {
+            return;
+        }
+        this.layout.sync(SYNC_BUDGET);
+        const viewport = this.viewport;
+        const rowHeight = this.metrics.height;
+        const client = viewport.clientHeight;
+        const screenRows = Math.ceil(this.height / rowHeight) + 1;
+        const scrollTop = viewport.scrollTop;
+        // The view was scrolled since the last frame, and its scroll event has not arrived yet.
+        // Follow the new position rather than the old anchor, and stop following the bottom.
+        if (Math.abs(scrollTop - Math.min(this.lastScrollTop, viewport.scrollHeight - client)) >= 1) {
+            this.anchor = null;
+            if (this.following && viewport.scrollHeight - client - scrollTop > FOLLOW_THRESHOLD) {
+                this.setFollowing(false);
+            }
+        }
+        if (!this.following && !this.anchor) {
+            this.anchor = this.anchorAt(scrollTop * this.scrollScale());
+        }
+        // Lay out the rows on screen exactly before reading them. The rest of the log keeps its
+        // estimated row counts until `measurePending` gets to it.
+        if (this.following) {
+            this.layout.measureAround(null, screenRows + MEASURE_MARGIN_ROWS, 1);
+        }
+        else if (this.anchor) {
+            this.layout.measureAround(this.anchor.entryId, MEASURE_MARGIN_ROWS, screenRows + MEASURE_MARGIN_ROWS);
+        }
+        const content = this.contentHeight();
+        const spacerHeight = Math.min(content, MAX_SCROLL_HEIGHT);
+        const wide = this.layout.getOptions().wrap === 'none' || this.layout.maxCells > this.columns;
+        this.spacer.style.height = `${spacerHeight}px`;
+        this.spacer.style.width = wide
+            ? `${this.contentLeft() + this.layout.maxCells * this.metrics.width + PADDING_RIGHT}px`
+            : '';
+        const maxTop = Math.max(0, content - client);
+        const scale = this.scrollScale();
+        let topPixels = Math.min(maxTop, viewport.scrollTop * scale);
+        if (this.following) {
+            topPixels = maxTop;
+        }
+        else if (this.anchor) {
+            const entryStart = this.layout.rowOfEntry(this.anchor.entryId);
+            if (entryStart < 0) {
+                this.anchor = null;
+            }
+            else {
+                const entryRow = Math.min(this.anchor.entryRow, Math.max(0, this.layout.rowsOf(this.anchor.entryId) - 1));
+                topPixels = Math.min(maxTop, Math.max(0, PADDING_TOP + (entryStart + entryRow) * rowHeight - this.anchor.offset));
+            }
+        }
+        const targetScrollTop = topPixels / scale;
+        if (Math.abs(viewport.scrollTop - targetScrollTop) >= 1) {
+            this.expectedScrollTop = targetScrollTop;
+            viewport.scrollTop = targetScrollTop;
+        }
+        const firstRow = Math.max(0, Math.floor((topPixels - PADDING_TOP) / rowHeight));
+        const offsetY = PADDING_TOP + firstRow * rowHeight - topPixels;
+        const rows = this.layout.getRows(firstRow, Math.ceil((this.height - offsetY) / rowHeight) + 1);
+        this.topPixels = topPixels;
+        this.firstRow = firstRow;
+        this.visibleRows = rows;
+        this.lastScrollTop = viewport.scrollTop;
+        this.anchor =
+            this.following || !rows[0]
+                ? null
+                : { entryId: rows[0].entry.id, entryRow: rows[0].entryRow, offset: offsetY };
+        this.renderer.render({
+            rows,
+            decorations: rows.map((row) => this.decorationFor(row)),
+            offsetY,
+            scrollX: viewport.scrollLeft,
+            paddingLeft: PADDING_LEFT,
+            timestampCells: this.timestampCells(),
+            markerCells: MARKER_CELLS,
+            formatTime: (time) => formatTimestamp(time, this.options.timestamps ?? 'time')
+        });
+        this.verticalScrollbar.update();
+        this.horizontalScrollbar.update();
+        this.newLogsButton.hidden = this.following || !this.hasUnseen;
+        this.updateStatus();
+        this.scheduleAccessories();
+        this.scheduleMeasure();
+    }
+    /** Returns an anchor for the row at a pixel position of the whole log. */
+    anchorAt(topPixels) {
+        const row = Math.max(0, Math.floor((topPixels - PADDING_TOP) / this.metrics.height));
+        const located = this.layout.locateRow(row);
+        if (!located) {
+            return null;
+        }
+        return {
+            entryId: located.entry.id,
+            entryRow: located.entryRow,
+            offset: PADDING_TOP + row * this.metrics.height - topPixels
+        };
+    }
+    /**
+     * Lays out the entries that still have estimated row counts, a slice at a time between
+     * frames, starting with the ones nearest to the view.
+     */
+    scheduleMeasure() {
+        if (this.measureTimer !== undefined || this.disposed || this.layout.pendingCount === 0) {
+            return;
+        }
+        this.measureTimer = setTimeout(() => {
+            this.measureTimer = undefined;
+            const started = performance.now();
+            const focus = this.following ? null : (this.anchor?.entryId ?? null);
+            let changed = false;
+            while (this.layout.pendingCount > 0 && performance.now() - started < MEASURE_SLICE_MS) {
+                changed = this.layout.measurePending(MEASURE_BATCH, focus) || changed;
+            }
+            if (changed) {
+                this.requestRender();
+            }
+            this.scheduleMeasure();
+        }, 0);
+    }
+    decorationFor(row) {
+        const decoration = {};
+        const selection = this.selection;
+        if (selection && comparePositions(selection.anchor, selection.head) !== 0) {
+            const [start, end] = comparePositions(selection.anchor, selection.head) < 0
+                ? [selection.anchor, selection.head]
+                : [selection.head, selection.anchor];
+            const line = { entryId: row.entry.id, line: row.line, cell: 0 };
+            const afterStart = row.entry.id > start.entryId || (row.entry.id === start.entryId && row.line >= start.line);
+            const beforeEnd = row.entry.id < end.entryId || (row.entry.id === end.entryId && row.line <= end.line);
+            if (afterStart && beforeEnd) {
+                const rowEnd = row.startCell + row.cells;
+                const isStartLine = line.entryId === start.entryId && line.line === start.line;
+                const isEndLine = line.entryId === end.entryId && line.line === end.line;
+                const from = Math.max(row.startCell, isStartLine ? start.cell : 0);
+                const to = Math.min(rowEnd, isEndLine ? end.cell : rowEnd);
+                const lineBreak = !isEndLine && to === rowEnd ? 1 : 0;
+                if (to > from || lineBreak) {
+                    decoration.selection = [
+                        row.indent + from - row.startCell,
+                        row.indent + to - row.startCell + lineBreak
+                    ];
+                }
+            }
+        }
+        const pattern = this.layout.getFilter().pattern;
+        if (pattern) {
+            decoration.matches = this.findMatches(row, pattern);
+        }
+        return decoration;
+    }
+    findMatches(row, pattern) {
+        const columns = [];
+        let text = '';
+        let end = row.indent;
+        for (const run of row.runs) {
+            if (run.icon) {
+                continue;
+            }
+            if (run.simple) {
+                for (let index = 0; index < run.text.length; index++) {
+                    columns.push(run.column + index);
+                }
+                text += run.text;
+            }
+            else {
+                let column = run.column;
+                run.clusters.forEach((cluster, index) => {
+                    // The filter text is composed (NFC), so the row text is compared composed too.
+                    const composed = cluster.normalize('NFC');
+                    for (let unit = 0; unit < composed.length; unit++) {
+                        columns.push(column);
+                    }
+                    text += composed;
+                    column += run.widths[index] ?? 1;
+                });
+            }
+            end = run.column + run.cells;
+        }
+        columns.push(end);
+        const matches = [];
+        pattern.lastIndex = 0;
+        for (let match = pattern.exec(text); match && matches.length < 64; match = pattern.exec(text)) {
+            if (match[0].length === 0) {
+                pattern.lastIndex++;
+                continue;
+            }
+            matches.push([columns[match.index], columns[match.index + match[0].length] ?? end]);
+        }
+        return matches;
+    }
+    scheduleAccessories() {
+        if (this.accessoryTimer !== undefined) {
+            return;
+        }
+        this.accessoryTimer = setTimeout(() => {
+            this.accessoryTimer = undefined;
+            this.updateAccessories();
+        }, ACCESSORY_DELAY);
+    }
+    /** Updates the status bar. Cheap enough for every frame, since text is only written when it changes. */
+    updateStatus() {
+        if (!this.statusElement) {
+            return;
+        }
+        const { labels, locale } = this.options;
+        const [count, follow] = Array.from(this.statusElement.children);
+        const numberFormat = this.numberFormat(locale);
+        const countText = labels.entries(this.layout.visibleCount, this.store.size, (value) => numberFormat.format(value));
+        const followText = this.following ? labels.following : labels.paused;
+        if (count.textContent !== countText) {
+            count.textContent = countText;
+        }
+        if (follow.textContent !== followText) {
+            follow.textContent = followText;
+            follow.classList.toggle('is-following', this.following);
+        }
+    }
+    updateAccessories() {
+        if (this.disposed) {
+            return;
+        }
+        this.updateStatus();
+        const doc = this.ownerDocument;
+        const seen = new Set();
+        const items = [];
+        for (const row of this.visibleRows) {
+            if (seen.has(row.entry.id)) {
+                continue;
+            }
+            seen.add(row.entry.id);
+            const item = doc.createElement('li');
+            const prefix = row.entry.level === 'error' || row.entry.level === 'warn' ? `${row.entry.level}: ` : '';
+            item.textContent = `${prefix}${entrySearchText(row.entry)}`;
+            items.push(item);
+        }
+        this.mirror.replaceChildren(...items);
+    }
+    numberFormat(locale) {
+        if (!this.cachedNumberFormat || this.cachedNumberFormat.locale !== locale) {
+            this.cachedNumberFormat = { locale, format: new Intl.NumberFormat(locale) };
+        }
+        return this.cachedNumberFormat.format;
+    }
+    hitTest(event) {
+        const rect = this.viewport.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const row = Math.floor((y + this.topPixels - PADDING_TOP) / this.metrics.height);
+        const exactColumn = (x + this.viewport.scrollLeft - this.contentLeft()) / this.metrics.width;
+        const visualRow = this.visibleRows[row - this.firstRow];
+        const cellColumn = Math.floor(exactColumn);
+        const run = visualRow?.runs.find((item) => cellColumn >= item.column && cellColumn < item.column + item.cells);
+        return {
+            row,
+            column: Math.max(0, Math.round(exactColumn)),
+            visualRow,
+            action: run?.action
+        };
+    }
+    positionFrom(hit) {
+        if (hit.row < 0) {
+            const first = this.layout.entryAt(0);
+            return first ? { entryId: first.id, line: 0, cell: 0 } : null;
+        }
+        return this.layout.positionAt(hit.row, hit.column);
+    }
+    onStoreChange = (change) => {
+        if (change.type === 'append' && !this.following) {
+            this.hasUnseen = true;
+        }
+        else if (change.type === 'clear') {
+            this.hasUnseen = false;
+        }
+        this.requestRender();
+    };
+    onResize = () => {
+        const view = this.ownerDocument.defaultView;
+        const width = this.body.clientWidth;
+        const height = this.body.clientHeight;
+        this.width = width;
+        this.height = height;
+        this.renderer.resize(width, height, view?.devicePixelRatio ?? 1);
+        this.updateColumns();
+        this.requestRender();
+    };
+    onScroll = () => {
+        const top = this.viewport.scrollTop;
+        if (this.expectedScrollTop !== null && Math.abs(top - this.expectedScrollTop) < 1) {
+            this.expectedScrollTop = null;
+        }
+        else {
+            this.expectedScrollTop = null;
+            this.anchor = null;
+            const atBottom = top + this.viewport.clientHeight >= this.viewport.scrollHeight - FOLLOW_THRESHOLD;
+            this.setFollowing(atBottom);
+        }
+        this.lastScrollTop = top;
+        this.verticalScrollbar.update(true);
+        this.horizontalScrollbar.update(true);
+        this.requestRender();
+    };
+    onPointerDown = (event) => {
+        if (event.button !== 0 || event.pointerType === 'touch') {
+            return;
+        }
+        event.preventDefault();
+        this.viewport.focus({ preventScroll: true });
+        const hit = this.hitTest(event);
+        const position = this.positionFrom(hit);
+        this.drag = {
+            pointerId: event.pointerId,
+            x: event.clientX,
+            y: event.clientY,
+            action: hit.action ? hit : null,
+            moved: false
+        };
+        this.lastPointer = { x: event.clientX, y: event.clientY };
+        capturePointer(this.viewport, event.pointerId);
+        if (!position) {
+            this.clearSelection();
+            return;
+        }
+        if (event.shiftKey && this.selection) {
+            this.selection = { anchor: this.selection.anchor, head: position };
+        }
+        else {
+            this.selection = { anchor: position, head: position };
+        }
+        this.requestRender();
+    };
+    onPointerMove = (event) => {
+        if (!this.drag || event.pointerId !== this.drag.pointerId) {
+            const hit = this.hitTest(event);
+            this.viewport.classList.toggle('has-action', Boolean(hit.action));
+            return;
+        }
+        this.lastPointer = { x: event.clientX, y: event.clientY };
+        if (Math.hypot(event.clientX - this.drag.x, event.clientY - this.drag.y) > DRAG_THRESHOLD) {
+            this.drag.moved = true;
+        }
+        this.extendSelection();
+        this.updateAutoScroll();
+    };
+    onPointerUp = (event) => {
+        if (!this.drag || event.pointerId !== this.drag.pointerId) {
+            return;
+        }
+        const { action, moved } = this.drag;
+        this.drag = null;
+        cancelAnimationFrame(this.autoScrollFrame);
+        this.autoScrollFrame = 0;
+        if (this.viewport.hasPointerCapture(event.pointerId)) {
+            this.viewport.releasePointerCapture(event.pointerId);
+        }
+        if (action?.action && action.visualRow && !moved) {
+            this.selection = null;
+            this.layout.runAction(action.visualRow.entry.id, action.action);
+            this.requestRender();
+            return;
+        }
+        const text = this.getSelectionText();
+        if (!text) {
+            this.selection = null;
+        }
+        this.emit('selection', text);
+        this.requestRender();
+    };
+    extendSelection() {
+        if (!this.selection || !this.lastPointer) {
+            return;
+        }
+        const rect = this.viewport.getBoundingClientRect();
+        const clientY = Math.min(Math.max(this.lastPointer.y, rect.top - 1), rect.bottom + 1);
+        const position = this.positionFrom(this.hitTest({ clientX: this.lastPointer.x, clientY }));
+        if (position) {
+            this.selection = { anchor: this.selection.anchor, head: position };
+            this.requestRender();
+        }
+    }
+    updateAutoScroll() {
+        if (this.autoScrollFrame || !this.drag || !this.lastPointer) {
+            return;
+        }
+        const view = this.ownerDocument.defaultView ?? globalThis;
+        const step = () => {
+            this.autoScrollFrame = 0;
+            if (!this.drag || !this.lastPointer) {
+                return;
+            }
+            const rect = this.viewport.getBoundingClientRect();
+            const above = rect.top - this.lastPointer.y;
+            const below = this.lastPointer.y - rect.bottom;
+            const distance = above > 0 ? -above : below > 0 ? below : 0;
+            if (distance === 0) {
+                return;
+            }
+            this.setFollowing(false);
+            this.viewport.scrollTop +=
+                Math.sign(distance) * Math.min(this.metrics.height * 3, Math.abs(distance));
+            this.extendSelection();
+            this.autoScrollFrame = view.requestAnimationFrame(step);
+        };
+        this.autoScrollFrame = view.requestAnimationFrame(step);
+    }
+    onDoubleClick = (event) => {
+        const hit = this.hitTest(event);
+        if (hit.action || !hit.visualRow) {
+            return;
+        }
+        const position = this.positionFrom(hit);
+        if (!position) {
+            return;
+        }
+        const range = this.layout.wordAt(position);
+        if (range) {
+            this.selection = { anchor: range[0], head: range[1] };
+            this.emit('selection', this.getSelectionText());
+            this.requestRender();
+        }
+    };
+    onKeyDown = (event) => {
+        const modifier = event.ctrlKey || event.metaKey;
+        const key = event.key.toLowerCase();
+        if (modifier && key === 'c') {
+            if (this.selection) {
+                void this.copySelection();
+            }
+            return;
+        }
+        if (modifier && key === 'a') {
+            event.preventDefault();
+            this.selectAll();
+            return;
+        }
+        if (event.key === 'Escape') {
+            this.clearSelection();
+        }
+    };
+    onCopy = (event) => {
+        const text = this.getSelectionText();
+        if (text && event.clipboardData) {
+            event.clipboardData.setData('text/plain', text);
+            event.preventDefault();
+        }
+    };
+    onCommand(command) {
+        const input = this.options.input;
+        if (!input) {
+            return;
+        }
+        if (input.echo !== false) {
+            this.store.append({ kind: 'input', parts: [{ type: 'text', text: command }] });
+        }
+        this.setFollowing(true);
+        let result;
+        try {
+            result = input.onSubmit(command, this);
+        }
+        catch (error) {
+            this.printReply(error, true);
+            return;
+        }
+        if (result && typeof result.then === 'function') {
+            result.then((value) => this.printReply(value, false), (error) => this.printReply(error, true));
+            return;
+        }
+        this.printReply(result, false);
+    }
+    printReply(value, failed) {
+        if (this.disposed || (value === undefined && !failed)) {
+            return;
+        }
+        const part = typeof value === 'string'
+            ? { type: 'text', text: value }
+            : { type: 'value', value: snapshotValue(value) };
+        this.store.append({ kind: 'output', level: failed ? 'error' : 'log', parts: [part] });
+    }
+}