@swiftbrowser/web 0.1.0

package/src/locale.ts

@@ -0,0 +1,64 @@
+/**
+ * Which locale and time zone the app runs with (docs/ops-protocol.md,
+ * "Phase 11"). The app follows the viewer like an iOS app follows the device,
+ * within the languages it ships: a browser language whose ICU data the app
+ * carries (`locales` in its spec, default English) is used with its region
+ * (`en-GB` → British dates), anything else falls back to the first shipped
+ * language rather than to ICU's root locale. `?locale=fr-FR` on the app URL
+ * overrides the browser, like the "App Language" option of an Xcode scheme.
+ *
+ * Shared by the page and the Node side (tests), so no DOM or Node APIs.
+ */
+
+const TAG = /^[A-Za-z]{2,3}(?:[-_][A-Za-z0-9]{2,8})*$/;
+
+/** The language subtag of a BCP 47 tag, lowercased; null for junk. */
+export function languageOf(tag: string): string | null {
+  const trimmed = tag.trim();
+  if (!TAG.test(trimmed)) return null;
+  return trimmed.split(/[-_]/)[0]!.toLowerCase();
+}
+
+/** `fr_FR`, `FR-fr` → `fr-FR`; script subtags title-cased (`zh-Hant-TW`). */
+export function canonicalTag(tag: string): string {
+  const parts = tag.trim().split(/[-_]/);
+  return parts
+    .map((part, index) => {
+      if (index === 0) return part.toLowerCase();
+      if (part.length === 4) return part[0]!.toUpperCase() + part.slice(1).toLowerCase();
+      return part.toUpperCase();
+    })
+    .join('-');
+}
+
+/**
+ * The locale to run with: the override when given, else the first preferred
+ * language the app ships (`shipped` holds language tags; `*` ships every
+ * language), else the first shipped language itself (`en` → `en`), else
+ * nothing (the module keeps its default, `en_001`).
+ */
+export function chooseLocale(
+  preferred: readonly string[],
+  shipped: readonly string[] | undefined,
+  override?: string | null,
+): string | null {
+  if (override && languageOf(override)) return canonicalTag(override);
+  const languages = (shipped ?? ['en']).map((tag) => (tag === '*' ? '*' : languageOf(tag))).filter((l): l is string => l !== null);
+  const all = languages.includes('*');
+  for (const tag of preferred) {
+    const language = languageOf(tag);
+    if (language && (all || languages.includes(language))) return canonicalTag(tag);
+  }
+  const first = languages.find((l) => l !== '*');
+  return first ?? null;
+}
+
+/** The viewer's IANA time zone (`Europe/Paris`), or null when the runtime cannot say. */
+export function currentTimeZone(): string | null {
+  try {
+    const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return zone && /^[A-Za-z0-9_+\-/]+$/.test(zone) ? zone : null;
+  } catch {
+    return null;
+  }
+}

package/src/main.ts

