@fusion.dev/helix 0.199.1 → 0.200.0

package/dist/element-events.generated.js

@@ -173,6 +173,8 @@ registerElementEvents({
         'helix-reorder',
         'input',
     ],
+    'helix-log': ['helix-before-pin', 'helix-expand', 'helix-pin'],
+    'helix-log-group': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-map': [
         'change',
         'helix-activate',

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export * from './line-chart/index.js';
 export * from './list/index.js';
 export * from './listbox/index.js';
 export * from './loader/index.js';
+export * from './log/index.js';
 export * from './map/index.js';
 export * from './megamenu/index.js';
 export * from './menu/filter/index.js';

package/dist/index.js

@@ -55,6 +55,7 @@ export * from './line-chart/index.js';
 export * from './list/index.js';
 export * from './listbox/index.js';
 export * from './loader/index.js';
+export * from './log/index.js';
 export * from './map/index.js';
 export * from './megamenu/index.js';
 export * from './menu/filter/index.js';

package/dist/log/group/log-group.css.d.ts

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

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

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

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

@@ -0,0 +1,24 @@
+import { HelixHeadlessLogGroup } from '@fusion.dev/helix-headless/log';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One step of a log, which folds its lines under a heading with its status and how long it took.
+ *
+ * @description
+ * The heading is a row in the sans face with a caret, the status mark in its
+ * color, the heading, and the duration at the far end. A step that is `done`
+ * takes the success color, one that `failed` the danger color, and one that
+ * is `running` the info color.
+ *
+ * @since 0.199.0
+ * @status experimental
+ * @documentation https://fusion.dev/helix/components/log
+ */
+export declare class HelixLogGroup extends HelixHeadlessLogGroup {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-log-group': HelixLogGroup;
+    }
+}

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

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessLogGroup } from '@fusion.dev/helix-headless/log';
+import { styles } from './log-group.css.js';
+let HelixLogGroup = class HelixLogGroup extends HelixHeadlessLogGroup {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixLogGroup = __decorate([
+    customElement('helix-log-group')
+], HelixLogGroup);
+export { HelixLogGroup };

package/dist/log/index.d.ts

@@ -0,0 +1,3 @@
+export { HelixLogGroup } from './group/log-group.js';
+export { HelixLogLine } from './line/log-line.js';
+export { HelixLog } from './root/log-root.js';

package/dist/log/index.js

@@ -0,0 +1,3 @@
+export { HelixLogGroup } from './group/log-group.js';
+export { HelixLogLine } from './line/log-line.js';
+export { HelixLog } from './root/log-root.js';

package/dist/log/line/log-line.css.d.ts

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

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

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

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

@@ -0,0 +1,28 @@
+import { HelixHeadlessLogLine } from '@fusion.dev/helix-headless/log';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One line of a log, with its number, its time, and its text.
+ *
+ * @description
+ * A row with the number, the time, and the text side by side. A line at
+ * `warn` or `error` takes a band of its color, and a line `mark-lines` names
+ * takes the band `Code Block` draws behind a marked line.
+ *
+ * @since 0.199.0
+ * @status experimental
+ * @documentation https://fusion.dev/helix/components/log
+ *
+ * @cssproperty --log-error-color - The color of a line at `error`, and of the band behind it. Defaults to the danger color.
+ * @cssproperty --log-mark-background-color - The band behind a line `mark-lines` names.
+ * @cssproperty --log-match-background-color - The fill behind text that matches the log's `query`.
+ * @cssproperty --log-warn-color - The color of a line at `warn`, and of the band behind it. Defaults to the warning color.
+ */
+export declare class HelixLogLine extends HelixHeadlessLogLine {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-log-line': HelixLogLine;
+    }
+}

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

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessLogLine } from '@fusion.dev/helix-headless/log';
+import { styles } from './log-line.css.js';
+let HelixLogLine = class HelixLogLine extends HelixHeadlessLogLine {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixLogLine = __decorate([
+    customElement('helix-log-line')
+], HelixLogLine);
+export { HelixLogLine };

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

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

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

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

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

@@ -0,0 +1,47 @@
+import { HelixHeadlessLog } from '@fusion.dev/helix-headless/log';
+import type { CSSResultGroup } from 'lit';
+import '../group/log-group.js';
+import '../line/log-line.js';
+/**
+ * @summary Output that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line.
+ *
+ * @description
+ * A bordered box in the monospaced face, at the size of the page's small
+ * text, that scrolls after 30rem (`--log-max-block-size`). Lines keep their
+ * spaces and run past the edge of the box, which scrolls sideways, until
+ * `wrap` is set.
+ *
+ * The sixteen ANSI colors come from your theme: red is the danger color,
+ * green success, yellow warning, and blue info. Set `--log-ansi-red` and its
+ * siblings on the log to choose them yourself.
+ *
+ * Put a search field or the controls for the log in the `toolbar` slot, in
+ * one element such as a `Toolbar` or a `Flex`. It sits above the lines with a
+ * rule under it.
+ *
+ * @since 0.199.0
+ * @status experimental
+ * @category feedback
+ * @documentation https://fusion.dev/helix/components/log
+ *
+ * @cssproperty --log-background-color - The fill behind the lines. Defaults to the page background.
+ * @cssproperty --log-border-color - The edge around the log and the rules inside it.
+ * @cssproperty --log-color - The text color of the lines.
+ * @cssproperty --log-font-family - The face of the lines. Defaults to the monospaced face.
+ * @cssproperty --log-font-size - The size of the lines. Defaults to the small text step.
+ * @cssproperty --log-line-height - The height of one line.
+ * @cssproperty --log-max-block-size - How tall the log may get before the lines scroll. Defaults to 30rem.
+ * @cssproperty --log-padding-inline - Space either side of every line and heading.
+ * @cssproperty --log-radius - The corners of the log.
+ * @cssproperty --log-scrollbar-thumb-color - The thumb of the scrollbar. Defaults to `--helix-scrollbar-thumb-color`.
+ * @cssproperty --log-scrollbar-track-color - The track of the scrollbar. Defaults to `--helix-scrollbar-track-color`.
+ */
+export declare class HelixLog extends HelixHeadlessLog {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-log': HelixLog;
+    }
+}

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

