@fusion.dev/helix 0.183.0 → 0.185.0

package/dist/code-block/index.d.ts

@@ -1 +1,2 @@
+export { type CodeBlockHighlighter, registerHighlighter, } from '@fusion.dev/helix-headless/code-block';
 export * from './root/code-block-root.js';

package/dist/code-block/index.js

@@ -1 +1,2 @@
+export { registerHighlighter, } from '@fusion.dev/helix-headless/code-block';
 export * from './root/code-block-root.js';

package/dist/data-table/root/data-table-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="toolbar"], [part="table"], [part="footer"] {grid-column: 1 / -1}[part="table"] {display: grid;grid-template-columns: var(--data-table-columns, var(--data-table-template, minmax(0, 1fr)));inline-size: 100%;overflow-x: auto}[part="table"] {--_data-table-fade: to right;animation: data-table-edges linear both;animation-timeline: scroll(self inline);mask-image: linear-gradient(var(--_data-table-fade), transparent, #000 var(--_data-table-fade-start, 0rem), #000 calc(100% - var(--_data-table-fade-end, 0rem)), transparent)}:host(:dir(rtl)) [part="table"] {--_data-table-fade: to left}@keyframes data-table-edges {0% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: 0rem}5%, 95% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: var(--helix-space-xl)}100% {--_data-table-fade-end: 0rem;--_data-table-fade-start: var(--helix-space-xl)}}@media (prefers-reduced-motion: reduce) {[part="table"] {animation: none}}[part="head"], [part~="row"] {display: contents}[part~="cell"] {border-block-end: var(--helix-border-thin) solid var(--data-table-rule-color, var(--helix-color-border));color: var(--data-table-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));text-align: var(--data-table-cell-align)}[part~="row"]:last-of-type [part~="cell"] {border-block-end-color: transparent}::slotted(helix-table-column) {--_table-heading-color: var(--data-table-heading-color);--_table-heading-padding-block: var(--data-table-padding-block);--_table-heading-padding-inline: var(--data-table-padding-inline);--_table-heading-rule-color: var(--data-table-rule-color);--_table-heading-text: var(--data-table-text)}::slotted(helix-table-column[sortable]) {cursor: pointer}[part~="cell"]:focus-visible, [part="more-cell"]:focus-visible, [part~="select"]:focus-visible, [part="select-all"]:focus-visible, [part="row-grip"]:focus-visible, [part="grip-head"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part~="select"], [part="select-all"], [part="row-grip"], [part="grip-head"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--data-table-rule-color, var(--helix-color-border));display: flex;justify-content: center;padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-sm))}[part~="row"]:last-of-type [part~="select"], [part~="row"]:last-of-type [part="row-grip"] {border-block-end-color: transparent}[part~="row"][aria-selected="true"] > * {background-color: var(--data-table-selected-background-color, color-mix(in srgb, var(--helix-color-primary) 10%, var(--helix-color-background)))}[part="row-grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--data-table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none}[part="row-grip-button"]:active {cursor: grabbing}[part="row-grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--data-table-grip-disabled-opacity, 0.4)}[part="row-grip-mark"] {block-size: 1em;inline-size: 1em}[part~="row"][part~="row-dragging"] > * {opacity: var(--data-table-dragging-opacity, 0.5)}[part~="row"][part~="row-drop-before"] > * {box-shadow: inset 0 var(--data-table-drop-indicator-size, var(--helix-border-thick)) 0 0 var(--data-table-drop-indicator-color, var(--helix-color-primary))}[part~="row"][part~="row-drop-after"] > * {box-shadow: inset 0 calc(var(--data-table-drop-indicator-size, var(--helix-border-thick)) * -1) 0 0 var(--data-table-drop-indicator-color, var(--helix-color-primary))}[part="toolbar"][data-empty], [part="footer"][data-empty] {display: none}[part="toolbar"] {padding-block-end: var(--data-table-toolbar-gap, var(--helix-space-sm))}[part="footer"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--data-table-footer-item-gap, var(--helix-space-md));padding-block-start: var(--data-table-footer-gap, var(--helix-space-sm))}[part="pagination"] {margin-inline-start: auto}[part="empty"], [part="loading"] {grid-column: 1 / -1}[part="error"] {color: var(--data-table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);grid-column: 1 / -1;margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center}:host([child-field]) [part~="cell-header"] {--_data-table-gutter: calc(var(--data-table-toggle-size, var(--helix-size-icon-tight)) + var(--data-table-toggle-gap, var(--helix-space-2xs)));padding-inline-start: calc((var(--data-table-level, 1) - 1) * var(--data-table-indent, var(--_data-table-gutter)))}:host([child-field]) [part~="cell-header"]:not(:has([part~="toggle"])) {padding-inline-start: calc((var(--data-table-level, 1) - 1) * var(--data-table-indent, var(--_data-table-gutter)) + var(--_data-table-gutter))}[part~="toggle"] {align-items: center;background: none;block-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));border: none;color: var(--data-table-toggle-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;inline-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));justify-content: center;margin-inline-end: var(--data-table-toggle-gap, var(--helix-space-2xs));padding: 0;vertical-align: middle}[part="toggle-mark"] {block-size: 100%;inline-size: 100%}[part="more"] {display: contents}[part="more-cell"] {display: flex;grid-column: 1 / -1;padding-block: var(--data-table-padding-block, var(--helix-space-sm))}[part="more-button"] {background: none;border: var(--helix-border-thin) solid var(--data-table-more-border-color, var(--helix-color-border));border-radius: var(--data-table-more-radius, var(--helix-radii-sm));color: var(--data-table-color, var(--helix-color-foreground));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-more-padding-block, var(--helix-space-2xs));padding-inline: var(--data-table-more-padding-inline, var(--helix-space-sm))}[part="more-button"]:hover {background-color: var(--data-table-more-hover-background-color, var(--helix-color-surface-raised))}:host([windowed]) [part="table"] {block-size: var(--data-table-block-size, 24em);overflow-y: auto;overscroll-behavior: contain}:host([windowed]) ::slotted(helix-table-column) {--_table-heading-background-color: var(--data-table-heading-background-color, var(--helix-color-background));--_table-heading-layer: var(--helix-layer-sticky);--_table-heading-position: sticky}:host([windowed]) [part="select-all"], :host([windowed]) [part="grip-head"] {background-color: var(--data-table-heading-background-color, var(--helix-color-background));inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky)}[part="before"], [part="after"] {grid-column: 1 / -1}:host([loading]) [part="table"] {opacity: 0.5}[part="drag-preview"] {background-color: var(--data-table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--data-table-drag-preview-border-width, var(--helix-border-floating)) solid var(--data-table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--data-table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--data-table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--data-table-drag-preview-opacity, 0.9)}@media print {:host {background-color: transparent}[part="table"] {overflow-x: visible}:host([windowed]) [part="table"] {block-size: auto;overflow-y: visible}[part="footer"] {display: none}}`);
+export const styles = createSheet(`:host {display: block}[part="toolbar"], [part="table"], [part="footer"] {grid-column: 1 / -1}[part="table"] {display: grid;grid-template-columns: var(--data-table-columns, var(--data-table-template, minmax(0, 1fr)));inline-size: 100%;overflow-x: auto}[part="table"] {--_data-table-fade: to right;animation: data-table-edges linear both;animation-timeline: scroll(self inline);mask-image: linear-gradient(var(--_data-table-fade), transparent, #000 var(--_data-table-fade-start, 0rem), #000 calc(100% - var(--_data-table-fade-end, 0rem)), transparent)}:host(:dir(rtl)) [part="table"] {--_data-table-fade: to left}@keyframes data-table-edges {0% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: 0rem}5%, 95% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: var(--helix-space-xl)}100% {--_data-table-fade-end: 0rem;--_data-table-fade-start: var(--helix-space-xl)}}@media (prefers-reduced-motion: reduce) {[part="table"] {animation: none}}[part="head"], [part~="row"] {display: contents}[part~="cell"] {border-block-end: var(--helix-border-thin) solid var(--data-table-rule-color, var(--helix-color-border));color: var(--data-table-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));text-align: var(--data-table-cell-align)}[part~="row"]:last-of-type [part~="cell"] {border-block-end-color: transparent}::slotted(helix-table-column) {--_table-heading-color: var(--data-table-heading-color);--_table-heading-padding-block: var(--data-table-padding-block);--_table-heading-padding-inline: var(--data-table-padding-inline);--_table-heading-rule-color: var(--data-table-rule-color);--_table-heading-text: var(--data-table-text)}::slotted(helix-table-column[sortable]) {cursor: pointer}[part~="cell"]:focus-visible, [part="more-cell"]:focus-visible, [part~="select"]:focus-visible, [part="select-all"]:focus-visible, [part="row-grip"]:focus-visible, [part="grip-head"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part~="select"], [part="select-all"], [part="row-grip"], [part="grip-head"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--data-table-rule-color, var(--helix-color-border));display: flex;justify-content: center;padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-sm))}[part="grip-head"]::before {content: "";inline-size: 1em}[part~="row"]:last-of-type [part~="select"], [part~="row"]:last-of-type [part="row-grip"] {border-block-end-color: transparent}[part~="row"][aria-selected="true"] > * {background-color: var(--data-table-selected-background-color, color-mix(in srgb, var(--helix-color-primary) 10%, var(--helix-color-background)))}[part="row-grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--data-table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none}[part="row-grip-button"]:active {cursor: grabbing}[part="row-grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--data-table-grip-disabled-opacity, 0.4)}[part="row-grip-mark"] {block-size: 1em;inline-size: 1em}[part~="row"][part~="row-dragging"] > * {opacity: var(--data-table-dragging-opacity, 0.5)}[part~="row"][part~="row-drop-before"] > * {box-shadow: inset 0 var(--data-table-drop-indicator-size, var(--helix-border-thick)) 0 0 var(--data-table-drop-indicator-color, var(--helix-color-primary))}[part~="row"][part~="row-drop-after"] > * {box-shadow: inset 0 calc(var(--data-table-drop-indicator-size, var(--helix-border-thick)) * -1) 0 0 var(--data-table-drop-indicator-color, var(--helix-color-primary))}[part="toolbar"][data-empty], [part="footer"][data-empty] {display: none}[part="toolbar"] {padding-block-end: var(--data-table-toolbar-gap, var(--helix-space-sm))}[part="footer"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--data-table-footer-item-gap, var(--helix-space-md));padding-block-start: var(--data-table-footer-gap, var(--helix-space-sm))}[part="pagination"] {margin-inline-start: auto}[part="footer"][data-held] {min-block-size: calc(var(--pagination-size, var(--helix-size-control-tight)) + var(--data-table-footer-gap, var(--helix-space-sm)))}[part="footer"][data-held] [part="pagination"] {visibility: hidden}:host(:not(:defined))::before, :host(:not(:defined))::after {content: none !important}[part="empty"], [part="loading"] {grid-column: 1 / -1}[part="error"] {color: var(--data-table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);grid-column: 1 / -1;margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center}:host([child-field]) [part~="cell-header"] {--_data-table-gutter: calc(var(--data-table-toggle-size, var(--helix-size-icon-tight)) + var(--data-table-toggle-gap, var(--helix-space-2xs)));padding-inline-start: calc((var(--data-table-level, 1) - 1) * var(--data-table-indent, var(--_data-table-gutter)))}:host([child-field]) [part~="cell-header"]:not(:has([part~="toggle"])) {padding-inline-start: calc((var(--data-table-level, 1) - 1) * var(--data-table-indent, var(--_data-table-gutter)) + var(--_data-table-gutter))}[part~="toggle"] {align-items: center;background: none;block-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));border: none;color: var(--data-table-toggle-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;inline-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));justify-content: center;margin-inline-end: var(--data-table-toggle-gap, var(--helix-space-2xs));padding: 0;vertical-align: middle}[part="toggle-mark"] {block-size: 100%;inline-size: 100%}[part="more"] {display: contents}[part="more-cell"] {display: flex;grid-column: 1 / -1;padding-block: var(--data-table-padding-block, var(--helix-space-sm))}[part="more-button"] {background: none;border: var(--helix-border-thin) solid var(--data-table-more-border-color, var(--helix-color-border));border-radius: var(--data-table-more-radius, var(--helix-radii-sm));color: var(--data-table-color, var(--helix-color-foreground));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-more-padding-block, var(--helix-space-2xs));padding-inline: var(--data-table-more-padding-inline, var(--helix-space-sm))}[part="more-button"]:hover {background-color: var(--data-table-more-hover-background-color, var(--helix-color-surface-raised))}:host([windowed]) [part="table"] {block-size: var(--data-table-block-size, 24em);overflow-y: auto;overscroll-behavior: contain}:host([windowed]) ::slotted(helix-table-column) {--_table-heading-background-color: var(--data-table-heading-background-color, var(--helix-color-background));--_table-heading-layer: var(--helix-layer-sticky);--_table-heading-position: sticky}:host([windowed]) [part="select-all"], :host([windowed]) [part="grip-head"] {background-color: var(--data-table-heading-background-color, var(--helix-color-background));inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky)}[part="before"], [part="after"] {grid-column: 1 / -1}:host([loading]) [part="table"] {opacity: 0.5}[part="drag-preview"] {background-color: var(--data-table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--data-table-drag-preview-border-width, var(--helix-border-floating)) solid var(--data-table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--data-table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--data-table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--data-table-drag-preview-opacity, 0.9)}@media print {:host {background-color: transparent}[part="table"] {overflow-x: visible}:host([windowed]) [part="table"] {block-size: auto;overflow-y: visible}[part="footer"] {display: none}}`);

package/dist/data-table/root/data-table-root.d.ts

@@ -22,7 +22,9 @@ import '../../pagination/index.js';
  * Write it under the columns as `helix-table-row` and `helix-table-cell`
  * elements. `@fusion.dev/helix-styles/helix.css` lays them out as the table
  * draws them before it upgrades, and the table shows them until `rows` holds a
- * row.
+ * row. It holds the checkbox column and the pagination's row from the first
+ * paint, and takes the widths from `columns`, so nothing moves when the table
+ * upgrades or draws its own rows.
  *
  * @since 0.1.0
  * @status stable

package/dist/index.d.ts

@@ -62,6 +62,7 @@ export * from './listbox/index.js';
 export * from './loader/index.js';
 export * from './map/index.js';
 export * from './megamenu/index.js';
+export * from './menu/filter/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';
 export * from './navigation/index.js';

package/dist/index.js

@@ -57,6 +57,7 @@ export * from './listbox/index.js';
 export * from './loader/index.js';
 export * from './map/index.js';
 export * from './megamenu/index.js';
+export * from './menu/filter/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';
 export * from './navigation/index.js';

package/dist/menu/filter/index.d.ts

@@ -0,0 +1 @@
+export { filterMenu, MenuFilterController } from '@fusion.dev/helix-headless/menu/filter';

package/dist/menu/filter/index.js

@@ -0,0 +1,5 @@
+import { filterMenu } from '@fusion.dev/helix-headless/menu/filter';
+import { HelixMenu } from '../root/menu-root.js';
+import { styles } from './menu-filter.css.js';
+filterMenu(HelixMenu, styles);
+export { filterMenu, MenuFilterController } from '@fusion.dev/helix-headless/menu/filter';

package/dist/menu/filter/menu-filter.css.d.ts

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

package/dist/menu/filter/menu-filter.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`input {appearance: none;background-color: var(--menu-background-color, var(--helix-color-surface-overlay));border: none;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);inline-size: 100%;inset-block-start: calc(var(--helix-space-xs) * -1);margin-block: calc(var(--helix-space-xs) * -1) var(--helix-space-xs);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);position: sticky;z-index: 1}input:focus-visible {outline: none}[data-filtered] slot::slotted(helix-divider) {display: none}`);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents}[part="surface"] {--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);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none)}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs)}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none)}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium)}::slotted(helix-divider) {margin-block: var(--helix-space-2xs)}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none}[part="search-field"] {appearance: none;background-color: var(--menu-background-color, var(--helix-color-surface-overlay));border: none;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);inline-size: 100%;inset-block-start: calc(var(--helix-space-xs) * -1);margin-block: calc(var(--helix-space-xs) * -1) var(--helix-space-xs);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);position: sticky;z-index: 1}[part="search-field"]:focus-visible {outline: none}[part="surface"][data-filtered] slot::slotted(helix-divider) {display: none}:host([loading]) [part="surface"] {opacity: 0.5}@media print {:host {display: none}}`);
+export const styles = createSheet(`:host {display: contents}[part="surface"] {--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);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none)}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs)}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none)}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium)}::slotted(helix-divider) {margin-block: var(--helix-space-2xs)}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none}:host([loading]) [part="surface"] {opacity: 0.5}@media print {:host {display: none}}`);

package/dist/sandbox/compile.d.ts

@@ -0,0 +1,63 @@
+/**
+ * The compiler a module file in TypeScript or JSX runs through before the
+ * frame loads it, by its npm name and its pinned version.
+ *
+ * **Sucrase, measured against esbuild-wasm on October 8, 2026**, on a TSX
+ * module of 241 lines with the automatic JSX runtime:
+ *
+ * | | Sucrase 3.35 | esbuild-wasm 0.28 |
+ * | --- | --- | --- |
+ * | Download, gzip | 48 KB, and 9 KB of `buffer` esm.sh adds | 3.2 MB of WebAssembly, and 19 KB |
+ * | First compile | 14 ms | 188 ms, the WebAssembly starting |
+ * | Each after | 0.8 ms | 4.6 ms |
+ * | Automatic JSX runtime | yes | yes |
+ * | Source map | yes | yes |
+ *
+ * Both compile what a sandbox holds, and neither checks types. esbuild-wasm
+ * downloads 56 times as much before the first module runs, which a reader
+ * waits through on the first edit of every page. Sucrase also keeps every line
+ * where it was, so a line number in an error in the frame is the line in the
+ * pane even where a browser ignores the source map.
+ *
+ * **Loaded the first time a module needs it**, from the preview's `cdn` as a
+ * package in `dependencies` is, so the published package carries no compiler
+ * and a sandbox with no TypeScript loads none.
+ *
+ * **In a worker of its own**, which has no access to the page and keeps a
+ * long compile off the page's thread. The worker's script is text, so the
+ * `import()` of an address known only at run time is one no bundler reads:
+ * written in this module, Turbopack refused to build a page that imported
+ * it, the TypeScript build having dropped the comments that tell bundlers to
+ * leave it alone. The compiler reads the source as text, and the example
+ * itself still runs only in the frame.
+ */
+export declare const COMPILER = "sucrase@3.35.1";
+/** Whether a module file is TypeScript or JSX, which a browser cannot run as written. */
+export declare const COMPILED: RegExp;
+/** Sucrase's `transform`, as the worker runs it: rejects with what failed. */
+type Transform = (source: string, options: Record<string, unknown>) => Promise<{
+    code: string;
+    sourceMap?: Record<string, unknown>;
+}>;
+/**
+ * The compiler for each `cdn`, so each is set up once a page. A spec puts a
+ * stand-in here, for an address of its own.
+ */
+export declare const compilers: Map<string, Transform>;
+/**
+ * A module file compiled to JavaScript, with its source map inline, for the
+ * frame to load as its other modules.
+ *
+ * `.ts` is read as TypeScript, `.tsx` as TypeScript with JSX, and `.jsx` as
+ * JSX. JSX compiles to the automatic runtime, `react/jsx-runtime`, which an
+ * example lists in `dependencies`, or to the runtime a
+ * `@jsxImportSource preact` comment in the file names.
+ *
+ * **What fails to compile still runs, as a module that throws** what the
+ * compiler said, such as `Error transforming app.tsx: Unexpected token (2:1)`.
+ * The frame reports it as it reports any error an example does not catch, so
+ * it shows over the example in the preview's `error` part and in the
+ * terminal, and only where the example imports the file.
+ */
+export declare const compile: (cdn: string, path: string, source: string) => Promise<string>;
+export {};

package/dist/sandbox/compile.js

@@ -0,0 +1,52 @@
+export const COMPILER = 'sucrase@3.35.1';
+export const COMPILED = /\.(?:[cm]?ts|[jt]sx)$/;
+const WORKER = 'const l={};onmessage=async({data:[i,a,s,o]})=>{let c;try{c=await(l[a]??=import(a))}catch(e){delete l[a];return postMessage([i,,o.filePath+" needs "+a+", which did not load: "+e])}try{postMessage([i,c.transform(s,o)])}catch(e){postMessage([i,,String(e?.message)])}}';
+let worker;
+let sent = 0;
+const owed = new Map();
+const inWorker = (address) => (source, options) => {
+    if (!worker) {
+        worker = new Worker(URL.createObjectURL(new Blob([WORKER], { type: 'text/javascript' })), {
+            type: 'module',
+        });
+        worker.onmessage = ({ data }) => {
+            owed.get(data[0])?.(data);
+            owed.delete(data[0]);
+        };
+    }
+    sent += 1;
+    const id = sent;
+    worker.postMessage([id, address, source, options]);
+    return new Promise((resolve, reject) => {
+        owed.set(id, ([, result, error]) => (result ? resolve(result) : reject(new Error(error))));
+    });
+};
+export const compilers = new Map();
+const compilerAt = (cdn) => {
+    let compiler = compilers.get(cdn);
+    if (!compiler) {
+        compiler = inWorker(`${cdn}${COMPILER}`);
+        compilers.set(cdn, compiler);
+    }
+    return compiler;
+};
+export const compile = async (cdn, path, source) => {
+    try {
+        const { code, sourceMap } = await compilerAt(cdn)(source, {
+            filePath: path,
+            jsxImportSource: /@jsxImportSource\s+(\S+)/.exec(source)?.[1],
+            jsxRuntime: 'automatic',
+            production: true,
+            sourceMapOptions: { compiledFilename: path },
+            transforms: [
+                ...(/tsx?$/.test(path) ? ['typescript'] : []),
+                ...(/x$/.test(path) ? ['jsx'] : []),
+            ],
+        });
+        const map = JSON.stringify({ ...sourceMap, sourcesContent: [source] });
+        return `${code}\n
+    }
+    catch (error) {
+        return `throw new SyntaxError(${JSON.stringify(error.message)})`;
+    }
+};

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

