@fusion.dev/helix 0.2.0 → 0.4.0

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

@@ -9,212 +9,33 @@ import '../../splitter/index.js';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { styles } from './sandbox-root.css.js';
-/** Where the divider sits, and how tall the panel is, before anyone moves them.
-    Named because the properties default to them and the getters that reset them
-    fall back to them, and two copies of a default drift. */
 const DEFAULT_SPLIT = 50;
-/* One hundred and sixty, not one hundred and ninety-two. At 192 the panel opened
-   taking forty-two percent of the sandbox: the thing being previewed had less
-   room than the log of it. Its own tab bar is forty-eight of that, so this
-   leaves about five lines, which is what a console is read in. */
 const DEFAULT_PANEL = 160;
-/** The most of the sandbox the panel may take, leaving the panes above it. */
 const PANEL_MAX = 0.8;
-/**
- * @summary Pairs an editable source pane with a live preview.
- *
- * @description
- * Coordination is by event, the same way the accordion does it: a source pane
- * dispatches `helix-before-edit`, which bubbles, and the sandbox hands the value to
- * whatever preview is slotted into it. Neither child knows the other exists, so
- * either can be replaced or used alone.
- *
- * The event carries the pane's `name`, which is what lets one sandbox hold
- * several panes without the root identifying senders by reference. `html` is
- * the preview's markup and `css` is its stylesheet. A pane named anything else
- * is showing something rather than driving it, and is ignored: the sandbox has
- * a pane rendering the example as JSX, and guessing would have put the text of
- * a React component into the preview.
- *
- * **The dividers are two nested `helix-splitter`s, not a grid this element
- * drags itself.** The pointer handling, the keyboard handling and the corner are
- * all the splitter's, and the corner arrives on its own wherever a nested
- * splitter crosses the one it is in.
- *
- * The panes are the inner splitter and the panel is the outer one, which is the
- * order that makes the panel span the full width: the outer divider runs edge to
- * edge and the inner stops at it.
- *
- * **Both are controlled from here, so `split` and `panel-size` stay the truth.**
- * A splitter that owned its own position would leave this element reporting one
- * arrangement and showing another, and a consumer restoring a saved layout
- * writes to these two properties. Each splitter announces where it wants to go
- * and this answers, which is the same contract a form control has with a
- * framework.
- *
- * **The panel is in pixels here and a percentage in the splitter, and the
- * conversion belongs here.** A terminal wants a number of lines rather than a
- * share of the window, so its height should not change when the window does. A
- * splitter has no business knowing that, so it stays percentage-pure and this
- * element, which does know what is in the panel, holds the box and converts.
- * That is also what keeps a stored `panelSize` from a previous visit meaning
- * what it meant when it was written.
- *
- * @since 0.1.0
- * @status experimental
- * @category tooling
- * @aliases Playground, REPL, Editor
- * @documentation https://helix.fusion.dev/sandbox
- *
- * @slot panel - A panel under both panes, usually a terminal.
- * @slot preview - The live preview. Second unless `lead` says otherwise.
- * @slot source - The editable source pane. First unless `lead` says otherwise.
- * @slot status - A status bar, spanning both panes at the bottom.
- * @slot toolbar - A bar across the top, spanning both panes.
- *
- * @event {HelixBeforePanelResizeEvent} helix-before-panel-resize - Fired before the panel's divider is let go, with its height in pixels. Cancelable: refusing it takes the decision and nothing moves.
- * @event {HelixBeforeSplitEvent} helix-before-split - Fired before the panes' divider is let go, with the lead pane's share. Cancelable: refusing it takes the decision and nothing moves.
- *
- * @csspart body - The splitter holding the panes above the panel.
- * @csspart corner - The handle where the two dividers cross.
- * @csspart pane - Either pane.
- * @csspart panel - The box holding whatever was slotted as the panel.
- * @csspart panes - The splitter holding the source and preview panes.
- * @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.
- */
 let HelixSandbox = class HelixSandbox extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Accessible name for the divider that moves both at once.
-         */
         this.cornerLabel = 'Resize panes and panel';
