@fusion.dev/helix-headless 0.199.1 → 0.201.0

package/dist/log/line/log-line.d.ts

@@ -0,0 +1,108 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import type { LogRun } from '../ansi.js';
+import type { LogLevel } from '../buffer.js';
+/** How a line's time reads: the clock, or how far into the run it was written. */
+export type LogTimes = 'absolute' | 'relative';
+/** Milliseconds since the epoch for `at`, or undefined where it names no time. */
+export declare const timeOf: (at: number | string | undefined) => number | undefined;
+/**
+ * @summary One line of a log, with its number, its time, and its text.
+ *
+ * @description
+ * Write one for each line of a log you serve whole, inside a `Log` or a
+ * `Log.Group`. The log numbers each line, counting the lines of every group,
+ * and tells it whether to show its number and its time.
+ *
+ * `level` says how much a line matters, and the styled tier draws `warn` and
+ * `error` lines apart. The text is the line's own content, so you can mark it
+ * up yourself.
+ *
+ * @since 0.199.0
+ * @status experimental
+ * @documentation https://fusion.dev/helix/components/log
+ *
+ * @slot - The text of the line.
+ *
+ * @csspart line - The row the number, the time, and the text sit in.
+ * @csspart line-debug - The row of a line at `debug`.
+ * @csspart line-error - The row of a line at `error`.
+ * @csspart line-marked - The row of a line `mark-lines` names on the log.
+ * @csspart line-warn - The row of a line at `warn`.
+ * @csspart match - Text that matches the log's `query`, in a line the log draws from data.
+ * @csspart number - The line's number, shown with `line-numbers`, and a link with `line-href`.
+ * @csspart run - A stretch of text drawn in an ANSI style, in a line the log draws from data. Its color is `--log-run-color` and its background `--log-run-background-color`.
+ * @csspart run-bold - A run drawn bold.
+ * @csspart run-dim - A run drawn faint.
+ * @csspart run-italic - A run drawn italic.
+ * @csspart run-strike - A run drawn struck through.
+ * @csspart run-underline - A run drawn underlined.
+ * @csspart text - The text of the line.
+ * @csspart time - When the line was written, shown with `timestamps`.
+ *
+ * @cssproperty --log-run-background-color - Written on a `run` with a background, in the same form as `--log-run-color`.
+ * @cssproperty --log-run-color - Written on a `run` with a text color: one of the sixteen `--log-ansi-*` colors the log publishes, or the color itself.
+ *
+ * @cssstate filtered - The log's `query` does not match the line, so it draws nothing.
+ */
+export declare class HelixHeadlessLogLine extends HelixElement {
+    /** The key this family's words are registered under, its styled tag. */
+    static words: string;
+    /** When the line was written: milliseconds since the epoch, or anything `Date` parses. */
+    at: number | string;
+    /** How much the line matters. Absent is `info`. */
+    level?: LogLevel;
+    /** What a screen reader hears for the link on a line's number. `{number}` is the number. */
+    lineLabel: string;
+    /** @internal Set by the log: whether the query hides the line. */
+    logFiltered: boolean;
+    /** @internal Set by the log: the link a number goes to, with `{n}` for the number. */
+    logHref: string;
+    /** @internal Set by the log: whether `mark-lines` names the line. */
+    logMarked: boolean;
+    /** @internal Set by the log: the line's number, from 1. Zero where no log has said. */
+    logNumber: number;
+    /** @internal Set by the log: whether to show the number. */
+    logNumbers: boolean;
+    /** @internal Set by the log: the text to mark in the runs, for a line drawn from data. */
+    logQuery: string;
+    /** @internal Set by the log: when the first line was written, which `relative` counts from. */
+    logStart: number | undefined;
+    /** @internal Set by the log: how to show the time, or empty to hide it. */
+    logTimes: '' | LogTimes;
+    /** @internal Set by the log: the text as styled runs, for a line drawn from data. */
+    runs: readonly LogRun[] | undefined;
+    /**
+     * @internal Read by the log to find its lines among its children and inside
+     * its groups, which is cheaper than `instanceof`.
+     */
+    readonly isLogLine = true;
+    protected willUpdate(changed: PropertyValues): void;
+    /** The number, as a link where the log gave one, or as text a screen reader skips. */
+    private renderNumber;
+    /** The time, on the clock or into the run, where the log asked for one and the line has one. */
+    private renderTime;
+    /**
+     * The text: the default slot, falling back to the runs a log drew from data.
+     * The slot answers a page, and this answers the tier above.
+     */
+    protected renderText(): TemplateResult;
+    /**
+     * The runs a log drew from data, each match of its query marked.
+     *
+     * **The parts are literals**, each name written where it is decided, so a
+     * rule reading the source finds every name a run can carry. A named color
+     * is written into `style` as the `--log-ansi-` color of that name, and any
+     * other as itself. A bright color is written apart from the rest, so a rule
+     * reading the source sees the `--log-ansi-bright-` colors read as well as
+     * the plain ones. Inverse swaps the two, each falling back to the log's own
+     * ink.
+     */
+    private renderRuns;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-log-line': HelixHeadlessLogLine;
+    }
+}

