@fusion.dev/helix-headless 0.203.0 → 0.204.0

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

@@ -1,7 +1,7 @@
 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';
+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. */
@@ -34,8 +34,15 @@ declare const HelixHeadlessLog_base: (new (...args: any[]) => import("@fusion.de
  * 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.
+ * escape code is dropped.
+ *
+ * **Read a CI log's own markers with `format`.** `github-actions` reads the
+ * workflow commands a step writes, `::group::` and `::error::` among them,
+ * and the times at the start of a downloaded log. `vercel` reads a Vercel
+ * build log's phases and its warnings. Each step opens as it starts, folds
+ * once it passes, stays open where it failed, and is timed from its lines.
+ * For any other log, give `parse` a function that reads each finished line:
+ * it returns a level, a group, or `open` and `close` to start and end a step.
  *
  * **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.
@@ -50,6 +57,18 @@ declare const HelixHeadlessLog_base: (new (...args: any[]) => import("@fusion.de
  * 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`.
  *
+ * **`selectable` lets a reader select lines**, as a code host does: pressing a
+ * number selects its line, and pressing another with Shift selects every line
+ * between them. `selected-lines` holds the selection, such as `12-20`, and
+ * `helix-select` asks before it changes. With a `line-href` that is a
+ * fragment, the address follows the selection, `#L12` or `#L12-L20`, and a
+ * page opened at one selects it and scrolls to it.
+ *
+ * **The numbers are one tab stop.** Where they are links or buttons, Tab
+ * reaches the one a reader last used, or the first selected, and the arrow
+ * keys move between them, with Home and End for the first and the last. With
+ * Shift on a `selectable` log, the selection follows.
+ *
  * **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
@@ -75,8 +94,10 @@ declare const HelixHeadlessLog_base: (new (...args: any[]) => import("@fusion.de
  * @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 {HelixExpandEvent} helix-expand - Fired after a reader opens or closes a step drawn from `groups` or opened by a parser, 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`.
+ * @event {HelixSelectEvent} helix-select - Fired when a reader presses a number to change the selection, with the lines asked for in `detail.value`. Cancelable.
+ * @event {HelixSelectedEvent} helix-selected - Fired after the selection changes, with the lines now selected in `detail.value`, such as `12-20`.
  *
  * @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.
@@ -105,6 +126,7 @@ declare const HelixHeadlessLog_base: (new (...args: any[]) => import("@fusion.de
  * @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-selected - The row of a line drawn from data that is selected.
  * @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`.
@@ -177,6 +199,14 @@ export declare class HelixHeadlessLog extends HelixHeadlessLog_base {
     errorLabel: string;
     /** The log's name, read by screen readers, where `label` is empty. */
     fallbackLabel: string;
+    /**
+     * The format written text is in, read with a parser Helix ships:
+     * `github-actions` reads a GitHub Actions log's workflow commands into steps
+     * and levels, and `vercel` a Vercel build log's phases and warnings. Absent
+     * reads none. `parse` wins over it.
+     */
+    get format(): 'github-actions' | 'vercel' | undefined;
+    set format(next: 'github-actions' | 'vercel' | undefined);
     /**
      * What a screen reader hears when a step finishes or fails. `{heading}` is
      * the step's heading and `{status}` is `done` or `failed`.
@@ -224,8 +254,8 @@ export declare class HelixHeadlessLog extends HelixHeadlessLog_base {
     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.
+     * as `level`, `open` or `close` to start or end a step, or `null` to drop
+     * the line. Lines in `lines` are taken as they are. Wins over `format`.
      */
     get parse(): LogParser | undefined;
     set parse(next: LogParser | undefined);
@@ -243,6 +273,17 @@ export declare class HelixHeadlessLog extends HelixHeadlessLog_base {
     query: string;
     /** The words on the button that returns to the newest line, where `resume` is empty. */
     resumeLabel: string;
+    /**
+     * Whether pressing a line's number selects the line, and pressing another
+     * with Shift selects every line between them. Each number is then a
+     * button, or a link with `line-href`, and the arrow keys move between them.
+     */
+    selectable: boolean;
+    /**
+     * The lines selected, as a number or a range such as `12-20`. Empty selects
+     * none. A reader's press asks first: `helix-select` is cancelable.
+     */
+    selectedLines: 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
@@ -261,6 +302,14 @@ export declare class HelixHeadlessLog extends HelixHeadlessLog_base {
     /** Whether a line longer than the box wraps onto the next row. Otherwise the log scrolls sideways. */
     wrap: boolean;
     private pinnedState;
+    private formatValue;
+    private parseValue;
+    /** The number that is the log's one tab stop among its numbers, or 0 before anyone moved. */
+    private stop;
+    /** The line a Shift press measures a range from. */
+    private selectionAnchor;
+    /** The steps the last update saw, which a page's `open` is compared with. */
+    private lastGroups;
     private doneState;
     /** Whether a source is being read, which the log says with `aria-busy`. */
     private reading;
@@ -301,6 +350,16 @@ export declare class HelixHeadlessLog extends HelixHeadlessLog_base {
     private readonly virtualize;
     /** Whether the lines are data rather than children. */
     private get fed();
+    /** The parser `format` names. */
+    private get formatParser();
+    /** The steps from `groups`, then the steps a parser opened. */
+    private get allGroups();
+    /** Whether the numbers take focus: links with `line-href`, or buttons when `selectable`. */
+    private get interactive();
+    /** The selection as its first and last line, or undefined where there is none. */
+    private get selection();
+    /** Whether line `number` is selected. */
+    private selected;
     /** The element that scrolls, once there is one. */
     private get log();
     /**
@@ -327,6 +386,55 @@ export declare class HelixHeadlessLog extends HelixHeadlessLog_base {
      * hides.
      */
     scrollToLine(number: number, options?: LogScrollOptions): Promise<boolean>;
+    /**
+     * Asks to select `value`, a line or a range, and applies it unless refused,
+     * then says so and, with a `line-href` that is a fragment such as `#L{n}`,
+     * puts the selection in the address.
+     */
+    private requestSelect;
+    /**
+     * What the address holds for a selection, as `line-href` spells a line:
+     * `#L12`, and `#L12-L20` for a range. Undefined where `line-href` is not a
+     * fragment, since a link elsewhere is the page's to follow.
+     */
+    private address;
+    /**
+     * Puts a selection in the address without a new history entry, so the back
+     * button leaves the page rather than walking through every line pressed.
+     */
+    private writeAddress;
+    /**
+     * Reads a line or a range out of the address, as `line-href` spells one,
+     * selects it where the log is `selectable`, and scrolls to it.
+     */
+    private readonly readAddress;
+    /**
+     * The numbers of the lines a reader can move between, in order: what is
+     * drawn from data, or the lines written as children that no query hides
+     * and no shut group folds away.
+     */
+    private reachable;
+    /**
+     * The number that is the tab stop among `numbers`: the one a reader last
+     * moved to, else the first selected, else the first.
+     */
+    private stopAmong;
+    /** Moves focus to line `number`'s number, drawing it first where it is windowed. */
+    private focusLine;
+    /** The line a number belongs to, out of an event's path, and its number. */
+    private numberFrom;
+    /**
+     * A press on a number selects its line, or with Shift every line from the
+     * last one pressed. A link's own navigation is held back while it selects,
+     * since the selection writes the address itself.
+     */
+    private readonly handleClick;
+    /**
+     * The arrow keys move between numbers, and Home and End go to the first and
+     * the last, from a number with focus. With Shift on a `selectable` log, the
+     * selection follows.
+     */
+    private readonly handleNumberKey;
     /** Whether a group drawn from data is open: as the reader left it, or as `groups` seeded it. */
     private isOpen;
     /**

package/dist/log/root/log-root.js

@@ -1,6 +1,6 @@
 var HelixHeadlessLog_1;
 import { __decorate } from "tslib";
-import { customElement, drawIcon, formatWords, HelixBeforePinEvent, HelixElement, HelixExpandEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, SCROLLER_RULE, VIRTUAL_RULE, VirtualizeController, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { customElement, drawIcon, formatWords, HelixBeforePinEvent, HelixElement, HelixExpandEvent, HelixPinEvent, HelixSelectEvent, HelixSelectedEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, SCROLLER_RULE, VIRTUAL_RULE, VirtualizeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { arrowDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -9,8 +9,8 @@ import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import { lineRuns } from '../../code-block/lines.js';
 import { stripAnsi } from '../ansi.js';
-import { LogBuffer, } from '../buffer.js';
-import { timeOf } from '../line/log-line.js';
+import { LogBuffer, timeOf, } from '../buffer.js';
+import { LOG_FORMATS } from '../parsers.js';
 import { logRows } from '../rows.js';
 const STATUS_NAMES = {
     done: 'summary: group-summary-done',
@@ -41,9 +41,16 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         this.matchesLabel = '{count, plural, =0 {No lines match} one {# line matches} other {# lines match}}';
         this.query = '';
         this.resumeLabel = 'Jump to latest';
+        this.selectable = false;
+        this.selectedLines = '';
         this.threshold = 48;
         this.wrap = false;
         this.pinnedState = undefined;
+        this.formatValue = undefined;
+        this.parseValue = undefined;
+        this.stop = 0;
+        this.selectionAnchor = undefined;
+        this.lastGroups = [];
         this.doneState = undefined;
         this.reading = false;
         this.announcement = '';
@@ -72,6 +79,78 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
             measured: () => this.wrap,
             rows: () => (this.fed ? this.drawn() : []),
         });
+        this.readAddress = () => {
+            if (!this.lineHref.startsWith('#') || !this.lineHref.includes('{n}')) {
+                return;
+            }
+            const one = this.lineHref
+                .split('{n}')
+                .map((part) => part.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+                .join('(\\d+)');
+            const found = new RegExp(`^${one}(?:-${one.replace(/^#/, '')})?$`).exec(location.hash);
+            if (!found) {
+                return;
+            }
+            const first = Number(found[1]);
+            const last = Number(found[2] ?? found[1]);
+            if (this.selectable) {
+                this.selectedLines =
+                    first === last ? String(first) : `${Math.min(first, last)}-${Math.max(first, last)}`;
+            }
+            this.selectionAnchor = first;
+            this.stop = Math.min(first, last);
+            void this.updateComplete.then(() => requestAnimationFrame(() => {
+                void this.scrollToLine(Math.min(first, last));
+            }));
+        };
+        this.handleClick = (event) => {
+            const number = this.numberFrom(event.composedPath());
+            if (number === undefined) {
+                return;
+            }
+            this.stop = number;
+            if (!this.selectable) {
+                return;
+            }
+            event.preventDefault();
+            const anchor = this.selectionAnchor;
+            if (event.shiftKey && anchor !== undefined) {
+                this.requestSelect(`${Math.min(anchor, number)}-${Math.max(anchor, number)}`);
+                return;
+            }
+            this.selectionAnchor = number;
+            this.requestSelect(String(number));
+        };
+        this.handleNumberKey = (event) => {
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            const from = this.numberFrom(event.composedPath());
+            if (from === undefined) {
+                return;
+            }
+            const numbers = this.reachable();
+            const at = numbers.indexOf(from);
+            const to = event.key === 'ArrowDown'
+                ? numbers[Math.min(numbers.length - 1, at + 1)]
+                : event.key === 'ArrowUp'
+                    ? numbers[Math.max(0, at - 1)]
+                    : event.key === 'Home'
+                        ? numbers[0]
+                        : event.key === 'End'
+                            ? numbers.at(-1)
+                            : undefined;
+            if (to === undefined) {
+                return;
+            }
+            event.preventDefault();
+            if (event.shiftKey && this.selectable) {
+                const anchor = this.selectionAnchor ?? from;
+                this.selectionAnchor = anchor;
+                this.requestSelect(anchor === to ? String(to) : `${Math.min(anchor, to)}-${Math.max(anchor, to)}`);
+            }
+            void this.focusLine(to);
+        };
         this.handleResize = () => {
             this.markScroller();
             if (this.pinned) {
@@ -103,7 +182,7 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
             }
             this.opened.set(id, group.open);
             this.requestUpdate();
-            const open = this.groups.filter((each) => this.isOpen(each.id)).map((each) => each.id);
+            const open = this.allGroups.filter((each) => this.isOpen(each.id)).map((each) => each.id);
             this.dispatchEvent(new HelixExpandEvent({ value: open.join(',') }));
         };
     }
@@ -119,6 +198,15 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         this.doneState = next;
         this.requestUpdate('done', previous);
     }
+    get format() {
+        return this.formatValue;
+    }
+    set format(next) {
+        const previous = this.formatValue;
+        this.formatValue = next;
+        this.buffer.parse = this.parseValue ?? this.formatParser;
+        this.requestUpdate('format', previous);
+    }
     get lines() {
         return this.buffer.lines;
     }
@@ -129,11 +217,12 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         this.requestUpdate('lines', previous);
     }
     get parse() {
-        return this.buffer.parse;
+        return this.parseValue;
     }
     set parse(next) {
-        const previous = this.buffer.parse;
-        this.buffer.parse = next;
+        const previous = this.parseValue;
+        this.parseValue = next;
+        this.buffer.parse = next ?? this.formatParser;
         this.requestUpdate('parse', previous);
     }
     get pinned() {
@@ -161,6 +250,28 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
             this.groups.length > 0 ||
             this.sourceValue !== null);
     }
+    get formatParser() {
+        return this.formatValue === undefined ? undefined : LOG_FORMATS[this.formatValue];
+    }
+    get allGroups() {
+        return this.buffer.steps.length === 0 ? this.groups : [...this.groups, ...this.buffer.steps];
+    }
+    get interactive() {
+        return this.lineNumbers && (this.selectable || this.lineHref !== '');
+    }
+    get selection() {
+        const found = /^\s*(\d+)(?:\s*-\s*(\d+))?\s*$/.exec(this.selectedLines);
+        if (!found) {
+            return undefined;
+        }
+        const first = Number(found[1]);
+        const last = Number(found[2] ?? found[1]);
+        return [Math.min(first, last), Math.max(first, last)];
+    }
+    selected(number) {
+        const range = this.selection;
+        return range !== undefined && number >= range[0] && number <= range[1];
+    }
     get log() {
         return this.partNamed('log');
     }
@@ -246,18 +357,104 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         }
         return true;
     }
+    requestSelect(value) {
+        if (value === this.selectedLines) {
+            return;
+        }
+        requestChange({
+            apply: (next) => {
+                this.selectedLines = next;
+                this.dispatchEvent(new HelixSelectedEvent({ value: next }));
+                this.writeAddress(next);
+            },
+            event: (next) => new HelixSelectEvent({ value: next }),
+            host: this,
+            next: value,
+        });
+    }
+    address(value) {
+        if (!this.lineHref.startsWith('#') || !this.lineHref.includes('{n}')) {
+            return undefined;
+        }
+        const found = /^(\d+)(?:-(\d+))?$/.exec(value);
+        if (!found) {
+            return undefined;
+        }
+        const first = this.lineHref.replaceAll('{n}', found[1] ?? '');
+        return found[2] === undefined
+            ? first
+            : `${first}-${this.lineHref.replaceAll('{n}', found[2]).slice(1)}`;
+    }
+    writeAddress(value) {
+        const hash = this.address(value);
+        if (hash !== undefined && typeof history !== 'undefined') {
+            history.replaceState(history.state, '', hash);
+        }
+    }
+    reachable() {
+        if (this.fed) {
+            return this.view.rows.flatMap((row) => (row.kind === 'line' ? [row.number] : []));
+        }
+        return this.childLines.flatMap((line, at) => !line.logFiltered && this.childGroups.every((group) => group.open || !group.contains(line))
+            ? [at + 1]
+            : []);
+    }
+    stopAmong(numbers) {
+        if (numbers.includes(this.stop)) {
+            return this.stop;
+        }
+        const range = this.selection;
+        const first = range
+            ? numbers.find((number) => number >= range[0] && number <= range[1])
+            : undefined;
+        return first ?? numbers[0] ?? 0;
+    }
+    async focusLine(number) {
+        this.stop = number;
+        if (this.fed) {
+            const index = this.view.rows.findIndex((row) => row.kind === 'line' && row.number === number);
+            if (index < 0) {
+                return;
+            }
+            if (this.pinned) {
+                this.requestPinned(false);
+            }
+            this.virtualize.reveal(index);
+            this.virtualize.measure();
+            this.requestUpdate();
+            await this.updateComplete;
+            const line = [
+                ...(this.renderRoot?.querySelectorAll?.('[part="row"] > *') ?? []),
+            ].find((each) => each.logNumber === number);
+            await line?.updateComplete;
+            line?.focusNumber();
+            return;
+        }
+        await this.updateComplete;
+        const line = this.childLines[number - 1];
+        await line?.updateComplete;
+        line?.focusNumber();
+    }
+    numberFrom(path) {
+        const onNumber = path.some((target) => target instanceof Element && target.getAttribute('part') === 'number');
+        if (!onNumber) {
+            return undefined;
+        }
+        const line = path.find((target) => typeof target === 'object' && target !== null && 'isLogLine' in target);
+        return line && line.logNumber > 0 ? line.logNumber : undefined;
+    }
     isOpen(id) {
         const known = this.opened.get(id);
         if (known !== undefined) {
             return known;
         }
-        const seeded = this.groups.find((group) => group.id === id)?.open ?? false;
+        const seeded = this.allGroups.find((group) => group.id === id)?.open ?? false;
         this.opened.set(id, seeded);
         return seeded;
     }
     reopen(previous) {
         const before = new Map((previous ?? []).map((group) => [group.id, group.open]));
-        for (const group of this.groups) {
+        for (const group of this.allGroups) {
             if (group.open !== undefined && before.has(group.id) && before.get(group.id) !== group.open) {
                 this.opened.set(group.id, group.open);
             }
@@ -319,6 +516,7 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         const marks = lineRuns(this.markLines);
         const needle = this.query.trim().toLowerCase();
         const start = this.childLines.map((line) => timeOf(line.at)).find((time) => time !== undefined);
+        const stop = this.interactive ? this.stopAmong(this.reachable()) : 0;
         this.childLines.forEach((line, at) => {
             const filtered = needle !== '' && !(line.textContent ?? '').toLowerCase().includes(needle);
             whenHydrated(line, () => {
@@ -329,6 +527,9 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
                 line.logStart = start;
                 line.logMarked = inRuns(marks, at + 1);
                 line.logFiltered = filtered;
+                line.logSelectable = this.selectable;
+                line.logSelected = this.selected(at + 1);
+                line.logStop = at + 1 === stop;
             });
             if (!filtered && needle !== '') {
                 for (const group of this.childGroups) {
@@ -356,7 +557,7 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
     listen() {
         const groups = new Map();
         if (this.fed) {
-            for (const group of this.groups) {
+            for (const group of this.allGroups) {
                 groups.set(group.id, { heading: group.heading, status: group.status });
             }
         }
@@ -483,16 +684,23 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
             childList: true,
             subtree: true,
         });
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleNumberKey);
+        window.addEventListener('hashchange', this.readAddress);
         this.opening = true;
         requestAnimationFrame(() => {
             this.opening = false;
         });
+        this.readAddress();
         if (this.sourceValue !== null && !this.reading) {
             void this.readSource(this.sourceValue);
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleNumberKey);
+        window.removeEventListener('hashchange', this.readAddress);
         this.watcher?.disconnect();
         this.watcher = undefined;
         this.grower?.disconnect();
@@ -505,9 +713,8 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label || this.fallbackLabel, role: 'region' });
-        if (changed.has('groups')) {
-            this.reopen(changed.get('groups'));
-        }
+        this.reopen(this.lastGroups);
+        this.lastGroups = this.allGroups;
         if (changed.has('limit')) {
             this.buffer.limit = Math.max(0, Math.floor(this.limit || 0));
             this.buffer.write('');
@@ -532,7 +739,7 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         if (this.fed) {
             this.view = logRows({
                 current: this.buffer.current(),
-                groups: this.groups,
+                groups: this.allGroups,
                 lines: this.buffer.lines,
                 open: (id) => this.isOpen(id),
                 query: this.query,
@@ -570,7 +777,7 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         this.markScroller();
         this.announce();
     }
-    renderRow(row, marks, start) {
+    renderRow(row, marks, start, stop) {
         if (row.kind === 'group') {
             const group = this.tag('log-group');
             const { duration, heading, id, status } = row.group;
@@ -589,7 +796,7 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         const line = this.tag('log-line');
         const { at, level } = row.line;
         return html `<${line}
-      exportparts="line, line-debug, line-error, line-marked, line-warn, match: line-match,
+      exportparts="line, line-debug, line-error, line-marked, line-selected, line-warn, match: line-match,
         number: line-number, run: line-run, run-bold: line-run-bold, run-dim: line-run-dim,
         run-italic: line-run-italic, run-strike: line-run-strike, run-underline: line-run-underline,
         text: line-text, time: line-time"
@@ -601,6 +808,9 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
       .logNumber=${row.number}
       .logNumbers=${this.lineNumbers}
       .logQuery=${this.query}
+      .logSelectable=${this.selectable}
+      .logSelected=${this.selected(row.number)}
+      .logStop=${row.number === stop}
       .logStart=${start}
       .logTimes=${this.timestamps ?? ''}
       .runs=${this.buffer.runsOf(row.line)}
@@ -628,8 +838,12 @@ let HelixHeadlessLog = class HelixHeadlessLog extends MixinCollection(HelixEleme
         const { after, before, first, last } = this.virtualize.window;
         const marks = lineRuns(this.markLines);
         const start = this.timestamps === 'relative' ? this.firstTime : undefined;
+        const drawn = this.view.rows
+            .slice(first, last)
+            .flatMap((row) => (row.kind === 'line' ? [row.number] : []));
+        const stop = this.interactive ? this.stopAmong(drawn) : 0;
         return html `<div part="before" role="presentation" style="block-size: ${before}px; flex: none"></div>
-      ${repeat(this.view.rows.slice(first, last), (row) => (row.kind === 'group' ? `group:${row.group.id}` : `line:${row.number}`), (row, offset) => html `<div part="row" data-index=${first + offset}>${this.renderRow(row, marks, start)}</div>`)}
+      ${repeat(this.view.rows.slice(first, last), (row) => (row.kind === 'group' ? `group:${row.group.id}` : `line:${row.number}`), (row, offset) => html `<div part="row" data-index=${first + offset}>${this.renderRow(row, marks, start, stop)}</div>`)}
       <div part="after" role="presentation" style="block-size: ${after}px; flex: none"></div>`;
     }
     renderResume() {
@@ -693,6 +907,9 @@ __decorate([
     words,
     property({ attribute: 'fallback-label' })
 ], HelixHeadlessLog.prototype, "fallbackLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessLog.prototype, "format", null);
 __decorate([
     words,
     property({ attribute: 'group-label' })
@@ -739,6 +956,12 @@ __decorate([
     words,
     property({ attribute: 'resume-label' })
 ], HelixHeadlessLog.prototype, "resumeLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessLog.prototype, "selectable", void 0);
+__decorate([
+    property({ attribute: 'selected-lines' })
+], HelixHeadlessLog.prototype, "selectedLines", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessLog.prototype, "source", null);
@@ -754,6 +977,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessLog.prototype, "pinnedState", void 0);
+__decorate([
+    state()
+], HelixHeadlessLog.prototype, "stop", void 0);
 __decorate([
     state()
 ], HelixHeadlessLog.prototype, "doneState", void 0);