@satinhq/kit 0.0.0-stage → 0.1.0-beta.0

package/dist/glass/webgpu/accessoryMorph.js

@@ -0,0 +1,473 @@
+import { tabBottomChrome } from '../../tabs/compactBar.js';
+import { animateLayout, timelineStart } from '../../motion/animate.js';
+import { frameUnion } from '../regions.js';
+import { ACCESSORY_PROFILES, accessoryRunDuration, RESTING_ACCESSORY_VELOCITY, sampleAccessory, } from '../lens/tabAccessoryMotion.js';
+const readyInk = new WeakMap();
+/**
+ * Whether the renderer draws the accessory's ink and capsule while it moves (a retained track).
+ * The morph needs it: only then can the canvas hold still and the glass refract what is
+ * really behind it every frame (see `holds` in `move`). `data-satin-experimental-accessory-worker`
+ * still enables it alone.
+ */
+export function accessoryWorkerEnabled(element) {
+    const root = document.documentElement;
+    return ((root.hasAttribute('data-satin-experimental-accessory-worker') ||
+        root.hasAttribute('data-satin-experimental-accessory-morph')) &&
+        !!element.closest('[data-satin-tab-bottom-accessory]'));
+}
+export function accessoryInkReady(element, width) {
+    readyInk.set(element, width);
+}
+export function accessoryInkWidth(element) {
+    return readyInk.get(element);
+}
+const glassMotions = new WeakMap();
+export function accessoryGlassMotion(element) {
+    return glassMotions.get(element);
+}
+const reaches = new WeakMap();
+export function accessoryReach(element) {
+    const reach = reaches.get(element);
+    const chrome = element.closest('[data-satin-tab-bottom-chrome]')?.getBoundingClientRect();
+    if (!reach || !chrome)
+        return undefined;
+    // A new chrome width (rotation, a resized window) lays the rows out again.
+    if (Math.abs(chrome.width - reach.chrome) > 0.5) {
+        reaches.delete(element);
+        return undefined;
+    }
+    return {
+        x: chrome.left + reach.left,
+        y: chrome.bottom + reach.top,
+        width: reach.width,
+        height: reach.height,
+    };
+}
+function extendReach(element, frame) {
+    const chrome = element.closest('[data-satin-tab-bottom-chrome]')?.getBoundingClientRect();
+    if (!chrome)
+        return;
+    const known = accessoryReach(element);
+    const union = known ? frameUnion(known, frame) : frame;
+    // Whole points, so a slightly different spring path does not resize the canvas again.
+    const left = Math.floor(union.x - chrome.left), top = Math.floor(union.y - chrome.bottom);
+    reaches.set(element, {
+        left,
+        top,
+        width: Math.ceil(union.x + union.width - chrome.left) - left,
+        height: Math.ceil(union.y + union.height - chrome.bottom) - top,
+        chrome: chrome.width,
+    });
+}
+/** Keyframes per second of motion. WAAPI interpolates linearly between them. */
+const KEYFRAMES_PER_SECOND = 120;
+/**
+ * Opt-in (`<html data-satin-experimental-accessory-morph>`) until its main-thread cost is resolved:
+ * on iPad, during a scroll-driven collapse, the page's animation frames ran at a 44 ms median
+ * with the morph against 17 ms without it (expand: 18 vs 17 ms). Without the attribute the
+ * transaction only commits the layout, which is the previous behaviour.
+ */
+export function accessoryMorphEnabled() {
+    return document.documentElement.hasAttribute('data-satin-experimental-accessory-morph');
+}
+/**
+ * Moves the TabView bottom accessory between its expanded and inline rows as one element.
+ *
+ * The minimize transaction commits the accessory's target layout once (CSS keyed on the compact
+ * restore control). This owner reads the box the accessory presents just before that commit,
+ * then translates it through fixed rounded masks; child anchors come from the two endpoint layouts.
+ * Material geometry is frozen once in a fixed envelope; the compositor clips that envelope
+ * with the same sampled width trajectory, so glass capture/measurement is not part of each motion frame.
+ * The aperture retains its radius and live ink moves without scaling.
+ */
+export class AccessoryMorph {
+    run;
+    dock;
+    constructor(dock) {
+        this.dock = dock;
+    }
+    /** The dock's glass chrome is a separate layer; the accessory lives in the TabView's bottom
+     * inset under the same app root (the scope the compact-layout CSS also keys on). */
+    get chrome() {
+        return tabBottomChrome(this.dock);
+    }
+    get accessory() {
+        return this.chrome?.querySelector(':scope > [data-satin-tab-bottom-accessory]');
+    }
+    /** The accessory's presented edges relative to the bottom chrome, or undefined without one. */
+    presentedBox() {
+        const chrome = this.chrome?.getBoundingClientRect();
+        const accessory = this.accessory?.getBoundingClientRect();
+        if (!chrome || !accessory || accessory.width === 0)
+            return undefined;
+        return {
+            left: accessory.left - chrome.left,
+            right: chrome.right - accessory.right,
+            bottom: chrome.bottom - accessory.bottom,
+        };
+    }
+    /**
+     * Run `commit` (the one layout change between rows) and animate the accessory across it.
+     * `start` is the transaction's epoch on the performance clock.
+     */
+    move(direction, start, commit) {
+        const accessory = this.accessory;
+        const clip = accessory?.querySelector(':scope > [data-satin-accessory-clip]');
+        const content = clip?.querySelector(':scope > [data-satin-accessory-content]');
+        if (!accessory || !clip || !content || !accessoryMorphEnabled()) {
+            commit();
+            return;
+        }
+        const now = performance.now();
+        const running = this.run ? sampleAccessory(this.run.spec, now - this.run.start) : undefined;
+        this.end();
+        // Read the presented box with the previous run removed, so a reversal starts from the
+        // sampled presentation (value and velocity) rather than from an endpoint.
+        const from = running?.value ?? this.presentedBox();
+        const oldBounds = accessory.getBoundingClientRect();
+        const oldInk = new Map([
+            ...accessory.querySelectorAll('[data-satin-glass-region-id] > :not(canvas)'),
+        ].map(element => {
+            const rect = element.getBoundingClientRect();
+            return [element, { x: rect.x - oldBounds.x, width: rect.width }];
+        }));
+        // Where each glass canvas is on screen before the rows change (see `holdPlace`).
+        const canvasPlaces = new Map([
+            ...accessory.querySelectorAll('[data-satin-glass-region-id] > canvas'),
+        ].map(canvas => [canvas, canvas.getBoundingClientRect()]));
+        commit();
+        const to = this.presentedBox();
+        if (!from || !to || matchMedia('(prefers-reduced-motion: reduce)').matches)
+            return;
+        if (sameBox(from, to))
+            return;
+        const spec = {
+            from,
+            to,
+            velocity: running?.velocity ?? RESTING_ACCESSORY_VELOCITY,
+            profile: ACCESSORY_PROFILES[direction],
+        };
+        const duration = accessoryRunDuration(spec);
+        const count = Math.max(2, Math.ceil((duration / 1000) * KEYFRAMES_PER_SECOND));
+        const chromeWidth = this.chrome.getBoundingClientRect().width;
+        const widths = [];
+        const offsets = [];
+        const frames = Array.from({ length: count + 1 }, (_, index) => {
+            const box = index === count ? to : sampleAccessory(spec, (duration * index) / count).value;
+            const width = chromeWidth - box.left - box.right;
+            widths.push(width);
+            offsets.push({ x: box.left - to.left, y: to.bottom - box.bottom });
+            return {
+                offset: index / count,
+                transform: `translate3d(${box.left - to.left}px, ${to.bottom - box.bottom}px, 0)`,
+            };
+        });
+        // Retain each full-width material's sampling envelope. Aperture motion does not
+        // issue per-frame region measurements or foreground captures.
+        const glass = [
+            ...accessory.querySelectorAll('[data-satin-glass-region-id]'),
+        ].filter(element => Math.abs(element.getBoundingClientRect().width - widths.at(-1)) < 1);
+        const minX = Math.min(...offsets.map(offset => offset.x));
+        const maxX = Math.max(...offsets.map(offset => offset.x));
+        const minY = Math.min(...offsets.map(offset => offset.y));
+        const maxY = Math.max(...offsets.map(offset => offset.y));
+        for (const element of glass) {
+            const rect = element.getBoundingClientRect();
+            glassMotions.set(element, {
+                rect: { x: rect.x, y: rect.y, width: Math.max(...widths), height: rect.height },
+                sampleRect: {
+                    x: rect.x + minX,
+                    y: rect.y + minY,
+                    width: Math.max(...widths) + maxX - minX,
+                    height: rect.height + maxY - minY,
+                },
+                widths,
+                duration,
+                viewportTrack: { epoch: performance.timeOrigin + start, duration, widths, offsets },
+            });
+        }
+        const targetWidth = widths.at(-1);
+        const envelopeWidth = Math.max(...widths);
+        // The worker draws this run's glass and ink (a retained track) when the accessory is one
+        // material whose ink it holds at both widths. Then nothing above the glass canvas moves
+        // (see `holds` below).
+        const holds = glass.length === 1 &&
+            accessoryWorkerEnabled(glass[0]) &&
+            (readyInk.get(glass[0]) ?? 0) >= Math.max(widths[0], targetWidth) - 1 &&
+            onlyGlass(content, glass[0]);
+        const ink = glass.flatMap(element => [...element.children].filter((child) => child instanceof HTMLElement && child.tagName !== 'CANVAS'));
+        const targetInk = ink.map(element => ({
+            element,
+            rect: element.getBoundingClientRect(),
+            transform: getComputedStyle(element).transform,
+        }));
+        const targetBounds = accessory.getBoundingClientRect();
+        const previousWidth = accessory.style.width;
+        const previousRadius = accessory.style.borderRadius;
+        accessory.style.width = `${envelopeWidth}px`;
+        const radius = getComputedStyle(glass[0] ?? accessory).borderRadius || '0px';
+        accessory.style.borderRadius = radius;
+        const slices = [];
+        const children = targetInk.map(({ element, rect, transform }) => {
+            const full = element.getBoundingClientRect();
+            const denominator = envelopeWidth - targetWidth;
+            const previous = oldInk.get(element);
+            const oldDelta = targetWidth - oldBounds.width;
+            const anchor = Math.abs(denominator) > 0.01
+                ? (full.x - rect.x) / denominator
+                : previous && Math.abs(oldDelta) > 0.01
+                    ? (rect.x - targetBounds.x - previous.x) / oldDelta
+                    : 0;
+            const clips = Math.abs(denominator) > 0.01
+                ? Math.max(0, (full.width - rect.width) / denominator)
+                : previous && Math.abs(oldDelta) > 0.01
+                    ? Math.max(0, (rect.width - previous.width) / oldDelta)
+                    : 0;
+            slices.push({
+                x: full.x - accessory.getBoundingClientRect().x,
+                y: full.y - accessory.getBoundingClientRect().y,
+                width: full.width,
+                height: full.height,
+                anchor,
+                clip: clips,
+            });
+            const base = transform === 'none' ? '' : ` ${transform}`;
+            return element.animate(widths.map((width, index) => ({
+                offset: index / (widths.length - 1),
+                // Held, the accessory itself does not move: its controls carry the travel.
+                transform: holds
+                    ? `translate3d(${offsets[index].x + (width - envelopeWidth) * anchor}px, ${offsets[index].y}px, 0px)${base}`
+                    : `translate3d(${(width - envelopeWidth) * anchor}px, 0px, 0px)${base}`,
+                ...(clips > 0.5
+                    ? { clipPath: `inset(0px ${(envelopeWidth - width) * clips}px 0px 0px)` }
+                    : {}),
+            })), { duration, easing: 'linear', fill: 'both' });
+        });
+        for (const element of glass) {
+            const motion = glassMotions.get(element);
+            const inkWidth = readyInk.get(element) ?? 0;
+            if (holds) {
+                motion.track = {
+                    epoch: performance.timeOrigin + start,
+                    offsets,
+                    duration,
+                    widths,
+                    envelope: inkWidth,
+                    held: true,
+                    slices: slices.map(slice => ({
+                        ...slice,
+                        x: slice.x - (envelopeWidth - inkWidth) * slice.anchor,
+                        width: slice.width - (envelopeWidth - inkWidth) * slice.clip,
+                    })),
+                };
+                motion.takeInk = () => {
+                    if (element.dataset.satinAccessoryInk === 'true')
+                        return;
+                    // Keep compositor transforms: the invisible semantic controls still own hit testing.
+                    // Only text clipping transfers to the worker; cancelling the animation would move
+                    // the live controls back to their expanded positions during the morph.
+                    for (const animation of children.slice(0, targetInk.length)) {
+                        const effect = animation.effect;
+                        if (!(effect instanceof KeyframeEffect))
+                            continue;
+                        effect.setKeyframes(effect.getKeyframes().map(frame => {
+                            const transformed = { ...frame };
+                            delete transformed.clipPath;
+                            return transformed;
+                        }));
+                    }
+                    element.dataset.satinAccessoryInk = 'true';
+                };
+            }
+        }
+        // The two rounded masks keep their full layout width and their unscaled end caps.
+        // Their intersection is the sampled capsule; the carrier cancels the mask's travel
+        // so live labels keep their positions and sizes. A held run opens the masks instead.
+        for (const [element, sign] of holds
+            ? []
+            : [
+                [clip, 1],
+                [content, -1],
+            ]) {
+            children.push(element.animate(widths.map((width, index) => ({
+                offset: index / (widths.length - 1),
+                transform: `translate3d(${sign * (width - envelopeWidth)}px, 0px, 0px)`,
+            })), { duration, easing: 'linear', fill: 'both' }));
+        }
+        // When the worker draws this run's glass and ink, its canvas holds still on screen and the
+        // capsule moves inside it, on the same clock as the tab bar's glass. The refracted content
+        // then stays fixed to the page whenever the canvas frame and the compositor frame disagree.
+        // No element above the canvas moves: the accessory stays at its committed row (only its
+        // controls carry the travel) and the rounded masks open, so they cannot cut the capsule.
+        // A carrier cancelled by an opposite transform on the canvas was not enough: during a
+        // scroll the compositor showed one without the other for several frames, and the canvas
+        // stood up to 12 pt from where the renderer drew for it (the stripes swam, and the tab
+        // bar's hole showed beside the accessory).
+        const held = holds ? glass : [];
+        for (const element of held) {
+            extendReach(element, glassMotions.get(element).sampleRect);
+            extendReach(element, element.getBoundingClientRect());
+            const canvas = element.querySelector(':scope > canvas');
+            const place = canvas && canvasPlaces.get(canvas);
+            if (canvas && place)
+                holdPlace(canvas, place, element.getBoundingClientRect());
+        }
+        const previousOverflow = { accessory: accessory.style.overflow, clip: clip.style.overflow };
+        if (held.length > 0) {
+            accessory.style.overflow = 'visible';
+            clip.style.overflow = 'visible';
+        }
+        for (const animation of children)
+            animation.startTime = timelineStart(start);
+        accessory.dataset.satinAccessoryMotion = 'true';
+        window.dispatchEvent(new Event('satin-accessory-motion'));
+        const clearGlass = (immediate = false) => {
+            for (const element of glass) {
+                glassMotions.delete(element);
+                if (immediate && element.dataset.satinAccessoryInk) {
+                    delete element.dataset.satinAccessoryInk;
+                    continue;
+                }
+                if (element.dataset.satinAccessoryInk !== 'true')
+                    continue;
+                // The page's ink returns at once; the renderer stops drawing its copy a frame or two
+                // later, so the same ink overlaps briefly rather than the capsule showing none.
+                element.dataset.satinAccessoryInk = 'returning';
+                requestAnimationFrame(() => requestAnimationFrame(() => {
+                    if (element.dataset.satinAccessoryInk === 'returning')
+                        delete element.dataset.satinAccessoryInk;
+                }));
+            }
+            accessory.style.width = previousWidth;
+            accessory.style.borderRadius = previousRadius;
+            accessory.style.overflow = previousOverflow.accessory;
+            clip.style.overflow = previousOverflow.clip;
+            delete accessory.dataset.satinAccessoryMotion;
+            window.dispatchEvent(new Event('satin-accessory-motion'));
+        };
+        // The tab bar's motion can start after the commit (the collapse delay): hold the presented
+        // box until then rather than showing the committed row early.
+        const animation = animateLayout(accessory, holds ? frames.map(stillFrame) : frames, {
+            duration,
+            easing: 'linear',
+            fill: 'both',
+        });
+        animation.startTime = timelineStart(start);
+        const chromeBox = this.chrome.getBoundingClientRect();
+        this.run = {
+            start,
+            spec,
+            animation,
+            children,
+            clearGlass,
+            chrome: { left: chromeBox.left, right: chromeBox.right, bottom: chromeBox.bottom },
+            height: targetBounds.height,
+        };
+        const run = this.run;
+        // The compositor holds the final pose until layout and all child tracks can be released
+        // together. A busy document must not expose the wide temporary layout between the
+        // timeline ending and this callback. A carrier cancelled by anything but this owner
+        // (`move` and `end` clear `this.run` first) ends the run the same way: a run left behind
+        // kept the envelope width, the hidden ink and the glass motion until the next run.
+        const release = () => {
+            if (this.run === run)
+                this.end();
+        };
+        void animation.finished.then(release, release);
+    }
+    /** Ends the live run (if any) at its committed row. */
+    end(immediate = false) {
+        const run = this.run;
+        this.run = undefined;
+        if (!run)
+            return;
+        for (const animation of run.children)
+            animation.cancel();
+        run.clearGlass(immediate);
+        run.animation.cancel();
+    }
+    /**
+     * The page is being hidden: end a live run at its committed row now, so it never crosses a
+     * suspension. While hidden, the document's animation frames stop and the renderer drops its
+     * own tracks (it settles them at their ends); a run kept across that is drawn by no one
+     * consistently on return (the owner's resume recording: an empty capsule at the run's
+     * envelope width, without its ink). The ink comes back immediately: no frame runs to return it.
+     */
+    settle() {
+        this.end(true);
+    }
+    /**
+     * Where the moving accessory's capsule is at `at` (performance clock), in viewport points, or
+     * undefined when it is not moving. It is the same sampled run the accessory presents, so a
+     * surface drawn on the same clock can leave it uncovered (the tab bar's `occluder`).
+     */
+    capsuleAt(at) {
+        const run = this.run;
+        if (!run)
+            return undefined;
+        const box = sampleAccessory(run.spec, at - run.start).value;
+        const bottom = run.chrome.bottom - box.bottom;
+        return {
+            x: run.chrome.left + box.left,
+            y: bottom - run.height,
+            width: run.chrome.right - box.right - (run.chrome.left + box.left),
+            height: run.height,
+        };
+    }
+    /** Whether a run is live (resume readout). */
+    get running() {
+        return !!this.run;
+    }
+    dispose() {
+        this.end();
+    }
+}
+/** Debug readout (resume diagnostics): the accessory's run-owned state as the page holds it. */
+export function accessoryMorphReadout(accessory) {
+    const glass = accessory.querySelector('[data-satin-glass-region-id]');
+    const motion = glass ? glassMotions.get(glass) : undefined;
+    const reach = glass ? reaches.get(glass) : undefined;
+    return {
+        run: !!motion,
+        motion: accessory.dataset.satinAccessoryMotion === 'true',
+        ink: glass?.dataset.satinAccessoryInk ?? null,
+        width: accessory.style.width || null,
+        readyInk: glass ? (readyInk.get(glass) ?? null) : null,
+        reach: reach ? `${reach.left},${reach.top} ${reach.width}x${reach.height}` : null,
+        animations: accessory.getAnimations?.({ subtree: true }).length ?? 0,
+    };
+}
+/**
+ * Keeps a canvas where it was on screen when its holder moves to the other row. The glass
+ * bridge writes the same box when it next measures (the canvas covers `accessoryReach`), but
+ * not in this frame.
+ */
+function holdPlace(canvas, place, holder) {
+    Object.assign(canvas.style, {
+        left: `${place.x - holder.x}px`,
+        top: `${place.y - holder.y}px`,
+        width: `${place.width}px`,
+        height: `${place.height}px`,
+    });
+}
+/** A carrier keyframe that keeps the run's timing (and its layout-animation announcement) but
+ * leaves the accessory at its committed row. */
+function stillFrame(frame) {
+    return { offset: frame.offset, transform: 'none' };
+}
+/** Whether the accessory shows nothing but `glass` (its controls move inside it when held). */
+function onlyGlass(content, glass) {
+    for (const element of content.querySelectorAll('*')) {
+        if (element === glass || glass.contains(element) || element.contains(glass))
+            continue;
+        const rect = element.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0)
+            return false;
+    }
+    return true;
+}
+function sameBox(a, b) {
+    return (Math.abs(a.left - b.left) < 0.5 &&
+        Math.abs(a.right - b.right) < 0.5 &&
+        Math.abs(a.bottom - b.bottom) < 0.5);
+}

