@fusion.dev/helix 0.162.1 → 0.164.0

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

@@ -6,4 +6,6 @@ color-mix(in oklab, var(--_callout-color) 10%, transparent)
 color-mix(in oklab, var(--_callout-color) 45%, var(--helix-color-background));}:host([separation="plain"]) {background-color: var(--callout-background-color, transparent);}[part="icon"] {color: var(--_callout-color);display: inline-flex;flex: 0 0 auto;}[part="icon"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}slot[name="icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="content"] {line-height: var(--helix-leading-normal);min-inline-size: 0;}[part="dismiss"] {all: unset;box-sizing: border-box;block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: 0 0 auto;inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);margin-block: calc(var(--helix-space-2xs) * -1);margin-inline: auto calc(var(--helix-space-2xs) * -1);place-content: center;place-items: center;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 color var(--helix-duration-fast) var(--helix-easing-standard);}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="dismiss"] svg,
-slot[name="dismiss-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}@media (prefers-reduced-motion: reduce) {[part="dismiss"] {transition: none;}}slot[name="heading"]::slotted(*) {color: var(--helix-color-foreground);display: block;font-size: var(--callout-font-size, var(--helix-text-control));font-weight: var(--helix-weight-semibold);margin: var(--helix-space-none);}@media print {:host {background-color: transparent;}}`);
+slot[name="dismiss-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}:host(:state(exiting)) {opacity: 0;transition: opacity var(--helix-duration-normal) var(--helix-easing-accelerate);}:host(:state(entering)) {transition: opacity var(--helix-duration-normal) var(--helix-easing-decelerate);}@starting-style {:host(:state(entering)) {opacity: 0;}}@media (prefers-reduced-motion: reduce) {[part="dismiss"],
+:host(:state(exiting)),
+:host(:state(entering)) {transition: none;}}slot[name="heading"]::slotted(*) {color: var(--helix-color-foreground);display: block;font-size: var(--callout-font-size, var(--helix-text-control));font-weight: var(--helix-weight-semibold);margin: var(--helix-space-none);}@media print {:host {background-color: transparent;}}`);

package/dist/canvas/index.d.ts

@@ -1,4 +1,4 @@
-export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasSide, CanvasTone, } from '@fusion.dev/helix-headless/canvas';
+export type { CanvasDocument, CanvasEdge, CanvasEdgeProps, CanvasEnd, CanvasNode, CanvasNodeProps, CanvasPath, CanvasRoute, CanvasRouteEnds, CanvasSide, CanvasTone, } from '@fusion.dev/helix-headless/canvas';
 export { fromJsonCanvas } from '@fusion.dev/helix-headless/canvas';
 export { HelixCanvasEdge } from './edge/canvas-edge.js';
 export { HelixCanvasNode } from './node/canvas-node.js';

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

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));block-size: var(--canvas-block-size, 30rem);border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));border-radius: var(--canvas-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto;overflow: hidden;position: relative;}:host([separation="plain"]) [part="region"] {background-color: transparent;border: none;border-radius: 0;}[part="viewport"] {min-block-size: 0;overflow: hidden;position: relative;}:host(:not(:state(empty))) ::slotted([slot="empty"]) {display: none;}[part="board"] {block-size: var(--_canvas-plane-block-size);inline-size: var(--_canvas-plane-inline-size);left: 0;position: absolute;top: 0;transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--canvas-zoom));transform-origin: 0 0;transition: transform var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid]) [part="viewport"] {background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
+export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));block-size: var(--canvas-block-size, 30rem);border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));border-radius: var(--canvas-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto;overflow: hidden;position: relative;}:host([separation="plain"]) [part="region"] {background-color: transparent;border: none;border-radius: 0;}[part="viewport"] {min-block-size: 0;overflow: hidden;position: relative;}[part="minimap"] {background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));block-size: var(--canvas-minimap-block-size, 7.5rem);border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);box-sizing: border-box;cursor: pointer;inline-size: var(--canvas-minimap-inline-size, 10rem);inset-block-end: var(--helix-space-sm);inset-inline-end: var(--helix-space-sm);position: absolute;touch-action: none;}:host([controls-placement^="bottom"]) [part="minimap"] {inset-block: var(--helix-space-sm) auto;}[part="minimap-node"] {fill: var(--helix-color-foreground-subtle);}[part="minimap-node"][data-group] {fill: none;stroke: var(--helix-color-foreground-subtle);vector-effect: non-scaling-stroke;}[part="minimap-view"] {fill: color-mix(in oklab, var(--helix-color-accent) 12%, transparent);stroke: var(--helix-color-accent);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke;}:host(:not(:state(empty))) ::slotted([slot="empty"]) {display: none;}[part="board"] {block-size: var(--_canvas-plane-block-size);inline-size: var(--_canvas-plane-inline-size);left: 0;position: absolute;top: 0;transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--canvas-zoom));transform-origin: 0 0;transition: transform var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid]) [part="viewport"] {background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
 calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom));transition:
 background-position var(--helix-duration-normal) var(--helix-easing-standard),
 background-size var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid="lines"]) [part="viewport"] {--_canvas-rule: color-mix(in oklab, var(--helix-color-border) 50%, transparent);background-image:

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

@@ -30,6 +30,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --canvas-label-color - The color of the label on a connection.
  * @cssproperty --canvas-label-editor-inline-size - The width of the field for editing a label.
  * @cssproperty --canvas-label-font-size - The size of the label on a connection.
+ * @cssproperty --canvas-minimap-block-size - The height of the minimap, under `controls="minimap"`.
+ * @cssproperty --canvas-minimap-inline-size - The width of the minimap, under `controls="minimap"`.
  * @cssproperty --canvas-radius - The frame's corners.
  * @cssproperty --canvas-selected-color - The color of what is selected: a card's outline, its corners and its move handle, a connection and its ends, and the box drawn to select.
  * @cssproperty --viewport-control-background-color - The background of the pan and zoom buttons. `Map` uses the same property.

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

@@ -21,7 +21,7 @@ var(--code-block-mark-edge-color, var(--helix-color-primary));box-sizing: border
 [part="context"],
 [part="added"],
 [part="removed"],
-[part="filler"] {display: flex;padding-inline: var(--helix-space-md);text-decoration: none;}[part="hunk"] {background-color: var(--helix-color-surface-sunken);color: var(--helix-color-foreground-muted);}[part="added"] {background-color: color-mix(
+[part="filler"] {display: flex;padding-inline: var(--helix-space-md);text-decoration: none;}[part="hunk"] {background-color: var(--helix-color-surface-sunken);color: var(--helix-color-foreground-muted);}[part="fold"] {all: unset;background-color: var(--helix-color-surface-sunken);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;font-family: var(--helix-font-sans);inline-size: 100%;padding-inline: var(--helix-space-md);}[part="fold"]:hover {color: var(--helix-color-foreground);}[part="fold"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="added"] {background-color: color-mix(
 in srgb,
 var(--code-block-added-color, var(--helix-color-success)) 14%,
 var(--code-block-background-color, var(--helix-color-background))
@@ -29,7 +29,15 @@ var(--code-block-background-color, var(--helix-color-background))
 in srgb,
 var(--code-block-removed-color, var(--helix-color-danger)) 14%,
 var(--code-block-background-color, var(--helix-color-background))
-);}[part="marker"] {padding-inline-end: var(--helix-space-xs);user-select: none;}[part="added"] [part="marker"] {color: color-mix(
+);}[part="added"] [part="changed"] {background-color: color-mix(
+in srgb,
+var(--code-block-added-color, var(--helix-color-success)) 32%,
+var(--code-block-background-color, var(--helix-color-background))
+);border-radius: var(--helix-radii-sm);}[part="removed"] [part="changed"] {background-color: color-mix(
+in srgb,
+var(--code-block-removed-color, var(--helix-color-danger)) 32%,
+var(--code-block-background-color, var(--helix-color-background))
+);border-radius: var(--helix-radii-sm);}[part="marker"] {padding-inline-end: var(--helix-space-xs);user-select: none;}[part="added"] [part="marker"] {color: color-mix(
 in oklab,
 var(--code-block-added-color, var(--helix-color-success)) 55%,
 var(--helix-color-foreground)
@@ -41,5 +49,6 @@ var(--helix-color-foreground)
 [part="old"],
 [part="new"] {overflow: visible;white-space: pre-wrap;}[part="added"],
 [part="removed"],
+[part="changed"],
 [part="hunk"],
 [part="filler"] {print-color-adjust: exact;}}`);

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

@@ -2,6 +2,7 @@ import { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
 import type { CSSResultGroup } from 'lit';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
+import '../../option/index.js';
 /**
  * @summary A command palette: a list of commands that opens from anywhere on the page and filters as you type.
  *

package/dist/command/root/command-root.js

@@ -8,6 +8,7 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
+import '../../option/index.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './command-root.css.js';
 let HelixCommand = class HelixCommand extends HelixHeadlessCommand {

package/dist/element-events.generated.js

@@ -211,6 +211,8 @@ registerElementEvents({
     'helix-radio-group': ['change', 'helix-before-change', 'helix-select', 'input'],
     'helix-rating': ['change', 'helix-before-change', 'helix-clear', 'helix-preview', 'input'],
     'helix-sandbox': [
+        'change',
+        'helix-before-change',
         'helix-before-edit',
         'helix-before-panel-resize',
         'helix-before-split',
@@ -335,7 +337,13 @@ registerElementEvents({
         'volumechange',
         'waiting',
     ],
-    'helix-video-playlist': ['helix-activate', 'helix-before-activate', 'helix-end'],
+    'helix-video-playlist': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-reorder',
+        'helix-end',
+        'helix-reorder',
+    ],
     'helix-video-playlist-item': ['helix-select'],
     'helix-video-playlist-menu': ['helix-select'],
     'helix-virtual-list': ['change', 'helix-before-change', 'helix-load-more', 'helix-range-change'],

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

@@ -12,7 +12,7 @@ var(--helix-space-lg) +
 var(--helix-space-sm) +
 1em +
 var(--helix-space-2xs)
-);text-overflow: ellipsis;white-space: nowrap;}[part~="row"][aria-expanded] {cursor: pointer;padding-inline-start: calc(
+);text-overflow: ellipsis;white-space: nowrap;}[part="empty"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);padding-inline: calc(var(--helix-space-sm) + 1em + var(--helix-space-2xs));}[part~="row"][aria-expanded] {cursor: pointer;padding-inline-start: calc(
 var(--object-inspector-level) *
 var(--helix-space-lg) +
 var(--helix-space-sm)

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

@@ -1,2 +1,5 @@
 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%;}`);
+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);}`);

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

@@ -72,6 +72,15 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * reports. A page draws its own spinner or message from either, such as a
  * sibling shown by `helix-sandbox-preview:state(failed) + .message`.
  *
+ * **A failed preview shows the error over the example**, in the `error` part,
+ * until the next source is sent. The terminal says it too, so the part is not
+ * announced. Hide it with `::part(error) { display: none }` where the page
+ * draws its own.
+ *
+ * **`controls` draws two buttons in the preview's corner**: one reloads the
+ * frame's document, as `reload()` does, and one opens the example in a new
+ * tab, as `open()` does. The tab runs it in a frame sandboxed as this one is.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Result, Output
@@ -80,7 +89,11 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * @event {HelixConsoleEvent} helix-console - Fired once per console call in the frame.
  * @event {HelixResizeEvent} helix-resize - Fired when the height of the frame's content changes, with the new height.
  *
+ * @csspart controls - The buttons in the preview's corner, under `controls`.
+ * @csspart error - The error the example threw and did not catch, shown over it while the preview is `failed`.
  * @csspart frame - The iframe.
+ * @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 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.
@@ -107,6 +120,11 @@ export declare class HelixSandboxPreview extends HelixElement {
      * including every one of the 24 series colors a chart reads.
      */
     colorMode?: 'dark' | 'light';
+    /**
+     * Whether the preview draws a reload button and a button that opens the
+     * example in a new tab, in its corner.
+     */
+    controls: boolean;
     /**
      * Writing direction inside the frame.
      *
@@ -134,6 +152,16 @@ export declare class HelixSandboxPreview extends HelixElement {
      * could read it.
      */
     layout?: 'padded' | 'centered' | 'fullscreen' | 'hug';
+    /**
+     * The name of the button that opens the example in a new tab, under
+     * `controls`.
+     */
+    openLabel: string;
+    /**
+     * The name of the button that reloads the frame's document, under
+     * `controls`.
+     */
+    reloadLabel: string;
     /**
      * A script to run as a module after the markup, on every render of new
      * source. A sandbox writes its `js` pane here.
@@ -158,6 +186,10 @@ export declare class HelixSandboxPreview extends HelixElement {
     private sentSource;
     /** The source the frame held when it last reported an uncaught error. */
     private failedSource;
+    /** What the example threw and did not catch, while the preview is `failed`. */
+    private failure;
+    /** Says the preview failed with `text`, or, with none, that it has not. */
+    private fail;
     /** What the frame is sent as its source: the markup, and the script after it. */
     private get sending();
     private get frame();
@@ -237,8 +269,24 @@ export declare class HelixSandboxPreview extends HelixElement {
      * short enough to read as immediate when the typing stops.
      */
     private scheduleSend;
+    /** What the frame is sent: the source, its stylesheet and its settings. */
+    private get message();
     /** Sends the current source to the frame, once it is listening. */
     private send;
+    /**
+     * Opens the example in a new tab, and returns the tab's window, or `null`
+     * where the browser refused to open one.
+     *
+     * **The tab runs the example as this preview does**: in a frame that fills
+     * it, with this frame's `sandbox`, loading `src` or the built-in document,
+     * and sent the example once it loads. The example stays on an opaque origin,
+     * and the tab's `opener` is cleared, so it cannot reach this page. The tab
+     * shows the example as it was when it opened, and edits after that do not
+     * reach it. A short inline script in the tab sends the example, so on a page
+     * whose Content Security Policy refuses inline scripts the tab opens empty,
+     * as the built-in document does there.
+     */
+    open(): Window | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
@@ -262,6 +310,8 @@ export declare class HelixSandboxPreview extends HelixElement {
      */
     private unready;
     protected updated(changed: PropertyValues): void;
+    /** The reload and open buttons, under `controls`. */
+    private renderControls;
     protected render(): TemplateResult;
     static styles: CSSResultGroup;
 }

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

@@ -8,13 +8,17 @@ var HelixSandboxPreview_1;
 import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, words, } from '@fusion.dev/helix-core';
 const SETTLE = 120;
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { defaultFrame, withScript } from '../frame.js';
 import { styles as sheet } from './sandbox-preview.css.js';
+const SANDBOX = 'allow-scripts allow-forms';
 let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     constructor() {
         super(...arguments);
+        this.controls = false;
         this.label = 'Preview';
+        this.openLabel = 'Open preview in a new tab';
+        this.reloadLabel = 'Reload preview';
         this.script = '';
         this.source = '';
         this.src = '';
@@ -38,7 +42,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
                 this.dispatchEvent(new HelixConsoleEvent({ level: data.level, text: data.text }));
                 if (data.uncaught) {
                     this.failedSource = this.sentSource;
-                    this.toggleState('failed', true);
+                    this.fail(data.text);
                 }
             }
             if (data?.type === 'helix-preview-press') {
@@ -52,6 +56,10 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     }
     static { HelixSandboxPreview_1 = this; }
     static { this.words = 'helix-sandbox-preview'; }
+    fail(text) {
+        this.failure = text;
+        this.toggleState('failed', text !== undefined);
+    }
     get sending() {
         return withScript(this.source, this.script);
     }
@@ -62,16 +70,13 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     scheduleSend() {
         this.settle.start(SETTLE, () => {
             if (this.sending !== this.failedSource) {
-                this.toggleState('failed', false);
+                this.fail();
             }
             this.send();
         });
     }
-    send() {
-        if (!this.ready) {
-            return;
-        }
-        const message = {
+    get message() {
+        return {
             ...(this.colorMode ? { colorMode: this.colorMode } : {}),
             direction: this.direction ?? 'ltr',
             layout: this.layout ?? 'padded',
@@ -79,9 +84,39 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             styles: this.styles,
             type: 'helix-preview-render',
         };
-        this.frame?.contentWindow?.postMessage(message, HelixSandboxPreview_1.target);
+    }
+    send() {
+        if (!this.ready) {
+            return;
+        }
+        this.frame?.contentWindow?.postMessage(this.message, HelixSandboxPreview_1.target);
         this.sentSource = this.sending;
     }
+    open() {
+        const tab = window.open('', '_blank');
+        if (!tab) {
+            return null;
+        }
+        tab.opener = null;
+        const { body } = tab.document;
+        tab.document.title = this.label;
+        body.style.margin = '0';
+        const frame = tab.document.createElement('iframe');
+        frame.setAttribute('sandbox', SANDBOX);
+        frame.title = this.label;
+        frame.style.cssText = 'block-size: 100vh; border: none; display: block; inline-size: 100vw';
+        if (this.src === '') {
+            frame.srcdoc = defaultFrame();
+        }
+        else {
+            frame.src = this.frame?.src || this.src;
+        }
+        const send = tab.document.createElement('script');
+        send.textContent = `const frame = document.currentScript.previousElementSibling
+frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.message)}, '*')`;
+        body.append(frame, send);
+        return tab;
+    }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('message', this.handleMessage);
@@ -106,7 +141,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         this.ready = false;
         this.sentSource = undefined;
         this.failedSource = undefined;
-        this.toggleState('failed', false);
+        this.fail();
         this.toggleState('loading', true);
     }
     updated(changed) {
@@ -119,7 +154,20 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             this.scheduleSend();
             return;
         }
-        this.send();
+        if (changed.has('colorMode') || changed.has('direction') || changed.has('layout')) {
+            this.send();
+        }
+    }
+    renderControls() {
+        if (!this.controls) {
+            return nothing;
+        }
+        const reload = this.reloadLabel;
+        const open = this.openLabel;
+        return html `<div part="controls">
+      <button part="reload" type="button" @click=${() => this.reload()}>${reload}</button>
+      <button part="open" type="button" @click=${() => this.open()}>${open}</button>
+    </div>`;
     }
     render() {
         return html `<iframe
@@ -129,14 +177,17 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
       srcdoc=${this.src === '' ? defaultFrame() : nothing}
       title=${this.label}
       allow="clipboard-write *; fullscreen *"
-      sandbox="allow-scripts allow-forms"
-    ></iframe>`;
+      sandbox=${SANDBOX}
+    ></iframe>${this.failure === undefined ? nothing : html `<pre part="error">${this.failure}</pre>`}${this.renderControls()}`;
     }
     static { this.styles = sheet; }
 };
 __decorate([
     property({ attribute: 'color-mode' })
 ], HelixSandboxPreview.prototype, "colorMode", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixSandboxPreview.prototype, "controls", void 0);
 __decorate([
     property()
 ], HelixSandboxPreview.prototype, "direction", void 0);
@@ -147,6 +198,14 @@ __decorate([
 __decorate([
     property()
 ], HelixSandboxPreview.prototype, "layout", void 0);
+__decorate([
+    words,
+    property({ attribute: 'open-label' })
+], HelixSandboxPreview.prototype, "openLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'reload-label' })
+], HelixSandboxPreview.prototype, "reloadLabel", void 0);
 __decorate([
     property()
 ], HelixSandboxPreview.prototype, "script", void 0);
@@ -159,6 +218,9 @@ __decorate([
 __decorate([
     property()
 ], HelixSandboxPreview.prototype, "styles", void 0);
+__decorate([
+    state()
+], HelixSandboxPreview.prototype, "failure", void 0);
 HelixSandboxPreview = HelixSandboxPreview_1 = __decorate([
     customElement('helix-sandbox-preview')
 ], HelixSandboxPreview);

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

@@ -1,4 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {background-color: var(--helix-color-background);display: grid;grid-template-rows: auto minmax(0, 1fr) auto;min-block-size: var(--sandbox-min-block-size, 20rem);overflow: hidden;}::slotted([slot="toolbar"]) {grid-row: 1;}[part="body"] {grid-row: 2;}::slotted([slot="status"]) {grid-row: 3;}[part="body"],
 [part="panes"] {--splitter-color: var(--sandbox-separator-color, var(--helix-color-border));--splitter-target: calc(var(--sandbox-grab, var(--helix-space-2xs)) * 2);min-block-size: 0;min-inline-size: 0;}[part="panes"] {block-size: 100%;}[part="body"]:not([data-panel])::part(corner),
-[part="body"]:not([data-panel])::part(separator) {display: none;}[part="pane"] {block-size: 100%;min-block-size: 0;min-inline-size: 0;overflow: hidden;}[part="panel"] {block-size: 100%;min-block-size: 0;overflow: hidden;}::slotted([slot="panel"]) {block-size: 100%;min-block-size: 0;}::slotted(helix-sandbox-preview) {background-color: var(--helix-color-background);block-size: 100%;color: var(--helix-color-foreground);display: block;}@media print {:host {display: none;}}`);
+[part="body"]:not([data-panel])::part(separator) {display: none;}[part="pane"] {block-size: 100%;min-block-size: 0;min-inline-size: 0;overflow: hidden;}[part="pane"][data-files] {display: grid;grid-template-rows: auto minmax(0, 1fr);}[part="files"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);overflow-x: auto;}[part="file"] {background-color: transparent;border: none;border-block-end: var(--helix-border-thick) solid transparent;color: var(--helix-color-foreground-muted);cursor: pointer;font: inherit;padding: var(--helix-space-xs) var(--helix-space-sm);white-space: nowrap;}[part="file"]:hover {color: var(--helix-color-foreground);}[part="file"][aria-selected="true"] {border-block-end-color: var(--helix-color-accent);color: var(--helix-color-foreground);}[part="file"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[data-files] > [role="tabpanel"] {min-block-size: 0;}::slotted([hidden]) {display: none;}[part="panel"] {block-size: 100%;min-block-size: 0;overflow: hidden;}::slotted([slot="panel"]) {block-size: 100%;min-block-size: 0;}::slotted(helix-sandbox-preview) {background-color: var(--helix-color-background);block-size: 100%;color: var(--helix-color-foreground);display: block;}@media print {:host {display: none;}}`);

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

@@ -20,6 +20,20 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * pointer, the keyboard, and the corner. The inner splitter holds the panes and
  * the outer one holds the panel, so the panel spans the full width.
  *
+ * **Several source panes are files**, one shown at a time under a row of
+ * tabs, each named by the pane's `label` or, without one, its `name`. `file`
+ * holds the `name` of the pane shown. The tabs are a tab list: the arrow keys
+ * move between them and show each pane, and `Home` and `End` go to the first
+ * and the last. Choosing one sends `helix-before-change` with the pane's
+ * `name`, which you can cancel, and `change` once `file` holds it. The panes
+ * not shown carry `hidden`. One pane draws no tabs.
+ *
+ * **Any editor can be the source pane**: an element in the `source` slot with
+ * a `name` that dispatches `helix-before-edit` with its text, which bubbles.
+ * A wrapper around CodeMirror or Monaco sends one on each change and is a pane
+ * like `helix-sandbox-source`, and the sandbox reads its `value` to seed the
+ * preview. Dispatch `helix-caret` from it too for the status bar's position.
+ *
  * On a focused divider, the arrow keys move it, and `Home` and `End` move it
  * to its ends. `Enter` on the panes divider shuts the lead pane, and pressed
  * again it opens the pane where it was. `Enter` on the panel divider shuts the
@@ -38,6 +52,8 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @slot status - A status bar, spanning both panes at the bottom.
  * @slot toolbar - A bar across the top, spanning both panes.
  *
+ * @event {Event} change - A file tab showed its pane, whose `name` `file` now holds.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a file tab shows its pane, with the pane's `name`. Cancelable: cancel it to keep the pane shown.
  * @event {HelixBeforeEditEvent} helix-before-edit - Fired before the source is edited. The source pane dispatches it, and you can listen for it on the sandbox. Cancelable: cancel it to keep the source unchanged.
  * @event {HelixBeforePanelResizeEvent} helix-before-panel-resize - Fired before the panel's divider is released, with the panel's height in pixels. A panel dragged closed reports `panel-collapsed-size`, its smallest height. Cancelable: cancel it to keep the current height.
  * @event {HelixBeforeSplitEvent} helix-before-split - Fired before the panes' divider is released, with the lead pane's share. Cancelable: cancel it to keep the current split.
@@ -50,6 +66,8 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @csspart body - The splitter holding the panes above the panel. `::part(body):state(dragging)` matches while its divider is held.
  * @csspart corner - The handle where the two dividers cross.
+ * @csspart file - One file tab, `aria-selected` while its pane is shown.
+ * @csspart files - The file tabs over the source panes, where there are several.
  * @csspart pane - Either pane.
  * @csspart panel - The box that holds the slotted panel.
  * @csspart panes - The splitter holding the source and preview panes. `::part(panes):state(dragging)` matches while its divider is held.
@@ -92,6 +110,16 @@ export declare class HelixSandbox extends HelixElement {
      * change, and it needs no first frame to be read on.
      */
     defaultSplit: number;
+    /**
+     * The `name` of the source pane shown, where the sandbox holds several.
+     *
+     * Unset, or a name no pane has, shows the first.
+     */
+    file?: string;
+    /**
+     * The name of the file tabs, read by screen readers.
+     */
+    filesLabel: string;
     /**
      * Which pane comes first, before the divider.
      *
@@ -163,6 +191,26 @@ export declare class HelixSandbox extends HelixElement {
      * platform answering on the client, which is where a divider is any use.
      */
     private hasPanel;
+    /** The source panes where there are several, each a file with a tab. */
+    private files;
+    /** The panes this element wrote `hidden` on, to take it off again. */
+    private readonly hid;
+    /** The pane shown among the files. */
+    private get shownFile();
+    /** Notes the source panes, which are files where there are several. */
+    private readFiles;
+    /** Shows the pane a file tab names, once nobody refused. */
+    private chooseFile;
+    /**
+     * Arrow keys, `Home` and `End` on the file tabs, which move to a tab and
+     * show its pane, as a tab list that follows focus does. Left and Right swap
+     * on a right-to-left page.
+     */
+    private readonly handleFileKey;
+    /** The row of file tabs, where there are several source panes. */
+    private renderFiles;
+    /** Hides the files not shown, and shows any this element hid that is now. */
+    private showFile;
     /**
      * The body's height, which is what a pixel panel is a fraction of.
      *
@@ -457,6 +505,13 @@ export declare class HelixSandbox extends HelixElement {
      * question the host can answer directly.
      */
     private readonly readPanel;
+    /** Shows the file chosen, once the tabs that choose it are drawn. */
+    protected updated(changed: PropertyValues): void;
+    /**
+     * One pane and the slot it shows. The source pane holds the file tabs, where
+     * there are several, and is then the panel they control.
+     */
+    private renderPane;
     protected render(): TemplateResult;
     static styles: CSSResultGroup;
 }