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

package/dist/glass/webgpu/contextComposite.js

@@ -0,0 +1,66 @@
+/** Native light exterior fit, review-2/measurements/context-shadow-fit.json.
+ * Dark uses the same geometric shadow candidate; its near-black signal did not identify a fit. */
+export const contextPreviewShadow = [
+    19.544682868986335, 0.29743200247189167, 0.24465397829558655,
+];
+export const contextMenuShadow = [17.05975989117854, 0.12642226441997836, 7.75094276443249];
+export const contextSampleInset = (treatment) => treatment === 'contextPreview' || treatment === 'contextMenu'
+    ? 80
+    : treatment === 'alert' || treatment === 'confirmation'
+        ? 48
+        : 20;
+/* Context isolation is a filtered screen or an unfiltered element, never a lens.
+ * Coefficients: measured-reference/review-1/measurements/{light,dark}-context.json.
+ * Effective sigma is below one pixel in these Simulator recordings. Do not
+ * substitute a conventional material blur radius without a new measurement. */
+export const contextBackdropFit = {
+    light: { sigma: 0.031692773778513594, gain: 0.8010016469847555, bias: -0.4095190853094271 / 255 },
+    dark: { sigma: 0.034251656122903235, gain: 0.5188529641684325, bias: -0.3273089787388216 / 255 },
+};
+export const contextComposite = {
+    uniforms: ['uResolution', 'uShape', 'uRadius', 'uFilter', 'uAxis', 'uShadow'],
+    textures: ['uTexture'],
+    wgsl: `
+struct P { resolution:vec4f, shape:vec4f, radius:vec4f, response:vec4f, axis:vec4f, shadow: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>;
+// Gaussian integral of a rounded rectangle. Integrate horizontal CDF slices
+// through the true rounded aperture, rather than a distance-only halo.
+fn cdf(v:f32)->f32 {
+ let z=abs(v)/sqrt(2.0);let t=1.0/(1.0+.3275911*z);
+ let erf=1.0-(((((1.061405429*t-1.453152027)*t)+1.421413741)*t-.284496736)*t+.254829592)*t*exp(-z*z);
+ return .5*(1.0+sign(v)*erf);
+}
+fn shadowAt(point:vec2f)->f32 {
+ let sigma=p.shadow.x;if(sigma<=0.0){return 0.0;}
+ let local=point-p.shape.xy-vec2f(0,p.shadow.z);var total=0.0;
+ let step=2*p.shape.w/64.0;let exponent=select(2.0,2.900378259,p.radius.y>0.0);
+ for(var i=0;i<64;i++){
+  let yy=-p.shape.w+(f32(i)+.5)*step;let dy=(yy-local.y)/sigma;
+  let corner=max(0.0,abs(yy)-(p.shape.w-p.radius.x));
+  let halfWidth=p.shape.z-p.radius.x+p.radius.x*pow(max(0.0,1.0-pow(corner/p.radius.x,exponent)),1.0/exponent);
+  total+=(cdf((halfWidth-local.x)/sigma)-cdf((-halfWidth-local.x)/sigma))*exp(-.5*dy*dy)*step/(sigma*sqrt(6.283185307));
+ }
+ return total*p.shadow.y;
+}
+@fragment fn main(@location(0) uv:vec2f,@location(1) coord:vec2f)->@location(0) vec4f {
+ var colour=textureSampleLevel(source,s,uv,0);
+ if(p.response.x>0.001){
+  var total=1.0;
+  for(var i=1;i<=6;i++){
+   let w=exp(-.5*pow(f32(i)*.5,2));
+   let delta=p.axis.xy*f32(i)*.5*p.response.x/p.resolution.xy;
+   colour+=(textureSampleLevel(source,s,uv+delta,0)+textureSampleLevel(source,s,uv-delta,0))*w;
+   total+=2*w;
+  }
+  colour/=total;
+ }
+ let point=coord*p.resolution.xy;
+ let q=abs(point-p.shape.xy)-p.shape.zw+p.radius.x;
+ let distance=length(max(q,vec2f(0)))+min(max(q.x,q.y),0)-p.radius.x;
+ let coverage=1-smoothstep(-.5,.5,distance);
+ let face=vec4f(clamp(colour.rgb*p.response.y+vec3f(p.response.z)*colour.a,vec3f(0),vec3f(1)),colour.a)*select(coverage,1.0,p.radius.y>0.0);
+ return face+vec4f(0,0,0,shadowAt(point))*(1-face.a);
+}`,
+};

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