package/dist/glass/webgpu/accessoryTrack.d.ts

@@ -0,0 +1,47 @@
+import type { SurfaceRenderSpec } from '../renderSpecs.js';
+/** Immutable sampled motion shared with the compositor, on the normalized performance clock. */
+export type AccessoryTrack = {
+    epoch: number;
+    duration: number;
+    offsets?: readonly {
+        x: number;
+        y: number;
+    }[];
+    widths: readonly number[];
+    envelope: number;
+    slices: readonly {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        anchor: number;
+        clip: number;
+    }[];
+    /**
+     * The canvas holds still on screen for this run (see `accessoryMorph.ts`, `accessoryReach`).
+     * The worker then draws the moving capsule and its ink inside it at each sampled offset, so
+     * the backdrop is always sampled where the canvas really is. Without it the canvas rides the
+     * compositor carrier and only its sampling viewport follows, which lets the refracted content
+     * slide whenever the canvas frame and the compositor frame disagree about the time.
+     */
+    held?: boolean;
+};
+/**
+ * The accessory's glass and ink at `at`. `restingFrame` is the glass frame's position in its
+ * canvas at the run's target layout; a held-still canvas (`track.held`) moves the frame from
+ * there by the carrier's offset at the same instant.
+ */
+export declare function accessoryPose(spec: SurfaceRenderSpec, track: AccessoryTrack, at: number, atlas: {
+    width: number;
+    height: number;
+}, restingFrame?: {
+    x: number;
+    y: number;
+}): SurfaceRenderSpec;
+/** Sampling motion is available even when the document still owns the accessory ink. */
+export type AccessoryViewportTrack = Pick<AccessoryTrack, 'epoch' | 'duration' | 'widths' | 'offsets'>;
+/** Coordinates of the compositor carrier, sampled without a DOM read. */
+export declare function accessoryOffset(track: AccessoryViewportTrack, at: number): {
+    x: number;
+    y: number;
+};

