@fusion.dev/helix 0.204.1 → 0.205.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.204.1",
+  "version": "0.205.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -60,14 +60,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.204.1",
-    "@fusion.dev/helix-headless": "0.204.1",
-    "@fusion.dev/helix-styles": "0.204.1",
+    "@fusion.dev/helix-core": "0.205.0",
+    "@fusion.dev/helix-headless": "0.205.0",
+    "@fusion.dev/helix-styles": "0.205.0",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.204.1",
-    "@fusion.dev/helix-testing": "0.204.1",
+    "@fusion.dev/helix-cem": "0.205.0",
+    "@fusion.dev/helix-testing": "0.205.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/skills/helix/SKILL.md

@@ -2,12 +2,12 @@
 name: helix
 description: Writes and checks pages built with Helix, the web components in @fusion.dev/helix. Use when building or reviewing any user interface in a project that installs @fusion.dev/helix, and when code has helix- elements, Helix tokens, or the helix command line.
 metadata:
-  version: "0.204.1"
+  version: "0.205.0"
 ---
 
 # Helix
 
-This guide is for @fusion.dev/helix 0.204.1, the version installed beside it.
+This guide is for @fusion.dev/helix 0.205.0, the version installed beside it.
 
 ## Using Helix with an agent
 

package/types/jsx.d.ts