@@ -0,0 +1 @@
+export { decodedImage as decodedGlassImage } from '../../image/resource.js';

package/dist/glass/webgpu/decodedImage.js

@@ -0,0 +1,2 @@
+// Preserve the glass entry point; artwork and capture share the same decoded pixels.
+export { decodedImage as decodedGlassImage } from '../../image/resource.js';

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

@@ -0,0 +1,5 @@
+/** Limits the glass devices request above WebGPU's defaults. A backdrop plane holds a scroll
+ * view's whole content at device resolution: an 80-row list is about 3,500 pt, 10,500 px at 3x,
+ * past the default 8,192 px texture side. Apple GPUs allow 16,384. Longer content still exceeds
+ * the adapter and fails loudly as a GPU error. */
+export declare function glassDeviceLimits(adapter: GPUAdapter): Record<string, number>;

package/dist/glass/webgpu/deviceLimits.js

@@ -0,0 +1,8 @@
+/** Limits the glass devices request above WebGPU's defaults. A backdrop plane holds a scroll
+ * view's whole content at device resolution: an 80-row list is about 3,500 pt, 10,500 px at 3x,
+ * past the default 8,192 px texture side. Apple GPUs allow 16,384. Longer content still exceeds
+ * the adapter and fails loudly as a GPU error. */
+export function glassDeviceLimits(adapter) {
+    const side = adapter.limits?.maxTextureDimension2D;
+    return side ? { maxTextureDimension2D: side } : {};
+}

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

@@ -0,0 +1,9 @@
+import { type Target } from './passes.js';
+import type { ScrollEdge } from './scrollEdgeBackdrop.js';
+type Uniform = (values: Float32Array<ArrayBuffer>) => GPUBuffer;
+/** Apply every overlapping scroll edge to `source` (a surface's composed backdrop,
+ * covering viewport rectangle `rect` at `resolution`), using two scratch targets of
+ * the same size. `source` holds the treated backdrop afterwards. */
+export declare function encodeScrollEdges(encoder: GPUCommandEncoder, device: GPUDevice, uniform: Uniform, sampler: GPUSampler, source: Target, scratch: readonly [Target, Target], rect: readonly [number, number, number, number], resolution: number, edges: readonly ScrollEdge[], scale?: readonly [number, number]): void;
+export declare function edgesUnderSurface(edges: readonly ScrollEdge[], materialProfile: 'chrome' | 'searchField' | 'menu'): readonly ScrollEdge[];
+export {};

package/dist/glass/webgpu/edgePass.js

