@fusion.dev/helix 0.204.1 → 0.205.1

package/custom-elements.json

@@ -31653,6 +31653,14 @@
                 "name": "HelixHeadlessChatMessage",
                 "module": "src/chat/message/chat-message.ts"
               }
+            },
+            {
+              "description": "The box around the `work` slot, above the content.",
+              "name": "work",
+              "inheritedFrom": {
+                "name": "HelixHeadlessChatMessage",
+                "module": "src/chat/message/chat-message.ts"
+              }
             }
           ],
           "slots": [
@@ -31695,6 +31703,14 @@
                 "name": "HelixHeadlessChatMessage",
                 "module": "src/chat/message/chat-message.ts"
               }
+            },
+            {
+              "description": "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.",
+              "name": "work",
+              "inheritedFrom": {
+                "name": "HelixHeadlessChatMessage",
+                "module": "src/chat/message/chat-message.ts"
+              }
             }
           ],
           "members": [
@@ -32850,6 +32866,14 @@
                 "module": "src/chat/root/chat-root.ts"
               }
             },
+            {
+              "description": "The box around a turn's `work`, for a turn from `turns`, which has none.",
+              "name": "message-work",
+              "inheritedFrom": {
+                "name": "HelixHeadlessChat",
+                "module": "src/chat/root/chat-root.ts"
+              }
+            },
             {
               "description": "The control shown while the user is scrolled away from the bottom.",
               "name": "resume",
@@ -34917,6 +34941,10 @@
                 "min": 420,
                 "slug": "reply-with-steps"
               },
+              {
+                "description": "An agent's answer with the work it did to reach it, kept as a log above the reply.",
+                "slug": "reply-with-work"
+              },
               {
                 "description": "A drawer from the trailing edge, with the conversation filling the panel.",
                 "min": 420,
@@ -124400,6 +124428,14 @@
                 "module": "src/log/line/log-line.ts"
               }
             },
+            {
+              "description": "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.",
+              "name": "line-grouped",
+              "inheritedFrom": {
+                "name": "HelixHeadlessLogLine",
+                "module": "src/log/line/log-line.ts"
+              }
+            },
             {
               "description": "The row of a line `mark-lines` names on the log.",
               "name": "line-marked",
@@ -124827,6 +124863,16 @@
                 "module": "src/helix-element/helix-element.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "separation",
+              "type": {
+                "text": "'outlined' | 'plain' | undefined"
+              },
+              "description": "How the log is set apart from what is around it.\n\n- `outlined`, the resting look, is a box with an edge and a fill of its\n  own, which scrolls after `--log-max-block-size`.\n- `plain` has no edge, no fill, no inset and no height of its own: the\n  lines start where the text around them does and the log grows with\n  them. For a log inside something that already frames it, such as an\n  agent's work in a chat turn's `work` slot.\n\nBoth are writable, so a page can say which it means rather than relying\non the absence of an attribute.",
+              "attribute": "separation",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "words",
@@ -125372,6 +125418,20 @@
                 "module": "src/log/root/log-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the log says nothing to a screen reader as lines arrive, steps\nfinish, or the run ends. For a log inside something that speaks for it,\nsuch as an agent's work in a chat turn, which the turn announces once it\nsettles.",
+              "attribute": "quiet",
+              "inheritedFrom": {
+                "name": "HelixHeadlessLog",
+                "module": "src/log/root/log-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "resumeLabel",
@@ -126922,50 +126982,15 @@
               }
             }
           ],
-          "superclass": {
-            "name": "HelixHeadlessLog",
-            "package": "@fusion.dev/helix-headless/log"
-          },
-          "summary": "Output that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line.",
-          "helix": {
-            "category": "feedback",
-            "since": "0.200.0",
-            "status": "experimental",
-            "documentation": "https://fusion.dev/helix/components/log",
-            "tier": "styled",
-            "group": "Log",
-            "part": "Root",
-            "examples": [
-              {
-                "description": "A deployment's output with numbered lines, its steps folded, and the step that failed open.",
-                "slug": "preview"
-              },
-              {
-                "description": "A search field in the toolbar that shows only the lines holding what you type, and marks each match.",
-                "slug": "search"
-              },
-              {
-                "description": "Lines selected by pressing their numbers, a range with Shift, with the address following the selection.",
-                "slug": "selecting"
-              },
-              {
-                "description": "Each line's time into the run, numbers that link to their line, and two lines marked.",
-                "slug": "timestamps"
-              },
-              {
-                "description": "A Vercel build log read with its own format: each phase a step, timed from its lines, with its warnings drawn apart.",
-                "slug": "vercel"
-              },
-              {
-                "description": "A CI run written to the log as it arrives, with its colors, a progress bar that stays one line, and its steps read off GitHub's markers.",
-                "slug": "written"
-              }
-            ],
-            "source": "helix/styled/src/log"
-          },
-          "tagName": "helix-log",
-          "customElement": true,
           "attributes": [
+            {
+              "name": "separation",
+              "type": {
+                "text": "'outlined' | 'plain' | undefined"
+              },
+              "description": "How the log is set apart from what is around it.\n\n- `outlined`, the resting look, is a box with an edge and a fill of its\n  own, which scrolls after `--log-max-block-size`.\n- `plain` has no edge, no fill, no inset and no height of its own: the\n  lines start where the text around them does and the log grows with\n  them. For a log inside something that already frames it, such as an\n  agent's work in a chat turn's `work` slot.\n\nBoth are writable, so a page can say which it means rather than relying\non the absence of an attribute.",
+              "fieldName": "separation"
+            },
             {
               "name": "empty-text",
               "type": {
@@ -127223,6 +127248,19 @@
                 "module": "src/log/root/log-root.ts"
               }
             },
+            {
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the log says nothing to a screen reader as lines arrive, steps\nfinish, or the run ends. For a log inside something that speaks for it,\nsuch as an agent's work in a chat turn, which the turn announces once it\nsettles.",
+              "fieldName": "quiet",
+              "inheritedFrom": {
+                "name": "HelixHeadlessLog",
+                "module": "src/log/root/log-root.ts"
+              }
+            },
             {
               "name": "resume-label",
               "type": {
@@ -127301,6 +127339,49 @@
               }
             }
           ],