@@ -73,6 +73,15 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * in the `js` pane or in another module loads it. A sandbox writes each pane
  * named for a module file here.
  *
+ * **A module in TypeScript or JSX runs too**: a path ending in `.ts`, `.tsx`
+ * or `.jsx` is compiled to JavaScript first, and imported by its path or by
+ * its path without the extension. The compiler, Sucrase, loads from `cdn` the
+ * first time a module needs it, so the package carries none and a preview
+ * with no such module loads none. JSX compiles to the automatic runtime,
+ * `react/jsx-runtime`, from `dependencies`, or to the one a
+ * `@jsxImportSource` comment names. What fails to compile shows in the
+ * `error` part as an error the example threw, when the example imports it.
+ *
  * **Examples render in a frame**, so an example's styles and scripts do not
  * affect the page around the sandbox, and `position: fixed` stays inside the
  * pane. The frame starts empty, with its own stylesheets and its own custom
@@ -233,6 +242,16 @@ export declare class HelixSandboxPreview extends HelixElement {
     private failedSource;
     /** What the example threw and did not catch, while the preview is `failed`. */
     private failure;
+    /** Each module file compiled to JavaScript, by its path and source. */
+    private compiled;
+    /** The module files being compiled, by their path and source. */
+    private readonly compiling;
+    /**
+     * The import map the built-in document loads with: the last one with every
+     * module file compiled, so a frame never loads without one an example
+     * imports.
+     */
+    private map;
     /** 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. */
@@ -244,6 +263,11 @@ export declare class HelixSandboxPreview extends HelixElement {
      * `dependencies` and the paths under it, and `imports` over all of them.
      */
     private get importMap();
+    /**
+     * Compiles a module file, once, then draws again with it. Not on a server,
+     * which loads no frame.
+     */
+    private compileModule;
     /**
      * 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
@@ -322,7 +346,10 @@ export declare class HelixSandboxPreview extends HelixElement {
     private scheduleSend;
     /** What the frame is sent: the source, its stylesheet and its settings. */
     private get message();
-    /** Sends the current source to the frame, once it is listening. */
+    /**
+     * Sends the current source to the frame, once it is listening and no
+     * module it may import is still compiling.
+     */
     private send;
     /**
      * Opens the example in a new tab, and returns the tab's window, or `null`
@@ -362,6 +389,7 @@ export declare class HelixSandboxPreview extends HelixElement {
      * nothing has failed in it. The built-in document loads too.
      */
     private unready;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** The reload and open buttons, under `controls`. */
     private renderControls;

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

@@ -4,6 +4,7 @@ import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixR
 const SETTLE = 120;
 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 { styles as sheet } from './sandbox-preview.css.js';
 const SANDBOX = 'allow-scripts allow-forms';
@@ -22,6 +23,9 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         this.src = '';
         this.styles = '';
         this.ready = false;
+        this.compiled = new Map();
+        this.compiling = new Set();
+        this.map = {};
         this.handleFrameLoad = () => {
             this.ready = true;
             this.toggleState('loading', false);
@@ -72,11 +76,39 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             map[name] = address;
             map[`${name}/`] = `${address}/`;
         }
+        const compiled = new Map();
         for (const [given, source] of Object.entries(this.modules ?? {})) {
             const path = given.replace(/^\.?\//, '');
-            map[`./${path}`] = map[`sandbox:/${path}`] = moduleText(path, source);
+            if (!COMPILED.test(path)) {
+                map[`./${path}`] = map[`sandbox:/${path}`] = moduleText(path, source);
+                continue;
+            }
+            const key = `${path}\u0000${source}`;
+            const code = this.compiled.get(key);
+            if (code === undefined) {
+                this.compileModule(key, path, source);
+                continue;
+            }
+            compiled.set(key, code);
+            const text = moduleText(path, code);
+            const bare = path.replace(COMPILED, '');
+            map[`./${path}`] = map[`sandbox:/${path}`] = text;
+            map[`./${bare}`] ??= map[`sandbox:/${bare}`] ??= text;
         }
-        return { ...map, ...this.imports };
+        this.compiled = compiled;
+        return this.compiling.size > 0 ? undefined : { ...map, ...this.imports };
+    }
+    compileModule(key, path, source) {
+        if (this.compiling.has(key) || typeof document === 'undefined') {
+            return;
+        }
+        this.compiling.add(key);
+        void compile(this.cdn, path, source).then((code) => {
+            this.compiling.delete(key);
+            this.compiled.set(key, code);
+            this.requestUpdate();
+            void this.updateComplete.then(() => this.send());
+        });
     }
     static { this.target = '*'; }
     scheduleSend() {
@@ -98,7 +130,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         };
     }
     send() {
-        if (!this.ready) {
+        if (!this.ready || this.compiling.size > 0) {
             return;
         }
         this.frame?.contentWindow?.postMessage(this.message, HelixSandboxPreview_1.target);
@@ -118,7 +150,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         frame.title = this.label;
         frame.style.cssText = 'block-size: 100vh; border: none; display: block; inline-size: 100vw';
         if (this.src === '') {
-            frame.srcdoc = defaultFrame(this.importMap);
+            frame.srcdoc = defaultFrame(this.map);
         }
         else {
             frame.src = this.frame?.src || this.src;
@@ -144,7 +176,7 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
         }
         this.unready();
         if (this.src === '') {
-            frame.srcdoc = defaultFrame(this.importMap);
+            frame.srcdoc = defaultFrame(this.map);
             return;
         }
         frame.src = this.src;
@@ -156,9 +188,15 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
         this.fail();
         this.toggleState('loading', true);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.src === '') {
+            this.map = this.importMap ?? this.map;
+        }
+    }
     updated(changed) {
         super.updated(changed);
-        const map = this.src === '' ? JSON.stringify(this.importMap) : '';
+        const map = this.src === '' ? JSON.stringify(this.map) : '';
         const remapped = map !== this.loadedMap;
         this.loadedMap = map;
         if (changed.has('src') || remapped) {
@@ -189,7 +227,7 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
       part="frame"
       @load=${this.handleFrameLoad}
       src=${this.src || nothing}
-      srcdoc=${this.src === '' ? defaultFrame(this.importMap) : nothing}
+      srcdoc=${this.src === '' ? defaultFrame(this.map) : nothing}
       title=${this.label}
       aria-describedby=${this.failure === undefined ? nothing : 'error'}
       allow="clipboard-write *; fullscreen *"

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

@@ -21,6 +21,10 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * - `js` sets a script that runs as a module after the markup.
  * - A module file name ending in `.js` or `.mjs`, such as `utils.js`, is a
  *   module the other scripts import by its path, `./utils.js`.
+ * - A module file name ending in `.ts`, `.tsx` or `.jsx`, such as `app.tsx`,
+ *   is one too, which the preview compiles to JavaScript first. The `js` pane
+ *   runs it with `import './app.tsx'`. A file that does not compile shows
+ *   why over the preview, as an error the example threw.
  * - `package.json` sets the npm packages the scripts import by name, from its
  *   `dependencies`, which load from the preview's `cdn`.
  *

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

@@ -8,7 +8,7 @@ const DEFAULT_SPLIT = 50;
 const DEFAULT_PANEL = 160;
 const PANEL_MAX = 0.8;
 const PANE_KEYS = { css: 'styles', html: 'source', js: 'script' };
-const MODULE = /\.m?js$/;
+const MODULE = /\.(?:m?js|[cm]?ts|[jt]sx)$/;
 const MANIFEST = 'package.json';
 const isPaneName = (name) => typeof name === 'string' &&
     (Object.hasOwn(PANE_KEYS, name) || MODULE.test(name) || name === MANIFEST);

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

@@ -40,7 +40,7 @@ import { type StrandsVariant } from '../path.js';
  *
  * The ribbon stops moving in these cases:
  * - `prefers-reduced-motion` is set. The element shows one still frame, and in
- *   `travel` still follows the scroll, without easing.
+ *   `travel` still follows the scroll.
  * - The element is off screen or in a background tab.
  *
  * It shows a gradient from the same tokens in these cases, and matches
@@ -185,7 +185,7 @@ export declare class HelixStrands extends HelixElement {
     private readonly quietRects;
     /** In `travel`, the path's `y` at even steps of its parameter. */
     private table;
-    /** In `travel`, the scroll position the ribbon is drawn at, easing toward the page's. */
+    /** In `travel`, the scroll position the ribbon was last drawn at. */
     private offset;
     /** Whether the opening frame has been drawn. Aura's settle: see `open`. */
     private opened;
@@ -256,8 +256,8 @@ export declare class HelixStrands extends HelixElement {
     /** A layout on the next frame, once, however many changes asked for one. */
     private readonly relayout;
     /**
-     * The page scrolled. A running loop eases toward it on its own; a stopped
-     * one, for a reader who asked for no motion, jumps there and paints once.
+     * The page scrolled. A running loop draws the new position on its next
+     * frame; a stopped one, for a reader who asked for no motion, paints once.
      */
     private readonly handleScroll;
     private paint;

package/dist/strands/root/strands-root.js

@@ -10,7 +10,6 @@ import { styles } from './strands-root.css.js';
 const MAX_CANVAS_EDGE = 4096;
 const MAX_CANVAS_PIXELS = 4_194_304;
 const OPENING_PATIENCE = 500;
-const TRAVEL_EASE = 0.09;
 const PACE = 0.25;
 let HelixStrands = class HelixStrands extends HelixElement {
     constructor() {
@@ -465,11 +464,7 @@ let HelixStrands = class HelixStrands extends HelixElement {
         this.held = 0;
         this.elapsed += step * PACE * Math.max(0, this.speed);
         if (this.travel) {
-            const target = window.scrollY;
-            this.offset += (target - this.offset) * (1 - Math.exp(-step / TRAVEL_EASE));
-            if (Math.abs(target - this.offset) < 0.5) {
-                this.offset = target;
-            }
+            this.offset = window.scrollY;
         }
         this.paint();
     }