lognal 0.1.0

package/dist/viewer/labels.js

@@ -0,0 +1,61 @@
+export const EN_LABELS = {
+    viewer: 'Log viewer',
+    toolbar: 'Log viewer tools',
+    follow: 'Follow new logs',
+    clear: 'Clear logs',
+    scrollToTop: 'Scroll to top',
+    scrollToBottom: 'Scroll to bottom',
+    wrap: 'Wrap long lines',
+    filter: 'Filter',
+    invalidFilter: 'The filter is not a valid pattern',
+    levels: 'Log levels',
+    levelAll: 'All levels',
+    levelLog: 'Log and above',
+    levelInfo: 'Info and above',
+    levelWarn: 'Warnings and errors',
+    levelError: 'Errors only',
+    input: 'Command',
+    inputPlaceholder: 'Type a command',
+    newLogs: 'New logs',
+    entryList: 'Visible log entries',
+    following: 'Following',
+    paused: 'Paused',
+    entries: (shown, total, format) => {
+        const noun = total === 1 ? 'entry' : 'entries';
+        return shown === total
+            ? `${format(total)} ${noun}`
+            : `${format(shown)} of ${format(total)} ${noun}`;
+    }
+};
+export const KO_LABELS = {
+    viewer: '로그 뷰어',
+    toolbar: '로그 뷰어 도구',
+    follow: '새 로그 따라가기',
+    clear: '로그 지우기',
+    scrollToTop: '맨 위로 이동',
+    scrollToBottom: '맨 아래로 이동',
+    wrap: '긴 줄 바꾸기',
+    filter: '필터',
+    invalidFilter: '필터 패턴이 올바르지 않습니다',
+    levels: '로그 수준',
+    levelAll: '모든 수준',
+    levelLog: '로그 이상',
+    levelInfo: '정보 이상',
+    levelWarn: '경고와 오류',
+    levelError: '오류만',
+    input: '명령',
+    inputPlaceholder: '명령을 입력하세요',
+    newLogs: '새 로그',
+    entryList: '화면에 보이는 로그',
+    following: '따라가는 중',
+    paused: '멈춤',
+    entries: (shown, total, format) => {
+        return shown === total
+            ? `로그 ${format(total)}개`
+            : `로그 ${format(total)}개 중 ${format(shown)}개`;
+    }
+};
+/** Returns the built-in labels for a language tag. English is used for any other language. */
+export const labelsFor = (locale) => {
+    return locale && /^ko\b/i.test(locale) ? KO_LABELS : EN_LABELS;
+};

package/dist/viewer/scrollbar.d.ts

@@ -0,0 +1,27 @@
+export type ScrollbarOrientation = 'vertical' | 'horizontal';
+/**
+ * A scrollbar drawn in the DOM for a scroll container whose own scrollbar is hidden.
+ *
+ * The container keeps doing the scrolling, so wheel, touch, keyboard and assistive technology
+ * work as usual. This element only shows the position and lets a mouse drag the thumb or
+ * click the track. It is hidden from assistive technology, which uses the container.
+ */
+export declare class Scrollbar {
+    private readonly orientation;
+    private readonly viewport;
+    readonly element: HTMLDivElement;
+    private readonly thumb;
+    private idleTimer;
+    private drag;
+    constructor(ownerDocument: Document, orientation: ScrollbarOrientation, viewport: HTMLElement);
+    /** Moves the thumb to match the container, and shows the scrollbar for a moment. */
+    update(showActivity?: boolean): void;
+    dispose(): void;
+    private measure;
+    private trackSize;
+    private pointerOffset;
+    private scrollTo;
+    private readonly onPointerDown;
+    private readonly onPointerMove;
+    private readonly onPointerUp;
+}

package/dist/viewer/scrollbar.js

