@swiftbrowser/web 0.6.6 → 0.7.0

package/node/dist/node/config.d.ts

@@ -14,6 +14,7 @@
  */
 import type { UserConfig } from 'vite';
 import { type SiteLayout, type SitePageMode } from '../plugins/site-layout.js';
+import { type PlaygroundOptions } from '../plugins/playground.js';
 import { type AppSpec } from './apps.js';
 export interface SiteOptions {
     apps: AppSpec[];
@@ -40,6 +41,11 @@ export interface SiteOptions {
      * Default `auto`; `buildSite` builds an `app` layout site with `device`.
      */
     pageMode?: SitePageMode;
+    /**
+     * Adds the playground page (plugins/playground.ts), which compiles Swift in
+     * the browser. This repository's site only.
+     */
+    playground?: PlaygroundOptions;
 }
 /** The layout `options` resolve to (see `SiteOptions.layout`). */
 export declare function siteLayout(options: Pick<SiteOptions, 'apps' | 'sites' | 'layout'>): SiteLayout;

package/node/dist/node/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAKvC,OAAO,EAAmD,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhI,OAAO,EAAmC,KAAK,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sGAAsG;IACtG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB;AAED,kEAAkE;AAClE,wBAAgB,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG,UAAU,CAG9F;AAED,qGAAqG;AACrG,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oHAAoH;IACpH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,yGAAyG;IACzG,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,0GAA0G;IAC1G,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAOD;;;;;GAKG;AACH,wBAAgB,OAAO,IAAI,MAAM,CAoBhC;AAED,gDAAgD;AAChD,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,OAAO,EAAE,GAAG,UAAU,EAAE,CAWnE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,UAAU,CAuDjE"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAKvC,OAAO,EAAmD,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAChI,OAAO,EAA0B,KAAK,iBAAiB,EAAwD,MAAM,0BAA0B,CAAC;AAEhJ,OAAO,EAAmC,KAAK,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sGAAsG;IACtG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,kEAAkE;AAClE,wBAAgB,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG,UAAU,CAG9F;AAED,qGAAqG;AACrG,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oHAAoH;IACpH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,yGAAyG;IACzG,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,0GAA0G;IAC1G,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAOD;;;;;GAKG;AACH,wBAAgB,OAAO,IAAI,MAAM,CAoBhC;AAED,gDAAgD;AAChD,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,OAAO,EAAE,GAAG,UAAU,EAAE,CAWnE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,UAAU,CA4DjE"}

package/node/dist/node/config.js

@@ -20,6 +20,7 @@ import { assetCatalogs } from '../plugins/asset-catalogs.js';
 import { bundleResources } from '../plugins/bundle-resources.js';
 import { includedSites, readSiteApps } from '../plugins/included-sites.js';
 import { ROOT_START_URL, siteLayoutPlugin } from '../plugins/site-layout.js';
+import { PLAYGROUND_ASSETS_PATH, playgroundAliases, playgroundAssets, playgroundFiles } from '../plugins/playground.js';
 import { swiftWasm } from '../plugins/swift-wasm.js';
 import { displayNameOf, validateAppSpecs } from './apps.js';
 /** The layout `options` resolve to (see `SiteOptions.layout`). */