@@ -22518,6 +22518,18 @@ export type HelixLogHelixSelectedElementEvent =
   HelixLogElementEvent<HelixSelectedEvent>;
 
 export type HelixLogProps = {
+  /** How the log is set apart from what is around it.
+
+- `outlined`, the resting look, is a box with an edge and a fill of its
+  own, which scrolls after `--log-max-block-size`.
+- `plain` has no edge, no fill, no inset and no height of its own: the
+  lines start where the text around them does and the log grows with
+  them. For a log inside something that already frames it, such as an
+  agent's work in a chat turn's `work` slot.
+
+Both are writable, so a page can say which it means rather than relying
+on the absence of an attribute. */
+  separation?: (HelixLog["separation"]) | undefined;
   /** 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. */
@@ -22610,6 +22622,11 @@ 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;
+  /** Whether the log says nothing to a screen reader as lines arrive, steps
+finish, or the run ends. For a log inside something that speaks for it,
+such as an agent's work in a chat turn, which the turn announces once it
+settles. */
+  quiet?: (HelixLog["quiet"]) | 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. */
@@ -22666,6 +22683,18 @@ reading the last one. */
 };
 
 export type HelixLogSolidJsProps = {
+  /** How the log is set apart from what is around it.
+
+- `outlined`, the resting look, is a box with an edge and a fill of its
+  own, which scrolls after `--log-max-block-size`.
+- `plain` has no edge, no fill, no inset and no height of its own: the
+  lines start where the text around them does and the log grows with
+  them. For a log inside something that already frames it, such as an
+  agent's work in a chat turn's `work` slot.
+
+Both are writable, so a page can say which it means rather than relying
+on the absence of an attribute. */
+  "prop:separation"?: (HelixLog["separation"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "attr:empty-text"?: (HelixLog["emptyText"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
@@ -22758,6 +22787,11 @@ true would write the attribute on upgrade. */
   "prop:pinned"?: (HelixLog["pinned"]) | undefined;
   /** Text a line has to hold to be shown, ignoring case. Empty shows every line. */
   "prop:query"?: (HelixLog["query"]) | undefined;
+  /** Whether the log says nothing to a screen reader as lines arrive, steps
+finish, or the run ends. For a log inside something that speaks for it,
+such as an agent's work in a chat turn, which the turn announces once it
+settles. */
+  "prop:quiet"?: (HelixLog["quiet"]) | undefined;
   /** The words on the button that returns to the newest line, where `resume` is empty. */
   "attr:resume-label"?: (HelixLog["resumeLabel"]) | undefined;
   /** The words on the button that returns to the newest line, where `resume` is empty. */
@@ -49334,6 +49368,7 @@ export type CustomElements = {
    * - `avatar`: The author's avatar.
    * - `indicator`: The indicator shown before the first token arrives. Replaces the three dots.
    * - `sources`: The turn's sources, such as citations, documents, or a retrieved page.
+   * - `work`: What an agent did to arrive at the turn, such as a `Log` of its steps, above the content. A screen reader hears the turn without it.
    *
    * ## CSS Custom Properties
    *
@@ -49366,6 +49401,7 @@ export type CustomElements = {
    * - `sources`: The turn's sources, under it and outside the bubble.
    * - `state`: The text that names the turn's state, when there is one to show.
    * - `time`: The turn's time.
+   * - `work`: The box around the `work` slot, above the content.
    *
    * ## CSS States
    *
@@ -49577,6 +49613,7 @@ export type CustomElements = {
    * - `message-sources`: The sources of a turn from `turns`.
    * - `message-state`: The state text of a turn from `turns`, when there is one to show.
    * - `message-time`: The time of a turn from `turns`.
+   * - `message-work`: The box around a turn's `work`, for a turn from `turns`, which has none.
    * - `resume`: The control shown while the user is scrolled away from the bottom.
    * - `resume-button`: The button the `resume` region shows when nothing is slotted into it.
    * - `resume-mark`: The arrow on the default `resume-button`.
@@ -59829,6 +59866,7 @@ export type CustomElements = {
    * - `line`: The row the number, the time, and the text sit in.
    * - `line-debug`: The row of a line at `debug`.
    * - `line-error`: The row of a line at `error`.
+   * - `line-grouped`: The row of a line that belongs to a step, which the styled tier insets under the step's heading where there is no number.
    * - `line-marked`: The row of a line `mark-lines` names on the log.
    * - `line-selected`: The row of a line in the log's selection.
    * - `line-warn`: The row of a line at `warn`.
@@ -59872,6 +59910,17 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `separation`: How the log is set apart from what is around it.
+   *
+   * - `outlined`, the resting look, is a box with an edge and a fill of its
+   *   own, which scrolls after `--log-max-block-size`.
+   * - `plain` has no edge, no fill, no inset and no height of its own: the
+   *   lines start where the text around them does and the log grows with
+   *   them. For a log inside something that already frames it, such as an
+   *   agent's work in a chat turn's `work` slot.
+   *
+   * Both are writable, so a page can say which it means rather than relying
+   * on the absence of an attribute.
    * - `empty-text`/`emptyText`: The text shown and announced when there are no rows and none are loading.
    * - `loading`: Whether the rows are still loading.
    *
@@ -59913,6 +59962,10 @@ export type CustomElements = {
    * reflected, for the reason `Chat` gives at its own `pinned`: a default of
    * true would write the attribute on upgrade.
    * - `query`: Text a line has to hold to be shown, ignoring case. Empty shows every line.
+   * - `quiet`: Whether the log says nothing to a screen reader as lines arrive, steps
+   * finish, or the run ends. For a log inside something that speaks for it,
+   * such as an agent's work in a chat turn, which the turn announces once it
+   * settles.
    * - `resume-label`/`resumeLabel`: The words on the button that returns to the newest line, where `resume` is empty.
    * - `selectable`: Whether pressing a line's number selects the line, and pressing another
    * with Shift selects every line between them. Each number is then a
@@ -60052,6 +60105,7 @@ export type CustomElements = {
    * - `line`: The row of a line drawn from data.
    * - `line-debug`: The row of a line drawn from data at `debug`.
    * - `line-error`: The row of a line drawn from data at `error`.
+   * - `line-grouped`: The row of a line drawn from data that belongs to a step.
    * - `line-marked`: The row of a line drawn from data that `mark-lines` names.
    * - `line-match`: Text in a line drawn from data that matches `query`.
    * - `line-number`: The number of a line drawn from data.
@@ -81357,6 +81411,7 @@ export type CustomElementsSolidJs = {
    * - `avatar`: The author's avatar.
    * - `indicator`: The indicator shown before the first token arrives. Replaces the three dots.
    * - `sources`: The turn's sources, such as citations, documents, or a retrieved page.
+   * - `work`: What an agent did to arrive at the turn, such as a `Log` of its steps, above the content. A screen reader hears the turn without it.
    *
    * ## CSS Custom Properties
    *
@@ -81389,6 +81444,7 @@ export type CustomElementsSolidJs = {
    * - `sources`: The turn's sources, under it and outside the bubble.
    * - `state`: The text that names the turn's state, when there is one to show.
    * - `time`: The turn's time.
+   * - `work`: The box around the `work` slot, above the content.
    *
    * ## CSS States
    *
@@ -81603,6 +81659,7 @@ export type CustomElementsSolidJs = {
    * - `message-sources`: The sources of a turn from `turns`.
    * - `message-state`: The state text of a turn from `turns`, when there is one to show.
    * - `message-time`: The time of a turn from `turns`.
+   * - `message-work`: The box around a turn's `work`, for a turn from `turns`, which has none.
    * - `resume`: The control shown while the user is scrolled away from the bottom.
    * - `resume-button`: The button the `resume` region shows when nothing is slotted into it.
    * - `resume-mark`: The arrow on the default `resume-button`.
@@ -91995,6 +92052,7 @@ export type CustomElementsSolidJs = {
    * - `line`: The row the number, the time, and the text sit in.
    * - `line-debug`: The row of a line at `debug`.
    * - `line-error`: The row of a line at `error`.
+   * - `line-grouped`: The row of a line that belongs to a step, which the styled tier insets under the step's heading where there is no number.
    * - `line-marked`: The row of a line `mark-lines` names on the log.
    * - `line-selected`: The row of a line in the log's selection.
    * - `line-warn`: The row of a line at `warn`.
@@ -92041,6 +92099,17 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `separation`: How the log is set apart from what is around it.
+   *
+   * - `outlined`, the resting look, is a box with an edge and a fill of its
+   *   own, which scrolls after `--log-max-block-size`.
+   * - `plain` has no edge, no fill, no inset and no height of its own: the
+   *   lines start where the text around them does and the log grows with
+   *   them. For a log inside something that already frames it, such as an
+   *   agent's work in a chat turn's `work` slot.
+   *
+   * Both are writable, so a page can say which it means rather than relying
+   * on the absence of an attribute.
    * - `empty-text`/`emptyText`: The text shown and announced when there are no rows and none are loading.
    * - `loading`: Whether the rows are still loading.
    *
@@ -92082,6 +92151,10 @@ export type CustomElementsSolidJs = {
    * reflected, for the reason `Chat` gives at its own `pinned`: a default of
    * true would write the attribute on upgrade.
    * - `query`: Text a line has to hold to be shown, ignoring case. Empty shows every line.
+   * - `quiet`: Whether the log says nothing to a screen reader as lines arrive, steps
+   * finish, or the run ends. For a log inside something that speaks for it,
+   * such as an agent's work in a chat turn, which the turn announces once it
+   * settles.
    * - `resume-label`/`resumeLabel`: The words on the button that returns to the newest line, where `resume` is empty.
    * - `selectable`: Whether pressing a line's number selects the line, and pressing another
    * with Shift selects every line between them. Each number is then a
@@ -92221,6 +92294,7 @@ export type CustomElementsSolidJs = {
    * - `line`: The row of a line drawn from data.
    * - `line-debug`: The row of a line drawn from data at `debug`.
    * - `line-error`: The row of a line drawn from data at `error`.
+   * - `line-grouped`: The row of a line drawn from data that belongs to a step.
    * - `line-marked`: The row of a line drawn from data that `mark-lines` names.
    * - `line-match`: Text in a line drawn from data that matches `query`.
    * - `line-number`: The number of a line drawn from data.

package/types/vue.d.ts

@@ -11540,6 +11540,18 @@ export type HelixLogHelixSelectedElementEvent =
   HelixLogElementEvent<HelixSelectedEvent>;
 
 export type HelixLogVueProps = {
+  /** How the log is set apart from what is around it.
+
+- `outlined`, the resting look, is a box with an edge and a fill of its
+  own, which scrolls after `--log-max-block-size`.
+- `plain` has no edge, no fill, no inset and no height of its own: the
+  lines start where the text around them does and the log grows with
+  them. For a log inside something that already frames it, such as an
+  agent's work in a chat turn's `work` slot.
+
+Both are writable, so a page can say which it means rather than relying
+on the absence of an attribute. */
+  separation?: (HelixLog["separation"]) | undefined;
   /** 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. */
@@ -11632,6 +11644,11 @@ 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;
+  /** Whether the log says nothing to a screen reader as lines arrive, steps
+finish, or the run ends. For a log inside something that speaks for it,
+such as an agent's work in a chat turn, which the turn announces once it
+settles. */
+  quiet?: (HelixLog["quiet"]) | 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. */