lognal 0.1.0

package/dist/react/LogViewer.js

@@ -0,0 +1,183 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { DEFAULT_LAYOUT_OPTIONS } from '../core/layout/layout.js';
+import { DEFAULT_STORE_OPTIONS } from '../core/store.js';
+import { LogViewer as Viewer } from '../viewer/viewer.js';
+const PROPS_WITHOUT_OPTIONS = new Set([
+    'className',
+    'style',
+    'hookConsole',
+    'onReady',
+    'onFollowChange',
+    'onFilterChange',
+    'onSelectionChange',
+    'store',
+    'renderer'
+]);
+/** The value a core option returns to when its prop is removed. */
+const CORE_DEFAULTS = {
+    ...DEFAULT_STORE_OPTIONS,
+    ...DEFAULT_LAYOUT_OPTIONS,
+    filter: null
+};
+const CORE_PREFIX = 'core.';
+/** A string that changes only when the data of a value changes. Functions do not count. */
+const keyOf = (value) => {
+    return (JSON.stringify(value, (_key, item) => typeof item === 'function' ? '(function)' : item) ?? '');
+};
+/** The data key of every option, with each core option on its own. */
+const keysOfOptions = (options) => {
+    const keys = new Map();
+    for (const [name, value] of Object.entries(options)) {
+        if (name === 'core' && value) {
+            for (const [coreName, coreValue] of Object.entries(value)) {
+                keys.set(`${CORE_PREFIX}${coreName}`, keyOf(coreValue));
+            }
+        }
+        else {
+            keys.set(name, keyOf(value));
+        }
+    }
+    return keys;
+};
+const assignRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+};
+/**
+ * The lognal viewer as a React component.
+ *
+ * The component renders a container and creates the viewer in it after mounting. Log entries
+ * never go through React state: write to `store`, to the viewer from `onReady` or the ref, or
+ * turn on `hookConsole`.
+ *
+ * Only the option props whose data changed are applied, so passing a new object with the same
+ * contents on every render costs nothing, and a change to one prop does not undo what the
+ * user did in the viewer, such as turning off wrapping from the toolbar.
+ *
+ * Give the component a height, through `style`, `className` or its parent.
+ */
+export const LogViewer = forwardRef(function LogViewer(props, ref) {
+    const containerRef = useRef(null);
+    const latest = useRef(props);
+    const latestRef = useRef(ref);
+    const appliedKeys = useRef(new Map());
+    const [viewer, setViewer] = useState(null);
+    const { className, style, store, renderer, hookConsole } = props;
+    latest.current = props;
+    latestRef.current = ref;
+    const options = useMemo(() => {
+        const result = {};
+        for (const [name, value] of Object.entries(props)) {
+            if (!PROPS_WITHOUT_OPTIONS.has(name) && value !== undefined) {
+                result[name] = value;
+            }
+        }
+        return result;
+    }, [props]);
+    const optionsKey = keyOf(options);
+    // Functions inside options call the latest props, so a new function on every render does not
+    // count as a change.
+    const stableOptions = useMemo(() => {
+        const current = options;
+        // Options that were removed go back to their defaults instead of keeping the old value.
+        const result = {
+            theme: 'auto',
+            font: {},
+            timestamps: true,
+            toolbar: true,
+            statusBar: true,
+            input: null,
+            labels: {},
+            locale: undefined,
+            ...current
+        };
+        if (current.input) {
+            result.input = {
+                ...current.input,
+                onSubmit: (command, instance) => latest.current.input?.onSubmit(command, instance)
+            };
+        }
+        if (typeof current.timestamps === 'function') {
+            result.timestamps = (time) => {
+                const format = latest.current.timestamps;
+                return typeof format === 'function' ? format(time) : String(time);
+            };
+        }
+        if (current.labels?.entries) {
+            result.labels = {
+                ...current.labels,
+                entries: (...args) => latest.current.labels?.entries?.(...args) ?? ''
+            };
+        }
+        return result;
+        // Rebuilt only when the data changes, which `optionsKey` tracks.
+    }, [optionsKey]);
+    const latestOptions = useRef(stableOptions);
+    latestOptions.current = stableOptions;
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const instance = new Viewer(container, { ...latestOptions.current, store, renderer });
+        const offFollow = instance.on('follow', (value) => latest.current.onFollowChange?.(value));
+        const offFilter = instance.on('filter', (value) => latest.current.onFilterChange?.(value));
+        const offSelection = instance.on('selection', (value) => latest.current.onSelectionChange?.(value));
+        appliedKeys.current = keysOfOptions(latestOptions.current);
+        setViewer(instance);
+        assignRef(latestRef.current, instance);
+        latest.current.onReady?.(instance);
+        return () => {
+            offFollow();
+            offFilter();
+            offSelection();
+            instance.dispose();
+            setViewer(null);
+            assignRef(latestRef.current, null);
+            latest.current.onReady?.(null);
+        };
+    }, [store, renderer]);
+    useEffect(() => {
+        if (!viewer) {
+            return;
+        }
+        const previous = appliedKeys.current;
+        const next = keysOfOptions(stableOptions);
+        const changes = {};
+        const coreChanges = {};
+        for (const name of new Set([...previous.keys(), ...next.keys()])) {
+            if (previous.get(name) === next.get(name)) {
+                continue;
+            }
+            if (name.startsWith(CORE_PREFIX)) {
+                const coreName = name.slice(CORE_PREFIX.length);
+                coreChanges[coreName] = stableOptions.core?.[coreName] ?? CORE_DEFAULTS[coreName];
+            }
+            else {
+                changes[name] = stableOptions[name];
+            }
+        }
+        if (Object.keys(coreChanges).length > 0) {
+            changes.core = coreChanges;
+        }
+        appliedKeys.current = next;
+        if (Object.keys(changes).length > 0) {
+            viewer.setOptions(changes);
+        }
+    }, [viewer, stableOptions]);
+    const hookKey = keyOf(hookConsole);
+    useEffect(() => {
+        if (!viewer || !hookConsole) {
+            return;
+        }
+        return viewer.hookConsole(console, hookConsole === true ? undefined : hookConsole);
+        // Hooked again only when the data of `hookConsole` changes, which `hookKey` tracks.
+    }, [viewer, hookKey]);
+    return _jsx("div", { ref: containerRef, className: className, style: { height: '100%', ...style } });
+});