@@ -110,6 +111,8 @@ export function createViteConfig(options) {
     const pages = { app: path.resolve(root, 'app/index.html') };
     if (layout === 'landing')
         pages['landing'] = path.resolve(root, 'index.html');
+    if (options.playground)
+        pages['playground'] = path.resolve(root, 'playground/index.html');
     return {
         root,
         plugins: [
@@ -119,7 +122,9 @@ export function createViteConfig(options) {
             bundleResources(apps),
             includedSites(landing, sites),
             siteLayoutPlugin(site, main),
+            ...(options.playground ? [playgroundAssets(options.playground)] : []),
         ],
+        ...(options.playground ? { resolve: { alias: playgroundAliases(path.resolve(root, '..')) }, worker: { format: 'es' } } : {}),
         // The landing page at `/` and the app at `/app/` (or the app alone). `mpa`
         // keeps the dev server from answering unknown URLs with a page.
         appType: 'mpa',
@@ -130,6 +135,8 @@ export function createViteConfig(options) {
             __SB_COMMIT__: JSON.stringify(options.commit ?? 'dev'),
             __SB_BRANCH__: JSON.stringify(options.branch ?? ''),
             __SB_BUILT_AT__: JSON.stringify(new Date().toISOString()),
+            __SB_PLAYGROUND_ASSETS__: JSON.stringify(options.playground?.assetsUrl ?? PLAYGROUND_ASSETS_PATH),
+            __SB_PLAYGROUND_FILES__: JSON.stringify(options.playground ? playgroundFiles(options.playground) : null),
         },
         server: {
             port: 5173,

package/node/dist/node/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAqD,MAAM,2BAA2B,CAAC;AAChI,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAgB,MAAM,WAAW,CAAC;AA6B1E,kEAAkE;AAClE,MAAM,UAAU,UAAU,CAAC,OAAuD;IAChF,IAAI,OAAO,CAAC,MAAM;QAAE,OAAO,OAAO,CAAC,MAAM,CAAC;IAC1C,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;AACjF,CAAC;AAmBD,iDAAiD;AACjD,MAAM,YAAY,GAAG,mBAAmB,CAAC;AAEzC,IAAI,UAA8B,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,UAAU,OAAO;IACrB,IAAI,UAAU;QAAE,OAAO,UAAU,CAAC;IAClC,IAAI,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IACvD,SAAS,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;QAC5C,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC;gBACH,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAsB,CAAC;gBACxE,IAAI,GAAG,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;oBAC9B,UAAU,GAAG,GAAG,CAAC;oBACjB,OAAO,GAAG,CAAC;gBACb,CAAC;YACH,CAAC;YAAC,MAAM,CAAC;gBACP,0BAA0B;YAC5B,CAAC;QACH,CAAC;QACD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QACjC,IAAI,MAAM,KAAK,GAAG;YAAE,MAAM,IAAI,KAAK,CAAC,sBAAsB,YAAY,uBAAuB,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QAChH,GAAG,GAAG,MAAM,CAAC;IACf,CAAC;AACH,CAAC;AAED,gDAAgD;AAChD,MAAM,UAAU,WAAW,CAAC,KAAyB;IACnD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACxB,MAAM,KAAK,GAAe,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;QAChF,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS;YAAE,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACzE,IAAI,IAAI,CAAC,IAAI;YAAE,KAAK,CAAC,IAAI,GAAG,cAAc,IAAI,CAAC,IAAI,WAAW,CAAC;QAC/D,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;YAAE,KAAK,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAClE,IAAI,IAAI,CAAC,UAAU,EAAE,MAAM;YAAE,KAAK,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,SAAS;YAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACrD,IAAI,IAAI,CAAC,YAAY,EAAE,MAAM;YAAE,KAAK,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3E,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAC,OAAoB;IACnD,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAC1B,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACpE,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,IAAI,GAAG,EAAU,CAAC;IAChC,KAAK,MAAM,GAAG,IAAI,OAAO,EAAE,CAAC;QAC1B,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,sBAAsB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QACjH,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC;IACD,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC;IACvD,IAAI,UAAU,KAAK,SAAS;QAAE,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;IAC/E,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,UAAU,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,eAAe,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,0BAA0B,CAAC,CAAC;IACvI,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,UAAU,CAAE,CAAC;IAC1D,MAAM,IAAI,GAAa,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,MAAM,EAAE,CAAC;IACtH,4DAA4D;IAC5D,MAAM,eAAe,GAAG,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7E,MAAM,KAAK,GAA2B,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,gBAAgB,CAAC,EAAE,CAAC;IACpF,IAAI,MAAM,KAAK,SAAS;QAAE,KAAK,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IAC9E,OAAO;QACL,IAAI;QACJ,OAAO,EAAE;YACP,SAAS,CAAC,IAAI,CAAC;YACf,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,eAAe,CAAC;YAC7C,aAAa,CAAC,IAAI,CAAC;YACnB,eAAe,CAAC,IAAI,CAAC;YACrB,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;YAC7B,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC;SAC7B;QACD,2EAA2E;QAC3E,gEAAgE;QAChE,OAAO,EAAE,KAAK;QACd,MAAM,EAAE;YACN,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;YACpC,kBAAkB,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;YACnD,gBAAgB,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/C,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,IAAI,KAAK,CAAC;YACtD,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC;YACnD,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;SAC1D;QACD,MAAM,EAAE;YACN,IAAI,EAAE,IAAI;YACV,UAAU,EAAE,IAAI;SACjB;QACD,KAAK,EAAE;YACL,MAAM,EAAE,QAAQ;YAChB,SAAS,EAAE,IAAI;YACf,aAAa,EAAE;gBACb,KAAK,EAAE,KAAK;aACb;SACF;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../config.ts"],"names":[],"mappings":"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"}

package/node/dist/plugins/playground.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The playground page (playground/index.html): Swift compiled in the browser
+ * by the WebAssembly compiler (docs/in-browser-compiler.md, Milestone 3).
+ * Only this repository's site has it: its code imports
+ * @swiftbrowser/wasm-compiler and the CLI's browser entry from their sources
+ * (the aliases below). playground/build-assets.ts writes the assets and
+ * their manifest to a directory; the build reads the manifest, and the page
+ * fetches the files from /playground-assets/, where the dev server serves
+ * that directory, or, deployed, from where they were uploaded
+ * (playground/publish-assets.mjs).
+ */
+import type { Plugin } from 'vite';
+import { type PlaygroundFiles } from '../src/playground/files.js';
+export interface PlaygroundOptions {
+    /** The directory build-assets wrote: its manifest, and the files the dev server serves at /playground-assets/. */
+    assetsDir: string;
+    /** Where the page fetches the assets from; default /playground-assets/. */
+    assetsUrl?: string;
+}
+/** The downloads the assets' manifest names. */
+export declare function playgroundFiles(options: PlaygroundOptions): PlaygroundFiles;
+export declare const PLAYGROUND_ASSETS_PATH = "/playground-assets/";
+/** The source aliases of the playground's imports, from the repository root. */
+export declare function playgroundAliases(repoRoot: string): Record<string, string>;
+export declare function playgroundAssets(options: PlaygroundOptions): Plugin;
+//# sourceMappingURL=playground.d.ts.map

package/node/dist/plugins/playground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../plugins/playground.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AACnC,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,kHAAkH;IAClH,SAAS,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,gDAAgD;AAChD,wBAAgB,eAAe,CAAC,OAAO,EAAE,iBAAiB,GAAG,eAAe,CAI3E;AAED,eAAO,MAAM,sBAAsB,wBAAwB,CAAC;AAE5D,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1E;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,GAAG,MAAM,CAcnE"}

package/node/dist/plugins/playground.js

@@ -0,0 +1,46 @@
+/**
+ * The playground page (playground/index.html): Swift compiled in the browser
+ * by the WebAssembly compiler (docs/in-browser-compiler.md, Milestone 3).
+ * Only this repository's site has it: its code imports
+ * @swiftbrowser/wasm-compiler and the CLI's browser entry from their sources
+ * (the aliases below). playground/build-assets.ts writes the assets and
+ * their manifest to a directory; the build reads the manifest, and the page
+ * fetches the files from /playground-assets/, where the dev server serves
+ * that directory, or, deployed, from where they were uploaded
+ * (playground/publish-assets.mjs).
+ */
+import { createReadStream, existsSync, readFileSync, statSync } from 'node:fs';
+import path from 'node:path';
+import { PLAYGROUND_MANIFEST } from '../src/playground/files.js';
+/** The downloads the assets' manifest names. */
+export function playgroundFiles(options) {
+    const manifest = path.join(options.assetsDir, PLAYGROUND_MANIFEST);
+    if (!existsSync(manifest))
+        throw new Error(`${manifest} is missing: build the playground's assets (playground/build-assets.ts)`);
+    return JSON.parse(readFileSync(manifest, 'utf8'));
+}
+export const PLAYGROUND_ASSETS_PATH = '/playground-assets/';
+/** The source aliases of the playground's imports, from the repository root. */
+export function playgroundAliases(repoRoot) {
+    return {
+        '@swiftbrowser/wasm-compiler': path.join(repoRoot, 'packages/wasm-compiler/src/index.ts'),
+        '@swiftbrowser/cli/browser': path.join(repoRoot, 'packages/cli/src/browser.ts'),
+    };
+}
+export function playgroundAssets(options) {
+    return {
+        name: 'swiftbrowser-playground-assets',
+        configureServer(server) {
+            const dir = path.resolve(options.assetsDir);
+            server.middlewares.use(PLAYGROUND_ASSETS_PATH, (req, res, next) => {
+                const file = path.join(dir, decodeURIComponent(new URL(req.url ?? '/', 'http://x').pathname));
+                if (!file.startsWith(dir) || !existsSync(file) || statSync(file).isDirectory())
+                    return next();
+                res.setHeader('Content-Type', file.endsWith('.gz') ? 'application/gzip' : 'application/octet-stream');
+                res.setHeader('Content-Length', statSync(file).size);
+                createReadStream(file).pipe(res);
+            });
+        },
+    };
+}
+//# sourceMappingURL=playground.js.map

package/node/dist/plugins/playground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.js","sourceRoot":"","sources":["../../../plugins/playground.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,mBAAmB,EAAwB,MAAM,4BAA4B,CAAC;AASvF,gDAAgD;AAChD,MAAM,UAAU,eAAe,CAAC,OAA0B;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC;IACnE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,GAAG,QAAQ,yEAAyE,CAAC,CAAC;IACjI,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAoB,CAAC;AACvE,CAAC;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,qBAAqB,CAAC;AAE5D,gFAAgF;AAChF,MAAM,UAAU,iBAAiB,CAAC,QAAgB;IAChD,OAAO;QACL,6BAA6B,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,qCAAqC,CAAC;QACzF,2BAA2B,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,6BAA6B,CAAC;KAChF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,OAA0B;IACzD,OAAO;QACL,IAAI,EAAE,gCAAgC;QACtC,eAAe,CAAC,MAAM;YACpB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAC5C,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,sBAAsB,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;gBAChE,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,kBAAkB,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAC9F,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;oBAAE,OAAO,IAAI,EAAE,CAAC;gBAC9F,GAAG,CAAC,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC;gBACtG,GAAG,CAAC,SAAS,CAAC,gBAAgB,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;gBACrD,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC;QACL,CAAC;KACF,CAAC;AACJ,CAAC"}

package/node/dist/src/playground/files.d.ts

@@ -0,0 +1,12 @@
+export interface PlaygroundFiles {
+    /** The compiler (`swift-frontend-<hash>.wasm.gz`). */
+    frontend: string;
+    /** The linker (`wasm-ld-<hash>.wasm.gz`). */
+    linker: string;
+    /** The SDK and kit files, ICU data and module cache (`playground-<hash>.pack.gz`). */
+    pack: string;
+    /** The macro plugins by the module whose macros they expand. */
+    plugins: Record<string, string>;
+}
+export declare const PLAYGROUND_MANIFEST = "assets.json";
+//# sourceMappingURL=files.d.ts.map

package/node/dist/src/playground/files.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"files.d.ts","sourceRoot":"","sources":["../../../../src/playground/files.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,sDAAsD;IACtD,QAAQ,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,IAAI,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AAED,eAAO,MAAM,mBAAmB,gBAAgB,CAAC"}

package/node/dist/src/playground/files.js

@@ -0,0 +1,7 @@
+// The playground's downloads by role, as playground/build-assets.ts names
+// them in assets.json: gzip files named by a hash of their contents, so any
+// cache may keep them forever and a new build is new names. The site's
+// build reads the manifest (plugins/playground.ts) and the page fetches
+// these names from the assets' base URL.
+export const PLAYGROUND_MANIFEST = 'assets.json';
+//# sourceMappingURL=files.js.map

package/node/dist/src/playground/files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"files.js","sourceRoot":"","sources":["../../../../src/playground/files.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,4EAA4E;AAC5E,uEAAuE;AACvE,wEAAwE;AACxE,yCAAyC;AAazC,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {
@@ -41,8 +41,9 @@
     "build:node": "tsc -p tsconfig.node-build.json",
     "preview": "vite preview",
     "test:e2e": "playwright test",
-    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p e2e/tsconfig.json && tsc --noEmit -p tsconfig.node.json && tsc --noEmit -p tsconfig.node-build.json",
-    "test:unit": "vitest run"
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p e2e/tsconfig.json && tsc --noEmit -p playground/tsconfig.json && tsc --noEmit -p tsconfig.node.json && tsc --noEmit -p tsconfig.node-build.json",
+    "test:unit": "vitest run",
+    "playground:assets": "esbuild playground/build-assets.ts --bundle --platform=node --format=esm --packages=external --alias:@swiftbrowser/wasm-compiler=../packages/wasm-compiler/src/index.ts --alias:@swiftbrowser/cli/browser=../packages/cli/src/browser.ts --outfile=node_modules/.playground/build-assets.mjs --log-level=warning && node --stack-size=65500 node_modules/.playground/build-assets.mjs"
   },
   "dependencies": {
     "@bjorn3/browser_wasi_shim": "^0.4.2",

package/plugins/playground.ts

@@ -0,0 +1,56 @@
+/**
+ * The playground page (playground/index.html): Swift compiled in the browser
+ * by the WebAssembly compiler (docs/in-browser-compiler.md, Milestone 3).
+ * Only this repository's site has it: its code imports
+ * @swiftbrowser/wasm-compiler and the CLI's browser entry from their sources
+ * (the aliases below). playground/build-assets.ts writes the assets and
+ * their manifest to a directory; the build reads the manifest, and the page
+ * fetches the files from /playground-assets/, where the dev server serves
+ * that directory, or, deployed, from where they were uploaded
+ * (playground/publish-assets.mjs).
+ */
+
+import { createReadStream, existsSync, readFileSync, statSync } from 'node:fs';
+import path from 'node:path';
+import type { Plugin } from 'vite';
+import { PLAYGROUND_MANIFEST, type PlaygroundFiles } from '../src/playground/files.js';
+
+export interface PlaygroundOptions {
+  /** The directory build-assets wrote: its manifest, and the files the dev server serves at /playground-assets/. */
+  assetsDir: string;
+  /** Where the page fetches the assets from; default /playground-assets/. */
+  assetsUrl?: string;
+}
+
+/** The downloads the assets' manifest names. */
+export function playgroundFiles(options: PlaygroundOptions): PlaygroundFiles {
+  const manifest = path.join(options.assetsDir, PLAYGROUND_MANIFEST);
+  if (!existsSync(manifest)) throw new Error(`${manifest} is missing: build the playground's assets (playground/build-assets.ts)`);
+  return JSON.parse(readFileSync(manifest, 'utf8')) as PlaygroundFiles;
+}
+
+export const PLAYGROUND_ASSETS_PATH = '/playground-assets/';
+
+/** The source aliases of the playground's imports, from the repository root. */
+export function playgroundAliases(repoRoot: string): Record<string, string> {
+  return {
+    '@swiftbrowser/wasm-compiler': path.join(repoRoot, 'packages/wasm-compiler/src/index.ts'),
+    '@swiftbrowser/cli/browser': path.join(repoRoot, 'packages/cli/src/browser.ts'),
+  };
+}
+
+export function playgroundAssets(options: PlaygroundOptions): Plugin {
+  return {
+    name: 'swiftbrowser-playground-assets',
+    configureServer(server) {
+      const dir = path.resolve(options.assetsDir);
+      server.middlewares.use(PLAYGROUND_ASSETS_PATH, (req, res, next) => {
+        const file = path.join(dir, decodeURIComponent(new URL(req.url ?? '/', 'http://x').pathname));
+        if (!file.startsWith(dir) || !existsSync(file) || statSync(file).isDirectory()) return next();
+        res.setHeader('Content-Type', file.endsWith('.gz') ? 'application/gzip' : 'application/octet-stream');
+        res.setHeader('Content-Length', statSync(file).size);
+        createReadStream(file).pipe(res);
+      });
+    },
+  };
+}

package/src/main.ts

@@ -567,7 +567,11 @@ async function boot(): Promise<void> {
     return;
   }
 
-  const url = `${import.meta.env.BASE_URL}${requestedApp}.wasm`;
+  // The module the page runs: the app's, or one compiled in this browser
+  // (`?module=` a blob: URL, which only this origin can make; the playground
+  // page passes its compiler's output this way).
+  const compiled = params.get('module');
+  const url = compiled?.startsWith('blob:') ? compiled : `${import.meta.env.BASE_URL}${requestedApp}.wasm`;
   appName.textContent = `Loading ${requestedApp}…`;
   device.dataset['state'] = 'loading';
   const env = launchEnvironment();

package/src/pinch.ts

@@ -0,0 +1,324 @@
+/**
+ * Two-finger gestures: `MagnifyGesture` and `RotateGesture` (and their iOS 13
+ * forms). A `gesture` element whose props set `magnify` or `rotate` gets
+ * `data-sb-pinch` (renderer.ts) and these pinch sources:
+ *
+ * - two touch (or pen) pointers on it: the scale is the distance between them
+ *   over the distance when the second came down, the rotation the turn of the
+ *   line between them;
+ * - a trackpad pinch, which Chrome, Edge and Firefox report as `wheel` events
+ *   with `ctrlKey` (a scale only);
+ * - Safari's `gesturestart` / `gesturechange` / `gestureend` on a computer
+ *   (scale and rotation). On a touch screen Safari sends them alongside the
+ *   pointers, so there they only stop the page zooming.
+ *
+ * The gesture begins once the scale has moved `minimumScaleDelta` (with
+ * `magnify`) or the angle `minimumAngleDelta` degrees (with `rotate`), then
+ * sends `pinch` events: `began`, `changed` (one per animation frame) and
+ * `ended`, or `cancelled` when the browser takes a pointer away
+ * (docs/ops-protocol.md, "Pinch"). The single-pointer gestures of the same
+ * element (a drag) carry on beside it, as SwiftUI's simultaneous gestures do.
+ */
+
+import type { DragPhase, ElementId, PinchEvent } from './protocol';
+
+export interface PinchHost {
+  readonly root: HTMLElement;
+  send(event: PinchEvent): void;
+  nodeOf(id: ElementId): { props: Record<string, unknown> } | undefined;
+}
+
+/** The element a pinch is on and its thresholds. */
+interface Target {
+  el: HTMLElement;
+  id: ElementId;
+  magnify: boolean;
+  rotate: boolean;
+  minScale: number;
+  minAngle: number;
+}
+
+/** A pinch in progress, from whichever source. */
+interface Pinch {
+  target: Target;
+  began: boolean;
+  scale: number;
+  /** Degrees, unwrapped (a full turn and more keeps counting). */
+  rotation: number;
+  startLocation: { x: number; y: number };
+  startAnchor: { x: number; y: number };
+  samples: { t: number; scale: number; rotation: number }[];
+  raf: number | null;
+}
+
+/** Two pointers on one element, and the pinch they drive once both are down. */
+interface PointerPinch {
+  target: Target;
+  points: Map<number, { x: number; y: number }>;
+  /** The two pointers' ids, distance and angle when the second came down. */
+  base: { a: number; b: number; distance: number; angle: number } | null;
+  /** The last raw angle (degrees), for unwrapping. */
+  lastAngle: number;
+  pinch: Pinch | null;
+}
+
+const WHEEL_END_MS = 150;
+const VELOCITY_WINDOW_MS = 100;
+/** How much one pixel of a ctrl+wheel pinch scales (Chrome sends small deltas per frame). */
+const WHEEL_SCALE_PER_PIXEL = 0.01;
+
+const round = (n: number, places = 4): number => {
+  const f = 10 ** places;
+  return Math.round(n * f) / f;
+};
+
+interface SafariGestureEvent extends UIEvent {
+  scale: number;
+  rotation: number;
+  clientX: number;
+  clientY: number;
+}
+
+export class PinchController {
+  private pointers: PointerPinch | null = null;
+  private wheel: { pinch: Pinch; timer: number } | null = null;
+  private safari: Pinch | null = null;
+  /** Safari on a computer sends gesture events for the trackpad; a touch screen sends them beside the pointers. */
+  private readonly safariGestures = typeof navigator !== 'undefined' && navigator.maxTouchPoints === 0;
+
+  constructor(private readonly host: PinchHost) {
+    const root = host.root;
+    root.addEventListener('pointerdown', this.onPointerDown, true);
+    root.addEventListener('wheel', this.onWheel, { capture: true, passive: false });
+    root.addEventListener('gesturestart', this.onGestureStart, true);
+    root.addEventListener('gesturechange', this.onGestureChange, true);
+    root.addEventListener('gestureend', this.onGestureEnd, true);
+  }
+
+  dispose(): void {
+    const root = this.host.root;
+    root.removeEventListener('pointerdown', this.onPointerDown, true);
+    root.removeEventListener('wheel', this.onWheel, true);
+    root.removeEventListener('gesturestart', this.onGestureStart, true);
+    root.removeEventListener('gesturechange', this.onGestureChange, true);
+    root.removeEventListener('gestureend', this.onGestureEnd, true);
+    this.stopPointers();
+    if (this.wheel) window.clearTimeout(this.wheel.timer);
+    this.wheel = null;
+    this.safari = null;
+  }
+
+  /** The innermost pinch gesture element at or above `node`, with its props. */
+  private targetAt(node: EventTarget | null): Target | null {
+    const start = node instanceof Element ? node : null;
+    const el = start?.closest<HTMLElement>('.sb-gesture[data-sb-pinch]') ?? null;
+    if (!el || !this.host.root.contains(el)) return null;
+    const id = Number(el.dataset['sbId']);
+    if (!Number.isInteger(id)) return null;
+    const props = this.host.nodeOf(id)?.props ?? {};
+    const magnify = props['magnify'] === true;
+    const rotate = props['rotate'] === true;
+    if (!magnify && !rotate) return null;
+    const minScale = typeof props['minimumScaleDelta'] === 'number' ? Math.max(0, props['minimumScaleDelta']) : 0.01;
+    const minAngle = typeof props['minimumAngleDelta'] === 'number' ? Math.max(0, props['minimumAngleDelta']) : 1;
+    return { el, id, magnify, rotate, minScale, minAngle };
+  }
+
+  private newPinch(target: Target, clientX: number, clientY: number): Pinch {
+    const rect = target.el.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    return {
+      target,
+      began: false,
+      scale: 1,
+      rotation: 0,
+      startLocation: { x: round(x, 2), y: round(y, 2) },
+      startAnchor: { x: round(rect.width > 0 ? x / rect.width : 0.5), y: round(rect.height > 0 ? y / rect.height : 0.5) },
+      samples: [],
+      raf: null,
+    };
+  }
+
+  /** Records a new scale and rotation; begins the gesture past its thresholds, else queues a `changed`. */
+  private update(pinch: Pinch, scale: number, rotation: number, time: number): void {
+    pinch.scale = scale;
+    pinch.rotation = rotation;
+    pinch.samples.push({ t: time, scale, rotation });
+    while (pinch.samples.length > 2 && time - pinch.samples[0]!.t > VELOCITY_WINDOW_MS) pinch.samples.shift();
+    const { target } = pinch;
+    if (!pinch.began) {
+      const scaled = target.magnify && Math.abs(scale - 1) >= target.minScale;
+      const turned = target.rotate && Math.abs(rotation) >= target.minAngle;
+      if (!scaled && !turned) return;
+      pinch.began = true;
+      this.send(pinch, 'began');
+      return;
+    }
+    if (pinch.raf !== null) return;
+    pinch.raf = requestAnimationFrame(() => {
+      pinch.raf = null;
+      this.send(pinch, 'changed');
+    });
+  }
+
+  /** Ends a pinch that began (a pinch below its thresholds sends nothing). */
+  private finish(pinch: Pinch, phase: 'ended' | 'cancelled'): void {
+    if (pinch.raf !== null) cancelAnimationFrame(pinch.raf);
+    pinch.raf = null;
+    if (pinch.began) this.send(pinch, phase);
+  }
+
+  private send(pinch: Pinch, phase: DragPhase): void {
+    const first = pinch.samples[0];
+    const last = pinch.samples[pinch.samples.length - 1];
+    const dt = first && last ? (last.t - first.t) / 1000 : 0;
+    const scaleVelocity = first && last && dt > 0 ? (last.scale - first.scale) / dt : 0;
+    const rotationVelocity = first && last && dt > 0 ? (last.rotation - first.rotation) / dt : 0;
+    this.host.send({
+      type: 'pinch',
+      id: pinch.target.id,
+      phase,
+      scale: round(pinch.scale),
+      rotation: round(pinch.rotation, 2),
+      scaleVelocity: round(scaleVelocity),
+      rotationVelocity: round(rotationVelocity, 2),
+      startLocation: pinch.startLocation,
+      startAnchor: pinch.startAnchor,
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Two pointers
+  // ---------------------------------------------------------------------------
+
+  private readonly onPointerDown = (event: PointerEvent): void => {
+    if (event.pointerType === 'mouse') return;
+    const target = this.targetAt(event.target);
+    if (!target) return;
+    let state = this.pointers;
+    if (state && state.target.el !== target.el) {
+      // A finger on another pinch element: only one pinch at a time.
+      if (state.points.size > 0) return;
+      this.stopPointers();
+      state = null;
+    }
+    if (!state) {
+      state = { target, points: new Map(), base: null, lastAngle: 0, pinch: null };
+      this.pointers = state;
+      window.addEventListener('pointermove', this.onPointerMove, true);
+      window.addEventListener('pointerup', this.onPointerUp, true);
+      window.addEventListener('pointercancel', this.onPointerCancel, true);
+    }
+    if (state.points.size >= 2) return;
+    state.points.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (state.points.size === 2) {
+      const [[a, pa], [b, pb]] = [...state.points.entries()] as [[number, { x: number; y: number }], [number, { x: number; y: number }]];
+      const distance = Math.hypot(pb.x - pa.x, pb.y - pa.y);
+      const angle = (Math.atan2(pb.y - pa.y, pb.x - pa.x) * 180) / Math.PI;
+      state.base = { a, b, distance: Math.max(distance, 1), angle };
+      state.lastAngle = angle;
+      state.pinch = this.newPinch(target, (pa.x + pb.x) / 2, (pa.y + pb.y) / 2);
+    }
+  };
+
+  private readonly onPointerMove = (event: PointerEvent): void => {
+    const state = this.pointers;
+    if (!state || !state.points.has(event.pointerId)) return;
+    state.points.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    const { base, pinch } = state;
+    if (!base || !pinch) return;
+    const pa = state.points.get(base.a);
+    const pb = state.points.get(base.b);
+    if (!pa || !pb) return;
+    const angle = (Math.atan2(pb.y - pa.y, pb.x - pa.x) * 180) / Math.PI;
+    // Unwrap across ±180° so a turn keeps counting.
+    let step = angle - state.lastAngle;
+    if (step > 180) step -= 360;
+    else if (step < -180) step += 360;
+    state.lastAngle = angle;
+    const rotation = pinch.rotation + step;
+    const scale = Math.hypot(pb.x - pa.x, pb.y - pa.y) / base.distance;
+    this.update(pinch, scale, rotation, event.timeStamp);
+  };
+
+  private readonly onPointerUp = (event: PointerEvent): void => this.liftPointer(event, 'ended');
+  private readonly onPointerCancel = (event: PointerEvent): void => this.liftPointer(event, 'cancelled');
+
+  /** One of the fingers lifted: the pinch ends; a new second finger starts another. */
+  private liftPointer(event: PointerEvent, phase: 'ended' | 'cancelled'): void {
+    const state = this.pointers;
+    if (!state || !state.points.has(event.pointerId)) return;
+    state.points.delete(event.pointerId);
+    if (state.pinch) this.finish(state.pinch, phase);
+    state.pinch = null;
+    state.base = null;
+    if (state.points.size === 0) this.stopPointers();
+  }
+
+  private stopPointers(): void {
+    if (this.pointers?.pinch) this.finish(this.pointers.pinch, 'cancelled');
+    this.pointers = null;
+    window.removeEventListener('pointermove', this.onPointerMove, true);
+    window.removeEventListener('pointerup', this.onPointerUp, true);
+    window.removeEventListener('pointercancel', this.onPointerCancel, true);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Trackpads
+  // ---------------------------------------------------------------------------
+
+  /** A trackpad pinch in Chrome, Edge and Firefox: a wheel with ctrl. */
+  private readonly onWheel = (event: WheelEvent): void => {
+    if (!event.ctrlKey || this.safari) return;
+    const current = this.wheel;
+    const target = current?.pinch.target ?? this.targetAt(event.target);
+    if (!target || !target.magnify) return;
+    // The page would zoom.
+    event.preventDefault();
+    let state = current;
+    if (!state) {
+      state = { pinch: this.newPinch(target, event.clientX, event.clientY), timer: 0 };
+      this.wheel = state;
+    } else {
+      window.clearTimeout(state.timer);
+    }
+    const pixels = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
+    const scale = state.pinch.scale * Math.exp(-pixels * WHEEL_SCALE_PER_PIXEL);
+    this.update(state.pinch, scale, 0, event.timeStamp);
+    const ending = state;
+    state.timer = window.setTimeout(() => {
+      if (this.wheel !== ending) return;
+      this.wheel = null;
+      this.finish(ending.pinch, 'ended');
+    }, WHEEL_END_MS);
+  };
+
+  /** Safari's own pinch and rotation events. */
+  private readonly onGestureStart = (event: Event): void => {
+    const target = this.targetAt(event.target);
+    if (!target) return;
+    // The page would zoom (on a touch screen too, where the pointers drive the pinch).
+    event.preventDefault();
+    if (!this.safariGestures) return;
+    const gesture = event as SafariGestureEvent;
+    this.safari = this.newPinch(target, gesture.clientX, gesture.clientY);
+  };
+
+  private readonly onGestureChange = (event: Event): void => {
+    if (this.targetAt(event.target)) event.preventDefault();
+    const pinch = this.safari;
+    if (!pinch) return;
+    event.preventDefault();
+    const gesture = event as SafariGestureEvent;
+    this.update(pinch, gesture.scale, gesture.rotation, event.timeStamp);
+  };
+
+  private readonly onGestureEnd = (event: Event): void => {
+    if (this.targetAt(event.target)) event.preventDefault();
+    const pinch = this.safari;
+    if (!pinch) return;
+    this.safari = null;
+    this.finish(pinch, 'ended');
+  };
+}

package/src/playground/assets.ts

@@ -0,0 +1,96 @@
+// The playground's downloads (playground/build-assets.ts makes them): the
+// compiler, the linker, the macro plugins and the pack of SDK and kit files,
+// fetched from one base URL (a public bucket, or the dev server's copy) and
+// kept in the Cache API, so a compile needs no server request after the
+// first visit. Each file is gzipped, unpacked here as it arrives (no server
+// or CDN has to set Content-Encoding), and named by its contents, so a new
+// build is a new download.
+
+import { memoryDirectory } from '@swiftbrowser/wasm-compiler';
+import type { Toolchain } from './build';
+import type { PlaygroundFiles } from './files';
+import { readPack } from './pack';
+
+/** What the pack's index records besides its files. */
+export interface PlaygroundMeta {
+  /** The symbol Foundation's ICU reads its data through (`icudtNN_dat`). */
+  icuSymbol: string;
+  /** The apps whose compiles the pack was recorded from. */
+  apps: string[];
+}
+
+const CACHE = 'swiftbrowser-playground';
+
+/** A response for `url`, from the cache when it has one. */
+async function cached(url: string): Promise<Response> {
+  const cache = typeof caches === 'undefined' ? null : await caches.open(CACHE).catch(() => null);
+  const hit = await cache?.match(url);
+  if (hit) return hit;
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`${url}: HTTP ${response.status}`);
+  await cache?.put(url, response.clone()).catch(() => {});
+  return response;
+}
+
+/** The file at `url`, unpacked when it is gzipped. */
+async function body(url: string): Promise<Response> {
+  const response = await cached(url);
+  if (!url.endsWith('.gz') || !response.body) return response;
+  const type = url.endsWith('.wasm.gz') ? 'application/wasm' : 'application/octet-stream';
+  return new Response(response.body.pipeThrough(new DecompressionStream('gzip')), { headers: { 'content-type': type } });
+}
+
+async function compileModule(url: string): Promise<WebAssembly.Module> {
+  const response = await body(url);
+  if (typeof WebAssembly.compileStreaming === 'function' && (response.headers.get('content-type') ?? '').includes('application/wasm')) {
+    return WebAssembly.compileStreaming(response);
+  }
+  return WebAssembly.compile(await response.arrayBuffer());
+}
+
+export interface LoadedToolchain {
+  /** The tools and files, without macro plugins until `plugins` settles. */
+  toolchain: Toolchain;
+  /**
+   * The macro plugins, downloading behind the first compile: most apps
+   * expand no macro, and the plugins are a fifth of the download.
+   */
+  plugins: Promise<Toolchain['plugins']>;
+  /** The module cache built with the playground's flags. */
+  moduleCache: [string, Uint8Array][];
+  meta: PlaygroundMeta;
+}
+
+export async function loadToolchain(base: string, files: PlaygroundFiles, onProgress: (text: string) => void = () => {}): Promise<LoadedToolchain> {
+  const url = (file: string): string => new URL(file, base).href;
+  const started = performance.now();
+  const lap = (text: string): void => onProgress(`${text} (${((performance.now() - started) / 1000).toFixed(1)} s)`);
+  const [frontend, linker, packBytes] = await Promise.all([
+    compileModule(url(files.frontend)).then((module) => (lap('compiler ready'), module)),
+    compileModule(url(files.linker)).then((module) => (lap('linker ready'), module)),
+    body(url(files.pack)).then((response) => response.arrayBuffer()).then((buffer) => (lap('SDK ready'), new Uint8Array(buffer))),
+  ]);
+  const pack = readPack<PlaygroundMeta>(packBytes);
+  const plugins = Promise.all(Object.entries(files.plugins).map(async ([name, file]) => {
+    const bytes = new Uint8Array(await (await body(url(file))).arrayBuffer());
+    return [name, { module: await WebAssembly.compile(bytes), bytes }] as const;
+  })).then(Object.fromEntries<Toolchain['plugins'][string]>);
+  // A failed download surfaces when a compile needs the plugins.
+  plugins.catch(() => {});
+  const kitJson = pack.file('kit.json');
+  const icu = pack.file('icu.dat');
+  if (!kitJson || !icu) throw new Error('playground.pack has no kit.json or icu.dat');
+  return {
+    toolchain: {
+      tools: { 'swift-frontend': frontend, 'wasm-ld': linker },
+      plugins: {},
+      sdk: memoryDirectory(pack.files('sdk')),
+      kit: memoryDirectory(pack.files('kit')),
+      kitManifest: JSON.parse(new TextDecoder().decode(kitJson)) as Toolchain['kitManifest'],
+      icu: { symbol: pack.meta.icuSymbol, data: icu },
+    },
+    plugins,
+    moduleCache: pack.files('module-cache'),
+    meta: pack.meta,
+  };
+}

package/src/playground/build.ts

@@ -0,0 +1,149 @@
+// An app compiled and linked in the browser: what the CLI does with
+// SWIFTBROWSER_COMPILER=wasm (packages/cli/src/wasmCompiler.ts), on the
+// in-memory host instead of the file system. The app's sources are staged
+// for the shim with the CLI's own code (its browser entry) and compiled with
+// the CLI's flags against the kit, so a module built here is the module the
+// CLI builds. The playground's worker runs it, and so does the Node script
+// that records which SDK and kit files a compile reads
+// (playground/build-assets.ts).
+
+import type { Directory } from '@bjorn3/browser_wasi_shim';
+import {
+  FULL_FOUNDATION_FILE,
+  appFrontendFlags,
+  appLinkerFlags,
+  declaredTypeNames,
+  featuresOf,
+  fullFoundationSource,
+  kitTargets,
+  linkedProducts,
+  optionalRequirementNames,
+  transformSource,
+} from '@swiftbrowser/cli/browser';
+import { type CompileStep, compile, dataObject, memoryDirectory, memoryHost } from '@swiftbrowser/wasm-compiler';
+
+/** Where the kit's modules and archives are, as the compiler sees them. */
+const KIT_ROOT = '/kit/wasm32-unknown-wasip1';
+
+/** What every compile shares, loaded once. */
+export interface Toolchain {
+  tools: { 'swift-frontend': WebAssembly.Module; 'wasm-ld': WebAssembly.Module };
+  /** Macro plugins by the module whose macros they expand, with their bytes (the compiler checks the file). */
+  plugins: Record<string, { module: WebAssembly.Module; bytes: Uint8Array }>;
+  /** The Swift SDK's `wasm32-unknown-wasip1` directory. */
+  sdk: Directory;
+  /** The kit's directory (its `wasm32-unknown-wasip1/Modules` and `lib`). */
+  kit: Directory;
+  /** kit.json's target and product graph. */
+  kitManifest: { targets: Record<string, string[]>; products: Record<string, string[]> };
+  /** Foundation's ICU data, trimmed, and the symbol it is read through. */
+  icu: { symbol: string; data: Uint8Array };
+}
+
+export interface AppSources {
+  /** The module name (a Swift identifier). */
+  name: string;
+  /** Path relative to the app's sources → text. */
+  files: Record<string, string>;
+}
+
+export interface BuildResult {
+  ok: boolean;
+  /** The compiler's and linker's diagnostics, with the app's file names. */
+  output: string;
+  /** The linked WASI command, when `ok`. */
+  wasm?: Uint8Array;
+  steps: CompileStep[];
+  /** Clang's module cache after the compile, for the next one to start from. */
+  moduleCache: [string, Uint8Array][];
+}
+
+export interface BuildOptions {
+  moduleCache?: Iterable<readonly [string, Uint8Array]>;
+  /** Every path the tools open, as a guest path. */
+  onOpen?: (path: string) => void;
+}
+
+/** The app's sources as the CLI stages them (stage.ts): adjusted for the shim, with the generated Foundation aliases. */
+export function stageSources(app: AppSources): Record<string, string> {
+  const texts = Object.values(app.files);
+  const optionalRequirements = optionalRequirementNames(texts);
+  const staged: Record<string, string> = {};
+  for (const [file, text] of Object.entries(app.files)) staged[file] = transformSource(text, { bridged: true, optionalRequirements }).text;
+  staged[FULL_FOUNDATION_FILE] = fullFoundationSource(featuresOf(texts), declaredTypeNames(texts));
+  return staged;
+}
+
+/**
+ * The compiler's output without the diagnostics in the file the staging
+ * generates (the user never sees it), nor the footnotes only they cited.
+ */
+export function appDiagnostics(output: string): string {
+  const blocks: string[][] = [[]];
+  for (const line of output.split('\n')) {
+    if (/^[^\s:][^:]*:\d+:\d+: (?:error|warning|note|remark):/.test(line)) blocks.push([]);
+    blocks.at(-1)!.push(line);
+  }
+  const kept = blocks.filter((block, index) => index === 0 || !block[0]!.startsWith(`${FULL_FOUNDATION_FILE}:`)).flat();
+  const text = kept.join('\n');
+  return kept
+    .filter((line) => {
+      const footnote = /^\[(#\w+)\]: </.exec(line);
+      return !footnote || text.split(`[${footnote[1]}]`).length > 2;
+    })
+    .join('\n')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+}
+
+/** Whether a compile failed for want of a macro plugin it was not given. */
+export function missingPlugin(output: string): boolean {
+  return /external macro implementation type '[^']+' could not be found/.test(output);
+}
+
+export async function buildApp(toolchain: Toolchain, app: AppSources, options: BuildOptions = {}): Promise<BuildResult> {
+  const staged = stageSources(app);
+  const encoder = new TextEncoder();
+  const sources = Object.keys(staged).sort().map((file) => `/app/${file}`);
+  const plugins = Object.entries(toolchain.plugins);
+  const host = memoryHost({
+    tools: toolchain.tools,
+    mounts: {
+      '/sdk': toolchain.sdk,
+      '/kit': toolchain.kit,
+      '/app': memoryDirectory(Object.entries(staged).map(([file, text]) => [file, encoder.encode(text)])),
+      '/work': memoryDirectory([['icudt.o', dataObject(toolchain.icu.symbol, toolchain.icu.data)]]),
+      '/plugins': memoryDirectory(plugins.map(([name, plugin]) => [`${name}.wasm`, plugin.bytes])),
+    },
+    sdkRoot: '/sdk',
+    plugins: Object.fromEntries(plugins.map(([name, plugin]) => [`/plugins/${name}.wasm`, plugin.module])),
+    ...(options.moduleCache ? { moduleCache: options.moduleCache } : {}),
+    ...(options.onOpen ? { onOpen: options.onOpen } : {}),
+  });
+  const features = featuresOf(Object.values(app.files));
+  const archives = kitTargets({ manifest: toolchain.kitManifest }, linkedProducts(features)).map((target) => `${KIT_ROOT}/lib/lib${target}.a`);
+  const result = await compile(host, {
+    moduleName: app.name,
+    sources,
+    objectDir: '/work',
+    output: `/work/${app.name}.wasm`,
+    wholeModule: true,
+    frontendFlags: [
+      ...appFrontendFlags({ name: app.name, swiftLanguageMode: '5', defines: [] }, sources, `${KIT_ROOT}/Modules`),
+      ...plugins.flatMap(([name]) => ['-load-plugin-executable', `/plugins/${name}.wasm#${name}`]),
+    ],
+    objects: ['/work/icudt.o'],
+    linkerFlags: [
+      '--gc-sections',
+      ...appLinkerFlags(),
+      ...archives.flatMap((archive) => ['--whole-archive', archive, '--no-whole-archive']),
+    ],
+  });
+  return {
+    ok: result.ok,
+    output: appDiagnostics(result.output.split('/app/').join('')),
+    ...(result.ok ? { wasm: await host.readFile(`/work/${app.name}.wasm`) } : {}),
+    steps: result.steps,
+    moduleCache: host.moduleCacheFiles(),
+  };
+}

package/src/playground/files.ts

@@ -0,0 +1,18 @@
+// The playground's downloads by role, as playground/build-assets.ts names
+// them in assets.json: gzip files named by a hash of their contents, so any
+// cache may keep them forever and a new build is new names. The site's
+// build reads the manifest (plugins/playground.ts) and the page fetches
+// these names from the assets' base URL.
+
+export interface PlaygroundFiles {
+  /** The compiler (`swift-frontend-<hash>.wasm.gz`). */
+  frontend: string;
+  /** The linker (`wasm-ld-<hash>.wasm.gz`). */
+  linker: string;
+  /** The SDK and kit files, ICU data and module cache (`playground-<hash>.pack.gz`). */
+  pack: string;
+  /** The macro plugins by the module whose macros they expand. */
+  plugins: Record<string, string>;
+}
+
+export const PLAYGROUND_MANIFEST = 'assets.json';

package/src/playground/main.ts

@@ -0,0 +1,95 @@
+/// <reference path="../vite-env.d.ts" />
+// The playground page: an app's sources in an editor, compiled and linked in
+// a worker by the WebAssembly Swift compiler (worker.ts), and run by the
+// renderer's own page in the frame, which takes the module as a blob: URL
+// (`?module=`, main.ts). Counter's sources come with the page, so after the
+// first visit's downloads nothing reaches a server.
+
+import type { FromWorker, ToWorker } from './worker';
+
+const sources = import.meta.glob('../../../Examples/Counter/Sources/**/*.swift', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;
+const APP = 'Counter';
+
+function $<T extends HTMLElement>(selector: string): T {
+  const element = document.querySelector<T>(selector);
+  if (!element) throw new Error(`missing ${selector}`);
+  return element;
+}
+const filesNav = $<HTMLElement>('#files');
+const editor = $<HTMLTextAreaElement>('#source');
+const run = $<HTMLButtonElement>('#run');
+const status = $<HTMLElement>('#status');
+const diagnostics = $<HTMLPreElement>('#diagnostics');
+const frame = $<HTMLIFrameElement>('#app');
+
+// Path relative to Sources/ → text, as edited.
+const files: Record<string, string> = Object.fromEntries(
+  Object.entries(sources).map(([file, text]) => [file.replace(/^.*\/Sources\//, ''), text]),
+);
+let current = Object.keys(files).sort()[0]!;
+
+function showFiles(): void {
+  filesNav.replaceChildren(...Object.keys(files).sort().map((file) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = file;
+    button.setAttribute('aria-current', String(file === current));
+    button.addEventListener('click', () => {
+      files[current] = editor.value;
+      current = file;
+      editor.value = files[file]!;
+      showFiles();
+    });
+    return button;
+  }));
+}
+editor.value = files[current]!;
+editor.addEventListener('input', () => (files[current] = editor.value));
+showFiles();
+
+const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
+const base = new URL(__SB_PLAYGROUND_ASSETS__, location.href).href;
+let nextId = 1;
+let moduleUrl: string | null = null;
+const started = new Map<number, number>();
+
+worker.onmessage = (event: MessageEvent<FromWorker>) => {
+  const message = event.data;
+  if (message.type === 'progress') {
+    status.textContent = message.text;
+    return;
+  }
+  run.disabled = false;
+  if (message.type === 'failure') {
+    status.textContent = 'The compiler failed.';
+    diagnostics.hidden = false;
+    diagnostics.textContent = message.error;
+    return;
+  }
+  const seconds = (performance.now() - (started.get(message.id) ?? performance.now())) / 1000;
+  const steps = message.steps.map((step) => `${step.tool} ${step.seconds.toFixed(1)} s`).join(', ');
+  diagnostics.hidden = message.ok || message.output === '';
+  diagnostics.textContent = message.output;
+  if (!message.ok || !message.wasm) {
+    status.textContent = `Did not compile (${steps}).`;
+    diagnostics.hidden = false;
+    return;
+  }
+  status.textContent = `Compiled and linked in ${seconds.toFixed(1)} s (${steps}).`;
+  if (moduleUrl) URL.revokeObjectURL(moduleUrl);
+  moduleUrl = URL.createObjectURL(new Blob([message.wasm], { type: 'application/wasm' }));
+  frame.src = `${import.meta.env.BASE_URL}app/?app=${APP}&module=${encodeURIComponent(moduleUrl)}`;
+};
+
+function compile(): void {
+  run.disabled = true;
+  diagnostics.hidden = true;
+  status.textContent = 'Compiling…';
+  const id = nextId++;
+  started.set(id, performance.now());
+  const message: ToWorker = { type: 'compile', id, base, files: __SB_PLAYGROUND_FILES__, app: { name: APP, files: { ...files } } };
+  worker.postMessage(message);
+}
+run.addEventListener('click', compile);
+// The first run loads the compiler and the SDK too.
+compile();

package/src/playground/pack.ts

@@ -0,0 +1,57 @@
+// The playground's one download besides the tools: every file a compile
+// reads (the Swift SDK's, the kit's, the ICU data, the module cache), packed
+// as a JSON index followed by the files' bytes. Reading it is a view per
+// file, no copies.
+//
+//   [u32 LE index length][index JSON][file bytes...]
+//   index: { files: { "<path>": [offset, length] }, ...meta }, offsets from the end of the index
+
+export interface PackIndex<Meta = Record<string, unknown>> {
+  files: Record<string, [number, number]>;
+  meta: Meta;
+}
+
+export function writePack<Meta>(files: Iterable<readonly [string, Uint8Array]>, meta: Meta): Uint8Array {
+  const entries = [...files];
+  const index: PackIndex<Meta> = { files: {}, meta };
+  let offset = 0;
+  for (const [file, data] of entries) {
+    index.files[file] = [offset, data.length];
+    offset += data.length;
+  }
+  const json = new TextEncoder().encode(JSON.stringify(index));
+  const out = new Uint8Array(4 + json.length + offset);
+  new DataView(out.buffer).setUint32(0, json.length, true);
+  out.set(json, 4);
+  let at = 4 + json.length;
+  for (const [, data] of entries) {
+    out.set(data, at);
+    at += data.length;
+  }
+  return out;
+}
+
+export interface Pack<Meta = Record<string, unknown>> {
+  meta: Meta;
+  /** The files under `prefix/` (the prefix removed), as views of the pack. */
+  files(prefix: string): [string, Uint8Array][];
+  file(path: string): Uint8Array | undefined;
+}
+
+export function readPack<Meta>(bytes: Uint8Array): Pack<Meta> {
+  const length = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength).getUint32(0, true);
+  const index = JSON.parse(new TextDecoder().decode(bytes.subarray(4, 4 + length))) as PackIndex<Meta>;
+  const data = bytes.subarray(4 + length);
+  const view = ([offset, size]: [number, number]): Uint8Array => data.subarray(offset, offset + size);
+  return {
+    meta: index.meta,
+    files(prefix: string) {
+      const start = `${prefix}/`;
+      return Object.entries(index.files).filter(([file]) => file.startsWith(start)).map(([file, range]) => [file.slice(start.length), view(range)]);
+    },
+    file(path: string) {
+      const range = index.files[path];
+      return range ? view(range) : undefined;
+    },
+  };
+}

package/src/playground/playground.css

@@ -0,0 +1,30 @@
+:root {
+  --bg: #f5f5f7;
+  --panel: #ffffff;
+  --text: #1d1d1f;
+  --muted: #6e6e73;
+  --accent: #0071e3;
+  --error: #c62828;
+  --border: #d2d2d7;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+}
+@media (prefers-color-scheme: dark) {
+  :root { --bg: #000; --panel: #1c1c1e; --text: #f5f5f7; --muted: #98989d; --accent: #2997ff; --error: #ff6b6b; --border: #38383a; }
+}
+body { margin: 0; background: var(--bg); color: var(--text); }
+header { padding: 20px 24px 8px; }
+header h1 { margin: 0; font-size: 22px; }
+header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
+main { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; padding: 16px 24px 24px; }
+@media (max-width: 900px) { main { grid-template-columns: 1fr; } }
+.editor { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+#files { display: flex; gap: 4px; flex-wrap: wrap; }
+#files button { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 6px; padding: 4px 10px; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
+#files button[aria-current='true'] { border-color: var(--accent); color: var(--accent); }
+#source { min-height: 480px; resize: vertical; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
+.actions { display: flex; align-items: center; gap: 12px; }
+#run { background: var(--accent); color: white; border: none; border-radius: 8px; padding: 8px 20px; font-size: 15px; font-weight: 600; cursor: pointer; }
+#run:disabled { opacity: 0.5; cursor: default; }
+#status { color: var(--muted); font-size: 13px; }
+#diagnostics { margin: 0; padding: 12px; border: 1px solid var(--error); border-radius: 8px; background: var(--panel); color: var(--error); font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow: auto; max-height: 320px; }
+.preview iframe { width: 100%; height: 860px; border: none; border-radius: 12px; background: var(--panel); }

package/src/playground/worker.ts

@@ -0,0 +1,52 @@
+// The playground's compiler, in a worker: the page sends an app's sources,
+// the worker answers with the linked module or the diagnostics. The tools
+// and files are loaded once and kept, and each compile starts from the
+// module cache the previous one left. The macro plugins arrive after the
+// tools: a compile that expands a macro before then waits for them and
+// runs again.
+
+import { type AppSources, missingPlugin, buildApp } from './build';
+import { type LoadedToolchain, loadToolchain } from './assets';
+import type { PlaygroundFiles } from './files';
+
+export type ToWorker = { type: 'compile'; id: number; base: string; files: PlaygroundFiles; app: AppSources };
+export type FromWorker =
+  | { type: 'progress'; text: string }
+  | { type: 'result'; id: number; ok: boolean; output: string; wasm?: Uint8Array<ArrayBuffer>; steps: { tool: string; seconds: number }[] }
+  | { type: 'failure'; id: number; error: string };
+
+const post = (message: FromWorker, transfer: Transferable[] = []): void => (self as unknown as Worker).postMessage(message, transfer);
+let loaded: Promise<LoadedToolchain> | null = null;
+let moduleCache: [string, Uint8Array][] | null = null;
+
+self.onmessage = async (event: MessageEvent<ToWorker>) => {
+  const { id, base, files, app } = event.data;
+  try {
+    loaded ??= loadToolchain(base, files, (text) => post({ type: 'progress', text })).then((toolchain) => {
+      // Later compiles use the plugins as soon as they are in.
+      toolchain.plugins.then((plugins) => (toolchain.toolchain.plugins = plugins), () => {});
+      return toolchain;
+    });
+    const { toolchain, plugins, moduleCache: prebuilt } = await loaded;
+    post({ type: 'progress', text: `compiling ${app.name}…` });
+    let result = await buildApp(toolchain, app, { moduleCache: moduleCache ?? prebuilt });
+    moduleCache = result.moduleCache;
+    if (!result.ok && Object.keys(toolchain.plugins).length === 0 && missingPlugin(result.output)) {
+      post({ type: 'progress', text: 'waiting for the macro plugins…' });
+      toolchain.plugins = await plugins;
+      post({ type: 'progress', text: `compiling ${app.name} with the macro plugins…` });
+      result = await buildApp(toolchain, app, { moduleCache });
+      moduleCache = result.moduleCache;
+    }
+    const steps = result.steps.map(({ tool, seconds }) => ({ tool, seconds }));
+    if (result.wasm) {
+      const wasm = new Uint8Array(result.wasm);
+      post({ type: 'result', id, ok: result.ok, output: result.output, wasm, steps }, [wasm.buffer]);
+    } else {
+      post({ type: 'result', id, ok: result.ok, output: result.output, steps });
+    }
+  } catch (error) {
+    loaded = null;
+    post({ type: 'failure', id, error: error instanceof Error ? (error.stack ?? error.message) : String(error) });
+  }
+};

package/src/protocol.ts

@@ -1765,6 +1765,17 @@ export interface GestureProps {
   longPress?: boolean;
   minimumDistance?: number;
   minimumDuration?: number;
+  /**
+   * `MagnifyGesture` / `RotateGesture` (src/pinch.ts): two fingers on the
+   * element, a trackpad pinch (a wheel with ctrl, or Safari's gesture events
+   * on a computer) send `pinch` events once the scale has changed by
+   * `minimumScaleDelta` (default 0.01, with `magnify`) or the angle by
+   * `minimumAngleDelta` degrees (default 1, with `rotate`).
+   */
+  magnify?: boolean;
+  rotate?: boolean;
+  minimumScaleDelta?: number;
+  minimumAngleDelta?: number;
 }
 
 /**
@@ -1892,6 +1903,26 @@ export interface DragEvent {
   startLocation: Point;
   velocity: { width: number; height: number };
 }
+/**
+ * A `gesture` with `magnify` or `rotate`: two fingers (or a trackpad pinch)
+ * since `began`, coalesced to one per animation frame while `changed`.
+ * `scale` is the distance between the fingers over the first distance;
+ * `rotation` the turn of the line between them, in degrees, clockwise
+ * positive; the velocities are per second. `startLocation` is where the
+ * fingers' midpoint began, in points from the element's top leading corner;
+ * `startAnchor` the same as a fraction of the element's size.
+ */
+export interface PinchEvent {
+  type: 'pinch';
+  id: ElementId;
+  phase: DragPhase;
+  scale: number;
+  rotation: number;
+  scaleVelocity: number;
+  rotationVelocity: number;
+  startLocation: Point;
+  startAnchor: Point;
+}
 /** A `gesture` with `longPress` was held `minimumDuration` without moving 10 px. */
 export interface LongPressEvent {
   type: 'longpress';
@@ -1952,7 +1983,7 @@ export interface DropEvent {
 }
 
 /** The Phase 8 events (merged into `RendererEvent` above). */
-export type InteractionEvent = DragEvent | LongPressEvent | DeleteEvent | RefreshEvent | MoveEvent | DragStartEvent | DragEndEvent | DropEvent;
+export type InteractionEvent = DragEvent | PinchEvent | LongPressEvent | DeleteEvent | RefreshEvent | MoveEvent | DragStartEvent | DragEndEvent | DropEvent;
 // Phase 8: alerts, controls, effects
 // (docs/ops-protocol.md, "Phase 8: interaction"; gestures, swipe actions,
 // context menus, list rows and refresh live in their own block)

package/src/renderer.ts

@@ -148,6 +148,7 @@ import {
 import { filledSymbolName, renderSymbol } from './symbols';
 import { applyPathShape, hasPathFrames, playPathFrames } from './pathShape';
 import { VideoEvents, applyVideo, stopVideos } from './video';
+import { PinchController } from './pinch';
 import { applyCanvas, createCanvasElement } from './canvasDrawing';
 import { scrollToTarget } from './scrollTo';
 import { EMPTY_CATALOG, assetColorVar, type AssetCatalog } from './assets';
@@ -386,6 +387,7 @@ export class Renderer {
   private readonly pressEffects: PressEffects;
   /** Text, links and files dragged in from outside the page (src/dragDrop.ts). */
   private readonly externalDrops: ExternalDrops;
+  private readonly pinches: PinchController;
   /** `video` elements' media events, as `video` events (src/video.ts). */
   private readonly videoEvents: VideoEvents;
   private readonly measurer = new CanvasTextMeasurer();
@@ -839,6 +841,8 @@ export class Renderer {
     // iOS 26: the glass under a pressed bar button swells and springs back (src/press.ts).
     this.pressEffects = new PressEffects(root);
     this.externalDrops = new ExternalDrops(host);
+    // Two-finger gestures: MagnifyGesture and RotateGesture (src/pinch.ts).
+    this.pinches = new PinchController(host);
     root.addEventListener('change', this.onChange);
     root.addEventListener('pointerdown', this.onSliderPointerDown);
     if (typeof ResizeObserver !== 'undefined') {
@@ -1506,6 +1510,7 @@ export class Renderer {
     this.interaction.dispose();
     this.pressEffects.dispose();
     this.externalDrops.dispose();
+    this.pinches.dispose();
     this.videoEvents.dispose();
     this.resizeObserver?.disconnect();
     this.hostObserver?.disconnect();
@@ -3114,6 +3119,7 @@ function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps,
       const gesture = (props as GestureProps | undefined) ?? {};
       el.toggleAttribute('data-sb-drag', gesture.drag === true);
       el.toggleAttribute('data-sb-long-press', gesture.longPress === true);
+      el.toggleAttribute('data-sb-pinch', gesture.magnify === true || gesture.rotate === true);
       break;
     }
     case 'swipeactions': {

package/src/styles.css

@@ -2405,6 +2405,18 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   -webkit-backdrop-filter: none;
 }
 
+/* For the same reason, while a sheet slides in or out, what scrolls in it
+   does not. A list or scroll view taller than the card is a scroller, which
+   WebKit on iOS composites on its own, and the bar runs over its top: the
+   bar button's text, painted over it, is then composited on its own too,
+   and was missing until a sheet of a long form had slid in (a short one,
+   which does not scroll, was fine). `hidden` keeps the scroll offset, and
+   the scroll bars are not drawn (`scrollbar-width: none`), so nothing moves. */
+.sb-sheet--in :is(.sb-list, .sb-scrollview),
+.sb-sheet--out :is(.sb-list, .sb-scrollview) {
+  overflow: hidden;
+}
+
 /* iOS 26 press feedback on Liquid Glass (src/press.ts): while a pointer is
    down on a bar button or a glass button, the glass under it (a bar
    capsule, the back and More circles, the sidebar toggle, a `.glass`
@@ -2825,7 +2837,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
    interaction"; src/interaction.ts drives the data attributes).
    ------------------------------------------------------------------------- */
 
-/* `gesture`: a drag gesture owns touches in both axes; long-press subtrees
+/* `gesture`: a drag or two-finger gesture owns touches in both axes (and the
+   page does not zoom under a pinch); long-press subtrees
    never show the browser's text selection or callout. */
 .sb-gesture,
 .sb-contextmenu {
@@ -2835,7 +2848,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   -webkit-tap-highlight-color: transparent;
 }
 
-.sb-gesture[data-sb-drag] {
+.sb-gesture[data-sb-drag],
+.sb-gesture[data-sb-pinch] {
   touch-action: none;
 }
 

package/src/vite-env.d.ts

@@ -26,6 +26,10 @@ interface SBLandingApp {
 declare const __SB_APPS__: readonly SBLandingApp[];
 /** The app the app page runs without `?app=` (`SiteOptions.defaultApp`, node/config.ts). */
 declare const __SB_DEFAULT_APP__: string;
+/** Where the playground page fetches its assets (plugins/playground.ts). */
+declare const __SB_PLAYGROUND_ASSETS__: string;
+/** The playground's downloads, from the assets' manifest (src/playground/files.ts). */
+declare const __SB_PLAYGROUND_FILES__: import('./playground/files').PlaygroundFiles;
 /** What a wide screen shows: `auto` (the frame) or `device` (the full window, a built single-app site). See plugins/site-layout.ts. */
 declare const __SB_PAGE_MODE__: 'auto' | 'device';