lognal 0.1.0

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

@@ -0,0 +1,6 @@
+import type { TextColor } from '../../core/types.js';
+/**
+ * Returns the CSS color for an ANSI color. Indexes 0 to 15 come from the theme, 16 to 231 are
+ * the 6×6×6 color cube, and 232 to 255 are the gray ramp. Strings are used as they are.
+ */
+export declare const resolveAnsiColor: (color: TextColor, themeColors: readonly string[]) => string;

package/dist/renderer/canvas/palette.js

@@ -0,0 +1,25 @@
+const CUBE_LEVELS = [0, 95, 135, 175, 215, 255];
+const toHex = (value) => {
+    return value.toString(16).padStart(2, '0');
+};
+/**
+ * Returns the CSS color for an ANSI color. Indexes 0 to 15 come from the theme, 16 to 231 are
+ * the 6×6×6 color cube, and 232 to 255 are the gray ramp. Strings are used as they are.
+ */
+export const resolveAnsiColor = (color, themeColors) => {
+    if (typeof color === 'string') {
+        return color;
+    }
+    if (color < 16) {
+        return themeColors[color] ?? themeColors[7] ?? '#ffffff';
+    }
+    if (color < 232) {
+        const index = color - 16;
+        const red = CUBE_LEVELS[Math.floor(index / 36) % 6];
+        const green = CUBE_LEVELS[Math.floor(index / 6) % 6];
+        const blue = CUBE_LEVELS[index % 6];
+        return `#${toHex(red)}${toHex(green)}${toHex(blue)}`;
+    }
+    const gray = 8 + (Math.min(color, 255) - 232) * 10;
+    return `#${toHex(gray)}${toHex(gray)}${toHex(gray)}`;
+};

package/dist/renderer/theme.d.ts

@@ -0,0 +1,3 @@
+import type { RenderTheme } from './types.js';
+/** The colors used until a theme is read from CSS: the dark palette of `lognal.css`. */
+export declare const DEFAULT_RENDER_THEME: RenderTheme;

package/dist/renderer/theme.js

@@ -0,0 +1,52 @@
+/** The colors used until a theme is read from CSS: the dark palette of `lognal.css`. */
+export const DEFAULT_RENDER_THEME = {
+    background: '#16181d',
+    foreground: '#e3e5ea',
+    muted: '#8f94a1',
+    accent: '#5aa2ff',
+    selection: 'rgba(90, 162, 255, 0.3)',
+    match: 'rgba(252, 191, 50, 0.3)',
+    separator: 'rgba(227, 229, 234, 0.05)',
+    error: '#ff8a8d',
+    errorBackground: 'rgba(252, 79, 83, 0.1)',
+    warn: '#fcc549',
+    warnBackground: 'rgba(252, 191, 50, 0.08)',
+    info: '#5aa2ff',
+    debug: '#8f94a1',
+    tokens: {
+        muted: '#8f94a1',
+        string: '#7fd6a4',
+        number: '#b9a8ff',
+        boolean: '#b9a8ff',
+        null: '#8f94a1',
+        key: '#82bdff',
+        symbol: '#f5a3d7',
+        function: '#82bdff',
+        regexp: '#ffa585',
+        date: '#7fd6a4',
+        tag: '#82bdff',
+        attribute: '#fcc549',
+        error: '#ff8a8d',
+        warn: '#fcc549',
+        info: '#5aa2ff',
+        accent: '#5aa2ff'
+    },
+    ansi: [
+        '#3b3f4a',
+        '#fc5c60',
+        '#43d786',
+        '#fcbf32',
+        '#5aa2ff',
+        '#c792ea',
+        '#56d4dd',
+        '#d0d3db',
+        '#6b7080',
+        '#ff8a8d',
+        '#7ee3a8',
+        '#ffd466',
+        '#82bdff',
+        '#ddb6f2',
+        '#8ae6ec',
+        '#ffffff'
+    ]
+};

package/dist/renderer/types.d.ts