package/dist/react/index.d.ts

@@ -0,0 +1 @@
+export { LogViewer, type LogViewerProps } from './LogViewer.js';

package/dist/react/index.js

@@ -0,0 +1,2 @@
+'use client';
+export { LogViewer } from './LogViewer.js';

package/dist/renderer/canvas/canvas-renderer.d.ts

@@ -0,0 +1,45 @@
+import type { CellMetrics, FontSettings, RenderFrame, RenderTheme, Renderer } from '../types.js';
+/**
+ * Draws the log on a `<canvas>` with the 2D context.
+ *
+ * Every frame repaints the visible rows. Text that is plain ASCII in one style is drawn with a
+ * single `fillText` call; other text is drawn one grapheme cluster at a time at its grid
+ * position, so wide characters and characters from a fallback font stay aligned. `fillText`'s
+ * `maxWidth` squeezes a glyph that is wider than its cells instead of letting it overlap.
+ */
+export declare class CanvasRenderer implements Renderer {
+    readonly element: HTMLCanvasElement;
+    private readonly context;
+    private theme;
+    private font;
+    private metrics;
+    private width;
+    private height;
+    private pixelRatio;
+    private readonly measureCache;
+    private readonly requestedGlyphs;
+    private pendingGlyphs;
+    private glyphRequestScheduled;
+    private fontsListener;
+    private disposed;
+    constructor(ownerDocument?: Document);
+    setTheme(theme: RenderTheme): void;
+    setFont(font: FontSettings): CellMetrics;
+    getMetrics(): CellMetrics;
+    resize(width: number, height: number, pixelRatio: number): void;
+    onFontsChanged(listener: () => void): void;
+    render(frame: RenderFrame): void;
+    dispose(): void;
+    private drawRowBackground;
+    private drawDecoration;
+    private colorOf;
+    private drawRuns;
+    private drawBox;
+    private drawExpander;
+    private drawGutter;
+    private drawRepeatBadge;
+    private measure;
+    /** Asks the browser to load web font faces that cover characters the frame drew. */
+    private requestGlyphs;
+    private flushGlyphRequests;
+}

