@fusion.dev/helix 0.145.0 → 0.147.0

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

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

package/dist/sandbox/frame.d.ts

@@ -24,9 +24,10 @@ export interface ServePreviewOptions {
  * shrinks each top-level child to its own content and centers it, which is
  * the difference for a component whose root is a full-width block. They
  * select the root by its `data-preview-root` attribute, so they reach nothing
- * an example draws inside it.
+ * an example draws inside it. The three that fill the viewport count their
+ * padding inside that height, so the root never overflows the frame.
  */
-export declare const LAYOUT_RULES = "\n:root { --preview-measure: 48rem; }\n[data-preview-root][data-layout=\"padded\"] { padding: var(--helix-space-lg, 1.5rem); }\n[data-preview-root][data-layout=\"centered\"], [data-preview-root][data-layout=\"hug\"] {\n  align-content: center; display: block; inline-size: min(100%, var(--preview-measure));\n  margin-inline: auto; min-block-size: 100dvh; padding: var(--helix-space-lg, 1.5rem);\n}\n[data-preview-root][data-layout=\"centered\"] { text-align: center; }\n[data-preview-root][data-layout=\"centered\"] > * { margin-inline: auto; text-align: start; }\n[data-preview-root][data-layout=\"hug\"] > * {\n  inline-size: fit-content; margin-inline: auto; max-inline-size: 100%;\n}\n[data-preview-root][data-layout=\"fullscreen\"] { min-block-size: 100dvh; padding: 0; }\n";
+export declare const LAYOUT_RULES = "\n:root { --preview-measure: 48rem; }\n[data-preview-root][data-layout=\"padded\"] { padding: var(--helix-space-lg, 1.5rem); }\n[data-preview-root][data-layout=\"centered\"], [data-preview-root][data-layout=\"hug\"] {\n  align-content: center; box-sizing: border-box; display: block;\n  inline-size: min(100%, var(--preview-measure)); margin-inline: auto; min-block-size: 100dvh;\n  padding: var(--helix-space-lg, 1.5rem);\n}\n[data-preview-root][data-layout=\"centered\"] { text-align: center; }\n[data-preview-root][data-layout=\"centered\"] > * { margin-inline: auto; text-align: start; }\n[data-preview-root][data-layout=\"hug\"] > * {\n  inline-size: fit-content; margin-inline: auto; max-inline-size: 100%;\n}\n[data-preview-root][data-layout=\"fullscreen\"] { box-sizing: border-box; min-block-size: 100dvh; padding: 0; }\n";
 /** Whether `data` is a render message, as the preview sends one. */
 export declare const isRender: (data: unknown) => data is PreviewRender;
 /**
@@ -50,7 +51,8 @@ export declare const loggedText: (value: unknown) => string;
  * - Writes each `helix-preview-render` into the root: the markup, the
  *   stylesheet, the direction, the layout and the color mode. Scripts in the
  *   markup run.
- * - Posts every console call and uncaught error as `helix-preview-console`.
+ * - Posts every console call and uncaught error as `helix-preview-console`,
+ *   an uncaught one marked `uncaught`, which marks the preview `failed`.
  * - Posts `helix-preview-size` whenever what was drawn changes height.
  * - Posts `helix-preview-press` on every press, so menus outside close.
  *

package/dist/sandbox/frame.js

@@ -2,15 +2,16 @@ export const LAYOUT_RULES = `
 :root { --preview-measure: 48rem; }
 [data-preview-root][data-layout="padded"] { padding: var(--helix-space-lg, 1.5rem); }
 [data-preview-root][data-layout="centered"], [data-preview-root][data-layout="hug"] {
-  align-content: center; display: block; inline-size: min(100%, var(--preview-measure));
-  margin-inline: auto; min-block-size: 100dvh; padding: var(--helix-space-lg, 1.5rem);
+  align-content: center; box-sizing: border-box; display: block;
+  inline-size: min(100%, var(--preview-measure)); margin-inline: auto; min-block-size: 100dvh;
+  padding: var(--helix-space-lg, 1.5rem);
 }
 [data-preview-root][data-layout="centered"] { text-align: center; }
 [data-preview-root][data-layout="centered"] > * { margin-inline: auto; text-align: start; }
 [data-preview-root][data-layout="hug"] > * {
   inline-size: fit-content; margin-inline: auto; max-inline-size: 100%;
 }
-[data-preview-root][data-layout="fullscreen"] { min-block-size: 100dvh; padding: 0; }
+[data-preview-root][data-layout="fullscreen"] { box-sizing: border-box; min-block-size: 100dvh; padding: 0; }
 `;
 export const isRender = (data) => typeof data === 'object' &&
     data !== null &&
@@ -70,7 +71,7 @@ export const servePreview = (options = {}) => {
         };
     }
     const failed = (event) => {
-        post({ level: 'error', text: event.message, type: 'helix-preview-console' });
+        post({ level: 'error', text: event.message, type: 'helix-preview-console', uncaught: true });
     };
     const measure = () => {
         const boxes = [...root.children].flatMap(drawn);
@@ -113,9 +114,21 @@ export const servePreview = (options = {}) => {
         options.onRender?.(root, fresh);
         measure();
     };
-    const press = () => post({ type: 'helix-preview-press' });
     const watcher = new ResizeObserver(measure);
-    watcher.observe(root);
+    const watch = () => {
+        watcher.disconnect();
+        watcher.observe(root);
+        for (const child of root.children) {
+            const placed = getComputedStyle(child).display === 'contents' ? child.children : [child];
+            for (const box of placed) {
+                watcher.observe(box);
+            }
+        }
+    };
+    const children = new MutationObserver(watch);
+    children.observe(root, { childList: true });
+    watch();
+    const press = () => post({ type: 'helix-preview-press' });
     window.addEventListener('error', failed);
     window.addEventListener('message', render);
     document.addEventListener('pointerdown', press, { capture: true, passive: true });
@@ -125,6 +138,7 @@ export const servePreview = (options = {}) => {
             console[level] = originals[index];
         });
         watcher.disconnect();
+        children.disconnect();
         window.removeEventListener('error', failed);
         window.removeEventListener('message', render);
         document.removeEventListener('pointerdown', press, { capture: true });

package/dist/sandbox/index.d.ts

@@ -18,4 +18,5 @@ export * from './root/sandbox-root.js';
 export * from './source/sandbox-source.js';
 export * from './status-bar/sandbox-status-bar.js';
 export * from './terminal/sandbox-terminal.js';
+export type { SandboxToken, SandboxTokenizer } from './tokens.js';
 export * from './toolbar/sandbox-toolbar.js';

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

@@ -1,13 +1,2 @@
 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;}[part="frame"] {background-color: var(--helix-color-background);block-size: 100%;border: none;display: block;inline-size: 100%;}`);

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

@@ -19,6 +19,8 @@ export interface PreviewConsole {
     level: 'log' | 'info' | 'warn' | 'error';
     text: string;
     type: 'helix-preview-console';
+    /** Set for an error the example threw and did not catch, which marks the preview `failed`. */
+    uncaught?: boolean;
 }
 /**
  * A press inside the frame, which is the one event the page cannot see for
@@ -57,6 +59,13 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * let a document on the same origin remove its own sandbox, which is the same
  * as having none.
  *
+ * **A preview says where it is.** It is `:state(loading)` from the moment it
+ * has a `src` until that document can take the example, and again through
+ * `reload()`. It is `:state(failed)` once the example throws an error it does
+ * not catch, until the next source is sent, which a frame on `servePreview`
+ * reports. A page draws its own spinner or message from either, such as a
+ * sibling shown by `helix-sandbox-preview:state(failed) + .message`.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Result, Output
@@ -66,6 +75,9 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * @event {HelixResizeEvent} helix-resize - Fired when the height of the frame's content changes, with the new height.
  *
  * @csspart frame - The iframe.
+ *
+ * @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.
  */
 export declare class HelixSandboxPreview extends HelixElement {
     /**
@@ -127,7 +139,9 @@ export declare class HelixSandboxPreview extends HelixElement {
     private ready;
     private get frame();
     /**
-     * The frame's document has finished loading, so its listener exists.
+     * 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
+     * `helix-preview-ready` lands here too.
      *
      * **The announcement is one shot and the parent can miss it.** The frame posts
      * `helix-preview-ready` at the end of its own module evaluation and never
@@ -180,8 +194,8 @@ export declare class HelixSandboxPreview extends HelixElement {
      * thing on the page already entitled to both.
      */
     private static readonly target;
-    /** Set while a coalesced send is waiting, so only one is ever queued. */
-    private pending;
+    /** Holds a coalesced send, so only one is ever queued, and drops it on disconnect. */
+    private readonly settle;
     /**
      * Sends once the typing stops, replacing anything already waiting.
      *
@@ -211,6 +225,8 @@ export declare class HelixSandboxPreview extends HelixElement {
      * new document announces itself the same way the first one did.
      */
     reload(): void;
+    /** A new document is on its way, so nothing is sent until it listens, and nothing has failed in it. */
+    private unready;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     static styles: CSSResultGroup;

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixSandboxPreview_1;
-import { customElement, HelixConsoleEvent, HelixElement, HelixResizeEvent, } from '@fusion.dev/helix-core';
+import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, } from '@fusion.dev/helix-core';
 const SETTLE = 120;
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -20,6 +20,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         this.ready = false;
         this.handleFrameLoad = () => {
             this.ready = true;
+            this.toggleState('loading', false);
             this.send();
         };
         this.handleMessage = (event) => {
@@ -27,12 +28,14 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
                 return;
             }
             if (event.data?.type === 'helix-preview-ready') {
-                this.ready = true;
-                this.send();
+                this.handleFrameLoad();
                 return;
             }
             if (event.data?.type === 'helix-preview-console') {
                 this.dispatchEvent(new HelixConsoleEvent({ level: event.data.level, text: event.data.text }));
+                if (event.data.uncaught) {
+                    this.toggleState('failed', true);
+                }
             }
             if (event.data?.type === 'helix-preview-press') {
                 this.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
@@ -41,6 +44,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
                 this.dispatchEvent(new HelixResizeEvent({ size: event.data.size }));
             }
         };
