@fusion.dev/helix 0.212.2 → 0.214.0

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

@@ -1,135 +0,0 @@
-import { type ConsoleDetail, HelixElement } from '@fusion.dev/helix-core';
-import type { CSSResultGroup, TemplateResult } from 'lit';
-import { type ConsoleLevel } from '../levels.js';
-/**
- * @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 terminal. The preview is a separate document, so messages cross
- * `postMessage` and arrive as text.
- *
- * **Repeats collapse.** Consecutive identical lines show as one line with a
- * count, so an example with a render loop does not fill the panel with the same
- * warning. Only consecutive repeats collapse, so the order of messages is kept.
- *
- * The panel has `role="log"`, the role for an append-only stream. Screen
- * readers announce new output without reading the whole panel again. A line's
- * level is read before it, except a plain `log`, so an error does not sound
- * like any other line.
- *
- * **`controls` adds a clear button and a level filter** above the log. Both
- * are also yours to drive without them: `clear()` empties the log, 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 log, under `controls`.
- * @csspart controls - The row holding the clear button and the level filter, under `controls`.
- * @csspart count - How many times a repeated line was written.
- * @csspart empty - Shown while nothing has been written, or while the level filter hides every line.
- * @csspart entry - One line.
- * @csspart filter - The level filter, a native select, under `controls`.
- * @csspart level - The console level a line was written at.
- * @csspart log - The scrolling region.
- * @csspart message - The text of a line.
- *
- * @cssproperty --sandbox-terminal-size - Height of the scrolling region.
- */
-export declare class HelixSandboxTerminal extends HelixElement {
-    /**
-     * The key this part's words are registered under, its tag:
-     * `registerWords('de', { 'helix-sandbox-terminal': { clearLabel: 'Leeren' } })`.
-     */
-    static words: string;
-    /**
-     * The clear button's text, under `controls`.
-     */
-    clearLabel: string;
-    /**
-     * Shows a clear button and a level filter above the log.
-     *
-     * Off by default, because a sandbox that puts the terminal in a panel often
-     * has a toolbar of its own for them.
-     */
-    controls: boolean;
-    /**
-     * Text shown before anything has been written.
-     */
-    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 is told a repeated line's count is. `{count}` is how
-     * many times it was written, two or more, in the locale, and a language
-     * writes the forms it has: `{count, plural, few {# razy} other {# razy}}`.
-     */
-    timesLabel: string;
-    private entries;
-    /**
-     * Whether the reader is at the bottom, and so wants to follow new output.
-     *
-     * Read before the render that adds a line and applied after it. Scrolling to
-     * the bottom on every line would drag a reader off whatever they had scrolled
-     * up to look at, which for a log of errors is the one thing they are doing.
-     */
-    private following;
-    private get log();
-    /**
-     * Adds a line, collapsing it into the one above when they are identical.
-     *
-     * `write` rather than `append`, which every element already has from
-     * `ParentNode` and which takes nodes. Shadowing it would break
-     * `terminal.append(node)` for anyone who reasonably expected the DOM method.
-     */
-    write(detail: ConsoleDetail): void;
-    /** Empties the log. */
-    clear(): void;
-    protected updated(): 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 clear button and the level filter, under `controls`. */
-    private renderControls;
-    protected render(): TemplateResult;
-    static styles: CSSResultGroup;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'helix-sandbox-terminal': HelixSandboxTerminal;
-    }
-}

package/dist/sandbox/terminal/sandbox-terminal.js

@@ -1,142 +0,0 @@
-import { __decorate } from "tslib";
-import { customElement, formatWords, HelixBeforeChangeEvent, HelixElement, requestChange, words, wordsConverter, } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { LEVELS, shows } from '../levels.js';
-import { styles } from './sandbox-terminal.css.js';
-const LIMIT = 200;
-const stop = (event) => event.stopPropagation();
-let HelixSandboxTerminal = class HelixSandboxTerminal 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.timesLabel = '{count} times';
-        this.entries = [];
-        this.following = true;
-        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.words = 'helix-sandbox-terminal'; }
-    get log() {
-        return this.renderRoot.querySelector('[part="log"]');
-    }
-    write(detail) {
-        const log = this.log;
-        if (log) {
-            this.following = log.scrollHeight - log.scrollTop - log.clientHeight < 2;
-        }
-        const last = this.entries.at(-1);
-        if (last && last.level === detail.level && last.text === detail.text) {
-            this.entries = [...this.entries.slice(0, -1), { ...last, count: last.count + 1 }];
-            return;
-        }
-        this.entries = [...this.entries, { ...detail, count: 1 }].slice(-LIMIT);
-    }
-    clear() {
-        this.entries = [];
-        this.following = true;
-    }
-    updated() {
-        if (this.following) {
-            const log = this.log;
-            if (log) {
-                log.scrollTop = log.scrollHeight;
-            }
-        }
-    }
-    renderControls() {
-        if (!this.controls) {
-            return nothing;
-        }
-        const clear = this.clearLabel;
-        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" type="button" @click=${() => this.clear()}>${clear}</button>
-    </div>`;
-    }
-    render() {
-        const shown = this.entries.filter((entry) => shows(entry.level, this.level));
-        return html `${this.renderControls()}<div part="log" role="log" aria-label=${this.label} tabindex="0">
-      ${shown.length === 0
-            ? html `<p part="empty">${this.emptyLabel}</p>`
-            : shown.map((entry) => html `<div part="entry" data-level=${entry.level}>
-                <span part="level" aria-hidden=${entry.level === 'log' ? 'true' : nothing}
-                  >${entry.level}</span
-                >
-                <span part="message">${entry.text}</span>
-                ${entry.count > 1
-                ? html `<span part="count" aria-label=${formatWords(this, 'timesLabel', { count: entry.count })}
-                        >${entry.count}</span
-                      >`
-                : nothing}
-              </div>`)}
-    </div>`;
-    }
-    static { this.styles = styles; }
-};
-__decorate([
-    words,
-    property({ attribute: 'clear-label' })
-], HelixSandboxTerminal.prototype, "clearLabel", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixSandboxTerminal.prototype, "controls", void 0);
-__decorate([
-    words,
-    property({ attribute: 'empty-label' })
-], HelixSandboxTerminal.prototype, "emptyLabel", void 0);
-__decorate([
-    words,
-    property()
-], HelixSandboxTerminal.prototype, "label", void 0);
-__decorate([
-    property()
-], HelixSandboxTerminal.prototype, "level", void 0);
-__decorate([
-    words,
-    property({ attribute: 'level-label' })
-], HelixSandboxTerminal.prototype, "levelLabel", void 0);
-__decorate([
-    words,
-    property({ attribute: 'level-words', converter: wordsConverter })
-], HelixSandboxTerminal.prototype, "levelWords", void 0);
-__decorate([
-    words,
-    property({ attribute: 'times-label' })
-], HelixSandboxTerminal.prototype, "timesLabel", void 0);
-__decorate([
-    state()
-], HelixSandboxTerminal.prototype, "entries", void 0);
-HelixSandboxTerminal = __decorate([
-    customElement('helix-sandbox-terminal')
-], HelixSandboxTerminal);
-export { HelixSandboxTerminal };