@@ -0,0 +1,82 @@
+import type { VisualRow } from '../core/layout/types.js';
+import type { StyleToken } from '../core/types.js';
+/** The font the log text is drawn with. Only monospace fonts line up on the grid. */
+export interface FontSettings {
+    /** A CSS font family list, such as `"JetBrains Mono", D2Coding, monospace`. */
+    family: string;
+    /** Font size in CSS pixels. */
+    size: number;
+    /** Font weight of regular text, such as `400`. */
+    weight: number;
+    /** Row height as a multiple of the font size. */
+    lineHeight: number;
+}
+/** The size of one cell of the text grid, in CSS pixels. */
+export interface CellMetrics {
+    width: number;
+    height: number;
+    /** Distance from the top of a row to the text baseline. */
+    baseline: number;
+}
+/** Colors the renderer draws with. Any CSS color works. */
+export interface RenderTheme {
+    background: string;
+    foreground: string;
+    muted: string;
+    accent: string;
+    selection: string;
+    match: string;
+    separator: string;
+    error: string;
+    errorBackground: string;
+    warn: string;
+    warnBackground: string;
+    info: string;
+    debug: string;
+    tokens: Record<Exclude<StyleToken, 'default'>, string>;
+    /** The 16 ANSI colors: black, red, green, yellow, blue, magenta, cyan, white, then bright. */
+    ansi: string[];
+}
+/** Highlights on one row, as ranges of columns of the content area. */
+export interface RowDecoration {
+    selection?: [number, number];
+    matches?: [number, number][];
+}
+/** Everything needed to draw one frame. */
+export interface RenderFrame {
+    rows: VisualRow[];
+    decorations: RowDecoration[];
+    /** Vertical offset of the first row in CSS pixels, zero or negative. */
+    offsetY: number;
+    /** Horizontal scroll of the content area in CSS pixels. */
+    scrollX: number;
+    /** Space before the gutter in CSS pixels. */
+    paddingLeft: number;
+    /** Cells taken by the timestamp column, or 0 when timestamps are hidden. */
+    timestampCells: number;
+    /** Cells taken by the level marker column. */
+    markerCells: number;
+    /** Formats the time of an entry for the timestamp column. */
+    formatTime: (time: number) => string;
+}
+/**
+ * Draws frames of the log. The viewer owns the layout, scrolling and input; a renderer only
+ * turns a frame into pixels, so a different drawing technology can take its place.
+ */
+export interface Renderer {
+    /** The element the renderer draws into. */
+    readonly element: HTMLElement;
+    setTheme(theme: RenderTheme): void;
+    /** Sets the font and returns the size of a cell. */
+    setFont(font: FontSettings): CellMetrics;
+    getMetrics(): CellMetrics;
+    /** Sets the drawing size in CSS pixels. */
+    resize(width: number, height: number, pixelRatio: number): void;
+    render(frame: RenderFrame): void;
+    /**
+     * Called when fonts finish loading glyphs the last frame needed, so the viewer can measure
+     * again and redraw.
+     */
+    onFontsChanged(listener: () => void): void;
+    dispose(): void;
+}

package/dist/renderer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/sources/console/format.d.ts

@@ -0,0 +1,32 @@
+import type { LogPart, TextStyle, ValueNode } from '../../core/types.js';
+/** Captures a value for display. */
+export type ValueCapture = (value: unknown) => ValueNode;
+/** Returns whether a CSS color can be used as is. Anything that could load a resource is rejected. */
+export declare const isSafeColor: (value: string) => boolean;
+/**
+ * Reads the CSS given to `%c` and keeps only what the viewer can draw: text and background
+ * color, weight, style and decoration. Everything else is ignored, including any value that
+ * refers to a URL, so a log message cannot make the page load anything.
+ */
+export declare const parseConsoleCss: (css: string) => TextStyle | undefined;
+/**
+ * Applies the format specifiers in the first argument, following the Formatter operation of
+ * the Console Standard, and returns the parts of the message together with the arguments the
+ * specifiers did not consume.
+ *
+ * `%s` converts with `String`, `%d` and `%i` with `parseInt`, `%f` with `parseFloat`, `%o`
+ * and `%O` insert the value itself, and `%c` styles the text that follows it. `%%` writes a
+ * percent sign. A specifier with no argument left stays in the text as written.
+ */
+export declare const applyFormat: (args: readonly unknown[], capture: ValueCapture) => {
+    parts: LogPart[];
+    rest: unknown[];
+};
+/**
+ * Turns the arguments of a console call into the parts of an entry.
+ *
+ * With more than one argument and a string first, the format specifiers are applied. The
+ * remaining arguments follow, separated by spaces: strings as plain text and everything else
+ * as a captured value.
+ */
+export declare const formatArguments: (args: readonly unknown[], capture: ValueCapture) => LogPart[];