package/dist/glass/webgpu/accessoryTrack.js

@@ -0,0 +1,59 @@
+/**
+ * The accessory's glass and ink at `at`. `restingFrame` is the glass frame's position in its
+ * canvas at the run's target layout; a held-still canvas (`track.held`) moves the frame from
+ * there by the carrier's offset at the same instant.
+ */
+export function accessoryPose(spec, track, at, atlas, restingFrame = { x: spec.frameX, y: spec.frameY }) {
+    const progress = Math.max(0, Math.min(1, (at - track.epoch) / track.duration));
+    const index = progress * (track.widths.length - 1);
+    const low = Math.floor(index), high = Math.min(track.widths.length - 1, low + 1);
+    const width = track.widths[low] + (track.widths[high] - track.widths[low]) * (index - low);
+    const delta = width - track.envelope;
+    const travel = track.held ? accessoryOffset(track, at) : undefined;
+    return {
+        ...spec,
+        ...(travel ? { frameX: restingFrame.x + travel.x, frameY: restingFrame.y + travel.y } : {}),
+        shape: {
+            ...spec.shape,
+            first: { ...spec.shape.first, centerX: width / 2, halfWidth: width / 2 },
+            members: [{ ...spec.shape.first, centerX: width / 2, halfWidth: width / 2 }],
+        },
+        ink: {
+            atlas,
+            layers: track.slices
+                .map(slice => {
+                const shown = Math.max(0, slice.width + delta * slice.clip);
+                return {
+                    source: {
+                        x: slice.x + spec.sampleInsetX,
+                        y: slice.y + spec.sampleInsetY,
+                        width: shown,
+                        height: slice.height,
+                    },
+                    frame: {
+                        x: slice.x + delta * slice.anchor,
+                        y: slice.y,
+                        width: shown,
+                        height: slice.height,
+                    },
+                    opacity: 1,
+                    blur: 0,
+                    lens: 0,
+                    lensWidth: 1,
+                };
+            })
+                .filter(layer => layer.source.width > 0),
+        },
+    };
+}
+/** Coordinates of the compositor carrier, sampled without a DOM read. */
+export function accessoryOffset(track, at) {
+    const position = Math.max(0, Math.min(1, (at - track.epoch) / track.duration)) * (track.widths.length - 1);
+    const index = Math.floor(position);
+    const from = track.offsets?.[index] ?? { x: 0, y: 0 };
+    const to = track.offsets?.[Math.min(index + 1, track.widths.length - 1)] ?? from;
+    return {
+        x: from.x + (to.x - from.x) * (position - index),
+        y: from.y + (to.y - from.y) * (position - index),
+    };
+}