@@ -0,0 +1,170 @@
+import { renderPipeline, shaderModule } from './errors.js';
+import { encodePass, viewOf } from './passes.js';
+const vertex = `@vertex fn vertex(@builtin(vertex_index) i:u32)->@builtin(position) vec4f {let p=array<vec2f,3>(vec2f(-1,1),vec2f(3,1),vec2f(-1,-3))[i];return vec4f(p,0,1);}`;
+/** Separable Gaussian in texel space; bilinear taps every `step` texels, edge-clamped (as CSS blur()). */
+const blur = `${vertex}
+struct P { axis:vec4f, size: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>;
+@fragment fn fragment(@builtin(position) pos:vec4f)->@location(0) vec4f {
+ let sigma=p.axis.z; let step=p.axis.w; let reach=ceil(3.0*sigma/step);
+ var sum=vec4f(0); var weight=0.0;
+ for(var i=-reach;i<=reach;i+=1.0){
+  let o=i*step; let w=exp(-.5*(o/sigma)*(o/sigma));
+  let uv=clamp((pos.xy+p.axis.xy*o)/p.size.xy,vec2f(.5)/p.size.xy,vec2f(1)-vec2f(.5)/p.size.xy);
+  sum+=textureSampleLevel(source,s,uv,0)*w; weight+=w;
+ }
+ return sum/weight;
+}`;
+/** out = mix(base, mix(blurred, tint, tint.a), mask * strength) inside the edge rectangle. */
+const composite = `${vertex}
+struct P { origin:vec4f, edge:vec4f, fade:vec4f, tint:vec4f, cap:vec4f, viewportScale:vec4f, mask:array<vec4f,10>, zoomClip:vec4f, zoomRadius:vec4f, occlusion:array<vec4f,8>, occlusionRadius:array<vec4f,8> }
+@group(0) @binding(0) var<uniform> p:P;
+@group(0) @binding(1) var s:sampler;
+@group(0) @binding(2) var base:texture_2d<f32>;
+@group(0) @binding(3) var blurred:texture_2d<f32>;
+@fragment fn fragment(@builtin(position) pos:vec4f)->@location(0) vec4f {
+ let texel=vec2i(pos.xy);
+ let b=textureLoad(base,texel,0); let g=textureLoad(blurred,texel,0);
+ let point=pos.xy/p.origin.z*p.viewportScale.xy+p.origin.xy;
+ for(var index=0u;index<8u;index++){
+  let window=p.occlusion[index];
+  if(window.z>0){
+   let radius=min(p.occlusionRadius[index].x,min(window.z,window.w)*0.5);
+   let delta=abs(point-window.xy-window.zw*0.5)-window.zw*0.5+vec2f(radius);
+   if(length(max(delta,vec2f(0)))+min(max(delta.x,delta.y),0)-radius<=0){return b;}
+  }
+ }
+ if(p.zoomClip.z>0){
+  let radius=min(p.zoomRadius.x,min(p.zoomClip.z,p.zoomClip.w)*0.5);
+  let delta=abs(point-p.zoomClip.xy-p.zoomClip.zw*0.5)-p.zoomClip.zw*0.5+vec2f(radius);
+  if(length(max(delta,vec2f(0)))+min(max(delta.x,delta.y),0)-radius>0){return b;}
+ }
+ let inside=point.x>=p.edge.x&&point.x<p.edge.z&&point.y>=p.edge.y&&point.y<p.edge.w;
+ var mask=0.0;
+ if(inside){
+  mask=select(clamp((p.edge.w-point.y)/max(1e-3,p.edge.w-p.fade.x),0.0,1.0),1.0,point.y<p.fade.x);
+  let count=u32(p.origin.w);
+  if(count>0u){
+   mask=p.mask[0].y;
+   for(var index=1u;index<count;index+=1u){
+    let start=p.mask[index-1u]; let end=p.mask[index];
+    if(point.y>=start.x){
+     let progress=clamp((point.y-start.x)/max(1e-3,end.x-start.x),0.0,1.0);
+     mask=mix(start.y,end.y,progress);
+    }
+   }
+  }
+ }
+ let treated=vec4f(mix(g.rgb,p.tint.rgb,p.tint.a),g.a);
+ let material=mix(b,treated,mask*p.fade.y);
+ var capMask=0.0;
+ if(inside&&p.cap.a>0.0){capMask=clamp((p.fade.w-point.y)/max(1e-3,p.fade.w-p.fade.z),0.0,1.0)*p.cap.a;}
+ return vec4f(mix(material.rgb,p.cap.rgb,capMask),material.a);
+}`;
+const pipelines = new WeakMap();
+function cached(device) {
+    let entry = pipelines.get(device);
+    if (!entry) {
+        const make = (label, code) => {
+            const module = shaderModule(device, { label, code });
+            return renderPipeline(device, {
+                label,
+                layout: 'auto',
+                vertex: { module, entryPoint: 'vertex' },
+                fragment: { module, entryPoint: 'fragment', targets: [{ format: 'rgba8unorm' }] },
+            });
+        };
+        entry = {
+            blur: make('scroll-edge-blur', blur),
+            composite: make('scroll-edge-composite', composite),
+        };
+        pipelines.set(device, entry);
+    }
+    return entry;
+}
+/** Apply every overlapping scroll edge to `source` (a surface's composed backdrop,
+ * covering viewport rectangle `rect` at `resolution`), using two scratch targets of
+ * the same size. `source` holds the treated backdrop afterwards. */
+export function encodeScrollEdges(encoder, device, uniform, sampler, source, scratch, rect, resolution, edges, scale = [1, 1]) {
+    const { blur: blurPipeline, composite: compositePipeline } = cached(device);
+    const [h, v] = scratch, size = [source.width, source.height];
+    const draw = (pipeline, output, values, textures, label) => {
+        const group = device.createBindGroup({
+            layout: pipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer: uniform(new Float32Array(values)) } },
+                { binding: 1, resource: sampler },
+                ...textures.map((t, i) => ({ binding: i + 2, resource: viewOf(t.texture) })),
+            ],
+        });
+        encodePass(encoder, { colorAttachments: [{ view: viewOf(output.texture), loadOp: 'clear', storeOp: 'store' }] }, pass => {
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, group);
+            pass.draw(3);
+        }, label);
+    };
+    for (const edge of edges) {
+        const sigmaX = (edge.sigma * resolution) / scale[0];
+        const sigmaY = (edge.sigma * resolution) / scale[1];
+        // A tint-only edge (sigma 0, edgesUnderSurface) composites the source itself.
+        if (edge.sigma > 0) {
+            draw(blurPipeline, h, [1, 0, sigmaX, Math.max(1, sigmaX / 8), size[0], size[1], 0, 0], [source], 'edge-blur');
+            draw(blurPipeline, v, [0, 1, sigmaY, Math.max(1, sigmaY / 8), size[0], size[1], 0, 0], [h], 'edge-blur');
+        }
+        else
+            encoder.copyTextureToTexture({ texture: source.texture }, { texture: v.texture }, [
+                source.width,
+                source.height,
+            ]);
+        draw(compositePipeline, h, [
+            rect[0],
+            rect[1],
+            resolution,
+            edge.mask?.length ?? 0,
+            edge.rect[0],
+            edge.rect[1],
+            edge.rect[0] + edge.rect[2],
+            edge.rect[1] + edge.rect[3],
+            edge.solid,
+            edge.strength,
+            edge.cap?.solid ?? 0,
+            edge.cap?.end ?? 0,
+            ...edge.tint,
+            ...(edge.cap?.color ?? [0, 0, 0, 0]),
+            ...scale,
+            0,
+            0,
+            ...Array.from({ length: 10 }, (_, index) => {
+                const stop = edge.mask?.[index];
+                return [stop?.[0] ?? 0, stop?.[1] ?? 0, 0, 0];
+            }).flat(),
+            ...(edge.zoomClip?.rect ?? [0, 0, 0, 0]),
+            edge.zoomClip?.radius ?? 0,
+            0,
+            0,
+            0,
+            ...Array.from({ length: 8 }, (_, index) => edge.zoomOcclusions?.[index]?.rect ?? [0, 0, 0, 0]).flat(),
+            ...Array.from({ length: 8 }, (_, index) => [
+                edge.zoomOcclusions?.[index]?.radius ?? 0,
+                0,
+                0,
+                0,
+            ]).flat(),
+        ], [source, v], 'edge-composite');
+        encoder.copyTextureToTexture({ texture: h.texture }, { texture: source.texture }, [
+            source.width,
+            source.height,
+        ]);
+    }
+}
+/* The edges composed under one surface. The search field sees the content under it without the
+ * search header's blur: native's field passes the row title at a 0.9 pt blur, while the header's
+ * 1.5–1.75 pt blur composed under it measured 2.0–2.25 pt (reference field material). Its tint (the
+ * field's dark transmission) still applies; the field's own recipe row does the diffusing. */
+export function edgesUnderSurface(edges, materialProfile) {
+    if (materialProfile !== 'searchField')
+        return edges;
+    return edges.map(edge => (edge.search ? { ...edge, sigma: 0 } : edge));
+}

