@fusion.dev/helix 0.212.2 → 0.214.0

package/types/svelte.d.ts

@@ -141,11 +141,11 @@ declare module 'svelte/elements' {
     'helix-radio-group': Helix<'helix-radio-group'>
     'helix-radio': Helix<'helix-radio'>
     'helix-rating': Helix<'helix-rating'>
+    'helix-sandbox-console': Helix<'helix-sandbox-console'>
     'helix-sandbox-preview': Helix<'helix-sandbox-preview'>
     'helix-sandbox': Helix<'helix-sandbox'>
     'helix-sandbox-source': Helix<'helix-sandbox-source'>
     'helix-sandbox-status-bar': Helix<'helix-sandbox-status-bar'>
-    'helix-sandbox-terminal': Helix<'helix-sandbox-terminal'>
     'helix-sandbox-toolbar': Helix<'helix-sandbox-toolbar'>
     'helix-scatter-chart': Helix<'helix-scatter-chart'>
     'helix-scroll-area': Helix<'helix-scroll-area'>

package/types/vue.d.ts

@@ -202,10 +202,10 @@ import type {
   HelixSampleEndEvent,
   HelixSampleStartEvent,
   HelixSandbox,
+  HelixSandboxConsole,
   HelixSandboxPreview,
   HelixSandboxSource,
   HelixSandboxStatusBar,
-  HelixSandboxTerminal,
   HelixSandboxToolbar,
   HelixScatterChart,
   HelixScrollArea,
@@ -11731,10 +11731,28 @@ export type HelixLogLineVueProps = {
   at?: (HelixLogLine["at"]) | undefined;
   /** How much the line matters. Absent is `info`. */
   level?: (HelixLogLine["level"]) | undefined;
+  /** What a screen reader hears before the text of a line at each level, for a
+page in another language, keyed by level, such as `{ warn: 'Warnung:' }`.
+A line at `info` or `log` hears nothing extra, and nor does a line whose
+text already starts with its words, such as `Error: Cannot find module`.
+As an attribute it is that object as JSON. */
+  "level-words"?: (HelixLogLine["levelWords"]) | undefined;
+  /** What a screen reader hears before the text of a line at each level, for a
+page in another language, keyed by level, such as `{ warn: 'Warnung:' }`.
+A line at `info` or `log` hears nothing extra, and nor does a line whose
+text already starts with its words, such as `Error: Cannot find module`.
+As an attribute it is that object as JSON. */
+  levelWords?: (HelixLogLine["levelWords"]) | undefined;
   /** What a screen reader hears for the link on a line's number. `{number}` is the number. */
   "line-label"?: (HelixLogLine["lineLabel"]) | undefined;
   /** What a screen reader hears for the link on a line's number. `{number}` is the number. */
   lineLabel?: (HelixLogLine["lineLabel"]) | undefined;
+  /** What a screen reader hears after a line written more than once in a row.
+`{count}` is how many times, in the locale. */
+  "times-label"?: (HelixLogLine["timesLabel"]) | undefined;
+  /** What a screen reader hears after a line written more than once in a row.
+`{count}` is how many times, in the locale. */
+  timesLabel?: (HelixLogLine["timesLabel"]) | undefined;
 };
 
 export type HelixLogLineVueEvents = {};
@@ -11783,6 +11801,11 @@ say that without the component knowing what a row looks like. */
   "loading-text"?: (HelixLog["loadingText"]) | undefined;
   /** The text shown and announced while the rows load. */
   loadingText?: (HelixLog["loadingText"]) | undefined;
+  /** Folds a line written again straight after itself into it, with a count,
+as a browser's console does, so a loop writing one warning a thousand
+times is one line. For lines written or given as data, read as they
+arrive; numbers, `line-href` and the selection count a folded line once. */
+  collapse?: (HelixLog["collapse"]) | undefined;
   /** Whether the log opens following its newest line, when `pinned` is not set.
 `default-pinned="false"` opens it where it starts. */
   "default-pinned"?: (HelixLog["defaultPinned"]) | undefined;
@@ -11825,6 +11848,11 @@ the step's heading and `{status}` is `done` or `failed`. */
   groupLabel?: (HelixLog["groupLabel"]) | undefined;
   /** The log's name, read by screen readers. */
   label?: (HelixLog["label"]) | undefined;
+  /** The quietest level shown: `info` hides `debug` and `log` lines, `warn`
+shows warnings and errors, and `error` errors only. Unset shows every line.
+Lines it hides are kept, so lowering it shows them again, and a step shows
+while it holds a line that shows. */
+  level?: (HelixLog["level"]) | undefined;
   /** The most lines kept, or 0 to keep them all. Past it the oldest lines are
 let go, and the line above the log says how many. */
   limit?: (HelixLog["limit"]) | undefined;
@@ -15753,6 +15781,74 @@ export type HelixRatingVueEvents = {
   input: HelixRatingElementEvent;
 };
 
+/** `HelixSandboxConsole` component event */
+export type HelixSandboxConsoleElementEvent<E = Event> = TypedEvent<
+  HelixSandboxConsole,
+  E
+>;
+/** `helix-before-change` event type */
+export type HelixSandboxConsoleHelixBeforeChangeElementEvent =
+  HelixSandboxConsoleElementEvent<HelixBeforeChangeEvent>;
+
+export type HelixSandboxConsoleVueProps = {
+  /** The clear button's text, under `controls`. */
+  "clear-label"?: (HelixSandboxConsole["clearLabel"]) | undefined;
+  /** The clear button's text, under `controls`. */
+  clearLabel?: (HelixSandboxConsole["clearLabel"]) | undefined;
+  /** 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?: (HelixSandboxConsole["controls"]) | undefined;
+  /** Text shown before anything has been written, and while the level filter
+hides every line. */
+  "empty-label"?: (HelixSandboxConsole["emptyLabel"]) | undefined;
+  /** Text shown before anything has been written, and while the level filter
+hides every line. */
+  emptyLabel?: (HelixSandboxConsole["emptyLabel"]) | undefined;
+  /** The log's name, read by screen readers. */
+  label?: (HelixSandboxConsole["label"]) | undefined;
+  /** 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?: (HelixSandboxConsole["level"]) | undefined;
+  /** The level filter's name, read by screen readers, under `controls`. */
+  "level-label"?: (HelixSandboxConsole["levelLabel"]) | undefined;
+  /** The level filter's name, read by screen readers, under `controls`. */
+  levelLabel?: (HelixSandboxConsole["levelLabel"]) | undefined;
+  /** 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. */
+  "level-words"?: (HelixSandboxConsole["levelWords"]) | undefined;
+  /** 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?: (HelixSandboxConsole["levelWords"]) | undefined;
+  /** 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. */
+  "spoken-words"?: (HelixSandboxConsole["spokenWords"]) | undefined;
+  /** 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?: (HelixSandboxConsole["spokenWords"]) | undefined;
+};
+
+export type HelixSandboxConsoleVueEvents = {
+  /** Fired after the reader chose another level in the filter. `level` holds it. */
+  change: HelixSandboxConsoleElementEvent;
+  /** Fired before the level filter changes, with the level chosen, `log` for every level. Cancelable: cancel it to keep the current level. */
+  "helix-before-change": HelixSandboxConsoleHelixBeforeChangeElementEvent;
+};
+
 /** `HelixSandboxPreview` component event */
 export type HelixSandboxPreviewElementEvent<E = Event> = TypedEvent<
   HelixSandboxPreview,
@@ -16190,68 +16286,6 @@ the column, written as an editor writes them, without grouping. */
 
 export type HelixSandboxStatusBarVueEvents = {};
 
-/** `HelixSandboxTerminal` component event */
-export type HelixSandboxTerminalElementEvent<E = Event> = TypedEvent<
-  HelixSandboxTerminal,
-  E
->;
-/** `helix-before-change` event type */
-export type HelixSandboxTerminalHelixBeforeChangeElementEvent =
-  HelixSandboxTerminalElementEvent<HelixBeforeChangeEvent>;
-
-export type HelixSandboxTerminalVueProps = {
-  /** The clear button's text, under `controls`. */
-  "clear-label"?: (HelixSandboxTerminal["clearLabel"]) | undefined;
-  /** The clear button's text, under `controls`. */
-  clearLabel?: (HelixSandboxTerminal["clearLabel"]) | undefined;
-  /** 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?: (HelixSandboxTerminal["controls"]) | undefined;
-  /** Text shown before anything has been written. */
-  "empty-label"?: (HelixSandboxTerminal["emptyLabel"]) | undefined;
-  /** Text shown before anything has been written. */
-  emptyLabel?: (HelixSandboxTerminal["emptyLabel"]) | undefined;
-  /** The log's name, read by screen readers. */
-  label?: (HelixSandboxTerminal["label"]) | undefined;
-  /** 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?: (HelixSandboxTerminal["level"]) | undefined;
-  /** The level filter's name, read by screen readers, under `controls`. */
-  "level-label"?: (HelixSandboxTerminal["levelLabel"]) | undefined;
-  /** The level filter's name, read by screen readers, under `controls`. */
-  levelLabel?: (HelixSandboxTerminal["levelLabel"]) | undefined;
-  /** 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. */
-  "level-words"?: (HelixSandboxTerminal["levelWords"]) | undefined;
-  /** 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?: (HelixSandboxTerminal["levelWords"]) | undefined;
-  /** 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}}`. */
-  "times-label"?: (HelixSandboxTerminal["timesLabel"]) | undefined;
-  /** 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?: (HelixSandboxTerminal["timesLabel"]) | undefined;
-};
-
-export type HelixSandboxTerminalVueEvents = {
-  /** Fired after the reader chose another level in the filter. `level` holds it. */
-  change: HelixSandboxTerminalElementEvent;
-  /** Fired before the level filter changes, with the level chosen, `log` for every level. Cancelable: cancel it to keep the current level. */
-  "helix-before-change": HelixSandboxTerminalHelixBeforeChangeElementEvent;
-};
-
 export type HelixSandboxToolbarVueProps = {};
 
 export type HelixSandboxToolbarVueEvents = {};
@@ -20169,10 +20203,24 @@ exit code, written as the process gave it, and code `0` is a clean exit. */
   "find-controls-label"?: (HelixTerminal["findControlsLabel"]) | undefined;
   /** The name of the find bar's row of buttons, read by screen readers. */
   findControlsLabel?: (HelixTerminal["findControlsLabel"]) | undefined;
+  /** What the find bar says when its regular expression cannot be read. */
+  "find-invalid-label"?: (HelixTerminal["findInvalidLabel"]) | undefined;
+  /** What the find bar says when its regular expression cannot be read. */
+  findInvalidLabel?: (HelixTerminal["findInvalidLabel"]) | undefined;
   /** The find button's label, and the find field's name and placeholder. */
   "find-label"?: (HelixTerminal["findLabel"]) | undefined;
   /** The find button's label, and the find field's name and placeholder. */
   findLabel?: (HelixTerminal["findLabel"]) | undefined;
+  /** Whether the find bar matches case, so "Error" does not find "error". The
+reader turns it on and off from the bar. */
+  "find-match-case"?: (HelixTerminal["findMatchCase"]) | undefined;
+  /** Whether the find bar matches case, so "Error" does not find "error". The
+reader turns it on and off from the bar. */
+  findMatchCase?: (HelixTerminal["findMatchCase"]) | undefined;
+  /** The match case button's label. */
+  "find-match-case-label"?: (HelixTerminal["findMatchCaseLabel"]) | undefined;
+  /** The match case button's label. */
+  findMatchCaseLabel?: (HelixTerminal["findMatchCaseLabel"]) | undefined;
   /** The next match button's label. */
   "find-next-label"?: (HelixTerminal["findNextLabel"]) | undefined;
   /** The next match button's label. */
@@ -20181,6 +20229,24 @@ exit code, written as the process gave it, and code `0` is a clean exit. */
   "find-previous-label"?: (HelixTerminal["findPreviousLabel"]) | undefined;
   /** The previous match button's label. */
   findPreviousLabel?: (HelixTerminal["findPreviousLabel"]) | undefined;
+  /** Whether the find bar reads what the reader types as a regular expression,
+in JavaScript's syntax. The reader turns it on and off from the bar. */
+  "find-regex"?: (HelixTerminal["findRegex"]) | undefined;
+  /** Whether the find bar reads what the reader types as a regular expression,
+in JavaScript's syntax. The reader turns it on and off from the bar. */
+  findRegex?: (HelixTerminal["findRegex"]) | undefined;
+  /** The regular expression button's label. */
+  "find-regex-label"?: (HelixTerminal["findRegexLabel"]) | undefined;
+  /** The regular expression button's label. */
+  findRegexLabel?: (HelixTerminal["findRegexLabel"]) | undefined;
+  /** Whether the find bar matches whole words only. The reader turns it on and off from the bar. */
+  "find-whole-word"?: (HelixTerminal["findWholeWord"]) | undefined;
+  /** Whether the find bar matches whole words only. The reader turns it on and off from the bar. */
+  findWholeWord?: (HelixTerminal["findWholeWord"]) | undefined;
+  /** The whole word button's label. */
+  "find-whole-word-label"?: (HelixTerminal["findWholeWordLabel"]) | undefined;
+  /** The whole word button's label. */
+  findWholeWordLabel?: (HelixTerminal["findWholeWordLabel"]) | undefined;
   /** The fullscreen button's label. */
   "fullscreen-label"?: (HelixTerminal["fullscreenLabel"]) | undefined;
   /** The fullscreen button's label. */
@@ -25359,6 +25425,8 @@ export type CustomCssProperties = {
   "--rating-step"?: (string) | undefined;
   /** The number of steps in the whole row: `max` divided by `step`. */
   "--rating-steps"?: (string) | undefined;
+  /** Height of the console. */
+  "--sandbox-console-size"?: (string) | undefined;
   /** The invisible width of a divider's drag target. */
   "--sandbox-grab"?: (string) | undefined;
   /** Minimum height of the sandbox. */
@@ -25395,8 +25463,6 @@ export type CustomCssProperties = {
   "--sandbox-source-tag-color"?: (string) | undefined;
   /** Color of the bar's text. */
   "--sandbox-status-bar-color"?: (string) | undefined;
-  /** Height of the scrolling region. */
-  "--sandbox-terminal-size"?: (string) | undefined;
   /** Space between items. */
   "--sandbox-toolbar-gap"?: (string) | undefined;
   /** The bar's height. Defaults to the height of a large control. */
@@ -25723,6 +25789,12 @@ export type CustomCssProperties = {
   "--switch-on-color"?: (string) | undefined;
   /** Color of the thumb, in both states. */
   "--switch-thumb-color"?: (string) | undefined;
+  /** The least height of a cell, and so of its row. Unset, every row is as tall as a control, whatever its cells hold. */
+  "--table-cell-min-block-size"?: (string) | undefined;
+  /** The space above and below a cell's content. Two values set the space above and the space below. */
+  "--table-padding-block"?: (string) | undefined;
+  /** The color of the line under a cell, which is the line between rows. It takes a color only, because it fills the color in a border shorthand, and a full border value makes the rule invalid. It is drawn on the cells, because the row is `display: contents`. */
+  "--table-rule-color"?: (string) | undefined;
   /** The text alignment of the column above the cell: `start`, `center`, or `end`, and unset when the column sets none. The table writes it, and the stylesheet that draws the cell reads it for `justify-content` and `text-align`, which both follow the writing direction. */
   "--table-cell-align"?: (string) | undefined;
   /** How tall the table's box is while `windowed`, when it scrolls its rows. 24em by default. */
@@ -26949,7 +27021,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixRatingVueProps,
     HelixRatingVueEvents
   >;
-  /** A sandboxed '<iframe>' that loads 'src', a document you provide. That document imports what the examples need, listens for a render message, and writes the markup into itself.  **Without 'src', the frame loads a built-in document**, so a sandbox renders with nothing to host. It runs HTML, CSS, and scripts, and reports the console, uncaught errors, its height, and presses as a frame on 'servePreview' does. It defines no element, so an example that uses Helix components needs a 'src' that imports them.  **'imports' lets an example import packages by name** in the built-in document, as an import map: each name maps to the address of an ES module, such as '{"canvas-confetti": "https://esm.sh/canvas-confetti@1.9.3"}', and 'import confetti from 'canvas-confetti'' in the 'js' pane then loads it. A CDN that serves npm packages as modules, such as esm.sh or jsDelivr's '+esm', gives every package an address. A new map loads the document again, since a browser reads one only as a document starts. A 'src' document declares its own.  **'dependencies' names packages by version instead**, as a 'package.json' does: '{"canvas-confetti": "^1.9"}' loads 'canvas-confetti' and the paths under it from 'cdn', 'https://esm.sh/' by default, at the version or range given. An address in 'imports' wins over a package of the same name.  **'modules' holds files the example imports by a relative path**: each path, such as 'utils.js', to its source, and 'import { add } from './utils.js'' in the 'js' pane or in another module loads it. A sandbox writes each pane named for a module file here.  **A module in TypeScript or JSX runs too**: a path ending in '.ts', '.tsx' or '.jsx' is compiled to JavaScript first, and imported by its path or by its path without the extension. The compiler, Sucrase, loads from 'cdn' the first time a module needs it, so the package carries none and a preview with no such module loads none. JSX compiles to the automatic runtime, 'react/jsx-runtime', from 'dependencies', or to the one a '@jsxImportSource' comment names. What fails to compile shows in the 'error' part as an error the example threw, when the example imports it.  **Examples render in a frame**, so an example's styles and scripts do not affect the page around the sandbox, and 'position: fixed' stays inside the pane. The frame starts empty, with its own stylesheets and its own custom element registry, so 'src' must load the styles and components the examples use.  **The source is untrusted, and the frame keeps it isolated.** The frame uses 'sandbox="allow-scripts"' and never 'allow-same-origin'. Together, the two let a document on the same origin remove its own sandbox, which is the same as having none.  **A preview says where it is.** It is ':state(loading)' from the moment it has a 'src' until that document can take the example, and again through 'reload()'. It is ':state(failed)' once the example throws an error it does not catch, until the next source is sent, which a frame on 'servePreview' reports. A page draws its own spinner or message from either, such as a 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 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.  **'relay' lets a frame on a login-protected site load its own files.** The frame's opaque origin makes every request it sends cross-site, and a login cookie is not sent on one, so behind a login such as a Vercel preview the frame's script and stylesheet come back as the login page. With 'relay' set to path prefixes, such as '/sandbox/ /fonts/', the frame can ask this element for a file under them and gets the body back, fetched from this page with its cookies. The page fetches only a 'GET' on its own origin, under those prefixes, in plain characters, following no redirect, and it passes on only a script, a stylesheet, a font, a model, or an image of up to 8 MB. Name only prefixes that hold files the site serves to anyone: an example in the frame is untrusted, and it can ask too. Empty, the default, relays nothing. A frame asks only while its own origin is opaque, so a page elsewhere that frames the same document without a sandbox cannot use the answer to run script on the site.  **'controls' draws two buttons in the preview's corner**: one reloads the frame's document, as 'reload()' does, and one opens the example in a new tab, as 'open()' does. The tab runs it in a frame sandboxed as this one is. */
+  /** 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. */
+  "helix-sandbox-console": DefineCustomElement<
+    HelixSandboxConsole,
+    HelixSandboxConsoleVueProps,
+    HelixSandboxConsoleVueEvents
+  >;
+  /** A sandboxed '<iframe>' that loads 'src', a document you provide. That document imports what the examples need, listens for a render message, and writes the markup into itself.  **Without 'src', the frame loads a built-in document**, so a sandbox renders with nothing to host. It runs HTML, CSS, and scripts, and reports the console, uncaught errors, its height, and presses as a frame on 'servePreview' does. It defines no element, so an example that uses Helix components needs a 'src' that imports them.  **'imports' lets an example import packages by name** in the built-in document, as an import map: each name maps to the address of an ES module, such as '{"canvas-confetti": "https://esm.sh/canvas-confetti@1.9.3"}', and 'import confetti from 'canvas-confetti'' in the 'js' pane then loads it. A CDN that serves npm packages as modules, such as esm.sh or jsDelivr's '+esm', gives every package an address. A new map loads the document again, since a browser reads one only as a document starts. A 'src' document declares its own.  **'dependencies' names packages by version instead**, as a 'package.json' does: '{"canvas-confetti": "^1.9"}' loads 'canvas-confetti' and the paths under it from 'cdn', 'https://esm.sh/' by default, at the version or range given. An address in 'imports' wins over a package of the same name.  **'modules' holds files the example imports by a relative path**: each path, such as 'utils.js', to its source, and 'import { add } from './utils.js'' in the 'js' pane or in another module loads it. A sandbox writes each pane named for a module file here.  **A module in TypeScript or JSX runs too**: a path ending in '.ts', '.tsx' or '.jsx' is compiled to JavaScript first, and imported by its path or by its path without the extension. The compiler, Sucrase, loads from 'cdn' the first time a module needs it, so the package carries none and a preview with no such module loads none. JSX compiles to the automatic runtime, 'react/jsx-runtime', from 'dependencies', or to the one a '@jsxImportSource' comment names. What fails to compile shows in the 'error' part as an error the example threw, when the example imports it.  **Examples render in a frame**, so an example's styles and scripts do not affect the page around the sandbox, and 'position: fixed' stays inside the pane. The frame starts empty, with its own stylesheets and its own custom element registry, so 'src' must load the styles and components the examples use.  **The source is untrusted, and the frame keeps it isolated.** The frame uses 'sandbox="allow-scripts"' and never 'allow-same-origin'. Together, the two let a document on the same origin remove its own sandbox, which is the same as having none.  **A preview says where it is.** It is ':state(loading)' from the moment it has a 'src' until that document can take the example, and again through 'reload()'. It is ':state(failed)' once the example throws an error it does not catch, until the next source is sent, which a frame on 'servePreview' reports. A page draws its own spinner or message from either, such as a 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 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.  **'relay' lets a frame on a login-protected site load its own files.** The frame's opaque origin makes every request it sends cross-site, and a login cookie is not sent on one, so behind a login such as a Vercel preview the frame's script and stylesheet come back as the login page. With 'relay' set to path prefixes, such as '/sandbox/ /fonts/', the frame can ask this element for a file under them and gets the body back, fetched from this page with its cookies. The page fetches only a 'GET' on its own origin, under those prefixes, in plain characters, following no redirect, and it passes on only a script, a stylesheet, a font, a model, or an image of up to 8 MB. Name only prefixes that hold files the site serves to anyone: an example in the frame is untrusted, and it can ask too. Empty, the default, relays nothing. A frame asks only while its own origin is opaque, so a page elsewhere that frames the same document without a sandbox cannot use the answer to run script on the site.  **'controls' draws two buttons in the preview's corner**: one reloads the frame's document, as 'reload()' does, and one opens the example in a new tab, as 'open()' does. The tab runs it in a frame sandboxed as this one is. */
   "helix-sandbox-preview": DefineCustomElement<
     HelixSandboxPreview,
     HelixSandboxPreviewVueProps,
@@ -26973,12 +27051,6 @@ export interface WcToolkitVueGlobalComponents {
     HelixSandboxStatusBarVueProps,
     HelixSandboxStatusBarVueEvents
   >;
-  /** 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. */
-  "helix-sandbox-terminal": DefineCustomElement<
-    HelixSandboxTerminal,
-    HelixSandboxTerminalVueProps,
-    HelixSandboxTerminalVueEvents
-  >;
   /** Spans the source pane and the preview, and holds controls for the whole sandbox. Files go at the start and menus at the end, as in most editors.  The toolbar does not have 'role="toolbar"'. That role gives a group of similar controls one tab stop with a roving tabindex. The toolbar holds a tab list, which has its own arrow-key behavior that the role would break. Use 'helix-toolbar' for a row of buttons.  Both slots are bare, so an empty slot adds no box and no gap. */
   "helix-sandbox-toolbar": DefineCustomElement<
     HelixSandboxToolbar,

package/types/words.d.ts

@@ -2377,6 +2377,16 @@ declare module '@fusion.dev/helix-core' {
        * English: `{status, select, failed {{heading} failed} other {{heading} finished}}`
        */
       groupLabel: Message
+      /**
+       * What a screen reader hears before the text of a line at each level, for a
+       * page in another language, keyed by level, such as `{ warn: 'Warnung:' }`.
+       * A line at `info` or `log` hears nothing extra, and nor does a line whose
+       * text already starts with its words, such as `Error: Cannot find module`.
+       * As an attribute it is that object as JSON.
+       *
+       * English: `{ debug: 'Debug:', error: 'Error:', warn: 'Warning:', }`
+       */
+      levelWords: MessageTable
       /**
        * What a screen reader hears for the link on a line's number. `{number}` is the number.
        *
@@ -2408,6 +2418,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `{status, select, pending {waiting} running {running} done {finished} failed {failed} skipped {skipped} other {}}`
        */
       statusLabel: Message
+      /**
+       * What a screen reader hears after a line written more than once in a row.
+       * `{count}` is how many times, in the locale.
+       *
+       * English: `{count} times`
+       */
+      timesLabel: Message
     }
     'helix-map': {
       /**
@@ -3174,6 +3191,52 @@ declare module '@fusion.dev/helix-core' {
        */
       separatorLabel: Message
     }
+    'helix-sandbox-console': {
+      /**
+       * The clear button's text, under `controls`.
+       *
+       * English: `Clear`
+       */
+      clearLabel: Message
+      /**
+       * Text shown before anything has been written, and while the level filter
+       * hides every line.
+       *
+       * English: `Nothing written to the console yet.`
+       */
+      emptyLabel: Message
+      /**
+       * The log's name, read by screen readers.
+       *
+       * English: `Console output`
+       */
+      label: Message
+      /**
+       * The level filter's name, read by screen readers, under `controls`.
+       *
+       * English: `Levels shown`
+       */
+      levelLabel: Message
+      /**
+       * 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.
+       *
+       * English: `{ error: 'Errors', info: 'Info and above', log: 'All levels', warn: 'Warnings and errors', }`
+       */
+      levelWords: MessageTable
+      /**
+       * 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.
+       *
+       * English: `{ error: 'Error:', info: 'Info:', warn: 'Warning:', }`
+       */
+      spokenWords: MessageTable
+    }
     'helix-sandbox-preview': {
       /**
        * The frame's name, read by screen readers.
@@ -3233,49 +3296,6 @@ declare module '@fusion.dev/helix-core' {
        */
       positionLabel: Message
     }
-    'helix-sandbox-terminal': {
-      /**
-       * The clear button's text, under `controls`.
-       *
-       * English: `Clear`
-       */
-      clearLabel: Message
-      /**
-       * Text shown before anything has been written.
-       *
-       * English: `Nothing written to the console yet.`
-       */
-      emptyLabel: Message
-      /**
-       * The log's name, read by screen readers.
-       *
-       * English: `Console output`
-       */
-      label: Message
-      /**
-       * The level filter's name, read by screen readers, under `controls`.
-       *
-       * English: `Levels shown`
-       */
-      levelLabel: Message
-      /**
-       * 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.
-       *
-       * English: `{ error: 'Errors', info: 'Info and above', log: 'All levels', warn: 'Warnings and errors', }`
-       */
-      levelWords: MessageTable
-      /**
-       * 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}}`.
-       *
-       * English: `{count} times`
-       */
-      timesLabel: Message
-    }
     'helix-scatter-chart': {
       /**
        * The word for the strength of the relation, `{correlationLabel}` in
@@ -4181,12 +4201,24 @@ declare module '@fusion.dev/helix-core' {
        * English: `Find controls`
        */
       findControlsLabel: Message
+      /**
+       * What the find bar says when its regular expression cannot be read.
+       *
+       * English: `Not a valid regular expression`
+       */
+      findInvalidLabel: Message
       /**
        * The find button's label, and the find field's name and placeholder.
        *
        * English: `Find`
        */
       findLabel: Message
+      /**
+       * The match case button's label.
+       *
+       * English: `Match case`
+       */
+      findMatchCaseLabel: Message
       /**
        * The next match button's label.
        *
@@ -4199,6 +4231,18 @@ declare module '@fusion.dev/helix-core' {
        * English: `Previous match`
        */
       findPreviousLabel: Message
+      /**
+       * The regular expression button's label.
+       *
+       * English: `Use regular expression`
+       */
+      findRegexLabel: Message
+      /**
+       * The whole word button's label.
+       *
+       * English: `Match whole word`
+       */
+      findWholeWordLabel: Message
       /**
        * The fullscreen button's label.
        *

package/dist/sandbox/levels.d.ts

@@ -1,10 +0,0 @@
-import type { ConsoleDetail } from '@fusion.dev/helix-core';
-/** A console level, from the quietest to the loudest. */
-export type ConsoleLevel = ConsoleDetail['level'];
-/** The four levels in order, the quietest first. */
-export declare const LEVELS: readonly ConsoleLevel[];
-/**
- * Whether a line at `level` shows under a terminal's `level`, which is the
- * quietest it shows. No floor, or one that names no level, shows every line.
- */
-export declare const shows: (level: ConsoleLevel, floor: string | undefined) => boolean;

package/dist/sandbox/levels.js

@@ -1,5 +0,0 @@
-export const LEVELS = ['log', 'info', 'warn', 'error'];
-export const shows = (level, floor) => {
-    const from = LEVELS.indexOf(floor);
-    return from < 0 || LEVELS.indexOf(level) >= from;
-};

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

@@ -1,2 +0,0 @@
-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="filter"] {font-size: max(var(--helix-text-field-min), var(--helix-text-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-muted);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-muted);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-muted);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)}`);