@@ -0,0 +1,143 @@
+/** The shortest a thumb gets, in CSS pixels, so it stays easy to grab. */
+const MIN_THUMB_SIZE = 28;
+/** How long the scrollbar stays visible after the view scrolls, in milliseconds. */
+const IDLE_DELAY = 1000;
+/**
+ * A scrollbar drawn in the DOM for a scroll container whose own scrollbar is hidden.
+ *
+ * The container keeps doing the scrolling, so wheel, touch, keyboard and assistive technology
+ * work as usual. This element only shows the position and lets a mouse drag the thumb or
+ * click the track. It is hidden from assistive technology, which uses the container.
+ */
+export class Scrollbar {
+    orientation;
+    viewport;
+    element;
+    thumb;
+    idleTimer;
+    drag = null;
+    constructor(ownerDocument, orientation, viewport) {
+        this.orientation = orientation;
+        this.viewport = viewport;
+        this.element = ownerDocument.createElement('div');
+        this.element.className = `lognal-scrollbar lognal-scrollbar-${orientation}`;
+        this.element.setAttribute('aria-hidden', 'true');
+        this.thumb = ownerDocument.createElement('div');
+        this.thumb.className = 'lognal-scrollbar-thumb';
+        this.element.append(this.thumb);
+        this.element.addEventListener('pointerdown', this.onPointerDown);
+        this.element.addEventListener('pointermove', this.onPointerMove);
+        this.element.addEventListener('pointerup', this.onPointerUp);
+        this.element.addEventListener('pointercancel', this.onPointerUp);
+    }
+    /** Moves the thumb to match the container, and shows the scrollbar for a moment. */
+    update(showActivity = false) {
+        const { client, total, position } = this.measure();
+        const scrollable = total - client > 1;
+        this.element.hidden = !scrollable;
+        if (!scrollable) {
+            return;
+        }
+        const track = this.trackSize();
+        const thumbSize = Math.max(MIN_THUMB_SIZE, (client / total) * track);
+        const offset = ((track - thumbSize) * position) / (total - client);
+        if (this.orientation === 'vertical') {
+            this.thumb.style.height = `${thumbSize}px`;
+            this.thumb.style.transform = `translateY(${offset}px)`;
+        }
+        else {
+            this.thumb.style.width = `${thumbSize}px`;
+            this.thumb.style.transform = `translateX(${offset}px)`;
+        }
+        if (showActivity) {
+            this.element.classList.add('is-active');
+            clearTimeout(this.idleTimer);
+            this.idleTimer = setTimeout(() => {
+                this.element.classList.remove('is-active');
+            }, IDLE_DELAY);
+        }
+    }
+    dispose() {
+        clearTimeout(this.idleTimer);
+        this.element.remove();
+    }
+    measure() {
+        const viewport = this.viewport;
+        if (this.orientation === 'vertical') {
+            return {
+                client: viewport.clientHeight,
+                total: viewport.scrollHeight,
+                position: viewport.scrollTop
+            };
+        }
+        return {
+            client: viewport.clientWidth,
+            total: viewport.scrollWidth,
+            position: viewport.scrollLeft
+        };
+    }
+    trackSize() {
+        const rect = this.element.getBoundingClientRect();
+        return this.orientation === 'vertical' ? rect.height : rect.width;
+    }
+    pointerOffset(event) {
+        const rect = this.element.getBoundingClientRect();
+        return this.orientation === 'vertical' ? event.clientY - rect.top : event.clientX - rect.left;
+    }
+    scrollTo(position) {
+        if (this.orientation === 'vertical') {
+            this.viewport.scrollTop = position;
+        }
+        else {
+            this.viewport.scrollLeft = position;
+        }
+    }
+    onPointerDown = (event) => {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        const { client, total, position } = this.measure();
+        if (event.target === this.thumb) {
+            this.drag = {
+                pointerId: event.pointerId,
+                start: this.pointerOffset(event),
+                scroll: position
+            };
+            try {
+                this.element.setPointerCapture(event.pointerId);
+            }
+            catch {
+                // The pointer ended before the capture could start.
+            }
+            this.element.classList.add('is-dragging');
+            return;
+        }
+        const thumbRect = this.thumb.getBoundingClientRect();
+        const thumbStart = this.orientation === 'vertical' ? thumbRect.top : thumbRect.left;
+        const pointer = this.orientation === 'vertical' ? event.clientY : event.clientX;
+        const direction = pointer < thumbStart ? -1 : 1;
+        this.scrollTo(Math.max(0, Math.min(total - client, position + direction * client * 0.9)));
+    };
+    onPointerMove = (event) => {
+        if (!this.drag || event.pointerId !== this.drag.pointerId) {
+            return;
+        }
+        const { client, total } = this.measure();
+        const track = this.trackSize();
+        const thumbSize = Math.max(MIN_THUMB_SIZE, (client / total) * track);
+        const movable = Math.max(1, track - thumbSize);
+        const delta = this.pointerOffset(event) - this.drag.start;
+        this.scrollTo(this.drag.scroll + (delta * (total - client)) / movable);
+    };
+    onPointerUp = (event) => {
+        if (!this.drag || event.pointerId !== this.drag.pointerId) {
+            return;
+        }
+        this.drag = null;
+        this.element.classList.remove('is-dragging');
+        if (this.element.hasPointerCapture(event.pointerId)) {
+            this.element.releasePointerCapture(event.pointerId);
+        }
+    };
+}

