@satinhq/kit 0.1.0-beta.0 → 0.1.0-beta.2

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/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/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;
             }
         })();

package/dist/glass/webgpu/productionPrepare.js

@@ -736,7 +736,8 @@ function applyTabGlyphContext(dock, elements, context, geometry, appearance) {
         const sample = context.sample(dock.frameX + 10.5 + ((dock.frameWidth - 20) / tabs.length) * (i + 0.5), dock.frameY + dock.frameHeight / 2 + elements.scroller.scrollTop, TAB_CONTEXT_RADIUS, elements.scroller.scrollTop, elements.scroller.scrollTop + geometry.height);
         if (!sample)
             return;
-        for (const [property, value] of Object.entries(tabGlyphContextStyle(appearance, sample.rgb)))
+        const tint = getComputedStyle(tab).getPropertyValue('--satin-tab-tint').trim();
+        for (const [property, value] of Object.entries(tabGlyphContextStyle(appearance, sample.rgb, tint)))
             tab.style.setProperty(property, value);
     });
 }

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

@@ -19,13 +19,12 @@ export declare class SourcePixels {
     private worker?;
     private next;
     private failure?;
+    private retrying?;
     private pending;
     private create;
     constructor(create?: () => Transport);
-    /** The upload worker failed (its device was lost, or a reply never came). The instance stays
-     * failed for images that need the worker: the bounded recovery of a source preparation replaces
-     * it (`ProductionGlassRuntime.replaceFailedSourcePixels`), so a failure is reported once per
-     * attempt and never retried in a loop. Canvas readbacks do not use the worker and still work. */
+    /** Exhausted upload failures let the production owner replace this source stager.
+     * Canvas readbacks remain available because they do not use the worker. */
     get failed(): boolean;
     private fail;
     /** Stage `image`'s premultiplied bytes for its upload (`takeSourcePixels`). When `capture` is a
@@ -39,4 +38,5 @@ export declare class SourcePixels {
      * in WebKit (157 ms for a 1320 x 5091 capture in the Catalyst host), more than half of the
      * stage. Measured for captures up to 1320 x 6495; the cause inside WebKit was not sampled. */
     prepare(image: ImageBitmap, capture?: ImageBitmapSource): Promise<void>;
+    private prepareOnce;
 }

package/dist/glass/webgpu/sourcePixels.js

