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

package/dist/glass/webgpu/keptGlyphs.js

@@ -0,0 +1,85 @@
+/** Chrome glyph ink the renderer keeps after its slot took other ink, so the same ink can be
+ * installed again by key, with no capture and no upload.
+ *
+ * The tab bar's ink follows the backdrop under the bar (tabGlyphContextStyle): entering a tab
+ * whose content differs under the bar changes it, and coming back changes it again. Each change
+ * was a capture of every tab's label and icon, a bitmap and an upload: 36 to 47 ms of capture and
+ * 15 to 85 ms of upload in the Catalyst host, on every such tab switch, and asynchronous, so the
+ * new backdrop could not be installed in the frame that shows the tab. A tab bar alternates
+ * between a handful of inks; the last four stay in the renderer (on a phone about 12 MB each: a
+ * 6 MB image and its 6 MB texture).
+ *
+ * This is the page's ledger of what the renderer keeps: the renderer keeps exactly the keys it
+ * was told to `keep` and not yet told to `unkeep` (worker protocol, `source-images`). */
+export class KeptGlyphs {
+    /** Kept ink by slot and signature, least recently used first. */
+    kept = new Map();
+    /** Keys the renderer still holds for ink this ledger has forgotten. */
+    dropped = [];
+    limit;
+    constructor(limit = 4) {
+        this.limit = limit;
+    }
+    static entry(id, signature) {
+        return `${id}\n${signature}`;
+    }
+    /** The key of the kept image of this ink, when the renderer has one. */
+    find(id, signature) {
+        return this.kept.get(KeptGlyphs.entry(id, signature));
+    }
+    /** A slot is taking other ink: its outgoing ink is kept (most recently used), and the least
+     * recently used ink beyond the limit is let go, never one that is `installed` now. Returns
+     * the keys the batch that replaces the slot tells the renderer to keep and to let go. */
+    replace(id, outgoing, installed) {
+        const keep = [];
+        if (outgoing) {
+            const entry = KeptGlyphs.entry(id, outgoing.signature);
+            this.kept.delete(entry);
+            this.kept.set(entry, outgoing.key);
+            keep.push(outgoing.key);
+        }
+        const unkeep = this.dropped.splice(0);
+        for (const [entry, key] of this.kept) {
+            if (this.kept.size <= this.limit)
+                break;
+            if (installed.includes(key) || keep.includes(key))
+                continue;
+            this.kept.delete(entry);
+            unkeep.push(key);
+        }
+        return { keep, unkeep };
+    }
+    /** Ink was installed again from its kept image: it is the most recently used. */
+    used(id, signature) {
+        const entry = KeptGlyphs.entry(id, signature);
+        const key = this.kept.get(entry);
+        if (key === undefined)
+            return;
+        this.kept.delete(entry);
+        this.kept.set(entry, key);
+    }
+    /** Forget every kept ink (fonts changed, or a failed batch left the renderer's slots unknown):
+     * nothing is reused, and the next batch lets the renderer's images go. */
+    reset() {
+        this.dropped.push(...this.kept.values());
+        this.kept.clear();
+    }
+}
+/** The ink a surface installs in one source revision.
+ *
+ * Ink that would have to be captured while a new backdrop is being installed does not hold that
+ * backdrop back: its capture is asynchronous (icon decodes, a bitmap), and waiting for it showed
+ * the new tab's content over the previous tab's backdrop for the capture's whole duration. Such
+ * a revision commits with the ink the surface has (`deferred`), and the next one captures the new
+ * ink, whatever else it installs (`deferredBefore`). Ink the renderer keeps is installed at once, and so is the first ink of a surface (there
+ * is nothing to commit with instead). Transformed tab DOM during minimize is never captured. */
+export function inkForRevision(input) {
+    const { signature, installed, kept, transformed, backdropChanges, deferredBefore } = input;
+    if (!installed || installed.signature === signature)
+        return { signature, deferred: false };
+    if (transformed)
+        return { signature: installed.signature, deferred: false };
+    if (backdropChanges && !kept && !deferredBefore)
+        return { signature: installed.signature, deferred: true };
+    return { signature, deferred: false };
+}

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