package/dist/viewer/theme.d.ts

@@ -0,0 +1,15 @@
+import type { FontSettings, RenderTheme } from '../renderer/types.js';
+/** Which color scheme the viewer uses. `auto` follows the operating system setting. */
+export type ThemeMode = 'auto' | 'light' | 'dark';
+export declare const DEFAULT_FONT: FontSettings;
+/**
+ * Reads the render colors from the `--lognal-*` custom properties of an element, so a theme is
+ * written in CSS and the canvas follows it. A property that is not set keeps the default.
+ */
+export declare const readTheme: (element: Element) => RenderTheme;
+/**
+ * Reads the font from the `--lognal-font-*` custom properties, with explicit options on top.
+ * The size may be written in `px`, `rem` or `em`, and the line height as a number, a
+ * percentage or a length.
+ */
+export declare const readFont: (element: Element, overrides: Partial<FontSettings>) => FontSettings;

package/dist/viewer/theme.js

@@ -0,0 +1,105 @@
+import { DEFAULT_RENDER_THEME } from '../renderer/theme.js';
+const TOKEN_NAMES = [
+    'muted',
+    'string',
+    'number',
+    'boolean',
+    'null',
+    'key',
+    'symbol',
+    'function',
+    'regexp',
+    'date',
+    'tag',
+    'attribute',
+    'error',
+    'warn',
+    'info',
+    'accent'
+];
+export const DEFAULT_FONT = {
+    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "D2Coding", "Noto Sans Mono CJK KR", "Liberation Mono", monospace',
+    size: 13,
+    weight: 400,
+    lineHeight: 1.6
+};
+/**
+ * Reads the render colors from the `--lognal-*` custom properties of an element, so a theme is
+ * written in CSS and the canvas follows it. A property that is not set keeps the default.
+ */
+export const readTheme = (element) => {
+    const style = getComputedStyle(element);
+    const read = (name, fallback) => {
+        return style.getPropertyValue(`--lognal-${name}`).trim() || fallback;
+    };
+    const defaults = DEFAULT_RENDER_THEME;
+    const tokens = {};
+    for (const token of TOKEN_NAMES) {
+        tokens[token] = read(`token-${token}`, defaults.tokens[token]);
+    }
+    return {
+        background: read('background', defaults.background),
+        foreground: read('foreground', defaults.foreground),
+        muted: read('muted', defaults.muted),
+        accent: read('accent', defaults.accent),
+        selection: read('selection', defaults.selection),
+        match: read('match', defaults.match),
+        separator: read('separator', defaults.separator),
+        error: read('error', defaults.error),
+        errorBackground: read('error-background', defaults.errorBackground),
+        warn: read('warn', defaults.warn),
+        warnBackground: read('warn-background', defaults.warnBackground),
+        info: read('info', defaults.info),
+        debug: read('debug', defaults.debug),
+        tokens,
+        ansi: defaults.ansi.map((color, index) => read(`ansi-${index}`, color))
+    };
+};
+/** Converts a CSS length in `px`, `rem` or `em` to pixels. Returns `NaN` for anything else. */
+const toPixels = (value, element) => {
+    const match = /^(-?[\d.]+)(px|rem|em)?$/i.exec(value);
+    if (!match) {
+        return Number.NaN;
+    }
+    const amount = Number.parseFloat(match[1]);
+    const unit = (match[2] ?? 'px').toLowerCase();
+    if (unit === 'rem') {
+        return (amount * Number.parseFloat(getComputedStyle(element.ownerDocument.documentElement).fontSize));
+    }
+    if (unit === 'em') {
+        return amount * Number.parseFloat(getComputedStyle(element).fontSize);
+    }
+    return amount;
+};
+/**
+ * Reads a line height as a multiple of the font size: `1.6` and `1.6em` stay `1.6`, `150%`
+ * becomes `1.5`, and a length such as `20px` or `1.25rem` is divided by the font size.
+ */
+const toLineHeight = (value, fontSize, element) => {
+    if (/^[\d.]+(em)?$/i.test(value)) {
+        return Number.parseFloat(value);
+    }
+    if (value.endsWith('%')) {
+        return Number.parseFloat(value) / 100;
+    }
+    return toPixels(value, element) / fontSize;
+};
+/**
+ * Reads the font from the `--lognal-font-*` custom properties, with explicit options on top.
+ * The size may be written in `px`, `rem` or `em`, and the line height as a number, a
+ * percentage or a length.
+ */
+export const readFont = (element, overrides) => {
+    const style = getComputedStyle(element);
+    const read = (name) => style.getPropertyValue(`--lognal-${name}`).trim();
+    const cssSize = toPixels(read('font-size'), element);
+    const size = overrides.size ?? (cssSize > 0 ? cssSize : DEFAULT_FONT.size);
+    const lineHeight = toLineHeight(read('line-height'), size, element);
+    const weight = Number.parseFloat(read('font-weight'));
+    return {
+        family: overrides.family ?? (read('font-family') || DEFAULT_FONT.family),
+        size,
+        weight: overrides.weight ?? (weight > 0 ? weight : DEFAULT_FONT.weight),
+        lineHeight: overrides.lineHeight ?? (lineHeight > 0 ? lineHeight : DEFAULT_FONT.lineHeight)
+    };
+};

