@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,73 @@
+import { HelixHeadlessRadio } from '@fusion.dev/helix-headless/radio';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One choice in a radio group.
+ *
+ * @description
+ * A circle with a dot in it, drawn here rather than by the browser for the
+ * reason the checkbox's box is: this is a `<button role="radio">`, so there was
+ * never a native control to restyle, and the weight and the motion of the mark
+ * are ours either way.
+ *
+ * The dot scales from nothing, like the checkbox's tick, so choosing shows
+ * something happening. It has no color, because color is reserved for state
+ * and being chosen is an answer rather than a state.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Option, Choice
+ * @documentation https://helix.fusion.dev/components/radio
+ *
+ * @cssproperty --radio-background-color - Fill of an unselected circle.
+ * @cssproperty --radio-border-color - Edge of the circle, in every state.
+ * @cssproperty --radio-card-background-color - Fill behind a card-shaped choice.
+ * @cssproperty --radio-card-border-color - Edge around one.
+ * @cssproperty --radio-card-padding - Inset of the card appearance.
+ * @cssproperty --radio-chip-size - Diameter of the chip appearance.
+ * @cssproperty --radio-mark-color - Color of the dot.
+ * @cssproperty --radio-size - Diameter of the circle.
+ */
+export declare class HelixRadio extends HelixHeadlessRadio {
+    static styles: CSSResultGroup;
+    /**
+     * How the choice presents itself.
+     *
+     * - `plain` is the default and is never written: a circle beside its words,
+     *   which is what a list of choices should be almost always.
+     * - `card` puts it in a bounded surface, for options that need room to
+     *   explain themselves: a description, an icon, a price. It is the half a
+     *   `data-card` link cannot do, because a link reports no value and belongs
+     *   to no group, so a card that is genuinely an answer has to be this.
+     *
+     * The circle stays in both. A card whose only marker was its own border would
+     * ask a reader to compare surfaces across a row to find the answer, and would
+     * leave nothing for a high-contrast display.
+     */
+    variant?: 'chip' | 'plain' | 'card';
+    /**
+     * Takes the circle away, leaving the card as the whole control.
+     *
+     * Unnecessary under `chip`, which has no room for a circle beside its mark
+     * and hides it already.
+     *
+     * `card` only, and it is a graphic that goes rather than a radio: the control
+     * in the shadow root is untouched, so the row is still focusable, still
+     * reported to a screen reader, and still the thing a form submits.
+     *
+     * Safe because the card already carries the answer in its surface, a raised
+     * fill inside a primary edge and a three-pixel ring of it. That ring is
+     * recent, and before it there was nothing left saying which card was chosen,
+     * which is why this is a property now and could not have been one then.
+     *
+     * Not on `Checkbox`, deliberately. A radio card with no circle is still
+     * unmistakably one-of-many because its siblings behave that way; a checkbox
+     * card with no box loses the only thing that says you may pick several.
+     */
+    hideControl: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-radio': HelixRadio;
+    }
+}

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

@@ -0,0 +1,74 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessRadio } from '@fusion.dev/helix-headless/radio';
+import { property } from 'lit/decorators.js';
+import { styles } from './radio-root.css.js';
+/**
+ * @summary One choice in a radio group.
+ *
+ * @description
+ * A circle with a dot in it, drawn here rather than by the browser for the
+ * reason the checkbox's box is: this is a `<button role="radio">`, so there was
+ * never a native control to restyle, and the weight and the motion of the mark
+ * are ours either way.
+ *
+ * The dot scales from nothing, like the checkbox's tick, so choosing shows
+ * something happening. It has no color, because color is reserved for state
+ * and being chosen is an answer rather than a state.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Option, Choice
+ * @documentation https://helix.fusion.dev/components/radio
+ *
+ * @cssproperty --radio-background-color - Fill of an unselected circle.
+ * @cssproperty --radio-border-color - Edge of the circle, in every state.
+ * @cssproperty --radio-card-background-color - Fill behind a card-shaped choice.
+ * @cssproperty --radio-card-border-color - Edge around one.
+ * @cssproperty --radio-card-padding - Inset of the card appearance.
+ * @cssproperty --radio-chip-size - Diameter of the chip appearance.
+ * @cssproperty --radio-mark-color - Color of the dot.
+ * @cssproperty --radio-size - Diameter of the circle.
+ */
+let HelixRadio = class HelixRadio extends HelixHeadlessRadio {
+    constructor() {
+        super(...arguments);
+        /**
+         * Takes the circle away, leaving the card as the whole control.
+         *
+         * Unnecessary under `chip`, which has no room for a circle beside its mark
+         * and hides it already.
+         *
+         * `card` only, and it is a graphic that goes rather than a radio: the control
+         * in the shadow root is untouched, so the row is still focusable, still
+         * reported to a screen reader, and still the thing a form submits.
+         *
+         * Safe because the card already carries the answer in its surface, a raised
+         * fill inside a primary edge and a three-pixel ring of it. That ring is
+         * recent, and before it there was nothing left saying which card was chosen,
+         * which is why this is a property now and could not have been one then.
+         *
+         * Not on `Checkbox`, deliberately. A radio card with no circle is still
+         * unmistakably one-of-many because its siblings behave that way; a checkbox
+         * card with no box loses the only thing that says you may pick several.
+         */
+        this.hideControl = false;
+    }
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixRadio.prototype, "variant", void 0);
+__decorate([
+    property({ attribute: 'hide-control', reflect: true, type: Boolean })
+], HelixRadio.prototype, "hideControl", void 0);
+HelixRadio = __decorate([
+    customElement('helix-radio')
+], HelixRadio);
+export { HelixRadio };