-        /**
-         * What a reset makes the panel, in pixels.
-         *
-         * The pair to `panel-size`.
-         */
         this.defaultPanelSize = DEFAULT_PANEL;
-        /**
-         * Where a reset puts the divider, where nothing declared it.
-         *
-         * Separate from `split` for the reason `Splitter` keeps `default-position`
-         * separate from `position`. Resetting to whatever `split` held on the first
-         * render is the declared arrangement only where nobody owns the property: the
-         * workbench does, and restores it from the address bar and from storage, so the
-         * first value it holds is the reader's last session and a reset puts the
-         * sandbox back to the size it already was.
-         *
-         * Declared rather than captured, so it is a number a consumer states and can
-         * change, and it needs no first frame to be read on.
-         */
         this.defaultSplit = DEFAULT_SPLIT;
-        /**
-         * Which pane comes first, before the divider.
-         *
-         * A sandbox is read in one of two directions and the two are not a
-         * preference. A workbench is a place to write, so the source leads and the
-         * preview answers it. A reference page is a place to look, so the preview
-         * leads and the source is what a reader opens if they want to know how it was
-         * done. Same component, opposite reading order, and no consumer should have
-         * to slot a preview into a hole named `source` to get it.
-         *
-         * Not reflected, because no rule selects on it: the panes already carry
-         * `data-pane`, which is what the stylesheet reaches for, and swapping the
-         * names below keeps that true whichever way round they sit.
-         *
-         * `split` follows the lead pane rather than the source, so `split="30"` means
-         * the same thing in both directions: thirty percent to whatever comes first.
-         */
         this.lead = 'source';
-        /**
-         * What the panel's height becomes when it is closed.
-         *
-         * Zero closes it outright. A panel whose contents include the control that
-         * reopens it, a row of tabs being the usual one, wants that row left showing,
-         * and only whoever slotted it knows how tall that is.
-         */
         this.panelCollapsedSize = 0;
-        /**
-         * Accessible name for the panel's divider.
-         */
         this.panelLabel = 'Resize panel';
-        /**
-         * Height of the panel, in pixels.
-         */
         this.panelSize = DEFAULT_PANEL;
-        /**
-         * Accessible name for the divider.
-         */
         this.separatorLabel = 'Resize source pane';
-        /**
-         * Percentage of the sandbox given to the source pane.
-         */
         this.split = DEFAULT_SPLIT;
-        /**
-         * Whether anything is in the panel region.
-         *
-         * The divider above the panel is only meaningful when there is a panel to
-         * size, and there is no way to ask in CSS: `:host(:has([slot="panel"]))` is
-         * invalid, and the server has no children to look at. `slotchange` is the
-         * platform answering on the client, which is where a divider is any use.
-         */
         this.hasPanel = false;
-        /**
-         * The body's height, which is what a pixel panel is a fraction of.
-         *
-         * The panel is given in pixels and the splitter takes a percentage, so the two
-         * only agree at one height: let the window change without recomputing and a
-         * panel asked for at 192px quietly keeps whatever share of the old height that
-         * was.
-         *
-         * **Measured at render rather than cached from the observer.** A
-         * `ResizeObserver` callback is delivered from the rendering lifecycle and a
-         * background tab runs none, so a cached number goes stale with nothing to say
-         * so. Reading the box at render leaves one source of truth, and the observer's
-         * only job is to say that a render is due.
-         *
-         * Cheap, because renders are rare: a drag does not go through this element at
-         * all, the splitter following the pointer itself and announcing once, when it
-         * settles.
-         */
         this.bodyHeight = 0;
-        /**
-         * Asks for a render when the body changes size.
-         *
-         * The box watched is the splitter itself, not the panel. Its size changes when
-         * the window does and not when the divider moves, so answering it cannot feed
-         * back into the position that answered it.
-         */
         this.watch = typeof ResizeObserver === 'undefined'
             ? undefined
             : new ResizeObserver(() => {
                 this.requestUpdate();
             });