package/dist/log/line/log-line.js

@@ -0,0 +1,145 @@
+import { __decorate } from "tslib";
+import { customElement, formatWords, HelixElement, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { markMatches } from '../rows.js';
+const NAME = /^[a-z-]+$/;
+export const timeOf = (at) => {
+    if (at === undefined || at === '') {
+        return undefined;
+    }
+    const time = typeof at === 'number' || /^\d+$/.test(at) ? Number(at) : Date.parse(at);
+    return Number.isFinite(time) ? time : undefined;
+};
+const elapsed = (seconds) => {
+    const whole = Math.max(0, Math.floor(seconds));
+    const hours = Math.floor(whole / 3600);
+    const minutes = Math.floor((whole % 3600) / 60);
+    const rest = String(whole % 60).padStart(2, '0');
+    return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${rest}` : `${minutes}:${rest}`;
+};
+let HelixHeadlessLogLine = class HelixHeadlessLogLine extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.at = '';
+        this.lineLabel = 'Line {number}';
+        this.logFiltered = false;
+        this.logHref = '';
+        this.logMarked = false;
+        this.logNumber = 0;
+        this.logNumbers = false;
+        this.logQuery = '';
+        this.logStart = undefined;
+        this.logTimes = '';
+        this.runs = undefined;
+        this.isLogLine = true;
+    }
+    static { this.words = 'helix-log'; }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('filtered', this.logFiltered);
+    }
+    renderNumber() {
+        if (!this.logNumbers || this.logNumber <= 0) {
+            return nothing;
+        }
+        const number = String(this.logNumber);
+        if (this.logHref !== '') {
+            return html `<a
+        part="number"
+        href=${this.logHref.replaceAll('{n}', number)}
+        aria-label=${formatWords(this, 'lineLabel', { number: this.logNumber })}
+      >${number}</a>`;
+        }
+        return html `<span part="number" aria-hidden="true">${number}</span>`;
+    }
+    renderTime() {
+        const time = timeOf(this.at);
+        if (this.logTimes === '' || time === undefined) {
+            return nothing;
+        }
+        const reads = this.logTimes === 'relative'
+            ? elapsed((time - (this.logStart ?? time)) / 1000)
+            : new Intl.DateTimeFormat(wordsLocale(this), {
+                hour: '2-digit',
+                hourCycle: 'h23',
+                minute: '2-digit',
+                second: '2-digit',
+            }).format(time);
+        return html `<time part="time" datetime=${new Date(time).toISOString()}>${reads}</time>`;
+    }
+    renderText() {
+        return html `<slot>${this.runs ? this.renderRuns() : nothing}</slot>`;
+    }
+    renderRuns() {
+        return markMatches(this.runs ?? [], this.logQuery).map((piece) => {
+            const styled = piece.color !== undefined ||
+                piece.background !== undefined ||
+                piece.bold ||
+                piece.dim ||
+                piece.italic ||
+                piece.strike ||
+                piece.underline ||
+                piece.inverse;
+            const color = piece.inverse ? (piece.background ?? 'background') : piece.color;
+            const background = piece.inverse ? (piece.color ?? 'foreground') : piece.background;
+            const run = styled
+                ? html `<span
+            part="run${piece.bold ? ' run-bold' : ''}${piece.dim ? ' run-dim' : ''}${piece.italic ? ' run-italic' : ''}${piece.underline ? ' run-underline' : ''}${piece.strike ? ' run-strike' : ''}"
+            style="${color === undefined ? '' : !NAME.test(color) ? `--log-run-color: ${color}; ` : color.startsWith('bright-') ? `--log-run-color: var(--log-ansi-bright-${color.slice(7)}); ` : `--log-run-color: var(--log-ansi-${color}); `}${background === undefined ? '' : !NAME.test(background) ? `--log-run-background-color: ${background}` : background.startsWith('bright-') ? `--log-run-background-color: var(--log-ansi-bright-${background.slice(7)})` : `--log-run-background-color: var(--log-ansi-${background})`}"
+          >${piece.text}</span>`
+                : piece.text;
+            return piece.match ? html `<mark part="match">${run}</mark>` : run;
+        });
+    }
+    render() {
+        if (this.logFiltered) {
+            return nothing;
+        }
+        const level = this.level;
+        return html `<div
+      part="line${level ? { debug: ' line-debug', error: ' line-error', info: '', warn: ' line-warn' }[level] : ''}${this.logMarked ? ' line-marked' : ''}"
+    >${this.renderNumber()}${this.renderTime()}<span part="text">${this.renderText()}</span></div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessLogLine.prototype, "at", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessLogLine.prototype, "level", void 0);
+__decorate([
+    words,
+    property({ attribute: 'line-label' })
+], HelixHeadlessLogLine.prototype, "lineLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logFiltered", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logHref", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logMarked", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logNumber", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logNumbers", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logQuery", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logStart", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logTimes", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "runs", void 0);
+HelixHeadlessLogLine = __decorate([
+    customElement('helix-headless-log-line')
+], HelixHeadlessLogLine);
+export { HelixHeadlessLogLine };

package/dist/log/root/log-root.d.ts

@@ -0,0 +1,415 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { type LogGroup, type LogLine, type LogParser } from '../buffer.js';
+import { type LogTimes } from '../line/log-line.js';
+/** Text a log reads as it arrives: a stream, or anything `for await` reads. */
+export type LogSource = AsyncIterable<string | Uint8Array> | ReadableStream<string | Uint8Array>;
+/** Where `scrollToLine` puts the line, and how it gets there. */
+export interface LogScrollOptions {
+    /** Where the line lands in the box. `center` by default. */
+    align?: 'center' | 'end' | 'nearest' | 'start';
+    /** The platform's scroll behavior. Instant when left out. */
+    behavior?: ScrollBehavior;
+}
+declare const HelixHeadlessLog_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
+/**
+ * @summary Output that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line.
+ *
+ * @description
+ * A log holds lines in the order they were written and keeps the reader at
+ * the newest one, until they scroll up to read. It stays where they left it
+ * while lines keep arriving, and a button returns them to the end
+ * (`resume-label`, "Jump to latest").
+ *
+ * **Lines arrive two ways.** For a log you serve whole, write `Log.Line`
+ * elements as children, inside `Log.Group` elements for the steps. For a log
+ * that is still being written, hand it text: `write(chunk)` takes text as it
+ * arrives, in pieces that need not end at a line break, and `source` takes a
+ * `ReadableStream` or an async iterable and reads it to the end. `lines` takes
+ * the lines as data. Text drawn from data is drawn one window at a time, so a
+ * log of a hundred thousand lines holds a screenful of elements, and the log
+ * needs a block size of its own. Do not use both ways at once.
+ *
+ * **Written text is read the way a terminal shows it.** A carriage return
+ * starts the line over, so a progress bar stays one line, and the line still
+ * being written is shown as it stands. ANSI colors and weights are drawn, in
+ * the sixteen colors the styled tier takes from your theme, and every other
+ * escape code is dropped. Give `parse` a function to read each finished line,
+ * such as a level off its prefix or a group off a marker.
+ *
+ * **Steps fold.** Lines that name a group in `groups` stand under its heading,
+ * which shows its status and how long it took and opens and closes the lines.
+ * A group a reader opens or closes fires `helix-expand` with every open group.
+ *
+ * **Search with `query`.** The log shows only the lines that hold it, marks
+ * each match, opens the groups that hold one, and says how many lines match.
+ *
+ * `line-numbers` numbers the lines from the first ever written, so a number
+ * still names its line once `limit` has let older lines go, and `line-href`
+ * makes each number a link, such as `#L{n}`. `scrollToLine(n)` takes a reader
+ * to one. `timestamps` shows each line's `at`, on the clock or as the time
+ * into the run. `mark-lines` marks lines, such as `12, 40-44`.
+ *
+ * **What a screen reader hears.** The log is a `log` and stays quiet as lines
+ * arrive, since reading a build aloud line by line helps nobody. A separate
+ * status region says each line at `error` once it arrives, each step once it
+ * finishes or fails, and the end of the run once `done` is set or `source`
+ * ends. Set `done` yourself when output you `write` is complete.
+ *
+ * The log scrolls on this tier. It carries `data-scroller`, so following the
+ * newest line and drawing a window work with no stylesheet. Give the log a
+ * block size, such as `helix-headless-log::part(log) { block-size: 20rem }`.
+ *
+ * ```js
+ * import '@fusion.dev/helix/log'
+ * ```
+ *
+ * @since 0.199.0
+ * @status experimental
+ * @category feedback
+ * @aliases Console, Terminal output, Build log, Deploy log, Log viewer, Output
+ * @documentation https://fusion.dev/helix/components/log
+ *
+ * @slot - The lines, as `Log.Line` and `Log.Group` elements.
+ * @slot resume - The control that returns to the newest line, shown while the reader is scrolled away. Defaults to a button named by `resume-label`.
+ * @slot toolbar - Controls above the log, such as a search field or a button that wraps lines.
+ *
+ * @event {HelixBeforePinEvent} helix-before-pin - Fired when the reader leaves the newest line by scrolling, or comes back to it. Cancelable.
+ * @event {HelixExpandEvent} helix-expand - Fired after a reader opens or closes a group drawn from `groups`, with the `id` of every open group in `detail.value`, separated by commas.
+ * @event {HelixPinEvent} helix-pin - Fired after the log follows the newest line or lets go of it, with `true` or `false` in `detail.value`.
+ *
+ * @csspart after - The space the rows below the drawn ones would take. Only for lines drawn from data.
+ * @csspart before - The space the rows above the drawn ones would take. Only for lines drawn from data.
+ * @csspart dropped - The line above the log that says how many earlier lines `limit` let go.
+ * @csspart empty - Shown when the log has no lines.
+ * @csspart group-content - Not drawn: a group drawn from data stands for its heading, and its lines are rows beside it.
+ * @csspart group-duration - How long a step drawn from `groups` took.
+ * @csspart group-heading - The heading of a step drawn from `groups`.
+ * @csspart group-mark - The caret of a step drawn from `groups`.
+ * @csspart group-status - The status mark of a step drawn from `groups`.
+ * @csspart group-summary - The button that opens and closes a step drawn from `groups`.
+ * @csspart group-summary-done - The button of a step drawn from `groups` that is `done`.
+ * @csspart group-summary-failed - The button of a step drawn from `groups` that `failed`.
+ * @csspart group-summary-pending - The button of a step drawn from `groups` that is `pending`.
+ * @csspart group-summary-running - The button of a step drawn from `groups` that is `running`.
+ * @csspart group-summary-skipped - The button of a step drawn from `groups` that was `skipped`.
+ * @csspart line - The row of a line drawn from data.
+ * @csspart line-debug - The row of a line drawn from data at `debug`.
+ * @csspart line-error - The row of a line drawn from data at `error`.
+ * @csspart line-marked - The row of a line drawn from data that `mark-lines` names.
+ * @csspart line-match - Text in a line drawn from data that matches `query`.
+ * @csspart line-number - The number of a line drawn from data.
+ * @csspart line-run - A stretch of a line drawn from data in an ANSI style.
+ * @csspart line-run-bold - A run drawn bold.
+ * @csspart line-run-dim - A run drawn faint.
+ * @csspart line-run-italic - A run drawn italic.
+ * @csspart line-run-strike - A run drawn struck through.
+ * @csspart line-run-underline - A run drawn underlined.
+ * @csspart line-text - The text of a line drawn from data.
+ * @csspart line-time - The time of a line drawn from data.
+ * @csspart line-warn - The row of a line drawn from data at `warn`.
+ * @csspart live - The region where screen readers hear errors, finished steps, and the end of the run.
+ * @csspart loading - Shown while `loading` is set.
+ * @csspart log - The lines, which scroll. On this tier, it needs only a block size.
+ * @csspart resume - The control shown while the reader is scrolled away from the newest line.
+ * @csspart resume-button - The button the `resume` region shows when nothing is slotted into it.
+ * @csspart resume-mark - The arrow on the default `resume-button`.
+ * @csspart row - The wrapper around one row drawn from data, a line or a group's heading.
+ * @csspart toolbar - The `toolbar` slot, above the log.
+ *
+ * @cssproperty --log-ansi-background - The background a run takes where ANSI swaps the colors and named none. Defaults to the log's own background on the styled tier.
+ * @cssproperty --log-ansi-black - The ANSI color black, which codes `30` and `40` draw.
+ * @cssproperty --log-ansi-blue - The ANSI color blue, which codes `34` and `44` draw.
+ * @cssproperty --log-ansi-bright-black - The ANSI color bright black, which codes `90` and `100` draw.
+ * @cssproperty --log-ansi-bright-blue - The ANSI color bright blue, which codes `94` and `104` draw.
+ * @cssproperty --log-ansi-bright-cyan - The ANSI color bright cyan, which codes `96` and `106` draw.
+ * @cssproperty --log-ansi-bright-green - The ANSI color bright green, which codes `92` and `102` draw.
+ * @cssproperty --log-ansi-bright-magenta - The ANSI color bright magenta, which codes `95` and `105` draw.
+ * @cssproperty --log-ansi-bright-red - The ANSI color bright red, which codes `91` and `101` draw.
+ * @cssproperty --log-ansi-bright-white - The ANSI color bright white, which codes `97` and `107` draw.
+ * @cssproperty --log-ansi-bright-yellow - The ANSI color bright yellow, which codes `93` and `103` draw.
+ * @cssproperty --log-ansi-cyan - The ANSI color cyan, which codes `36` and `46` draw.
+ * @cssproperty --log-ansi-foreground - The text color a run takes where ANSI swaps the colors and named none. Defaults to the log's own text color on the styled tier.
+ * @cssproperty --log-ansi-green - The ANSI color green, which codes `32` and `42` draw.
+ * @cssproperty --log-ansi-magenta - The ANSI color magenta, which codes `35` and `45` draw.
+ * @cssproperty --log-ansi-red - The ANSI color red, which codes `31` and `41` draw.
+ * @cssproperty --log-ansi-white - The ANSI color white, which codes `37` and `47` draw.
+ * @cssproperty --log-ansi-yellow - The ANSI color yellow, which codes `33` and `43` draw.
+ * @cssproperty --log-digits - Written on the `log`: how many digits the largest line number has, while `line-numbers` is set, so a stylesheet can size the column of numbers.
+ *
+ * @cssstate done - The run is over: `done` is set, or `source` ended.
+ * @cssstate empty - The log has no lines.
+ * @cssstate filtered - `query` is set, so only matching lines are shown.
+ * @cssstate pinned - The log follows its newest line.
+ */
+export declare class HelixHeadlessLog extends HelixHeadlessLog_base {
+    protected static markRules: string[];
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-log': { resumeLabel: 'Zum Ende' } })`.
+     */
+    static words: string;
+    /** How tall a row is assumed to be before one has been drawn, in pixels. */
+    static readonly ESTIMATE = 20;
+    /**
+     * Whether the log opens following its newest line, when `pinned` is not set.
+     * `default-pinned="false"` opens it where it starts.
+     */
+    defaultPinned: boolean;
+    /**
+     * Whether the run is over, which a screen reader is told once.
+     *
+     * Set it when output you `write` is complete. A `source` sets it when the
+     * stream ends.
+     */
+    get done(): boolean;
+    set done(next: boolean);
+    /** What a screen reader hears when the run is over. */
+    doneLabel: string;
+    /** What the line above the log says once `limit` has let lines go. `{count}` is how many. */
+    droppedLabel: string;
+    /** The text shown and announced when the log has no lines. */
+    emptyText: string;
+    /**
+     * What a screen reader hears when lines at `error` arrive. `{count}` is how
+     * many arrived together and `{text}` is the first of them.
+     */
+    errorLabel: string;
+    /** The log's name, read by screen readers, where `label` is empty. */
+    fallbackLabel: string;
+    /**
+     * What a screen reader hears when a step finishes or fails. `{heading}` is
+     * the step's heading and `{status}` is `done` or `failed`.
+     */
+    groupLabel: string;
+    /**
+     * The steps the lines from data name in `group`. A step stands where its
+     * first line is, and one with no line yet stands at the end.
+     *
+     * Replaced rather than mutated, as `lines` is: a step finishing is a new
+     * array with its `status` changed.
+     */
+    groups: readonly LogGroup[];
+    /** The log's name, read by screen readers. */
+    label: string;
+    /**
+     * The most lines kept, or 0 to keep them all. Past it the oldest lines are
+     * let go, and the line above the log says how many.
+     */
+    limit: number;
+    /**
+     * A link for each line number, with `{n}` where the number goes, such as
+     * `#L{n}`. Empty leaves the numbers as text.
+     */
+    lineHref: string;
+    /**
+     * What a screen reader hears for the link on a line's number, handed to each
+     * line the log draws. `{number}` is the number.
+     */
+    lineLabel: string;
+    /** Whether each line shows its number. */
+    lineNumbers: boolean;
+    /**
+     * The lines as data. Reading it gives every line kept, oldest first, with
+     * the line still being written left out.
+     *
+     * Replaced rather than mutated: setting it starts the log over with these
+     * lines, and `write` adds to them. Set it or write children, not both.
+     */
+    get lines(): readonly LogLine[];
+    set lines(next: readonly LogLine[]);
+    /** Lines to mark, as numbers and ranges such as `12, 40-44`. */
+    markLines: string;
+    /** What a screen reader hears when `query` changes. `{count}` is how many lines match. */
+    matchesLabel: string;
+    /**
+     * Reads each finished line of written text: return the fields to set, such
+     * as `level` or `group`, or `null` to drop the line. Lines in `lines` are
+     * taken as they are.
+     */
+    get parse(): LogParser | undefined;
+    set parse(next: LogParser | undefined);
+    /**
+     * Whether the log follows its newest line.
+     *
+     * The reader's scrolling asks first: `helix-before-pin` is cancelable, so a
+     * consumer refusing it takes the decision and assigns their own value. Not
+     * reflected, for the reason `Chat` gives at its own `pinned`: a default of
+     * true would write the attribute on upgrade.
+     */
+    get pinned(): boolean;
+    set pinned(next: boolean);
+    /** Text a line has to hold to be shown, ignoring case. Empty shows every line. */
+    query: string;
+    /** The words on the button that returns to the newest line, where `resume` is empty. */
+    resumeLabel: string;
+    /**
+     * Text to read as it arrives, to the end: a `ReadableStream` of text or
+     * bytes, such as a `fetch` response's body, or an async iterable. Bytes are
+     * read as UTF-8. The log sets `done` when it ends, and a new source stops
+     * reading the last one.
+     */
+    get source(): LogSource | null;
+    set source(next: LogSource | null);
+    /** How near the newest line still counts as being at it, in pixels. */
+    threshold: number;
+    /**
+     * How each line shows its `at`: `absolute` on the clock, `relative` as the
+     * time since the first line. Absent shows no time.
+     */
+    timestamps?: LogTimes;
+    /** Whether a line longer than the box wraps onto the next row. Otherwise the log scrolls sideways. */
+    wrap: boolean;
+    private pinnedState;
+    private doneState;
+    /** Whether a source is being read, which the log says with `aria-busy`. */
+    private reading;
+    /** The last thing said, and how many times something has been. */
+    private announcement;
+    private said;
+    /** The text written and handed over as data. */
+    private readonly buffer;
+    private sourceValue;
+    /** Which read of a source is current, so an older one stops writing. */
+    private readToken;
+    /** Stops the read in progress. */
+    private stopReading;
+    /** Whether each group drawn from data is open, from the first time it was seen. */
+    private readonly opened;
+    /** The rows drawn from data, worked out before each render. */
+    private view;
+    /** Whether the lines were replaced, so measurements no longer name the same rows. */
+    private fresh;
+    /** How many lines `limit` had let go at the last render. */
+    private droppedBefore;
+    /** Scroll offset the rows let go from the top took with them, owed back to a reader who is not following. */
+    private owed;
+    /** The lines written as children, in order through every group, read on each change. */
+    private childLines;
+    /** The groups written as children, in order. */
+    private childGroups;
+    /** Watches the children and their groups for lines arriving and steps changing status. */
+    private watcher;
+    /** Watches the log's box for size, which scrolling does not report. */
+    private grower;
+    /** The scroll offset this element last set, which the reader has not moved from. */
+    private stuckAt;
+    /** Until the first frame, what is in the log is what it opened with. */
+    private opening;
+    /** What the status region compared against last time. */
+    private heard;
+    private readonly virtualize;
+    /** Whether the lines are data rather than children. */
+    private get fed();
+    /** The element that scrolls, once there is one. */
+    private get log();
+    /**
+     * Every line kept, as plain text with the escape codes taken out, one to a
+     * row: what a download or a copy of the log should hold.
+     */
+    get text(): string;
+    /**
+     * Adds text as it arrives. A line ends at each line break, and the text
+     * after the last one is the line still being written.
+     */
+    write(chunk: string): void;
+    /**
+     * Lets every line go, and forgets which groups the reader opened, keeping
+     * `groups`, `parse`, and `limit`.
+     */
+    clear(): void;
+    /** Puts the log back at its newest line, and follows it again. */
+    resume(): void;
+    /**
+     * Scrolls to line `number`, counted from the first line ever written, and
+     * stops following the newest. Opens a shut group the line is in. Resolves
+     * to whether the line is shown: false for a line `limit` let go or `query`
+     * hides.
+     */
+    scrollToLine(number: number, options?: LogScrollOptions): Promise<boolean>;
+    /** Whether a group drawn from data is open: as the reader left it, or as `groups` seeded it. */
+    private isOpen;
+    /**
+     * Follows a group's `open` where the page changed it, so a page can open the
+     * step that failed. A group whose `open` did not change keeps what the
+     * reader left it at.
+     */
+    private reopen;
+    /** Whether the reader is within `threshold` of the newest line right now. */
+    private get atBottom();
+    /** Scrolls to the newest line, and remembers where that was. */
+    private stick;
+    /** Asks to follow or let go of the newest line, and reports whether the request stood. */
+    private requestPinned;
+    /** The rows drawn from data that are in the tree, each with its place in the whole set. */
+    private drawn;
+    /**
+     * Reads the lines and groups written as children, through every group, in
+     * the order they are written. Nothing on a server, or while hydrating what
+     * one sent.
+     */
+    private readChildren;
+    /**
+     * Tells each line written as a child its number and what the log shows, once
+     * it has hydrated, so its first render is the server's. Opens a group that
+     * holds a match while `query` is set.
+     */
+    private tellLines;
+    /** Makes the log a tab stop while it scrolls, so a keyboard can scroll it in every browser. */
+    private markScroller;
+    /** What the status region compares, as things stand. */
+    private listen;
+    /**
+     * Says what changed since the last time it looked: lines at `error`, steps
+     * that finished or failed, the end of the run, and how many lines a new
+     * `query` matches. Nothing is said for what the log opened with.
+     */
+    private announce;
+    /** Reads a source to its end, writing what it gives, and sets `done` when it ends. */
+    private readSource;
+    /**
+     * The log changed size, which moves nothing on its own: following, the
+     * newest line is followed.
+     */
+    private readonly handleResize;
+    private readonly handleMutation;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * The reader's own scrolling, which is the only thing that lets go of the
+     * newest line. Bound to the log in the template, since `scroll` is not
+     * composed and never reaches the host. A scroll this element made, and the
+     * log growing under a reader who has not moved, are not the reader leaving:
+     * `Chat` carries the measurement.
+     */
+    private readonly handleScroll;
+    private readonly handleResume;
+    /** A reader opened or closed a group drawn from data. */
+    private readonly handleGroupToggle;
+    /** One row drawn from data: a line, or a group's heading. */
+    private renderRow;
+    /** When the first line kept was written, which `relative` counts from. */
+    private get firstTime();
+    /**
+     * How many digits the largest line number has, which a stylesheet sizes the
+     * column of numbers by, or 0 where nobody can know: a server, or a log with
+     * no numbers shown.
+     */
+    private get digits();
+    /** The rows drawn from data, a window of them, between the room the rest would take. */
+    private renderRows;
+    /**
+     * The `resume` slot, with the way back drawn where nothing is slotted, behind
+     * a seam: the slot answers a page, and this answers the tier above.
+     */
+    protected renderResume(): TemplateResult;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-log': HelixHeadlessLog;
+    }
+}
+export {};