@fusion.dev/helix 0.172.0 → 0.174.0

package/dist/copy-button/root/copy-button-root.css.js

@@ -2,5 +2,5 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {--_icon-button-ink: var(--copy-button-color, var(--helix-color-foreground-muted));--_icon-button-ink-hover: var(
 --copy-button-color-hover,
 var(--copy-button-color, var(--helix-color-foreground))
-);--_icon-button-size: var(--copy-button-size, var(--icon-button-size, var(--helix-size-control)));}[part="button"] {display: inline-grid;place-items: center;}[part="button"] > slot {grid-area: 1 / 1;}slot[hidden] {display: none;}[part="button"][data-copied] {color: var(--copy-button-success-color, var(--helix-color-success));}:host(:not(:disabled)) [part="button"][data-copied]:hover {color: var(--copy-button-success-color, var(--helix-color-success));}[part="button"][data-failed],
+);--_icon-button-size: var(--copy-button-size, var(--icon-button-size, var(--helix-size-control)));}[part="button"] {display: inline-grid;place-items: center;}[part="button"] > slot {grid-area: 1 / 1;}:host([show-label]) [part="button"] {column-gap: var(--helix-space-xs);grid-auto-flow: column;inline-size: auto;padding-inline: var(--helix-space-sm);}[part="text"] {display: inline-grid;font-weight: var(--helix-weight-medium);grid-area: 1 / 2;justify-items: start;}[part="text"] > span {grid-area: 1 / 1;}[part="text"] > [hidden] {display: block;visibility: hidden;}slot[hidden] {display: none;}[part="button"][data-copied] {color: var(--copy-button-success-color, var(--helix-color-success));}:host(:not(:disabled)) [part="button"][data-copied]:hover {color: var(--copy-button-success-color, var(--helix-color-success));}[part="button"][data-failed],
 :host(:not(:disabled)) [part="button"][data-failed]:hover {color: var(--copy-button-error-color, var(--helix-color-danger));}slot > svg {block-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));inline-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));}@media print {:host {display: none;}}`);

package/dist/element-events.generated.js

@@ -362,5 +362,12 @@ registerElementEvents({
     ],
     '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'],
+    'helix-virtual-list': [
+        'change',
+        'helix-before-change',
+        'helix-before-reorder',
+        'helix-load-more',
+        'helix-range-change',
+        'helix-reorder',
+    ],
 });

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

@@ -9,7 +9,8 @@ export const styles = createSheet(`:host {display: contents;}[part="region"] {ba
 ".      down  .      notes"
 ".      .     .      full";}[part="legend"] {display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);inset-block-end: var(--helix-space-sm);inset-inline-start: var(--helix-space-sm);max-inline-size: calc(100% - var(--helix-space-sm) * 3 - var(--helix-size-control-sm));position: absolute;}:host([controls-placement="bottom-start"]) [part="legend"] {inset-inline: auto var(--helix-space-sm);}@container (inline-size < 40rem) {[part="legend"] {flex-wrap: nowrap;inset-block-end: calc(var(--helix-space-sm) - var(--helix-space-2xs));inset-inline-start: calc(var(--helix-space-sm) - var(--helix-space-2xs));overflow-x: auto;padding: var(--helix-space-2xs);scrollbar-width: none;}}[part~="legend-item"] {align-items: center;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));block-size: var(--helix-size-control-tight);border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);white-space: nowrap;}[part~="legend-item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="legend-item"]:nth-child(24n + 1) {--_graph-swatch: var(--helix-color-series-1);}[part~="legend-item"]:nth-child(24n + 2) {--_graph-swatch: var(--helix-color-series-2);}[part~="legend-item"]:nth-child(24n + 3) {--_graph-swatch: var(--helix-color-series-3);}[part~="legend-item"]:nth-child(24n + 4) {--_graph-swatch: var(--helix-color-series-4);}[part~="legend-item"]:nth-child(24n + 5) {--_graph-swatch: var(--helix-color-series-5);}[part~="legend-item"]:nth-child(24n + 6) {--_graph-swatch: var(--helix-color-series-6);}[part~="legend-item"]:nth-child(24n + 7) {--_graph-swatch: var(--helix-color-series-7);}[part~="legend-item"]:nth-child(24n + 8) {--_graph-swatch: var(--helix-color-series-8);}[part~="legend-item"]:nth-child(24n + 9) {--_graph-swatch: var(--helix-color-series-9);}[part~="legend-item"]:nth-child(24n + 10) {--_graph-swatch: var(--helix-color-series-10);}[part~="legend-item"]:nth-child(24n + 11) {--_graph-swatch: var(--helix-color-series-11);}[part~="legend-item"]:nth-child(24n + 12) {--_graph-swatch: var(--helix-color-series-12);}[part~="legend-item"]:nth-child(24n + 13) {--_graph-swatch: var(--helix-color-series-13);}[part~="legend-item"]:nth-child(24n + 14) {--_graph-swatch: var(--helix-color-series-14);}[part~="legend-item"]:nth-child(24n + 15) {--_graph-swatch: var(--helix-color-series-15);}[part~="legend-item"]:nth-child(24n + 16) {--_graph-swatch: var(--helix-color-series-16);}[part~="legend-item"]:nth-child(24n + 17) {--_graph-swatch: var(--helix-color-series-17);}[part~="legend-item"]:nth-child(24n + 18) {--_graph-swatch: var(--helix-color-series-18);}[part~="legend-item"]:nth-child(24n + 19) {--_graph-swatch: var(--helix-color-series-19);}[part~="legend-item"]:nth-child(24n + 20) {--_graph-swatch: var(--helix-color-series-20);}[part~="legend-item"]:nth-child(24n + 21) {--_graph-swatch: var(--helix-color-series-21);}[part~="legend-item"]:nth-child(24n + 22) {--_graph-swatch: var(--helix-color-series-22);}[part~="legend-item"]:nth-child(24n + 23) {--_graph-swatch: var(--helix-color-series-23);}[part~="legend-item"]:nth-child(24n + 24) {--_graph-swatch: var(--helix-color-series-24);}[part~="legend-item"][data-tone="accent"] {--_graph-swatch: var(--helix-color-accent);}[part~="legend-item"][data-tone="danger"] {--_graph-swatch: var(--helix-color-danger);}[part~="legend-item"][data-tone="info"] {--_graph-swatch: var(--helix-color-info);}[part~="legend-item"][data-tone="neutral"] {--_graph-swatch: var(--helix-color-foreground-muted);}[part~="legend-item"][data-tone="primary"] {--_graph-swatch: var(--helix-color-primary);}[part~="legend-item"][data-tone="success"] {--_graph-swatch: var(--helix-color-success);}[part~="legend-item"][data-tone="warning"] {--_graph-swatch: var(--helix-color-warning);}[part="legend-swatch"] {block-size: var(--helix-space-xs);border: var(--helix-border-thin) solid var(--_graph-swatch, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);box-sizing: border-box;background-color: var(--_graph-swatch, var(--helix-color-foreground-muted));flex: 0 0 auto;inline-size: var(--helix-space-xs);}[part~="legend-item-hidden"] {color: var(--helix-color-foreground-subtle);}[part~="legend-item-hidden"] [part="legend-swatch"] {background-color: transparent;}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs);}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto;}[part="filter-icon"] svg,
 slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="search-field"] {appearance: none;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-2xs);}[part="search-field"]::placeholder {color: var(--helix-color-foreground-subtle);}[part="search-field"]:focus-visible {outline: none;}[part="search"]:has([part="search-field"]:focus-visible),
