@swiftbrowser/web 0.5.6 → 0.6.0

package/node/dist/plugins/site-layout.js

@@ -0,0 +1,77 @@
+/**
+ * The site's layout, and what the app page knows about the site it is in.
+ *
+ * A site holds one app or several (node/config.ts, `siteLayout`):
+ *
+ * - `app`: one app, the site is that app. The app page is `/` (the dev server
+ *   serves it there; a build writes it as `index.html` and nothing at `/app/`),
+ *   there is no landing page, and the site's `/manifest.webmanifest` is the
+ *   app's own, starting at `/`.
+ * - `landing`: the landing page at `/` lists the apps, each at `/app/?app=<name>`.
+ *
+ * Both layouts give the app page `window.__SB_SITE__` (the layout, the app
+ * the page runs without `?app=`, its display name, and the page mode a wide
+ * screen gets), which the inline scripts of app/index.html read before the
+ * first paint; src/main.ts gets the same through `define`s.
+ */
+import { existsSync, mkdirSync, renameSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import { appManifestJson } from './app-manifests.js';
+/** The manifest an `app` layout site serves at its root, and the start URL its pages use. */
+export const ROOT_START_URL = '/';
+const isAppPage = (pathname) => /(^|\/)app\/(index\.html)?$/.test(pathname.split('?')[0] ?? '');
+/** The `pathname?query` of a request to the app page that serves `url` in the `app` layout, or null. */
+export function rewriteRootRequest(url) {
+    const [pathname = '', query] = url.split('?', 2);
+    if (pathname !== '/' && pathname !== '/index.html')
+        return null;
+    return `/app/${query !== undefined ? `?${query}` : ''}`;
+}
+export function siteLayoutPlugin(info, app) {
+    const single = info.layout === 'app' ? app : undefined;
+    const rootManifest = single ? appManifestJson(single, { startUrl: ROOT_START_URL }) : null;
+    let outDir = '';
+    return {
+        name: 'swiftbrowser:site-layout',
+        configResolved(config) {
+            outDir = path.resolve(config.root, config.build.outDir);
+        },
+        configureServer(server) {
+            if (!rootManifest)
+                return;
+            // Before Vite's own middlewares: `/` is the app page, and the root
+            // manifest is the app's (over the one in public/).
+            server.middlewares.use((req, res, next) => {
+                const url = req.url ?? '';
+                if (url.split('?')[0] === '/manifest.webmanifest') {
+                    res.setHeader('Content-Type', 'application/manifest+json');
+                    res.setHeader('Cache-Control', 'no-cache');
+                    res.end(rootManifest);
+                    return;
+                }
+                const rewritten = rewriteRootRequest(url);
+                if (rewritten !== null)
+                    req.url = rewritten;
+                next();
+            });
+        },
+        transformIndexHtml(_html, ctx) {
+            if (!isAppPage(ctx.path))
+                return;
+            return [{ tag: 'script', injectTo: 'head-prepend', children: `window.__SB_SITE__ = ${JSON.stringify(info)};` }];
+        },
+        closeBundle() {
+            if (!rootManifest)
+                return;
+            // After everything is written (Vite's bundle, then public/): the app
+            // page becomes the site's root page. `app/` stays for the OAuth callback
+            // page public/ puts there (src/webAuth.ts).
+            const appPage = path.join(outDir, 'app', 'index.html');
+            if (existsSync(appPage))
+                renameSync(appPage, path.join(outDir, 'index.html'));
+            mkdirSync(outDir, { recursive: true });
+            writeFileSync(path.join(outDir, 'manifest.webmanifest'), rootManifest);
+        },
+    };
+}
+//# sourceMappingURL=site-layout.js.map

package/node/dist/plugins/site-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"site-layout.js","sourceRoot":"","sources":["../../../plugins/site-layout.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.5.6",
+  "version": "0.6.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": {

package/plugins/app-manifests.ts

@@ -49,11 +49,26 @@ export function manifestIconPath(app: string): string {
   return `/${MANIFEST_DIR}/${app}-icon.png`;
 }
 
-/** The app page URL that runs `app` (matches `appPath` in src/landing.ts). */
+/** The app page URL that runs `app` in the `landing` layout (matches `appPath` in src/landing.ts). */
 export function appStartUrl(app: string): string {
   return `/app/?app=${encodeURIComponent(app)}`;
 }
 
+export interface ManifestOptions {
+  /**
+   * Where the app starts, and the manifest's scope (its directory): the app
+   * page with `?app=` by default; `/` in a site that is the one app
+   * (plugins/site-layout.ts).
+   */
+  startUrl?: string;
+}
+
+/** The scope of a manifest starting at `start`: the directory of the URL's path. */
+function scopeOf(start: string): string {
+  const pathname = start.split('?')[0] ?? '/';
+  return pathname.endsWith('/') ? pathname : pathname.slice(0, pathname.lastIndexOf('/') + 1) || '/';
+}
+
 /** Default description, for a spec without one. */
 export function defaultDescription(spec: ManifestSpec): string {
   return `The ${displayNameOf(spec)} app, compiled to WebAssembly and rendered in the browser.`;
@@ -74,10 +89,10 @@ function iconSizes(file: string): string {
  * and the page draws its own background under it, and the light/dark
  * `theme-color` metas in app/index.html cover the browser UI.
  */
-export function appManifest(spec: ManifestSpec | string): AppManifest {
+export function appManifest(spec: ManifestSpec | string, options: ManifestOptions = {}): AppManifest {
   const app: ManifestSpec = typeof spec === 'string' ? { name: spec } : spec;
   if (!APP_NAME.test(app.name)) throw new Error(`Invalid app name: ${JSON.stringify(app.name)}`);
-  const start = appStartUrl(app.name);
+  const start = options.startUrl ?? appStartUrl(app.name);
   const displayName = displayNameOf(app);
   return {
     id: start,
@@ -85,7 +100,7 @@ export function appManifest(spec: ManifestSpec | string): AppManifest {
     short_name: displayName,
     description: app.description ?? defaultDescription(app),
     start_url: start,
-    scope: '/app/',
+    scope: scopeOf(start),
     display: 'standalone',
     orientation: 'portrait',
     background_color: '#000000',
@@ -98,8 +113,8 @@ export function appManifest(spec: ManifestSpec | string): AppManifest {
   };
 }
 
-export function appManifestJson(spec: ManifestSpec | string): string {
-  return JSON.stringify(appManifest(spec), null, 2) + '\n';
+export function appManifestJson(spec: ManifestSpec | string, options: ManifestOptions = {}): string {
+  return JSON.stringify(appManifest(spec, options), null, 2) + '\n';
 }
 
 /** The app named by a manifest request URL, or null for any other URL. */
@@ -121,7 +136,11 @@ export function appIconUrls(specs: readonly ManifestSpec[]): Record<string, stri
   return icons;
 }
 
-export function appManifests(specs: readonly ManifestSpec[], included: readonly { name: string; icon?: string }[] = []): Plugin {
+export function appManifests(
+  specs: readonly ManifestSpec[],
+  included: readonly { name: string; icon?: string }[] = [],
+  options: ManifestOptions = {},
+): Plugin {
   const byName = new Map(specs.map((spec) => [spec.name, spec]));
   // The apps of included sites (plugins/included-sites.ts) bring their icons.
   const icons = { ...appIconUrls(specs), ...Object.fromEntries(included.flatMap((app) => (app.icon ? [[app.name, app.icon]] : []))) };
@@ -142,7 +161,7 @@ export function appManifests(specs: readonly ManifestSpec[], included: readonly
           }
           res.setHeader('Content-Type', 'application/manifest+json');
           res.setHeader('Cache-Control', 'no-cache');
-          res.end(appManifestJson(spec));
+          res.end(appManifestJson(spec, options));
           return;
         }
         const iconApp = iconRequestApp(url);
@@ -174,7 +193,7 @@ export function appManifests(specs: readonly ManifestSpec[], included: readonly
         this.emitFile({
           type: 'asset',
           fileName: `${MANIFEST_DIR}/${spec.name}.webmanifest`,
-          source: appManifestJson(spec),
+          source: appManifestJson(spec, options),
         });
         if (spec.icon) {
           if (!existsSync(spec.icon)) {

package/plugins/site-layout.ts

@@ -0,0 +1,96 @@
+/**
+ * The site's layout, and what the app page knows about the site it is in.
+ *
+ * A site holds one app or several (node/config.ts, `siteLayout`):
+ *
+ * - `app`: one app, the site is that app. The app page is `/` (the dev server
+ *   serves it there; a build writes it as `index.html` and nothing at `/app/`),
+ *   there is no landing page, and the site's `/manifest.webmanifest` is the
+ *   app's own, starting at `/`.
+ * - `landing`: the landing page at `/` lists the apps, each at `/app/?app=<name>`.
+ *
+ * Both layouts give the app page `window.__SB_SITE__` (the layout, the app
+ * the page runs without `?app=`, its display name, and the page mode a wide
+ * screen gets), which the inline scripts of app/index.html read before the
+ * first paint; src/main.ts gets the same through `define`s.
+ */
+
+import { existsSync, mkdirSync, renameSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import type { Plugin, ResolvedConfig } from 'vite';
+import { appManifestJson, type ManifestSpec } from './app-manifests.js';
+
+export type SiteLayout = 'app' | 'landing';
+
+/**
+ * What the app page shows on a wide screen (a desktop browser): `auto` is the
+ * iPhone frame with the dev controls, device mode on a touch screen; `device`
+ * fills the window everywhere, as a deployed app should (src/deviceMode.ts).
+ * `?mode=` on the URL overrides either.
+ */
+export type SitePageMode = 'auto' | 'device';
+
+/** `window.__SB_SITE__` on the app page. */
+export interface SiteInfo {
+  layout: SiteLayout;
+  /** The app the page runs when the URL names none. */
+  defaultApp: string;
+  /** Its display name (the document title in the `app` layout). */
+  displayName: string;
+  pageMode: SitePageMode;
+}
+
+/** The manifest an `app` layout site serves at its root, and the start URL its pages use. */
+export const ROOT_START_URL = '/';
+
+const isAppPage = (pathname: string): boolean => /(^|\/)app\/(index\.html)?$/.test(pathname.split('?')[0] ?? '');
+
+/** The `pathname?query` of a request to the app page that serves `url` in the `app` layout, or null. */
+export function rewriteRootRequest(url: string): string | null {
+  const [pathname = '', query] = url.split('?', 2);
+  if (pathname !== '/' && pathname !== '/index.html') return null;
+  return `/app/${query !== undefined ? `?${query}` : ''}`;
+}
+
+export function siteLayoutPlugin(info: SiteInfo, app: ManifestSpec | undefined): Plugin {
+  const single = info.layout === 'app' ? app : undefined;
+  const rootManifest = single ? appManifestJson(single, { startUrl: ROOT_START_URL }) : null;
+  let outDir = '';
+  return {
+    name: 'swiftbrowser:site-layout',
+    configResolved(config: ResolvedConfig) {
+      outDir = path.resolve(config.root, config.build.outDir);
+    },
+    configureServer(server) {
+      if (!rootManifest) return;
+      // Before Vite's own middlewares: `/` is the app page, and the root
+      // manifest is the app's (over the one in public/).
+      server.middlewares.use((req, res, next) => {
+        const url = req.url ?? '';
+        if (url.split('?')[0] === '/manifest.webmanifest') {
+          res.setHeader('Content-Type', 'application/manifest+json');
+          res.setHeader('Cache-Control', 'no-cache');
+          res.end(rootManifest);
+          return;
+        }
+        const rewritten = rewriteRootRequest(url);
+        if (rewritten !== null) req.url = rewritten;
+        next();
+      });
+    },
+    transformIndexHtml(_html, ctx) {
+      if (!isAppPage(ctx.path)) return;
+      return [{ tag: 'script', injectTo: 'head-prepend', children: `window.__SB_SITE__ = ${JSON.stringify(info)};` }];
+    },
+    closeBundle() {
+      if (!rootManifest) return;
+      // After everything is written (Vite's bundle, then public/): the app
+      // page becomes the site's root page. `app/` stays for the OAuth callback
+      // page public/ puts there (src/webAuth.ts).
+      const appPage = path.join(outDir, 'app', 'index.html');
+      if (existsSync(appPage)) renameSync(appPage, path.join(outDir, 'index.html'));
+      mkdirSync(outDir, { recursive: true });
+      writeFileSync(path.join(outDir, 'manifest.webmanifest'), rootManifest);
+    },
+  };
+}

package/src/animation.ts

@@ -25,6 +25,12 @@
  *
  * `Animation` maps to CSS easings; `spring` becomes a `linear()` easing
  * sampled from a damped spring where supported.
+ *
+ * iOS 26's bar toolbars animate on their own: when an item comes or goes,
+ * or an item resizes, the glass capsule grows or shrinks with a spring and
+ * the items slide, the new one scaling and fading in, the old one out, in a
+ * pass nothing else animates (`implicitToolbars`). The commit's animation,
+ * or an `.animation` on the toolbar, wins when there is one.
  */
 
 import type { Animation, Edge, Transition, TransitionPart } from './protocol';
@@ -278,6 +284,68 @@ function springPosition(t: number, omega: number, zeta: number): number {
 /** SwiftUI's default transition for views inserted or removed with animation. */
 export const DEFAULT_TRANSITION: Transition = { kind: 'opacity' };
 
+/** The spring a bar toolbar's groups change with (iOS 26), and how its items come and go. */
+export const TOOLBAR_ANIMATION: Animation = { type: 'spring', duration: 0.5, bounce: 0.2 };
+export const TOOLBAR_TRANSITION: Transition = { kind: 'scale', scale: 0.6 };
+/** The `kind` of a bottom bar glass capsule's frame change (src/layoutDom.ts): chrome, not an element. */
+export const BOTTOM_GLASS_KIND = 'bottomglass';
+
+const BAR_PLACEMENTS: ReadonlySet<string> = new Set(['leading', 'trailing', 'principal', 'bottom']);
+
+/** Whether `el` is a toolbar group in a navigation bar or bottom bar (not a `ToolbarSpacer`). */
+export function isBarToolbar(el: Element | null | undefined): el is HTMLElement {
+  return (
+    el instanceof HTMLElement &&
+    el.classList.contains('sb-toolbar') &&
+    !el.hasAttribute('data-sb-spacer') &&
+    BAR_PLACEMENTS.has(el.dataset['sbPlacement'] ?? '')
+  );
+}
+
+/** The bar toolbar `el` is, or is an item of (`parent`: where a removed item was). */
+export function barToolbarOf(el: HTMLElement, parent: Element | null = el.parentElement): HTMLElement | null {
+  if (isBarToolbar(el)) return el;
+  return isBarToolbar(parent) ? parent : null;
+}
+
+/** The transition a view without one of its own enters and leaves with: a bar item's scales. */
+function implicitTransitionOf(el: HTMLElement, parent: Element | null = el.parentElement): Transition | undefined {
+  return barToolbarOf(el, parent) ? TOOLBAR_TRANSITION : undefined;
+}
+
+/**
+ * The bar toolbars whose groups this pass changed, each with its screen: one
+ * that gained or lost an item (or came or went itself, on a screen already
+ * there), or whose capsule or an item of it resized. A group that only
+ * moved (the screen resized, a More button appeared beside it) is not one:
+ * its items are as they were.
+ */
+export function implicitToolbars(pass: PassRecord, frames: readonly FrameChange[]): Map<HTMLElement, Element | null> {
+  const out = new Map<HTMLElement, Element | null>();
+  const isNew = (toolbar: HTMLElement): boolean => pass.inserted.has(toolbar) || hasAncestorIn(toolbar, pass.inserted);
+  for (const change of frames) {
+    const toolbar = barToolbarOf(change.el);
+    if (!toolbar || !change.from || !change.el.isConnected || isNew(toolbar)) continue;
+    const { from, to } = change;
+    if (change.el === toolbar && from.width === to.width && from.height === to.height) continue;
+    out.set(toolbar, toolbar.closest('.sb-navscreen'));
+  }
+  for (const el of pass.inserted) {
+    const toolbar = barToolbarOf(el);
+    if (!toolbar || !el.isConnected || hasAncestorIn(toolbar, pass.inserted)) continue;
+    // A whole new group enters as one; an item of a group already there is the group's change.
+    if (el !== toolbar && pass.inserted.has(toolbar)) continue;
+    out.set(toolbar, toolbar.closest('.sb-navscreen'));
+  }
+  for (const rec of pass.removed) {
+    const toolbar = barToolbarOf(rec.el, rec.ancestors[0] ?? null);
+    if (!toolbar) continue;
+    // A removed group is detached: its screen is among the ancestors it had.
+    out.set(toolbar, toolbar.isConnected ? toolbar.closest('.sb-navscreen') : (rec.ancestors.find((a) => a.classList.contains('sb-navscreen')) ?? null));
+  }
+  return out;
+}
+
 interface TransitionFrame {
   opacity?: number;
   transform?: string;
@@ -426,6 +494,14 @@ export class Animator {
     for (const [el, rec] of pass.updated) {
       if (rec.tokenChanged) tokenRoots.set(el, rec.implicit ? commitAnimation : rec.animation);
     }
+    // iOS 26: a bar toolbar's groups change with a spring of their own (see
+    // the top of the file); the bottom bar's glass capsules, beside their
+    // toolbars rather than around them, follow the screen's bottom toolbars.
+    const glassScreens = new Set<Element | null>();
+    for (const [toolbar, screen] of implicitToolbars(pass, frames)) {
+      if (!tokenRoots.has(toolbar)) tokenRoots.set(toolbar, commitAnimation ?? TOOLBAR_ANIMATION);
+      if (toolbar.dataset['sbPlacement'] === 'bottom') glassScreens.add(screen);
+    }
     if (!commitAnimation && tokenRoots.size === 0) {
       // Not animated: frames still tweening toward a box this pass replaced
       // carry on to the new box in the time they had left.
@@ -472,7 +548,10 @@ export class Animator {
       const { el, from, to } = change;
       if (!from || !el.isConnected || pass.inserted.has(el)) continue;
       if (this.selfAnimating.has(change.kind)) continue;
-      const animation = animationFor(ancestorsAndSelf(el));
+      let animation = animationFor(ancestorsAndSelf(el));
+      if (animation === false && change.kind === BOTTOM_GLASS_KIND && glassScreens.has(el.parentElement)) {
+        animation = TOOLBAR_ANIMATION;
+      }
       if (animation === false) {
         // Moved in place, unless it carries on with a tween of its own.
         if (!this.retargetFrame(change, null)) jumped.set(el, { x: to.x - from.x, y: to.y - from.y });
@@ -524,7 +603,7 @@ export class Animator {
       if (this.selfAnimating.has(el.dataset['sbKind'] ?? '')) continue;
       const animation = animationFor(ancestorsAndSelf(el));
       if (animation === false) continue;
-      this.enter(el, transitionOf(el), animation);
+      this.enter(el, transitionOf(el) ?? implicitTransitionOf(el), animation);
     }
 
     // Content transitions: the old text leaves as the new one arrives.
@@ -785,10 +864,14 @@ export class Animator {
    * play its transition backwards; the clone is dropped when done.
    */
   exit(rec: RemovedRecord, animation: Animation | undefined): HTMLElement | null {
-    const end = transitionStart(rec.transition, true);
+    const parent = rec.ancestors[0] ?? null;
+    const end = transitionStart(rec.transition ?? implicitTransitionOf(rec.el, parent), true);
     if (isIdentity(end) || !rec.rect) return null;
     const clone = ghostClone(rec.el);
     clone.classList.add(EXIT_CLONE_CLASS);
+    // A bar item's clone leaves its toolbar: the stylesheet draws it as the
+    // toolbar did (the symbol's size and weight, the label color).
+    if (rec.el !== parent && isBarToolbar(parent)) clone.dataset['sbBarItem'] = parent.dataset['sbPlacement'] ?? '';
     clone.setAttribute('aria-hidden', 'true');
     clone.toggleAttribute('inert', true);
     const s = clone.style;

package/src/deviceMode.ts

@@ -9,7 +9,10 @@
  *
  * `?mode=device` / `?mode=frame` force a mode; otherwise a coarse pointer
  * means a touch device at any width (Phase 7: a tablet fills the viewport
- * instead of showing the phone bezel; the old 500 px limit is gone). The
+ * instead of showing the phone bezel; the old 500 px limit is gone), and a
+ * site built for a deployment (`__SB_PAGE_MODE__` of `device`, see
+ * plugins/site-layout.ts) is device mode on every screen: a desktop browser
+ * gets the app's regular-width (iPad) layout, not a phone in a bezel. The
  * inline script in app/index.html applies the same rule before the first
  * paint.
  */
@@ -18,15 +21,19 @@ import type { EdgeInsets } from './layout';
 
 export type PageMode = 'frame' | 'device';
 
+/** The site's default for a fine pointer: `auto` is the frame, `device` the full window. */
+export type DefaultPageMode = 'auto' | 'device';
+
 export function decidePageMode(
   search: string = location.search,
   win: Pick<Window, 'matchMedia'> = window,
+  defaultMode: DefaultPageMode = 'auto',
 ): PageMode {
   const mode = new URLSearchParams(search).get('mode');
   if (mode === 'device') return 'device';
   if (mode === 'frame') return 'frame';
   const coarse = typeof win.matchMedia === 'function' && win.matchMedia('(pointer: coarse)').matches;
-  return coarse ? 'device' : 'frame';
+  return coarse || defaultMode === 'device' ? 'device' : 'frame';
 }
 
 /** Mark the document so styles.css can switch the chrome. */

package/src/gaugeRing.ts

@@ -4,8 +4,8 @@
  * (the `ring` chrome rect). In a 100-unit box: a capacity gauge is a full
  * track with the value filled clockwise from the top; an `accessoryCircular`
  * gauge is an arc of 270° open at the bottom, filled from its start to the
- * value. The track is the fill color, the value the tint (`--sb-tint`, else
- * the accent color), with round caps (styles.css).
+ * value. The value is the tint (`--sb-tint`, else the primary color), the
+ * track the same at 35%, with round caps (styles.css).
  */
 
 const SVG_NS = 'http://www.w3.org/2000/svg';