@fusion.dev/helix 0.161.0 → 0.162.1

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/element-events.generated.js

@@ -248,6 +248,7 @@ 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'],

package/dist/filter-input/root/filter-input-root.css.js

@@ -3,6 +3,6 @@ export const styles = createSheet(`:host {--_filter-input-size: var(--filter-inp
 var(--filter-input-field-border-color, var(--helix-color-border));border-radius: var(--filter-input-radius, var(--helix-radii-sm));color: var(--helix-color-foreground-subtle);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);min-block-size: var(--_filter-input-size);padding-block: var(--helix-space-2xs);padding-inline: var(--filter-input-padding-inline, var(--helix-space-xs));transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
 background-color var(--helix-duration-fast) var(--helix-easing-standard);}::slotted([slot="tags"]) {flex: 0 0 auto;max-inline-size: 100%;}[part="control"] {flex: 1 1 var(--filter-input-control-size, 6ch);}[part="lead"] {align-items: center;align-self: stretch;border-inline-end: var(--helix-border-thin) solid
-var(--filter-input-lead-border-color, var(--helix-color-border));display: flex;margin-block: calc(var(--helix-space-2xs) * -1);margin-inline-start: calc(var(--helix-space-xs) * -1);padding-inline: var(--helix-space-2xs) var(--helix-space-xs);}[part="lead"][hidden] {display: none;}[part="lead"],
+var(--filter-input-lead-border-color, var(--helix-color-border));display: flex;margin-block: calc(var(--helix-space-2xs) * -1);margin-inline-start: calc(var(--helix-space-xs) * -1);padding-inline: var(--helix-space-2xs);}[part="lead"][hidden] {display: none;}[part="lead"],
 slot[name="end"] {--button-size: var(--filter-input-action-size, var(--helix-size-tag));--icon-button-size: var(--filter-input-action-size, var(--helix-size-tag));--button-padding-inline: var(--filter-input-action-padding-inline, var(--helix-space-xs));}slot[name="start"]::slotted(*),
 slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: 0 0 auto;}[part="clear"] {--icon-size: 0.85em;all: unset;align-items: center;align-self: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--filter-input-clear-color, var(--helix-color-foreground-subtle));cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="clear"]:hover {background-color: color-mix(in oklab, currentcolor 12%, transparent);color: var(--filter-input-clear-color-hover, var(--helix-color-foreground));}[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5;}@media print {:host {print-color-adjust: exact;}}[part="surface"] {--_floating-border-color: var(--filter-input-border-color, var(--helix-color-border));--_floating-border-width: var(--filter-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--filter-input-shadow, var(--helix-shadow-floating));box-sizing: border-box;inline-size: var(--filter-input-panel-size, var(--floating-anchor-inline-size, 100%));max-block-size: var(--floating-available-block-size, 20rem);min-inline-size: max-content;overflow-y: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute;}`);

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)];
+};

package/dist/strands/renderer.d.ts

@@ -0,0 +1,84 @@
+import type { StrandsPalette } from './palette.js';
+/** The most strands a ribbon draws, at `density` 1. */
+export declare const MAX_STRANDS = 340;
+/** The fewest, at `density` 0. Fewer stops reading as a ribbon at all. */
+export declare const MIN_STRANDS = 60;
+/** What one frame needs, all of it already resolved by the element. */
+export interface StrandsFrame {
+    /** How many of the path's points are in use. */
+    count: number;
+    /** The device pixels per CSS pixel the buffer was sized at. */
+    dpr: number;
+    /** Overall brightness. */
+    gain: number;
+    /** The path, four floats a point, padded to the uniform array's length. */
+    points: Float32Array;
+    /** The stretch of the path on screen, as a range of its parameter. */
+    range: readonly [number, number];
+    /** How far the page is scrolled, in CSS pixels, or `0` inside a box. */
+    scroll: number;
+    /** The share of strands drawn soft, and how soft. */
+    softness: number;
+    /** A multiplier on the ribbon's width. */
+    spread: number;
+    /** How many strands to draw. */
+    strands: number;
+    /** Seconds of motion so far. */
+    time: number;
+    /** The box drawn into, in CSS pixels. */
+    view: readonly [number, number];
+}
+/**
+ * The pipeline, on one context: strands and dust added into a float buffer,
+ * two levels of bloom, and the composite over the page color.
+ *
+ * **Created whole or not at all.** `create` answers `null` when any program
+ * fails to link, so the element has one question to ask and one fallback to
+ * take, and never draws half a pipeline.
+ *
+ * **Float buffers where the GPU offers them, and eight bits where it does not.**
+ * Light is added strand by strand, and a hot bend sums far past `1`; an eight
+ * bit buffer clips it, so there the energy is scaled down on the way in and
+ * back up in the composite, which keeps the bend hot at the cost of some
+ * gradation in the dimmest strands.
+ */
+export declare class StrandsRenderer {
+    private readonly gl;
+    private readonly line;
+    private readonly dust;
+    private readonly down;
+    private readonly blur;
+    private readonly composite;
+    private readonly ribbon;
+    private readonly empty;
+    private readonly buffers;
+    private readonly half;
+    private readonly scale;
+    private targets;
+    private constructor();
+    /**
+     * The pipeline on `gl`, or `null` when a program does not link, which the
+     * element answers with its gradient.
+     */
+    static create(gl: WebGL2RenderingContext): StrandsRenderer | null;
+    /**
+     * Sizes the buffers to the drawing buffer. The bloom runs at a quarter and a
+     * twelfth of it, which is where a glow's width lives and a twentieth of the
+     * fill.
+     */
+    resize(width: number, height: number): boolean;
+    render(frame: StrandsFrame, palette: StrandsPalette): void;
+    /** Deletes everything made on the context, ahead of losing it. */
+    dispose(): void;
+    private release;
+    private target;
+    /** The uniforms every strand and speck reads. */
+    private use;
+    private shrink;
+    /** A separable blur of `target`, through `swap` and back. */
+    private smear;
+    private pass;
+    private texture;
+    private vec3;
+    private float;
+}