@fusion.dev/helix 0.160.0 → 0.162.0

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

@@ -325,55 +325,6 @@ export declare class HelixAura extends HelixElement {
     protected render(): TemplateResult;
     protected firstUpdated(changed: PropertyValues): void;
     private start;
-    /**
-     * Whether WebGL here is drawn on the CPU, asked before one is drawn into.
-     *
-     * **The shader costs what a GPU makes it cheap to ask for.** The note at the
-     * top of this file measures it: on Metal the browser shares the compiled
-     * program and each aura after the first draws its opening frame in about 2ms,
-     * while under SwiftShader nothing is shared and each one compiles the pipeline
-     * again for about 450ms. Measured again 15 Sep 2026 on a page of 720 pixel
-     * auras, SwiftShader against the same page with this check in place: the worst
-     * frame gap went 568ms to 50ms with one aura, 1626ms to 34ms with three and
-     * 3200ms to 42ms with six, and a page of three or six ran at 13 frames a
-     * second before and at the display's own rate after. What that buys is a field
-     * a reader barely sees behind content, against a gradient ramped from the same
-     * tokens. So the software path takes the fallback.
-     *
-     * **The unmasked name is the only one that answers.** `gl.RENDERER` is masked
-     * to `WebKit WebGL` on Chromium, the same string on SwiftShader and on Metal,
-     * and `WEBGL_debug_renderer_info` is what lifts the mask.
-     *
-     * **An unreadable renderer draws**, which is the safe direction and not the
-     * tidy one. The extension is optional and is withheld deliberately: Firefox's
-     * `privacy.resistFingerprinting` and Safari's equivalent both drop it, and a
-     * browser may drop it at any time, since a GPU name is a fingerprinting
-     * surface. Treating "we cannot tell" as software would take the shader away
-     * from every reader on a machine that hides its hardware, which is a real GPU
-     * far more often than not. Treating it as hardware costs a machine that hides
-     * a software renderer the 450ms, which is the cost the component has today.
-     *
-     * **A probe context of its own, and given straight back.** Asking the
-     * element's own canvas would spend it: `build` below is written around a
-     * canvas whose context was force-lost never yielding a working one again, and
-     * the probe has to release what it took or a page of auras runs the browser
-     * into its cap of about sixteen. One pixel by one, and released through
-     * `WEBGL_lose_context` the same way `drop` does.
-     *
-     * **The same attributes the real context asks for**, because they are part of
-     * the question: `powerPreference` can select a different adapter, so a probe
-     * asking for a high-performance context would name a GPU the drawing one is
-     * never given.
-     *
-     * **Asked per context rather than once for the page.** The answer is not
-     * fixed: a GPU process that crashes takes the page down to SwiftShader for
-     * the rest of its life, and an aura rebuilding after that should get the
-     * current answer rather than the one from before. It costs a context creation
-     * and two calls, measured 15 Sep 2026 at about 2ms under SwiftShader and 2ms
-     * on Metal, against the 450ms and 135ms first draws it stands in front of, and
-     * it happens once per context rather than once per frame.
-     */
-    private static drawsInSoftware;
     /**
      * The context and the program, from whatever canvas can still give one.
      *

package/dist/aura/root/aura-root.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 HelixAura_1;
-import { customElement, HelixAuraFallbackEvent, HelixElement, MAX_FRAME_STEP, PaintGateController, readColor, } from '@fusion.dev/helix-core';
+import { customElement, drawsInSoftware, HelixAuraFallbackEvent, HelixElement, MAX_FRAME_STEP, PaintGateController, readColor, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { tiltFor } from '../axis.js';
@@ -15,7 +15,6 @@ import { styles } from './aura-root.css.js';
 const MAX_CANVAS_EDGE = 4096;
 const MAX_CANVAS_PIXELS = 4_194_304;
 const OPENING_PATIENCE = 500;
-const SOFTWARE_RENDERER = /swiftshader|llvmpipe|softpipe|software rasterizer|basic render/i;
 let HelixAura = class HelixAura extends HelixElement {
     constructor() {
         super(...arguments);
@@ -163,25 +162,12 @@ let HelixAura = class HelixAura extends HelixElement {
             this.open();
         }
     }
-    static drawsInSoftware() {
-        const probe = document.createElement('canvas');
-        probe.width = 1;
-        probe.height = 1;
-        const gl = probe.getContext('webgl2', HelixAura_1.CONTEXT);
-        if (!gl) {
-            return false;
-        }
-        const debug = gl.getExtension('WEBGL_debug_renderer_info');
-        const name = debug ? gl.getParameter(debug.UNMASKED_RENDERER_WEBGL) : null;
-        gl.getExtension('WEBGL_lose_context')?.loseContext();
-        return typeof name === 'string' && SOFTWARE_RENDERER.test(name);
-    }
     build() {
         let canvas = this.renderRoot.querySelector('canvas');
         if (!canvas) {
             return false;
         }
-        if (HelixAura_1.drawsInSoftware()) {
+        if (drawsInSoftware(HelixAura_1.CONTEXT)) {
             this.refused = 'software';
             return false;
         }

package/dist/chat/message/chat-message.css.js

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="message"] {align-items: start;display: grid;grid-template-columns: auto minmax(0, 1fr);}[part="avatar"] > slot::slotted(*) {margin-inline-end: var(--helix-space-sm);}[part="avatar"] {align-items: center;display: flex;font-size: var(--helix-text-sm);grid-column: 1;line-height: var(--helix-leading-normal);min-block-size: calc(1lh + var(--helix-space-xs) * 2);}[part="body"] {grid-column: 2;}:host([author="me"]) [part="avatar"] {display: none;}[part="body"] {display: grid;gap: var(--helix-space-2xs);justify-items: start;max-inline-size: min(var(--chat-message-measure, 42rem), 80%);}:host([author="me"]) [part="body"] {justify-items: end;justify-self: end;}[part="actions"] {opacity: 0;pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}:host(:hover) [part="actions"],
+export const styles = createSheet(`:host {display: block;}:host(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="message"] {align-items: start;display: grid;grid-template-columns: auto minmax(0, 1fr);}[part="avatar"] > slot::slotted(*) {margin-inline-end: var(--helix-space-sm);}[part="avatar"] {align-items: center;display: flex;font-size: var(--helix-text-sm);grid-column: 1;line-height: var(--helix-leading-normal);min-block-size: calc(1lh + var(--helix-space-xs) * 2);}[part="body"] {grid-column: 2;}:host([author="me"]) [part="avatar"] {display: none;}[part="body"] {display: grid;gap: var(--helix-space-2xs);justify-items: start;max-inline-size: min(var(--chat-message-measure, 42rem), 80%);}:host([author="me"]) [part="body"] {justify-items: end;justify-self: end;}[part="actions"] {opacity: 0;pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}:host(:hover) [part="actions"],
 :host(:focus-within) [part="actions"] {opacity: 1;pointer-events: auto;}@media (hover: none) {[part="actions"] {opacity: 1;pointer-events: auto;}}[part="actions"] {--helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));--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);align-items: center;display: inline-flex;gap: var(--helix-space-2xs);}[part="actions"][hidden] {display: none;}[part="sources"] {--helix-size-avatar: var(--helix-size-avatar-sm);--helix-size-tag: var(--helix-size-tag-sm);--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);align-items: center;color: var(--helix-color-foreground-muted);display: flex;flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);line-height: var(--helix-leading-normal);}[part="sources"][hidden] {display: none;}[part="content"] {background-color: var(
 --chat-message-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)

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

@@ -4,6 +4,11 @@ var(--chat-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-
 var(--chat-scrollbar-track-color, var(--helix-scrollbar-track-color));}[part="header"][hidden],
 [part="resume"][hidden],
 [part="composer"][hidden] {display: none;}[part="status"][data-empty] {padding-block: 0;}[part="header"] {--helix-size-tag: var(--helix-size-tag-sm);align-items: center;border-block-end: var(--helix-border-thin) solid var(--chat-rule, var(--helix-color-border));display: flex;gap: var(--helix-space-sm);justify-content: space-between;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="header"] > [part="actions"] {--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);align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs);}[part="header"] > [part="actions"][hidden] {display: none;}[part="resume"] {display: grid;justify-items: center;margin-block-start: calc(var(--helix-space-xl) * -1);pointer-events: none;position: relative;}[part="resume"] > * {pointer-events: auto;}[part="resume"] slot::slotted(*) {border: var(--chat-resume-border-width, var(--helix-border-floating)) solid
-var(--chat-resume-border-color, var(--helix-color-border));box-shadow: var(--chat-resume-shadow, var(--helix-shadow-floating));}[part="status"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);padding-block-end: var(--helix-space-2xs);padding-block-start: var(--helix-space-xs);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="typing"] {align-items: center;color: var(--chat-typing-color, var(--helix-color-foreground-muted));display: inline-flex;gap: var(--chat-typing-gap, var(--helix-space-xs));}[part="composer"] {padding-block: var(--helix-space-sm);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="empty"],
+var(--chat-resume-border-color, var(--helix-color-border));box-shadow: var(--chat-resume-shadow, var(--helix-shadow-floating));}[part="resume-button"] {all: unset;box-sizing: border-box;align-items: center;background-color: var(--helix-color-surface-raised);block-size: var(--helix-size-control);border: var(--chat-resume-border-width, var(--helix-border-floating)) solid
+var(--chat-resume-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--chat-resume-shadow, var(--helix-shadow-floating));color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-control);font-weight: var(--helix-weight-medium);gap: var(--helix-space-xs);line-height: var(--helix-leading-tight);padding-inline: var(--helix-space-control);pointer-events: auto;white-space: nowrap;}[part="resume-button"]:hover {background-color: color-mix(
+in oklab,
+var(--helix-color-foreground) 6%,
+var(--helix-color-surface-raised)
+);}[part="resume-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="resume-mark"] {block-size: var(--helix-size-icon-sm);display: inline-flex;inline-size: var(--helix-size-icon-sm);}[part="resume-mark"] svg {block-size: 100%;inline-size: 100%;}[part="status"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);padding-block-end: var(--helix-space-2xs);padding-block-start: var(--helix-space-xs);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="typing"] {align-items: center;color: var(--chat-typing-color, var(--helix-color-foreground-muted));display: inline-flex;gap: var(--chat-typing-gap, var(--helix-space-xs));}[part="composer"] {padding-block: var(--helix-space-sm);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="empty"],
 [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-none);}[part="history"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-lg);text-align: center;}[part="log"][data-windowed] {gap: var(--helix-space-none);}[part="turn"] {flex: none;}[part="turn"]:not([data-index="0"]) {padding-block-start: var(--chat-gap, var(--helix-space-md));}@media print {:host {max-block-size: none;}[part="log"] {overflow-y: visible;}[part="composer"],
 [part="resume"] {display: none;}}`);

package/dist/code-block/root/code-block-root.css.js

@@ -1,8 +1,15 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_code-block-size: var(--code-block-font-size, var(--helix-text-sm));--_code-block-leading: var(--code-block-line-height, var(--helix-leading-normal));--_code-block-face: var(--code-block-font-family, var(--helix-font-mono));--_code-block-copy-inset: calc(var(--helix-space-sm) + (1lh - var(--helix-size-control-sm)) / 2);--_code-block-gutter: calc(var(--helix-size-control-sm) + var(--_code-block-copy-inset) * 2);display: flex;flex-direction: column;}[part="frame"] {flex: 1;}:host(:not([diff])) [part="frame"] {font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}[part="header"] {align-items: center;backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-end-end-radius: var(--helix-radii-none);border-end-start-radius: var(--helix-radii-none);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));display: flex;gap: var(--helix-space-sm);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="header"]:has(> [part="copy"]) {padding-block: var(--helix-space-2xs);padding-inline-end: var(--helix-space-2xs);}[part="label"] {color: var(--code-block-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow-wrap: anywhere;}[part="frame"] {position: relative;}[part="block"] {block-size: 100%;}[part="copy"] {--icon-button-size: var(--helix-size-control-sm);}[part="header"] > [part="copy"] {margin-inline-start: auto;}[part="frame"] > [part="copy"] {font-size: var(--_code-block-size);inset-block-start: var(--_code-block-copy-inset);inset-inline-end: var(--_code-block-copy-inset);line-height: var(--_code-block-leading);position: absolute;}[part="block"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);overflow-x: auto;padding-block: var(--helix-space-sm);padding-inline: var(--helix-space-md);}:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {padding-inline-end: var(--_code-block-gutter);}[part="header"] + [part="frame"] [part="block"] {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="code"] {color: var(--code-block-color, var(--helix-color-foreground));font-family: var(--_code-block-face);font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}:host(:not([diff])) [part="code"] {display: block;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;}:host(:state(expanded)) [part="code"] {max-block-size: none;}[part="expand"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-expand-color, var(--helix-color-foreground-muted));cursor: pointer;font-size: var(--helix-text-sm);padding: var(--helix-space-xs);}[part="expand"]:hover {color: var(--helix-color-foreground);}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="block"]:focus-visible,
+export const styles = createSheet(`:host {--_code-block-size: var(--code-block-font-size, var(--helix-text-sm));--_code-block-leading: var(--code-block-line-height, var(--helix-leading-normal));--_code-block-face: var(--code-block-font-family, var(--helix-font-mono));--_code-block-copy-inset: calc(var(--helix-space-sm) + (1lh - var(--helix-size-control-sm)) / 2);--_code-block-gutter: calc(var(--helix-size-control-sm) + var(--_code-block-copy-inset) * 2);display: flex;flex-direction: column;}[part="frame"] {flex: 1;}:host(:not([diff])) [part="frame"] {font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}[part="header"] {align-items: center;backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-end-end-radius: var(--helix-radii-none);border-end-start-radius: var(--helix-radii-none);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));display: flex;gap: var(--helix-space-sm);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="header"]:has(> [part="copy"]) {padding-block: var(--helix-space-2xs);padding-inline-end: var(--helix-space-2xs);}[part="label"] {color: var(--code-block-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow-wrap: anywhere;}[part="frame"] {position: relative;}[part="block"] {block-size: 100%;}[part="copy"] {--icon-button-size: var(--helix-size-control-sm);}[part="header"] > [part="copy"] {margin-inline-start: auto;}[part="actions"] {align-items: center;display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto;}[part="header"]
+> :is([part="actions"], [part="wrap-toggle"])
+~ :is([part="copy"], [part="wrap-toggle"]) {margin-inline-start: var(--helix-space-none);}[part="wrap-toggle"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-label-color, var(--helix-color-foreground-muted));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);margin-inline-start: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);}[part="wrap-toggle"]:hover,
+[part="wrap-toggle"][aria-pressed="true"] {color: var(--helix-color-foreground);}[part="wrap-toggle"][aria-pressed="true"] {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);}[part="wrap-toggle"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="frame"] > [part="copy"] {font-size: var(--_code-block-size);inset-block-start: var(--_code-block-copy-inset);inset-inline-end: var(--_code-block-copy-inset);line-height: var(--_code-block-leading);position: absolute;}[part="block"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);overflow-x: auto;padding-block: var(--helix-space-sm);padding-inline: var(--helix-space-md);}:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {padding-inline-end: var(--_code-block-gutter);}[part="header"] + [part="frame"] [part="block"] {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="code"] {color: var(--code-block-color, var(--helix-color-foreground));font-family: var(--_code-block-face);font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}:host(:not([diff])) [part="code"] {display: block;isolation: isolate;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;position: relative;}:host(:state(expanded)) [part="code"] {max-block-size: none;}[part="expand"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-expand-color, var(--helix-color-foreground-muted));cursor: pointer;font-size: var(--helix-text-sm);padding: var(--helix-space-xs);}[part="expand"]:hover {color: var(--helix-color-foreground);}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="block"]:focus-visible,
 [part="code"]:focus-visible,
 [part="old"]:focus-visible,
-[part="new"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([wrap]:not([diff], [line-numbers])) [part="code"] {overflow-wrap: anywhere;white-space: pre-wrap;}:host([line-numbers]:not([diff])) [part="block"] {column-gap: var(--helix-space-md);display: grid;grid-template-columns: auto minmax(0, 1fr);}[part="gutter"] {color: var(--code-block-gutter-color, var(--helix-color-foreground-subtle));font-family: var(--_code-block-face);font-size: var(--_code-block-size);font-variant-numeric: tabular-nums;line-height: var(--_code-block-leading);text-align: end;user-select: none;}:host([diff]) {gap: var(--helix-space-md);}:host([diff]) [part="file"] {container-type: inline-size;display: flex;flex-direction: column;}:host([diff]) [part="block"],
+[part="new"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([wrap]:not([diff])) [part="code"] {overflow-wrap: anywhere;white-space: pre-wrap;}[part="mark"] {background-color: var(
+--code-block-mark-color,
+color-mix(in oklab, var(--helix-color-primary) 12%, transparent)
+);block-size: var(--code-block-mark-size, 0);border-inline-start: var(--helix-border-thick) solid
+var(--code-block-mark-edge-color, var(--helix-color-primary));box-sizing: border-box;inline-size: max(100%, var(--code-block-mark-inline-size, 100%));inset-block-start: var(--code-block-mark-start, 0);inset-inline-start: 0;pointer-events: none;position: absolute;z-index: var(--helix-layer-beneath);}:host([line-numbers]:not([diff])) [part="block"] {column-gap: var(--helix-space-md);display: grid;grid-template-columns: auto minmax(0, 1fr);}[part="gutter"] {color: var(--code-block-gutter-color, var(--helix-color-foreground-subtle));font-family: var(--_code-block-face);font-size: var(--_code-block-size);font-variant-numeric: tabular-nums;line-height: var(--_code-block-leading);text-align: end;user-select: none;}:host([diff]) {gap: var(--helix-space-md);}:host([diff]) [part="file"] {container-type: inline-size;display: flex;flex-direction: column;}:host([diff]) [part="block"],
 [part="old"],
 [part="new"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);min-inline-size: 0;overflow-x: auto;padding-block: var(--helix-space-none) var(--helix-space-sm);padding-inline: var(--helix-space-none);}:host([diff]:not([no-copy]))
 [part="frame"]:not([part="header"] + *)
@@ -30,7 +37,7 @@ var(--helix-color-foreground)
 in oklab,
 var(--code-block-removed-color, var(--helix-color-danger)) 55%,
 var(--helix-color-foreground)
-);}[part="filler"] {background-color: var(--helix-color-surface-sunken);min-block-size: 1lh;}[part="number"] {color: var(--helix-color-foreground-muted);font-variant-numeric: tabular-nums;padding-inline-end: var(--helix-space-sm);user-select: none;}@media print {:host {background-color: transparent;}:host([diff]) [part="block"],
+);}[part="filler"] {background-color: var(--helix-color-surface-sunken);min-block-size: 1lh;}[part="number"] {color: var(--helix-color-foreground-muted);font-variant-numeric: tabular-nums;padding-inline-end: var(--helix-space-sm);user-select: none;}[part="gutter"] > [part="number"] {block-size: var(--code-block-line-size, auto);color: inherit;display: block;padding-inline-end: var(--helix-space-none);}@media print {:host {background-color: transparent;}:host([diff]) [part="block"],
 [part="old"],
 [part="new"] {overflow: visible;white-space: pre-wrap;}[part="added"],
 [part="removed"],

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

@@ -18,7 +18,8 @@ import '../../copy-button/index.js';
  *
  * Long lines scroll by default. Set `wrap` to wrap them instead, for prose-like
  * code such as a long command, and set `--code-block-max-block-size` to cap the
- * height of a long file, which then scrolls.
+ * height of a long file, which then scrolls. A line `mark-lines` names takes a
+ * band in the primary color, with an edge at its start.
  *
  * @since 0.1.0
  * @status stable
@@ -38,21 +39,14 @@ import '../../copy-button/index.js';
  * @cssproperty --code-block-header-background-color - The background behind the name. The default is `surface-raised`.
  * @cssproperty --code-block-label-color - The color of the name in the header.
  * @cssproperty --code-block-line-height - The line height of the code and its line numbers, as a number or a length.
+ * @cssproperty --code-block-mark-color - The band behind the lines `mark-lines` names. The primary color at a wash by default.
+ * @cssproperty --code-block-mark-edge-color - The edge at the start of a band behind marked lines. The primary color by default.
  * @cssproperty --code-block-max-block-size - The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit.
  * @cssproperty --code-block-radius - The corner radius of the header's top and the block's bottom, which form one shape.
  * @cssproperty --code-block-removed-color - The color a diff's removed lines are tinted in and their `-` is drawn in. The danger color by default.
  */
 export declare class HelixCodeBlock extends HelixHeadlessCodeBlock {
     static tier: string;
-    /**
-     * Whether long lines wrap.
-     *
-     * Off by default, so long lines scroll, because a line break can be
-     * significant in code and a wrapped line reads as two. For prose-like code, such as a long command or
-     * a log line, a wrap reads better than a scroll. Line numbers keep the lines
-     * unwrapped, since a wrapped line would take one number and several rows.
-     */
-    wrap: boolean;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/code-block/root/code-block-root.js

@@ -6,20 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCodeBlock } from '@fusion.dev/helix-headless/code-block';
-import { property } from 'lit/decorators.js';
 import { styles } from './code-block-root.css.js';
 import '../../copy-button/index.js';
 let HelixCodeBlock = class HelixCodeBlock extends HelixHeadlessCodeBlock {
-    constructor() {
-        super(...arguments);
-        this.wrap = false;
-    }
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixCodeBlock.prototype, "wrap", void 0);
 HelixCodeBlock = __decorate([
     customElement('helix-code-block')
 ], HelixCodeBlock);

package/dist/element-events.generated.js

@@ -32,6 +32,7 @@ registerElementEvents({
     'helix-chat-message': ['helix-send'],
     'helix-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-checkbox-group': ['change', 'helix-before-change', 'input'],
+    'helix-code-block': ['helix-before-toggle', 'helix-toggle'],
     'helix-color-input': [
         'change',
         'helix-before-change',
@@ -247,16 +248,20 @@ registerElementEvents({
     ],
     'helix-step': ['helix-select'],
     'helix-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
+    'helix-strands': ['helix-strands-fallback'],
     'helix-switch': ['change', 'helix-before-toggle', 'input'],
     'helix-tab': ['helix-dismiss', 'helix-select'],
     'helix-tab-panel': ['helix-load'],
     'helix-table': [
         'helix-before-reorder',
+        'helix-before-toggle',
+        'helix-load-more',
         'helix-reorder',
         'helix-select',
         'helix-selected',
         'helix-sort',
         'helix-sorted',
+        'helix-toggle',
     ],
     'helix-table-column': ['helix-before-resize', 'helix-resized'],
     'helix-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],

package/dist/index.d.ts

@@ -90,6 +90,7 @@ export * from './speed-dial/index.js';
 export * from './splitter/index.js';
 export * from './stat/index.js';
 export * from './steps/index.js';
+export * from './strands/index.js';
 export * from './switch/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';

package/dist/index.js

@@ -85,6 +85,7 @@ export * from './speed-dial/index.js';
 export * from './splitter/index.js';
 export * from './stat/index.js';
 export * from './steps/index.js';
+export * from './strands/index.js';
 export * from './switch/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';

package/dist/strands/index.d.ts

@@ -0,0 +1,2 @@
+export * from './root/strands-root.js';
+export * from './stop/strands-stop.js';

package/dist/strands/index.js

@@ -0,0 +1,2 @@
+export * from './root/strands-root.js';
+export * from './stop/strands-stop.js';

package/dist/strands/palette.d.ts

@@ -0,0 +1,42 @@
+import type { ColorBytes, TokenColor } from '@fusion.dev/helix-core';
+/** The colors the ribbon is drawn and composited in, as channels in `0..1`. */
+export interface StrandsPalette {
+    /** Most strands. */
+    glow: TokenColor;
+    /** The page the light is added to. */
+    ground: TokenColor;
+    /** Whether the ground is light, which turns added light into ink. */
+    light: boolean;
+    /** The hottest strands, and on a light page the ink everything darkens toward. */
+    peak: TokenColor;
+    /** A minority of strands, for depth. */
+    tint: TokenColor;
+}
+/** The computed colors the canvas carries, one per stop and two for the peak. */
+export type StrandsPaletteStyle = Pick<CSSStyleDeclaration, 'caretColor' | 'color' | 'columnRuleColor' | 'outlineColor' | 'textDecorationColor'>;
+/** The default theme's dark page, ink on black, which is drawn until a read. */
+export declare const RESTING_PALETTE: StrandsPalette;
+/**
+ * The palette, from the colors the canvas's stylesheet resolved for it.
+ *
+ * **Carried on color properties of the canvas, which a canvas never paints**,
+ * the way `Aura` carries its ramp: a custom property is handed back as the
+ * text that was written, and a color property is resolved by the engine first.
+ * Read there, each color takes the `--strands-*` hook a page wrote anywhere
+ * above the element, and the token otherwise:
+ *
+ * - `color`: `--strands-glow`, or `primary`.
+ * - `text-decoration-color`: `--strands-tint`, or `info`.
+ * - `outline-color`: `--strands-ground`, or the background.
+ * - `caret-color` and `column-rule-color`: `--strands-peak`, or the dark and
+ *   the light page's own peak.
+ *
+ * **The ground says which way the page runs**, read from its luminance rather
+ * than asked of the color mode, which is a private token this tier may not
+ * reach for. A dark page adds light toward a bright peak; a light page darkens
+ * toward a deep one, because light added to near-white is invisible.
+ *
+ * @param style The canvas's computed style.
+ * @param read Turns a resolved color into bytes, `undefined` where it cannot.
+ */
+export declare const paletteOf: (style: StrandsPaletteStyle, read: (value: string) => ColorBytes | undefined) => StrandsPalette;

package/dist/strands/palette.js

@@ -0,0 +1,24 @@
+export const RESTING_PALETTE = {
+    glow: [0.88, 0.88, 0.88],
+    ground: [0, 0, 0],
+    light: false,
+    peak: [1, 1, 1],
+    tint: [0.6, 0.6, 0.6],
+};
+export const paletteOf = (style, read) => {
+    const channels = (value, fallback) => {
+        const bytes = read(value);
+        return bytes ? [bytes[0] / 255, bytes[1] / 255, bytes[2] / 255] : [...fallback];
+    };
+    const ground = channels(style.outlineColor, RESTING_PALETTE.ground);
+    const light = ground[0] * 0.2126 + ground[1] * 0.7152 + ground[2] * 0.0722 > 0.5;
+    return {
+        glow: channels(style.color, RESTING_PALETTE.glow),
+        ground,
+        light,
+        peak: light
+            ? channels(style.columnRuleColor, [0.02, 0.02, 0.02])
+            : channels(style.caretColor, RESTING_PALETTE.peak),
+        tint: channels(style.textDecorationColor, RESTING_PALETTE.tint),
+    };
+};

package/dist/strands/path.d.ts

@@ -0,0 +1,89 @@
+/**
+ * The shape of the ribbon, as points the shader joins with a Catmull-Rom
+ * spline.
+ *
+ * Pure, so `path.pure.spec.ts` can hold the geometry without a GPU: what a
+ * shape is, where a stop puts it, and which stretch of a page-long path is on
+ * screen are all arithmetic.
+ */
+/** The three forms the ribbon takes. */
+export type StrandsVariant = 'fan' | 'ribbon' | 'waves';
+/**
+ * One point on the centerline: `x` as a share of the width, `y` in CSS pixels,
+ * the ribbon's width as a share of the width, and its brightness from `0` to
+ * `1`.
+ *
+ * **`x` as a share and `y` in pixels**, because the two ends of a page answer
+ * differently to a resize: a reader widening the window wants the ribbon to
+ * keep its place across the page, and a section's position down the page is
+ * pixels the layout already decided.
+ */
+export type PathPoint = readonly [x: number, y: number, width: number, brightness: number];
+/** A stop, resolved: the form it asks for, and the element it is pinned to. */
+export interface PlacedStop {
+    /** Where the shape sits across the page, as a share of the width. */
+    at: number | undefined;
+    /** The target's height, in CSS pixels. */
+    height: number;
+    /** The target's top, in page pixels. */
+    top: number;
+    variant: StrandsVariant;
+}
+/**
+ * The most points a path may carry, which is the length of the shader's
+ * uniform array.
+ *
+ * WebGL2 guarantees 256 vertex uniform vectors, and this takes 96 of them. A
+ * page-long ribbon spends one point per half screen, so 96 covers a page more
+ * than forty screens long; a longer one keeps its first 96 points and fades.
+ */
+export declare const MAX_POINTS = 96;
+/**
+ * The ribbon drawn inside its own box, which is what an element without
+ * `travel` shows.
+ *
+ * @param variant The form to draw.
+ * @param at Where it sits across the box, as a share of the width. A wave
+ *   crosses the whole width and does not read it.
+ * @param height The box's height, in CSS pixels. Its width needs no
+ *   argument: `x` is a share of it.
+ */
+export declare const boxPath: (variant: StrandsVariant, at: number | undefined, height: number) => PathPoint[];
+/**
+ * The ribbon laid down a whole page, which is what an element with `travel`
+ * shows.
+ *
+ * Each stop places its form at its target, in page order. Between two stops
+ * the ribbon fills the gap with soft S-curves in `fill`'s place, except
+ * between two waves, where it turns off screen so each wave reads alone.
+ * Without stops, `fill` runs the length of the page: a fan opens the page and
+ * a ribbon follows it, waves cross every screen and a third, and a ribbon
+ * meanders the whole way. After a last wave the ribbon does not come back, so
+ * the page ends on the wave.
+ *
+ * @param stops The resolved stops, in any order.
+ * @param fill The root's own form, for the stretches no stop claims.
+ * @param width The viewport's width, in CSS pixels.
+ * @param height The viewport's height, in CSS pixels.
+ * @param page The page's height, in CSS pixels.
+ */
+export declare const pagePath: (stops: readonly PlacedStop[], fill: StrandsVariant, width: number, height: number, page: number) => PathPoint[];
+/** One coordinate of a uniform Catmull-Rom segment, the same one the shader runs. */
+export declare const catmull: (p0: number, p1: number, p2: number, p3: number, f: number) => number;
+/**
+ * The centerline's `y` at even steps of its parameter, for finding which
+ * stretch is on screen.
+ *
+ * Twenty-four samples a segment, which is finer than any segment is tall on a
+ * screen, and computed once a layout rather than once a frame.
+ */
+export declare const lookup: (points: readonly PathPoint[]) => Float32Array;
+/**
+ * The stretch of the path that lies between `top` and `bottom`, as a range of
+ * its parameter.
+ *
+ * Drawing only that stretch is what keeps a page-long ribbon as fine as a
+ * screen-sized one: the same number of segments, spent where a reader looks.
+ * A path that does not reach the window answers an empty range.
+ */
+export declare const visibleRange: (table: Float32Array, top: number, bottom: number) => readonly [number, number];

package/dist/strands/path.js

@@ -0,0 +1,153 @@
+export const MAX_POINTS = 96;
+const NARROW = 760;
+const GLOW = { fan: 1, ribbon: 0.36, waves: 0.7 };
+const WIDTH = { fan: 0.07, ribbon: 0.24, waves: 0.06 };
+const FAN_AT = 0.4;
+const fan = (top, height, at, narrow) => {
+    const x = narrow ? Math.max(at, 0.8) : at;
+    const y = top + height * 0.58;
+    const arm = narrow ? 0.12 : 0.15;
+    return [
+        [x + 0.38, y - height * 0.73, WIDTH.fan, 0.2],
+        [x + arm, y - height * 0.3, WIDTH.fan * 0.5, 0.9],
+        [x, y, 0.005, GLOW.fan],
+        [x + arm, y + height * 0.3, WIDTH.fan * 0.5, 0.9],
+        [x + 0.45, y + height * 0.54, WIDTH.fan * 1.15, 0.7],
+    ];
+};
+const wave = (y, height, fromRight, narrow) => {
+    const w = narrow ? WIDTH.waves * 2 : WIDTH.waves;
+    const glow = narrow ? GLOW.waves * 0.65 : GLOW.waves;
+    const side = (share) => (fromRight ? 1 - share : share);
+    return [
+        [side(-0.15), y - height * 0.35, w, 0],
+        [side(-0.05), y, w, glow * 0.6],
+        [side(0.3), y + 18, w, glow],
+        [side(0.7), y - 18, w, glow],
+        [side(1.05), y, w, glow * 0.6],
+        [side(1.15), y + height * 0.35, w, 0],
+    ];
+};
+const ribbon = (from, to, height, at, phase, narrow) => {
+    const points = [];
+    const step = height * 0.55;
+    const swing = narrow ? 0.26 : 0.3;
+    const wide = narrow ? 0.45 : WIDTH.ribbon;
+    const glow = narrow ? GLOW.ribbon * 0.65 : GLOW.ribbon;
+    let a = phase;
+    for (let y = from; y < to; y += step) {
+        a += (step / (1.7 * height)) * Math.PI;
+        points.push([at + swing * Math.sin(a), y, wide * (0.8 + 0.3 * Math.sin(a * 0.63 + 0.4)), glow]);
+    }
+    return { phase: a, points };
+};
+export const boxPath = (variant, at, height) => {
+    const narrow = false;
+    if (variant === 'fan') {
+        return fan(0, height, at ?? FAN_AT, narrow);
+    }
+    if (variant === 'waves') {
+        return wave(height * 0.5, height, false, narrow);
+    }
+    const start = -height * 0.4;
+    const lead = [at ?? 0.5, start - height * 0.4, WIDTH.ribbon, 0];
+    const body = ribbon(start, height * 1.4, height, at ?? 0.5, 0, narrow).points.map(([x, y, w]) => [x, y, w, narrow ? GLOW.ribbon * 0.65 * 1.4 : GLOW.ribbon * 1.4]);
+    return [lead, ...body];
+};
+export const pagePath = (stops, fill, width, height, page) => {
+    const narrow = width < NARROW;
+    const placed = [...stops].sort((one, two) => one.top - two.top);
+    if (placed.length === 0) {
+        if (fill === 'waves') {
+            for (let y = height * 0.6; y < page; y += height * 1.3) {
+                placed.push({ at: undefined, height, top: y, variant: 'waves' });
+            }
+        }
+        else if (fill === 'fan') {
+            placed.push({ at: undefined, height, top: 0, variant: 'fan' });
+        }
+    }
+    const points = [[0.6, -height * 0.9, WIDTH.ribbon, 0]];
+    let phase = 1.2;
+    let cursor = 0;
+    let fromRight = true;
+    let previous;
+    const gap = (to, next) => {
+        if (to - cursor < height * 0.7) {
+            return;
+        }
+        if (previous === 'waves' && next === 'waves') {
+            return;
+        }
+        const stretch = ribbon(cursor + height * 0.2, to - height * 0.45, height, 0.5, phase, narrow);
+        phase = stretch.phase;
+        points.push(...stretch.points);
+        const last = stretch.points.at(-1);
+        if (last) {
+            fromRight = last[0] > 0.5;
+        }
+    };
+    for (const stop of placed) {
+        gap(stop.top, stop.variant);
+        if (stop.variant === 'fan') {
+            const span = Math.min(stop.height, height);
+            points.push(...fan(stop.top, span, stop.at ?? FAN_AT, narrow));
+            cursor = stop.top + span * 1.12;
+            fromRight = true;
+        }
+        else if (stop.variant === 'waves') {
+            points.push(...wave(stop.top, height, fromRight, narrow));
+            fromRight = !fromRight;
+            cursor = stop.top + height * 0.35;
+        }
+        else {
+            const y = stop.top + Math.min(stop.height, height) / 2;
+            points.push([stop.at ?? 0.5, y, WIDTH.ribbon, GLOW.ribbon]);
+            cursor = y;
+        }
+        previous = stop.variant;
+    }
+    if (previous !== 'waves') {
+        gap(page + height * 0.4, undefined);
+    }
+    const last = points.at(-1) ?? [0.5, page, WIDTH.ribbon, 0];
+    points.push([last[0], Math.max(last[1], page) + height, last[2], 0]);
+    return points.slice(0, MAX_POINTS);
+};
+export const catmull = (p0, p1, p2, p3, f) => {
+    const f2 = f * f;
+    const f3 = f2 * f;
+    return (0.5 *
+        (2 * p1 +
+            (-p0 + p2) * f +
+            (2 * p0 - 5 * p1 + 4 * p2 - p3) * f2 +
+            (-p0 + 3 * p1 - 3 * p2 + p3) * f3));
+};
+export const lookup = (points) => {
+    const n = points.length;
+    const samples = Math.max(1, (n - 1) * 24);
+    const out = new Float32Array(samples + 1);
+    const y = (i) => points[Math.max(0, Math.min(n - 1, i))]?.[1] ?? 0;
+    for (let j = 0; j <= samples; j++) {
+        const s = (j / samples) * (n - 1);
+        const i = Math.min(Math.floor(s), n - 2);
+        out[j] = n < 2 ? y(0) : catmull(y(i - 1), y(i), y(i + 1), y(i + 2), s - i);
+    }
+    return out;
+};
+export const visibleRange = (table, top, bottom) => {
+    const last = table.length - 1;
+    let low = Number.POSITIVE_INFINITY;
+    let high = Number.NEGATIVE_INFINITY;
+    for (let j = 0; j <= last; j++) {
+        const y = table[j] ?? 0;
+        if (y >= top && y <= bottom) {
+            low = Math.min(low, j);
+            high = Math.max(high, j);
+        }
+    }
+    if (high < low || last < 1) {
+        return [0, 0];
+    }
+    return [Math.max(0, (low - 1) / last), Math.min(1, (high + 1) / last)];
+};