@fusion.dev/helix 0.144.0 → 0.146.0

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -9,7 +9,9 @@ import '../../copy-button/index.js';
  * The styled tier draws the tree in the Code Block frame. Keys and each type of
  * value take their colors from the syntax colors code blocks use. Each row is
  * one line, and a long string ends in an ellipsis, so every row has the same
- * height and a windowed tree does not measure rows one by one.
+ * height and a windowed tree does not measure rows one by one. A filter's
+ * matches take a tinted ground, and the filter field is a band of the same
+ * frame, under the label.
  *
  * @since 0.1.0
  * @status stable
@@ -21,6 +23,7 @@ import '../../copy-button/index.js';
  * @cssproperty --object-inspector-block-size - The height of the scrolling box when `windowed` is set.
  * @cssproperty --object-inspector-border-color - The color of the edge around the tree and its header.
  * @cssproperty --object-inspector-header-background-color - The background of the bar that holds the label.
+ * @cssproperty --object-inspector-match-background-color - The background of an entry a filter matched.
  * @cssproperty --object-inspector-radius - The corner radius of the tree.
  */
 export declare class HelixObjectInspector extends HelixHeadlessObjectInspector {

package/dist/object-inspector/root/object-inspector-root.js

@@ -6,11 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessObjectInspector } from '@fusion.dev/helix-headless/object-inspector';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './object-inspector-root.css.js';
 import '../../copy-button/index.js';
 let HelixObjectInspector = class HelixObjectInspector extends HelixHeadlessObjectInspector {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixObjectInspector = __decorate([
     customElement('helix-object-inspector')

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

@@ -67,7 +67,7 @@ mask-repeat: no-repeat;
 mask-size: contain;
 }
 
-:host([data-active]) [part~="item"],
+:host(:state(active)) [part~="item"],
 :host(:not([disabled])) [part~="item"]:hover {
 
 background-color: var(

package/dist/orb/index.d.ts

@@ -1,2 +1,2 @@
 export * from './root/orb-root.js';
-export * from './shapes.js';
+export { ORB_STATES, type OrbState } from './shapes.js';

package/dist/orb/index.js

@@ -1,2 +1,2 @@
 export * from './root/orb-root.js';
-export * from './shapes.js';
+export { ORB_STATES } from './shapes.js';

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

@@ -31,11 +31,16 @@ import { type OrbState } from '../shapes.js';
  * `prefers-reduced-motion`, it draws one still frame.
  *
  * The orb is styled only and has behavior, which the tier split does not
- * otherwise allow. Its role, name and busy state follow `state`, and the rest
+ * otherwise allow. Its role, name and busy state follow `state`, unless
+ * `announce` makes it a status region, and the rest
  * is drawing dots to a canvas, so there is no structure to restyle. For a
  * drawing of your own, the headless `Loader` holds the same busy progress bar
  * and its name.
  *
+ * Each state is also a custom state, such as `:state(thinking)` or
+ * `:state(done)`, so a page can style what sits around an orb by what it shows,
+ * whether the state was written as an attribute or set from script.
+ *
  * @since 0.8.0
  * @status stable
  * @category feedback
@@ -43,13 +48,36 @@ import { type OrbState } from '../shapes.js';
  * @documentation https://fusion.dev/helix/components/orb
  *
  * @csspart canvas - The canvas the dots are drawn on.
+ * @csspart live - The word for the state, which the orb says as it changes when `announce` is set. Rendered only then, and clipped out of view.
  *
  * @cssproperty --orb-color - The color of the nearest dots. Defaults to `currentColor`.
  * @cssproperty --orb-ground - The color the farthest dots fade toward. Defaults to the page's background.
  * @cssproperty --orb-size - The diameter. Overrides `size`.
+ *
+ * @cssstate connecting - The orb shows `connecting`.
+ * @cssstate done - The orb shows `done`.
+ * @cssstate fetching - The orb shows `fetching`.
+ * @cssstate listening - The orb shows `listening`.
+ * @cssstate thinking - The orb shows `thinking`, which is also what a state it does not draw shows.
+ * @cssstate waiting - The orb shows `waiting`.
+ * @cssstate working - The orb shows `working`.
  */
 export declare class HelixOrb extends HelixElement {
     static styles: CSSResultGroup;
+    /**
+     * Says each new state politely, such as "Working" and then "Done".
+     *
+     * **The orb becomes the live region**: its role is `status` rather than
+     * `progressbar` or `img`, and it holds the state's word. A region inside a
+     * progress bar or an image may never be heard, because assistive technology
+     * treats what those two hold as presentation. The name is still `label` or
+     * the state's word.
+     *
+     * Off by default, because the name and the busy state already change with
+     * the state, and an orb beside a stream of messages would otherwise talk
+     * over them. Set it on an orb that is the only sign of progress on the page.
+     */
+    announce: boolean;
     /**
      * The name read by screen readers. Defaults to the name of the state, such
      * as "Thinking".
@@ -82,16 +110,18 @@ export declare class HelixOrb extends HelixElement {
      * verb we have not made a shape for should cost a reader a less specific
      * indicator, not an empty box where the indicator was.
      *
-     * Not reflected: no rule selects on it, because the state is drawn rather than
-     * styled. A consumer writing the attribute can still select on their own
-     * markup.
+     * Not reflected, because a state set from script would then write an
+     * attribute onto the host after a server sent it without one. Each state is
+     * a custom state instead, such as `:state(working)`.
      */
     state: OrbState;
     /**
      * The word for each state, for a page in another language.
      *
-     * A state left out keeps its English word, and `label` wins over both. It is
-     * a property with no attribute, keyed by state, such as `{ thinking: '…' }`.
+     * A state left out keeps its English word, and `label` wins over both.
+     * Keyed by state, such as `{ thinking: '…' }`. As an attribute it is that
+     * object as JSON, such as `state-labels='{"done":"Terminé"}'`, so server
+     * markup and plain HTML can carry the words too.
      */
     stateLabels: Partial<Record<OrbState, string>>;
     private canvas;
@@ -135,6 +165,10 @@ export declare class HelixOrb extends HelixElement {
      */
     private phase;
     protected willUpdate(changed: PropertyValues): void;
+    /** The state drawn: `state`, or `thinking` for one it does not draw. */
+    private get shown();
+    /** The word for the state drawn, in the page's words where it gave them. */
+    private get word();
     protected render(): TemplateResult;
     protected firstUpdated(changed: PropertyValues): void;
     connectedCallback(): void;

package/dist/orb/root/orb-root.js

@@ -4,9 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, hostAria, PaintGateController, readColor, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, HelixElement, hostAria, PaintGateController, readColor, wordsConverter, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { blendStaged, evenSphere, fibonacci, meshFor, ORB_STATES, orbPoint, paramsFor, project, smoother, stateDistance, TRAIL, } from '../shapes.js';
 import { styles } from './orb-root.css.js';
 const MORPH_NEAR = 380;
@@ -26,6 +27,7 @@ const GRAY = [128, 128, 128];
 let HelixOrb = class HelixOrb extends HelixElement {
     constructor() {
         super(...arguments);
+        this.announce = false;
         this.label = '';
         this.state = 'thinking';
         this.stateLabels = {};
@@ -67,23 +69,36 @@ let HelixOrb = class HelixOrb extends HelixElement {
             this.gate.play();
         };
     }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
     willUpdate(changed) {
         super.willUpdate(changed);
-        const state = ORB_STATES.includes(this.state)
-            ? this.state
-            : 'thinking';
+        const state = this.shown;
         hostAria(this.internals, {
-            label: this.label || this.stateLabels[state] || LABELS[state],
-            role: state === 'done' ? 'img' : 'progressbar',
+            label: this.label || this.word,
+            role: this.announce ? 'status' : state === 'done' ? 'img' : 'progressbar',
         });
-        this.internals.ariaBusy = state === 'done' ? 'false' : 'true';
+        this.internals.ariaBusy = this.announce ? null : state === 'done' ? 'false' : 'true';
+        this.toggleState('connecting', state === 'connecting');
+        this.toggleState('done', state === 'done');
+        this.toggleState('fetching', state === 'fetching');
+        this.toggleState('listening', state === 'listening');
+        this.toggleState('thinking', state === 'thinking');
+        this.toggleState('waiting', state === 'waiting');
+        this.toggleState('working', state === 'working');
         if (changed.has('state') && changed.get('state') !== undefined) {
             this.turn();
         }
     }
+    get shown() {
+        return ORB_STATES.includes(this.state)
+            ? this.state
+            : 'thinking';
+    }
+    get word() {
+        return this.stateLabels?.[this.shown] || LABELS[this.shown];
+    }
     render() {
-        return html `<canvas part="canvas" aria-hidden="true"></canvas>`;
+        return html `<canvas part="canvas" aria-hidden="true"></canvas>${this.announce ? html `<span part="live">${this.word}</span>` : nothing}`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -236,6 +251,9 @@ let HelixOrb = class HelixOrb extends HelixElement {
         }
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixOrb.prototype, "announce", void 0);
 __decorate([
     property()
 ], HelixOrb.prototype, "label", void 0);
@@ -246,7 +264,7 @@ __decorate([
     property()
 ], HelixOrb.prototype, "state", void 0);
 __decorate([
-    property({ attribute: false })
+    property({ attribute: 'state-labels', converter: wordsConverter })
 ], HelixOrb.prototype, "stateLabels", void 0);
 HelixOrb = __decorate([
     customElement('helix-orb')

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

@@ -123,6 +123,16 @@ var(--outline-indent, var(--helix-space-sm))
 );
 }
 
+::slotted([slot="heading"]) {
+color: var(--helix-color-foreground);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-semibold);
+line-height: var(--helix-leading-normal);
+margin-block: 0 var(--helix-space-xs);
+margin-inline: 0;
+padding-inline-start: calc(var(--outline-rail) + var(--helix-space-sm));
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -12,6 +12,13 @@ import type { CSSResultGroup } from 'lit';
  * `data-level` is at the top level. The outline does not read heading levels
  * from the document, because the headings are not always in the document.
  *
+ * Links in a nested `<ul>` take their indentation from your own stylesheet:
+ * the outline's styles reach the elements slotted into it and nothing inside
+ * them. Write the links flat with `data-level` for the indentation drawn here,
+ * and screen readers still hear them as nested lists.
+ *
+ * A heading slotted into `heading` is set above the links, lined up with them.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation

package/dist/pin-input/root/pin-input-root.css.js

@@ -19,9 +19,9 @@ border: var(--helix-border-thin) solid
 var(--pin-input-cell-border-color, var(--helix-color-border));
 border-radius: var(--pin-input-cell-radius, var(--helix-radii-sm));
 box-sizing: border-box;
-color: var(--helix-color-foreground);
+color: var(--pin-input-cell-color, var(--helix-color-foreground));
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-lg);
+font-size: var(--pin-input-cell-font-size, var(--helix-text-lg));
 
 font-variant-numeric: tabular-nums;
 font-weight: var(--helix-weight-medium);
@@ -35,7 +35,7 @@ border-color: var(--helix-color-foreground-muted);
 }
 
 [part="cell"]:focus-visible {
-border-color: var(--helix-color-primary);
+border-color: var(--pin-input-cell-border-color-focus, var(--helix-color-primary));
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: 0;
 }
@@ -59,7 +59,7 @@ font-size: var(--helix-text-xl);
 
 [part="separator"] {
 align-self: center;
-color: var(--helix-color-foreground-muted);
+color: var(--pin-input-separator-color, var(--helix-color-foreground-muted));
 font-size: var(--helix-text-lg);
 }
 

package/dist/pin-input/root/pin-input-root.d.ts

@@ -25,9 +25,13 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --pin-input-cell-background-color - Fill behind each box.
  * @cssproperty --pin-input-cell-border-color - Edge of each box at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --pin-input-cell-border-color-focus - Edge of the box holding focus.
+ * @cssproperty --pin-input-cell-color - The color of a typed character.
+ * @cssproperty --pin-input-cell-font-size - The size of a typed character.
  * @cssproperty --pin-input-cell-radius - Corner radius of each box.
  * @cssproperty --pin-input-cell-size - Width and height of each box.
  * @cssproperty --pin-input-gap - The space between one box and the next.
+ * @cssproperty --pin-input-separator-color - The color of the text `format` draws between boxes.
  */
 export declare class HelixPinInput extends HelixHeadlessPinInput {
     static styles: CSSResultGroup;

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

@@ -55,7 +55,8 @@ border-radius: inherit;
 inline-size: 100%;
 scale: var(--progress-fraction, 0) 1;
 transform-origin: left center;
-transition: scale var(--helix-duration-normal) var(--helix-easing-decelerate);
+transition: scale var(--progress-transition-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);
 }
 
 :host(:dir(rtl)) [part="indicator"] {
@@ -150,7 +151,8 @@ scale: none;
 stroke: var(--progress-color, var(--helix-color-primary));
 stroke-dasharray: calc(var(--progress-fraction) * 100) 100;
 stroke-linecap: round;
-transition: stroke-dasharray var(--helix-duration-normal) var(--helix-easing-decelerate);
+transition: stroke-dasharray var(--progress-transition-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);
 }
 
 :host([shape="ring"][show-value]) {

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

@@ -28,6 +28,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --progress-ring-width - Thickness of the ring's stroke.
  * @cssproperty --progress-size - Thickness of the bar.
  * @cssproperty --progress-track-color - Fill of the part that is not done.
+ * @cssproperty --progress-transition-duration - How long the fill takes to move to a new value. `0s` moves it at once.
  */
 export declare class HelixProgress extends HelixHeadlessProgress {
     /**

package/dist/qr-code/root/qr-code-root.css.js

@@ -17,6 +17,17 @@ display: block;
 inline-size: 100%;
 }
 
+[part="fallback"] {
+align-items: center;
+block-size: 100%;
+box-sizing: border-box;
+display: flex;
+justify-content: center;
+overflow-wrap: anywhere;
+padding: var(--helix-space-md);
+text-align: center;
+}
+
 [part="finders"] {
 fill: var(--qr-code-finder-color, currentColor);
 }

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

@@ -8,7 +8,10 @@ font: inherit;
 
 color: var(--quote-color, var(--helix-color-foreground-muted));
 font: inherit;
+
+font-family: var(--quote-font-family, inherit);
 font-style: var(--quote-font-style, italic);
+font-weight: var(--quote-font-weight, inherit);
 }
 
 @media print {

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

@@ -14,7 +14,9 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/quote
  *
  * @cssproperty --quote-color - Color of the quoted text.
+ * @cssproperty --quote-font-family - The typeface of the quoted text, the paragraph's own by default.
  * @cssproperty --quote-font-style - The slant of the quoted text, `italic` by default. Set `normal` for a face whose italic is too loud, or `oblique` for one with no italic of its own.
+ * @cssproperty --quote-font-weight - The weight of the quoted text, the paragraph's own by default.
  */
 export declare class HelixQuote extends HelixHeadlessQuote {
     static styles: CSSResultGroup;

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

@@ -58,6 +58,22 @@ transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
 scale: 1;
 }
 
+:host(:state(has-indicator)) [part="box"]::after {
+content: none;
+}
+
+slot[name="indicator"]::slotted(*) {
+block-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));
+color: var(--radio-mark-color, var(--helix-color-foreground));
+inline-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));
+scale: 0;
+transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
+}
+
+:host(:state(selected)) slot[name="indicator"]::slotted(*) {
+scale: 1;
+}
+
 [part="item"]:focus-visible [part="box"] {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);

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

@@ -23,7 +23,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --radio-card-border-color - The border color of a card-shaped choice.
  * @cssproperty --radio-card-padding - The padding inside a card-shaped choice.
  * @cssproperty --radio-chip-size - The diameter of a chip.
- * @cssproperty --radio-mark-color - The color of the dot.
+ * @cssproperty --radio-indicator-size - The width and height of an icon slotted into `indicator`. Three quarters of the circle by default.
+ * @cssproperty --radio-mark-color - The color of the dot, or of an icon slotted into `indicator`.
  * @cssproperty --radio-size - The diameter of the circle.
  */
 export declare class HelixRadio extends HelixHeadlessRadio {

package/dist/sandbox/frame.d.ts

@@ -0,0 +1,64 @@
+import type { PreviewRender } from './preview/sandbox-preview.js';
+/** How `servePreview` serves a frame document. */
+export interface ServePreviewOptions {
+    /**
+     * The element each example is written into. Defaults to `#preview-root`,
+     * and to the body where there is none.
+     */
+    root?: HTMLElement;
+    /**
+     * Whether the frame adds the rules for the four `layout` values, `padded`,
+     * `centered`, `hug` and `fullscreen`, to its own head. Defaults to `true`.
+     * Set `false` where your frame's stylesheet places the root itself.
+     */
+    layouts?: boolean;
+    /** Called before new markup replaces the old, to take down what it mounted. */
+    onReplace?: (root: HTMLElement) => void;
+    /** Called after each render, with whether the markup was new or only restyled. */
+    onRender?: (root: HTMLElement, fresh: boolean) => void;
+}
+/**
+ * The rules that place the root for each `layout` a preview sends.
+ *
+ * `centered` gives the example a measure and centers that box, and `hug`
+ * shrinks each top-level child to its own content and centers it, which is
+ * the difference for a component whose root is a full-width block. They
+ * select the root by its `data-preview-root` attribute, so they reach nothing
+ * an example draws inside it. The three that fill the viewport count their
+ * padding inside that height, so the root never overflows the frame.
+ */
+export declare const LAYOUT_RULES = "\n:root { --preview-measure: 48rem; }\n[data-preview-root][data-layout=\"padded\"] { padding: var(--helix-space-lg, 1.5rem); }\n[data-preview-root][data-layout=\"centered\"], [data-preview-root][data-layout=\"hug\"] {\n  align-content: center; box-sizing: border-box; display: block;\n  inline-size: min(100%, var(--preview-measure)); margin-inline: auto; min-block-size: 100dvh;\n  padding: var(--helix-space-lg, 1.5rem);\n}\n[data-preview-root][data-layout=\"centered\"] { text-align: center; }\n[data-preview-root][data-layout=\"centered\"] > * { margin-inline: auto; text-align: start; }\n[data-preview-root][data-layout=\"hug\"] > * {\n  inline-size: fit-content; margin-inline: auto; max-inline-size: 100%;\n}\n[data-preview-root][data-layout=\"fullscreen\"] { box-sizing: border-box; min-block-size: 100dvh; padding: 0; }\n";
+/** Whether `data` is a render message, as the preview sends one. */
+export declare const isRender: (data: unknown) => data is PreviewRender;
+/**
+ * The markup an example renders, without the stylesheet links it carries.
+ *
+ * An example that needs CSS says so the way a consumer would, with a `<link>`
+ * beside it, and the stylesheet arrives in the render message already read.
+ * The frame is on an opaque origin, so a request for the link would fail and
+ * log an error into the reader's console on every render.
+ */
+export declare const withoutStylesheets: (source: string) => string;
+/** A logged value as text, without throwing on a cycle. */
+export declare const loggedText: (value: unknown) => string;
+/**
+ * Serves the frame side of a sandbox preview, in the document its `src` loads.
+ *
+ * Call it once from that document, after the elements your examples use are
+ * defined. It does what the preview's protocol asks of a frame:
+ *
+ * - Posts `helix-preview-ready` once it listens.
+ * - Writes each `helix-preview-render` into the root: the markup, the
+ *   stylesheet, the direction, the layout and the color mode. Scripts in the
+ *   markup run.
+ * - Posts every console call and uncaught error as `helix-preview-console`.
+ * - Posts `helix-preview-size` whenever what was drawn changes height.
+ * - Posts `helix-preview-press` on every press, so menus outside close.
+ *
+ * Only a message from the parent window is rendered. Answers go to `*`, which
+ * is the only target a sandboxed frame can name, and carry only what the
+ * example itself wrote.
+ *
+ * @returns A function that stops serving and puts the console back.
+ */
+export declare const servePreview: (options?: ServePreviewOptions) => (() => void);

package/dist/sandbox/frame.js

@@ -0,0 +1,146 @@
+export const LAYOUT_RULES = `
+:root { --preview-measure: 48rem; }
+[data-preview-root][data-layout="padded"] { padding: var(--helix-space-lg, 1.5rem); }
+[data-preview-root][data-layout="centered"], [data-preview-root][data-layout="hug"] {
+  align-content: center; box-sizing: border-box; display: block;
+  inline-size: min(100%, var(--preview-measure)); margin-inline: auto; min-block-size: 100dvh;
+  padding: var(--helix-space-lg, 1.5rem);
+}
+[data-preview-root][data-layout="centered"] { text-align: center; }
+[data-preview-root][data-layout="centered"] > * { margin-inline: auto; text-align: start; }
+[data-preview-root][data-layout="hug"] > * {
+  inline-size: fit-content; margin-inline: auto; max-inline-size: 100%;
+}
+[data-preview-root][data-layout="fullscreen"] { box-sizing: border-box; min-block-size: 100dvh; padding: 0; }
+`;
+export const isRender = (data) => typeof data === 'object' &&
+    data !== null &&
+    data.type === 'helix-preview-render';
+export const withoutStylesheets = (source) => source.replace(/<link\b[^>]*\brel=(["'])stylesheet\1[^>]*>\s*/gi, '');
+export const loggedText = (value) => {
+    if (typeof value === 'string') {
+        return value;
+    }
+    try {
+        return JSON.stringify(value) ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
+};
+const runScripts = (root) => {
+    for (const original of [...root.querySelectorAll('script')]) {
+        const script = document.createElement('script');
+        for (const { name, value } of original.attributes) {
+            script.setAttribute(name, value);
+        }
+        if (!script.type) {
+            script.type = 'module';
+        }
+        script.text = original.text;
+        original.replaceWith(script);
+    }
+};
+const drawn = (child) => {
+    const own = child.getBoundingClientRect();
+    if (own.width > 0 || own.height > 0) {
+        return [own];
+    }
+    return [...child.querySelectorAll('*')]
+        .filter((node) => getComputedStyle(node).position !== 'fixed')
+        .map((node) => node.getBoundingClientRect())
+        .filter((box) => box.width > 0 || box.height > 0);
+};
+export const servePreview = (options = {}) => {
+    const root = options.root ?? document.getElementById('preview-root') ?? document.body;
+    root.toggleAttribute('data-preview-root', true);
+    root.dataset.layout ??= 'padded';
+    if (options.layouts !== false) {
+        const rules = document.createElement('style');
+        rules.textContent = LAYOUT_RULES;
+        document.head.prepend(rules);
+    }
+    const post = (message) => window.parent?.postMessage(message, '*');
+    const levels = ['log', 'info', 'warn', 'error'];
+    const originals = levels.map((level) => console[level]);
+    for (const level of levels) {
+        const original = console[level];
+        console[level] = (...args) => {
+            original(...args);
+            post({ level, text: args.map(loggedText).join(' '), type: 'helix-preview-console' });
+        };
+    }
+    const failed = (event) => {
+        post({ level: 'error', text: event.message, type: 'helix-preview-console' });
+    };
+    const measure = () => {
+        const boxes = [...root.children].flatMap(drawn);
+        if (boxes.length === 0) {
+            return;
+        }
+        const top = Math.min(...boxes.map((box) => box.top));
+        const bottom = Math.max(...boxes.map((box) => box.bottom));
+        const style = getComputedStyle(root);
+        const padding = (Number.parseFloat(style.paddingBlockStart) || 0) +
+            (Number.parseFloat(style.paddingBlockEnd) || 0);
+        post({ size: Math.ceil(bottom - top + padding), type: 'helix-preview-size' });
+    };
+    let rendered;
+    const render = (event) => {
+        if (!isRender(event.data) || event.source !== window.parent) {
+            return;
+        }
+        const { colorMode, direction = 'ltr', layout = 'padded', source = '', styles = '' } = event.data;
+        document.documentElement.dir = direction;
+        root.dataset.layout = layout;
+        if (colorMode) {
+            document.documentElement.dataset.colorMode = colorMode;
+            document.documentElement.style.colorScheme = colorMode;
+        }
+        const fresh = source !== rendered;
+        if (fresh) {
+            options.onReplace?.(root);
+            root.innerHTML = withoutStylesheets(source);
+            runScripts(root);
+            rendered = source;
+        }
+        let sheet = document.getElementById('preview-styles');
+        if (!sheet) {
+            sheet = document.createElement('style');
+            sheet.id = 'preview-styles';
+            document.head.append(sheet);
+        }
+        sheet.textContent = styles;
+        options.onRender?.(root, fresh);
+        measure();
+    };
+    const watcher = new ResizeObserver(measure);
+    const watch = () => {
+        watcher.disconnect();
+        watcher.observe(root);
+        for (const child of root.children) {
+            const placed = getComputedStyle(child).display === 'contents' ? child.children : [child];
+            for (const box of placed) {
+                watcher.observe(box);
+            }
+        }
+    };
+    const children = new MutationObserver(watch);
+    children.observe(root, { childList: true });
+    watch();
+    const press = () => post({ type: 'helix-preview-press' });
+    window.addEventListener('error', failed);
+    window.addEventListener('message', render);
+    document.addEventListener('pointerdown', press, { capture: true, passive: true });
+    post({ type: 'helix-preview-ready' });
+    return () => {
+        levels.forEach((level, index) => {
+            console[level] = originals[index];
+        });
+        watcher.disconnect();
+        children.disconnect();
+        window.removeEventListener('error', failed);
+        window.removeEventListener('message', render);
+        document.removeEventListener('pointerdown', press, { capture: true });
+    };
+};

package/dist/sandbox/index.d.ts

@@ -12,9 +12,11 @@
  * hardcodes `sandbox="allow-scripts allow-forms"` on its frame and never
  * `allow-same-origin`, which is the pairing that would undo it.
  */
+export { isRender, LAYOUT_RULES, loggedText, type ServePreviewOptions, servePreview, withoutStylesheets, } from './frame.js';
 export * from './preview/sandbox-preview.js';
 export * from './root/sandbox-root.js';
 export * from './source/sandbox-source.js';
 export * from './status-bar/sandbox-status-bar.js';
 export * from './terminal/sandbox-terminal.js';
+export type { SandboxHighlight, SandboxToken } from './tokens.js';
 export * from './toolbar/sandbox-toolbar.js';

package/dist/sandbox/index.js

@@ -1,3 +1,4 @@
+export { isRender, LAYOUT_RULES, loggedText, servePreview, withoutStylesheets, } from './frame.js';
 export * from './preview/sandbox-preview.js';
 export * from './root/sandbox-root.js';
 export * from './source/sandbox-source.js';

package/dist/sandbox/levels.d.ts

@@ -0,0 +1,10 @@
+import type { ConsoleDetail } from '@fusion.dev/helix-core';
+/** A console level, from the quietest to the loudest. */
+export type ConsoleLevel = ConsoleDetail['level'];
+/** The four levels in order, the quietest first. */
+export declare const LEVELS: readonly ConsoleLevel[];
+/**
+ * Whether a line at `level` shows under a terminal's `level`, which is the
+ * quietest it shows. No floor, or one that names no level, shows every line.
+ */
+export declare const shows: (level: ConsoleLevel, floor: string | undefined) => boolean;