@fusion.dev/helix 0.212.2 → 0.213.0

package/dist/element-events.generated.js

@@ -259,9 +259,9 @@ registerElementEvents({
         'helix-resize',
         'helix-split',
     ],
+    'helix-sandbox-console': ['change', 'helix-before-change'],
     'helix-sandbox-preview': ['helix-console', 'helix-resize'],
     'helix-sandbox-source': ['helix-before-edit', 'helix-caret', 'helix-edit'],
-    'helix-sandbox-terminal': ['change', 'helix-before-change'],
     'helix-scatter-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-scroll-area': ['scroll', 'scrollend'],
     'helix-select': [

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part~="line"] {column-gap: var(--helix-space-md);display: flex;inline-size: var(--_log-line-size, max-content);min-inline-size: 100%;padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part~="line-grouped"]:not(:has(> [part="number"])) {padding-inline-start: calc(var(--log-padding-inline, var(--helix-space-md)) + max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md))}[part~="line"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)}:where(button[part="number"]) {all: unset;box-sizing: border-box}[part="number"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;min-inline-size: max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch));text-align: end;text-decoration: none;user-select: none}a[part="number"]:hover, button[part="number"]:hover {color: var(--helix-color-foreground);cursor: pointer}a[part="number"]:hover {text-decoration: underline}a[part="number"]:focus-visible, button[part="number"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="time"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;user-select: none}[part="text"] {flex: 1 1 auto;min-inline-size: 0;overflow-wrap: anywhere;white-space: var(--_log-white-space, pre)}[part~="line-debug"] {color: var(--helix-color-foreground-muted)}[part~="line-warn"] {background-color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 10%, transparent);color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 78%, var(--helix-color-foreground))}[part~="line-error"] {background-color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 10%, transparent);color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 78%, var(--helix-color-foreground))}[part~="line-marked"] {background-color: var(--log-mark-background-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent))}[part~="line-selected"] {background-color: var(--log-selected-background-color, color-mix(in oklab, var(--helix-color-info) 14%, transparent))}[part~="line-selected"] > [part="number"] {color: var(--helix-color-foreground)}[part~="run"] {background-color: var(--log-run-background-color, transparent);color: var(--log-run-color, inherit)}[part~="run-bold"] {font-weight: var(--helix-weight-semibold)}[part~="run-dim"] {opacity: 0.7}[part~="run-italic"] {font-style: italic}[part~="run-underline"] {text-decoration-line: underline}[part~="run-strike"] {text-decoration-line: line-through}[part~="run-underline"][part~="run-strike"] {text-decoration-line: underline line-through}[part="match"] {background-color: var(--log-match-background-color, var(--helix-color-warning-surface));border-radius: var(--helix-radii-sm);color: inherit}@media print {[part~="line"] {print-color-adjust: exact}}`);
+export const styles = createSheet(`:host {display: block}[part~="line"] {column-gap: var(--helix-space-md);display: flex;inline-size: var(--_log-line-size, max-content);min-inline-size: 100%;padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part~="line-grouped"]:not(:has(> [part="number"])) {padding-inline-start: calc(var(--log-padding-inline, var(--helix-space-md)) + max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md))}[part="level"], [part="count-label"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap}[part="count"] {align-self: center;background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent);border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-muted);flex: none;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;line-height: 1.4;padding-inline: var(--helix-space-xs)}[part~="line"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)}:where(button[part="number"]) {all: unset;box-sizing: border-box}[part="number"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;min-inline-size: max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch));text-align: end;text-decoration: none;user-select: none}a[part="number"]:hover, button[part="number"]:hover {color: var(--helix-color-foreground);cursor: pointer}a[part="number"]:hover {text-decoration: underline}a[part="number"]:focus-visible, button[part="number"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="time"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;user-select: none}[part="text"] {flex: 1 1 auto;min-inline-size: 0;overflow-wrap: anywhere;white-space: var(--_log-white-space, pre)}[part~="line-debug"] {color: var(--helix-color-foreground-muted)}[part~="line-warn"] {background-color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 10%, transparent);color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 78%, var(--helix-color-foreground))}[part~="line-error"] {background-color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 10%, transparent);color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 78%, var(--helix-color-foreground))}[part~="line-marked"] {background-color: var(--log-mark-background-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent))}[part~="line-selected"] {background-color: var(--log-selected-background-color, color-mix(in oklab, var(--helix-color-info) 14%, transparent))}[part~="line-selected"] > [part="number"] {color: var(--helix-color-foreground)}[part~="run"] {background-color: var(--log-run-background-color, transparent);color: var(--log-run-color, inherit)}[part~="run-bold"] {font-weight: var(--helix-weight-semibold)}[part~="run-dim"] {opacity: 0.7}[part~="run-italic"] {font-style: italic}[part~="run-underline"] {text-decoration-line: underline}[part~="run-strike"] {text-decoration-line: line-through}[part~="run-underline"][part~="run-strike"] {text-decoration-line: underline line-through}[part="match"] {background-color: var(--log-match-background-color, var(--helix-color-warning-surface));border-radius: var(--helix-radii-sm);color: inherit}@media print {[part~="line"] {print-color-adjust: exact}}`);

package/dist/sandbox/compile.d.ts

@@ -57,7 +57,7 @@ export declare const compilers: Map<string, Transform>;
  * compiler said, such as `Error transforming app.tsx: Unexpected token (2:1)`.
  * The frame reports it as it reports any error an example does not catch, so
  * it shows over the example in the preview's `error` part and in the
- * terminal, and only where the example imports the file.
+ * console, and only where the example imports the file.
  */
 export declare const compile: (cdn: string, path: string, source: string) => Promise<string>;
 export {};

package/dist/sandbox/console/sandbox-console.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {block-size: var(--sandbox-console-size, 100%);display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0}:host([controls]) {grid-template-rows: auto minmax(0, 1fr)}[part="controls"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);justify-content: space-between;padding: var(--helix-space-2xs) var(--helix-space-sm)}[part="filter"] {background-color: transparent;border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);font: inherit;font-size: max(var(--helix-text-field-min), var(--helix-text-xs));padding: var(--helix-space-2xs) var(--helix-space-xs)}[part="filter"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="output"] {--log-padding-inline: var(--helix-space-sm);min-block-size: 0}@media print {[part="controls"] {display: none}}`);

