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

package/dist/glass/webgpu/presentationDiffusion.js

@@ -0,0 +1,57 @@
+import { presentationSigma } from './presentationMaterial.js';
+/** Adjacent Gaussian texels paired for linear sampling. Unlike sigma-spaced
+ * taps, this kernel cannot print separated copies of a one-pixel stroke. */
+export function presentationDiffusionTaps(sigma) {
+    const taps = [{ offset: 0, weight: 1 }];
+    const reach = Math.ceil(3 * sigma);
+    for (let i = 1; i <= reach; i += 2) {
+        const a = Math.exp(-0.5 * (i / sigma) ** 2);
+        const b = i + 1 <= reach ? Math.exp(-0.5 * ((i + 1) / sigma) ** 2) : 0;
+        taps.push({ offset: i + b / (a + b), weight: a + b });
+    }
+    const total = 1 + 2 * taps.slice(1).reduce((sum, tap) => sum + tap.weight, 0);
+    return taps.map(tap => ({ offset: tap.offset, weight: tap.weight / total }));
+}
+function diffusionShader(sigma) {
+    const taps = presentationDiffusionTaps(sigma);
+    /** Presentation backdrop diffusion at approximately one texel per CSS pixel. The
+     * source mip is area-filtered before reduction. Blur the entire sample plane:
+     * masking either pass at the aperture leaves sharp ink for the lens to fold. */
+    return {
+        uniforms: ['uSample', 'uAxis', 'uSource'],
+        textures: ['uTexture'],
+        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)*${taps[0].weight};
+ ${taps
+            .slice(1)
+            .map(tap => `colour+=(sampleAt(center+step*${tap.offset})+sampleAt(center-step*${tap.offset}))*${tap.weight};`)
+            .join('\n ')}
+ return colour;
+}`,
+    };
+}
+export const presentationDiffusion = diffusionShader(presentationSigma('alert'));
+export const sheetDiffusion = diffusionShader(presentationSigma('sheet'));
+export function alertDiffusionUniforms(width, height, axis, sourceWidth, sourceHeight, sourceScale, mip = 0) {
+    return {
+        uSample: [width, height, 0, 0],
+        uAxis: [...axis, mip, 0],
+        uSource: [
+            2 ** mip / sourceWidth,
+            2 ** mip / sourceHeight,
+            sourceScale === undefined ? 1 : (width * sourceScale) / sourceWidth,
+            sourceScale === undefined ? 1 : (height * sourceScale) / sourceHeight,
+        ],
+    };
+}

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

@@ -0,0 +1,9 @@
+import type { SurfaceRenderSpec } from '../renderSpecs.js';
+import type { Appearance } from '../lens/theme.js';
+import type { Values } from './passes.js';
+export declare const presentationWeights: readonly [number[], readonly [...number[], 0]];
+/** These are the same fitted 12e sigma values used by DirectPresentGlass. */
+export declare function presentationSigma(treatment: NonNullable<SurfaceRenderSpec['treatment']>): 1.6 | 9.915343789421998 | 13.537168999150673;
+export declare function presentationBlurUniforms(spec: SurfaceRenderSpec, axis: readonly [number, number]): Values;
+export declare function presentationUniforms(spec: SurfaceRenderSpec, appearance: Appearance): Values;
+export declare function popoverArrowUniform(spec: SurfaceRenderSpec): number[];

package/dist/glass/webgpu/presentationMaterial.js

@@ -0,0 +1,156 @@
+import { morphFieldUniforms } from '../morphField.js';
+import { REFERENCE_REGULAR_TINT_PRESETS } from '../lens/referenceRegularTint.js';
+import { POPOVER_ARROW_HEIGHT } from '../regions.js';
+import { shaders } from './shaders.js';
+const knots = [30, 29, 27, 18, 11, 7, 4.5, 2.5, 1.2, 0.5, 0, 0, 0, 0, 0, 0];
+const gaussian = Array.from({ length: 7 }, (_, index) => Math.exp(-0.5 * (index * 0.5) ** 2));
+const gaussianTotal = gaussian[0] + 2 * gaussian.slice(1).reduce((sum, value) => sum + value, 0);
+export const presentationWeights = [
+    gaussian.slice(0, 4).map(value => value / gaussianTotal),
+    [...gaussian.slice(4).map(value => value / gaussianTotal), 0],
+];
+/** These are the same fitted 12e sigma values used by DirectPresentGlass. */
+export function presentationSigma(treatment) {
+    return treatment === 'sheet'
+        ? 9.915343789421998
+        : treatment === 'alert' || treatment === 'confirmation'
+            ? 13.537168999150673
+            : 1.6;
+}
+/* Uniforms for the generated native reference lens, without importing Pixi into the worker. */
+export function presentationBlurUniforms(spec, axis) {
+    if (!spec.treatment)
+        throw Error('Missing presentation treatment');
+    const first = spec.shape.first, second = spec.shape.second ?? first;
+    const width = spec.sampleWidth, height = spec.sampleHeight;
+    const shape = (s) => [
+        spec.sampleInsetX + s.centerX,
+        spec.sampleInsetY + s.centerY,
+        s.halfWidth,
+        s.halfHeight,
+    ];
+    return {
+        ...morphFieldUniforms(spec),
+        uBottomCorner: [first.bottomRadius ?? 0, Number(first.bottomRadius !== undefined), 0, 0],
+        uInputSize: [width, height, 1 / width, 1 / height],
+        uInputClamp: [0.5 / width, 0.5 / height, 1 - 0.5 / width, 1 - 0.5 / height],
+        uResolution: [width, height],
+        uSurfaceCenter: [
+            spec.sampleInsetX + spec.frameWidth / 2,
+            spec.sampleInsetY + spec.frameHeight / 2,
+        ],
+        uHalfSize: [spec.frameWidth / 2, spec.frameHeight / 2],
+        uAxis: axis,
+        uSpacing: presentationSigma(spec.treatment) * 0.5,
+        uCornerRadius: first.radius,
+        uShapeA: shape(first),
+        uShapeB: shape(second),
+        uShapeRadii: [first.radius, second.radius],
+        uShapeParams: [
+            spec.shape.second ? 2 : 1,
+            spec.shape.blendRadius,
+            spec.shape.whiteMix,
+            spec.shape.rimAlpha,
+        ],
+        uWeightsA: presentationWeights[0],
+        uWeightsB: presentationWeights[1],
+        uContinuousMenu: 0,
+        uCoverageWidth: 0.75,
+    };
+}
+export function presentationUniforms(spec, appearance) {
+    if (!spec.treatment)
+        throw Error('Missing presentation treatment');
+    const first = spec.shape.first, second = spec.shape.second ?? first;
+    const inputWidth = spec.sampleWidth, inputHeight = spec.sampleHeight;
+    const shape = (s) => [
+        spec.sampleInsetX + s.centerX,
+        spec.sampleInsetY + s.centerY,
+        s.halfWidth,
+        s.halfHeight,
+    ];
+    const tint = REFERENCE_REGULAR_TINT_PRESETS[appearance];
+    const neutral = Object.fromEntries(shaders.presentation.uniforms
+        .filter(name => name.startsWith('uGlass') ||
+        name.startsWith('uTriggerRim') ||
+        name.startsWith('uTriggerContext') ||
+        name.startsWith('uTriggerResponse') ||
+        name.startsWith('uTriggerChroma') ||
+        name.startsWith('uTriggerRegime') ||
+        name.startsWith('uTriggerEnabled'))
+        .map(name => [name, 0]));
+    return {
+        ...morphFieldUniforms(spec),
+        uBottomCorner: [first.bottomRadius ?? 0, Number(first.bottomRadius !== undefined), 0, 0],
+        ...neutral,
+        uInputSize: [inputWidth, inputHeight, 1 / inputWidth, 1 / inputHeight],
+        uInputClamp: [0.5 / inputWidth, 0.5 / inputHeight, 1 - 0.5 / inputWidth, 1 - 0.5 / inputHeight],
+        uResolution: [spec.sampleWidth, spec.sampleHeight],
+        uSurfaceCenter: [
+            spec.sampleInsetX + spec.frameWidth / 2,
+            spec.sampleInsetY + spec.frameHeight / 2,
+        ],
+        uHalfSize: [spec.frameWidth / 2, spec.frameHeight / 2],
+        uRadius: first.radius,
+        uMotionMix: 1,
+        uShapeA: shape(first),
+        uShapeB: shape(second),
+        uShapeRadii: [first.radius, second.radius],
+        uShapeParams: [
+            spec.shape.second ? 2 : 1,
+            spec.shape.blendRadius,
+            spec.shape.whiteMix,
+            spec.shape.rimAlpha,
+        ],
+        uMaterialTint: [1, 1, 1, 0],
+        uMaterialGain: spec.variant === 'clear' ? 1.12 : 1,
+        uSheetTreatment: spec.treatment === 'sheet'
+            ? 1 + (spec.sheetOpaqueMix ?? 0)
+            : spec.treatment === 'expandedSheet'
+                ? 2
+                : spec.treatment === 'alert'
+                    ? 3
+                    : spec.treatment === 'confirmation'
+                        ? 4
+                        : 0,
+        uSheetDark: appearance === 'dark' ? 1 : 0,
+        uFoldMarkerEnabled: 0,
+        uProfile: [2, 1, 0, spec.variant === 'clear' ? 4 : 5],
+        uKnotsA: knots.slice(0, 4),
+        uKnotsB: knots.slice(4, 8),
+        uKnotsC: knots.slice(8, 12),
+        uKnotsD: knots.slice(12, 16),
+        uTintEnabled: spec.variant === 'regular' ? 1 : 0,
+        uMenuMaterialMix: 0,
+        uReturningTrigger: [0, 0, 0, 0],
+        uRimBand: 0.75,
+        uMenuAppearance: appearance === 'dark' ? 1 : 0,
+        uTintLuminancesA: tint.luminances.slice(0, 4),
+        uTintLuminancesB: [tint.luminances[4], 0, 0, 0],
+        uTintGainsA: tint.gains.slice(0, 4),
+        uTintGainsB: [tint.gains[4], 0, 0, 0],
+        uTintMixesA: tint.whiteMixes.slice(0, 4),
+        uTintMixesB: [tint.whiteMixes[4], 0, 0, 0],
+        uTriggerResponse: [1, 0, 1, 0],
+        uTriggerChroma: 1,
+        uContinuousMenu: 0,
+        uCoverageWidth: 0.75,
+        uDiagnosticOutput: 0,
+        uPopoverArrow: popoverArrowUniform(spec),
+    };
+}
+/* Tip x, tip y (sample coordinates), pointing sign (1 down, -1 up), scale (0: none). Native's
+ * arrow is 14 pt tall below or above the body (native reference reference), scaled with it while it presents. */
+export function popoverArrowUniform(spec) {
+    const arrow = spec.popoverArrow;
+    if (!arrow || spec.treatment !== 'confirmation')
+        return [0, 0, 0, 0];
+    const bottom = arrow.edge === 'bottom';
+    const height = POPOVER_ARROW_HEIGHT * arrow.scale;
+    return [
+        spec.sampleInsetX + arrow.x,
+        spec.sampleInsetY + (bottom ? spec.frameHeight + height : -height),
+        bottom ? 1 : -1,
+        arrow.scale,
+    ];
+}

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

@@ -0,0 +1,11 @@
+import type { KeyboardTranslation } from '../../keyboard/translation.js';
+import type { GlassViewport } from '../rendererContract.js';
+import type { SampleRect } from './captureBands.js';
+/** A compositor transform moves a canvas without changing its layout or captured page.
+ * Observe its ancestors, not the canvas attributes that the renderer itself writes.
+ * Scripted gestures sample after their style writes; CSS motion samples until it ends.
+ * At rest there is no animation-frame loop and no backdrop work. */
+export declare function observePresenterViewport(canvas: HTMLCanvasElement, update: (viewport: GlassViewport, sampleRect: SampleRect, keyboard?: KeyboardTranslation) => void): {
+    sample: () => void;
+    dispose: () => void;
+};

package/dist/glass/webgpu/presenterViewport.js

@@ -0,0 +1,193 @@
+import { KEYBOARD_CARRIER_MOTION, keyboardCarrierPose, } from '../../safe-area/keyboardCarrierGeometry.js';
+import { presentationGlassFollowing } from '../../presentation/glassMotion.js';
+import { accessoryGlassMotion } from './accessoryMorph.js';
+import { atRest, presentationTravel } from '../presentationFrame.js';
+import { hasLayoutAnimation, observeAnimations } from '../../motion/animate.js';
+import { zoomRestRect } from '../../navigation/zoomGlass.js';
+import { navigationGlassState } from '../../navigation/glassTransition.js';
+/** A compositor transform moves a canvas without changing its layout or captured page.
+ * Observe its ancestors, not the canvas attributes that the renderer itself writes.
+ * Scripted gestures sample after their style writes; CSS motion samples until it ends.
+ * At rest there is no animation-frame loop and no backdrop work. */
+export function observePresenterViewport(canvas, update) {
+    const ancestors = [];
+    for (let node = canvas.parentElement; node; node = node.parentElement)
+        ancestors.push(node);
+    let disposed = false;
+    let frame = 0;
+    let previous = '';
+    let queued = false;
+    let zoomOwned = false;
+    const navigator = canvas.closest('[data-satin-navigator-host]');
+    const root = canvas.closest('[data-satin-root]');
+    const rootOffset = () => root?.dataset.satinKeyboard === 'visible'
+        ? Number.parseFloat(root.style.getPropertyValue('--satin-keyboard-offset-top')) || 0
+        : 0;
+    let stable;
+    let sizeChanged = false;
+    const sample = () => {
+        frame = 0;
+        if (disposed ||
+            !canvas.isConnected ||
+            document.hidden ||
+            presentationGlassFollowing(canvas) ||
+            (canvas.parentElement && accessoryGlassMotion(canvas.parentElement)))
+            return;
+        const zoom = zoomRestRect(canvas);
+        if (!zoom && zoomOwned && navigator) {
+            const navigation = navigationGlassState(navigator);
+            if (navigation?.active &&
+                navigation.zoom &&
+                navigation.routes.some(route => route.motion.contains(canvas))) {
+                // Controller cleanup precedes the settled DOM commit. Keep the accepted
+                // route sample while CSS can still expose the slide's parked transform.
+                frame = requestAnimationFrame(sample);
+                return;
+            }
+        }
+        zoomOwned = !!zoom;
+        const pose = keyboardCarrierPose(canvas);
+        const keyboardMoving = pose?.moving || root?.dataset.satinKeyboardMoving === 'true';
+        const reuse = stable &&
+            !zoom &&
+            !sizeChanged &&
+            keyboardMoving &&
+            stable.owner === pose?.owner &&
+            stable.rootOffset === rootOffset();
+        let width;
+        let height;
+        let rect;
+        if (reuse && stable) {
+            width = stable.width;
+            height = stable.height;
+            rect = {
+                x: stable.rect.x,
+                y: stable.rect.y + (pose?.offsetY ?? 0) - stable.offsetY,
+                width: stable.rect.width,
+                height: stable.rect.height,
+            };
+        }
+        else {
+            const style = getComputedStyle(canvas);
+            width = Number.parseFloat(style.width);
+            height = Number.parseFloat(style.height);
+            // Content glass selects its untransformed route atlas during a zoom. The
+            // canvas still travels with that route in CSS; publishing its screen-space
+            // box here would override the route-local sample and refract unrelated rows.
+            // Travel belongs to the material owner, not its renderer canvas. The root
+            // sheet's canvas is inside the sheet DOM but must sample the page at its
+            // current position; genuinely nested materials stay in sheet coordinates.
+            rect =
+                zoom ??
+                    atRest(canvas.getBoundingClientRect(), presentationTravel(canvas.parentElement ?? canvas));
+            stable = {
+                width,
+                height,
+                rect,
+                owner: pose?.owner,
+                offsetY: pose?.offsetY ?? 0,
+                rootOffset: rootOffset(),
+            };
+            sizeChanged = false;
+        }
+        if (!(width > 0 && height > 0 && rect.width > 0 && rect.height > 0))
+            return;
+        const viewport = {
+            x: rect.x,
+            y: rect.y,
+            scaleX: rect.width / width,
+            scaleY: rect.height / height,
+        };
+        // The worker receives the same WAAPI curve as the DOM. Its base is this
+        // canvas's resting screen position, including any concurrent layout change.
+        const keyboard = !zoom && pose?.motion
+            ? { ...pose.motion, offset: pose.motion.offset + (stable.rect.y - stable.offsetY) }
+            : undefined;
+        const key = JSON.stringify([
+            keyboard ? { ...viewport, y: 0 } : viewport,
+            rect.width,
+            rect.height,
+            keyboard,
+        ]);
+        if (key !== previous) {
+            previous = key;
+            update(viewport, [rect.x, rect.y, rect.width, rect.height], keyboard);
+        }
+        if (keyboardMoving ||
+            ancestors.some(node => hasLayoutAnimation(node) ||
+                node.getAnimations?.().some(animation => animation.playState === 'running')))
+            frame = requestAnimationFrame(sample);
+    };
+    const sampleNow = () => {
+        if (frame)
+            cancelAnimationFrame(frame);
+        sample();
+    };
+    const sampleLive = () => {
+        stable = undefined;
+        sampleNow();
+    };
+    const changed = () => {
+        if (queued || disposed)
+            return;
+        queued = true;
+        // Coalesce notifications in this task's microtask checkpoint. Gesture writes still reach
+        // glass before this frame paints; there is no extra animation-frame deferral.
+        queueMicrotask(() => {
+            queued = false;
+            if (frame)
+                cancelAnimationFrame(frame);
+            sample();
+        });
+    };
+    const resize = new ResizeObserver(entries => {
+        const box = entries[0]?.contentRect;
+        if (!box || !stable || box.width !== stable.width || box.height !== stable.height) {
+            sizeChanged = true;
+            changed();
+        }
+    });
+    resize.observe(canvas);
+    const withoutKeyboardProperties = (style) => style.replace(/--satin-keyboard-[\w-]+\s*:[^;]*(?:;|$)/g, '').replace(/\s/g, '');
+    const observer = new MutationObserver(records => {
+        // Reuse only keyboard-owned writes. A concurrent gesture or class change still measures
+        // its new transform in this same frame, even while a keyboard carry is running.
+        if (records.some(record => record.attributeName !== 'style' ||
+            withoutKeyboardProperties(record.oldValue ?? '') !==
+                withoutKeyboardProperties(record.target.style.cssText)))
+            stable = undefined;
+        changed();
+    });
+    const animationObservers = [];
+    for (const ancestor of ancestors) {
+        observer.observe(ancestor, {
+            attributes: true,
+            attributeOldValue: true,
+            attributeFilter: ['style', 'class'],
+        });
+        ancestor.addEventListener('transitionrun', changed);
+        ancestor.addEventListener('animationstart', changed);
+        animationObservers.push(observeAnimations(ancestor, sampleLive));
+    }
+    // A newly mounted presenter may already be inside an entrance animation.
+    window.addEventListener(KEYBOARD_CARRIER_MOTION, changed);
+    window.addEventListener('satin-accessory-motion', sampleLive);
+    window.addEventListener('satin-presentation-motion', sampleLive);
+    queueMicrotask(changed);
+    const dispose = () => {
+        disposed = true;
+        window.removeEventListener(KEYBOARD_CARRIER_MOTION, changed);
+        resize.disconnect();
+        window.removeEventListener('satin-accessory-motion', sampleLive);
+        window.removeEventListener('satin-presentation-motion', sampleLive);
+        observer.disconnect();
+        for (const dispose of animationObservers)
+            dispose();
+        cancelAnimationFrame(frame);
+        for (const ancestor of ancestors) {
+            ancestor.removeEventListener('transitionrun', changed);
+            ancestor.removeEventListener('animationstart', changed);
+        }
+    };
+    return { sample: sampleLive, dispose };
+}