package/dist/sources/console/format.js

@@ -0,0 +1,189 @@
+const SAFE_COLOR_FUNCTION = /^(rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\([\d\s.,%+\-/a-z]*\)$/i;
+const SAFE_COLOR_HEX = /^#[0-9a-f]{3,8}$/i;
+const SAFE_COLOR_NAME = /^[a-z]{3,30}$/i;
+const SPECIFIER = /%([sdifoOc%])/g;
+/** Returns whether a CSS color can be used as is. Anything that could load a resource is rejected. */
+export const isSafeColor = (value) => {
+    const color = value.trim();
+    return (SAFE_COLOR_HEX.test(color) || SAFE_COLOR_FUNCTION.test(color) || SAFE_COLOR_NAME.test(color));
+};
+/** Splits a CSS value on spaces that are not inside parentheses. */
+const splitCssValue = (value) => {
+    const tokens = [];
+    let depth = 0;
+    let current = '';
+    for (const character of value) {
+        if (character === '(') {
+            depth++;
+        }
+        else if (character === ')') {
+            depth = Math.max(0, depth - 1);
+        }
+        if (/\s/.test(character) && depth === 0) {
+            if (current) {
+                tokens.push(current);
+                current = '';
+            }
+        }
+        else {
+            current += character;
+        }
+    }
+    if (current) {
+        tokens.push(current);
+    }
+    return tokens;
+};
+/**
+ * Reads the CSS given to `%c` and keeps only what the viewer can draw: text and background
+ * color, weight, style and decoration. Everything else is ignored, including any value that
+ * refers to a URL, so a log message cannot make the page load anything.
+ */
+export const parseConsoleCss = (css) => {
+    const style = {};
+    for (const declaration of css.split(';')) {
+        const separator = declaration.indexOf(':');
+        if (separator < 0) {
+            continue;
+        }
+        const property = declaration.slice(0, separator).trim().toLowerCase();
+        const value = declaration.slice(separator + 1).trim();
+        if (property === 'color' && isSafeColor(value)) {
+            style.color = value;
+        }
+        else if (property === 'background' || property === 'background-color') {
+            const color = splitCssValue(value).find((token) => isSafeColor(token));
+            if (color) {
+                style.background = color;
+            }
+        }
+        else if (property === 'font-weight') {
+            const weight = Number(value);
+            if (value === 'bold' || value === 'bolder' || weight >= 600) {
+                style.bold = true;
+            }
+        }
+        else if (property === 'font-style' && /^(italic|oblique)/i.test(value)) {
+            style.italic = true;
+        }
+        else if (property === 'text-decoration' || property === 'text-decoration-line') {
+            if (/underline/i.test(value)) {
+                style.underline = true;
+            }
+            if (/line-through/i.test(value)) {
+                style.strikethrough = true;
+            }
+        }
+    }
+    return Object.keys(style).length > 0 ? style : undefined;
+};
+const toText = (value) => {
+    if (typeof value === 'string') {
+        return value;
+    }
+    try {
+        return String(value);
+    }
+    catch {
+        return Object.prototype.toString.call(value);
+    }
+};
+const toInteger = (value) => {
+    return typeof value === 'symbol' ? 'NaN' : String(parseInt(toText(value), 10));
+};
+const toFloat = (value) => {
+    return typeof value === 'symbol' ? 'NaN' : String(parseFloat(toText(value)));
+};
+/**
+ * Applies the format specifiers in the first argument, following the Formatter operation of
+ * the Console Standard, and returns the parts of the message together with the arguments the
+ * specifiers did not consume.
+ *
+ * `%s` converts with `String`, `%d` and `%i` with `parseInt`, `%f` with `parseFloat`, `%o`
+ * and `%O` insert the value itself, and `%c` styles the text that follows it. `%%` writes a
+ * percent sign. A specifier with no argument left stays in the text as written.
+ */
+export const applyFormat = (args, capture) => {
+    const [format, ...values] = args;
+    const parts = [];
+    if (typeof format !== 'string') {
+        return { parts, rest: [...args] };
+    }
+    let style;
+    let text = '';
+    let last = 0;
+    let consumed = 0;
+    const flush = () => {
+        if (text) {
+            const part = { type: 'text', text };
+            if (style) {
+                part.style = style;
+            }
+            parts.push(part);
+            text = '';
+        }
+    };
+    for (const match of format.matchAll(SPECIFIER)) {
+        const specifier = match[1];
+        const index = match.index ?? 0;
+        text += format.slice(last, index);
+        last = index + match[0].length;
+        if (specifier === '%') {
+            text += '%';
+            continue;
+        }
+        if (consumed >= values.length) {
+            text += match[0];
+            continue;
+        }
+        const value = values[consumed++];
+        switch (specifier) {
+            case 's':
+                text += toText(value);
+                break;
+            case 'd':
+            case 'i':
+                text += toInteger(value);
+                break;
+            case 'f':
+                text += toFloat(value);
+                break;
+            case 'c':
+                flush();
+                style = parseConsoleCss(toText(value));
+                break;
+            default:
+                flush();
+                parts.push({ type: 'value', value: capture(value) });
+                break;
+        }
+    }
+    text += format.slice(last);
+    flush();
+    return { parts, rest: values.slice(consumed) };
+};
+/**
+ * Turns the arguments of a console call into the parts of an entry.
+ *
+ * With more than one argument and a string first, the format specifiers are applied. The
+ * remaining arguments follow, separated by spaces: strings as plain text and everything else
+ * as a captured value.
+ */
+export const formatArguments = (args, capture) => {
+    let parts = [];
+    let rest = [...args];
+    if (args.length > 1 && typeof args[0] === 'string') {
+        const formatted = applyFormat(args, capture);
+        parts = formatted.parts;
+        rest = formatted.rest;
+    }
+    for (const value of rest) {
+        if (parts.length > 0) {
+            parts.push({ type: 'text', text: ' ' });
+        }
+        parts.push(typeof value === 'string'
+            ? { type: 'text', text: value }
+            : { type: 'value', value: capture(value) });
+    }
+    return parts;
+};

package/dist/sources/console/hook.d.ts

@@ -0,0 +1,27 @@
+import type { LogStore } from '../../core/store.js';
+import { type ConsoleMethod, type RecorderOptions } from './recorder.js';
+export interface HookConsoleOptions extends Partial<RecorderOptions> {
+    /** The methods to hook. Defaults to every method in `CONSOLE_METHODS`. */
+    methods?: readonly ConsoleMethod[];
+    /** Whether the original method still runs, so messages keep reaching the browser console. */
+    passthrough?: boolean;
+}
+/** An object with the console methods lognal records. */
+export type LognalConsole = {
+    [Method in ConsoleMethod]: (...args: unknown[]) => void;
+};
+/**
+ * Replaces the methods of a console so every call is also recorded in a store.
+ *
+ * Returns a function that restores the original methods. If another script wrapped a method
+ * after lognal did, that method is left in place and lognal's wrapper stops recording.
+ *
+ * A call is recorded before the original method runs, and an error while recording never
+ * reaches the page.
+ */
+export declare const hookConsole: (target: Console, store: LogStore, options?: HookConsoleOptions) => (() => void);
+/**
+ * Creates an object with the console methods that records into a store without touching the
+ * global console. Use it to write to a viewer from your own code.
+ */
+export declare const createConsole: (store: LogStore, options?: Partial<RecorderOptions>) => LognalConsole;

package/dist/sources/console/hook.js

@@ -0,0 +1,94 @@
+import { CONSOLE_METHODS, ConsoleRecorder } from './recorder.js';
+const FRAME_V8 = /^\s+at\s/;
+const FRAME_OTHER = /@/;
+/** Removes the lines before the first stack frame, such as V8's `Error` header. */
+const framesOnly = (stack) => {
+    const lines = stack.split('\n');
+    const first = lines.findIndex((line) => FRAME_V8.test(line) || FRAME_OTHER.test(line));
+    return first < 0 ? [] : lines.slice(first);
+};
+/**
+ * Returns the stack trace of the code that called `wrapper`, without the frames of lognal
+ * itself. V8 can leave those frames out on its own; elsewhere the first frame is dropped.
+ */
+const captureStack = (wrapper) => {
+    const captureStackTrace = Error
+        .captureStackTrace;
+    if (typeof captureStackTrace === 'function') {
+        const holder = {};
+        captureStackTrace(holder, wrapper);
+        return framesOnly(holder.stack ?? '').join('\n');
+    }
+    return framesOnly(new Error().stack ?? '')
+        .slice(2)
+        .join('\n');
+};
+/**
+ * Replaces the methods of a console so every call is also recorded in a store.
+ *
+ * Returns a function that restores the original methods. If another script wrapped a method
+ * after lognal did, that method is left in place and lognal's wrapper stops recording.
+ *
+ * A call is recorded before the original method runs, and an error while recording never
+ * reaches the page.
+ */
+export const hookConsole = (target, store, options = {}) => {
+    const { methods = CONSOLE_METHODS, passthrough = true, ...recorderOptions } = options;
+    const recorder = new ConsoleRecorder(store, recorderOptions);
+    const console = target;
+    const installed = new Map();
+    let active = true;
+    let recording = false;
+    for (const method of methods) {
+        if (installed.has(method)) {
+            continue;
+        }
+        const original = console[method];
+        const wrapper = function (...args) {
+            if (active && !recording) {
+                recording = true;
+                try {
+                    recorder.record(method, args, method === 'trace' ? captureStack(wrapper) : undefined);
+                }
+                catch {
+                    // Recording must never break the page that logged the message.
+                }
+                finally {
+                    recording = false;
+                }
+            }
+            if (passthrough && typeof original === 'function') {
+                return original.apply(this, args);
+            }
+            return undefined;
+        };
+        console[method] = wrapper;
+        installed.set(method, { original, wrapper });
+    }
+    return () => {
+        if (!active) {
+            return;
+        }
+        active = false;
+        for (const [method, { original, wrapper }] of installed) {
+            if (console[method] === wrapper) {
+                console[method] = original;
+            }
+        }
+    };
+};
+/**
+ * Creates an object with the console methods that records into a store without touching the
+ * global console. Use it to write to a viewer from your own code.
+ */
+export const createConsole = (store, options = {}) => {
+    const recorder = new ConsoleRecorder(store, options);
+    const result = {};
+    for (const method of CONSOLE_METHODS) {
+        const call = (...args) => {
+            recorder.record(method, args, method === 'trace' ? captureStack(call) : undefined);
+        };
+        result[method] = call;
+    }
+    return result;
+};

package/dist/sources/console/recorder.d.ts

@@ -0,0 +1,41 @@
+import type { LogStore } from '../../core/store.js';
+import { type CaptureOptions } from './snapshot.js';
+/** The console methods lognal records. */
+export type ConsoleMethod = 'log' | 'info' | 'warn' | 'error' | 'debug' | 'trace' | 'dir' | 'dirxml' | 'table' | 'group' | 'groupCollapsed' | 'groupEnd' | 'count' | 'countReset' | 'time' | 'timeLog' | 'timeEnd' | 'assert' | 'clear';
+export declare const CONSOLE_METHODS: readonly ConsoleMethod[];
+export interface RecorderOptions extends CaptureOptions {
+    /** Whether `console.clear` removes the entries from the store. */
+    clearStore: boolean;
+}
+export declare const DEFAULT_RECORDER_OPTIONS: RecorderOptions;
+/**
+ * Turns console calls into store entries.
+ *
+ * A recorder keeps the state the Console Standard gives a console: the count map, the timer
+ * table and the group stack. Everything is captured synchronously, when the method is called.
+ */
+export declare class ConsoleRecorder {
+    private readonly store;
+    private options;
+    private readonly counts;
+    private readonly timers;
+    private groups;
+    constructor(store: LogStore, options?: Partial<RecorderOptions>);
+    setOptions(options: Partial<RecorderOptions>): void;
+    /**
+     * Records one call. `stack` is the caller's stack trace, which only `trace` uses.
+     */
+    record(method: ConsoleMethod, args: readonly unknown[], stack?: string): void;
+    private readonly capture;
+    private add;
+    private trace;
+    private table;
+    private group;
+    private count;
+    private countReset;
+    private time;
+    private timeLog;
+    private timeEnd;
+    private assert;
+    private clear;
+}