-        /**
-         * Takes a change from one of this sandbox's own source panes.
-         *
-         * The origin is checked, and has to be. `helix-before-edit` bubbles and composes,
-         * so anything a consumer slots into a sandbox sends one up here too. A
-         * sandbox hears a great deal that is not its source.
-         */
         this.handleSourceChange = (event) => {
             if (!this.fromSource(event.target)) {
                 return;
             }
             const { value } = event.detail;
-            /* Which pane is the element, and the element is `composedPath()[0]` rather
-               than `event.target`, which is retargeted to the outermost host once the
-               event has crossed a shadow boundary.
-        
-               Named, not guessed. Treating anything that is not `css` as markup holds
-               only while there are two panes: a pane showing the example as JSX
-               announces itself the same way, and the preview renders the text of a React
-               component as though it were markup. */
             const pane = event.composedPath()[0];
             if (pane?.name !== 'css' && pane?.name !== 'html') {
                 return;
@@ -228,14 +49,6 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
                 }
             }
         };
-        /**
-         * Writes the cursor position onto any status bar slotted here.
-         *
-         * The same shape as the source-to-preview hand-off, and for the same reason:
-         * the editor and the bar never speak, so either can be absent. It goes
-         * straight to the element rather than through a property a framework owns,
-         * because this fires on every keystroke and every arrow press.
-         */
         this.handleCaret = (event) => {
             if (!this.fromSource(event.target)) {
                 return;
@@ -246,35 +59,12 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
                 bar.line = line;
             }
         };
-        /**
-         * Hands a console line from the preview to any terminal slotted here.
-         *
-         * Every `helix-console` is forwarded, with no check on where it came from.
-         * Unlike a change, which any form control in a sandbox emits, this event is
-         * dispatched by exactly one thing: a preview relaying what the document
-         * inside its frame wrote. There is nothing else here it could be confused
-         * with.
-         */
         this.handleConsole = (event) => {
             const detail = event.detail;
             for (const terminal of this.terminals) {
                 terminal.write(detail);
             }
         };
-        /**
-         * Answers a divider that has asked to move.
-         *
-         * Both splitters are controlled from here, so neither applies anything on its
-         * own: each announces where it wants to go and this decides. That is what
-         * keeps `split` and `panelSize` the truth about the arrangement rather than a
-         * stale copy of it.
-         *
-         * `target` against `currentTarget`, because a source pane's own change bubbles
-         * up through these same elements on its way to the host. Only a splitter
-         * speaking for itself is one of ours, and only those are stopped: the sandbox
-         * announces `helix-before-split` and `helix-before-panel-resize` in their
-         * place, and a consumer never sees the two splitters inside it.
-         */
         this.handlePanesChange = (event) => {
             if (event.target !== event.currentTarget) {
                 return;
@@ -293,27 +83,13 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             if (this.bodyHeight <= 0) {
                 return;
             }
-            // Back into pixels, which is what this element promises and what a consumer
-            // stored. The divider's position is the panes' share, so the panel is the
-            // rest of it.
             this.panelSize = Math.max(0, ((100 - Number(value)) / 100) * this.bodyHeight);
             this.panelSettled();
         };
-        /**
-         * Notes whether there is a panel, which is what its dividers depend on.
-         *
-         * Asked of the light DOM rather than of the slot. `slotchange` is the event
-         * that says it changed, and it is listened for, but it is not the only way
-         * to know: a sandbox whose panel was in the markup all along has nothing to
-         * change, and an environment that does not dispatch the event at all leaves
-         * the dividers permanently absent. What is slotted into a named slot is a
-         * question the host can answer directly.
-         */
         this.readPanel = () => {
             this.hasPanel = this.querySelector(':scope > [slot="panel"]') !== null;
         };
     }
-    /** The panel as a share of the body, which is what the splitter takes. */
     get panelShare() {
         const size = Number.isFinite(this.panelSize) ? this.panelSize : DEFAULT_PANEL;
         if (this.bodyHeight <= 0) {
@@ -321,17 +97,9 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         }
         return Math.min(PANEL_MAX * 100, Math.max(0, (size / this.bodyHeight) * 100));
     }