@@ -0,0 +1,554 @@
+/// <reference path="./vite-env.d.ts" />
+import { easingFor, springEasing, timingFor } from './animation';
+import type { BuildEndPayload, BuildErrorPayload, BuildStartPayload } from './devEvents';
+import { applyPageMode, decidePageMode, readViewportInsets, watchViewport, type PageMode } from './deviceMode';
+import { EMPTY_CATALOG, catalogPath, isAssetCatalog, type AssetCatalog } from './assets';
+import { createMockApp } from './mock';
+import {
+  horizontalSizeClassFor,
+  isDynamicTypeSize,
+  type ColorScheme,
+  type DynamicTypeSize,
+  type HorizontalSizeClass,
+  type RendererEvent,
+  type ScenePhase,
+} from './protocol';
+import { Renderer, RendererError } from './renderer';
+import { DEFAULT_TYPE_SIZE, applyTypeSizeVariables } from './typography';
+import { JobScheduler, loadApp, type AppHandle, type JobTimers } from './wasm';
+import { chooseLocale, currentTimeZone } from './locale';
+import type { BundleManifest } from '../plugins/bundle-resources';
+
+const THEME_KEY = 'sb-theme';
+const TYPE_SIZE_KEY = 'sb-type-size';
+type Theme = ColorScheme;
+
+function $<T extends HTMLElement>(selector: string): T {
+  const el = document.querySelector<T>(selector);
+  if (!el) throw new Error(`Missing element ${selector}`);
+  return el;
+}
+
+const device = $<HTMLElement>('#device');
+const screen = $<HTMLElement>('#screen');
+const appName = $<HTMLElement>('#app-name');
+const themeToggle = $<HTMLButtonElement>('#theme-toggle');
+const typeSizeSelect = $<HTMLSelectElement>('#type-size');
+const status = $<HTMLElement>('#status');
+const buildStatus = $<HTMLElement>('#build-status');
+
+const params = new URLSearchParams(location.search);
+const useMock = params.get('mock') === '1';
+const requestedApp = (params.get('app') ?? 'Counter').replace(/[^A-Za-z0-9_-]/g, '') || 'Counter';
+
+// Frame mode (the fake iPhone bezel, desktop and tests) or device mode (a
+// real phone: full screen, real safe areas, OS status bar). See deviceMode.ts;
+// the inline script in app/index.html pre-set the attribute with the same rule.
+const pageMode: PageMode = decidePageMode();
+applyPageMode(pageMode);
+const deviceMode = pageMode === 'device';
+
+// ---------------------------------------------------------------------------
+// Renderer (constructed first: the theme and type size controls feed it)
+// ---------------------------------------------------------------------------
+
+let app: AppHandle | null = null;
+/** The app's asset catalog manifest (empty until `boot` fetched it, or when the app has none). */
+let assets: AssetCatalog = EMPTY_CATALOG;
+/** JSON events handed to the app, newest last (debugging and e2e tests). */
+const sentEvents: RendererEvent[] = [];
+/**
+ * Events the renderer produced before the app handle existed (the `geometry`
+ * events of the very first layout pass, which runs inside `loadApp` /
+ * `createMockApp`); delivered right after boot.
+ */
+let queuedEvents: RendererEvent[] = [];
+
+function dispatch(event: RendererEvent): void {
+  if (!app) {
+    queuedEvents.push(event);
+    return;
+  }
+  try {
+    if (event.type === 'tap') {
+      app.sendEvent(event.id);
+    } else if (event.type === 'batch' && !app.supportsBatchEvents) {
+      // The mock apps handle events one at a time.
+      event.events.forEach(dispatch);
+    } else if (app.sendEventJson(event)) {
+      // Recorded flattened, so tests see the individual events.
+      if (event.type === 'batch') sentEvents.push(...event.events);
+      else sentEvents.push(event);
+    }
+  } catch (error) {
+    showError(error);
+  }
+}
+
+const renderer = new Renderer(screen, dispatch);
+
+// Phase 12: `.preferredColorScheme` from the app overrides the viewer's theme
+// for this page (not persisted); `null` goes back to the toggle / OS setting.
+screen.addEventListener('sb:color-scheme', (event) => {
+  const scheme = (event as CustomEvent<{ colorScheme: 'light' | 'dark' | null }>).detail.colorScheme;
+  if (scheme === 'light' || scheme === 'dark') applyTheme(scheme, false);
+  else applyTheme(deviceMode ? systemTheme() : (readStoredTheme() ?? 'light'), false);
+});
+
+// Text measured before web fonts finished loading may be off; lay out again.
+if (typeof document.fonts?.ready?.then === 'function') {
+  document.fonts.ready.then(() => renderer.fontsChanged()).catch(() => undefined);
+}
+
+// ---------------------------------------------------------------------------
+// Theme
+// ---------------------------------------------------------------------------
+
+function readStoredTheme(): Theme | null {
+  try {
+    const value = localStorage.getItem(THEME_KEY);
+    return value === 'light' || value === 'dark' ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function currentTheme(): Theme {
+  return device.dataset['theme'] === 'dark' ? 'dark' : 'light';
+}
+
+function applyTheme(theme: Theme, persist: boolean): void {
+  device.dataset['theme'] = theme;
+  themeToggle.setAttribute('aria-pressed', String(theme === 'dark'));
+  themeToggle.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
+  renderer.setEnvironment({ colorScheme: theme });
+  if (persist) {
+    try {
+      localStorage.setItem(THEME_KEY, theme);
+    } catch {
+      // Storage may be unavailable (private mode); the toggle still works.
+    }
+  }
+}
+
+/** The OS appearance (device mode follows it; the toolbar toggle is hidden there). */
+const darkScheme = typeof matchMedia === 'function' ? matchMedia('(prefers-color-scheme: dark)') : null;
+const systemTheme = (): Theme => (darkScheme?.matches ? 'dark' : 'light');
+
+if (deviceMode) {
+  applyTheme(systemTheme(), false);
+  darkScheme?.addEventListener('change', () => {
+    applyTheme(systemTheme(), false);
+    sendEnvironment();
+  });
+} else {
+  applyTheme(readStoredTheme() ?? 'light', false);
+}
+themeToggle.addEventListener('click', () => {
+  applyTheme(currentTheme() === 'dark' ? 'light' : 'dark', true);
+  sendEnvironment();
+});
+
+// ---------------------------------------------------------------------------
+// Dynamic Type
+// ---------------------------------------------------------------------------
+
+function readStoredTypeSize(): DynamicTypeSize | null {
+  try {
+    const value = localStorage.getItem(TYPE_SIZE_KEY);
+    return isDynamicTypeSize(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function currentTypeSize(): DynamicTypeSize {
+  const value = device.dataset['typeSize'];
+  return isDynamicTypeSize(value) ? value : DEFAULT_TYPE_SIZE;
+}
+
+/**
+ * Select a Dynamic Type size: the device records it (`data-type-size`), the
+ * text style CSS variables are rewritten so styled text rescales at once,
+ * and Swift is told through an `environment` event (by the caller).
+ */
+function applyTypeSize(size: DynamicTypeSize, persist: boolean): void {
+  device.dataset['typeSize'] = size;
+  applyTypeSizeVariables(device, size);
+  // The layout engine resolves text styles for this size and re-lays out.
+  renderer.setEnvironment({ dynamicTypeSize: size });
+  if (typeSizeSelect.value !== size) typeSizeSelect.value = size;
+  if (persist) {
+    try {
+      localStorage.setItem(TYPE_SIZE_KEY, size);
+    } catch {
+      // Storage may be unavailable; the control still works for the session.
+    }
+  }
+}
+
+// Device mode has no Text size control and always reports `large`.
+applyTypeSize(deviceMode ? DEFAULT_TYPE_SIZE : (readStoredTypeSize() ?? DEFAULT_TYPE_SIZE), false);
+typeSizeSelect.addEventListener('change', () => {
+  const value = typeSizeSelect.value;
+  applyTypeSize(isDynamicTypeSize(value) ? value : DEFAULT_TYPE_SIZE, true);
+  sendEnvironment();
+});
+
+// ---------------------------------------------------------------------------
+// Device mode: real viewport and safe areas
+// ---------------------------------------------------------------------------
+
+/**
+ * Phase 7: the horizontal size class Swift sees (`regular` from 700 CSS px of
+ * screen width). The frame is always compact; device mode follows the viewport.
+ */
+function currentSizeClass(): HorizontalSizeClass {
+  return horizontalSizeClassFor(screen.clientWidth);
+}
+/** The size class last sent in an `environment` event (null before the first). */
+let sentSizeClass: HorizontalSizeClass | null = null;
+
+if (deviceMode) {
+  // `#screen` fills the viewport (styles.css); the engine reads its size on
+  // every pass. The safe areas come from env(safe-area-inset-*): non-zero
+  // only in standalone (home screen) mode or landscape, which is what the
+  // real app would get.
+  renderer.setSafeArea(readViewportInsets());
+  let lastSize = `${screen.clientWidth}x${screen.clientHeight}`;
+  watchViewport(() => {
+    renderer.setSafeArea(readViewportInsets());
+    const size = `${screen.clientWidth}x${screen.clientHeight}`;
+    if (size !== lastSize) {
+      lastSize = size;
+      renderer.viewportChanged();
+    }
+    // A rotation or window resize may cross the compact / regular threshold.
+    if (sentSizeClass !== null && currentSizeClass() !== sentSizeClass) sendEnvironment();
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Phase 8: scene phase
+// ---------------------------------------------------------------------------
+
+/**
+ * `ScenePhase` from the document: `background` while hidden, else `active`
+ * when the window has focus and `inactive` when it does not.
+ */
+function currentScenePhase(): ScenePhase {
+  if (document.visibilityState === 'hidden') return 'background';
+  return document.hasFocus() ? 'active' : 'inactive';
+}
+/** The scene phase last sent in an `environment` event (null before the first). */
+let sentScenePhase: ScenePhase | null = null;
+
+const scenePhaseMayHaveChanged = (): void => {
+  if (sentScenePhase !== null && currentScenePhase() !== sentScenePhase) sendEnvironment();
+};
+document.addEventListener('visibilitychange', scenePhaseMayHaveChanged);
+window.addEventListener('focus', scenePhaseMayHaveChanged);
+window.addEventListener('blur', scenePhaseMayHaveChanged);
+
+// ---------------------------------------------------------------------------
+// App
+// ---------------------------------------------------------------------------
+
+/**
+ * Tell Swift which color scheme, Dynamic Type size and (Phase 7) horizontal
+ * size class the device shows (no-op for Phase 1 modules; Phase 2 modules
+ * ignore `dynamicTypeSize`, pre-Phase 7 modules the size class).
+ */
+function sendEnvironment(): void {
+  if (!app?.supportsJsonEvents) return;
+  const horizontalSizeClass = currentSizeClass();
+  sentSizeClass = horizontalSizeClass;
+  // Phase 8: every environment event carries the scene phase.
+  const scenePhase = currentScenePhase();
+  sentScenePhase = scenePhase;
+  dispatch({
+    type: 'environment',
+    colorScheme: currentTheme(),
+    dynamicTypeSize: currentTypeSize(),
+    horizontalSizeClass,
+    scenePhase,
+  });
+}
+
+/** Deliver the events queued while the app was loading (after `environment`). */
+function flushQueuedEvents(): void {
+  const queued = queuedEvents;
+  queuedEvents = [];
+  for (const event of queued) dispatch(event);
+}
+
+function showError(error: unknown): void {
+  const message = error instanceof Error ? error.message : String(error);
+  status.textContent = message;
+  status.hidden = false;
+  device.dataset['state'] = 'error';
+  console.error(error);
+}
+
+function clearError(): void {
+  status.hidden = true;
+  status.textContent = '';
+  if (device.dataset['state'] === 'error') device.dataset['state'] = app ? 'ready' : 'loading';
+}
+
+function setLoaded(name: string): void {
+  appName.textContent = name;
+  status.hidden = true;
+  device.dataset['state'] = 'ready';
+}
+
+/**
+ * Phase 5: the app's asset catalog manifest (`/catalog/<App>.json`, see
+ * plugins/asset-catalogs.ts). An app without a catalog gets a 404, and a
+ * missing or broken manifest must never keep the app from loading, so every
+ * failure yields the empty catalog.
+ */
+// ---------------------------------------------------------------------------
+// Phase 11: locale, time zone, saved defaults and the resource bundle
+// ---------------------------------------------------------------------------
+
+const defaultsKey = `sb-defaults:${requestedApp}`;
+
+/** The saved `UserDefaults` of this app, as the JSON the module reads from `SB_DEFAULTS`. */
+function readStoredDefaults(): string | null {
+  try {
+    const text = localStorage.getItem(defaultsKey);
+    if (text === null) return null;
+    const parsed: unknown = JSON.parse(text);
+    return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed) ? text : null;
+  } catch {
+    return null;
+  }
+}
+
+function storeDefaults(values: Record<string, unknown>): void {
+  try {
+    if (Object.keys(values).length === 0) localStorage.removeItem(defaultsKey);
+    else localStorage.setItem(defaultsKey, JSON.stringify(values));
+  } catch (error) {
+    console.warn('[sb] could not store UserDefaults', error);
+  }
+}
+
+/** The app's entry in the registry (`locales`), when the page knows it. */
+function registeredApp(): SBLandingApp | undefined {
+  try {
+    return __SB_APPS__.find((entry: SBLandingApp) => entry.name === requestedApp);
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * The WASI environment for this launch: the locale the app runs in (the
+ * viewer's language when the module carries its data, `?locale=` to override),
+ * the viewer's time zone, the saved defaults and the app's name.
+ */
+function launchEnvironment(): string[] {
+  const env: string[] = [`SB_APP_NAME=${requestedApp}`];
+  const locale = chooseLocale(navigator.languages ?? [navigator.language], registeredApp()?.locales, params.get('locale'));
+  if (locale) env.push(`SB_LOCALE=${locale}`);
+  const zone = currentTimeZone();
+  if (zone) env.push(`TZ=${zone}`);
+  const defaults = readStoredDefaults();
+  if (defaults !== null) env.push(`SB_DEFAULTS=${defaults}`);
+  return env;
+}
+
+/** The app's resources (`/bundle/<App>.json` and its files), for the WASI `/bundle` mount; empty without a manifest. */
+async function loadBundle(app: string): Promise<Map<string, Uint8Array>> {
+  const files = new Map<string, Uint8Array>();
+  try {
+    const response = await fetch(`${import.meta.env.BASE_URL}bundle/${app}.json`, { cache: 'no-cache' });
+    if (!response.ok) return files;
+    const manifest = (await response.json()) as BundleManifest;
+    if (!Array.isArray(manifest.files)) return files;
+    await Promise.all(
+      manifest.files.map(async (file) => {
+        const url = `${import.meta.env.BASE_URL}bundle/${app}/${file.path.split('/').map(encodeURIComponent).join('/')}`;
+        const data = await fetch(url, { cache: 'no-cache' });
+        if (data.ok) files.set(file.path, new Uint8Array(await data.arrayBuffer()));
+        else console.warn(`[sb] resource ${file.path} of ${app}: HTTP ${data.status}`);
+      }),
+    );
+  } catch (error) {
+    console.warn(`[sb] could not load the resources of ${app}`, error);
+  }
+  return files;
+}
+
+async function loadAssetCatalog(app: string): Promise<AssetCatalog> {
+  try {
+    const response = await fetch(catalogPath(app), { cache: 'no-cache' });
+    if (!response.ok) return EMPTY_CATALOG;
+    const json: unknown = await response.json();
+    return isAssetCatalog(json) ? json : EMPTY_CATALOG;
+  } catch {
+    return EMPTY_CATALOG;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Hot reload: state snapshot across full reloads
+// ---------------------------------------------------------------------------
+
+const stateKey = `sb-state:${requestedApp}`;
+
+/** Store the app's `@State` snapshot so the next boot can restore it. */
+function stashState(): void {
+  if (!app || useMock) return;
+  try {
+    const snapshot = app.snapshotState();
+    if (snapshot) sessionStorage.setItem(stateKey, snapshot);
+    else sessionStorage.removeItem(stateKey);
+  } catch (error) {
+    console.warn('[sb] could not snapshot state', error);
+  }
+}
+
+/** Read and delete a stashed snapshot (it is only ever used once). */
+function takeStashedState(): string | null {
+  try {
+    const snapshot = sessionStorage.getItem(stateKey);
+    if (snapshot !== null) sessionStorage.removeItem(stateKey);
+    return snapshot;
+  } catch {
+    return null;
+  }
+}
+
+window.addEventListener('beforeunload', stashState);
+window.addEventListener('pagehide', stashState);
+
+if (import.meta.hot) {
+  import.meta.hot.on('vite:beforeFullReload', () => stashState());
+  import.meta.hot.on('sb:build-start', (payload: BuildStartPayload) => {
+    buildStatus.textContent = `Rebuilding ${payload.apps.join(', ')}…`;
+    buildStatus.dataset['state'] = 'building';
+    buildStatus.hidden = false;
+  });
+  import.meta.hot.on('sb:build-end', (payload: BuildEndPayload) => {
+    if (payload.ok) {
+      buildStatus.textContent = `Built ${payload.apps.join(', ')} in ${(payload.durationMs / 1000).toFixed(1)}s`;
+      buildStatus.dataset['state'] = 'ok';
+      clearError();
+      // A full reload follows; the indicator is hidden again on the fresh page.
+    } else {
+      buildStatus.textContent = 'Build failed';
+      buildStatus.dataset['state'] = 'error';
+    }
+  });
+  import.meta.hot.on('sb:build-error', (payload: BuildErrorPayload) => {
+    // Keep the page usable: the running app stays up, the banner shows why
+    // the new build did not land.
+    status.textContent = `Build failed for ${payload.app}:\n${payload.output.trim()}`;
+    status.hidden = false;
+    console.error(`[sb] build failed for ${payload.app}\n${payload.output}`);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Boot
+// ---------------------------------------------------------------------------
+
+async function boot(): Promise<void> {
+  const onOps = (ops: Parameters<Renderer['applyOps']>[0]): void => {
+    try {
+      renderer.applyOps(ops);
+    } catch (error) {
+      if (error instanceof RendererError) showError(error);
+      throw error;
+    }
+  };
+
+  // The catalog comes first: the first render pass already needs image sizes
+  // and colors. The mock app has no catalog (the fetch yields the empty one).
+  assets = await loadAssetCatalog(requestedApp);
+  renderer.setAssetCatalog(assets);
+
+  if (useMock) {
+    app = createMockApp(onOps, requestedApp);
+    setLoaded(`${requestedApp} (mock)`);
+    sendEnvironment();
+    flushQueuedEvents();
+    return;
+  }
+
+  const url = `${import.meta.env.BASE_URL}${requestedApp}.wasm`;
+  appName.textContent = `Loading ${requestedApp}…`;
+  device.dataset['state'] = 'loading';
+  const env = launchEnvironment();
+  const restored = takeStashedState();
+  if (restored !== null) {
+    env.push(`SB_STATE=${restored}`);
+    console.info(`[sb] restoring state for ${requestedApp}: ${restored}`);
+  }
+  const bundle = await loadBundle(requestedApp);
+  app = await loadApp(url, onOps, { args: [requestedApp], env, bundle, onDefaults: storeDefaults });
+  setLoaded(requestedApp);
+  sendEnvironment();
+  flushQueuedEvents();
+}
+
+boot().catch(showError);
+
+// Debug handle for the console and e2e tests.
+declare global {
+  interface Window {
+    __sb: {
+      renderer: Renderer;
+      app: () => AppHandle | null;
+      /** `frame` (fake iPhone bezel) or `device` (full screen on a real phone). */
+      mode: PageMode;
+      /** Non-tap events that reached the app through the JSON channel. */
+      sentEvents: readonly RendererEvent[];
+      /** Current device appearance, as sent in `environment` events. */
+      colorScheme: () => ColorScheme;
+      /** Current Dynamic Type size, as sent in `environment` events. */
+      typeSize: () => DynamicTypeSize;
+      /** Phase 7: the horizontal size class of `#screen` (`regular` from 700 CSS px), as sent in `environment` events. */
+      sizeClass: () => HorizontalSizeClass;
+      /** Phase 8: the scene phase from the document's visibility and focus, as sent in `environment` events. */
+      scenePhase: () => ScenePhase;
+      /** Current `@State` snapshot (null for mocks without one / Phase 1 modules). */
+      snapshotState: () => string | null;
+      /** Phase 5: the asset catalog manifest the renderer resolves named images and colors with. */
+      assets: () => AssetCatalog;
+      /** Animation → CSS timing helpers (src/animation.ts), for inspection and tests. */
+      animation: { easingFor: typeof easingFor; timingFor: typeof timingFor; springEasing: typeof springEasing };
+      /**
+       * Phase 4: run the app's executor now (`sb_run_jobs`), apply its ops and
+       * reschedule. Returns the delay until the next timer, or null when the
+       * module (or mock) has no executor.
+       */
+      runJobs: () => number | null;
+      /** The executor driver class, so tests can run it against a stub. */
+      JobScheduler: new (
+        run: (nowMs: number) => number,
+        apply: () => void,
+        timers?: JobTimers,
+        onError?: (error: unknown) => void,
+      ) => JobScheduler;
+    };
+  }
+}
+window.__sb = {
+  renderer,
+  app: () => app,
+  mode: pageMode,
+  sentEvents,
+  colorScheme: currentTheme,
+  typeSize: currentTypeSize,
+  sizeClass: currentSizeClass,
+  scenePhase: currentScenePhase,
+  snapshotState: () => app?.snapshotState() ?? null,
+  assets: () => assets,
+  animation: { easingFor, timingFor, springEasing },
+  runJobs: () => app?.runJobs() ?? null,
+  JobScheduler,
+};