@fusion.dev/helix 0.146.0 → 0.147.0

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

@@ -74,54 +74,42 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             }
         };
         this.handlePanesChange = (event) => {
-            if (event.target !== event.currentTarget) {
+            const value = this.claim(event);
+            if (value === undefined) {
                 return;
             }
-            const { value } = event.detail;
-            event.stopPropagation();
-            event.preventDefault();
             this.requestSplit(Number(value));
             this.answer(event.currentTarget, this.split);
         };
         this.handlePanelChange = (event) => {
-            if (event.target !== event.currentTarget) {
+            const value = this.claim(event);
+            if (value === undefined) {
                 return;
             }
-            const { value } = event.detail;
-            event.stopPropagation();
-            event.preventDefault();
             if (this.bodyHeight > 0) {
                 this.requestPanelSize(Math.max(this.panelFloor, ((100 - Number(value)) / 100) * this.bodyHeight));
             }
             this.answer(event.currentTarget, this.panelPosition);
         };
         this.handleCollapse = (event) => {
-            if (event.target !== event.currentTarget) {
-                return;
-            }
-            event.stopPropagation();
-            event.preventDefault();
+            this.claim(event);
         };
         this.readPanel = () => {
             this.hasPanel = this.querySelector(':scope > [slot="panel"]') !== null;
         };
     }
-    get panelShare() {
-        const size = Number.isFinite(this.panelSize) ? this.panelSize : DEFAULT_PANEL;
+    shareOf(size) {
         if (this.bodyHeight <= 0) {
             return 0;
         }
-        return Math.min(PANEL_MAX * 100, Math.max(0, (size / this.bodyHeight) * 100));
+        const panel = Number.isFinite(size) ? size : DEFAULT_PANEL;
+        return Math.min(PANEL_MAX * 100, Math.max(0, (panel / this.bodyHeight) * 100));
     }
     get panelPosition() {
-        return this.hasPanel ? 100 - this.panelShare : 100;
+        return this.hasPanel ? 100 - this.shareOf(this.panelSize) : 100;
     }
     get homePanelPosition() {
-        const panel = Number.isFinite(this.defaultPanelSize) ? this.defaultPanelSize : DEFAULT_PANEL;
-        if (!this.hasPanel || this.bodyHeight <= 0) {
-            return 100;
-        }
-        return 100 - Math.min(PANEL_MAX * 100, Math.max(0, (panel / this.bodyHeight) * 100));
+        return this.hasPanel ? 100 - this.shareOf(this.defaultPanelSize) : 100;
     }
     get panelSliver() {
         if (this.bodyHeight <= 0) {
@@ -176,7 +164,6 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         if (accepted && this.split !== was) {
             this.dispatchEvent(new HelixSplitEvent({ value: String(this.split) }));
         }
-        return accepted;
     }
     requestPanelSize(next) {
         const was = this.panelSize;
@@ -191,7 +178,14 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         if (accepted && this.panelSize !== was) {
             this.dispatchEvent(new HelixPanelResizeEvent({ value: String(this.panelSize) }));
         }
-        return accepted;
+    }
+    claim(event) {
+        if (event.target !== event.currentTarget) {
+            return undefined;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        return event.detail.value;
     }
     answer(divider, position) {
         const target = divider;
@@ -224,6 +218,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         if (!this.hasUpdated && this.childrenKnown) {
             this.readPanel();
         }
+        this.toggleState('panel-collapsed', this.hasPanel && this.panelSize <= this.panelCollapsedSize);
         if (!this.hasUpdated || typeof this.renderRoot?.querySelector !== 'function') {
             return;
         }
@@ -253,33 +248,17 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         const first = this.lead === 'preview' ? 'preview' : 'source';
         const second = first === 'preview' ? 'source' : 'preview';
         const split = Number.isFinite(this.split) ? this.split : DEFAULT_SPLIT;
+        const home = Number.isFinite(this.defaultSplit) ? this.defaultSplit : DEFAULT_SPLIT;
+        const label = this.separatorLabel || (first === 'preview' ? 'Resize preview pane' : 'Resize source pane');
         return html `<slot name="toolbar"></slot>
-      <helix-splitter
-        part="body"
-        ?data-panel=${this.hasPanel}
-        exportparts="separator, corner"
-        orientation="vertical"
-        collapsed-size=${this.panelSliver}
-        corner-label=${this.cornerLabel}
-        label=${this.panelLabel}
-        default-position=${this.homePanelPosition}
-        min=${100 - PANEL_MAX * 100}
-        .position=${this.panelPosition}
-        @helix-before-collapse=${this.handleCollapse}
-        @helix-before-resize=${this.handlePanelChange}
-      >
-        <helix-splitter
-          slot="start"
-          part="panes"
-          exportparts="separator"
-          default-position=${Number.isFinite(this.defaultSplit) ? this.defaultSplit : DEFAULT_SPLIT}
-          label=${this.separatorLabel || (first === 'preview' ? 'Resize preview pane' : 'Resize source pane')}
-          orientation=${vertical ? 'vertical' : 'horizontal'}
-          .position=${split}
-          @helix-before-collapse=${this.handleCollapse}
-          @helix-before-resize=${this.handlePanesChange}
-        >
-          ${''}
+      <helix-splitter part="body" ?data-panel=${this.hasPanel} exportparts="separator, corner"
+        orientation="vertical" collapsed-size=${this.panelSliver} corner-label=${this.cornerLabel}
+        label=${this.panelLabel} default-position=${this.homePanelPosition}
+        min=${100 - PANEL_MAX * 100} .position=${this.panelPosition}
+        @helix-before-collapse=${this.handleCollapse} @helix-before-resize=${this.handlePanelChange}>
+        <helix-splitter slot="start" part="panes" exportparts="separator" default-position=${home}
+          label=${label} orientation=${vertical ? 'vertical' : 'horizontal'} .position=${split}
+          @helix-before-collapse=${this.handleCollapse} @helix-before-resize=${this.handlePanesChange}>
           <div part="pane" data-pane=${first} slot="start"><slot name=${first} @slotchange=${this.seed}></slot></div>
           <div part="pane" data-pane=${second} slot="end"><slot name=${second} @slotchange=${this.seed}></slot></div>
         </helix-splitter>

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

@@ -1,96 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-block-size: 100%;
-}
-
-[part="source"] {
-background-color: var(--sandbox-source-background-color, var(--helix-color-background));
-block-size: 100%;
-border: none;
-color: var(--helix-color-foreground-muted);
-display: block;
-font-family: var(--helix-font-mono);
-font-size: var(--helix-text-xs);
-inline-size: 100%;
-line-height: var(--helix-leading-normal);
-min-block-size: var(--sandbox-source-min-block-size, 12rem);
-padding: var(--helix-space-sm);
-resize: none;
-tab-size: 2;
-}
-
-[part="source"]:focus-visible {
-background-color: var(--helix-color-surface);
-outline: none;
-}
-
-[part="field"] {
-background-color: var(--sandbox-source-background-color, var(--helix-color-background));
-block-size: 100%;
-display: grid;
-grid-template-rows: minmax(max-content, auto);
-overflow: auto;
-}
-
-[part="field"]:focus-within {
-background-color: var(--helix-color-surface);
-}
-
-[part="field"] > [part="highlight"],
-[part="field"] > [part="source"] {
-border: none;
-box-sizing: border-box;
-font-family: var(--helix-font-mono);
-font-size: var(--helix-text-xs);
-grid-area: 1 / 1;
-inline-size: 100%;
-letter-spacing: normal;
-line-height: var(--helix-leading-normal);
-margin: 0;
-min-block-size: var(--sandbox-source-min-block-size, 12rem);
-overflow-wrap: break-word;
-padding: var(--helix-space-sm);
-tab-size: 2;
-white-space: pre-wrap;
-}
-
-[part="field"] > [part="highlight"] {
-color: var(--helix-color-foreground-muted);
-}
-
-[part="field"] > [part="source"],
-[part="field"] > [part="source"]:focus-visible {
--webkit-text-fill-color: transparent;
-align-self: stretch;
-background-color: transparent;
-block-size: auto;
-caret-color: var(--helix-color-foreground);
-color: transparent;
-overflow: hidden;
-}
-
-[part="token"][data-kind="callable"] {
-color: var(--sandbox-source-callable-color, var(--helix-color-syntax-callable));
-}
-[part="token"][data-kind="comment"] {
-color: var(--sandbox-source-comment-color, var(--helix-color-syntax-comment));
-}
-[part="token"][data-kind="constant"] {
-color: var(--sandbox-source-constant-color, var(--helix-color-syntax-constant));
-}
-[part="token"][data-kind="invalid"] {
-color: var(--sandbox-source-invalid-color, var(--helix-color-syntax-invalid));
-}
-[part="token"][data-kind="keyword"] {
-color: var(--sandbox-source-keyword-color, var(--helix-color-syntax-keyword));
-}
-[part="token"][data-kind="name"] {
-color: var(--sandbox-source-name-color, var(--helix-color-syntax-name));
-}
-[part="token"][data-kind="string"] {
-color: var(--sandbox-source-string-color, var(--helix-color-syntax-string));
-}
-[part="token"][data-kind="tag"] {
-color: var(--sandbox-source-tag-color, var(--helix-color-syntax-tag));
-}`);
+export const styles = createSheet(`:host {display: block;block-size: 100%;}[part="highlight"],
+[part="source"] {border: none;color: var(--helix-color-foreground-muted);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);inline-size: 100%;line-height: var(--helix-leading-normal);min-block-size: var(--sandbox-source-min-block-size, 12rem);padding: var(--helix-space-sm);tab-size: 2;}[part="source"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: block;resize: none;}[part="source"]:focus-visible {background-color: var(--helix-color-surface);outline: none;}[part="field"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: grid;grid-template-rows: minmax(max-content, auto);overflow: auto;}[part="field"]:focus-within {background-color: var(--helix-color-surface);}[part="field"] > [part] {grid-area: 1 / 1;letter-spacing: normal;margin: 0;overflow-wrap: break-word;white-space: pre-wrap;}[part="field"] > [part="source"],
+[part="field"] > [part="source"]:focus-visible {-webkit-text-fill-color: transparent;align-self: stretch;background-color: transparent;block-size: auto;caret-color: var(--helix-color-foreground);color: transparent;overflow: hidden;}[data-kind="callable"] {color: var(--sandbox-source-callable-color, var(--helix-color-syntax-callable));}[data-kind="comment"] {color: var(--sandbox-source-comment-color, var(--helix-color-syntax-comment));}[data-kind="constant"] {color: var(--sandbox-source-constant-color, var(--helix-color-syntax-constant));}[data-kind="invalid"] {color: var(--sandbox-source-invalid-color, var(--helix-color-syntax-invalid));}[data-kind="keyword"] {color: var(--sandbox-source-keyword-color, var(--helix-color-syntax-keyword));}[data-kind="name"] {color: var(--sandbox-source-name-color, var(--helix-color-syntax-name));}[data-kind="string"] {color: var(--sandbox-source-string-color, var(--helix-color-syntax-string));}[data-kind="tag"] {color: var(--sandbox-source-tag-color, var(--helix-color-syntax-tag));}`);

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

@@ -1,6 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, TemplateResult } from 'lit';
-import { type SandboxHighlight } from '../tokens.js';
+import { type SandboxTokenizer } from '../tokens.js';
 /**
  * @summary An editable source pane for a sandbox preview.
  *
@@ -12,7 +12,7 @@ import { type SandboxHighlight } from '../tokens.js';
  * field, press Escape and then Tab. Shift+Tab moves focus back as it does
  * anywhere else. The field's description says so to a screen reader.
  *
- * **`highlight` colors the source** with a highlighter you bring, such as one
+ * **`tokenize` colors the source** with a highlighter you bring, such as one
  * built on Lezer, Prism or Shiki. It is a function from the source to runs of
  * text, each with an optional kind, and the pane draws the runs under a
  * transparent field, so typing, selection and undo stay the textarea's. The
@@ -20,7 +20,9 @@ import { type SandboxHighlight } from '../tokens.js';
  * `string` and `tag`, each colored by the `--helix-color-syntax-*` token of
  * its name and a hook of its own, such as `--sandbox-source-keyword-color`.
  * A run of any other kind is drawn in the field's own color. Every run with a
- * kind is a `token` part, and carries its kind as `data-kind`.
+ * kind is a `token` part, and carries its kind as `data-kind`. A `tokenize`
+ * that throws leaves the source drawn plain and the field editable, and the
+ * error is reported to the page as an uncaught one.
  *
  * @since 0.1.0
  * @status stable
@@ -31,37 +33,27 @@ import { type SandboxHighlight } from '../tokens.js';
  * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves.
  * @event {HelixEditEvent} helix-edit - Fired after the source was edited, with the new source.
  *
- * @csspart field - The box that scrolls the field and its colors together, under `highlight`.
- * @csspart highlight - The colored copy of the source drawn under the field, under `highlight`.
+ * @csspart field - The box that scrolls the field and its colors together, under `tokenize`.
+ * @csspart highlight - The colored copy of the source drawn under the field, under `tokenize`.
  * @csspart source - The editable region.
- * @csspart token - One run of the source that has a kind, under `highlight`.
+ * @csspart token - One run of the source that has a kind, under `tokenize`.
  *
  * @cssproperty --sandbox-source-background-color - Fill behind the source.
- * @cssproperty --sandbox-source-callable-color - Color of a `callable` run, under `highlight`. Defaults to `--helix-color-syntax-callable`.
- * @cssproperty --sandbox-source-comment-color - Color of a `comment` run, under `highlight`. Defaults to `--helix-color-syntax-comment`.
- * @cssproperty --sandbox-source-constant-color - Color of a `constant` run, under `highlight`. Defaults to `--helix-color-syntax-constant`.
- * @cssproperty --sandbox-source-invalid-color - Color of an `invalid` run, under `highlight`. Defaults to `--helix-color-syntax-invalid`.
- * @cssproperty --sandbox-source-keyword-color - Color of a `keyword` run, under `highlight`. Defaults to `--helix-color-syntax-keyword`.
+ * @cssproperty --sandbox-source-callable-color - Color of a `callable` run, under `tokenize`. Defaults to `--helix-color-syntax-callable`.
+ * @cssproperty --sandbox-source-comment-color - Color of a `comment` run, under `tokenize`. Defaults to `--helix-color-syntax-comment`.
+ * @cssproperty --sandbox-source-constant-color - Color of a `constant` run, under `tokenize`. Defaults to `--helix-color-syntax-constant`.
+ * @cssproperty --sandbox-source-invalid-color - Color of an `invalid` run, under `tokenize`. Defaults to `--helix-color-syntax-invalid`.
+ * @cssproperty --sandbox-source-keyword-color - Color of a `keyword` run, under `tokenize`. Defaults to `--helix-color-syntax-keyword`.
  * @cssproperty --sandbox-source-min-block-size - Minimum height of the pane.
- * @cssproperty --sandbox-source-name-color - Color of a `name` run, under `highlight`. Defaults to `--helix-color-syntax-name`.
- * @cssproperty --sandbox-source-string-color - Color of a `string` run, under `highlight`. Defaults to `--helix-color-syntax-string`.
- * @cssproperty --sandbox-source-tag-color - Color of a `tag` run, under `highlight`. Defaults to `--helix-color-syntax-tag`.
+ * @cssproperty --sandbox-source-name-color - Color of a `name` run, under `tokenize`. Defaults to `--helix-color-syntax-name`.
+ * @cssproperty --sandbox-source-string-color - Color of a `string` run, under `tokenize`. Defaults to `--helix-color-syntax-string`.
+ * @cssproperty --sandbox-source-tag-color - Color of a `tag` run, under `tokenize`. Defaults to `--helix-color-syntax-tag`.
  */
 export declare class HelixSandboxSource extends HelixElement {
     /**
      * The editable region's name, read by screen readers.
      */
     fieldLabel: string;
-    /**
-     * Colors the source: a function from the source and the pane's `name` to
-     * runs of text, each with an optional kind, such as
-     * `[{ text: '<' }, { kind: 'tag', text: 'p' }, { text: '>' }]`.
-     *
-     * Absent, the pane is a plain field. Runs whose text does not add up to the
-     * source are drawn as the source, uncolored, so the colors never drift from
-     * the caret. Set it as a property.
-     */
-    highlight?: SandboxHighlight;
     /**
      * The field's description, read by screen readers while Tab indents.
      */
@@ -79,6 +71,20 @@ export declare class HelixSandboxSource extends HelixElement {
      * Whether Tab indents the source. When it is off, Tab moves focus.
      */
     tabIndents: boolean;
+    /**
+     * Colors the source: a function from the source and the pane's `name` to
+     * runs of text, each with an optional kind, such as
+     * `[{ text: '<' }, { kind: 'tag', text: 'p' }, { text: '>' }]`.
+     *
+     * Absent, the pane is a plain field. Runs whose text does not add up to the
+     * source are drawn as the source, uncolored, so the colors never drift from
+     * the caret, and so is the source when the function throws. Set it as a
+     * property.
+     *
+     * Named for what it returns, runs of text, where Code Block's `highlight`
+     * returns markup.
+     */
+    tokenize?: SandboxTokenizer;
     /**
      * The source being edited.
      */
@@ -123,7 +129,7 @@ export declare class HelixSandboxSource extends HelixElement {
     private edit;
     private readonly handleKeydown;
     protected render(): TemplateResult;
-    /** The field itself and its description, which is the whole pane without `highlight`. */
+    /** The field itself and its description, which is the whole pane without `tokenize`. */
     private renderField;
     static styles: CSSResultGroup;
 }

package/dist/sandbox/source/sandbox-source.js

@@ -67,10 +67,17 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     }
     render() {
         const field = this.renderField();
-        if (!this.highlight) {
+        if (!this.tokenize) {
             return field;
         }
-        const runs = drawnRuns(this.value, this.highlight(this.value, this.name));
+        let given = [];
+        try {
+            given = this.tokenize(this.value, this.name);
+        }
+        catch (error) {
+            globalThis.reportError?.(error);
+        }
+        const runs = drawnRuns(this.value, given);
         return html `<div part="field">
       <pre part="highlight" aria-hidden="true">${runs.map(({ kind, text }) => kind ? html `<span part="token" data-kind=${kind}>${text}</span>` : text)}${'\n'}</pre>
       ${field}
@@ -96,9 +103,6 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
 __decorate([
     property({ attribute: 'field-label' })
 ], HelixSandboxSource.prototype, "fieldLabel", void 0);
-__decorate([
-    property({ attribute: false })
-], HelixSandboxSource.prototype, "highlight", void 0);
 __decorate([
     property({ attribute: 'keys-description' })
 ], HelixSandboxSource.prototype, "keysDescription", void 0);
@@ -108,6 +112,9 @@ __decorate([
 __decorate([
     property({ attribute: 'tab-indents', converter: onUnlessFalse })
 ], HelixSandboxSource.prototype, "tabIndents", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixSandboxSource.prototype, "tokenize", void 0);
 __decorate([
     property()
 ], HelixSandboxSource.prototype, "value", void 0);

package/dist/sandbox/status-bar/sandbox-status-bar.css.js

@@ -1,22 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-align-items: center;
-background-color: var(--helix-color-background);
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--sandbox-status-bar-color, var(--helix-color-foreground-subtle));
-display: flex;
-font-size: var(--helix-text-xs);
-gap: var(--helix-space-sm);
-line-height: var(--helix-leading-tight);
-padding: var(--helix-space-2xs) var(--helix-space-sm);
-
-user-select: none;
-}
-
-slot:not([name]) + * {
-margin-inline-start: auto;
-}
-
-[part="caret"] {
-font-variant-numeric: tabular-nums;
-}`);
+export const styles = createSheet(`:host {align-items: center;background-color: var(--helix-color-background);border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--sandbox-status-bar-color, var(--helix-color-foreground-subtle));display: flex;font-size: var(--helix-text-xs);gap: var(--helix-space-sm);line-height: var(--helix-leading-tight);padding: var(--helix-space-2xs) var(--helix-space-sm);user-select: none;}slot:not([name]) + * {margin-inline-start: auto;}[part="caret"] {font-variant-numeric: tabular-nums;}`);

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

@@ -1,107 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
-block-size: var(--sandbox-terminal-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"] {
-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"],
-[part="clear"] {
-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;
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-}
-
-[part="clear"] {
-cursor: pointer;
-}
-
-[part="clear"]:hover {
-background-color: var(--helix-color-surface-sunken);
-}
-
-[part="filter"]:focus-visible,
-[part="clear"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="log"] {
-font-family: var(--helix-font-mono);
-font-size: var(--helix-text-xs);
-line-height: var(--helix-leading-normal);
-overflow: auto;
-padding: var(--helix-space-xs) var(--helix-space-sm);
-}
-
-[part="log"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="empty"] {
-color: var(--helix-color-foreground-subtle);
-margin: var(--helix-space-none);
-}
-
-[part="entry"] {
-align-items: baseline;
-color: var(--helix-color-foreground-muted);
-display: grid;
-gap: var(--helix-space-xs);
-grid-template-columns: 3.5rem minmax(0, 1fr) auto;
-padding-block: var(--helix-space-2xs);
-}
-
-[part="level"] {
-color: var(--helix-color-foreground-subtle);
-text-transform: uppercase;
-}
-
-[part="message"] {
-white-space: pre-wrap;
-word-break: break-word;
-}
-
-[part="count"] {
-background-color: var(--helix-color-surface-sunken);
-border-radius: var(--helix-radii-full);
-color: var(--helix-color-foreground-subtle);
-padding-inline: var(--helix-space-2xs);
-}
-
-[part="entry"][data-level="warn"] {
-color: var(--helix-color-warning);
-}
-
-[part="entry"][data-level="warn"] [part="level"] {
-color: var(--helix-color-warning);
-}
-
-[part="entry"][data-level="error"] {
-color: var(--helix-color-danger);
-}
-
-[part="entry"][data-level="error"] [part="level"] {
-color: var(--helix-color-danger);
-}`);
+export const styles = createSheet(`:host {block-size: var(--sandbox-terminal-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"] {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"],
+[part="clear"] {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;padding: var(--helix-space-2xs) var(--helix-space-xs);}[part="clear"] {cursor: pointer;}[part="clear"]:hover {background-color: var(--helix-color-surface-sunken);}[part="filter"]:focus-visible,
+[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="log"] {font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);line-height: var(--helix-leading-normal);overflow: auto;padding: var(--helix-space-xs) var(--helix-space-sm);}[part="log"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="empty"] {color: var(--helix-color-foreground-subtle);margin: var(--helix-space-none);}[part="entry"] {align-items: baseline;color: var(--helix-color-foreground-muted);display: grid;gap: var(--helix-space-xs);grid-template-columns: 3.5rem minmax(0, 1fr) auto;padding-block: var(--helix-space-2xs);}[part="level"] {color: var(--helix-color-foreground-subtle);text-transform: uppercase;}[part="message"] {white-space: pre-wrap;word-break: break-word;}[part="count"] {background-color: var(--helix-color-surface-sunken);border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-subtle);padding-inline: var(--helix-space-2xs);}[data-level="warn"],
+[data-level="warn"] [part="level"] {color: var(--helix-color-warning);}[data-level="error"],
+[data-level="error"] [part="level"] {color: var(--helix-color-danger);}`);

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

@@ -106,6 +106,10 @@ export declare class HelixSandboxTerminal extends HelixElement {
      * 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`. */

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

@@ -16,6 +16,7 @@ const LEVEL_WORDS = {
     warn: 'Warnings and errors',
 };
 const LIMIT = 200;
+const stop = (event) => event.stopPropagation();
 let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
     constructor() {
         super(...arguments);
@@ -77,7 +78,7 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
             return nothing;
         }
         return html `<div part="controls">
-      <select part="filter" aria-label=${this.levelLabel} @change=${this.handleLevel}>
+      <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] ?? LEVEL_WORDS[one]}
             </option>`)}

package/dist/sandbox/tokens.d.ts

@@ -10,12 +10,12 @@ export interface SandboxToken {
     text: string;
 }
 /**
- * Splits a pane's source into runs, for `SandboxSource.highlight`.
+ * Splits a pane's source into runs, for `SandboxSource.tokenize`.
  *
  * Takes the source and the pane's `name`, such as `html` or `css`, so one
  * function can serve every pane.
  */
-export type SandboxHighlight = (source: string, name: string) => readonly SandboxToken[];
+export type SandboxTokenizer = (source: string, name: string) => readonly SandboxToken[];
 /** A run as the pane draws it: its text, and its kind as an attribute holds it. */
 export interface DrawnRun {
     /** The kind, in lowercase letters, digits and hyphens, or `undefined` for plain text. */

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

@@ -1,37 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---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(--helix-color-background);
-
-block-size: var(--sandbox-toolbar-size, var(--helix-size-control-lg));
-
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
-display: flex;
-min-block-size: 0;
-padding-block: var(--helix-space-none);
-
-padding-inline: var(--helix-space-md);
-}
-
-slot {
-align-items: center;
-display: flex;
-gap: var(--sandbox-toolbar-gap, var(--helix-space-sm));
-min-inline-size: 0;
-}
-
-slot[name="end"] {
-margin-inline-start: auto;
-}`);
+export const styles = createSheet(`:host {--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(--helix-color-background);block-size: var(--sandbox-toolbar-size, var(--helix-size-control-lg));border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;min-block-size: 0;padding-block: var(--helix-space-none);padding-inline: var(--helix-space-md);}slot {align-items: center;display: flex;gap: var(--sandbox-toolbar-gap, var(--helix-space-sm));min-inline-size: 0;}slot[name="end"] {margin-inline-start: auto;}`);