package/dist/sandbox/console/sandbox-console.d.ts

@@ -0,0 +1,187 @@
+import { type ConsoleDetail, HelixElement } from '@fusion.dev/helix-core';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import '../../button/index.js';
+import '../../log/index.js';
+/** A console level, from the quietest to the loudest. */
+type ConsoleLevel = ConsoleDetail['level'];
+/**
+ * @summary A panel that shows what the previewed example wrote to the console.
+ *
+ * @description
+ * The sandbox receives `helix-console` events from the preview and passes them
+ * to the console. The preview is a separate document, so messages cross
+ * `postMessage` and arrive as text.
+ *
+ * **Drawn by a Log**, which keeps the newest line in view while a reader
+ * stays at the end, holds the last 200 lines, and folds a line written again
+ * straight after itself into one line with a count, so an example with a
+ * render loop does not fill the panel with the same warning. Each line keeps
+ * its console level, and a warning or an error is drawn apart.
+ *
+ * **What a screen reader hears.** Each new line is read as it arrives, its
+ * level first except a plain `log`, so an error does not sound like any other
+ * line. A repeat of the line before it is not read again. A reader moving
+ * through the lines hears a debug, warning or error line's level too.
+ *
+ * **`controls` adds a level filter and a clear button** above the log. Both
+ * are also yours to drive without them: `clear()` empties the console, and
+ * `level` hides the quieter lines.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Console, Output
+ * @documentation https://fusion.dev/helix/components/sandbox
+ *
+ * @event {Event} change - Fired after the reader chose another level in the filter. `level` holds it.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the level filter changes, with the level chosen, `log` for every level. Cancelable: cancel it to keep the current level.
+ *
+ * @csspart clear - The button that empties the console, under `controls`.
+ * @csspart clear-button - The clear button's inner button.
+ * @csspart clear-live - The clear button's live region, which speaks while the button is pending.
+ * @csspart clear-spinner - The ring the clear button turns while it is pending.
+ * @csspart clear-text - The clear button's words.
+ * @csspart controls - The row holding the level filter and the clear button, under `controls`.
+ * @csspart filter - The level filter, a native select, under `controls`.
+ * @csspart live - Where screen readers hear each new line. Visually hidden.
+ * @csspart output - The Log the lines are drawn in.
+ * @csspart output-after - The log's `after` part.
+ * @csspart output-before - The log's `before` part.
+ * @csspart output-dropped - The log's `dropped` part.
+ * @csspart output-empty - The log's `empty` part.
+ * @csspart output-group-content - The log's `group-content` part.
+ * @csspart output-group-duration - The log's `group-duration` part.
+ * @csspart output-group-heading - The log's `group-heading` part.
+ * @csspart output-group-mark - The log's `group-mark` part.
+ * @csspart output-group-status - The log's `group-status` part.
+ * @csspart output-group-summary - The log's `group-summary` part.
+ * @csspart output-group-summary-done - The log's `group-summary-done` part.
+ * @csspart output-group-summary-failed - The log's `group-summary-failed` part.
+ * @csspart output-group-summary-pending - The log's `group-summary-pending` part.
+ * @csspart output-group-summary-running - The log's `group-summary-running` part.
+ * @csspart output-group-summary-skipped - The log's `group-summary-skipped` part.
+ * @csspart output-line - The log's `line` part.
+ * @csspart output-line-count - The log's `line-count` part.
+ * @csspart output-line-count-label - The log's `line-count-label` part.
+ * @csspart output-line-debug - The log's `line-debug` part.
+ * @csspart output-line-error - The log's `line-error` part.
+ * @csspart output-line-grouped - The log's `line-grouped` part.
+ * @csspart output-line-level - The log's `line-level` part.
+ * @csspart output-line-marked - The log's `line-marked` part.
+ * @csspart output-line-match - The log's `line-match` part.
+ * @csspart output-line-number - The log's `line-number` part.
+ * @csspart output-line-run - The log's `line-run` part.
+ * @csspart output-line-run-bold - The log's `line-run-bold` part.
+ * @csspart output-line-run-dim - The log's `line-run-dim` part.
+ * @csspart output-line-run-italic - The log's `line-run-italic` part.
+ * @csspart output-line-run-strike - The log's `line-run-strike` part.
+ * @csspart output-line-run-underline - The log's `line-run-underline` part.
+ * @csspart output-line-selected - The log's `line-selected` part.
+ * @csspart output-line-text - The log's `line-text` part.
+ * @csspart output-line-time - The log's `line-time` part.
+ * @csspart output-line-warn - The log's `line-warn` part.
+ * @csspart output-live - The log's `live` part.
+ * @csspart output-loading - The log's `loading` part.
+ * @csspart output-log - The log's `log` part.
+ * @csspart output-resume - The log's `resume` part.
+ * @csspart output-resume-button - The log's `resume-button` part.
+ * @csspart output-resume-mark - The log's `resume-mark` part.
+ * @csspart output-row - The log's `row` part.
+ * @csspart output-toolbar - The log's `toolbar` part.
+ *
+ * @cssproperty --sandbox-console-size - Height of the console.
+ */
+export declare class HelixSandboxConsole extends HelixElement {
+    static tier: string;
+    /**
+     * The key this part's words are registered under, its tag:
+     * `registerWords('de', { 'helix-sandbox-console': { clearLabel: 'Leeren' } })`.
+     */
+    static words: string;
+    /**
+     * The clear button's text, under `controls`.
+     */
+    clearLabel: string;
+    /**
+     * Shows a level filter and a clear button above the log.
+     *
+     * Off by default, because a sandbox that puts the console in a panel often
+     * has a toolbar of its own for them.
+     */
+    controls: boolean;
+    /**
+     * Text shown before anything has been written, and while the level filter
+     * hides every line.
+     */
+    emptyLabel: string;
+    /**
+     * The log's name, read by screen readers.
+     */
+    label: string;
+    /**
+     * The quietest level shown: `info` hides plain logs, `warn` shows warnings
+     * and errors, and `error` shows errors only. Absent shows every line.
+     *
+     * Lines it hides are kept, so lowering it shows them again. The filter under
+     * `controls` sets it.
+     */
+    level?: ConsoleLevel | undefined;
+    /**
+     * The level filter's name, read by screen readers, under `controls`.
+     */
+    levelLabel: string;
+    /**
+     * What each choice of the level filter reads, for a page in another
+     * language, keyed by level, such as `{ warn: '…' }`. A level left out keeps
+     * its English words. As an attribute it is that object as JSON, and JSON
+     * that does not parse is no words.
+     */
+    levelWords: Partial<Record<ConsoleLevel, string>>;
+    /**
+     * What a screen reader hears before a new line at each level, keyed by
+     * level, such as `{ warn: 'Warnung:' }`. A plain `log` hears nothing before
+     * its text, and nor does a line whose text already starts with its words,
+     * such as `Error: Boom` from `console.error(error)`. As an attribute it is
+     * that object as JSON.
+     */
+    spokenWords: Partial<Record<ConsoleLevel, string>>;
+    private heard;
+    /** The next key a heard line takes. */
+    private said;
+    /** The line written last, which a repeat of is not read again. */
+    private last;
+    /** Lines written before the log was drawn, handed to it once it is. */
+    private waiting;
+    private get output();
+    /**
+     * Adds a line, which the log folds into the one above where they are the
+     * same, and tells a screen reader, unless it repeats the line before it.
+     *
+     * `write` rather than `append`, which every element already has from
+     * `ParentNode` and which takes nodes. Shadowing it would break
+     * `console.append(node)` for anyone who reasonably expected the DOM method.
+     */
+    write(detail: ConsoleDetail): void;
+    /** Empties the console. */
+    clear(): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
+    /**
+     * Takes the level the reader chose in the filter, unless a listener
+     * refused it, and then says so with the select's own `change`, which stops
+     * at the shadow root otherwise. A refusal puts the select back.
+     *
+     * The select's `input` is stopped where it starts, as Pagination's is. It is
+     * composed and comes first, so it left this element before
+     * `helix-before-change` and still left it when the change was refused.
+     */
+    private readonly handleLevel;
+    /** The level filter and the clear button, under `controls`. */
+    private renderControls;
+    protected render(): TemplateResult;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-sandbox-console': HelixSandboxConsole;
+    }
+}
+export {};

