@swiftbrowser/web 0.1.0 → 0.2.0

package/src/layout/text.ts

@@ -2,7 +2,7 @@
  * Greedy word wrapping with character fallback and `lineLimit` truncation.
  */
 
-import type { ResolvedFont, TextMeasurer } from './types';
+import type { ResolvedFont, Size, TextFragment, TextMeasurer } from './types';
 
 export const ELLIPSIS = '…';
 /**
@@ -122,3 +122,219 @@ function truncateLine(
   }
   return chars.join('') + ELLIPSIS;
 }
+
+// ---------------------------------------------------------------------------
+// Rich text: runs
+// ---------------------------------------------------------------------------
+
+/** A run of rich text as the wrapper reads it: its text or image, and its font. */
+export interface TextRunInput {
+  text?: string;
+  /** An inline image's size (the run has no text). */
+  image?: Size;
+  font: ResolvedFont;
+  /** Extra space after every character, in px. */
+  kerning: number;
+}
+
+export interface WrappedRuns {
+  lines: TextFragment[][];
+  /** Each line's height: its tallest font's line height or image. */
+  heights: number[];
+  /** Width of the widest line. */
+  width: number;
+  truncated: boolean;
+}
+
+type Piece = TextFragment;
+type Token = { kind: 'word'; pieces: Piece[] } | { kind: 'space'; piece: Piece } | { kind: 'break' };
+
+/**
+ * `wrapText` for runs of differently styled text and inline images: lines
+ * break at spaces (and around images), a word may span runs, a word wider
+ * than the line breaks by characters, and `lineLimit` truncates the last
+ * kept line with an ellipsis in its last run's font. `base` sets the height
+ * of an empty line.
+ */
+export function wrapRuns(
+  runs: TextRunInput[],
+  base: ResolvedFont,
+  maxWidth: number | null,
+  lineLimit: number | null,
+  measurer: TextMeasurer,
+): WrappedRuns {
+  const measure = (run: number, text: string): number => {
+    if (text.length === 0) return 0;
+    const input = runs[run] as TextRunInput;
+    return measurer.measureWidth(text, input.font) + input.kerning * Array.from(text).length;
+  };
+  const constrained = maxWidth !== null && Number.isFinite(maxWidth);
+  const limit = constrained ? maxWidth + EPSILON : Infinity;
+
+  // Tokens: words (which may span runs), spaces and hard breaks.
+  const tokens: Token[] = [];
+  let word: Piece[] | null = null;
+  runs.forEach((input, run) => {
+    if (input.image) {
+      word = null;
+      tokens.push({ kind: 'word', pieces: [{ run, width: input.image.width, height: input.image.height }] });
+      return;
+    }
+    for (const part of (input.text ?? '').split(/(\n| +)/)) {
+      if (part.length === 0) continue;
+      if (part === '\n') {
+        word = null;
+        tokens.push({ kind: 'break' });
+      } else if (part.startsWith(' ')) {
+        word = null;
+        tokens.push({ kind: 'space', piece: { run, text: part, width: measure(run, part) } });
+      } else {
+        const piece = { run, text: part, width: measure(run, part) };
+        if (word) word.push(piece);
+        else {
+          word = [piece];
+          tokens.push({ kind: 'word', pieces: word });
+        }
+      }
+    }
+  });
+
+  let lines: Piece[][] = [];
+  let current: Piece[] = [];
+  let width = 0;
+  let spaces: Piece[] = [];
+  const sum = (pieces: Piece[]): number => pieces.reduce((total, piece) => total + piece.width, 0);
+  const endLine = (): void => {
+    lines.push(current);
+    current = [];
+    width = 0;
+    spaces = [];
+  };
+  for (const token of tokens) {
+    if (token.kind === 'break') {
+      endLine();
+      continue;
+    }
+    if (token.kind === 'space') {
+      if (current.length > 0) spaces.push(token.piece);
+      continue;
+    }
+    const wordWidth = sum(token.pieces);
+    const spaceWidth = sum(spaces);
+    if (current.length === 0 ? wordWidth <= limit : width + spaceWidth + wordWidth <= limit) {
+      current.push(...spaces, ...token.pieces);
+      width += spaceWidth + wordWidth;
+      spaces = [];
+      continue;
+    }
+    if (current.length > 0) endLine();
+    spaces = [];
+    if (wordWidth <= limit) {
+      current = [...token.pieces];
+      width = wordWidth;
+      continue;
+    }
+    // The word alone is wider than the line: break it by characters.
+    for (const piece of token.pieces) {
+      const units = piece.text === undefined ? [piece] : Array.from(piece.text).map((ch) => ({ run: piece.run, text: ch, width: measure(piece.run, ch) }));
+      for (const unit of units) {
+        if (current.length > 0 && width + unit.width > limit) endLine();
+        current.push(unit);
+        width += unit.width;
+      }
+    }
+  }
+  lines.push(current);
+
+  let truncated = false;
+  if (lineLimit !== null && lineLimit >= 1 && lines.length > lineLimit) {
+    const kept = lines.slice(0, lineLimit - 1);
+    const rest: Piece[] = [];
+    for (const line of lines.slice(lineLimit - 1)) {
+      if (line.length === 0) continue;
+      const first = line[0] as Piece;
+      if (rest.length > 0) rest.push({ run: first.run, text: ' ', width: measure(first.run, ' ') });
+      rest.push(...line);
+    }
+    kept.push(truncatePieces(rest, constrained ? maxWidth : null, measure, runs.length));
+    lines = kept;
+    truncated = true;
+  }
+
+  const merged = lines.map(mergePieces);
+  const heights = merged.map((line) => {
+    if (line.length === 0) return base.lineHeight;
+    let height = 0;
+    for (const piece of line) {
+      const font = (runs[piece.run] as TextRunInput).font;
+      height = Math.max(height, piece.height ?? font.lineHeight, font.lineHeight);
+    }
+    return height;
+  });
+  let widest = 0;
+  for (const line of merged) widest = Math.max(widest, sum(line));
+  return { lines: merged, heights, width: widest, truncated };
+}
+
+/** The pieces cut to fit `maxWidth` with an ellipsis (in the last run's font) after them. */
+function truncatePieces(
+  pieces: Piece[],
+  maxWidth: number | null,
+  measure: (run: number, text: string) => number,
+  runCount: number,
+): Piece[] {
+  const out = pieces.map((piece) => ({ ...piece }));
+  const lastRun = (): number => (out.length > 0 ? (out[out.length - 1] as Piece).run : Math.max(0, runCount - 1));
+  const ellipsis = (): number => measure(lastRun(), ELLIPSIS);
+  const total = (): number => out.reduce((sum, piece) => sum + piece.width, 0);
+  const trimEnd = (): void => {
+    for (;;) {
+      const last = out[out.length - 1];
+      if (!last) return;
+      if (last.text !== undefined && last.text.length === 0) {
+        out.pop();
+        continue;
+      }
+      if (last.text === undefined || !last.text.endsWith(' ')) return;
+      last.text = last.text.replace(/ +$/, '');
+      last.width = measure(last.run, last.text);
+    }
+  };
+  if (maxWidth !== null) {
+    while (out.length > 0 && total() + ellipsis() > maxWidth + EPSILON) {
+      const last = out[out.length - 1] as Piece;
+      if (last.text === undefined || last.text.length <= 1) out.pop();
+      else {
+        const chars = Array.from(last.text);
+        chars.pop();
+        last.text = chars.join('');
+        last.width = measure(last.run, last.text);
+      }
+      trimEnd();
+    }
+  }
+  const run = lastRun();
+  const last = out[out.length - 1];
+  if (last && last.text !== undefined) {
+    last.text += ELLIPSIS;
+    last.width = measure(last.run, last.text);
+  } else {
+    out.push({ run, text: ELLIPSIS, width: measure(run, ELLIPSIS) });
+  }
+  return out;
+}
+
+/** Adjacent text pieces of the same run as one fragment. */
+function mergePieces(line: Piece[]): Piece[] {
+  const out: Piece[] = [];
+  for (const piece of line) {
+    const last = out[out.length - 1];
+    if (last && last.run === piece.run && last.text !== undefined && piece.text !== undefined) {
+      last.text += piece.text;
+      last.width += piece.width;
+    } else {
+      out.push({ ...piece });
+    }
+  }
+  return out;
+}

