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

package/dist/app/launchScreenRuntime.js

@@ -1,9 +1,32 @@
-// Serialized into the head so failures before module loading use the same
-// controller as ordinary readiness. Keep this function self-contained.
-export function installLaunchScreenRuntime() {
+export function installLaunchScreenRuntime(options) {
     const launchWindow = window;
-    if (launchWindow.__SATIN_LAUNCH_SCREEN__)
-        return launchWindow.__SATIN_LAUNCH_SCREEN__;
+    if (launchWindow.__SATIN_PRELAUNCH__)
+        return launchWindow.__SATIN_PRELAUNCH__;
+    const host = document.createElement('satin-prelaunch');
+    const root = host.attachShadow({ mode: 'closed' });
+    const style = document.createElement('style');
+    style.nonce = options.nonce ?? document.currentScript?.nonce ?? '';
+    style.textContent = options.css;
+    const content = document.createElement('div');
+    content.innerHTML = options.markup;
+    root.append(style, content);
+    document.documentElement.append(host);
+    const element = (id) => root.getElementById(id);
+    const cover = element('satin-launch-screen');
+    const failure = document.createElement('section');
+    failure.id = 'satin-launch-error';
+    failure.setAttribute('role', 'alert');
+    failure.hidden = true;
+    let state = options.cover === false ? 'idle' : 'preparing';
+    cover.hidden = options.cover === false;
+    const dark = matchMedia('(prefers-color-scheme: dark)');
+    const appearance = (background, ink) => {
+        host.style.setProperty('--satin-launch-background', background, 'important');
+        host.style.setProperty('--satin-launch-ink', ink, 'important');
+    };
+    const systemAppearance = () => appearance(dark.matches ? options.darkBackground : options.background, dark.matches ? options.darkInk : '#1c1c1e');
+    systemAppearance();
+    dark.addEventListener?.('change', systemAppearance);
     let value = 0;
     let velocity = 0;
     let target = 0;
@@ -21,7 +44,7 @@ export function installLaunchScreenRuntime() {
         // Extend the cover into that excluded space so its center stays in the
         // native startup image's screen frame. Windowed apps keep their own frame.
         const excludedTop = standalone && fullWidth ? Math.max(0, screen.height - innerHeight) : 0;
-        document.documentElement.style.setProperty('--satin-launch-excluded-top', `${excludedTop}px`);
+        host.style.setProperty('--satin-launch-excluded-top', `${excludedTop}px`, 'important');
     };
     alignCover();
     window.addEventListener('resize', alignCover);
@@ -33,7 +56,7 @@ export function installLaunchScreenRuntime() {
     let retiring = null;
     let appliedUpdate = null;
     let updateAnimation = null;
-    const ringElement = () => document.getElementById('satin-launch-progress');
+    const ringElement = () => element('satin-launch-progress');
     const paint = () => {
         ringElement()
             ?.querySelector('circle')
@@ -101,7 +124,7 @@ export function installLaunchScreenRuntime() {
             .finished.catch(() => { });
     };
     const retire = (onRetired) => {
-        const screen = document.getElementById('satin-launch-screen');
+        const screen = element('satin-launch-screen');
         if (!screen) {
             onRetired();
             return;
@@ -110,7 +133,7 @@ export function installLaunchScreenRuntime() {
         retiring ??= (async () => {
             const ring = ringElement();
             if (ring && !ring.hasAttribute('hidden')) {
-                // React and head failure panels must stay behind the completing arc.
+                // The failure panel stays behind the completing arc.
                 screen.style.zIndex = '20003';
                 ring.setAttribute('aria-label', 'Finishing launch');
                 await complete();
@@ -135,6 +158,100 @@ export function installLaunchScreenRuntime() {
         });
     };
     const controller = {
+        version: 1,
+        stylesReady() {
+            return Promise.all([...document.querySelectorAll('link[data-satin-style]')].map(link => {
+                if (link.dataset.satinStyleReady === 'true')
+                    return Promise.resolve();
+                return new Promise((resolve, reject) => {
+                    const cleanup = () => {
+                        link.removeEventListener('load', loaded);
+                        link.removeEventListener('error', failed);
+                    };
+                    const loaded = () => {
+                        cleanup();
+                        resolve();
+                    };
+                    const failed = () => {
+                        cleanup();
+                        reject(new Error('The app stylesheet failed to load. Please retry.'));
+                    };
+                    if (link.dataset.satinStyleError === 'true') {
+                        failed();
+                        return;
+                    }
+                    link.addEventListener('load', loaded, { once: true });
+                    link.addEventListener('error', failed, { once: true });
+                });
+            })).then(() => { });
+        },
+        appearance,
+        snapshot() {
+            const ring = ringElement();
+            const box = ring.getBoundingClientRect();
+            const style = getComputedStyle(ring);
+            return {
+                version: 1,
+                state,
+                error: failure.isConnected ? (failure.textContent ?? '') : '',
+                coverVisible: !cover.hidden,
+                ringVisible: !cover.hidden &&
+                    !ring.hasAttribute('hidden') &&
+                    style.display !== 'none' &&
+                    Number(style.opacity) > 0,
+                label: ring.getAttribute('aria-label'),
+                offset: getComputedStyle(ring.querySelector('circle')).strokeDashoffset,
+                box: [box.x, box.y, box.width, box.height],
+                background: getComputedStyle(cover).backgroundColor,
+            };
+        },
+        error(reason, title = 'Unable to Open App', retry, detail) {
+            state = 'failed';
+            failure.replaceChildren();
+            const heading = document.createElement('h1');
+            heading.textContent = title;
+            const message = document.createElement('p');
+            message.textContent = reason;
+            const diagnostics = document.createElement('p');
+            diagnostics.className = 'detail';
+            diagnostics.textContent = detail ?? '';
+            diagnostics.hidden = !detail;
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.textContent = 'Retry';
+            button.onclick =
+                retry ??
+                    (() => {
+                        try {
+                            sessionStorage.setItem('satin-install-reset:' + options.scope, '1');
+                        }
+                        catch {
+                            /* Retry still reloads without storage. */
+                        }
+                        location.reload();
+                    });
+            failure.append(heading, message, diagnostics, button);
+            root.append(failure);
+            failure.hidden = false;
+            // The same controller finishes a visible arc before showing its failure.
+            if (ringElement().hasAttribute('hidden'))
+                cover.hidden = true;
+            else
+                controller.fail(() => {
+                    if (state === 'failed')
+                        cover.hidden = true;
+                });
+        },
+        recover() {
+            failure.remove();
+            if (state === 'failed' && !revealed) {
+                state = options.cover === false ? 'idle' : 'preparing';
+                if (options.cover === false)
+                    cover.hidden = true;
+                else
+                    controller.restore();
+            }
+        },
         updated(start = 0) {
             if (appliedUpdate)
                 return appliedUpdate;
@@ -179,7 +296,7 @@ export function installLaunchScreenRuntime() {
             const ring = ringElement();
             // A phase ending does not mean the cover is ready to retire. Keep the
             // real last sample until readiness or an explicit error owns the handoff.
-            if (!ring || revealed || retiring || !progress || progress.total <= 0)
+            if (revealed || retiring || appliedUpdate || !progress || progress.total <= 0)
                 return;
             if (!Number.isFinite(progress.loaded) || !Number.isFinite(progress.total))
                 return;
@@ -194,9 +311,11 @@ export function installLaunchScreenRuntime() {
         },
         complete,
         reveal() {
-            if (revealed)
+            if (revealed || state === 'failed')
                 return;
             revealed = true;
+            state = 'ready';
+            failure.remove();
             window.dispatchEvent(new Event('satin-launch-revealed'));
             retire(() => { });
         },
@@ -218,7 +337,7 @@ export function installLaunchScreenRuntime() {
             // spring, rather than leaving a cancelled completion targeted at 100.
             target = downloadTarget;
             const ring = ringElement();
-            const cover = document.getElementById('satin-launch-screen');
+            const cover = element('satin-launch-screen');
             if (ring && !ring.hasAttribute('hidden'))
                 start();
             for (const [element, duration] of [
@@ -227,7 +346,7 @@ export function installLaunchScreenRuntime() {
             ]) {
                 if (!element)
                     continue;
-                const opacity = Number(getComputedStyle(element).opacity);
+                const opacity = Number.parseFloat(getComputedStyle(element).opacity);
                 element.getAnimations().forEach(animation => animation.cancel());
                 if (Number.isFinite(opacity) && opacity < 1 && !element.hidden) {
                     void element
@@ -239,38 +358,47 @@ export function installLaunchScreenRuntime() {
                         .finished.catch(() => { });
                 }
             }
-            const screen = document.getElementById('satin-launch-screen');
+            const screen = element('satin-launch-screen');
             if (screen) {
                 screen.hidden = false;
                 screen.style.removeProperty('z-index');
             }
         },
     };
-    launchWindow.__SATIN_LAUNCH_SCREEN__ = controller;
+    launchWindow.__SATIN_PRELAUNCH__ = controller;
     return controller;
 }
+export function prelaunchController() {
+    const controller = window.__SATIN_PRELAUNCH__;
+    if (!controller || controller.version !== 1)
+        throw new Error('Satin pre-launch v1 bootstrap is missing.');
+    return controller;
+}
+export function showLaunchFailure(reason, title) {
+    prelaunchController().error(reason, title);
+}
 export function setLaunchScreen(visible) {
     if (visible) {
-        installLaunchScreenRuntime().restore();
+        prelaunchController().restore();
         return;
     }
-    installLaunchScreenRuntime().reveal();
+    prelaunchController().reveal();
 }
 export function setLaunchProgress(progress) {
     window.dispatchEvent(new CustomEvent('satin-launch-progress', { detail: progress }));
-    installLaunchScreenRuntime().progress(progress);
+    prelaunchController().progress(progress);
 }
 /** Complete a visible arc before a cold-update document replacement. */
 export function completeLaunchProgress() {
     if (typeof document === 'undefined' || typeof document.getElementById !== 'function')
         return Promise.resolve(true);
-    return installLaunchScreenRuntime().complete();
+    return prelaunchController().complete();
 }
 /** Confirm an applied update on its successor document before revealing the app. */
 export function showAppliedUpdate() {
-    return installLaunchScreenRuntime().updated();
+    return prelaunchController().updated();
 }
-/** Serialized after the declarative cover, before modules and their first paint. */
+/** Runs immediately after the inline environment, before application modules. */
 export function resumeAppliedUpdate(scope, buildId) {
     let ringStart = null;
     try {
@@ -309,5 +437,5 @@ export function resumeAppliedUpdate(scope, buildId) {
         }, { once: true });
     }
     if (ringStart !== null)
-        void window.__SATIN_LAUNCH_SCREEN__?.updated(ringStart);
+        void window.__SATIN_PRELAUNCH__?.updated(ringStart);
 }

package/dist/app/launchWatchdog.js

@@ -16,63 +16,34 @@ export function installLaunchWatchdog(budgetMs) {
             .filter(mark => mark.name.startsWith('satin-'));
         const stage = marks.at(-1)?.name ?? 'satin-document-head';
         console.error('[Satin launch]', reason, 'Last stage:', stage, recordedError);
-        const screen = document.createElement('section');
-        screen.id = 'satin-launch-error';
-        screen.setAttribute('role', 'alert');
-        screen.style.cssText =
-            'position:fixed;inset:0;z-index:20002;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;box-sizing:border-box;background:var(--satin-launch-background,#f2f2f7);color:var(--satin-launch-ink,#1c1c1e);font:17px/1.45 system-ui;text-align:center;pointer-events:auto';
-        const title = document.createElement('h1');
-        title.textContent = 'Unable to Open App';
-        title.style.cssText = 'font-size:24px;margin:0 0 12px';
-        const message = document.createElement('p');
-        message.textContent = reason;
-        message.style.maxWidth = '420px';
-        const reached = document.createElement('p');
-        reached.textContent = 'Last stage: ' + stage;
-        reached.style.cssText = 'font-size:13px;opacity:.65;overflow-wrap:anywhere';
-        const retry = document.createElement('button');
-        retry.textContent = 'Retry';
-        retry.style.cssText =
-            'font:600 17px system-ui;color:#007aff;background:transparent;border:0;padding:16px 32px;min-height:44px';
-        retry.onclick = () => {
-            const definition = window
-                .__SATIN_DEFINITION__;
-            try {
-                sessionStorage.setItem('satin-install-reset:' + (definition?.scope ?? '/'), '1');
-            }
-            catch {
-                // A reload can still join the worker after its own deadline.
-            }
-            location.reload();
-        };
-        screen.append(title, message, reached, retry);
-        (document.body ?? document.documentElement).append(screen);
-        if (!document.body) {
-            document.addEventListener('DOMContentLoaded', () => {
-                if (screen.isConnected)
-                    document.body?.append(screen);
-            }, { once: true });
-        }
-        const cover = document.getElementById('satin-launch-screen');
-        const controller = window.__SATIN_LAUNCH_SCREEN__;
-        const ring = document.getElementById('satin-launch-progress');
-        if (cover && ring && !ring.hasAttribute('hidden') && controller) {
-            // Put the failure underneath the cover until its visible arc completes.
-            screen.style.zIndex = '19999';
-            controller.fail(() => {
-                if (failed)
-                    screen.style.zIndex = '20002';
-            });
-        }
-        else if (cover)
-            cover.hidden = true;
+        const controller = window.__SATIN_PRELAUNCH__;
+        controller?.error(reason, 'Unable to Open App', undefined, 'Last stage: ' + stage);
         performance.mark('satin-launch-failed');
     };
     window.addEventListener('error', event => {
-        recordedError = event.message || 'Application script failed to load.';
-    });
+        const target = event.target;
+        if (target instanceof HTMLLinkElement && target.rel === 'stylesheet') {
+            target.dataset.satinStyleError = 'true';
+            showFailure('The app stylesheet failed to load. Please retry.');
+        }
+        else if (target instanceof HTMLScriptElement) {
+            showFailure('The application script failed to load. Please retry.');
+        }
+        else if (event instanceof ErrorEvent) {
+            recordedError = event.message || 'Application script failed to load.';
+            showFailure('Launch failed. ' + recordedError.split('\n')[0].slice(0, 160));
+        }
+    }, true);
+    document.addEventListener('load', event => {
+        const link = event.target;
+        if (link instanceof HTMLLinkElement && link.hasAttribute('data-satin-style')) {
+            link.media = link.getAttribute('data-satin-style') || 'all';
+            link.dataset.satinStyleReady = 'true';
+        }
+    }, true);
     window.addEventListener('unhandledrejection', event => {
         recordedError = event.reason instanceof Error ? event.reason.message : String(event.reason);
+        showFailure('Launch failed. ' + recordedError.split('\n')[0].slice(0, 160));
     });
     window.addEventListener('satin-glass-error', event => {
         const error = event.detail;
@@ -80,19 +51,8 @@ export function installLaunchWatchdog(budgetMs) {
         showFailure('Glass could not start: ' + error.code + '.');
     });
     const recover = () => {
-        const restoreCover = failed;
         failed = false;
-        document.getElementById('satin-launch-error')?.remove();
-        const cover = document.getElementById('satin-launch-screen');
-        // The runtime owns normal ring settlement and cover retirement. Only undo
-        // the cover hiding performed by this watchdog's own failure screen.
-        if (cover && restoreCover) {
-            const controller = window.__SATIN_LAUNCH_SCREEN__;
-            if (controller)
-                controller.restore();
-            else
-                cover.hidden = false;
-        }
+        window.__SATIN_PRELAUNCH__?.recover();
     };
     const receiveProgress = (progress) => {
         if (progress && (progress.loaded > lastBytes || (progress.activity ?? 0) > lastActivity)) {
@@ -178,7 +138,7 @@ export function installLaunchWatchdog(budgetMs) {
             // 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);
+                window.__SATIN_PRELAUNCH__?.progress(progress);
         }
     });
     // A client's worker messages are queued until DOMContentLoaded, and a bootstrap module that

package/dist/app/platformScripts.js

@@ -32,6 +32,17 @@ export function gateAppScripts(html) {
                 html.slice(firstScript.index, gate.index) +
                 html.slice(gate.index + gate[0].length);
     }
+    // Fetch app styles without blocking the independent head environment. The
+    // head's capture listener activates each stylesheet only after it loads.
+    html = html.replace(/<link\b[^>]*>/gi, tag => {
+        const attributes = scriptAttributes(tag.slice(5, -1));
+        if (attributes.get('rel')?.value !== 'stylesheet')
+            return tag;
+        const media = attributes.get('media')?.value ?? 'all';
+        return tag
+            .replace(/\smedia\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/i, '')
+            .replace(/>$/, ` media="not all" data-satin-style="${media.replaceAll('"', '&quot;')}">`);
+    });
     return html.replace(scriptPattern, (original, attributes) => {
         if (attributes === undefined)
             return original;

package/dist/app/styles.d.ts

@@ -0,0 +1,3 @@
+import { type Plugin } from 'vite';
+export declare function frameworkStylesheet(base: string): string;
+export declare function includedStyles(): Plugin;

package/dist/app/styles.js

@@ -0,0 +1,42 @@
+import { fileURLToPath } from 'node:url';
+import { normalizePath } from 'vite';
+const stylesheet = normalizePath(fileURLToPath(new URL('../styles.css', import.meta.url)));
+const legacyImport = '\0satin:included-styles';
+const stylesheetUrl = '/@satin/framework.css';
+export function frameworkStylesheet(base) {
+    // Keep this a real stylesheet link: WebKit must load it before first paint.
+    // Vite processes the link during builds and precaches the resulting CSS asset.
+    return `<link rel="stylesheet" href="${base}${stylesheetUrl.slice(1)}">`;
+}
+export function includedStyles() {
+    let serving = false;
+    let base = '/';
+    return {
+        name: 'satin:included-styles',
+        enforce: 'pre',
+        configResolved(config) {
+            serving = config.command === 'serve';
+            base = config.base;
+        },
+        resolveId(id, importer) {
+            // Resolve a URL rather than embedding a filesystem path in HTML. Vite's
+            // build resolver does not URL-decode package paths such as @scope or spaces.
+            const queryAt = id.indexOf('?');
+            const path = queryAt < 0 ? id : id.slice(0, queryAt);
+            if (path === stylesheetUrl || path === base + stylesheetUrl.slice(1))
+                return stylesheet + (queryAt < 0 ? '' : id.slice(queryAt));
+            // In production Vite deduplicates the link and import in its CSS graph.
+            // In dev a JS CSS import would add a second <style> after the app CSS.
+            // The link already owns loading and CSS HMR, so old side-effect imports
+            // are empty modules. Leave CSS @imports and explicit ?inline/?url uses alone.
+            if (!serving || !importer || /\.(?:css|scss|sass|less|styl)(?:\?|$)/.test(importer))
+                return;
+            if (id === '@satinhq/kit/styles.css' || normalizePath(id) === stylesheet)
+                return legacyImport;
+        },
+        load(id) {
+            if (id === legacyImport)
+                return 'export {}';
+        },
+    };
+}

package/dist/app/viewportValue.d.ts

@@ -1,4 +1,5 @@
-/** The viewport fitting policy selected before rendering an app. */
+/** How the app fits the screen around the notch and home indicator. `adaptive` picks a fit per
+ * device before the app renders. */
 export type ViewportFitPolicy = 'adaptive' | 'auto' | 'cover' | 'contain';
 export declare const SATIN_VIEWPORT = "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover";
 /** Self-contained so the generated head and runtime use exactly the same rule. */

package/dist/app/vite.d.ts

@@ -1,6 +1,8 @@
 import type { Plugin } from 'vite';
 import { type AppDefinition } from './definition.js';
 import { type AppFixture } from './head.js';
+/** Build options for `satinApp`: a custom install page, strict glass, the development menu and a
+ * media probe. */
 export interface SatinAppOptions {
     /** Output-relative bundled probe for remote-only media. Default: first emitted media
      * file. Proves this deployment server only, never the remote source or playback. */
@@ -22,6 +24,8 @@ export interface SatinAppOptions {
     readonly installPage?: string;
 }
 export declare function platformBuildWarning(app: AppDefinition, production: boolean): string | undefined;
+/** Generates the app shell and loads framework CSS once, before app styles.
+ * The stylesheet participates in Vite CSS HMR and builds; pre-launch paints independently. */
 export declare function satinApp(app: AppDefinition, options?: SatinAppOptions): Plugin[];
 /** Multi-install lab fixture only. Production apps use satinApp(app). */
 export declare function satinAppFixtures(input: readonly AppFixture[], options?: SatinAppOptions): Plugin[];

package/dist/app/vite.js

@@ -1,3 +1,4 @@
+import { inlinePolicySources } from './inlineCSP.js';
 import { bundledLicenseNotices, renderNotices } from '../acknowledgements/bundledNotices.js';
 import { serveStaticFile } from '../server.js';
 import { mediaTypes } from './mediaTypes.js';
@@ -5,8 +6,7 @@ import { extname } from 'node:path';
 import { imageAssets } from '../image/vite.js';
 import { generateAppIcons, generateStartupImage } from './icons.js';
 import { generateWebClipProfile } from './mdm.js';
-import { launchScreenMarkup } from './launchScreen.js';
-import { resumeAppliedUpdate } from './launchScreenRuntime.js';
+import { launchScreenMarkup, prelaunchCSS } from './launchScreen.js';
 import { startupImages } from './startup.js';
 import { access, readFile, writeFile, mkdir } from 'node:fs/promises';
 import { installPage, installRouteForBase } from './install.js';
@@ -19,6 +19,7 @@ import { deploymentExpectation } from './deployment.js';
 import { gateAppScripts } from './platformScripts.js';
 import { devMenuBuild } from '../dev-menu/build.js';
 import { createBuildInfo } from './buildInfoBuild.js';
+import { frameworkStylesheet, includedStyles } from './styles.js';
 export function platformBuildWarning(app, production) {
     if (!production || app.platforms !== 'all')
         return undefined;
@@ -26,6 +27,8 @@ export function platformBuildWarning(app, production) {
         'desktop, Chromium and Gecko browsers to execute your app. ' +
         "Satin only supports iPhone/iPad WebKit. Restore platforms: 'ios' before shipping.");
 }
+/** Generates the app shell and loads framework CSS once, before app styles.
+ * The stylesheet participates in Vite CSS HMR and builds; pre-launch paints independently. */
 export function satinApp(app, options = {}) {
     return satinAppFixtures([{ app, query: {} }], options);
 }
@@ -52,7 +55,6 @@ export function satinAppFixtures(input, options = {}) {
     let output = '';
     let publicDirectory = '';
     const covers = new Map();
-    const launchIconPreloads = new Set();
     const generatedIcons = new Map();
     const startupIcons = new Map();
     const files = Object.assign({}, ...fixtures.map(({ app, display }) => Object.fromEntries(Object.entries(appManifestFiles(app, appManifestStem(app))).map(([name, source]) => [
@@ -96,7 +98,7 @@ export function satinAppFixtures(input, options = {}) {
                     "import { createElement } from 'react'",
                     "import { createRoot } from 'react-dom/client'",
                     `import Page from ${page}`,
-                    "createRoot(document.getElementById('satin-install-guide')).render(createElement(Page))",
+                    "createRoot(document.getElementById('satin-install-guide'), { onUncaughtError: error => window.__SATIN_PRELAUNCH__.error(String(error), 'Install Page Failed') }).render(createElement(Page))",
                 ].join('\n');
             },
             writeBundle() {
@@ -198,7 +200,6 @@ export function satinAppFixtures(input, options = {}) {
                     const inlineIcon = `data:${mime};base64,${iconBytes.toString('base64')}`;
                     // Even inline images enter WebKit's image loader asynchronously. Start
                     // it in the head so the body cover's first paint already has its icon.
-                    launchIconPreloads.add(`<link rel="preload" as="image" href="${inlineIcon}">`);
                     covers.set(app.id, launchScreenMarkup({
                         ...app,
                         launchScreen: {
@@ -230,23 +231,7 @@ export function satinAppFixtures(input, options = {}) {
                     const head = /<head\b[^>]*>(?:\s*<meta\s+charset\s*=\s*[^>]+>)?/i;
                     if (!head.test(html))
                         throw new Error('Satin app definition requires an index.html head element.');
-                    const coverData = JSON.stringify(fixtures.map(f => ({ query: f.query, html: covers.get(f.app.id) }))).replaceAll('<', '\\u003c');
-                    // Single-target apps get real parser markup, including the inline icon.
-                    // Only the lab's query-selected fixtures need document.write selection.
-                    const cover = fixtures.length === 1 ? covers.get(fixtures[0].app.id) : '';
-                    const selectCover = fixtures.length === 1
-                        ? ''
-                        : `
-            const q = new URLSearchParams(location.search);
-            const f = ${coverData}.find(f => Object.entries(f.query).every(([k,v]) => q.get(k) === v));
-            document.write(f.html);`;
-                    html = html.replace(/<body\b[^>]*>/i, opening => `${opening}${cover}<script id="satin-launch-cover">(() => {
-              if (window.__SATIN_PLATFORM_BLOCKED__ !== false) return;
-              ${selectCover}
-              (${resumeAppliedUpdate.toString()})(window.__SATIN_DEFINITION__.scope,
-                window.__SATIN_DEFINITION__.updateProfile === 'release' ? ${JSON.stringify(building ? buildInfo?.appBuildId : undefined)} : undefined);
-            })();</script>`);
-                    return html.replace(head, opening => `${opening}\n${[...launchIconPreloads].join('')}\n${generateAppHead(fixtures, base, production, !building)}`);
+                    return html.replace(head, opening => `${opening}\n${generateAppHead(fixtures, base, production, !building, covers, building ? buildInfo?.appBuildId : undefined)}\n${frameworkStylesheet(base)}`);
                 },
             },
             async closeBundle() {
@@ -265,7 +250,10 @@ export function satinAppFixtures(input, options = {}) {
                 await mkdir(resolve(output, installRouteForBase(app, base).slice(base.length)), {
                     recursive: true,
                 });
-                await writeFile(resolve(output, installRouteForBase(app, base).slice(base.length), 'index.html'), installPage(app, 'install', base, { customPage: customInstallUrl }));
+                await writeFile(resolve(output, installRouteForBase(app, base).slice(base.length), 'index.html'), installPage(app, 'install', base, {
+                    customPage: customInstallUrl,
+                    cover: covers.get(app.id),
+                }));
                 if (app.scope !== base) {
                     const html = await readFile(resolve(output, 'index.html'), 'utf8');
                     await writeFile(resolve(output, app.scope.slice(base.length), 'index.html'), html);
@@ -342,7 +330,7 @@ export function satinAppFixtures(input, options = {}) {
                         const customPage = kind === 'install' && options.installPage
                             ? base + '@id/__x00__' + CUSTOM_INSTALL_ID
                             : undefined;
-                        let html = installPage(app, kind, base, { customPage });
+                        let html = installPage(app, kind, base, { customPage, cover: covers.get(app.id) });
                         // In dev the custom page is served through Vite (its client and React's refresh).
                         if (customPage)
                             html = await server.transformIndexHtml(path, html);
@@ -382,6 +370,7 @@ export function satinAppFixtures(input, options = {}) {
                 });
             },
         },
+        includedStyles(),
         {
             name: 'satin:platform-script-gate',
             transformIndexHtml: {
@@ -432,6 +421,15 @@ export function satinAppFixtures(input, options = {}) {
                     for (const { app } of fixtures) {
                         await validateBuiltDeployment(output, deploymentExpectation(app, base));
                     }
+                    const policies = {};
+                    for (const path of [
+                        fixtures[0].app.startRoute,
+                        installRouteForBase(fixtures[0].app, base) + '/',
+                    ]) {
+                        const file = resolve(output, path.slice(base.length), 'index.html');
+                        policies[path] = inlinePolicySources(await readFile(file, 'utf8'), prelaunchCSS);
+                    }
+                    await writeFile(resolve(output, 'satin-csp.json'), JSON.stringify({ version: 1, policies }, null, 2));
                     console.info(`Deploy dist/ at ${base}, then run satin check <url>`);
                 },
             },