package/dist/glass/webgpu/entry.worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/glass/webgpu/entry.worker.js

@@ -0,0 +1,28 @@
+import { WorkerFrameClock } from './frameClock.js';
+import { glassFailureCode } from './errorCode.js';
+import { createWebGPURenderer } from './renderer.js';
+import { glassTiming, setGlassTimingSink } from './profile.js';
+setGlassTimingSink(event => globalThis.postMessage({ glassProfile: event }));
+glassTiming('worker-start');
+const clock = new WorkerFrameClock(message => globalThis.postMessage(message));
+const renderer = createWebGPURenderer(message => globalThis.postMessage(message), clock);
+globalThis.onmessage = event => {
+    if (event.data.request?.type === 'page-frame')
+        clock.receive(event.data.request);
+    else
+        renderer.receive(event);
+};
+globalThis.addEventListener('error', event => globalThis.postMessage({
+    glassError: {
+        code: glassFailureCode('worker runtime', event.message),
+        stage: 'worker runtime',
+        message: event.message,
+    },
+}));
+globalThis.addEventListener('unhandledrejection', event => globalThis.postMessage({
+    glassError: {
+        code: glassFailureCode('worker unhandled rejection', event.reason),
+        stage: 'worker unhandled rejection',
+        message: String(event.reason),
+    },
+}));

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