package/dist/renderer/canvas/canvas-renderer.js

@@ -0,0 +1,464 @@
+import { DEFAULT_RENDER_THEME } from '../theme.js';
+import { resolveAnsiColor } from './palette.js';
+/** How long a measured glyph width stays cached, as a count of entries. */
+const MEASURE_CACHE_SIZE = 4096;
+const PRINTABLE_ASCII = /^[\x20-\x7e]*$/;
+const WHITESPACE = /^\s*$/;
+/**
+ * Box-drawing characters drawn as lines, as bits for the arms that leave the cell center: up,
+ * right, down and left. Drawing them lets table borders join across rows, which a font glyph
+ * does not do once rows are taller than the font.
+ */
+const ARM_UP = 1;
+const ARM_RIGHT = 2;
+const ARM_DOWN = 4;
+const ARM_LEFT = 8;
+const BOX_ARMS = new Map([
+    ['\u2500', ARM_LEFT | ARM_RIGHT],
+    ['\u2502', ARM_UP | ARM_DOWN],
+    ['\u250c', ARM_RIGHT | ARM_DOWN],
+    ['\u2510', ARM_LEFT | ARM_DOWN],
+    ['\u2514', ARM_UP | ARM_RIGHT],
+    ['\u2518', ARM_UP | ARM_LEFT],
+    ['\u251c', ARM_UP | ARM_DOWN | ARM_RIGHT],
+    ['\u2524', ARM_UP | ARM_DOWN | ARM_LEFT],
+    ['\u252c', ARM_LEFT | ARM_RIGHT | ARM_DOWN],
+    ['\u2534', ARM_LEFT | ARM_RIGHT | ARM_UP],
+    ['\u253c', ARM_UP | ARM_RIGHT | ARM_DOWN | ARM_LEFT],
+    ['\u256d', ARM_RIGHT | ARM_DOWN],
+    ['\u256e', ARM_LEFT | ARM_DOWN],
+    ['\u256f', ARM_UP | ARM_LEFT],
+    ['\u2570', ARM_UP | ARM_RIGHT]
+]);
+const fontString = (font, bold, italic) => {
+    const weight = bold ? Math.max(700, font.weight) : font.weight;
+    return `${italic ? 'italic ' : ''}${weight} ${font.size}px ${font.family}`;
+};
+const documentFonts = () => {
+    return globalThis.document?.fonts;
+};
+/**
+ * Draws the log on a `<canvas>` with the 2D context.
+ *
+ * Every frame repaints the visible rows. Text that is plain ASCII in one style is drawn with a
+ * single `fillText` call; other text is drawn one grapheme cluster at a time at its grid
+ * position, so wide characters and characters from a fallback font stay aligned. `fillText`'s
+ * `maxWidth` squeezes a glyph that is wider than its cells instead of letting it overlap.
+ */
+export class CanvasRenderer {
+    element;
+    context;
+    theme = DEFAULT_RENDER_THEME;
+    font = {
+        family: 'monospace',
+        size: 13,
+        weight: 400,
+        lineHeight: 1.5
+    };
+    metrics = { width: 8, height: 20, baseline: 14 };
+    width = 0;
+    height = 0;
+    pixelRatio = 1;
+    measureCache = new Map();
+    requestedGlyphs = new Set();
+    pendingGlyphs = '';
+    glyphRequestScheduled = false;
+    fontsListener = null;
+    disposed = false;
+    constructor(ownerDocument = document) {
+        this.element = ownerDocument.createElement('canvas');
+        this.element.className = 'lognal-canvas';
+        this.element.setAttribute('aria-hidden', 'true');
+        // Set here as well as in the stylesheet: a canvas in the normal flow would grow its
+        // container, and the container's new size would grow the canvas again.
+        this.element.style.position = 'absolute';
+        this.element.style.left = '0';
+        this.element.style.top = '0';
+        const context = this.element.getContext('2d', { alpha: false });
+        if (!context) {
+            throw new Error('lognal: the 2D canvas context is not available.');
+        }
+        this.context = context;
+    }
+    setTheme(theme) {
+        this.theme = theme;
+    }
+    setFont(font) {
+        this.font = font;
+        this.measureCache.clear();
+        this.requestedGlyphs.clear();
+        const context = this.context;
+        context.font = fontString(font, false, false);
+        const sample = context.measureText('M'.repeat(20));
+        const width = sample.width / 20;
+        const height = Math.max(1, Math.round(font.size * font.lineHeight));
+        const ascent = sample.fontBoundingBoxAscent ?? sample.actualBoundingBoxAscent ?? font.size * 0.8;
+        const descent = sample.fontBoundingBoxDescent ?? sample.actualBoundingBoxDescent ?? font.size * 0.2;
+        this.metrics = {
+            width: width > 0 ? width : font.size * 0.6,
+            height,
+            baseline: Math.round((height - (ascent + descent)) / 2 + ascent)
+        };
+        return this.metrics;
+    }
+    getMetrics() {
+        return this.metrics;
+    }
+    resize(width, height, pixelRatio) {
+        this.width = Math.max(0, width);
+        this.height = Math.max(0, height);
+        this.pixelRatio = pixelRatio > 0 ? pixelRatio : 1;
+        this.element.width = Math.max(1, Math.round(this.width * this.pixelRatio));
+        this.element.height = Math.max(1, Math.round(this.height * this.pixelRatio));
+        this.element.style.width = `${this.width}px`;
+        this.element.style.height = `${this.height}px`;
+    }
+    onFontsChanged(listener) {
+        this.fontsListener = listener;
+    }
+    render(frame) {
+        const context = this.context;
+        const { width: cellWidth, height: rowHeight } = this.metrics;
+        const gutterWidth = (frame.timestampCells + frame.markerCells) * cellWidth;
+        const contentLeft = frame.paddingLeft + gutterWidth;
+        context.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+        context.textBaseline = 'alphabetic';
+        context.fillStyle = this.theme.background;
+        context.fillRect(0, 0, this.width, this.height);
+        frame.rows.forEach((row, index) => {
+            const top = frame.offsetY + index * rowHeight;
+            this.drawRowBackground(row, top);
+        });
+        context.save();
+        context.beginPath();
+        context.rect(contentLeft, 0, Math.max(0, this.width - contentLeft), this.height);
+        context.clip();
+        frame.rows.forEach((row, index) => {
+            const top = frame.offsetY + index * rowHeight;
+            const left = contentLeft - frame.scrollX;
+            this.drawDecoration(frame.decorations[index], left, top);
+            this.drawRuns(row, left, top);
+        });
+        context.restore();
+        frame.rows.forEach((row, index) => {
+            const top = frame.offsetY + index * rowHeight;
+            if (row.last) {
+                context.fillStyle = this.theme.separator;
+                context.fillRect(0, top + rowHeight - 1 / this.pixelRatio, this.width, 1 / this.pixelRatio);
+            }
+            if (row.first) {
+                this.drawGutter(row.entry, frame, top);
+            }
+        });
+        this.flushGlyphRequests();
+    }
+    dispose() {
+        this.disposed = true;
+        this.fontsListener = null;
+        this.measureCache.clear();
+        this.element.remove();
+    }
+    drawRowBackground(row, top) {
+        const { entry } = row;
+        let color = null;
+        if (entry.level === 'error') {
+            color = this.theme.errorBackground;
+        }
+        else if (entry.level === 'warn') {
+            color = this.theme.warnBackground;
+        }
+        if (color) {
+            this.context.fillStyle = color;
+            this.context.fillRect(0, top, this.width, this.metrics.height);
+        }
+    }
+    drawDecoration(decoration, left, top) {
+        if (!decoration) {
+            return;
+        }
+        const context = this.context;
+        const { width: cellWidth, height: rowHeight } = this.metrics;
+        if (decoration.matches) {
+            context.fillStyle = this.theme.match;
+            for (const [from, to] of decoration.matches) {
+                context.fillRect(left + from * cellWidth, top, (to - from) * cellWidth, rowHeight);
+            }
+        }
+        if (decoration.selection) {
+            const [from, to] = decoration.selection;
+            context.fillStyle = this.theme.selection;
+            context.fillRect(left + from * cellWidth, top, Math.max(0, to - from) * cellWidth, rowHeight);
+        }
+    }
+    colorOf(run, entry) {
+        if (run.style?.color !== undefined) {
+            return resolveAnsiColor(run.style.color, this.theme.ansi);
+        }
+        if (run.token && run.token !== 'default') {
+            return this.theme.tokens[run.token];
+        }
+        if (entry.kind === 'system') {
+            return this.theme.muted;
+        }
+        if (entry.level === 'debug') {
+            return this.theme.debug;
+        }
+        if (entry.level === 'error') {
+            return this.theme.error;
+        }
+        if (entry.level === 'warn') {
+            return this.theme.warn;
+        }
+        return this.theme.foreground;
+    }
+    drawRuns(row, left, top) {
+        const context = this.context;
+        const { width: cellWidth, height: rowHeight, baseline } = this.metrics;
+        const y = top + baseline;
+        let currentFont = '';
+        for (const run of row.runs) {
+            const x = left + run.column * cellWidth;
+            const runWidth = run.cells * cellWidth;
+            if (x > this.width || x + runWidth < 0) {
+                continue;
+            }
+            const style = run.style;
+            if (style?.background !== undefined) {
+                context.fillStyle = resolveAnsiColor(style.background, this.theme.ansi);
+                context.fillRect(x, top, runWidth, rowHeight);
+            }
+            if (run.icon === 'expander') {
+                this.drawExpander(x, top, Boolean(run.expanded));
+                continue;
+            }
+            if (WHITESPACE.test(run.text)) {
+                continue;
+            }
+            const font = fontString(this.font, Boolean(style?.bold), Boolean(style?.italic));
+            if (font !== currentFont) {
+                context.font = font;
+                currentFont = font;
+            }
+            const color = this.colorOf(run, row.entry);
+            context.fillStyle = color;
+            context.globalAlpha = style?.dim ? 0.6 : 1;
+            if (run.simple) {
+                context.fillText(run.text, x, y, runWidth);
+            }
+            else {
+                let clusterLeft = x;
+                run.clusters.forEach((cluster, index) => {
+                    const cells = run.widths[index] ?? 1;
+                    const slot = cells * cellWidth;
+                    const arms = BOX_ARMS.get(cluster);
+                    if (arms !== undefined) {
+                        this.drawBox(arms, clusterLeft, top);
+                    }
+                    else if (cluster && !WHITESPACE.test(cluster)) {
+                        const natural = this.measure(cluster, font);
+                        const drawn = Math.min(natural, slot);
+                        const offset = cells > 1 ? (slot - drawn) / 2 : 0;
+                        context.fillText(cluster, clusterLeft + offset, y, slot);
+                        this.requestGlyphs(cluster);
+                    }
+                    clusterLeft += slot;
+                });
+            }
+            context.globalAlpha = 1;
+            if (style?.underline) {
+                context.fillRect(x, top + baseline + 2, runWidth, 1);
+            }
+            if (style?.strikethrough) {
+                context.fillRect(x, top + Math.round(rowHeight / 2), runWidth, 1);
+            }
+        }
+    }
+    drawBox(arms, left, top) {
+        const context = this.context;
+        const { width: cellWidth, height: rowHeight } = this.metrics;
+        const ratio = this.pixelRatio;
+        const thickness = Math.max(1, Math.round((this.font.size / 13) * ratio)) / ratio;
+        const snap = (value) => Math.round(value * ratio) / ratio;
+        const centerX = snap(left + cellWidth / 2 - thickness / 2);
+        const centerY = snap(top + rowHeight / 2 - thickness / 2);
+        const right = left + cellWidth;
+        const bottom = top + rowHeight;
+        if (arms & ARM_LEFT) {
+            context.fillRect(left, centerY, centerX + thickness - left, thickness);
+        }
+        if (arms & ARM_RIGHT) {
+            context.fillRect(centerX, centerY, right - centerX, thickness);
+        }
+        if (arms & ARM_UP) {
+            context.fillRect(centerX, top, thickness, centerY + thickness - top);
+        }
+        if (arms & ARM_DOWN) {
+            context.fillRect(centerX, centerY, thickness, bottom - centerY);
+        }
+    }
+    drawExpander(x, top, expanded) {
+        const context = this.context;
+        const { width: cellWidth, height: rowHeight } = this.metrics;
+        const size = Math.max(4, Math.round(this.font.size * 0.36));
+        const centerX = x + cellWidth * 0.9;
+        const centerY = top + rowHeight / 2;
+        context.fillStyle = this.theme.muted;
+        context.beginPath();
+        if (expanded) {
+            context.moveTo(centerX - size / 2, centerY - size / 4);
+            context.lineTo(centerX + size / 2, centerY - size / 4);
+            context.lineTo(centerX, centerY + size / 3);
+        }
+        else {
+            context.moveTo(centerX - size / 4, centerY - size / 2);
+            context.lineTo(centerX + size / 3, centerY);
+            context.lineTo(centerX - size / 4, centerY + size / 2);
+        }
+        context.closePath();
+        context.fill();
+    }
+    drawGutter(entry, frame, top) {
+        const context = this.context;
+        const { width: cellWidth, height: rowHeight, baseline } = this.metrics;
+        let x = frame.paddingLeft;
+        if (frame.timestampCells > 0) {
+            context.font = fontString(this.font, false, false);
+            context.fillStyle = this.theme.muted;
+            context.fillText(frame.formatTime(entry.time), x, top + baseline, (frame.timestampCells - 1) * cellWidth);
+            x += frame.timestampCells * cellWidth;
+        }
+        // The marker sits in the first two cells of its column; the last cell is a gap.
+        const centerX = x + cellWidth;
+        const centerY = top + rowHeight / 2;
+        const radius = Math.max(3, this.font.size * 0.32);
+        if (entry.repeat > 1) {
+            this.drawRepeatBadge(entry, x, top);
+            return;
+        }
+        context.lineWidth = Math.max(1, this.font.size / 12);
+        context.lineCap = 'round';
+        context.lineJoin = 'round';
+        if (entry.kind === 'input') {
+            context.strokeStyle = this.theme.accent;
+            context.beginPath();
+            context.moveTo(centerX - radius * 0.45, centerY - radius * 0.8);
+            context.lineTo(centerX + radius * 0.45, centerY);
+            context.lineTo(centerX - radius * 0.45, centerY + radius * 0.8);
+            context.stroke();
+            return;
+        }
+        if (entry.kind === 'output') {
+            context.strokeStyle = this.theme.muted;
+            context.beginPath();
+            context.moveTo(centerX + radius * 0.45, centerY - radius * 0.8);
+            context.lineTo(centerX - radius * 0.45, centerY);
+            context.lineTo(centerX + radius * 0.45, centerY + radius * 0.8);
+            context.stroke();
+            return;
+        }
+        if (entry.level === 'error') {
+            context.fillStyle = this.theme.error;
+            context.beginPath();
+            context.arc(centerX, centerY, radius, 0, Math.PI * 2);
+            context.fill();
+            context.strokeStyle = this.theme.background;
+            context.beginPath();
+            context.moveTo(centerX - radius * 0.4, centerY - radius * 0.4);
+            context.lineTo(centerX + radius * 0.4, centerY + radius * 0.4);
+            context.moveTo(centerX + radius * 0.4, centerY - radius * 0.4);
+            context.lineTo(centerX - radius * 0.4, centerY + radius * 0.4);
+            context.stroke();
+        }
+        else if (entry.level === 'warn') {
+            context.fillStyle = this.theme.warn;
+            context.beginPath();
+            context.moveTo(centerX, centerY - radius * 1.05);
+            context.lineTo(centerX + radius * 1.1, centerY + radius * 0.85);
+            context.lineTo(centerX - radius * 1.1, centerY + radius * 0.85);
+            context.closePath();
+            context.fill();
+            context.fillStyle = this.theme.background;
+            context.fillRect(centerX - context.lineWidth / 2, centerY - radius * 0.45, context.lineWidth, radius * 0.7);
+            context.fillRect(centerX - context.lineWidth / 2, centerY + radius * 0.4, context.lineWidth, context.lineWidth);
+        }
+        else if (entry.level === 'info') {
+            context.fillStyle = this.theme.info;
+            context.beginPath();
+            context.arc(centerX, centerY, radius * 0.55, 0, Math.PI * 2);
+            context.fill();
+        }
+    }
+    drawRepeatBadge(entry, x, top) {
+        const context = this.context;
+        const { width: cellWidth, height: rowHeight } = this.metrics;
+        const label = entry.repeat > 99 ? '99+' : String(entry.repeat);
+        const fontSize = Math.max(8, Math.round(this.font.size * 0.75));
+        const badgeHeight = Math.min(rowHeight - 4, fontSize + 4);
+        context.font = `600 ${fontSize}px ${this.font.family}`;
+        const textWidth = context.measureText(label).width;
+        const badgeWidth = Math.max(badgeHeight, textWidth + 8);
+        const left = x + Math.max(0, cellWidth - badgeWidth / 2);
+        const badgeTop = top + (rowHeight - badgeHeight) / 2;
+        const color = entry.level === 'error'
+            ? this.theme.error
+            : entry.level === 'warn'
+                ? this.theme.warn
+                : this.theme.muted;
+        context.fillStyle = color;
+        context.beginPath();
+        if (typeof context.roundRect === 'function') {
+            context.roundRect(left, badgeTop, badgeWidth, badgeHeight, badgeHeight / 2);
+        }
+        else {
+            context.rect(left, badgeTop, badgeWidth, badgeHeight);
+        }
+        context.fill();
+        context.fillStyle = this.theme.background;
+        context.textAlign = 'center';
+        context.fillText(label, left + badgeWidth / 2, badgeTop + badgeHeight / 2 + fontSize * 0.36);
+        context.textAlign = 'start';
+    }
+    measure(cluster, font) {
+        const key = `${font}|${cluster}`;
+        const cached = this.measureCache.get(key);
+        if (cached !== undefined) {
+            return cached;
+        }
+        const width = this.context.measureText(cluster).width;
+        if (this.measureCache.size >= MEASURE_CACHE_SIZE) {
+            this.measureCache.clear();
+        }
+        this.measureCache.set(key, width);
+        return width;
+    }
+    /** Asks the browser to load web font faces that cover characters the frame drew. */
+    requestGlyphs(cluster) {
+        if (PRINTABLE_ASCII.test(cluster) || this.requestedGlyphs.has(cluster)) {
+            return;
+        }
+        this.requestedGlyphs.add(cluster);
+        this.pendingGlyphs += cluster;
+    }
+    flushGlyphRequests() {
+        const fonts = documentFonts();
+        if (!this.pendingGlyphs || this.glyphRequestScheduled || !fonts) {
+            return;
+        }
+        const text = this.pendingGlyphs;
+        const font = fontString(this.font, false, false);
+        this.pendingGlyphs = '';
+        this.glyphRequestScheduled = true;
+        fonts
+            .load(font, text)
+            .then((faces) => {
+            this.glyphRequestScheduled = false;
+            if (!this.disposed && faces.length > 0) {
+                this.measureCache.clear();
+                this.fontsListener?.();
+            }
+        })
+            .catch(() => {
+            this.glyphRequestScheduled = false;
+        });
+    }
+}