@@ -0,0 +1,16 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessLog } from '@fusion.dev/helix-headless/log';
+import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
+import { styles } from './log-root.css.js';
+import '../group/log-group.js';
+import '../line/log-line.js';
+let HelixLog = class HelixLog extends HelixHeadlessLog {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [liveStyles, collectionStateStyles, styles]; }
+};
+HelixLog = __decorate([
+    customElement('helix-log')
+], HelixLog);
+export { HelixLog };

package/dist/sandbox/index.d.ts

@@ -14,6 +14,7 @@
  */
 export { isRender, LAYOUT_RULES, loggedText, type ServePreviewOptions, servePreview, withoutStylesheets, } from './frame.js';
 export * from './preview/sandbox-preview.js';
+export type { PreviewFetch, PreviewFetched } from './relay.js';
 export * from './root/sandbox-root.js';
 export { type ManifestLike, manifestWords } from './source/editing.js';
 export * from './source/sandbox-source.js';

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

@@ -1,6 +1,7 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup } from 'lit';
 import { type PropertyValues, type TemplateResult } from 'lit';
+import { type PreviewFetch } from '../relay.js';
 /** The frame saying it has a listener, and where to answer it. */
 export interface PreviewReady {
     type: 'helix-preview-ready';
@@ -39,7 +40,7 @@ export interface PreviewSize {
     size: number;
     type: 'helix-preview-size';
 }
-export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | PreviewRender | PreviewSize;
+export type PreviewMessage = PreviewConsole | PreviewFetch | PreviewPress | PreviewReady | PreviewRender | PreviewSize;
 /**
  * @summary A frame that renders sandbox source in a separate document.
  *
@@ -106,6 +107,21 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * reader reads it with the frame. Hide it with `::part(error) { display: none }`
  * where the page draws its own.
  *
+ * **`relay` lets a frame on a login-protected site load its own files.** The
+ * frame's opaque origin makes every request it sends cross-site, and a login
+ * cookie is not sent on one, so behind a login such as a Vercel preview the
+ * frame's script and stylesheet come back as the login page. With `relay` set
+ * to path prefixes, such as `/sandbox/ /fonts/`, the frame can ask this
+ * element for a file under them and gets the body back, fetched from this
+ * page with its cookies. The page fetches only a `GET` on its own origin,
+ * under those prefixes, in plain characters, following no redirect, and it
+ * passes on only a script, a stylesheet, a font, a model, or an image of up
+ * to 8 MB. Name only prefixes that hold files the site serves to anyone: an
+ * example in the frame is untrusted, and it can ask too. Empty, the default,
+ * relays nothing. A frame asks only while its own origin is opaque, so a page
+ * elsewhere that frames the same document without a sandbox cannot use the
+ * answer to run script on the site.
+ *
  * **`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.
@@ -211,6 +227,12 @@ export declare class HelixSandboxPreview extends HelixElement {
      * `controls`.
      */
     openLabel: string;
+    /**
+     * Path prefixes the frame may ask this page to fetch for it, separated by
+     * spaces, each starting and ending with a slash, such as `/sandbox/ /fonts/`.
+     * Empty relays nothing.
+     */
+    relay: string;
     /**
      * The name of the button that reloads the frame's document, under
      * `controls`.
@@ -252,6 +274,18 @@ export declare class HelixSandboxPreview extends HelixElement {
      * imports.
      */
     private map;
+    /** How many files the frame has asked for that are still being fetched. */
+    private relaying;
+    /**
+     * Fetches a file the frame asked for and sends it back to the window that
+     * asked, or says it could not.
+     *
+     * The address is judged by `relayAddress` against this page's origin and the
+     * prefixes in `relay`, so a request this page would not make is answered
+     * with a refusal and never sent. The frame document's address is the base,
+     * so a relative path means what it meant there.
+     */
+    private answer;
     /** 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. */

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

@@ -6,6 +6,7 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { COMPILED, compile } from '../compile.js';
 import { defaultFrame, withScript } from '../frame.js';
+import { isFetch, RELAY_OPEN, relayAddress, relayFetch, relayPrefixes, } from '../relay.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;
@@ -17,6 +18,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         this.controls = false;
         this.label = 'Preview';
         this.openLabel = 'Open preview in a new tab';
+        this.relay = '';
         this.reloadLabel = 'Reload preview';
         this.script = '';
         this.source = '';
@@ -26,6 +28,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         this.compiled = new Map();
         this.compiling = new Set();
         this.map = {};
+        this.relaying = 0;
         this.handleFrameLoad = () => {
             this.ready = true;
             this.toggleState('loading', false);
@@ -36,6 +39,10 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
                 return;
             }
             const data = event.data;
+            if (isFetch(data)) {
+                void this.answer(data, event.source);
+                return;
+            }
             if (data?.type === 'helix-preview-ready') {
                 this.handleFrameLoad();
                 return;
@@ -59,6 +66,27 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     }
     static { HelixSandboxPreview_1 = this; }
     static { this.words = 'helix-sandbox-preview'; }
+    async answer(request, to) {
+        const reply = (fetched) => {
+            const message = { ...fetched, id: request.id, type: 'helix-preview-fetched' };
+            const transfer = fetched.body instanceof ArrayBuffer ? [fetched.body] : [];
+            to.postMessage(message, { targetOrigin: HelixSandboxPreview_1.target, transfer });
+        };
+        const base = new URL(this.src || '/', location.href).href;
+        const url = relayAddress(request.path, base, location.origin, relayPrefixes(this.relay));
+        if (!url || this.relaying >= RELAY_OPEN) {
+            reply({ ok: false });
+            return;
+        }
+        this.relaying += 1;
+        try {
+            const fetched = await relayFetch(url, request.as);
+            reply(fetched ? { ...fetched, ok: true } : { ok: false });
+        }
+        finally {
+            this.relaying -= 1;
+        }
+    }
     fail(text) {
         this.failure = text;
         this.toggleState('failed', text !== undefined);
@@ -155,6 +183,15 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         else {
             frame.src = this.frame?.src || this.src;
         }
+        if (relayPrefixes(this.relay).length > 0) {
+            tab.addEventListener('message', (event) => {
+                if (event.source === frame.contentWindow &&
+                    event.origin === 'null' &&
+                    isFetch(event.data)) {
+                    void this.answer(event.data, event.source);
+                }
+            });
+        }
         const send = tab.document.createElement('script');
         send.textContent = `const frame = document.currentScript.previousElementSibling
 frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.message)}, '*')`;
@@ -270,6 +307,9 @@ __decorate([
     words,
     property({ attribute: 'open-label' })
 ], HelixSandboxPreview.prototype, "openLabel", void 0);
+__decorate([
+    property()
+], HelixSandboxPreview.prototype, "relay", void 0);
 __decorate([
     words,
     property({ attribute: 'reload-label' })

package/dist/sandbox/relay.d.ts

@@ -0,0 +1,74 @@
+/**
+ * The page's half of a relay that fetches a frame's own files for it.
+ *
+ * **A sandboxed frame cannot always load its own files.** It has an opaque
+ * origin, so every request it makes is cross-site. Where the site sits behind
+ * a login, such as a Vercel preview, the cookie that proves the login is not
+ * sent on a cross-site request, and the frame's script, its stylesheet, its
+ * fonts, and its models come back as the login page. The page around the frame
+ * is on the site's own origin and sends the cookie, so the frame asks it.
+ *
+ * **What the frame can ask for is narrow, and the page decides it.** A path
+ * is fetched only where it resolves to the page's own origin, under one of the
+ * prefixes the page named, in plain characters, with a `GET` that follows no
+ * redirect, and the answer is passed on only when it is a script, a
+ * stylesheet, a font, a model, or an image under the size limit. An example in
+ * the frame is untrusted, and with this it can read only what the site already
+ * serves to anyone under those prefixes.
+ */
+/** A file the frame asks the page to fetch for it. */
+export interface PreviewFetch {
+    /** Whether the frame wants the body as text, for a script or a stylesheet, or as bytes. */
+    as: 'bytes' | 'text';
+    /** What the answer carries back, so the frame can match it to the request. */
+    id: string;
+    /** The file, as a path on the site, such as `/sandbox/frame.js?v=1a2b3c4d`. */
+    path: string;
+    type: 'helix-preview-fetch';
+}
+/** The page's answer to a `PreviewFetch`. */
+export interface PreviewFetched {
+    /** The file's body, where the page fetched it. */
+    body?: ArrayBuffer | string;
+    /** The file's content type, where the page fetched it. */
+    contentType?: string;
+    /** The `id` of the request it answers. */
+    id: string;
+    /** Whether the page fetched the file. */
+    ok: boolean;
+    type: 'helix-preview-fetched';
+}
+/** The most bytes the page passes on for one file: four times the largest the site serves. */
+export declare const RELAY_LIMIT: number;
+/** The most requests one frame may have open at once. */
+export declare const RELAY_OPEN = 16;
+/** Whether `data` is a request the frame sent, in the shape the page reads. */
+export declare const isFetch: (data: unknown) => data is PreviewFetch;
+/**
+ * The prefixes a `relay` value names: each a path that starts and ends with a
+ * slash, such as `/sandbox/`. Anything else in the value is ignored, so `/`
+ * alone, which would be the whole site, is not a prefix.
+ */
+export declare const relayPrefixes: (value: string) => string[];
+/**
+ * The address the page fetches for `path`, or undefined where it may not.
+ *
+ * `path` is resolved against `base`, the frame document's address, so a
+ * relative path the frame wrote means what it meant there. The answer has to
+ * be on `origin`, the page's own, under one of `prefixes`, with no user, no
+ * password, and no fragment. The resolved path is held to plain characters, so
+ * an encoded slash or dot, which a server may decode after this check, is
+ * refused rather than trusted.
+ */
+export declare const relayAddress: (path: string, base: string, origin: string, prefixes: readonly string[]) => URL | undefined;
+/**
+ * Fetches a file the frame asked for, from an address `relayAddress` allowed,
+ * and returns it, or undefined where it is not one to pass on.
+ *
+ * Same origin only, with the page's cookies, as a `GET` that follows no
+ * redirect: a login page redirecting is a refusal, never a file. The body is
+ * passed on only for a script, a stylesheet, a font, a model, or an image, and
+ * only under `RELAY_LIMIT`, counted on what arrived as well as on what the
+ * headers claimed.
+ */
+export declare const relayFetch: (url: URL, as: PreviewFetch['as']) => Promise<Pick<PreviewFetched, 'body' | 'contentType'> | undefined>;

package/dist/sandbox/relay.js

@@ -0,0 +1,72 @@
+export const RELAY_LIMIT = 8 * 1024 * 1024;
+export const RELAY_OPEN = 16;
+const PATH = /^\/[A-Za-z0-9._~/-]*$/;
+const QUERY = /^(?:\?[A-Za-z0-9=&._~-]*)?$/;
+const KINDS = /^(?:text\/css|text\/javascript|application\/javascript|application\/x-javascript|font\/[a-z0-9.+-]+|model\/[a-z0-9.+-]+|image\/(?:png|jpeg|webp|avif|gif)|application\/octet-stream)(?:\s*;|$)/;
+export const isFetch = (data) => {
+    if (typeof data !== 'object' || data === null) {
+        return false;
+    }
+    const { as, id, path, type } = data;
+    return (type === 'helix-preview-fetch' &&
+        (as === 'bytes' || as === 'text') &&
+        typeof id === 'string' &&
+        id.length > 0 &&
+        id.length <= 64 &&
+        typeof path === 'string');
+};
+export const relayPrefixes = (value) => value
+    .split(/\s+/)
+    .filter((prefix) => PATH.test(prefix) && prefix.length > 2 && prefix.endsWith('/'))
+    .filter((prefix) => !prefix.split('/').some((part) => part === '.' || part === '..'));
+export const relayAddress = (path, base, origin, prefixes) => {
+    if (path.length === 0 || path.length > 1024 || prefixes.length === 0) {
+        return undefined;
+    }
+    let url;
+    try {
+        url = new URL(path, base);
+    }
+    catch {
+        return undefined;
+    }
+    if (url.origin !== origin ||
+        url.username !== '' ||
+        url.password !== '' ||
+        url.hash !== '' ||
+        !PATH.test(url.pathname) ||
+        !QUERY.test(url.search) ||
+        url.pathname.split('/').some((part) => part === '.' || part === '..')) {
+        return undefined;
+    }
+    return prefixes.some((prefix) => url.pathname.startsWith(prefix)) ? url : undefined;
+};
+export const relayFetch = async (url, as) => {
+    let response;
+    try {
+        response = await fetch(url, {
+            cache: 'default',
+            credentials: 'same-origin',
+            method: 'GET',
+            mode: 'same-origin',
+            redirect: 'error',
+            referrerPolicy: 'same-origin',
+        });
+    }
+    catch {
+        return undefined;
+    }
+    const contentType = (response.headers.get('content-type') ?? '').toLowerCase();
+    const claimed = Number(response.headers.get('content-length') ?? '0');
+    if (!response.ok || !KINDS.test(contentType) || claimed > RELAY_LIMIT) {
+        return undefined;
+    }
+    const bytes = await response.arrayBuffer();
+    if (bytes.byteLength > RELAY_LIMIT) {
+        return undefined;
+    }
+    return {
+        body: as === 'text' ? new TextDecoder().decode(bytes) : bytes,
+        contentType,
+    };
+};