@@ -0,0 +1,3 @@
+import type { GlassErrorCode } from '../errors.js';
+/** Classification retains the raw message; it never chooses a replacement. */
+export declare function glassFailureCode(stage: string, cause: unknown): GlassErrorCode;

package/dist/glass/webgpu/errorCode.js

@@ -0,0 +1,27 @@
+/** Classification retains the raw message; it never chooses a replacement. */
+export function glassFailureCode(stage, cause) {
+    const message = cause instanceof Error ? `${cause.name}: ${cause.message}` : String(cause), text = stage + ' ' + message;
+    if (/device\.lost|device.?lost/i.test(text))
+        return 'device-lost';
+    if (/out.?of.?memory/i.test(text))
+        return 'out-of-memory';
+    if (/shader compilation/i.test(text))
+        return 'shader-compilation';
+    if (/GPUValidationError|validation/i.test(text))
+        return 'validation';
+    if (/requestAdapter/i.test(text))
+        return 'adapter-unavailable';
+    if (/navigator\.gpu|WebGPU.*unavailable/i.test(text))
+        return 'gpu-unavailable';
+    if (/requestDevice|device acquisition|device recreation/i.test(text))
+        return 'device-request';
+    if (/configure canvas|Offscreen WebGPU context/i.test(text))
+        return 'context-configure';
+    if (/readiness|2\.5 seconds|2500 ms/i.test(text))
+        return 'readiness-timeout';
+    if (/worker.*(?:startup|runtime|transport|rejection)/i.test(text))
+        return 'worker-startup';
+    if (/unsupported|invalid glass|Unknown.*(?:layer|region)|exceeds.*supported/i.test(text))
+        return 'unsupported-configuration';
+    return 'presentation';
+}

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

@@ -0,0 +1,8 @@
+type Reporter = (stage: string, error: unknown) => void;
+export declare function registerGPUReporter(device: GPUDevice, report: Reporter): void;
+/** Pop synchronously so overlapping async readbacks cannot steal another scope. */
+export declare function gpuScope<T>(device: GPUDevice, stage: string, work: () => T): T;
+export declare function shaderModule(device: GPUDevice, descriptor: GPUShaderModuleDescriptor): GPUShaderModule;
+export declare function drainGPUErrors(device: GPUDevice): Promise<void>;
+export declare function renderPipeline(device: GPUDevice, descriptor: GPURenderPipelineDescriptor): GPURenderPipeline;
+export {};