-    /**
-     * Where the outer divider goes: everything the panel is not.
-     *
-     * A hundred with no panel, which puts the divider on the floor of the sandbox
-     * with the panes filling it. The line itself is hidden by the stylesheet in
-     * that case, because a boundary needs two sides.
-     */
     get panelPosition() {
         return this.hasPanel ? 100 - this.panelShare : 100;
     }
-    /** Where the panel divider goes on a reset, in the splitter's own units. */
     get homePanelPosition() {
         const panel = Number.isFinite(this.defaultPanelSize) ? this.defaultPanelSize : DEFAULT_PANEL;
         if (!this.hasPanel || this.bodyHeight <= 0) {
@@ -339,22 +107,12 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         }
         return 100 - Math.min(PANEL_MAX * 100, Math.max(0, (panel / this.bodyHeight) * 100));
     }
-    /** `panel-collapsed-size` in the units the splitter works in. */
     get panelSliver() {
         if (this.bodyHeight <= 0) {
             return 0;
         }
         return Math.min(100, Math.max(0, (this.panelCollapsedSize / this.bodyHeight) * 100));
     }
-    /**
-     * Whether a change came from inside this sandbox's source region.
-     *
-     * Structural rather than a type check. There is more than one kind of pane and
-     * the editor is `@fusion.dev/helix-sandbox/editor`, on its own path because it
-     * carries CodeMirror, so naming its class here would pull that back into this
-     * module for every consumer. Where the event came from is a question about the
-     * tree, and the tree can answer it.
-     */
     fromSource(target) {
         if (!(target instanceof Node)) {
             return false;
@@ -362,16 +120,6 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         const slot = this.renderRoot.querySelector('slot[name="source"]');
         return (slot?.assignedElements({ flatten: true }) ?? []).some((pane) => pane === target || pane.contains(target));
     }
-    /**
-     * The parts of this sandbox it drives, wherever they sit inside it.
-     *
-     * Descendants, not children. A preview and a status bar happen to be slotted
-     * directly, but a terminal lives inside the tab set that holds the panel, so
-     * a search of `children` found none and the console went nowhere. Where a
-     * consumer nests a pane is their arrangement to make.
-     *
-     * Client only: the server has no children to read.
-     */
     parts(selector) {
         return [...this.querySelectorAll(selector)];
     }
@@ -384,35 +132,12 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
     get statusBars() {
         return this.parts('helix-sandbox-status-bar');
     }
-    /**
-     * The orientation in force.
-     *
-     * Unset is horizontal, and stays unset: the default is the absent attribute,
-     * so a reflected default cannot appear on the host after hydration.
-     */
     get axis() {
         return this.orientation ?? 'horizontal';
     }
-    /**
-     * Says the panes' divider has settled, so a consumer can keep it.
-     *
-     * When it settles, not while it moves. A drag is a stream of positions and
-     * only the one it ends at is a preference; announcing each would ask whoever
-     * is listening to write to storage a hundred times to record one decision.
-     *
-     * The sandbox does not keep it. Where a preference lives, and whether it
-     * should be kept at all, is the consumer's to decide, and a component that
-     * wrote to storage on its own would be deciding for all of them under a key
-     * it chose.
-     *
-     * **A verb each, rather than one `helix-before-resize` naming which of the two
-     * moved.** Both dividers are this element's, so `composedPath()[0]` is the same
-     * host for either and the event name is the only thing that can separate them.
-     */
     splitSettled() {
         this.dispatchEvent(new HelixBeforeSplitEvent({ value: String(this.split) }));
     }
-    /** As `splitSettled`, for the panel, whose value is pixels rather than a share. */
     panelSettled() {
         this.dispatchEvent(new HelixBeforePanelResizeEvent({ value: String(this.panelSize) }));
     }
@@ -421,16 +146,10 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         this.addEventListener('helix-caret', this.handleCaret);
         this.addEventListener('helix-console', this.handleConsole);
         this.addEventListener('helix-before-edit', this.handleSourceChange);
-        /* And the body is watched again, because `disconnectedCallback` stopped
-           watching it. The observer itself survives, being a field rather than
-           something `firstUpdated` built, but a disconnected one reports nothing
-           until something calls `observe` again. Left to `firstUpdated` alone, a
-           sandbox moved in the DOM comes back with its panel sizes frozen. */
         if (this.hasUpdated) {
             this.watchBody();
         }
     }
