@fusion.dev/helix-headless 0.208.1 → 0.210.0

package/types/svelte.d.ts

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

package/types/vue.d.ts

@@ -177,6 +177,7 @@ import type {
   HelixHeadlessTabs,
   HelixHeadlessTag,
   HelixHeadlessTagGroup,
+  HelixHeadlessTerminal,
   HelixHeadlessTextarea,
   HelixHeadlessTimeInput,
   HelixHeadlessTimePicker,
@@ -240,6 +241,12 @@ import type {
   HelixShortcutEvent,
   HelixSortEvent,
   HelixSortedEvent,
+  HelixTerminalBellEvent,
+  HelixTerminalInputEvent,
+  HelixTerminalLinkEvent,
+  HelixTerminalResizeEvent,
+  HelixTerminalRestartEvent,
+  HelixTerminalTitleEvent,
   HelixToggleEvent,
   HelixTourAskEvent,
   HelixTourStatusEvent,
@@ -17293,6 +17300,164 @@ export type HelixHeadlessTagVueEvents = {
   "helix-dismiss": HelixHeadlessTagHelixDismissElementEvent;
 };
 
+/** `HelixHeadlessTerminal` component event */
+export type HelixHeadlessTerminalElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessTerminal,
+  E
+>;
+/** `helix-copy` event type */
+export type HelixHeadlessTerminalHelixCopyElementEvent =
+  HelixHeadlessTerminalElementEvent<HelixCopyEvent>;
+/** `helix-terminal-bell` event type */
+export type HelixHeadlessTerminalHelixTerminalBellElementEvent =
+  HelixHeadlessTerminalElementEvent<HelixTerminalBellEvent>;
+/** `helix-terminal-input` event type */
+export type HelixHeadlessTerminalHelixTerminalInputElementEvent =
+  HelixHeadlessTerminalElementEvent<HelixTerminalInputEvent>;
+/** `helix-terminal-link` event type */
+export type HelixHeadlessTerminalHelixTerminalLinkElementEvent =
+  HelixHeadlessTerminalElementEvent<HelixTerminalLinkEvent>;
+/** `helix-terminal-resize` event type */
+export type HelixHeadlessTerminalHelixTerminalResizeElementEvent =
+  HelixHeadlessTerminalElementEvent<HelixTerminalResizeEvent>;
+/** `helix-terminal-restart` event type */
+export type HelixHeadlessTerminalHelixTerminalRestartElementEvent =
+  HelixHeadlessTerminalElementEvent<HelixTerminalRestartEvent>;
+/** `helix-terminal-title` event type */
+export type HelixHeadlessTerminalHelixTerminalTitleElementEvent =
+  HelixHeadlessTerminalElementEvent<HelixTerminalTitleEvent>;
+
+export type HelixHeadlessTerminalVueProps = {
+  /** The clear button's label. */
+  "clear-label"?: (HelixHeadlessTerminal["clearLabel"]) | undefined;
+  /** The clear button's label. */
+  clearLabel?: (HelixHeadlessTerminal["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?: (HelixHeadlessTerminal["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?: (HelixHeadlessTerminal["controls"]) | undefined;
+  /** The name of the row of controls, read by screen readers. */
+  "controls-label"?: (HelixHeadlessTerminal["controlsLabel"]) | undefined;
+  /** The name of the row of controls, read by screen readers. */
+  controlsLabel?: (HelixHeadlessTerminal["controlsLabel"]) | undefined;
+  /** What screen readers hear after a copy. */
+  "copied-label"?: (HelixHeadlessTerminal["copiedLabel"]) | undefined;
+  /** What screen readers hear after a copy. */
+  copiedLabel?: (HelixHeadlessTerminal["copiedLabel"]) | undefined;
+  /** The copy button's label. */
+  "copy-label"?: (HelixHeadlessTerminal["copyLabel"]) | undefined;
+  /** The copy button's label. */
+  copyLabel?: (HelixHeadlessTerminal["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"?: (HelixHeadlessTerminal["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?: (HelixHeadlessTerminal["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"?: (HelixHeadlessTerminal["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?: (HelixHeadlessTerminal["exitedLabel"]) | undefined;
+  /** The terminal's name where `label` is empty and the host has no `aria-label`. */
+  "fallback-label"?: (HelixHeadlessTerminal["fallbackLabel"]) | undefined;
+  /** The terminal's name where `label` is empty and the host has no `aria-label`. */
+  fallbackLabel?: (HelixHeadlessTerminal["fallbackLabel"]) | undefined;
+  /** The label of the button that closes the find bar. */
+  "find-close-label"?: (HelixHeadlessTerminal["findCloseLabel"]) | undefined;
+  /** The label of the button that closes the find bar. */
+  findCloseLabel?: (HelixHeadlessTerminal["findCloseLabel"]) | undefined;
+  /** The name of the find bar's row of buttons, read by screen readers. */
+  "find-controls-label"?: (HelixHeadlessTerminal["findControlsLabel"]) | undefined;
+  /** The name of the find bar's row of buttons, read by screen readers. */
+  findControlsLabel?: (HelixHeadlessTerminal["findControlsLabel"]) | undefined;
+  /** The find button's label, and the find field's name and placeholder. */
+  "find-label"?: (HelixHeadlessTerminal["findLabel"]) | undefined;
+  /** The find button's label, and the find field's name and placeholder. */
+  findLabel?: (HelixHeadlessTerminal["findLabel"]) | undefined;
+  /** The next match button's label. */
+  "find-next-label"?: (HelixHeadlessTerminal["findNextLabel"]) | undefined;
+  /** The next match button's label. */
+  findNextLabel?: (HelixHeadlessTerminal["findNextLabel"]) | undefined;
+  /** The previous match button's label. */
+  "find-previous-label"?: (HelixHeadlessTerminal["findPreviousLabel"]) | undefined;
+  /** The previous match button's label. */
+  findPreviousLabel?: (HelixHeadlessTerminal["findPreviousLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  "fullscreen-label"?: (HelixHeadlessTerminal["fullscreenLabel"]) | undefined;
+  /** The fullscreen button's label. */
+  fullscreenLabel?: (HelixHeadlessTerminal["fullscreenLabel"]) | undefined;
+  /** The name of the element the reader types into, which the renderer draws. */
+  "input-label"?: (HelixHeadlessTerminal["inputLabel"]) | undefined;
+  /** The name of the element the reader types into, which the renderer draws. */
+  inputLabel?: (HelixHeadlessTerminal["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?: (HelixHeadlessTerminal["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"?: (HelixHeadlessTerminal["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?: (HelixHeadlessTerminal["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?: (HelixHeadlessTerminal["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?: (HelixHeadlessTerminal["readOnly"]) | undefined;
+  /** The Restart button's label. */
+  "restart-label"?: (HelixHeadlessTerminal["restartLabel"]) | undefined;
+  /** The Restart button's label. */
+  restartLabel?: (HelixHeadlessTerminal["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?: (HelixHeadlessTerminal["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"?: (HelixHeadlessTerminal["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?: (HelixHeadlessTerminal["screenReaderMode"]) | undefined;
+  /** What the terminal's input describes to a screen reader. `{key}` is the key that switches Tab. */
+  "tab-hint-label"?: (HelixHeadlessTerminal["tabHintLabel"]) | undefined;
+  /** What the terminal's input describes to a screen reader. `{key}` is the key that switches Tab. */
+  tabHintLabel?: (HelixHeadlessTerminal["tabHintLabel"]) | undefined;
+  /** What the status line says while Tab moves focus. `{key}` is the key that switches it back. */
+  "tab-moves-focus-label"?: (HelixHeadlessTerminal["tabMovesFocusLabel"]) | undefined;
+  /** What the status line says while Tab moves focus. `{key}` is the key that switches it back. */
+  tabMovesFocusLabel?: (HelixHeadlessTerminal["tabMovesFocusLabel"]) | undefined;
+  /** What screen readers hear when Tab goes back to typing in the terminal. */
+  "tab-types-label"?: (HelixHeadlessTerminal["tabTypesLabel"]) | undefined;
+  /** What screen readers hear when Tab goes back to typing in the terminal. */
+  tabTypesLabel?: (HelixHeadlessTerminal["tabTypesLabel"]) | undefined;
+};
+
+export type HelixHeadlessTerminalVueEvents = {
+  /** The copy control or its key put the selection on the clipboard. */
+  "helix-copy": HelixHeadlessTerminalHelixCopyElementEvent;
+  /** The program rang the bell. The frame flashes once. */
+  "helix-terminal-bell": HelixHeadlessTerminalHelixTerminalBellElementEvent;
+  /** 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": HelixHeadlessTerminalHelixTerminalInputElementEvent;
+  /** 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": HelixHeadlessTerminalHelixTerminalLinkElementEvent;
+  /** The grid changed size, with `columns`, `rows`, `width`, and `height`. Resize the process's pseudo-terminal to match. */
+  "helix-terminal-resize": HelixHeadlessTerminalHelixTerminalResizeElementEvent;
+  /** The Restart button was pressed after the process exited. Start a new process and clear `exit-code`. */
+  "helix-terminal-restart": HelixHeadlessTerminalHelixTerminalRestartElementEvent;
+  /** The program set its title, with `title`. The frame keeps its own `label`. */
+  "helix-terminal-title": HelixHeadlessTerminalHelixTerminalTitleElementEvent;
+};
+
 /** `HelixHeadlessTextarea` component event */
 export type HelixHeadlessTextareaElementEvent<E = Event> = TypedEvent<
   HelixHeadlessTextarea,
@@ -20606,6 +20771,54 @@ export type CustomCssProperties = {
   "--table-template"?: (string) | undefined;
   /** Written by the row on its `expand` cell: how deep the row sits, from 1. Do not set it. */
   "--table-row-level"?: (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;
   /** How long this message stays, in milliseconds, for a progress hint. */
   "--toast-duration"?: (string) | undefined;
   /** How far a swipe has moved the message across, in pixels, toward the right. */
@@ -20736,7 +20949,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasNodeVueProps,
     HelixHeadlessCanvasNodeVueEvents
   >;
-  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop, and the board itself leaves the tab   order while a card can hold it. Escape on a card goes back out to the   board, where the arrow keys pan it. - Plus and minus zoom the board, on the board and on a card or a   connection. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. - Control or Command with V pastes a JSON Canvas document: the board adds   its cards and connections, a step down and to the right of any card they   would sit on, and selects them. It asks with 'helix-before-paste' first.   A page that renders its cards from its own state cancels it and adds the   detail's document to that state, through 'fromJsonCanvas'. 'paste()' does   the same from a script. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  **'arrange()' moves every card so that none overlaps another**, in layers that follow the arrows, or in a grid on a board with no connections. The cards glide for as long as the board's own transition, and 'undo()' puts them back.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  **'edgeRoute' draws the connections' lines your own way**: a function from where a line leaves and arrives, and the sides it does, to its SVG path, for a route such as one that bends around the cards between. What it returns is the line drawn, the line pressed and focused, and the one an arrowhead sits at the end of. Nothing back draws the board's own.  Add 'minimap' to 'controls' for a picture of the whole board in a corner: each card as a box, and a frame around what is on screen. A press or a drag on it brings that place to the middle of the view. It is for a pointer, and a screen reader skips it: the arrow keys and 'show()' reach every card.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
+  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop, and the board itself leaves the tab   order while a card can hold it. Escape on a card goes back out to the   board, where the arrow keys pan it. - Plus and minus zoom the board, on the board and on a card or a   connection. - The pan and zoom buttons are a toolbar and one tab stop. The arrow keys   move between them by where they sit, Right from the up arrow to zoom in,   and Enter or Space presses one. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. - Control or Command with V pastes a JSON Canvas document: the board adds   its cards and connections, a step down and to the right of any card they   would sit on, and selects them. It asks with 'helix-before-paste' first.   A page that renders its cards from its own state cancels it and adds the   detail's document to that state, through 'fromJsonCanvas'. 'paste()' does   the same from a script. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  **'arrange()' moves every card so that none overlaps another**, in layers that follow the arrows, or in a grid on a board with no connections. The cards glide for as long as the board's own transition, and 'undo()' puts them back.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  **'edgeRoute' draws the connections' lines your own way**: a function from where a line leaves and arrives, and the sides it does, to its SVG path, for a route such as one that bends around the cards between. What it returns is the line drawn, the line pressed and focused, and the one an arrowhead sits at the end of. Nothing back draws the board's own.  Add 'minimap' to 'controls' for a picture of the whole board in a corner: each card as a box, and a frame around what is on screen. A press or a drag on it brings that place to the middle of the view. It is for a pointer, and a screen reader skips it: the arrow keys and 'show()' reach every card.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
   "helix-headless-canvas": DefineCustomElement<
     HelixHeadlessCanvas,
     HelixHeadlessCanvasVueProps,
@@ -20940,7 +21153,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFormatDateVueProps,
     HelixHeadlessFormatDateVueEvents
   >;
-  /** The frame draws no graph itself. A force layout of thousands of notes is physics and WebGL, which a renderer such as Sigma.js does, and an architecture diagram is drawn by 'isometricDriver' from '@fusion.dev/helix-graph/isometric'. Put the drawing's box in the frame, and 'connectGraph' from '@fusion.dev/helix-graph' draws 'nodes' and 'links' in it and keeps it in step with the frame.  What the frame adds is what a drawing of a graph cannot do: a list of every note beside it, which is the graph for a screen reader and a quick way to find a note for anyone. The selected note comes first, then the notes it links to and from, then every other note, and the search field narrows it. Selecting a note in the list or in the drawing is the same selection.  Set 'depth' to show the local graph: only the notes within that many links of the selected one.  The search field is a combobox over the list. Down and Up move through the notes while the focus stays in the field, and Enter selects one.  **Walk the links with Alt and the arrow keys**, in the list or in the search field once its keys are on a note. The note the keys are on is marked in the drawing.  | Key | What it does | |---|---| | Alt+Right | Follows a link, to the first note the one the keys are on links to or from. | | Alt+Down, Alt+Up | Moves to the next or the previous note linked to the one the step came from, wrapping. | | Alt+Left | Goes back along the links walked. |  Right and Left swap on a right-to-left page. Each step says the note, how it stands to the note it came from, and its place among that note's links, such as "Hiring plan. Linked from Roadmap. 2 of 3". Enter selects the note.  Set 'legend' to name the groups over the drawing, each a button that shows or hides its notes. 'hiddenGroups' holds the groups turned off, and the list holds only what the drawing shows. The legend is a toolbar and one tab stop: the arrow keys, Home, End and a group's first letters move between its buttons, and Space or Enter presses one.  'nodes' and 'links' are properties, never markup: a graph of ten thousand notes as ten thousand elements would cost what the renderer exists to save. The list draws only the rows in view.  The list scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root. You still need to set a block size on the list, or it grows to hold every row. */
+  /** The frame draws no graph itself. A force layout of thousands of notes is physics and WebGL, which a renderer such as Sigma.js does, and an architecture diagram is drawn by 'isometricDriver' from '@fusion.dev/helix-graph/isometric'. Put the drawing's box in the frame, and 'connectGraph' from '@fusion.dev/helix-graph' draws 'nodes' and 'links' in it and keeps it in step with the frame.  What the frame adds is what a drawing of a graph cannot do: a list of every note beside it, which is the graph for a screen reader and a quick way to find a note for anyone. The selected note comes first, then the notes it links to and from, then every other note, and the search field narrows it. Selecting a note in the list or in the drawing is the same selection.  Set 'depth' to show the local graph: only the notes within that many links of the selected one.  The search field is a combobox over the list. Down and Up move through the notes while the focus stays in the field, and Enter selects one.  **Walk the links with Alt and the arrow keys**, in the list or in the search field once its keys are on a note. The note the keys are on is marked in the drawing.  | Key | What it does | |---|---| | Alt+Right | Follows a link, to the first note the one the keys are on links to or from. | | Alt+Down, Alt+Up | Moves to the next or the previous note linked to the one the step came from, wrapping. | | Alt+Left | Goes back along the links walked. |  Right and Left swap on a right-to-left page. Each step says the note, how it stands to the note it came from, and its place among that note's links, such as "Hiring plan. Linked from Roadmap. 2 of 3". Enter selects the note.  Set 'legend' to name the groups over the drawing, each a button that shows or hides its notes. 'hiddenGroups' holds the groups turned off, and the list holds only what the drawing shows. The legend is a toolbar and one tab stop: the arrow keys, Home, End and a group's first letters move between its buttons, and Space or Enter presses one. The pan and zoom buttons are a toolbar and one tab stop too, the arrow keys moving between them by where they sit on screen.  'nodes' and 'links' are properties, never markup: a graph of ten thousand notes as ten thousand elements would cost what the renderer exists to save. The list draws only the rows in view.  The list scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root. You still need to set a block size on the list, or it grows to hold every row. */
   "helix-headless-graph": DefineCustomElement<
     HelixHeadlessGraph,
     HelixHeadlessGraphVueProps,
@@ -21096,7 +21309,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMapRasterVueProps,
     HelixHeadlessMapRasterVueEvents
   >;
-  /** Wraps a map drawn by MapLibre, Leaflet, or another renderer. The frame adds a name for the map, a column of controls, and a strip for the map credit. Helix does not draw the map itself.  The controls are one column, and 'controls' names which ones: 'fullscreen', 'layers', 'tilt', 'zoom', and 'compass', top to bottom. 'zoom compass fullscreen' by default. The compass's needle points north as the map turns, and pressing it turns the map to face north.  Add 'pan' and 'rotate' for buttons around the compass that move and turn the map. Dragging is otherwise the only way a pointer moves the map, so add them where the map has to be usable without dragging, as WCAG 2.2 asks at level AA. The arrow keys pan the map and Shift with Left or Right turns it either way.  The pan and zoom buttons and the arrow keys send 'helix-map-pan' and 'helix-map-zoom'. Move your map in response, or connect it with 'connectMap' from '@fusion.dev/helix-map', which does this for you.  Add 'tilt' to 'controls' for the 3D button, which a map with 3D buildings or terrain needs. It is a toggle. Pressed, it tilts the map 50 degrees, and 'connectMap' raises the buildings and the ground. Pressed again, it makes the map flat, and lays them flat too. Shift with Up or Down tilts the map in steps. Turning and tilting send 'helix-map-rotate' and 'helix-map-tilt', which 'connectMap' answers on MapLibre. Leaflet draws maps flat and does not rotate.  Add 'layers' to 'controls' for a layers button. It opens a menu with a tile for each layer, which sets the layer's 'hidden' attribute. Layers with the same 'group', such as a route and its dotted legs, share one tile. A tile sends 'helix-before-toggle' from the layer first, so you can store the choice or refuse it, and 'helix-toggle' from it once 'hidden' holds the choice. Escape closes the menu and returns focus to its button, and the menu closes when focus moves on from it or a press lands outside the map.  Imagery, a 'helix-map-raster' with 'ground', is a map type and not a tile. The menu opens with a card for each type, Standard, Hybrid, and Satellite, with a picture of the map in it, and 'map-type' says which is chosen. Standard hides the imagery, Hybrid draws it under the roads and names, and Satellite draws it alone. Choosing one sends 'helix-before-change' with its name, and 'change' once 'map-type' holds it. 'connectMap' does not draw a hidden layer, so a layer you write with 'hidden' starts turned off.  Markers, routes, areas, live positions, and points layers go inside the frame as child elements. */
+  /** Wraps a map drawn by MapLibre, Leaflet, or another renderer. The frame adds a name for the map, a column of controls, and a strip for the map credit. Helix does not draw the map itself.  The controls are one column, and 'controls' names which ones: 'fullscreen', 'layers', 'tilt', 'zoom', and 'compass', top to bottom. 'zoom compass fullscreen' by default. The compass's needle points north as the map turns, and pressing it turns the map to face north.  Add 'pan' and 'rotate' for buttons around the compass that move and turn the map. Dragging is otherwise the only way a pointer moves the map, so add them where the map has to be usable without dragging, as WCAG 2.2 asks at level AA. The arrow keys pan the map and Shift with Left or Right turns it either way. The buttons are a toolbar and one tab stop: on them, the arrow keys move between the buttons by where they sit, and Shift with an arrow still turns or tilts the map.  The pan and zoom buttons and the arrow keys send 'helix-map-pan' and 'helix-map-zoom'. Move your map in response, or connect it with 'connectMap' from '@fusion.dev/helix-map', which does this for you.  Add 'tilt' to 'controls' for the 3D button, which a map with 3D buildings or terrain needs. It is a toggle. Pressed, it tilts the map 50 degrees, and 'connectMap' raises the buildings and the ground. Pressed again, it makes the map flat, and lays them flat too. Shift with Up or Down tilts the map in steps. Turning and tilting send 'helix-map-rotate' and 'helix-map-tilt', which 'connectMap' answers on MapLibre. Leaflet draws maps flat and does not rotate.  Add 'layers' to 'controls' for a layers button. It opens a menu with a tile for each layer, which sets the layer's 'hidden' attribute. Layers with the same 'group', such as a route and its dotted legs, share one tile. A tile sends 'helix-before-toggle' from the layer first, so you can store the choice or refuse it, and 'helix-toggle' from it once 'hidden' holds the choice. Escape closes the menu and returns focus to its button, and the menu closes when focus moves on from it or a press lands outside the map.  Imagery, a 'helix-map-raster' with 'ground', is a map type and not a tile. The menu opens with a card for each type, Standard, Hybrid, and Satellite, with a picture of the map in it, and 'map-type' says which is chosen. Standard hides the imagery, Hybrid draws it under the roads and names, and Satellite draws it alone. Choosing one sends 'helix-before-change' with its name, and 'change' once 'map-type' holds it. 'connectMap' does not draw a hidden layer, so a layer you write with 'hidden' starts turned off.  Markers, routes, areas, live positions, and points layers go inside the frame as child elements. */
   "helix-headless-map": DefineCustomElement<
     HelixHeadlessMap,
     HelixHeadlessMapVueProps,
@@ -21462,6 +21675,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTagVueProps,
     HelixHeadlessTagVueEvents
   >;
+  /** Wraps a terminal drawn by xterm.js or another emulator. The frame adds a header with the terminal's name and its controls, a find bar, and a status line. 'connectTerminal' in '@fusion.dev/helix-terminal' connects it to the emulator and draws the terminal in the colors the '--terminal-*' properties set, which the styled tier sets from your theme. Helix does not start a process: you connect the stream. Write the program's output with 'write()', send what the reader types to the process from 'helix-terminal-input', and resize the process's pseudo-terminal from 'helix-terminal-resize'.  Output written before a renderer is connected is held and written first, so the process can start before the emulator loads. 'write()' resolves once the renderer has parsed the output, which is how a page pauses a process that writes faster than the terminal draws.  The controls are a row in the header, and 'controls' names which ones: 'find', 'copy', 'clear', and 'fullscreen'. 'find clear' by default. A control the renderer cannot answer is left out once it is connected. Set 'exit-code' when the process exits: the frame says how it exited, stops sending input, and shows a Restart button that sends 'helix-terminal-restart'.  **Keyboard.** Every key goes to the program, Tab, Shift+Tab, and Escape included, except these:  - Control+Shift+F, or Command+F on a Mac, opens the find bar. Enter and   Shift+Enter move between the matches, and Escape closes the bar and   returns focus to the terminal. - Control+Shift+C copies the selection. On a Mac, Command+C does. - Control+M, or Control+Shift+M on a Mac, switches Tab between typing in the   terminal and moving focus out of it. The status line says when Tab moves   focus, and the terminal's input describes the key to a screen reader.  **Screen readers.** A terminal draws its grid as a picture of text, so a screen reader reads nothing in it by default. Set 'screen-reader-mode' to have the renderer keep the grid as lines a screen reader can move through and announce new output as it arrives, which xterm.js calls screen reader mode. It costs time on every write, so it is off by default: connect it to a setting your reader can turn on. */
+  "helix-headless-terminal": DefineCustomElement<
+    HelixHeadlessTerminal,
+    HelixHeadlessTerminalVueProps,
+    HelixHeadlessTerminalVueEvents
+  >;
   /** Renders a '<textarea>', so the caret, selection, spellcheck, resize handle, and phone keyboard come from the platform. It is in the server markup, so the field works before any script loads.  It is a separate element from 'Input' because Enter inserts a line break here. In a single-line field, Enter submits the form.  'rows' sets the starting height, and 'auto-grow' makes the field grow with its content. You can use both: 'rows' sets where an empty field begins. 'max-rows' stops the growth at that many lines, and the field scrolls past them.  'clearable' draws a button that empties the field while it holds text, and sends 'helix-clear', as 'Input' does. 'validate' adds your own rule, run on every change once the browser finds nothing wrong, as React Aria's TextField 'validate' does.  **Keyboard.** The field's own keys are the platform's, and Enter starts a new line. The clear button under 'clearable' is a tab stop of its own after the field.  The inner textarea is named by 'label', or by a host 'aria-label', 'aria-labelledby' or '<label for>', and is described by the hint and the message, with 'aria-invalid' while a message shows. The clear button is named 'clear-label'. */
   "helix-headless-textarea": DefineCustomElement<
     HelixHeadlessTextarea,
@@ -21522,7 +21741,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessToggleVueProps,
     HelixHeadlessToggleVueEvents
   >;
-  /** A toolbar holds a mix of controls, such as buttons, toggles, and menus. A button group holds one kind, so the two are separate components.  The toolbar is one tab stop, and the arrow keys move between its controls, so three toolbars take three presses of Tab to pass. Any element the browser can focus counts as a control, including your own elements. A child that takes no focus, such as a divider, is skipped. A menu is reached at its trigger.  A Divider in the toolbar is a separator across the toolbar's axis, as React Aria's is: vertical in a horizontal toolbar and horizontal in a vertical one, without an 'orientation' of its own.  Controls inside a plain wrapper, such as a 'Button Group', are each a stop of the toolbar's own, as React Aria's toolbar flattens a group: the arrows walk through the group's buttons and on past it, and the group takes no tab stop of its own.  The arrows wrap from the last control to the first. Set 'stop-at-ends' to keep them at the ends, as Radix's 'loop' set to false does.  **Keyboard.** Tab enters the toolbar on the control that last had focus, the first control at the start, and the next Tab leaves it.  | Key | What it does | |---|---| | Right | Moves to the next control in a horizontal toolbar, from the last back to the first. | | Left | Moves to the control before in a horizontal toolbar, from the first round to the last. | | Down, Up | The same in a vertical toolbar. | | Home, End | Moves to the first or the last control. |  Left and Right swap on a right-to-left page, where the first control is on the right. The arrows across the toolbar's axis are left to the control that has focus, so a radio-style toggle group or a select answers them itself. The toolbar is 'role="toolbar"' with 'aria-orientation', named by 'label'.  The stop moves through a control's own 'focusable' property where it has one, as Button, Select and Toggle Group do. A control without one has 'tabindex' written on the element that takes focus: a native element itself, or the control inside a custom element's open shadow root, so the host keeps the markup you rendered. Only a custom element whose shadow root is closed takes it on the host.  A toggle group of pressed buttons, 'selection-mode="multiple"', is walked through the same way, each toggle a stop on the toolbar's axis, as React Aria's toolbar walks its toggle buttons. Another nested composite, such as a radio-style toggle group, is one stop on the toolbar's axis: the toolbar's arrows move past it, and the arrows across the toolbar move inside it. A composite with a 'focusable' property, as Toggle Group has, gives up its own tab stop while the toolbar's is elsewhere, so Tab stops once in the toolbar. A composite without one keeps its own tab stop.  A toolbar inside another toolbar, a Helix one or the page's own 'role="toolbar"', is a 'group' of the outer one, as React Aria's is: the outer toolbar's arrows walk through its controls and on past them, and it takes no keys and no tab stop of its own. A server renders it as a toolbar, having no parent to read, until it upgrades. */
+  /** A toolbar holds a mix of controls, such as buttons, toggles, and menus. A button group holds one kind, so the two are separate components.  The toolbar is one tab stop, and the arrow keys move between its controls, so three toolbars take three presses of Tab to pass. Any element the browser can focus counts as a control, including your own elements. A child that takes no focus, such as a divider, is skipped. A menu is reached at its trigger.  A Divider in the toolbar is a separator across the toolbar's axis, as React Aria's is: vertical in a horizontal toolbar and horizontal in a vertical one, without an 'orientation' of its own.  Controls inside a plain wrapper, such as a 'Button Group', are each a stop of the toolbar's own, as React Aria's toolbar flattens a group: the arrows walk through the group's buttons and on past it, and the group takes no tab stop of its own.  The arrows wrap from the last control to the first. Set 'stop-at-ends' to keep them at the ends, as Radix's 'loop' set to false does.  **Keyboard.** Tab enters the toolbar on the control that last had focus, the first control at the start, and the next Tab leaves it.  | Key | What it does | |---|---| | Right | Moves to the next control in a horizontal toolbar, from the last back to the first. | | Left | Moves to the control before in a horizontal toolbar, from the first round to the last. | | Down, Up | The same in a vertical toolbar. | | Home, End | Moves to the first or the last control. |  Left and Right swap on a right-to-left page, where the first control is on the right. The arrows across the toolbar's axis are left to the control that has focus, so a radio-style toggle group or a select answers them itself. The toolbar is 'role="toolbar"' with 'aria-orientation', named by 'label'.  The stop moves through a control's own 'focusable' property where it has one, as Button, Select and Toggle Group do. A control without one has 'tabindex' written on the element that takes focus: a native element itself, or the control inside a custom element's open shadow root, so the host keeps the markup you rendered. Only a custom element whose shadow root is closed takes it on the host.  A toggle group of pressed buttons, 'selection-mode="multiple"', is walked through the same way, each toggle a stop on the toolbar's axis, as React Aria's toolbar walks its toggle buttons. Another nested composite, such as a radio-style toggle group, is one stop on the toolbar's axis: the toolbar's arrows move past it, and the arrows across the toolbar move inside it. A composite with a 'focusable' property, as Toggle Group has, gives up its own tab stop while the toolbar's is elsewhere, so Tab stops once in the toolbar. A composite without one keeps its own tab stop.  A '<slot>' in the toolbar counts as the controls assigned to it, for a toolbar a component draws in its own shadow root with your controls passed into it: they share its tab stop and its arrows with the component's own.  A toolbar inside another toolbar, a Helix one or the page's own 'role="toolbar"', is a 'group' of the outer one, as React Aria's is: the outer toolbar's arrows walk through its controls and on past them, and it takes no keys and no tab stop of its own. A server renders it as a toolbar, having no parent to read, until it upgrades. */
   "helix-headless-toolbar": DefineCustomElement<
     HelixHeadlessToolbar,
     HelixHeadlessToolbarVueProps,

package/types/words.d.ts

@@ -3885,6 +3885,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.