package/src/layout/types.ts

@@ -66,6 +66,14 @@ export interface ResolvedFont {
   lineHeight: number;
   /** A CSS `font` shorthand (`weight size/lineHeight family`) usable verbatim. */
   css: string;
+  /**
+   * A weight or design set by a view modifier (`.fontWeight`, `.bold()`,
+   * `.fontDesign`): SwiftUI applies it to whatever font the text inside ends
+   * up with, so a `.font(...)` set further in keeps it unless that font
+   * names its own (typography.ts, `resolveFont`).
+   */
+  weightModifier?: number;
+  familyModifier?: FontFamily;
 }
 
 export interface TextMeasurer {
@@ -96,6 +104,29 @@ export interface TextLayout {
   alignment: TextAlignment;
   /** True when `lineLimit` cut text off (the last line ends with an ellipsis). */
   truncated: boolean;
+  /**
+   * Rich text (a `text` with `runs`): each line as fragments of the runs, the
+   * height of each line, and each run's font. `lines` then holds the same
+   * lines as plain strings (an inline image as U+FFFC).
+   */
+  rich?: RichTextLayout;
+}
+
+/** One piece of a line of rich text: some of a run's text, or its image. */
+export interface TextFragment {
+  /** Index into the text's `runs`. */
+  run: number;
+  /** The text drawn; absent for an image run. */
+  text?: string;
+  width: number;
+  /** An image run's height (its width is `width`). */
+  height?: number;
+}
+
+export interface RichTextLayout {
+  lines: TextFragment[][];
+  heights: number[];
+  fonts: ResolvedFont[];
 }
 
 export interface LayoutResult {

package/src/layout/typography.ts

@@ -131,10 +131,18 @@ function formatPx(value: number): string {
   return `${Math.round(value * 100) / 100}px`;
 }
 
-export function makeFont(family: FontFamily, size: number, weight: number): ResolvedFont {
+export function makeFont(
+  family: FontFamily,
+  size: number,
+  weight: number,
+  modifiers: { weightModifier?: number | undefined; familyModifier?: FontFamily | undefined } = {},
+): ResolvedFont {
   const lineHeight = lineHeightFor(size);
   const css = `${weight} ${formatPx(size)}/${lineHeight}px ${FONT_FAMILIES[family]}`;
-  return { family, size, weight, lineHeight, css };
+  const font: ResolvedFont = { family, size, weight, lineHeight, css };
+  if (modifiers.weightModifier !== undefined) font.weightModifier = modifiers.weightModifier;
+  if (modifiers.familyModifier !== undefined) font.familyModifier = modifiers.familyModifier;
+  return font;
 }
 
 /** Body text for the current `dynamicTypeSize` (17/22 at Large). */
@@ -146,7 +154,11 @@ export function defaultFont(env: LayoutEnvironment): ResolvedFont {
  * Apply a Font JSON object (`textStyle` | `size`, `weight`, `design`,
  * `relativeTo`) to an inherited font. A `textStyle` or `size` defines a new
  * font (weight defaults to regular, or semibold for `headline`; design to the
- * system family); without either, only the given `weight`/`design` change.
+ * system family); without either, only the given `weight`/`design` change,
+ * as a view modifier (`.fontWeight(.semibold)`, `.bold()`, `.fontDesign`)
+ * that also applies to a new font set further in which names no weight or
+ * design of its own: `.font(.system(size: 15)).fontWeight(.semibold)` is a
+ * semibold 15.
  */
 export function resolveFont(
   fontProps: unknown,
@@ -181,8 +193,13 @@ export function resolveFont(
     size = inherited.size;
   }
 
-  const weight = explicitWeight ?? (isNewFont ? defaultWeight : inherited.weight);
-  const family = explicitFamily ?? (isNewFont ? 'system' : inherited.family);
-  if (!isNewFont && weight === inherited.weight && family === inherited.family) return inherited;
-  return makeFont(family, size, weight);
+  const weight = explicitWeight ?? (isNewFont ? (inherited.weightModifier ?? defaultWeight) : inherited.weight);
+  const family = explicitFamily ?? (isNewFont ? (inherited.familyModifier ?? 'system') : inherited.family);
+  // A weight or design without a new font is a modifier the text further in keeps.
+  const weightModifier = !isNewFont && explicitWeight !== undefined ? explicitWeight : inherited.weightModifier;
+  const familyModifier = !isNewFont && explicitFamily !== undefined ? explicitFamily : inherited.familyModifier;
+  if (!isNewFont && weight === inherited.weight && family === inherited.family && weightModifier === inherited.weightModifier && familyModifier === inherited.familyModifier) {
+    return inherited;
+  }
+  return makeFont(family, size, weight, { weightModifier, familyModifier });
 }

package/src/layout/video.ts

@@ -0,0 +1,24 @@
+/**
+ * Measuring a `video` element (docs/ops-protocol.md, "Video and audio"). A
+ * player view fills what it is offered, like a resizable image: a finite
+ * proposal is taken as is; an axis left open follows the video's aspect
+ * ratio (its `width` / `height` props once the page has read the metadata,
+ * 16:9 before); with both open it is the video's own size, or 320 × 180.
+ */
+
+import type { Proposal, Size } from './types';
+
+export const VIDEO_DEFAULT_SIZE: Size = { width: 320, height: 180 };
+
+export function videoSize(props: Record<string, unknown>, p: Proposal): Size {
+  const width = typeof props['width'] === 'number' && props['width'] > 0 ? props['width'] : null;
+  const height = typeof props['height'] === 'number' && props['height'] > 0 ? props['height'] : null;
+  const aspect = width !== null && height !== null ? width / height : VIDEO_DEFAULT_SIZE.width / VIDEO_DEFAULT_SIZE.height;
+  const pw = p.width !== null && Number.isFinite(p.width) ? p.width : null;
+  const ph = p.height !== null && Number.isFinite(p.height) ? p.height : null;
+  if (pw !== null && ph !== null) return { width: pw, height: ph };
+  if (pw !== null) return { width: pw, height: pw / aspect };
+  if (ph !== null) return { width: ph * aspect, height: ph };
+  if (width !== null && height !== null) return { width, height };
+  return { ...VIDEO_DEFAULT_SIZE };
+}

package/src/layoutDom.ts

@@ -35,6 +35,8 @@
 
 import type { LayoutEnvironment, LayoutNode, LayoutResult, Rect, ResolvedFont, TextLayout } from './layout';
 import { applyChartChrome } from './chartDom';
+import { bitmapLaidOut } from './bitmaps';
+import { drawRichText } from './richText';
 
 export interface LayoutDomContext {
   root: HTMLElement;
@@ -95,8 +97,8 @@ export function applyLayout(ctx: LayoutDomContext, result: LayoutResult): BoxCha
       boxes.delete(id);
       continue;
     }
-    const box = boxOf(ctx, result, node, frame);
-    const origin = node.kind === 'sheet' ? { x: 0, y: 0 } : originOf(ctx, result, ctx.parents.get(id) ?? ROOT_ID);
+    const box = drawnBox(node, boxOf(ctx, result, node, frame));
+    const origin = node.kind === 'sheet' ? { x: 0, y: 0 } : isSectionSupplement(node) ? supplementOrigin(ctx, result, id) : originOf(ctx, result, ctx.parents.get(id) ?? ROOT_ID);
     const relative = { x: box.x - origin.x, y: box.y - origin.y, width: box.width, height: box.height };
     const previous = ctx.boxes.get(id) ?? null;
     boxes.set(id, relative);
@@ -146,7 +148,7 @@ export function setTabHidden(tab: HTMLElement, hidden: boolean): void {
 export function boxOf(ctx: LayoutDomContext, result: LayoutResult, node: LayoutNode, frame: Rect): Rect {
   const row = result.chrome.get(node.id)?.['row'];
   if (row) return row;
-  if (node.kind === 'section') return frame;
+  if (node.kind === 'section' || isSectionSupplement(node)) return frame;
   const parentId = ctx.parents.get(node.id);
   const parent = parentId !== undefined ? ctx.nodes.get(parentId) : undefined;
   if (!parent || (parent.kind !== 'section' && parent.kind !== 'list')) return frame;
@@ -156,6 +158,32 @@ export function boxOf(ctx: LayoutDomContext, result: LayoutResult, node: LayoutN
   return { x: card.x, y: frame.y - (height - frame.height) / 2, width: card.width, height };
 }
 
+/**
+ * The box an element is drawn in: its frame, except a circle's, which is the
+ * square centered in it (SwiftUI draws the largest circle that fits, so
+ * `Circle().frame(width: 110)` in a taller space stays round). The engine's
+ * frame, which the siblings were laid out with, is unchanged.
+ */
+function drawnBox(node: LayoutNode, box: Rect): Rect {
+  if (node.kind !== 'shape' || node.props['shape'] !== 'circle' || box.width === box.height) return box;
+  const side = Math.min(box.width, box.height);
+  return { x: box.x + (box.width - side) / 2, y: box.y + (box.height - side) / 2, width: side, height: side };
+}
+
+/** A section's view header or footer: not a row, and a DOM child of the section itself. */
+function isSectionSupplement(node: LayoutNode): boolean {
+  return node.kind === 'sectionheader' || node.kind === 'sectionfooter';
+}
+
+/** A view header / footer sits in the section element, beside the rows' card: the section's box is its origin. */
+function supplementOrigin(ctx: LayoutDomContext, result: LayoutResult, id: number): { x: number; y: number } {
+  const parentId = ctx.parents.get(id);
+  const parent = parentId === undefined ? undefined : ctx.nodes.get(parentId);
+  const frame = parentId === undefined ? undefined : result.frames.get(parentId);
+  if (!parent || !frame || parent.kind !== 'section') return originOf(ctx, result, parentId ?? ROOT_ID);
+  return boxOf(ctx, result, parent, frame);
+}
+
 /** Screen-coordinate origin that the children of `parentId` are positioned against. */
 export function originOf(ctx: LayoutDomContext, result: LayoutResult, parentId: number): { x: number; y: number } {
   if (parentId === ROOT_ID) return { x: 0, y: 0 };
@@ -244,6 +272,10 @@ function setTextLayout(el: HTMLElement, layout: TextLayout): void {
   setFont(el, layout.font);
   const align = TEXT_ALIGN[layout.alignment] ?? 'left';
   if (el.style.textAlign !== align) el.style.textAlign = align;
+  if (layout.rich && el.dataset['sbRich'] !== undefined) {
+    drawRichText(el, layout.rich);
+    return;
+  }
   const content = layout.lines.join('\n');
   if (el.textContent !== content) el.textContent = content;
 }
@@ -275,6 +307,14 @@ function applyBadge(result: LayoutResult, node: LayoutNode, el: HTMLElement, box
   }
 }
 
+function setFlag(el: HTMLElement, key: string, value: string | null): void {
+  if (value === null) {
+    if (key in el.dataset) delete el.dataset[key];
+  } else if (el.dataset[key] !== value) {
+    el.dataset[key] = value;
+  }
+}
+
 /** For leaf rows: pad the content frame back into place inside the row box. */
 function padIntoFrame(el: HTMLElement, box: Rect, frame: Rect): void {
   const s = el.style;
@@ -298,6 +338,10 @@ function applyChrome(
   bottomInset: number,
 ): void {
   const chrome = result.chrome.get(node.id);
+  // `.listRowSeparator(.hidden)`: a list row leaves out the separator below
+  // it, or above it (the previous row's line; styles.css).
+  setFlag(el, 'sbSeparatorBottom', chrome?.['separatorBottomHidden'] ? 'hidden' : null);
+  setFlag(el, 'sbSeparatorTop', chrome?.['separatorTopHidden'] ? 'hidden' : null);
   switch (node.kind) {
     case 'styled':
       applyBadge(result, node, el, box);
@@ -315,10 +359,14 @@ function applyChrome(
         if (el.style.fontSize !== size) el.style.fontSize = size;
       }
       padIntoFrame(el, box, frame);
+      // A bitmap is drawn for the size it is shown at.
+      if (node.props['bitmap']) bitmapLaidOut(el, frame.width, frame.height);
       return;
     }
     case 'textfield':
     case 'texteditor':
+      // A vertical text field draws in the font its lines were measured in.
+      setFont(el, result.fonts.get(node.id));
       padIntoFrame(el, box, frame);
       return;
     // Phase 8 controls: their chrome sits at the engine's rects inside the element's box.
@@ -514,6 +562,8 @@ function applyChrome(
       // The track and fill are chrome, positioned from the element's own box.
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-gauge-track'), chrome?.['track'], box);
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-gauge-fill'), chrome?.['fill'], box);
+      // A circular style: the ring over the gauge's square (gaugeRing.ts).
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-gauge-ring'), chrome?.['ring'], box);
       return;
     }
     case 'chart':

package/src/main.ts

@@ -1,6 +1,7 @@
 /// <reference path="./vite-env.d.ts" />
 import { easingFor, springEasing, timingFor } from './animation';
 import type { BuildEndPayload, BuildErrorPayload, BuildStartPayload } from './devEvents';
+import { ChromeColor } from './chromeColor';
 import { applyPageMode, decidePageMode, readViewportInsets, watchViewport, type PageMode } from './deviceMode';
 import { EMPTY_CATALOG, catalogPath, isAssetCatalog, type AssetCatalog } from './assets';
 import { createMockApp } from './mock';
@@ -14,9 +15,16 @@ import {
   type ScenePhase,
 } from './protocol';
 import { Renderer, RendererError } from './renderer';
+import { withBlockedHosts } from './blockedHosts';
+import { withCORSProxy } from './corsProxy';
+import { browserEnvironment } from './hostRequests';
+import { callbackPageURL } from './webAuth';
+import { bitmapStore } from './bitmaps';
 import { DEFAULT_TYPE_SIZE, applyTypeSizeVariables } from './typography';
 import { JobScheduler, loadApp, type AppHandle, type JobTimers } from './wasm';
 import { chooseLocale, currentTimeZone } from './locale';
+import { indexedDBPersistence, launchValue, type SwiftDataPersistence, type SwiftDataStores } from './swiftData';
+import { applyHomeChanges, diffHome, homeDirectory, homeEntries, indexedDBFiles, type FilesPersistence, type HomeEntries } from './appFiles';
 import type { BundleManifest } from '../plugins/bundle-resources';
 
 const THEME_KEY = 'sb-theme';
@@ -70,7 +78,7 @@ function dispatch(event: RendererEvent): void {
     return;
   }
   try {
-    if (event.type === 'tap') {
+    if (event.type === 'tap' && event.x === undefined) {
       app.sendEvent(event.id);
     } else if (event.type === 'batch' && !app.supportsBatchEvents) {
       // The mock apps handle events one at a time.
@@ -87,6 +95,11 @@ function dispatch(event: RendererEvent): void {
 
 const renderer = new Renderer(screen, dispatch);
 
+// On a phone the browser's status bar strip and safe areas take the color the
+// app draws at its top edge (chromeColor.ts).
+const chromeColor = deviceMode ? new ChromeColor(device, screen) : null;
+if (chromeColor) renderer.afterLayout = () => chromeColor.schedule();
+
 // 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) => {
@@ -122,6 +135,7 @@ function applyTheme(theme: Theme, persist: boolean): void {
   themeToggle.setAttribute('aria-pressed', String(theme === 'dark'));
   themeToggle.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
   renderer.setEnvironment({ colorScheme: theme });
+  chromeColor?.schedule();
   if (persist) {
     try {
       localStorage.setItem(THEME_KEY, theme);
@@ -210,8 +224,8 @@ function currentSizeClass(): HorizontalSizeClass {
 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
+  // `#screen` fills the viewport (styles.css); the renderer re-reads its size
+  // when it resizes. 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());
@@ -357,9 +371,78 @@ function launchEnvironment(): string[] {
   if (zone) env.push(`TZ=${zone}`);
   const defaults = readStoredDefaults();
   if (defaults !== null) env.push(`SB_DEFAULTS=${defaults}`);
+  // Signing in: the app's URL schemes (its Info.plist's CFBundleURLTypes) and
+  // the callback page its OAuth redirects become (webAuth.ts).
+  const schemes = registeredApp()?.urlSchemes;
+  if (schemes?.length) env.push(`SB_URL_SCHEMES=${schemes.join(',')}`);
+  env.push(`SB_WEB_AUTH_CALLBACK=${callbackPageURL(new URL(import.meta.env.BASE_URL, location.href).href)}`);
   return env;
 }
 
+// ---------------------------------------------------------------------------
+// Phase 18: SwiftData's stores, kept in IndexedDB
+// ---------------------------------------------------------------------------
+
+/** The app's database, or null where the browser has no IndexedDB (or forbids it). */
+const swiftData: SwiftDataPersistence | null = (() => {
+  try {
+    return typeof indexedDB === 'undefined' ? null : indexedDBPersistence(requestedApp);
+  } catch {
+    return null;
+  }
+})();
+
+/**
+ * Every SwiftData store the app saved, for `SB_SWIFTDATA`. `?swiftdata=reset`
+ * deletes them first (a model changed in a way the saved records cannot
+ * follow). A database that cannot be read starts the app empty.
+ */
+async function loadSwiftData(): Promise<SwiftDataStores> {
+  if (!swiftData) return {};
+  try {
+    if (params.get('swiftdata') === 'reset') await swiftData.clear();
+    return await swiftData.load();
+  } catch (error) {
+    console.warn('[sb] could not read the SwiftData stores; starting empty', error);
+    return {};
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Phase 19: the app's home directory, kept in IndexedDB
+// ---------------------------------------------------------------------------
+
+const files: FilesPersistence | null = (() => {
+  try {
+    return typeof indexedDB === 'undefined' ? null : indexedDBFiles(requestedApp);
+  } catch {
+    return null;
+  }
+})();
+
+/** The home as last written to IndexedDB, to diff the live tree against. */
+let savedHome: HomeEntries = new Map();
+
+/** The saved home (`?files=reset` deletes it first); empty when it cannot be read. */
+async function loadHome(): Promise<HomeEntries> {
+  if (!files) return new Map();
+  try {
+    if (params.get('files') === 'reset') await files.clear();
+    return await files.load();
+  } catch (error) {
+    console.warn('[sb] could not read the app\'s files; starting empty', error);
+    return new Map();
+  }
+}
+
+/** Writes what the app changed in its home since the last write. */
+function saveHome(home: ReturnType<typeof homeDirectory>): void {
+  const changes = diffHome(savedHome, homeEntries(home));
+  if (changes.put.length === 0 && changes.remove.length === 0) return;
+  savedHome = applyHomeChanges(savedHome, changes);
+  files?.apply(changes).catch((error: unknown) => console.warn('[sb] could not save the app\'s files to IndexedDB', error));
+}
+
 /** 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>();
@@ -489,7 +572,35 @@ async function boot(): Promise<void> {
     console.info(`[sb] restoring state for ${requestedApp}: ${restored}`);
   }
   const bundle = await loadBundle(requestedApp);
-  app = await loadApp(url, onOps, { args: [requestedApp], env, bundle, onDefaults: storeDefaults });
+  const stores = launchValue(await loadSwiftData());
+  if (stores !== null) env.push(`SB_SWIFTDATA=${stores}`);
+  savedHome = await loadHome();
+  const home = homeDirectory(savedHome);
+  // The standard directories a new home gets are saved with its first write.
+  const corsProxy = registeredApp()?.corsProxy;
+  app = await loadApp(url, onOps, {
+    args: [requestedApp],
+    env,
+    bundle,
+    home,
+    onFilesWritten: () => saveHome(home),
+    onDefaults: storeDefaults,
+    // `ShareLink` shares asset-catalog images as their files. An app built
+    // with a CORS proxy retries a refused cross-origin read through it
+    // (corsProxy.ts); one built with blocked hosts never reaches them (blockedHosts.ts).
+    requests: {
+      ...browserEnvironment,
+      fetch: withBlockedHosts(
+        corsProxy ? withCORSProxy(browserEnvironment.fetch, corsProxy, location.origin) : browserEnvironment.fetch,
+        registeredApp()?.blockedHosts ?? [],
+      ),
+      assetURL: (name) => assets.images[name]?.src,
+      bitmapFile: (recipe) => bitmapStore.png(recipe),
+    },
+    onSwiftData: (op) => {
+      swiftData?.apply(op).catch((error: unknown) => console.warn('[sb] could not save to IndexedDB', error));
+    },
+  });
   setLoaded(requestedApp);
   sendEnvironment();
   flushQueuedEvents();
@@ -527,6 +638,10 @@ declare global {
        * module (or mock) has no executor.
        */
       runJobs: () => number | null;
+      /** Phase 19: the app's home as IndexedDB holds it now: path → text of each file (`null` for a directory). */
+      files: () => Promise<Record<string, string | null>>;
+      /** Phase 18: the app's SwiftData stores as IndexedDB holds them now (all saves written). */
+      swiftData: () => Promise<SwiftDataStores>;
       /** The executor driver class, so tests can run it against a stub. */
       JobScheduler: new (
         run: (nowMs: number) => number,
@@ -550,5 +665,10 @@ window.__sb = {
   assets: () => assets,
   animation: { easingFor, timingFor, springEasing },
   runJobs: () => app?.runJobs() ?? null,
+  swiftData: async () => (swiftData ? swiftData.load() : {}),
+  files: async () => {
+    const entries = files ? await files.load() : new Map<string, Uint8Array | null>();
+    return Object.fromEntries([...entries].map(([path, data]) => [path, data === null ? null : new TextDecoder().decode(data)]));
+  },
   JobScheduler,
 };