+          "superclass": {
+            "name": "HelixHeadlessLog",
+            "package": "@fusion.dev/helix-headless/log"
+          },
+          "summary": "Output that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line.",
+          "helix": {
+            "category": "feedback",
+            "since": "0.200.0",
+            "status": "experimental",
+            "documentation": "https://fusion.dev/helix/components/log",
+            "tier": "styled",
+            "group": "Log",
+            "part": "Root",
+            "examples": [
+              {
+                "description": "A deployment's output with numbered lines, its steps folded, and the step that failed open.",
+                "slug": "preview"
+              },
+              {
+                "description": "A search field in the toolbar that shows only the lines holding what you type, and marks each match.",
+                "slug": "search"
+              },
+              {
+                "description": "Lines selected by pressing their numbers, a range with Shift, with the address following the selection.",
+                "slug": "selecting"
+              },
+              {
+                "description": "Each line's time into the run, numbers that link to their line, and two lines marked.",
+                "slug": "timestamps"
+              },
+              {
+                "description": "A Vercel build log read with its own format: each phase a step, timed from its lines, with its warnings drawn apart.",
+                "slug": "vercel"
+              },
+              {
+                "description": "A CI run written to the log as it arrives, with its colors, a progress bar that stays one line, and its steps read off GitHub's markers.",
+                "slug": "written"
+              }
+            ],
+            "source": "helix/styled/src/log"
+          },
+          "tagName": "helix-log",
+          "customElement": true,
           "slots": [
             {
               "description": "The lines, as `Log.Line` and `Log.Group` elements.",
@@ -127472,6 +127553,14 @@
                 "module": "src/log/root/log-root.ts"
               }
             },
+            {
+              "description": "The row of a line drawn from data that belongs to a step.",
+              "name": "line-grouped",
+              "inheritedFrom": {
+                "name": "HelixHeadlessLog",
+                "module": "src/log/root/log-root.ts"
+              }
+            },
             {
               "description": "The row of a line drawn from data that `mark-lines` names.",
               "name": "line-marked",
@@ -178412,7 +178501,7 @@
               }
             }
           ],
-          "description": "Serves the frame side of a sandbox preview, in the document its `src` loads.\n\nCall it once from that document, after the elements your examples use are\ndefined. It does what the preview's protocol asks of a frame:\n\n- Posts `helix-preview-ready` once it listens.\n- Writes each `helix-preview-render` into the root: the markup, the\n  stylesheet, the direction, the layout and the color mode. Scripts in the\n  markup run.\n- Posts every console call, uncaught error, and unhandled promise rejection\n  as `helix-preview-console`, an uncaught one marked `uncaught`, which marks\n  the preview `failed`.\n- Posts `helix-preview-size` whenever what was drawn changes height.\n- Posts `helix-preview-press` on every press, so menus outside close.\n\nOnly a message from the parent window is rendered. Answers go to `*`, which\nis the only target a sandboxed frame can name, and carry only what the\nexample itself wrote."
+          "description": "Serves the frame side of a sandbox preview, in the document its `src` loads.\n\nCall it once from that document, after the elements your examples use are\ndefined. It does what the preview's protocol asks of a frame:\n\n- Posts `helix-preview-ready` once it listens.\n- Writes each `helix-preview-render` into the root: the markup, the\n  stylesheet, the direction, the layout and the color mode. Scripts in the\n  markup run.\n- Posts every console call, uncaught error, and unhandled promise rejection\n  as `helix-preview-console`, an uncaught one marked `uncaught`, which marks\n  the preview `failed`.\n- Posts `helix-preview-rendered` after each render, which shows a frame\n  the preview held transparent until it drew.\n- Posts `helix-preview-size` whenever what was drawn changes height.\n- Posts `helix-preview-press` on every press, so menus outside close.\n\nOnly a message from the parent window is rendered. Answers go to `*`, which\nis the only target a sandboxed frame can name, and carry only what the\nexample itself wrote."
         },
         {
           "kind": "function",
@@ -179151,6 +179240,54 @@
               "default": "new DelayController(this, { renders: false })",
               "description": "Holds a coalesced send, so only one is ever queued, and drops it on\ndisconnect.\n\n**It renders nothing**, so it asks for no update when its wait starts or\nends. One that did sent the source at once from that update, ahead of the\nwait, and the send at the end of the wait then cleared `failed` after the\nerror it should have reported."
             },
