@fusion.dev/helix 0.160.0 → 0.162.0

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

package/dist/strands/renderer.js

@@ -0,0 +1,255 @@
+import { BLUR_FRAGMENT, COMPOSITE_FRAGMENT, DOWN_FRAGMENT, DUST_FRAGMENT, DUST_VERTEX, LINE_FRAGMENT, LINE_VERTEX, QUAD_VERTEX, } from './shader.js';
+export const MAX_STRANDS = 340;
+export const MIN_STRANDS = 60;
+const SEGMENTS = 320;
+const DUST = 600;
+export class StrandsRenderer {
+    constructor(gl, programs) {
+        this.targets = null;
+        this.gl = gl;
+        [this.line, this.dust, this.down, this.blur, this.composite] = programs;
+        this.half = !!gl.getExtension('EXT_color_buffer_float');
+        this.scale = this.half ? 1 : 0.2;
+        const vertices = new Float32Array((SEGMENTS + 1) * 4);
+        for (let s = 0; s <= SEGMENTS; s++) {
+            vertices.set([s / SEGMENTS, -1, s / SEGMENTS, 1], s * 4);
+        }
+        const ids = new Float32Array(MAX_STRANDS);
+        for (let i = 0; i < MAX_STRANDS; i++) {
+            ids[i] = i;
+        }
+        const vertexBuffer = gl.createBuffer();
+        const idBuffer = gl.createBuffer();
+        this.buffers = [vertexBuffer, idBuffer];
+        this.ribbon = gl.createVertexArray();
+        gl.bindVertexArray(this.ribbon);
+        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, idBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, ids, gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(1);
+        gl.vertexAttribPointer(1, 1, gl.FLOAT, false, 0, 0);
+        gl.vertexAttribDivisor(1, 1);
+        this.empty = gl.createVertexArray();
+        gl.bindVertexArray(null);
+    }
+    static create(gl) {
+        const line = link(gl, LINE_VERTEX, LINE_FRAGMENT);
+        const dust = link(gl, DUST_VERTEX, DUST_FRAGMENT);
+        const down = link(gl, QUAD_VERTEX, DOWN_FRAGMENT);
+        const blur = link(gl, QUAD_VERTEX, BLUR_FRAGMENT);
+        const composite = link(gl, QUAD_VERTEX, COMPOSITE_FRAGMENT);
+        if (!line || !dust || !down || !blur || !composite) {
+            for (const one of [line, dust, down, blur, composite]) {
+                if (one) {
+                    gl.deleteProgram(one.program);
+                }
+            }
+            return null;
+        }
+        return new StrandsRenderer(gl, [line, dust, down, blur, composite]);
+    }
+    resize(width, height) {
+        this.release();
+        const scene = this.target(width, height);
+        const near = this.target(Math.ceil(width / 4), Math.ceil(height / 4));
+        const nearSwap = this.target(Math.ceil(width / 4), Math.ceil(height / 4));
+        const far = this.target(Math.ceil(width / 12), Math.ceil(height / 12));
+        const farSwap = this.target(Math.ceil(width / 12), Math.ceil(height / 12));
+        if (!scene || !near || !nearSwap || !far || !farSwap) {
+            return false;
+        }
+        this.targets = { far, farSwap, near, nearSwap, scene };
+        return true;
+    }
+    render(frame, palette) {
+        const { gl, targets } = this;
+        if (!targets) {
+            return;
+        }
+        const { scene } = targets;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, scene.buffer);
+        gl.viewport(0, 0, scene.width, scene.height);
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        if (frame.range[1] > frame.range[0] && frame.count >= 2) {
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.ONE, gl.ONE);
+            this.use(this.line, frame);
+            this.vec3(this.line, 'uGlow', palette.glow);
+            this.vec3(this.line, 'uTint', palette.tint);
+            this.vec3(this.line, 'uPeak', palette.peak);
+            this.float(this.line, 'uSoftness', frame.softness);
+            gl.bindVertexArray(this.ribbon);
+            gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, (SEGMENTS + 1) * 2, frame.strands);
+            this.use(this.dust, frame);
+            this.vec3(this.dust, 'uGlow', palette.glow);
+            this.vec3(this.dust, 'uPeak', palette.peak);
+            this.float(this.dust, 'uStrands', frame.strands);
+            gl.bindVertexArray(this.empty);
+            gl.drawArrays(gl.POINTS, 0, DUST);
+            gl.disable(gl.BLEND);
+        }
+        const { far, farSwap, near, nearSwap } = targets;
+        this.shrink(scene, near);
+        this.smear(near, nearSwap, 1);
+        this.smear(near, nearSwap, 2);
+        this.shrink(near, far);
+        this.smear(far, farSwap, 1);
+        this.smear(far, farSwap, 2);
+        gl.useProgram(this.composite.program);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        this.texture(this.composite, 'uScene', 0, scene);
+        this.texture(this.composite, 'uNear', 1, near);
+        this.texture(this.composite, 'uFar', 2, far);
+        this.vec3(this.composite, 'uGround', palette.ground);
+        this.vec3(this.composite, 'uInk', palette.peak);
+        this.float(this.composite, 'uLight', palette.light ? 1 : 0);
+        this.float(this.composite, 'uGain', (1.7 * frame.gain) / this.scale);
+        gl.bindVertexArray(this.empty);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+    dispose() {
+        const { gl } = this;
+        this.release();
+        for (const one of [this.line, this.dust, this.down, this.blur, this.composite]) {
+            gl.deleteProgram(one.program);
+        }
+        for (const buffer of this.buffers) {
+            gl.deleteBuffer(buffer);
+        }
+        gl.deleteVertexArray(this.ribbon);
+        gl.deleteVertexArray(this.empty);
+    }
+    release() {
+        if (!this.targets) {
+            return;
+        }
+        for (const one of Object.values(this.targets)) {
+            this.gl.deleteTexture(one.texture);
+            this.gl.deleteFramebuffer(one.buffer);
+        }
+        this.targets = null;
+    }
+    target(width, height) {
+        const { gl } = this;
+        const texture = gl.createTexture();
+        const buffer = gl.createFramebuffer();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        if (this.half) {
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, width, height, 0, gl.RGBA, gl.HALF_FLOAT, null);
+        }
+        else {
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        }
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, buffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+        const complete = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        if (!complete) {
+            gl.deleteTexture(texture);
+            gl.deleteFramebuffer(buffer);
+            return null;
+        }
+        return { buffer, height, texture, width };
+    }
+    use(program, frame) {
+        const { gl } = this;
+        gl.useProgram(program.program);
+        gl.uniform4fv(program.uniforms.get('uPts') ?? null, frame.points);
+        gl.uniform1i(program.uniforms.get('uCount') ?? null, frame.count);
+        gl.uniform2f(program.uniforms.get('uView') ?? null, frame.view[0], frame.view[1]);
+        gl.uniform1f(program.uniforms.get('uScroll') ?? null, frame.scroll);
+        gl.uniform2f(program.uniforms.get('uT') ?? null, frame.range[0], frame.range[1]);
+        gl.uniform1f(program.uniforms.get('uTime') ?? null, frame.time);
+        gl.uniform1f(program.uniforms.get('uSpread') ?? null, frame.spread);
+        gl.uniform1f(program.uniforms.get('uDpr') ?? null, frame.dpr);
+        gl.uniform1f(program.uniforms.get('uScale') ?? null, this.scale);
+    }
+    shrink(from, into) {
+        this.pass(this.down, into, () => {
+            this.texture(this.down, 'uSource', 0, from);
+            this.gl.uniform2f(this.down.uniforms.get('uTexel') ?? null, 1 / from.width, 1 / from.height);
+        });
+    }
+    smear(target, swap, radius) {
+        this.pass(this.blur, swap, () => {
+            this.texture(this.blur, 'uSource', 0, target);
+            this.gl.uniform2f(this.blur.uniforms.get('uStep') ?? null, radius / target.width, 0);
+        });
+        this.pass(this.blur, target, () => {
+            this.texture(this.blur, 'uSource', 0, swap);
+            this.gl.uniform2f(this.blur.uniforms.get('uStep') ?? null, 0, radius / swap.height);
+        });
+    }
+    pass(program, into, bind) {
+        const { gl } = this;
+        gl.useProgram(program.program);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, into.buffer);
+        gl.viewport(0, 0, into.width, into.height);
+        bind();
+        gl.bindVertexArray(this.empty);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+    texture(program, name, unit, from) {
+        const { gl } = this;
+        gl.activeTexture(gl.TEXTURE0 + unit);
+        gl.bindTexture(gl.TEXTURE_2D, from.texture);
+        gl.uniform1i(program.uniforms.get(name) ?? null, unit);
+    }
+    vec3(program, name, value) {
+        this.gl.uniform3f(program.uniforms.get(name) ?? null, value[0], value[1], value[2]);
+    }
+    float(program, name, value) {
+        this.gl.uniform1f(program.uniforms.get(name) ?? null, value);
+    }
+}
+function link(gl, vertex, fragment) {
+    const compile = (type, source) => {
+        const shader = gl.createShader(type);
+        if (!shader) {
+            return null;
+        }
+        gl.shaderSource(shader, source);
+        gl.compileShader(shader);
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            console.error(gl.getShaderInfoLog(shader));
+            gl.deleteShader(shader);
+            return null;
+        }
+        return shader;
+    };
+    const vs = compile(gl.VERTEX_SHADER, vertex);
+    const fs = compile(gl.FRAGMENT_SHADER, fragment);
+    const program = vs && fs ? gl.createProgram() : null;
+    if (!vs || !fs || !program) {
+        return null;
+    }
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error(gl.getProgramInfoLog(program));
+        gl.deleteProgram(program);
+        return null;
+    }
+    const uniforms = new Map();
+    const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+    for (let i = 0; i < count; i++) {
+        const info = gl.getActiveUniform(program, i);
+        const at = info ? gl.getUniformLocation(program, info.name) : null;
+        if (info && at) {
+            uniforms.set(info.name.replace('[0]', ''), at);
+        }
+    }
+    return { program, uniforms };
+}

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

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

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