package/dist/glass/webgpu/errors.js

@@ -0,0 +1,55 @@
+import { glassTimed } from './profile.js';
+const reporters = new WeakMap();
+const pending = new WeakMap();
+export function registerGPUReporter(device, report) {
+    reporters.set(device, report);
+}
+function track(device, task) {
+    const tasks = pending.get(device) ?? new Set();
+    pending.set(device, tasks);
+    tasks.add(task);
+    void task.finally(() => tasks.delete(task));
+}
+/** Pop synchronously so overlapping async readbacks cannot steal another scope. */
+export function gpuScope(device, stage, work) {
+    for (const kind of ['internal', 'out-of-memory', 'validation'])
+        device.pushErrorScope(kind);
+    try {
+        return work();
+    }
+    catch (error) {
+        reporters.get(device)?.(stage, error);
+        throw error;
+    }
+    finally {
+        for (let i = 0; i < 3; i++)
+            track(device, device.popErrorScope().then(error => {
+                if (error)
+                    reporters.get(device)?.(stage, `${error.constructor.name}: ${error.message}`);
+            }, async (error) => {
+                // GPU-process teardown can reject scopes before delivering device.lost.
+                // Give that notification one task turn to retire the old-device reporter.
+                await new Promise(resolve => setTimeout(resolve, 0));
+                reporters.get(device)?.(`${stage}: error scope`, error);
+            }));
+    }
+}
+export function shaderModule(device, descriptor) {
+    const module = glassTimed('shader-module', () => device.createShaderModule(descriptor), descriptor.label);
+    track(device, module.getCompilationInfo().then(info => {
+        const failures = info.messages.filter(message => message.type === 'error');
+        if (failures.length)
+            reporters.get(device)?.('shader compilation', failures
+                .map(m => `${descriptor.label ?? 'WGSL'} ${m.lineNum}:${m.linePos}: ${m.message}`)
+                .join('\n'));
+    }, error => {
+        reporters.get(device)?.('shader compilation info', error);
+    }));
+    return module;
+}
+export async function drainGPUErrors(device) {
+    await Promise.all(pending.get(device) ?? []);
+}
+export function renderPipeline(device, descriptor) {
+    return glassTimed('pipeline', () => device.createRenderPipeline(descriptor), descriptor.label);
+}

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

@@ -0,0 +1,9 @@
+import type { SurfaceRenderSpec } from '../renderSpecs.js';
+import type { Values } from './passes.js';
+export declare const FIELD_INK_GLSL: string;
+/** Kernel values for one ink layer. Layer rectangles are in field-member points; the kernel
+ * works in sample points (member points plus the sample inset). */
+export declare function fieldInkUniforms(spec: SurfaceRenderSpec, atlas: {
+    width: number;
+    height: number;
+}, layer: NonNullable<SurfaceRenderSpec['ink']>['layers'][number], field: Values, resolution: number): Values;

package/dist/glass/webgpu/fieldInk.js