package/dist/sandbox/console/sandbox-console.js

@@ -0,0 +1,192 @@
+import { __decorate } from "tslib";
+import { customElement, HelixBeforeChangeEvent, HelixElement, requestChange, stopPress, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { levelSaid } from '@fusion.dev/helix-headless/log';
+import { nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { html } from 'lit/static-html.js';
+import '../../button/index.js';
+import '../../log/index.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
+import { styles } from './sandbox-console.css.js';
+const LEVELS = ['log', 'info', 'warn', 'error'];
+const LIMIT = 200;
+const HEARD = 5;
+const stop = (event) => event.stopPropagation();
+let HelixSandboxConsole = class HelixSandboxConsole extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.clearLabel = 'Clear';
+        this.controls = false;
+        this.emptyLabel = 'Nothing written to the console yet.';
+        this.label = 'Console output';
+        this.levelLabel = 'Levels shown';
+        this.levelWords = {
+            error: 'Errors',
+            info: 'Info and above',
+            log: 'All levels',
+            warn: 'Warnings and errors',
+        };
+        this.spokenWords = {
+            error: 'Error:',
+            info: 'Info:',
+            warn: 'Warning:',
+        };
+        this.heard = [];
+        this.said = 0;
+        this.last = undefined;
+        this.waiting = [];
+        this.handleLevel = (event) => {
+            const field = event.target;
+            const taken = requestChange({
+                apply: (next) => {
+                    this.level = next === 'log' ? undefined : next;
+                },
+                event: (next) => new HelixBeforeChangeEvent({ value: next }),
+                host: this,
+                next: field.value,
+            });
+            if (taken) {
+                this.relayNativeEvent(event);
+            }
+            else {
+                field.value = this.level ?? 'log';
+            }
+        };
+    }
+    static { this.tier = 'helix-'; }
+    static { this.words = 'helix-sandbox-console'; }
+    get output() {
+        return this.renderRoot?.querySelector('[part="output"]') ?? null;
+    }
+    write(detail) {
+        const repeat = this.last?.level === detail.level && this.last.text === detail.text;
+        this.last = detail;
+        const output = this.output;
+        if (output) {
+            output.writeLine({ level: detail.level, text: detail.text });
+        }
+        else {
+            this.waiting.push(detail);
+        }
+        if (!repeat) {
+            const before = levelSaid(this.spokenWords[detail.level], detail.text);
+            this.said += 1;
+            this.heard = [
+                ...this.heard,
+                { key: this.said, words: before ? `${before} ${detail.text}` : detail.text },
+            ].slice(-HEARD);
+        }
+    }
+    clear() {
+        this.output?.clear();
+        this.waiting = [];
+        this.last = undefined;
+        this.heard = [];
+    }
+    updated(changed) {
+        super.updated(changed);
+        const output = this.output;
+        if (output && this.waiting.length > 0) {
+            for (const detail of this.waiting.splice(0)) {
+                output.writeLine({ level: detail.level, text: detail.text });
+            }
+        }
+    }
+    renderControls() {
+        if (!this.controls) {
+            return nothing;
+        }
+        const clear = this.clearLabel;
+        const button = this.tag('button');
+        return html `<div part="controls">
+      <select part="filter" aria-label=${this.levelLabel} @change=${this.handleLevel} @input=${stop}>
+        ${LEVELS.map((one) => html `<option value=${one} ?selected=${(this.level ?? 'log') === one}>
+              ${this.levelWords[one]}
+            </option>`)}
+      </select>
+      <${button}
+        part="clear"
+        exportparts="button: clear-button, live: clear-live, spinner: clear-spinner, text: clear-text"
+        @click=${() => this.clear()}
+        @helix-press=${stopPress}
+      >${clear}</${button}>
+    </div>`;
+    }
+    render() {
+        const log = this.tag('log');
+        return html `${this.renderControls()}<${log}
+        part="output"
+        exportparts="after: output-after, before: output-before, dropped: output-dropped, empty: output-empty,
+        group-content: output-group-content, group-duration: output-group-duration,
+        group-heading: output-group-heading, group-mark: output-group-mark,
+        group-status: output-group-status, group-summary: output-group-summary,
+        group-summary-done: output-group-summary-done,
+        group-summary-failed: output-group-summary-failed,
+        group-summary-pending: output-group-summary-pending,
+        group-summary-running: output-group-summary-running,
+        group-summary-skipped: output-group-summary-skipped, line: output-line,
+        line-count: output-line-count, line-count-label: output-line-count-label,
+        line-debug: output-line-debug, line-error: output-line-error,
+        line-grouped: output-line-grouped, line-level: output-line-level,
+        line-marked: output-line-marked, line-match: output-line-match,
+        line-number: output-line-number, line-run: output-line-run,
+        line-run-bold: output-line-run-bold, line-run-dim: output-line-run-dim,
+        line-run-italic: output-line-run-italic, line-run-strike: output-line-run-strike,
+        line-run-underline: output-line-run-underline, line-selected: output-line-selected,
+        line-text: output-line-text, line-time: output-line-time, line-warn: output-line-warn,
+        live: output-live, loading: output-loading, log: output-log, resume: output-resume,
+        resume-button: output-resume-button, resume-mark: output-resume-mark, row: output-row,
+        toolbar: output-toolbar"
+        collapse
+        empty-text=${this.emptyLabel}
+        label=${this.label}
+        level=${this.level ?? nothing}
+        limit=${LIMIT}
+        quiet
+        separation="plain"
+        wrap
+      ></${log}>
+      <div part="live" role="log">
+        ${repeat(this.heard, (one) => one.key, (one) => html `<p>${one.words}</p>`)}
+      </div>`;
+    }
+    static { this.styles = [liveStyles, styles]; }
+};
+__decorate([
+    words,
+    property({ attribute: 'clear-label' })
+], HelixSandboxConsole.prototype, "clearLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixSandboxConsole.prototype, "controls", void 0);
+__decorate([
+    words,
+    property({ attribute: 'empty-label' })
+], HelixSandboxConsole.prototype, "emptyLabel", void 0);
+__decorate([
+    words,
+    property()
+], HelixSandboxConsole.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixSandboxConsole.prototype, "level", void 0);
+__decorate([
+    words,
+    property({ attribute: 'level-label' })
+], HelixSandboxConsole.prototype, "levelLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'level-words', converter: wordsConverter })
+], HelixSandboxConsole.prototype, "levelWords", void 0);
+__decorate([
+    words,
+    property({ attribute: 'spoken-words', converter: wordsConverter })
+], HelixSandboxConsole.prototype, "spokenWords", void 0);
+__decorate([
+    state()
+], HelixSandboxConsole.prototype, "heard", void 0);
+HelixSandboxConsole = __decorate([
+    customElement('helix-sandbox-console')
+], HelixSandboxConsole);
+export { HelixSandboxConsole };