@@ -0,0 +1,8 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {--_strands-glow: var(--strands-glow, var(--helix-color-primary));--_strands-ground: var(--strands-ground, var(--helix-color-background));--_strands-tint: var(--strands-tint, var(--helix-color-info));position: relative;display: block;inline-size: 100%;block-size: 100%;background-image: linear-gradient(
+115deg,
+var(--_strands-ground) 20%,
+color-mix(in oklab, var(--_strands-glow) 22%, var(--_strands-ground)) 48%,
+color-mix(in oklab, var(--_strands-tint) 12%, var(--_strands-ground)) 58%,
+var(--_strands-ground) 82%
+);pointer-events: none;}:host([travel]) {block-size: auto;inline-size: auto;inset: 0;position: fixed;z-index: var(--helix-layer-beneath);}[part="canvas"] {display: block;inline-size: 100%;block-size: 100%;caret-color: var(--strands-peak, var(--helix-color-primary-hover));color: var(--_strands-glow);column-rule-color: var(--strands-peak, var(--helix-color-primary-active));outline-color: var(--_strands-ground);text-decoration-color: var(--_strands-tint);transition-duration: var(--helix-duration-fast);transition-property: caret-color, color, column-rule-color, outline-color, text-decoration-color;}[part="content"] {inset: 0;pointer-events: none;position: absolute;}::slotted(*) {pointer-events: auto;}[part="canvas"][hidden] {display: none;}@media print {:host {display: none;}}`);

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

@@ -0,0 +1,230 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { type StrandsVariant } from '../path.js';
+/**
+ * @summary A ribbon of fine strands of light, drawn in your theme's colors, in its own box or down a whole page.
+ *
+ * @description
+ * Hundreds of thin strands are drawn as one ribbon, and the light they add
+ * together is bloomed, so where they converge the ribbon burns hot. The ribbon
+ * moves on its own all the time: it sways and breathes, its strands wave and
+ * roll over one another, and light runs along them.
+ *
+ * Its palette comes from the tokens. The strands are `--helix-color-primary`,
+ * a few are `--helix-color-info` for depth, and the page they light is
+ * `--helix-color-background`. On a light page the light becomes ink, because
+ * light added to near-white cannot be seen.
+ *
+ * **Three forms, set with `variant`.** `fan` is a tight, bright bend with its
+ * arms opening to the right. `ribbon`, the default, is a broad, soft ribbon in
+ * long curves. `waves` is sharp strands crossing the full width.
+ *
+ * **In its own box, by default.** The element fills the box it is given, the
+ * way an image does, and `at` places the fan's bend or the ribbon's axis across
+ * it. Content placed inside sits over the ribbon, in the `content` part.
+ *
+ * **Down the whole page, with `travel`.** The element fixes itself behind the
+ * page, on `--helix-layer-beneath`, and lays one ribbon from the top of the page to the
+ * bottom, so scrolling travels along it. Put `helix-strands-stop` elements
+ * inside to pin a form to a section: each names an element with `for` and says
+ * which form the ribbon takes there. Between stops the ribbon fills the gap in
+ * its own `variant`, and between two waves it turns off screen so each wave
+ * reads alone. Set `z-index` on the element to move it.
+ *
+ * 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.
+ * - The element is off screen or in a background tab.
+ *
+ * It shows a gradient from the same tokens in these cases, and matches
+ * `:state(fallback)` and sends `helix-strands-fallback` with the reason:
+ * - The renderer draws on the CPU, such as a headless browser or a machine with
+ *   no usable GPU.
+ * - There is no WebGL, or the browser took the drawing context back.
+ *
+ * Strands is styled only and has behavior, as `Aura` does: its behavior is
+ * drawing to a canvas, so there is no structure for a headless version to hold.
+ *
+ * @since 0.147.0
+ * @status experimental
+ * @category media
+ * @aliases Ribbon, Filaments, Light strands, Fibers
+ * @documentation https://fusion.dev/helix/components/strands
+ *
+ * @slot - Content drawn over the ribbon, such as a heading, and the `helix-strands-stop` elements that pin its forms in `travel`.
+ *
+ * @event {HelixStrandsFallbackEvent} helix-strands-fallback - Fired each time the element stops drawing its ribbon and shows its gradient, with the reason.
+ *
+ * @csspart canvas - The surface the ribbon draws into.
+ * @csspart content - The box over the ribbon that holds the content. It covers the element.
+ *
+ * @cssproperty --strands-glow - The color of most strands. Defaults to `--helix-color-primary`.
+ * @cssproperty --strands-ground - The page the light is added to. Defaults to `--helix-color-background`.
+ * @cssproperty --strands-peak - The hottest strands, and on a light page the ink the light darkens toward. Defaults to `--helix-color-primary-hover` on a dark page and `--helix-color-primary-active` on a light one.
+ * @cssproperty --strands-tint - The color of a few strands, for depth. Defaults to `--helix-color-info`.
+ *
+ * @cssstate fallback - The element shows its gradient: the renderer draws on the CPU, there is no WebGL, or the browser took the context back. Cleared once the ribbon draws again.
+ */
+export declare class HelixStrands extends HelixElement {
+    static styles: CSSResultGroup;
+    /**
+     * Where the form sits across the box, as a share of the width: the fan's
+     * bend or the ribbon's axis. `0` is the left edge and `1` the right. A wave
+     * crosses the whole width and does not read it. Unset, a fan bends at `0.4`
+     * and a ribbon runs down the middle.
+     *
+     * **A share rather than a length**, so the ribbon keeps its place when the
+     * box changes shape. Read inside a box only; in `travel` each stop has its
+     * own.
+     */
+    at?: number;
+    /**
+     * How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
+     * forty. Clamped to that range.
+     */
+    density: number;
+    /** Overall brightness, as a multiplier on the light. */
+    gain: number;
+    /**
+     * The share of strands drawn out of focus where the ribbon is wide, from `0`,
+     * every strand sharp, to `1`, every one soft. Clamped to that range. A tight
+     * form, such as a fan's bend or a wave, stays sharp whatever this says.
+     */
+    softness: number;
+    /** How fast the ribbon moves, as a multiplier on time. `0` holds it still. */
+    speed: number;
+    /** How wide the ribbon is, as a multiplier on each form's own width. */
+    spread: number;
+    /**
+     * Whether the ribbon is laid down the whole page, so scrolling travels along
+     * it.
+     *
+     * Reflected because the stylesheet selects on it: in `travel` the host fixes
+     * itself to the viewport, behind the page.
+     */
+    travel: boolean;
+    /**
+     * The form the ribbon takes. When it is not set, the form is `ribbon`. In
+     * `travel`, the form of every stretch no stop claims.
+     */
+    variant?: StrandsVariant;
+    /** The colors, resolved from what the canvas carries. Aura's approach, in `readPalette`. */
+    private palette;
+    /** The canvas's live computed style, and the five colors it last carried. */
+    private carried;
+    /** Why the gradient shows, while it does, or `undefined` while the ribbon draws. */
+    private fallback;
+    /** Why the last `build` drew nothing, for the fallback it leads to. */
+    private refused;
+    private canvas;
+    private gl;
+    private renderer;
+    /** The pending context release, or `0`. Canceled by a reconnection. */
+    private release;
+    /** What every context is asked for, the same as Aura's and the probe's. */
+    private static readonly CONTEXT;
+    /** Seconds of motion so far, accumulated so a paused tab resumes where it was. */
+    private elapsed;
+    /** The drawing buffer, in device pixels, and the ratio it was sized at. */
+    private width;
+    private height;
+    private dpr;
+    /** The element's box, in CSS pixels, from the last measurement. */
+    private box;
+    /** The path, padded to the shader's array, and how many points are in use. */
+    private readonly points;
+    private count;
+    /** 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. */
+    private offset;
+    /** Whether the opening frame has been drawn. Aura's settle: see `open`. */
+    private opened;
+    private opening;
+    private openBy;
+    /** A layout booked for the next frame, so a burst of changes lays out once. */
+    private laying;
+    /** In `travel`, what tells the element that the page or its stops moved. */
+    private pageObserver;
+    private stopObserver;
+    private readonly gate;
+    protected render(): TemplateResult;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Everything the canvas needs, from either lifecycle. Aura's `start`, line for line in intent. */
+    private start;
+    /**
+     * The context and the pipeline, from whatever canvas can still give one. A
+     * spent canvas is replaced rather than re-asked, for the reason Aura's
+     * `build` records.
+     */
+    private build;
+    /** The pipeline on the context already held, which a restored context comes back to alone. */
+    private prepare;
+    /** Gives the context back, once nothing has claimed the element again. Aura's `drop`. */
+    private readonly drop;
+    /** Stops for a context the browser took, hides the canvas, and asks for it back. */
+    private readonly handleLost;
+    /** Draws again on the context the browser gave back. */
+    private readonly handleRestored;
+    /** Shows the gradient, and says so once each time it starts to. */
+    private fallBack;
+    /** The colors, converted only when the text the canvas carries moved. */
+    private readPalette;
+    /** One frame for a stopped loop, once a color the canvas carries has moved. */
+    private readonly handleRestyle;
+    /**
+     * Re-reads the box and resizes the drawing buffer to match. Called from the
+     * gate's observer, never per frame, and an empty box is layout that has not
+     * happened: Aura's `measure` records both.
+     *
+     * **A ratio under Aura's**, 0.75 of the device's up to two, because a strand
+     * is a line rather than a field and the bloom hides the rest; the buffer's
+     * edge and pixel ceilings then apply as they do there.
+     */
+    private measure;
+    /**
+     * Lays the path out again: inside the box, or down the page from the stops.
+     *
+     * Cheap, a few dozen points and a table of a few hundred numbers, so it runs
+     * on any change that could move the path rather than working out which did.
+     */
+    private layout;
+    /** The stops inside, each with its target's place on the page. A stop naming nothing is skipped. */
+    private placedStops;
+    /**
+     * In `travel`, follows the page: the scroll it travels along, the page's
+     * height and its sections moving, and the stops being changed.
+     */
+    private watchPage;
+    /** 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.
+     */
+    private readonly handleScroll;
+    private paint;
+    /** The box changed: measure, and repaint at once, because resizing cleared the buffer. */
+    private resized;
+    /** The opening frame, one animation frame after the box last changed. Aura's `open`. */
+    private open;
+    /** One frame, now, for a change that has to show while the loop is stopped. */
+    private paintOnce;
+    /**
+     * The shortest gap between two frames, in seconds, while nothing is being
+     * followed. Aura's cap, for Aura's reason: a drifting ribbon does not need
+     * the display's rate.
+     */
+    private static readonly CAPPED;
+    /** What the skipped frames were worth, spent on the next one drawn. */
+    private held;
+    private advance;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-strands': HelixStrands;
+    }
+}