package/dist/rating/index.d.ts

@@ -0,0 +1 @@
+export * from './root/rating-root.js';

package/dist/rating/index.js

@@ -0,0 +1 @@
+export * from './root/rating-root.js';

package/dist/rating/root/rating-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,122 @@
+// Generated from src/rating/root/rating-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--_rating-mark-size: var(--rating-size, var(--helix-size-icon-md));
+--_rating-mark-gap: var(--rating-gap, var(--helix-space-2xs));
+
+align-items: center;
+display: inline-flex;
+gap: var(--rating-gap, var(--helix-space-xs));
+}
+
+[part="marks"] {
+display: inline-flex;
+position: relative;
+
+touch-action: pan-y;
+}
+
+[part="track"],
+[part="fill"] {
+display: inline-flex;
+gap: var(--_rating-mark-gap);
+}
+
+[part="track"] {
+color: var(--rating-empty-color, var(--helix-color-border));
+}
+
+[part="fill"] {
+color: var(--rating-color, var(--helix-color-warning));
+inline-size: calc(
+var(--rating-full, 0) *
+(var(--_rating-mark-size) + var(--_rating-mark-gap)) +
+var(--rating-part, 0) *
+var(--_rating-mark-size)
+);
+inset-block: 0;
+inset-inline-start: 0;
+overflow: hidden;
+position: absolute;
+}
+
+[part="mark"] {
+--_rating-star: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.4l6.5-.9z"/></svg>');
+
+background-color: currentcolor;
+block-size: var(--_rating-mark-size);
+flex: 0 0 auto;
+inline-size: var(--_rating-mark-size);
+mask-image: var(--rating-mark, var(--_rating-star));
+mask-position: center;
+mask-repeat: no-repeat;
+mask-size: contain;
+}
+
+[part="option"] {
+all: unset;
+box-sizing: border-box;
+
+cursor: pointer;
+inset-block: 0;
+position: absolute;
+}
+
+[part="option"] {
+--_rating-pitch: calc((100% + var(--_rating-mark-gap)) / var(--rating-steps, 1));
+
+inline-size: var(--_rating-pitch);
+inset-inline-start: calc(
+(var(--rating-step, 1) - 1) *
+var(--_rating-pitch) -
+var(--_rating-mark-gap) /
+2
+);
+}
+
+[part="value"] {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-sm);
+font-variant-numeric: tabular-nums;
+line-height: 1;
+}
+
+:host([variant="dots"]) {
+--_rating-mark-size: var(--rating-size, var(--helix-size-icon-sm));
+}
+
+:host([variant="dots"]) [part="mark"] {
+border-radius: var(--helix-radii-full);
+mask-image: none;
+}
+
+[part="option"]:focus-visible {
+border-radius: var(--helix-radii-sm);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host(:disabled) [part="option"] {
+cursor: not-allowed;
+}
+
+:host(:disabled) [part="marks"] {
+opacity: 0.5;
+}
+
+:host([readonly]) [part="marks"] {
+cursor: default;
+}
+
+[data-slotted] [part="mark"] {
+background-color: transparent;
+mask-image: none;
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,52 @@
+import { HelixHeadlessRating } from '@fusion.dev/helix-headless/rating';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A score out of a few marks, given or shown.
+ *
+ * @description
+ * Presentation only: the marks, and the clip that fills them partway.
+ * Everything about what the score is and how it is chosen is the base class.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Stars, Score, Review score
+ * @documentation https://helix.fusion.dev/components/rating
+ *
+ * @slot mark - The shape of a mark, cloned into every position. Left empty, the
+ * stylesheet draws its own and `--rating-mark` swaps it.
+ *
+ * @cssproperty --rating-color - The color of a filled mark.
+ * @cssproperty --rating-empty-color - And of an unfilled one.
+ * @cssproperty --rating-gap - Space between marks.
+ * @cssproperty --rating-mark - The shape of one mark, as a mask image.
+ * @cssproperty --rating-size - How big one mark is.
+ */
+export declare class HelixRating extends HelixHeadlessRating {
+    static styles: CSSResultGroup;
+    /**
+     * Which mark the row is drawn with.
+     *
+     * `marks` is the star, and is what a rating means to most readers. `dots`
+     * drops the glyph for a plain circle, which says how much rather than how
+     * good: a star carries a judgment that a level of spice, a difficulty or a
+     * confidence has not earned.
+     *
+     * Both are one shape repeated and clipped to the score, so halves work in
+     * either, and both are only a choice of drawing. A scale whose marks are
+     * *different* drawings is a set of choices rather than a quantity: that is
+     * `Radio.Group`, whose options already carry a value and a name each.
+     *
+     * **Undefaulted, because it reflects.** Defaulted to `marks` it wrote
+     * `appearance="marks"` onto every rating the server rendered, which React
+     * held no prop for and reported as a hydration mismatch. The stylesheet was
+     * already written the right way round, naming only `dots`, so marks is what
+     * an unset one draws and nothing else had to move.
+     */
+    variant?: 'dots' | 'marks';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-rating': HelixRating;
+    }
+}

package/dist/rating/root/rating-root.js

@@ -0,0 +1,42 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessRating } from '@fusion.dev/helix-headless/rating';
+import { property } from 'lit/decorators.js';
+import { styles } from './rating-root.css.js';
+/**
+ * @summary A score out of a few marks, given or shown.
+ *
+ * @description
+ * Presentation only: the marks, and the clip that fills them partway.
+ * Everything about what the score is and how it is chosen is the base class.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Stars, Score, Review score
+ * @documentation https://helix.fusion.dev/components/rating
+ *
+ * @slot mark - The shape of a mark, cloned into every position. Left empty, the
+ * stylesheet draws its own and `--rating-mark` swaps it.
+ *
+ * @cssproperty --rating-color - The color of a filled mark.
+ * @cssproperty --rating-empty-color - And of an unfilled one.
+ * @cssproperty --rating-gap - Space between marks.
+ * @cssproperty --rating-mark - The shape of one mark, as a mask image.
+ * @cssproperty --rating-size - How big one mark is.
+ */
+let HelixRating = class HelixRating extends HelixHeadlessRating {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixRating.prototype, "variant", void 0);
+HelixRating = __decorate([
+    customElement('helix-rating')
+], HelixRating);
+export { HelixRating };