-[part="list"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="count"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;padding-inline-end: calc(var(--helix-space-xs) - var(--helix-space-2xs));}[part="empty"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);grid-area: 2 / 1;padding: var(--helix-space-sm);}[part="list"] {min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: var(--helix-space-2xs);}[part~="note"] {align-items: center;box-sizing: border-box;cursor: pointer;display: flex;font-size: var(--graph-note-text, var(--helix-text-sm));gap: var(--helix-space-sm);min-block-size: var(--helix-size-control-tight);padding-block: var(--helix-space-2xs);padding-inline: var(--graph-note-padding-inline, var(--helix-space-xs));user-select: none;}[part~="note"]:hover,
+[part="list"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="count"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;padding-inline-end: calc(var(--helix-space-xs) - var(--helix-space-2xs));}[part="empty"],
+[part="loading"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);grid-area: 2 / 1;padding: var(--helix-space-sm);}[part="list"] {min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: var(--helix-space-2xs);}[part~="note"] {align-items: center;box-sizing: border-box;cursor: pointer;display: flex;font-size: var(--graph-note-text, var(--helix-text-sm));gap: var(--helix-space-sm);min-block-size: var(--helix-size-control-tight);padding-block: var(--helix-space-2xs);padding-inline: var(--graph-note-padding-inline, var(--helix-space-xs));user-select: none;}[part~="note"]:hover,
 [part="list"]:focus-visible [part~="note-cursor"] {--_graph-wash: var(
 --graph-note-hover-color,
 light-dark(

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_orb-size: calc(var(--helix-size-loader-lg) * 1.5);--_orb-color: var(--orb-color, currentColor);--_orb-ground: var(--orb-ground, var(--helix-color-background));block-size: var(--orb-size, var(--_orb-size));display: inline-block;flex-shrink: 0;inline-size: var(--orb-size, var(--_orb-size));vertical-align: middle;}:host([size="sm"]) {--_orb-size: var(--helix-size-loader-md);}:host([size="lg"]) {--_orb-size: calc(var(--helix-size-loader-lg) * 2);}[part="canvas"] {block-size: 100%;color: var(--_orb-color);display: block;inline-size: 100%;text-decoration-color: var(--_orb-ground);}[part="canvas"][hidden] {display: none;}@media print {:host {display: none;}}`);
+export const styles = createSheet(`:host {--_orb-size: calc(var(--helix-size-loader-lg) * 1.5);--_orb-color: var(--orb-color, currentColor);--_orb-ground: var(--orb-ground, var(--helix-color-background));block-size: var(--orb-size, var(--_orb-size));display: inline-block;flex-shrink: 0;inline-size: var(--orb-size, var(--_orb-size));position: relative;vertical-align: middle;}::slotted(*) {block-size: 100%;inline-size: 100%;inset: 0;position: absolute;}:host([size="sm"]) {--_orb-size: var(--helix-size-loader-md);}:host([size="lg"]) {--_orb-size: calc(var(--helix-size-loader-lg) * 2);}[part="canvas"] {animation-iteration-count: var(--orb-speed, 1);block-size: 100%;color: var(--_orb-color);display: block;inline-size: 100%;text-decoration-color: var(--_orb-ground);}[part="canvas"][hidden] {display: none;}@media print {:host {display: none;}}`);

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

@@ -32,10 +32,18 @@ import { type OrbState } from '../shapes.js';
  *
  * The orb is styled only and has behavior, which the tier split does not
  * 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.
+ * `announce` makes it a status region, and the rest is drawing dots to a
+ * canvas.
+ *
+ * **A shape of your own goes in the default slot**, such as an SVG, an
+ * image, or an animation. The orb draws it over its box in place of the dots
+ * and stops drawing them, and keeps its role, name, busy state and custom
+ * states, so your stylesheet can change what you slotted by state, such as
+ * `helix-orb:state(working) svg { animation-duration: 1s }`. What you slot is
+ * for the eye: a screen reader hears the orb's name.
+ *
+ * `--orb-speed` scales how fast the dots move, so `0.5` is a calmer orb at
+ * half the tempo.
  *
  * 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,
@@ -47,12 +55,15 @@ import { type OrbState } from '../shapes.js';
  * @aliases Thinking, Activity, Agent, Status
  * @documentation https://fusion.dev/helix/components/orb
  *
- * @csspart canvas - The canvas the dots are drawn on.
+ * @slot - A shape of your own, drawn over the orb's box in place of the dots.
+ *
+ * @csspart canvas - The canvas the dots are drawn on. Hidden while the default slot holds a shape.
  * @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`.
+ * @cssproperty --orb-speed - How fast the dots move, as a multiple of each state's own tempo. Defaults to `1`.
  *
  * @cssstate connecting - The orb shows `connecting`.
  * @cssstate done - The orb shows `done`.
@@ -137,6 +148,12 @@ export declare class HelixOrb extends HelixElement {
     stateLabels: Partial<Record<OrbState, string>>;
     private canvas;
     private context;
+    /**
+     * Whether the default slot holds a shape of the page's, which the dots give
+     * way to. A plain field, written to the canvas by hand as a lost context is,
+     * so finding a shape on the first update asks for no second one.
+     */
+    private own;
     /**
      * Whether anybody is looking, and the loop that draws for them.
      *
@@ -181,6 +198,8 @@ export declare class HelixOrb extends HelixElement {
     /** The word for the state drawn, in the page's words where it gave them. */
     private get word();
     protected render(): TemplateResult;
+    /** Stops the dots for a shape the page slotted, and starts them again once it is gone. */
+    private readonly handleSlotChange;
     protected firstUpdated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -4,7 +4,7 @@ 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, readColorAlpha, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, PaintGateController, readColorAlpha, slotFilled, words, 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';
@@ -31,8 +31,9 @@ let HelixOrb = class HelixOrb extends HelixElement {
             working: 'Working',
         };
         this.context = null;
+        this.own = false;
         this.gate = new PaintGateController(this, {
-            canRun: () => !!this.context && !this.lost,
+            canRun: () => !!this.context && !this.lost && !this.own,
             onFrame: (delta) => {
                 this.paint(delta);
             },
@@ -54,6 +55,19 @@ let HelixOrb = class HelixOrb extends HelixElement {
         this.morphAt = 0;
         this.reach = 0;
         this.phase = STILL_PHASE;
+        this.handleSlotChange = (event) => {
+            this.own = slotFilled(event.target);
+            this.canvas?.toggleAttribute('hidden', this.own || this.lost);
+            if (this.own) {
+                this.gate.stop();
+            }
+            else if (this.hasUpdated) {
+                this.box = 0;
+                this.measure();
+                this.paint(0);
+                this.gate.play();
+            }
+        };
         this.handleLost = () => {
             this.lost = true;
             this.gate.stop();
@@ -61,7 +75,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
         };
         this.handleRestored = () => {
             this.lost = false;
-            this.canvas?.toggleAttribute('hidden', false);
+            this.canvas?.toggleAttribute('hidden', this.own);
             this.box = 0;
             this.measure();
             this.paint(0);
@@ -98,7 +112,8 @@ let HelixOrb = class HelixOrb extends HelixElement {
         return this.stateLabels?.[this.shown] ?? '';
     }
     render() {
-        return html `<canvas part="canvas" aria-hidden="true"></canvas>${this.announce ? html `<span part="live">${this.word}</span>` : nothing}`;
+        return html `<canvas part="canvas" aria-hidden="true"></canvas
+      ><slot @slotchange=${this.handleSlotChange}></slot>${this.announce ? html `<span part="live">${this.word}</span>` : nothing}`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -125,6 +140,8 @@ let HelixOrb = class HelixOrb extends HelixElement {
             return;
         }
         this.canvas = canvas;
+        this.own = slotFilled(this.renderRoot.querySelector('slot'));
+        canvas.toggleAttribute('hidden', this.own || this.lost);
         this.context ??= canvas.getContext('2d');
         if (!this.context) {
             return;
@@ -133,7 +150,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
         canvas.addEventListener('contextrestored', this.handleRestored);
         if (this.lost && !this.context.isContextLost()) {
             this.lost = false;
-            canvas.toggleAttribute('hidden', false);
+            canvas.toggleAttribute('hidden', this.own);
         }
         this.gate.watch();
         this.measure();
@@ -186,8 +203,9 @@ let HelixOrb = class HelixOrb extends HelixElement {
         }
         const still = this.gate.reduced;
         const params = still ? paramsFor(this.state) : this.paramsNow();
-        this.phase += dt * params.rate;
         const painted = getComputedStyle(ctx.canvas);
+        const speed = Number.parseFloat(painted.animationIterationCount);
+        this.phase += dt * params.rate * (Number.isFinite(speed) ? speed : 1);
         const ink = readColorAlpha(painted.color) ?? GRAY;
         const ground = readColorAlpha(painted.textDecorationColor) ?? GRAY;
         const mesh = meshFor(size);

package/dist/sandbox/index.d.ts

@@ -15,6 +15,7 @@
 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 { type ManifestLike, manifestWords } from './source/editing.js';
 export * from './source/sandbox-source.js';
 export * from './status-bar/sandbox-status-bar.js';
 export * from './terminal/sandbox-terminal.js';

package/dist/sandbox/index.js

@@ -1,6 +1,7 @@
 export { isRender, LAYOUT_RULES, loggedText, servePreview, withoutStylesheets, } from './frame.js';
 export * from './preview/sandbox-preview.js';
 export * from './root/sandbox-root.js';
+export { manifestWords } from './source/editing.js';
 export * from './source/sandbox-source.js';
 export * from './status-bar/sandbox-status-bar.js';
 export * from './terminal/sandbox-terminal.js';

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

@@ -63,6 +63,16 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * since a browser reads one only as a document starts. A `src` document
  * declares its own.
  *
+ * **`dependencies` names packages by version instead**, as a `package.json`
+ * does: `{"canvas-confetti": "^1.9"}` loads `canvas-confetti` and the paths
+ * under it from `cdn`, `https://esm.sh/` by default, at the version or range
+ * given. An address in `imports` wins over a package of the same name.
+ *
+ * **`modules` holds files the example imports by a relative path**: each path,
+ * such as `utils.js`, to its source, and `import { add } from './utils.js'`
+ * in the `js` pane or in another module loads it. A sandbox writes each pane
+ * named for a module file here.
+ *
  * **Examples render in a frame**, so an example's styles and scripts do not
  * affect the page around the sandbox, and `position: fixed` stays inside the
  * pane. The frame starts empty, with its own stylesheets and its own custom
@@ -83,8 +93,9 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  *
  * **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.
+ * announced, and it is the frame's description while it shows, so a screen
+ * reader reads it with the frame. 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
@@ -113,6 +124,11 @@ export declare class HelixSandboxPreview extends HelixElement {
      * `registerWords('de', { 'helix-sandbox-preview': { label: 'Vorschau' } })`.
      */
     static words: string;
+    /**
+     * The address the packages in `dependencies` load from, which the name, an
+     * `@` and the version follow.
+     */
+    cdn: string;
     /**
      * The color mode the frame renders in.
      *
@@ -134,6 +150,13 @@ export declare class HelixSandboxPreview extends HelixElement {
      * example in a new tab, in its corner.
      */
     controls: boolean;
+    /**
+     * The npm packages an example can import by name in the built-in document,
+     * each name to a version or a range, as a `package.json` lists them. Each
+     * loads from `cdn`. Set it as JSON in the attribute or as an object. Not
+     * read where `src` is set.
+     */
+    dependencies?: Record<string, string>;
     /**
      * Writing direction inside the frame.
      *
@@ -168,6 +191,12 @@ export declare class HelixSandboxPreview extends HelixElement {
      * could read it.
      */
     layout?: 'padded' | 'centered' | 'fullscreen' | 'hug';
+    /**
+     * Module files an example imports by a relative path in the built-in
+     * document, each path, such as `utils.js`, to its source. Not read where
+     * `src` is set.
+     */
+    modules?: Record<string, string>;
     /**
      * The name of the button that opens the example in a new tab, under
      * `controls`.
@@ -209,6 +238,12 @@ export declare class HelixSandboxPreview extends HelixElement {
     /** What the frame is sent as its source: the markup, and the script after it. */
     private get sending();
     private get frame();
+    /**
+     * The import map of the built-in document: each module file, by its path
+     * and by the address its neighbors import it at, each package in
+     * `dependencies` and the paths under it, and `imports` over all of them.
+     */
+    private get importMap();
     /**
      * The frame's document has finished loading, so its listener exists, the
      * example is sent and the preview is no longer `loading`. The frame saying
@@ -320,6 +355,8 @@ export declare class HelixSandboxPreview extends HelixElement {
      * new document announces itself the same way the first one did.
      */
     reload(): void;
+    /** The import map the built-in document was last loaded with, as JSON. */
+    private loadedMap;
     /**
      * A new document is on its way, so nothing is sent until it listens, and
      * nothing has failed in it. The built-in document loads too.

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

@@ -12,9 +12,12 @@ 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';
+const RELATIVE = /(\bfrom\s*|\bimport\s*\(?\s*)(["'])(\.{1,2}\/[^"']+)\2/g;
+const moduleText = (path, source) => `data:text/javascript;charset=utf-8,${encodeURIComponent(source.replace(RELATIVE, (_, lead, quote, specifier) => `${lead}${quote}${new URL(specifier, `sandbox:/${path}`).href}${quote}`))}`;
 let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     constructor() {
         super(...arguments);
+        this.cdn = 'https://esm.sh/';
         this.controls = false;
         this.label = 'Preview';
         this.openLabel = 'Open preview in a new tab';
@@ -53,6 +56,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             }
         };
         this.settle = new DelayController(this, { renders: false });
+        this.loadedMap = '';
     }
     static { HelixSandboxPreview_1 = this; }
     static { this.words = 'helix-sandbox-preview'; }
@@ -66,6 +70,19 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     get frame() {
         return this.renderRoot.querySelector('iframe');
     }
+    get importMap() {
+        const map = {};
+        for (const [name, version] of Object.entries(this.dependencies ?? {})) {
+            const address = `${this.cdn}${name}@${version}`;
+            map[name] = address;
+            map[`${name}/`] = `${address}/`;
+        }
+        for (const [given, source] of Object.entries(this.modules ?? {})) {
+            const path = given.replace(/^\.?\//, '');
+            map[`./${path}`] = map[`sandbox:/${path}`] = moduleText(path, source);
+        }
+        return { ...map, ...this.imports };
+    }
     static { this.target = '*'; }
     scheduleSend() {
         this.settle.start(SETTLE, () => {
@@ -106,7 +123,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         frame.title = this.label;
         frame.style.cssText = 'block-size: 100vh; border: none; display: block; inline-size: 100vw';
         if (this.src === '') {
-            frame.srcdoc = defaultFrame(this.imports);
+            frame.srcdoc = defaultFrame(this.importMap);
         }
         else {
             frame.src = this.frame?.src || this.src;
@@ -132,7 +149,7 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
         }
         this.unready();
         if (this.src === '') {
-            frame.srcdoc = defaultFrame(this.imports);
+            frame.srcdoc = defaultFrame(this.importMap);
             return;
         }
         frame.src = this.src;
@@ -146,7 +163,10 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('src') || (changed.has('imports') && this.src === '')) {
+        const map = this.src === '' ? JSON.stringify(this.importMap) : '';
+        const remapped = map !== this.loadedMap;
+        this.loadedMap = map;
+        if (changed.has('src') || remapped) {
             this.unready();
             return;
         }
@@ -174,20 +194,29 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
       part="frame"
       @load=${this.handleFrameLoad}
       src=${this.src || nothing}
-      srcdoc=${this.src === '' ? defaultFrame(this.imports) : nothing}
+      srcdoc=${this.src === '' ? defaultFrame(this.importMap) : nothing}
       title=${this.label}
+      aria-describedby=${this.failure === undefined ? nothing : 'error'}
       allow="clipboard-write *; fullscreen *"
       sandbox=${SANDBOX}
-    ></iframe>${this.failure === undefined ? nothing : html `<pre part="error">${this.failure}</pre>`}${this.renderControls()}`;
+    ></iframe>${this.failure === undefined
+            ? nothing
+            : html `<pre part="error" id="error">${this.failure}</pre>`}${this.renderControls()}`;
     }
     static { this.styles = sheet; }
 };
+__decorate([
+    property()
+], HelixSandboxPreview.prototype, "cdn", void 0);
 __decorate([
     property({ attribute: 'color-mode' })
 ], HelixSandboxPreview.prototype, "colorMode", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixSandboxPreview.prototype, "controls", void 0);
+__decorate([
+    property({ type: Object })
+], HelixSandboxPreview.prototype, "dependencies", void 0);
 __decorate([
     property()
 ], HelixSandboxPreview.prototype, "direction", void 0);
@@ -201,6 +230,9 @@ __decorate([
 __decorate([
     property()
 ], HelixSandboxPreview.prototype, "layout", void 0);
+__decorate([
+    property({ type: Object })
+], HelixSandboxPreview.prototype, "modules", void 0);
 __decorate([
     words,
     property({ attribute: 'open-label' })

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="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;}}`);
+[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-modified"]::after {background-color: currentcolor;block-size: var(--helix-space-xs);border-radius: var(--helix-radii-full);content: "";display: inline-block;inline-size: var(--helix-space-xs);margin-inline-start: var(--helix-space-xs);vertical-align: middle;}[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

@@ -14,10 +14,22 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.
  *
  * The event carries the pane's `name`, so one sandbox can hold several panes.
- * `html` sets the preview's markup, `css` sets its stylesheet, and `js` sets
- * a script that runs as a module after the markup. The sandbox ignores a pane
- * with any other name, so that pane can show content without changing the
- * preview.
+ * The names the sandbox writes into its previews:
+ *
+ * - `html` sets the preview's markup.
+ * - `css` sets its stylesheet.
+ * - `js` sets a script that runs as a module after the markup.
+ * - A module file name ending in `.js` or `.mjs`, such as `utils.js`, is a
+ *   module the other scripts import by its path, `./utils.js`.
+ * - `package.json` sets the npm packages the scripts import by name, from its
+ *   `dependencies`, which load from the preview's `cdn`.
+ *
+ * The sandbox ignores a pane with any other name, so that pane can show
+ * content without changing the preview.
+ *
+ * **The sandbox is `:state(modified)` while a source pane holds an edit**, and
+ * that pane's file tab is also `file-modified` and described as modified to
+ * a screen reader. `reset()` puts every pane back to the source it was given.
  *
  * **The dividers are two nested `helix-splitter` elements**, which handle the
  * pointer, the keyboard, and the corner. The inner splitter holds the panes and
@@ -80,6 +92,7 @@ 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 file-modified - A file tab whose pane holds an edit.
  * @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.
@@ -90,6 +103,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @cssproperty --sandbox-min-block-size - Minimum height of the sandbox.
  * @cssproperty --sandbox-separator-color - Color of the divider.
  *
+ * @cssstate modified - While a source pane holds an edit, until `reset()`.
  * @cssstate panel-collapsed - While there is a panel and it is no taller than `panel-collapsed-size`.
  */
 export declare class HelixSandbox extends HelixElement {
@@ -151,6 +165,11 @@ export declare class HelixSandbox extends HelixElement {
      * the same thing in both directions: thirty percent to whatever comes first.
      */
     lead: 'source' | 'preview';
+    /**
+     * The description of a file tab whose pane holds an edit, read by screen
+     * readers after the file's name.
+     */
+    modifiedLabel: string;
     /**
      * Whether the panes sit side by side or stacked.
      *
@@ -192,6 +211,27 @@ export declare class HelixSandbox extends HelixElement {
     previewDelay: number;
     /** The edits waiting out `previewDelay`, the last text of each pane. */
     private readonly edits;
+    /** The source each pane was given, for a pane that does not say whether it is modified. */
+    private readonly given;
+    /** The source each pane holds since its last edit. */
+    private readonly texts;
+    /** Whether each pane held an edit when the file tabs were last drawn. */
+    private readonly drawnModified;
+    /** The source panes slotted here. */
+    private get sources();
+    /**
+     * Whether a pane holds an edit: as the pane says, where it has `modified`,
+     * as `helix-sandbox-source` has, and otherwise against the text it started
+     * with.
+     */
+    private modifiedOf;
+    /**
+     * Puts every source pane back to the source it was given: through the
+     * pane's own `reset()` where it has one, which sends an edit the previews
+     * take, and otherwise by setting its `value` and writing it into the
+     * previews.
+     */
+    reset(): void;
     /** The wait before the edits reach the previews. */
     private readonly resting;
     /** Hands the waiting edits to the previews. */