@fusion.dev/helix-headless 0.202.0 → 0.204.0

package/dist/element-events.generated.js

@@ -177,7 +177,13 @@ registerElementEvents({
         'helix-reorder',
         'input',
     ],
-    'helix-headless-log': ['helix-before-pin', 'helix-expand', 'helix-pin'],
+    'helix-headless-log': [
+        'helix-before-pin',
+        'helix-expand',
+        'helix-pin',
+        'helix-select',
+        'helix-selected',
+    ],
     'helix-headless-log-group': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-map': [
         'change',

package/dist/graph/root/graph-model.d.ts

@@ -3,7 +3,7 @@ export type GraphNodeShape = 'circle' | 'diamond' | 'ring' | 'square';
 /** How heavily a note is drawn, from the `emphasis` axis. */
 export type GraphNodeEmphasis = 'outlined' | 'solid' | 'subtle';
 /** What a note is drawn as made of, from the `material` axis. */
-export type GraphNodeMaterial = 'frosted' | 'glass';
+export type GraphNodeMaterial = 'frosted' | 'glass' | 'mark';
 /** What a note means, from the `tone` axis, which colors it over its group. */
 export type GraphNodeTone = 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
 /** One note in a graph. */
@@ -20,7 +20,7 @@ export interface GraphNode {
     emphasis?: GraphNodeEmphasis | undefined;
     /** A kind the note belongs to, such as a tag, which a renderer colors it by. */
     group?: string | undefined;
-    /** What it is drawn as made of: `glass` or `frosted`. Unset is the renderer's own. */
+    /** What it is drawn as made of: `glass`, `frosted`, or `mark`. Unset is the renderer's own. */
     material?: GraphNodeMaterial | undefined;
     /**
      * Its shape, which says what kind of note it is at a glance: a person as a

package/dist/log/buffer.d.ts

@@ -30,14 +30,41 @@ export interface LogGroup {
     /** Where it stands. */
     status?: LogStatus;
 }
+/**
+ * What a parser says about one finished line: the line's fields, and whether
+ * it opens or closes a step.
+ */
+export interface LogParsed extends Partial<LogLine> {
+    /**
+     * Closes the step that is open. Its status is `failed` where a line in it
+     * was at `error`, and `done` otherwise, and its duration runs from its first
+     * line's `at` to this one's, unless either is given here.
+     */
+    close?: boolean | {
+        duration?: string;
+        status?: LogStatus;
+    };
+    /**
+     * Opens a step with this heading, closing the one that is open. The lines
+     * after it belong to the step until another opens or this one closes.
+     */
+    open?: string;
+}
 /**
  * Reads one finished line of written text and says what it is.
  *
- * Return the fields to set, such as a `level` read off a prefix or a `group`
- * read off a marker, and `text` to show something else. Return `null` to drop
- * the line, such as a marker that only opens a group.
+ * Return the fields to set, such as a `level` read off a prefix, and `text` to
+ * show something else. Return `null` to drop the line. Return `open` or
+ * `close` to start or end a step, and the log keeps its steps itself: a line
+ * carrying either is a marker and is dropped, unless the result sets `text`,
+ * in which case an opening line is the step's first and a closing line stands
+ * after it.
  */
-export type LogParser = (text: string) => Partial<LogLine> | null | undefined;
+export type LogParser = (text: string) => LogParsed | null | undefined;
+/** `seconds` as a step's duration reads: `12s`, `1m 12s`, or `1h 2m`. */
+export declare const stepDuration: (seconds: number) => string;
+/** Milliseconds since the epoch for `at`, or undefined where it names no time. */
+export declare const timeOf: (at: number | string | undefined) => number | undefined;
 /**
  * The text of a run, kept as lines.
  *
@@ -56,6 +83,10 @@ export type LogParser = (text: string) => Partial<LogLine> | null | undefined;
  * **Color carries from line to line**, as it does in a terminal, so a block
  * that opens with green and closes many lines later is green throughout. It
  * carries through text a carriage return replaced as well.
+ *
+ * **Steps a parser opens are kept here**, in `steps`, each a new object
+ * whenever it changes, so a log can compare one set with the next and see a
+ * step finish.
  */
 export declare class LogBuffer {
     /** The finished lines kept, oldest first. */
@@ -66,6 +97,13 @@ export declare class LogBuffer {
     limit: number;
     /** Reads each finished line of written text. */
     parse: LogParser | undefined;
+    /** The steps `parse` opened, in order, replaced as a whole when one changes. */
+    steps: LogGroup[];
+    /** The step that is open, by its place in `steps`. */
+    private openStep;
+    /** Whether a line in the open step was at `error`, and when the step began. */
+    private stepFailed;
+    private stepStarted;
     /** The line still being written, as it reads now. */
     private partial;
     /** Whether the next text written starts the line over. */
@@ -94,6 +132,16 @@ export declare class LogBuffer {
     runsOf(line: LogLine): LogRun[];
     /** Finishes the line being written. */
     private finish;
+    /** When the open step's latest line was written. */
+    private stepEnded;
+    /** Opens a step named `heading`, closing the one that is open. */
+    private openStepNamed;
+    /**
+     * Closes the open step: failed where one of its lines was at `error`, done
+     * otherwise, timed from its first line to `at`, and folded unless it failed,
+     * as a CI page folds a step that passed.
+     */
+    private closeStep;
     /** Lets the oldest lines go past `limit`, all at once. */
     private trim;
 }

package/dist/log/buffer.js

@@ -1,15 +1,39 @@
 import { parseAnsi } from './ansi.js';
+export const stepDuration = (seconds) => {
+    const whole = Math.max(0, Math.round(seconds));
+    if (whole < 60) {
+        return `${whole}s`;
+    }
+    if (whole < 3600) {
+        const rest = whole % 60;
+        return rest === 0 ? `${Math.floor(whole / 60)}m` : `${Math.floor(whole / 60)}m ${rest}s`;
+    }
+    const minutes = Math.floor((whole % 3600) / 60);
+    return minutes === 0 ? `${Math.floor(whole / 3600)}h` : `${Math.floor(whole / 3600)}h ${minutes}m`;
+};
+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;
+};
 export class LogBuffer {
     constructor() {
         this.lines = [];
         this.dropped = 0;
         this.limit = 0;
         this.parse = undefined;
+        this.steps = [];
+        this.openStep = undefined;
+        this.stepFailed = false;
+        this.stepStarted = undefined;
         this.partial = '';
         this.returned = false;
         this.lineStyle = {};
         this.runs = new WeakMap();
         this.shown = undefined;
+        this.stepEnded = undefined;
     }
     write(chunk) {
         let finished = 0;
@@ -42,6 +66,10 @@ export class LogBuffer {
         this.returned = false;
         this.lineStyle = {};
         this.shown = undefined;
+        this.steps = [];
+        this.openStep = undefined;
+        this.stepFailed = false;
+        this.stepStarted = undefined;
         this.trim();
     }
     clear() {
@@ -51,7 +79,7 @@ export class LogBuffer {
         if (this.partial === '') {
             return undefined;
         }
-        const group = this.lines.at(-1)?.group;
+        const group = this.openStep === undefined ? this.lines.at(-1)?.group : this.steps[this.openStep]?.id;
         if (this.shown?.text !== this.partial || this.shown.group !== group) {
             this.shown = group === undefined ? { text: this.partial } : { group, text: this.partial };
         }
@@ -76,12 +104,68 @@ export class LogBuffer {
         this.returned = false;
         const read = this.parse?.(raw);
         if (read !== null) {
-            const line = { ...read, text: read?.text ?? raw };
-            this.runs.set(line, line.text === raw ? flow.runs : parseAnsi(line.text, this.lineStyle).runs);
-            this.lines.push(line);
+            const { close, open, ...fields } = read ?? {};
+            const marker = close !== undefined || open !== undefined;
+            const at = timeOf(fields.at);
+            if (close) {
+                this.closeStep(close, at);
+            }
+            if (open !== undefined) {
+                this.openStepNamed(open, at);
+            }
+            if (!marker || Object.hasOwn(fields, 'text')) {
+                const step = this.openStep === undefined ? undefined : this.steps[this.openStep];
+                const line = {
+                    ...(step && fields.group === undefined ? { group: step.id } : {}),
+                    ...fields,
+                    text: fields.text ?? raw,
+                };
+                if (step && line.group === step.id) {
+                    this.stepFailed ||= line.level === 'error';
+                    this.stepStarted ??= at;
+                    this.stepEnded = at ?? this.stepEnded;
+                }
+                this.runs.set(line, line.text === raw ? flow.runs : parseAnsi(line.text, this.lineStyle).runs);
+                this.lines.push(line);
+            }
         }
         this.lineStyle = flow.style;
     }
+    openStepNamed(heading, at) {
+        if (this.openStep !== undefined) {
+            this.closeStep(true, at);
+        }
+        this.steps = [
+            ...this.steps,
+            { heading, id: `step-${this.steps.length + 1}`, open: true, status: 'running' },
+        ];
+        this.openStep = this.steps.length - 1;
+        this.stepFailed = false;
+        this.stepStarted = at;
+        this.stepEnded = at;
+    }
+    closeStep(close, at) {
+        const index = this.openStep;
+        const step = index === undefined ? undefined : this.steps[index];
+        if (index === undefined || !step) {
+            return;
+        }
+        const given = typeof close === 'object' ? close : {};
+        const status = given.status ?? (this.stepFailed ? 'failed' : 'done');
+        const end = at ?? this.stepEnded;
+        const duration = given.duration ??
+            (this.stepStarted !== undefined && end !== undefined
+                ? stepDuration((end - this.stepStarted) / 1000)
+                : undefined);
+        const closed = {
+            ...step,
+            ...(duration === undefined ? {} : { duration }),
+            open: status === 'failed',
+            status,
+        };
+        this.steps = this.steps.map((each, place) => (place === index ? closed : each));
+        this.openStep = undefined;
+    }
     trim() {
         const over = this.limit > 0 ? this.lines.length - this.limit : 0;
         if (over > 0) {

package/dist/log/index.d.ts

@@ -1,5 +1,6 @@
 export { type LogRun, type LogStyle, parseAnsi, stripAnsi } from './ansi.js';
-export type { LogGroup, LogLevel, LogLine, LogParser, LogStatus } from './buffer.js';
+export type { LogGroup, LogLevel, LogLine, LogParsed, LogParser, LogStatus } from './buffer.js';
 export { HelixHeadlessLogGroup } from './group/log-group.js';
 export { HelixHeadlessLogLine, type LogTimes } from './line/log-line.js';
+export { parseGitHubActions, parseVercel } from './parsers.js';
 export { HelixHeadlessLog, type LogScrollOptions, type LogSource } from './root/log-root.js';

package/dist/log/index.js

@@ -1,4 +1,5 @@
 export { parseAnsi, stripAnsi } from './ansi.js';
 export { HelixHeadlessLogGroup } from './group/log-group.js';
 export { HelixHeadlessLogLine } from './line/log-line.js';
+export { parseGitHubActions, parseVercel } from './parsers.js';
 export { HelixHeadlessLog } from './root/log-root.js';

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

@@ -1,11 +1,9 @@
 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';
+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.
  *
@@ -28,9 +26,10 @@ export declare const timeOf: (at: number | string | undefined) => number | undef
  * @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-selected - The row of a line in the log's selection.
  * @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 number - The line's number, shown with `line-numbers`: a link with `line-href`, and a button on a `selectable` log.
  * @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.
@@ -66,8 +65,14 @@ export declare class HelixHeadlessLogLine extends HelixElement {
     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: whether pressing the number selects the line. */
+    logSelectable: boolean;
+    /** @internal Set by the log: whether the line is in the selection. */
+    logSelected: boolean;
     /** @internal Set by the log: when the first line was written, which `relative` counts from. */
     logStart: number | undefined;
+    /** @internal Set by the log: whether the number is the log's one tab stop among its numbers. */
+    logStop: boolean;
     /** @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. */
@@ -78,8 +83,17 @@ export declare class HelixHeadlessLogLine extends HelixElement {
      */
     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. */
+    /**
+     * The number: a link where the log gave `line-href`, a button where the log
+     * is `selectable`, and otherwise text a screen reader skips.
+     *
+     * **One number in the log is a tab stop, and the rest are reached with the
+     * arrow keys**, so a log of a thousand lines is one stop on the way through
+     * the page. The log says which, with `logStop`.
+     */
     private renderNumber;
+    /** @internal Called by the log: moves focus to the number, where it takes focus. */
+    focusNumber(): void;
     /** The time, on the clock or into the run, where the log asked for one and the line has one. */
     private renderTime;
     /**

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

@@ -2,15 +2,9 @@ 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 { timeOf } from '../buffer.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);
@@ -29,7 +23,10 @@ let HelixHeadlessLogLine = class HelixHeadlessLogLine extends HelixElement {
         this.logNumber = 0;
         this.logNumbers = false;
         this.logQuery = '';
+        this.logSelectable = false;
+        this.logSelected = false;
         this.logStart = undefined;
+        this.logStop = false;
         this.logTimes = '';
         this.runs = undefined;
         this.isLogLine = true;
@@ -44,15 +41,31 @@ let HelixHeadlessLogLine = class HelixHeadlessLogLine extends HelixElement {
             return nothing;
         }
         const number = String(this.logNumber);
+        const name = formatWords(this, 'lineLabel', { number: this.logNumber });
+        const stop = this.logStop ? 0 : -1;
         if (this.logHref !== '') {
             return html `<a
         part="number"
         href=${this.logHref.replaceAll('{n}', number)}
-        aria-label=${formatWords(this, 'lineLabel', { number: this.logNumber })}
+        aria-label=${name}
+        aria-current=${this.logSelected ? 'true' : nothing}
+        tabindex=${stop}
       >${number}</a>`;
+        }
+        if (this.logSelectable) {
+            return html `<button
+        part="number"
+        type="button"
+        aria-label=${name}
+        aria-pressed=${this.logSelected ? 'true' : 'false'}
+        tabindex=${stop}
+      >${number}</button>`;
         }
         return html `<span part="number" aria-hidden="true">${number}</span>`;
     }
+    focusNumber() {
+        this.renderRoot.querySelector('a[part="number"], button[part="number"]')?.focus();
+    }
     renderTime() {
         const time = timeOf(this.at);
         if (this.logTimes === '' || time === undefined) {
@@ -98,7 +111,7 @@ let HelixHeadlessLogLine = class HelixHeadlessLogLine extends HelixElement {
         }
         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' : ''}"
+      part="line${level ? { debug: ' line-debug', error: ' line-error', info: '', warn: ' line-warn' }[level] : ''}${this.logMarked ? ' line-marked' : ''}${this.logSelected ? ' line-selected' : ''}"
     >${this.renderNumber()}${this.renderTime()}<span part="text">${this.renderText()}</span></div>`;
     }
 };
@@ -130,9 +143,18 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessLogLine.prototype, "logQuery", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logSelectable", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logSelected", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessLogLine.prototype, "logStart", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessLogLine.prototype, "logStop", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessLogLine.prototype, "logTimes", void 0);

package/dist/log/parsers.d.ts

@@ -0,0 +1,36 @@
+import type { LogParser } from './buffer.js';
+/**
+ * Reads a GitHub Actions log: the workflow commands a step writes, such as
+ * `::group::Install` and `::error file=app.ts,line=3::Missing`, and the
+ * `##[group]` form and leading times of a log downloaded from a run.
+ *
+ * - `group` and `endgroup` open and close a step, which folds once it passes
+ *   and stays open where a line in it is an error.
+ * - `error`, `warning`, `notice` and `debug` set the line's level, with the
+ *   file, line, column and title in front of the message.
+ * - `command`, the line GitHub writes for each command a step runs, stays as
+ *   it is.
+ * - `add-mask`, `set-output` and the other commands GitHub never shows are
+ *   dropped. Text after `stop-commands` is read as commands still.
+ * - A leading time becomes the line's `at`, which times each step and which
+ *   `timestamps` shows.
+ */
+export declare const parseGitHubActions: LogParser;
+/**
+ * Reads a Vercel build log, as the CLI prints it with `vercel inspect --logs`
+ * and the dashboard shows it: a time and two spaces in front of each line.
+ *
+ * - `Running "…"` opens a step named for what it runs, and the line is its
+ *   first. `Build Completed in …` closes it and stands after it.
+ * - `Deploying outputs…` opens a step named for it, and `Deployment
+ *   completed` closes it.
+ * - A line starting `Error`, `Failed` or `npm ERR!`, or holding `error:`, is
+ *   at `error`, and one starting `Warning` or `warn` is at `warn`.
+ * - The leading time becomes the line's `at`, which times each step.
+ */
+export declare const parseVercel: LogParser;
+/** The parsers `format` names. */
+export declare const LOG_FORMATS: {
+    readonly 'github-actions': LogParser;
+    readonly vercel: LogParser;
+};

package/dist/log/parsers.js

@@ -0,0 +1,101 @@
+import { stripAnsi } from './ansi.js';
+const STAMP = /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z) {1,2}/;
+const stamped = (raw) => {
+    const found = STAMP.exec(raw);
+    return found ? { at: found[1], text: raw.slice(found[0].length) } : { at: undefined, text: raw };
+};
+const timed = (at) => (at === undefined ? {} : { at });
+const ANNOTATIONS = {
+    debug: 'debug',
+    error: 'error',
+    notice: 'info',
+    warning: 'warn',
+};
+const HIDDEN = new Set([
+    'add-mask',
+    'add-matcher',
+    'add-path',
+    'echo',
+    'remove-matcher',
+    'save-state',
+    'set-env',
+    'set-output',
+    'stop-commands',
+]);
+const unescaped = (text) => text
+    .replace(/%0D/gi, '')
+    .replace(/%0A/gi, ' ')
+    .replace(/%3A/gi, ':')
+    .replace(/%2C/gi, ',')
+    .replace(/%25/g, '%');
+const located = (properties, message) => {
+    const read = new Map();
+    for (const pair of properties.split(',')) {
+        const at = pair.indexOf('=');
+        if (at > 0) {
+            read.set(pair.slice(0, at).trim(), unescaped(pair.slice(at + 1).trim()));
+        }
+    }
+    const place = [read.get('file'), read.get('line'), read.get('col')].filter(Boolean).join(':');
+    const title = read.get('title');
+    return [place, title, unescaped(message)].filter(Boolean).join(': ');
+};
+export const parseGitHubActions = (raw) => {
+    const { at, text } = stamped(raw);
+    const plain = stripAnsi(text);
+    const downloaded = /^##\[([a-z-]+)\](.*)$/i.exec(plain);
+    const written = downloaded ? undefined : /^::([a-z-]+)(?: ([^:]*))?::(.*)$/i.exec(plain);
+    const kind = (downloaded?.[1] ?? written?.[1])?.toLowerCase();
+    if (kind === undefined) {
+        return at === undefined ? undefined : { at, text };
+    }
+    const properties = written?.[2] ?? '';
+    const body = downloaded?.[2] ?? written?.[3] ?? '';
+    if (kind === 'group') {
+        return { ...timed(at), open: unescaped(body).trim() || 'Group' };
+    }
+    if (kind === 'endgroup') {
+        return { ...timed(at), close: true };
+    }
+    const level = ANNOTATIONS[kind];
+    if (level !== undefined) {
+        return { ...timed(at), level, text: located(properties, body) };
+    }
+    if (kind === 'command') {
+        return { ...timed(at), text: body };
+    }
+    if (HIDDEN.has(kind)) {
+        return null;
+    }
+    return at === undefined ? undefined : { at, text };
+};
+const vercelLevel = (plain) => {
+    if (/^(?:error\b|failed\b|fatal\b|npm err!)|\berror:/i.test(plain)) {
+        return 'error';
+    }
+    if (/^(?:warning\b|warn\b|npm warn\b)|\bwarning:/i.test(plain)) {
+        return 'warn';
+    }
+    return undefined;
+};
+export const parseVercel = (raw) => {
+    const { at, text } = stamped(raw);
+    const plain = stripAnsi(text).trim();
+    const level = vercelLevel(plain);
+    const fields = { ...timed(at), ...(level === undefined ? {} : { level }), text };
+    const running = /^Running "([^"]+)"( command)?/.exec(plain);
+    if (running) {
+        return { ...fields, open: running[2] ? `${running[1]} command` : (running[1] ?? plain) };
+    }
+    if (/^Deploying outputs/i.test(plain)) {
+        return { ...fields, open: 'Deploying outputs' };
+    }
+    if (/^Build Completed in /i.test(plain) || /^Deployment completed/i.test(plain)) {
+        return { ...fields, close: true };
+    }
+    return at === undefined && level === undefined ? undefined : fields;
+};
+export const LOG_FORMATS = {
+    'github-actions': parseGitHubActions,
+    vercel: parseVercel,
+};