@@ -32,6 +32,7 @@ export class SourcePixels {
     worker;
     next = 0;
     failure;
+    retrying;
     pending = new Map();
     create;
     constructor(create = () => new Worker(new URL('./sourcePixels.worker.js', import.meta.url), {
@@ -40,10 +41,8 @@ export class SourcePixels {
     })) {
         this.create = create;
     }
-    /** The upload worker failed (its device was lost, or a reply never came). The instance stays
-     * failed for images that need the worker: the bounded recovery of a source preparation replaces
-     * it (`ProductionGlassRuntime.replaceFailedSourcePixels`), so a failure is reported once per
-     * attempt and never retried in a loop. Canvas readbacks do not use the worker and still work. */
+    /** Exhausted upload failures let the production owner replace this source stager.
+     * Canvas readbacks remain available because they do not use the worker. */
     get failed() {
         return !!this.failure;
     }
@@ -51,7 +50,9 @@ export class SourcePixels {
         this.failure = error;
         this.worker?.terminate();
         this.worker = undefined;
-        reportGlassError('worker-startup', error, 'source upload worker');
+        reportGlassError('worker-startup', error, 'source upload worker', undefined, {
+            recovering: true,
+        });
         for (const job of this.pending.values()) {
             clearTimeout(job.timer);
             job.reject(error);
@@ -69,6 +70,30 @@ export class SourcePixels {
      * in WebKit (157 ms for a 1320 x 5091 capture in the Catalyst host), more than half of the
      * stage. Measured for captures up to 1320 x 6495; the cause inside WebKit was not sampled. */
     async prepare(image, capture = image) {
+        for (let attempt = 0;; attempt++) {
+            try {
+                if (this.retrying)
+                    await this.retrying;
+                return await this.prepareOnce(image, capture);
+            }
+            catch (error) {
+                if (!this.failure)
+                    throw error;
+                if (attempt === 2) {
+                    reportGlassError('worker-startup', error, 'source upload worker');
+                    throw new Error(`Source upload worker startup failed: ${String(error)}`, { cause: error });
+                }
+                // Concurrent uploads share one restart. Each retry clones from the retained
+                // source, never from the bitmap already transferred to the failed worker.
+                this.retrying ??= new Promise(resolve => setTimeout(resolve, 250 * 2 ** attempt)).then(() => {
+                    this.failure = undefined;
+                    this.retrying = undefined;
+                });
+                await this.retrying;
+            }
+        }
+    }
+    async prepareOnce(image, capture) {
         const readbackStarted = glassNow();
         const pixels = canvasPixels(capture);
         if (pixels) {
@@ -83,8 +108,17 @@ export class SourcePixels {
         if (this.failure)
             throw this.failure;
         if (!this.worker) {
-            this.worker = this.create();
+            try {
+                this.worker = this.create();
+            }
+            catch (error) {
+                this.fail(error instanceof Error ? error : Error(String(error)));
+                throw error;
+            }
+            const worker = this.worker;
             this.worker.onmessage = event => {
+                if (this.worker !== worker)
+                    return;
                 const data = event.data;
                 if (data.id === 0 && data.error) {
                     this.fail(Error(data.error));
@@ -109,8 +143,14 @@ export class SourcePixels {
                 prepared.set(job.image, new Uint8Array(data.buffer));
                 job.resolve();
             };
-            this.worker.onerror = event => this.fail(Error(event.message || 'Source upload worker failed'));
-            this.worker.onmessageerror = () => this.fail(Error('Source upload worker reply could not be decoded'));
+            this.worker.onerror = event => {
+                if (this.worker === worker)
+                    this.fail(Error(event.message || 'Source upload worker failed'));
+            };
+            this.worker.onmessageerror = () => {
+                if (this.worker === worker)
+                    this.fail(Error('Source upload worker reply could not be decoded'));
+            };
         }
         const started = glassNow(), clone = await createImageBitmap(capture);
         if (this.failure) {

package/dist/root/SatinRoot.js

@@ -159,6 +159,7 @@ export function SatinRoot({ background: legacyBackground, app: suppliedApp, offl
     const downloadedBytes = useRef(0);
     const [launchAttempt, setLaunchAttempt] = useState(0);
     const [glassReady, setGlassReady] = useState(false);
+    const [bundlePrepared, setBundlePrepared] = useState(import.meta.env.DEV || !app);
     const [glassError, setGlassError] = useState(null);
     const [glassFailed, setGlassFailed] = useState(false);
     useLayoutEffect(() => {
@@ -235,10 +236,13 @@ export function SatinRoot({ background: legacyBackground, app: suppliedApp, offl
                                 downloadActivity.current = performance.now();
                                 downloadedBytes.current = progress.loaded;
                             }
-                            // Release launch rings confirm updates; first-install bytes
-                            // still drive readiness/watchdogs without promising an update.
-                            if (app.updateProfile !== 'release')
-                                setLaunchProgress(progress);
+                            // First-install bytes describe a real download in every profile.
+                            // Applied-update confirmation remains a separate successor phase.
+                            setLaunchProgress(progress);
+                        }).then(ready => {
+                            if (!cancelled && ready)
+                                setBundlePrepared(true);
+                            return ready;
                         }),
                     prepareLaunchContent(rootRef.current, contentPreparation.signal),
                 ]);
@@ -489,7 +493,7 @@ export function SatinRoot({ background: legacyBackground, app: suppliedApp, offl
             return;
         return startDevFidelityAssertions(initialHistoryLength.current);
     }, []);
-    return (_jsx(RuntimeContext, { value: runtime, children: _jsxs(MediaPlayerRoot, { onActivityChange: onMediaActivityChange, children: [_jsx("div", { ...props, ref: rootRef, className: className, "data-satin-role": "chrome", "data-satin-root": "true", "data-satin-launch": launch, "data-satin-presentation": presentationPending ? 'preparing' : 'ready', inert: launch !== 'ready' || presentationPending, "data-satin-layout-horizontal": nextLayout.layoutClass.horizontal, "data-satin-layout-vertical": nextLayout.layoutClass.vertical, style: geometryStyles, children: _jsx(AdaptiveTabsContext, { value: tabs, children: _jsx("div", { "data-satin-status-band-source": "scene", children: _jsxs(GlassMaterialRoot, { displacement: glassDisplacement, onLaunchReady: setGlassReady, children: [DeveloperMenu && app && launch === 'ready' ? (_jsx(Suspense, { fallback: null, children: _jsx(DeveloperMenu, {}) })) : null, app ? (_jsx(OrientationGuard, { app: app, width: metrics.safeFrame.width, height: metrics.safeFrame.height, children: _jsx(ReachabilityProvider, { profile: app, offlinePresentation: offlinePresentation, children: children }) })) : (children)] }) }) }) }), launch === 'failed'
+    return (_jsx(RuntimeContext, { value: runtime, children: _jsxs(MediaPlayerRoot, { onActivityChange: onMediaActivityChange, children: [_jsx("div", { ...props, ref: rootRef, className: className, "data-satin-role": "chrome", "data-satin-root": "true", "data-satin-launch": launch, "data-satin-presentation": presentationPending ? 'preparing' : 'ready', inert: launch !== 'ready' || presentationPending, "data-satin-layout-horizontal": nextLayout.layoutClass.horizontal, "data-satin-layout-vertical": nextLayout.layoutClass.vertical, style: geometryStyles, children: _jsx(AdaptiveTabsContext, { value: tabs, children: _jsx("div", { "data-satin-status-band-source": "scene", children: _jsxs(GlassMaterialRoot, { displacement: glassDisplacement, prepared: bundlePrepared, onLaunchReady: setGlassReady, children: [DeveloperMenu && app && launch === 'ready' ? (_jsx(Suspense, { fallback: null, children: _jsx(DeveloperMenu, {}) })) : null, app ? (_jsx(OrientationGuard, { app: app, width: metrics.safeFrame.width, height: metrics.safeFrame.height, children: _jsx(ReachabilityProvider, { profile: app, offlinePresentation: offlinePresentation, children: children }) })) : (children)] }) }) }) }), launch === 'failed'
                     ? createPortal(_jsxs("div", { "data-satin-role": "chrome", "data-satin-launch-error": "true", "data-satin-glass-error": glassError ? true : undefined, role: "alert", style: { zIndex: launchErrorLayer }, children: [!glassError ? (_jsx("img", { className: "satin-launch-error-icon", src: document.querySelector('#satin-launch-screen .satin-launch-icon img')?.src ??
                                     app?.launchScreen?.icon ??
                                     app?.icons[0]?.src, alt: "" })) : null, _jsxs("div", { className: "satin-launch-error-message", children: [_jsx("h1", { children: glassError ? 'Glass Renderer Failed' : 'Unable to Open App' }), glassError ? (_jsx("pre", { style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: `${glassError.code} · ${glassError.stage}\n${glassError.message}${glassError.reason ? `\n${glassError.reason}` : ''}` })) : (_jsx("p", { children: preparationError })), _jsx("button", { type: "button", onClick: async () => {

package/dist/styles.css

@@ -349,7 +349,7 @@ body[data-satin-document='true'],
 }
 
 [data-satin-tab-item='true'][data-satin-tab-selected='true'] {
-  color: rgb(0 122 255);
+  color: var(--satin-tab-tint, rgb(0 122 255));
 }
 
 [data-satin-tab-icon='true'] {
@@ -387,7 +387,7 @@ body[data-satin-document='true'],
 }
 :where(html[data-satin-appearance='dark'])
   [data-satin-tab-item='true'][data-satin-tab-selected='true'] {
-  color: rgb(64 156 255);
+  color: var(--satin-tab-tint, rgb(64 156 255));
 }
 :where(html[data-satin-appearance='dark']) [data-satin-tab-selection='true'] {
   background: rgb(98 99 107 / 34%);
@@ -1129,7 +1129,7 @@ body[data-satin-document='true'],
   color: inherit;
 }
 [data-satin-tab-placement='top'] [data-satin-tab-selected='true'] {
-  color: var(--satin-sidebar-light-tabTint);
+  color: var(--satin-tab-tint, var(--satin-sidebar-light-tabTint));
   background: var(--satin-sidebar-light-tabSelection);
 }
 [data-satin-tab-placement='top'] [data-satin-tab-label] {
@@ -1162,7 +1162,7 @@ body[data-satin-document='true'],
 :where(html[data-satin-appearance='dark'])
   [data-satin-tab-placement='top']
   [data-satin-tab-selected='true'] {
-  color: var(--satin-sidebar-dark-tabTint);
+  color: var(--satin-tab-tint, var(--satin-sidebar-dark-tabTint));
   background: var(--satin-sidebar-dark-tabSelection);
 }
 
@@ -2261,7 +2261,7 @@ body[data-satin-document='true'],
   white-space: nowrap;
 }
 [data-satin-tab-layout='top'] .satin-lens-tab-item.satin-lens-is-selected small {
-  color: var(--satin-sidebar-light-tabTint);
+  color: var(--satin-tab-tint, var(--satin-sidebar-light-tabTint));
   font-weight: var(--satin-sidebar-tabSelectedFontWeight);
 }
 :where(html[data-satin-appearance='dark'])
@@ -2274,7 +2274,7 @@ body[data-satin-document='true'],
   [data-satin-tab-layout='top']
   .satin-lens-tab-item.satin-lens-is-selected
   small {
-  color: var(--satin-sidebar-dark-tabTint);
+  color: var(--satin-tab-tint, var(--satin-sidebar-dark-tabTint));
 }
 [data-satin-tab-layout='compact'] .satin-lens-tab-items .satin-lens-tab-icon {
   width: 24px;

package/dist/sw/renderServiceWorker.js

@@ -39,7 +39,8 @@ self.addEventListener('install', (event) => {
     await reportProgress()
     const activeDownloads = new Set()
     let failureReport
-    const download = async (entry) => {
+    const download = async (entry, attempt = 0) => {
+      let received = 0
       let networkFailure = true
       let stalled = false
       const controller = new AbortController()
@@ -76,7 +77,7 @@ self.addEventListener('install', (event) => {
         progress.activity++
         await reportProgress()
         if (installFailure) throw new Error('Installation cancelled')
-        networkFailure = false
+        networkFailure = response.status >= 500 || response.status === 408 || response.status === 429
         if (!response.ok || response.type === 'opaque') throw new Error('HTTP ' + response.status)
         if (response.redirected) throw new Error('Precache resource redirected')
         const mime = (response.headers.get('content-type') || '').split(';')[0].trim().toLowerCase()
@@ -86,7 +87,6 @@ self.addEventListener('install', (event) => {
         networkFailure = true
         reader = response.body?.getReader()
         const chunks = []
-        let received = 0
         if (reader) {
           while (true) {
             const { done, value } = await Promise.race([reader.read(), idleFailure])
@@ -112,6 +112,15 @@ self.addEventListener('install', (event) => {
         if (installFailure) throw new Error('Installation cancelled')
         await cache.put(request, new Response(blob, { status: response.status, statusText: response.statusText, headers: response.headers }))
       } catch (error) {
+        if (!installFailure && (networkFailure || stalled) && attempt < 2) {
+          clearTimeout(idleTimer)
+          activeDownloads.delete(cancelDownload)
+          // Retransmitted bytes are not extra installed bytes.
+          progress.loaded -= received
+          await new Promise(resolve => setTimeout(resolve, 250 * 2 ** attempt))
+          if (installFailure) throw error
+          return download(entry, attempt + 1)
+        }
         if (!installFailure) {
           installFailure = { type: 'SATIN_INSTALL_FAILURE', buildId: BUILD_ID, url: entry.url,
             reason: error instanceof Error ? error.message : String(error), networkFailure, stalled }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@satinhq/kit",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.2",
   "type": "module",
   "description": "Opinionated single-target framework for agent-generated personal iOS Home Screen apps.",
   "main": "./dist/index.js",
@@ -107,6 +107,7 @@
   "bin": {
     "satin": "./bin/satin.mjs"
   },
+  "homepage": "https://satin.build",
   "scripts": {
     "build": "node scripts/build.mjs",
     "typecheck": "tsc -p tsconfig.json --pretty false",