@fusion.dev/helix 0.199.0 → 0.200.0

package/types/svelte.d.ts

@@ -98,6 +98,9 @@ declare module 'svelte/elements' {
     'helix-list': Helix<'helix-list'>
     'helix-listbox': Helix<'helix-listbox'>
     'helix-loader': Helix<'helix-loader'>
+    'helix-log-group': Helix<'helix-log-group'>
+    'helix-log-line': Helix<'helix-log-line'>
+    'helix-log': Helix<'helix-log'>
     'helix-map-area': Helix<'helix-map-area'>
     'helix-map-buildings': Helix<'helix-map-buildings'>
     'helix-map-contours': Helix<'helix-map-contours'>

package/types/vue.d.ts

@@ -68,6 +68,9 @@ import type {
   HelixList,
   HelixListbox,
   HelixLoader,
+  HelixLogGroup,
+  HelixLogLine,
+  HelixLog,
   HelixMapArea,
   HelixMapBuildings,
   HelixMapContours,
@@ -11451,6 +11454,214 @@ progress. */
 
 export type HelixLoaderVueEvents = {};
 
+/** `HelixLogGroup` component event */
+export type HelixLogGroupElementEvent<E = Event> = TypedEvent<HelixLogGroup, E>;
+/** `toggle` event type */
+export type HelixLogGroupToggleElementEvent =
+  HelixLogGroupElementEvent<ToggleEvent>;
+/** `helix-before-close` event type */
+export type HelixLogGroupHelixBeforeCloseElementEvent =
+  HelixLogGroupElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixLogGroupHelixBeforeOpenElementEvent =
+  HelixLogGroupElementEvent<HelixBeforeOpenEvent>;
+
+export type HelixLogGroupVueProps = {
+  /** Whether the element starts open. Ignored once `open` is written. */
+  "default-open"?: (HelixLogGroup["defaultOpen"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  defaultOpen?: (HelixLogGroup["defaultOpen"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+hydration, or diffed by a framework, it comes back holding whatever the
+last reader did rather than what the author wrote. `:state(open)` carries
+the resolved state for stylesheets, which is what the mirror is for. */
+  open?: (HelixLogGroup["open"]) | undefined;
+  /** How long the step took, as it should read, such as `12s`. */
+  duration?: (HelixLogGroup["duration"]) | undefined;
+  /** What the step is called. The `heading` slot replaces it. */
+  heading?: (HelixLogGroup["heading"]) | undefined;
+  /** Where the step stands, which draws a mark before the heading. */
+  status?: (HelixLogGroup["status"]) | undefined;
+  /** What a screen reader hears for the status, after the heading.
+`{status}` is one of `pending`, `running`, `done`, `failed`, and `skipped`. */
+  "status-label"?: (HelixLogGroup["statusLabel"]) | undefined;
+  /** What a screen reader hears for the status, after the heading.
+`{status}` is one of `pending`, `running`, `done`, `failed`, and `skipped`. */
+  statusLabel?: (HelixLogGroup["statusLabel"]) | undefined;
+};
+
+export type HelixLogGroupVueEvents = {
+  /** Fired after the group opens or closes, with `newState` and `oldState`. */
+  toggle: HelixLogGroupToggleElementEvent;
+  /** Fired before the group closes. Cancelable. */
+  "helix-before-close": HelixLogGroupHelixBeforeCloseElementEvent;
+  /** Fired before the group opens. Cancelable. */
+  "helix-before-open": HelixLogGroupHelixBeforeOpenElementEvent;
+};
+
+export type HelixLogLineVueProps = {
+  /** When the line was written: milliseconds since the epoch, or anything `Date` parses. */
+  at?: (HelixLogLine["at"]) | undefined;
+  /** How much the line matters. Absent is `info`. */
+  level?: (HelixLogLine["level"]) | 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;
+};
+
+export type HelixLogLineVueEvents = {};
+
+/** `HelixLog` component event */
+export type HelixLogElementEvent<E = Event> = TypedEvent<HelixLog, E>;
+/** `helix-before-pin` event type */
+export type HelixLogHelixBeforePinElementEvent =
+  HelixLogElementEvent<HelixBeforePinEvent>;
+/** `helix-expand` event type */
+export type HelixLogHelixExpandElementEvent =
+  HelixLogElementEvent<HelixExpandEvent>;
+/** `helix-pin` event type */
+export type HelixLogHelixPinElementEvent = HelixLogElementEvent<HelixPinEvent>;
+
+export type HelixLogVueProps = {
+  /** The text shown and announced when there are no rows and none are loading. */
+  "empty-text"?: (HelixLog["emptyText"]) | undefined;
+  /** The text shown and announced when there are no rows and none are loading. */
+  emptyText?: (HelixLog["emptyText"]) | undefined;
+  /** Whether the rows are still loading.
+
+Reflected, because a stylesheet needs it: the rows that are already there
+are dimmed rather than removed while a new set arrives, and only CSS can
+say that without the component knowing what a row looks like. */
+  loading?: (HelixLog["loading"]) | undefined;
+  /** The text shown and announced while the rows load. */
+  "loading-text"?: (HelixLog["loadingText"]) | undefined;
+  /** The text shown and announced while the rows load. */
+  loadingText?: (HelixLog["loadingText"]) | 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;
+  /** Whether the log opens following its newest line, when `pinned` is not set.
+`default-pinned="false"` opens it where it starts. */
+  defaultPinned?: (HelixLog["defaultPinned"]) | undefined;
+  /** Whether the run is over, which a screen reader is told once.
+
+Set it when output you `write` is complete. A `source` sets it when the
+stream ends. */
+  done?: (HelixLog["done"]) | undefined;
+  /** What a screen reader hears when the run is over. */
+  "done-label"?: (HelixLog["doneLabel"]) | undefined;
+  /** What a screen reader hears when the run is over. */
+  doneLabel?: (HelixLog["doneLabel"]) | undefined;
+  /** What the line above the log says once `limit` has let lines go. `{count}` is how many. */
+  "dropped-label"?: (HelixLog["droppedLabel"]) | undefined;
+  /** What the line above the log says once `limit` has let lines go. `{count}` is how many. */
+  droppedLabel?: (HelixLog["droppedLabel"]) | undefined;
+  /** What a screen reader hears when lines at `error` arrive. `{count}` is how
+many arrived together and `{text}` is the first of them. */
+  "error-label"?: (HelixLog["errorLabel"]) | undefined;
+  /** What a screen reader hears when lines at `error` arrive. `{count}` is how
+many arrived together and `{text}` is the first of them. */
+  errorLabel?: (HelixLog["errorLabel"]) | undefined;
+  /** The log's name, read by screen readers, where `label` is empty. */
+  "fallback-label"?: (HelixLog["fallbackLabel"]) | undefined;
+  /** The log's name, read by screen readers, where `label` is empty. */
+  fallbackLabel?: (HelixLog["fallbackLabel"]) | undefined;
+  /** What a screen reader hears when a step finishes or fails. `{heading}` is
+the step's heading and `{status}` is `done` or `failed`. */
+  "group-label"?: (HelixLog["groupLabel"]) | undefined;
+  /** What a screen reader hears when a step finishes or fails. `{heading}` is
+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 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;
+  /** A link for each line number, with `{n}` where the number goes, such as
+`#L{n}`. Empty leaves the numbers as text. */
+  "line-href"?: (HelixLog["lineHref"]) | undefined;
+  /** A link for each line number, with `{n}` where the number goes, such as
+`#L{n}`. Empty leaves the numbers as text. */
+  lineHref?: (HelixLog["lineHref"]) | undefined;
+  /** What a screen reader hears for the link on a line's number, handed to each
+line the log draws. `{number}` is the number. */
+  "line-label"?: (HelixLog["lineLabel"]) | undefined;
+  /** What a screen reader hears for the link on a line's number, handed to each
+line the log draws. `{number}` is the number. */
+  lineLabel?: (HelixLog["lineLabel"]) | undefined;
+  /** Whether each line shows its number. */
+  "line-numbers"?: (HelixLog["lineNumbers"]) | undefined;
+  /** Whether each line shows its number. */
+  lineNumbers?: (HelixLog["lineNumbers"]) | undefined;
+  /** Lines to mark, as numbers and ranges such as `12, 40-44`. */
+  "mark-lines"?: (HelixLog["markLines"]) | undefined;
+  /** Lines to mark, as numbers and ranges such as `12, 40-44`. */
+  markLines?: (HelixLog["markLines"]) | undefined;
+  /** What a screen reader hears when `query` changes. `{count}` is how many lines match. */
+  "matches-label"?: (HelixLog["matchesLabel"]) | undefined;
+  /** What a screen reader hears when `query` changes. `{count}` is how many lines match. */
+  matchesLabel?: (HelixLog["matchesLabel"]) | undefined;
+  /** Whether the log follows its newest line.
+
+The reader's scrolling asks first: `helix-before-pin` is cancelable, so a
+consumer refusing it takes the decision and assigns their own value. Not
+reflected, for the reason `Chat` gives at its own `pinned`: a default of
+true would write the attribute on upgrade. */
+  pinned?: (HelixLog["pinned"]) | undefined;
+  /** Text a line has to hold to be shown, ignoring case. Empty shows every line. */
+  query?: (HelixLog["query"]) | undefined;
+  /** The words on the button that returns to the newest line, where `resume` is empty. */
+  "resume-label"?: (HelixLog["resumeLabel"]) | undefined;
+  /** The words on the button that returns to the newest line, where `resume` is empty. */
+  resumeLabel?: (HelixLog["resumeLabel"]) | undefined;
+  /** How near the newest line still counts as being at it, in pixels. */
+  threshold?: (HelixLog["threshold"]) | undefined;
+  /** How each line shows its `at`: `absolute` on the clock, `relative` as the
+time since the first line. Absent shows no time. */
+  timestamps?: (HelixLog["timestamps"]) | undefined;
+  /** Whether a line longer than the box wraps onto the next row. Otherwise the log scrolls sideways. */
+  wrap?: (HelixLog["wrap"]) | undefined;
+  /** The steps the lines from data name in `group`. A step stands where its
+first line is, and one with no line yet stands at the end.
+
+Replaced rather than mutated, as `lines` is: a step finishing is a new
+array with its `status` changed. */
+  groups?: (HelixLog["groups"]) | undefined;
+  /** The lines as data. Reading it gives every line kept, oldest first, with
+the line still being written left out.
+
+Replaced rather than mutated: setting it starts the log over with these
+lines, and `write` adds to them. Set it or write children, not both. */
+  lines?: (HelixLog["lines"]) | undefined;
+  /** Reads each finished line of written text: return the fields to set, such
+as `level` or `group`, or `null` to drop the line. Lines in `lines` are
+taken as they are. */
+  parse?: (HelixLog["parse"]) | undefined;
+  /** Text to read as it arrives, to the end: a `ReadableStream` of text or
+bytes, such as a `fetch` response's body, or an async iterable. Bytes are
+read as UTF-8. The log sets `done` when it ends, and a new source stops
+reading the last one. */
+  source?: (HelixLog["source"]) | undefined;
+};
+
+export type HelixLogVueEvents = {
+  /** Fired when the reader leaves the newest line by scrolling, or comes back to it. Cancelable. */
+  "helix-before-pin": HelixLogHelixBeforePinElementEvent;
+  /** Fired after a reader opens or closes a group drawn from `groups`, with the `id` of every open group in `detail.value`, separated by commas. */
+  "helix-expand": HelixLogHelixExpandElementEvent;
+  /** Fired after the log follows the newest line or lets go of it, with `true` or `false` in `detail.value`. */
+  "helix-pin": HelixLogHelixPinElementEvent;
+};
+
 /** `HelixMapArea` component event */
 export type HelixMapAreaElementEvent<E = Event> = TypedEvent<HelixMapArea, E>;
 /** `helix-map-part-change` event type */
@@ -15419,6 +15630,10 @@ document, each path, such as `utils.js`, to its source. Not read where
   /** The name of the button that opens the example in a new tab, under
 `controls`. */
   openLabel?: (HelixSandboxPreview["openLabel"]) | undefined;
+  /** Path prefixes the frame may ask this page to fetch for it, separated by
+spaces, each starting and ending with a slash, such as `/sandbox/ /fonts/`.
+Empty relays nothing. */
+  relay?: (HelixSandboxPreview["relay"]) | undefined;
   /** The name of the button that reloads the frame's document, under
 `controls`. */
   "reload-label"?: (HelixSandboxPreview["reloadLabel"]) | undefined;
@@ -24058,6 +24273,78 @@ export type CustomCssProperties = {
   "--loader-track-color"?: (string) | undefined;
   /** Width of the arc and the circle behind it, in units of a 24-unit drawing. Defaults to 2. */
   "--loader-track-width"?: (string) | undefined;
+  /** The color of a line at `error`, and of the band behind it. Defaults to the danger color. */
+  "--log-error-color"?: (string) | undefined;
+  /** The band behind a line `mark-lines` names. */
+  "--log-mark-background-color"?: (string) | undefined;
+  /** The fill behind text that matches the log's `query`. */
+  "--log-match-background-color"?: (string) | undefined;
+  /** The color of a line at `warn`, and of the band behind it. Defaults to the warning color. */
+  "--log-warn-color"?: (string) | undefined;
+  /** Written on a `run` with a background, in the same form as `--log-run-color`. */
+  "--log-run-background-color"?: (string) | undefined;
+  /** Written on a `run` with a text color: one of the sixteen `--log-ansi-*` colors the log publishes, or the color itself. */
+  "--log-run-color"?: (string) | undefined;
+  /** The fill behind the lines. Defaults to the page background. */
+  "--log-background-color"?: (string) | undefined;
+  /** The edge around the log and the rules inside it. */
+  "--log-border-color"?: (string) | undefined;
+  /** The text color of the lines. */
+  "--log-color"?: (string) | undefined;
+  /** The face of the lines. Defaults to the monospaced face. */
+  "--log-font-family"?: (string) | undefined;
+  /** The size of the lines. Defaults to the small text step. */
+  "--log-font-size"?: (string) | undefined;
+  /** The height of one line. */
+  "--log-line-height"?: (string) | undefined;
+  /** How tall the log may get before the lines scroll. Defaults to 30rem. */
+  "--log-max-block-size"?: (string) | undefined;
+  /** Space either side of every line and heading. */
+  "--log-padding-inline"?: (string) | undefined;
+  /** The corners of the log. */
+  "--log-radius"?: (string) | undefined;
+  /** The thumb of the scrollbar. Defaults to `--helix-scrollbar-thumb-color`. */
+  "--log-scrollbar-thumb-color"?: (string) | undefined;
+  /** The track of the scrollbar. Defaults to `--helix-scrollbar-track-color`. */
+  "--log-scrollbar-track-color"?: (string) | undefined;
+  /** The background a run takes where ANSI swaps the colors and named none. Defaults to the log's own background on the styled tier. */
+  "--log-ansi-background"?: (string) | undefined;
+  /** The ANSI color black, which codes `30` and `40` draw. */
+  "--log-ansi-black"?: (string) | undefined;
+  /** The ANSI color blue, which codes `34` and `44` draw. */
+  "--log-ansi-blue"?: (string) | undefined;
+  /** The ANSI color bright black, which codes `90` and `100` draw. */
+  "--log-ansi-bright-black"?: (string) | undefined;
+  /** The ANSI color bright blue, which codes `94` and `104` draw. */
+  "--log-ansi-bright-blue"?: (string) | undefined;
+  /** The ANSI color bright cyan, which codes `96` and `106` draw. */
+  "--log-ansi-bright-cyan"?: (string) | undefined;
+  /** The ANSI color bright green, which codes `92` and `102` draw. */
+  "--log-ansi-bright-green"?: (string) | undefined;
+  /** The ANSI color bright magenta, which codes `95` and `105` draw. */
+  "--log-ansi-bright-magenta"?: (string) | undefined;
+  /** The ANSI color bright red, which codes `91` and `101` draw. */
+  "--log-ansi-bright-red"?: (string) | undefined;
+  /** The ANSI color bright white, which codes `97` and `107` draw. */
+  "--log-ansi-bright-white"?: (string) | undefined;
+  /** The ANSI color bright yellow, which codes `93` and `103` draw. */
+  "--log-ansi-bright-yellow"?: (string) | undefined;
+  /** The ANSI color cyan, which codes `36` and `46` draw. */
+  "--log-ansi-cyan"?: (string) | undefined;
+  /** The text color a run takes where ANSI swaps the colors and named none. Defaults to the log's own text color on the styled tier. */
+  "--log-ansi-foreground"?: (string) | undefined;
+  /** The ANSI color green, which codes `32` and `42` draw. */
+  "--log-ansi-green"?: (string) | undefined;
+  /** The ANSI color magenta, which codes `35` and `45` draw. */
+  "--log-ansi-magenta"?: (string) | undefined;
+  /** The ANSI color red, which codes `31` and `41` draw. */
+  "--log-ansi-red"?: (string) | undefined;
+  /** The ANSI color white, which codes `37` and `47` draw. */
+  "--log-ansi-white"?: (string) | undefined;
+  /** The ANSI color yellow, which codes `33` and `43` draw. */
+  "--log-ansi-yellow"?: (string) | undefined;
+  /** Written on the `log`: how many digits the largest line number has, while `line-numbers` is set, so a stylesheet can size the column of numbers. */
+  "--log-digits"?: (string) | undefined;
   /** The area's color when no tone is set. */
   "--map-area-color"?: (string) | undefined;
   /** The buildings' color when no tone is set. */
@@ -25836,6 +26123,24 @@ export interface WcToolkitVueGlobalComponents {
     HelixLoaderVueProps,
     HelixLoaderVueEvents
   >;
+  /** The heading is a row in the sans face with a caret, the status mark in its color, the heading, and the duration at the far end. A step that is 'done' takes the success color, one that 'failed' the danger color, and one that is 'running' the info color. */
+  "helix-log-group": DefineCustomElement<
+    HelixLogGroup,
+    HelixLogGroupVueProps,
+    HelixLogGroupVueEvents
+  >;
+  /** A row with the number, the time, and the text side by side. A line at 'warn' or 'error' takes a band of its color, and a line 'mark-lines' names takes the band 'Code Block' draws behind a marked line. */
+  "helix-log-line": DefineCustomElement<
+    HelixLogLine,
+    HelixLogLineVueProps,
+    HelixLogLineVueEvents
+  >;
+  /** A bordered box in the monospaced face, at the size of the page's small text, that scrolls after 30rem ('--log-max-block-size'). Lines keep their spaces and run past the edge of the box, which scrolls sideways, until 'wrap' is set.  The sixteen ANSI colors come from your theme: red is the danger color, green success, yellow warning, and blue info. Set '--log-ansi-red' and its siblings on the log to choose them yourself.  Put a search field or the controls for the log in the 'toolbar' slot, in one element such as a 'Toolbar' or a 'Flex'. It sits above the lines with a rule under it. */
+  "helix-log": DefineCustomElement<
+    HelixLog,
+    HelixLogVueProps,
+    HelixLogVueEvents
+  >;
   /** Fills the area in your theme's colors. Uses your primary color unless 'tone' sets another. */
   "helix-map-area": DefineCustomElement<
     HelixMapArea,
@@ -26070,7 +26375,7 @@ 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.  **'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. */
+  /** 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. */
   "helix-sandbox-preview": DefineCustomElement<
     HelixSandboxPreview,
     HelixSandboxPreviewVueProps,

package/types/words.d.ts

@@ -153,6 +153,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Dismiss`
        */
       dismissLabel: Message
+      /**
+       * What a screen reader hears when the run is over.
+       *
+       * English: `Finished`
+       */
+      doneLabel: Message
       /**
        * What screen readers hear when a row is dropped, with `reorderable-rows`.
        *
@@ -188,6 +194,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `No readings`
        */
       emptyText: Message
+      /**
+       * What a screen reader hears when lines at `error` arrive. `{count}` is how
+       * many arrived together and `{text}` is the first of them.
+       *
+       * English: `{count, plural, one {Error} other {# errors}}: {text}`
+       */
+      errorLabel: Message
       /**
        * The name of the heading over the disclosure buttons.
        *
@@ -259,6 +272,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `Skip to page {page}`
        */
       gapLabel: Message
+      /**
+       * What a screen reader hears when a step finishes or fails. `{heading}` is
+       * the step's heading and `{status}` is `done` or `failed`.
+       *
+       * English: `{status, select, failed {{heading} failed} other {{heading} finished}}`
+       */
+      groupLabel: Message
       /**
        * The name the summary gives each series' highest reading, `{highestLabel}`
        * in `summary-label`.
@@ -320,6 +340,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `Groups`
        */
       legendLabel: Message
+      /**
+       * What a screen reader hears for the link on a line's number, handed to each
+       * line the log draws. `{number}` is the number.
+       *
+       * English: `Line {number}`
+       */
+      lineLabel: Message
       /**
        * What screen readers hear when a walk along the links reaches a note that
        * has no link to follow, or goes back to a note: `{note}` for its name and
@@ -397,6 +424,12 @@ declare module '@fusion.dev/helix-core' {
        * English: `Mark all as read`
        */
       markAllLabel: Message
+      /**
+       * What a screen reader hears when `query` changes. `{count}` is how many lines match.
+       *
+       * English: `{count, plural, =0 {No lines match} one {# line matches} other {# lines match}}`
+       */
+      matchesLabel: Message
       /**
        * The word a screen reader says for `me` when it names a turn.
        *
@@ -1837,6 +1870,21 @@ declare module '@fusion.dev/helix-core' {
        */
       label: Message
     }
+    'helix-log': {
+      /**
+       * What a screen reader hears for the link on a line's number. `{number}` is the number.
+       *
+       * English: `Line {number}`
+       */
+      lineLabel: Message
+      /**
+       * What a screen reader hears for the status, after the heading.
+       * `{status}` is one of `pending`, `running`, `done`, `failed`, and `skipped`.
+       *
+       * English: `{status, select, pending {waiting} running {running} done {finished} failed {failed} skipped {skipped} other {}}`
+       */
+      statusLabel: Message
+    }
     'helix-map-area': {
       /**
        * The area's name, used in the frame's list and its tile in the layers