package/dist/viewer/viewer.d.ts

@@ -0,0 +1,217 @@
+import { type LogFilter } from '../core/filter.js';
+import { LogLayout, type LayoutOptions } from '../core/layout/layout.js';
+import { LogStore, type LogStoreOptions, type WriteOptions } from '../core/store.js';
+import { type TimestampFormat } from '../core/time.js';
+import type { FontSettings, Renderer } from '../renderer/types.js';
+import { type HookConsoleOptions, type LognalConsole } from '../sources/console/hook.js';
+import { type ViewerLabels } from './labels.js';
+import { type ThemeMode } from './theme.js';
+/** Options that belong to the core: what is kept, how it is laid out, and what is shown. */
+export interface CoreOptions extends LogStoreOptions, LayoutOptions {
+    filter: LogFilter | null;
+}
+/** Which controls the toolbar shows. */
+export interface ToolbarOptions {
+    follow: boolean;
+    clear: boolean;
+    scroll: boolean;
+    wrap: boolean;
+    filter: boolean;
+    levels: boolean;
+}
+/** The input line, shown when something can answer the commands typed into it. */
+export interface InputOptions {
+    /**
+     * Called with each command. A returned value, or the value a returned promise resolves to,
+     * is printed as the reply. Return `undefined` to print nothing, for example when the reply
+     * arrives later through `viewer.write`.
+     */
+    onSubmit: (command: string, viewer: LogViewer) => unknown;
+    /** The prompt shown before the input. */
+    prompt?: string;
+    placeholder?: string;
+    /** Whether the command is added to the log before it runs. */
+    echo?: boolean;
+    /** How many past commands the arrow keys go through. */
+    historySize?: number;
+}
+export interface LogViewerOptions {
+    /** A store to show. Several viewers can share one store. A new store is created when absent. */
+    store?: LogStore;
+    /** Core options. Store options also apply to a store passed in `store`. */
+    core?: Partial<CoreOptions>;
+    /** The color scheme. `auto` follows the operating system. */
+    theme?: ThemeMode;
+    /** The font. Values left out come from the `--lognal-font-*` CSS properties. */
+    font?: Partial<FontSettings>;
+    /** Whether each entry shows its time, and in which format. */
+    timestamps?: boolean | TimestampFormat;
+    /** Whether the view follows new entries at the start. */
+    follow?: boolean;
+    /** The toolbar, or `false` to hide it. */
+    toolbar?: boolean | Partial<ToolbarOptions>;
+    /** Whether the status bar is shown. */
+    statusBar?: boolean;
+    /** The input line. Leave it out for a read-only viewer. */
+    input?: InputOptions | null;
+    /** The language of the built-in labels and number formatting, such as `en` or `ko`. */
+    locale?: string;
+    /** Labels that replace the built-in ones. */
+    labels?: Partial<ViewerLabels>;
+    /** Creates the renderer. Defaults to the Canvas 2D renderer. */
+    renderer?: (ownerDocument: Document) => Renderer;
+}
+/** Events a viewer emits. */
+export interface LogViewerEvents {
+    /** Following new entries was turned on or off. */
+    follow: boolean;
+    /** The filter changed, from the toolbar or through `setFilter`. */
+    filter: LogFilter | null;
+    /** The text selection changed. */
+    selection: string;
+}
+type Listener<Value> = (value: Value) => void;
+/**
+ * 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 declare class LogViewer {
+    readonly store: LogStore;
+    readonly layout: LogLayout;
+    readonly element: HTMLDivElement;
+    private readonly ownerDocument;
+    private readonly renderer;
+    private options;
+    private readonly body;
+    private readonly viewport;
+    private readonly spacer;
+    private readonly mirror;
+    private readonly verticalScrollbar;
+    private readonly horizontalScrollbar;
+    private readonly newLogsButton;
+    private toolbarElement;
+    private statusElement;
+    private inputLine;
+    private readonly controls;
+    private metrics;
+    private width;
+    private height;
+    private following;
+    private hasUnseen;
+    private topPixels;
+    private firstRow;
+    private visibleRows;
+    private expectedScrollTop;
+    private lastScrollTop;
+    private anchor;
+    private columns;
+    private measureTimer;
+    private selection;
+    private drag;
+    private autoScrollFrame;
+    private lastPointer;
+    private frame;
+    private accessoryTimer;
+    private filterTimer;
+    private filter;
+    private readonly listeners;
+    private readonly cleanups;
+    private consoleObject;
+    /** The wrapping mode the toolbar button restores after turning wrapping off. */
+    private wrapMode;
+    private cachedNumberFormat;
+    private disposed;
+    constructor(container: HTMLElement, options?: LogViewerOptions);
+    /** An object with the console methods that writes to this viewer's store. */
+    get console(): LognalConsole;
+    /** Whether the view follows new entries. */
+    get isFollowing(): boolean;
+    /** Changes options after creation. Only the options given are changed. */
+    setOptions(options: Omit<LogViewerOptions, 'store' | 'renderer'>): void;
+    /** Adds text as one entry. */
+    write(text: string, options?: WriteOptions): void;
+    /** Adds text as one entry per line. */
+    writeLines(text: string, options?: WriteOptions): void;
+    /**
+     * 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?: HookConsoleOptions): () => void;
+    /** Removes every entry. */
+    clear(): void;
+    /** Sets the filter. `null` shows every entry. */
+    setFilter(filter: LogFilter | null): void;
+    getFilter(): LogFilter | null;
+    /** Turns following new entries on or off. Turning it on scrolls to the newest entry. */
+    setFollowing(following: boolean): void;
+    scrollToTop(): void;
+    scrollToBottom(): void;
+    /** Scrolls so that an entry is at the top of the view. */
+    scrollToEntry(entryId: number): void;
+    /** Returns the selected text, or an empty string. */
+    getSelectionText(): string;
+    /** Selects the text of every visible entry. */
+    selectAll(): void;
+    clearSelection(): void;
+    /** Copies the selected text to the clipboard. Resolves to whether anything was copied. */
+    copySelection(): Promise<boolean>;
+    /** Moves keyboard focus to the input line, or to the log when there is no input line. */
+    focus(): void;
+    /** Reads the theme and the font from CSS again, for example after the page changed them. */
+    refresh(): void;
+    /** Calls a listener for an event. Returns a function that removes the listener. */
+    on<Name extends keyof LogViewerEvents>(name: Name, listener: Listener<LogViewerEvents[Name]>): () => void;
+    /** Removes the viewer from the page and stops everything it started. */
+    dispose(): void;
+    private resolveOptions;
+    private unresolvedOptions;
+    private emit;
+    private listen;
+    private bindEvents;
+    private watchPixelRatio;
+    private buildChrome;
+    private buildToolbar;
+    private syncWrapButton;
+    private applyTheme;
+    private applyFont;
+    private timestampCells;
+    private contentLeft;
+    private updateColumns;
+    private scrollScale;
+    private contentHeight;
+    private requestRender;
+    private render;
+    /** Returns an anchor for the row at a pixel position of the whole log. */
+    private anchorAt;
+    /**
+     * 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.
+     */
+    private scheduleMeasure;
+    private decorationFor;
+    private findMatches;
+    private scheduleAccessories;
+    /** Updates the status bar. Cheap enough for every frame, since text is only written when it changes. */
+    private updateStatus;
+    private updateAccessories;
+    private numberFormat;
+    private hitTest;
+    private positionFrom;
+    private readonly onStoreChange;
+    private readonly onResize;
+    private readonly onScroll;
+    private readonly onPointerDown;
+    private readonly onPointerMove;
+    private readonly onPointerUp;
+    private extendSelection;
+    private updateAutoScroll;
+    private readonly onDoubleClick;
+    private readonly onKeyDown;
+    private readonly onCopy;
+    private onCommand;
+    private printReply;
+}
+export {};