package/dist/glass/webgpu/areaMips.d.ts

@@ -0,0 +1,50 @@
+import { type Target } from './passes.js';
+/** The bar material's blur pyramid: its wide diffusion reads coarse levels (level 5 to 6 at
+ * half resolution, texels of 21 to 43 pt), so the pyramid decides how bright the glass's interior
+ * reads over any detail in the backdrop.
+ *
+ * Two things keep that brightness a property of the backdrop alone, not of the shape's size.
+ *
+ * Every destination texel is the exact area average of the source texels it covers. With one
+ * bilinear tap at the destination centre, a chain that is not a power of two (the tab bar's is
+ * 789 x 477) gave whole bands of the backdrop no weight and others double weight: text scrolling
+ * under the bar lit its blur at some heights and vanished from it at others.
+ *
+ * The storage is a whole number of coarse texels (PYRAMID_GRID), so each level is exactly half
+ * the one below and a level-k texel always covers the same 2^k level-0 texels, counted from the
+ * sample rectangle's top-left corner. When the storage was the content rounded up, every level's
+ * texel size followed the surface's width: a growing Music accessory moved the coarse texels'
+ * edges across the tiles under it and its interior dimmed and brightened by several luma levels
+ * over a still backdrop, then stepped when the run ended at a narrower width. Storage past the
+ * content carries no weight: a coarse texel at the content's edge averages only the content it
+ * covers, and the shader's reads stop at the content (pyramidClamp). A wider surface changes
+ * only the texels at its edge; the ones away from it stay exactly as they were. */
+/** Level-0 texels per side of the coarsest exact texel (level 6, the wide diffusion's deepest). */
+export declare const PYRAMID_GRID = 64;
+/** Storage for `extent` level-0 texels of content: a whole number of PYRAMID_GRID cells. */
+export declare function pyramidStorage(extent: number): number;
+/** Level-0 texels the content copy writes for a content extent: those whose centre lies inside
+ * it (the copy's scissor in passes.ts). */
+export declare function pyramidContent(extent: number): number;
+/** The kernel's read clamp for a pyramid whose level 0 holds `content` texels: half a texel
+ * inside the content, so no sample reaches the cleared storage past it. Same layout as
+ * rasterUniforms.ts inputUniforms' uInputClamp. */
+export declare function pyramidClamp(target: Target, content: readonly [number, number]): number[];
+/** Texels of content at each level, fractional: a level keeps the content's share of its size. */
+export declare function contentLevels(target: Target, content: readonly [number, number]): [number, number][];
+/** One axis of a destination texel's footprint over the level below: the source texels it
+ * overlaps and how much of each, counting only the part inside the content. Mirrors
+ * `footprint` in the compute shader; texel t spans [t, t + 1]. */
+export declare function footprint(index: number, ratio: number, content: number): {
+    texel: number;
+    weight: number;
+}[];
+/** One view per mip level of a pyramid target (created once per texture). */
+export declare function areaMipLevels(target: Target): {
+    view: GPUTextureView;
+    width: number;
+    height: number;
+}[];
+/** Fill every level above 0 of `target` from the level below, in one compute pass. Level 0
+ * holds `content` texels of backdrop; `uniform` makes a uniform buffer (Passes.uniform). */
+export declare function encodeAreaMips(encoder: GPUCommandEncoder, device: GPUDevice, target: Target, content: readonly [number, number], uniform: (values: Float32Array<ArrayBuffer>) => GPUBuffer): void;