+            {
+              "kind": "field",
+              "name": "patience",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new DelayController(this, { renders: false })",
+              "description": "Shows a frame that was sent an example and never said it drew it."
+            },
+            {
+              "kind": "field",
+              "name": "blank",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the frame has drawn nothing since its document started loading."
+            },
+            {
+              "kind": "method",
+              "name": "setBlank",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "on",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Marks the frame `blank`, or shown."
+            },
+            {
+              "kind": "method",
+              "name": "drawn",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The frame has drawn an example, so it is shown."
+            },
             {
               "kind": "method",
               "name": "scheduleSend",
@@ -179755,6 +179892,10 @@
             }
           ],
           "cssStates": [
+            {
+              "description": "From the moment the frame's document starts loading until it has drawn an example. The styled tier keeps the frame transparent meanwhile, so a document that has not yet drawn in the page's color mode does not show as a white flash.",
+              "name": "blank"
+            },
             {
               "description": "Since the example threw an error it did not catch, until the next source is sent.",
               "name": "failed"
@@ -272804,6 +272945,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.204.1"
+    "version": "0.205.1"
   }
 }

package/dist/chat/message/chat-message.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}:host(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="message"] {align-items: start;display: grid;grid-template-columns: auto minmax(0, 1fr)}[part="avatar"] > slot::slotted(*) {margin-inline-end: var(--helix-space-sm)}[part="avatar"] {align-items: center;display: flex;font-size: var(--helix-text-sm);grid-column: 1;line-height: var(--helix-leading-normal);min-block-size: calc(1lh + var(--helix-space-xs) * 2)}[part="body"] {grid-column: 2}:host([author="me"]) [part="avatar"] {display: none}[part="body"] {display: grid;gap: var(--helix-space-2xs);justify-items: start;max-inline-size: min(var(--chat-message-measure, 42rem), 80%)}:host([author="me"]) [part="body"] {justify-items: end;justify-self: end}[part="actions"] {opacity: 0;pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:hover) [part="actions"], :host(:focus-within) [part="actions"] {opacity: 1;pointer-events: auto}@media (hover: none) {[part="actions"] {opacity: 1;pointer-events: auto}}[part="actions"] {--helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: inline-flex;gap: var(--helix-space-2xs)}[part="actions"][hidden] {display: none}[part="sources"] {--helix-size-avatar: var(--helix-size-avatar-sm);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;color: var(--helix-color-foreground-muted);display: flex;flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);line-height: var(--helix-leading-normal)}[part="sources"][hidden] {display: none}[part="content"] {background-color: var(--chat-message-background-color, color-mix(in oklab, var(--helix-color-foreground) 14%, transparent));border-radius: var(--chat-message-radius, var(--helix-radii-md));color: var(--chat-message-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);padding-block: var(--chat-message-padding-block, var(--helix-space-xs));padding-inline: var(--chat-message-padding-inline, var(--helix-space-sm))}:host([separation="plain"]) [part="content"] {background-color: transparent;padding-inline: var(--helix-space-none)}:host([separation="plain"]) [part="body"] {justify-items: stretch;max-inline-size: 100%}:host([separation="plain"]) [part="content"] {inline-size: auto}:host([author="me"]) [part="content"] {background-color: var(--chat-message-background-color-me, color-mix(in oklab, var(--helix-color-primary) 28%, transparent));color: var(--chat-message-color-me, var(--chat-message-color, var(--helix-color-foreground)))}[part="meta"] {align-items: center;color: var(--chat-message-meta-color, var(--helix-color-foreground-muted));display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs)}:host([author="me"]) [part="meta"] {justify-content: flex-end}[part="content"] {inline-size: fit-content;max-inline-size: 100%;min-inline-size: 0;overflow-x: auto}[part="content"] slot[name="indicator"] {display: none}:host([state="streaming"]) [part="content"][data-empty] slot[name="indicator"] {display: block}slot[name="indicator"]::slotted(*) {background-color: var(--chat-indicator-background-color, var(--helix-color-surface-sunken));border-radius: var(--helix-radii-full);font-size: var(--helix-text-xs);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);--orb-size: var(--helix-size-icon-sm)}slot[name="indicator"]::slotted(helix-orb) {background-color: transparent;padding: var(--helix-space-none)}:host([state="failed"]) [part="meta"] {color: var(--helix-color-danger)}[part="state"] {align-items: center;display: inline-flex;font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs)}[part="mark"] {block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight)}:host([state="sending"]) [part="content"] {opacity: 0.6}[part="retry"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);cursor: pointer;font: inherit;font-weight: var(--helix-weight-medium);margin-inline-end: calc(var(--helix-space-2xs) * -1);min-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);text-decoration: underline;text-underline-offset: 0.2em}[part="retry"]:hover {background-color: light-dark(color-mix(in oklab, var(--helix-color-foreground) 8%, transparent), color-mix(in oklab, var(--helix-color-foreground) 12%, transparent))}[part="retry"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}@media print {[part="retry"] {display: none}[part="actions"] {display: none}[part="content"] slot[name="indicator"] {display: none}}`);
+export const styles = createSheet(`:host {display: block}:host(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="message"] {align-items: start;display: grid;grid-template-columns: auto minmax(0, 1fr)}[part="avatar"] > slot::slotted(*) {margin-inline-end: var(--helix-space-sm)}[part="avatar"] {align-items: center;display: flex;font-size: var(--helix-text-sm);grid-column: 1;line-height: var(--helix-leading-normal);min-block-size: calc(1lh + var(--helix-space-xs) * 2)}[part="body"] {grid-column: 2}:host([author="me"]) [part="avatar"] {display: none}[part="body"] {display: grid;gap: var(--helix-space-2xs);justify-items: start;max-inline-size: min(var(--chat-message-measure, 42rem), 80%)}:host([author="me"]) [part="body"] {justify-items: end;justify-self: end}[part="actions"] {opacity: 0;pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:hover) [part="actions"], :host(:focus-within) [part="actions"] {opacity: 1;pointer-events: auto}@media (hover: none) {[part="actions"] {opacity: 1;pointer-events: auto}}[part="actions"] {--helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: inline-flex;gap: var(--helix-space-2xs)}[part="actions"][hidden] {display: none}[part="sources"] {--helix-size-avatar: var(--helix-size-avatar-sm);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;color: var(--helix-color-foreground-muted);display: flex;flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);line-height: var(--helix-leading-normal)}[part="sources"][hidden] {display: none}[part="work"] {color: var(--helix-color-foreground-muted);justify-self: stretch;min-inline-size: 0}[part="work"][hidden] {display: none}[part="content"] {background-color: var(--chat-message-background-color, color-mix(in oklab, var(--helix-color-foreground) 14%, transparent));border-radius: var(--chat-message-radius, var(--helix-radii-md));color: var(--chat-message-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);padding-block: var(--chat-message-padding-block, var(--helix-space-xs));padding-inline: var(--chat-message-padding-inline, var(--helix-space-sm))}:host([separation="plain"]) [part="content"] {background-color: transparent;padding-inline: var(--helix-space-none)}:host([separation="plain"]) [part="body"] {justify-items: stretch;max-inline-size: 100%}:host([separation="plain"]) [part="content"] {inline-size: auto}:host([author="me"]) [part="content"] {background-color: var(--chat-message-background-color-me, color-mix(in oklab, var(--helix-color-primary) 28%, transparent));color: var(--chat-message-color-me, var(--chat-message-color, var(--helix-color-foreground)))}[part="meta"] {align-items: center;color: var(--chat-message-meta-color, var(--helix-color-foreground-muted));display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs)}:host([author="me"]) [part="meta"] {justify-content: flex-end}[part="content"] {inline-size: fit-content;max-inline-size: 100%;min-inline-size: 0;overflow-x: auto}[part="content"] slot[name="indicator"] {display: none}:host([state="streaming"]) [part="content"][data-empty] slot[name="indicator"] {display: block}slot[name="indicator"]::slotted(*) {background-color: var(--chat-indicator-background-color, var(--helix-color-surface-sunken));border-radius: var(--helix-radii-full);font-size: var(--helix-text-xs);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);--orb-size: var(--helix-size-icon-sm)}slot[name="indicator"]::slotted(helix-orb) {background-color: transparent;padding: var(--helix-space-none)}:host([state="failed"]) [part="meta"] {color: var(--helix-color-danger)}[part="state"] {align-items: center;display: inline-flex;font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs)}[part="mark"] {block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight)}:host([state="sending"]) [part="content"] {opacity: 0.6}[part="retry"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);cursor: pointer;font: inherit;font-weight: var(--helix-weight-medium);margin-inline-end: calc(var(--helix-space-2xs) * -1);min-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);text-decoration: underline;text-underline-offset: 0.2em}[part="retry"]:hover {background-color: light-dark(color-mix(in oklab, var(--helix-color-foreground) 8%, transparent), color-mix(in oklab, var(--helix-color-foreground) 12%, transparent))}[part="retry"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}@media print {[part="retry"] {display: none}[part="actions"] {display: none}[part="content"] slot[name="indicator"] {display: none}}`);

package/dist/log/group/log-group.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="summary"] {all: unset;box-sizing: border-box;align-items: center;color: var(--helix-color-foreground);column-gap: var(--helix-space-xs);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-weight: var(--helix-weight-medium);inline-size: 100%;padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md));white-space: nowrap}[part="summary"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)}[part="summary"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-subtle);flex: none;font-family: var(--log-font-family, var(--helix-font-mono));inline-size: var(--helix-size-icon-sm);margin-inline-end: calc(var(--helix-space-md) - var(--helix-space-xs));margin-inline-start: calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) - var(--helix-size-icon-sm));rotate: -90deg;transition: rotate var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="mark"] {rotate: 90deg}:host(:state(open)) [part="mark"] {rotate: none}[part="status"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-subtle);flex: none;inline-size: var(--helix-size-icon-sm)}:host([status="done"]) [part="status"] {color: var(--helix-color-success)}:host([status="failed"]) [part="status"] {color: var(--helix-color-danger)}:host([status="running"]) [part="status"] {color: var(--helix-color-info)}[part="heading"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}[part="duration"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-regular);margin-inline-start: auto}[part="content"][hidden] {display: none}@media print {:host {print-color-adjust: economy}}`);
+export const styles = createSheet(`:host {display: block}[part="summary"] {all: unset;box-sizing: border-box;align-items: center;color: var(--helix-color-foreground);column-gap: var(--helix-space-xs);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-weight: var(--helix-weight-medium);inline-size: 100%;padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md));white-space: nowrap}[part="summary"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)}[part="summary"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-subtle);flex: none;font-family: var(--log-font-family, var(--helix-font-mono));inline-size: var(--helix-size-icon-sm);margin-inline-end: calc(var(--helix-space-md) - var(--helix-space-xs));margin-inline-start: calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) - var(--helix-size-icon-sm));rotate: -90deg;transition: rotate var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="mark"] {rotate: 90deg}:host(:state(open)) [part="mark"] {rotate: none}[part="status"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-subtle);flex: none;inline-size: var(--helix-size-icon-sm)}:host([status="done"]) [part="status"] {color: var(--helix-color-success)}:host([status="failed"]) [part="status"] {color: var(--helix-color-danger)}:host([status="running"]) [part="status"] {color: var(--helix-color-info)}[part="heading"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}[part="duration"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-regular);margin-inline-start: var(--_log-duration-start, auto)}[part="content"][hidden] {display: none}::slotted(helix-log-group) {margin-inline-start: calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md))}@media print {:host {print-color-adjust: economy}}`);

