@satinhq/kit 0.1.0-beta.1 → 0.1.0-beta.3

package/dist/glass/webgpu/client.js

@@ -30,6 +30,7 @@ export class WebGPUClient {
     }
     adapterDeadline;
     failed;
+    startingTransport = false;
     frames = new PageFrameHost();
     webgpu = false;
     currentAppearance = () => readDarkAppearance() ? 'dark' : 'light';
@@ -68,7 +69,26 @@ export class WebGPUClient {
         })), motionPreparationEnabled);
         glassTiming('client-start');
         try {
-            await this.initialize(canvas, resolution, worker, webgpu, appearance, execution);
+            for (let attempt = 0;; attempt++) {
+                this.startingTransport = true;
+                try {
+                    await this.initialize(canvas, resolution, worker, webgpu, appearance, execution);
+                    break;
+                }
+                catch (error) {
+                    const code = glassFailureCode('renderer initialization', error);
+                    const retryable = this.startingTransport &&
+                        ['worker-startup', 'readiness-timeout', 'device-request'].includes(code);
+                    if (!retryable || attempt === 2)
+                        throw error;
+                    this.close();
+                    this.failed = undefined;
+                    await new Promise(resolve => setTimeout(resolve, 250 * 2 ** attempt));
+                }
+                finally {
+                    this.startingTransport = false;
+                }
+            }
         }
         catch (error) {
             reportGlassError(glassFailureCode('renderer initialization', error), error, 'renderer initialization');
@@ -153,7 +173,7 @@ export class WebGPUClient {
                     return;
                 }
                 if (glassError) {
-                    reportGlassError(glassError.code, glassError.message, glassError.stage, glassError.reason);
+                    reportGlassError(glassError.code, glassError.message, glassError.stage, glassError.reason, this.startingTransport ? { recovering: true } : undefined);
                     return;
                 }
                 const request = this.pending.get(id);
@@ -174,12 +194,18 @@ export class WebGPUClient {
                 };
             }
             else {
-                const transport = new Worker(new URL('./entry.worker.js', import.meta.url), {
-                    type: 'module',
-                    name: 'satin-glass-webgpu',
-                });
+                let transport;
+                try {
+                    transport = new Worker(new URL('./entry.worker.js', import.meta.url), {
+                        type: 'module',
+                        name: 'satin-glass-webgpu',
+                    });
+                }
+                catch (error) {
+                    throw new Error(`Worker startup: ${String(error)}`, { cause: error });
+                }
                 transport.onmessage = receive;
-                transport.onerror = event => this.failTransport(new Error(event.message || 'Glass worker failed'), 'worker startup/runtime');
+                transport.onerror = event => this.failTransport(new Error(`Worker startup/runtime: ${event.message || 'Glass worker failed'}`), 'worker startup/runtime');
                 transport.onmessageerror = () => this.failTransport(Error('Glass worker message could not be deserialized'), 'worker transport');
                 this.transport = {
                     postMessage: (data, transfer = []) => transport.postMessage(data, transfer),
@@ -205,7 +231,7 @@ export class WebGPUClient {
                 }
                 catch (error) {
                     this.failed = error instanceof Error ? error : Error(String(error));
-                    reportGlassError(glassFailureCode('WebGPU startup', this.failed), this.failed, 'WebGPU startup');
+                    // init owns the bounded startup retry and terminal report.
                     this.transport?.terminate();
                     for (const pending of this.pending.values())
                         pending.reject(this.failed);
@@ -216,6 +242,7 @@ export class WebGPUClient {
                     clearTimeout(timeout);
                 }
             }
+            this.startingTransport = false;
             const offscreen = this.local ? canvas : canvas.transferControlToOffscreen();
             await this.request({
                 type: 'init',
@@ -233,7 +260,8 @@ export class WebGPUClient {
     failTransport(error, stage) {
         this.adapterDeadline?.cancel();
         this.failed = error;
-        reportGlassError(glassFailureCode(stage, error), error, stage);
+        if (!this.startingTransport)
+            reportGlassError(glassFailureCode(stage, error), error, stage);
         for (const pending of this.pending.values())
             pending.reject(error);
         this.pending.clear();
@@ -324,6 +352,26 @@ export class WebGPUClient {
         this.bindLifecycle();
         this.visibility();
     }
+    /** Dispose a failed transport before constructing its replacement. */
+    close() {
+        this.frames.cancel();
+        this.adapterDeadline?.cancel();
+        this.adapterDeadline = undefined;
+        document.removeEventListener('visibilitychange', this.visibility, true);
+        window.removeEventListener('pagehide', this.visibility, true);
+        window.removeEventListener('pageshow', this.visibility);
+        window.removeEventListener('focus', this.focus);
+        document.removeEventListener('visibilitychange', this.adapterVisibility, true);
+        window.removeEventListener('pagehide', this.adapterVisibility, true);
+        window.removeEventListener('pageshow', this.adapterVisibility);
+        window.removeEventListener('focus', this.adapterVisibility);
+        this.transport?.terminate();
+        this.transport = undefined;
+        this.local = undefined;
+        for (const pending of this.pending.values())
+            pending.reject(Error('Glass transport retired'));
+        this.pending.clear();
+    }
     park() {
         this.frames.cancel();
         document.removeEventListener('visibilitychange', this.visibility, true);

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

@@ -1,16 +1,13 @@
-import { WorkerFrameClock } from './frameClock.js';
+import { workerAnimationFrameClock } 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 clock = workerAnimationFrameClock;
 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);
+    renderer.receive(event);
 };
 globalThis.addEventListener('error', event => globalThis.postMessage({
     glassError: {

package/dist/glass/webgpu/errorCode.js

@@ -1,6 +1,9 @@
 /** 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;
+    // Preserve the failed transport owner when a worker reports its own device loss.
+    if (/worker.*(?:startup|runtime|transport|rejection)/i.test(text))
+        return 'worker-startup';
     if (/device\.lost|device.?lost/i.test(text))
         return 'device-lost';
     if (/out.?of.?memory/i.test(text))
@@ -19,8 +22,6 @@ export function glassFailureCode(stage, cause) {
         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/frameClock.d.ts

@@ -1,18 +1,22 @@
 import type { Envelope } from '../worker/protocol.js';
 /** Epoch milliseconds from the document's animation frame, shared with WAAPI. */
 export interface FrameClock {
+    readonly kind?: 'page-raf' | 'worker-raf';
     request(callback: (at: number) => void): number;
     cancel(token: number): void;
 }
 export declare const documentFrameClock: FrameClock;
+/** A retained worker timeline can sample without a page callback or message round trip.
+ * Both realms use epoch milliseconds, so the same WAAPI track remains the time authority. */
+export declare const workerAnimationFrameClock: FrameClock;
 type FrameRequest = {
     glassFrame: {
         token: number;
         cancel?: boolean;
     };
 };
-/** The experimental worker renderer asks the page for one frame at a time.
- * Worker rAF can run faster than the page and is not a presentation clock. */
+/** Page-linked worker clock retained for diagnostic comparisons. Its round trip
+ * also inherits page stalls; the independent worker renderer does not use it. */
 export declare class WorkerFrameClock implements FrameClock {
     private sequence;
     private pending?;

package/dist/glass/webgpu/frameClock.js

@@ -1,9 +1,16 @@
 export const documentFrameClock = {
+    kind: 'page-raf',
     request: callback => requestAnimationFrame(timestamp => callback(performance.timeOrigin + timestamp)),
     cancel: token => cancelAnimationFrame(token),
 };
-/** The experimental worker renderer asks the page for one frame at a time.
- * Worker rAF can run faster than the page and is not a presentation clock. */
+/** A retained worker timeline can sample without a page callback or message round trip.
+ * Both realms use epoch milliseconds, so the same WAAPI track remains the time authority. */
+export const workerAnimationFrameClock = {
+    ...documentFrameClock,
+    kind: 'worker-raf',
+};
+/** Page-linked worker clock retained for diagnostic comparisons. Its round trip
+ * also inherits page stalls; the independent worker renderer does not use it. */
 export class WorkerFrameClock {
     sequence = 0;
     pending;

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

@@ -44,7 +44,7 @@ export declare class FrameProbe {
     private post;
     constructor(post: (summary: FrameSummary[]) => void);
     get timestampQuery(): boolean;
-    useDevice(device: GPUDevice | undefined): void;
+    useDevice(device: GPUDevice | undefined, gpuTiming?: boolean): void;
     /** Wraps one frame's encoding and submission. Returns the frame's sample: its completion and
      * GPU times are filled in when they arrive. */
     frame(kind: FrameKind, interval: number | null, restart: boolean, encode: (e: GPUCommandEncoder) => void, canSubmit?: () => boolean): FrameProbeSample | undefined;

package/dist/glass/webgpu/frameProbe.js

@@ -78,12 +78,12 @@ export class FrameProbe {
         this.post = post;
     }
     get timestampQuery() {
-        return !!this.device?.features.has('timestamp-query');
+        return !!this.timer;
     }
-    useDevice(device) {
+    useDevice(device, gpuTiming = true) {
         this.device = device;
         this.timer = undefined;
-        if (device?.features.has('timestamp-query'))
+        if (gpuTiming && device?.features.has('timestamp-query'))
             try {
                 this.timer = new GPUFrameTimer(device);
             }

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

@@ -22,7 +22,9 @@ export declare class LayerDevice {
     private stopped;
     private adapterPending;
     private recovering;
-    private recoveryBlocked;
+    private recoveryBlockedUntil;
+    private recoveryTimer?;
+    private recoveryFailures;
     private forcedNullAdapters;
     private lastLoss?;
     readonly stats: {
@@ -43,6 +45,8 @@ export declare class LayerDevice {
     stop(): void;
     /** Foreground signals wake the single acquisition already in flight. */
     retryAdapter(): Promise<GPUDevice> | undefined;
+    private scheduleRecovery;
+    private waitUntilVisible;
     forceNullAdaptersForTest(attempts: number): void;
     private requestAdapter;
     private acquire;

package/dist/glass/webgpu/layers.js

@@ -34,7 +34,9 @@ export class LayerDevice {
     stopped = false;
     adapterPending = false;
     recovering = false;
-    recoveryBlocked = false;
+    recoveryBlockedUntil = 0;
+    recoveryTimer;
+    recoveryFailures = 0;
     forcedNullAdapters = 0;
     lastLoss;
     stats = {
@@ -57,8 +59,10 @@ export class LayerDevice {
     async ready() {
         if (this.device)
             return this.device;
-        if (this.recoveryBlocked)
-            throw Error('Glass device repeatedly lost during recovery');
+        if (Date.now() < this.recoveryBlockedUntil) {
+            this.scheduleRecovery();
+            throw Error('Glass device recovery is cooling down');
+        }
         if (this.starting)
             return this.starting;
         this.starting = this.acquire();
@@ -79,8 +83,13 @@ export class LayerDevice {
                 }
             }
             failedDevice?.destroy();
-            if (!this.stopped)
+            if (!this.stopped) {
                 this.reportError(this.recovering ? 'device recreation' : 'device acquisition', error);
+                if (this.recovering) {
+                    this.recoveryFailures++;
+                    this.scheduleRecovery();
+                }
+            }
             throw error;
         }
         finally {
@@ -91,21 +100,53 @@ export class LayerDevice {
     setAdapterVisible(visible) {
         this.adapterVisible = visible;
         this.retryWake?.();
+        if (!visible) {
+            clearTimeout(this.recoveryTimer);
+            this.recoveryTimer = undefined;
+        }
+        else if (this.recovering && !this.starting && !this.device)
+            this.scheduleRecovery();
     }
     stop() {
         this.stopped = true;
+        clearTimeout(this.recoveryTimer);
         this.retryWake?.();
     }
     /** Foreground signals wake the single acquisition already in flight. */
     retryAdapter() {
-        if (this.device || this.recoveryBlocked)
+        if (this.device || this.stopped || !this.adapterVisible)
+            return;
+        if (Date.now() < this.recoveryBlockedUntil) {
+            this.scheduleRecovery();
             return;
+        }
         if (this.starting) {
             this.retryWake?.();
             return;
         }
         return this.ready();
     }
+    scheduleRecovery() {
+        if (this.stopped || !this.adapterVisible || this.recoveryTimer)
+            return;
+        const delay = Math.max(this.recoveryBlockedUntil - Date.now(), Math.min(1000 * 2 ** this.recoveryFailures, 30_000));
+        this.recoveryTimer = setTimeout(() => {
+            this.recoveryTimer = undefined;
+            void this.retryAdapter()?.catch(() => {
+                /* ready records and schedules the next attempt. */
+            });
+        }, delay);
+    }
+    async waitUntilVisible() {
+        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');
+    }
     forceNullAdaptersForTest(attempts) {
         if (!Number.isInteger(attempts) || attempts < 0 || attempts > 100)
             throw Error('Null-adapter attempts must be an integer between 0 and 100');
@@ -167,6 +208,15 @@ export class LayerDevice {
         })).catch(error => {
             throw Error(`requestDevice rejected: ${String(error)}`);
         });
+        // requestDevice may resolve after a quick re-background. Do not rebuild or
+        // announce readiness against a suspended presentation generation.
+        try {
+            await this.waitUntilVisible();
+        }
+        catch (error) {
+            device.destroy();
+            throw error;
+        }
         this.device = device;
         this.faults.length = 0;
         registerGPUReporter(device, (stage, error) => {
@@ -207,11 +257,13 @@ export class LayerDevice {
             }
             if (invalidationError) {
                 this.reportError('device recreation', invalidationError);
+                this.scheduleRecovery();
                 return;
             }
             // WebKit can report destroyed for an unexpected loss as well.
             if (this.lossTimes.length > 3) {
-                this.recoveryBlocked = true;
+                this.recoveryBlockedUntil = this.lossTimes[0] + 60_000;
+                this.scheduleRecovery();
                 this.reportError('device recreation', 'Glass device repeatedly lost during recovery');
                 return;
             }
@@ -227,6 +279,9 @@ export class LayerDevice {
             for (const listener of this.listeners)
                 listener(device);
             this.stats.restores++;
+            this.recoveryFailures = 0;
+            clearTimeout(this.recoveryTimer);
+            this.recoveryTimer = undefined;
             this.recovering = false;
             if (lagTraceEnabled())
                 glassTiming('device-restored');

package/dist/glass/webgpu/minimize.js

@@ -374,8 +374,26 @@ export class WorkerMinimize {
                 },
             };
         }
-        if (atRest(f))
-            return spec;
+        if (atRest(f)) {
+            // A retargeted track includes its pre-onset frames. They must use the current
+            // slot too; returning the captured spec preserves the old expanded width.
+            return {
+                ...spec,
+                frameWidth: geometry.dockWidth,
+                frameHeight: geometry.dockHeight,
+                shape: {
+                    ...spec.shape,
+                    first: {
+                        ...spec.shape.first,
+                        centerX: geometry.dockWidth / 2,
+                        centerY: geometry.dockHeight / 2,
+                        halfWidth: geometry.dockWidth / 2,
+                        halfHeight: geometry.dockHeight / 2,
+                        radius: geometry.dockRadius,
+                    },
+                },
+            };
+        }
         const g = this.options.geometry, p = minimizePlacement(f.progress, g.dockWidth, g.dockHeight, g.tabBarMinimizedOffsetX), height = g.dockHeight + (48 - g.dockHeight) * f.heightProgress, y = 7 * f.heightProgress, pill = spec.tabSelection?.capsule;
         const bar = {
             centerX: p.x + p.width / 2,

package/dist/glass/webgpu/production.js

@@ -304,6 +304,12 @@ export class ProductionGlassRuntime {
     static async create(options) {
         if (this.shared) {
             const runtime = await this.shared;
+            if (runtime.client.status().failed) {
+                runtime.teardown();
+                runtime.client.close();
+                this.shared = undefined;
+                return this.create(options);
+            }
             runtime.rebind(options);
             await runtime.prepare();
             return runtime;
@@ -317,7 +323,9 @@ export class ProductionGlassRuntime {
             catch (error) {
                 // A rejected create never reaches the React owner's cleanup. Retire its
                 // listeners and captures here before a release app mounts CSS material.
-                runtime.dispose(options);
+                runtime.teardown();
+                runtime.client.close();
+                this.shared = undefined;
                 throw error;
             }
         })();
@@ -377,6 +385,10 @@ export class ProductionGlassRuntime {
             element.style.cssText =
                 'position:absolute;inset:0;overflow:visible;clip-path:none;transform:none';
         this.canvas.style.cssText = `position:absolute;left:0;top:0;width:${geometry.width}px;height:${geometry.height}px;pointer-events:none`;
+        if (!this.client.documentOwned) {
+            this.canvas.style.objectFit = 'contain';
+            this.canvas.style.objectPosition = 'left bottom';
+        }
         this.canvas.dataset.satinWebgpu = 'production';
         // Chrome canvases start as one pixel; each preparation places them on the band their surfaces
         // reach. A remount (geometry change, rebind) keeps the band the worker is drawing for until the

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

@@ -37,6 +37,19 @@ export declare class WebGPURaster {
     private overlayPipeline;
     private presentPipeline;
     private format;
+    private presentationRoot?;
+    private presentationOrigin?;
+    private presentationMembers;
+    private presentationSequence?;
+    private collectingPresentation;
+    /** Member samples encode their materials first. The root then presents the whole frame once. */
+    withSharedPresentation(draw: () => void): void;
+    /** Retain independent material sampling, but store overlapping fixed chrome once. */
+    joinPresentation(root: WebGPURaster, origin: {
+        x: number;
+        y: number;
+    }): void;
+    leavePresentation(): void;
     private lost;
     private suspended;
     private covered;
@@ -172,8 +185,10 @@ export declare class WebGPURaster {
      * region presenter's layer already is its sample rectangle and keeps layer space. */
     private localResult;
     /** Device-pixel offset of this layer's canvas within its layer. */
+    private presentationViewport;
     private canvasOffset;
     private canvasSize;
+    private resizeCanvas;
     /** Size the shared layer canvas to a band of its layer (the element is placed there by
      * the page): a lift overlay presents a strip, not a second full-screen canvas. */
     setCanvasViewport(viewport: readonly [number, number, number, number] | undefined): void;
@@ -201,6 +216,9 @@ export declare class WebGPURaster {
      * Returns false, drawing nothing, when the canvas already shows exactly this (see
      * `presentedLayers`): the same results at the same places, or nothing at all. */
     static presentLayer(encoder: GPUCommandEncoder, rasters: readonly WebGPURaster[]): boolean;
+    private presentationOffset;
+    private groupPresentUniform;
+    private groupPresentScissor;
     private presentDraw;
     /** Scroll-attached glass is part of the scrolling content, and the navigation bar's scroll-edge
      * effect is painted over that content (CSS, a layer above the scroll container). Its own