package/dist/sandbox/index.d.ts

@@ -12,6 +12,7 @@
  * hardcodes `sandbox="allow-scripts allow-forms"` on its frame and never
  * `allow-same-origin`, which is the pairing that would undo it.
  */
+export * from './console/sandbox-console.js';
 export { isRender, LAYOUT_RULES, loggedText, type ServePreviewOptions, servePreview, withoutStylesheets, } from './frame.js';
 export * from './preview/sandbox-preview.js';
 export type { PreviewFetch, PreviewFetched } from './relay.js';
@@ -19,6 +20,5 @@ export * from './root/sandbox-root.js';
 export { type ManifestLike, manifestWords } from './source/editing.js';
 export * from './source/sandbox-source.js';
 export * from './status-bar/sandbox-status-bar.js';
-export * from './terminal/sandbox-terminal.js';
 export type { SandboxToken, SandboxTokenizer } from './tokens.js';
 export * from './toolbar/sandbox-toolbar.js';

package/dist/sandbox/index.js

@@ -1,8 +1,8 @@
+export * from './console/sandbox-console.js';
 export { isRender, LAYOUT_RULES, loggedText, servePreview, withoutStylesheets, } from './frame.js';
 export * from './preview/sandbox-preview.js';
 export * from './root/sandbox-root.js';
 export { manifestWords } from './source/editing.js';
 export * from './source/sandbox-source.js';
 export * from './status-bar/sandbox-status-bar.js';