@@ -0,0 +1,12 @@
+import { type KeyboardTranslation } from '../../keyboard/translation.js';
+/** Logical content position when these pixels were captured. Native scroll is separate. */
+export type KeyboardBackdropAnchor = {
+    offsetY: number;
+};
+export type KeyboardBackdrop = {
+    offsetY: number;
+    motion?: KeyboardTranslation;
+    clipBottom?: number;
+};
+export declare function keyboardBackdropAnchor(host: HTMLElement): KeyboardBackdropAnchor;
+export declare function keyboardBackdrop(host: HTMLElement, anchor?: KeyboardBackdropAnchor): KeyboardBackdrop | undefined;

package/dist/glass/webgpu/keyboardBackdrop.js

@@ -0,0 +1,51 @@
+import { keyboardBackdropPose } from '../../safe-area/keyboardCarrierGeometry.js';
+import { sampleKeyboardTranslation } from '../../keyboard/translation.js';
+import { insertionMotion } from '../../scroll/insertionMotion.js';
+function contentPose(host) {
+    const keyboard = keyboardBackdropPose(host);
+    const insertion = insertionMotion(host);
+    if (!insertion)
+        return keyboard;
+    const at = performance.timeOrigin + performance.now();
+    const offsetY = (keyboard?.offsetY ?? 0) + sampleKeyboardTranslation(insertion, at);
+    const tracks = [keyboard?.motion, insertion].filter((track) => Boolean(track));
+    const epoch = Math.min(...tracks.map(track => track.epoch));
+    const end = Math.max(...tracks.map(track => track.epoch + track.duration));
+    const duration = end - epoch;
+    // The union of both piecewise-linear tracks is exact at every breakpoint. Glass
+    // samples the same combined motion while the keyboard and insertion overlap.
+    const times = [
+        ...new Set(tracks.flatMap(track => track.stops.map(([t]) => track.epoch + t * track.duration))),
+    ].sort((a, b) => a - b);
+    const constant = keyboard?.motion ? 0 : (keyboard?.offsetY ?? 0);
+    return {
+        offsetY,
+        motion: {
+            epoch,
+            duration,
+            end: Math.max(...tracks.map(track => track.end)),
+            offset: constant,
+            stops: times.map(time => [
+                (time - epoch) / duration,
+                tracks.reduce((sum, track) => sum + sampleKeyboardTranslation(track, time), 0),
+            ]),
+        },
+    };
+}
+export function keyboardBackdropAnchor(host) {
+    return { offsetY: contentPose(host)?.offsetY ?? 0 };
+}
+export function keyboardBackdrop(host, anchor) {
+    const pose = contentPose(host);
+    if (!pose && !anchor)
+        return;
+    const origin = anchor?.offsetY ?? 0;
+    return {
+        offsetY: (pose?.offsetY ?? 0) - origin,
+        motion: pose?.motion && { ...pose.motion, offset: pose.motion.offset - origin },
+        clipBottom: insertionMotion(host)
+            ? host.getBoundingClientRect().bottom -
+                (parseFloat(getComputedStyle(host).paddingBottom) || 0)
+            : undefined,
+    };
+}

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