+        this.settle = new DelayController(this);
     }
     static { HelixSandboxPreview_1 = this; }
     get frame() {
@@ -48,11 +52,10 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     }
     static { this.target = '*'; }
     scheduleSend() {
-        clearTimeout(this.pending);
-        this.pending = setTimeout(() => {
-            this.pending = undefined;
+        this.settle.start(SETTLE, () => {
+            this.toggleState('failed', false);
             this.send();
-        }, SETTLE);
+        });
     }
     send() {
         if (!this.ready) {
@@ -74,8 +77,6 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        clearTimeout(this.pending);
-        this.pending = undefined;
         window.removeEventListener('message', this.handleMessage);
     }
     reload() {
@@ -83,13 +84,18 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         if (!frame) {
             return;
         }
-        this.ready = false;
+        this.unready();
         frame.src = this.src;
     }
+    unready() {
+        this.ready = false;
+        this.toggleState('failed', false);
+        this.toggleState('loading', this.src !== '');
+    }
     updated(changed) {
         super.updated(changed);
         if (changed.has('src')) {
-            this.ready = false;
+            this.unready();
             return;
         }
         if (changed.has('source') || changed.has('styles')) {

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

@@ -1,71 +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(separator) {
-display: none;
-}
-
-[part="body"]:not([data-panel])::part(corner) {
-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;
-}
-}`);
+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;}}`);

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

@@ -41,16 +41,18 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @event {HelixResizeEvent} helix-resize - Fired by the preview pane when the height of the frame's content changes, with the new height.
  * @event {HelixSplitEvent} helix-split - Fired after the panes' divider settled somewhere new, with the lead pane's share.
  *
- * @csspart body - The splitter holding the panes above the panel.
+ * @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 pane - Either pane.
  * @csspart panel - The box that holds the slotted panel.
- * @csspart panes - The splitter holding the source and preview panes.
+ * @csspart panes - The splitter holding the source and preview panes. `::part(panes):state(dragging)` matches while its divider is held.
  * @csspart separator - Either divider.
  *
  * @cssproperty --sandbox-grab - The invisible width of a divider's drag target.
  * @cssproperty --sandbox-min-block-size - Minimum height of the sandbox.
  * @cssproperty --sandbox-separator-color - Color of the divider.
+ *
+ * @cssstate panel-collapsed - While there is a panel and it is no taller than `panel-collapsed-size`.
  */
 export declare class HelixSandbox extends HelixElement {
     /**
@@ -176,8 +178,12 @@ export declare class HelixSandbox extends HelixElement {
      * back into the position that answered it.
      */
     private readonly watch;
-    /** The panel as a share of the body, which is what the splitter takes. */
-    private get panelShare();
+    /**
+     * A panel height as a share of the body, which is what the splitter takes,
+     * held to what the panel may have. A height that is no number is the
+     * default one.
+     */
+    private shareOf;
     /**
      * Where the outer divider goes: everything the panel is not.
      *
@@ -305,6 +311,12 @@ export declare class HelixSandbox extends HelixElement {
     private requestSplit;
     /** As `requestSplit`, for the panel, whose value is pixels rather than a share. */
     private requestPanelSize;
+    /**
+     * Takes a request a splitter of this sandbox made for itself, stopped and
+     * refused, and gives its value. Gives nothing for one that came up from
+     * something slotted into a pane, which passes through untouched.
+     */
+    private claim;
     /**
      * Answers a divider that has asked to move.
      *

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

@@ -74,54 +74,42 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             }
         };
         this.handlePanesChange = (event) => {
-            if (event.target !== event.currentTarget) {
+            const value = this.claim(event);
+            if (value === undefined) {
                 return;
             }
-            const { value } = event.detail;
-            event.stopPropagation();
-            event.preventDefault();
             this.requestSplit(Number(value));
             this.answer(event.currentTarget, this.split);
         };
         this.handlePanelChange = (event) => {
-            if (event.target !== event.currentTarget) {
+            const value = this.claim(event);
+            if (value === undefined) {
                 return;
             }
-            const { value } = event.detail;
-            event.stopPropagation();
-            event.preventDefault();
             if (this.bodyHeight > 0) {
                 this.requestPanelSize(Math.max(this.panelFloor, ((100 - Number(value)) / 100) * this.bodyHeight));
             }
             this.answer(event.currentTarget, this.panelPosition);
         };
         this.handleCollapse = (event) => {
-            if (event.target !== event.currentTarget) {
-                return;
-            }
-            event.stopPropagation();
-            event.preventDefault();
+            this.claim(event);
         };
         this.readPanel = () => {
             this.hasPanel = this.querySelector(':scope > [slot="panel"]') !== null;
         };
     }
-    get panelShare() {
-        const size = Number.isFinite(this.panelSize) ? this.panelSize : DEFAULT_PANEL;
+    shareOf(size) {
         if (this.bodyHeight <= 0) {
             return 0;
         }
-        return Math.min(PANEL_MAX * 100, Math.max(0, (size / this.bodyHeight) * 100));
+        const panel = Number.isFinite(size) ? size : DEFAULT_PANEL;
+        return Math.min(PANEL_MAX * 100, Math.max(0, (panel / this.bodyHeight) * 100));
     }
     get panelPosition() {
-        return this.hasPanel ? 100 - this.panelShare : 100;
+        return this.hasPanel ? 100 - this.shareOf(this.panelSize) : 100;
     }
     get homePanelPosition() {
-        const panel = Number.isFinite(this.defaultPanelSize) ? this.defaultPanelSize : DEFAULT_PANEL;
-        if (!this.hasPanel || this.bodyHeight <= 0) {
-            return 100;
-        }
-        return 100 - Math.min(PANEL_MAX * 100, Math.max(0, (panel / this.bodyHeight) * 100));
+        return this.hasPanel ? 100 - this.shareOf(this.defaultPanelSize) : 100;
     }
     get panelSliver() {
         if (this.bodyHeight <= 0) {
@@ -176,7 +164,6 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         if (accepted && this.split !== was) {
             this.dispatchEvent(new HelixSplitEvent({ value: String(this.split) }));
         }
-        return accepted;
     }
     requestPanelSize(next) {
         const was = this.panelSize;
@@ -191,7 +178,14 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         if (accepted && this.panelSize !== was) {
             this.dispatchEvent(new HelixPanelResizeEvent({ value: String(this.panelSize) }));
         }
-        return accepted;
+    }
+    claim(event) {
+        if (event.target !== event.currentTarget) {
+            return undefined;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        return event.detail.value;
     }
     answer(divider, position) {
         const target = divider;
@@ -224,6 +218,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         if (!this.hasUpdated && this.childrenKnown) {
             this.readPanel();
         }
+        this.toggleState('panel-collapsed', this.hasPanel && this.panelSize <= this.panelCollapsedSize);
         if (!this.hasUpdated || typeof this.renderRoot?.querySelector !== 'function') {
             return;
         }
@@ -253,33 +248,17 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         const first = this.lead === 'preview' ? 'preview' : 'source';
         const second = first === 'preview' ? 'source' : 'preview';
         const split = Number.isFinite(this.split) ? this.split : DEFAULT_SPLIT;
+        const home = Number.isFinite(this.defaultSplit) ? this.defaultSplit : DEFAULT_SPLIT;
+        const label = this.separatorLabel || (first === 'preview' ? 'Resize preview pane' : 'Resize source pane');
         return html `<slot name="toolbar"></slot>
-      <helix-splitter
-        part="body"
-        ?data-panel=${this.hasPanel}
-        exportparts="separator, corner"
-        orientation="vertical"
-        collapsed-size=${this.panelSliver}
-        corner-label=${this.cornerLabel}
-        label=${this.panelLabel}
-        default-position=${this.homePanelPosition}
-        min=${100 - PANEL_MAX * 100}
-        .position=${this.panelPosition}
-        @helix-before-collapse=${this.handleCollapse}
-        @helix-before-resize=${this.handlePanelChange}
-      >
-        <helix-splitter
-          slot="start"
-          part="panes"
-          exportparts="separator"
-          default-position=${Number.isFinite(this.defaultSplit) ? this.defaultSplit : DEFAULT_SPLIT}
-          label=${this.separatorLabel || (first === 'preview' ? 'Resize preview pane' : 'Resize source pane')}
-          orientation=${vertical ? 'vertical' : 'horizontal'}
-          .position=${split}
-          @helix-before-collapse=${this.handleCollapse}
-          @helix-before-resize=${this.handlePanesChange}
-        >
-          ${''}
+      <helix-splitter part="body" ?data-panel=${this.hasPanel} exportparts="separator, corner"
+        orientation="vertical" collapsed-size=${this.panelSliver} corner-label=${this.cornerLabel}
+        label=${this.panelLabel} default-position=${this.homePanelPosition}
+        min=${100 - PANEL_MAX * 100} .position=${this.panelPosition}
+        @helix-before-collapse=${this.handleCollapse} @helix-before-resize=${this.handlePanelChange}>
+        <helix-splitter slot="start" part="panes" exportparts="separator" default-position=${home}
+          label=${label} orientation=${vertical ? 'vertical' : 'horizontal'} .position=${split}
+          @helix-before-collapse=${this.handleCollapse} @helix-before-resize=${this.handlePanesChange}>
           <div part="pane" data-pane=${first} slot="start"><slot name=${first} @slotchange=${this.seed}></slot></div>
           <div part="pane" data-pane=${second} slot="end"><slot name=${second} @slotchange=${this.seed}></slot></div>
         </helix-splitter>