@@ -0,0 +1,62 @@
+import { MORPH_FIELD_GLSL } from '../morphField.js';
+/* Ink inside a glass field: a region of a captured foreground atlas (a menu's rows, its
+ * trigger's glyph) drawn only where the field is, lensed by the rim like the backdrop: within
+ * `lens width` of the edge the ink is sampled from deeper inside, so content passing under a
+ * moving rim is magnified and bent along it. Premultiplied output, composited over the material.
+ * Compiled to WGSL offline (scripts/measured-reference/regenerate-morph-field.mjs). */
+export const FIELD_INK_GLSL = MORPH_FIELD_GLSL +
+    /* glsl */ `
+precision highp float;
+in vec2 vTextureCoord;
+in vec2 vFilterCoord;
+out vec4 finalColor;
+uniform sampler2D uTexture;
+uniform vec2 uResolution;
+uniform vec2 uAtlasSize;
+uniform vec4 uInkSource;
+uniform vec4 uInkFrame;
+uniform vec4 uInkParams;
+uniform float uCoverageWidth;
+vec4 inkSample(vec2 local,vec2 offset){
+ vec2 point=uInkSource.xy+local*uInkSource.zw+offset;
+ if(any(lessThan(point,uInkSource.xy))||any(greaterThan(point,uInkSource.xy+uInkSource.zw)))return vec4(0);
+ return textureLod(uTexture,point/uAtlasSize,0.0);
+}
+void main(){
+ vec2 p=vFilterCoord*uResolution;
+ float d=morphDistance(p);
+ float aa=max(uCoverageWidth,.5*fwidth(d));
+ float coverage=1.0-smoothstep(-aa,aa,d);
+ if(coverage<=0.0||uInkParams.x<=0.0){finalColor=vec4(0);return;}
+ vec2 n=morphNormal(p);
+ float rim=clamp(1.0-max(-d,0.0)/max(uInkParams.w,.001),0.0,1.0);
+ vec2 q=p-n*uInkParams.z*rim*rim;
+ vec2 local=(q-uInkFrame.xy)/uInkFrame.zw;
+ float r=uInkParams.y*uInkSource.z/uInkFrame.z;
+ vec4 c=inkSample(local,vec2(0));
+ if(r>.05){
+  c+=inkSample(local,vec2(r,0))+inkSample(local,vec2(-r,0))+inkSample(local,vec2(0,r))+inkSample(local,vec2(0,-r));
+  c+=inkSample(local,vec2(.7,.7)*r)+inkSample(local,vec2(-.7,.7)*r)+inkSample(local,vec2(.7,-.7)*r)+inkSample(local,vec2(-.7,-.7)*r);
+  c/=9.0;
+ }
+ finalColor=c*uInkParams.x*coverage;
+}`;
+/** Kernel values for one ink layer. Layer rectangles are in field-member points; the kernel
+ * works in sample points (member points plus the sample inset). */
+export function fieldInkUniforms(spec, atlas, layer, field, resolution) {
+    return {
+        ...field,
+        uResolution: [spec.sampleWidth, spec.sampleHeight],
+        uAtlasSize: [atlas.width, atlas.height],
+        uInkSource: [layer.source.x, layer.source.y, layer.source.width, layer.source.height],
+        uInkFrame: [
+            layer.frame.x + spec.sampleInsetX,
+            layer.frame.y + spec.sampleInsetY,
+            layer.frame.width,
+            layer.frame.height,
+        ],
+        uInkParams: [layer.opacity, layer.blur, layer.lens, layer.lensWidth],
+        // The material's own edge (rasterUniforms materialUniforms).
+        uCoverageWidth: 0.5 / resolution,
+    };
+}

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

@@ -0,0 +1,29 @@
+import type { AccessoryTrack } from './accessoryTrack.js';
+export declare function cloneForegroundSvg(svg: SVGSVGElement, selectedColor?: string, options?: {
+    inheritedHidden?: boolean;
+}): SVGSVGElement;
+/** A text node's visual lines: a wrapped label is drawn line by line where the page laid it out.
+ * Characters join a line while their boxes share its vertical band. */
+export declare function textLines(node: Text): {
+    text: string;
+    rect: DOMRect;
+}[];
+/** Snapshot geometry before decoding yields. Toolbar ink and its aperture must describe one
+ * pose, even if navigation advances while an SVG/image is decoded. */
+export declare function foregroundGeometry(element: HTMLElement, target?: DOMRect): {
+    bounds: DOMRect;
+    rects: Map<Element, DOMRect>;
+    lines: Map<Text, {
+        text: string;
+        rect: DOMRect;
+    }[]>;
+};
+export declare function captureRegionForeground(element: HTMLElement, resolution: number, padding?: number, selected?: {
+    icon: string;
+    label: string;
+}, options?: {
+    resting?: boolean;
+    tabLayers?: boolean;
+    accessory?: AccessoryTrack;
+    geometry?: ReturnType<typeof foregroundGeometry>;
+}): Promise<HTMLCanvasElement>;