package/dist/sandbox/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The sandbox: a preview that runs what it is given, and the panes around it.
+ *
+ * The editor is deliberately absent and lives on in `@fusion.dev/helix-editor`, because
+ * it carries CodeMirror. That is roughly 4 MB installed against a design system
+ * of about the same size, and a `dependencies` entry is paid at install time by
+ * every consumer whether or not they import it, which is the one cost a subpath
+ * export cannot avoid. Its pane takes an editor by slot, so bringing one is a
+ * choice rather than a condition of using this.
+ *
+ * What makes this a sandbox rather than a layout is here: `Sandbox.Preview`
+ * hardcodes `sandbox="allow-scripts allow-forms"` on its frame and never
+ * `allow-same-origin`, which is the pairing that would undo it.
+ */
+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 * from './toolbar/sandbox-toolbar.js';

package/dist/sandbox/index.js

@@ -0,0 +1,20 @@
+/**
+ * The sandbox: a preview that runs what it is given, and the panes around it.
+ *
+ * The editor is deliberately absent and lives on in `@fusion.dev/helix-editor`, because
+ * it carries CodeMirror. That is roughly 4 MB installed against a design system
+ * of about the same size, and a `dependencies` entry is paid at install time by
+ * every consumer whether or not they import it, which is the one cost a subpath
+ * export cannot avoid. Its pane takes an editor by slot, so bringing one is a
+ * choice rather than a condition of using this.
+ *
+ * What makes this a sandbox rather than a layout is here: `Sandbox.Preview`
+ * hardcodes `sandbox="allow-scripts allow-forms"` on its frame and never
+ * `allow-same-origin`, which is the pairing that would undo it.
+ */
+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 * from './toolbar/sandbox-toolbar.js';

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,14 @@
+// Generated from src/sandbox/preview/sandbox-preview.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+min-block-size: 0;
+}
+
+[part="frame"] {
+background-color: var(--helix-color-background);
+block-size: 100%;
+border: none;
+display: block;
+inline-size: 100%;
+}`);

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

@@ -0,0 +1,224 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import type { CSSResultGroup } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/** The frame saying it has a listener, and where to answer it. */
+export interface PreviewReady {
+    type: 'helix-preview-ready';
+}
+/** What the frame is asked to render. */
+export interface PreviewRender {
+    colorMode?: 'dark' | 'light';
+    direction: 'ltr' | 'rtl';
+    layout: 'padded' | 'centered' | 'fullscreen' | 'hug';
+    source: string;
+    styles: string;
+    type: 'helix-preview-render';
+}
+/** One console call from inside the frame. */
+export interface PreviewConsole {
+    level: 'log' | 'info' | 'warn' | 'error';
+    text: string;
+    type: 'helix-preview-console';
+}
+/** How tall the frame says its content is, in CSS pixels. */
+export interface PreviewSize {
+    size: number;
+    type: 'helix-preview-size';
+}
+export type PreviewMessage = PreviewConsole | PreviewReady | PreviewRender | PreviewSize;
+/**
+ * @summary Renders sandbox source in a frame of its own.
+ *
+ * @description
+ * A sandboxed `<iframe>` pointed at `src`, which is a document the consumer
+ * provides. That document imports whatever the examples need, listens for a
+ * render message, and writes the markup into itself.
+ *
+ * **A frame rather than the page.** Rendering into the page meant an example
+ * was styled by whatever surrounded it, which flatters the preview and lies
+ * about it: an example that restyles `helix-card` restyled the sandbox too, a
+ * script in an example ran against the real document, and a stray
+ * `position: fixed` escaped the pane. It also left nothing to capture console
+ * output from, and the terminal has to come from somewhere.
+ *
+ * The cost is that the frame starts empty. Styles and element definitions do
+ * not cross into it, because a document has its own stylesheets and a window
+ * has its own custom element registry, so `src` has to load them. That is the
+ * consumer's document rather than something guessed at here.
+ *
+ * **The source is not trusted, and the frame is what makes that safe.**
+ * `fullscreen` is granted for the same reason and found the same way: a video
+ * in the preview offered a fullscreen button that did nothing at all, because
+ * the policy default is `self`, this frame is not `self`, and a denied request
+ * rejects a promise nobody was watching. Two capabilities now, both explicit,
+ * both starred.
+ *
+ * `allow="clipboard-write *"` is granted explicitly, and the star matters: the
+ * policy defaults to `self` and this frame has an opaque origin, so it is not
+ * `self` and the default denies it. A component inside the preview that copies
+ * to the clipboard is otherwise a control that silently does nothing, which is
+ * how this was found. Nothing else is granted, and a copy still needs the
+ * reader's own gesture.
+ *
+ * `sandbox="allow-scripts"` and no `allow-same-origin`, so the document runs on
+ * an opaque origin: script in an example cannot reach this page, its storage,
+ * its cookies, or the editor the source was typed into. Without it they could,
+ * measured, through an `onerror` handler on an image that fails to load, which
+ * `innerHTML` does not strip the way it refuses a `<script>` tag.
+ *
+ * That is what lets a sandbox hold markup a reader pasted from somewhere, or
+ * one day arrived in a shared link, rather than only what its owner typed.
+ *
+ * `allow-forms` is granted because examples have forms in them and a submit
+ * that silently does nothing is a worse lie than one that navigates a frame
+ * nobody is looking at. Top-level navigation, popups and modals are not.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Result, Output
+ * @documentation https://helix.fusion.dev/sandbox/preview
+ *
+ * @event {HelixConsoleEvent} helix-console - Relayed from the frame, one per console call.
+ * @event {HelixResizeEvent} helix-resize - How tall the frame's content is, whenever it changes.
+ *
+ * @csspart frame - The iframe.
+ */
+export declare class HelixSandboxPreview extends HelixElement {
+    /**
+     * Which half of the palette the frame renders in.
+     *
+     * **The frame is a document and a document has its own color mode.** Setting
+     * `data-color-mode` on this element styles this element, and the contents of
+     * an iframe inherit nothing from it: measured, a frame under a host carrying
+     * the attribute had it unset on its own root. Left alone the frame follows
+     * `prefers-color-scheme`, which is right for a preview that should look like
+     * the reader's own machine, and wrong for one whose tool has a scheme control.
+     *
+     * It matters more than a background: `light-dark()` is compiled to a shim
+     * keyed on this attribute, and of the 56 tokens that differ by scheme the
+     * theme engine emits 19. The other 37 would stay light in a dark preview,
+     * including every one of the 24 series colours a chart reads.
+     */
+    colorMode?: 'dark' | 'light';
+    /**
+     * Document the frame loads, which brings the styles and the elements.
+     */
+    src: string;
+    /**
+     * Markup to render.
+     */
+    source: string;
+    /**
+     * Stylesheet applied inside the frame, alongside the markup.
+     */
+    styles: string;
+    /**
+     * Accessible name for the frame.
+     */
+    label: string;
+    /**
+     * Writing direction inside the frame.
+     */
+    direction?: 'rtl';
+    /**
+     * How the example is placed in the frame.
+     */
+    layout?: 'padded' | 'centered' | 'fullscreen' | 'hug';
+    /** Whether the frame has said it is listening. */
+    private ready;
+    private get frame();
+    /**
+     * The frame's document has finished loading, so its listener exists.
+     *
+     * **The announcement is one shot and the parent can miss it.** The frame
+     * posts `helix-preview-ready` at the end of its own module evaluation and
+     * never repeats it, and `handleMessage` drops anything whose `source` is not
+     * `this.frame?.contentWindow`. That getter reads the render root, so it is
+     * null until this element has rendered once. A frame that loads before that
+     * render commits therefore announces into a guard that refuses it, `ready`
+     * stays false, and `send` returns early forever: the source is set, the
+     * markup is correct, and the preview is blank with nothing logged.
+     *
+     * **It is a race, so it hides in the one place nobody looks.** The frame is
+     * only fast enough to win when its document and its bundle are already in the
+     * HTTP cache, which is a client-side navigation and never a cold load.
+     * Measured on the theme builder reached by clicking a link: `ready` false, a
+     * 9,382 character `source` in place, and an empty preview, where the same
+     * page loaded directly rendered correctly.
+     *
+     * `load` closes it without a retry protocol and without weakening either
+     * check on the way in. The frame's script is `defer`, so it has run by the
+     * time this fires, which makes the event a guarantee that the listener is
+     * there rather than a guess that it might be. The message path stays, because
+     * it is the one that works when the frame is slower than the render, and
+     * either arriving is enough.
+     */
+    private readonly handleFrameLoad;
+    /**
+     * Takes messages from the frame.
+     *
+     * Two checks, and both earn their place.
+     *
+     * The window is the identity: `event.source` is a reference the sender cannot
+     * forge, and this frame's `contentWindow` is one only this element holds.
+     *
+     * The origin has to be opaque. The frame is sandboxed, so every message it
+     * sends arrives as `"null"`, measured. A real origin therefore means the
+     * frame is no longer showing the document it was given: `allow-scripts` lets
+     * an example navigate its own frame, and whatever it navigated to inherits
+     * `contentWindow` and could otherwise write lines into the terminal as though
+     * the example had logged them.
+     */
+    private readonly handleMessage;
+    /**
+     * Where messages to the frame are addressed.
+     *
+     * `'*'`, because there is nothing else to say: a sandboxed document has an
+     * opaque origin and `postMessage` has no target string that names one.
+     *
+     * It costs nothing. What is sent is the example's own source and stylesheet,
+     * to the document that is about to render them, and that document is the one
+     * thing on the page already entitled to both.
+     */
+    private static readonly target;
+    /** Set while a coalesced send is waiting, so only one is ever queued. */
+    private pending;
+    /**
+     * Sends once the typing stops, replacing anything already waiting.
+     *
+     * A frame was tried first and is the wrong unit. Keystrokes arrive fifty to a
+     * hundred and fifty milliseconds apart, so each one lands in a frame of its
+     * own and coalescing by frame coalesces nothing: the example was still being
+     * rebuilt per character. The delay has to be longer than the gap between
+     * keystrokes to catch a burst, and short enough to read as immediate when the
+     * typing stops.
+     */
+    private scheduleSend;
+    /** Sends the current source to the frame, once it is listening. */
+    private send;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Loads the frame's document again, and re-sends the example to it.
+     *
+     * For a bundle that has changed underneath a page nobody reloaded. The frame
+     * carries its own build of the component library, as a classic script it ran
+     * once at load, so a rebuilt bundle reaches a tab that is already open
+     * exactly never: the sandbox around it hot-reloads and the preview inside it
+     * keeps running whatever it started with, which reads as a component fix that
+     * did not work.
+     *
+     * Nothing needs to be resent by the caller. Clearing `ready` and reassigning
+     * `src` puts this back in the state it was in before the first load, and the
+     * new document announces itself the same way the first one did.
+     */
+    reload(): void;
+    protected updated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-sandbox-preview': HelixSandboxPreview;
+    }
+}