package/dist/log/line/log-line.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part~="line"] {column-gap: var(--helix-space-md);display: flex;inline-size: var(--_log-line-size, max-content);min-inline-size: 100%;padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part~="line"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)}:where(button[part="number"]) {all: unset;box-sizing: border-box}[part="number"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;min-inline-size: max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch));text-align: end;text-decoration: none;user-select: none}a[part="number"]:hover, button[part="number"]:hover {color: var(--helix-color-foreground);cursor: pointer}a[part="number"]:hover {text-decoration: underline}a[part="number"]:focus-visible, button[part="number"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="time"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;user-select: none}[part="text"] {flex: 1 1 auto;min-inline-size: 0;overflow-wrap: anywhere;white-space: var(--_log-white-space, pre)}[part~="line-debug"] {color: var(--helix-color-foreground-subtle)}[part~="line-warn"] {background-color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 10%, transparent);color: var(--log-warn-color, var(--helix-color-warning))}[part~="line-error"] {background-color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 10%, transparent);color: var(--log-error-color, var(--helix-color-danger))}[part~="line-marked"] {background-color: var(--log-mark-background-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent))}[part~="line-selected"] {background-color: var(--log-selected-background-color, color-mix(in oklab, var(--helix-color-info) 14%, transparent))}[part~="line-selected"] > [part="number"] {color: var(--helix-color-foreground)}[part~="run"] {background-color: var(--log-run-background-color, transparent);color: var(--log-run-color, inherit)}[part~="run-bold"] {font-weight: var(--helix-weight-semibold)}[part~="run-dim"] {opacity: 0.7}[part~="run-italic"] {font-style: italic}[part~="run-underline"] {text-decoration-line: underline}[part~="run-strike"] {text-decoration-line: line-through}[part~="run-underline"][part~="run-strike"] {text-decoration-line: underline line-through}[part="match"] {background-color: var(--log-match-background-color, var(--helix-color-warning-surface));border-radius: var(--helix-radii-sm);color: inherit}@media print {[part~="line"] {print-color-adjust: exact}}`);
+export const styles = createSheet(`:host {display: block}[part~="line"] {column-gap: var(--helix-space-md);display: flex;inline-size: var(--_log-line-size, max-content);min-inline-size: 100%;padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part~="line-grouped"]:not(:has(> [part="number"])) {padding-inline-start: calc(var(--log-padding-inline, var(--helix-space-md)) + max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md))}[part~="line"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)}:where(button[part="number"]) {all: unset;box-sizing: border-box}[part="number"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;min-inline-size: max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch));text-align: end;text-decoration: none;user-select: none}a[part="number"]:hover, button[part="number"]:hover {color: var(--helix-color-foreground);cursor: pointer}a[part="number"]:hover {text-decoration: underline}a[part="number"]:focus-visible, button[part="number"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="time"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;user-select: none}[part="text"] {flex: 1 1 auto;min-inline-size: 0;overflow-wrap: anywhere;white-space: var(--_log-white-space, pre)}[part~="line-debug"] {color: var(--helix-color-foreground-subtle)}[part~="line-warn"] {background-color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 10%, transparent);color: var(--log-warn-color, var(--helix-color-warning))}[part~="line-error"] {background-color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 10%, transparent);color: var(--log-error-color, var(--helix-color-danger))}[part~="line-marked"] {background-color: var(--log-mark-background-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent))}[part~="line-selected"] {background-color: var(--log-selected-background-color, color-mix(in oklab, var(--helix-color-info) 14%, transparent))}[part~="line-selected"] > [part="number"] {color: var(--helix-color-foreground)}[part~="run"] {background-color: var(--log-run-background-color, transparent);color: var(--log-run-color, inherit)}[part~="run-bold"] {font-weight: var(--helix-weight-semibold)}[part~="run-dim"] {opacity: 0.7}[part~="run-italic"] {font-style: italic}[part~="run-underline"] {text-decoration-line: underline}[part~="run-strike"] {text-decoration-line: line-through}[part~="run-underline"][part~="run-strike"] {text-decoration-line: underline line-through}[part="match"] {background-color: var(--log-match-background-color, var(--helix-color-warning-surface));border-radius: var(--helix-radii-sm);color: inherit}@media print {[part~="line"] {print-color-adjust: exact}}`);

package/dist/log/root/log-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--log-ansi-background: var(--log-background-color, var(--helix-color-background));--log-ansi-black: var(--helix-color-foreground);--log-ansi-blue: var(--helix-color-info);--log-ansi-bright-black: var(--helix-color-foreground-subtle);--log-ansi-bright-blue: var(--helix-color-info);--log-ansi-bright-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-bright-green: var(--helix-color-success);--log-ansi-bright-magenta: var(--helix-color-syntax-callable);--log-ansi-bright-red: var(--helix-color-danger);--log-ansi-bright-white: var(--helix-color-foreground);--log-ansi-bright-yellow: var(--helix-color-warning);--log-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-foreground: var(--log-color, var(--helix-color-foreground));--log-ansi-green: var(--helix-color-success);--log-ansi-magenta: var(--helix-color-syntax-callable);--log-ansi-red: var(--helix-color-danger);--log-ansi-white: var(--helix-color-foreground-muted);--log-ansi-yellow: var(--helix-color-warning);background-color: var(--log-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--log-radius, var(--helix-radii-lg));color: var(--log-color, var(--helix-color-foreground));display: grid;font-family: var(--log-font-family, var(--helix-font-mono));font-size: var(--log-font-size, var(--helix-text-xs));grid-template-columns: minmax(0, 1fr);grid-template-rows: auto auto minmax(0, 1fr) auto;line-height: var(--log-line-height, var(--helix-leading-normal));max-block-size: var(--log-max-block-size, 30rem);min-block-size: 0;overflow: hidden;tab-size: 4}:host([wrap]) {--_log-line-size: auto;--_log-white-space: pre-wrap}::slotted([slot="toolbar"]) {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));font-family: var(--helix-font-sans);grid-row: 1;padding-block: var(--helix-space-xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"] {background-color: var(--helix-color-surface-sunken);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);grid-row: 2;margin: var(--helix-space-none);padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"][hidden], [part="resume"][hidden] {display: none}[part="log"] {grid-row: 3;overflow: auto;overscroll-behavior: contain;padding-block: var(--helix-space-xs);scrollbar-color: var(--log-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color)) var(--log-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin}[part="log"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="row"] {min-inline-size: 100%;inline-size: var(--_log-line-size, max-content)}[part="resume"] {display: grid;grid-row: 4;justify-items: center;margin-block-start: calc(var(--helix-space-xl) * -1 - var(--helix-space-xs));padding-block-end: var(--helix-space-xs);pointer-events: none;position: relative}[part="resume"] > * {pointer-events: auto}[part="resume"] slot::slotted(*) {border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));box-shadow: var(--helix-shadow-floating)}[part="resume-button"] {all: unset;box-sizing: border-box;align-items: center;background-color: var(--helix-color-surface-raised);block-size: var(--helix-size-control-sm);border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);line-height: var(--helix-leading-tight);padding-inline: var(--helix-space-sm);white-space: nowrap}[part="resume-button"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-raised))}[part="resume-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="resume-mark"] {block-size: var(--helix-size-icon-sm);display: inline-flex;inline-size: var(--helix-size-icon-sm)}[part="resume-mark"] svg {block-size: 100%;inline-size: 100%}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}@media print {:host {max-block-size: none}[part="log"] {overflow: visible}[part="resume"] {display: none}}`);
+export const styles = createSheet(`:host {--log-ansi-background: var(--log-background-color, var(--helix-color-background));--log-ansi-black: var(--helix-color-foreground);--log-ansi-blue: var(--helix-color-info);--log-ansi-bright-black: var(--helix-color-foreground-subtle);--log-ansi-bright-blue: var(--helix-color-info);--log-ansi-bright-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-bright-green: var(--helix-color-success);--log-ansi-bright-magenta: var(--helix-color-syntax-callable);--log-ansi-bright-red: var(--helix-color-danger);--log-ansi-bright-white: var(--helix-color-foreground);--log-ansi-bright-yellow: var(--helix-color-warning);--log-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-foreground: var(--log-color, var(--helix-color-foreground));--log-ansi-green: var(--helix-color-success);--log-ansi-magenta: var(--helix-color-syntax-callable);--log-ansi-red: var(--helix-color-danger);--log-ansi-white: var(--helix-color-foreground-muted);--log-ansi-yellow: var(--helix-color-warning);background-color: var(--log-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--log-radius, var(--helix-radii-lg));color: var(--log-color, var(--helix-color-foreground));display: grid;font-family: var(--log-font-family, var(--helix-font-mono));font-size: var(--log-font-size, var(--helix-text-xs));grid-template-columns: minmax(0, 1fr);grid-template-rows: auto auto minmax(0, 1fr) auto;line-height: var(--log-line-height, var(--helix-leading-normal));max-block-size: var(--log-max-block-size, 30rem);min-block-size: 0;overflow: hidden;tab-size: 4}:host([separation="plain"]) {--log-padding-inline: var(--helix-space-none);--_log-duration-start: var(--helix-space-xs);background-color: transparent;border: none;border-radius: var(--helix-radii-none);max-block-size: var(--log-max-block-size, none)}:host([separation="plain"]) {color: var(--log-color, inherit)}:host([wrap]) {--_log-line-size: auto;--_log-white-space: pre-wrap}::slotted([slot="toolbar"]) {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));font-family: var(--helix-font-sans);grid-row: 1;padding-block: var(--helix-space-xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"] {background-color: var(--helix-color-surface-sunken);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);grid-row: 2;margin: var(--helix-space-none);padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"][hidden], [part="resume"][hidden] {display: none}[part="log"] {grid-row: 3;overflow: auto;overscroll-behavior: contain;padding-block: var(--helix-space-xs);scrollbar-color: var(--log-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color)) var(--log-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin}:host([separation="plain"]) [part="log"] {padding-block: var(--helix-space-none)}[part="log"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="row"] {min-inline-size: 100%;inline-size: var(--_log-line-size, max-content)}[part="resume"] {display: grid;grid-row: 4;justify-items: center;margin-block-start: calc(var(--helix-space-xl) * -1 - var(--helix-space-xs));padding-block-end: var(--helix-space-xs);pointer-events: none;position: relative}[part="resume"] > * {pointer-events: auto}[part="resume"] slot::slotted(*) {border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));box-shadow: var(--helix-shadow-floating)}[part="resume-button"] {all: unset;box-sizing: border-box;align-items: center;background-color: var(--helix-color-surface-raised);block-size: var(--helix-size-control-sm);border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);line-height: var(--helix-leading-tight);padding-inline: var(--helix-space-sm);white-space: nowrap}[part="resume-button"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-raised))}[part="resume-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="resume-mark"] {block-size: var(--helix-size-icon-sm);display: inline-flex;inline-size: var(--helix-size-icon-sm)}[part="resume-mark"] svg {block-size: 100%;inline-size: 100%}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}@media print {:host {max-block-size: none}[part="log"] {overflow: visible}[part="resume"] {display: none}}`);