-export * from './terminal/sandbox-terminal.js';
 export * from './toolbar/sandbox-toolbar.js';

package/dist/sandbox/preview/sandbox-preview.d.ts

@@ -106,7 +106,7 @@ export type PreviewMessage = PreviewConsole | PreviewFetch | PreviewPress | Prev
  * sibling shown by `helix-sandbox-preview:state(failed) + .message`.
  *
  * **A failed preview shows the error over the example**, in the `error` part,
- * until the next source is sent. The terminal says it too, so the part is not
+ * until the next source is sent. The console says it too, so the part is not
  * announced, and it is the frame's description while it shows, so a screen
  * reader reads it with the frame. Hide it with `::part(error) { display: none }`
  * where the page draws its own.
@@ -348,7 +348,7 @@ export declare class HelixSandboxPreview extends HelixElement {
      * sends arrives as `"null"`, measured. A real origin therefore means the
      * frame is no longer showing the document it was given: `allow-scripts` lets
      * an example navigate its own frame, and whatever it navigated to inherits
-     * `contentWindow` and could otherwise write lines into the terminal as though
+     * `contentWindow` and could otherwise write lines into the console as though
      * the example had logged them.
      */
     private readonly handleMessage;

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

@@ -75,7 +75,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @aliases Playground, REPL, Editor
  * @documentation https://fusion.dev/helix/components/sandbox
  *
- * @slot panel - A panel under both panes, usually a terminal.
+ * @slot panel - A panel under both panes, usually a console.
  * @slot preview - The live preview. It comes second unless `lead` is `preview`.
  * @slot source - The editable source pane. It comes first unless `lead` is `preview`.
  * @slot status - A status bar, spanning both panes at the bottom.
@@ -383,7 +383,7 @@ export declare class HelixSandbox extends HelixElement {
      * The parts of this sandbox it drives, wherever they sit inside it.
      *
      * Descendants, not children. A preview and a status bar happen to be slotted
-     * directly, but a terminal lives inside the tab set that holds the panel, so
+     * directly, but a console lives inside the tab set that holds the panel, so
      * a search of `children` found none and the console went nowhere. Where a
      * consumer nests a pane is their arrangement to make.
      *
@@ -392,7 +392,7 @@ export declare class HelixSandbox extends HelixElement {
     private parts;
     private get previews();
     /**
-     * Hands a console line from the preview to any terminal slotted here.
+     * Hands a console line from the preview to any console slotted here.
      *
      * Every `helix-console` is forwarded, with no check on where it came from.
      * Unlike a change, which any form control in a sandbox emits, this event is
@@ -401,7 +401,7 @@ export declare class HelixSandbox extends HelixElement {
      * with.
      */
     private readonly handleConsole;
-    private get terminals();
+    private get consoles();
     private get statusBars();
     /**
      * The orientation in force.

package/dist/sandbox/root/sandbox-root.js

@@ -142,8 +142,8 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         };
         this.handleConsole = (event) => {
             const detail = event.detail;
-            for (const terminal of this.terminals) {
-                terminal.write(detail);
+            for (const panel of this.consoles) {
+                panel.write(detail);
             }
         };
         this.handlePanesChange = (event) => {
@@ -322,8 +322,8 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
     get previews() {
         return this.parts('helix-sandbox-preview');
     }
-    get terminals() {
-        return this.parts('helix-sandbox-terminal');
+    get consoles() {
+        return this.parts('helix-sandbox-console');
     }
     get statusBars() {
         return this.parts('helix-sandbox-status-bar');

package/dist/terminal/root/terminal-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--terminal-active-match-background-color: color-mix(in oklab, var(--helix-color-warning) 45%, var(--terminal-background-color));--terminal-active-match-border-color: var(--helix-color-warning);--terminal-ansi-black: light-dark(var(--helix-color-foreground), var(--helix-color-border));--terminal-ansi-blue: var(--helix-color-info);--terminal-ansi-bright-black: var(--helix-color-foreground-muted);--terminal-ansi-bright-blue: color-mix(in oklab, var(--terminal-ansi-blue) 75%, var(--helix-color-foreground));--terminal-ansi-bright-cyan: color-mix(in oklab, var(--terminal-ansi-cyan) 75%, var(--helix-color-foreground));--terminal-ansi-bright-green: color-mix(in oklab, var(--terminal-ansi-green) 75%, var(--helix-color-foreground));--terminal-ansi-bright-magenta: color-mix(in oklab, var(--terminal-ansi-magenta) 75%, var(--helix-color-foreground));--terminal-ansi-bright-red: color-mix(in oklab, var(--terminal-ansi-red) 75%, var(--helix-color-foreground));--terminal-ansi-bright-white: light-dark(var(--helix-color-border), var(--helix-color-foreground));--terminal-ansi-bright-yellow: color-mix(in oklab, var(--terminal-ansi-yellow) 75%, var(--helix-color-foreground));--terminal-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--terminal-ansi-green: var(--helix-color-success);--terminal-ansi-magenta: var(--helix-color-syntax-callable);--terminal-ansi-red: var(--helix-color-danger);--terminal-ansi-white: light-dark(var(--helix-color-foreground-subtle), color-mix(in oklab, var(--helix-color-foreground-muted), var(--helix-color-foreground)));--terminal-ansi-yellow: var(--helix-color-warning);--terminal-background-color: var(--helix-color-background);--terminal-color: var(--helix-color-foreground);--terminal-cursor-color: var(--helix-color-primary);--terminal-match-background-color: color-mix(in oklab, var(--helix-color-warning) 22%, var(--terminal-background-color));--terminal-scrollbar-thumb-color: var(--helix-scrollbar-thumb-color);--terminal-selection-background-color: color-mix(in oklab, var(--helix-color-primary) 30%, transparent);display: block}:host([fill]) {inset: 0;position: absolute}[part="region"] {background-color: var(--terminal-background-color);block-size: var(--terminal-block-size, 24rem);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--terminal-radius, var(--helix-radii-lg));box-sizing: border-box;display: grid;grid-template-rows: [header] auto [find] auto [viewport] minmax(0, 1fr) [status] auto;overflow: hidden;position: relative}:host([fill]) [part="region"], :host(:state(fullscreen)) [part="region"] {block-size: 100%}:host([separation="plain"]) [part="region"], :host(:state(fullscreen)) [part="region"] {border: none;border-radius: 0}:host(:fullscreen) {display: block}[part="header"], [part="find-bar"], [part="status"] {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);align-items: center;background-color: var(--terminal-header-background-color, var(--helix-color-surface-raised));box-sizing: border-box;display: flex;gap: var(--helix-space-2xs);min-inline-size: 0;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-sm) var(--helix-space-2xs)}[part="header"] {grid-row: header;border-block-end: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));min-block-size: calc(var(--helix-size-control) + var(--helix-space-2xs) * 2)}[part="header"][hidden], [part="find-bar"][hidden], [part="status"][hidden] {display: none}[part="label"] {color: var(--helix-color-foreground);display: block;flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="actions"], [part="find-actions"] {display: contents}[part="controls"], [part="find-controls"] {flex: 0 0 auto}[part="exit-actions"] {align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs)}:host(:state(find-open)) [part="find"], :host(:state(fullscreen)) [part="fullscreen"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}[part="find-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="find-bar"], [part="find-controls"] {--helix-size-control: calc(var(--helix-size-control-sm) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8)}[part="find-bar"] {grid-row: find;border-block-end: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border))}[part="find-field"] {appearance: none;background-color: var(--terminal-background-color);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));inline-size: 100%;max-inline-size: 20rem;min-inline-size: 0;padding-inline: var(--helix-space-xs)}[part="find-field"]::-webkit-search-cancel-button, [part="find-field"]::-webkit-search-decoration {appearance: none}[part="find-field"]::placeholder {color: var(--helix-color-foreground-muted)}[part="find-count"] {color: var(--helix-color-foreground-muted);flex: 1 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;min-inline-size: 7em;padding-inline: var(--helix-space-xs);white-space: nowrap}[part="viewport"] {grid-row: viewport;color: var(--terminal-color);font-family: var(--terminal-font-family, var(--helix-font-mono));font-size: var(--terminal-font-size, var(--helix-text-sm));min-block-size: 0;overflow: auto;padding: var(--terminal-padding, var(--helix-space-xs) var(--helix-space-sm));position: relative}[part="viewport"] ::slotted(*) {block-size: 100%;inline-size: 100%}[part="viewport"]::after {background-color: var(--helix-color-foreground);content: "";inset: 0;opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:state(bell)) [part="viewport"]::after {opacity: 0.08;transition: none}[part="status"] {grid-row: status;border-block-start: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs) var(--helix-space-sm);padding-inline: var(--helix-space-sm)}[part="status"] > span {flex: 1 1 16rem;min-inline-size: 0}[part="restart"] {--button-border-color: var(--terminal-border-color, var(--helix-color-border))}@media (prefers-reduced-motion: reduce) {[part="viewport"]::after {transition: none}}@media print {[part="controls"], [part="find-bar"], [part="restart"], [part="exit-actions"] {display: none}}`);
+export const styles = createSheet(`:host {--terminal-active-match-background-color: color-mix(in oklab, var(--helix-color-warning) 45%, var(--terminal-background-color));--terminal-active-match-border-color: var(--helix-color-warning);--terminal-ansi-black: light-dark(var(--helix-color-foreground), var(--helix-color-border));--terminal-ansi-blue: var(--helix-color-info);--terminal-ansi-bright-black: var(--helix-color-foreground-muted);--terminal-ansi-bright-blue: color-mix(in oklab, var(--terminal-ansi-blue) 75%, var(--helix-color-foreground));--terminal-ansi-bright-cyan: color-mix(in oklab, var(--terminal-ansi-cyan) 75%, var(--helix-color-foreground));--terminal-ansi-bright-green: color-mix(in oklab, var(--terminal-ansi-green) 75%, var(--helix-color-foreground));--terminal-ansi-bright-magenta: color-mix(in oklab, var(--terminal-ansi-magenta) 75%, var(--helix-color-foreground));--terminal-ansi-bright-red: color-mix(in oklab, var(--terminal-ansi-red) 75%, var(--helix-color-foreground));--terminal-ansi-bright-white: light-dark(var(--helix-color-border), var(--helix-color-foreground));--terminal-ansi-bright-yellow: color-mix(in oklab, var(--terminal-ansi-yellow) 75%, var(--helix-color-foreground));--terminal-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--terminal-ansi-green: var(--helix-color-success);--terminal-ansi-magenta: var(--helix-color-syntax-callable);--terminal-ansi-red: var(--helix-color-danger);--terminal-ansi-white: light-dark(var(--helix-color-foreground-subtle), color-mix(in oklab, var(--helix-color-foreground-muted), var(--helix-color-foreground)));--terminal-ansi-yellow: var(--helix-color-warning);--terminal-background-color: var(--helix-color-background);--terminal-color: var(--helix-color-foreground);--terminal-cursor-color: var(--helix-color-primary);--terminal-match-background-color: color-mix(in oklab, var(--helix-color-warning) 22%, var(--terminal-background-color));--terminal-scrollbar-thumb-color: var(--helix-scrollbar-thumb-color);--terminal-selection-background-color: color-mix(in oklab, var(--helix-color-primary) 30%, transparent);display: block}:host([fill]) {inset: 0;position: absolute}[part="region"] {background-color: var(--terminal-background-color);block-size: var(--terminal-block-size, 24rem);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--terminal-radius, var(--helix-radii-lg));box-sizing: border-box;display: grid;grid-template-rows: [header] auto [find] auto [viewport] minmax(0, 1fr) [status] auto;overflow: hidden;position: relative}:host([fill]) [part="region"], :host(:state(fullscreen)) [part="region"] {block-size: 100%}:host([separation="plain"]) [part="region"], :host(:state(fullscreen)) [part="region"] {border: none;border-radius: 0}:host(:fullscreen) {display: block}[part="header"], [part="find-bar"], [part="status"] {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);align-items: center;background-color: var(--terminal-header-background-color, var(--helix-color-surface-raised));box-sizing: border-box;display: flex;gap: var(--helix-space-2xs);min-inline-size: 0;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-sm) var(--helix-space-2xs)}[part="header"] {grid-row: header;border-block-end: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));min-block-size: calc(var(--helix-size-control) + var(--helix-space-2xs) * 2)}[part="header"][hidden], [part="find-bar"][hidden], [part="status"][hidden] {display: none}[part="label"] {color: var(--helix-color-foreground);display: block;flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="actions"], [part="find-actions"] {display: contents}[part="controls"], [part="find-controls"] {flex: 0 0 auto}[part="exit-actions"] {align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs)}:host(:state(find-open)) [part="find"], :host(:state(fullscreen)) [part="fullscreen"], [part="find-match-case"][aria-pressed="true"], [part="find-whole-word"][aria-pressed="true"], [part="find-regex"][aria-pressed="true"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}[part="find-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="find-bar"], [part="find-controls"] {--helix-size-control: calc(var(--helix-size-control-sm) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8)}[part="find-bar"] {grid-row: find;border-block-end: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border))}[part="find-field"] {appearance: none;background-color: var(--terminal-background-color);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));inline-size: 100%;max-inline-size: 20rem;min-inline-size: 0;padding-inline: var(--helix-space-xs)}[part="find-field"]::-webkit-search-cancel-button, [part="find-field"]::-webkit-search-decoration {appearance: none}[part="find-field"]::placeholder {color: var(--helix-color-foreground-muted)}[part="find-count"] {color: var(--helix-color-foreground-muted);flex: 1 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;min-inline-size: 7em;padding-inline: var(--helix-space-xs);white-space: nowrap}[part="viewport"] {grid-row: viewport;color: var(--terminal-color);font-family: var(--terminal-font-family, var(--helix-font-mono));font-size: var(--terminal-font-size, var(--helix-text-sm));min-block-size: 0;overflow: auto;padding: var(--terminal-padding, var(--helix-space-xs) var(--helix-space-sm));position: relative}[part="viewport"] ::slotted(*) {block-size: 100%;inline-size: 100%}[part="viewport"]::after {background-color: var(--helix-color-foreground);content: "";inset: 0;opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:state(bell)) [part="viewport"]::after {opacity: 0.08;transition: none}[part="status"] {grid-row: status;border-block-start: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs) var(--helix-space-sm);padding-inline: var(--helix-space-sm)}[part="status"] > span {flex: 1 1 16rem;min-inline-size: 0}[part="restart"] {--button-border-color: var(--terminal-border-color, var(--helix-color-border))}@media (prefers-reduced-motion: reduce) {[part="viewport"]::after {transition: none}}@media print {[part="controls"], [part="find-bar"], [part="restart"], [part="exit-actions"] {display: none}}`);