@@ -0,0 +1,31 @@
+/** Opt-in lag trace: per-stage marks on the main thread and in the glass worker, for diagnosing
+ * where a tab entry, a scroll or a menu run spends its time.
+ *
+ * Off (the default) nothing is stored and every call site is one boolean test: callers guard the
+ * mark with `lagTraceEnabled()` so the mark object is never built. Each realm (page, worker) keeps
+ * its own marks; the page enables its renderer with a `lag-trace` request. A renderer that runs in
+ * the document shares the page's realm, so there is one list: the renderer's marks are the ones
+ * whose stage starts with `worker-`.
+ *
+ * Enable before the app boots: `globalThis.__SATIN_LAG_TRACE__ = true`. */
+export type LagMark = {
+    stage: string;
+    /** Page epoch milliseconds (performance.timeOrigin + performance.now()). */
+    at: number;
+    /** Duration of the stage, when it has one. */
+    ms?: number;
+    /** The main thread's scroll event this mark belongs to. */
+    sequence?: number;
+    values?: Record<string, number | string | boolean | null | undefined>;
+};
+/** Whether the page asked for a lag trace before boot. */
+export declare const lagTraceRequested: () => boolean;
+export declare const lagTraceEnabled: () => boolean;
+export declare function setLagTrace(value: boolean): void;
+/** Whether the trace still has room (a long session stops recording, it never grows without bound). */
+export declare const lagTraceHasRoom: () => boolean;
+/** Record a mark. Call only inside `if (lagTraceEnabled())`. Returns the mark, so a caller can
+ * complete it when an asynchronous stage (a GPU fence) resolves. */
+export declare function lagMark(mark: LagMark): LagMark;
+/** Every mark recorded in this realm so far (oldest first). */
+export declare const lagMarks: () => readonly LagMark[];

package/dist/glass/webgpu/lagTrace.js

@@ -0,0 +1,22 @@
+const MARK_LIMIT = 60000;
+const marks = [];
+let enabled = false;
+/** Whether the page asked for a lag trace before boot. */
+export const lagTraceRequested = () => globalThis.__SATIN_LAG_TRACE__ === true;
+export const lagTraceEnabled = () => enabled;
+export function setLagTrace(value) {
+    enabled = value;
+    if (!value)
+        marks.length = 0;
+}
+/** Whether the trace still has room (a long session stops recording, it never grows without bound). */
+export const lagTraceHasRoom = () => marks.length < MARK_LIMIT;
+/** Record a mark. Call only inside `if (lagTraceEnabled())`. Returns the mark, so a caller can
+ * complete it when an asynchronous stage (a GPU fence) resolves. */
+export function lagMark(mark) {
+    if (lagTraceHasRoom())
+        marks.push(mark);
+    return mark;
+}
+/** Every mark recorded in this realm so far (oldest first). */
+export const lagMarks = () => marks;

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

@@ -0,0 +1,100 @@
+import type { GlassCanvas } from '../rendererContract.js';
+import type { GlassLayer } from '../regions.js';
+import type { GlassPresenter } from '../rendererContract.js';
+export type { GlassLayer } from '../regions.js';
+/** Page-lifetime device owner. Canvas contexts are cheap presentation endpoints,
+ * never a reason to allocate another device. Resources can cross all layers. */
+export declare class LayerDevice {
+    private readonly onError;
+    private readonly onAdapterRecovery;
+    constructor(onError?: (stage: string, message: string, reason?: string) => void, onAdapterRecovery?: (pending: boolean) => void);
+    readonly faults: string[];
+    reportError(stage: string, error: unknown, reason?: string): void;
+    private rememberError;
+    private device?;
+    private starting?;
+    private layers;
+    private attaching;
+    private listeners;
+    private lossTimes;
+    private retryWake?;
+    private adapterVisible;
+    private stopped;
+    private adapterPending;
+    private recovering;
+    private recoveryBlocked;
+    private forcedNullAdapters;
+    private lastLoss?;
+    readonly stats: {
+        deviceRequests: number;
+        deviceLosses: number;
+        restores: number;
+        canvasContexts: number;
+        nullAdapters: number;
+        forcedNullAdapters: number;
+    };
+    readonly errors: string[];
+    readonly format: GPUTextureFormat;
+    get liveDevice(): GPUDevice | undefined;
+    subscribe(listener: (device: GPUDevice | undefined) => void): () => boolean;
+    ready(): Promise<GPUDevice>;
+    /** Availability follows the document, independently of a parked presentation. */
+    setAdapterVisible(visible: boolean): void;
+    stop(): void;
+    /** Foreground signals wake the single acquisition already in flight. */
+    retryAdapter(): Promise<GPUDevice> | undefined;
+    forceNullAdaptersForTest(attempts: number): void;
+    private requestAdapter;
+    private acquire;
+    private configure;
+    attach(model: GlassLayer, canvas: GlassCanvas, presenter?: GlassPresenter): Promise<GPUCanvasContext>;
+    detach(id: string): void;
+    loseForTest(): void;
+    report(): {
+        deviceRequests: number;
+        deviceLosses: number;
+        restores: number;
+        canvasContexts: number;
+        nullAdapters: number;
+        forcedNullAdapters: number;
+        adapterRecoveryPending: boolean;
+        adapterVisible: boolean;
+        lastLoss: {
+            reason: string;
+            message: string;
+        } | undefined;
+        activeCanvases: number;
+        presentationBackingBytes: number;
+        layers: Readonly<{
+            id: string;
+            depth: number;
+            attachment: Readonly<{
+                kind: 'fixed';
+            }> | Readonly<{
+                kind: 'scroll';
+                scrollId: string;
+            }>;
+        }>[];
+        presenters: (Readonly<{
+            id: string;
+            role?: 'material' | 'lift';
+            layerId: string;
+            regionIds: readonly string[];
+            origin: Readonly<{
+                x: number;
+                y: number;
+            }>;
+            fieldOrigin?: Readonly<{
+                x: number;
+                y: number;
+            }>;
+            width: number;
+            height: number;
+            resolution: number;
+        }> | {
+            id: string;
+            layerId: string;
+        })[];
+        errors: string[];
+    };
+}

package/dist/glass/webgpu/layers.js

@@ -0,0 +1,301 @@
+/// <reference types="@webgpu/types" />
+import { glassDeviceLimits } from './deviceLimits.js';
+import { glassNow, glassTiming, glassTimedAsync } from './profile.js';
+import { lagTraceEnabled } from './lagTrace.js';
+import { gpuScope, registerGPUReporter } from './errors.js';
+/** Page-lifetime device owner. Canvas contexts are cheap presentation endpoints,
+ * never a reason to allocate another device. Resources can cross all layers. */
+export class LayerDevice {
+    onError;
+    onAdapterRecovery;
+    constructor(onError = (stage, message) => console.error(`[Satin glass: ${stage}] ${message}`), onAdapterRecovery = () => { }) {
+        this.onError = onError;
+        this.onAdapterRecovery = onAdapterRecovery;
+    }
+    faults = [];
+    reportError(stage, error, reason) {
+        const message = error instanceof Error ? error.message : String(error);
+        this.rememberError(`${stage}: ${message}`);
+        this.onError(stage, message, reason);
+    }
+    rememberError(message) {
+        this.errors.push(message);
+        if (this.errors.length > 100)
+            this.errors.shift();
+    }
+    device;
+    starting;
+    layers = new Map();
+    attaching = new Set();
+    listeners = new Set();
+    lossTimes = [];
+    retryWake;
+    adapterVisible = true;
+    stopped = false;
+    adapterPending = false;
+    recovering = false;
+    recoveryBlocked = false;
+    forcedNullAdapters = 0;
+    lastLoss;
+    stats = {
+        deviceRequests: 0,
+        deviceLosses: 0,
+        restores: 0,
+        canvasContexts: 0,
+        nullAdapters: 0,
+        forcedNullAdapters: 0,
+    };
+    errors = [];
+    format = 'rgba8unorm';
+    get liveDevice() {
+        return this.device;
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    async ready() {
+        if (this.device)
+            return this.device;
+        if (this.recoveryBlocked)
+            throw Error('Glass device repeatedly lost during recovery');
+        if (this.starting)
+            return this.starting;
+        this.starting = this.acquire();
+        try {
+            return await this.starting;
+        }
+        catch (error) {
+            const failedDevice = this.liveDevice;
+            this.device = undefined;
+            if (this.recovering) {
+                for (const listener of this.listeners) {
+                    try {
+                        listener(undefined);
+                    }
+                    catch {
+                        /* Keep the original reconstruction failure. */
+                    }
+                }
+            }
+            failedDevice?.destroy();
+            if (!this.stopped)
+                this.reportError(this.recovering ? 'device recreation' : 'device acquisition', error);
+            throw error;
+        }
+        finally {
+            this.starting = undefined;
+        }
+    }
+    /** Availability follows the document, independently of a parked presentation. */
+    setAdapterVisible(visible) {
+        this.adapterVisible = visible;
+        this.retryWake?.();
+    }
+    stop() {
+        this.stopped = true;
+        this.retryWake?.();
+    }
+    /** Foreground signals wake the single acquisition already in flight. */
+    retryAdapter() {
+        if (this.device || this.recoveryBlocked)
+            return;
+        if (this.starting) {
+            this.retryWake?.();
+            return;
+        }
+        return this.ready();
+    }
+    forceNullAdaptersForTest(attempts) {
+        if (!Number.isInteger(attempts) || attempts < 0 || attempts > 100)
+            throw Error('Null-adapter attempts must be an integer between 0 and 100');
+        this.forcedNullAdapters = attempts;
+    }
+    async requestAdapter() {
+        // Startup retains its bounded capability probe. A lost device keeps retrying:
+        // presentation deadlines report a real outage without abandoning reconstruction.
+        const delays = [100, 250, 500, 1000];
+        for (let attempt = 0; this.recovering || attempt <= delays.length; attempt++) {
+            while (!this.adapterVisible && !this.stopped) {
+                await new Promise(resolve => {
+                    this.retryWake = resolve;
+                });
+                this.retryWake = undefined;
+            }
+            if (this.stopped)
+                throw Error('Glass renderer stopped during adapter acquisition');
+            const adapter = await glassTimedAsync('requestAdapter', () => {
+                if (this.forcedNullAdapters > 0) {
+                    this.forcedNullAdapters--;
+                    this.stats.forcedNullAdapters++;
+                    return Promise.resolve(null);
+                }
+                return navigator.gpu.requestAdapter({ powerPreference: 'high-performance' });
+            }).catch(error => {
+                throw Error(`requestAdapter rejected: ${String(error)}`);
+            });
+            if (adapter)
+                return adapter;
+            this.stats.nullAdapters++;
+            if (lagTraceEnabled())
+                glassTiming('adapter-null', glassNow(), String(attempt + 1));
+            // Transient failures stay in diagnostic history. Only an exhausted burst
+            // reaches the terminal error channel and its user-visible alert.
+            this.rememberError('device acquisition: navigator.gpu.requestAdapter returned null');
+            if (!this.recovering && attempt === delays.length)
+                break;
+            await new Promise(resolve => {
+                const finish = () => {
+                    clearTimeout(timer);
+                    this.retryWake = undefined;
+                    resolve();
+                };
+                const timer = setTimeout(finish, delays[Math.min(attempt, delays.length - 1)]);
+                this.retryWake = finish;
+            });
+        }
+        throw Error('navigator.gpu.requestAdapter returned null after five attempts');
+    }
+    async acquire() {
+        if (!navigator.gpu)
+            throw Error('navigator.gpu is unavailable in the glass renderer');
+        const adapter = await this.requestAdapter();
+        this.stats.deviceRequests++;
+        const device = await glassTimedAsync('requestDevice', () => adapter.requestDevice({
+            requiredFeatures: adapter.features?.has('timestamp-query') ? ['timestamp-query'] : [],
+            requiredLimits: glassDeviceLimits(adapter),
+        })).catch(error => {
+            throw Error(`requestDevice rejected: ${String(error)}`);
+        });
+        this.device = device;
+        this.faults.length = 0;
+        registerGPUReporter(device, (stage, error) => {
+            if (this.device !== device)
+                return;
+            this.faults.push(`${stage}: ${String(error)}`);
+            this.reportError(stage, error);
+        });
+        device.addEventListener('uncapturederror', event => {
+            if (this.device !== device)
+                return;
+            this.reportError('uncapturederror', `${event.error.constructor.name}: ${event.error.message}`);
+        });
+        for (const layer of this.layers.values())
+            this.configure(layer, device);
+        void device.lost.then(async (info) => {
+            if (this.device !== device)
+                return;
+            if (lagTraceEnabled())
+                glassTiming('device-lost', glassNow(), info.reason);
+            this.device = undefined;
+            this.stats.deviceLosses++;
+            this.lastLoss = { reason: info.reason, message: info.message };
+            const now = Date.now();
+            this.lossTimes = this.lossTimes.filter(at => now - at < 60_000);
+            this.lossTimes.push(now);
+            this.recovering = true;
+            this.adapterPending = true;
+            this.onAdapterRecovery(true);
+            let invalidationError;
+            for (const listener of this.listeners) {
+                try {
+                    listener(undefined);
+                }
+                catch (error) {
+                    invalidationError ??= error;
+                }
+            }
+            if (invalidationError) {
+                this.reportError('device recreation', invalidationError);
+                return;
+            }
+            // WebKit can report destroyed for an unexpected loss as well.
+            if (this.lossTimes.length > 3) {
+                this.recoveryBlocked = true;
+                this.reportError('device recreation', 'Glass device repeatedly lost during recovery');
+                return;
+            }
+            // Initial acquisition must settle before requesting its replacement.
+            await this.starting;
+            void this.ready().catch(() => {
+                /* ready records the terminal failure. */
+            });
+        });
+        if (this.recovering) {
+            // Every canvas is configured above; graph, raster and region subscribers
+            // reconstruct in registration order before presentation can resume.
+            for (const listener of this.listeners)
+                listener(device);
+            this.stats.restores++;
+            this.recovering = false;
+            if (lagTraceEnabled())
+                glassTiming('device-restored');
+        }
+        if (this.adapterPending) {
+            this.adapterPending = false;
+            this.onAdapterRecovery(false);
+        }
+        return device;
+    }
+    configure(layer, device) {
+        gpuScope(device, `configure canvas ${layer.model.id}`, () => layer.context.configure({
+            device,
+            format: this.format,
+            alphaMode: 'premultiplied',
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
+        }));
+    }
+    async attach(model, canvas, presenter) {
+        const id = presenter?.id ?? model.id;
+        if (presenter && presenter.layerId !== model.id)
+            throw Error('Presenter does not belong to its glass layer');
+        if (this.layers.has(id) || this.attaching.has(id))
+            throw Error(`Glass presenter ${id} already attached`);
+        if (!model.id ||
+            !Number.isFinite(model.depth) ||
+            (model.attachment.kind === 'scroll' && !model.attachment.scrollId))
+            throw Error('Invalid glass layer');
+        this.attaching.add(id);
+        try {
+            const device = await this.ready();
+            for (const existing of this.layers.values())
+                if (existing.model.id === model.id &&
+                    JSON.stringify(existing.model) !== JSON.stringify(model))
+                    throw Error('Conflicting glass layer definition');
+            const context = canvas.getContext('webgpu');
+            if (!context)
+                throw Error('Offscreen WebGPU context unavailable');
+            const layer = { model, presenter, canvas, context };
+            this.layers.set(id, layer);
+            this.stats.canvasContexts++;
+            this.configure(layer, device);
+            return context;
+        }
+        finally {
+            this.attaching.delete(id);
+        }
+    }
+    detach(id) {
+        const layer = this.layers.get(id);
+        if (!layer)
+            return;
+        layer.context.unconfigure();
+        this.layers.delete(id);
+    }
+    loseForTest() {
+        this.device?.destroy();
+    }
+    report() {
+        return {
+            ...this.stats,
+            adapterRecoveryPending: this.adapterPending,
+            adapterVisible: this.adapterVisible,
+            lastLoss: this.lastLoss,
+            activeCanvases: this.layers.size,
+            presentationBackingBytes: [...this.layers.values()].reduce((n, l) => n + l.canvas.width * l.canvas.height * 4, 0),
+            layers: [...new Map([...this.layers.values()].map(l => [l.model.id, l.model])).values()],
+            presenters: [...this.layers.entries()].map(([id, l]) => l.presenter ?? { id, layerId: l.model.id }),
+            errors: [...this.errors],
+        };
+    }
+}

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

@@ -0,0 +1,4 @@
+/** Explicit development views. Distances shown by the shader are framebuffer pixels. */
+export declare const LENS_DEBUG_VIEWS: readonly ['normal', 'displacement', 'rim-mask', 'signed-displacement', 'transmission', 'magnification', 'refraction', 'dispersion', 'highlight', 'shadow', 'foreground', 'edge-map', 'face', 'key', 'fill', 'diffuse', 'background-highlight', 'optics', 'foreground-edge'];
+export type LensDebugView = (typeof LENS_DEBUG_VIEWS)[number];
+export declare function lensDebugIndex(view: LensDebugView): number;

package/dist/glass/webgpu/lensDebug.js

@@ -0,0 +1,28 @@
+/** Explicit development views. Distances shown by the shader are framebuffer pixels. */
+export const LENS_DEBUG_VIEWS = [
+    'normal',
+    'displacement',
+    'rim-mask',
+    'signed-displacement',
+    'transmission',
+    'magnification',
+    'refraction',
+    'dispersion',
+    'highlight',
+    'shadow',
+    'foreground',
+    'edge-map',
+    'face',
+    'key',
+    'fill',
+    'diffuse',
+    'background-highlight',
+    'optics',
+    'foreground-edge',
+];
+export function lensDebugIndex(view) {
+    const index = LENS_DEBUG_VIEWS.indexOf(view);
+    if (index < 0)
+        throw Error('Unknown lens debug view: ' + view);
+    return index;
+}

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

@@ -0,0 +1,2 @@
+/** Separable input diffusion for retained pressed material, before displacement. */
+export declare const lensDiffusionFragment = "\nprecision highp float;\nin vec2 vTextureCoord;\nout vec4 finalColor;\nuniform sampler2D uTexture;\nuniform vec2 uStep;\nuniform float uSigma;\nvoid main(){\n  vec3 sum=vec3(0.0);float total=0.0;\n  float sigma=max(.01,uSigma);\n  float spacing=max(1.0,3.0*sigma/32.0);\n  for(int i=-32;i<=32;i++){\n    float offset=float(i)*spacing;\n    float weight=exp(-.5*pow(offset/sigma,2.0));\n    sum+=texture(uTexture,clamp(vTextureCoord+uStep*offset,vec2(0.0),vec2(1.0))).rgb*weight;\n    total+=weight;\n  }\n  finalColor=vec4(sum/total,1.0);\n}";

package/dist/glass/webgpu/lensDiffusion.js

@@ -0,0 +1,20 @@
+/** Separable input diffusion for retained pressed material, before displacement. */
+export const lensDiffusionFragment = /* glsl */ `
+precision highp float;
+in vec2 vTextureCoord;
+out vec4 finalColor;
+uniform sampler2D uTexture;
+uniform vec2 uStep;
+uniform float uSigma;
+void main(){
+  vec3 sum=vec3(0.0);float total=0.0;
+  float sigma=max(.01,uSigma);
+  float spacing=max(1.0,3.0*sigma/32.0);
+  for(int i=-32;i<=32;i++){
+    float offset=float(i)*spacing;
+    float weight=exp(-.5*pow(offset/sigma,2.0));
+    sum+=texture(uTexture,clamp(vTextureCoord+uStep*offset,vec2(0.0),vec2(1.0))).rgb*weight;
+    total+=weight;
+  }
+  finalColor=vec4(sum/total,1.0);
+}`;