-    /** Watches the body, whose height is what the pane sizes are computed from. */
     watchBody() {
         const body = this.renderRoot.querySelector('[part="body"]');
         if (!body) {
@@ -440,13 +159,6 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         this.watch?.observe(body);
         this.requestUpdate();
     }
-    /**
-     * Takes the body's height before each render, so the conversion is current.
-     *
-     * Guarded on `hasUpdated`, because there is no shadow root to measure before
-     * the first render, and on the method existing, because the server's element
-     * shim carries attributes but not tree traversal.
-     */
     willUpdate(changed) {
         super.willUpdate(changed);
         if (!this.hasUpdated || typeof this.renderRoot?.querySelector !== 'function') {
@@ -498,13 +210,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
           .position=${split}
           @helix-before-resize=${this.handlePanesChange}
         >
-          ${
-        /* The slot names swap with the panes, so each pane keeps its own
-           `data-pane` and the stylesheet needs to know nothing about the
-           order. Rendering both slots in both positions would be two
-           elements answering to one name, and an assignment goes to the
-           first. */
-        ''}
+          ${''}
           <div part="pane" data-pane=${first} slot="start"><slot name=${first}></slot></div>
           <div part="pane" data-pane=${second} slot="end"><slot name=${second}></slot></div>
         </helix-splitter>

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

@@ -1,4 +1,3 @@
-// Generated from src/sandbox/source/sandbox-source.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;

package/dist/sandbox/source/sandbox-source.js

@@ -8,74 +8,14 @@ import { customElement, HelixBeforeEditEvent, HelixCaretEvent, HelixElement, onU
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './sandbox-source.css.js';
-/**
- * @summary Editable source for a sandbox preview.
- *
- * @description
- * A real `<textarea>`, not a contenteditable div with a syntax highlighter over
- * it. Undo, selection, spellcheck suppression, mobile keyboards, and screen
- * reader support all come from the platform, and every one of them is
- * expensive to rebuild and easy to get subtly wrong.
- *
- * Tab inserts two spaces rather than leaving the field, because a code pane
- * that cannot indent is not one. Escape then Tab still moves focus out, which
- * is the documented escape hatch for exactly this trade.
- *
- * @since 0.1.0
- * @status experimental
- * @aliases Editor, Code pane
- * @documentation https://helix.fusion.dev/sandbox/source
- *
- * @event {HelixBeforeEditEvent} helix-before-edit - Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.
- * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves.
- *
- * @csspart source - The editable region.
- *
- * @cssproperty --sandbox-source-background-color - Fill behind the source.
- * @cssproperty --sandbox-source-min-block-size - Minimum height of the pane.
- */
 let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Accessible name for the editable region.
-         */
         this.fieldLabel = 'Example source';
-        /**
-         * Which source this pane holds, echoed in every `helix-before-edit`.
-         *
-         * `html` and `css` are what the sandbox root routes on; any other name is
-         * passed through untouched for a consumer wiring their own panes.
-         *
-         * Not reflected: nothing selects on it, so it keeps a real default instead.
-         */
         this.name = 'html';
-        /**
-         * Whether Tab indents rather than moving focus.
-         */
         this.tabIndents = true;
-        /**
-         * The source being edited.
-         */
         this.value = '';
-        /** Set by Escape, so the next Tab leaves the field. */
         this.escaped = false;
-        /**
-         * Reports where the cursor is, for a status bar to read.
-         *
-         * **This pane has to send it, not only `SandboxEditor`.** `SandboxRoot` binds
-         * a `helix-caret` listener and writes `line` and `column` onto every slotted
-         * status bar, and `SandboxStatusBar` renders a `caret` part as soon as it has
-         * both; all of that ships from `@fusion.dev/helix`, while the editor is in
-         * `@fusion.dev/helix-sandbox` and is `private` while Helix is pre-release. A
-         * consumer taking the published shell and this pane would otherwise get a
-         * status bar that can never show a position, fixable only with a package they
-         * cannot install.
-         *
-         * The textarea is the only thing that knows, so this is where it belongs.
-         * One-based on both axes, which is what an editor shows and what the detail's
-         * own documentation says.
-         */
         this.reportCaret = (event) => {
             const field = event.target;
             const at = field.selectionStart ?? 0;
@@ -85,19 +25,6 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
                 line: before.split('\n').length,
             }));
         };
-        /**
-         * Announces the edit, then applies it if nobody refused.
-         *
-         * **Never the other way round.** Assigning the value and dispatching the
-         * request after it accepts `preventDefault()` and ignores it: a consumer
-         * refusing an edit keeps the old value in their handler while the pane holds
-         * the new one, and `helix-before-edit` becomes a `before` event that has
-         * already happened.
-         *
-         * `restoreValue` because the textarea has already taken the character
-         * whichever way it goes, so a refusal has to put the text back, and it does so
-         * without sending the caret to the end. Exactly what `Input` does with the
-         * same helper for the same reason. */
         this.handleInput = (event) => {
             const field = event.target;
             this.edit(field, field.value);
@@ -121,10 +48,6 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
             this.edit(field, field.value);
         };
     }