package/dist/log/root/log-root.d.ts

@@ -38,6 +38,20 @@ import '../line/log-line.js';
  */
 export declare class HelixLog extends HelixHeadlessLog {
     static tier: string;
+    /**
+     * 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?: 'outlined' | 'plain';
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/log/root/log-root.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessLog } from '@fusion.dev/helix-headless/log';
+import { property } from 'lit/decorators.js';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './log-root.css.js';
@@ -10,6 +11,9 @@ let HelixLog = class HelixLog extends HelixHeadlessLog {
     static { this.tier = 'helix-'; }
     static { this.styles = [liveStyles, collectionStateStyles, styles]; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixLog.prototype, "separation", void 0);
 HelixLog = __decorate([
     customElement('helix-log')
 ], HelixLog);

package/dist/sandbox/frame.d.ts

@@ -54,6 +54,8 @@ export declare const loggedText: (value: unknown) => string;
  * - Posts every console call, uncaught error, and unhandled promise rejection
  *   as `helix-preview-console`, an uncaught one marked `uncaught`, which marks
  *   the preview `failed`.
+ * - Posts `helix-preview-rendered` after each render, which shows a frame
+ *   the preview held transparent until it drew.
  * - Posts `helix-preview-size` whenever what was drawn changes height.
  * - Posts `helix-preview-press` on every press, so menus outside close.
  *

package/dist/sandbox/frame.js

@@ -124,6 +124,7 @@ const serveWith = (tools, options = {}) => {
         sheet.textContent = styles;
         options.onRender?.(root, fresh);
         measure();
+        post({ type: 'helix-preview-rendered' });
     };
     const watcher = new ResizeObserver(measure);
     const watch = () => {

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;min-block-size: 0;position: relative}[part="frame"] {background-color: var(--helix-color-background);block-size: 100%;border: none;display: block;inline-size: 100%}[part="error"] {background-color: var(--helix-color-background);box-sizing: border-box;color: var(--helix-color-danger);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);inset: 0;line-height: var(--helix-leading-normal);margin: var(--helix-space-none);overflow: auto;padding: var(--helix-space-md);position: absolute;white-space: pre-wrap;word-break: break-word}[part="controls"] {display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);inset-block-end: var(--helix-space-xs);inset-inline-end: var(--helix-space-xs);position: absolute}[part="reload"], [part="open"] {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);cursor: pointer;font: inherit;padding: var(--helix-space-2xs) var(--helix-space-xs)}[part="reload"]:hover, [part="open"]:hover {background-color: var(--helix-color-surface-sunken)}[part="reload"]:focus-visible, [part="open"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}`);
+export const styles = createSheet(`:host {display: block;min-block-size: 0;position: relative}[part="frame"] {background-color: var(--helix-color-background);block-size: 100%;border: none;display: block;inline-size: 100%}[part="error"] {background-color: var(--helix-color-background);box-sizing: border-box;color: var(--helix-color-danger);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);inset: 0;line-height: var(--helix-leading-normal);margin: var(--helix-space-none);overflow: auto;padding: var(--helix-space-md);position: absolute;white-space: pre-wrap;word-break: break-word}[part="controls"] {display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);inset-block-end: var(--helix-space-xs);inset-inline-end: var(--helix-space-xs);position: absolute}[part="reload"], [part="open"] {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);cursor: pointer;font: inherit;padding: var(--helix-space-2xs) var(--helix-space-xs)}[part="reload"]:hover, [part="open"]:hover {background-color: var(--helix-color-surface-sunken)}[part="reload"]:focus-visible, [part="open"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:state(blank)) [part="frame"] {opacity: 0}`);

package/dist/sandbox/preview/sandbox-preview.d.ts

@@ -35,12 +35,16 @@ export interface PreviewConsole {
 export interface PreviewPress {
     type: 'helix-preview-press';
 }
+/** The frame saying it has drawn the example it was sent. */
+export interface PreviewRendered {
+    type: 'helix-preview-rendered';
+}
 /** How tall the frame says its content is, in CSS pixels. */
 export interface PreviewSize {
     size: number;
     type: 'helix-preview-size';
 }
-export type PreviewMessage = PreviewConsole | PreviewFetch | PreviewPress | PreviewReady | PreviewRender | PreviewSize;
+export type PreviewMessage = PreviewConsole | PreviewFetch | PreviewPress | PreviewReady | PreviewRender | PreviewRendered | PreviewSize;
 /**
  * @summary A frame that renders sandbox source in a separate document.
  *
@@ -140,6 +144,7 @@ export type PreviewMessage = PreviewConsole | PreviewFetch | PreviewPress | Prev
  * @csspart open - The button that opens the example in a new tab, under `controls`.
  * @csspart reload - The button that reloads the frame's document, under `controls`.
  *
+ * @cssstate blank - From the moment the frame's document starts loading until it has drawn an example. The styled tier keeps the frame transparent meanwhile, so a document that has not yet drawn in the page's color mode does not show as a white flash.
  * @cssstate failed - Since the example threw an error it did not catch, until the next source is sent.
  * @cssstate loading - While the frame's document loads, until it can take the example.
  */
@@ -368,6 +373,14 @@ export declare class HelixSandboxPreview extends HelixElement {
      * error it should have reported.
      */
     private readonly settle;
+    /** Shows a frame that was sent an example and never said it drew it. */
+    private readonly patience;
+    /** Whether the frame has drawn nothing since its document started loading. */
+    private blank;
+    /** Marks the frame `blank`, or shown. */
+    private setBlank;
+    /** The frame has drawn an example, so it is shown. */
+    private drawn;
     /**
      * Sends once the typing stops, replacing anything already waiting.
      *

package/dist/sandbox/preview/sandbox-preview.js

@@ -2,6 +2,7 @@ var HelixSandboxPreview_1;
 import { __decorate } from "tslib";
 import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, words, } from '@fusion.dev/helix-core';
 const SETTLE = 120;
+const PAINT_PATIENCE = 1000;
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { COMPILED, compile } from '../compile.js';
@@ -47,6 +48,9 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
                 this.handleFrameLoad();
                 return;
             }
+            if (data?.type === 'helix-preview-rendered' || data?.type === 'helix-preview-size') {
+                this.drawn();
+            }
             if (data?.type === 'helix-preview-console') {
                 this.dispatchEvent(new HelixConsoleEvent({ level: data.level, text: data.text }));
                 if (data.uncaught) {
@@ -62,6 +66,8 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             }
         };
         this.settle = new DelayController(this, { renders: false });
+        this.patience = new DelayController(this, { renders: false });
+        this.blank = false;
         this.loadedMap = '';
     }
     static { HelixSandboxPreview_1 = this; }
@@ -139,6 +145,14 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         });
     }
     static { this.target = '*'; }
+    setBlank(on) {
+        this.blank = on;
+        this.toggleState('blank', on);
+    }
+    drawn() {
+        this.patience.cancel();
+        this.setBlank(false);
+    }
     scheduleSend() {
         this.settle.start(SETTLE, () => {
             if (this.sending !== this.failedSource) {
@@ -163,6 +177,9 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         }
         this.frame?.contentWindow?.postMessage(this.message, HelixSandboxPreview_1.target);
         this.sentSource = this.sending;
+        if (this.blank) {
+            this.patience.start(PAINT_PATIENCE, () => this.drawn());
+        }
     }
     open() {
         const tab = window.open('', '_blank');
@@ -223,7 +240,9 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
         this.sentSource = undefined;
         this.failedSource = undefined;
         this.fail();
+        this.patience.cancel();
         this.toggleState('loading', true);
+        this.setBlank(true);
     }
     willUpdate(changed) {
         super.willUpdate(changed);