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

package/NOTICE

@@ -12,7 +12,7 @@ is a separately installed build dependency. Consumer Vite builds emit NOTICE.txt
 and licenses.json from their actual emitted module graph, including runtime peers.
 Development dependencies are not assumed to be bundled.
 
-## Satin 0.1.0-beta.0
+## Satin 0.1.0-beta.2
 
 License: MIT
 Source: https://opensource.org/license/mit

package/dist/acknowledgements/inventory.json

@@ -1,7 +1,7 @@
 [
     {
         "name": "Satin",
-        "version": "0.1.0-beta.0",
+        "version": "0.1.0-beta.2",
         "license": "MIT",
         "source": "https://opensource.org/license/mit",
         "text": "MIT License\n\nCopyright (c) 2026 Satin contributors\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n",

package/dist/app/deployment.js

@@ -57,7 +57,7 @@ export async function checkDeployment(expected, pageUrl, fetcher = fetch, includ
         fail('HTTPS is required for installation and service workers.', page.href, false, 'Serve the app over trusted HTTPS.');
         return failures;
     }
-    const request = async (path, kind, allowDirectoryCanonicalization = false) => {
+    const request = async (path, kind, allowDirectoryCanonicalization = false, attempt = 0) => {
         const url = new URL(path, page).href;
         const controller = new AbortController();
         const timer = setTimeout(() => controller.abort(), requestTimeoutMs);
@@ -68,7 +68,7 @@ export async function checkDeployment(expected, pageUrl, fetcher = fetch, includ
                 cache: 'no-store',
                 redirect: path === expected.scope + 'sw.js' ? 'manual' : 'follow',
             });
-            definite = true;
+            definite = response.status < 500 && response.status !== 408 && response.status !== 429;
             if (response.status !== 200)
                 throw new Error(`HTTP ${response.status}`);
             const finalUrl = new URL(response.url || url);
@@ -119,6 +119,12 @@ export async function checkDeployment(expected, pageUrl, fetcher = fetch, includ
         }
         catch (error) {
             const reason = error instanceof Error ? error.message : String(error);
+            // Retry transport failures only. A mismatched deployment cannot heal with backoff.
+            if ((!definite || controller.signal.aborted) && attempt < 2) {
+                clearTimeout(timer);
+                await new Promise(resolve => setTimeout(resolve, 250 * 2 ** attempt));
+                return request(path, kind, allowDirectoryCanonicalization, attempt + 1);
+            }
             if (controller.signal.aborted) {
                 fail(`${label(url)} did not finish within ${requestTimeoutMs / 1000} s`, url, true, 'Check the server or connection, then try again.');
             }

package/dist/app/installCheck.js

@@ -100,7 +100,7 @@ onPass) {
     title.textContent = standalone
         ? 'Wrong Home Screen icon'
         : unverified
-            ? 'Could not verify this app'
+            ? "Can't reach the app right now"
             : 'This app is misconfigured';
     const explanation = document.createElement('p');
     const action = document.createElement('p');
@@ -119,11 +119,12 @@ onPass) {
         return;
     }
     if (unverified) {
-        explanation.textContent = 'The connection may be slow or offline.';
-        action.textContent = 'Try again when your connection is ready.';
+        explanation.textContent = 'Check your connection and try again.';
+        action.remove();
         const retry = document.createElement('button');
         retry.textContent = 'Retry';
         retry.addEventListener('click', () => {
+            retry.disabled = true;
             void installPageCheck(expected, check, 30_000, onPass);
         });
         content.append(retry);

package/dist/app/launchWatchdog.js

@@ -173,8 +173,13 @@ export function installLaunchWatchdog(budgetMs) {
         if (progress?.type === 'SATIN_DOWNLOAD_PROGRESS' &&
             progress.downloading &&
             Number.isFinite(progress.loaded) &&
-            progress.loaded >= 0)
+            progress.loaded >= 0) {
             receiveProgress(progress);
+            // A first install can download before the application module is available.
+            // Controlled documents are cached launches/updates and keep their existing policy.
+            if (!navigator.serviceWorker?.controller && !revealed)
+                window.__SATIN_LAUNCH_SCREEN__?.progress(progress);
+        }
     });
     // A client's worker messages are queued until DOMContentLoaded, and a bootstrap module that
     // never finishes holds DOMContentLoaded back: the worker's "this resource stalled" message

package/dist/docs/swiftui-reference.md

@@ -1883,7 +1883,7 @@ export function DraftEditor() {
 - `@satinhq/kit:6b1393b088849383b4d58af841b53afabf734a131abd2a0c51e5e47d76a031ee`
 - `@satinhq/kit/vite:63ab5323f1fdbfe3425716de812e63889353f0a7252fdb379ddd29f0113c6c7b`
 - `@satinhq/kit/install:85c36af3f6d918e999f65db362675d8982468350930a540177d3d9809c88ca01`
-- `@satinhq/kit/internal:debba3992b9960c73ceaa33af510cfd6162fbb3271b7807f1041fd9968c4a6e0`
+- `@satinhq/kit/internal:39d720eaa8548f9bf1a0c01ef5868efc9b437c21e18114ef50436047fdbd4e80`
 - `@satinhq/kit/unstable:09d854e967c086ed0eaa8b3decbbd326306e1f35e493b79cc1f375060319a840`
 - `@satinhq/kit/server:1b9db029ea048edc062313e7116510843dab71d9a5630842f778bc45736e3990`
 - `@satinhq/kit/testing:cb9036de4e4b3df41671c759c0fc123b059bd412849ac0796479ead545fa8728`
@@ -1892,4 +1892,4 @@ export function DraftEditor() {
 
 ## Framework source fingerprint
 
-SHA-256 of sorted TS/TSX/CSS source paths and bytes, excluding tests: c4f66a9a5ac0b203be131846ee35fd33d9ec84aaf9fbf8a7dacd1c3278f251e3
+SHA-256 of sorted TS/TSX/CSS source paths and bytes, excluding tests: 1dfb5233c6482a7c54b0a396ffaa7079d66757b8816b1584c0eb39aad9428415

package/dist/glass/GlassMaterialRoot.d.ts

@@ -1,7 +1,9 @@
 import { type PropsWithChildren } from 'react';
 export type GlassDisplacementPolicy = 'auto' | 'disabled';
 /** The app paint layer remains untouched. Liquid regions own their retained image. */
-export declare function GlassMaterialRoot({ children, displacement, onLaunchReady, }: PropsWithChildren<{
+export declare function GlassMaterialRoot({ children, displacement, prepared, onLaunchReady, }: PropsWithChildren<{
     displacement: GlassDisplacementPolicy;
+    /** Lazy renderer modules wait for the verified offline bundle on first install. */
+    prepared?: boolean;
     onLaunchReady?: (ready: boolean) => void;
 }>): import("react").JSX.Element;

package/dist/glass/GlassMaterialRoot.js

@@ -12,7 +12,7 @@ function readAccessibilityPreferences() {
     };
 }
 /** The app paint layer remains untouched. Liquid regions own their retained image. */
-export function GlassMaterialRoot({ children, displacement, onLaunchReady, }) {
+export function GlassMaterialRoot({ children, displacement, prepared = true, onLaunchReady, }) {
     const scene = useRef(null);
     const [chromeLayer, setChromeLayer] = useState(null);
     const renderTest = 'passed';
@@ -35,5 +35,5 @@ export function GlassMaterialRoot({ children, displacement, onLaunchReady, }) {
     const registerRegion = useCallback((_registration) => () => { }, []);
     const diagnostics = useMemo(() => ({ accessibility, capability, renderTest, lensBoost: 1, mapRegenerationCount: 0 }), [accessibility, capability.reason, capability.state, renderTest]);
     const context = useMemo(() => ({ chromeLayer, diagnostics, registerRegion }), [chromeLayer, diagnostics, registerRegion]);
-    return (_jsxs(GlassMaterialContext, { value: context, children: [_jsx("div", { ref: scene, "data-satin-glass-capability": capability.state, "data-satin-scene-paint-layer": "true", "data-satin-diagnostic-glass-off": import.meta.env.SATIN_DIAGNOSTIC_GLASS_OFF || undefined, children: _jsx(MaterialEffectRoot, { scene: scene, chrome: chromeLayer, enabled: capability.state === 'displacement', capabilitySettled: true, onLaunchReady: onLaunchReady, children: children }) }), _jsx("div", { ref: setChromeLayer, "data-satin-glass-capability": capability.state, "data-satin-glass-chrome-layer": "true", "data-satin-glass-contrast": accessibility.increasedContrast ? 'more' : 'standard', "data-satin-glass-motion": accessibility.reducedMotion ? 'reduced' : 'full', "data-satin-glass-transparency": accessibility.reducedTransparency ? 'reduced' : 'full' })] }));
+    return (_jsxs(GlassMaterialContext, { value: context, children: [_jsx("div", { ref: scene, "data-satin-glass-capability": capability.state, "data-satin-scene-paint-layer": "true", "data-satin-diagnostic-glass-off": import.meta.env.SATIN_DIAGNOSTIC_GLASS_OFF || undefined, children: _jsx(MaterialEffectRoot, { scene: scene, chrome: chromeLayer, enabled: prepared && capability.state === 'displacement', capabilitySettled: prepared, onLaunchReady: onLaunchReady, children: children }) }), _jsx("div", { ref: setChromeLayer, "data-satin-glass-capability": capability.state, "data-satin-glass-chrome-layer": "true", "data-satin-glass-contrast": accessibility.increasedContrast ? 'more' : 'standard', "data-satin-glass-motion": accessibility.reducedMotion ? 'reduced' : 'full', "data-satin-glass-transparency": accessibility.reducedTransparency ? 'reduced' : 'full' })] }));
 }

package/dist/glass/GlassPresentation.d.ts

@@ -9,6 +9,7 @@ export type GlassPresentationConsumer = Readonly<{
     content: HTMLDivElement;
     scroller: HTMLDivElement;
     tabs?: Readonly<{
+        tint?: string;
         insetHost?: HTMLElement;
         intrinsicWidth?: boolean;
         placement?: 'bottom' | 'top';

package/dist/glass/GlassPresentation.js

@@ -970,7 +970,10 @@ export function GlassPresentation({ consumer }) {
                                     runtimeRef.current?.selectTabAnimated(next);
                                 }, children: tabNames.map((label, index) => (_jsxs("button", { className: index === selectedTab
                                         ? 'satin-lens-tab-item satin-lens-is-selected'
-                                        : 'satin-lens-tab-item', style: tabGlyphStyle(appearance, contentPage, index), type: "button", role: "tab", "data-tab-index": index, "data-satin-tab-role": consumer?.tabs?.items[index]?.role, id: consumer?.tabs?.items[index]?.tabId, "aria-controls": consumer?.tabs?.items[index]?.panelId, disabled: consumer?.tabs?.items[index]?.disabled, "aria-label": consumer?.tabs?.items[index]?.accessibilityLabel ??
+                                        : 'satin-lens-tab-item', style: {
+                                        ...tabGlyphStyle(appearance, contentPage, index, consumer?.tabs?.tint),
+                                        '--satin-tab-tint': consumer?.tabs?.tint,
+                                    }, type: "button", role: "tab", "data-tab-index": index, "data-satin-tab-role": consumer?.tabs?.items[index]?.role, id: consumer?.tabs?.items[index]?.tabId, "aria-controls": consumer?.tabs?.items[index]?.panelId, disabled: consumer?.tabs?.items[index]?.disabled, "aria-label": consumer?.tabs?.items[index]?.accessibilityLabel ??
                                         (tabBarPlacement === 'top' && consumer?.tabs?.items[index]?.role === 'search'
                                             ? typeof label === 'string'
                                                 ? label

package/dist/glass/MaterialEffectRoot.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fallbackGlassRequested } from './fallback/selection.js';
-import { glassFallbackRequired, reportGlassError, subscribeGlassFallback } from './errors.js';
+import { glassFallbackRequired, reportGlassError, subscribeGlassFallback, watchGlassTransportRecovery, } from './errors.js';
 import { GlassRegionRegistry } from './regionRegistry.js';
 import { observeTabSources } from '../tabs/sourceRevision.js';
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore, } from 'react';
@@ -11,6 +11,10 @@ import { isSupportedTabCount } from './tabBarModel.js';
 /** One renderer per app. Registration is semantic; backdrop discovery is framework-owned. */
 export function MaterialEffectRoot({ children, scene, chrome, enabled, capabilitySettled, onLaunchReady, }) {
     const automaticFallback = useSyncExternalStore(subscribeGlassFallback, glassFallbackRequired, () => false);
+    useEffect(() => {
+        if (automaticFallback)
+            return watchGlassTransportRecovery();
+    }, [automaticFallback]);
     const [requestedFallback] = useState(fallbackGlassRequested);
     const backend = requestedFallback || automaticFallback ? 'fallback' : 'webgpu';
     const [regions] = useState(() => new GlassRegionRegistry());

package/dist/glass/TabBar.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useControlStyle } from '../public/controlStyle.js';
 import { orderedTabItems, TopTabLabel } from '../tabs/presentation.js';
 import { handleTabKeyDown } from '../tabs/keyboard.js';
 import { readDeviceIdiom } from '../layout/deviceIdiom.js';
@@ -19,6 +20,7 @@ import { useGlassMaterialContext } from './context.js';
 import { resolveTabBarModel, TabBarAccessoryContext } from './tabBarModel.js';
 import {} from './tokens.js';
 export function TabBar({ className, adaptive = true, onShowSidebar, items: declaredItems, onSelect, selected, style, variant = 'regular', ...props }) {
+    const { tint } = useControlStyle();
     const liquid = useContext(MaterialEffectContext);
     const layoutClass = useLayoutClass();
     const metrics = useSafeAreaMetrics();
@@ -83,6 +85,7 @@ export function TabBar({ className, adaptive = true, onShowSidebar, items: decla
             onSelect,
             adaptive,
             variant,
+            tint,
             insetHost: elementRef.current ?? undefined,
             placement: 'top',
             itemFrames,
@@ -96,6 +99,7 @@ export function TabBar({ className, adaptive = true, onShowSidebar, items: decla
         onSelect,
         adaptive,
         variant,
+        tint,
         liquidTop,
         itemFrames,
     ]);
@@ -108,6 +112,7 @@ export function TabBar({ className, adaptive = true, onShowSidebar, items: decla
             onSelect,
             adaptive,
             variant,
+            tint,
             insetHost: elementRef.current ?? undefined,
             intrinsicWidth,
         });
@@ -120,6 +125,7 @@ export function TabBar({ className, adaptive = true, onShowSidebar, items: decla
         onSelect,
         adaptive,
         variant,
+        tint,
         sidebar,
         intrinsicWidth,
     ]);
@@ -146,6 +152,7 @@ export function TabBar({ className, adaptive = true, onShowSidebar, items: decla
     const tabBarStyle = {
         ...style,
         ...(sidebar ? sidebarCssTokens : {}),
+        '--satin-tab-tint': tint,
         '--satin-tab-count': items.length,
         '--satin-tab-selection-offset': `${selectedIndex * 100}%`,
         '--satin-tab-selected-index': selectedIndex,

package/dist/glass/errors.d.ts

@@ -12,7 +12,7 @@ export type GlassError = Readonly<{
     recovering?: true;
 }>;
 export declare function subscribeGlassFallback(listener: () => void): () => void;
-/** Successful resource reconstruction can retire only an adapter-outage fallback. */
+/** Retire a device outage only after resource reconstruction and presentation settle. */
 export declare function setGlassAdapterRecovery(pending: boolean): void;
 export declare function glassFallbackRequired(): boolean;
 export declare function reportGlassError(code: GlassErrorCode, cause: unknown, stage: string, reason?: string, recovery?: {
@@ -20,3 +20,5 @@ export declare function reportGlassError(code: GlassErrorCode, cause: unknown, s
 }): GlassError;
 export declare function subscribeGlassErrors(listener: (error: GlassError) => void): () => void;
 export declare function getGlassErrors(): readonly GlassError[];
+/** Retry a failed transport on a visible page; device reconstruction keeps its own owner. */
+export declare function watchGlassTransportRecovery(): () => void;

package/dist/glass/errors.js

@@ -1,10 +1,13 @@
 import { automaticGlassFallbackAllowed, strictGlassRequested } from './failurePolicy.js';
 import { recordGraphicsEvent } from '../graphicsProbe.js';
 const history = [];
-// Independent of diagnostic history. Only a reconstructed adapter outage can clear fallback.
+// Diagnostic history survives recovery; it is not the fallback state.
 let fallbackRequired = false;
 let permanentFallback = false;
 let adapterRecoveryPending = false;
+let transportRecoveryPending = false;
+let nextTransportRetry = 0;
+let transportFailures = 0;
 const fallbackListeners = new Set();
 export function subscribeGlassFallback(listener) {
     fallbackListeners.add(listener);
@@ -12,7 +15,7 @@ export function subscribeGlassFallback(listener) {
         fallbackListeners.delete(listener);
     };
 }
-/** Successful resource reconstruction can retire only an adapter-outage fallback. */
+/** Retire a device outage only after resource reconstruction and presentation settle. */
 export function setGlassAdapterRecovery(pending) {
     adapterRecoveryPending = pending;
     if (!pending && fallbackRequired && !permanentFallback) {
@@ -50,7 +53,17 @@ export function reportGlassError(code, cause, stage, reason, recovery) {
         history.shift();
     const release = automaticGlassFallbackAllowed();
     if (release && !error.recovering) {
-        if (!adapterRecoveryPending || (code !== 'adapter-unavailable' && code !== 'readiness-timeout'))
+        const transportFailure = code === 'worker-startup' ||
+            (!adapterRecoveryPending &&
+                ['adapter-unavailable', 'device-request', 'readiness-timeout'].includes(code)) ||
+            (code === 'presentation' &&
+                /import.*module|module.*script|loading.*chunk|load failed/i.test(message));
+        if (transportFailure) {
+            transportRecoveryPending = true;
+            nextTransportRetry = Date.now() + Math.min(3000 * 2 ** transportFailures++, 30_000);
+        }
+        else if (!adapterRecoveryPending ||
+            ['gpu-unavailable', 'unsupported-configuration', 'shader-compilation', 'validation'].includes(code))
             permanentFallback = true;
         fallbackRequired = true;
         for (const listener of fallbackListeners)
@@ -76,3 +89,36 @@ export function subscribeGlassErrors(listener) {
 export function getGlassErrors() {
     return history.slice();
 }
+/** Retry a failed transport on a visible page; device reconstruction keeps its own owner. */
+export function watchGlassTransportRecovery() {
+    let timer;
+    const retry = () => {
+        clearTimeout(timer);
+        if (!fallbackRequired ||
+            permanentFallback ||
+            !transportRecoveryPending ||
+            adapterRecoveryPending)
+            return;
+        if (document.visibilityState !== 'visible')
+            return;
+        const delay = nextTransportRetry - Date.now();
+        if (delay > 0) {
+            timer = setTimeout(retry, delay);
+            return;
+        }
+        transportRecoveryPending = false;
+        fallbackRequired = false;
+        for (const listener of fallbackListeners)
+            listener();
+    };
+    document.addEventListener('visibilitychange', retry);
+    window.addEventListener('pageshow', retry);
+    window.addEventListener('focus', retry);
+    retry();
+    return () => {
+        clearTimeout(timer);
+        document.removeEventListener('visibilitychange', retry);
+        window.removeEventListener('pageshow', retry);
+        window.removeEventListener('focus', retry);
+    };
+}

package/dist/glass/fallback/canvasOwnership.d.ts

@@ -0,0 +1,7 @@
+/** Parking WebGPU retains its last pixels. CSS ownership must hide those pixels,
+ * including lift/selection canvases, without destroying the renderer's reusable canvas. */
+export declare class FallbackCanvasOwnership {
+    private visibility;
+    update(canvases: Iterable<HTMLCanvasElement>): void;
+    dispose(): void;
+}

package/dist/glass/fallback/canvasOwnership.js

@@ -0,0 +1,23 @@
+/** Parking WebGPU retains its last pixels. CSS ownership must hide those pixels,
+ * including lift/selection canvases, without destroying the renderer's reusable canvas. */
+export class FallbackCanvasOwnership {
+    visibility = new Map();
+    update(canvases) {
+        const live = new Set(canvases);
+        for (const [canvas, visibility] of this.visibility) {
+            if (live.has(canvas))
+                continue;
+            canvas.style.visibility = visibility;
+            this.visibility.delete(canvas);
+        }
+        for (const canvas of live) {
+            if (this.visibility.has(canvas))
+                continue;
+            this.visibility.set(canvas, canvas.style.visibility);
+            canvas.style.visibility = 'hidden';
+        }
+    }
+    dispose() {
+        this.update([]);
+    }
+}

package/dist/glass/fallback/material.js

@@ -1,4 +1,4 @@
-import { animateElement } from '../../motion/animate.js';
+import { animateElement, timelineStart } from '../../motion/animate.js';
 /** CSS owns backdrop sampling, including video that cannot be read into a GPU texture. */
 export class FallbackMaterial {
     element = document.createElement('div');
@@ -61,6 +61,7 @@ export class FallbackMaterial {
         this.paint(specs[specs.length - 1], appearance);
         const count = Math.max(...specs.map(spec => this.shapes(spec).length));
         this.ensure(count, appearance, specs[specs.length - 1]);
+        const start = timelineStart(at);
         this.parts.forEach((part, index) => {
             const frames = specs.map((spec, sample) => {
                 const shape = this.shapes(spec)[index];
@@ -70,7 +71,7 @@ export class FallbackMaterial {
                 };
             });
             const animation = animateElement(part, frames, { duration, easing: 'linear', fill: 'both' });
-            animation.startTime = at;
+            animation.startTime = start;
             this.animations.push(animation);
         });
         return Promise.all(this.animations.map(animation => animation.finished)).then(() => { }, () => { });

package/dist/glass/fallback/regions.d.ts

@@ -1,6 +1,7 @@
 import type { GlassRegionRegistry } from '../regionRegistry.js';
 /** Registered DOM owners already follow scroll, sheets and navigation on the compositor. */
 export declare class FallbackRegions {
+    private canvases;
     private entries;
     private unsubscribe;
     private frame;

package/dist/glass/fallback/regions.js

@@ -4,11 +4,13 @@ import { sampleMenuCorner } from '../lens/menuCornerMotion.js';
 import { confirmHeldSources, heldPresentations } from '../presentationFrame.js';
 import { animateElement, timelineStart } from '../../motion/animate.js';
 import { FallbackMaterial } from './material.js';
+import { FallbackCanvasOwnership } from './canvasOwnership.js';
 import { GLASS_SHAPE_TRACK_EVENT, glassShapeTrack } from '../shapeTrackRegistry.js';
 import { trackedShapeSpec } from '../shapeTrack.js';
 import { glassRadius } from '../regions.js';
 /** Registered DOM owners already follow scroll, sheets and navigation on the compositor. */
 export class FallbackRegions {
+    canvases = new FallbackCanvasOwnership();
     entries = new Map();
     unsubscribe = [];
     frame = 0;
@@ -43,12 +45,15 @@ export class FallbackRegions {
     }
     refresh() {
         const registrations = this.registry?.values() ?? [];
+        this.canvases.update([
+            ...registrations.flatMap(entry => [entry.canvas, ...(entry.overlay ? [entry.overlay] : [])]),
+            ...[...(this.registry?.containers.values() ?? [])].map(entry => entry.canvas),
+        ]);
         const live = new Set(registrations.map(entry => entry.id));
         for (const [id, entry] of this.entries) {
             if (!live.has(id)) {
                 entry.ink?.cancel();
                 entry.material.dispose();
-                entry.restoreCanvas();
                 this.entries.delete(id);
             }
         }
@@ -90,18 +95,10 @@ export class FallbackRegions {
             const signature = JSON.stringify([region, this.appearance]);
             let entry = this.entries.get(id);
             if (!entry) {
-                // A live demotion can leave the last GPU frame on this canvas. Retain the
-                // canvas for presentation receipts, but let only the CSS material paint.
-                const canvas = registration.canvas;
-                const visibility = canvas.style.visibility;
-                canvas.style.visibility = 'hidden';
                 entry = {
                     material: new FallbackMaterial(element),
                     signature: '',
                     generation: 0,
-                    restoreCanvas: () => {
-                        canvas.style.visibility = visibility;
-                    },
                 };
                 this.entries.set(id, entry);
             }
@@ -129,7 +126,7 @@ export class FallbackRegions {
                 if (track.epoch === Number.MAX_VALUE || frames.length === 1)
                     entry.material.paint(frames[0], this.appearance);
                 else
-                    void entry.material.play(frames, track.duration, timelineStart(track.epoch - performance.timeOrigin), this.appearance);
+                    void entry.material.play(frames, track.duration, track.epoch - performance.timeOrigin, this.appearance);
                 continue;
             }
             if (!emerge || emerge.ready === false) {
@@ -204,7 +201,7 @@ export class FallbackRegions {
                     };
                 });
                 entry.ink = animateElement(ink, frames, { duration, easing: 'linear', fill: 'both' });
-                entry.ink.startTime = at;
+                entry.ink.startTime = timelineStart(at);
             }
             if (emerge.closing)
                 this.registry?.emergeInk({
@@ -242,8 +239,8 @@ export class FallbackRegions {
         this.entries.forEach(entry => {
             entry.ink?.cancel();
             entry.material.dispose();
-            entry.restoreCanvas();
         });
         this.entries.clear();
+        this.canvases.dispose();
     }
 }

package/dist/glass/fallback/runtime.d.ts

@@ -3,6 +3,7 @@ import type { RestorePath } from '../lens/tabRestoreMotion.js';
 import type { ScreenId } from '../lens/Scene.js';
 /** Material replacement only: semantic controls and measured motion keep their existing owners. */
 export declare class FallbackGlassRuntime {
+    private canvases;
     private regions;
     private dock;
     private thumb;
@@ -25,6 +26,7 @@ export declare class FallbackGlassRuntime {
     private scroll;
     private dockSpec;
     private minimizeTrack;
+    private playMinimizeTrack;
     restoreMinimizingTabBar(path?: RestorePath): boolean;
     private thumbSpec;
     private paintTabs;

package/dist/glass/fallback/runtime.js

@@ -6,8 +6,10 @@ import { tabHeldGeometry } from '../webgpu/interactionProfiles.js';
 import { WorkerMinimize } from '../webgpu/minimize.js';
 import { FallbackMaterial } from './material.js';
 import { FallbackRegions } from './regions.js';
+import { FallbackCanvasOwnership } from './canvasOwnership.js';
 /** Material replacement only: semantic controls and measured motion keep their existing owners. */
 export class FallbackGlassRuntime {
+    canvases = new FallbackCanvasOwnership();
     regions;
     dock;
     thumb;
@@ -25,18 +27,23 @@ export class FallbackGlassRuntime {
         Object.assign(globalThis, {
             __SATIN_GLASS_RENDERER__: { backend: 'fallback', errors: getGlassErrors },
         });
+        const band = options.elements.band;
+        const shell = band.canvas.closest('[data-satin-liquid]');
+        this.canvases.update([
+            band.canvas,
+            band.rimCanvas,
+            ...(shell?.querySelectorAll('canvas[data-satin-webgpu],canvas[data-satin-glass-lift]') ?? []),
+        ]);
         this.regions = new FallbackRegions(options.regions, options.appearance);
         this.dock = new FallbackMaterial(options.elements.chrome.dock);
         this.thumb = new FallbackMaterial(options.elements.chrome.dock);
         this.dock.element.style.zIndex = '-2';
         this.thumb.element.style.zIndex = '-1';
         this.minimizeDom = new WorkerMinimize(options, path => this.restoreMinimizingTabBar(path), {
-            begin: x => {
-                this.tabPointerDown(x, this.options.geometry.tabBarSelectedIndex ?? 0);
-            },
+            begin: x => this.tabPointerDown(x, this.options.geometry.tabBarSelectedIndex ?? 0),
             move: x => this.tabPointerMove(x),
             end: cancelled => this.tabPointerUp(cancelled),
-        });
+        }, track => this.playMinimizeTrack(track));
         this.bindScroll();
         this.unsubscribeAppearance = options.subscribeAppearance?.(() => this.commitAppearance(options.currentAppearance?.() ?? options.appearance));
         this.updateGeometry({});
@@ -90,6 +97,9 @@ export class FallbackGlassRuntime {
     }
     minimizeTrack(direction, path = 'tap') {
         const track = this.minimizeDom.start(direction, this.dockSpec(), path);
+        this.playMinimizeTrack(track);
+    }
+    playMinimizeTrack(track) {
         void this.dock.play(track.specs, track.duration, track.at, this.options.appearance);
         void this.thumb.play(track.specs.map(spec => this.thumbSpec(spec)), track.duration, track.at, this.options.appearance);
     }
@@ -272,6 +282,7 @@ export class FallbackGlassRuntime {
         this.unsubscribeAppearance?.();
         this.minimizeDom.dispose();
         this.regions.dispose();
+        this.canvases.dispose();
         this.dock.dispose();
         this.thumb.dispose();
     }

package/dist/glass/lens/tabGlyphColours.d.ts

@@ -3,13 +3,13 @@ import type { Appearance } from './theme.js';
  * glass mirror; scrolling needs no new GPU readback and no fixture-name lookup.
  * The chroma correction is a first-order fit, pending textured ink acceptance.
  */
-export declare function tabGlyphContextStyle(appearance: Appearance, rgb: readonly number[]): {
+export declare function tabGlyphContextStyle(appearance: Appearance, rgb: readonly number[], tint?: string): {
     '--tab-selected-icon': string;
     '--tab-selected-label': string;
     '--tab-unselected-icon': string;
     '--tab-unselected-label': string;
 };
-export declare function tabGlyphStyle(appearance: Appearance, _background: string, _index: number): {
+export declare function tabGlyphStyle(appearance: Appearance, _background: string, _index: number, tint?: string): {
     '--tab-selected-icon': string;
     '--tab-selected-label': string;
     '--tab-unselected-icon': string;

package/dist/glass/lens/tabGlyphColours.js

@@ -15,7 +15,7 @@ function neutral(appearance, k, kind) {
  * glass mirror; scrolling needs no new GPU readback and no fixture-name lookup.
  * The chroma correction is a first-order fit, pending textured ink acceptance.
  */
-export function tabGlyphContextStyle(appearance, rgb) {
+export function tabGlyphContextStyle(appearance, rgb, tint) {
     const k = luma(rgb);
     const chroma = rgb.reduce((sum, v, i) => sum + (v - k) * axis[i], 0) / norm;
     const colour = (kind) => {
@@ -24,7 +24,8 @@ export function tabGlyphContextStyle(appearance, rgb) {
             .map((v, i) => Math.max(0, Math.min(255, v + chroma * (fit[appearance][2][kind][i] - blueNeutral[i]))).toFixed(3))
             .join(' ')})`;
     };
-    const selected = colour('selected'), unselected = colour('unselected');
+    // Explicit author tint is a semantic colour, not the system-blue vibrancy fit.
+    const selected = tint || colour('selected'), unselected = colour('unselected');
     return {
         '--tab-selected-icon': selected,
         '--tab-selected-label': selected,
@@ -32,6 +33,6 @@ export function tabGlyphContextStyle(appearance, rgb) {
         '--tab-unselected-label': unselected,
     };
 }
-export function tabGlyphStyle(appearance, _background, _index) {
-    return tabGlyphContextStyle(appearance, appearance === 'light' ? [1, 1, 1] : [0, 0, 0]);
+export function tabGlyphStyle(appearance, _background, _index, tint) {
+    return tabGlyphContextStyle(appearance, appearance === 'light' ? [1, 1, 1] : [0, 0, 0], tint);
 }

package/dist/glass/liquidContext.d.ts

@@ -1,6 +1,7 @@
 import type { GlassRegionRegistry } from './regionRegistry.js';
 import type { TabBarProps, TabItemFrame } from './TabBar.js';
 export type RegisteredTabBar = TabBarProps & Readonly<{
+    tint?: string;
     insetHost?: HTMLElement;
     intrinsicWidth?: boolean;
     /** 'top': the regular-width iPad bar, laid out by `itemFrames` inside `insetHost`. */

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

@@ -21,6 +21,7 @@ export declare class WebGPUClient {
     };
     private adapterDeadline?;
     private failed?;
+    private startingTransport;
     private frames;
     private webgpu;
     private currentAppearance;
@@ -45,5 +46,7 @@ export declare class WebGPUClient {
     private focus;
     private bindLifecycle;
     resume(): void;
+    /** Dispose a failed transport before constructing its replacement. */
+    close(): void;
     park(): Promise<unknown>;
 }