-    /**
-     * The one place an edit is taken, so a refusal cannot be forgotten at one of
-     * them. Two paths reach it, a keystroke and the tab that indents.
-     */
     edit(field, next) {
         const request = new HelixBeforeEditEvent({ value: next });
         if (this.dispatchEvent(request)) {

package/dist/sandbox/status-bar/sandbox-status-bar.css.js

@@ -1,4 +1,3 @@
-// Generated from src/sandbox/status-bar/sandbox-status-bar.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 align-items: center;

package/dist/sandbox/status-bar/sandbox-status-bar.js

@@ -8,51 +8,13 @@ import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './sandbox-status-bar.css.js';
-/**
- * How a language is written out, for the ones an editor knows.
- *
- * A map rather than the raw value, because `html` in a status bar reads as a
- * variable name where `HTML` reads as a language. Anything unlisted shows as
- * given, so a consumer naming their own language is not silently blanked.
- */
 const LABELS = {
     css: 'CSS',
     html: 'HTML',
     javascript: 'JavaScript',
     tsx: 'TSX',
 };
-/**
- * @summary Reports where the cursor is and what is being edited.
- *
- * @description
- * Slotted into a sandbox, which feeds it: the editor dispatches `helix-caret`
- * on every keystroke and every arrow press, the sandbox hears it and writes the
- * position here. Nothing about that reaches the consumer's framework, which is
- * the point. A caret position routed through React state would re-render the
- * workbench on every cursor move, to update two numbers.
- *
- * **Not a live region.** The readout changes on every keystroke, so announcing
- * it would talk over the reader continuously while they type. It is text they
- * can navigate to, which is what a status bar is in every editor that has one.
- *
- * A readout with nothing to say is not rendered at all rather than rendered
- * empty, or the bar keeps a gap where a value is not.
- *
- * @since 0.1.0
- * @status experimental
- * @aliases Status line
- * @documentation https://helix.fusion.dev/sandbox/status-bar
- *
- * @slot - Items at the start of the bar.
- * @slot end - Items after the readouts, at the end of the bar.
- *
- * @csspart caret - The line and column readout.
- * @csspart language - The language readout.
- *
- * @cssproperty --sandbox-status-bar-color - Color of the bar's text.
- */
 let HelixSandboxStatusBar = class HelixSandboxStatusBar extends HelixElement {
-    /** How the position reads, or nothing when there is no cursor to report. */
     get position() {
         if (this.line === undefined || this.column === undefined) {
             return undefined;

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

@@ -1,4 +1,3 @@
-// Generated from src/sandbox/terminal/sandbox-terminal.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {