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

package/dist/glass/webgpu/passes.js

@@ -0,0 +1,394 @@
+import { renderPipeline } from './errors.js';
+import { shaderModule } from './errors.js';
+/// <reference types="@webgpu/types" />
+import { shaders as generatedShaders } from './shaders.js';
+import { contextComposite } from './contextComposite.js';
+import { presentationDiffusion, sheetDiffusion } from './presentationDiffusion.js';
+const shaders = { ...generatedShaders, contextComposite, presentationDiffusion, sheetDiffusion };
+export function assertViewport(width, height, viewport) {
+    const [x, y, w, h] = viewport;
+    if (![x, y, w, h].every(Number.isFinite) ||
+        x < 0 ||
+        y < 0 ||
+        w < 0 ||
+        h < 0 ||
+        x + w > width ||
+        y + h > height)
+        throw Error(`WebGPU viewport validation failed: [${viewport.join(',')}] exceeds ${width}x${height} attachment`);
+}
+const vertex = `struct Vertex { @builtin(position) position: vec4f, @location(0) uv: vec2f, @location(1) filterCoord: vec2f }
+@vertex fn vertex(@builtin(vertex_index) i: u32) -> Vertex {
+ let p = array<vec2f,6>(vec2f(0,0),vec2f(1,0),vec2f(1,1),vec2f(0,0),vec2f(1,1),vec2f(0,1))[i];
+ return Vertex(vec4f(p.x*2-1,1-p.y*2,0,1),p,p);
+}`;
+const copyVertex = vertex.replace('array<vec2f,6>(vec2f(0,0),vec2f(1,0),vec2f(1,1),vec2f(0,0),vec2f(1,1),vec2f(0,1))', 'array<vec2f,3>(vec2f(0,0),vec2f(2,0),vec2f(0,2))');
+const copy = `${copyVertex}
+@group(0) @binding(0) var source: texture_2d<f32>;
+@group(0) @binding(1) var linearSampler: sampler;
+@fragment fn fragment(v: Vertex) -> @location(0) vec4f { return textureSampleLevel(source,linearSampler,v.uv,0); }`;
+/** Scissor [x,y,w,h] snapped outward to whole pixels and clamped inside the attachment.
+ * WebGPU rejects a scissor that extends past its attachment; in WebKit the rejected pass
+ * leaves its command encoder locked, so the whole frame fails at finish(). A surface
+ * wholly outside the attachment (moved off-screen, or a shrunken viewport) yields an
+ * empty rectangle at the attachment edge, never an invalid one. */
+export function clampScissor(rect, width, height) {
+    const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+    const x = clamp(Math.floor(rect[0]), 0, width), y = clamp(Math.floor(rect[1]), 0, height);
+    const right = clamp(Math.ceil(rect[0] + rect[2]), x, width), bottom = clamp(Math.ceil(rect[1] + rect[3]), y, height);
+    return [x, y, right - x, bottom - y];
+}
+/** Default whole-texture views, created once per texture instead of per pass per frame. */
+const views = new WeakMap();
+export function viewOf(texture) {
+    let view = views.get(texture);
+    if (!view) {
+        view = texture.createView();
+        views.set(texture, view);
+    }
+    return view;
+}
+/** Per-pass GPU timing for the frame probe: while `set` is armed, each pass writes its
+ * begin/end timestamps under a label (device must have `timestamp-query`). */
+export const passTimer = {
+    labels: [],
+    capacity: 0,
+};
+/** Every pass is ended even when encoding throws: an open pass locks its encoder. */
+export function encodePass(encoder, descriptor, body, label = 'pass') {
+    if (passTimer.set &&
+        !descriptor.timestampWrites &&
+        passTimer.labels.length < passTimer.capacity) {
+        const i = passTimer.labels.length;
+        passTimer.labels.push(label);
+        descriptor = {
+            ...descriptor,
+            timestampWrites: {
+                querySet: passTimer.set,
+                beginningOfPassWriteIndex: 2 * i,
+                endOfPassWriteIndex: 2 * i + 1,
+            },
+        };
+    }
+    const pass = encoder.beginRenderPass(descriptor);
+    try {
+        body(pass);
+    }
+    finally {
+        pass.end();
+    }
+}
+const mipCompute = `@group(0) @binding(0) var source: texture_2d<f32>;
+@group(0) @binding(1) var linearSampler: sampler;
+@group(0) @binding(2) var destination: texture_storage_2d<rgba8unorm, write>;
+@compute @workgroup_size(8,8) fn main(@builtin(global_invocation_id) id: vec3u) {
+ let size=textureDimensions(destination);
+ if(id.x>=size.x||id.y>=size.y){return;}
+ textureStore(destination,id.xy,textureSampleLevel(source,linearSampler,(vec2f(id.xy)+.5)/vec2f(size),0));
+}`;
+const deviceMips = new WeakMap();
+/** Cached per-level views of a mip chain (sampled and storage). */
+const levelCache = new WeakMap();
+function levelViews(target) {
+    let levels = levelCache.get(target.texture);
+    if (!levels) {
+        levels = Array.from({ length: target.levels }, (_, i) => ({
+            sampled: target.texture.createView({ baseMipLevel: i, mipLevelCount: 1 }),
+            storage: target.texture.createView({ baseMipLevel: i, mipLevelCount: 1 }),
+            width: Math.max(1, target.width >> i),
+            height: Math.max(1, target.height >> i),
+        }));
+        levelCache.set(target.texture, levels);
+    }
+    return levels;
+}
+/** Compute passes follow the same rules: always ended, optionally timed. */
+export function encodeComputePass(encoder, body, label = 'compute') {
+    let descriptor = {};
+    if (passTimer.set && passTimer.labels.length < passTimer.capacity) {
+        const i = passTimer.labels.length;
+        passTimer.labels.push(label);
+        descriptor = {
+            timestampWrites: {
+                querySet: passTimer.set,
+                beginningOfPassWriteIndex: 2 * i,
+                endOfPassWriteIndex: 2 * i + 1,
+            },
+        };
+    }
+    const pass = encoder.beginComputePass(descriptor);
+    try {
+        body(pass);
+    }
+    finally {
+        pass.end();
+    }
+}
+const deviceKernels = new WeakMap();
+function kernelDescriptor(device, name, blend) {
+    const shader = shaders[name];
+    const entries = [
+        {
+            binding: 0,
+            visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX,
+            buffer: { type: 'uniform' },
+        },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: 'filtering' } },
+        ...shader.textures.map((_, i) => ({
+            binding: i + 2,
+            visibility: GPUShaderStage.FRAGMENT,
+            texture: { sampleType: 'float' },
+        })),
+    ];
+    const layout = device.createBindGroupLayout({ entries });
+    return {
+        label: name,
+        layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
+        vertex: {
+            module: shaderModule(device, {
+                label: name + ':vertex',
+                code: `struct VParams { slots:array<vec4f,${shader.uniforms.length + 3}> } @group(0) @binding(0) var<uniform> vp:VParams;\n` +
+                    vertex.replace('return Vertex(vec4f(p.x*2-1,1-p.y*2,0,1),p,p);', `var position=vec4f(p.x*2-1,1-p.y*2,0,1); if(vp.slots[${shader.uniforms.length + 2}].w>0){let frame=vp.slots[${shader.uniforms.length + 1}];let output=vp.slots[${shader.uniforms.length + 2}];let point=p*frame.zw+frame.xy;position=vec4f(point.x*(2/output.x)-1,-(point.y*(2/output.y)-1),0,1);}return Vertex(position,p*vp.slots[${shader.uniforms.length}].xy,p*vp.slots[${shader.uniforms.length}].zw);`),
+            }),
+            entryPoint: 'vertex',
+        },
+        fragment: {
+            module: shaderModule(device, { label: name + ':fragment', code: shader.wgsl }),
+            entryPoint: 'main',
+            targets: [
+                {
+                    format: 'rgba8unorm',
+                    blend: blend
+                        ? {
+                            color: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha' },
+                            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha' },
+                        }
+                        : undefined,
+                },
+            ],
+        },
+    };
+}
+/** Compiles the requested material kernels asynchronously (all kernels by default), so a surface's
+ * first use (an alert's or sheet's presentation material) never compiles on the GPU queue in the
+ * frames of its entrance. A kernel already created synchronously keeps its pipeline. */
+export async function prewarmKernels(device, names = Object.keys(shaders)) {
+    const kernels = deviceKernels.get(device) ?? new Map();
+    deviceKernels.set(device, kernels);
+    const failures = [];
+    for (const name of names)
+        for (const blend of [false, true]) {
+            const key = name + blend;
+            if (kernels.has(key))
+                continue;
+            try {
+                const pipeline = await device.createRenderPipelineAsync(kernelDescriptor(device, name, blend));
+                if (!kernels.has(key))
+                    kernels.set(key, { pipeline });
+            }
+            catch (error) {
+                failures.push(`${name}${blend ? ' (blend)' : ''}: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        }
+    // Loud: a kernel that cannot compile is a renderer failure, reported now, not at first use.
+    if (failures.length)
+        throw Error(`Glass kernel pipelines failed to compile: ${failures.join('; ')}`);
+}
+const deviceCopies = new WeakMap();
+/** Explicit graph with RGBA8 intermediates, matching reference's quantization boundaries. */
+export class Passes {
+    sampler;
+    kernels = new Map();
+    copyPipelines = new Map();
+    draws = 0;
+    device;
+    constructor(device) {
+        this.device = device;
+        this.kernels = deviceKernels.get(device) ?? new Map();
+        deviceKernels.set(device, this.kernels);
+        this.copyPipelines = deviceCopies.get(device) ?? new Map();
+        deviceCopies.set(device, this.copyPipelines);
+        this.sampler = device.createSampler({
+            minFilter: 'linear',
+            magFilter: 'linear',
+            mipmapFilter: 'linear',
+        });
+        this.mipPipeline = deviceMips.get(device);
+    }
+    kernel(encoder, name, output, values, textures, blend = false, scissor) {
+        const viewport = values.__viewport;
+        if (viewport)
+            assertViewport(output.width, output.height, [0, 0, ...viewport]);
+        const shader = shaders[name];
+        const key = name + blend;
+        let kernel = this.kernels.get(key);
+        if (!kernel) {
+            kernel = { pipeline: renderPipeline(this.device, kernelDescriptor(this.device, name, blend)) };
+            this.kernels.set(key, kernel);
+        }
+        const packed = new Float32Array((shader.uniforms.length + 3) * 4);
+        shader.uniforms.forEach((key, i) => {
+            const value = values[key];
+            if (value === undefined)
+                throw Error(`Missing ${name}.${key}`);
+            packed.set(typeof value === 'number' ? [value] : value, i * 4);
+        });
+        packed.set((values.__uvScale ?? [1, 1]), shader.uniforms.length * 4);
+        packed.set((values.__filterScale ?? [1, 1]), shader.uniforms.length * 4 + 2);
+        if (values.__outputFrame) {
+            packed.set(values.__outputFrame, (shader.uniforms.length + 1) * 4);
+            packed.set(values.__outputTexture, (shader.uniforms.length + 2) * 4);
+        }
+        const buffer = this.uniform(packed);
+        const group = this.device.createBindGroup({
+            layout: kernel.pipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer } },
+                { binding: 1, resource: this.sampler },
+                ...shader.textures.map((key, i) => ({
+                    binding: i + 2,
+                    resource: viewOf(textures[key].texture),
+                })),
+            ],
+        });
+        encodePass(encoder, {
+            colorAttachments: [
+                { view: viewOf(output.texture), loadOp: blend ? 'load' : 'clear', storeOp: 'store' },
+            ],
+        }, pass => {
+            if (viewport) {
+                pass.setViewport(0, 0, viewport[0], viewport[1], 0, 1);
+                pass.setScissorRect(...clampScissor([0, 0, viewport[0] - 0.5, viewport[1] - 0.5], output.width, output.height));
+            }
+            if (scissor)
+                pass.setScissorRect(...clampScissor(scissor, output.width, output.height));
+            pass.setPipeline(kernel.pipeline);
+            pass.setBindGroup(0, group);
+            pass.draw(6);
+        }, name);
+        this.draws++;
+    }
+    clear(encoder, output) {
+        encodePass(encoder, {
+            colorAttachments: [
+                {
+                    view: viewOf(output.texture),
+                    loadOp: 'clear',
+                    storeOp: 'store',
+                    clearValue: [0, 0, 0, 0],
+                },
+            ],
+        }, () => { }, 'clear');
+    }
+    buffers = [];
+    cursor = 0;
+    uniform(values) {
+        const i = this.cursor++;
+        let buffer = this.buffers[i];
+        if (!buffer || buffer.size < values.byteLength) {
+            buffer?.destroy();
+            buffer = this.device.createBuffer({
+                size: Math.ceil(values.byteLength / 256) * 256,
+                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+            });
+            this.buffers[i] = buffer;
+        }
+        this.device.queue.writeBuffer(buffer, 0, values);
+        return buffer;
+    }
+    // Different passes in one submission have different slots. Reusing slots on
+    // the next submission is safe because queue writes retain submission order.
+    submitted() {
+        this.cursor = 0;
+    }
+    copy(encoder, source, target, format = 'rgba8unorm', blend = false, load = false, viewport) {
+        const key = format + blend;
+        let pipeline = this.copyPipelines.get(key);
+        if (!pipeline) {
+            const module = shaderModule(this.device, { label: 'copy', code: copy });
+            pipeline = renderPipeline(this.device, {
+                label: 'copy:' + key,
+                layout: 'auto',
+                vertex: { module, entryPoint: 'vertex' },
+                fragment: {
+                    module,
+                    entryPoint: 'fragment',
+                    targets: [
+                        {
+                            format,
+                            blend: blend
+                                ? {
+                                    color: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha' },
+                                    alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha' },
+                                }
+                                : undefined,
+                        },
+                    ],
+                },
+            });
+            this.copyPipelines.set(key, pipeline);
+        }
+        const group = this.device.createBindGroup({
+            layout: pipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: source },
+                { binding: 1, resource: this.sampler },
+            ],
+        });
+        encodePass(encoder, { colorAttachments: [{ view: target, loadOp: load ? 'load' : 'clear', storeOp: 'store' }] }, pass => {
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, group);
+            if (viewport) {
+                pass.setViewport(viewport[0], viewport[1], viewport[2], viewport[3], 0, 1);
+                pass.setScissorRect(0, 0, Math.ceil(viewport[2] - 0.5), Math.ceil(viewport[3] - 0.5));
+            }
+            pass.draw(3);
+        }, viewport ? 'pyramid' : 'copy');
+        this.draws++;
+    }
+    pyramid(encoder, source, target, viewport) {
+        if (viewport)
+            assertViewport(target.width, target.height, viewport);
+        const levels = levelViews(target);
+        this.copy(encoder, viewOf(source.texture), levels[0].sampled, 'rgba8unorm', false, false, viewport);
+        if (target.levels < 2)
+            return;
+        // Every further mip level in ONE compute pass (one dispatch per level) instead of one
+        // render pass per level: each tiny render pass costs a tile load/store and a GPU pass
+        // boundary on a phone. Same sampler at the same texel centres as the copy pass.
+        let pipeline = this.mipPipeline;
+        if (!pipeline) {
+            const module = shaderModule(this.device, { label: 'mips', code: mipCompute });
+            pipeline = this.mipPipeline = this.device.createComputePipeline({
+                label: 'mips',
+                layout: 'auto',
+                compute: { module, entryPoint: 'main' },
+            });
+            deviceMips.set(this.device, pipeline);
+        }
+        const groups = levels.slice(1).map((level, i) => ({
+            level,
+            group: this.device.createBindGroup({
+                layout: pipeline.getBindGroupLayout(0),
+                entries: [
+                    { binding: 0, resource: levels[i].sampled },
+                    { binding: 1, resource: this.sampler },
+                    { binding: 2, resource: level.storage },
+                ],
+            }),
+        }));
+        encodeComputePass(encoder, pass => {
+            pass.setPipeline(pipeline);
+            for (const { level, group } of groups) {
+                pass.setBindGroup(0, group);
+                pass.dispatchWorkgroups(Math.ceil(level.width / 8), Math.ceil(level.height / 8));
+            }
+        }, 'mips');
+        this.draws++;
+    }
+    mipPipeline;
+    destroy() {
+        for (const b of this.buffers)
+            b.destroy();
+        this.buffers = [];
+    }
+}

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

@@ -0,0 +1,29 @@
+/**
+ * Input for an interactive glass surface (the menu trigger's press lift) can arrive before the
+ * surface's source is installed: preparations wait out motion and scrolling, and a user can tap
+ * the … button right after a launch or a navigation. That input is not an error:
+ * - only a contact still in progress is held: its press and its latest drag position;
+ * - a contact that ends (released, cancelled, or a 'rest') before the source arrives is dropped
+ *   at once, with its timer: there is nothing left to show and nothing may fail for it;
+ * - a held contact whose source never arrives within `waitMs` fails loudly (`onTimeout`).
+ */
+export type SurfaceInput = Readonly<{
+    phase: 'pressed' | 'dragging' | 'releasing' | 'rest';
+    at: number;
+    x?: number;
+}>;
+export declare class PendingSurfaceInput<T extends SurfaceInput> {
+    private press;
+    private drag;
+    private timer;
+    private readonly waitMs;
+    private readonly onTimeout;
+    constructor(waitMs: number, onTimeout: (queued: readonly T[]) => void);
+    get size(): number;
+    /** Input while the source is not installed. */
+    hold(input: T): void;
+    /** The source is installed: the held contact (press, then its latest drag); the queue empties. */
+    release(): readonly T[];
+    clear(): void;
+    private take;
+}

package/dist/glass/webgpu/pendingSurfaceInput.js

@@ -0,0 +1,51 @@
+export class PendingSurfaceInput {
+    press;
+    drag;
+    timer;
+    waitMs;
+    onTimeout;
+    constructor(waitMs, onTimeout) {
+        this.waitMs = waitMs;
+        this.onTimeout = onTimeout;
+    }
+    get size() {
+        return (this.press ? 1 : 0) + (this.drag ? 1 : 0);
+    }
+    /** Input while the source is not installed. */
+    hold(input) {
+        if (input.phase === 'releasing' || input.phase === 'rest') {
+            this.clear();
+            return;
+        }
+        if (input.phase === 'pressed') {
+            this.press = input;
+            this.drag = undefined;
+        }
+        else if (this.press)
+            this.drag = input; // drags coalesce to the latest position
+        else
+            return; // a drag without a press has no contact to continue
+        this.timer ??= setTimeout(() => {
+            this.timer = undefined;
+            const queued = this.take();
+            if (queued.length)
+                this.onTimeout(queued);
+        }, this.waitMs);
+    }
+    /** The source is installed: the held contact (press, then its latest drag); the queue empties. */
+    release() {
+        const queued = this.take();
+        this.clear();
+        return queued;
+    }
+    clear() {
+        this.press = undefined;
+        this.drag = undefined;
+        if (this.timer !== undefined)
+            clearTimeout(this.timer);
+        this.timer = undefined;
+    }
+    take() {
+        return [this.press, this.drag].filter((input) => input !== undefined);
+    }
+}

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

@@ -0,0 +1,21 @@
+export declare const prepared: WeakMap<ImageBitmap, Uint8Array<ArrayBuffer>>;
+/** An image that exists only as pixel bytes, in place of an ImageBitmap snapshot of a capture
+ * canvas. `createImageBitmap` of an accelerated canvas made WebKit keep a GPU-process image for
+ * that canvas, and releasing or redrawing the canvas later blocked the main thread for about 5 ms
+ * per megabyte (213 to 243 ms for the 42 MB capture of a 40-row list, in the middle of the tab
+ * bar's selection animation). The frame graph treats it as any other image: sized, leased,
+ * closed. Its bytes are staged with `keepSourcePixels`. */
+export declare function pixelImage(width: number, height: number): ImageBitmap;
+/** Stage bytes that stay with `image` until it is closed (premultiplied RGBA, rows top first). */
+export declare function keepSourcePixels(image: ImageBitmap, bytes: Uint8Array | Uint8ClampedArray): void;
+/** Rows of an image read back band by band (a banded plane capture, captureDemand.ts): each
+ * band's bytes and its first row (device px). The image's other rows were never drawn. */
+export type SourceBand = {
+    row: number;
+    rows: number;
+    bytes: Uint8Array | Uint8ClampedArray;
+};
+/** Stage the bands of `image` for every upload of it, until it is closed. */
+export declare function keepSourceBands(image: ImageBitmap, bands: readonly SourceBand[]): void;
+export declare function takeSourceBands(image: ImageBitmap): readonly SourceBand[] | undefined;
+export declare function takeSourcePixels(image: ImageBitmap): Uint8Array<ArrayBufferLike> | Uint8ClampedArray<ArrayBufferLike> | undefined;

package/dist/glass/webgpu/preparedSourcePixels.js

@@ -0,0 +1,43 @@
+// One-use staging bytes. The graph still owns the original bitmap for restoration.
+export const prepared = new WeakMap();
+/** Bytes that ARE their image: a capture read back on the page (SourcePixels.prepare with its
+ * capture canvas). There is no bitmap behind it, so every upload, a device restore included,
+ * writes these bytes; they are dropped when the image is closed. */
+const resident = new WeakMap();
+/** An image that exists only as pixel bytes, in place of an ImageBitmap snapshot of a capture
+ * canvas. `createImageBitmap` of an accelerated canvas made WebKit keep a GPU-process image for
+ * that canvas, and releasing or redrawing the canvas later blocked the main thread for about 5 ms
+ * per megabyte (213 to 243 ms for the 42 MB capture of a 40-row list, in the middle of the tab
+ * bar's selection animation). The frame graph treats it as any other image: sized, leased,
+ * closed. Its bytes are staged with `keepSourcePixels`. */
+export function pixelImage(width, height) {
+    const image = {
+        width,
+        height,
+        close() {
+            resident.delete(image);
+            banded.delete(image);
+        },
+    };
+    return image;
+}
+/** Stage bytes that stay with `image` until it is closed (premultiplied RGBA, rows top first). */
+export function keepSourcePixels(image, bytes) {
+    resident.set(image, bytes);
+}
+const banded = new WeakMap();
+/** Stage the bands of `image` for every upload of it, until it is closed. */
+export function keepSourceBands(image, bands) {
+    banded.set(image, bands);
+}
+export function takeSourceBands(image) {
+    return banded.get(image);
+}
+export function takeSourcePixels(image) {
+    const kept = resident.get(image);
+    if (kept)
+        return kept;
+    const bytes = prepared.get(image);
+    prepared.delete(image);
+    return bytes;
+}

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

@@ -0,0 +1,3 @@
+/** Menu settlement/removal releases deferred backdrop damage. A presentation's last moving frame can reveal a new source plane, and a presentation held for
+ * its first glass needs its content measured before it can show. */
+export declare function watchPresentationBackdrop(root: Element, prepare: () => void): () => void;

package/dist/glass/webgpu/presentationBackdrop.js

@@ -0,0 +1,33 @@
+/** Menu settlement/removal releases deferred backdrop damage. A presentation's last moving frame can reveal a new source plane, and a presentation held for
+ * its first glass needs its content measured before it can show. */
+export function watchPresentationBackdrop(root, prepare) {
+    const observer = new MutationObserver(records => {
+        if (records.some(record => record.type === 'childList'
+            ? [...record.addedNodes, ...record.removedNodes].some(node => node instanceof Element &&
+                (node.matches('[data-satin-context-backdrop-active],[data-satin-menu-panel]') ||
+                    node.querySelector('[data-satin-context-backdrop-active],[data-satin-menu-panel]')))
+            : record.target instanceof Element &&
+                (record.attributeName === 'open' ||
+                    record.attributeName === 'data-satin-menu-phase' ||
+                    record.attributeName === 'data-satin-menu-rows' ||
+                    record.attributeName === 'data-satin-context-backdrop-active' ||
+                    (record.attributeName === 'data-satin-glass-hold'
+                        ? record.target.hasAttribute('data-satin-glass-hold')
+                        : !record.target.hasAttribute('data-satin-presentation-moving')))))
+            prepare();
+    });
+    observer.observe(root, {
+        subtree: true,
+        attributes: true,
+        childList: true,
+        attributeFilter: [
+            'data-satin-presentation-moving',
+            'open',
+            'data-satin-menu-phase',
+            'data-satin-menu-rows',
+            'data-satin-context-backdrop-active',
+            'data-satin-glass-hold',
+        ],
+    });
+    return () => observer.disconnect();
+}

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

@@ -0,0 +1,48 @@
+import type { Values } from './passes.js';
+/** Adjacent Gaussian texels paired for linear sampling. Unlike sigma-spaced
+ * taps, this kernel cannot print separated copies of a one-pixel stroke. */
+export declare function presentationDiffusionTaps(sigma: number): {
+    offset: number;
+    weight: number;
+}[];
+export declare const presentationDiffusion: {
+    readonly uniforms: readonly ['uSample', 'uAxis', 'uSource'];
+    readonly textures: readonly ['uTexture'];
+    readonly wgsl: `
+struct P { sample:vec4f, axis:vec4f, source:vec4f }
+@group(0) @binding(0) var<uniform> p:P;
+@group(0) @binding(1) var s:sampler;
+@group(0) @binding(2) var source:texture_2d<f32>;
+fn sampleAt(uv:vec2f)->vec4f {
+ let halfTexel=.5*p.source.xy;
+ return textureSampleLevel(source,s,clamp(uv,halfTexel,p.source.zw-halfTexel),p.axis.z);
+}
+@fragment fn main(@location(0) uv:vec2f,@location(1) coord:vec2f)->@location(0) vec4f {
+ let center=uv*p.source.zw;
+ let step=p.axis.xy/p.sample.xy*p.source.zw;
+ var colour=sampleAt(center)*${number};
+ ${string}
+ return colour;
+}`;
+};
+export declare const sheetDiffusion: {
+    readonly uniforms: readonly ['uSample', 'uAxis', 'uSource'];
+    readonly textures: readonly ['uTexture'];
+    readonly wgsl: `
+struct P { sample:vec4f, axis:vec4f, source:vec4f }
+@group(0) @binding(0) var<uniform> p:P;
+@group(0) @binding(1) var s:sampler;
+@group(0) @binding(2) var source:texture_2d<f32>;
+fn sampleAt(uv:vec2f)->vec4f {
+ let halfTexel=.5*p.source.xy;
+ return textureSampleLevel(source,s,clamp(uv,halfTexel,p.source.zw-halfTexel),p.axis.z);
+}
+@fragment fn main(@location(0) uv:vec2f,@location(1) coord:vec2f)->@location(0) vec4f {
+ let center=uv*p.source.zw;
+ let step=p.axis.xy/p.sample.xy*p.source.zw;
+ var colour=sampleAt(center)*${number};
+ ${string}
+ return colour;
+}`;
+};
+export declare function alertDiffusionUniforms(width: number, height: number, axis: readonly [number, number], sourceWidth: number, sourceHeight: number, sourceScale?: number, mip?: number): Values;