@fusion.dev/helix 0.208.1 → 0.210.0

package/types/svelte.d.ts

@@ -179,6 +179,7 @@ declare module 'svelte/elements' {
     'helix-tab': Helix<'helix-tab'>
     'helix-tag-group': Helix<'helix-tag-group'>
     'helix-tag': Helix<'helix-tag'>
+    'helix-terminal': Helix<'helix-terminal'>
     'helix-text': Helix<'helix-text'>
     'helix-textarea': Helix<'helix-textarea'>
     'helix-time-input': Helix<'helix-time-input'>

package/types/vue.d.ts

@@ -240,6 +240,13 @@ import type {
   HelixTabs,
   HelixTag,
   HelixTagGroup,
+  HelixTerminal,
+  HelixTerminalBellEvent,
+  HelixTerminalInputEvent,
+  HelixTerminalLinkEvent,
+  HelixTerminalResizeEvent,
+  HelixTerminalRestartEvent,
+  HelixTerminalTitleEvent,
   HelixText,
   HelixTextarea,
   HelixTimeInput,
@@ -19875,6 +19882,168 @@ export type HelixTagVueEvents = {
   "helix-dismiss": HelixTagHelixDismissElementEvent;
 };
 
+/** `HelixTerminal` component event */
+export type HelixTerminalElementEvent<E = Event> = TypedEvent<HelixTerminal, E>;
+/** `helix-copy` event type */
+export type HelixTerminalHelixCopyElementEvent =
+  HelixTerminalElementEvent<HelixCopyEvent>;
+/** `helix-terminal-bell` event type */
+export type HelixTerminalHelixTerminalBellElementEvent =
+  HelixTerminalElementEvent<HelixTerminalBellEvent>;
+/** `helix-terminal-input` event type */
+export type HelixTerminalHelixTerminalInputElementEvent =
+  HelixTerminalElementEvent<HelixTerminalInputEvent>;
+/** `helix-terminal-link` event type */
+export type HelixTerminalHelixTerminalLinkElementEvent =
+  HelixTerminalElementEvent<HelixTerminalLinkEvent>;
+/** `helix-terminal-resize` event type */
+export type HelixTerminalHelixTerminalResizeElementEvent =
+  HelixTerminalElementEvent<HelixTerminalResizeEvent>;
+/** `helix-terminal-restart` event type */
+export type HelixTerminalHelixTerminalRestartElementEvent =
+  HelixTerminalElementEvent<HelixTerminalRestartEvent>;
+/** `helix-terminal-title` event type */
+export type HelixTerminalHelixTerminalTitleElementEvent =
+  HelixTerminalElementEvent<HelixTerminalTitleEvent>;
+
+export type HelixTerminalVueProps = {
+  /** Covers the container instead of taking a height of its own, for a
+terminal that fills a pane. The container needs a position, such as
+`position: relative`. */
+  fill?: (HelixTerminal["fill"]) | undefined;
+  /** How the frame stands off the page. Unset, it is outlined. `plain` draws
+no edge or corners, for a pane that draws its own. */
+  separation?: (HelixTerminal["separation"]) | undefined;
+  /** The clear button's label. */
+  "clear-label"?: (HelixTerminal["clearLabel"]) | undefined;
+  /** The clear button's label. */
+  clearLabel?: (HelixTerminal["clearLabel"]) | undefined;
+  /** The grid's width in character cells. Set it with `rows` to fix the grid's size; unset, the grid fills the frame. */
+  columns?: (HelixTerminal["columns"]) | undefined;
+  /** Which built-in controls the header shows, as a list of `find`, `copy`,
+`clear`, and `fullscreen`, or `none`. Absent is `find clear`. */
+  controls?: (HelixTerminal["controls"]) | undefined;
+  /** The name of the row of controls, read by screen readers. */
+  "controls-label"?: (HelixTerminal["controlsLabel"]) | undefined;
+  /** The name of the row of controls, read by screen readers. */
+  controlsLabel?: (HelixTerminal["controlsLabel"]) | undefined;
+  /** What screen readers hear after a copy. */
+  "copied-label"?: (HelixTerminal["copiedLabel"]) | undefined;
+  /** What screen readers hear after a copy. */
+  copiedLabel?: (HelixTerminal["copiedLabel"]) | undefined;
+  /** The copy button's label. */
+  "copy-label"?: (HelixTerminal["copyLabel"]) | undefined;
+  /** The copy button's label. */
+  copyLabel?: (HelixTerminal["copyLabel"]) | undefined;
+  /** How the process exited, which the page sets when it does. While it is set,
+the status line says it, the frame sends no input, and Restart is shown.
+Clear it when a new process starts. */
+  "exit-code"?: (HelixTerminal["exitCode"] | `${number}`) | undefined;
+  /** How the process exited, which the page sets when it does. While it is set,
+the status line says it, the frame sends no input, and Restart is shown.
+Clear it when a new process starts. */
+  exitCode?: (HelixTerminal["exitCode"]) | undefined;
+  /** What the status line says once the process has exited. `{code}` is its
+exit code, written as the process gave it, and code `0` is a clean exit. */
+  "exited-label"?: (HelixTerminal["exitedLabel"]) | undefined;
+  /** What the status line says once the process has exited. `{code}` is its
+exit code, written as the process gave it, and code `0` is a clean exit. */
+  exitedLabel?: (HelixTerminal["exitedLabel"]) | undefined;
+  /** The terminal's name where `label` is empty and the host has no `aria-label`. */
+  "fallback-label"?: (HelixTerminal["fallbackLabel"]) | undefined;
+  /** The terminal's name where `label` is empty and the host has no `aria-label`. */
+  fallbackLabel?: (HelixTerminal["fallbackLabel"]) | undefined;
+  /** The label of the button that closes the find bar. */
+  "find-close-label"?: (HelixTerminal["findCloseLabel"]) | undefined;
+  /** The label of the button that closes the find bar. */
+  findCloseLabel?: (HelixTerminal["findCloseLabel"]) | undefined;
+  /** The name of the find bar's row of buttons, read by screen readers. */
+  "find-controls-label"?: (HelixTerminal["findControlsLabel"]) | undefined;
+  /** The name of the find bar's row of buttons, read by screen readers. */
+  findControlsLabel?: (HelixTerminal["findControlsLabel"]) | 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;
+  /** The next match button's label. */
+  "find-next-label"?: (HelixTerminal["findNextLabel"]) | undefined;
+  /** The next match button's label. */
+  findNextLabel?: (HelixTerminal["findNextLabel"]) | undefined;
+  /** The previous match button's label. */
+  "find-previous-label"?: (HelixTerminal["findPreviousLabel"]) | undefined;
+  /** The previous match button's label. */
+  findPreviousLabel?: (HelixTerminal["findPreviousLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  "fullscreen-label"?: (HelixTerminal["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  fullscreenLabel?: (HelixTerminal["fullscreenLabel"]) | undefined;
+  /** The name of the element the reader types into, which the renderer draws. */
+  "input-label"?: (HelixTerminal["inputLabel"]) | undefined;
+  /** The name of the element the reader types into, which the renderer draws. */
+  inputLabel?: (HelixTerminal["inputLabel"]) | undefined;
+  /** The terminal's name, in the header and for screen readers, such as the
+shell or the folder it runs in. Several terminals on a page need names
+that tell them apart. */
+  label?: (HelixTerminal["label"]) | undefined;
+  /** What the find bar says of its matches. `{index}` is the current match,
+counting from 1, and `{count}` how many there are. */
+  "matches-label"?: (HelixTerminal["matchesLabel"]) | undefined;
+  /** What the find bar says of its matches. `{index}` is the current match,
+counting from 1, and `{count}` how many there are. */
+  matchesLabel?: (HelixTerminal["matchesLabel"]) | undefined;
+  /** Draws the output and sends no input, with no cursor, for a transcript or
+a command an agent ran. The attribute is `readonly`, the platform's
+spelling. */
+  readonly?: (HelixTerminal["readOnly"]) | undefined;
+  /** Draws the output and sends no input, with no cursor, for a transcript or
+a command an agent ran. The attribute is `readonly`, the platform's
+spelling. */
+  readOnly?: (HelixTerminal["readOnly"]) | undefined;
+  /** The Restart button's label. */
+  "restart-label"?: (HelixTerminal["restartLabel"]) | undefined;
+  /** The Restart button's label. */
+  restartLabel?: (HelixTerminal["restartLabel"]) | undefined;
+  /** The grid's height in lines. Set it with `columns` to fix the grid's size; unset, the grid fills the frame. */
+  rows?: (HelixTerminal["rows"]) | undefined;
+  /** Keeps the grid as lines a screen reader moves through, and says new
+output as it arrives. Off by default, since it costs time on every
+write. Connect it to a setting your reader can turn on. */
+  "screen-reader-mode"?: (HelixTerminal["screenReaderMode"]) | undefined;
+  /** Keeps the grid as lines a screen reader moves through, and says new
+output as it arrives. Off by default, since it costs time on every
+write. Connect it to a setting your reader can turn on. */
+  screenReaderMode?: (HelixTerminal["screenReaderMode"]) | undefined;
+  /** What the terminal's input describes to a screen reader. `{key}` is the key that switches Tab. */
+  "tab-hint-label"?: (HelixTerminal["tabHintLabel"]) | undefined;
+  /** What the terminal's input describes to a screen reader. `{key}` is the key that switches Tab. */
+  tabHintLabel?: (HelixTerminal["tabHintLabel"]) | undefined;
+  /** What the status line says while Tab moves focus. `{key}` is the key that switches it back. */
+  "tab-moves-focus-label"?: (HelixTerminal["tabMovesFocusLabel"]) | undefined;
+  /** What the status line says while Tab moves focus. `{key}` is the key that switches it back. */
+  tabMovesFocusLabel?: (HelixTerminal["tabMovesFocusLabel"]) | undefined;
+  /** What screen readers hear when Tab goes back to typing in the terminal. */
+  "tab-types-label"?: (HelixTerminal["tabTypesLabel"]) | undefined;
+  /** What screen readers hear when Tab goes back to typing in the terminal. */
+  tabTypesLabel?: (HelixTerminal["tabTypesLabel"]) | undefined;
+};
+
+export type HelixTerminalVueEvents = {
+  /** The copy control or its key put the selection on the clipboard. */
+  "helix-copy": HelixTerminalHelixCopyElementEvent;
+  /** The program rang the bell. The frame flashes once. */
+  "helix-terminal-bell": HelixTerminalHelixTerminalBellElementEvent;
+  /** The reader typed or pasted, with `data` encoded for the program. Write it to the process. Not sent while `readonly`, or once `exit-code` is set. */
+  "helix-terminal-input": HelixTerminalHelixTerminalInputElementEvent;
+  /** A link in the output was activated, with its `href`. Cancelable: cancel it to open the link yourself. Left alone, a web address opens in a new tab. */
+  "helix-terminal-link": HelixTerminalHelixTerminalLinkElementEvent;
+  /** The grid changed size, with `columns`, `rows`, `width`, and `height`. Resize the process's pseudo-terminal to match. */
+  "helix-terminal-resize": HelixTerminalHelixTerminalResizeElementEvent;
+  /** The Restart button was pressed after the process exited. Start a new process and clear `exit-code`. */
+  "helix-terminal-restart": HelixTerminalHelixTerminalRestartElementEvent;
+  /** The program set its title, with `title`. The frame keeps its own `label`. */
+  "helix-terminal-title": HelixTerminalHelixTerminalTitleElementEvent;
+};
+
 export type HelixTextVueProps = {
   /** The HTML element to render.
 
@@ -25420,6 +25589,68 @@ export type CustomCssProperties = {
   "--tag-gap"?: (string) | undefined;
   /** The corner radius of the tag. */
   "--tag-radius"?: (string) | undefined;
+  /** The frame's height, as a length. Ignored with `fill`, where the container decides it. */
+  "--terminal-block-size"?: (string) | undefined;
+  /** The edge around the frame and the rules inside it. */
+  "--terminal-border-color"?: (string) | undefined;
+  /** The face of the grid. Defaults to the monospaced face. */
+  "--terminal-font-family"?: (string) | undefined;
+  /** The size of the grid's text. Defaults to the small text step. */
+  "--terminal-font-size"?: (string) | undefined;
+  /** The fill of the header, the find bar, and the status line. */
+  "--terminal-header-background-color"?: (string) | undefined;
+  /** The space between the frame's edge and the grid. */
+  "--terminal-padding"?: (string) | undefined;
+  /** The frame's corners. */
+  "--terminal-radius"?: (string) | undefined;
+  /** The ground of the current match of a search. */
+  "--terminal-active-match-background-color"?: (string) | undefined;
+  /** The edge of the current match of a search. */
+  "--terminal-active-match-border-color"?: (string) | undefined;
+  /** ANSI black, which codes `30` and `40` draw. */
+  "--terminal-ansi-black"?: (string) | undefined;
+  /** ANSI blue, which codes `34` and `44` draw. */
+  "--terminal-ansi-blue"?: (string) | undefined;
+  /** ANSI bright black, which codes `90` and `100` draw. */
+  "--terminal-ansi-bright-black"?: (string) | undefined;
+  /** ANSI bright blue, which codes `94` and `104` draw. */
+  "--terminal-ansi-bright-blue"?: (string) | undefined;
+  /** ANSI bright cyan, which codes `96` and `106` draw. */
+  "--terminal-ansi-bright-cyan"?: (string) | undefined;
+  /** ANSI bright green, which codes `92` and `102` draw. */
+  "--terminal-ansi-bright-green"?: (string) | undefined;
+  /** ANSI bright magenta, which codes `95` and `105` draw. */
+  "--terminal-ansi-bright-magenta"?: (string) | undefined;
+  /** ANSI bright red, which codes `91` and `101` draw. */
+  "--terminal-ansi-bright-red"?: (string) | undefined;
+  /** ANSI bright white, which codes `97` and `107` draw. */
+  "--terminal-ansi-bright-white"?: (string) | undefined;
+  /** ANSI bright yellow, which codes `93` and `103` draw. */
+  "--terminal-ansi-bright-yellow"?: (string) | undefined;
+  /** ANSI cyan, which codes `36` and `46` draw. */
+  "--terminal-ansi-cyan"?: (string) | undefined;
+  /** ANSI green, which codes `32` and `42` draw. */
+  "--terminal-ansi-green"?: (string) | undefined;
+  /** ANSI magenta, which codes `35` and `45` draw. */
+  "--terminal-ansi-magenta"?: (string) | undefined;
+  /** ANSI red, which codes `31` and `41` draw. */
+  "--terminal-ansi-red"?: (string) | undefined;
+  /** ANSI white, which codes `37` and `47` draw. */
+  "--terminal-ansi-white"?: (string) | undefined;
+  /** ANSI yellow, which codes `33` and `43` draw. */
+  "--terminal-ansi-yellow"?: (string) | undefined;
+  /** The ground of the grid. */
+  "--terminal-background-color"?: (string) | undefined;
+  /** The text of the grid where the program sets no color. */
+  "--terminal-color"?: (string) | undefined;
+  /** The cursor. */
+  "--terminal-cursor-color"?: (string) | undefined;
+  /** The ground of every match of a search but the current one. */
+  "--terminal-match-background-color"?: (string) | undefined;
+  /** The grid's scrollbar. */
+  "--terminal-scrollbar-thumb-color"?: (string) | undefined;
+  /** The ground of selected text. See-through, so the text keeps its color. */
+  "--terminal-selection-background-color"?: (string) | undefined;
   /** The typeface. Overrides the ramp's. */
   "--text-font-family"?: (string) | undefined;
   /** The size. Overrides the ramp's. */
@@ -26706,6 +26937,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixTagVueProps,
     HelixTagVueEvents
   >;
+  /** The styled frame: a bordered box on the page's background with a header strip for the name and the controls, and a status line that appears when the process exits. It is 24rem tall unless 'fill' is set or '--terminal-block-size' says otherwise.  'connectTerminal' themes the terminal from your tokens. The sixteen ANSI colors share Log's hues, red the danger color, green success, yellow warning, and blue info, and the four grays keep their order from dark to light in each color mode. Set '--terminal-ansi-red' and its siblings, '--terminal-cursor-color', or '--terminal-selection-background-color' on the terminal to choose them yourself, such as 'helix-terminal { --terminal-ansi-blue: #3b82f6 }'. The [Terminals](https://fusion.dev/helix/docs/terminals) guide lists them all.  Set 'fill' for a terminal that fills a pane, such as one side of a 'Splitter': the frame covers its container, which needs a position of its own, such as 'position: relative'. Set 'separation="plain"' where the pane already draws the edge. */
+  "helix-terminal": DefineCustomElement<
+    HelixTerminal,
+    HelixTerminalVueProps,
+    HelixTerminalVueEvents
+  >;
   /** 'as' sets the element, which decides the document outline and what a screen reader announces. 'variant' sets the type ramp, which decides size, weight, leading, and tracking together.  The two match by default, so usually you set only 'as', such as 'as="h2"'. Set 'variant' when the look and the element differ, such as a heading that looks smaller or a '<p>' styled as a caption.  The pairing is resolved in CSS, so the element writes nothing to its host. 'as="h2"' picks up the heading ramp through a selector, and setting 'variant' overrides the pairing. Do not derive it in 'willUpdate', because that adds a host attribute the server markup does not have, which causes a hydration mismatch in React.  Size, weight, and leading are not separate properties. Choose a named ramp with 'variant'.  'tone' and 'emphasis' are separate from 'variant', because color carries state. Combining them would need a variant for every pair, such as 'caption-danger' and 'label-muted'.  'lines' cuts the text off after that many lines and ends it with an ellipsis. 'text-wrap' balances or tidies the line breaks, and 'text-align' sets the alignment. Each '--text-*' property overrides one value of the ramp, for a text or for every text inside an element.  **To label a control, write a native '<label data-text="label">'.** The base layer gives it the label ramp. A Helix field takes its own 'label'. */
   "helix-text": DefineCustomElement<
     HelixText,

package/types/words.d.ts

@@ -4037,6 +4037,118 @@ declare module '@fusion.dev/helix-core' {
        */
       emptyLabel: Message
     }
+    'helix-terminal': {
+      /**
+       * The clear button's label.
+       *
+       * English: `Clear`
+       */
+      clearLabel: Message
+      /**
+       * The name of the row of controls, read by screen readers.
+       *
+       * English: `Terminal controls`
+       */
+      controlsLabel: Message
+      /**
+       * What screen readers hear after a copy.
+       *
+       * English: `Copied`
+       */
+      copiedLabel: Message
+      /**
+       * The copy button's label.
+       *
+       * English: `Copy`
+       */
+      copyLabel: Message
+      /**
+       * What the status line says once the process has exited. `{code}` is its
+       * exit code, written as the process gave it, and code `0` is a clean exit.
+       *
+       * English: `{code, select, 0 {The process exited.} other {The process exited with code {code}.}}`
+       */
+      exitedLabel: Message
+      /**
+       * The terminal's name where `label` is empty and the host has no `aria-label`.
+       *
+       * English: `Terminal`
+       */
+      fallbackLabel: Message
+      /**
+       * The label of the button that closes the find bar.
+       *
+       * English: `Close find`
+       */
+      findCloseLabel: Message
+      /**
+       * The name of the find bar's row of buttons, read by screen readers.
+       *
+       * English: `Find controls`
+       */
+      findControlsLabel: Message
+      /**
+       * The find button's label, and the find field's name and placeholder.
+       *
+       * English: `Find`
+       */
+      findLabel: Message
+      /**
+       * The next match button's label.
+       *
+       * English: `Next match`
+       */
+      findNextLabel: Message
+      /**
+       * The previous match button's label.
+       *
+       * English: `Previous match`
+       */
+      findPreviousLabel: Message
+      /**
+       * The fullscreen button's label.
+       *
+       * English: `Fill the screen`
+       */
+      fullscreenLabel: Message
+      /**
+       * The name of the element the reader types into, which the renderer draws.
+       *
+       * English: `Terminal input`
+       */
+      inputLabel: Message
+      /**
+       * What the find bar says of its matches. `{index}` is the current match,
+       * counting from 1, and `{count}` how many there are.
+       *
+       * English: `{count, plural, =0 {No matches} one {{index} of # match} other {{index} of # matches}}`
+       */
+      matchesLabel: Message
+      /**
+       * The Restart button's label.
+       *
+       * English: `Restart`
+       */
+      restartLabel: Message
+      /**
+       * What the terminal's input describes to a screen reader. `{key}` is the key that switches Tab.
+       *
+       * English: `Press {key} to move focus with Tab.`
+       */
+      tabHintLabel: Message
+      /**
+       * What the status line says while Tab moves focus. `{key}` is the key that switches it back.
+       *
+       * English: `Tab moves focus. Press {key} to type Tab in the terminal.`
+       */
+      tabMovesFocusLabel: Message
+      /**
+       * What screen readers hear when Tab goes back to typing in the terminal.
+       *
+       * English: `Tab types in the terminal.`
+       */
+      tabTypesLabel: Message
+    }
     'helix-textarea': {
       /**
        * The accessible name of the clear button, which shows only an icon.